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

更改bug

wangqin
zhangzhang 2 years ago
parent
4725076be5
commit
65d978cd7a
13 changed files with 761 additions and 659 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. 16
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
  2. 20
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
  4. 22
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
  5. 74
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/index.vue
  6. 41
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
  7. 74
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/index.vue
  8. 421
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/index.vue
  9. 76
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/index.vue
  10. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
  11. 27
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
  12. 117
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
  13. 36
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue

16
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue
View File

@ -51,11 +51,13 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
padding:8px 16px 16px; padding: 8px 16px 16px;
.row_01 { .row_01 {
flex-basis: 55%; margin-bottom: 15px; flex-basis: 55%;
display: flex; align-items: stretch; margin-bottom: 15px;
display: flex;
align-items: stretch;
pointer-events: none; pointer-events: none;
> div { > div {
@ -77,14 +79,16 @@ export default {
width: 100%; width: 100%;
flex-basis: 50%; flex-basis: 50%;
margin-bottom: 15px; margin-bottom: 15px;
&:last-child{ margin-bottom: 0;} &:last-child {
margin-bottom: 0;
}
} }
} }
} }
.row_02 { .row_02 {
flex: 1; height: 0; flex: 1;
height: 0;
// pointer-events: none; // pointer-events: none;
} }
} }

20
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue
View File

@ -5,7 +5,7 @@
<section class="row_02"> <section class="row_02">
<!-- 在途车流量车型分类 --> <!-- 在途车流量车型分类 -->
<!-- 全路段拥堵状况 --> <!-- 全路段拥堵状况 -->
<Congestion class="unit_01"></Congestion> <Congestion class="unit_01" />
<!-- 畅通率 --> <!-- 畅通率 -->
<!-- <Unblocked class="content-m" /> --> <!-- <Unblocked class="content-m" /> -->
<!-- 全路车流量状况 --> <!-- 全路车流量状况 -->
@ -48,9 +48,12 @@ export default {
height: 100%; height: 100%;
padding: 14px; padding: 14px;
.row_01 { height: 160px;} .row_01 {
height: 160px;
}
.row_02 { overflow: hidden; .row_02 {
overflow: hidden;
// --keep-ratio: scaleX(1); // --keep-ratio: scaleX(1);
display: flex; display: flex;
pointer-events: none; pointer-events: none;
@ -59,8 +62,13 @@ export default {
> div { > div {
pointer-events: auto; pointer-events: auto;
} }
.unit_01{ flex-basis: 50%; margin-right: 14px;} .unit_01 {
.unit_02{ flex-basis: 50%;} flex-basis: 50%;
margin-right: 14px;
}
.unit_02 {
flex-basis: 50%;
}
} }
.row_03 { .row_03 {
@ -84,7 +92,7 @@ export default {
} }
.unit_03 { .unit_03 {
flex:1; flex: 1;
} }
} }
} }

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

@ -29,7 +29,7 @@ let options = {
left: 0, left: 0,
right: 0, right: 0,
top: "15%", top: "15%",
bottom: "6%", bottom: "8%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {

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

@ -158,12 +158,13 @@ export default {
.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); --keep-ratio: scaleX(1);
.board { .board {
height: 300px; // height: 300px;
flex: 1;
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
@ -175,15 +176,20 @@ export default {
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;
height: 280px; height: 180px;
// width: 100%;
width: 100%; width: 100%;
display: flex;
flex: 1;
// height: 0;
position: relative;
} }
} }
} }
.charts { // .charts {
height: 180px; // height: 180px;
width: 100%; // width: 100%;
} // }
</style> </style>

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

