manage-client 3.1.23 → 3.1.27

package/src/components/daping/Ring.vue

@@ -1,217 +1,212 @@
-<template>
-<div style="width: 100%;height: 100%">
-  <div id='ring' style="width: 100%;height: 80%">
-  </div>
-  <div  style="width: 100%;height: 20%;padding-left: 5vw">
-      <a><span :class="[param?'class1':'class2']"  @click="getChargeCount">年交易笔数比例</span></a><a>
-       <span :class="[param?'class2':'class1']"   @click="getChargeMoney">年消费金额比例</span></a>
-
-  </div>
-</div>
-
-</template>
-
-<script>
-  import {HttpResetClass} from 'vue-client'
-  export default {
-    title: '收费',
-    data () {
-      return {
-        param: true,
-        rows: [
-          {
-            name: '滨河营业厅',
-            value: 0
-          }, {
-            name: '乌达营业厅',
-            value: 0
-          },  {
-            name: '海南营业厅',
-            value: 0
-          }],
-        come: ['滨河营业厅', '乌达营业厅', '海南营业厅']
-      }
-    },
-  watch:{
-   'param'(val){
-     this.getData()
-   }
-  },
-    methods: {
-      getData(){
-     let url = this.param  ? 'rs/sql/getSellSumByAmount' : 'rs/sql/getSellSumByBank'
-     let http = new HttpResetClass()
-      http.load('post', url, {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-       this.rows = res.data
-        this.init()
-      })
-
-      },
-      getChargeCount(){
-        console.log(1111)
-        this.param = true
-
-      },
-     getChargeMoney(){
-         console.log(123)
-        this.param = false
-      },
-      init () {
-        var colorarr = ['#897BD3', '#F27C79', '#42A8EF', '#6FD9D0', '#EF9861', '#F76F01']
-        var option = {
-          backgroundColor: '#ffffff00',
-          animation: true,
-          title: {
-            x: 'center',
-            y: 'center',
-            textStyle: {
-              color: '#fff',
-              fontSize: 60,
-              fontWeight: 'normal',
-              align: 'center',
-              width: '200px'
-            },
-            subtextStyle: {
-              color: '#fff',
-              fontSize: 20,
-              fontWeight: 'normal',
-              align: 'center'
-            }
-          },
-          legend: {
-            width: '20%',
-            textStyle: {
-              color: '#fff',
-              fontSize: 12
-            },
-            itemWidth: 10,
-            itemHeight: 10,
-            orient: 'horizontal',
-            icon: 'circle',
-            bottom: '10%',
-            right: '5%',
-            padding: [8, 8],
-            itemGap: 10,
-            data: this.come
-          },
-          series: [{
-            type: 'pie',
-            center: ['40%', '50%'],
-            radius: ['30%', '45%'],
-            color: colorarr,
-            startAngle: 135,
-            labelLine: {
-              normal: {
-                length: 20
-              }
-            },
-            label: {
-              show: true,
-              formatter: '{b|{b}}{per|{d}%}',
-              rich: {
-                a: {
-                  color: '#999',
-                  lineHeight: 16,
-                  align: 'center'
-                },
-                hr: {
-                  borderColor: '#aaa',
-                  width: '100%',
-                  borderWidth: 1,
-                  height: 0
-                },
-                b: {
-                  fontSize: 10,
-                  padding: [5, 0],
-                  color: '#fff'
-                },
-                c: {
-                  fontSize: 10,
-                  color: '#eee'
-                },
-                per: {
-                  color: '#FDF44E',
-                  fontSize: 10,
-                  borderRadius: 2
-                }
-              },
-              position: 'outside'
-            },
-            data: this.rows
-          }]
-        }
-        let barchart = this.$echarts.init(document.getElementById('ring'))
-        console.log(option)
-        barchart.setOption(option)
-        let index = -1 // 高亮所在下标
-        let dataLength = colorarr.length   // 当前饼图有多少个扇形
-        // 用定时器控制饼图高亮
-        // this.mTime = setInterval(() => {
-        //   // 清除之前的高亮
-        //   barchart.dispatchAction({
-        //     type: 'downplay',
-        //     seriesIndex: 0,
-        //     dataIndex: index
-        //   })
-        //   index = (index + 1) % dataLength
-        //   // 当前下标高亮
-        //   barchart.dispatchAction({
-        //     type: 'highlight',
-        //     seriesIndex: 0,
-        //     dataIndex: index
-        //   })
-        //   if (index > dataLength) {
-        //     index = 0
-        //   }
-        // }, 1000)
-        // 鼠标划入
-
-      }
-    },
-    ready () {
-      this.getData()
-    },
-    props: {}
-  }
-</script>
-<style scoped>
-  @media screen and (max-width: 1920px) {
-    .class1 {
-      background: #012c45;
-      color: #01c5ba;
-      border: 1px solid #01c5ba;
-      cursor: pointer;
-      font-size: 14px;
-      padding: 0 10px;
-    }
-
-    .class2 {
-      background: #011332;
-      color: #426164;
-      border: 1px solid #013544;
-      cursor: pointer;
-      font-size: 14px;
-      padding: 0 10px;
-    }
-  }
-  @media screen and (max-width: 1440px) {
-    .class1 {
-      background: #012c45;
-      color: #01c5ba;
-      border: 1px solid #01c5ba;
-      cursor: pointer;
-      font-size: 12px;
-      padding: 0 10px;
-    }
-
-    .class2 {
-      background: #011332;
-      color: #426164;
-      border: 1px solid #013544;
-      cursor: pointer;
-      font-size: 12px;
-      padding: 0 10px;
-    }
-  }
-</style>
-
+<template>
+<div style="width: 100%;height: 100%">
+  <div id='ring' style="width: 100%;height: 80%">
+  </div>
+  <div  style="width: 100%;height: 20%;padding-left: 5vw">
+      <a>
+        <span :class="[param?'class1':'class2']"  @click="getChargeCount">年交易笔数比例</span>
+      </a>
+      <a>
+       <span :class="[param?'class2':'class1']"   @click="getChargeMoney">年消费金额比例</span>
+      </a>
+
+  </div>
+</div>
+
+</template>
+
+<script>
+  import {HttpResetClass} from 'vue-client'
+  export default {
+    title: '收费',
+    data () {
+      return {
+        param: true,
+        rows: [],
+        come: []
+      }
+    },
+  watch:{
+   'param'(val){
+     this.getData()
+   }
+  },
+    methods: {
+      getData(){
+     let url = this.param  ? 'rs/sql/getSellSumByAmount' : 'rs/sql/getSellSumByBank'
+     let http = new HttpResetClass()
+      http.load('post', url, {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+       this.rows = res.data
+        this.come = Array.from(new Set(res.data.map(x => x.name)))
+        this.init()
+      })
+
+      },
+      getChargeCount(){
+        console.log(1111)
+        this.param = true
+
+      },
+     getChargeMoney(){
+         console.log(123)
+        this.param = false
+      },
+      init () {
+        var colorarr = ['#897BD3', '#F27C79', '#42A8EF', '#6FD9D0', '#EF9861', '#F76F01']
+        var option = {
+          backgroundColor: '#ffffff00',
+          animation: true,
+          title: {
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              color: '#fff',
+              fontSize: 60,
+              fontWeight: 'normal',
+              align: 'center',
+              width: '200px'
+            },
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 20,
+              fontWeight: 'normal',
+              align: 'center'
+            }
+          },
+          legend: {
+            width: '20%',
+            textStyle: {
+              color: '#fff',
+              fontSize: 12
+            },
+            itemWidth: 10,
+            itemHeight: 10,
+            orient: 'horizontal',
+            icon: 'circle',
+            bottom: '10%',
+            right: '5%',
+            padding: [8, 8],
+            itemGap: 10,
+            data: this.come
+          },
+          series: [{
+            type: 'pie',
+            center: ['40%', '50%'],
+            radius: ['30%', '45%'],
+            color: colorarr,
+            startAngle: 135,
+            labelLine: {
+              normal: {
+                length: 20
+              }
+            },
+            label: {
+              show: true,
+              formatter: '{b|{b}}{per|{d}%}',
+              rich: {
+                a: {
+                  color: '#999',
+                  lineHeight: 16,
+                  align: 'center'
+                },
+                hr: {
+                  borderColor: '#aaa',
+                  width: '100%',
+                  borderWidth: 1,
+                  height: 0
+                },
+                b: {
+                  fontSize: 10,
+                  padding: [5, 0],
+                  color: '#fff'
+                },
+                c: {
+                  fontSize: 10,
+                  color: '#eee'
+                },
+                per: {
+                  color: '#FDF44E',
+                  fontSize: 10,
+                  borderRadius: 2
+                }
+              },
+              position: 'outside'
+            },
+            data: this.rows
+          }]
+        }
+        let barchart = this.$echarts.init(document.getElementById('ring'))
+        console.log(option)
+        barchart.setOption(option)
+        let index = -1 // 高亮所在下标
+        let dataLength = colorarr.length   // 当前饼图有多少个扇形
+        // 用定时器控制饼图高亮
+        // this.mTime = setInterval(() => {
+        //   // 清除之前的高亮
+        //   barchart.dispatchAction({
+        //     type: 'downplay',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   index = (index + 1) % dataLength
+        //   // 当前下标高亮
+        //   barchart.dispatchAction({
+        //     type: 'highlight',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   if (index > dataLength) {
+        //     index = 0
+        //   }
+        // }, 1000)
+        // 鼠标划入
+
+      }
+    },
+    ready () {
+      this.getData()
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  @media screen and (max-width: 1920px) {
+    .class1 {
+      background: #012c45;
+      color: #01c5ba;
+      border: 1px solid #01c5ba;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0 10px;
+    }
+
+    .class2 {
+      background: #011332;
+      color: #426164;
+      border: 1px solid #013544;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0 10px;
+    }
+  }
+  @media screen and (max-width: 1440px) {
+    .class1 {
+      background: #012c45;
+      color: #01c5ba;
+      border: 1px solid #01c5ba;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 0 10px;
+    }
+
+    .class2 {
+      background: #011332;
+      color: #426164;
+      border: 1px solid #013544;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 0 10px;
+    }
+  }
+</style>
+