Vent-App/pages/warndata/components/dust-detail.vue

<template>
  <view class="dust-detail">
    <u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
    <view class="dust-content">
      <view class="top-area" v-for="(item, index) in topList" :key="index">
        <view class="top-title">
          <view style="font-weight: bold;">{{ item.label }}</view>
        </view>
        <view class="top-card">
          <view class="card-item card-item1">
            <view class="item-box item-box1">
              <view class="box-val">{{ item.temperature || '--' }}</view>
              <view class="box-name">温度(℃)</view>
            </view>
          </view>
          <view class="card-item card-item1">
            <view class="item-box item-box2">
              <view class="box-val">{{ item.dustval || '--' }}</view>
              <view class="box-name">粉尘浓度(mg/m³)</view>
            </view>
          </view>
          <view class="card-item">
            <view class="item-box item-box3">
              <view class="box-val">{{ item.waterPressure || '--' }}</view>
              <view class="box-name">喷雾水压(MPa)</view>
            </view>
          </view>
          <view class="card-item">
            <view class="item-box item-box4">
              <view class="box-val">{{ item.atomizingState || '--' }}</view>
              <view class="box-name">喷雾状态</view>
            </view>
          </view>
        </view>
        <view class="top-echart">
          <canvas :id="`myChart${index}`" :style="{ width: '100%', height: '220px' }"></canvas>
        </view>
      </view>
      <view class="bot-area">
        <view class="bot-title">
          <view style="font-weight: bold;">粉尘监控测点信息</view>
        </view>
        <view class="bot-content">
          <view class="card-b" v-for="(item, index) in cardListDust" :key="index">
            <div class="item-l">
              <div class="label-l">{{ item.label || '--' }}</div>
              <div class="value-l">{{ item.value || '--' }}</div>
            </div>
            <div class="item-r">
              <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                <span>{{ `${items.label} : ` }}</span>
                <span :class="{
                  'status-f': items.value == 1,
                  'status-l': items.value == 0,
                }">{{ `${items.value}${items.dw}` || '--' }}</span>
              </div>
            </div>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import api from "@/api/api";