@ -1,76 +1,74 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'近一年交通组成特征指数最大值'"></WgtTitle> <WgtTitle :title="'近一年交通组成特征指数最大值'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="composeFeatures"></div> <div class="charts keep-ratio" id="composeFeatures"></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/charts";
import chartsStatistics from "./assets/charts"; export default {
export default { name: "ComposeFeatures",
name: 'ComposeFeatures',
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
myChart:null, myChart: null,
} };
}, },
created() { created() {},
},
methods: { methods: {
reiszeChart(){ reiszeChart() {
this.$nextTick(() => { this.$nextTick(() => {
if ( this.myChart ) { if (this.myChart) {
this.myChart.resize(); this.myChart.resize();
} }
}); });
}
}, },
update(){
}, },
update() {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById('composeFeatures')); this.myChart = echarts.init(document.getElementById("composeFeatures"));
this.myChart.setOption(chartsStatistics); this.myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board{ .board {
height:150px; // height: 150px;
flex: 1;
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
} }
.charts { }
height:120px; .charts {
height: 120px;
width: 100%; width: 100%;
} }
</style>
</style>

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

@ -165,7 +165,8 @@ export default {
flex-direction: column; flex-direction: column;
.board { .board {
height: 275px; // height: 275px;
flex: 1;
width: 100%; width: 100%;
padding: 0px 0px; padding: 0px 0px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
@ -173,23 +174,29 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top: 20px; margin-top: 10px;
overflow: hidden;
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; flex: 1;
display: inline-block; // height: 120px;
width: 100%; // position: relative;
height: 100%; // display: inline-block;
// width: 100%;
// height: 100%;
overflow: auto; overflow: auto;
padding: 5px 10px; // padding: 5px 10px;
> div:first-child { > div:first-child {
.barTitle { .barTitle {
background: linear-gradient(180deg, #ff6969 0%, #ffb904 100%); background: linear-gradient(180deg, #ff6969 0%, #ffb904 100%);
} }
.text {
font-size: 12px;
}
.lineHight .inner { .lineHight .inner {
background: linear-gradient(180deg, #ff6969 0%, #ffb904 100%); background: linear-gradient(180deg, #ff6969 0%, #ffb904 100%);
} }
@ -197,11 +204,11 @@ export default {
> div { > div {
display: inline-flex; display: inline-flex;
width: 95%; width: 100%;
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;
@ -225,6 +232,10 @@ export default {
margin: 0 10px; margin: 0 10px;
} }
.text {
font-size: 12px;
}
.lineHight { .lineHight {
width: 60%; width: 60%;
height: 8px; height: 8px;
@ -249,7 +260,7 @@ export default {
.textStr { .textStr {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
height: 45px; height: 35px;
flex-direction: row; flex-direction: row;
> div { > div {
@ -278,8 +289,8 @@ export default {
} }
} }
.charts { // .charts {
height: 180px; // height: 180px;
width: 100%; // width: 100%;
} // }
</style> </style>

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

@ -1,76 +1,74 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'近一年拥挤度最大值'"></WgtTitle> <WgtTitle :title="'近一年拥挤度最大值'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="Crowding"></div> <div class="charts keep-ratio" id="Crowding"></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/charts";
import chartsStatistics from "./assets/charts"; export default {
export default { name: "Crowding",
name: 'Crowding',
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
myChart:null, myChart: null,
} };
}, },
created() { created() {},
},
methods: { methods: {
reiszeChart(){ reiszeChart() {
this.$nextTick(() => { this.$nextTick(() => {
if ( this.myChart ) { if (this.myChart) {
this.myChart.resize(); this.myChart.resize();
} }
}); });
}
}, },
update(){
}, },
update() {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById('Crowding')); this.myChart = echarts.init(document.getElementById("Crowding"));
this.myChart.setOption(chartsStatistics); this.myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board{ .board {
height:150px; // height: 150px;
flex: 1;
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
} }
.charts { }
height:120px; .charts {
height: 120px;
width: 100%; width: 100%;
} }
</style>
</style>

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

@ -1,172 +1,176 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'道路指标情况'"></WgtTitle> <WgtTitle :title="'道路指标情况'"></WgtTitle>
<div class="board"> <div class="board">
<div id="roadChart1" class="keep-ratio" > <div id="roadChart1" class="keep-ratio"></div>
<div id="roadChart2" class="keep-ratio"></div>
</div> <div id="roadChart3" class="keep-ratio"></div>
<div id="roadChart2" class="keep-ratio" >
</div>
<div id="roadChart3" class="keep-ratio" >
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import WgtTitle from '../../../../../widgets/title' import WgtTitle from "../../../../../widgets/title";
import chartsStatistics from './assets/chart1'; import chartsStatistics from "./assets/chart1";
import chartsStatistics2 from './assets/chart2'; import chartsStatistics2 from "./assets/chart2";
import chartsStatistics3 from './assets/chart3'; import chartsStatistics3 from "./assets/chart3";
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
name: 'RoadIndicators', name: "RoadIndicators",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
tableData: [{ tableData: [
date: '2023-12-31 13:00:00', {
name: '2640.78m', date: "2023-12-31 13:00:00",
address: 'K100+000-K110+000' 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() { 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() {},
methods: { methods: {
selectItem(index){ selectItem(index) {
this.selectIndex = index; this.selectIndex = index;
}, },
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('roadChart1')); var myChart = echarts.init(document.getElementById("roadChart1"));
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
var myChart2 = echarts.init(document.getElementById('roadChart2')); var myChart2 = echarts.init(document.getElementById("roadChart2"));
myChart2.setOption(chartsStatistics2); myChart2.setOption(chartsStatistics2);
var myChart3 = echarts.init(document.getElementById('roadChart3')); var myChart3 = echarts.init(document.getElementById("roadChart3"));
myChart3.setOption(chartsStatistics3); myChart3.setOption(chartsStatistics3);
}); });
}); });
}, },
} };
</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{ ::v-deep .el-table tr:nth-child(even) td {
border:0px !important; 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: 188px; // height: 188px;
flex-direction: column; flex-direction: column;
.board{ .board {
height: 150px; // height: 150px;
flex: 1;
width: 100%; width: 100%;
padding: 0px 0px; padding: 0px 0px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
@ -175,73 +179,77 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
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%);
> div { > div {
display: inline-flex; display: inline-flex;
width:33%; width: 33%;
height:100%; height: 100%;
position: relative; position: relative;
top:-10px; top: -10px;
} }
.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;
color: #37E7FF; color: #37e7ff;
>.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 {
font-size: 14px; font-size: 14px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #F4A125 color: #f4a125;
} }
} }
} }
>.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 {
@ -249,84 +257,112 @@
} }
.right-text { .right-text {
color:#fff; color: #fff;
} }
} }
} }
} }
.weaterMain { .weaterMain {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width:100%; width: 100%;
height: 40px; height: 40px;
.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;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 800; font-weight: 800;
color: #FFFFFF; color: #ffffff;
z-index: 9; z-index: 9;
} }
>div::after { > div::after {
content: ""; content: "";
position: absolute; position: absolute;
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;
} }
@ -336,21 +372,25 @@
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;
align-items: center; align-items: center;
>span.text { > span.text {
display: inline-flex; display: inline-flex;
font-size: 16px; font-size: 16px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
.num { .num {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
@ -358,17 +398,14 @@
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; .charts {
height: 180px;
width: 100%; width: 100%;
} }
</style>
</style>

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

@ -1,76 +1,76 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'近一年饱和度最大值'"></WgtTitle> <WgtTitle :title="'近一年饱和度最大值'"></WgtTitle>
<div class="board"> <div class="board">
<div class="charts keep-ratio " id="temperatureTrend"></div> <div class="charts keep-ratio" id="temperatureTrend"></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/charts";
import chartsStatistics from "./assets/charts"; export default {
export default { name: "SaturationMax",
name: 'SaturationMax',
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
myChart:null, myChart: null,
} };
}, },
created() { created() {},
},
methods: { methods: {
reiszeChart(){ reiszeChart() {
this.$nextTick(() => { this.$nextTick(() => {
if ( this.myChart ) { if (this.myChart) {
this.myChart.resize(); this.myChart.resize();
} }
}); });
}
}, },
update(){
}, },
update() {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
this.myChart = echarts.init(document.getElementById('temperatureTrend')); this.myChart = echarts.init(
document.getElementById("temperatureTrend")
);
this.myChart.setOption(chartsStatistics); this.myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
.board{ .board {
height:150px; // height: 150px;
flex: 1;
width: 100%; width: 100%;
padding: 0px 20px; padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
} }
.charts { }
height:120px; .charts {
height: 120px;
width: 100%; width: 100%;
} }
</style>
</style>

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

@ -81,7 +81,7 @@ var options = {
top: "25%", //上边距 top: "25%", //上边距
right: "0", //右边距 right: "0", //右边距
left: "0", //左边距 left: "0", //左边距
bottom: "0%", //下边距 bottom: "5%", //下边距
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {

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

@ -92,7 +92,7 @@
<div class="chartOrg"> <div class="chartOrg">
<div class="itemChart"> <div class="itemChart">
<div class="title">上月指标</div> <div class="title">上月指标</div>
<div id="chart2" class=""></div> <div id="chart2" class="keep-ratio"></div>
</div> </div>
<div class="itemChart"> <div class="itemChart">
<div class="title">本月指标</div> <div class="title">本月指标</div>
@ -317,20 +317,20 @@ export default {
gr.addColorStop(1, "rgba(92,197,255,0)"); gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)"); gr.addColorStop(0, "rgba(92,197,255,0.5)");
// 绘制圆角矩形 // 绘制圆角矩形
drawRoundRect(context, 98, 11, 90, 22, 12, gr); drawRoundRect(context, 98, 41, 90, 22, 12, gr);
var gr = context.createLinearGradient(35, 0, 75, 0); var gr = context.createLinearGradient(35, 0, 75, 0);
// 颜色断点 // 颜色断点
gr.addColorStop(1, "rgba(92,197,255,0)"); gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)"); gr.addColorStop(0, "rgba(92,197,255,0.5)");
drawRoundRect(context, -1, 146, 80, 20, 12, gr); drawRoundRect(context, -1, 176, 80, 20, 12, gr);
var gr = context.createLinearGradient(230, 0, 275, 0); var gr = context.createLinearGradient(230, 0, 275, 0);
// 颜色断点 // 颜色断点
gr.addColorStop(1, "rgba(92,197,255,0)"); gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)"); gr.addColorStop(0, "rgba(92,197,255,0.5)");
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度
drawRoundRect(context, 211, 146, 220, 20, 12, gr); drawRoundRect(context, 211, 176, 220, 20, 12, gr);
const domMap3 = document.getElementById("chart3"); const domMap3 = document.getElementById("chart3");
let parentDiv3 = domMap3.firstChild; let parentDiv3 = domMap3.firstChild;
@ -348,20 +348,20 @@ export default {
gr.addColorStop(1, "rgba(92,197,255,0)"); gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)"); gr.addColorStop(0, "rgba(92,197,255,0.5)");
// 绘制圆角矩形 // 绘制圆角矩形
drawRoundRect(context3, 98, 14, 90, 20, 12, gr); drawRoundRect(context3, 98, 44, 90, 20, 12, gr);
var gr = context3.createLinearGradient(35, 0, 75, 0); var gr = context3.createLinearGradient(35, 0, 75, 0);
// 颜色断点 // 颜色断点
gr.addColorStop(1, "rgba(92,197,255,0)"); gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)"); gr.addColorStop(0, "rgba(92,197,255,0.5)");
drawRoundRect(context3, -1, 148, 80, 20, 12, gr); drawRoundRect(context3, -1, 178, 80, 20, 12, gr);
var gr = context3.createLinearGradient(240, 0, 290, 0); var gr = context3.createLinearGradient(240, 0, 290, 0);
// 颜色断点 // 颜色断点
gr.addColorStop(1, "rgba(92,197,255,0)"); gr.addColorStop(1, "rgba(92,197,255,0)");
gr.addColorStop(0, "rgba(92,197,255,0.5)"); gr.addColorStop(0, "rgba(92,197,255,0.5)");
context3.lineWidth = 1; // 设置线段宽度 context3.lineWidth = 1; // 设置线段宽度
drawRoundRect(context3, 211, 148, 200, 20, 12, gr); drawRoundRect(context3, 211, 178, 200, 20, 12, gr);
}); });
}); });
}, },
@ -374,14 +374,15 @@ export default {
} }
.congestion { .congestion {
width: 100%; // width: 100%;
margin: 5px 0; // margin: 5px 0;
.body { .body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 395px; // height: 395px;
flex: 1;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
@ -417,6 +418,7 @@ export default {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #30bfec; color: #30bfec;
padding-top: 20px;
} }
#chart2 { #chart2 {
@ -441,9 +443,10 @@ export default {
} }
.board { .board {
height: 320px; // height: 320px;
flex: 1;
width: 100%; width: 100%;
padding: 10px 0px; padding-top: 10px;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;

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

@ -4,9 +4,9 @@
<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" style="margin-right: 0" />
</section> </section>
<section class="content"> <section class="content-c">
<TrafficIndicators class="content-max" /> <TrafficIndicators class="content-max" />
</section> </section>
<section class="foot"> <section class="foot">
@ -79,36 +79,43 @@ export default {
height: 100%; 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;
// width: 100%;
> div { // margin: auto;
pointer-events: auto; // display: flex;
} // flex: 1;
// pointer-events: none;
.content-w { // margin-top: 19px;
width: 66.5%; // flex-basis: 20%;
}
// > div {
.content-max { // pointer-events: auto;
width: 100%; // }
}
// .content-w {s
.content-l { // width: 66.5%;
width: 25%; // }
margin-left: 0px;
} // .content-l {
} // margin-right: 20px;
// flex-basis: 25%;
// display: flex;
// flex-direction: column;
// }
// }
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; display: flex;
flex-direction: column;
// position: relative;
z-index: 6; z-index: 6;
color: white; color: white;
@ -119,36 +126,48 @@ export default {
flex: 1; flex: 1;
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
flex-basis: 25%;
.content-l { > div {
width: calc(50%); pointer-events: auto;
min-width: 460px;
margin-right: 20px;
} }
.content-m { // .content-w {
display: inline-flex; // width: 66.5%;
flex-direction: column; // }
width: calc(100% / 4);
margin-right: 20px;
.content-m-t { .content-l {
width: 100%; margin-right: 20px;
height: 240px; flex-basis: 25%;
margin-bottom: 20px; display: flex;
flex-direction: column;
} }
} }
.content-c {
width: 100%;
margin: auto;
display: flex;
// flex: 1;
pointer-events: none;
margin-top: 19px;
flex-basis: 50%;
.content-r { .content-max {
width: 30%; flex: 1;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
} }
} }
.foot { .foot {
width: 100%; width: 100%;
margin: auto; margin: auto;
display: flex; display: flex;
flex: 1; height: 0;
// flex: 1;
flex-basis: 35%;
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
@ -161,8 +180,8 @@ export default {
} }
.foot-l { .foot-l {
width: 70%; flex-basis: 70%;
height: 330px; // height: 330px;
} }
.foot-m { .foot-m {
@ -171,7 +190,9 @@ export default {
.foot-r { .foot-r {
margin-left: 20px; margin-left: 20px;
width: 33%; flex-basis: 30%;
flex: 1;
display: flex;
} }
} }
} }

36
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="TrafficFlowMax"> <div class="TrafficFlowMax">
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> <el-tabs class="full_tab" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="综合指标分析" name="first"> <el-tab-pane label="综合指标分析" name="first">
<IndicatorAnalysis /> <IndicatorAnalysis />
</el-tab-pane> </el-tab-pane>
@ -33,6 +33,22 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.full_tab {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
::v-deep .el-tabs__header {
}
::v-deep .el-tabs__content {
flex: 1;
.el-tab-pane {
width: 100%;
height: 100%;
}
}
}
::v-deep .el-tabs__item { ::v-deep .el-tabs__item {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
@ -58,10 +74,10 @@ export default {
margin: 0px !important; margin: 0px !important;
} }
.footTabs { // .footTabs {
display: inline; // display: inline;
width: 99%; // width: 99%;
} // }
.TrafficFlowMax { .TrafficFlowMax {
width: 100%; width: 100%;
@ -87,11 +103,11 @@ export default {
pointer-events: auto; pointer-events: auto;
} }
.content-l { // .content-l {
width: calc(50%); // width: calc(50%);
min-width: 460px; // min-width: 460px;
margin-right: 20px; // margin-right: 20px;
} // }
.content-m { .content-m {
display: inline-flex; display: inline-flex;

Write Preview
Loading…
Cancel
Save