Vent-App/pages/warndata/components/vent-detail.vue

<template>
  <view class="vent-detail">
    <u-tabs
      class="devic-box-tab"
      :current="PageCur"
      :list="tabList"
      @click="NavChange"
    ></u-tabs>
    <view class="vent-content">
      <view class="top-area">
        <view class="top-title">
          <view style="font-weight: bold">{{ mainTitle || "--" }}</view>
          <view class="title-icon">
            <image
              src="/static/model/alarmTrue.svg"
              alt=""
              class="icon-style"
            />
            <text class="icon-text">低风险</text>
          </view>
        </view>
        <view class="top-card">
          <view class="card-box" v-for="(item, index) in cardList" :key="index">
            <view class="box-item">
              <view class="box-val">{{ item.value }}</view>
              <view class="box-name">{{ item.name }}</view>
            </view>
          </view>
        </view>
        <view class="top-card1">
          <view
            class="card-box"
            v-for="(item, index) in cardList1"
            :key="index"
          >
            <view class="box-item">
              <view class="box-val">{{ item.value }}</view>
              <view class="box-name">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="center-area">
        <view class="top-title">
          <view style="font-weight: bold">通风信息状态监测</view>
        </view>
        <view class="echartBox">
          <canvas
            id="myChart"
            :style="{ width: '100%', height: '180px' }"
          ></canvas>
        </view>
      </view>
      <view class="bot-area">
        <view class="top-title">
          <view style="font-weight: bold">通风监控测点信息</view>
        </view>
        <view class="bot-content">
          <view 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>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  name: "ventDetail",
  props: {},
  watch: {},
  data() {
    return {
      mainTitle: "",
      myChart: null,
      timer: "",
      PageCur: "0",
      tabList: [],
      cardList: [
        { name: "进风量(m³/min)", value: 0 },
        { name: "回风量(m³/min)", value: 0 },
        { name: "需风量(m³/min)", value: 0 },
      ],
      cardList1: [
        { name: "O₂(%)", value: 0 },
        { name: "CO(%)", value: 0 },
      ],
      //echarts图表数据
      maxY: 0,
      xData: [],
      yDataJ: [],
      yDataH: [],
      yDataX: [],
      cardListTf: [],
    };
  },
  mounted() {
    this.getTabList();
    // than.initChart();
    this.getWindDeviceList();
  },
  beforeDestroy() {
    this.myChart.clear();
    this.myChart.dispose();
    this.timer = null;
    clearTimeout(this.timer);
  },
  methods: {
    NavChange: function (item) {
      clearTimeout(this.timer);
      this.PageCur = item.index;
      this.mainTitle = this.tabList[this.PageCur].name;
      this.getMonitor(this.tabList[this.PageCur].deviceID, true);
    },
    getMonitor(deviceID, flag) {
      let than = this;
      than.timer = setTimeout(
        async () => {
          await than.getSysWarnList(deviceID, "vent");
          if (than.timer) {
            than.timer = null;
          }
          than.getMonitor(deviceID);
        },
        flag ? 0 : 3000
      );
    },
    //获取顶部tab选项数据
    getTabList() {
      new Promise((resolve, reject) => {
        api
          .sysTypeWarn({ type: "vent" })
          .then((response) => {
            if (response.data.code == 200 && response.data.result.length != 0) {
              let result = response.data.result;
              this.tabList = result.map((el) => {
                //lxh
                return {
                  name: el.deviceName,
                  warn: "低风险",
                  deviceID: el.deviceID,
                  strtype: el.deviceType,
                };
              });
              this.mainTitle = this.tabList[0].name;
              this.getMonitor(this.tabList[0].deviceID, true);
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    formatRoundNum(num) {
      let interger = Math.ceil(num);
      let leng = String(interger).length;
      return (
        Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
      );
    },
    //初始化echarts实例
    initChart() {
      let canvas = document.getElementById("myChart");
      this.myChart = this.$echarts.init(canvas);
      let option = {
        grid: {
          top: "24%",
          left: "0%",
          bottom: "6%",
          right: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0, 0, 0, .6)",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        legend: {
          // align: 'center',
          right: "0%",
          top: "0%",
          type: "plain",
          textStyle: {
            color: "#0eb4fc",
            fontSize: 12,
          },
          // icon:'rect',
          itemGap: 25,
          itemWidth: 20,
          icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
          data: [
            {
              name: "进风量",
            },
            {
              name: "回风量",
            },

            {
              name: "需风量",
            },
          ],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              fontSize: 12,
              margin: 10,
              textStyle: {
                color: "#b3b8cc",
              },
              // formatter: function (params) {
              //     let newParamsName = ref('')  // 最终拼接成的字符串
              //     let paramsNameNumber = ref(params.length) // 实际标签的个数
              //     let provideNumber = ref(10)  // 每行能显示的字的个数
              //     let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
              //     /**
              //      * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
              //      */
              //     // 条件等同于rowNumber>1
              //     if (paramsNameNumber.value > provideNumber.value) {
              //         /** 循环每一行,p表示行 */
              //         for (var p = 0; p < rowNumber; p++) {
              //             var tempStr = '' // 表示每一次截取的字符串
              //             var start = p * provideNumber.value // 开始截取的位置
              //             var end = start + provideNumber.value // 结束截取的位置
              //             // 此处特殊处理最后一行的索引值
              //             if (p == rowNumber - 1) {
              //                 // 最后一次不换行
              //                 tempStr = params.substring(start, paramsNameNumber.value)
              //             } else {
              //                 // 每一次拼接字符串并换行
              //                 tempStr = params.substring(start, end) + '\n'
              //             }
              //             newParamsName.value += tempStr // 最终拼成的字符串
              //         }
              //     } else {
              //         // 将旧标签的值赋给新标签
              //         newParamsName.value = params
              //     }
              //     //将最终的字符串返回
              //     return newParamsName.value
              // }
            },
            axisLine: {
              lineStyle: {
                color: "#f1f5f6",
              },
            },
            axisTick: {
              show: false,
            },
            data: this.xData || [],
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: "value",
            max: this.maxY,
            axisLabel: {
              textStyle: {
                color: "#b3b8cc",
              },
              formatter: "{value}",
            },
            name: "(m³/min)",
            nameTextStyle: {
              color: "#b3b8cc",
              fontSize: 12,
              lineHeight: 0,
            },
            splitLine: {
              lineStyle: {
                color: "#f1f5f6",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#f1f5f6",
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            boundaryGap: false,
            type: "value",
            max: this.maxY,
            axisLabel: {
              textStyle: {
                color: "#b3b8cc",
              },
              formatter: "{value}",
            },
            name: "(m³/min)",
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 10,
            },
            splitLine: {
              lineStyle: {
                color: "#f1f5f6",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#f1f5f6",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "进风量",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: "#19a3df",
              borderColor: "#a3c8d8",
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "#19a3df",
              },
            },
            data: this.yDataJ || [],
          },
          {
            name: "回风量",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: "#4fffad",
              borderColor: "#a3c8d8",
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "#4fffad",
              },
            },
            data: this.yDataH || [],
          },
          {
            name: "需风量",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: "#fc8452",
              borderColor: "#a3c8d8",
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "#fc8452",
              },
            },

            data: this.yDataX || [],
          },
        ],
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    //获取选项详情数据
    getSysWarnList(id, type) {
      new Promise((resolve, reject) => {
        api
          .sysWarn({ sysid: id, type: type })
          .then((response) => {
            if (response.data.code == 200) {
              this.xData = [];
              this.yDataH = [];
              this.yDataJ = [];
              this.yDataX = [];
              let data = response.data.result;
              this.cardList[0].value = data.jin || "--";
              this.cardList[1].value = data.hui || "--";
              this.cardList[2].value = data.xufengliang || "--";
              if (data.history.length != 0) {
                data.history.forEach((v) => {
                  //lxh
                  this.yDataJ.push(parseFloat(v.jin));
                  this.yDataH.push(parseFloat(v.hui));
                  if (
                    this.cardList[2].value &&
                    this.cardList[2].value != "--"
                  ) {
                    this.yDataX.push(this.cardList[2].value);
                  } else {
                    this.yDataX.push(0);
                  }
                  this.xData.push(v.time);
                });
              }
              let max1 = this.yDataJ.reduce((acr, cur) => {
                return acr > cur ? acr : cur;
              });
              let max2 = this.yDataH.reduce((acr1, cur1) => {
                return acr1 > cur1 ? acr1 : cur1;
              });
              this.maxY =
                max1 >= max2
                  ? this.formatRoundNum(max1 * 1.5)
                  : this.formatRoundNum(max2 * 1.5);
              this.initChart();
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取通风监控测点信息
    getWindDeviceList() {
      new Promise((resolve, reject) => {
        api
          .getDeviceVent({ devicetype: "windrect", pagetype: "normal" })
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result;
              if (data.msgTxt[0].datalist.length != 0) {
                let list = data.msgTxt[0].datalist;
                if (list.length > 0) {
                  this.cardListTf = list.map((el) => {
                    //lxh
                    const readData = el.readData;
                    el = Object.assign(el, readData);
                    return {
                      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
                              ? "断开"
                              : "未监测",
                        },
                      ],
                    };
                  });
                }
              }
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.vent-detail {
  position: relative;
  box-sizing: border-box;

  .devic-box-tab {
    padding: 0px 10px !important;
  }

  .vent-content {
    height: 704px;
    box-sizing: border-box;
    overflow-y: auto;

    .top-area {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;

      .top-card {
        width: 100%;
        height: 60px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-box {
          width: 32%;
          height: 100%;
          border-radius: 5px;
          background: linear-gradient(
            to right,
            rgba(55, 135, 254, 0.08),
            rgba(4, 184, 255, 0.08),
            rgba(60, 161, 237, 0.08)
          );
        }

        .card-box:nth-child(1) .box-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width: 100%;
          height: 100%;
          padding: 0px 15px;
          background: url("/static/jinfeng.png") no-repeat center;
          background-size: 75% 70%;
        }

        .card-box:nth-child(2) .box-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width: 100%;
          height: 100%;
          padding: 0px 15px;
          background: url("/static/huifeng.png") no-repeat center;
          background-size: 75% 70%;
        }

        .card-box:nth-child(3) .box-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width: 100%;
          height: 100%;
          padding: 0px 15px;
          background: url("/static/xufeng.png") no-repeat center;
          background-size: 75% 70%;
        }
      }

      .top-card1 {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-box {
          width: 49%;
          height: 100%;
          border-radius: 5px;
          background: linear-gradient(
            to right,
            rgba(55, 135, 254, 0.08),
            rgba(4, 184, 255, 0.08),
            rgba(60, 161, 237, 0.08)
          );
        }

        .card-box:nth-child(1) .box-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width: 100%;
          height: 100%;
          padding: 0px 15px;
          background: url("/static/O₂.png") no-repeat right;
          background-size: 40% 80%;
        }

        .card-box:nth-child(2) .box-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          width: 100%;
          height: 100%;
          padding: 0px 15px;
          background: url("/static/CO.png") no-repeat right;
          background-size: 40% 80%;
        }
      }
    }

    .center-area {
      width: 100%;
      height: 220px;
      padding: 0px 10px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;
    }

    .bot-area {
      width: 100%;
      padding: 0px 10px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;

      .bot-content {
        overflow-y: auto;

        .card-b {
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-between;
          padding: 5px;
          margin-bottom: 5px;
          background: linear-gradient(
            to right,
            rgba(55, 135, 254, 0.08),
            rgba(4, 184, 255, 0.08),
            rgba(60, 161, 237, 0.08)
          );

          .item-l {
            position: relative;
            width: 80px;
            height: 100%;
            background: url("/static/bot-area.png") no-repeat center;
            background-size: 100% 100%;

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

            .value-l {
              width: 100%;
              position: absolute;
              top: 50px;
              color: #0eb4fc;
              text-align: center;
            }
          }

          .item-r {
            width: calc(100% - 100px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .content-r {
              display: flex;

              span {
                font-size: 12px;

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

                &: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;
              }
            }
          }
        }
      }
    }

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

      .title-icon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90px;
        height: 28px;
        padding: 0px 10px;
        border-radius: 5px;
        background: #d4ecff;

        .icon-text {
          font-size: 12px;
          font-weight: bold;
          color: #0eb4fc;
        }
      }
    }

    .box-item .box-val {
      height: 28px;
      line-height: 28px;
      color: #0eb4fc;
      font-weight: bold;
    }

    .box-item .box-name {
      font-size: 12px;
    }

    .icon-style {
      width: 14px;
      height: 14px;
    }
  }
}
</style>