fuxingfan
/
smartCommunity
Слідкувати 1
Зірка 0
Відгалуження 0
Код Питання 1 Запити до злиття 0 Релізи 4 Activity
Browse Source

ytj

yuantianjiao 6 years ago
parent
9595af4714
commit
3e22d69e9d
20 changed files with 753 additions and 22 deletions
Split View Show Diff Stats
  1. 12
    2
      VUECODE/smart-operate-manage/build/webpack.base.conf.js
  2. 2
    2
      VUECODE/smart-operate-manage/build/webpack.dev.conf.js
  3. 2
    0
      VUECODE/smart-operate-manage/index.html
  4. 5
    1
      VUECODE/smart-operate-manage/package.json
  5. BIN
      VUECODE/smart-operate-manage/src/assets/light1.png
  6. BIN
      VUECODE/smart-operate-manage/src/assets/light2.png
  7. BIN
      VUECODE/smart-operate-manage/src/assets/light3.png
  8. BIN
      VUECODE/smart-operate-manage/src/assets/light4.png
  9. 108
    0
      VUECODE/smart-operate-manage/src/components/chart/chart1.vue
  10. 95
    0
      VUECODE/smart-operate-manage/src/components/chart/chart2.vue
  11. 77
    0
      VUECODE/smart-operate-manage/src/components/chart/chart3.vue
  12. 156
    0
      VUECODE/smart-operate-manage/src/components/chart/chart4.vue
  13. 61
    0
      VUECODE/smart-operate-manage/src/components/chart/chart5.vue
  14. 76
    0
      VUECODE/smart-operate-manage/src/components/chart/chart6.vue
  15. 60
    0
      VUECODE/smart-operate-manage/src/components/chart/chart7.vue
  16. 3
    4
      VUECODE/smart-operate-manage/src/main.js
  17. 2
    2
      VUECODE/smart-operate-manage/src/permission.js
  18. 16
    0
      VUECODE/smart-operate-manage/src/router/index.js
  19. 68
    0
      VUECODE/smart-operate-manage/src/views/index/index.vue
  20. 10
    11
      VUECODE/smart-operate-manage/src/views/login/index.vue

+ 12
- 2
VUECODE/smart-operate-manage/build/webpack.base.conf.js View File 

@@ -1,11 +1,12 @@
1 1 
 'use strict'
2 2 
 const path = require('path')
3 
+const webpack = require('webpack')
3 4 
 const utils = require('./utils')
4 5 
 const config = require('../config')
5 6 
 const { VueLoaderPlugin } = require('vue-loader')
6 7 
 const vueLoaderConfig = require('./vue-loader.conf')
7 8
8 
-function resolve(dir) {
9 
+function resolve (dir) {
9 10 
   return path.join(__dirname, '..', dir)
10 11 
 }
11 12 
 
@@ -91,7 +92,12 @@ module.exports = {
91 92 
       }
92 93 
     ]
93 94 
   },
94 
-  plugins: [new VueLoaderPlugin()],
95 
+  plugins: [new VueLoaderPlugin(),
96 
+  new webpack.ProvidePlugin({
97 
+    $: "jquery",
98 
+    jQuery: "jquery",
99 
+    "windows.jQuery": "jquery"
100 
+  })],
95 101 
   node: {
96 102 
     // prevent webpack from injecting useless setImmediate polyfill because Vue
97 103 
     // source contains it (although only uses it if it's native).
 
@@ -103,5 +109,9 @@ module.exports = {
103 109 
     net: 'empty',
104 110 
     tls: 'empty',
105 111 
     child_process: 'empty'
112 
+  },
113 
+  externals: {
114 
+    'AMap': 'AMap',
115 
+    'AMapUI': 'AMapUI'
106 116 
   }
107 117 
 }

+ 2
- 2
VUECODE/smart-operate-manage/build/webpack.dev.conf.js View File 

@@ -9,7 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
9 9 
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
10 10 
 const portfinder = require('portfinder')
