<!-- 监测设备统计 -->
<template>
  <div class="xtjc-left-side" v-show="mapStore.leftSideMenu">
    <div class="leafTotal">
      <i>监测设备统计</i>
      <!-- <a-button type="text" @click="filerDecive" style="float: right; padding: 5px;">全部</a-button> -->
      <div @click="filerDecive" class="allBtu"></div>
    </div>
    <!-- 设备列表 -->
    <div class="total">
      <div class="total-title">
        <span style="margin-left: 20px; font-size: 16px"
          >设备列表（<span>{{ onlineNum + unOnlineNum }}</span
          >）</span
        >
      </div>
      <div class="zxl">
        <div class="total-chart">
          <WaterSphereDiagram :toOnlineNum="isLineNum" />
        </div>
        <div class="sbState" style="margin-left: 120px; margin-top: -110px; margin-right: 20px" @click="sbState(1)">
          <div class="aa" @click="onlineDevicePosiot">{{ onlineNum }} </div>
          <div style="font-size: 14px; margin-top: -5px">在线设备数</div>
        </div>
        <div class="sbState" style="margin-left: 245px; margin-top: -48px" @click="sbState(0)">
          <div class="bb">{{ unOnlineNum }}</div>
          <div style="font-size: 14px; margin-top: -5px">离线设备数</div>
        </div>
      </div>

      <div class="table-container sblb" v-if="isStatusListShow">
        <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 class="table-cell textAlign" style="width: 20%">状态</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);
              idGetSensorsList(item);
              DeviceClick(item);
            "
          >
            <li class="table-cell" style="width: 40%" :title="item.monitorPointName">
              {{ item.monitorPointName }}
            </li>
            <!-- <li class="table-cell-icon" style="width: 20%"> </li> -->
            <li :style="item.tableCellIcon"> </li>
            <li class="table-cell-left" style="width: 40%" :title="item.deviceKind_dictText">
              {{ item.deviceKind_dictText }}
            </li>
            <li class="table-cell" style="width: 40%" :title="item.deviceName">
              {{ item.deviceName }}
            </li>
            <li class="table-cell" :style="item.online ? onlineState1 : onlineState">
              {{ item.online_dictText }}
              <!-- <span class="tooltip"> {{ item.online_dictText }} </span> -->
            </li>
          </ul>
        </div>
      </div>
      <DeviceDetail class="status" style="" @showStatus="showStatus" :statusList="statusList" v-if="!isStatusListShow" />
    </div>

    <!-- 监测设备 -->
    <div class="total2">
      <div class="total-title">
        <!-- <span style="margin-left: 20px; font-size: 16px"
          >传感器列表（<span>{{ onlineSenNum + unOnlineSenNum }}</span
          >）</span
        > -->
        <span style="margin-left: 20px; font-size: 16px"> <span style="margin-left: 20px; font-size: 16px">实时监测数据</span></span>
      </div>
      <DataCount style="" ref="DataCount" />
      <div class="shishi" v-if="true">
        <!-- <div class="shishiItem" v-for="(item, index) in resArr" :key="index" @click="sbEvent2(item)">
          <div class="ItemTop">
            <img :src="`/src/assets/images/water/${item.sensorType}.png`" alt="" v-show="false" />
        
            <div class="font1"> {{ item.sensorType_dictText }}:({{ item.dangerPointName }})</div
            ><div class="font2">{{ formatTime(item.dataTime) }}&nbsp;({{ getTimeDiff(item.dataTime) }}前)</div>
          </div>
          <div class="ItemBtm">
            <span style="font-size: 12px; line-height: 27px">{{ item.siteCode }}:</span>
            <div v-for="(value, key) in item.valueMap" :key="key">
              <span>
        </div> -->
        <vue3-seamless-scroll :list="resArr" class="scroll" :step="0.2" :hover="true" :wheel="true">
          <template v-for="(item, index) in resArr" :key="index">
            <div class="shishiItem" @click="sbEvent2(item)">
              <div class="ItemTop">
                <img :src="`/src/assets/images/water/${item.sensorType}.png`" alt="" v-show="false" />
                <div class="font1"> {{ item.sensorType_dictText }}:({{ item.dangerPointName }})</div
                ><div class="font2">{{ formatTime(item.dataTime) }}</div>
              </div>
              <div class="ItemBtm">
                <span style="font-size: 12px; line-height: 22px">{{ item.siteCode }}：</span>
                <div v-for="(value, key) in item.valueMap" :key="key">
                  <span>
                    <span class="font3">{{ key }}:</span> <span class="font4">{{ value }}</span></span
                  >
                </div>
              </div>
            </div>
          </template>
        </vue3-seamless-scroll>
      </div>

      <!-- <div class="total-chart">
        <WaterSphereDiagramBottom :toOnlie="isOnlineSenNum"></WaterSphereDiagramBottom>
      </div>
      <div class="total-num">
        <div class="totalLine"></div>
        <div style="display: flex;">
          <div class="sbState" style="margin-left: 50px; margin-top: -40px; margin-right: 20px;" @click="cgqState(1)">
            <div style="margin-left: 30px; color: #01DC8C; font-size: 20px;">{{ onlineSenNum }}</div>
            <div style="font-size: 14px; margin-top: -5px;">在线传感数</div>
          </div>
          <div class="sbState" style="margin-left: 50px; margin-top: -40px;" @click="cgqState(0)">
            <div style="margin-left: 30px; color: #de0f0f; font-size: 20px;">{{ unOnlineSenNum }}</div>
            <div style="font-size: 14px; margin-top: -5px;">离线传感数</div>
          </div>
        </div>
      </div> -->

      <div class="zxl" v-if="false">
        <div class="total-chart">
          <WaterSphereDiagramBottom :toDeviceCode="toDeviceCode" :toOnlie="isOnlineSenNum" ref="WaterSphereDiagramBottom" />
        </div>
        <div class="sbState" style="margin-left: 120px; margin-top: -110px; margin-right: 20px" @click="sbState(1)">
          <div class="aa" @click="onlineDevicePosiot">{{ onlineSenNum }} </div>
          <div style="font-size: 14px; margin-top: -5px">在线传感数</div>
        </div>
        <div class="sbState" style="margin-left: 245px; margin-top: -48px" @click="sbState(0)">
          <div class="bb">{{ unOnlineSenNum }}</div>
          <div style="font-size: 14px; margin-top: -5px">离线传感数</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-container sblb" v-if="false">
        <div class="table-header">
          <div class="table-row">
            <div class="table-cell textAlign" style="width: 30%">灾害点</div>
            <div class="table-cell textAlign" style="width: 30%">现场编号</div>
            <div class="table-cell textAlign" style="width: 40%">最新采集时间</div>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 4px;
            margin-top: -15px;
            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"
            v-for="(item, index) in sensorsList"
            :key="index"
            @click="sbEvent1(item)"
            :class="{ 'table-row-active': activeSensorId === item.sensorPublicCode }"
          >
            <li class="table-cell-left" style="width: 30%" :title="item.monitorPointName">
              {{ item.monitorPointName }}
              <!-- <span class="tooltip"> {{ item.sensorType_dictText }} </span> -->
            </li>
            <li class="table-cell textAlign" style="width: 30%" :title="item.sensorSiteCode">
              <!-- {{ item.sensorType }} -->
              {{ item.sensorSiteCode }}
              <!-- <span class="tooltip"> {{ item.sensorSiteCode }} </span> -->
            </li>
            <li class="table-cell" style="width: 40%" :title="item.onlineTime || ''">
              {{ item.onlineTime || '' }}
            </li>
          </ul>
          <div class="page">
            <a-pagination v-model:current="current" simple :total="50" />
          </div>
        </div>
      </div>
    </div>
  </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 series from '../../assets/json/value.json';
