sl-sfy-safety/src/views/cameras/overview/components/ConditionQuery.vue

<template>
  <div class="flex items-center query-head">
    <el-space alignment="center" :size="50">
      <div>
        <el-select v-model="queryType" placeholder="选择类型" class="type-select">
          <el-option v-for="item in queryTypeSelect" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input
          :style="{ width: '180px' }"
          v-model="queryTypeContent"
          clearable
          placeholder="请输入查找内容"
          :disabled="!Boolean(queryType)"
        />
      </div>
      <div>
        <span>添加方式：</span>
        <el-select v-model="querySourceType" placeholder="请选择添加方式" class="protocal-select">
          <el-option v-for="item in cameraAddType" :key="item.value" :label="item.label" :value="AddType[item.value]" />
        </el-select>
      </div>
      <div>
        <span>工位：</span>
        <el-cascader
          class="protocal-select"
          v-model="tempWorkSpaces"
          :options="workspaceInfo"
          :props="locationProp"
          clearable
          collapse-tags
          :show-all-levels="false"
          popper-class="special-cascader"
          placeholder="请选择工位"
          @change="handleCascaderChange"
        />
      </div>
      <div>
        <span>联网状态：</span>
        <el-select v-model="networkingState" placeholder="请选择添加方式" class="simple-select">
          <el-option :value="-1" label="全部" />
          <el-option :value="0" label="已联网" />
          <el-option :value="1" label="未联网" />
        </el-select>
      </div>
      <div>
        <span>进入平台：</span>
        <el-select v-model="integrationState" placeholder="请选择添加方式" class="simple-select">
          <el-option :value="-1" label="全部" />
          <el-option :value="0" label="是" />
          <el-option :value="1" label="否" />
        </el-select>
      </div>
      <div>
        <span>鹰眼追踪：</span>
        <el-select v-model="openEagle" placeholder="请选择添加方式" class="simple-select">
          <el-option :value="-1" label="全部" />
          <el-option :value="1" label="是" />
          <el-option :value="0" label="否" />
        </el-select>
      </div>
    </el-space>
    <div class="flex-1 flex justify-end">
      <el-button type="primary" @click="getCameraItems"> 查询 </el-button>
      <el-button @click="resetSearch"> 重置 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { queryTypeSelect, cameraAddType, AddType } from '@/types/camera/constant';
  import useCameraOverview from '../stores/useCameraOverview';
  import useTreeWorkspaceInfo from '../hooks/useTreeWorkspaceInfo';

  const treeWorkspaceInfo = useTreeWorkspaceInfo();
  const { workspaceInfo, getWorkspaceFromTreeInfo, getWorkspaceIdFromTreeNode } = treeWorkspaceInfo;

  const cameraOverview = useCameraOverview();
  const {
    queryType,
    queryTypeContent,
    querySourceType,
    queryWorkSpaces,
    integrationState,
    networkingState,
    openEagle,
  } = storeToRefs(cameraOverview);
  const { getCameraItems, reset } = cameraOverview;

  const tempWorkSpaces = ref([]);
  const locationProp = { multiple: true, expandTrigger: 'hover' as const }; // 级联选择器（打开多选）

  const handleCascaderChange = () => {
    const tempArr = [] as number[];
    queryWorkSpaces.value = [];
    if (tempWorkSpaces.value.length !== 0) {
      tempWorkSpaces.value.forEach((item) => {
        const workspaceId = getWorkspaceIdFromTreeNode(item[2]);
        tempArr.push(Number(workspaceId));
      });
      queryWorkSpaces.value = tempArr;
    }
  };

  // 重置查询条件
  const resetSearch = () => {
    tempWorkSpaces.value = [];
    queryType.value = '';
    queryTypeContent.value = '';
    querySourceType.value = '';
    queryWorkSpaces.value = [];
    integrationState.value = -1;
    networkingState.value = -1;
    openEagle.value = -1;
    reset();
    getCameraItems();
  };

  onMounted(() => {
    getWorkspaceFromTreeInfo();
  });
</script>

<style scoped>
  .type-select {
    width: 100px;
  }

  .protocal-select {
    width: 160px;
  }

  .simple-select {
    width: 80px;
  }

  .query-head {
    padding: 24px 57px 18px 21px;
  }
</style>