manage-client 3.2.35 → 3.2.36

package/src/components/statistical/DendrogramManage.vue

@@ -1,204 +1,239 @@
-<template>
-  <div>
-    <div class="text-1">
-      <div id="charts"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {HttpResetClass} from "vue-client";
-
-export default {
-  title: "用户分布",
-  data() {
-    return {
-      model : {},
-      company:"",
-      fencompany:"",
-      usertype:"",
-      metertype:"",
-      userstreet: "",
-      residential:"",
-      userinfo:"",
-      slicearea:""
-    }
-  },
-  methods: {
-    setBar() {
-      console.log('进入画图~~~~~~~~~~~~~~~~~~~')
-      console.log(this.model)
-      this.xc = this.$echarts.init(document.getElementById('charts'))
-      this.xc.setOption({
-        tooltip: {
-          trigger: 'item',
-          triggerOn: 'mousemove'
-        },
-        legend: {
-          top: '2%',
-          left: '3%',
-          orient: 'vertical',
-          data: [{
-            name: 'tree1',
-            icon: 'rectangle'
-          }],
-          borderColor: '#c23531'
-        },
-        series:[
-          {
-            type: 'tree',
-
-            name: 'tree1',
-
-            data: [this.model],
-
-            top: '5%',
-            left: '7%',
-            bottom: '2%',
-            right: '20%',
-
-            symbolSize: 7,
-
-            label: {
-              position: 'left',
-              verticalAlign: 'middle',
-              align: 'right'
-            },
-
-            leaves: {
-              label: {
-                position: 'right',
-                verticalAlign: 'middle',
-                align: 'left'
-              }
-            },
-
-            emphasis: {
-              focus: 'descendant'
-            },
-
-            expandAndCollapse: true,
-
-            animationDuration: 550,
-            animationDurationUpdate: 750
-
-          },
-        ]
-      })
-    },
-    async getcompany() {
-      let HttpReset = new HttpResetClass()
-      //获取表具总数
-      let getcompany = await HttpReset.load('post','rs/sql/getCompany',{data:{}})
-      this.company=getcompany.data
-    },
-    async getfencompany(){
-      let HttpReset = new HttpResetClass()
-      //获取分公司总表具数
-      let getfencompany =await HttpReset.load('post','rs/sql/getFencompany',{data:{}})
-      this.fencompany=getfencompany.data
-    },
-    async getslicearea(){
-      let HttpReset = new HttpResetClass()
-      //获取分公司大区总表具数
-      let getslicearea =await HttpReset.load('post','rs/sql/getSlicearea',{data:{}})
-      this.slicearea=getslicearea.data
-    },
-    async getusertype(){
-      let HttpReset = new HttpResetClass()
-      //获取分公司大区民用和非民用总表具数
-      let getusertype =await HttpReset.load('post','rs/sql/getUsertype',{data:{}})
-      this.usertype=getusertype.data
-    },
-    async getmetertype() {
-      let HttpReset = new HttpResetClass()
-      //获取分公司民用和非民用各自表品牌总表具数
-      let getmetertype = await HttpReset.load('post', 'rs/sql/getMetertype', {data: {}})
-      this.metertype=getmetertype.data
-    },
-
-    dataGeneration () {
-      let model = {
-        name: '渭南天然气公司' + `\n (${this.company[0].sumnum})`,
-        value: this.company[0].sumnum,
-        children: []
-      }
-      for (let row1 of this.fencompany) {
-        let obj1 = {
-          name: row1.name + `\n (${row1.num})`,
-          value: row1.num,
-          children: []
-        }
-        const filter1 = this.conditionGenerate(this.slicearea, 'name', row1.name)
-        for (let row2 of filter1) {
-          let obj2 = {
-            name: row2.f_slice_area + `\n (${row2.num})`,
-            value: row2.num,
-            children: []
-          }
-          obj1.children.push(obj2)
-          const filter2 = this.conditionGenerate(this.usertype, ['name', 'f_slice_area'], [row1.name, row2.f_slice_area])
-          for (let row3 of filter2) {
-            let obj3 = {
-              name: row3.f_user_type + `(${row3.num})`,
-              value: row3.num,
-              children: []
-            }
-            obj2.children.push(obj3)
-          const filter3 = this.conditionGenerate(this.metertype, ['name', 'f_slice_area','f_user_type'], [row1.name, row2.f_slice_area,row3.f_user_type])
-          for (let row4 of filter3) {
-            let odj4 = {
-              name: row4.f_meter_brand + `(${row4.num})`,
-              value: row4.num,
-              children: []
-            }
-            obj3.children.push(odj4)
-            }
-          }
-        }
-        model.children.push(obj1)
-      }
-      this.model = model
-    },
-    /**
-     * 数组筛选
-     * @param data 要筛选的数组
-     * @param key 筛选的key,可以是数组
-     * @param value 筛选key对应的value值,可以是数组
-     * @returns {Array}
-     */
-    conditionGenerate (data, key, value) {
-      const group = []
-      for (let row of data) {
-        if (key instanceof Array) {
-          let flag = true
-          for (let [index, item] of key.entries()) {
-            if (row[item] != value[index]) {
-              flag = false
-            }
-          }
-          if (flag) group.push(row)
-        } else {
-          if (row[key] == value) {
-            group.push(row)
-          }
-        }
-      }
-      return group
-    }
-  },
-  async ready(){
-    await this.getcompany() //总公司
-    await this.getfencompany() //分公司
-    await this.getslicearea()  //大区
-    await this.getusertype()   //用户类型
-    await this.getmetertype()  //表型
-    this.dataGeneration()
-    this.setBar()
-  },
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <div>
+    <div class="text-1">
+      <div id="charts"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {HttpResetClass} from "vue-client";
+
+export default {
+  title: "用户分布",
+  data() {
+    return {
+      model : {},
+      company:"",
+      fencompany:"",
+      usertype:"",
+      metertype:"",
+      userstreet: "",
+      residential:"",
+      userinfo:"",
+      slicearea:"",
+      meterTypeArea:"",
+      meterTypeUser:""
+    }
+  },
+  methods: {
+    setBar() {
+      console.log('进入画图~~~~~~~~~~~~~~~~~~~')
+      console.log(this.model)
+      this.xc = this.$echarts.init(document.getElementById('charts'))
+      this.xc.setOption({
+        tooltip: {
+          trigger: 'item',
+          triggerOn: 'mousemove'
+        },
+        legend: {
+          top: '2%',
+          left: '3%',
+          orient: 'vertical',
+          data: [{
+            name: 'tree1',
+            icon: 'rectangle'
+          }],
+          borderColor: '#c23531'
+        },
+        series:[
+          {
+            type: 'tree',
+
+            name: 'tree1',
+
+            data: [this.model],
+
+            top: '5%',
+            left: '7%',
+            bottom: '2%',
+            right: '20%',
+
+            symbolSize: 7,
+
+            label: {
+              position: 'left',
+              verticalAlign: 'middle',
+              align: 'right'
+            },
+
+            leaves: {
+              label: {
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left'
+              }
+            },
+
+            emphasis: {
+              focus: 'descendant'
+            },
+
+            expandAndCollapse: true,
+
+            animationDuration: 550,
+            animationDurationUpdate: 750
+
+          },
+        ]
+      })
+    },
+    async getcompany() {
+      let HttpReset = new HttpResetClass()
+      //获取表具总数
+      let getcompany = await HttpReset.load('post','rs/sql/getCompany',{data:{}})
+      this.company=getcompany.data
+    },
+    async getfencompany(){
+      let HttpReset = new HttpResetClass()
+      //获取分公司总表具数
+      let getfencompany =await HttpReset.load('post','rs/sql/getFencompany',{data:{}})
+      this.fencompany=getfencompany.data
+    },
+    async getslicearea(){
+      let HttpReset = new HttpResetClass()
+      //获取分公司大区总表具数
+      let getslicearea =await HttpReset.load('post','rs/sql/getSlicearea',{data:{}})
+      this.slicearea=getslicearea.data
+    },
+    async getusertype(){
+      let HttpReset = new HttpResetClass()
+      //获取分公司大区民用和非民用总表具数
+      let getusertype =await HttpReset.load('post','rs/sql/getUsertype',{data:{}})
+      this.usertype=getusertype.data
+    },
+    async getmetertype() {
+      let HttpReset = new HttpResetClass()
+      //获取分公司民用和非民用各自表品牌总表具数
+      let getmetertype = await HttpReset.load('post', 'rs/sql/getMetertype', {data: {}})
+      this.metertype=getmetertype.data
+    },
+    async getmetertypeArea() {
+      let HttpReset = new HttpResetClass()
+
+      let meterTypeArea = await HttpReset.load('post', 'rs/sql/getMeterTypeArea', {data: {}})
+      this.meterTypeArea=meterTypeArea.data
+    },
+    async getmetertypeUser() {
+      let HttpReset = new HttpResetClass()
+
+      let meterTypeUser = await HttpReset.load('post', 'rs/sql/getMeterTypeUser', {data: {}})
+      this.meterTypeUser=meterTypeUser.data
+    },
+
+    dataGeneration () {
+      let model = {
+        name: '渭南天然气公司' + `\n (${this.company[0].sumnum})`,
+        value: this.company[0].sumnum,
+        children: []
+      }
+      for (let row1 of this.fencompany) {
+        let obj1 = {
+          name: row1.name + `\n (${row1.num})`,
+          value: row1.num,
+          children: []
+        }
+        const filter1 = this.conditionGenerate(this.slicearea, 'name', row1.name)
+        for (let row2 of filter1) {
+          let obj2 = {
+            name: row2.f_slice_area + `\n (${row2.num})`,
+            value: row2.num,
+            children: []
+          }
+          obj1.children.push(obj2)
+          const filter2 = this.conditionGenerate(this.usertype, ['name', 'f_slice_area'], [row1.name, row2.f_slice_area])
+          for (let row3 of filter2) {
+            let obj3 = {
+              name: row3.f_user_type + `(${row3.num})`,
+              value: row3.num,
+              children: []
+            }
+            obj2.children.push(obj3)
+          const filter3 = this.conditionGenerate(this.metertype, ['name', 'f_slice_area','f_user_type'], [row1.name, row2.f_slice_area,row3.f_user_type])
+          for (let row4 of filter3) {
+            let odj4 = {
+              name: row4.f_meter_brand + `(${row4.num})`,
+              value: row4.num,
+              children: []
+            }
+            obj3.children.push(odj4)
+            const filter4 = this.conditionGenerate(this.meterTypeArea, ['name', 'f_slice_area','f_user_type'], [row1.name, row2.f_slice_area,row3.f_user_type,row4.f_meter_brand])
+            for (let row5 of filter4) {
+              let obj5 = {
+                name: row5.f_residential_area + `(${row5.num})`,
+                value: row5.num,
+                children: []
+              }
+              odj4.children.push(obj5)
+              // const filter5 = this.conditionGenerate(this.meterTypeUser, ['name', 'f_slice_area','f_user_type'], [row1.name, row2.f_slice_area,row3.f_user_type,row4.f_meter_brand,row5.f_residential_area])
+              // console.log()
+              // for (let row6 of filter5) {
+              //   let obj6 = {
+              //     name: row6.f_user_name + `(${row6.num})`,
+              //     value: row6.num,
+              //     children: []
+              //   }
+              //   obj5.children.push(obj6)
+              // }
+            }
+          }
+        }
+        }
+        model.children.push(obj1)
+      }
+      this.model = model
+    },
+    /**
+     * 数组筛选
+     * @param data 要筛选的数组
+     * @param key 筛选的key,可以是数组
+     * @param value 筛选key对应的value值,可以是数组
+     * @returns {Array}
+     */
+    conditionGenerate (data, key, value) {
+      const group = []
+      for (let row of data) {
+        if (key instanceof Array) {
+          let flag = true
+          for (let [index, item] of key.entries()) {
+            if (row[item] != value[index]) {
+              flag = false
+            }
+          }
+          if (flag) group.push(row)
+        } else {
+          if (row[key] == value) {
+            group.push(row)
+          }
+        }
+      }
+      return group
+    }
+  },
+  async ready(){
+    await this.getcompany() //总公司
+    await this.getfencompany() //分公司
+    await this.getslicearea()  //大区
+    await this.getusertype()   //用户类型
+    await this.getmetertype()  //表型
+    await this.getmetertypeArea()
+    // await this.getmetertypeUser()
+    this.dataGeneration()
+    this.setBar()
+  },
+}
+</script>
+
+<style scoped>
+
+</style>