From 1e2d207aea24b5956d5ece95ed4a9db0f59f34d7 Mon Sep 17 00:00:00 2001
From: 648540858 <456panlinlin>
Date: 星期五, 22 四月 2022 16:21:05 +0800
Subject: [PATCH] 添加优化后的地图页面，完全一处百度地图相关的api
---
web_src/src/components/devicePosition.vue | 575 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 334 insertions(+), 241 deletions(-)
diff --git a/web_src/src/components/devicePosition.vue b/web_src/src/components/devicePosition.vue
index 2674b0f..cc74dc1 100644
--- a/web_src/src/components/devicePosition.vue
+++ b/web_src/src/components/devicePosition.vue
@@ -1,260 +1,353 @@
<template>
- <div id="devicePosition" style="height: 100%">
- <el-container style="height: 100%">
- <el-header>
- <uiHeader></uiHeader>
- </el-header>
- <el-container>
- <el-aside width="250px" height="100%" style="background-color: #FFFFFF; margin: 0 0 20px 20px;">
- <div style=" padding-top: 10px">
- <el-tree class="el-scrollbar"
- ref="tree"
- id="deviceTree"
- empty-text="鏈煡鑺傜偣"
- node-key="id"
- :highlight-current="false"
- :expand-on-click-node="false"
- :props="props"
- :load="loadNode"
- @node-contextmenu="contextmenuEventHandler"
- @node-click="nodeClickHandler"
- lazy>
- </el-tree>
- </div>
-
- </el-aside>
- <el-main>
- <MapComponent></MapComponent>
- </el-main>
- </el-container>
- </el-container>
+ <div id="devicePosition" style="width: 100vw; height: 91vh;">
+ <el-container style="height: 91vh;" v-loading="isLoging">
+ <el-aside width="auto" style="background-color: #ffffff">
+ <DeviceTree ref="deviceTree" :clickEvent="clickEvent" :contextMenuEvent="contextmenuEventHandler" ></DeviceTree>
+ </el-aside>
+ <el-main style="height: 91vh; padding: 0">
+ <MapComponent ref="map"></MapComponent>
+ </el-main>
+ </el-container>
+ <div ref="infobox" v-if="channel != null " >
+ <div v-if="channel != null" class="infobox-content">
+ <el-descriptions class="margin-top" :title="channel.name" :column="1" :colon="true" size="mini" :labelStyle="labelStyle" >
+ <el-descriptions-item label="鐢熶骇鍘傚晢">{{channel.manufacture}}</el-descriptions-item>
+ <el-descriptions-item label="鍨嬪彿">{{channel.model}}</el-descriptions-item>
+ <el-descriptions-item label="璁惧褰掑睘" >{{channel.owner}}</el-descriptions-item>
+ <el-descriptions-item label="琛屾斂鍖哄煙" >{{channel.civilCode}}</el-descriptions-item>
+ <el-descriptions-item label="瀹夎鍦板潃" >{{channel.address == null?'鏈煡': channel.address}}</el-descriptions-item>
+ <el-descriptions-item label="浜戝彴绫诲瀷" >{{channel.ptztypeText}}</el-descriptions-item>
+ <el-descriptions-item label="缁忕含搴�" >{{channel.longitude}},{{channel.latitude}}</el-descriptions-item>
+ <el-descriptions-item label="鐘舵��">
+ <el-tag size="small" v-if="channel.status === 1">鍦ㄧ嚎</el-tag>
+ <el-tag size="small" type="info" v-if="channel.status === 0">绂荤嚎</el-tag>
+ </el-descriptions-item>
+ </el-descriptions>
+ <div style="padding-top: 10px">
+ <el-button type="primary" size="small" title="鎾斁" icon="el-icon-video-play" @click="play(channel)"></el-button>
+ <el-button type="primary" size="small" title="缂栬緫浣嶇疆" icon="el-icon-edit" @click="edit(channel)"></el-button>
+ <el-button type="primary" size="small" title="杞ㄨ抗鏌ヨ" icon="el-icon-map-location" @click="getTrace(channel)"></el-button>
+ </div>
+ <span class="infobox-close el-icon-close" @click="closeInfoBox()"></span>
+ </div>
+ </div>
+ <devicePlayer ref="devicePlayer" ></devicePlayer>
+ <queryTrace ref="queryTrace" ></queryTrace>
</div>
</template>
<script>
-import uiHeader from "./UiHeader.vue";
import MapComponent from "./common/MapComponent.vue";
import DeviceService from "./service/DeviceService";
+import DeviceTree from "./common/DeviceTree";
+import channelMapInfobox from "./dialog/channelMapInfobox";
+import devicePlayer from './dialog/devicePlayer.vue'
+import queryTrace from './dialog/queryTrace.vue'
+
export default {
- name: "devicePosition",
- components: {
- MapComponent,
- uiHeader,
- },
- data() {
- return {
- deviceService: new DeviceService(),
- props: {
- label: 'name',
- children: 'children',
- isLeaf: 'leaf'
- },
- };
- },
- created() {
- this.init();
- },
- destroyed() {
-
- },
- methods: {
- init(){
-
+ name: "devicePosition",
+ components: {
+ MapComponent,
+ DeviceTree,
+ channelMapInfobox,
+ devicePlayer,
+ queryTrace,
+ },
+ data() {
+ return {
+ deviceService: new DeviceService(),
+ layer: null,
+ lineLayer: null,
+ channel: null,
+ infoBoxId: null,
+ labelStyle: {
+ width: "56px"
},
- loadNode: function(node, resolve){
- if (node.level === 0) {
- this.deviceService.getAllDeviceList((data)=>{
- console.log("all deivce")
- console.log(data)
- if (data.length > 0) {
- let nodeList = []
- for (let i = 0; i < data.length; i++) {
- let node = {
- name: data[i].name || data[i].deviceId,
- id: data[i].deviceId,
- online: data[i].online,
- deviceId: data[i].deviceId,
- }
- nodeList.push(node);
- }
- resolve(nodeList)
- }else {
- resolve([])
- }
- }, (error)=>{
+ isLoging: false,
+ };
+ },
+ created() {
+ if (this.$route.query.deviceId) {
+ console.log(this.$route.query.deviceId)
+ // this.$refs.deviceTree.openByDeivceId(this.$route.query.deivceId)
+ setTimeout(()=>{ // 寤惰繜浠ョ瓑寰呭湴鍥惧姞杞藉畬鎴� TODO 鍚庣画淇敼涓洪�氳繃鏄疄闄呰繖锛涚姸鎬佸姞鍥炶皟瀹屾垚
+ this.deviceService.getAllChannel(false, this.$route.query.deviceId, this.channelsHandler)
+ }, 1000)
- })
+ }
+ },
+ destroyed() {
+
+ },
+ methods: {
+ clickEvent: function (data) {
+ if (data.channelId && data.subCount == 0) {
+ // 鐐瑰嚮閫氶亾
+ if (data.longitude * data.latitude === 0) {
+ this.$message.error('鏈幏鍙栧埌浣嶇疆淇℃伅');
+ } else {
+ if (this.layer != null) {
+ this.$refs.map.removeLayer(this.layer);
+ }
+ this.closeInfoBox()
+ this.layer = this.$refs.map.addLayer([{
+ position: [data.longitude, data.latitude],
+ image: {
+ src: this.getImageByChannel(data),
+ anchor: [0.5, 1]
+ },
+ data: data
+ }], this.featureClickEvent)
+ this.$refs.map.panTo([data.longitude, data.latitude], mapParam.maxZoom)
}
- if (node.level === 1){
- console.log(node)
- this.deviceService.getAllCatalog(node.data.deviceId, (data)=>{
- console.log("all Catalog")
- console.log(data)
- if (data.length > 0) {
- let nodeList = []
- for (let i = 0; i < data.length; i++) {
- let node = {
- name: data[i].name || data[i].channelId,
- id: data[i].channelId,
- online: data[i].status === 1,
- deviceId: data[i].deviceId,
- channelId: data[i].channelId,
- }
- nodeList.push(node);
- }
- resolve(nodeList)
- }else {
- resolve([])
- }
- }, (error)=>{
-
- })
- }
-
- if (node.level > 1) {
- console.log(node.data.channelId)
- this.deviceService.getAllSubCatalog(node.data.deviceId, node.data.channelId, (data)=>{
- console.log("all Catalog")
- console.log(data)
- if (data.length > 0) {
- let nodeList = []
- for (let i = 0; i < data.length; i++) {
- let node = {
- name: data[i].name || data[i].channelId,
- id: data[i].channelId,
- online: data[i].status === 1,
- deviceId: data[i].deviceId,
- channelId: data[i].channelId,
- }
- nodeList.push(node);
- }
- resolve(nodeList)
- }else {
- resolve([])
- }
- }, (error)=>{
-
- })
- }
- },
- contextmenuEventHandler: function (event,data,node,element){
- if (node.data.type !== 0) {
- data.parentId = node.parent.data.id;
- this.$contextmenu({
- items: [
- {
- label: "绉婚櫎閫氶亾",
- icon: "el-icon-delete",
- disabled: false,
- onClick: () => {
- this.$axios({
- method:"delete",
- url:"/api/platform/catalog/relation/del",
- data: data
- }).then((res)=>{
- console.log("绉婚櫎鎴愬姛")
- node.parent.loaded = false
- node.parent.expand();
- }).catch(function (error) {
- console.log(error);
- });
- }
- }
- ],
- event, // 榧犳爣浜嬩欢淇℃伅
- customClass: "custom-class", // 鑷畾涔夎彍鍗� class
- zIndex: 3000, // 鑿滃崟鏍峰紡 z-index
- });
- }else {
- this.$contextmenu({
- items: [
- {
- label: "鍒锋柊鑺傜偣",
- icon: "el-icon-refresh",
- disabled: false,
- onClick: () => {
- this.refreshCatalog(node);
- }
- },
- {
- label: "鏂板缓鑺傜偣",
- icon: "el-icon-plus",
- disabled: false,
- onClick: () => {
- this.addCatalog(data.id, node);
- }
- },
- {
- label: "淇敼鑺傜偣",
- icon: "el-icon-edit",
- disabled: node.level === 1,
- onClick: () => {
- this.editCatalog(data, node);
- }
- },
- {
- label: "鍒犻櫎鑺傜偣",
- icon: "el-icon-delete",
- disabled: node.level === 1,
- divided: true,
- onClick: () => {
- this.$confirm('纭畾鍒犻櫎?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.removeCatalog(data.id, node)
- }).catch(() => {
-
- });
- }
- },
- {
- label: "璁句负榛樿",
- icon: "el-icon-folder-checked",
- disabled: node.data.id === this.defaultCatalogIdSign,
- onClick: () => {
- this.setDefaultCatalog(data.id)
- },
- },
- // {
- // label: "瀵煎嚭",
- // icon: "el-icon-download",
- // disabled: false,
- // children: [
- // {
- // label: "瀵煎嚭鍒版枃浠�",
- // onClick: () => {
- //
- // },
- // },
- // {
- // label: "瀵煎嚭鍒板叾浠栧钩鍙�",
- // onClick: () => {
- //
- // },
- // }
- // ]
- // },
-
- ],
- event, // 榧犳爣浜嬩欢淇℃伅
- customClass: "custom-class", // 鑷畾涔夎彍鍗� class
- zIndex: 3000, // 鑿滃崟鏍峰紡 z-index
- });
- }
-
- return false;
- },
- nodeClickHandler: function (data, node, tree){
- this.chooseId = data.id;
- this.chooseName = data.name;
- if (this.catalogIdChange)this.catalogIdChange(this.chooseId, this.chooseName);
}
},
+ contextmenuEventHandler: function (event, data) {
+ if (data.channelId && data.subCount == 0) {
+ // 鐐瑰嚮閫氶亾
+ this.$contextmenu({
+ items: [
+ {
+ label: "鎾斁",
+ icon: "el-icon-video-play",
+ disabled: false,
+ onClick: () => {
+ this.play(data);
+ }
+ },
+ {
+ label: "缂栬緫浣嶇疆",
+ icon: "el-icon-edit",
+ disabled: false,
+ onClick: () => {
+ this.edit(data)
+ }
+ },
+ {
+ label: "杞ㄨ抗鏌ヨ",
+ icon: "el-icon-map-location",
+ disabled: false,
+ onClick: () => {
+ this.getTrace(data)
+ }
+ }
+ ],
+ event, // 榧犳爣浜嬩欢淇℃伅
+ customClass: "custom-class", // 鑷畾涔夎彍鍗� class
+ zIndex: 3000, // 鑿滃崟鏍峰紡 z-index
+ });
+ } else {
+ this.deviceOrSubChannelMenu(event, data)
+ }
+
+ },
+ deviceOrSubChannelMenu: function (event, data) {
+ // 鐐瑰嚮璁惧
+ this.$contextmenu({
+ items: [
+ {
+ label: "瀹氫綅",
+ icon: "el-icon-s-promotion",
+ disabled: false,
+ onClick: () => {
+ if (!data.channelId) {
+ this.deviceService.getAllChannel(false, data.deviceId, this.channelsHandler)
+ }
+ if (data.channelId && data.subCount > 0) {
+ // 鐐瑰嚮瀛愮洰褰�
+ this.deviceService.getAllSubChannel(false, data.deviceId, data.channelId, this.channelsHandler)
+ }
+ }
+ }
+ ],
+ event, // 榧犳爣浜嬩欢淇℃伅
+ customClass: "custom-class", // 鑷畾涔夎彍鍗� class
+ zIndex: 3000, // 鑿滃崟鏍峰紡 z-index
+ });
+
+ },
+ channelsHandler: function (channels) {
+ console.log(2)
+ if (channels.length > 0) {
+ this.clean()
+ this.closeInfoBox()
+ let params = [];
+ for (let i = 0; i < channels.length; i++) {
+ if (channels[i].longitude * channels[i].latitude === 0) {
+ continue;
+ }
+ let item = {
+ position: [channels[i].longitude, channels[i].latitude],
+ image: {
+ src: this.getImageByChannel(channels[i]),
+ anchor: [0.5, 1]
+ },
+ data: channels[i]
+ }
+ params.push(item);
+ }
+ console.log(3)
+
+ this.layer = this.$refs.map.addLayer(params, this.featureClickEvent)
+ console.log(4)
+ if (params.length === 1) {
+ this.$refs.map.panTo([channels[0].longitude, channels[0].latitude], mapParam.maxZoom)
+ } else if (params.length > 1) {
+ this.$refs.map.fit(this.layer)
+ } else {
+ this.$message.error('鏈幏鍙栧埌浣嶇疆淇℃伅');
+ }
+ } else {
+ this.$message.error('鏈幏鍙栧埌浣嶇疆淇℃伅');
+ }
+ },
+ getImageByChannel: function (channel) {
+ let src = "static/images/gis/camera.png"
+ switch (channel.ptztype) {
+ case 1:
+ if (channel.status === 1) {
+ src = "static/images/gis/camera1.png"
+ } else {
+ src = "static/images/gis/camera1-offline.png"
+ }
+ break;
+ case 2:
+ if (channel.status === 1) {
+ src = "static/images/gis/camera2.png"
+ } else {
+ src = "static/images/gis/camera2-offline.png"
+ }
+ break;
+ case 3:
+ if (channel.status === 1) {
+ src = "static/images/gis/camera3.png"
+ } else {
+ src = "static/images/gis/camera3-offline.png"
+ }
+ break;
+ default:
+ if (channel.status === 1) {
+ src = "static/images/gis/camera.png"
+ } else {
+ src = "static/images/gis/camera-offline.png"
+ }
+ }
+ return src;
+ },
+ featureClickEvent: function (channels) {
+ this.closeInfoBox()
+ if (channels.length > 0) {
+ this.channel = channels[0]
+ }
+ this.$nextTick(() => {
+ this.infoBoxId = this.$refs.map.openInfoBox([this.channel.longitude, this.channel.latitude], this.$refs.infobox, [0, -50])
+ })
+ },
+ closeInfoBox: function () {
+ if (this.infoBoxId != null) {
+ this.$refs.map.closeInfoBox(this.infoBoxId)
+ }
+ },
+ play: function (channel) {
+
+ let deviceId = channel.deviceId;
+ this.isLoging = true;
+ let channelId = channel.channelId;
+ console.log("閫氱煡璁惧鎺ㄦ祦1锛�" + deviceId + " : " + channelId);
+ let that = this;
+ this.$axios({
+ method: 'get',
+ url: '/api/play/start/' + deviceId + '/' + channelId
+ }).then(function (res) {
+ that.isLoging = false;
+ if (res.data.code === 0) {
+
+ that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
+ streamInfo: res.data.data,
+ hasAudio: channel.hasAudio
+ });
+
+ } else {
+ that.$message.error(res.data.msg);
+ }
+ }).catch(function (e) {
+ });
+ },
+ edit: function (data) {
+ this.$message.warning('鏆備笉鏀寔');
+ },
+ getTrace: function (data) {
+ // this.$message.warning('鏆備笉鏀寔');
+ this.clean()
+ this.$refs.queryTrace.openDialog(data, (channelPositions) => {
+ console.log("getTrace")
+ console.log(channelPositions)
+ if (channelPositions.length === 0) {
+ this.$message.success('鏈煡璇㈠埌杞ㄨ抗淇℃伅');
+ } else {
+ let positions = [];
+ for (let i = 0; i < channelPositions.length; i++) {
+ if (channelPositions[i].cnLng * channelPositions[i].cnLat > 0) {
+ positions.push([channelPositions[i].cnLng, channelPositions[i].cnLat])
+ }
+
+ }
+ if (positions.length === 0) {
+ this.$message.success('鏈煡璇㈠埌杞ㄨ抗淇℃伅');
+ return;
+ }
+ this.lineLayer = this.$refs.map.addLineLayer(positions)
+ this.$refs.map.fit(this.lineLayer)
+ }
+ })
+ },
+ clean: function (){
+ if (this.lineLayer != null) {
+ this.$refs.map.removeLayer(this.lineLayer)
+ }
+ if (this.infoBoxId != null) {
+ this.$refs.map.closeInfoBox(this.infoBoxId)
+ }
+ if (this.layer != null) {
+ this.$refs.map.removeLayer(this.layer)
+ }
+ }
+ },
+
};
</script>
<style>
+.infobox-content{
+ width: 260px;
+ background-color: #FFFFFF;
+ padding: 10px;
+ border-radius: 10px;
+ border: 1px solid #e2e2e2;
+}
+.infobox-content::after {
+ position: absolute;
+ bottom: -11px;
+ left: 130px;
+ display: block;
+ content: "";
+ width: 16px;
+ height: 16px;
+ background: url('~@static/images/arrow.png') no-repeat center;
+}
+.infobox-close {
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ color: #000000;
+ cursor:pointer
+}
+.el-descriptions__title {
+ font-size: 1rem;
+ font-weight: 700;
+ padding: 20px 20px 0px 23px;
+ text-align: center;
+ width: 100%;
+}
</style>
--
Gitblit v1.8.0