完善4、5级网格员考核细则功能

This commit is contained in:
TS-QD1 2023-05-11 22:02:41 +08:00
parent 57082e1d7b
commit 5015999a2a
5 changed files with 328 additions and 226 deletions

View File

@ -1,48 +1,14 @@
<template>
<n-message-provider>
<n-dialog-provider>
<n-layout>
<n-layout-header bordered>
<n-space align="center" style="padding: 10px">
<span>工作考核细则</span>
<n-button ghost @click="onWgyClick">街道社区4-5级网格</n-button>
<n-button ghost @click="onDdyClick">区级与街道指挥调度中心调度专管员</n-button>
<n-button ghost @click="onZfGAClick">执法局公安分局</n-button>
<n-button ghost @click="onWgy3Click">3 级网格长</n-button>
<n-button ghost @click="onZnbmClick">其他职能部门</n-button>
</n-space>
</n-layout-header>
<n-layout-content>
<router-view></router-view>
</n-layout-content>
</n-layout>
<Index/>
</n-dialog-provider>
</n-message-provider>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NMessageProvider, NDialogProvider, NLayout, NLayoutHeader, NLayoutContent, NSpace, NButton} from 'naive-ui';
const router = useRouter();
const route = useRoute();
const onWgyClick = () => {
router.push({ name: 'wgy' });
}
const onDdyClick = () => {
router.push({ name: 'ddy' });
}
const onZfGAClick = () => {
router.push({ name: 'zfga' });
}
const onWgy3Click = () => {
router.push({ name: 'wgy3' });
}
const onZnbmClick = () => {
router.push({ name: 'znbm' });
}
import { NMessageProvider, NDialogProvider} from 'naive-ui';
import Index from './components/Index.vue'
</script>
<style scoped></style>

