From 53184b0ce284a6784356e1d1a2b57d86f6a9d5c1 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 28 Apr 2021 17:39:02 +0800
Subject: [PATCH] 地图 和详情 视频和 top 热力图细节
---
src/router/views/index.js | 5
public/map/popup/html/FlareClusterLayer_v3 copy.html | 121 ++++++++++++++-----
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js | 11 +
src/views/dataL/dataL.vue | 128 ++++++++++++++------
public/map/widgets/supervisoryMap/SupervisoryMap.js | 53 ++++++--
src/views/clientManagement/clientManagement.vue | 6
src/views/system/cs.vue | 14 +-
7 files changed, 237 insertions(+), 101 deletions(-)
diff --git a/public/map/popup/html/FlareClusterLayer_v3 copy.html b/public/map/popup/html/FlareClusterLayer_v3 copy.html
index 879f236..b283b81 100644
--- a/public/map/popup/html/FlareClusterLayer_v3 copy.html
+++ b/public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -12,7 +12,10 @@
<!-- element ui -->
<link rel="stylesheet" href="../../lib/elementUi.css">
<script src="../../lib/elementUi.js"></script>
-
+ <!-- axios -->
+ <script src='../../lib/axios.js'></script>
+ <!-- 视频 -->
+ <script src='../../../realVideo/hls.js'></script>
<!-- layui -->
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
<style>
@@ -225,12 +228,8 @@
</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>
+ <video style="height: auto;width: 100%;" controls="controls" id="real_video_conversation" src="">
+ </video>
</el-tab-pane>
<!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
</el-tabs>
@@ -254,7 +253,7 @@
// names: '',
contacts: '',
deptname: '',//使用方
- aoud: '',//视频
+ ourd: '',//视频data
calls: '',
imgsl: [],
deploymentTime: '',
@@ -362,39 +361,91 @@
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)
-
- }
- }
- }
+ my.ourd = data.data;
+ my.deptname = my.ourd.deptName;
}
}
}
},
handleClick(tab, event) {//标签tab点击事件
// console.log(tab, event);
+ },
+ openRealVideoBox(serialNumber, channelNumber) {
+ var that = this;
+ var newAxios = axios.create({
+ baseURL: "https://web.byisf.com:18000",
+ withCredentials: false,
+ headers: {
+ "Content-type": "application/x-www-form-urlencoded",
+ },
+ });
+
+ //this.form.serialNumber
+ newAxios
+ .post(
+ "/api_control",
+ {},
+ {
+ params: {
+ param: JSON.stringify({ PktType: "GetAccessToken" }),
+ },
+ }
+ )
+ .then((res) => {
+ newAxios
+ .get(
+ `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.m3u8;
+ if (Hls.isSupported()) {
+ var dom = document.getElementById("real_video_conversation");
+ that.hls = new Hls();
+ var m3u8Url = decodeURIComponent(that.videoSource);
+ that.hls.loadSource(m3u8Url);
+ that.hls.attachMedia(dom);
+ that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ dom.play();
+ });
+ that.hls.on(Hls.Events.ERROR, function (event, data) {
+ console.log(data, 4566824159, "视频播放有问题！！！");
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ // try to recover network error
+ console.log(
+ "fatal network error encountered, try to recover"
+ );
+ that.hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.log(
+ "fatal media error encountered, try to recover"
+ );
+ that.hls.recoverMediaError();
+ break;
+ }
+ }
+ })
+ }
+ })
+ })
}
+ },
+ watch: {
+ activeName() {
+ if (this.activeName == "second") {
+ this.i++;
+ this.openRealVideoBox(this.ourd.serialNumber, this.ourd.channelNumber);
+ } else {
+ var dom = document.getElementById("real_video_conversation");
+ if (dom.getAttribute("src") != "") {
+ dom.pause();
+ dom.setAttribute("src", "");
+ this.hls.destroy();
+ }
+ }
+ },
},
mounted() {
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
@@ -404,7 +455,7 @@
this.getUser(this.ourData.id);
// console.log(this.ourData);
this.getdatas(this.ourData);
- },100);
+ }, 50);
}
diff --git a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
index cb8249e..b02b060 100644
--- a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
+++ b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -73,12 +73,15 @@
this.maxFlareCount = options.maxFlareCount || 8;
this.displaySingleFlaresAtCount = options.displaySingleFlaresAtCount || 8;
this.singleFlareTooltipProperty = options.singleFlareTooltipProperty || null;
- var defaultTextSymbol = new TextSymbol()
+ var defaultTextSymbol = new TextSymbol()//聚合字体
.setColor(new Color([255, 255, 255]))
.setAlign(Font.ALIGN_START)
- .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
+ .setFont(new Font("15pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
.setVerticalAlignment("middle");
defaultTextSymbol.font.size = 30;
+ defaultTextSymbol.yoffset=100;
+ // defaultTextSymbol.line.algin = 30;
+ console.log(defaultTextSymbol,2123445453)
this.textSymbol = options.textSymbol || defaultTextSymbol;
this.flareShowMode = options.flareShowMode || "mouse";
@@ -1539,7 +1542,7 @@
tooltipGroup.rawNode.setAttribute("class", "tooltip-text");
var textShapes = [];
- for (var i = 0, len = lines.length; i < len; i++) {
+ for (var i = 0, len = lines.length; i < len; i++) {//聚合字体
var textShape = tooltipGroup.createText({
x: xPos,
y: yPos + (i * 10),
@@ -1548,7 +1551,7 @@
})
.setFill("#000")
.setFont({
- size: 8,
+ size: 8,//聚合字体大小
family: this.textSymbol.font.family,
weight: this.textSymbol.font.weight
});
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.js b/public/map/widgets/supervisoryMap/SupervisoryMap.js
index 215c332..1627883 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.js
+++ b/public/map/widgets/supervisoryMap/SupervisoryMap.js
@@ -287,19 +287,19 @@
// 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'));
- }
+ } 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)
@@ -735,6 +735,33 @@
// console.log(this,text,'text()')
// console.log(that.tabIndex,'tabIndex')
+
+ //解决打开热力图 切换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'));
+ var time = setTimeout(() => {
+ // $('#equipmentHeatMap').click(function () {
+ // that.checkBoxSelect('#equipmentHeatMap');
+ // })();
+ $('#equipmentHeatMap').click();
+ }, 500);
+ }
+
+
$(this).parent().parent().prev().html(text + '<i></i>');
$(this).parent().parent().stop().slideUp(0);
diff --git a/src/router/views/index.js b/src/router/views/index.js
index c31473c..42a547c 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -352,6 +352,7 @@
},{//路由占位
path: '/dataL',
redirect: '/dataL/hFive',
+ component: Layout,
children: [{
path: 'hFive',
name: '提交激活路口',
@@ -365,6 +366,7 @@
{
path: '/patrolManagement',
redirect: '/policeInformationDistribution/patrolManagement',
+ component: Layout,
children: [{
path: 'patrolManagement',
name: '巡逻管理',
@@ -377,6 +379,7 @@
},{
path: '/policeInformationDistribution',
redirect: '/policeInformationDistribution/policeManagementTeam',
+ component: Layout,
children: [{
path: 'policeManagementTeam',
name: '处警队伍管理',
@@ -389,6 +392,7 @@
},{
path: '/report',
redirect: '/report/reportConfiguration',
+ component: Layout,
children: [{
path: 'reportConfiguration',
name: '报表配置',
@@ -401,6 +405,7 @@
},{
path: '/report',
redirect: '/report/announcementReport',
+ component: Layout,
children: [{
path: 'announcementReport',
name: '公告报表',
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index a9781f7..401712a 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/src/views/clientManagement/clientManagement.vue
@@ -1038,15 +1038,19 @@
});
}, handleStart(row) {
+
+ console.log(row,11111111111);
row = this.selectRow;
+ console.log(row,22222222222);
var arr = [];
+ console.log(this.$store.state.tags.tagList,3333333);
this.$store.state.tags.tagList.forEach(item => {
if (item.label != "视频") {
arr.push(item);
}
});
this.$store.state.tags.tagList = arr;
- console.log(arr)
+ console.log(arr,444444444444);
this.$router.push({
path: `/real/video/`, query: row
});
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index e5d9191..678dca0 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -18,8 +18,8 @@
'l-t-s-red': state == dataState[3],
'l-t-s-yuan': true,
}"
- ></span
- > 
+ ></span>
+  
<span>{{ state }}</span>
</div>
<div class="t-t-time">
@@ -472,10 +472,13 @@
<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>
+ <video
+ style="height: 550px; width: 100%"
+ controls="controls"
+ id="real_video_conversationDataL"
+ src=""
+ ></video>
+ </div>
</div>
</div>
</el-tab-pane>
@@ -586,6 +589,7 @@
getVideo,
} from "../../api/dataL/axiosL";
import axios from "axios";
+import Hls from "hls.js";
import echarts from "echarts";
import { Form } from "element-ui";
const cityOptions = ["未处理", "处理中", "已处理"];
@@ -998,41 +1002,6 @@
setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
this.stetDetails(data, setimgl);
});
- 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) {
@@ -1231,6 +1200,68 @@
//行点击事件
// console.log(val.i);
},
+ //获取视频
+ openRealVideoBox(serialNumber, channelNumber) {
+ var that = this;
+ var newAxios = axios.create({
+ baseURL: "https://web.byisf.com:18000",
+ withCredentials: false,
+ headers: {
+ "Content-type": "application/x-www-form-urlencoded",
+ },
+ });
+ newAxios
+ .post(
+ "/api_control",
+ {},
+ {
+ params: {
+ param: JSON.stringify({ PktType: "GetAccessToken" }),
+ },
+ }
+ )
+ .then((res) => {
+ newAxios
+ .get(
+ `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.m3u8;
+ if (Hls.isSupported()) {
+ var dom = document.getElementById(
+ "real_video_conversationDataL"
+ );
+ that.hls = new Hls();
+ var m3u8Url = decodeURIComponent(that.videoSource);
+ that.hls.loadSource(m3u8Url);
+ that.hls.attachMedia(dom);
+ that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ dom.play();
+ });
+ that.hls.on(Hls.Events.ERROR, function (event, data) {
+ console.log(data, 4566824159, "视频播放有问题！！！");
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ // try to recover network error
+ console.log(
+ "fatal network error encountered, try to recover"
+ );
+ that.hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.log(
+ "fatal media error encountered, try to recover"
+ );
+ that.hls.recoverMediaError();
+ break;
+ }
+ }
+ });
+ }
+ });
+ });
+ },
},
created() {
// let loadingInstance1 = Loading.service({ fullscreen: true });
@@ -1263,6 +1294,21 @@
}
};
},
+ watch: {
+ activeName() {
+ if (this.activeName == "third") {
+ this.i++;
+ this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber);
+ }else{
+ var dom = document.getElementById("real_video_conversationDataL");
+ if (dom.getAttribute("src") != "") {
+ dom.pause();
+ dom.setAttribute("src", "");
+ this.hls.destroy();
+ }
+ }
+ },
+ },
};
</script>
<style lang="scss" >
diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index aea8195..9682a16 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -1159,7 +1159,7 @@
},
getUser(dat) {
//建立使用方搜索关键词
- console.log(dat);
+ // console.log(dat);
if (dat.length > 0) {
this.users = [];
for (var key in dat) {
@@ -1201,20 +1201,20 @@
onLoads(pages, params = {}) {
// this.$message.success("分页信息:" + JSON.stringify(pages));
// this.pages.total = 40;
- console.log(1)
+ // console.log(1)
this.loadings = true;
- console.log(2)
+ // console.log(2)
let values = {
...params,
};
- console.log(3)
+ // console.log(3)
// getListliu(1, 10, {}, val.id).then((res) => {
var useId = this.onceData.deptId;
- console.log(4)
+ // 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(5)
+ // console.log(pages.currentPage, pages.pageSize, values, useId,332332)
// console.log(this.datas);
// getListliu('1', '10', {}, '1353972967828533249').then((res) => {
//拿到数据
--
Gitblit v1.9.3