mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

视频 等内容 提交

wangqin
Joe 1 year ago
parent
8d88218e7c
commit
bf838cc3d3
10 changed files with 516 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue
  2. 2
      ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
  3. 14
      ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
  4. 103
      ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
  5. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
  6. 39
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/EditEventInformationDialog/data.js
  7. 72
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/EditEventInformationDialog/index.vue
  8. 15
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/index.vue
  9. 315
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
  10. 116
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js

4
ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue
View File

@ -15,9 +15,6 @@
<div class="bottom" v-if="hasBtn">
<slot name="button">
<Button>
<template #prefix>
<img v-if="buttonIcon" :src="require(`@screen/${buttonIcon}`)" />
</template>
{{ buttonText }}
</Button>
</slot>
@ -148,6 +145,7 @@ export default {
.bottom {
display: flex;
justify-content: end;
gap: 9px;
}
.status {

2
ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
View File

@ -9,7 +9,7 @@
<div class="dialog-title">
<img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
<span>{{ title }}</span>
<img class="icon-close" @click="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
<img class="icon-close" @click.stop="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
</div>
<div class="dialog-content">

14
ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue
View File

@ -1,9 +1,10 @@
<template>
<video controls class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
<!-- <video controls :src='require("@/assets/Example/d1.mp4")' autoplay muted class="video-stream" v-bind="$attrs" -->
<video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
</template>
<script>
import { openVideoStream } from "./videoStream.js"
import { HttpLivePlayer } from "./videoStream.js"
export default {
name: 'Video',
@ -18,11 +19,14 @@ export default {
}
},
mounted() {
openVideoStream(this.$refs.videoContainerRef, { camId: this.camId, url: this.url })
},
const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url });
this.$once("hook:beforeDestroy", () => player.destroy())
}
}
</script>
<style lang='scss' scoped>
.video-stream {}
.video-stream {
background-color: #000;
}
</style>

103
ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
View File

@ -1,4 +1,4 @@
import mpegts from "mpegts.js";
import flvJs from "flv.js";
import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
/**
@ -18,9 +18,9 @@ export async function openVideoStream(container, { camId, url } = {}) {
if (!url) return;
console.log(mpegts.getFeatureList().mseLivePlayback);
// console.log(flvJs.getFeatureList().mseLivePlayback);
const player = mpegts.createPlayer({
const player = flvJs.createPlayer({
type: "flv",
url: url,
isLive: true,
@ -33,5 +33,102 @@ export async function openVideoStream(container, { camId, url } = {}) {
player.load();
player.play();
player.on(flvJs.Events.ERROR, (e) => {});
return player;
}
export class HttpLivePlayer {
/**
* @type { flvJs.Player }
*/
player;
/**
* @type { HTMLVideoElement }
*/
container;
url;
// 解码 帧
lastDecodedFrames;
constructor(container, options) {
this.container = container;
this.getUrl(options).then(() => {
this.initLiveVideo();
});
}
async getUrl({ camId, url } = {}) {
if (camId) {
const { code, data } = await getCameraStream(camId).catch(() => ({}));
if (code != 200) return;
url = data.liveUrl;
}
if (!url) return Promise.reject("获取 url 失败!");
return (this.url = url);
}
destroy() {
if (!this.player) return;
this.player.pause();
this.player.unload();
this.player.detachMediaElement();
this.player.destroy();
this.player = null;
}
initLiveVideo() {
this.destroy();
this.lastDecodedFrames = null;
this.player = flvJs.createPlayer(
{
type: "flv",
url: this.url,
isLive: true,
// hasVideo: true,
hasAudio: false,
},
{
autoCleanupSourceBuffer: true,
enableWorker: false, //不启用分离线程
enableStashBuffer: true, //关闭IO隐藏缓冲区
isLive: true,
lazyLoad: false,
}
);
this.player.on(flvJs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
console.log("errorType", errorType);
console.log("errorDetail", errorDetail);
console.log("errorInfo", errorInfo);
// 视频出错后销毁重建
this.destroy();
this.init();
});
// 视频断流
this.player.on(flvJs.Events.STATISTICS_INFO, function (res) {
if (this.lastDecodedFrames != res.decodedFrames) {
this.lastDecodedFrames = res.decodedFrames;
} else {
this.lastDecodedFrames = 0;
this.destroy();
this.init();
}
});
this.player.attachMediaElement(this.container);
}
}

