zhuxinbo 5 lat temu
rodzic
commit
01fc41668a
1 zmienionych plików z 364 dodań i 345 usunięć
  1. 364 345
      src/views/modules/Statistics/allStatistics.vue

+ 364 - 345
src/views/modules/Statistics/allStatistics.vue

@@ -1,28 +1,37 @@
 <style>
-  .admin-info .ant-list-item-content {
-    display: flex;
-    justify-content: space-around;
-  }
+.admin-info .ant-list-item-content {
+  display: flex;
+  justify-content: space-around;
+}
 
-  .admin-info .ant-table-middle tr.ant-table-expanded-row td>.ant-table-wrapper {
-    margin: -12px -9px -13px;
-  }
+.admin-info .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
+  margin: -12px -9px -13px;
+}
 </style>
 <template>
   <div class="admin-info">
     <a-row :gutter="10" style="margin-top:10px">
       <a-col :span="24">
-        <a-card style="width:100%;" :tabList="tabListNoTitle" :activeTabKey="noTitleKey"
-          @tabChange="key => onTabChange(key, 'noTitleKey')">
+        <a-card
+          style="width:100%;"
+          :tabList="tabListNoTitle"
+          :activeTabKey="noTitleKey"
+          @tabChange="key => onTabChange(key, 'noTitleKey')"
+        >
           角色选择:
-          <a-select style="width:300px;margin-bottom:30px" placeholder="请选择角色类型" v-model="type" @change="clearData">
+          <a-select
+            style="width:300px;margin-bottom:30px"
+            placeholder="请选择角色类型"
+            v-model="type"
+            @change="clearData"
+          >
             <a-select-option :value="1">设计</a-select-option>
             <a-select-option :value="2">优化</a-select-option>
           </a-select>
           时段选择:
           <a-month-picker placeholder="选择月份" :disabledDate="disabledDate" @change="getTimeData" v-model="mouth" />
           <a-select style="width:300px;margin-bottom:30px" placeholder="选择时段" v-model="dateRange">
-            <a-select-option :value="item" v-for="(item,index) of options" :key="index">{{item}}</a-select-option>
+            <a-select-option :value="item" v-for="(item, index) of options" :key="index">{{ item }}</a-select-option>
           </a-select>
           <a-button type="primary" style="margin-left:10px" @click="addUser">搜索</a-button>
           <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading" size="middle">
@@ -31,8 +40,15 @@
                 您的浏览器不支持 video 标签。
               </video>
             </span>
-            <span slot="action" slot-scope="text,record">
-              <a :disabled="record.effiVideoCount == 0" @click="toDetail(record)">查看详情</a>
+            <span slot="action" slot-scope="text, record">
+              <div v-if="type == 1">
+                <a :disabled="record.effiVideoCount == 0" @click="toDetail(record, 'effi')">有效视频详情</a>
+                <a-divider type="vertical" />
+                <a :disabled="record.videoCount == 0" @click="toDetail(record, 'all')">总视频详情</a>
+              </div>
+              <div v-else>
+                <a :disabled="record.effiVideoCount == 0" @click="toDetail(record, 'effi')">查看详情</a>
+              </div>
             </span>
           </a-table>
         </a-card>
@@ -42,360 +58,363 @@
 </template>
 
 <script>
-  import ChartCard from '@/components/ChartCard'
-  import ACol from 'ant-design-vue/es/grid/Col'
-  import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
-  import MiniArea from '@/components/chart/MiniArea'
-  import MiniBar from '@/components/chart/MiniBar'
-  import MiniProgress from '@/components/chart/MiniProgress'
-  import RankList from '@/components/chart/RankList'
-  import Bar from '@/components/chart/Bar'
-  import LineChartMultid from '@/components/chart/LineChartMultid'
-  import HeadInfo from '@/components/tools/HeadInfo.vue'
+import ChartCard from '@/components/ChartCard'
+import ACol from 'ant-design-vue/es/grid/Col'
+import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
+import MiniArea from '@/components/chart/MiniArea'
+import MiniBar from '@/components/chart/MiniBar'
+import MiniProgress from '@/components/chart/MiniProgress'
+import RankList from '@/components/chart/RankList'
+import Bar from '@/components/chart/Bar'
+import LineChartMultid from '@/components/chart/LineChartMultid'
+import HeadInfo from '@/components/tools/HeadInfo.vue'
 
