数据中心

src/api/modules/datacenter.js

@@ -15,18 +15,36 @@ export const dataCenter = {
       params: data,
     });
   },
-  updatePreSaleProducts: (data) => {
+  //商品分析
+  productAnalysis: (data) => {
     return $http.request({
-      url: `/merchant-api/product/save/advance/sell`,
+      url: `/merchant-api/pc/data/analyse/product/analyse`,
-      method: "post",
+      method: "get",
-      data,
+      params: data,
     });
   },
-  closePreSaleProducts: (data) => {
+  //订单分析
+  orderAnalysis: (data) => {
     return $http.request({
-      url: `/merchant-api/product/update/advance/sell/status`,
+      url: `/merchant-api/pc/data/analyse/order/analyse`,
-      method: "post",
+      method: "get",
-      data,
+      params: data,
+    });
+  },
+  //订单结算统计
+  orderSummary: (data) => {
+    return $http.request({
+      url: `/merchant-api/pc/data/analyse/settle/summary`,
+      method: "get",
+      params: data,
+    });
+  },
+  //订单结算明细
+  orderSummaryPage: (data) => {
+    return $http.request({
+      url: `/merchant-api/pc/data/analyse/settle/page`,
+      method: "get",
+      params: data,
     });
   },
 };

src/views/modules/datacenter/customer-analysis/index.vue

@@ -1,25 +1,11 @@
 <template>
   <div>
     <div>
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="日期类型">
           <el-select
             style="margin-right: 20px"
-        v-model="value1"
+            v-model="formInline.dateType"
-        placeholder="请选择统计类型"
-      >
-        <el-option
-          v-for="item in [
-            { value: '1', label: '1' },
-            { value: '2', label: '2' },
-          ]"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
-      <el-select
-        style="margin-right: 20px"
-        v-model="value"
             placeholder="请选择"
           >
             <el-option
@@ -35,8 +21,32 @@
             >
             </el-option>
           </el-select>
+        </el-form-item>
+        <el-form-item label="统计类型">
+          <el-select
+            style="margin-right: 20px"
+            v-model="formInline.elementType"
+            placeholder="请选择统计类型"
+          >
+            <el-option
+              v-for="item in [
+                { value: '1', label: '浏览数量' },
+                { value: '2', label: '浏览人数' },
+                { value: '3', label: '新客数量' },
+                { value: '4', label: '支付订单人数' },
+              ]"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
           <el-button @click="getList" type="primary">查询</el-button>
-      <el-button type="success">导出</el-button>
+          <el-button @click="batchExport" type="success">导出</el-button>
+        </el-form-item>
+      </el-form>
     </div>
     <div class="stat-list">
       <div class="stat-item">
@@ -48,16 +58,14 @@
               analysis.viewCount ? analysis.viewCount : "0"
             }}</span>
             <span
-              v-if="analysis.viewCountRatio < 0"
+              v-if="analysis.viewCountRatio < '0%'"
               style="font-size: 16px; margin: 0 5px; color: green"
               >↓</span
             >
             <span style="font-size: 16px; margin: 0 5px; color: red" v-else
               >↑</span
             >
-            <span style="font-size: 16px">{{
+            <span style="font-size: 16px">{{ analysis.viewCountRatio }}</span>
-              absoluteValue(analysis.viewCountRatio)
-            }}</span>
           </div>
         </div>
       </div>
@@ -66,18 +74,16 @@
         <div class="stat-right">
           <div class="stat-title">浏览人数 （人）</div>
           <div class="stat-value">
-            <span style="font-size: 20px">62</span>
+            <span style="font-size: 20px">{{ analysis.peopleCount }}</span>
             <span
-              v-if="analysis.peopleCountRatio < 0"
+              v-if="analysis.peopleCountRatio < '0%'"
               style="font-size: 16px; margin: 0 5px; color: green"
               >↓</span
             >
             <span style="font-size: 16px; margin: 0 5px; color: red" v-else
               >↑</span
             >
-            <span style="font-size: 16px">{{
+            <span style="font-size: 16px">{{ analysis.peopleCountRatio }}</span>
-              absoluteValue(analysis.peopleCountRatio)
-            }}</span>
           </div>
         </div>
       </div>
