|
@@ -9,41 +9,58 @@
|
|
|
<div class="map-tips">在地图中右键可以添加监控点</div>
|
|
|
<div class="map" id="map"></div>
|
|
|
<el-dialog v-model="showMarkerDialog" :title="markerInfo.pointName" width="400">
|
|
|
- <span v-if="taskInfo.list.length == 0">暂无已配置并检测的类型,请点击右下角的配置</span>
|
|
|
- <div v-else-if="taskInfo.videoType == 1">
|
|
|
- <span>正在检测:</span>
|
|
|
- <span v-for="el, index in taskInfo.list[0].taskAlgorithms" :key="el.algorithm_name">{{ index === 0 ? '' : ','
|
|
|
- }}{{ el.algorithm_name }}</span>
|
|
|
+ <template v-if="markerInfo.videoType == '1'">
|
|
|
+ <span v-if="!pointMedia[0].taskInfo">暂无已配置并检测的类型,请点击右下角的配置</span>
|
|
|
+ <div v-else>
|
|
|
+ <span>正在检测:</span>
|
|
|
+ <span v-for="el, index in pointMedia[0].taskInfo.taskAlgorithms" :key="el.algorithm_name">{{ index === 0 ? ''
|
|
|
+ : ','
|
|
|
+ }}{{ el.algorithm_name }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div v-else-if="markerInfo.videoType == '2'">
|
|
|
+ <div v-if="pointMedia.length==0">
|
|
|
+ 暂无离线视频,请上传
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div v-for="item in pointMedia" class="video-item">
|
|
|
+ {{item.fileName}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-else-if="taskInfo.videoType == 2"></div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button type="" link @click="editMarker">修改</el-button>
|
|
|
- <el-button type="" link @click="configClick">配置</el-button>
|
|
|
+ <el-button type="" v-if="markerInfo.videoType == '2'" link @click="uploadVideo">上传视频</el-button>
|
|
|
+ <el-button type="" v-else link @click="configClick">配置</el-button>
|
|
|
<el-button type="" link @click="deleteMarker">删除</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
- <el-dialog v-model="showConfigDialog" title="配置信息" width="800" :destroy-on-close="true">
|
|
|
- <el-tabs v-model="activTab.first" class="custom-tabs" @tab-click="tabClick">
|
|
|
+ <el-dialog v-model="showConfigDialog" title="配置信息" width="1000" :destroy-on-close="true">
|
|
|
+ <el-tabs v-model="activTab.first" class="custom-tabs" @tab-change="tabChange">
|
|
|
<el-tab-pane v-for="item in algorithmCategoryOptions" :key="item.value" :label="item.name" :name="item.value">
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :lg="6" :xs="24">
|
|
|
+ <el-col :lg="4" :xs="24">
|
|
|
<div class="algorithm-type">
|
|
|
- <div :class="{ 'algorithm-type-selected': el.id === activTab.second }" v-for="el in item.children" @click="activTab.second=el.id">{{
|
|
|
- el.algorithmName }}</div>
|
|
|
+ <div :class="{ 'algorithm-type-selected': el.id === activTab.second }" v-for="el in item.children"
|
|
|
+ @click="activTab.second = el.id">{{
|
|
|
+ el.algorithmName }}</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :lg="18" :xs="24" v-if="activTab.first === item.value">
|
|
|
- <JessibucaPlayer class="player" :videoUrl="`https://live.nodemedia.cn:8443/live/sony_4k_264.flv`"
|
|
|
- :show-paint="true" />
|
|
|
+ <el-col :lg="16" :xs="24" v-if="activTab.first === item.value">
|
|
|
+ <JessibucaPlayer class="player" :videoUrl="configMediaInfo.streamUrl" :show-paint="true" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="4" :xs="24">
|
|
|
+ <el-checkbox v-model="curCheckedEvent.ifCheck" label="检测此类型" size="large" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button type="primary" link @click="showConfigDialog = false">提交</el-button>
|
|
|
+ <el-button type="primary" @click="configSubmit">提交</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
@@ -64,7 +81,7 @@
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="视频类型" prop="videoType" :rules="[{ required: true, message: '视频类型不能为空' }]">
|
|
|
- <el-radio-group v-model="form.videoType">
|
|
|
+ <el-radio-group v-model="form.videoType" :disabled="dialog.title.includes('修改')">
|
|
|
<el-radio value="1">实时视频</el-radio>
|
|
|
<el-radio value="2">离线视频</el-radio>
|
|
|
</el-radio-group>
|
|
@@ -101,9 +118,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { getListByAreaTree, addMonitorPoint, updateMonitorPoint, delMonitorPoint } from '@/api/manage/monitorPoint/index'
|
|
|
-import { getTaskInfoByPointId } from '@/api/manage/monitorTask'
|
|
|
+import { getListByAreaTree, addMonitorPoint, updateMonitorPoint, delMonitorPoint } from '@/api/manage/monitorPoint'
|
|
|
+import { getTaskInfoByPointId, updateBatchByTaskId, addMonitorTaskAlgorithms } from '@/api/manage/monitorTask'
|
|
|
import { listAlgorithmConfig } from '@/api/manage/algorithmConfig'
|
|
|
+import { getPointMediaByPointId } from '@/api/manage/monitorPoint'
|
|
|
import api from '@/api/system/user';
|
|
|
import { getDicts } from '@/api/system/dict/data'
|
|
|
import monitorIcon from '@/assets/images/monitor.svg'
|
|
@@ -121,10 +139,7 @@ const dialog = reactive<DialogOption>({
|
|
|
});
|
|
|
const markerInfo = ref({
|
|
|
pointId: '',
|
|
|
- pointName: ''
|
|
|
-})
|
|
|
-const taskInfo = ref<any>({
|
|
|
- list: [],
|
|
|
+ pointName: '',
|
|
|
videoType: ''
|
|
|
})
|
|
|
const showMarkerDialog = ref(false)
|
|
@@ -147,6 +162,13 @@ const form = ref({
|
|
|
direction: '',
|
|
|
intersectionId: ''
|
|
|
});
|
|
|
+const pointMedia = ref([])
|
|
|
+const configMediaInfo = ref<any>({})
|
|
|
+const configTaskId = ref('')
|
|
|
+const curCheckedEvent = computed(() => {
|
|
|
+ const { children } = algorithmCategoryOptions.value.filter(item => item.value === activTab.first)[0]
|
|
|
+ return children.filter(item => item.id === activTab.second)[0]
|
|
|
+})
|
|
|
onMounted(() => {
|
|
|
var map = new BMapGL.Map("map"); // 创建地图实例
|
|
|
var point = new BMapGL.Point(118.879999, 32.016216); // 创建点坐标
|
|
@@ -194,7 +216,10 @@ const getAlTabs = async () => {
|
|
|
(rows || []).forEach(item => {
|
|
|
algorithmCategoryOptions.value.forEach(el => {
|
|
|
if (item.algorithmCategory === el.value) {
|
|
|
- el.children.push(item)
|
|
|
+ el.children.push({
|
|
|
+ ...item,
|
|
|
+ ifCheck: false
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
})
|
|
@@ -202,7 +227,10 @@ const getAlTabs = async () => {
|
|
|
activTab.first = algorithmCategoryOptions.value[0].value
|
|
|
activTab.second = algorithmCategoryOptions.value[0].children[0].id
|
|
|
}
|
|
|
-const tabClick = () => { }
|
|
|
+const tabChange = () => {
|
|
|
+ const { children } = algorithmCategoryOptions.value.filter(item => item.value === activTab.first)[0]
|
|
|
+ activTab.second = children[0].id
|
|
|
+}
|
|
|
/** 通过条件过滤节点 */
|
|
|
const filterNode = (value: string, data: any) => {
|
|
|
if (!value) return true;
|
|
@@ -245,25 +273,44 @@ const showMarks = () => {
|
|
|
let icon = new BMapGL.Icon(monitorIcon, new BMapGL.Size(40, 40))
|
|
|
var marker = new BMapGL.Marker(pt, { icon, myCustomProperty: '111' });
|
|
|
bdmap.value.addOverlay(marker);
|
|
|
- marker.addEventListener("click", () => {
|
|
|
+ marker.addEventListener("click", async () => {
|
|
|
markerInfo.value = item
|
|
|
- getTaskInfo(item.pointId)
|
|
|
+ await getMediaInfo(item.pointId)
|
|
|
showMarkerDialog.value = true
|
|
|
})
|
|
|
})
|
|
|
};
|
|
|
-const getTaskInfo = (pointId) => {
|
|
|
- getTaskInfoByPointId(pointId).then(({ code, data }) => {
|
|
|
+const getMediaInfo = async (pointId) => {
|
|
|
+ let taskList = []
|
|
|
+ await getTaskInfoByPointId(pointId).then(({ code, data }) => {
|
|
|
+ if (code === 200) {
|
|
|
+ taskList = data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ await getPointMediaByPointId({ pointId }).then(({ code, data }) => {
|
|
|
if (code === 200) {
|
|
|
- taskInfo.value = data
|
|
|
+ pointMedia.value = (data || []).map(item => ({
|
|
|
+ ...item,
|
|
|
+ taskInfo: null
|
|
|
+ }))
|
|
|
}
|
|
|
})
|
|
|
+ pointMedia.value.forEach(item => {
|
|
|
+ taskList.forEach(el => {
|
|
|
+ if (item.id === el.mediaId) {
|
|
|
+ item.taskInfo = el
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
const editMarker = () => {
|
|
|
showMarkerDialog.value = false
|
|
|
dialog.visible = true;
|
|
|
dialog.title = '修改监控点位';
|
|
|
Object.assign(form.value, markerInfo.value)
|
|
|
+ if (markerInfo.value.videoType ==='1') {
|
|
|
+ Object.assign(form.value,pointMedia.value[0])
|
|
|
+ }
|
|
|
}
|
|
|
const deleteMarker = async () => {
|
|
|
await proxy?.$modal.confirm('您确定要删除该监控点位?');
|
|
@@ -275,8 +322,66 @@ const deleteMarker = async () => {
|
|
|
}
|
|
|
const configClick = () => {
|
|
|
showMarkerDialog.value = false
|
|
|
+ configMediaInfo.value = pointMedia.value[0]
|
|
|
+ //先清空
|
|
|
+ algorithmCategoryOptions.value.forEach(item => {
|
|
|
+ item.children.forEach(el => {
|
|
|
+ el.ifCheck = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ configTaskId.value = ''
|
|
|
+ if (pointMedia.value[0].taskInfo) {
|
|
|
+ const { id, taskAlgorithms } = pointMedia.value[0].taskInfo
|
|
|
+ configTaskId.value = id
|
|
|
+ const checkedArr = taskAlgorithms.map(item => item.algorithm_id)
|
|
|
+ algorithmCategoryOptions.value.forEach(item => {
|
|
|
+ item.children.forEach(el => {
|
|
|
+ if (checkedArr.includes(el.id)) {
|
|
|
+ el.ifCheck = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
showConfigDialog.value = true
|
|
|
}
|
|
|
+const configSubmit = async () => {
|
|
|
+ const taskAlgorithms = []
|
|
|
+ algorithmCategoryOptions.value.forEach(item => {
|
|
|
+ item.children.forEach(el => {
|
|
|
+ if (el.ifCheck) {
|
|
|
+ taskAlgorithms.push(el)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ if (taskAlgorithms.length === 0) return proxy?.$modal.msgError("请勾选检测的类型");
|
|
|
+ if (configTaskId.value) {
|
|
|
+ await updateBatchByTaskId(taskAlgorithms.map(item => ({
|
|
|
+ taskId: configTaskId.value,
|
|
|
+ algorithmId: item.id,
|
|
|
+ configContent: "{}"
|
|
|
+ })))
|
|
|
+ } else {
|
|
|
+ addMonitorTaskAlgorithms(
|
|
|
+ {
|
|
|
+ mediaId: configMediaInfo.value.id,
|
|
|
+ pointId: markerInfo.value.pointId,
|
|
|
+ videoType: markerInfo.value.videoType,
|
|
|
+ progress: 0,
|
|
|
+ status: '2',
|
|
|
+ taskAlgorithms: taskAlgorithms.map(item => ({
|
|
|
+ taskId: configTaskId.value,
|
|
|
+ algorithmId: item.id,
|
|
|
+ configContent: "{}"
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ showConfigDialog.value = false
|
|
|
+ proxy?.$modal.msgSuccess("配置成功")
|
|
|
+}
|
|
|
+const uploadVideo = () => {
|
|
|
+
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -327,4 +432,10 @@ const configClick = () => {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+.video-item{
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #409EFF;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
</style>
|