Browse Source

页面开发

zbb 1 year ago
parent
commit
baf10c5fc7

File diff suppressed because it is too large
+ 0 - 14688
package-lock.json


+ 4 - 2
package.json

@@ -15,6 +15,8 @@
15 15
     "@wangeditor/editor-for-vue": "^1.0.2",
16 16
     "apexcharts": "^3.45.2",
17 17
     "axios": "1.4.0",
18
+    "axios": "1.4.0",
19
+    "element-ui": "^2.15.12",
18 20
     "babel-runtime": "^6.26.0",
19 21
     "echarts": "^4.9.0",
20 22
     "echarts-gl": "^1.1.1",
@@ -52,8 +54,8 @@
52 54
     "html-webpack-plugin": "^2.30.1",
53 55
     "less": "^3.9.0",
54 56
     "less-loader": "^4.1.0",
55
-    "node-notifier": "^5.1.2",
56 57
     "node-sass": "^4.12.0",
58
+    "node-notifier": "^5.1.2",
57 59
     "optimize-css-assets-webpack-plugin": "^3.2.0",
58 60
     "ora": "^1.2.0",
59 61
     "portfinder": "^1.0.13",
@@ -61,7 +63,7 @@
61 63
     "postcss-loader": "^2.0.8",
62 64
     "postcss-url": "^7.2.1",
63 65
     "rimraf": "^2.6.0",
64
-    "sass-loader": "^6.0.6",
66
+    "sass-loader": "6.0.7",
65 67
     "semver": "^5.3.0",
66 68
     "shelljs": "^0.7.6",
67 69
     "style-loader": "^0.23.1",

+ 134 - 0
src/pages/index/components/access_data_analysis.vue

