Forráskód Böngészése

数据统计完成

zhuxinbo 5 éve
szülő
commit
4633543f03
2 módosított fájl, 374 hozzáadás és 133 törlés
  1. 269 91
      src/views/modules/Statistics/Statistics.vue
  2. 105 42
      src/views/modules/video/video.vue

+ 269 - 91
src/views/modules/Statistics/Statistics.vue

@@ -41,6 +41,10 @@
   text-align: left;
   color: red;
   font-size: 16px;
+  font-weight: 500;
+}
+.ant-table-pagination {
+  display: none;
 }
 </style>
 <template>
@@ -96,12 +100,7 @@
             class="styleElse"
             style="color:#0bcd74;"
           />
-          <a-icon
-            v-else-if="active==1"
-            type="minus"
-            class="styleElse"
-            style="color:#0bcd74"
-          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
           <span
             v-if="active==1"
             :style="kuaishou.costProportion>0?'color:red':'color:#0bcd74'"
@@ -126,12 +125,7 @@
             class="styleElse"
             style="color:#0bcd74"
           />
-          <a-icon
-            v-else-if="active==1"
-            type="minus"
-            class="styleElse"
-            style="color:#0bcd74"
-          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
           <span
             v-if="active==1"
             :style="kuaishou.photoClickProportion>0?'color:red':'color:#0bcd74'"
@@ -156,12 +150,7 @@
             class="styleElse"
             style="color:#0bcd74;"
           />
-          <a-icon
-            v-else-if="active==1"
-            type="minus"
-            class="styleElse"
-            style="color:#0bcd74"
-          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
           <span
             v-if="active==1"
             :style="kuaishou.showProportion>0?'color:red':'color:#0bcd74'"
@@ -187,12 +176,7 @@
             class="styleElse"
             style="color:#0bcd74;"
           />
-          <a-icon
-            v-else-if="active==1"
-            type="minus"
-            class="styleElse"
-            style="color:#0bcd74"
-          />
+          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
           <span
             v-if="active==1"
             :style="kuaishou.aClickProportion>0?'color:red':'color:#0bcd74'"
@@ -240,7 +224,6 @@
       <a-row :gutter="15" style="margin-bottom:15px;margin-top:15px" v-if="contrastDataAll">
         <a-col :span="6">
           <a-card title="总消耗对比">
-            <!-- <div id="chart3" style="width:100%;height:186px"></div> -->
             <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.cost}}</p>
             <p>
               {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.cost}}
@@ -367,7 +350,6 @@
       <a-row v-else>
         <a-col :span="24" style="text-align:center;height:186px;line-height:186px">暂无数据</a-col>
       </a-row>
-
       <a-row :gutter="10">
         <a-col :span="24">
           <a-card
@@ -380,7 +362,29 @@
           </a-card>
         </a-col>
       </a-row>
+      <a-row style="margin-bottom:15px;margin-top:15px" v-if="dataTableTwo.length>0">
+        <a-col :span="24">
+          <a-card
+            :tabList="tableCard"
+            :activeTabKey="noTitleKeyTableTwo"
+            @tabChange="key => onTabChange(key, 'noTitleKeyTableTwo')"
+          >
+            <a-table :columns="columns" :dataSource="dataTableTwo" :pagination="false"></a-table>
+          </a-card>
+        </a-col>
+      </a-row>
     </a-modal>
+    <a-row style="margin-bottom:15px;margin-top:15px">
+      <a-col :span="24">
+        <a-card
+          :tabList="tableNowCard"
+          :activeTabKey="noTitleKeyTable"
+          @tabChange="key => onTabChange(key, 'noTitleKeyTable')"
+        >
+          <a-table :columns="columns" :dataSource="dataTable" :pagination="false"></a-table>
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
@@ -403,7 +407,6 @@ require('echarts/lib/component/title')
 require('echarts/lib/component/graphic')
 require('echarts/lib/component/toolbox')
 require('echarts/lib/component/legend')
-
 export default {
   name: 'statistics',
   components: {
@@ -414,6 +417,17 @@ export default {
 
   data: function() {
     return {
+      columns: [
+        { title: '时间', dataIndex: 'statDate' },
+        { title: '总消耗', dataIndex: 'cost' },
+        { title: '封面点击数', dataIndex: 'photoClick' },
+        { title: '封面曝光数', dataIndex: 'photoShow' },
+        { title: '素材曝光数', dataIndex: 'aclick' }
+      ],
+      dataTable: [],
+      dataTableTwo: [],
+      dataAllTableTwo: null,
+      dataAllTable: null,
       title: '报表统计',
       visible: false,
       statistics: [],
@@ -453,8 +467,30 @@ export default {
           tab: '素材曝光数'
         }
       ],
+      tableCard: [
+        {
+          key: 'small',
+          tab: '前'
+        },
+        {
+          key: 'big',
+          tab: '后'
+        }
+      ],
+      tableNowCard: [
+        {
+          key: 'now',
+          tab: '今天'
+        },
+        {
+          key: 'yesterday',
+          tab: '昨天'
+        }
+      ],
+      noTitleKeyTableTwo: 'small',
       noTitleKey: 'cost',
       noTitleKeyTwo: 'cost',
+      noTitleKeyTable: 'now',
       chart: null,
       chart1: null,
       active: 1,
@@ -464,6 +500,9 @@ export default {
     }
   },
   methods: {
+    a(item) {
+      console.log(item)
+    },
     moment,
     clear() {
       this.twoMonth = null
@@ -471,6 +510,8 @@ export default {
       this.contrastDataAll = null
       this.contrastDataList = null
       this.contrastValue = []
+      this.dataTableTwo = []
+      this.dataAllTableTwo = null
       if (this.chart) {
         this.chart.clear()
       }
@@ -490,9 +531,7 @@ export default {
         params.smallDate = moment(this.contrastValue[0]._d).format('YYYY-MM-DD')
         params.bigDate = moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
       }
-      getReportList(params).then(res => {
-        console.log(res)
-      })
+
       getKsAccountReport(params).then(res => {
         console.log(res)
         if (res.compared) {
@@ -506,70 +545,83 @@ export default {
         this.contrastDataList = res
         this.drawSearchLine(this.noTitleKeyTwo, res)
       })
+      getReportList(params).then(res => {
+        this.tableCard = [
+          {
+            key: 'small',
+            tab: res[0].beStatDate
+          },
+          {
+            key: 'big',
+            tab: res[0].statDate
+          }
+        ]
+        this.noTitleKeyTableTwo = 'small'
+        if (this.value == 'day') {
+          this.dataAllTableTwo = res[0]
+          this.dataTableTwo = res[0].beComparedDetail.map((item, index) => {
+            return {
+              ...item,
+              statDate: item.statDate + ' ' + item.statHour + '时',
+              key: index
+            }
+          })
+        } else {
+          this.dataAllTableTwo = res[0]
+          this.dataTableTwo = res[0].beComparedDetail
+        }
+      })
+    },
+    getReportList(checked, dateValue) {
+      let params = {}
+      params.type = checked
+      if (this.active == 9) {
+        params.startDate = dateValue[0]
+        params.endDate = dateValue[1]
+      }
+      getReportList(params).then(res => {
+        if (this.active == 1) {
+          this.dataAllTable = res[0]
+          this.dataTable = res[0].now.map((item, index) => {
+            return {
+              key: index,
+              ...item,
+              statDate:
+                this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
+            }
+          })
+        } else {
+          this.dataTable = res.map((item, index) => {
+            return {
+              key: index,
+              ...item,
+              statDate:
+                this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
+            }
+          })
+        }
+      })
     },
     drawPieAll(data) {
+      var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', 'rgba(250,250,250,0.5)']
       var option = {
-        title: {
-          text: '61.3%',
-          textStyle: {
-            color: '#e41c1c',
-            fontSize: 20
-          },
-          subtext: '人口城镇化率',
-          subtextStyle: {
-            color: '#999'
-          },
-          top: '50%',
-          right: '2%'
-        },
         tooltip: {
           trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}万 ({d}%)'
+          formatter: '{a} <br/>{b} : {c}'
         },
-        color: ['#e41c1c', '#142944'],
+
         series: [
           {
-            name: '城乡结构',
+            name: '总消耗对比',
             type: 'pie',
-            radius: '80%',
-            center: ['50%', '60%'],
-            selectedMode: 'single',
-            hoverOffset: 3,
-            selectedOffset: 5,
-            label: {
-              normal: {
-                show: true,
-                position: 'inside',
-                color: '#fff',
-                formatter: '{b}\n {d}%'
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false,
-                length: 3,
-                length2: 5
-              }
-            },
-            data: [
-              {
-                value: data.compared.cost,
-                name: '2019-09',
-                selected: true
-              },
-              {
-                value: data.beCompared.cost,
-                name: '2019-10'
-              }
-            ],
+            radius: '35%',
+            center: ['50%', '50%'],
+            data: [{ value: 944332, name: '2019-09' }, { value: 6839241.89, name: '2019-10' }],
             itemStyle: {
               normal: {
-                borderColor: '#fff',
-                borderWidth: 2,
-                shadowBlur: 2,
-                shadowOffsetX: 0,
-                shadowColor: '#00a5f4',
-                opacity: 1
+                color: function(params) {
+                  return colorList[params.dataIndex]
+                }
               }
             }
           }
@@ -805,6 +857,50 @@ export default {
       this[type] = key
       if (type == 'noTitleKey') {
         this.drawPie(key, this.dataDetail)
+      } else if (type == 'noTitleKeyTable') {
+        this.dataTable = []
+        if (key == 'now') {
+          this.dataTable = this.dataAllTable.now.map((item, index) => {
+            return {
+              key: index,
+              ...item,
+              statDate: item.statDate + ' ' + item.statHour + '时'
+            }
+          })
+        } else {
+          this.dataTable = this.dataAllTable.yesterday.map((item, index) => {
+            return {
+              key: index,
+              ...item,
+              statDate: item.statDate + ' ' + item.statHour + '时'
+            }
+          })
+        }
+      } else if (type == 'noTitleKeyTableTwo') {
+        this.dataTableTwo = []
+        if (key == 'small') {
+          if (this.value == 'day') {
+            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map(item => {
+              return {
+                ...item,
+                statDate: item.statDate + ' ' + item.statHour + '时'
+              }
+            })
+          } else {
+            this.dataTableTwo = this.dataAllTableTwo.beComparedDetail
+          }
+        } else {
+          if (this.value == 'day') {
+            this.dataTableTwo = this.dataAllTableTwo.comparedDetail.map(item => {
+              return {
+                ...item,
+                statDate: item.statDate + ' ' + item.statHour + '时'
+              }
+            })
+          } else {
+            this.dataTableTwo = this.dataAllTableTwo.comparedDetail
+          }
+        }
       } else {
         this.drawSearchLine(key, this.contrastDataList)
       }
@@ -822,15 +918,96 @@ export default {
       }
       console.log(checked)
       this.active = checked
-      let params = {}
-      params.type = checked
-      if (checked == 9) {
-        params.startDate = this.allValue[0]
-        params.endDate = this.allValue[1]
+      var arr = [
+        {
+          key: 'now',
+          tab: '今天'
+        },
+        {
+          key: 'yesterday',
+          tab: '昨天'
+        }
+      ]
+      switch (checked) {
+        case 1:
+          arr = [
+            {
+              key: 'now',
+              tab: '今天'
+            },
+            {
+              key: 'yesterday',
+              tab: '昨天'
+            }
+          ]
+          break
+        case 2:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: '昨天'
+            }
+          ]
+          break
+        case 3:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: '近一周'
+            }
+          ]
+          break
+        case 4:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: '近十五天'
+            }
+          ]
+          break
+        case 5:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: '近一月'
+            }
+          ]
+          break
+        case 6:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: '近三月'
+            }
+          ]
+          break
+        case 7:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: '近半年'
+            }
+          ]
+          break
+        case 8:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: '所有'
+            }
+          ]
+          break
+        case 9:
+          arr = [
+            {
+              key: 'yesterday',
+              tab: this.allValue[1] + ' ~ ' + this.allValue[0]
+            }
+          ]
+          break
       }
-      getReportList(params).then(res => {
-        console.log(res)
-      })
+      this.tableNowCard = arr
+      this.getReportList(checked, this.allValue)
       this.drawLine(checked, this.allValue)
       this.getKsDetail(checked, this.allValue).then(res => {
         this.drawPie(this.noTitleKey, res)
@@ -1096,6 +1273,7 @@ export default {
       this.getKsDetail(1).then(res => {
         this.drawPie('cost', res)
       })
+      this.getReportList(1, that.allValue)
       //   window.onresize = function() {
       //     that.chart1.resize()
       //     that.chart.resize()

+ 105 - 42
src/views/modules/video/video.vue

@@ -48,6 +48,12 @@
 .ant-comment-content-detail {
   word-wrap: break-word;
   word-break: normal;
+
+}
+.ant-comment-content-detail p {
+  word-wrap: break-word;
+  word-break: normal;
+  white-space: initial !important;
 }
 .vm-video-list .ant-card-actions li span {
   width: 90%;
@@ -61,6 +67,9 @@
 .ant-comment-nested {
   margin-left: 10px;
 }
+.ant-comment-content-author-name {
+  width: 100%;
+}
 </style>
 <template>
   <div class="vm-video-list">
@@ -121,6 +130,7 @@
               style="height:300px;width:auto;position:absolute;z-index:10;top:0"
             />
           </div>
+
           <template class="ant-card-actions" slot="actions">
             <a-input placeholder="请输入评论内容" v-model="item.keyword" style="width:100%">
               <div slot="addonAfter" @click="addComment(item,index)">评论</div>
@@ -137,58 +147,81 @@
               style="height:200px;overflow-y:auto;"
               class="scrollBox"
               @scroll="scrollGet(item,index)"
-              v-show="item.commentList.length>0"
             >
-              <a-comment v-for="(items,idx) of item.commentList" :key="idx">
-                <span
-                  slot="actions"
-                  v-if="items.subComments.length>0"
-                  @click="items.show=!items.show"
-                >更多评论</span>
-                <a slot="author">
-                  <input type="checkbox" />
-                  {{items.authorName}}
-                </a>
-                <div slot="content" style="display: flex;justify-content: space-between;">
-                  <p style="width:75%">{{items.content}}</p>
-                  <div style="white-space: nowrap;">
-                    <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
-                    <span @click="remove(item,items,index)" style="margin-right:5px">删除</span>
+              <div style="margin-bottom:15px;height:50px">
+                {{item.caption}}
+                <br />
+                <a-icon type="heart" />
+                {{item.likeCount}}
+                <a-icon type="highlight" style="margin-left:10px" />
+                {{item.commentCount}}
+                <a-icon type="play-circle" style="margin-left:10px" />
+                {{item.viewCount}}
+              </div>
+              <div v-show="item.commentList.length>0">
+                <a-comment v-for="(items,idx) of item.commentList" :key="idx">
+                  <span
+                    slot="actions"
+                    v-if="items.subComments.length>0"
+                    @click="items.show=!items.show"
+                    style="color:blue"
+                  >更多评论</span>
+                  <p slot="author">
+                    {{items.authorName}}
+                    <span style="float:right">{{items.timestamp|formatDate}}</span>
+                  </p>
+                  <div slot="content" style="display: flex;justify-content: space-between;">
+                    <p style="width:75%">
+                      <!-- <input type="checkbox" style="margin-right:5px" name id /> -->
+                      {{items.content}}
+                    </p>
+                    <div style="white-space: nowrap;">
+                      <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
+                      <span @click="remove(item,items,index)" style="margin-right:5px">删除</span>
+                    </div>
                   </div>
-                </div>
-                <div v-if="items.subComments.length>0" v-show="items.show">
-                  <a-comment v-for="(itemSub,idxSub) of items.subComments" :key="idxSub">
-                    <a slot="author">{{itemSub.authorName}}</a>
-                    <div slot="content" style="display: flex;justify-content: space-between;">
-                      <p style="width:75%">{{itemSub.content}}</p>
-                      <div>
-                        <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
-                        <span @click="remove(item,itemSub,index)" style="margin-right:5px">删除</span>
+                  <div v-if="items.subComments.length>0" v-show="items.show">
+                    <a-comment v-for="(itemSub,idxSub) of items.subComments" :key="idxSub">
+                      <a slot="author">{{itemSub.authorName}}</a>
+                      <div slot="content" style="display: flex;justify-content: space-between;">
+                        <p style="width:75%">{{itemSub.content}}</p>
+                        <div>
+                          <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
+                          <span @click="remove(item,itemSub,index)" style="margin-right:5px">删除</span>
+                        </div>
                       </div>
-                    </div>
-                  </a-comment>
-                </div>
-              </a-comment>
+                    </a-comment>
+                  </div>
+                </a-comment>
+              </div>
+              <div
+                v-show="item.commentList.length<=0"
+                style="height:130px;display:flex;justify-content:center;align-items:center"
+              >暂无评论</div>
             </div>
-            <div
-              v-show="item.commentList.length<=0"
-              style="height:200px;display:flex;justify-content:center;align-items:center"
-            >暂无评论</div>
           </div>
         </a-card>
       </a-col>
     </a-row>
+    <div
+      style="position:fixed;width:50px;height:100px;right:0;bottom:100px;cursor: pointer;"
+      v-show="scollTop>300"
+      @click="backTop"
+    >
+      <a-icon type="arrow-up" style="font-size:30px" />
+    </div>
     <a-modal title="扫描二维码登录" v-model="showCode" :width="300" @cancel="showCode = false">
       <div style="display: flex;justify-content: center;position:relative">
-        <img :src="qrcode" alt style="width:130px;height:130px;border:1px solid #f2f2f2" />
+        <img :src="qrcode" alt style="width:200px;height:200px;border:1px solid #f2f2f2" />
         <div
-          style="width:130px;height:130px;position:absolute;background:rgba(255,255,255,.9);text-align:center;padding:30px 5px"
+          style="width:200px;height:200px;position:absolute;background:rgba(255,255,255,.9);text-align:center;padding:60px 15px"
           v-show="showShare"
         >
-          <p>
-            {{showTitle}}
-            <span @click="addUser" style="color:red" v-show="showSpan">刷新</span>
-          </p>
+          <div style="margin-bottom:5px">
+            <img :src="url" alt />
+          </div>
+          <p>{{showTitle}}</p>
+          <span @click="addUser" style="color:red;cursor: pointer;" v-show="showSpan">刷新</span>
         </div>
       </div>
     </a-modal>
@@ -201,6 +234,7 @@ import ACol from 'ant-design-vue/es/grid/Col'
 import axios from 'axios'
 var interval, objTimer
 var a = 0
+
 import {
   getLoginQr,
   getUserList,
@@ -236,17 +270,36 @@ export default {
       ksid: null,
       pullRefreshss: true, // 代表可以进行下拉加载,false代表不能
       scollY: null, // 离底部距离有多少
+      scollTop: null,
       pcursor: null,
       repltTo: 0,
       replyToCommentId: 0,
-      length: 0
+      length: 0,
+      url: 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
+    }
+  },
+  filters: {
+    formatDate: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
     }
   },
   methods: {
     scrollGet(item, i, e) {
       var b = document.getElementsByClassName('scrollBox')[i]
       if (b.scrollHeight - b.scrollTop < 250 && item.pcursor != 'no_more') {
-        if (b.scrollHeight - b.scrollTop > 240) {
+        if (b.scrollHeight - b.scrollTop > 235) {
           this.getCommentList(this.ksid, this.dataShow[i].photoId, item.pcursor).then(dataOne => {
             this.dataShow[i].loading = false
             if (dataOne && this.dataShow[i]) {
@@ -316,6 +369,7 @@ export default {
           this.dataShow.push(...data)
           var i = 0
           for (let i = 0; i < that.dataShow.length; i++) {
+            that.dataShow[i].loading = false
             if (that.dataShow[i].commentCount > 0) {
               that.getCommentList(ksid, that.dataShow[i].photoId, null).then(dataOne => {
                 that.dataShow[i].loading = false
@@ -413,7 +467,7 @@ export default {
     scrollChange: function() {
       var _this = this,
         currentPage = { page: this.page }
-      this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight()
+      _this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight()
       // 把下拉刷新置为false,防止多次请求
       if (this.scollY >= -100) {
         if (this.page > this.pageTotal) {
@@ -430,6 +484,10 @@ export default {
         _this.pullRefreshss = true
       }
     },
+    backTop() {
+      document.body.scrollTop = 0
+      document.documentElement.scrollTop = 0
+    },
     addComment(item, index) {
       console.log(item)
       var word = item.keyword.substring(this.length)
@@ -491,16 +549,20 @@ export default {
               if (res.code == 0) {
                 if (res.result) {
                   if (res.result.status == 1) {
+                    that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
                     that.showShare = false
                   } else {
+                    that.url = 'http://static.yximgs.com/s1/i/qr-timeout.36ec907.svg'
                     that.showShare = true
                     that.showSpan = true
                     that.showTitle = res.result.msg
                     if (res.result.status == 3) {
+                      that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
                       that.showSpan = false
                       that.showCode = false
                       that.getUserList()
                     } else if (res.result.status == 2) {
+                      that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
                       that.showSpan = false
                     }
                   }
@@ -511,6 +573,7 @@ export default {
         }
       }, 1000)
       window.onscroll = function() {
+        that.scollTop = that.getScrollTop()
         if (that.ksid) {
           if (that.pcursor != 'no_more') {
             that.scrollChange()