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

<template>
  <view class="dust-detail">
    <u-tabs
      class="devic-box-tab"
      :current="PageCur"
      :list="tabList"
      @click="NavChange"
    ></u-tabs>
    <view class="dust-content">
      <view class="top-area" v-for="(item, index) in topList" :key="index">
        <view class="top-title">
          <view style="font-weight: bold">{{ item.label }}</view>
        </view>
        <view class="top-card">
          <view class="card-item card-item1">
            <view class="item-box item-box1">
              <view class="box-val">{{ item.temperature || "--" }}</view>
              <view class="box-name">温度(℃)</view>
            </view>
          </view>
          <view class="card-item card-item1">
            <view class="item-box item-box2">
              <view class="box-val">{{ item.dustval || "--" }}</view>
              <view class="box-name">粉尘浓度(mg/m³)</view>
            </view>
          </view>
          <view class="card-item">
            <view class="item-box item-box3">
              <view class="box-val">{{ item.waterPressure || "--" }}</view>
              <view class="box-name">喷雾水压(MPa)</view>
            </view>
          </view>
          <view class="card-item">
            <view class="item-box item-box4">
              <view class="box-val">{{ item.atomizingState || "--" }}</view>
              <view class="box-name">喷雾状态</view>
            </view>
          </view>
        </view>
        <view class="top-echart">
          <canvas
            :id="`myChart${index}`"
            :style="{ width: '100%', height: '220px' }"
          ></canvas>
        </view>
      </view>
      <view class="bot-area">
        <view class="bot-title">
          <view style="font-weight: bold">粉尘监控测点信息</view>
        </view>
        <view class="bot-content">
          <view
            class="card-b"
            v-for="(item, index) in cardListDust"
            :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: "dustDetail",
  props: {},
  watch: {},
  data() {
    return {
      timer: "",
      PageCur: "0",
      tabList: [],
      //喷粉选项数据
      topList: [],
      flag: true,
      echartNow: [],
      echartYc: [],
      xData: [],
      yDataN: [],
      yDataY: [],
      yDataS: [],
      maxY: 0,
      cardListDust: [],
    };
  },
  beforeDestroy() {
    this.myChart.clear();
    this.myChart.dispose();
    this.timer = null;
    clearTimeout(this.timer);
  },
  mounted() {
    this.getTabList();
    this.getWindDeviceList();
  },
  methods: {
    NavChange: function (item) {
      clearTimeout(this.timer);
      this.PageCur = item.index;
      this.getMonitor(this.tabList[this.PageCur].deviceID, true);
    },
    getMonitor(deviceID, flag) {
      let than = this;
      than.timer = setTimeout(
        async () => {
          await than.getSysWarnList(deviceID, "dust");
          if (than.timer) {
            than.timer = null;
          }
          than.getMonitor(deviceID);
        },
        flag ? 0 : 3000
      );
    },

    //获取顶部tab选项数据
    getTabList() {
      this.tabList = [];
      new Promise((resolve, reject) => {
        api
          .sysTypeWarn({ type: "dust" })
          .then((response) => {
            if (response.data.code == 200 && response.data.result.length != 0) {
              let result = response.data.result;
              console.log(result, "粉尘菜单---------");
              result.forEach((el) => {
                this.tabList.push({
                  name: el.systemname,
                  warn: "低风险",
                  deviceID: el.id,
                  strtype: el.strtype,
                });
              });
              this.getMonitor(this.tabList[0].deviceID, true);
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取喷粉选项数据
    getSysWarnList(id, type) {
      let that = this;
      new Promise((resolve, reject) => {
        api
          .sysWarn({ sysid: id, type: type })
          .then((response) => {
            if (response.data.code == 200) {
              console.log(response.data, "喷粉选项数据---------");
              let data = response.data.result.dust;
              if (data.length != 0) {
                that.topList = data.map((el) => {
                  return {
                    label: el.strinstallpos,
                    temperature: el.readData.temperature,
                    dustval: el.readData.dustval,
                    waterPressure: el.readData.waterPressure,
                    atomizingState: el.readData.atomizingState,
                  };
                });

                data.forEach((v, index) => {
                  if (that.flag) {
                    that.echartNow = JSON.parse(v.readData.expectInfo)["list"];
                    that.flag = false;
                  }
                  that.echartYc.push({
                    time: JSON.parse(v.readData.expectInfo)["nowTime"],
                    value: JSON.parse(v.readData.expectInfo)["nowVal"],
                  });
                  let setData = [...that.echartNow, ...that.echartYc].sort(
                    (a, b) =>
                      Date.parse(new Date(a.time)) -
                      Date.parse(new Date(b.time))
                  );
                  that.xData = [];
                  that.yDataS = [];
                  that.yDataY = [];
                  that.yDataN = [];
                  setData.forEach((el) => {
                    if (el.value && el.value != "0") {
                      that.xData.push(el.time);
                      that.yDataS.push(el.value);
                      that.yDataY.push(
                        JSON.parse(v.readData.expectInfo)["aveVal"]
                      );
                      that.yDataN.push(
                        JSON.parse(v.readData.expectInfo)["fmin"]
                          ? JSON.parse(v.readData.expectInfo)["fmin"]
                          : 0
                      );
                    }
                  });
                  let max = that.yDataS.reduce((acr, cur) => {
                    return acr > cur ? acr : cur;
                  });
                  that.maxY = that.formatRoundNum(max * 1.5);
                  // console.log(that.xData, that.yDataS, that.yDataY, that.yDataN, '000')
                  that.initChart(index);
                });
              }
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取粉尘监控测点信息
    getWindDeviceList() {
      new Promise((resolve, reject) => {
        api
          .getDeviceVent({ devicetype: "dusting", 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.cardListDust = 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: "(mg/m³)",
                          value: el.dustval,
                        },
                        {
                          id: 2,
                          label: "巷道湿度",
                          dw: "(RH)",
                          value: el.humidity,
                        },
                        {
                          id: 4,
                          label: "巷道温度",
                          dw: "(℃)",
                          value: el.temperature,
                        },
                        {
                          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);
          });
      });
    },
    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(index) {
      let canvas = document.getElementById(`myChart${index}`);
      this.myChart = this.$echarts.init(canvas);
      let option = {
        grid: {
          top: "20%",
          left: "2%",
          bottom: "4%",
          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 = ""; // 最终拼接成的字符串
                let paramsNameNumber = params.length; // 实际标签的个数
                let provideNumber = 10; // 每行能显示的字的个数
                let rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName;
              },
            },
            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.yDataS || [],
          },
          {
            name: "预测值",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: "#4fffad",
              borderColor: "#a3c8d8",
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "#4fffad",
              },
            },
            data: this.yDataY || [],
          },
          {
            name: "最新值",
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: "#fc8452",
              borderColor: "#a3c8d8",
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "#fc8452",
              },
            },

            data: this.yDataN || [],
          },
        ],
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.dust-detail {
  position: relative;
  // padding: 0px 10px;
  box-sizing: border-box;

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

  .dust-content {
    // height: 704px;
    // padding: 0px 10px;
    // box-sizing: border-box;
    // overflow-y: auto;
    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-title {
        height: 28px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

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

        .card-item {
          width: calc(50% - 5px);
          height: 60px;
          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)
          );

          .item-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            height: 100%;
            padding: 0px 15px;

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

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

          .item-box1 {
            background: url("/static/wd.png") no-repeat right;
            background-size: 30% 80%;
          }

          .item-box2 {
            background: url("/static/dust.png") no-repeat right;
            background-size: 30% 80%;
          }

          .item-box3 {
            background: url("/static/pwsy.png") no-repeat right;
            background-size: 30% 80%;
          }

          .item-box4 {
            background: url("/static/pwzt.png") no-repeat right;
            background-size: 30% 80%;
          }
        }

        .card-item1 {
          margin-bottom: 10px;
        }
      }

      .top-echart {
        height: 220px;
      }
    }

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

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

      .bot-content {
        // height: calc(100% - 38px);
        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;
              }
            }
          }
        }
      }
    }
  }
}
</style>