@@ -90,7 +96,7 @@
               analysis.newPeopleCount ? analysis.newPeopleCount : "0"
             }}</span>
             <span
-              v-if="analysis.newPeopleCountRatio"
+              v-if="analysis.newPeopleCountRatio < '0%'"
               style="font-size: 16px; margin: 0 5px; color: green"
               >↓</span
             >
@@ -98,7 +104,7 @@
               >↑</span
             >
             <span style="font-size: 16px">{{
-              absoluteValue(analysis.newPeopleCountRatio)
+              analysis.newPeopleCountRatio
             }}</span>
           </div>
         </div>
@@ -146,6 +152,8 @@
 </template>
 
 <script>
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
 import { mapState } from "vuex";
 import * as echarts from "echarts";
 export default {
@@ -154,59 +162,51 @@ export default {
       value1: "",
       value: "",
       formInline: {
-        marketId: "",
+        dateType: "1",
-        shopId: "",
+        elementType: "1",
-        brandId: "",
-        countType: "",
-        dataType: "",
-        provinceCode: "",
-        cityCode: "",
       },
       analysis: {},
       trend: [],
     };
   },
   mounted() {
-    this.formInline = {
-      marketId: this.marketId,
-      shopId: this.shopId,
-      brandId: JSON.parse(sessionStorage.getItem("userInfo")).brandId,
-    };
     this.getList();
   },
   methods: {
     getList() {
       console.log("1213");
-      this.$api.dataCenter.customerAnalysis(this.formInline).then((res) => {
+      this.$api.dataCenter
+        .customerAnalysis({ dateType: this.formInline.dateType })
+        .then((res) => {
           this.analysis = res.data.data;
         });
       this.$api.dataCenter.customerTrend(this.formInline).then((res) => {
-        console.log(res);
+        this.trend = res.data.data;
+        this.init(res.data.data);
       });
-      this.init();
     },
-    init() {
+    init(data) {
       this.$nextTick(() => {
         // 折线图
         const myChat = echarts.init(
           document.getElementById("echarts-LineChart")
         );
-        myChat.setOption(this.LineChart());
+        myChat.setOption(this.LineChart(data));
         window.addEventListener("resize", () => {
           myChat.resize();
         });
       });
     },
-    LineChart() {
+    LineChart(data) {
       return {
         title: {
-          text: "交易趋势分析",
+          text: "数据趋势分析",
         },
         tooltip: {
           trigger: "axis",
         },
         legend: {
-          data: ["订单金额", "订单数", "订单商品数"],
+          data: [this.elementTypeName(this.formInline.elementType)],
         },
         grid: {
           left: "3%",
@@ -222,38 +222,65 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          data: data.map((item) => {
+            return item.countDate;
+          }),
         },
         yAxis: {
           type: "value",
         },
         series: [
           {
-            name: "订单金额",
+            name: this.elementTypeName(this.formInline.elementType),
             type: "line",
             stack: "Total",
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: data.map((item) => {
-          },
+              return item.value;
-          {
+            }),
-            name: "订单数",
-            type: "line",
-            stack: "Total",
-            data: [220, 182, 191, 234, 290, 330, 310],
-          },
-          {
-            name: "订单商品数",
-            type: "line",
-            stack: "Total",
-            data: [150, 232, 201, 154, 190, 330, 410],
           },
         ],
       };
     },
-    absoluteValue(row) {
+    elementTypeName(row) {
-      if (row === 0) {
+      if (row == "1") {
-        return 0;
+        return "浏览数量";
+      } else if (row == "2") {
+        return "浏览人数";
+      } else if (row == "3") {
+        return "新客数量";
+      } else if (row == "4") {
+        return "支付订单人数";
       }
-      return Math.abs(row);
+    },
+    async batchExport() {
+      let trendData = this.trend.map((item) => {
+        return {
+          日期: item.countDate,
+          数量: item.value,
+        };
+      });
+      let row = this.analysis;
+      const analysisData = [
+        {
+          展现量: row.viewCount,
+          浏览人数: row.peopleCount,
+          新客数量: row.newPeopleCount,
+          支付订单人数: row.payCount,
+          支付订单转化率: row.payConversion,
+        },
+      ];
+      const workbook = XLSX.utils.book_new();
+      const worksheet = XLSX.utils.json_to_sheet(analysisData);
+      const worksheetOne = XLSX.utils.json_to_sheet(trendData);
+
+      XLSX.utils.book_append_sheet(workbook, worksheet, "总数据");
+      XLSX.utils.book_append_sheet(workbook, worksheetOne, "数据趋势");
+      const excelData = XLSX.write(workbook, {
+        type: "array",
+        bookType: "xlsx",
+      });
+      const blob = new Blob([excelData], { type: "application/octet-stream" });
+      saveAs(blob, "客户分析.xlsx");
     },
   },
   computed: {

src/views/modules/datacenter/order-analysis/index.vue

@@ -1,15 +1,19 @@
 <template>
   <div>
     <div>
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="日期类型">
           <el-select
             style="margin-right: 20px"
-        v-model="value1"
+            v-model="formInline.dateType"
-        placeholder="请选择统计类型"
+            placeholder="请选择"
           >
             <el-option
               v-for="item in [
-            { value: '1', label: '1' },
+                { value: '1', label: '日' },
-            { value: '2', label: '2' },
+                { value: '2', label: '周' },
+                { value: '3', label: '月' },
+                { value: '4', label: '年' },
               ]"
               :key="item.value"
               :label="item.label"
@@ -17,7 +21,11 @@
             >
             </el-option>
           </el-select>
-      <el-button type="primary">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getList" type="primary">查询</el-button>
+        </el-form-item>
+      </el-form>
     </div>
     <div class="product">
       <div style="font-size: 18px">订单分析</div>
@@ -25,58 +33,83 @@
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">下单订单数量</div>
-            <div style="font-size: 20px" class="stat-value">435</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.orderCount }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">支付订单数量</div>
-            <div style="font-size: 20px" class="stat-value">45</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.payCount }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">有效订单数量</div>
-            <div style="font-size: 20px" class="stat-value">34</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.validCount }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">有效订单率</div>
-            <div style="font-size: 20px" class="stat-value">199</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.validRatio }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">订单实付金额（元）</div>
-            <div style="font-size: 20px" class="stat-value">1256</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.payMoney }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">订单退款金额（元）</div>
-            <div style="font-size: 20px" class="stat-value">1256</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.refundMoney }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">售后订单数量</div>
-            <div style="font-size: 20px" class="stat-value">34</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.afterSaleCount }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">售后订单率（%）</div>
-            <div style="font-size: 20px" class="stat-value">199</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.afterSaleRatio }}
             </div>
           </div>
         </div>
       </div>
