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

禅道bug更改

wangqin
zhangzhang 1 year ago
parent
067ad2db33
commit
437572e28d
8 changed files with 631 additions and 521 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. 30
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
  2. 7
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
  3. 396
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
  4. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js
  5. 356
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
  6. 234
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js
  7. 77
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
  8. 40
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue

30
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
View File

@ -21,17 +21,17 @@ let colorend = [
var legendData = []; var legendData = [];
var options = { var options = {
color: [ // color: [
"#2867FF", // "#2867FF",
"#58C3FF", // "#58C3FF",
"#FF6A3B", // "#FF6A3B",
"#FDA474", // "#FDA474",
"#FEE58F", // "#FEE58F",
"#8DFEBF", // "#8DFEBF",
"#66F4DC", // "#66F4DC",
"#33E27D", // "#33E27D",
"#5D8CFE", // "#5D8CFE",
], // ],
title: [ title: [
{ {
text: "999", text: "999",
@ -65,7 +65,7 @@ var options = {
}, },
tooltip: { tooltip: {
show: true, show: true,
trigger: "item", // trigger: "item",
// formatter: "{b} : {c}", // formatter: "{b} : {c}",
}, },
legend: { legend: {
@ -198,7 +198,7 @@ var options = {
}, },
{ {
type: "pie", type: "pie",
radius: ["50%", "40%"], radius: ["40%", "50%"],
center: ["50%", "35%"], center: ["50%", "35%"],
z: 10, z: 10,
label: { label: {
@ -211,7 +211,7 @@ var options = {
itemStyle: { itemStyle: {
normal: { normal: {
borderRadius: "5", borderRadius: "5",
borderWidth: 0, borderWidth: 2,
borderType: "solid", borderType: "solid",
borderCap: "round", borderCap: "round",
borderJoin: "round", borderJoin: "round",
@ -227,7 +227,7 @@ var options = {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "transparent", // 0% 处的颜色 color: colors[params.dataIndex], // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,

7
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
View File

@ -212,7 +212,7 @@ var options = {
}, },
{ {
type: "pie", type: "pie",
radius: ["50%", "40%"], radius: ["40%", "50%"],
center: ["50%", "35%"], center: ["50%", "35%"],
z: 10, z: 10,
label: { label: {
@ -225,7 +225,7 @@ var options = {
itemStyle: { itemStyle: {
normal: { normal: {
borderRadius: "5", borderRadius: "5",
borderWidth: 0, borderWidth: 2,
borderType: "solid", borderType: "solid",
borderCap: "round", borderCap: "round",
borderJoin: "round", borderJoin: "round",
@ -241,7 +241,8 @@ var options = {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "transparent", // 0% 处的颜色 // color: "transparent", // 0% 处的颜色
color: colors[params.dataIndex],
}, },
{ {
offset: 1, offset: 1,

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

@ -1,203 +1,225 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
let color = ['#4278F8F9', 'transparent','#5372C4F9', 'transparent', '#0046FFF9', 'transparent','#FB9434F9', 'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',]; let color = [
let colorend = ['#4278F800', 'transparent', '#5372C400', 'transparent','#0046FF00', 'transparent', '#FB943400', 'transparent','#85410100', 'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',]; "#4278F8F9",
"#5372C4F9",
"#0046FFF9",
"#FB9434F9",
"#854101F9",
"#05E599F9",
"#219F73F9",
"#7CEDD5F9",
];
let colorend = [
"#4278F800",
"#5372C400",
"#0046FF00",
"#FB943400",
"#85410100",
"#05E59900",
"#219F7300",
"#7CEDD500",
];
const datas = [ const datas = [
{ {
name: '客1', name: "客1",
// num:'' // num:''
value: 13456, value: 13456,
}, },
{ {
name: '客2', name: "客2",
value: 13456, value: 13456,
}, },
{ {
name: '客3', name: "客3",
value: 13456, value: 13456,
}, },
{ {
name: '专1', name: "专1",
// num:'' // num:''
value: 13456, value: 13456,
}, },
{ {
name: '专2', name: "专2",
value: 13456, value: 13456,
}, },
{ {
name: '专3', name: "专3",
value: 13456, value: 13456,
}, },
{ {
name: '货1', name: "货1",
value: 13456, value: 13456,
}, },
{ {
name: '货2', name: "货2",
value: 13456, value: 13456,
}, },
]; ];
let sum = 0; let sum = 0;
for (var i of datas) { for (var i of datas) {
sum += i.value; sum += i.value;
} }
var options = { var options = {
tooltip: { tooltip: {
show:true, show: true,
trigger: 'item', // trigger: "item",
formatter: '{a} <br/>{b}: {c} ({d}%)', // formatter: "{a} <br/>{b}: {c} ({d}%)",
backgroundColor:"#ffffff", // backgroundColor: "#ffffff",
textStyle:{ // textStyle: {
color:"#666" // color: "#666",
} // },
},
legend: {
orient: "vertical",
right: 40,
top: 50,
formatter: (name) => {
let res = datas.filter((v) => v.name === name);
let str = "";
str =
"{name1|" +
res[0].name +
"}{name2|" +
res[0].value +
"}辆" +
"{name2|" +
(res[0].value / sum) * 100 +
"}%";
return str;
}, },
legend: { icon: "circle",
orient: 'vertical', itemWidth: 10,
right: 40, itemHeight: 10,
top:50, itemGap: 20,
formatter:(name)=>{ borderRadius: 50,
let res = datas.filter(v => v.name === name); itemStyle: {},
let str = '' textStyle: {
str = '{name1|' + res[0].name + '}{name2|' + res[0].value + '}辆'+ '{name2|' + res[0].value/sum * 100 + '}%' rich: {
return str background: {
background: "#DEDEDE",
fontSize: 14,
align: "left",
padding: [0, 10, 20, 0],
}, },
icon: 'circle', name1: {
itemWidth:10, color: "#fff",
itemHeight:10, fontSize: 14,
itemGap: 20, Width: 12,
borderRadius:50, align: "left",
itemStyle:{ padding: [0, 0, 0, 10],
}, },
textStyle:{ name2: {
rich:{ color: "#37E7FF",
background: { fontSize: 14,
background: '#DEDEDE', align: "left",
fontSize: 14, padding: [0, 0, 0, 10],
align: 'left', },
padding: [0, 10, 20, 0], value: {
}, color: "#ccc",
name1: { fontSize: 14,
color: '#fff', align: "left",
fontSize: 14, },
Width: 12, title: {
align: 'left', // color: '#fff',
padding: [0, 0, 0, 10], color: "#C60020",
}, fontWeight: "bold",
name2: { fontSize: 40,
color: '#37E7FF',
fontSize: 14,
align: 'left',
padding: [0, 0, 0, 10],
},
value: {
color: '#ccc',
fontSize: 14,
align: 'left',
},
title: {
// color: '#fff',
color: "#C60020",
fontWeight:'bold',
fontSize: 40,
}
},
color:"#fff",
}, },
data: [ },
{ color: "#fff",
name:'客1',
backgroundColor:'#5CC5FF',
}, '客2', '客3', '货1',
'货2', '专1', '专2', '专3']
}, },
series: [ data: [
{ {
name: '', name: "客1",
type: 'pie', backgroundColor: "#5CC5FF",
selectedMode: 'single', },
radius: [0, '50%'], "客2",
center:['25%','50%'], "客3",
label: { "货1",
normal: { "货2",
position: 'inner', "专1",
show: true, "专2",
color:'#fff', "专3",
fontSize:14, ],
formatter: '{b}\n{c}辆', },
} series: [
}, {
data: [ name: "",
{value: 2290, name: '客车\n'}, type: "pie",
{value: 1020, name: '货车\n'}, selectedMode: "single",
{value: 3000, name: '专项车\n'}, radius: [0, "50%"],
], center: ["25%", "50%"],
color:['#708FFF','#FB9434','#219F73'] label: {
normal: {
position: "inner",
show: true,
color: "#fff",
fontSize: 14,
formatter: "{b}\n{c}辆",
}, },
{ },
name: '', data: [
type: 'pie', { value: 2290, name: "客车\n" },
radius: ['60%', '70%'], { value: 1020, name: "货车\n" },
center:['25%','50%'], { value: 3000, name: "专项车\n" },
label: { ],
position: 'inner', color: ["#708FFF", "#FB9434", "#219F73"],
show: false },
}, {
data: [ name: "",
{value: 13456, name: '客1'}, type: "pie",
{value: 2000, name: ''}, radius: ["60%", "70%"],
{value: 13456, name: '客2'}, center: ["25%", "50%"],
{value: 2000, name: ''}, label: {
{value: 13456, name: '客3'}, position: "inner",
{value: 2000, name: ''}, show: false,
{value: 13456, name: '货1'}, },
{value: 2000, name: ''}, data: [
{value: 13456, name: '货2'}, { value: 13456, name: "客1" },
{value: 2000, name: ''}, { value: 13456, name: "客2" },
{value: 13456, name: '专1'}, { value: 13456, name: "客3" },
{value: 2000, name: ''}, { value: 13456, name: "货1" },
{value: 13456, name: '专2'}, { value: 13456, name: "货2" },
{value: 2000, name: ''}, { value: 13456, name: "专1" },
{value: 13456, name: '专3'}, { value: 13456, name: "专2" },
{value: 2000, name: ''}, { value: 13456, name: "专3" },
], ],
itemStyle: { itemStyle: {
normal: { normal: {
borderRadius: "5", borderRadius: "5",
borderWidth:0, borderWidth: 2,
borderType:"solid", borderType: "solid",
borderCap:"round", borderCap: "round",
borderJoin:"round", borderJoin: "round",
borderColor:"#064258", borderColor: "#064258",
borderMiterLimit:"20", borderMiterLimit: "20",
color: function(params) { color: function (params) {
return { return {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 1, x2: 1,
y2: 1, y2: 1,
colorStops: [{ colorStops: [
offset: 0, {
color: color[params.dataIndex] // 0% 处的颜色 offset: 0,
}, color: color[params.dataIndex], // 0% 处的颜色
{
offset: 1,
color: colorend[params.dataIndex] // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
}, },
}, {
color:['#009688','#63BA79','#FFB800','#F7ED46','#666666'] offset: 1,
} color: colorend[params.dataIndex], // 100% 处的颜色
] },
} ],
globalCoord: false, // 缺省为 false
};
},
},
},
// color: ["#009688", "#63BA79", "#FFB800", "#F7ED46", "#666666"],
},
],
};
export default options; export default options;

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

@ -75,8 +75,8 @@ var options = {
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: "#B6E6FF", color: "#fff",
fontSize: 13, fontSize: 12,
fontFamily: "Source Han Sans CN-Regular", fontFamily: "Source Han Sans CN-Regular",
}, },
}, },
@ -88,15 +88,15 @@ var options = {
min: 0, min: 0,
splitNumber: 4, splitNumber: 4,
nameTextStyle: { nameTextStyle: {
color: "#B6E6FF", color: "#fff",
fontSize: 13, fontSize: 12,
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: 12,
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];

356
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
View File

@ -1,188 +1,256 @@
<template> <template>
<div class='heightway'> <div class="heightway">
<WgtTitle :title="'交通路段状态'"></WgtTitle> <WgtTitle :title="'交通路段状态'"></WgtTitle>
<div class="board"> <div class="board">
<div class="searchPanel"> <div class="searchPanel">
<div >起始桩号：k</div> <div>起始桩号：k</div>
<el-input class="inputZh" v-model="start"></el-input> <el-input class="inputZh" v-model="start" placeholder="55"></el-input>
<el-input class="inputZh inputJl" v-model="start1"></el-input> <span>+</span>
<div >结束桩号：k</div> <el-input
<el-input class="inputZh" v-model="start2"></el-input> class="inputZh inputJl"
<el-input class="inputZh inputJl" v-model="start3"></el-input> v-model="start1"
<div >路段方向：</div> placeholder="378"
<el-select v-model="area" class="selectRoad" placeholder="请选择"> ></el-input>
<el-option <div>结束桩号：k</div>
v-for="item in areaOptions" <el-input class="inputZh" v-model="start2" placeholder="208"></el-input>
:key="item.value" <span>+</span>
:label="item.label" <el-input
:value="item.value"> class="inputZh inputJl"
</el-option> v-model="start3"
</el-select> placeholder="153"
<el-button type="primary" class="btnSearch" @click="onSubmit">搜索</el-button> ></el-input>
<el-button class="btnReset">重置</el-button> <div>路段方向：</div>
<el-select v-model="area" class="selectRoad" placeholder="请选择">
<el-option
v-for="item in areaOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary" class="btnSearch" @click="onSubmit"
>搜索</el-button
>
<el-button class="btnReset">重置</el-button>
</div>
<div class="tblResult">
<div class="tblTd">
<div>路段名称</div>
<div>方向</div>
<div>状态</div>
<div>平均车速</div>
<div>总车流量</div>
</div> </div>
<div class="tblResult"> <div
<div class="tblTd"> :class="'tblTd ' + (index % 2 === 0 ? 'tblTwo' : '')"
<div>路段名称</div> v-for="(item, index) of list"
<div>方向</div> >
<div>状态</div> <div>{{ item.name }}</div>
<div>平均车速</div> <div>{{ item.direction }}</div>
<div>总车流量</div> <div style="color: #00ebc1">{{ item.state }}</div>
</div> <div>{{ item.speed }}</div>
<div :class="'tblTd ' + (index%2===0?'tblTwo':'')" v-for="(item,index) of list"> <div>{{ item.follow }}</div>
<div>{{ item.name }}</div>
<div>{{ item.direction }}</div>
<div style="color:#00EBC1">{{ item.state }}</div>
<div>{{ item.speed }}</div>
<div>{{ item.follow }}</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script> <script>
import WgtTitle from "../../../widgets/title";
import WgtTitle from '../../../widgets/title'
export default { export default {
name: 'Heightway', name: "Heightway",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
start:'', start: "",
start1:'', start1: "",
start2:'', start2: "",
start3:'', start3: "",
areaOptions: [{ areaOptions: [
value: '济南', {
label: '济南' value: "济南",
}, { label: "济南",
value: '菏泽', },
label: '菏泽' {
}], value: "菏泽",
area: '济南', label: "菏泽",
list:[ },
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, ],
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, area: "济南",
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, list: [
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, {
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, name: "大学城-长清",
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'} direction: "济南方向",
] state: "正常",
speed: "108.14km/h",
} follow: "161",
},
{
name: "大学城-长清",
direction: "济南方向",
state: "正常",
speed: "108.14km/h",
follow: "161",
},
{
name: "大学城-长清",
direction: "济南方向",
state: "正常",
speed: "108.14km/h",
follow: "161",
},
{
name: "大学城-长清",
direction: "济南方向",
state: "正常",
speed: "108.14km/h",
follow: "161",
},
{
name: "大学城-长清",
direction: "济南方向",
state: "正常",
speed: "108.14km/h",
follow: "161",
},
{
name: "大学城-长清",
direction: "济南方向",
state: "正常",
speed: "108.14km/h",
follow: "161",
},
],
};
}, },
created() { created() {},
},
methods: { methods: {
onSubmit() { onSubmit() {
console.log('submit!'); console.log("submit!");
} },
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.el-input__inner { .el-input__inner {
background-color: transparent !important; background-color: transparent !important;
font-size: 12px;
}
::v-deep .el-input__inner {
padding: 0 10px;
}
::v-deep .el-input__inner::placeholder {
color: #9f9f9f;
font-size: 12px;
} }
.heightway { .heightway {
width: 100%; width: 100%;
.board{ .board {
height: 400px; height: 400px;
width: 100%; width: 100%;
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: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding:15px 10px; padding: 15px 10px;
.searchPanel{ .searchPanel {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 40px; height: 40px;
width:100%; width: 100%;
font-size: 14px; font-size: 13px;
margin-bottom: 10px; margin-bottom: 10px;
div{ div {
white-space: nowrap; white-space: nowrap;
margin-right: 4px; margin-right: 4px;
} }
.inputZh{ .inputZh {
width: 47px; width: 60px;
::v-deep{ ::v-deep {
.el-input__inner{ .el-input__inner {
background-color: #064258 !important; background-color: #064258 !important;
border-width: 0px !important; border-width: 0px !important;
}
} }
} }
} .inputJl {
.inputJl{ // width: 60px;
margin-left: 5px; margin-left: 5px;
margin-right: 10px; margin-right: 10px;
} }
.selectRoad{ .selectRoad {
width:87px; width: 87px;
::v-deep{ ::v-deep {
.el-input__inner{ .el-input__inner {
background-color: #064258 !important; background-color: #064258 !important;
border-width: 0px !important; border-width: 0px !important;
font-size: 12px;
}
} }
} }
.btnSearch {
background-color: #00b3cc;
margin-left: 10px;
padding: 6px 15px;
font-size: 13px;
}
.btnReset {
background-color: transparent;
border-color: #00b3cc;
color: white;
padding: 6px 15px;
font-size: 13px;
}
} }
.btnSearch{
background-color: #00B3CC;
margin-left: 10px;
}
.btnReset{
background-color: transparent;
border-color: #00B3CC;
color: white;
}
}
} }
.tblResult{ .tblResult {
height: 300px; height: 300px;
width: 100%;
.tblTd {
width: 100%; width: 100%;
.tblTd{ display: flex;
width:100%; justify-content: space-between;
display: flex; background-color: #064258;
justify-content: space-between; height: 42px;
background-color: #064258; line-height: 42px;
height: 42px; color: #fff;
line-height: 42px; div {
color: #fff; text-align: left;
div{ width: 25%;
text-align: left;
width: 25%;
}
}
.tblTd:first-child{
background-color: #0d3646;
color: #00D1FF;
}
.tblTd>div:first-child{
width: 35%;
margin-left: 20px;
}
.tblTd>div:last-child{
text-align: center;
}
.tblTwo{
background-color: transparent !important;
} }
} }
.tblTd:first-child {
background-color: #0d3646;
color: #00d1ff;
}
.tblTd > div:first-child {
width: 35%;
margin-left: 20px;
}
.tblTd > div:last-child {
text-align: center;
}
.tblTwo {
background-color: transparent !important;
}
}
} }
</style> </style>

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

@ -1,125 +1,137 @@
let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`; let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`;
let xdata = { let xdata = {
value: ['大学城-长清', '长清-孝里', '孝里-平阴北', '平阴北-平阴', '平阴-东平', '东平-梁山东', '梁山东-嘉祥'] value: [
"大学城-长清",
"长清-孝里",
"孝里-平阴北",
"平阴北-平阴",
"平阴-东平",
"东平-梁山东",
"梁山东-嘉祥",
"平阴2-东平",
"东平2-梁山东",
"梁山东2-嘉祥",
],
}; };
let ind = -30;
let sdata = { let sdata = {
value: [32774, 30067, 28774, 30067, 30021, 30067, 32774] value: [32774, 30067, 28774, 30067, 30021, 30067, 32774, 30021, 30067, 32774],
} };
let dataZoomMove = { let dataZoomMove = {
start: 0, start: 0,
end: 4 end: 4,
} };
var options = { var options = {
grid: {
grid: { containLabel: true,
containLabel: true, // 边距自行修改
// 边距自行修改 bottom: "0%",
bottom: '0%', left: "0%",
left: '0%', top: "8%",
top: '20%', right: "10%",
right: '10%', },
xAxis: {
type: "value",
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: [
{
type: "category",
data: xdata.value,
inverse: true,
axisLabel: {
fontSize: "14px",
inside: true,
verticalAlign: "bottom",
color: "#fff",
padding: 10,
margin: -5,
formatter: function (value) {
let index = xdata.value.indexOf(value);
return `{a|Top${(ind += 1)}} {b|${value}}`;
},
rich: {
a: {
fontSize: "10px",
},
b: {
fontSize: "12px",
padding: [0, 0, 0, 70],
},
},
},
axisLine: {
show: false,
}, },
xAxis: { axisTick: {
type: 'value', show: false,
axisLabel: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
}, },
yAxis: [ },
{ ],
type: 'category', series: [
data: xdata.value, {
inverse: true, realtimeSort: true,
axisLabel: { data: sdata.value,
fontSize: '14px', type: "bar",
inside: true, barWidth: 8,
verticalAlign: 'bottom', itemStyle: {
color:'#fff', borderRadius: 40,
padding:10, color: {
margin:-5, type: "linear",
formatter: function (value) { x: 0,
let index = xdata.value.indexOf(value); y: 0,
return `{a|Top${index+1}} {b|${value}}` x2: 1,
}, y2: 0,
rich: { colorStops: [
a: { {
fontSize: '14px', offset: 0,
}, color: "#1cd0f000", // 0% 处的颜色
b: {
fontSize: '14px',
padding: [0, 0, 0, 70],
}
},
}, },
axisLine: { {
show: false, offset: 1,
color: "#1cd0f0", // 100% 处的颜色
}, },
axisTick: { ],
show: false, global: false, // 缺省为 false
} },
} },
], label: {
series: [ show: true,
{ position: "right",
data: sdata.value, distance: -10,
type: 'bar', data: sdata,
barWidth: 8, color: "#fff",
itemStyle: { formatter: (c) => {
borderRadius: 40, return `{a|}{b|${c.value}辆}`;
color: { },
type: 'linear', rich: {
x: 0, a: {
y: 0, widht: 20,
x2: 1, height: 20,
y2: 0, backgroundColor: {
colorStops: [ image: chartIcon,
{
offset: 0,
color: '#1cd0f000', // 0% 处的颜色
},
{
offset: 1,
color: '#1cd0f0', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
}, },
label: { },
show: true, b: {
position: 'right', padding: [0, 0, 0, 10],
distance: -10, },
data: sdata, },
color:'#fff', },
formatter: (c) => { },
return `{a|}{b|${c.value}辆}` ],
}, };
rich: {
a: {
widht: 20,
height: 20,
backgroundColor: {
image: chartIcon
},
},
b:{
padding:[0,0,0,10]
}
}
}
}
]
}
export default options; export default options;

77
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
View File

@ -1,87 +1,98 @@
<template> <template>
<div class='situation'> <div class="situation">
<WgtTitle :title="'路段交通量情况'"></WgtTitle> <WgtTitle :title="'路段交通量情况'"></WgtTitle>
<div class="board"> <div class="board">
<div class="tag"> <div class="tag">
<div class="checked">路段车流量Top10</div> <div :class="active == 1 ? 'checked' : ''" @click="handleChange(1)">
<div>断面交通量Top10</div> 路段车流量Top10
</div>
<div :class="active == 2 ? 'checked' : ''" @click="handleChange(2)">
断面交通量Top10
</div>
</div> </div>
<div class="charts keep-ratio " id="situationEchartBox"></div> <div class="charts keep-ratio" id="situationEchartBox"></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: 'Situation', name: "Situation",
components: { components: {
WgtTitle WgtTitle,
}, },
data() { data() {
return { return {
active: "2",
} };
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('situationEchartBox')); var myChart = echarts.init(
document.getElementById("situationEchartBox")
);
myChart.setOption(chartsStatistics); myChart.setOption(chartsStatistics);
}); });
}); });
}, },
created() { created() {},
},
methods: { methods: {
handleChange(value) {
} console.log(value);
} this.active = value;
},
},
};
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.situation { .situation {
width: 100%; width: 100%;
.board{ .board {
height: 400px; height: 400px;
width: 100%; width: 100%;
padding: 0px 30px; padding: 0px 30px;
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: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.charts { .charts {
margin-top: -40px; // margin-top: -40px;
height: 400px; height: 400px;
width: 100%; width: 100%;
} }
.tag{ .tag {
margin-top: 20px; margin-top: 15px;
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
div{ div {
width: 150px; width: 150px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
border-radius: 20px; border-radius: 20px;
text-align: center; text-align: center;
background-color: #C87800; background-color: #00b3cc;
margin-right: 10px; margin-right: 10px;
} }
.checked{ .checked {
background-color: #00B3CC;; background-color: #c87800 !important;
} }
} }
} }

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

@ -1,5 +1,5 @@
<template> <template>
<div class='TrafficFlow'> <div class="TrafficFlow">
<!-- 交通路网状况 --> <!-- 交通路网状况 -->
<Traffic class="head" /> <Traffic class="head" />
<section class="content"> <section class="content">
@ -11,7 +11,6 @@
<!-- <Unblocked class="content-m" /> --> <!-- <Unblocked class="content-m" /> -->
<!-- 全路车流量状况 --> <!-- 全路车流量状况 -->
<Flowstate class="content-r" /> <Flowstate class="content-r" />
</section> </section>
<section class="foot"> <section class="foot">
<!-- 交通路段状态 --> <!-- 交通路段状态 -->
@ -24,18 +23,16 @@
</template> </template>
<script> <script>
import Traffic from "./components/traffic/";
import Classification from "./components/classification/";
import Traffic from './components/traffic/' import Unblocked from "./components/unblocked/";
import Classification from './components/classification/' import Congestion from "./components/congestion/";
import Unblocked from './components/unblocked/' import Heightway from "./components/heightway/";
import Congestion from './components/congestion/' import Flowstate from "./components/flowstate/";
import Heightway from './components/heightway/' import Situation from "./components/situation/";
import Flowstate from './components/flowstate/'
import Situation from './components/situation/'
export default { export default {
name: 'TrafficFlow', name: "TrafficFlow",
components: { components: {
Traffic, Traffic,
Classification, Classification,
@ -43,12 +40,12 @@ export default {
Congestion, Congestion,
Heightway, Heightway,
Flowstate, Flowstate,
Situation Situation,
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.TrafficFlow { .TrafficFlow {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -71,7 +68,7 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
@ -80,7 +77,6 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
.content-m { .content-m {
width: 260px; width: 260px;
} }
@ -99,22 +95,22 @@ export default {
pointer-events: none; pointer-events: none;
margin-top: 19px; margin-top: 19px;
>div { > div {
pointer-events: auto; pointer-events: auto;
} }
.foot-l { .foot-l {
width: 726px; width: 756px;
margin-right: 20px; margin-right: 20px;
} }
.foot-m { .foot-m {
width: 613px; width: 580px;
margin-right: 20px; margin-right: 20px;
} }
.foot-r { .foot-r {
width: 493px; width: 500px;
} }
} }
} }

Write Preview
Loading…
Cancel
Save