Почетна Преглед Помоћ
Регистрација Пријавите Се
yuhao
/
shujudaping_yidong
Прати 1
Волим 0
Креирај огранак 0
Files Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

数据大屏移动端

yuhao пре 2 година
родитељ
4592722986
комит
03d4577e9b
24 измењених фајлова са 13292 додато и 0 уклоњено
Подељен поглед Покажи статистику Diff
  1. 23 0
      .gitignore
  2. 10 0
      .postcssrc.js
  3. 19 0
      README.md
  4. 5 0
      babel.config.js
  5. 11868 0
      package-lock.json
  6. 34 0
      package.json
  7. BIN
      public/favicon.ico
  8. 18 0
      public/index.html
  9. 21 0
      src/App.vue
  10. 15 0
      src/api/index.js
  11. 27 0
      src/main.js
  12. 13 0
      src/router/index.js
  13. 15 0
      src/store/index.js
  14. 4 0
      src/style/index.css
  15. 7 0
      src/util/request.js
  16. 91 0
      src/views/cardExpend/cardExpend.vue
  17. 404 0
      src/views/index.vue
  18. 94 0
      src/views/manage/manage.vue
  19. 114 0
      src/views/productData/productData.vue
  20. 87 0
      src/views/productRatio/productRatio.vue
  21. 135 0
      src/views/programAmount/programAmount.vue
  22. 97 0
      src/views/projectData/projectData.vue
  23. 101 0
      src/views/projectRatio/projectRatio.vue
  24. 90 0
      src/views/rechargeData/rechargeData.vue

+ 23 - 0
.gitignore
Прегледај датотеку 

@@ -0,0 +1,23 @@
1 
+.DS_Store
2 
+node_modules
3 
+/dist
4 
+
5 
+
6 
+# local env files
7 
+.env.local
8 
+.env.*.local
9 
+
10 
+# Log files
11 
+npm-debug.log*
12 
+yarn-debug.log*
13 
+yarn-error.log*
14 
+pnpm-debug.log*
15 
+
16 
+# Editor directories and files
17 
+.idea
18 
+.vscode
19 
+*.suo
20 
+*.ntvs*
21 
+*.njsproj
22 
+*.sln
23 
+*.sw?

+ 10 - 0
.postcssrc.js
Прегледај датотеку 

@@ -0,0 +1,10 @@
1 
+module.exports = {
2 
+    "plugins": {
3 
+      "postcss-pxtorem": {
4 
+        rootValue: 37.5, // Vant 官方根字体大小是 37.5, 表示375设计稿
5 
+        propList: ['*'],
6 
+        selectorBlackList: ['.norem','van'], // 过滤掉.norem-开头的class，不进行rem转换
7 
+        exclude: /web/i     //忽略 web下所有文件
8 
+      }
9 
+    }
10 
+  }

+ 19 - 0
README.md
Прегледај датотеку 

@@ -0,0 +1,19 @@
1 
+# yidongdaping
2 
+
3 
+## Project setup
4 
+```
5 
+npm install
6 
+```
7 
+
8 
+### Compiles and hot-reloads for development
9 
+```
10 
+npm run serve
11 
+```
12 
+
13 
+### Compiles and minifies for production
14 
+```
15 
+npm run build
16 
+```
17 
+
18 
+### Customize configuration
19 
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 5 - 0
babel.config.js
Прегледај датотеку 

@@ -0,0 +1,5 @@
1 
+module.exports = {
2 
+  presets: [
3 
+    '@vue/cli-plugin-babel/preset'
4 
+  ]
5 
+}

Разлика између датотеке није приказан због своје велике величине
+ 11868 - 0
package-lock.json


+ 34 - 0
package.json
Прегледај датотеку 

@@ -0,0 +1,34 @@
1 
+{
2 
+  "name": "yidongdaping",
3 
+  "version": "0.1.0",
4 
+  "private": true,
5 
+  "scripts": {
6 
+    "serve": "vue-cli-service serve",
7 
+    "build": "vue-cli-service build"
8 
+  },
9 
+  "dependencies": {
10 
+    "axios": "^0.27.2",
11 
+    "core-js": "^3.6.5",
12 
+    "echarts": "^5.3.3",
13 
+    "lib-flexible": "^0.3.2",
14 
+    "vant": "^2.12.48",
15 
+    "vue": "^2.6.11",
16 
+    "vue-router": "^3.2.0",
17 
+    "vuex": "^3.4.0"
18 
+  },
19 
+  "devDependencies": {
20 
+    "@vue/cli-plugin-babel": "~4.5.19",
21 
+    "@vue/cli-plugin-router": "~4.5.19",
22 
+    "@vue/cli-plugin-vuex": "~4.5.19",
23 
+    "@vue/cli-service": "~4.5.19",
24 
+    "less": "^3.0.4",
25 
+    "less-loader": "^5.0.0",
26 
+    "postcss-pxtorem": "^5.1.1",
27 
+    "vue-template-compiler": "^2.6.11"
28 
+  },
29 
+  "browserslist": [
30 
+    "> 1%",
31 
+    "last 2 versions",
32 
+    "not dead"
33 
+  ]
34 
+}

BIN
public/favicon.ico
Прегледај датотеку


+ 18 - 0
public/index.html
Прегледај датотеку 

@@ -0,0 +1,18 @@
1 
+<!DOCTYPE html>
2 
+<html lang="">
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
+    <title><%= htmlWebpackPlugin.options.title %></title>
9 
+    <!-- <script type="text/javascript" src="https://ydcommon.51yund.com/test_web_hd/vendor/vconsole.min.js"></script> -->
10 
+  </head>
11 
+  <body>
12 
+    <noscript>
13 
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 
+    </noscript>
15 
+    <div id="app"></div>
16 
+    <!-- built files will be auto injected -->
17 
+  </body>
18 
+</html>

+ 21 - 0
src/App.vue
Прегледај датотеку 

