From 4ac408e9a9c9c24ef0ea3e12004a500238956103 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 28 Apr 2021 11:55:00 +0800
Subject: [PATCH] 地图 热力图 设备 视频 详情页 图标
---
public/map/widgets/supervisoryMap/template.html | 25 +
src/api/dataL/axiosL.js | 10
public/map/images/1.psd | 0
public/map/images/Yz.png | 0
public/map/popup/html/FlareClusterLayer_v3 copy.html | 73 +++++
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js | 207 ++++++++-------
src/views/dataL/dataL.vue | 286 ++++++++++++++-------
public/map/images/selfbaojin.gif | 0
public/map/images/selfbaojin2.gif | 0
public/map/widgets/supervisoryMap/SupervisoryMap.js | 147 +++++++++-
src/views/clientManagement/clientManagement.vue | 1
src/views/system/cs.vue | 28 +
12 files changed, 539 insertions(+), 238 deletions(-)
diff --git a/public/map/images/1.psd b/public/map/images/1.psd
new file mode 100644
index 0000000..01bab5d
--- /dev/null
+++ b/public/map/images/1.psd
Binary files differ
diff --git a/public/map/images/Yz.png b/public/map/images/Yz.png
new file mode 100644
index 0000000..7b8bf95
--- /dev/null
+++ b/public/map/images/Yz.png
Binary files differ
diff --git a/public/map/images/selfbaojin.gif b/public/map/images/selfbaojin.gif
new file mode 100644
index 0000000..08b6784
--- /dev/null
+++ b/public/map/images/selfbaojin.gif
Binary files differ
diff --git a/public/map/images/selfbaojin2.gif b/public/map/images/selfbaojin2.gif
new file mode 100644
index 0000000..8107416
--- /dev/null
+++ b/public/map/images/selfbaojin2.gif
Binary files differ
diff --git a/public/map/popup/html/FlareClusterLayer_v3 copy.html b/public/map/popup/html/FlareClusterLayer_v3 copy.html
index 063b02c..879f236 100644
--- a/public/map/popup/html/FlareClusterLayer_v3 copy.html
+++ b/public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -160,7 +160,7 @@
<div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
<!-- 从layui传值给iframe 的占位input -->
<!-- <div class="aaa bbb">13223456745</div> -->
- <input type="text" id="sidIput" ref="sidIput" style="display:none">
+ <input type="text" id="sidIput" ref="sidIput" style="display: none;">
<div class="flare-liu-top">
<div class="f-l-t-heard">{{name}}</div>
<div class="f-l-t-center">{{machineCode}}</div>
@@ -169,13 +169,17 @@
<div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
</div>
</div>
- <div class="flare-liu-body">
+ <div class="flare-liu-body" v-if="'start'">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first">
<div class="r-b-top">
<div class="r-b-t-main">
<span class="r-b-t-left">设备名称</span>
<span class="r-b-t-right">{{ name }}</span>
+ </div>
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">使用方</span>
+ <span class="r-b-t-right">{{ deptname }}</span>
</div>
<div class="r-b-t-main">
<span class="r-b-t-left">设备联系人</span>
@@ -201,8 +205,7 @@
<div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
<!-- <el-image style="width: 68px; height: 68px" :src="value" :preview-src-list="imgsl"
v-show="value != 'no'"> -->
- <el-image style="width: 68px; height: 68px" :src="value"
- v-show="value != 'no'">
+ <el-image style="width: 68px; height: 68px" :src="value" v-show="value != 'no'">
</el-image>
<div v-show="value == 'no'" style="
width: 68px;
@@ -221,6 +224,14 @@
</div>
</div>
</el-tab-pane>
+ <el-tab-pane label="现场视频" name="second">
+ <!-- {{aoud}} -->
+ <div>
+ <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
+ <source id="source" :src="aoud" type="application/x-mpegURL"></source>
+ </video>
+ </div>
+ </el-tab-pane>
<!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
</el-tabs>
</div>
@@ -237,10 +248,13 @@
num: '',
name: '',
statesss: '',
+ // start:false,
//详细信息data
ourData: '',
// names: '',
contacts: '',
+ deptname: '',//使用方
+ aoud: '',//视频
calls: '',
imgsl: [],
deploymentTime: '',
@@ -331,6 +345,53 @@
}
}
},
+ getUser(dat) {
+ var xhr = null
+ , my = this
+ , url = '/api/blade-jfpts/equipment/equipment/detail?id=' + dat;
+ if (XMLHttpRequest) { //http请求
+ xhr = new XMLHttpRequest();
+ } else {
+ xhr = new ActiveXObject("Microsoft.XMLHTTP");
+
+ }
+ xhr.open("get", url, true);
+ xhr.send();
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ // 判断isJson是否传进来了
+ var data = JSON.parse(xhr.responseText);// JSON转js
+ var ourd = data.data,
+ cl = ourd.channelNumber,
+ deviceCode = ourd.serialNumber;
+ my.deptname = ourd.deptName;
+ // console.log(data,1111111111111)
+ var xhr2 = null//视频请求
+ , url = 'https://web.byisf.com:18000/GetPlayUrl?deviceCode='+ deviceCode +'&chl=' + cl;
+ if (XMLHttpRequest) { //http请求
+ xhr2 = new XMLHttpRequest();
+ } else {
+ xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
+
+ }
+ xhr2.open("get", url, true);
+ xhr2.send();
+ xhr2.onreadystatechange = function () {
+ if (xhr2.readyState === 4) {
+ if (xhr2.status === 200) {
+ // 判断isJson是否传进来了
+ var data2 = JSON.parse(xhr2.responseText);// JSON转js
+ my.aoud = data2.data.m3u8;
+ // console.log(data2,222222222222)
+
+ }
+ }
+ }
+ }
+ }
+ }
+ },
handleClick(tab, event) {//标签tab点击事件
// console.log(tab, event);
}
@@ -338,10 +399,12 @@
mounted() {
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
clearTimeout(this.oldtime);
+ // console.log(this.$refs.sidIput.value)
this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
+ this.getUser(this.ourData.id);
// console.log(this.ourData);
this.getdatas(this.ourData);
- }, 20);
+ },100);
}
diff --git a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
index c6bf66b..cb8249e 100644
--- a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
+++ b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -251,103 +251,103 @@
});
that.layuiLayer.close(that.layuiLayer.index);
//两个弹窗
- that.layuiLayer.open({
- title: '',
- type: 2,
- shadeClose: false,
- shade: false,
- skin: 'demo-class',
- // id: 'onelyOne',
- maxmin: false, //开启最大化最小化按钮
- area: ['200px', '70px'],
- // area: 'auto',
- offset: posi,
- skin: 'flares',
- closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
- content: [url, 'no'],
- resize: false,
- scrollbar: false,
- // tipsMore: true, //允许多个tipe
- // content: num,
- success: function (layero, index) {//成功后添加全局点击关闭
- // console.log(evt.graphic.attributes);
- $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
- // console.log(layero, index);
- that.indexs = index;
+ // that.layuiLayer.open({
+ // title: '',
+ // type: 2,
+ // shadeClose: false,
+ // shade: false,
+ // skin: 'demo-class',
+ // // id: 'onelyOne',
+ // maxmin: false, //开启最大化最小化按钮
+ // area: ['200px', '70px'],
+ // // area: 'auto',
+ // offset: posi,
+ // skin: 'flares',
+ // closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
+ // content: [url, 'no'],
+ // resize: false,
+ // scrollbar: false,
+ // // tipsMore: true, //允许多个tipe
+ // // content: num,
+ // success: function (layero, index) {//成功后添加全局点击关闭
+ // // console.log(evt.graphic.attributes);
+ // $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
+ // // console.log(layero, index);
+ // that.indexs = index;
- var isclickD = true
- , endx = null
- , endy = null;
- layero[0].style.position = 'absolute';
+ // var isclickD = true
+ // , endx = null
+ // , endy = null;
+ // layero[0].style.position = 'absolute';
- downs = document.onmousedown = () => { //鼠标按下事件
- // console.log('down');//start
- // downs = document.onmousedown = null;
- var mx = window.event.clientX//鼠标初始位置
- , my = window.event.clientY
- , cx = this.offset[1].replace("px", "")//初始位置
- , cy = this.offset[0].replace("px", "");
+ // downs = document.onmousedown = () => { //鼠标按下事件
+ // // console.log('down');//start
+ // // downs = document.onmousedown = null;
+ // var mx = window.event.clientX//鼠标初始位置
+ // , my = window.event.clientY
+ // , cx = this.offset[1].replace("px", "")//初始位置
+ // , cy = this.offset[0].replace("px", "");
- //判断鼠标是否在地图上
- // console.log(mx,'+',my);
- if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
- // console.log('on map')
- if (endx != null && endy != null) {
- cx = endx;
- cy = endy;
- }
- moves = document.onmousemove = () => {//鼠标移动事件
- // console.log('move');//move
- // console.log(this.offset)
- var ux = window.event.clientX//记录实时位置
- , uy = window.event.clientY;
- endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
- endy = +cy + (uy - my);
- layero[0].style.left = endx + 'px';
- layero[0].style.top = endy + 'px';
- // console.log(+cx, +cy,'初始位置');
- // console.log(mx, my,'鼠标初始位置');
- // console.log(ux, uy,'记录实时位置');
- // console.log(ux, uy,'最后位置');
- isclickD = false;
- ups = document.onmouseup = () => {//鼠标抬起事件
- // console.log('up');//end
- // downs = document.onmousedown = null;
- moves = document.onmousemove = null;
- ups = document.onmouseup = null;
- var timess = setTimeout(() => {
- clearTimeout(timess);
- timess = null;
- isclickD = true;
- }, 1);
- }
- }
- }
- }
- clickD = document.onclick = () => {
- if (isclickD) {
- parent[0].layer.close(index);
- // parent[0].layer.close(+index + 1);
- // parent[0].layer.closeAll();
- // console.log(111111111111)
- clickD = document.onclick = null;
- }
- }
+ // //判断鼠标是否在地图上
+ // // console.log(mx,'+',my);
+ // if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
+ // // console.log('on map')
+ // if (endx != null && endy != null) {
+ // cx = endx;
+ // cy = endy;
+ // }
+ // moves = document.onmousemove = () => {//鼠标移动事件
+ // // console.log('move');//move
+ // // console.log(this.offset)
+ // var ux = window.event.clientX//记录实时位置
+ // , uy = window.event.clientY;
+ // endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
+ // endy = +cy + (uy - my);
+ // layero[0].style.left = endx + 'px';
+ // layero[0].style.top = endy + 'px';
+ // // console.log(+cx, +cy,'初始位置');
+ // // console.log(mx, my,'鼠标初始位置');
+ // // console.log(ux, uy,'记录实时位置');
+ // // console.log(ux, uy,'最后位置');
+ // isclickD = false;
+ // ups = document.onmouseup = () => {//鼠标抬起事件
+ // // console.log('up');//end
+ // // downs = document.onmousedown = null;
+ // moves = document.onmousemove = null;
+ // ups = document.onmouseup = null;
+ // var timess = setTimeout(() => {
+ // clearTimeout(timess);
+ // timess = null;
+ // isclickD = true;
+ // }, 1);
+ // }
+ // }
+ // }
+ // }
+ // clickD = document.onclick = () => {
+ // if (isclickD) {
+ // parent[0].layer.close(index);
+ // // parent[0].layer.close(+index + 1);
+ // // parent[0].layer.closeAll();
+ // // console.log(111111111111)
+ // clickD = document.onclick = null;
+ // }
+ // }
- var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
- //鼠标滚轮事件
- function myMouseWheelHandler(event) {
- // console.log("Mouse wheel value = " + event.value);
- parent[0].layer.close(index);
- // parent[0].layer.close(+index + 1);
- mouseWheel.remove();
- }
+ // var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
+ // //鼠标滚轮事件
+ // function myMouseWheelHandler(event) {
+ // // console.log("Mouse wheel value = " + event.value);
+ // parent[0].layer.close(index);
+ // // parent[0].layer.close(+index + 1);
+ // mouseWheel.remove();
+ // }
- },
- end: function () { //关闭事件
+ // },
+ // end: function () { //关闭事件
- }
- });
+ // }
+ // });
that.layuiLayer.open({ //第二个iframe
title: '',
type: 2,
@@ -992,24 +992,29 @@
}
},
- _createSingle: function (single) {
+ _createSingle: function (single) {//加载图标样式
this.singles.push(single);
delete single.graphic;
var symbol;
- // console.log(single.state);
- if (single.state != '') {
- symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40);
- } else {
- if (single.jtype == 1) {
- symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40);
+ console.log();
+ if(single.tenant_id == undefined){//如果不是业主
+ if (single.state != '') {
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40);
} else {
- if (single.onlineStatus == 1) {
- symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
+ if (single.jtype == 1) {
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/selfbaojin2.gif", 80, 80);
} else {
- symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
+ if (single.onlineStatus == 1) {
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
+ } else {
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
+ }
}
}
+ }else{//是业主
+ symbol = new esri.symbol.PictureMarkerSymbol("./images/Yz.png", 40, 40);
}
+
var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.js b/public/map/widgets/supervisoryMap/SupervisoryMap.js
index 828588b..215c332 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.js
+++ b/public/map/widgets/supervisoryMap/SupervisoryMap.js
@@ -160,10 +160,16 @@
onceTime: 300,
// 警情缓存
Pdata: null,
+ // 警情图标缓存
+ Pdatas: null,
//业主缓存
Ydata: null,
+ // 业主图标缓存
+ Ydatas: null,
//设备缓存
Sdata: null,
+ // 设备图标缓存
+ Sdatas: null,
constructor: function (options, srcRefNode) {
this._map = options.map;
@@ -276,6 +282,27 @@
// if ($(this).index() == 1) { return };
// if ($(this).index() == 2) { return };
+ //解决打开热力图 切换top获取不了数据问题 警情
+ if ($('#policeHeatMap').prop('checked') == true) {
+ // console.log($('#policeHeatMap').prop('checked') == true)
+ $('#policeHeatMap').prop('checked', false);
+ that.checkBoxSelect($('#policeHeatMap'));
+ }else
+ //解决打开热力图 切换top获取不了数据问题 业主
+ if ($('#ownerHeatMap').prop('checked') == true) {
+ // console.log($('#ownerHeatMap').prop('checked') == true)
+ $('#ownerHeatMap').prop('checked', false);
+ that.checkBoxSelect($('#ownerHeatMap'));
+ }else
+ //解决打开热力图 切换top获取不了数据问题 设备
+ if ($('#equipmentHeatMap').prop('checked') == true) {
+ // console.log($('#equipmentHeatMap').prop('checked') == true)
+ $('#equipmentHeatMap').prop('checked', false);
+ that.checkBoxSelect($('#equipmentHeatMap'));
+ }
+
+
+ // console.log($('#policeHeatMap').prop('checked') == true)
if (that.entitysData.length > 0) {
that.analysisAddEntitys.clear();
that.entitysData = [];
@@ -286,6 +313,7 @@
that.heatmapfeatureLayer.setRenderer();
$('.analysis-category input').prop('checked', false);
}
+
$(this).addClass('on').siblings().removeClass('on');
@@ -704,7 +732,7 @@
$('.analysis-container > div .select-list').off('click', 'li').on('click', 'li', function (event) {
// console.log(event.currentTarget.innerHTML,'innerhtml')
var text = $(this).text().trim();
- // console.log(text,'text()')
+ // console.log(this,text,'text()')
// console.log(that.tabIndex,'tabIndex')
$(this).parent().parent().prev().html(text + '<i></i>');
@@ -730,17 +758,7 @@
} else if (that.tabIndex == 2) {
- var categoryText = $('#ownerCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerCategory > div:eq(0)').attr('ownerid');
- var levelText = $('#ownerLevel > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerLevel > div:eq(0)').text().trim();
-
- var parentId = $(this).parent().parent().parent().attr('id');
- if (parentId == 'ownerCategory') {
- that.getOwnerDj($('#ownerLevel'), categoryText);
- that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, '');
- } else {
- that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, levelText);
- }
-
+ that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), text == '全部' ? '' : text);
} else if (that.tabIndex == 0) {
that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), text == '全部' ? '' : text);
}
@@ -798,7 +816,9 @@
lgtd: result[i].jd,
lttd: result[i].wd,
id: result[i].id
- }, result[i].jd, result[i].wd, './images/police-situation.png');
+ }, result[i].jd, result[i].wd,
+ // './images/police-situation.png'
+ );
t = result[i].alarmTime.substr(0, 10);
e = result[i].alarmTime.substr(11);
@@ -850,6 +870,7 @@
$('.analysis-category input').prop('checked', false);
};
that.flareClusterLayer(result);//图标渲染
+ that.Pdatas = result;
that.clusterLayer._setUserState('警情');//切换聚合图标点击事件
for (var i = 0; i < 1000; i++) {
@@ -892,7 +913,7 @@
// })
},
// 获取业主信息列表
- getOwnerTable: function (dom, type, dj) {
+ getOwnerTable: function (dom, deviceType) {
dom.empty();
var that = this;
$.ajax({
@@ -904,9 +925,37 @@
success: function (data) {
// var result = data.data;
var oldData = data.data;
- // console.log(oldData)
- var result = oldData;
+ // console.log(deviceType)
+ var result = [];
that.Ydata = oldData;
+
+ if (deviceType == '') {
+ result = oldData;
+ } else if (deviceType == '医院') {
+ for (var key in oldData) {
+ // console.log(oldData[key]);
+ if (oldData[key].type == '0') {
+ result.push(oldData[key]);
+ }
+ }
+ } else if (deviceType == '学校') {
+ for (var key in oldData) {
+ // console.log(oldData[key]);
+ if (oldData[key].type == '1') {
+ result.push(oldData[key]);
+ }
+ }
+ } else if (deviceType == '小区') {
+ for (var key in oldData) {
+ // console.log(oldData[key]);
+ if (oldData[key].type == '2') {
+ result.push(oldData[key]);
+ }
+ }
+ }
+
+
+
that.clearLayer();//图标清除
that.entityData = [];
for (var i = 0; i < result.length; i++) {
@@ -923,7 +972,9 @@
that.heatmapfeatureLayer.setRenderer();
$('.analysis-category input').prop('checked', false);
};
+
that.flareClusterLayer(result);//图标渲染
+ that.Ydatas = result;
that.clusterLayer._setUserState('业主');//切换聚合图标点击事件
@@ -947,7 +998,9 @@
lgtd: result[i].jd,
lttd: result[i].wd,
id: result[i].id
- }, result[i].jd, result[i].wd, './images/owner.png');
+ }, result[i].jd, result[i].wd,
+ // './images/业主.png'
+ );
a = Number(i) + 1;
if (result[i].type === "0") {
@@ -1051,13 +1104,16 @@
that.clusterLayer._setUserState('设备');//切换聚合图标点击事件
}
+ that.Sdatas = result;
for (var a, i = 0; i < result.length; i++) {
that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', {
lgtd: result[i].jd,
lttd: result[i].wd,
id: result[i].id
- }, result[i].jd, result[i].wd, './images/ceshi.png');
+ }, result[i].jd, result[i].wd,
+ // './images/ceshi.png'
+ );
var stares = '';
a = Number(i) + 1;
@@ -1139,9 +1195,12 @@
checkBoxSelect: function (self) {//选择热力图
var that = this;
var heatmapRenderer = null;
+ // console.log(self);
// // return
// 选中
if ($(self).prop('checked') == true) {
+ that.clearLayer();//图标清除
+ // console.log($(self).attr('id'), 1);
// if (1) {
heatmapRenderer = new HeatmapRenderer({
colorStops: [
@@ -1163,6 +1222,56 @@
this.heatmapfeatureLayer.add(new esri.Graphic(point));
}
} else {
+ // console.log(self, 2);
+ if ($(self).attr('class') == 'p') {
+ that.entityData = [];
+ for (var i = 0; i < this.Pdatas.length; i++) {
+ this.Pdatas[i].x = Number(this.Pdatas[i].jd);
+ this.Pdatas[i].y = Number(this.Pdatas[i].wd);
+ that.entityData.push({
+ lgtd: Number(this.Pdatas[i].jd),
+ lttd: Number(this.Pdatas[i].wd)
+ })
+ }
+ if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
+ that.heatmapfeatureLayer.clear();
+ that.heatmapfeatureLayer.setRenderer();
+ // $('.analysis-category input').prop('checked', false);
+ };
+ that.flareClusterLayer(this.Pdatas);//图标渲染
+ } else if ($(self).attr('class') == 'Y') {
+ that.entityData = [];
+ for (var i = 0; i < this.Ydatas.length; i++) {
+ this.Ydatas[i].x = Number(this.Ydatas[i].jd);
+ this.Ydatas[i].y = Number(this.Ydatas[i].wd);
+ that.entityData.push({
+ lgtd: Number(this.Ydatas[i].jd),
+ lttd: Number(this.Ydatas[i].wd)
+ })
+ }
+ if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
+ that.heatmapfeatureLayer.clear();
+ that.heatmapfeatureLayer.setRenderer();
+ // $('.analysis-category input').prop('checked', false);
+ };
+ that.flareClusterLayer(this.Ydatas);//图标渲染
+ } else if ($(self).attr('class') == 'S') {
+ that.entityData = [];
+ for (var i = 0; i < this.Sdatas.length; i++) {
+ this.Sdatas[i].x = Number(this.Sdatas[i].jd);
+ this.Sdatas[i].y = Number(this.Sdatas[i].wd);
+ that.entityData.push({
+ lgtd: Number(this.Sdatas[i].jd),
+ lttd: Number(this.Sdatas[i].wd)
+ })
+ }
+ if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
+ that.heatmapfeatureLayer.clear();
+ that.heatmapfeatureLayer.setRenderer();
+ // $('.analysis-category input').prop('checked', false);
+ };
+ that.flareClusterLayer(this.Sdatas);//图标渲染
+ }
this.heatmapfeatureLayer.clear();
this.heatmapfeatureLayer.setRenderer();
}
@@ -1279,7 +1388,7 @@
});
//set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
- var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 15);
+ var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 1);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
diff --git a/public/map/widgets/supervisoryMap/template.html b/public/map/widgets/supervisoryMap/template.html
index d5866cc..374ba45 100644
--- a/public/map/widgets/supervisoryMap/template.html
+++ b/public/map/widgets/supervisoryMap/template.html
@@ -30,7 +30,7 @@
</div>
</li>
<li>
- <input type="checkbox" id='equipmentHeatMap'> 热力图
+ <input type="checkbox" class="S" id='equipmentHeatMap'> 热力图
</li>
</ul>
</div>
@@ -91,12 +91,13 @@
</div>
</li>
<li>
- <input type="checkbox" id='policeHeatMap'> 热力图
+ <input type="checkbox" class="p" id='policeHeatMap'> 热力图
</li>
</ul>
</div>
<div class='analysis-selection-criteria'>
- <input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text" id='analysis_select_time_end' readonly>
+ <input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text"
+ id='analysis_select_time_end' readonly>
<input type="button" value='查询' id='policeSelectTime'>
</div>
<div class='analysis-table-content'>
@@ -129,24 +130,24 @@
<li id='ownerCategory'>
类型：
<div>
- 全部
- <i>
-
- </i>
+ <i>全部</i>
+ <i>医院</i>
+ <i>学校</i>
+ <i>小区</i>
</div>
<div class='select-list'>
<ul>
-
+
</ul>
</div>
</li>
<li>
- <input type="checkbox" id='ownerHeatMap'> 热力图
+ <input type="checkbox" class="Y" id='ownerHeatMap'> 热力图
</li>
</ul>
</div>
- <div class="analysis-level">
+ <!-- <div class="analysis-level">
<ul>
<li id='ownerLevel'>
等级：
@@ -164,10 +165,10 @@
</div>
</li>
<li>
- <!-- 级别 -->
+ 级别
</li>
</ul>
- </div>
+ </div> -->
<div class='analysis-table-content'>
<div class="table">
diff --git a/src/api/dataL/axiosL.js b/src/api/dataL/axiosL.js
index 734e379..ff79c62 100644
--- a/src/api/dataL/axiosL.js
+++ b/src/api/dataL/axiosL.js
@@ -38,4 +38,14 @@
...dataImg
}
})
+}
+
+export const getVideo = (deviceCode) => {
+ return request({
+ url: 'https://web.byisf.com:18000/GetPlayUrl',
+ method: 'get',
+ params: {
+ ...deviceCode
+ }
+ })
}
\ No newline at end of file
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index c41299b..f63f9fd 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/src/views/clientManagement/clientManagement.vue
@@ -1025,6 +1025,7 @@
}
});
this.$store.state.tags.tagList = arr;
+ console.log(arr)
this.$router.push({
path: `/real/video/`, query: row
});
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index 2d5e981..e5d9191 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -2,26 +2,14 @@
<div id="Lour" style="height: 100%">
<div class="left" style="height: 101%">
<div class="top">
- <div class="top-l">
- <div class="left-top">
+ <div class="top-t">
+ <div class="t-t-title">
<p style="font-size: 24px; font-weight: 100">
- {{ name.length > 14 ? name.substr(0, 14) + "···" : name }}
+ {{ name }}
</p>
- <div class="l-t-state">
- <!-- dataState: ["掉线", "在线", "故障", "预警"],
- if (s != "") {
- states = "故障";
- } else {
- if (j != 1) {
- if (o == 1) {
- states = "在线";
- } else {
- states = "掉线";
- }
- } else {
- states = "预警";
- }
- }-->
+ </div>
+ <div class="t-t-title2">
+ <div class="t-t-state">
<span
:class="{
'l-t-s-grey': state == dataState[0],
@@ -30,20 +18,17 @@
'l-t-s-red': state == dataState[3],
'l-t-s-yuan': true,
}"
- ></span>
+ ></span
+ > 
<span>{{ state }}</span>
</div>
-
- <!-- <p>{{evaluate}}</p> -->
- </div>
- <div class="left-bot">
- <p>{{ machineCode }}</p>
- <!-- <p>{{smoke}}</p> -->
- <!-- <p>{{proportion}}</p> -->
+ <div class="t-t-time">
+ <p>{{ ReportTime }}</p>
+ </div>
</div>
</div>
- <div class="top-r">
- <p>{{ ReportTime }}</p>
+ <div class="top-b">
+ {{ machineCode }}
</div>
</div>
<div class="l-main">
@@ -294,9 +279,9 @@
<el-tab-pane label="设备详情" name="second">
<div class="l-main-3">
<div class="l-m-3-heard">
- <h2>
+ <!-- <h2>
{{ name.length > 16 ? name.substr(0, 16) + "···" : name }}
- </h2>
+ </h2> -->
<div>设备数据详情</div>
</div>
<el-divider content-position="left"
@@ -419,7 +404,7 @@
</el-form-item>
</el-col>
<el-col span="12">
- <el-form-item label="街道">
+ <el-form-item label="地址">
<el-input
disabled="true"
v-model="detailsData.street"
@@ -471,6 +456,26 @@
</el-row>
</el-form>
</el-row>
+ </div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="现场视频" name="third">
+ <div class="l-main-3">
+ <!-- <div class="l-m-3-heard">222</div> -->
+ <div class="l-m-3-heard">
+ <div>设备现场视频</div>
+ </div>
+ <!-- <el-divider content-position="left"></el-divider> -->
+ <el-divider content-position="left"
+ ><i class="el-icon-mobile-phone"></i
+ ></el-divider>
+ <div class="l-m-3-main">
+ <!-- {{ videoUrl }} -->
+ <div>
+ <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
+ <source id="source" :src="videoUrl" type="application/x-mpegURL"></source>
+ </video>
+ </div>
</div>
</div>
</el-tab-pane>
@@ -573,7 +578,13 @@
</template>
<script>
import { Loading } from "element-ui";
-import { getdataL, getGalarm, getnum, getImg } from "../../api/dataL/axiosL";
+import {
+ getdataL,
+ getGalarm,
+ getnum,
+ getImg,
+ getVideo,
+} from "../../api/dataL/axiosL";
import axios from "axios";
import echarts from "echarts";
import { Form } from "element-ui";
@@ -584,7 +595,7 @@
// timeL: "",
a: "",
myDeviceNumber: "",
-
+ videoUrl: "",
//折线图
myChart: "",
numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
@@ -608,6 +619,7 @@
activeName: "first",
// activeName: 'second',
+ // activeName: "third",
isRecord: true,
screens: false,
//复选框
@@ -953,6 +965,7 @@
getdata() {
// const url = `/api/blade-jfpts/equipment/equipment/pageDept?deviceName=${this.myDeviceNumber}¤t=1&size=10&pid=`
// axios.get(url)
+ var that = this;
var data = {
deviceName: this.myDeviceNumber,
current: "1",
@@ -965,7 +978,7 @@
var data = res.data.data.records[0];
var setimgl = null;
//插入图片api获取图片
- // this.stetDetails(data);
+ this.stetDetails(data);
getImg(imgdadta, "post").then((res) => {
// console.log(res.data.data.length != 0)
var imgdatas = [];
@@ -985,7 +998,41 @@
setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
this.stetDetails(data, setimgl);
});
- // console.log(data);
+ var videoData = {
+ deviceCode: that.a.serialNumber,
+ chl: that.a.channelNumber,
+ };
+ // console.log(videoData);
+ // getVideo(videoData).then((res) => {
+ // that.videoUrl = res
+
+ // console.log(res)
+
+ // });
+ var xhr2 = null, //视频请求
+ url =
+ "https://web.byisf.com:18000/GetPlayUrl?deviceCode=" +
+ videoData.deviceCode +
+ "&chl=" +
+ videoData.chl;
+ if (XMLHttpRequest) {
+ //http请求
+ xhr2 = new XMLHttpRequest();
+ } else {
+ xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
+ }
+ xhr2.open("get", url, true);
+ xhr2.send();
+ xhr2.onreadystatechange = function () {
+ if (xhr2.readyState === 4) {
+ if (xhr2.status === 200) {
+ // 判断isJson是否传进来了
+ var data2 = JSON.parse(xhr2.responseText); // JSON转js
+ that.videoUrl = data2.data.m3u8;
+ // console.log(videoUrl);
+ }
+ }
+ };
});
},
stetDetails(d, imgdata) {
@@ -1028,7 +1075,7 @@
// console.log(j, 1000);
// console.log(states, 1000);
- this.state = states;
+ this.state = states;
this.evaluate = "空气质量";
this.machineCode = "无数据" && this.a.deviceNumber;
@@ -1180,7 +1227,8 @@
// _iframe1.contentWindow.location.reload(true);
location.reload();
},
- handleCurrentChange(val) {//行点击事件
+ handleCurrentChange(val) {
+ //行点击事件
// console.log(val.i);
},
},
@@ -1249,79 +1297,131 @@
width: 98%;
height: 150px;
// border: 1px solid rgb(21, 18, 204);
- // display: flex;
- // align-items: center;
- // justify-content: space-between;
- .top-l {
- position: relative;
- top: 40px;
- width: 500px;
- // border: 1px solid rgb(24, 207, 48);
- div {
- display: flex;
- align-items: center;
- justify-content: space-around;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ font-family: PingFangSC-Regular;
+ .top-t,
+ .top-b {
+ width: 95%;
+ // padding-left: 50px;
+ }
+ .top-t {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ // border: 1px solid rgb(204, 161, 18);
+ .t-t-title {
font-size: 14px;
- // border: 1px solid rgb(24, 207, 48);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ // border: 1px solid rgb(18, 204, 80);
}
- .left-top {
- p {
- width: 356px;
- // border: 1px solid rgb(37, 37, 37);
- }
- padding-left: 15px;
- // border: 1px solid rgb(24, 207, 48);
- .l-t-state {
- // border: 1px solid rgb(24, 207, 48);
- position: relative;
- top: 5px;
- left: 10px;
- width: 55px;
+ .t-t-title2 {
+ position: relative;
+ top: 25px;
+ .t-t-state {
.l-t-s-yuan {
- display: block;
+ display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
border: 1px solid transparent;
}
.l-t-s-grey {
- background-color: #CDCDCD;
+ background-color: #cdcdcd;
}
.l-t-s-green {
- background-color: #32C1A2;
+ background-color: #32c1a2;
}
.l-t-s-yewllo {
- background-color: #F49966;
+ background-color: #f49966;
}
.l-t-s-red {
- background-color: #F35B5B;
+ background-color: #f35b5b;
}
}
}
}
- .left-bot,
- .top-r {
- font-size: 14px;
- font-weight: 400;
- color: #c4c4c4;
- // border: 1px solid rgb(24, 207, 48);
+ .top-b,
+ .t-t-time {
+ // width: 100%;
+ font-weight: 600;
+ color: rgba($color: #6b6b6b, $alpha: 0.5);
+ // border: 1px solid rgb(18, 204, 148);
}
- .left-bot {
- position: relative;
- left: -68px;
- p {
- width: 295px;
- // border: 1px solid rgb(37, 37, 37);
- }
- }
- .top-r {
- width: 250px;
- // border: 1px solid rgb(24, 207, 48);
- float: right;
- position: relative;
- top: -50px;
- }
- // border-bottom:1px solid #000;
+ // .top-l {
+ // position: relative;
+ // top: 40px;
+ // width: 500px;
+ // border: 1px solid rgb(24, 207, 48);
+ // div {
+ // display: flex;
+ // align-items: center;
+ // justify-content: space-around;
+ // font-size: 14px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // }
+ // .left-top {
+ // p {
+ // width: 356px;
+ // // border: 1px solid rgb(37, 37, 37);
+ // }
+ // padding-left: 15px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // .l-t-state {
+ // // border: 1px solid rgb(24, 207, 48);
+ // position: relative;
+ // top: 5px;
+ // left: 50px;
+ // width: 55px;
+ // .l-t-s-yuan {
+ // display: block;
+ // width: 10px;
+ // height: 10px;
+ // border-radius: 5px;
+ // border: 1px solid transparent;
+ // }
+ // .l-t-s-grey {
+ // background-color: #cdcdcd;
+ // }
+ // .l-t-s-green {
+ // background-color: #32c1a2;
+ // }
+ // .l-t-s-yewllo {
+ // background-color: #f49966;
+ // }
+ // .l-t-s-red {
+ // background-color: #f35b5b;
+ // }
+ // }
+ // }
+ // }
+ // .left-bot,
+ // .top-r {
+ // font-size: 14px;
+ // font-weight: 400;
+ // color: #c4c4c4;
+ // // border: 1px solid rgb(24, 207, 48);
+ // }
+ // .left-bot {
+ // position: relative;
+ // left: -68px;
+ // p {
+ // width: 295px;
+ // // border: 1px solid rgb(37, 37, 37);
+ // }
+ // }
+ // .top-r {
+ // width: 250px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // float: right;
+ // position: relative;
+ // top: -50px;
+ // }
+ // // border-bottom:1px solid #000;
}
.l-main {
width: 98%;
@@ -1497,7 +1597,7 @@
font-weight: normal;
font-size: 14px;
.r-b-top {
- height: 200px;
+ height: 380px;
display: flex;
// border: 1px solid rgb(23, 201, 62);
display: flex;
@@ -1540,13 +1640,13 @@
}
}
.r-b-map {
- height: 500px;
+ height: 350px;
// border: 1px solid rgba(109, 109, 109, 0.2);
#detailMap {
position: relative;
top: 25px;
width: 100%;
- height: 500px;
+ height: 350px;
}
}
}
diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index 88df297..aea8195 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -103,10 +103,9 @@
<div class="r-o-our">
<avue-crud
:option="options"
- :data="datas"
- :table-loading="loadings"
- :page="pages"
@on-load="onLoads"
+ :data="datas"
+ :page="pages"
@search-change="searchChanges"
@search-reset="searchResets"
@row-click="rowClicks"
@@ -120,7 +119,7 @@
</template>
<script>
-import { getAll, getListliu, getListliuc } from "@/api/client/client";
+import { getListliu, getListliuc } from "@/api/client/client";
import {
getList,
getDetail,
@@ -159,7 +158,7 @@
datasourceBox: false,
dialogVisible: false, //右侧弹窗
onceData: {}, //数据
- datas: "", //cc
+ datas: [], //cc
loadings: true, //等待
querys: {}, //搜索
pages: {
@@ -173,6 +172,7 @@
height: "auto",
indexLabel: "序号",
index: true,
+ card:true,
menu: false,
header: false,
searchShow: true,
@@ -207,7 +207,7 @@
{
label: "设备编号",
prop: "deviceNumber",
- width: 110,
+ width: 110,
},
{
label: "使用方",
@@ -762,7 +762,7 @@
return this.selectionList[0].tenantId;
},
},
- methods: {
+ methods: {
rowSave(row, done, loading) {
add(row).then(
() => {
@@ -1169,6 +1169,11 @@
});
}
}
+ // this.users.push([
+ // {
+
+ // }
+ // ])
this.options.column[2].dicData = this.users;
},
searchResets() {
@@ -1196,14 +1201,20 @@
onLoads(pages, params = {}) {
// this.$message.success("分页信息:" + JSON.stringify(pages));
// this.pages.total = 40;
+ console.log(1)
this.loadings = true;
+ console.log(2)
let values = {
...params,
};
+ console.log(3)
// getListliu(1, 10, {}, val.id).then((res) => {
- var useId = this.onceData.deptId;
+ var useId = this.onceData.deptId;
+ console.log(4)
getListliu(pages.currentPage, pages.pageSize, values, useId).then(
(res) => {
+ console.log(5)
+ console.log(pages.currentPage, pages.pageSize, values, useId,332332)
// console.log(this.datas);
// getListliu('1', '10', {}, '1353972967828533249').then((res) => {
//拿到数据
@@ -1219,6 +1230,7 @@
this.loadings = false;
}
);
+
},
},
mounted() {},
--
Gitblit v1.9.3