Merge branch '2.0.0' of http://git.ycjcjy.com/fuxingfan/smartCommunity into 2.0.0

VUECODE/smart-property-manage/config/dev.env.js

 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://localhost:8086/property-api"',
+  BASE_API: '"http://106.14.20.193:8086/property-api"',
 })

VUECODE/smart-property-manage/config/index.js

     // Use Eslint Loader?
     // If true, your code will be linted during bundling and
     // linting errors and warnings will be shown in the console.
-    useEslint: true,
+    useEslint: false,
     // If true, eslint errors and warnings will also be shown in the error overlay
     // in the browser.
     showEslintErrorsInOverlay: false,

VUECODE/smart-property-manage/src/api/index.js

     method: 'get'
   })
 }
+// 首页图表数据
+export function getIndexCount() {
+  return request({
+    url: '/index/count',
+    method: 'get'
+  })
+}

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

 <template>
   <div id="node3">
-    <div class="title">今日所有小区智能硬件数据统计</div>
+    <div class="title">今日小区智能硬件数据统计</div>
     <div class="table">
-      <div
-        v-for="(item,index) in arr"
-        :key="index"
-        :class="{active:item.active}"
-        @mouseover="item.active = true"
-        @mouseout="item.active=false"
-      >
-        <div>{{ item.text }}</div>
-        <div>{{ item.num }}</div>
+      <div :class="bgHover==1?'active':''"  @mouseenter="divHover(1)">
+        <div>小区门禁开启</div>
+        <div>{{ hardwaremap.communityCount }}</div>
+      </div>
+      <div :class="bgHover==2?'active':''"  @mouseenter="divHover(2)">
+        <div>单元门开启</div>
+        <div>{{ hardwaremap.unitCount }}</div>
+      </div>
+      <div :class="bgHover==3?'active':''"  @mouseenter="divHover(3)">
+        <div>访客车辆进入数量</div>
+        <div>{{ hardwaremap.visitorCount }}</div>
+      </div>
+      <div :class="bgHover==4?'active':''"  @mouseenter="divHover(4)">
+        <div>公区摄像头查看</div>
+        <div>{{ hardwaremap.publicCameraCount }}</div>
+      </div>
+      <div :class="bgHover==5?'active':''"  @mouseenter="divHover(5)">
+        <div>单元门远程监控查看</div>
+        <div>{{ hardwaremap.remoteMonitoringCount }}</div>
+      </div>
+      <div :class="bgHover==6?'active':''"  @mouseenter="divHover(6)">
+        <div>单元门远程开门</div>
+        <div>{{ hardwaremap.remoteUnitCount }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
-
 export default {
   data() {
     return {
-      arr: [
-        { text: '小区门禁开启', num: '13400次', active: false },
-        { text: '单元门开启', num: '12788次', active: false },
-        { text: '车辆进入数量', num: '5664辆', active: false },
-        { text: '咖啡厅销量', num: '3994次', active: false },
-        { text: '智慧食堂销量', num: '5664人次', active: false },
-        { text: '健身房健身', num: '1255人次', active: false }
-      ]
-    }
-  },
-  computed: {
-    ...mapState('trunkIndex', {
-      hardData: item => item.trunkIndex.hardData
-    })
-  },
-  created() {
-    // this.GetHardData().then(() => {
-    //   console.log(this.hardData)
-    //   this.hardData.forEach(item => {
-    //     if (item.message === '小区开门次数') {
-    //       this.arr[0].num = item.count + '次'
-    //     } else if (item.message === '单元门开门次数') {
-    //       this.arr[1].num = item.count + '次'
-    //     }
-    //   })
-    //   this.arr = JSON.parse(JSON.stringify(this.arr))
-    // })
+      bgHover:"",
+
+    };
   },
-  methods: {
-    ...mapActions('trunkIndex', [
-      'GetHardData'
-    ])
+  props: ["hardwaremap"],
+ 
+  methods:{
+       divHover(index) {
+      this.bgHover = index;
+    }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
         color: #a4b6c5;
         margin: 5px;
         font-size: 13px;
+        text-align: center;
       }
     }
     .active {
       z-index: 1;
       div {
         color: #53f9ff;
+        text-align: center;
       }
     }
   }

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

 <template>
