Merge branch 'feature/prequalification-options' into 'all'

feat: 预审模式增加白名单

See merge request skyeye/skyeye_frontend/skyeye-admin!181

src/api/datamanagement/getDevMode.ts

@@ -32,3 +32,33 @@ export const updateVideoLength = (len: number) => {
     },
   });
 };
+
+// 打开预审模式后
+export interface DirectPushIssueType {
+  id: number;
+  algoCode: string;
+  algoInfoId: number;
+  algoName: string;
+}
+// 查询当前直接推送问题类型
+export const getCurIssueTypeList = () => {
+  return http.request<DirectPushIssueType[]>({
+    url: '/issue/queryDirectPushIssueTypeList',
+    method: 'get',
+  });
+};
+
+export const addCurIssueTypeList = (data: { algoInfoIdList: number[] }) => {
+  return http.request({
+    url: '/issue/saveDirectPushIssueType',
+    method: 'post',
+    data,
+  });
+};
+
+export const deleteCurIssueTypeList = (val: number) => {
+  return http.request({
+    url: `/issue/deleteDirectPushIssueTypeById?id=${val}`,
+    method: 'post',
+  });
+};

src/views/datamanager/alertformdata/AlertformData.vue

@@ -1,47 +1,12 @@
 <template>
   <div class="container-box">
-    <!-- <div class="control-btn" v-if="hasPermisson()">
-      <div
-        class="btn"
-        :class="{ 'btn-active': activeName === 'default' }"
-        @click="activeName = 'default'"
-        >默认数据</div
-      >
-
-      <div class="btn" :class="{ 'btn-active': activeName === 'show' }" @click="activeName = 'show'"
-        >展示数据</div
-      >
-    </div>
-
-    <div
-      style="margin-bottom: 10px; display: flex"
-      v-if="hasDevModePermisson() && activeName === 'default'"
-    >
-      <div style="line-height: 33px">预审后生效模式：</div>
-      <el-switch :model-value="devMode" @change="switchDevMode" />
-    </div>
-
-    <Default class="content-box" v-if="activeName === 'default'" />
-    <Show class="content-box" v-else /> -->
     <component :is="com" />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import { getDevMode, switchDevMode as SDM } from '@/api/datamanagement/getDevMode';
-
-  const devMode = ref(true);
-  getDevMode().then((res) => {
-    devMode.value = res;
-  });
-
-  const switchDevMode = () => {
-    SDM();
-    devMode.value = !devMode.value;
-  };
-  import { useGlobSetting } from '@/hooks/setting';
   import { computed } from 'vue';
+  import { useGlobSetting } from '@/hooks/setting';
   import SimpleDefault from './components/default-simple/Default.vue';
   import AlertformDataComplex from './AlertformDataComplex.vue';
 
@@ -63,52 +28,4 @@
     background-color: rgba(255, 255, 255, 1);
     border-radius: 10px;
   }
-
-  .control-btn {
-    display: flex;
-    margin-bottom: 20px;
-
-    .btn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 188px;
-      height: 38px;
-      font-size: 14px;
-      font-weight: 400;
-      color: rgba(0, 0, 0, 0.88);
-      border: 1px solid #d9d9d9;
-      background: rgba(0, 0, 0, 0.02);
-      cursor: pointer;
-    }
-
-    :first-child {
-      border-radius: 8px 0px 0px 8px;
-    }
-
-    :last-child {
-      border-radius: 0px 8px 8px 0px;
-    }
-
-    .btn-active {
-      font-weight: 500;
-      color: #1890ff;
-      border: 1px solid #1890ff;
-      background-color: rgba(24, 144, 255, 0.15);
-    }
-  }
-
-  .content-box {
-    flex: 1;
-  }
-  .container-box {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    min-height: calc(100vh - 90px);
-    padding: 21px;
-    background-color: rgba(255, 255, 255, 1);
-    border-radius: 10px;
-  }
 </style>

src/views/datamanager/alertformdata/components/common/Prequalification.vue

@@ -1,61 +1,128 @@
 <template>