-    <div style="padding: 20px; border: 1px solid #ccc; margin-top: 20px">
+    </div>
+    <div
+      style="
+        padding: 20px;
+        border: 1px solid #ccc;
+        margin-top: 20px;
+        height: 60vh;
+      "
+    >
       <div style="font-size: 18px; margin-bottom: 40px">订单结算明细</div>
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form :inline="true" :model="formData" class="demo-form-inline">
         <el-form-item label="下单时间">
           <el-date-picker
+            @change="changeValue"
+            value-format="yyyy-MM-dd HH:mm:ss"
             v-model="value"
             type="datetimerange"
             start-placeholder="开始日期"
@@ -86,7 +119,9 @@
         </el-form-item>
         <el-form-item label="结算时间">
           <el-date-picker
-            v-model="value"
+            @change="changeValueOne"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            v-model="valueOne"
             type="datetimerange"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
@@ -94,12 +129,14 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item label="状态：">
-          <el-select v-model="formInline.marketId" placeholder="请选择状态">
+          <el-select v-model="formData.status" placeholder="请选择状态">
             <el-option
               v-for="item in [
                 { label: '全部', value: '' },
-                { label: '进行中', value: '1' },
+                { label: '待结算 ', value: '0' },
+                { label: ' 部分结算', value: '1' },
                 { label: '已结算', value: '2' },
+                { label: '结算失败', value: '-1' },
               ]"
               :key="item.value"
               :label="item.label"
@@ -123,68 +160,92 @@
       >
         <div>
           <span>退款金额</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">999</span>
+          ><span style="font-weight: 600; font-size: 22px">{{
+            orderSummaryList.refundMoney
+          }}</span>
         </div>
         <div>
           <span>订单支出</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">999</span>
