Kaynağa Gözat

统计总数

zhuxinbo 5 yıl önce
ebeveyn
işleme
9cc46ceda5

+ 1 - 0
package.json

@@ -23,6 +23,7 @@
     "clipboard": "^2.0.4",
     "codemirror": "^5.46.0",
     "dayjs": "^1.8.0",
+    "echarts": "^4.3.0",
     "enquire.js": "^2.1.6",
     "html2canvas": "^1.0.0-rc.3",
     "iview": "2.0.0-rc.17",

+ 21 - 0
src/api/video.js

@@ -96,4 +96,25 @@ export function getAccountReport() {
       method: 'get',
     //   params: parameter
     })
+}
+
+
+//快手当前账号下的数据集合
+export function getKsAccountReport(parameter) {
+    return axios({
+      url: "/ctop/report/kuaiShou/accountReport",
+      method: 'post',
+      data: parameter
+    })
+}
+
+// 当日明细
+// /accountReport/kuaiShou/accountDetailReport
+//快手当前账号下的数据集合
+export function getKsDetail(parameter) {
+    return axios({
+      url: "/ctop/report/kuaiShou/accountDetailReport",
+      method: 'post',
+      data: parameter
+    })
 }

+ 316 - 62
src/views/modules/Statistics/Statistics.vue

@@ -1,53 +1,88 @@
 <style>