-  import Trend from '@/components/Trend'
+import Trend from '@/components/Trend'
 
-  import moment from 'moment';
+import moment from 'moment'
 
-  import {
-    getAction,
-    postAction
-  } from '@/api/manage'
-  import {
-    mapGetters
-  } from 'vuex'
+import { getAction, postAction } from '@/api/manage'
+import { mapGetters } from 'vuex'
 
-  import qs from 'qs'
+import qs from 'qs'
 
-  const barData = []
-  for (let i = 0; i < 12; i += 1) {
-    barData.push({
-      x: `${i + 1}月`,
-      y: Math.floor(Math.random() * 1000) + 200
-    })
-  }
+const barData = []
+for (let i = 0; i < 12; i += 1) {
+  barData.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+}
 
-  const columns = [{
-      title: '姓名',
-      dataIndex: 'realname',
-      key: 'realname',
-      align: 'center',
-      width: 200
-    },
-    {
-      title: '角色',
-      dataIndex: 'roleName',
-      key: 'roleName',
-      align: 'center'
-    },
-    {
-      title: '有效视频数量',
-      dataIndex: 'effiVideoCount',
-      key: 'effiVideoCount',
-      align: 'center'
-    },
-    {
-      title: '总视频数量',
-      dataIndex: 'videoCount',
-      key: 'videoCount',
-      align: 'center'
-    },
-    {
-      title: '消耗',
-      dataIndex: 'cost',
-      key: 'cost',
-      align: 'center'
-    },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      key: 'action',
-      align: 'center',
-      scopedSlots: {
-        customRender: 'action'
-      },
-    },
-  ]
-  const columnsYou = [{
-      title: '姓名',
-      dataIndex: 'realname',
-      key: 'realname',
-      align: 'center',
-      width: 200
-    },
-    {
-      title: '角色',
-      dataIndex: 'roleName',
-      key: 'roleName',
-      align: 'center'
-    },
-    {
-      title: '总消耗',
-      dataIndex: 'cost',
-      key: 'effiVideoCount',
-      align: 'center'
-    },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      key: 'action',
-      align: 'center',
-      scopedSlots: {
-        customRender: 'action'
-      },
-    },
-  ]
-
-
-  Date.prototype.format = function (fmt) {
-    var o = {
-      "M+": this.getMonth() + 1, //月份
-      "d+": this.getDate(), //日
-      "h+": this.getHours(), //小时
-      "m+": this.getMinutes(), //分
-      "s+": this.getSeconds(), //秒
-      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
-      "S": this.getMilliseconds() //毫秒
-    };
-    if (/(y+)/.test(fmt)) {
-      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'realname',
+    key: 'realname',
+    align: 'center',
+    width: 200
+  },
+  {
+    title: '角色',
+    dataIndex: 'roleName',
+    key: 'roleName',
+    align: 'center'
+  },
+  {
+    title: '有效视频数量',
+    dataIndex: 'effiVideoCount',
+    key: 'effiVideoCount',
+    align: 'center'
+  },
+  {
+    title: '总视频数量',
+    dataIndex: 'videoCount',
+    key: 'videoCount',
+    align: 'center'
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    key: 'cost',
+    align: 'center'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'action'
     }
-    for (var k in o) {
-      if (new RegExp("(" + k + ")").test(fmt)) {
-        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
-      }
+  }
+]
+const columnsYou = [
+  {
+    title: '姓名',
+    dataIndex: 'realname',
+    key: 'realname',
+    align: 'center',
+    width: 200
+  },
+  {
+    title: '角色',
+    dataIndex: 'roleName',
+    key: 'roleName',
+    align: 'center'
+  },
+  {
+    title: '总消耗',
+    dataIndex: 'cost',
+    key: 'effiVideoCount',
+    align: 'center'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    align: 'center',
+    scopedSlots: {
+      customRender: 'action'
     }
-    return fmt;
   }
+]
 
