Browse Source

提交代码,账号数据展示

zhuxinbo 5 years ago
parent
commit
afe9de0d03

+ 4 - 1
package.json

@@ -25,6 +25,7 @@
     "dayjs": "^1.8.0",
     "dayjs": "^1.8.0",
     "echarts": "^4.3.0",
     "echarts": "^4.3.0",
     "enquire.js": "^2.1.6",
     "enquire.js": "^2.1.6",
+    "file-save": "^0.2.0",
     "html2canvas": "^1.0.0-rc.3",
     "html2canvas": "^1.0.0-rc.3",
     "iview": "2.0.0-rc.17",
     "iview": "2.0.0-rc.17",
     "jquery": "^3.4.1",
     "jquery": "^3.4.1",
@@ -68,12 +69,14 @@
     "babel-eslint": "^10.0.1",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
     "eslint-plugin-vue": "^5.1.0",
+    "file-saver": "^2.0.2",
     "html-webpack-plugin": "^3.2.0",
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.9.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
     "less-loader": "^4.1.0",
     "node-sass": "^4.11.0",
     "node-sass": "^4.11.0",
     "sass-loader": "^7.0.1",
     "sass-loader": "^7.0.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "xlsx": "^0.15.1"
   },
   },
   "eslintConfig": {
   "eslintConfig": {
     "root": true,
     "root": true,

+ 31 - 118
src/views/modules/Statistics/Statistics.vue

@@ -89,129 +89,40 @@
     </a-row>
     </a-row>
     <a-row :gutter="16" v-if="kuaishou">
     <a-row :gutter="16" v-if="kuaishou">
       <a-col :span="6">
       <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="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?Math.abs(kuaishou.costProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="总消耗"
+          typeName="cost"
+          typeThan="costProportion"
+        ></lifting>
       </a-col>
       </a-col>
       <a-col :span="6">
       <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="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?Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="封面点击数"
+          typeName="photoClick"
+          typeThan="photoClickProportion"
+        ></lifting>
       </a-col>
       </a-col>
       <a-col :span="6">
       <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="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?Math.abs(kuaishou.showProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="封面曝光数"
+          typeName="photoShow"
+          typeThan="showProportion"
+        ></lifting>
       </a-col>
       </a-col>
       <a-col :span="6">
       <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="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?Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="素材曝光数"
+          typeName="aclick"
+          typeThan="aClickProportion"
+        ></lifting>
       </a-col>
       </a-col>
     </a-row>
     </a-row>
     <a-row :gutter="10">
     <a-row :gutter="10">
@@ -427,6 +338,7 @@ import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import ACol from 'ant-design-vue/es/grid/Col'
 import moment from 'moment'
 import moment from 'moment'
 import countTo from 'vue-count-to'
 import countTo from 'vue-count-to'
+import lifting from './components/lifting'
 import { getAccountReport, getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
 import { getAccountReport, getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
 import { getAction, postAction } from '@/api/manage'
 import { getAction, postAction } from '@/api/manage'
 var upDate
 var upDate
@@ -448,7 +360,8 @@ export default {
   components: {
   components: {
     ACol,
     ACol,
     ARow,
     ARow,
-    countTo
+    countTo,
+    lifting
   },
   },
 
 
   data: function() {
   data: function() {

File diff suppressed because it is too large
+ 1131 - 0
src/views/modules/Statistics/components/cardFrame.vue


+ 158 - 0
src/views/modules/Statistics/components/lifting.vue

@@ -0,0 +1,158 @@
+<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-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;
+}
+</style>
+<template>
+  <div class="data-display-statistics">
+    <a-card :title="title" :bordered="false">
+      <countTo :startVal="0" :endVal="kuaishou[typeName]" :duration="duration" :decimals="2"></countTo>
+      <a-icon
+        v-if="kuaishou[typeThan]>0&&active==1"
+        type="rise"
+        class="styleElse"
+        style="color:red;"
+      />
+      <a-icon
+        v-else-if="kuaishou[typeThan]<0&&active==1"
+        type="fall"
+        class="styleElse"
+        style="color:#0bcd74;"
+      />
+      <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
+      <span
+        v-if="active==1"
+        :style="kuaishou[typeThan]>0?'color:red':'color:#0bcd74'"
+        class="styleElse"
+        style="  margin-left:0"
+      >{{kuaishou[typeThan]?Math.abs(kuaishou[typeThan]*100).toFixed(2)+'%':'0.00%'}}</span>
+      <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
+        <template slot="title">
+          <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
+        </template>
+        <a-icon type="exclamation-circle" />
+      </a-tooltip>
+    </a-card>
+  </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'
+export default {
+  name: 'lifting',
+  components: {
+    ACol,
+    ARow,
+    countTo
+  },
+  props: {
+    active: {
+      type: Number,
+      default() {
+        return 1
+      }
+    },
+    kuaishou: {
+      type: Object,
+      default() {
+        return {
+          aclick: 0,
+          aClickProportion: 0,
+          cost: 0,
+          costProportion: 0,
+          photoClick: 0,
+          photoClickroportion: 0,
+          photoShow: 0,
+          showProportion: 0,
+          discountCost: 0,
+          discountCostProportion: 0
+        }
+      }
+    },
+    title: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    typeName: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    typeThan: {
+      type: String,
+      default() {
+        return ''
+      }
+    }
+  },
+  data: function() {
+    return {
+      duration: 1000
+    }
+  },
+  filters: {},
+  methods: {},
+  watch: {},
+  distoryed() {},
+  mounted: function() {}
+}
+</script>

+ 413 - 152
src/views/modules/Statistics/dataDisplayStatistics.vue

@@ -145,159 +145,68 @@
     </a-row>
     </a-row>
     <a-row :gutter="16" v-if="kuaishou">
     <a-row :gutter="16" v-if="kuaishou">
       <a-col :span="6" style="width:20%">
       <a-col :span="6" style="width:20%">
-        <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="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?Math.abs(kuaishou.costProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="总消耗"
+          typeName="cost"
+          typeThan="costProportion"
+        ></lifting>
       </a-col>
       </a-col>
       <a-col :span="6" style="width:20%">
       <a-col :span="6" style="width:20%">
-        <a-card title="折后消耗" :bordered="false">
-          <!-- <p>{{kuaishou.cost}}</p> -->
-          <countTo :startVal="0" :endVal="kuaishou.discountCost" :duration="duration" :decimals="2"></countTo>
-          <a-icon
-            v-if="kuaishou.discountCostProportion>0&&active==1"
-            type="rise"
-            class="styleElse"
-            style="color:red;"
-          />
-          <a-icon
-            v-else-if="kuaishou.discountCostProportion<0&&active==1"
-            type="fall"
-            class="styleElse"
-            style="color:#0bcd74;"
-          />
-          <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
-          <span
-            v-if="active==1"
-            :style="kuaishou.discountCostProportion>0?'color:red':'color:#0bcd74'"
-            class="styleElse"
-            style="  margin-left:0"
-          >{{kuaishou.discountCostProportion?Math.abs(kuaishou.discountCostProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="折后消耗"
+          typeName="discountCost"
+          typeThan="discountCostProportion"
+        ></lifting>
       </a-col>
       </a-col>
       <a-col :span="6" style="width:20%">
       <a-col :span="6" style="width:20%">
-        <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="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?Math.abs(kuaishou.photoClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="封面点击数"
+          typeName="photoClick"
+          typeThan="photoClickProportion"
+        ></lifting>
       </a-col>
       </a-col>
       <a-col :span="6" style="width:20%">
       <a-col :span="6" style="width:20%">
-        <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="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?Math.abs(kuaishou.showProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
-        </a-card>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="封面曝光数"
+          typeName="photoShow"
+          typeThan="showProportion"
+        ></lifting>
       </a-col>
       </a-col>
       <a-col :span="6" style="width:20%">
       <a-col :span="6" style="width:20%">
-        <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="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?Math.abs(kuaishou.aClickProportion*100).toFixed(2)+'%':'0.00%'}}</span>
-          <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
-            <template slot="title">
-              <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
-            </template>
-            <a-icon type="exclamation-circle" />
-          </a-tooltip>
+        <lifting
+          :kuaishou.sync="kuaishou"
+          :active.sync="active"
+          title="素材曝光数"
+          typeName="aclick"
+          typeThan="aClickProportion"
+        ></lifting>
+      </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-row :gutter="10" style="margin-top:10px">
+      <a-col :span="24">
+        <a-card style="width:100%;">
+          <div @click="exportExcel">导出</div>
+          <a-table :columns="columns" :dataSource="data" bordered id="outTable"></a-table>
         </a-card>
         </a-card>
       </a-col>
       </a-col>
     </a-row>
     </a-row>
@@ -311,19 +220,100 @@ import countTo from 'vue-count-to'
 import moment from 'moment'
 import moment from 'moment'
 import { getAdvertiserList, getReportList } from '@api/statistics'
 import { getAdvertiserList, getReportList } from '@api/statistics'
 import axios from 'axios'
 import axios from 'axios'
-var interval, objTimer
-var a = 0
+
+import FileSaver from 'file-saver'
+
+import XLSX from 'xlsx'
+import lifting from './components/lifting'
+
+// 引入基本模板
+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')
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    scopedSlots: { customRender: 'name' },
+    customRender: function(text, record, index) {
+      const obj = {
+        children: text,
+        attrs: {}
+      }
+      if (index == 0) {
+        obj.attrs.rowSpan = 4
+      }
+      if (index == 1) {
+        obj.attrs.rowSpan = 0
+      }
+      if (index == 2) {
+        obj.attrs.rowSpan = 0
+      }
+      if (index == 3) {
+        obj.attrs.rowSpan = 0
+      }
+      return obj
+    }
+  },
+  {
+    title: 'Cash Assets',
+    className: 'column-money',
+    dataIndex: 'money'
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address'
+  }
+]
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    money: '¥300,000.00',
+    address: 'New York No. 1 Lake Park'
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    money: '¥1,256,000.00',
+    address: 'London No. 1 Lake Park'
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    money: '¥120,000.00',
+    address: 'Sidney No. 1 Lake Park'
+  },
+  {
+    key: '4',
+    name: 'Joe Black',
+    money: '合计',
+    address: '123123'
+  }
+]
 export default {
 export default {
   name: 'data-display-statistics',
   name: 'data-display-statistics',
   components: {
   components: {
     ACol,
     ACol,
     ARow,
     ARow,
-    countTo
+    countTo,
+    lifting
   },
   },
 
 
   data: function() {
   data: function() {
     return {
     return {
       title: '账户数据展示',
       title: '账户数据展示',
+      data,
+      columns,
       options: [],
       options: [],
       list: [],
       list: [],
       appId: [],
       appId: [],
@@ -345,7 +335,31 @@ export default {
         showProportion: 0,
         showProportion: 0,
         discountCost: 0,
         discountCost: 0,
         discountCostProportion: 0
         discountCostProportion: 0
-      }
+      },
+      dataDetail: [],
+      tabListNoTitle: [
+        {
+          key: 'cost',
+          tab: '总消耗'
+        },
+        {
+          key: 'discountCost',
+          tab: '折后总消耗'
+        },
+        {
+          key: 'photoClick',
+          tab: '封面点击数'
+        },
+        {
+          key: 'photoShow',
+          tab: '封面曝光数'
+        },
+        {
+          key: 'aclick',
+          tab: '素材曝光数'
+        }
+      ],
+      noTitleKey: 'cost'
     }
     }
   },
   },
   filters: {
   filters: {
@@ -368,7 +382,6 @@ export default {
   methods: {
   methods: {
     moment,
     moment,
     disabledDate(current) {
     disabledDate(current) {
-      // Can not select days before today and today
       return current && current > moment().endOf('day')
       return current && current > moment().endOf('day')
     },
     },
     handleChange(value) {
     handleChange(value) {
@@ -397,7 +410,6 @@ export default {
       if (value !== '') {
       if (value !== '') {
         this.options = this.list.filter(item => {
         this.options = this.list.filter(item => {
           var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
           var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
-          console.log(data, value)
           return data.toLowerCase().indexOf(value.toLowerCase()) > -1
           return data.toLowerCase().indexOf(value.toLowerCase()) > -1
         })
         })
       } else {
       } else {
@@ -425,6 +437,8 @@ export default {
             that.kuaishou.discountCost = 0
             that.kuaishou.discountCost = 0
           } else {
           } else {
             that.kuaishou = res.summary
             that.kuaishou = res.summary
+            that.dataDetail = res.trend
+            that.drawPie(that.noTitleKey, res.trend)
           }
           }
         })
         })
       } else {
       } else {
@@ -442,7 +456,254 @@ export default {
         this.allValue = []
         this.allValue = []
       }
       }
       this.active = checked
       this.active = checked
-      this.addUser()
+      this.addUser(checked)
+    },
+    onTabChange(key, type) {
+      console.log(key, type)
+      this[type] = key
+      if (type == 'noTitleKey') {
+        this.drawPie(key, this.dataDetail)
+      }
+    },
+    drawPie(type, data) {
+      console.log(type)
+      var dataLegend = []
+      var dataLength = []
+      var dataElse = []
+      var dataDate = []
+      var that = this
+      if (this.active == 1 || this.active == 2) {
+        dataDate = data.map(item => {
+          return item.statHour
+        })
+      } else {
+        dataDate = data.map(item => {
+          return item.statDate
+        })
+      }
+      dataLength = data.map(item => {
+        return item[type]
+      })
+      if (type == 'cost') {
+        dataLegend = ['总消耗']
+        dataElse = data.map(item => {
+          if (item.now) {
+            return { proportion: (item.now.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+          } else {
+            return { proportion: 0, statHour: item.statHour }
+          }
+        })
+      } else if (type == 'photoClick') {
+        dataLegend = ['封面点击数']
+        dataElse = data.map(item => {
+          if (item.now) {
+            return { proportion: (item.now.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+          } else {
+            return { proportion: 0, statHour: item.statHour }
+          }
+        })
+      } else if (type == 'photoShow') {
+        dataLegend = ['封面曝光数']
+        dataElse = data.map(item => {
+          if (item.now) {
+            return { proportion: (item.now.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+          } else {
+            return { proportion: 0, statHour: item.statHour }
+          }
+        })
+      } else if (type == 'aclick') {
+        dataLegend = ['素材曝光数']
+        dataElse = data.map(item => {
+          if (item.now) {
+            return { proportion: (item.now.aClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+          } else {
+            return { proportion: 0, statHour: item.statHour }
+          }
+        })
+      } else if (type == 'discountCost') {
+        dataLegend = ['折后总消耗']
+        dataElse = data.map(item => {
+          if (item.now) {
+            return { proportion: (item.now.discountCostProportion * 100).toFixed(2) + '%', statHour: item.statHour }
+          } else {
+            return { proportion: 0, statHour: item.statHour }
+          }
+        })
+        dataLength = data.map(item => {
+          return (item.cost / this.discount).toFixed(2)
+        })
+      }
+
+      console.log(dataLength, 134123)
+      var series
+      if (this.active == 1) {
+        dataLegend = ['今天', '昨天']
+        series = [
+          {
+            name: dataLegend[0],
+            type: 'line',
+            color: '#9933ff',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#9933ff'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: data.map(item => {
+              if (item.now) {
+                return item.now[type]
+              } else {
+                return 0
+              }
+            })
+          },
+          {
+            name: dataLegend[1],
+            type: 'line',
+            color: '#0bcd74',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#0bcd74'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: dataLength
+          }
+        ]
+      } else {
+        series = [
+          {
+            name: dataLegend[0],
+            type: 'line',
+            color: '#0bcd74',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 1,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#0bcd74'
+              }
+            },
+            itemStyle: {
+              borderColor: '#ffffff',
+              borderWidth: 3
+            },
+            data: dataLength
+          }
+        ]
+      }
+
+      var option = {
+        backgroundColor: '#fff',
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { readOnly: false }
+          }
+        },
+        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
+            }
+            if (that.active == 1) {
+              if (params.length > 1) {
+                return `${params[0].marker}今天${params[0].name}时:${params[0].data}  <br/>
+              ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
+            环比:${da} <br/> `
+              } else {
+                return `${params[0].marker}时间:${params[0].name} <br/>
+            数值:${params[0].data} `
+              }
+            } else {
+              return `${params[0].marker}时间:${params[0].name} <br/>
+            数值:${params[0].data} `
+            }
+          }
+        },
+        legend: {
+          data: dataLegend
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+
+        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: series
+      }
+      var chart = echarts.init(document.getElementById('chart'))
+      chart.clear()
+      chart.setOption(option, true)
+      window.onresize = function() {
+        chart.resize()
+      }
+    },
+    exportExcel() {
+      let vb = XLSX.utils.table_to_book(document.getElementById('outTable'), { display: true })
+      console.log(document.getElementById('outTable'), vb)
+      let vbout = XLSX.write(vb, { bookType: 'xlsx', bookSST: true, type: 'array' })
+
+      try {
+        FileSaver.saveAs(new Blob([vbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
+      } catch (e) {
+        if (typeof console !== 'undefined') console.log(e, vbout)
+      }
+      return vbout
     }
     }
   },
   },
   watch: {},
   watch: {},