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">
          <canvas :id="`myChart${index}`" :style="{ width: '100%', height: '220px' }"></canvas>
        </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 {
      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.initChart(index)
            })
          } 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 = '--';
          }


        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {

  },
  methods: {
    initChart(ind) {
      let canvas = document.getElementById(`myChart${ind}`);
      this.myChart = this.$echarts.init(canvas)
      let option = {
        grid: {
          top: '20%',
          left: '4%',
          bottom: '4%',
          right: '2%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, .6)',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        legend: {
          // align: 'center',
          right: 'center',
          top: '0%',
          type: 'plain',
          textStyle: {
            color: '#0eb4fc',
            fontSize: 12,
          },
          // icon:'rect',
          itemGap: 25,
          itemWidth: 20,
          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
          data: [
            {
              name: this.legendName || '',
            },

          ],
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              fontSize: 12,
              margin: 10,
              textStyle: {
                color: '#b3b8cc',
              },
              formatter: function (params) {
                let newParamsName = ''  // 最终拼接成的字符串
                let paramsNameNumber = params.length // 实际标签的个数
                let provideNumber = 10  // 每行能显示的字的个数
                let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                //将最终的字符串返回
                return newParamsName
              }
            },
            axisLine: {
              lineStyle: {
                color: '#f1f5f6',
              },
            },
            axisTick: {
              show: false,
            },
            data: this.xData || [],
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: 'value',
            max: 50,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
              formatter: '{value}'
            },
            name: `(${this.axisDw})`,
            nameTextStyle: {
              color: '#b3b8cc',
              fontSize: 12,
              lineHeight: 0,
            },
            splitLine: {
              lineStyle: {
                color: '#f1f5f6',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#f1f5f6',
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            boundaryGap: false,
            type: 'value',
            max: 50,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
              formatter: '{value}'
            },
            name: `(${this.axisDw})`,
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 10,
            },
            splitLine: {
              lineStyle: {
                color: '#f1f5f6',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#f1f5f6',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: this.legendName || '',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#19a3df',
              },
            },
            data: this.yData || [],
          },

        ],
      };
      this.myChart.setOption(option)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })


    },

  },

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