|
|
@@ -1,577 +1,224 @@
|
|
|
<template>
|
|
|
<div class="content">
|
|
|
- <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>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="日期">
|
|
|
- <el-date-picker
|
|
|
- v-model="queryForm.timeArr"
|
|
|
- type="daterange"
|
|
|
- unlink-panels
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- @change="onQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="onQuery">搜索</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </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%;
|
|
|
- "
|
|
|
- >
|
|
|
- <TitleInfo :content="'产品统计'"></TitleInfo>
|
|
|
- <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="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=""
|
|
|
- />
|
|
|
- </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
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div style="width: 50%">
|
|
|
- <span>总计 (款)</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="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=""
|
|
|
- />
|
|
|
- </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
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div style="width: 50%">
|
|
|
- <span>总计 (款)</span>
|
|
|
- <span
|
|
|
- style="
|
|
|
- color: black;
|
|
|
- font-weight: 700;
|
|
|
- margin-left: 20px;
|
|
|
- "
|
|
|
- >{{ getNum(item, "typeTotal") }}</span
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-form :inline="true" :model="queryForm">
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-date-picker v-model="queryForm.beginTime" type="date" placeholder="请选择开始日期" value-format="YYYY-MM-DD" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-date-picker v-model="queryForm.endTime" type="date" placeholder="请选择结束日期" value-format="YYYY-MM-DD" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onQuery">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div>
|
|
|
+ <TitleInfo :content="'多维度分析'"></TitleInfo>
|
|
|
+ <el-table v-loading="loading" :data="tableData" style="margin-top:15px">
|
|
|
+ <el-table-column label="产品" fixed align="center">
|
|
|
+ <el-table-column label="产品名称" prop="productName" min-width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column label="销售指导价" prop="expenditureAmount" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.expenditureAmount ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单" align="center">
|
|
|
+ <el-table-column label="成单次数" prop="orderCount" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.orderCount ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="销售" align="center">
|
|
|
+ <el-table-column label="总销量" prop="saleQuantity" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.saleQuantity ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总销售额￥" prop="saleAmount" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.saleAmount ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="平均单价￥" prop="saleAveragePrice" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.saleAveragePrice ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="最低单价￥" prop="saleMinPrice" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.saleMinPrice ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="最高单价￥" prop="saleMaxPrice" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.saleMaxPrice ,2) }}</div>
|
|
|
</template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9">
|
|
|
- <div style="background-color: white; padding: 20px; height: 100%">
|
|
|
- <TitleInfo :content="'产品分布'"></TitleInfo>
|
|
|
- <div ref="mainOne" style="height: calc(100% - 24px)"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </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%;
|
|
|
- "
|
|
|
- >
|
|
|
- <TitleInfo :content="'产品分类排行'"></TitleInfo>
|
|
|
- <div style="padding-top: 20px" v-loading="loadingTwo">
|
|
|
- <el-table
|
|
|
- :data="allData.productTypeRanking"
|
|
|
- :default-sort="{ prop: 'contractQuantity', order: 'descending' }"
|
|
|
- style="width: 100%"
|
|
|
- max-height="30vh"
|
|
|
- @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="name" sortable width="120" /> -->
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div style="background-color: white; padding: 20px; height: 100%">
|
|
|
- <TitleInfo :content="'产品排行'"></TitleInfo>
|
|
|
- <div style="padding-top: 20px" v-loading="loadingThree">
|
|
|
- <el-table
|
|
|
- :data="allData.productRanking"
|
|
|
- :default-sort="{ prop: 'contractQuantity', order: 'descending' }"
|
|
|
- style="width: 100%"
|
|
|
- border
|
|
|
- max-height="30vh"
|
|
|
- @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>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <div style="margin-top: 20px; background-color: white; padding: 20px">
|
|
|
- <TitleInfo :content="'销售趋势'"></TitleInfo>
|
|
|
- <div ref="mainTwo" style="height: 40vh"></div>
|
|
|
+ <el-table-column label="采购" align="center">
|
|
|
+ <el-table-column label="总采购量" prop="purchasesQuantity" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.purchasesQuantity ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总采购额￥" prop="purchasesAmount" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.purchasesAmount ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="平均单价￥" prop="purchasesAveragePrice" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.purchasesAveragePrice ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="最低单价￥" prop="purchasesMinPrice" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.purchasesMinPrice ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="最高单价￥" prop="purchasesMaxPrice" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.purchasesMaxPrice ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="利润" align="center">
|
|
|
+ <el-table-column label="总利润" prop="grossProfit" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.grossProfit ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column label="平均利润" prop="incomeAmount" width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div> {{ moneyFormat(row.incomeAmount ,2) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ <el-row style="padding: 20px" justify="end" type="flex">
|
|
|
+ <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="queryForm.pageNum" :page-size="queryForm.pageSize"
|
|
|
+ :total="queryForm.total" @size-change="handleSizeChange" @current-change="handlePageChange" />
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import * as echarts from "echarts";
|
|
|
import TitleInfo from "@/components/TitleInfo/index.vue";
|
|
|
-import { reactive, ref } from "vue";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
-const productType = ref([]);
|
|
|
-const countryData = ref([]);
|
|
|
+const loading = ref(false);
|
|
|
+const tableData = ref([]);
|
|
|
const queryForm = reactive({
|
|
|
- countryId: "",
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
beginTime: "",
|
|
|
endTime: "",
|
|
|
- timeArr: [],
|
|
|
});
|
|
|
const getDict = () => {
|
|
|
- proxy.getDictOne(["product_type"]).then((res) => {
|
|
|
- productType.value = res["product_type"].map((x) => ({
|
|
|
- label: x.dictValue,
|
|
|
- value: x.dictKey,
|
|
|
- }));
|
|
|
- });
|
|
|
+ // proxy.getDictOne(["product_type"]).then((res) => {
|
|
|
+ // productType.value = res["product_type"].map((x) => ({
|
|
|
+ // label: x.dictValue,
|
|
|
+ // value: x.dictKey,
|
|
|
+ // }));
|
|
|
+ // });
|
|
|
};
|
|
|
getDict();
|
|
|
-const getCountryData = () => {
|
|
|
- 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.beginTime = queryForm.timeArr[0];
|
|
|
- queryForm.endTime = queryForm.timeArr[1];
|
|
|
- getData();
|
|
|
+
|
|
|
+const getData = () => {
|
|
|
+ loading.value = true;
|
|
|
+ proxy.post("/contract/productAnalysis", queryForm).then((res) => {
|
|
|
+ console.log(res, "assa");
|
|
|
+ tableData.value = res.rows;
|
|
|
+ queryForm.total = res.total;
|
|
|
+ loading.value = false;
|
|
|
});
|
|
|
};
|
|
|
-getCountryData();
|
|
|
+
|
|
|
+getData();
|
|
|
+
|
|
|
const onQuery = () => {
|
|
|
- queryForm.beginTime = queryForm.timeArr[0];
|
|
|
- queryForm.endTime = queryForm.timeArr[1];
|
|
|
getData();
|
|
|
};
|
|
|
-const loadingOne = ref(null);
|
|
|
-const loadingTwo = ref(null);
|
|
|
-const loadingThree = ref(null);
|
|
|
-const allData = reactive({
|
|
|
- productStatistics: {
|
|
|
- newTotal: "",
|
|
|
- total: "",
|
|
|
- typeList: [],
|
|
|
- },
|
|
|
- productDistribution: [],
|
|
|
- productTypeRanking: [],
|
|
|
- productRanking: [],
|
|
|
-});
|
|
|
-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 (data && data.length > 0) {
|
|
|
- text = data[0][label];
|
|
|
- }
|
|
|
- }
|
|
|
- return text;
|
|
|
-};
|
|
|
-const optionOne = reactive({
|
|
|
- data: {
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: "5%",
|
|
|
- left: "center",
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "产品分布",
|
|
|
- type: "pie",
|
|
|
- radius: ["40%", "70%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 10,
|
|
|
- borderColor: "#fff",
|
|
|
- borderWidth: 2,
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: "center",
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: 40,
|
|
|
- fontWeight: "bold",
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-});
|
|
|
-const optionTwo = reactive({
|
|
|
- data: {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ["月度销售额", "月成交单数"],
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- saveAsImage: {},
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- boundaryGap: false,
|
|
|
- data: [],
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "月度销售额",
|
|
|
- type: "line",
|
|
|
- data: [],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "月成交单数",
|
|
|
- type: "line",
|
|
|
- data: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-});
|
|
|
-const mainOne = ref(null);
|
|
|
-const mainTwo = ref(null);
|
|
|
-let myChartOne = null;
|
|
|
-let myChartTwo = null;
|
|
|
-const productTypeRankingProp = ref("contractQuantity");
|
|
|
-const productTypeRankingOrder = ref("descending");
|
|
|
-const productTypeRankingSort = ref({
|
|
|
- contractQuantity: 10,
|
|
|
- contractAmount: 20,
|
|
|
- purchaseQuantity: 30,
|
|
|
- purchaseAmount: 40,
|
|
|
-});
|
|
|
-const productRankingProp = ref("contractQuantity");
|
|
|
-const productRankingOrder = ref("descending");
|
|
|
-const productRankingSort = ref({
|
|
|
- contractQuantity: 10,
|
|
|
- contractAmount: 20,
|
|
|
- purchaseQuantity: 30,
|
|
|
- purchaseAmount: 40,
|
|
|
-});
|
|
|
-const orderBy = ref({
|
|
|
- ascending: 10,
|
|
|
- descending: 20,
|
|
|
-});
|
|
|
-const getData = () => {
|
|
|
- loadingOne.value = true;
|
|
|
- proxy.post("/productInfo/productStatistics", queryForm).then(
|
|
|
- (res) => {
|
|
|
- allData.productStatistics = res;
|
|
|
- setTimeout(() => {
|
|
|
- loadingOne.value = false;
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- console.log(err);
|
|
|
- setTimeout(() => {
|
|
|
- loadingOne.value = false;
|
|
|
- }, 200);
|
|
|
- }
|
|
|
- );
|
|
|
- proxy.post("/productInfo/productDistribution", queryForm).then((res) => {
|
|
|
- if (res && res.length > 0) {
|
|
|
- optionOne.data.series[0].data = res.map((item) => {
|
|
|
- return {
|
|
|
- value: item.count,
|
|
|
- name: item.name,
|
|
|
- type: item.type,
|
|
|
- };
|
|
|
- });
|
|
|
- } else {
|
|
|
- optionOne.data.series[0].data = [];
|
|
|
- }
|
|
|
- myChartOne.setOption(optionOne.data);
|
|
|
- myChartOne.resize();
|
|
|
- });
|
|
|
- proxy.post("/contract/saleTrend", queryForm).then((res) => {
|
|
|
- if (res && res.length > 0) {
|
|
|
- optionTwo.data.xAxis.data = res.map((item) => {
|
|
|
- return item.month;
|
|
|
- });
|
|
|
- optionTwo.data.series[0].data = res.map((item) => {
|
|
|
- return item.contractAmount;
|
|
|
- });
|
|
|
- optionTwo.data.series[1].data = res.map((item) => {
|
|
|
- return item.contractQuantity;
|
|
|
- });
|
|
|
- } else {
|
|
|
- optionTwo.data.xAxis.data = [];
|
|
|
- optionTwo.data.series[0].data = [];
|
|
|
- optionTwo.data.series[1].data = [];
|
|
|
- }
|
|
|
- myChartTwo.setOption(optionTwo.data);
|
|
|
- myChartTwo.resize();
|
|
|
- });
|
|
|
- getProductTypeRanking();
|
|
|
- getProductRanking();
|
|
|
-};
|
|
|
-const sortChangeTwo = ({ prop, order }) => {
|
|
|
- productTypeRankingProp.value = prop;
|
|
|
- productTypeRankingOrder.value = order;
|
|
|
- getProductTypeRanking();
|
|
|
-};
|
|
|
-const sortChangeThree = ({ prop, order }) => {
|
|
|
- productRankingProp.value = prop;
|
|
|
- productRankingOrder.value = order;
|
|
|
- getProductRanking();
|
|
|
-};
|
|
|
-const getProductTypeRanking = () => {
|
|
|
- loadingTwo.value = true;
|
|
|
- let query = proxy.deepClone(queryForm);
|
|
|
- query.pageNum = 1;
|
|
|
- query.pageSize = 10;
|
|
|
- query.sort = productTypeRankingSort.value[productTypeRankingProp.value] || 10;
|
|
|
- query.orderBy = orderBy.value[productTypeRankingOrder.value] || 20;
|
|
|
- proxy.post("/productInfo/productClassifyRanking", query).then(
|
|
|
- (res) => {
|
|
|
- allData.productTypeRanking = res;
|
|
|
- setTimeout(() => {
|
|
|
- loadingTwo.value = false;
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- console.log(err);
|
|
|
- setTimeout(() => {
|
|
|
- loadingTwo.value = false;
|
|
|
- }, 200);
|
|
|
- }
|
|
|
- );
|
|
|
+
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ queryForm.pageNum = 1;
|
|
|
+ queryForm.pageSize = val;
|
|
|
+ getData();
|
|
|
};
|
|
|
-const getProductRanking = () => {
|
|
|
- loadingThree.value = true;
|
|
|
- let query = proxy.deepClone(queryForm);
|
|
|
- query.pageNum = 1;
|
|
|
- query.pageSize = 10;
|
|
|
- query.sort = productRankingSort.value[productRankingProp.value] || 10;
|
|
|
- query.orderBy = orderBy.value[productRankingOrder.value] || 20;
|
|
|
- proxy.post("/productInfo/productRanking", query).then(
|
|
|
- (res) => {
|
|
|
- allData.productRanking = res.rows;
|
|
|
- setTimeout(() => {
|
|
|
- loadingThree.value = false;
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- console.log(err);
|
|
|
- setTimeout(() => {
|
|
|
- loadingThree.value = false;
|
|
|
- }, 200);
|
|
|
- }
|
|
|
- );
|
|
|
+const handlePageChange = (val) => {
|
|
|
+ queryForm.pageNum = val;
|
|
|
+ getData();
|
|
|
};
|
|
|
-onMounted(() => {
|
|
|
- myChartOne = echarts.init(mainOne.value);
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- myChartOne.resize();
|
|
|
- });
|
|
|
- myChartTwo = echarts.init(mainTwo.value);
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- myChartTwo.resize();
|
|
|
- });
|
|
|
-});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
|
margin: 20px;
|
|
|
}
|
|
|
-:deep(.el-form-item) {
|
|
|
- margin-bottom: 0px;
|
|
|
+
|
|
|
+:deep(.el-table thead.is-group th.el-table__cell) {
|
|
|
+ // border: 1px solid #c2c5cb;
|
|
|
+}
|
|
|
+:deep(
|
|
|
+ .el-table .el-table__header-wrapper th,
|
|
|
+ .el-table .el-table__fixed-header-wrapper th
|
|
|
+ ) {
|
|
|
+ background-color: #f5f7fa !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_6_column_7) {
|
|
|
+ background-color: #f59a23 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_6) {
|
|
|
+ background-color: #f59a23 !important;
|
|
|
+}
|
|
|
+//
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_9) {
|
|
|
+ background-color: #02a7f0 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_10) {
|
|
|
+ background-color: #02a7f0 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_11) {
|
|
|
+ background-color: #02a7f0 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_12) {
|
|
|
+ background-color: #02a7f0 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_13) {
|
|
|
+ background-color: #02a7f0 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_8) {
|
|
|
+ background-color: #02a7f0 !important;
|
|
|
+}
|
|
|
+//
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_15) {
|
|
|
+ background-color: #70b603 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_16) {
|
|
|
+ background-color: #70b603 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_17) {
|
|
|
+ background-color: #70b603 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_18) {
|
|
|
+ background-color: #70b603 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_19) {
|
|
|
+ background-color: #70b603 !important;
|
|
|
+}
|
|
|
+:deep(.el-table .el-table__header-wrapper .el-table_2_column_14) {
|
|
|
+ background-color: #70b603 !important;
|
|
|
}
|
|
|
</style>
|
cz