gasInjection-project/src/views/vent/monitorManager/alarmMonitor/common/mainWell.vue

<template>
  <div class="mainWell">
    <!-- 光钎测温 -->
    <div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
      <div class="nav" v-for="(item, index) in topOutList" :key="index">
        <div class="pic" v-if="item.imgSrc">
          <img :src="imgUrl" alt="" />
        </div>
        <div class="content" v-if="item.label && item.value">
          <span>{{ item.label }}</span>
          <span>{{ item.value }}</span>
        </div>
        <div class="text" v-if="item.text">{{ item.text }}</div>
      </div>
    </div>
    <!-- 束管监测 -->
    <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
      <div class="content-box">
        <div class="contents">
          <img src="/@/assets/images/fire/pie.png" alt="" />
          <span class="text">{{ topContent.temperature }}</span>
          <span class="dw">°C</span>
        </div>
        <!-- <div class="contents">
          <div class="text">
            <span class="text-label">位置 : </span>
            <span class="text-value">{{ topContent.position }}</span>
          </div>
          <div class="text">
            <span class="text-label">时间 : </span>
            <span class="text-value">{{ topContent.time }}</span>
          </div>
        </div> -->
      </div>
      <div class="content-box">
        <div class="text1">{{ topContent.warn }}</div>
      </div>
    </div>

    <div class="center-box" v-if="strType != 'sys_coalseam'">
      <div class="content-box" v-for="(items, index) in tabList" :key="index">
        <div class="title">
          <span class="title-label">{{ items.label }}</span>
          <span class="details">{{ `${items.details}>>` }}</span>
        </div>
        <div class="content">
          <a-table
            v-if="index == 0"
            ref="table"
            size="small"
            :scroll="{ x: 0, y: 273 }"
            :columns="columnsSmoke"
            :data-source="monitorlistYw"
            :pagination="false"
          >
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'warnLevel_str'">
                <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
              </template>
            </template>
            <span slot="action" slot-scope="text, record"></span>
          </a-table>
          <a-table
            v-if="index == 1"
            ref="table1"
            size="small"
            :columns="columns"
            :data-source="monitorlistHy"
            :pagination="false"
            :scroll="{ y: 273 }"
          >
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'warnLevel_str'">
                <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
              </template>
            </template>
            <span slot="action" slot-scope="text, record"> </span>
          </a-table>
          <a-table
            v-if="index == 2"
            ref="table"
            size="small"
            :scroll="{ y: 273 }"
            :columns="columns"
            :data-source="monitorlistPl"
            :pagination="false"
          >
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'warnLevel_str'">
                <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
              </template>
            </template>
            <span slot="action" slot-scope="text, record"> </span>
          </a-table>
        </div>
      </div>
    </div>
    <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'" :key="index">
        <div class="title">
          <span class="title-label">{{ items.label }}</span>
          <span class="details">{{ `${items.details}>>` }}</span>
        </div>
        <div class="content">
          <a-table
            v-if="index == 0"
            ref="table"
            size="small"
            :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
            :columns="columnsSmoke"
            :data-source="monitorlistYw"
            :pagination="false"
          >
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'warnLevel_str'">
                <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
              </template>
            </template>
            <span slot="action" slot-scope="text, record"></span>
          </a-table>

          <a-table
            v-if="index == 1"
            ref="table"
            size="small"
            :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
            :columns="columnsSmoke"
            :data-source="monitorlistWd"
            :pagination="false"
          >
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'warnLevel_str'">
                <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
              </template>
            </template>
            <span slot="action" slot-scope="text, record"> </span>
          </a-table>
          <a-table
            v-if="index == 2"
            ref="table"
            size="small"
            :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
            :columns="columns"
            :data-source="monitorlistPl"
            :pagination="false"
          >
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'warnLevel_str'">
                <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
              </template>
            </template>
            <span slot="action" slot-scope="text, record"> </span>
          </a-table>
          <a-table
            v-if="index == 3"
            ref="table1"
            size="small"
            :columns="columns"
            :data-source="monitorlistHy"
            :pagination="false"
            :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
          >
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'warnLevel_str'">
                <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
              </template>
            </template>
            <span slot="action" slot-scope="text, record"> </span>
          </a-table>
        </div>
      </div>
    </div>
    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
      <div class="footer-title">
        <div class="echart-label">光纤测温系统实时温度监测</div>
      </div>
      <div class="echart-content">
        <echartLine2 :echartDataWd="echartDataWd" />
      </div>
    </div>
    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
      <div class="footer-title">
        <div class="echart-label">光纤测温系统实时温度监测</div>
      </div>
      <div class="echart-content">
        <echartLine2 :echartDataWd="echartDataWd" />
      </div>
    </div>

    <!-- 束管监测 -->
    <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
      <div class="title-b">采空区密闭参数</div>
      <div class="card-btn">
        <div
          :class="activeIndex == index ? 'content-box1' : 'content-box'"
          v-for="(item, index) in mbList"
          :key="index"
          @click="btnClick(item, index)"
        >
          <div class="btn-label">
            <span>{{ item.label }}</span>
            <span>{{ item.dw }}</span>
          </div>
          <div class="box-item box-item1">
            <span class="text-t">{{ `${item.label1}:` }}</span>
            <span class="text-v">{{ item.nd }}</span>
          </div>
          <div class="box-item box-item2">
            <span class="text-t">{{ `${item.label2}:` }}</span>
            <span class="text-v">{{ item.time1 }}</span>
          </div>
          <div class="box-item box-item3">
            <span class="text-t">{{ `${item.label3}:` }}</span>
            <span class="text-v">{{ item.address }}</span>
          </div>
        </div>
      </div>
      <div class="echart-box">
        <div class="title-f">
          <div class="title-text">{{ `${type}趋势` }}</div>
        </div>
        <div class="echarts-box">
          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive, watch, defineProps } from 'vue';
  import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
  import imgUrl from '/@/assets/images/fire/pie.png';
  import echartLine2 from './echartLine2.vue';
  import echartLine1 from './echartLine1.vue';

  let props = defineProps({
    listData: Object,
    strType: String,
  });

  //束管监测-顶部区域数据
  let topContent = reactive({
    temperature: '0',
    position: '',
    time: '',
    warn: '',
  });
  //束管监测当前密闭参数激活选项
  let activeIndex = ref(0);
  //束管监测当前激活密闭参数类型
  let type = ref('O₂');
  //束管监测密闭参数列表
  let mbList = reactive([
    {
      label: 'O₂',
      dw: '(%)',
      label1: '浓度',
      label2: '时间',
      label3: '位置',
      nd: 0,
      time1: '',
      address: '',
    },
    {
      label: 'CO',
      dw: '(ppm)',
      label1: '浓度',
      label2: '时间',
      label3: '位置',
      nd: 0,
      time1: '',
      address: '',
    },
    {
      label: 'CO₂',
      dw: '(%)',
      label1: '浓度',
      label2: '时间',
      label3: '位置',
      nd: 0,
      time1: '',
      address: '',
    },
    {
      label: 'CH₄',
      dw: '(%)',
      label1: '浓度',
      label2: '时间',
      label3: '位置',
      nd: 0,
      time1: '',
      address: '',
    },
    {
      label: 'C₂H₂',
      dw: '(ppm)',
      label1: '浓度',
      label2: '时间',
      label3: '位置',
      nd: 0,
      time1: '',
      address: '',
    },
    {
      label: 'C₂H₄',
      dw: '(ppm)',
      label1: '浓度',
      label2: '时间',
      label3: '位置',
      nd: 0,
      time1: '',
      address: '',
    },
  ]);
  let echartDataSg1 = reactive({
    xData: [],
    yData: [],
    lengedData: 'O₂',
    lengedDataName: '(%)',
  });
  let echartDataSgList = reactive<any[]>([]);

  //外因火灾温度监测-图表数据
  let echartDataWd = reactive({
    xData: [],
    curData: {
      lengedData: '实时温度',
      data: [],
    },
    maxData: {
      lengedData: '最大温度',
      data: [],
    },
    minData: {
      lengedData: '最小温度',
      data: [],
    },
    avgData: {
      lengedData: '平均温度',
      data: [],
    },
  });

  //烟雾传感器列表数据
  let monitorlistYw = reactive([]);

  //火焰传感器列表数据
  let monitorlistHy = reactive([]);

  //喷淋装置列表数据
  let monitorlistPl = reactive([]);

  //温度传感器列表数据
  let monitorlistWd = reactive([]);

  //束管监测密闭参数选项切换
  function btnClick(item, ind) {
    activeIndex.value = ind;
    type.value = item.label;
    echartDataSg1.xData.length = 0;
    echartDataSg1.yData.length = 0;
    echartDataSg1.lengedData = type.value;
    echartDataSg1.lengedDataName = item.dw;

    switch (type.value) {
      case 'O₂':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.o2val);
        });
        break;
      case 'C₂H₄':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.ch2val);
        });
        break;
      case 'CO':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.coval);
        });
        break;
      case 'CH₄':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.chval);
        });
        break;
      case 'CO₂':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.co2val);
        });
        break;
      case 'C₂H₂':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.gasval);
        });
        break;
    }
  }

  watch(
    () => props.listData,
    (val) => {
      console.log(val, 'val---------------');
      props.listData = val;
      if (JSON.stringify(val) === '{}') return;
      echartDataSg1.xData.length = 0;
      echartDataSg1.yData.length = 0;
      echartDataSgList.length = 0;
      echartDataWd.xData.length = 0;
      echartDataWd.avgData.data.length = 0;
      echartDataWd.maxData.data.length = 0;
      echartDataWd.minData.data.length = 0;
      echartDataWd.curData.data.length = 0;
      monitorlistYw.length = 0;
      monitorlistHy.length = 0;
      monitorlistPl.length = 0;
      monitorlistWd.length = 0;
      if (val.fiber.length != 0) {
        const fiber: any = val.fiber[0];
        topOutList[0].value = fiber.readData.fmax;
        topOutList[1].value = fiber.readData.fmin;
        topOutList[2].value = fiber.readData.favg;
        topOutList[3].text = fiber.warnFlag ? '存在风险' : '正常';
        const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
        arr.forEach((el) => {
          echartDataWd.xData.push(el.pos);
          echartDataWd.curData.data.push(el.value);
          echartDataWd.maxData.data.push(fiber.avgParams?.max_temperature_value || 0);
          echartDataWd.minData.data.push(fiber.avgParams?.min_temperature_value || 0);
          echartDataWd.avgData.data.push(fiber.avgParams?.avg_temperature_value || 0);
        });
      } else {
        topOutList[0].value = '--';
        topOutList[1].value = '--';
        topOutList[2].value = '--';
        topOutList[3].text = '正常';
      }

      if (val.bundletube.length != 0) {
        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
        topContent.position = val.bundletube[0].strinstallpos || '--';
        topContent.time = val.bundletube[0].readTime || '--';
        topContent.warn =
          val.bundletube[0].warnLevel == 0
            ? '正常'
            : val.bundletube[0].warnLevel == 101
            ? '较低风险'
            : val.bundletube[0].warnLevel == 102
            ? '低风险'
            : val.bundletube[0].warnLevel == 103
            ? '中风险'
            : val.bundletube[0].warnLevel == 104
            ? '高风险'
            : val.bundletube[0].warnLevel == 201
            ? '报警'
            : '正常';
        val.bundletube[0].history.forEach((v) => {
          echartDataSg1.xData.push(v.time);
          if (echartDataSg1.lengedData == 'O₂') {
            echartDataSg1.yData.push(v.o2val);
          } else if (echartDataSg1.lengedData == 'C₂H₄') {
            echartDataSg1.yData.push(v.ch2val);
          } else if (echartDataSg1.lengedData == 'CO') {
            echartDataSg1.yData.push(v.coval);
          } else if (echartDataSg1.lengedData == 'CH₄') {
            echartDataSg1.yData.push(v.chval);
          } else if (echartDataSg1.lengedData == 'CO₂') {
            echartDataSg1.yData.push(v.co2val);
          } else if (echartDataSg1.lengedData == 'C₂H₂') {
            echartDataSg1.yData.push(v.gasval);
          }
          echartDataSgList.push(v);
        });
      } else {
        topContent.temperature = '--';
        topContent.position = '--';
        topContent.time = '--';
        topContent.warn = '正常';
      }

      if (val.smoke.length != 0) {
        val.smoke.forEach((el) => {
          monitorlistYw.push({
            strinstallpos: el.strinstallpos,
            val: el.readData.smokeval,
            warnLevel_str: el.warnLevel_str,
            readTime: el.readTime,
          });
        });
      }

      if (val.co.length != 0) {
        val.co.forEach((el) => {
          monitorlistHy.push(el);
        });
      }

      if (val.spray.length != 0) {
        val.spray.forEach((el) => {
          monitorlistPl.push(el);
        });
      }

      if (val.temperature.length != 0) {
        val.temperature.forEach((el) => {
          monitorlistWd.push({
            strinstallpos: el.strinstallpos,
            val: el.readData.fireval,
            warnLevel_str: el.warnLevel_str,
            readTime: el.readTime,
          });
        });
      }
    },
    { immediate: true, deep: true }
  );
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .mainWell {
      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
      --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
      --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
      --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
      --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
    }
  }

  .mainWell {
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    --image-max: url('/@/assets/images/fire/max.svg');
    --image-min: url('/@/assets/images/fire/min.svg');
    --image-pj: url('/@/assets/images/fire/pj.svg');
    --image-1: url('/@/assets/images/fire/1.png');
    --image-contetn: url('/@/assets/images/fire/contetn.png');
    --image-2: url('/@/assets/images/fire/2.png');
    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;

    .work-nav {
      height: 15%;
      width: 100%;
      margin-bottom: 20px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav {
        display: flex;
        justify-content: center;
        align-items: center;

        &:nth-child(1) {
          flex: 1;
          height: 100%;
          border-right: 2px solid;
          border-image: var(--border-image-2) 1 1 1;
        }

        &:nth-child(2) {
          flex: 1;
          height: 100%;
          border-right: 2px solid;
          border-image: var(--border-image-2) 1 1 1;
        }

        &:nth-child(3) {
          flex: 1;
          height: 100%;
          border-right: 2px solid;
          border-image: var(--border-image-2) 1 1 1;
        }

        &:nth-child(4) {
          flex: 1.2;
          color: #b3b8cc;
          font-size: 16px;
          height: 100%;
          border-right: 2px solid;
          border-image: var(--border-image-2) 1 1 1;
        }

        &:nth-child(5) {
          flex: 0.8;
          color: #2b87ff;
          font-size: 14px;
          height: 100%;
        }

        .pic {
          width: 26%;
          height: 84%;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .content {
          height: 84%;
          margin-left: 15px;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          span {
            font-size: 14px;

            &:nth-child(1) {
              padding: 5px 0px;
              color: #b3b8cc;
            }

            &:nth-child(2) {
              font-family: 'douyuFont';
              font-size: 16px;
              color: var(--vent-table-action-link);
            }
          }
        }
      }

      .nav:nth-child(1) .pic {
        background: var(--image-max) no-repeat center;
        background-size: 50% 50%;
      }

      .nav:nth-child(2) .pic {
        background: var(--image-min) no-repeat center;
        background-size: 50% 50%;
      }

      .nav:nth-child(3) .pic {
        background: var(--image-pj) no-repeat center;
        background-size: 50% 50%;
      }

      .content-box {
        display: flex;

        &:nth-child(1) {
          justify-content: space-around;
          align-items: center;
          flex: 2;
          height: 100%;
          border-right: 2px solid;
          border-image: var(--border-image-2) 1 1 1;
        }

        &:nth-child(2) {
          flex: 1;
          justify-content: center;
          align-items: center;
          height: 100%;
        }

        .contents {
          height: 73%;

          &:nth-child(1) {
            width: 40%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              position: relative;
              width: 23%;
              height: 100%;
              background: var(--image-pj) no-repeat center;
              background-size: 50% 50%;
            }

            .text {
              font-family: 'douyuFont';
              font-size: 28px;
              margin: 0px 15px;
              color: var(--vent-table-action-link);
            }

            .dw {
              font-size: 14px;
              color: #b3b8cc;
            }
          }

          &:nth-child(2) {
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .text {
              font-size: 18px;

              .text-label {
                color: #b3b8cc;
                font-weight: bold;
              }

              .text-value {
                font-family: 'douyuFont';
                color: var(--vent-table-action-link);
                margin-left: 10px;
              }
            }
          }
        }

        .text1 {
          font-size: 16px;
          color: #b3b8cc;
          font-weight: bold;
        }
      }
    }

    .center-box {
      height: 47%;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .content-box {
        display: flex;
        flex-direction: column;
        width: 32%;
        height: 100%;
        background: var(--image-bj1) no-repeat center;
        background-size: 100% 100%;

        &:nth-child(2) {
          margin: 0px 20px;
        }

        .title {
          width: 100%;
          height: 40px;
          padding: 0px 15px;
          margin-bottom: 10px;
          border-bottom: 1px solid var(--vent-warn-tab-bg);
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-label {
            // font-family: 'douyuFont';
            font-size: 14px;
            color: #fff;
          }

          .details {
            font-size: 14px;
            color: #1f81df;
          }
        }

        .content {
          height: calc(100% - 40px);
          margin-bottom: 10px;
        }
      }
    }

    .center-box1 {
      height: 70%;
      // margin-bottom: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .content-box {
        display: flex;
        flex-direction: column;
        width: calc(50% - 10px);
        height: calc(70% - 10px);
        background: var(--image-bj1) no-repeat center;
        background-size: 100% 100%;

        &:nth-child(1) {
          margin: 0px 20px 20px 0px;
        }

        &:nth-child(3) {
          margin: 0px 20px 0px 0px;
        }

        .title {
          width: 100%;
          height: 40px;
          padding: 0px 15px;
          margin-bottom: 10px;
          border-bottom: 1px solid var(--vent-warn-tab-bg);
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-label {
            font-size: 16px;
            color: #fff;
          }

          .details {
            font-size: 14px;
            color: #1f81df;
          }
        }

        .content {
          height: calc(100% - 40px);
          margin-bottom: 10px;
        }
      }

      .content-boxs {
        display: flex;
        flex-direction: column;
        width: calc(50% - 10px);
        height: calc(30% - 30px);
        background: var(--image-bj1) no-repeat center;
        background-size: 100% 100%;

        &:nth-child(1) {
          margin: 0px 20px 20px 0px;
        }

        &:nth-child(3) {
          margin: 0px 20px 20px 0px;
        }

        .title {
          width: 100%;
          height: 40px;
          padding: 0px 15px;
          margin-bottom: 10px;
          border-bottom: 1px solid var(--vent-warn-tab-bg);
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-label {
            font-size: 16px;
            color: #fff;
          }

          .details {
            font-size: 14px;
            color: #1f81df;
          }
        }

        .content {
          height: calc(100% - 40px);
          margin-bottom: 10px;
        }
      }
    }

    .center-box2 {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .content-box {
        display: flex;
        flex-direction: column;
        width: calc(50% - 10px);
        height: calc(70% - 10px);
        background: var(--image-bj1) no-repeat center;
        background-size: 100% 100%;

        &:nth-child(1) {
          margin: 0px 20px 20px 0px;
        }

        &:nth-child(3) {
          margin: 0px 20px 0px 0px;
        }

        .title {
          width: 100%;
          height: 40px;
          padding: 0px 15px;
          margin-bottom: 10px;
          border-bottom: 1px solid var(--vent-warn-tab-bg);
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-label {
            font-size: 16px;
            color: #fff;
          }

          .details {
            font-size: 14px;
            color: #1f81df;
          }
        }

        .content {
          height: calc(100% - 40px);
          margin-bottom: 10px;
        }
      }

      .content-boxs {
        display: flex;
        flex-direction: column;
        width: calc(50% - 10px);
        height: calc(30% - 30px);
        background: var(--image-bj1) no-repeat center;
        background-size: 100% 100%;

        &:nth-child(1) {
          margin: 0px 20px 20px 0px;
        }

        &:nth-child(3) {
          margin: 0px 20px 20px 0px;
        }

        .title {
          width: 100%;
          height: 40px;
          padding: 0px 15px;
          margin-bottom: 10px;
          border-bottom: 1px solid var(--vent-warn-tab-bg);
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-label {
            font-size: 16px;
            color: #fff;
          }

          .details {
            font-size: 14px;
            color: #1f81df;
          }
        }

        .content {
          height: calc(100% - 40px);
          margin-bottom: 10px;
        }
      }
    }

    .footer-box {
      height: calc(38% - 40px);
      padding: 10px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;

      .footer-title {
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .echart-label {
          font-family: 'douyuFont';
          font-size: 14px;
          color: #fff;
        }
      }

      .echart-content {
        height: calc(100% - 30px);
      }
    }

    .footer-box1 {
      height: calc(30% - 20px);
      padding: 10px 15px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;

      .footer-title {
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .echart-label {
          font-family: 'douyuFont';
          font-size: 16px;
          color: #fff;
        }
      }

      .echart-content {
        height: calc(100% - 30px);
      }
    }

    .content-s {
      width: 100%;
      height: 608px;
      padding: 10px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;

      .title-b {
        height: 30px;
        line-height: 30px;
        font-family: 'douyuFont';
        font-size: 14px;
        color: #fff;
      }

      .card-btn {
        height: 28%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .content-box {
          position: relative;
          width: 16%;
          height: 100%;
          background: var(--image-1) no-repeat center;
          background-size: 100% 100%;
          cursor: pointer;

          .btn-label {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%);
            font-size: 16px;
            color: #fff;
          }

          .box-item {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            width: 89%;
            height: 16%;
            padding: 0px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--image-contetn) no-repeat center;
            background-size: 100% 100%;

            .text-t {
              width: 17%;
              color: #fff;
              font-size: 12px;
            }

            .text-v {
              width: 83%;
              font-family: 'douyuFont';
              font-size: 10px;
              color: var(--vent-table-action-link);
              display: flex;
              justify-content: flex-end;
            }
          }

          .box-item1 {
            top: 24%;
          }

          .box-item2 {
            top: 50%;
          }

          .box-item3 {
            top: 75%;
          }
        }

        .content-box1 {
          position: relative;
          width: 16%;
          height: 100%;
          background: var(--image-2) no-repeat center;
          background-size: 100% 100%;
          cursor: pointer;

          .btn-label {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%);
            font-size: 16px;
            color: #fff;
          }

          .box-item {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            width: 89%;
            height: 16%;
            padding: 0px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--image-contetn) no-repeat center;
            background-size: 100% 100%;

            .text-t {
              width: 17%;
              color: #fff;
              font-size: 12px;
            }

            .text-v {
              width: 83%;
              font-family: 'douyuFont';
              font-size: 10px;
              color: var(--vent-table-action-link);
              display: flex;
              justify-content: flex-end;
            }
          }

          .box-item1 {
            top: 19%;
          }

          .box-item2 {
            top: 41%;
          }

          .box-item3 {
            top: 63%;
          }
        }
      }

      .echart-box {
        height: calc(72% - 41px);
        border: 1px solid #114aac;

        .title-f {
          height: 40px;
          padding: 0px 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-text {
            font-family: 'douyuFont';
            font-size: 14px;
            color: #fff;
          }
        }

        .echarts-box {
          height: calc(100% - 40px);
        }
      }
    }
  }
</style>