-  <div id="node4">
-    <div class="top-title">已合作社区分布图</div>
-    <el-amap
-      ref="map"
-      :center="mapCenter"
-      :zoom="7"
-      :map-style="setMapStyle"
-      vid="amapDemo"
-      class="amap-demo"
-    >
-      <el-amap-marker
-        v-for="(item,index) in markers"
-        :key="index"
-        :position="item.position"
-        :icon="item.icon"
-        :title="item.title"
-        :offset="item.offset"
-        :content="item.content"
-      />
-    </el-amap>
-  </div>
+  <div id="node4"/>
 </template>
 
 <script>
-// import G2 from '@antv/g2'
-// import DataSet from '@antv/data-set'
-import $ from 'jquery'
-// import AMapUI from 'AMapUI'
-import light1 from '@/assets/light1.png'
-import light2 from '@/assets/light2.png'
-import light3 from '@/assets/light3.png'
-import light4 from '@/assets/light4.png'
+import G2 from "@antv/g2";
+import DataSet from "@antv/data-set";
+
 export default {
-  data() {
-    return {
-      light1,
-      light2,
-      light3,
-      light4,
-      markers: [{
-        position: [118.633516, 32.069878],
-        title: '悦见山',
-        offset: [-60, -60],
-        content: `<div class='point'>
-        <img src='${light1}'>
-        <span>悦见山</span>
-        </div>`
-      }, {
-        position: [117.161777, 34.154014],
-        title: '致享城',
-        offset: [-60, -60],
-        content: `<div class='point'>
-        <img src='${light2}'>
-        <span>致享城</span>
-        </div>`
-      }, {
-        position: [118.753086, 31.972501],
-        title: '智慧社区',
-        offset: [-60, -60],
-        content: `<div class='point'>
-        <img src='${light3}'>
-        <span>智慧社区</span>
-        </div>`
-      }, {
-        position: [120.064082, 30.343891],
-        title: '云谷天境',
-        offset: [-60, -60],
-        content: `<div class='point'>
-        <img src='${light4}'>
-        <span>云谷天境</span>
-        </div>`
-      }],
-      mapCenter: [118.753086, 31.972501],
-      setMapStyle: 'amap://styles/blue'
-    }
-  },
   mounted() {
-    setInterval(() => {
-      this.rander()
-    }, 1600)
+    this.rander();
+    console.log(this.invoicelist,"chart4")
   },
+ props:['invoicelist'],
   methods: {
     rander() {
-      $('.point img').animate({ opacity: 0 }, 800).animate({ opacity: 1 }, 800)
+      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.axis("priceTotal", {
+        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("createDate", {
+        line: {
+          lineWidth: 1, // 设置线的宽度
+          stroke: "#a4b6c5" // 设置线的颜色
+        },
+        grid: null,
+        label: {
+          textStyle: {
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12" // 文本大小
+          }
+        }
+      });
+      chart.tooltip({
+        crosshairs: true
+      });
+
+      chart
+        .line()
+        .position("createDate*priceTotal")
+        .color("priceTotal", function(val) {
+          return "#83BB41";
+        })
+        .size(2)
+        .shape("smooth");
+      chart
+        .point()
+        .position("createDate*priceTotal")
+        .size(3)
+        .shape("circle")
+        .label(
+          "createDate*priceTotal",
+          function(createDate, priceTotal) {
+            return priceTotal;
+          },
+          {
+            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="chart4-title"><p class="title">收费组总缴费统计</p></div>'
+      });
+      chart.guide().html({
+        position: ["1%", "-22%"],
+        html:
+          '<div class="chart4-title"><p class="title">金额（元）</p></div>'
+      });
+      chart.guide().html({
+        position: ["102%", "100%"],
+        html:
+          '<div class="chart4-title"><p class="title">日期</p></div>'
+      });
+      chart.render();
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
-#node4{
-  border-radius: 5px;
-}
-.top-title{
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  text-align: center;
-  margin-top: 30px;
-  z-index: 20;
-  color: #A6B9C8;
-  font-size: 18px;
-}
-.point{
-  position: relative;
-  width: 120px;
-  height: 120px;
-  img{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-  }
-  span{
-    position: absolute;
-    top: 80%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    font-size: 12px;
-    color: white;
+.chart4-title {
+  .title {
+    font-size: 13px;
+    color: #a4b6c5;
   }
 }
 </style>

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

 </template>
 
 <script>
-import G2 from '@antv/g2'
-import { mapState, mapActions } from 'vuex'
-
+import G2 from "@antv/g2";
+import DataSet from "@antv/data-set";
 export default {
-  computed: {
-    ...mapState('trunkIndex', {
-      signUser: item => item.trunkIndex.signUser
-    })
-  },
   mounted() {
-    // this.GetSignUser().then(() => {
-    //   this.rander()
-    // })
+    this.rander();
+     console.log(this.invoicelist,"chart4")
   },
+  props:['usercountList'],
   methods: {
-    ...mapActions('trunkIndex', [
-      'GetSignUser'
-    ]),
     rander() {
-      console.log(this.signUser)
-      var data = this.signUser
+      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',
+        container: "node5",
         forceFit: true,
         height: 282,
-        padding: [80, 20, 30, 40]
-      })
-      chart.source(data)
-      console.log(chart)
-      chart.axis('count', {
+        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.axis("value", {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5' // 设置线的颜色
+          stroke: "#a4b6c5" // 设置线的颜色
         },
         grid: null,
         label: {
           textStyle: {
-            textAlign: 'end', // 文本对齐方向，可取值为： start middle end
-            fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12', // 文本大小
-            textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
+            textAlign: "end", // 文本对齐方向，可取值为： start middle end
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12", // 文本大小
+            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
           }
         }
-      })
-      chart.axis('message', {
+      });
+      chart.axis("year", {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5' // 设置线的颜色
+          stroke: "#a4b6c5" // 设置线的颜色
         },
         grid: null,
         label: {
           textStyle: {
-            fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12' // 文本大小
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12", // 文本大小
+            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
           }
         }
-      })
-      chart.scale('', {
-        tickInterval: 200
-      })
+      });
+      chart.tooltip({
+        crosshairs: true
+      });
+
+      chart
+        .line()
+        .position("year*value")
+        .color("type", function(val) {
+          return "#da70d6";
+        })
+        .size(2)
+        .shape("smooth");
+      chart
+        .point()
+        .position("year*value")
+        .size(3)
+        .shape("circle")
+        .label(
+          "year*value",
+          function(year, value) {
+            return value;
+          },
+          {
+            textStyle: {
+              fill: "#fff",
+              fontSize: 12,
+              textAlign: "left"
+            }
+          }
+        )
+        .style({
+          fill: "#eee",
+          fontSize: 12,
+          stroke: "#da70d6",
+          lineWidth: 1
+        });
+
       chart.guide().html({
-        position: ['5%', '-25%'],
-        html: '<div class="chart5-title"><p class="title">注册用户统计</p></div>'
-      })
+        position: ["5%", "-35%"],
+        html:
+          '<div class="chart5-title"><p class="title">月租车总缴费统计</p></div>'
+      });
+        chart.guide().html({
+        position: ["1%", "-22%"],
+        html:
+          '<div class="chart4-title"><p class="title">金额（元）</p></div>'
+      });
       chart.guide().html({
-        position: ['90%', '-15%'],
-        html: `<div class="chart-right-btn"><span>18/11/27</span>&nbsp;<i class='el-icon-date'></i></div>`
-      })
-
-      chart.interval().position('message*count').color('message', function(val) {
-        if (val === '户主总数' || val === '家属总数') {
-          return '#53F9FF'
-        }
-        return '#FF5367'
-      })
-      chart.render()
+        position: ["102%", "100%"],
+        html:
+          '<div class="chart4-title"><p class="title">日期</p></div>'
+      });
+      chart.render();
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
     color: #a4b6c5;
   }
 }