+          ><span style="font-weight: 600; font-size: 22px">{{
+            orderSummaryList.expendMoney
+          }}</span>
         </div>
         <div>
           <span>待入账金额</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">888</span>
+          ><span style="font-weight: 600; font-size: 22px">{{
+            orderSummaryList.waitSettleMoney
+          }}</span>
         </div>
         <div>
           <span>已入账金额</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">888</span>
+          ><span style="font-weight: 600; font-size: 22px">{{
+            orderSummaryList.settleMoney
+          }}</span>
         </div>
       </div>
-      <el-table :data="tableData" border style="width: 100%">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%; height: 33vh; overflow-y: scroll"
+      >
         <el-table-column align="center" type="index" label="排名" width="50">
         </el-table-column>
-        <el-table-column prop="date" label="订单编号"> </el-table-column>
+        <el-table-column prop="unitOrderNo" label="订单编号"> </el-table-column>
         <el-table-column
           align="center"
-          prop="name"
+          prop="payTime"
           label="下单时间"
           width="140"
         >
         </el-table-column>
-        <el-table-column
+        <el-table-column align="center" prop="settleTime" label="结算时间">
-          align="center"
-          prop="name"
-          label="结算时间"
-        >
         </el-table-column>
         <el-table-column
           align="center"
-          prop="name"
+          prop="unitSettleAmount"
           label="实付金额（元）"
         >
         </el-table-column>
         <el-table-column
           align="center"
-          prop="name"
+          prop="refundAmount"
           label="退款金额（元）"
           width="140"
         >
         </el-table-column>
         <el-table-column
           align="center"
-          prop="name"
+          prop="finalOutcome"
           label="订单支出（元）"
           width="140"
         >
         </el-table-column>
         <el-table-column
           align="center"
-          prop="name"
+          prop="finalIncome"
           label="入账金额（元）"
           width="140"
         >
         </el-table-column>
         <el-table-column align="center" prop="name" label="状态" width="140">
+          <template slot-scope="scope">
+            <span>{{ getStatus(scope.row.status) }}</span>
+          </template>
         </el-table-column>
       </el-table>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          :current-page="query.pageNumber"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="query.pageSize"
