公共组件参数歧义 增加遮罩

src/components/Table/src/components/TableActionIcons.vue

@@ -4,10 +4,10 @@
       <div v-for="item in props.actionIcons" :key="item.label" @click="handleClick(item)"
         :class="[item.disabled ? 'table__action--disabled' : 'table__action--enabled']">
         <el-tooltip :content="item.label" effect="light">
-          <el-icon v-if="props.style === 'icon'" :color="props.color" :size="props.size" >
+          <el-icon v-if="props.iconStyle === 'icon'" :color="props.color" :size="props.size" >
             <component :is="item.icon" />
           </el-icon>
-          <img v-if="props.style === 'img' && item.ifShow !== false" :src="item.icon" :style="{ width: `${props.size}px` }" />
+          <img v-if="props.iconStyle === 'img' && item.ifShow !== false" :src="item.icon" :style="{ width: `${props.size}px` }" />
         </el-tooltip>
       </div>
     </el-space>
@@ -21,7 +21,11 @@ const props = defineProps<{
   space: number;
   size: number;
   color: string;
-  style: 'img' | 'icon';
+  /**
+   * @description style有歧义，需要修改
+   */
+  // style: 'img' | 'icon';
+  iconStyle: 'img' | 'icon';
   actionIcons: ActionItem[];
   class?: string
 }>();

src/views/alarm-push/PushAlarm.vue