-.chart-right-btn{
-  padding: 0px 8px;
-  display: flex;
-  border: 1px solid #a4b6c5;
-  border-radius: 9px;
-  justify-content: center;
-  align-items: center;
-  span,i{
-    font-size: 10px;
-    color: #a4b6c5;
-  }
-}
 </style>

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

 </template>
 
 <script>
-import G2 from '@antv/g2'
-import DataSet from '@antv/data-set'
+import G2 from "@antv/g2";
+import DataSet from "@antv/data-set";
 export default {
   mounted() {
-    this.rander()
+    this.rander();
   },
+  props:['temporaryList'],
   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)
+      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'
-      })
+        type: "fold",
+        fields: ["ACME"],
+        key: "type",
+        value: "value"
+      });
       var chart = new G2.Chart({
-        container: 'node6',
+        container: "node6",
         forceFit: true,
         height: 282,
-        padding: [80, 20, 30, 40]
-      })
+        padding: [80, 40, 30, 40],
+        itemStyle: { normal: { label: { show: true } } }
+      });
       chart.source(dv, {
         value: {
-          alias: 'The Share Price in Dollars',
+          alias: "The Share Price in Dollars",
           formatter: function formatter(val) {
-            return val
+            return val;
           }
         },
         year: {
-          range: [0, 1]
+          // range: [0, 1]
         }
-      })
-      chart.axis('value', {
+      });
+      chart.axis("value", {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5' // 设置线的颜色
+          stroke: "#a4b6c5" // 设置线的颜色
         },
         grid: null,
         label: {
           textStyle: {
-            textAlign: 'end', // 文本对齐方向，可取值为： start middle end
-            fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12', // 文本大小
-            textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
+            textAlign: "end", // 文本对齐方向，可取值为： start middle end
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12", // 文本大小
+            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
           }
         }
-      })
-      chart.axis('year', {
+      });
+      chart.axis("year", {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5' // 设置线的颜色
+          stroke: "#a4b6c5" // 设置线的颜色
         },
+        name: "wowow",
         grid: null,
         label: {
           textStyle: {
-            fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12' // 文本大小
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12" // 文本大小
           }
         }
-      })
+      });
       chart.tooltip({
         crosshairs: true
-      })
+      });
+      chart
+        .line()
+        .position("year*value")
+        .color("type", function(val) {
+          return "#6495ed";
+        })
+        .size(2)
+        .shape("smooth");
+      chart
+        .point()
+        .position("year*value")
+        .size(3)
+        .shape("circle")
+        .label(
+          "year*value",
+          function(year, value) {
+            return value;
+          },
+          {
+            textStyle: {
+              fill: "#fff",
+              fontSize: 12,
+              textAlign:'left',
+            }
+          }
+        )
+        .style({
+          fill: "#eee",
+          fontSize: 12,
+          stroke: "#6495ed",
+          lineWidth: 1
+        });
+
       chart.guide().html({
-        position: ['90%', '-15%'],
-        html: `<div class="chart-right-btn"><span>日活跃量</span>&nbsp;<i class='el-icon-arrow-down'></i></div>`
-      })
-      chart.area().position('year*value').color('type', function(val) { return '#53F9FF' }).shape('smooth')
-      chart.line().position('year*value').color('type', function(val) { return '#53F9FF' }).size(2).shape('smooth')
+        position: ["5%", "-35%"],
+        html:
+          '<div class="chart4-title"><p class="title">临时车总缴费统计</p></div>'
+      });
+        chart.guide().html({
+        position: ["1%", "-22%"],
+        html:
+          '<div class="chart4-title"><p class="title">金额（元）</p></div>'
+      });
       chart.guide().html({
-        position: ['5%', '-25%'],
-        html: '<div class="chart5-title"><p class="title">上线活跃用户</p></div>'
-      })
-      chart.render()
+        position: ["102%", "100%"],
+        html:
+          '<div class="chart4-title"><p class="title">日期</p></div>'
+      });
+      chart.render();
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
+.chart4-title {
+  .title {
+    font-size: 13px;
+    color: #a4b6c5;
+  }
+}
 </style>

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

 </template>
 
 <script>