2
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
View File

@ -42,7 +42,7 @@ export default {
data() {
return {
activeName: 'first',
deviceControlVisible: true,
deviceControlVisible: false,
data: {
deviceType: "行车诱导",
deviceStation: "k094+079",

39
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/EditEventInformationDialog/data.js
View File

@ -0,0 +1,39 @@
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
export const formConfigList = [
{
label: "事故类型:",
key: "key13",
type: "select",
},
PresetFormItems.trafficAccidentType,
PresetFormItems.callPolicePersonName,
PresetFormItems.callPolicePersonPhone,
PresetFormItems.route,
PresetFormItems.direction,
PresetFormItems.eventLevel,
PresetFormItems.station,
PresetFormItems.locationMode,
PresetFormItems.pressure,
PresetFormItems.eventHappenTime,
PresetFormItems.aEstimatedReleaseTime,
PresetFormItems.weatherConditions,
PresetFormItems.effect,
PresetFormItems.isMaintenanceAccident,
PresetFormItems.isCongestionAhead,
PresetFormItems.isCurveRoad,
PresetFormItems.isInTunnel,
PresetFormItems.isArrives,
PresetFormItems.isForkRoad,
PresetFormItems.emptyLine,
PresetFormItems.trafficPolicePhone,
{
...PresetFormItems.emptyLine,
key: "096993",
},
PresetFormItems.wreckerCalls,
PresetFormItems.spillName,
PresetFormItems.ownerPhone,
PresetFormItems.laneOccupancy,
PresetFormItems.vehicleCondition,
];

72
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/EditEventInformationDialog/index.vue
View File

@ -0,0 +1,72 @@
<template>
<Dialog v-model="modelVisible" title="修改事件信息">
<div class="EditEventInformationDialog">
<Form class="form" :formList="formConfigList" column="2" labelWidth="120px" />
<div class="footer">
<Button>保存</Button>
<Button style="background: #C9C9C9;">关闭</Button>
</div>
</div>
</Dialog>
</template>
<script>
import Dialog from "@screen/components/Dialog/index";
import Form from '@screen/components/FormConfig';
import Button from '@screen/components/Buttons/Button.vue';
import { formConfigList } from "./data.js"
export default {
name: 'EditEventInformationDialog',
components: {
Dialog,
Form,
Button
},
model: {
prop: 'visible',
event: 'close'
},
props: {
visible: Boolean
},
data() {
return {
formConfigList
}
},
computed: {
modelVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit('close', val)
}
},
}
}
</script>
<style lang='scss' scoped>
.EditEventInformationDialog {
gap: 9px;
width: 810px;
height: 771px;
display: flex;
flex-direction: column;
.form {
flex: 1;
overflow-y: auto;
}
.footer {
display: flex;
justify-content: end;
gap: 15px;
}
}
</style>

15
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/index.vue
View File

@ -26,7 +26,16 @@
</div>
<div class='body'>
<Card v-for="(item, index) in data" :cardData="item" :key="index" />
<Card v-for="(item, index) in data" :cardData="item" :key="index">
<template #button>
<Button>
修改
</Button>
<Button style="background-color: #FF5F5F;">
删除
</Button>
</template>
</Card>
</div>
</div>
</template>
@ -35,13 +44,15 @@
import Card from "@screen/components/Card1/index.vue"
import InputSearch from '@screen/components/InputSearch/index.vue';
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
import Button from '@screen/components/Buttons/Button.vue';
export default {
name: 'EmergencyAgencies',
components: {
Card,
ButtonGradient,
InputSearch
InputSearch,
Button
},
data() {
return {

315
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
View File

@ -341,13 +341,13 @@ export const isInTunnel = {
export const freeway = {
label: "高速公路:",
required: true,
key: "key213",
key: "roadId",
type: "select",
};
export const weatherConditions = {
label: "天气情况:",
key: "key01236",
key: "isCongestionAhead",
type: "RadioGroup",
isAlone: true,
required: true,
@ -355,29 +355,73 @@ export const weatherConditions = {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "雨雾",
key: "1-1",
label: "雨雾",
},
{
key: "雨雪",
key: "1-2",
label: "雨雪",
},
{
key: "中雨",
key: "1-3",
label: "中雨",
},
{
key: "小雨",
key: "1-4",
label: "小雨",
},
{
key: "大雨",
key: "1-5",
label: "大雨",
},
{
key: "暴雨",
key: "1-6",
label: "暴雨",
},
{
key: "2-1",
label: "小雪",
},
{
key: "2-2",
label: "中雪",
},
{
key: "2-3",
label: "大雪",
},
{
key: "2-4",
label: "暴雪",
},
{
key: "2-5",
label: "大暴雪",
},
{
key: "2-6",
label: "特大暴雪",
},
{
key: "3-1",
label: "轻雾",
},
{
key: "3-2",
label: "大雾",
},
{
key: "3-3",
label: "浓雾",
},
{
key: "3-4",
label: "强浓雾",
},
{
key: "3-5",
label: "团雾",
},
],
},
};
@ -397,15 +441,16 @@ export const additionalNotes = {
export const callPolicePersonName = {
label: "报警人姓名:",
key: "key1",
key: "reporterName",
options: {
placeholder: "请输入报警人姓名",
},
required: true,
};
export const callPolicePersonPhone = {
label: "报警人电话:",
key: "key2",
key: "reporterPhoneNumber",
options: {
placeholder: "请输入报警人电话(区号+号码)",
},
@ -414,30 +459,34 @@ export const callPolicePersonPhone = {
export const trafficAccidentType = {
label: "交通事故类型:",
key: "key3",
key: "accidentType",
type: "select",
required: true,
options: {
options: [
{
value: "选项1",
label: "黄金糕",
value: "1",
label: "侧翻",
},
{
value: "2",
label: "撞障碍物",
},
{
value: "选项2",
label: "双皮奶",
value: "3",
label: "货物洒落",
},
{
value: "选项3",
label: "蚵仔煎",
value: "4",
label: "撞护栏",
},
{
value: "选项4",
label: "龙须面",
value: "5",
label: "自燃",
},
{
value: "选项5",
label: "北京烤鸭",
value: "6",
label: "追尾",
},
],
},
@ -445,9 +494,17 @@ export const trafficAccidentType = {
export const locationMode = {
label: "地点方式:",
key: "key5",
key: "locationType",
required: true,
type: "select",
options: {
options: [
{ key: "1", label: "高速主线" },
{ key: "2", label: "服务区" },
{ key: "3", label: "立交桥" },
{ key: "4", label: "收费站" },
],
},
};
export const route = {
@ -477,17 +534,17 @@ export const pressure = {
export const isCongestionAhead = {
label: "前方是否拥堵:",
key: "key18",
key: "congestionAhead",
type: "RadioGroup",
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "是",
key: "0",
label: "是",
},
{
key: "否",
key: "1",
label: "否",
},
],
@ -496,35 +553,36 @@ export const isCongestionAhead = {
export const isForkRoad = {
label: "是否分岔口:",
key: "key19",
key: "atIntersection",
type: "RadioGroup",
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "是",
key: "0",
label: "是",
},
{
key: "否",
key: "1",
label: "否",
},
],
},
};
export const isCurveRoad = {
label: "是否处在弯道:",
key: "key20",
key: "minorInjuries",
type: "RadioGroup",
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "是",
key: "1",
label: "是",
},
{
key: "否",
key: "0",
label: "否",
},
],
@ -533,23 +591,32 @@ export const isCurveRoad = {
export const effect = {
label: "影响:",
key: "key13599",
key: "impactLevel",
type: "select",
options: {
options: [
{ key: "1", label: "无" },
{ key: "2", label: "危化品泄漏" },
{ key: "3", label: "整车自燃" },
{ key: "4", label: "车辆复燃" },
{ key: "5", label: "散装人工倒货" },
],
},
};
export const isArrives = {
label: "是否到货:",
key: "key14",
key: "isReverseCargo",
type: "RadioGroup",
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "是",
key: "1",
label: "是",
},
{
key: "否",
key: "0",
label: "否",
},
],
@ -558,17 +625,17 @@ export const isArrives = {
export const isMaintenanceAccident = {
label: "是否养护事故:",
key: "key15",
key: "isMaintenance",
type: "RadioGroup",
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "是",
key: "1",
label: "是",
},
{
key: "否",
key: "0",
label: "否",
},
],
@ -577,7 +644,7 @@ export const isMaintenanceAccident = {
export const trafficPolicePhone = {
label: "交警电话:",
key: "key16",
key: "policeContact",
};
export const wreckerCalls = {
@ -623,3 +690,173 @@ export const eventType = {
key: "事件类型",
type: "input",
};
export const constructionMeasurement = {
label: "施工措施:",
key: "constructionMeasurement",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "0",
label: "无",
},
{
key: "1",
label: "并道行驶",
},
{
key: "2",
label: "临时保通",
},
{
key: "3",
label: "借路侧服务区通行",
},
],
},
};
export const locationType = {
label: "地点类型:",
key: "locationType",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "单点",
},
{
key: "2",
label: "多点",
},
],
},
};
export const specialConstruction = {
label: "专项施工:",
key: "specialConstruction",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "专项工程施工",
},
{
key: "2",
label: "改扩建专项工程施工",
},
{
key: "3",
label: "桥梁专项工程施工",
},
{
key: "4",
label: "其他专项工程施工",
},
],
},
};
export const trafficCondition = {
label: "通行情况:",
key: "trafficCondition",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "通行正常",
},
{
key: "2",
label: "通行受阻",
},
],
},
};
export const disableFacility = {
label: "停用设施:",
key: "disableFacility",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "卫生间",
},
{
key: "2",
label: "餐厅",
},
{
key: "3",
label: "停车场",
},
{
key: "4",
label: "加油站",
},
{
key: "5",
label: "充电桩",
},
],
},
};
export const congestionCause = {
label: "拥堵原因:",
key: "congestionCause",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "车流量大",
},
{
key: "2",
label: "交通事故",
},
{
key: "3",
label: "交通管制",
},
{
key: "4",
label: "恶劣天气",
},
{
key: "5",
label: "集团所辖路段施工",
},
{
key: "6",
label: "其他",
},
],
},
};