@@ -0,0 +1,21 @@
1 
+<template>
2 
+<div>
3 
+  <index></index>
4 
+</div>
5 
+</template>
6 
+
7 
+<script>
8 
+import index from '../src/views/index.vue'
9 
+export default {
10 
+  components:{index},
11 
+  data(){
12 
+    return{
13 
+
14 
+    }
15 
+  },
16 
+}
17 
+</script>
18 
+
19 
+<style scoped>
20 
+
21 
+</style>

+ 15 - 0
src/api/index.js
Прегледај датотеку 

@@ -0,0 +1,15 @@
1 
+import request from "../util/request";
2 
+
3 
+export const getStoreList = ()=>{
4 
+    return request({
5 
+        url:'/v2/api/large/store',
6 
+        method:'get',
7 
+    })
8 
+}
9 
+export const getData = (params)=>{
10 
+    return request({
11 
+        url:'/v2/api/large/statistics',
12 
+        method:'get',
13 
+        params
14 
+    })
15 
+}

+ 27 - 0
src/main.js
Прегледај датотеку 

@@ -0,0 +1,27 @@
1 
+import Vue from 'vue'
2 
+import App from './App.vue'
3 
+import router from './router'
4 
+import store from './store'
5 
+import 'lib-flexible/flexible'
6 
+import './style/index.css'
7 
+import axios from 'axios'
8 
+import *as echarts from 'echarts'//引入echarts
9 
+// 导入vant
10 
+import 'vant/lib/index.css'
11 
+import { Button,Calendar,Icon,Popup,Cell,CellGroup  } from 'vant' // 引入Button组件
12 
+
13 
+Vue.use(Cell);
14 
+Vue.use(CellGroup)
15 
+Vue.use(Popup);
16 
+Vue.use(Icon);
17 
+Vue.use(Calendar);
18 
+Vue.use(Button) // 全局注册
19 
+Vue.prototype.$echarts = echarts//挂载到Vue实例上，方便全局使用
20 
+Vue.prototype.$axios = axios
21 
+Vue.config.productionTip = false
22 
+
23 
+new Vue({
24 
+  router,
25 
+  store,
26 
+  render: h => h(App)
27 
+}).$mount('#app')

+ 13 - 0
src/router/index.js
Прегледај датотеку 

@@ -0,0 +1,13 @@
1 
+import Vue from 'vue'
2 
+import VueRouter from 'vue-router'
3 
+
4 
+Vue.use(VueRouter)
5 
+
6 
+const routes = [
7 
+]
8 
+
9 
+const router = new VueRouter({
10 
+  routes
11 
+})
12 
+
13 
+export default router

+ 15 - 0
src/store/index.js
Прегледај датотеку 

@@ -0,0 +1,15 @@
1 
+import Vue from 'vue'
2 
+import Vuex from 'vuex'
3 
+
4 
+Vue.use(Vuex)
5 
+
6 
+export default new Vuex.Store({
7 
+  state: {
8 
+  },
9 
+  mutations: {
10 
+  },
11 
+  actions: {
12 
+  },
13 
+  modules: {
14 
+  }
15 
+})

+ 4 - 0
src/style/index.css
Прегледај датотеку 

@@ -0,0 +1,4 @@
1 
+*{
2 
+    margin: 0;
3 
+    padding: 0;
4 
+}

+ 7 - 0
src/util/request.js
Прегледај датотеку 

@@ -0,0 +1,7 @@
1 
+import axios from 'axios'
2 
+
3 
+const request = axios.create({
4 
+    baseURL:'https://api.ijolijoli.com/'
5 
+    // baseURL:'https://test-api.ijolijoli.com/'
6 
+})
7 
+export default request

+ 91 - 0
src/views/cardExpend/cardExpend.vue
Прегледај датотеку 

@@ -0,0 +1,91 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {};
12 
+  },
13 
+  methods: {
14 
+    //先定义个方法
15 
+    myEcharts() {
16 
+      //把echarts绑定到显示元素上
17 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
18 
+      //设置图表属性
19 
+      //   经营数据
20 
+      const option = {
21 
+        color: ["#42d3a7"],
22 
+        title: {
23 
+          text: "次卡消耗数据",
24 
+          left: "center",
25 
+          // textStyle: {
26 
+          //   color: "#6d767e",
27 
+          // },
28 
+        },
29 
+
30 
+        grid: {
31 
+          left: 55,
32 
+        },
33 
+        xAxis: {
34 
+          type: "category",
35 
+          data: ["次卡购买总次数", "次卡剩余人数", "次卡剩余总数"],
36 
+          axisLabel: { interval: 0, rotate: 30 },
37 
+        },
38 
+        yAxis: {
39 
+          type: "value",
40 
+        },
41 
+        series: [
42 
+          {
43 
+            data: [
44 
+              this.listData.time_card_time,
45 
+              this.listData.time_card_residue_people,
46 
+              this.listData.time_card_residue,
47 
+            ],
48 
+            type: "bar",
49 
+            itemStyle: {
50 
+              normal: {
51 
+                label: {
52 
+                  show: true, //开启显示数值
53 
+                  position: "top", //数值在上方显示
54 
+                  textStyle: {
55 
+                    //数值样式
56 
+                    color: "#9b9ca2", //字体颜色
57 
+                    fontSize: 14, //字体大小
58 
+                  },
59 
+                },
60 
+              },
61 
+            },
62 
+          },
63 
+        ],
64 
+      };
65 
+      //数据绑定到表格
66 
+      myChart.setOption(option);
67 
+      window.addEventListener("resize", function () {
68 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
69 
+      });
70 
+    },
71 
+  },
72 
+  // 监听父组件传过来的值的变化
73 
+  watch: {
74 
+    listData: {
75 
+      handler(val) {
76 
+        this.myEcharts();
77 
+      },
78 
+    },
79 
+  },
80 
+  mounted() {
81 
+    this.myEcharts();
82 
+  },
83 
+};
84 
+</script>
85 
+
86 
+<style scoped>
87 
+.map {
88 
+  width: 100%;
89 
+  height: 300px;
90 
+}
91 
+</style>