+          :total="total"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -193,56 +254,116 @@
 export default {
   data() {
     return {
-      value1: "",
+      valueOne: [],
-      value: "",
+      value: [],
       formInline: {
-        marketId: "",
+        dateType: "1",
-        shopId: "",
-        name: "",
       },
-      tableData: [
+      formData: {
-        {
+        payBeginDate: "",
-          date: "2016-05-02",
+        payEndDate: "",
-          name: "王小虎",
+        settleBeginDate: "",
-          address: "上海市普陀区金沙江路 1518 弄",
+        settleEndDate: "",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        status: "",
       },
-        {
+      query: {
-          date: "2016-05-04",
+        pageNumber: 1,
-          name: "王小虎",
+        pageSize: 10,
-          address: "上海市普陀区金沙江路 1517 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
       },
-        {
+      total: 0,
-          date: "2016-05-01",
+      tableData: [],
-          name: "王小虎",
+      productList: {},
-          address: "上海市普陀区金沙江路 1519 弄",
+      orderSummaryList: {},
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        },
-      ],
     };
   },
+  created() {
+    this.getCurrentDate();
+  },
   methods: {
-    init() {},
+    getList() {
+      this.$api.dataCenter.orderAnalysis(this.formInline).then((res) => {
+        this.productList = res.data.data;
+      });
+      this.$api.dataCenter.orderSummary(this.formData).then((res) => {
+        console.log(res);
+        this.orderSummaryList = res.data.data;
+      });
+      this.$api.dataCenter
+        .orderSummaryPage({ ...this.formData, ...this.query })
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data.data.data;
+          this.total = Number(res.data.data.total);
+        });
+    },
+    getCurrentDate() {
+      let now = new Date();
+      let year = now.getFullYear();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      console.log(year, month, day);
+      this.value = [
+        year + "-" + month + "-" + day + " 00:00:00",
+        year + "-" + month + "-" + day + " 23:59:59",
+      ];
+      this.formData.payBeginDate = year + "-" + month + "-" + day + " 00:00:00";
+      this.formData.payEndDate = year + "-" + month + "-" + day + " 23:59:59";
+      this.valueOne = [
+        year + "-" + month + "-" + day + " 00:00:00",
+        year + "-" + month + "-" + day + " 23:59:59",
+        (this.formData.settleBeginDate =
+          year + "-" + month + "-" + day + " 00:00:00"),
+        (this.formData.settleEndDate =
+          year + "-" + month + "-" + day + " 23:59:59"),
+      ];
+      this.getList();
+    },
+    changeValue(e) {
+      console.log(e);
+      if (e) {
+        this.formData.payBeginDate = e[0];
+        this.formData.payEndDate = e[1];
+      } else {
+        this.formData.payBeginDate = "";
+        this.formData.payEndDate = "";
+      }
+      // this.formInline.brandId = e;
+    },
+    changeValueOne(e) {
+      console.log(e);
+      if (e) {
+        this.formData.settleBeginDate = e[0];
+        this.formData.settleEndDate = e[1];
+      } else {
+        this.formData.settleBeginDate = "";
+        this.formData.settleEndDate = "";
+      }
+    },
+    handleSizeChange(val) {
+      this.query.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.query.pageNumber = val;
+      this.getList();
+    },
+    getStatus(row) {
+      if (row == 0) {
+        return "禁用";
+      } else if (row == 1) {
+        return "启用";
+      } else if (row == 2) {
+        return " 已结算";
+      } else {
+        return "结算失败";
+      }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .product {
-  margin-top: 20px;
   padding: 10px;
   //   border: 1px solid #ccc;
   background: #edf4ff;

src/views/modules/datacenter/product-analysis/index.vue

@@ -1,25 +1,11 @@
 <template>
   <div>
     <div>
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="日期类型">
           <el-select
             style="margin-right: 20px"
-        v-model="value1"
+            v-model="formInline.dateType"
-        placeholder="请选择统计类型"
-      >
-        <el-option
-          v-for="item in [
-            { value: '1', label: '1' },
-            { value: '2', label: '2' },
-          ]"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
-      <el-select
-        style="margin-right: 20px"
-        v-model="value"
             placeholder="请选择"
           >
             <el-option
@@ -35,8 +21,12 @@
             >
             </el-option>
           </el-select>
-      <el-button type="primary">查询</el-button>
+        </el-form-item>
-      <el-button type="success">导出</el-button>
+        <el-form-item>
+          <el-button @click="getList" type="primary">查询</el-button>
+          <el-button @click="batchExport" type="success">导出</el-button>
+        </el-form-item>
+      </el-form>
     </div>
     <div class="product">
       <div style="font-size: 18px">商品整体概况</div>
@@ -44,66 +34,100 @@
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">在售商品数</div>
-            <div style="font-size: 20px" class="stat-value">435</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.onSaleNum }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">被访问商品数</div>
-            <div style="font-size: 20px" class="stat-value">45</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.viewNum }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">折扣商品数</div>
-            <div style="font-size: 20px" class="stat-value">34</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.discountNum }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">预售商品数</div>
-            <div style="font-size: 20px" class="stat-value">199</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.preSellNum }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">商品浏览量</div>
-            <div style="font-size: 20px" class="stat-value">1256</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.viewTimes }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">商品浏览人数</div>
-            <div style="font-size: 20px" class="stat-value">1256</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.viewPeople }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">商品加购件数</div>
-            <div style="font-size: 20px" class="stat-value">34</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.onCartNum }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">商品点赞件数</div>
-            <div style="font-size: 20px" class="stat-value">199</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.likeCount }}
+            </div>
           </div>
         </div>
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">商品支付件数</div>
-            <div style="font-size: 20px" class="stat-value">1256</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.payCount }}
             </div>
           </div>
         </div>
       </div>
-    <div style="padding: 10px; border: 1px solid #ccc; margin-top: 20px">
+    </div>
+    <div
+      style="
+        padding: 10px;
+        height: 48vh;
+        border: 1px solid #ccc;
+        margin-top: 20px;
+      "
+    >
       <div style="font-size: 18px; margin-bottom: 40px">商品排行榜</div>
       <el-row style="" type="flex" justify="space-between">
         <el-col :span="11"
           ><div class="grid-content bg-purple">商品访客数TOP</div>
