'指数总览'

operation-frontend/src/api/operation.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取指标总览
+export function getSummary () {
+    return request({
+        url: `/wxoperate/index/summary`,
+        method: 'GET'
+    })
+}

operation-frontend/src/api/wxchat.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 查询公众号列表
+export function getAccount () {
+    return request({
+        url: `/wxoperate/account`,
+        method: 'GET'
+    })
+}

operation-frontend/src/utils/request.js

@@ -5,8 +5,8 @@ import notification from 'ant-design-vue/es/notification'
 import { VueAxios } from './axios'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { message } from 'ant-design-vue'
-import { setItem } from '@/utils/storage'
-console.log(process.env)
+import { setItem, getItem } from '@/utils/storage'
+
 // 创建 axios 实例
 const request = axios.create({
   // API 请求的默认前缀
@@ -59,7 +59,7 @@ request.interceptors.request.use(config => {
   // if (token) {
     // config.headers['Access-Token'] = token
   // }
-
+  config.headers['token'] = getItem('token')
   config.headers['Access-Control-Allow-Origin'] = '*'
 
   console.log(config)

operation-frontend/src/views/operation/Statistic.vue

@@ -20,11 +20,12 @@
               {{ item.label }}
             </div>
             <div class="indicator-statistic-item-count">
-              {{ item.count }}
-              <a-icon type="arrow-up" class="arrow-up" :style="{ fontSize: '16px', color: '#52c41a' }"/>
+              {{ statisticData[item.count] }}
+              <a-icon v-if="statisticData[item.rate] < 0" type="arrow-down" class="arrow-up" :style="{ fontSize: '16px', color: 'rgb(207, 19, 34)' }"/>
+              <a-icon v-else type="arrow-up" class="arrow-up" :style="{ fontSize: '16px', color: '#52c41a' }"/>
             </div>
             <div class="indicator-statistic-item-rate">
-              {{ item.rate }}
+              {{ statisticData[item.rate] }}%
             </div>
           </a-col>
           <!-- </div> -->
@@ -36,39 +37,54 @@
 </template>
 
 <script>
+import { getSummary } from '@/api/operation'
 const statistic = [
     {
         label: '昨日新增',
-        count: 80,
-        rate: '151.52%'
+        count: 'addNum',
+        rate: 'addRate'
     },
     {
         label: '昨日取关',
-        count: 80,
-        rate: '151.52%'
+        count: 'cancelNum',
+        rate: 'cancelRate'
     },
     {
         label: '昨日净增',
-        count: 80,
-        rate: '151.52%'
+        count: 'newNum',
+        rate: 'newRate'
     },
     {
         label: '昨日活跃',
-        count: 80,
-        rate: '151.52%'
+        count: 'inactiveNum',
+        rate: 'inactiveRate'
     },
     {
         label: '总粉丝',
-        count: 80,
-        rate: '151.52%'
+        count: 'totalFansNum',
+        rate: 'totalFansRate'
     }
 ]
 export default {
   name: 'Statistic',
+  created () {
+    this.getSummary()
+  },
   data () {
       return {
-           statistic
+        statistic,
+        statisticData: {}
       }
+  },
+  methods: {
+    // 查询公众号统计数据概览
+    async getSummary () {
+     const { data, code } = await getSummary()
+     if (code === 200) {
+       console.log(data)
+        this.statisticData = data
+     }
+    }
   }
 }
 </script>

operation-frontend/src/views/operation/data-view/index.vue

@@ -11,9 +11,9 @@
           :xl="4"
           :class="['official-accounts-item', 'cp', index === currentTabsIndex ? 'official-accounts-item-active' : '' ]"
           @click="currentTabs(index)"
-          v-for="(item, index) in arr"
+          v-for="(item, index) in accountList"
           :key="index">
-          <img class="official-accounts-item-img" :src="item.img" alt="">  {{ item.name }}
+          <img class="official-accounts-item-img" :src="item.headImage" alt="">  {{ item.nickName }}
         </a-col>
       </a-row>
 
@@ -29,9 +29,7 @@
             suffix="%"
             :value-style="{ color: item.count > 0 ? '#3f8600' : '#cf1322' }"
             style="margin-right: 50px"
-
           >
-
             <template #prefix>
               <a-icon :type="item.count > 0 ? 'arrow-up' : 'arrow-down'" />
             </template>
@@ -39,10 +37,24 @@
         </a-card>
       </a-col>
     </a-row>
+
+    <!-- 粉丝属性 -->
+    <div class="fans-property">
+      <div class="fans-property-box">
+        <div class="fans-property-box-item" v-for="(item, index) in proList" :key="index">
+          {{ item.title }}
+        </div>
+      </div>
+
+      <div class="fans-property-line">
+
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { getAccount } from '@/api/wxchat'
 const official = [
     {
         img: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ7PXOg8UQskrEjqSwywYib5UYqjyAdKTr1ickq03BDOg9xtWIk108SsfHzd6PIXERRkVQSj9pXKsmw/132',
@@ -60,6 +72,33 @@ for (let i = 0; i < 5; i++) {
 }
 
 arr.push({ name: 'serve-idiot', img: 'https://avatars1.githubusercontent.com/u/71005599?s=88&v=4' })
+
+const proList = [
+    {
+          title: '粉丝增长',
+          componentsName: 'fansAdd'
+        },
+        {
+          title: '粉丝属性',
+          componentsName: 'fansPro'
+        },
+        {
+          title: '活跃度',
+          componentsName: 'fansActive'
+        },
+        {
+          title: '忠诚度',
+          componentsName: 'fansLoyal'
+        },
+        {
+          title: '图文影响力',
+          componentsName: 'imageText'
+        },
+        {
+          title: '互动消息',
+          componentsName: 'toNews'
+    }
+]
 const statictis = [
     {
         title: '昨日新增',
@@ -94,17 +133,29 @@ const statictis = [
 ]
 export default {
   name: 'DataView',
+  created () {
+    this.getAccount()
+  },
   data () {
       return {
           official,
-          arr,
+          accountList: [],
           currentTabsIndex: 0,
-          statictis
+          statictis,
+          proList
       }
   },
   methods: {
       currentTabs (index) {
         this.currentTabsIndex = index
+      },
+      // 获取公众号列表
+      async getAccount () {
+       const { data, code } = await getAccount()
+       if (code === 200) {
+         console.log(data)
+         this.accountList = data
+       }
       }
   }
 }
@@ -115,16 +166,16 @@ export default {
     height: 500px;
     background-color: #fff;
     .official-accounts {
+        width: 100%;
         background-color: #f0f2f5;
-        // display: flex;
-        // border: 1px solid #d9d9d9;
+        border: 1px solid #d9d9d9;
         &-item {
             height: 40px;
             display: flex;
             justify-content: center;
             align-items: center;
-            border-bottom: 1px solid #d9d9d9;
-            border-top: 1px solid #d9d9d9;
+            // border-bottom: 1px solid #d9d9d9;
+            // border-top: 1px solid #d9d9d9;
             &-img {
                 width: 30px;
                 height: 30px;
@@ -133,13 +184,34 @@ export default {
         }
         &-item-active {
             background-color: #fff;
-            font-size: 18px;
-            border-bottom: 1px solid #fff;
+            // font-size: 18px;
+            // border-bottom: 1px solid #fff;
             box-sizing: border-box;
         }
     }
     .statictis {
         padding: 20px;
     }
+    .fans-property {
+
+      &-box {
+        display: flex;
+        &-item {
+          width: 150px;
+          height: 41px;
+          text-align: center;
+          line-height: 41px;
+          border: 1px solid #d9d9d9;
+          background: #f7f7f7;
+          margin-right: 5px;
+        }
+      }
+
+      &-line {
+        width: 100%;
+        height: 1px;
+        background-color: #d9d9d9;
+      }
+    }
 }
 </style>