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

更改

wangqin
zhangzhang 8 months ago
parent
566c355d91
commit
1772b34c2d
2 changed files with 213 additions and 86 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/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
  2. 297
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

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

@ -106,6 +106,8 @@ var options = {
},
type: "scroll",
pageButtonPosition: "end",
// animation: true,
// animationDurationUpdate: 8000,
},
series: [
/** 饼图上刻度 */

297
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
View File

@ -1,35 +1,87 @@
<template>
<div class="congestion">
<div class="condition">
<ProgressBar class="keep-ratio" @selectItem="selectProgress" :dataList="dataList" :selectIndex="selectIndex"
:reset="reset" />
<ProgressBar
class="keep-ratio"
@selectItem="selectProgress"
:dataList="dataList"
:selectIndex="selectIndex"
:reset="reset"
/>
<div class="searchPanel">
<RadioGroup :options="[
{ key: '1', label: '菏泽' },
{ key: '3', label: '济南' },
]" v-model="direction" type="button" />
<el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择" @change="changeType">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
<RadioGroup
:options="[
{ key: '1', label: '菏泽' },
{ key: '3', label: '济南' },
]"
v-model="direction"
type="button"
/>
<el-select
v-model="type"
size="mini"
class="selectRoad"
placeholder="请选择"
@change="changeType"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="quarter" size="medium" v-if="type == 'quarter'" class="selectRoad-medium" placeholder="请选择">
<el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"
style="width: 140px">
<el-select
v-model="quarter"
size="medium"
v-if="type == 'quarter'"
class="selectRoad-medium"
placeholder="请选择"
>
<el-option
v-for="item in quarterOptions"
:key="item.value"
:label="item.label"
:value="item.value"
style="width: 140px"
>
</el-option>
</el-select>
<el-date-picker size="mini" v-if="type != 'quarter'" class="selectRoad" v-model="dateTime" style="width: 140px"
:type="type == 'date'
? 'date'
: type == 'month'
? 'month'
: type == 'year'
? 'year'
: ''
" placeholder="请选择" :clearable="false" />
<el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
icon="el-icon-search">查询</el-button>
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
<el-date-picker
size="mini"
v-if="type != 'quarter'"
class="selectRoad"
v-model="dateTime"
style="width: 140px"
:type="
type == 'date'
? 'date'
: type == 'month'
? 'month'
: type == 'year'
? 'year'
: ''
"
placeholder="请选择"
:clearable="false"
/>
<el-button
type="primary"
size="mini"
class="btnSearch"
@click="searchQuery"
icon="el-icon-search"
>查询</el-button
>
<el-button
class="btnReset"
size="mini"
icon="el-icon-refresh-left"
@click="onReset"
>重置</el-button
>
</div>
</div>
@ -37,7 +89,11 @@
<div>
<WgtTitle :title="'感知事件趋势分析'"></WgtTitle>
<div class="unit_con">
<Empty v-if="!chart1List || chart1List.length <= 0" text="暂无数据..." class="empty"></Empty>
<Empty
v-if="!chart1List || chart1List.length <= 0"
text="暂无数据..."
class="empty"
></Empty>
<div v-else id="chart1" class="chart_div"></div>
</div>
</div>
@ -45,15 +101,27 @@
<div>
<WgtTitle :title="'感知事件类型分析'"></WgtTitle>
<div class="unit_con unit_con_02">
<Empty v-show="!chart2List || chart2List.length <= 0" text="暂无数据..." class="empty"></Empty>
<div ref="chart2" class="chart_div" style="width: 540px; height: 270px;" ></div>
<Empty
v-show="!chart2List || chart2List.length <= 0"
text="暂无数据..."
class="empty"
></Empty>
<div
ref="chart2"
class="chart_div"
style="width: 540px; height: 270px"
></div>
</div>
</div>
<div>
<WgtTitle :title="'桩号范围内事件分析趋势'"></WgtTitle>
<div class="unit_con">
<Empty v-show="!chart3List || chart3List.length <= 0" text="暂无数据..." class="empty"></Empty>
<Empty
v-show="!chart3List || chart3List.length <= 0"
text="暂无数据..."
class="empty"
></Empty>
<div id="chart3" class="chart_div"></div>
</div>
</div>
@ -117,7 +185,7 @@ export default {
},
data() {
return {
canvas:null,
canvas: null,
typeOptions: [
{
value: "year",
@ -211,7 +279,7 @@ export default {
],
};
},
created() { },
created() {},
methods: {
selectProgress(item, index) {
this.selectIndex = index;
@ -232,7 +300,6 @@ export default {
let startTime = "";
let qType = this.type == "date" ? "day" : this.type;
if (this.type == "quarter") {
console.log("dateTime", this.quarter);
// let year = moment().year();
// if (this.quarter == 1) {
// startTime = `${year}-01-01 00:00:00`
@ -246,7 +313,6 @@ export default {
} else {
startTime = moment(this.dateTime).format("YYYY-MM-DD HH:mm:ss");
}
console.log("startTime", startTime);
//感知事件趋势
getWarningTrend({
@ -361,7 +427,7 @@ export default {
}
this.$nextTick(() => {
this.initChart1();
})
});
});
//感知事件类型分析
@ -377,7 +443,7 @@ export default {
if (res.code == 200) {
let numbers = [];
this.chart2List = res.data;
let data = res.data.warningTypeList ;
let data = res.data.warningTypeList;
let total = res.data.total;
data.forEach((it) => {
@ -403,6 +469,7 @@ export default {
"{b|" + ((target / total) * 100).toFixed(2) + "%} ",
"{c|" + target + "起}",
];
return arr.join(" ");
};
@ -410,6 +477,12 @@ export default {
chart2.title.subtext = "类型分析";
chart2.series[0].data = numbers;
chart2.tooltip = {
confine: true,
valueFormatter: function (value) {
return value + " 起";
},
};
// 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
// this.myChart2.on('mouseover', (params) => {
// if (params.componentType == 'graphic') {
@ -430,7 +503,7 @@ export default {
}
this.$nextTick(() => {
this.initChart2(types);
})
});
});
//路段范围内桩号分布
getSectionMarkNumber({
@ -502,7 +575,7 @@ export default {
}
this.$nextTick(() => {
this.initChart3();
})
});
});
// if (this.type == "day")
// this.type = "date";
@ -512,15 +585,15 @@ export default {
this.dateTime = moment(new Date()).format("YYYY-MM-DD");
}
},
initChart1(){
this.myChart1 = echarts.init(document.getElementById("chart1"));
this.myChart1.setOption(chart1);
},
initChart3(){
this.myChart3 = echarts.init(document.getElementById("chart3"));
this.myChart3.setOption(chart3);
},
generateChart2(){
initChart1() {
this.myChart1 = echarts.init(document.getElementById("chart1"));
this.myChart1.setOption(chart1);
},
initChart3() {
this.myChart3 = echarts.init(document.getElementById("chart3"));
this.myChart3.setOption(chart3);
},
generateChart2() {
let ele = this.$refs["chart2"];
this.myChart2 = echarts.init(ele);
let parentDiv = ele.firstChild;
@ -528,34 +601,38 @@ export default {
this.canvasChart2.width = parentDiv.offsetWidth;
this.canvasChart2.height = parentDiv.offsetHeight;
parentDiv.appendChild(this.canvasChart2);
},
initChart2(){
if(!this.myChart2){
},
initChart2() {
if (!this.myChart2) {
this.generateChart2();
}
let ele = this.$refs["chart2"];
this.myChart2.setOption(chart2);
const context = this.canvasChart2.getContext('2d')
context.clearRect(0, 0, this.canvasChart2.width, this.canvasChart2.height); // 清空画布
context.lineWidth = 1; // 设置线段宽度
let total = chart2.legend.data.length;
for(let i=0; i<total; i++){
let unitH = 32;
let h = ele.offsetHeight;
let x = 330;
let y = (h - total*unitH)/2 + 3 + i*unitH;
var gr = context.createLinearGradient(330, 0, 500, 0);
gr.addColorStop(0, "rgba(92,197,255,0.6)");
gr.addColorStop(1, "rgba(92,197,255,0)");
drawRoundRect(context, x, y, 220, 24, 12, gr);
}
},
this.myChart2.setOption(chart2);
const context = this.canvasChart2.getContext("2d");
context.clearRect(
0,
0,
this.canvasChart2.width,
this.canvasChart2.height
); // 清空画布
context.lineWidth = 1; // 设置线段宽度
let total = chart2.legend.data.length;
for (let i = 0; i < total; i++) {
let unitH = 32;
let h = ele.offsetHeight;
let x = 330;
let y = (h - total * unitH) / 2 + 3 + i * unitH;
var gr = context.createLinearGradient(330, 0, 500, 0);
gr.addColorStop(0, "rgba(92,197,255,0.6)");
gr.addColorStop(1, "rgba(92,197,255,0)");
drawRoundRect(context, x, y, 220, 24, 12, gr);
}
},
},
mounted() {
getRoadSectionList().then((res) => {
console.log(res);
if (res.code == 200) {
let rows = res.data;
this.dataList = [];
@ -572,12 +649,10 @@ export default {
id: rows[rows.length - 1].id,
});
}
console.log("dataList", this.dataList);
}
this.searchQuery();
});
}
},
};
</script>
@ -592,15 +667,20 @@ export default {
align-items: stretch;
font-size: 14px;
>div {
> div {
flex: 1;
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: 1px solid;
border-image: linear-gradient(360deg,
border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)) 1 1;
rgba(55, 231, 255, 0)
)
1 1;
display: flex;
flex-direction: column;
align-items: stretch;
@ -613,10 +693,13 @@ export default {
.unit_con {
flex: 1;
height: 0; padding: 0;
margin: 95px 20px 30px; position: relative;
height: 0;
padding: 0;
margin: 95px 20px 30px;
position: relative;
// &.unit_con_02{ margin: 105px 0px 20px; }
display: flex; align-items: center;
display: flex;
align-items: center;
}
.empty {
@ -625,7 +708,7 @@ export default {
.chart_div {
width: 100%;
height:200px;
height: 200px;
}
}
@ -717,12 +800,54 @@ export default {
</style>
<style lang="scss">
div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
div.el-popover:has(> .el-date-picker) div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
div.el-picker-panel.el-date-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell,
div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today span,
div.el-picker-panel.el-date-range-picker.el-popper div .el-picker-panel__body .el-picker-panel__content table tr td.today .cell {
div.el-popover:has(> .el-date-picker)
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
span,
div.el-popover:has(> .el-date-picker)
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
.cell,
div.el-picker-panel.el-date-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
span,
div.el-picker-panel.el-date-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
.cell,
div.el-picker-panel.el-date-range-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
span,
div.el-picker-panel.el-date-range-picker.el-popper
div
.el-picker-panel__body
.el-picker-panel__content
table
tr
td.today
.cell {
color: #fff;
}
</style>

Write Preview
Loading…
Cancel
Save