integrated_traffic_vue/src/views/statistical_analysis/usage_situation/index.vue

<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="70px"
        @submit.prevent="fnGetDataTransfer"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="姓名" prop="KEYWORDS">
              <el-input
                v-model="searchForm.KEYWORDS"
                placeholder="请输入关键字"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="部门" prop="DEPTIDS">
              <layout-department
                v-model="searchForm.DEPTIDS"
                multiple
                show-checkbox
                collapse-tags
                root-disabled="Y"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="时间" prop="TIME">
              <el-date-picker
                v-model="searchForm.TIME"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="选择查询日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="登录情况" label-width="80px">
              <el-select v-model="searchForm.STATE">
                <el-option label="已登录" value="1" />
                <el-option label="未登录" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnGetDataTransfer">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <div class="mb-10" style="display: flex">
        <div>
          部门共有<span class="text-red"> {{ list.length }} </span>人，
        </div>
        <div>
          登录<span class="text-red"> {{ loginNum }} </span>人，
        </div>
        <div>
          登录率<span class="text-red"> {{ achieving }}% </span>。
        </div>
        <div>
          共有清单<span class="text-red"> {{ listNoCheckNum }} </span>张，
        </div>
        <div>
          已检查<span class="text-red"> {{ listCheckedNum }} </span>张，
        </div>
        <div>
          检查率<span class="text-red"> {{ checkTheRate }}% </span>。
        </div>
      </div>
      <layout-table :data="list" :show-pagination="false">
        <el-table-column label="序号" width="70">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="DEPARTMENTNAME_ALL" label="部门" />
        <el-table-column prop="POSTNAME" label="岗位" />
        <el-table-column prop="USERNAME" label="姓名" />
        <el-table-column prop="NOTEXAMINEDNUM" label="待排查清单数" />
        <el-table-column prop="INSPECTEDNUM" label="已排查清单数" />
        <el-table-column prop="PERCENT" label="排查率" />
        <el-table-column label="登录情况">
          <template #default="{ row }">
            {{ row.ISLOGIN > 0 ? "已登录" : "未登录" }}
          </template>
        </el-table-column>
      </layout-table>
    </layout-card>
  </div>
</template>

<script setup>
import LayoutDepartment from "@/components/department/index.vue";
import { serialNumber } from "@/assets/js/utils.js";
import useListData from "@/assets/js/useListData.js";
import { getUsageSituationList } from "@/request/statistical_analysis.js";
import { ref } from "vue";
import dayjs from "dayjs";

const loginNum = ref(0);
const achieving = ref(0);
const listNoCheckNum = ref(0);
const listCheckedNum = ref(0);
const checkTheRate = ref(0);
const { list, searchForm, pagination, fnGetData } = useListData(
  getUsageSituationList,
  {
    defaultSearchForm: {
      TIME: dayjs().format("YYYY-MM-DD"),
    },
    usePagination: false,
    callbackFn: (list, resData) => {
      achieving.value = resData.achieving;
      checkTheRate.value = resData.checkTheRate;
      listCheckedNum.value = resData.listCheckedNum;
      listNoCheckNum.value = resData.listNoCheckNum;
      loginNum.value = resData.loginNum;
    },
  }
);
const fnGetDataTransfer = () => {
  fnGetData({
    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
  });
};
</script>

<style scoped lang="scss"></style>