|
@@ -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(() => {
|