From ca895ffa528c9d8aa5836dcf4121fefe32f69da4 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 1 Jul 2022 09:10:35 +0800
Subject: [PATCH] audio

---
 src/api/model/am.js              |  42 ++++++
 src/components/scTable/index.vue |   4 +-
 src/config/route.js              |   9 ++
 src/views/am/area_rail_form.vue  |  18 ++-
 src/views/am/audio.vue           |  88 +++++++++++
 src/views/am/em1.vue             | 104 +++++++++++++
 src/views/am/monitor.vue         |  61 +++++++-
 src/views/am/vchannel_view.vue   | 221 +++++++++++++++++++++------
 src/views/bigScreen/index.vue    | 251 ++++++++++++++++++++++---------
 src/views/bigScreen/video.png    | Bin 1160 -> 0 bytes
 10 files changed, 667 insertions(+), 131 deletions(-)
 create mode 100644 src/views/am/audio.vue
 delete mode 100644 src/views/bigScreen/video.png

diff --git a/src/api/model/am.js b/src/api/model/am.js
index 11139fc1..96159891 100644
--- a/src/api/model/am.js
+++ b/src/api/model/am.js
@@ -79,6 +79,48 @@ export default {
 			}
 		},
 	},
+	tdevice:{
+		bindArea:{
+			name: "绑定所在区域",
+			req: async function(data){
+				return await http.post(
+					`${config.API_URL}/third/tdevice/bind_area/`,data
+				);
+			}
+		},
+		dchannel:{
+			name: "闸机通道列表",
+			req: async function(data){
+				return await http.post(
+					`${config.API_URL}/third/tdevice/dchannel/`,data
+				);
+			}
+		},
+		labelLocation:{
+			name: "标注坐标位置",
+			req: async function(data){
+				return await http.post(
+					`${config.API_URL}/third/tdevice/label_location/`,data
+				);
+			}
+		},
+		vchannel:{
+			name: "/third/tdevice/vchannel/",
+			req: async function(data){
+				return await http.post(
+					`${config.API_URL}/third/tdevice/vchannel/`,data
+				);
+			}
+		},
+		speaker:{
+			name: "喇叭列表",
+			req: async function(data){
+				return await http.post(
+					`${config.API_URL}/third/tdevice/speaker/`,data
+				);
+			}
+		},
+	},
 
 
 
diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 6fd54772..f03953de 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -277,7 +277,7 @@ export default {
         // delete reqData[config.request.pageSize]
       }
       Object.assign(reqData, this.tableParams);
-     
+     debugger;
       try {
         var res = await this.apiObj.req(reqData);
         if (this.hidePagination) {
@@ -308,7 +308,7 @@ export default {
         if (this.hidePagination) {
 			dataList = response.data || [];
         } else {
-			dataList = response.rows?response.rows:response.data.pageData?response.data.pageData:[];
+			dataList = response.rows?response.rows:response.data.rows?response.data.rows:response.data.pageData?response.data.pageData:[];
         }
 		  if(this.$route.path==='/sys/dept'||this.$route.path==='/ops/menu'){
 			  this.tableData = this.redata(dataList);
diff --git a/src/config/route.js b/src/config/route.js
index 6c36bbb8..3af78ea6 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -400,6 +400,15 @@ const routes = [
           "icon": "el-icon-menu",
         },
         "component": "am/monitor"
+      },
+		{
+        "name": "audio",
+        "path": "/am/audio",
+        "meta": {
+          "title": "喇叭通道",
+          "icon": "el-icon-menu",
+        },
+        "component": "am/audio"
       },
     ]
   },
diff --git a/src/views/am/area_rail_form.vue b/src/views/am/area_rail_form.vue
index 1b004e39..8cb65c37 100644
--- a/src/views/am/area_rail_form.vue
+++ b/src/views/am/area_rail_form.vue
@@ -81,9 +81,6 @@
 					mapServerURL: 'data/map',
 					enableShadows: false, //是否开启阴影 默认false
 					enableLighting: false, //是否开发光照 默认false
-					luminanceAtZenith: 0.54, //纹理亮度
-					scatteringIntensity: 1.0, //镜面强度
-					specularIntensity: 0, //散射强度
 					mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
 					floorControlOptions: {
 						floorHeight: 20,//楼层间距
@@ -93,10 +90,19 @@
 							y: 10,
 						}//控件偏移位置
 					},
-					imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
+					imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
 					backgroundColor: '#3798ff',  //背景颜色