+ 404 - 0
src/views/index.vue
Прегледај датотеку 

@@ -0,0 +1,404 @@
1 
+<template>
2 
+  <div class="box">
3 
+    <!-- 标题 -->
4 
+    <div class="title">jolijoli实时数据大屏</div>
5 
+    <!-- 筛选时间 -->
6 
+    <div class="selectBox">
7 
+      <!-- 选择时间段 -->
8 
+      <div class="selectBox-center">
9 
+        <van-button @click="selectTime">{{ value1 }}</van-button>
10 
+        <van-calendar
11 
+          v-model="show"
12 
+          type="range"
13 
+          @confirm="onConfirm"
14 
+          color="#fa7d22"
15 
+          :min-date="minDate"
16 
+          :max-date="maxDate"
17 
+          :allow-same-day="true"
18 
+        />
19 
+        <!-- 刷新按钮 -->
20 
+        <button
21 
+          :class="{ refresh, bgc: istrue }"
22 
+          :disabled="istrue"
23 
+          @click="refresh"
24 
+        >
25 
+          {{ button }}
26 
+        </button>
27 
+      </div>
28 
+      <div class="selectBox-top">
29 
+        <button
30 
+          @click="yesterday(0)"
31 
+          :class="{ bgc: activeClass == 0 }"
32 
+          :disabled="activeClass == 0"
33 
+        >
34 
+          昨天
35 
+        </button>
36 
+        <button
37 
+          @click="thisWeek(1)"
38 
+          :class="{ bgc: activeClass == 1 }"
39 
+          :disabled="activeClass == 1"
40 
+        >
41 
+          本周
42 
+        </button>
43 
+        <button
44 
+          @click="thisMonth(2)"
45 
+          :class="{ bgc: activeClass == 2 }"
46 
+          :disabled="activeClass == 2"
47 
+        >
48 
+          本月
49 
+        </button>
50 
+        <!-- 选择店铺 -->
51 
+        <button
52 
+          class="selectStore"
53 
+          style="width: auto; padding: 0 4px"
54 
+          @click="Popup"
55 
+        >
56 
+          {{ store }} <van-icon name="arrow-down" />
57 
+        </button>
58 
+        <van-popup
59 
+          v-model="showPopup"
60 
+          round
61 
+          position="bottom"
62 
+          :style="{ height: '30%' }"
63 
+        >
64 
+          <van-cell-group>
65 
+            <van-cell
66 
+              @click="changeStore(item.store_name)"
67 
+              v-for="(item, index) in storeList"
68 
+              :value="item.store_name"
69 
+              :key="index"
70 
+            />
71 
+          </van-cell-group>
72 
+        </van-popup>
73 
+      </div>
74 
+    </div>
75 
+    <!-- echarts图 -->
76 
+    <div class="echarts" style="overflow-y: scroll">
77 
+      <programAmount v-if="listData" :listData="listData"></programAmount>
78 
+    </div>
79 
+    <div class="echarts">
80 
+      <manage v-if="listData" :listData="listData"></manage>
81 
+    </div>
82 
+    <div class="echarts">
83 
+      <projectData v-if="listData" :listData="listData"></projectData>
84 
+    </div>
85 
+    <div class="echarts">
86 
+      <rechargeData v-if="listData" :listData="listData"></rechargeData>
87 
+    </div>
88 
+    <div class="echarts">
89 
+      <cardExpend v-if="listData" :listData="listData"></cardExpend>
90 
+    </div>
91 
+    <div class="echarts">
92 
+      <productData v-if="listData" :listData="listData"></productData>
93 
+    </div>
94 
+    <div class="echarts">
95 
+      <productRatio
96 
+        v-if="listData"
97 
+        :listData="listData.product_ratio"
98 
+      ></productRatio>
99 
+    </div>
100 
+    <div class="echarts">
101 
+      <projectRatio
102 
+        v-if="listData"
103 
+        :listData="listData.project_proportion"
104 
+      ></projectRatio>
105 
+    </div>
106 
+  </div>
107 
+</template>
108 
+
109 
+<script>
110 
+import { getStoreList, getData } from "../api/index";
111 
+import manage from "./manage/manage.vue";
112 
+import projectData from "./projectData/projectData.vue";
113 
+import rechargeData from "./rechargeData/rechargeData.vue";
114 
+import cardExpend from "./cardExpend/cardExpend.vue";
115 
+import productData from "./productData/productData.vue";
116 
+import productRatio from "./productRatio/productRatio.vue";
117 
+import projectRatio from "./projectRatio/projectRatio.vue";
118 
+import programAmount from "./programAmount/programAmount.vue";
119 
+export default {
120 
+  components: {
121 
+    manage,
122 
+    projectData,
123 
+    rechargeData,
124 
+    cardExpend,
125 
+    productData,
126 
+    productRatio,
127 
+    projectRatio,
128 
+    programAmount,
129 
+  },
130 
+  data() {
131 
+    return {
132 
+      show: false, //选择时间弹出窗控制
133 
+      showPopup: false, //选择店铺弹出窗控制
134 
+      listData: "", //数据列表
135 
+      store: "全部店铺",
136 
+      storeList: "", //店铺列表
137 
+      storeId: "", //当前店铺id
138 
+      minDate: new Date(2021, 0, 1), //选择时间段最早日期
139 
+      maxDate: new Date(), //选择时间段最晚日期
140 
+      activeClass: 3, //按钮动态类
141 
+      start_time: "", //开始时间
142 
+      end_time: "", //结束时间
143 
+      value1: "", //选择日期当前时间
144 
+      count: 10, //点击刷新倒计时
145 
+      istrue: false, //刷新禁用
146 
+      button: "刷新", //按钮提交文案
147 
+    };
148 
+  },
149 
+  methods: {
150 
+    // 选择昨天
151 
+    yesterday(e) {
152 
+      this.activeClass = e;
153 
+      var startTime = this.getDay1(-1, "-") + " 00:00:00"; //    -1 代表前一天，-2前两天...
154 
+      var endTime = this.getDay1(-1, "-") + " 23:59:59"; //    -1 代表前一天，-2前两天...
155 
+      this.start_time = Date.parse(startTime) / 1000;
156 
+      this.end_time = Date.parse(endTime) / 1000;
157 
+      var startTime1 = this.getDay1(-1, "-");
158 
+      var endTime1 = this.getDay1(-1, "-");
159 
+      this.value1 = `${startTime1} 至 ${endTime1}`;
160 
+      this.getListData();
161 
+    },
162 
+    //本周
163 
+    thisWeek(e) {
164 
+      this.activeClass = e;
165 
+      var now = new Date();
166 
+      var nowDayOfWeek = now.getDay() == 0 ? 6 : now.getDay() - 1;
167 
+      var startTime =
168 
+        this.getDateStr(
169 
+          new Date(now.getTime() - nowDayOfWeek * 24 * 60 * 60 * 1000)
170 
+        ) + " 00:00:00";
171 
+      var endTime = this.getDateStr(now) + " 23:59:59";
172 
+      this.start_time = Date.parse(startTime) / 1000;
173 
+      this.end_time = Date.parse(endTime) / 1000;
174 
+      var startTime1 = this.getDateStr(
175 
+        new Date(now.getTime() - nowDayOfWeek * 24 * 60 * 60 * 1000)
176 
+      );
177 
+      var endTime1 = this.getDateStr(now);
178 
+      this.value1 = `${startTime1} 至 ${endTime1}`;
179 
+      this.getListData();
180 
+    },
181 
+    // 本月
182 
+    thisMonth(e) {
183 
+      this.activeClass = e;
184 
+      var now = new Date();
185 
+      var nowDay = now.getDate() - 1;
186 
+      var startTime =
187 
+        this.getDateStr(
188 
+          new Date(now.getTime() - nowDay * 24 * 60 * 60 * 1000)
189 
+        ) + " 00:00:00";
190 
+      var endTime = this.getDateStr(now) + " 23:59:59";
191 
+      this.start_time = Date.parse(startTime) / 1000;
192 
+      this.end_time = Date.parse(endTime) / 1000;
193 
+      var startTime1 = this.getDateStr(
194 
+        new Date(now.getTime() - nowDay * 24 * 60 * 60 * 1000)
195 
+      );
196 
+      var endTime1 = this.getDateStr(now);
197 
+      this.value1 = `${startTime1} 至 ${endTime1}`;
198 
+      this.getListData();
199 
+    },
200 
+    // 封装获取时间
201 
+    getDateStr(now = new Date()) {
202 
+      var year = now.getFullYear(); // 年
203 
+      var month = now.getMonth() + 1; // 月
204 
+      var day = now.getDate(); // 日
205 
+      if (day < 10) {
206 
+        day = "0" + day;
207 
+      }
208 
+
209 
+      if (month < 10) {
210 
+        month = "0" + month;
211 
+      }
212 
+      return year + "-" + month + "-" + day;
213 
+    },
214 
+    // 封装获取昨天时间
215 
+    getDay1(num, str) {
216 
+      var today = new Date();
217 
+      var nowTime = today.getTime();
218 
+      var ms = 24 * 3600 * 1000 * num;
219 
+      today.setTime(parseInt(nowTime + ms));
220 
+      var oYear = today.getFullYear();
221 
+      var oMoth = (today.getMonth() + 1).toString();
222 
+      if (oMoth.length <= 1) oMoth = "0" + oMoth;
223 
+      var oDay = today.getDate().toString();
224 
+      if (oDay.length <= 1) oDay = "0" + oDay;
225 
+      return oYear + str + oMoth + str + oDay;
226 
+    },
227 
+    // 选择时间弹出窗控制
228 
+    selectTime() {
229 
+      this.show = true;
230 
+    },
231 
+    //选择店铺弹出窗控制
232 
+    Popup() {
233 
+      this.showPopup = true;
234 
+    },
235 
+    // 获取店铺列表
236 
+    async getStoreList() {
237 
+      let res = await getStoreList();
238 
+      let allStore = { id: "", store_name: "全部店铺" };
239 
+      res.data.data.unshift(allStore);
240 
+      this.storeList = res.data.data;
241 
+    },
242 
+    // 切换店铺
243 
+    changeStore(e) {
244 
+      this.store = e;
245 
+      this.showPopup = false;
246 
+      this.storeList.filter((item) => {
247 
+        if (item.store_name == e) {
248 
+          this.storeId = item.id;
249 
+        }
250 
+      });
251 
+      this.getListData();
252 
+    },
253 
+    // 确定按钮选择时间
254 
+    onConfirm(date) {
255 
+      const [start, end] = date;
256 
+      this.show = false;
257 
+      this.value1 = `${this.getDateStr(start)} 至 ${this.getDateStr(end)}`;
258 
+      var startTime = this.getDateStr(date[0]) + " 00:00:00";
259 
+      var endTime = this.getDateStr(date[1]) + " 23:59:59";
260 
+      var start_time = Date.parse(startTime) / 1000;
261 
+      var end_time = Date.parse(endTime) / 1000;
262 
+      this.start_time = start_time;
263 
+      this.end_time = end_time;
264 
+      console.log(start_time, end_time);
265 
+      this.getListData();
266 
+    },
267 
+    // 获取图表数据
268 
+    async getListData() {
269 
+      let res = await getData({
270 
+        store_id: this.storeId || "",
271 
+        start_time: this.start_time,
272 
+        end_time: this.end_time,
273 
+      });
274 
+      console.log(res);
275 
+      this.listData = res.data.data;
276 
+    },
277 
+    // 刷新页面
278 
+    refresh() {
279 
+      this.getListData();
280 
+      this.istrue = true;
281 
+      let interval = setInterval(() => {
282 
+        this.count--;
283 
+        this.button = this.count + "秒";
284 
+        if (this.count == 0) {
285 
+          clearInterval(interval);
286 
+          this.istrue = false;
287 
+          this.count = 10;
288 
+          this.button = "刷新";
289 
+        }
290 
+      }, 1000);
291 
+    },
292 
+  },
293 
+  async created() {
294 
+    this.value1 = `${this.getDateStr()} 至 ${this.getDateStr()}`;
295 
+    // 获取店铺列表
296 
+    this.getStoreList();
297 
+    // 获取当天时间
298 
+    var now = new Date();
299 
+    var endTime = this.getDateStr(now) + " 23:59:59";
300 
+    var startTime = this.getDateStr(now) + " 00:00:00";
301 
+    var start_time = Date.parse(startTime) / 1000;
302 
+    var end_time = Date.parse(endTime) / 1000;
303 
+    this.start_time = start_time;
304 
+    this.end_time = end_time;
305 
+    //   获取当天所有店铺数据
306 
+    let res = await getData({
307 
+      store_id: "",
308 
+      start_time: start_time,
309 
+      end_time: end_time,
310 
+    });
311 
+    if (res.status == 200) {
312 
+      this.listData = res.data.data;
313 
+    }
314 
+  },
315 
+};
316 
+</script>
317 
+
318 
+<style lang='less' scoped>
319 
+.box {
320 
+  height: 100%;
321 
+  width: 100vw;
322 
+  background-color: #f7f8fa;
323 
+  padding: 0 20px 20px 20px;
324 
+  box-sizing: border-box;
325 
+}
326 
+.title {
327 
+  height: 50px;
328 
+  font-size: 20px;
329 
+  text-align: center;
330 
+  line-height: 50px;
331 
+  color: #fa7d22;
332 
+  font-weight: 700;
333 
+}
334 
+//选择日期
335 
+.selectBox {
336 
+  height: 130px;
337 
+  width: 100%;
338 
+  background-color: white;
339 
+  border-radius: 10px;
340 
+  padding: 15px;
341 
+  box-sizing: border-box;
342 
+  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
343 
+  display: flex;
344 
+  flex-direction: column;
345 
+  justify-content: space-around;
346 
+  .selectBox-top {
347 
+    display: flex;
348 
+    justify-content: space-around;
349 
+    button {
350 
+      color: white;
351 
+      background-color: #fa7d22;
352 
+      border: 1px solid #fa7d22;
353 
+      height: 25px;
354 
+      width: 50px;
355 
+      // margin-left: 8px;
356 
+      border-radius: 3px;
357 
+      font-size: 12px;
358 
+    }
359 
+  }
360 
+  .selectBox-center {
361 
+    width: 100%;
362 
+    display: flex;
363 
+    align-items: center;
364 
+    justify-content: space-around;
365 
+    .van-button {
366 
+      color: #606266;
367 
+      background-color: white;
368 
+      border: 1px solid #fa7d22;
369 
+      height: 30px;
370 
+      width: 230px;
371 
+      border-radius: 3px;
372 
+      font-size: 14px;
373 
+    }
374 
+    button {
375 
+      color: white;
376 
+      background-color: #fa7d22;
377 
+      border: 1px solid #fa7d22;
378 
+      height: 25px;
379 
+      width: 50px;
380 
+      border-radius: 3px;
381 
+      font-size: 12px;
382 
+    }
383 
+  }
384 
+}
385 
+// echarts图
386 
+.echarts {
387 
+  height: 330px;
388 
+  width: 100%;
389 
+  background-color: white;
390 
+  border-radius: 10px;
391 
+  padding: 15px;
392 
+  box-sizing: border-box;
393 
+  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
394 
+  display: flex;
395 
+  flex-direction: column;
396 
+  justify-content: space-between;
397 
+  margin-top: 15px;
398 
+}
399 
+// 点击选中后背景颜色
400 
+.bgc {
401 
+  background-color: #9fa0a6 !important;
402 
+  border: #9fa0a6 !important;
403 
+}
404 
+</style>

