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

禅道bug更改

wangqin
zhangzhang 2 years 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
Split 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 options = {
color: [
"#2867FF",
"#58C3FF",
"#FF6A3B",
"#FDA474",
"#FEE58F",
"#8DFEBF",
"#66F4DC",
"#33E27D",
"#5D8CFE",
],
// color: [
// "#2867FF",
// "#58C3FF",
// "#FF6A3B",
// "#FDA474",
// "#FEE58F",
// "#8DFEBF",
// "#66F4DC",
// "#33E27D",
// "#5D8CFE",
// ],
title: [
{
text: "999",
@ -65,7 +65,7 @@ var options = {
},
tooltip: {
show: true,
trigger: "item",
// trigger: "item",
// formatter: "{b} : {c}",
},
legend: {
@ -198,7 +198,7 @@ var options = {
},
{
type: "pie",
radius: ["50%", "40%"],
radius: ["40%", "50%"],
center: ["50%", "35%"],
z: 10,
label: {
@ -211,7 +211,7 @@ var options = {
itemStyle: {
normal: {
borderRadius: "5",
borderWidth: 0,
borderWidth: 2,
borderType: "solid",
borderCap: "round",
borderJoin: "round",
@ -227,7 +227,7 @@ var options = {
colorStops: [
{
offset: 0,
color: "transparent", // 0% 处的颜色
color: colors[params.dataIndex], // 0% 处的颜色
},
{
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",
radius: ["50%", "40%"],
radius: ["40%", "50%"],
center: ["50%", "35%"],
z: 10,
label: {
@ -225,7 +225,7 @@ var options = {
itemStyle: {
normal: {
borderRadius: "5",
borderWidth: 0,
borderWidth: 2,
borderType: "solid",
borderCap: "round",
borderJoin: "round",
@ -241,7 +241,8 @@ var options = {
colorStops: [
{
offset: 0,
color: "transparent", // 0% 处的颜色
// color: "transparent", // 0% 处的颜色
color: colors[params.dataIndex],
},
{
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";
let color = ['#4278F8F9', 'transparent','#5372C4F9', 'transparent', '#0046FFF9', 'transparent','#FB9434F9', 'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',];
let colorend = ['#4278F800', 'transparent', '#5372C400', 'transparent','#0046FF00', 'transparent', '#FB943400', 'transparent','#85410100', 'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',];
let color = [
"#4278F8F9",
"#5372C4F9",
"#0046FFF9",
"#FB9434F9",
"#854101F9",
"#05E599F9",
"#219F73F9",
"#7CEDD5F9",
];
let colorend = [
"#4278F800",
"#5372C400",
"#0046FF00",
"#FB943400",
"#85410100",
"#05E59900",
"#219F7300",
"#7CEDD500",
];
const datas = [
{
name: '客1',
// num:''
value: 13456,
},
{
name: '客2',
value: 13456,
},
{
name: '客3',
value: 13456,
},
{
name: '专1',
// num:''
value: 13456,
},
{
name: '专2',
value: 13456,
},
{
name: '专3',
value: 13456,
},
{
name: '货1',
value: 13456,
},
{
name: '货2',
value: 13456,
},
];
{
name: "客1",
// num:''
value: 13456,
},
{
name: "客2",
value: 13456,
},
{
name: "客3",
value: 13456,
},
{
name: "专1",
// num:''
value: 13456,
},
{
name: "专2",
value: 13456,
},
{
name: "专3",
value: 13456,
},
{
name: "货1",
value: 13456,
},
{
name: "货2",
value: 13456,
},
];
let sum = 0;
let sum = 0;
for (var i of datas) {
sum += i.value;
sum += i.value;
}
var options = {
tooltip: {
show:true,
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
backgroundColor:"#ffffff",
textStyle:{
color:"#666"
}
tooltip: {
show: true,
// trigger: "item",
// formatter: "{a} <br/>{b}: {c} ({d}%)",
// backgroundColor: "#ffffff",
// textStyle: {
// 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: {
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
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 20,
borderRadius: 50,
itemStyle: {},
textStyle: {
rich: {
background: {
background: "#DEDEDE",
fontSize: 14,
align: "left",
padding: [0, 10, 20, 0],
},
icon: 'circle',
itemWidth:10,
itemHeight:10,
itemGap: 20,
borderRadius:50,
itemStyle:{
name1: {
color: "#fff",
fontSize: 14,
Width: 12,
align: "left",
padding: [0, 0, 0, 10],
},
textStyle:{
rich:{
background: {
background: '#DEDEDE',
fontSize: 14,
align: 'left',
padding: [0, 10, 20, 0],
},
name1: {
color: '#fff',
fontSize: 14,
Width: 12,
align: 'left',
padding: [0, 0, 0, 10],
},
name2: {
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",
name2: {
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,
},
data: [
{
name:'客1',
backgroundColor:'#5CC5FF',
}, '客2', '客3', '货1',
'货2', '专1', '专2', '专3']
},
color: "#fff",
},
series: [
{
name: '',
type: 'pie',
selectedMode: 'single',
radius: [0, '50%'],
center:['25%','50%'],
label: {
normal: {
position: 'inner',
show: true,
color:'#fff',
fontSize:14,
formatter: '{b}\n{c}辆',
}
},
data: [
{value: 2290, name: '客车\n'},
{value: 1020, name: '货车\n'},
{value: 3000, name: '专项车\n'},
],
color:['#708FFF','#FB9434','#219F73']
data: [
{
name: "客1",
backgroundColor: "#5CC5FF",
},
"客2",
"客3",
"货1",
"货2",
"专1",
"专2",
"专3",
],
},
series: [
{
name: "",
type: "pie",
selectedMode: "single",
radius: [0, "50%"],
center: ["25%", "50%"],
label: {
normal: {
position: "inner",
show: true,
color: "#fff",
fontSize: 14,
formatter: "{b}\n{c}辆",
},
{
name: '',
type: 'pie',
radius: ['60%', '70%'],
center:['25%','50%'],
label: {
position: 'inner',
show: false
},
data: [
{value: 13456, name: '客1'},
{value: 2000, name: ''},
{value: 13456, name: '客2'},
{value: 2000, name: ''},
{value: 13456, name: '客3'},
{value: 2000, name: ''},
{value: 13456, name: '货1'},
{value: 2000, name: ''},
{value: 13456, name: '货2'},
{value: 2000, name: ''},
{value: 13456, name: '专1'},
{value: 2000, name: ''},
{value: 13456, name: '专2'},
{value: 2000, name: ''},
{value: 13456, name: '专3'},
{value: 2000, name: ''},
],
itemStyle: {
normal: {
borderRadius: "5",
borderWidth:0,
borderType:"solid",
borderCap:"round",
borderJoin:"round",
borderColor:"#064258",
borderMiterLimit:"20",
color: function(params) {
return {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: color[params.dataIndex] // 0% 处的颜色
},
{
offset: 1,
color: colorend[params.dataIndex] // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
},
data: [
{ value: 2290, name: "客车\n" },
{ value: 1020, name: "货车\n" },
{ value: 3000, name: "专项车\n" },
],
color: ["#708FFF", "#FB9434", "#219F73"],
},
{
name: "",
type: "pie",
radius: ["60%", "70%"],
center: ["25%", "50%"],
label: {
position: "inner",
show: false,
},
data: [
{ value: 13456, name: "客1" },
{ value: 13456, name: "客2" },
{ value: 13456, name: "客3" },
{ value: 13456, name: "货1" },
{ value: 13456, name: "货2" },
{ value: 13456, name: "专1" },
{ value: 13456, name: "专2" },
{ value: 13456, name: "专3" },
],
itemStyle: {
normal: {
borderRadius: "5",
borderWidth: 2,
borderType: "solid",
borderCap: "round",
borderJoin: "round",
borderColor: "#064258",
borderMiterLimit: "20",
color: function (params) {
return {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: color[params.dataIndex], // 0% 处的颜色
},
},
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;

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

@ -75,8 +75,8 @@ var options = {
},
axisLabel: {
show: true,
color: "#B6E6FF",
fontSize: 13,
color: "#fff",
fontSize: 12,
fontFamily: "Source Han Sans CN-Regular",
},
},
@ -88,15 +88,15 @@ var options = {
min: 0,
splitNumber: 4,
nameTextStyle: {
color: "#B6E6FF",
fontSize: 13,
color: "#fff",
fontSize: 12,
fontFamily: "Source Han Sans CN-Regular",
align: "left",
verticalAlign: "center",
},
axisLabel: {
fontSize: 13,
color: "#B6E6FF",
fontSize: 12,
color: "#fff",
fontFamily: "HarmonyOS Sans-Regular",
formatter: function (value, index) {
return yList[index];

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

@ -1,188 +1,256 @@
<template>
<div class='heightway'>
<div class="heightway">
<WgtTitle :title="'交通路段状态'"></WgtTitle>
<div class="board">
<div class="searchPanel">
<div >起始桩号：k</div>
<el-input class="inputZh" v-model="start"></el-input>
<el-input class="inputZh inputJl" v-model="start1"></el-input>
<div >结束桩号：k</div>
<el-input class="inputZh" v-model="start2"></el-input>
<el-input class="inputZh inputJl" v-model="start3"></el-input>
<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 class="searchPanel">
<div>起始桩号：k</div>
<el-input class="inputZh" v-model="start" placeholder="55"></el-input>
<span>+</span>
<el-input
class="inputZh inputJl"
v-model="start1"
placeholder="378"
></el-input>
<div>结束桩号：k</div>
<el-input class="inputZh" v-model="start2" placeholder="208"></el-input>
<span>+</span>
<el-input
class="inputZh inputJl"
v-model="start3"
placeholder="153"
></el-input>
<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 class="tblResult">
<div class="tblTd">
<div>路段名称</div>
<div>方向</div>
<div>状态</div>
<div>平均车速</div>
<div>总车流量</div>
</div>
<div :class="'tblTd ' + (index%2===0?'tblTwo':'')" v-for="(item,index) of list">
<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
:class="'tblTd ' + (index % 2 === 0 ? 'tblTwo' : '')"
v-for="(item, index) of list"
>
<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>
</template>
<script>
import WgtTitle from '../../../widgets/title'
import WgtTitle from "../../../widgets/title";
export default {
name: 'Heightway',
name: "Heightway",
components: {
WgtTitle
WgtTitle,
},
data() {
return {
start:'',
start1:'',
start2:'',
start3:'',
areaOptions: [{
value: '济南',
label: '济南'
}, {
value: '菏泽',
label: '菏泽'
}],
area: '济南',
list:[
{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'},
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}
]
}
start: "",
start1: "",
start2: "",
start3: "",
areaOptions: [
{
value: "济南",
label: "济南",
},
{
value: "菏泽",
label: "菏泽",
},
],
area: "济南",
list: [
{
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",
},
{
name: "大学城-长清",
direction: "济南方向",
state: "正常",
speed: "108.14km/h",
follow: "161",
},
],
};
},
created() {
},
created() {},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
console.log("submit!");
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.el-input__inner {
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 {
width: 100%;
.board{
.board {
height: 400px;
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;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding:15px 10px;
.searchPanel{
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width:100%;
font-size: 14px;
margin-bottom: 10px;
div{
white-space: nowrap;
margin-right: 4px;
}
.inputZh{
width: 47px;
::v-deep{
.el-input__inner{
background-color: #064258 !important;
border-width: 0px !important;
padding: 15px 10px;
.searchPanel {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 100%;
font-size: 13px;
margin-bottom: 10px;
div {
white-space: nowrap;
margin-right: 4px;
}
.inputZh {
width: 60px;
::v-deep {
.el-input__inner {
background-color: #064258 !important;
border-width: 0px !important;
}
}
}
}
.inputJl{
margin-left: 5px;
margin-right: 10px;
}
.selectRoad{
width:87px;
::v-deep{
.el-input__inner{
background-color: #064258 !important;
border-width: 0px !important;
.inputJl {
// width: 60px;
margin-left: 5px;
margin-right: 10px;
}
.selectRoad {
width: 87px;
::v-deep {
.el-input__inner {
background-color: #064258 !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{
height: 300px;
.tblResult {
height: 300px;
width: 100%;
.tblTd {
width: 100%;
.tblTd{
width:100%;
display: flex;
justify-content: space-between;
background-color: #064258;
height: 42px;
line-height: 42px;
color: #fff;
div{
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;
display: flex;
justify-content: space-between;
background-color: #064258;
height: 42px;
line-height: 42px;
color: #fff;
div {
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;
}
}
}
</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 xdata = {
value: ['大学城-长清', '长清-孝里', '孝里-平阴北', '平阴北-平阴', '平阴-东平', '东平-梁山东', '梁山东-嘉祥']
value: [
"大学城-长清",
"长清-孝里",
"孝里-平阴北",
"平阴北-平阴",
"平阴-东平",
"东平-梁山东",
"梁山东-嘉祥",
"平阴2-东平",
"东平2-梁山东",
"梁山东2-嘉祥",
],
};
let ind = -30;
let sdata = {
value: [32774, 30067, 28774, 30067, 30021, 30067, 32774]
}
value: [32774, 30067, 28774, 30067, 30021, 30067, 32774, 30021, 30067, 32774],
};
let dataZoomMove = {
start: 0,
end: 4
}
start: 0,
end: 4,
};
var options = {
grid: {
containLabel: true,
// 边距自行修改
bottom: '0%',
left: '0%',
top: '20%',
right: '10%',
grid: {
containLabel: true,
// 边距自行修改
bottom: "0%",
left: "0%",
top: "8%",
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: {
type: 'value',
axisLabel: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
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${index+1}} {b|${value}}`
},
rich: {
a: {
fontSize: '14px',
},
b: {
fontSize: '14px',
padding: [0, 0, 0, 70],
}
},
},
],
series: [
{
realtimeSort: true,
data: sdata.value,
type: "bar",
barWidth: 8,
itemStyle: {
borderRadius: 40,
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#1cd0f000", // 0% 处的颜色
},
axisLine: {
show: false,
{
offset: 1,
color: "#1cd0f0", // 100% 处的颜色
},
axisTick: {
show: false,
}
}
],
series: [
{
data: sdata.value,
type: 'bar',
barWidth: 8,
itemStyle: {
borderRadius: 40,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#1cd0f000', // 0% 处的颜色
},
{
offset: 1,
color: '#1cd0f0', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
],
global: false, // 缺省为 false
},
},
label: {
show: true,
position: "right",
distance: -10,
data: sdata,
color: "#fff",
formatter: (c) => {
return `{a|}{b|${c.value}辆}`;
},
rich: {
a: {
widht: 20,
height: 20,
backgroundColor: {
image: chartIcon,
},
label: {
show: true,
position: 'right',
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]
}
}
}
}
]
}
},
b: {
padding: [0, 0, 0, 10],
},
},
},
},
],
};
export default options;

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

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

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

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

Write Preview
Loading…
Cancel
Save