mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更改路网-交通分析bug

wangqin
zhangzhang 2 years ago
parent
54bf06625b
commit
16817e6c73
9 changed files with 1379 additions and 1334 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
  2. 319
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
  3. 474
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
  4. 297
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
  5. 218
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
  6. 16
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
  7. 152
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue
  8. 302
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
  9. 929
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue

6
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
View File

@ -34,9 +34,9 @@ let options = {
formatter: "健康监测<br>{b1}：{c1}人", formatter: "健康监测<br>{b1}：{c1}人",
}, },
grid: { grid: {
left: "2%", left: 0,
right: "4%", right: 0,
top: "5%", top: "13%",
bottom: "5%", bottom: "5%",
containLabel: true, containLabel: true,
}, },

319
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
View File

@ -1,183 +1,182 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<WgtTitle :title="'指标变化情况'"></WgtTitle> <WgtTitle :title="'指标变化情况'"></WgtTitle>
<div class="board"> <div class="board">
<div id="ChangesIndictors" class="keep-ratio" > <div id="ChangesIndictors" class="keep-ratio">
</div> </div>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
import WgtTitle from '../../../../../widgets/title' import WgtTitle from '../../../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from './assets/charts3'; import chartsStatistics from './assets/charts3';
export default { export default {
name: 'ChangesIndictors', name: 'ChangesIndictors',
components: { components: {
WgtTitle WgtTitle
}, },
data() { data() {
return { return {
tableData: [{ tableData: [{
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},{ }, {
date: '2023-12-31 13:00:00', date: '2023-12-31 13:00:00',
name: '2640.78m', name: '2640.78m',
address: 'K100+000-K110+000' address: 'K100+000-K110+000'
},
]
}
},
created() {
},
methods: {
selectItem(index){
this.selectIndex = index;
}, },
]
}
},
created() {
},
methods: {
selectItem(index) {
this.selectIndex = index;
}, },
mounted() { },
mounted() {
setTimeout(() => {
this.$nextTick(() => { setTimeout(() => {
var myChart = echarts.init(document.getElementById('ChangesIndictors')); this.$nextTick(() => {
myChart.setOption(chartsStatistics); var myChart = echarts.init(document.getElementById('ChangesIndictors'));
}); myChart.setOption(chartsStatistics);
}); });
}, });
} },
</script> }
</script>
<style lang='scss' scoped> <style lang='scss' scoped>
.showClass {
color: #00EBC1;
}
.showClass { ::v-deep .el-table .cell {
color:#00EBC1; padding-left: 0px !important;
} }
::v-deep .el-table .cell { ::v-deep .el-table .el-table__header-wrapper th {
padding-left:0px !important; background-color: #064258 !important;
} color: #00D1FF;
border-color: #064258 !important;
border: 0px !important;
font-size: 12px !important;
}
::v-deep .el-table .el-table__header-wrapper th { ::v-deep .el-table {
background-color: #064258 !important; border: 0px !important;
color:#00D1FF; background-color: transparent;
border-color: #064258 !important; font-size: 12px !important;
border:0px !important; }
font-size:12px !important;
}
::v-deep .el-table { ::v-deep .el-table__body-wrapper {
border:0px !important; background-color: #064258;
background-color: transparent; color: #fff;
font-size:12px !important; }
}
::v-deep .el-table__body-wrapper { ::v-deep .el-table tr:hover td {
background-color: #064258; background: #1b2528 !important;
color: #fff; color: #00D1FF;
} }
::v-deep .el-table tr:hover td { ::v-deep .el-table tr:nth-child(odd) td {
background: #1b2528 !important; background-color: #13272F;
color:#00D1FF; border: 0px !important;
} }
::v-deep .el-table tr:nth-child(odd) td{ ::v-deep .el-table tr:nth-child(even) td {
background-color: #13272F ; border: 0px !important;
border:0px !important; }
}
::v-deep .el-table tr:nth-child(even) td{
border:0px !important;
}
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #133242 !important; background-color: #133242 !important;
border-collapse:0; border-collapse: 0;
border:0px !important; border: 0px !important;
background-color: transparent !important; background-color: transparent !important;
} }
.congestion {
display: inline-flex;
width: 100%;
height: 310px;
flex-direction: column;
--keep-ratio: scaleX(1);
.congestion { .board {
display: inline-flex; height: 300px;
width: 100%; width: 100%;
height: 310px; padding: 0px 20px;
flex-direction: column; border-radius: 5px 5px 5px 5px;
opacity: 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
.board{ #ChangesIndictors {
height: 280px; display: inline-flex;
height: 240px;
width: 100%; width: 100%;
padding: 0px 0px;
border-radius: 5px 5px 5px 5px;
opacity: 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top:20px;
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%);
#ChangesIndictors {
display: inline-flex;
height: 240px;
width: 100%;
}
} }
} }
.charts { }
height:180px;
width: 100%; .charts {
} height: 180px;
width: 100%;
</style> }
</style>

474
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
View File

