manage-client 3.2.263 → 3.2.265

package/src/filiale/ningjin/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: '40%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              num: {
+                fontWeight: '500',
+                color: '#fff',
+                fontFamily: '微软雅黑',
+                fontSize: 40,
+              },
+            }
+
+          },
+          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: 10.417vw;
+  height: 18.519vh;
+  position: absolute;
+  top: 20.556vh;
+  right: 1.40625vw;
+}
+
+</style>

package/src/filiale/ningjin/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: 2.037vh;
+  line-height: 3.611vh;
+}
+.date{
+  margin-left: 2.083vw;
+}
+.duration{
+  margin-left: 5.99vw;
+}
+.name{
+  position: absolute;
+  left: 27.396vw;
+  width: 9.259vh;
+}
+.orderType{
+  position: absolute;
+  left: 35.677vw;
+  width: 3.125vw;
+}
+.address{
+  position: absolute;
+  left: 43.021vw;
+  width: 26.042vw;
+}
+.receptionist{
+  position: absolute;
+  left: 56.771vw;
+  width: 4.6875vw;
+}
+.state{
+  position: absolute;
+  left: 64.6875vw;
+  width: 5.208vw;
+  color: #F7DB35;
+}
+
+
+
+</style>

package/src/filiale/ningjin/CallReport/ServiceStatus.vue

