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

复制专题。

This commit is contained in:
wangwei 2022-11-25 14:12:29 +08:00
parent ac5fe38c35
commit f584018da2
16 changed files with 7164 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/index.js
View File

@ -102,6 +102,12 @@ export const pageRoutes = [{
name: 'area',
meta: { title: '重点区域监控平台' }
},
{
path: '/areaMonitor',
component: () => import('@/views/pages/areaMonitor'),
name: 'areaMonitor',
meta: { title: '重点区域监控平台' }
},
{
path: '/point',
component: () => import('@/views/pages/civilizedCity/components/Point'),

573
src/views/pages/area/index.vue
View File

@ -38,42 +38,23 @@
<div class="eventNum">
累计事件数量(2022.05.25-至今)
<p>
<span>{{ allListDataNum }}</span
>件
</p>
<p><span>{{ allListDataNum }}</span>件</p>
</div>
<!-- 事件感知 -->
<div class="complaintContent">
<!-- <complaint-event ref="complaintEventRef"></complaint-event> -->
<early-warning> </early-warning>
<complaint-event ref="complaintEventRef"></complaint-event>
</div>
<!-- 视频标签、列表 -->
<div class="complaintContent1">
<video-list-right></video-list-right>
<div class="videoList">
<video-list ref="videoListRef"></video-list>
</div>
<!-- 重点视频列表 -->
<div class="mainVideoList">
<video-list-left @IsShowLideoVisible="IsShowLideoVisible"></video-list-left>
</div>
<div class="keyAreas" @click="handleKeyArea">
重点区域
</div>
<!-- 工地列表 -->
<div class="siteList" v-if="keyAreasShow">
<site-list-more></site-list-more>
<div class="siteList">
<site-list></site-list>
</div>
<!--视频列表弹出框-->
<div class="siteList1" v-if="videoVisible">
<video-list></video-list>
</div>
<!-- 热力图图例 -->
<div class="legend"></div>
@ -91,49 +72,34 @@
<div class="title">地图显示</div>
<div class="change-btn-box">
<el-checkbox-group v-model="changeLayerBtnGroup">
<el-checkbox
v-for="item in changeLayerBtnList"
:key="item.index"
:label="item"
@change="layerHandleChange(item)"
></el-checkbox>
<el-checkbox v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
</el-checkbox-group>
</div>
<div class="title">重点区域</div>
<div class="change-btn-box" style="width: 230px">
<div class="change-btn-box" style="width:230px">
<el-checkbox-group v-model="changeLayerBtnGroup">
<el-checkbox
v-for="item in changeLayerBtnListArea"
:key="item.index"
:label="item"
@change="layerHandleChange(item)"
></el-checkbox>
<el-checkbox v-for="item in changeLayerBtnListArea" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
</el-checkbox-group>
</div>
<div class="title">
<span class="special-title" @click="clearThermodynamic">
人流热力
</span>
<span class="special-title" @click="clearThermodynamic"> 人流热力 </span>
</div>
<div class="change-btn-box">
<!-- <el-checkbox-group v-model="changeLayerBtnGroup">
<el-checkbox v-for="item in changeLayerBtnListHot" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
</el-checkbox-group> -->
<el-radio-group
v-model="thermodynamicPeopleType"
@change="changeThermodynamicPeopleType"
>
<el-radio-group v-model="thermodynamicPeopleType" @change="changeThermodynamicPeopleType">
<el-radio label="all">全市</el-radio>
<el-radio label="local">本地</el-radio>
<el-radio label="noLocal">外地</el-radio>
</el-radio-group>
</div>
</div>
<video-play v-if="openVideo" :channel-id="channelCode"></video-play>
<video-play
v-if="openVideo"
:channel-id="channelCode"
></video-play>
</div>
</div>
</template>
@ -143,72 +109,50 @@ import TiledMap from "./components/tiledMap";
import { searchCamera } from "@/api/videoSurveillance/index";
import bus from "@/views/layout/bus";
import complaintEvent from "./components/ComplaintEvent";
import EarlyWarning from "./components/EarlyWarning";
import VideoPlay from "./components/VideoPlay";
import VideoListRight from "./components/VideoListRight";
import VideoListLeft from "./components/VideoListLeft";
import VideoPlay from './components/VideoPlay'
import VideoList from "./components/VideoList";
import SiteListMore from "./components/SiteListMore";
import SiteList from "./components/SiteList";
import { selectByJdWd } from "@/api/construction/index";
import {
createSiteListPop,
createCameraDetailsPop,
createEventListDetailsPop,
createImportantAreaPop,
} from "@/supermap/createMarkerPopup";
import {
listPassengerFlow,
listPassengerFlowByAllNums,
} from "@/api/civilizedCity.js";
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
import { selectByAreaEvent, selectKeyArea } from "@/api/area";
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
// 时间轴
import HorizonTimeLine from "./components/HorizonTimeLine";
import HorizonTimeLine from './components/HorizonTimeLine'
export default {
data() {
return {
videoVisible:false,
hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-single", // 地图容器的id
state: "",
constructionSiteData: [],
changeLayerBtnList: ["AI事件", "视频监控", "聚集区"],
changeLayerBtnListArea: [
"公园广场",
"商业街区",
"景区景点",
"海水浴场",
"窗口单位",
],
changeLayerBtnListHot: ["全市", "本市", "外地"],
changeLayerBtnList: ['AI事件','视频监控', '聚集区'],
changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
changeLayerBtnListHot: ['全市','本市','外地',],
changeLayerBtnGroup: [],
thermodynamicPeopleType: "",
thermodynamicPeopleType: '',
thermodynamicPeopleAll: [],
thermodynamicPeopleLocal: [],
thermodynamicPeopleNoLocal: [],
allListDataNum: "",
allListDataNum: '',
openVideo: false,
channelCode: [],
hotDataNum: [],
// 时间轴
timelineData: [],
// 热力图当日数据
hotDataAll: {},
keyAreasShow: false, //是否显示重点区域。
hotDataAll: {}
};
},
components: {
TiledMap,
complaintEvent,
VideoListRight,
VideoListLeft,
VideoList,
SiteListMore,
SiteList,
VideoPlay,
HorizonTimeLine,
EarlyWarning,
HorizonTimeLine
},
created() {},
mounted() {
@ -218,16 +162,16 @@ export default {
this.hiMapFun
);
bus.$off("openCurrentVideoSurveillance");
bus.$on("openCurrentVideoSurveillance", (channelCode) => {
this.openVideo = true;
this.channelCode.unshift(channelCode);
});
bus.$off("openCurrentVideoWaterPoint");
bus.$on("openCurrentVideoWaterPoint", (channelCode) => {
this.openVideo = true;
this.channelCode.unshift(channelCode);
});
bus.$off('openCurrentVideoSurveillance')
bus.$on('openCurrentVideoSurveillance', (channelCode) => {
this.openVideo = true
this.channelCode.unshift(channelCode)
})
bus.$off('openCurrentVideoWaterPoint')
bus.$on('openCurrentVideoWaterPoint', channelCode => {
this.openVideo = true
this.channelCode.unshift(channelCode)
})
// 根据经纬度查询半径内所有的工地
bus.$off("openCauseAnalysis");
bus.$on("openCauseAnalysis", (row) => {
@ -238,13 +182,11 @@ export default {
// this.circle(latLng);
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd });
// this.WithinRadiusSite(latLng);
let dataEvent = [
{
let dataEvent = [{
latLng: { lat: row.wd, lng: row.jd },
data: row,
type: "site",
},
];
}]
this.hiMapFun.addPointsToMap(
dataEvent,
"construction.png",
@ -254,118 +196,115 @@ export default {
});
bus.$off("roadOnMap");
bus.$on("roadOnMap", (roadData) => {
bus.$on("roadOnMap",(roadData) => {
this.roadOnMap(roadData);
});
})
bus.$off("removeCameraLayer");
bus.$on("removeCameraLayer", (type) => {
this.hiMapFun.removeLayerByLayerName(type);
});
bus.$on("removeCameraLayer",(type) => {
this.hiMapFun.removeLayerByLayerName(type)
})
bus.$off("CameraSingleDataOnMap");
bus.$on("CameraSingleDataOnMap", (labelName, data) => {
this.addResourceTomap(labelName, data);
});
bus.$on("CameraSingleDataOnMap",(labelName,data) => {
this.addResourceTomap(labelName,data);
})
this.thermodynamic();
this.personToday();
this.getCurrentTime();
this.thermodynamic()
this.personToday()
this.getCurrentTime()
// 获取当日全部数据
for (let i = 0; i < this.timelineData.length; i++) {
this.todayAllData(this.timelineData[i].timeId);
this.todayAllData(this.timelineData[i].timeId)
}
},
},
methods: {
IsShowLideoVisible(val){
this.videoVisible=val
},
// 获取年月日
getCurrentTime() {
const yy = new Date().getFullYear();
const m = new Date().getMonth() + 1;
const mm = m < 10 ? "0" + m : m;
getCurrentTime () {
const yy = new Date().getFullYear()
const m = new Date().getMonth() + 1
const mm = m < 10 ? '0' + m : m
const dd =
new Date().getDate() < 10
? "0" + new Date().getDate()
: new Date().getDate();
? '0' + new Date().getDate()
: new Date().getDate()
this.gettime = yy + mm + dd;
this.gettime = yy + mm + dd
// console.log(this.gettime);
for (let i = 8; i <= 20; i++) {
if (i < 10) {
this.timelineData.push({
timeId: this.gettime + "0" + i + "00",
year: i,
});
timeId: this.gettime + '0' + i + '00',
year: i
})
} else {
this.timelineData.push({
timeId: this.gettime + i + "00",
year: i,
});
timeId: this.gettime + i + '00',
year: i
})
}
}
// console.log(this.timelineData);
},
// 全部
todayAllData(val) {
todayAllData (val) {
const params = {
timeId: val,
};
this.hotDataAll[val] = [];
timeId: val
}
this.hotDataAll[val] = []
listPassengerFlow(params).then((res) => {
// console.log(res.data);
// this.hotDataAll.params = res.data;
this.hotDataAll[val] = res.data;
});
this.hotDataAll[val] = res.data
})
// console.log(this.hotDataAll);
},
// 热力图点击事件
timeIdData(val) {
timeIdData (val) {
// 清除实时热力图
this.hiMapFun.removeLayerByLayerName("thermodynamic");
this.hiMapFun.removeLayerByLayerName("types");
const dataA = [];
const dataNumber = [];
const dataMax = [];
this.hiMapFun.removeLayerByLayerName('thermodynamic')
this.hiMapFun.removeLayerByLayerName('types')
const dataA = []
const dataNumber = []
const dataMax = []
const listB = this.hotDataAll[val];
console.log(listB);
const listB = this.hotDataAll[val]
console.log(listB)
// 最大值
for (let num = 0; num < listB.length; num++) {
dataNumber.push(listB[num].allNums);
dataNumber.push(listB[num].allNums)
}
const max = Math.max.apply(null, dataNumber);
console.log(max); // 16617
const max = Math.max.apply(null, dataNumber)
console.log(max) // 16617
listB.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"];
const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.latitude) == -1) {
dataA.push([
Number(item.latitude),
Number(item.longitude),
Number((item.allNums / max).toFixed(1)),
]);
Number((item.allNums / max).toFixed(1))
])
}
});
})
// 筛选
dataA.forEach((item) => {
if (item[2] > 0.1) {
dataMax.push(item);
dataMax.push(item)
}
});
})
this.hiMapFun.thermodynamic(dataMax, 25, "types");
this.hiMapFun.thermodynamic(dataMax, 25, 'types')
// });
},
// 获取热力图的按钮
hotName(item) {
hotName (item) {
// console.log(item);
if (this.checkList.indexOf(item) == -1) {
this.checkList.push(item);
this.bottomTabList[3].img = this.bottomTabList[3].imgActive;
this.checkList.push(item)
this.bottomTabList[3].img = this.bottomTabList[3].imgActive
}
console.log(this.checkList);
console.log(this.checkList)
},
querySearchAsync(queryString, cb) {
if (queryString.length > 0) {
@ -375,10 +314,10 @@ export default {
}
},
// 人口聚集今日事件大于5000
personToday() {
personToday () {
listPassengerFlowByAllNums().then((res) => {
this.hotDataNum = res.data;
});
this.hotDataNum = res.data
})
},
handleSelect(item) {
this.hiMapFun.clearAllLayers();
@ -483,74 +422,70 @@ export default {
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
switch (item) {
case "AI事件":
this.hiMapFun.removeLayerByLayerName("EventListDetail");
this.hiMapFun.removeLayerByLayerName('EventListDetail')
selectByAreaEvent().then((res) => {
const dataEvent = [];
res.data.data.events.forEach((item) => {
dataEvent.push({
latLng: { lat: item.latitude, lng: item.longitude },
data: item,
type: "eventList",
});
});
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
dataEvent,
"poi-event.png",
"EventListDetail",
createEventListDetailsPop
);
});
dataEvent.push(
{
latLng: { lat: item.latitude, lng: item.longitude },
data: item,
type: "eventList",
}
)
})
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "poi-event.png", "EventListDetail", createEventListDetailsPop)
})
break;
case "视频监控":
this.addResourceTomap(
"全部",
this.$refs.videoListRef.cameraAllData
);
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
break;
case "聚集区":
this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
const hotEventListDetail = [];
this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
const hotEventListDetail = []
this.hotDataNum.forEach((item) => {
hotEventListDetail.push({
latLng: { lat: item.latitude, lng: item.longitude },
data: item,
type: "personHot",
});
});
type: 'personHot'
})
})
this.hiMapFun.addPointsToMap(
hotEventListDetail,
"poi-blue.png",
"PersonHotDetail"
);
'poi-blue.png',
'PersonHotDetail'
)
break;
case "公园广场":
case "商业街区":
case "景区景点":
case "海水浴场":
case "窗口单位":
this.hiMapFun.removeLayerByLayerName(item);
selectKeyArea({ type: item }).then((res) => {
if (item === "商业街区") {
this.hiMapFun.removeLayerByLayerName(item)
selectKeyArea({ type: item}).then((res) => {
if(item === '商业街区') {
res.data.data.forEach((newItem) => {
if (newItem.point) {
let arr = JSON.parse(newItem.point);
let areaLatLng = [];
if(newItem.point) {
let arr = JSON.parse(newItem.point)
let areaLatLng = []
arr.forEach((pointItem) => {
let lonLat = gcjLL2wgs84LL(pointItem[0], pointItem[1]);
areaLatLng.push([lonLat[1], lonLat[0]]);
});
this.hiMapFun.addAreaToMap(areaLatLng);
areaLatLng.push([lonLat[1],lonLat[0]])
})
this.hiMapFun.addAreaToMap(areaLatLng)
}
});
})
} else {
const dataEvent = [];
res.data.data.forEach((item) => {
dataEvent.push({
latLng: { lat: item.latitude, lng: item.longitude },
data: item,
type: "site",
});
});
dataEvent.push(
{
latLng: { lat: item.latitude, lng: item.longitude },
data: item,
type: "site",
}
)
})
this.hiMapFun.addPointsToMap(
dataEvent,
"poi-red.png",
@ -558,7 +493,7 @@ export default {
createImportantAreaPop
);
}
});
})
break;
default:
break;
@ -570,19 +505,19 @@ export default {
case "景区景点":
case "海水浴场":
case "窗口单位":
if (item === "商业街区") {
this.hiMapFun.removerPolygon();
if(item === '商业街区') {
this.hiMapFun.removerPolygon()
}
this.hiMapFun.removeLayerByLayerName(item);
this.hiMapFun.removeLayerByLayerName(item)
break;
case "AI事件":
this.hiMapFun.removeLayerByLayerName("EventListDetail");
this.hiMapFun.removeLayerByLayerName('EventListDetail')
break;
case "视频监控":
this.hiMapFun.removeLayerByLayerName("全部");
this.hiMapFun.removeLayerByLayerName('全部')
break;
case "聚集区":
this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
break;
default:
break;
@ -590,24 +525,20 @@ export default {
}
},
addResourceTomap(type, data) {
addResourceTomap(type,data) {
const dataEvent = [];
data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"];
if (arr.indexOf(item.gpsX) == -1) {
const arr = [0,0.0,'','0','0.0']
if(arr.indexOf(item.gpsX) == -1){
dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item,
type: "videoSurveillance",
type: 'videoSurveillance'
});
}
});
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
dataEvent,
"videoSurveillance.png",
type,
createCameraDetailsPop
);
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
},
thermodynamic() {
@ -615,114 +546,93 @@ export default {
let dataNumberLocal = [];
let dataNumberNoLocal = [];
listPassengerFlow().then((res) => {
const data = res.data;
// 最大值
for (let num = 0; num < data.length; num++) {
dataNumber.push(data[num].allNums);
dataNumberLocal.push(data[num].localNums);
dataNumberNoLocal.push(data[num].nonlocalNums);
}
let max = Math.max.apply(null, dataNumber);
let maxLocal = Math.max.apply(null, dataNumberLocal);
let maxNoLocal = Math.max.apply(null, dataNumberNoLocal);
data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"];
if (
arr.indexOf(item.latitude) == -1 &&
arr.indexOf(item.longitude) == -1
) {
//全部
if (item.allNums !== "0") {
let allNums = Number((item.allNums / max).toFixed(1));
if (allNums > 0.1) {
this.thermodynamicPeopleAll.push([
Number(item.latitude),
Number(item.longitude),
allNums,
]);
}
}
//本地
if (item.localNums !== "0") {
let localNums = Number((item.localNums / maxLocal).toFixed(1));
if (localNums > 0.1) {
this.thermodynamicPeopleLocal.push([
Number(item.latitude),
Number(item.longitude),
localNums,
]);
}
}
//外地
if (item.nonlocalNums !== "0") {
let nonlocalNums = Number(
(item.nonlocalNums / maxNoLocal).toFixed(1)
);
if (nonlocalNums > 0.1) {
this.thermodynamicPeopleNoLocal.push([
Number(item.latitude),
Number(item.longitude),
nonlocalNums,
]);
}
}
const data = res.data;
// 最大值
for (let num = 0; num < data.length; num++) {
dataNumber.push(data[num].allNums);
dataNumberLocal.push(data[num].localNums);
dataNumberNoLocal.push(data[num].nonlocalNums);
}
let max = Math.max.apply(null, dataNumber);
let maxLocal = Math.max.apply(null, dataNumberLocal);
let maxNoLocal = Math.max.apply(null, dataNumberNoLocal);
data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"];
if (arr.indexOf(item.latitude) == -1 && arr.indexOf(item.longitude) == -1) {
//全部
if(item.allNums !== '0'){
let allNums = Number((item.allNums / max).toFixed(1))
if(allNums > 0.1){
this.thermodynamicPeopleAll.push([
Number(item.latitude),
Number(item.longitude),
allNums
]);
}
}
//本地
if(item.localNums !== '0'){
let localNums = Number((item.localNums / maxLocal).toFixed(1))
if(localNums > 0.1){
this.thermodynamicPeopleLocal.push([
Number(item.latitude),
Number(item.longitude),
localNums
]);
}
}
//外地
if(item.nonlocalNums !== '0'){
let nonlocalNums = Number((item.nonlocalNums / maxNoLocal).toFixed(1))
if(nonlocalNums > 0.1){
this.thermodynamicPeopleNoLocal.push([
Number(item.latitude),
Number(item.longitude),
nonlocalNums
]);
}
}
}
});
});
});
},
// 清除热力图
clearThermodynamic() {
this.hiMapFun.removeLayerByLayerName("types");
this.hiMapFun.removeLayerByLayerName("thermodynamic");
this.thermodynamicPeopleType = "";
this.thermodynamicPeopleType = ''
},
changeThermodynamicPeopleType(value) {
this.hiMapFun.removeLayerByLayerName("types");
switch (value) {
case "all":
case 'all':
this.hiMapFun.removeLayerByLayerName("thermodynamic");
this.hiMapFun.thermodynamic(
this.thermodynamicPeopleAll,
25,
"thermodynamic"
);
this.hiMapFun.thermodynamic(this.thermodynamicPeopleAll, 25, "thermodynamic");
break;
case "local":
case 'local':
this.hiMapFun.removeLayerByLayerName("thermodynamic");
this.hiMapFun.thermodynamic(
this.thermodynamicPeopleLocal,
25,
"thermodynamic"
);
this.hiMapFun.thermodynamic(this.thermodynamicPeopleLocal, 25, "thermodynamic");
break;
case "noLocal":
case 'noLocal':
this.hiMapFun.removeLayerByLayerName("thermodynamic");
this.hiMapFun.thermodynamic(
this.thermodynamicPeopleNoLocal,
25,
"thermodynamic"
);
this.hiMapFun.thermodynamic(this.thermodynamicPeopleNoLocal, 25, "thermodynamic");
break;
}
},
removeRoadCauseAnalysis() {
this.hiMapFun.removerPolygon();
this.hiMapFun.removeLayerByLayerName("roadPoint");
this.hiMapFun.removeLayerByLayerName("EventListDetail");
this.hiMapFun.removeLayerByLayerName("PersonHotDetail");
removeRoadCauseAnalysis () {
this.hiMapFun.removerPolygon()
this.hiMapFun.removeLayerByLayerName('roadPoint')
this.hiMapFun.removeLayerByLayerName('EventListDetail')
this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
this.hiMapFun.removeLayerByLayerName("thermodynamic");
this.hiMapFun.removeLayerByLayerName("types");
this.hiMapFun.removeLayerByLayerName("全部");
this.hiMapFun.removeLayerByLayerName("公园广场");
this.hiMapFun.removeLayerByLayerName("商业街区");
this.hiMapFun.removeLayerByLayerName("景区景点");
this.hiMapFun.removeLayerByLayerName("海水浴场");
this.hiMapFun.removeLayerByLayerName("窗口单位");
},
//点击是否显示重点区域。
handleKeyArea() {
this.keyAreasShow = !this.keyAreasShow;
},
this.hiMapFun.removeLayerByLayerName('全部')
this.hiMapFun.removeLayerByLayerName('公园广场')
this.hiMapFun.removeLayerByLayerName('商业街区')
this.hiMapFun.removeLayerByLayerName('景区景点')
this.hiMapFun.removeLayerByLayerName('海水浴场')
this.hiMapFun.removeLayerByLayerName('窗口单位')
}
},
beforeDestroy() {},
};
@ -734,9 +644,6 @@ export default {
font-family: 'Tensentype-ZhiHeiJ-W5';
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
}
::v-deep .el-dialog {
background: rgba(32,59,93,.8);
}
.map-box {
width: 100%;
height: 100%;
@ -750,7 +657,6 @@ export default {
}
#contain {
header {
position: relative;
z-index: 1000;
@ -778,7 +684,7 @@ export default {
.searchPoint {
position: absolute;
z-index: 1000;
right: 500px;
left: 496px;
top: 90px;
border: 1px solid rgba(31,254,253,.9);
::v-deep .el-input__inner {
@ -832,24 +738,7 @@ export default {
width: 478px;
background: rgba($color: #05213b, $alpha: .85)
}
.complaintContent1 {
position: absolute;
z-index: 1000;
right: 10px;
top: 90px;
height:660px;
width: 478px;
background: rgba($color: #05213b, $alpha: .85)
}
.mainVideoList{
position: absolute;
z-index: 10;
right: 10px;
top: 760px;
width: 478px;
height:200px;
background: rgba($color: #05213b, $alpha: .85);
}
.eventNum {
width: 245px;
height: 92px;
@ -876,21 +765,6 @@ export default {
}
}
}
.keyAreas {
width: 100px;
height: 40px;
position: absolute;
cursor: pointer;
top: 110px;
left: 498px;
z-index: 1000;
background-color: #1A69B2;
text-align: center;
padding: 6px 0 13px 0;
font-size: 16px;
color:#fff;
}
.videoList {
position: absolute;
@ -905,18 +779,9 @@ export default {
.siteList {
position: absolute;
z-index: 10;
left: 498px;
top: 175px;
width: 574px;
height:500px;
background: rgba($color: #05213b, $alpha: .85);
}
.siteList1 {
position: absolute;
z-index: 10;
right: 498px;
top: 185px;
width: 374px;
right: 8px;
top: 562px;
width: 398px;
height:500px;
background: rgba($color: #05213b, $alpha: .85);
}

543
src/views/pages/areaMonitor/components/ComplaintEvent.vue Normal file
View File

@ -0,0 +1,543 @@
<template>
<div class="box">
<header>
<div class="title">事件感知</div>
</header>
<div class="toady-list">
<div class="toady-list-content">
<div class="toady-list-rotate"></div>
<div class="toady-list-icon"></div>
<div class="toady-list-num">今日事件<span> {{todayListNum}} </span>件</div>
</div>
</div>
<div class="tab-box">
<div class="tabs-button">
<div class="tabs-button-box">
<div class="tabs-button-btn"
@click="tabHandleClick(item)"
v-for="item in tabsButton"
:key="item.index"
:class="tabsActiveName == item?'tabs-button-btn-active' : ''"
>
{{item}}
</div>
</div>
<div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
</div>
<!-- <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
<div class="filter-btn-typeSelect">
<div class="typeSelect-btn"
v-for="item in filterButton.typeSelect"
:key="item"
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active' : ''"
@click="typeSelect(item)"
>{{item}}</div>
</div>
<div class="filter-btn-processStateSelect">
<div class="processStateSelect-btn"
v-for="item in filterButton.processStateSelect"
:key="item"
:class="filterButton.processStateSelectActive == item ? 'processStateSelect-btn-active' : ''"
@click="processStateSelect(item)"
>
<div class="select-circle"></div>
<div class="processStateSelect">{{item}}</div>
</div>
</div>
</div> -->
<el-dropdown trigger="click">
<span class="el-dropdown-link">
{{ listTypeSelect || '全部'}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" class="dropdownCss">
<el-dropdown-item
v-for="(item, index) in EventBtns"
:key="index"
@click.native="EventBtnsClick(item)"
>{{ item }}
</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
<div class="event-details-title">
<span>{{item.eventNewName||''}}</span>
<span>{{item.captureTime||''}}</span>
<!-- <span>未派发</span> -->
</div>
<div class="event-details-des">
<h5>事件地址:{{ item.district || ''}}</h5>
<p>摄像头名称:{{ item.cameraName || ''}}</p>
<p>事件描述:{{ item.eventCnName || ''}}</p>
</div>
</div>
<!-- <el-pagination
v-if="total==0"
background
layout="prev, pager, next"
@current-change="pageChange"
:page-size = 4
:total="total"
:current-page="currentPage"
>
</el-pagination> -->
<el-pagination
background
layout="prev, pager, next"
@current-change="pageChange"
:page-size = 4
:total="total"
:current-page="currentPage"
>
</el-pagination>
</div>
</div>
<statistical-analysis v-if="statisticalAnalysisIsShow" class="statisticalAnalysis" @closeDialog='statisticalAnalysisIsShow = false'></statistical-analysis>
</div>
</template>
<script>
import { selectByAreaEvent, selectByNameAreaEvent, selectByDayAreaEvent } from "@/api/area";
import StatisticalAnalysis from "./StatisticalAnalysis.vue";
import bus from "@/views/layout/bus";
export default {
data() {
return {
tabsButton: ["视频感知",],
tabsActiveName: "视频感知",
statisticalAnalysisIsShow: false,
filterButton:{
typeSelect:['事件','事件1'],
typeSelectActive:'事件',
processStateSelect:['全部','未派发','未处置','已处置'],
processStateSelectActive:'全部',
},
eventListData: [],
preTime: "",
// pageCount: 0,
total:0,
currentPage:1,
roadData:[],
listTypeSelect: "全部",
EventBtns: ["全部","占道经营","渣土车发现","违章停车","环境卫生","沿街晾晒","渣土车未密闭","道路积水事件",],
todayListNum:0,
};
},
components: {
StatisticalAnalysis,
},
created() {
const currentDate = new Date();
currentDate.setTime(currentDate.getTime());
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
this.preTime =
currentDate.getFullYear() +
"-" +
(currentDate.getMonth() + 1) +
"-" +
currentDate.getDate() +
" " +
"00:00:00";
},
mounted() {
const params = {
page: 1,
pageSize: 4,
};
selectByAreaEvent(params).then((res) => {
this.eventListData = res.data.data.events
this.total = res.data.data.sum
this.$parent.allListDataNum = res.data.data.sum;
});
selectByDayAreaEvent().then((res)=>{
if(res.data.data.sum){
this.todayListNum = res.data.data.sum
}
})
},
methods: {
tabHandleClick(item) {
this.tabsActiveName = item
if(item == '视频感知'){
}
if(item == '物联感知'){
this.filterButton.typeSelect = ['工地扬尘','工地噪声']
this.typeSelectActive = '工地扬尘'
}
if(item == '走航监测'){
this.selectRoadData()
}
},
openStatisticalAnalysis() {
this.statisticalAnalysisIsShow = true
},
typeSelect(item) {
this.filterButton.typeSelectActive = item
},
processStateSelect(item) {
this.filterButton.processStateSelectActive = item
},
//分页
pageChange(val) {
this.currentPage = val
if(this.listTypeSelect == '全部'){
selectByAreaEvent({ pageSize: 4,page: val,}).then((res) => {
this.eventListData = res.data.data.events
this.total = res.data.data.sum
});
} else {
selectByNameAreaEvent({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
// res.data.data.sort(this.compare("captureTime", "inverted"));
// console.log(res.data.data)
this.eventListData = res.data.data.events;
this.total = res.data.data.sum
// this.pageCount = 0
})
}
},
EventBtnsClick(item) {
this.currentPage = 1
this.listTypeSelect = item;
if(item == '全部'){
selectByAreaEvent({ pageSize: 4,page: 1,}).then((res) => {
this.eventListData = res.data.data.events
this.total = res.data.data.sum
});
} else {
selectByNameAreaEvent({eventNewName: item, pageSize: 4,page: 1,}).then((res) => {
// res.data.data.sort(this.compare("captureTime", "inverted"));
// console.log(res.data.data)
this.eventListData = res.data.data.events;
this.total = res.data.data.sum
// this.pageCount = 0
})
}
},
openDetailsDialog(data) {
this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
const EventListDetail = [
{
latLng: { lat: data.latitude, lng: data.longitude },
data: data,
type: "eventList",
},
];
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
EventListDetail,
"poi-event.png",
"EventListDetail"
);
}
},
};
</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;
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: .6);
position: absolute;
z-index: -1;
}
}
.toady-list {
width:100%;
height:132px;
background: url(../../../../assets/construction/toadyListBgi.png) no-repeat center top;
.toady-list-content {
margin-left: 80px;
height:128px;
position: relative;
.toady-list-rotate {
position: absolute;
width: 128px;
height: 128px;
background: url(../../../../assets/construction/rotateBgi.png) no-repeat;
animation: routation 20s linear infinite;
}
.toady-list-icon {
position: absolute;
width: 128px;
height: 128px;
background: url(../../../../assets/construction/toadyListIcon.png) no-repeat;
}
.toady-list-num {
position: absolute;
width: 248px;
height: 72px;
top: 20px;
left: 100px;
background: url(../../../../assets/construction/toadyListBgi2.png) no-repeat;
color: #fff;
line-height: 72px;
text-align: center;
font-size: 18px;
span {
font-size: 38px;
font-weight: bold;
background: linear-gradient(180deg, #ff9fa8 0%, #fff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'DIN-Bold';
}
}
}
}
@keyframes routation {
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.tab-box {
margin:0 10px;
.tabs-button {
position: relative;
.tabs-button-box {
width: 340px;
padding-bottom: 11px;
border-bottom: 3px solid #2c619c;
display: flex;
align-items: center;
// justify-content: space-around;
.tabs-button-btn {
font-size: 18px;
color: rgba($color: #fff, $alpha: 0.6);
position: relative;
cursor: pointer;
}
.tabs-button-btn-active {
font-size: 20px;
color: #fff;
}
.tabs-button-btn-active::after {
content: '';
position: absolute;
bottom: -15px;
// right: 24%;
right: 6%;
width: 64px;
height: 5px;
border-radius: 5px;
background-color: #1ffffc;
}
}
.statisticalAnalysisBtn {
position: absolute;
top: 5px;
right: 0px;
width: 96px;
height: 28px;
font-size: 16px;
color: #1ffefd;
line-height: 28px;
text-align: center;
border: 1px solid rgba(31, 254, 253, .6);
border-radius: 14px;
cursor: pointer;
}
}
.filter-btn-box {
margin-top: 16px;
.filter-btn-typeSelect {
display: flex;
.typeSelect-btn {
border-radius: 20px;
border: 1px solid rgba(0, 255, 255, .6);
background: rgba(2,51,87,.6);
margin-right: 5px;
padding: 4px 10px;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.typeSelect-btn-active {
background: #005ea3;
border: 1px solid #00ffff;
}
}
.filter-btn-processStateSelect {
display: flex;
justify-content: flex-end;
margin-top: 12px;
color: #fff;
.processStateSelect-btn {
display: flex;
align-items: center;
margin-left: 24px;
cursor: pointer;
.select-circle {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #00ffff;
position: relative;
}
.processStateSelect {
margin-left: 8px;
}
}
.processStateSelect-btn-active {
.select-circle::after {
content: "";
width: 8px;
height: 8px;
background: #00ffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
}
}
}
}
.event-list {
// margin-top: 12px;
// margin-top: 30px;
width: 100%;
height: 670px;
position: relative;
.event-details {
cursor: pointer;
margin-top: 16px;
// margin-top: 18px;
width: 100%;
height: 140px;
padding-right: 8px;
background: linear-gradient(90deg, #173759 0, #133150 100%);
.event-details-title {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
span:nth-child(1) {
width: 140px;
padding-left: 10px;
color: #1ffefd;
font-size: 18px;
font-weight: bold;
line-height: 36px;
background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
}
span:nth-child(2) {
color: rgba(255,255,255,.6);
padding-left: 80px;
}
span:nth-child(3) {
width: 49px;
height: 20px;
text-align: center;
line-height: 20px;
background: #ae761c;
border-radius: 2px;
font-size: 14px;
color: #fff;
}
}
.event-details-des {
padding: 8px 0 0 12px;
font-size: 16px;
h5 {
font-weight: normal;
padding-left: 18px;
color: rgba(255,255,255, .6);
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
}
p {
color: rgba(255,255,255, .8);
line-height: 28px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
}
}
}
::v-deep .el-pagination {
position: absolute;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
// margin-top: 16px;
button, ul>li {
width: 28px;
height: 28px;
border-radius: 2px;
border: 1px solid rgba(31,254,253, .5);
background: transparent;
color: rgba(31,254,253, .5);
}
li:not(.disabled).active {
color: #fff;
border: 1px solid rgba(31,254,253, .5);
background: rgba(31,254,253, .5);
}
}
}
}
.statisticalAnalysis {
position: absolute;
left: 486px;
top: 0;
width: 400px;
height: 878px;
background: rgba(24,51,76,.95);
border: 1px solid rgba(50,227,235,.95);
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
}
::v-deep .el-dropdown {
margin-top: 10px;
.el-dropdown-link {
cursor: pointer;
color: #fff;
}
}
}
</style>

429
src/views/pages/areaMonitor/components/EarlyWarning.vue Normal file
View File

@ -0,0 +1,429 @@
<!-- -->
<template>
<div class="early-warning">
<header>
<div class="title">监测预警</div>
</header>
<div class="select-date">
<div
@click="tabsHandleClick(item)"
v-for="item in dateTabs"
:key="item.index"
>
<p>{{ item.name }}</p>
<p>{{ item.dataNum || "71" }}</p>
</div>
</div>
<div class="event-source">
<div class="event-source-title">事件来源：</div>
<div>
<el-radio v-model="checkStatus" label="0">全部</el-radio>
<el-radio v-model="checkStatus" label="1"
>数据智能监测</el-radio
>
<el-radio v-model="checkStatus" label="2">视频感知</el-radio>
</div>
</div>
<div class="type-status">
<span>日期：</span>
<el-date-picker
v-model="dataValue"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</div>
<div class="type-status">
<span>重点区域类型：</span>
<el-select
v-model="typevalue"
class="selectclass"
placeholder="请选择"
>
<el-option
v-for="item in typeoptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<span>事件状态：</span>
<el-select
v-model="statusvalue"
class="selectclass"
placeholder="请选择"
>
<el-option
v-for="item in statusoptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="event-list">
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
<div class="event-details-title">
<p>{{item.eventNewName||''}}</p>
<span>数据智能检测</span>
<span>城市广场</span>
<span>已下发</span>
</div>
<div class="event-details-des">
<p>人数:12</p>
<p>{{ item.captureTime || ''}}</p>
</div>
</div>
<el-pagination
background
layout="prev, pager, next"
@current-change="pageChange"
:page-size = "pageSize"
:total="total"
:current-page="currentPage"
>
</el-pagination>
</div>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
selectByAreaEvent,
selectByNameAreaEvent,
selectByDayAreaEvent,
} from "@/api/area";
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
dateTabs: [
{
name: "今日事件",
data: [],
dataNum: "",
},
{
name: "数据智能监测",
data: [],
dataNum: "",
},
{
name: "视频感知",
data: [],
dataNum: "",
},
],
checkStatus: "2",
dataValue: "",
typevalue: "",
typeoptions: [
{
value: "1",
label: "全部",
},
{
value: "2",
label: "海水浴场",
},
{
value: "3",
label: "城市广场",
},
{
value: "4",
label: "商业街区",
},
],
statusvalue: "",
statusoptions: [
{
value: "1",
label: "全部",
},
{
value: "2",
label: "待下发",
},
{
value: "3",
label: "已下发",
},
{
value: "4",
label: "已忽略",
},
],
eventListData: [],
total:0,
pageSize:6,
currentPage:1,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {
checkStatus(newV, oldV) {
console.log(newV);
// this.$refs.tree.filter(newV);
},
},
//方法集合
methods: {
tabsHandleClick(item) {
// debugger
// this.hiMapFun.removeLayerByLayerName('roadPoint')
this.tableData = item.data;
// this.addToMap(item.data)
},
//分页
pageChange(val) {
this.currentPage = val
// if(this.listTypeSelect == '全部'){
selectByAreaEvent({ pageSize: this.pageSize,page: val,}).then((res) => {
this.eventListData = res.data.data.events
this.total = res.data.data.sum
});
// } else {
// selectByNameAreaEvent({eventNewName: this.listTypeSelect, pageSize: 4,page: val,}).then((res) => {
// this.eventListData = res.data.data.events;
// this.total = res.data.data.sum
// // this.pageCount = 0
// })
// }
},
openDetailsDialog(data) {
this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
const EventListDetail = [
{
latLng: { lat: data.latitude, lng: data.longitude },
data: data,
type: "eventList",
},
];
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
EventListDetail,
"poi-event.png",
"EventListDetail"
);
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
// 查询检测预警。
const params = {
page: 1,
pageSize: this.pageSize,
};
selectByAreaEvent(params).then((res) => {
this.eventListData = res.data.data.events;
this.total = res.data.data.sum;
this.$parent.allListDataNum = res.data.data.sum;
});
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.early-warning {
display: flex;
flex-direction: column;
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;
}
}
.select-date {
margin: 20px 0;
display: flex;
justify-content: space-evenly;
div {
width: 100px;
height: 68px;
background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
background-size: 100% 100%;
text-align: center;
cursor: pointer;
p:nth-child(1) {
color: #fff;
margin-top: 10px;
font-size: 16px;
}
p:nth-child(2) {
margin-top: 4px;
font-size: 18px;
font-weight: bold;
color: #66ffff;
}
}
div:nth-child(2) {
margin: 0 20px;
}
}
.event-source {
display: flex;
color: #fff;
align-items: center;
.event-source-title {
margin: 0 20px 0 10px;
font-size: 16px;
}
::v-deep .el-radio {
color: #fff;
}
}
.type-status {
display: flex;
padding: 5px 0px;
color: #fff;
align-items: center;
span {
font-size: 16px;
margin-left: 10px;
}
.selectclass {
width: 125px;
}
::v-deep .el-input__inner {
background-color: transparent !important;
border-color: #107bb0;
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset;
height: 30px;
color: #fff;
}
::v-deep .el-input__icon {
line-height: 30px;
}
}
.event-list {
// margin-top: 12px;
// margin-top: 30px;
width: 100%;
padding:0px 10px;
height: 670px;
position: relative;
.event-details {
cursor: pointer;
margin-top: 16px;
// margin-top: 18px;
width: 100%;
height: 80px;
padding-right: 8px;
background: linear-gradient(90deg, #173759 0, #133150 100%);
.event-details-title {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
p {
width: auto;
padding-left: 10px;
color: #1ffefd;
font-size: 18px;
font-weight: bold;
line-height: 36px;
background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
}
span{
width: auto;
padding:0px 10px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 2px;
font-size: 14px;
color: #fff;
}
span:nth-child(1) {
background: #ae761c;
}
span:nth-child(2) {
background: #3B5E6E;
}
span:nth-child(3) {
background: #022587;
}
span:nth-child(4) {
background: #ae761c;
}
}
.event-details-des {
padding: 8px 0 0 12px;
font-size: 16px;
display: flex;
p {
width:50%;
color: rgba(255,255,255, .8);
line-height: 28px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
}
}
}
::v-deep .el-pagination {
position: absolute;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
// margin-top: 16px;
button, ul>li {
width: 28px;
height: 28px;
border-radius: 2px;
border: 1px solid rgba(31,254,253, .5);
background: transparent;
color: rgba(31,254,253, .5);
}
li:not(.disabled).active {
color: #fff;
border: 1px solid rgba(31,254,253, .5);
background: rgba(31,254,253, .5);
}
}
}
}
</style>

170
src/views/pages/areaMonitor/components/HorizonTimeLine.vue Normal file
View File

@ -0,0 +1,170 @@
<template>
<div class="m-timeline-wrap">
<div class="m-time-dot">
<div
:class="['m-dot-box', { active: active == item.year }]"
@click="onClickYear(item)"
v-for="(item, index) in timelineData"
:key="index"
>
<p class="u-year">{{ item.year }}</p>
<div class="m-dot">
<div class="u-dot"></div>
</div>
<!-- 演示按钮 -->
</div>
<!-- <el-button
class="shoWToday"
@click="shoWTodayClick"
icon="el-icon-video-play"
>播放</el-button> -->
<div class="shoWToday" @click="shoWTodayClick"><div></div></div>
</div>
</div>
</template>
<script>
export default {
name: "HorizonTimeLine",
props: {
timelineData: {
// 时间轴数据
type: Array,
default: () => {
return [];
},
},
// activeYear: {
// // 初始选中年份
// type: String,
// default: "12:00",
// },
},
data() {
return {
active: this.activeYear,
gettime: "",
index: 0,
time: null,
};
},
methods: {
onClickYear(item) {
console.log("onClickYear==========》", item);
if (this.active !== item.year) {
this.active = item.year;
// console.log("hello", item.year);
}
this.$emit("timeId", item.timeId);
},
shoWTodayClick() {
this.$emit("hotName", "人流热力");
// debugger;
console.log("点击==========》", this.timelineData[this.index]);
this.onClickYear(this.timelineData[this.index]);
this.index++;
this.time = setInterval(() => {
console.log("时间轴数据===========》", this.timelineData, this.index);
if (this.index == this.timelineData.length) {
console.log("清空定时器");
this.onClickYear("");
this.$emit("hot");
this.index = 0;
clearInterval(this.time);
} else {
console.log("点击==========》", this.timelineData[this.index]);
this.onClickYear(this.timelineData[this.index]);
this.index++;
}
}, 200);
console.log(this.timelineData);
},
},
};
</script>
<style lang="scss" scoped>
$themecolor: #3c657c;
.m-timeline-wrap {
// min-width: 120px;
width: 520px;
min-width: 520px;
height: 3px;
background: #3c657c;
.shoWToday {
width: 30px;
height: 30px;
border-radius: 50%;
background: #3c657c;
cursor: pointer;
position: relative;
top: -15px;
left: 10px;
div {
position: absolute;
left: 13px;
top: 6px;
width: 0px;
height: 0px;
border: 8px solid;
border-color: transparent transparent transparent #fff;
transition: all 0.3s;
}
div:hover{
border-color: transparent transparent transparent #66FFFF;
}
}
.m-time-dot {
display: flex;
justify-content: space-around;
.m-dot-box {
cursor: pointer;
text-align: center;
transform: translateY(-39px);
.u-year {
font-size: 15px;
font-weight: 500;
color: #3c657c;
transition: all 0.3s ease-in-out;
}
.m-dot {
margin: 0 auto;
margin-top: 10px;
width: 14px;
height: 14px;
background: #3c657c;
border-radius: 50%;
transition: all 0.3s ease-in-out;
.u-dot {
width: 14px;
height: 14px;
background: #3c657c;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
}
}
.m-dot-box:hover {
.u-year {
color: $themecolor;
}
.m-dot {
.u-dot {
background: $themecolor;
}
}
}
.active {
.u-year {
transform: scale(1) translateY(-18px); // 同时设置多个transform属性只需用空格间隔，执行时从后往前执行！
color: $themecolor;
}
.m-dot {
transform: scale(2);
.u-dot {
transform: scale(0.67);
background: $themecolor;
}
}
}
}
}
</style>

1132
src/views/pages/areaMonitor/components/ImportantAreaPop.vue Normal file
View File

File diff suppressed because it is too large Load Diff

511
src/views/pages/areaMonitor/components/ImportantAreaPopBack.vue Normal file
View File

@ -0,0 +1,511 @@
<template>
<div class="pop-box">
<div class="title-bg"></div>
<div class="title">
<span>{{ feature.data.areaName || "" }}</span>
</div>
<div class="site-address">{{ feature.data.location || "" }}</div>
<div class="site-content">
<div class="site-content-left">
<div>
<div>管理单位：{{ feature.data.management || "" }}</div>
<el-tooltip :content="feature.data.about">
<div class="left-mid-line" style="text-overflow:ellipsis">景区简介：{{ getAbout(feature.data.about)}}</div>
</el-tooltip>
</div>
<div class="area-content-left-top">
<div>
<div>当前人数</div>
<div>{{ feature.data.allNums || "0" }}人</div>
</div>
<div>
<div>本地人数</div>
<div>{{ feature.data.localNums || "0" }}人</div>
</div>
<div>
<div>外地人数</div>
<div>{{ feature.data.nonlocalNums || "0" }}人</div>
</div>
<!-- <div class="noise">
<img src="../../../../assets/construction/noise.png" alt="">
<div>
<p>噪声</p>
<p><span>{{ feature.data.noice || "" }}</span>dB</p>
</div>
</div>
<div class="raise-dust">
<img src="../../../../assets/construction/raiseDust.png" alt="">
<div>
<p>扬尘</p>
<p><span>{{ feature.data.pm10 || "" }}</span>ug/m<sup>3</sup> </p>
</div>
</div> -->
</div>
<div class="site-content-left-bottom">
<div class="filter-btn-typeSelect">
<div class="typeSelect-btn"
v-for="item in filterButton.typeSelect"
:key="item"
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
@click="typeSelect(item)"
>{{item}}</div>
</div>
<div id="chart"></div>
</div>
</div>
<div class="site-content-right">
<!-- <div
class="images"
v-viewer="{movable: false}"
style="
width: 280px;
height: 158px;
cursor: pointer;
"
>
<img @click="show" style="width:100%;height:100%;" :src="feature.data.picUrl||''" alt="">
</div> -->
<div class="images img-container">
<!-- <el-image v-if="feature.data.picUrl && feature.data.picUrl.length" style="width:100%;height:100%;" :src="feature.data.picUrl[0]" :preview-src-list="feature.data.picUrl" alt="" /> -->
<el-image v-if="this.picUrl" style="width:100%;height:100%;" :src="this.picUrl" :preview-src-list="[this.picUrl]" alt="" />
<span v-else>暂无图片</span>
</div>
<div class="video-table">
<h4>周边监控</h4>
<el-table
:data="cameraData"
@row-click="openVideo"
:cell-style="{
color: '#fff',
cursor: 'pointer',
'background-color': '#18304c',
borderColor: '#325d94'
}"
:header-cell-style="{
color: '#1ffefd',
borderColor: '#325d94',
'background-color': '#2b4b7a',
}"
>
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
</el-table-column>
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import bus from "@/views/layout/bus";
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from "v-viewer"
import * as echarts from 'echarts'
import { selectLocalWeekArea, selectLocalMonthArea, selectByAreaImage } from '@/api/area.js'
export default {
name: "",
props: {
feature: {
type: Object,
default: () => {
return {};
},
},
},
mounted() {
selectLocalWeekArea({areaName: this.feature.data.areaName}).then((res) => {
res.data.data.forEach((item) => {
this.weekData.time.unshift(item.pushTime)
this.weekData.local.unshift(item.localNums)
this.weekData.outer.unshift(item.nonlocalNums)
})
this.chartData = this.weekData
this.initCharts()
})
selectLocalMonthArea({areaName: this.feature.data.areaName}).then((res) => {
res.data.data.forEach((item) => {
this.monthData.time.unshift(item.pushTime)
this.monthData.local.unshift(item.localNums)
this.monthData.outer.unshift(item.nonlocalNums)
})
})
selectByAreaImage({areaName: this.feature.data.areaName}).then((res) => {
let returnData = res.data.data
if (returnData.length) {
this.picUrl = returnData[0].picUrl
this.cameraData.push({
cameraName: returnData[0].channelName,
channelCode: returnData[0].channelCode
})
}
})
},
data() {
return {
filterButton:{
typeSelect:['近7天','近30天',],
typeSelectActive:'近7天',
},
cameraData: [],
weekData:{
time:[],
local:[],
outer:[],
},
monthData:{
time:[],
local:[],
outer:[],
},
chartData:{},
picUrl: ''
};
},
methods: {
// particularsClick(data){
// console.log(data)
// bus.$emit("mainClick", data);
// },
getAbout(content) {
if(!content) {
return '暂无'
} else if(content.length < 40) {
return content
} else {
return content.substring(0, 40) + '...'
}
},
typeSelect(item) {
this.filterButton.typeSelectActive = item
if(item == '近7天'){
this.chartData = this.weekData
}
if(item == '近30天'){
this.chartData = this.monthData
}
this.initCharts()
},
openVideo(row){
bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
},
initCharts () {
const option = {
grid: {
bottom: 34,
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
color: 'rgba(255, 255, 255,.8)',
},
axisLine: {
lineStyle: {
color: '#345a99',
}
},
axisTick: {
show: false,
},
boundaryGap: ['2%', '2%'],
data: this.chartData.time
},
yAxis: [
{
type: 'value',
minInterval : 1,
name: '人',
nameTextStyle: {
color: 'rgba(255, 255, 255,.8)'
},
axisLabel: {
color: 'rgba(255, 255, 255,.8)',
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
splitArea: {
interval: '1',
show: true,
areaStyle: {
color: ['#1d3556','#18334c']
}
}
}
],
color: ['#309afe','#fab228'],
legend: {
right: '16%',
top: '12%',
icon: 'line',
data: ['本地人数','外地人数',],
textStyle: {
color: '#fff'
}
},
series: [
{
name: '本地人数',
data: this.chartData.local,
type: 'bar',
symbol: 'none',
lineStyle: {
width: 2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#3cb2ff' // 0% 处的颜色
}, {
offset: 1, color: '#2682ff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
{
name: '外地人数',
data: this.chartData.outer,
type: 'bar',
symbol: 'none',
lineStyle: {
width: 2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fdd033' // 0% 处的颜色
}, {
offset: 1, color: '#fe9820' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
]
}
const charts = echarts.init(
document.getElementById('chart')
)
charts.setOption(option)
},
show () {
const viewer = this.$el.querySelector('.images').$viewer
viewer.show()
},
},
directives: {
viewer: viewer({
debug: true,
}),
},
};
</script>
<style lang="scss">
// .leaflet-popup {
// width: auto !important;
// }
.site-popup {
.leaflet-popup-content-wrapper {
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
background: rgba(24,51,76,.95);
border: 1px solid rgba(50,227,235,.95);
}
.leaflet-popup-content {
width: 734px !important;
height: 453px;
padding: 12px 16px;
.pop-box {
width: 100%;
height: 100%;
.title-bg {
position: absolute;
top: 0;
left: 0;
height: 42px;
width: 100%;
opacity: .4;
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
}
.title{
color: #fff;
font-size: 16px;
span:nth-child(2) {
display: inline-block;
width: 40px;
height: 22px;
margin-left: 8px;
border-radius: 2px;
border: 1px solid #0494ff;
color: #1ffefd;
text-align: center;
font-size: 14px;
}
}
.site-address {
margin: 6px 0;
padding-left: 20px;
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
color: rgba(255, 255, 255, .6);
}
.site-content {
display: flex;
.site-content-left {
width: 392px;
margin-right: 29px;
.left-mid-line {
margin: 6px 0;
}
.area-content-left-top {
width: 100%;
height: 50px;
background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
display: flex;
justify-content: space-around;
align-items: center;
& > div {
text-align: center;
> div:first-child {
color: #1ffefd;
}
> div:last-child {
color: rgba(255, 255, 255,.6);
font-size: 14px;
}
}
}
.site-content-left-bottom {
width: 100%;
margin-top: 16px;
.filter-btn-typeSelect {
display: flex;
.typeSelect-btn {
border-radius: 20px;
border: 1px solid rgba(0, 255, 255, .6);
background: rgba(2,51,87,.6);
margin-right: 5px;
padding: 4px 10px;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.typeSelect-btn-active {
background: #005ea3;
border: 1px solid #00ffff;
}
}
#chart {
width: 100%;
height: 206px;
}
}
}
.site-content-right {
width: 280px;
.img-container {
width: 280px;
height: 158px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.video-table {
margin-top: 20px;
h4 {
color: #fff;
}
.el-table{
margin-top: 8px;
border: 1px solid #325d94;
.el-table__body-wrapper{
height: 90px;
overflow-y: auto;
background: #18304c;
&::-webkit-scrollbar {
width: 8px;
background-color: #10335e;
}
&::-webkit-scrollbar-thumb {
background-color: #446dac !important;
}
.el-table__empty-block {
background: rgba(24,51,76,.95);
}
}
th,td {
border-right: 1px solid #325d94;
}
}
.el-table::before {
display: none;
}
}
}
}
}
}
.leaflet-popup-close-button {
color: #3afefc !important;
font-size: 12px;
}
}
</style>
<style lang='scss' scoped>
.particulars {
position: absolute;
right: 5px;
width: 80px;
height: 40px;
bottom: 5px;
}
.List-Details-pop {
background-color: #fff;
font-size: 16px;
padding-bottom: 20px;
display: flex;
width: 400px;
.topContent {
background: #000;
padding: 14px;
width: 400px;
}
.content {
width: 400px;
display: flex;
flex-wrap: wrap;
b {
color: #000;
font-size: 14px;
}
p {
color: #000;
font-size: 14px;
}
}
.title {
background-color: #000;
color: #fff;
}
}
</style>

399
src/views/pages/areaMonitor/components/SiteList.vue Normal file
View File

@ -0,0 +1,399 @@
<template>
<div class="box">
<div class="title">重点区域列表</div>
<!-- 工地列表 -->
<div class="eventData">
<div style="display: flex;justify-content: space-between">
<el-input
placeholder="请输入区域名称"
prefix-icon="el-icon-search"
@input="searchSite"
v-model="searchValue"
>
</el-input>
<el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="eventNoise">
<el-table
:data="siteData"
height='356'
@row-click="analyse"
:cell-style="{
color: '#fff',
cursor: 'pointer',
'background-color': '#18304c',
}"
:header-cell-style="{
color: '#1ffefd',
'background-color': '#2b4b7a',
}"
>
<el-table-column prop="areaName" label="名称" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="location" label="位置" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="allNums" label="人数">
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import bus from "@/views/layout/bus";
import {
selectKeyAreaList,
selectKeyArea,
selectByAreaName,
selectByLikeName
} from "@/api/area";
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
import { createImportantAreaPop } from "@/supermap/createMarkerPopup";
export default {
data() {
return {
searchValue: "",
siteData: [],
siteDataAll: [],
selectSiteData: [],
InformationActiveName: "基本信息",
informationShow: false,
detailedInfToday: [],
detailedInfWeek: [],
detailedInfMonth: [],
dustActiveName: "今日",
options: [
{
value: "全部",
label: '全部'
},{
value: "公园广场",
label: '公园广场'
},{
value: "商业街区",
label: '商业街区'
}, {
value: "景区景点",
label: '景区景点'
}, {
value: "海水浴场",
label: '海水浴场'
}, {
value: "窗口单位",
label: '窗口单位'
},
],
selectValue: "全部",
siteDataAll: []
};
},
mounted() {
let params = {
type1: "'公园广场','窗口单位'",
type2: "'景区景点','海水浴场'",
type3: "'商业街区'"
}
selectKeyAreaList(params).then((res) => {
this.siteDataAll = res.data.data
this.siteData = res.data.data
})
},
methods: {
searchSite() {
if (!this.searchValue && this.selectValue !== '全部') {
selectKeyArea({ type: this.selectValue }).then((res) => {
this.siteData = res.data.data
})
} else if (!this.searchValue) {
this.siteData = this.siteDataAll;
}else {
const params = {
areaName: this.searchValue,
};
selectByLikeName(params).then((res) => {
this.siteData = res.data.data
});
}
},
fliterSiteByArea(val) {
if(val === '全部') {
let params = {
type1: "'公园广场','窗口单位'",
type2: "'景区景点','海水浴场'",
type3: "'商业街区'"
}
selectKeyAreaList(params).then((res) => {
this.siteData = res.data.data
})
} else {
selectKeyArea({ type: val}).then((res) => {
this.siteData = res.data.data
})
}
},
// 行点击
analyse(row) {
// bus.$emit("openCauseAnalysis", row);
this.$parent.hiMapFun.removerPolygon()
this.$parent.removeRoadCauseAnalysis()
if(row.latitude && row.longitude) {
this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
this.$parent.hiMap.mapObj.map.flyTo({ lat: row.latitude, lng: row.longitude });
let dataEvent = [{
latLng: { lat: row.latitude, lng: row.longitude },
data: row,
type: "site",
}]
this.$parent.hiMapFun.addPointsToMap(
dataEvent,
"poi-red.png",
"roadPoint",
createImportantAreaPop
);
} else if(row.point) {
let arr = JSON.parse(row.point)
let areaLatLng = []
arr.forEach((item) => {
let lonLat = gcjLL2wgs84LL(item[0], item[1]);
areaLatLng.push([lonLat[1],lonLat[0]])
})
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
}
// else {
// selectByAreaName({areaName:row.areaName}).then((res) => {
// if(res.data.data){
// let areaLatLng = []
// res.data.data.forEach((item) => {
// let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
// areaLatLng.push([lonLat[1],lonLat[0]])
// })
// this.$parent.hiMapFun.removerPolygon()
// this.$parent.removeRoadCauseAnalysis()
// this.$parent.hiMapFun.addAreaToMap(areaLatLng)
// }
// })
// }
},
// 关闭基本信息窗口
informationClose() {
this.informationShow = false;
},
},
};
</script>
<style lang='scss' scoped>
.box {
width: 100%;
height: 100%;
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
url(../../../../assets/construction/siteTag.png) no-repeat 324px 17px;
padding: 30px 0 18px 18px;
.title {
color: #fff;
font-size: 20px;
}
::v-deep .eventData {
width: 368px;
margin-top: 14px;
.el-input {
width: 200px;
}
.el-input__inner {
border: 1px solid rgba(31,254,253,.9);
color: #fff;
background: rgba($color: #203b5d, $alpha: .8);
border-radius: unset;
&::placeholder {
color: rgba($color: #fff, $alpha: 0.6);
}
}
.el-input__prefix {
color: rgba(31,254,253,.9);
}
.el-select {
// margin-left: 10px;
.el-input {
width: 161px;
}
}
}
::v-deep .eventNoise {
margin-top: 16px;
.el-table {
border: 1px solid #325d94;
width: 100%;
background: transparent;
th,td {
border-right: 1px solid #325d94 !important;
}
// .descending.is-leaf.is-sortable {
// .sort-caret {
// border-top-color: #1dfeff;
// }
// }
}
.cell {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 16px;
font-weight: normal;
text-align: center;
height: 36px;
line-height: 36px;
}
.el-table th.is-leaf {
border: 1px solid #1f557c;
}
.el-table td {
border: 0;
padding: 5px 0;
}
.el-table th {
padding: 5px 0;
}
.el-table::before {
height: 0px;
}
.el-table__row:nth-of-type(even) > td {
background-color: #113660 !important;
}
.el-table__body-wrapper {
&::-webkit-scrollbar {
width: 8px;
background-color: #10335e;
}
&::-webkit-scrollbar-thumb {
background-color: #446dac !important;
}
}
}
// 基本信息
.informationPop {
position: absolute;
top: 150px;
left: -800px;
width: 700px;
height: 350px;
background: #fff;
::v-deep .el-tabs {
.el-tabs__header {
margin: 0;
.el-tabs__item {
background: #000;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 0 10px;
}
.el-tabs__item.is-active {
background: #ccc;
}
.el-tabs__active-bar {
display: none;
}
.is-top {
background: #000;
}
.el-tabs__nav-wrap::after {
display: none;
}
.el-table::before {
display: none;
}
.el-table th,
.el-table tr {
background: #3c657c;
}
}
}
.informationMain {
width: 100%;
display: flex;
height: 310px;
p {
padding: 4px 10px;
}
.informationLeft {
width: 60%;
}
.informationRight {
width: 40%;
}
}
.informationClose {
position: absolute;
z-index: 100;
right: 13px;
top: 2px;
color: #fff;
cursor: pointer;
font-size: 20px;
}
}
// 详细信息
.dustList {
width: 100%;
::v-deep .el-table::before {
display: none;
}
::v-deep .el-tabs {
.el-tabs__header {
display: flex;
justify-content: flex-start;
padding: 10px 0 10px 5px;
margin-bottom: 0px;
.is-top {
background: #fff;
}
.el-tabs__item {
background: #ccc;
color: #fff;
font-size: 14px;
font-weight: 600;
width: 75px;
text-align: center;
margin: 0 2px;
border-radius: 23px;
padding: 0;
line-height: 26px;
height: 26px;
border: 0;
}
.el-tabs__item.is-active {
background: #409eff;
}
.el-tabs__active-bar {
display: none;
}
.el-tabs__nav-wrap::after {
display: none;
}
.el-table::before {
display: none;
}
.el-table th,
.el-table tr {
background: #fff;
}
}
}
}
}
</style>

451
src/views/pages/areaMonitor/components/SiteListMore.vue Normal file
View File

@ -0,0 +1,451 @@
<template>
<div class="box">
<div class="title">重点区域列表</div>
<!-- 工地列表 -->
<div class="eventData">
<div style="display: flex;justify-content: space-between">
<el-input
placeholder="请输入区域名称"
prefix-icon="el-icon-search"
@input="searchSite"
v-model="searchValue"
>
</el-input>
<el-select v-model="selectAreaValue" placeholder="全部" @change="fliterSiteByArea">
<el-option
v-for="item in areaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="eventNoise">
<el-table
:data="siteData"
height='356'
@row-click="analyse"
:cell-style="{
color: '#fff',
cursor: 'pointer',
'background-color': '#18304c',
}"
:header-cell-style="{
color: '#1ffefd',
'background-color': '#2b4b7a',
}"
>
<el-table-column prop="areaName" label="名称" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="type" label="区域类型" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="management" label="管辖单位" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="location" label="位置" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="allNums" label="负责人">
</el-table-column>
<el-table-column prop="allNums" label="联系电话">
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import bus from "@/views/layout/bus";
import {
selectKeyAreaList,
selectKeyArea,
selectByAreaName,
selectByLikeName
} from "@/api/area";
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
import { createImportantAreaPop } from "@/supermap/createMarkerPopup";
export default {
data() {
return {
searchValue: "",
siteData: [],
siteDataAll: [],
selectSiteData: [],
InformationActiveName: "基本信息",
informationShow: false,
detailedInfToday: [],
detailedInfWeek: [],
detailedInfMonth: [],
dustActiveName: "今日",
areaOptions: [
{
value: "全部",
label: '全部'
},{
value: "市南区",
label: '市南区'
},{
value: "市北区",
label: '市北区'
}, {
value: "李沧区",
label: '李沧区'
}, {
value: "黄岛区",
label: '黄岛区'
}, {
value: "城阳区",
label: '城阳区'
},
{
value: "即墨区",
label: '即墨区'
}, {
value: "平度区",
label: '平度区'
}, {
value: "莱西市",
label: '莱西市'
}, {
value: "崂山区",
label: '崂山区'
}, {
value: "胶州市",
label: '胶州市'
},
],
selectAreaValue:"全部",
options: [
{
value: "全部",
label: '全部'
},{
value: "公园广场",
label: '公园广场'
},{
value: "商业街区",
label: '商业街区'
}, {
value: "景区景点",
label: '景区景点'
}, {
value: "海水浴场",
label: '海水浴场'
}, {
value: "窗口单位",
label: '窗口单位'
},
],
selectValue: "全部",
siteDataAll: []
};
},
mounted() {
let params = {
type1: "'公园广场','窗口单位'",
type2: "'景区景点','海水浴场'",
type3: "'商业街区'"
}
selectKeyAreaList(params).then((res) => {
this.siteDataAll = res.data.data
this.siteData = res.data.data
})
},
methods: {
searchSite() {
if (!this.searchValue && this.selectValue !== '全部') {
selectKeyArea({ type: this.selectValue }).then((res) => {
this.siteData = res.data.data
})
} else if (!this.searchValue) {
this.siteData = this.siteDataAll;
}else {
const params = {
areaName: this.searchValue,
};
selectByLikeName(params).then((res) => {
this.siteData = res.data.data
});
}
},
fliterSiteByArea(val) {
if(val === '全部') {
let params = {
type1: "'公园广场','窗口单位'",
type2: "'景区景点','海水浴场'",
type3: "'商业街区'"
}
selectKeyAreaList(params).then((res) => {
this.siteData = res.data.data
})
} else {
selectKeyArea({ type: val}).then((res) => {
this.siteData = res.data.data
})
}
},
// 行点击
analyse(row) {
// bus.$emit("openCauseAnalysis", row);
this.$parent.hiMapFun.removerPolygon()
this.$parent.removeRoadCauseAnalysis()
if(row.latitude && row.longitude) {
this.$parent.hiMapFun.removeLayerByLayerName("roadPoint");
this.$parent.hiMap.mapObj.map.flyTo({ lat: row.latitude, lng: row.longitude });
let dataEvent = [{
latLng: { lat: row.latitude, lng: row.longitude },
data: row,
type: "site",
}]
this.$parent.hiMapFun.addPointsToMap(
dataEvent,
"poi-red.png",
"roadPoint",
createImportantAreaPop
);
} else if(row.point) {
let arr = JSON.parse(row.point)
let areaLatLng = []
arr.forEach((item) => {
let lonLat = gcjLL2wgs84LL(item[0], item[1]);
areaLatLng.push([lonLat[1],lonLat[0]])
})
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
}
// else {
// selectByAreaName({areaName:row.areaName}).then((res) => {
// if(res.data.data){
// let areaLatLng = []
// res.data.data.forEach((item) => {
// let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
// areaLatLng.push([lonLat[1],lonLat[0]])
// })
// this.$parent.hiMapFun.removerPolygon()
// this.$parent.removeRoadCauseAnalysis()
// this.$parent.hiMapFun.addAreaToMap(areaLatLng)
// }
// })
// }
},
// 关闭基本信息窗口
informationClose() {
this.informationShow = false;
},
},
};
</script>
<style lang='scss' scoped>
.box {
width: 100%;
height: 100%;
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
url(../../../../assets/construction/siteTag.png) no-repeat 507px 17px;
padding: 30px 0 18px 14px;
.title {
color: #fff;
font-size: 20px;
}
::v-deep .eventData {
width: 544px;
margin-top: 14px;
.el-input {
width: 200px;
}
.el-input__inner {
border: 1px solid rgba(31,254,253,.9);
color: #fff;
background: rgba($color: #203b5d, $alpha: .8);
border-radius: unset;
&::placeholder {
color: rgba($color: #fff, $alpha: 0.6);
}
}
.el-input__prefix {
color: rgba(31,254,253,.9);
}
.el-select {
// margin-left: 10px;
.el-input {
width: 161px;
}
}
}
::v-deep .eventNoise {
margin-top: 16px;
.el-table {
border: 1px solid #325d94;
width: 100%;
background: transparent;
th,td {
border-right: 1px solid #325d94 !important;
}
// .descending.is-leaf.is-sortable {
// .sort-caret {
// border-top-color: #1dfeff;
// }
// }
}
.cell {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 16px;
font-weight: normal;
text-align: center;
height: 36px;
line-height: 36px;
}
.el-table th.is-leaf {
border: 1px solid #1f557c;
}
.el-table td {
border: 0;
padding: 5px 0;
}
.el-table th {
padding: 5px 0;
}
.el-table::before {
height: 0px;
}
.el-table__row:nth-of-type(even) > td {
background-color: #113660 !important;
}
.el-table__body-wrapper {
&::-webkit-scrollbar {
width: 8px;
background-color: #10335e;
}
&::-webkit-scrollbar-thumb {
background-color: #446dac !important;
}
}
}
// 基本信息
.informationPop {
position: absolute;
top: 150px;
left: -800px;
width: 700px;
height: 350px;
background: #fff;
::v-deep .el-tabs {
.el-tabs__header {
margin: 0;
.el-tabs__item {
background: #000;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 0 10px;
}
.el-tabs__item.is-active {
background: #ccc;
}
.el-tabs__active-bar {
display: none;
}
.is-top {
background: #000;
}
.el-tabs__nav-wrap::after {
display: none;
}
.el-table::before {
display: none;
}
.el-table th,
.el-table tr {
background: #3c657c;
}
}
}
.informationMain {
width: 100%;
display: flex;
height: 310px;
p {
padding: 4px 10px;
}
.informationLeft {
width: 60%;
}
.informationRight {
width: 40%;
}
}
.informationClose {
position: absolute;
z-index: 100;
right: 13px;
top: 2px;
color: #fff;
cursor: pointer;
font-size: 20px;
}
}
// 详细信息
.dustList {
width: 100%;
::v-deep .el-table::before {
display: none;
}
::v-deep .el-tabs {
.el-tabs__header {
display: flex;
justify-content: flex-start;
padding: 10px 0 10px 5px;
margin-bottom: 0px;
.is-top {
background: #fff;
}
.el-tabs__item {
background: #ccc;
color: #fff;
font-size: 14px;
font-weight: 600;
width: 75px;
text-align: center;
margin: 0 2px;
border-radius: 23px;
padding: 0;
line-height: 26px;
height: 26px;
border: 0;
}
.el-tabs__item.is-active {
background: #409eff;
}
.el-tabs__active-bar {
display: none;
}
.el-tabs__nav-wrap::after {
display: none;
}
.el-table::before {
display: none;
}
.el-table th,
.el-table tr {
background: #fff;
}
}
}
}
}
</style>

765
src/views/pages/areaMonitor/components/StatisticalAnalysis.vue Normal file
View File

@ -0,0 +1,765 @@
<template>
<div>
<div id="StatisticalAnalysis">
<div class="title-bg"></div>
<div class="close-btn" @click="closeDialog"><i class="el-icon-close"></i></div>
<h4>统计分析</h4>
<!-- <div class="tabs-button">
<div class="tabs-button-box">
<div class="tabs-button-btn"
@click="tabHandleClick(item)"
v-for="item in tabsButton"
:key="item"
:class="tabsActiveName == item?'tabs-button-btn-active' : ''"
>
{{item}}
</div>
</div>
</div>
<div class="filter-btn-box">
<div class="filter-btn-typeSelect">
<div class="typeSelect-btn"
v-for="item in filterButton.typeSelect"
:key="item"
:class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active' : ''"
@click="typeSelect(item)"
>{{item}}</div>
</div>
</div> -->
<div key="video" v-if="tabsActiveName == '视频感知事件'">
<div class="event-num">
<span> {{ totalEventCount }}</span>件
</div>
<div class="line"></div>
<div id="event-type-chart"></div>
<div class="line"></div>
<div id="event-state-chart"></div>
<div class="line"></div>
<div id="event-time-chart"></div>
</div>
<div key="road" v-if="tabsActiveName == '出租车走航监测'">
<div class="event-num">
<span>000</span>件
</div>
<div class="line"></div>
<div id="road-time-chart"></div>
<div class="line"></div>
<el-table
:data="PollutionRoad"
height='356'
:cell-style="{
color: '#fff',
cursor: 'pointer',
'background-color': '#18304c',
}"
:header-cell-style="{
color: '#1ffefd',
'background-color': '#2b4b7a',
}"
>
<el-table-column label="Top" width="50" type="index">
</el-table-column>
<el-table-column label="道路" prop="roadName" show-overflow-tooltip>
</el-table-column>
<el-table-column width="84" prop="start" label="路段开始" show-overflow-tooltip>
</el-table-column>
<el-table-column width="84" prop="end" label="路段结束" show-overflow-tooltip>
</el-table-column>
<el-table-column width="86" prop="times" label="告警次数">
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { selectMonthAreaEvent, selectByAreaEvent, selectEventType } from "@/api/area";
export default {
data () {
return {
totalEventCount: '000',
tabsButton: ["视频感知事件","出租车走航监测"],
tabsActiveName: "视频感知事件",
filterButton:{
typeSelect:['全部','近7天','近30天'],
typeSelectActive:'全部',
},
PollutionRoad:[
{
roadName: '某某路',
start: '开始',
end: '结束',
times: '10',
},
{
roadName: '某某路',
start: '开始',
end: '结束',
times: '10',
},
{
roadName: '某某路',
start: '开始',
end: '结束',
times: '10',
},
]
}
},
mounted() {
this.$nextTick( () => {
this.getVideoData()
this.initEventTypeCharts()
this.initEventStateCharts()
// this.initEventTimeCharts()
// this.initRoadTimeCharts()
})
},
methods: {
tabHandleClick(item) {
this.tabsActiveName = item
if(item == '视频感知事件') {
this.$nextTick( () => {
this.initEventTypeCharts()
this.initEventStateCharts()
this.initEventTimeCharts()
})
}
if(item == '出租车走航监测') {
this.$nextTick( () => {
this.initRoadTimeCharts()
})
}
},
typeSelect(item) {
this.filterButton.typeSelectActive = item
},
getVideoData() {
this.totalEventCount = 0;
const params = {
page: 1,
pageSize: 4,
};
selectByAreaEvent(params).then((res) => {
this.totalEventCount = res.data.data.sum
});
selectEventType().then((res) => {
let tempArr = res.data.data || []
let arrLabel = []
let arrValue = []
tempArr.forEach(item => {
if(!arrLabel.length) {
arrLabel.push(item.eventNewName)
arrValue.push(item.number)
} else {
let existFlag = false
arrLabel.forEach((labelItem,labelIndex) => {
if(labelItem === item.eventNewName) {
existFlag = true
arrValue[labelIndex] += item.number
}
})
if(!existFlag) {
arrLabel.push(item.eventNewName)
arrValue.push(item.number)
}
}
})
this.initEventTypeCharts(arrLabel, arrValue)
});
selectMonthAreaEvent().then((res) => {
if(res.data.data && res.data.data.length) {
let xValue = []
let yValue = []
res.data.data.forEach(item => {
xValue.push(item.pushTime)
yValue.push(item.number)
});
this.initEventTimeCharts(xValue, yValue)
}
});
},
closeDialog(){
this.$emit('closeDialog')
},
initEventTypeCharts (arrLabel, arrValue) {
const option = {
title: {
text: "事件类型分布",
left: "left",
top: 15,
textStyle: {
fontSize: 16,
color: "#fff",
fontWeight: "normal"
},
},
grid: {
bottom: 34,
},
xAxis: {
type: 'category',
data: arrLabel,
axisLabel: {
color: '#fff',
margin: 7,
},
axisLine: {
lineStyle: {
color: 'rgba(254, 125, 42,0.6)',
}
},
axisTick: {
show: false,
}
},
yAxis: {
type: 'value',
show: false,
},
series: [
{
data: arrValue,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(254,125,42,1)'
}, {
offset: 1,
color: 'rgba(254,125,42,0)'
}]),
borderWidth: 2,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,211,107,1)'
}, {
offset: 1,
color: 'rgba(255,211,107,0)'
}]),
},
barWidth : 23,
label: {
show: true,
position : 'top',
distance: 5,
color: 'fe982a',
fontSize: 18,
}
}
]
}
const eventType = echarts.init(
document.getElementById('event-type-chart')
)
eventType.setOption(option)
},
initEventStateCharts () {
const option = {
title: [
{
text: "事件状态分布",
left: "left",
top: 15,
textStyle: {
fontSize: 16,
color: "#fff",
fontWeight: "normal"
},
},
{
text: "事件处置率",
subtext: ' 50%',
left: 35,
top: 'center',
textStyle: {
fontSize: 16,
color: "#fff",
fontWeight: "normal"
},
subtextStyle: {
fontSize: 16,
color: "#3bed82",
fontWeight: "normal",
left: 40,
},
}
],
grid: {
bottom: 34,
},
legend: {
top: '36%',
left: '45%',
icon: 'rect',
itemHeight: 10,
itemWidth: 10,
textStyle: {
rich: {
name: {
color: 'rgba(255, 255, 255,0.8)',
fontSize: 16,
},
value: {
fontSize: 20,
color: '#1ef6f5'
}
}
},
formatter(name) {
let than = option.series[0].data;
let total = 0;
let tarValue;
for (let i = 0, l = than.length; i < l; i++) {
total += than[i].value;
if (than[i].name == name) {
tarValue = than[i].value;
}
}
let p = (tarValue / total) * 100;
return '{name|' + name + " " + " " + '}{value|' + tarValue + '件' + " " + " " + p + "%" + '}'
},
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['65%', '100%'],
left: 10,
top: 20,
width: 140,
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
itemStyle: {
borderColor: 'rgba(24,51,76,0.95)',
borderWidth: 1,
},
emphasis: {
label: {
show: false,
}
},
tooltip: {
trigger: 'item'
},
labelLine: {
show: false
},
color:['#3bed82', '#fe7d2a','#bfbfbf'],
data: [
{ value: 50, name: '已处置' },
{ value: 25, name: '未处置' },
{ value: 25, name: '已作废' },
]
},
{
type: 'pie',
radius: ['65%', '80%'],
left: 10,
z: 22,
top: 20,
width: 140,
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
}
},
labelLine: {
show: false
},
color:['rgba(0,0,0,0.35)'],
data: [
{ value: 100 },
]
},
]
}
const eventState = echarts.init(
document.getElementById('event-state-chart')
)
eventState.setOption(option)
},
initEventTimeCharts (xValue, yValue) {
const option = {
title: {
text: "事件时间趋势(近30天)",
left: "left",
top: 15,
textStyle: {
fontSize: 16,
color: "#fff",
fontWeight: "normal"
},
},
grid: {
top: 80,
bottom: 34,
},
tooltip: {
trigger: "axis"
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
color: 'rgba(255, 255, 255,0.8)',
},
axisLine: {
lineStyle: {
color: '#345a99',
}
},
axisTick: {
show: false,
},
boundaryGap: ['2%', '2%'],
data: xValue
},
yAxis: {
type: 'value',
name: '数量',
minInterval : 1,
nameTextStyle: {
color: 'rgba(255, 255, 255.0.8)'
},
axisLabel: {
color: 'rgba(255, 255, 255,0.8)',
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
splitArea: {
interval: '1',
show: true,
areaStyle: {
color: ['#1d3556','#18334c']
}
}
},
series: [
{
data: yValue,
type: 'line',
symbol: 'none',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(254, 152, 32, 0)'
}, {
offset: 1,
color: 'rgba(254, 152, 32, 0.7)'
}]),
},
lineStyle: {
width: 2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fdd033' // 0% 处的颜色
}, {
offset: 1, color: '#fe9820' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
]
}
const eventTime = echarts.init(
document.getElementById('event-time-chart')
)
eventTime.setOption(option)
},
initRoadTimeCharts () {
const option = {
title: {
text: "事件时间趋势",
left: "left",
top: 15,
textStyle: {
fontSize: 16,
color: "#fff",
fontWeight: "normal"
},
},
grid: {
top: 80,
bottom: 34,
},
tooltip: {
trigger: "axis"
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
color: 'rgba(255, 255, 255,0.8)',
},
axisLine: {
lineStyle: {
color: '#345a99',
}
},
axisTick: {
show: false,
},
boundaryGap: ['2%', '2%'],
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
yAxis: {
type: 'value',
name: '数量',
nameTextStyle: {
color: 'rgba(255, 255, 255,0.8)'
},
axisLabel: {
color: 'rgba(255, 255, 255,0.8)',
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
splitArea: {
interval: '1',
show: true,
areaStyle: {
color: ['#1d3556','#18334c']
}
}
},
series: [
{
data: [30, 40, 50, 80, 90, 40, 60, 44, 50, 80, 90, 70],
type: 'line',
symbol: 'none',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(254, 152, 32, 0)'
}, {
offset: 1,
color: 'rgba(254, 152, 32, 0.7)'
}]),
},
lineStyle: {
width: 2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fdd033' // 0% 处的颜色
}, {
offset: 1, color: '#fe9820' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
]
}
const roadTime = echarts.init(
document.getElementById('road-time-chart')
)
roadTime.setOption(option)
},
},
}
</script>
<style lang="scss" scpoed>
#StatisticalAnalysis {
width: 100%;
height: 100%;
position: relative;
padding: 12px 12px 18px;
.title-bg {
position: absolute;
top: 0;
left: 0;
height: 42px;
width: 100%;
opacity: .4;
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
}
.close-btn {
position: absolute;
right: 12px;
top: 12px;
color: #3afefc;
font-size: 12px;
cursor: pointer;
}
h4 {
font-size: 18px;
color: #fff;
font-weight: normal;
}
.tabs-button {
position: relative;
margin-top: 20px;
.tabs-button-box {
padding-bottom: 11px;
border-bottom: 3px solid #2c619c;
display: flex;
align-items: center;
justify-content: space-around;
.tabs-button-btn {
font-size: 18px;
color: rgba($color: #fff, $alpha: 0.6);
position: relative;
cursor: pointer;
}
.tabs-button-btn-active {
font-size: 20px;
color: #fff;
}
.tabs-button-btn-active::after {
content: '';
position: absolute;
bottom: -15px;
right: 24%;
width: 64px;
height: 5px;
border-radius: 5px;
background-color: #1ffffc;
}
}
}
.filter-btn-box {
margin-top: 14px;
.filter-btn-typeSelect {
display: flex;
.typeSelect-btn {
border-radius: 20px;
border: 1px solid rgba(0, 255, 255, .6);
background: rgba(2,51,87,.6);
margin-right: 5px;
padding: 4px 10px;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.typeSelect-btn-active {
background: #005ea3;
border: 1px solid #00ffff;
}
}
}
.event-num {
width: 138px;
height: 45px;
margin: 10px auto;
background: url(../../../../assets/construction/StatisticalAnalysisEventNum.png) no-repeat;
color: #1ffefd;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 36px;
font-weight: bold;
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 8px;
}
}
.line {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba($color: #306db0, $alpha: 0) 0,rgba($color: #306db0, $alpha: 1) 50%, rgba($color: #306db0, $alpha: 0) 100%);
}
#event-type-chart,#event-state-chart {
width: 100%;
height: 207px;
}
#event-time-chart {
width: 100%;
height: 240px;
}
#road-time-chart {
height: 240px;
width: 100%;
}
::v-deep .el-table {
border: 1px solid #325d94;
width: 100%;
th,td {
border-right: 1px solid #325d94 !important;
}
}
.cell {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
font-weight: normal;
text-align: center;
height: 36px;
line-height: 36px;
}
.el-table th.is-leaf {
border: 1px solid #1f557c;
}
.el-table td {
border: 0;
padding: 5px 0;
}
.el-table th {
padding: 5px 0;
}
.el-table::before {
height: 0px;
}
.el-table__row:nth-of-type(even) > td {
background-color: #113660 !important;
}
.el-table__body-wrapper {
&::-webkit-scrollbar {
width: 8px;
background-color: #10335e;
}
&::-webkit-scrollbar-thumb {
background-color: #446dac !important;
}
}
}
</style>

