From a8ce3521dd7106042e93a6f5e5112ca97e421a95 Mon Sep 17 00:00:00 2001
From: lau572 <1010031226@qq.com>
Date: Thu, 26 Dec 2024 13:59:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E7=B1=BB=E4=BA=A4=E8=B0=83=E7=AB=99?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../trafficSurvey/comprehensiveQuery/data.js | 13 +-
.../comprehensiveQuery/index.vue | 288 +++++++++++++++++-
.../comprehensiveQuery/tableCharts.js | 84 +++++
3 files changed, 363 insertions(+), 22 deletions(-)
create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/tableCharts.js
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js
index 6f7ea01a..57b615d5 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js
@@ -86,22 +86,19 @@ export const searchFormList = [
label: "方向:",
key: "direction",
type: "RadioGroup",
+ required: true,
isAlone: true,
- default:'',
+ default:'1',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
- label: "菏泽",
- },
- {
- key: "3",
- label: "济南",
+ label: "分方向",
},
{
- key: "",
- label: "双向",
+ key: "2",
+ label: "不分方向",
}
],
},
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue
index fb463558..889e61ff 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue
@@ -33,7 +33,11 @@
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -144,6 +249,7 @@
import * as echarts from "echarts";
import chartOptions from "./charts";
import { Loading } from 'element-ui';
+ import tableChartsOptions from "./tableCharts";
export default {
@@ -165,21 +271,11 @@
devItem:{},
queryForm:{
iotDeviceId:'',
- direction:'',
+ direction:'1',
date:moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
type:'1',
dataType:'1',
},
- typeOptions:[
- {value:"1",label:"日"},
- {value:"2",label:"月"},
- {value:"3",label:"年"},
- ],
- directionOptions:[
- {value:"1",label:"菏泽"},
- {value:"3",label:"济南"},
- {value:"",label:"双向"},
- ],
modelVisible:false,
loading:false,
deviceList: [],
@@ -195,6 +291,7 @@
},
realTimeTableData:[],
realTimeDataList:[],
+ tableKey:null,
};
},
created(){
@@ -232,9 +329,121 @@
}).then(res => {
if (res.code == 200) {
this.tableData = res.data
+ this.tableKey = Math.random()
+
+ this.initTableCharts()
}
})
},
+
+ initTableCharts(){
+ if(!this.myTableChart){
+ this.myTableChart = echarts.init(document.getElementById("tableChart"));
+ }
+ tableChartsOptions.series = []
+ if( this.tableData && this.tableData.length > 0){
+ let dataList = []
+ //车流量去掉自然合计值、折算值、自然平均值，车速去掉平均值
+ if (this.queryForm.dataType == '1'){
+ tableChartsOptions.yAxis[0].name = '流量'
+ dataList = this.tableData.slice(0,this.tableData.length - 3);
+ tableChartsOptions.xAxis.data = dataList.map(item => item.time.slice(item.time.length - 2,item.time.length))
+ if (this.queryForm.direction == '1'){
+ tableChartsOptions.series = [
+ {
+ name: "菏泽",
+ type: "line",
+ selectedMode: false,
+ itemStyle: {
+ barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+ // lenged文本
+ opacity: 1,
+ color: '#02A0F8',
+ },
+ data: dataList.map(item => item.trafficVolumeHZ),
+ },
+ {
+ name: "济南",
+ type: "line",
+ selectedMode: false,
+ itemStyle: {
+ // lenged文本
+ barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+ opacity: 1,
+ color: '#E4BB53'
+ },
+ data: dataList.map(item => item.trafficVolumeJN),
+ },
+ ]
+ } else {
+ tableChartsOptions.series = [
+ {
+ name: "车流量",
+ type: "line",
+ selectedMode: false,
+ itemStyle: {
+ barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+ // lenged文本
+ opacity: 1,
+ color: '#02A0F8',
+ },
+ data: dataList.map(item => item.trafficVolume),
+ },
+ ]
+ }
+ } else {
+ tableChartsOptions.yAxis[0].name = '车速'
+ dataList = this.tableData.slice(0,this.tableData.length - 1);
+ tableChartsOptions.xAxis.data = dataList.map(item => item.time.slice(item.time.length - 2,item.time.length))
+
+ if (this.queryForm.direction == '1'){
+ tableChartsOptions.series = [
+ {
+ name: "菏泽",
+ type: "line",
+ selectedMode: false,
+ itemStyle: {
+ barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+ // lenged文本
+ opacity: 1,
+ color: '#02A0F8',
+ },
+ data: dataList.map(item => item.avgSpeedHZ),
+ },
+ {
+ name: "济南",
+ type: "line",
+ selectedMode: false,
+ itemStyle: {
+ // lenged文本
+ barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+ opacity: 1,
+ color: '#E4BB53'
+ },
+ data: dataList.map(item => item.avgSpeedJN),
+ },
+ ]
+ } else {
+ tableChartsOptions.series = [
+ {
+ name: "车速",
+ type: "line",
+ selectedMode: false,
+ itemStyle: {
+ barBorderRadius: [10, 10, 10, 10], // 圆角（左上、右上、右下、左下）
+ // lenged文本
+ opacity: 1,
+ color: '#02A0F8',
+ },
+ data: dataList.map(item => item.avgSpeed),
+ },
+ ]
+ }
+ }
+ }
+
+ this.myTableChart.setOption(tableChartsOptions,{ notMerge: true });
+ },
visibleClose(){
this.modelVisible = false
if (this.myChart) {
@@ -244,7 +453,6 @@
},
formatTime(timestamp) {
return moment(timestamp).format('HH:mm');
-
},
realTimeData(){
@@ -437,4 +645,56 @@
display: flex;
}
+
+ ::v-deep .el-table .el-table__header-wrapper th {
+ background-color: #064258 !important;
+ color: #00d1ff;
+ border-color: #064258 !important;
+ border: 0px !important;
+ font-size: 14px;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 500;
+ }
+
+ ::v-deep .el-table {
+ border: 0px !important;
+ background-color: transparent;
+ font-size: 12px !important;
+ }
+
+ ::v-deep .el-table__body-wrapper {
+ background-color: #064258;
+ color: #fff;
+ }
+
+ ::v-deep .el-table .el-table__cell {
+ height: 47px;
+ padding-left: 15px;
+ font-size: 14px;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 500;
+ color: #ffffff;
+ }
+
+ ::v-deep .el-table tr:hover td {
+ background: #1b2528 !important;
+ color: #00d1ff;
+ height: 47px;
+ }
+
+ ::v-deep .el-table tr:nth-child(odd) td {
+ background-color: #13272f;
+ border: 0px !important;
+ }
+
+ ::v-deep .el-table tr:nth-child(even) td {
+ border: 0px !important;
+ }
+
+ ::v-deep .el-table tr {
+ background-color: #133242 !important;
+ border-collapse: 0;
+ border: 0px !important;
+ background-color: transparent !important;
+ }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/tableCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/tableCharts.js
new file mode 100644
index 00000000..f41385c6
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/tableCharts.js
@@ -0,0 +1,84 @@
+import * as echarts from "echarts";
+
+let options = {
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
+ grid: {
+ left: "15px",
+ right: "10px",
+ top: "50px",
+ bottom: "0px",
+ containLabel: true,
+ },
+ xAxis: {
+ data: [],
+ show: true,
+ axisTick: {
+ show: false,
+ lineStyle: {
+ color: "#fff",
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#2A6278",
+ },
+ },
+ axisLabel: {
+ align: "center",
+ rotate: "1",
+ margin: 10,
+ textStyle: {
+ fontSize: 12,
+ color: "#E5E7E8",
+ },
+ },
+ },
+ yAxis: [
+ {
+ name: "",
+ nameTextStyle: {
+ color: "#E5E7E8",
+ fomtSize: 10,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#1C82C5",
+ },
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "#2A6278",
+ type: "solid",
+ },
+ },
+ axisLabel: {
+ show: true,
+ color: "#E5E7E8",
+ textStyle: {
+ fontSize: 12,
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ legend: {
+ itemHeight: 8,
+ itemWidth: 8,
+ top: "0",
+ right: "2%",
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ series: [
+
+ ],
+};
+
+export default options;