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

更改路网-交通分析bug

wangqin
zhangzhang 1 year ago
parent
54bf06625b
commit
16817e6c73
9 changed files with 1379 additions and 1334 deletions
Unified View
  1. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
  2. 135
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
  3. 188
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
  4. 147
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
  5. 70
      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. 128
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue
  8. 120
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
  9. 307
      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,
}, },

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

@ -2,19 +2,19 @@
<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> </div>
</template> </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
@ -25,51 +25,51 @@
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'
@ -82,7 +82,7 @@
}, },
methods: { methods: {
selectItem(index){ selectItem(index) {
this.selectIndex = index; this.selectIndex = index;
}, },
}, },
@ -95,77 +95,76 @@
}); });
}); });
}, },
} }
</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;
}
::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important; background-color: #064258 !important;
color:#00D1FF; color: #00D1FF;
border-color: #064258 !important; border-color: #064258 !important;
border:0px !important; border: 0px !important;
font-size:12px !important; font-size: 12px !important;
} }
::v-deep .el-table { ::v-deep .el-table {
border:0px !important; border: 0px !important;
background-color: transparent; background-color: transparent;
font-size:12px !important; font-size: 12px !important;
} }
::v-deep .el-table__body-wrapper { ::v-deep .el-table__body-wrapper {
background-color: #064258; background-color: #064258;
color: #fff; color: #fff;
} }
::v-deep .el-table tr:hover td { ::v-deep .el-table tr:hover td {
background: #1b2528 !important; background: #1b2528 !important;
color:#00D1FF; color: #00D1FF;
} }
::v-deep .el-table tr:nth-child(odd) td{ ::v-deep .el-table tr:nth-child(odd) td {
background-color: #13272F ; 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: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 { .congestion {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 310px; height: 310px;
flex-direction: column; flex-direction: column;
--keep-ratio: scaleX(1);
.board{ .board {
height: 280px; height: 300px;
width: 100%; width: 100%;
padding: 0px 0px; padding: 0px 20px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
margin-top:20px; background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%);
#ChangesIndictors { #ChangesIndictors {
display: inline-flex; display: inline-flex;
@ -173,11 +172,11 @@
width: 100%; width: 100%;
} }
} }
} }
.charts {
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

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

@ -2,27 +2,27 @@
<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>
@ -33,47 +33,47 @@
</div> </div>
</div> </div>
</div> </div>
</template> </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:"大学城-长清", name: "大学城-长清",
num:1036, num: 1036,
} }
] ]
} }
@ -83,7 +83,7 @@
}, },
methods: { methods: {
selectItem(index){ selectItem(index) {
this.selectIndex = index; this.selectIndex = index;
}, },
}, },
@ -96,66 +96,66 @@
}); });
}); });
}, },
} }
</script> </script>
<style lang='scss' scoped>
.showClass { <style lang='scss' scoped>
color:#00EBC1; .showClass {
} color: #00EBC1;
}
::v-deep .el-table .cell { ::v-deep .el-table .cell {
padding-left:0px !important; padding-left: 0px !important;
} }
::v-deep .el-table .el-table__header-wrapper th { ::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important; background-color: #064258 !important;
color:#00D1FF; color: #00D1FF;
border-color: #064258 !important; border-color: #064258 !important;
border:0px !important; border: 0px !important;
font-size:12px !important; font-size: 12px !important;
} }
::v-deep .el-table { ::v-deep .el-table {
border:0px !important; border: 0px !important;
background-color: transparent; background-color: transparent;
font-size:12px !important; font-size: 12px !important;
} }
::v-deep .el-table__body-wrapper { ::v-deep .el-table__body-wrapper {
background-color: #064258; background-color: #064258;
color: #fff; color: #fff;
} }
::v-deep .el-table tr:hover td { ::v-deep .el-table tr:hover td {
background: #1b2528 !important; background: #1b2528 !important;
color:#00D1FF; color: #00D1FF;
} }
::v-deep .el-table tr:nth-child(odd) td{ ::v-deep .el-table tr:nth-child(odd) td {
background-color: #13272F ; 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: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 { .congestion {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 310px; // height: 310px;
flex-direction: column; flex-direction: column;
.board{ .board {
height: 280px; height: 275px;
width: 100%; width: 100%;
padding: 0px 0px; padding: 0px 0px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
@ -163,17 +163,17 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top:20px; margin-top: 20px;
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%); background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
.bodySort { .bodySort {
position: relative; position: relative;
display: inline-block; display: inline-block;
width:100%; width: 100%;
height:100%; height: 100%;
overflow: auto; overflow: auto;
padding:20px 10px; padding: 5px 10px;
>div:first-child { >div:first-child {
.barTitle { .barTitle {
@ -187,11 +187,11 @@
>div { >div {
display: inline-flex; display: inline-flex;
width:95%; width: 95%;
height: 41px; height: 41px;
background: #0D517460; background: #0D517460;
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
margin:5px; margin: 5px;
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
@ -213,7 +213,7 @@
opacity: 1; opacity: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin:0 10px; margin: 0 10px;
} }
.lineHight { .lineHight {
@ -222,16 +222,16 @@
background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%); background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%);
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
opacity: 1; opacity: 1;
margin:0 15px; margin: 0 15px;
> .inner { >.inner {
display: inline-flex; display: inline-flex;
height:8px; height: 8px;
background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%);
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
opacity: 1; opacity: 1;
position: relative; position: relative;
top:-7px; top: -7px;
} }
} }
} }
@ -239,26 +239,26 @@
.textStr { .textStr {
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:45px; height: 45px;
flex-direction: row; flex-direction: row;
> div { >div {
display: inline-flex; display: inline-flex;
min-width: 80px; min-width: 80px;
height: 26px; height: 26px;
background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%); background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
color:#fff; color: #fff;
font-size: 12px; font-size: 12px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left:20px; margin-left: 20px;
padding:0 15px; padding: 0 15px;
cursor: pointer; cursor: pointer;
} }
@ -267,11 +267,11 @@
} }
} }
} }
} }
.charts {
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>

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

@ -1,8 +1,22 @@
/* 数据 */ /* 数据 */
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) => {
@ -12,32 +26,37 @@ nameList.map((item, index) => {
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,
}) },
label: { show: false },
});
} else { } else {
dataList.push({ dataList.push({
name: item, name: item,
value: valueList[index], value: valueList[index],
itemStyle:{ itemStyle: {
borderRadius: 6 borderRadius: 6,
} },
}) });
} }
}) });
var options = { var options = {
legend: { legend: {
@ -52,47 +71,48 @@ var options = {
}, },
}, },
grid: { grid: {
top: '25%',//上边距 top: "25%", //上边距
right: '0',//右边距 right: "0", //右边距
left: '0',//左边距 left: "0", //左边距
bottom: "0%",//下边距 bottom: "0%", //下边距
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: nameList, data: nameList,
axisTick: { axisTick: {
show: false //隐藏X轴刻度 show: false, //隐藏X轴刻度
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(49, 217, 255, 0.8)" color: "rgba(49, 217, 255, 0.8)",
} },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: '#B6E6FF', color: "#B6E6FF",
fontSize:8, fontSize: 8,
fontFamily: 'Source Han Sans CN-Regular', fontFamily: "Source Han Sans CN-Regular",
}, },
}, },
yAxis: [{ yAxis: [
type: 'value', {
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]
// } // }
@ -101,60 +121,67 @@ var options = {
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: '交通特征', name: "交通特征",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, 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: '饱和度', name: "饱和度",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, 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: '拥挤度', name: "拥挤度",
type: 'line', type: "line",
symbol: 'circle', symbol: "circle",
symbolSize: 0, symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联 // yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { itemStyle: {
color: '#E2BA74', color: "#E2BA74",
}, },
lineStyle: { lineStyle: {
width: 2, width: 2,
}, },
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 data: [
850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
], // 折线图的数据
}, },
] ],
} };
export default options; export default options;

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

