From 82625e933c842c8ab3899e4aab83c9e1804f4ce4 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Tue, 31 Dec 2024 17:09:17 +0800
Subject: [PATCH] up

---
 src/api/home/index.js                         |  16 +
 src/views/dashboard/components/PanelGroup.vue |  15 +-
 src/views/dashboard/index.vue                 | 497 ++++++++++++++----
 src/views/record/index.vue                    |   2 +-
 src/views/report/components/addYear.vue       |   2 +-
 src/views/report/components/showFill.vue      |  21 +-
 vue.config.js                                 |   2 +-
 7 files changed, 438 insertions(+), 117 deletions(-)

diff --git a/src/api/home/index.js b/src/api/home/index.js
index 0544a72..017ab85 100644
--- a/src/api/home/index.js
+++ b/src/api/home/index.js
@@ -7,3 +7,19 @@ export function home(params){
     params
   })
 }
+
+export function yearChart(params){
+  return request({
+    method:'get',
+    url:'/api/fill-datas-total-chart',
+    params
+  })
+}
+
+export function fillChart(params){
+  return request({
+    method:'get',
+    url:'/api/fill-datas-chart',
+    params
+  })
+}
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index f9b4e19..4fe4e3f 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="boxlist">
-      <div class="box box1">
+      <!-- <div class="box box1">
         <div class="boxtitle">
           <span>档案统计</span>
           <i class="el-icon-data-line statIcon"></i>
@@ -51,7 +51,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="box box5" @click="toUrl(2)">
         <div class="boxtitle">
           <span>预警提醒</span>