+ 94 - 0
src/views/manage/manage.vue
Прегледај датотеку 

@@ -0,0 +1,94 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {
12 
+      num1: 80,
13 
+      num2: 100,
14 
+    };
15 
+  },
16 
+  methods: {
17 
+    //先定义个方法
18 
+    myEcharts() {
19 
+      //把echarts绑定到显示元素上
20 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
21 
+      //设置图表属性
22 
+      //   经营数据
23 
+      const option = {
24 
+        grid: {
25 
+    left:40
26 
+},
27 
+        title: {
28 
+          text: "经营数据金额",
29 
+          left: "center",
30 
+          // textStyle: {
31 
+          //   color: "#6d767e",
32 
+          // },
33 
+        },
34 
+        xAxis: {
35 
+          type: "category",
36 
+          data: ["收入金额", "项目付费金额", "次卡付费金额", "美妆收入金额", "充值收入金额"],
37 
+          axisLabel: { interval: 0, rotate: 30 },
38 
+        },
39 
+        yAxis: {
40 
+          type: "value",
41 
+        },
42 
+        series: [
43 
+          {
44 
+            data: [
45 
+              this.listData.total_money,
46 
+              this.listData.project_order,
47 
+              this.listData.time_card_order,
48 
+              this.listData.goods_order,
49 
+              this.listData.recharge,
50 
+            ],
51 
+            type: "bar",
52 
+            itemStyle: {
53 
+              normal: {
54 
+                label: {
55 
+                  show: true, //开启显示数值
56 
+                  position: "top", //数值在上方显示
57 
+                  textStyle: {
58 
+                    //数值样式
59 
+                    color: "#9b9ca2", //字体颜色
60 
+                    fontSize: 14, //字体大小
61 
+                  },
62 
+                },
63 
+              },
64 
+            },
65 
+          },
66 
+        ],
67 
+      };
68 
+      //数据绑定到表格
69 
+      myChart.setOption(option);
70 
+            window.addEventListener("resize", function () {
71 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
72 
+      });
73 
+    },
74 
+  },
75 
+    // 监听父组件传过来的值的变化
76 
+  watch: {
77 
+    listData: {
78 
+      handler(val) {
79 
+        this.myEcharts();
80 
+      },
81 
+    },
82 
+  },
83 
+  mounted() {
84 
+    this.myEcharts();
85 
+  },
86 
+};
87 
+</script>
88 
+
89 
+<style scoped>
90 
+.map {
91 
+  width: 100%;
92 
+  height: 300px;
93 
+}
94 
+</style>