11 11
12 
-function resolve(dir) {
12 
+function resolve (dir) {
13 13 
   return path.join(__dirname, '..', dir)
14 14 
 }
15 15 
 
@@ -79,7 +79,7 @@ module.exports = new Promise((resolve, reject) => {
79 79 
           compilationSuccessInfo: {
80 80 
             messages: [
81 81 
               `Your application is running here: http://${
82 
-                devWebpackConfig.devServer.host
82 
+              devWebpackConfig.devServer.host
83 83 
               }:${port}`
84 84 
             ]
85 85 
           },

+ 2
- 0
VUECODE/smart-operate-manage/index.html View File 

@@ -4,6 +4,8 @@
4 4 
     <meta charset="utf-8">
5 5 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 6 
     <title>vue-admin-template</title>
7 
+    <script src="//webapi.amap.com/maps?v=1.4.10&key=81f5560856a88eb5b3da440f18a97845&plugin=AMap.DistrictLayer"></script>
8 
+    <script src="//webapi.amap.com/ui/1.0/main.js"></script>
7 9 
   </head>
8 10 
   <body>
9 11 
     <div id="app"></div>

+ 5
- 1
VUECODE/smart-operate-manage/package.json View File 

@@ -25,9 +25,12 @@
25 25 
     "vue-router": "3.0.1",
26 26 
     "vuex": "3.0.1",
27 27 
     "wangeditor": "^3.1.1",
28 
-    "xlsx": "^0.14.0"
28 
+    "xlsx": "^0.14.0",
29 
+    "jquery": "^2.2.3"
29 30 
   },
30 31 
   "devDependencies": {
32 
+    "@antv/data-set": "^0.10.1",
33 
+    "@antv/g2": "^3.4.1",
31 34 
     "autoprefixer": "8.5.0",
32 35 
     "babel-core": "6.26.0",
33 36 
     "babel-eslint": "8.2.6",
 
@@ -49,6 +52,7 @@
49 52 
     "file-loader": "1.1.11",
50 53 
     "friendly-errors-webpack-plugin": "1.7.0",
51 54 
     "html-webpack-plugin": "4.0.0-alpha",
55 
+    "jquery": "^2.2.3",
52 56 
     "mini-css-extract-plugin": "0.4.1",
53 57 
     "node-notifier": "5.2.1",
54 58 
     "node-sass": "^4.7.2",

BIN
VUECODE/smart-operate-manage/src/assets/light1.png View File


BIN
VUECODE/smart-operate-manage/src/assets/light2.png View File


BIN
VUECODE/smart-operate-manage/src/assets/light3.png View File


BIN
VUECODE/smart-operate-manage/src/assets/light4.png View File


+ 108
- 0
VUECODE/smart-operate-manage/src/components/chart/chart1.vue View File 

@@ -0,0 +1,108 @@
1 
+<template>
2 
+  <div id="node1">
3 
+  </div>
4 
+</template>
5 
+
6 
+<script>
7 
+import G2 from '@antv/g2'
8 
+import DataSet from '@antv/data-set'
9 
+import $ from 'jquery'
10 
+
11 
+export default {
12 
+  mounted () {
13 
+    this.rander()
14 
+  },
15 
+  methods: {
16 
+    rander () {
17 
+      var data = [{
18 
+        type: '未解决',
19 
+        percent: 0.3
20 
+      }, {
21 
+        type: '已解决',
22 
+        percent: 0.7
23 
+      },]
24 
+      var sum = 200
25 
+      var ds = new DataSet()
26 
+      var dv = ds.createView().source(data)
27 
+      dv.transform({
28 
+        type: 'map',
29 
+        callback: function callback (row) {
30 
+          row.value = parseInt(sum * row.percent)
31 
+          return row
32 
+        }
33 
+      })
34 
+      var chart = new G2.Chart({
35 
+        container: 'node1',
36 
+        forceFit: true,
37 
+        height: 282,
38 
+        // height: window.innerHeight / 3 - 50,
39 
+        padding: [30, 'auto', 'auto', 'auto']
40 
+      })
41 
+      chart.source(dv)
42 
+      chart.tooltip(false)
43 
+      // chart.legend({
44 
+      //   position: 'right-center',
45 
+      //   offsetX: -100
46 
+      // })
47 
+      chart.coord('theta', {
48 
+        radius: 0.75,
49 
+        innerRadius: 0.6
50 
+      })
51 
+      chart.intervalStack().position('percent').color('type', ['#53F9FF', '#1A1E22']).opacity(1).label('percent', {
52 
+        offset: -18,
53 
+        textStyle: {
54 
+          fill: 'white',
55 
+          fontSize: 12,
56 
+          shadowBlur: 2,
57 
+          shadowColor: 'rgba(0, 0, 0, .45)'
58 
+        },
59 
+        rotate: 0,
60 
+        autoRotate: false,
61 
+        formatter: function formatter (text, item) {
62 
+          return String(parseInt(item.point.percent * 100)) + '%'
63 
+        }
64 
+      })
65 
+      chart.guide().html({
66 
+        position: ['50%', '50%'],
67 
+        html: '<div class="g2-guide-html"><p class="title">总计</p><p class="value">500</p></div>'
68 
+      })
69 
+      chart.guide().html({
70 
+        position: ['50%', '-10%'],
71 
+        html: '<div class="g2-guide-title"><p class="title">昨日工单解决情况200单</p></div>'
72 
+      })
73 
+      chart.on('interval:mouseenter', function (ev) {
74 
+        var data = ev.data._origin
75 
+        $(".g2-guide-html").css('opacity', 1)
76 
+        $(".g2-guide-html .title").text(data.type)
77 
+        $(".g2-guide-html .value").text(data.value)
78 
+      })
79 
+
80 
+      chart.on('interval:mouseleave', function () {
81 
+        $(".g2-guide-html .title").text('总计')
82 
+        $(".g2-guide-html .value").text(500)
83 
+      })
84 
+      chart.render()
85 
+    }
86 
+  }
87 
+}
88 
+</script>
89 
+
90 
+<style lang="scss">
91 
+#node1 {
92 
+  .g2-guide-html {
93 
+    color: #a4b6c5;
94 
+    .title {
95 
+      text-align: "ceter";
96 
+    }
97 
+    .value {
98 
+      text-align: center;
99 
+    }
100 
+  }
101 
+  .g2-guide-title {
102 
+    color: #a4b6c5;
103 
+    .title {
104 
+      font-size: 16px;
105 
+    }
106 
+  }
107 
+}
108 
+</style>

+ 95
- 0
VUECODE/smart-operate-manage/src/components/chart/chart2.vue View File 

@@ -0,0 +1,95 @@
1 
+<template>
2 
+  <div id="node2"></div>
3 
+</template>
4 
+
5 
+<script>
6 
+import G2 from '@antv/g2'
7 
+import DataSet from '@antv/data-set'
8 
+
9 
+export default {
10 
+  mounted () {
11 
+    this.rander()
12 
+  },
13 
+  methods: {
14 
+    rander () {
15 
+      var data = [{
16 
+        item: '工单一',
17 
+        count: 40,
18 
+        percent: 0.4
19 
+      }, {
20 
+        item: '工单二',
21 
+        count: 21,
22 
+        percent: 0.21
23 
+      }, {
24 
+        item: '工单三',
25 
+        count: 17,
26 
+        percent: 0.17
27 
+      }, {
28 
+        item: '工单四',
29 
+        count: 13,
30 
+        percent: 0.13
31 
+      }]
32 
+      var chart = new G2.Chart({
33 
+        container: 'node2',
34 
+        forceFit: true,
35 
+        height: 282,
36 
+        // height: window.innerHeight / 3 - 50,
37 
+        padding: [40, 'auto', 'auto', 'auto']
38 
+      })
39 
+      chart.source(data, {
40 
+        percent: {
41 
+          formatter: function formatter (val) {
42 
+            val = val * 100 + '%'
43 
+            return val
44 
+          }
45 
+        }
46 
+      })
47 
+      chart.coord('theta', {
48 
+        radius: 0.75
49 
+      })
50 
+      chart.guide().html({
51 
+        position: ['50%', '-15%'],
52 
+        html: '<div class="chart2-title"><p class="title">今日新增工单</p></div>'
53 
+      })
54 
+      chart.tooltip({
55 
+        showTitle: false,
56 
+        itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
57 
+      })
58 
+      chart.intervalStack().position('percent').color('item', function (val) {
59 
+        if (val === '工单一') {
60 
+          return '#53F9FF'
61 
+        } else if (val === '工单二') {
62 
+          return '#83BB41'
63 
+        } else if (val === '工单三') {
64 
+          return '#FFC400'
65 
+        } else if (val === '工单四') {
66 
+          return '#454D54'
67 
+        }
68 
+      }).label('percent', {
69 
+        formatter: function formatter (val, item) {
70 
+          return item._origin.item + ': ' + val
71 
+        }
72 
+      }).tooltip('item*percent', function (item, percent) {
73 
+        percent = percent * 100 + '%'
74 
+        return {
75 
+          name: item,
76 
+          value: percent
77 
+        }
78 
+      }).style({
79 
+        lineWidth: 1,
80 
+        stroke: '#fff'
81 
+      })
82 
+      chart.render()
83 
+    }
84 
+  }
85 
+}
86 
+</script>
87 
+
88 
+<style lang="scss">
89 
+.chart2-title {
90 
+  .title {
91 
+    font-size: 16px;
92 
+    color: #a4b6c5;
93 
+  }
94 
+}
95 
+</style>

+ 77
- 0
VUECODE/smart-operate-manage/src/components/chart/chart3.vue View File 

@@ -0,0 +1,77 @@
1 
+<template>
2 
+  <div id="node3">
3 
+    <div class="title">昨日所有小区智能硬件数据统计</div>
4 
+    <div class="table">
5 
+      <div v-for="(item,index) in arr" :key="index" @mouseover='item.active = true' @mouseout="item.active=false" :class="{active:item.active}">
6 
+        <div>{{item.text}}</div>
7 
+        <div>{{item.num}}</div>
8 
+      </div>
9 
+    </div>
10 
+  </div>
11 
+</template>
12 
+
13 
+<script>
14 
+
15 
+export default {
16 
+  data () {
17 
+    return {
18 
+      arr: [
19 
+        { text: '小区门禁开启', num: '13400次', active: false },
20 
+        { text: '单元门开启', num: '12788次', active: false },
21 
+        { text: '车辆进入数量', num: '5664辆', active: false },
22 
+        { text: '咖啡厅销量', num: '3994次', active: false },
23 
+        { text: '智慧食堂销量', num: '5664人次', active: false },
24 
+        { text: '健身房健身', num: '1255人次', active: false },
25 
+      ]
26 
+    }
27 
+  },
28 
+  mounted () {
29 
+
30 
+  },
31 
+  methods: {
32 
+
33 
+  }
34 
+}
35 
+</script>
36 
+
37 
+<style lang="scss" scoped>
38 
+#node3 {
39 
+  position: relative;
40 
+  .title {
41 
+    text-align: center;
42 
+    padding: 3% 0 30px 0;
43 
+    color: #A4B6C5;
44 
+  }
45 
+  .table {
46 
+    display: flex;
47 
+    flex-flow: row wrap;
48 
+    border: 1px solid #A4B6C5;
49 
+    width: 302px;
50 
+    margin: 0 auto;
51 
+    > div {
52 
+      width: 100px;
53 
+      height: 100px;
54 
+      border: 1px solid #A4B6C5;
55 
+      display: flex;
56 
+      flex-flow: column nowrap;
57 
+      justify-content: center;
58 
+      align-items: center;
59 
+      &:hover {
60 
+        cursor: pointer;
61 
+      }
62 
+      div {
63 
+        color: #A4B6C5;
64 
+        margin: 5px;
65 
+        font-size: 13px;
66 
+      }
67 
+    }
68 
+    .active {
69 
+      outline: 2px solid #53f9ff;
70 
+      z-index: 1;
71 
+      div {
72 
+        color: #53f9ff;
73 
+      }
74 
+    }
75 
+  }
76 
+}
77 
+</style>

+ 156
- 0
VUECODE/smart-operate-manage/src/components/chart/chart4.vue View File 

@@ -0,0 +1,156 @@
1 
+<template>
2 
+  <div id="node4">
3 
+    <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="8" class="amap-demo"  :mapStyle='setMapStyle'>
4 
+      <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item.position" :icon='item.icon' :title="item.title"></el-amap-marker>
5 
+    </el-amap>
6 
+  </div>
7 
+</template>
8 
+
9 
+<script>
10 
+// import G2 from '@antv/g2'
11 
+// import DataSet from '@antv/data-set'
12 
+// import $ from 'jquery'
13 
+// import AMapUI from 'AMapUI'
14 
+import light1 from '@/assets/light1.png'
15 
+import light2 from '@/assets/light2.png'
16 
+import light3 from '@/assets/light3.png'
17 
+import light4 from '@/assets/light4.png'
18 
+export default {
19 
+  data () {
20 
+    return {
21 
+      light1,
22 
+      light2,
23 
+      light3,
24 
+      light4,
25 
+      markers: [{
26 
+        position: [119.63803900, 32.58482400],
27 
+        icon: light1, // 添加 Icon 图标 URL
28 
+        title: '悦见山'
29 
+      }, {
30 
+        position: [118.29096500, 33.92855800],
31 
+        icon: light2, // 添加 Icon 图标 URL
32 
+        title: '银山'
33 
+      }, {
34 
+        position: [120.07075000, 32.43910000],
35 
+        icon: light3, // 添加 Icon 图标 URL
36 
+        title: '智慧社区'
37 
+      }, {
38 
+        position: [118.79317400, 32.07443900],
39 
+        icon: light4, // 添加 Icon 图标 URL
40 
+        title: '帝景天誉'
41 
+      }],
42 
+      mapCenter: [119.63803900, 32.58482400],
43 
+      setMapStyle: 'amap://styles/blue'
44 
+    }
45 
+  },
46 
+  mounted () {
47 
+    this.rander()
48 
+  },
49 
+  methods: {
50 
+    rander () {
51 
+      // AMap.plugin('AMap.DistrictLayer', function () {//异步加载插件
52 
+      //   var DistrictLayer = new AMap.DistrictLayer();
53 
+      //   map.addControl(DistrictLayer);
54 
+      // });
55 
+      // var adCode = 320000;
56 
+      // var depth = 2;
57 
+      // var map = new AMap.Map("node4", {
58 
+      //   zoom: 8,
59 
+      //   center: [119.63803900, 32.58482400],
60 
+      //   pitch: 0,
61 
+      //   viewMode: '3D',
62 
+      // });
63 
+
64 
+      // // 创建省份图层
65 
+      // var disProvince;
66 
+      // function initPro (code, dep) {
67 
+      //   dep = typeof dep == 'undefined' ? 2 : dep;
68 
+      //   adCode = code;
69 
+      //   depth = dep;
70 
+
71 
+      //   disProvince && disProvince.setMap(null);
72 
+
73 
+      //   disProvince = new AMap.DistrictLayer.Province({
74 
+      //     zIndex: 12,
75 
+      //     adcode: [code],
76 
+      //     depth: dep,
77 
+      //     styles: {
78 
+      //       'fill': function (properties) {
79 
+      //         // properties为可用于做样式映射的字段，包含
80 
+      //         // NAME_CHN:中文名称
81 
+      //         // adcode_pro
82 
+      //         // adcode_cit
83 
+      //         // adcode
84 
+      //         var adcode = properties.adcode;
85 
+      //         return getColorByAdcode(adcode);
86 
+      //       },
87 
+      //       'province-stroke': 'cornflowerblue',
88 
+      //       'city-stroke': 'white', // 中国地级市边界
89 
+      //       'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
90 
+      //     }
91 
+      //   });
92 
+
93 
+      //   disProvince.setMap(map);
94 
+      // }
95 
+
96 
+      // // 颜色辅助方法
97 
+      // var colors = {};
98 
+      // var getColorByAdcode = function (adcode) {
99 
+      //   if (!colors[adcode]) {
100 
+      //     var gb = Math.random() * 155 + 50;
101 
+      //     colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
102 
+      //   }
103 
+      //   return colors[adcode];
104 
+      // }
105 
+      // initPro(adCode, depth);
106 
+      // map.setMapStyle('amap://styles/blue')
107 
+      // var marker1 = new AMap.Marker({
108 
+      //   position: new AMap.LngLat(119.63803900, 32.58482400),
109 
+      //   offset: new AMap.Pixel(-10, -10),
110 
+      //   icon: this.light1, // 添加 Icon 图标 URL
111 
+      //   title: '悦见山'
112 
+      // });
113 
+      // var marker2 = new AMap.Marker({
114 
+      //   position: new AMap.LngLat(118.29096500, 33.92855800),
115 
+      //   offset: new AMap.Pixel(-10, -10),
116 
+      //   icon: this.light2, // 添加 Icon 图标 URL
117 
+      //   title: '银山'
118 
+      // });
119 
+      // var marker3 = new AMap.Marker({
120 
+      //   position: new AMap.LngLat(120.07075000, 32.43910000),
121 
+      //   offset: new AMap.Pixel(-10, -10),
122 
+      //   icon: this.light3, // 添加 Icon 图标 URL
123 
+      //   title: '智慧社区'
124 
+      // });
125 
+      // var marker4 = new AMap.Marker({
126 
+      //   position: new AMap.LngLat(119.63803900, 32.58482400),
127 
+      //   offset: new AMap.Pixel(-10, -10),
128 
+      //   icon: this.light4, // 添加 Icon 图标 URL
129 
+      //   title: '帝景天誉'
130 
+      // });
131 
+      // var markerList = [marker1, marker2, marker3, marker4];
132 
+      // map.add(markerList);
133 
+    }
134 
+  }
135 
+}
136 
+</script>
137 
+
138 
+<style lang="scss">
139 
+#node4 {
140 
+  .g2-guide-html {
141 
+    color: #a4b6c5;
142 
+    .title {
143 
+      text-align: "ceter";
144 
+    }
145 
+    .value {
146 
+      text-align: center;
147 
+    }
148 
+  }
149 
+  .g2-guide-title {
150 
+    color: #a4b6c5;
151 
+    .title {
152 
+      font-size: 16px;
153 
+    }
154 
+  }
155 
+}
156 
+</style>

