tbtools-竞品分析

htmldev/TBTools/src/views/modules/tools/tools-analyze.vue

@@ -2,36 +2,45 @@
   <div>
     <!--头部搜索区-->
     <el-row>
-      <el-col :span="6">
-        <el-input clearable v-model="goodsId" placeholder="请输入需要查询的商品ID"></el-input>
-      </el-col>
-      <el-col :span="4"
-              :offset="1">
-        <el-date-picker
-          v-model="YYMMDD"
-          align="right"
-          type="date"
-          placeholder="选择查询日期"
-          :picker-options="pickerOptions"
-          style="width: 100%;">
-        </el-date-picker>
-      </el-col>
-      <el-col :span="2"
-              :offset="1">
-        <el-button type="primary" icon="el-icon-search">查询</el-button>
-      </el-col>
+      <el-form :model="searchData" :rules="rules" ref="ruleForm">
+        <el-col :span="4">
+          <el-form-item prop="productId">
+            <el-input clearable v-model="searchData.productId" placeholder="请输入需要查询的商品ID"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4" :offset="1">
+          <el-form-item prop="queryDate">
+            <el-date-picker
+              v-model="searchData.queryDate"
+              align="right"
+              type="date"
+              placeholder="选择查询日期"
+              :picker-options="pickerOptions"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              style="width: 100%;">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="3" :offset="1">
+          <el-form-item>
+            <el-button type="primary" :disabled="isDisabled" icon="el-icon-search" @click="submitForm('ruleForm')">查询
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
     </el-row>
     <!--商品信息-->
     <el-row>
       <el-col :span="18">
         <div class="goods-info">
           <div class="goods-cover">
-            <img src="" alt="">
+            <img :src="goodsInfo.img" alt="">
           </div>
           <div class="goods-detail">
-            <p><span>商品名称：</span><span></span>
-            <p><span>店铺名称：</span><span>金秀鱼服饰旗舰店</span></p>
-            <p><span>近30天付费人数：</span><span></span></p>
+            <p><span>商品名称：</span>{{ goodsInfo.title }}<span></span>
+            <p><span>店铺名称：</span><span>{{ goodsInfo.shopName }}</span></p>
+            <p><span>近30天付费人数：</span><span>{{ goodsInfo.totalPayNum}}</span></p>
           </div>
         </div>
       </el-col>
@@ -46,8 +55,10 @@
     <el-row>
       <el-col class="TT-title">
         <span>关键指标对比</span>
-        <span>2020-10-06</span>
-        <span> - 2020-11-04</span>
+        <template v-if="myzhishuData.length">
+          <span>{{ myzhishuData[0].time }}</span>
+          <span> -{{ myzhishuData[myzhishuData.length - 1].time }}</span>
+        </template>
       </el-col>
 
     </el-row>
@@ -64,16 +75,18 @@
         <div class="TT-title-wrap">
           <p class="TT-title">
             <span>每日对比</span>
-            <span>2020-10-06</span>
-            <span> - 2020-11-04</span>
+            <template v-if="myzhishuData.length">
+              <span>{{ myzhishuData[0].time }}</span>
+              <span> -{{ myzhishuData[myzhishuData.length - 1].time }}</span>
+            </template>
           </p>
           <p>
-            <el-button type="primary" size="small" @click="exportExcel">导出</el-button>
+            <el-button type="primary" size="small" @click="exportExcel('my-table0')">导出</el-button>
           </p>
         </div>
         <el-table
           id="my-table0"
-          :data="tableData"
+          :data="myzhishuData"
           border
           :summary-method="getSummaries"
           :header-cell-style="{background: '#f5f7fa'}"
@@ -81,65 +94,110 @@
           style="width: 100%; margin-top: 20px;">
           <el-table-column
             align="center"
-            prop="date"
+            prop="time"
             label="日期">
           </el-table-column>
           <el-table-column
             align="center"
             sortable
-            prop="pv"
+            prop="uvIndex"
             label="访客数">
           </el-table-column>
           <el-table-column
             align="center"
             sortable
