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

Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

wangqin
刘朋 9 months ago
parent
e2886bf971 be3ed5acaf
commit
805d5fc370
5 changed files with 464 additions and 463 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/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
  2. 159
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
  3. 252
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
  4. 252
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
  5. 252
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js

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

@ -36,7 +36,7 @@ let options = {
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
top: "13%", top: "15%",
bottom: "6%", bottom: "6%",
containLabel: true, containLabel: true,
}, },

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

@ -1,106 +1,114 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'指标变化情况'"></WgtTitle> <WgtTitle :title="'指标变化情况'"></WgtTitle>
<div class="board"> <div class="board">
<div id="ChangesIndictors" class="keep-ratio"> <div id="ChangesIndictors" class="keep-ratio"></div>
</div>
</div> </div>
</div> </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,
}, },
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",
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",
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', {
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",
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",
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', {
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",
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",
},
],
};
}, },
created() { 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('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 {
@ -109,7 +117,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;
@ -128,11 +136,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;
} }
@ -168,7 +176,7 @@ export default {
#ChangesIndictors { #ChangesIndictors {
display: inline-flex; display: inline-flex;
height: 240px; height: 280px;
width: 100%; width: 100%;
} }
} }
@ -179,4 +187,3 @@ export default {
width: 100%; width: 100%;
} }
</style> </style>

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

@ -1,137 +1,135 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var options = { var options = {
color: ["#07A3FB"],
color: ["#07A3FB"], grid: {
grid: { left: "0%",
left: "2%", right: "0%",
right: "5%", bottom: "0%",
bottom: "10%", top: "10%",
top: "10%", containLabel: true,
containLabel: true, },
}, legend: {
legend: { show: false,
show:false, icon: "rect",
icon: 'rect', top: "0%",
top: '0%', right: "5%",
right: '5%', data: ["实时数据"],
data: ['实时数据'], itemWidth: 18,
itemWidth:18, itemHeight: 5,
itemHeight: 5, itemGap: 30,
itemGap: 30, itemStyle: {
itemStyle:{ color: "#FFD15C",
color:"#FFD15C", },
}, textStyle: {
textStyle: { fontSize: 10,
fontSize: 12, color: "#fff",
color: '#fff', padding: [0, 0, 0, 10],
padding: [0, 0, 0, 10], },
}, },
}, xAxis: {
xAxis: { type: "category",
type: "category", axisLine: {
axisLine: { lineStyle: {
lineStyle: { color: "#07A3FB",
color: "#07A3FB", fontSize: 10,
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
}, },
data: [ },
"1月", axisLabel: {
"2月", // interval:0,
"3月", color: "#fff",
"4月", fontSize: 10,
"5月", },
"6月", axisTick: {
"7月", show: false,
"8月", },
"9月", data: [
"10月", "1月",
"11月", "2月",
"12月", "3月",
], "4月",
}, "5月",
yAxis: { "6月",
type: "value", "7月",
min: 0, "8月",
max:800, "9月",
minInterval: 100, "10月",
nameTextStyle: { "11月",
fontSize: 12, "12月",
color: "#BDD8FB", ],
align: "center", },
yAxis: {
type: "value",
min: 0,
max: 800,
minInterval: 100,
nameTextStyle: {
fontSize: 10,
color: "#fff",
align: "center",
},
splitLine: {
lineStyle: {
color: "#07A3FB",
// type: 'dashed', // dotted 虚线
}, },
splitLine: { },
lineStyle: { splitArea: { show: false },
color: "#07A3FB", axisLine: {
// type: 'dashed', // dotted 虚线 show: false,
}, },
axisTick: {
show: false,
},
axisLabel: {
fontSize: 10,
fontFamily: "Bebas",
color: "#fff",
},
},
series: [
{
type: "line",
// symbol: "none",
showSymbol: false,
smooth: true, // 是否曲线
name: "实时数据", // 图例对应类别
data: [112, 122, 723, 623, 530, 612, 626, 728, 531, 423, 625, 423, 423], // 纵坐标数据
lineStyle: {
color: "#07A3FB",
}, },
splitArea: { show: false }, areaStyle: {
axisLine: { // 区域颜色
show: false, // color: new graphic.LinearGradient(0, 0, 0, 1, [
}, // {
axisTick: { // offset: 0,
show: false, // color: "#5090FF",
}, // },
axisLabel: { // {
fontSize: 12, // offset: 1,
fontFamily: "Bebas", // color: "#1057E5",
color: "#BDD8FB", // },
}, // ]),
}, color: {
series: [ type: "linear",
{ x: 0, //右
type: "line", y: 0, //下
// symbol: "none", x2: 0, //左
showSymbol: false, y2: 1, //上
smooth: true, // 是否曲线 colorStops: [
name: "实时数据", // 图例对应类别 {
data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据 offset: 0.1,
lineStyle :{ color: "#07A3FB99", // 0% 处的颜色
color:"#07A3FB"
},
areaStyle: {
// 区域颜色
// color: new graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#5090FF",
// },
// {
// offset: 1,
// color: "#1057E5",
// },
// ]),
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: '#07A3FB99' // 0% 处的颜色
},
{
offset: 1,
opacity:0.01,
color: '#07A3FB00' // 100% 处的颜色
}
]
}, },
}, {
offset: 1,
opacity: 0.01,
color: "#07A3FB00", // 100% 处的颜色
},
],
},
}, },
},
], ],
}; };
export default options; export default options;

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