@@ -0,0 +1,134 @@
1
+<template>
2
+  <div class="body-wrapper">
3
+    <div class="search-card" style="display: flex; justify-content: space-between;">
4
+      <el-select v-model="value" placeholder="请选择所在区" style="margin-left: 15px;padding: 10px">
5
+        <el-option
6
+          v-for="item in options"
7
+          :key="item.value"
8
+          :label="item.label"
9
+          :value="item.value">
10
+        </el-option>
11
+      </el-select>
12
+      <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入停车场名称" style="margin-left: 15px;padding: 9px">
13
+        <el-button slot="append" class="searchbtn" @click="handleSearch" style="background-color: #2a2a2a"> 确认</el-button>
14
+      </el-input>
15
+    </div>
16
+    <div style="display: flex; justify-content: space-between;">
17
+      <div style="width: 50%; height: 300px">
18
+        <barchart
19
+          class="side-chart"
20
+          :autoStop="false"
21
+          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
22
+          legendIcon="react"
23
+          :bottom="30"
24
+          :xlabelFormat="xLabelFormat"
25
+          :top="60"
26
+          yAxisName="(个)"
27
+          :tooltip="tooltipFormat"
28
+          :dataset="bardata"
29
+          :encode="[
30
+            {x: 'month', y: 'hs', seriesName: '接入数量'},
31
+            {x: 'month', y: 'cs', seriesName: '异常数量'}]"
32
+          :labelSize="15"
33
+          id="fxdqhszzt"
34
+        />
35
+      </div>
36
+      <div style="width: 50%; height: 300px">
37
+        <div align="center" style="color: white">漯河市财政局停车场</div>
38
+        <piechart
39
+          class="model-pie-body"
40
+          id="chart1"
41
+          :roseType="false"
42
+          :radiusArr="['30%', '70%']"
43
+          :colorArr="modelPieColor"
44
+          :labelFormat="['{name|{b}}', '{sub|{@value}次 {d}%}', '{hr|}']"
45
+          :dataset="modelData.list"
46
+          :encode="{ itemName: 'name', value: 'value' }"
47
+        />
48
+      </div>
49
+    </div>
50
+  </div>
51
+</template>
52
+<script>
53
+import piechart from "@/components/pieChart";
54
+import barchart from "@/components/barChart";
55
+
56
+
57
+export default {
58
+  components: {
59
+    piechart,
60
+    barchart
61
+  },
62
+  data() {
63
+    return {
64
+        options: [{
65
+          value: '源汇区',
66
+          label: '源汇区'
67
+        }, {
68
+          value: '郾城区',
69
+          label: '郾城区'
70
+        }, {
71
+          value: '召陵区',
72
+          label: '召陵区'
73
+        }, {
74
+          value: '临颍县',
75
+          label: '临颍县'
76
+        }, {
77
+          value: '舞阳县',
78
+          label: '舞阳县'
79
+        }],
80
+      modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
81
+      modelPieColor1: ["#4382f6", "#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
82
+      modelData: {
83
+        list: [{name: '东南卡口', value: 320}, {name: '西北卡口', value:251}, {
84
+          name: '正北卡口',
85
+          value:185
86
+        }, {name: '正东卡口', value:120}, {name: '正南卡口', value:620}]
87
+      },
88
+      bardata: [{month: '市图书馆停车场', hs: 300, cs: 50}, {
89
+        month: '中山公园停车场',
90
+        hs: 200,
91
+        cs: 100
92
+      }, {month: '天地广场停车场', hs: 500, cs: 30}
93
+        , {month: '市中心医院停车场', hs: 450, cs: 50}, {month: '建设路停车场', hs: 355, cs: 90}],
94
+    }
95
+  },
96
+  mounted() {
97
+  },
98
+  watch: {},
99
+  methods: {
100
+    tooltipFormat(params) {
101
+      const type = params[0].seriesType;
102
+      const data = params[0].data;
103
+      // ${params[0].name || "--"}月:
104
+      return `<div class="line-tooltip">
105
+<div>${params[0].seriesName}: ${
106
+        params[0].data.hs || "--"}个</div>
107
+<div>${params[1].seriesName}: ${
108
+        params[0].data.cs || "--"}个</div>
109
+</div>`;
110
+    },
111
+    xLabelFormat(name) {
112
+      const nameArr = []
113
+      for (let i = 0; i < name.length; i += 7) {
114
+        nameArr.push(name.substring(i, i + 7))
115
+      }
116
+      return nameArr.join('\n');
117
+    }
118
+  }
119
+}
120
+</script>
121
+<style lang="scss" scoped>
122
+.body-wrapper {
123
+  width: 100%;
124
+  height: 100%;
125
+  box-sizing: border-box;
126
+  background: #0c0c0c;
127
+
128
+}
129
+
130
+.model-pie-body {
131
+  width: 100%;
132
+  height: 99%;
133
+}
134
+</style>

+ 89 - 0
src/pages/index/components/berth_peration_nalysis.vue

@@ -0,0 +1,89 @@
1
+<template>
2
+  <div class="body-wrapper">
3
+    <div class="page-container">
4
+      <h2 style="color: white">泊位运营分析</h2>
5
+      <div style="width: 99%; height: 350px">
6
+        <linechart
7
+          :autoStop="false"
8
+          :top="30"
9
+          :bottom="30"
10
+          :left="40"
11
+          :legendTop="0"
12
+          yAxisName="(停车数)"
13
+          :dataset="linedata"
14
+          :tooltipFormat="lineTooltipFormat"
15
+          :encode="[
16
+              { x: 'month', y: 'lastAmount', seriesName: '泊位盈余情况' },
17
+            ]"
18
+          id="sxcyfzqk"
19
+        />
20
+      </div>
21
+      <div style="width: 99%; height: 350px">
22
+        <linechart
23
+          :autoStop="false"
24
+          :top="30"
25
+          :bottom="30"
26
+          :left="40"
27
+          :legendTop="0"
28
+          yAxisName="(平均周转次数)"
29
+          :dataset="linedata1"
30
+          :tooltipFormat="lineTooltipFormat1"
31
+          :encode="[
32
+              { x: 'month', y: 'lastAmount', seriesName: '泊位周转率分析' }
33
+            ]"
34
+          id="sxcyfzqk1"
35
+        />
36
+      </div>
37
+    </div>
38
+    </div>
39
+</template>
40
+<script>
41
+import linechart from "@/components/lineChart";
42
+
43
+
44
+export default {
45
+  components: {
46
+    linechart
47
+  },
48
+  data() {
49
+    return {
50
+      linedata: [{month: '市图书馆停车场', lastAmount: 15}, {month: '中山公园停车场', lastAmount:32}
51
+        , {month: '天地广场停车场', lastAmount:22}, {month: '市中心医院停车场', lastAmount:64}, {month: '建设路停车场', lastAmount:18}],
52
+      linedata1: [{month: '市图书馆停车场', lastAmount: 2.3}, {month: '中山公园停车场', lastAmount:3.1}
53
+        , {month: '天地广场停车场', lastAmount:3.8}, {month: '市中心医院停车场', lastAmount:4.2}, {month: '建设路停车场', lastAmount:1.7}],
54
+    }
55
+  },
56
+  mounted() {
57
+  },
58
+  watch: {
59
+
60
+  },
61
+  methods: {
62
+    lineTooltipFormat(params) {
63
+      const data = params[0].data;
64
+      return `<div class="line-tooltip">
65
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
66
+        params[0].data.lastAmount || "--"
67
+      }</div>`;
68
+    },
69
+    lineTooltipFormat1(params) {
70
+      const data = params[0].data;
71
+      return `<div class="line-tooltip">
72
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
73
+        params[0].data.lastAmount || "--"
74
+      }</div>`;
75
+    }
76
+  }
77
+}
78
+</script>
79
+<style  lang="scss" scoped>
80
+.body-wrapper {
81
+  margin: 0;
82
+  padding: 0;
83
+  width: 100%;
84
+  height: 100%;
85
+  box-sizing: border-box;
86
+  background: #0c0c0c;
87
+}
88
+
89
+</style>

