Procházet zdrojové kódy

Merge branch 'test' of https://gitee.com/hcst/adsp-vue into test

# Conflicts:
#	src/views/modules/video/video.vue
#	vue.config.js
xuzuoyun před 5 roky
rodič
revize
df88bbc547

+ 1 - 0
package.json

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

+ 119 - 98
src/api/video.js

@@ -1,99 +1,120 @@
-
-import {axios} from '@/utils/request'
-
-
-//获取登陆账户已经绑定过的快手账户列表
-export function getUserList() {
-    return axios({
-      url: "/ks/web/user/list",
-      method: 'post',
-      //   params: parameter
-    })
-}
-
-// 获取登陆二维码
-export function getLoginQr() {
-    return axios({
-      url: "/ks/web/login/qr",
-      method: 'post',
-      //   params: parameter
-    })
-}
-
-// 获取登陆状态
-// /ks/web/login/status
-// 参数 String requestId
-export function getLoginStatus(parameter) {
-    return axios({
-      url: "/ks/web/login/status",
-      method: 'post',
-      params: parameter
-    })
-}
-
-// 获取视频列表
-// /ks/web/video/list
-// 参数 String ksid,String pcursor
-export function getVideoList(parameter) {
-    return axios({
-      url: "/ks/web/video/list",
-      method: 'post',
-      params: parameter
-    })
-}
-
-// 获取评论列表
-// /ks/web/comment/list
-// 参数 String ksid,String photoId,String pcursor
-export function getCommentList(parameter) {
-    return axios({
-      url: "/ks/web/comment/list",
-      method: 'post',
-      params: parameter
-    })
-}
-
-// 删除单条评论
-// /ks/web/comment/delete
-// 参数 String ksid,String photoId,Long commentId
-export function commentDelete(parameter) {
-    return axios({
-      url: "/ks/web/comment/delete",
-      method: 'post',
-      params: parameter
-    })
-}
-
-// 获取子评论列表
-// /ks/web/subcomment/list
-// 参数 String ksid,String photoId,Long rootCommentId,String pcursor
-export function getSubcommentList(parameter) {
-    return axios({
-      url: "/ks/web/subcomment/list",
-      method: 'post',
-      params: parameter
-    })
-}
-
-//评论添加接口
-///ks/web/comment/add
-// String ksid, String photoId,String principalId,String content, Long replyToCommentId,Long repltTo
-export function commentAdd(parameter) {
-    return axios({
-      url: "/ks/web/comment/add",
-      method: 'post',
-      params: parameter
-    })
-}
-
-
-
-//头条当前账号下的数据集合
-// /ctop/report/accountReport
-export function getAccountReport() {
-    return axios({
-      url: "/ctop/report/accountReport",
-      method: 'get',
-    //   params: parameter
-    })
+
+import {axios} from '@/utils/request'
+
+
+//获取登陆账户已经绑定过的快手账户列表
+export function getUserList() {
+    return axios({
+      url: "/ks/web/user/list",
+      method: 'post',
+      //   params: parameter
+    })
+}
+
+// 获取登陆二维码
+export function getLoginQr() {
+    return axios({
+      url: "/ks/web/login/qr",
+      method: 'post',
+      //   params: parameter
+    })
+}
+
+// 获取登陆状态
+// /ks/web/login/status
+// 参数 String requestId
+export function getLoginStatus(parameter) {
+    return axios({
+      url: "/ks/web/login/status",
+      method: 'post',
+      params: parameter
+    })
+}
+
+// 获取视频列表
+// /ks/web/video/list
+// 参数 String ksid,String pcursor
+export function getVideoList(parameter) {
+    return axios({
+      url: "/ks/web/video/list",
+      method: 'post',
+      params: parameter
+    })
+}
+
+// 获取评论列表
+// /ks/web/comment/list
+// 参数 String ksid,String photoId,String pcursor
+export function getCommentList(parameter) {
+    return axios({
+      url: "/ks/web/comment/list",
+      method: 'post',
+      params: parameter
+    })
+}
+
+// 删除单条评论
+// /ks/web/comment/delete
+// 参数 String ksid,String photoId,Long commentId
+export function commentDelete(parameter) {
+    return axios({
+      url: "/ks/web/comment/delete",
+      method: 'post',
+      params: parameter
+    })
+}
+
+// 获取子评论列表
+// /ks/web/subcomment/list
+// 参数 String ksid,String photoId,Long rootCommentId,String pcursor
+export function getSubcommentList(parameter) {
+    return axios({
+      url: "/ks/web/subcomment/list",
+      method: 'post',
+      params: parameter
+    })
+}
+
+//评论添加接口
+///ks/web/comment/add
+// String ksid, String photoId,String content, Long replyToCommentId,Long repltTo
+export function commentAdd(parameter) {
+    return axios({
+      url: "/ks/web/comment/add",
+      method: 'post',
+      params: parameter
+    })
+}
+
+
+
+//头条当前账号下的数据集合
+// /ctop/report/accountReport
+export function getAccountReport() {
+    return axios({
+      url: "/ctop/report/accountReport",
+      method: 'get',
+    //   params: parameter
+    })
+}
+
+
+//快手当前账号下的数据集合
+export function getKsAccountReport(parameter) {
+    return axios({
+      url: "/ctop/report/kuaiShou/accountReport",
+      method: 'post',
+      data: parameter
+    })
+}
+
+// 当日明细
+// /accountReport/kuaiShou/accountDetailReport
+//快手当前账号下的数据集合
+export function getKsDetail(parameter) {
+    return axios({
+      url: "/ctop/report/kuaiShou/accountDetailReport",
+      method: 'post',
+      data: parameter
+    })
 }

+ 0 - 1
src/main.js

@@ -16,7 +16,6 @@ import '@/utils/filter' // base filter
 import Print from 'vue-print-nb-jeecg'
 /*import '@babel/polyfill'*/
 import VueApexCharts from 'vue-apexcharts'
-
 import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
 

+ 746 - 80
src/views/modules/Statistics/Statistics.vue

@@ -1,80 +1,746 @@
-<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;
-}
-
-</style>
-<template>
-  <div class="vm-video-list">
-    <a-row class="image-list-heading vm-panel">
-      <a-row>
-        <div class="panel-heading">{{ title }}</div>
-      </a-row>
-    </a-row>
-    <a-row class="image-list" :gutter="16" style="padding:0 8px"></a-row>
-  </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'
-import { getAccountReport } from '@api/video.js'
-export default {
-  name: 'statistics',
-  components: {
-    ACol,
-    ARow
-  },
-
-  data: function() {
-    return {
-      title: '报表统计',
-      statistics:[]
-    }
-  },
-  methods: {},
-  watch: {},
-  mounted: function() {
-    this.$nextTick(() => {
-        getAccountReport().then(res=>{
-            if(res.code == 0){
-                console.log(res)
-            }
-        })
-    })
-  }
-}
-</script>
+<style>
+.statistics .ant-col-6 {
+  margin: 10px 0;
+}
+.statistics .ant-col-6 .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.statistics .ant-col-6 p,
+.statistics .ant-col-6 span {
+  display: block;
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 600;
+  color: red;
+  margin: 0;
+}
+.search .ant-card-body {
+  padding: 5px 15px;
+}
+.search p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.statistics .ant-col-6 .ant-card-body .styleElse {
+  line-height: 60px;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+}
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.yincang .ant-col-6 p {
+  text-align: left;
+  color: red;
+  font-size: 16px;
+}
+</style>
+<template>
+  <div class="statistics">
+    <a-row class="image-list-heading vm-panel">
+      <a-row>
+        <div class="panel-heading">{{ title }}</div>
+      </a-row>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card :bordered="false" class="search">
+          <p :style="active==1?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(1)">今天</p>
+          <p :style="active==2?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(2)">昨天</p>
+          <p :style="active==3?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(3)">近一周</p>
+          <p :style="active==4?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(4)">近十五天</p>
+          <p :style="active==5?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(5)">近一月</p>
+          <p :style="active==6?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(6)">近三月</p>
+          <p :style="active==7?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(7)">近半年</p>
+          <p :style="active==8?'color:cornflowerblue;background:#f2f2f2':''" @click="getAdd(8)">所有</p>
+          <a-range-picker
+            style="width:400px"
+            :disabledDate="disabledDate"
+            :showTime="{
+                hideDisabledOptions: true,
+            }"
+            format="YYYY-MM-DD"
+            v-model="startValue"
+            @ok="getAdd(9)"
+          />
+        </a-card>
+      </a-col>
+      <a-col :span="24">
+        <a-card :bordered="false" class="search">
+          <p @click="visible = true">对比</p>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="16" v-if="kuaishou">
+      <a-col :span="6">
+        <a-card title="总消耗" :bordered="false">
+          <!-- <p>{{kuaishou.cost}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.cost" :duration="duration" :decimals="2"></countTo>
+          <a-icon
+            v-if="kuaishou.costProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.costProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74;"
+          />
+          <a-icon
+            v-else-if="kuaishou.costProportion==0&&active==1"
+            type="minus"
+            class="styleElse"
+            style="color:#0bcd74"
+          />
+          <span
+            v-if="active==1"
+            :style="kuaishou.costProportion>0?'color:red':'color:#0bcd74'"
+            class="styleElse"
+            style="  margin-left:0"
+          >{{(kuaishou.costProportion*100).toFixed(2)+'%'}}</span>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="封面点击数" :bordered="false">
+          <!-- <p>{{kuaishou.photoClick}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.photoClick" :duration="duration" :decimals="0"></countTo>
+          <a-icon
+            v-if="kuaishou.photoClickProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.photoClickProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74"
+          />
+          <a-icon
+            v-else-if="kuaishou.photoClickProportion==0&&active==1"
+            type="minus"
+            class="styleElse"
+            style="color:#0bcd74"
+          />
+          <span
+            v-if="active==1"
+            :style="kuaishou.photoClickProportion>0?'color:red':'color:#0bcd74'"
+            style="margin-left:0"
+            class="styleElse"
+          >{{(kuaishou.photoClickProportion*100).toFixed(2)+'%'}}</span>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="封面曝光数" :bordered="false">
+          <!-- <p>{{kuaishou.photoShow}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.photoShow" :duration="duration" :decimals="0"></countTo>
+          <a-icon
+            v-if="kuaishou.showProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.showProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74;"
+          />
+          <a-icon
+            v-else-if="kuaishou.showProportion<0&&active==1"
+            type="minus"
+            class="styleElse"
+            style="color:#0bcd74"
+          />
+          <span
+            v-if="active==1"
+            :style="kuaishou.showProportion>0?'color:red':'color:#0bcd74'"
+            class="styleElse"
+            style="  margin-left:0"
+          >{{(kuaishou.showProportion*100).toFixed(2)+'%'}}</span>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="素材曝光数" :bordered="false">
+          <!-- <p>{{kuaishou.aclick}}</p> -->
+          <countTo :startVal="0" :endVal="kuaishou.aclick" :duration="duration" :decimals="0"></countTo>
+
+          <a-icon
+            v-if="kuaishou.aClickProportion>0&&active==1"
+            type="rise"
+            class="styleElse"
+            style="color:red;"
+          />
+          <a-icon
+            v-else-if="kuaishou.aClickProportion<0&&active==1"
+            type="fall"
+            class="styleElse"
+            style="color:#0bcd74;"
+          />
+          <a-icon
+            v-else-if="kuaishou.aClickProportion==0&&active==1"
+            type="minus"
+            class="styleElse"
+            style="color:#0bcd74"
+          />
+          <span
+            v-if="active==1"
+            :style="kuaishou.aClickProportion>0?'color:red':'color:#0bcd74'"
+            class="styleElse"
+            style="  margin-left:0"
+          >{{(kuaishou.aClickProportion*100).toFixed(2)+'%'}}</span>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="10">
+      <a-col :span="24">
+        <a-card
+          style="width:100%"
+          :tabList="tabListNoTitle"
+          :activeTabKey="noTitleKey"
+          @tabChange="key => onTabChange(key, 'noTitleKey')"
+        >
+          <div id="chart" style="width:100%;height:500px"></div>
+        </a-card>
+      </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-button value="month">对比月</a-radio-button>
+        <a-radio-button value="day">对比天</a-radio-button>
+      </a-radio-group>
+      <br />
+      <div style="display:flex">
+        <div v-if="value == 'month'" style="width:400px">
+          <a-month-picker placeholder="请选择对比月份" v-model="oneMonth" style="width:50%" />
+          <a-month-picker placeholder="请选择对比月份" v-model="twoMonth" style="width:50%" />
+        </div>
+        <a-range-picker
+          v-else
+          style="width:400px"
+          :disabledDate="disabledDate"
+          :showTime="{
+                hideDisabledOptions: true,
+            }"
+          format="YYYY-MM-DD"
+          v-model="contrastValue"
+        />
+        <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-col :span="6">
+          <a-card title="总消耗对比">
+            <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.cost}}</p>
+            <p>
+              {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.cost}}
+              <a-icon
+                v-if="contrastDataAll.compared.costProportion>0"
+                type="rise"
+                class="styleElse"
+                style="color:red;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.costProportion<0"
+                type="fall"
+                class="styleElse"
+                style="color:#0bcd74;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.costProportion==0"
+                type="minus"
+                class="styleElse"
+                style="color:#0bcd74"
+              />
+              <span
+                :style="contrastDataAll.compared.costProportion>0?'color:red':'color:#0bcd74'"
+                class="styleElse"
+                style="  margin-left:0"
+              >{{contrastDataAll.compared.costProportion.toFixed(2)+'%'}}</span>
+            </p>
+          </a-card>
+        </a-col>
+        <a-col :span="6">
+          <a-card title="封面点击数对比">
+            <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.photoClick}}</p>
+            <p>
+              {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.photoClick}}
+              <a-icon
+                v-if="contrastDataAll.compared.photoClickProportion>0"
+                type="rise"
+                class="styleElse"
+                style="color:red;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.photoClickProportion<0"
+                type="fall"
+                class="styleElse"
+                style="color:#0bcd74;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.photoClickProportion==0"
+                type="minus"
+                class="styleElse"
+                style="color:#0bcd74"
+              />
+              <span
+                :style="contrastDataAll.compared.photoClickProportion>0?'color:red':'color:#0bcd74'"
+                class="styleElse"
+                style="  margin-left:0"
+              >{{contrastDataAll.compared.photoClickProportion.toFixed(2)+'%'}}</span>
+            </p>
+          </a-card>
+        </a-col>
+        <a-col :span="6">
+          <a-card title="封面曝光数对比">
+            <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.photoShow}}</p>
+            <p>
+              {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.photoShow}}
+              <a-icon
+                v-if="contrastDataAll.compared.showProportion>0"
+                type="rise"
+                class="styleElse"
+                style="color:red;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.showProportion<0"
+                type="fall"
+                class="styleElse"
+                style="color:#0bcd74;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.showProportion==0"
+                type="minus"
+                class="styleElse"
+                style="color:#0bcd74"
+              />
+              <span
+                :style="contrastDataAll.compared.showProportion>0?'color:red':'color:#0bcd74'"
+                class="styleElse"
+                style="  margin-left:0"
+              >{{contrastDataAll.compared.showProportion.toFixed(2)+'%'}}</span>
+            </p>
+          </a-card>
+        </a-col>
+        <a-col :span="6">
+          <a-card title="素材曝光数对比">
+            <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.aclick}}</p>
+            <p>
+              {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.aclick}}
+              <a-icon
+                v-if="contrastDataAll.compared.comparedAclick>0"
+                type="rise"
+                class="styleElse"
+                style="color:red;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.comparedAclick<0"
+                type="fall"
+                class="styleElse"
+                style="color:#0bcd74;"
+              />
+              <a-icon
+                v-else-if="contrastDataAll.compared.comparedAclick==0"
+                type="minus"
+                class="styleElse"
+                style="color:#0bcd74"
+              />
+              <span
+                :style="contrastDataAll.compared.comparedAclick>0?'color:red':'color:#0bcd74'"
+                class="styleElse"
+                style="  margin-left:0"
+              >{{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-row>
+      <div id="chart1" style="width:100%;height:500px"></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 moment from 'moment'
+import countTo from 'vue-count-to'
+import { getAccountReport, getKsAccountReport, getKsDetail } from '@api/video.js'
+import { getAction, postAction } from '@/api/manage'
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+require('echarts/lib/chart/pie')
+require('echarts/lib/chart/line')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+require('echarts/lib/component/graphic')
+require('echarts/lib/component/toolbox')
+
+export default {
+  name: 'statistics',
+  components: {
+    ACol,
+    ARow,
+    countTo
+  },
+
+  data: function() {
+    return {
+      title: '报表统计',
+      visible: true,
+      statistics: [],
+      showData: null,
+      startValue: [],
+      contrastValue: [],
+      contrastDataAll: null,
+      allValue: ['', ''],
+      value: 'month',
+      oneMonth: null,
+      twoMonth: null,
+      kuaishou: {
+        aclick: 0,
+        aClickProportion: 0,
+        cost: 0,
+        costProportion: 0,
+        photoClick: 0,
+        photoClickroportion: 0,
+        photoShow: 0,
+        showProportion: 0
+      },
+      tabListNoTitle: [
+        {
+          key: 'cost',
+          tab: '总消耗'
+        },
+        {
+          key: 'photoClick',
+          tab: '封面点击数'
+        },
+        {
+          key: 'photoShow',
+          tab: '封面曝光数'
+        },
+        {
+          key: 'aclick',
+          tab: '素材曝光数'
+        }
+      ],
+      noTitleKey: 'cost',
+      chart: null,
+      chart1: null,
+      active: 1,
+      duration: 1000,
+      dataDetail: null
+    }
+  },
+  methods: {
+    moment,
+    search() {
+      var params = {}
+      params.type = 10
+      params.sign = this.value
+      if (this.value == 'month') {
+        if (this.twoMonth && this.oneMonth) {
+          params.bigDate = moment(this.twoMonth._d).format('YYYY-MM')
+          params.smallDate = moment(this.oneMonth._d).format('YYYY-MM')
+        } else {
+          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')
+      }
+      getKsAccountReport(params).then(res => {
+        console.log(res)
+        if (res.compared) {
+          this.contrastDataAll = res
+        } else {
+          this.contrastDataAll = null
+        }
+      })
+      getKsDetail(params).then(res => {
+        console.log(res)
+      })
+    },
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current > moment().endOf('day')
+    },
+    onTabChange(key, type) {
+      console.log(key, type)
+      this[type] = key
+      console.log()
+      this.drawPie(key, this.dataDetail)
+    },
+    getAdd(checked) {
+      //   console.log(this.startValue[0].moment('YYYY-MM-DD'))
+      if (checked == 9) {
+        if (this.startValue.length > 0 && this.startValue[0]) {
+          this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
+          this.allValue[0] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
+        }
+      } else {
+        this.startValue = []
+        this.allValue = []
+      }
+      console.log(checked)
+      this.active = checked
+      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) {
+        let params = {}
+        params.type = type
+        if (that.active == 9) {
+          params.startDate = dateValue[0]
+          params.endDate = dateValue[1]
+        }
+        getKsDetail(params).then(res => {
+          that.dataDetail = res
+          resolve(res)
+        })
+      })
+    },
+    drawLine(type, dateValue) {
+      var that = this
+      return new Promise(function(resolve) {
+        let params = {}
+        params.type = type
+        if (that.active == 9) {
+          params.startDate = dateValue[0]
+          params.endDate = dateValue[1]
+        }
+        getKsAccountReport(params).then(res => {
+          var dataNew = []
+          var dataX = []
+          console.log(res == '')
+          if (res == '') {
+            that.kuaishou.aclick = 0
+            that.kuaishou.cost = 0
+            that.kuaishou.photoClick = 0
+            that.kuaishou.photoShow = 0
+          } else {
+            that.kuaishou = res
+          }
+          resolve()
+        })
+      })
+    },
+    drawPie(type, data) {
+      var dataLegend = []
+      var dataLength = []
+      var dataElse = []
+      var dataDate = []
+      if (this.active == 1 || this.active == 2) {
+        data.sort(function(a, b) {
+          return a.statHour - b.statHour
+        })
+        dataDate = data.map(item => {
+          return item.statHour
+        })
+      } else {
+        data.sort(function(a, b) {
+          return a.statDate - b.statDate
+        })
+        dataDate = data.map(item => {
+          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
+        })
+      }
+      var option = {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            var index = dataElse.findIndex(v => v.statHour == params[0].name)
+            var da = null
+            if (index > 0) {
+              da = dataElse[index].proportion
+            }
+            return `时间:${params[0].name}  \n 
+            涨跌:${da} \n
+            数值:${params[0].data} `
+          }
+        },
+        legend: {
+          data: dataLegend
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        toolbox: {
+          left: 'center',
+          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
+          }
+        ]
+      }
+      var chart = echarts.init(document.getElementById('chart'))
+      chart.clear()
+      chart.setOption(option, true)
+      window.onresize = function() {
+        chart.resize()
+      }
+      // this.chart.on('click', param => {
+      //   if (param.name == '总展示') {
+      //     alert(123)
+      //   }
+      // })
+    }
+  },
+  watch: {},
+  computed: {
+    newDate() {
+      var myDate = new Date()
+      myDate.getYear() //获取当前年份(2位)
+      var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
+      var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
+      var d = myDate.getDate() //获取当前日(1-31)
+      return n + '-' + m + '-' + d
+    }
+  },
+  mounted: function() {
+    this.$nextTick(() => {
+      var that = this
+      this.drawLine(1)
+      this.getKsDetail(1).then(res => {
+        this.drawPie('cost', res)
+      })
+      //   window.onresize = function() {
+      //     that.chart1.resize()
+      //     that.chart.resize()
+      //   }
+    })
+  }
+}
+</script>