+ 61
- 0
VUECODE/smart-operate-manage/src/components/chart/chart5.vue View File 

@@ -0,0 +1,61 @@
1 
+<template>
2 
+  <div id="node5"></div>
3 
+</template>
4 
+
5 
+<script>
6 
+import G2 from '@antv/g2'
7 
+import DataSet from '@antv/data-set'
8 
+
9 
+export default {
10 
+  mounted () {
11 
+    this.rander()
12 
+  },
13 
+  methods: {
14 
+    rander () {
15 
+      var data = [{
16 
+        type: '总户数',
17 
+        sales: 500
18 
+      }, {
19 
+        type: '业主',
20 
+        sales: 400
21 
+      }, {
22 
+        type: '家属',
23 
+        sales: 1000
24 
+      }, {
25 
+        type: '租客',
26 
+        sales: 200
27 
+      }];
28 
+      var chart = new G2.Chart({
29 
+        container: 'node5',
30 
+        forceFit: true,
31 
+        height: 282,
32 
+        padding: [80, 20, 30, 40]
33 
+      });
34 
+      chart.source(data);
35 
+      chart.scale('', {
36 
+        tickInterval: 200
37 
+      });
38 
+      chart.guide().html({
39 
+        position: ['5%', '-25%'],
40 
+        html: '<div class="chart5-title"><p class="title">注册用户统计</p></div>'
41 
+      })
42 
+      chart.interval().position('type*sales').color('type', function (val) {
43 
+        if (val === '总户数' || val === '家属') {
44 
+          return '#53F9FF';
45 
+        }
46 
+        return '#FF5367';
47 
+      });
48 
+      chart.render();
49 
+    }
50 
+  }
51 
+}
52 
+</script>
53 
+
54 
+<style lang="scss">
55 
+.chart5-title {
56 
+  .title {
57 
+    font-size: 13px;
58 
+    color: #a4b6c5;
59 
+  }
60 
+}
61 
+</style>

