Vent-App/pages/warndata/components/fire-detail-out.vue

<template>
  <!-- 外因火灾 -->
  <view class="fire-detail-out">
    <view class="top-area">
      <view class="top-card">
        <view class="card-box" v-for="(item, index) in cardList" :key="index">
          <view class="box-item">
            <view class="item-icon">
              <image class="icon-img" :src="item.icon" mode="aspectFit"></image>
            </view>
            <view class="item-info">
              <view
                class="box-val"
                :class="{ 'is-normal': item.value == '正常' }"
                >{{ item.value }}</view
              >
              <view class="box-name">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="center-area">
      <view class="bot-title">
        <view style="font-weight: bold">光纤测温系统温度实时监测</view>
      </view>
      <view class="echartBox">
        <LineChart
          type="area"
          :chartData="option"
          :chartOpts="chartOpts"
          :style="{ width: '100%' }"
        ></LineChart>
      </view>
    </view>
    <view class="bot-area" v-for="(item, index) in botList" :key="index">
      <view class="bot-title">{{ item.title }}</view>
      <view class="bot-content">
        <view class="h-table">
          <view class="table-head">
            <view
              class="head-item"
              v-for="(col, cIndex) in item.head"
              :key="cIndex"
              :style="{ width: col.width }"
              >{{ col.title }}</view
            >
          </view>
          <view class="table-content">
            <view class="content-tr" v-for="(ite, ind) in item.list" :key="ind">
              <view
                class="content-td"
                v-for="(col, cIndex) in item.head"
                :key="cIndex"
                :style="{ width: col.width }"
                >{{ cellText(ite, col.key) }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  name: "fireDetailOut",
  props: {
    detailWy: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      option: {
        categories: [],
        series: [{ name: "当前温度", data: [] }],
      },
      myChart: null,
      xData: [],
      yData: [],
      cardList: [
        {
          name: "最高温度(℃)",
          value: 0,
          icon: "/static/warndata/zuigao-wendu.svg",
        },
        {
          name: "最低温度(℃)",
          value: 0,
          icon: "/static/warndata/zuidi-wendu.svg",
        },
        {
          name: "平均温度(℃)",
          value: 0,
          icon: "/static/warndata/pingjun-wendu.svg",
        },
        {
          name: "状态",
          value: "正常",
          icon: "/static/warndata/zhuangtai.svg",
        },
      ],
      //表头：设备名称/值/状态/时间
      headList: [
        { title: "设备名称", key: "strinstallpos", width: "25%" },
        { title: "值", key: "val", width: "20%" },
        { title: "状态", key: "warnLevel_str", width: "20%" },
        { title: "时间", key: "readTime", width: "35%" },
      ],
      //表头：设备名称/状态/时间
      headList1: [
        { title: "设备名称", key: "strinstallpos", width: "40%" },
        { title: "状态", key: "warnLevel_str", width: "30%" },
        { title: "时间", key: "readTime", width: "30%" },
      ],
      //表头：值/状态/时间
      headList2: [
        { title: "值", key: "val", width: "30%" },
        { title: "状态", key: "warnLevel_str", width: "30%" },
        { title: "时间", key: "readTime", width: "40%" },
      ],
      tableDataYw: [],
      tableDataCo: [],
      tableDataPl: [],
      tableDataWd: [],
    };
  },
  watch: {
    detailWy: {
      handler(newW, oldW) {
        console.log(newW, "newW--------------");
        let that = this;
        //接口未就绪或类型不对时不处理，避免报错中断
        if (!newW || typeof newW != "object" || Array.isArray(newW)) {
          return;
        }
        that.xData = [];
        that.yData = [];
        if (JSON.stringify(newW) != "{}") {
          //排查用：接口实际返回的字段
          console.log("外因火灾接口字段：", Object.keys(newW));

          //光纤测温：最高/最低/平均温度 + 温度曲线
          let fiber = that.getList(newW, "fiber");
          if (fiber.length != 0) {
            let readData = fiber[0].readData || {};
            that.cardList[0].value = that.valueOr(readData.fmax);
            that.cardList[1].value = that.valueOr(readData.fmin);
            that.cardList[2].value = that.valueOr(readData.favg);
            that.cardList[3].value = fiber[0].warnFlag ? "存在风险" : "正常";
            that.parseJson(readData.fibreTemperature).forEach((el) => {
              that.xData.push(el.pos);
              that.yData.push(el.value);
            });
          } else {
            console.warn("外因火灾：接口未返回光纤测温数据 fiber");
            that.cardList[0].value = "--";
            that.cardList[1].value = "--";
            that.cardList[2].value = "--";
            that.cardList[3].value = "正常";
          }
          that.initChart();

          //烟雾传感器
          that.tableDataYw = that.getList(newW, "smoke").map((el) => {
            return {
              strinstallpos: el.strinstallpos,
              val: el.readData ? el.readData.smokeval : "",
              warnLevel_str:
                el.warnLevel_str == "正常" ? "低风险" : el.warnLevel_str,
              readTime: el.readTime,
            };
          });

          //温度传感器
          that.tableDataWd = that.getList(newW, "temperature").map((el) => {
            return {
              val: el.readData ? el.readData.fireval : "",
              warnLevel_str:
                el.warnLevel_str == "正常" ? "低风险" : el.warnLevel_str,
              readTime: el.readTime,
            };
          });

          //一氧化碳传感器
          that.tableDataCo = that.getList(newW, "co").map((el) => {
            return {
              strinstallpos: el.strinstallpos,
              val: el.readData ? el.readData.coval : "",
              warnLevel_str:
                el.warnLevel_str == "正常" ? "低风险" : el.warnLevel_str,
              readTime: el.readTime,
            };
          });

          //自动喷淋灭火装置
          that.tableDataPl = that.getList(newW, "spray");
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    //初始化echarts实例
    initChart() {
      this.option = {
        categories: this.xData.slice(-10) || [],
        series: [
          {
            name: "当前温度",
            data: this.yData.slice(-10) || [],
          },
        ],
      };
    },
    //取出接口里的数组字段，字段不存在时返回空数组
    getList(data, key) {
      const list = data ? data[key] : null;
      return Array.isArray(list) ? list : [];
    },
    //解析JSON字符串（光纤测温数据），解析失败返回空数组
    parseJson(str) {
      if (!str) {
        return [];
      }
      try {
        const data = typeof str == "string" ? JSON.parse(str) : str;
        return Array.isArray(data) ? data : [];
      } catch (e) {
        console.warn("光纤测温数据解析失败：", str, e);
        return [];
      }
    },
    //空值统一显示--
    valueOr(value) {
      return value === null || value === undefined || value === ""
        ? "--"
        : value;
    },
    //表格取值，空值统一显示--
    cellText(item, key) {
      return this.valueOr(item ? item[key] : "");
    },
  },
  computed: {
    //光纤测温曲线：曲线下方渐变填充
    chartOpts() {
      return {
        extra: {
          area: {
            type: "curve",
            opacity: 0.35,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow",
          },
        },
      };
    },
    //各监测项表格
    botList() {
      return [
        {
          title: "温度传感器监测",
          head: this.headList2,
          list: this.tableDataWd,
        },
        {
          title: "烟雾传感器监测",
          head: this.headList,
          list: this.tableDataYw,
        },
        {
          title: "一氧化碳传感器监测",
          head: this.headList,
          list: this.tableDataCo,
        },
        {
          title: "自动喷淋灭火装置监测",
          head: this.headList1,
          list: this.tableDataPl,
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.fire-detail-out {
  width: 100%;
  height: 100%;

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

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

      .card-box {
        width: calc(50% - 5px);
        height: 62px;
        border-radius: 10px;
        background: linear-gradient(
          to bottom,
          rgba(175, 195, 252, 0.6) 0%,
          rgba(175, 195, 252, 0.1) 100%
        );

        &:nth-child(1),
        &:nth-child(2) {
          margin-bottom: 10px;
        }

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

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

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

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

    .box-item .box-val {
      font-size: 15px;
      font-weight: bold;
      line-height: 18px;
      color: #2b7cff;
    }

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

    .box-item .box-name {
      margin-top: 2px;
      font-size: 12px;
      line-height: 16px;
      color: #000000;
    }
  }

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

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

    .echartBox {
      width: 100%;
      height: 220px;
    }
  }

  .bot-area {
    width: 100%;
    padding: 10px;
    background-color: #f9f9fb;
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(43, 124, 255, 0.08);
    margin-bottom: 10px;
    box-sizing: border-box;

    .bot-title {
      height: 28px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }

    .bot-content {
      width: 100%;
      height: 240px;

      .h-table {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #bcd7fb;
        border-radius: 4px;
        overflow: hidden;

        .table-head {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          height: 38px;
          border-bottom: 1px solid #bcd7fb;

          .head-item {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            font-size: 12px;
            font-weight: 600;
            color: #1a6dff;
            text-align: center;
            border-right: 1px solid #bcd7fb;

            &:last-child {
              border-right: none;
            }
          }
        }

        .table-content {
          flex: 1;
          min-height: 0;
          overflow-y: auto;

          .content-tr {
            display: flex;
            align-items: stretch;
            min-height: 44px;
            box-sizing: border-box;
            border-bottom: 1px solid #cfe1fa;

            &:last-child {
              border-bottom: none;
            }

            &:nth-child(odd) {
              background-color: #f5f9ff;
            }

            &:nth-child(even) {
              background-color: #e9f3ff;
            }

            .content-td {
              display: flex;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;
              padding: 6px 4px;
              font-size: 12px;
              color: #333;
              text-align: center;
              word-break: break-all;
              border-right: 1px solid #cfe1fa;

              &:last-child {
                border-right: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>