@ -11,44 +11,52 @@ function contains(arr, val) {
} }
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,
// icon: 'circle', // icon: 'circle',
@ -64,18 +72,18 @@ let options = {
radar: { radar: {
name: { name: {
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: 16, fontSize: 16,
}, },
rich: { rich: {
a: { a: {
fontSize: 16, fontSize: 12,
color: '#FFFFFF', color: "#FFFFFF",
padding: [0, 0, 8, 0], padding: [0, 0, 8, 0],
}, },
b: { b: {
fontSize: 18, fontSize: 18,
color: '#ACD3FF', color: "#ACD3FF",
}, },
}, },
formatter: (a) => { formatter: (a) => {
@ -83,14 +91,20 @@ let options = {
return `{a| ${a}}`; return `{a| ${a}}`;
}, },
}, },
center: ['50%', '50%'], center: ["50%", "50%"],
radius: '60%', radius: "60%",
startAngle: 90, startAngle: 90,
splitNumber: 5, splitNumber: 5,
shape: 'circle', shape: "circle",
splitArea: { splitArea: {
areaStyle: { areaStyle: {
color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'], color: [
"#07A3FB99",
"#07A3FB8010",
"#07A3FB30",
"#07A3FB60",
"#07A3FB80",
],
}, },
}, },
axisLabel: { axisLabel: {
@ -102,16 +116,16 @@ let options = {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(50, 72, 130, 0.4)', 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: {
@ -123,11 +137,11 @@ let options = {
[ [
{ {
offset: 0, offset: 0,
color: '#DC6A00', color: "#DC6A00",
}, },
{ {
offset: 1, offset: 1,
color: '#099CCD', color: "#099CCD",
}, },
], ],
false false
@ -135,8 +149,8 @@ let options = {
}, },
}, },
itemStyle: { itemStyle: {
color: 'rgba(245, 166, 35, 0.2)', color: "rgba(245, 166, 35, 0.2)",
borderColor: 'rgba(235, 171, 86, 00)', borderColor: "rgba(235, 171, 86, 00)",
borderWidth: 10, borderWidth: 10,
}, },
data: data1, data: data1,
@ -144,6 +158,4 @@ let options = {
], ],
}; };
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;

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

