图形跳转对应参数界面功能

whyczyk

2021-10-13 a355aafef5a635bd31a701127cea097338cee0a7

 src/components/charts/monomerVoltage.vue

@@ -9,6 +9,7 @@
<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
// 单体电压、内阻和温度 页面
export default {
   name: "monomerVoltage",
@@ -44,21 +45,40 @@
      }
   },
   methods: {
      toParentPage() {
         window.parent.parent.postMessage({
            cmd: "syncPage",
            params: {
               pageInfo: {
                  label: "电池实时告警",
                  name: "batteryrTimequery",
                  src: "#/batteryrTimequery",
                  closable: true
               },
            }
         }, "*");
      toParentPage(value) {
         if (typeof (value) == 'string') {
            window.parent.parent.postMessage({
               cmd: "syncPage",
               params: {
                  pageInfo: {
                     label: "电池实时告警",
                     name: "batteryrTimequery",
                     src: "#/batteryrTimequery/?alarmType=" + value,
                     closable: true
                  },
               }
            }, "*");
         }
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
         this.$options.chart.on('click', (params) => {
            console.log(params)
            let name;
            if (params.name == '单体电压高告警' || params.name == '单体电压低告警') {
               name = '单体电压';
            } else if (params.name == '单体内阻高告警' || params.name == '单体内阻低告警') {
               name = '单体内阻';
            } else if (params.name == '单体温度高告警' || params.name == '单体温度低告警') {
               name = '单体温度';
            }
            checkboxs.dcgj.map(item => {
               if (item.label == name) {
                  console.log(name)
                  this.toParentPage(item.value)
               }
            })
         })
      },
      postData() {
         let userId = localStorage.getItem('userId');
@@ -66,29 +86,29 @@
      },
      wsMessage(res) {
         let self = this;
         let legendData = [];
         let yAxisData = [];
         let data = [];
         let Data = [{
            name: '告警数',
            type: 'bar',
            data: [],
            itemStyle: {
               normal: {
                  color: (params) => {
                     let colorList = ['#37a9b3', '#f3535f', '#ff8b00', '#757ffb', '#4ba0d9', '#7fc57c']
                     return colorList[params.dataIndex]
                  }
               },
            },
         }];
         if (res.code == 1) {
            let result = res.data;
            let index = 0;
            for (const key in result) {
               let obj = {
                  name: key,
                  type: 'bar',
                  data: []
               }
               legendData.push(key);
               for (const item in result[key]) {
                  if (index === 0) {
                     yAxisData.push(item);
                  }
                  obj.data.push(result[key][item])
                  yAxisData.push(item);
                  Data[0].data.push(result[key][item])
               }
               data.push(obj);
               index++;
            }
            self.optionSet(legendData, yAxisData, data);
            self.optionSet(yAxisData, Data);
         }
      },
      outClear() {
@@ -103,35 +123,22 @@
         if (!dataList) {
            self.postData()
         } else {
            self.optionSet(dataList.legendData, dataList.yAxisData, dataList.data);
            self.optionSet(dataList.yAxisData, dataList.data);
         }
      },
      optionSet(legendData, yAxisData, data) {
      optionSet(yAxisData, data) {
         let option = {
            // title: {
            //     text: '世界人口总量',
            //     subtext: '数据来自网络'
            // },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow'
               }
            },
            legend: {
               right: "4%",
               data: legendData,//['单体电压', '单体内阻','单体温度'],
               itemStyle: {
                  right: "0",
               },
               textStyle: {
                  color: "#fff"
               }
            },
            grid: {
               top: 20,
               right: 40,
               bottom: 20,
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
            },
            xAxis: {