system-phone 1.4.0 → 3.0.2

package/src/components/screen/GongdanContentPage.vue

@@ -0,0 +1,149 @@
+<template>
+  <div style="background-color: darkblue">
+    <div class="left-order-body row" style="background-color: darkblue">
+      <div class="body-up">
+        <div class="up-item"><work-order-item :work-order="workOrderData[0]"
+                                              :work-oder-icon="workOrderIcon1"
+                                              :color="workOrderColors[0]"></work-order-item></div>
+        <div class="up-item"><work-order-item :work-order="workOrderData[1]"
+                                              :work-oder-icon="workOrderIcon2"
+                                              :color="workOrderColors[1]"></work-order-item></div>
+        <div class="up-item"><work-order-item :work-order="workOrderData[2]"
+                                              :work-oder-icon="workOrderIcon3"
+                                              :color="workOrderColors[2]"></work-order-item></div>
+      </div>
+      <div class="body-down">
+        <div class="down-item"><work-order-item :work-order="workOrderData[3]"
+                                                :work-oder-icon="workOrderIcon4"
+                                                :color="workOrderColors[3]"></work-order-item></div>
+        <div class="down-item"><work-order-item :work-order="workOrderData[4]"
+                                                :work-oder-icon="workOrderIcon5"
+                                                :color="workOrderColors[4]"></work-order-item></div>
+        <div class="down-item"><work-order-item :work-order="workOrderData[5]"
+                                                :work-oder-icon="workOrderIcon6"
+                                                :color="workOrderColors[5]"></work-order-item></div>
+      </div>
+    </div>
+    <div class="work-order-right row" style="background-color: darkblue">
+      <div class="right-up">
+        <div class="up-item"><work-order-right-item :deal-data="dealData[0]"
+                                                    :deal-icon="dealIcon1"></work-order-right-item></div>
+        <div class="up-item"><work-order-right-item :deal-data="dealData[1]"
+                                                    :deal-icon="dealIcon2"></work-order-right-item></div>
+        <div class="up-item"><work-order-right-item :deal-data="dealData[2]"
+                                                    :deal-icon="dealIcon3"></work-order-right-item></div>
+        <div class="up-item"><work-order-right-item :deal-data="dealData[3]"
+                                                    :deal-icon="dealIcon4" :color="completeColor"></work-order-right-item></div>
+      </div>
+      <div class="right-down">
+        <div class="down-item"><work-order-right-down-item :content-bg="contentBgs[0]"
+                                                           :down-item-data="downItemDatas[0]"></work-order-right-down-item></div>
+        <div class="down-item"><work-order-right-down-item :content-bg="contentBgs[1]"
+                                                           :down-item-data="downItemDatas[1]"></work-order-right-down-item></div>
+        <div class="down-item"><work-order-right-down-item :content-bg="contentBgs[2]"
+                                                           :down-item-data="downItemDatas[2]"></work-order-right-down-item></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  title:"GongdanContentPage",
+  data(){
+    return {
+      dealIcon1:require('src/assets/images/客服待处理.png'),
+      dealIcon2:require('src/assets/images/客服处理中.png'),
+      dealIcon3:require('src/assets/images/客服已完成.png'),
+      dealIcon4:require('src/assets/images/客服完成率.png'),
+      contentBgs:[[9,40,115],[67,51,77],[18,61,115]],
+      downItemDatas:[{title:'昨日工单',number:154,name:'日环比',percentage:'+44.18%'},
+        {title:'月度工单量',number:5149,name:'月环比',percentage:'+71.12%'},
+        {title:'年度工单量',number:145784,name:'同比',percentage:'+95.07%'}],
+      dealData: [{title:'总工单',number:90},{title:'待处理',number:30},{title:'已完成',number:60},{title:'完成率',number:67}],
+      workOrderIcon:require('src/assets/images/客服今日工单.png'),
+      workOrderIcon1:require('src/assets/images/客服工单量.png'),
+      workOrderIcon2:require('src/assets/images/客服在线处理.png'),
+      workOrderIcon3:require('src/assets/images/客服派单量.png'),
+      workOrderIcon4:require('src/assets/images/客服工单量.png'),
+      workOrderIcon5:require('src/assets/images/客服在线处理.png'),
+      workOrderIcon6:require('src/assets/images/客服网厅预约派单量.png'),
+      workOrderColors:['#FFF000','#FF8500','#00FFEF','#FFF000','#FF8500','#00D3FF'],
+      workOrderData:[{name:'工单量',number:8740},
+        {name:'在线处理',number:5487},
+        {name:'派单量',number:8740},
+        {name:'电话派单量',number:8740},
+        {name:'微信客服派单量',number:5487},
+        {name:'网厅预约派单量',number:4723}],
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.work-order-right{
+  width: 100%;
+  height: 60%;
+  background: rgba(255,255,255,.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  .right-up{
+    width: 90%;
+    height: 44%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    .up-item{
+      width: 23%;
+      height: 90%;
+    }
+  }
+  .right-down{
+    width: 90%;
+    height: 40%;
+    margin-bottom: 4%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    .down-item{
+      width: 100%;
+      height: 25%;
+    }
+  }
+}
+.left-order-body{
+  width: 100%;
+  margin-bottom: 4%;
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  .body-up{
+    width: 100%;
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    .up-item{
+      width: 100%;
+      height: 33%;
+    }
+  }
+  .body-down{
+    width: 100%;
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    .down-item{
+      width: 100%;
+      height: 33%;
+    }
+  }
+}
+</style>

package/src/components/screen/ListCountItem.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="item-base">
+      <div class="item-content">
+        <div class="content-left">{{text}}</div>
+        <div class="content-right">
+          <div class="right-percentage">{{percentage}}</div>
+          <div class="right-count">{{count}}</div>
+        </div>
+      </div>
+      <div class="item-bar">
+        <div class="bar-percentage" :style="{'background':barColor,'width':percentage}"></div>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "ListICountitem",
+      props:{
+        barColor:{
+          type:String,
+          default:'#eed2d4'
+        },
+        percentage:{
+          type:String,
+          default: '30%'
+        },
+        text:{
+          type:String,
+          default: '金额卡表收费'
+        },
+        count:{
+          type:Number,
+          default: 12210
+        }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .item-base{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .item-content{
+      width: 100%;
+      height: 70%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      font-size: vw(16);
+      .content-left{
+        margin-left: 1%;
+        width: 30%;
+        height: 90%;
+        color: #B2B0CB;
+      }
+      .content-right{
+        margin-right: 1%;
+        width: 30%;
+        height: 90%;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        text-align: right;
+        color: #fff;
+        .right-count{
+          width: 68%;
+          height: 100%;
+          margin-right: 5%;
+        }
+        .right-percentage{
+          width: 24%;
+          height: 100%;
+        }
+      }
+    }
+    .item-bar{
+      width: 100%;
+      height: 22%;
+      background: #00307F;
+      display: flex;
+      align-items: center;
+      .bar-percentage{
+        height: 100%;
+      }
+    }
+  }
+</style>

package/src/components/screen/ModuleTitle.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="title-base">
+      <div class="title-icon" :style="{'background':'url('+ moduleTileIcon +') no-repeat','background-size':'100% 100%'}"></div>
+      <div class="title-text" :style="{'font-size':font + 'vw'}">{{title}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+      title: "ModuleTitle",
+      props:{
+        moduleTileIcon:{
+          default: require('src/assets/images/收费笔数小标题.png')
+        },
+        title:{
+          type:String,
+          default:'各收费类型笔数占比（笔）'
+        },
+        font:{
+          type:Number,
+          default:0.69
+        }
+      }
+    }
+</script>
+
+<style lang="less" scoped>
+  .title-base{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .title-icon{
+      margin-top: 1%;
+      width: 6%;
+      height: 65%;
+      background: #4f5bff;
+    }
+    .title-text{
+      color: #fff;
+      margin-left: 2%;
+      margin-top: 2%;
+      width: 80%;
+      height: 100%;
+    }
+  }
+</style>