+ 44 - 1
src/views/modules/bytedance/model/InternalModel.vue

@@ -11,6 +11,7 @@
             placeholder="选择头条账户"
             optionFilterProp="children"
             style="width: 200px"
+            @change="onChangeAccount"
           >
             <a-select-option v-for="user in userList" :key="user.accountId" :value="user.accountId">{{user.accountName}}</a-select-option>
           </a-select>
@@ -56,6 +57,33 @@
           <a-select-option v-for="userOrientation in userOrientationList" :key="userOrientation.id" :value="userOrientation.id">{{userOrientation.name}}</a-select-option>
         </a-select>
       </a-form-item>
+      <a-form-item
+        label="定向人群包"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+      <a-select
+        mode="tags"
+        placeholder="请选择定向人群包"
+        style="width: 600px"
+        v-model="retargetingTagsInclude"
+      >
+          <a-select-option v-for="audience in audienceList" :key="audience.custom_audience_id.toString()" :value="audience.custom_audience_id.toString()">{{audience.name}}</a-select-option>
+      </a-select>
+      </a-form-item>
+      <a-form-item
+        label="排除人群包"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+        <a-select
+          mode="tags"
+          placeholder="选择需要排除的人群包"
+          style="width: 600px"
+          v-model="retargetingTagsExclude"
+        >
+          <a-select-option v-for="audience in audienceList" :key="audience.custom_audience_id.toString()" :value="audience.custom_audience_id.toString()">{{audience.name}}</a-select-option>
+        </a-select>
+      </a-form-item>
+
 
       <a-form-item
         label="投放目标"
