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

139 lines
4.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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