-import G2 from '@antv/g2'
+import G2 from "@antv/g2";
 
 export default {
   mounted() {
-    this.rander()
+    this.rander();
   },
   methods: {
     rander() {
-      var data = [{
-        type: '公告',
-        sales: 500
-      }, {
-        type: '活动',
-        sales: 400
-      }, {
-        type: '帖子',
-        sales: 1000
-      }]
+      var data = [
+        {
+          type: "户主",
+          sales: 500
+        },
+        {
+          type: "家属",
+          sales: 1000
+        },
+        {
+          type: "租客",
+          sales: 300
+        }
+      ];
       var chart = new G2.Chart({
-        container: 'node7',
+        container: "node7",
         forceFit: true,
         height: 282,
         padding: [80, 20, 30, 40]
-      })
-      chart.source(data)
-      chart.scale('', {
+      });
+      chart.source(data);
+      chart.scale("", {
         tickInterval: 200
-      })
+      });
+      chart.scale("sales", {
+        alias: "行数(万)"
+      });
       chart.guide().html({
-        position: ['5%', '-25%'],
-        html: '<div class="chart7-title"><p class="title">内容运营统计</p></div>'
-      })
-      chart.guide().html({
-        position: ['90%', '-15%'],
-        html: `<div class="chart-right-btn"><span>发布数量</span>&nbsp;<i class='el-icon-arrow-down'></i></div>`
-      })
-      chart.axis('sales', {
+        position: ["5%", "-35%"],
+        html:
+          '<div class="chart7-title"><p class="title">注册用户总数</p></div>'
+      });
+        chart.guide().html({
+        position: ["1%", "-22%"],
+        html:
+          '<div class="chart4-title"><p class="title">数量（个）</p></div>'
+      });
+   
+      // chart.guide().html({
+      //   position: ["90%", "-15%"],
+      //   html: `<div class="chart-right-btn"><span>发布数量</span>&nbsp;<i class='el-icon-arrow-down'></i></div>`
+      // });
+      chart.axis("sales", {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5' // 设置线的颜色
+          stroke: "#a4b6c5" // 设置线的颜色
         },
+        title: {}, //
+
         grid: null,
         label: {
           textStyle: {
-            textAlign: 'end', // 文本对齐方向，可取值为： start middle end
-            fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12', // 文本大小
-            textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
+            textAlign: "end", // 文本对齐方向，可取值为： start middle end
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12", // 文本大小
+            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
           }
         }
-      })
-      chart.axis('type', {
+      });
+      chart.axis("type", {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5' // 设置线的颜色
+          stroke: "#a4b6c5" // 设置线的颜色
         },
         grid: null,
         label: {
           textStyle: {
-            fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12' // 文本大小
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12" // 文本大小
           }
         }
-      })
-      chart.interval().position('type*sales').color('type', function(val) {
-        if (val === '公告') {
-          return '#53F9FF'
-        } else if (val === '活动') {
-          return '#FF5367'
-        }
-        return '#3F688D'
-      })
-      chart.render()
+      });
+
+      chart
+        .interval()
+        .position("type*sales")
+        .color("type", function(val) {
+          if (val === "户主") {
+            return "#6699FF";
+          } else if (val === "家属") {
+            return "#30e0e0";
+          }
+          return "#3cb371";
+        })
+        .label(
+          "type*sales",
+          function(type, sales) {
+            return sales;
+          },
+          {
+            textStyle: {
+              fill: "#fff",
+              fontSize: 12
+            }
+          }
+        );
+      chart.render();
     }
   }
