fix: 添加视频萤石云播放，解决部分问题项
This commit is contained in:
cjp
parent
26f91e1f7d
commit
6dcf01bb62
@ -9,7 +9,8 @@ NODE_ENV = 'development'
|
||||
# VITE_API_URL = "http://101.43.164.214:45022"
|
||||
VITE_API_URL = 'http://192.168.34.221:30002'
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
|
||||
# 百色七参数线上地址
|
||||
# VITE_API_URL = 'http://101.43.164.214:11113'
|
||||
|
||||
# 上传
|
||||
VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
|
||||
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
@ -26,6 +26,7 @@
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
"element-plus": "^2.2.30",
|
||||
"ezuikit-js": "^7.7.8",
|
||||
"js-base64": "^3.7.5",
|
||||
"js-md5": "^0.7.3",
|
||||
"mars3d": "^3.5.6",
|
||||
@ -7542,6 +7543,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ezuikit-js": {
|
||||
"version": "7.7.8",
|
||||
"resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-7.7.8.tgz",
|
||||
"integrity": "sha512-DfcPxUhLgchkQU5+0WllD3QghAJYG9mCybCCs0znLoSnMupup6WB1+wjrxPtpt49praQDuMrGoBVe0Mtl1z9/w=="
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@ -21521,6 +21527,11 @@
|
||||
"to-regex": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"ezuikit-js": {
|
||||
"version": "7.7.8",
|
||||
"resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-7.7.8.tgz",
|
||||
"integrity": "sha512-DfcPxUhLgchkQU5+0WllD3QghAJYG9mCybCCs0znLoSnMupup6WB1+wjrxPtpt49praQDuMrGoBVe0Mtl1z9/w=="
|
||||
},
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
"element-plus": "^2.2.30",
|
||||
"ezuikit-js": "^7.7.8",
|
||||
"js-base64": "^3.7.5",
|
||||
"js-md5": "^0.7.3",
|
||||
"mars3d": "^3.5.6",
|
||||
|
||||
@ -22,3 +22,8 @@ export const getProjectInspectRecordCount = (params: {}) => {
|
||||
export const getCountResponsibleUnit = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/countResponsibleUnit`, params);
|
||||
};
|
||||
|
||||
// 责任区域分析
|
||||
export const getCountHiddenDangerInspectRegion = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/countHiddenDangerInspectRegion`, params);
|
||||
};
|
||||
|
||||
38
src/components/ysyPlayAndPlayback.vue
Normal file
38
src/components/ysyPlayAndPlayback.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<!-- &begin=20200915&end=20200915 &-->
|
||||
<!-- autoplay=1 传这个默认一开始是查看历史回放 -->
|
||||
<iframe
|
||||
:src="'https://open.ys7.com/ezopen/h5/iframe_se?url=' + ysyParams.url + '&accessToken=' + ysyParams.token"
|
||||
width="100%"
|
||||
height="100%"
|
||||
id="ysOpenDevice"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
props: ["ysyParams"],
|
||||
mounted() {
|
||||
this.init2();
|
||||
},
|
||||
methods: {
|
||||
init2() {
|
||||
console.log("init2");
|
||||
/* 获取播放器元素 */
|
||||
var player = document.getElementById("ysOpenDevice").contentWindow;
|
||||
/* iframe 支持方法 */
|
||||
player.postMessage("play", "https://open.ys7.com/ezopen/h5/iframe"); /* 播放 */
|
||||
player.postMessage("stop", "https://open.ys7.com/ezopen/h5/iframe"); /* 结束 */
|
||||
player.postMessage("capturePicture", "https://open.ys7.com/ezopen/h5/iframe"); /* 截图 */
|
||||
player.postMessage("openSound", "https://open.ys7.com/ezopen/h5/iframe"); /* 开启声音 */
|
||||
player.postMessage("closeSound", "https://open.ys7.com/ezopen/h5/iframe"); /* 关闭声音 */
|
||||
player.postMessage("startSave", "https://open.ys7.com/ezopen/h5/iframe"); /* 开始录制 */
|
||||
player.postMessage("stopSave", "https://open.ys7.com/ezopen/h5/iframe"); /* 结束录制 */
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="项目信息">
|
||||
<div class="projectInfo">
|
||||
<!-- <div class="projectInfo">
|
||||
<div><span>项目名称：</span> {{ projectData.projectName || "" }}</div>
|
||||
<div :title="projectLocal"><span>项目地址：</span> {{ projectLocal }}</div>
|
||||
<div><span>项目经理：</span> {{ projectData.projectManage || "" }}</div>
|
||||
@ -10,6 +10,15 @@
|
||||
<div><span>开工日期：</span> {{ projectData.startWorkDate || "" }}</div>
|
||||
<div><span>项目编号：</span> {{ projectData.projectNumber || "" }}</div>
|
||||
<div><span>工程类别：</span> {{ projectData.projectType ? projectTypeEnum[projectData.projectType - 1].name : "" }}</div>
|
||||
</div> -->
|
||||
<div class="projectInfo">
|
||||
<div><span>建设地点：</span> 南平市建阳区</div>
|
||||
<div><span>变电容量：</span> 2x50兆伏安</div>
|
||||
<div><span>间隔名称：</span> 110千伏江坑问隔</div>
|
||||
<div><span>架空线路：</span> 67.49公里</div>
|
||||
<div><span>电缆长度：</span> 0.31公里</div>
|
||||
<div><span>通讯光缆：</span> 74.79公里</div>
|
||||
<div><span>总投资：</span> 11762万元</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
@ -63,11 +72,12 @@ watch(
|
||||
div {
|
||||
width: 95%;
|
||||
height: 12%;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
white-space: nowrap; //单行
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
span {
|
||||
margin-right: 3%;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
@ -451,7 +451,7 @@ function getTodayTrack(day) {
|
||||
currentData = res.result[0];
|
||||
for (let index = 0; index < res.result.length; index++) {
|
||||
const element = res.result[index];
|
||||
path.push([element.longitude, element.latitude]);
|
||||
path.unshift([element.longitude, element.latitude]);
|
||||
}
|
||||
trackMapInit(path, currentData);
|
||||
}
|
||||
@ -801,6 +801,7 @@ function selectChange(e) {
|
||||
|
||||
// 轨迹绘制地图
|
||||
function trackMapInit(path: any, item: any) {
|
||||
lineArr = path;
|
||||
// lineArr = [
|
||||
// [116.478935, 39.997761],
|
||||
// [116.478939, 39.997825],
|
||||
@ -859,56 +860,6 @@ function trackMapInit(path: any, item: any) {
|
||||
// 将 markers 添加到地图
|
||||
map.add([startMarker, endMarker]);
|
||||
|
||||
function createMarkerAndInfoWindow() {
|
||||
marker = new AMap.Marker({
|
||||
map: map,
|
||||
position: path[0],
|
||||
icon: "https://webapi.amap.com/images/car.png",
|
||||
offset: new AMap.Pixel(-26, -13),
|
||||
autoRotation: true,
|
||||
angle: -90
|
||||
});
|
||||
marker.on("click", markerClick);
|
||||
marker.emit("click", { target: marker });
|
||||
}
|
||||
|
||||
// 使用逆地理编码获取地址信息
|
||||
let address = "未知";
|
||||
AMap.plugin("AMap.Geocoder", function () {
|
||||
let geocoder = new AMap.Geocoder();
|
||||
|
||||
geocoder.getAddress(path[0], function (status, result) {
|
||||
if (status === "complete" && result.info === "OK") {
|
||||
address = result.regeocode.formattedAddress; // 获取中文地址名称
|
||||
console.log("位置", address);
|
||||
createMarkerAndInfoWindow();
|
||||
} else {
|
||||
console.log("获取地址信息失败");
|
||||
createMarkerAndInfoWindow();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
lineArr = path;
|
||||
|
||||
function markerClick(e) {
|
||||
let lnglat = e.target.getPosition();
|
||||
|
||||
//构建信息窗体中显示的内容
|
||||
console.log(e);
|
||||
let info = [];
|
||||
|
||||
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>");
|
||||
info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
|
||||
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
|
||||
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
||||
var infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(10, -30),
|
||||
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
||||
});
|
||||
infoWindow.open(map, e.target.getPosition());
|
||||
}
|
||||
|
||||
// 绘制轨迹
|
||||
let polyline = new AMap.Polyline({
|
||||
map: map,
|
||||
@ -929,11 +880,57 @@ function trackMapInit(path: any, item: any) {
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
|
||||
marker.on("moving", function (e) {
|
||||
console.log("播放",e)
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
function createMarkerAndInfoWindow() {
|
||||
marker = new AMap.Marker({
|
||||
map: map,
|
||||
position: path[0],
|
||||
icon: "https://webapi.amap.com/images/car.png",
|
||||
offset: new AMap.Pixel(-26, -13),
|
||||
autoRotation: true,
|
||||
angle: -90
|
||||
});
|
||||
marker.on("click", markerClick);
|
||||
marker.emit("click", { target: marker });
|
||||
marker.on("moving", function (e) {
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
});
|
||||
}
|
||||
|
||||
// 使用逆地理编码获取地址信息
|
||||
let address = "未知";
|
||||
AMap.plugin("AMap.Geocoder", function () {
|
||||
let geocoder = new AMap.Geocoder();
|
||||
|
||||
geocoder.getAddress(path[0], function (status, result) {
|
||||
if (status === "complete" && result.info === "OK") {
|
||||
address = result.regeocode.formattedAddress; // 获取中文地址名称
|
||||
console.log("位置", address);
|
||||
createMarkerAndInfoWindow();
|
||||
} else {
|
||||
console.log("获取地址信息失败");
|
||||
createMarkerAndInfoWindow();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function markerClick(e) {
|
||||
let lnglat = e.target.getPosition();
|
||||
|
||||
//构建信息窗体中显示的内容
|
||||
console.log(e);
|
||||
let info = [];
|
||||
|
||||
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>");
|
||||
info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
|
||||
info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
|
||||
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
||||
var infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(10, -30),
|
||||
content: info.join("") //使用默认信息窗体框样式，显示信息内容
|
||||
});
|
||||
infoWindow.open(map, e.target.getPosition());
|
||||
}
|
||||
|
||||
map.setFitView();
|
||||
}
|
||||
function startAnimation() {
|
||||
|
||||
@ -11,13 +11,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="decivList">
|
||||
<div class="menuDev" v-for="item in deciData" :class="item.isClosed == 0 ? 'online' : 'offline'">
|
||||
<div class="menuDev" v-for="item in deciData" :class="item.devOnline == 1 ? 'online' : 'offline'">
|
||||
<div class="decName">
|
||||
<span v-show="item.isClosed == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
|
||||
<span v-show="item.isClosed == 2"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
|
||||
<span v-show="item.devOnline == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
|
||||
<span v-show="item.devOnline == 0"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
|
||||
<span> {{ item.deviceName }}</span>
|
||||
</div>
|
||||
<div class="status">{{ item.isClosed == 1 ? "在线" : "离线" }}</div>
|
||||
<div class="status">{{ item.devOnline == 1 ? "在线" : "离线" }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="deciData.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
@ -46,7 +46,7 @@ const getList = async () => {
|
||||
onlineDevNum.value = 0;
|
||||
offlineDevNum.value = 0;
|
||||
deciData.value.forEach(element => {
|
||||
if (element.isClosed == 2) {
|
||||
if (element.devOnline == 0) {
|
||||
offlineDevNum.value++;
|
||||
} else {
|
||||
onlineDevNum.value++;
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
<div class="header">
|
||||
<!-- <div class="hearderIcon"><img src="@/assets/images/jxjLogo.png" alt="" /></div> -->
|
||||
<span class="projectTitle">
|
||||
<p>数字化项目监管平台</p>
|
||||
<!-- <p>数字化项目监管平台</p> -->
|
||||
<p>江坑110kv变电站智慧工地</p>
|
||||
</span>
|
||||
<div class="rightIcon" @click.stop>
|
||||
<div class="time">{{ nowTime }}</div>
|
||||
@ -478,7 +479,7 @@ function jumpBgd() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 42px;
|
||||
font-size: 44px;
|
||||
color: #fff;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ baseURL }}
|
||||
<!-- {{ baseURL }} -->
|
||||
<div class="select-right">
|
||||
<el-select v-model="devValue" class="m-2" placeholder="请选择" size="small" @change="selectChange">
|
||||
<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
@ -95,7 +95,7 @@
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
const baseURL = import.meta.env.VITE_API_URL as string;
|
||||
// const baseURL = import.meta.env.VITE_API_URL as string;
|
||||
let devValue = ref(1 as any);
|
||||
let noiseList = ref([
|
||||
{
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
<Card title="责任区域分析">
|
||||
<div class="centerBottom">
|
||||
<div id="echartsCenterBottom" style="width: 100%; height: 100%"></div>
|
||||
<div class="notoDta" v-if="noData">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -11,7 +15,9 @@ import Card from "@/components/card.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
|
||||
import { getCountHiddenDangerInspectRegion } from "@/api/modules/securityManagement";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let yData = ref([10, 20, 30, 10, 2, 6, 12] as any);
|
||||
let xData = ref(["责任区域1", "责任区域2", "责任区域3", "责任区域4", "责任区域5", "责任区域6", "责任区域7"] as any);
|
||||
|
||||
@ -101,6 +107,21 @@ function draw() {
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: 50, // 控制缩略轴默认展示的数据范围
|
||||
show: true, //显示滚动条
|
||||
height: 0,
|
||||
bottom: "8%",
|
||||
showDetail: false,
|
||||
moveHandleStyle: {
|
||||
color: "#4AC0F3"
|
||||
},
|
||||
backgroundColor: "#193C8D"
|
||||
}
|
||||
],
|
||||
// color: ["#e54035"],
|
||||
series: [
|
||||
{
|
||||
@ -158,8 +179,23 @@ function draw() {
|
||||
};
|
||||
echartsTest.setOption(option);
|
||||
}
|
||||
let noData = ref(false as any);
|
||||
// 责任区域分析
|
||||
const getDutyArea = async () => {
|
||||
const res: any = await getCountHiddenDangerInspectRegion({ projectSn: store.sn });
|
||||
console.log("责任区域分析", res);
|
||||
xData.value = res.result.data.map((item: any) => item.name);
|
||||
yData.value = res.result.data.map((item: any) => item.count);
|
||||
if (res.result.data.length > 0) {
|
||||
draw();
|
||||
} else {
|
||||
noData.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
draw();
|
||||
// draw();
|
||||
getDutyArea();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -167,5 +203,22 @@ onMounted(() => {
|
||||
.centerBottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.notoDta {
|
||||
top: 25%;
|
||||
width: 40%;
|
||||
left: 35%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,6 +32,11 @@
|
||||
<div class="select-right" @click="goToSafeHelmet" v-if="COMPANY === 'syhy'">
|
||||
<div class="safe-helmet">智能安全帽</div>
|
||||
</div>
|
||||
<!-- 萤石云播放 -->
|
||||
<div ref="playWndBox" style="width: 100%; height: 100%; margin: 0 5% 2% 5%" v-if="videoType === 1">
|
||||
<ysyPlayAndPlayback :ref="'ysy'" :ysyParams="ysyParams"></ysyPlayAndPlayback>
|
||||
</div>
|
||||
<!-- 播放海康 -->
|
||||
<div ref="playWndBox" style="width: 90%; height: 100%; margin: 0 5% 2% 5%">
|
||||
<div
|
||||
id="playWnd"
|
||||
@ -50,11 +55,16 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import ysyPlayAndPlayback from "@/components/ysyPlayAndPlayback.vue";
|
||||
|
||||
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { selectProjectVideoListApi, getSafeHatSessionApi } from "@/api/modules/video";
|
||||
import { COMPANY } from "@/config/config";
|
||||
let videoType = ref("") as any;
|
||||
let ysyParams = ref({} as any);
|
||||
|
||||
let shipinList = ref([] as any);
|
||||
const store = GlobalStore();
|
||||
const playWndBox = ref(null);
|
||||
@ -95,8 +105,11 @@ let objData = ref({
|
||||
|
||||
//设备列表的点击操作
|
||||
const checkVideo = async (item: any) => {
|
||||
ysyParams.value = item;
|
||||
cameraIndexCode.value = item.serialNumber;
|
||||
previewVideo(cameraIndexCode.value);
|
||||
if (videoType.value !== 1) {
|
||||
previewVideo(cameraIndexCode.value);
|
||||
}
|
||||
};
|
||||
// 定义个变量保存播放ID
|
||||
// let firstVideoId = ref("" as any);
|
||||
@ -117,6 +130,15 @@ const getVideoList = async () => {
|
||||
previewVideo(res.result.videoList[0].serialNumber);
|
||||
console.log(objData.value);
|
||||
console.log("视频列表", res);
|
||||
ysyParams.value = res.result.videoList[0];
|
||||
videoType.value = res.result.videoList[0].videoType;
|
||||
if (res.result.videoList[0].videoType === 1) {
|
||||
oWebControl.JS_HideWnd();
|
||||
// 销毁当前播放的视频
|
||||
oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
|
||||
// 断开与插件服务连接
|
||||
oWebControl.JS_Disconnect();
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
setTimeout(() => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user