视频标签添加、地图修复

src/api/videoMonitor/index.ts

@@ -107,3 +107,29 @@ export function getLocationVideos(params: LocationVideosParams) {
     params: params
   });
 }
+// 新 地图打点
+export function getPointInfo2(data: PointParams) {
+  return request({
+    url: '/api/spatial_analysis/point/get_info',
+    method: 'post',
+    data: data
+  });
+}
+
+// 地图菜单
+export function getTagList(params) {
+  return request({
+    url: '/api/videoResource/tag/notNull/list',
+    method: 'get',
+    params: params
+  });
+}
+
+// 视频标签打点
+export function setVideoTag(data: PointParams) {
+  return request({
+    url: '/api/videoResource/tag/labeling_video_tag',
+    method: 'post',
+    data: data
+  });
+}

src/components/Dialog/index.vue

@@ -7,12 +7,14 @@
     :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }"
   >
     <div :class="type === 'xs' || headerType === 'header2' ? 'dialog-header2' : 'dialog-header'">
-      <div v-if="!hideTitle" class="dialog-title" :title="title ? title : '弹窗'">
-        {{ title ? title : '弹窗' }}
-      </div>
-      <div v-if="!!getTagId" class="tags">
-        <div v-for="(item, index) in tags" :key="index" class="tag">{{ item.dict_label }}</div>
-        <i :class="tags && tags.length > 0 ? 'collectFill' : 'collect'" @click="handleShowAddTag" />
+      <div class="header-left">
+        <div v-if="!hideTitle" class="dialog-title" :title="title ? title : '弹窗'">
+          {{ title ? title : '弹窗' }}
+        </div>
+        <div v-if="!!getTagId" class="tags">
+          <div v-for="(item, index) in tags" :key="index" class="tag">{{ item.dict_label }}</div>
+          <i :class="tags && tags.length > 0 ? 'collectFill' : 'collect'" @click="handleShowAddTag" />
+        </div>
       </div>
       <i class="decoration" />
       <i class="dialog-close" @click="closeDialog" />
@@ -32,7 +34,7 @@
     <i class="triangle3" />
     <i class="triangle4" />
   </div>
-  <VideoTagEdit v-if="showAddTag" v-model="showAddTag" :tags="tags" :id="getTagId" @updateVideoTag="getData(true)" />
+  <VideoTagEdit v-if="showAddTag" v-model="showAddTag" :tags="tags" :id="getTagId" @updateVideoTag="getData2" />
 </template>
 
 <script lang="ts" setup name="Dialog">
@@ -145,6 +147,10 @@ const getData = (needUpdate?: boolean) => {
     }
   });
 };
