manage-client 3.2.262 → 3.2.264

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>

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="title-area">
+    <div v-for="value in titleList">{{ value }}</div>
+  </div>
+  <div class="userinfo-data">
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="item in noticeList">
+          <div>{{item.f_created_date||'无'}}</div>
+          <div>{{item.f_user_name||'无'}}</div>
+          <div>{{item.f_workorder_type||'无'}}</div>
+          <div>{{item.f_address||'无'}}</div>
+          <div>{{item.f_single_man||'无'}}</div>
+          <div v-if="item.f_workorder_type=='报修单'||item.f_workorder_type=='置换通气单'">{{'下派'}}</div>
+          <div v-else>{{item.f_handlings||'无'}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swiper from "swiper"
+import 'swiper/css/swiper.min.css'
+export default {
+  name: "SwiperSlide",
+  watch:{
+    noticeList: {
+      immediate: true,
+      deep:true,//深度监听,也是看情况使用
+      handler() {
+        this.$nextTick(()=>{
+          new Swiper ('.swiper-container', {
+            slidesPerView : this.rowSpeed.row,
+            speed:this.rowSpeed.speed*1000,
+            //垂直播放
+            direction: 'vertical',
+            autoplay: {
+              delay: 0,
+              stopOnLastSlide: false,
+              disableOnInteraction: true,
+              // waitForTransition: false,
+            },
+            loop: true // 循环模式选项
+          });
+        })
+      },
+    }
+  },
+  props:{
+    rowSpeed:{
+      /* 行数 row 速度 speed */
+      type:Object,
+      default: {
+        row:6,
+        speed:3
+      }
+    },
+    titleList:{
+      type:Object,
+      default:{
+      }
+    }
+    ,
+    noticeList:{
+      type:Array,
+      default:[
+        {
+          f_created_date: '',
+          f_user_name:'',
+          f_workorder_type:'',
+          f_address:'',
+          f_single_man:'',
+          f_handlings:''
+        },
+      ]
+    }
+  },
+  ready(){
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.title-area {
+  color: #00D2FF;
+  font-size: 2.5vh;
+  display: flex;
+  height: 5.093vh;
+  align-items: center;
+  position: relative;
+  margin-top: 2.407vh;
+  text-align: center;
+  div:nth-of-type(1){width: 260px}
+  div:nth-of-type(2){width: 180px}
+  div:nth-of-type(3){width: 170px}
+  div:nth-of-type(4){width: 400px}
+  div:nth-of-type(5){width: 150px}
+  div:nth-of-type(6){width: 150px}
+}
+
+.userinfo-data {
+  height: 19.63vh;
+  pointer-events: none;
+}
+.swiper-slide{
+  display: flex;
+  color: #ffffff;
+  font-size: 22px;
+  line-height: 41px;
+
+  div:nth-of-type(1){
+    width: 260px;
+    text-align: center;
+  }
+  div:nth-of-type(2){
+    width: 180px;
+    text-align: center;
+  }
+  div:nth-of-type(3){
+    width: 170px;
+    text-align: center;
+  }
+  div:nth-of-type(4){
+    height: 100%;
+    width: 400px;
+    text-align: center;
+    div{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  div:nth-of-type(5){
+    width: 150px;
+    text-align: center;
+  }
+  div:nth-of-type(6){
+    width: 150px;
+    color: #F7DB35;
+    text-align: center;
+  }
+}
+
+</style>

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

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <table style="width: 100%">
+      <thead>
+        <tr class="title-area" >
+          <td v-for="value in titleList">{{ value }}</td>
+        </tr>
+      </thead>
+<!--      显示不出来-->
+      <tbody class="swiper-container">
+        <template class="swiper-wrapper">
+          <tr class="swiper-slide" v-for="item in noticeList">
+            <td v-for="value in item">{{value}}</td>
+          </tr>
+        </template>
+      </tbody>
+<!--      格式不对-->
+<!--      <tbody class="swiper-container">-->
+<!--        <tr class="swiper-wrapper">-->
+<!--          <td class="swiper-slide" v-for="item in noticeList">-->
+<!--            <span v-for="value in item">{{value}}</span>-->
+<!--          </td>-->
+<!--        </tr>-->
+<!--      </tbody>-->
+<!--      动不了的-->
+<!--      <tbody class="swiper-container">-->
+<!--        <tr class="swiper-slide" v-for="item in noticeList">-->
+<!--          <td v-for="value in item">{{value}}</td>-->
+<!--        </tr>-->
+<!--      </tbody>-->
+    </table>
+  </div>
+</template>
+
+<script>
+import Swiper from "swiper";
+import 'swiper/css/swiper.min.css'
+export default {
+  name: "SwiperTools2",
+  watch:{
+    noticeList: {
+      immediate: true,
+      deep:true,//深度监听,也是看情况使用
+      handler() {
+        this.$nextTick(()=>{
+          new Swiper ('.swiper-container', {
+            slidesPerView : this.rowSpeed.row,
+            speed:this.rowSpeed.speed*1000,
+            //垂直播放
+            direction: 'vertical',
+            autoplay: {
+              delay: 0,
+              stopOnLastSlide: false,
+              disableOnInteraction: true,
+              // waitForTransition: false,
+            },
+            loop: true // 循环模式选项
+          });
+        })
+      },
+
+    }
+  },
+  props:{
+    rowSpeed:{
+      /* 行数 row 速度 speed */
+      type:Object,
+      default: {
+        row:5,
+        speed:3
+      }
+    },
+    titleList:{
+      type:Object,
+      default:{
+      }
+    }
+    ,
+    noticeList:{
+      type:Array,
+      default:[
+  {
+    date: "2022-09-01 10:25:06",
+    duration:'2min',
+    name:'赵王莉1',
+    orderType:'报修',
+    address:'建设小区21号112室',
+    receptionist:'候倩楠',
+    state:'接听'
+  },
+  {
+    date: "2022-09-01 10:25:06",
+    duration:'2min',
+    name:'林妹妹1',
+    orderType:'报修',
+    address:'建设小区21号112室',
+    receptionist:'候倩楠',
+    state:'接听'
+  },
+  {
+    date: "2022-09-01 10:25:06",
+    duration:'2min',
+    name:'赵王莉2',
+    orderType:'报修',
+    address:'建设小区21号112室',
+    receptionist:'候倩楠',
+    state:'接听'
+  },
+  {
+    date: "2022-09-01 10:25:06",
+    duration:'2min',
+    name:'林妹妹2',
+    orderType:'报修',
+    address:'建设小区21号112室',
+    receptionist:'候倩楠',
+    state:'接听'
+  },
+  {
+    date: "2022-09-01 10:25:06",
+    duration:'2min',
+    name:'赵王莉3',
+    orderType:'报修',
+    address:'建设小区21号112室',
+    receptionist:'候倩楠',
+    state:'接听'
+  },
+  {
+    date: "2022-09-01 10:25:06",
+    duration:'2min',
+    name:'林妹妹3',
+    orderType:'报修',
+    address:'建设小区21号112室',
+    receptionist:'候倩楠',
+    state:'接听'
+  },
+],
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.title-area {
+  width: 100%;
+  height: 100%;
+  color: #00D2FF;
+  font-size: 2.5vh;
+  /*display: flex;*/
+  /*height: 5.093vh;*/
+  /*flex-direction: row;*/
+  /*align-items: center;*/
+  position: relative;
+  text-align: center;
+}
+
+.userinfo-data {
+  width: 100%;
+  height: 100%;
+  /*position: absolute;*/
+  /*top: 8.148vh;*/
+  /*left: 0.521vw;*/
+  /*width: 71.354vw;*/
+  //pointer-events: none;
+}
+.swiper-slide {
+  /*display: flex;*/
+  width: 100%;
+  color: #ffffff;
+  font-size: 22px;
+  line-height: 41px;
+  text-align: center;
+  /*justify-content: space-evenly;*/
+  height: 20%;
+}
+
+</style>