manage-client 3.2.144 → 3.2.147

package/src/filiale/zhongyi/CallReport/RateBottom.vue

@@ -0,0 +1,143 @@
+<template>
+  <div id="echart2"></div>
+
+</template>
+
+<script>
+import echarts from "echarts";
+export default {
+  name: "RateBottom",
+  // components: {},
+  // props:['row','dat1'],
+  data(){
+    return {
+      hotLineData:67,  //热线服务占比
+    }
+  },
+  ready(){
+    // console.log(this.row)
+    this.RateEchart2()
+  },
+  mounted(){
+  },
+  methods:{
+
+    RateEchart2(){
+      let myChart = echarts.init(document.getElementById("echart2"));
+      let data = {
+        value: this.hotLineData,
+        name: ''
+      };
+      let option = {
+        // backgroundColor: '#0B2C6F',
+        title: {
+          text: '{num|' + data.value + '%}',
+          subtext: '\n' + data.name,
+          x: '49%',
+          y: '49%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              num: {
+                fontWeight: '500',
+                color: '#fff',
+                fontFamily: '微软雅黑',
+                fontSize: 50,
+              },
+            }
+
+          },
+          subtextStyle: {
+            lineHeight: 0,
+            fontSize: 22,
+            color: '#fff',
+
+          }
+        },
+        data: [{
+          name: data.name,
+        }],
+        series: [{ // 主圆环
+          name: data.name,
+          type: 'pie',
+          radius: ['70%', '80%'],
+          center:['50%','60%'],
+          startAngle: 180,
+          endAngle: 0,
+
+          color: [{
+            type: 'linear',
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(54, 255, 239, .1)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(54, 255, 239, 1)' // 100% 处的颜色
+            }]
+          }, 'transparent'],
+          hoverAnimation: true,
+          legendHoverLink: false,
+          z: 10,
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 50 * data.value / 100
+          }, {
+            value: 100 - (50 * data.value / 100)
+          }]
+        }, { // 中间圈
+          name: '',
+          z: 5,
+          type: 'pie',
+          cursor: 'default',
+          radius: ['95%', '95%'],
+          center:['50%','60%'],
+          startAngle: 180,
+          hoverAnimation: false,
+          legendHoverLink: false,
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          //上层虚线
+          // data: [{
+          //   value: 50,
+          //   itemStyle: {
+          //     // borderColor: '#2DF6F3',
+          //     borderType: 'dashed',
+          //     borderWidth: 2,
+          //   }
+          // }, {
+          //   value: 50,
+          //   itemStyle: {
+          //     color: 'transparent'
+          //   }
+          // }]
+        }]
+      };
+      myChart.setOption(option);
+
+    },
+
+  }
+
+}
+</script>
+
+<style scoped>
+#echart2{
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  top: 455px;
+  right: 27px;
+}
+</style>

package/src/filiale/zhongyi/CallReport/RateTop.vue

@@ -0,0 +1,144 @@
+<template>
+  <div id="echart1" ></div>
+
+</template>
+
+<script>
+import echarts from "echarts";
+export default {
+  name: "RateTop",
+  // components: {},
+  // props:['row','dat1'],
+  data(){
+    return {
+      netHallData:88,   //网厅预约占比
+    }
+  },
+  ready(){
+    // console.log(this.row)
+    this.RateEchart1()
+  },
+  mounted(){
+  },
+  methods:{
+
+    RateEchart1(){
+      let myChart = echarts.init(document.getElementById("echart1"));
+      let data = {
+        value: this.netHallData,
+        name: ''
+      };
+      let option = {
+        // backgroundColor: '#0B2C6F',
+        title: {
+          text: '{num|' + data.value + '%}',
+          subtext: '\n' + data.name,
+          x: '49%',
+          y: '49%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              num: {
+                fontWeight: '500',
+                color: '#fff',
+                fontFamily: '微软雅黑',
+                fontSize: 50,
+              },
+            }
+
+          },
+          subtextStyle: {
+            lineHeight: 0,
+            fontSize: 22,
+            color: '#fff',
+
+          }
+        },
+        data: [{
+          name: data.name,
+        }],
+        series: [{ // 主圆环
+          name: data.name,
+          type: 'pie',
+          radius: ['70%', '80%'],
+          center:['50%','60%'],
+          startAngle: 180,
+          endAngle: 0,
+
+          color: [{
+            type: 'linear',
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(255, 205, 0, .1)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(255, 205, 0, 1)' // 100% 处的颜色
+            }]
+          }, 'transparent'],
+          hoverAnimation: true,
+          legendHoverLink: false,
+          z: 10,
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 50 * data.value / 100
+          }, {
+            value: 100 - (50 * data.value / 100)
+          }]
+        }, { // 中间圈
+          name: '',
+          z: 5,
+          type: 'pie',
+          cursor: 'default',
+          radius: ['95%', '95%'],
+          center:['50%','60%'],
+          startAngle: 180,
+          hoverAnimation: false,
+          legendHoverLink: false,
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          //上层虚线
+          // data: [{
+          //   value: 50,
+          //   itemStyle: {
+          //     // borderColor: '#2DF6F3',
+          //     borderType: 'dashed',
+          //     borderWidth: 2,
+          //   }
+          // }, {
+          //   value: 50,
+          //   itemStyle: {
+          //     color: 'transparent'
+          //   }
+          // }]
+        }]
+      };
+      myChart.setOption(option);
+
+    },
+
+  }
+
+}
+</script>
+
+<style scoped>
+#echart1{
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  top: 222px;
+  right: 27px;
+}
+
+</style>

