SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：跟车病害调整，跟车视频调整

Browse Source
This commit is contained in:
SunTao 2024-12-03 15:24:58 +08:00
parent bfd8d39ecf
commit 7b745c6f4c
7 changed files with 159 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -48,6 +48,7 @@
"echarts-gl": "^2.0.9",
"element-ui": "2.15.14",
"file-saver": "2.0.5",
"flv.js": "^1.6.2",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"js-beautify": "1.13.0",

4
src/views/big-screen/disease-components/traffic-safety.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-21 09:59:32
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-21 09:05:48
* @LastEditTime: 2024-12-03 14:52:09
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
* @Description: 病害巡检大屏-今日巡查
-->
@ -635,7 +635,7 @@ export default {
align-items: center;
justify-content: center;
padding-left: 1.5rem;
font-size: 2rem;
font-size: 1.5rem;
// background-image: url("../../../assets/screen/traffic/traffic-left.png");
background-image: url("~@/assets/screen/disease/today-left.png");
background-repeat: no-repeat;

59
src/views/big-screen/overview-components/components/inspection-follow.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-15 13:14:03
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-03 13:10:46
* @LastEditTime: 2024-12-03 14:32:34
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
* @Description: 总览大屏-巡检车辆-跟车弹窗
-->
@ -32,6 +32,8 @@ export default {
return {
// 小车图层数据源
carLayerSource: null,
// 病害图层数据源
defectLayerSource: null,
};
},
created() {
@ -47,8 +49,7 @@ export default {
if (item.type === "carPosition") {
if (!this.carMapPointSource) {
this.drawCarMapPoint(item.data);
}
else {
} else {
// 获取当前位置和目标位置
const currentLocation = this.carMapPointSource
.getFeatures()[0]
@ -58,7 +59,7 @@ export default {
// 计算两点之间的差值
const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
// 设置计数器
let count = 0;
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
@ -90,7 +91,16 @@ export default {
}, 10);
}
} else if (item.type === "defect") {
console.log(item, "生成得病害");
if (!this.defectLayerSource) {
this.drawDefectMapPoint(item.data);
} else {
const feature = new Feature({
geometry: new Point(item.geometry.coordinates),
data: item,
type: "defectPoint",
});
this.defectLayerSource.addFeature(feature);
}
}
});
},
@ -135,6 +145,45 @@ export default {
map.addLayer(carMapPointLayer);
});
},
/**
* @description: 绘制病害地图点位
* @param {object} item
* @return {void}
*/
drawDefectMapPoint(item) {
const features = [];
const feature = new Feature({
geometry: new Point(item.geometry.coordinates),
data: item,
type: "defectPoint",
});
// 可以给点位设置样式
feature.setStyle([
new Style({
image: new Icon({
crossOrigin: "anonymous",
src: require(`@/assets/screen/index/${item.defecttype}.png`),
// 图标缩放比例
scale: 0.5,
}),
}),
]);
features.push(feature);
this.defectLayerSource = new VectorSource({
features,
});
const carMapPointLayer = new VectorLayer({
source: this.defectLayerSource,
properties: {
type: "defectPoint",
},
});
this.$nextTick(() => {
const map = this.$refs.carMap.instance.get("map");
map.addLayer(carMapPointLayer);
});
},
},
};
</script>