+ 561 - 0
src/pages/index/components/berth_road.vue

@@ -0,0 +1,561 @@
1
+<template>
2
+  <div class="body-wrapper">
3
+    <div style="display: flex; justify-content: space-between;">
4
+      <div style="width: 50%; height: 300px">
5
+        <linechart
6
+          :autoStop="false"
7
+          :top="30"
8
+          :bottom="30"
9
+          :left="40"
10
+          :legendTop="0"
11
+          yAxisName="(停车数)"
12
+          :dataset="linedata"
13
+          :tooltipFormat="lineTooltipFormat"
14
+          :encode="[
15
+              { x: 'month', y: 'lastAmount', seriesName: '泊位盈余情况' },
16
+            ]"
17
+          id="sxcyfzqk"
18
+        />
19
+      </div>
20
+      <div style="width: 50%; height: 300px">
21
+        <vtable
22
+          :showIdx="true"
23
+          class="tax-table"
24
+          :columns="riskColumns"
25
+          :datas="riskData"
26
+          :isAutoScroll="true"
27
+        />
28
+      </div>
29
+    </div>
30
+    <div style="display: flex; justify-content: space-between;">
31
+      <div style="width: 50%; height: 300px">
32
+        <linechart
33
+          :autoStop="false"
34
+          :top="30"
35
+          :bottom="30"
36
+          :left="40"
37
+          :legendTop="0"
38
+          yAxisName="(亿元)"
39
+          :dataset="linedata"
40
+          :tooltipFormat="lineTooltipFormat"
41
+          :encode="[
42
+              { x: 'month', y: 'lastYearAmount', seriesName: '去年' },
43
+              { x: 'month', y: 'thisYearAmount', seriesName: '当年' },
44
+            ]"
45
+          id="sxcyfzqk"
46
+        />
47
+      </div>
48
+      <div style="width: 50%; height: 300px">
49
+        <barchart
50
+          class="side-chart"
51
+          :autoStop="false"
52
+          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
53
+          legendIcon="react"
54
+          :bottom="30"
55
+          :xlabelFormat="xLabelFormat"
56
+          :top="60"
57
+          yAxisName="(户)"
58
+          :tooltip="tooltipFormat"
59
+          :dataset="bardata"
60
+          :encode="[
61
+            {x: 'month', y: 'hs', seriesName: '户数'},
62
+            {x: 'month', y: 'cs', seriesName: '次数'}]"
63
+          :labelSize="20"
64
+          id="fxdqhszzt"
65
+        />
66
+      </div>
67
+    </div>
68
+    <div style="width: 100%; height: 400px">
69
+      <!--      <emap style="width: 100%; height: 100%;"/>-->
70
+      <emap
71
+        class="map"
72
+        :labelFormat="mapLabelFormat"
73
+        :mapData="mapData"
74
+        id="map"
75
+        :tooltip="mapTooltipFormat"
76
+      />
77
+    </div>
78
+  </div>
79
+</template>
80
+<script>
81
+import piechart from "@/components/pieChart";
82
+import linechart from "@/components/lineChart";
83
+import barchart from "@/components/barChart";
84
+import vtable from "@/components/vtableNew";
85
+import emap from "@/components/emap";
86
+import api from "@/api/audit.js";
87
+
88
+
89
+export default {
90
+  components: {
91
+    piechart,
92
+    linechart,
93
+    barchart,
94
+    vtable,
95
+    emap
96
+  },
97
+  data() {
98
+    return {
99
+      modelPieColor: ["#4382f6","#9078f8"],
100
+      modelData: {
101
+        list: [{name: '占用位', value: 100}, {name: '空闲位', value: 100}]
102
+      },
103
+      linedata: [{month: '11', lastYearAmount: 20, thisYearAmount: 30}, {month: '12', lastYearAmount: 40, thisYearAmount: 50}],
104
+      bardata: [{month: '01', hs: 100, cs: 200},{month: '02', hs: 300, cs: 200},{month: '03', hs: 400, cs: 200},],
105
+      riskColumns: [
106
+        { name: "", rowIdx: "name", width: "40%" },
107
+        { name: "任务数(户)", rowIdx: "rws", origin: true },
108
+        { name: "已完成(户)", rowIdx: "ywc", origin: true },
109
+        { name: "风险命中率", rowIdx: "mzl" },
110
+        { name: "入库税款(万元)", rowIdx: "rksk" },
111
+      ],
112
+      riskData: [{
113
+        name: '1号',
114
+        rws: 222,
115
+        ywc: 333,
116
+        mzl: 444,
117
+        rksk: 555
118
+      },{
119
+        name: '2号',
120
+        rws: 222,
121
+        ywc: 333,
122
+        mzl: 444,
123
+        rksk: 555
124
+      },{
125
+        name: '3号',
126
+        rws: 222,
127
+        ywc: 333,
128
+        mzl: 444,
129
+        rksk: 555
130
+      },{
131
+        name: '4号',
132
+        rws: 222,
133
+        ywc: 333,
134
+        mzl: 444,
135
+        rksk: 555
136
+      },{
137
+        name: '5号',
138
+        rws: 222,
139
+        ywc: 333,
140
+        mzl: 444,
141
+        rksk: 555
142
+      },{
143
+        name: '6号',
144
+        rws: 222,
145
+        ywc: 333,
146
+        mzl: 444,
147
+        rksk: 555
148
+      },{
149
+        name: '7号',
150
+        rws: 222,
151
+        ywc: 333,
152
+        mzl: 444,
153
+        rksk: 555
154
+      },{
155
+        name: '8号',
156
+        rws: 222,
157
+        ywc: 333,
158
+        mzl: 444,
159
+        rksk: 555
160
+      }],
161
+      mapData: {}
162
+    }
163
+  },
164
+  mounted() {
165
+  },
166
+  watch: {
167
+
168
+  },
169
+  methods: {
170
+    mapLabelFormat() {
171
+      return {
172
+        show: true,
173
+        formatter: (param) => {
174
+          const data = this.mapData[param.data.code]
175
+          return [`{name|${param.name}}`, `{value|${data.shje}亿元}  {${data.tb>=0?'tbUp':'tbDown'}|${Math.abs(data.tb)}%}{${data.tb>=0?'up':'down'}|}`].join('\n')
176
+        },
177
+        padding: [5, 5],
178
+        // backgroundColor: {
179
+        //   image: '../../../../static/img/u231.png'
180
+        // },
181
+        rich: {
182
+          name: {color: '#ffffff', padding: [2,2,10,2]},
183
+          value: {color: '#FFD074'},
184
+          tbUp: {color: '#FF0060'},
185
+          tbDown: {color: '#66CC33'},
186
+          up: {backgroundColor: {image: '../../../../static/img/arrow-up.png'}, width: 30, height: 30},
187
+          down: {backgroundColor: {image: '../../../../static/img/arrow-down.png'}, width: 30, height: 30}
188
+        }
189
+      }
190
+    },
191
+
192
+    mapTooltipFormat({ data }) {
193
+      return ''
194
+      //   const zoneData = this.mapData[data.code];
195
+      //   return `<div class='map-tooltip back-mid-map-tooltip'>
196
+      //     <div class='zone-name'>${data.name}</div>
197
+      //     <div class="zone-value">
198
+      //       <div class="je-value">${zoneData.shje}万元</div>
199
+      //       <div class=${zoneData.tb >= 0 ? "red" : "green"}>${Math.abs(
200
+      //     zoneData.tb
201
+      //   )}%<img src=${
202
+      //     zoneData.tb >= 0
203
+      //       ? "../../../../static/img/arrow-up.png"
204
+      //       : "../../../../static/img/arrow-down.png"
205
+      //   } /></div>
206
+      //     </div>
207
+      //   </div>`;
208
+    },
209
+    lineTooltipFormat(params) {
210
+      const data = params[0].data;
211
+      return `<div class="line-tooltip">
212
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
213
+        params[0].data.lastYearAmount || "--"
214
+      }(件)</div>
215
+        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
216
+        params[0].data.thisYearAmount || "--"
217
+      }(件)</div>
218
+      </div>`;
219
+    },
220
+    xLabelFormat(name) {
221
+      const nameArr = []
222
+      for(let i=0; i<name.length; i+=7) {
223
+        nameArr.push(name.substring(i, i+7))
224
+      }
225
+      return nameArr.join('\n');
226
+    },
227
+    tooltipFormat(params) {
228
+      const type = params[0].seriesType;
229
+      const data = params[0].data;
230
+      // ${params[0].name || "--"}月:
231
+      return `<div class="${type==='bar' ? 'bar-tooltip-dz' : type==='line' ? 'line-tooltip-dz' : ''}">${data.hs || "--"}张</div>`;
232
+    },
233
+    format(percentage, num) {
234
+      return num
235
+    },
236
+    getResourceData() {
237
+      api.resourceData().then(res => {
238
+        if (res.success) {
239
+          this.menus[0].new = res.data.themeAdd
240
+          this.menus[0].history = res.data.themeTotal
241
+          this.menus[1].new = res.data.specialSubjectAdd
242
+          this.menus[1].history = res.data.specialSubjectTotal
243
+          this.menus[2].new = res.data.indexAdd
244
+          this.menus[2].history = res.data.indexTotal
245
+          this.menus[3].new = res.data.serviceAdd
246
+          this.menus[3].history = res.data.serviceTotal
247
+        }
248
+      })
249
+    },
250
+    getCollectTotal() {
251
+      api.collectTotal().then(res => {
252
+        if (res.success) {
253
+          this.collectTotal = res.data
254
+        }
255
+      })
256
+    },
257
+    getThemeSpecialIndex() {
258
+      api.themeSpecialIndex({resourceType: 'theme'}).then(res => {
259
+        if (res.success) {
260
+          this.barData = res.data
261
+        }
262
+      })
263
+      api.themeSpecialIndex({resourceType: 'specialSubject'}).then(res => {
264
+        if (res.success) {
265
+          this.specialAssetsData = res.data
266
+        }
267
+      })
268
+      api.themeSpecialIndex({resourceType: 'index'}).then(res => {
269
+        if (res.success) {
270
+          this.indicatorStatData = res.data
271
+        }
272
+      })
273
+    },
274
+    getApiRankData() {
275
+      api.apiRank().then(res => {
276
+        if (res.success) {
277
+          this.rankData = res.data
278
+        }
279
+      })
280
+    },
281
+    jumpToFilePage() {
282
+      this.$router.push({
283
+        name: "file",path: "/file"
284
+      });
285
+    },
286
+    jumpToApplyPage() {
287
+      this.$router.push({
288
+        name: "apply", path: "/apply"
289
+      });
290
+    },
291
+    getVisitsData() {
292
+      api.visits({}).then(res => {
293
+        if(res.success) {
294
+          this.visits = res.data
295
+        }
296
+      })
297
+    }
298
+  }
299
+}
300
+</script>
301
+<style  lang="scss" scoped>
302
+.body-wrapper {
303
+  width: 100%;
304
+  height: 100%;
305
+  box-sizing: border-box;
306
+  background: #0c0c0c;
307
+
308
+  .airport-logo {
309
+    width: 43%;
310
+    margin-left: -42px;
311
+    margin-top: 86px;
312
+  }
313
+
314
+  .input-wrapper {
315
+    width: 36%;
316
+    height: 53px;
317
+
318
+    /deep/ .el-input__inner {
319
+      height: 53px;
320
+    }
321
+
322
+    /deep/ .el-input-group__append {
323
+      background-color: #fff;
324
+      color: #80c2f7;
325
+      font-size: 18px;
326
+      font-weight: bold;
327
+    }
328
+  }
329
+
330
+  .header-row {
331
+    padding-top: 10px;
332
+    .data-repository, .my-collect{
333
+      float: left;
334
+    }
335
+    .data-repository{
336
+      width: 80%;
337
+      background: #fff;
338
+      padding: 20px 20px;
339
+      border-right: 1px solid #f2f2f2;
340
+      box-sizing: border-box;
341
+      .data-repo-title{
342
+        margin-bottom: 5px;
343
+        .icon{
344
+          display: inline-block;
345
+          width: 11px;
346
+          height: 25px;
347
+          background: #8bb2ff;
348
+          vertical-align: middle;
349
+        }
350
+      }
351
+      .data-repo-wrap{
352
+        display: flex;
353
+        justify-content: space-between;
354
+        padding-left: 14px;
355
+      }
356
+    }
357
+    .my-collect{
358
+      padding-top: 50px;
359
+      padding-right: 10px;
360
+      width: 20%;
361
+      box-sizing: border-box;
362
+      .menu-btn{
363
+        float: right;
364
+      }
365
+    }
366
+    .menu-btn {
367
+      height: 138px;
368
+      width: 100%;
369
+      padding: 20px;
370
+      box-shadow: 2px 5px 10px #ddd;
371
+      background: #fff;
372
+      border-radius: 5px;
373
+      >p {
374
+        font-size: 24px;
375
+        font-weight: bold;
376
+      }
377
+      .circle {
378
+        width: 10px;
379
+        height: 10px;
380
+        border-radius: 50%;
381
+        margin-right: 5px;
382
+      }
383
+      .circle1 {
384
+        border: 3px solid #084FC0;
385
+      }
386
+      .circle2 {
387
+        border: 3px solid #BE5205;
388
+      }
389
+      .circle3 {
390
+        border: 3px solid #58C627;
391
+      }
392
+      .circle4 {
393
+        border: 3px solid #BF44FF;
394
+      }
395
+      .sub-title {
396
+        display: flex;
397
+        align-items: center;
398
+      }
399
+      .middle-flex{
400
+        display: flex;
401
+        align-items: center;
402
+        justify-content: center;
403
+      }
404
+    }
405
+  }
406
+
407
+  .chart-wrap {
408
+    //margin-top: 10px;
409
+    padding: 20px;
410
+    height: 700px;
411
+    background: #fff;
412
+    display: flex;
413
+    flex-wrap: wrap;
414
+    flex-direction: row;
415
+    justify-content: space-between;
416
+    .chart-card {
417
+      width: 49.5%;
418
+      height: 30px;
419
+      .title {
420
+        font-size: 18px;
421
+        margin-bottom: 10px;
422
+      }
423
+      .chart {
424
+        width: 100%;
425
+        height: 280px;
426
+        box-shadow: 2px 5px 10px #ddd;
427
+      }
428
+      .rank-chart{
429
+        text-align: center;
430
+        box-sizing: border-box;
431
+        padding: 10px 20px 0;
432
+      }
433
+      .rank-block{
434
+        height: 238px;
435
+        overflow-y: auto;
436
+        scrollbar-width: none; /* firefox */
437
+      }
438
+      .rank-block::-webkit-scrollbar {
439
+        display: none; /* Chrome Safari */
440
+      }
441
+      .rank-item{
442
+        margin-bottom: 10px;
443
+        .icon, .right-block, .icon-three{
444
+          float: left;
445
+        }
446
+        .icon{
447
+          width: 18px;
448
+          height: 18px;
449
+          background: url('../../../assets/image/u211.svg');
450
+          font-size: 12px;
451
+          color: #FFFFFF;
452
+          line-height: 18px;
453
+        }
454
+        .icon-three{
455
+          width: 18px;
456
+          height: 26px;
457
+        }
458
+        .icon0{
459
+          background: url('../../../assets/image/u218.svg');
460
+          background-size: 100% 100%;
461
+        }
462
+        .icon1{
463
+          background: url('../../../assets/image/u219.svg');
464
+          background-size: 100% 100%;
465
+        }
466
+        .icon2{
467
+          background: url('../../../assets/image/u220.svg');
468
+          background-size: 100% 100%;
469
+        }
470
+        .right-block{
471
+          width: calc(100% - 18px);
472
+          .name-unit{
473
+            padding: 0 10px;
474
+            margin-bottom: 5px;
475
+          }
476
+          .name{
477
+            float: left;
478
+          }
479
+          .unit{
480
+            float: right;
481
+          }
482
+        }
483
+        /deep/ .progress .el-progress-bar__inner {
484
+          background-image: linear-gradient(
485
+              to right,
486
+              #00c8ff,
487
+              #009bff
488
+          );
489
+        }
490
+        /deep/ .progress0 .el-progress-bar__inner {
491
+          background-image: linear-gradient(
492
+              to right,
493
+              #ec5a48,
494
+              #d566d7
495
+          );
496
+        }
497
+        /deep/ .progress1 .el-progress-bar__inner {
498
+          background-image: linear-gradient(
499
+              to right,
500
+              #f9b101,
501
+              #ff6a62
502
+          );
503
+        }
504
+        /deep/ .progress2 .el-progress-bar__inner {
505
+          background-image: linear-gradient(
506
+              to right,
507
+              #00f576,
508
+              #009df7
509
+          );
510
+        }
511
+      }
512
+    }
513
+  }
514
+  .btn-space{
515
+    margin-left: 20px;
516
+  }
517
+  .visits-num{
518
+    padding: 20px;
519
+  }
520
+}
521
+.chart-body {
522
+  width: 100%;
523
+  height: calc(100% - 40px);
524
+  position: relative;
525
+  top: 35px;
526
+}
527
+.model-pie-body {
528
+  width: 100%;
529
+  height: 70%;
530
+}
531
+.bar-tooltip-dz {
532
+  padding: 5px 10px;
533
+  background: url("../../../../static/img/u261.png");
534
+  background-size: 100% 100%;
535
+  color: #333;
536
+  position: absolute;
537
+  top: 0;
538
+}
539
+.tax-table {
540
+  tbody {
541
+    tr {
542
+      &:nth-child(1),
543
+      &:nth-child(2),
544
+      &:nth-child(3) {
545
+        td {
546
+          &:nth-child(2) {
547
+            color: #ffd074;
548
+          }
549
+        }
550
+      }
551
+    }
552
+  }
553
+}
554
+.map {
555
+  margin-top: 20px;
556
+  width: 100%;
557
+  flex: 1;
558
+  height: 100%;
559
+}
560
+
561
+</style>

