fix property chart

VUECODE/smart-property-manage/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "add": "^2.0.6",
     "axios": "0.18.0",
+    "dayjs": "^1.8.14",
     "element-ui": "2.4.6",
     "file-saver": "^2.0.0-rc.4",
     "html2canvas": "^1.0.0-rc.1",

VUECODE/smart-property-manage/src/components/chart/barChart.vue

@@ -0,0 +1,108 @@
+<template>
+  <div :id="id"/>
+</template>
+
+<script>
+import G2 from "@antv/g2";
+
+export default {
+  name: 'BarChart',
+  props: [
+    'id',
+    'title',
+    'data',
+    'axisX',
+    'axisY'
+  ],
+  data () {
+    return {
+      chart: undefined,
+    }
+  },
+  mounted() {
+    this.rander();
+  },
+  watch: {
+    data() {
+      window.console.log(this.id, this.data)
+      this.rander()
+    }
+  },
+  methods: {
+    rander() {
+      const _self = this
+
+      if (this.chart) {
+        this.chart.clear();
+      } else {
+        this.chart = new G2.Chart({
+          container: _self.id,
+          forceFit: true,
+          height: 282,
+        padding: [80, 20, 30, 40]
+        });
+      }
+
+      const chart = this.chart;
+      chart.source(_self.data);
+
+
+      chart.axis("value", {
+        line: {
+          lineWidth: 1, // 设置线的宽度
+          stroke: "#a4b6c5" // 设置线的颜色
+        },
+        grid: null,
+        label: {
+          textStyle: {
+            textAlign: "end", // 文本对齐方向，可取值为： start middle end
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12", // 文本大小
+            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
+          }
+        }
+      });
+      chart.axis("item", {
+        line: {
+          lineWidth: 1, // 设置线的宽度
+          stroke: "#a4b6c5" // 设置线的颜色
+        },
+        grid: null,
+        label: {
+          textStyle: {
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12" // 文本大小
+          }
+        }
+      });
+      chart.tooltip({
+        crosshairs: true
+      });
+
+      chart.guide().html({
+        position: ["5%", "-35%"],
+        html: `<div class="line-chat"><p class="title">${_self.title}</p></div>`
+      });
+      chart.guide().html({
+        position: ["1%", "-22%"],
+        html: `<div class="line-chat"><p class="title">${_self.axisY}</p></div>`
+      });
+      chart.guide().html({
+        position: ["102%", "100%"],
+        html: `<div class="line-chat"><p class="title">${_self.axisX}</p></div>`
+      });
+
+      chart.render();
+    }
+  }
+};
+</script>
+<style lang="scss">
+.chart7-title {
+  .title {
+    font-size: 13px;
+    color: #a4b6c5;
+  }
+}
+</style>
+

VUECODE/smart-property-manage/src/components/chart/chart1.vue

@@ -5,82 +5,95 @@
 <script>
 import G2 from '@antv/g2'
 import DataSet from '@antv/data-set'
-import $ from 'jquery'
 
