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-tree-select
          v-model="queryWorkSpace"
          :data="scenesTree"
          :render-after-expand="false"
          check-strictly
          placeholder="请选择场景"
          class="protocal-select"
        />
      </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 } from 'vue';
  import { queryTypeSelect, cameraAddType, AddType } from '../../../../types/camera/constant';
  import useCameraOverview from '../stores/useCameraOverview';
  import useSceneInfos from '@/hooks/useSceneInfos';
  import { storeToRefs } from 'pinia';

  const sceneInfos = useSceneInfos();
  const { scenesTree, getScenesTree } = sceneInfos;

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

  // 重置查询条件
  const resetSearch = () => {
    queryType.value = '';
    queryTypeContent.value = '';
    querySourceType.value = '';
    queryWorkSpace.value = '';
    integrationState.value = -1;
    networkingState.value = -1;
    openEagle.value = -1;
  };

  onMounted(() => {
    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name' });
  });
</script>

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

  .protocal-select {
    width: 160px;
  }

  .simple-select {
    width: 80px;
  }

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