149
src/components/Index.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<n-layout>
<n-layout-header bordered>
<n-space align="center" style="padding: 10px">
<n-button type="info" @click="onUpdateClick">更新</n-button>
<span>工作考核细则</span>
<n-button ghost @click="onWgyClick">街道社区4-5级网格</n-button>
<n-button ghost @click="onDdyClick">区级与街道指挥调度中心调度专管员</n-button>
<n-button ghost @click="onZfGAClick">执法局公安分局</n-button>
<n-button ghost @click="onWgy3Click">3 级网格长</n-button>
<n-button ghost @click="onZnbmClick">其他职能部门</n-button>
</n-space>
</n-layout-header>
<n-layout-content>
<router-view></router-view>
</n-layout-content>
</n-layout>
<n-modal transform-origin="center" :show="isKpiUpdateModalShow" :mask-closable="true"
:on-mask-click="onKpiUpdateModalMaskClick">
<n-card style="width: 300px" :bordered="false" size="small" role="dialog" aria-modal="true">
<template #header>
请选择要更新的时间
</template>
<n-grid :cols="2" :x-gap="10">
<n-grid-item>
<n-select placeholder="请选择年份" :value="year.value" :options="year.options" @update:value="onYearUpdate"/>
</n-grid-item>
<n-grid-item>
<n-select placeholder="请选择月份" :value="month.value" :options="month.options" @update:value="onMonthUpdate"/>
</n-grid-item>
</n-grid>
<template #footer>
<n-space justify="end">
<n-button type="primary" size="small" @click="onUpdateConfirm">确定</n-button>
</n-space>
</template>
</n-card>
</n-modal>
<n-modal transform-origin="center" :show="isKpiUpdatProgressModalShow">
<n-card style="width: 150px" :bordered="false" size="small" role="dialog" aria-modal="true">
<n-space vertical justify="center" align="center">
<n-progress type="circle" :percentage="kpiUpdateProgress" />
<span>正在更新...</span>
</n-space>
</n-card>
</n-modal>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NLayout, NLayoutHeader, NLayoutContent, NSpace, NButton, NModal, NCard, NGrid, NGridItem, NSelect, NProgress, useMessage, useDialog } from 'naive-ui';
import { getCurrentYear, getCurrentMonth, listYear, listMonth } from './utils/common';
const { $axios } = getCurrentInstance().appContext.config.globalProperties;
const message = useMessage();
const dialog = useDialog();
const router = useRouter();
const route = useRoute();
const isKpiUpdateModalShow = ref(false);
const isKpiUpdatProgressModalShow = ref(false);
const kpiUpdateProgress = ref(0);
const year = ref({
value: getCurrentYear(),
options: listYear()
})
const month = ref({
value: getCurrentMonth(),
options: listMonth()
});
const onYearUpdate = (value) => {
year.value.value = value;
}
const onMonthUpdate = (value) => {
month.value.value = value;
}
const onWgyClick = () => {
router.push({ name: 'wgy' });
}
const onDdyClick = () => {
router.push({ name: 'ddy' });
}
const onZfGAClick = () => {
router.push({ name: 'zfga' });
}
const onWgy3Click = () => {
router.push({ name: 'wgy3' });
}
const onZnbmClick = () => {
router.push({ name: 'znbm' });
}
const onUpdateClick = () => {
isKpiUpdateModalShow.value = true;
}
const onKpiUpdateModalMaskClick = () => {
isKpiUpdateModalShow.value = false;
}
let checkProcessInterval = null;
const checkProcess = () => {
$axios.get(`api/kpi/khxz/get-update-percent`, {
}).then(({ data }) => {
let percent = parseInt(data.data);
kpiUpdateProgress.value = percent;
if(percent >= 100) {
clearInterval(checkProcessInterval);
checkProcessInterval = null;
isKpiUpdatProgressModalShow.value = false;
} else {
isKpiUpdatProgressModalShow.value = true;
}
}).catch((resp) => {
console.error(resp)
message.error(resp.data.msg)
});
}
checkProcessInterval = setInterval(() => {
checkProcess()
}, 3000);
const onUpdateConfirm = () => {
isKpiUpdateModalShow.value = false;
dialog.warning({
title: "警告",
content: "确定更新吗?时间较长,请耐心等待...",
positiveText: "确定",
negativeText: "取消",
onPositiveClick: () => {
$axios.put(`api/kpi/khxz/update/kh-year/${year.value.value}/kh-month/${month.value.value}`, {
}).then(resp => {
message.info('正在更新');
checkProcessInterval = setInterval(() => {
checkProcess();
}, 3000)
}).catch(resp => {
console.error(resp)
message.error(resp.data.msg)
}).finally(() => { });
},
onNegativeClick: () => {
}
});
}
</script>

View File

@ -2,11 +2,12 @@
<n-form label-placement="left" label-width="auto" :model="form">
<n-form-item label="分值*" path="scroe.value">
<n-input-number v-model:value="form.score.value" placeholder="输入分值" :max="form.score.maxValue"
:min="form.score.minValue"/>
:min="form.score.minValue" :precision="2"/>
</n-form-item>
<n-form-item label="分值原因*" path="score.reason">
<n-input type="textarea" v-model:value="form.score.reason" placeholder="输入分值原因" @keydown.enter.prevent />
</n-form-item>
<!--
<n-space>
<n-form-item label="填报人*" path="score.userName">
<n-input v-model:value="form.score.userName" placeholder="输入填报人" readonly />
@ -15,6 +16,7 @@
<n-input v-model:value="form.score.date" placeholder="输入填报日期" readonly />
</n-form-item>
</n-space>
-->
<n-space justify="end">
<n-button type="primary" @click="onConfirmClick">确定</n-button>
</n-space>
@ -76,9 +78,9 @@ export default {
maxValue: vueSelf.maxScore,
minValue: vueSelf.minScore,
reason: vueSelf.reason,
userId: '1',
userName: '管理员',
date: ''
// userId: '1',
// userName: '',
// date: ''
},
},
rules: {
@ -122,7 +124,7 @@ export default {
}
},
mounted() {
this.form.score.date = this.getCurrentDate()
// this.form.score.date = this.getCurrentDate()
}
}
</script>