@@ -316,6 +344,9 @@
     data() {
       return {
         webUrl:'',
+        retargetingTagsExclude:[],
+        retargetingTagsInclude:[],
+        audienceList:null,
         appName:'',
         creativeType:'customize',
         materialAddType:'customize',
@@ -334,6 +365,7 @@
           xs: {span: 24},
           sm: {span: 16},
         },
+        size: 'default',
         itratorNum:1,
         accountId:'',
         userList:[],
@@ -396,7 +428,8 @@
           insertUrl: 'test/create',
           convertList:'template/convert/list/url',
           userOrentationList:'ctop/byteDanceUserOrientationTemplate/list',
-          creativeTemplateList:'/ctop/bytedanceCreativeLaunchTemplate/list'
+          creativeTemplateList:'/ctop/bytedanceCreativeLaunchTemplate/list',
+          userAudienceList:'toutiao/advertiser/custom/audience/select'
         }
       }
     },
@@ -523,6 +556,14 @@
           this.refreshUrl('page');
         }
       },
+      onChangeAccount(){
+        let params = {};
+        getAction(this.url.userAudienceList+'?accountId='+this.accountId, params).then((res) => {
+          if (res.success) {
+            this.audienceList = res.data;
+          }
+        });
+      },
       onChangeDeliveryTarget(value) {
         console.log(value);
         if (this.deliveryTarget == '11') {
@@ -596,6 +637,8 @@
         params.convertId = this.convertId;
         params.simpleDeliverytarget = this.simpleDeliverytarget;
         params.convertType = this.convertType;
+        params.retargetingTagsExclude = this.retargetingTagsExclude;
+        params.retargetingTagsInclude = this.retargetingTagsInclude;
         if (this.time != [] && this.time.length == 2) {
           params.startDate = moment(this.time[0]).format('YYYY-MM-DD HH:mm')
           params.endDate = moment(this.time[1]).format('YYYY-MM-DD HH:mm')

binární
src/views/modules/video/images/loading.gif


+ 81 - 44
src/views/modules/video/video.vue

@@ -45,6 +45,19 @@
   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;
+}
 </style>
 <template>
   <div class="vm-video-list">
@@ -99,31 +112,40 @@
             />
           </div>
           <template class="ant-card-actions" slot="actions">
-            <a-icon type="setting" />
+            <!-- <a-icon type="setting" />
             <a-icon type="edit" />
-            <a-icon type="ellipsis" />
+            <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 v-if="item.commentList"> -->
-          <div style="height:200px;overflow:auto" v-if="item.commentList.length>0">
-            <a-comment v-for="(items,idx) of item.commentList" :key="idx">
-              <a slot="author">
-                <input type="checkbox" />
-                {{items.authorName}}
-              </a>
-              <p
-                slot="content"
-                style="display: flex;justify-content: space-between;white-space: nowrap;"
-              >
-                {{items.content}}
-                <span @click="remove(item,items,idx)" style="margin-right:5px">删除</span>
-              </p>
-            </a-comment>
+          <div style="position:relative">
+            <div
+              style="width:100%;height:200px;position: absolute;z-index:3;background:white;display:flex;justify-content:center;align-items:center"
+              v-if="item.loading"
+            >
+              <img src="./images/loading.gif" alt />
+            </div>
+            <div style="height:200px;overflow-y:auto;" v-if="item.commentList.length>0">
+              <a-comment v-for="(items,idx) of item.commentList" :key="idx">
+                <a slot="author">
+                  <input type="checkbox" />
+                  {{items.authorName}}
+                </a>
+                <div slot="content" style="display: flex;justify-content: space-between;">
+                  <p>{{items.content}}</p>
+                  <div>
+                    <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
+                    <span @click="remove(item,items,idx)" style="margin-right:5px">删除</span>
+                  </div>
+                </div>
+              </a-comment>
+            </div>
+            <div
+              v-else
+              style="height:200px;display:flex;justify-content:center;align-items:center"
+            >暂无评论</div>
           </div>
-          <div
-            v-else
-            style="height:200px;display:flex;justify-content:center;align-items:center"
-          >暂无评论</div>
-          <!-- </div> -->
         </a-card>
       </a-col>
     </a-row>
@@ -156,7 +178,7 @@ import {
   getVideoList,
   getCommentList,
   commentDelete,
-  getAccountReport
+  commentAdd
 } from '@api/video.js'
 export default {
   name: 'videoList',
@@ -184,7 +206,9 @@ export default {
       ksid: null,
       pullRefreshss: true, // 代表可以进行下拉加载,false代表不能
       scollY: null, // 离底部距离有多少
-      pcursor: null
+      pcursor: null,
+      repltTo: 0,
+      replyToCommentId: 0
     }
   },
   methods: {
@@ -230,35 +254,28 @@ export default {
           var data = res.result.data.publicFeeds.list.map(item => {
             return {
               ...item,
-              commentList: []
+              commentList: [],
+              loading: true,
+              keyword: ''
             }
           })
           this.pcursor = res.result.data.publicFeeds.pcursor
           this.dataShow.push(...data)
           var i = 0
-          interval = setInterval(() => {
-            if (i <= that.dataShow.length) {
-              ;(function(a) {
-                setTimeout(function() {
-                  that.getCommentList(ksid, that.dataShow[a].photoId).then(dataOne => {
-                    if (dataOne && that.dataShow[a]) {
-                      that.dataShow[a].commentList = dataOne.commentList
-                    } else {
-                      that.dataShow[a].commentList = []
-                    }
-                  })
-                }, 0)
-                if (that.dataShow.length == 0) {
-                  clearInterval(interval)
-                  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.dataShow[i].loading = false
+                if (dataOne && that.dataShow[i]) {
+                  that.dataShow[i].commentList = dataOne.commentList
                 } else {
-                  i++
+                  that.dataShow[i].commentList = []
                 }
-              })(i)
+              })
             } else {
-              clearInterval(interval)
+              that.dataShow[i].loading = false
             }
-          }, 100)
+          }
         }
       })
     },
