<template>
  <div class="infoList">
    <div class="info_bottom">
      <div class="bottom_1">
        <div class="t_line_box">
          <i class="t_l_line"></i>
          <i class="l_t_line"></i>
        </div>
        <div class="t_line_box">
          <i class="t_r_line"></i>
          <i class="r_t_line"></i>
        </div>
        <div class="t_line_box">
          <i class="l_b_line"></i>
          <!-- <i class="b_l_line"></i> -->
        </div>
        <div class="t_line_box">
          <i class="r_b_line"></i>
          <!-- <i class="b_r_line"></i> -->
        </div>
        <div class="main_table">
          <div class="table_title">
            <hr class="hr-style-left" />
            警示信息
            <hr class="hr-style-right" />
          </div>
          <!-- <table class="table_left">
<dv-scroll-board :config="bottom1Config"
           style="height:220px" />
</table> -->

          <table class="table_left table_bottom2Config">
            <div>
              <dv-scroll-board :config="bottom2Config" style="height: 250px" />
              <!-- <Scroll-board-table v-if="boardLeftShow" :config="bottom2Config"></Scroll-board-table> -->
            </div>
          </table>
        </div>
        <div class="info_left_arrow" title="上一页" @click="preClick">
          <a-icon type="left" />
        </div>
        <div class="info_right_arrow" title="下一页" @click="nextClick">
          <a-icon type="right" />
        </div>
      </div>
      <div class="bottom_2">
        <div class="t_line_box">
          <i class="t_l_line"></i>
          <i class="l_t_line"></i>
        </div>
        <div class="t_line_box">
          <i class="t_r_line"></i>
          <i class="r_t_line"></i>
        </div>
        <div class="t_line_box">
          <i class="l_b_line"></i>
          <!-- <i class="b_l_line"></i> -->
        </div>
        <div class="t_line_box">
          <i class="r_b_line"></i>
          <!-- <i class="b_r_line"></i> -->
        </div>
        <div class="main_table">
          <div class="table_title">
            <hr class="hr-style-left" />
            处置信息
            <hr class="hr-style-right" />
          </div>
          <table class="table_left">
            <dv-scroll-board :config="bottom3Config" style="height: 250px" />
          </table>
        </div>
      </div>
    </div>
    <!-- 图片展示框 -->
    <div id="div_images" style="display: none">
      <img v-for="(item, index) in images" :src="item" @error="errorImg(index)" :preview="images.length" :alt="images.length" />
    </div>
    <!-- 处置详情框 -->
    <a-drawer title="警示处置" placement="right" width="640" :closable="false" :visible="dealModal" @close="onClose">
      <a-row>
        <a-col :span="12">
          <span>发生时间：</span><span>{{ warnDataModal.createTime }}</span>
        </a-col>
        <a-col :span="12">
          <span>发生地点：</span><span>{{ warnDataModal.cameraLoc }}</span>
        </a-col>
        <a-col :span="12">
          <span>级别：</span><span>{{ warnDataModal.warnLevel }}</span>
        </a-col>
        <a-col :span="12">
          <span>类型：</span><span>{{ warnDataModal.warnType }}</span>
        </a-col>
        <a-col :span="12">
          <span>内容：</span><span>{{ warnDataModal.warnContent }}</span>
        </a-col>
        <a-col :span="12">
          <a @click="showPhotos(warnDataModal.imgUrl)">现场照片</a>
          <a-divider type="vertical" />
          <a @click="showVideo(warnDataModal.warnContent, warnDataModal.cameraId, warnDataModal.createTime)">录像回放</a>
        </a-col>
      </a-row>
      <a-divider>相关信息</a-divider>
      <a-table :columns="bottom4Config" :data-source="bottom4Data" :scroll="{ x: 500 }" :pagination="{ pageSize: 2 }">
        <a slot="action" slot-scope="record" @click="showVideo(record.warnContent, record.cameraId, record.createTime)">录像回放</a>
      </a-table>
      <a-divider>轨迹回放</a-divider>
      <iframe :src="earthSrc" width="100%" height="500" frameborder="0" scrolling="auto" ref="iframe"></iframe>
      <!-- 按钮 -->
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose"> 返回</a-button>
        <a-button type="primary" @click="handleWarnInfo"> 处置</a-button>
      </div>
    </a-drawer>
    <ms-warn-modal @ok="getAgain" ref="modalForm"></ms-warn-modal>
    <a-modal title="详情" :visible="detailVisible" :footer="null" @cancel="detailCancel" :zIndex="999" dialogClass="detail-model">
      <!-- 警示详情 -->
      <ms-warn-detail :againGetDetail="againGetDetail" :detailEventSerialNum="detailEventSerialNum"></ms-warn-detail>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { onBeforeUnmount, watchEffect, onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed, watch } from 'vue';
  import $mitt from '@/utils/earthMap/mitt';
  import { defHttp } from '/@/utils/http/axios';
  import { useMonitorStore } from '/@/store/modules/monitor';
  import _ from 'lodash';
  import ScrollBoardTable from '@/components/earthMap/components/Scroll-board-table.vue';
  import MsWarnModal from '@/views/military/modules/warn/warnList/components/MsPreWarnModal.vue';
  export default defineComponent({
    name: 'infoList',
    props: {},
    components: {
      ScrollBoardTable,
      MsWarnModal,
    },
    setup(props, ctx) {
      const { proxy }: any = getCurrentInstance();
      let store = useMonitorStore();
      //ref
      let modalForm = ref();
      let boardLeftShow = ref(false);
      const title = computed(() => {
        return '';
      });

      let url: any = ref({
        getTypeDataStatistics: '/military/msPrewarnDaystatistics/getTypeDataStatistics',
        getWarnDatalist: '/military/msWarnEvent/list', //'/mapInfo/warnInfoList',
        getWarnDealLogList: '/military/warn/warnDealLogList',
        changeDealStatus: '/military/prewarn/edit',
      });
      let videoWindowProps: any = ref({
        visible: false,
        isAlarm: true,
        title: '',
        videoUrl: '',
        warnTime: null,
        playRecord: true,
      });
      let timer: any = ref(null);

      let bottom1Config: any = ref({});
      let bottom2Config: any = ref({});
      let bottom3Config: any = ref({
        /*data: [
          ['【警示编号：201701160809001】 2017/03/16 09:31 101号杆体 <span style="color:#9fe6b8;">视频预警</span> 船只越界'],
        ],*/
      });
      let bottom4Config: any = ref([
        { title: '发生时间', width: 150, dataIndex: 'date', key: 'date' },
        { title: '发生地点', width: 150, dataIndex: 'location', key: 'location' },
        { title: '级别', width: 60, dataIndex: 'level', key: 'level' },
        { title: '类型', width: 60, dataIndex: 'type', key: 'type' },
        { title: '内容', width: 150, dataIndex: 'content', key: 'content' },
        { title: '操作', width: 100, key: 'operation', scopedSlots: { customRender: 'action' }, fixed: 'right' },
      ]);
      let bottom4Data: any = ref([
        {
          key: '1',
          date: '2021-10-22 15:02:01',
          location: '琴海西南侧',
          level: '一级',
          type: '视频预警',
          content: '船只周界入侵',
        },
        {
          key: '2',
          date: '2021-10-22 15:02:01',
          location: '琴海西南侧',
          level: '一级',
          type: '视频预警',
          content: '船只周界入侵',
        },
        {
          key: '3',
          date: '2021-10-22 15:02:01',
          location: '琴海西南侧',
          level: '一级',
          type: '视频预警',
          content: '船只周界入侵',
        },
      ]);

      let dealModal = ref(false);
      let warnDataModal: any = ref({
        id: '',
        eventSerialNum: '',
        createTime: '',
        cameraLoc: '',
        warnLevel: '',
        warnType: '',
        warnContent: '',
        imgUrl: '',
        videoUrl: '',
        dealStatus: '',
      });

      let earthSrc = ref(window._CONFIG['earthMapURL'] + '/playback');
      let iframeWin: any = ref(null);
      let handleIframe: any = ref(null);
      let images: any = ref([]);

      let bottom2ConfigParam: any = ref({
        column: 'createTime',
        order: 'desc',
        pageNo: 1,
        pageSize: 10,
      });

      let detailVisible = ref(false);
      let detailEventSerialNum: any = ref([]);
      let againGetDetail: any = ref(null);

      onMounted(() => {
        //其他页面调用本页面的methods方法
        $mitt.on('getWarnData', function () {
          getWarnData();
        });
        $mitt.on('getDealData', function (status: any) {
          getDealData(status);
        });
      });

      function objectIsNull(str) {
        if (!str) {
          return true;
        } else if (String(str).length <= 0 || String(str).toUpperCase() === 'NULL') {
          return true;
        }
        return false;
      }

      function getTypeData() {
        defHttp
          .get(
            {
              url: url.value.getTypeDataStatistics,
            },
            { isTransformResponse: false }
          )
          // getAction(url.value.getTypeDataStatistics)
          .then((res) => {
            if (res.success) {
              let configData: any = [];
              res.result.forEach((data, index) => {
                configData.push([data.item, data.count]);
              });
              bottom1Config.value = {
                header: ['类型', '起数'],
                data: configData,
                headerHeight: 25,
                columnWidth: [150, 50],
                headerBGC: '#00000000',
                carousel: 'page',
              };
            }
          });
      }

      function getWarnData() {
        defHttp
          .get(
            {
              url: url.value.getWarnDatalist,
              params: bottom2ConfigParam.value,
            },
            { isTransformResponse: false }
          )
          // getAction(this.url.getWarnDatalist, this.bottom2ConfigParam)
          .then((res) => {
            if (res.success) {
              let configData: any = [];
              let records = res.result.records;
              let result = res.result;
              if (records.length == 0) {
                if (result.current > result.pages) {
                  bottom2ConfigParam.value.pageNo = result.pages;
                }
                return;
              }
              console.log('records', records);
              records.forEach((data, index) => {
                configData.push([
                  `<span title=\"${(result.current - 1) * result.size + index + 1}\">${(result.current - 1) * result.size + index + 1}</span>`,
                  `<span title=\"${data.createTime}\">${data.createTime == null ? '' : data.createTime}</span>`,
                  `<span title=\"${data.happenLoc}\">${data.happenLoc == null ? '' : data.happenLoc}</span>`,
                  `<span title=\"${data.warnLevel_dictText}\" class=\"warnLevelSpan ${
                    data.warnLevel == 1
                      ? 'hong'
                      : data.warnLevel == 2
                      ? 'cheng'
                      : data.warnLevel == 3
                      ? 'huang'
                      : data.warnLevel == 4
                      ? 'lv'
                      : data.warnLevel == 5
                      ? 'lan'
                      : ''
                  }\"></span>`,
                  `<span title=\"${data.warnType_dictText}\">${data.warnType_dictText == null ? '' : data.warnType_dictText}</span>`,
                  `<span title=\"${data.warnContent}\">${data.warnContent == null ? '' : data.warnContent}</span>`,
                  `<span title=\"${data.dealStatus_dictText}\">${data.dealStatus_dictText == null ? '' : data.dealStatus_dictText}</span>`,
                  `<span title=\"${data.dealWay_dictText}\">${data.dealWay_dictText == null ? '' : data.dealWay_dictText}</span>`,
                  // `<a onclick=\"window.that.showPhotos(${data.imgUrl})\">现场照片</a> | ` +
                  // `<a onclick=\"window.that.showVideo(${data.videoUrl})\">录像</a> | ` +
                  `<a onclick=\"window.that.showWarnDetail('${data.eventSerialNum}')\">详情</a> | ` +
                    `<a onclick=\"window.that.showWarnInfo(${JSON.stringify(data).replace(/\"/g, "'")},${true})\">处置</a>`,
                ]);
              });
              // bottom2Config.value = {
              //   //需再添加header请再手动添加样式穿透（用于设置宽度）
              //   header: ['#', '发生时间', '发生地点', '级别', '类型', '内容', '处置状态', '处置方式', '操作'],
              //   data: configData,
              //   headerHeight: 25,
              //   // columnWidth: [60, 200, 200, 80, 200, , 100, 120,],
              //   index: false,
              //   align: ['center'],
              //   rowNum: 10,
              //   headerBGC: '#00000000',
              //   oddRowBGC: '#00000000',
              //   evenRowBGC: '#09274C55',
              // }
              bottom2Config.value = {
                //需再添加header请再手动添加样式穿透（用于设置宽度）
                header: [
                  {
                    title: '#',
                    dataIndex: 'name',
                    key: 'name',
                  },
                  {
                    title: '发生时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                  },
                  {
                    title: '发生地点',
                    dataIndex: 'name',
                    key: 'name',
                  },
                  {
                    title: '级别',
                    dataIndex: 'name',
                    key: 'name',
                  },
                  {
                    title: '类型',
                    dataIndex: 'name',
                    key: 'name',
                  },
                  {
                    title: '内容',
                    dataIndex: 'warnContent',
                    key: 'warnContent',
                  },
                  {
                    title: '处置状态',
                    dataIndex: 'dealStatus',
                    key: 'dealStatus',
                  },
                  {
                    title: '处置方式',
                    dataIndex: 'name',
                    key: 'name',
                  },
                  {
                    title: '操作',
                    dataIndex: 'name',
                    key: 'name',
                  },
                ],
                data: configData,
                headerHeight: 25,
                // columnWidth: [60, 200, 200, 80, 200, , 100, 120,],
                index: false,
                align: ['center'],
                rowNum: 10,
                headerBGC: '#00000000',
                oddRowBGC: '#00000000',
                evenRowBGC: '#09274C55',
              };
              nextTick(() => {
                boardLeftShow.value = true;
              });
            }
          });
      }

      function preClick() {
        bottom2ConfigParam.value.pageNo = bottom2ConfigParam.value.pageNo == 1 ? 1 : --bottom2ConfigParam.value.pageNo;
        getWarnData();
      }

      function nextClick() {
        bottom2ConfigParam.value.pageNo++;
        getWarnData();
      }

      function getDealData(status = null) {
        // 判断警示窗口是否打开着，打开就轮询获取最新信息，关闭了就移除定时器
        if (status == 'hidden') {
          //清除定时器
          clearInterval(timer.value);
          timer.value = null;
          return;
        }
        // 定时器-定时获取最新预警信息
        if (timer.value == null) {
          timer.value = setInterval(() => {
            getDealData();
          }, 30 * 1000);
        }
        // 请求处置信息
        let param = {
          column: 'createTime',
          order: 'desc',
          pageNo: 1,
          pageSize: 10,
        };
        defHttp
          .get(
            {
              url: url.value.getWarnDealLogList,
              params: param,
            },
            { isTransformResponse: false }
          )
          // getAction(this.url.getWarnDealLogList, param)
          .then((res) => {
            if (res.success) {
              let configData: any = [];

              if (res.result.records.length > 0) {
                res.result.records.forEach((data, index) => {
                  configData.push(
                    [
                      '<span style="color:#efde06;display:block;text-align:center;" title="警示编号">【警示编号：' +
                        data.eventSerialNum +
                        '】</span>',
                    ],
                    [
                      `<span style="color:#9fe6b8;">警示来源：</span>${data.warnType_dictText == null ? '未知' : data.warnType_dictText}` +
                        `&emsp;&emsp; <span style="color:#9fe6b8;">发生地点：</span>${data.cameraLoc == null ? '未知' : data.cameraLoc}` +
                        `&emsp;&emsp; <span style="color:#9fe6b8;">处置时间：</span>${data.createTime == null ? '未知' : data.createTime}` +
                        `&emsp;&emsp; <span style="color:#9fe6b8;">级别：</span>${
                          data.warnLevel_dictText == null ? '未知' : data.warnLevel_dictText
                        }`,
                    ],
                    [
                      '<span style="color:#9fe6b8;">处置类型：</span>' +
                        data.dealType_dictText +
                        '&emsp;&emsp;&emsp;&emsp;&emsp; <span style="color:#9fe6b8;">处置方式：</span>' +
                        data.dealWay_dictText +
                        '&emsp;&emsp;&emsp;&emsp;&emsp; <span style="color:#9fe6b8;">处置结果：</span>' +
                        data.dealResult_dictText,
                    ]
                  );
                });
              } else {
                configData.push(['暂无相关的处置信息']);
              }
              bottom3Config.value = {
                data: configData,
                rowNum: 6,
                oddRowBGC: '#00000000',
                evenRowBGC: '#00000000',
                align: ['center'],
                carousel: 'page',
              };
            }
          });
      }

      function getAgain(bol, eventSerialNum) {
        $mitt.emit('clearAlarmModel', { isWarnEvent: bol, eventSerialNum: eventSerialNum });
        // 判断是更新事件还是更新详情页数据
        if (bol) {
          getWarnData();
        } else {
          againGetDetail.value = new Date().getTime();
        }
      }

      function showPhotos(url) {
        if (objectIsNull(url)) {
          // $mitt.emit('openNotification', '暂无数据', 2, 'warning')
          // $mitt.emit('openNotification', { msg: '暂无数据', dt: 2, type: 'warning' })
          proxy.$message.warning('暂无数据');
          return;
        }
        images.value = handleImageList(url);
        proxy.$previewRefresh();
        nextTick(function () {
          let imagesElement: any = document.getElementById('div_images');
          // 初始化图片查看器 使点击事件生效
          _.delay(() => {
            if (imagesElement.children[0] && imagesElement.children[0].click) {
              imagesElement.children[0].click();
            }
          }, 200);
        });
      }

      function errorImg(index) {
        images.value.splice(index, 1);
        // 这里要延时处理
        setTimeout(() => {
          proxy.$previewRefresh();
        }, 1000);
      }

      function handleImageList(urls) {
        let images: any = [];
        urls.split(',').forEach((item) => {
          let url: any = handleImageUrl(item);
          images.push(url);
        });
        return images;
      }

      function handleImageUrl(url) {
        // 正则匹配 http:// 和 https://
        const regex = /^(http|https):\/\//;
        const uriList = url.split(',');
        // 去除空字符串
        const uriListNotSpace = uriList.filter((uri) => uri !== '' && uri !== 'null');
        let urlTemp = uriListNotSpace[0];
        // 去除空格
        urlTemp = urlTemp.trim();
        if (regex.test(urlTemp)) {
          return urlTemp;
        } else {
          return `${window._CONFIG['staticDomainURL']}/${urlTemp}`;
        }
      }

      function showVideo(arr) {
        arr = arr.split(',');
        videoWindowProps.value.videoUrl = arr[0];
        videoWindowProps.value.title = '录像回放';
        videoWindowProps.value.warnTime = new Date(arr[1]).getTime();
        videoWindowProps.value.visible = true;
        videoWindowProps.value.time = new Date().getTime();
        // this.$store.commit('SET_VIDEOPROPS', this.videoWindowProps)
        store.videoProps = videoWindowProps.value;
      }

      function showWarnDetail(eventSerialNum) {
        detailEventSerialNum = eventSerialNum;
        detailVisible.value = true;
      }

      function detailCancel() {
        detailEventSerialNum.value = '';
        detailVisible.value = false;
      }

      function showWarnInfo(data, bol) {
        data.isEvent = bol;
        // 报警处置
        modalForm.value.dealWarn(data);
        modalForm.value.title = '警示处置';
        modalForm.value.disableSubmit = false;

        /* this.warnDataModal.id = data.id;
      this.warnDataModal.eventSerialNum = data.eventSerialNum;
      this.warnDataModal.createTime = data.createTime;
      this.warnDataModal.cameraLoc = data.cameraLoc;
      this.warnDataModal.warnLevel = data.warnLevel_dictText;
      this.warnDataModal.warnType = data.warnType_dictText;
      this.warnDataModal.warnContent = data.warnContent;
      this.warnDataModal.imgUrl = data.imgUrl;
      this.warnDataModal.videoUrl = data.videoUrl;
      this.warnDataModal.dealStatus = data.dealStatus;
      this.dealModal = true; */
        /* //轨迹回放
      setTimeout(() => {
        window.that.$refs.iframe.contentWindow.location.reload();
      }, 100);
      this.handleIframe = function (e) {
        console.log('handleIframe', e.data)
        if (e.data == 'ready') {
          window.that.iframeWin = window.that.$refs.iframe.contentWindow;
          let shipModel = JSON.stringify(window.$earth.sceneTree.$refs[data.eventSerialNum].czmObject);
          let shipPath = JSON.stringify(window.$earth.sceneTree.$refs["path_" + data.eventSerialNum].czmObject);
          window.that.iframeWin.postMessage({
            shipModel: shipModel,
            shipPath: shipPath
          }, '*');
        }
      };
      window.addEventListener('message', this.handleIframe, false); */
      }

      function onClose() {
        dealModal.value = false;
        //关闭模态框时销毁监听
        window.removeEventListener('message', handleIframe.value, false);
      }

      function handleWarnInfo() {
        /* this.$refs.modalForm.dealWarn(this.warnDataModal);
      this.$refs.modalForm.title = "警示处置";
      this.$refs.modalForm.disableSubmit = false; */
        /* if (this.warnDataModal.dealStatus == 2) {
        window.that.$message.warning("请勿重复处理！");
        return;
      }
      this.$confirm({
        title: '提示',
        content: '确认处置当前报警信息？',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          putAction(window.that.url.changeDealStatus, { id: id, dealStatus: 2 }).then((res) => {
            if (res.success) {
              window.that.$message.success("更新成功");
              window.that.getWarnData();
            }
          });
        },
      }); */
      }

      onBeforeUnmount(() => {
        // vue程序销毁时，需要清理相关资源
        // this.websocketclose()
        clearInterval(timer.value); //清除定时器
        $mitt.off('getWarnData');
        $mitt.off('getDealData');
      });

      return {
        title,
        url,
        videoWindowProps,
        timer,
        bottom1Config,
        bottom2Config,
        bottom3Config,
        bottom4Config,
        bottom4Data,
        dealModal,
        warnDataModal,
        earthSrc,
        iframeWin,
        handleIframe,
        images,
        bottom2ConfigParam,
        detailVisible,
        detailEventSerialNum,
        againGetDetail,
        objectIsNull,
        getTypeData,
        getWarnData,
        preClick,
        nextClick,
        getDealData,
        getAgain,
        showPhotos,
        errorImg,
        handleImageList,
        handleImageUrl,
        showVideo,
        showWarnDetail,
        detailCancel,
        showWarnInfo,
        onClose,
        handleWarnInfo,
        boardLeftShow,
      };
    },
  });
</script>

<style lang="less" scoped>
  .infoList {
    /* display: none; //用这个会获取不到组件初始宽高*/
    visibility: hidden;

    .info_bottom {
      position: absolute;
      bottom: 4px;
      width: calc(100% - 10px);
      height: 300px;
      margin-left: 5px;
      background: -webkit-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;
      background: -o-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;
      background: -moz-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;
      background: linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;

      .bottom_1,
      .bottom_2 {
        height: 300px;
        position: relative;
        float: left;
        box-sizing: border-box;
        border: 1px solid #2c58a6;
        box-shadow: 0 0 10px #2c58a6;
      }

      .bottom_1 {
        width: 60%;
      }

      .bottom_2 {
        width: 40%;
      }

      .table_title {
        text-align: center;
        width: 100%;
        height: 35px;
        line-height: 33px;
        border-radius: 18px;
        position: absolute;
        top: -40px;
        color: #03f5f5;
        font-size: 16px;
        font-weight: 500;
        font-style: italic;
        box-sizing: border-box;
        padding-left: 5px;
        z-index: 1;
      }

      .main_table {
        width: 100%;
        margin-top: 45px;
        position: relative;

        .table_left {
          width: 100%;
          float: left;
          /*flex 布局*/
          display: flex;
          /*实现水平居中*/
          justify-content: center;
        }

        .table_left > div {
          width: 100%;
          cursor: pointer;
        }
      }
    }

    .info_left_arrow,
    .info_right_arrow {
      position: absolute;
      top: 5px;
      color: #1aa391;
      font-size: 24px;
      cursor: pointer;
      z-index: 1;

      &:hover {
        color: #03f5f5;
      }
    }

    .info_left_arrow {
      left: 10px;
    }

    .info_right_arrow {
      right: 10px;
    }

    .hr-style-left {
      width: 20%;
      margin: 0 20px;
      border: 0;
      height: 2px;
      display: inline-block;
      background-image: linear-gradient(to left, #efde06, #efde06b8, #efde0669);
    }

    .hr-style-right {
      width: 20%;
      margin: 0 20px;
      border: 0;
      height: 2px;
      display: inline-block;
      background-image: linear-gradient(to right, #efde06, #efde06b8, #efde0669);
    }

    .t_line_box {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .t_line_box i {
      background-color: #03f5f5;
      box-shadow: 0px 0px 10px #03f5f5;
      position: absolute;
    }

    .l_t_line {
      width: 2px;
      height: 24px;
      left: -3px;
      top: -3px;
    }

    .t_l_line {
      height: 2px;
      width: 26px;
      left: -3px;
      top: -3px;
    }

    .t_r_line {
      height: 2px;
      width: 26px;
      right: -3px;
      top: -3px;
    }

    .r_t_line {
      width: 2px;
      height: 24px;
      right: -3px;
      top: -3px;
    }

    .l_b_line {
      width: 2px;
      height: 24px;
      left: -3px;
      bottom: -3px;
    }

    .b_l_line {
      height: 2px;
      width: 26px;
      left: -3px;
      bottom: -3px;
    }

    .r_b_line {
      width: 2px;
      height: 24px;
      right: -3px;
      bottom: -3px;
    }

    .b_r_line {
      height: 2px;
      width: 26px;
      right: -3px;
      bottom: -3px;
    }

    .header-item {
      color: #efde06;
    }

    ::-webkit-scrollbar {
      display: block;
    }
  }

  .table_bottom2Config {
    .warnLevelSpan {
      border-radius: 10px;
      display: block;
      width: 16px;
      height: 16px;
      line-height: 16px;
    }

    .hong {
      background: red;
    }

    .lan {
      background: deepskyblue;
    }

    .huang {
      background: #fff42b;
    }

    .cheng {
      background: orange;
    }

    .lv {
      background: green;
    }

    .dv-scroll-board .header,
    .row-item {
      justify-content: space-between;
    }

    // 样式穿透
    .dv-scroll-board .header-item:nth-child(1),
    .row-item .ceil:nth-child(1) {
      min-width: 48px !important;
      max-width: 48px !important;
    }

    .dv-scroll-board .header-item:nth-child(2),
    .row-item .ceil:nth-child(2) {
      min-width: 150px !important;
      max-width: 150px !important;
    }

    .dv-scroll-board .header-item:nth-child(3),
    .row-item .ceil:nth-child(3) {
      flex: auto;
      max-width: 280px !important;
    }

    .dv-scroll-board .header-item:nth-child(4),
    .row-item .ceil:nth-child(4) {
      min-width: 52px !important;
      max-width: 52px !important;
    }

    .dv-scroll-board .header-item:nth-child(5),
    .row-item .ceil:nth-child(5) {
      min-width: 130px !important;
      max-width: 130px !important;
    }

    .dv-scroll-board .header-item:nth-child(6),
    .row-item .ceil:nth-child(6) {
      flex: auto;
      max-width: 600px !important;
    }

    .dv-scroll-board .header-item:nth-child(7),
    .row-item .ceil:nth-child(7) {
      min-width: 90px !important;
      max-width: 90px !important;
    }

    .dv-scroll-board .header-item:nth-child(8),
    .row-item .ceil:nth-child(8) {
      min-width: 120px !important;
      max-width: 120px !important;
    }

    .dv-scroll-board .header-item:nth-child(9),
    .row-item .ceil:nth-child(9) {
      min-width: 200px !important;
    }
  }

  .detail-model {
    width: 60vw !important;
    padding-bottom: 0 !important;

    .ant-modal-content,
    .ant-modal-header {
      background: transparent !important;
    }

    .ant-modal-header .ant-modal-title,
    .ant-modal-close-x {
      color: #fff !important;
    }

    .ant-modal-header {
      border-bottom: 4px solid rgba(0, 0, 0, 0.4) !important;
    }

    .ant-modal-close-x {
      font-size: 20px !important;

      &:hover i {
        color: @primary-color !important;
      }
    }

    .row-item {
      align-items: center !important;
    }

    .row-item:nth-child(2n-1) {
      background-color: #f0eded29 !important;
    }
  }
</style>
<style lang="less" scoped>
  /* 图片弹窗 */
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
  }

  /* 图片 */
  .modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 70%;
  }

  /* 添加动画 */
  .modal-content {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }

  @-webkit-keyframes zoom {
    from {
      -webkit-transform: scale(0);
    }

    to {
      -webkit-transform: scale(1);
    }
  }

  @keyframes zoom {
    from {
      -webkit-transform: scale(0);
    }

    to {
      -webkit-transform: scale(1);
    }
  }

  /* 关闭按钮 */
  .close {
    position: absolute;
    top: 15px;
    right: 50%;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus {
    color: rgb(158, 158, 158);
    text-decoration: none;
    cursor: pointer;
  }

  //:deep(.dv-scroll-board .rows .ceil) {
  //  padding: 0 6px !important;
  //}

  /* 小屏幕中图片宽度为 100% */
  @media only screen and (max-width: 800px) {
    .modal-content {
      width: 100%;
    }
  }
</style>
