<template>
  <div class="deviceDetailModePage">
    <div style="padding: 0px 30px">
      <Title :titleName="'基础信息'" />
    </div>
    <a-descriptions
      bordered
      class="descriptionsTop"
      :contentStyle="contentStyle"
      size="middle"
      :labelStyle="labelStyle"
      style="margin-bottom: 14px; padding: 0px 30px"
    >
      <a-descriptions-item label="设备名称">{{ descriptions.deviceName }}</a-descriptions-item>
      <a-descriptions-item label="设备类型">{{ descriptions.deviceKind_dictText }}</a-descriptions-item>
      <a-descriptions-item label="设备状态">
        <a-badge :status="descriptions.online ? 'success' : 'error'" :text="descriptions.online ? '在线' : '离线'" />
      </a-descriptions-item>
      <a-descriptions-item label="所属地灾点">{{ descriptions.monitorPointName }}</a-descriptions-item>
      <a-descriptions-item label="设备编号">{{ descriptions.deviceCode }}</a-descriptions-item>
      <!-- <a-descriptions-item label="设备厂商">{{ descriptions.deviceManufacturer }}</a-descriptions-item> -->
      <a-descriptions-item label="安装时间">{{ descriptions.createTime }}</a-descriptions-item>
      <a-descriptions-item label="地理位置" :span="24"> {{ descriptions.location }}</a-descriptions-item>
    </a-descriptions>
    <div style="padding: 0px 30px; display: flex">
      <Title :titleName="'传感器监测信息2'" />
      <a-radio-group style="padding-left: 30px" v-model:value="activeKey" button-style="solid" size="default" @change="change">
        <a-radio-button v-for="(v, i) in sensorList" :key="i" :value="i">现场编号:{{ v.siteCode }}</a-radio-button>
      </a-radio-group>
    </div>
    <a-descriptions
      class="descriptionsBtm"
      bordered
      :contentStyle="contentStyle"
      size="middle"
      :labelStyle="labelStyle"
      style="margin-bottom: 14px; padding: 0px 30px"
    >
      <a-descriptions-item label="传感器类型">{{ sensor.sensor.sensorType_dictText }}</a-descriptions-item>
      <!-- <a-descriptions-item label="传感器类型">{{ sensor.sensorType }}</a-descriptions-item> -->

      <a-descriptions-item label="传感器状态">
        <a-badge :status="sensor.sensor.online ? 'success' : 'error'" :text="sensor.sensor.online ? '在线' : '离线'" />
      </a-descriptions-item>
      <!-- 下面这个参数要变 -->
      <a-descriptions-item label="监测部位"> {{ sensor.sensor.monitorLocation }}</a-descriptions-item>
    </a-descriptions>

    <a-row style="padding: 0px 0px; margin-left: 25px">
      <a-col :span="9" class="timeTypeBorder">
        <a-radio-group v-model:value="dateRange" button-style="solid" size="default">
          <a-radio-button value="1">近一周</a-radio-button>
          <a-radio-button value="2">近一月</a-radio-button>
          <a-radio-button value="3">近三月</a-radio-button>
          <a-radio-button value="4">近半年</a-radio-button>
        </a-radio-group>
      </a-col>
      <a-col :span="11">
        <a-range-picker class="timeTypeBorder" :show-time="{ format: 'HH:mm' }" v-model:value="date" :format="dateFormat" />
      </a-col>
      <a-col :span="2">
        <a-button type="primary" @click="onSubmit">开始查询</a-button>
      </a-col>
    </a-row>
    <div v-show="!isempty">
      <div style="display: flex; justify-content: center; align-items: center">
        <div id="myHeightEcharts" style="width: 90%; min-width: 700px; height: 300px"></div>
      </div>
    </div>
    <div class="empty-card" v-show="isempty">
      <a-empty />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from 'vue';
