工作台

src/api/workplace/backlog.js

@@ -157,3 +157,51 @@ export function getWorkplaceBacklogUserPage (parameter) {
     }
   })
 }
+
+/**
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getWorkplaceBacklogTopData (parameter) {
+  return axios({
+    url: '/index/gather/workplace/topData/' + parameter,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getWorkplaceBacklogPie (parameter) {
+  return axios({
+    url: '/index/gather/workplace/pie/' + parameter,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getWorkplaceBacklogWeekData (parameter) {
+  return axios({
+    url: '/index/gather/workplace/week/' + parameter,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}

src/router/generator-platform-routers.js

@@ -201,6 +201,8 @@ const constantRouterComponents = {
   'StatisticsSparePartUsedSpare': () => import('@/views/statistics/spare/StatisticsSparePartUsedSpare'),
   'StatisticsRepairFormUser': () => import('@/views/statistics/repair/StatisticsRepairFormUserView'),
   'WorkplaceBacklog': () => import('@/views/workplace/backlog/WorkplaceBacklog'),
+  'StoreWorkplaceBacklog': () => import('@/views/workplace/backlog/StoreWorkplaceBacklog'),
+  'SbWorkplaceBacklog': () => import('@/views/workplace/backlog/SbWorkplaceBacklog'),
   'NewWorkplaceBacklog': () => import('@/views/workplace/backlog/NewWorkplaceBacklog'),
   'Supplier': () => import('@/views/purchase/supplier/Supplier'),
   'SupplierApply': () => import('@/views/purchase/supplier/SupplierApply'),
@@ -290,8 +292,8 @@ const constantRouterComponents = {
   'StoreReport1': () => import('@/views/dashboard/StoreReport1'), // 仓库报表
   'RepairScreen': () => import('@/views/big-screen/RepairScreen'), // 车间大屏
   // 自定义管理
-  'CustomizeReport': () => import('@/views/customize/report/CustomizeReport'),// 自定义报表
-  'CustomFieldTemplate': () => import('@/views/customize/fieldTemplate/CustomFieldTemplate'),// 自定义模板
+  'CustomizeReport': () => import('@/views/customize/report/CustomizeReport'), // 自定义报表
+  'CustomFieldTemplate': () => import('@/views/customize/fieldTemplate/CustomFieldTemplate'), // 自定义模板
   'CustomFieldTemplateData': () => import('@/views/customize/fieldTemplateData/CustomFieldTemplateData')// 自定义模板数据
 }
 

src/utils/dict.js

@@ -76,6 +76,7 @@ DictCache.TYPE = {
   FILE_DOWNLOAD_TEMPLATE: 'FILE_DOWNLOAD_TEMPLATE', // 模板文件
   DELFLAG: 'DELFLAG', // 删除标志
   SBTYPE_TYPE: 'SBTYPE_TYPE', // 设备类型
+  WORKPLACE_TYPE: 'WORKPLACE_TYPE', // 工作台类型
   SB_INFO_STOP_DETAIL_TYPE: 'SB_INFO_STOP_DETAIL_TYPE', // 设备停机类型表：1停机、2启用
   SB_INFO_STOP_DETAIL_STATUS: 'SB_INFO_STOP_DETAIL_STATUS', // 设备停机状态表：1未审核，2已审核（变更设备状态）
   FIRM_PRODUCER_LEVEL: 'FIRM_PRODUCER_LEVEL', // 供应商等级
@@ -415,6 +416,10 @@ DictCache.VALUE = {
     SON: 2 // 子类
   },
 
+  WORKPLACE_TYPE: {
+    WORKPLACE_REPAIR_NORMAL: 'workplace-repair-normal', // 维修普通角色
+    WORKPLACE_REPAIR_MANAGE: 'workplace-repair-manage' // 维修管理员
+  },
   /**
    * 位置类型
    */
