Ver código fonte

提交账户素材报表

zhuxinbo 5 anos atrás
pai
commit
ff49ef0bcd

+ 24 - 0
src/api/statistics.js

@@ -49,4 +49,28 @@ export function getKuaiShouChainRatio(parameter) {
       method: 'post',
       data: parameter
     })
+}
+
+
+// /materialReport/getMaterialAccount
+// userId:
+// 分账户
+export function getMaterialAccount(parameter) {
+    return axios({
+      url: "/materialReport/getMaterialAccount",
+      method: 'post',
+      data: parameter
+    })
+}
+
+
+// /materialReport/getMaterialReportByAccount
+// userId:
+// 分账户
+export function getMaterialReportByAccount(parameter) {
+    return axios({
+      url: "/materialReport/getMaterialReportByAccount",
+      method: 'post',
+      data: parameter
+    })
 }

+ 6 - 19
src/views/modules/Statistics/Statistics.vue

@@ -61,24 +61,7 @@
     <a-row>
       <a-col :span="24">
         <a-card :bordered="false" class="search-box">
-          <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)"
-          />
+          <time-check @getAdd="getAdd" :startValue.sync="startValue"></time-check>
         </a-card>
       </a-col>
       <a-col :span="24">
@@ -341,6 +324,9 @@ import countTo from 'vue-count-to'
 import lifting from './components/lifting'
 import { getAccountReport, getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
 import { getAction, postAction } from '@/api/manage'
+
+import timeCheck from './components/timeCheck'
+
 var upDate
 
 // 引入基本模板
@@ -361,7 +347,8 @@ export default {
     ACol,
     ARow,
     countTo,
-    lifting
+    lifting,
+    timeCheck
   },
 
   data: function() {

+ 573 - 0
src/views/modules/Statistics/accountMaterStatistics.vue

@@ -0,0 +1,573 @@
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+.search-box p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+</style>
+<style>
+/* .data-display-statistics .ant-card-body {
+  padding: 0 15px;
+} */
+.data-display-statistics .ant-col-6 {
+  margin: 10px 0;
+}
+.data-display-statistics .ant-col-6 .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.data-display-statistics .ant-col-6 p,
+.data-display-statistics .ant-col-6 span {
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 600;
+  color: red;
+  margin: 0;
+}
+.search-box .ant-card-body {
+  padding: 5px 15px;
+}
+.data-display-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;
+  font-weight: 500;
+}
+.ant-table-thead div {
+  font-weight: 700;
+}
+.tool-tip {
+  position: absolute;
+  top: 65px;
+  right: 10px;
+}
+th div {
+  white-space: nowrap;
+}
+</style>
+<template>
+  <div class="data-display-statistics">
+    <a-row class="image-list-heading vm-panel">
+      <div class="panel-heading" style="display:flex;justify-content: space-between;">
+        {{ title }}
+        <a-button @click="dianji">进入素材报表</a-button>
+      </div>
+      <a-row type="flex" align="middle" justify="space-between" class="panel-body">
+        <div class="search-bar" style="width:100%">
+          <span>账户选择:</span>
+          <a-select
+            v-model="appId"
+            showSearch
+            allowClear
+            mode="multiple"
+            placeholder="请选择账户"
+            optionFilterProp="children"
+            style="width: 50%"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="handleChange"
+            :filterOption="true"
+            @search="search"
+            :maxTagCount="1"
+          >
+            <a-select-option
+              v-for="appModel in options"
+              :key="appModel.id+new Date().getTime()"
+              :value="appModel.accountId"
+            >{{appModel.advertiserName}}&#12288;&#12288;{{appModel.accountId}}&#12288;&nbsp;&#12288;{{appModel.authName}}&#12288;&#12288;{{appModel.operationName}}</a-select-option>
+          </a-select>
+          <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
+          <a-button
+            type="primary"
+            icon="reload"
+            @click="getDataReset"
+            style="background-color:#67c23a;border-color:#67c23a"
+          >刷新</a-button>
+        </div>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <a-card :bordered="false" class="search-box">
+            <time-check @getAdd="getAdd" :startValue.sync="startValue" :timeList="timeList"></time-check>
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-row>
+    <a-row :gutter="10" style="margin-top:10px">
+      <a-col :span="24">
+        <a-card style="width:100%;">
+          <a-table
+            :columns="columns"
+            :dataSource="data"
+            bordered
+            id="outTable"
+            :pagination="pagination"
+            :customRow="rowClick"
+            :loading="loading"
+          >
+            <div slot="url" slot-scope="url">
+              <video
+                class="video"
+                :src="url"
+                controls="controls"
+                style="height:200px;width:112.5px"
+              >您的浏览器不支持 video 标签。</video>
+            </div>
+            <span slot="photoClickRatio" slot-scope="photoClickRatio">{{photoClickRatio|getBo}}</span>
+            <span slot="actionRatio" slot-scope="actionRatio">{{actionRatio|getBo}}</span>
+            <span
+              slot="impression1kCost"
+              slot-scope="impression1kCost"
+            >{{impression1kCost|toFixtwo}}</span>
+            <span slot="photoClickCost" slot-scope="photoClickCost">{{photoClickCost|toFixtwo}}</span>
+            <span slot="actionCost" slot-scope="actionCost">{{actionCost|toFixtwo}}</span>
+            <span slot="conversionPrice" slot-scope="conversionPrice">{{conversionPrice|toFixtwo}}</span>
+          </a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+    <ratio-modal ref="ratio" />
+  </div>
+</template>
+
+<script>
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import countTo from 'vue-count-to'
+import moment from 'moment'
+import { getMaterialReportByAccount, getMaterialAccount } from '@api/statistics'
+import axios from 'axios'
+import lifting from './components/lifting'
+import timeCheck from './components/timeCheck'
+import ratioModal from './components/ratioModal'
+import { mapGetters } from 'vuex'
+// 引入基本模板
+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')
+require('echarts/lib/component/legend')
+var length = 0
+var active = 1
+
+const columns = [
+  {
+    title: '视频',
+    dataIndex: 'url',
+    key: 'url',
+    align: 'center',
+    scopedSlots: { customRender: 'url' }
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+    align: 'center',
+    sorter: (a, b) => a.cost - b.cost
+  },
+  {
+    title: '封面曝光数',
+    dataIndex: 'photoShow',
+    key: 'photoShow',
+    align: 'center',
+    sorter: (a, b) => a.photoShow - b.photoShow
+  },
+  {
+    title: '封面点击数',
+    dataIndex: 'photoClick',
+    key: 'photoClick',
+    align: 'center',
+    sorter: (a, b) => a.photoClick - b.photoClick
+  },
+  {
+    title: '素材曝光数',
+    dataIndex: 'aclick',
+    key: 'aclick',
+    align: 'center',
+    sorter: (a, b) => a.aclick - b.aclick
+  },
+  {
+    title: '行为数',
+    dataIndex: 'bclick',
+    key: 'bclick',
+    align: 'center',
+    sorter: (a, b) => a.bclick - b.bclick
+  },
+  {
+    title: '封面点击率',
+    dataIndex: 'photoClickRatio',
+    key: 'photoClickRatio',
+    align: 'center',
+    scopedSlots: { customRender: 'photoClickRatio' },
+    sorter: (a, b) => a.photoClickRatio - b.photoClickRatio
+  },
+  {
+    title: '行为率',
+    dataIndex: 'actionRatio',
+    key: 'actionRatio',
+    align: 'center',
+    scopedSlots: { customRender: 'actionRatio' },
+    sorter: (a, b) => a.actionRatio - b.actionRatio
+  },
+
+  {
+    title: '均千次封面曝光花费(元)',
+    dataIndex: 'impression1kCost',
+    key: 'impression1kCost',
+    scopedSlots: { customRender: 'impression1kCost' },
+    align: 'center',
+    sorter: (a, b) => a.impression1kCost - b.impression1kCost
+  },
+  {
+    title: '平均封面点击单价(元)',
+    dataIndex: 'photoClickCost',
+    key: 'photoClickCost',
+    scopedSlots: { customRender: 'photoClickCost' },
+    align: 'center',
+    sorter: (a, b) => a.photoClickCost - b.photoClickCost
+  },
+  {
+    title: '平均行为单价(元)',
+    dataIndex: 'actionCost',
+    key: 'actionCost',
+    scopedSlots: { customRender: 'actionCost' },
+    align: 'center',
+    sorter: (a, b) => a.actionCost - b.actionCost
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversions',
+    key: 'conversions',
+    align: 'center',
+    sorter: (a, b) => a.conversions - b.conversions
+  },
+  {
+    title: '转化单价(元)',
+    dataIndex: 'conversionPrice',
+    key: 'conversionPrice',
+    scopedSlots: { customRender: 'conversionPrice' },
+    align: 'center',
+    sorter: (a, b) => a.conversionPrice - b.conversionPrice
+  }
+]
+const columnsDetail = [
+  {
+    title: '日期',
+    dataIndex: 'statDate',
+    key: 'statDate',
+    align: 'center'
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+    align: 'center'
+  },
+  {
+    title: '封面曝光数',
+    dataIndex: 'photoShow',
+    key: 'photoShow',
+    align: 'center'
+  },
+  {
+    title: '封面点击数',
+    dataIndex: 'photoClick',
+    key: 'photoClick',
+    align: 'center'
+  },
+  {
+    title: '素材曝光数',
+    dataIndex: 'aclick',
+    key: 'aclick',
+    align: 'center'
+  },
+  {
+    title: '行为数',
+    dataIndex: 'bclick',
+    key: 'bclick',
+    align: 'center'
+  },
+  {
+    title: '封面点击率',
+    dataIndex: 'photoClickRatio',
+    key: 'photoClickRatio',
+    align: 'center',
+    scopedSlots: { customRender: 'photoClickRatio' }
+  },
+  {
+    title: '行为率',
+    dataIndex: 'actionRatio',
+    key: 'actionRatio',
+    align: 'center',
+    scopedSlots: { customRender: 'actionRatio' }
+  },
+
+  {
+    title: '均千次封面曝光花费(元)',
+    dataIndex: 'impression1kCost',
+    key: 'impression1kCost',
+    scopedSlots: { customRender: 'impression1kCost' },
+    align: 'center'
+  },
+  {
+    title: '平均封面点击单价(元)',
+    dataIndex: 'photoClickCost',
+    key: 'photoClickCost',
+    scopedSlots: { customRender: 'photoClickCost' },
+    align: 'center'
+  },
+  {
+    title: '平均行为单价(元)',
+    dataIndex: 'actionCost',
+    key: 'actionCost',
+    scopedSlots: { customRender: 'actionCost' },
+    align: 'center'
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversions',
+    key: 'conversions',
+    align: 'center'
+  },
+  {
+    title: '转化单价(元)',
+    dataIndex: 'conversionPrice',
+    key: 'conversionPrice',
+    scopedSlots: { customRender: 'conversionPrice' },
+    align: 'center'
+  }
+]
+export default {
+  name: 'data-display-statistics',
+  components: {
+    ACol,
+    ARow,
+    countTo,
+    lifting,
+    timeCheck,
+    ratioModal
+  },
+
+  data: function() {
+    return {
+      title: '账户素材报表',
+      show: true,
+      timeList: [
+        { label: '今天', value: 1, show: true },
+        { label: '昨天', value: 2, show: true },
+        { label: '近一周', value: 3, show: true },
+        { label: '近十五天', value: 4, show: true },
+        { label: '近一月', value: 5, show: true },
+        { label: '近三月', value: 6, show: true }
+      ],
+      active:1,
+      data: [],
+      columns,
+      columnsDetail,
+      options: [],
+      list: [],
+      appId: [],
+      startValue: [],
+      allValue: [],
+      loading: false,
+      pagination: {
+        // 分页配置器
+        pageSize: 10, // 一页的数据限制
+        current: 1, // 当前页
+        onChange: current => {
+          // 切换分页时的回调,
+          // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+          this.pagination.current = current
+        }
+      },
+      rowClick: record => ({
+        // 事件
+        on: {
+          click: () => {
+            // 点击改行时要做的事情
+            // this.detail = record
+            // this.visible = true
+            // this.getMineList(record.signature)
+            this.$refs.ratio.getMineList(record,this.active)
+          }
+        }
+      })
+    }
+  },
+  filters: {
+    formatDate: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
+    },
+    toFixtwo: function(value) {
+      if (value) {
+        return value.toFixed(2)
+      } else {
+        return 0.0
+      }
+    },
+    getBo: function(value) {
+      if (value) {
+        return (value * 100).toFixed(2) + '%'
+      } else {
+        return '0.00%'
+      }
+    }
+  },
+  methods: {
+    moment,
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
+    disabledDate(current) {
+      return current && current > moment().endOf('day')
+    },
+    handleChange(value) {
+      console.log(value)
+      //   this.appId = value
+    },
+    getElseData(value) {
+      this.getStatistics()
+    },
+    handleBlur() {
+      console.log('blur')
+    },
+    handleFocus() {
+      console.log('focus')
+      if (this.appId.length > 0) {
+        this.options = []
+        for (let i = 0; i < this.list.length; i++) {
+          for (let j = 0; j < this.appId.length; j++) {
+            if (this.list[i].accountId == this.appId[j]) {
+              this.options.push(this.list[i])
+            }
+          }
+        }
+      } else {
+        this.options = this.list
+      }
+    },
+    search(value) {
+      //   console.log(value)
+      this.options = []
+      if (value != '') {
+        this.options = this.list.filter(item => {
+          var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
+          return data.toLowerCase().indexOf(value.toLowerCase()) > -1
+        })
+        this.options = [...this.options]
+        console.log(this.options)
+      } else {
+        if (this.appId.length > 0) {
+          this.options = []
+          for (let i = 0; i < this.list.length; i++) {
+            for (let j = 0; j < this.appId.length; j++) {
+              if (this.list[i].accountId == this.appId[j]) {
+                this.options.push(this.list[i])
+              }
+            }
+          }
+        } else {
+          this.options = this.list
+        }
+      }
+    },
+    getDataReset() {
+      this.active = 1
+      this.allValue = []
+      this.addUser()
+    },
+    addUser() {
+      var that = this
+      if (this.appId.length > 0) {
+        var params = {}
+        params.accountIds = JSON.stringify(that.appId)
+        params.type = that.active
+        if (that.active == 9) {
+          params.startDate = this.allValue[0]
+          params.endDate = this.allValue[1]
+        }
+      } else {
+        this.$message.error('请选择账户')
+        return 
+      }
+      getMaterialReportByAccount(params).then(res=>{ 
+          this.data = res
+      })
+    },
+    getStatistics() {
+      var params = {}
+      params.accountIds = JSON.stringify(this.appId)
+      params.type = this.active
+      params.statHour = this.statHour
+      params.discount = this.discount
+      if (this.active == 9) {
+        params.startDate = this.allValue[0]
+        params.endDate = this.allValue[1]
+      }
+      this.data = []
+    },
+    getAdd(checked) {
+      if (checked == 9) {
+        if (this.startValue.length > 0 && this.startValue[0]) {
+          this.allValue[0] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
+          this.allValue[1] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
+        }
+      } else {
+        this.startValue = []
+        this.allValue = []
+      }
+      this.active = checked
+      active = checked
+      this.pagination.current = 1
+      this.addUser(checked)
+    },
+    dianji() {
+      this.$router.replace({ path: '/modules/Statistics/materialStatistics' })
+    }
+  },
+  watch: {},
+  distoryed() {},
+  mounted: function() {
+    this.$nextTick(() => {
+      getMaterialAccount({ userId: this.userInfo().id }).then(res => {
+        this.list = res
+        this.options = res
+      })
+    })
+  }
+}
+</script>

