浏览代码

数据展示

zhuxinbo 5 年之前
父节点
当前提交
5c4ebcb5eb
共有 5 个文件被更改,包括 590 次插入119 次删除
  1. 12 0
      src/api/video.js
  2. 17 16
      src/router/index.js
  3. 444 84
      src/views/modules/Statistics/Statistics.vue
  4. 115 17
      src/views/modules/video/video.vue
  5. 2 2
      vue.config.js

+ 12 - 0
src/api/video.js

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

+ 17 - 16
src/router/index.js

@@ -1,17 +1,18 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import {constantRouterMap} from '@/config/router.config'
-
-Vue.use(Router)
-
-const originalPush = Router.prototype.push;
-Router.prototype.push = function push(location) {
-  return originalPush.call(this, location).catch(err => err)
-}
-
-export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  scrollBehavior: () => ({y: 0}),
-  routes: constantRouterMap
+import Vue from 'vue'
+import Router from 'vue-router'
+import {constantRouterMap} from '@/config/router.config'
+
+Vue.use(Router)
+
+const originalPush = Router.prototype.push;
+Router.prototype.push = function push(location) {
+  console.log(location,10001000)
+  return originalPush.call(this, location).catch(err => err)
+}
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  scrollBehavior: () => ({y: 0}),
+  routes: constantRouterMap
 })

+ 444 - 84
src/views/modules/Statistics/Statistics.vue

@@ -107,7 +107,7 @@
             :style="kuaishou.costProportion>0?'color:red':'color:#0bcd74'"
             class="styleElse"
             style="  margin-left:0"
-          >{{(kuaishou.costProportion*100).toFixed(2)+'%'}}</span>
+          >{{Math.abs(kuaishou.costProportion*100).toFixed(2)+'%'}}</span>
         </a-card>
       </a-col>
       <a-col :span="6">
@@ -137,7 +137,7 @@
             :style="kuaishou.photoClickProportion>0?'color:red':'color:#0bcd74'"
             style="margin-left:0"
             class="styleElse"
