update

src/router/index.js

@@ -148,45 +148,45 @@ export const asyncRoutes = [
       }
     ]
   },
-  // {
-  //   path: '/bz',
-  //   component: Layout,
-  //   name: 'Bz',
-  //   meta: { title: '业务数据展示系统', icon: 'el-icon-help', authorities: ['app.key.find', 'app.key.request.logs'] },
-  //   redirect: '/bz/media',
-  //   children: [
-  //     {
-  //       path: 'media',
-  //       name: 'BzMedia',
-  //       component: () => import('@/views/place/baseInfo'),
-  //       meta: { title: '多媒体资源管理', authorities: ['app.key.find'] }
-  //     },
-  //     {
-  //       path: 'monitor',
-  //       name: 'BzMonitor',
-  //       component: () => import('@/views/place/baseInfo'),
-  //       meta: { title: '实时监测', authorities: ['app.key.request.logs'] }
-  //     },
-  //     {
-  //       path: 'consume',
-  //       name: 'BzConsume',
-  //       component: () => import('@/views/place/baseInfo'),
-  //       meta: { title: '文旅消费', authorities: ['app.key.request.logs'] }
-  //     },
-  //     {
-  //       path: 'resourceAnalysis',
-  //       name: 'BzResourceAnalysis',
-  //       component: () => import('@/views/place/baseInfo'),
-  //       meta: { title: '文旅资源分析', authorities: ['app.key.request.logs'] }
-  //     },
-  //     {
-  //       path: 'touristAnalysis',
-  //       name: 'BzTouristAnalysis',
-  //       component: () => import('@/views/place/baseInfo'),
-  //       meta: { title: '游客分析', authorities: ['app.key.request.logs'] }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/bz',
+    component: Layout,
+    name: 'Bz',
+    meta: { title: '业务数据展示系统', icon: 'el-icon-help', authorities: ['app.key.find', 'app.key.request.logs'] },
+    redirect: '/bz/media',
+    children: [
+      {
+        path: 'media',
+        name: 'BzMedia',
+        component: () => import('@/views/bz/media'),
+        meta: { title: '多媒体资源管理', authorities: ['app.key.find'] }
+      },
+      {
+        path: 'monitor',
+        name: 'BzMonitor',
+        component: () => import('@/views/bz/monitor'),
+        meta: { title: '实时监测', authorities: ['app.key.request.logs'] }
+      },
+      {
+        path: 'consume',
+        name: 'BzConsume',
+        component: () => import('@/views/bz/consume'),
+        meta: { title: '文旅消费', authorities: ['app.key.request.logs'] }
+      },
+      {
+        path: 'resourceAnalysis',
+        name: 'BzResourceAnalysis',
+        component: () => import('@/views/bz/resourceAnalysis'),
+        meta: { title: '文旅资源分析', authorities: ['app.key.request.logs'] }
+      },
+      {
+        path: 'touristAnalysis',
+        name: 'BzTouristAnalysis',
+        component: () => import('@/views/bz/touristAnalysis'),
+        meta: { title: '游客分析', authorities: ['app.key.request.logs'] }
+      }
+    ]
+  },
   {
     path: '/statistics',
     component: Layout,

src/styles/index.scss

@@ -64,14 +64,161 @@ div:focus {
   padding: 20px;
 }
 
-.pagination-container{
+.pagination-container {
   margin-top: 15px;
   text-align: right;
 }
-.action-bar-container{
+
+.action-bar-container {
   margin-bottom: 15px;
   text-align: right;
-  .el-button-group{
+
+  .el-button-group {
     margin-left: 10px;
   }
 }
+
+
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 20px 0 0 20px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 60px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 12px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    margin: 10px !important;
+    float: left !important;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+
+
+.bz-card {
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  padding: 20px;
+  min-height: 210px;
+
+  .header {
+    border-bottom: 2px solid #E9E9E9;
+    padding: 10px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+  }
+
+  .image {
+    height: 40px;
+    margin-top: 20px;
+    margin-left: 10px;
+  }
+
+  p {
+    font-size: 12px;
+    margin: 0;
+    line-height: 20px;
+  }
+
+  p:first-child {
+    margin-top: 20px;
+  }
+
+  p:last-child {
+    color: #666666;
+  }
+
+}

src/views/bz/consume/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="app-container">文旅消费</div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>

src/views/bz/media/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryForm" inline size="small">
+      <el-form-item label="名称">
+        <el-input v-model="queryForm.name" placeholder="名称"/>
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-select v-model="queryForm.isEnable" clearable placeholder="用户状态">
+          <el-option label="是" value="Y"/>
+          <el-option label="否" value="N"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-table
+      v-loading="isLoading"
+      :data="pageData.records"
+      border
+      fit
+      highlight-current-row
+      @selection-change="selectionChange"
+    >
+      <el-table-column type="selection" width="55"/>
+      <el-table-column label="名称" prop="id" width="150"/>
+      <el-table-column label="地址" prop="name"/>
+      <el-table-column label="类型" prop="publicKey" width="150"/>
+    </el-table>
+
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data() {
+    return {
+      queryForm: {},
+      pageData: {}
+    }
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    paginationChange(val) {
+      this.currentPage = val
+      this.fetchData()
+    }
+  }
+}
+</script>

src/views/bz/monitor/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="40" class="panel-group">
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel" @click="gotoPage(`/api/docs`)">
+          <div class="card-panel-icon-wrapper icon-people">
+            <el-image src="/images/16527@2x.png" class="card-panel-icon" style="height: 60px"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              昨日进入访客数量（人）
+            </div>
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel" @click="gotoPage(`/appKey/index`)">
+          <div class="card-panel-icon-wrapper icon-message">
+            <el-image src="/images/16528@2x.png" class="card-panel-icon" style="height: 60px"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              今日景区累计游客数（人）
+            </div>
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
+          <div class="card-panel-icon-wrapper icon-message">
+            <el-image src="/images/16530@2x.png" class="card-panel-icon" style="height: 60px"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              实时客流（人）
+            </div>
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel" @click="gotoPage(`/statistics/file`)">
+          <div class="card-panel-icon-wrapper icon-message">
+            <el-image src="/images/16529@2x.png" class="card-panel-icon" style="height: 60px"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              实时车流（辆）
+            </div>
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="40">
+      <el-col :xs="24" :sm="24" :lg="18">
+        <div style="box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05); padding: 20px;height: 280px">
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="游客来源地" name="first"></el-tab-pane>
+            <el-tab-pane label="客流趋势" name="second"></el-tab-pane>
+            <el-tab-pane label="车流趋势" name="third"></el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="6">
+        <div class="bz-card">
+          <div class="header">
+            交通监测
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div style="height: 32px"></div>
+    <el-row :gutter="40">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="bz-card">
+          <div class="header">
+            消费监测
+          </div>
+          <el-row>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16531@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>￥25863.50</p>
+                  <p>景区消费</p>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16536@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>￥25863.50</p>
+                  <p>文化场馆</p>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16537@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>￥25863.50</p>
+                  <p>餐馆消费</p>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16538@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>￥25863.50</p>
+                  <p>体育场馆消费</p>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="bz-card">
+          <div class="header">
+            舆情监测
+          </div>
+          <el-row>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16541@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>24685</p>
+                  <p>好评</p>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16542@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>23</p>
+                  <p>差评</p>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16540@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>12</p>
+                  <p>五星餐厅</p>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16539@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>256</p>
+                  <p>四星餐厅</p>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="bz-card">
+          <div class="header">
+            应急指挥调度
+          </div>
+          <el-row>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16546@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>24685</p>
+                  <p>应急事件</p>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16547@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>23</p>
+                  <p>应急预案</p>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col span="12">
+              <el-row>
+                <el-col span="10">
+                  <el-image src="/images/16545@2x.png" class="image"/>
+                </el-col>
+                <el-col span="14">
+                  <p>12</p>
+                  <p>已处理应急事件</p>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: { CountTo },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>

src/views/bz/resourceAnalysis/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="app-container">文旅资源分析</div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>

src/views/bz/touristAnalysis/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="app-container">游客分析</div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>

src/views/dashboard/PanelGroup.vue

@@ -84,119 +84,7 @@ export default {
     gotoPage(redirect) {
       console.log(redirect)
       this.$router.push({ path: redirect })
-
-      // this.$router.(redirect)
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.panel-group {
-  margin-top: 18px;
-
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
-
-  .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
-  }
-}
-
-@media (max-width: 550px) {
-  .card-panel-description {
-    display: none;
-  }
-
-  .card-panel-icon-wrapper {
-    float: none !important;
-    width: 100%;
-    height: 100%;
-    margin: 0 !important;
-
-    .svg-icon {
-      display: block;
-      margin: 14px auto !important;
-      float: none !important;
-    }
-  }
-}
-</style>