+ 114 - 0
src/views/productData/productData.vue
Прегледај датотеку 

@@ -0,0 +1,114 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {};
12 
+  },
13 
+  methods: {
14 
+    //先定义个方法
15 
+    myEcharts() {
16 
+      //把echarts绑定到显示元素上
17 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
18 
+      //设置图表属性
19 
+      //   经营数据
20 
+      const option = {
21 
+        color: ["#91cc75"],
22 
+        title: {
23 
+          text: "产品数据",
24 
+          left: "center",
25 
+          // textStyle: {
26 
+          //   color: "#6d767e",
27 
+          // },
28 
+        },
29 
+        tooltip: {
30 
+          trigger: "axis",
31 
+          axisPointer: {
32 
+            type: "shadow",
33 
+          },
34 
+        },
35 
+        grid: {
36 
+          left: "3%",
37 
+          right: "4%",
38 
+          bottom: "3%",
39 
+          containLabel: true,
40 
+        },
41 
+        xAxis: [
42 
+          {
43 
+            type: "value",
44 
+          },
45 
+        ],
46 
+        yAxis: [
47 
+          {
48 
+            type: "category",
49 
+            axisTick: {
50 
+              show: false,
51 
+            },
52 
+            data: ["购买订单数", "购买人数", "购买金额"],
53 
+          },
54 
+        ],
55 
+        series: [
56 
+          {
57 
+            name: "数量",
58 
+            type: "bar",
59 
+            label: {
60 
+              show: true,
61 
+              position: "inside",
62 
+            },
63 
+            itemStyle: {
64 
+              normal: {
65 
+                label: {
66 
+                  show: true, //开启显示数值
67 
+                  position: "right", //数值在上方显示
68 
+                  textStyle: {
69 
+                    //数值样式
70 
+                    color: "#9b9ca2", //字体颜色
71 
+                    fontSize: 14, //字体大小
72 
+                  },
73 
+                },
74 
+              },
75 
+            },
76 
+            emphasis: {
77 
+              focus: "series",
78 
+            },
79 
+            data: [
80 
+              this.listData.product_data.order,
81 
+              this.listData.product_data.people,
82 
+              this.listData.product_data.money,
83 
+            ],
84 
+          },
85 
+        ],
86 
+      };
87 
+
88 
+      //数据绑定到表格
89 
+      myChart.setOption(option);
90 
+      window.addEventListener("resize", function () {
91 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
92 
+      });
93 
+    },
94 
+  },
95 
+  // 监听父组件传过来的值的变化
96 
+  watch: {
97 
+    listData: {
98 
+      handler(val) {
99 
+        this.myEcharts();
100 
+      },
101 
+    },
102 
+  },
103 
+  mounted() {
104 
+    this.myEcharts();
105 
+  },
106 
+};
107 
+</script>
108 
+
109 
+<style scoped>
110 
+.map {
111 
+  width: 100%;
112 
+  height: 300px;
113 
+}
114 
+</style>

