manage-client 3.2.144 → 3.2.147

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: 67px;
+  height: 88px;
+  background-image: url("../../../../static/images/zhongyi/service1.png");
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  left: 15px;
+}
+.service2 {
+  width: 67px;
+  height: 88px;
+  background-image: url("../../../../static/images/zhongyi/service2.png");
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  left: 15px;
+}
+
+
+
+
+
+
+.status1 {
+  width: 1.875vw;
+  background-image: url("../../../../static/images/zhongyi/ring.png");
+  height: 36px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  right: 1px;
+  bottom: 2px;
+}
+
+.status2 {
+  width: 1.875vw;
+  background-image: url("../../../../static/images/zhongyi/phone1.png");
+  height: 36px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  right: 1px;
+  bottom: 2px;
+}
+
+.status3 {
+  width: 2.34375vw;
+  background-image: url("../../../../static/images/zhongyi/telephone1.png");
+  height: 36px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  right: 1px;
+  bottom: 2px;
+}
+
+.status4 {
+  width: 1.875vw;
+  background-image: url("../../../../static/images/zhongyi/phone2.png");
+  height: 36px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  right: 1px;
+  bottom: 2px;
+}
+
+.service-status div span {
+  width: 5.208vw;
+  height: 2.037vh;
+  font-size: 22px;
+  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: 3.333vh;
+  background-image: url("../../../../static/images/zhongyi/phone1.png");
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  top: 1.389vh;
+}
+.answer-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 3.125vw;
+}
+.answer-num{
+  font-size: 28px;
+  color: #00FFEA;
+  position: absolute;
+  top: 1.204vh;
+  left: 7.24vw;
+}
+
+.await{
+  width: 2.34375vw;
+  height: 3.333vh;
+  background-image: url("../../../../static/images/zhongyi/telephone1.png");
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  top: 1.389vh;
+  left: 10.417vw;
+}
+.await-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 14.0625vw;
+}
+.await-num{
+  font-size: 28px;
+  color: #FFCD00;
+  position: absolute;
+  top: 1.204vh;
+  left: 19.271vw;
+}
+
+.ring{
+  width: 1.875vw;
+  height: 3.333vh;
+  background-image: url("../../../../static/images/zhongyi/ring.png");
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  top: 1.389vh;
+  left: 22.396vw;
+}
+.ring-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 25.78125vw;
+}
+.ring-num{
+  font-size: 28px;
+  color: #FF7E00;
+  position: absolute;
+  top: 1.204vh;
+  left: 28.90625vw;
+}
+
+.off-line{
+  width: 1.875vw;
+  height: 3.333vh;
+  background-image: url("../../../../static/images/zhongyi/phone2.png");
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+  position: absolute;
+  top: 1.389vh;
+  left: 32.03125vw;
+}
+.off-line-text{
+  position: absolute;
+  top: 1.852vh;
+  left: 35.417vw;
+}
+.off-line-num{
+  font-size: 28px;
+  color: #DBDBDB;
+  position: absolute;
+  top: 1.204vh;
+  left: 38.802vw;
+}
+
+
+.status-count div span:nth-of-type(1) {
+  font-size: 22px;
+  color: #FFFFFF;
+  line-height: 25px;
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="time">
+    <span class="timeHMS">{{ data.timeHMS }}</span>
+    <span class="timeYMD">{{ data.timeYMD }}</span>
+  </div>
+</template>
+
+<script>
+import {HttpResetClass} from "vue-client";
+
+export default {
+  name: "Time",
+  data(){
+    return{
+      data:{
+        timeHMS:'10:38: 28',
+        timeYMD:'2022-5-25星期三',
+      }
+    }
+  },
+  methods:{
+    getInitData(){
+      let http = new HttpResetClass()
+      http.load('post','rs/sql/getCallSumData',{}).then((res)=>{
+        console.log(res.data)
+        // this.data = res.data[0]
+      })
+    }
+  },
+  ready(){
+    // this.getInitData()
+  }
+}
+</script>
+
+<style scoped>
+.time {
+  width: 15.625vw;
+  height: 2.222vh;
+  position: absolute;
+  top: -1.389vh;
+  right: 1.5625vw;
+}
+
+.timeHMS{
+  font-size: 25px;
+  font-weight: 600;
+  color: #C3DEFF;
+  line-height: 95px;
+  opacity: 0.8;
+}
+
+.timeYMD {
+  font-size: 18px;
+  font-weight: 600;
+  color: #BAD9FF;
+  line-height: 95px;
+  opacity: 0.6;
+  margin-left: 0.521vw;
+}
+</style>

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

@@ -0,0 +1,167 @@
+<template>
+  <!-- 用户信息 -->
+  <div class="userinfo">
+
+
+    <div class="title-area">
+      <div>时间</div>
+      <div>来电时长</div>
+      <div>用户姓名</div>
+      <div>工单类型</div>
+      <div>用户地址</div>
+      <div>接待员</div>
+      <div>状态</div>
+    </div>
+    <div class="userinfo-data">
+      <div class="list-area"><scroll-content :notice-list="noticeList"></scroll-content></div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ScrollContent from "./ScrollContent"
+export default {
+
+  name: "Userinfo",
+  components:{
+    ScrollContent
+  },
+}
+</script>
+
+<style scoped>
+/* 用户信息样式 */
+.userinfo {
+  width: 71.40625vw;
+  height: 28.426vh;
+  background: rgba(255, 255, 255, .04);
+  position: absolute;
+  right: 1.09375vw;
+  bottom: 3.889vh;
+}
+
+
+.title-area {
+  /*width: 96%;*/
+  /* height: 80%; */
+  color: #00D2FF;
+
+  font-size: 27px;
+  /*background: #4f5bff;*/
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  /*left: 6.823vw;*/
+
+}
+.title-area div {
+  position: relative;
+  bottom: -1.667vh;
+}
+.title-area div:nth-of-type(1){
+  margin-left: 7.24vw;
+}
+.title-area div:nth-of-type(2){
+  margin-left: 7.917vw;
+}
+.title-area div:nth-of-type(3){
+  margin-left: 3.177vw;
+}
+.title-area div:nth-of-type(4){
+  margin-left: 2.34375vw;
+}
+.title-area div:nth-of-type(5){
+  margin-left: 5.46875vw;
+}
+.title-area div:nth-of-type(6){
+  margin-left: 5.46875vw;
+}
+.title-area div:nth-of-type(7){
+  margin-left: 4.01vw;
+}
+
+/*.title-item {*/
+/*  width: 12%;*/
+/*  !*height: 21%;*!*/
+/*  position: relative;*/
+/*  bottom: -1.667vh;*/
+/*}*/
+
+/*.special {*/
+/*  width: 17%;*/
+/*  margin-left: 7.24vw;*/
+/*}*/
+
+/*.type {*/
+/*  width: 16%;*/
+/*}*/
+
+/*.address {*/
+/*  width: 16%;*/
+/*}*/
+
+.userinfo-data {
+  height: 19.63vh;
+  position: absolute;
+  top: 8.148vh;
+  left: 0.521vw;
+}
+
+.userinfo-data ul {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+}
+
+.userinfo-data ul li {
+  list-style: none;
+  color: #ffffff;
+  font-size: 22px;
+  line-height: 39px;
+}
+
+.userinfo-data ul li:nth-of-type(1) {
+  margin-left: 2.083vw;
+}
+
+.userinfo-data ul li:nth-of-type(2) {
+  margin-left: 5.99vw;
+}
+
+.userinfo-data ul li:nth-of-type(3) {
+  position: absolute;
+  left: 27.396vw;
+  width: 5.208vw;
+}
+
+.userinfo-data ul li:nth-of-type(4) {
+  position: absolute;
+  left: 35.677vw;
+  width: 3.125vw;
+}
+
+.userinfo-data ul li:nth-of-type(5) {
+  /* margin-left: 396px; */
+  position: absolute;
+  left: 43.021vw;
+  width: 26.042vw;
+}
+
+.userinfo-data ul li:nth-of-type(6) {
+  position: absolute;
+  left: 56.771vw;
+  width: 4.6875vw;
+}
+
+.userinfo-data ul li:nth-of-type(7) {
+  position: absolute;
+  left: 64.6875vw;
+  width: 5.208vw;
+  color: #F7DB35;
+}
+
+/* 用户信息样式结束 */
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="weather">
+    <i class="weather-icon"></i>
+    <span class="weather-text">
+      多云12℃-22℃
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WeatherData"
+}
+</script>
+
+<style scoped>
+.weather {
+  width: 13.021vw;
+  height: 2.222vh;
+  position: absolute;
+  top: 0.926vh;
+  left: 2.604vw;
+}
+
+.weather-icon {
+  width: 1.5625vw;
+  height: 2.037vh;
+  background-image: url("../../../../static/images/zhongyi/cloudy.png");
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  background-size: cover;
+
+}
+
+.weather-text {
+  font-size: 25px;
+  font-weight: 400;
+  color: #C3DEFF;
+  line-height: 36px;
+}
+</style>