+ 239 - 0
src/views/modules/Statistics/components/ratioModal.vue

@@ -0,0 +1,239 @@
+
+<template>
+  <div class="data-display-statistics">
+    <a-modal title="环比展示" v-model="visible" @ok="handleOk" width="90%">
+      <div v-if="url">
+        <video
+          class="video"
+          :src="url"
+          controls="controls"
+          style="height:200px;"
+          v-show="showVideo"
+        >您的浏览器不支持 video 标签。</video>
+      </div>
+      <a-button type="primary" @click="showVideo = !showVideo">{{!showVideo?"点击查看视频":"点击收起视频"}}</a-button>
+      <a-card style="width:100%;">
+        <a-table
+          :columns="columnsDetail"
+          :dataSource="dataDetail"
+          bordered
+          id="outTable"
+          :pagination="false"
+          :loading="loading"
+        >
+          <span slot="photoClickRatio" slot-scope="photoClickRatio">{{photoClickRatio|getBo}}</span>
+          <span slot="actionRatio" slot-scope="actionRatio">{{actionRatio|getBo}}</span>
+          <span slot="impression1kCost" slot-scope="impression1kCost,record">
+            <span v-if="record.statDate=='环比'">{{impression1kCost|getBo}}</span>
+            <span v-else>{{impression1kCost|toFixtwo}}</span>
+          </span>
+          <span slot="photoClickCost" slot-scope="photoClickCost,record">
+            <span v-if="record.statDate=='环比'">{{photoClickCost|getBo}}</span>
+            <span v-else>{{photoClickCost|toFixtwo}}</span>
+          </span>
+          <span slot="actionCost" slot-scope="actionCost,record">
+            <span v-if="record.statDate=='环比'">{{actionCost|getBo}}</span>
+            <span v-else>{{actionCost|toFixtwo}}</span>
+          </span>
+          <span slot="conversionPrice" slot-scope="conversionPrice,record">
+            <span v-if="record.statDate=='环比'">{{conversionPrice|getBo}}</span>
+            <span v-else>{{conversionPrice|toFixtwo}}</span>
+          </span>
+        </a-table>
+      </a-card>
+    </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 { getKuaiShouChainRatio } from '@api/statistics'
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+
+var length = 0
+var active = 1
+const columnsDetail = [
+  {
+    title: '日期',
+    dataIndex: 'statDate',
+    key: 'statDate',
+    align: 'center'
+  },
+  {
+    title: '花费',
+    dataIndex: 'cost',
+    key: 'cost',
+    align: 'center'
+  },
+  {
+    title: '封面曝光数',
+    dataIndex: 'photoShow',
+    key: 'photoShow',
+    align: 'center'
+  },
+  {
+    title: '封面点击数',
+    dataIndex: 'photoClick',
+    key: 'photoClick',
+    align: 'center'
+  },
+  {
+    title: '素材曝光数',
+    dataIndex: 'aclick',
+    key: 'aclick',
+    align: 'center'
+  },
+  {
+    title: '行为数',
+    dataIndex: 'bclick',
+    key: 'bclick',
+    align: 'center'
+  },
+  {
+    title: '封面点击率',
+    dataIndex: 'photoClickRatio',
+    key: 'photoClickRatio',
+    align: 'center',
+    scopedSlots: { customRender: 'photoClickRatio' }
+  },
+  {
+    title: '行为率',
+    dataIndex: 'actionRatio',
+    key: 'actionRatio',
+    align: 'center',
+    scopedSlots: { customRender: 'actionRatio' }
+  },
+
+  {
+    title: '均千次封面曝光花费(元)',
+    dataIndex: 'impression1kCost',
+    key: 'impression1kCost',
+    scopedSlots: { customRender: 'impression1kCost' },
+    align: 'center'
+  },
+  {
+    title: '平均封面点击单价(元)',
+    dataIndex: 'photoClickCost',
+    key: 'photoClickCost',
+    scopedSlots: { customRender: 'photoClickCost' },
+    align: 'center'
+  },
+  {
+    title: '平均行为单价(元)',
+    dataIndex: 'actionCost',
+    key: 'actionCost',
+    scopedSlots: { customRender: 'actionCost' },
+    align: 'center'
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversions',
+    key: 'conversions',
+    align: 'center'
+  },
+  {
+    title: '转化单价(元)',
+    dataIndex: 'conversionPrice',
+    key: 'conversionPrice',
+    scopedSlots: { customRender: 'conversionPrice' },
+    align: 'center'
+  }
+]
+export default {
+  name: 'ration-modal',
+  components: {
+    ACol,
+    ARow
+  },
+
+  data: function() {
+    return {
+      columnsDetail,
+      showVideo: false,
+      dataDetail: [],
+      url: '',
+      visible: false,
+      loading:true
+    }
+  },
+  filters: {
+    toFixtwo: function(value) {
+      if (value) {
+        return value.toFixed(2)
+      } else {
+        return 0.0
+      }
+    },
+    getBo: function(value) {
+      if (value) {
+        return (value * 100).toFixed(2) + '%'
+      } else {
+        return '0.00%'
+      }
+    }
+  },
+  methods: {
+    moment,
+    getMineList(md5, active) {
+      this.visible = true
+      this.loading = true
+      this.url = md5.url
+      this.dataDetail = []
+      this.showVideo = false
+      var params = {}
+      params.type = active
+      params.signature = md5.signature
+      if (md5.accountId) {
+        params.accountId = md5.accountId
+      }
+      getKuaiShouChainRatio(params).then(res => {
+        if (res.contrast) {
+          var now = {
+            key: 1,
+            ...res.contrast,
+            statDate:
+              active == 1 || active == 2 ? res.contrast.statDate : res.contrast.startDate + ' ~ ' + res.contrast.endDate
+          }
+          var yesterday = {
+            key: 2,
+            ...res.beContrast,
+            statDate:
+              active == 1 || active == 2
+                ? res.beContrast.statDate
+                : res.beContrast.startDate + ' ~ ' + res.beContrast.endDate
+          }
+          var chainRatio = {
+            key: 3,
+            statDate: '环比',
+            photoClickRatio: res.chainRatio.photoClickRatioProportion,
+            conversions: (res.chainRatio.conversionsProportion * 100).toFixed(2) + '%',
+            cost: (res.chainRatio.costProportion * 100).toFixed(2) + '%',
+            impression1kCost: res.chainRatio.impression1kCostProportion,
+            photoClick: (res.chainRatio.photoClickProportion * 100).toFixed(2) + '%',
+            bclick: (res.chainRatio.bClickProportion * 100).toFixed(2) + '%',
+            aclick: (res.chainRatio.aClickProportion * 100).toFixed(2) + '%',
+            photoClickCost: res.chainRatio.photoClickCostProportion,
+            conversionPrice: res.chainRatio.conversionPriceProportion,
+            actionRatio: res.chainRatio.actionRatioProportion,
+            actionCost: res.chainRatio.actionCostProportion,
+            photoShow: (res.chainRatio.showProportion * 100).toFixed(2) + '%'
+          }
+          this.dataDetail.push(now)
+          this.dataDetail.push(yesterday)
+          this.dataDetail.push(chainRatio)
+          this.loading = false
+        } else {
+          this.visible = true
+          this.loading = false
+        }
+      })
+    },
+    handleOk() {}
+  },
+  watch: {},
+  distoryed() {}
+}
+</script>