+ 87 - 0
src/views/productRatio/productRatio.vue
Прегледај датотеку 

@@ -0,0 +1,87 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {
12 
+      topList: [], //top10信息
13 
+    };
14 
+  },
15 
+  methods: {
16 
+    // 保存项目top10信息
17 
+    getTopList() {
18 
+      this.listData.forEach((item) => {
19 
+        let arr = {};
20 
+        arr.value = item.num;
21 
+        arr.name = item.goods_name;
22 
+        this.topList.push(arr);
23 
+      });
24 
+    },
25 
+    //先定义个方法
26 
+    myEcharts() {
27 
+      //把echarts绑定到显示元素上
28 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
29 
+      //设置图表属性
30 
+      //   经营数据
31 
+      const option = {
32 
+        title: {
33 
+          text: "TOP10产品占比",
34 
+          left: "center",
35 
+        },
36 
+        tooltip: {
37 
+          trigger: "item",
38 
+          position: function (p, params, dom, rect, size) {
39 
+            return (dom.style.transform = "translateZ(0)");
40 
+          },
41 
+        },
42 
+        series: [
43 
+          {
44 
+            // name: "Access From",
45 
+            type: "pie",
46 
+            radius: "50%",
47 
+            data: this.topList,
48 
+            emphasis: {
49 
+              itemStyle: {
50 
+                shadowBlur: 10,
51 
+                shadowOffsetX: 0,
52 
+                shadowColor: "rgba(0, 0, 0, 0.5)",
53 
+              },
54 
+            },
55 
+          },
56 
+        ],
57 
+      };
58 
+      //数据绑定到表格
59 
+      myChart.setOption(option);
60 
+      window.addEventListener("resize", function () {
61 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
62 
+      });
63 
+    },
64 
+  },
65 
+  // 监听父组件传过来的值的变化
66 
+  watch: {
67 
+    listData: {
68 
+      handler(val) {
69 
+        this.myEcharts();
70 
+      },
71 
+    },
72 
+  },
73 
+  mounted() {
74 
+    this.myEcharts();
75 
+  },
76 
+  created() {
77 
+    this.getTopList();
78 
+  },
79 
+};
80 
+</script>
81 
+
82 
+<style scoped>
83 
+.map {
84 
+  width: 100%;
85 
+  height: 300px;
86 
+}
87 
+</style>

