manage-client 3.2.86-4 → 3.2.86-aode

package/src/components/daping/BarChartLine.vue

@@ -1,284 +0,0 @@
-<template>
-<div id="barchart-line" style="width: 100%;height: 100%">
-
-</div>
-</template>
-
-<script>
-  import {HttpResetClass} from 'vue-client'
-  export default {
-    title: '收费',
-    data() {
-      return{
-          xData : ['1', '2', '3', '4', '5', '6'],
-          yData1 : [12944, 72188, 55748, 36948, 28498, 27358],
-          yData2 : [25968, 13128, 47838, 23148, 23498, 26538],
-          yData3 : [33357, 14893, 32526, 32559, 37335, 36626]
-      }
-
-    },
-    methods: {
-      init() {
-        var xData = this.xData,
-          yData1 = this.yData1,
-          yData2 = this.yData2,
-          yData3 = this.yData3,
-          borderData = [],
-          legend = ['呼入量', '人工接听量','报修量'],
-          colorArr = [{
-            start: 'rgba(242,153,97)',
-            mid: 'rgba(242,153,97,0.7)',
-            end: 'rgba(0, 0, 0,0.5)'
-          },
-            {
-              end: 'rgba(0, 0, 0,0.5)',
-              mid: 'rgba(111,217,208,0.7)',
-              start: 'rgba(111,217,208)'
-            },
-            {
-              color: '#ffd71f'
-            }
-          ]
-        let normalColor = 'rgba(8,115,142)'
-        let seriesData = []
-        var borderHeight = 4
-        xData.forEach(element => {
-          borderData.push(borderHeight)
-        });
-        [yData1, yData2, yData3].forEach((item, index) => {
-          var obj1 = {}
-          if (index < 2) {
-            obj1 = {
-              name: legend[index],
-              type: 'bar',
-              stack: legend[index],
-              data: item,
-              barWidth: '12',
-              itemStyle: {
-                normal: {
-                  barBorderRadius: [30, 30, 0, 0],
-                  color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                      offset: 0,
-                      color: colorArr[index].start
-                    },
-                      {
-                        offset: 0.5,
-                        color: colorArr[index].start
-                      },
-                      {
-                        offset: 1,
-                        color: colorArr[index].start
-                      }
-                    ],
-                    globalCoord: false
-                  }
-                }
-              }
-            }
-            seriesData.push(obj1)
-          } else {
-            var obj3 = {
-              data: item,
-              type: 'line',
-              smooth: true,
-              name: legend[index],
-              symbol: 'circle',
-              symbolSize: 8,
-                itemStyle:{
-                        normal:{
-                            color:'orange',
-                            borderColor:'orange',
-                        }
-                },
-              lineStyle: {
-                color: colorArr[index].color,
-                width: 1,
-                shadowColor: '#e5925e', //设置折线阴影
-                shadowBlur: 15,
-                shadowOffsetY: 20,
-              }
-            }
-            seriesData.push(obj3)
-          }
-        })
-        console.log(seriesData)
-        // 更改柱状图位置
-        let option = {
-          title: {
-            text:'近7天热线情况',
-
-            x: '12%',
-            y: '15',
-            backgroundColor: '#002c45', //标题背景颜色，默认'rgba(0,0,0,0)'透明
-            borderColor: '#01fee8', //标题边框颜色,默认'#ccc'
-            borderWidth: 1, //标题边框线宽，单位px，默认为0（无边框）
-            padding:5,
-            textStyle: {
-              fontSize: 12,
-              fontWeight: 'normal',
-              fontFamily: 'pFBold',
-              lineHeight: 20,
-              color: '#24d4d4',
-              align: 'center'
-            }
-          },
-          backgroundColor: '#ffffff00',
-          grid: {
-            left: '2%',
-            top: '20%',
-            right: '10%',
-            bottom: '2%',
-            containLabel: true
-          },
-          legend: {
-            show: true,
-            icon: 'rect',
-            itemWidth: 15,
-            itemHeight: 10,
-            top: '5%',
-            right:'10%',
-            textStyle: {
-              color: '#fff'
-            },
-            data: legend
-          },
-          tooltip: {
-            position: function (pos, params, dom, rect, size) {
-              let yPos = '20%'
-              let xPos = 0
-              if (pos[0] < size.viewSize[0] / 2) {
-                xPos = pos[0] + 10
-              } else {
-                xPos = pos[0] - dom.offsetWidth - 10
-              }
-              return [xPos, yPos]
-            },
-            trigger: 'axis',
-           extraCssText: 'width:auto;height:50%;border:1px solid #015999;background:#032f53 ',
-            formatter: function (params) {
-              var str = ''
-              for (var i = 0; i < params.length; i++) {
-                if (params[i].seriesName !== '') {
-                  str += `<span>${params[i].seriesName}：</span><span style="color:gold">${params[i].value}</span> <br />`
-                }
-              }
-              return str
-            }
-          },
-          xAxis: [{
-            name: '近7天',
-            type: 'category',
-            nameTextStyle: {
-              color: '#95bad7',
-              fontSize: 12
-            },
-            data: xData,
-            interval: 0,
-            axisPointer: {
-              type: 'shadow'
-            },
-            axisLabel: {
-              textStyle: {
-                color: '#95bad7',
-                fontSize: 12
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#95bad7',
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            }
-          }],
-           yAxis: [{
-            type: 'value',
-             nameTextStyle: {
-               color: '#95bad7',
-               fontSize: 12
-             },
-
-            splitNumber : 3,
-            // 'min': 0,
-            // 'max': 50,
-            axisLabel: {
-              formatter: '{value}',
-              textStyle: {
-                color: '#95bad7',
-                fontSize: 12
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#95bad7',
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false,
-              lineStyle: {
-                type: 'dashed',
-                color: normalColor
-              }
-            }
-          }],
-          series: seriesData
-        }
-        console.log(option)
-        let barchart = this.$echarts.init(document.getElementById('barchart-line'))
-        console.log(option)
-        barchart.setOption(option)
-        var index = 0
-        // var mTime = setInterval(function () {
-        //   barchart.dispatchAction({
-        //     type: 'showTip',
-        //     seriesIndex: 0,
-        //     dataIndex: index
-        //   })
-        //   index++
-        //   if (index > xData.length) {
-        //     index = 0
-        //   }
-        // }, 1000)
-      }
-    },
-    ready() {
-      let http = new HttpResetClass()
-      http.load('post', '/rs/sql/getCallSumByDay', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-       this.yData1 = res.data.map((item)=>item.sum1)
-       console.log(this.yData1)
-       this.yData1 =[]
-       this.yData2=[]
-       this.yData3=[]
-       this.xData = []
-         for(let i=0;i<res.data.length;i++){
-          this.xData.push(res.data[i].time)
-          this.yData1.push(res.data[i].sum1)
-          this.yData2.push(res.data[i].sum2)
-          this.yData3.push(res.data[i].sum3)
-         }
-        this.init()
-
-      })
-
-    },
-    props: {}
-  }
-</script>
-<style scoped>
-  /*div{*/
-  /*height: auto;*/
-  /*}*/
-</style>

package/src/components/daping/CallCenter.vue

@@ -1,366 +0,0 @@
-<template>
-  <div class="flex" style="width: 100%;height: 100%">
-    <div style="height:49%;margin-top: 2%;" 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:49%;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 = ret.data
-        // 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>
-