-export default {
+export default {  
+  props: [
+    'data',  // [ { item: '实例1', count: 210, percent: 0.21 } ]
+  ],
+  computed: {
+    total () {
+      return (this.data || []).reduce((acc, it) => (acc + it.count), 0) || 0
+    }
+  },
+  watch: {
+    data () {
+      this.rander()
+    }
+  },
   mounted() {
     this.rander()
   },
   methods: {
     rander() {
-      var data = [{
-        type: '未解决',
-        percent: 0.3
-      }, {
-        type: '已解决',
-        percent: 0.7
-      }]
-      var sum = 200
-      var ds = new DataSet()
-      var dv = ds.createView().source(data)
-      dv.transform({
-        type: 'map',
-        callback: function callback(row) {
-          row.value = parseInt(sum * row.percent)
-          return row
+      const _self = this
+      
+      if (this.chart) {
+        this.chart.clear();
+      } else {
+        this.chart = new G2.Chart({
+          container: 'node1',
+          forceFit: true,
+          height: 282,
+          animate: false,
+          padding: [40, 'auto', 'auto', 'auto']
+        });
+      }
+
+      var chart = this.chart
+
+      chart.source(_self.data, {
+        percent: {
+          formatter: function formatter(val) {
+            val = val * 100 + '%';
+            return val;
+          }
         }
-      })
-      var chart = new G2.Chart({
-        container: 'node1',
-        forceFit: true,
-        height: 282,
-        // height: window.innerHeight / 3 - 50,
-        padding: [30, 'auto', 'auto', 'auto']
-      })
-      chart.source(dv)
-      chart.tooltip(false)
-      // chart.legend({
-      //   position: 'right-center',
-      //   offsetX: -100
-      // })
+      });
+
       chart.coord('theta', {
         radius: 0.75,
         innerRadius: 0.6
-      })
-      chart.intervalStack().position('percent').color('type', ['#53F9FF', '#1A1E22']).opacity(1).label('percent', {
-        offset: -18,
-        textStyle: {
-          fill: 'white',
-          fontSize: 12,
-          shadowBlur: 2,
-          shadowColor: 'rgba(0, 0, 0, .45)'
-        },
-        rotate: 0,
-        autoRotate: false,
-        formatter: function formatter(text, item) {
-          return String(parseInt(item.point.percent * 100)) + '%'
-        }
-      })
+      });
+
+      chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      });
+
+      chart.legend(false);
+
       chart.guide().html({
-        position: ['50%', '50%'],
-        html: '<div class="g2-guide-html"><p class="title">总计</p><p class="value">200</p></div>'
+        position: ['50%', '-15%'],
+        html: '<div class="chart2-title"><p class="title">历史工单</p></div>'
       })
+
+      // 辅助文本
       chart.guide().html({
-        position: ['50%', '-10%'],
-        html: '<div class="g2-guide-title"><p class="title">昨日工单解决情况200单</p></div>'
-      })
-      chart.on('interval:mouseenter', function(ev) {
-        var data = ev.data._origin
-        $('.g2-guide-html').css('opacity', 1)
-        $('.g2-guide-html .title').text(data.type)
-        $('.g2-guide-html .value').text(data.value)
-      })
+        position: ['50%', '50%'],
+        html: `<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">总计<br><span style="color:#8c8c8c;font-size:20px">${_self.total}</span>单</div>`,
+        alignX: 'middle',
+        alignY: 'middle'
+      });
 
-      chart.on('interval:mouseleave', function() {
-        $('.g2-guide-html .title').text('总计')
-        $('.g2-guide-html .value').text(200)
-      })
-      chart.render()
+      var interval = chart.intervalStack().position('percent').color('item').label('percent', {
+        formatter: function formatter(val, item) {
+          return item.point.item + ': ' + val;
+        },
+        textStyle: {
+          fill: '#a4b6c5', // 文本的颜色
+          fontSize: '12' // 文本大小
+        }
+      }).tooltip('item*percent', function(item, percent) {
+        // percent = percent * 100 + '%';
+        window.console.log('------>', _self.data, item)
+        return {
+          name: item,
+          value: _self.data.filter(({ item: it }) => (it == item))[0].count,
+        };
+      });
+
+      chart.render();
+      // interval.setSelected(this.data[0]);
     }
   }
 }

VUECODE/smart-property-manage/src/components/chart/chart2.vue

@@ -1,40 +1,35 @@
 <template>
