完善页面功能

package-lock.json

@@ -14,7 +14,8 @@
         "@vitejs/plugin-vue": "^4.1.0",
         "naive-ui": "^2.34.3",
         "stylus": "^0.59.0",
-        "vite": "^4.3.2"
+        "vite": "^4.3.2",
+        "vue-router": "^4.1.6"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -496,6 +497,12 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
+      "dev": true
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.2.47",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.47.tgz",
@@ -1028,6 +1035,18 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vueuc": {
       "version": "0.4.51",
       "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.51.tgz",
@@ -1319,6 +1338,12 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
+      "dev": true
+    },
     "@vue/reactivity": {
       "version": "3.2.47",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.47.tgz",
@@ -1736,6 +1761,15 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "dev": true,
+      "requires": {
+        "@vue/devtools-api": "^6.4.5"
+      }
+    },
     "vueuc": {
       "version": "0.4.51",
       "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.51.tgz",

package.json

@@ -15,6 +15,7 @@
     "@vitejs/plugin-vue": "^4.1.0",
     "naive-ui": "^2.34.3",
     "stylus": "^0.59.0",
-    "vite": "^4.3.2"
+    "vite": "^4.3.2",
+    "vue-router": "^4.1.6"
   }
 }

src/App.vue

@@ -1,18 +1,46 @@
 <template>
   <n-message-provider>
-    <!-- <wgy /> -->
+    <n-layout>
-    <wgy-3/>
+      <n-layout-header bordered>
-    <zf-ga/>
+        <n-space align="center" style="padding: 10px">
-    <ddy/>
+          <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-message-provider>
 </template>
 
 <script setup>
-import { NMessageProvider } from 'naive-ui';
+import { ref } from 'vue';
-import Wgy from './components/table/Wgy.vue';
+import { useRoute, useRouter } from 'vue-router';
-import Ddy from './components/table/Ddy.vue';
+import { NMessageProvider, NLayout, NLayoutHeader, NLayoutContent, NSpace, NButton} from 'naive-ui';
-import ZfGa from './components/table/ZfGa.vue';
+
-import Wgy3 from './components/table/Wgy3.vue';
+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' });
+}
 </script>
 
 <style scoped></style>

src/components/table/Ddy.vue

@@ -1,5 +1,8 @@
 <template>
     <n-space class="container" vertical>
+        <n-space justify="center">
+            <h1>区级与街道指挥调度中心（调度专管员）网格化工作考核细则（以季度为考核周期）</h1>
+        </n-space>
         <n-space class="search" vertical>
             <n-grid :cols="7" :x-gap="10">
                 <n-grid-item>
@@ -80,6 +83,7 @@ export default {
     data() {
         let vueSelf = this;
         return {
+            
             search: {
                 select: {
                     street: {
@@ -306,7 +310,7 @@ export default {
             }
         }
     },
-        methods: {
+    methods: {
         // 考勤关闭
         onSignCloseClick() {
             this.modal.sign.show = false;
@@ -377,7 +381,7 @@ export default {
             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;
         },
@@ -416,7 +420,7 @@ export default {
                     H: d.timeout,
                     reasonH: d.reasonTimeout,
                     I: d.others,
-                    reasonI: d. reasonOthers,
+                    reasonI: d.reasonOthers,
                     J: d.orgEvalution,
                     reasonJ: d.reasonOrgEvalution,
                     K: d.totalScore,
@@ -425,16 +429,28 @@ export default {
                 });
             }
             this.table.data = data;
+        },
+        resize() {
+            let body = document.body;
+            this.table.minHeight = body.clientHeight - 365;
+            this.table.maxHeight = body.clientHeight - 365;
+            this.table.scrollX = body.clientWidth;
         }
     },
     mounted() {
         let vueSelf = this;
-        this.listTestData();
+        vueSelf.listTestData();
+        vueSelf.resize();
+        window.onresize = this.resize;
     }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
-    padding 10px
+    padding 0 10px
+:deep(.score-plus)
+    background-color yellow
+:deep(.score-minus)
+    background-color red
 </style>

src/components/table/Wgy.vue

@@ -1,5 +1,8 @@
 <template>
     <n-space class="container" vertical>
+        <n-space justify="center">
+            <h1>街道社区4-5级网格工作考核细则（以季度为考核周期）</h1>
+        </n-space>
         <n-space class="search" vertical>
             <n-grid :cols="7" :x-gap="10">
                 <n-grid-item>
@@ -22,16 +25,8 @@
                         :options="search.select.month.options" :clearable="true" />
                 </n-grid-item>
                 <n-grid-item>
-                    <n-space style="height: 100%;" align="center">
+                    <n-select placeholder="请选择网格员级别" v-model:value="search.select.wgy.value"
-                        <n-radio :checked="search.radio.level.value === 4" value="4"
+                        :options="search.select.wgy.options" :clearable="true" />
-                            @change="onSearchRadioLevelValueChange">
-                            4级网格员
-                        </n-radio>
-                        <n-radio :checked="search.radio.level.value === 5" value="5"
-                            @change="onSearchRadioLevelValueChange">
-                            5级网格员
-                        </n-radio>
-                    </n-space>
                 </n-grid-item>
                 <n-grid-item>
                     <n-space>
@@ -124,11 +119,13 @@ export default {
                         options: [
                             { label: '1月', value: '1' }
                         ]
-                    }
+                    },
-                },
+                    wgy: {
-                radio: {
+                        value: 4,
-                    level: {
+                        options: [
-                        value: 5,
+                            { label: '5级网格员', value: '5' },
+                            { label: '4级网格员', value: '4' }
+                        ]
                     }
                 },
                 input: {
@@ -973,26 +970,28 @@ export default {
                 });
             }
             this.table.data = data;
+        },
+        resize() {
+            let body = document.body;
+            this.table.minHeight = body.clientHeight - 408;
+            this.table.maxHeight = body.clientHeight - 408;
+            this.table.scrollX = body.clientWidth;
         }
     },
     computed() {
     },
     mounted() {
         let vueSelf = this;
-        this.listTestData();
+        vueSelf.listTestData();
-        setTimeout(() => {
+        vueSelf.resize();
-            vueSelf.table.data[0].C = 300
+        window.onresize = this.resize    
-        }, 1000)
     }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
