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

<template>
  <!-- 内因火灾-密闭监测 -->
  <view class="fire-detail-mb">
    <view class="top-area">
      <view class="top-card">
        <view
          class="card-box"
          v-for="(item, index) in topCardList.slice(0, 3)"
          :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 class="top-card1">
        <view
          class="card-box"
          v-for="(item, index) in topCardList.slice(3)"
          :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="bot-area">
      <view class="bot-title">
        <view style="font-weight: bold">采空区密闭参数</view>
      </view>
      <view
        class="bot-content"
        v-for="(item, index) in botContentList"
        :key="index"
      >
        <view class="content-title"
          >{{ item.title }}{{ item.dw ? " (" + item.dw + ")" : "" }}</view
        >
        <view class="content-item-box">
          <view class="content-item">
            <view class="item-l">
              <view class="item-icon">
                <image
                  class="icon-img"
                  :src="item.icon"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="item-info">
                <view class="item-value">{{ item.value }}</view>
                <view class="item-label">浓度</view>
              </view>
            </view>
            <view class="item-c">
              <view class="item-icon">
                <image
                  class="icon-img"
                  src="/static/warndata/shijian.svg"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="item-info">
                <view class="item-value is-nowrap">{{ item.time }}</view>
                <view class="item-label">时间</view>
              </view>
            </view>
            <view class="item-r">
              <view class="item-icon">
                <image
                  class="icon-img"
                  src="/static/warndata/weizhi.svg"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="item-info">
                <view class="item-value">{{ item.address }}</view>
                <view class="item-label">位置</view>
              </view>
            </view>
          </view>
        </view>
        <view class="echartbox1">
          <LineChart
            v-if="item.title == 'O₂'"
            type="area"
            :chartData="option1"
            :chartOpts="areaOpts"
            :style="{
              width: '100%',
            }"
          />
          <LineChart
            v-if="item.title == 'C₂H₄'"
            type="area"
            :chartData="option2"
            :chartOpts="areaOpts"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'CO'"
            type="area"
            :chartData="option3"
            :chartOpts="areaOpts"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'CH₄'"
            type="area"
            :chartData="option4"
            :chartOpts="areaOpts"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'CO₂'"
            type="area"
            :chartData="option5"
            :chartOpts="areaOpts"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'C₂H₂'"
            type="area"
            :chartData="option6"
            :chartOpts="areaOpts"
            :style="{ width: '100%' }"
          />
        </view>
        <view class="echartbox2">
          <warnZb
            :resetIndex="index"
            :widthV="widthV"
            :heightV="heightV"
            :coordDw="coordDw"
            :widthCanvas="widthCanvas"
            :heightCanvas="heightCanvas"
            :warnLevel="warnLevel"
          ></warnZb>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import warnZb from "./warn-zb.vue";
export default {
  name: "fireDetailMb",
  components: {
    warnZb,
  },
  props: {
    detailMb: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      option6: {},
      widthV: "85%",
      heightV: "85%",
      coordDw: [16, 42],
      widthCanvas: "302px",
      heightCanvas: "194px",
      myChart: null,
      xData: [],
      yData: [],
      legendName: "",
      axisDw: "",
      cardList: [
        { name: "平均温度(℃)", value: 0 },
        { name: "位置", value: "" },
        { name: "时间", value: "" },
      ],
      cardList1: [
        { name: "煤自燃阶段", value: "" },
        { name: "预警等级", value: "" },
      ],
      botContentList: [
        {
          title: "O₂",
          value: 0,
          time: "",
          address: "",
          dw: "%",
          icon: "/static/warndata/O₂.svg",
        },
        {
          title: "C₂H₄",
          value: 0,
          time: "",
          address: "",
          dw: "ppm",
          icon: "/static/warndata/C2H4.svg",
        },
        {
          title: "CO",
          value: 0,
          time: "",
          address: "",
          dw: "ppm",
          icon: "/static/warndata/CO.svg",
        },
        {
          title: "CH₄",
          value: 0,
          time: "",
          address: "",
          dw: "ppm",
          icon: "/static/warndata/CH4.svg",
        },
        {
          title: "CO₂",
          value: 0,
          time: "",
          address: "",
          dw: "%",
          icon: "/static/warndata/CO2.svg",
        },
        {
          title: "C₂H₂",
          value: 0,
          time: "",
          address: "",
          dw: "ppm",
          icon: "/static/warndata/zhibiao.svg",
        },
      ],
    };
  },
  computed: {
    warnLevel: function () {
      return this.cardList1[1].value;
    },
    //顶部卡片：位置、平均温度、预警等级、煤自燃阶段、时间
    topCardList() {
      return [
        { ...this.cardList[1], icon: "/static/warndata/weizhi.svg" },
        { ...this.cardList[0], icon: "/static/warndata/pingjun-wendu.svg" },
        { ...this.cardList1[1], icon: "/static/warndata/yujing-dengji.svg" },
        { ...this.cardList1[0], icon: "/static/warndata/meiziran-jieduan.svg" },
        { ...this.cardList[2], icon: "/static/warndata/shijian.svg" },
      ];
    },
    //曲线通用配置：曲线下方渐变填充 + 横轴标签抽稀
    areaOpts() {
      return {
        xAxis: {
          disableGrid: true,
          labelCount: 3,
          fontSize: 10,
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.35,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow",
          },
        },
      };
    },
  },
  watch: {
    detailMb: {
      handler(newM, oldM) {
        console.log(newM, "newM--------------");
        let that = this;
        that.xData = [];
        that.yData = [];
        if (JSON.stringify(newM) != "{}") {
          if (newM.bundletube.length != 0) {
            that.cardList[0].value = newM.temperature[0]
              ? newM.temperature[0].readData.temperature
              : "--";
            that.cardList[1].value = newM.bundletube[0].strinstallpos || "--";
            that.cardList[2].value = newM.bundletube[0].readTime || "--";
            that.cardList1[0].value = newM.bundletube[0].syswarnLevel_des;
            that.cardList1[1].value = newM.bundletube[0].syswarnLevel_str;

            that.botContentList[0].value = newM.bundletube[0].readData.o2val;
            that.botContentList[1].value = newM.bundletube[0].readData.ch2val;
            that.botContentList[2].value = newM.bundletube[0].readData.coval;
            that.botContentList[3].value = newM.bundletube[0].readData.chval;
            that.botContentList[4].value = newM.bundletube[0].readData.co2val;
            that.botContentList[5].value = newM.bundletube[0].readData.gasval;
            that.botContentList.forEach((el, index) => {
              el.time = newM.bundletube[0].readTime;
              el.address = newM.bundletube[0].strinstallpos;
              if (el.title == "O₂") {
                that.xData = newM.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yData = newM.bundletube[0].history.map((y) => y.o2val);
                that.legendName = "O₂";
                that.axisDw = "%";
              } else if (el.title == "C₂H₄") {
                that.xData = newM.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yData = newM.bundletube[0].history.map((y) => y.ch2val);
                that.legendName = "C₂H₄";
                that.axisDw = "ppm";
              } else if (el.title == "CO") {
                that.xData = newM.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yData = newM.bundletube[0].history.map((y) => y.coval);
                that.legendName = "CO";
                that.axisDw = "ppm";
              } else if (el.title == "CH₄") {
                that.xData = newM.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yData = newM.bundletube[0].history.map((y) => y.chval);
                that.legendName = "CH₄";
                that.axisDw = "ppm";
              } else if (el.title == "CO₂") {
                that.xData = newM.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yData = newM.bundletube[0].history.map((y) => y.co2val);
                that.legendName = "CO₂";
                that.axisDw = "%";
              } else if (el.title == "C₂H₂") {
                that.xData = newM.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yData = newM.bundletube[0].history.map((y) => y.gasval);
                that.legendName = "C₂H₂";
                that.axisDw = "ppm";
              }
              that.initChartH(el);
            });
          } else {
            that.cardList[0].value = 0;
            that.cardList[1].value = "--";
            that.cardList[2].value = "--";
            that.cardList1[0].value = "--";
            that.cardList1[1].value = "--";

            that.botContentList[0].value = "--";
            that.botContentList[1].value = "--";
            that.botContentList[2].value = "--";
            that.botContentList[3].value = "--";
            that.botContentList[4].value = "--";
            that.botContentList[5].value = "--";
            that.botContentList.forEach((el, index) => {
              el.time = "--";
              that.xData = [];
              that.yData = [];
              that.initChartH(el);
            });
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    //横轴时间格式化，避免标签太长叠在一起
    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;
    },
    initChartH(el) {
      switch (el.title) {
        case "O₂":
          return (this.option1 = {
            categories: this.xData.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yData.slice(-3) || [],
              },
            ],
          });
        case "C₂H₄":
          return (this.option2 = {
            categories: this.xData.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yData.slice(-3) || [],
              },
            ],
          });
        case "CO":
          return (this.option3 = {
            categories: this.xData.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yData.slice(-3) || [],
              },
            ],
          });
        case "CH₄":
          return (this.option4 = {
            categories: this.xData.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yData.slice(-3) || [],
              },
            ],
          });
        case "CO₂":
          return (this.option5 = {
            categories: this.xData.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yData.slice(-3) || [],
              },
            ],
          });
        case "C₂H₂":
          return (this.option6 = {
            categories: this.xData.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yData.slice(-3) || [],
              },
            ],
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.fire-detail-mb {
  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%;
      height: 70px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

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

        .box-item {
          width: 100%;
          height: 100%;
          padding: 0px 6px;
          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: 15px;
              height: 15px;
              filter: brightness(0) invert(1);
            }
          }

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

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

      .card-box {
        height: 100%;
        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) {
          width: 40%;
        }

        &:nth-child(2) {
          width: calc(60% - 8px);
        }

        .box-item {
          width: 100%;
          height: 100%;
          padding: 0px 6px;
          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: 15px;
              height: 15px;
              filter: brightness(0) invert(1);
            }
          }

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

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

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

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

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

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

    .bot-content {
      margin-bottom: 15px;

      .content-title {
        height: 26px;
        line-height: 26px;
        padding: 0px 20px;
        font-size: 13px;
        font-weight: 600;
        color: #000;
        background: url("/static/warndata/1-1.png") no-repeat;
        background-size: 100% 100%;
      }

      .content-item-box {
        padding: 5px 0px;

        .content-item {
          height: 56px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;

          .item-l,
          .item-c,
          .item-r {
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            padding: 0px 6px;
            border-radius: 10px;
            background: linear-gradient(
              135deg,
              rgba(55, 135, 254, 0.12) 0%,
              rgba(4, 184, 255, 0.08) 100%
            );

            .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: 15px;
                height: 15px;
                filter: brightness(0) invert(1);
              }
            }

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

          //时间卡片宽一些，保证日期时间一行显示
          .item-c {
            width: calc(50% - 5px);
          }

          .item-l,
          .item-r {
            width: calc(25% - 5px);
          }

          .item-value {
            font-size: 11px;
            font-weight: bold;
            line-height: 16px;
            color: #2b7cff;
            word-break: break-all;
          }

          .item-value.is-nowrap {
            white-space: nowrap;
          }

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

      .echartbox1 {
        width: 100%;
        height: 220px;
        margin-bottom: 10px;
      }

      .echartbox2 {
        width: 100%;
        height: 240px;
      }
    }
  }
}
</style>