@@ -96,7 +96,7 @@
       return h(TableActionIcons as any, {
         space: 20,
         color: '#629bf9',
-        style: 'img',
+        iconStyle: 'img',
         size: 16,
         actionIcons: [
           {

src/views/cameras/nvrlist/NvrList.vue

@@ -136,7 +136,7 @@ const actionColumn: BasicColumn = reactive({
     return h(TableActionIcons as any, {
       space: 20,
       color: '#629bf9',
-      style: 'img',
+      iconStyle: 'img',
       size: 16,
       actionIcons: [
         {

src/views/cameras/overview/CamerasOverview.vue

@@ -241,18 +241,14 @@
       return h(TableActionIcons as any, {
         space: 20,
         color: '#629bf9',
-        style: 'img',
+        iconStyle: 'img',
         size: 16,
         actionIcons: [
           {
             label: '分享',
             icon: shareIcon,
             onClick: handleShare.bind(null, record.row),
-          },
-          {
-            label: '预览',
-            icon: previewIcon,
-            onClick: handlePreview.bind(null, record.row),
+            ifShow: false,
           },
           {
             label: '编辑',
@@ -260,6 +256,11 @@
             onClick: handleEdit.bind(null, record.row),
             auth: hasCameraEditPermission,
           },
+          {
+            label: '预览',
+            icon: previewIcon,
+            onClick: handlePreview.bind(null, record.row),
+          },
           {
             label: '删除',
             icon: deleteIcon,

src/views/cameras/overview/components/BatchEditCamera.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-card v-if="cardVisible">
+    <div class="overlay" v-if="cardVisible"></div>
+    <el-card v-if="cardVisible" class="pop-card">
       <template #header>
         <div class="flex justify-between items-center pop-head">
           <div style="font-size: 16px; font-weight: 600">批量修改</div>
@@ -49,9 +50,7 @@
           </div>
         </el-upload>
         <div style="margin-top: 72px; margin-left: 380px; display: flex">
-          <el-button type="primary" @click="handleImport" :disabled="isImportEnable"
-            >导入</el-button
-          >
+          <el-button type="primary" @click="handleImport" :disabled="isImportEnable">导入</el-button>
         </div>
       </div>
     </el-card>
@@ -147,15 +146,9 @@
       if (errDetail.value.length > 0) {
         errDetail.value.forEach((item, index) => {
           if (item.indexOf('【修改失败】') >= 0) {
-            errDetail.value[index] = item.replace(
-              '【修改失败】',
-              '<span style="color: #ff4d4f">【修改失败】</span>',
-            );
+            errDetail.value[index] = item.replace('【修改失败】', '<span style="color: #ff4d4f">【修改失败】</span>');
           } else if (item.indexOf('【修改成功】') >= 0) {
-            errDetail.value[index] = item.replace(
-              '【修改成功】',
-              '<span style="color: #52c41a">【修改成功】</span>',
-            );
+            errDetail.value[index] = item.replace('【修改成功】', '<span style="color: #52c41a">【修改成功】</span>');
           }
         });
       }
@@ -202,9 +195,21 @@
 </script>
 
 <style scoped>
-  .upload-content {
-    margin-left: 90px;
-    margin-top: 36px;
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
+  .pop-card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
   }
 
   :deep(.el-dialog) {

src/views/cameras/overview/components/BatchImportCamera.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-card v-if="cardVisible">
+    <div class="overlay" v-if="cardVisible"></div>
+    <el-card v-if="cardVisible" class="pop-card">
       <template #header>
         <div class="flex justify-between items-center pop-head">
           <div style="font-size: 16px; font-weight: 600">批量导入</div>
@@ -39,9 +40,7 @@
             <Document />
           </el-icon>
           <div class="el-upload__text">
-            <div style="font-size: 12px; color: red; margin-bottom: 5px"
-              >请下载模板并按要求填写后上传</div
-            >
+            <div style="font-size: 12px; color: red; margin-bottom: 5px">请下载模板并按要求填写后上传</div>
             <div style="font-size: 16px">点击或将文件拖拽到这里上传</div>
             <div style="font-size: 12px; color: rgba(0, 0, 0, 0.45); margin-top: 5px"
               >文件支持.xlsx .xls格式，仅支持上传一个文件</div
@@ -60,9 +59,7 @@
             >
           </el-tooltip>
           <el-button @click="handleDownloadTemplate">下载模板</el-button>
-          <el-button type="primary" @click="handleImport" :disabled="isImportEnable"
-            >导入</el-button
-          >
+          <el-button type="primary" @click="handleImport" :disabled="isImportEnable">导入</el-button>
         </div>
       </div>
     </el-card>
@@ -85,8 +82,7 @@
         <div class="header-text">添加提示</div>
       </template>
       <div class="sum-count">
-        成功上传 <span class="succ-sum">{{ sucCount }}</span> 条， 失败
-        <span class="err-sum">{{ errCount }}</span> 条
+        成功上传 <span class="succ-sum">{{ sucCount }}</span> 条， 失败 <span class="err-sum">{{ errCount }}</span> 条
       </div>
       <div class="err-info">
         <ul v-for="(item, index) in errDetail" :key="index">
@@ -133,11 +129,7 @@
         headers: getHeaders(),
         responseType: 'blob',
       };
-      const response = await axios.post(
-        urlPrefix + '/admin/cameraConfig/exportSceneCodeInfo',
-        null,
-        config,
-      );
+      const response = await axios.post(urlPrefix + '/admin/cameraConfig/exportSceneCodeInfo', null, config);
       const blob = new Blob([response.data], {
         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
       });
@@ -212,15 +204,9 @@
       if (errDetail.value.length > 0) {
         errDetail.value.forEach((item, index) => {
           if (item.indexOf('【添加失败】') >= 0) {
-            errDetail.value[index] = item.replace(
-              '【添加失败】',
-              '<span style="color: #ff4d4f">【添加失败】</span>',
-            );
+            errDetail.value[index] = item.replace('【添加失败】', '<span style="color: #ff4d4f">【添加失败】</span>');
           } else if (item.indexOf('【添加成功】') >= 0) {
-            errDetail.value[index] = item.replace(
-              '【添加成功】',
-              '<span style="color: #52c41a">【添加成功】</span>',
-            );
+            errDetail.value[index] = item.replace('【添加成功】', '<span style="color: #52c41a">【添加成功】</span>');
           }
         });
       }
@@ -267,6 +253,22 @@
 </script>
 
 <style scoped>
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
+  .pop-card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+  }
   .upload-content {
     margin-left: 90px;
     margin-top: 36px;

src/views/cameras/overview/components/CameraAddPopover.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="overlay" v-if="props.modelValue"></div>
   <el-card v-if="props.modelValue" class="pop-card">
     <template #header>
       <div class="flex justify-between items-center pop-head">
@@ -74,9 +75,21 @@
 </script>
 
 <style scoped lang="scss">
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
   .pop-card {
-    position: relative;
-    margin-left: 21px !important;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraEditNVRPopover.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="overlay" v-if="props.modelValue"></div>
   <el-card v-if="props.modelValue" class="pop-card">
     <template #header>
       <div class="flex justify-between items-center pop-head">
@@ -74,12 +75,21 @@
 </script>
 
 <style scoped lang="scss">
-  .pop-card {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
+  .overlay {
+    position: fixed;
     top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
+  .pop-card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraEditPopover.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="overlay" v-if="props.modelValue"></div>
   <el-card v-if="props.modelValue" class="pop-card">
     <template #header>
       <div class="flex justify-between items-center pop-head">
@@ -77,12 +78,21 @@
 </script>
 
 <style scoped lang="scss">
-  .pop-card {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
+  .overlay {
+    position: fixed;
     top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
+  .pop-card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraEditSRSPopover.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="overlay" v-if="props.modelValue"></div>
   <el-card v-if="props.modelValue" class="pop-card">
     <template #header>
       <div class="flex justify-between items-center pop-head">
@@ -71,9 +72,21 @@
 </script>
 
 <style scoped lang="scss">
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
   .pop-card {
-    position: relative;
-    margin-left: 21px !important;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraSharePopover.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="overlay" v-if="props.modelValue"></div>
   <el-card v-if="props.modelValue" class="pop-card">
     <template #header>
       <div class="flex justify-between items-center pop-head">
@@ -32,9 +33,21 @@
 </script>
 
 <style scoped lang="scss">
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
   .pop-card {
-    position: relative;
-    margin-left: 21px !important;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
   }
 
   .pop-head {

src/views/cameras/overview/components/CameraSharedEdit.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="overlay" v-if="props.modelValue"></div>
   <el-card v-if="props.modelValue" class="pop-card">
     <template #header>
       <div class="flex justify-between items-center pop-head">
@@ -43,10 +44,24 @@
   };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
   .pop-card {
-    position: relative;
-    margin-left: 21px !important;
+    position: fixed;
+    top: 50%;
+    left: 55%;
+    transform: translate(-50%, -50%);
+    width: calc(100% - 300px);
+    height: 622px;
+    z-index: 1000;
   }
 
   .pop-head {
@@ -85,14 +100,6 @@
     }
   }
 
-  .pop-content {
-    height: 480px;
-    display: flex;
-    justify-content: center;
-    padding: 35px;
-    overflow: auto;
-  }
-
   :deep(.el-card__header) {
     padding: 0;
   }

src/views/cameras/overview/components/SearchCamerasAction.vue

@@ -30,7 +30,7 @@
     space: number;
     size: number;
     color: string;
-    style: 'img' | 'icon';
+    iconStyle: 'img' | 'icon';
     actionIcons: ActionItem[];
   };
 

src/views/cameras/overview/components/ShareCameraDetail.vue

@@ -165,7 +165,7 @@
       return h(TableActionIcons as any, {
         space: 20,
         color: '#629bf9',
-        style: 'img',
+        iconStyle: 'img',
         size: 16,
         actionIcons: [
           {

src/views/cameras/overview/components/SharedTable.vue

@@ -134,7 +134,7 @@
       return h(TableActionIconsWords as any, {
         space: 20,
         color: '#629bf9',
-        style: 'img',
+        iconStyle: 'img',
         size: 16,
         actionIcons: [
           {

src/views/message/persongroup/UserGroup.vue

@@ -119,7 +119,7 @@
       return h(TableActionIcons as any, {
         space: 20,
         color: '#629bf9',
-        style: 'img',
+        iconStyle: 'img',
         size: 16,
         actionIcons: [
           {

src/views/message/reportmessage/components/Form.vue

@@ -69,7 +69,7 @@
       return h(TableActionIcons as any, {
         space: 20,
         color: '#629bf9',
-        style: 'img',
+        iconStyle: 'img',
         size: 16,
         actionIcons: [
           {

src/views/system-config/business-scene/PageBusinessScene.vue

@@ -110,7 +110,7 @@ const actionColumn: BasicColumn = reactive({
     render(record) {
         return h(TableActionIcons as any, {
             space: 20,
-            style: 'img',
+            iconStyle: 'img',
             size: 16,
             actionIcons: [
                 {