-  function allWeeks(now_month) {
-    let week_array = [];
-    let today = new Date(Date.parse(now_month));
-    let year = today.getFullYear();
-    let month = today.getMonth();
-    let i = 0;
-
-    let start = new Date(year, month, 1); // 得到当月第一天
-    let end = new Date(year, month + 1, 0); // 得到当月最后一天
-    let start_day = start.getDay(); // 当月第一天是周几
-    console.log(start.format("yyyy-MM-dd"), end.format("yyyy-MM-dd")); // 每月的起始日期
-    switch (start_day) {
-      case 0:
-        i = 0 - 1;
-        break;
-      case 1:
-        i = 0 - 2;
-        break;
-      case 2:
-        i = 0 - 3;
-        break;
-      case 3:
-        i = 0 - 4;
-        break;
-      case 4:
-        i = 0 - 5;
-        break;
-      case 5:
-        i = 1;
-        break;
-      case 6:
-        i = 0;
-        break;
+Date.prototype.format = function(fmt) {
+  var o = {
+    'M+': this.getMonth() + 1, //月份
+    'd+': this.getDate(), //日
+    'h+': this.getHours(), //小时
+    'm+': this.getMinutes(), //分
+    's+': this.getSeconds(), //秒
+    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
+    S: this.getMilliseconds() //毫秒
+  }
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  for (var k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
     }
+  }
+  return fmt
+}
 
-    while (new Date(year, month, i + 6) <= end) {
+function allWeeks(now_month) {
+  let week_array = []
+  let today = new Date(Date.parse(now_month))
+  let year = today.getFullYear()
+  let month = today.getMonth()
+  let i = 0
 
-      week_array.push([new Date(year, month, i).format("yyyy-MM-dd"),
-        new Date(year, month, i + 6).format("yyyy-MM-dd")
-      ])
-      i += 7;
-    }
-    return week_array;
+  let start = new Date(year, month, 1) // 得到当月第一天
+  let end = new Date(year, month + 1, 0) // 得到当月最后一天
+  let start_day = start.getDay() // 当月第一天是周几
+  console.log(start.format('yyyy-MM-dd'), end.format('yyyy-MM-dd')) // 每月的起始日期
+  switch (start_day) {
+    case 0:
+      i = 0 - 1
+      break
+    case 1:
+      i = 0 - 2
+      break
+    case 2:
+      i = 0 - 3
+      break
+    case 3:
+      i = 0 - 4
+      break
+    case 4:
+      i = 0 - 5
+      break
+    case 5:
+      i = 1
+      break
+    case 6:
+      i = 0
+      break
   }
 
-  export default {
-    name: 'admin-info',
-    components: {
-      ATooltip,
-      ACol,
-    },
+  while (new Date(year, month, i + 6) <= end) {
+    week_array.push([new Date(year, month, i).format('yyyy-MM-dd'), new Date(year, month, i + 6).format('yyyy-MM-dd')])
+    i += 7
+  }
+  return week_array
+}
+
+export default {
+  name: 'admin-info',
+  components: {
+    ATooltip,
+    ACol
+  },
 
-    data: function () {
-      return {
-        type: 1,
-        title: '工作台',
-        loginfo: {},
-        barData,
-        visitInfo: [],
-        visitFields: ['ip', 'visit'],
-        loading: false,
-        rankList: [],
-        options: [],
-        dateRange: null,
-        mouth: null,
-        tabListNoTitle: [{
-            key: 'kuaishou',
-            tab: '快手'
-          },
-          {
-            key: 'toutiao',
-            tab: '头条'
-          }
-        ],
-        noTitleKey: 'kuaishou',
-        a: '',
-        columns: columns,
-        dataList: [],
+  data: function() {
+    return {
+      type: 1,
+      title: '工作台',
+      loginfo: {},
+      barData,
+      visitInfo: [],
+      visitFields: ['ip', 'visit'],
+      loading: false,
+      rankList: [],
+      options: [],
+      dateRange: null,
+      mouth: null,
+      tabListNoTitle: [
+        {
+          key: 'kuaishou',
+          tab: '快手'
+        },
+        {
+          key: 'toutiao',
+          tab: '头条'
+        }
+      ],
+      noTitleKey: 'kuaishou',
+      a: '',
+      columns: columns,
+      dataList: []
+    }
+  },
+  methods: {
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current > moment().endOf('day')
+    },
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
+    clearData() {
+      this.dataList = []
+    },
+    getTimeData(data) {
+      this.dateRange = ''
+      this.options = []
+      this.dataList = []
+      if (data) {
+        var getDate = new Date(data).format('yyyy-MM')
+        this.timeData(getDate)
       }
     },
-    methods: {
-      disabledDate(current) {
-        // Can not select days before today and today
-        return current && current > moment().endOf('day');
-      },
-      ...mapGetters(['nickname', 'avatar', 'userInfo']),
-      clearData() {
-        this.dataList = []
-      },
-      getTimeData(data) {
-        this.dateRange = ""
-        this.options = []
-        this.dataList = []
-        if (data) {
-          var getDate = new Date(data).format("yyyy-MM")
-          this.timeData(getDate)
+    timeData(data) {
+      var options = allWeeks(data)
+      console.log(options)
+      this.options = []
+      for (let i = 0; i < options.length; i++) {
+        this.options.push(options[i][0] + '~' + options[i][1])
+      }
+    },
+    addUser() {
+      if (this.noTitleKey == 'kuaishou') {
+        if (this.type == 1) {
+          this.columns = columns
+          this.getKuaishouList()
+        } else if (this.type == 2) {
+          this.columns = columnsYou
+          this.getKuaishouYouHuaList()
         }
-
-      },
-      timeData(data) {
-        var options = allWeeks(data)
-        console.log(options)
-        this.options = []
-        for (let i = 0; i < options.length; i++) {
-          this.options.push(options[i][0] + '~' + options[i][1])
+      } else if (this.noTitleKey == 'toutiao') {
+        if (this.type == 1) {
+          this.columns = columns
+          this.getToutiaoList()
+        } else if (this.type == 2) {
+          this.columns = columnsYou
+          this.getToutiaoYouHuaList()
         }
-      },
-      addUser() {
-        if (this.noTitleKey == 'kuaishou') {
-          if (this.type == 1) {
-            this.columns = columns
-            this.getKuaishouList()
-          } else if (this.type == 2) {
-            this.columns = columnsYou
-            this.getKuaishouYouHuaList()
-          }
-
-        } else if (this.noTitleKey == 'toutiao') {
-          if (this.type == 1) {
-            this.columns = columns
-            this.getToutiaoList()
-          } else if (this.type == 2) {
-            this.columns = columnsYou
-            this.getToutiaoYouHuaList()
-
-          }
+      }
+    },
+    onTabChange(key, type) {
+      console.log(key, type)
+      this.type = 1
+      this.dateRange = null
+      this.mouth = null
+      this.options = []
+      this.dataList = []
+      this.columns = columns
+      this[type] = key
+    },
+    toDetail(item, typeAll) {
+      localStorage.setItem('detailUserId', item.userId)
+      localStorage.setItem('appType', this.noTitleKey)
+      localStorage.setItem('roleData', this.type)
+      localStorage.setItem('weekDate', this.dateRange)
+      localStorage.setItem('typeAll', typeAll)
+      this.$router.replace({
+        path: '/Statistics/allDetail'
+      })
+    },
+    getKuaishouList() {
+      this.loading = true
+      var params = {}
+      var dateRange = this.dateRange.split('~')
+      params.startDate = dateRange[0]
+      params.endDate = dateRange[1]
+      postAction('/ctop/performance2/kuaishouWeekReport', params).then(res => {
+        console.log(res)
+        if (res.success) {
+          this.loading = false
+          this.dataList = res.result.map((item, index) => {
+            return {
+              ...item,
+              key: index
+            }
+          })
+        } else {
+          this.loading = false
+          this.$message.error(res.message)
         }
-      },
-      onTabChange(key, type) {
-        console.log(key, type)
-        this.type = 1
-        this.dateRange = null
-        this.mouth = null
-        this.options = []
-        this.dataList = []
-        this.columns = columns
-        this[type] = key
-
-      },
-      toDetail(item) {
-        localStorage.setItem('detailUserId', item.userId)
-        localStorage.setItem('appType', this.noTitleKey)
-        localStorage.setItem('roleData', this.type)
-        localStorage.setItem('weekDate', this.dateRange)
-        this.$router.replace({
-          path: '/Statistics/allDetail'
-        })
-      },
-      getKuaishouList() {
-        var params = {}
-        var dateRange = this.dateRange.split('~')
-        params.startDate = dateRange[0]
-        params.endDate = dateRange[1]
-        postAction('/ctop/performance2/kuaishouWeekReport', params).then(res => {
-          console.log(res)
-          if (res.success) {
-            this.dataList = res.result.map((item, index) => {
-              return {
-                ...item,
-                key: index,
-              }
-            })
-          } else {
-            this.$message.error(res.message)
-          }
-        })
-      },
+      })
+    },
 
-      getToutiaoList() {
-        var params = {}
-        var dateRange = this.dateRange.split('~')
-        params.startDate = dateRange[0]
-        params.endDate = dateRange[1]
-        postAction('/ctop/performance2/toutiaoWeekReport', params).then(res => {
-          console.log(res)
-          if (res.success) {
-            this.dataList = res.result.map((item, index) => {
-              return {
-                ...item,
-                key: index,
-              }
-            })
-          } else {
-            this.$message.error(res.message)
-          }
-        })
-      },
-      getKuaishouYouHuaList() {
-        var params = {}
-        var dateRange = this.dateRange.split('~')
-        params.startDate = dateRange[0]
-        params.endDate = dateRange[1]
-        postAction('/ctop/performance2/kuaishouYouhuaWeekReport', params).then(res => {
-          console.log(res)
-          if (res.success) {
-            this.dataList = res.result.map((item, index) => {
-              return {
-                ...item,
-                key: index,
-              }
-            })
-          } else {
-            this.$message.error(res.message)
-          }
-        })
-      },
-      getToutiaoYouHuaList() {
-        var params = {}
-        var dateRange = this.dateRange.split('~')
-        params.startDate = dateRange[0]
-        params.endDate = dateRange[1]
-        postAction('/ctop/performance2/toutiaoYouhuaWeekReport', params).then(res => {
-          console.log(res)
-          if (res.success) {
-            this.dataList = res.result.map((item, index) => {
-              return {
-                ...item,
-                key: index,
-              }
-            })
-          } else {
-            this.$message.error(res.message)
-          }
-        })
-      }
+    getToutiaoList() {
+      this.loading = true
+      var params = {}
+      var dateRange = this.dateRange.split('~')
+      params.startDate = dateRange[0]
+      params.endDate = dateRange[1]
+      postAction('/ctop/performance2/toutiaoWeekReport', params).then(res => {
+        console.log(res)
+        if (res.success) {
+          this.loading = false
+          this.dataList = res.result.map((item, index) => {
+            return {
+              ...item,
+              key: index
+            }
+          })
+        } else {
+          this.loading = false
+          this.$message.error(res.message)
+        }
+      })
     },
-    created() {
-      //   this.getKuaishouList()
+    getKuaishouYouHuaList() {
+      this.loading = true
+      var params = {}
+      var dateRange = this.dateRange.split('~')
+      params.startDate = dateRange[0]
+      params.endDate = dateRange[1]
+      postAction('/ctop/performance2/kuaishouYouhuaWeekReport', params).then(res => {
+        console.log(res)
+        if (res.success) {
+          this.loading = false
+          this.dataList = res.result.map((item, index) => {
+            return {
+              ...item,
+              key: index
+            }
+          })
+        } else {
+          this.loading = false
+          this.$message.error(res.message)
+        }
+      })
+    },
+    getToutiaoYouHuaList() {
+      this.loading = true
+      var params = {}
+      var dateRange = this.dateRange.split('~')
+      params.startDate = dateRange[0]
+      params.endDate = dateRange[1]
+      postAction('/ctop/performance2/toutiaoYouhuaWeekReport', params).then(res => {
+        console.log(res)
+        if (res.success) {
+          this.loading = false
+          this.dataList = res.result.map((item, index) => {
+            return {
+              ...item,
+              key: index
+            }
+          })
+        } else {
+          this.loading = false
+          this.$message.error(res.message)
+        }
+      })
     }
+  },
+  created() {
+    //   this.getKuaishouList()
   }
-</script>
+}
+</script>