-          >{{(kuaishou.photoClickProportion*100).toFixed(2)+'%'}}</span>
+          >{{Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%'}}</span>
         </a-card>
       </a-col>
       <a-col :span="6">
@@ -167,7 +167,7 @@
             :style="kuaishou.showProportion>0?'color:red':'color:#0bcd74'"
             class="styleElse"
             style="  margin-left:0"
-          >{{(kuaishou.showProportion*100).toFixed(2)+'%'}}</span>
+          >{{Math.abs(kuaishou.showProportion*100).toFixed(2)+'%'}}</span>
         </a-card>
       </a-col>
       <a-col :span="6">
@@ -198,7 +198,7 @@
             :style="kuaishou.aClickProportion>0?'color:red':'color:#0bcd74'"
             class="styleElse"
             style="  margin-left:0"
-          >{{(kuaishou.aClickProportion*100).toFixed(2)+'%'}}</span>
+          >{{Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%'}}</span>
         </a-card>
       </a-col>
     </a-row>
@@ -215,7 +215,7 @@
       </a-col>
     </a-row>
     <a-modal title="数据对比" v-model="visible" width="80%" class="yincang">
-      <a-radio-group v-model="value" style="margin-bottom:10px">
+      <a-radio-group v-model="value" style="margin-bottom:10px" @change="clear">
         <a-radio-button value="month">对比月</a-radio-button>
         <a-radio-button value="day">对比天</a-radio-button>
       </a-radio-group>
@@ -237,9 +237,10 @@
         />
         <a-button type="primary" style="margin-left:5px" @click="search">查询</a-button>
       </div>
-      <a-row :gutter="15" style="margin-top:15px" v-if="contrastDataAll">
+      <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}}
@@ -265,7 +266,7 @@
                 :style="contrastDataAll.compared.costProportion>0?'color:red':'color:#0bcd74'"
                 class="styleElse"
                 style="  margin-left:0"
-              >{{contrastDataAll.compared.costProportion.toFixed(2)+'%'}}</span>
+              >{{Math.abs(contrastDataAll.compared.costProportion).toFixed(2)+'%'}}</span>
             </p>
           </a-card>
         </a-col>
@@ -296,7 +297,7 @@
                 :style="contrastDataAll.compared.photoClickProportion>0?'color:red':'color:#0bcd74'"
                 class="styleElse"
                 style="  margin-left:0"
-              >{{contrastDataAll.compared.photoClickProportion.toFixed(2)+'%'}}</span>
+              >{{Math.abs(contrastDataAll.compared.photoClickProportion).toFixed(2)+'%'}}</span>
             </p>
           </a-card>
         </a-col>
@@ -327,7 +328,7 @@
                 :style="contrastDataAll.compared.showProportion>0?'color:red':'color:#0bcd74'"
                 class="styleElse"
                 style="  margin-left:0"
-              >{{contrastDataAll.compared.showProportion.toFixed(2)+'%'}}</span>
+              >{{Math.abs(contrastDataAll.compared.showProportion).toFixed(2)+'%'}}</span>
             </p>
           </a-card>
         </a-col>
@@ -358,15 +359,27 @@
                 :style="contrastDataAll.compared.comparedAclick>0?'color:red':'color:#0bcd74'"
                 class="styleElse"
                 style="  margin-left:0"
-              >{{contrastDataAll.compared.comparedAclick.toFixed(2)+'%'}}</span>
+              >{{Math.abs(contrastDataAll.compared.comparedAclick).toFixed(2)+'%'}}</span>
             </p>
           </a-card>
         </a-col>
       </a-row>
       <a-row v-else>
-        <a-col :span="24" style="text-align:center;height:20px;line-height:20px">暂无数据</a-col>
+        <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
+            style="width:100%"
+            :tabList="tabListNoTitle"
+            :activeTabKey="noTitleKeyTwo"
+            @tabChange="key => onTabChange(key, 'noTitleKeyTwo')"
+          >
+            <div id="chart1" style="width:100%;height:500px"></div>
+          </a-card>
+        </a-col>
       </a-row>
-      <div id="chart1" style="width:100%;height:500px"></div>
     </a-modal>
   </div>
 </template>
@@ -376,7 +389,7 @@ import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import moment from 'moment'
 import countTo from 'vue-count-to'
-import { getAccountReport, getKsAccountReport, getKsDetail } from '@api/video.js'
+import { getAccountReport, getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
 import { getAction, postAction } from '@/api/manage'
 // 引入基本模板
 let echarts = require('echarts/lib/echarts')
@@ -389,6 +402,7 @@ require('echarts/lib/component/tooltip')
 require('echarts/lib/component/title')
 require('echarts/lib/component/graphic')
 require('echarts/lib/component/toolbox')
+require('echarts/lib/component/legend')
 
 export default {
   name: 'statistics',
@@ -401,7 +415,7 @@ export default {
   data: function() {
     return {
       title: '报表统计',
-      visible: true,
+      visible: false,
       statistics: [],
       showData: null,
       startValue: [],
@@ -440,15 +454,27 @@ export default {
         }
       ],
       noTitleKey: 'cost',
+      noTitleKeyTwo: 'cost',
       chart: null,
       chart1: null,
       active: 1,
       duration: 1000,
-      dataDetail: null
+      dataDetail: null,
+      contrastDataList: []
     }
   },
   methods: {
     moment,
+    clear() {
+      this.twoMonth = null
+      this.oneMonth = null
+      this.contrastDataAll = null
+      this.contrastDataList = null
+      this.contrastValue = []
+      if (this.chart) {
+        this.chart.clear()
+      }
+    },
     search() {
       var params = {}
       params.type = 10
@@ -461,21 +487,315 @@ export default {
           this.$message.error('请选择两个需要对比的数据')
         }
       } else if (this.value == 'day') {
-        params.smallDate = moment(this.startValue[0]._d).format('YYYY-MM-DD')
-        params.bigDate = moment(this.startValue[1]._d).format('YYYY-MM-DD')
+        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) {
           this.contrastDataAll = res
+          //   this.drawPieAll(res)
         } else {
           this.contrastDataAll = null
         }
       })
       getKsDetail(params).then(res => {
-        console.log(res)
+        this.contrastDataList = res
+        this.drawSearchLine(this.noTitleKeyTwo, res)
       })
     },
+    drawPieAll(data) {
+      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}%)'
+        },
+        color: ['#e41c1c', '#142944'],
+        series: [
+          {
+            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'
+              }
+            ],
+            itemStyle: {
+              normal: {
+                borderColor: '#fff',
+                borderWidth: 2,
+                shadowBlur: 2,
+                shadowOffsetX: 0,
+                shadowColor: '#00a5f4',
+                opacity: 1
+              }
+            }
+          }
+        ]
+      }
+      var chart = echarts.init(document.getElementById('chart3'))
+      chart.clear()
+      chart.setOption(option, true)
+    },
+    drawSearchLine(type, data) {
+      var dataLegend = []
+      var dataLength = [] //小月份数据
+      var dataLengthBig = [] //大月份数据
+      var dataElse = []
+      var dataDate = []
+      var that = this
+      var showName = null
+      if (data) {
+        if (this.value == 'month') {
+          dataLegend = [moment(this.oneMonth._d).format('YYYY-MM'), moment(this.twoMonth._d).format('YYYY-MM')]
+          dataDate = data.map(item => {
+            return item.statDate.substring(item.statDate.length - 2, item.statDate.length)
+          })
+        } else if (this.value == 'day') {
+          dataLegend = [
+            moment(this.contrastValue[0]._d).format('YYYY-MM-DD'),
+            moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
+          ]
+          dataDate = data.map(item => {
+            return item.statHour
+          })
+        }
+        if (type == 'cost') {
+          showName = '总消耗'
+          dataLength = data.map(item => {
+            return item.beComparedCost
+          })
+          dataLengthBig = data.map(item => {
+            return item.cost
+          })
+          dataElse = data.map(item => {
+            if (this.value == 'month') {
+              return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
+            } else {
+              return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+            }
+          })
+        } else if (type == 'photoClick') {
+          showName = '封面点击数'
+          dataLength = data.map(item => {
+            return item.beComparedPhotoClick
+          })
+          dataLengthBig = data.map(item => {
+            return item.photoClick
+          })
+          dataElse = data.map(item => {
+            if (this.value == 'month') {
+              return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
+            } else {
+              return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+            }
+          })
+        } else if (type == 'photoShow') {
+          showName = '封面曝光数'
+          dataLength = data.map(item => {
+            return item.beComparedPhotoShow
+          })
+          dataLengthBig = data.map(item => {
+            return item.photoShow
+          })
+          dataElse = data.map(item => {
+            if (this.value == 'month') {
+              return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
+            } else {
+              return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+            }
+          })
+        } else if (type == 'aclick') {
+          showName = '素材曝光数'
+          dataLength = data.map(item => {
+            return item.beComparedAClick
+          })
+          dataLengthBig = data.map(item => {
+            return item.aClick
+          })
+          dataElse = data.map(item => {
+            if (this.value == 'month') {
+              return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.beComparedDate }
+            } else {
+              return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.statHour }
+            }
+          })
+        }
+      }
+      var option = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            var index
+            if (that.value == 'month') {
+              index = dataElse.findIndex(
+                v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
+              )
+            } else {
+              index = dataElse.findIndex(
+                v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
+              )
+            }
+            var da = null
+            if (index >= 0) {
+              da = dataElse[index].proportion
+            }
+            if (that.value == 'month') {
+              return `${params[0].marker}时间:${params[0].seriesName}-${params[0].name}:${showName}:${params[0].data}  <br/>
+            ${params[1].marker}时间:${params[1].seriesName}-${params[0].name}:${showName}:${params[1].data}  <br/>
+            涨跌:${da}<br/> `
+            } else {
+              return `${params[0].marker}时间:${params[0].seriesName}:${showName}:${params[0].data}  <br/>
+            ${params[1].marker}时间:${params[1].seriesName}:${showName}:${params[1].data}  <br/>
+            涨跌:${da}<br/> `
+            }
+          }
+        },
+        legend: {
+          data: dataLegend
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        toolbox: {
+          left: 'right',
+          feature: {
+            dataZoom: {
+              yAxisIndex: 'none'
+            },
+            restore: {},
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: dataDate,
+          boundaryGap: false,
+          // 坐标轴线
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#999'
+            }
+          },
+          // 分割线
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: '#e5e5e5'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#999'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: '#e5e5e5'
+            }
+          }
+        },
+        series: [
+          {
+            name: dataLegend[0],
+            type: 'line',
+            color: '#0bcd74',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#0bcd74'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: dataLength
+          },
+          {
+            name: dataLegend[1],
+            type: 'line',
+            color: '#9933ff',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#9933ff'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: dataLengthBig
+          }
+        ]
+      }
+      this.chart = echarts.init(document.getElementById('chart1'))
+      this.chart.clear()
+      this.chart.setOption(option, true)
+      //   window.onresize = function() {
+      //     chart.resize()
+      //   }
+    },
     disabledDate(current) {
       // Can not select days before today and today
       return current && current > moment().endOf('day')
@@ -483,8 +803,11 @@ export default {
     onTabChange(key, type) {
       console.log(key, type)
       this[type] = key
-      console.log()
-      this.drawPie(key, this.dataDetail)
+      if (type == 'noTitleKey') {
+        this.drawPie(key, this.dataDetail)
+      } else {
+        this.drawSearchLine(key, this.contrastDataList)
+      }
     },
     getAdd(checked) {
       //   console.log(this.startValue[0].moment('YYYY-MM-DD'))
@@ -499,29 +822,20 @@ 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]
+      }
+      getReportList(params).then(res => {
+        console.log(res)
+      })
       this.drawLine(checked, this.allValue)
       this.getKsDetail(checked, this.allValue).then(res => {
         this.drawPie(this.noTitleKey, res)
       })
     },