-}
+};
 </script>
-
 <style lang="scss">
 .chart7-title {
   .title {
   }
 }
 </style>
+

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

+<template>
+  <div id="node8"/>
+</template>
+
+<script>
+import G2 from "@antv/g2";
+import DataSet from "@antv/data-set";
+export default {
+  mounted() {
+    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: "node8",
+        forceFit: true,
+        height: 282,
+        padding: [80, 40, 30, 40]
+      });
+      chart.source(dv, {
+        value: {
+          formatter: function formatter(val) {
+            return val;
+          }
+        },
+        year: {
+          // range: [0, 1]
+        }
+      });
+      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("year", {
+        line: {
+          lineWidth: 1, // 设置线的宽度
+          stroke: "#a4b6c5" // 设置线的颜色
+        },
+        grid: null,
+        label: {
+          textStyle: {
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12" // 文本大小
+          }
+        }
+      });
+      chart.tooltip({
+        crosshairs: true
+      });
+      chart
+        .line()
+        .position("year*value")
+        .color("type", function(val) {
+          return "#ffd700";
+        })
+        .size(2)
+        .shape("smooth");
+      chart
+        .point()
+        .position("year*value")
+        .size(3)
+        .shape("circle")
+        .label(
+          "year*value",
+          function(year, ACME) {
+            return ACME;
+          },
+          {
+            textStyle: {
+              fill: "#fff",
+              fontSize: 12,
+              textAlign:'left',
+            }
+          }
+        )
+        .style({
+          fill: "#eee",
+          fontSize: 12,
+          stroke: "#ffd700",
+          lineWidth: 1
+        });
+
+      chart.guide().html({
+        position: ["5%", "-35%"],
+        html: '<div class="chart8-title"><p class="title">日活跃用户</p></div>'
+      });
+        chart.guide().html({
+        position: ["1%", "-22%"],
+        html:
+          '<div class="chart4-title"><p class="title">数量（个）</p></div>'
+      });
+      chart.guide().html({
+        position: ["102%", "100%"],
+        html:
+          '<div class="chart4-title"><p class="title">日期</p></div>'
+      });
+      chart.render();
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.chart8-title {
+  .title {
+    font-size: 13px;
+    color: #a4b6c5;
+  }
+}
+</style>

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