@@ -0,0 +1,371 @@
+<template>
+  <!-- 客服状态组件 -->
+  <div class="service-status">
+    <div v-for="serviceData in service" >
+      <div v-if="serviceData.aState!=='未登录'">
+        <i class="service1"></i>
+        <span>{{ serviceData.aName || '未登录' }}</span>
+      </div>
+      <div v-if="serviceData.aState==='未登录'">
+        <i class="service2"></i>
+        <span>{{ serviceData.aName || '未登录' }}</span>
+      </div>
+      <div v-if="serviceData.aState==='正在振铃'"><i class="status1"></i></div>
+      <div v-if="['忙','正在保存', '回访通话','通话中'].indexOf(serviceData.aState) >= 0"><i class="status2"></i></div>
+      <div v-if="serviceData.aState==='空闲'"><i class="status3"></i></div>
+      <div v-if="serviceData.aState==='未登录'"><i class="status4"></i></div>
+    </div>
+  </div>
+  <div class="status-count">
+    <div>
+      <i class="answer"></i>
+      <span class="answer-text">接听中</span>
+      <span class="answer-num">{{ data.answerNum }}</span>
+    </div>
+    <div>
+      <i class="await"></i>
+      <span class="await-text">闲置</span>
+      <span class="await-num">{{ data.awaitNum }}</span>
+    </div>
+    <div>
+      <i class="ring"></i>
+      <span class="ring-text">响铃中</span>
+      <span class="ring-num">{{ data.ringNum }}</span>
+    </div>
+    <div>
+      <i class="off-line"></i>
+      <span class="off-line-text">离线</span>
+      <span class="off-line-num">{{ data.offLineNum }}</span>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {HttpResetClass} from "vue-client";
+import * as Util from "../../../Util";
+import axios from "axios";
+
+export default {
+
+  name: "ServiceStatus",
+  components:{
+
+  },
+  data(){
+    return{
+      data:{
+        answerNum:0,
+        awaitNum:0,
+        ringNum:0,
+        offLineNum:0,
+
+      },
+      service:[],
+
+
+    }
+  },
+
+  ready(){
+    this.getRecordwork()
+    setInterval(() => {
+      this.getRecordwork()
+    }, 2000)
+  },
+  methods:{
+    getRecordwork(){
+      let http = new HttpResetClass()
+      http.load('GET', '/Dual/GetALLAttendant', {}, {resolveMsg: null, rejectMsg: null}).then((res) => {
+        //tag
+        console.log("getRecordwork"+JSON.stringify(res.data))
+        this.data.answerNum = 0
+        this.data.awaitNum = 0
+        this.data.ringNum = 0
+        this.data.offLineNum = 0
+        this.service=res.data.packets
+        console.log('this.service='+JSON.stringify(this.service));
+        for (const serviceData of this.service) {
+          switch (serviceData.aState) {
+            case '未登录':
+              this.data.offLineNum ++
+              break
+
+            case '忙':
+            // case '回访通话':
+            case '通话中':
+              this.data.answerNum ++
+              break
+            case '空闲':
+              this.data.awaitNum ++
+              break
+            case '正在振铃':
+            case '正在保存':
+              this.data.ringNum ++
+              break
+          }
+        }
+      })
+      // axios.get('/Dual/GetALLAttendant')
+      //   .then((response) => {
+      //     console.log("getRecordwork"+JSON.stringify(response.data))
+      //     this.data.answerNum = 0
+      //     this.data.awaitNum = 0
+      //     this.data.ringNum = 0
+      //     this.data.offLineNum = 0
+      //     this.service=response.data.packets
+      //     console.log('this.service='+JSON.stringify(this.service));
+      //     for (const serviceData of this.service) {
+      //       switch (serviceData.aState) {
+      //         case '未登录':
+      //           this.data.offLineNum ++
+      //           break
+      //
+      //         case '忙':
+      //         // case '回访通话':
+      //         case '通话中':
+      //           this.data.answerNum ++
+      //           break
+      //         case '空闲':
+      //           this.data.awaitNum ++
+      //           break
+      //         case '正在振铃':
+      //         case '正在保存':
+      //           this.data.ringNum ++
+      //           break
+      //       }
+      //     }
+      //   })
+    },
+
+
+  }
+}
+</script>
+
+<style scoped>
+
+
+.service-status {
+  width: 36.458vw;
+  height: 31.944vh;
+  position: absolute;
+  top: 23.241vh;
+  left: 36vw;
+  /* background: rgba(255, 255, 255, .04); */
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.service-status div {
+  height: 15.741vh;
+  display: flex;
+  width: 200px;
+}
+
+.move-down {
+  margin-top: 2.13vh;
+}
+
+.service-status div div {
+  width: 7.552vw;
+  height: 10.463vh;
+  position: relative;
+}
+
+.service1 {
+  width: 3.49vw;
+  height: 8.148vh;
+  background-image: url("../../../../static/images/zhongyi/service1.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  left: 0.78125vw;
+}
+.service2 {
+  width: 3.49vw;
+  height: 8.148vh;
+  background-image: url("../../../../static/images/zhongyi/service2.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  left: 0.78125vw;
+}
+
+
+
+
+
+
+.status1 {
+  width: 1.875vw;
+  background-image: url("../../../../static/images/zhongyi/ring.png");
+  height: 4.333vh;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  bottom: 0.185vh;
+}
+
+.status2 {
+  width: 1.875vw;
+  background-image: url("../../../../static/images/zhongyi/phone1.png");
+  height: 4.333vh;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  bottom: 0.104vw;
+}
+
+.status3 {
+  width: 2.34375vw;
+  background-image: url("../../../../static/images/zhongyi/telephone1.png");
+  height: 4.333vh;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  bottom: 0.185vh;
+}
+
+.status4 {
+  width: 1.875vw;
+  background-image: url("../../../../static/images/zhongyi/phone2.png");
+  height: 4.333vh;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  bottom: 0.185vh;
+}
+
+.service-status div span {
+  width: 5.208vw;
+  height: 2.037vh;
+  font-size: 2.037vh;
+  font-weight: bold;
+  color: #FFFEFE;
+  display: block;
+  text-align: center;
+  position: absolute;
+  top: 9.537vh;
+}
+
+
+
+.status-count {
+  width: 41.667vw;
+  height: 4.63vh;
+  /* background-color: rgb(131, 238, 188); */
+  position: absolute;
+  top: 59.537vh;
+  left: 30.573vw;
+  display: flex;
+}
+
+.answer{
+  width: 1.875vw;
+  height: 4.333vh;
+  background-image: url("../../../../static/images/zhongyi/phone1.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  top: 1.389vh;
+}
+.answer-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 3.125vw;
+}
+.answer-num{
+  font-size: 2.593vh;
+  color: #00FFEA;
+  position: absolute;
+  top: 1.204vh;
+  left: 7.24vw;
+}
+
+.await{
+  width: 2.34375vw;
+  height: 4.333vh;
+  background-image: url("../../../../static/images/zhongyi/telephone1.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  top: 1.389vh;
+  left: 10.417vw;
+}
+.await-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 14.0625vw;
+}
+.await-num{
+  font-size: 2.593vh;
+  color: #FFCD00;
+  position: absolute;
+  top: 1.204vh;
+  left: 17.271vw;
+}
+
+.ring{
+  width: 1.875vw;
+  height: 4.333vh;
+  background-image: url("../../../../static/images/zhongyi/ring.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  top: 1.389vh;
+  left: 21vw;
+}
+.ring-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 24vw;
+}
+.ring-num{
+  font-size: 2.593vh;
+  color: #FF7E00;
+  position: absolute;
+  top: 1.204vh;
+  left: 28.90625vw;
+}
+
+.off-line{
+  width: 1.875vw;
+  height: 4.333vh;
+  background-image: url("../../../../static/images/zhongyi/phone2.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: contain;
+  position: absolute;
+  top: 1.389vh;
+  left: 32.03125vw;
+}
+.off-line-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 35.417vw;
+}
+.off-line-num{
+  font-size: 2.593vh;
+  color: #DBDBDB;
+  position: absolute;
+  top: 1.204vh;
+  left: 38.802vw;
+}
+
+
+.status-count div span:nth-of-type(1) {
+  font-size: 2.037vh;
+  color: #FFFFFF;
+  line-height: 2.315vh;
+}
+</style>