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

<template>
  <!-- 外因火灾 -->
  <view class="fire-detail-zb">
    <view class="top-area">
      <view class="echartBox">
        <warnZb
          :resetIndex="0"
          :widthV="widthV"
          :heightV="heightV"
          :coordDw="coordDw"
          :widthCanvas="widthCanvas"
          :heightCanvas="heightCanvas"
          :stageList="stageList"
        ></warnZb>
      </view>
    </view>
    <view class="bot-area">
      <view
        class="bot-content"
        v-for="(item, index) in botContentList"
        :key="index"
      >
        <view class="content-title">序号：{{ seqNo(index) }}</view>
        <view class="content-item-box">
          <view
            class="content-item"
            v-for="(card, cIndex) in cardList"
            :key="cIndex"
          >
            <view class="item-icon">
              <image class="icon-img" :src="card.icon" mode="aspectFit"></image>
            </view>
            <view class="item-info">
              <view class="item-value">{{ cellValue(item, card.key) }}</view>
              <view class="item-label">{{ card.label }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import warnZb from "./warn-zb.vue";
export default {
  name: "fireDetailZb",
  components: {
    warnZb,
  },
  props: {
    detailZb: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      widthV: "85%",
      heightV: "85%",
      coordDw: [16, 42],
      widthCanvas: "302px",
      heightCanvas: "194px",
      botContentList: [],
      //底部卡片：名称、取值字段、对应图标
      cardList: [
        {
          label: "预警等级",
          key: "level",
          icon: "/static/warndata/yujing-dengji.svg",
        },
        {
          label: "煤自燃阶段",
          key: "alarmName",
          icon: "/static/warndata/meiziran-jieduan.svg",
        },
        {
          label: "指标",
          key: "alarmInfo",
          icon: "/static/warndata/zhibiao.svg",
        },
        {
          label: "条件",
          key: "alarmdes",
          icon: "/static/warndata/tiaojian.svg",
        },
        {
          label: "温度",
          key: "temperature",
          icon: "/static/warndata/wendu.svg",
        },
        {
          label: "参考值",
          key: "address",
          icon: "/static/warndata/cankaozhi.svg",
        },
      ],
    };
  },
  watch: {
    detailZb: {
      handler(newZ, oldZ) {
        console.log(newZ, "newZ--------------");
        let that = this;
        if (JSON.stringify(newZ) != "{}") {
          that.botContentList = newZ.info[0].list;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    //序号，补零显示：01、02……
    seqNo(index) {
      const num = index + 1;
      return num < 10 ? "0" + num : "" + num;
    },
    //卡片取值，空值统一显示--
    cellValue(item, key) {
      const value = item ? item[key] : "";
      return value === null || value === undefined || value === ""
        ? "--"
        : value;
    },
  },
  computed: {
    //当前数据中出现的煤自燃阶段（用于曲线图区间高亮）
    stageList() {
      const list = [];
      this.botContentList.forEach((ite) => {
        if (ite.alarmName && list.indexOf(ite.alarmName) === -1) {
          list.push(ite.alarmName);
        }
      });
      return list;
    },
  },
};
</script>

<style lang="scss" scoped>
.fire-detail-zb {
  width: 100%;
  height: 100%;

  // box-sizing: border-box;
  // overflow-y: auto;
  .top-area {
    width: 100%;
    padding: 10px;
    background-color: #f9f9fb;
    border: 1px solid #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;

    .echartBox {
      width: 100%;
      height: 250px;
    }
  }

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

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

      &:last-child {
        margin-bottom: 0;
      }

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

      .content-item-box {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0px 0px;

        .content-item {
          width: calc((100% - 12px) / 2);
          height: 62px;
          margin-right: 6px;
          margin-bottom: 8px;
          padding: 0px 6px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          background: linear-gradient(
            to bottom,
            rgba(175, 195, 252, 0.6) 0%,
            rgba(175, 195, 252, 0.1) 100%
          );
          border-radius: 10px;

          &:nth-child(2n) {
            margin-right: 0px;
          }

          .item-icon {
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: linear-gradient(135deg, #80b4ff, #347df3);

            .icon-img {
              width: 18px;
              height: 18px;
              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: 12px;
              font-weight: bold;
              line-height: 16px;
              color: #2b7cff;
              word-break: break-all;
            }

            .item-label {
              margin-top: 2px;
              font-size: 11px;
              line-height: 14px;
              color: #000;
            }
          }
        }
      }
    }
  }
}
</style>