package/src/filiale/zhongyi/CallReport/ScrollContent.vue

@@ -0,0 +1,143 @@
+<template>
+  <div :data="noticeList" class="seamless-warp"  :class-option="optionCustomer">
+    <ul class="item">
+      <li v-for="item in noticeList">
+        <span class="date">{{item.date}}</span>
+        <span class="duration" >{{item.duration}}</span>
+        <span class="name">{{item.name}}</span>
+        <span class="orderType">{{item.orderType}}</span>
+        <span class="address">{{item.address}}</span>
+        <span class="receptionist">{{item.receptionist}}</span>
+        <span class="state">{{item.state}}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScrollContent",
+  // name: "ScrollTest",
+  components:{
+    // ScrollBase
+  },
+  props:{
+    noticeList:{
+      type:Array,
+      default:[
+        {
+          date: "2022-09-01 10:25:06",
+          duration:'2min',
+          name:'赵王莉',
+          orderType:'报修',
+          address:'建设小区21号112室',
+          receptionist:'候倩楠',
+          state:'接听'
+        },
+        {
+          date: "2022-09-01 10:25:06",
+          duration:'2.5min',
+          name:'林妹妹',
+          orderType:'抢险',
+          address:'伊水花园21-1-1254',
+          receptionist:'马静静',
+          state:'待处理'
+        },
+        {
+          date: "2022-09-01 10:25:06",
+          duration:'2min',
+          name:'林妹妹',
+          orderType:'抢险',
+          address:'伊水花园21-1-1254',
+          receptionist:'马静静',
+          state:'待处理'
+        },
+        {
+          date: "2022-09-01 10:25:06",
+          duration:'2.5min',
+          name:'林妹妹',
+          orderType:'抢险',
+          address:'伊水花园21-1-1254',
+          receptionist:'马静静',
+          state:'待处理'
+        },
+        {
+          date: "2022-09-01 10:25:06",
+          duration:'2.5min',
+          name:'林妹妹',
+          orderType:'抢险',
+          address:'伊水花园21-1-1254',
+          receptionist:'马静静',
+          state:'待处理'
+        },
+
+
+
+
+
+      ]
+    }
+  },
+  data() {
+    return {
+      optionCustomer: {
+        step: 0.2,
+        limitMoveNum: 3, //限制开始滚动的条数
+        openTouch: false,
+        waitTime: 5, //滚动的速度
+        direction: 1, //方向 0 往下 1 往上 2向左 3向右
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+li{
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+}
+span{
+  color: #ffffff;
+  font-size: 22px;
+  line-height: 39px;
+}
+.date{
+  margin-left: 40px;
+}
+.duration{
+  margin-left: 115px;
+}
+.name{
+  position: absolute;
+  left: 526px;
+  width: 100px;
+}
+.orderType{
+  position: absolute;
+  left: 685px;
+  width: 60px;
+}
+.address{
+  position: absolute;
+  left: 826px;
+  width: 500px;
+}
+.receptionist{
+  position: absolute;
+  left: 1090px;
+  width: 90px;
+}
+.state{
+  position: absolute;
+  left: 1242px;
+  width: 100px;
+  color: #F7DB35;
+}
+
+
+
+</style>