@ -1,277 +1,277 @@
<template> <template>
<div class='congestion '> <div class='congestion '>
<WgtTitle :title="'指标变化情况'"></WgtTitle> <WgtTitle :title="'指标变化情况'"></WgtTitle>
<div class="board "> <div class="board ">
<div class="textStr" > <div class="textStr">
<div class="textbar action" > <div class="textbar action">
拥挤度 拥挤度
</div> </div>
<div class="textbar" > <div class="textbar">
饱和度 饱和度
</div> </div>
<div class="textbar" > <div class="textbar">
交通组成特征指数 交通组成特征指数
</div> </div>
</div> </div>
<div class="bodySort" > <div class="bodySort">
<div v-for="(it,index) in tableData" class="sortItem" > <div v-for="(it, index) in tableData" class="sortItem">
<span class="barTitle"> <span class="barTitle">
TOP{{ index + 1 }} TOP{{ index + 1 }}
</span> </span>
<div class="text" > <div class="text">
{{ it.name }} {{ it.name }}
</div> </div>
<div class="lineHight" > <div class="lineHight">
<div class="inner" :style="{width:it.num/count * 100 + '%'}" > <div class="inner" :style="{ width: it.num / count * 100 + '%' }">
</div> </div>
</div> </div>
<span class="num"> <span class="num">
{{ it.num }} {{ it.num }}
</span> </span>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
import WgtTitle from '../../../../../widgets/title' import WgtTitle from '../../../../../widgets/title'
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
name: 'CongestionIndicator', name: 'CongestionIndicator',
components: { components: {
WgtTitle WgtTitle
}, },
data() { data() {
return { return {
count:2000, count: 2000,
tableData: [{ tableData: [{
name:"大学城-长清", name: "大学城-长清",
num:1036, num: 1036,
},{ }, {
name:"大学城-长清", name: "大学城-长清",
num:1036, num: 1036,
}, },
{ {
name:"大学城-长清", name: "大学城-长清",
num:1036, num: 1036,
}, },
{ {
name:"大学城-长清", name: "大学城-长清",
num:1036, num: 1036,
}, },
{ {
name:"大学城-长清", name: "大学城-长清",
num:1036, num: 1036,
}, },
{ {
name:"大学城-长清", name: "大学城-长清",
num:1036, num: 1036,
},
{
name:"大学城-长清",
num:1036,
}
]
}
},
created() {
},
methods: {
selectItem(index){
this.selectIndex = index;
}, },
{
name: "大学城-长清",
num: 1036,
}
]
}
},
created() {
},
methods: {
selectItem(index) {
this.selectIndex = index;
}, },
mounted() { },
mounted() {
setTimeout(() => {
this.$nextTick(() => { setTimeout(() => {
var myChart = echarts.init(document.getElementById('ChangesIndictors')); this.$nextTick(() => {
myChart.setOption(chartsStatistics); var myChart = echarts.init(document.getElementById('ChangesIndictors'));
}); myChart.setOption(chartsStatistics);
}); });
}, });
} },
</script> }
</script>
<style lang='scss' scoped> <style lang='scss' scoped>
.showClass {
color: #00EBC1;
}
.showClass { ::v-deep .el-table .cell {
color:#00EBC1; padding-left: 0px !important;
} }
::v-deep .el-table .cell { ::v-deep .el-table .el-table__header-wrapper th {
padding-left:0px !important; background-color: #064258 !important;
} color: #00D1FF;
border-color: #064258 !important;
border: 0px !important;
font-size: 12px !important;
}
::v-deep .el-table .el-table__header-wrapper th { ::v-deep .el-table {
background-color: #064258 !important; border: 0px !important;
color:#00D1FF; background-color: transparent;
border-color: #064258 !important; font-size: 12px !important;
border:0px !important; }
font-size:12px !important;
}
::v-deep .el-table { ::v-deep .el-table__body-wrapper {
border:0px !important; background-color: #064258;
background-color: transparent; color: #fff;
font-size:12px !important; }
}
::v-deep .el-table__body-wrapper { ::v-deep .el-table tr:hover td {
background-color: #064258; background: #1b2528 !important;
color: #fff; color: #00D1FF;
} }
::v-deep .el-table tr:hover td { ::v-deep .el-table tr:nth-child(odd) td {
background: #1b2528 !important; background-color: #13272F;
color:#00D1FF; border: 0px !important;
} }
::v-deep .el-table tr:nth-child(odd) td{ ::v-deep .el-table tr:nth-child(even) td {
background-color: #13272F ; border: 0px !important;
border:0px !important; }
}
::v-deep .el-table tr:nth-child(even) td{
border:0px !important;
}
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #133242 !important; background-color: #133242 !important;
border-collapse:0; border-collapse: 0;
border:0px !important; border: 0px !important;
background-color: transparent !important; background-color: transparent !important;
} }
.congestion {
display: inline-flex;
width: 100%;
// height: 310px;
flex-direction: column;
.congestion { .board {
display: inline-flex; height: 275px;
width: 100%; width: 100%;
height: 310px; padding: 0px 0px;
border-radius: 5px 5px 5px 5px;
opacity: 1;
display: flex;
align-items: center;
flex-direction: column; flex-direction: column;
margin-top: 20px;
.board{ background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
height: 280px;
width: 100%;
padding: 0px 0px;
border-radius: 5px 5px 5px 5px;
opacity: 1;
display: flex;
align-items: center;
flex-direction: column;
margin-top:20px;
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%);
.bodySort {
position: relative;
display: inline-block;
width:100%;
height:100%;
overflow: auto;
padding:20px 10px;
>div:first-child { .bodySort {
.barTitle { position: relative;
background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); display: inline-block;
} width: 100%;
height: 100%;
overflow: auto;
padding: 5px 10px;
.lineHight .inner { >div:first-child {
background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); .barTitle {
} background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%);
} }
>div { .lineHight .inner {
display: inline-flex; background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%);
width:95%; }
height: 41px; }
background: #0D517460;
border-radius: 0px 0px 0px 0px;
margin:5px;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
align-items: center;
.barTitle { >div {
position: relative; display: inline-flex;
display: inline-flex; width: 95%;
width: 48px; height: 41px;
height: 19px; background: #0D517460;
font-size: 14px; border-radius: 0px 0px 0px 0px;
font-family: PingFang SC, PingFang SC; margin: 5px;
font-weight: 500; font-size: 14px;
color: #FFFFFF; font-family: PingFang SC, PingFang SC;
background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); font-weight: 500;
border-radius: 6px 6px 6px 6px; color: #FFFFFF;
opacity: 1; align-items: center;
justify-content: center;
align-items: center;
margin:0 10px;
}
.lineHight {
width: 60%;
height: 8px;
background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%);
border-radius: 6px 6px 6px 6px;
opacity: 1;
margin:0 15px;
> .inner { .barTitle {
display: inline-flex; position: relative;
height:8px; display: inline-flex;
background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); width: 48px;
border-radius: 6px 6px 6px 6px; height: 19px;
opacity: 1; font-size: 14px;
position: relative; font-family: PingFang SC, PingFang SC;
top:-7px; font-weight: 500;
} color: #FFFFFF;
} background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%);
border-radius: 6px 6px 6px 6px;
opacity: 1;
justify-content: center;
align-items: center;
margin: 0 10px;
} }
}
.textStr { .lineHight {
display: inline-flex; width: 60%;
width:100%; height: 8px;
height:45px; background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%);
flex-direction: row; border-radius: 6px 6px 6px 6px;
opacity: 1;
margin: 0 15px;
> div { >.inner {
display: inline-flex; display: inline-flex;
min-width: 80px; height: 8px;
height: 26px; background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%);
background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%); border-radius: 6px 6px 6px 6px;
border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
color:#fff; position: relative;
font-size: 12px; top: -7px;
font-family: PingFang SC, PingFang SC; }
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
margin-left:20px;
padding:0 15px;
cursor: pointer;
} }
}
}
.action { .textStr {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); display: inline-flex;
} width: 100%;
height: 45px;
flex-direction: row;
>div {
display: inline-flex;
min-width: 80px;
height: 26px;
background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%);
border-radius: 2px 2px 2px 2px;
opacity: 1;
color: #fff;
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
margin-left: 20px;
padding: 0 15px;
cursor: pointer;
}
.action {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
} }
} }
} }
.charts { }
height:180px;
width: 100%; .charts {
} height: 180px;
width: 100%;
</style> }
</style>