111
src/views/big-screen/overview-components/components/inspection-view.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-15 14:23:21
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-03 13:35:29
* @LastEditTime: 2024-12-03 14:14:14
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
* @Description: 总览大屏-巡检车辆-视频查看弹窗
-->
@ -10,18 +10,20 @@
<template>
<div class="view-content">
<video
id="mmiid"
class="video-js vjs-big-play-centered vjs-fluid"
id="videoElement"
crossOrigin="anonymous"
controls
preload="auto"
autoplay
muted
width="100%"
height="100%"
height="800px"
></video>
</div>
</template>
<script>
import { getVideoUrl } from "@/api/xj/screen/disease-screen";
import flvjs from "flv.js";
export default {
name: "InspectionView",
props: {
@ -34,6 +36,9 @@ export default {
return {
// 视频播放地址
vedioUrl: "",
isPlay: false,
player: null,
timerId: null,
};
},
created() {
@ -42,40 +47,76 @@ export default {
methods: {
/* 获取视频url地址 */
getVideo() {
// 获取视频流地址
getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, msg }) => {
if (code === 200) {
// 判断视频流地址是否存在
if (!data) {
this.$message.error('获取视频流失败');
return;
}
// 创建 flv.js 播放器
if (flvjs.isSupported()) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: "http://1011.hlsplay.aodianyun.com/demo/game.flv",
isLive: true,
hasAudio: true,
hasVideo: true
});
flvPlayer.attachMediaElement(document.querySelector("#mmiid"));
flvPlayer.load();
flvPlayer.play();
} else {
this.$message.error('当前浏览器不支持FLV播放');
}
this.$nextTick(() => {
this.createVideo(msg);
});
}
});
// getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
// if (code === 200) {
// console.log(data, "data");
// }
// });
},
createVideo(url) {
if (flvjs.isSupported()) {
const videoElement = document.getElementById("videoElement");
this.player = flvjs.createPlayer(
{
type: "flv",
isLive: true,
hasAudio: false,
url, // 自己的flv视频流
enableWorker: false, //启用 Web Worker 进程来加速视频的解码和处理过程
stashInitialSize: 32 * 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
stashInitialTime: 2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
lazyLoadMaxDuration: 2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
deferLoadAfterSourceOpen: false,
},
{
cors: true, // 是否跨域
// enableWorker: true, // 是否多线程工作
enableStashBuffer: false, // 是否启用缓存
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb
autoCleanupSourceBuffer: true, // 是否自动清理缓存
}
);
this.player.attachMediaElement(videoElement); //挂载元素
this.player.load(); //加载流
this.player.play(); //播放流
// 追帧
// if (this.timerId !== null) {
// clearInterval(this.timerId);
// }
// this.timerId = setInterval(() => {
// if (videoElement.buffered.length > 0) {
// const end = videoElement.buffered.end(0); // 视频结尾时间
// const current = videoElement.currentTime; // 视频当前时间
// const diff = end - current; // 相差时间
// // console.log(diff);
// const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
// const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
// const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
// let playbackRate = 1.0; // 播放速度
// if (diff > diffCritical) {
// // console.log("相差超过4秒，进行跳转");
// videoElement.currentTime = end - 1.5;
// playbackRate = Math.max(1, Math.min(diffCritical, 16));
// } else if (diff > diffSpeedUp) {
// // console.log("相差超过1秒，进行加速");
// playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
// }
// videoElement.playbackRate = playbackRate;
// if (videoElement.paused) {
// this.videoForm.player.play();
// }
// }
// }, 1000);
}
},
},
destroyed() {
clearInterval(this.timerId);
},
};
</script>

4
src/views/big-screen/overview-components/inspection-vehicles.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 09:40:18
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-03 13:19:02
* @LastEditTime: 2024-12-03 14:10:16
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
* @Description: 总览大屏-巡检车辆
-->
@ -132,7 +132,7 @@
<el-dialog
:title="viewTitle"
:visible.sync="showViewVisible"
width="60rem"
width="90rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close

4
src/views/big-screen/overview-components/today-inspection.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 09:42:49
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-20 16:27:24
* @LastEditTime: 2024-12-03 14:51:42
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
* @Description: 总览大屏-今日巡查
-->
@ -622,7 +622,7 @@ export default {
span {
cursor: pointer;
font-size: 2rem;
font-size: 1.5rem;
font-weight: 800;
font-family: "DouYu";
background: linear-gradient(

42
src/views/xj/inspection/confirmation-management/components/image-dialog.vue
View File

@ -2,8 +2,8 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-01 17:25:06
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-14 15:00:35
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\image-dialog.vue
* @LastEditTime: 2024-12-03 15:14:12
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\components\image-dialog.vue
* @Description: 病害确认-影像模式弹窗
-->
@ -139,10 +139,10 @@
</div>
</div>
<div class="footer">
<el-button type="success" size="mini" @click="changeDefect(1)"
<el-button type="success" size="mini" @click="changeDefect(2)"
>是病害(Y)</el-button
>
<el-button type="warning" size="mini" @click="changeDefect(0)"
<el-button type="warning" size="mini" @click="changeDefect(3)"
>不是病害(N)</el-button
>
</div>
@ -416,21 +416,23 @@ export default {
/* 是病害/不是病害点击事件 */
changeDefect(value) {
mergeDefect({
status: value,
snapShotIds: [this.defectData[this.currentIndex].snapshotId],
})
.then(({ code, msg }) => {
if (code === 200) {
this.showImage(this.currentIndex);
this.$modal.msgSuccess("修改成功");
} else {
this.$modal.msgWarning(msg);
}
if (this.defectData.length > 0) {
mergeDefect({
status: value,
snapShotIds: [this.defectData[this.currentIndex].snapshotId],
})
.finally(() => {
this.getList();
});
.then(({ code, msg }) => {
if (code === 200) {
this.showImage(this.currentIndex);
this.$modal.msgSuccess("修改成功");
} else {
this.$modal.msgWarning(msg);
}
})
.finally(() => {
this.getList();
});
}
},
/* 键盘事件 */
@ -457,10 +459,10 @@ export default {
}
} else if (event.keyCode === 89) {
// 确认病害
this.changeDefect(1);
this.changeDefect(2);
} else if (event.keyCode === 78) {
// 不是病害
this.changeDefect(0);
this.changeDefect(3);
}
},
},