2023-05-05 18:19:42 +08:00
|
|
|
|
<template>
|
|
|
|
|
<n-space class="container" vertical>
|
2023-05-06 18:09:41 +08:00
|
|
|
|
<n-space justify="center">
|
|
|
|
|
<h1>区级与街道指挥调度中心(调度专管员)网格化工作考核细则(以季度为考核周期)</h1>
|
|
|
|
|
</n-space>
|
2023-05-05 18:19:42 +08:00
|
|
|
|
<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-grid-item>
|
|
|
|
|
<n-grid-item>
|
|
|
|
|
<n-select placeholder="请选择社区" v-model:value="search.select.community.value"
|
|
|
|
|
:options="search.select.community.options" :clearable="true" />
|
|
|
|
|
</n-grid-item>
|
|
|
|
|
<n-grid-item>
|
|
|
|
|
<n-input v-model:value="search.input.keywords" type="text" placeholder="姓名|手机号" />
|
|
|
|
|
</n-grid-item>
|
|
|
|
|
<n-grid-item>
|
|
|
|
|
<n-select placeholder="请选择年份" v-model:value="search.select.year.value"
|
|
|
|
|
:options="search.select.year.options" :clearable="true" />
|
|
|
|
|
</n-grid-item>
|
|
|
|
|
<n-grid-item>
|
|
|
|
|
<n-select placeholder="请选择月份" v-model:value="search.select.month.value"
|
|
|
|
|
:options="search.select.month.options" :clearable="true" />
|
|
|
|
|
</n-grid-item>
|
|
|
|
|
<n-grid-item>
|
|
|
|
|
<n-space>
|
|
|
|
|
<n-button type="primary">搜索</n-button>
|
|
|
|
|
<n-button type="info">导出</n-button>
|
|
|
|
|
</n-space>
|
|
|
|
|
</n-grid-item>
|
|
|
|
|
</n-grid>
|
|
|
|
|
</n-space>
|
|
|
|
|
<n-space>
|
|
|
|
|
<n-data-table :columns="table.columns" :data="table.data" :bordered="true" :single-line="false"
|
|
|
|
|
:min-height="table.minHeight" :max-height="table.maxHeight" :scroll-x="table.scrollX" />
|
|
|
|
|
</n-space>
|
|
|
|
|
</n-space>
|
|
|
|
|
<n-modal preset="dialog" style="width: 800px" :show="modal.sign.show" :show-icon="false" :mask-closable="true"
|
|
|
|
|
:closable="false" :on-update-show="onSignCloseClick">
|
|
|
|
|
<ddy-work />
|
|
|
|
|
</n-modal>
|
|
|
|
|
<n-modal preset="dialog" style="width: 600px" :title="`【${modal.scoring.userName}】${modal.scoring.title}打分`"
|
|
|
|
|
:show="modal.scoring.show" :show-icon="false" :mask-closable="true" :closable="false"
|
|
|
|
|
:on-update-show="onScroingCloseClick">
|
|
|
|
|
<scoring :row-key="modal.scoring.rowKey" :row-index="modal.scoring.rowIndex" :score="modal.scoring.score"
|
|
|
|
|
:reason="modal.scoring.reason" :min-score="modal.scoring.minScore" :max-score="modal.scoring.maxScore"
|
|
|
|
|
@confirm="onScroingConfimClick" />
|
|
|
|
|
</n-modal>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { h } from 'vue'
|
|
|
|
|
import {
|
|
|
|
|
NSpace,
|
|
|
|
|
NGrid,
|
|
|
|
|
NGridItem,
|
|
|
|
|
NDataTable,
|
|
|
|
|
NSelect,
|
|
|
|
|
NInput,
|
|
|
|
|
NButton,
|
|
|
|
|
NModal,
|
|
|
|
|
} from 'naive-ui';
|
|
|
|
|
import Scoring from '../common/Scoring.vue';
|
|
|
|
|
import DdyWork from '../common/DdyWork.vue';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Ddy',
|
|
|
|
|
components: {
|
|
|
|
|
NSpace,
|
|
|
|
|
NGrid,
|
|
|
|
|
NGridItem,
|
|
|
|
|
NDataTable,
|
|
|
|
|
NSelect,
|
|
|
|
|
NInput,
|
|
|
|
|
NButton,
|
|
|
|
|
NModal,
|
|
|
|
|
|
|
|
|
|
DdyWork,
|
|
|
|
|
Scoring,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
let vueSelf = this;
|
|
|
|
|
return {
|
2023-05-06 18:09:41 +08:00
|
|
|
|
|
2023-05-05 18:19:42 +08:00
|
|
|
|
search: {
|
|
|
|
|
select: {
|
|
|
|
|
street: {
|
|
|
|
|
value: null,
|
|
|
|
|
options: [
|
|
|
|
|
{ label: '稀土路街道', value: 'xtl' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
community: {
|
|
|
|
|
value: null,
|
|
|
|
|
options: [
|
|
|
|
|
{ label: '社区', value: 'sq' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
year: {
|
|
|
|
|
value: null,
|
|
|
|
|
options: [
|
|
|
|
|
{ label: '2023年', value: '2023' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
month: {
|
|
|
|
|
value: null,
|
|
|
|
|
options: [
|
|
|
|
|
{ label: '1月', value: '1' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
input: {
|
|
|
|
|
keywords: ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
table: {
|
|
|
|
|
minHeight: 300,
|
|
|
|
|
maxHeight: 300,
|
|
|
|
|
scrollX: 800,
|
|
|
|
|
columns: [
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '序号',
|
|
|
|
|
key: 'A',
|
|
|
|
|
keyName: 'key',
|
|
|
|
|
fixed: 'left',
|
|
|
|
|
width: 60
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '姓名',
|
|
|
|
|
key: 'B',
|
|
|
|
|
keyName: 'name',
|
|
|
|
|
fixed: 'left',
|
|
|
|
|
width: 60
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '签到情况(30分)',
|
|
|
|
|
key: 'C',
|
|
|
|
|
keyName: 'sign',
|
|
|
|
|
width: 60,
|
|
|
|
|
render(row, index) {
|
|
|
|
|
return h('a', {
|
|
|
|
|
href: 'javascript:void(0);',
|
|
|
|
|
onClick() {
|
|
|
|
|
vueSelf.onSignClick(row, index);
|
|
|
|
|
}
|
|
|
|
|
}, row.C);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '网格案件调度情况',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '基础分',
|
|
|
|
|
key: 'D',
|
|
|
|
|
keyName: 'baseScore',
|
|
|
|
|
width: 60
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '案件调度',
|
|
|
|
|
key: 'dispatchCase',
|
|
|
|
|
width: 60,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '数量',
|
|
|
|
|
key: 'E',
|
|
|
|
|
keyName: 'dispatchCaseCount',
|
|
|
|
|
width: 60
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '扣分',
|
|
|
|
|
key: 'F',
|
|
|
|
|
keyName: 'dispatchCaseDeductPoints',
|
|
|
|
|
width: 60
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '案件调度过程质量凡属下列情况之一经核准予以扣分',
|
|
|
|
|
width: 60,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '应调度却未及时调度',
|
|
|
|
|
key: 'G',
|
|
|
|
|
keyName: 'shouldButNot',
|
|
|
|
|
width: 60,
|
|
|
|
|
render(row, index) {
|
|
|
|
|
return h('a', {
|
|
|
|
|
href: 'javascript:void(0)',
|
|
|
|
|
onClick() {
|
|
|
|
|
vueSelf.onShouldButNotClick(row, index)
|
|
|
|
|
}
|
|
|
|
|
}, row.G)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '未及时调度案件造成严重影响',
|
|
|
|
|
key: 'H',
|
|
|
|
|
keyName: 'timeout',
|
|
|
|
|
width: 60,
|
|
|
|
|
render(row, index) {
|
|
|
|
|
return h('a', {
|
|
|
|
|
href: 'javascript:void(0)',
|
|
|
|
|
onClick() {
|
|
|
|
|
vueSelf.onTimeoutClick(row, index)
|
|
|
|
|
}
|
|
|
|
|
}, row.H)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '其它情况',
|
|
|
|
|
key: 'I',
|
|
|
|
|
keyName: 'others',
|
|
|
|
|
width: 60,
|
|
|
|
|
render(row, index) {
|
|
|
|
|
return h('a', {
|
|
|
|
|
href: 'javascript:void(0)',
|
|
|
|
|
onClick() {
|
|
|
|
|
vueSelf.onOthersClick(row, index)
|
|
|
|
|
}
|
|
|
|
|
}, row.I)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '其他工作考核',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '组织评价',
|
|
|
|
|
key: 'J',
|
|
|
|
|
keyName: 'orgEvalution',
|
|
|
|
|
width: 60,
|
|
|
|
|
render(row, index) {
|
|
|
|
|
return h('a', {
|
|
|
|
|
href: 'javascript:void(0)',
|
|
|
|
|
onClick() {
|
|
|
|
|
vueSelf.onOrgEvalutionClick(row, index)
|
|
|
|
|
}
|
|
|
|
|
}, row.J)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '总得分',
|
|
|
|
|
key: 'K',
|
|
|
|
|
keyName: 'totalScore',
|
|
|
|
|
fixed: 'right',
|
2023-05-09 22:02:21 +08:00
|
|
|
|
width: 60,
|
2023-05-05 18:19:42 +08:00
|
|
|
|
render(row, index) {
|
|
|
|
|
return vueSelf.computeK(row);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '应发绩效工资',
|
|
|
|
|
key: 'L',
|
|
|
|
|
keyName: 'shouldPay',
|
|
|
|
|
fixed: 'right',
|
2023-05-09 22:02:21 +08:00
|
|
|
|
width: 60
|
2023-05-05 18:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
align: 'center',
|
|
|
|
|
title: '实发绩效工资',
|
|
|
|
|
key: 'M',
|
|
|
|
|
keyName: 'actualPay',
|
|
|
|
|
fixed: 'right',
|
2023-05-09 22:02:21 +08:00
|
|
|
|
width: 60,
|
2023-05-05 18:19:42 +08:00
|
|
|
|
render(row, index) {
|
|
|
|
|
return vueSelf.computeK(row) * row.L / 100;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
data: []
|
|
|
|
|
},
|
|
|
|
|
modal: {
|
|
|
|
|
sign: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
scoring: {
|
|
|
|
|
show: false,
|
|
|
|
|
userName: null,
|
|
|
|
|
title: null,
|
|
|
|
|
rowKey: null,
|
|
|
|
|
rowIndex: null,
|
|
|
|
|
score: 0,
|
|
|
|
|
reason: '',
|
|
|
|
|
minScore: null,
|
|
|
|
|
maxScore: null
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2023-05-06 18:09:41 +08:00
|
|
|
|
methods: {
|
2023-05-05 18:19:42 +08:00
|
|
|
|
// 考勤关闭
|
|
|
|
|
onSignCloseClick() {
|
|
|
|
|
this.modal.sign.show = false;
|
|
|
|
|
},
|
|
|
|
|
// 考勤签到打开
|
|
|
|
|
onSignClick(row, index) {
|
|
|
|
|
let sign = row.C;
|
|
|
|
|
this.modal.sign.show = true;
|
|
|
|
|
},
|
|
|
|
|
// 打分确定
|
|
|
|
|
onScroingConfimClick(key, index, { score, reason, userId, userName, date }) {
|
|
|
|
|
this.modal.scoring.show = false;
|
|
|
|
|
this.table.data[index][key] = score;
|
|
|
|
|
this.table.data[index][`reason${key}`] = reason;
|
|
|
|
|
},
|
|
|
|
|
// 打分窗口关闭
|
|
|
|
|
onScroingCloseClick() {
|
|
|
|
|
this.modal.scoring.show = false;
|
|
|
|
|
},
|
|
|
|
|
// 应调度却未及时调度 -
|
|
|
|
|
onShouldButNotClick(row, index) {
|
|
|
|
|
let shouldButNot = row.G;
|
|
|
|
|
this.modal.scoring.show = true;
|
|
|
|
|
this.modal.scoring.rowKey = 'G';
|
|
|
|
|
this.modal.scoring.rowIndex = index;
|
|
|
|
|
this.modal.scoring.score = shouldButNot;
|
|
|
|
|
this.modal.scoring.reason = row.reasonG;
|
|
|
|
|
this.modal.scoring.maxScore = null;
|
|
|
|
|
this.modal.scoring.minScore = null;
|
|
|
|
|
this.modal.scoring.userName = row.B;
|
|
|
|
|
this.modal.scoring.title = '应调度却未及时调度';
|
|
|
|
|
},
|
|
|
|
|
// 未及时调度案件造成严重影响 -
|
|
|
|
|
onTimeoutClick(row, index) {
|
|
|
|
|
let timeout = row.H;
|
|
|
|
|
this.modal.scoring.show = true;
|
|
|
|
|
this.modal.scoring.rowKey = 'H';
|
|
|
|
|
this.modal.scoring.rowIndex = index;
|
|
|
|
|
this.modal.scoring.score = timeout;
|
|
|
|
|
this.modal.scoring.reason = row.reasonH;
|
|
|
|
|
this.modal.scoring.maxScore = null;
|
|
|
|
|
this.modal.scoring.minScore = null;
|
|
|
|
|
this.modal.scoring.userName = row.B;
|
|
|
|
|
this.modal.scoring.title = '未及时调度案件造成严重影响';
|
|
|
|
|
},
|
|
|
|
|
// 其它情况 -
|
|
|
|
|
onOthersClick(row, index) {
|
|
|
|
|
let others = row.I;
|
|
|
|
|
this.modal.scoring.show = true;
|
|
|
|
|
this.modal.scoring.rowKey = 'I';
|
|
|
|
|
this.modal.scoring.rowIndex = index;
|
|
|
|
|
this.modal.scoring.score = others;
|
|
|
|
|
this.modal.scoring.reason = row.reasonI;
|
|
|
|
|
this.modal.scoring.maxScore = null;
|
|
|
|
|
this.modal.scoring.minScore = null;
|
|
|
|
|
this.modal.scoring.userName = row.B;
|
|
|
|
|
this.modal.scoring.title = '其它情况';
|
|
|
|
|
},
|
|
|
|
|
// 组织评价 +
|
|
|
|
|
onOrgEvalutionClick(row, index) {
|
|
|
|
|
let others = row.J;
|
|
|
|
|
this.modal.scoring.show = true;
|
|
|
|
|
this.modal.scoring.rowKey = 'J';
|
|
|
|
|
this.modal.scoring.rowIndex = index;
|
|
|
|
|
this.modal.scoring.score = others;
|
|
|
|
|
this.modal.scoring.reason = row.reasonJ;
|
|
|
|
|
this.modal.scoring.maxScore = 20;
|
|
|
|
|
this.modal.scoring.minScore = 0;
|
|
|
|
|
this.modal.scoring.userName = row.B;
|
|
|
|
|
this.modal.scoring.title = '组织评价';
|
2023-05-06 18:09:41 +08:00
|
|
|
|
},
|
2023-05-05 18:19:42 +08:00
|
|
|
|
computeK(row) {
|
|
|
|
|
return row.C + row.D - row.F - row.G - row.H - row.I + row.J;
|
|
|
|
|
},
|
|
|
|
|
listTestData() {
|
|
|
|
|
let data = [];
|
|
|
|
|
for (let i = 0; i < 100; i++) {
|
|
|
|
|
let d = {
|
|
|
|
|
userId: 'userId',
|
|
|
|
|
key: i + 1,
|
|
|
|
|
name: i + 'name',
|
|
|
|
|
sign: i,
|
|
|
|
|
baseScore: Math.floor(Math.random() * 100),
|
|
|
|
|
dispatchCaseCount: 30,
|
|
|
|
|
dispatchCaseDeductPoints: 2,
|
|
|
|
|
shouldButNo: Math.floor(Math.random() * 10),
|
|
|
|
|
reasonShouldButNo: '',
|
|
|
|
|
timeout: Math.floor(Math.random() * 10),
|
|
|
|
|
reasonTimeout: '',
|
|
|
|
|
others: Math.floor(Math.random() * 10),
|
|
|
|
|
reasonOthers: '',
|
|
|
|
|
orgEvalution: Math.floor(Math.random() * 10),
|
|
|
|
|
reasonOrgEvalution: '',
|
|
|
|
|
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.sign,
|
|
|
|
|
D: d.baseScore,
|
|
|
|
|
E: d.dispatchCaseCount,
|
|
|
|
|
F: d.dispatchCaseDeductPoints,
|
|
|
|
|
G: d.shouldButNo,
|
|
|
|
|
reasonG: d.reasonShouldButNo,
|
|
|
|
|
H: d.timeout,
|
|
|
|
|
reasonH: d.reasonTimeout,
|
|
|
|
|
I: d.others,
|
2023-05-06 18:09:41 +08:00
|
|
|
|
reasonI: d.reasonOthers,
|
2023-05-05 18:19:42 +08:00
|
|
|
|
J: d.orgEvalution,
|
|
|
|
|
reasonJ: d.reasonOrgEvalution,
|
|
|
|
|
K: d.totalScore,
|
|
|
|
|
L: d.shouldPay,
|
|
|
|
|
M: d.actualPay,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
this.table.data = data;
|
2023-05-06 18:09:41 +08:00
|
|
|
|
},
|
|
|
|
|
resize() {
|
|
|
|
|
let body = document.body;
|
|
|
|
|
this.table.minHeight = body.clientHeight - 365;
|
|
|
|
|
this.table.maxHeight = body.clientHeight - 365;
|
|
|
|
|
this.table.scrollX = body.clientWidth;
|
2023-05-05 18:19:42 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
let vueSelf = this;
|
2023-05-06 18:09:41 +08:00
|
|
|
|
vueSelf.listTestData();
|
|
|
|
|
vueSelf.resize();
|
|
|
|
|
window.onresize = this.resize;
|
2023-05-05 18:19:42 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
|
|
.container
|
2023-05-06 18:09:41 +08:00
|
|
|
|
padding 0 10px
|
|
|
|
|
:deep(.score-plus)
|
|
|
|
|
background-color yellow
|
|
|
|
|
:deep(.score-minus)
|
|
|
|
|
background-color red
|
2023-05-05 18:19:42 +08:00
|
|
|
|
</style>
|