From a8fdf27a631de09f3385d994a5fc6b1fedd99e86 Mon Sep 17 00:00:00 2001
From: TS-QD1 <tskj_pc1@163.com>
Date: Fri, 5 May 2023 18:19:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=9B=AE=E5=BD=95=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E5=A2=9E=E5=8A=A0=E4=B8=A4=E4=B8=AA=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   8 +-
 .../common/{WgyWork copy.vue => DdyWork.vue}  |   9 +-
 src/components/common/Scoring.vue             |   1 -
 src/components/common/ZfGaWork.vue            |  98 ++++
 src/components/ddy/Ddy.vue                    | 135 -----
 src/components/table/Ddy.vue                  | 440 +++++++++++++++
 src/components/{wgy => table}/Wgy.vue         |   4 +-
 src/components/table/Wgy3.vue                 | 308 +++++++++++
 src/components/table/ZfGa.vue                 | 501 ++++++++++++++++++
 9 files changed, 1356 insertions(+), 148 deletions(-)
 rename src/components/common/{WgyWork copy.vue => DdyWork.vue} (89%)
 create mode 100644 src/components/common/ZfGaWork.vue
 delete mode 100644 src/components/ddy/Ddy.vue
 create mode 100644 src/components/table/Ddy.vue
 rename src/components/{wgy => table}/Wgy.vue (99%)
 create mode 100644 src/components/table/Wgy3.vue
 create mode 100644 src/components/table/ZfGa.vue

diff --git a/src/App.vue b/src/App.vue
index 73e614f..3f5641d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,18 @@
 <template>
   <n-message-provider>
     <!-- <wgy /> -->
+    <wgy-3/>
+    <zf-ga/>
     <ddy/>
   </n-message-provider>
 </template>
 
 <script setup>
 import { NMessageProvider } from 'naive-ui';
-import Wgy from './components/wgy/Wgy.vue';
-import Ddy from './components/ddy/Ddy.vue';
+import Wgy from './components/table/Wgy.vue';
+import Ddy from './components/table/Ddy.vue';
+import ZfGa from './components/table/ZfGa.vue';
+import Wgy3 from './components/table/Wgy3.vue';
 </script>
 
 <style scoped></style>