import Highcharts from 'highcharts';
import moment, { Moment } from 'moment';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import useEchar from '/@/hooks/echarts/useECharts';
import { deepClone, getNearly7Day, formatDateTime } from '/@/utils/fnUtils';
import Title from '/@/components/Title/index.vue';
import { getAppEnvConfig } from '/@/utils/env';

import TFMapUitl from '/@/utils/TFMapUitl';
export default defineComponent({
  components: { BasicModal, Title },
  props: {
    code: null,
  },
  setup(props, ctx) {
    debugger;
    const currentCode = reactive(props.code);
    const dateFormat = 'YYYY-MM-DD HH:mm';
    const descriptions: any = reactive({});
    const dateRange = ref('3');
    const activeKey = ref(0);
    const date = ref<Moment[]>([moment(moment().subtract(3, 'months'), dateFormat), moment(new Date(), dateFormat)]);
    const monitorDevicesStore = useMonitorDevicesStore();
    const sensorList: any = ref([]);
    let sensor: any = reactive({ sensor: {} });
    const myChart = ref();
    const { VITE_GLOB_LIGONG_ADMIN } = getAppEnvConfig();
    const sensorInnerCode = ref(0);
    const isempty = ref<boolean>(false);
    watch(
      () => props.code,
      (newVal) => {
        if (props.code) {
          getListInfo();
        }
      }
    );
    getListInfo();

    async function getListInfo() {
      Object.assign(descriptions, props.code);
      const dataT = await monitorDevicesStore.LiGongMonitorSensorsList({
        pageNo: 1,
        pageSize: 1000,
        deviceId: descriptions.id,
      });
      console.log('单个传感器1：', dataT);
      if (dataT && dataT.result && dataT.result.records && dataT.result.records.length) {
        sensorList.value = dataT.result.records;
        Object.assign(sensor.sensor, sensorList.value[0]);
        console.log('单个传感器：', sensor.sensor);
        sensorInnerCode.value = sensorList.value[0].sensorInnerCode; //这是一串编码
        if (sensorInnerCode.value) {
          // var dayList = getNearly7Day();
          // getMonitorChart(sensorInnerCode.value, dayList[dayList.length - 1], dayList[0]);
          // debugger;
          if (date.value && date.value.length) {
            var s = moment(date.value[0]).format('YYYY-MM-DD HH:mm:ss');
            var d = moment(date.value[1]).format('YYYY-MM-DD HH:mm:ss');
            getMonitorChart(sensorInnerCode.value, s, d);
          }
        }
      } else {
        sensorList.value = [];
        Object.keys(sensor.sensor).forEach(function (key) {
          delete sensor.sensor[key];
        });
        sensorInnerCode.value = null;
        isempty.value = false;
      }
    }

    // function iframe(url, id) {
    //   var dom = document.getElementById('iframeWrapper');
    //   if (dom && id) {
    //     var token = JSON.parse(sessionStorage.getItem('token'));
    //     mic.register('wlw', 'iframeWrapper', `${url}?isDark=true&sensorInnerCode=${id}&token=${token}`);
    //   }
    // }

    //提交查询
    const onSubmit = () => {
      if (date.value && date.value.length) {
        var s = moment(date.value[0]).format('YYYY-MM-DD HH:mm:ss');
        var d = moment(date.value[1]).format('YYYY-MM-DD HH:mm:ss');
        getMonitorChart(sensorInnerCode.value, s, d);
      }
    };

    function getMonitorChart(code, s, d) {
      // iframe(VITE_GLOB_LIGONG_ADMIN, code);
      if (!code) return;
      monitorDevicesStore
        .LiGongMonitorChart({
          sensorInnerCode: code,
          sTime: s || '2023-04-15 00:00:00',
          eTime: d || '2023-04-19 00:00:00',
        })
        .then((res) => {
          console.log('曲线：', res);
          isempty.value = false;
          if (res && res.code == 200) {
            data.value = res.result;
            if (!data.value.series || !data.value.series.length) {
              isempty.value = true;
            } else {
              getCheart(res.result);
              var op = getOptions(data);
              Highcharts.setOptions({
                global: {
                  useUTC: false, //关闭UTC
                },
              });
              Highcharts.chart('myHeightEcharts', op);
            }
          }
        });
    }

    //获取曲线的数据
    const chartYOptinos = ref([]);
    const chartSeries = ref([]);
    function getCheart(res) {
      const _yoptions = deepClone(res?.yoptions);
      // console.log('_yoptions:', _yoptions);
      const _series = deepClone(res?.series);

      const { yoptions, series } = getYoptionsSeries(_yoptions, _series);
      chartYOptinos.value = yoptions;
      chartSeries.value = series;
      if (JSON.stringify(yoptions).indexOf('深度') > -1) {
        isDeepSensor.value = true;
        legend.value = {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          floating: true,
          x: 210,
          itemStyle: { color: '#ffffff' },
        };
      } else {
        isDeepSensor.value = false;
        legend.value = {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'top',
          floating: true,
          y: 245,
          itemStyle: { color: '#ffffff' },
        };
      }
      filerLaterData();
    }

    const sensorChartDesc = ref();
    const isDeepSensor = ref();
    const data = ref();
    const run = ref();
    const loading = ref();
    const legend = ref({
      layout: 'horizontal',
      align: 'center',
      verticalAlign: 'top',
      floating: true,
      y: 245,
      itemStyle: { color: '#ffffff' },
    });
    const config = ref();

    const getStandarInterval = (t: number) => {
      if (t <= 0.1) {
        t = 0.1;
      } else if (t <= 0.2) {
        t = 0.2;
      } else if (t <= 0.25) {
        t = 0.25;
      } else if (t <= 0.4) {
        t = 0.4;
      } else if (t <= 0.5) {
        t = 0.5;
      } else if (t <= 0.6) {
        t = 0.6;
      } else {
        t = 1;
      }
      return t;
    };

    /**
     * @param min 数据最小值
     * @param max 数据最大值
     * @param tickInterval 刻度区间
     */
    const calcR = (min: number, max: number, tickInterval: number): [number, number, number] => {
      let tempmin = 0;
      if (min < 0) {
        while (tempmin > min) {
          tempmin -= tickInterval;
        }
      } else {
        while (tempmin + tickInterval < min) {
          tempmin += tickInterval;
        }
      }
      min = tempmin;
      let tickCount = 1;
      while (tickCount * tickInterval + min < max) {
        tickCount++;
      }
      max = tickCount * tickInterval + min;
      return [min, max, tickCount];
    };

    function getOptions(data) {
      const xMaxMin = data.value?.series && getYaxisMaxMin(data.value?.series, 0);
      console.log('222222222:', xMaxMin);
      return {
        credits: { enabled: false }, //去掉logo
        chart: {
          zoomType: 'x',
          backgroundColor: 'rgba(3, 49, 79, 0.0)',
          spacingRight: isDeepSensor.value ? 220 : 10,
          marginBottom: isDeepSensor.value ? 50 : 150,
          marginLeft: isDeepSensor.value ? 400 : 0,
          marginRight: isDeepSensor.value ? 400 : 0,
        },
        title: {
          text: null,
        },
        xAxis: {
          ...data.value?.xoptions,
          type: data.value?.xoptions?.type || 'datetime', //X轴为日期时间类型
          tickPixelInterval: 140, //X轴标签间隔
          endOnTick: true,
          showFirstLabel: true,
          showLastLabel: true,
          startOnTick: false,
          minorGridLineColor: '#197F07',
          lineColor: '#197F07', //设置X轴颜色
          lineWidth: 2,
          crosshair: true,
          min: xMaxMin?.min,
          max: xMaxMin?.max,
          gridLineWidth: 1,
          gridLineColor: 'rgba(21,186,255,0.2)',
          events: {
            setExtremes: function (e: any) {
              //@ts-ignore
              let thisChart = this.chart;
              if (e.trigger !== 'syncExtremes') {
                // Prevent feedback loop
                Highcharts.each(Highcharts.charts, function (chart) {
                  if (chart !== thisChart) {
                    if (chart?.xAxis?.[0].setExtremes) {
                      // It is null while updating
                      chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
                        trigger: 'syncExtremes',
                      });
                    }
                  }
                });
              }
            },
          },
          plotLines: [
            {
              color: 'red', //线的颜色，定义为红色
              width: 2,
              label: {
                text: '',
                align: 'left',
                x: 10,
                y: 10,
              },
              dashStyle: 'LongDashDot', //默认值，这里定义为实线
              value:
                data.value?.series[0].data[data.value?.series[0].data.length - 1] &&
                data.value?.series[0].data[data.value?.series[0].data.length - 1][0],
            },
          ],
          labels: {
            style: {
              color: '#ffffff',
            },
            formatter: function () {
              //@ts-ignore
              if (this.chart?.xAxis[0]?.userOptions?.type == 'datetime')
                //@ts-ignore
                return Highcharts.dateFormat(
                  '%Y-%m-%d<br>%H:%M',
                  this.value as number //sjl
                );
              //@ts-ignore
              return this.value.toFixed(
                this.chart?.xAxis[0]?.userOptions?.scale || 2 //sjl
              );
            },
          },
        },
        yAxis: chartYOptinos.value,
        time: {
          useUTC: false,
        },
        plotOptions: {
          series: {
            turboThreshold: 0,
            allowPointSelect: false,
            dataLabels: {
              enabled: true,
              formatter: function () {
                //@ts-ignore
                const series = this.series;
                const yOption = data.value?.yoptions.find((item) => item.title == series.name);
                const unit = series.userOptions.unit ?? '';
                const xType = series.chart.xAxis[0].userOptions.type;
                //@ts-ignore
                const x = this.x as number;
                //@ts-ignore
                const y = this.y as number;
                if (x == series.data[series.data.length - 1].x && xType === 'datetime') {
                  //@ts-ignore
                  return Highcharts.dateFormat('%m-%d %H:%M:%S', x) + '<br>' + y.toFixed(series.userOptions.scale || data.value?.scale) + unit;
                }
              },
            },
            cursor: 'pointer',
            events: {
              click: function (e) {
                if (config.value.sensorHasDeep) {
                  // show deep sensor modal
                  // openDeepSensorModal(true, {
                  //   sensorInnerCode: data.value?.sensorInnerCode,
                  //   deep: e.point.y,
                  //   title: `${sensorChartDesc.value?.sensorCode}(${sensorChartDesc.value?.siteCode}) 深度： ${e.point.y}m`,
                  // });
                }
              },
            },
          },
        },
        legend: legend.value,
        boost: {
          useGPUTranslations: false,
        },
        tooltip: {
          formatter: function () {
            //@ts-ignore
            const series = this.series;
            const yOption = data.value?.yoptions.find((item) => item.title == series.name);
            const unit = series.userOptions.unit ?? '';
            //@ts-ignore
            const x = this.x as number;
            //@ts-ignore
            const y = this.y as number;
            if (series.chart.xAxis[0].userOptions.type == 'linear') {
              return (
                '<strong>' +
                series.name +
                '</strong><br/>' +
                series.chart.yAxis[0].userOptions.title.text +
                ':' +
                y?.toFixed(series.userOptions.scale || data.value?.scale) +
                '<br/>' +
                series.chart.xAxis[0].userOptions.title?.text +
                ':' +
                x?.toFixed(series.userOptions.scale || data.value?.scale) +
                unit
              );
            }
            return (
              '<strong>' +
              series.name +
              '</strong>' +
              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', x) +
              ': ' +
              y.toFixed(series.userOptions.scale || data.value?.scale) +
              unit
            );
          },
        },
        //   series: res?.series,
        // series: getFitData(chartSeries.value),
        series: chartSeries.value,
      };
    }

    /**
     * 获取符合bizcharts内置逻辑的最大值最小值分布
     * @param list 数据列表
     * @param tickCount 最大刻度数 default  3
     * @param startWith0 最大值或者最小值是否从零开始 default false
     * @returns [min: number, max: number, tickCount: number]
     */
    function standardRange(list: number[], tickCount = 6, startWith0 = false): [number, number, number] {
      list = list.map((i) => (isNaN(Number(i)) ? 0 : Number(i)));

      const log10 = (n: number) => Math.log(n) / Math.log(10);
      let max = Math.max(...list);
      let min = Math.min(...list);
      // 数据全部分布在x轴同一侧，而且需要从零开始计算
      if (startWith0 && min * max >= 0) {
        min = min > 0 ? 0 : min;
        max = max < 0 ? 0 : max;
      }
      if (max === min) {
        const t = Math.abs(min);
        const mag = t == 0 ? 1 : Math.pow(10, Math.floor(log10(t)));
        return calcR(min, max, mag);
      }

      // 刻度区间长度，和长度数量级
      let tickInterval: number, mag: number;
      const rawTickInterval: number = (max - min) / tickCount;
      // 计算数量级
      mag = Math.pow(10, Math.floor(log10(rawTickInterval)));
      if (mag == rawTickInterval) {
        mag = rawTickInterval;
      } else {
        mag = mag * 10;
      }
      tickInterval = rawTickInterval / mag;

      //选取规范步长
      const stepLen = getStandarInterval(tickInterval);
      tickInterval = stepLen * mag;

      let res = calcR(min, max, tickInterval);

      if (res[2] > tickCount) {
        // 如果最后计算得出的刻度数大于计算值，步长扩大一级
        tickInterval = getStandarInterval(stepLen + 0.1) * mag;
        res = calcR(min, max, tickInterval);
      }
      return res;
    }

    /**
     * @param series 坐标轴对应的系列数据集合
     */
    const getYaxisMaxMin = (data: Series[], index = 1) => {
      let list = [] as any[];
      // find series data list
      data.forEach((item) => {
        list.push(...item.data.map((i) => i[index]));
      });
      const [min, max] = standardRange(list);
      return { min, max };
    };

    const getYoptionsSeries = (yoptions, series) => {
      let _yoptions = yoptions;
      let _series = series;
      const newYoptions = _yoptions.map((item, index) => {
        //@ts-ignore
        const maxMin = getYaxisMaxMin(series.filter((serie) => serie.yAxis == item.id));
        const max = index == 0 ? (item.max ? item.max : undefined) : undefined;
        const lineColor = index == 0 ? '#197F07' : undefined;
        const lineWidth = index == 0 ? 2 : undefined;
        //
        return {
          ...item,
          lineColor,
          lineWidth,
          gridLineColor: 'rgba(21,186,255,0.2)',
          smooth: true,
          title: {
            text: item.title,
            ...item.title,
          },
          labels: {
            style: {
              color: '#ffffff',
            },
            formatter: function () {
              //@ts-ignore
              return this.value.toFixed(item.scale);
            },
          },
          max,
          min: item.min ?? item.plotLines?.[0].value ? Math.min(item.plotLines?.[0].value, maxMin.min) : maxMin.min,
        };
      });
      return { yoptions: newYoptions, series: _series };
    };

    watch(dateRange, (newValue) => {
      switch (newValue) {
        case '1':
          date.value = [moment(moment().subtract(7, 'days'), dateFormat), moment(new Date(), dateFormat)];
          break;
        case '2':
          date.value = [moment(moment().subtract(1, 'months'), dateFormat), moment(new Date(), dateFormat)];
          break;
        case '3':
          date.value = [moment(moment().subtract(3, 'months'), dateFormat), moment(new Date(), dateFormat)];
          break;
        case '4':
        default:
          date.value = [moment(moment().subtract(6, 'months'), dateFormat), moment(new Date(), dateFormat)];
          break;
      }
      //默认调取数据
      onSubmit();
    });

    // watch(activeKey, (newValue) => {
    //   debugger
    //   Object.keys(sensor).forEach(function (key) {
    //     delete sensor[key];
    //   });
    //   // Object.assign(sensor.value, sensorList.value[newValue]);
    //   sensor.value = sensorList.value[newValue]
    //   console.log("最新传感器的值1", sensorList);
    //   console.log("最新传感器的值2", typeof(newValue));
    //   console.log("最新传感器的值3", sensorList.value[newValue]);
    //   console.log("最新传感器的值4", sensor.value);
    //   debugger
    // });

    // 展示最新的时间和指标值
    let laterTime = ref('');
    let laterArr = ref([]);
    const filerLaterData = () => {
      TFMapUitl.clearArray(laterArr.value);
      chartSeries.value.forEach((item) => {
        // 拿最新的时间
        let laterTimeTemp = item.data[item.data.length - 1][0]; //拿到最新时间
        let date = new Date(laterTimeTemp);
        let y = date.getFullYear(); //获取年份
        let m = date.getMonth() + 1; //获取月份
        m = m < 10 ? '0' + m : m; //月份不满10天显示前加0
        let d = date.getDate(); //获取日期
        d = d < 10 ? '0' + d : d; //日期不满10天显示前加0
        let h = date.getHours(); //小时
        let f = date.getMinutes(); //分
        let s = date.getSeconds(); //秒
        laterTime.value = y + '-' + m + '-' + d + ' ' + h + ':' + f + ':' + s;
        // console.log("时间显示的格式&&&", laterTime);
        // 拿最新的指标名和指标值
        let later = {
          laterKey: '',
          laterValue: '',
          laterUnit: '',
        };
        later.laterKey = item.name.substr(20).substring(0, item.name.substr(20).length - 1);
        later.laterValue = item.data[item.data.length - 1][1];
        later.laterUnit = item.unit;
        laterArr.value.push(later);
      });
      console.log('时间显示的格式1111', laterTime);
      console.log('时间显示的格式2222', laterArr);
    };

    // 传感器改变
    const change = (value) => {
      // console.log("改变的传感器信息", value.target.value)
      // let sensorTemp = JSON.parse(JSON.stringify(sensorList.value[value.target.value]))
      // sensor.value = sensorTemp
      sensor.sensor = sensorList.value[value.target.value];
      // console.log('参数0', sensor.sensor);
      sensorInnerCode.value = sensor.sensor.sensorInnerCode;
      var s = moment(date.value[0]).format('YYYY-MM-DD HH:mm:ss');
      var d = moment(date.value[1]).format('YYYY-MM-DD HH:mm:ss');
      // console.log('参数1', sensorInnerCode.value);
      // console.log('参数2', s);
      // console.log('参数3', d);

      getMonitorChart(sensorInnerCode.value, s, d);
    };

    return {
      change,
      labelStyle: {
        textAlign: 'center',
        width: '12%',
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #8BCDFF',
      },
      contentStyle: {
        width: 'calc(70% / 3)',
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #E5F7FF',
      },
      bodyStyle: {
        backgroundColor: 'rgba(12, 41, 61) !important;',
        padding: '0px 30px',
      },
      onSubmit,
      formState: reactive({}),
      descriptions,
      sensor,
      date,
      dateFormat,

      activeKey,
      dateRange,
      sensorList,
      checked: ref<boolean>(true),
      myChart,

      laterTime,
      isempty,
      filerLaterData,
      laterArr,
    };
  },
});
</script>
<style scoped lang="less">
.iframeWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow-y: scroll;
  height: 300px;
  padding: 0px 30px;
}

