From ab8a6d5adb833344c26277a25a327a2eca6d80a4 Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Sat, 26 Feb 2022 13:25:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=8B=E6=B5=A6=E5=AD=A6=E6=A0=A1=20?=
 =?UTF-8?q?=E5=BE=85=E5=8A=9E=E5=B7=A5=E4=BD=9C=E9=98=B6=E6=AE=B5=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../adminCenter/moduleAndLaySettingConfig.js  |   2 +-
 .../oa/carUseReturn/carUseReturnLarge.vue     |  42 ++-
 .../moduleCom/oa/carUseReturn/searchDom.vue   |  91 +++++
 .../moduleCom/oa/common/dateChoose.vue        |   6 +-
 .../moduleCom/oa/officeCar/interConfig.js     |   9 +
 .../oa/officeCarHistory/carStatusSearch.vue   |  73 ++++
 .../oa/officeCarHistory/officeCarHistory.vue  | 117 +++++++
 .../officeCarHistoryLarge.vue                 | 314 ++++++++++++++++++
 8 files changed, 635 insertions(+), 19 deletions(-)
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/searchDom.vue
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/carStatusSearch.vue
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistory.vue
 create mode 100644 src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistoryLarge.vue

diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js b/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js
index 6e02d4c..5eeef95 100644
--- a/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleAndLaySettingConfig.js
@@ -112,7 +112,7 @@ export const moduleData=[
             purview_code:"hbg_rcbg",menu_name:["newOfficeCar","applyCar"],show_oneLevel:false},
 
         {module_id:'vehicle_record', module_name:'用车记录', relative_crm:['daliyOffice','newOfficeCar','applyCar'],
-            icon:"icon-yongchejilu",module_url_small:'',module_url_large:'',
+            icon:"icon-yongchejilu",module_url_small:'oa/officeCarHistory/officeCarHistory.vue',module_url_large:'oa/officeCarHistory/officeCarHistoryLarge.vue',
             purview_code:"hbg_rcbg",menu_name:["newOfficeCar","applyCar"],show_oneLevel:false},
 
         {module_id:'real_time_inventory', module_name:'即时库存', relative_crm:['daliyOffice','goodsUseManagement','inventoryManagement'],
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue
index eea29a9..9b67449 100644
--- a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/carUseReturnLarge.vue
@@ -1,21 +1,22 @@
 <template>
     <div class="car-use-return-large-style">
         <div class="search-div">
-            <a-input placeholder="请输入车辆名称或车牌号搜索" v-model="carInfo" style="width: 210px"/>
-            <span style="margin-left: 0.5rem">申请日期</span>
-            <a-range-picker :locale="locale"
-                            :getCalendarContainer="getCalendarContainer()"
-                            @change="onDateChange"></a-range-picker>
-            <span style="margin-left: 0.5rem">用车时间</span>
-            <a-range-picker class="time-picker-style"
-                            :getCalendarContainer="getCalendarContainer()"
-                            :show-time="{ format: 'HH:mm' }"
-                            format="YYYY-MM-DD HH:mm"
-                            :placeholder="['开始时间', '结束时间']"
-                            @change="onTimeChange"
-                            @ok="onTimeOk"
-            ></a-range-picker>
-            <a-icon type="search" :style="{ fontSize: '16px', color: '#31A8FA',marginLeft:'0.5rem' }" @click="search"/>
+            <SearchDom @toSearch="toSearch"/>
+            <!--<a-input placeholder="请输入车辆名称或车牌号搜索" v-model="carInfo" style="width: 210px"/>-->
+            <!--<span style="margin-left: 0.5rem">申请日期</span>-->
+            <!--<a-range-picker :locale="locale"-->
+                            <!--:getCalendarContainer="getCalendarContainer()"-->
+                            <!--@change="onDateChange"></a-range-picker>-->
+            <!--<span style="margin-left: 0.5rem">用车时间</span>-->
+            <!--<a-range-picker class="time-picker-style"-->
+                            <!--:getCalendarContainer="getCalendarContainer()"-->
+                            <!--:show-time="{ format: 'HH:mm' }"-->
+                            <!--format="YYYY-MM-DD HH:mm"-->
+                            <!--:placeholder="['开始时间', '结束时间']"-->
+                            <!--@change="onTimeChange"-->
+                            <!--@ok="onTimeOk"-->
+            <!--&gt;</a-range-picker>-->
+            <!--<a-icon type="search" :style="{ fontSize: '16px', color: '#31A8FA',marginLeft:'0.5rem' }" @click="search"/>-->
         </div>
         <div class="content-box-style">
             <div class="change-page-type-style">
@@ -71,6 +72,7 @@
     /*
      * 车辆领用归还
      * */
+    import SearchDom from './searchDom.vue';
     import {Input, DatePicker, Icon, Spin, Empty, Modal, Checkbox} from 'ant-design-vue';
     import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
     import moment from 'moment';
@@ -117,10 +119,15 @@
                 this.getUseDataList();
                 this.getReturnDataList();
             },
-            search: function () {
+            toSearch: function (param) {
                 if (this.domType !== 0) {
                     this.domType = 0;
                 }
+                this.carInfo = param.carInfo;
+                this.startDate = param.startDate;
+                this.endDate = param.endDate;
+                this.startTime = param.startTime;
+                this.endTime = param.endTime;
                 this.getUseDataList();
                 this.getReturnDataList();
             },
@@ -271,7 +278,8 @@
             AEmpty: Empty,
             CheckPage,
             AModal: Modal,
-            ACheckbox: Checkbox
+            ACheckbox: Checkbox,
+            SearchDom
         }
     }
 </script>
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/searchDom.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/searchDom.vue
new file mode 100644
index 0000000..c8f76ac
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/carUseReturn/searchDom.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="office-car-data-serach-dom">
+        <a-input placeholder="请输入车辆名称或车牌号搜索" v-model="carInfo" style="width: 210px"/>
+        <span style="margin-left: 0.5rem">申请日期</span>
+        <a-range-picker :locale="locale"
+                        :getCalendarContainer="getCalendarContainer()"
+                        @change="onDateChange"></a-range-picker>
+        <span style="margin-left: 0.5rem">用车时间</span>
+        <a-range-picker class="time-picker-style"
+                        :getCalendarContainer="getCalendarContainer()"
+                        :show-time="{ format: 'HH:mm' }"
+                        format="YYYY-MM-DD HH:mm"
+                        :placeholder="['开始时间', '结束时间']"
+                        @change="onTimeChange"
+                        @ok="onTimeOk"
+        ></a-range-picker>
+        <a-icon type="search" :style="{ fontSize: '16px', color: '#31A8FA',marginLeft:'0.5rem' }" @click="search"/>
+    </div>
+</template>
+<script>
+    /*
+     * 搜索条件组件
+     * */
+    import {Input, DatePicker, Icon, Spin, Empty, Modal, Checkbox} from 'ant-design-vue';
+    import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
+    import moment from 'moment';
+    export default{
+        data(){
+            return {
+                locale,
+                carInfo: "",
+                startDate: "",
+                endDate: "",
+                startTime: "",
+                endTime: ""
+            }
+        },
+        methods: {
+            getCalendarContainer: function () {
+                return triggerNode => triggerNode.parentNode;
+            },
+            onDateChange(value, dateString) {
+                this.startDate = dateString[0];
+                this.endDate = dateString[1];
+            },
+            onTimeChange: function (value, dateString) {
+                this.startTime = dateString[0];
+                this.endTime = dateString[1];
+            },
+            onTimeOk:function (value) {
+                console.log(value)
+            },
+            search:function () {
+                this.$emit("toSearch",{
+                    carInfo:this.carInfo,
+                    startDate:this.startDate,
+                    endDate:this.endDate,
+                    startTime:this.startTime,
+                    endTime:this.endTime,
+                })
+            }
+        },
+        components: {
+            AInput: Input,
+            ADatePicker: DatePicker,
+            ARangePicker: DatePicker.RangePicker,
+            AIcon: Icon,
+            ASpin: Spin,
+            AEmpty: Empty,
+            AModal: Modal,
+            ACheckbox: Checkbox
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .office-car-data-serach-dom {
+        width: 100%;
+        height: 3rem;
+        line-height: 3rem;
+        display: flex;
+        align-items: center;
+        padding: 0.5rem;
+        .ant-calendar-picker {
+            width: 12rem !important;
+            margin-left: 0.5rem;
+        }
+        .time-picker-style {
+            width: 18rem !important;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/common/dateChoose.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/common/dateChoose.vue
index 61ec3e6..63b048f 100644
--- a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/common/dateChoose.vue
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/common/dateChoose.vue
@@ -16,6 +16,7 @@
     * begin_date:"" 默认当前月1号
     * end_date:""   默认当天
     * hideDefaultDate:"" 是否隐藏默认日期
+    * callInter:是否立刻回调
     * @flushDate 接收回传起止日期
     * */
 
@@ -34,7 +35,7 @@
                 this.getNowTime();
             }
         },
-        props:['begin_date','end_date','hideDefaultDate'],
+        props:['begin_date','end_date','hideDefaultDate','callInter'],
 //        props:{
 //            begin_date:{
 //                type:moment,
@@ -85,6 +86,9 @@
                             let day = resData.data.day;
                             this.beginDate = moment(year + "-" + month + "-01");
                             this.endDate = moment(year + "-" + month + "-" + day);
+                            if(this.callInter === true){
+                                this.flushDate();
+                            }
                         }
                     }
                 })
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js
index 242bdd6..8873f9d 100644
--- a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCar/interConfig.js
@@ -77,6 +77,15 @@ export default {
         url: '/intellioa/carManage/carApply/cancelApplyCar',
         method: 'post',
         isTestLogin: true,
+    },
+
+    /*
+    * 用车历史记录
+    * */
+    'listAllApplyCar':{
+        url: '/intellioa/carManage/carApply/listAllApplyCar',
+        method: 'get',
+        isTestLogin: true,
     }
 
 }
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/carStatusSearch.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/carStatusSearch.vue
new file mode 100644
index 0000000..88b8907
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/carStatusSearch.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="status-search-style">
+        <span>审批状态</span>
+        <a-select :value="checkStatus" style="width: 100px"
+                  @change="checkChange">
+            <a-select-option v-for="item in checkStatusArr" :key="item.id">
+                {{ item.name }}
+            </a-select-option>
+        </a-select>
+        <span style="margin-left: 0.5rem">用车状态</span>
+        <a-select :value="useStatus" style="width: 100px" @change="useChange">
+            <a-select-option v-for="item in useStatusArr" :key="item.id">
+                {{ item.name }}
+            </a-select-option>
+        </a-select>
+    </div>
+</template>
+<script>
+    /*
+     * 审批状态 用车状态搜索组件
+     * */
+    import {Select} from 'ant-design-vue';
+    export default{
+        data(){
+            return {
+                checkStatusArr: [
+                    {id: "", name: "全部"},
+                    {id: 0, name: "待审批"},
+                    {id: 1, name: "已通过"},
+                    {id: -1, name: "未通过"},
+                    {id: 11, name: "已撤回"},
+                ],
+                checkStatus: "",
+                useStatusArr: [
+                    {id: "", name: "全部"},
+                    {id: 0, name: "待领车"},
+                    {id: 1, name: "待还车"},
+                    {id: 2, name: "还车待审批"},
+                    {id: 3, name: "已还车"},
+                    {id: -1, name: "已取消"},
+                ],
+                useStatus: "",
+            }
+        },
+        methods: {
+            //审批状态改变
+            checkChange: function (value) {
+                this.checkStatus = value;
+                this.$emit("statusChange",{checkStatus:this.checkStatus,useStatus:this.useStatus})
+            },
+            //用车状态改变
+            useChange: function (value) {
+                this.useStatus = value;
+                this.$emit("statusChange",{checkStatus:this.checkStatus,useStatus:this.useStatus})
+            },
+        },
+        components: {
+            ASelect: Select,
+            ASelectOption: Select.Option,
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .status-search-style {
+        width: auto;
+        display: flex;
+        display: flex;
+        align-items: center;
+        .ant-select {
+            margin-left: 0.5rem;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistory.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistory.vue
new file mode 100644
index 0000000..cbb8861
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistory.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="office-car-history-style">
+        <DateChoose @flushDate="flushDate" :begin_date="begin_date" :end_date="end_date" :callInter="true"></DateChoose>
+        <div class="status-search-box">
+            <StatusSearch @statusChange="statusChange"/>
+        </div>
+        <div class="data-list-content-style">
+            <a-spin :spinning="isLoading">
+                <vue-scroll :ops="listScroll" style="height:25rem">
+                    <div v-if="!isLoading && dataList.length > 0" class="data-list-style">
+                        <InfoRow v-for="item,index in dataList" :key="'info-'+ index" :info="item"/>
+                    </div>
+                    <div v-if="!isLoading && dataList.length === 0" class="data-list-style">
+                        <a-empty></a-empty>
+                    </div>
+                </vue-scroll>
+            </a-spin>
+        </div>
+    </div>
+</template>
+<script>
+    import InterConfig from '../officeCar/interConfig';
+    import DateChoose from '../common/dateChoose.vue';
+    import StatusSearch from './carStatusSearch.vue';
+    import moment from 'moment';
+    import InfoRow from '../carUseReturn/infoRow.vue';
+    import {Empty, Spin} from 'ant-design-vue';
+    export default{
+        data(){
+            return {
+                listScroll: this.StaticParams.scrollOption,
+                isLoading: false,
+                begin_date: null,
+                end_date: null,
+                checkStatus: "",
+                useStatus: "",
+                pageNumber: 1,
+                pageSize: 100000,
+                totalPage: 0,
+                totolNum: 0,
+                dataList: [],
+            }
+        },
+        methods: {
+            flushDate: function (param) {
+                this.begin_date = moment(param.beginDate).format("YYYY-MM-DD");
+                this.end_date = moment(param.endDate).format("YYYY-MM-DD");
+                this.getDataList();
+            },
+            //状态改变
+            statusChange: function (param) {
+                this.checkStatus = param.checkStatus;
+                this.useStatus = param.useStatus;
+                this.getDataList();
+            },
+            //获取数据列表
+            getDataList: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    person_id: this.BaseConfig.userInfo.person_id,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize,
+                    apply_begin_time: this.begin_date,
+                    apply_end_time: this.end_date,
+                    apply_check_flag: this.checkStatus,
+                    apply_car_status: this.useStatus,
+                }
+                this.isLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.listAllApplyCar.url,
+                    params: param,
+                    method: InterConfig.listAllApplyCar.method,
+                    isTestLogin: InterConfig.listAllApplyCar.isTestLogin,
+                }], (result) => {
+                    this.isLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        this.dataList = resData.data.list;
+                        this.totalPage = resData.data.total_page;
+                        this.totolNum = resData.data.total_row;
+                    }
+                })
+            }
+        },
+        components: {
+            DateChoose,
+            StatusSearch,
+            InfoRow,
+            AEmpty: Empty,
+            ASpin: Spin
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .office-car-history-style {
+        width: 100%;
+        min-height: 20rem;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 0.5rem;
+        .status-search-box {
+            width: 100%;
+            height: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .data-list-content-style {
+            width: 100%;
+            height: auto;
+            .data-list-style {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistoryLarge.vue b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistoryLarge.vue
new file mode 100644
index 0000000..1ae0091
--- /dev/null
+++ b/src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/officeCarHistory/officeCarHistoryLarge.vue
@@ -0,0 +1,314 @@
+<template>
+    <div class="office-car-history-large-style">
+        <SearchDom @toSearch="toSearch"/>
+        <div class="status-search-box-style">
+            <StatusSearch @statusChange="statusChange"/>
+        </div>
+        <div class="apply-content-div">
+            <a-spin :spinning="isLoading">
+                <vue-scroll :ops="listScroll" style="height:25rem" v-if="!isLoading && dataList.length > 0">
+                    <div class="data-list-div">
+                        <div class="data-row-div" v-for="item,index in dataList" :key="'info-'+ index">
+                            <InfoRow :info="item"/>
+                        </div>
+                    </div>
+                </vue-scroll>
+                <div class="no-data-div" v-if="!isLoading && dataList.length == 0">
+                    <a-empty></a-empty>
+                </div>
+            </a-spin>
+        </div>
+        <div class="page-dom-div">
+            <a-icon type="left-circle" title="上一页"
+                    :class="'page-icon-dom '+ (pageNumber == 1?'cannot-click':'can-click')"
+                    v-on:click="changePage('previous')"/>
+            <span class="total-num-span">共{{totolNum}}条</span>
+            <a-icon type="right-circle" title="下一页"
+                    :class="'page-icon-dom '+ (pageNumber == totalPage?'cannot-click':'can-click')"
+                    v-on:click="changePage('next')"/>
+        </div>
+    </div>
+</template>
+<script>
+    import SearchDom from '../carUseReturn/searchDom.vue';
+    import StatusSearch from './carStatusSearch.vue';
+    import InterConfig from '../officeCar/interConfig';
+    import InfoRow from '../carUseReturn/infoRow.vue';
+    import {Spin, Empty, Icon} from 'ant-design-vue';
+    export default{
+        data(){
+            return {
+                pageNumber: 1,
+                pageSize: 8,
+                totalPage: 0,
+                totolNum: 0,
+                listScroll: this.StaticParams.scrollOption,
+                isLoading: false,
+                carInfo: "",
+                //申请起止日期
+                startDate: "",
+                endDate: "",
+                //用车时间
+                startTime: "",
+                endTime: "",
+                checkStatus: "",//审核状态
+                useStatus: "",//使用状态
+                dataList:[],
+            }
+        },
+        created(){
+            this.getDataList();
+        },
+        methods: {
+            toSearch: function (param) {
+                this.carInfo = param.carInfo;
+                this.startDate = param.startDate;
+                this.endDate = param.endDate;
+                this.startTime = param.startTime;
+                this.endTime = param.endTime;
+                this.getDataList();
+            },
+            statusChange: function (param) {
+                this.checkStatus = param.checkStatus;
+                this.useStatus = param.useStatus;
+            },
+            getDataList: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    person_id: this.BaseConfig.userInfo.person_id,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize,
+                    car_info: this.carInfo,
+                    apply_begin_time: this.startDate,
+                    apply_end_time: this.endDate,
+                    use_begin_time: this.startTime,
+                    use_end_time: this.endTime,
+                    apply_check_flag: this.checkStatus,
+                    apply_car_status: this.useStatus,
+                }
+                this.isLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.listAllApplyCar.url,
+                    params: param,
+                    method: InterConfig.listAllApplyCar.method,
+                    isTestLogin: InterConfig.listAllApplyCar.isTestLogin,
+                }], (result) => {
+                    this.isLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        this.dataList = resData.data.list;
+                        this.totalPage = resData.data.total_page;
+                        this.totolNum = resData.data.total_row;
+                    }
+                })
+            },
+            changePage:function (type) {
+                if (type == 'previous') {
+                    if (this.pageNumber == 1) {
+                        return;
+                    }
+                    this.pageNumber--;
+                } else if (type == 'next') {
+                    if (this.pageNumber == this.totalPage) {
+                        return;
+                    }
+                    this.pageNumber++;
+                }
+                this.getDataList();
+            }
+        },
+        components: {
+            SearchDom,
+            StatusSearch,
+            ASpin: Spin,
+            AEmpty: Empty,
+            AIcon: Icon,
+            InfoRow
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .office-car-history-large-style {
+        width: 100%;
+        min-height: 20rem;
+        display: flex;
+        flex-direction: column;
+        .status-search-box-style {
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-right: 1rem;
+        }
+        .apply-content-div {
+            width: 100%;
+            min-height: 15rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .ant-spin-nested-loading {
+                width: 100% !important;
+            }
+            .data-list-div {
+                width: 100%;
+                height: auto;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: flex-start;
+                .data-row-div {
+                    width: 50%;
+                    min-height: 5rem;
+                    display: flex;
+                    /* flex-direction: column;*/
+                    border-bottom: 1px solid #f2f2f2;
+                    position: relative;
+                    background-color: #f2f2f2;
+                    margin-top: 0.5rem;
+                    color: #7F7F7F;
+                    padding: 0.5rem;
+                    .user-image-box {
+                        width: 80px;
+                        height: auto;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    .apply-info-box {
+                        width: calc(100% - 80px);
+                        height: auto;
+                        display: flex;
+                        flex-direction: column;
+                        position: relative;
+                        .time-row-style {
+                            width: 100%;
+                            height: 2rem;
+                            line-height: 2rem;
+                        }
+                        .meeting-info-style {
+                            width: 100%;
+                            height: 6rem;
+                            background-color: white;
+                            margin-top: 0.2rem;
+                            display: flex;
+                            flex-direction: column;
+                            padding: 0.2rem;
+                            .top-info-row-div {
+                                width: 100%;
+                                display: flex;
+                                margin-bottom: 0.2rem;
+                                .room-type-div {
+                                    border: 1px solid #31a8fa;
+                                    color: #31a8fa;
+                                    padding: 0 0.2rem;
+                                    border-radius: 5px;
+                                }
+                                .default-span-div {
+                                    width: calc(100% - 10rem);
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                    white-space: nowrap;
+                                    margin-left: 0.5rem;
+                                }
+                            }
+                            .info-row-div {
+                                width: 100%;
+                                height: 100%;
+                                display: flex;
+                                flex-wrap: wrap;
+                                justify-content: flex-start;
+                                margin-top: 0.5rem;
+                                overflow-y: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                .room-other-info-div {
+                                    padding: 0 0.5rem;
+                                    /*background-color: #f59a23;*/
+                                    border-radius: 10px;
+                                    margin-right: 0.5rem;
+                                    margin-bottom: 0.2rem;
+                                }
+                                .no-data-tips {
+                                    background-color: #f2f2f2;
+                                    color: black;
+                                }
+                            }
+                        }
+
+                    }
+                    .meeting-status-flag-style {
+                        position: absolute;
+                        right: 5px;
+                        border: 1px solid #cccccc;
+                        padding: 5px 10px;
+                        transform: rotate(7deg);
+                        -ms-transform: rotate(7deg); /* IE 9 */
+                        -moz-transform: rotate(7deg); /* Firefox */
+                        -webkit-transform: rotate(7deg); /* Safari 和 Chrome */
+                        -o-transform: rotate(7deg); /* Opera */
+                    }
+                    .not-start {
+                        border: 1px solid #ec8692;
+                        color: #ec8692;
+                    }
+                    .is-meeting {
+                        border: 1px solid #f3d7b1;
+                        color: #f3d7b1;
+                    }
+                    .is-delayed {
+                        border: 1px solid #a64bfb;
+                        color: #a64bfb;
+                    }
+                    .button-div {
+                        position: absolute;
+                        top: 0;
+                        right: -0.5rem;
+                        bottom: 0;
+                        /* padding: 1rem 0.5rem;*/
+                        color: white;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        opacity: 0.8;
+                        flex-wrap: nowrap;
+                        .button-span {
+                            width: 50px;
+                            height: 100%;
+                            cursor: pointer;
+                            margin-left: 2px;
+                            background-color: #31a8fa;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            padding: 0.5rem;
+                        }
+
+                    }
+                }
+            }
+        }
+        .page-dom-div {
+            height: 2.5rem;
+            line-height: 2.5rem;
+            text-align: right;
+            padding-right: 0.5rem;
+            .page-icon-dom {
+                font-size: 1.2rem;
+                border: none;
+                border-radius: 1rem;
+            }
+            .cannot-click {
+                background-color: #a3b0c0;
+                color: white;
+            }
+            .can-click {
+                background-color: #31a8fa;
+                color: white;
+            }
+            .total-num-span {
+                margin-left: 1rem;
+                margin-right: 1rem;
+            }
+        }
+    }
+</style>
\ No newline at end of file