guan_client/src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

<template>
  <div class="yuzhi-curve-module">
    <common-title title="预制曲线"></common-title>
    <div class="visualization-common-border">
      <div ref="yuzhiCurve" class="h100"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import commonTitle from '../components/commonTitle.vue'
import { setMax } from "../components/common.js";

var moniData = [
  {
    circname:"内部循环1",
    begintime: '00:00',
    endtime: '00:40',
    sections:[
      {secname:0,temperature:'50.0',humidity:'78.0',time:"00:00"},
      {secname:1,temperature:'40.0',humidity:'78.0',time:"00:20"},
      {secname:2,temperature:'40.0',humidity:'58.0',time:"00:40"}
    ],
  },
  {
    circname:"内部循环2",
    begintime: '00:50',
    endtime: '01:10',
    sections:[
      {secname:4,temperature:'40.0',humidity:'-58.0',time:"00:50"},
      {secname:5,temperature:'60.0',humidity:'-88.0',time:"01:10"}
    ]
  },
]
export default {
  components: { commonTitle },
  name: '',
  props: {
    data: {
      type: Array,
      default: function(){
        return [] // 使用工厂函数返回默认值
      }
    }
  },
  data () {
    return {
      chooseXunhuan: {
        circname: '',
        begintime: '',
        endtime: ''
      },
      uEcharts: null,
      uOption: null,
      legendData: [
        { name: '辐射强度值', value: 9000 },
        { name: '温度实值', value: 50 },
        { name: '湿度实值', value: 60.3 },
      ],
      fusheData: [],
      wenduData: [],
      shiduData: [],
      timeData: [],
      // fusheData: [150, 230, 224, 218, 135, 147, 260],
      // wenduData: [50, 60, 60, 70, 50, 50, 60],
      // shiduData: [40, 70, 70, 40, 40, 50, 50],
      // timeData: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue){
        console.log('预制曲线', newValue, oldValue)
        this.refreshData(newValue)
      },
      // immediate: true,
      deep: true
    },
    'chooseXunhuan.circname': {
      handler(newValue, oldValue){
        if(newValue){
          this.changeXunhuan(newValue)
        }
      },
      // immediate: true,
      deep: true
    },
  },
  created () {
    // this.changeData(moniData)
  },
  mounted () {
    this.$nextTick(() => {
      this.initYuzhiCurve()
    })
  },
  methods: {
    initYuzhiCurve(){
      var _this = this
      var maxa = Math.max.apply(null, this.fusheData)
      var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
      this.uEcharts = echarts.init(this.$refs.yuzhiCurve);
      this.uOption = {
        color: ['#0102c8', '#cfa809', '#49e4e9'], // legend对应颜色
        grid: {
          top: '80',
          left: '46',
          bottom: '40'
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false }, // 横坐标刻度
          boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
          axisLine: { // 横坐标线样式
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
          axisLabel: {
            textStyle: { // 坐标轴文字
              color: '#fff'
            }
          },
          data: _this.timeData
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: { // 纵坐标样式
              textStyle: {
                color: '#fff',
              }
            },
            splitLine: { // 网格线
              show: true, // 是否显示
              lineStyle: { // 网格线样式
                color: 'rgba(255,255,255,.1)', // 网格线颜色
                width: 1, //网格线的加粗程度
                // type: 'dashed' // 网格线类型 dashed:虚线
              }
            },
            name: '光照强度W/㎡', // 刻度
            nameTextStyle: {
              color: '#fff',
              padding: [0, 0, 0, 20],
            },
            alignTicks: true,
            // min: 0,
            // max: setMax(maxa),
            // interval: setMax(maxa) / 5,
          },
          {
            type: 'value',
            axisLabel: { // 纵坐标样式
              textStyle: {
                color: '#fff',
              }
            },
            splitLine: { // 网格线
              show: true, // 是否显示
              lineStyle: { // 网格线样式
                color: 'rgba(255,255,255,.1)', // 网格线颜色
                width: 1, //网格线的加粗程度
                // type: 'dashed' // 网格线类型 dashed:虚线
              }
            },
            name: '温湿度值/℃/%', // 刻度
            nameTextStyle: {
              color: '#fff',
              // padding: [0, 0, 0, 20],
            },
            alignTicks: true,
            // min: 0,
            // max: setMax(maxb),
            // interval: setMax(maxb) / 5,
          },
        ],
        legend: {
          icon: "roundRect", // 样式改为方形rect，改为圆角方形roundRect
          itemWidth: 14, // 宽度
          itemHeight: 6, // 高度
          textStyle: {
            color: '#fff',
            fontSize: 11
          },
          top: '15',
          // 使用回调函数:加上数值方法
          // formatter: function (name) {
          //   console.log(name)
          //   var currentObj = _this.legendData.find(item => item.name === name)
          //   return name + '：' + currentObj.value;
          // },
          data: _this.legendData.map(item => item.name),
        },
        series: [
          {
            name: '辐射强度值',
            type: 'line',
            // symbol: 'circle',
            // symbolSize: 2,
            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
            // itemStyle: { // symbol样式
            //   normal: {
            //     color: 'rgb(255, 255, 255)',
            //     borderColor: 'rgba(255, 255, 255, 0.2)', // symbol边框颜色
            //     borderWidth: 12 // symbol边框宽度
            //   }
            // },
            lineStyle: { // 线条样式
              normal: {
                width: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                  {
                    offset: 0,
                    color: 'rgb(1, 2, 200, 0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(1, 2, 200)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 2, 200, 0)'
                  }
                ])
              }
            },
            data: _this.fusheData,
          },
          {
            name: '温度实值',
            type: 'line',
            yAxisIndex: 1, // 关联第几个y轴
            showSymbol: false,
            lineStyle: { // 线条样式
              normal: {
                width: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                  {
                    offset: 0,
                    color: 'rgba(207, 168, 9, .5)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(207, 168, 9)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(207, 168, 9, .5)'
                  }
                ])
              }
            },
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
              data: [
                [
                  {
                    name: _this.chooseXunhuan.circname,
                    xAxis: _this.chooseXunhuan.begintime
                  },
                  {
                    xAxis: _this.chooseXunhuan.endtime
                  }
                ],
              ]
            },
            data: _this.wenduData,
          },
          {
            name: '湿度实值',
            type: 'line',
            yAxisIndex: 1, // 关联第几个y轴
            showSymbol: false,
            lineStyle: { // 线条样式
              normal: {
                width: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                  {
                    offset: 0,
                    color: 'rgba(73, 228, 233, .5)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(73, 228, 233)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(73, 228, 233, .5)'
                  }
                ])
              }
            },
            data: _this.shiduData,
          }
        ]
      };
      this.uOption && this.uEcharts.setOption(this.uOption)
      window.addEventListener("resize", ()=>{
        this.uEcharts.resize();
      });
    },
    // 数据刷新时
    refreshData(data){
      console.log('预制曲线数据', data)
      this.wenduData = []
      this.shiduData = []
      this.timeData = []
      data.forEach(element => {
        var itemWenduArr = element.sections.map(item => {
          return item.temperature
        })
        var itemShiduArr = element.sections.map(item => {
          return item.humidity
        })
        var itemTimeArr = element.sections.map(item => {
          return item.time
        })
        this.wenduData = [...this.wenduData, ...itemWenduArr]
        this.shiduData = [...this.shiduData, ...itemShiduArr]
        this.timeData = [...this.timeData, ...itemTimeArr]
        // console.log(this.wenduData)
        // console.log(this.shiduData)
      });
      var _this = this
      this.uOption.xAxis.data = this.timeData
      this.uOption.series.forEach(item => {
        switch (item.name) {
          case '辐射强度值':
            item.data = _this.fusheData
            break;
          case '温度实值':
            item.data = _this.wenduData
            break;
          case '湿度实值':
            item.data = _this.shiduData
            break;
        
          default:
            break;
        }
      })
      // this.uEcharts.clear()
      this.uEcharts.setOption(this.uOption, true);
      // this.uEcharts.setOption({
      //   xAxis: {
      //     data: _this.timeData
      //   },
      //   series: [
      //     {
      //       name: '辐射强度值',
      //       data: _this.fusheData
      //     },
      //     {
      //       name: '温度实值',
      //       data: _this.wenduData
      //     },
      //     {
      //       name: '湿度实值',
      //       data: _this.shiduData
      //     },
      //   ]
      // });
    },
    // 点击循环改变高亮
    changeXunhuan(data){
      var value = this.data.find(item => item.circname === data)
      console.log(value)
      if(value){
        this.chooseXunhuan.circname = value.circname
        this.chooseXunhuan.begintime = value.begintime
        this.chooseXunhuan.endtime = value.endtime
      } else {
        this.chooseXunhuan.circname = ''
        this.chooseXunhuan.begintime = ''
        this.chooseXunhuan.endtime = ''
      }
      console.log(this.chooseXunhuan)
      var _this = this
      this.uEcharts.setOption({
        series: [
          {
            name: '温度实值',
            markArea: {
              itemStyle: {
                color: 'rgba(67, 172, 225, 0.4)'
                // color: 'rgba(255, 173, 177, 0.4)'
              },
              data: [
                [
                  {
                    name: _this.chooseXunhuan.circname,
                    xAxis: _this.chooseXunhuan.begintime
                  },
                  {
                    xAxis: _this.chooseXunhuan.endtime
                  }
                ],
              ]
            },
          },
        ]
      });
    },
  }
}
</script>

<style scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less">
  .yuzhi-curve-module{
    width: 100%;
    height: 100%;
  }
</style>