From afba734a17b1b6cadfe85c87c01a891be95c5e6b Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 21 Nov 2023 10:43:06 +0800
Subject: [PATCH] fix:立行立改
---
src/views/charts/index.vue | 372 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 313 insertions(+), 59 deletions(-)
diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue
index e24a91d..9172a88 100644
--- a/src/views/charts/index.vue
+++ b/src/views/charts/index.vue
@@ -1,5 +1,5 @@
<template>
- <div style="width: 100%; height: 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
@@ -41,23 +41,73 @@
:key="item.value"
:label="item.label"
:value="item.value"
- >
- </el-option>
+ />
</el-select>
<component
:is="dataType"
style="padding-left: 0; margin-left: 20px; width: 160px"
- @sendPickerChild="showPickerChild"
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">{{ selectyz }}</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" style="height: 45rem" />
+ <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="dark"
+ >
+ <el-table-column
+ prop="rankingTitle"
+ label="������"
+ width="100"
+ align="center"
+ fixed="left"
+ >
+ <el-table-column
+ prop="rankingTitle"
+ class-name="rankingTitle"
+ label="������"
+ align="center"
+ width="100"
+ fixed="left"
+ />
+ </el-table-column>
+ <template v-for="(th, thIndex) in thArr">
+ <el-table-column
+ :key="thIndex"
+ align="center"
+ :label="th.label"
+ :prop="th.prop"
+ :show-overflow-tooltip="true"
+ min-width="120"
+ >
+ <template slot-scope="scope">
+ <div
+ style="
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ "
+ v-html="scope.row[th.prop]"
+ />
+ </template>
+ </el-table-column>
+ </template>
+ </el-table>
+ </div>
</div>
</template>
@@ -74,24 +124,25 @@
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: {
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 ���������������������������������������������������
@@ -103,18 +154,18 @@
CustomPicker,
CustomPicker1,
TimePicker1,
- HourPicker1,
+ HourPicker1
},
filters: {
sensorFilter: function (value) {
- if (!value) return ''
+ if (!value) { return '' }
return json[value]
- },
+ }
},
props: {
// defaultData: Array
},
- data() {
+ data () {
// ������������������
return {
dataType: 'HourPicker',
@@ -133,38 +184,70 @@
newLineChartData: {
series: [],
xAxis: [],
- title: '',
+ title: ''
},
newData: '',
defaultData: [],
medium: '',
isSelect: false,
options1: [
- {
+ {
label: '������������',
- value: '������������',
+ value: '������������'
},
{
label: '���������',
- value: '���������',
+ value: '���������'
},
{
label: '������',
- value: '������',
+ value: '������'
},
{
label: '������',
- value: '������',
- },
+ 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 fobj = {}
+ const sobj = {}
+ if (this.searchData.length > 0) {
+ this.searchData.forEach((item, index) => {
+ if (item.deviceData.length > 0) {
+ fobj['souceData' + index] = this.sortFind(item.deviceData)[0].name
+ sobj['souceData' + index] = this.sortFind(item.deviceData)[1]?.name ? this.sortFind(item.deviceData)[1]?.name : '--'
+ }
+
+ })
+ }
+ data.push({ ...fobj, rankingTitle: '������������' }, { ...sobj, rankingTitle: '������������' })
+ return data
+ }
+ },
// ������data������������������
watch: {
// ���������������������������
- newMac(newVal, oldval) {
+ newMac (newVal, oldval) {
this.newMac1 = []
for (let i = 0; i < newVal.length; i++) {
// console.log(newVal[i], 111)
@@ -174,7 +257,7 @@
this.getSensor()
},
// ������dataType���������������
- select1(nv, ov) {
+ select1 (nv, ov) {
if (nv === '������') {
this.dataType = 'HourPicker'
this.unit = 'day'
@@ -195,7 +278,7 @@
this.unit = 'hour'
}
},
- value(one, two) {
+ value (one, two) {
if (
one === 'a34004' ||
one === 'a34002' ||
@@ -238,32 +321,117 @@
) {
this.selectyz = '(������:ppm)'
}
- },
+ }
},
// ������������ - ��������������������������������� this ���������
- created() {
+ created () {
this.getData()
},
// ������������ - ��������������������������� DOM ���������
// 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)
+ let allData = data.map(item => {
+ if (item.sensorValue !== null) {
+ return item
+ } else {
+ item.sensorValue = '0.0'
+ return item
+ }
+
+ })
+
+ const originalValue = _.orderBy(allData, ['sensorValue'], ['desc'])
+ const firstIndex = []
+ const fiestDateList = []
+ const secondeIndex = []
+ const secondeDateList = []
+ console.log('allData', allData)
+ 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) {
+ a = "<span class='numColor'>" + originalValue[firstIndex[0]].sensorValue + '</span> ' + "<span class='numName'>("
+ firstIndex.forEach((item, index) => {
+ a += (originalValue[item].name).replace(/\s+/g, '') + (index === firstIndex.length - 1 ? '' : ',')
+ })
+ a += ')</span>'
+ 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)
+ }
+ })
+ b = "<span class='numColor'>" + originalValue[secondeIndex[0]].sensorValue + '</span> ' + "<span class='numName'>("
+ secondeIndex.forEach((item, index) => {
+ b += (originalValue[item].name).replace(/\s+/g, '') + (index === secondeIndex.length - 1 ? '' : ',')
+ })
+ b += ')</span>'
+ secondeDateList.push({
+ name: b
+ })
+ } else if (firstIndex.length <= 1) {
+ fiestDateList.push({
+ name: "<span class='numColor'>" + originalValue[0].sensorValue + '</span> (' + (originalValue[0].name).replace(/\s+/g, '') + ')'
+ })
+ if (originalValue.length > 1) {
+ originalValue.forEach((value, inx) => {
+ if ((Number(originalValue[1].sensorValue) === Number(value.sensorValue))) {
+ secondeIndex.push(inx)
+ }
+ })
+ b = "<span class='numColor'>" + originalValue[secondeIndex[0]].sensorValue + '</span> ' + "<span class='numName'>("
+ secondeIndex.forEach((item, index) => {
+ b += (originalValue[item].name).replace(/\s+/g, '') + (index === secondeIndex.length - 1 ? '' : ',')
+ })
+ b += ')</span>'
+ secondeDateList.push({
+ name: b
+ })
+ }
+ }
+ arr = fiestDateList.concat(secondeDateList)
+ 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() {
+ selectData () {
console.log(this.newData)
var newLineChartData = {
series: [],
xAxis: [],
- title: [],
+ title: []
}
this.newXData = []
this.$request({
@@ -274,34 +442,40 @@
sensorCode: this.value,
type: this.unit,
// times: data instanceof Array ? data : [data]
- times: this.newData instanceof Array ? this.newData : [this.newData],
- },
+ times: this.newData instanceof Array ? this.newData : [this.newData]
+ }
})
.then((res) => {
// console.log('������������������������������')
- const data = res.data
- let lockLength = 0
+ 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: [],
- // large: true,
+ triggerLineEvent: true,
+ emphasis: {
+ focus: 'series'
+ },
name: '',
type: 'line',
label: {
show: true,
- position: 'top',
- },
+ position: 'top'
+ }
})
}
} else {
newLineChartData.series.push({
data: [],
name: '',
- // large: true,
- type: 'line',
+ triggerLineEvent: true,
+ emphasis: { focus: 'series' },
+ type: 'line'
})
}
newLineChartData.series[j].name = data[i].deviceData[j].name
@@ -321,13 +495,13 @@
})
},
// ������������������������
- 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������������������������')
@@ -336,16 +510,16 @@
for (let i = 0; i < this.defaultData.length; i++) {
this.options.push({
value: this.defaultData[i].name,
- label: 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,
+ this.defaultData[i].devices[j].mac
],
- label: this.defaultData[i].devices[j].name,
+ label: this.defaultData[i].devices[j].name
})
}
}
@@ -355,7 +529,7 @@
})
},
// ���������������������������������
- getSensor() {
+ getSensor () {
this.newSensor = []
// stringMacs.su
// var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1]
@@ -364,8 +538,8 @@
url: '/deviceInfo/getMacSensors',
method: 'post',
data: {
- macs: this.newMac1,
- },
+ macs: this.newMac1
+ }
})
.then((result) => {
// console.log(result)
@@ -382,32 +556,40 @@
})
},
// ���������������������������������������������
- showPickerChild(data) {
+ showPickerChild (data) {
this.newData = data
- },
- }, // ���������������keep-alive������������������������������������
+ }
+ } // ���������������keep-alive������������������������������������
}
</script>
<style scoped lang="scss">
+#chartTableContent {
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
.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;
}
+
.btn1 {
margin-left: 1%;
height: 40px;
@@ -416,7 +598,79 @@
.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(299deg); /*���������������������*/
+ -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(299deg); /*���������������������*/
+ -webkit-transform-origin: bottom;
+ transform-origin: bottom;
+}
+::v-deep .el-table thead.is-group th {
+ height: 27.4px;
+}
+::v-deep .el-table thead {
+ color: #000;
+ font-size: 15px;
+}
+::v-deep .el-table tr {
+ font-size: 15px;
+}
+/deep/.numColor {
+ color: red;
+ display: inline-block;
+ margin-right: 8px;
+}
+/deep/.rankingTitle {
+ font-weight: 700;
+ color: #000;
+}
+</style>
+<style>
+.el-tooltip__popper {
+ font-size: 16px !important;
+}
</style>
--
Gitblit v1.8.0