376
src/views/pages/areaMonitor/components/VideoList.vue Normal file
View File

@ -0,0 +1,376 @@
<template>
<div class="box">
<div class="tabs-button">
<div class="tabs-button-box">
<div class="tabs-button-btn"
@click="tabHandleClick(item)"
v-for="item in tabsButton"
:key="item"
:class="tabsActiveName == item ? 'tabs-button-btn-active' : '' "
>
{{item}}
</div>
</div>
</div>
<div v-show="tabsActiveName == '视频标签'" class="label-content">
<el-input
placeholder="请输入关键词"
prefix-icon="el-icon-search"
v-model="labelSearch"
@input="searchLabel"
>
</el-input>
<el-checkbox-group v-model="checkboxGroup">
<el-checkbox-button
v-for="item in tabList"
:label="item.labelName"
:key="item.id"
@change="tabChange(item)"
>
{{item.labelName}}
</el-checkbox-button>
</el-checkbox-group>
</div>
<div v-show="tabsActiveName == '视频列表'" class="label-content">
<el-input
placeholder="请输入关键词"
suffix-icon="el-icon-search"
v-model="labelSearch"
@input="searchCameraTree"
>
</el-input>
<el-tree
v-show="cameraTreeIsShow"
id="tree"
:data="cameraTree"
:props="{label:'name',children:'children',isLeaf:'leaf',}"
:load="loadNode"
node-key="id"
@node-click="treeCameraClick"
empty-text="暂无数据"
:filter-node-method="filterNode"
lazy>
<!-- 是否离线checkStatus -->
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
<!-- <span>{{ data.channelName || '' }}</span> -->
<!-- </span> -->
</el-tree>
<el-tree
v-show="!cameraTreeIsShow"
ref="tree"
:data="cameraTreeSingle"
:props="{label:'channelName',children:'children'}"
:filter-node-method="filterNode"
@node-click="treeCameraClick"
>
<!-- <span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc' : ''}" slot-scope="{ node, data }" class="custom-tree-node"> -->
<!-- <span>{{ data.channelName || '' }}</span> -->
<!-- </span> -->
</el-tree>
</div>
</div>
</template>
<script>
import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
import bus from "@/views/layout/bus";
export default {
data() {
return {
tabsButton: ["视频标签","视频列表"],
tabsActiveName: "视频标签",
tabList:[],
labelSearch:'',
checkboxGroup: [],
cameraAllData:[],
cameraTreeIsShow:true,
cameraTreeSingle: [],
checkStatus: '2',
cameraTree:[],
};
},
mounted() {
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
console.log(this.cameraTree)
res.data.data.forEach((item) => {
this.cameraTreeSingle.push({
channelName: item.name,
children: []
})
})
})
},
watch: {
checkStatus(newV,oldV) {
console.log(newV)
this.$refs.tree.filter(newV)
}
},
methods: {
tabHandleClick(item) {
this.tabsActiveName = item
},
tabChange(item){
if(this.checkboxGroup.indexOf(item.labelName) !== -1){
bus.$emit("removeCameraLayer",'全部')
getCameraLabel({labelCode:item.labelCode}).then((res) => {
bus.$emit("CameraSingleDataOnMap",item.labelName,res.data.data)
// this.addResourceTomap(item.labelName,res.data.data);
// res.data.data.forEach((item) => {
// this.cameraTreeSingle.forEach((val) => {
// if(item.nodeName == val.channelName){
// val.children.push(item)
// }
// })
// })
// this.cameraTreeIsShow = false;
})
}else {
bus.$emit("removeCameraLayer",item.labelName)
// this.checkStatus = "2"
// this.cameraTreeIsShow = true
// getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
// this.cameraTree = res.data.data
// })
}
},
searchLabel(value) {
const params = {
labelName:value
}
selectByLabelName(params).then((res) => {
console.log(res)
this.tabList = res.data.data
})
},
searchCameraTree(value) {
if(value.length > 0){
const params = {
channelName:value
}
selectByChannelName(params).then((res) => {
console.log(res)
this.cameraTree = []
res.data.data.forEach((item) => {
this.cameraTree.push({
name: item.channelName,
gpsX: item.gpsX,
gpsY: item.gpsY,
channelCode:item.channelCode,
leaf:true,
})
})
})
}else {
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
this.cameraTree = res.data.data
})
}
},
reset() {
this.checkboxGroup = []
this.checkStatus = "2";
this.cameraTreeIsShow = true
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
this.cameraTree = res.data.data
})
document.getElementById("tree").scrollTop = 0;
},
loadNode(node, resolve) {
// if (node.level === 0) {
// return resolve([{ name: 'region' }]);
// }
console.log(node)
if (node.level > 0) {
let subData = []
getCameraAllOrgan({parentId:node.data.id}).then((res) => {
if(res.data.data.length == 0){
const params = {
parentId:node.data.id,
checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
}
getCameraByParentId(params).then((res) => {
res.data.data.forEach((item) => {
subData.push({
name: item.channelName,
gpsX: item.gpsX,
gpsY: item.gpsY,
channelCode:item.channelCode,
checkStatus:item.checkStatus,
leaf:true,
})
})
return resolve(subData);
})
}else{
subData = res.data.data
return resolve(subData);
}
})
}
},
treeCameraClick(data) {
console.log(data)
if(data.channelCode){
const cameraTree = [{
latLng: { lat: data.gpsY, lng: data.gpsX },
data: data,
type:'cameraTree'
}]
this.$parent.hiMapFun.removeLayerByLayerName("cameraTree");
this.$parent.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
const arr = [0,0.0,'','0','0.0']
if(arr.indexOf(data.gpsX) == -1){
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
}
}
},
filterNode(value, data) {
if (value == "2") return true;
if (value == "0") {
return data.checkStatus == 0;
}
if (value == "1") {
return data.checkStatus == 1;
}
},
},
};
</script>
<style lang='scss' scoped>
.box {
width: 100%;
height: 100%;
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
url(../../../../assets/construction/videoTag.png) no-repeat 324px 17px;
padding: 30px 0 18px 18px;
.tabs-button {
position: relative;
.tabs-button-box {
width: 358px;
padding-bottom: 11px;
border-bottom: 3px solid #2c619c;
display: flex;
align-items: center;
.tabs-button-btn {
font-size: 18px;
color: rgba($color: #fff, $alpha: 0.6);
position: relative;
cursor: pointer;
margin-right: 28px;
}
.tabs-button-btn-active {
font-size: 20px;
color: #fff;
}
.tabs-button-btn-active::after {
content: '';
position: absolute;
bottom: -15px;
right: 6%;
width: 64px;
height: 5px;
border-radius: 5px;
background-color: #1ffffc;
}
}
}
::v-deep .label-content {
margin-top: 16px;
.el-input {
width: 358px;
}
.el-input__inner {
border: 1px solid rgba(31,254,253,.9);
color: #fff;
border-radius: unset;
background: rgba($color: #203b5d, $alpha: .8);
&::placeholder {
color: rgba($color: #fff, $alpha: 0.6);
}
}
.el-input__prefix {
color: rgba(31,254,253,.9);
}
.el-checkbox-group {
height: 316px;
width: 372px;
overflow-y: auto;
margin-top: 6px;
&::-webkit-scrollbar {
width: 8px;
background-color: #10335e;
}
&::-webkit-scrollbar-thumb {
background-color: #446dac !important;
}
}
.el-checkbox-button {
border-radius: 15px;
margin: 10px;
.el-checkbox-button__inner {
height: 30px;
line-height: 6px;
border-radius: 15px;
background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
border: 1px solid #1d98a0;
font-size: 16px;
color: #1ffefd;
}
.el-checkbox-button__inner:hover {
border: 1px solid #1ffefd;
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
}
}
.el-checkbox-button.is-checked {
.el-checkbox-button__inner{
color: #fff;
border: 1px solid #1ffefd;
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
}
}
.el-tree {
width: 366px;
height: 300px;
overflow-y: auto;
margin-top: 10px;
background: transparent;
color: #fff;
&::-webkit-scrollbar {
width: 8px;
background-color: #10335e;
}
&::-webkit-scrollbar-thumb {
background-color: #446dac !important;
}
.el-tree-node__content:hover {
background: rgba(27,255,255,.2);
}
.el-tree-node:focus > .el-tree-node__content {
background-color: rgba(27,255,255,.2);
color: #fff;
}
}
}
}
</style>

101
src/views/pages/areaMonitor/components/VideoListLeft.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<div class="box">
<div class="list4">
<div class="inner-title">
重点点位视频监控
<span
style="float: right;
font-size: 16px;
color: #fff;
margin-right: 10px;
font-weight: normal;
"
>查看点位列表
<span style="color: #1296db; font-size: 18px; font-weight: bold;cursor: pointer;"
@click="openVideoList">></span
></span
>
</div>
<div class="video-List">
<div id="video1" class="monitor">
</div>
</div>
</div>
<!--视频列表弹出框-->
<!-- <dialog :visible.sync="this.listVisible">>
<video-list></video-list>
</dialog> -->
<!-- <el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<video-list></video-list>
</el-dialog> -->
</div>
</template>
<script>
import bus from "@/views/layout/bus";
import * as echarts from "echarts";
import VideoList from "./VideoList";
// 大华监控配置
const DHWsInstance = DHWs.getInstance({
reConnectCount: 0,
connectionTimeout: 100
})
export default {
data() {
return {
videoVisible: false,
};
},
components: {VideoList},
created() {},
mounted() {
},
methods: {
//打开视频列表
openVideoList(){
this.videoVisible=!this.videoVisible
this.$emit("IsShowLideoVisible",this.videoVisible);
},
},
watch: {},
};
</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;
.inner-title {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
}
.list4 {
width: 100%;
.video-List {
// background: red;
height: 146px;
margin-left: 40px;
margin-right: 40px;
margin-top: 10px;
}
}
}
</style>

535
src/views/pages/areaMonitor/components/VideoListRight.vue Normal file
View File

@ -0,0 +1,535 @@
<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: {
lineStyle: {
color: "#fff",
fontSize: 10,
},
},
},
yAxis: {
type: "value",
axisLine: {
lineStyle: {
color: "#fff",
fontSize: 10,
},
},
},
series: [
{
data: [250, 200, 150, 110, 100, 50],
type: "bar",
itemStyle: {
normal: {
//这里是重点
color: "#fe8463",
},
},
},
],
};
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: {
// 鼠标悬浮提示框显示 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: {
lineStyle: {
color: "#fff",
fontSize: 10,
},
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#fff",
fontSize: 10,
},
},
},
{
type: "value",
axisLine: {
lineStyle: {
color: "#fff",
fontSize: 10,
},
},
},
],
series: [
{
data: [25, 20, 15, 11, 10, 5,6,3],
type: "bar",
itemStyle: {
normal: {
color: "rgb(89 166 190)",
},
},
},
{
type: "line",
yAxisIndex: 1,
data: [59, 10, 140, 40, 30, 40,160,50],
itemStyle: {
color: 'green',
showSymbol: false,
},
},
{
type: "line",
yAxisIndex: 1,
data: [20, 30, 49, 57, 120, 28,40,60],
itemStyle: {
color: 'yellow',
showSymbol: false,
},
},
{
type: "line",
yAxisIndex: 1,
data: [60, 80, 100, 100, 150, 126,100,160],
itemStyle: {
color: 'orange',
showSymbol: false,
},
},
],
};
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: 20px;
line-height: 20px;
border-radius: 1px;
background: #9000;
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;
}
.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: 1px solid #fff;
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;
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>

