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="box-val">{{ item.value }}</view>
            <view class="box-name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="center-area">
      <view class="bot-title">
        <view style="font-weight: bold">光钎测温系统温度实时监测</view>
      </view>
      <view class="echartBox">
        <LineChart :chartData="option" :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 }}</view>
        <view class="content-item-box">
          <view class="content-item">
            <view class="item-l">
              <view class="item-value">{{ item.value }}</view>
              <view class="item-label">浓度</view>
            </view>

            <view class="item-r">
              <view class="item-value">{{ item.time }}</view>
              <view class="item-label">时间</view>
            </view>
          </view>
        </view>
        <view class="echartbox1">
          <LineChart
            v-if="item.title == 'O₂'"
            :chartData="option1"
            :style="{
              width: '100%',
            }"
          />
          <LineChart
            v-if="item.title == 'C₂H₄'"
            :chartData="option2"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'CO'"
            :chartData="option3"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'CH₄'"
            :chartData="option4"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'CO₂'"
            :chartData="option5"
            :style="{ width: '100%' }"
          />
          <LineChart
            v-if="item.title == 'C₂H₂'"
            :chartData="option6"
            :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 },
        { name: "最低温度()", value: 0 },
        { name: "平均温度()", value: 0 },
        { name: "状态", value: "" },
        { name: "回风隅角-O2", value: 0 },
        { name: "回风隅角-CO", value: 0 },
      ],
      myChartH: null,
      legendName: "",
      axisDw: "",
      xDataH: [],
      yDataH: [],
      botContentList: [
        { title: "O₂", value: 0, time: "", address: "" },
        { title: "C₂H₄", value: 0, time: "", address: "" },
        { title: "CO", value: 0, time: "", address: "" },
        { title: "CH₄", value: 0, time: "", address: "" },
        { title: "CO₂", value: 0, time: "", address: "" },
        { title: "C₂H₂", value: 0, time: "", address: "" },
      ],
    };
  },
  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) => 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) => 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) => 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) => 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) => 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) => 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: {
    //初始化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: {},
};
</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: #fff;
    margin-bottom: 2px;
    box-sizing: border-box;

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

      .card-box {
        width: 31.5%;
        height: 60px;
        border-radius: 5px;
        background: linear-gradient(
          to right,
          rgba(55, 135, 254, 0.08),
          rgba(4, 184, 255, 0.08),
          rgba(60, 161, 237, 0.08)
        );

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

        &:nth-child(2) {
          margin-bottom: 10px;
          margin-left: 10px;
          margin-right: 10px;
        }

        &:nth-child(3) {
          margin-bottom: 10px;
        }

        &:nth-child(5) {
          margin-left: 10px;
          margin-right: 10px;
        }
      }

      .card-box:nth-child(1) .box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 0px 15px;
        background: url("/static/zgwd.png") no-repeat right;
        background-size: 40% 80%;
      }

      .card-box:nth-child(2) .box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 0px 15px;
        background: url("/static/zdwd.png") no-repeat right;
        background-size: 40% 80%;
      }

      .card-box:nth-child(3) .box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 0px 15px;
        background: url("/static/pjwd.png") no-repeat right;
        background-size: 40% 80%;
      }

      .card-box:nth-child(4) .box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 0px 15px;
        background: url("/static/zt.png") no-repeat right;
        background-size: 40% 80%;
      }

      .card-box:nth-child(5) .box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 0px 15px;
        background: url("/static/O₂.png") no-repeat right;
        background-size: 40% 80%;
      }

      .card-box:nth-child(6) .box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 0px 15px;
        background: url("/static/CO.png") no-repeat right;
        background-size: 40% 80%;
      }
    }

    .box-item .box-val {
      height: 28px;
      line-height: 28px;
      color: #0eb4fc;
      font-weight: bold;
    }

    .box-item .box-name {
      font-size: 12px;
    }
  }

  .center-area {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 2px;
    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: #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: 12px;
        background: url("/static/warndata/title.png") no-repeat;
        background-size: 100% 100%;
      }

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

        .content-item {
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
          // border-radius: 10px;
          margin-bottom: 5px;

          .item-l {
            width: calc(50% - 10px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            border-radius: 10px;
            padding: 0px 15px;
            background: url("/static/nd.png"),
              linear-gradient(
                to right,
                rgba(55, 135, 254, 0.08),
                rgba(4, 184, 255, 0.08),
                rgba(60, 161, 237, 0.08)
              );
            background-size: auto 100%;
            background-position: right;
            background-repeat: no-repeat;
          }

          .item-r {
            width: calc(50% - 10px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            border-radius: 10px;
            padding: 0px 15px;
            background: url("/static/time.png"),
              linear-gradient(
                to right,
                rgba(55, 135, 254, 0.08),
                rgba(4, 184, 255, 0.08),
                rgba(60, 161, 237, 0.08)
              );
            background-size: auto 100%;
            background-position: right;
            background-repeat: no-repeat;
          }

          .item-value {
            height: 20px;
            line-height: 20px;
            color: #0eb4fc;
            font-weight: bold;
          }

          .item-label {
            font-size: 12px;
          }
        }
      }

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