<template>
  <div class="deviceList">
    <div class="table-container">
      <div class="table-header">
        <div class="table-row">
          <div class="table-cell textAlign" style="width: 40%">传感器名称</div>
          <!-- <div class="table-cell" style="width: 20%"></div> -->
          <!-- <div class="table-cell textAlign" style="width: 60%">传感器名称</div> -->
          <div class="table-cell textAlign" style="width: 40%">最新采集时间</div>
        </div>
      </div>

      <div class="table-body">
        <ul
          class="table-row"
          :class="{ 'table-row-active': activeEquipId === item.deviceCode }"
          v-for="(item, index) in datatable"
          :key="index"
          @click="sbEvent(item)"
        >
          <li class="table-cell" style="width: 40%" :title="item.sensorSiteCode">
            {{ item.sensorSiteCode }}
          </li>

          <!-- <li :style="item.tableCellIcon"> </li> -->
          <!-- <li class="table-cell-left" style="width: 40%" :title="item.monitorPointName">
            {{ item.monitorPointName }}
          </li> -->
          <li class="table-cell-left" style="width: 40%" :title="item.onlineTime">
            {{ item.onlineTime }}
          </li>
        </ul>
      </div>

      <div class="deviceBack" @click="backPanel" v-if="datatable.length > 0 && !isloading">
        <img :src="imageList.doubleScreenBack" class="toolImage" />
      </div>
      <div style="display: flex; justify-content: center; margin-top: -30px" v-if="datatable.length == 0 && !isloading"> 暂无数据</div>
      <div style="display: flex; justify-content: center; margin-top: -30px" v-if="isloading"> <a-spin /></div>
    </div>
  </div>
</template>