+ 114 - 0
src/pages/index/components/charge_business_analysis.vue

@@ -0,0 +1,114 @@
1
+<template>
2
+  <div class="body-wrapper">
3
+    <div style="width: 99%; height: 300px">
4
+      <h2 style="color: white">收费业务分析</h2>
5
+      <h4 style="color: white">收费数据分析</h4>
6
+      <barchart
7
+        class="side-chart"
8
+        :autoStop="false"
9
+        :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
10
+        legendIcon="react"
11
+        :bottom="30"
12
+        :xlabelFormat="xLabelFormat"
13
+        :top="60"
14
+        yAxisName="(元)"
15
+        :tooltip="tooltipFormat"
16
+        :dataset="bardata"
17
+        :encode="[
18
+            {x: 'month', y: 'hs', seriesName: '应收'},
19
+            {x: 'month', y: 'cs', seriesName: '实收'}]"
20
+        :labelSize="15"
21
+        id="fxdqhszzt"
22
+      />
23
+    </div>
24
+    <div style="display: flex; justify-content: space-between; margin-top: 7%">
25
+      <div style="width: 50%; height: 300px">
26
+        <h4 style="color: white">支付渠道分析</h4>
27
+        <piechart
28
+          class="model-pie-body"
29
+          id="chart1"
30
+          :roseType="false"
31
+          :radiusArr="['30%', '70%']"
32
+          :colorArr="modelPieColor"
33
+          :labelFormat="['{name|{b}}', '{sub|{@value}元 {d}%}', '{hr|}']"
34
+          :dataset="modelData.list"
35
+          :encode="{ itemName: 'name', value: 'value' }"
36
+        />
37
+      </div>
38
+      <div style="width: 50%; height: 300px">
39
+        <h4 style="color: white">催缴情况分析</h4>
40
+        <piechart
41
+          class="model-pie-body"
42
+          id="chart11"
43
+          :roseType="false"
44
+          :radiusArr="['30%', '70%']"
45
+          :colorArr="modelPieColor1"
46
+          :labelFormat="['{name|{b}}', '{sub|{@value}元 {d}%}', '{hr|}']"
47
+          :dataset="modelData.list1"
48
+          :encode="{ itemName: 'name', value: 'value' }"
49
+        />
50
+      </div>
51
+    </div>
52
+  </div>
53
+</template>
54
+<script>
55
+import piechart from "@/components/pieChart";
56
+import barchart from "@/components/barChart";
57
+
58
+
59
+export default {
60
+  components: {
61
+    piechart,
62
+    barchart
63
+  },
64
+  data() {
65
+    return {
66
+      modelPieColor: ["#4382f6","#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
67
+      modelPieColor1: ["#4382f6","#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
68
+      modelData: {
69
+        list: [{name: '微信支付', value: 5580}, {name: '支付宝支付', value:6155},{name: '银行卡支付', value:3160}, {name: '现金支付', value:4200},{name: '其他', value:800}],
70
+        list1: [{name: '已催缴', value: 600}, {name: '未催缴', value:2350},{name: '部分催缴', value:1100}, {name: '催缴无效', value: 250}]
71
+      },
72
+      bardata: [{month: '市图书馆停车场', hs: 2350, cs: 2150},{month: '中山公园停车场', hs:3600, cs:3160},{month: '天地广场停车场', hs:2500, cs:2170}
73
+        ,{month: '市中心医院停车场', hs:3450, cs:3010},{month: '建设路停车场', hs:3155, cs:2950}],
74
+    }
75
+  },
76
+  mounted() {
77
+  },
78
+  watch: {
79
+
80
+  },
81
+  methods: {
82
+    tooltipFormat(params) {
83
+      const type = params[0].seriesType;
84
+      const data = params[0].data;
85
+      return `<div class="line-tooltip">
86
+<div>${params[0].seriesName}: ${
87
+        params[0].data.hs || "--"}元</div>
88
+<div>${params[1].seriesName}: ${
89
+        params[0].data.cs || "--"}元</div>
90
+</div>`;
91
+    },
92
+    xLabelFormat(name) {
93
+      const nameArr = []
94
+      for(let i=0; i<name.length; i+=7) {
95
+        nameArr.push(name.substring(i, i+7))
96
+      }
97
+      return nameArr.join('\n');
98
+    }
99
+  }
100
+}
101
+</script>
102
+<style  lang="scss" scoped>
103
+.body-wrapper {
104
+  width: 100%;
105
+  height: 100%;
106
+  box-sizing: border-box;
107
+  background: #0c0c0c;
108
+
109
+}
110
+.model-pie-body {
111
+  width: 100%;
112
+  height: 99%;
113
+}
114
+</style>

+ 4 - 1
src/pages/index/layouts/indexLayout.vue

@@ -50,6 +50,10 @@ export default {
50 50
         {name: '企业服务监管', url: '/enterprise_service'},
51 51
         {name: '数据对接', url: '/data_docking'},
52 52
         {name: '泊位基础情况', url: '/berths_information'},
53
+        {name: '泊位运营分析', url: '/berth_peration_nalysis'},
54
+        {name: '收费业务分析', url: '/charge_business_analysis'},
55
+        {name: '接入数据分析', url: '/access_data_analysis'},
56
+        {name: '道路(路内)泊位主题', url: '/berth_road'},
53 57
       ]
54 58
     }
55 59
   },
