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

11

This commit is contained in:
gongjiale 2022-11-25 15:00:15 +08:00
parent 6855e40251
commit 234402d8d2
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"> <div class="inner-title">
重点点位视频监控 重点点位视频监控
<span <span
@click="openVideoList"
style="float: right; style="float: right;
font-size: 16px; font-size: 16px;
color: #fff;
margin-right: 10px; margin-right: 10px;
font-weight: normal; font-weight: normal;
color: rgb(0 255 255); cursor: pointer;
" "
>查看点位列表 >查看点位列表>
<span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;" <!-- <span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
@click="openVideoList">></span >></span> -->
></span </span>
>
</div> </div>
<div class="video-List"> <div class="video-List">
<div id="video1" class="monitor"> <div id="video1" class="monitor">

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

@ -64,39 +64,43 @@
<div class="analysis-item"> <div class="analysis-item">
<div class="item-div"> <div class="item-div">
<div>管理人员</div> <div>管理人员</div>
<div>{{analysis.manageNum}}人</div> <div>{{ analysis.manageNum }}人</div>
</div> </div>
</div> </div>
<div class="analysis-item"> <div class="analysis-item">
<div class="item-div"> <div class="item-div">
<div>环卫人员</div> <div>环卫人员</div>
<div>{{analysis.sanitationNum}}人</div> <div>{{ analysis.sanitationNum }}人</div>
</div> </div>
</div> </div>
<div class="analysis-item"> <div class="analysis-item">
<div class="item-div"> <div class="item-div">
<div>垃圾运送</div> <div>垃圾运送</div>
<div>{{analysis.garbageNum}}次/天</div> <div>{{ analysis.garbageNum }}次/天</div>
</div> </div>
</div> </div>
<div class="analysis-item"> <div class="analysis-item">
<div class="item-div"> <div class="item-div">
<div>机械化作业</div> <div>机械化作业</div>
<div>{{analysis.mechanNum}}次/天</div> <div>{{ analysis.mechanNum }}次/天</div>
</div> </div>
</div> </div>
</div> </div>
<div class="analysis-advice"> <div class="analysis-advice">
<span style=" font-size: 14px;color: #fff;">决策建议：</span> <span style="font-size: 14px; color: #fff">决策建议：</span>
预测<span style=" font-size: 14px; 预测<span
style="
font-size: 14px;
color: rgb(0 255 255); color: rgb(0 255 255);
cursor: pointer; cursor: pointer;
text-decoration: underline;" >{{analysis.area}}</span> text-decoration: underline;
"
>{{ analysis.area }}</span
>
下周人流量较高，建议增加环卫人员数量、垃圾收运频次 下周人流量较高，建议增加环卫人员数量、垃圾收运频次
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -105,7 +109,6 @@ import * as echarts from "echarts";
export default { export default {
data() { data() {
return { return {
daterange: null, daterange: null,
dataForm: { dataForm: {
title: "", title: "",
@ -122,14 +125,14 @@ export default {
relevanceName3: "违规停车", relevanceName3: "违规停车",
areaName: "第一海水浴场", areaName: "第一海水浴场",
//管理力量分析 //管理力量分析
analysis:{ analysis: {
manageNum:3, manageNum: 3,
sanitationNum:14, sanitationNum: 14,
garbageNum:2, garbageNum: 2,
mechanNum:1, mechanNum: 1,
advice:'', advice: "",
area:'第一海水浴场' area: "第一海水浴场",
} },
}; };
}, },
components: {}, components: {},
@ -213,18 +216,39 @@ export default {
type: "category", type: "category",
data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"], data: ["人员聚集", "违规停车", "路面不洁", "违章", "占道经营"],
axisLine: { axisLine: {
show: false, // 不显示坐标轴线
lineStyle: { lineStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
}, },
yAxis: { yAxis: {
type: "value", type: "value",
axisLine: { axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
axisLabel: {
textStyle: {
color: "#fff", // 坐标轴文字颜色
fontSize: 10, // 坐标轴文字大小
},
},
splitLine: {
lineStyle: { lineStyle: {
color: "#fff", // 直线指示器样式设置
fontSize: 10, color: "#48b",
width: 1,
type: "solid",
}, },
}, },
}, },
@ -235,7 +259,17 @@ export default {
itemStyle: { itemStyle: {
normal: { 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", left: "40px",
bottom: "20px", bottom: "20px",
}, },
tooltip: { tooltip: {
data: ["1", "2", "3", "4"],
// 鼠标悬浮提示框显示 X和Y 轴数据 // 鼠标悬浮提示框显示 X和Y 轴数据
trigger: "axis", trigger: "axis",
backgroundColor: "rgba(32, 33, 36,.7)", backgroundColor: "rgba(32, 33, 36,.7)",
@ -272,73 +308,151 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", 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: { axisLine: {
show: false, // 不显示坐标轴线
lineStyle: { lineStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
}, },
}, },
axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
}, },
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
axisLine: { axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
axisLabel: {
textStyle: {
color: "#fff", // 坐标轴文字颜色
fontSize: 10, // 坐标轴文字大小
},
},
splitLine: {
show: false, // 隐藏坐标轴的刻度线
lineStyle: { lineStyle: {
color: "#fff", // 直线指示器样式设置
fontSize: 10, color: "#48b",
width: 1,
type: "solid",
}, },
}, },
}, },
{ {
type: "value", type: "value",
axisLine: { axisTick: {
show: false, // 隐藏坐标轴的刻度线
alignWithLabel: true, // 图形于标题居中
inside: true, // 刻度线是指向内部还是外部
length: 0, // x轴上指向标题刻度线的长度
},
axisLabel: {
textStyle: {
color: "#fff", // 坐标轴文字颜色
fontSize: 10, // 坐标轴文字大小
},
},
splitLine: {
lineStyle: { lineStyle: {
color: "#fff", // 直线指示器样式设置
fontSize: 10, color: "#48b",
width: 1,
type: "solid",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
data: [25, 20, 15, 11, 10, 5,6,3], name: "人员数量",
data: [14, 10, 4, 11, 10, 12, 6, 13],
type: "bar", type: "bar",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(
color: "rgb(89 166 190)", 0,
1,
0,
0,
[
{ offset: 0, color: "#00DCFB" },
{ offset: 1, color: "#14566B" },
],
false
),
}, },
}, },
}, },
{ {
name: "路面不洁",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: [59, 10, 140, 40, 30, 40,160,50], data: [150, 165, 160, 150, 130, 140, 160],
itemStyle: { itemStyle: {
color: 'green', normal: {
showSymbol: false, 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", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: [20, 30, 49, 57, 120, 28,40,60], data: [140, 155, 126, 172, 130, 120, 150],
itemStyle: { itemStyle: {
color: 'yellow', normal: {
showSymbol: false, 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", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: [60, 80, 100, 100, 150, 126,100,160], data: [170, 155, 110, 120, 110, 120, 110],
itemStyle: { itemStyle: {
color: 'orange', normal: {
showSymbol: false, 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); eventChart.setOption(option);
@ -373,10 +487,12 @@ export default {
margin-top: 7px; margin-top: 7px;
width: 96%; width: 96%;
margin-left: 2%; margin-left: 2%;
height: 20px; height: 22px;
line-height: 20px; line-height: 22px;
border-radius: 1px; border-radius: 1px;
background: #9000; background: #9000;
border-color: #107bb0;
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
color: #ffffff; color: #ffffff;
} }
::v-deep .el-date-editor .el-range__icon { ::v-deep .el-date-editor .el-range__icon {
@ -399,6 +515,7 @@ export default {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
// background: linear-gradient(90deg, #0873c1 0, rgba(8, 115, 193, 0) 100%);
} }
.list1 { .list1 {
width: 100%; width: 100%;
@ -452,7 +569,7 @@ export default {
display: table-cell; display: table-cell;
.top5EventStyle { .top5EventStyle {
float: left; float: left;
margin-right:10px; margin-right: 10px;
margin-left: 0px; margin-left: 0px;
width: 100%; width: 100%;
height: 140px; height: 140px;
@ -464,7 +581,8 @@ export default {
width: 100%; width: 100%;
.list2-conclusion { .list2-conclusion {
color: #fff; color: #fff;
border: 1px solid #fff; border-color: #107bb0;
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
margin: 10px; margin: 10px;
padding: 0px 3px; padding: 0px 3px;
font-size: 14px; font-size: 14px;
@ -476,37 +594,36 @@ export default {
.relevanceChart { .relevanceChart {
margin-left: 10px; margin-left: 10px;
height: 160px; height: 160px;
margin-right:10px; margin-right: 10px;
} }
} }
.list3 { .list3 {
width: 100%; width: 100%;
.list3-analysis{ .list3-analysis {
display: table; display: table;
width: 98%; width: 98%;
margin-left: 10px; margin-left: 10px;
.analysis-item{ .analysis-item {
text-align: center; text-align: center;
display: table-cell; display: table-cell;
width:25%; width: 25%;
color:#fff; color: #fff;
.item-div{ .item-div {
background: #5f676c; // background: #5f676c;
background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
margin: 10px 10px; margin: 10px 10px;
} }
} }
} }
.analysis-advice{ .analysis-advice {
color: rgb(0 255 255); color: rgb(0 255 255);
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
} }
} }
.list4 { .list4 {
width: 100%; width: 100%;
} }
header { header {
width: 100%; width: 100%;