-  <div class="opt-container">
-    <div class="prequal-container" v-if="hasDevModePermisson()">
-      <div>预审后生效模式：</div>
-      <el-switch :model-value="devMode" @change="switchDevMode" />
+  <div class="main-container">
+    <div class="switch-container">
+      <div class="prequal-container" v-if="hasDevModePermisson()">
+        <div>预审后生效模式：</div>
+        <el-tooltip :disabled="devMode" effect="light" placement="bottom-start">
+          <template #content>
+            开启后，违规数据将不直接在前台展示<br />在下方问题管理列表中，操作生效后，推送到前台问题列表展示
+          </template>
+          <el-switch :model-value="devMode" @change="handelSwitchDevMode" />
+        </el-tooltip>
+      </div>
+      <div style="display: flex" v-if="hasDataDelete()">
+        <div>报警视频截取时长：</div>
+        <el-select
+          v-model="videoLength"
+          style="width: 80px; margin: 0 10px"
+          @change="updateNewVideoLength"
+        >
+          <el-option v-for="item in videoLengthOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+        <div>s</div>
+      </div>
     </div>
-    <div style="display: flex" v-if="hasDataDelete()">
-      <div>报警视频截取时长：</div>
-      <el-select
-        v-model="videoLength"
-        style="width: 80px; margin: 0 10px"
-        @change="updateNewVideoLength"
-      >
-        <el-option v-for="item in videoLengthOptions" :key="item" :label="item" :value="item" />
-      </el-select>
-      <div>s</div>
+    <div class="options-container" v-if="hasDevModePermisson() && devMode">
+      <div class="option-title">直接推送问题类型：</div>
+      <div class="option-tags" :class="expandAll ? 'hide-style' : ''" id="option-id">
+        <el-tag
+          class="option-tag"
+          v-for="item in tags"
+          :key="item.id"
+          type="info"
+          closable
+          @close="handleDeleteTag(item)"
+          >{{ item.algoName }}</el-tag
+        >
+        <el-tooltip effect="light" placement="top-start">
+          <template #content>
+            选择可直接推送到前台展示的违规问题类型<br />选择后检测到该类型问题发生时直接展示在前台问题列表
+          </template>
+          <span>
+            <el-popover placement="bottom" trigger="click" :width="265">
+              <template #reference>
+                <div class="add-options">+</div>
+              </template>
+              <el-select
+                v-model="optionValue"
+                multiple
+                collapse-tags
+                placeholder="请选择问题类型"
+                style="width: 240px"
+                :teleported="false"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+                <template #footer>
+                  <el-button type="primary" @click="handleAddTags"> 确定 </el-button>
+                </template>
+              </el-select>
+            </el-popover>
+          </span>
+        </el-tooltip>
+      </div>
+      <div class="option-expand" @click="expandAll = !expandAll" v-if="isExpandAllExist">
+        <div v-if="expandAll"
+          ><el-icon><ArrowDown /></el-icon>展开</div
+        >
+        <div v-if="!expandAll"
+          ><el-icon><ArrowUp /></el-icon>收起</div
+        >
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { nextTick, onMounted, ref, watch } from 'vue';
+  import {
+    ElMessage,
+    ElSwitch,
+    ElSelect,
+    ElOption,
+    ElTooltip,
+    ElTag,
+    ElPopover,
+    ElIcon,
+  } from 'element-plus';
+  import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+  import { useUserStore } from '@/store/modules/user';
   import {
     getDevMode,
-    switchDevMode as SDM,
+    switchDevMode,
     getVideoLength,
     updateVideoLength,
+    DirectPushIssueType,
+    getCurIssueTypeList,
+    addCurIssueTypeList,
+    deleteCurIssueTypeList,
   } from '@/api/datamanagement/getDevMode';
-  import { useUserStore } from '@/store/modules/user';
-  import { ElMessage } from 'element-plus';
+  import { AlgoItem, getAllAlgosApi } from '@/api/camera/camera-preview';
 
   const userStore = useUserStore();
-
-  const devMode = ref(true);
-  getDevMode().then((res) => {
-    devMode.value = res;
-  });
-
-  const switchDevMode = () => {
-    SDM();
-    devMode.value = !devMode.value;
-  };
-
   const hasDevModePermisson = () => {
     return userStore.checkPermission('control_activation');
   };