diff --git a/src/components/common/WgyWork copy.vue b/src/components/common/DdyWork.vue
similarity index 89%
rename from src/components/common/WgyWork copy.vue
rename to src/components/common/DdyWork.vue
index 77dca79..09a5b9a 100644
--- a/src/components/common/WgyWork copy.vue	
+++ b/src/components/common/DdyWork.vue
@@ -16,7 +16,7 @@ import {
 } from 'naive-ui';
 
 export default {
-    name: 'WgyWork',
+    name: 'DdyWork',
     components: {
         NSpace,
         NDataTable,
@@ -55,12 +55,6 @@ export default {
                                 key: 'signOut',
                                 width: 60,
                             },
-                            {
-                                align: 'center',
-                                title: '轨迹',
-                                key: 'distance',
-                                width: 60,
-                            },
                             {
                                 align: 'center',
                                 title: '总分',
@@ -91,7 +85,6 @@ export default {
                 day: 1,
                 signIn: 1,
                 signOut: 1,
-                distance: 1,
                 remark: '123'
             })
         }
diff --git a/src/components/common/Scoring.vue b/src/components/common/Scoring.vue
index f79069a..51a7dcc 100644
--- a/src/components/common/Scoring.vue
+++ b/src/components/common/Scoring.vue
@@ -68,7 +68,6 @@ export default {
     },  
     data() {
         let vueSelf = this;
-        console.log(vueSelf.maxScore)
         return {
             message: useMessage(),
             form: {
diff --git a/src/components/common/ZfGaWork.vue b/src/components/common/ZfGaWork.vue
new file mode 100644
index 0000000..86a11d1
--- /dev/null
+++ b/src/components/common/ZfGaWork.vue
@@ -0,0 +1,98 @@
+<template>
+    <n-space vertical>
+        <n-data-table 
+            size="small"
+            :columns="table.columns" 
+            :data="table.data" 
+            :max-height="400"
+            :single-line="false"/>
+    </n-space>
+</template>
+
+<script>
+import {
+    NSpace,
+    NDataTable,
+} from 'naive-ui';
+
+export default {
+    name: 'ZfGaWork',
+    components: {
+        NSpace,
+        NDataTable,
+    },
+    data() {
+        let vueSelf = this;
+        return {
+            table: {
+                columns: [
+                    {
+                        align: 'center',
+                        title: '张三2023年1月考勤得分明细表',
+                        key: 'title',
+                        children: [
+                            {
+                                align: 'center',
+                                title: '月',
+                                key: 'month',
+                                width: 60,
+                            },
+                            {
+                                align: 'center',
+                                title: '日',
+                                key: 'day',
+                                width: 60,
+                            },
+                            {
+                                align: 'center',
+                                title: '签到',
+                                key: 'signIn',
+                                width: 60,
+                            },
+                            {
+                                align: 'center',
+                                title: '签退',
+                                key: 'signOut',
+                                width: 60,
+                            },
+                            {
+                                align: 'center',
+                                title: '总分',
+                                key: 'score',
+                                width: 60,
+                            },
+                            {
+                                align: 'center',
+                                title: '备注',
+                                key: 'remark',
+                                width: 100,
+                            }
+                        ]
+                    }
+                ],
+                data: []
+            }
+        }
+    },
+    methods: {
+        
+    },
+    mounted() {
+        let data = [];
+        for(var i = 0; i < 100; i++) {
+            data.push({
+                month: 12,
+                day: 1,
+                signIn: 1,
+                signOut: 1,
+                remark: '123'
+            })
+        }
+        this.table.data = data;
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/ddy/Ddy.vue b/src/components/ddy/Ddy.vue
deleted file mode 100644
index 929e499..0000000
--- a/src/components/ddy/Ddy.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-    <n-space vertical>
-        <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>
-</template>
-
-<script>
-import { h } from 'vue'
-import {
-    NSpace,
-    NGrid,
-    NGridItem,
-    NDataTable,
-    NSelect,
-    NInput,
-    NButton,
-} from 'naive-ui'
-
-export default {
-    name: 'Ddy',
-    components: {
-        NSpace,
-        NGrid,
-        NGridItem,
-        NDataTable,
-        NSelect,
-        NInput,
-        NButton,
-    },
-    data() {
-        let vueSelf = this;
-        return {
-            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
-                    },
-                    {
-                        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.onReportDayClick(row, index)
-                                                }
-                                            }, row.G)
-                                        }
-                                    }
-                                ]
-                            },
-                        ]
-                    },
-                ],
-                data: []
-            }
-        }
-    },
-    methods: {
-
-    },
-    mounted() {
-
-    }
-}
-</script>
-
-<style lang="stylus" scoped>
-
-</style>
diff --git a/src/components/table/Ddy.vue b/src/components/table/Ddy.vue
new file mode 100644
index 0000000..4e57a3b
--- /dev/null
+++ b/src/components/table/Ddy.vue
@@ -0,0 +1,440 @@
+<template>
+    <n-space class="container" vertical>
+        <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 {
+            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',
+                        width: 100,
+                        render(row, index) {
+                            return vueSelf.computeK(row);
+                        }
+                    },
+                    {
+                        align: 'center',
+                        title: '应发绩效工资',
+                        key: 'L',
+                        keyName: 'shouldPay',
+                        fixed: 'right',
+                        width: 100
+                    },
+                    {
+                        align: 'center',
+                        title: '实发绩效工资',
+                        key: 'M',
+                        keyName: 'actualPay',
+                        fixed: 'right',
+                        width: 100,
+                        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
+                }
+            }
+        }
+    },
+        methods: {
+        // 考勤关闭
+        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 = '组织评价';
+        },  
+        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,
+                    reasonI: d. reasonOthers,
+                    J: d.orgEvalution,
+                    reasonJ: d.reasonOrgEvalution,
+                    K: d.totalScore,
+                    L: d.shouldPay,
+                    M: d.actualPay,
+                });
+            }
+            this.table.data = data;
+        }
+    },
+    mounted() {
+        let vueSelf = this;
+        this.listTestData();
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+    padding 10px
+</style>
diff --git a/src/components/wgy/Wgy.vue b/src/components/table/Wgy.vue
similarity index 99%
rename from src/components/wgy/Wgy.vue
rename to src/components/table/Wgy.vue
index 1041016..64a95a0 100644
--- a/src/components/wgy/Wgy.vue
+++ b/src/components/table/Wgy.vue
@@ -80,7 +80,7 @@ import WgyReportDay from '../common/WgyReportDay.vue'
 import Scoring from '../common/Scoring.vue';
 
 export default {
-    name: 'Wgy.vue',
+    name: 'Wgy',
     components: {
         NSpace,
         NGrid,
@@ -971,8 +971,8 @@ export default {
                     AF: d.shouldPay,
                     AG: d.actualPay,
                 });
-                this.table.data = data;
             }
+            this.table.data = data;
         }
     },
     computed() {
diff --git a/src/components/table/Wgy3.vue b/src/components/table/Wgy3.vue
new file mode 100644
index 0000000..cab330b
--- /dev/null
+++ b/src/components/table/Wgy3.vue
@@ -0,0 +1,308 @@
+<template>
+    <n-space class="container" vertical>
+        <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 class="body">
+            <n-data-table size="small" :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: 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,
+    NSelect,
+    NRadio,
+    NInput,
+    NButton,
+    NDataTable,
+    NModal,
+} from 'naive-ui';
+import Scoring from '../common/Scoring.vue';
+
+export default {
+    name: 'Wgy3',
+    components: {
+        NSpace,
+        NGrid,
+        NGridItem,
+        NSelect,
+        NRadio,
+        NInput,
+        NButton,
+        NDataTable,
+        NModal,
+
+        Scoring,
+    },
+    data() {
+        return {
+            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' }
+                        ]
+                    }
+                },
+                radio: {
+                    level: {
+                        value: 5,
+                    }
+                },
+                input: {
+                    keywords: ''
+                }
+            },
+            table: {
+                minHeight: 300,
+                maxHeight: 300,
+                scrollX: 900,
+                columns: [
+                    {
+                        align: 'center',
+                        title: '序号',
+                        key: 'A',
+                        keyName: 'key',
+                        fixed: 'left',
+                        width: 60
+                    },
+                    {
+                        align: 'center',
+                        title: '姓名',
+                        key: 'B',
+                        keyName: 'name',
+                        fixed: 'left',
+                        width: 140
+                    },
+                    {
+                        align: 'center',
+                        title: '网格签到巡片情况',
+                        children: [
+                            {
+                                align: 'center',
+                                title: '基础分值',
+                                key: 'C',
+                                keyName: 'signBaseScore',
+                                width: 60
+                            },
+                            {
+                                align: 'center',
+                                title: '不合格人员数',
+                                key: 'E',
+                                keyName: 'signUnPassCount',
+                                width: 60
+                            },
+                            {
+                                align: 'center',
+                                title: '不合格扣分',
+                                key: 'E',
+                                keyName: 'signUnPassScore',
+                                width: 60
+                            },
+                        ]
+                    },
+                    {
+                        align: 'center',
+                        title: '网格案件调度情况',
+                        children: [
+                            {
+                                align: 'center',
+                                title: '基础分值',
+                                key: 'F',
+                                keyName: 'gridBaseScore',
+                                width: 60
+                            },
+                            {
+                                align: 'center',
+                                title: '案件报送数量',
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '不合格人员数',
+                                        key: 'G',
+                                        keyName: 'gridUnPassCount',
+                                        width: 60
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '不合格扣分',
+                                        key: 'H',
+                                        keyName: 'gridUnPassScore',
+                                        width: 60
+                                    },
+                                ]
+                            },
+                            {
+                                align: 'center',
+                                title: '案件受理过程质量',
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '没完成办理流程',
+                                        key: 'I',
+                                        keyName: 'unComplete',
+                                        width: 60
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '不合格扣分',
+                                        key: 'J',
+                                        keyName: 'unReportError',
+                                        width: 60
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '其它情况',
+                                        key: 'K',
+                                        keyName: 'others',
+                                        width: 60
+                                    },
+                                ]
+                            },
+                            {
+                                align: 'center',
+                                title: '网格案件调度情况得分',
+                                key: 'L',
+                                keyName: 'unComplete',
+                                width: 60
+                            },
+                        ]
+                    },
+                    {
+                        align: 'center',
+                        title: '网格工作季度考核',
+                        key: 'M',
+                        keyName: 'quarter',
+                        width: 60,
+                        render(row, index) {
+                        }
+                    },
+                    {
+                        align: 'center',
+                        title: '总得分',
+                        key: 'N',
+                        keyName: 'totalScore',
+                        fixed: 'right',
+                        width: 100,
+                        render(row, index) {
+                            return vueSelf.computeN(row);
+                        }
+                    },
+                    {
+                        align: 'center',
+                        title: '应发绩效工资',
+                        key: 'O',
+                        keyName: 'shouldPay',
+                        fixed: 'right',
+                        width: 100
+                    },
+                    {
+                        align: 'center',
+                        title: '实发绩效工资',
+                        key: 'P',
+                        keyName: 'actualPay',
+                        fixed: 'right',
+                        width: 100,
+                        render(row, index) {
+                            return vueSelf.computeN(row) * row.O / 100;
+                        }
+                    }
+                ],
+                data: []
+            },
+            modal: {
+                scoring: {
+                    show: false,
+                    userName: null,
+                    title: null,
+                    rowKey: null,
+                    rowIndex: null,
+                    score: 0,
+                    reason: '',
+                    minScore: null,
+                    maxScore: null
+                }
+            }
+        }
+    },
+    methods: {
+        // 打分确定
+        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;
+        },
+        computeN(row) {
+            return row.C - row.E + row.L + row.M
+        }
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+    padding 10px
+</style>
\ No newline at end of file
diff --git a/src/components/table/ZfGa.vue b/src/components/table/ZfGa.vue
new file mode 100644
index 0000000..108664b
--- /dev/null
+++ b/src/components/table/ZfGa.vue
@@ -0,0 +1,501 @@
+<template>
+    <n-space class="container" vertical>
+        <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">
+        <zf-ga-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 ZfGaWork from '../common/ZfGaWork.vue';
+
+export default {
+    name: 'ZfGa',
+    components: {
+        NSpace,
+        NGrid,
+        NGridItem,
+        NDataTable,
+        NSelect,
+        NInput,
+        NButton,
+        NModal,
+
+        Scoring,
+        ZfGaWork,
+    },
+    data() {
+        let vueSelf = this;
+        return {
+            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: '巡片签到（100分）',
+                        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: '案件受理数量',
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '办结未验收',
+                                        key: 'D',
+                                        keyName: 'unCheck',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '办结并验收',
+                                        key: 'E',
+                                        keyName: 'checked',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '案件奖励（元）',
+                                        key: 'F',
+                                        keyName: 'reward',
+                                        width: 60,
+                                    }
+                                ]
+                            },
+                            {
+                                align: 'center',
+                                title: '案件受理过程质量凡属下列情况之一经核准予以扣分',
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '未在规定的时限内退单，影响处置时效',
+                                        key: 'G',
+                                        keyName: 'backTimeout',
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0)',
+                                                onClick() {
+                                                    vueSelf.onBackTimeoutClick(row, index)
+                                                }
+                                            }, row.G)
+                                        }
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '自行上报案件未完成办理',
+                                        key: 'H',
+                                        keyName: 'selfUnHandle',
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0)',
+                                                onClick() {
+                                                    vueSelf.onSelfUnHandleClick(row, index)
+                                                }
+                                            }, row.H)
+                                        }
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '未办理案件造成严重影响',
+                                        key: 'I',
+                                        keyName: 'unHandleError',
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0)',
+                                                onClick() {
+                                                    vueSelf.onUnHandleErrorClick(row, index)
+                                                }
+                                            }, row.I)
+                                        }
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '其它情况',
+                                        key: 'J',
+                                        keyName: 'others',
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0)',
+                                                onClick() {
+                                                    vueSelf.onOthersClick(row, index)
+                                                }
+                                            }, row.J)
+                                        }
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                    {
+                        align: 'center',
+                        title: '案件处置实效',
+                        children: [
+                            {
+                                align: 'center',
+                                title: '处理情况',
+                                key: 'K',
+                                keyName: 'handleResult',
+                                width: 60,
+                                render(row, index) {
+                                    return h('a', {
+                                        href: 'javascript:void(0)',
+                                        onClick() {
+                                            vueSelf.onHandleResultClick(row, index)
+                                        }
+                                    }, row.K)
+                                }
+                            },
+                            {
+                                align: 'center',
+                                title: '督察案件结案情况',
+                                key: 'L',
+                                keyName: 'superviseResult',
+                                width: 60,
+                                render(row, index) {
+                                    return h('a', {
+                                        href: 'javascript:void(0)',
+                                        onClick() {
+                                            vueSelf.onSuperviseResultClick(row, index)
+                                        }
+                                    }, row.L)
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        align: 'center',
+                        title: '总得分',
+                        key: 'M',
+                        keyName: 'totalScore',
+                        fixed: 'right',
+                        width: 100,
+                        render(row, index) {
+                            return vueSelf.computeM(row);
+                        }
+                    },
+                    {
+                        align: 'center',
+                        title: '应发绩效工资',
+                        key: 'N',
+                        keyName: 'shouldPay',
+                        fixed: 'right',
+                        width: 100
+                    },
+                    {
+                        align: 'center',
+                        title: '实发绩效工资',
+                        key: 'O',
+                        keyName: 'actualPay',
+                        fixed: 'right',
+                        width: 100,
+                        render(row, index) {
+                            return vueSelf.computeM(row) * row.O / 100;
+                        }
+                    }
+                ],
+                data: []
+            },
+            modal: {
+                sign: {
+                    show: false
+                },
+                scoring: {
+                    show: false,
+                    userName: null,
+                    title: null,
+                    rowKey: null,
+                    rowIndex: null,
+                    score: 0,
+                    reason: '',
+                    minScore: null,
+                    maxScore: null
+                }
+            }
+        }
+    },
+    methods: {
+        // 考勤关闭
+        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;
+        },
+        // 未在规定的时限内退单，影响处置时效 - 
+        onBackTimeoutClick(row, index) {
+            let backTimeout = row.G;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'G';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = backTimeout;
+            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 = '未在规定的时限内退单，影响处置时效';
+        },
+        // 自行上报案件未完成办理 -
+        onSelfUnHandleClick(row, index) {
+            let selfUnHandle = row.H;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'H';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = selfUnHandle;
+            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 = '自行上报案件未完成办理';
+        },
+        // 未办理案件造成严重影响 -
+        onUnHandleErrorClick(row, index) {
+            let unHandleError = row.I;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'I';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = unHandleError;
+            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 = '未办理案件造成严重影响';
+        },
+        // 其它情况 -
+        onOthersClick(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 = null;
+            this.modal.scoring.minScore = null;
+            this.modal.scoring.userName = row.B;
+            this.modal.scoring.title = '其它情况';
+        },
+        // 处理情况 -
+        onHandleResultClick(row, index) {
+            let handleResult = row.K;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'K';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = handleResult;
+            this.modal.scoring.reason = row.reasonK;
+            this.modal.scoring.maxScore = null;
+            this.modal.scoring.minScore = null;
+            this.modal.scoring.userName = row.B;
+            this.modal.scoring.title = '处理情况';
+        },
+        // 督察案件结案情况 -
+        onSuperviseResultClick(row, index) {
+            let superviseResult = row.L;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'L';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = superviseResult;
+            this.modal.scoring.reason = row.reasonL;
+            this.modal.scoring.maxScore = null;
+            this.modal.scoring.minScore = null;
+            this.modal.scoring.userName = row.B;
+            this.modal.scoring.title = '督察案件结案情况';
+        },
+        computeM(row) {
+            return row.C - row.G - row.H - row.I - row.J - row.K - row.L;
+        },
+        listTestData() {
+            let data = [];
+            for (let i = 0; i < 100; i++) {
+                let d = {
+                    userId: 'userId',
+                    key: i + 1,
+                    name: i + 'name',
+                    sign: i,
+                    unCheck: Math.floor(Math.random() * 100),
+                    checked: 30,
+                    reward: 2,
+                    backTimeout: Math.floor(Math.random() * 10),
+                    reasonBackTimeout: '',
+                    selfUnHandle: Math.floor(Math.random() * 10),
+                    reasonSelfUnHandle: '',
+                    unHandleError: Math.floor(Math.random() * 10),
+                    reasonUnHandleError: '',
+                    others: Math.floor(Math.random() * 10),
+                    reasonOthers: '',
+                    handleReasonOthers: Math.floor(Math.random() * 10),
+                    reasonHandleResult: '',
+                    superviseResult: Math.floor(Math.random() * 10),
+                    reasonSuperviseResult: '',
+                    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.unCheck,
+                    E: d.checked,
+                    F: d.reward,
+                    G: d.backTimeout,
+                    reasonG: d.reasonBackTimeout,
+                    H: d.selfUnHandle,
+                    reasonH: d.reasonSelfUnHandle,
+                    I: d.unHandleError,
+                    reasonI: d.reasonUnHandleError,
+                    J: d.others,
+                    reasonJ: d.reasonOthers,
+                    K: d.handleReasonOthers,
+                    reasonJ: d.reasonHandleResult,
+                    L: d.superviseResult,
+                    reasonJ: d.reasonSuperviseResult,
+                    M: d.totalScore,
+                    N: d.shouldPay,
+                    O: d.actualPay,
+                });
+            }
+            this.table.data = data;
+        }
+    },
+    mounted() {
+        let vueSelf = this;
+        vueSelf.listTestData();
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+    padding 10px
+</style>
\ No newline at end of file