mky-vent-base/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>
      <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">
        <div class="container-title">{{ tabLists.yw }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistYw" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">
              <div class="box-text-z">
                <div class="text-label">值</div>
                <div class="text-val">{{ item.val || '--' }}</div>
              </div>
              <div class="box-text-zt">
                <div class="text-label">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
                </div>
              </div>
              <div class="box-text-time">
                <div class="text-label">时间</div>
                <div class="text-val">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="content-box">
        <div class="container-title">{{ tabLists.pl }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistPl" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">
              <div class="box-text-z">
                <div class="text-label">值</div>
                <div class="text-val">{{ item.readData.sprayval || '--' }}</div>
              </div>
              <div class="box-text-zt">
                <div class="text-label">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
                </div>
              </div>
              <div class="box-text-time">
                <div class="text-label">时间</div>
                <div class="text-val">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="content-box">
        <div class="container-title">{{ tabLists.wd }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistWd" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">
              <div class="box-text-z">
                <div class="text-label">值</div>
                <div class="text-val">{{ item.val || '--' }}</div>
              </div>
              <div class="box-text-zt">
                <div class="text-label">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
                </div>
              </div>
              <div class="box-text-time">
                <div class="text-label">时间</div>
                <div class="text-val">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="container-title">{{ tabLists.co }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistHy" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">

              <div class="box-text-zt1">
                <div class="text-label-hy">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val-hy1' : 'text-val-hy2'">{{ item.warnLevel_str || '--'
                  }}
                </div>
              </div>
              <div class="box-text-time1">
                <div class="text-label-hy">时间</div>
                <div class="text-val-hy">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
      <div class="content-box">
        <div class="container-title">{{ tabLists.yw }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistYw" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">
              <div class="box-text-z">
                <div class="text-label">值</div>
                <div class="text-val">{{ item.val || '--' }}</div>
              </div>
              <div class="box-text-zt">
                <div class="text-label">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
                </div>
              </div>
              <div class="box-text-time">
                <div class="text-label">时间</div>
                <div class="text-val">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="container-title">{{ tabLists.wd }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistWd" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">
              <div class="box-text-z">
                <div class="text-label">值</div>
                <div class="text-val">{{ item.val || '--' }}</div>
              </div>
              <div class="box-text-zt">
                <div class="text-label">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
                </div>
              </div>
              <div class="box-text-time">
                <div class="text-label">时间</div>
                <div class="text-val">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="container-title">{{ tabLists.pl }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistPl" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">
              <div class="box-text-z">
                <div class="text-label">值</div>
                <div class="text-val">{{ item.readData.sprayval || '--' }}</div>
              </div>
              <div class="box-text-zt">
                <div class="text-label">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
                </div>
              </div>
              <div class="box-text-time">
                <div class="text-label">时间</div>
                <div class="text-val">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="container-title">{{ tabLists.co }}</div>
        <div class="container-content">
          <div class="container-content-box" v-for="(item, index) in monitorlistHy" :key="index">
            <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
            <div class="content-box-text">

              <div class="box-text-zt1">
                <div class="text-label-hy">状态</div>
                <div :class="item.warnLevel_str == '报警' ? 'text-val-hy1' : 'text-val-hy2'">{{ item.warnLevel_str || '--'
                  }}
                </div>
              </div>
              <div class="box-text-time1">
                <div class="text-label-hy">时间</div>
                <div class="text-val-hy">{{ item.readTime || '--' }}</div>
              </div>
            </div>
          </div>
        </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, tabLists, } 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.gasval);
      });
      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.chval);
      });
      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.avgParam?.max_temperature_value || 0);
        echartDataWd.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
        echartDataWd.avgData.data.push(fiber.avgParam?.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) => {
        el.smokeVal = el.readData.smokeval == '0' ? '无烟' : el.readData.smokeval == '1' ? '有烟' : el.readData.smokeval
        monitorlistYw.push({
          strinstallpos: el.strinstallpos,
          val: el.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-z: url('/@/assets/images/fire/wy-z.png');
  --image-zt: url('/@/assets/images/fire/wy-zt.png');
  --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
  --image-time: url('/@/assets/images/fire/wy-time.png');
  --image-time1: url('/@/assets/images/fire/wy-time2.png');
  --image-title: url('/@/assets/images/fire/wy-title.png');
  --image-bj2: url('/@/assets/images/fire/wy-bj.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 {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 32%;
      height: 100%;
      background: var(--image-bj2) no-repeat center;
      background-size: 100% 100%;

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


      .container-title {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: 4px;
        color: #fff;
      }

      .container-content {
        position: absolute;
        width: 100%;
        top: 38px;
        height: calc(100% - 48px);
        overflow-y: auto;

        .container-content-box {
          position: relative;
          width: 100%;
          height: 80px;
          margin-bottom: 10px;
          background: var(--image-title) no-repeat center;
          background-size: 100% 100%;
        }

        .content-box-title {
          position: absolute;
          left: 10px;
          color: #fff;
        }

        .content-box-text {
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: absolute;
          top: 22px;
          width: 100%;
          height: 58px;

          .box-text-z {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 205px;
            padding: 0px 30px;
            background: var(--image-z) no-repeat center;
            background-size: 100% 100%;

          }

          .box-text-zt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 205px;
            padding: 0px 30px;
            background: var(--image-zt) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-zt1 {
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            width: 258px;
            background: var(--image-zt1) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 305px;
            padding: 0px 30px;
            background: var(--image-time) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-time1 {
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            width: 298px;
            background: var(--image-time1) no-repeat center;
            background-size: 100% 100%;
          }

          .text-label {
            font-size: 12px;
            color: #fff
          }

          .text-label-hy {
            position: absolute;
            left: 50px;
            color: #fff;
            font-size: 12px
          }

          .text-val-hy {
            position: absolute;
            left: 115px;
            color: #fff;
            font-size: 12px;
          }

          .text-val-hy1 {
            position: absolute;
            left: 115px;
            color: #ff0000;
            font-size: 12px;
          }

          .text-val-hy2 {
            position: absolute;
            left: 115px;
            color: #91e609;
            font-size: 12px;
          }

          .text-val {
            font-size: 12px;
            color: #fff
          }

          .text-val1 {
            font-size: 12px;
            color: #ff0000
          }

          .text-val2 {
            font-size: 12px;
            color: #91e609
          }
        }
      }
    }

  }

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

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

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

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

      .container-title {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: 4px;
        color: #fff;
      }

      .container-content {
        position: absolute;
        width: 100%;
        top: 38px;
        height: calc(100% - 48px);
        overflow-y: auto;

        .container-content-box {
          position: relative;
          width: 100%;
          height: 80px;
          margin-bottom: 10px;
          background: var(--image-title) no-repeat center;
          background-size: 100% 100%;
        }

        .content-box-title {
          position: absolute;
          left: 10px;
          color: #fff;
        }

        .content-box-text {
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: absolute;
          top: 22px;
          width: 100%;
          height: 58px;

          .box-text-z {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 205px;
            padding: 0px 30px;
            background: var(--image-z) no-repeat center;
            background-size: 100% 100%;

          }

          .box-text-zt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 205px;
            padding: 0px 30px;
            background: var(--image-zt) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-zt1 {
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            width: 258px;
            background: var(--image-zt1) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 305px;
            padding: 0px 30px;
            background: var(--image-time) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-time1 {
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            width: 298px;
            background: var(--image-time1) no-repeat center;
            background-size: 100% 100%;
          }

          .text-label {
            font-size: 12px;
            color: #fff
          }

          .text-label-hy {
            position: absolute;
            left: 50px;
            color: #fff;
            font-size: 12px
          }

          .text-val-hy {
            position: absolute;
            left: 115px;
            color: #fff;
            font-size: 12px;
          }

          .text-val-hy1 {
            position: absolute;
            left: 115px;
            color: #ff0000;
            font-size: 12px;
          }

          .text-val-hy2 {
            position: absolute;
            left: 115px;
            color: #91e609;
            font-size: 12px;
          }

          .text-val {
            font-size: 12px;
            color: #fff
          }

          .text-val1 {
            font-size: 12px;
            color: #ff0000
          }

          .text-val2 {
            font-size: 12px;
            color: #91e609
          }
        }
      }
    }
  }

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

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

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

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

      .container-title {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: 4px;
        color: #fff;
      }

      .container-content {
        position: absolute;
        width: 100%;
        top: 38px;
        height: calc(100% - 48px);  
        overflow-y: auto;

        .container-content-box {
          position: relative;
          width: 100%;
          height: 80px;
          margin-bottom: 10px;
          background: var(--image-title) no-repeat center;
          background-size: 100% 100%;
        }

        .content-box-title {
          position: absolute;
          left: 10px;
          color: #fff;
        }

        .content-box-text {
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: absolute;
          top: 22px;
          width: 100%;
          height: 58px;

          .box-text-z {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 205px;
            padding: 0px 30px;
            background: var(--image-z) no-repeat center;
            background-size: 100% 100%;

          }

          .box-text-zt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 205px;
            padding: 0px 30px;
            background: var(--image-zt) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-zt1 {
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            width: 258px;
            background: var(--image-zt1) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            width: 305px;
            padding: 0px 30px;
            background: var(--image-time) no-repeat center;
            background-size: 100% 100%;
          }

          .box-text-time1 {
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            width: 298px;
            background: var(--image-time1) no-repeat center;
            background-size: 100% 100%;
          }

          .text-label {
            font-size: 12px;
            color: #fff
          }

          .text-label-hy {
            position: absolute;
            left: 50px;
            color: #fff;
            font-size: 12px
          }

          .text-val-hy {
            position: absolute;
            left: 115px;
            color: #fff;
            font-size: 12px;
          }

          .text-val-hy1 {
            position: absolute;
            left: 115px;
            color: #ff0000;
            font-size: 12px;
          }

          .text-val-hy2 {
            position: absolute;
            left: 115px;
            color: #91e609;
            font-size: 12px;
          }

          .text-val {
            font-size: 12px;
            color: #fff
          }

          .text-val1 {
            font-size: 12px;
            color: #ff0000
          }

          .text-val2 {
            font-size: 12px;
            color: #91e609
          }
        }
      }
    }
  }

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