system-phone 3.1.0 → 3.1.2

package/src/components/screen/GongdanContentPage.vue

@@ -1,149 +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>
+<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

@@ -1,93 +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>
+<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

@@ -1,48 +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>
+<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>