manage-client 3.2.145 → 3.2.148

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

@@ -0,0 +1,385 @@
+<template>
+  <!-- 客服状态组件 -->
+  <div class="service-status">
+    <div>
+      <div>
+
+        <div v-if="service[0].name!=='离线'"><i class="service1"></i></div>
+        <div v-if="service[0].name==='离线'"><i class="service2"></i></div>
+
+        <div v-if="service[0].state==='振铃'"><i class="status1"></i></div>
+        <div v-if="service[0].state==='接听'"><i class="status2"></i></div>
+        <div v-if="service[0].state==='等待'"><i class="status3"></i></div>
+        <div v-if="service[0].state==='离线'"><i class="status4"></i></div>
+
+        <span>{{ service[0].name }}</span>
+      </div>
+      <div>
+
+        <div v-if="service[1].name!=='离线'"><i class="service1"></i></div>
+        <div v-if="service[1].name==='离线'"><i class="service2"></i></div>
+
+        <div v-if="service[1].state==='振铃'"><i class="status1"></i></div>
+        <div v-if="service[1].state==='接听'"><i class="status2"></i></div>
+        <div v-if="service[1].state==='等待'"><i class="status3"></i></div>
+        <div v-if="service[1].state==='离线'"><i class="status4"></i></div>
+
+        <span>{{ service[1].name }}</span>
+      </div>
+      <div>
+
+        <div v-if="service[2].name!=='离线'"><i class="service1"></i></div>
+        <div v-if="service[2].name==='离线'"><i class="service2"></i></div>
+
+        <div v-if="service[2].state==='振铃'"><i class="status1"></i></div>
+        <div v-if="service[2].state==='接听'"><i class="status2"></i></div>
+        <div v-if="service[2].state==='等待'"><i class="status3"></i></div>
+        <div v-if="service[2].state==='离线'"><i class="status4"></i></div>
+
+        <span>{{ service[2].name }}</span>
+      </div>
+    </div>
+    <div class="move-down">
+      <div>
+
+        <div v-if="service[3].name!=='离线'"><i class="service1"></i></div>
+        <div v-if="service[3].name==='离线'"><i class="service2"></i></div>
+
+        <div v-if="service[3].state==='振铃'"><i class="status1"></i></div>
+        <div v-if="service[3].state==='接听'"><i class="status2"></i></div>
+        <div v-if="service[3].state==='等待'"><i class="status3"></i></div>
+        <div v-if="service[3].state==='离线'"><i class="status4"></i></div>
+
+        <span>{{ service[3].name }}</span>
+      </div>
+      <div>
+
+        <div v-if="service[4].name!=='离线'"><i class="service1"></i></div>
+        <div v-if="service[4].name==='离线'"><i class="service2"></i></div>
+
+        <div v-if="service[4].state==='振铃'"><i class="status1"></i></div>
+        <div v-if="service[4].state==='接听'"><i class="status2"></i></div>
+        <div v-if="service[4].state==='等待'"><i class="status3"></i></div>
+        <div v-if="service[4].state==='离线'"><i class="status4"></i></div>
+
+        <span>{{ service[4].name }}</span>
+      </div>
+      <div>
+
+        <div v-if="service[5].name!=='离线'"><i class="service1"></i></div>
+        <div v-if="service[5].name==='离线'"><i class="service2"></i></div>
+
+        <div v-if="service[5].state==='振铃'"><i class="status1"></i></div>
+        <div v-if="service[5].state==='接听'"><i class="status2"></i></div>
+        <div v-if="service[5].state==='等待'"><i class="status3"></i></div>
+        <div v-if="service[5].state==='离线'"><i class="status4"></i></div>
+
+        <span>{{ service[5].name }}</span>
+      </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";
+
+export default {
+
+  name: "ServiceStatus",
+  components:{
+
+  },
+  data(){
+    return{
+      data:{
+        answerNum:'2',
+        awaitNum:'1',
+        ringNum:'2',
+        offLineNum:'1',
+
+      },
+      service:[
+        {name:'刘竹凡',state:'振铃'},//振铃，接听，等待，离线
+        {name:'马静静',state:'接听'},
+        {name:'刘竹凡',state:'振铃'},
+        {name:'李云玉',state:'接听'},
+        {name:'张思雨',state:'等待'},
+        {name:'离线',state:'离线'},
+      ],
+
+
+    }
+  },
+
+  ready(){
+    // this.getInitData()
+  },
+
+  methods:{
+    getInitData(){
+      let http = new HttpResetClass()
+      http.load('post','rs/sql/getCallSumData',{}).then((res)=>{
+        console.log(res.data)
+        // this.data = res.data[0]
+      })
+    },
+
+
+  }
+}
+</script>
+
+<style scoped>
+
+
+.service-status {
+  width: 36.458vw;
+  height: 31.944vh;
+  position: absolute;
+  top: 23.241vh;
+  left: 31.927vw;
+  /* background: rgba(255, 255, 255, .04); */
+
+}
+
+.service-status div {
+  height: 15.741vh;
+  display: flex;
+  justify-content: space-between;
+}
+
+.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;
+  right: 0.052vw;
+  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;
+  right: 0.052vw;
+  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;
+  right: 0.052vw;
+  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;
+  right: 0.052vw;
+  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: 19.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: 22.396vw;
+}
+.ring-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 25.78125vw;
+}
+.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/zhongyi/CallReport/SwiperTools.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="title-area">
+    <div v-for="value in titleList">{{ value }}</div>
+  </div>
+  <div class="userinfo-data">
+<!--    <table>-->
+<!--      <thead>-->
+<!--          <tr class="title-area" >-->
+<!--            <td v-for="value in titleList">{{ value }}</td>-->
+<!--          </tr>-->
+<!--      </thead>-->
+<!--      <tbody class="swiper-container">-->
+<!--          <tr class="swiper-wrapper"  v-for="item in noticeList">-->
+<!--            <template v-for="value in item">-->
+<!--              <td class="swiper-slide">{{value}}&emsp;</td>-->
+<!--            </template>-->
+<!--          </tr>-->
+<!--      </tbody>-->
+<!--    </table>-->
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="item in noticeList">
+            <div v-for="value in item">
+              <div>{{value}}&emsp;</div>
+            </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:5,
+        speed:3
+      }
+    },
+    titleList:{
+      type:Object,
+      default:{
+      }
+    }
+    ,
+    noticeList:{
+      type:Array,
+      default:[
+        {
+          date: '',
+          duration:'',
+          name:'',
+          orderType:'',
+          address:'',
+          receptionist:'',
+          state:''
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.title-area {
+  color: #00D2FF;
+  font-size: 2.5vh;
+  display: flex;
+  height: 5.093vh;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  margin-top: 2.407vh;
+  text-align: center;
+  justify-content: space-evenly;
+  //div:nth-of-type(1){width: 25%;}
+  //div:nth-of-type(2){width: 8%;}
+  //div:nth-of-type(3){width: 15%;}
+  //div:nth-of-type(4){width: 8%;}
+  //div:nth-of-type(5){width: 21%;}
+  //div:nth-of-type(6){width: 10%;}
+  //div:nth-of-type(7){width: 11%;}
+}
+
+.userinfo-data {
+  height: 19.63vh;
+  position: absolute;
+  top: 8.148vh;
+  left: 0.521vw;
+  width: 71.354vw;
+  pointer-events: none;
+}
+.swiper-slide{
+  display: flex;
+  color: #ffffff;
+  font-size: 22px;
+  line-height: 41px;
+  justify-content: space-evenly;
+
+  //div:nth-of-type(1){
+  //  width: 230px;
+  //}
+  //div:nth-of-type(2){
+  //  width: 70px;
+  //}
+  //div:nth-of-type(3){
+  //  width: 100px;
+  //}
+  //div:nth-of-type(4){
+  //  width: 22px;
+  //}
+  //div:nth-of-type(5){
+  //  height: 100%;
+  //  width: 266px;
+  //  //text-align: center;
+  //  margin-left: 40px;
+  //  div{
+  //    overflow: hidden;
+  //    text-overflow: ellipsis;
+  //    white-space: nowrap;
+  //  }
+  //}
+  //div:nth-of-type(6){
+  //  width: 90px;
+  //}
+  //div:nth-of-type(7){
+  //  width: 66px;
+  //  color: #F7DB35;
+  //}
+}
+
+</style>

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

@@ -0,0 +1,143 @@
+<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 // 循环模式选项
+          });
+        })
+      },
+      // addScroll() {
+      //   let tBody = document.getElementsByClassName('zyl-tBody');
+      //   if (tBody) {
+      //     tBody.addEventListener('scroll', this.handleScroll);
+      //   }
+      //
+      // }
+
+    }
+  },
+  // ready(){
+  //   this.show1()
+  // },
+  // methods:{
+  //   show1(){
+  //     let temp = document.getElementsByTagName("template");
+  //     let clon = temp.content.cloneNode(true);
+  //     document.body.appendChild(clon);
+  //   }
+  // },
+  props:{
+    rowSpeed:{
+      /* 行数 row 速度 speed */
+      type:Object,
+      default: {
+        row:5,
+        speed:3
+      }
+    },
+    titleList:{
+      type:Object,
+      default:{
+      }
+    }
+    ,
+    noticeList:{
+      type:Array,
+      default:[
+        {
+        },
+      ]
+    }
+  }
+}
+</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;
+  /*margin-top: 2.407vh;*/
+  text-align: center;
+  /*justify-content: space-evenly;*/
+}
+
+.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>