TBtools-页面显示优化

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

@@ -30,170 +30,172 @@
         </el-col>
       </el-form>
     </el-row>
-    <!--商品信息-->
-    <el-row>
-      <el-col :span="18">
-        <div class="goods-info">
-          <div class="goods-cover">
-            <img :src="goodsInfo.img" alt="">
-          </div>
-          <div class="goods-detail">
-            <p><span>商品名称：</span>{{ goodsInfo.title }}<span></span>
-            <p><span>店铺名称：</span><span>{{ goodsInfo.shopName }}</span></p>
-            <p><span>近30天付费人数：</span><span>{{ goodsInfo.totalPayNum}}</span></p>
+    <template v-if="liuliangSource.length">
+      <!--商品信息-->
+      <el-row>
+        <el-col :span="18">
+          <div class="goods-info">
+            <div class="goods-cover">
+              <img :src="goodsInfo.img" alt="">
+            </div>
+            <div class="goods-detail">
+              <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>
-        </div>
-      </el-col>
-      <el-row :span="6"
-              type="flex"
-              :justify="'end'">
-        <el-button :type="numSelectDate === day ? 'primary' : ''" size="small" v-for="day in [7, 30]"
-                   @click="funSelectDate(day)" :key="day">近{{ day }}日数据
-        </el-button>
+        </el-col>
+        <el-row :span="6"
+                type="flex"
+                :justify="'end'">
+          <el-button :type="numSelectDate === day ? 'primary' : ''" size="small" v-for="day in [7, 30]"
+                     @click="funSelectDate(day)" :key="day">近{{ day }}日数据
+          </el-button>
+        </el-row>
       </el-row>
-    </el-row>
-    <el-row>
-      <el-col class="TT-title">
-        <span>关键指标对比</span>
-        <template v-if="myzhishuData.length">
-          <span>{{ myzhishuData[0].time }}</span>
-          <span> -{{ myzhishuData[myzhishuData.length - 1].time }}</span>
-        </template>
-      </el-col>
+      <el-row>
+        <el-col class="TT-title">
+          <span>关键指标对比</span>
+          <template v-if="myzhishuData.length">
+            <span>{{ myzhishuData[0].time }}</span>
+            <span> -{{ myzhishuData[myzhishuData.length - 1].time }}</span>
+          </template>
+        </el-col>
 
-    </el-row>
-    <!--折线图-->
-    <el-row>
-      <el-col :span="24">
-        <div class="chart-box" ref="myChartLineBox"></div>
-      </el-col>
-    </el-row>
-    <!--表格-->
-    <el-row type="flex"
-            justify="space-between">
-      <el-col :span="12">
-        <div class="TT-title-wrap">
-          <p class="TT-title">
-            <span>每日对比</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('my-table0')">导出</el-button>
-          </p>
-        </div>
-        <el-table
-          id="my-table0"
-          :data="myzhishuData"
-          border
-          :summary-method="getSummaries"
-          :header-cell-style="{background: '#f5f7fa'}"
-          show-summary
-          style="width: 100%; margin-top: 20px;">
-          <el-table-column
-            align="center"
-            prop="time"
-            label="日期">
-          </el-table-column>
-          <el-table-column
-            align="center"
-            sortable
-            prop="uvIndex"
-            label="访客数">
-          </el-table-column>
-          <el-table-column
-            align="center"
-            sortable
-            prop="tradeIndex"
-            label="买家数">
-          </el-table-column>
-          <el-table-column
-            width="120px"
-            align="center"
-            sortable
-            prop="payByrCntIndex"
-            label="交易金额">
-          </el-table-column>
-          <el-table-column
-            width="120px"
-            align="center"
-            sortable
-            prop="payRateIndex"
-            label="支付转化率">
-            <template slot-scope="scope">
-              <span>{{ scope.row.payRateIndex }}%</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            width="120px"
-            align="center"
-            sortable
-            prop="avgPrice"
-            label="客单价">
-          </el-table-column>
-          <el-table-column
-            align="center"
-            sortable
-            prop="avgUvPrice"
-            label="UV值">
-          </el-table-column>
-        </el-table>
-      </el-col>
-      <el-col :span="11">
-        <div class="TT-title-wrap">
-          <p class="TT-title">
-            <span>流量来源分析</span>
-            <span v-if="myzhishuData.length">{{ myzhishuData[myzhishuData.length - 1].time }}</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>
+      </el-row>
+      <!--折线图-->
+      <el-row>
+        <el-col :span="24">
+          <div class="chart-box" ref="myChartLineBox"></div>
+        </el-col>
+      </el-row>
+      <!--表格-->
+      <el-row type="flex"
+              justify="space-between">
+        <el-col :span="12">
+          <div class="TT-title-wrap">
+            <p class="TT-title">
+              <span>每日对比</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('my-table0')">导出</el-button>
+            </p>
+          </div>
+          <el-table
+            id="my-table0"
+            :data="myzhishuData"
+            border
+            :summary-method="getSummaries"
+            :header-cell-style="{background: '#f5f7fa'}"
+            show-summary
+            style="width: 100%; margin-top: 20px;">
+            <el-table-column
+              align="center"
+              prop="time"
+              label="日期">
+            </el-table-column>
+            <el-table-column
+              align="center"
+              sortable
+              prop="uvIndex"
+              label="访客数">
+            </el-table-column>
+            <el-table-column
+              align="center"
+              sortable
+              prop="tradeIndex"
+              label="买家数">
+            </el-table-column>
+            <el-table-column
+              width="120px"
+              align="center"
+              sortable
+              prop="payByrCntIndex"
+              label="交易金额">
+            </el-table-column>
+            <el-table-column
+              width="120px"
+              align="center"
+              sortable
+              prop="payRateIndex"
+              label="支付转化率">
+              <template slot-scope="scope">
+                <span>{{ scope.row.payRateIndex }}%</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              width="120px"
+              align="center"
+              sortable
+              prop="avgPrice"
+              label="客单价">
+            </el-table-column>
+            <el-table-column
+              align="center"
+              sortable
+              prop="avgUvPrice"
+              label="UV值">
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="11">
+          <div class="TT-title-wrap">
+            <p class="TT-title">
+              <span>流量来源分析</span>
+              <span v-if="myzhishuData.length">{{ myzhishuData[myzhishuData.length - 1].time }}</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>
+    </template>
   </div>
 </template>
 
@@ -232,7 +234,7 @@ export default {
         }]
       },
       searchData: {
-        productId: '',
+        productId: '', // 602950702411
         queryDate: ''
       },
       rules: {
@@ -290,7 +292,9 @@ export default {
                 img,
                 totalPayNum
               }
-              this.initChartLine()
+              this.$nextTick(() => {
+                this.initChartLine()
+              })
               return
             }
             this.$message.error(data.msg)

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

@@ -83,7 +83,7 @@ export default {
         }
         this.dataListLoading = true
         this.$http({
-          url: this.$http.adornUrl('/tb/getProductAskInfo'),
+          url: this.$http.adornUrl('/tb/getfeedback'),
           method: 'POST',
           data: this.$http.adornData({
             'page': this.pageIndex,

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

@@ -8,8 +8,7 @@
         </el-form-item>
       </el-form>
     </el-col>
-    <el-col class="TT-goods-info" :offset="1">
-      <h3>价格走势</h3>
+    <el-col class="TT-goods-info" v-show="Object.keys(priceList).length">
       <p>商品ID：{{ itemId }}</p>
       <p>最高价：{{ maxPrice }}</p>
       <p>最低价：{{ minPrice }}</p>