-            prop="user"
+            prop="tradeIndex"
             label="买家数">
           </el-table-column>
           <el-table-column
             width="120px"
             align="center"
             sortable
-            prop="amount"
+            prop="payByrCntIndex"
             label="交易金额">
           </el-table-column>
           <el-table-column
             width="120px"
             align="center"
             sortable
-            prop="rate"
+            prop="payRateIndex"
             label="支付转化率">
             <template slot-scope="scope">
-              <span>{{ scope.row.rate * 100 }}%</span>
+              <span>{{ scope.row.payRateIndex }}%</span>
             </template>
           </el-table-column>
           <el-table-column
             width="120px"
             align="center"
             sortable
-            prop="price"
+            prop="avgPrice"
             label="客单价">
           </el-table-column>
           <el-table-column
             align="center"
             sortable
-            prop="uv"
+            prop="avgUvPrice"
             label="UV值">
           </el-table-column>
         </el-table>
       </el-col>
       <el-col :span="11">
-        <p class="TT-title">
-          <span>流量来源分析 </span>
-          <span>2020-10-06</span>
-        </p>
+        <div class="TT-title-wrap">
+          <p class="TT-title">
+            <span>流量来源分析</span>
+            <span>{{ searchData.queryDate }}</span>
+          </p>
+          <p>
+            <el-button type="primary" size="small" @click="exportExcel('my-table1')">导出</el-button>
+          </p>
+        </div>
+        <el-table
+          id="my-table1"
+          :data="liuliangSource"
+          border
+          :header-cell-style="{background: '#f5f7fa'}"
+          style="width: 100%; margin-top: 20px;">
+          <el-table-column
+            align="center"
+            prop="pageName"
+            label="渠道">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            sortable
+            prop="uvIndex"
+            label="访客数">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            sortable
+            prop="crtByrCntIndex"
+            label="下单买家数">
+          </el-table-column>
+          <el-table-column
+            width="120px"
+            align="center"
+            sortable
+            prop="payRateIndex"
+            label="支付买家数">
+          </el-table-column>
+          <el-table-column
+            width="120px"
+            align="center"
+            sortable
+            prop="payByrCntIndex"
+            label="支付转化率">
+            <template slot-scope="scope">
+              <span>{{ scope.row.payByrCntIndex }}%</span>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { timeForMat } from '../../../utils/formatDate'
 import echarts from 'echarts'
 import FileSaver from 'file-saver'
 import XLSX from 'xlsx'
@@ -148,7 +206,6 @@ export default {
   name: 'toolsAnalyze',
   data () {
     return {
-      goodsId: '',
       pickerOptions: {
         disabledDate (time) {
           return time.getTime() > Date.now() - 8.64e7
@@ -174,44 +231,30 @@ export default {
           }
         }]
       },
-      YYMMDD: '',
-      numSelectDate: 7,
-      tableData: [
-        {
-          id: '12987122',
-          date: '11-03', // 日期
-          pv: 300, // 访客数
-          user: 400, // 买家数
-          amount: 500, // 交易金额
-          rate: '0.8', // 支付转化率
-          price: 600, // 客单价
-          uv: 700 // UV值
-        },
-        {
-          id: '12987122',
-          date: '11-05', // 日期
-          pv: 500, // 访客数
-          user: 600, // 买家数
-          amount: 700, // 交易金额
-          rate: '1', // 支付转化率
-          price: 800, // 客单价
-          uv: 900 // UV值
-        },
-        {
-          id: '12987122',
-          date: '11-04', // 日期
-          pv: 400, // 访客数
-          user: 500, // 买家数
-          amount: 600, // 交易金额
-          rate: '0.9', // 支付转化率
-          price: 700, // 客单价
-          uv: 800 // UV值
-        }
-      ]
+      searchData: {
+        productId: '',
+        queryDate: ''
+      },
+      rules: {
+        productId: [{ required: true, message: '请输入需要查询的商品ID', trigger: 'blur' }],
+        queryDate: [{ type: 'string', required: true, message: '选择查询日期', trigger: 'change' }]
+      },
+      numSelectDate: 30,
+      isDisabled: false,
+      goodsInfo: {
+        title: '',
+        shopName: '',
+        img: '',
+        totalPayNum: 0
+      },
+      liuliangSource: [],
+      zhishuData: []
     }
   },