<script>
import { Spin } from 'ant-design-vue';
import { defineComponent, reactive, toRefs, ref, watch, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
import { session } from '/@/utils/memory';
import { useGeologicalStore } from '/@/store/modules/geological';
export default defineComponent({
  name: 'WaterDevice',
  components: {},
  props: {
    statusList: {
      type: Object,
    },
  },

  setup(props, { emit }) {
    const datatable = ref([]);
    const isloading = ref(false);
    const geologicalStore = useGeologicalStore();
    let devRes = {
      success: true,
      message: '',
      code: 200,
      result: {
        records: [
          {
            id: '90610001',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:12',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '羊村水文站',
            hydrologyDeviceCode: '90610001',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区山南市桑日县羊村',
            hydrologyDeviceLon: 91.816667,
            hydrologyDeviceLat: 29.266667,
            hydrologyDeviceonline: 0,
            catchmentArea: 153191,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '离线',
          },
          {
            id: '90610002',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:12',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '朗县水文站',
            hydrologyDeviceCode: '90610002',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: null,
            hydrologyDeviceLon: 93.033333,
            hydrologyDeviceLat: 29.05,
            hydrologyDeviceonline: 0,
            catchmentArea: 162844,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '离线',
          },
          {
            id: '90610003',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:12',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: 'ML水文站',
            hydrologyDeviceCode: '90610003',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区林芝市米林县扎西绕登乡甲玛村',
            hydrologyDeviceLon: 94.233333,
            hydrologyDeviceLat: 29.233333,
            hydrologyDeviceonline: 1,
            catchmentArea: 172170,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '在线',
          },
          {
            id: '90610004',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:12',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '派镇水文站',
            hydrologyDeviceCode: '90610004',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: null,
            hydrologyDeviceLon: 94.866667,
            hydrologyDeviceLat: 29.516667,
            hydrologyDeviceonline: 0,
            catchmentArea: 192977,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '离线',
          },
          {
            id: '90610005',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:12',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '排龙水文站',
            hydrologyDeviceCode: '90610005',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区波密县境内',
            hydrologyDeviceLon: 95.05,
            hydrologyDeviceLat: 30.066667,
            hydrologyDeviceonline: 1,
            catchmentArea: 25656,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '在线',
          },
          {
            id: '90610006',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:12',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '汗密水文站',
            hydrologyDeviceCode: '90610006',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区林芝市墨脱县背崩乡汗密',
            hydrologyDeviceLon: 95.133333,
            hydrologyDeviceLat: 29.366667,
            hydrologyDeviceonline: 1,
            catchmentArea: 126,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '在线',
          },
          {
            id: '90610007',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:12',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '德兴水文站',
            hydrologyDeviceCode: '90610007',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区林芝市墨脱县德兴乡德兴村',
            hydrologyDeviceLon: 95.3,
            hydrologyDeviceLat: 29.316667,
            hydrologyDeviceonline: 1,
            catchmentArea: 225871,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '在线',
          },
          {
            id: '90610008',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:13',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '希让水文站',
            hydrologyDeviceCode: '90610008',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区林芝市墨脱县背崩乡希让村',
            hydrologyDeviceLon: 95.016667,
            hydrologyDeviceLat: 29.166667,
            hydrologyDeviceonline: 0,
            catchmentArea: 227409,
            isNew: 0,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '离线',
          },
          {
            id: '90610009',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:13',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '扎西绕登水文站',
            hydrologyDeviceCode: '90610009',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区林芝市米林县扎西绕登乡',
            hydrologyDeviceLon: 94.033333,
            hydrologyDeviceLat: 29.266667,
            hydrologyDeviceonline: 0,
            catchmentArea: 1050,
            isNew: 1,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '离线',
          },
          {
            id: '90610010',
            createBy: 'sw',
            createTime: '2023-07-11 14:48:13',
            updateBy: null,
            updateTime: '2023-07-13 00:00:01',
            hydrologyDeviceName: '尼西水文站',
            hydrologyDeviceCode: '90610010',
            hydrologyDeviceKind: 'L3SW',
            hydrologyDeviceLocation: '西藏自治区林芝市巴宜区尼西村',
            hydrologyDeviceLon: 94.2,
            hydrologyDeviceLat: 29.75,
            hydrologyDeviceonline: 0,
            catchmentArea: 16148,
            isNew: 1,
            hydrologyDeviceKind_dictText: '水文站',
            hydrologyDeviceonline_dictText: '离线',
          },
        ],
        total: 94,
        size: 10,
        current: 1,
        orders: [],
        optimizeCountSql: true,
        searchCount: true,
        countId: null,
        maxLimit: null,
        pages: 10,
      },
      timestamp: 1689238515268,
    };

    //   console.log(statusList,'statusList');
    // console.log('设备参数:', props.statusList);
    const data = reactive({
      activeSensorId: '',
      equipDatas: [],
    });
    const { statusList } = toRefs(props);
    // console.log('设备参数:', statusList);
    const imageList = reactive({
      doubleScreenBack: doubleScreenBack,
    });
    let devid = ref();
    const activeEquipId = ref(String);

    /**
     * @description 设备定位
     */
    const sbEvent = (i) => {
      console.log('现在的参数:', i);
      activeEquipId.value = i.deviceCode; //获取选中状态

      // let op = {
      //   destination: { x: i.sensorLon, y: i.sensorLat, z: 5000 },
      //   orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      // };
      // map.flyTo(op, 1, () => {
      //   TFMapUitl.mapPointLocation_list([i.sensorLon, i.sensorLat]);
      //   var html = TFMapUitl.waterDevMarkerDom(i);
      //   map.openInfoWindowHtml(html, { position: [i.sensorLon, i.sensorLat] }, (tempValue) => {
      //     TFMapUitl.clearPointLocation_list(map);
      //   });
      //   map.popup.setOffset(0, -50);
      // });
      console.log('现在的参数:', i);
      console.log(data, 'data');
      data.activeSensorId = data.activeSensorId === i.sensorPublicCode ? '' : i.sensorPublicCode;
      session.setItem('sensorInnerCode', i.sensorInnerCode);
      //获取设备数据拼接
      let obj = data.equipDatas.find((item) => item.deviceCode === i.hydrologyDeviceCode);
      var i = { ...i, ...(obj || {}) };

      console.log(i, '这个是匹配的数据');
      i.deviceLon = i.sensorLon;
      i.deviceLat = i.sensorLat;
      i.deviceLon = i.sensorLon;
      i.deviceLon = i.sensorLon;
      i.deviceLon = i.sensorLon;

      geologicalStore
        .getVisualangle({
          type: 'sb',
          typeId: i.monitorPointId + '',
        })
        .then((res) => {
          console.log('222222:', res);
          var d = [i.deviceLon, i.deviceLat, map.terrain ? i.elevation : 0];
          if (res) {
            map.flyTo(res, 1, () => TFMapUitl.trends(d, null, true), editStyleCgq(i, d));
          } else {
            TFMapUitl.trends(d, () => editStyleCgq(i, d));
          }
        });
    };

    //获取传感器类别
    function editStyleCgq(i, d) {
      console.log(i, d, '获取传感器类别参数');
      map.openInfoWindowHtml(TFMapUitl.sensorMarkerDom(i), { position: d }, () => {
        TFMapUitl.clearPointLocation_list(map);
      });
      // map.popup.setOffset(0, -50);
      map.popup.setOffset(-235, 80);
    }

    /**
     * 查询全部的设备列表
     */
    function getDeciveList() {
      console.log('设备参数', statusList.value);
      let resdata = {
        success: true,
        message: '',
        code: 200,
        result: {
          records: [
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90660004',
              deviceSn: '90660004',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9066000484',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9066000484',
              sensorInnerCode: '9066000484',
              sensorType: '[L3_YL]雨量',
              sensorTypeCode: 'L3YL',
              sensorLon: 95.016667,
              sensorLat: 29.166667,
              sensorSiteCode: '希让4m灌木层雨量',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90660003',
              deviceSn: '90660003',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9066000384',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9066000384',
              sensorInnerCode: '9066000384',
              sensorType: '[L3_YL]雨量',
              sensorTypeCode: 'L3YL',
              sensorLon: 94.9,
              sensorLat: 29.55,
              sensorSiteCode: '大渡卡4m灌木层雨量',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90660002',
              deviceSn: '90660002',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9066000284',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9066000284',
              sensorInnerCode: '9066000284',
              sensorType: '[L3_YL]雨量',
              sensorTypeCode: 'L3YL',
              sensorLon: 93.883333,
              sensorLat: 29.116667,
              sensorSiteCode: '里龙4m灌木层雨量',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90660001',
              deviceSn: '90660001',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9066000184',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9066000184',
              sensorInnerCode: '9066000184',
              sensorType: '[L3_YL]雨量',
              sensorTypeCode: 'L3YL',
              sensorLon: 94.033333,
              sensorLat: 29.033333,
              sensorSiteCode: 'ML机场4m灌木层雨量',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90650009',
              deviceSn: '90650009',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9065000989',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9065000989',
              sensorInnerCode: '9065000989',
              sensorType: '[L4_DY]电压',
              sensorTypeCode: 'L4DY',
              sensorLon: 95,
              sensorLat: 29.45,
              sensorSiteCode: '拉格电压',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90650009',
              deviceSn: '90650009',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9065000984',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9065000984',
              sensorInnerCode: '9065000984',
              sensorType: '[L3_YL]雨量',
              sensorTypeCode: 'L3YL',
              sensorLon: 95,
              sensorLat: 29.45,
              sensorSiteCode: '拉格雨量',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90650008',
              deviceSn: '90650008',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9065000889',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9065000889',
              sensorInnerCode: '9065000889',
              sensorType: '[L4_DY]电压',
              sensorTypeCode: 'L4DY',
              sensorLon: 95.166667,
              sensorLat: 29.316667,
              sensorSiteCode: 'ANQ施工区电压',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90650008',
              deviceSn: '90650008',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9065000884',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9065000884',
              sensorInnerCode: '9065000884',
              sensorType: '[L3_YL]雨量',
              sensorTypeCode: 'L3YL',
              sensorLon: 95.166667,
              sensorLat: 29.316667,
              sensorSiteCode: 'ANQ施工区雨量',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90650007',
              deviceSn: '90650007',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9065000789',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9065000789',
              sensorInnerCode: '9065000789',
              sensorType: '[L4_DY]电压',
              sensorTypeCode: 'L4DY',
              sensorLon: 95.016667,
              sensorLat: 29.45,
              sensorSiteCode: '拉格探洞电压',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
            {
              monitorPointCode: '9061',
              monitorPointId: '1678595576800772097',
              monitorPointName: '水文点位',
              deviceCode: '90650007',
              deviceSn: '90650007',
              startStop: '1',
              inWarning: '0',
              inMaintenance: '0',
              deviceOnlineCode: 0,
              deviceOnline: '离线',
              sensorPublicCode: '9065000784',
              rtuCode: null,
              rtuKey: null,
              dataStreamCode: null,
              sensorCode: '9065000784',
              sensorInnerCode: '9065000784',
              sensorType: '[L3_YL]雨量',
              sensorTypeCode: 'L3YL',
              sensorLon: 95.016667,
              sensorLat: 29.45,
              sensorSiteCode: '拉格探洞雨量',
              sensorLocation: null,
              sensorSerial: null,
              stateCode: 0,
              state: '离线',
              onlineTime: null,
              dataSource: '监测数据',
              departName: '项目管理机构',
              is4g: 1,
              value1: null,
              value2: null,
              value3: null,
              value4: null,
              value5: null,
              value6: null,
              inMaintenance_dictText: '正常',
            },
          ],
          total: 226,
          size: 10,
          current: 1,
          orders: [],
          optimizeCountSql: true,
          searchCount: true,
          countId: null,
          maxLimit: null,
          pages: 23,
        },
        timestamp: 1689236971336,
      };
      // isloading.value = true;

      // datatable.value  = statusList
      const monitorDevicesStore = useMonitorDevicesStore();

      // monitorDevicesStore
      //   .waterDeviceStatus({
      //     pageNo: 1,
      //     pageSize: 1000,
      //     deviceCode: devid.value.deviceCode,
      //   })
      //   .then((res) => {
      //     isloading.value = false;
      //     console.log('水文状态列表获取设备列表:', res);

      //     res.result.records.map((e) => {});

      //     // datatable.value = res.result.records;
      //   })
      //   .catch((err) => {
      //     isloading.value = false;
      //   });
      //   datatable.value = resdata.result.records; //使用假数据
      // console.log(datatable.value, 'datatable');
    }

    /**
     * @description 返回
     */
    const backPanel = () => {
      emit('showStatus', true);
    };

    const getEquipData = () => {
      const monitorDevicesStore = useMonitorDevicesStore();
      monitorDevicesStore
        .waterDevice({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          if (res.code === 200) {
            data.equipDatas = res.result.records;
            // data.equipDatas = devRes.result.records; //使用假数据
          }
        });
    };

    /**
     * @description 初始加载
     */
    onMounted(() => {
      console.log('子组件挂载?');
      eventBus.on('getValue', (data) => {
        devid.value = data;
        console.log('子组件获取了值!', devid.value);
        getDeciveList();
      });
      getEquipData();
    });

    return {
      getEquipData,
      statusList,
      getDeciveList,
      datatable,
      isloading,
      activeEquipId,
      devid,
      backPanel,
      data,
      sbEvent,
      editStyleCgq,
      imageList,
    };
  },
});
</script>

<style lang="less" scoped>
.deviceList {
  // height: 100%;
  border: 1px solid transparent;
  // background: rgba(3, 49, 79, 0.4);
  // padding: 5px 20px 5px;
  // border: 1px red solid;

  .deviceBack {
    height: 40px;
    width: 100%;
    position: relative;
    // border: 1px red solid;
    display: flex;
    justify-content: flex-end;

    .toolImage {
      position: relative;
      top: -12px;
      -webkit-transform: rotateY(180deg);
    }
  }

  .table-container {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    overflow: hidden;
    // height: calc(100% - 0px) !important;
    height: 196px;
    // margin-top: -10px;

    .textAlign {
      text-align: center;
      display: flex;
      justify-content: center;
    }

    .table-header {
      // margin-bottom: 10px;
      height: 36px !important;
      color: #00d0e3;
      font-weight: normal;
      // &::after {
      //   // position: absolute;
      //   content: '';
      //   height: 1px;
      //   display: block;
      //   background-image: radial-gradient(#03dcf6, #032236);
      //   border-radius: 50%;
      //   box-shadow: 0px -5px 10px 0px #ccc;
      // }

      .table-row {
        display: flex;
        flex-direction: row;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
      }
    }

    .table-body {
      // margin-top: 10px;
      overflow-y: auto;
      // max-height: 300px;
      min-height: calc(100% - 40px - 50px);
      color: #fff;

      ::v-deep(ul) {
        background: transparent;
      }

      .table-row {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
      }

      .table-row:hover {
        background: rgba(0, 175, 237, 0.1);
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, rgba(0, 175, 237, 0) 10%, rgba(0, 175, 237, 1) 50%, rgba(0, 175, 237, 0) 90%) 20 20;
      }

      .table-row-active {
        background: rgba(0, 175, 237, 0.1);
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, rgba(0, 175, 237, 0) 10%, rgba(0, 175, 237, 1) 50%, rgba(0, 175, 237, 0) 90%) 20 20;
      }
    }

    .table-body::-webkit-scrollbar {
      width: 4px;
      height: 6px;
    }

    .table-body::-webkit-scrollbar-thumb {
      background-color: #007e8f !important;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2) !important;
      border-radius: 2px;
    }

    .table-body::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0.05) !important;
    }

    .table-cell-icon {
      background: url('../../assets/images/deciveIcon/GNSS.png') no-repeat;
      background-size: 80% 80%;
      background: url('/src/assets/images/deciveIcon/CSJCY.png') no-repeat;
      background-size: 50% 50%;
    }

    .table-cell {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // padding: 8px;
      // text-align: center;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: left;
      padding: 8px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .table-cell-left {
      width: 25%;
      display: flex;
      align-items: center;

      padding: 8px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .table-cell:last-child {
      border-right: none;
    }
  }
}
.table-body::-webkit-scrollbar-thumb {
  // background-color: #ff0000; /* 滚动条滑块颜色 */
}
</style>