297
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
View File

@ -1,160 +1,187 @@
/* 数据 */ /* 数据 */
let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别 let nameList = [
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 "1月",
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] "2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
]; // 类别
let valueList = [
800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903,
]; // 人数
var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"];
/* 数据整合 */ /* 数据整合 */
let dataList = []; let dataList = [];
nameList.map((item, index) => { nameList.map((item, index) => {
if (index === 4) { if (index === 4) {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, color: '#FFB904' // 0% 处的颜色 {
}, { offset: 0,
offset: 1, color: '#FF6969' // 100% 处的颜色 color: "#FFB904", // 0% 处的颜色
}], },
global: false // 缺省为 false {
offset: 1,
color: "#FF6969", // 100% 处的颜色
}, },
borderRadius: 6 ],
}, global: false, // 缺省为 false
label: { show: false } },
}) borderRadius: 6,
} else { },
dataList.push({ label: { show: false },
name: item, });
value: valueList[index], } else {
itemStyle:{ dataList.push({
borderRadius: 6 name: item,
} value: valueList[index],
}) itemStyle: {
} borderRadius: 6,
}) },
});
}
});
var options = { var options = {
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
icon: "circle", icon: "circle",
itemHeight: 8, itemHeight: 8,
itemWidth: 8, itemWidth: 8,
top: "5%", top: "5%",
x: "right", x: "right",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
},
}, },
grid: { },
top: '25%',//上边距 grid: {
right: '0',//右边距 top: "25%", //上边距
left: '0',//左边距 right: "0", //右边距
bottom: "0%",//下边距 left: "0", //左边距
containLabel: true, bottom: "0%", //下边距
}, containLabel: true,
xAxis: { },
type: 'category', xAxis: {
data: nameList, type: "category",
axisTick: { data: nameList,
show: false //隐藏X轴刻度 axisTick: {
}, show: false, //隐藏X轴刻度
axisLine: { },
lineStyle: { axisLine: {
color: "rgba(49, 217, 255, 0.8)" lineStyle: {
} color: "rgba(49, 217, 255, 0.8)",
},
axisLabel: {
show: true,
color: '#B6E6FF',
fontSize:8,
fontFamily: 'Source Han Sans CN-Regular',
}, },
}, },
yAxis: [{ axisLabel: {
type: 'value', show: true,
color: "#B6E6FF",
fontSize: 8,
fontFamily: "Source Han Sans CN-Regular",
},
},
yAxis: [
{
type: "value",
name: "", name: "",
max: 1200, max: 1200,
min:0, min: 0,
splitNumber:5, splitNumber: 5,
nameTextStyle: { nameTextStyle: {
color: '#B6E6FF', color: "#B6E6FF",
fontSize: 13, fontSize: 13,
fontFamily: 'Source Han Sans CN-Regular', fontFamily: "Source Han Sans CN-Regular",
align: "left", align: "left",
verticalAlign: "center", verticalAlign: "center",
}, },
axisLabel: { axisLabel: {
fontSize: 13, fontSize: 13,
color: '#B6E6FF', color: "#B6E6FF",
fontFamily: 'HarmonyOS Sans-Regular', fontFamily: "HarmonyOS Sans-Regular",
// formatter:function(value,index){ // formatter:function(value,index){
// return yList[index] // return yList[index]
// } // }
}, },
axisLine: { axisLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: 'rgba(49, 217, 255, 0.5)', color: "rgba(49, 217, 255, 0.5)",
} },
}, },
}], },
series: [ ],
{ series: [
name: '交通特征', {
type: 'line', name: "交通特征",
symbol: 'circle', type: "line",
symbolSize: 0, symbol: "circle",
symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#32BB8A', color: "#32BB8A",
}, },
lineStyle: { lineStyle: {
width:2, width: 2,
}, },
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 data: [
}, 1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700,
{ ], // 折线图的数据
name: '饱和度', },
type: 'line', {
symbol: 'circle', name: "饱和度",
symbolSize: 0, type: "line",
symbol: "circle",
symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#07A3FB', color: "#07A3FB",
}, },
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 data: [
}, 600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600,
{ ], // 折线图的数据
name: '拥挤度', },
type: 'line', {
symbol: 'circle', name: "拥挤度",
symbolSize: 0, type: "line",
// yAxisIndex: 1, // 与第二个 y 轴关联 symbol: "circle",
itemStyle: { symbolSize: 0,
color: '#E2BA74', // yAxisIndex: 1, // 与第二个 y 轴关联
}, itemStyle: {
lineStyle: { color: "#E2BA74",
width: 2, },
}, lineStyle: {
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 width: 2,
}, },
] data: [
} 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
], // 折线图的数据
},
],
};
export default options; export default options;

