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

<template>
  <view class="vent-detail">
    <u-tabs
      class="devic-box-tab"
      :current="PageCur"
      :list="tabList"
      :activeStyle="{ color: '#000', fontWeight: 'bold' }"
      @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">
            <u-icon name="warning-fill" color="#2b7cff" size="14"></u-icon>
            <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="item-icon">
              <image class="icon-img" :src="item.icon" mode="aspectFit"></image>
            </view>
            <view class="box-val">{{ item.value }}</view>
            <view class="box-name">{{ item.name }}</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> -->
          <LineChart
            type="area"
            :chartData="option"
            :chartOpts="areaOpts"
            :style="{ width: '100%', height: '180px' }"
          ></LineChart>
        </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: "",
      timer: "",
      // 必须是数字，u-tabs 内部用 === 比较下标，字符串 "0" 会导致默认选中项拿不到 activeStyle
      PageCur: 0,
      tabList: [],
      cardList: [
        {
          name: "进风量(m³/min)",
          value: 0,
          icon: "/static/warndata/jin.svg",
        },
        {
          name: "回风量(m³/min)",
          value: 0,
          icon: "/static/warndata/hui.svg",
        },
        {
          name: "需风量(m³/min)",
          value: 0,
          icon: "/static/warndata/xu.svg",
        },
      ],
      //echarts图表数据
      maxY: 0,
      xData: [],
      yDataJ: [],
      yDataH: [],
      yDataX: [],
      cardListTf: [],
      option: {},
    };
  },
  mounted() {
    this.getTabList();
    this.getWindDeviceList();
    // than.initChart();
  },
  beforeDestroy() {
    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选项数据
    async getTabList() {
      try {
        await 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);
            });
        });
      } catch (error) {
        console.error("数据加载失败:", 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)
      );
    },
    //横轴时间格式化，避免标签太长叠在一起
    formatAxisTime(time) {
      if (typeof time != "string") {
        return time;
      }
      //2024-03-11 17:58:11 -> 03-11 17:58
      const str = time.replace("T", " ");
      return str.length > 16 ? str.slice(5, 16) : str;
    },
    //获取选项详情数据
    getSysWarnList(id, type) {
      return 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(this.formatAxisTime(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.option = {
                categories: this.xData.slice(-3) || [],
                series: [
                  {
                    name: "进风量",
                    data: this.yDataJ.slice(-3) || [],
                  },
                  {
                    name: "回风量",
                    data: this.yDataH.slice(-3) || [],
                  },
                  {
                    name: "需风量",
                    data: this.yDataX.slice(-3) || [],
                  },
                ],
              };
              // this.initChart();
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取通风监控测点信息
    async getWindDeviceList() {
      try {
        await 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);
            });
        });
      } catch (error) {
        console.error("数据加载失败:", error);
      }
    },
  },
  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>
.vent-detail {
  position: relative;
  // 撑满父容器高度：tab 固定在顶部，滚动区域在 tab 下面
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;

  .devic-box-tab {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f9f9fb;
    border-radius: 5px;
    border: 1px solid #fff;
    margin-bottom: 10px;
  }

  .vent-content {
    flex: 1;
    min-height: 0;
    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-card {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;

        //卡片：蓝方块图标 + 数值，名称另起一行
        .card-box {
          width: 32%;
          height: 58px;
          padding: 0px 8px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          align-items: center;
          border-radius: 10px;
          background: linear-gradient(
            to bottom,
            rgba(55, 135, 254, 0.22) 0%,
            rgba(4, 184, 255, 0.06) 100%
          );

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

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

          .box-val {
            flex: 1;
            min-width: 0px;
            margin-left: 6px;
            font-size: 13px;
            font-weight: bold;
            line-height: 16px;
            color: #2b7cff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .box-name {
            width: 100%;
            margin-top: 2px;
            font-size: 11px;
            line-height: 14px;
            color: #000;
            white-space: nowrap;
          }
        }
      }
    }

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

    .bot-area {
      width: 100%;
      padding: 0px 10px;
      box-sizing: border-box;
      background-color: #f9f9fb;
      border: 1px solid #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 bottom,
            rgba(175, 195, 252, 0.6) 0%,
            rgba(175, 195, 252, 0.1) 100%
          );
          .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: center;
        align-items: center;
        height: 22px;
        padding: 0px 8px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #2b7cff;
        background-color: #e0eafc;

        .icon-text {
          margin-left: 3px;
          font-size: 12px;
          color: #2b7cff;
        }
      }
    }
  }
}
</style>