+ 76
- 0
VUECODE/smart-operate-manage/src/components/chart/chart6.vue View File 

@@ -0,0 +1,76 @@
1 
+<template>
2 
+  <div id="node6"></div>
3 
+</template>
4 
+
5 
+<script>
6 
+import G2 from '@antv/g2'
7 
+import DataSet from '@antv/data-set'
8 
+export default {
9 
+  mounted () {
10 
+    this.rander()
11 
+  },
12 
+  methods: {
13 
+    rander () {
14 
+      var data = [{
15 
+        "year": "11.17",
16 
+        "ACME": 300,
17 
+      }, {
18 
+        "year": "11.18",
19 
+        "ACME": 280,
20 
+      }, {
21 
+        "year": "11.19",
22 
+        "ACME": 320,
23 
+      }, {
24 
+        "year": "11.20",
25 
+        "ACME": 250,
26 
+      }, {
27 
+        "year": "11.21",
28 
+        "ACME": 310,
29 
+      }, {
30 
+        "year": "11.22",
31 
+        "ACME": 323,
32 
+      }, {
33 
+        "year": "11.23",
34 
+        "ACME": 350,
35 
+      }];
36 
+      var dv = new DataSet.View().source(data);
37 
+      dv.transform({
38 
+        type: 'fold',
39 
+        fields: ['ACME'],
40 
+        key: 'type',
41 
+        value: 'value'
42 
+      });
43 
+      var chart = new G2.Chart({
44 
+        container: 'node6',
45 
+        forceFit: true,
46 
+        height: 282,
47 
+        padding: [80, 20, 30, 40]
48 
+      });
49 
+      chart.source(dv, {
50 
+        value: {
51 
+          alias: 'The Share Price in Dollars',
52 
+          formatter: function formatter (val) {
53 
+            return '$' + val;
54 
+          }
55 
+        },
56 
+        year: {
57 
+          range: [0, 1]
58 
+        }
59 
+      });
60 
+      chart.tooltip({
61 
+        crosshairs: true
62 
+      });
63 
+      chart.area().position('year*value').color('type', function (val) { return '#53F9FF' }).shape('smooth');
64 
+      chart.line().position('year*value').color('type', function (val) { return '#53F9FF' }).size(2).shape('smooth');
65 
+      chart.guide().html({
66 
+        position: ['5%', '-25%'],
67 
+        html: '<div class="chart5-title"><p class="title">上线活跃用户</p></div>'
68 
+      })
69 
+      chart.render();
70 
+    }
71 
+  }
72 
+}
73 
+</script>
74 
+
75 
+<style lang="scss">
76 
+</style>