409
src/views/pages/areaMonitor/components/VideoPlay.vue Normal file
View File

@ -0,0 +1,409 @@
<!--
* @Author: hisense.wuhongjian
* @Date: 2021-05-21 17:43:34
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2021-12-01 13:32:53
* @Description: 告诉大家这是什么
-->
<template>
<div class="dh-view" />
</template>
<script>
const DHWsInstance = DHWs.getInstance({
reConnectCount: 2,
connectionTimeout: 30 * 1000,
messageEvents: {
loginState() {
console.log('aaaa');
}
}
}); // 获取对象实例，使用单例模式，唯一
DHWsInstance.detectConnectQt().then(res => {
if (res) {
console.info('登陆成功');
} else {
console.info('登陆失败,重新登录');
DHWsInstance.login({
loginIp: _global.config.loginInfo.loginIp,
loginPort: _global.config.loginInfo.loginPort,
userName: _global.config.loginInfo.userName,
userPwd: _global.config.loginInfo.userPwd,
});
// this.$Message.info('登录中...');
DHWsInstance.on('loginState', (res) => {
// this.isLogin = res;
if (res) {
// this.$Message.success('登录成功');
// this.activePanel = 'key2'
} else {
// this.$Message.info('登录失败');
}
});
}
});
import bus from '@/views/layout/bus';
export default {
props: {
isDestroyed: {
type: Boolean,
default: true,
},
width: {
type: Number,
default: 0,
},
posX: {
type: Number,
default: 0,
},
posY: {
type: Number,
default: 0,
},
channelId: {
type: Array,
default: [],
},
count: {
type: Number,
default: 0,
},
// ws: {
// type: Object,
// default: () => {
// return {};
// }
// }
},
data() {
return {
ws: DHWsInstance,
activePanel: 'key12580',
isLogin: false,
loginType: '1',
loginIp: _global.config.loginInfo.loginIp,
loginPort: _global.config.loginInfo.loginPort,
userName: _global.config.loginInfo.userName,
userPwd: _global.config.loginInfo.userPwd,
ctrlType: 'playerWin',
ctrlList: [
{
value: 'ctrl1',
label: '控件1',
},
{
value: 'ctrl2',
label: '控件2',
},
{
value: 'ctrl3',
label: '控件3',
},
],
splitList: [
{
value: 1,
label: '1 * 1',
},
{
value: 4,
label: '2 * 2',
},
{
value: 9,
label: '3 * 3',
},
],
displayModeList: [
{
value: 1,
label: '播放器预览模式',
},
{
value: 2,
label: '播放器回放模式',
},
],
ctrl: 'ctrl133',
splitNum: 1,
displayMode: 1,
displayTimeRange: [],
recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
downloadName: '',
downTimeRange: [],
downloadFormat: 0,
downloadFormatList: [
{
value: 0,
label: 'dav',
},
{
value: 1,
label: 'avi',
},
{
value: 2,
label: 'mp4',
},
],
downloadSource: 3,
downloadSourceList: [
{
value: 3,
label: '中心录像',
},
{
value: 2,
label: '设备录像',
},
],
showDownloadStreamType: false,
downloadStreamType: 1,
downloadStreamTypeList: [
{
value: 1,
label: '主码流',
},
{
value: 2,
label: '辅码流',
},
{
value: 3,
label: '三码流',
},
],
downloadIsShow: true,
downloadIsShowList: [
{
value: true,
label: '是',
},
{
value: false,
label: '否',
},
],
// posX: 650,
// posY: 120,
// width: 1250,
height: 800,
ratio: 100,
scrollX: 0,
scrollXH: 0,
scrollY: 0,
scrollYW: 0,
cutPosX: 0,
cutPosY: 0,
cutWidth: 100,
cutHeight: 100,
};
},
watch: {
channelId() {
console.log('监测到了节点的变化', this.channelId);
// bus.$emit('destroyVideoSur', true);
// this.login();
this.realTimeVideo();
},
count() {
// this.setVisible();
},
},
created() {
console.log("#############################我是新的")
// this.destroy();
// this.login();
},
mounted() {
this.realTimeVideo();
// bus.$emit('destroyVideoSur', true);
// this.loginOut();
// this.login();
// bus.$off('destroyDHView');
// bus.$on('destroyDHView', val =>{
// console.log('销毁弹窗插件', val);
// if(!val) {
// this.destroy();
// this.loginOut();
// } else {
// this.login();
// }
// });
},
methods: {
loginOut() {
this.ws.logout({
loginIp: _global.config.loginInfo.loginIp
});
},
create() {
// 调用创建控件接口
if (!this.isLogin) {
// this.$Message.info('正在登陆客户端，请稍等......');
return false;
}
const params = [
{
ctrlType: this.ctrlType,
ctrlCode: this.ctrl,
ctrlProperty: {
displayMode: this.displayMode,
splitNum: this.splitNum,
channelList: [{ channelId: this.channelId }],
},
visible: true,
posX: this.posX,
posY: this.posY,
width: this.width,
height: this.height,
ratio: this.ratio,
scrollX: this.scrollX,
scrollY: this.scrollY,
scrollXH: this.scrollXH,
scrollYW: this.scrollYW,
cutList: [
{
posX: 0,
posY: 0,
width: 0,
height: 0,
},
],
},
];
this.ws.createCtrl(params);
this.ws.on('createCtrlResult', (res) => {
console.info('插件返回信息', res);
});
},
login() { // 调用登录接口
this.ws.detectConnectQt().then(res => {
if (res) { // 连接客户端成功
this.ws.login({
loginIp: _global.config.loginInfo.loginIp,
loginPort: _global.config.loginInfo.loginPort,
userName: _global.config.loginInfo.userName,
userPwd: _global.config.loginInfo.userPwd,
https: 1
});
// this.$Message.info('登录中...');
this.ws.on('loginState', (res) => {
this.isLogin = res;
if (res) {
this.$Message.success('登录成功');
// this.activePanel = 'key2';
} else {
this.$Message.info('登录失败');
}
});
} else { // 连接客户端失败
// this.$Message.info('请重新安装客户端');
this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
confirmButtonText: '下载',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const agent = this.getPCNum();
if (agent === 32) {
// 64位操作系统
this.downloadFile(_global.config.loginInfo.name_32, _global.config.loginInfo.url_32);
} else {
// 32位操作系统
this.downloadFile(_global.config.loginInfo.name_64, _global.config.loginInfo.url_64);
}
}).catch(() => {
});
}
});
},
downloadFile(name, url) {
const alink = document.createElement('a');
alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
alink.href = url;// 创建 url地址
alink.click(); // 自动点击
},
getPCNum() {
const agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
return 32;
}
if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
return 64;
}
},
setVisible() {
// 调用设置控件显隐接口
if (!this.isLogin) {
// this.$Message.info("正在登陆客户端，请稍等......");
return false;
}
const params = [
{
ctrlCode: this.ctrl,
visible: !this.ws.ctrls.find((i) => {
if (i.ctrlCode === this.ctrl) {
return i;
}
}).visible,
},
];
this.ws.setCtrlVisible(params);
},
realTimeVideo() {
// // 调用控件实时播放接口
// if (!this.isLogin) {
// console.log("正在登陆客户端，请稍等......");
// // this.$Message.info("正在登陆客户端，请稍等......");
// return false;
// }
// this.displayMode = 1;
// if (this.ws.ctrls.length === 0) {
// console.log("请先创建控件！");
// // this.$Message.info("请先创建控件！");
// }
// const params = {
// ctrlCode: this.ctrl,
// channelIds: [this.channelId],
// };
// this.ws.openCtrlPreview(params);
console.log('播放', this.channelId);
if (!this.isLogin) {
// this.$Message.info('正在登陆客户端，请稍等......');
// return false;
this.login();
}
// const params = [this.channelId];
console.log('播放', this.channelId);
this.ws.openVideo(this.channelId);
},
destroy() {
// 调用销毁控件接口
if (!this.isLogin) {
// this.login();
// this.$Message.info("正在登陆客户端，请稍等......");
return false;
}
console.log('销毁插件', this.ws.ctrls);
const ctrls = this.ws.ctrls.map((i) => {
if (i.ctrlCode === this.ctrl) {
return i.ctrlCode;
}
});
console.log('销毁的插件名称', ctrls);
this.ws.destroyCtrl(ctrls);
},
},
// beforeDestroyed() {
// this.destroy()
// }
};
</script>
<style lang="scss">
</style>

52
src/views/pages/areaMonitor/components/tiledMap.vue Normal file
View File

@ -0,0 +1,52 @@
<!--
* @Author: hisense.wuhongjian
* @Date: 2020-06-09 20:35:02
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2021-12-21 14:40:47
* @Description: 超图地图容器
-->
<template>
<div :id="mapId" class="tiled-map" />
</template>
<script>
export default {
name: 'TiledMap',
props: {
mapId: {
// 地图容器的div的id
type: String,
default: () => 'map',
},
hiMap: {
// 调用该组件的父组件的v-model绑定的对象
type: Object,
default: () => {},
},
},
data() {
return {
map: '', // 地图对象
};
},
mounted() {
if (!this.map) {
this.initMap();
}
},
methods: {
initMap() {
// setTimeout(()=>{
this.map = this.hiMap.initMap(this.mapId, { type: 'remote' });
// },000);
// this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
},
},
};
</script>
<style lang="scss">
.tiled-map {
position: relative;
width: 100%;
height: 100%;
}
</style>

1063
src/views/pages/areaMonitor/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff