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

<template>
  <view class="fire-detail-ckq">
    <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="areaOpts"
          :style="{ width: '100%' }"
        ></LineChart>
      </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-r">
              <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">{{ item.time }}</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>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  name: "fireDetailCkq",
  props: {
    detailCkq: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      option: {},
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      option6: {},
      historyData: [],
      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",
        },
        {
          name: "回风隅角-O₂",
          value: 0,
          icon: "/static/warndata/O₂.svg",
        },
        {
          name: "回风隅角-CO",
          value: 0,
          icon: "/static/warndata/CO.svg",
        },
      ],
      myChartH: null,
      legendName: "",
      axisDw: "",
      xDataH: [],
      yDataH: [],
      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",
        },
      ],
    };
  },
  watch: {
    detailCkq: {
      handler(newC, oldC) {
        console.log(newC, "newC--------------");
        let that = this;
        that.xData = [];
        that.yData = [];
        if (JSON.stringify(newC) != "{}") {
          if (newC.fiber.length != 0) {
            that.cardList[0].value = newC.fiber[0].readData.fmax;
            that.cardList[1].value = newC.fiber[0].readData.fmin;
            that.cardList[2].value = newC.fiber[0].readData.favg;
            that.cardList[3].value = newC.fiber[0].warnFlag ? "报警" : "正常";
            JSON.parse(newC.fiber[0].readData.fibreTemperature).forEach(
              (el) => {
                that.xData.push(el.pos);
                that.yData.push(el.value);
              }
            );
            that.initChart();
          } else {
            that.cardList[0].value = "--";
            that.cardList[1].value = "--";
            that.cardList[2].value = "--";
            that.cardList[3].value = "正常";
            that.initChart();
          }
          if (newC.bundletube.length != 0) {
            that.botContentList[0].value = newC.bundletube[0].readData.o2val;
            that.botContentList[1].value = newC.bundletube[0].readData.ch2val;
            that.botContentList[2].value = newC.bundletube[0].readData.coval;
            that.botContentList[3].value = newC.bundletube[0].readData.chval;
            that.botContentList[4].value = newC.bundletube[0].readData.co2val;
            that.botContentList[5].value = newC.bundletube[0].readData.gasval;
            this.historyData = newC.bundletube[0].history || [];
            that.botContentList.forEach((el, index) => {
              el.time = newC.bundletube[0].readTime;
              if (el.title == "O₂") {
                that.xDataH = newC.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yDataH = newC.bundletube[0].history.map((y) => y.o2val);
                that.legendName = "O₂";
                that.axisDw = "%";
              } else if (el.title == "C₂H₄") {
                that.xDataH = newC.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yDataH = newC.bundletube[0].history.map((y) => y.ch2val);
                that.legendName = "C₂H₄";
                that.axisDw = "ppm";
              } else if (el.title == "CO") {
                that.xDataH = newC.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yDataH = newC.bundletube[0].history.map((y) => y.coval);
                that.legendName = "CO";
                that.axisDw = "ppm";
              } else if (el.title == "CH₄") {
                that.xDataH = newC.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yDataH = newC.bundletube[0].history.map((y) => y.chval);
                that.legendName = "CH₄";
                that.axisDw = "ppm";
              } else if (el.title == "CO₂") {
                that.xDataH = newC.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yDataH = newC.bundletube[0].history.map((y) => y.co2val);
                that.legendName = "CO₂";
                that.axisDw = "%";
              } else if (el.title == "C₂H₂") {
                that.xDataH = newC.bundletube[0].history.map((x) =>
                  that.formatAxisTime(x.time)
                );
                that.yDataH = newC.bundletube[0].history.map((y) => y.gasval);
                that.legendName = "C₂H₂";
                that.axisDw = "ppm";
              }
              this.initChartH(el);
            });
          } else {
            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) => {
              el.time = "--";
              that.xData = [];
              that.yData = [];
              this.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;
    },
    //初始化echarts实例
    initChart() {
      this.option = {
        categories: this.xData.slice(-10) || [],
        series: [
          {
            name: "当前温度",
            data: this.yData.slice(-10) || [],
          },
        ],
      };
    },
    initChartH(el) {
      switch (el.title) {
        case "O₂":
          return (this.option1 = {
            categories: this.xDataH.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yDataH.slice(-3) || [],
              },
            ],
          });
        case "C₂H₄":
          return (this.option2 = {
            categories: this.xDataH.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yDataH.slice(-3) || [],
              },
            ],
          });
        case "CO":
          return (this.option3 = {
            categories: this.xDataH.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yDataH.slice(-3) || [],
              },
            ],
          });
        case "CH₄":
          return (this.option4 = {
            categories: this.xDataH.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yDataH.slice(-3) || [],
              },
            ],
          });
        case "CO₂":
          return (this.option5 = {
            categories: this.xDataH.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yDataH.slice(-3) || [],
              },
            ],
          });
        case "C₂H₂":
          return (this.option6 = {
            categories: this.xDataH.slice(-3) || [],
            series: [
              {
                name: el.title,
                data: this.yDataH.slice(-3) || [],
              },
            ],
          });
      }
    },
  },
  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>
.fire-detail-ckq {
  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((100% - 20px) / 3);
        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),
        &:nth-child(3) {
          margin-bottom: 10px;
        }

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

          .item-icon {
            position: relative;
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            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-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: 11px;
      line-height: 14px;
      color: #000;
    }
  }

  .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: 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;
    }

    .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-r {
            width: calc(50% - 5px);
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            padding: 0px 6px;
            border-radius: 10px;
            background: linear-gradient(
              to bottom,
              rgba(175, 195, 252, 0.6) 0%,
              rgba(175, 195, 252, 0.1) 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-value {
            font-size: 11px;
            font-weight: bold;
            line-height: 16px;
            color: #2b7cff;
            word-break: break-all;
          }

          //时间不换行，保证一行显示
          .item-r .item-value {
            white-space: nowrap;
          }

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

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