@ -1,137 +1,135 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var options = { var options = {
color: ["#E29E37"],
color: ["#E29E37"], grid: {
grid: { left: "0%",
left: "2%", right: "0%",
right: "5%", bottom: "0%",
bottom: "10%", top: "10%",
top: "10%", containLabel: true,
containLabel: true, },
}, legend: {
legend: { show: false,
show:false, icon: "rect",
icon: 'rect', top: "0%",
top: '0%', right: "5%",
right: '5%', data: ["实时数据"],
data: ['实时数据'], itemWidth: 18,
itemWidth:18, itemHeight: 5,
itemHeight: 5, itemGap: 30,
itemGap: 30, itemStyle: {
itemStyle:{ color: "#FFD15C",
color:"#FFD15C", },
}, textStyle: {
textStyle: { fontSize: 10,
fontSize: 12, color: "#fff",
color: '#fff', padding: [0, 0, 0, 10],
padding: [0, 0, 0, 10], },
}, },
}, xAxis: {
xAxis: { type: "category",
type: "category", axisLine: {
axisLine: { lineStyle: {
lineStyle: { color: "#fff",
color: "#E29E37", fontSize: 10,
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
}, },
data: [ },
"1月", axisLabel: {
"2月", // interval:0,
"3月", color: "#fff",
"4月", fontSize: 10,
"5月", },
"6月", axisTick: {
"7月", show: false,
"8月", },
"9月", data: [
"10月", "1月",
"11月", "2月",
"12月", "3月",
], "4月",
}, "5月",
yAxis: { "6月",
type: "value", "7月",
min: 0, "8月",
max:800, "9月",
minInterval: 100, "10月",
nameTextStyle: { "11月",
fontSize: 12, "12月",
color: "#BDD8FB", ],
align: "center", },
yAxis: {
type: "value",
min: 0,
max: 800,
minInterval: 100,
nameTextStyle: {
fontSize: 10,
color: "#fff",
align: "center",
},
splitLine: {
lineStyle: {
color: "#E29E37",
// type: 'dashed', // dotted 虚线
}, },
splitLine: { },
lineStyle: { splitArea: { show: false },
color: "#E29E37", axisLine: {
// type: 'dashed', // dotted 虚线 show: false,
}, },
axisTick: {
show: false,
},
axisLabel: {
fontSize: 10,
fontFamily: "Bebas",
color: "#fff",
},
},
series: [
{
type: "line",
// symbol: "none",
showSymbol: false,
smooth: true, // 是否曲线
name: "实时数据", // 图例对应类别
data: [112, 122, 723, 623, 530, 612, 626, 728, 531, 423, 625, 423, 423], // 纵坐标数据
lineStyle: {
color: "#E29E37",
}, },
splitArea: { show: false }, areaStyle: {
axisLine: { // 区域颜色
show: false, // color: new graphic.LinearGradient(0, 0, 0, 1, [
}, // {
axisTick: { // offset: 0,
show: false, // color: "#5090FF",
}, // },
axisLabel: { // {
fontSize: 12, // offset: 1,
fontFamily: "Bebas", // color: "#1057E5",
color: "#BDD8FB", // },
}, // ]),
}, color: {
series: [ type: "linear",
{ x: 0, //右
type: "line", y: 0, //下
// symbol: "none", x2: 0, //左
showSymbol: false, y2: 1, //上
smooth: true, // 是否曲线 colorStops: [
name: "实时数据", // 图例对应类别 {
data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据 offset: 0.1,
lineStyle :{ color: "#E29E3799", // 0% 处的颜色
color:"#E29E37"
},
areaStyle: {
// 区域颜色
// color: new graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#5090FF",
// },
// {
// offset: 1,
// color: "#1057E5",
// },
// ]),
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: '#E29E3799' // 0% 处的颜色
},
{
offset: 1,
opacity:0.01,
color: '#E29E3700' // 100% 处的颜色
}
]
}, },
}, {
offset: 1,
opacity: 0.01,
color: "#E29E3700", // 100% 处的颜色
},
],
},
}, },
},
], ],
}; };
export default options; export default options;

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

