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">
              <view class="item-icon">
                <image
                  class="icon-img"
                  src="/static/warndata/wendu.svg"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="item-info">
                <view class="box-val">{{ item.temperature || "--" }}</view>
                <view class="box-name">温度(℃)</view>
              </view>
            </view>
          </view>
          <view class="card-item card-item1">
            <view class="item-box">
              <view class="item-icon">
                <image
                  class="icon-img"
                  src="/static/warndata/fenchen-nongdu.svg"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="item-info">
                <view class="box-val">{{ item.dustval || "--" }}</view>
                <view class="box-name">粉尘浓度(mg/m³)</view>
              </view>
            </view>
          </view>
          <view class="card-item">
            <view class="item-box">
              <view class="item-icon">
                <image
                  class="icon-img"
                  src="/static/warndata/penwu-shuiya.svg"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="item-info">
                <view class="box-val">{{ item.waterPressure || "--" }}</view>
                <view class="box-name">喷雾水压(MPa)</view>
              </view>
            </view>
          </view>
          <view class="card-item">
            <view class="item-box">
              <view class="item-icon">
                <image
                  class="icon-img"
                  src="/static/warndata/zhuangtai.svg"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="item-info">
                <view
                  class="box-val"
                  :class="{ 'is-normal': item.atomizingState === 1 }"
                  >{{ item.atomizingState === 1 ? "正常" : "异常" }}</view
                >
                <view class="box-name">喷雾状态</view>
              </view>
            </view>
          </view>
        </view>
        <view class="top-echart">
          <LineChart
            type="area"
            :chartData="option"
            :chartOpts="areaOpts"
            :style="{ width: '100%', height: '180px' }"
          ></LineChart>
        </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 {
      option: {},
      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(that.formatAxisTime(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')
                  this.option = {
                    categories: this.xData.slice(-3) || [],
                    series: [
                      {
                        name: "预测值",
                        data: this.yDataY.slice(-3) || [],
                      },
                      {
                        name: "最新值",
                        data: this.yDataN.slice(-3) || [],
                      },
                    ],
                  };
                });
              }
            } 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);
          });
      });
    },
    //横轴时间格式化，避免标签太长叠在一起
    formatAxisTime(time) {
      if (typeof time != "string") {
        return time;
      }
      //2024-03-11 17:58:11 -> 03-11 17:58
      return time.length > 16 ? time.slice(5, 16) : time;
    },
    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)
      );
    },
  },
  computed: {
    //曲线通用配置：曲线下方渐变填充 + 横轴标签抽稀
    areaOpts() {
      return {
        xAxis: {
          disableGrid: true,
          labelCount: 3,
          fontSize: 10,
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.35,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow",
          },
        },
      };
    },
  },
};
</script>

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

  .devic-box-tab {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0px 10px !important;
    margin-bottom: 10px;
  }

  .dust-content {
    // height: 704px;
    // padding: 0px 10px;
    // box-sizing: border-box;
    // overflow-y: auto;
    height: auto;
    box-sizing: border-box;
    overflow-y: auto;

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

      .top-title {
        height: 28px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        color: #000;
      }

      .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: 62px;
          border-radius: 10px;
          background: linear-gradient(
            135deg,
            rgba(55, 135, 254, 0.12) 0%,
            rgba(4, 184, 255, 0.08) 100%
          );

          .item-box {
            width: 100%;
            height: 100%;
            padding: 0px 8px;
            box-sizing: border-box;
            display: flex;
            align-items: center;

            .item-icon {
              position: relative;
              flex-shrink: 0;
              width: 28px;
              height: 28px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: linear-gradient(135deg, #80b4ff, #347df3);

              .icon-img {
                position: relative;
                width: 16px;
                height: 16px;
                filter: brightness(0) invert(1);
              }
            }

            .item-info {
              flex: 1;
              min-width: 0px;
              padding-left: 8px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }

            .box-val {
              font-size: 13px;
              font-weight: bold;
              line-height: 16px;
              color: #2b7cff;
            }

            .box-val.is-normal {
              color: #39b54a;
            }

            .box-name {
              margin-top: 2px;
              font-size: 11px;
              line-height: 15px;
              color: #000;
            }
          }
        }

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

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

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

      .bot-title {
        height: 28px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        color: #000;
      }

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