@@ -101,9 +101,9 @@
       totaldata: {
         type: Object,
         default: {
-          recordsTotal:0,
-          organizesTotal:0,
-          areasTotal:0,
+          // recordsTotal:0,
+          // organizesTotal:0,
+          // areasTotal:0,
           status1Total:0,
           dateTotal:0
         }
@@ -135,7 +135,7 @@
 <style lang="scss" scoped>
   .boxlist {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
   }
 
   .statIcon {
@@ -166,7 +166,8 @@
 
   .box {
     position: relative;
-    width: 19%;
+    width: 30%;
+    margin:0 5%;
     // margin-left: 0.5%;
     // margin-right: 0.5%;
     margin-bottom: 10px;
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 73817fc..43571bc 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -6,13 +6,99 @@
         <PanelGroup :totaldata="list"></PanelGroup>
       </el-col>
 
-      <el-col :span="12" class="chartSize">
-        <div style="padding:10px;color:#b3241d;font-size:18px">月度上传档案统计</div>
-        <myecharts :width="'100%'" :height="'300px'" :data="overall_month_data"></myecharts>
+      <el-col :span="24" class="chartSize">
+        <div class="search">
+          <div class="title">月度业务统计</div>
+          <div class="search-wrap">
+            <div>
+              <el-date-picker @change="getFillChart" v-model="monthSelect.year" value-format="yyyy" type="year"
+                placeholder="选择年">
+              </el-date-picker>
+            </div>
+            <div>
+              <el-select style="width:100%" @change="changeBussiness" v-model="monthSelect.business_id"
+                placeholder="请选择业务">
+                <el-option v-for="item in list_business" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+            <div>
+              <el-select style="width:100%" @change="changeArea" v-model="monthSelect.area_id" placeholder="请选择区域">
+                <el-option v-for="item in list_areas" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+            <div>
+              <el-select style="width:100%" @change="getFillChart" v-model="monthSelect.business_type_id"
+                placeholder="请选择业务类别">
+                <el-option v-for="item in list_type" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+
+          </div>
+        </div>
+        <myecharts :width="'100%'" :height="'400px'" :data="overall_month_data"></myecharts>
       </el-col>
-      <el-col :span="12" class="chartSize">
-        <div style="padding:10px;color:#b3241d;font-size:18px">组织档案统计</div>
-        <myecharts :width="'100%'" :height="'300px'" :data="overall_originze_data"></myecharts>
+      <el-col :span="24" class="chartSize">
+        <div class="search">
+          <div class="title">年度业务统计</div>
+          <div class="search-wrap">
+            <div>
+              <el-date-picker @change="getYearChart" v-model="yearSelect.year" value-format="yyyy" type="year"
+                placeholder="选择年">
+              </el-date-picker>
+            </div>
+            <div>
+              <el-select style="width:100%" @change="getYearChart" v-model="yearSelect.area_id" placeholder="请选择区域">
+                <el-option v-for="item in all_areas" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+
+          </div>
+        </div>
+        <div class="yearData">
+          <div class="yearData-item" v-for="item in yearsArr">
+            <el-descriptions :title="item.name" direction="vertical" :column="1" border>
+
+              <el-descriptions-item label="年度预算">
+                <div v-if="item.budgets.length<1" style="text-align: center;">暂无数据</div>
+                <el-descriptions :column="2" v-else border v-for="budget in item.budgets">
+                  <el-descriptions-item label="年度总预算" :span="2">
+                    {{budget.all_year}}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="第一季度预算">
+                    {{budget.quarter_1}}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="第二季度预算">
+                    {{budget.quarter_2}}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="第三季度预算">
+                    {{budget.quarter_3}}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="第四季度预算">
+                    {{budget.quarter_4}}
+                  </el-descriptions-item>
+                </el-descriptions>
+
+              </el-descriptions-item>
+              <el-descriptions-item label="业务数据">
+
+                <div v-if="item.list.length<1" style="text-align: center;">暂无数据</div>
+                <el-descriptions :column="1" border v-else>
+                  <el-descriptions-item v-for="li in item.list" :label="li.name">
+                    {{li.total}}
+                  </el-descriptions-item>
+                </el-descriptions>
+
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+
+        </div>
+        <!-- <myecharts :width="'100%'" :height="'300px'" :data="overall_year_data"></myecharts> -->
       </el-col>
     </el-row>
 
@@ -23,10 +109,12 @@
   import myecharts from '@/components/myecharts';
   import PanelGroup from './components/PanelGroup';
   import {
-    home
-  } from "@/api/home"
-  import {
-    index
+    home,
+    yearChart,
+    fillChart
+  } from "@/api/home"
+  import {
+    index
   } from "@/api/system/baseForm.js"
   export default {
     components: {
@@ -36,121 +124,300 @@
     data() {
       return {
         list: {
-          recordsTotal: 0,
-          organizesTotal: 0,
-          areasTotal: 0,
-          status1Total:0,
-          dateTotal:0
-        },
-        nowDate:'',
+          // recordsTotal: 0,
+          // organizesTotal: 0,
+          // areasTotal: 0,
+          status1Total: 0,
+          dateTotal: 0
+        },
+        nowDate: '',
+        // 月度统计
+        list_areas: [],
+        list_business: [],
+        list_type: [],
+        monthSelect: {
+          year: '',
+          business_id: '',
+          business_type_id: '',
+          area_id: ''
+        },
         overall_month_data: {},
-        overall_originze_data: {}
+        // 年度统计
+        yearSelect: {
+          year: '',
+          area_id: ''
+        },
+        yearsArr: [],
+        yearList: {},
+        all_areas: [],
+        overall_year_data: {},
+        monthArr: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+
       }
     },
     watch: {
 
     },
     created() {
-      this.listHome()
-      this.init()
-      this.getList()
-      this.getStatusList()
+      this.monthSelect.year = this.$moment(new Date).format("YYYY")
+      this.yearSelect.year = this.$moment(new Date).format("YYYY")
+      this.init()
+      this.getRecords()
+      this.getMonthList()
+      this.getYearList()
     },
     mounted() {
 
     },
-    methods: {
-      // 获取 预警
-      async getList() {
-        // this.nowDate = this.$moment().format("YYYY-MM-DD")
-        this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
-        this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
-        // console.log("this.nowDate",this.nowDate,this.startDate)
-        const res = await index({
-          page_size: 9999,
-          page: 1,
-          table_name: 'records',
-          is_auth: 1,
-          // catalogs_id: '',
-          // records_status:1
-          filter:[{
-            key:'status',
-            op:'eq',
-            value:0
-          },{
-            key:'end_date',
-            op:'range',
-            value:[this.startDate,this.nowDate]
-          }]
-        })
-        this.list.dateTotal = res.total
-      },
-      async getStatusList() {
-        // this.nowDate = this.$moment().format("YYYY-MM-DD")
-        this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
-        this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
-        // console.log("this.nowDate",this.nowDate,this.startDate)
-        const res = await index({
-          page_size: 9999,
-          page: 1,
-          table_name: 'records',
-          is_auth: 1,
-          // catalogs_id: '',
-          // records_status:1
-          filter:[{
-            key:'status',
-            op:'eq',
-            value:1
-          }]
-        })
-        this.list.status1Total = res.total
+    methods: {
+      // 获取 预警
+      async getRecords() {
+        await this.getList()
+        await this.getStatusList()
       },
-      async listHome() {
-        const res = await home()
-        this.list.recordsTotal = res?.recordsTotal
-        this.list.organizesTotal = res?.organizesTotal
-        this.list.areasTotal = res?.areasTotal
-        let xMonth = []
-        let dMonth = []
-        res.list.map(item => {
-          xMonth.push(item.month)
-          dMonth.push(item.count)
+      async getList() {
+        this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
+        this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
+        const res = await index({
+          page_size: 9999,
+          page: 1,
+          table_name: 'records',
+          is_auth: 1,
+          filter: [{
+            key: 'status',
+            op: 'eq',
+            value: 0
+          }, {
+            key: 'end_date',
+            op: 'range',
+            value: [this.startDate, this.nowDate]
+          }]
         })
-        this.overall_month_data.x = xMonth
-        this.overall_month_data.list[0].data = dMonth
-        let oData = []
-        res.organizesList.map(o => {
-          oData.push({
-            value: o.total,
-            name: o.name
+        this.list.dateTotal = res.total
+      },
+      async getStatusList() {
+        this.nowDate = this.$moment().add(1, 'months').format('YYYY-MM-DD')
+        this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
+        const res = await index({
+          page_size: 9999,
+          page: 1,
+          table_name: 'records',
+          is_auth: 1,
+          filter: [{
+            key: 'status',
+            op: 'eq',
+            value: 1
+          }]
+        })
+        this.list.status1Total = res.total
+      },
+      // 获取 月度图表 相关
+      // 获取 业务
+      changeBussiness(e) {
+        this.list_business.map(item => {
+          if (e === item.id) {
+            this.list_areas = item.area_ids_details
+            this.monthSelect.area_id = this.list_areas[0].id
+            this.list_type = item.id_business_types_business_id_relation.filter(item => {
+              return item.area_id == this.monthSelect.area_id
+            })
+
+            this.monthSelect.business_type_id = this.list_type[0].id
+            this.getFillChart()
+          }
+        })
+      },
+      changeArea(e) {
+        this.list_business.map(item => {
+          if (this.monthSelect.business_id === item.id) {
+            this.list_type = item.id_business_types_business_id_relation.filter(item => {
+              return item.area_id == e
+            })
+            this.monthSelect.business_type_id = this.list_type[0].id
+            this.getFillChart()
+          }
+        })
+      },
+      async getMonthList() {
+        await this.getBusinessList()
+        await this.getFillChart()
+      },
+      async getBusinessList() {
+        const res = await index({
+          page_size: 9999,
+          page: 1,
+          table_name: 'businesses',
+          json_data_fields: ['area_ids'],
+        })
+        this.list_business = res.data
+        // 初始化赋值  获取月度统计
+        if (res.data.length > 0) {
+          this.monthSelect.business_id = res.data[0].id
+          this.list_areas = res.data[0].area_ids_details
+          this.monthSelect.area_id = this.list_areas[0].id
+          this.list_type = res.data[0].id_business_types_business_id_relation.filter(item => {
+            return item.area_id == this.monthSelect.area_id
           })
+
+          this.monthSelect.business_type_id = this.list_type[0].id
+        }
+
+      },
+      async getFillChart() {
+        // const res1 = await yearChart()
+        const res = await fillChart({
+          business_id: this.monthSelect.business_id,
+          year: this.monthSelect.year,
+          business_type_id: this.monthSelect.business_type_id,
+          area_id: this.monthSelect.area_id
         })
-        this.overall_originze_data.list[0].data = oData
+        let xMonth = this.monthArr
+        let dMonth = this.getMonthArr(res.list)
+        this.overall_month_data.x = xMonth
+        this.overall_month_data.list = dMonth
       },
+      // 月度数据根据类别 归类
+      getMonthArr(list) {
+        // 定义正确的月份顺序
+        const monthsOrder = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+        // 初始化归类对象
+        const categorizedData = {};
+        // 按照定义的顺序遍历 list 对象
+        monthsOrder.forEach(month => {
+          if (list[month]) {
+            list[month].forEach(item => {
+              const {
+                name,
+                business_data_id,
+                total
+              } = item;
+              if (!categorizedData[business_data_id]) {
+                categorizedData[business_data_id] = {
+                  name,
+                  business_data_id,
+                  type: 'bar',
+                  barGap: '0%',
+                    // barWidth: '30%', // 设置柱子粗细
+
+                  data: Array(12).fill(0), // 初始化长度为12且值全为0的数组
+                  label: {
+                    show: true,
+                    position: 'top',
+                    color: "#333",
+                    formatter: function(para) {
+                      console.log(para)
+
+                      if (para.value > 0) {
+                        if (para.seriesName.includes('费用') || para.seriesName.includes('补贴')) {
+                          return para.value + '万元'
+                        } else {
+                          return para.value
+                        }
+
+                      } else {
+                        return ''
+                      }
+                    }
+                  },
+                };
+              }
+              // 将 total 添加到对应位置
+              let last_total = total
+              if (name.includes('费用') || name.includes('补贴')) {
+                last_total = total / 10000
+              }
+              categorizedData[business_data_id].data[parseInt(month) - 1] = last_total;
+            });
+          }
+        });
+        // 构建最终结果
+        const result = Object.values(categorizedData);
+        return result
+      },
+      // 获取年度统计
+      async getYearList() {
+        await this.getAreas()
+        await this.getYearChart()
+      },
+      async getAreas() {
+        const res = await index({
+          page_size: 999,
+          page: 1,
+          table_name: 'areas',
+          sort_type: 'ASC',
+          sort_name: 'sort',
+        })
+        this.all_areas = res.data
+        this.yearSelect.area_id = this.all_areas[0].id
+      },
+      async getYearChart() {
+        const res = await yearChart({
+          year: this.yearSelect.year,
+          area_id: this.yearSelect.area_id
+        })
+        // this.yearList = res.list
+        // this.yearBudgets = res.budgets
+        this.yearsArr = this.getYearObj(res.list, res.budgets)
+        console.log("getYearObj", this.getYearObj(res.list, res.budgets))
+        // let xMonth = this.monthArr
+        // let dMonth = this.getMonthArr(res.list)
+        // this.overall_month_data.x = xMonth
+        // this.overall_month_data.list = dMonth
+      },
+      getYearObj(list, budgets) {
+        let flatBudgets = [].concat(...budgets);
+        let yearObjs = [];
+        for (let name in list) {
+          if (list.hasOwnProperty(name)) {
+            let yearObj = {
+              name: name,
+              budgets: [],
+              list: list[name]
+            };
+            let matchedBudgets = flatBudgets.filter(budget =>
+              list[name].some(item => item.business_id === budget.business_id)
+            );
+            yearObj.budgets = matchedBudgets;
+            yearObjs.push(yearObj);
+          }
+        }
+        return yearObjs
+      },
+
+
+
+      // 初始化图表
       init() {
         this.overall_month_data = {
           xShow: true,
           yShow: true,
-          rotate: 20,
+          // rotate: 20,
           // formatter:function(params){
           //   return that.chartFomatter(params)
           // },
           xAxis: {
             axisLabel: {
               show: true,
-              rotate: 35, //35度角倾斜显示
+              // rotate: 35, //35度角倾斜显示
             },
           },
+          formatter: function(params) {
+            let result = `${params[0].name}<br/>`;
+            params.forEach(function(item) {
+              // item 是每一个系列的数据
+              const seriesName = item.seriesName; // 系列名称
+              const value = item.value; // 数据值
+              const marker = item.marker; // 标志图形
+              const unit = item.seriesName.includes('费用') || item.seriesName.includes('补贴') ? '万元' : ''
 
+              result += `${marker}${seriesName}: ${value}${unit}<br/>`;
+            });
+            return result;
+          },
           x: [],
-          list: [{
-            name: "上传数",
-            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-            type: 'bar',
-            barGap: '0%',
-          }]
+          list: []
         }
-        this.overall_originze_data = {
+        this.overall_year_data = {
           trigger: 'item',
           xShow: false,
           yShow: false,
@@ -161,7 +428,7 @@
             // center:['20%','20%'],
             data: [],
             label: {
-              show: false,
+              show: true,
               position: 'center'
             },
           }]
@@ -180,9 +447,47 @@
     }
 
     .chartSize {
-      width: calc(50% - 20px) !important;
+      width: calc(100% - 20px) !important;
       margin: 10px !important;
       background: #fff;
+
+      .search {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 20px;
+
+        .title {
+          padding: 10px;
+          color: #b3241d;
+          font-size: 18px
+        }
+
+        &-wrap {
+          display: flex;
+          align-items: center;
+
+          &>div {
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+
+    .yearData {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      min-height: 350px;
+      margin: 20px;
+
+      &-item {
+        // width: 30%;
+        flex-basis: 30%;
+        margin-right: 2%;
+        margin-bottom: 20px;
+      }
     }
   }
 </style>
diff --git a/src/views/record/index.vue b/src/views/record/index.vue
index 33dde23..74b0df9 100644
--- a/src/views/record/index.vue
+++ b/src/views/record/index.vue
@@ -561,7 +561,7 @@
 
       dbclick(row, column, cell, event){
         console.log("row",row)
-        this.editIndex("editor",row.row.id)
+        this.showIndex("show",row.row.id)
       },
       editIndex(type, id) {
         if (type == 'editor') {
diff --git a/src/views/report/components/addYear.vue b/src/views/report/components/addYear.vue
index bf14e9e..dfa23c0 100644
--- a/src/views/report/components/addYear.vue
+++ b/src/views/report/components/addYear.vue
@@ -214,7 +214,7 @@
             business_id: '',
             area_id: '',
             year: '',
-            all_year: '',
+            all_year: 0,
             quarter_1:0,
             quarter_2:0,
             quarter_3:0,
diff --git a/src/views/report/components/showFill.vue b/src/views/report/components/showFill.vue
index fa628a9..18de807 100644
--- a/src/views/report/components/showFill.vue
+++ b/src/views/report/components/showFill.vue
@@ -32,7 +32,7 @@
                 年度预算
               </template>
               <div>
-                <xy-table :list="year_datas" :isPage="false" :height="150"
+                <xy-table :list="year_datas" style="width:900px;margin:0 auto" :isPage="false" :height="150"
                   :table-item="year_datas_item">
                   <template v-slot:btns>
                     <div></div>
@@ -45,7 +45,7 @@
                 数据填报
               </template>
               <div>
-                <xy-table :list="fill_datas" :isPage="false" :height="550"
+                <xy-table style="width:900px;margin:0 auto" :list="fill_datas" :isPage="false" :height="550"
                   :table-item="fill_datas_item">
                   <template v-slot:btns>
                     <div></div>
@@ -80,7 +80,8 @@
         year_datas_item: [{
           prop: 'year',
           label: '年份',
-          align: 'center',
+          align: 'center',
+          width: 150
           // width: 100
         }, {
           prop: 'all_year',
@@ -109,24 +110,22 @@
           width: 150
         }],
         fill_datas:[],
-        fill_datas_item: [{
-          type: 'index',
-          width: 50,
-        }, {
+        fill_datas_item: [ {
           prop: 'business_type.name',
           label: '填报类别',
-          align: 'left',
-          // width: 620
+          align: 'left',
+          // width:
+          width: 300
         }, {
           prop: 'business_data.name',
           label: '填报数据',
           align: 'left',
-          width: 320
+          width: 300
         }, {
           prop: 'value',
           label: '填报值',
           align: 'left',
-          width: 320
+          width: 300
         }],
         form: {},
       }
diff --git a/vue.config.js b/vue.config.js
index 5201527..c82404e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -25,7 +25,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
-  outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin',
+  outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin_test',
   assetsDir: 'static',
   css: {
     loaderOptions: { // 向 CSS 相关的 loader 传递选项