-    .search
+    padding 0 10px
-        padding 10px 10px 0 10px
-    .body
-        padding 0 10px 10px 10px
 :deep(.score-plus)
     background-color yellow
 :deep(.score-minus)

src/components/table/Wgy3.vue

@@ -1,4 +1,7 @@
 <template>
+    <n-space justify="center">
+        <h1>级网格长网格化工作考核细则（以季度为考核周期）</h1>
+    </n-space>
     <n-space class="container" vertical>
         <n-space class="search" vertical>
             <n-grid :cols="7" :x-gap="10">
@@ -75,6 +78,7 @@ export default {
         Scoring,
     },
     data() {
+        let vueSelf = this;
         return {
             search: {
                 select: {
@@ -204,17 +208,33 @@ export default {
                                     },
                                     {
                                         align: 'center',
-                                        title: '不合格扣分',
+                                        title: '未上报案件造成严重影响',
                                         key: 'J',
                                         keyName: 'unReportError',
-                                        width: 60
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0);',
+                                                onClick() {
+                                                    vueSelf.onUnReportErrorClick(row, index);
+                                                }
+                                            }, row.J);
+                                        }
                                     },
                                     {
                                         align: 'center',
                                         title: '其它情况',
                                         key: 'K',
                                         keyName: 'others',
-                                        width: 60
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0);',
+                                                onClick() {
+                                                    vueSelf.onOthersClick(row, index);
+                                                }
+                                            }, row.K);
+                                        }
                                     },
                                 ]
                             },
@@ -234,6 +254,12 @@ export default {
                         keyName: 'quarter',
                         width: 60,
                         render(row, index) {
+                            return h('a', {
+                                href: 'javascript:void(0);',
+                                onClick() {
+                                    vueSelf.onQuarterClick(row, index);
+                                }
+                            }, row.M);
                         }
                     },
                     {
@@ -295,14 +321,118 @@ export default {
         onScroingCloseClick() {
             this.modal.scoring.show = false;
         },
+        // 未上报案件造成严重影响 - 
+        onUnReportErrorClick(row, index) {
+            let unReportError = row.J;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'J';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = unReportError;
+            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 = '未上报案件造成严重影响';
+        },
+        // 其它情况 - 
+        onOthersClick(row, index) {
+            let others = row.K;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'K';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = others;
+            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 = '其它情况';
+        },
+        // 网格工作季度考核 + 
+        onQuarterClick(row, index) {
+            let quarter = row.M;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'M';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = quarter;
+            this.modal.scoring.reason = row.reasonM;
+            this.modal.scoring.maxScore = 30;
+            this.modal.scoring.minScore = 0;
+            this.modal.scoring.userName = row.B;
+            this.modal.scoring.title = '网格工作季度考核';
+        },
         computeN(row) {
             return row.C - row.E + row.L + row.M
+        },
+        listTestData() {
+            let data = [];
+            for (let i = 0; i < 100; i++) {
+                let d = {
+                    userId: 'userId',
+                    key: i + 1,
+                    name: i + 'name',
+                    signBaseScore: i,
+                    signUnPassCount: Math.floor(Math.random() * 100),
+                    signUnPassScore: 30,
+                    gridBaseScore: 2,
+                    gridUnPassCount: Math.floor(Math.random() * 10),
+                    gridUnPassScore: Math.floor(Math.random() * 10),
+                    unComplete: Math.floor(Math.random() * 10),
+                    unReportError: Math.floor(Math.random() * 10),
+                    reasonUnReportError: '',
+                    others: Math.floor(Math.random() * 10),
+                    reasonOthers: '',
+                    unComplete: Math.floor(Math.random() * 10),
+                    reasonUnComplete: '',
+                    quarter: Math.floor(Math.random() * 10),
+                    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.signBaseScore,
+                    D: d.signUnPassCount,
+                    E: d.signUnPassScore,
+                    F: d.gridBaseScore,
+                    G: d.gridUnPassCount,
+                    H: d.gridUnPassScore,
+                    I: d.unComplete,
+                    J: d.unReportError,
+                    reasonJ: d.reasonUnReportError,
+                    K: d.others,
+                    reasonJ: d.reasonOthers,
+                    L: d.unComplete,
+                    reasonJ: d.reasonUnComplete,
+                    M: d.quarter,
+                    N: d.totalScore,
+                    O: d.shouldPay,
+                    P: d.actualPay,
+                });
+            }
+            this.table.data = data;
+        },
+        resize() {
+            let body = document.body;
+            this.table.minHeight = body.clientHeight - 355;
+            this.table.maxHeight = body.clientHeight - 355;
+            this.table.scrollX = body.clientWidth;
         }
+    },
+    mounted() {
+        let vueSelf = this;
+        vueSelf.listTestData();
+        vueSelf.resize();
+        window.onresize = this.resize  
     }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
