qa-regulatory-gwj-vue/src/views/map/dialog/temperaturestation.vue

<template>
  <div class="app-container print-work">
    <div class="level-title">
      <h1>{{ info.EQUIPMENTNAME }}：实时监测数据 {{ info.OPERATTIME }}</h1>
    </div>
    <div style="display: flex">
      <div id="main4"/>
      <div id="main5"/>
      <div id="main6"/>
    </div>
    <table class="table-ui">
      <tr>
        <td class="bbg-transparent">风速监测</td>
        <td>{{ info.WINDSPEED }}</td>
        <td class="bbg-transparent">风向监测</td>
        <td>{{ info.WINDDIRECTION }}</td>
      </tr>
      <tr>
        <td class="bbg-transparent">温度监测</td>
        <td>{{ info.TEMPERATURE }}</td>
        <td class="bbg-transparent">湿度监测</td>
        <td>{{ info.COUNTARCHIVE }}</td>
      </tr>
    </table>

  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import * as echarts from 'echarts'

let myChart4 = null
let myChart5 = null
const myChart6 = null
export default {
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      config: config,
      info: {}
    }
  },
  mounted() {
    window.onresize = function() {
      myChart4 && myChart4.resize()
      myChart5 && myChart5.resize()
      myChart6 && myChart6.resize()
    }
    this.getData()
  },
  beforeDestroy() {
    myChart4 = null
    myChart5 = null
    myChart5 = null
  },
  methods: {
    getData() {
      requestFN(
        '/map/getById',
        {
          id: this.id,
          TYPE: this.type
        }
      ).then((data) => {
        this.listLoading = false

        this.initEcharts1(data)
        this.initEcharts2(data)
        this.initEcharts3(data)
        this.info = data.pd
        this.info.WINDDIRECTION = this.calculateWindDirection(this.info.WINDDIRECTION)
      }).catch((e) => {
      })
    },
    initEcharts1(data) {
      myChart4 = echarts.init(document.querySelector('#main4'))
      var option = {
        title: {
          // x: "center",
          top: 0,
          text: '风向监测',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#fff'
          }
        },
        series: {
          name: '',
          type: 'gauge',
          min: 0,
          max: 360,
          startAngle: 90,
          endAngle: -269.9999,
          radius: '60%',
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 15,
              shadowBlur: 0,
              color: [
                [0.25, '#DDBD4D'],
                [0.5, '#E43F3D'],
                [0.75, '#7CBB55'],
                [1, '#9CD6CE']
              ]
            }
          },
          axisTick: {
            show: true,
            splitNumber: 5,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            length: 10,
            lineStyle: {
              width: 5,
              color: '#fff'
            }
          },
          axisLabel: {
            formatter: function(e) {
              switch (e + '') {
                case '0':
                  return '北'
                case '45':
                  return '东北'
                case '135':
                  return '东南'
                case '225':
                  return '西南'
                case '315':
                  return '西北'
                case '360':
                  return '北'
                case '180':
                  return '南'
                case '90':
                  return '东'
                case '270':
                  return '西'
                default:
                  return e
              }
            },
            distance: -60,
            textStyle: {
              fontSize: 14,
              fontWeight: '',
              color: '#fff'
            }
          },
          pointer: {
            show: true,
            length: '80%',
            width: 5
          },
          detail: {
            formatter: function(param) {
              var level = ''
              if (param > 0 && param < 90) {
                level = '东北'
              } else if (param > 90 && param < 180) {
                level = '东南'
              } else if (param > 180 && param < 270) {
                level = '西南'
              } else if (param > 270 && param < 360) {
                level = '西北'
              } else if (param == 360) {
                level = '正北'
              } else if (param == 270) {
                level = '正西'
              } else if (param == 90) {
                level = '正东'
              } else if (param == 180) {
                level = '正南'
              }
              return '当前风向:' + level + '(' + param + '°)'
            },
            offsetCenter: [0, 190],
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          data: [data.pd.WINDDIRECTION]
        }
      }
      myChart4.setOption(option)
    },
    initEcharts2(data) {
      myChart5 = echarts.init(document.querySelector('#main5'))
      var value = data.pd.TEMPERATURE
      var kd = []
      // 刻度使用柱状图模拟，短设置3，长的设置5；构造一个数据
      for (var i = 0, len = 130; i <= len; i++) {
        if (i > 100 || i < 30) {
          kd.push('0')
        } else {
          if (i % 5 === 0) {
            kd.push('5')
          } else {
            kd.push('3')
          }
        }
      }
      // console.log(kd)
      // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
      function getData(value) {
        return [Number(value) + 30]
      }
      console.log(getData(value))
      var data = getData(value + 30)
      var mercuryColor = '#fd4d49'
      var borderColor = '#fd4d49'

      const option = {
        title: {
          text: '温度监测',
          show: true,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#fff'
          }
        },
        yAxis: [{
          show: false,
          min: 0,
          max: 130
        }, {
          show: false,
          data: [],
          min: 0,
          max: 130
        }],
        xAxis: [{
          show: false,
          data: []
        }, {
          show: false,
          data: []
        }, {
          show: false,
          data: []
        }, {
          show: false,
          min: -110,
          max: 100

        }],
        series: [{
          name: '条',
          type: 'bar',
          // 对应上面XAxis的第一个对象配置
          xAxisIndex: 0,
          data: data,
          barWidth: 18,
          itemStyle: {
            normal: {
              color: mercuryColor,
              barBorderRadius: 0
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: function(param) {
                // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                return (((param.value * 100) - (30 * 100)) / 100) + '°C'
              },
              textStyle: {
                color: '#ccc',
                fontSize: '10'
              }
            }
          },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          xAxisIndex: 1,
          barGap: '-100%',
          data: [129],
          barWidth: 28,
          itemStyle: {
            normal: {
              color: '#ffffff',
              barBorderRadius: 50
            }
          },
          z: 1
        }, {
          name: '外框',
          type: 'bar',
          xAxisIndex: 2,
          barGap: '-100%',
          data: [130],
          barWidth: 38,
          itemStyle: {
            normal: {
              color: borderColor,
              barBorderRadius: 50
            }
          },
          z: 0
        }, {
          name: '圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [0],
          xAxisIndex: 0,
          symbolSize: 48,
          itemStyle: {
            normal: {
              color: mercuryColor,
              opacity: 1
            }
          },
          z: 2
        }, {
          name: '白圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [0],
          xAxisIndex: 1,
          symbolSize: 60,
          itemStyle: {
            normal: {
              color: '#ffffff',
              opacity: 1
            }
          },
          z: 1
        }, {
          name: '外圆',
          type: 'scatter',
          hoverAnimation: false,
          data: [0],
          xAxisIndex: 2,
          symbolSize: 70,
          itemStyle: {
            normal: {
              color: borderColor,
              opacity: 1
            }
          },
          z: 0
        }, {
          name: '刻度',
          type: 'bar',
          yAxisIndex: 1,
          xAxisIndex: 3,
          label: {
            normal: {
              show: true,
              position: 'right',
              distance: 5,
              color: '#fff',
              fontSize: 10,
              formatter: function(params) {
                // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                if (params.dataIndex > 100 || params.dataIndex < 30) {
                  return ''
                } else {
                  if (params.dataIndex % 5 === 0) {
                    return params.dataIndex - 30
                  } else {
                    return ''
                  }
                }
              }
            }
          },
          barGap: '-100%',
          data: kd,
          barWidth: 1,
          itemStyle: {
            normal: {
              color: borderColor,
              barBorderRadius: 10
            }
          },
          z: 0
        }]
      }
      myChart5.setOption(option)
    },
    initEcharts3(data) {
      myChart5 = echarts.init(document.querySelector('#main6'))
      const option = {
        // backgroundColor:'#0F2D5B',
        title: {
          text: '风速监测',
          show: true,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#fff'
          }
        },
        series: [
          {
            name: '外圈',
            type: 'gauge',
            min: 0,
            max: 30,
            splitNumber: 10,
            center: ['50%', '55%'],
            radius: '73%',
            axisLine: {
              lineStyle: {
                color: [[1, '#2E5BA1']],
                width: 20
              }
            },
            splitLine: {
              distance: -20,
              length: 20,
              lineStyle: {
                width: 2,
                color: '#0F2D5B'
              }
            },
            axisTick: {
              distance: -20,
              length: 5,
              lineStyle: {
                color: '#0F2D5B'
              }
            },
            axisLabel: {
              distance: -25,
              color: '#7392C1',
              fontSize: 14
            },
            anchor: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            name: '内圈',
            type: 'gauge',
            min: 0,
            max: 30,
            splitNumber: 10,
            center: ['50%', '55%'],
            radius: '65%',
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.25, '#18EC90'],
                  [0.5, '#E2DC2E'],
                  [0.75, '#E2A02E'],
                  [1, '#FE4747']
                ]
              }
            },
            silent: true,
            pointer: {
              length: '85%',
              width: 4,
              itemStyle: {
                color: 'inherit',
                borderWidth: 1,
                borderColor: 'inherit', // '#0D3778',
                shadowColor: 'inherit',
                shadowBlur: 1
              }
            },
            axisTick: {
              show: false,
              distance: -20,
              length: 5,
              lineStyle: {
                color: '#0F2D5B'
              }
            },
            splitLine: {
              distance: -20,
              length: 20,
              lineStyle: {
                width: 2,
                color: '#0F2D5B'
              }
            },
            axisLabel: {
              show: false
            },
            title: { // 仪表盘标题。
              show: true, // 是否显示标题,默认 true。
              offsetCenter: [0, '95%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: '#ccc', // 文字的颜色,默认 #333。
              fontSize: 15 // 文字的字体大小,默认 15。
            },
            detail: {
              valueAnimation: true,
              offsetCenter: [0, '70%'],
              formatter: '{value}',
              color: 'inherit', // 文字的颜色,默认 #333。
              fontSize: 20
            },
            data: [{
              name: '风速(m/s)',
              value: data.pd.WINDSPEED
            }]
          }
        ]
      }
      myChart5.setOption(option)
    },
    calculateWindDirection(angle) {
      const arr = [
        {
          directions: '北',
          minAngle: '348.76',
          maxAngle: '11.25'
        },
        {
          directions: '北东北',
          minAngle: '11.26',
          maxAngle: '33.75'
        },
        {
          directions: '东北',
          minAngle: '33.76',
          maxAngle: '56.25'
        },
        {
          directions: '东东北',
          minAngle: '56.26',
          maxAngle: '78.75'
        },
        {
          directions: '东',
          minAngle: '78.76',
          maxAngle: '101.25'
        },
        {
          directions: '东东南',
          minAngle: '101.26',
          maxAngle: '123.75'
        },
        {
          directions: '东南',
          minAngle: '123.76',
          maxAngle: '146.25'
        },
        {
          directions: '南东南',
          minAngle: '146.26',
          maxAngle: '168.75'
        },
        {
          directions: '南',
          minAngle: '168.76',
          maxAngle: '191.25'
        },
        {
          directions: '南西南',
          minAngle: '191.26',
          maxAngle: '213.75'
        },
        {
          directions: '西南',
          minAngle: '213.76',
          maxAngle: '236.25'
        },
        {
          directions: '西西南',
          minAngle: '236.26',
          maxAngle: '258.75'
        },
        {
          directions: '西',
          minAngle: '258.76',
          maxAngle: '281.25'
        },
        {
          directions: '西西北',
          minAngle: '281.26',
          maxAngle: '303.75'
        },
        {
          directions: '西北',
          minAngle: '303.76',
          maxAngle: '326.25'
        },
        {
          directions: '北西北',
          minAngle: '326.26',
          maxAngle: '348.75'
        }
      ]
      for (let i = 0; i < arr.length; i++) {
        if (+angle >= +arr[i].minAngle && +angle <= +arr[i].maxAngle) {
          return arr[i].directions + '风'
        }
      }
      return '静风'
    }
  }
}
</script>
<style lang="scss" scoped>
  #main4{
    width: 500px;
    height: 500px;
  }
  #main5{
    width: 500px;
    height: 500px;
  }
  #main6{
    width: 500px;
    height: 500px;
  }
</style>