-  <div id="node2"/>
+  <div id="node2" />
 </template>
 
 <script>
 import G2 from '@antv/g2'
 
 export default {
+  props: [
+    'data',
+  ],
   mounted() {
     this.rander()
   },
+  watch: {
+    data() {
+      this.rander()
+    }
+  },
   methods: {
     rander() {
-      var data = [{
-        item: '报修单一',
-        count: 40,
-        percent: 0.4
-      }, {
-        item: '报修单二',
-        count: 21,
-        percent: 0.21
-      }, {
-        item: '报修单三',
-        count: 17,
-        percent: 0.17
-      }, {
-        item: '报修单四',
-        count: 13,
-        percent: 0.13
-      }]
+
+      const _self = this
+
       var chart = new G2.Chart({
         container: 'node2',
         forceFit: true,
         height: 282,
         padding: [40, 'auto', 'auto', 'auto']
       })
-      chart.source(data, {
+
+      chart.source(this.data, {
         percent: {
           formatter: function formatter(val) {
             val = val * 100 + '%'
@@ -42,28 +37,24 @@ export default {
           }
         }
       })
+
       chart.coord('theta', {
         radius: 0.75
       })
+
       chart.guide().html({
         position: ['50%', '-15%'],
         html: '<div class="chart2-title"><p class="title">今日新增工单</p></div>'
       })
+
       chart.tooltip({
         showTitle: false,
         itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
       })
-      chart.intervalStack().position('percent').color('item', function(val) {
-        if (val === '报修单一') {
-          return '#53F9FF'
-        } else if (val === '报修单二') {
-          return '#83BB41'
-        } else if (val === '报修单三') {
-          return '#FFC400'
-        } else if (val === '报修单四') {
-          return '#454D54'
-        }
-      }).label('percent', {
+      
+      chart.legend(false);
+
+      chart.intervalStack().position('percent').color('item').label('percent', {
         formatter: function formatter(val, item) {
           return item._origin.item + ': ' + val
         },
@@ -72,15 +63,13 @@ export default {
           fontSize: '12' // 文本大小
         }
       }).tooltip('item*percent', function(item, percent) {
-        percent = percent * 100 + '%'
+        // percent = percent * 100 + '%'
         return {
           name: item,
-          value: percent
+          value: _self.data.filter(({ item: it }) => (it == item))[0].count,
         }
-      }).style({
-        lineWidth: 1,
-        stroke: '#fff'
       })
+
       chart.render()
     }
   }

VUECODE/smart-property-manage/src/components/chart/chart4.vue

@@ -7,32 +7,32 @@ import G2 from "@antv/g2";
 import DataSet from "@antv/data-set";
 
 export default {
+  props: [
+    'data',
+  ],
+  data () {
+    return {}
+  },
   mounted() {
     this.rander();
     console.log(this.invoicelist,"chart4")
   },
- props:['invoicelist'],
+  watch: {
+    data() {
+      this.rander()
+    }
+  },
   methods: {
     rander() {
-      var data = this.invoicelist;
-      var dv = new DataSet.View().source(data);
       var chart = new G2.Chart({
         container: "node4",
         forceFit: true,
         height: 282,
         padding: [80, 40, 30, 50]
       });
-      chart.source(dv, {
-        priceTotal: {
-          formatter: function formatter(val) {
-            return val;
-          }
-        },
-        createDate: {
-        }
-      });
+      chart.source(this.data);
 
-      chart.axis("priceTotal", {
+      chart.axis("value", {
         line: {
           lineWidth: 1, // 设置线的宽度
           stroke: "#a4b6c5" // 设置线的颜色
@@ -47,7 +47,7 @@ export default {
           }
         }
       });
-      chart.axis("createDate", {
+      chart.axis("day", {
         line: {
           lineWidth: 1, // 设置线的宽度
           stroke: "#a4b6c5" // 设置线的颜色
@@ -66,7 +66,7 @@ export default {
 
       chart
         .line()
-        .position("createDate*priceTotal")
+        .position("day*value")
         .color("priceTotal", function(val) {
           return "#83BB41";
         })
@@ -74,13 +74,12 @@ export default {
         .shape("smooth");
       chart
         .point()
-        .position("createDate*priceTotal")
+        .position("day*value")
         .size(3)
         .shape("circle")
-        .label(
-          "createDate*priceTotal",
-          function(createDate, priceTotal) {
-            return priceTotal;
+        .label("day*value",
+          function(day, value) {
+            return value;
           },
           {
             textStyle: {

VUECODE/smart-property-manage/src/components/chart/chart5.vue

@@ -1,72 +1,33 @@
 <template>
-  <div id="node5"/>
+  <div id="node5" />
 </template>
 
 <script>
 import G2 from "@antv/g2";
 import DataSet from "@antv/data-set";
 export default {
+  data () {
+    return {}
+  },
   mounted() {
     this.rander();
-     console.log(this.invoicelist,"chart4")
   },
-  props:['usercountList'],
+  props:['data'],
+  watch: {
+    data() {
+      this.rander();
+    }
+  },
   methods: {
     rander() {
-      var data = [
-        {
-          year: "11.17",
-          ACME: 300
-        },
-        {
-          year: "11.18",
-          ACME: 280
-        },
-        {
-          year: "11.19",
-          ACME: 320
-        },
-        {
-          year: "11.20",
-          ACME: 250
-        },
-        {
-          year: "11.21",
-          ACME: 310
-        },
-        {
-          year: "11.22",
-          ACME: 323
-        },
-        {
-          year: "11.23",
-          ACME: 350
-        }
-      ];
-      var dv = new DataSet.View().source(data);
-      dv.transform({
-        type: "fold",
-        fields: ["ACME"],
-        key: "type",
-        value: "value"
-      });
       var chart = new G2.Chart({
         container: "node5",
         forceFit: true,
         height: 282,
         padding: [80, 40, 30, 40]
       });
-      chart.source(dv, {
-        value: {
-          alias: "The Share Price in Dollars",
-          formatter: function formatter(val) {
-            return val;
-          }
-        },
-        year: {
-          // range: [0, 1]
-        }
-      });
+      chart.source(this.data);
+
       chart.axis("value", {
         line: {
           lineWidth: 1, // 设置线的宽度
@@ -82,7 +43,7 @@ export default {
           }
         }
       });
-      chart.axis("year", {
+      chart.axis("day", {
         line: {
           lineWidth: 1, // 设置线的宽度
           stroke: "#a4b6c5" // 设置线的颜色
@@ -102,7 +63,7 @@ export default {
 
       chart
         .line()
-        .position("year*value")
+        .position("day*value")
         .color("type", function(val) {
           return "#da70d6";
         })
@@ -110,12 +71,12 @@ export default {
         .shape("smooth");
       chart
         .point()
-        .position("year*value")
+        .position("day*value")
         .size(3)
         .shape("circle")
         .label(
-          "year*value",
-          function(year, value) {
+          "day*value",
+          function(day, value) {
             return value;
           },
           {

VUECODE/smart-property-manage/src/components/chart/lineChart.vue

@@ -0,0 +1,136 @@
+<template>
+  <div :id="id"/>
+</template>
+
+<script>
+import G2 from "@antv/g2";
+import DataSet from "@antv/data-set";
+
+export default {
+  name: 'LineChart',
+  props: [
+    'id',
+    'title',
+    'data',
+    'axisX',
+    'axisY'
+  ],
+  data () {
+    return {
+      chart: undefined,
+    }
+  },
+  mounted() {
+    this.rander();
+  },
+  watch: {
+    data() {
+      window.console.log(this.id, this.data)
+      this.rander()
+    }
+  },
+  methods: {
+    rander() {
+      const _self = this
+
+      if (this.chart) {
+        this.chart.clear();
+      } else {
+        this.chart = new G2.Chart({
+          container: _self.id,
+          forceFit: true,
+          height: 282,
+          padding: [80, 40, 30, 50]
+        });
+      }
+
+      const chart = this.chart;
+      chart.source(_self.data);
+
+      chart.axis("value", {
+        line: {
+          lineWidth: 1, // 设置线的宽度
+          stroke: "#a4b6c5" // 设置线的颜色
+        },
+        grid: null,
+        label: {
+          textStyle: {
+            textAlign: "end", // 文本对齐方向，可取值为： start middle end
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12", // 文本大小
+            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
+          }
+        }
+      });
+      chart.axis("item", {
+        line: {
+          lineWidth: 1, // 设置线的宽度
+          stroke: "#a4b6c5" // 设置线的颜色
+        },
+        grid: null,
+        label: {
+          textStyle: {
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12" // 文本大小
+          }
+        }
+      });
+      chart.tooltip({
+        crosshairs: true
+      });
+
+      chart
+        .line()
+        .position("item*value")
+        .color("value", () => '#83BB41')
+        .size(2)
+        .shape("smooth");
+      chart
+        .point()
+        .position("item*value")
+        .size(3)
+        .shape("circle")
+        .label("item*value",
+          function(item, value) {
+            return value;
+          },
+          {
+            textStyle: {
+              fill: "#fff",
+              fontSize: 12,
+              textAlign:'left',
+            }
+          }
+        )
+        .style({
+          fill: "#eee",
+          fontSize: 12,
+          stroke: "#83BB41",
+          lineWidth: 1
+        });
+      chart.guide().html({
+        position: ["5%", "-35%"],
+        html: `<div class="line-chat"><p class="title">${_self.title}</p></div>`
+      });
+      chart.guide().html({
+        position: ["1%", "-22%"],
+        html: `<div class="line-chat"><p class="title">${_self.axisY}</p></div>`
+      });
+      chart.guide().html({
+        position: ["102%", "100%"],
+        html: `<div class="line-chat"><p class="title">${_self.axisX}</p></div>`
+      });
+      chart.render();
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.line-chat {
+  .title {
+    font-size: 13px;
+    color: #a4b6c5;
+  }
+}
+</style>

VUECODE/smart-property-manage/src/views/index/index.vue

@@ -1,33 +1,31 @@
 <template>
   <div class="main">
     <div class="left">
-      <chart1/>
-      <chart2/>
+      <chart1 :data="data1" />
+      <chart2 :data="data2" />
       <chart3 :hardwaremap="hardwaremap"/>
     </div>
     <div class="middle">
-      <chart4 :invoicelist="invoicelist"/>
-      <chart5 :usercountlist="usercountlist"/>
-      <chart6 :temporarylist="temporarylist"/>
+      <line-chart id="chat4" :data="data4" title="收费组总缴费统计" axis-x="日期" axis-y="金额(元)" />
+      <line-chart id="chat5" :data="data5" title="月租车总缴费统计" axis-x="日期" axis-y="金额(元)" />
+      <line-chart id="chat6" :data="data6" title="临时车总缴费统计" axis-x="日期" axis-y="金额(元)" />
     </div>
     <div class="right">
       <chart7/>
-      <chart8/>
+      <line-chart id="chat8" :data="data8" title="日活跃用户" axis-x="日期" axis-y="数量(个)" />
       <chart9/>
     </div>
   </div>
 </template>
 
 <script>
+import dayjs from 'dayjs';
 import { mapState, mapActions } from "vuex";
 import chart1 from "@/components/chart/chart1.vue";
+import LineChart from "@/components/chart/lineChart.vue";
 import chart2 from "@/components/chart/chart2.vue";
 import chart3 from "@/components/chart/chart3.vue";
-import chart4 from "@/components/chart/chart4.vue";
-import chart5 from "@/components/chart/chart5.vue";
-import chart6 from "@/components/chart/chart6.vue";
 import chart7 from "@/components/chart/chart7.vue";
-import chart8 from "@/components/chart/chart8.vue";
 import chart9 from "@/components/chart/chart9.vue";
 
 export default {
@@ -43,17 +41,112 @@ export default {
     chart1,
     chart2,
     chart3,
-    chart4,
-    chart5,
-    chart6,
+    LineChart,
     chart7,
-    chart8,
     chart9
   },
   computed: {
     ...mapState("trunkIndex", {
       IndexInfo: item => item.trunkIndex.IndexInfo
-    })
+    }),
+    data1 () {
+      // 总单, 没有使用返回值
+      const { solvedTicket = 0, unsolvedTicket = 0 } = (this.IndexInfo || {}).historyMap || {}
+      const total = solvedTicket + unsolvedTicket
+
+      if (!total) return [ { item: '无数据', count: 1, percent: 1 } ]
+
+      const solvedPercent = Number(solvedTicket / total).toFixed(2) - 0
+
+      return [
+        {
+          item: '已解决',
+          count: solvedTicket,
+          percent: solvedPercent
+        },
+        {
+          item: '未解决',
+          count: unsolvedTicket,
+          percent: Number(1 - solvedPercent).toFixed(2) - 0
+        },
+      ]
+    },
+    data2 () {
+      // 总单, 没有使用返回值
+      let { todayComplaintTicket = 0, todayRepairTicket = 0, todayContactTicket = 0 } = (this.IndexInfo || {}).todayMap || {}
+      
+      if (process.env.NODE_ENV == 'development') {
+        todayComplaintTicket = 10
+        todayRepairTicket = 20
+        todayContactTicket = 30
+      }
+
+      const total = todayComplaintTicket + todayRepairTicket + todayContactTicket
+
+      if (!total) return [ { item: '无数据', count: 1, percent: 1 } ]
+
+      const p1 = Number(todayComplaintTicket / total).toFixed(2) - 0
+      const p2 = Number(todayRepairTicket / total).toFixed(2) - 0
+      const p3 = Number(1 - p1 - p2).toFixed(2) - 0
+
+      return [
+        {
+          item: '投诉',
+          count: todayComplaintTicket,
+          percent: p1
+        },
+        {
+          item: '报修',
+          count: todayRepairTicket,
+          percent: p2
+        },
+        {
+          item: '联系',
+          count: todayContactTicket,
+          percent: p3
+        },
+      ]
+    },
+    data4 () {
+      let billList = (this.IndexInfo || {}).billInvoiceCountList || []
+
+      return billList.map(({ createDate, priceTotal }) => {
+        return ({
+          item: dayjs(createDate).format('M.D'),
+          value: priceTotal,
+        })
+      })
+    },
+    data5 () {
+      let billList = (this.IndexInfo || {}).taUserLicenseCountList || []
+
+      return billList.map(({ createDate, priceTotal }) => {
+        return ({
+          item: dayjs(createDate).format('M.D'),
+          value: priceTotal,
+        })
+      })
+    },
+    data6 () {
+      let billList = (this.IndexInfo || {}).taTemporaryLicenseCountList || []
+
+      return billList.map(({ createDate, priceTotal }) => {
+        return ({
+          item: dayjs(createDate).format('M.D'),
+          value: priceTotal,
+        })
+      })
+    },
+    data8 () {
+      let billList = (this.IndexInfo || {}).taBriskUserList || []
+
+      return billList.map(({ createDate, briskCount }) => {
+        return ({
+          item: dayjs(createDate).format('M.D'),
+          value: briskCount,
+        })
+      })
+    },
   },
   methods: {
     ...mapActions("trunkIndex", ["getIndexCount"])
@@ -63,9 +156,6 @@ export default {
       console.log(this.IndexInfo);
 
       this.hardwaremap = this.IndexInfo.hardwareMap; //chart3
-      this.invoicelist = this.IndexInfo.billInvoiceCountList; //chart4
-      this.usercountlist = this.IndexInfo.taUserLicenseCountList; //chart5
-      this.temporarylist = this.IndexInfo.taTemporaryLicenseCountList; //chart6
     });
   }
 };