产品分析页面接口替换

src/views/dataBoard/board/productAnalysis/index.vue

@@ -3,8 +3,20 @@
     <div style="background-color: white; padding: 20px">
       <el-form :inline="true" :model="queryForm">
         <el-form-item label="国家">
-          <el-select v-model="queryForm.countryId" placeholder="请选择" clearable filterable @change="onQuery">
-            <el-option v-for="item in countryData" :label="item.name" :value="item.id" :key="item.id" > </el-option>
+          <el-select
+            v-model="queryForm.countryId"
+            placeholder="请选择"
+            clearable
+            filterable
+            @change="onQuery"
+          >
+            <el-option
+              v-for="item in countryData"
+              :label="item.name"
+              :value="item.id"
+              :key="item.id"
+            >
+            </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="日期">
@@ -16,7 +28,8 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             value-format="YYYY-MM-DD"
-            @change="onQuery" />
+            @change="onQuery"
+          />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onQuery">搜索</el-button>
@@ -25,46 +38,122 @@
     </div>
     <el-row style="margin-top: 20px" type="flex">
       <el-col :span="15">
-        <div style="margin-right: 20px; background-color: white; padding: 20px 0 0 20px; height: 100%">
+        <div
+          style="
+            margin-right: 20px;
+            background-color: white;
+            padding: 20px 0 0 20px;
+            height: 100%;
+          "
+        >
           <TitleInfo :content="'产品统计'"></TitleInfo>
-          <div style="padding-top: 20px; display: flex; flex-wrap: wrap" v-loading="loadingOne">
+          <div
+            style="padding-top: 20px; display: flex; flex-wrap: wrap"
+            v-loading="loadingOne"
+          >
             <div style="width: 33%; padding: 0 20px 20px 0">
-              <div style="padding: 20px; background-color: #f4f4f5; border-radius: 5px; font-size: 12px !important; color: #909399 !important">
+              <div
+                style="
+                  padding: 20px;
+                  background-color: #f4f4f5;
+                  border-radius: 5px;
+                  font-size: 12px !important;
+                  color: #909399 !important;
+                "
+              >
                 <div style="margin-bottom: 20px; display: flex">
                   <div style="background: #0084ff; padding: 5px">
-                    <img style="width: 20px; height: 20px; border-radius: 5px" src="@/assets/images/portrait/iconm_kehd.png" alt="" />
+                    <img
+                      style="width: 20px; height: 20px; border-radius: 5px"
+                      src="@/assets/images/portrait/iconm_kehd.png"
+                      alt=""
+                    />
+                  </div>
+                  <div
+                    style="
+                      margin-left: 20px;
+                      height: 30px;
+                      line-height: 30px;
+                      font-weight: 700;
+                    "
+                  >
+                    总计
                   </div>
-                  <div style="margin-left: 20px; height: 30px; line-height: 30px; font-weight: 700">总计</div>
                 </div>
                 <div style="display: flex">
                   <div style="width: 50%">
                     <span>新增 (款)</span>
-                    <span style="color: black; font-weight: 700; margin-left: 20px">{{ allData.productStatistics.newTotal }}</span>
+                    <span
+                      style="color: black; font-weight: 700; margin-left: 20px"
+                      >{{ allData.productStatistics.newTotal }}</span
+                    >
                   </div>
                   <div style="width: 50%">
                     <span>总计 (款)</span>
-                    <span style="color: black; font-weight: 700; margin-left: 20px">{{ allData.productStatistics.total }}</span>
+                    <span
+                      style="color: black; font-weight: 700; margin-left: 20px"
+                      >{{ allData.productStatistics.total }}</span
+                    >
                   </div>
                 </div>
               </div>
             </div>
             <template v-if="productType && productType.length > 0">
-              <div style="width: 33%; padding: 0 20px 20px 0" v-for="(item, index) in productType" :key="index">
-                <div style="padding: 20px; background-color: #f4f4f5; border-radius: 5px; font-size: 12px !important; color: #909399 !important">
+              <div
+                style="width: 33%; padding: 0 20px 20px 0"
+                v-for="(item, index) in productType"
+                :key="index"
+              >
+                <div
+                  style="
+                    padding: 20px;
+                    background-color: #f4f4f5;
+                    border-radius: 5px;
+                    font-size: 12px !important;
+                    color: #909399 !important;
+                  "
+                >
                   <div style="margin-bottom: 20px; display: flex">
                     <div style="background: #0084ff; padding: 5px">
-                      <img style="width: 20px; height: 20px; border-radius: 5px" src="@/assets/images/portrait/iconm_kehd.png" alt="" />
+                      <img
+                        style="width: 20px; height: 20px; border-radius: 5px"
+                        src="@/assets/images/portrait/iconm_kehd.png"
+                        alt=""
+                      />
+                    </div>
+                    <div
+                      style="
+                        margin-left: 20px;
+                        height: 30px;
+                        line-height: 30px;
+                        font-weight: 700;
+                      "
+                    >
+                      {{ item.label }}
                     </div>
-                    <div style="margin-left: 20px; height: 30px; line-height: 30px; font-weight: 700">{{ item.label }}</div>
                   </div>
                   <div style="display: flex">
                     <div style="width: 50%">
                       <span>新增 (款)</span>
-                      <span style="color: black; font-weight: 700; margin-left: 20px">{{ getNum(item, "typeNewTotal") }}</span>
+                      <span
+                        style="
+                          color: black;
+                          font-weight: 700;
+                          margin-left: 20px;
+                        "
+                        >{{ getNum(item, "typeNewTotal") }}</span
+                      >
                     </div>
                     <div style="width: 50%">
                       <span>总计 (款)</span>