View File

@ -1,11 +1,6 @@
<template>
<n-space vertical>
<n-data-table
size="small"
:columns="table.columns"
:data="table.data"
:max-height="400"
:single-line="false"/>
<n-data-table size="small" :columns="table.columns" :data="table.data" :max-height="400" :single-line="false"/>
</n-space>
</template>
@ -13,6 +8,7 @@
import {
NSpace,
NDataTable,
useMessage,
} from 'naive-ui';
export default {
@ -21,62 +17,86 @@ export default {
NSpace,
NDataTable,
},
props: {
userId: {
required: true,
},
userName: {
required: true,
},
year: {
required: true,
},
month: {
required: true
},
level: {
required: true
}
},
data() {
let vueSelf = this;
return {
message: useMessage(),
table: {
columns: [
{
align: 'center',
title: '张三2023年1月考勤得分明细表',
title: `${vueSelf.userName}${vueSelf.year}${vueSelf.month}月考勤得分明细表`,
key: 'title',
children: [
{
align: 'center',
title: '月',
key: 'month',
width: 60,
},
{
align: 'center',
title: '日',
key: 'day',
width: 60,
title: '日期',
key: 'dayDate',
width: 100,
},
{
align: 'center',
title: '签到',
key: 'signIn',
key: 'isSignin',
width: 60,
render(row, index) {
return row.isSignin === 0 ? '否' : '是';
}
},
{
align: 'center',
title: '是否迟到',
key: 'isLate',
key: 'isSigninLate',
width: 60,
render(row, index) {
return row.isSigninLate === 0 ? '否' : '是';
}
},
{
align: 'center',
title: '签退',
key: 'signOut',
key: 'isSignout',
width: 60,
render(row, index) {
return row.isSignout === 0 ? '否' : '是';
}
},
{
align: 'center',
title: '是否早退',
key: 'isEarly',
width: 60,
render(row, index) {
return row.isSignoutEarly === 0 ? '否' : '是';
}
},
{
align: 'center',
title: '轨迹',
key: 'distance',
key: 'workDistance',
width: 60,
},
{
align: 'center',
title: '总分',
key: 'score',
key: 'dayScore',
width: 60,
},
{
@ -84,30 +104,54 @@ export default {
title: '备注',
key: 'remark',
width: 100,
render(row, index) {
return row.isHoliday === 1 ? '法定假期' : '工作日';
}
}
]
}
],
data: []
data: [],
}
}
},
methods: {
init() {
let vueSelf = this;
vueSelf.$axios.get(`api/kpi/list-community-boss-day-count/user-id/${vueSelf.userId}`, {
params: {
year: vueSelf.year,
month: vueSelf.month,
level: vueSelf.level
}
}).then(({data}) => {
let dayScoreTotal = 0;
let signinCount = 0;
let signinLateCount = 0;
let signoutCount = 0;
let signoutEarlyCount = 0;
let workDistanceTotal = 0;
let workDay = 0;
data.forEach(item => {
dayScoreTotal += item.dayScore;
signinCount += item.isSignin;
signinLateCount += item.isSigninLate;
signoutCount += item.isSignout;
signoutEarlyCount += item.isSignoutEarly;
workDistanceTotal += item.workDistance;
if(item.isHoliday === 0) {
workDay++;
}
});
console.log(dayScoreTotal, workDay)
vueSelf.table.data = data;
}).catch(({ data }) => {
vueSelf.message.error(data.msg);
});
},
},
mounted() {
let data = [];
for(var i = 0; i < 100; i++) {
data.push({
month: 12,
day: 1,
signIn: 1,
signOut: 1,
distance: 1,
remark: '123'
})
}
this.table.data = data;
this.init();
}
}
</script>

View File

@ -7,8 +7,8 @@
<n-space class="search" vertical>
<n-grid :cols="7" :x-gap="10">
<n-grid-item>
<n-select placeholder="请选择街道" v-model:value="search.select.street.value"
:options="search.select.street.options" :clearable="true" />
<n-select placeholder="请选择街道" v-model:value="search.select.area.value"
:options="search.select.area.options" :clearable="true" @update:value="onAreaValueUpdate"/>
</n-grid-item>
<n-grid-item>
<n-select placeholder="请选择社区" v-model:value="search.select.community.value"
@ -19,11 +19,11 @@
</n-grid-item>
<n-grid-item>
<n-select placeholder="请选择年份" v-model:value="search.select.year.value"
:options="search.select.year.options" :clearable="true" />
:options="search.select.year.options" />
</n-grid-item>
<n-grid-item>
<n-select placeholder="请选择月份" v-model:value="search.select.month.value"
:options="search.select.month.options" :clearable="true" />
:options="search.select.month.options" />
</n-grid-item>
<n-grid-item>
<n-select placeholder="请选择网格员级别" v-model:value="search.select.wgy.value"
@ -31,9 +31,8 @@
</n-grid-item>
<n-grid-item>
<n-space>
<n-button type="primary">搜索</n-button>
<n-button type="primary" @click="onSearchClick">搜索</n-button>
<n-button type="info">导出</n-button>
<n-button type="default" @click="onUpdateClick">更新</n-button>
</n-space>
</n-grid-item>
</n-grid>
@ -46,7 +45,7 @@
</n-spin>
<n-modal preset="dialog" style="width: 800px" :show="modal.distance.show" :show-icon="false" :mask-closable="true"
:closable="false" :on-update-show="onDistancenCloseClick">
<wgy-work />
<wgy-work :user-id="search.userId" :user-name="search.userName" :year="search.select.year.value" :month="search.select.month.value" :level="search.select.wgy.value"/>
</n-modal>
<n-modal preset="dialog" style="width: 800px" :show="modal.reportDay.show" :show-icon="false" :mask-closable="true"
:closable="false" :on-update-show="onReportDayCloseClick">
@ -107,8 +106,10 @@ export default {
dialog: useDialog(),
dataLoading: false,
search: {
userId: null,
userName: null,
select: {
street: {
area: {
value: null,
options: [
{ label: '稀土路街道', value: 'xtl' }
@ -367,6 +368,14 @@ export default {
keyName: 'overScore',
width: 60,
className: 'score-plus',
render(row, index) {
return h('a', {
href: 'javascript:void(0);',
onClick() {
vueSelf.onOverScoreClick(row, index);
}
}, row.U);
}
},
{
align: 'center',
@ -616,7 +625,7 @@ export default {
fixed: 'right',
width: 100,
render(row, index) {
return vueSelf.computeAE(row) * row.AF / 100;
return (vueSelf.computeAE(row) * row.AF / 100).toFixed(2);
}
}
],
@ -673,6 +682,8 @@ export default {
//
onDistanceClick(row, index) {
let distance = row.C;
this.search.userId = row.user_id;
this.search.userName = row.B;
this.modal.distance.show = true;
},
// 45
@ -731,6 +742,19 @@ export default {
this.modal.scoring.userName = row.B;
this.modal.scoring.title = '扣分其它情况';
},
// -
onOverScoreClick(row, index) {
let overScore = row.Q;
this.modal.scoring.show = true;
this.modal.scoring.rowKey = 'Q';
this.modal.scoring.rowIndex = index;
this.modal.scoring.score = overScore;
this.modal.scoring.reason = row.reasonQ;
this.modal.scoring.userName = row.B;
this.modal.scoring.maxScore = 10;
this.modal.scoring.minScore = 0;
this.modal.scoring.title = '结案情况得分';
},
// -
onSuperviseCountClick(row, index) {
let superviseCount = row.R;
@ -872,140 +896,12 @@ export default {
this.modal.scoring.userName = row.B;
this.modal.scoring.title = '党建信息抽查';
},
computeAE(row) {
return row.C + row.H - row.J + row.L - row.M - row.N - row.O - row.P + row.Q - row.S - row.T - row.U - row.V + row.W + row.X + row.Y - row.Z + row.AA + row.AB + row.AC - row.AD;
let result = row.C + row.H - row.J + row.L - row.M - row.N - row.O - row.P + row.Q - row.S - row.T - row.U - row.V + row.W + row.X + row.Y - row.Z + row.AA + row.AB + row.AC - row.AD;
return result < 0 ? 0 : result.toFixed(2);
},
onUpdateClick() {
let vueSelf = this;
vueSelf.dialog.warning({
title: '警告',
content: '确定更新吗?更新时间较长...',
positiveText: '确定',
negativeText: '不确定',
onPositiveClick: () => {
vueSelf.dataLoading = true;
vueSelf.$axios.put(`api/kpi/khxz/update-wgy/kh-year/${vueSelf.search.select.year.value}/kh-month/${vueSelf.search.select.month.value}/wgy-level/${vueSelf.search.select.wgy.value}`, {
}).then(resp => {
vueSelf.message.info('更新成功');
vueSelf.listData();
}).catch(resp => {
console.error(resp)
vueSelf.message.error('更新失败');
}).finally(() => {
vueSelf.dataLoading = false;
});
},
onNegativeClick: () => {
}
});
},
listTestData() {
let data = [];
for (let i = 0; i < 100; i++) {
let d = {
userId: 'userId',
key: i + 1,
name: i + 'name',
distance: i,
baseScore: Math.floor(Math.random() * 100),
shouldReportCount: 30,
caseSingleScore: 2,
reportCount: Math.floor(Math.random() * 10),
reportScore: Math.floor(Math.random() * 10),
missReportCount: Math.floor(Math.random() * 10),
missReportScore: Math.floor(Math.random() * 10),
moreReportCount: Math.floor(Math.random() * 10),
moreReportScore: Math.floor(Math.random() * 10),
shouldButNo: Math.floor(Math.random() * 10),
reasonShouldButNo: '',
timeout: Math.floor(Math.random() * 10),
reasonTimeout: '',
maliciousChargeback: Math.floor(Math.random() * 10),
reasonMaliciousChargeback: '',
noDeductOthers: Math.floor(Math.random() * 10),
reasonNoDeductOthers: '',
overScore: Math.floor(Math.random() * 10),
superviseCount: Math.floor(Math.random() * 10),
reasonSuperviseCount: '',
superviseDeductScore: Math.floor(Math.random() * 10),
unCheckIn24Hours: Math.floor(Math.random() * 10),
fakeInfo: Math.floor(Math.random() * 10),
reasonFakeInfo: '',
handleOthers: Math.floor(Math.random() * 10),
reasonHandleOthers: '',
populationSave: Math.floor(Math.random() * 10),
reasonPopulationSave: '',
populationQuality: Math.floor(Math.random() * 10),
reasonPopulationQuality: '',
populationEdit: Math.floor(Math.random() * 10),
reasonPopulationEdit: '',
populationSpotCheck: Math.floor(Math.random() * 10),
reasonPopulationSpotCheck: '',
partySave: Math.floor(Math.random() * 10),
reasonPartySave: '',
partyQuality: Math.floor(Math.random() * 10),
reasonPartyQuality: '',
partyEdit: Math.floor(Math.random() * 10),
reasonPartyEdit: '',
partySpotCheck: Math.floor(Math.random() * 10),
reasonPartySpotCheck: '',
totalScore: Math.floor(Math.random() * 10),
shouldPay: Math.floor(Math.random() * 10),
actualPay: Math.floor(Math.random() * 10),
}
data.push({
A: d.key,
B: d.name,
C: d.distance,
D: d.baseScore,
E: d.shouldReportCount,
F: d.caseSingleScore,
G: d.reportCount,
H: d.reportScore,
I: d.missReportCount,
J: d.missReportScore,
K: d.moreReportCount,
L: d.moreReportScore,
M: d.shouldButNo,
reasonM: d.reasonShouldButNo,
N: d.timeout,
reasonN: d.reasonTimeout,
O: d.maliciousChargeback,
reasonO: d.reasonMaliciousChargeback,
P: d.noDeductOthers,
reasonP: d.reasonNoDeductOthers,
Q: d.overScore,
R: d.superviseCount,
reasonR: d.reasonSuperviseCount,
S: d.superviseDeductScore,
T: d.unCheckIn24Hours,
U: d.fakeInfo,
reasonU: d.reasonFakeInfo,
V: d.handleOthers,
reasonV: d.reasonHandleOthers,
W: d.populationSave,
reasonW: d.reasonPopulationSave,
X: d.populationQuality,
reasonX: d.reasonPopulationQuality,
Y: d.populationEdit,
reasonY: d.reasonPopulationEdit,
Z: d.populationSpotCheck,
reasonZ: d.reasonPopulationSpotCheck,
AA: d.partySave,
reasonAA: d.reasonPartySave,
AB: d.partyQuality,
reasonAB: d.reasonPartyQuality,
AC: d.partyEdit,
reasonAC: d.reasonPartyEdit,
AD: d.partySpotCheck,
reasonAD: d.reasonPartySpotCheck,
AE: d.totalScore,
AF: d.shouldPay,
AG: d.actualPay,
});
}
this.table.data = data;
onSearchClick() {
this.listData();
},
resize() {
let body = document.body;
@ -1013,24 +909,70 @@ export default {
this.table.maxHeight = body.clientHeight - 408;
this.table.scrollX = body.clientWidth;
},
listArea() {
let vueSelf = this;
vueSelf.$axios.get(`api/kpi/list-area`, {
}).then(({data}) => {
let optionArray = [];
data.forEach((item, index) => {
optionArray.push({
label: item.dictName,
value: item.dictId
})
})
vueSelf.search.select.area.options = optionArray;
}).catch(resp => {
vueSelf.message.error(resp.data.msg);
})
},
onAreaValueUpdate(value) {
this.listCommunity(value);
},
listCommunity(areaId) {
let vueSelf = this;
vueSelf.search.select.community.value = null;
if(!areaId) {
vueSelf.search.select.community.options = [];
return;
}
vueSelf.$axios.get(`api/kpi/list-community/area-id/${areaId}`, {
}).then(({data}) => {
let optionArray = [];
data.forEach((item, index) => {
optionArray.push({
label: item.communityName,
value: item.communityId
})
})
vueSelf.search.select.community.options = optionArray;
}).catch(resp => {
vueSelf.message.error(resp.data.msg);
})
},
listData() {
let vueSelf = this;
vueSelf.dataLoading = true;
vueSelf.$axios.get(`api/kpi/khxz/list-wgy`, {
params: {
areaId: vueSelf.search.select.area.value,
communityId: vueSelf.search.select.community.value,
khYear: vueSelf.search.select.year.value,
khMonth: vueSelf.search.select.month.value,
wgyLevel: vueSelf.search.select.wgy.value
wgyLevel: vueSelf.search.select.wgy.value,
keywords: vueSelf.search.input.keywords
}
}).then(resp => {
let data = resp.data;
}).then(({data}) => {
data.forEach((item, index) => {
item.A = index + 1;
item.F = item.E === 0 ? 0 : item.D / item.E;
item.H = item.F * item.G;
item.J = item.F * item.I;
item.L = (item.K > 10 ? 10 : item.K) * 0.5;
item.S = item.R * 0.2;
})
this.table.data = data;
console.log(resp);
}).catch(resp => {
console.log(resp);
}).catch(({data}) => {
vueSelf.message.error(data.msg);
}).finally(() => {
vueSelf.dataLoading = false;
});
@ -1040,16 +982,15 @@ export default {
this.search.select.year.value = getCurrentYear();
this.search.select.month.options = listMonth();
this.search.select.month.value = getCurrentMonth();
this.listArea();
this.listData();
}
},
computed() {
},
mounted() {
let vueSelf = this;
vueSelf.init();
// vueSelf.listTestData();
vueSelf.resize();
window.onresize = this.resize;
}