+<template>
+  <div id="node9"/>
+</template>
+
+<script>
+import G2 from "@antv/g2";
+
+export default {
+  mounted() {
+    this.rander();
+  },
+  methods: {
+    rander() {
+      var data = [
+        {
+          type: "公告",
+          sales: 500
+        },
+        {
+          type: "活动",
+          sales: 400
+        },
+        {
+          type: "话题",
+          sales: 1000
+        }
+      ];
+      var chart = new G2.Chart({
+        container: "node9",
+        forceFit: true,
+        height: 282,
+        padding: [80, 20, 30, 40]
+      });
+      chart.source(data);
+      chart.scale("", {
+        tickInterval: 200
+      });
+      chart.guide().html({
+        position: ["5%", "-35%"],
+        html:
+          '<div class="chart9-title"><p class="title">已发布内容统计</p></div>'
+      });
+      chart.guide().html({
+        position: ["1%", "-22%"],
+        html: '<div class="chart4-title"><p class="title">数量（个）</p></div>'
+      });
+
+      chart.axis("sales", {
+        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("type", {
+        line: {
+          lineWidth: 1, // 设置线的宽度
+          stroke: "#a4b6c5" // 设置线的颜色
+        },
+        grid: null,
+        label: {
+          textStyle: {
+            fill: "#a4b6c5", // 文本的颜色
+            fontSize: "12" // 文本大小
+          }
+        }
+      });
+      chart
+        .interval()
+        .position("type*sales")
+        .color("type", function(val) {
+          if (val === "公告") {
+            return "#53F9FF";
+          } else if (val === "活动") {
+            return "#FF6666";
+          }
+          return "#3F688D";
+        })
+        .label(
+          "type*sales",
+          function(type, sales) {
+            return sales;
+          },
+          {
+            textStyle: {
+              fill: "#fff",
+              fontSize: 12
+            }
+          }
+        );
+      chart.render();
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.chart9-title {
+  .title {
+    font-size: 13px;
+    color: #a4b6c5;
+  }
+}
+.chart-right-btn {
+  font-size: 13px;
+  color: #a4b6c5;
+}
+</style>

VUECODE/smart-property-manage/src/store/modules/trunkIndex.js

-import { getHardData, getSignUser } from '@/api/index'
+import { getHardData, getSignUser,getIndexCount } from '@/api/index'
 
 const trunkIndex = {
   namespaced: true,
   state: {
     trunkIndex: {
       hardData: null,
-      signUser: null
+      signUser: null,
+      IndexInfo: null,
     }
   },
   mutations: {
     },
     upDateSignUser: (state, data) => {
       state.trunkIndex.signUser = data
+    },
+    upDateIndexCount: (state, data) => {
+      state.trunkIndex.IndexInfo = data
     }
   },
   actions: {
           reject(error)
         })
       })
-    }
+    },
+    // 首页图表数据
+    getIndexCount({ commit }) {
+      return new Promise((resolve, reject) => {
+        getIndexCount().then(response => {
+          const data = response.data;
+          commit('upDateIndexCount', data)
+          resolve(data)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
   }
 }
 

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

     <div class="left">
       <chart1/>
       <chart2/>
-      <chart3/>
+      <chart3 :hardwaremap="hardwaremap"/>
     </div>
     <div class="middle">
-      <chart4/>
+      <chart4 :invoicelist="invoicelist"/>
+      <chart5 :usercountlist="usercountlist"/>
+      <chart6 :temporarylist="temporarylist"/>
     </div>
     <div class="right">
-      <chart5/>
-      <chart6/>
       <chart7/>
+      <chart8/>
+      <chart9/>
     </div>
   </div>
 </template>
 
 <script>
-import chart1 from '@/components/chart/chart1.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 { mapState, mapActions } from "vuex";
+import chart1 from "@/components/chart/chart1.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 {
+  data() {
+    return {
+      hardwaremap: {}, //chart3
+      invoicelist: [], //chart4
+      usercountlist: [], //chart5
+      temporarylist: [] //chart6
+    };
+  },
   components: {
     chart1,
     chart2,
     chart4,
     chart5,
     chart6,
-    chart7
-  }
-}
+    chart7,
+    chart8,
+    chart9
+  },
+  computed: {
+    ...mapState("trunkIndex", {
+      IndexInfo: item => item.trunkIndex.IndexInfo
+    })
+  },
+  methods: {
+    ...mapActions("trunkIndex", ["getIndexCount"])
+  },
+  created() {
+    this.getIndexCount().then(() => {
+      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
+    });
+  }
+};
 </script>
 
 <style lang="scss" scoped>
     }
   }
   .middle {
-    flex: 5;
-    width: 1022px;
+    flex: 2;
     height: 905px;
   }
 }