-                      <span style="color: black; font-weight: 700; margin-left: 20px">{{ getNum(item, "typeTotal") }}</span>
+                      <span
+                        style="
+                          color: black;
+                          font-weight: 700;
+                          margin-left: 20px;
+                        "
+                        >{{ getNum(item, "typeTotal") }}</span
+                      >
                     </div>
                   </div>
                 </div>
@@ -82,7 +171,14 @@
     </el-row>
     <el-row style="margin-top: 20px" type="flex">
       <el-col :span="12">
-        <div style="margin-right: 20px; background-color: white; padding: 20px; height: 100%">
+        <div
+          style="
+            margin-right: 20px;
+            background-color: white;
+            padding: 20px;
+            height: 100%;
+          "
+        >
           <TitleInfo :content="'产品分类排行'"></TitleInfo>
           <div style="padding-top: 20px" v-loading="loadingTwo">
             <el-table
@@ -90,13 +186,34 @@
               :default-sort="{ prop: 'contractQuantity', order: 'descending' }"
               style="width: 100%"
               max-height="30vh"
-              @sort-change="sortChangeTwo">
+              @sort-change="sortChangeTwo"
+            >
               <el-table-column type="index" width="50" />
               <el-table-column label="产品类型" prop="name" min-width="140" />
-              <el-table-column label="销售量" prop="contractQuantity" sortable width="120" />
-              <el-table-column label="销售额" prop="contractAmount" sortable width="120" />
-              <el-table-column label="采购量" prop="purchaseQuantity" sortable width="120" />
-              <el-table-column label="采购额" prop="purchaseAmount" sortable width="120" />
+              <el-table-column
+                label="销售量"
+                prop="contractQuantity"
+                sortable
+                width="120"
+              />
+              <el-table-column
+                label="销售额"
+                prop="contractAmount"
+                sortable
+                width="120"
+              />
+              <el-table-column
+                label="采购量"
+                prop="purchaseQuantity"
+                sortable
+                width="120"
+              />
+              <el-table-column
+                label="采购额"
+                prop="purchaseAmount"
+                sortable
+                width="120"
+              />
               <!-- <el-table-column label="生产总量" prop="name" sortable width="120" /> -->
             </el-table>
           </div>
@@ -109,16 +226,38 @@
             <el-table
               :data="allData.productRanking"
               :default-sort="{ prop: 'contractQuantity', order: 'descending' }"
-              style="width: 100%" border 
+              style="width: 100%"
+              border
               max-height="30vh"
-              @sort-change="sortChangeThree">
+              @sort-change="sortChangeThree"
+            >
               <el-table-column type="index" width="50" />
               <el-table-column label="产品名称" prop="name" min-width="140" />
-              <el-table-column label="销售量" prop="contractQuantity" sortable width="120" />
-              <el-table-column label="销售额" prop="contractAmount" sortable width="120" />
-              
-              <el-table-column label="采购量" prop="purchaseQuantity" sortable width="120" />
-              <el-table-column label="采购额" prop="purchaseAmount" sortable width="120" />
+              <el-table-column
+                label="销售量"
+                prop="contractQuantity"
+                sortable
+                width="120"
+              />
+              <el-table-column
+                label="销售额"
+                prop="contractAmount"
+                sortable
+                width="120"
+              />
+
+              <el-table-column
+                label="采购量"
+                prop="purchaseQuantity"
+                sortable
+                width="120"
+              />
+              <el-table-column
+                label="采购额"
+                prop="purchaseAmount"
+                sortable
+                width="120"
+              />
               <!-- <el-table-column label="生产总量" prop="name" sortable width="120" /> -->
             </el-table>
           </div>
@@ -156,13 +295,16 @@ const getDict = () => {
 };
 getDict();
 const getCountryData = () => {
-  proxy.post("/areaInfo/list", { parentId: "0" }).then((res) => {
+  proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
     countryData.value = res;
     let endData = new Date();
     let beginDate = new Date();
     beginDate.setMonth(0);
     beginDate.setDate(1);
-    queryForm.timeArr = [proxy.parseTime(beginDate, "{y}-{m}-{d}"), proxy.parseTime(endData, "{y}-{m}-{d}")];
+    queryForm.timeArr = [
+      proxy.parseTime(beginDate, "{y}-{m}-{d}"),
+      proxy.parseTime(endData, "{y}-{m}-{d}"),
+    ];
     queryForm.beginTime = queryForm.timeArr[0];
     queryForm.endTime = queryForm.timeArr[1];
     getData();
@@ -189,8 +331,13 @@ const allData = reactive({
 });
 const getNum = (item, label) => {
   let text = "";
-  if (allData.productStatistics.typeList && allData.productStatistics.typeList.length > 0) {
-    let data = allData.productStatistics.typeList.filter((row) => row.type === item.value);
+  if (
+    allData.productStatistics.typeList &&
+    allData.productStatistics.typeList.length > 0
+  ) {
+    let data = allData.productStatistics.typeList.filter(
+      (row) => row.type === item.value
+    );
     if (data && data.length > 0) {
       text = data[0][label];
     }
@@ -348,7 +495,6 @@ const getData = () => {
       optionTwo.data.series[0].data = [];
       optionTwo.data.series[1].data = [];
     }
-    console.log(optionTwo.data);
     myChartTwo.setOption(optionTwo.data);
     myChartTwo.resize();
   });
@@ -372,7 +518,7 @@ const getProductTypeRanking = () => {
   query.pageSize = 10;
   query.sort = productTypeRankingSort.value[productTypeRankingProp.value] || 10;
   query.orderBy = orderBy.value[productTypeRankingOrder.value] || 20;
-  proxy.post("/productInfo/productTypeRanking", query).then(
+  proxy.post("/productInfo/productClassifyRanking", query).then(
     (res) => {
       allData.productTypeRanking = res;
       setTimeout(() => {