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

更改

wangqin
zhangzhang 9 months ago
parent
47ae677dfa
commit
aaa919c9cf
6 changed files with 114 additions and 118 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. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
  2. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
  3. 104
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
  4. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
  5. 48
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
  6. 4
      ruoyi-ui/vue.config.js

2
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
View File

@ -73,7 +73,7 @@ var options = {
}, },
legend: { legend: {
orient: "vertical", orient: "vertical",
right: 40, right: 0,
top: 50, top: 50,
formatter: (name) => { formatter: (name) => {
let res = datas.filter((v) => v.name === name); let res = datas.filter((v) => v.name === name);

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

@ -29,8 +29,8 @@ let options = {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
borderColor: "rgba(3, 31, 71, .0)", // borderColor: "rgba(3, 31, 71, .0)",
formatter: "健康监测<br>{b1}：{c1}人", formatter: "健康监测<br>{b1}：{c1}人",
}, },
grid: { grid: {
@ -106,7 +106,7 @@ let options = {
{ {
name: "交通特征", name: "交通特征",
itemStyle: { itemStyle: {
color: "#01DDB7", color: "#32BB8A",
}, },
}, },
{ {

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

@ -1,30 +1,38 @@
<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="action == 1 ? 'action' : 'textbar'"
@click="handleClick(1)"
>
拥挤度 拥挤度
</div> </div>
<div class="textbar"> <div
:class="action == 2 ? 'action' : 'textbar'"
@click="handleClick(2)"
>
饱和度 饱和度
</div> </div>
<div class="textbar"> <div
:class="action == 3 ? 'action' : 'textbar'"
@click="handleClick(3)"
>
交通组成特征指数 交通组成特征指数
</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 }} </span>
TOP{{ index + 1 }}
</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"
</div> :style="{ width: (it.num / count) * 100 + '%' }"
></div>
</div> </div>
<span class="num"> <span class="num">
{{ it.num }} {{ it.num }}
@ -36,22 +44,24 @@
</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 {
action: "1",
count: 2000, count: 2000,
tableData: [{ tableData: [
{
name: "大学城-长清", name: "大学城-长清",
num: 1036, num: 1036,
}, { },
{
name: "大学城-长清", name: "大学城-长清",
num: 1036, num: 1036,
}, },
@ -74,34 +84,34 @@ export default {
{ {
name: "大学城-长清", name: "大学城-长清",
num: 1036, num: 1036,
}
]
}
}, },
],
created() { };
}, },
created() {},
methods: { methods: {
selectItem(index) { selectItem(index) {
this.selectIndex = index; this.selectIndex = index;
}, },
handleClick(value) {
this.action = value;
},
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('ChangesIndictors')); var myChart = echarts.init(document.getElementById("ChangesIndictors"));
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}); });
}); });
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.showClass { .showClass {
color: #00EBC1; color: #00ebc1;
} }
::v-deep .el-table .cell { ::v-deep .el-table .cell {
@ -110,7 +120,7 @@ export default {
::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;
@ -129,11 +139,11 @@ export default {
::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;
} }
@ -175,30 +185,29 @@ export default {
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%);
} }
.lineHight .inner { .lineHight .inner {
background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); background: linear-gradient(180deg, #ff6969 0%, #ffb904 100%);
} }
} }
>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;
color: #FFFFFF; color: #ffffff;
align-items: center; align-items: center;
.barTitle { .barTitle {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -207,8 +216,8 @@ export default {
font-size: 14px; font-size: 14px;
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
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;
justify-content: center; justify-content: center;
@ -219,15 +228,15 @@ export default {
.lineHight { .lineHight {
width: 60%; width: 60%;
height: 8px; height: 8px;
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;
@ -243,18 +252,18 @@ export default {
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;
@ -263,7 +272,7 @@ export default {
} }
.action { .action {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
} }
} }
} }
@ -274,4 +283,3 @@ export default {
width: 100%; width: 100%;
} }
</style> </style>

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

@ -90,8 +90,8 @@ var options = {
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: "#B6E6FF", color: "#fff",
fontSize: 8, fontSize: 10,
fontFamily: "Source Han Sans CN-Regular", fontFamily: "Source Han Sans CN-Regular",
}, },
}, },
@ -103,15 +103,15 @@ var options = {
min: 0, min: 0,
splitNumber: 5, splitNumber: 5,
nameTextStyle: { nameTextStyle: {
color: "#B6E6FF", color: "#fff",
fontSize: 13, fontSize: 10,
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: 10,
color: "#B6E6FF", color: "#fff",
fontFamily: "HarmonyOS Sans-Regular", fontFamily: "HarmonyOS Sans-Regular",
// formatter:function(value,index){ // formatter:function(value,index){
// return yList[index] // return yList[index]

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

@ -1,5 +1,5 @@
<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" />
@ -17,16 +17,16 @@
</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,
@ -38,26 +38,23 @@ export default {
}, },
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 { ::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;
@ -82,7 +79,6 @@ export default {
height: 100%; height: 100%;
} }
.content { .content {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
@ -91,7 +87,7 @@ export default {
margin-top: 19px; margin-top: 19px;
margin-left: 19px; margin-left: 19px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
@ -101,14 +97,12 @@ export default {
.content-max { .content-max {
width: 100%; width: 100%;
} }
.content-l { .content-l {
width: 25%; width: 25%;
margin-left: 0px; margin-left: 0px;
} }
} }
.TrafficFlow { .TrafficFlow {
@ -118,7 +112,6 @@ export default {
z-index: 6; z-index: 6;
color: white; color: white;
.content { .content {
width: 100%; width: 100%;
margin: auto; margin: auto;
@ -127,15 +120,12 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
.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;
flex-direction: column; flex-direction: column;
@ -162,13 +152,12 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
.foot-w { .foot-w {
width: 100%; width: 100%;
} }
.foot-l { .foot-l {
@ -187,4 +176,3 @@ export default {
} }
} }
</style> </style>

4
ruoyi-ui/vue.config.js
View File

@ -50,8 +50,8 @@ module.exports = {
// target: `http://10.0.81.204:8087`, //现场后台 刘文阁 // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
// target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁 // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
// target: `http://10.168.78.135:8087`, //王钦 // target: `http://10.168.78.135:8087`, //王钦
target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2 // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
// target: `http://10.168.68.42:8087`, //王思祥 target: `http://10.168.68.42:8087`, //王思祥
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "", ["^" + process.env.VUE_APP_BASE_API]: "",

Write Preview
Loading…
Cancel
Save