|
|
@@ -3,27 +3,36 @@
|
|
|
<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-box">
|
|
|
+ <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>
|
|
|
+<!-- <van-cell-group v-for="(v,i) in dataList" :key="i">-->
|
|
|
+<!-- <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>-->
|
|
|
+ <ve-table
|
|
|
+ v-else
|
|
|
+ :border-x="true"
|
|
|
+ :border-y="true"
|
|
|
+ :border-around="true"
|
|
|
+ :columns="columns"
|
|
|
+ :fixed-header="true"
|
|
|
+ maxHeight="calc(100vh - 240px)"
|
|
|
+ :table-data="dataList" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -31,8 +40,9 @@
|
|
|
<script>
|
|
|
import NavBar from '@/components/NavBar'
|
|
|
import OrgTree from '@/components/orgTree'
|
|
|
-import dateCell from '@/components/dateCell'
|
|
|
-import selectCell from '@/components/selectCell'
|
|
|
+import DateCell from '@/components/dateCell'
|
|
|
+import SelectCell from '@/components/selectCell'
|
|
|
+import Tables from '@/components/table'
|
|
|
import {dataList,planList} from './api'
|
|
|
import {mapGetters} from "vuex";
|
|
|
import {formatDate} from "@/filters/filter";
|
|
|
@@ -40,8 +50,9 @@ export default {
|
|
|
components: {
|
|
|
NavBar,
|
|
|
OrgTree,
|
|
|
- dateCell,
|
|
|
- selectCell
|
|
|
+ DateCell,
|
|
|
+ SelectCell,
|
|
|
+ Tables
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -56,7 +67,24 @@ export default {
|
|
|
value:'id',
|
|
|
},
|
|
|
loading:false,
|
|
|
- dataList:[]
|
|
|
+ columns:[
|
|
|
+ {
|
|
|
+ field: "index",
|
|
|
+ key: "index",
|
|
|
+ title: "序号",
|
|
|
+ width: 50,
|
|
|
+ align: "center",
|
|
|
+ fixed: "left",
|
|
|
+ renderBodyCell: ({ row, column, rowIndex }, h) => {
|
|
|
+ return ++rowIndex;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {field:'orgName',key:'2',title:'单位名称',align: "center" },
|
|
|
+ {field:'finish',key:'3',title:'应培训数',align: "center" },
|
|
|
+ {field:'shouldFinish',key:'4',title:'已培训数',align: "center" },
|
|
|
+ {field:'finishRate',key:'5',title:'完成率',align: "center" },
|
|
|
+ ],
|
|
|
+ dataList:[],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -99,6 +127,12 @@ export default {
|
|
|
.van-cell-group:last-child{
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
+.vue-table-root{
|
|
|
+ tr,th,td{
|
|
|
+ font-size: 25px!important;
|
|
|
+ color:#666!important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.educationStatistics{
|
|
|
@@ -107,9 +141,18 @@ export default {
|
|
|
.statistics-container{
|
|
|
|
|
|
}
|
|
|
+ .search-flex-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ >div{
|
|
|
+ width: 50%;
|
|
|
+ border-right: 1px solid #eaeaea ;
|
|
|
+ }
|
|
|
+ }
|
|
|
.card-list{
|
|
|
padding: 20px;
|
|
|
- height: calc(100vh - 550px);
|
|
|
+ -height: calc(100vh - 410px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
.card-num{
|
凉纪