-					defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
-					defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台
+					viewOptions: {
+						//屏幕中心坐标
+						center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
+						// center: {x:120,y:30,z:10},
+						//相机距屏幕中心点距离（单位m）
+						distance: 400,
+						// 旋转角（单位°）
+						rotate: 0,
+						//倾斜角（单位°）
+						tilt: 45,
+					}
 				});
 				window.map.openMapById('0000');
 				window.map.on('loadComplete', e => {
diff --git a/src/views/am/audio.vue b/src/views/am/audio.vue
new file mode 100644
index 00000000..2cfdb7c2
--- /dev/null
+++ b/src/views/am/audio.vue
@@ -0,0 +1,88 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery"  >
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="序号" type="index" width="50"></el-table-column>
+				<el-table-column label="喇叭名称" prop="name" min-width="150"></el-table-column>
+				<el-table-column label="音量" prop="extra" min-width="100">
+					<template #default="scope">
+						<span v-if="scope.row.extra&&scope.row.extra.player">{{scope.row.extra.player.EnvVolume}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="设备sn" prop="sn" min-width="90"></el-table-column>
+				<el-table-column label="ip" prop="extra" min-width="90">
+					<template #default="scope">
+						<span v-if="scope.row.extra">{{scope.row.extra.ip}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="状态" prop="extra" min-width="90">
+					<template #default="scope">
+						<span v-if="scope.row.extra">{{scope.row.extra.online}}</span>
+					</template>
+				</el-table-column>
+				<!--<el-table-column label="位置" prop="count_people" min-width="90"></el-table-column>-->
+				<el-table-column label="所在区域" prop="create_time" min-width="180"></el-table-column>
+				<el-table-column label="覆盖区域" prop="create_time" width="160"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="center" width="160">
+					<template #default="scope">
+						<el-button-group>
+							<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button>
+						</el-button-group>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+	<channel-view v-if="dialogSave" ref="saveDialog" :channelType="50" :channelCode="channelCode" :channelName="channelName" @closed="dialogSave=false"></channel-view>
+</template>
+<script>
+	import channelView from './vchannel_view'
+	export default {
+		name: 'audioVue',
+		components: {
+			channelView
+		},
+		data() {
+			return {
+				apiObj: this.$API.am.tdevice.speaker,
+				dialogSave:  false,
+				limitedVisible:  false,
+				query: {},
+				selection: [],
+				search: {
+					keyword: null
+				},
+				channelCode:'',
+				channelName:'',
+			}
+		},
+		methods: {
+			handlePosition(row){
+				this.channelCode = row.sn;
+				this.channelName = row.name;
+				this.dialogSave = true;
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+
+			//搜索
+			upsearch(){
+			},
+
+			resetQuery(){
+				this.query = {}
+			}
+		}
+	}
+</script>
diff --git a/src/views/am/em1.vue b/src/views/am/em1.vue
index e69de29b..e8604f88 100644
--- a/src/views/am/em1.vue
+++ b/src/views/am/em1.vue
@@ -0,0 +1,104 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery"  >
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="序号" type="index" width="50"></el-table-column>
+				<el-table-column label="设备编号" prop="deviceCode" min-width="100"></el-table-column>
+				<el-table-column label="通道编号" prop="channelCode" min-width="100"></el-table-column>
+				<el-table-column label="通道名称" prop="channelName" min-width="150"></el-table-column>
+				<el-table-column label="通道状态" prop="stat" min-width="150"></el-table-column>
+				<el-table-column label="通道类型" min-width="100">
+					<template #default="scope">{{scope.row.channelType}}</template>
+				</el-table-column>
+				<el-table-column label="设备类型" min-width="100">
+					<template #default="scope">{{scope.row.cameraType}}</template>
+				</el-table-column>
+				<el-table-column label="是否在线" prop="isOnline" min-width="180"></el-table-column>
+				<el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+</template>
+<script>
+	import videoChannelView from './vchannel_view'
+	export default {
+		name: 'monitor',
+		components: {
+			videoChannelView
+		},
+		data() {
+			return {
+				apiObj: this.$API.am.tdevice.dchannel,
+				dialogSave:  false,
+				limitedVisible:  false,
+				query: {},
+				selection: [],
+				search: {
+					keyword: null
+				},
+				channelId:'',
+			}
+		},
+		methods: {
+			handlePosition(row){
+				this.channelCode = row.channelCode;
+				this.channelName = row.channelName;
+				this.dialogSave = true;
+			},
+			//删除区域
+			async handleDel(row){
+				await this.$API.am.area.delete.req(row.id).then(res=>{
+					if(res.err_msg){
+						this.$message.error(res.err_msg);
+					}else{
+						this.$refs.table.refresh();
+						this.$message.success("删除成功")
+					}
+				});
+			},
+
+			//批量删除区域
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					let params = {pk:{pks:this.selection}};
+					this.$API.am.area.deletes.req(params).then(res=>{
+						loading.close();
+						if(res.err_msg){
+							this.$message.error(res.err_msg);
+						}else{
+							this.$refs.table.refresh();
+							this.$message.success("删除成功")
+						}
+					});
+				}).catch(() => {
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+
+
+			//搜索
+			upsearch(){
+
+			},
+
+			resetQuery(){
+				this.query = {}
+			}
+		}
+	}
+</script>
diff --git a/src/views/am/monitor.vue b/src/views/am/monitor.vue
index 8edce40d..79879312 100644
--- a/src/views/am/monitor.vue
+++ b/src/views/am/monitor.vue
@@ -3,7 +3,7 @@
 		<el-header>
 			<div class="left-panel">
 				<div class="right-panel-search">
-					<el-input v-model="search.keyword" placeholder="姓名/手机号" clearable @click="upsearch"></el-input>
+					<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
 					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
 				</div>
 			</div>
@@ -27,6 +27,7 @@
 				<el-table-column label="操作" fixed="right" align="center" width="160">
 					<template #default="scope">
 						<el-button-group>
+							<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button>
 							<el-button text type="primary" size="small" @click="handleView(scope.row)">实时监控</el-button>
 							<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
 								<template #reference>
@@ -39,7 +40,20 @@
 			</scTable>
 		</el-main>
 	</el-container>
-	<video-channel-view v-if="dialogSave" ref="saveDialog" :channelId="channelId" :channelName="channelName" @closed="dialogSave=false"></video-channel-view>
+	<el-dialog
+		:title="channelName"
+		v-model="limitedVisible"
+		:width="745"
+	>
+		<div style="height: 560px;">
+			<video id="videoElement" muted="muted"></video>
+		</div>
+
+		<template #footer>
+			<el-button @click="limitedVisible = false">关闭</el-button>
+		</template>
+	</el-dialog>
+	<video-channel-view v-if="dialogSave" ref="saveDialog" :channelType="60" :channelCode="channelCode" :channelName="channelName" @closed="dialogSave=false"></video-channel-view>
 </template>
 <script>
 	import videoChannelView from './vchannel_view'
@@ -52,21 +66,58 @@
 			return {
 				apiObj: this.$API.am.video.list,
 				dialogSave:  false,
+				limitedVisible:  false,
 				query: {},
 				selection: [],
 				search: {
 					keyword: null
 				},
-				channelId:''
+				channelId:'',
+				params:{
+					json:{
+						data: {
+							channelId: "",
+							streamType: "2",
+							type: "flv"
+						}
+					},
+					code:'video_realtime'
+				},
+
 			}
 		},
+		created(){
+			const scriptInfo = document.createElement("script");
+			scriptInfo.setAttribute("data-callType","callScript");
+			scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
+			document.head.appendChild(scriptInfo)
+		},
 		methods: {
 			handleView(row) {
-				this.channelId = row.channelCode;
+				this.params.json.data.channelId = row.channelCode;
+				this.channelName = row.channelName;
+				this.limitedVisible = true;
+				this.$API.am.video.item.req(this.params).then(res=>{
+					debugger;
+					console.log(res);
+					this.url = res.url;
+					if (flvjs.isSupported()) {
+						let videoElement = document.getElementById('videoElement');
+						let flvPlayer = flvjs.createPlayer({
+							type: 'flv',
+							url: res.url
+						});
+						flvPlayer.attachMediaElement(videoElement);
+						flvPlayer.load();
+						flvPlayer.play();
+					}
+				})
+			},
+			handlePosition(row){
+				this.channelCode = row.channelCode;
 				this.channelName = row.channelName;
 				this.dialogSave = true;
 			},
-
 			//删除区域
 			async handleDel(row){
 				await this.$API.am.area.delete.req(row.id).then(res=>{
diff --git a/src/views/am/vchannel_view.vue b/src/views/am/vchannel_view.vue
index a05df522..20e2379b 100644
--- a/src/views/am/vchannel_view.vue
+++ b/src/views/am/vchannel_view.vue
@@ -1,31 +1,71 @@
 <template>
 	<el-drawer
+		:title="channelName+'位置标记'"
 		v-model="visible"
 		destroy-on-close
 		@closed="closeDrawer"
-		:size="800"
 	>
+		<el-form
+			:model="form"
+			label-width="80px"
+			style="position:absolute;top:15px;left:200px;"
+		>
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="所在区域" prop="name">
+						<el-select v-model="form.area" style="width: 100%">
+							<el-option
+								v-for="item in areasList"
+								:key="item.id"
+								:label="item.name"
+								:value="item.id"
+							/>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="覆盖区域" prop="name">
+						<el-select v-model="form.areas" multiple style="width: 100%">
+							<el-option
+								v-for="item in areasList"
+								:key="item.id"
+								:label="item.name"
+								:value="item.id"
+							/>
+						</el-select>
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
 		<el-container v-loading="loading">
 			<el-main style="padding: 0 20px 20px 20px;">
-				<sc-title :title="channelName"></sc-title>
-				<video id="videoElement" muted="muted"></video>
+				<!--地图-->
+				<div id='mapContainer1'></div>
 			</el-main>
 			<el-footer>
-				<el-button @click="visible = false">关闭</el-button>
+				<el-button
+					type="primary"
+					:loading="isSaveing"
+					@click="submit"
+				>
+					保存
+				</el-button>
+				<el-button @click="visible = false">取消</el-button>
 			</el-footer>
 		</el-container>
 	</el-drawer>
 </template>
-<!--<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>-->
+
 <script>
-	import scVideo from '@/components/scVideo'
 	export default {
-		components: {scVideo},
 		emits: ["success", "closed"],
 		props: {
-			channelId: {
+			channelCode: {
 				type: String,
 			},
+			channelType: {
+				type: Number,
+			},
 			channelName: {
 				type: String,
 			}
@@ -35,56 +75,149 @@
 				loading: false,
 				visible: true,
 				isSaveing: false,
-				params:{
-					json:{
-						data: {
-							channelId: "",
-							streamType: "2",
-							type: "flv"
-						}
-					},
-					code:'video_realtime'
-				},
+				points:[],
+				areasList:[],
+				form:{
+					type:60,//设备类型
+					location:null,//位置信息
+					area:'',//所在区域
+					areas:[],//覆盖区域
+					code:'',//设备唯一标识
+				}
 			};
 		},
-		created(){
-			const scriptInfo = document.createElement("script");
-			scriptInfo.setAttribute("data-callType","callScript");
-			scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
-			document.head.appendChild(scriptInfo)
-		},
 		mounted() {
 			this.$nextTick(()=>{
-				this.params.json.data.channelId = this.channelId;
-				// this.params.json = JSON.stringify(this.jso);
-				this.$API.am.video.item.req(this.params).then(res=>{
-					debugger;
-					console.log(res);
-					this.url = res.url;
-					if (flvjs.isSupported()) {
-						let videoElement = document.getElementById('videoElement');
-						let flvPlayer = flvjs.createPlayer({
-							type: 'flv',
-							url: res.url
-						});
-						flvPlayer.attachMediaElement(videoElement);
-						flvPlayer.load();
-						flvPlayer.play();
-					}
-				})
+				this.loadMap();
 			})
+			this.getArea();
 		},
 		methods: {
+			loadMap(){
+				let that = this;
+				window.map = new jsmap.JSMap({
+					mapType: jsmap.JSMapType.MAP_3D,
+					container: 'mapContainer1',
+					mapServerURL: 'data/map',
+					enableShadows: false, //是否开启阴影 默认false
+					enableLighting: false, //是否开发光照 默认false
+					mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
+					floorControlOptions: {
+						floorHeight: 20,//楼层间距
+						position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
+						offset: {
+							x: 10,
+							y: 10,
+						}//控件偏移位置
+					},
+					imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
+					backgroundColor: '#3798ff',  //背景颜色
+					viewOptions: {
+						//屏幕中心坐标
+						center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
+						// center: {x:120,y:30,z:10},
+						//相机距屏幕中心点距离（单位m）
+						distance: 400,
+						// 旋转角（单位°）
+						rotate: 0,
+						//倾斜角（单位°）
+						tilt: 45,
+					}
+				});
+				window.map.openMapById('0000');
+				window.map.on('loadComplete', e => {
+					console.log('Map loadComplete!');
+					var pointMarker = new jsmap.JSPointMarker({
+						color: '#00FF00',  //填充颜色
+						size: 10,  //尺寸
+						position: new jsmap.JSPoint(114.628074820438, 38.8157131095379, 0),  //坐标
+						floorId: 2,  //楼层id,默认为1（地面）
+						outlineColor: '#CD5C5C',  //边线颜色
+						outlineWidth: 2,  //边线宽
+						depthTest: true,  //是否开启深度检测
+						show: true,  //是否显示
+						allowPicking: true,  //是否允许点击
+						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
+						nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5),  //比例缩放
+						callback: (node) => {
+							console.log(node);
+						}//回调事件
+					});
+					window.map.addMarker(pointMarker);
+					var drawTool = new jsmap.JSDrawToolControl({
+						position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
+						offset: {
+							x: 20,
+							y: 180
+						},  //偏移量
+						drawMode: jsmap.JSDrawMode.POINT,  //画图类型POINT:画点  POLYLINE:画线  POLYGON:画面
+
+						//画图结束的回调，返回所画的点的信息
+						callback: (feature) => {
+							debugger;
+							console.log('add', feature);
+							console.log(feature.properties);//type:POINT;id:"";name:"";floorNo:"";floorId:""
+							console.log(feature.geometry);//type:POINT;coordinates:[114.63028499839209,38.81195080123784,0]
+							this.form.location = feature.geometry.coordinates;
+							debugger;
+						},
+						//移除相应点的回调，返回相应点信息
+						removeCallback: (feature) => {
+							console.log('remove', feature);
+						},
+						//编辑相应点的回调，返回相应点信息
+						editCallback: (feature) => {
+							console.log('editCallback', feature);
+						},
+						//定位到相应点的回调，返回相应点信息
+						locateCallback: (feature) => {
+							console.log('locate..', feature);
+						}
+					});
+					window.map.addControl(drawTool);
+				});
+			},
 			closeDrawer() {
 				this.$emit('closed');
 			},
-
+			getArea(){
+				this.$API.am.area.list.req().then(res=>{
+					debugger;
+					if(res.err_msg){
+						this.message.error(res.err_msg)
+					}else{
+						this.areasList = res.results;
+					}
+				})
+			},
+			//表单提交方法
+			submit() {
+				let that = this;
+				/*let item = this.form.location;
+				let tool = new jsmap.JSMapCoordTool(window.map);
+				let coordinate = {x:item[0],y:item[1],z:item.z};
+				let pixel = tool.mapToScreenCoordinate(coordinate);
+				that.form.location = pixel;*/
+				this.form.code = this.channelCode;
+				this.form.type = this.channelType;
+				that.$API.am.tdevice.labelLocation.req(that.form)
+					.then(res => {
+						that.isSaveing = false;
+						that.visible = false;
+						that.$emit("success");
+						that.$message.success("操作成功");
+						return res
+					}).catch(err => {
+					that.isSaveing = false;
+					return err
+				})
+			},
 		},
 	};
 </script>
 
 <style>
-	/*.el-drawer.rtl{
+	.el-drawer.rtl{
 		width: 90%!important;
-	}*/
+	}
 </style>
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index a5e91c48..a79aa290 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -195,27 +195,20 @@
 		</div>
 		<!--地图-->
 		<div id='mapContainer'></div>
-		<div style="display: block;">
-			<div id="2f51-1656480511896-48924"
-				 style="position: absolute; display:block; top:0; left:0; transform-origin:left top; transform:translate(0%, 0%) translate(1010.03px, 548.439px) scale(1, 1);">
-				<div class="camera-pop left-arrow">
-					<div class="camera-pop-title">
-						<span>实时视频</span>
-						<span class="pop-close" onclick="cameraClose()"></span>
-					</div>
-					<div class="camera-pop-flv" id="popvideo-310" onclick="cameraOpen()">
-						<div class="camera-pop-pause"></div>
-						<div id="videoElement"></div>
-					</div>
-				</div>
-			</div>
-		</div>
+		<!--视频弹窗-->
+	<!--	<div style="display: block;position:absolute;z-index: 10;top: 0;
+    background: rgba(24,36,51,.7);
+    padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap">
+			<div class="v_title">1111111</div>
+			<div class="v_masker"></div>
+		</div>-->
 	</div>
 </template>
 <script>
 	export default {
 		data() {
 			return {
+				domMarkerLayer:null,
 				boxMarkerLayer: null,//风险区域
 				pointMarkerLayer: null,//点位图层
 				polygonMaskerLayer: null,//危险作业
@@ -229,21 +222,23 @@
 				autoRun: false,
 				showUserSelect: false,
 				filterCtrlFocus: true,
-				params:{
-					json:{
+				Vchannels: [],
+				url: '',
+				params: {
+					json: {
 						data: {
 							channelId: "",
 							streamType: "2",
 							type: "flv"
 						}
 					},
-					code:'video_realtime'
+					code: 'video_realtime'
 				},
 			}
 		},
-		created(){
+		created() {
 			const scriptInfo = document.createElement("script");
-			scriptInfo.setAttribute("data-callType","callScript");
+			scriptInfo.setAttribute("data-callType", "callScript");
 			scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
 			document.head.appendChild(scriptInfo)
 		},
@@ -266,8 +261,6 @@
 				},
 				imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
 				backgroundColor: '#3798ff',  //背景颜色
-				/*defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
-				defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台*/
 				viewOptions: {
 					//屏幕中心坐标
 					center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
@@ -282,10 +275,6 @@
 			});
 			window.map.openMapById('0000');
 			window.map.on('loadComplete', e => {
-				console.log('Map loadComplete!');
-				/*//window.map.setSkyBox(jsmap.JSSkyBox.STARRY_SKY);//加载时的图
-				//window.map.weather = jsmap.JSWeather.SNOW;//天气DEFAULT、RAIN、SNOW、FOG、RAIN_SNOW
-				//window.map.mapStyle = jsmap.JSMapStyle.DEFAULT;//地图风格*/
 				var drawTool2 = new jsmap.JSDrawToolControl({
 					position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
 					offset: {
@@ -296,7 +285,7 @@
 
 					//画图结束的回调，返回所画的面信息
 					callback: (feature) => {
-						console.log('add', feature);
+						// console.log('add', feature);
 						console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
 						console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
 						debugger;
@@ -315,22 +304,95 @@
 					}
 				});
 				window.map.addControl(drawTool2);
+				this.domMarkerLayers();
 				this.boxMaskerLayers();
 				this.pointMaskerLayers();
 				this.cameraMaskerLayers();
 				this.polygonMarkerLayers();
 				this.materialsMaskerLayers();
-				/*let tool = new jsmap.JSMapCoordTool(window.map);
-				let coordinate = {x:114.6318495165543,y: 38.81301151091491};
-				let pixel = tool.mapToScreenCoordinate(coordinate);*/
 			});
 			window.map.on('mapClickNode', event => {
+				if(document.getElementById(event.markers[0].id)===null){
+					this.params.json.data.channelId = event.markers[0].id;
+					let domMarker = new jsmap.JSDomMarker({
+						id: event.markers[0].id+'mark',
+						position: new jsmap.JSPoint(event.markers[0].position.x, event.markers[0].position.y, 0),
+						floorId: 1,
+						depthTest: true,
+						content: `<div id="`+event.markers[0].id+`" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
+						offset: jsmap.JSControlPosition.RIGHT_CENTER,
+						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
+						marginOffset: {
+							x:30,
+							y: -50
+						},
+						properties: {
+							type: 0,
+						},
+						callback: (node) => {
+							console.log(node);
+						}
+					});
+					window.map.addMarker(domMarker);
+					var otest = document.getElementById(event.markers[0].id);
+					// 创建一个新dom,并设置icon，绑定点击事件
+					let newEle = document.createElement("div");
+					newEle.className = "v_title";
+					newEle.setAttribute("style","display:flex;justify-content: space-between;padding:10px 0");
+					let title = document.createElement("div");
+					title.innerText = "实时监控";
+					newEle.style.color = "#ffffff";
+					let close = document.createElement("div");
+					close.className = "v_close";
+					close.setAttribute("style","width: 16px;height: 16px;background: url(.//public/img/close.png) no-repeat;background-size: 100% 100%;");
+					newEle.appendChild(title);
+					newEle.appendChild(close);
+					let newEle2 = document.createElement("video");
+					newEle2.id = event.markers[0].id+'videoPlayer';
+					newEle2.setAttribute("style","width: 327px;height:183px;background:url('.//public/img/v_mask.png') no-repeat;background-size: 100% 100%;");
+					// 在对应dom 下追加创建的dom
+					otest.appendChild(newEle);
+					otest.appendChild(newEle2);
+					newEle2.onclick = () => {
+						this.$API.am.video.item.req(this.params).then(res => {
+							debugger;
+							console.log(res);
+							this.url = res.url;
+							if (flvjs.isSupported()) {
+								let videoElement = document.getElementById(event.markers[0].id+'videoPlayer');
+								let flvPlayer = flvjs.createPlayer({
+									type: 'flv',
+									url: res.url
+								});
+								flvPlayer.attachMediaElement(videoElement);
+								flvPlayer.load();
+								flvPlayer.play();
+							}
+						})
+					};
+					close.onclick=()=>{
+						let nodeMark = document.getElementById(event.markers[0].id);
+						nodeMark.remove();
+					}
+				}else{}
+
+			});
+			/*
+			* <div class="v_title" style="width: 327px;height: 45px;padding: 10px 0;font-size: 16px;font-weight: 700;color: #fff;position: relative;padding-left: 8px;display: flex;justify-content: space-between">
+									<div>`+event.markers[0].text+`</div><div style="width: 16px;height: 16px;background: url(.//public/img/close.png) no-repeat;background-size: 100% 100%;" @click="closeVideo"></div>
+									</div>
+									<div class="v_masker" style="width: 327px;height: 183px;background: url(.//public/img/v_mask.png) no-repeat;background-size: 100% 100%;" @click="playVideo()"></div>
+									<div id="`+event.markers[0].id+`"></div>
+			* */
+			this.getVchannels();
+
+		},
+		methods: {
+			playVideo(){
 				debugger;
-				console.log(event);
-				this.params.json.data.channelId = this.channelId;
-				this.$API.am.video.item.req(this.params).then(res=>{
+				this.$API.am.video.item.req(this.params).then(res => {
 					debugger;
-					console.log(res);
+					// console.log(res);
 					this.url = res.url;
 					if (flvjs.isSupported()) {
 						let videoElement = document.getElementById('videoElement');
@@ -343,15 +405,16 @@
 						flvPlayer.play();
 					}
 				})
+			},
 
-			});
-			// 地图缩放级别变化事件，返回当前level和上一个level值，level范围为1-24
-			/*window.map.on('mapScaleLevelChanged', (last, current) => {
-				console.log(last + ',' + current);
-			});*/
-
-		},
-		methods: {
+			domMarkerLayers() {//风险区域
+				this.domMarkerLayer = new jsmap.JSDomMarkerLayer({
+					minimumLevel:3,
+					maxmumLevel:22,
+					show:true
+				});
+				window.map.addLayer(this.domMarkerLayer);
+			},
 			boxMaskerLayers() {//风险区域
 				this.boxMarkerLayer = new jsmap.JSBoxMarkerLayer({
 					minimumLevel: 3,
@@ -417,7 +480,7 @@
 					allowPicking: false, //是否允许点击
 					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
 					callback: (marker) => {
-						console.log(marker);
+						// console.log(marker);
 					}
 				});
 				this.boxMarkerLayer.addMarker(boxMarker);
@@ -439,7 +502,7 @@
 					allowPicking: false, //是否允许点击
 					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
 					callback: (marker) => {
-						console.log(marker);
+						// console.log(marker);
 					}
 				});
 				this.boxMarkerLayer.addMarker(boxMarker1);
@@ -459,38 +522,44 @@
 					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
 					nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5),  //比例缩放
 					callback: (node) => {
-						console.log(node);
+						// console.log(node);
 					}//回调事件
 				});
 				this.pointMarkerLayer.addMarker(pointMarker);
 			},
 			//摄像头
 			showCameraMarkers() {
-				let iconTextMarker = new jsmap.JSIconTextMarker({
-					id: 'iconTextMarker',
-					position: {x: 114.63184951655, y: 38.81301151091491},  //坐标
-					floorId: 1,  //楼层id,默认为1（地面）
-					image: "/img/camera.svg",
-					text: '摄像头',
-					font: '10px sans-serif',
-					fontColor: '#fff645',
-					imageHeight: 16,
-					imageWidth: 16,
-					backgroundColor: 'rgba(0,0,0,0.3)',
-					backgroundRadius: 1,
-					backgroundStrokeColor: 'rgba(0,0,0,0.3)',
-					backgroundStrokeWidth: 1,
-					iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
-					allowPicking: true,
-					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
-					nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
-					show: true,
-					callback: (marker) => {
-						debugger;
-						console.log(marker);
-					}
-				});
-				this.cameraMaskerLayer.addMarker(iconTextMarker);
+				let that = this;
+				let iconTextMarker = null;
+				that.Vchannels.forEach(item => {
+					let pixel = item.my_info.location;
+					iconTextMarker = new jsmap.JSIconTextMarker({
+						id: item.channelCode,
+						position: {x: pixel[0], y: pixel[1], z: pixel[2]},  //坐标
+						floorId: 1,  //楼层id,默认为1（地面）
+						image: "/img/camera.svg",
+						text: '摄像头',
+						font: '10px sans-serif',
+						fontColor: '#fff645',
+						imageHeight: 16,
+						imageWidth: 16,
+						backgroundColor: 'rgba(0,0,0,0.3)',
+						backgroundRadius: 1,
+						backgroundStrokeColor: 'rgba(0,0,0,0.3)',
+						backgroundStrokeWidth: 1,
+						iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
+						allowPicking: true,
+						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
+						nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
+						show: true,
+						callback: (marker) => {
+							debugger;
+							console.log(marker);
+						}
+					});
+					that.cameraMaskerLayer.addMarker(iconTextMarker);
+				})
+
 			},
 			//危险作业
 			showPolygonMarkers() {
@@ -513,7 +582,7 @@
 						test: 'polygonTest'
 					},//属性设置
 					callback: (marker) => {
-						console.log(marker);
+						// console.log(marker);
 					}//回调
 				});
 				this.polygonMaskerLayer.addMarker(polygonMarker);
@@ -634,11 +703,24 @@
 					that.showUserSelect = false;
 				}, 300)
 			},
-			//点击摄像头
-			cameraClose(){
+			getVchannels() {
+				this.$API.am.video.list.req(this.params).then(res => {
+					if (res.err_msg) {
+						this.$message.error(res.err_msg);
+					} else {
+						this.Vchannels = res.pageData;
+					}
+				});
+			},
+			//播放视频
+			playVchannel() {
 
 			},
-			cameraOpen(){
+			//点击摄像头
+			cameraClose() {
+
+			},
+			cameraOpen() {
 
 			},
 		},
@@ -650,6 +732,27 @@
 </script>
 
 <style scoped lang="scss">
+	.v_title {
+		width: 327px;
+		height: 45px;
+		line-height: 22px;
+		font-size: 16px;
+		font-weight: 700;
+		color: #fff;
+		position: relative;
+		padding-left: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.v_masker {
+		width: 327px!important;
+		height: 183px!important;
+		background: url(/public/img/v_mask.png) no-repeat!important;
+		background-size: 100% 100%!important;
+	}
+
 	.hoverPointer:hover {
 		cursor: pointer;
 	}
diff --git a/src/views/bigScreen/video.png b/src/views/bigScreen/video.png
deleted file mode 100644
index f120a2cbbcc713857e29718f6fd818e0756ba228..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1160
zcmV;31b6$1P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000C}Nkl<ZSVyf^
zZEO@(6g_u#cIm1>2sUln-C`|~KN2ye8WL;bCy7)9q6sR+Akyw^WBmxm{s3eAzyvf#
zgx%5_!7lvKlF}$9G+;<I(v&D9SQDCxwmU6tK!{?}kDYnf%of|3+1bu?>r3{>&O7Ja
zGv~g!GlW^J&}Y1qQrc4tYyhYLfblcd2*4vm(h-Tq+WKp6z3f$%ya0>$jXnaOzn;Kr
zJ>bVd^o1lu(?B%vlN)|U10^wDBuL*4@Jnt&j{8JSlJGSQMCp1qepUk|v59g)^bLT*
zoQhAAh9%~zY-u<eDB90qNzw-9SlB|B^W@+kTWHL#nPH&l0N+AF>m;E3|1<!?aW&$v
zay1Z&Yt1?L+|@B{QWg1#8D>eqIPK(<Pug{MJt*Oxd_tm!(b_AZ3D-)_05+)l-9yp5
zi~j+v2I5+~{ZT8r4LH3~Mo^xlqy&)Y5oqmYT)4tHIH5LGkvC)*C~f9~l%@^a6}MMN
zc%@u&EYvk*B*Hj;N#LIe?_T_}T=@Go8Zj7C2^7aCstMF$mpSvijL`g<#s3;dx;5Wk
zVsu}2Pldso2bDm=VjvVt?EzuCxzv+ogxF&~@3#iv%n&1XPT+KM1|y6Q)u{gstAV)I
z0&umt+Lvp6SXJa{T2IlgjshFM)^YLLOi55eRpiZ91C81VFh6cKu)37+Kr!Lr5<<xW
zZ$@4|r9)XE;d_;Fs(;#qk<8R0>QE!{YFh#mEdW^(FaWm)fpag&`1EIiyB1M8kp=Ud
zyK?Xsf&3t$s*JGyn2xq}lkK~3mGMNYZX$6)RRY!o!m-p2CcNt;U3ag9hWjU<gw7<R
z{Wr$CrG(1RbSl68$%u3abUy2Y(T4Uufvw9YIj?@F<7n@60>s#vjQZcR9m4TVASrz^
z?dzFkgdMAVc<Top50yx1L1Qfr0&DJ+(s#V4Tciy=x`fc)$B3+u(&-sPtF%e8O0uX{
zqw@}141}Awf_1Iij7&yuP9Fffx&-3qy^p}xS4wzorG&=w0`GTOdE}GtOV-d?ivi<L
zs4;Z{49h{B)iY=V8zzi%aozk5By^||fBFDs7$}ZU)Doz1E=AqA42}#cfdh^P3isZ~
zm;J%B055S9%59(ewbW?EaQ*x%jt0_gh-=#bZpy8I8;fdGMQ%2u9H&dDQTqzaPrJ#@
zW}iWa1{HaWo#XsT78_e8k<V~iIh!KcvGlpB$XlKEv(MMJSq>NI`xsn1Hxrq$ySBg#
z2*pzk06xgU#5EvY{OC+vPj8q|OnVN*F#roa86ort2{l7C{vX}&o(vcw;aIAY3Ht#o
zce$gJEObS!%j<J1o-v5r2;seBWgPH*0>&CgEc4+!?M7W+{o=pfw6e|tH{u-!IZq$g
zKW65L8Oy*&gNonsMdhY7>jcb#;dp8%1Ml3t_NJ=%cY7)5X%2W53dgk<0U?q~;E-32
a9rrI|D~2$xM<MM10000<MNUMnLSTZg!X}vj