+ 135 - 0
src/views/programAmount/programAmount.vue
Прегледај датотеку 

@@ -0,0 +1,135 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {};
12 
+  },
13 
+  methods: {
14 
+    //先定义个方法
15 
+    myEcharts() {
16 
+      //把echarts绑定到显示元素上
17 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
18 
+      //设置图表属性
19 
+      //   经营数据
20 
+      const option = {
21 
+        color: ["#fcc524"],
22 
+        title: {
23 
+          text: "小程序用户量",
24 
+          // textStyle: {
25 
+          //   color: "#6d767e",
26 
+          // },
27 
+        },
28 
+        tooltip: {
29 
+          trigger: "axis",
30 
+          axisPointer: {
31 
+            type: "shadow",
32 
+          },
33 
+        },
34 
+        grid: {
35 
+          left: "3%",
36 
+          right: "4%",
37 
+          bottom: "3%",
38 
+          containLabel: true,
39 
+        },
40 
+        xAxis: [
41 
+          {
42 
+            type: "value",
43 
+          },
44 
+        ],
45 
+        yAxis: [
46 
+          {
47 
+            type: "category",
48 
+            axisTick: {
49 
+              show: false,
50 
+            },
51 
+            data: [
52 
+              "总用户数",
53 
+              "总测肤用户数",
54 
+              "付费总用户数",
55 
+              "充值总用户数",
56 
+              "多次卡购买总用户数",
57 
+              "美妆购买总用户数",
58 
+              "新注册用户数",
59 
+              "新测肤用户数",
60 
+              "单次两个项目",
61 
+              "3次到店用户数",
62 
+              "单次三个项目",
63 
+              "2次到店用户数",
64 
+            ],
65 
+          },
66 
+        ],
67 
+        series: [
68 
+          {
69 
+            name: "数量",
70 
+            type: "bar",
71 
+            label: {
72 
+              show: true,
73 
+              position: "inside",
74 
+            },
75 
+            emphasis: {
76 
+              focus: "series",
77 
+            },
78 
+            itemStyle: {
79 
+              normal: {
80 
+                label: {
81 
+                  show: true, //开启显示数值
82 
+                  position: "right", //数值在上方显示
83 
+                  textStyle: {
84 
+                    //数值样式
85 
+                    color: "#9b9ca2", //字体颜色
86 
+                    fontSize: 14, //字体大小
87 
+                  },
88 
+                },
89 
+              },
90 
+            },
91 
+            data: [
92 
+              this.listData.total_user,
93 
+              this.listData.total_skin,
94 
+              this.listData.total_consumer_user,
95 
+              this.listData.total_recharge_user,
96 
+              this.listData.total_time_card,
97 
+              this.listData.beauty_products,
98 
+              this.listData.new_user,
99 
+              this.listData.new_skin,
100 
+              this.listData.two_project,
101 
+              this.listData.user_three,
102 
+              this.listData.three_project,
103 
+              this.listData.user_two,
104 
+            ],
105 
+          },
106 
+        ],
107 
+      };
108 
+
109 
+      //数据绑定到表格
110 
+      myChart.setOption(option);
111 
+      window.addEventListener("resize", function () {
112 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
113 
+      });
114 
+    },
115 
+  },
116 
+  // 监听父组件传过来的值的变化
117 
+  watch: {
118 
+    listData: {
119 
+      handler(val) {
120 
+        this.myEcharts();
121 
+      },
122 
+    },
123 
+  },
124 
+  mounted() {
125 
+    this.myEcharts();
126 
+  },
127 
+};
128 
+</script>
129 
+
130 
+<style scoped>
131 
+.map {
132 
+  width: 160%;
133 
+  height: 300px;
134 
+}
135 
+</style>

+ 97 - 0
src/views/projectData/projectData.vue
Прегледај датотеку 

@@ -0,0 +1,97 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {};
12 
+  },
13 
+  methods: {
14 
+    //先定义个方法
15 
+    myEcharts() {
16 
+      //把echarts绑定到显示元素上
17 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
18 
+      //设置图表属性
19 
+      //   经营数据
20 
+      const option = {
21 
+        title: {
22 
+          text: "项目数据",
23 
+          left: "center",
24 
+          // textStyle: {
25 
+          //   color: "#6d767e",
26 
+          // },
27 
+        },
28 
+
29 
+        grid: {
30 
+          left: 40,
31 
+        },
32 
+        xAxis: {
33 
+          type: "category",
34 
+          data: [
35 
+            "预约项目数",
36 
+            "付费项目数",
37 
+            "次卡消耗项目数",
38 
+            "余额支付项目数",
39 
+          ],
40 
+          axisLabel: { interval: 0, rotate: 30 },
41 
+        },
42 
+        yAxis: {
43 
+          type: "value",
44 
+        },
45 
+        series: [
46 
+          {
47 
+            data: [
48 
+              this.listData.resved_project,
49 
+              this.listData.pay_project,
50 
+              this.listData.card_project,
51 
+              this.listData.balance_project,
52 
+            ],
53 
+            type: "bar",
54 
+            itemStyle: {
55 
+              normal: {
56 
+                label: {
57 
+                  show: true, //开启显示数值
58 
+                  position: "top", //数值在上方显示
59 
+                  textStyle: {
60 
+                    //数值样式
61 
+                    color: "#9b9ca2", //字体颜色
62 
+                    fontSize: 14, //字体大小
63 
+                  },
64 
+                },
65 
+              },
66 
+            },
67 
+          },
68 
+        ],
69 
+      };
70 
+      //数据绑定到表格
71 
+      myChart.setOption(option);
72 
+      window.addEventListener("resize", function () {
73 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
74 
+      });
75 
+    },
76 
+  },
77 
+  // 监听父组件传过来的值的变化
78 
+  watch: {
79 
+    listData: {
80 
+      handler(val) {
81 
+        this.myEcharts();
82 
+      },
83 
+    },
84 
+  },
85 
+  mounted() {
86 
+    this.myEcharts();
87 
+  },
88 
+};
89 
+</script>
90 
+
91 
+<style scoped>
92 
+.map {
93 
+  width: 100%;
94 
+  height: 300px;
95 
+  /* border: 1px solid saddlebrown; */
96 
+}
97 
+</style>

