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="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" v-for="(item, index) in botList" :key="index">
      <view class="bot-title">
        <view style="font-weight: bold">{{ item.title }}</view>
      </view>
      <view class="bot-content">
        <view class="h-table">
          <view class="table-head" v-if="item.title == '烟雾传感器监测'">
            <view
              class="head-item"
              v-for="(items, index) in headList"
              :key="index"
              >{{ items.title }}</view
            >
          </view>
          <view class="table-head" v-else>
            <view
              class="head-item1"
              v-for="(items, index) in headList1"
              :key="index"
              >{{ items.title }}
            </view>
          </view>
          <view class="table-content">
            <view
              class="content-tr"
              v-if="item.title == '烟雾传感器监测'"
              v-for="(ite, ind) in tableDataYw"
              :key="ind"
            >
              <view class="content-td td">{{ ite.strinstallpos }}</view>
              <view class="content-td td1">{{ ite.val }}</view>
              <view class="content-td td2">{{ ite.warnLevel_str }}</view>
              <view class="content-td td3">{{ ite.readTime }}</view>
            </view>
            <view
              class="content-tr"
              v-if="item.title == '一氧化碳传感器监测'"
              v-for="(ite, ind) in tableDataCo"
              :key="ind"
            >
              <view class="content-td td">{{ ite.strinstallpos }}</view>
              <view class="content-td td1">{{ ite.warnLevel_str }}</view>
              <view class="content-td td2">{{ ite.readTime }}</view>
            </view>
            <view
              class="content-tr"
              v-if="item.title == '自动喷淋灭火装置监测'"
              v-for="(ite, ind) in tableDataPl"
              :key="ind"
            >
              <view class="content-td td">{{ ite.strinstallpos }}</view>
              <view class="content-td td1">{{ ite.warnLevel_str }}</view>
              <view class="content-td td2">{{ ite.readTime }}</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: "",
      myChart: null,
      xData: [],
      yData: [],
      cardList: [
        { name: "最高温度()", value: 0 },
        { name: "最低温度()", value: 0 },
        { name: "平均温度()", value: 0 },
        { name: "状态", value: "正常" },
      ],
      botList: [
        { title: "烟雾传感器监测" },
        { title: "一氧化碳传感器监测" },
        { title: "自动喷淋灭火装置监测" },
      ],
      headList: [
        { title: "设备名称" },
        { title: "值" },
        { title: "状态" },
        { title: "时间" },
      ],
      headList1: [{ title: "设备名称" }, { title: "状态" }, { title: "时间" }],
      tableDataYw: [],
      tableDataCo: [],
      tableDataPl: [],
    };
  },
  watch: {
    detailWy: {
      handler(newW, oldW) {
        console.log(newW, "newW--------------");
        let that = this;
        that.xData = [];
        that.yData = [];
        if (JSON.stringify(newW) != "{}") {
          if (newW.fiber.length != 0) {
            that.cardList[0].value = newW.fiber[0].readData.fmax;
            that.cardList[1].value = newW.fiber[0].readData.fmin;
            that.cardList[2].value = newW.fiber[0].readData.favg;
            that.cardList[3].value = newW.fiber[0].warnFlag
              ? "存在风险"
              : "正常";
            JSON.parse(newW.fiber[0].readData.fibreTemperature).forEach(
              (el) => {
                that.xData.push(el.pos);
                that.yData.push(el.value);
                this.initChart();
              }
            );
          } else {
            that.cardList[0].value = "--";
            that.cardList[1].value = "--";
            that.cardList[2].value = "--";
            that.cardList[3].value = "正常";
          }

          if (newW.smoke.length != 0) {
            that.tableDataYw = newW.smoke.map((el) => {
              return {
                strinstallpos: el.strinstallpos,
                val: el.readData.smokeval,
                warnLevel_str:
                  el.warnLevel_str == "正常" ? "低风险" : el.warnLevel_str,
                readTime: el.readTime,
              };
            });
          } else {
            that.tableDataYw = [];
          }

          if (newW.co.length != 0) {
            that.tableDataCo = newW.co;
          } else {
            that.tableDataCo = [];
          }

          if (newW.spray.length != 0) {
            that.tableDataPl = newW.spray;
          } else {
            that.tableDataPl = [];
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    //初始化echarts实例
    initChart() {
      this.option = {
        categories: this.xData.slice(-10) || [],
        series: [
          {
            name: "当前温度",
            data: this.yData.slice(-10) || [],
          },
        ],
      };
    },
  },
  computed: {},
};
</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: #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: calc(50% - 5px);
        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;
          margin-right: 5px;
        }

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

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

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

      .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: auto 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: auto 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: auto 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: auto 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: 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 {
      width: 100%;
      height: 240px;

      .h-table {
        width: 100%;
        height: 100%;
        border: 1px solid #0eb4fc;

        .table-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 36px;
          border-bottom: 1px solid #0eb4fc;

          .head-item {
            font-size: 12px;
            color: #0eb4fc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;

            &:nth-child(1) {
              width: 30%;
            }

            &:nth-child(2) {
              width: 20%;
            }

            &:nth-child(3) {
              width: 20%;
            }

            &:nth-child(4) {
              width: 30%;
            }
          }

          .head-item1 {
            font-size: 12px;
            color: #0eb4fc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;

            &:nth-child(1) {
              width: 30%;
            }

            &:nth-child(2) {
              width: 30%;
            }

            &:nth-child(3) {
              width: 40%;
            }
          }
        }

        .table-content {
          height: calc(100% - 36px);
          overflow-y: auto;

          .content-tr {
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;

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

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

            .content-td {
              height: 100%;
              font-size: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            }

            .td {
              width: 30%;
            }

            .td1 {
              width: 20%;
            }

            .td2 {
              width: 20%;
            }

            .td3 {
              width: 30%;
            }
          }
        }
      }
    }
  }
}
</style>