116
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js
View File

@ -103,42 +103,7 @@ export const tabConfigList = [
],
},
},
{
label: "拥堵原因:",
key: "key012036",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "车流量大",
label: "车流量大",
},
{
key: "交通事故",
label: "交通事故",
},
{
key: "交通管制",
label: "交通管制",
},
{
key: "恶劣天气",
label: "恶劣天气",
},
{
key: "集团所辖路段施工",
label: "集团所辖路段施工",
},
{
key: "其他可选",
label: "其他可选",
},
],
},
},
PresetFormItems.congestionCause,
PresetFormItems.isInTunnel,
{
label: "拥堵里程:",
@ -641,26 +606,7 @@ export const tabConfigList = [
},
},
PresetFormItems.isInTunnel,
{
label: "地点类型:",
key: "key0138",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "单点",
label: "单点",
},
{
key: "多点",
label: "多点",
},
],
},
},
PresetFormItems.locationType,
PresetFormItems.freeway,
PresetFormItems.direction,
PresetFormItems.station,
@ -677,62 +623,8 @@ export const tabConfigList = [
showWordLimit: true,
},
},
{
label: "专项施工:",
key: "key01380",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "专项工程施工",
label: "专项工程施工",
},
{
key: "改扩建专项工程施工",
label: "改扩建专项工程施工",
},
{
key: "桥梁专项工程施工",
label: "桥梁专项工程施工",
},
{
key: "其他专项工程施工",
label: "其他专项工程施工",
},
],
},
},
{
label: "施工措施:",
key: "key013800",
type: "RadioGroup",
isAlone: true,
required: true,
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "无",
label: "无",
},
{
key: "并道行驶",
label: "并道行驶",
},
{
key: "临时保通",
label: "临时保通",
},
{
key: "借路侧服务区通行",
label: "借路侧服务区通行",
},
],
},
},
PresetFormItems.specialConstruction,
PresetFormItems.constructionMeasurement,
PresetFormItems.startTime,
PresetFormItems.expectedEndTime,
PresetFormItems.remark,

Write Preview
Loading…
Cancel
Save