up

houtai/src/apis/system.js

@@ -55,3 +55,11 @@ export const userAuths = (userId, projectIds) => {
     url: `/sys/user/auth/${userId}?projectIds=${projectIds}`
   })
 }
+
+// 统计-5分钟更新一次
+export const getStatistics = () => {
+  return axios({
+    method: 'get',
+    url: '/cms/village/getStatistics'
+  })
+}

houtai/src/views/tab3/index.vue

@@ -47,6 +47,7 @@
 </template>
 
 <script>
+import { getStatistics } from '@/apis/system'
 import * as echarts from 'echarts/core'
 import {
   TitleComponent,
@@ -71,10 +72,10 @@ export default {
     // 这里存放数据
     return {
       data1: [
-        { name: '累计访问量', num: '103,354', img: '1.png' },
-        { name: '今日访问量', num: '3,354', img: '2.png' },
-        { name: '累计点赞数', num: '3,354', img: '3.png' },
-        { name: '页面分享数', num: '3,354', img: '4.png' }
+        { name: '累计访问量', num: '0', img: '1.png' },
+        { name: '今日访问量', num: '0', img: '2.png' },
+        { name: '累计点赞数', num: '0', img: '3.png' },
+        { name: '页面分享数', num: '0', img: '4.png' }
       ]
     }
   },
@@ -87,11 +88,23 @@ export default {
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-    var chartDom = document.getElementById('echaBox')
-    var myChart = echarts.init(chartDom)
-    var option
-    option = {
+  async mounted () {
+    const res = await getStatistics()
+    this.data1[0].num = res.data.visitCount
+    this.data1[1].num = res.data.visitToday
+    this.data1[2].num = res.data.starCount
+    this.data1[3].num = res.data.shareCount
+    const objTemp = {
+      name: [],
+      num: []
+    }
+    res.data.village.forEach((v) => {
+      objTemp.name.push(v.name)
+      objTemp.num.push(v.visit)
+    })
+    const chartDom = document.getElementById('echaBox')
+    const myChart = echarts.init(chartDom)
+    const option = {
       color: ['#02a7f0'],
       tooltip: {
         trigger: 'axis',
@@ -111,21 +124,9 @@ export default {
         show: false
       },
       yAxis: {
+        inverse: true,
         type: 'category',
-        data: [
-          '东宁村',
-          '良溪村',
-          '卢边村',
-          '田心村',
-          '仓前村',
-          '霄南村',
-          '歇马村',
-          '自力村',
-          '马降龙村',
-          '浮石村',
-          '浮月村',
-          '横江村'
-        ],
+        data: objTemp.name,
         axisTick: {
           // y轴刻度线
           show: false
@@ -139,10 +140,7 @@ export default {
         {
           name: '',
           type: 'bar',
-          data: [
-            3353, 3353, 3353, 3353, 3353, 3353, 3000, 2899, 3330, 2228, 4455,
-            5555
-          ]
+          data: objTemp.num
         }
       ]
     }

web/src/utils/api.js

@@ -35,4 +35,20 @@ export const getInfoApi = (villageId) => {
     method: 'get',
     url: `/web/content/list/${villageId}`,
   })
+}
+
+// 村庄-统计-5分钟更新一次
+export const getStatistics = (villageId) => {
+  return axios({
+    method: 'get',
+    url: '/web/village/getStatistics',
+  })
+}
+
+// 村庄-保存分享量
+export const addShareApi = (villageId) => {
+  return axios({
+    method: 'get',
+    url: `/web/village/addShare/${villageId}`,
+  })
 }

web/src/views/Home.vue

@@ -44,11 +44,11 @@
             <div class="browseNum">
               <div>
                 <p>累计浏览量</p>
-                <span>1000</span>
+                <span>{{ numAll }}</span>
               </div>
               <div>
                 <p>今日浏览量</p>
-                <span>500</span>
+                <span>{{ numDay }}</span>
               </div>
             </div>
           </div>
@@ -58,17 +58,17 @@
             <div class="detailsNum">
               <div
                 class="row"
-                :title="item.name + ' ' + item.num"
+                :title="item.name + ' ' + item.visit"
                 v-for="item in numData"
                 :key="item.id"
               >
                 <div class="rowLeft">{{ item.name }}</div>
                 <div class="rowRight">
                   <div class="plan">
-                    <div :style="`width:${(item.num / maxNum) * 100}%`"></div>
+                    <div :style="`width:${(item.visit / numAll) * 100}%`"></div>
                   </div>
                 </div>
-                <div class="rowNum">{{ item.num }}</div>
+                <div class="rowNum">{{ item.visit }}</div>
               </div>
             </div>
           </div>
@@ -91,9 +91,9 @@
             ></div>
             <div class="sonBox">
               <div
-                @click.stop="$router.push(`/stair/1`)"
+                @click.stop="toCun(val.id)"
                 :class="{ active: item.id === mapDataInd }"
-                v-for="(val) in item.son"
+                v-for="val in item.son"
                 :key="val.id"
               >
                 · {{ val.name }}
@@ -107,6 +107,7 @@
 </template>
 
 <script>
+import { getStatistics, lookSaveApi } from "../utils/api";
 export default {
   name: "home",
   components: {},
@@ -116,22 +117,12 @@ export default {
       arrowsShow: false,
       name: "",
       mainInd: 0,
-      numData: [
-        { id: 1, name: "东宁村", num: 253 },
-        { id: 2, name: "东宁村", num: 353 },
-        { id: 3, name: "东宁村", num: 553 },
-        { id: 4, name: "东宁村", num: 153 },
-        { id: 5, name: "东宁村", num: 252 },
-        { id: 6, name: "东宁村", num: 212 },
-        { id: 7, name: "东宁村", num: 233 },
-        { id: 8, name: "东宁村", num: 298 },
-        { id: 9, name: "东宁村", num: 256 },
-        { id: 10, name: "东宁村", num: 353 },
-        { id: 11, name: "东宁村", num: 643 },
-        { id: 12, name: "马降龙村", num: 243 },
-      ],
-      // 数据最大值
-      maxNum: 0,
+      numData: [],
+      // 累计浏览量
+      numAll: 0,
+      // 今日浏览量
+      numDay: 0,
+
       // 区域筛选的数据
       mapDataInd: null,
       mapData: [
@@ -139,25 +130,30 @@ export default {
           id: 1000,
           name: "蓬江区",
           son: [
-            { id: 1001, name: "东宁村" },
-            { id: 1002, name: "卢边村" },
+            { id: 1, name: "东宁村" },
+            { id: 2, name: "良溪村" },
+            { id: 3, name: "卢边村" },
+            { id: 4, name: "田心村" },
+            { id: 5, name: "仓前村" },
           ],
         },
         {
           id: 2000,
           name: "江海区",
           son: [
-            { id: 2001, name: "良溪村" },
-            { id: 2002, name: "卢边村" },
-            { id: 2003, name: "XX村" },
+            { id: 6, name: "霄南村" },
+            { id: 7, name: "歇马村" },
+            { id: 8, name: "自力村" },
+            { id: 9, name: "马降龙村" },
           ],
         },
         {
           id: 3000,
           name: "新会区",
           son: [
-            { id: 3001, name: "良溪村" },
-            { id: 3002, name: "卢边村" },
+            { id: 10, name: "浮石村" },
+            { id: 11, name: "浮月村" },
+            { id: 12, name: "横江村" },
           ],
         },
       ],
@@ -176,17 +172,18 @@ export default {
     mySearch() {
       console.log("点击了搜索");
     },
+    // 跳转
+    async toCun(id) {
+      await lookSaveApi(id);
+      this.$router.push(`/stair/${id}`);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    let arr = [];
-    this.numData.forEach((v) => {
-      arr.push(v.num);
-    });
-    this.maxNum = arr.reduce((a, b) => (a > b ? a : b));
-    this.maxNum += 100;
-    // 默认打开第一个区域筛选
-    this.mapDataInd = this.mapData[0].id;
+  async created() {
+    let res = await getStatistics();
+    this.numAll = res.data.visitCount;
+    this.numDay = res.data.visitToday;
+    this.numData = res.data.village;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

webM/src/utils/api.js

@@ -27,7 +27,7 @@ export const getTreeMenuApi = () => {
     method: 'get',
     url: '/web/getTreeMenu',
   })
-} 
+}
 
 // 获取内容列表
 export const getInfoApi = (villageId) => {
@@ -35,4 +35,20 @@ export const getInfoApi = (villageId) => {
     method: 'get',
     url: `/web/content/list/${villageId}`,
   })
+}
+
+// 村庄-统计-5分钟更新一次
+export const getStatistics = (villageId) => {
+  return axios({
+    method: 'get',
+    url: '/web/village/getStatistics',
+  })
+}
+
+// 村庄-保存分享量
+export const addShareApi = (villageId) => {
+  return axios({
+    method: 'get',
+    url: `/web/village/addShare/${villageId}`,
+  })
 }

webM/src/views/Home.vue

@@ -17,7 +17,7 @@
       <!-- 标题 -->
       <div class="tit">
         <h3>江门市中国传统村落一张图</h3>
-        <img src="../assets/img/search.png" alt=""  @click="searchShow=true"/>
+        <img src="../assets/img/search.png" alt="" @click="searchShow = true" />
       </div>
       <!-- 展开后的内容 -->
       <div class="main" v-show="cutArrows">
@@ -25,11 +25,11 @@
         <div class="browseNum">
           <div>
             <p>累计浏览量</p>
-            <span>1000</span>
+            <span>{{numAll}}</span>
           </div>
           <div>
             <p>今日浏览量</p>
-            <span>500</span>
+            <span>{{numDay}}</span>
           </div>
         </div>
         <div class="browse browse2">详情统计</div>
@@ -38,44 +38,34 @@
             <div class="rowLeft">{{ item.name }}</div>
             <div class="rowRight">
               <div class="plan">
-                <div :style="`width:${(item.num / maxNum) * 100}%`"></div>
+                <div :style="`width:${(item.visit / numAll) * 100}%`"></div>
               </div>
             </div>
-            <div class="rowNum">{{ item.num }}</div>
+            <div class="rowNum">{{ item.visit }}</div>
           </div>
         </div>
       </div>
     </div>
     <!-- 点击搜索出来的页面 -->
-    <Search v-if="searchShow" @close='searchShow=false'/>
+    <Search v-if="searchShow" @close="searchShow = false"/>
   </div>
 </template>
 
 <script>
-import Search from './Search.vue'
+import { getStatistics } from "../utils/api";
+import Search from "./Search.vue";
 export default {
-  components: {Search},
+  components: { Search },
   data() {
     //这里存放数据
     return {
       cutArrows: false,
-      numData: [
-        { id: 1, name: "东宁村", num: 253 },
-        { id: 2, name: "东宁村", num: 353 },
-        { id: 3, name: "东宁村", num: 553 },
-        { id: 4, name: "东宁村", num: 153 },
-        { id: 5, name: "东宁村", num: 252 },
-        { id: 6, name: "东宁村", num: 212 },
-        { id: 7, name: "东宁村", num: 233 },
-        { id: 8, name: "东宁村", num: 298 },
-        { id: 9, name: "东宁村", num: 256 },
-        { id: 10, name: "东宁村", num: 353 },
-        { id: 11, name: "东宁村", num: 643 },
-        { id: 12, name: "马降龙村", num: 243 },
-      ],
-      // 数据最大值
-      maxNum: 0,
-      searchShow:false
+      numData: [],
+      searchShow: false,
+      // 累计浏览量
+      numAll:0,
+      // 今日浏览量
+      numDay:0
     };
   },
   //监听属性 类似于data概念
@@ -85,13 +75,11 @@ export default {
   //方法集合
   methods: {},
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    let arr = [];
-    this.numData.forEach((v) => {
-      arr.push(v.num);
-    });
-    this.maxNum = arr.reduce((a, b) => (a > b ? a : b));
-    this.maxNum += 100;
+  async created() {
+    let res = await getStatistics();
+    this.numAll=res.data.visitCount
+    this.numDay=res.data.visitToday
+    this.numData=res.data.village
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -230,6 +218,9 @@ export default {
             margin-bottom: 5px;
           }
           & > span {
+            display: inline-block;
+            text-align: center;
+            min-width: 70px;
             font-size: 24px;
           }
         }

webM/src/views/Search.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="search">
-    <div class="top">
+    <div class="top"  @keyup.enter="search">
       <!-- 返回按钮 -->
       <div class="back" @click="$emit('close')"></div>
       <!-- 搜索按钮 -->
-      <div class="searBtn"></div>
+      <div class="searBtn" @click="search"></div>
       <input type="text" v-model="txt" placeholder="请输入关键词..." />
     </div>
     <!-- 下面内容 -->
@@ -14,9 +14,16 @@
         <div>访问量</div>
       </div>
       <div class="mainCon">
-        <div class="row" v-for="i in 12" :key="i" @click="$router.push('/stair/1')">
-          <div><span>·</span>卢边村</div>
-          <div>99999</div>
+      <div class="noTxt" v-if="numData.length===0">暂无数据</div>
+        <div
+          v-else
+          class="row"
+          v-for="item in numData"
+          :key="item.id"
+          @click="toCun(item.id)"
+        >
+          <div><span>·</span>{{ item.name }}</div>
+          <div>{{ item.visit }}</div>
         </div>
       </div>
     </div>
@@ -24,6 +31,7 @@
 </template>
 
 <script>
+import { getStatistics, lookSaveApi } from "../utils/api";
 export default {
   name: "search",
   components: {},
@@ -31,6 +39,8 @@ export default {
     //这里存放数据
     return {
       txt: "",
+      numData: [],
+      numDataAll: [],
     };
   },
   //监听属性 类似于data概念
@@ -38,10 +48,25 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    async toCun(id) {
+      await lookSaveApi(id);
+      this.$router.push(`/stair/${id}`);
+    },
+    // 点击搜索
+    search() {
+      if (this.txt.trim() === "") this.numData = [...this.numDataAll];
+      this.numData = this.numDataAll.filter((v) =>
+        v.name.includes(this.txt.trim())
+      );
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
+  async created() {
+    let res = await getStatistics();
+    this.numDataAll = res.data.village;
+    this.numData = [...this.numDataAll];
+  }, //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -150,6 +175,12 @@ export default {
       height: calc(100% - 62px);
       overflow-y: auto;
     }
+    .noTxt{
+        color: #5b5b5b;
+        height: 300px;
+        line-height: 300px;
+        text-align: center;
+    }
     .row {
       display: flex;
       height: 40px;
@@ -163,7 +194,7 @@ export default {
           font-size: 24px;
           margin-right: 5px;
         }
-        &:nth-of-type(1){
+        &:nth-of-type(1) {
           display: flex;
           align-items: center;
           justify-content: center;