Jelajahi Sumber

Merge remote-tracking branch 'origin/test' into test

syh 5 tahun lalu
induk
melakukan
313073110b
5 mengubah file dengan 1004 tambahan dan 102 penghapusan
  1. 12 0
      src/api/video.js
  2. 17 16
      src/router/index.js
  3. 444 84
      src/views/modules/Statistics/Statistics.vue
  4. 529 0
      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()

+ 529 - 0
src/views/modules/video/video.vue

@@ -1,3 +1,531 @@
+<<<<<<< HEAD
+<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) {
+}
+
+@media (min-width: 1680px) {
+}
+@media (min-width: 1920px) {
+  .checkbox_item_container_size {
+    width: 50%;
+  }
+}
+.vm-video-list .ant-comment-inner {
+  padding: 0;
+}
+.vm-video-list .bg:after {
+  content: '';
+  width: 110%;
+  height: 110%;
+  position: absolute;
+  left: -5%;
+  top: -5%;
+  background: inherit;
+  filter: blur(20px);
+  z-index: 2;
+}
+.ant-comment-content-detail {
+  word-wrap: break-word;
+  word-break: normal;
+}
+.vm-video-list .ant-card-actions li span {
+  width: 90%;
+}
+.vm-video-list .ant-card-actions li .ant-input-group {
+  width: 100%;
+}
+.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">
+    <a-row class="image-list-heading vm-panel">
+      <div class="panel-heading">{{ title }}</div>
+      <a-row type="flex" align="middle" justify="space-between" class="panel-body">
+        <div class="search-bar">
+          <a-button type="primary" icon="plus" style="margin-right:10px" @click="addUser">新增账号</a-button>
+          <a-select
+            showSearch
+            placeholder="选择账号"
+            notFoundContent="暂无账号,赶紧去添加一个吧"
+            optionFilterProp="children"
+            style="width: 300px"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="handleChange"
+            :filterOption="filterOption"
+          >
+            <a-select-option
+              :value="item.ksid"
+              v-for="(item,index) of options"
+              :key="index"
+            >{{item.userName}}</a-select-option>
+          </a-select>
+        </div>
+      </a-row>
+    </a-row>
+    <a-row class="image-list" :gutter="16" style="padding:0 8px">
+      <a-col
+        :lg="6"
+        :sm="12"
+        class="vm-margin"
+        v-for="(item,index) of dataShow"
+        :key="index"
+        style="padding:0"
+      >
+        <a-card hoverable style="margin:0 15px">
+          <div
+            slot="cover"
+            style="display:flex;justify-content:center;position:relative;height:300px;"
+          >
+            <div
+              class="bg"
+              style="overflow:hidden;position:relative;width:100%;height:100%"
+              :style="{backgroundImage: 'url(' +item.thumbnailUrl+')', backgroundSize:'cover', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
+            >
+              <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
+              style="height:300px;width:auto;position:absolute;z-index:10;top:0"
+            />
+          </div>
+          <template class="ant-card-actions" slot="actions">
+            <!-- <a-icon type="setting" />
+            <a-icon type="edit" />
+            <a-icon type="ellipsis" />-->
+            <a-input placeholder="请输入评论内容" v-model="item.keyword" style="width:100%">
+              <div slot="addonAfter" @click="addComment(item,index)">评论</div>
+            </a-input>
+          </template>
+          <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-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>
+                </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-show="item.commentList.length<=0"
+              style="height:200px;display:flex;justify-content:center;align-items:center"
+            >暂无评论</div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <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" />
+        <div
+          style="width:130px;height:130px;position:absolute;background:rgba(255,255,255,.9);text-align:center;padding:30px 5px"
+          v-show="showShare"
+        >
+          <p>
+            {{showTitle}}
+            <span @click="addUser" style="color:red" v-show="showSpan">刷新</span>
+          </p>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+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,
+  getLoginStatus,
+  getVideoList,
+  getCommentList,
+  commentDelete,
+  commentAdd
+} from '@api/video.js'
+export default {
+  name: 'videoList',
+  components: {
+    ACol,
+    ARow
+  },
+
+  data: function() {
+    return {
+      title: '视频列表',
+      dataShow: [], // data for showing
+      data: [],
+      options: [],
+      showTwo: false,
+      showCode: false,
+      lastTime: null, //最后一次点击的时间
+      currentTime: null, //当前点击的时间
+      timeOut: 60 * 1000, //设置超时时间: 1分钟,
+      requestId: '',
+      qrcode: '',
+      showTitle: '',
+      showShare: false,
+      showSpan: false,
+      ksid: null,
+      pullRefreshss: true, // 代表可以进行下拉加载,false代表不能
+      scollY: null, // 离底部距离有多少
+      pcursor: null,
+      repltTo: 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 = []
+      clearInterval(interval)
+      this.getVideoList(value, null)
+      //   this.getTest()
+    },
+    handleBlur() {
+      console.log('blur')
+    },
+    handleFocus() {
+      console.log('focus')
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    getUserList() {
+      getUserList().then(res => {
+        if (res.code == 0) {
+          this.options = res.result
+        } else {
+          this.options = []
+        }
+      })
+    },
+    addUser() {
+      this.showCode = true
+      getLoginQr().then(res => {
+        if (res.code == 0) {
+          this.qrcode = res.result.qrcode
+          this.requestId = res.result.requestId
+        }
+      })
+    },
+    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 => {
+            return {
+              ...item,
+              commentList: [],
+              loading: true,
+              keyword: ''
+            }
+          })
+          this.pcursor = res.result.data.publicFeeds.pcursor
+          this.dataShow.push(...data)
+          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, null).then(dataOne => {
+                that.dataShow[i].loading = false
+                if (dataOne && that.dataShow[i]) {
+                  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 = []
+                }
+              })
+            } else {
+              that.dataShow[i].loading = false
+            }
+          }
+        }
+      })
+    },
+    getCommentList(ksid, photoId, pcursor) {
+      return new Promise(function(resolve) {
+        getCommentList({ ksid: ksid, photoId: photoId, pcursor: pcursor }).then(res => {
+          if (res.code == 0) {
+            var data = res.result.data.shortVideoCommentList
+            resolve(data)
+          }
+        })
+      })
+    },
+    sleep(d) {
+      return new Promise(resolve => setTimeout(resolve, d))
+    },
+    remove(allItem, item, index) {
+      console.log(allItem, item)
+      commentDelete({ ksid: this.ksid, photoId: allItem.photoId, commentId: item.commentId }).then(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() {
+      var scrollTop = 0,
+        bodyScrollTop = 0,
+        documentScrollTop = 0
+      if (document.body) {
+        bodyScrollTop = document.body.scrollTop
+      }
+      if (document.documentElement) {
+        documentScrollTop = document.documentElement.scrollTop
+      }
+      scrollTop = bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop
+      return scrollTop
+    },
+    //浏览器视口的高度
+    getScrollHeight: function() {
+      var scrollHeight = 0,
+        bodyScrollHeight = 0,
+        documentScrollHeight = 0
+      if (document.body) {
+        bodyScrollHeight = document.body.scrollHeight
+      }
+      if (document.documentElement) {
+        documentScrollHeight = document.documentElement.scrollHeight
+      }
+      scrollHeight = bodyScrollHeight - documentScrollHeight > 0 ? bodyScrollHeight : documentScrollHeight
+      return scrollHeight
+    },
+    //浏览器视口的高度
+    getWindowHeight: function() {
+      var windowHeight = 0
+      if (document.compatMode == 'CSS1Compat') {
+        windowHeight = document.documentElement.clientHeight
+      } else {
+        windowHeight = document.body.clientHeight
+      }
+      return windowHeight
+    },
+    scrollChange: function() {
+      var _this = this,
+        currentPage = { page: this.page }
+      this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight()
+      // 把下拉刷新置为false,防止多次请求
+      if (this.scollY >= -100) {
+        if (this.page > this.pageTotal) {
+          return false
+        }
+        if (!this.pullRefreshss) {
+          return false
+        }
+        _this.getVideoList(_this.ksid, _this.pcursor)
+        // _this.getTest()
+        _this.pullRefreshss = false
+      } else {
+        // 其他时候把下拉刷新置为true
+        _this.pullRefreshss = true
+      }
+    },
+    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: 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
+    }
+  },
+  watch: {},
+  distoryed() {
+    clearInterval(interval)
+    window.clearInterval(objTimer)
+  },
+  mounted: function() {
+    this.$nextTick(() => {
+      var that = this
+      this.getUserList()
+      //   getAccountReport().then(res => {
+      //     console.log(res)
+      //   })
+      objTimer = window.setInterval(() => {
+        if (that.showCode) {
+          setTimeout(function() {
+            getLoginStatus({ requestId: that.requestId }).then(res => {
+              if (res.code == 0) {
+                if (res.result) {
+                  if (res.result.status == 1) {
+                    that.showShare = false
+                  } else {
+                    that.showShare = true
+                    that.showSpan = true
+                    that.showTitle = res.result.msg
+                    if (res.result.status == 3) {
+                      that.showSpan = false
+                      that.showCode = false
+                      that.getUserList()
+                    } else if (res.result.status == 2) {
+                      that.showSpan = false
+                    }
+                  }
+                }
+              }
+            })
+          }, 0)
+        }
+      }, 1000)
+      window.onscroll = function() {
+        if (that.ksid) {
+          if (that.pcursor != 'no_more') {
+            that.scrollChange()
+          }
+        }
+      }
+    })
+  }
+}
+</script>
+=======
 <style>
 @media (min-width: 1024px) {
   .checkbox_item_container {
@@ -426,3 +954,4 @@ export default {
   }
 }
 </script>
+>>>>>>> df88bbc5475db8bc44f17da24402460474416155

+ 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
       },