@ -1,27 +1,28 @@
<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>
<i class="before" @click="selectItem(index, +1)"></i>
<span></span> <span></span>
<div>{{ item.title }}</div> <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 []
} }
@ -29,8 +30,8 @@ import { number } from 'echarts';
}, },
data() { data() {
return { return {
selectIndex:0, selectIndex: 0,
selectLine:-1, selectLine: -1,
} }
}, },
@ -38,7 +39,7 @@ import { number } from 'echarts';
}, },
methods: { methods: {
selectItem(index,num){ selectItem(index, num) {
this.selectIndex = index; this.selectIndex = index;
this.selectLine = num this.selectLine = num
} }
@ -46,30 +47,30 @@ import { number } from 'echarts';
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,55 +101,55 @@ 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;
@ -156,40 +157,41 @@ import { number } from 'echarts';
>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>

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

@ -6,26 +6,26 @@
<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,
@ -36,78 +36,82 @@
ChangesIndictors, ChangesIndictors,
CongestionIndicator, CongestionIndicator,
}, },
data(){ data() {
return { return {
activeName:"first" activeName: "first"
} }
}, },
methods:{ methods: {
changeTabs(){ changeTabs() {
} }
} }
} }
</script> </script>
<style lang='scss' scoped>
::v-deep .el-tabs__item{ <style lang='scss' scoped>
::v-deep .el-tabs__item {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
min-width:128px; min-width: 128px;
position: relative; position: relative;
left:10px; left: 10px;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
min-width:128px; min-width: 128px;
} }
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
background-color: #133242; background-color: #133242;
opacity: 0.1; opacity: 0.1;
} }
.footTabs { .el-tabs__content {
display: inline; height: 100%;
width:99%; }
} .footTabs {
display: inline;
width: 99%;
height: 100%;
}
.content { .content {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
justify-content: space-between; justify-content: space-between;
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
margin-left:19px; margin-left: 19px;
>div { >div {
pointer-events: auto; pointer-events: auto;
} }
.content-w { .content-w {
width:66.5%; width: 66.5%;
} }
.content-max { .content-max {
width:100%; width: 100%;
} }
.content-l { .content-l {
width: 25%; width: 25%;
margin-left:0px; margin-left: 0px;
} }
} }
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
@ -126,8 +130,8 @@
.content-l { .content-l {
width: calc(50%); width: calc(50%);
min-width:460px; min-width: 460px;
margin-right:20px; margin-right: 20px;
} }
@ -135,46 +139,52 @@
.content-m { .content-m {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width: calc(100% / 4 ); width: calc(100% / 4);
margin-right:20px; margin-right: 20px;
.content-m-t { .content-m-t {
width:100%; width: 100%;
height:240px; height: 240px;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.content-r { .content-r {
width: 30%; width: 30%;
} }
} }
.foot{
.foot {
width: 100%; width: 100%;
margin: auto; margin: auto;
display: flex; display: flex;
flex: 1; flex: 1;
pointer-events: none; pointer-events: none;
margin-top: 8px; margin-top: 19px;
>div { >div {
pointer-events: auto; pointer-events: auto;
} }
.foot-w { .foot-w {
width:100%; width: 100%;
} }
.foot-l { .foot-l {
width: 67%; width: 70%;
height: 330px;
} }
.foot-m { .foot-m {
width: 613px; width: 613px;
} }
.foot-r { .foot-r {
margin-left:20px; margin-left: 20px;
width: 33%; width: 33%;
} }
} }
} }
</style> </style>

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

