mky-vent-base/src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

<template>
  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
  <div class="ventilateWarn">
    <div class="ventilate-top">
      <a-button v-if="!hasPermission('ventilateWarn:return')" preIcon="ant-design:rollback-outlined" type="text"
        size="small" style="position: absolute; left: 15px; top: 15px; color: #fff" @click="getBack">返回</a-button>
      <div class="alarm-menu">
        <div class="card-btn">
          <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
            @click="cardClick(ind, item)">
            <div class="text">{{ item.name }}</div>
            <div class="warn">{{ item.warn }}</div>
          </div>
        </div>
      </div>
      <div class="ventilate-content">
        <div class="work-nav">
          <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
            <div class="pic" v-if="item.imgSrc"></div>
            <div class="content" v-if="item.label && item.value">
              <span>{{ item.label }}</span>
              <span>{{ item.value }}</span>
            </div>
            <div :style="{ color: item.text == '正常' ? '#00d8ff' : '#ff2313' }"
              style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold" v-if="item.text">{{
                item.text }}</div>
            <div class="percent" v-if="item.list.length != 0">
              <div class="title">{{ item.label }}</div>
              <div class="value">
                <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
                  <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
                  <span style="color: #3df6ff; margin-left: 10px">{{ items.value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bot-area">
          <div class="title-t">
            <div class="text-t">通风信息状态监测</div>
          </div>
          <div class="echart-boxd">
            <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
          </div>
        </div>
      </div>
    </div>
    <div class="ventilate-bottom">
      <div class="bot-area">
        <div class="title-b">
          <div class="text-b">通风监控测点信息</div>
        </div>
        <div class="content-b">
          <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
            <div class="item-l">
              <div class="label-l">{{ item.label }}</div>
              <div class="value-l">{{ item.value }}</div>
            </div>
            <div class="item-r">
              <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                <span>{{ `${items.label} : ` }}</span>
                <span :class="{
                  'status-f': items.value == 1,
                  'status-l': items.value == 0,
                }">{{ `${items.value}${items.dw}` }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
import { useRouter } from 'vue-router';
import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
import { ventilateTopList } from '../common.data';
import CustomHeader from '/@/components/vent/customHeader.vue';
import echartLine from '../common/echartLine.vue';
import { usePermission } from '/@/hooks/web/usePermission';

const { hasPermission } = usePermission();
const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
let router = useRouter();
//左侧数据列表
let menuList = reactive<any[]>([]);
//当前左侧激活菜单的索引
let activeIndex1 = ref(0);
let maxY = ref<any>(0);
let echartDw = ref('(m³/min)');
//通风图表数据
const echartDataFc1 = reactive({
  maxData: {
    lengedData: '进风量',
    data: [],
  },
  minData: {
    lengedData: '回风量',
    data: [],
  },
  aveValue: {
    lengedData: '需风量',
    data: [],
  },
  xData: [],
});
let cardListTf = reactive<any[]>([]);

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor(deviceID, flag?) {
  timer = setTimeout(
    async () => {
      await getSysWarnList(deviceID, 'vent');
      if (timer) {
        timer = null;
      }
      getMonitor(deviceID);
    },
    flag ? 0 : 1000
  );
}
//返回首页
function getBack() {
  router.push('/monitorChannel/monitor-alarm-home');
}
//获取左侧数据列表
async function getMenuList() {
  let res = await sysTypeWarnList({ type: 'vent' });
  console.log(res, '通风预警监测左侧列表数据-------------');
  if (res.length != 0) {
    menuList.length = 0;
    res.forEach((el) => {
      menuList.push({
        name: el.deviceName,
        warn: '低风险',
        deviceID: el.deviceID,
        strtype: el.deviceType,
      });
    });
    getMonitor(menuList[0].deviceID, true);
  }
}
//菜单选项切换
function cardClick(ind, item) {
  activeIndex1.value = ind;
  clearTimeout(timer);
  getMonitor(item.deviceID, true);
}
//获取预警详情弹窗右侧数据
function getSysWarnList(id, type) {
  sysWarn({ sysid: id, type: type }).then((res) => {
    echartDataFc1.maxData.data.length = 0;
    echartDataFc1.minData.data.length = 0;
    echartDataFc1.aveValue.data.length = 0;
    echartDataFc1.xData.length = 0;
    if (JSON.stringify(res) != '{}') {
      ventilateTopList[0].value = res.jin || '--';
      ventilateTopList[1].value = res.hui || '--';
      ventilateTopList[2].value = res.xufengliang || '--';
      ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';

      if (res.history.length != 0) {
        res.history.forEach((v) => {
          echartDataFc1.maxData.data.push(parseFloat(v.jin));
          echartDataFc1.minData.data.push(parseFloat(v.hui));
          if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
            echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
          } else {
            echartDataFc1.aveValue.data.push(0);
          }

          echartDataFc1.xData.push(v.time);
        });
      }

      let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
        return acr > cur ? acr : cur;
      });
      let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
        return acr1 > cur1 ? acr1 : cur1;
      });
      maxY.value = max1 >= max2 ? max1 : max2;
      maxY.value = maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'))
      if (maxY.value.length < 2 && Number(maxY.value) < 1) {
        maxY.value = 1
      } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
        maxY.value = 10
      } else if (maxY.value.length < 3) {
        maxY.value = (Number(maxY.value[0]) + 1) * 10
      } else if (maxY.value.length < 4) {
        maxY.value = (Number(maxY.value[0]) + 1) * 100
      } else if (maxY.value.length < 5) {
        maxY.value = (Number(maxY.value[0]) + 1) * 1000
      } else if (maxY.value.length < 6) {
        maxY.value = (Number(maxY.value[0]) + 1) * 10000
      }
    }
  });
}
//获取通风监控测点信息
async function getWindDeviceList() {
  cardListTf.length = 0;
  let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
  if (res && res.msgTxt[0]) {
    let list = res.msgTxt[0].datalist || [];
    if (list.length > 0) {
      list.forEach((el: any) => {
        const readData = el.readData;
        el = Object.assign(el, readData);
        cardListTf.push({
          label: '通信状态',
          value: el.netStatus == '0' ? '断开' : '连接',
          listR: [
            { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
            { id: 1, label: '风量', dw: '(m³/min)', value: el.m3 },
            { id: 2, label: '风速', dw: '(m/s)', value: el.va },
            { id: 4, label: '时间', dw: '', value: el.readTime },
            {
              id: 3,
              label: '是否报警',
              dw: '',
              value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
            },
          ],
        });
      });
    }
  }
}
onMounted(() => {
  getMenuList();
  getWindDeviceList();
});
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

<style lang="less" scoped>
.ventilateWarn {
  width: 100%;
  height: 100%;
  padding: 80px 10px 15px 10px;
  box-sizing: border-box;

  .ventilate-top {
    display: flex;
    justify-content: space-between;
    height: 50%;
    margin-bottom: 15px;
    background: url('../../../../../assets/images/fire/border.png') no-repeat center;
    background-size: 100% 100%;

    .alarm-menu {
      height: 100%;
      width: 15%;
      padding: 10px;
      box-sizing: border-box;

      .card-btn {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .btn {
          position: relative;
          width: 81%;
          height: 24%;
          margin-bottom: 6%;
          font-family: 'douyuFont';
          background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

          .text {
            width: 80%;
            position: absolute;
            left: 50%;
            top: 28px;
            font-size: 14px;
            color: #01fefc;
            text-align: center;
            transform: translate(-50%, 0);
          }

          .warn {
            width: 100%;
            position: absolute;
            left: 50%;
            bottom: 11px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            transform: translate(-50%, 0);
          }
        }

        .btn1 {
          position: relative;
          width: 100%;
          height: 24%;
          margin-bottom: 6%;
          font-family: 'douyuFont';
          background: url('../../../../../assets/images/fire/choice.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;

          .text {
            width: 80%;
            position: absolute;
            left: 50%;
            top: 28px;
            font-size: 14px;
            color: #01fefc;
            text-align: center;
            transform: translate(-62%, 0);
          }

          .warn {
            width: 100%;
            position: absolute;
            left: 50%;
            bottom: 11px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            transform: translate(-60%, 0);
          }
        }
      }
    }

    .ventilate-content {
      height: 100%;
      width: 85%;
      padding: 10px 0px;
      box-sizing: border-box;

      .work-nav {
        height: 30%;
        width: 100%;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 3px solid;
        border-image: linear-gradient(to bottom, rgba(45, 116, 160, 1), rgba(45, 116, 160, 0.2), rgba(45, 116, 160, 1)) 1 1 1;

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

          &:nth-child(1) {
            flex: 1;
            height: 100%;
            border-right: 2px solid;
            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
          }

          &:nth-child(2) {
            flex: 1;
            height: 100%;
            border-right: 2px solid;
            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
          }

          &:nth-child(3) {
            flex: 1;
            height: 100%;
            border-right: 2px solid;
            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
          }

          &:nth-child(4) {
            flex: 0.6;
            color: #b3b8cc;
            font-size: 16px;
            height: 100%;
            border-right: 2px solid;
            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
          }

          &:nth-child(5) {
            flex: 1.4;
            height: 100%;

            .percent {
              width: 100%;
              height: 82%;
              padding: 0px 20px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .title {
                font-size: 14px;
                padding: 5px 0px;
                color: #b3b8cc;
                text-align: center;
              }

              .value {
                display: flex;
                justify-content: space-between;

                span {
                  font-family: 'douyuFont';
                  font-size: 18px;
                }
              }
            }
          }

          .pic {
            width: 30%;
            height: 82%;
          }

          .content {
            height: 82%;
            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: #3df6ff;
              }
            }
          }
        }

        .nav:nth-child(1) .pic {
          background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
          background-size: 100% 100%;
        }

        .nav:nth-child(2) .pic {
          background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
          background-size: 100% 100%;
        }

        .nav:nth-child(3) .pic {
          background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
          background-size: 100% 100%;
        }
      }

      .bot-area {
        height: calc(100% - 30% - 3px);
        padding: 10px;
        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;

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

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

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

  .ventilate-bottom {
    height: calc(50% - 15px);
    background: url('../../../../../assets/images/fire/border.png') no-repeat center;
    background-size: 100% 100%;
    padding: 10px;
    box-sizing: border-box;

    .bot-area {
      height: 100%;
      padding: 10px;
      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;

      .title-b {
        height: 30px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

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

      .content-b {
        height: calc(100% - 40px);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .card-b {
          position: relative;
          width: 24%;
          height: 128px;
          margin: 0px 9px 10px 9px;
          background: url(/src/assets/images/fire/bot-area.png) no-repeat center;
          background-size: 100% 100%;

          .item-l {
            position: absolute;
            left: 32px;
            top: 50%;
            transform: translate(0, -50%);
            width: 89px;
            height: 98px;
            background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;

            .label-l {
              width: 100%;
              position: absolute;
              top: 7px;
              color: #fff;
              font-size: 12px;
              text-align: center;
            }

            .value-l {
              width: 100%;
              position: absolute;
              top: 50px;
              font-family: 'douyuFont';
              font-size: 14px;
              color: #3df6ff;
              text-align: center;
            }
          }

          .item-r {
            position: absolute;
            left: 132px;
            top: 50%;
            transform: translate(0, -50%);
            height: 128px;
            padding: 5px 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            box-sizing: border-box;

            .content-r {
              display: flex;

              span {
                font-size: 14px;
                color: #fff;

                &:first-child {
                  display: inline-block;
                  width: 68px;
                  text-align: right;
                }

                &:last-child {
                  display: inline-block;
                  width: calc(100% - 68px);
                  overflow: hidden;
                  white-space: nowrap;
                  /* 不换行 */

                  /* 超出部分隐藏 */
                  text-overflow: ellipsis;
                  /* 使用省略符号 */
                }
              }

              .status-f {
                color: #ff0000;
              }

              .status-l {
                color: #3df6ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>