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 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 class="top-card1">
        <view class="card-box" v-for="(item, index) in cardList1" :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="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.nd }}</view>
              <view class="item-label">浓度</view>
            </view>
            <view class="item-line"></view>
            <view class="item-c">
              <view class="item-value">{{ item.time }}</view>
              <view class="item-label">时间</view>
            </view>
            <view class="item-line"></view>
            <view class="item-r">
              <view class="item-value">{{ item.address }}</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 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: "" },
        { 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: "" },
      ],
    };
  },
  computed: {
    warnLevel: function () {
      return this.cardList1[1].value;
    },
  },
  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) => 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) => 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) => 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) => 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) => 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) => 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: {
    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: #fff;
    margin-bottom: 2px;
    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: 32%;
        height: 100%;
        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)
        );
      }

      .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/address.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/pjwd.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/yjdj.png") no-repeat right;
        background-size: 40% 80%;
      }
    }

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

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

      .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/mzrjd.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/time.png") no-repeat right;
        background-size: 40% 80%;
      }
    }

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

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

  .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(25% - 2px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .item-c {
            width: calc(50% - 4px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .item-line {
            width: 4px;
            height: 70%;
            border-left: 2px solid;
            border-image: linear-gradient(
                to bottom,
                transparent,
                rgba(140, 203, 254, 1),
                transparent
              )
              1 1 1;
          }

          .item-r {
            width: calc(25% - 2px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

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

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