-    updateChart() {
-      //   const max = 90
-      //   const min = 20
-      getAccountReport().then(res => {
-        for (const key in res) {
-          this.options.series[0].data.push(res[key])
-        }
-        console.log(res)
-      })
-      const newData = this.series[0].data.map(() => {
-        return Math.floor(Math.random() * (max - min + 1)) + min
-      })
-      this.series = [
-        {
-          data: newData
-        }
-      ]
-    },
     getKsDetail(type, dateValue) {
       var that = this
       return new Promise(function(resolve) {
@@ -567,6 +881,7 @@ export default {
       var dataLength = []
       var dataElse = []
       var dataDate = []
+      var that = this
       if (this.active == 1 || this.active == 2) {
         data.sort(function(a, b) {
           return a.statHour - b.statHour
@@ -582,38 +897,98 @@ export default {
           return item.statDate
         })
       }
-      //   data.sort(function(a, b) {
-      //     return a.statHour - b.statHour
-      //   })
-
-      dataElse = data.map(item => {
-        if (this.active == 1 || this.active == 2) {
-          return { proportion: (item.proportion * 100).toFixed(2) + '%', statHour: item.statHour }
-        } else {
-          return { proportion: (item.proportion * 100).toFixed(2) + '%', statHour: item.statDate }
-        }
-      })
       if (type == 'cost') {
         dataLegend = ['总消耗']
-        dataLength = data.map(item => {
-          return item.cost
-        })
       } else if (type == 'photoClick') {
         dataLegend = ['封面点击数']
-        dataLength = data.map(item => {
-          return item.photoClick
-        })
       } else if (type == 'photoShow') {
         dataLegend = ['封面曝光数']
-        dataLength = data.map(item => {
-          return item.photoShow
-        })
       } else if (type == 'aclick') {
         dataLegend = ['素材曝光数']
-        dataLength = data.map(item => {
-          return item.aclick
+      }
+      dataLength = data.map(item => {
+        return item[type]
+      })
+      var series
+      if (this.active == 1) {
+        dataElse = data.map(item => {
+          if (item.now) {
+            return { proportion: (item.now.proportion * 100).toFixed(2) + '%', statHour: item.statHour }
+          } else {
+            return { proportion: 0, statHour: item.statHour }
+          }
         })
+        dataLegend = ['今天', '昨天']
+        series = [
+          {
+            name: dataLegend[0],
+            type: 'line',
+            color: '#9933ff',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#9933ff'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: data.map(item => {
+              if (item.now) {
+                return item.now[type]
+              } else {
+                return 0
+              }
+            })
+          },
+          {
+            name: dataLegend[1],
+            type: 'line',
+            color: '#0bcd74',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#0bcd74'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: dataLength
+          }
+        ]
+      } else {
+        series = [
+          {
+            name: dataLegend[0],
+            type: 'line',
+            color: '#0bcd74',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#0bcd74'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: dataLength
+          }
+        ]
       }
+
       var option = {
         backgroundColor: '#fff',
         tooltip: {
@@ -624,9 +999,14 @@ export default {
             if (index > 0) {
               da = dataElse[index].proportion
             }
-            return `时间:${params[0].name}  \n 
-            涨跌:${da} \n
+            if (that.active == 1) {
+              return `${params[0].marker}今天${params[0].name}时:${params[0].data}  <br/>
+              ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
+            涨跌:${da} <br/> `
+            } else {
+              return `${params[0].marker}时间:${params[0].name} <br/>
             数值:${params[0].data} `
+            }
           }
         },
         legend: {
@@ -639,7 +1019,7 @@ export default {
           containLabel: true
         },
         toolbox: {
-          left: 'center',
+          left: 'right',
           feature: {
             dataZoom: {
               yAxisIndex: 'none'
@@ -683,27 +1063,7 @@ export default {
             }
           }
         },
-        series: [
-          {
-            name: dataLegend[0],
-            type: 'line',
-            color: '#0bcd74',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 1,
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: '#0bcd74'
-              }
-            },
-            itemStyle: {
-              borderColor: '#ffffff',
-              borderWidth: 3
-            },
-            data: dataLength
-          }
-        ]
+        series: series
       }
       var chart = echarts.init(document.getElementById('chart'))
       chart.clear()

+ 115 - 17
src/views/modules/video/video.vue

@@ -58,6 +58,9 @@
 .vm-video-list .ant-card-actions li .ant-input-group-addon {
   width: 0;
 }
+.ant-comment-nested {
+  margin-left: 10px;
+}
 </style>
 <template>
   <div class="vm-video-list">
@@ -104,7 +107,14 @@
               class="bg"
               style="overflow:hidden;position:relative;width:100%;height:100%"
               :style="{backgroundImage: 'url(' +item.thumbnailUrl+')', backgroundSize:'cover', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
-            ></div>
+            >
+              <a
+                :href="'https://live.kuaishou.com/u/'+item.user.id+'/'+item.photoId+'?did=web_582ac3583a8eb520aaca065b372d1a1c'"
+                target="_blank"
+                style="width: 100%;height: 100%;position: absolute;z-index: 100;"
+              ></a>
+            </div>
+
             <img
               :src="item.poster"
               alt
@@ -126,23 +136,45 @@
             >
               <img src="./images/loading.gif" alt />
             </div>
-            <div style="height:200px;overflow-y:auto;" v-if="item.commentList.length>0">
+            <div
+              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>{{items.content}}</p>
-                  <div>
+                  <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,idx)" style="margin-right:5px">删除</span>
+                    <span @click="remove(item,items,index)" style="margin-right:5px">删除</span>
                   </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>
+                    </div>
+                  </a-comment>
+                </div>
               </a-comment>
             </div>
             <div
-              v-else
+              v-show="item.commentList.length<=0"
               style="height:200px;display:flex;justify-content:center;align-items:center"
             >暂无评论</div>
           </div>
@@ -171,6 +203,7 @@ import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import axios from 'axios'
 var interval, objTimer
+var a = 0
 import {
   getLoginQr,
   getUserList,
@@ -208,10 +241,34 @@ export default {
       scollY: null, // 离底部距离有多少
       pcursor: null,
       repltTo: 0,
-      replyToCommentId: 0
+      replyToCommentId: 0,
+      length: 0
     }
   },
   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) {
+          this.getCommentList(this.ksid, this.dataShow[i].photoId, item.pcursor).then(dataOne => {
+            this.dataShow[i].loading = false
+            if (dataOne && this.dataShow[i]) {
+              var pcursor = dataOne.pcursor
+              this.dataShow[i].pcursor = pcursor
+              var dataNew = dataOne.commentList.map(item => {
+                return {
+                  ...item,
+                  show: false
+                }
+              })
+              this.dataShow[i].commentList.push(...dataNew)
+            } else {
+              this.dataShow[i].commentList = []
+            }
+          })
+        }
+      }
+    },
     handleChange(value) {
       this.ksid = value
       this.dataShow = []
@@ -248,7 +305,6 @@ export default {
     },
     getVideoList(ksid, pcursor) {
       var that = this
-
       getVideoList({ ksid: ksid, pcursor: pcursor }).then(res => {
         if (res.code == 0) {
           var data = res.result.data.publicFeeds.list.map(item => {
@@ -264,10 +320,17 @@ export default {
           var i = 0
           for (let i = 0; i < that.dataShow.length; i++) {
             if (that.dataShow[i].commentCount > 0) {
-              that.getCommentList(ksid, that.dataShow[i].photoId).then(dataOne => {
+              that.getCommentList(ksid, that.dataShow[i].photoId, null).then(dataOne => {
                 that.dataShow[i].loading = false
                 if (dataOne && that.dataShow[i]) {
-                  that.dataShow[i].commentList = dataOne.commentList
+                  var pcursor = dataOne.pcursor
+                  that.dataShow[i].commentList = dataOne.commentList.map(item => {
+                    return {
+                      ...item,
+                      show: false
+                    }
+                  })
+                  that.dataShow[i].pcursor = pcursor
                 } else {
                   that.dataShow[i].commentList = []
                 }
@@ -279,11 +342,12 @@ export default {
         }
       })
     },
-    getCommentList(ksid, photoId) {
+    getCommentList(ksid, photoId, pcursor) {
       return new Promise(function(resolve) {
-        getCommentList({ ksid: ksid, photoId: photoId, pcursor: null }).then(res => {
+        getCommentList({ ksid: ksid, photoId: photoId, pcursor: pcursor }).then(res => {
           if (res.code == 0) {
-            resolve(res.result.data.shortVideoCommentList)
+            var data = res.result.data.shortVideoCommentList
+            resolve(data)
           }
         })
       })
@@ -293,10 +357,23 @@ export default {
     },
     remove(allItem, item, index) {
       console.log(allItem, item)
-      allItem.commentList.splice(index, 1)
-      //   String ksid,String photoId,Long commentId
       commentDelete({ ksid: this.ksid, photoId: allItem.photoId, commentId: item.commentId }).then(res => {
-        console.log(res)
+        this.getCommentList(this.ksid, allItem.photoId, null).then(dataOne => {
+          this.dataShow[index].loading = false
+          this.dataShow[index].commentList = []
+          if (dataOne && this.dataShow[index]) {
+            var pcursor = dataOne.pcursor
+            this.dataShow[index].pcursor = pcursor
+            this.dataShow[index].commentList = dataOne.commentList.map(item => {
+              return {
+                ...item,
+                show: false
+              }
+            })
+          } else {
+            this.dataShow[index].commentList = []
+          }
+        })
       })
     },
     getScrollTop: function() {
@@ -358,21 +435,42 @@ export default {
     },
     addComment(item, index) {
       console.log(item)
+      var word = item.keyword.substring(this.length)
+      console.log(word)
       var params = {
         ksid: this.ksid,
         photoId: item.photoId,
-        content: item.keyword,
+        content: word,
         replyToCommentId: this.replyToCommentId,
         repltTo: this.repltTo
       }
       commentAdd(params).then(res => {
         console.log(res)
+        if (res.code == 0) {
+          this.getCommentList(this.ksid, item.photoId, null).then(dataOne => {
+            this.dataShow[index].loading = false
+            this.dataShow[index].commentList = []
+            if (dataOne && this.dataShow[index]) {
+              this.dataShow[index].commentList = dataOne.commentList.map(item => {
+                return {
+                  ...item,
+                  show: false
+                }
+              })
+            } else {
+              this.dataShow[index].commentList = []
+            }
+          })
+          this.length = 0
+          item.keyword = ''
+        }
       })
     },
     backAdd(item, items) {
       console.log(item, items)
       // authorId  commentId
       item.keyword = '回复' + items.authorName
+      this.length = item.keyword.length
       this.repltTo = items.authorId
       this.replyToCommentId = items.commentId
     }

+ 2 - 2
vue.config.js

@@ -64,9 +64,9 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        // target: 'http://39.106.184.70: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.2.132:8080', //请求本地 需要jeecg-boot后台项目
+        // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目
         ws: false,
         changeOrigin: true
       },