-    padding 10px
+    padding 0 10px
+:deep(.score-plus)
+    background-color yellow
+:deep(.score-minus)
+    background-color red
 </style>

src/components/table/ZfGa.vue

@@ -1,4 +1,7 @@
 <template>
+    <n-space justify="center">
+        <h1>执法局、公安分局网格化工作考核细则（以季度为考核周期）</h1>
+    </n-space>
     <n-space class="container" vertical>
         <n-space class="search" vertical>
             <n-grid :cols="7" :x-gap="10">
@@ -486,16 +489,28 @@ export default {
                 });
             }
             this.table.data = data;
+        },
+        resize() {
+            let body = document.body;
+            this.table.minHeight = body.clientHeight - 379;
+            this.table.maxHeight = body.clientHeight - 379;
+            this.table.scrollX = body.clientWidth;
         }
     },
     mounted() {
         let vueSelf = this;
         vueSelf.listTestData();
+        vueSelf.resize();
+        window.onresize = this.resize  
     }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
-    padding 10px
+    padding 0 10px
+:deep(.score-plus)
+    background-color yellow
+:deep(.score-minus)
+    background-color red
 </style>

src/components/table/Znbm.vue

@@ -0,0 +1,460 @@
+<template>
+    <n-space justify="center">
+        <h1>其他职能部门网格化工作考核细则（以季度为考核周期）</h1>
+    </n-space>
+    <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: 'Znbm',
+    components: {
+        NSpace,
+        NGrid,
+        NGridItem,
+        NSelect,
+        NRadio,
+        NInput,
+        NButton,
+        NDataTable,
+        NModal,
+
+        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' }
+                        ]
+                    }
+                },
+                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: '案件办理得分与奖励金额',
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '案件总数',
+                                        key: 'C',
+                                        keyName: 'caseCount',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '办结并验收',
+                                        key: 'D',
+                                        keyName: 'handleCheck',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '办结未验收',
+                                        key: 'E',
+                                        keyName: 'handleUnCheck',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '案件积分奖励（元）',
+                                        key: 'F',
+                                        keyName: 'reward',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '得分',
+                                        key: 'G',
+                                        keyName: 'score',
+                                        width: 60,
+                                    },
+                                ]
+                            },
+                            {
+                                align: 'center',
+                                title: '案件受理数量及过程质量',
+                                children: [
+                                    {
+                                        align: 'center',
+                                        title: '未在规定的时限内退单，影响处置时效',
+                                        key: 'H',
+                                        keyName: 'unBackError',
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0);',
+                                                onClick() {
+                                                    vueSelf.onUnBackErrorClick(row, index);
+                                                }
+                                            }, row.H);
+                                        }
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '自行上报案件没完成',
+                                        key: 'I',
+                                        keyName: 'selfReportUnComplete',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '自行上报案件没完成扣分',
+                                        key: 'J',
+                                        keyName: 'selfReportUnCompleteDeduct',
+                                        width: 60,
+                                    },
+                                    {
+                                        align: 'center',
+                                        title: '其他情况',
+                                        key: 'K',
+                                        keyName: 'others',
+                                        width: 60,
+                                        render(row, index) {
+                                            return h('a', {
+                                                href: 'javascript:void(0);',
+                                                onClick() {
+                                                    vueSelf.onOthersClick(row, index);
+                                                }
+                                            }, row.K);
+                                        }
+                                    },
+                                ]
+                            },
+                        ]
+                    },
+                    {
+                        align: 'center',
+                        title: '案件处置实效',
+                        children: [
+                            {
+                                align: 'center',
+                                title: '处理情况',
+                                key: 'L',
+                                keyName: 'handleResult',
+                                width: 60,
+                                render(row, index) {
+                                    return h('a', {
+                                        href: 'javascript:void(0);',
+                                        onClick() {
+                                            vueSelf.onHandleResultClick(row, index);
+                                        }
+                                    }, row.L);
+                                }
+                            },
+                            {
+                                align: 'center',
+                                title: '督察案件',
+                                key: 'M',
+                                keyName: 'superviseResult',
+                                width: 60,
+                                render(row, index) {
+                                    return h('a', {
+                                        href: 'javascript:void(0);',
+                                        onClick() {
+                                            vueSelf.onSuperviseResultClick(row, index);
+                                        }
+                                    }, row.M);
+                                }
+                            },
+                        ]
+                    },
+                    {
+                        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;
+        },
+        // 未在规定的时限内退单，影响处置时效 - 
+        onUnBackErrorClick(row, index) {
+            let unBackError = row.H;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'J';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = unBackError;
+            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 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 = '自行上报案件没完成扣分';
+        },
+        // 处理情况 - 
+        onHandleResultClick(row, index) {
+            let others = row.L;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'L';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = others;
+            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 = '处理情况';
+        },
+        // 督察案件 - 
+        onSuperviseResultClick(row, index) {
+            let superviseResult = row.M;
+            this.modal.scoring.show = true;
+            this.modal.scoring.rowKey = 'M';
+            this.modal.scoring.rowIndex = index;
+            this.modal.scoring.score = superviseResult;
+            this.modal.scoring.reason = row.reasonM;
+            this.modal.scoring.maxScore = null;
+            this.modal.scoring.minScore = null;
+            this.modal.scoring.userName = row.B;
+            this.modal.scoring.title = '督察案件';
+        },
+        computeN(row) {
+            return row.G - row.H - row.J - row.K + row.L + row.M;
+        },
+        listTestData() {
+            let data = [];
+            for (let i = 0; i < 100; i++) {
+                let d = {
+                    userId: 'userId',
+                    key: i + 1,
+                    name: i + 'name',
+                    caseCount: i,
+                    handleCheck: Math.floor(Math.random() * 100),
+                    handleUnCheck: 30,
+                    reward: 2,
+                    unBackError: Math.floor(Math.random() * 10),
+                    reasonUnBackError: '',
+                    selfReportUnComplete: Math.floor(Math.random() * 10),
+                    selfReportUnCompleteDeduct: Math.floor(Math.random() * 10),
+                    others: Math.floor(Math.random() * 10),
+                    reasonOthers: '',
+                    handleResult: 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.caseCount,
+                    D: d.handleCheck,
+                    E: d.handleUnCheck,
+                    F: d.reward,
+                    G: d.unBackError,
+                    reasonG: d.reasonUnBackError,
+                    H: d.selfReportUnComplete,
+                    I: d.selfReportUnCompleteDeduct,
+                    J: d.others,
+                    reasonJ: d.reasonOthers,
+                    K: d.handleResult,
+                    reasonJ: d.reasonHandleResult,
+                    L: d.superviseResult,
+                    reasonJ: d.reasonSuperviseResult,
+                    M: d.superviseResult,
+                    reasonM: d.reasonSuperviseResult,
+                    N: d.totalScore,
+                    O: d.shouldPay,
+                    P: d.actualPay,
+                });
+            }
+            this.table.data = data;
+        },
+        resize() {
+            let body = document.body;
+            this.table.minHeight = body.clientHeight - 378;
+            this.table.maxHeight = body.clientHeight - 378;
+            this.table.scrollX = body.clientWidth;
+        }
+    },
+    mounted() {
+        let vueSelf = this;
+        vueSelf.listTestData();
+        vueSelf.resize();
+        window.onresize = this.resize  
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+    padding 0 10px
+:deep(.score-plus)
+    background-color yellow
+:deep(.score-minus)
+    background-color red
+</style>

src/main.js

@@ -1,5 +1,25 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import './style.css'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+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';
+import Znbm from './components/table/Znbm.vue';
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: [
+        { name: 'wgy', path: '/', component: Wgy },
+        { name: 'ddy', path: '/ddy', component: Ddy },
+        { name: 'zfga', path: '/zfga', component: ZfGa },
+        { name: 'wgy3', path: '/wgy3', component: Wgy3 },
+        { name: 'znbm', path: '/znbm', component: Znbm },
+    ]
+});
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');