neim/neim-ui/src/views/windResources/windRose/index.vue

<template>
  <div>
    <el-card class="box-card">
      <div class="seachBox">
        <div class="conditionOne">
          <span>测风塔：</span>
          <el-select v-model="cftId" filterable 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="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div class="conditionThree">
          <span>层高：</span>
          <el-select v-model="height" placeholder="请选择">
            <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="seachWindRose" :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 id="roseChart"/>
            <div id="powerChart"/>
            <div id="tunInRoseChart"/>

          </el-tab-pane>

        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import {listWindRose, getWindEnergyDensity, getTurbulenceIntensity} from "@/api/biz/dataQuery/RealTimeDisplay";
import {listAllInfo, listEquipmentIdAndDataTime} from "@/api/biz/dataQuery/windTowerStatusInfo";
import defaultOption from "@/api/biz/dataQuery/defaultOption";
import {startTimeAndEndTime} from "@/api/biz/dataQuery/RealTimeDisplay";

export default {
  name: "index",
  data() {
    return {
      btuLoading:true,
      height: "",
      loading: false,
      activeName: 'first',
      roseChart: null,
      powerChart: null,
      tunInRoseChart: null,
      dataTime: [new Date(new Date().toLocaleDateString()).getTime() - 168 * 60 * 60 * 1000, new Date(new Date().toLocaleDateString()).getTime()],
      allOptions: [],
      options: [],
      cftId: '',
      startDateAndEndDate: [],
      pickerMinDate: '', //获取开始选择时间
      pickerMaxDate: '', //获取结束选择时间
      pickerOptions: {
        //时间范围选择控制
        onPick: ({maxDate, minDate}) => {
          if (minDate) {
            this.pickerMinDate = minDate.getTime()
          }
          if (maxDate) {
            this.pickerMinDate = ''
            this.pickerMaxDate = maxDate.getTime()
          }
        },
        disabledDate: time => {
          const day30 = 30 * 24 * 3600 * 1000
          if (this.pickerMinDate !== '') {
            let maxTime = this.pickerMinDate + day30
            if (maxTime >= new Date()) {
              maxTime = new Date()
            }
            return time.getTime() > maxTime
          }
          if (this.pickerMaxDate !== '' && !this.pickerMinDate) {
            let minTime = this.pickerMaxDate - day30
            return time.getTime() < minTime
          }
          return time.getTime() > Date.now()
        },
      }
    }
  },
  destroyed() {
    if (this.roseChart) {
      this.roseChart.dispose()
      this.roseChart = null
    }
    if (this.powerChart) {
      this.powerChart.dispose()
      this.powerChart = null
    }
    if (this.tunInRoseChart) {
      this.tunInRoseChart.dispose()
      this.tunInRoseChart = null
    }

  },
  mounted() {
    this.allOptions = defaultOption.allHeightOptions
    this.getTimeFrame()
  },
  methods: {
    /*查询三个玫瑰图*/
    seachWindRose() {
      this.btuLoading = true
      var param = {
        startTime: new Date(this.dataTime[0]).getTime(),
        endTime: new Date(this.dataTime[1]).getTime() - 1,
        equipmentId: this.cftId,
        height: this.height
      }
      this.getLoading()
      //风向玫瑰图
      this.listWindRose(param)
      //风功率玫瑰图
      this.getWindEnergyDensity(param)
      //湍流玫瑰图
      this.getTurbulenceIntensity(param)
    },
    /*玫瑰图数据*/
    listWindRose(param) {
      listWindRose(param).then(res => {
        // var data = [res.data[0].N, res.data[15].NNW, res.data[14].NW, res.data[13].WNW, res.data[12].W, res.data[11].WSW, res.data[10].SW, res.data[9].SSW, res.data[8].S, res.data[7].SSE, res.data[6].SE, res.data[5].ESE, res.data[4].E, res.data[3].ENE, res.data[2].NE, res.data[1].NNE]
        var data = [res.data[0].N, res.data[1].NNE, res.data[2].NE, res.data[3].ENE, res.data[4].E, res.data[5].ESE, res.data[6].SE, res.data[7].SSE, res.data[8].S, res.data[9].SSW, res.data[10].SW, res.data[11].WSW, res.data[12].W, res.data[13].WNW, res.data[14].NW, res.data[15].NNW]
        var max = Math.max.apply(null, data) == 0 ? 100 : Math.max.apply(null, data);
        this.drawRoseChart(data, max)
      }).catch(err => {
        this.roseChart.hideLoading();
        this.$message.error('查询风向玫瑰图异常')
        console.log("查询风向玫瑰图异常：" + err)
      })
    },
    /*风功率玫瑰图*/
    getWindEnergyDensity(param) {
      getWindEnergyDensity(param).then(res => {
        let data = []
        let max = 1
        if(res.data.length>0){
          data = [res.data[0].N, res.data[1].NNE, res.data[2].NE, res.data[3].ENE, res.data[4].E, res.data[5].ESE, res.data[6].SE, res.data[7].SSE, res.data[8].S, res.data[9].SSW, res.data[10].SW, res.data[11].WSW, res.data[12].W, res.data[13].WNW, res.data[14].NW, res.data[15].NNW]
          /*获取数组的最大值*/
          max = Math.max.apply(null, data) == 0 ? 100 : Math.max.apply(null, data);
          this.drawPowerChart(data, max)
        }
        this.drawPowerChart(data, max)
      }).catch(err => {
        this.powerChart.hideLoading();
        this.$message.error('查询风功率玫瑰图异常')
        console.log("查询风功率玫瑰图异常：" + err)
      })
    },
    /*湍流玫瑰图*/
    getTurbulenceIntensity(param) {
      getTurbulenceIntensity(param).then(res => {
        var data = [res.data[0].N, res.data[1].NNE, res.data[2].NE, res.data[3].ENE, res.data[4].E, res.data[5].ESE, res.data[6].SE, res.data[7].SSE, res.data[8].S, res.data[9].SSW, res.data[10].SW, res.data[11].WSW, res.data[12].W, res.data[13].WNW, res.data[14].NW, res.data[15].NNW]
        /*获取数组的最大值*/
        var max = Math.max.apply(null, data) == 0 ? 100 : Math.max.apply(null, data);
        this.drawTunInChart(data, max)
      }).catch(err => {
        this.tunInRoseChart.hideLoading();
        this.$message.error('查询湍流玫瑰图异常')
        console.log("查询湍流玫瑰图异常：" + err)
      })
      this.btuLoading = false
    },
    /*切换测风塔找到它对应的层高*/
    changeCft() {
      let data = this.startDateAndEndDate.find(w => w.value == this.cftId)
      this.getDataTime(this.cftId)
      this.changeHeight(data)
    },
    /*获取所有的测风塔*/
    getlistEquipmentIdAndDataTime() {
      listEquipmentIdAndDataTime().then(res => {
        this.startDateAndEndDate = res.data
        this.cftId = res.data[0].value
        this.getDataTime(this.cftId)
        this.changeHeight(res.data[0])
        this.seachWindRose()
      })
    },
    /*切换测风塔时改变层高option*/
    changeHeight(data) {
      if (data.heights != null) {
        var option = []
        let str = data.wdHeights.split(',')
        this.height = str[0]
        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 = "10"
        this.options = this.allOptions
      }
    },
    /*获取默认的时间段*/
    getTimeFrame() {
      startTimeAndEndTime().then(res => {
        this.defaultTimeData = res.data
        this.getlistEquipmentIdAndDataTime()
      }).catch(err => {
        this.getlistEquipmentIdAndDataTime()
        this.$message.error('获取时间范围异常')
        console.log('获取时间范围异常：' + err)
      })
    },
    /*设置时间范围默认值*/
    getDataTime(cftId) {
      this.dataTime = [new Date(new Date().toLocaleDateString()).getTime() - 168 * 60 * 60 * 1000, new Date(new Date().toLocaleDateString()).getTime()]
      if (cftId != null || cftId != undefined) {
        if (this.defaultTimeData.length > 0) {
          let filterData = this.defaultTimeData.find(w => w.equipmentId == cftId)
          if (JSON.stringify(filterData) != '{}') {
            this.dataTime = [filterData.startTime, filterData.endTime]
          }
        }
      }
    },
    drawRoseChart(data, max) {
      if (!this.roseChart) {
        this.roseChart = this.$echarts.init(document.getElementById('roseChart'))
      }

      // var option = {
      //   title: {
      //     text: '风向玫瑰图'
      //   },
      //   legend: {},
      //   tooltip: {
      //     position: ['50%', '30%'],
      //     show: true
      //   },
      //   radar: {
      //     center: ['40%', '50%'],
      //     indicator: [
      //       {name: 'N', max: max},
      //       {name: 'NNW', max: max},
      //       {name: 'NW', max: max},
      //       {name: 'WNW', max: max},
      //       {name: 'W', max: max},
      //       {name: 'WSW', max: max},
      //       {name: 'SW', max: max},
      //       {name: 'SSW', max: max},
      //       {name: 'S', max: max},
      //       {name: 'SSE', max: max},
      //       {name: 'SE', max: max},
      //       {name: 'ESE', max: max},
      //       {name: 'E', max: max},
      //       {name: 'ENE', max: max},
      //       {name: 'NE', max: max},
      //       {name: 'NNE', max: max}
      //     ]
      //   },
      //   series: [
      //     {
      //       name: '风向',
      //       type: 'radar',
      //       data: [{value: data}],
      //       areaStyle: {
      //         color: this.$echarts.graphic.RadialGradient(0.1, 0.6, 1, [
      //           {
      //             color: 'rgba(255, 145, 124, 0.1)',
      //             offset: 0
      //           },
      //           {
      //             color: 'rgba(255, 145, 124, 0.9)',
      //             offset: 1
      //           }
      //         ])
      //       }
      //     }
      //   ]
      // };
      let option = {
        title: {
          text: '风向玫瑰图'
        },
        polar: {
          radius: [0, '80%'],
        },
        tooltip: {
          show: true
        },
        radiusAxis: {
          // type: 'category',
          axisLine: {
            show: false,
          },
          interval: Math.ceil(max / 3)
        },
        angleAxis: {
          splitLine: {
            show: true
          },
          type: 'category',
          data: [
            'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW',
            'WSW', 'W', 'WNW', 'NW', 'NNW'],
          startAngle: 100
        },
        series: {
          type: 'bar',
          data: data,
          coordinateSystem: 'polar',
        },
        animation: false
      };
      this.roseChart.setOption(option, true)
      this.roseChart.hideLoading();
      window.addEventListener('resize', () => {
        if (this.roseChart) {
          this.roseChart.resize()
        }
      })
    },
    drawPowerChart(data, max) {
      if (!this.powerChart) {
        this.powerChart = this.$echarts.init(document.getElementById('powerChart'))
      }
      // var option = {
      //   title: {
      //     text: '风功率玫瑰图'
      //   },
      //   legend: {},
      //   tooltip: {
      //     position: ['50%', '30%'],
      //     show: true
      //   },
      //   radar: {
      //     center: ['40%', '50%'],
      //     indicator: [{name: 'N', max: max}, {name: 'NNW', max: max}, {name: 'NW', max: max}, {
      //       name: 'WNW',
      //       max: max
      //     }, {name: 'W', max: max}, {name: 'WSW', max: max}, {name: 'SW', max: max}, {
      //       name: 'SSW',
      //       max: max
      //     }, {name: 'S', max: max},
      //       {name: 'SSE', max: max}, {name: 'SE', max: max}, {name: 'ESE', max: max}, {
      //         name: 'E',
      //         max: max
      //       }, {name: 'ENE', max: max}, {name: 'NE', max: max}, {name: 'NNE', max: max}]
      //   },
      //   series: [
      //     {
      //       name: '风功率',
      //       type: 'radar',
      //       data: [{value: data,}],
      //       areaStyle: {
      //         color: this.$echarts.graphic.RadialGradient(0.1, 0.6, 1, [
      //           {
      //             color: 'rgba(255, 145, 124, 0.1)',
      //             offset: 0
      //           },
      //           {
      //             color: 'rgba(255, 145, 124, 0.9)',
      //             offset: 1
      //           }
      //         ])
      //       }
      //     }
      //   ]
      // };
      let option = {
        title: {
          text: '风功率玫瑰图'
        },
        polar: {
          radius: [0, '80%'],
        },
        tooltip: {
          show: true
        },
        radiusAxis: {
          // type: 'category',
          axisLine: {
            show: false,
          },
          interval: Math.ceil(max / 3)
        },
        angleAxis: {
          splitLine: {
            show: true
          },
          type: 'category',
          data: [
            'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW',
            'WSW', 'W', 'WNW', 'NW', 'NNW'],
          startAngle: 100
        },
        series: {
          type: 'bar',
          data: data,
          coordinateSystem: 'polar',
        },
        animation: false
      };
      this.powerChart.setOption(option, true)
      this.powerChart.hideLoading();
      window.addEventListener('resize', () => {
        if (this.powerChart) {
          this.powerChart.resize()
        }
      })
    },
    drawTunInChart(data, max) {
      if (!this.tunInRoseChart) {
        this.tunInRoseChart = this.$echarts.init(document.getElementById('tunInRoseChart'))
      }
      // var option = {
      //   title: {
      //     text: '湍流玫瑰图'
      //   },
      //   legend: {},
      //   tooltip: {
      //     position: ['50%', '-5%'],
      //     show: true
      //   },
      //   radar: {
      //     center: ['40%', '50%'],
      //     indicator: [
      //       {name: 'N', max: max},
      //       {name: 'NNW', max: max},
      //       {name: 'NW', max: max},
      //       {name: 'WNW', max: max},
      //       {name: 'W', max: max},
      //       {name: 'WSW', max: max},
      //       {name: 'SW', max: max},
      //       {name: 'SSW', max: max},
      //       {name: 'S', max: max},
      //       {name: 'SSE', max: max},
      //       {name: 'SE', max: max},
      //       {name: 'ESE', max: max},
      //       {name: 'E', max: max},
      //       {name: 'ENE', max: max},
      //       {name: 'NE', max: max},
      //       {name: 'NNE', max: max}
      //     ]
      //   },
      //   series: [
      //     {
      //       name: '湍流',
      //       type: 'radar',
      //       data: [{value: data,}],
      //       areaStyle: {
      //         color: this.$echarts.graphic.RadialGradient(0.1, 0.6, 1, [
      //           {
      //             color: 'rgba(255, 145, 124, 0.1)',
      //             offset: 0
      //           },
      //           {
      //             color: 'rgba(255, 145, 124, 0.9)',
      //             offset: 1
      //           }
      //         ])
      //       }
      //     }
      //   ]
      // };
      let option = {
        title: {
          text: '湍流玫瑰图'
        },
        polar: {
          radius: [0, '80%'],
        },
        tooltip: {
          show: true
        },
        radiusAxis: {
          // type: 'category',
          axisLine: {
            show: false,
          },
          interval: Math.ceil(max / 3)
        },
        angleAxis: {
          splitLine: {
            show: true
          },
          type: 'category',
          data: [
            'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW',
            'WSW', 'W', 'WNW', 'NW', 'NNW'],
          startAngle: 100
        },
        series: {
          type: 'bar',
          data: data,
          coordinateSystem: 'polar',
        },
        animation: false
      };
      this.tunInRoseChart.setOption(option, true)
      this.tunInRoseChart.hideLoading();
      window.addEventListener('resize', () => {
        if (this.tunInRoseChart) {
          this.tunInRoseChart.resize()
        }
      })
    },
    /*添加loading*/
    getLoading() {
      if (!this.roseChart) {
        this.roseChart = this.$echarts.init(document.getElementById('roseChart'))
      }
      this.roseChart.showLoading({
        text: 'loading',
        color: '#c23531',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      });
      if (!this.powerChart) {
        this.powerChart = this.$echarts.init(document.getElementById('powerChart'))
      }
      this.powerChart.showLoading({
        text: 'loading',
        color: '#c23531',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      });
      if (!this.tunInRoseChart) {
        this.tunInRoseChart = this.$echarts.init(document.getElementById('tunInRoseChart'))
      }
      this.tunInRoseChart.showLoading({
        text: 'loading',
        color: '#c23531',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      });
    },
    handleClick(tab, event) {
      if (this.activeName == 'first') {
        this.roseChart = null
        this.roseChart.resize()
        this.powerChart = null
        this.powerChart.resize()
        this.tunInRoseChart = null
        this.tunInRoseChart.resize()
      }
    },
  }
}
</script>

<style scoped>
.seachBox {
  display: flex;
  margin: .5%;
}

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

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

#roseChart, #powerChart, #tunInRoseChart, #shearChart {
  display: inline-block;
  width: 50%;
  height: calc(38vh - 10px);
}
</style>