2022.9.6

src/views/dashboard/index.vue

@@ -34,6 +34,73 @@
       </div>
     </div>
 
+    <div ref="lxHeader" v-if="statistic.progress">
+      <LxHeader icon="md-apps" text="预算进展统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <div slot="content" />
+        <slot>
+          <div style="width: 100%">
+            <el-card>
+              <div class="progress-card">
+                <div class="progress-card-item">
+                  <div class="progress-card-item__num">{{moneyFormat(statistic.progress.money_total)}}</div>
+                  <div class="progress-card-item__label">合计金额</div>
+                </div>
+                <div class="progress-card-item">
+                  <div class="progress-card-item__num">{{moneyFormat(statistic.progress.use_money_total)}}</div>
+                  <div class="progress-card-item__label">使用金额</div>
+                </div>
+                <div class="progress-card-item">
+                  <div class="progress-card-item__num">{{((statistic.progress.use_money_total/statistic.progress.money_total)*100).toFixed(2)}}%</div>
+                  <div class="progress-card-item__label">进展率</div>
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </slot>
+      </LxHeader>
+    </div>
+
+    <div ref="lxHeader" v-if="statistic.departmentList">
+      <LxHeader icon="md-apps" text="科室进展" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <div slot="content" />
+        <slot>
+          <div style="width: 100%">
+            <el-card>
+              <xy-table :height="180" :list="statistic.departmentList" :table-item="departmentTable">
+                <template v-slot:btns>
+                  <el-table-column :width="80" label="操作" header-align="center" align="center">
+                    <template slot-scope="scope">
+                      <router-link :to="`/statisticalReport/budgetProgress?departmentId=${scope.row.plan_department_id}`">查看</router-link>
+                    </template>
+                  </el-table-column>
+                </template>
+              </xy-table>
+            </el-card>
+          </div>
+        </slot>
+      </LxHeader>
+    </div>
+
+    <div ref="lxHeader" v-if="statistic.typeList">
+      <LxHeader icon="md-apps" text="预算进展" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <div slot="content" />
+        <slot>
+          <div style="width: 100%">
+            <el-card>
+              <xy-table :height="180" :list="statistic.typeList" :table-item="typeTable">
+                <template v-slot:btns>
+                  <el-table-column :width="80" label="操作" header-align="center" align="center">
+                    <template slot-scope="scope">
+                      <router-link :to="`/statisticalReport/budgetProgress?typeId=${scope.row.type}`">查看</router-link>
+                    </template>
+                  </el-table-column>
+                </template>
+              </xy-table>
+            </el-card>
+          </div>
+        </slot>
+      </LxHeader>
+    </div>
     <detailContract ref="detailContract"></detailContract>
   </div>
 </template>
@@ -44,8 +111,8 @@ import LxHeader from '@/components/LxHeader/index.vue'
 import Pagination from '@/components/Pagination'
 import { adminDepartmentList } from '../../api/system/department.js'
 import { adminUserList, getInfo } from '../../api/user.js'
-import {getNotice,readNotice} from "@/api/dashboard/notice"
+import {getNotice,readNotice,statistic} from "@/api/dashboard/notice"
-import {parseTime} from "@/utils/index"
+import {parseTime,moneyFormatter} from "@/utils/index"
 import {Message} from "element-ui";
 export default {
   name: 'Manage',
@@ -54,6 +121,7 @@ export default {
   },
   data() {
     return {
+      statistic:'',
       department_id: [],
       userIds: [],
       list: [],
@@ -72,10 +140,95 @@ export default {
       userList: [],
       formLabelWidth: '200px',
       user: {},
+
+      departmentProgress:[],
+      departmentTable:[
+        {
+          label:'科室',
+          width:220,
+          prop:'name',
+          sortable:false
+        },
+        {
+          label:'合计金额(元)',
+          width: 240,
+          align:'right',
+          sortable:false,
+          prop:'money_total',
+          formatter:(cell,data,value)=>{
+            return moneyFormatter(value)
+          }
+        },
+        {
+          label:'已使用(元)',
+          width: 240,
+          align:'right',
+          sortable:false,
+          prop:'use_money_total',
+          formatter:(cell,data,value)=>{
+            return moneyFormatter(value)
+          }
+        },
+        {
+          label:'进展情况',
+          sortable:false,
+          minWidth: 220,
+          align: 'left',
+          customFn:(row)=>{
+            return (
+              <div>
+                <el-progress percentage={Number(((row.use_money_total/row.money_total)*100||0).toFixed(2))}> </el-progress>
+              </div>
+            )
+          }
+        }
+      ],
+      typeTable:[
+        {
+          label:'预算类别',
+          width:220,
+          prop:'name',
+          sortable:false
+        },
+        {
+          label:'合计金额(元)',
+          width: 240,
+          align:'right',
+          sortable:false,
+          prop:'money_total',
+          formatter:(cell,data,value)=>{
+            return moneyFormatter(value)
+          }
+        },
+        {
+          label:'已使用(元)',
+          width: 240,
+          align:'right',
+          sortable:false,
+          prop:'use_money_total',
+          formatter:(cell,data,value)=>{
+            return moneyFormatter(value)
+          }
+        },
+        {
+          label:'进展情况',
+          sortable:false,
+          minWidth: 220,
+          align: 'left',
+          customFn:(row)=>{
+            return (
+              <div>
+                <el-progress percentage={Number(((row.use_money_total/row.money_total)*100||0).toFixed(2))}> </el-progress>
+              </div>
+            )
+          }
+        }
+      ]
     }
   },
   created() {
-    //this.getList()
+    this.getNotices()
+    this.getStatistic()
 
     getInfo().then(response => {
       console.log(response)
@@ -83,6 +236,12 @@ export default {
     }).catch(error => {})
   },
   methods: {
+    async getStatistic(){
+      const res = await statistic()
+      console.log(res)
+      this.statistic = res
+    },
+
     toContract(row){
       this.$refs['detailContract'].getDetail(row.contract_id)
       this.$refs['detailContract'].isShowDetail = true
@@ -106,15 +265,7 @@ export default {
       this.total = res.total
     },
 
-    departmentChange(v) {
+
-      if (v.length > 0) {
-        adminUserList({department_id: v[v.length - 1], page_size: 9999}).then(r => {
-          this.userList = r.data
-        }).catch(error => {})
-      } else {
-        this.userList = []
-      }
-    },
     filterChildren(data) {
       data.forEach(i => {
         if (i.children && i.children.length > 0) {
@@ -176,18 +327,43 @@ export default {
       }).catch(() => {});
     },
   },
-  mounted() {
+  computed:{
-    this.getNotices()
+    moneyFormat(){
+      return function (price){
+        return moneyFormatter(price)
+      }
+    }
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
-  /deep/ .el-dialog__body{
+  ::v-deep .el-dialog__body{
     padding:8px 20px;
   }
-  /deep/ .el-col-5{
+  ::v-deep .el-col-5{
     width:20%;
   }
+  ::v-deep .el-card__body{
+    padding: 4px 10px !important;
+  }
+  .progress-card{
+    display: flex;
+
+    &-item{
+      text-align: center;
+      flex: 1;
+
+      &__label{
+        font-size:14px;
+      }
+      &__num{
+        font-size: 20px;
+        font-weight: 600;
+
+        padding: 6px 0;
+      }
+    }
+  }
 </style>
 <style lang="scss" scoped>
   .ivu-btn{