telephone-clients 3.0.104-50 → 3.0.104-50-lixian

package/src/components/eachart/statework.vue

@@ -1,226 +1,226 @@
-<template>
-  <div>
-    <div class="statework">
-      <div class="statewokelist">
-        <div :class="index===0?'yonghu-' + index : 'yonghu'"
-             :style="{
-            'background-color':
-             item.aState=== '通话中'?'#e99d42':
-              item.aState!=='未登录' && item.onlineStatus!=='未登录'?'#adef4d':'#bebebe',
-            'border': item===itemIdx? '3px solid #047ed2': '' }"
-             v-for="(index,item) in service"
-             @click="clickFunc(item)">
-          {{ item.aName ? item.aName : '未开通' }}
-        </div>
-      </div>
-    </div>
-    <div>
-      <div class="zhuantai1"></div>
-      <div class="lixian">在线</div>
-      <div class="zhuantai2"></div>
-      <div class="zaixian">接线中</div>
-      <div class="shuliang">
-        坐席数：4
-      </div>
-      <div class="shuliang1">
-        在线数：{{shuliangsum}}
-      </div>
-<!--      <div class="zhuantai3"></div>-->
-<!--      <div class="jiexian">接线中</div>-->
-    </div>
-  </div>
-</template>
-
-<script>
-import {HttpResetClass} from 'vue-client'
-
-export default {
-  name: 'statework',
-  data () {
-    return {
-      itemIdx: 1,
-      service: [],
-      sel: 0,
-      shuliangsum:0
-    }
-  },
-  ready () {
-    this.getStateDate()
-    setInterval(() => {
-      this.sel = (this.sel + 1) % 4
-      this.$emit('clickfunc', this.service[this.sel])
-      this.getStateDate()
-    }, 5000)
-  },
-  methods: {
-    getStateDate () {
-      let http = new HttpResetClass()
-      http.load('GET', 'Dual/GetALLAttendant', {}, {resolveMsg: null, rejectMsg: null}).then((res) => {
-        console.log('getStateDate' + JSON.stringify(res.data))
-        const service = []
-        this.shuliangsum=0
-        for (let stateChannel of res.data.packets) {
-          if (stateChannel.aChannel >= 65 && stateChannel.aChannel <= 72) {
-            service.push(stateChannel)
-            if (stateChannel.onlineStatus === '登录'){
-              this.shuliangsum++
-            }
-          }
-        }
-        for (let i = 0; i < 8 - service.length; i++) {
-          service.push({
-            aState: '未登录'
-          })
-        }
-        const a1 = [] //在线
-        const a2 = [] //未开通
-        for (let serviceElement of service) {
-          if (serviceElement.onlineStatus==='登录'){
-            a1.push(serviceElement)
-          }else {
-            a2.push(serviceElement)
-          }
-        }
-        this.service = [...a1, ...a2]
-      })
-    },
-    clickFunc (item) {
-      this.itemIdx = item
-      this.$emit('clickfunc', item)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-.statewokelist {
-  cursor: pointer;
-  height: 260px;
-  width: 240px;
-  position: absolute;
-  top: 42px;
-  display: grid;
-  grid-template-rows: repeat(4, 1fr);
-  grid-template-columns: repeat(2, 1fr);
-  justify-items: center;
-  align-items: center;
-  grid-auto-flow: column;
-}
-
-.yonghu {
-  &:hover {
-    color: hotpink;
-  }
-
-  &-0 {
-    &:hover {
-      color: hotpink;
-    }
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 90px;
-    height: 40px;
-    border-radius: 20px;
-    background-color: #e99d42;
-    color: #ffffff;
-    font-size: 20px;
-    text-align: center;
-    font-family: Microsoft Yahei;
-  }
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: unset;
-  width: 90px;
-  height: 40px;
-  border-radius: 20px;
-  color: #ffffff;
-  font-size: 20px;
-  text-align: center;
-  font-family: Microsoft Yahei;
-}
-
-.zhuantai1 {
-  position: fixed;
-  left: 554px;
-  top: 482px;
-  width: 40px;
-  height: 25px;
-  border-radius: 20px;
-  background-color: #adef4d;
-  text-align: center;
-}
-
-.lixian {
-  position: fixed;
-  left: 601px;
-  top: 484px;
-  width: 32px;
-  height: 24px;
-  color: rgba(247, 248, 247, 1);
-  font-size: 15px;
-  text-align: left;
-  font-family: SourceHanSansSC-regular;
-}
-
-.zhuantai2 {
-  position: fixed;
-  left: 644px;
-  top: 482px;
-  width: 38px;
-  height: 25px;
-  border-radius: 20px;
-  background-color: #e99d42;
-  text-align: center;
-}
-
-.zaixian {
-  position: fixed;
-  left: 694px;
-  top: 484px;
-  width: 49px;
-  height: 24px;
-  color: #f7f8f7;
-  font-size: 16px;
-  text-align: left;
-  font-family: SourceHanSansSC-regular;
-}
-
-//.zhuantai3 {
-//  position: fixed;
-//  left: 749px;
-//  top: 482px;
-//  width: 47px;
-//  height: 31px;
-//  border-radius: 20px;
-//  background-color: #e99d42;
-//  text-align: center;
-//}
-
-.shuliang {
-  position: fixed;
-  left: 760px;
-  top: 484px;
-  width: 82px;
-  height: 24px;
-  color: #f7f8f7;
-  font-size: 16px;
-  text-align: left;
-  font-family: SourceHanSansSC-regular;
-}
-.shuliang1 {
-  position: fixed;
-  left: 850px;
-  top: 484px;
-  width: 82px;
-  height: 24px;
-  color: #f7f8f7;
-  font-size: 16px;
-  text-align: left;
-  font-family: SourceHanSansSC-regular;
-}
-</style>
+<template>
+  <div>
+    <div class="statework">
+      <div class="statewokelist">
+        <div :class="index===0?'yonghu-' + index : 'yonghu'"
+             :style="{
+            'background-color':
+             item.aState=== '通话中'?'#e99d42':
+              item.aState!=='未登录' && item.onlineStatus!=='未登录'?'#adef4d':'#bebebe',
+            'border': item===itemIdx? '3px solid #047ed2': '' }"
+             v-for="(index,item) in service"
+             @click="clickFunc(item)">
+          {{ item.aName ? item.aName : '未开通' }}
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="zhuantai1"></div>
+      <div class="lixian">在线</div>
+      <div class="zhuantai2"></div>
+      <div class="zaixian">接线中</div>
+      <div class="shuliang">
+        坐席数：4
+      </div>
+      <div class="shuliang1">
+        在线数：{{shuliangsum}}
+      </div>
+<!--      <div class="zhuantai3"></div>-->
+<!--      <div class="jiexian">接线中</div>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import {HttpResetClass} from 'vue-client'
+
+export default {
+  name: 'statework',
+  data () {
+    return {
+      itemIdx: 1,
+      service: [],
+      sel: 0,
+      shuliangsum:0
+    }
+  },
+  ready () {
+    this.getStateDate()
+    setInterval(() => {
+      this.sel = (this.sel + 1) % 4
+      this.$emit('clickfunc', this.service[this.sel])
+      this.getStateDate()
+    }, 5000)
+  },
+  methods: {
+    getStateDate () {
+      let http = new HttpResetClass()
+      http.load('GET', 'Dual/GetALLAttendant', {}, {resolveMsg: null, rejectMsg: null}).then((res) => {
+        console.log('getStateDate' + JSON.stringify(res.data))
+        const service = []
+        this.shuliangsum=0
+        for (let stateChannel of res.data.packets) {
+          if (stateChannel.aChannel >= 65 && stateChannel.aChannel <= 72) {
+            service.push(stateChannel)
+            if (stateChannel.onlineStatus === '登录'){
+              this.shuliangsum++
+            }
+          }
+        }
+        for (let i = 0; i < 8 - service.length; i++) {
+          service.push({
+            aState: '未登录'
+          })
+        }
+        const a1 = [] //在线
+        const a2 = [] //未开通
+        for (let serviceElement of service) {
+          if (serviceElement.onlineStatus==='登录'){
+            a1.push(serviceElement)
+          }else {
+            a2.push(serviceElement)
+          }
+        }
+        this.service = [...a1, ...a2]
+      })
+    },
+    clickFunc (item) {
+      this.itemIdx = item
+      this.$emit('clickfunc', item)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.statewokelist {
+  cursor: pointer;
+  height: 260px;
+  width: 240px;
+  position: absolute;
+  top: 42px;
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  justify-items: center;
+  align-items: center;
+  grid-auto-flow: column;
+}
+
+.yonghu {
+  &:hover {
+    color: hotpink;
+  }
+
+  &-0 {
+    &:hover {
+      color: hotpink;
+    }
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 90px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: #e99d42;
+    color: #ffffff;
+    font-size: 20px;
+    text-align: center;
+    font-family: Microsoft Yahei;
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: unset;
+  width: 90px;
+  height: 40px;
+  border-radius: 20px;
+  color: #ffffff;
+  font-size: 20px;
+  text-align: center;
+  font-family: Microsoft Yahei;
+}
+
+.zhuantai1 {
+  position: fixed;
+  left: 554px;
+  top: 482px;
+  width: 40px;
+  height: 25px;
+  border-radius: 20px;
+  background-color: #adef4d;
+  text-align: center;
+}
+
+.lixian {
+  position: fixed;
+  left: 601px;
+  top: 484px;
+  width: 32px;
+  height: 24px;
+  color: rgba(247, 248, 247, 1);
+  font-size: 15px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+
+.zhuantai2 {
+  position: fixed;
+  left: 644px;
+  top: 482px;
+  width: 38px;
+  height: 25px;
+  border-radius: 20px;
+  background-color: #e99d42;
+  text-align: center;
+}
+
+.zaixian {
+  position: fixed;
+  left: 694px;
+  top: 484px;
+  width: 49px;
+  height: 24px;
+  color: #f7f8f7;
+  font-size: 16px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+
+//.zhuantai3 {
+//  position: fixed;
+//  left: 749px;
+//  top: 482px;
+//  width: 47px;
+//  height: 31px;
+//  border-radius: 20px;
+//  background-color: #e99d42;
+//  text-align: center;
+//}
+
+.shuliang {
+  position: fixed;
+  left: 760px;
+  top: 484px;
+  width: 82px;
+  height: 24px;
+  color: #f7f8f7;
+  font-size: 16px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+.shuliang1 {
+  position: fixed;
+  left: 850px;
+  top: 484px;
+  width: 82px;
+  height: 24px;
+  color: #f7f8f7;
+  font-size: 16px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+</style>