-          <el-table :data="tableData" border style="width: 100%;" >
+          <el-table
-            <el-table-column align="center" type="index" label="排名" width="50">
+            :data="productList.viewPeopleList"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="排名"
+              width="50"
+            >
             </el-table-column>
             <el-table-column prop="date" label="商品名称">
               <template slot-scope="scope">
@@ -111,22 +135,38 @@
                   <div>
                     <el-image
                       style="width: 60px; height: 60px"
-                      :src="scope.row.url"
+                      :src="scope.row.productImg"
-                      :preview-src-list="[scope.row.url]"
+                      :preview-src-list="[scope.row.productImg]"
                     >
                     </el-image>
                   </div>
-                  <div style="margin-left:10px;color:blue">{{ scope.row.name }}</div>
+                  <div style="margin-left: 10px; color: blue">
+                    {{ scope.row.productName }}
+                  </div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column align="center" prop="name" label="访客数" width="140">
+            <el-table-column
+              align="center"
+              prop="sortData"
+              label="访客数"
+              width="140"
+            >
             </el-table-column> </el-table
         ></el-col>
         <el-col :span="11"
           ><div class="grid-content bg-purple">商品支付转化率TOP</div>
-           <el-table :data="tableData" border style="width: 100%">
+          <el-table
-            <el-table-column align="center" type="index" label="排名" width="50">
+            :data="productList.payConversionList"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="排名"
+              width="50"
+            >
             </el-table-column>
             <el-table-column prop="date" label="商品名称">
               <template slot-scope="scope">
@@ -134,18 +174,25 @@
                   <div>
                     <el-image
                       style="width: 60px; height: 60px"
-                      :src="scope.row.url"
+                      :src="scope.row.productImg"
-                      :preview-src-list="[scope.row.url]"
+                      :preview-src-list="[scope.row.productImg]"
                     >
                     </el-image>
                   </div>
-                  <div style="margin-left:10px;color:blue">{{ scope.row.name }}</div>
+                  <div style="margin-left: 10px; color: blue">
+                    {{ scope.row.productName }}
+                  </div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column align="center" prop="name" label="支付转化率（%）" width="140">
+            <el-table-column
-            </el-table-column> </el-table
+              align="center"
+              prop="sortData"
+              label="支付转化率（%）"
+              width="140"
             >
+            </el-table-column>
+          </el-table>
         </el-col>
       </el-row>
     </div>
@@ -156,44 +203,25 @@
 export default {
   data() {
     return {
-      value1: "",
+      formInline: {
-      value: "",
+        dateType: "1",
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
       },
-        {
+      productList: {},
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
-          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        },
-      ],
     };
   },
+  created() {
+    this.getList();
+  },
   methods: {
-    init() {},
+    getList() {
+      this.$api.dataCenter.productAnalysis(this.formInline).then((res) => {
+        this.productList = res.data.data;
+        console.log(res);
+      });
+    },
+    batchExport() {
+      console.log("导出");
+    },
   },
 };
 </script>

src/views/modules/product/notice/popup/add-or-update.vue

@@ -58,7 +58,7 @@ export default {
           this.modalData = {
             targetId: row.targetId,
             title: "",
-            module: row.position,
+            position: row.position,
             type: 0,
             status: true,
             app: 1,

src/views/modules/product/order/content.vue

@@ -5,11 +5,7 @@
         <vxe-table border :data="row.productOrders" height="200">
           <vxe-column field="productOrderNo" title="商品订单号"></vxe-column>
           <vxe-column field="productName" title="商品名称"></vxe-column>
-          <vxe-column
+          <vxe-column field="productImg" title="商品图片" width="120">
-            field="productImg"
-            title="商品图片"
-            width="120"
-          >
             <template slot-scope="{ row }">
               <el-image
                 :preview-src-list="[row.productImg]"
@@ -38,15 +34,7 @@
 <script>
 export default {
   data() {
-    return {
+    return {};
-      imgUrlCellRender: {
-        name: "VxeImage",
-        props: {
-          width: 36,
-          height: 36,
-        },
-      },
-    };
   },
 };
 </script>