From 9aeeea9741d3e2bca01bc7ebb4864f834fe88ee7 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 18 Mar 2024 15:18:37 +0800
Subject: [PATCH] fix: 表格高度修改
---
src/views/contrast/index.vue | 239 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 127 insertions(+), 112 deletions(-)
diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue
index 731ae64..f57853b 100644
--- a/src/views/contrast/index.vue
+++ b/src/views/contrast/index.vue
@@ -1,5 +1,5 @@
-+<template>
- <div style="width: 100%; height: 100%">
+<template>
+ <div style="width: 100%; height: 100%; margin:0 auto">
<div class="topSelect">
<el-cascader
v-model="newMac"
@@ -41,8 +41,7 @@
:key="item.value"
:label="item.label"
:value="item.value"
- >
- </el-option>
+ />
</el-select>
<component
:is="dataType"
@@ -51,13 +50,21 @@
@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" style="height: 23rem"/>
+ <LineChart
+ :chart-data="lineChartData"
+ style="height: 40rem;"
+ />
</div>
</template>
@@ -109,9 +116,10 @@
props: {
// defaultData: Array
},
- data() {
+ data () {
// ������������������
return {
+ isYaxisSame: ['a34004', 'a34002', 'a05024', 'a21004', 'a21026'],
dataType: 'HourPicker',
lineChartData: lineChartData.purchases,
props: { multiple: true },
@@ -123,7 +131,7 @@
// newMac2:'',
newSensor: [],
radio1: '������',
- unit: 0,
+ unit: 1,
type: 'select',
newLineChartData: {
series: [],
@@ -155,7 +163,7 @@
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])
@@ -166,16 +174,16 @@
// 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 = 3
@@ -193,22 +201,22 @@
},
},
// ������������ - ��������������������������������� 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',
@@ -226,14 +234,16 @@
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,
+ })
+ }
}
}
})
@@ -242,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]
@@ -269,11 +279,12 @@
})
},
// ������
- selectData() {
+ selectData () {
var newLineChartData = {
series: [],
xAxis: [],
title: [],
+ yAxis: []
}
this.newXData = []
this.$request({
@@ -288,8 +299,9 @@
},
})
.then((res) => {
- // console.log('������������������������������')
+ 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
@@ -298,93 +310,80 @@
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' })
- newLineChartData.series[i].name = data[i].name
- newLineChartData.title.push(data[i].name);
+ 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)
+ 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
-
- // 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) {
+ showPickerChild (data) {
// var newLineChartData = {
// series: [],
// xAxis: [],
@@ -469,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]
@@ -487,7 +496,7 @@
}
},
// ������������������������
- filterSensorName() {
+ filterSensorName () {
this.chartSensorName = this.$options.filters.sensorFilter(
this.chartSensorKey[0].sensorCode
)
@@ -500,28 +509,34 @@
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;
}
+
.select11 {
width: 20% !important;
}
+
/deep/.el-date-editor .el-range-separator {
width: 11%;
}
--
Gitblit v1.8.0