+ 60
- 0
VUECODE/smart-operate-manage/src/components/chart/chart7.vue View File 

@@ -0,0 +1,60 @@
1 
+<template>
2 
+  <div id="node7"></div>
3 
+</template>
4 
+
5 
+<script>
6 
+import G2 from '@antv/g2'
7 
+import DataSet from '@antv/data-set'
8 
+
9 
+export default {
10 
+  mounted () {
11 
+    this.rander()
12 
+  },
13 
+  methods: {
14 
+    rander () {
15 
+      var data = [{
16 
+        type: '公告',
17 
+        sales: 500
18 
+      }, {
19 
+        type: '活动',
20 
+        sales: 400
21 
+      }, {
22 
+        type: '帖子',
23 
+        sales: 1000
24 
+      }];
25 
+      var chart = new G2.Chart({
26 
+        container: 'node7',
27 
+        forceFit: true,
28 
+        height: 282,
29 
+        padding: [80, 20, 30, 40]
30 
+      });
31 
+      chart.source(data);
32 
+      chart.scale('', {
33 
+        tickInterval: 200
34 
+      });
35 
+      chart.guide().html({
36 
+        position: ['5%', '-25%'],
37 
+        html: '<div class="chart7-title"><p class="title">内容运营统计</p></div>'
38 
+      })
39 
+      chart.interval().position('type*sales').color('type', function (val) {
40 
+        if (val === '公告') {
41 
+          return '#53F9FF';
42 
+        } else if (val === '活动') {
43 
+          return '#FF5367';
44 
+        }
45 
+        return '#3F688D';
46 
+      });
47 
+      chart.render();
48 
+    }
49 
+  }
50 
+}
51 
+</script>
52 
+
53 
+<style lang="scss">
54 
+.chart7-title {
55 
+  .title {
56 
+    font-size: 13px;
57 
+    color: #a4b6c5;
58 
+  }
59 
+}
60 
+</style>