+ 161 - 0
src/views/modules/Statistics/components/timeCheck.vue

@@ -0,0 +1,161 @@
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+.search-box p {
+  display: inline-block;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+</style>
+<style>
+/* .data-display-statistics .ant-card-body {
+  padding: 0 15px;
+} */
+.data-display-statistics .ant-col-6 {
+  margin: 10px 0;
+}
+.data-display-statistics .ant-col-6 .ant-card-body {
+  display: flex;
+  justify-content: center;
+}
+.data-display-statistics .ant-col-6 p,
+.data-display-statistics .ant-col-6 span {
+  text-align: center;
+  line-height: 40px;
+  font-size: 30px;
+  font-weight: 600;
+  color: red;
+  margin: 0;
+}
+.search-box .ant-card-body {
+  padding: 5px 15px;
+}
+.data-display-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;
+  font-weight: 500;
+}
+.ant-table-thead div {
+  font-weight: 700;
+}
+.tool-tip {
+  position: absolute;
+  top: 65px;
+  right: 10px;
+}
+.ant-table-thead tr th {
+  background: none;
+}
+/* th div {
+  white-space: nowrap;
+} */
+</style>
+<template>
+  <div>
+    <p
+      :style="active==item.value?'color:cornflowerblue;background:#f2f2f2':''"
+      v-for="(item,index) of timeList"
+      :key="index"
+      @click="getAdd(item.value)"
+    >{{item.label}}</p>
+    <a-range-picker
+      style="width:400px"
+      :disabledDate="disabledDate"
+      :showTime="{
+                hideDisabledOptions: true,
+            }"
+      format="YYYY-MM-DD"
+      v-model="startValue"
+      @ok="getAdd(9)"
+    />
+  </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'
+var length = 0
+var active = 1
+export default {
+  name: 'time-check',
+  components: {
+    ACol,
+    ARow
+  },
+  props: {
+    timeList: {
+      type: Array,
+      default() {
+        return [
+          { label: '今天', value: 1, show: true },
+          { label: '昨天', value: 2, show: true },
+          { label: '近一周', value: 3, show: true },
+          { label: '近十五天', value: 4, show: true },
+          { label: '近一月', value: 5, show: true },
+          { label: '近三月', value: 6, show: true },
+          { label: '近半年', value: 7, show: true },
+          { label: '所有', value: 8, show: true }
+        ]
+      }
+    }
+  },
+  data: function() {
+    return {
+      active: 1,
+      startValue: []
+    }
+  },
+  filters: {
+    formatDate: function(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      let h = date.getHours()
+      h = h < 10 ? '0' + h : h
+      let m = date.getMinutes()
+      m = m < 10 ? '0' + m : m
+      let s = date.getSeconds()
+      s = s < 10 ? '0' + s : s
+      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
+    }
+  },
+  methods: {
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current > moment().endOf('day')
+    },
+    getAdd(checked) {
+      this.active = checked
+      active = checked
+      this.$emit('update:startValue', this.startValue)
+      this.$emit('getAdd', checked)
+    }
+  },
+  watch: {},
+  distoryed() {},
+  updated() {},
+  mounted: function() {
+    this.$nextTick(() => {})
+  }
+}
+</script>