@@ -338,6 +355,26 @@ export default {
         // 其他时候把下拉刷新置为true
         _this.pullRefreshss = true
       }
+    },
+    addComment(item, index) {
+      console.log(item)
+      var params = {
+        ksid: this.ksid,
+        photoId: item.photoId,
+        content: item.keyword,
+        replyToCommentId: this.replyToCommentId,
+        repltTo: this.repltTo
+      }
+      commentAdd(params).then(res => {
+        console.log(res)
+      })
+    },
+    backAdd(item, items) {
+      console.log(item, items)
+      // authorId  commentId
+      item.keyword = '回复' + items.authorName
+      this.repltTo = items.authorId
+      this.replyToCommentId = items.commentId
     }
   },
   watch: {},

+ 2 - 1
src/views/template/creative/modules/material.vue

@@ -23,6 +23,7 @@
         <a-badge
           :count="HorizontalLargeImageListZu.length"
           :numberStyle="{backgroundColor: '#52c41a'} "
+          v-if="creativeType=='customize'"
         >
           <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
         </a-badge>
@@ -77,7 +78,7 @@
                       preview
                       :region="region"
                       :bucket="bucket"
-                      :accept="acceptImage"
+                      :accept="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?acceptVideo:acceptImage"
                       :size="102400"
                       :accessKeyId="accessKeyId"
                       :accessKeySecret="accessKeySecret"

+ 1 - 1
vue.config.js

@@ -65,8 +65,8 @@ module.exports = {
        },*/
       '/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.43.23:8080', //请求本地 需要jeecg-boot后台项目
         ws: false,
         changeOrigin: true
       },