+ 3
- 4
VUECODE/smart-operate-manage/src/main.js View File 

@@ -24,11 +24,10 @@ Vue.config.productionTip = false
24 24
25 25 
 VueAMap.initAMapApiLoader({
26 26 
   key: 'f0d1d4f82432504003ebf46e5e36ff03',
27 
-  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
28 
-  // 默认高德 sdk 版本为 1.4.4
29 
-  v: '1.4.4'
27 
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictLayer'],
28 
+  // 默认高德 sdk 版本为 1.4.10
29 
+  v: '1.4.10'
30 30 
 })
31 
-
32 31 
 new Vue({
33 32 
   el: '#app',
34 33 
   router,

+ 2
- 2
VUECODE/smart-operate-manage/src/permission.js View File 

@@ -5,14 +5,14 @@ import 'nprogress/nprogress.css'// Progress 进度条样式
5 5 
 import { Message } from 'element-ui'
6 6 
 import { getToken } from '@/utils/auth' // 验权
7 7
8 
-const whiteList = ['/login'] // 不重定向白名单
8 
+const whiteList = ['/login','/index'] // 不重定向白名单
9 9 
 router.beforeEach((to, from, next) => {
10 10 
   NProgress.start()
11 11 
   if (getToken()) {
12 12 
     if (to.path === '/login') {
13 13 
       next({ path: '/' })
14 14 
       NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
15 
-    } else {
15 
+    }else {
16 16 
       if (store.getters.roles.length === 0) {
17 17 
         store.dispatch('GetInfo').then(res => { // 拉取用户信息
18 18 
           next()

+ 16
- 0
VUECODE/smart-operate-manage/src/router/index.js View File 

@@ -37,6 +37,22 @@ export const constantRouterMap = [
37 37 
     }]
38 38 
   },
39 39
40 
+  {
41 
+    path: '/index',
42 
+    component: Layout,
43 
+    redirect: '/index',
44 
+    alwaysShow: true,
45 
+    meta: { title: '首页', icon: 'zip' },
46 
+    children: [
47 
+      {
48 
+        path: '',
49 
+        component: () => import('@/views/index/index'),
50 
+        name: 'index',
51 
+        meta: { title: '首页', icon: 'table' }
52 
+      }
53 
+    ]
54 
+  },
55 
+
40 56 
   {
41 57 
     path: '/community',
42 58 
     component: Layout,

+ 68
- 0
VUECODE/smart-operate-manage/src/views/index/index.vue View File 

@@ -0,0 +1,68 @@
1 
+<template>
2 
+  <div class="main">
3 
+    <div class="left">
4 
+      <chart1></chart1>
5 
+      <chart2></chart2>
6 
+      <chart3></chart3>
7 
+    </div>
8 
+    <div class="middle">
9 
+      <chart4></chart4>
10 
+    </div>
11 
+    <div class="right">
12 
+      <chart5></chart5>
13 
+      <chart6></chart6>
14 
+      <chart7></chart7>
15 
+    </div>
16 
+  </div>
17 
+</template>
18 
+
19 
+<script>
20 
+import chart1 from '@/components/chart/chart1.vue'
21 
+import chart2 from '@/components/chart/chart2.vue'
22 
+import chart3 from '@/components/chart/chart3.vue'
23 
+import chart4 from '@/components/chart/chart4.vue'
24 
+import chart5 from '@/components/chart/chart5.vue'
25 
+import chart6 from '@/components/chart/chart6.vue'
26 
+import chart7 from '@/components/chart/chart7.vue'
27 
+
28 
+export default {
29 
+  components: {
30 
+    chart1,
31 
+    chart2,
32 
+    chart3,
33 
+    chart4,
34 
+    chart5,
35 
+    chart6,
36 
+    chart7
37 
+  },
38 
+}
39 
+
40 
+</script>
41 
+
42 
+<style lang="scss" scoped>
43 
+.main {
44 
+  display: flex;
45 
+  height: 920px;
46 
+  background: #16191c;
47 
+  padding: 8px;
48 
+  .left,
49 
+  .middle,
50 
+  .right {
51 
+    flex: 2;
52 
+    height: 100%;
53 
+    display: flex;
54 
+    flex-flow: column nowrap;
55 
+    div {
56 
+      flex: 1;
57 
+      margin: 8px;
58 
+      background: #2c343a;
59 
+      border-radius: 5px;
60 
+    }
61 
+  }
62 
+  .middle {
63 
+    flex: 5;
64 
+    width: 1022px;
65 
+    height: 905px;
66 
+  }
67 
+}
68 
+</style>

+ 10
- 11
VUECODE/smart-operate-manage/src/views/login/index.vue View File 

@@ -32,7 +32,7 @@ import { isvalidUsername, validatCode } from '@/utils/validate'
32 32
33 33 
 export default {
34 34 
   name: 'Login',
35 
-  data() {
35 
+  data () {
36 36 
     const validateUsername = (rule, value, callback) => {
37 37 
       if (!isvalidUsername(value)) {
38 38 
         callback(new Error('请输入正确的手机号码'))
 
@@ -62,14 +62,14 @@ export default {
62 62 
   },
63 63 
   watch: {
64 64 
     $route: {
65 
-      handler: function(route) {
65 
+      handler: function (route) {
66 66 
         this.redirect = route.query && route.query.redirect
67 67 
       },
68 68 
       immediate: true
69 69 
     }
70 70 
   },
71 71 
   methods: {
72 
-    handleLogin() {
72 
+    handleLogin () {
73 73 
       this.$refs.loginForm.validate(valid => {
74 74 
         if (valid) {
75 75 
           this.loading = true
 
@@ -88,9 +88,9 @@ export default {
88 88 
           return false
89 89 
         }
90 90 
       })
91 
-      this.$router.push({ path: this.redirect || '/' })
91 
+      this.$router.push({ path: this.redirect || '/index' })
92 92 
     },
93 
-    sendCode() {
93 
+    sendCode () {
94 94 
       this.$store.dispatch('SendCode', this.loginForm.username).then((res) => {
95 95 
       }).catch(() => {
96 96 
         console.log('error sendcode')
 
@@ -101,8 +101,8 @@ export default {
101 101 
 </script>
102 102
103 103 
 <style rel="stylesheet/scss" lang="scss">
104 
-$bg:#2d3a4b;
105 
-$light_gray:#eee;
104 
+$bg: #2d3a4b;
105 
+$light_gray: #eee;
106 106
107 107 
 /* reset element-ui css */
108 108 
 .login-container {
 
@@ -131,13 +131,12 @@ $light_gray:#eee;
131 131 
     color: #454545;
132 132 
   }
133 133 
 }
134 
-
135 134 
 </style>
136 135
137 136 
 <style rel="stylesheet/scss" lang="scss" scoped>
138 
-$bg:#2d3a4b;
139 
-$dark_gray:#889aa4;
140 
-$light_gray:#eee;
137 
+$bg: #2d3a4b;
138 
+$dark_gray: #889aa4;
139 
+$light_gray: #eee;
141 140 
 .login-container {
142 141 
   position: fixed;
143 142 
   height: 100%;