update

src/api/equipment/equipment_passenger.js

@@ -32,3 +32,11 @@ export function deleteByIds(ids) {
     data: ids
   })
 }
+
+export function findDetail(id) {
+  return request({
+    url: '/equipment/passenger/findDetail',
+    method: 'post',
+    params: { id }
+  })
+}

src/router/index.js

@@ -35,6 +35,7 @@ export const asyncRoutes = [
     path: '/equipment',
     component: Layout,
     name: 'Passenger',
+    redirect: '/equipment/passenger',
     meta: { icon: 'el-icon-pie-chart', title: '设备管理', authorities: ['equipment.passenger.find'] },
     children: [
       {
@@ -44,7 +45,7 @@ export const asyncRoutes = [
         meta: { title: '客流数据采集', authorities: ['equipment.passenger.find'] }
       },
       {
-        path: 'equipment/detail/:id',
+        path: 'passenger/detail/:id',
         name: 'PassengerEquipmentDetail',
         hidden: true,
         component: () => import('@/views/equipment/passenger/Detail'),

src/views/equipment/passenger/Detail.vue

@@ -5,42 +5,47 @@
       <el-row>
         <el-col :span="4">
           <p style="font-size: 14px">流入量</p>
-          <p style="font-size: 20px">12345</p>
+          <p style="font-size: 20px">{{ detailData.inCount }}</p>
         </el-col>
         <el-col :span="4">
           <p style="font-size: 14px">流出量</p>
-          <p style="font-size: 20px">12345</p>
+          <p style="font-size: 20px">{{ detailData.outCount }}</p>
         </el-col>
         <el-col :span="4">
           <p style="font-size: 14px">总接待人数</p>
-          <p style="font-size: 20px">12345</p>
+          <p style="font-size: 20px">{{ detailData.inCount + detailData.outCount }}</p>
         </el-col>
         <el-col :span="4">
           <p style="font-size: 14px">实时容量</p>
-          <p style="font-size: 20px">12345</p>
+          <p style="font-size: 20px">{{ detailData.inCount - detailData.outCount }}</p>
         </el-col>
         <el-col :span="4">
           <p style="font-size: 14px">平均停留时长</p>
-          <p style="font-size: 20px">12345</p>
+          <p style="font-size: 20px">{{ detailData.avgStayTime }}秒</p>
         </el-col>
       </el-row>
     </el-card>
-    <div style="height: 16px" />
+    <div style="height: 16px"/>
     <el-row :gutter="16">
       <el-col :span="8">
         <el-card>
           <div slot="header">性别</div>
-          <div id="gender-box" style="width: 100%;height:200px;" />
+          <div id="gender-box" style="width: 100%;height:200px;"/>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card>
           <div slot="header">来源</div>
-          <div id="from-source-box" style="width: 100%;height:200px;" />
+          <div id="from-source-box" style="width: 100%;height:200px;"/>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card />
+        <el-card>
+          <el-row v-for="item in detailData.listFromSource" :key="item.name" style="margin: 12px 0">
+            <el-col :span="12">{{ item.name }}</el-col>
+            <el-col :span="12">{{ item.value }}人次</el-col>
+          </el-row>
+        </el-card>
       </el-col>
     </el-row>
 
@@ -48,23 +53,29 @@
 </template>
 <script>
 import * as echarts from 'echarts'
+import { findDetail } from '@/api/equipment/equipment_passenger'
 
 export default {
   components: {},
   data() {
-    return {}
+    return {
+      detailData: {}
+    }
   },
   computed: {},
   mounted() {
     const id = this.$route.params.id
     console.log(id)
-    this.buildFromSource()
-    this.buildGender()
+    findDetail(id).then(detailData => {
+      this.detailData = detailData
+      this.buildGender(this.detailData.listGenders)
+      this.buildFromSource(this.detailData.listFromSource)
+    })
   },
   created() {
   },
   methods: {
-    buildGender() {
+    buildGender(listGenders) {
       const chart = echarts.init(document.getElementById('gender-box'))
       chart.setOption({
         tooltip: {
@@ -93,15 +104,12 @@ export default {
             labelLine: {
               show: false
             },
-            data: [
-              { value: 1048, name: '男' },
-              { value: 735, name: '女' }
-            ]
+            data: listGenders
           }
         ]
       })
     },
-    buildFromSource() {
+    buildFromSource(listFromSource) {
       const chart = echarts.init(document.getElementById('from-source-box'))
       chart.setOption({
         tooltip: {
@@ -130,13 +138,7 @@ export default {
             labelLine: {
               show: false
             },
-            data: [
-              { value: 1048, name: '湖南' },
-              { value: 735, name: '北京' },
-              { value: 580, name: '天津' },
-              { value: 484, name: '湖北' },
-              { value: 300, name: '上海' }
-            ]
+            data: listFromSource
           }
         ]
       })

src/views/equipment/passenger/index.vue

@@ -2,10 +2,10 @@
   <div class="app-container">
     <el-form :model="queryForm" inline size="small">
       <el-form-item label="点位分布">
-        <select-base-bz-data v-model="queryForm.placeBaseInfoId" :multiple="false" />
+        <select-base-bz-data v-model="queryForm.placeBaseInfoId" :multiple="false"/>
       </el-form-item>
       <el-form-item label="备注说明">
-        <el-input v-model="queryForm.brief" placeholder="备注说明" />
+        <el-input v-model="queryForm.brief" placeholder="备注说明"/>
       </el-form-item>
       <el-form-item label="时间维度">
         <el-date-picker
@@ -58,7 +58,7 @@
         <el-button type="text" @click="goToDetail(item.id)">详情</el-button>
       </div>
     </el-card>
-    <div style="clear: both" />
+    <div style="clear: both"/>
     <el-pagination
       class="pagination-container"
       background
@@ -67,7 +67,7 @@
       :page-size="pageData.pageSize"
       @current-change="paginationChange"
     />
-    <dialog-form ref="dialogForm" @ok="fetchData" />
+    <dialog-form ref="dialogForm" @ok="fetchData"/>
   </div>
 </template>
 <style type="text/css">
@@ -94,18 +94,14 @@ export default {
       multipleSelection: []
     }
   },
-  computed: {
-    disabledSelectBz: function() {
-      return !this.queryForm || !this.queryForm.dataType || this.queryForm.dataType === ''
-    }
-  },
+  computed: {},
   created() {
     this.fetchData()
   },
   methods: {
     dateTimeFormatter,
     goToDetail(id) {
-      this.$router.push(`/passenger/equipment/detail/${id}`)
+      this.$router.push(`/equipment/passenger/detail/${id}`)
     },
     onDataTypeChange() {
       this.queryForm.bzId = ''