From a505e8a326f7e8ce3db8b2f140fb328ecc650bfc Mon Sep 17 00:00:00 2001
From: yichenxi <yichenxi0601@163.com>
Date: Fri, 21 Apr 2023 09:14:09 +0800
Subject: [PATCH] 1、设备详情数据显示
---
src/views/contrast/index.vue | 355 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 206 insertions(+), 149 deletions(-)
diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue
index f238603..330f7ff 100644
--- a/src/views/contrast/index.vue
+++ b/src/views/contrast/index.vue
@@ -1,12 +1,12 @@
+<template>
- <div style="width:100%">
+ <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,10 +28,14 @@
<!-- <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"
@@ -40,7 +44,12 @@
>
</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 +57,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 +71,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 +128,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 +178,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,16 +190,14 @@
// this.dataType = 'CustomPicker'
// this.unit = 'hour'
// }
- }
+ },
},
// ������������ - ��������������������������������� this ���������
created() {
this.getData()
},
// ������������ - ��������������������������� DOM ���������
- mounted() {
-
- },
+ mounted() {},
beforeCreate() {}, // ������������ - ������������
beforeMount() {}, // ������������ - ������������
beforeUpdate() {}, // ������������ - ������������
@@ -199,18 +213,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 +250,140 @@
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' ,yAxisIndex:data[i].code,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 +490,41 @@
},
// ������������������������
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