From e602a20d665bc974a211f5b2c3188a9d4a335b9e Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Tue, 23 Apr 2024 15:10:35 +0800 Subject: [PATCH] fix: 监测因子向关性 --- src/views/contrast/index.vue | 241 +++++++++++++++++++++++++---------------------- 1 files changed, 127 insertions(+), 114 deletions(-) diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue index c353aff..90c79e0 100644 --- a/src/views/contrast/index.vue +++ b/src/views/contrast/index.vue @@ -1,4 +1,4 @@ -+<template> +<template> <div style="width: 100%; height: 100%; margin:0 auto"> <div class="topSelect"> <el-cascader @@ -41,8 +41,7 @@ :key="item.value" :label="item.label" :value="item.value" - > - </el-option> + /> </el-select> <component :is="dataType" @@ -51,13 +50,21 @@ @sendPickerChild="showPickerChild" /> <!--������������--> - <el-button @click="selectData" class="btn1">������</el-button> + <el-button + class="btn1" + @click="selectData" + > + ������ + </el-button> </div> <!-- <div class="topTitle"> <div style="position:absolute">(������:ug/m��)</div> <div style="text-align: center;width: 100%;">{{ newData }}��{{ newMac?newMac[0]:'' }}��{{ newMac?newMac[newMac.length - 1][0]:'' }}��{{ value |sensorFilter }}�����������</div> </div> --> - <LineChart :chart-data="lineChartData" style="height: 23rem;"/> + <LineChart + :chart-data="lineChartData" + style="height: 40rem;" + /> </div> </template> @@ -109,9 +116,10 @@ props: { // defaultData: Array }, - data() { + data () { // ������������������ return { + isYaxisSame: ['a34004', 'a34002', 'a05024', 'a21004', 'a21026'], dataType: 'HourPicker', lineChartData: lineChartData.purchases, props: { multiple: true }, @@ -123,7 +131,7 @@ // newMac2:'', newSensor: [], radio1: '������', - unit: 0, + unit: 1, type: 'select', newLineChartData: { series: [], @@ -155,7 +163,7 @@ computed: {}, // ������data������������������ watch: { - newMac(newVal, oldval) { + newMac (newVal, oldval) { this.newMac1 = [] // for (let i = 0; i < newVal.length; i++) { // this.newMac1.push(newVal[i][1][1]) @@ -166,16 +174,16 @@ // this.getSensor() // } }, - value(n, o) { + value (n, o) { this.value1 = [] for (let i = 0; i < n.length; i++) { this.value1.push(n[i][0]) } }, - radio1(nv, ov) { + radio1 (nv, ov) { if (nv === '������') { this.dataType = 'HourPicker' - this.unit = 0 + this.unit = 1 } else if (nv === '������') { this.dataType = 'DatePicker' this.unit = 3 @@ -193,24 +201,24 @@ }, }, // ������������ - ��������������������������������� this ��������� - created() { + created () { this.getData() }, // ������������ - ��������������������������� DOM ��������� - mounted() {}, - beforeCreate() {}, // ������������ - ������������ - beforeMount() {}, // ������������ - ������������ - beforeUpdate() {}, // ������������ - ������������ - updated() {}, // ������������ - ������������ - beforeDestroy() {}, // ������������ - ������������ - destroyed() {}, // ������������ - ������������ - activated() {}, + mounted () { }, + beforeCreate () { }, // ������������ - ������������ + beforeMount () { }, // ������������ - ������������ + beforeUpdate () { }, // ������������ - ������������ + updated () { }, // ������������ - ������������ + beforeDestroy () { }, // ������������ - ������������ + destroyed () { }, // ������������ - ������������ + activated () { }, // ������������ methods: { // ������������������������ - getData() { + getData () { this.$request({ - url: '/monitorPoint/queryMonitorPoints', + url: '/monitorPoint/queryMonitorPointsAvg', method: 'get', params: { organizationId: this.$store.state.orgId, @@ -226,14 +234,16 @@ label: this.defaultData[i].name, }) this.options[i].children = [] - for (let j = 0; j < this.defaultData[i].devices.length; j++) { - this.options[i].children.push({ - value: [ - this.defaultData[i].devices[j].name, - this.defaultData[i].devices[j].mac, - ], - label: this.defaultData[i].devices[j].name, - }) + if (this.defaultData[i].devices) { + for (let j = 0; j < this.defaultData[i].devices.length; j++) { + this.options[i].children.push({ + value: [ + this.defaultData[i].devices[j].name, + this.defaultData[i].devices[j].mac, + ], + label: this.defaultData[i].devices[j].name, + }) + } } } }) @@ -242,7 +252,7 @@ }) }, // ������mac��������������� - getSensor() { + getSensor () { // stringMacs.su // var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1] // this.newMac1 = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1] @@ -269,12 +279,12 @@ }) }, // ������ - selectData() { + selectData () { var newLineChartData = { series: [], xAxis: [], title: [], - yAxis:[] + yAxis: [] } this.newXData = [] this.$request({ @@ -289,8 +299,9 @@ }, }) .then((res) => { - // console.log('������������������������������') + console.log('������������������������������', res.data) const data = res.data + let yAxisList = [] for (let i = 0; i < data.length; i++) { data[i].name = this.$options.filters.sensorFilter( data[i].sensorCode @@ -299,94 +310,80 @@ for (let i = 0; i < data[0].timeValueList.length; i++) { newLineChartData.xAxis.push(data[0].timeValueList[i].time) } + for (var i = 0; i < data.length; i++) { - newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code}) - // newLineChartData.yAxis.push({}) - newLineChartData.series[i].name = data[i].name - newLineChartData.title.push(data[i].name); + if (this.isYaxisSame.includes(data[i].sensorCode)) { + yAxisList.push(data[i].name) + } else { + newLineChartData.yAxis.push( + {name: data[i].name, + code: data[i].sensorCode, + type: 'value', + position: 'left', + axisTick: { + show: true, // ������������ + }, + axisLine: { + show: true, // ��������������������� + }, + splitNumber: 4, // ������������������������������ + splitLine: { + // ��������������� + show: false, + }, + }, + ) + } + + newLineChartData.series.push({ + data: [], + name: data[i].name, + code: data[i].sensorCode, + type: 'line', + triggerLineEvent: true, + yAxisIndex: 0, + emphasis: { focus: 'series' }, + lineStyle: { width: 4 } + }) + newLineChartData.title.push(data[i].name) for (var j = 0; j < data[i].timeValueList.length; j++) { - newLineChartData.series[i].data.push(data[i].timeValueList[j].value) + newLineChartData.series[i].data.push(data[i].timeValueList[j].value) } } + if (yAxisList.length > 0) { + newLineChartData.yAxis = [ { + type: 'value', + position: 'left', + axisTick: { + show: true, // ������������ + }, + axisLine: { + show: true, // ��������������������� + }, + splitNumber: 4, // ������������������������������ + splitLine: { + // ��������������� + show: false, + }, + }, ...newLineChartData.yAxis] + } + newLineChartData.yAxis.forEach((item, index) => { + item.position = (index + 1) % 2 === 0 ? 'right' : 'left' + item.offset = this.getoffsetData(index) + }) + newLineChartData.series.forEach(item => { + item.yAxisIndex = yAxisList.includes(item.name) ? 0 : newLineChartData.yAxis.findIndex( + i => i.code && item.code === i.code + ) + }) this.lineChartData = newLineChartData - - // this.middleData = JSON.parse(JSON.stringify(res.data)) - // const data = res.data - // // ��������������� - // // ������������������ - // for (let i = 0; i < data.length; i++) { - // // ������������������������������������ - // data[i].name = this.$options.filters.sensorFilter( - // data[i].sensorCode - // ) - // // data[i].name = data[i].sensorCode - // var tempArray = [] - // for (let j = 0; j < data[i].timeValueList.length; j++) { - // tempArray.push(data[i].timeValueList[j].value) - // } - // data[i].MaxValue = this.getMaxValue(tempArray) - // data[i].sort = i - // } - // // ���������MaxValue������������ - // data.sort(this.compare('MaxValue', false)) - // // ���1��������������������������� - // var step = Math.floor((1 / data.length) * 100) / 100 - // data[0].Factor = 1 - // // ������������������������������������������������������������������������ - // for (let i = 1; i < data.length; i++) { - // // ��������������� - // var supposemMaxValue = - // data[0].MaxValue - i * step * data[0].MaxValue - // if (data[i].MaxValue < supposemMaxValue) { - // data[i].Factor = supposemMaxValue / data[i].MaxValue - // } - // } - // // ���������sort������������ - // data.sort(this.compare('sort', true)) - // // ������������������������������ - - // // for (let i = 0; i < data.length; i++) { - // // newLineChartData.series.push({ data: [], name: '', type: 'line' }) - // // newLineChartData.series[i].name = data[i].name - // // newLineChartData.title.push(data[i].name) - // // for (let j = 0; j < data[i].timeValueList.length; j++) { - // // data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor - // // newLineChartData.series[i].data.push(data[i].timeValueList[j].value) - // // } - // // } - // for (let i = 0; i < data.length; i++) { - // newLineChartData.series.push({ data: [], name: '', type: 'line' }) - // newLineChartData.series[i].name = data[i].name - // newLineChartData.title.push(data[i].name) - // for (let j = 0; j < data[i].timeValueList.length; j++) { - // // console.log(data); - // data[i].timeValueList[j].value = - // data[i].timeValueList[j].value * data[i].Factor - // newLineChartData.series[i].data.push({ value: 0, data0: 0 }) - // newLineChartData.series[i].data[j].value = - // data[i].timeValueList[j].value - // } - // } - // for (let i = 0; i < data[0].timeValueList.length; i++) { - // newLineChartData.xAxis.push(data[0].timeValueList[i].time) - // } - // // ���������tooltip������������������ - // for (let i = 0; i < this.middleData.length; i++) { - // console.log(i); - // for (let j = 0; j < this.middleData[i].timeValueList.length; j++) { - // newLineChartData.series[i].data[j].data0 = - // this.middleData[i].timeValueList[j].value - // } - // } - // this.lineChartData = newLineChartData - // console.log(newLineChartData.series[0].name); }) .catch((err) => { console.log(err) }) }, // ��������������������������������������������� - showPickerChild(data) { + showPickerChild (data) { // var newLineChartData = { // series: [], // xAxis: [], @@ -471,13 +468,23 @@ // console.log(err) // }) }, + // ������y��������������� + getoffsetData (val) { + if (val === 0 || val === 1) return 0 + if (val % 2 === 0) { + return val / 2 * 60 + } + if (val % 2 !== 0) { + return val / 3 * 60 + } + }, // ��������������� - getMaxValue(arr) { + getMaxValue (arr) { // return Math.max.apply(null, arr) return Math.max(...arr) }, // ������������������ - compare(property, desc) { + compare (property, desc) { return (a, b) => { var value1 = a[property] var value2 = b[property] @@ -489,7 +496,7 @@ } }, // ������������������������ - filterSensorName() { + filterSensorName () { this.chartSensorName = this.$options.filters.sensorFilter( this.chartSensorKey[0].sensorCode ) @@ -502,28 +509,34 @@ display: flex; margin-bottom: 20px; padding: 20px 15px 0 15px; + span:first-child { flex: 1; } + div:last-child { width: 300px; line-height: 40px; padding-left: 6px; } } + .topTitle { display: flex; justify-content: space-between; margin-bottom: 20px; padding: 0 15px; } + .btn1 { margin-left: 1%; height: 40px; } + .select11 { width: 20% !important; } + /deep/.el-date-editor .el-range-separator { width: 11%; } -- Gitblit v1.8.0