import WaterSphereDiagram from './charts/WaterSphereDiagram.vue';
import WaterSphereDiagramBottom from './charts/WaterSphereDiagramBottom.vue';
import { session } from '/@/utils/memory';
import { useGeologicalStore } from '/@/store/modules/geological';
// import deciveIconObj from './deciveIconObj';
import { useMapStore } from '/@/store/modules/map';
import DataCount from './DataCount.vue';
import DeviceDetail from './DeviceDetail.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
export default defineComponent({
  name: 'LeftSide',
  components: {
    SearchOutlined,
    Select,
    LineChartOutlined,
    WaterSphereDiagram,
    WaterSphereDiagramBottom,
    DataCount,
    DeviceDetail,
    Vue3SeamlessScroll,
  },
  setup(props, context) {
    let resData = {
      success: true,
      message: '',
      code: 200,
      result: [
        {
          valueMap: { snow_depth: '0.00m', airtemp_avg: '10.6°C', airtemp_avg: '10.6°C', airtemp_avg: '10.6°C', airtemp_avg: '10.6°C' },
          dataTime: '2023-07-17 13:52:00',
          dangerPointCode: '540424080002',
          dangerPointName: '多雄拉出口雪崩',
          sensorCode: '5404240800020301XS01',
          siteCode: 'XSDX01',
          sensorType: 'L4XS',
          sensorType_dictText: '[L4_XS]雪深站',
        },
        {
          valueMap: { value: '0.00m/s' },
          dataTime: '2023-07-17 13:32:00',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022301LS01',
          siteCode: 'LSGGG01',
          sensorType: 'L3LS',
          sensorType_dictText: '[L3_LS]流速',
        },
        {
          valueMap: { value: '0.00m/s' },
          dataTime: '2023-07-14 14:50:43',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022701LS01',
          siteCode: 'LSGGG01',
          sensorType: 'L3LS',
          sensorType_dictText: '[L3_LS]流速',
        },
        {
          valueMap: { value: '0.48m/s' },
          dataTime: '2023-07-14 14:50:14',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022601LS01',
          siteCode: 'LSGGG01',
          sensorType: 'L3LS',
          sensorType_dictText: '[L3_LS]流速',
        },
        {
          valueMap: { value: '0.00m/s' },
          dataTime: '2023-07-14 14:49:51',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022801LS01',
          siteCode: 'LSGGG01',
          sensorType: 'L3LS',
          sensorType_dictText: '[L3_LS]流速',
        },
        {
          valueMap: { value: '0.00m/s' },
          dataTime: '2023-07-14 14:49:30',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022901LS01',
          siteCode: 'LSGGG01',
          sensorType: 'L3LS',
          sensorType_dictText: '[L3_LS]流速',
        },
        {
          valueMap: { value: '0.00m/s' },
          dataTime: '2023-07-14 14:49:08',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022501LS01',
          siteCode: 'LSGGG01',
          sensorType: 'L3LS',
          sensorType_dictText: '[L3_LS]流速',
        },
        {
          valueMap: { snow_depth: '0.00m', airtemp_avg: '13.8°C' },
          dataTime: '2023-07-14 14:49:00',
          dangerPointCode: '540424080002',
          dangerPointName: '多雄拉出口雪崩',
          sensorCode: '5404240800020401XS01',
          siteCode: 'XSDX02',
          sensorType: 'L4XS',
          sensorType_dictText: '[L4_XS]雪深站',
        },
        {
          valueMap: { 雨量: '0.4mm' },
          dataTime: '2023-07-14 14:48:47',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900020101YL01',
          siteCode: 'YLGGG01',
          sensorType: 'L3YL',
          sensorType_dictText: '[L3_YL]雨量',
        },
        {
          valueMap: { value: '2.19m' },
          dataTime: '2023-07-14 14:48:28',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022401NW01',
          siteCode: 'NWGGG02',
          sensorType: 'L4NW',
          sensorType_dictText: '[L4_NW]泥水位',
        },
        {
          valueMap: { value: '9.02m' },
          dataTime: '2023-07-14 14:48:08',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022501NW01',
          siteCode: 'NWGGG03',
          sensorType: 'L4NW',
          sensorType_dictText: '[L4_NW]泥水位',
        },
        {
          valueMap: { value: '8.37m' },
          dataTime: '2023-07-14 14:47:52',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022601NW01',
          siteCode: 'NWGGG04',
          sensorType: 'L4NW',
          sensorType_dictText: '[L4_NW]泥水位',
        },
        {
          valueMap: { value: '6.23m' },
          dataTime: '2023-07-14 14:47:35',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022701NW01',
          siteCode: 'NWGGG05',
          sensorType: 'L4NW',
          sensorType_dictText: '[L4_NW]泥水位',
        },
        {
          valueMap: { value: '17.13m' },
          dataTime: '2023-07-14 14:47:12',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022801NW01',
          siteCode: 'NWGGG06',
          sensorType: 'L4NW',
          sensorType_dictText: '[L4_NW]泥水位',
        },
        {
          valueMap: { value: '1.83m' },
          dataTime: '2023-07-14 14:46:45',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900022901NW01',
          siteCode: 'NWGGG07',
          sensorType: 'L4NW',
          sensorType_dictText: '[L4_NW]泥水位',
        },
        {
          valueMap: { 雨量: '0.0mm' },
          dataTime: '2023-07-14 13:59:54',
          dangerPointCode: '540424010022',
          dangerPointName: '聂村滑坡',
          sensorCode: '5404240100220101YL01',
          siteCode: 'HMNC-01',
          sensorType: 'L3YL',
          sensorType_dictText: '[L3_YL]雨量',
        },
        {
          valueMap: { gpsTotalX: '-31053.90mm', gpsTotalY: '-5403.20mm', gpsTotalZ: '-7797.30mm' },
          dataTime: '2023-07-14 11:48:28',
          dangerPointCode: '540424090002',
          dangerPointName: '格嘎沟冰川泥石流',
          sensorCode: '5404240900021501GP01',
          siteCode: 'GNSSGGG05',
          sensorType: 'L1GP',
          sensorType_dictText: '[L1_GP]GNSS地表位移',
        },
        {
          valueMap: { gpsTotalX: '2.80mm', gpsTotalY: '-1.30mm', gpsTotalZ: '-18.80mm' },
          dataTime: '2023-07-14 08:00:00',
          dangerPointCode: '540424010022',
          dangerPointName: '聂村滑坡',
          sensorCode: '5404240100221001GP01',
          siteCode: 'GNSS09',
          sensorType: 'L1GP',
          sensorType_dictText: '[L1_GP]GNSS地表位移',
        },
        {
          valueMap: { gpsTotalX: '-0.30mm', gpsTotalY: '2.30mm', gpsTotalZ: '-3.00mm' },
          dataTime: '2023-07-14 08:00:00',
          dangerPointCode: '540424010022',
          dangerPointName: '聂村滑坡',
          sensorCode: '5404240100220601GP01',
          siteCode: 'GNSS05',
          sensorType: 'L1GP',
          sensorType_dictText: '[L1_GP]GNSS地表位移',
        },
        {
          valueMap: { gpsTotalX: '0.40mm', gpsTotalY: '-2.50mm', gpsTotalZ: '-8.80mm' },
          dataTime: '2023-07-14 08:00:00',
          dangerPointCode: '540424010022',
          dangerPointName: '聂村滑坡',
          sensorCode: '5404240100220301GP01',
          siteCode: 'GNSS02',
          sensorType: 'L1GP',
          sensorType_dictText: '[L1_GP]GNSS地表位移',
        },
      ],
      timestamp: 1689317653933,
    };
    const mapStore = useMapStore();
    const { proxy } = getCurrentInstance();
    const geologicalStore = useGeologicalStore();
    let isStatusListShow = ref(true); //监测状态统计
    let statusList = ref('');
    let resArr = ref([
      { name: '米格15bis', time: '12:30:10（19分钟前）', content: 'gps TotalX：－2.00mm，gps TotalY：4.33mm，gps TotalZ： -3.20mm，gps To' },
      { name: '米格15bis', time: '12:30:10（19分钟前）', content: 'gps TotalX：－2.00mm，gps TotalY：4.33mm，gps TotalZ： -3.20mm，gps To' },
      { name: '米格15bis', time: '12:30:10（19分钟前）', content: 'gps TotalX：－2.00mm，gps TotalY：4.33mm，gps TotalZ： -3.20mm，gps To' },
      { name: '米格15bis', time: '12:30:10（19分钟前）', content: 'gps TotalX：－2.00mm，gps TotalY：4.33mm，gps TotalZ： -3.20mm，gps To' },
    ]);
    let DeviceSensorList = ref([]);
    const echarts = proxy.$echarts;
    const getTimeDiff = (dataTime) => {
      var currentTime = new Date(); // 获取当前时间
      var targetTime = new Date(dataTime); // 将传入的时间字符串转换为Date对象

      var diff = Math.abs(currentTime - targetTime); // 计算时间差的绝对值

      var minutes = Math.floor(diff / (1000 * 60)); // 计算分钟数
      if (minutes < 60) {
        return minutes + '分钟';
      }

      var hours = Math.floor(diff / (1000 * 60 * 60)); // 计算小时数
      if (hours < 24) {
        return hours + '小时';
      }

      var days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 计算天数
      return days + '天';
    };
    const showStatus = (value) => {
      console.log('子组件的值', value);
      isStatusListShow.value = true;
      // 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.id);
    //   }, 100);
    // };
    const formatTime = (dataTime) => {
      var targetTime = new Date(dataTime); // 将传入的时间字符串转换为Date对象

      var hours = targetTime.getHours().toString().padStart(2, '0'); // 获取小时，并补零
      var minutes = targetTime.getMinutes().toString().padStart(2, '0'); // 获取分钟，并补零
      var seconds = targetTime.getSeconds().toString().padStart(2, '0'); // 获取秒，并补零

      return hours + ':' + minutes + ':' + seconds;
    };
    const createChart = (id, data) => {
      console.log('data.series:', data.series);
      const chart = echarts.init(document.getElementById(id));
      chart.setOption({
        backgroundColor: 'rgba(8, 39, 55, 1)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: [data.series[0].name, data.series[1].name],
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontStyle: 'normal',
            fontWeight: 'bold',
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'time',
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: 'value',
            show: false,
          },
        ],
        series: [
          {
            name: data.series[0].name,
            symbol: 'none',
            type: 'line',
            stack: 'Total',
            // areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            smooth: true,
            data: data.series[0].data,
          },
          {
            name: data.series[1].name,
            symbol: 'none',
            type: 'line',
            stack: 'Total',
            // areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            smooth: true,
            data: data.series[1].data,
          },
        ],
      });
      return chart;
    };

    const data = reactive({
      activeSensorId: '',
      equipDatas: [],
    });
    var zxjcData = [
      {
        deviceName: '设备1',
        disasterPoint: '灾害点1',
        latestOperationTime: '2021-10-01 10:00:00',
      },
      {
        deviceName: '设备2',
        disasterPoint: '灾害点2',
        latestOperationTime: '2021-10-02 11:00:00',
      },
      {
        deviceName: '设备3',
        disasterPoint: '灾害点3',
        latestOperationTime: '2021-10-03 12:00:00',
      },
    ];
    const value = ref('');
    const focus = () => {
      console.log('focus');
    };

    const handleChange = (value) => {
      console.log(`selected ${value}`);
    };
    const onSearch = (value) => {
      console.log(`selected ${value}`);
    };
    const editItem = (index) => {
      // 编辑操作
    };
    const deleteItem = (index) => {
      // 删除操作
    };
    const visible = ref(false);

    const showModal = () => {
      // visible.value = true;
      // openModal(true, {
      //         res,
      //       });
      // setTimeout(() => createChart('chart3', series), 0);
    };
    const expandedKeys = ref(['0-0-0', '0-0-1']);
    const selectedKeys = ref(['0-0-0', '0-0-1']);
    const checkedKeys = ref(['0-0-0', '0-0-1']);
    watch(expandedKeys, () => {
      console.log('expandedKeys', expandedKeys);
    });
    watch(selectedKeys, () => {
      console.log('selectedKeys', selectedKeys);
    });
    watch(checkedKeys, () => {
      console.log('checkedKeys', checkedKeys);
    });

    //获取设备类别
    var activeSbMarker = null;
    function editStyle(i, d) {
      activeSbMarker = map.findOverlay(`sbdmarker&&${i.id}`);
      if (activeSbMarker) activeSbMarker.update();
      map.openInfoWindowHtml(TFMapUitl.sbdMarkerDom(i), { position: d }, () => {
        if (activeSbMarker) activeSbMarker.update();
        TFMapUitl.clearPointLocation_list(map);
      });
      map.popup.setOffset(-235, 80);
    }
    const sbEvent = (i) => {
      session.setItem('sensorInnerCode', '');
      // let op = {
      //   destination: { x: i.deviceLon, y: i.deviceLat, z: 1000 },
      //   orientation: { heading: 0, pitch: -0.7853981633974483, range: 8000 },
      // };
      // map.flyToRange(op, () => {
      //   TFMapUitl.mapPointLocation_list([i.deviceLon, i.deviceLat]);
      //   var html = TFMapUitl.sbdMarkerDom(i);
      //   map.openInfoWindowHtml(html, { position: [i.deviceLon, i.deviceLat] }, () => TFMapUitl.clearPointLocation_list(map));
      //   map.popup.setOffset(0, -120);
      // });
      console.log('设备列表点击:', i);
      geologicalStore
        .getVisualangle({
          type: 'sb',
          typeId: i.deviceCode,
        })
        .then((res) => {
          console.log('222222:', res);
          var d = [i.deviceLon, i.deviceLat, 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));
          }
        });
      //垂直角度飞行
      // let op = {
      //   destination: { x: i.deviceLon, y: i.deviceLat, z: 6245 },
      //   orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      // };
      // if (activeSbMarker) activeSbMarker.update();
      // map.flyTo(op, 1, () => {
      //   var p = [i.deviceLon, i.deviceLat, map.terrain ? i.elevation : 0];
      //   // TFMapUitl.mapPointLocation_list(p);
      //   TFMapUitl.trends(p);
      //   activeSbMarker = map.findOverlay(`sbdmarker&&${i.id}`);
      //   if (activeSbMarker) activeSbMarker.update();
      //   map.openInfoWindowHtml(TFMapUitl.sbdMarkerDom(i), { position: p }, () => TFMapUitl.clearPointLocation_list(map));
      //   map.popup.setOffset(0, -50);
      // });
    };
    const DeviceClick = (item) => {
      console.log(item, '点击了？？？？？？？？？');
      statusList.value = item;
      isStatusListShow.value = false;
      setTimeout(() => {
        eventBus.emit('getDeviceValue', item);
      }, 100);
    };

    //获取传感器类别
    function editStyleCgq(i, d) {
      map.openInfoWindowHtml(TFMapUitl.sensorMarkerDom(i), { position: d }, () => {
        TFMapUitl.clearPointLocation_list(map);
      });
      // map.popup.setOffset(0, -50);
      map.popup.setOffset(-235, 80);
    }
    const sbEvent2 = (i) => {
      console.log(i, 'sbEvent2');
      console.log(DeviceSensorList.value, 'DeviceSensorList.value');
      var obj = [];
      DeviceSensorList.value.records.map((e) => {
        if ((i.sensorCode = e.sensorCode)) {
          obj = e;
        }
      });
      var i = obj;
      console.log('找到了', obj);
      let obj2 = data.equipDatas.find((item) => item.deviceCode === i.deviceCode);
      var i = { ...i, ...(obj2 || {}) };

      console.log(i);
      geologicalStore
        .getVisualangle({
          type: 'sb',
          typeId: i.id + '',
        })
        .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));
          }
        });
    };
    const sbEvent1 = (i) => {
      data.activeSensorId = data.activeSensorId === i.sensorPublicCode ? '' : i.sensorPublicCode;
      session.setItem('sensorInnerCode', i.sensorInnerCode);
      //获取设备数据拼接
      let obj = data.equipDatas.find((item) => item.deviceCode === i.deviceCode);
      var i = { ...i, ...(obj || {}) };
      // let op = {
      //   destination: { x: i.deviceLon, y: i.deviceLat, z: 5000 },
      //   orientation: { heading: 0, pitch: -1.0471975511965976, range: 15000 },
      // };
      // map.flyToRange(op, () => {
      //   TFMapUitl.mapPointLocation_list([i.deviceLon, i.deviceLat]);
      //   var html = TFMapUitl.sensorMarkerDom(tbObj);
      //   map.openInfoWindowHtml(html, { position: [i.deviceLon, i.deviceLat] }, () => TFMapUitl.clearPointLocation_list(map));
      //   map.popup.setOffset(0, -120);
      // });

      // let op = {
      //   destination: { x: i.sensorLon, y: i.sensorLat, z: 6245 },
      //   orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      // };
      // map.flyTo(op, 1, () => {
      //   TFMapUitl.mapPointLocation_list([i.sensorLon, i.sensorLat]);
      //   var html = TFMapUitl.sensorMarkerDom(tbObj);
      //   map.openInfoWindowHtml(html, { position: [i.sensorLon, i.sensorLat] }, () => TFMapUitl.clearPointLocation_list(map));
      // });
      console.log(i);
      geologicalStore
        .getVisualangle({
          type: 'sb',
          typeId: i.id + '',
        })
        .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));
          }
        });
      //修改成为接口之前
      // if (i.deviceLon && i.deviceLat) {
      //   var d = [i.deviceLon, i.deviceLat, map.terrain ? i.elevation : 0];
      //   TFMapUitl.trends(d, () => {
      //     map.openInfoWindowHtml(TFMapUitl.sensorMarkerDom(i), { position: d }, () => {
      //       TFMapUitl.clearPointLocation_list(map);
      //     });
      //     map.popup.setOffset(0, -50);
      //   });
      // }

      //垂直视角
      // let op = {
      //   destination: { x: obj.deviceLon, y: obj.deviceLat, z: 5000 },
      //   orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      // };
      // map.flyTo(op, 1, () => {
      //   var p = [obj.deviceLon, obj.deviceLat, map.terrain ? i.elevation : 0];
      //   TFMapUitl.mapPointLocation_list(p);
      //   map.openInfoWindowHtml(TFMapUitl.sensorMarkerDom(tbObj), { position: p });
      //   map.popup.setOffset(0, -50);
      // });
    };

    const getEquipData = () => {
      const monitorDevicesStore = useMonitorDevicesStore();
      monitorDevicesStore
        .LiGongMonitorDevicesList({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          if (res.code === 200) {
            data.equipDatas = res.result.records;
          }
        });
    };

    //在线设备离线设备
    var list = [];
    const sbState = (type) => {
      var dom = document.getElementById('popupClear');
      if (dom) dom.click();
      list.map((m) => (m.entity.billboard.scale = 1));
      var cla = `sbd${type}marker*`;
      list = map.findOverlay(cla);
      list.map((m) => (m.entity.billboard.scale = 1.5));
      tFMapUitl.addBw(map, list);
      map.flyToRectangle(list, 0.5, {
        complete: () => map.showOverlay(cla, true),
      });
    };
    //在线传感器离线传感器
    const cgqEvent = (i) => {
      console.log('在线离线传感器:', i);
      // let op = {
      //   destination: { x: i.deviceLon, y: i.deviceLat, z: 3245 },
      //   orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      // };
      // map.flyTo(op, 1, () => {
      //   TFMapUitl.mapPointLocation_list([i.deviceLon, i.deviceLat]);
      //   var html = TFMapUitl.sbdMarkerDom(i);
      //   map.openInfoWindowHtml(html, { position: [i.deviceLon, i.deviceLat] });
      //   map.popup.setOffset(0, -50);
      // });
    };
    onMounted(() => {
      const monitorDevicesStore = useMonitorDevicesStore();
      monitorDevicesStore.newest().then((res) => {
        {
          resArr.value = resData.result; //启用假数据
          // resArr.value = res.result;

          //         resArr.value.forEach((item) => {
          //           item.valueMap = JSON.stringify(item.valueMap);
          //           item.valueMap = item.valueMap.replace(/['"]/g, ''); // 去掉所有的单引号和双引号
          //           item.valueMap = item.valueMap.slice(1, -1); // 去掉字符串中的第一个字符和最后一个字符
          //           item.valueMap = item.valueMap.replace(/(\d+\.\d+|\-\d+\.\d+|\d+)/g, '<span style="color: #c7b935">$1</span>');
          //           // 将键值对包裹在一个标签中
          // item.valueMap = item.valueMap.replace(/(\w+):\s*([^,}]+)/g, '<span class="key-value"><span class="key">$1:</span> <span class="value">$2</span></span>');
          //         });
          console.log(resArr, '这是二十条数据这是二十条数据这是二十条数据这是二十条数据这是二十条数据这是二十条数据这是二十条数据');
        }
      });
      monitorDevicesStore
        .LigongDeviceSensor({
          pageNo: 1,
          pageSize: 10000,
        })
        .then((res) => {
          DeviceSensorList.value = res.result;
        });
      getEquipData();
    });
    return {
      statusList,
      showStatus,
      isStatusListShow,
      formatTime,
      getTimeDiff,
      resArr,
      DeviceSensorList,
      mapStore,
      cgqEvent,
      sbState,
      // registerModal,
      sbEvent,
      DeviceClick,
      sbEvent1,
      sbEvent2,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      visible,
      showModal,
      ...toRefs(data),
      // datatable,
      zxjcData,
      value,
      value1: ref('lucy'),
      editItem,
      deleteItem,
      handleChange,
      focus,
      onSearch,
      getEquipData,
    };
  },

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

  mounted() {
    this.getSensorListData();
  },

  methods: {
    setMonitorDevicesList(list) {
      session.setItem('sensorInnerCode', '');
      //被父组件调用的方法
      this.deciveListTemp = JSON.parse(JSON.stringify(list));
      this.datatable = list;
      this.datatable.forEach((item) => {
        if (item.online) {
          this.onlineNum++;
          this.onlineState1 = {
            width: ' 20%',
            title: `${item.online_dictText}`,
            color: '#15FEFE',
          };
          console.log('样式', this.onlineState);
        } else {
          this.unOnlineNum++;
          this.onlineState = {
            width: ' 20%',
            title: `${item.online_dictText}`,
            color: 'rgba(255, 255, 255, 1)',
          };
        }
        this.isLineNum.onlineNum = this.onlineNum;
        this.isLineNum.unOnlineNum = this.unOnlineNum;
        item.tableCellIcon = `width: 20%;background:url('./static/img/deciveIcon/${item.deviceKind}.png') no-repeat;background-size: 50% 50%; background-position: 22px`;
      });

      // 排序
      this.datatable.sort(function (item1, item2) {
        return item2.online - item1.online;
      });

      console.log('协同监测实时监测设备列表：', list);
      this.devicesTotal = list.length;
      list.map((i) => {
        if (i.online_dictText == '离线') {
          this.offline.push(i);
        } else if (i.online_dictText == '在线') {
          this.online.push(i);
        }
      });
    },

    //得到传感器
    getSensorListData() {
      this.LigongDeviceSensorListApi();
    },

    // 查询全部的设备和传感器列表
    filerDecive() {
      const monitorDevicesStore = useMonitorDevicesStore();
      // 设备
      this.onlineNum = 0;
      this.unOnlineNum = 0;
      this.isLineNum.onlineNum = 0;
      this.isLineNum.unOnlineNum = 0;
      monitorDevicesStore
        .LiGongMonitorDevicesList({
          pageNo: 1,
          pageSize: 1000,
        })
        .then((res) => {
          console.log('获取设备列表:', res);
          this.datatable = res.result.records;
          this.datatable.forEach((item) => {
            // console.log('设备详情', item.online);
            if (item.online) {
              this.onlineNum++;
              this.onlineState1 = {
                width: ' 20%',
                title: `${item.online_dictText}`,
                color: '#15FEFE',
              };
              console.log('样式', this.onlineState);
            } else {
              this.unOnlineNum++;
              this.onlineState = {
                width: ' 20%',
                title: `${item.online_dictText}`,
                color: 'rgba(255, 255, 255, 1)',
              };
            }
            this.isLineNum.onlineNum = this.onlineNum;
            this.isLineNum.unOnlineNum = this.unOnlineNum;
            item.tableCellIcon = `width: 20%;background:url('./static/img/deciveIcon/${item.deviceKind}.png') no-repeat;background-size: 50% 50%; background-position: 22px`;
          });
          // 排序
          this.datatable.sort(function (item1, item2) {
            return item2.online - item1.online;
          });
        });
      // 传感器
      this.getSensorListData();

      this.$nextTick(() => {
        //调用子组件的方法
        this.$refs.WaterSphereDiagramBottom.getMonitorSensorsList(monitorDevicesStore, '');
      });
      TFMapUitl.clearPointLocation_list();
    },

    //通过设备ID获取传感器列表
    idGetSensorsList(e) {
      const monitorDevicesStore = useMonitorDevicesStore();
      this.toDeviceCode = e.deviceCode;
      this.$nextTick(() => {
        //调用子组件的方法
        this.$refs.WaterSphereDiagramBottom.getMonitorSensorsList(monitorDevicesStore, e.deviceCode);
      });

      this.activeEquipId = this.activeEquipId === e.id ? '' : e.id;
      this.LigongDeviceSensorListApi(e.deviceCode);
      // const monitorDevicesStore = useMonitorDevicesStore();
      // monitorDevicesStore
      //   .LigongDeviceSensor({
      //     pageNo: 1,
      //     pageSize: 100000,
      //     deviceCode: e.deviceCode,
      //   })
      //   .then((res) => {
      //     console.log('单个设备下面的长安其', res);
      //     this.sensorsList = res.result.records;
      //     console.log('传感器设备信息22222', this.sensorsList);
      //   });
    },

    /**
     * @description 传感器列表
     */
    LigongDeviceSensorListApi(deviceCode) {
      console.log(deviceCode, 'deviceCode');
      const monitorDevicesStore = useMonitorDevicesStore();
      this.onlineSenNum = 0;
      this.unOnlineSenNum = 0;
      this.isOnlineSenNum = {
        onlineSenNum: this.onlineSenNum,
        unOnlineSenNum: this.unOnlineSenNum,
      };
      monitorDevicesStore
        .LigongDeviceSensor({
          pageNo: 1,
          pageSize: 10000,
          deviceCode: deviceCode,
        })
        .then((res) => {
          console.log('传感器列表：', res, this.sensorsList);
          this.sensorsList = res.result.records;
          this.onlineSenNum = this.sensorsList.filter((item) => {
            return item.stateCode;
          }).length;
          this.unOnlineSenNum = this.sensorsList.length - this.onlineSenNum;
          this.isOnlineSenNum = {
            onlineSenNum: this.onlineSenNum,
            unOnlineSenNum: this.unOnlineSenNum,
          };
          // 排序
          this.sensorsList.sort((a, b) => {
            if (a.onlineTime == b.onlineTime) {
              return 0;
            } else if (a.onlineTime == null) {
              return 1;
            } else if (b.onlineTime == null) {
              return -1;
            } else {
              // 降序
              return a.onlineTime < b.onlineTime ? 1 : -1;
            }
          });
        });
    },

    // 在线设备定位
    onlineDevicePosiot() {
      // alert("1111")
    },
  },
});
</script>

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

