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
Split 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. 163
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
  3. 254
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
  4. 254
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
  5. 254
      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: {
left: 0,
right: 0,
top: "13%",
top: "15%",
bottom: "6%",
containLabel: true,
},

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

@ -1,106 +1,114 @@
<template>
<div class='congestion'>
<div class="congestion">
<WgtTitle :title="'指标变化情况'"></WgtTitle>
<div class="board">
<div id="ChangesIndictors" class="keep-ratio">
</div>
<div id="ChangesIndictors" class="keep-ratio"></div>
</div>
</div>
</template>
<script>
import WgtTitle from '../../../../../widgets/title'
import WgtTitle from "../../../../../widgets/title";
import * as echarts from "echarts";
import chartsStatistics from './assets/charts3';
import chartsStatistics from "./assets/charts3";
export default {
name: 'ChangesIndictors',
name: "ChangesIndictors",
components: {
WgtTitle
WgtTitle,
},
data() {
return {
tableData: [{
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
}, {
date: '2023-12-31 13:00:00',
name: '2640.78m',
address: 'K100+000-K110+000'
},
]
}
tableData: [
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
{
date: "2023-12-31 13:00:00",
name: "2640.78m",
address: "K100+000-K110+000",
},
],
};
},
created() {
},
created() {},
methods: {
selectItem(index) {
this.selectIndex = index;
},
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('ChangesIndictors'));
var myChart = echarts.init(document.getElementById("ChangesIndictors"));
myChart.setOption(chartsStatistics);
});
});
},
}
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.showClass {
color: #00EBC1;
color: #00ebc1;
}
::v-deep .el-table .cell {
@ -109,7 +117,7 @@ export default {
::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important;
color: #00D1FF;
color: #00d1ff;
border-color: #064258 !important;
border: 0px !important;
font-size: 12px !important;
@ -128,11 +136,11 @@ export default {
::v-deep .el-table tr:hover td {
background: #1b2528 !important;
color: #00D1FF;
color: #00d1ff;
}
::v-deep .el-table tr:nth-child(odd) td {
background-color: #13272F;
background-color: #13272f;
border: 0px !important;
}
@ -168,7 +176,7 @@ export default {
#ChangesIndictors {
display: inline-flex;
height: 240px;
height: 280px;
width: 100%;
}
}
@ -179,4 +187,3 @@ export default {
width: 100%;
}
</style>

254
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";
var options = {
color: ["#07A3FB"],
grid: {
left: "2%",
right: "5%",
bottom: "10%",
top: "10%",
containLabel: true,
},
legend: {
show:false,
icon: 'rect',
top: '0%',
right: '5%',
data: ['实时数据'],
itemWidth:18,
itemHeight: 5,
itemGap: 30,
itemStyle:{
color:"#FFD15C",
},
textStyle: {
fontSize: 12,
color: '#fff',
padding: [0, 0, 0, 10],
},
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#07A3FB",
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
color: ["#07A3FB"],
grid: {
left: "0%",
right: "0%",
bottom: "0%",
top: "10%",
containLabel: true,
},
legend: {
show: false,
icon: "rect",
top: "0%",
right: "5%",
data: ["实时数据"],
itemWidth: 18,
itemHeight: 5,
itemGap: 30,
itemStyle: {
color: "#FFD15C",
},
textStyle: {
fontSize: 10,
color: "#fff",
padding: [0, 0, 0, 10],
},
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#07A3FB",
fontSize: 10,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
yAxis: {
type: "value",
min: 0,
max:800,
minInterval: 100,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
},
axisLabel: {
// interval:0,
color: "#fff",
fontSize: 10,
},
axisTick: {
show: false,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
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: {
color: "#07A3FB",
// type: 'dashed', // dotted 虚线
},
},
splitArea: { show: false },
axisLine: {
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 },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 12,
fontFamily: "Bebas",
color: "#BDD8FB",
},
},
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"
},
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% 处的颜色
}
]
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% 处的颜色
},
},
],
},
},
],
},
],
};
export default options;
export default options;

254
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";
var options = {
color: ["#E29E37"],
grid: {
left: "2%",
right: "5%",
bottom: "10%",
top: "10%",
containLabel: true,
},
legend: {
show:false,
icon: 'rect',
top: '0%',
right: '5%',
data: ['实时数据'],
itemWidth:18,
itemHeight: 5,
itemGap: 30,
itemStyle:{
color:"#FFD15C",
},
textStyle: {
fontSize: 12,
color: '#fff',
padding: [0, 0, 0, 10],
},
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#E29E37",
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
color: ["#E29E37"],
grid: {
left: "0%",
right: "0%",
bottom: "0%",
top: "10%",
containLabel: true,
},
legend: {
show: false,
icon: "rect",
top: "0%",
right: "5%",
data: ["实时数据"],
itemWidth: 18,
itemHeight: 5,
itemGap: 30,
itemStyle: {
color: "#FFD15C",
},
textStyle: {
fontSize: 10,
color: "#fff",
padding: [0, 0, 0, 10],
},
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#fff",
fontSize: 10,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
yAxis: {
type: "value",
min: 0,
max:800,
minInterval: 100,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
},
axisLabel: {
// interval:0,
color: "#fff",
fontSize: 10,
},
axisTick: {
show: false,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
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: {
color: "#E29E37",
// type: 'dashed', // dotted 虚线
},
},
splitArea: { show: false },
axisLine: {
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 },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 12,
fontFamily: "Bebas",
color: "#BDD8FB",
},
},
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"
},
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% 处的颜色
}
]
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% 处的颜色
},
},
],
},
},
],
},
],
};
export default options;
export default options;

254
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";
var options = {
color: ["#32BB8A", "#01B3E4"],
grid: {
left: "2%",
right: "5%",
bottom: "10%",
top: "10%",
containLabel: true,
},
legend: {
show:false,
icon: 'rect',
top: '0%',
right: '5%',
data: ['实时数据'],
itemWidth:18,
itemHeight: 5,
itemGap: 30,
itemStyle:{
color:"#FFD15C",
},
textStyle: {
fontSize: 12,
color: '#fff',
padding: [0, 0, 0, 10],
},
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#32BB8A",
fontSize: 12,
},
},
axisLabel: {
// interval:0,
color: "#BDD8FB",
fontSize: 12,
},
axisTick: {
show: false,
color: ["#32BB8A", "#01B3E4"],
grid: {
left: "0%",
right: "0%",
bottom: "0%",
top: "10%",
containLabel: true,
},
legend: {
show: false,
icon: "rect",
top: "0%",
right: "5%",
data: ["实时数据"],
itemWidth: 18,
itemHeight: 5,
itemGap: 30,
itemStyle: {
color: "#FFD15C",
},
textStyle: {
fontSize: 10,
color: "#fff",
padding: [0, 0, 0, 10],
},
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#fff",
fontSize: 10,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
yAxis: {
type: "value",
min: 0,
max:800,
minInterval: 100,
nameTextStyle: {
fontSize: 12,
color: "#BDD8FB",
align: "center",
},
axisLabel: {
// interval:0,
color: "#fff",
fontSize: 10,
},
axisTick: {
show: false,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
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: {
color: "#32BB8A",
// type: 'dashed', // dotted 虚线
},
},
splitArea: { show: false },
axisLine: {
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 },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 12,
fontFamily: "Bebas",
color: "#BDD8FB",
},
},
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"
},
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% 处的颜色
}
]
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% 处的颜色
},
},
],
},
},
],
},
],
};
export default options;
export default options;

Write Preview
Loading…
Cancel
Save