-@media (min-width: 1024px) {
-  .checkbox_item_container {
-    width: 70%;
-  }
-} /*>=1024的设备*/
-
-@media (min-width: 1100px) {
-  .checkbox_item_container {
-    width: 70%;
-  }
-} /*>=1100的设备*/
-@media (min-width: 1280px) {
-  .checkbox_item_container_size {
-    width: 70%;
-  }
-}
-
-/*>=1280的设备*/
-
-@media (min-width: 1366px) {
-}
-
-@media (min-width: 1440px) {
+.statistics .ant-col-6 {
+  margin: 10px 0;
 }
-
-@media (min-width: 1680px) {
+.statistics .ant-col-6 p,
+.statistics .ant-col-6 span {
+  display: block;
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 400;
+  color: red;
+  margin: 0;
 }
-@media (min-width: 1920px) {
-  .checkbox_item_container_size {
-    width: 50%;
-  }
+.search .ant-card-body {
+  padding-left: 15px;
 }
-.vm-video-list .ant-comment-inner {
-  padding: 0;
+.search span {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 3px;
+  cursor: pointer;
 }
 </style>
 <template>
-  <div class="vm-video-list">
+  <div class="statistics">
     <a-row class="image-list-heading vm-panel">
       <a-row>
         <div class="panel-heading">{{ title }}</div>
       </a-row>
     </a-row>
-    <a-row class="image-list" :gutter="16" style="padding:0 8px">
-      <a-col :span="12">
-        <div id="chart">
-          <apexchart width="50%" height="300" type="bar" :options="options" :series="series"></apexchart>
-        </div>
+    <a-row>
+      <a-col :span="24">
+        <a-card :bordered="false" class="search">
+          <span :style="active==1?'color:blue':''" @click="getAdd(1)">今天</span>
+          <span :style="active==2?'color:blue':''" @click="getAdd(2)">昨天</span>
+          <span :style="active==3?'color:blue':''" @click="getAdd(3)">近一周</span>
+          <span :style="active==4?'color:blue':''" @click="getAdd(4)">近十五天</span>
+          <span :style="active==5?'color:blue':''" @click="getAdd(5)">近一月</span>
+          <span :style="active==6?'color:blue':''" @click="getAdd(6)">近三月</span>
+          <span :style="active==7?'color:blue':''" @click="getAdd(7)">近半年</span>
+          <span :style="active==8?'color:blue':''" @click="getAdd(8)">所有</span>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="16" v-if="kuaishou">
+      <a-col :span="6">
+        <a-card title="总消耗" :bordered="false">
+          <!-- <p>{{kuaishou.cost}}</p> -->
+
+          <countTo :startVal="0" :endVal="kuaishou.cost" :duration="duration" :decimals="2"></countTo>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="封面点击数" :bordered="false">
+          <!-- <p>{{kuaishou.photoClick}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.photoClick" :duration="duration" :decimals="0"></countTo>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="封面曝光数" :bordered="false">
+          <!-- <p>{{kuaishou.photoShow}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.photoShow" :duration="duration" :decimals="0"></countTo>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="素材曝光数" :bordered="false">
+          <!-- <p>{{kuaishou.aclick}}</p> -->
+           <countTo :startVal="0" :endVal="kuaishou.aclick" :duration="duration" :decimals="0"></countTo>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="10">
+      <a-col :span="24">
+        <a-card title="快手">
+          <div id="chart" style="width:100%;height:350px"></div>
+        </a-card>
       </a-col>
+      <!-- <a-col :span="12">
+        <a-card title="快手">
+          <div id="chart1" style="width:100%;height:500px"></div>
+        </a-card>
+      </a-col>-->
     </a-row>
   </div>
 </template>
@@ -55,13 +90,27 @@
 <script>
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
-import axios from 'axios'
-import { getAccountReport } from '@api/video.js'
+
+import countTo from 'vue-count-to'
+import { getAccountReport, getKsAccountReport, getKsDetail } from '@api/video.js'
+import { getAction, postAction } from '@/api/manage'
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+require('echarts/lib/chart/pie')
+
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+require('echarts/lib/component/graphic')
+
 export default {
   name: 'statistics',
   components: {
     ACol,
-    ARow
+    ARow,
+    countTo
   },
 
   data: function() {
@@ -69,6 +118,11 @@ export default {
       title: '报表统计',
       statistics: [],
       showData: null,
+      kuaishou: null,
+      chart: null,
+      chart1: null,
+      active: 1,
+      duration: 1000,
       options: {
         chart: {
           id: 'vuechart-example'
@@ -86,6 +140,13 @@ export default {
     }
   },
   methods: {
+    getAdd(checked) {
+      console.log(checked)
+      this.active = checked
+      this.drawLine(checked).then(() => {
+        this.drawPie()
+      })
+    },
     updateChart() {
       //   const max = 90
       //   const min = 20
@@ -103,35 +164,228 @@ export default {
           data: newData
         }
       ]
-    }
-  },
-  watch: {},
-  mounted: function() {
-    this.$nextTick(() => {
-      getAccountReport().then(res => {
-        var dataNew = []
-        var dataX = []
-        for (const key in res.bytedance) {
-          dataNew.push(res.bytedance[key])
-          dataX.push(key)
+    },
+    drawLine(type) {
+      var that = this
+      getKsDetail({ type: type }).then(res => {
+        console.log(res)
+      })
+      return new Promise(function(resolve) {
+        let params = {}
+        params.type = type
+        getKsAccountReport(params).then(res => {
+          var dataNew = []
+          var dataX = []
+          console.log(res)
+          that.kuaishou = res
+
+          resolve()
+        })
+      })
+    },
+    drawPie() {
+      var scaleData = [
+        {
+          name: '封面点击数',
+          value: this.kuaishou.photoClick
+        },
+        {
+          name: '封面曝光数',
+          value: this.kuaishou.photoShow
+        },
+        {
+          name: '素材曝光数',
+          value: this.kuaishou.aclick
+        }
+      ]
+      var placeHolderStyle = {
+        normal: {
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          color: 'rgba(0, 0, 0, 0)',
+          borderColor: 'rgba(0, 0, 0, 0)',
+          borderWidth: 0
         }
-        var indexX = dataX.findIndex(v => v === 'cost')
-        dataX.splice(indexX, 1)
-        dataNew.splice(indexX, 1)
-        this.series = [
+      }
+      var data = []
+      var color = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)']
+      var colorBorder = ['rgba(255, 153, 153, 0.4)', 'rgba(255, 176, 63, 0.4)', 'rgba(61, 186, 45, 0.4)']
+      for (var i = 0; i < scaleData.length; i++) {
+        data.push(
+          {
+            data: scaleData[i].value,
+            value: 20,
+            name: scaleData[i].name,
+            itemStyle: {
+              normal: {
+                color: color[i],
+                borderWidth: 20,
+                borderColor: colorBorder[i]
+              }
+            }
+          },
           {
-            data: dataNew
+            value: 8,
+            name: '',
+            itemStyle: placeHolderStyle
           }
-        ]
-        this.options = {
-          chart: {
-            id: 'vuechart-example'
+        )
+      }
+      data.push({
+        value: 40,
+        name: '',
+        itemStyle: placeHolderStyle
+      })
+      var seriesObj = [
+        {
+          name: '',
+          type: 'pie',
+          center: ['50%', '70%'],
+          clockWise: false,
+          radius: [100, 200],
+          hoverAnimation: false,
+          startAngle: -22,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                position: 'inner',
+                fontSize: 14,
+                lineHeight: 15,
+                formatter: function(params) {
+                  var percent = 0
+                  var total = 0
+                  for (var i = 0; i < scaleData.length; i++) {
+                    total += scaleData[i].value
+                  }
+                  percent = ((params.value / total) * 100).toFixed(0)
+                  if (params.name !== '') {
+                    // return params.name + '\n' + params.data.data;
+                    if (params.name.length > 4) {
+                      return params.name.slice(0, 3) + '\n' + params.name.slice(3)
+                    } else {
+                      return params.name
+                    }
+                  } else {
+                    return ''
+                  }
+                }
+              },
+              labelLine: {
+                length: 30,
+                length2: 60,
+                show: true
+              }
+            }
           },
-          xaxis: {
-            categories: dataX
+          data: data
+        },
+        {
+          name: '',
+          type: 'pie',
+          clockWise: false,
+          center: ['50%', '70%'],
+          radius: [100, 200],
+          hoverAnimation: false,
+          startAngle: -22,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                position: 'outside',
+                fontSize: 18,
+                formatter: function(params) {
+                  var percent = 0
+                  var total = 0
+                  for (var i = 0; i < scaleData.length; i++) {
+                    total += scaleData[i].value
+                  }
+                  percent = ((params.value / total) * 100).toFixed(0)
+                  if (params.name !== '') {
+                    return params.data.data
+                  } else {
+                    return ''
+                  }
+                }
+              },
+              labelLine: {
+                length: 30,
+                length2: 60,
+                show: true
+              }
+            }
+          },
+          data: data
+        }
+      ]
+      var option = {
+        backgroundColor: '#fff',
+        tooltip: {
+          show: false
+        },
+        legend: {
+          show: false
+        },
+        toolbox: {
+          show: false
+        },
+        series: seriesObj,
+        graphic: [
+          {
+            type: 'group',
+            left: 'center',
+            top: '65%',
+            children: [
+              {
+                type: 'text',
+                z: 100,
+                left: 'center',
+                top: '0',
+                style: {
+                  fill: '#333',
+                  text: ['总消耗'],
+                  font: '16px Microsoft YaHei'
+                }
+              },
+              {
+                type: 'text',
+                z: 100,
+                left: 'center',
+                top: '32',
+                style: {
+                  fill: 'red',
+                  text: [this.kuaishou.cost],
+                  font: '26px Microsoft YaHei'
+                }
+              }
+            ]
           }
+        ]
+      }
+      this.chart = echarts.init(document.getElementById('chart'))
+      this.chart.setOption(option)
+      this.chart.on('click', param => {
+        if (param.name == '总展示') {
+          alert(123)
         }
       })
+    }
+  },
+  watch: {},
+  mounted: function() {
+    this.$nextTick(() => {
+      var that = this
+      this.drawLine(1).then(() => {
+        this.drawPie()
+      })
+      //   window.onresize = function() {
+      //     that.chart1.resize()
+      //     that.chart.resize()
+      //   }
     })
   }
 }

BIN
src/views/modules/video/images/loading.gif


+ 29 - 21
src/views/modules/video/video.vue

@@ -103,27 +103,33 @@
             <a-icon type="edit" />
             <a-icon type="ellipsis" />
           </template>
-          <!-- <div v-if="item.commentList"> -->
-          <div style="height:200px;overflow:auto" v-if="item.commentList.length>0">
-            <a-comment v-for="(items,idx) of item.commentList" :key="idx">
-              <a slot="author">
-                <input type="checkbox" />
-                {{items.authorName}}
-              </a>
-              <p
-                slot="content"
-                style="display: flex;justify-content: space-between;white-space: nowrap;"
-              >
-                {{items.content}}
-                <span @click="remove(item,items,idx)" style="margin-right:5px">删除</span>
-              </p>
-            </a-comment>
+          <div style="position:relative">
+            <div
+              style="width:100%;height:200px;position: absolute;z-index:3;background:white;display:flex;justify-content:center;align-items:center"
+              v-if="item.loading"
+            >
+              <img src="./images/loading.gif" alt />
+            </div>
+            <div style="height:200px;overflow:auto;" v-if="item.commentList.length>0">
+              <a-comment v-for="(items,idx) of item.commentList" :key="idx">
+                <a slot="author">
+                  <input type="checkbox" />
+                  {{items.authorName}}
+                </a>
+                <p
+                  slot="content"
+                  style="display: flex;justify-content: space-between;white-space: nowrap;"
+                >
+                  {{items.content}}
+                  <span @click="remove(item,items,idx)" style="margin-right:5px">删除</span>
+                </p>
+              </a-comment>
+            </div>
+            <div
+              v-else
+              style="height:200px;display:flex;justify-content:center;align-items:center"
+            >暂无评论</div>
           </div>
-          <div
-            v-else
-            style="height:200px;display:flex;justify-content:center;align-items:center"
-          >暂无评论</div>
-          <!-- </div> -->
         </a-card>
       </a-col>
     </a-row>
@@ -230,7 +236,8 @@ export default {
           var data = res.result.data.publicFeeds.list.map(item => {
             return {
               ...item,
-              commentList: []
+              commentList: [],
+              loading: true
             }
           })
           this.pcursor = res.result.data.publicFeeds.pcursor
@@ -241,6 +248,7 @@ export default {
               ;(function(a) {
                 setTimeout(function() {
                   that.getCommentList(ksid, that.dataShow[a].photoId).then(dataOne => {
+                    that.dataShow[a].loading = false
                     if (dataOne && that.dataShow[a]) {
                       that.dataShow[a].commentList = dataOne.commentList
                     } else {

+ 2 - 2
vue.config.js

@@ -64,8 +64,8 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
-        // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目
+        // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
+        target: 'http://192.168.2.130:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.43.23:8080', //请求本地 需要jeecg-boot后台项目
         ws: false,
         changeOrigin: true