<template>
  <div class="water">
    <div class="table-container sblb" v-if="isStatusListShow">
      <div class="table-header">
        <div class="table-row">
          <div class="table-cell textAlign" style="width: 30%">站名</div>
          <!-- <div class="table-cell" style="width: 20%"></div> -->
          <div class="table-cell textAlign" style="width: 40%">集水面积(k㎡)</div>
          <div class="table-cell textAlign" style="width: 20%">测站类型</div>
          <div class="table-cell textAlign" style="width: 40%">最新采集时间</div>
        </div>
      </div>
      <div
        style="
          width: 400px;
          height: 3px;
          margin-top: -16px;
          background-image: radial-gradient(#03dcf6, #032236);
          border-radius: 50%;
          box-shadow: 0px -5px 10px 0px #ccc;
        "
      >
      </div>
      <div class="table-body">
        <ul
          class="table-row"
          :class="{ 'table-row-active': activeEquipId === item.id }"
          v-for="(item, index) in datatable"
          :key="index"
          @click="sbEvent(item), sbState(item)"
        >
          <li class="table-cell" style="width: 30%" :title="item.hydrologyDeviceName">
            {{ item.hydrologyDeviceName }}
          </li>
          <!-- <li class="table-cell-icon" style="width: 20%"> </li> -->
          <!-- <li :style="item.tableCellIcon"> </li> -->
          <li class="table-cell-left" style="width: 25%" :title="item.catchmentArea">
            {{ item.catchmentArea }}
          </li>
          <li class="table-cell" style="width: 20%" :title="item.hydrologyDeviceKind_dictText">
            {{ item.hydrologyDeviceKind_dictText }}
          </li>
          <li class="table-cell" :style="item.online ? onlineState1 : onlineState" :title="item.createTime">
            {{ item.createTime }}
            <!-- <span class="tooltip"> {{ item.online_dictText }} </span> -->
          </li>
        </ul>
      </div>
    </div>
    <waterDevice class="status" style="" @showStatus="showStatus" :statusList="statusList" v-if="!isStatusListShow" />
  </div>
</template>

<script>
import { useModal } from '/@/components/Modal';
import { SearchOutlined, LineChartOutlined } from '@ant-design/icons-vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import { Select } from 'ant-design-vue';
import { defineComponent, reactive, toRefs, ref, watch, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import { session } from '/@/utils/memory';
import { useGeologicalStore } from '/@/store/modules/geological';
// import deciveIconObj from './deciveIconObj';
import { useMapStore } from '/@/store/modules/map';
import waterDevice from './waterDevice.vue';
import { any } from 'vue-types';
export default defineComponent({
  name: 'Water',
  components: {
    waterDevice,
  },
  setup(props, context) {
    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,
    };

    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,
    };

    const datatable = ref([]);
    const statusList = ref(any);
    const geologicalStore = useGeologicalStore();
    const monitorDevicesStore = useMonitorDevicesStore();
    let isStatusListShow = ref(true); //监测状态统计
    //获取设备类别
    var activeSbMarker = null;
    function editStyle(i, d) {
      activeSbMarker = map.findOverlay(`sbdmarker&&${i.id}`);
      console.log('activeSbMarkeractiveSbMarkeractiveSbMarker', activeSbMarker);
      if (activeSbMarker) activeSbMarker.update();
      map.openInfoWindowHtml(TFMapUitl.waterMarkerDom(i), { position: d }, () => {
        if (activeSbMarker) activeSbMarker.update();
        TFMapUitl.clearPointLocation_list(map);
      });
      map.popup.setOffset(0, -120);
    }
    const sbEvent = (i) => {
      session.setItem('sensorInnerCode', '');
      console.log('设备列表点击:', i);
      geologicalStore
        .getVisualangle({
          type: 'sb',
          typeId: i.hydrologyDeviceCode,
        })
        .then((res) => {
          console.log('222222:', res);
          var d = [i.hydrologyDeviceLon, i.hydrologyDeviceLat, map.terrain ? i.elevation : 0];
          if (activeSbMarker) activeSbMarker.update();
          if (res) {
            map.flyTo(res, 1, () => TFMapUitl.trends(d, null, true), editStyle(i, d));
          } else {
            TFMapUitl.trends(d, () => editStyle(i, d));
          }
        });
    };

    const showStatus = (value) => {
      console.log('子组件的值', value);
      isStatusListShow.value = value;
      // if (sbType.length) sbType.map((m) => (m.entity.billboard.scale = 1));
    };
    const sbState = (item) => {
      statusList.value = item;
      isStatusListShow.value = false;
      console.log('点击完毕');

      setTimeout(() => {
        eventBus.emit('getValue', item);
      }, 100);
    };

    onMounted(() => {
      console.log('要使用水文接口了??????????');
      monitorDevicesStore
        .waterDevice({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log('这是水文数据-------', res);
          datatable.value = res.result.records;
          console.log(resdata, 'resdata死数据');
        });
      //  datatable.value = devRes.result.records;//假数据

      //   monitorDevicesStore
      //     .waterDeviceStatus({
      //       pageNo: 1,
      //       pageSize: 1000,
      //     })
      //     .then((res) => {
      //       console.log('这是水文状态数据-------', res);
      //     });
    });
    return {
      editStyle,
      isStatusListShow,
      showStatus,
      datatable,
      sbEvent,
      sbState,
    };
  },
  data() {
    return {
      datatable: [],
      devicesTotal: 0,
      online: [],
      offline: [],
      onlineState: {},
      onlineState1: {},
      onlineNum: 0,
      unOnlineNum: 0,
      isLineNum: {
        onlineNum: 0,
        unOnlineNum: 0,
      },
      // 传感器
      sensorsList: [],
      onlineSenNum: 0,
      unOnlineSenNum: 0,
      isOnlineSenNum: {
        onlineSenNum: 0,
        unOnlineSenNum: 0,
      },
      tableCellIcon: '',
      activeEquipId: '',
      toDeviceCode: '',
    };
  },
  methods: {
    //通过设备ID获取传感器列表
  },
});
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('/src/assets/font/AlimamaShuHeiTi-Bold.ttf');
}