218
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
View File

@ -3,51 +3,59 @@ import * as echarts from "echarts";
function contains(arr, val) { function contains(arr, val) {
var i = arr.length; var i = arr.length;
while (i--) { while (i--) {
if (arr[i].name === val) { if (arr[i].name === val) {
return i; return i;
} }
} }
return false; return false;
} }
let list = [ let list = [
{ {
name: '交通特征', name: "交通特征",
max: 88, max: 88,
}, },
{ {
name: '拥挤度', name: "拥挤度",
max: 88, max: 88,
}, },
{ {
name: '饱和度', name: "饱和度",
max:188, max: 188,
}, },
]; ];
let data1 = [[80, 50, 55, 80, 50, 80, 48, 43]]; let data1 = [[80, 50, 55, 80, 50, 80, 48, 43]];
let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]]; let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]];
let options = { let options = {
tooltip: { tooltip: {
show: true, show: true,
trigger: 'item', trigger: "item",
formatter: (data) => { formatter: (data) => {
// console.log(data.seriesIndex); // console.log(data.seriesIndex);
var tip = '<h5 class="echarts-tip-h5">' + data.seriesName + '</h5>'; var tip = '<span class="echarts-tip-h5">' + data.seriesName + "</span>";
let tmpData = []; let tmpData = [];
if (data.seriesIndex === 0) { if (data.seriesIndex === 0) {
tmpData = data1; tmpData = data1;
} else if (data.seriesIndex === 1) { } else if (data.seriesIndex === 1) {
tmpData = data2; tmpData = data2;
} }
console.log(tmpData) console.log(tmpData);
data.value.forEach((item, index) => { data.value.forEach((item, index) => {
// console.log(list[index].name) // console.log(list[index].name)
tip += '<div>'; tip += "<div>";
tip += '<div>' + list[index].name + ': '+ tmpData[0][index] + '万</div>' tip +=
tip += '</div>'; "<div>" + list[index].name + ": " + tmpData[0][index] + "万</div>";
}); tip += "</div>";
return tip; });
}, return tip;
},
},
grid: {
top: "5%", //上边距
right: "0", //右边距
left: "0", //左边距
bottom: "0%", //下边距
padding: "50px",
containLabel: true,
}, },
// legend: { // legend: {
// show: true, // show: true,
@ -62,88 +70,92 @@ let options = {
// data: ['数据1', '数据2'], // data: ['数据1', '数据2'],
// }, // },
radar: { radar: {
name: { name: {
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: 16, fontSize: 16,
},
rich: {
a: {
fontSize: 16,
color: '#FFFFFF',
padding: [0, 0, 8, 0],
},
b: {
fontSize: 18,
color: '#ACD3FF',
},
},
formatter: (a) => {
let i = contains(list, a); // 处理对应要显示的样式
return `{a| ${a}}`;
},
}, },
center: ['50%', '50%'], rich: {
radius: '60%', a: {
startAngle: 90, fontSize: 12,
splitNumber: 5, color: "#FFFFFF",
shape: 'circle', padding: [0, 0, 8, 0],
splitArea: { },
areaStyle: { b: {
color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'], fontSize: 18,
}, color: "#ACD3FF",
},
}, },
axisLabel: { formatter: (a) => {
show: false, let i = contains(list, a); // 处理对应要显示的样式
return `{a| ${a}}`;
}, },
axisLine: { },
show: false, center: ["50%", "50%"],
radius: "60%",
startAngle: 90,
splitNumber: 5,
shape: "circle",
splitArea: {
areaStyle: {
color: [
"#07A3FB99",
"#07A3FB8010",
"#07A3FB30",
"#07A3FB60",
"#07A3FB80",
],
}, },
splitLine: { },
show: true, axisLabel: {
lineStyle: { show: false,
color: 'rgba(50, 72, 130, 0.4)', },
}, axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(50, 72, 130, 0.4)",
}, },
indicator: list, },
indicator: list,
}, },
series: [ series: [
{ {
name: '数据1', name: "数据1",
type: 'radar', type: "radar",
symbol: 'circle', symbol: "circle",
symbolSize: 3, symbolSize: 3,
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
1, 1,
0, 0,
0, 0,
[ [
{ {
offset: 0, offset: 0,
color: '#DC6A00', color: "#DC6A00",
}, },
{ {
offset: 1, offset: 1,
color: '#099CCD', color: "#099CCD",
},
],
false
),
}, },
}, ],
itemStyle: { false
color: 'rgba(245, 166, 35, 0.2)', ),
borderColor: 'rgba(235, 171, 86, 00)', },
borderWidth: 10,
},
data: data1,
}, },
itemStyle: {
color: "rgba(245, 166, 35, 0.2)",
borderColor: "rgba(235, 171, 86, 00)",
borderWidth: 10,
},
data: data1,
},
], ],
}; };
export default options;
export default options;