@@ -852,7 +857,7 @@ DictCache.VALUE = {
   CHECK_USER_TYPE: {
     USE_USER: 1, // 使用人
     REPAIR_USER: 2, // 维修人
-    ZHIDING: 3,// 维修人
+    ZHIDING: 3, // 维修人
     FACTORY: 4 //
   },
   /**

src/views/Login.vue

@@ -2,9 +2,9 @@
   <div>
     <div class="fh-login">
       <div class="fh-login-left">
-        <h2 style='padding-bottom: 0px'>CNTHB</h2>
-        <h2 style='padding-bottom: 0px'>HITACHI ABB</h2>
-        <h2 style='font-size:30px'>设备管理系统</h2>
+        <h2 style="padding-bottom: 0px">CNTHB</h2>
+        <h2 style="padding-bottom: 0px">HITACHI ABB</h2>
+        <h2 style="font-size:30px">设备管理系统</h2>
       </div>
       <div class="fh-login-right">
         <div class="login-title">欢迎使用</div>
@@ -63,7 +63,7 @@
 import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
 import { mapActions } from 'vuex'
 import { timeFix } from '@/utils/util'
-import { getSmsCaptcha, checkCaptchaCode } from '@/api/upms/login'
+import { getSmsCaptcha, checkCaptchaCode, getInfo } from '@/api/upms/login'
 import { encryptPassword } from '@/common/common'
 import cookie from 'vue-cookie'
 import BaseTool from '@/utils/tool'
@@ -234,8 +234,15 @@ export default {
       })
     },
     loginSuccess (res) {
-      this.$router.push({ path: '/WorkplaceBacklog' })
+      getInfo().then((value) => {
+        const roles = value.data.roles
+        const workplaceType = this.DictCache.VALUE.WORKPLACE_TYPE
+        if (roles.find(value => value === workplaceType.WORKPLACE_REPAIR_NORMAL)) {
+          this.$router.push({ path: '/NewWorkplaceBacklog?type=' + workplaceType.WORKPLACE_REPAIR_NORMAL })
+        }
+      })
       // 延迟 1 秒显示欢迎信息
+      // this.$router.push({ path: '/WorkplaceBacklog' })
       setTimeout(() => {
         this.$notification.success({
           message: '欢迎',

src/views/workplace/backlog/NewWorkplaceBacklog.vue

@@ -5,29 +5,29 @@
         <a-col class="gutter-row" :span="8">
           <div class="gutter-box">
             <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
-              <a-col>待入库数量</a-col>
-              <a-col>200</a-col>
+              <a-col>今日维修数据</a-col>
+              <a-col>{{ topData.repairTotalNum }}</a-col>
             </a-row>
             <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
               <a-col >
                 <a-badge color="#E4007F"/>
-                <span style="color:#E4007F;">采购入库 &nbsp; 77</span>
+                <span style="color:#E4007F;">待维修 &nbsp; {{ topData.waitForRepairNum }}</span>
               </a-col>
               <a-col >
                 <a-badge color="#5864FF"/>
-                <span style="color:#5864FF;">退库入库 &nbsp; 77</span>
+                <span style="color:#5864FF;">待审核 &nbsp; {{ topData.verifyRepairNum }}</span>
 
               </a-col>
             </a-row>
             <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
               <a-col >
                 <a-badge color="#F19149"/>
-                <span style="color:#F19149;">调拨入库 &nbsp; 77</span>
+                <span style="color:#F19149;">已完成 &nbsp; {{ topData.completedRepairNum }}</span>
 
               </a-col>
               <a-col>
                 <a-badge color="#009944"/>
-                <span style="color:#009944;">XXX出库 &nbsp; 77</span>
+                <span style="color:#009944;">已驳回 &nbsp; {{ topData.refusedRepairNum }}</span>
 
               </a-col>
             </a-row>
@@ -36,29 +36,29 @@
         <a-col class="gutter-row" :span="8">
           <div class="gutter-box">
             <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
-              <a-col>待出库数量</a-col>
-              <a-col>200</a-col>
+              <a-col>今日委外数据</a-col>
+              <a-col>{{ topData.outRepairTotalNum }}</a-col>
             </a-row>
             <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
               <a-col >
                 <a-badge color="#E4007F"/>
-                <span style="color:#E4007F;">领用出库 &nbsp; 77</span>
+                <span style="color:#E4007F;">待维修 &nbsp; {{ topData.outWaitForRepairNum }}</span>
               </a-col>
               <a-col >
                 <a-badge color="#5864FF"/>
-                <span style="color:#5864FF;">退库入库 &nbsp; 77</span>
+                <span style="color:#5864FF;">待审核 &nbsp; {{ topData.outVerifyRepairNum }}</span>
 
               </a-col>
             </a-row>
             <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
               <a-col >
                 <a-badge color="#F19149"/>
-                <span style="color:#F19149;">调拨出库 &nbsp; 77</span>
+                <span style="color:#F19149;">已完成 &nbsp; {{ topData.outCompletedRepairNum }}</span>
 
               </a-col>
               <a-col>
                 <a-badge color="#009944"/>
-                <span style="color:#009944;">XXX出库 &nbsp; 77</span>
+                <span style="color:#009944;">已驳回 &nbsp; {{ topData.outRefusedRepairNum }}</span>
 
               </a-col>
             </a-row>
@@ -67,13 +67,13 @@
         <a-col class="gutter-row" :span="8">
           <div style="display:flex;text-align:center;background:#fff;height: 170px;">
             <div style="width:48%;margin:auto;font-size:30px; line-height: 60px;">
-              <div>备件总数</div>
-              <div style="font-size:24px;">333333</div>
+              <div>维修总计</div>
+              <div style="font-size:24px;">{{ topData.totalNum }}</div>
             </div>
             <div style="width: 1px;height: 70px;background: #999999;margin:auto;"></div>
             <div style="width:48%;margin:auto; font-size:30px;line-height: 60px;">
-              <div>备件总数</div>
-              <div style="font-size:24px;">333333</div>
+              <div>维修费用总计</div>
+              <div style="font-size:24px;">{{ topData.totalFee }}</div>
             </div>
           </div>
         </a-col>
@@ -81,10 +81,10 @@
     </div>
     <div class="gutter-example">
       <a-row :gutter="[20,40]">
-        <a-col class="gutter-row" :span="6">
+        <a-col class="gutter-row" :span="8">
           <div style="height: 471px;background: #FFFFFF;padding:24px">
-            <div style="display:flex;justify-content: space-between;width:100px;height: 18px; font-size:16px;color: #555555; ">
-              <div>设备实施状态</div>
+            <div style="display:flex;justify-content: space-between;width:160px;height: 18px; font-size:16px;color: #555555; ">
+              <div>维修费用类别统计</div>
               <!-- <div>设备总数100</div> -->
             </div>
             <div id="container-pie"></div>
@@ -92,14 +92,14 @@
         </a-col>
         <a-col class="gutter-row" :span="12">
           <div style="height: 471px;background: #FFFFFF; padding:24px;">
-            <div style="display:flex;justify-content: space-between;width:100px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
+            <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
               <div style="width: 7px;background: #4D86ED;"></div>
-              <div>近一周数据</div>
+              <div>近一周每日产生维修单数</div>
             </div>
-           <div id="container-line"></div>
+            <div id="container-line"></div>
           </div>
         </a-col>
-        <a-col class="gutter-row" :span="6">
+        <a-col class="gutter-row" :span="4">
           <div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
             <div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);">
               <my-icon type="icon-chukuguanli" style="font-size:58px;"/>
@@ -180,7 +180,7 @@
 
 <script>
 import { STable } from '@/components'
-import { getWorkplaceBacklogUserPage } from '@/api/workplace/backlog'
+import { getWorkplaceBacklogUserPage, getWorkplaceBacklogTopData, getWorkplaceBacklogWeekData, getWorkplaceBacklogPie } from '@/api/workplace/backlog'
 import { Chart } from '@antv/g2'
 export default {
   name: 'NewWorkplaceBacklog',
@@ -198,17 +198,19 @@ export default {
         { item: '事例五', count: 9, percent: 0.09 }
       ],
       lineData: [
-  { week: '周一', value: 3 },
-  { week: '周二', value: 4 },
-  { week: '周三', value: 7.5 },
-  { week: '周四', value: 5 },
-  { week: '周五', value: 4.9 },
-  { week: '周六', value: 6 },
-  { week: '周日', value: 7 },
-],
+        { week: '周一', value: 3 },
+        { week: '周二', value: 4 },
+        { week: '周三', value: 7.5 },
+        { week: '周四', value: 5 },
+        { week: '周五', value: 4.9 },
+        { week: '周六', value: 6 },
+        { week: '周日', value: 7 }
+      ],
       allCount: 100,
       chartPie: null,
       chartLine: null,
+      topData: null,
+      type: this.$route.query.type,
       queryParam: {
         status: 1
       },
@@ -315,7 +317,7 @@ export default {
   },
   created () {
     this.getDict()
-    //this.getInfo()
+    // this.getInfo()
   },
   mounted () {
     this.$nextTick(function () {
@@ -326,10 +328,32 @@ export default {
     getDict () {
       this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
       this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
+      getWorkplaceBacklogTopData('workplace-repair-manage').then(res => {
+        this.topData = res.data
+      })
     },
     getInfo () {
-      this.getPieCharts('container-pie', this.equipmentData)
-      this.getLineCharts('container-line', this.lineData)
+      Promise.all([getWorkplaceBacklogWeekData('workplace-repair-manage'), getWorkplaceBacklogPie('workplace-repair-manage')]).then(res => {
+        console.log(res)
+        this.lineData = res[0].data.reduce((pre, item) => {
+          pre.push({
+            week: item.weekDayName,
+            value: item.tempTotalNum
+          })
+          return pre
+        }, [])
+        this.equipmentData = res[1].data.reduce((pre, item) => {
+          pre.push({
+            item: item.typeName,
+            count: item.fee,
+            percent: item.fee
+          })
+          return pre
+        }, [])
+      }).then(() => {
+        this.getPieCharts('container-pie', this.equipmentData)
+        this.getLineCharts('container-line', this.lineData)
+      })
     },
     getPieCharts (id, data) {
       this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
@@ -339,7 +363,7 @@ export default {
         height: 400
       })
       this.chartPie.data(data)
-      this.chartPie.scale('count',{
+      this.chartPie.scale('count', {
         nice: true
       })
       this.chartPie.coordinate('theta', {
@@ -357,38 +381,6 @@ export default {
       // 辅助文本
       this.chartPie
         .annotation()
-        .text({
-          position: ['50%', '50%'],
-          content: '主机',
-          style: {
-            fontSize: 14,
-            fill: '#8c8c8c',
-            textAlign: 'center'
-          },
-          offsetY: -20
-        })
-        .text({
-          position: ['50%', '50%'],
-          content: '100',
-          style: {
-            fontSize: 20,
-            fill: '#8c8c8c',
-            textAlign: 'center'
-          },
-          offsetX: -10,
-          offsetY: 20
-        })
-        .text({
-          position: ['50%', '50%'],
-          content: '台',
-          style: {
-            fontSize: 14,
-            fill: '#8c8c8c',
-            textAlign: 'center'
-          },
-          offsetY: 20,
-          offsetX: 20
-        })
       this.chartPie
         .interval()
         .adjust('stack')
@@ -397,7 +389,7 @@ export default {
         .label('percent', (percent) => {
           return {
             content: (data) => {
-              return `${data.item}: ${percent * 100}`
+              return `${data.item}: ${percent}`
             }
           }
         })
@@ -412,42 +404,41 @@ export default {
 
       this.chartPie.render()
     },
-    getLineCharts(id,data){
-      this.chartLine=new Chart({
-  container: id,
-  autoFit: true,
-  height: 300,
-});
-
-this.chartLine.data(data);
-this.chartLine.scale({
-  week: {
-    range: [0, 1],
-  },
-  value: {
-    min: 0,
-    nice: true,
-  },
-});
+    getLineCharts (id, data) {
+      this.chartLine = new Chart({
+        container: id,
+        autoFit: true,
+        height: 300
+      })
 
-this.chartLine.tooltip({
-  showCrosshairs: true, // 展示 Tooltip 辅助线
-  shared: true,
-});
+      this.chartLine.data(data)
+      this.chartLine.scale({
+        week: {
+          range: [0, 1]
+        },
+        value: {
+          min: 0,
+          nice: true
+        }
+      })
 
-this.chartLine.axis('value', {
-  label: {
-    formatter: (val) => {
-      return val + 'k';
-    },
-  },
-});
+      this.chartLine.tooltip({
+        showCrosshairs: true, // 展示 Tooltip 辅助线
+        shared: true
+      })
 
-this.chartLine.area().position('week*value')
-this.chartLine.line().position('week*value')
+      this.chartLine.axis('value', {
+        label: {
+          formatter: (val) => {
+            return val
+          }
+        }
+      })
 
-this.chartLine.render();
+      this.chartLine.area().position('week*value')
+      this.chartLine.line().position('week*value')
 
+      this.chartLine.render()
     }
   }
 }

src/views/workplace/backlog/SbWorkplaceBacklog.vue

@@ -0,0 +1,485 @@
+<template>
+  <div>
+    <div class="gutter-example">
+      <a-row :gutter="20">
+        <a-col class="gutter-row" :span="8">
+          <div class="gutter-box">
+            <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
+              <a-col>今日维修数据</a-col>
+              <a-col>{{ topData.repairTotalNum }}</a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#E4007F"/>
+                <span style="color:#E4007F;">待维修 &nbsp; {{ topData.waitForRepairNum }}</span>
+              </a-col>
+              <a-col >
+                <a-badge color="#5864FF"/>
+                <span style="color:#5864FF;">待审核 &nbsp; {{ topData.verifyRepairNum }}</span>
+
+              </a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#F19149"/>
+                <span style="color:#F19149;">已完成 &nbsp; {{ topData.completedRepairNum }}</span>
+
+              </a-col>
+              <a-col>
+                <a-badge color="#009944"/>
+                <span style="color:#009944;">已驳回 &nbsp; {{ topData.refusedRepairNum }}</span>
+
+              </a-col>
+            </a-row>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="8">
+          <div class="gutter-box">
+            <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
+              <a-col>今日委外数据</a-col>
+              <a-col>{{ topData.outRepairTotalNum }}</a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#E4007F"/>
+                <span style="color:#E4007F;">待维修 &nbsp; {{ topData.outWaitForRepairNum }}</span>
+              </a-col>
+              <a-col >
+                <a-badge color="#5864FF"/>
+                <span style="color:#5864FF;">待审核 &nbsp; {{ topData.outVerifyRepairNum }}</span>
+
+              </a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#F19149"/>
+                <span style="color:#F19149;">已完成 &nbsp; {{ topData.outCompletedRepairNum }}</span>
+
+              </a-col>
+              <a-col>
+                <a-badge color="#009944"/>
+                <span style="color:#009944;">已驳回 &nbsp; {{ topData.outRefusedRepairNum }}</span>
+
+              </a-col>
+            </a-row>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="8">
+          <div style="display:flex;text-align:center;background:#fff;height: 170px;">
+            <div style="width:48%;margin:auto;font-size:30px; line-height: 60px;">
+              <div>维修总计</div>
+              <div style="font-size:24px;">{{ topData.totalNum }}</div>
+            </div>
+            <div style="width: 1px;height: 70px;background: #999999;margin:auto;"></div>
+            <div style="width:48%;margin:auto; font-size:30px;line-height: 60px;">
+              <div>维修费用总计</div>
+              <div style="font-size:24px;">{{ topData.totalFee }}</div>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="gutter-example">
+      <a-row :gutter="[20,40]">
+        <a-col class="gutter-row" :span="8">
+          <div style="height: 471px;background: #FFFFFF;padding:24px">
+            <div style="display:flex;justify-content: space-between;width:160px;height: 18px; font-size:16px;color: #555555; ">
+              <div>维修费用类别统计</div>
+              <!-- <div>设备总数100</div> -->
+            </div>
+            <div id="container-pie"></div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="12">
+          <div style="height: 471px;background: #FFFFFF; padding:24px;">
+            <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
+              <div style="width: 7px;background: #4D86ED;"></div>
+              <div>近一周每日产生维修单数</div>
+            </div>
+            <div id="container-line"></div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="4">
+          <div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
+            <div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);">
+              <my-icon type="icon-chukuguanli" style="font-size:58px;"/>
+              <span>出库</span>
+            </div>
+            <div class="btn" style="background:linear-gradient(to right,#FF416D,#FF847F);">
+              <my-icon type="icon-rukuguanli" style="font-size:58px;"/>
+              <span>入库</span>
+            </div>
+            <div class="btn" style="background:linear-gradient(to right,#FB47D1,#F96EFE);">
+              <my-icon type="icon-zichanguanli-zichantiaobo" style="font-size:58px;"/>
+              <span>调拨</span>
+            </div>
+            <div class="btn" style="background:linear-gradient(to right,#941FFF,#BC72FB);">
+              <my-icon type="icon-xinzengyugengxinhuopindangan-copy" style="font-size:58px;"/>
+              <span>新增</span>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="gutter-example">
+      <a-row :gutter="20">
+        <a-col class="gutter-row" :span="6">
+          <div class="information">
+            <div style="display:flex;justify-content: space-between;align-items: center; padding-bottom:20px;">
+              <div style="display:flex; width:65px;height:17px;justify-content: space-between;align-items: center;">
+                <div style=" width: 17px;height: 17px;background: #3462FD;border-radius: 50%;"></div>
+                <div style="font-size: 18px;font-weight: 800;color: #333333;">资料</div>
+              </div>
+              <div >
+                查看全部
+                <my-icon type="icon-xiangyou-copy" style="font-size:13px;"/>
+              </div>
+            </div>
+            <div
+              class="demo-infinite-container"
+            >
+              <a-list size="small" bordered :data-source="information">
+                <a-list-item slot="renderItem" slot-scope="item,index" :class="{discolor: index%2}">
+                  <a-list-item-meta>
+                    <div slot="title" :href="item.href">{{ item.name }}</div>
+                  </a-list-item-meta>
+                  <div>{{ item.time }}</div>
+                </a-list-item>
+              </a-list>
+            </div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="18">
+          <div class="information">
+            <s-table
+              ref="table"
+              size="small"
+              bordered
+              rowKey="id"
+              :columns="columns"
+              :data="loadData"
+              :pageSize="10"
+              :scroll="{ y: 190 }"
+            >
+              <span slot="action" slot-scope="record">
+                <template>
+                  <a @click="handle(record)">详情</a>
+                  <a-divider v-if="record.status === 1" type="vertical" />
+                  <a v-if="record.status === 1" @click="dealJumpDetail(record)">跳转</a>
+                </template>
+              </span>
+              <span slot="content" slot-scope="text" v-html="text">
+              </span>
+            </s-table>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { getWorkplaceBacklogUserPage, getWorkplaceBacklogTopData, getWorkplaceBacklogWeekData, getWorkplaceBacklogPie } from '@/api/workplace/backlog'
+import { Chart } from '@antv/g2'
+export default {
+  name: 'NewWorkplaceBacklog',
+  components: {
+    STable,
+    Chart
+  },
+  data () {
+    return {
+      equipmentData: [
+        { item: '事例一', count: 40, percent: 0.4 },
+        { item: '事例二', count: 21, percent: 0.21 },
+        { item: '事例三', count: 17, percent: 0.17 },
+        { item: '事例四', count: 13, percent: 0.13 },
+        { item: '事例五', count: 9, percent: 0.09 }
+      ],
+      lineData: [
+        { week: '周一', value: 3 },
+        { week: '周二', value: 4 },
+        { week: '周三', value: 7.5 },
+        { week: '周四', value: 5 },
+        { week: '周五', value: 4.9 },
+        { week: '周六', value: 6 },
+        { week: '周日', value: 7 }
+      ],
+      allCount: 100,
+      chartPie: null,
+      chartLine: null,
+      topData: null,
+      type: this.$route.query.type,
+      queryParam: {
+        status: 1
+      },
+      information: [
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        }, {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        }
+      ],
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          align: 'center',
+          width: 50,
+          customRender: (text, record, index) => {
+            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
+          }
+        },
+        {
+          title: '类型',
+          dataIndex: 'type',
+          align: 'center',
+          width: 100,
+          customRender: (text, record, index) => {
+            return this.typeDict[text]
+          }
+        },
+        {
+          title: '详细类型',
+          dataIndex: 'detailType',
+          align: 'center',
+          width: 140,
+          customRender: (text, record, index) => {
+            return this.typeDetailDict[text]
+          }
+        },
+        {
+          title: '内容',
+          dataIndex: 'content',
+          align: 'center',
+          width: 460,
+          ellipsis: true,
+          scopedSlots: { customRender: 'content' }
+        },
+        {
+          title: '时间',
+          align: 'center',
+          width: 160,
+          dataIndex: 'createdTime'
+        },
+        {
+          title: '状态',
+          align: 'center',
+          dataIndex: 'status',
+          width: 100,
+          customRender: (text, record, index) => {
+            return (text === 1 ? '未读' : '已读')
+          }
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: 150,
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        parameter = {
+          ...parameter,
+          ...this.queryParam
+        }
+        return getWorkplaceBacklogUserPage(parameter)
+          .then(res => {
+            return res.data
+          })
+      }
+    }
+  },
+  created () {
+    this.getDict()
+    // this.getInfo()
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.getInfo()
+    })
+  },
+  methods: {
+    getDict () {
+      this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
+      this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
+      getWorkplaceBacklogTopData('workplace-repair-manage').then(res => {
+        this.topData = res.data
+      })
+    },
+    getInfo () {
+      Promise.all([getWorkplaceBacklogWeekData('workplace-repair-manage'), getWorkplaceBacklogPie('workplace-repair-manage')]).then(res => {
+        console.log(res)
+        this.lineData = res[0].data.reduce((pre, item) => {
+          pre.push({
+            week: item.weekDayName,
+            value: item.tempTotalNum
+          })
+          return pre
+        }, [])
+        this.equipmentData = res[1].data.reduce((pre, item) => {
+          pre.push({
+            item: item.typeName,
+            count: item.fee,
+            percent: item.fee
+          })
+          return pre
+        }, [])
+      }).then(() => {
+        this.getPieCharts('container-pie', this.equipmentData)
+        this.getLineCharts('container-line', this.lineData)
+      })
+    },
+    getPieCharts (id, data) {
+      this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
+      this.chartPie = new Chart({
+        container: id,
+        autoFit: true,
+        height: 400
+      })
+      this.chartPie.data(data)
+      this.chartPie.scale('count', {
+        nice: true
+      })
+      this.chartPie.coordinate('theta', {
+        radius: 0.6,
+        innerRadius: 0.5
+      })
+      this.chartPie.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        itemTpl: `<li class="g2-tooltip-list-item">
+                     <span style="background-color:{color};" class="g2-tooltip-marker"></span>
+                     {name}: {value}
+                  </li>`
+      })
+      // 辅助文本
+      this.chartPie
+        .annotation()
+      this.chartPie
+        .interval()
+        .adjust('stack')
+        .position('percent')
+        .color('item')
+        .label('percent', (percent) => {
+          return {
+            content: (data) => {
+              return `${data.item}: ${percent}`
+            }
+          }
+        })
+        .tooltip('item*count', (item, count) => {
+          return {
+            name: item,
+            value: count
+          }
+        })
+      // this.chartPie.interaction('element-active')
+      this.chartPie.interaction('active-region')
+
+      this.chartPie.render()
+    },
+    getLineCharts (id, data) {
+      this.chartLine = new Chart({
+        container: id,
+        autoFit: true,
+        height: 300
+      })
+
+      this.chartLine.data(data)
+      this.chartLine.scale({
+        week: {
+          range: [0, 1]
+        },
+        value: {
+          min: 0,
+          nice: true
+        }
+      })
+
+      this.chartLine.tooltip({
+        showCrosshairs: true, // 展示 Tooltip 辅助线
+        shared: true
+      })
+
+      this.chartLine.axis('value', {
+        label: {
+          formatter: (val) => {
+            return val
+          }
+        }
+      })
+
+      this.chartLine.area().position('week*value')
+      this.chartLine.line().position('week*value')
+
+      this.chartLine.render()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.gutter-example >>> .ant-row > div {
+  background: transparent;
+  border: 0;
+  font-family: PingFang SC;
+}
+.gutter-box {
+  display:flex;
+  flex-direction:column;
+  justify-content: space-between;
+  background: #fff;
+  padding: 18px 41px;
+  height: 170px;
+}
+.btn{
+height: 113px;
+width: 100%;
+color: #fff!important;
+font-size:28px;
+border-radius: 20px;
+display:flex;
+align-items: center;
+justify-content: space-around;
+}
+.information{
+  background: #fff;
+  padding: 30px 12px;
+  height: 260px;
+  color:#666;
+}
+.discolor{
+  background: #EFEFFB;
+}
+.demo-infinite-container {
+  overflow: auto;
+  height: 190px;
+}
+::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+</style>

src/views/workplace/backlog/StoreWorkplaceBacklog.vue

@@ -0,0 +1,498 @@
+<template>
+  <div>
+    <div class="gutter-example">
+      <a-row :gutter="20">
+        <a-col class="gutter-row" :span="8">
+          <div class="gutter-box">
+            <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
+              <a-col>待入库总数</a-col>
+              <a-col>{{ topData.inTotalNum }}</a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#E4007F"/>
+                <span style="color:#E4007F;">采集入库 &nbsp; {{ topData.purchaseApplyNum }}</span>
+              </a-col>
+              <a-col >
+                <a-badge color="#5864FF"/>
+                <span style="color:#5864FF;">闲置入库 &nbsp; {{ topData.spareBackApplyNum }}</span>
+
+              </a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#F19149"/>
+                <span style="color:#F19149;">其他入库 &nbsp; {{ topData.otherNum }}</span>
+
+              </a-col>
+              <a-col>
+                <a-badge color="#009944"/>
+                <span style="color:#009944;">调拨入库 &nbsp; {{ topData.applyDBNum }}</span>
+
+              </a-col>
+            </a-row>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="8">
+          <div class="gutter-box">
+            <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
+              <a-col>待出库总数</a-col>
+              <a-col>{{ topData.outTotalNum }}</a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#E4007F"/>
+                <span style="color:#E4007F;">待调拨出库 &nbsp; {{ topData.outDBNum }}</span>
+              </a-col>
+              <a-col >
+                <a-badge color="#5864FF"/>
+                <span style="color:#5864FF;">待领用出库 &nbsp; {{ topData.lyNum }}</span>
+
+              </a-col>
+            </a-row>
+            <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
+              <a-col >
+                <a-badge color="#F19149"/>
+                <span style="color:#F19149;">报废出库 &nbsp; {{ topData.bfNum }}</span>
+
+              </a-col>
+              <a-col>
+                <a-badge color="#009944"/>
+                <span style="color:#009944;">其他出库 &nbsp; {{ topData.otherOutNum }}</span>
+
+              </a-col>
+            </a-row>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="8">
+          <div style="display:flex;text-align:center;background:#fff;height: 170px;">
+            <div style="width:48%;margin:auto;font-size:30px; line-height: 60px;">
+              <div>盘点出库</div>
+              <div style="font-size:24px;">{{ topData.outPDNum }}</div>
+            </div>
+            <div style="width: 1px;height: 70px;background: #999999;margin:auto;"></div>
+            <div style="width:48%;margin:auto; font-size:30px;line-height: 60px;">
+              <div>备件总数</div>
+              <div style="font-size:24px;">{{ topData.totalNum }}</div>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="gutter-example">
+      <a-row :gutter="[20,40]">
+        <a-col class="gutter-row" :span="8">
+          <div style="height: 471px;background: #FFFFFF;padding:24px">
+            <div style="display:flex;justify-content: space-between;width:160px;height: 18px; font-size:16px;color: #555555; ">
+              <div>维修费用类别统计</div>
+              <!-- <div>设备总数100</div> -->
+            </div>
+            <div id="container-pie"></div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="12">
+          <div style="height: 471px;background: #FFFFFF; padding:24px;">
+            <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
+              <div style="width: 7px;background: #4D86ED;"></div>
+              <div>近一周每日产生维修单数</div>
+            </div>
+            <div id="container-line"></div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="4">
+          <div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
+            <div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);">
+              <my-icon type="icon-chukuguanli" style="font-size:58px;"/>
+              <span>出库</span>
+            </div>
+            <div class="btn" style="background:linear-gradient(to right,#FF416D,#FF847F);">
+              <my-icon type="icon-rukuguanli" style="font-size:58px;"/>
+              <span>入库</span>
+            </div>
+            <div class="btn" style="background:linear-gradient(to right,#FB47D1,#F96EFE);">
+              <my-icon type="icon-zichanguanli-zichantiaobo" style="font-size:58px;"/>
+              <span>调拨</span>
+            </div>
+            <div class="btn" style="background:linear-gradient(to right,#941FFF,#BC72FB);">
+              <my-icon type="icon-xinzengyugengxinhuopindangan-copy" style="font-size:58px;"/>
+              <span>新增</span>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="gutter-example">
+      <a-row :gutter="20">
+        <a-col class="gutter-row" :span="6">
+          <div class="information">
+            <div style="display:flex;justify-content: space-between;align-items: center; padding-bottom:20px;">
+              <div style="display:flex; width:65px;height:17px;justify-content: space-between;align-items: center;">
+                <div style=" width: 17px;height: 17px;background: #3462FD;border-radius: 50%;"></div>
+                <div style="font-size: 18px;font-weight: 800;color: #333333;">资料</div>
+              </div>
+              <div >
+                查看全部
+                <my-icon type="icon-xiangyou-copy" style="font-size:13px;"/>
+              </div>
+            </div>
+            <div
+              class="demo-infinite-container"
+            >
+              <a-list size="small" bordered :data-source="information">
+                <a-list-item slot="renderItem" slot-scope="item,index" :class="{discolor: index%2}">
+                  <a-list-item-meta>
+                    <div slot="title" :href="item.href">{{ item.name }}</div>
+                  </a-list-item-meta>
+                  <div>{{ item.time }}</div>
+                </a-list-item>
+              </a-list>
+            </div>
+          </div>
+        </a-col>
+        <a-col class="gutter-row" :span="18">
+          <div class="information">
+            <s-table
+              ref="table"
+              size="small"
+              bordered
+              rowKey="id"
+              :columns="columns"
+              :data="loadData"
+              :pageSize="10"
+              :scroll="{ y: 190 }"
+            >
+              <span slot="action" slot-scope="record">
+                <template>
+                  <a @click="handle(record)">详情</a>
+                  <a-divider v-if="record.status === 1" type="vertical" />
+                  <a v-if="record.status === 1" @click="dealJumpDetail(record)">跳转</a>
+                </template>
+              </span>
+              <span slot="content" slot-scope="text" v-html="text">
+              </span>
+            </s-table>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { getWorkplaceBacklogUserPage, getWorkplaceBacklogTopData, getWorkplaceBacklogWeekData, getWorkplaceBacklogPie } from '@/api/workplace/backlog'
+import { Chart } from '@antv/g2'
+export default {
+  name: 'NewWorkplaceBacklog',
+  components: {
+    STable,
+    Chart
+  },
+  data () {
+    return {
+      equipmentData: [
+        { item: '事例一', count: 40, percent: 0.4 },
+        { item: '事例二', count: 21, percent: 0.21 },
+        { item: '事例三', count: 17, percent: 0.17 },
+        { item: '事例四', count: 13, percent: 0.13 },
+        { item: '事例五', count: 9, percent: 0.09 }
+      ],
+      lineData: [
+        { week: '周一', value: 3 },
+        { week: '周二', value: 4 },
+        { week: '周三', value: 7.5 },
+        { week: '周四', value: 5 },
+        { week: '周五', value: 4.9 },
+        { week: '周六', value: 6 },
+        { week: '周日', value: 7 }
+      ],
+      allCount: 100,
+      chartPie: null,
+      chartLine: null,
+      topData: null,
+      type: this.$route.query.type,
+      queryParam: {
+        status: 1
+      },
+      information: [
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        }, {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        },
+        {
+          name: '项目管理通知',
+          time: '2022-4-7'
+        }
+      ],
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          align: 'center',
+          width: 50,
+          customRender: (text, record, index) => {
+            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
+          }
+        },
+        {
+          title: '类型',
+          dataIndex: 'type',
+          align: 'center',
+          width: 100,
+          customRender: (text, record, index) => {
+            return this.typeDict[text]
+          }
+        },
+        {
+          title: '详细类型',
+          dataIndex: 'detailType',
+          align: 'center',
+          width: 140,
+          customRender: (text, record, index) => {
+            return this.typeDetailDict[text]
+          }
+        },
+        {
+          title: '内容',
+          dataIndex: 'content',
+          align: 'center',
+          width: 460,
+          ellipsis: true,
+          scopedSlots: { customRender: 'content' }
+        },
+        {
+          title: '时间',
+          align: 'center',
+          width: 160,
+          dataIndex: 'createdTime'
+        },
+        {
+          title: '状态',
+          align: 'center',
+          dataIndex: 'status',
+          width: 100,
+          customRender: (text, record, index) => {
+            return (text === 1 ? '未读' : '已读')
+          }
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: 150,
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        parameter = {
+          ...parameter,
+          ...this.queryParam
+        }
+        return getWorkplaceBacklogUserPage(parameter)
+          .then(res => {
+            return res.data
+          })
+      }
+    }
+  },
+  created () {
+    this.getDict()
+    // this.getInfo()
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.getInfo()
+    })
+  },
+  methods: {
+    getDict () {
+      this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
+      this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
+      getWorkplaceBacklogTopData('workplace_store_manage').then(res => {
+        this.topData = res.data
+      })
+    },
+    getInfo () {
+      Promise.all([getWorkplaceBacklogWeekData('workplace_store_manage'), getWorkplaceBacklogPie('workplace_store_manage')]).then(res => {
+        console.log(res)
+        this.lineData = res[0].data.inStoreDetailVOS.reduce((pre, item) => {
+          pre.push({
+            week: item.weekDayName,
+            value: item.num,
+            name: '入库'
+          })
+          return pre
+        }, [])
+        this.lineData.push(
+          ...res[0].data.outStoreDetailVOS.reduce((pre, item) => {
+            pre.push({
+              week: item.weekDayName,
+              value: item.num,
+              name: '出库'
+
+            })
+            return pre
+          }, [])
+        )
+
+        this.equipmentData = res[1].data.reduce((pre, item) => {
+          pre.push({
+            item: item.name,
+            count: item.currentStock,
+            percent: item.currentStock
+          })
+          return pre
+        }, [])
+      }).then(() => {
+        this.getPieCharts('container-pie', this.equipmentData)
+        this.getLineCharts('container-line', this.lineData)
+      })
+    },
+    getPieCharts (id, data) {
+      this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
+      this.chartPie = new Chart({
+        container: id,
+        autoFit: true,
+        height: 400
+      })
+      this.chartPie.data(data)
+      this.chartPie.scale('count', {
+        nice: true
+      })
+      this.chartPie.coordinate('theta', {
+        radius: 0.6,
+        innerRadius: 0.5
+      })
+      this.chartPie.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        itemTpl: `<li class="g2-tooltip-list-item">
+                     <span style="background-color:{color};" class="g2-tooltip-marker"></span>
+                     {name}: {value}
+                  </li>`
+      })
+      // 辅助文本
+      this.chartPie
+        .annotation()
+      this.chartPie
+        .interval()
+        .adjust('stack')
+        .position('percent')
+        .color('item')
+        .label('percent', (percent) => {
+          return {
+            content: (data) => {
+              return `${data.item}: ${percent}`
+            }
+          }
+        })
+        .tooltip('item*count', (item, count) => {
+          return {
+            name: item,
+            value: count
+          }
+        })
+      // this.chartPie.interaction('element-active')
+      this.chartPie.interaction('active-region')
+
+      this.chartPie.render()
+    },
+    getLineCharts (id, data) {
+      this.chartLine = new Chart({
+        container: id,
+        autoFit: true,
+        height: 300
+      })
+
+      this.chartLine.data(data)
+      this.chartLine.scale({
+        week: {
+          range: [0, 1]
+        },
+        value: {
+          min: 0,
+          nice: true
+        }
+      })
+
+      this.chartLine.tooltip({
+        showCrosshairs: true, // 展示 Tooltip 辅助线
+        shared: true
+      })
+
+      this.chartLine.axis('value', {
+        label: {
+          formatter: (val) => {
+            return val
+          }
+        }
+      })
+
+      this.chartLine.area().position('week*value').color('name').shape('smooth')
+      this.chartLine.line().position('week*value').color('name').shape('smooth')
+
+      this.chartLine.render()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.gutter-example >>> .ant-row > div {
+  background: transparent;
+  border: 0;
+  font-family: PingFang SC;
+}
+.gutter-box {
+  display:flex;
+  flex-direction:column;
+  justify-content: space-between;
+  background: #fff;
+  padding: 18px 41px;
+  height: 170px;
+}
+.btn{
+height: 113px;
+width: 100%;
+color: #fff!important;
+font-size:28px;
+border-radius: 20px;
+display:flex;
+align-items: center;
+justify-content: space-around;
+}
+.information{
+  background: #fff;
+  padding: 30px 12px;
+  height: 260px;
+  color:#666;
+}
+.discolor{
+  background: #EFEFFB;
+}
+.demo-infinite-container {
+  overflow: auto;
+  height: 190px;
+}
+::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+</style>