+ 101 - 0
src/views/projectRatio/projectRatio.vue
Прегледај датотеку 

@@ -0,0 +1,101 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {
12 
+      topList: [], //top10信息
13 
+    };
14 
+  },
15 
+  methods: {
16 
+    // 保存项目top10信息
17 
+    getTopList() {
18 
+      this.listData.forEach(item=>{
19 
+        let arr = {}
20 
+        arr.value = item.num
21 
+        arr.name = item.project_name
22 
+        this.topList.push(arr)
23 
+      })
24 
+    },
25 
+    //先定义个方法
26 
+    myEcharts() {
27 
+      //把echarts绑定到显示元素上
28 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
29 
+      //设置图表属性
30 
+      //   经营数据
31 
+      const option = {
32 
+        title: {
33 
+          text: "TOP10项目占比",
34 
+          left: "center",
35 
+        },
36 
+        tooltip: {
37 
+          trigger: "item",
38 
+          position: function (p, params, dom, rect, size) {
39 
+            return (dom.style.transform = "translateZ(0)");
40 
+          },
41 
+        },
42 
+        series: [
43 
+          {
44 
+            // name: "Access From",
45 
+            type: "pie",
46 
+            radius: "50%",
47 
+            data:this.topList,
48 
+            // data: [
49 
+            //   {
50 
+            //     name: this.listData[0].project_name,
51 
+            //     value: this.listData[0].num,
52 
+            //   },
53 
+            //   {
54 
+            //     value: this.listData[1].num,
55 
+            //     name: this.listData[1].project_name,
56 
+            //   },
57 
+            //   {
58 
+            //     value: this.listData[2].num,
59 
+            //     name: this.listData[2].project_name,
60 
+            //   },
61 
+            // ],
62 
+            emphasis: {
63 
+              itemStyle: {
64 
+                shadowBlur: 10,
65 
+                shadowOffsetX: 0,
66 
+                shadowColor: "rgba(0, 0, 0, 0.6)",
67 
+              },
68 
+            },
69 
+          },
70 
+        ],
71 
+      };
72 
+      //数据绑定到表格
73 
+      myChart.setOption(option);
74 
+      window.addEventListener("resize", function () {
75 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
76 
+      });
77 
+    },
78 
+  },
79 
+  // 监听父组件传过来的值的变化
80 
+  watch: {
81 
+    listData: {
82 
+      handler(val) {
83 
+        this.myEcharts();
84 
+      },
85 
+    },
86 
+  },
87 
+  mounted() {
88 
+    this.myEcharts();
89 
+  },
90 
+  created() {
91 
+    this.getTopList();
92 
+  },
93 
+};
94 
+</script>
95 
+
96 
+<style scoped>
97 
+.map {
98 
+  width: 100%;
99 
+  height: 300px;
100 
+}
101 
+</style>

+ 90 - 0
src/views/rechargeData/rechargeData.vue
Прегледај датотеку 

@@ -0,0 +1,90 @@
1 
+<template>
2 
+  <div class="chinaMap">
3 
+    <div class="map" ref="MapMountNode"></div>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  props: ["listData"],
10 
+  data() {
11 
+    return {};
12 
+  },
13 
+  methods: {
14 
+    //先定义个方法
15 
+    myEcharts() {
16 
+      //把echarts绑定到显示元素上
17 
+      const myChart = this.$echarts.init(this.$refs.MapMountNode);
18 
+      //设置图表属性
19 
+      //   经营数据
20 
+      const option = {
21 
+        grid: {
22 
+          left: 60,
23 
+        },
24 
+        color: ["#42d3a7"],
25 
+        title: {
26 
+          text: "充值数据",
27 
+          left: "center",
28 
+          // textStyle: {
29 
+          //   color: "#6d767e",
30 
+          // },
31 
+        },
32 
+        xAxis: {
33 
+          type: "category",
34 
+          data: ["总充值金额", "剩余充值储蓄人数", "剩余充值储蓄额"],
35 
+          axisLabel: { interval: 0, rotate: 30 },
36 
+        },
37 
+        yAxis: {
38 
+          type: "value",
39 
+        },
40 
+        series: [
41 
+          {
42 
+            data: [
43 
+              this.listData.total_recharge_money,
44 
+              this.listData.balance_people,
45 
+              this.listData.total_recharge_resdue_money,
46 
+            ],
47 
+            type: "bar",
48 
+            itemStyle: {
49 
+              normal: {
50 
+                label: {
51 
+                  show: true, //开启显示数值
52 
+                  position: "top", //数值在上方显示
53 
+                  textStyle: {
54 
+                    //数值样式
55 
+                    color: "#9b9ca2", //字体颜色
56 
+                    fontSize: 14, //字体大小
57 
+                  },
58 
+                },
59 
+              },
60 
+            },
61 
+          },
62 
+        ],
63 
+      };
64 
+      //数据绑定到表格
65 
+      myChart.setOption(option);
66 
+      window.addEventListener("resize", function () {
67 
+        myChart.resize(); //myChart指自己定义的echartsDom对象
68 
+      });
69 
+    },
70 
+  },
71 
+  // 监听父组件传过来的值的变化
72 
+  watch: {
73 
+    listData: {
74 
+      handler(val) {
75 
+        this.myEcharts();
76 
+      },
77 
+    },
78 
+  },
79 
+  mounted() {
80 
+    this.myEcharts();
81 
+  },
82 
+};
83 
+</script>
84 
+
85 
+<style scoped>
86 
+.map {
87 
+  width: 100%;
88 
+  height: 300px;
89 
+}
90 
+</style>