16
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
View File

@ -35,7 +35,7 @@
</div> --> </div> -->
<ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" /> <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" />
<div class="body"> <div class="body">
<div style="width:70%"> <div class="body-l">
<div class="searchPanel_1"> <div class="searchPanel_1">
<!-- <el-from ref="form"> --> <!-- <el-from ref="form"> -->
<RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction" <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction"
@ -310,7 +310,7 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.progressbar { .progressbar {
margin: 10px; margin: 15px;
} }
@ -332,9 +332,10 @@ export default {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 33%; width: 33%;
margin-right: 20px; // margin-right: 20px;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1; border: none;
// border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 100%);
padding: 10px; padding: 10px;
} }
@ -394,7 +395,13 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
--keep-ratio: scaleX(1);
.body-l {
width: 70%;
padding: 0 20px;
margin-right: 20px;
}
.searchPanel_1 { .searchPanel_1 {
position: absolute; position: absolute;
@ -406,6 +413,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
z-index: 1000; z-index: 1000;
div { div {
white-space: nowrap; white-space: nowrap;
margin-right: 4px; margin-right: 4px;

152
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue
View File

@ -1,75 +1,76 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<div :style="{width: dataList.length * 300}" > <div :style="{ width: dataList.length * 300 }">
<div :class="selectIndex == index?selectLine < 1?'item action Abefore':'item action Aafter':selectIndex + selectLine == index?selectLine < 1?'item action Aafter':'item action Abefore':'item'" v-for="(item,index) in dataList" :key="index" > <div :class="selectIndex == index ? selectLine < 1 ? 'item action Abefore' : 'item action Aafter' : selectIndex + selectLine == index ? selectLine < 1 ? 'item action Aafter' : 'item action Abefore' : 'item'"
<i class="after" @click="selectItem(index,-1)"></i> v-for="(item, index) in dataList" :key="index">
<i class="before" @click="selectItem(index,+1)" ></i> <i class="after" @click="selectItem(index, -1)"></i>
<span></span> <i class="before" @click="selectItem(index, +1)"></i>
<div>{{ item.title }}</div> <span></span>
<div>{{ item.title }}</div>
</div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { number } from 'echarts'; import { number } from 'echarts';
export default { export default {
name: 'ProgressBar', name: 'ProgressBar',
components: { components: {
}, },
props:{ props: {
dataList:{ dataList: {
type:Array, type: Array,
default: () => { default: () => {
return [] return []
} }
}, },
}, },
data() { data() {
return { return {
selectIndex:0, selectIndex: 0,
selectLine:-1, selectLine: -1,
} }
}, },
created() { created() {
}, },
methods: { methods: {
selectItem(index,num){ selectItem(index, num) {
this.selectIndex = index; this.selectIndex = index;
this.selectLine = num this.selectLine = num
} }
}, },
mounted() { mounted() {
}, },
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.congestion { .congestion {
width: 100%; width: 100%;
height:35px; height: 35px;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
> div { >div {
position: relative; position: relative;
width: 100%; width: 100%;
height:35px; height: 35px;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
>.item .after { >.item .after {
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
left:0px; left: 0px;
top:-5px; top: -5px;
width:45px !important; width: 45px !important;
height:35px !important; height: 35px !important;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
} }
@ -78,20 +79,20 @@ import { number } from 'echarts';
content: ""; content: "";
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
left:0px; left: 0px;
top:8px; top: 8px;
width:45px !important; width: 45px !important;
height:3px !important; height: 3px !important;
background-color: #C7C7C7; background-color: #C7C7C7;
} }
>.item .before { >.item .before {
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
right:0px; right: 0px;
top:-5px; top: -5px;
width:45px; width: 45px;
height:35px; height: 35px;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
} }
@ -100,96 +101,97 @@ import { number } from 'echarts';
content: ""; content: "";
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
left:0px; left: 0px;
top:8px; top: 8px;
width:45px !important; width: 45px !important;
height:3px !important; height: 3px !important;
background-color: #C7C7C7; background-color: #C7C7C7;
} }
.item.action .after::after { .item.action .after::after {
background-color: #72FDC9 ; background-color: #72FDC9;
} }
.item.action.Aafter .after::after{ .item.action.Aafter .after::after {
background-color: #C7C7C7 !important; background-color: #C7C7C7 !important;
} }
> .item.action.Aafter .before::after { >.item.action.Aafter .before::after {
background-color: #72FDC9 ; background-color: #72FDC9;
} }
> .item.action.Abefore .after::after { >.item.action.Abefore .after::after {
background-color: #72FDC9 ; background-color: #72FDC9;
} }
> .bef::before { >.bef::before {
background-color: #72FDC9 !important; background-color: #72FDC9 !important;
} }
> .aft::after { >.aft::after {
background-color: #72FDC9 !important; background-color: #72FDC9 !important;
} }
> .item.action span { >.item.action span {
background-color: #72FDC9 ; background-color: #72FDC9;
cursor: pointer; cursor: pointer;
} }
> .item.action span::after { >.item.action span::after {
border-color: #72FDC9 ; border-color: #72FDC9;
} }
> .action div { >.action div {
color:#72FDC9 !important; color: #72FDC9 !important;
} }
>.item { >.item {
position: relative; position: relative;
width: 180px; width: 180px;
height:35px; height: 35px;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
justify-items: center; justify-items: center;
>span { >span {
position: absolute; position: absolute;
display:inline-flex; display: inline-flex;
width: 9px; width: 9px;
height: 9px; height: 9px;
background: #C7C7C7; background: #C7C7C7;
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
left:53px; left: 53px;
} }
>div { >div {
position: relative; position: relative;
display:inline-flex; display: inline-flex;
width:100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
top: 5px; top: 5px;
margin-top:10px; margin-top: 10px;
color:#C7C7C7; font-size: 14px;
color: #C7C7C7;
} }
>span::after { >span::after {
content: ""; content: "";
position: absolute; position: absolute;
display:inline-flex; display: inline-flex;
width: 15px; width: 15px;
height: 15px; height: 15px;
border:1px solid #C7C7C7; border: 1px solid #C7C7C7;
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
top:-3.5px; top: -3.5px;
left:-3px; left: -3px;
} }
} }
} }
} }
</style> </style>

302
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
View File

@ -1,180 +1,190 @@
<template> <template>
<div class='TrafficFlow'> <div class='TrafficFlow'>
<section class="content"> <section class="content">
<RoadIndicators class="content-l" /> <RoadIndicators class="content-l" />
<SaturationMax class="content-l" /> <SaturationMax class="content-l" />
<Crowding class="content-l" /> <Crowding class="content-l" />
<ComposeFeatures class="content-l" /> <ComposeFeatures class="content-l" />
</section> </section>
<section class="content" > <section class="content">
<TrafficIndicators class="content-max" /> <TrafficIndicators class="content-max" />
</section> </section>
<section class="foot" > <section class="foot">
<ChangesIndictors class="foot-l" /> <ChangesIndictors class="foot-l" />
<CongestionIndicator class="foot-r" /> <CongestionIndicator class="foot-r" />
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import RoadIndicators from './components/roadIndicators'; import RoadIndicators from './components/roadIndicators';
import SaturationMax from './components/saturationMax'; import SaturationMax from './components/saturationMax';
import Crowding from './components/crowding'; import Crowding from './components/crowding';
import ComposeFeatures from './components/composeFeatures'; import ComposeFeatures from './components/composeFeatures';
import TrafficIndicators from './components/trafficIndicators'; import TrafficIndicators from './components/trafficIndicators';
import ChangesIndictors from './components/changesIndicators'; import ChangesIndictors from './components/changesIndicators';
import CongestionIndicator from './components/congestionIndicator'; import CongestionIndicator from './components/congestionIndicator';
export default { export default {
name: 'IndicatorAnalysis', name: 'IndicatorAnalysis',
components: { components: {
RoadIndicators, RoadIndicators,
SaturationMax, SaturationMax,
Crowding, Crowding,
ComposeFeatures, ComposeFeatures,
TrafficIndicators, TrafficIndicators,
ChangesIndictors, ChangesIndictors,
CongestionIndicator, CongestionIndicator,
}, },
data(){ data() {
return { return {
activeName:"first" activeName: "first"
} }
}, },
methods:{ methods: {
changeTabs(){ changeTabs() {
}
} }
} }
</script>
}
</script>
<style lang='scss' scoped> <style lang='scss' scoped>
::v-deep .el-tabs__item {
display: inline-flex;
justify-content: center;
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
min-width: 128px;
position: relative;
left: 10px;
}
::v-deep .el-tabs__active-bar {
min-width: 128px;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: #133242;
opacity: 0.1;
}
.el-tabs__content {
height: 100%;
}
.footTabs {
display: inline;
width: 99%;
height: 100%;
}
.content {
width: 100%;
display: inline-flex;
justify-content: space-between;
pointer-events: none;
margin-top: 19px;
margin-left: 19px;
>div {
pointer-events: auto;
}
::v-deep .el-tabs__item{ .content-w {
display: inline-flex; width: 66.5%;
justify-content: center; }
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
min-width:128px;
position: relative;
left:10px;
}
::v-deep .el-tabs__active-bar { .content-max {
min-width:128px; width: 100%;
}
::v-deep .el-tabs__nav-wrap::after { }
background-color: #133242;
opacity: 0.1;
}
.footTabs { .content-l {
display: inline; width: 25%;
width:99%; margin-left: 0px;
}
} }
.TrafficFlow {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
color: white;
.content {
.content {
width: 100%; width: 100%;
display: inline-flex; margin: auto;
justify-content: space-between; display: flex;
flex: 1;
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
margin-left:19px;
>div {
pointer-events: auto;
}
.content-w {
width:66.5%;
}
.content-max { .content-l {
width:100%; width: calc(50%);
min-width: 460px;
margin-right: 20px;
} }
.content-l {
width: 25%; .content-m {
margin-left:0px; display: inline-flex;
flex-direction: column;
width: calc(100% / 4);
margin-right: 20px;
.content-m-t {
width: 100%;
height: 240px;
margin-bottom: 20px;
}
} }
.content-r {
width: 30%;
}
} }
.TrafficFlow { .foot {
width: 100%; width: 100%;
height: 100%; margin: auto;
position: relative; display: flex;
z-index: 6; flex: 1;
color: white; pointer-events: none;
margin-top: 19px;
>div {
pointer-events: auto;
}
.content { .foot-w {
width: 100%; width: 100%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 19px;
.content-l {
width: calc(50%);
min-width:460px;
margin-right:20px;
}
.content-m {
display: inline-flex;
flex-direction: column;
width: calc(100% / 4 );
margin-right:20px;
.content-m-t {
width:100%;
height:240px;
margin-bottom: 20px;
}
}
.content-r {
width: 30%;
}
} }
.foot{
width: 100%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 8px;
>div {
pointer-events: auto;
}
.foot-w { .foot-l {
width:100%; width: 70%;
height: 330px;
}
} .foot-m {
width: 613px;
.foot-l { }
width: 67%;
} .foot-r {
.foot-m { margin-left: 20px;
width: 613px; width: 33%;
}
.foot-r {
margin-left:20px;
width: 33%;
}
} }
} }
</style> }
</style>

929
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue
View File

@ -1,519 +1,506 @@
<template> <template>
<div class='congestion'> <div class='congestion'>
<div class="buttonbar" > <div class="buttonbar">
<div class="button" > <div class="button">
<i class="el-icon-refresh-right"></i>刷新 <i class="el-icon-refresh-right"></i>刷新
</div> </div>
<div class="button" > <div class="button">
<i class="el-icon-upload2"></i>导出Excal <i class="el-icon-upload2"></i>导出Excal
</div> </div>
</div>
<div class="board">
<div class="weaterMain" >
<el-table
:border="false"
:data="tableData"
height="790"
style="width: 100%">
<el-table-column
prop="nem"
label=""
width="30">
</el-table-column>
<el-table-column
prop="address"
label="桩号范围"
>
</el-table-column>
<el-table-column
prop="name"
label="能见度"
class-name="showClass"
>
<template slot-scope="scope">
<span class="showClass">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="发生时间"
>
</el-table-column>
</el-table>
</div>
</div>
</div> </div>
</template> <div class="board">
<script> <div class="weaterMain">
<el-table :border="false" :data="tableData" style="width: 100%">
export default { <el-table-column prop="nem" label="" width="30">
name: 'IndicatorQuery', </el-table-column>
components: { <el-table-column prop="address" label="桩号范围">
</el-table-column>
}, <el-table-column prop="name" label="能见度" class-name="showClass">
data() { <template slot-scope="scope">
return { <span class="showClass">{{ scope.row.name }}</span>
tableData: [{ </template>
date: '2023-12-31 13:00:00', </el-table-column>
name: '2640.78m', <el-table-column prop="date" label="发生时间">
address: 'K100+000-K110+000' </el-table-column>
},{ </el-table>
date: '2023-12-31 13:00:00', </div>
name: '2640.78m', </div>
address: 'K100+000-K110+000' </div>
},{ </template>
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},,{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},
]
}
},
created() { <script>
}, export default {
methods: { name: 'IndicatorQuery',
selectItem(index){ components: {
this.selectIndex = index;
},
data() {
return {
tableData: [{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, , {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, },
}, ]
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
}
</script>
<style lang='scss' scoped>
.showClass {
color:#00EBC1;
} }
},
::v-deep .el-table .cell { created() {
padding-left:0px !important;
}
::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important;
color:#00D1FF;
border-color: #064258 !important;
border:0px !important;
font-size:12px !important;
}
::v-deep .el-table { },
border:0px !important; methods: {
background-color: transparent; selectItem(index) {
font-size:12px !important; this.selectIndex = index;
} },
},
mounted() {
::v-deep .el-table__body-wrapper { setTimeout(() => {
background-color: #064258; this.$nextTick(() => {
color: #fff;
}
::v-deep .el-table tr:hover td { });
background: #1b2528 !important; });
color:#00D1FF; },
} }
</script>
<style lang='scss' scoped>
.showClass {
color: #00EBC1;
}
::v-deep .el-table .cell {
padding-left: 0px !important;
}
::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important;
color: #00D1FF;
border-color: #064258 !important;
border: 0px !important;
font-size: 12px !important;
}
::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 tr:hover td {
background: #1b2528 !important;
color: #00D1FF;
}
::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;
}
.congestion {
display: inline-flex;
width: 100%;
height: 100%;
flex-direction: column;
.buttonbar {
display: inline-flex;
flex-direction: row;
padding-top: 15px;
::v-deep .el-table tr:nth-child(odd) td{ >.button {
background-color: #13272F ; display: inline-flex;
border:0px !important; min-width: 90px;
} height: 28px;
::v-deep .el-table tr:nth-child(even) td{ background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
border:0px !important; border-radius: 2px 2px 2px 2px;
} justify-content: center;
align-items: center;
padding: 1px 10px;
;
opacity: 1;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
margin-left: 15px;
}
::v-deep .el-table tr {
background-color: #133242 !important;
border-collapse:0;
border:0px !important;
background-color: transparent !important;
} }
.congestion { .board {
display: inline-flex; height: 880px;
width: 100%; width: 100%;
height: 100%; padding: 0px 0px;
border-radius: 5px 5px 5px 5px;
opacity: 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column; flex-direction: column;
margin-top: 20px;
.buttonbar { .warningList {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: column;
padding-top:15px; width: 100%;
height: calc(100% - 40px);
> .button { >div {
display: inline-flex; display: inline-flex;
min-width:90px; width: 100%;
height:28px; height: 138px;
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: #133242;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
justify-content: center;
align-items: center;
padding: 1px 10px;;
opacity: 1; opacity: 1;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1;
overflow: hidden;
margin-top: 20px;
padding: 23px 29px;
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #37E7FF;
margin-left:15px;
} >.left-w {
display: inline-flex;
width: 40%;
height: 100%;
flex-direction: column;
.left-row {
margin: 2px;
display: inline-flex;
width: 100%;
height: 30px;
flex-direction: row;
>.value {
color: #fff;
}
.org {
font-size: 14px;
font-family: PangMenZhengDao;
font-weight: 400;
color: #F4A125
}
}
}
>.right-w {
margin-left: 30px;
display: inline-flex;
width: 100%;
height: 100%;
flex-direction: column;
.right-row {
margin-bottom: 10px;
}
.right-text {
color: #fff;
}
}
}
} }
.board{ .weaterMain {
height: 880px; display: inline-flex;
flex-direction: row;
width: 100%; width: 100%;
padding: 0px 0px; height: 100%;
border-radius: 5px 5px 5px 5px; ;
opacity: 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
margin-top:20px;
.warningList { .buttons {
display: inline-flex; width: 100%;
flex-direction: column; height: 38px;
width:100%;
height:calc(100% - 40px);
>div { >div {
display: inline-flex; display: inline-flex;
width:100%; width: 10%;
height:138px; height: 35px;
background: #133242; justify-content: center;
border-radius: 2px 2px 2px 2px; align-items: center;
opacity: 1; font-size: 12px;
border: 1px solid; font-family: PangMenZhengDao;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; font-weight: 800;
overflow: hidden; color: #FFFFFF;
margin-top:20px; z-index: 9;
padding:23px 29px; }
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #37E7FF;
>.left-w {
display: inline-flex;
width:40%;
height:100%;
flex-direction: column;
.left-row {
margin:2px;
display: inline-flex;
width:100%;
height:30px;
flex-direction: row;
>.value {
color:#fff;
}
.org {
font-size: 14px;
font-family: PangMenZhengDao;
font-weight: 400;
color: #F4A125
}
}
}
>.right-w { >div::after {
margin-left:30px; content: "";
display: inline-flex; position: absolute;
width:100%; display: inline-flex;
height:100%; width: 55px;
flex-direction: column; height: 36px;
background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%);
.right-row { border-radius: 50%;
margin-bottom: 10px; opacity: 1;
} z-index: -1;
}
.right-text {
color:#fff;
}
}
.redSel::after {
background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%);
} }
}
.weaterMain { .yelSel::after {
display: inline-flex; background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%);
flex-direction: row; }
width:100%;
height: 100%;;
.buttons {
width:100%;
height:38px;
>div {
display: inline-flex;
width:10%;
height:35px;
justify-content: center;
align-items: center;
font-size: 12px;
font-family: PangMenZhengDao;
font-weight: 800;
color: #FFFFFF;
z-index: 9;
}
>div::after { .bluSel::after {
content: ""; background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%);
position: absolute; }
display: inline-flex;
width: 55px;
height: 36px;
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%);
border-radius: 50%;
opacity: 1;
z-index:-1;
}
.redSel::after { .orgSel::after {
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%);
} }
}
.yelSel::after { .weaterTitle::after {
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); content: "";
} position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
.bluSel::after { .weaterTitle::before {
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); content: "";
} position: absolute;
top: 38px;
left: 0px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
.orgSel::after{ .weaterTitle {
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); position: relative;
} display: inline-flex;
} width: 277px;
height: 38px;
background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
justify-content: center;
align-items: center;
.weaterTitle::after { >span.text {
content: ""; display: inline-flex;
position: absolute; font-size: 16px;
top:0px; font-family: PangMenZhengDao;
left:0px; font-weight: 400;
width:100%; color: #FFFFFF;
height:2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
.weaterTitle::before {
content: "";
position: absolute;
top:38px;
left:0px;
width:100%;
height:2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
} }
.weaterTitle {
position: relative;
display: inline-flex;
width: 277px;
height: 38px;
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
justify-content: center;
align-items: center;
>span.text {
display: inline-flex;
font-size: 16px;
font-family: PangMenZhengDao;
font-weight: 400;
color: #FFFFFF;
}
.num {
.num { display: inline-flex;
display: inline-flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; font-size: 22px;
font-size: 22px; font-family: PangMenZhengDao;
font-family: PangMenZhengDao; font-weight: 400;
font-weight: 400; color: #D9001B;
color: #D9001B;
}
} }
} }
} }
} }
.charts { }
height:180px;
width: 100%; .charts {
} height: 180px;
width: 100%;
</style> }
</style>
Write Preview
Loading…
Cancel
Save