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

src/App.vue

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

src/components/Index.vue

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

src/components/common/Scoring.vue

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

src/components/common/WgyWork.vue

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

src/components/table/Wgy.vue

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