652 lines
17 KiB
Vue
652 lines
17 KiB
Vue
<template>
|
||
<div class="box">
|
||
<header>
|
||
<div class="title">决策建议</div>
|
||
</header>
|
||
<div class="list1">
|
||
<el-date-picker
|
||
v-model="daterange"
|
||
type="daterange"
|
||
value-format="yyyy-MM-dd"
|
||
:range-separator="$t('datePicker.range')"
|
||
:start-placeholder="$t('datePicker.start')"
|
||
:end-placeholder="$t('datePicker.end')"
|
||
>
|
||
</el-date-picker>
|
||
<!--人员聚集高发区域Top5-->
|
||
<div class="list1-people">
|
||
<div class="people-left">
|
||
<div class="inner-title">人员聚集高发区域Top5</div>
|
||
<div class="left-list" v-for="item in top5AreaList">
|
||
<div class="left-list1">{{ item.title }}</div>
|
||
<div
|
||
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||
@click="chooseSelectArea(item)"
|
||
>
|
||
{{ item.areaName }}
|
||
</div>
|
||
<div class="left-list3">{{ item.num }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="people-right">
|
||
<div class="inner-title">高发事件Top5</div>
|
||
<div class="top5EventStyle" id="top5-event-chart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--相关性分析-->
|
||
<div class="list2">
|
||
<div class="inner-title">
|
||
相关性分析
|
||
<span
|
||
style="
|
||
font-size: 14px;
|
||
margin-left: 8px;
|
||
padding: 2px 20px;
|
||
background: #015478;
|
||
border-radius: 4px;
|
||
"
|
||
>分析过程</span
|
||
>
|
||
</div>
|
||
<div class="list2-conclusion">
|
||
结论：<span>{{ relevanceName1 }}</span
|
||
>、<span>{{ relevanceName2 }}</span
|
||
>、<span>{{ relevanceName1 }}</span> 与<span>{{ areaName }}</span
|
||
>人员聚集较强相关。
|
||
</div>
|
||
<div class="relevanceChart" id="relevance-chart"></div>
|
||
</div>
|
||
<!--管理力量分析建议-->
|
||
<div class="list3">
|
||
<div class="inner-title">管理力量分析建议</div>
|
||
<div class="list3-analysis">
|
||
<div class="analysis-item">
|
||
<div class="item-div">
|
||
<div>管理人员</div>
|
||
<div>{{ analysis.manageNum }}人</div>
|
||
</div>
|
||
</div>
|
||
<div class="analysis-item">
|
||
<div class="item-div">
|
||
<div>环卫人员</div>
|
||
<div>{{ analysis.sanitationNum }}人</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analysis-item">
|
||
<div class="item-div">
|
||
<div>垃圾运送</div>
|
||
<div>{{ analysis.garbageNum }}次/天</div>
|
||
</div>
|
||
</div>
|
||
<div class="analysis-item">
|
||
<div class="item-div">
|
||
<div>机械化作业</div>
|
||
<div>{{ analysis.mechanNum }}次/天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="analysis-advice">
|
||
<span style="font-size: 14px; color: #fff">决策建议：</span>
|
||
预测<span
|
||
style="
|
||
font-size: 14px;
|
||
color: rgb(0 255 255);
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
"
|
||
>{{ analysis.area }}</span
|
||
>
|
||
下周人流量较高，建议增加环卫人员数量、垃圾收运频次
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import bus from "@/views/layout/bus";
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
data() {
|
||
return {
|
||
daterange: null,
|
||
dataForm: {
|
||
title: "",
|
||
startDate: "",
|
||
endDate: "",
|
||
},
|
||
//人员聚集高发区域TOP5list
|
||
top5AreaList: [],
|
||
//选中的高发区域
|
||
selectArea: "",
|
||
//相关性
|
||
relevanceName1: "垃圾桶满溢",
|
||
relevanceName2: "路面不洁",
|
||
relevanceName3: "违规停车",
|
||
areaName: "第一海水浴场",
|
||
//管理力量分析
|
||
analysis: {
|
||
manageNum: 3,
|
||
sanitationNum: 14,
|
||
garbageNum: 2,
|
||
mechanNum: 1,
|
||
advice: "",
|
||
area: "第一海水浴场",
|
||
},
|
||
};
|
||
},
|
||
components: {},
|
||
created() {},
|
||
mounted() {
|
||
//获取高发区域
|
||
this.getTop5Area();
|
||
//获取高发事件
|
||
this.getTop5EventCharts();
|
||
//获取相关性分析
|
||
this.getRelevanceCharts();
|
||
},
|
||
methods: {
|
||
//选择选中的高发区域
|
||
chooseSelectArea(item) {
|
||
this.selectArea = item.areaId;
|
||
},
|
||
//获取高发区域
|
||
getTop5Area() {
|
||
this.top5AreaList = [
|
||
{
|
||
title: "TOP1",
|
||
areaName: "第一海水浴场",
|
||
areaId: "1",
|
||
num: "223",
|
||
},
|
||
{
|
||
title: "TOP2",
|
||
areaName: "石老人海水浴场",
|
||
areaId: "2",
|
||
num: "123",
|
||
},
|
||
{
|
||
title: "TOP3",
|
||
areaName: "金沙滩海水浴场",
|
||
areaId: "3",
|
||
num: "111",
|
||
},
|
||
{
|
||
title: "4",
|
||
areaName: "第一海水浴场",
|
||
areaId: "4",
|
||
num: "65",
|
||
},
|
||
{
|
||
title: "5",
|
||
areaName: "第一海水浴场",
|
||
areaId: "5",
|
||
num: "32",
|
||
},
|
||
];
|
||
},
|
||
//获取高发事件
|
||
getTop5EventCharts() {
|
||
let eventChart = echarts.init(
|
||
document.getElementById("top5-event-chart")
|
||
);
|
||
let option = {
|
||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||
grid: {
|
||
top: "20px",
|
||
left: "40px",
|
||
bottom: "20px",
|
||
},
|
||
tooltip: {
|
||
// 鼠标悬浮提示框显示 X和Y 轴数据
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||
borderColor: "rgba(32, 33, 36,0.20)",
|
||
borderWidth: 1,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "12",
|
||
},
|
||
shadowStyle: {
|
||
color: "rgba(74, 211, 164, 0.15)",
|
||
width: "20",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
|
||
axisLine: {
|
||
show: false, // 不显示坐标轴线
|
||
lineStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false, // 隐藏坐标轴的刻度线
|
||
alignWithLabel: true, // 图形于标题居中
|
||
inside: true, // 刻度线是指向内部还是外部
|
||
length: 0, // x轴上指向标题刻度线的长度
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false, // 隐藏坐标轴的刻度线
|
||
alignWithLabel: true, // 图形于标题居中
|
||
inside: true, // 刻度线是指向内部还是外部
|
||
length: 0, // x轴上指向标题刻度线的长度
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff", // 坐标轴文字颜色
|
||
fontSize: 10, // 坐标轴文字大小
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
// 直线指示器样式设置
|
||
color: "#48b",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [250, 200, 150, 110, 100, 50],
|
||
type: "bar",
|
||
itemStyle: {
|
||
normal: {
|
||
//这里是重点
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{ offset: 1, color: "#FFDD53" },
|
||
{ offset: 0, color: "#FF515A" },
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
eventChart.setOption(option);
|
||
},
|
||
//获取相关性分析
|
||
getRelevanceCharts() {
|
||
let eventChart = echarts.init(document.getElementById("relevance-chart"));
|
||
let option = {
|
||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||
grid: {
|
||
top: "20px",
|
||
right: "40px",
|
||
left: "40px",
|
||
bottom: "20px",
|
||
},
|
||
|
||
tooltip: {
|
||
data: ["1", "2", "3", "4"],
|
||
// 鼠标悬浮提示框显示 X和Y 轴数据
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(32, 33, 36,.7)",
|
||
borderColor: "rgba(32, 33, 36,0.20)",
|
||
borderWidth: 1,
|
||
textStyle: {
|
||
// 文字提示样式
|
||
color: "#fff",
|
||
fontSize: "12",
|
||
},
|
||
shadowStyle: {
|
||
color: "rgba(74, 211, 164, 0.15)",
|
||
width: "20",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["11.04", "11.05", "11.06", "11.07", "11.08", "11.09", "11.10"],
|
||
axisLine: {
|
||
show: false, // 不显示坐标轴线
|
||
lineStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false, // 隐藏坐标轴的刻度线
|
||
alignWithLabel: true, // 图形于标题居中
|
||
inside: true, // 刻度线是指向内部还是外部
|
||
length: 0, // x轴上指向标题刻度线的长度
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisTick: {
|
||
show: false, // 隐藏坐标轴的刻度线
|
||
alignWithLabel: true, // 图形于标题居中
|
||
inside: true, // 刻度线是指向内部还是外部
|
||
length: 0, // x轴上指向标题刻度线的长度
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff", // 坐标轴文字颜色
|
||
fontSize: 10, // 坐标轴文字大小
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false, // 隐藏坐标轴的刻度线
|
||
lineStyle: {
|
||
// 直线指示器样式设置
|
||
color: "#48b",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
axisTick: {
|
||
show: false, // 隐藏坐标轴的刻度线
|
||
alignWithLabel: true, // 图形于标题居中
|
||
inside: true, // 刻度线是指向内部还是外部
|
||
length: 0, // x轴上指向标题刻度线的长度
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff", // 坐标轴文字颜色
|
||
fontSize: 10, // 坐标轴文字大小
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
// 直线指示器样式设置
|
||
color: "#48b",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "人员数量",
|
||
data: [14, 10, 4, 11, 10, 12, 6, 13],
|
||
type: "bar",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{ offset: 0, color: "#00DCFB" },
|
||
{ offset: 1, color: "#14566B" },
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "路面不洁",
|
||
type: "line",
|
||
yAxisIndex: 1,
|
||
data: [150, 165, 160, 150, 130, 140, 160],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#faa12f", //圆点颜色
|
||
borderColor: "rgba(251,222,153,0.5)",
|
||
borderWidth: 4,
|
||
lineStyle: {
|
||
//折线颜色大小
|
||
type: "solid", //'dotted'虚线 'solid'实线
|
||
color: "#faa12f",
|
||
width: 1,
|
||
borderColor: "#faa12f", //拐点边框颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "违规停车",
|
||
type: "line",
|
||
yAxisIndex: 1,
|
||
data: [140, 155, 126, 172, 130, 120, 150],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#eff20c", //圆点颜色
|
||
borderColor: "rgba(251,222,153,0.5)",
|
||
borderWidth: 4,
|
||
lineStyle: {
|
||
//折线颜色大小
|
||
type: "solid", //'dotted'虚线 'solid'实线
|
||
color: "#eff20c",
|
||
width: 1,
|
||
borderColor: "#b5d816", //拐点边框颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "垃圾桶满溢",
|
||
type: "line",
|
||
yAxisIndex: 1,
|
||
data: [170, 155, 110, 120, 110, 120, 110],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#08e715", //圆点颜色
|
||
borderColor: "rgba(251,222,153,0.5)",
|
||
borderWidth: 4,
|
||
lineStyle: {
|
||
//折线颜色大小
|
||
type: "solid", //'dotted'虚线 'solid'实线
|
||
color: "#08e715",
|
||
width: 1,
|
||
borderColor: "#147f1a", //拐点边框颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
eventChart.setOption(option);
|
||
},
|
||
},
|
||
watch: {
|
||
daterange(val) {
|
||
if (val == null) {
|
||
this.dataForm.startDate = null;
|
||
this.dataForm.endDate = null;
|
||
} else {
|
||
this.dataForm.startDate = val[0];
|
||
this.dataForm.endDate = val[1];
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
@font-face {
|
||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||
src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
|
||
}
|
||
@font-face {
|
||
font-family: "DIN-Bold";
|
||
src: url("../../../../assets/construction/DIN-Bold.otf");
|
||
}
|
||
.box {
|
||
position: relative;
|
||
|
||
::v-deep .el-input__inner {
|
||
margin-top: 7px;
|
||
width: 96%;
|
||
margin-left: 2%;
|
||
height: 22px;
|
||
line-height: 22px;
|
||
border-radius: 1px;
|
||
background: #9000;
|
||
border-color: #107bb0;
|
||
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
|
||
color: #ffffff;
|
||
}
|
||
::v-deep .el-date-editor .el-range__icon {
|
||
line-height: 14px;
|
||
color: #ffffff;
|
||
}
|
||
::v-deep .el-date-editor .el-range-separator {
|
||
line-height: 14px;
|
||
color: #ffffff;
|
||
}
|
||
::v-deep .el-date-editor .el-range-input {
|
||
background: #9000;
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
}
|
||
.inner-title {
|
||
margin-top: 5px;
|
||
margin-bottom: 5px;
|
||
margin-left: 10px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
// background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%);
|
||
}
|
||
.list1 {
|
||
width: 100%;
|
||
.list1-people {
|
||
width: 100%;
|
||
|
||
display: table;
|
||
.people-left {
|
||
width: 50%;
|
||
height: 140px;
|
||
display: table-cell;
|
||
.left-list {
|
||
text-align: center;
|
||
color: #fff;
|
||
width: 100%;
|
||
height: 24px;
|
||
margin-left: 10px;
|
||
margin-top: 5px;
|
||
.left-list1 {
|
||
font-size: 12x;
|
||
float: left;
|
||
width: 20%;
|
||
}
|
||
.left-list2 {
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
float: left;
|
||
width: 50%;
|
||
&:hover {
|
||
color: rgb(0 255 255);
|
||
}
|
||
}
|
||
.active-item {
|
||
font-size: 14px;
|
||
float: left;
|
||
width: 50%;
|
||
color: rgb(0 255 255);
|
||
font-weight: bold;
|
||
text-decoration: underline;
|
||
}
|
||
.left-list3 {
|
||
font-size: 14px;
|
||
float: left;
|
||
width: 24%;
|
||
}
|
||
}
|
||
}
|
||
.people-right {
|
||
width: 50%;
|
||
height: 140px;
|
||
display: table-cell;
|
||
.top5EventStyle {
|
||
float: left;
|
||
margin-right: 10px;
|
||
margin-left: 0px;
|
||
width: 100%;
|
||
height: 140px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list2 {
|
||
width: 100%;
|
||
.list2-conclusion {
|
||
color: #fff;
|
||
border-color: #107bb0;
|
||
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
|
||
margin: 10px;
|
||
padding: 0px 3px;
|
||
font-size: 14px;
|
||
span {
|
||
font-size: 14px;
|
||
color: rgb(0 255 255);
|
||
}
|
||
}
|
||
.relevanceChart {
|
||
margin-left: 10px;
|
||
height: 160px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.list3 {
|
||
width: 100%;
|
||
.list3-analysis {
|
||
display: table;
|
||
width: 98%;
|
||
margin-left: 10px;
|
||
|
||
.analysis-item {
|
||
text-align: center;
|
||
display: table-cell;
|
||
width: 25%;
|
||
color: #fff;
|
||
.item-div {
|
||
// background: #5f676c;
|
||
background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
|
||
margin: 10px 10px;
|
||
}
|
||
}
|
||
}
|
||
.analysis-advice {
|
||
color: rgb(0 255 255);
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.list4 {
|
||
width: 100%;
|
||
}
|
||
header {
|
||
width: 100%;
|
||
height: 44px;
|
||
background: url(../../../../assets/construction/subTitle.png) no-repeat
|
||
center;
|
||
text-align: center;
|
||
.title {
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||
}
|
||
.title::before {
|
||
content: "事件感知";
|
||
text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
|
||
position: absolute;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|