export default {
  name: 'dustDetail',
  props: {},
  watch: {},
  data() {
    return {
      timer: '',
      PageCur: "0",
      tabList: [],
      //喷粉选项数据
      topList: [],
      flag: true,
      echartNow: [],
      echartYc: [],
      xData: [],
      yDataN: [],
      yDataY: [],
      yDataS: [],
      maxY: 0,
      cardListDust: []
    };
  },
  beforeDestroy() {
    this.myChart.clear()
    this.myChart.dispose()
    this.timer = null
    clearTimeout(this.timer)
  },
  mounted() {
    this.getTabList()
    this.getWindDeviceList()
  },
  methods: {
    NavChange: function (item) {
      clearTimeout(this.timer)
      this.PageCur = item.index;
      this.getMonitor(this.tabList[this.PageCur].deviceID, true);
    },
    getMonitor(deviceID, flag) {
      let than = this
      than.timer = setTimeout(
        async () => {
          await than.getSysWarnList(deviceID, 'dust');
          if (than.timer) {
            than.timer = null;
          }
          than.getMonitor(deviceID);
        },
        flag ? 0 : 3000
      );
    },

    //获取顶部tab选项数据
    getTabList() {
      this.tabList = []
      new Promise((resolve, reject) => {
        api
          .sysTypeWarn({ type: 'dust' })
          .then((response) => {
            if (response.data.code == 200 && response.data.result.length != 0) {
              let result = response.data.result
              console.log(result, '粉尘菜单---------')
              result.forEach((el) => {
                this.tabList.push({
                  name: el.systemname,
                  warn: '低风险',
                  deviceID: el.id,
                  strtype: el.strtype,
                });
              });
              this.getMonitor(this.tabList[0].deviceID, true);
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取喷粉选项数据
    getSysWarnList(id, type) {
      let that = this
      new Promise((resolve, reject) => {
        api
          .sysWarn({ sysid: id, type: type })
          .then((response) => {
            if (response.data.code == 200) {
              console.log(response.data, '喷粉选项数据---------')
              let data = response.data.result.dust
              if (data.length != 0) {
                that.topList = data.map(el => {
                  return { label: el.strinstallpos, temperature: el.readData.temperature, dustval: el.readData.dustval, waterPressure: el.readData.waterPressure, atomizingState: el.readData.atomizingState }
                })

                data.forEach((v, index) => {
                  if (that.flag) {
                    that.echartNow = JSON.parse(v.readData.expectInfo)['list']
                    that.flag = false
                  }
                  that.echartYc.push({ time: JSON.parse(v.readData.expectInfo)['nowTime'], value: JSON.parse(v.readData.expectInfo)['nowVal'] })
                  let setData = [...that.echartNow, ...that.echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)))
                  that.xData = []
                  that.yDataS = []
                  that.yDataY = []
                  that.yDataN = []
                  setData.forEach(el => {
                    if (el.value && el.value != '0') {
                      that.xData.push(el.time);
                      that.yDataS.push(el.value);
                      that.yDataY.push(JSON.parse(v.readData.expectInfo)['aveVal']);
                      that.yDataN.push(JSON.parse(v.readData.expectInfo)['fmin'] ? JSON.parse(v.readData.expectInfo)['fmin'] : 0);
                    }
                  })
                  let max = that.yDataS.reduce((acr, cur) => {
                    return acr > cur ? acr : cur;
                  });
                  that.maxY = that.formatRoundNum(max * 1.5);
                  // console.log(that.xData, that.yDataS, that.yDataY, that.yDataN, '000')
                  that.initChart(index)
                })

              }
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取粉尘监控测点信息
    getWindDeviceList() {
      new Promise((resolve, reject) => {
        api
          .getDeviceVent({ devicetype: 'dusting', pagetype: 'normal' })
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result
              if (data.msgTxt[0].datalist.length != 0) {
                let list = data.msgTxt[0].datalist;
                if (list.length > 0) {
                  this.cardListDust = list.map((el) => {//lxh
                    const readData = el.readData;
                    el = Object.assign(el, readData);
                    return {
                      label: '通信状态',
                      value: el.netStatus == '0' ? '断开' : '连接',
                      listR: [
                        { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
                        { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval },
                        { id: 2, label: '巷道湿度', dw: '(RH)', value: el.humidity },
                        { id: 4, label: '巷道温度', dw: '(℃)', value: el.temperature },
                        { id: 3, label: '是否报警', dw: '', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
                      ],
                    }
                  });
                }
              }
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });


    },
    formatRoundNum(num) {
      let interger = Math.ceil(num);
      let leng = String(interger).length;
      return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
    },
    //初始化echarts实例
    initChart(index) {
      let canvas = document.getElementById(`myChart${index}`);
      this.myChart = this.$echarts.init(canvas)
      let option = {
        grid: {
          top: '20%',
          left: '2%',
          bottom: '4%',
          right: '2%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, .6)',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        legend: {
          // align: 'center',
          right: '0%',
          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: '实时值',
            },
            {
              name: '预测值',
            },

            {
              name: '最新值'
            }
          ],
        },
        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: this.maxY,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
              formatter: '{value}'
            },
            name: '(m³/min)',
            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: this.maxY,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
              formatter: '{value}'
            },
            name: '(m³/min)',
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 10,
            },
            splitLine: {
              lineStyle: {
                color: '#f1f5f6',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#f1f5f6',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '实时值',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#19a3df',
              },
            },
            data: this.yDataS || [],
          },
          {
            name: '预测值',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#4fffad',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#4fffad',
              },
            },
            data: this.yDataY || [],
          },
          {
            name: '最新值',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#fc8452',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#fc8452',
              },
            },

            data: this.yDataN || [],
          },
        ],
      };
      this.myChart.setOption(option)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },

  },
  computed: {

  },
};
</script>

<style lang="scss" scoped>
.dust-detail {
  position: relative;
  // padding: 0px 10px;
  box-sizing: border-box;

  .devic-box-tab {
    padding: 0px 10px !important;
  }

  .dust-content {
    // height: 704px;
    // padding: 0px 10px;
    // box-sizing: border-box;
    // overflow-y: auto;
    height: 704px;
    box-sizing: border-box;
    overflow-y: auto;

    .top-area {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #FFF;
      margin-bottom: 2px;

      .top-title {
        height: 28px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .top-card {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 10px;

        .card-item {
          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));

          .item-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            height: 100%;
            padding: 0px 15px;

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

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

          }

          .item-box1 {
            background: url('/static/wd.png') no-repeat right;
            background-size: 30% 80%;
          }

          .item-box2 {
            background: url('/static/dust.png') no-repeat right;
            background-size: 30% 80%;
          }

          .item-box3 {
            background: url('/static/pwsy.png') no-repeat right;
            background-size: 30% 80%;
          }

          .item-box4 {
            background: url('/static/pwzt.png') no-repeat right;
            background-size: 30% 80%;
          }
        }

        .card-item1 {
          margin-bottom: 10px;
        }
      }

      .top-echart {
        height: 220px;
      }
    }

    .bot-area {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #FFF;
      margin-bottom: 2px;

      .bot-title {
        height: 28px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .bot-content {
        // height: calc(100% - 38px);
        overflow-y: auto;

        .card-b {
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-between;
          padding: 5px;
          margin-bottom: 5px;
          background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));


          .item-l {
            position: relative;
            width: 80px;
            height: 100%;
            background: url('/static/bot-area.png') no-repeat center;
            background-size: 100% 100%;

            .label-l {
              width: 100%;
              position: absolute;
              top: 7px;
              font-size: 12px;
              text-align: center;
            }

            .value-l {
              width: 100%;
              position: absolute;
              top: 50px;
              color: #0eb4fc;
              text-align: center;
            }
          }

          .item-r {
            width: calc(100% - 100px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .content-r {
              display: flex;

              span {
                font-size: 12px;

                &:first-child {
                  display: inline-block;
                  width: 68px;
                }

                &:last-child {
                  display: inline-block;
                  width: calc(100% - 68px);
                  overflow: hidden;
                  white-space: nowrap;
                  /* 不换行 */
                  /* 超出部分隐藏 */
                  text-overflow: ellipsis;
                  /* 使用省略符号 */
                }
              }

              .status-f {
                color: #ff0000;
              }

              .status-l {
                color: #3df6ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>