Merge branch 'master' of http://192.168.124.50:80/wuhongjian/qd-changjing
This commit is contained in:
wangwei
commit
6424726939
|
|
@ -133,7 +133,10 @@
|
|||
</el-tree>
|
||||
</div>
|
||||
<div class="site-content-right">
|
||||
右
|
||||
<div><span>视频监控</span></div>
|
||||
<video-play
|
||||
:key="channelCode" :channel-id="[channelCode]"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-content-people" v-show="selectedIndex == 2">
|
||||
|
|
@ -241,6 +244,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import VideoPlay from './VideoPlay'
|
||||
import bus from "@/views/layout/bus";
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import { directive as viewer } from "v-viewer"
|
||||
|
|
@ -286,13 +290,6 @@ export default {
|
|||
channelCode: returnData[0].channelCode
|
||||
})
|
||||
}
|
||||
})
|
||||
getCameraAllLabel().then((res) => {
|
||||
this.tabList = res.data.data
|
||||
});
|
||||
getCameraAll().then((res) => {
|
||||
this.cameraAllData = res.data
|
||||
// this.addResourceTomap('cameraAll',res.data);
|
||||
})
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.cameraTree = res.data.data
|
||||
|
|
@ -343,11 +340,12 @@ export default {
|
|||
selectedFacilitiesType:"",//设施类型
|
||||
facilitiesTypeOption:[{label:"设施类型",value:"1"}],
|
||||
facilitiesDataResource:[{facilitiesType:"设施类型1",address:"李沧",manageMan:"张山",telePhone:"1334650987"}],
|
||||
cameraAllData:[],
|
||||
cameraTreeIsShow:true,
|
||||
cameraTreeSingle: [],
|
||||
checkStatus: '2',
|
||||
cameraTree:[],
|
||||
channelCode:"3701222749350945",
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ export default {
|
|||
openVideo: false,
|
||||
newImageUrl: "",
|
||||
resourceType:"resource",
|
||||
channelCode:["3701222749350945"]
|
||||
channelCode:"3701222749350945"
|
||||
|
||||
};
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue