no message

webConfig/src/App.vue

@@ -8,86 +8,91 @@
 </template>
 
 <script>
+    Number.prototype.formatNumberRgx = function() {
+        var parts = this.toString().split(".");
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return parts.join(".");
+    };
 
-import Header from './components/header.vue'
-import { mapGetters } from 'vuex'
+    import Header from './components/header.vue'
+    import { mapGetters } from 'vuex'
 
-export default {
-    name: 'App',
-    computed:{
-        ...mapGetters({
-            token:'token',
-            client_key:'client_key',
-            username:'username',
-            version:'version',
-            
-            routerStr:'routerStr',
+    export default {
+        name: 'App',
+        computed:{
+            ...mapGetters({
+                token:'token',
+                client_key:'client_key',
+                username:'username',
+                version:'version',
+                
+                routerStr:'routerStr',
 
-            avatar:'avatar',
+                avatar:'avatar',
 
-        }),
-    },
-    components: {
-        Header
-    },
-    created(){
-        let linkTypeArr =  window.location.href.split("/");
-        let linkType = linkTypeArr[linkTypeArr.length-1];
-        this.$store.commit('ROUTERSTRFUN',{
-            routerStr:'/'+linkType
-        })
-        document.title = 'inHealth-'+linkType
-
-        this.$router.beforeEach((to, from, next) => {
-            // console.log(to.path,'--------')
-            if(to.path == '/login'||to.path == '/retrievePassword'){
-                this.headersShow = false
-            }else{
-                this.headersShow = true
-            }
-            console.log(this.headersShow)
+            }),
+        },
+        components: {
+            Header
+        },
+        created(){
+            let linkTypeArr =  window.location.href.split("/");
+            let linkType = linkTypeArr[linkTypeArr.length-1];
             this.$store.commit('ROUTERSTRFUN',{
-                routerStr:to.path
+                routerStr:'/'+linkType
             })
+            document.title = 'inHealth-'+linkType
 
-            next();
-        })
-    },
-    mounted(){
-        let this_ = this;
-        let width = document.body.offsetWidth;
-        if(width >= 1920){
-            $('html').css({'font-size':'95.01%'})
-            this.$store.commit('REMRATIOFUN',{
-                remRatio:0.9501*16,
-            })
-        }else{
-            $('html').css({'font-size':width*62.5/1200+'%'})
-            this.$store.commit('REMRATIOFUN',{
-                remRatio:width*62.5/1200/100*16,
+            this.$router.beforeEach((to, from, next) => {
+                // console.log(to.path,'--------')
+                if(to.path == '/login'||to.path == '/retrievePassword'){
+                    this.headersShow = false
+                }else{
+                    this.headersShow = true
+                }
+                console.log(this.headersShow)
+                this.$store.commit('ROUTERSTRFUN',{
+                    routerStr:to.path
+                })
+
+                next();
             })
-        }
-        window.onresize = function(){
-            width = document.body.offsetWidth;
-            // console.log(width)
+        },
+        mounted(){
+            let this_ = this;
+            let width = document.body.offsetWidth;
             if(width >= 1920){
                 $('html').css({'font-size':'95.01%'})
-                this_.$store.commit('REMRATIOFUN',{
+                this.$store.commit('REMRATIOFUN',{
                     remRatio:0.9501*16,
                 })
             }else{
                 $('html').css({'font-size':width*62.5/1200+'%'})
-                this_.$store.commit('REMRATIOFUN',{
+                this.$store.commit('REMRATIOFUN',{
                     remRatio:width*62.5/1200/100*16,
                 })
             }
-            this_.$store.commit('UPDATEREMRATIOFUN',{
-                updateRemRatio:this_.updateRemRatio+1,
-            })
-            
+            window.onresize = function(){
+                width = document.body.offsetWidth;
+                // console.log(width)
+                if(width >= 1920){
+                    $('html').css({'font-size':'95.01%'})
+                    this_.$store.commit('REMRATIOFUN',{
+                        remRatio:0.9501*16,
+                    })
+                }else{
+                    $('html').css({'font-size':width*62.5/1200+'%'})
+                    this_.$store.commit('REMRATIOFUN',{
+                        remRatio:width*62.5/1200/100*16,
+                    })
+                }
+                this_.$store.commit('UPDATEREMRATIOFUN',{
+                    updateRemRatio:this_.updateRemRatio+1,
+                })
+                
+            }
         }
     }
-}
 </script>
 
 <style type="text/css" lang="less">

webConfig/src/components/header.vue

@@ -10,11 +10,11 @@
                         <div class="nav_ul">
                             <div class="nav_title"><span class="span">Control Deck</span></div>
                             <div class="nav_li" @click="linkToFun('/dashboard')" :class="{'select':routerStr == '/dashboard'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Dashboard</span></div>
-                            <div class="nav_li"  @click="linkToFun('/projectManagement')" :class="{'select':routerStr == '/projectManagement'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Project Management</span></div>
-                            <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Group Configuration</span></div>
+                            <div class="nav_li" @click="linkToFun('/projectManagement')" :class="{'select':routerStr == '/projectManagement'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">Project Management</span></div>
+                            <!-- <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Group Configuration</span></div>
                             <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Video Surveillance</span></div>
-                            <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Weather Monitoring</span></div>
-                            <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">GIS Map</span></div>
+                            <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Weather Monitoring</span></div> -->
+                            <div class="nav_li" @click="linkToFun('GIS')" :class="{'select':routerStr == '/GIS'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">GIS Map</span></div>
                         </div>
                         <div class="nav_ul">
                             <div class="nav_title"><span class="span">Maintain</span></div>

webConfig/src/router.js

@@ -7,6 +7,7 @@ Vue.use(VueRouter)
 
 const dashboard = () => import('./views/dashboard.vue');
 const projectManagement = () => import('./views/projectManagement.vue');
+const GISMap = () => import('./views/GISMap.vue');
 
 const routes = [
     {
@@ -23,6 +24,11 @@ const routes = [
         name: 'projectManagement',
         component: projectManagement
     },
+    {
+        path: '/GISMap',
+        name: 'GISMap',
+        component: GISMap
+    },
 ]
 
 const router = new VueRouter({

webConfig/src/views/projectManagement.vue

@@ -33,23 +33,23 @@
                         <p class="p"><i class="iconfont icon-dizhi"></i><span class="span2">635 Renmin Road, Haidian District, Beijing</span></p>
                         <div class="data_bpx">
                             <div class="li">
-                                <p class="p1">{{(8831).toLocaleString()}}</p>
+                                <p class="p1">{{(8831).formatNumberRgx()}}</p>
                                 <p class="p2">Lights</p>
                             </div>
                             <div class="li">
-                                <p class="p1">{{(8831).toLocaleString()}}</p>
+                                <p class="p1">{{(8831).formatNumberRgx()}}</p>
                                 <p class="p2">Network</p>
                             </div>
                             <div class="li">
-                                <p class="p1"><span class="span1">{{(8831).toLocaleString()}}</span><span class="span2">5%</span></p>
+                                <p class="p1"><span class="span1">{{(8831).formatNumberRgx()}}</span><span class="span2">5%</span></p>
                                 <p class="p2">On-line</p>
                             </div>
                             <div class="li">
-                                <p class="p1"><span class="span1">{{(8831).toLocaleString()}}</span><span class="span2">5%</span></p>
+                                <p class="p1"><span class="span1">{{(8831).formatNumberRgx()}}</span><span class="span2">5%</span></p>
                                 <p class="p2">Light-up</p>
                             </div>
                             <div class="li">
-                                <p class="p1"><span class="span1">{{(439).toLocaleString()}}</span><span class="span2">5%</span></p>
+                                <p class="p1"><span class="span1">{{(439).formatNumberRgx()}}</span><span class="span2">5%</span></p>
                                 <p class="p2">Flaut</p>
                             </div>
                         </div>
@@ -70,6 +70,164 @@
                     </div>
                 </div>
                 <div class="main_top_right">
+                    <div class="weather_top">
+                        <div class="weather_top_l">
+                            <div class="box1">
+                                <img src="../img/weather/304.png">
+                            </div>
+                            <div class="box2">
+                                <p class="p1">Today</p>
+                                <p class="p2">Cloudy to sunny</p>
+                            </div>
+                        </div>
+                        <div class="weather_top_r">
+                            <div class="box1">
+                                <img src="../img/sunrise.png">
+                                <p class="p2">12:00</p>
+                            </div>
+                            <div class="box2">
+                                <img src="../img/sunset.png">
+                                <p class="p2">16:00</p>
+                            </div>
+                            <div class="box3"><span>7℃</span></div>
+                        </div>
+                    </div>
+                    <div class="weather_top_bottom">
+                        <div class="li">
+                            <p class="p1">Mon</p>
+                            <img src="../img/weather/304.png">
+                            <p class="p2">+5/+8</p>
+                        </div>
+                        <div class="li">
+                            <p class="p1">Tue</p>
+                            <img src="../img/weather/304.png">
+                            <p class="p2">+5/+8</p>
+                        </div>
+                        <div class="li">
+                            <p class="p1">Wed</p>
+                            <img src="../img/weather/304.png">
+                            <p class="p2">+5/+8</p>
+                        </div>
+                        <div class="li">
+                            <p class="p1">Thu</p>
+                            <img src="../img/weather/304.png">
+                            <p class="p2">+5/+8</p>
+                        </div>
+                        <div class="li">
+                            <p class="p1">Fri</p>
+                            <img src="../img/weather/304.png">
+                            <p class="p2">+5/+8</p>
+                        </div>
+                        <div class="li">
+                            <p class="p1">Sat</p>
+                            <img src="../img/weather/304.png">
+                            <p class="p2">+5/+8</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="main_table">
+                <div class="table_top">
+                    <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_division')">
+                        <span class="el-dropdown-link">
+                            <span>{{divisionName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
+                        </span>
+                        <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_projectManagement_division">
+                            <el-dropdown-item v-for="item in divisionNav" :class="{'select':item.id==division}" :command="{'key':'division','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                    <div class="nav_box">
+                        <div class="li select"><span>All</span></div>
+                        <div class="li"><span>Overdischarge</span></div>
+                        <div class="li"><span>Overpressure</span></div>
+                        <div class="li"><span>Overcurrent</span></div>
+                        <div class="li"><span>Flaut</span></div>
+                    </div>
+                    <div class="btn"><i class="iconfont icon-piliangcaozuo"></i><span>Batch management</span></div>
+                </div>
+                <el-table
+                    ref="deviceList"
+                    v-loading="loading.deviceList"
+                    element-loading-background="rgba(0, 0, 0, 0.5)"
+                    height="calc(100% - 9.6rem)"
+                    :data="deviceList">
+                    <el-table-column
+                        label="Num"
+                        prop="webIndex"
+                        align="center"
+                        header-align="center"
+                        width="60">
+                    </el-table-column>
+                    <el-table-column
+                        v-for="(item) in deviceArr"
+                        :key="'table_'+item.prop"
+                        :prop="item.prop"
+                        :label="item.label"
+                        :align="item.align?item.align:'center'"
+                        :width="item.width"
+                        :show-overflow-tooltip="true"
+                        :min-width="item.minWidth">
+                        <template slot-scope="scope">
+                            <div v-if="item.type != 1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</div>
+                            <div v-if="item.prop == 'city'" class="city">
+                                <i></i><span>{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
+                            </div>
+                            <div v-if="item.prop == 'total'" class="total">
+                                <span class="span1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
+                                <i></i>
+                                <span class="span2">{{scope.row['bl']}}{{item.unit?item.unit:''}}</span>
+                            </div>
+
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column
+                        align="center"
+                        :width="160"
+                        :label="'operation'">
+                        <template slot-scope="scope">
+                            <span class="btn" @click="seeFun(scope.row)" title="See">
+                                <i class="iconfont icon-chakanxiangqing"></i>
+                            </span>
+                            <span class="btn" @click="editFun(scope.row)" title="Edit">
+                                <i class="iconfont icon-bianji"></i>
+                            </span>
+                            <span class="btn" @click="historicalFun(scope.row)" title="Historical">
+                                <i class="iconfont icon-lishi"></i>
+                            </span>
+                            <span class="btn" @click="gisFun(scope.row)" title="GIS">
+                                <i class="iconfont icon-GIS"></i>
+                            </span>
+                            <span class="btn" @click="weatherFun(scope.row)" title="Weather">
+                                <i class="iconfont icon-tianqi"></i>
+                            </span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div class="pagination_box">
+                    <div class="left">
+                        <div class="totle">
+                            <span class="span1">Total</span>
+                            <span class="span2">{{total}}</span>
+                        </div>
+                        <div class="line"></div>
+                        <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_division')">
+                            <span class="el-dropdown-link">
+                                <span>{{pageSizeName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
+                            </span>
+                            <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_projectManagement_division">
+                                <el-dropdown-item v-for="item in pageSizeArr" :class="{'select':item.id==pageSize}" :command="{'key':'pageSize','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                    </div>
+                    <el-pagination
+                      @current-change="handleCurrentChange"
+                      :current-page="currentPage"
+                      :page-sizes="pageSizeArr"
+                      :page-size="10"
+                      layout="prev, pager, next, jumper"
+                      :total="total">
+                    </el-pagination>
                 </div>
             </div>
         </div>
@@ -96,11 +254,13 @@
                 deviceList:[],
                 deviceArr:[],
 
-                faultInformationList:[],
-                faultInformationArr:[],
-
                 myChart2:'',
 
+                currentPage:1,
+                pageSize:0,
+                total:400,
+                pageSizeArr:[{id:10,name:'10/page'},{id:20,name:'20/page'},{id:50,name:'50/page'},{id:100,name:'100/page'}],
+
                 loading:{
                     deviceList:false,
                     faultInformationList:false,
@@ -123,10 +283,10 @@
                 }
                 return name;
             },
-            rightDateName(){
+            pageSizeName(){
                 let name;
-                for(let d of this.rightDateNav){
-                    if(d.id == this.rightDate){
+                for(let d of this.pageSizeArr){
+                    if(d.id == this.pageSize){
                         name = d.name;
                     }
                 }
@@ -136,34 +296,31 @@
 		mounted(){
             this.rightDate = '0';
             this.division = '0';
-            this.district = '0';
+
+            this.pageSize = 10;
+            // this.currentPage = 1;
 
             this.deviceArr = [
-                {prop:'city',label:'City',align:'left',minWidth:70,type:1},
-                {prop:'total',label:'Total',minWidth:70,type:1},
-                {prop:'power',label:'Power',minWidth:70},
-                {prop:'online',label:'On-line',minWidth:70},
-                {prop:'offline',label:'Off-line',minWidth:70},
-                {prop:'fault',label:'Fault',minWidth:70},
+                {prop:'ID',label:'ID',align:'left',minWidth:60},
+                {prop:'State',label:'State',minWidth:60,type:1},
+                {prop:'Section',label:'Section',minWidth:60},
+                {prop:'Brightness',label:'Brightness',minWidth:80,type:1},
+                {prop:'Wireless',label:'Wireless',minWidth:70},
+                {prop:'Power',label:'Power',minWidth:60},
+                {prop:'Chargingstage',label:'Charging stage',minWidth:90},
+                {prop:'Voltage',label:'Voltage',minWidth:70},
+                {prop:'ElectricQuantity',label:'Electric quantity',minWidth:100},
+                {prop:'Overdischarge',label:'Overdischarge',minWidth:80},
+                {prop:'SolarPower',label:'Solar power',minWidth:70},
+                {prop:'Fault',label:'Fault',minWidth:60},
             ];
             this.deviceList = [
-                {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:1},
-                {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:2},
-                {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:3},
-            ];
-
-            this.faultInformationArr = [
-                {prop:'project',label:'Project',minWidth:70},
-                {prop:'division',label:'Division/District/Upazilla',minWidth:120,type:1},
-                {prop:'lightId',label:'Light ID',minWidth:70},
-                {prop:'faultType',label:'Fault type',minWidth:70},
-                {prop:'faultTime',label:'Fault time',width:160},
-            ];
-            this.faultInformationList = [
-                {'project':5,'division':5,'district':'5%','dpazilla':5,'lightId':5,'faultType':5,'faultTime':5},
+                {'ID':4095,'State':5,'Section':'Road1523','Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:1},
+                {'ID':4095,'State':5,'Section':'Road1523','Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:2},
+                {'ID':4095,'State':5,'Section':'Road1523','Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:3},
             ];
             let i = 1;
-            for(let d of this.faultInformationList){
+            for(let d of this.deviceList){
                 d.webIndex = i;
                 i++;
             }
@@ -180,12 +337,6 @@
             commandDropdown(obj){
                 this.$set(this,obj.key,obj.id)
             },
-            tableEnter(data){
-              this.tableShowId = data.id;
-            },
-            tableLeave(){
-              this.tableShowId = '-1';
-            },
             /*设备列表*/
             getLightListKeyUp(e){
                 if(e.key == 'Enter'){
@@ -195,6 +346,9 @@
             getLightList(){
 
             },
+            handleCurrentChange(val){
+                console.log(`current page: ${val}`);
+            }
         },
         watch:{
 
@@ -204,6 +358,14 @@
 
 <style type="text/css" lang="less">
 	.projectManagement_template{
+        width: 100%;
+        height: 100%;
+        // height: 105rem;
+        min-height: 50rem;
+        // min-width: 120rem;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
 		.nav_top{
 			display: flex;
 			justify-content: space-between;
@@ -267,6 +429,10 @@
                         color: #fff;
                         font-size: 1rem;
                         cursor: pointer;
+
+                        position: absolute;
+                        top: 0;
+                        right: 0;
                     }
                 }
                 .btn{
@@ -274,10 +440,16 @@
                     display: flex;
                     align-items: center;
                     padding: 0.5rem 1rem;
-                    height:1.8rem;
+                    height:2rem;
                     background:rgba(255,255,255,1);
                     border-radius:0.2rem 0.1rem 0.1rem 0.2rem;
                     border:0.1rem solid rgba(240,240,240,1);
+
+                    cursor: pointer;
+                    font-size:1rem;
+                    font-family:PingFang-SC-Medium,PingFang-SC;
+                    font-weight:500;
+                    color:rgba(51,51,51,1);
                     img{
                         height: 1.2rem;
                         margin-right: 0.5rem;
@@ -288,6 +460,7 @@
         .projectManagement_main{
             background:rgba(246,248,250,1);
             padding: 0.8rem 1.5rem 1.5rem;
+            height: calc(100% - 3.3rem);
             .main_top{
                 margin-top: 0.8rem;
                 display: flex;
@@ -387,7 +560,7 @@
                         width: 18.8rem;
                         border-left: 0.1rem dotted #fff;
                         padding-top: 0.8rem;
-                        padding-left: 0.6rem;
+                        padding-left: 0.8rem;
                         .box{
                             margin-bottom: 0.6rem;
                             .p1{
@@ -400,7 +573,7 @@
                                     position: absolute;
                                     display: inline-block;
                                     top: 0.3rem;
-                                    left: -1rem;
+                                    left: -1.2rem;
                                     width:0.5rem;
                                     height:0.5rem;
                                     background:rgba(252,134,64,1);
@@ -418,6 +591,321 @@
                         }
                     }
                 }
+                .main_top_right{
+                    margin-left: 0.8rem;
+                    flex: 1;
+                    height:11.8rem;
+                    background:rgba(255,255,255,1);
+                    border-radius:0.3rem;
+                    border:0.1rem solid rgba(240,240,240,1);
+                    .weather_top{
+                        display: flex;
+                        justify-content: space-between;
+                        padding: 1.4rem 1.6rem 0 1.6rem;
+                        .weather_top_l{
+                            display: flex;
+                            height: 2.8rem;
+                            .box1{
+                                img{
+                                    height: 2.8rem;
+                                }
+                            }
+                            .box2{
+                                margin-left: 0.5rem;
+                            }
+                            .p1{
+                                font-size:1.2rem;
+                                font-family:PingFangSC-Regular,PingFang SC;
+                                font-weight:400;
+                                color:rgba(51,51,51,1);
+                            }
+                        }
+                        .p2{
+                            font-size:1rem;
+                            font-family:PingFangSC-Regular,PingFang SC;
+                            font-weight:400;
+                            color:rgba(101,112,133,1);
+                        }
+                        .weather_top_r{
+                            display: flex;
+                            .box1,.box2{
+                                text-align:center;
+                                img{
+                                    height: 1.6rem;
+                                }
+                            }
+                            .box2{
+                                margin-left: 2.2rem;
+                            }
+                            .box3{
+                                font-size:2rem;
+                                font-family:PingFang-SC-Regular,PingFang-SC;
+                                font-weight:400;
+                                color:rgba(34,34,34,1);
+                                span{
+                                    position: relative;
+                                    margin-left: 1.2rem;
+                                    padding-left: 0.8rem;
+                                    top: 0.2rem;
+                                    border-left: 0.1rem dotted rgba(198, 205, 213, 1);
+                                }
+                            }
+                        }
+                    }
+                    .weather_top_bottom{
+                        display: flex;
+                        margin-top: 0.7rem;
+                        padding: 0 1.6rem;
+                        .li{
+                            flex: 1;
+                            height:5.8rem;
+                            margin-right: 1rem;
+                            background:rgba(251,252,253,1);
+                            border-radius:0.42rem;
+                            border:0.08rem solid rgba(235,239,242,1);
+                            text-align:center;
+                            &:last-child{
+                                margin-right: 0;
+                            }
+                            .p1{
+                                font-size:1rem;
+                                font-family:AlibabaPuHuiTiR;
+                                color:rgba(101,112,133,1);
+                            }
+                            img{
+                                margin: 0.2rem 0 0.2rem;
+                                height: 1.8rem;
+                            }
+                            .p2{
+                                font-size:1rem;
+                                font-family:PingFangSC-Regular,PingFang SC;
+                                font-weight:400;
+                                color:rgba(51,51,51,1);
+                            }
+                        }
+                    }
+                }
+            }
+            .main_table{
+                height: calc(100% - 13.2rem);
+                margin-top: 0.8rem;
+                background-color: #fff;
+                border:0.08rem solid rgba(240,240,240,1);
+                .table_top{
+                    padding: 1.3rem 0 0.8rem;
+                    display: flex;
+                    background-color: #fff;
+                    .el-dropdown{
+                        width: 10rem;
+                        height: 2rem;line-height: 2rem;
+                        background:rgba(246,248,250,1);
+                        border-radius: 0.2rem;
+                        margin-right: 0.8rem;
+                        .el-dropdown-link{
+                            cursor: pointer;
+                            height: 100%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            padding: 0 0.8rem;
+                            font-size:1rem;
+                            font-family:PingFang-SC-Medium,PingFang-SC;
+                            font-weight:500;
+                            color:rgba(101,112,133,1);
+                        }
+                    }
+                    .nav_box{
+                        height:2rem;line-height: 2rem;
+                        background:rgba(246,248,250,1);
+                        border-radius:0.2rem;
+                        display: flex;
+                        .li{
+                            padding: 0 1rem;
+                            font-size:1rem;
+                            font-family:PingFangSC-Regular,PingFang SC;
+                            font-weight:400;
+                            color:rgba(101,112,133,1);
+                            cursor: pointer;
+                            &.select{
+                                background:rgba(252,132,64,1);
+                                box-shadow:0rem 0.17rem 0.5rem 0rem rgba(252,132,64,0.3);
+                                border-radius:0.2rem;
+
+                                font-size:1rem;
+                                font-family:PingFang-SC-Medium,PingFang-SC;
+                                font-weight:500;
+                                color:rgba(255,255,255,1);
+                            }
+                        }
+                    }
+                    .btn{
+                        margin-left: 0.6rem;
+                        display: flex;
+                        align-items: center;
+                        padding: 0.5rem 1rem;
+                        height:1.8rem;
+                        background:rgba(255,255,255,1);
+                        border-radius:0.2rem 0.1rem 0.1rem 0.2rem;
+                        border:0.1rem solid rgba(240,240,240,1);
+                        cursor: pointer;
+
+                        font-size:1rem;
+                        font-family:PingFang-SC-Medium,PingFang-SC;
+                        font-weight:500;
+                        color:rgba(51,51,51,1);
+                        i{
+                            font-size: 1.2rem;
+                            color: rgba(252, 137, 64, 1);
+                            margin-right: 0.5rem;
+                        }
+                    }
+                }
+                .el-table{
+                    width: 100%;
+                    th,td{
+                        padding: 0.5rem 0;
+                    }
+                    th,td{
+                        >.cell{
+                            font-size:1rem;
+                            font-family:PingFangSC-Medium,PingFang SC;
+                            font-weight:500;
+                            color:rgba(51,51,51,1);
+                        }
+                    }
+                    th{
+                        background:rgba(246,248,250,1);
+                        height: 2.3rem;line-height: 2.3rem;
+                    }
+                    td{
+                        height: 3rem;line-height: 3rem;
+                        border-color: rgba(240, 240, 240, 1);
+                    }
+                    // tr:hover>td{
+                    //     background: rgba(246, 248, 250, 1);
+                    //     >.cell{
+                    //         font-family:PingFangSC-Semibold,PingFang SC;
+                    //         font-weight:600;
+                    //     }
+                    // }
+                    .btn{
+                        padding: 0.5rem 0.5rem;
+                        .iconfont{
+                            font-size: 1rem;
+                            color: rgba(163, 175, 187, 1);
+                        }
+                    }
+                }
+                .pagination_box{
+                    height: 2.3rem;line-height: 2.3rem;
+                    margin-top: 1.6rem;
+                    margin-bottom: 1.6rem;
+                    display: flex;
+                    .left{
+                        margin-left: auto;
+                        display: flex;
+                        align-items: center;
+                        background:rgba(246,248,250,1);
+                        border-radius:1.2rem;
+                        padding: 0 1.2rem;
+                        .totle{
+                            font-size:1rem;
+                            font-family:AlibabaPuHuiTiR;
+                            color:rgba(51,51,51,1);
+                            .span2{
+                                margin-left: 0.2rem;
+                                color: rgba(252, 132, 64, 1);
+                            }
+                        }
+                        .line{
+                            margin: 0 0.7rem;
+                            width:0.08rem;
+                            height:1rem;
+                            background-color: rgba(235, 239, 242, 1);
+                        }
+                        .el-dropdown-link{
+                            font-size:1rem;
+                            font-family:AlibabaPuHuiTiR;
+                            color:rgba(51,51,51,1);
+                            cursor: pointer;
+                        }
+                    }
+                    .el-pagination{
+                        margin: 0 auto 0 0.8rem;
+                        // border-radius:1.2rem;
+                        padding: 0;
+                        .btn-next,.btn-prev{
+                            height: 2.3rem;line-height: 2.3rem;
+                            background:rgba(246,248,250,1);
+                            &:hover{
+                                background:rgba(252,132,64,1);
+                                font-family:AlibabaPuHuiTiM;
+                                color:rgba(255,255,255,1);
+                            }
+                            &.active{
+                                font-family:AlibabaPuHuiTiM;
+                                color:rgba(255,255,255,1);
+                                cursor: default;
+                                background:rgba(252,132,64,1);
+                            }
+                        }
+                        // button{
+                        //     &:disabled{
+                        //         background-color: initial;
+                        //     }
+                        // }
+                        .btn-prev{
+                            border-top-left-radius: 1.2rem;
+                            border-bottom-left-radius: 1.2rem;
+                        }
+                        .btn-next{
+                            border-top-right-radius: 1.2rem;
+                            border-bottom-right-radius: 1.2rem;
+                        }
+                        .el-pager{
+                            background:rgba(246,248,250,1);
+                            li{
+                                height: 2.3rem;line-height: 2.3rem;
+                                background-color: initial;
+
+                                font-size:1rem;
+                                font-family:AlibabaPuHuiTiR;
+                                color:rgba(51,51,51,1);
+                                border-radius:0.25rem;
+                                &:hover{
+                                    background:rgba(252,132,64,1);
+                                    font-family:AlibabaPuHuiTiM;
+                                    color:rgba(255,255,255,1);
+                                }
+                                &.active{
+                                    font-family:AlibabaPuHuiTiM;
+                                    color:rgba(255,255,255,1);
+                                    cursor: default;
+                                    background:rgba(252,132,64,1);
+                                }
+                            }
+                        }
+                        .el-pagination__jump{
+                            margin-left: 0.8rem;
+                            height:2.3rem;line-height: 2.3rem;
+                            background:rgba(246,248,250,1);
+                            border-radius:1.2rem;
+                            padding: 0 1.2rem;
+
+                            font-size:1rem;
+                            font-family:AlibabaPuHuiTiR;
+                            color:rgba(51,51,51,1);
+                            .el-input{
+                                height:2.3rem;line-height: 2.3rem;
+                                .el-input__inner{
+                                    height:2.3rem;line-height: 2.3rem;
+                                    border: none;
+                                    background-color: #f6f8fa;
+                                }
+                            }
+                        }
+                    }
+                }
             }
         }
 	}