+ 7 - 42
src/views/modules/Statistics/dataDisplayStatistics.vue

@@ -112,46 +112,9 @@ th div {
       <a-row>
         <a-col :span="24">
           <a-card :bordered="false" class="search-box">
-            <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)"
-            />
+            <time-check @getAdd="getAdd" :startValue.sync="startValue"></time-check>
           </a-card>
         </a-col>
-        <!-- <a-col :span="24">
-          <a-card :bordered="false" class="search-box">
-            <p @click="visible = true">对比</p>
-          </a-card>
-        </a-col>-->
       </a-row>
     </a-row>
     <a-row :gutter="16" v-if="kuaishou">
@@ -237,6 +200,7 @@ import moment from 'moment'
 import { getAdvertiserList, getReportList, getStatistics } from '@api/statistics'
 import axios from 'axios'
 import lifting from './components/lifting'
+import timeCheck from './components/timeCheck'
 
 // 引入基本模板
 let echarts = require('echarts/lib/echarts')
@@ -404,7 +368,8 @@ export default {
     ACol,
     ARow,
     countTo,
-    lifting
+    lifting,
+    timeCheck
   },
 
   data: function() {
@@ -659,7 +624,7 @@ export default {
             aclick: (res.chainRatio.aClickProportion * 100).toFixed(2) + '%',
             photoClickRatio: res.chainRatio.photoClickRatioProportion
               ? (res.chainRatio.photoClickRatioProportion * 100).toFixed(2) + '%'
-              : 0.00 + '%',
+              : 0.0 + '%',
             cvr: (res.chainRatio.cvrProportion * 100).toFixed(2) + '%',
             cpm: (res.chainRatio.cpmProportion * 100).toFixed(2) + '%',
             bClick: (res.chainRatio.bClickProportion * 100).toFixed(2) + '%',
@@ -667,12 +632,12 @@ export default {
               ? (res.chainRatio.formCountProportion * 100).toFixed(2) + '%'
               : res.chainRatio.activationCountProportion
               ? (res.chainRatio.activationCountProportion * 100).toFixed(2) + '%'
-              : 0.00 + '%',
+              : 0.0 + '%',
             beforeFormPrice: res.chainRatio.beforeFormPriceProportion
               ? (res.chainRatio.beforeFormPriceProportion * 100).toFixed(2) + '%'
               : res.chainRatio.beforeActivationPriceProportion
               ? (res.chainRatio.beforeActivationPriceProportion * 100).toFixed(2) + '%'
-              : 0.00 + '%',
+              : 0.0 + '%',
 
             afterFormPrice: res.chainRatio.afterFormPriceProportion
               ? (res.chainRatio.afterFormPriceProportion * 100).toFixed(2) + '%'

+ 45 - 48
src/views/modules/Statistics/materialStatistics.vue

@@ -69,43 +69,14 @@
 <template>
   <div class="data-display-statistics">
     <a-row class="image-list-heading vm-panel">
-      <div class="panel-heading">{{ title }}</div>
+      <div class="panel-heading" style="display:flex;justify-content: space-between;">
+        {{ title }}
+        <a-button @click="dianji">进入账户报表</a-button>
+      </div>
       <a-row>
         <a-col :span="24">
           <a-card :bordered="false" class="search-box">
-            <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)"
-            />
+            <time-check @getAdd="getAdd" :startValue.sync="startValue" :timeList="timeList"></time-check>
           </a-card>
         </a-col>
       </a-row>
@@ -143,7 +114,7 @@
         </a-card>
       </a-col>
     </a-row>
-    <a-modal title="环比展示" v-model="visible" @ok="handleOk" width="90%">
+    <!-- <a-modal title="环比展示" v-model="visible" @ok="handleOk" width="90%">
       <div v-if="detail">
         <video
           class="video"
@@ -182,7 +153,8 @@
           </span>
         </a-table>
       </a-card>
-    </a-modal>
+    </a-modal>-->
+    <ratio-modal ref="ratio" />
   </div>
 </template>
 
@@ -190,10 +162,14 @@
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import moment from 'moment'
-import { getKuaiShouMaterialMarket, getKuaiShouChainRatio } from '@api/statistics'
+import { getKuaiShouMaterialMarket, getKuaiShouChainRatio, getMaterialAccount } from '@api/statistics'
 import axios from 'axios'
 import { mapGetters } from 'vuex'
 import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
+
+import timeCheck from './components/timeCheck'
+import ratioModal from './components/ratioModal'
+
 var length = 0
 var active = 1
 const columns = [
@@ -387,7 +363,9 @@ export default {
   name: 'data-display-statistics',
   components: {
     ACol,
-    ARow
+    ARow,
+    timeCheck,
+    ratioModal
   },
 
   data: function() {
@@ -395,6 +373,14 @@ export default {
       title: '素材大盘报表',
       columns,
       columnsDetail,
+      timeList: [
+        { label: '今天', value: 1, show: true },
+        { label: '昨天', value: 2, show: true },
+        { label: '近一周', value: 3, show: true },
+        { label: '近十五天', value: 4, show: true },
+        { label: '近一月', value: 5, show: true },
+        { label: '近三月', value: 6, show: true }
+      ],
       data: [],
       active: 1,
       pagin: 1,
@@ -422,9 +408,10 @@ export default {
         on: {
           click: () => {
             // 点击改行时要做的事情
-            this.detail = record
-            this.visible = true
-            this.getMineList(record.signature)
+            // this.detail = record
+            // this.visible = true
+            // this.getMineList(record.signature)
+            this.$refs.ratio.getMineList(record,this.active)
           }
         }
       })
@@ -496,13 +483,17 @@ export default {
         params.endDate = this.allValue[1]
       }
       getKuaiShouMaterialMarket(params).then(res => {
-        this.data = res.map((item, index) => {
-          return {
-            key: index,
-            ...item
-          }
-        })
-        this.loading = false
+        if (res.length > 0) {
+          this.data = res.map((item, index) => {
+            return {
+              key: index,
+              ...item
+            }
+          })
+          this.loading = false
+        } else {
+          this.loading = false
+        }
       })
     },
     getMineList(md5) {
@@ -552,6 +543,9 @@ export default {
           this.visible = true
         }
       })
+    },
+    dianji() {
+      this.$router.replace({ path: '/modules/Statistics/accountMaterStatistics' })
     }
   },
   watch: {},
@@ -562,6 +556,9 @@ export default {
   mounted: function() {
     this.$nextTick(() => {
       this.getList()
+      getMaterialAccount({ userId: this.userInfo().id }).then(res => {
+        console.log(res)
+      })
     })
   }
 }