修改教育统计报表

src/components/TopBar.vue

@@ -48,7 +48,7 @@ export default {
 
 <style scoped lang="scss">
 .top-bar{
-  height:300px;
+  height: 300px;
   width: 100%;
   background: url("../assets/img/banner.png") no-repeat center;
   background-size: 100% 100%;

src/main.js

@@ -9,6 +9,10 @@ import Vant from 'vant';
 import 'vant/lib/index.css';
 import router from './router'
 import store from './store'
+// 引入样式
+import "vue-easytable/libs/theme-default/index.css";
+// 引入组件库
+import VueEasytable from "vue-easytable";
 import dayjs from "dayjs";
 import {imgUrl} from "@/utils";
 // 设置 js中可以访问 $cdn
@@ -26,6 +30,7 @@ Vue.config.productionTip = false
 import VCalendar from 'v-calendar';
 import globals from "@/utils/global.js"//全局混入
 Vue.use(Vant);
+Vue.use(VueEasytable);
 Vue.use(globals);
 Vue.use(VCalendar,{
   componentPrefix: 'vc',  // Use <vc-calendar /> instead of <v-calendar />

src/router/router.config.js

@@ -158,6 +158,12 @@ export let routers = [
         component: () => import('@/views/menu/educationStatistics/index'),
         meta: { title: '教育培训统计报表', keepAlive: false }
       },
+      {
+        path: '/securityCheckRegister',
+        name: 'securityCheckRegister',
+        component: () => import('@/views/menu/securityCheckRegister/index'),
+        meta: { title: '安全检查登记', keepAlive: false }
+      },
     ],
   },
 ]

src/views/home/menu.vue

@@ -24,112 +24,7 @@ export default {
   components:{TopBar},
   data() {
     return {
-      menuList:[
-        {
-          name:'系统管理',
-          list:[
-            {
-              menu:'作息管理',
-              path:'/workTime',
-            },
-            {
-              menu:'NFC管理',
-              path:'/nfc',
-            },
-            {
-              menu:'履职登记',
-              path:'/lvzhi',
-            },
-          ]
-        },
-        {
-          name:'履职',
-          list:[
-            {
-              menu:'监控调阅',
-              path:'/monitoringCall'
-            },
-            {
-              menu:'视频调阅',
-            },
-            {
-              menu:'安全检查登记',
-            },
-            {
-              menu:'教育培训统计报表',
-              path:'/educationStatistics',
-            },
-            {
-              menu:'外包评价',
-            },
-          ]
-        },
-        {
-          name:'设备',
-          list:[
-            {
-              menu:'设备管理',
-            },
-            {
-              menu:'防区状态',
-              path:'/protection'
-            },
-          ]
-        },
-        {
-          name:'来访',
-          list:[
-            {
-              menu:'介绍信管理',
-            },
-            {
-              menu:'出入登记',
-            },
-            {
-              menu:'培训登记',
-              path:'/training'
-            },
-          ]
-        },
-        {
-          name:'演练',
-          list:[
-            {
-              menu:'演练登记',
-              path:'/rehearsalTask'
-            },
-            {
-              menu:'演练排名',
-            },
-            {
-              menu:'安全检查登记',
-            },
-            {
-              menu:'优秀案例管理',
-            },
-            {
-              menu:'优秀案例学习',
-            },
-          ]
-        },
-        {
-          name:'统计',
-          list:[
-            {
-              menu:'驾驶舱',
-            },
-            {
-              menu:'每日网点履职报表',
-            },
-            {
-              menu:'每日布撤防报表',
-            },
-            {
-              menu:'教育统计报表',
-            },
-          ]
-        }
-      ],
+      menuList:[],
     }
   },
   computed: {

src/views/menu/educationStatistics/index.vue

@@ -3,27 +3,38 @@
     <NavBar />
     <div class="statistics-container">
       <org-tree v-model="query.orgId" @change="getDataList"></org-tree>
-      <select-cell title="教育计划名称" v-model="query.planId" :dataList="planList" :prop="prop" @change="getDataList"/>
-      <date-cell title="统计月份"  v-model="query.date" date-type="year-month" @change="getDataList"/>
+      <div class="search-flex">
+        <select-cell title="教育计划名称" v-model="query.planId" :dataList="planList" :prop="prop" @change="getDataList"/>
+        <date-cell title="统计月份"  v-model="query.date" date-type="year-month" @change="getDataList"/>
+      </div>
       <div class="card-list">
         <van-empty description="暂无数据" v-if="!dataList || dataList.length === 0" />
-        <template v-else>
-          <van-cell-group  v-for="(v,i) in dataList">
-            <van-cell :title="v.orgName" >
-              <template #extra>
-                <div class="card-num">
-                  {{v.finishRate}}
-                </div>
-              </template>
-              <template #label>
-                <div class="flex-box">
-                  <div>应培训数：{{v.shouldFinish}}</div>
-                  <div>已培训数：{{v.finish}}</div>
-                </div>
-              </template>
-            </van-cell>
-          </van-cell-group>
-        </template>
+        <ve-table
+          v-else
+          maxHeight="calc(100vh - 252px)"
+          fixedHeader
+          borderX
+          borderY
+          borderAround
+          :columns="columns"
+          :table-data="dataList" />
+<!--        <template v-else>-->
+<!--          <van-cell-group  v-for="(v,i) in dataList">-->
+<!--            <van-cell :title="v.orgName" >-->
+<!--              <template #extra>-->
+<!--                <div class="card-num">-->
+<!--                  {{v.finishRate}}-->
+<!--                </div>-->
+<!--              </template>-->
+<!--              <template #label>-->
+<!--                <div class="flex-box">-->
+<!--                  <div>应培训数：{{v.shouldFinish}}</div>-->
+<!--                  <div>已培训数：{{v.finish}}</div>-->
+<!--                </div>-->
+<!--              </template>-->
+<!--            </van-cell>-->
+<!--          </van-cell-group>-->
+<!--        </template>-->
       </div>
     </div>
   </div>
@@ -56,6 +67,22 @@ export default {
         value:'id',
       },
       loading:false,
+      columns:[
+        {
+          field: "index",
+          key: "index",
+          title: "序号",
+          width: 50,
+          align: "center",
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return ++rowIndex;
+          },
+        },
+        { field: "orgName", key: "a", title: "单位名称",align: "center"},
+        { field: "shouldFinish", key: "b", title: "应完成数", align: "center" },
+        { field: "finish", key: "c", title: "已完成数",align: "center" },
+        { field: "finishRate", key: "d", title: "完成率", align: "center" },
+      ],
       dataList:[]
     }
   },
