supervision-vue/src/views/sensitivePerception/PoliceNegative.vue

<template>
  <div class="container">
    <header>
      <el-form :label-width="114">
        <el-row>
          <el-col :span="6">
            <el-form-item label="统计时间">
              <date-time-range-picker-ext v-model="query.crtTime" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位分组">
              <el-select v-model="query.departGroupId" clearable>
                <el-option value="10" label="派出所"></el-option>
                <el-option value="11" label="交警大队"></el-option>
                <el-option value="13" label="刑侦大队"></el-option>
                <el-option value="14" label="禁毒大队"></el-option>
                <el-option value="15" label="治安大队"></el-option>
                <el-option value="16" label="人境大队"></el-option>
                <el-option value="12" label="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="query.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="警号">
              <el-input v-model="query.empNo" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属单位">
              <depart-tree-select v-model="query.departId" :check-strictly="false" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="mb-25 flex end">
        <div>
          <el-button type="primary" @click="getList">
            <template #icon>
              <icon name="el-icon-Search" />
            </template>
            查询
          </el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </header>
    <div class="table-container" v-loading="mainLoading">
      <el-table :data="list">
        <el-table-column label="姓名" prop="name" width="120" />
        <el-table-column label="性别" width="100" align="center">
          <template #default="{ row }">
            <span>{{ getGenderFromIdCode(row.idCode) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职务" align="center" width="160">
          <template #default="{ row }">
            <span v-if="row.position">{{ row.position }}</span>
            <span v-else>{{ getDictLable(dict.personType, row.personType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="警号" prop="empNo" width="160" />
        <el-table-column label="入职时间" prop="employmentDate" width="160" />
        <el-table-column label="所属单位" prop="departName">
          <template #default="{ row }">
            <span
              >{{
                row.parentDepartName ? row.parentDepartName + "/" : row.parentDepartName
              }}{{ row.departName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="查实问题数"
          prop="verifySize"
          width="120"
          align="center"
        />
        
        <el-table-column label="累计分值" align="center" width="160">
            <template #default="{ row }">
                <span>{{  Math.round(row.score)  }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleShowProfile(row)"
              >问题详情
            </el-button>
            <el-button type="primary" link @click="handleShowNotification(row)"
              >预警提醒
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex end mt-8">
      <el-pagination
        @size-change="getList"
        @current-change="getList"
        :page-sizes="[9, 18, 36]"
        v-model:page-size="query.size"
        v-model:current-page="query.current"
        layout="total, sizes, prev, pager, next"
        :total="total"
        v-if="list.length"
      >
      </el-pagination>
    </div>
  </div>

  <negativeInfo-police-dialog v-model="show" :id-code="activeRow.idCode" :active-row="activeRow" />

  <alarm-dialog
    v-model="showNotification"
    :departId="activeDepartId"
    @close="showNotification = false"
  />
</template>
<script lang="ts" setup>
import { listPoliceNegative } from "@/api/sensitivePerception/profilePolice";
import { getDictLable, getGenderFromIdCode } from "@/utils/util";
import moment from "moment";
import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts(["personType"]);
const showNotification = ref(false);
const activeDepartId = ref("");
const activeRow = ref<any>({});
const show = ref(false);
const query = ref({
  current: 1,
  size: 10,
  crtTime: [] as string[],
});
const list = ref<any[]>([]);
const total = ref(0);
const mainLoading = ref(false);

function getList() {
  mainLoading.value = true;
  listPoliceNegative(query.value).then((data) => {
    list.value = data.records;
    total.value = data.total;
    mainLoading.value = false;
  });
}

function reset() {
  query.value = {
    current: 1,
    size: 10,
    crtTime: [
      moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
      moment().format("YYYY-MM-DD HH:mm:ss"),
    ],
  };
  getList();
}

function handleShowNotification(row: any) {
  showNotification.value = true;
  activeDepartId.value = row.departId;
}

function handleShowProfile(row: any) {
  activeRow.value = row;
  show.value = true;
}

onMounted(getList);
</script>