+const getData2 = () => {
+  getData(true);
+  showAddTag.value = false;
+};
 onMounted(() => {
   if (props.customShow) {
     zIndex.value = appStore.getZIndex();
@@ -176,6 +182,7 @@ onMounted(() => {
     position: relative;
     min-height: 50px;
     line-height: 28px;
+    padding-bottom: 15px;
     .dialog-title {
       width: 500px;
       color: transparent;
@@ -241,6 +248,29 @@ onMounted(() => {
     .dialog-title {
       width: auto;
     }
+    .header-left {
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 6px;
+        left: 0;
+        width: 47px;
+        height: 20px;
+        background: url('@/assets/images/line.png') no-repeat;
+        background-size: 100% 100%;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 15px;
+        left: 52px;
+        width: calc(100% - 47px);
+        height: 2px;
+        background-image: linear-gradient(to right, rgba(10, 154, 196, 1) 0%, rgba(10, 154, 196, 0) 100%);
+        background-size: 100% 100%;
+      }
+    }
     .tags {
       display: flex;
       align-items: center;
@@ -273,26 +303,6 @@ onMounted(() => {
         margin-left: 6px;
       }
     }
-    &::before {
-      content: '';
-      position: absolute;
-      bottom: 6px;
-      left: 0;
-      width: 47px;
-      height: 20px;
-      background: url('@/assets/images/line.png') no-repeat;
-      background-size: 100% 100%;
-    }
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 15px;
-      left: 52px;
-      width: calc(100% - 47px);
-      height: 2px;
-      background-image: linear-gradient(to right, rgba(10, 154, 196, 1) 0%, rgba(10, 154, 196, 0) 100%);
-      background-size: 100% 100%;
-    }
   }
   .el-form-item__label {
     font-size: 38px;
@@ -351,4 +361,8 @@ onMounted(() => {
 .common-btn-danger {
   margin-left: 20px;
 }
+.header-left {
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>

src/components/VideoTagEdit/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="show" title="视频标签" height="auto" draggable @close="handleClose" @confirm="handleAdd">
+  <Dialog v-model="show" title="视频标签" custom-show height="auto" draggable @close="handleClose" @confirm="handleAdd">
     <div class="title-box">
       <div class="title">当前标签</div>
     </div>
@@ -19,8 +19,8 @@
 </template>
 
 <script lang="ts" setup name="VideoTagEdit">
-import { addVideoTag } from '@/api/videoMonitor';
 import { getDicts } from '@/api/system/dict/data';
+import { setVideoTag } from '@/api/videoMonitor';
 
 interface Tag {
   dict_label: string;
@@ -34,6 +34,7 @@ interface Props {
 
 const props = defineProps<Props>();
 const emits = defineEmits(['update:modelValue', 'updateVideoTag']);
+const proxy = getCurrentInstance()?.proxy;
 let videoType = ref([]);
 const show = computed({
   get() {
@@ -68,10 +69,9 @@ const handleAdd = () => {
   selectTags.value.forEach((item) => {
     tagsId.push(item.value);
   });
-  addVideoTag({ video_code: props.id, dict_value: tagsId, dict_type: 'video_type' }).then(() => {
-    showSuccessMsg('新增成功');
+  setVideoTag({ video_code: props.id, dict_value_list: tagsId }).then(() => {
+    proxy.$modal.msgSuccess('新增成功');
     emits('updateVideoTag');
-    handleClose();
   });
 };
 

src/types/components.d.ts

@@ -24,16 +24,21 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -46,7 +51,6 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -61,14 +65,19 @@ declare module 'vue' {
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
@@ -84,8 +93,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/routineCommandMap/PositionMap.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="dialog">
-
-
-    <Dialog type="md" :title="!!id ? '修改灾害信息' : '请选择事发地点'" draggable height="780px" customShow @close="handleClose" @confirm="submit">
+    <Dialog type="md" :title="!!id ? '修改灾害信息' : '请选择事发地点'" draggable height="780px" custom-show @close="handleClose" @confirm="submit">
       <div class="custom-dialog">
         <el-form ref="queryFormRef" :model="form">
           <div class="form">
@@ -83,9 +81,16 @@
           </div>
         </el-form>
         <div ref="containerRef" class="map_box">
-          <div id="positionMap">
-            <div id="map" class="map" :style="{ width: width, height: height }"></div>
-          </div>
+          <div
+            id="map"
+            class="map"
+            :style="{
+              width: width,
+              height: height,
+              transform: 'scale(' + inverseScale.inverseScaleX + ', ' + inverseScale.inverseScaleY + ')',
+              transformOrigin: '0 0'
+            }"
+          />
         </div>
       </div>
     </Dialog>
@@ -118,6 +123,7 @@ const proxy = getCurrentInstance()?.proxy;
 const { mm_event_level } = toRefs(proxy?.useDict('mm_event_level'));
 const router = useRouter();
 const emits = defineEmits(['update:visible', 'confirm']);
+const containerScale = inject('containerScale');
 // 地图对象
 let map = null;
 let amap = {};
@@ -339,7 +345,13 @@ function handleClose() {
 }
 let queryFormRef = ref();
 let containerRef = ref();
+let inverseScale = ref({
+  inverseScaleX: 1,
+  inverseScaleY: 1
+});
 function handleResize() {
+  inverseScale.value.inverseScaleX = 1 / containerScale().scaleX;
+  inverseScale.value.inverseScaleY = 1 / containerScale().scaleY;
   const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 1920);
   const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 1080);
   width.value = containerWidth + 'px';