@@ -99,6 +126,11 @@ export default {
 .van-cell-group:last-child{
   margin-bottom: 0;
 }
+.vue-table-root{
+  tr,td,th{
+    font-size: 26px!important;
+  }
+}
 </style>
 <style lang="scss" scoped>
   .educationStatistics{
@@ -109,8 +141,8 @@ export default {
   }
   .card-list{
     padding: 20px;
-    height: calc(100vh - 550px);
-    overflow: auto;
+    height: calc(100vh - 420px);
+    overflow:  hidden;
   }
   .card-num{
     display: flex;
@@ -125,4 +157,13 @@ export default {
       margin-right: 40px;
     }
   }
+  .search-flex{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    >div{
+      width: 50%;
+      border-right: 1px solid #eaeaea;
+    }
+  }
 </style>

src/views/menu/securityCheckRegister/api.js

@@ -0,0 +1,86 @@
+import request from "@/utils/request";
+//获取列表
+export function dataList(data) {
+  return request({
+    url: "/core/eduTask/report",
+    method: "post",
+    data,
+  });
+}
+//获取计划列表
+export function planList(orgId){
+  return request({
+    url: "/core/plan/planList/"+orgId,
+    method: "get",
+  });
+}
+export const json = {
+  "msg": "操作成功",
+  "code": 200,
+  "data": [
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974731112400,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974794027000,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974794027000,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974794027000,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974794027000,
+      "name": "网点安全员每月培训计划"
+    },
+    {
+      "id": 1698299974794027000,
+      "name": "网点安全员每月培训计划"
+    }
+  ]
+}

src/views/menu/securityCheckRegister/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="check-register">
+    <NavBar />
+    <div class="statistics-container">
+      <org-tree v-model="query.orgId" @change="getDataList"></org-tree>
+      <select-cell title="教育计划名称" v-model="query.planId" :dataList="planList" :prop="prop" @change="getDataList"/>
+      <date-cell title="统计月份"  v-model="query.date" date-type="year-month" @change="getDataList"/>
+      <div class="card-list">
+        <van-empty description="暂无数据" v-if="!dataList || dataList.length === 0" />
+        <template v-else>
+          <van-cell-group  v-for="(v,i) in dataList">
+            <van-cell :title="v.orgName" >
+              <template #extra>
+                <div class="card-num">
+                  {{v.finishRate}}
+                </div>
+              </template>
+              <template #label>
+                <div class="flex-box">
+                  <div>应培训数：{{v.shouldFinish}}</div>
+                  <div>已培训数：{{v.finish}}</div>
+                </div>
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import NavBar from '@/components/NavBar'
+import OrgTree from '@/components/orgTree'
+import dateCell from '@/components/dateCell'
+import selectCell from '@/components/selectCell'
+import {dataList,planList} from './api'
+import {mapGetters} from "vuex";
+import {formatDate} from "@/filters/filter";
+export default {
+  components: {
+    NavBar,
+    OrgTree,
+    dateCell,
+    selectCell
+  },
+  data() {
+    return {
+      query:{
+        date:null,
+        orgId:null,
+        planId:null,
+      },
+      planList:[],
+      prop:{
+        label:'name',
+        value:'id',
+      },
+      loading:false,
+      dataList:[]
+    }
+  },
+  mounted() {
+    this.initData();
+  },
+  computed:{
+    ...mapGetters(['orgId']),
+  },
+  methods: {
+    initData(){
+      this.query.orgId = this.orgId;
+      this.getPlanList();
+    },
+    getPlanList(){
+      planList(this.query.orgId).then(res=>{
+        this.planList = res.data;
+        if(res.data.length === 0) return this.$toast('暂无教育计划');
+        this.query.planId = res.data[0].id;
+        this.query.date = formatDate(new Date(),'YYYY-MM');
+        this.getDataList();
+      })
+    },
+    getDataList(){
+      let data = {
+        ...this.query
+      }
+      data.date = this.query.date && `${this.query.date}-01`;
+      if(!this.query.orgId) return this.$toast('请选择机构');
+      dataList(data).then(res=>{
+        this.dataList = res.data;
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.van-cell-group{
+  margin-bottom: 20px;
+}
+.van-cell-group:last-child{
+  margin-bottom: 0;
+}
+</style>
+<style lang="scss" scoped>
+.check-register{
+
+}
+.card-list{
+  padding: 20px;
+  height: calc(100vh - 550px);
+  overflow: auto;
+}
+.card-num{
+  display: flex;
+  align-items: center;
+  font-size: 28px;
+  color: #009dff;
+}
+.flex-box{
+  display: flex;
+  align-items: center;
+  >div{
+    margin-right: 40px;
+  }
+}
+</style>