From 6343fe4c609b57002d84b83b502899d63dd53727 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 14 Mar 2024 13:57:37 +0800 Subject: [PATCH] fix: 监测因子折线图修改 --- src/views/contrast/index.vue | 420 +++++++++++++++++++++++++++++++++++------------------------- 1 files changed, 245 insertions(+), 175 deletions(-) diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue index f238603..f57853b 100644 --- a/src/views/contrast/index.vue +++ b/src/views/contrast/index.vue @@ -1,12 +1,12 @@ -+<template> - <div style="width:100%"> +<template> + <div style="width: 100%; height: 100%; margin:0 auto"> <div class="topSelect"> <el-cascader v-model="newMac" :options="options" clearable placeholder="������������" - style="width: 354px;" + style="width: 354px" /> <el-cascader v-model="value" @@ -15,7 +15,7 @@ collapse-tags clearable placeholder="������������" - style="margin-left:20px" + style="margin-left: 20px" /> <!-- <el-select v-model="value" placeholder="������������"> <el-option @@ -28,27 +28,43 @@ <!-- <el-radio-group v-model="radio1" style="margin-left:20px"> <el-radio-button label="������" /> <el-radio-button label="������" /> --> - <!-- <el-radio-button label="������" /> + <!-- <el-radio-button label="������" /> <el-radio-button label="���������" /> --> <!-- </el-radio-group> --> - <el-select v-model="radio1" placeholder="���������" style="margin-left:20px"> + <el-select + v-model="radio1" + placeholder="���������" + style="margin-left: 20px" + > <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" - > - </el-option> + /> </el-select> - <component :is="dataType" class="select11" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" /> + <component + :is="dataType" + class="select11" + style="padding-left: 0; margin-left: 20px; width: 160px" + @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" /> + <LineChart + :chart-data="lineChartData" + style="height: 40rem;" + /> </div> </template> @@ -62,46 +78,48 @@ import HourPicker from '@/components/Form/HourPicker' import CustomPicker from '@/components/Form/CustomPicker' import json from '@/assets/json/sensor.json' - +import HourPicker1 from '@/components/Form/HourPicker1' const lineChartData = { newVisitis: { expectedData: [100, 120, 161, 134, 105, 160, 165], - actualData: [120, 82, 91, 154, 162, 140, 145] + actualData: [120, 82, 91, 154, 162, 140, 145], }, messages: { expectedData: [200, 192, 120, 144, 160, 130, 140], - actualData: [180, 160, 151, 106, 145, 150, 130] + actualData: [180, 160, 151, 106, 145, 150, 130], }, purchases: { expectedData: [80, 100, 121, 104, 105, 90, 100], - actualData: [120, 90, 100, 138, 142, 130, 130] + actualData: [120, 90, 100, 138, 142, 130, 130], }, shoppings: { expectedData: [130, 140, 141, 142, 145, 150, 160], - actualData: [120, 82, 91, 154, 162, 140, 130] - } + actualData: [120, 82, 91, 154, 162, 140, 130], + }, } export default { -// import ���������������������������������������������������props + // import ���������������������������������������������������props components: { LineChart, DatePicker, MouthPicker, HourPicker, - CustomPicker + CustomPicker, + HourPicker1, }, filters: { - sensorFilter: function(value) { + sensorFilter: function (value) { if (!value) return '' return json[value] - } + }, }, props: { // defaultData: Array }, - data() { + data () { // ������������������ return { + isYaxisSame: ['a34004', 'a34002', 'a05024', 'a21004', 'a21026'], dataType: 'HourPicker', lineChartData: lineChartData.purchases, props: { multiple: true }, @@ -113,36 +131,39 @@ // newMac2:'', newSensor: [], radio1: '������', - unit: 0, + unit: 1, type: 'select', newLineChartData: { series: [], xAxis: [], - title: '' + title: '', }, newData: '', defaultData: [], newListData: [], chartSensorName: '', middleData: [], - options1:[ - - { - label:'������', - value:'������' - } - , { - label:'������', - value:'������' - } - ] + options1: [ + { + label: '���������', + value: '���������', + }, + { + label: '������', + value: '������', + }, + { + label: '������', + value: '������', + }, + ], } }, // ������������ ���������data������ 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]) @@ -153,19 +174,22 @@ // 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 = 1 + this.unit = 3 + } else if (nv === '���������') { + this.dataType = 'HourPicker1' + this.unit = 0 } // else if (nv === '������') { // this.dataType = 'MouthPicker' @@ -174,43 +198,52 @@ // this.dataType = 'CustomPicker' // this.unit = 'hour' // } - } + }, }, // ������������ - ��������������������������������� 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', method: 'get', params: { - organizationId: this.$store.state.orgId - } + organizationId: this.$store.state.orgId, + }, }) .then((res) => { // console.log('������index������������������������') // console.log(res) this.defaultData = res.data.monitorPoints for (let i = 0; i < this.defaultData.length; i++) { - this.options.push({ value: this.defaultData[i].name, label: this.defaultData[i].name }) + this.options.push({ + value: this.defaultData[i].name, + 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, + }) + } } } }) @@ -219,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] @@ -227,111 +260,130 @@ url: '/deviceInfo/getMacSensors', method: 'post', data: { - macs: this.newMac1 - } - }).then((res) => { - // console.log(res) - this.newSensor = [] - var sensor = res.data - for (var i in sensor) { - this.newSensor.push({ value: i, label: sensor[i] }) - // this.newSensor.push({ value: '123', label: '123' }) - // this.newSensor[i].value = sensor.i - // this.newSensor[i].name = sensor[i] - } - }).catch((err) => { - console.log(err) + macs: this.newMac1, + }, }) + .then((res) => { + // console.log(res) + this.newSensor = [] + var sensor = res.data + for (var i in sensor) { + this.newSensor.push({ value: i, label: sensor[i] }) + // this.newSensor.push({ value: '123', label: '123' }) + // this.newSensor[i].value = sensor.i + // this.newSensor[i].name = sensor[i] + } + }) + .catch((err) => { + console.log(err) + }) }, // ������ - selectData() { + selectData () { var newLineChartData = { series: [], xAxis: [], - title: [] + title: [], + yAxis: [] } this.newXData = [] - this.$request({ // dataDisplay/sensorComparisonDisplayV2 + this.$request({ + // dataDisplay/sensorComparisonDisplayV2 url: '/dataDisplay/sensorComparisonDisplayV2', method: 'post', data: { mac: this.newMac1[0], sensorCodes: this.value1, reportType: this.unit, - times: this.newData - } - }).then((res) => { - // console.log('������������������������������') - console.log(res, 111) - 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++) { - 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) + times: this.newData, + }, }) + .then((res) => { + 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 + ) + } + 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++) { + 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) + } + } + 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 + }) + .catch((err) => { + console.log(err) + }) }, // ��������������������������������������������� - showPickerChild(data) { + showPickerChild (data) { // var newLineChartData = { // series: [], // xAxis: [], @@ -416,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] @@ -434,40 +496,48 @@ } }, // ������������������������ - filterSensorName() { - this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode) - } - } // ���������������keep-alive������������������������������������ + filterSensorName () { + this.chartSensorName = this.$options.filters.sensorFilter( + this.chartSensorKey[0].sensorCode + ) + }, + }, // ���������������keep-alive������������������������������������ } </script> <style scoped lang="scss"> -.topSelect{ - 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; - } +.topSelect { + 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; + +.topTitle { + display: flex; + justify-content: space-between; + margin-bottom: 20px; + padding: 0 15px; } -.btn1{ + +.btn1 { margin-left: 1%; height: 40px; } -.select11{ - width: 20% !important + +.select11 { + width: 20% !important; } -/deep/.el-date-editor .el-range-separator{ - width: 11% + +/deep/.el-date-editor .el-range-separator { + width: 11%; } </style> -- Gitblit v1.8.0