manage-client 3.1.14 → 3.1.17

package/src/components/daping/CallCenter.vue

@@ -1,366 +1,368 @@
-<template>
-  <div class="flex" style="width: 100%;height: 100%">
-    <div style="height:50%" class="flex-row">
-      <div style="width:30%;height:100%">
-        <div class=" flex">
-          <div class="col-sm-12" style="height: auto;padding-left: 4%;margin:8%">
-            <span class="pf-title">热线</span>
-          </div>
-
-          <div class="flex-row ">
-            <span style="text-align: center" class="text-1 col-sm-6">当年总呼入量</span>
-            <span style="text-align: center" class="text-1 col-sm-6">当年总报修量</span>
-
-          </div>
-          <div class="flex-row " style="margin-top:1em">
-            <p style="color:#35ffff;text-align: center" class="col-sm-6"><span class="hujiao-font-title">{{callData.yearamount}}</span>
-            </p>
-            <p style="color:#ffc21f;text-align: center" class="col-sm-6"><span class="hujiao-font-title">{{callData.sumsend}}</span>
-            </p>
-
-          </div>
-
-          <div class="flex-row hujiao-title">
-            <span style="text-align: center" class="text-1 col-sm-6">当年人工接听量</span>
-            <span style="text-align: center" class="text-1 col-sm-6">当年多媒体工单</span>
-          </div>
-          <div class="flex-row hujiao-title">
-            <p class="col-sm-6" style="color:#e75050;text-align: center"><span class="hujiao-font-title">{{callData.dayamount}}</span>
-            </p>
-            <p class="col-sm-6" style="color:#2189cf;text-align: center"><span class="hujiao-font-title">{{callData.sumwmm}}</span>
-            </p>
-
-          </div>
-
-        </div>
-
-      </div>
-      <div style="width:69%;height:100%">
-        <!-- <div  style="width: 100%;height: 10%;margin-top:1em">
-            <span  :class="[param?'class1':'class2']" style="cursor: pointer;font-size:14px;padding:0 10px;"  @click="getDay">近7天</span>
-             <span :class="[param?'class2':'class1']"  style="cursor: pointer;font-size:14px;padding:0 10px;" @click="getMonth">近六个月</span>
-
-        </div> -->
-        <div style="width: 100%;height: 100%">
-          <bar-chart-line></bar-chart-line>
-        </div>
-      </div>
-
-
-    </div>
-    <div class="flex-row" style="height:50%;width:100%">
-      <div class="call" style="width:55%;height:100%">
-        <div class="flex-row scada-title">
-          <span class="font-title flex-1"></span>
-          <span class="font-title flex-1">{{year-1}}年</span>
-          <span class="font-title flex-1">{{year}}年</span>
-          <span class="font-title flex-1">较上年同期</span>
-        </div>
-        <div class="flex-row scada-title" v-for="item in arrs">
-          <span class="font-1 flex-1">{{item.name}}</span>
-          <span :class="[$index%2===0?'color1': 'color2']" class="flex-1">{{item.lastyear}}</span>
-          <span :class="[$index%2===0?'color1': 'color2']" class="flex-1">{{item.year}}</span>
-          <span class="font-2 flex-1" v-if="item.addvalue>=0">{{item.addvalue}}%<img
-            src="../../../static/NewManageHome/green.png" class="flip" style=";margin-left:5px"></span>
-          <span class="font-2 flex-1" v-if="item.addvalue<0">{{Math.abs(item.addvalue)}}%<img
-            src="../../../static/NewManageHome/图层527.png" class="flip" style="margin-left:5px;"></span>
-        </div>
-      </div>
-      <div class="call" style="width:45%;height:100%">
-        <div class="flex-row scada-title" style="border:1px solid #227ad8">
-          <span class="font-title flex-1">营业厅</span>
-          <span class="font-title flex-1">昨日派单量</span>
-          <span class="font-title flex-1">工单完成率</span>
-        </div>
-        <div class="flex-row scada-title" style="background:rgba(1,44,69,1)" v-for="item in items">
-          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFMedium">{{item.name}}</span>
-          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFBold">{{item.value}}</span>
-          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFBold">{{item.addvalue}}%</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import {HttpResetClass} from "vue-client";
-
-  export default {
-    title: '收费',
-    data() {
-      return {
-        callData: {},
-        year: 2021,
-        param: 1,
-        items: [],
-        arrs: [
-          {name: '昨日呼入量', sum: '2368', in: '4125', current: '50'},
-          {name: '昨日派单量', sum: '995', in: '1497', current: '40'}
-        ]
-      }
-    },
-    methods: {
-      getDay() {
-        this.param = 1
-      },
-      getMonth() {
-        this.param = 0
-      },
-    },
-    ready() {
-      let dt = new Date()
-      this.year = dt.getFullYear()
-      console.log("这是测试的")
-      let load1 = new HttpResetClass()
-      let load2 = new HttpResetClass()
-      let load3 = new HttpResetClass()
-      load1.load('POST', 'rs/sql/getCallSum', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((res) => {
-        this.callData = res.data[0]
-      })
-      load2.load('POST', 'rs/sql/getCallSumCompare', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((rea) => {
-        this.arrs = rea.data
-      })
-      load3.load('POST', 'rs/sql/getCallSumByUnit', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((ret) => {
-        this.items = []
-        // this.items =ret.data
-        this.items.push(ret.data.filter((item) => item.name === "滨河")[0])
-        this.items.push(ret.data.filter((item) => item.name === "乌达")[0])
-        this.items.push(ret.data.filter((item) => item.name === "海勃湾")[0])
-      })
-
-    },
-    props: {}
-  }
-</script>
-<style scoped>
-  @media screen and (max-width: 1920px) {
-    .flip {
-      transform: rotate(180deg);
-      -ms-transform: rotate(180deg); /* Internet Explorer */
-      -moz-transform: rotate(180deg); /* Firefox */
-      -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
-    }
-
-    .call {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-evenly;
-      padding: 1em 2em 1em 0;
-    }
-
-    .hujiao-title {
-      justify-content: space-around;
-      flex-direction: row;
-      height: auto;
-    }
-
-    .hujiao-font-title {
-      font-size: 24px;
-      font-weight: bolder;
-    }
-
-    .font-title {
-      font-size: 14px;
-      color: white
-    }
-
-    .font-14 {
-      font-size: 14px;
-    }
-
-    .font-12 {
-      font-size: 12px;
-      color: white
-    }
-
-    .class1 {
-      background: #012c45;
-      color: #01c5ba;
-      border: 1px solid #01c5ba
-    }
-
-    .class2 {
-      background: #011332;
-      color: #426164;
-      border: 1px solid #013544;
-    }
-
-    .flex-1 {
-      flex: 1;
-      text-align: center;
-    }
-
-    .scada-title {
-      justify-content: space-around;
-      flex-direction: row;
-      height: auto;
-    }
-
-    .text-1 {
-      font-family: pFMedium;
-      font-size: 16px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 35px;
-      letter-spacing: 0px;
-      color: #b8cee4;
-    }
-
-    .color1 {
-      font-family: pFMedium;
-      font-size: 20px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #00f6ff;
-    }
-
-    .color2 {
-      font-family: pFMedium;
-      font-size: 20px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #0096ff;
-    }
-
-    .font-1 {
-      font-family: pFRegular;
-      font-size: 16px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #ffffff;
-    }
-
-    .font-2 {
-      font-family: pFMedium;
-      font-size: 20px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #ffffff;
-    }
-  }
-
-  @media screen and (max-width: 1440px) {
-    .flip {
-      transform: rotate(180deg);
-      -ms-transform: rotate(180deg); /* Internet Explorer */
-      -moz-transform: rotate(180deg); /* Firefox */
-      -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
-    }
-
-    .call {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-evenly;
-      padding: 1em 2em 1em 0;
-    }
-
-    .hujiao-title {
-      justify-content: space-around;
-      flex-direction: row;
-      height: auto;
-    }
-
-    .hujiao-font-title {
-      font-size: 20px;
-      font-weight: bolder;
-    }
-
-    .font-title {
-      font-size: 12px;
-      color: white
-    }
-
-    .font-14 {
-      font-size: 12px;
-    }
-
-    .font-12 {
-      font-size: 10px;
-      color: white
-    }
-
-    .class1 {
-      background: #012c45;
-      color: #01c5ba;
-      border: 1px solid #01c5ba
-    }
-
-    .class2 {
-      background: #011332;
-      color: #426164;
-      border: 1px solid #013544;
-    }
-
-    .flex-1 {
-      flex: 1;
-      text-align: center;
-    }
-
-    .scada-title {
-      justify-content: space-around;
-      flex-direction: row;
-      height: auto;
-    }
-
-    .text-1 {
-      font-family: pFMedium;
-      font-size: 12px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 35px;
-      letter-spacing: 0px;
-      color: #b8cee4;
-    }
-
-    .color1 {
-      font-family: pFMedium;
-      font-size: 14px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #00f6ff;
-    }
-
-    .color2 {
-      font-family: pFMedium;
-      font-size: 14px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #0096ff;
-    }
-
-    .font-1 {
-      font-family: pFRegular;
-      font-size: 12px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #ffffff;
-    }
-
-    .font-2 {
-      font-family: pFMedium;
-      font-size: 14px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 26px;
-      letter-spacing: 0px;
-      color: #ffffff;
-    }
-  }
-
-  /**/
-</style>
-
+<template>
+  <div class="flex" style="width: 100%;height: 100%">
+    <div style="height:50%" class="flex-row">
+
+      <div style="width:30%;height:100%">
+        <div class=" flex">
+          <div class="col-sm-12" style="height: auto;padding-left: 4%;margin:8%">
+            <span class="pf-title">热线</span>
+          </div>
+
+          <div class="flex-row ">
+            <span style="text-align: center" class="text-1 col-sm-6">当年总呼入量</span>
+            <span style="text-align: center" class="text-1 col-sm-6">当年总报修量</span>
+
+          </div>
+          <div class="flex-row " style="margin-top:1em">
+            <p style="color:#35ffff;text-align: center" class="col-sm-6"><span class="hujiao-font-title">{{callData.yearamount}}</span>
+            </p>
+            <p style="color:#ffc21f;text-align: center" class="col-sm-6"><span class="hujiao-font-title">{{callData.sumsend}}</span>
+            </p>
+
+          </div>
+
+          <div class="flex-row hujiao-title">
+            <span style="text-align: center" class="text-1 col-sm-6">当年人工接听量</span>
+            <span style="text-align: center" class="text-1 col-sm-6">当年多媒体工单</span>
+          </div>
+          <div class="flex-row hujiao-title">
+            <p class="col-sm-6" style="color:#e75050;text-align: center"><span class="hujiao-font-title">{{callData.dayamount}}</span>
+            </p>
+            <p class="col-sm-6" style="color:#2189cf;text-align: center"><span class="hujiao-font-title">{{callData.sumwmm}}</span>
+            </p>
+
+          </div>
+
+        </div>
+
+      </div>
+      <div style="width:69%;height:100%">
+        <!-- <div  style="width: 100%;height: 10%;margin-top:1em">
+            <span  :class="[param?'class1':'class2']" style="cursor: pointer;font-size:14px;padding:0 10px;"  @click="getDay">近7天</span>
+             <span :class="[param?'class2':'class1']"  style="cursor: pointer;font-size:14px;padding:0 10px;" @click="getMonth">近六个月</span>
+
+        </div> -->
+        <div style="width: 100%;height: 100%">
+          <bar-chart-line></bar-chart-line>
+        </div>
+      </div>
+
+
+    </div>
+    <div class="flex-row" style="height:50%;width:100%">
+      <div class="call" style="width:55%;height:100%">
+        <div class="flex-row scada-title">
+          <span class="font-title flex-1"></span>
+          <span class="font-title flex-1">{{year-1}}年</span>
+          <span class="font-title flex-1">{{year}}年</span>
+          <span class="font-title flex-1">较上年同期</span>
+        </div>
+        <div class="flex-row scada-title" v-for="item in arrs">
+          <span class="font-1 flex-1">{{item.name}}</span>
+          <span :class="[$index%2===0?'color1': 'color2']" class="flex-1">{{item.lastyear}}</span>
+          <span :class="[$index%2===0?'color1': 'color2']" class="flex-1">{{item.year}}</span>
+          <span class="font-2 flex-1" v-if="item.addvalue>=0">{{item.addvalue}}%<img
+            src="../../../static/NewManageHome/green.png" class="flip" style=";margin-left:5px"></span>
+          <span class="font-2 flex-1" v-if="item.addvalue<0">{{Math.abs(item.addvalue)}}%<img
+            src="../../../static/NewManageHome/图层527.png" class="flip" style="margin-left:5px;"></span>
+        </div>
+      </div>
+      <div class="call" style="width:45%;height:100%">
+        <div class="flex-row scada-title" style="border:1px solid #227ad8">
+          <span class="font-title flex-1">营业厅</span>
+          <span class="font-title flex-1">昨日派单量</span>
+          <span class="font-title flex-1">工单完成率</span>
+        </div>
+        <div class="flex-row scada-title" style="background:rgba(1,44,69,1)" v-for="item in items">
+          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFMedium">{{item.name}}</span>
+          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFBold">{{item.value}}</span>
+          <span class="font-14 flex-1" style="color:#35ffff;font-family: pFBold">{{item.addvalue}}%</span>
+        </div>
+      </div>
+
+
+    </div>
+</template>
+
+<script>
+  import {HttpResetClass} from "vue-client";
+
+  export default {
+    title: '收费',
+    data() {
+      return {
+        callData: {},
+        year: 2021,
+        param: 1,
+        items: [],
+        arrs: [
+          {name: '昨日呼入量', sum: '2368', in: '4125', current: '50'},
+          {name: '昨日派单量', sum: '995', in: '1497', current: '40'}
+        ]
+      }
+    },
+    methods: {
+      getDay() {
+        this.param = 1
+      },
+      getMonth() {
+        this.param = 0
+      },
+    },
+    ready() {
+      let dt = new Date()
+      this.year = dt.getFullYear()
+      console.log("这是测试的")
+      let load1 = new HttpResetClass()
+      let load2 = new HttpResetClass()
+      let load3 = new HttpResetClass()
+      load1.load('POST', 'rs/sql/getCallSum', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((res) => {
+        this.callData = res.data[0]
+      })
+      load2.load('POST', 'rs/sql/getCallSumCompare', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((rea) => {
+        this.arrs = rea.data
+      })
+      load3.load('POST', 'rs/sql/getCallSumByUnit', {data: {}}, {rejectMsg: null, resolveMsg: null}).then((ret) => {
+        this.items = []
+        // this.items =ret.data
+        this.items.push(ret.data.filter((item) => item.name === "滨河")[0])
+        this.items.push(ret.data.filter((item) => item.name === "乌达")[0])
+        this.items.push(ret.data.filter((item) => item.name === "海勃湾")[0])
+      })
+
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  @media screen and (max-width: 1920px) {
+    .flip {
+      transform: rotate(180deg);
+      -ms-transform: rotate(180deg); /* Internet Explorer */
+      -moz-transform: rotate(180deg); /* Firefox */
+      -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
+    }
+
+    .call {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      padding: 1em 2em 1em 0;
+    }
+
+    .hujiao-title {
+      justify-content: space-around;
+      flex-direction: row;
+      height: auto;
+    }
+
+    .hujiao-font-title {
+      font-size: 24px;
+      font-weight: bolder;
+    }
+
+    .font-title {
+      font-size: 14px;
+      color: white
+    }
+
+    .font-14 {
+      font-size: 14px;
+    }
+
+    .font-12 {
+      font-size: 12px;
+      color: white
+    }
+
+    .class1 {
+      background: #012c45;
+      color: #01c5ba;
+      border: 1px solid #01c5ba
+    }
+
+    .class2 {
+      background: #011332;
+      color: #426164;
+      border: 1px solid #013544;
+    }
+
+    .flex-1 {
+      flex: 1;
+      text-align: center;
+    }
+
+    .scada-title {
+      justify-content: space-around;
+      flex-direction: row;
+      height: auto;
+    }
+
+    .text-1 {
+      font-family: pFMedium;
+      font-size: 16px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 35px;
+      letter-spacing: 0px;
+      color: #b8cee4;
+    }
+
+    .color1 {
+      font-family: pFMedium;
+      font-size: 20px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #00f6ff;
+    }
+
+    .color2 {
+      font-family: pFMedium;
+      font-size: 20px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #0096ff;
+    }
+
+    .font-1 {
+      font-family: pFRegular;
+      font-size: 16px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+
+    .font-2 {
+      font-family: pFMedium;
+      font-size: 20px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+  }
+
+  @media screen and (max-width: 1440px) {
+    .flip {
+      transform: rotate(180deg);
+      -ms-transform: rotate(180deg); /* Internet Explorer */
+      -moz-transform: rotate(180deg); /* Firefox */
+      -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
+    }
+
+    .call {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      padding: 1em 2em 1em 0;
+    }
+
+    .hujiao-title {
+      justify-content: space-around;
+      flex-direction: row;
+      height: auto;
+    }
+
+    .hujiao-font-title {
+      font-size: 20px;
+      font-weight: bolder;
+    }
+
+    .font-title {
+      font-size: 12px;
+      color: white
+    }
+
+    .font-14 {
+      font-size: 12px;
+    }
+
+    .font-12 {
+      font-size: 10px;
+      color: white
+    }
+
+    .class1 {
+      background: #012c45;
+      color: #01c5ba;
+      border: 1px solid #01c5ba
+    }
+
+    .class2 {
+      background: #011332;
+      color: #426164;
+      border: 1px solid #013544;
+    }
+
+    .flex-1 {
+      flex: 1;
+      text-align: center;
+    }
+
+    .scada-title {
+      justify-content: space-around;
+      flex-direction: row;
+      height: auto;
+    }
+
+    .text-1 {
+      font-family: pFMedium;
+      font-size: 12px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 35px;
+      letter-spacing: 0px;
+      color: #b8cee4;
+    }
+
+    .color1 {
+      font-family: pFMedium;
+      font-size: 14px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #00f6ff;
+    }
+
+    .color2 {
+      font-family: pFMedium;
+      font-size: 14px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #0096ff;
+    }
+
+    .font-1 {
+      font-family: pFRegular;
+      font-size: 12px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+
+    .font-2 {
+      font-family: pFMedium;
+      font-size: 14px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 26px;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+  }
+
+  /**/
+</style>
+