From 64b642cfbe4f34706ed40af77e51079ddf919d54 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 13 Oct 2023 16:52:43 +0800
Subject: [PATCH] fix:查询修改和表格添加
---
src/views/charts/index.vue | 522 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 395 insertions(+), 127 deletions(-)
diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue
index a93f96a..50a1083 100644
--- a/src/views/charts/index.vue
+++ b/src/views/charts/index.vue
@@ -1,5 +1,5 @@
<template>
- <div style="width:100%">
+ <div id="chartTableContent" style="width: 100%; height: 100%">
<div class="topSelect">
<!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="������������" /> -->
<el-cascader
@@ -9,33 +9,52 @@
collapse-tags
clearable
placeholder="������������"
- style="width: 354px;"
+ style="width: 354px"
/>
<!-- <div> -->
- <el-select v-model="value" placeholder="������������" style="margin-left:20px">
- <el-option
- v-for="item in newSensor"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
+ <el-select v-model="value" placeholder="������������" style="margin-left: 20px">
+ <el-option v-for="(item, index) in newSensor" :key="index" :label="item.label" :value="item.value" />
</el-select>
<!-- </div> -->
- <el-radio-group v-model="radio1" style="margin-left:20px">
+ <!-- <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-group>
- <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" />
+ </el-radio-group> -->
+ <el-select v-model="select1" placeholder="���������" style="margin-left: 20px; width: 200px">
+ <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+ </el-select>
+ <component
+ :is="dataType"
+ style="padding-left: 0; margin-left: 20px; width: 160px"
+ class="select11"
+ @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="position: absolute">{{ selectyz }}</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 style="padding: 0px 10px;margin-bottom: 50px;">
+ <el-table v-if="searchData.length>0" :data="tableData" border size="mini" style="width: 100%" max-height="250" tooltip-effect>
+ <el-table-column prop="rankingTitle" label="������" width="150" align="center">
+ <el-table-column
+ prop="rankingTitle"
+ label="������"
+ align="center"
+ width="150"
+ />
+ </el-table-column>
+ <template v-for="(th, thIndex) in thArr">
+ <el-table-column :key="thIndex" align="center" :label="th.label" :prop="th.prop" />
+ </template>
+ </el-table>
+ </div>
+
</div>
</template>
@@ -43,12 +62,16 @@
// ���������������������������������������������������������js������������������js���json������������������������������
// ���������import������������������from'������������������';
-import LineChart from '@/components/Echarts/LineChart'
+import LineChart from '@/components/Echarts/LineChart2'
import DatePicker from '@/components/Form/DatePicker'
import MouthPicker from '@/components/Form/MouthPicker'
import HourPicker from '@/components/Form/HourPicker'
+import HourPicker1 from '@/components/Form/HourPicker1'
import CustomPicker from '@/components/Form/CustomPicker'
+import CustomPicker1 from '@/components/Form/CustomPicker1'
+import TimePicker1 from '@/components/Form/TimePicker1'
import json from '@/assets/json/sensor.json'
+import _ from 'lodash'
const lineChartData = {
newVisitis: {
@@ -69,13 +92,16 @@
}
}
export default {
-// import ���������������������������������������������������
+ // import ���������������������������������������������������
components: {
LineChart,
DatePicker,
MouthPicker,
HourPicker,
- CustomPicker
+ CustomPicker,
+ CustomPicker1,
+ TimePicker1,
+ HourPicker1
},
filters: {
sensorFilter: function(value) {
@@ -94,13 +120,13 @@
props: { multiple: true },
options: [],
value: '',
- // value1: '',
+ select1: '������',
+ selectyz: '(������:ug/m��)',
newMac: '',
newMac1: [],
- // newMac2:'',
- newSensor: [], /* ������������ */
+ newSensor: [] /* ������������ */,
radio1: '������',
- unit: 'hour',
+ unit: 'day',
type: 'select',
newLineChartData: {
series: [],
@@ -110,11 +136,64 @@
newData: '',
defaultData: [],
medium: '',
- isSelect: false
+ isSelect: false,
+ options1: [
+ {
+ label: '������������',
+ value: '������������'
+ },
+ {
+ label: '���������',
+ value: '���������'
+ },
+ {
+ label: '������',
+ value: '������'
+ },
+ {
+ label: '������',
+ value: '������'
+ }
+ ],
+ searchData: []
}
},
// ������������ ���������data������
- computed: {},
+ computed: {
+ thArr() {
+ const data = []
+ if (this.searchData.length > 0) {
+ this.searchData.forEach((item, index) => {
+ data.push({
+ label: item.time,
+ name: item.time,
+ prop: 'souceData' + index
+ })
+ })
+ console.log(data)
+ }
+ return data
+ },
+ tableData() {
+ const data = []
+ const souceData = []
+ const firstData = []
+ const fobj = {}
+ const sobj = {}
+ if (this.searchData.length > 0) {
+ this.searchData.forEach((item, index) => {
+ fobj['souceData' + index] = this.sortFind(item.deviceData)[0].name
+ sobj['souceData' + index] = this.sortFind(item.deviceData)[1].name
+ })
+ }
+ const a = [...firstData]
+ data.push({ ...fobj, rankingTitle: '������������' }, { ...sobj, rankingTitle: '������������' })
+ console.log('firstData', fobj)
+ console.log('souceData', sobj)
+ console.log('datadatadata', data)
+ return data
+ }
+ },
// ������data������������������
watch: {
// ���������������������������
@@ -128,19 +207,69 @@
this.getSensor()
},
// ������dataType���������������
- radio1(nv, ov) {
+ select1(nv, ov) {
if (nv === '������') {
this.dataType = 'HourPicker'
- this.unit = 'hour'
+ this.unit = 'day'
} else if (nv === '������') {
this.dataType = 'DatePicker'
- this.unit = 'day'
+ this.unit = 'month'
} else if (nv === '������') {
this.dataType = 'MouthPicker'
this.unit = 'month'
+ } else if (nv === '���������') {
+ this.dataType = 'HourPicker1'
+ this.unit = 'hour'
+ } else if (nv === '������������') {
+ this.dataType = 'HourPicker1'
+ this.unit = 'FiveMinute'
} else {
this.dataType = 'CustomPicker'
this.unit = 'hour'
+ }
+ },
+ value(one, two) {
+ if (
+ one === 'a34004' ||
+ one === 'a34002' ||
+ one === 'a21004' ||
+ one === 'a21026' ||
+ one === 'a05024'
+ ) {
+ this.selectyz = '(������:ug/m��)'
+ } else if (
+ one === 'a21005' ||
+ one === 'a99054' ||
+ one === 'a31001' ||
+ one === 'a24088'
+ ) {
+ this.selectyz = '(������:mg/m��)'
+ } else if (one === 'a01001') {
+ this.selectyz = '(������:���)'
+ } else if (one === 'a01002') {
+ this.selectyz = '(������:%)'
+ } else if (one === 'a01007') {
+ this.selectyz = '(������:m/s)'
+ } else if (one === 'a01008') {
+ this.selectyz = '(������:���)'
+ } else if (one === 'a01006') {
+ this.selectyz = '(������:hpa)'
+ } else if (one === 'a00e12') {
+ this.selectyz = '(������:lux)'
+ } else if (one === 'a19002') {
+ this.selectyz = '(������:���)'
+ } else if (one === 'a00e03' || one === 'a00e04') {
+ this.selectyz = '(������:pcs/0.1L)'
+ } else if (one === 'a00e13') {
+ this.selectyz = '(������:db)'
+ } else if (
+ one === 'a21028' ||
+ one === 'a25002' ||
+ one === 'a21001' ||
+ one === 'a25005' ||
+ one === 'a25003'
+ ) {
+ this.selectyz = '(������:ppm)'
}
}
},
@@ -152,17 +281,90 @@
// mounted() {
//
// },
- beforeCreate() {}, // ������������ - ������������
- beforeMount() {}, // ������������ - ������������
- beforeUpdate() {}, // ������������ - ������������
- updated() {}, // ������������ - ������������
- beforeDestroy() {}, // ������������ - ������������
- destroyed() {}, // ������������ - ������������
- activated() {},
+ beforeCreate() { }, // ������������ - ������������
+ beforeMount() { }, // ������������ - ������������
+ beforeUpdate() { }, // ������������ - ������������
+ updated() { }, // ������������ - ������������
+ beforeDestroy() { }, // ������������ - ������������
+ destroyed() { }, // ������������ - ������������
+ activated() { },
// ������������
methods: {
+ sortFind(data) {
+ let arr = []
+ let a = ''
+ let b = ''
+ // const duplicateValue = _.orderBy(this.refrain(data), ['sensorValue'], ['desc']) // ���������������
+ // console.log('duplicateValue', duplicateValue)
+ const originalValue = _.orderBy(data, ['sensorValue'], ['desc'])
+ const firstIndex = []
+ const fiestDateList = []
+ const secondeIndex = []
+ const secondeDateList = []
+ console.log('originalValue', originalValue)
+ if ((Number(originalValue[0].sensorValue) === Number(0))) {
+ return [{ name: '/' }, { name: '/' }]
+ }
+ originalValue.forEach((value, inx) => {
+ if ((Number(originalValue[0].sensorValue) === Number(value.sensorValue))) {
+ firstIndex.push(inx)
+ }
+ })
+
+ if (firstIndex.length > 1) {
+ firstIndex.forEach(item => {
+ a += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
+ })
+ fiestDateList.push({
+ name: a
+ })
+ // ������������
+ const secondInd = firstIndex[firstIndex.length - 1]
+ originalValue.forEach((value, inx) => {
+ if ((Number(originalValue[secondInd].sensorValue) === Number(value.sensorValue))) {
+ secondeIndex.push(inx)
+ }
+ })
+ secondeIndex.forEach(item => {
+ b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
+ })
+ secondeDateList.push({
+ name: b
+ })
+ } else if (firstIndex.length <= 1) {
+ fiestDateList.push({
+ name: (originalValue[0].name).replace(/\s+/g, '') + '(' + originalValue[0].sensorValue + ')'
+ })
+ if (originalValue.length > 1) {
+ originalValue.forEach((value, inx) => {
+ if ((Number(originalValue[1].sensorValue) === Number(value.sensorValue))) {
+ secondeIndex.push(inx)
+ }
+ })
+ secondeIndex.forEach(item => {
+ b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
+ })
+ secondeDateList.push({
+ name: b
+ })
+ }
+ }
+ console.log('fiestDateList', fiestDateList)
+ console.log('secondeDateList', secondeDateList)
+ arr = fiestDateList.concat(secondeDateList)
+ console.log('arr', arr)
+ return arr
+ // console.log('refrainrefrainrefrain', this.refrain(data))
+ // const arr = []
+ // const duplicates = data.filter(item => data.indexOf(item) !== data.lastIndexOf(item))
+ // unUnit.forEach(item => {
+ // _.find(data, function(o) { return Number(item.sensorValue) === Number(o.sensorValue) })
+ // arr.push()
+ // })
+ },
// ������������
selectData() {
+ console.log(this.newData)
var newLineChartData = {
series: [],
xAxis: [],
@@ -179,29 +381,55 @@
// times: data instanceof Array ? data : [data]
times: this.newData instanceof Array ? this.newData : [this.newData]
}
- }).then((res) => {
- // console.log('������������������������������')
- // console.log(res)
- const data = res.data
- let lockLength = 0
- for (let i = 0; i < data.length; i++) {
- for (let j = 0; j < data[i].deviceData.length; j++) {
- if (lockLength < data[i].deviceData.length) {
- newLineChartData.series.push({ data: [], name: '', type: 'line' })
+ })
+ .then((res) => {
+ // console.log('������������������������������')
+ this.searchData = _.cloneDeep(res.data)
+ const data = _.cloneDeep(res.data)
+ console.log('this.se', this.searchData)
+ const lockLength = 0
+ for (let i = 0; i < data.length; i++) {
+ for (let j = 0; j < data[i].deviceData.length; j++) {
+ if (res.data[0].deviceData.length === 1) {
+ if (lockLength < data[i].deviceData.length) {
+ newLineChartData.series.push({
+ data: [],
+ triggerLineEvent: true,
+ emphasis: {
+ focus: 'series'
+ },
+ name: '',
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top'
+ }
+ })
+ }
+ } else {
+ newLineChartData.series.push({
+ data: [],
+ name: '',
+ triggerLineEvent: true,
+ emphasis: { focus: 'series' },
+ type: 'line'
+ })
+ }
newLineChartData.series[j].name = data[i].deviceData[j].name
newLineChartData.title.push(data[i].deviceData[j].name)
+ newLineChartData.series[j].data.push(
+ data[i].deviceData[j].sensorValue
+ )
}
- lockLength++
- newLineChartData.series[j].data.push(data[i].deviceData[j].sensorValue)
+ newLineChartData.xAxis.push(data[i].time)
}
- newLineChartData.xAxis.push(data[i].time)
- }
- // newLineChartData.title = this.value
- this.lineChartData = newLineChartData
- // console.log(newLineChartData, 'newLineChartData')
- }).catch((err) => {
- console.log(err)
- })
+ // newLineChartData.title = this.value
+ this.lineChartData = newLineChartData
+ console.log(lineChartData, 'newLineChartData')
+ })
+ .catch((err) => {
+ console.log(err)
+ })
},
// ������������������������
getData() {
@@ -214,14 +442,22 @@
})
.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 = []
- 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 })
- }
+ 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
+ })
}
}
})
@@ -231,6 +467,7 @@
},
// ���������������������������������
getSensor() {
+ this.newSensor = []
// 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]
@@ -240,88 +477,119 @@
data: {
macs: this.newMac1
}
- }).then((result) => {
- // console.log(result)
- // this.newSensor = []
- var sensor = result.data
- for (var i in sensor) {
- this.newSensor.push({ value: i, label: sensor[i] })
- // this.newSensor[i].value = sensor.i
- // this.newSensor[i].name = sensor[i]
- }
- }).catch((err) => {
- console.log(err)
})
+ .then((result) => {
+ // console.log(result)
+ // this.newSensor = []
+ var sensor = result.data
+ for (var i in sensor) {
+ this.newSensor.push({ value: i, label: sensor[i] })
+ // this.newSensor[i].value = sensor.i
+ // this.newSensor[i].name = sensor[i]
+ }
+ })
+ .catch((err) => {
+ console.log(err)
+ })
},
// ���������������������������������������������
showPickerChild(data) {
- // console.log(data)
- // var newLineChartData = {
- // series: [],
- // xAxis: [],
- // title: []
- // }
this.newData = data
- // this.newXData = []
- // this.$request({
- // url: '/deviceInfo/getTrendChartData',
- // method: 'post',
- // data: {
- // macs: this.newMac1,
- // sensorCode: this.value,
- // type: this.unit,
- // // times: data instanceof Array ? data : [data]
- // times: this.newData instanceof Array ? this.newData : [this.newData]
- // }
- // }).then((res) => {
- // console.log('������������������������������')
- // console.log(res)
- // // if(res.)
- // const data = res.data
- // let lockLength = 0
- // for (let i = 0; i < data.length; i++) {
- // for (let j = 0; j < data[i].deviceData.length; j++) {
- // if (lockLength < data[i].deviceData.length) {
- // newLineChartData.series.push({ data: [], name: '', type: 'line' })
- // newLineChartData.series[j].name = data[i].deviceData[j].name
- // newLineChartData.title.push(data[i].deviceData[j].name)
- // }
- // lockLength++
- // newLineChartData.series[j].data.push(data[i].deviceData[j].sensorValue)
- // }
- // newLineChartData.xAxis.push(data[i].time)
- // }
- // // newLineChartData.title = this.value
- // this.lineChartData = newLineChartData
- // }).catch((err) => {
- // console.log(err)
- // })
}
} // ���������������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;
- }
+#chartTableContent{
+ overflow-y: scroll;
+ overflow-x: hidden;
}
-.topTitle{
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
- padding: 0 15px;
+.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;
+ }
}
-.btn1{
+
+.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%;
+}
+/*::v-deep ���������������������������������������������element���������������*/
+::v-deep .el-table thead.is-group th {
+ background: none;
+ padding: 0px;
+}
+
+::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
+ border-bottom: none; /*���������������������*/
+}
+
+::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
+ text-align: right; /*������������������*/
+}
+
+::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
+ text-align: left; /*������������������*/
+}
+/*������������*/
+::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
+ content: "";
+ position: absolute;
+ width: 1px;
+ height: 100px; /*���������������*/
+ top: 0;
+ left: 0;
+ background-color: grey;
+ opacity: 0.2;
+ display: block;
+ transform: rotate(-43deg); /*���������������������*/
+ transform: rotate(-70deg); /*���������������������*/
+ -webkit-transform-origin: top;
+ transform-origin: top;
+}
+
+::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
+ content: "";
+ position: absolute;
+ width: 1px;
+ height: 100px; /*���������������*/
+ bottom: 0;
+ right: 0;
+ background-color: grey;
+ opacity: 0.2;
+ display: block;
+ transform: rotate(-45deg); /*���������������������*/
+ transform: rotate(-70deg); /*���������������������*/
+ -webkit-transform-origin: bottom;
+ transform-origin: bottom;
+}
+::v-deep .el-table thead.is-group th {
+ height: 27.4px;
+}
+
</style>
--
Gitblit v1.8.0