@ -1,54 +1,37 @@
<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>
<div class="board"> <div class="board">
<div class="weaterMain" > <div class="weaterMain">
<el-table <el-table :border="false" :data="tableData" style="width: 100%">
:border="false" <el-table-column prop="nem" label="" width="30">
:data="tableData"
height="790"
style="width: 100%">
<el-table-column
prop="nem"
label=""
width="30">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="address" label="桩号范围">
prop="address"
label="桩号范围"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="name" label="能见度" class-name="showClass">
prop="name"
label="能见度"
class-name="showClass"
>
<template slot-scope="scope"> <template slot-scope="scope">
<span class="showClass">{{scope.row.name}}</span> <span class="showClass">{{ scope.row.name }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="date" label="发生时间">
prop="date"
label="发生时间"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'IndicatorQuery', name: 'IndicatorQuery',
components: { components: {
@ -59,159 +42,159 @@
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'
},{ }, {
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'
},{ }, {
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'
},{ }, {
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'
@ -224,7 +207,7 @@
}, },
methods: { methods: {
selectItem(index){ selectItem(index) {
this.selectIndex = index; this.selectIndex = index;
}, },
}, },
@ -236,59 +219,59 @@
}); });
}); });
}, },
} }
</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 {
padding-left:0px !important;
}
::v-deep .el-table .el-table__header-wrapper th { ::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important; background-color: #064258 !important;
color:#00D1FF; color: #00D1FF;
border-color: #064258 !important; border-color: #064258 !important;
border:0px !important; border: 0px !important;
font-size:12px !important; font-size: 12px !important;
} }
::v-deep .el-table { ::v-deep .el-table {
border:0px !important; border: 0px !important;
background-color: transparent; background-color: transparent;
font-size:12px !important; font-size: 12px !important;
} }
::v-deep .el-table__body-wrapper { ::v-deep .el-table__body-wrapper {
background-color: #064258; background-color: #064258;
color: #fff; color: #fff;
} }
::v-deep .el-table tr:hover td { ::v-deep .el-table tr:hover td {
background: #1b2528 !important; background: #1b2528 !important;
color:#00D1FF; color: #00D1FF;
} }
::v-deep .el-table tr:nth-child(odd) td{ ::v-deep .el-table tr:nth-child(odd) td {
background-color: #13272F ; 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:nth-child(even) td {
border: 0px !important;
}
::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 { .congestion {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -297,28 +280,29 @@
.buttonbar { .buttonbar {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
padding-top:15px; padding-top: 15px;
> .button { >.button {
display: inline-flex; display: inline-flex;
min-width:90px; min-width: 90px;
height:28px; height: 28px;
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1px 10px;; padding: 1px 10px;
;
opacity: 1; opacity: 1;
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: #FFFFFF;
margin-left:15px; margin-left: 15px;
} }
} }
.board{ .board {
height: 880px; height: 880px;
width: 100%; width: 100%;
padding: 0px 0px; padding: 0px 0px;
@ -328,28 +312,28 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top:20px; margin-top: 20px;
.warningList { .warningList {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width:100%; width: 100%;
height:calc(100% - 40px); height: calc(100% - 40px);
>div { >div {
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:138px; height: 138px;
background: #133242; background: #133242;
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1;
overflow: hidden; overflow: hidden;
margin-top:20px; margin-top: 20px;
padding:23px 29px; 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;
@ -357,19 +341,19 @@
>.left-w { >.left-w {
display: inline-flex; display: inline-flex;
width:40%; width: 40%;
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
.left-row { .left-row {
margin:2px; margin: 2px;
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:30px; height: 30px;
flex-direction: row; flex-direction: row;
>.value { >.value {
color:#fff; color: #fff;
} }
.org { .org {
@ -383,10 +367,10 @@
} }
>.right-w { >.right-w {
margin-left:30px; margin-left: 30px;
display: inline-flex; display: inline-flex;
width:100%; width: 100%;
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
.right-row { .right-row {
@ -394,7 +378,7 @@
} }
.right-text { .right-text {
color:#fff; color: #fff;
} }
} }
@ -404,17 +388,19 @@
.weaterMain { .weaterMain {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width:100%; width: 100%;
height: 100%;; height: 100%;
;
.buttons { .buttons {
width:100%; width: 100%;
height:38px; height: 38px;
>div { >div {
display: inline-flex; display: inline-flex;
width:10%; width: 10%;
height:35px; height: 35px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
@ -430,48 +416,49 @@
display: inline-flex; display: inline-flex;
width: 55px; width: 55px;
height: 36px; height: 36px;
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%);
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
z-index:-1; z-index: -1;
} }
.redSel::after { .redSel::after {
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%);
} }
.yelSel::after { .yelSel::after {
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%);
} }
.bluSel::after { .bluSel::after {
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%);
} }
.orgSel::after{ .orgSel::after {
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%);
} }
} }
.weaterTitle::after { .weaterTitle::after {
content: ""; content: "";
position: absolute; position: absolute;
top:0px; top: 0px;
left:0px; left: 0px;
width:100%; width: 100%;
height:2px; height: 2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
} }
.weaterTitle::before { .weaterTitle::before {
content: ""; content: "";
position: absolute; position: absolute;
top:38px; top: 38px;
left:0px; left: 0px;
width:100%; width: 100%;
height:2px; height: 2px;
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%);
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
} }
@ -481,7 +468,7 @@
display: inline-flex; display: inline-flex;
width: 277px; width: 277px;
height: 38px; 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%); 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; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
justify-content: center; justify-content: center;
@ -509,11 +496,11 @@
} }
} }
} }
.charts {
height:180px;
width: 100%;
}
</style> .charts {
height: 180px;
width: 100%;
}
</style>
Write Preview
Loading…
Cancel
Save