zc

src/api/safetyEducationExaminationNew/index.js

@@ -907,6 +907,22 @@ export function examElStatisticsCreditHourList(data) {
     data: data
   })
 }
+//三级人员明细
+export function examElStatisticsExamGroupedChartDetail(data) {
+  return request({
+    url: '/exam/elStatistics/exam/grouped/chart-detail',
+    method: 'post',
+    data: data
+  })
+}
+//实验室绑定人员明细
+export function examElStatisticsLabListDetail(data) {
+  return request({
+    url: '/exam/elStatistics/lab/list-detail',
+    method: 'post',
+    data: data
+  })
+}
 //工作台查询考试列表
 export function examUserExamStudyTaskList(data) {
   return request({

src/views/safetyEducationExaminationNew/dataStatistics/LabPersonMatch.vue

@@ -97,26 +97,38 @@
             <span :style="scope.row.type == 2?'color:#184c93;font-weight:700;':''">{{scope.row.level4Count}}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="noLabNeedCount" v-if="checkIndex == 2" label="无需进入实验室人数" width="200" align="center">>
+        <el-table-column prop="noLabNeedCount" v-if="checkIndex == 2" label="无需进入实验室人数" width="160" align="center">>
           <template slot-scope="scope">
             <span :style="scope.row.type == 2?'color:#184c93;font-weight:700;':''">{{scope.row.noLabNeedCount}}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="unboundCount" v-if="checkIndex == 2" label="未操作人数" width="200" align="center">>
+        <el-table-column prop="unboundCount" v-if="checkIndex == 2" label="未匹配人数" width="140" align="center">>
           <template slot-scope="scope">
             <span :style="scope.row.type == 2?'color:#184c93;font-weight:700;':''">{{scope.row.unboundCount}}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="unboundCount" v-if="checkIndex == 3" label="未绑定人数" width="200" align="center">>
+        <el-table-column prop="unboundCount" v-if="checkIndex == 3" label="未匹配人数" width="140" align="center">>
           <template slot-scope="scope">
             <span :style="scope.row.type == 2?'color:#184c93;font-weight:700;':''">{{scope.row.unboundCount}}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="totalCount" label="总人数" width="200" align="center">>
+        <el-table-column prop="totalCount" label="总人数" width="140" align="center">>
           <template slot-scope="scope">
             <span :style="scope.row.type == 2?'color:#184c93;font-weight:700;':''">{{scope.row.totalCount}}</span>
           </template>
         </el-table-column>
+        <el-table-column label="操作" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p"
+                 v-if="adminType == 1"
+                 @click="tableButton(1,scope.row)"
+              >{{scope.row.deptId?'人员明细':'全部明细'}}</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
       <pagination :page-sizes="[20, 30, 40, 50]"
                   v-show="total>0"
@@ -126,6 +138,17 @@
                   @pagination="examElStatisticsLabList"
       />
     </div>
+    <el-drawer
+      size="100%"
+      custom-class="labPersonMatch-index-drawer"
+      :append-to-body="true"
+      :title="drawerTitle"
+      ref="drawer"
+      :visible.sync="drawer"
+      @close="drawerReturnButton"
+      direction="rtl">
+      <userListPage :drawerPropsData="drawerPropsData" v-if="drawerType == 1"></userListPage>
+    </el-drawer>
   </div>
 </template>
 
@@ -138,9 +161,13 @@ import {
   examElStatisticsLabChart,examElStatisticsLabList,examElStatisticsGetAcademicYear,
   laboratoryLevelConfigGetLevelTitleList,systemDeptCurrentDept,
 } from "@/api/safetyEducationExaminationNew/index";
+import userListPage from "./userListPage.vue";
 
 export default {
   name: 'LabPersonMatch',
+  components: {
+    userListPage,
+  },
   data() {
     return {
       adminType:0,
@@ -157,7 +184,12 @@ export default {
       },
       chartData: [],
       tableData: [],
-      total:0
+      total:0,
+      //弹窗相关
+      drawerTitle: '',
+      drawerType: '',
+      drawer: false,
+      drawerPropsData:{},
     }
   },
   mounted() {
@@ -167,6 +199,27 @@ export default {
     if (this._barChart) this._barChart.dispose()
   },
   methods: {
+    //操作按钮
+    tableButton(type,row){
+      if(type == 1){
+        this.$set(this, 'drawerTitle', '实验室匹配人员明细')
+        let obj = {
+          adminType:this.adminType,
+          valueYear:this.valueYear,
+          personType:this.checkIndex,
+          deptId:row.deptId,
+
+        }
+        this.$set(this, 'drawerPropsData', obj)
+        this.$set(this, 'drawerType', 1)
+        this.$set(this, 'drawer', true)
+      }
+    },
+    //弹窗返回
+    drawerReturnButton(){
+      this.$set(this, 'drawerType', 0)
+      this.$refs.drawer.closeDrawer();
+    },
     //查询当前登录用户身份-校级/院级
     systemUserGetPost(){
       systemUserGetPost({}).then(response => {
@@ -450,3 +503,13 @@ export default {
   .total-link { color: #409eff; }
 }
 </style>
+<style lang="scss">
+  .labPersonMatch-index-drawer{
+    .el-drawer__body{
+      padding:0;
+    }
+    .el-drawer__header{
+      margin:0;
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/dataStatistics/components/dataReport/ExamSituation.vue

@@ -123,6 +123,18 @@
             <span :style="scope.row.type == 2?'color:#184c93;font-weight:700;':''">{{scope.row.passRate}}</span>
           </template>
         </el-table-column>
+        <el-table-column label="操作" width="200" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p"
+                 v-if="scope.row.type != 2"
+                 @click="tableButton(1,scope.row)"
+              >人员明细</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
       <pagination :page-sizes="[20, 30, 40, 50]"
                   v-show="total>0"
@@ -132,6 +144,17 @@
                   @pagination="examElStatisticsExamGroupedList"
       />
     </div>
+    <el-drawer
+      size="100%"
+      custom-class="examSituation-index-drawer"
+      :append-to-body="true"
+      :title="drawerTitle"
+      ref="drawer"
+      :visible.sync="drawer"
+      @close="drawerReturnButton"
+      direction="rtl">
+      <userListPage :drawerPropsData="drawerPropsData" v-if="drawerType == 1"></userListPage>
+    </el-drawer>
   </div>
 </template>
 
@@ -144,8 +167,12 @@ import {
   examElStatisticsGetAcademicYear,examElStatisticsExamGroupedList,examElStatisticsExamGroupedChart,
   examElExamTypeList,systemDeptCurrentDept,
 } from "@/api/safetyEducationExaminationNew/index";
+import userListPage from "./userListPage.vue";
 export default {
   name: 'ExamSituation',
+  components: {
+    userListPage,
+  },
   data() {
     return {
       adminType:0,
@@ -168,6 +195,11 @@ export default {
       },
       dataList:[],
       total:0,
+      //弹窗相关
+      drawerTitle: '',
+      drawerType: '',
+      drawer: false,
+      drawerPropsData:{},
     }
   },
   created() {
@@ -181,6 +213,28 @@ export default {
     if (this._pieChart) this._pieChart.dispose()
   },
   methods: {
+    //操作按钮
+    tableButton(type,row){
+      if(type == 1){
+        this.$set(this, 'drawerTitle', '分级考试人员明细')
+        let obj = {
+          adminType:this.adminType,
+          valueYear:this.valueYear,
+          personType:this.checkIndex,
+          deptId:row.deptId,
+          examTypeId:row.examTypeId,
+
+        }
+        this.$set(this, 'drawerPropsData', obj)
+        this.$set(this, 'drawerType', 1)
+        this.$set(this, 'drawer', true)
+      }
+    },
+    //弹窗返回
+    drawerReturnButton(){
+      this.$set(this, 'drawerType', 0)
+      this.$refs.drawer.closeDrawer();
+    },
     //查询当前登录用户身份-校级/院级
     systemUserGetPost(){
       systemUserGetPost({}).then(response => {
@@ -338,7 +392,7 @@ export default {
             barMaxWidth: 40,
             data: categories.map(c => (c.isGap ? null : c.passedCount)),
             itemStyle: { color: '#4fbe7e' },
-            label: { show: true, position: 'inside', fontSize: 11, color: '#fff',
+            label: { show: true, position: 'inside', fontSize: 12, color: '#fff',
               formatter: (p) => p.value > 0 ? p.value : '' },
           },
           {
@@ -349,7 +403,7 @@ export default {
             barMaxWidth: 40,
             data: categories.map(c => (c.isGap ? null : c.notPassedCount)),
             itemStyle: { color: '#f56c6c' },
-            label: { show: true, position: 'inside', fontSize: 10, color: '#fff',
+            label: { show: true, position: 'inside', fontSize: 12, color: '#fff',
               formatter: (p) => p.value > 0 ? p.value : '' },
           },
           {
@@ -360,7 +414,7 @@ export default {
             barMaxWidth: 40,
             data: categories.map(c => (c.isGap ? null : c.absentCount)),
             itemStyle: { color: '#c0c4cc' },
-            label: { show: true, position: 'inside', fontSize: 10, color: '#fff',
+            label: { show: true, position: 'inside', fontSize: 12, color: '#fff',
               formatter: (p) => p.value > 0 ? p.value : '' },
           },
         ],
@@ -512,6 +566,8 @@ export default {
           for(let o=0;o<response.data.deptStats[i].examTypeGroup.length;o++){
             list.push({
               deptName:response.data.deptStats[i].deptName,
+              deptId:response.data.deptStats[i].deptId,
+              examTypeId:response.data.deptStats[i].examTypeGroup[o].examTypeId,
               examTypeName:response.data.deptStats[i].examTypeGroup[o].examTypeName,
               expectedCount:response.data.deptStats[i].examTypeGroup[o].expectedCount,
               examCount:response.data.deptStats[i].examTypeGroup[o].examCount,
@@ -538,6 +594,8 @@ export default {
         for(let o=0;o<response.data.schoolStats.examTypeGroup.length;o++){
           list.push({
             deptName:response.data.schoolStats.deptName,
+            deptId:'',
+            examTypeId:response.data.schoolStats.examTypeGroup[o].examTypeId,
             examTypeName:response.data.schoolStats.examTypeGroup[o].examTypeName,
             expectedCount:response.data.schoolStats.examTypeGroup[o].expectedCount,
             examCount:response.data.schoolStats.examTypeGroup[o].examCount,
@@ -702,3 +760,13 @@ export default {
   .link-blue { color: #409eff; }
 }
 </style>
+<style lang="scss">
+  .examSituation-index-drawer{
+    .el-drawer__body{
+      padding:0;
+    }
+    .el-drawer__header{
+      margin:0;
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/dataStatistics/components/dataReport/userListPage.vue

@@ -0,0 +1,390 @@
+<!-- 分级考试人员明细 -->
+<template>
+  <div class="page-container dataReportUserListPage-addPage">
+    <div class="page-form-title-box">
+      <el-form :model="queryParams" class="form-box" ref="queryForm"
+               :inline="true" style="width:100%;">
+        <el-form-item label="" prop="academicYear">
+          <el-select v-model="queryParams.academicYear" style="width:160px">
+            <el-option
+              v-for="dict in optionList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="category">
+          <div class="table-top-button-box">
+            <div>
+              <p @click="queryParams.category = 'EXAMED'" :class="queryParams.category == 'EXAMED'?'check-table-button':''">已考人员</p>
+              <p @click="queryParams.category = 'NOT_EXAMED'" :class="queryParams.category == 'NOT_EXAMED'?'check-table-button':''">未考人员</p>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="" prop="personType">
+          <div class="table-top-button-box-1">
+            <div>
+              <p @click="queryParams.personType = 2" :class="queryParams.personType == 2?'check-table-button':''">研究生</p>
+              <p @click="queryParams.personType = 3" :class="queryParams.personType == 3?'check-table-button':''">本科生</p>
+              <p @click="queryParams.personType = 1" :class="queryParams.personType == 1?'check-table-button':''">教职工</p>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="" prop="deptId">
+          <el-select v-if="adminType == 1"
+                     v-model="queryParams.deptId"
+                     placeholder="学院"
+                     style="width: 180px">
+            <el-option
+              v-for="dict in optionListA"
+              :key="dict.deptId"
+              :label="dict.deptName"
+              :value="dict.deptId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="examTypeId">
+          <el-select
+            v-model="queryParams.examTypeId"
+            placeholder="考试类型"
+            style="width: 150px">
+            <el-option
+              v-for="dict in optionListB"
+              :key="dict.id"
+              :label="dict.examTypeName"
+              :value="dict.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="levelIdClassifyTypeId">
+          <el-cascader
+            v-model="queryParams.levelIdClassifyTypeId"
+            placeholder="分级分类"
+            :options="optionListC"
+            :props="{ checkStrictly: true,expandTrigger: 'hover' }"
+            style="width: 150px"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item label="" prop="examResult">
+          <el-select
+            v-model="queryParams.examResult"
+            placeholder="考试结果"
+            style="width: 150px">
+            <el-option key="1" label="已通过" value="1"/>
+            <el-option key="0" label="未通过" value="0"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="makeupResult">
+          <el-select
+            v-model="queryParams.makeupResult"
+            placeholder="补考结果"
+            style="width: 150px">
+            <el-option key="1" label="已通过" value="1"/>
+            <el-option key="0" label="未通过" value="0"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="account">
+          <el-input
+            maxLength="30"
+            v-model="queryParams.account"
+            placeholder="搜索姓名/学工号"
+            style="width: 150px"
+          />
+        </el-form-item>
+        <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+        <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+        <p class="page-add-common-style-button" style="float: right;" @click="exportButton()">导出</p>
+      </el-form>
+    </div>
+    <div class="page-content-box">
+      <el-table class="table-box"  border :data="dataList">
+        <el-table-column label="姓名" prop="userName"  show-overflow-tooltip/>
+        <el-table-column label="学工号" prop="account" width="140" show-overflow-tooltip/>
+        <el-table-column label="学院" prop="deptName" width="240" show-overflow-tooltip/>
+        <!--<el-table-column label="用户类别" prop="deptName" width="160" show-overflow-tooltip/>-->
+        <el-table-column label="考试类型" prop="examTypeName" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="scope.row.examTypeCode=='CLASSIFIED'">{{scope.row.levelName}}-{{scope.row.classifyTypeName}}</span>
+            <span v-else>{{scope.row.examTypeName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="学习情况" prop="learningStatus" width="160" show-overflow-tooltip/>
+        <el-table-column label="考试成绩" prop="examScore" width="160" show-overflow-tooltip/>
+        <el-table-column label="考试结果" prop="examResult" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span :class="scope.row.examResult == 0 ?'colorC':(scope.row.examResult == 1 ?'colorA':(scope.row.examResult == 2 ?'colorB':''))">
+              {{scope.row.examResult == 0 ?'未考':(scope.row.examResult == 1 ?'通过':(scope.row.examResult == 2 ?'未通过':''))}}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="补考成绩" prop="makeupScore" width="160" show-overflow-tooltip/>
+        <el-table-column label="补考结果" prop="makeupResult" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span :class="scope.row.makeupResult == 0 ?'colorC':(scope.row.makeupResult == 1 ?'colorA':(scope.row.makeupResult == 2 ?'colorB':''))">
+              {{scope.row.makeupResult == 0 ?'未考':(scope.row.makeupResult == 1 ?'通过':(scope.row.makeupResult == 2 ?'未通过':''))}}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="queryParams.page"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    laboratoryClassTypeGetList,laboratoryLevelConfigGetLevelTitleList,
+  } from "@/api/commonality/permission";
+  import {
+    examElExamTypeList,systemDeptCurrentDept,examElStatisticsGetAcademicYear,examElStatisticsExamGroupedChartDetail,
+  } from "@/api/safetyEducationExaminationNew/index";
+  export default {
+    name: 'addPage',
+    props: {
+      drawerPropsData: {}
+    },
+    data() {
+      return {
+        adminType:0,
+        optionList:[],
+        optionListA:[],
+        optionListB:[],
+        optionListC:[],
+        //查询条件
+        queryParams:{
+          page:1,
+          pageSize:20,
+          academicYear:'',
+          category:'EXAMED',
+          personType:'2',
+          deptId:'',
+          examTypeId:'',
+          levelIdClassifyTypeId:[],
+          account:'',
+          examResult:'',
+          makeupResult:'',
+        },
+        //列表数据
+        dataList:[],
+        //数据数量
+        total:0,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+    },
+    methods: {
+      // 初始化
+      initialize() {
+        this.$set(this,'adminType',this.drawerPropsData.adminType);
+        this.$set(this.queryParams,'academicYear',this.drawerPropsData.valueYear);
+        this.$set(this.queryParams,'personType',this.drawerPropsData.personType);
+        this.$set(this.queryParams,'deptId',this.drawerPropsData.deptId);
+        this.$set(this.queryParams,'examTypeId',this.drawerPropsData.examTypeId);
+        this.examElExamTypeList();
+        this.systemDeptCurrentDept();
+        this.laboratoryLevelConfigGetLevelTitleList();
+        this.examElStatisticsGetAcademicYear();
+        this.getList();
+      },
+      //查询按钮
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      //重置按钮
+      resetQuery(){
+        this.$set(this,'queryParams',{
+          page:1,
+          pageSize:20,
+          academicYear:this.drawerPropsData.valueYear,
+          category:'EXAMED',
+          personType:this.drawerPropsData.personType,
+          deptId:this.drawerPropsData.deptId,
+          examTypeId:this.drawerPropsData.examTypeId,
+          levelIdClassifyTypeId:[],
+          account:'',
+          examResult:'',
+          makeupResult:'',
+        });
+        this.getList();
+      },
+      getList(){
+        let obj = {
+          page:this.queryParams.page,
+          pageSize:this.queryParams.pageSize,
+          academicYear:this.queryParams.academicYear,
+          category:this.queryParams.category,
+          personType:this.queryParams.personType,
+          examTypeId:this.queryParams.examTypeId,
+          account:this.queryParams.account,
+          examResult:this.queryParams.examResult,
+          makeupResult:this.queryParams.makeupResult,
+        }
+        if(this.queryParams.levelIdClassifyTypeId[0]){
+          obj.levelId = this.queryParams.levelIdClassifyTypeId[0];
+        }
+        if(this.queryParams.levelIdClassifyTypeId[1]){
+          obj.classifyTypeId = this.queryParams.levelIdClassifyTypeId[1];
+        }
+        if(this.adminType == 1){
+          obj.deptId = this.queryParams.deptId;
+        }else{
+          obj.deptId = localStorage.getItem('deptId');
+        }
+        examElStatisticsExamGroupedChartDetail(obj).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        })
+      },
+      //查询全部考试类型
+      examElExamTypeList(){
+        examElExamTypeList({}).then(response => {
+          let list = [];
+          for(let i=0;i<response.data.length;i++){
+            if(response.data[i].examTypeCode == 'CLASSIFIED' || response.data[i].examTypeCode == 'yzyh' || response.data[i].examTypeCode == 'STUDENT'){
+              list.push(response.data[i]);
+            }
+          }
+          this.$set(this,'optionListB',list);
+        });
+      },
+      //学院列表
+      systemDeptCurrentDept(){
+        systemDeptCurrentDept({}).then(response => {
+          const list = response.data || [];
+          this.formatTreeData(list);
+          if(list[0]){
+            this.$set(this,'optionListA',list[0].child);
+          }else{
+            this.$set(this,'optionListA',[]);
+          }
+        });
+      },
+      //学院列表
+      laboratoryLevelConfigGetLevelTitleList(){
+        laboratoryLevelConfigGetLevelTitleList({}).then(responseA => {
+          laboratoryClassTypeGetList({}).then(responseB => {
+            let list = []
+            for(let i=0;i<responseA.data.length;i++){
+              let obj = {
+                value:responseA.data[i].levelId,
+                label:responseA.data[i].titleName,
+                children:[],
+              }
+              for(let o=0;o<responseB.data.length;o++){
+                obj.children.push({
+                  value:responseB.data[o].typeId,
+                  label:responseB.data[o].typeName,
+                })
+              }
+              list.push(obj)
+            }
+            this.$set(this,'optionListC',list);
+          });
+        });
+      },
+      //学年列表
+      examElStatisticsGetAcademicYear(){
+        examElStatisticsGetAcademicYear({}).then(response => {
+          this.$set(this,'optionList',response.data);
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .dataReportUserListPage-addPage {
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .page-form-title-box {
+      /* 分组筛选按钮 */
+      .table-top-button-box {
+        display: inline-block;
+        vertical-align: top;
+        div {
+          display: flex;
+          p {
+            border: 1px solid #DCDFE6;
+            width: 80px;
+            text-align: center;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            font-size: 14px;
+            &:nth-child(1) { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
+            &:nth-child(2) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
+          }
+          .check-table-button{
+            border: 1px solid #0183fa!important;
+            background-color: #0183fa!important;;
+            color:#fff!important;;
+          }
+        }
+      }
+      .table-top-button-box-1 {
+        display: inline-block;
+        vertical-align: top;
+        div {
+          display: flex;
+          p {
+            border: 1px solid #DCDFE6;
+            width: 80px;
+            text-align: center;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            font-size: 14px;
+            &:nth-child(1) { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
+            &:nth-child(2) { border-left: none; border-right: none; }
+            &:nth-child(3) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
+          }
+          .check-table-button{
+            border: 1px solid #0183fa!important;
+            background-color: #0183fa!important;;
+            color:#fff!important;;
+          }
+        }
+      }
+    }
+    .page-content-box{
+      .colorA{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#28a47c;
+        background-color:#e9f8f1;
+      }
+      .colorB{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#df555f;
+        background-color:#fff0f1;
+      }
+      .colorC{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#999;
+        background-color:#dedede;
+      }
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/dataStatistics/components/regularExam/ExamSituation.vue

@@ -101,6 +101,18 @@
         <el-table-column prop="notPassedCount" label="未通过人数" width="160" align="center"/>
         <el-table-column prop="absentCount" label="未考人数" width="160" align="center" />
         <el-table-column prop="passRate" label="通过率" width="160" align="center" />
+        <el-table-column label="操作" width="200" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p"
+                 v-if="scope.row.type != 2"
+                 @click="tableButton(1,scope.row)"
+              >人员明细</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
       <pagination :page-sizes="[20, 30, 40, 50]"
                   v-show="total>0"
@@ -110,6 +122,17 @@
                   @pagination="examElStatisticsExamList"
       />
     </div>
+    <el-drawer
+      size="100%"
+      custom-class="regularExam-index-drawer"
+      :append-to-body="true"
+      :title="drawerTitle"
+      ref="drawer"
+      :visible.sync="drawer"
+      @close="drawerReturnButton"
+      direction="rtl">
+      <userListPage :drawerPropsData="drawerPropsData" v-if="drawerType == 1"></userListPage>
+    </el-drawer>
   </div>
 </template>
 
@@ -122,8 +145,12 @@ import {
   examElStatisticsGetAcademicYear,examElStatisticsExamList,examElStatisticsExamChart,
   examElStatisticsExamTitleList,systemDeptCurrentDept,
 } from "@/api/safetyEducationExaminationNew/index";
+import userListPage from "./userListPage.vue";
 export default {
   name: 'ExamSituation',
+  components: {
+    userListPage,
+  },
   data() {
     return {
       adminType:0,
@@ -146,6 +173,11 @@ export default {
       },
       dataList:[],
       total:0,
+      //弹窗相关
+      drawerTitle: '',
+      drawerType: '',
+      drawer: false,
+      drawerPropsData:{},
     }
   },
   created() {
@@ -159,6 +191,26 @@ export default {
     if (this._pieChart) this._pieChart.dispose()
   },
   methods: {
+    //操作按钮
+    tableButton(type,row){
+      if(type == 1){
+        this.$set(this, 'drawerTitle', '分级考试人员明细')
+        let obj = {
+          adminType:this.adminType,
+          valueYear:this.valueYear,
+          personType:this.checkIndex,
+          deptId:row.deptId,
+        }
+        this.$set(this, 'drawerPropsData', obj)
+        this.$set(this, 'drawerType', 1)
+        this.$set(this, 'drawer', true)
+      }
+    },
+    //弹窗返回
+    drawerReturnButton(){
+      this.$set(this, 'drawerType', 0)
+      this.$refs.drawer.closeDrawer();
+    },
     //查询当前登录用户身份-校级/院级
     systemUserGetPost(){
       systemUserGetPost({}).then(response => {
@@ -267,7 +319,7 @@ export default {
             barMaxWidth: 60, // 新增：限制最大宽度，防止数据少时柱子过粗
             data: groups.map(g => g.passedCount),
             itemStyle: { color: '#4fbe7e' },
-            label: { show: true, position: 'inside', fontSize: 11, color: '#fff',
+            label: { show: true, position: 'inside', fontSize: 12, color: '#fff',
               formatter: (p) => p.value > 0 ? p.value : '' },
           },
           {
@@ -277,7 +329,7 @@ export default {
             barMaxWidth: 60,
             data: groups.map(g => g.notPassedCount),
             itemStyle: { color: '#f56c6c' },
-            label: { show: true, position: 'inside', fontSize: 10, color: '#fff',
+            label: { show: true, position: 'inside', fontSize: 12, color: '#fff',
               formatter: (p) => p.value > 0 ? p.value : '' },
           },
           {
@@ -287,7 +339,7 @@ export default {
             barMaxWidth: 60,
             data: groups.map(g => g.absentCount),
             itemStyle: { color: '#c0c4cc' },
-            label: { show: true, position: 'inside', fontSize: 10, color: '#fff',
+            label: { show: true, position: 'inside', fontSize: 12, color: '#fff',
               formatter: (p) => p.value > 0 ? p.value : '' },
           },
         ],
@@ -564,3 +616,13 @@ export default {
   .link-blue { color: #409eff; }
 }
 </style>
+<style lang="scss">
+  .regularExam-index-drawer{
+    .el-drawer__body{
+      padding:0;
+    }
+    .el-drawer__header{
+      margin:0;
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/dataStatistics/components/regularExam/userListPage.vue

@@ -0,0 +1,312 @@
+<!-- 分级考试人员明细 -->
+<template>
+  <div class="page-container dataReportUserListPage-addPage">
+    <div class="page-form-title-box">
+      <el-form :model="queryParams" class="form-box" ref="queryForm"
+               :inline="true" style="width:100%;">
+        <el-form-item label="" prop="academicYear">
+          <el-select v-model="queryParams.academicYear" style="width:160px">
+            <el-option
+              v-for="dict in optionList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="category">
+          <div class="table-top-button-box">
+            <div>
+              <p @click="queryParams.category = 'EXAMED'" :class="queryParams.category == 'EXAMED'?'check-table-button':''">已考人员</p>
+              <p @click="queryParams.category = 'NOT_EXAMED'" :class="queryParams.category == 'NOT_EXAMED'?'check-table-button':''">未考人员</p>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="" prop="personType">
+          <div class="table-top-button-box-1">
+            <div>
+              <p @click="queryParams.personType = 2" :class="queryParams.personType == 2?'check-table-button':''">研究生</p>
+              <p @click="queryParams.personType = 3" :class="queryParams.personType == 3?'check-table-button':''">本科生</p>
+              <p @click="queryParams.personType = 1" :class="queryParams.personType == 1?'check-table-button':''">教职工</p>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="" prop="deptId">
+          <el-select v-if="adminType == 1"
+                     v-model="queryParams.deptId"
+                     placeholder="学院"
+                     style="width: 180px">
+            <el-option
+              v-for="dict in optionListA"
+              :key="dict.deptId"
+              :label="dict.deptName"
+              :value="dict.deptId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="examResult">
+          <el-select
+            v-model="queryParams.examResult"
+            placeholder="考试结果"
+            style="width: 150px">
+            <el-option key="1" label="已通过" value="1"/>
+            <el-option key="0" label="未通过" value="0"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="makeupResult">
+          <el-select
+            v-model="queryParams.makeupResult"
+            placeholder="补考结果"
+            style="width: 150px">
+            <el-option key="1" label="已通过" value="1"/>
+            <el-option key="0" label="未通过" value="0"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="account">
+          <el-input
+            maxLength="30"
+            v-model="queryParams.account"
+            placeholder="搜索姓名/学工号"
+            style="width: 150px"
+          />
+        </el-form-item>
+        <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+        <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+        <p class="page-add-common-style-button" style="float: right;" @click="exportButton()">导出</p>
+      </el-form>
+    </div>
+    <div class="page-content-box">
+      <el-table class="table-box"  border :data="dataList">
+        <el-table-column label="姓名" prop="userName"  show-overflow-tooltip/>
+        <el-table-column label="学工号" prop="account" width="140" show-overflow-tooltip/>
+        <el-table-column label="学院" prop="deptName" width="240" show-overflow-tooltip/>
+        <!--<el-table-column label="用户类别" prop="deptName" width="160" show-overflow-tooltip/>-->
+        <el-table-column label="考试类型" prop="examTypeName" width="160" show-overflow-tooltip/>
+        <el-table-column label="学习情况" prop="learningStatus" width="160" show-overflow-tooltip/>
+        <el-table-column label="考试成绩" prop="examScore" width="160" show-overflow-tooltip/>
+        <el-table-column label="考试结果" prop="examResult" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span :class="scope.row.examResult == 0 ?'colorC':(scope.row.examResult == 1 ?'colorA':(scope.row.examResult == 2 ?'colorB':''))">
+              {{scope.row.examResult == 0 ?'未考':(scope.row.examResult == 1 ?'通过':(scope.row.examResult == 2 ?'未通过':''))}}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="补考成绩" prop="makeupScore" width="160" show-overflow-tooltip/>
+        <el-table-column label="补考结果" prop="makeupResult" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span :class="scope.row.makeupResult == 0 ?'colorC':(scope.row.makeupResult == 1 ?'colorA':(scope.row.makeupResult == 2 ?'colorB':''))">
+              {{scope.row.makeupResult == 0 ?'未考':(scope.row.makeupResult == 1 ?'通过':(scope.row.makeupResult == 2 ?'未通过':''))}}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="queryParams.page"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    laboratoryClassTypeGetList,laboratoryLevelConfigGetLevelTitleList,
+  } from "@/api/commonality/permission";
+  import {
+    examElExamTypeList,systemDeptCurrentDept,examElStatisticsGetAcademicYear,examElStatisticsExamGroupedChartDetail,
+  } from "@/api/safetyEducationExaminationNew/index";
+  export default {
+    name: 'addPage',
+    props: {
+      drawerPropsData: {}
+    },
+    data() {
+      return {
+        adminType:0,
+        optionList:[],
+        optionListA:[],
+        //查询条件
+        queryParams:{
+          page:1,
+          pageSize:20,
+          academicYear:'',
+          category:'EXAMED',
+          personType:'2',
+          deptId:'',
+          account:'',
+          examResult:'',
+          makeupResult:'',
+        },
+        //列表数据
+        dataList:[],
+        //数据数量
+        total:0,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+    },
+    methods: {
+      // 初始化
+      initialize() {
+        this.$set(this,'adminType',this.drawerPropsData.adminType);
+        this.$set(this.queryParams,'academicYear',this.drawerPropsData.valueYear);
+        this.$set(this.queryParams,'personType',this.drawerPropsData.personType);
+        this.$set(this.queryParams,'deptId',this.drawerPropsData.deptId);
+        this.systemDeptCurrentDept();
+        this.examElStatisticsGetAcademicYear();
+        this.getList();
+      },
+      //查询按钮
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      //重置按钮
+      resetQuery(){
+        this.$set(this,'queryParams',{
+          page:1,
+          pageSize:20,
+          academicYear:this.drawerPropsData.valueYear,
+          category:'EXAMED',
+          personType:this.drawerPropsData.personType,
+          deptId:this.drawerPropsData.deptId,
+          account:'',
+          examResult:'',
+          makeupResult:'',
+        });
+        this.getList();
+      },
+      getList(){
+        let obj = {
+          page:this.queryParams.page,
+          pageSize:this.queryParams.pageSize,
+          academicYear:this.queryParams.valueYear,
+          category:this.queryParams.category,
+          personType:this.queryParams.personType,
+          account:this.queryParams.account,
+          examResult:this.queryParams.examResult,
+          makeupResult:this.queryParams.makeupResult,
+        }
+        if(this.adminType == 1){
+          obj.deptId = this.queryParams.deptId;
+        }else{
+          obj.deptId = localStorage.getItem('deptId');
+        }
+        examElStatisticsExamGroupedChartDetail(obj).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        })
+      },
+      //学院列表
+      systemDeptCurrentDept(){
+        systemDeptCurrentDept({}).then(response => {
+          const list = response.data || [];
+          this.formatTreeData(list);
+          if(list[0]){
+            this.$set(this,'optionListA',list[0].child);
+          }else{
+            this.$set(this,'optionListA',[]);
+          }
+        });
+      },
+      //学年列表
+      examElStatisticsGetAcademicYear(){
+        examElStatisticsGetAcademicYear({}).then(response => {
+          this.$set(this,'optionList',response.data);
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .dataReportUserListPage-addPage {
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .page-form-title-box {
+      /* 分组筛选按钮 */
+      .table-top-button-box {
+        display: inline-block;
+        vertical-align: top;
+        div {
+          display: flex;
+          p {
+            border: 1px solid #DCDFE6;
+            width: 80px;
+            text-align: center;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            font-size: 14px;
+            &:nth-child(1) { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
+            &:nth-child(2) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
+          }
+          .check-table-button{
+            border: 1px solid #0183fa!important;
+            background-color: #0183fa!important;;
+            color:#fff!important;;
+          }
+        }
+      }
+      .table-top-button-box-1 {
+        display: inline-block;
+        vertical-align: top;
+        div {
+          display: flex;
+          p {
+            border: 1px solid #DCDFE6;
+            width: 80px;
+            text-align: center;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            font-size: 14px;
+            &:nth-child(1) { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
+            &:nth-child(2) { border-left: none; border-right: none; }
+            &:nth-child(3) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
+          }
+          .check-table-button{
+            border: 1px solid #0183fa!important;
+            background-color: #0183fa!important;;
+            color:#fff!important;;
+          }
+        }
+      }
+    }
+    .page-content-box{
+      .colorA{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#28a47c;
+        background-color:#e9f8f1;
+      }
+      .colorB{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#df555f;
+        background-color:#fff0f1;
+      }
+      .colorC{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#999;
+        background-color:#dedede;
+      }
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/dataStatistics/userListPage.vue

@@ -0,0 +1,290 @@
+<!-- 分级考试人员明细 -->
+<template>
+  <div class="page-container dataReportUserListPage-addPage">
+    <div class="page-form-title-box">
+      <el-form :model="queryParams" class="form-box" ref="queryForm"
+               :inline="true" style="width:100%;">
+        <el-form-item label="" prop="valueYear">
+          <el-select v-model="queryParams.valueYear" @change="topChange()" size="small" style="width:220px">
+            <el-option
+              v-for="dict in optionListB"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="personType">
+          <div class="table-top-button-box">
+            <div>
+              <p @click="queryParams.personType = 2" :class="queryParams.personType == 2?'check-table-button':''">研究生</p>
+              <p @click="queryParams.personType = 3" :class="queryParams.personType == 3?'check-table-button':''">本科生</p>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="" prop="deptId">
+          <el-select v-if="adminType == 1"
+                     v-model="queryParams.deptId"
+                     placeholder="学院"
+                     style="width: 180px">
+            <el-option
+              v-for="dict in optionListA"
+              :key="dict.deptId"
+              :label="dict.deptName"
+              :value="dict.deptId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="levelIdClassifyTypeId">
+          <el-cascader
+            v-model="queryParams.levelIdClassifyTypeId"
+            placeholder="分级分类"
+            :options="optionListC"
+            :props="{ checkStrictly: true,expandTrigger: 'hover' }"
+            style="width: 160px"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item label="" prop="account">
+          <el-input
+            maxLength="30"
+            v-model="queryParams.account"
+            placeholder="搜索姓名/学工号"
+            style="width: 160px"
+          />
+        </el-form-item>
+        <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
+        <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+        <p class="page-add-common-style-button" style="float: right;" @click="exportButton()">导出</p>
+      </el-form>
+    </div>
+    <div class="page-content-box">
+      <el-table class="table-box"  border :data="dataList">
+        <el-table-column label="姓名" prop="userName"  show-overflow-tooltip/>
+        <el-table-column label="学工号" prop="account" width="140" show-overflow-tooltip/>
+        <el-table-column label="学院" prop="deptName" width="240" show-overflow-tooltip/>
+        <el-table-column label="状态" prop="bindStatus" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="queryParams.personType == 2"
+              :class="scope.row.bindStatus == 'BOUND' ?'colorA':(scope.row.bindStatus == 'UNBOUND' ?'colorB':(scope.row.bindStatus == 'NO_LAB_NEED' ?'colorC':''))">
+              {{scope.row.bindStatus == 'BOUND' ?'已绑定':(scope.row.bindStatus == 'UNBOUND' ?'未匹配':(scope.row.bindStatus == 'NO_LAB_NEED' ?'无需进入实验室':''))}}
+            </span>
+            <span v-if="queryParams.personType == 3"
+              :class="scope.row.bindStatus == 'BOUND' ?'colorA':(scope.row.bindStatus == 'UNBOUND' ?'colorC':'')">
+              {{scope.row.bindStatus == 'BOUND' ?'已绑定':(scope.row.bindStatus == 'UNBOUND' ?'未匹配':'')}}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="分级" prop="levelName" width="160" show-overflow-tooltip/>
+        <el-table-column label="分类" prop="typeName" width="160" show-overflow-tooltip/>
+        <el-table-column label="实验室" prop="subName" width="160" show-overflow-tooltip/>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="queryParams.page"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    laboratoryClassTypeGetList,laboratoryLevelConfigGetLevelTitleList,
+  } from "@/api/commonality/permission";
+  import {
+    examElStatisticsGetAcademicYear,systemDeptCurrentDept,examElStatisticsLabListDetail,
+  } from "@/api/safetyEducationExaminationNew/index";
+  export default {
+    name: 'addPage',
+    props: {
+      drawerPropsData: {}
+    },
+    data() {
+      return {
+        adminType:0,
+        optionListA:[],
+        optionListB:[],
+        optionListC:[],
+        //查询条件
+        queryParams:{
+          page:1,
+          pageSize:20,
+          valueYear:'',
+          personType:'2',
+          deptId:'',
+          levelIdClassifyTypeId:[],
+          account:'',
+        },
+        //列表数据
+        dataList:[],
+        //数据数量
+        total:0,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+    },
+    methods: {
+      // 初始化
+      initialize() {
+        this.$set(this,'adminType',this.drawerPropsData.adminType);
+        this.$set(this.queryParams,'personType',this.drawerPropsData.personType);
+        this.$set(this.queryParams,'valueYear',this.drawerPropsData.valueYear);
+        this.$set(this.queryParams,'deptId',this.drawerPropsData.deptId);
+        this.examElStatisticsGetAcademicYear();
+        this.systemDeptCurrentDept();
+        this.laboratoryLevelConfigGetLevelTitleList();
+        this.getList();
+      },
+      //查询按钮
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      //重置按钮
+      resetQuery(){
+        this.$set(this,'queryParams',{
+          page:1,
+          pageSize:20,
+          valueYear:this.drawerPropsData.valueYear,
+          personType:this.drawerPropsData.personType,
+          deptId:this.drawerPropsData.deptId,
+          levelIdClassifyTypeId:[],
+          account:'',
+        });
+        this.getList();
+      },
+      getList(){
+        let obj = {
+          page:this.queryParams.page,
+          pageSize:this.queryParams.pageSize,
+          academicYear:this.queryParams.valueYear,
+          personType:this.queryParams.personType,
+          account:this.queryParams.account,
+        }
+        if(this.queryParams.levelIdClassifyTypeId[0]){
+          obj.levelId = this.queryParams.levelIdClassifyTypeId[0];
+        }
+        if(this.queryParams.levelIdClassifyTypeId[1]){
+          obj.classifyTypeId = this.queryParams.levelIdClassifyTypeId[1];
+        }
+        if(this.adminType == 1){
+          obj.deptId = this.queryParams.deptId;
+        }else{
+          obj.deptId = localStorage.getItem('deptId');
+        }
+        examElStatisticsLabListDetail(obj).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        })
+      },
+      //学院列表
+      systemDeptCurrentDept(){
+        systemDeptCurrentDept({}).then(response => {
+          const list = response.data || [];
+          this.formatTreeData(list);
+          if(list[0]){
+            this.$set(this,'optionListA',list[0].child);
+          }else{
+            this.$set(this,'optionListA',[]);
+          }
+        });
+      },
+      //学院列表
+      laboratoryLevelConfigGetLevelTitleList(){
+        laboratoryLevelConfigGetLevelTitleList({}).then(responseA => {
+          laboratoryClassTypeGetList({}).then(responseB => {
+            let list = []
+            for(let i=0;i<responseA.data.length;i++){
+              let obj = {
+                value:responseA.data[i].levelId,
+                label:responseA.data[i].titleName,
+                children:[],
+              }
+              for(let o=0;o<responseB.data.length;o++){
+                obj.children.push({
+                  value:responseB.data[o].typeId,
+                  label:responseB.data[o].typeName,
+                })
+              }
+              list.push(obj)
+            }
+            this.$set(this,'optionListC',list);
+          });
+        });
+      },
+      //学年列表
+      examElStatisticsGetAcademicYear(){
+        examElStatisticsGetAcademicYear({}).then(response => {
+          this.$set(this,'optionListB',response.data);
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .dataReportUserListPage-addPage {
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .page-form-title-box {
+      /* 分组筛选按钮 */
+      .table-top-button-box {
+        display: inline-block;
+        vertical-align: top;
+        div {
+          display: flex;
+          p {
+            border: 1px solid #DCDFE6;
+            width: 80px;
+            text-align: center;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            font-size: 14px;
+            &:nth-child(1) { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
+            &:nth-child(2) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
+          }
+          .check-table-button{
+            border: 1px solid #0183fa!important;
+            background-color: #0183fa!important;;
+            color:#fff!important;;
+          }
+        }
+      }
+    }
+    .page-content-box{
+      .colorA{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#28a47c;
+        background-color:#e9f8f1;
+      }
+      .colorB{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#e88928;
+        background-color:#fff5e8;
+      }
+      .colorC{
+        display: inline-block;
+        text-align: center;
+        width:60px;
+        border-radius:4px;
+        color:#df555f;
+        background-color:#fff0f1;
+      }
+    }
+  }
+</style>