manage-client 3.2.263 → 3.2.264

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

@@ -0,0 +1,413 @@
+<template>
+  <!-- 完成率组件 -->
+  <div class="percentageComplete">
+    <div class="view">
+      <div class="pending"><i></i><span>待处理</span><span class="pendingNum">{{ data.pendingNum ?data.pendingNum:'0' }}</span></div>
+      <div class="beingProcessed"><i></i><span>处理中</span><span class="beingProcessedNum">{{ data.beingProcessedNum?data.beingProcessedNum:'0' }}</span></div>
+      <div class="completed"><i></i><span>已完成</span><span class="completedNum">{{ data.completedNum?data.completedNum:'0' }}</span></div>
+      <div class="completedEcharts"></div>
+      <div class="percentText">完成率</div>
+    </div>
+    <div class="data">
+      <ul>
+        <li><span>昨日工单</span><span class="day">{{ data.day }}</span><span>日环比</span>
+          <div v-show="data.daysFrom != '0%'" :class="data.daysFrom.startsWith('-') ?'yellowArrows':'blueArrows'"></div>
+          <span :class="data.daysFrom.startsWith('-') ?'lower':'increase'">{{ data.daysFrom.startsWith('-') ? data.daysFrom.substring(1) : data.daysFrom }}</span>
+        </li>
+        <li><span>月度工单量</span><span class="month">{{ data.month }}</span><span>月环比</span>
+          <div v-show="data.onAMonthlyBasis != '0%'":class="data.onAMonthlyBasis.startsWith('-') ?'yellowArrows':'blueArrows'"></div>
+          <span :class="data.onAMonthlyBasis.startsWith('-') ?'lower':'increase'">{{ data.onAMonthlyBasis.startsWith('-') ?data.onAMonthlyBasis.substring(1) : data.onAMonthlyBasis }}</span>
+        </li>
+        <li><span>年度工单量</span><span class="year">{{ data.year }}</span><span>同比</span>
+          <div v-show="data.yoy != '0%'" :class="data.yoy.startsWith('-') ?'yellowArrows':'blueArrows'"></div>
+          <span :class="data.yoy.startsWith('-') ?'lower':'increase'">{{ data.yoy.startsWith('-') ? data.yoy.substring(1) : data.yoy}}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import {HttpResetClass} from "vue-client";
+import * as Util from '../../../util'
+
+export default {
+  name: "PercentageComplete",
+  data(){
+    return{
+      f_orgid: '',
+      data:{
+        //待处理
+        pendingNum:'',
+        // 处理中
+        beingProcessedNum:'',
+        //已完成
+        completedNum:'',
+        //昨日工单
+        day:'',
+        //月度工单量
+        month:'',
+        //年度工单量
+        year:'',
+        //日环比、月环比、同比第一个参数，0为降，1为增长
+        //日环比
+        daysFrom:'',
+        //月环比
+        onAMonthlyBasis:'',
+        //同比
+        yoy:''
+      }
+    }
+  },
+  props:['filialeId'],
+  methods:{
+    //获取完成
+    getWorkorder(){
+      let http = new HttpResetClass()
+      http.load('post','rs/logic/WorkorderCompletionInformation',{
+        data: {
+          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
+        }
+      },{rejectMsg:null,resolveMsg:null}).then((ress)=>{
+        console.log("完成"+JSON.stringify(ress.data))
+        this.data.completedNum = ress.data.data.yiwancheng||0
+        this.data.pendingNum = ress.data.data.daichuli||0
+        this.data.beingProcessedNum = ress.data.data.chulizhong||0
+        console.log(" this.data"+JSON.stringify(this.data))
+        this.$emit('wanchenglv',ress.data.data.wanchenglv)
+      })
+    },
+    //获取环比
+    gettongyu(){
+      let http = new HttpResetClass()
+      http.load('post','rs/logic/AnnulusStatistics',{
+        data: {
+          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
+        }
+      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
+        console.log("gettongyu"+JSON.stringify(res.data))
+        this.data.daysFrom = res.data.data[0].rihuanbi||0
+        this.data.onAMonthlyBasis = res.data.data[0].yuehuanbi||0
+        this.data.yoy = res.data.data[0].nianhuanbi||0
+      })
+    },
+    //获取月工单数量环
+    getmonthworkoreder(){
+      let http = new HttpResetClass()
+      http.load('post','rs/logic/Monthlyworkorderstatistics',{
+        data: {
+          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
+        }
+      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
+        console.log("getmonthworkoreder"+JSON.stringify(res.data))
+        this.data.month = res.data.data[0].monthsum||0
+      })
+    },
+    //获取天工单数量环
+    getdayworkoreder(){
+      let http = new HttpResetClass()
+      http.load('post','rs/logic/Dayworkorderstatistics',{
+        data: {
+          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
+        }
+      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
+        console.log("getdayworkoreder"+JSON.stringify(res.data))
+        this.data.day = res.data.data[0].daysum||0
+      })
+    },
+    //获取年度工单数量环
+    getyearworkoreder(){
+      let http = new HttpResetClass()
+      http.load('post','rs/logic/Yearworkorderstatistics',{
+        data: {
+          f_orgid: this.filialeId?this.filialeId:23145 // 分公司id
+        }
+      },{rejectMsg:null,resolveMsg:null}).then((res)=>{
+        console.log("year"+JSON.stringify(res.data))
+        this.data.year = res.data.data[0].yearsum||0
+      })
+    }
+  },
+  ready(){
+    this.getWorkorder()
+    this.gettongyu()
+    this.getmonthworkoreder()
+    this.getdayworkoreder()
+    this.getyearworkoreder()
+    setInterval(() => {
+    this.getWorkorder()
+    this.gettongyu()
+    this.getmonthworkoreder()
+    this.getdayworkoreder()
+    this.getyearworkoreder()
+    }, 300000)
+  },
+  watch: {
+    'filialeId'(val){
+      console.log("filialeId>>>=====",val)
+      this.getWorkorder()
+      this.gettongyu()
+      this.getmonthworkoreder()
+      this.getdayworkoreder()
+      this.getyearworkoreder()
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 完成率组件样式 */
+.percentageComplete {
+  width: 24.198vw;
+  height: 42.852vh;
+  position: absolute;
+  top: 53.241vh;
+  left: 1.146vw;
+  background: #0f136c;
+}
+
+.pending {
+  width: 4.948vw;
+  height: 13.981vh;
+  position: absolute;
+  top: 4.63vh;
+  left: 0.573vw;
+  border: 0.093vh dashed #fff;
+}
+
+.pending i {
+  width: 93%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: 0 -0.365vw;
+  background-size: cover;
+  position: absolute;
+  background-image: url("../../../../static/images/zhongyi/exclamationPoint.png");
+  margin-left: 0.15625vw;
+}
+
+.pending span:nth-of-type(1) {
+  font-size: 2.037vh;
+  color: #FFFFFF;
+  position: absolute;
+  bottom: 9.259vh;
+  left: 0.885vw;
+}
+
+.pending span:nth-of-type(2) {
+  font-size: 2.963vh;
+  font-weight: bold;
+  color: #FF7E00;
+  position: absolute;
+  bottom: 12.222vh;
+  left: 1.5625vw;
+}
+
+.beingProcessed {
+  width: 4.948vw;
+  height: 13.981vh;
+  position: absolute;
+  top: 4.63vh;
+  left: 5.417vw;
+  border: 0.093vh dashed #fff;
+}
+
+.beingProcessed i {
+  width: 93%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: 0 -0.365vw;
+  background-size: cover;
+  position: absolute;
+  background-image: url("../../../../static/images/zhongyi/refresh.png");
+  margin-left: 0.15625vw;
+}
+
+.beingProcessed span:nth-of-type(1) {
+  font-size: 2.037vh;
+  color: #FFFFFF;
+  position: absolute;
+  bottom: 9.259vh;
+  left: 0.885vw;
+}
+
+.beingProcessed span:nth-of-type(2) {
+  font-size: 2.963vh;
+  font-weight: bold;
+  color: #FFCC0F;
+  position: absolute;
+  bottom: 12.222vh;
+  left: 1.5625vw;
+}
+
+.completed {
+  width: 4.948vw;
+  height: 13.981vh;
+  position: absolute;
+  top: 4.63vh;
+  left: 10.208vw;
+  border: 0.093vh dashed #fff;
+}
+
+.completed i {
+  width: 93%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: 0 -0.365vw;
+  background-size: cover;
+  position: absolute;
+  background-image: url("../../../../static/images/zhongyi/Pigeon.png");
+  margin-left: 0.15625vw;
+}
+
+.completed span:nth-of-type(1) {
+  font-size: 2.037vh;
+  color: #FFFFFF;
+  position: absolute;
+  bottom: 9.259vh;
+  left: 0.885vw;
+}
+
+.completed span:nth-of-type(2) {
+  font-size: 2.963vh;
+  font-weight: bold;
+  color: #01F7E6;
+  position: absolute;
+  bottom: 12.222vh;
+  left: 1.5625vw;
+}
+
+.completedEcharts {
+  width: 7.24vw;
+  height: 12.87vh;
+  opacity: 0.08;
+  border-radius: 50%;
+  position: absolute;
+  top: 4.352vh;
+  right: 1.146vw;
+  /*background-color: #00F6FF;*/
+}
+.data{
+  height: 1vh;
+}
+
+.data li {
+  width: 22.8125vw;
+  height: 4.537vh;
+  position: absolute;
+  /* position: relative; */
+  left: 1.09375vw;
+  list-style: none;
+  display: inline-block;
+}
+
+.data li:nth-of-type(1) {
+  width: 22.8125vw;
+  height: 4.537vh;
+  background-image: url('../../../../static/images/zhongyi/bluebg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  bottom: 16.389vh;
+  border: 0.093vh dashed #fff;
+}
+
+.data li:nth-of-type(2) {
+  width: 22.8125vw;
+  height: 4.537vh;
+  background-image: url('../../../../static/images/zhongyi/yellowbg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  bottom: 9.259vh;
+  border: 0.093vh dashed #fff;
+}
+
+.data li:nth-of-type(3) {
+  width: 22.8125vw;
+  height: 4.537vh;
+  background-image: url('../../../../static/images/zhongyi/bulebg2.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  bottom: 2.037vh;
+  border: 0.093vh dashed #fff;
+}
+
+.data li span:nth-of-type(1) {
+  font-size: 2.037vh;
+  color: #FFFFFF;
+  position: relative;
+  top: 0.833vh;
+  left: 0.625vw;
+}
+.data li span:nth-of-type(2) {
+  font-size: 2.5vh;
+  position: absolute;
+  font-weight: bold;
+  top: 0.556vh;
+  left: 6.823vw;
+}
+.day{
+  color: #00D2FF;
+}
+.month{
+  color: #FFCD00;
+}
+.year{
+  color: #01F7E6;
+}
+/*.data li{*/
+/*  position: relative;*/
+/*}*/
+.data li span:nth-of-type(3) {
+  font-size: 2.037vh;
+  color: #FFFFFF;
+  position: absolute;
+  top: 0.833vh;
+  right: 7.292vw;
+}
+.data li span:nth-of-type(4) {
+  font-size: 2.037vh;
+  position: absolute;
+  font-weight: bold;
+  top: 0.833vh;
+  right: 0.833vw;
+}
+
+.increase{
+  color: #01F7E6;
+}
+.lower{
+  color: #FF7E00;
+}
+.view{
+  position: relative;
+}
+.percentText{
+  width: 3.4375vw;
+  height: 2.037vh;
+  font-size: 2.037vh;
+  font-weight: bold;
+  color: #FFFFFF;
+  position: absolute;
+  top: 12vh;
+  right: 2.917vw;
+}
+.blueArrows{
+  width: 1.146vw;
+  height: 2.037vh;
+  background: url('../../../../static/images/zhongyi/blueArrows.png') no-repeat;
+  background-size: cover;
+  position: absolute;
+  right: 5.365vw;
+  top: 1.389vh;
+}
+.yellowArrows{
+  width: 1.146vw;
+  height: 2.037vh;
+  background: url('../../../../static/images/zhongyi/yellowArrows.png') no-repeat;
+  background-size: cover;
+  position: absolute;
+  right: 5.365vw;
+  top: 1.389vh;
+}
+/* 完成率组件样式结束 */
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+  <div id="echart"></div>
+</template>
+
+
+<!--PercentageCompleteEchart-->
+<script>
+import echarts from "echarts";
+export default {
+  name: "PercentageCompleteEchart",
+  // components: {},
+  props:['wanchengLv'],
+  data(){
+    return {
+      percentageComplete:this.wanchengLv?this.wanchengLv:'0%',
+    }
+  },
+  ready(){
+    this.percentageCompleteEchart()
+
+  },
+  mounted(){
+    this.percentageCompletel()
+  },
+  methods:{
+    percentageCompletel(){
+      this.percentageComplete=this.wanchengLv?this.wanchengLv:'0%'
+    },
+    percentageCompleteEchart(){
+      let myChart = echarts.init(document.getElementById("echart"));
+      let value = parseInt(this.percentageComplete.substring(0, this.percentageComplete.length - 1));
+      console.log("value"+value)
+      let option = {
+// backgroundColor:"#061740",
+        title: {
+          text: `${value}%`,
+          x: 'center',
+          y: '38%',
+          textStyle: {
+            color: '#00F6FF',
+            fontSize:36
+          }
+        },
+        series: [  {
+          type: 'pie',
+          radius: ['58%', '45%'],
+          silent: true,
+          clockwise: false,
+          startAngle: 90,
+          z: 0,
+          zlevel: 0,
+          label: {
+            normal: {
+              position: "center",
+
+            }
+          },
+          data: [{
+            value: value,
+            name: "",
+            itemStyle: {
+              normal: {
+                color:"#00F6FF",
+              }
+            }
+          },
+            {
+              value: 100-value,
+              name: "",
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: "transparent"
+                }
+              }
+            }
+          ]
+        },
+
+          {
+            name: "",
+            type: "gauge",
+            radius: "58%",
+            center: ['50%', '50%'],
+            startAngle: 0,
+            endAngle: 359.9,
+            splitNumber: 15,
+            hoverAnimation: true,
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              length: 17,
+              lineStyle: {
+                width: 5,
+                color: "#061740"
+              }
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            detail: {
+              show: false
+            },
+            data: [{
+              value: 0,
+              name: ""
+            }]
+          },
+
+        ]
+      };
+
+      myChart.setOption(option);
+
+    },
+
+  },
+  watch: {
+    'wanchengLv'(val){
+     this.percentageCompletel();
+     this.percentageCompleteEchart();
+    }
+  }
+
+}
+</script>
+
+
+<style scoped>
+#echart{
+  margin-left: 14.0625vw;
+  margin-top: 12.963vh;
+  width: 13.021vw;
+  height: 23.148vh;
+}
+canvas{}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <div id="echart2"></div>
+
+</template>
+
+<script>
+import echarts from "echarts";
+export default {
+  name: "RateBottom",
+  // components: {},
+  // props:['row','dat1'],
+  data(){
+    return {
+      hotLineData:67,  //热线服务占比
+    }
+  },
+  ready(){
+    // console.log(this.row)
+    this.RateEchart2()
+  },
+  mounted(){
+  },
+  methods:{
+
+    RateEchart2(){
+      let myChart = echarts.init(document.getElementById("echart2"));
+      let data = {
+        value: this.hotLineData,
+        name: ''
+      };
+      let option = {
+        // backgroundColor: '#0B2C6F',
+        title: {
+          text: '{num|' + data.value + '%}',
+          subtext: '\n' + data.name,
+          x: '49%',
+          y: '40%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              num: {
+                fontWeight: '500',
+                color: '#fff',
+                fontFamily: '微软雅黑',
+                fontSize: 40,
+              },
+            }
+
+          },
+          subtextStyle: {
+            lineHeight: 0,
+            fontSize: 22,
+            color: '#fff',
+
+          }
+        },
+        data: [{
+          name: data.name,
+        }],
+        series: [{ // 主圆环
+          name: data.name,
+          type: 'pie',
+          radius: ['70%', '80%'],
+          center:['50%','60%'],
+          startAngle: 180,
+          endAngle: 0,
+
+          color: [{
+            type: 'linear',
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(54, 255, 239, 1)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(54, 255, 239, .1)' // 100% 处的颜色
+            }]
+          }, 'transparent'],
+          hoverAnimation: true,
+          legendHoverLink: false,
+          z: 10,
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 50 * data.value / 100
+          }, {
+            value: 100 - (50 * data.value / 100)
+          }]
+        }, { // 中间圈
+          name: '',
+          z: 5,
+          type: 'pie',
+          cursor: 'default',
+          radius: ['95%', '95%'],
+          center:['50%','60%'],
+          startAngle: 180,
+          hoverAnimation: false,
+          legendHoverLink: false,
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          //上层虚线
+          // data: [{
+          //   value: 50,
+          //   itemStyle: {
+          //     // borderColor: '#2DF6F3',
+          //     borderType: 'dashed',
+          //     borderWidth: 2,
+          //   }
+          // }, {
+          //   value: 50,
+          //   itemStyle: {
+          //     color: 'transparent'
+          //   }
+          // }]
+        }]
+      };
+      myChart.setOption(option);
+
+    },
+
+  }
+
+}
+</script>
+
+<style scoped>
+#echart2{
+  width: 10.417vw;
+  height: 18.519vh;
+  position: absolute;
+  top: 42.13vh;
+  right: 1.40625vw;
+}
+</style>