.iframeWrapper iframe {
  width: 100%;
  height: 100%;
}

:deep(.vben-basic-tree) {
  width: 100% !important;
}

:deep(.is-unflod) {
  display: none !important;
}

:deep(.is-flod) {
  display: none !important;
}

:deep(.ant-select-selection-item) {
  color: rgba(0, 0, 0, 0.85) !important;
}

:deep([data-theme='dark'] .ant-input) {
  border: 1px solid rgba(21, 186, 255, 0.3) !important;
}

:deep(.ant-input-number-disabled) {
  color: rgba(0, 0, 0, 0.85) !important;
}

/deep/ .scrollbar__view {
  padding: 0px 30px !important;
}

.descriptionsBtm {
  :deep(.ant-descriptions-title) {
    flex: none;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-style: italic;
    color: #14baff;
  }

  :deep(.ant-descriptions-extra) {
    margin-left: 20px;
  }
}

.timeTypeBorder {
  // border: 1px rgb(21, 186, 255, 0.3) solid;
  // margin: 0px;
  padding: 0px;

  ::v-deep .ant-input {
    border: 1px rgba(21, 186, 255, 0.3) solid;
  }

  ::v-deep .ant-radio-button-wrapper {
    border: 1px rgba(21, 186, 255, 0.3) solid;
  }
}

