wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of http://192.168.124.50:80/wuhongjian/qd-changjing

This commit is contained in:
chenchenzai 2022-11-25 15:05:18 +08:00
parent 0ccf89ff24 234402d8d2
commit 3f0775ba06
2 changed files with 202 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/pages/areaMonitor/components/VideoListLeft.vue
View File

@ -4,17 +4,17 @@
<div class="inner-title">
重点点位视频监控
<span
@click="openVideoList"
style="float: right;
font-size: 16px;
color: #fff;
margin-right: 10px;
font-weight: normal;
color: rgb(0 255 255); cursor: pointer;
"
>查看点位列表
<span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
@click="openVideoList">></span
></span
>
>查看点位列表>
<!-- <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
>></span> -->
</span>
</div>
<div class="video-List">
<div id="video1" class="monitor">

275
src/views/pages/areaMonitor/components/VideoListRight.vue
View File

@ -58,45 +58,49 @@
<div class="relevanceChart" id="relevance-chart"></div>
</div>
<!--管理力量分析建议-->
<div class="list3">
<div class="inner-title">管理力量分析建议</div>
<div class="list3-analysis">
<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>{{ analysis.manageNum }}人</div>
</div>
</div>
<div class="analysis-item">
<div class="item-div">
<div>环卫人员</div>
<div>{{analysis.sanitationNum}}人</div>
<div>环卫人员</div>
<div>{{ analysis.sanitationNum }}人</div>
</div>
</div>
</div>
<div class="analysis-item">
<div class="item-div">
<div>垃圾运送</div>
<div>{{analysis.garbageNum}}次/天</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>{{ analysis.mechanNum }}次/天</div>
</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 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>
@ -105,7 +109,6 @@ import * as echarts from "echarts";
export default {
data() {
return {
daterange: null,
dataForm: {
title: "",
@ -116,20 +119,20 @@ export default {
top5AreaList: [],
//选中的高发区域
selectArea: "",
//相关性
relevanceName1: "垃圾桶满溢",
//相关性
relevanceName1: "垃圾桶满溢",
relevanceName2: "路面不洁",
relevanceName3: "违规停车",
areaName: "第一海水浴场",
//管理力量分析
analysis:{
manageNum:3,
sanitationNum:14,
garbageNum:2,
mechanNum:1,
advice:'',
area:'第一海水浴场'
}
analysis: {
manageNum: 3,
sanitationNum: 14,
garbageNum: 2,
mechanNum: 1,
advice: "",
area: "第一海水浴场",
},
};
},
components: {},
@ -213,18 +216,39 @@ export default {
type: "category",
data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
axisLine: {
show: false, // 不显示坐标轴线
lineStyle: {
color: "#fff",
fontSize: 10,
},
},
axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
},
yAxis: {
type: "value",
axisLine: {
axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
axisLabel: {
textStyle: {
color: "#fff", // 坐标轴文字颜色
fontSize: 10, // 坐标轴文字大小
},
},
splitLine: {
lineStyle: {
color: "#fff",
fontSize: 10,
// 直线指示器样式设置
color: "#48b",
width: 1,
type: "solid",
},
},
},
@ -235,7 +259,17 @@ export default {
itemStyle: {
normal: {
//这里是重点
color: "#fe8463",
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{ offset: 1, color: "#FFDD53" },
{ offset: 0, color: "#FF515A" },
],
false
),
},
},
},
@ -254,7 +288,9 @@ export default {
left: "40px",
bottom: "20px",
},
tooltip: {
data: ["1", "2", "3", "4"],
// 鼠标悬浮提示框显示 X和Y 轴数据
trigger: "axis",
backgroundColor: "rgba(32, 33, 36,.7)",
@ -272,73 +308,151 @@ export default {
},
xAxis: {
type: "category",
data: ["11.04", "11.05", "11.06", "11.07", "11.08","11.09","11.10"],
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",
axisLine: {
axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
axisLabel: {
textStyle: {
color: "#fff", // 坐标轴文字颜色
fontSize: 10, // 坐标轴文字大小
},
},
splitLine: {
show: false, // 隐藏坐标轴的刻度线
lineStyle: {
color: "#fff",
fontSize: 10,
// 直线指示器样式设置
color: "#48b",
width: 1,
type: "solid",
},
},
},
{
type: "value",
axisLine: {
axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
axisLabel: {
textStyle: {
color: "#fff", // 坐标轴文字颜色
fontSize: 10, // 坐标轴文字大小
},
},
splitLine: {
lineStyle: {
color: "#fff",
fontSize: 10,
// 直线指示器样式设置
color: "#48b",
width: 1,
type: "solid",
},
},
},
],
series: [
{
data: [25, 20, 15, 11, 10, 5,6,3],
name: "人员数量",
data: [14, 10, 4, 11, 10, 12, 6, 13],
type: "bar",
itemStyle: {
normal: {
color: "rgb(89 166 190)",
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{ offset: 0, color: "#00DCFB" },
{ offset: 1, color: "#14566B" },
],
false
),
},
},
},
{
name: "路面不洁",
type: "line",
yAxisIndex: 1,
data: [59, 10, 140, 40, 30, 40,160,50],
data: [150, 165, 160, 150, 130, 140, 160],
itemStyle: {
color: 'green',
showSymbol: false,
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: [20, 30, 49, 57, 120, 28,40,60],
data: [140, 155, 126, 172, 130, 120, 150],
itemStyle: {
color: 'yellow',
showSymbol: false,
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: [60, 80, 100, 100, 150, 126,100,160],
data: [170, 155, 110, 120, 110, 120, 110],
itemStyle: {
color: 'orange',
showSymbol: false,
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);
@ -373,10 +487,12 @@ export default {
margin-top: 7px;
width: 96%;
margin-left: 2%;
height: 20px;
line-height: 20px;
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 {
@ -399,6 +515,7 @@ export default {
font-size: 16px;
font-weight: bold;
color: #ffffff;
// background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%);
}
.list1 {
width: 100%;
@ -452,7 +569,7 @@ export default {
display: table-cell;
.top5EventStyle {
float: left;
margin-right:10px;
margin-right: 10px;
margin-left: 0px;
width: 100%;
height: 140px;
@ -464,7 +581,8 @@ export default {
width: 100%;
.list2-conclusion {
color: #fff;
border: 1px solid #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;
@ -476,37 +594,36 @@ export default {
.relevanceChart {
margin-left: 10px;
height: 160px;
margin-right:10px;
margin-right: 10px;
}
}
.list3 {
width: 100%;
.list3-analysis{
width: 100%;
.list3-analysis {
display: table;
width: 98%;
margin-left: 10px;
.analysis-item{
.analysis-item {
text-align: center;
display: table-cell;
width:25%;
color:#fff;
.item-div{
background: #5f676c;
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;
}
.analysis-advice {
color: rgb(0 255 255);
font-size: 14px;
margin-left: 10px;
}
}
.list4 {
width: 100%;
}
header {
width: 100%;