From 6d21dd8cdb40c6734c90f6a4a180cc00bae53e20 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 15 Nov 2023 08:39:43 +0800 Subject: [PATCH] Merge branch 'feature_1.0' --- src/views/contrast/index.vue | 394 +++++++++++++++++++++++++++++++------------------------- 1 files changed, 217 insertions(+), 177 deletions(-) diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue index f238603..ebe8eb3 100644 --- a/src/views/contrast/index.vue +++ b/src/views/contrast/index.vue @@ -1,22 +1,9 @@ -+<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;" - /> - <el-cascader - v-model="value" - :options="newSensor" - :props="props" - collapse-tags - clearable - placeholder="������������" - style="margin-left:20px" - /> + <el-cascader v-model="newMac" :options="options" clearable placeholder="������������" style="width: 354px" /> + <el-cascader v-model="value" :options="newSensor" :props="props" collapse-tags clearable placeholder="������������" + style="margin-left: 20px" /> <!-- <el-select v-model="value" placeholder="������������"> <el-option v-for="item in newSensor" @@ -28,19 +15,15 @@ <!-- <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-option - v-for="item in options1" - :key="item.value" - :label="item.label" - :value="item.value" - > + <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> </div> @@ -48,7 +31,7 @@ <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,39 +45,40 @@ 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 @@ -118,24 +102,27 @@ newLineChartData: { series: [], xAxis: [], - title: '' + title: '', }, newData: '', defaultData: [], newListData: [], chartSensorName: '', middleData: [], - options1:[ - - { - label:'������', - value:'������' - } - , { - label:'������', - value:'������' - } - ] + options1: [ + { + label: '���������', + value: '���������', + }, + { + label: '������', + value: '������', + }, + { + label: '������', + value: '������', + }, + ], } }, // ������������ ���������data������ @@ -165,7 +152,10 @@ this.unit = 0 } 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,23 +164,21 @@ // this.dataType = 'CustomPicker' // this.unit = 'hour' // } - } + }, }, // ������������ - ��������������������������������� this ��������� created() { this.getData() }, // ������������ - ��������������������������� DOM ��������� - mounted() { - - }, - beforeCreate() {}, // ������������ - ������������ - beforeMount() {}, // ������������ - ������������ - beforeUpdate() {}, // ������������ - ������������ - updated() {}, // ������������ - ������������ - beforeDestroy() {}, // ������������ - ������������ - destroyed() {}, // ������������ - ������������ - activated() {}, + mounted() { }, + beforeCreate() { }, // ������������ - ������������ + beforeMount() { }, // ������������ - ������������ + beforeUpdate() { }, // ������������ - ������������ + updated() { }, // ������������ - ������������ + beforeDestroy() { }, // ������������ - ������������ + destroyed() { }, // ������������ - ������������ + activated() { }, // ������������ methods: { // ������������������������ @@ -199,18 +187,27 @@ 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 }) + 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, + }) } } }) @@ -227,108 +224,143 @@ 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() { 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('������������������������������') + const data = res.data + 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++) { + newLineChartData.series.push({ + data: [], name: '', type: 'line', triggerLineEvent: true, + emphasis: { focus: 'series' }, lineStyle: { width: 4 } + }) + // newLineChartData.yAxis.push({}) + newLineChartData.series[i].name = data[i].name + 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) + } + } + 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) { @@ -435,39 +467,47 @@ }, // ������������������������ filterSensorName() { - this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode) - } - } // ���������������keep-alive������������������������������������ + 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