.descriptionsTop {
  :deep(.ant-descriptions-title) {
    flex: none;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-style: italic;
    color: #14baff;
  }

  :deep(.ant-descriptions-extra) {
    margin-left: 20px;
  }
}

:deep(.ant-modal) {
  .ant-modal-body {
    background-color: rgba(12, 41, 61) !important;
  }
}

/deep/td.ant-descriptions-item-content {
  border: 1px solid rgba(21, 186, 255, 0.3) !important;
}

/deep/th.ant-descriptions-item-label {
  border: 1px solid rgba(21, 186, 255, 0.3) !important;
}
</style>
<style lang="less">
#myHeightEcharts {
  margin-top: 20px;
  text-align: center;

  .highcharts-yaxis text,
  .highcharts-axis-title {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
}

body {
  .ant-modal-root {
    .ant-modal-wrap {
      z-index: 1000;

      .ant-modal {
        // background: url('../../assets/images/弹框样式-大.png') no-repeat;

        .ant-modal-content {
          background: url('/@/assets/images/弹框样式-大.png') no-repeat;
          background-size: 100% 100%;

          .ant-modal-close {
            top: 5px;
            right: 35px;

            span.anticon.anticon-fullscreen {
              background: url(/src/assets/images/dialog/open.png);
              background-size: 100% 100%;
              color: rgba(0, 0, 0, 0) !important;
              display: block;
              width: 16px;
              height: 16px;
            }

            span.anticon.anticon-fullscreen-exit {
              background: url('/@/assets/images/dialog/pickup.png');
              background-size: 100% 100%;
              color: rgba(0, 0, 0, 0) !important;
              display: block;
              width: 16px;
              height: 16px;
            }

            span.anticon.anticon-close {
              background: url('/@/assets/images/dialog/close.png');
              background-size: 100% 100%;
              color: rgba(0, 0, 0, 0) !important;
              display: block;
              width: 20px;
              height: 20px;
            }
          }

          .ant-modal-header {
            background: none;
            border-bottom: 0;

            .vben-basic-title {
              position: relative;
              display: flex;
              padding-left: 30px;
              padding-top: 2px;

              line-height: 24px;
              color: rgba(0, 0, 0, 0.85);
              cursor: pointer;
              user-select: none;

              font-size: 18px;
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-style: italic;
              color: #ffffff;
            }
          }

          .ant-modal-body {
            background: none;
          }

          // .ant-modal-footer {
          //   border: 0px;
          // }
        }
      }
    }
  }
}

.empty-card {
  width: 100%;
  height: 100%;
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