@font-face {
  font-family: 'AgencyFB';
  src: url('../../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;
    }
  }

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

  .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('../../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('../../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: 56% !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);
  }

  .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;
  }
}
.shishi {
  height: 285px;
  width: 100%;
  overflow: auto;
  margin-top: 27px;
  margin-left: 4px;
  overflow-x: hidden;
  .scroll {
    height: 260px;
    width: 100%;
    // margin: 100px auto;
    // overflow: hidden;
  }
}
.shishiItem {
  cursor: pointer;
  margin-bottom: 10px;
  background-color: rgba(39, 209, 238, 0.1);
  border-radius: 4px;
  padding: 11px;
  .ItemTop {
    display: flex;
    padding-bottom: 21px;
    position: relative;
    justify-content: space-between;

    img {
      position: absolute;
      top: 2px;
      left: 1px;
      width: 23px;
      height: 19px;
    }
    .font1 {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-style: normal;
      color: #ffffff;
      // word-wrap: break-word;
      overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
      // margin-left: 30px;
    }
    .font2 {
      float: right;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      // color: #1e98ff;
      color: #ffffff;
    }
  }
  .ItemBtm {
    display: flex;
    flex-wrap: wrap;
    .font3 {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
      word-wrap: break-word;
      font-weight: 500;
    }
    .font4 {
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #c7b935;
      line-height: 20px;
      word-wrap: break-word;
    }
  }
}

// .yellow {
//   !important;
// }
</style>
