manage-client 3.2.147 → 3.2.148

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>

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

@@ -1,61 +1,100 @@
 <template>
   <div class="time">
-    <span class="timeHMS">{{ data.timeHMS }}</span>
-    <span class="timeYMD">{{ data.timeYMD }}</span>
+    <div class="timeHMS">{{ hourMinuteSecond }}</div>
+    <div class="timeYMD">{{ yearMonthDay }}</div>
+<!--    <div class="timeWeek">{{ week }}</div>-->
+
   </div>
 </template>
 
 <script>
 import {HttpResetClass} from "vue-client";
+import '../../../../static/fonts/font.css'
 
 export default {
   name: "Time",
   data(){
     return{
-      data:{
-        timeHMS:'10:38: 28',
-        timeYMD:'2022-5-25星期三',
-      }
+      nextTime:"",
+      hourMinuteSecond:"",
+      yearMonthDay:"",
+      week:"",
     }
   },
+  ready(){
+    this.showTime()
+    // this.getInitData()
+  },
   methods:{
     getInitData(){
       let http = new HttpResetClass()
       http.load('post','rs/sql/getCallSumData',{}).then((res)=>{
-        console.log(res.data)
+        console.log("===========",res.data)
         // this.data = res.data[0]
       })
-    }
-  },
-  ready(){
-    // this.getInitData()
+    },
+    showTime() {
+      this.interval = setInterval(() => {
+        //開始运行
+        this.nextTime = ''
+        let dt = new Date();
+        let weekList=new Array('日','一','二','三','四','五','六',);
+        let y = dt.getFullYear();
+        let mt = dt.getMonth() + 1;
+        let day = dt.getDate();
+        let h = dt.getHours(); //获取时
+        let m = dt.getMinutes(); //获取分
+        let s = dt.getSeconds(); //获取秒
+        let week=dt.getDay();
+        let weekStr=weekList[week];
+        //时分秒<10前面拼接0
+        h = this.check(h);
+        m = this.check(m);
+        s = this.check(s);
+        // this.nextTime = h + ":" + m + ":" + s + "   " + y + "/" + mt + "/" + day + "星期"+ weekStr;
+        this.hourMinuteSecond = h + ":" + m + ":" + s;
+        this.yearMonthDay = y + "-" + mt + "-" + day+"星期"+ weekStr;
+        // this.week="星期"+ weekStr;
+
+      }, 1000); //设定定时器，循环运行
+    },
+    //检查时分秒如果<10前面拼接0
+    check(i){
+      let num;
+      i<10?num="0"+i:num=i;
+      return num;
+    },
   }
 }
 </script>
 
 <style scoped>
 .time {
-  width: 15.625vw;
-  height: 2.222vh;
+  width: 16.625vw;
+  height: 5.222vh;
   position: absolute;
   top: -1.389vh;
-  right: 1.5625vw;
+  right: 0.365vw;
+  display: flex;
+  font-family: alhy;
+  justify-content: space-around;
 }
-
 .timeHMS{
-  font-size: 25px;
-  font-weight: 600;
+  width: 6vw;
+  height: 5.037vh;
+  font-size: 2.315vh;
+  font-weight: 400;
   color: #C3DEFF;
-  line-height: 95px;
-  opacity: 0.8;
+  line-height: 8.796vh;
 }
-
 .timeYMD {
-  font-size: 18px;
-  font-weight: 600;
-  color: #BAD9FF;
-  line-height: 95px;
-  opacity: 0.6;
-  margin-left: 0.521vw;
+  width: 8.49vw;
+  height: 5.574vh;
+  font-size: 1.667vh;
+  font-weight: 400;
+  color: #C3DEFF;
+  line-height: 8.796vh;
+  opacity: 0.7;
 }
+.timeWeek{}
 </style>

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

@@ -1,37 +1,91 @@
 <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>
+    <swiper-tools :notice-list="noticeList" :title-list="titleList"></swiper-tools>
   </div>
 </template>
 
 <script>
-import ScrollContent from "./ScrollContent"
+import SwiperTools from "./SwiperTools2"
 export default {
 
   name: "Userinfo",
   components:{
-    ScrollContent
+    SwiperTools
+  },
+  data(){
+    return{
+      noticeList:[
+        {
+          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:'接听'
+        },
+      ],
+      titleList:{
+        date: '时间',
+        duration: '来电时长',
+        name:'用户姓名',
+        orderType:'工单类型',
+        address:'用户地址',
+        receptionist:'接待员',
+        state:'状态'
+      }
+    }
   },
 }
 </script>
 
-<style scoped>
-/* 用户信息样式 */
+<style lang="less" scoped>
 .userinfo {
   width: 71.40625vw;
   height: 28.426vh;
@@ -40,128 +94,4 @@ export default {
   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

@@ -1,8 +1,8 @@
 <template>
   <div class="weather">
-    <i class="weather-icon"></i>
+    <div class="weather-icon"></div>
     <span class="weather-text">
-      多云12℃-22℃
+      多云12℃ — 22℃
     </span>
   </div>
 </template>
@@ -19,23 +19,26 @@ export default {
   height: 2.222vh;
   position: absolute;
   top: 0.926vh;
-  left: 2.604vw;
+  left: 1.604vw;
+  display: flex;
 }
 
 .weather-icon {
-  width: 1.5625vw;
+  width: 1.667vw;
   height: 2.037vh;
   background-image: url("../../../../static/images/zhongyi/cloudy.png");
   background-repeat: no-repeat;
-  background-position: 0px 0px;
-  background-size: cover;
+  background-position: 0 0;
+  background-size: contain;
+  margin-top: 0.278vh;
 
 }
 
 .weather-text {
-  font-size: 25px;
+  font-family: alhy;
+  font-size: 2.315vh;
   font-weight: 400;
   color: #C3DEFF;
-  line-height: 36px;
+  line-height: 3.333vh;
 }
 </style>