@@ -75,7 +79,6 @@ export default {
75 79
 <style scoped>
76 80
 .home-wrapper {
77 81
   position: absolute;
78
-  top: 60px;
79 82
   width: 100%;
80 83
   height: 100%;
81 84
   background-size: cover;

+ 20 - 0
src/router/index.js

@@ -85,6 +85,26 @@ export default new Router({
85 85
           path: "/berths_information",
86 86
           component: () => import("../pages/index/components/berths_information.vue")
87 87
         },
88
+        {
89
+          name: "berth_peration_nalysis",
90
+          path: "/berth_peration_nalysis",
91
+          component: () => import("../pages/index/components/berth_peration_nalysis.vue")
92
+        },
93
+        {
94
+          name: "charge_business_analysis",
95
+          path: "/charge_business_analysis",
96
+          component: () => import("../pages/index/components/charge_business_analysis.vue")
97
+        },
98
+        {
99
+          name: "access_data_analysis",
100
+          path: "/access_data_analysis",
101
+          component: () => import("../pages/index/components/access_data_analysis.vue")
102
+        },
103
+        {
104
+          name: "berth_road",
105
+          path: "/berth_road",
106
+          component: () => import("../pages/index/components/berth_road.vue")
107
+        },
88 108
       ]
89 109
     }
90 110
   ]