@ -1,137 +1,135 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
var options = { var options = {
color: ["#32BB8A", "#01B3E4"],
color: ["#32BB8A", "#01B3E4"], grid: {
grid: { left: "0%",
left: "2%", right: "0%",
right: "5%", bottom: "0%",
bottom: "10%", top: "10%",
top: "10%", containLabel: true,
containLabel: true, },
}, legend: {
legend: { show: false,
show:false, icon: "rect",
icon: 'rect', top: "0%",
top: '0%', right: "5%",
right: '5%', data: ["实时数据"],
data: ['实时数据'], itemWidth: 18,
itemWidth:18, itemHeight: 5,
itemHeight: 5, itemGap: 30,
itemGap: 30, itemStyle: {
itemStyle:{ color: "#FFD15C",
color:"#FFD15C", },
}, textStyle: {
textStyle: { fontSize: 10,
fontSize: 12, color: "#fff",
color: '#fff', padding: [0, 0, 0, 10],
padding: [0, 0, 0, 10], },
}, },
}, xAxis: {
xAxis: { type: "category",
type: "category", axisLine: {
axisLine: { lineStyle: {
lineStyle: { color: "#fff",
color: "#32BB8A", fontSize: 10,
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
}, },
data: [ },
"1月", axisLabel: {
"2月", // interval:0,
"3月", color: "#fff",
"4月", fontSize: 10,
"5月", },
"6月", axisTick: {
"7月", show: false,
"8月", },
"9月", data: [
"10月", "1月",
"11月", "2月",
"12月", "3月",
], "4月",
}, "5月",
yAxis: { "6月",
type: "value", "7月",
min: 0, "8月",
max:800, "9月",
minInterval: 100, "10月",
nameTextStyle: { "11月",
fontSize: 12, "12月",
color: "#BDD8FB", ],
align: "center", },
yAxis: {
type: "value",
min: 0,
max: 800,
minInterval: 100,
nameTextStyle: {
fontSize: 10,
color: "#fff",
align: "center",
},
splitLine: {
lineStyle: {
color: "#32BB8A",
// type: 'dashed', // dotted 虚线
}, },
splitLine: { },
lineStyle: { splitArea: { show: false },
color: "#32BB8A", axisLine: {
// type: 'dashed', // dotted 虚线 show: false,
}, },
axisTick: {
show: false,
},
axisLabel: {
fontSize: 10,
fontFamily: "Bebas",
color: "#fff",
},
},
series: [
{
type: "line",
// symbol: "none",
showSymbol: false,
smooth: true, // 是否曲线
name: "实时数据", // 图例对应类别
data: [112, 122, 723, 623, 530, 612, 626, 728, 531, 423, 625, 423, 423], // 纵坐标数据
lineStyle: {
color: "#32BB8A",
}, },
splitArea: { show: false }, areaStyle: {
axisLine: { // 区域颜色
show: false, // color: new graphic.LinearGradient(0, 0, 0, 1, [
}, // {
axisTick: { // offset: 0,
show: false, // color: "#5090FF",
}, // },
axisLabel: { // {
fontSize: 12, // offset: 1,
fontFamily: "Bebas", // color: "#1057E5",
color: "#BDD8FB", // },
}, // ]),
}, color: {
series: [ type: "linear",
{ x: 0, //右
type: "line", y: 0, //下
// symbol: "none", x2: 0, //左
showSymbol: false, y2: 1, //上
smooth: true, // 是否曲线 colorStops: [
name: "实时数据", // 图例对应类别 {
data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据 offset: 0.1,
lineStyle :{ color: "#32BB8A99", // 0% 处的颜色
color:"#32BB8A"
},
areaStyle: {
// 区域颜色
// color: new graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#5090FF",
// },
// {
// offset: 1,
// color: "#1057E5",
// },
// ]),
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.1,
color: '#32BB8A99' // 0% 处的颜色
},
{
offset: 1,
opacity:0.01,
color: '#32BB8A01' // 100% 处的颜色
}
]
}, },
}, {
offset: 1,
opacity: 0.01,
color: "#32BB8A01", // 100% 处的颜色
},
],
},
}, },
},
], ],
}; };
export default options; export default options;
Write Preview
Loading…
Cancel
Save