-  mounted () {
-    this.initChartLine()
+  computed: {
+    myzhishuData () {
+      return this.zhishuData.slice(-this.numSelectDate)
+    }
   },
   activated () {
     // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
@@ -220,13 +263,51 @@ export default {
     }
   },
   methods: {
+    submitForm (formName) {
+      const postData = {
+        ...this.searchData
+      }
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.isDisabled) {
+            return
+          }
+          this.isDisabled = true
+          this.$http({
+            url: this.$http.adornUrl('/tb/exchangeProduct'),
+            method: 'post',
+            data: this.$http.adornData(postData)
+          }).then(({ data }) => {
+            this.isDisabled = false
+            if (data.status) {
+              const { liuliangSource, zhishuData, title, shopName, img, totalPayNum } = data.data
+              this.liuliangSource = liuliangSource
+              this.zhishuData = zhishuData
+              this.goodsInfo = {
+                title,
+                shopName,
+                img,
+                totalPayNum
+              }
+              this.initChartLine()
+              return
+            }
+            this.$message.error(data.msg)
+          }).catch(() => {
+            this.isDisabled = false
+          })
+        }
+      })
+    },
     funSelectDate (day) {
       this.numSelectDate = day
-      console.log(timeForMat(day))
+      this.$nextTick(() => {
+        this.initChartLine()
+      })
     },
     // 折线图
     initChartLine () {
-      var option = {
+      const option = {
         'title': {
           'text': '关键指标对比',
           show: false
@@ -235,7 +316,8 @@ export default {
           'trigger': 'axis'
         },
         'legend': {
-          'data': ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+          'data': ['访客数', '支付买家数', '交易金额', '支付转化率'],
+          'selectedMode': 'single'
         },
         'grid': {
           'left': '3%',
@@ -251,41 +333,35 @@ export default {
         'xAxis': {
           'type': 'category',
           'boundaryGap': false,
-          'data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+          'data': this.myzhishuData.map(item => item.time)
         },
         'yAxis': {
           'type': 'value'
         },
         'series': [
           {
-            'name': '邮件营销',
-            'type': 'line',
-            'stack': '总量',
-            'data': [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            'name': '联盟广告',
+            'name': '访客数',
             'type': 'line',
             'stack': '总量',
-            'data': [220, 182, 191, 234, 290, 330, 310]
+            'data': this.myzhishuData.map(item => item.uvIndex)
           },
           {
-            'name': '视频广告',
+            'name': '支付买家数',
             'type': 'line',
             'stack': '总量',
-            'data': [150, 232, 201, 154, 190, 330, 410]
+            'data': this.myzhishuData.map(item => item.tradeIndex)
           },
           {
-            'name': '直接访问',
+            'name': '交易金额',
             'type': 'line',
             'stack': '总量',
-            'data': [320, 332, 301, 334, 390, 330, 320]
+            'data': this.myzhishuData.map(item => item.payByrCntIndex)
           },
           {
-            'name': '搜索引擎',
+            'name': '支付转化率',
             'type': 'line',
             'stack': '总量',
-            'data': [820, 932, 901, 934, 1290, 1330, 1320]
+            'data': this.myzhishuData.map(item => item.payRateIndex)
           }
         ]
       }
@@ -326,7 +402,7 @@ export default {
               }
             })
           }
-          sums[index] = label[index] + '\n' + (index === 4 ? sums[index] * 100 + '%' : sums[index])
+          sums[index] = label[index] + '\n' + (index === 4 ? sums[index] + '%' : sums[index])
         } else {
           sums[index] = ''
         }
@@ -335,8 +411,8 @@ export default {
       return sums
     },
     // 导出表格所用
-    exportExcel () {
-      var wb = XLSX.utils.table_to_book(document.querySelector('#my-table0'))
+    exportExcel (id) {
+      var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
       var wbout = XLSX.write(wb, {
         bookType: 'xlsx',
         bookSST: true,