sl-sfy-safety/src/views/datamanager/alertformdata/components/common/Prequalification.vue

<template>
  <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 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 { 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,
    getVideoLength,
    updateVideoLength,
    DirectPushIssueType,
    getCurIssueTypeList,
    addCurIssueTypeList,
    deleteCurIssueTypeList,
  } from '@/api/datamanagement/getDevMode';
  import { AlgoItem, getAllAlgosApi } from '@/api/camera/camera-preview';

  const userStore = useUserStore();
  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 handelSwitchDevMode = () => {
    switchDevMode();
    devMode.value = !devMode.value;
  };

  const updateNewVideoLength = () => {
    updateVideoLength(videoLength.value).then(() => {
      ElMessage({
        message: '报警视频截取长度设置成功',
        type: 'success',
      });
    });
  };

  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 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;
    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;
    }
  }

  :deep(.el-select-dropdown__footer) {
    display: flex;
    align-items: flex-end;
  }
</style>