视频监控增加分类搜索

src/types/auto-imports.d.ts

@@ -350,7 +350,6 @@ declare module 'vue' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly iconFeature: UnwrapRef<typeof import('~icons/fe/ature')['default']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
@@ -650,7 +649,6 @@ declare module '@vue/runtime-core' {
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly iconFeature: UnwrapRef<typeof import('~icons/fe/ature')['default']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -2,39 +2,28 @@
   <Dialog customShow type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
     <div class="search-box">
       <div class="box-left">
-        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="200px" label-position="left">
-          <!--          <el-form-item label="实景视频" prop="eventType">-->
-          <!--            <el-select-->
-          <!--              v-model="queryParams.realisticVideoType"-->
-          <!--              size="large"-->
-          <!--              class="custom-select"-->
-          <!--              popper-class="custom-select-popper"-->
-          <!--              :teleported="false"-->
-          <!--              placeholder="全部"-->
-          <!--            >-->
-          <!--              <el-option label="全部" value=""></el-option>-->
-          <!--              <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />-->
-          <!--            </el-select>-->
-          <!--          </el-form-item>-->
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="180px" label-position="left">
           <el-form-item prop="name">
             <el-input v-model="queryParams.name" class="custom-input2" placeholder="请输入摄像头名称" size="large" style="width: 500px" />
           </el-form-item>
+          <el-form-item label="实景视频" prop="dict_value">
+            <el-select
+              v-model="queryParams.dict_value"
+              class="custom-select"
+              popper-class="custom-select-popper"
+              :teleported="false"
+              placeholder="全部"
+              @change="handleQuery"
+              style="width: 450px"
+            >
+              <el-option label="全部" value="" />
+              <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <div class="common-btn-primary" @click="handleQuery">搜索</div>
             <div class="common-btn" @click="resetQuery">重置</div>
           </el-form-item>
-          <span>实景视频：</span>
-          <el-select
-            v-model="active"
-            placeholder="请选择"
-            class="custom-select"
-            popper-class="custom-select-popper"
-            :teleported="false"
-            style="width: 640px"
-            @change="initData"
-          >
-            <el-option v-for="item in videoList" :key="item.name" :label="item.name" :value="item.value" />
-          </el-select>
         </el-form>
       </div>
       <div v-show="!editVideo" class="common-btn-primary2 edit-icon" style="margin-top: -20px" @click="activeEdit">编辑首页视频</div>
@@ -78,6 +67,7 @@
         layout="total, prev, pager, next"
         @pagination="getList"
       />
+      <div v-if="total === 0" style="width: 100%; text-align: center; font-size: 38px; font-weight: bold">暂无数据</div>
     </div>
     <div id="container" style="display: none"></div>
   </Dialog>
@@ -105,27 +95,16 @@ const props = defineProps({
 });
 const emits = defineEmits(['update:modelValue']);
 const proxy = getCurrentInstance()?.proxy;
-const { realistic_video } = toRefs<any>(proxy?.useDict('realistic_video'));
+const { video_type } = toRefs<any>(proxy?.useDict('video_type'));
 
 //查看更多数据
 const queryFormRef = ref();
 const queryParams = reactive({
   current: 1,
   size: 8,
-  realisticVideoType: '',
+  dict_value: '',
   name: ''
 });
-const active = ref('0');
-const videoList = ref([
-  { name: '全量视频', value: '0' },
-  { name: '江河湖库视频', value: '1' },
-  { name: '林火视频', value: '2' },
-  { name: '高速公路视频', value: '3' },
-  { name: '汛期视频', value: '4' },
-  { name: '雨情视频', value: '5' },
-  { name: '台风视频', value: '6' },
-  { name: '交通局视频', value: '7' }
-]);
 let total = ref(0);
 let editVideo = ref(false);
 // 选中的视频
@@ -156,10 +135,12 @@ const getList = async () => {
     current: queryParams.current,
     size: queryParams.size,
     query: {
-      name: queryParams.name,
-      realisticVideoType: queryParams.realisticVideoType
+      name: queryParams.name
     }
   };
+  if (!!queryParams.dict_value) {
+    newParams.query.dict_value = queryParams.dict_value;
+  }
   getEmergencyVideoCata(newParams).then((res) => {
     selectData.value.forEach((item) => {
       for (let i = 0; i < res.rows.length; i++) {
@@ -191,7 +172,7 @@ const deleteItem = (index) => {
 /** 表单重置 */
 const reset = () => {
   queryParams.current = 1;
-  queryParams.realisticVideoType = '';
+  queryParams.dict_value = '';
   queryParams.name = '';
   emits('update:modelValue', false);
 };
@@ -253,7 +234,7 @@ getList();
     background-size: 100% 100%;
     padding: 14.5px 16px;
     position: relative;
-    margin-bottom: 40px;
+    margin-bottom: 25px;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -431,4 +412,11 @@ getList();
     min-height: 150px;
   }
 }
+.box-left {
+  :deep(.el-form) {
+    .el-form-item--default {
+      margin-bottom: 20px !important;
+    }
+  }
+}
 </style>