neim/neim-ui/src/views/statistical/shear/index.vue

<template>
  <div>
    <el-card class="box-card">
      <div class="seachBox">
        <div class="conditionOne">
          <span>测风塔：</span>
          <el-select v-model="cftId" placeholder="请选择" @change="changeCft">
            <el-option
              v-for="item in startDateAndEndDate"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left;">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.date }}</span>
            </el-option>
          </el-select>
        </div>
        <div class="conditionTwo">
          <span>时间：</span>
          <el-date-picker
            v-model="dataTime"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div class="conditionTwo">
          <span>层高：</span>
          <el-select v-model="height" placeholder="请选择" clearable multiple>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button class="seachBtu" type="primary" plain icon="el-icon-search" size="small" @click="getListShear" :loading="btuLoading">搜索
        </el-button>
      </div>
      <div class="mainBox">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="风切变曲线图" name="first">
            <div class="avgTextDiv">
              <div v-html="avgShearText"/>
            </div>
            <div id="shearChart"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>

</template>

<script>
import {listAllInfo, listEquipmentIdAndDataTime} from "@/api/biz/dataQuery/windTowerStatusInfo";
import {listShear} from "@/api/biz/dataQuery/statistics";
import defaultOption from "@/api/biz/dataQuery/defaultOption";

export default {
  name: "index",
  data() {
    return {
      btuLoading:true,
      dataTime: [new Date(new Date().getFullYear(), new Date().getMonth() - 11, 1).getTime(), new Date(new Date().getFullYear(), new Date().getMonth(), 1)],
      // dateTime:new Date(new Date().getFullYear(),0).getTime(),
      cftId: '',
      value: '',
      allOptions: [],
      startDateAndEndDate: [],
      options: [],
      height: null,
      activeName: 'first',
      avgShearText: '',//平均值
      value2: '',

    }
  },
  mounted() {
    this.allOptions = defaultOption.allHeightOptions
    this.getlistEquipmentIdAndDataTime()
  },
  destroyed() {
    if (!this.shearChart) {
      return
    }
    this.shearChart.dispose()
    this.shearChart = null

  },
  methods: {
    /*获取所有的测风塔*/
    getlistEquipmentIdAndDataTime() {
      listEquipmentIdAndDataTime().then(res => {
        this.startDateAndEndDate = res.data
        this.cftId = res.data[0].value
        this.changeHeight(res.data[0])
        this.getListShear()
      })
    },
    async getListShear() {
      this.btuLoading = true
      const param = {
        startTime: new Date(this.dataTime[0]).getTime(),
        endTime: new Date(this.dataTime[1]).getTime(),
        eqId: this.cftId,
        height: this.height == null ? this.height : this.height.toString(),
      }
      if (!this.shearChart) {
        this.shearChart = this.$echarts.init(document.getElementById('shearChart'))
      }
      // 调用showLoading方法
      this.shearChart.showLoading({
        text: 'loading',
        color: '#c23531',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      });
      await listShear(param).then(async res => {
        let data = res.rows[1]
        this.avgShearText = ''
        for (let i = 0; i < data.length; i++) {
          this.avgShearText += ' <span style="color: #1c84c6;font-weight: bold">' + data[i].height + '平均值：</span>' + '<span style="color: #1ab394">' + data[i].shearAve + '</span>' + '，'
        }
        if (this.avgShearText != '') {
          this.avgShearText = this.avgShearText.slice(0, this.avgShearText.length - 1)
        }
        this.shearData = res.rows[0]
        this.drawShearInChart(this.shearData)
        this.btuLoading = false
      }).catch(err => {
        this.shearChart.hideLoading();
        this.btuLoading = false
        this.$message.error('获取风速数据异常')
        console.log('获取风速数据异常：' + err)
      })

    },

    //风速曲线图
    drawShearInChart(data) {
      this.shearChart = this.$echarts.init(document.getElementById('shearChart'))
      /*拼接曲线图的serise*/
      let serise = []
      let legend = []

      for (let i = 0; i < data.length; i++) {
        let seriseData = []
        legend.push(data[i].height + 'm')
        let arr = data[i].arr

        /*拼接serise Data*/
        for (let j = 0; j < data[i].arr.length; j++) {
          seriseData.push([data[i].arr[j].time, data[i].arr[j].shear])
        }

        serise.push({
          name: data[i].height,
          type: 'line',
          smooth: false,
          symbol: 'none', // 这句就是去掉点的
          data: seriseData
        })
      }

      var option = {
        title: {
          text: '年逐月风切变',
        },
        legend: {
          // data: ['风速']
          data: legend
        },
        grid: {
          left: '2%',
          right: '3%',
          // bottom: '8%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
        },
        // color: ['#1a9f00', '#2f4554', '#61a0a8','#d48265'],
        xAxis: {
          name: '时间',
          type: 'category',
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#666b8f',
              width: 4// 这里是为了突出显示加上的
            }
          },

        },
        dataZoom: [
          {
            startValue: ''
          },
          {
            type: 'inside'
          }
        ],
        yAxis: {
          type: 'value',
          name: '风切变指数',
          // min: 0,
          // interval: 5,
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666b8f',
              width: 4// 这里是为了突出显示加上的
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#315070'],
              width: 2,
              type: 'dotted'
            }
          }
        },
        series: serise
      }
      this.shearChart.setOption(option, true)
      this.shearChart.hideLoading();
      window.addEventListener('resize', () => {
        if (this.shearChart) {
          this.shearChart.resize()
        }
      })
    },
    /*切换测风塔时改变层高option*/
    changeHeight(data) {
      if (data.heights != null) {
        var option = []
        let str = data.heights.split(',')
        this.height = null
        for (let i = 0; i < str.length; i++) {
          let filter = this.allOptions.find(w => w.value == str[i])
          option.push(filter)
        }
        this.options = option
      } else {
        this.height = null
        this.options = this.allOptions
      }
    },
    /*切换测风塔找到它对应的层高*/
    changeCft() {
      let data = this.startDateAndEndDate.find(w => w.value == this.cftId)
      this.changeHeight(data)
    },
    handleClick() {
      if (this.activeName == 'first') {
        this.shearChart = null
        this.$nextTick(() => {
          this.drawShearInChart(this.shearData)
          this.shearChart.resize()
        })
      }
    }
  }
}
</script>
<style scoped>
.box-card {
  height: calc(90vh);
}

.seachBox {
  display: flex;
  margin: .5%;
}

.conditionOne, .conditionTwo, .conditionThree, .seachBtu {
  display: inline-block;
}

.conditionTwo, .conditionThree, .seachBtu {
  margin-left: .5%;
}

#shearChart {
  width: 100%;
  height: calc(72vh);
}

</style>