@font-face {
  font-family: 'AgencyFB';
  src: url('/src/assets/font/AgencyFB-Bold.ttf');
}

.xtjc-left-side {
  // position: fixed;
  position: absolute;
  left: 20px;
  top: 90px;
  z-index: 3;
  width: 400px;
  // height: 100%;

  .sbState {
    cursor: pointer;
  }

  ::v-deep .ant-modal-body {
    overflow: hidden;
  }

  .tf_model {
    overflow: hidden;
  }

  .tf_model :deep(.ant-modal-content) {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  ::v-deep .ant-input-affix-wrapper {
    border: 0px solid #303030 !important;
  }

  .modle_qx li:last-child {
    width: 100%;
    height: 664px;
    overflow: hidden;
  }

  ::v-deep .ant-tree {
    background: rgba(8, 39, 55, 0) !important;
    color: #fff !important;
  }

  ::v-deep .tf_model .ant-modal-content {
    background-color: rgba(8, 39, 55, 0.5) !important;
  }

  ::v-deep .tf_model .ant-modal-header {
    background-color: rgba(8, 39, 55, 0.5) !important;
  }

  .modle_qx {
    height: 664px;
  }

  .modle_qx li:first-child {
    width: 0px;
    height: 664px;
    background: #042d49;
    overflow-y: auto;
  }

  .modle_qx li {
    float: left;
  }

  table {
    width: 400px;
    border-collapse: collapse;
  }

  tbody {
    background: rgba(3, 49, 79, 0);
  }

  th,
  td {
    padding: 10px;
    text-align: left;
    color: #fff;
  }

  tbody tr:hover {
    background: rgba(8, 39, 55, 0.6);
    color: #fbdd41;
  }

  // .table-body li:last-child {
  //   color: #fcdf64;
  //   cursor: pointer;
  // }
  .sbzt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    margin-right: 6px;
  }

  .sbzt-online {
    box-shadow: #17eea4 0px 0px 8px;
    background: #17eea4;
  }

  .sbzt-off {
    box-shadow: #ff4f4a 0px 0px 8px;
    background: #ff4f4a;
  }

  .table-header {
    margin-bottom: 10px;
    color: #00d0e3;
    font-weight: normal;
  }

  .table-body {
    margin-top: 10px;
    .table-row {
      cursor: pointer;
    }
    // .table-row:hover:after {
    //   content: '';
    //   height: 1px;
    //   width: 100%;
    //   position: absolute;
    //   background: linear-gradient(to right, rgba(3, 49, 79, 0.4) 10%, #00afed 50%, rgba(3, 49, 79, 0.4) 90%);
    //   top: 38px;
    // }
    // .table-row-active:after {
    //   content: '';
    //   height: 1px;
    //   width: 100%;
    //   position: absolute;
    //   background: linear-gradient(to right, rgba(3, 49, 79, 0.4) 10%, rgba(0, 175, 237,1) 50%, rgba(3, 49, 79, 0.4) 90%);
    //   top: 38px;
    // }
    .table-row:hover {
      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;
    }
  }
  .water {
    height: 200px;
    width: 100%;
    color: #fff;
    position: absolute;
  }
  .table-container {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    overflow: hidden;
    overflow-y: auto;
    // height: calc(100% - 120px) !important;
    margin-top: -10px;

    .textAlign {
      text-align: center;
      display: flex;
      justify-content: center;
      z-index: 999;
      font-size: 14px;
    }
  }

  .table-header {
    height: 36px !important;
    background: rgba(3, 49, 79, 0);
    font-size: 14px;
    font-weight: bold;
  }

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

  .table-cell-icon {
    background: url('/src/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;
  }

  .table-cell:last-child {
    border-right: none;
  }

  .table-body {
    overflow-y: auto;
    max-height: 300px;
    // margin-top: 10px;
  }

  .table-body2 {
    overflow-y: auto;
    overflow-x: clip;
    height: calc(100vh - 300px);
  }

  .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;
  }

  .sblb tr {
    background: rgba(3, 49, 79, 0.4);
    margin-bottom: 10px;
  }

  ::v-deep .my-select2 .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0px solid rgba(0, 0, 0, 0) !important;
  }

  ::v-deep .ant-input-search-button {
    background: rgba(8, 39, 55, 0) !important;
    border: 0px;
  }

  ::v-deep .ant-input-affix-wrapper {
    background: rgba(8, 39, 55, 0) !important;
    border: 0px;
  }

  ::v-deep .ant-input {
    background: rgba(8, 39, 55, 0) !important;
    border: 0px;
  }

  .my-select2 {
    margin: 20px 0;
    background: rgba(3, 49, 79, 0.4);
    border: #096589 solid 1px;
    width: 400px;
  }

  .totalLeaf i {
    font-family: 'AgencyFB';
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    color: #fff;
    line-height: 142px;
    text-align: center;
    margin-left: 46px;
    cursor: pointer;
  }

  .totalLeaf b {
    color: #fff;
  }

  .totalLeaf {
    width: 143px;
    height: 142px;
    background: url('/src/assets/images/totalLeaf.png') no-repeat;
    display: inline-block;
    margin-right: 33px;
  }

  ::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0px solid #ffffff !important;
  }

  ::v-deep .ant-select-selection-item {
    color: #fff;
  }

  .total {
    position: relative;
    padding: 20px;
    padding-top: 5px;
    width: 100%;
    height: 40%;
    color: #fff;
    border: 1px solid transparent;
    margin-bottom: 10px;
    background: rgba(3, 49, 79, 0.4);
    border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
  }
  .total:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100%;
    border-left: 1px solid transparent;
    border-radius: 5px;
    border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
    // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
  }
  .total:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid transparent;
    border-radius: 5px;
    border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  }

  .total-title {
    background: url('../../assets/images/sjx1.png') no-repeat;
  }

  .total-chart {
    height: 150px;
    width: 150px;
    margin-top: -13px;
    margin-left: -40px;
  }

  .total-num {
    position: relative;
    background: rgba(88, 17, 211, 0.1);
    float: right;
    margin-top: -100px;
    height: 50px;
    width: 320px;
    border-radius: 30px;
  }

  .totalLine {
    width: 1px;
    height: 40px;
    margin-left: 150px;
    background: linear-gradient(0deg, rgba(39, 132, 236, 0.02) 1%, rgba(4, 143, 231, 0.97) 49%, rgba(4, 143, 231, 0) 100%);
    opacity: 1;
  }

  .total2 {
    position: relative;
    padding: 20px;
    padding-top: 5px;
    width: 100%;
    height: 40% !important;
    color: #fff;
    border: 1px solid transparent;
    background: rgba(3, 49, 79, 0.4);
    border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
  }
  .total2:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100%;
    border-left: 1px solid transparent;
    border-radius: 5px;
    border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
    // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
  }
  .total2:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid transparent;
    border-radius: 5px;
    border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  }

  .leafTotal {
    width: 400px;
    height: 31px;
    background: url('../../assets/images/jcsbtj2.png') no-repeat;
    font-size: 19px;
    font-weight: bold;
    color: #fff;
    line-height: 31px;
    margin: -10px 0px 10px 0px;
    z-index: 1;
  }

  .leafTotal i {
    margin-left: 32px;
    font-family: 'AlimamaShuHeiTi';
    margin-right: 50px;
    font-weight: bold;
    font-style: italic;
    margin-left: 32px;
  }

  .leafTotal b {
    font-weight: normal;
    font-size: 15px;
    color: #a7e6fa;
  }
  .leftPanel {
    width: 400px;
    height: 31px;
  }

  .ssjc td,
  .ssjc th {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ssjc tr {
    display: flex;
    flex-direction: row;
  }

  .ssjc {
    height: 180px;
  }

  @media screen and (min-width: 2160px) {
    .ssjc {
      height: 390px;
    }
  }

  table {
    width: 400px;
    border-collapse: collapse;
  }

  tbody {
    background: rgba(3, 49, 79, 0.4);
  }

  th,
  td {
    padding: 10px;
    text-align: left;
    color: #fff;
  }

  tbody tr:hover {
    background: rgba(8, 39, 55, 0.6);
    color: #fbdd41;
  }

  .table-header {
    margin-bottom: 10px;
    color: #00d0e3;
    font-weight: normal;
  }

  .table-body .table-row {
    cursor: pointer;
  }

  .table-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    overflow: hidden;
    overflow-y: auto;
    // height: calc(100vh - 200px);
    height: 200px;
  }

  .table-header {
    height: 44px;
    background: rgba(3, 49, 79, 0);
    font-size: 14px;
    font-weight: bold;
  }

  .zxl {
    width: 100%;
    height: 130px;
    background: url('../../assets/images/zxl.png') no-repeat;
    background-size: 100%;
    background-position: -1px;
  }

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

  .table-cell {
    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;
  }

  .total_lb .table-body {
    overflow-y: auto;
    // height: calc(100vh - 520px) !important;
    height: 1000px !important;
  }

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

  .table-body::-webkit-scrollbar-thumb {
    background-color: #007e8f; /* 设置滚动条滑块颜色 */
    border-radius: 3px;
  }

  .table-body::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 3px;
  }

  ul:hover {
    background: rgba(3, 49, 79, 0.4);
  }

  ul {
    position: relative;
  }

  .aa {
    margin-left: 30px;
    background: linear-gradient(0deg, #01dd73 1%, #f2fff8);
    font-family: 'SourceHanSansCN';
    font-size: 20px;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'AgencyFB';
    font-style: italic;
  }

  .bb {
    margin-left: 30px;
    background: linear-gradient(0deg, #fe3333 40%, #fff2f2);
    font-family: 'SourceHanSansCN';
    font-size: 20px;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'AgencyFB';
    font-style: italic;
  }

  .searchPanle {
    width: 150px;
    position: absolute;
    top: 20px;
    left: 270px;
    height: 150px;
    background: rgba(0, 22, 44, 0.7);
    border-radius: 2px;
    border: 1px solid rgba(12, 206, 233, 0.6);
    box-sizing: border-box;
    overflow: auto;
  }

  .allBtu {
    position: relative;
    left: 330px;
    top: -28px;
    padding-left: 25px;
    font-size: 14px;
    background: url('/@/assets/images/全部按钮状态.png') no-repeat;

    cursor: pointer;
    z-index: 999;
    width: 70px;
    height: 28px;
  }
}

.xtjc-left-side {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    left: -400px;
  }

  100% {
    left: 20px;
  }
}
.status {
  height: 200px;
}
</style>