-
   const hasDataDelete = () => {
     return userStore.checkPermission('data_delete');
   };
 
+  const devMode = ref(true);
   const videoLength = ref(10);
   const videoLengthOptions = [10, 20, 40, 60];
+  const tags = ref<DirectPushIssueType[]>([]);
+  const isExpandAllExist = ref(false);
+  const expandAll = ref(false);
+  const options = ref<AlgoItem[]>([]);
+  const optionValue = ref<number[]>([]);
 
-  const getCurVideoLength = () => {
-    getVideoLength().then((res) => {
-      videoLength.value = res;
-    });
+  const handelSwitchDevMode = () => {
+    switchDevMode();
+    devMode.value = !devMode.value;
   };
 
   const updateNewVideoLength = () => {
@@ -67,21 +134,139 @@
     });
   };
 
+  const handleAddTags = async () => {
+    await addCurIssueTypeList({ algoInfoIdList: optionValue.value });
+    getCurOptions();
+  };
+
+  const handleDeleteTag = async (tag) => {
+    optionValue.value.splice(optionValue.value.indexOf(tag.algoInfoId), 1);
+    await deleteCurIssueTypeList(tag.id);
+    getCurOptions();
+  };
+
+  const getCurDevMode = () => {
+    getDevMode().then((res) => {
+      devMode.value = res;
+    });
+  };
+
+  const getCurVideoLength = () => {
+    getVideoLength().then((res) => {
+      videoLength.value = res;
+    });
+  };
+
+  const getCurOptions = async () => {
+    await getCurIssueTypeList().then((res) => {
+      tags.value = res;
+      res.forEach((item) => {
+        optionValue.value.push(item.algoInfoId);
+        optionValue.value = [...new Set(optionValue.value)];
+      });
+    });
+  };
+
+  const getAllOptions = () => {
+    getAllAlgosApi().then((res) => {
+      options.value = res;
+    });
+  };
+
+  watch(
+    () => tags.value,
+    () => {
+      nextTick(() => {
+        const objDivID = document.getElementById('option-id');
+        if (objDivID && objDivID.clientHeight > 35) {
+          isExpandAllExist.value = true;
+        } else {
+          isExpandAllExist.value = false;
+        }
+      });
+    },
+    { immediate: true },
+  );
+
   onMounted(() => {
+    getCurDevMode();
     getCurVideoLength();
+    getAllOptions();
+    getCurOptions();
   });
 </script>
 
-<style scoped>
-  .opt-container {
-    margin-bottom: 10px;
+<style scoped lang="less">
+  .main-container {
+    margin-bottom: 20px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .switch-container {
     display: flex;
     line-height: 33px;
-    text-wrap: nowrap;
+    margin-bottom: 10px;
+
+    .prequal-container {
+      display: flex;
+      margin-right: 30px;
+    }
+  }
+
+  .options-container {
+    display: flex;
+    margin-bottom: 10px;
+
+    .option-title {
+      width: 130px;
+      padding-top: 7px;
+    }
+
+    .option-tags {
+      height: 100%;
+      flex: 1;
+
+      .option-tag {
+        height: 28px;
+        border: none;
+        border-radius: 5px;
+        margin: 3px 5px 4px 0;
+      }
+    }
+
+    .hide-style {
+      height: 35px;
+      overflow: hidden;
+    }
+
+    .add-options {
+      width: 100px;
+      height: 28px;
+      border-radius: 5px;
+      background: rgba(0, 0, 0, 0.05);
+      color: rgba(0, 0, 0, 0.5);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.4s;
+    }
+
+    .add-options:hover {
+      background: rgba(0, 0, 0, 0.15);
+      transform: scale(1.05);
+    }
+
+    .option-expand {
+      padding-top: 7px;
+      color: #1890ff;
+      cursor: pointer;
+    }
   }
 
-  .prequal-container {
+  :deep(.el-select-dropdown__footer) {
     display: flex;
-    margin-right: 30px;
+    align-items: flex-end;
   }
 </style>