|
@@ -0,0 +1,314 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <div class="bck">
|
|
|
+ <el-form :inline="true" :model="queryForm">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryForm.aa"
|
|
|
+ type="month"
|
|
|
+ placeholder="月份"
|
|
|
+ @change="onQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-radio-group v-model="queryForm.bb" size="large" @change="onQuery">
|
|
|
+ <el-radio-button label="本日" />
|
|
|
+ <el-radio-button label="本周" />
|
|
|
+ <el-radio-button label="本月" />
|
|
|
+ <el-radio-button label="今年" />
|
|
|
+ <el-radio-button label="其他" />
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <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-button type="defualt" @click="onReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="bck statistics" style="margin-top: 10px">
|
|
|
+ <div class="item first">
|
|
|
+ <div class="left_">
|
|
|
+ <div class="money">
|
|
|
+ {{ moneyFormat(0, 2) }}
|
|
|
+ </div>
|
|
|
+ <div>销售额({{ 0 }})</div>
|
|
|
+ </div>
|
|
|
+ <div class="right_">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="@/assets/images/portrait/icon_sales.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item two">
|
|
|
+ <div class="left_">
|
|
|
+ <div class="money">
|
|
|
+ {{ moneyFormat(0, 2) }}
|
|
|
+ </div>
|
|
|
+ <div>订单(单)</div>
|
|
|
+ </div>
|
|
|
+ <div class="right_">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="@/assets/images/portrait/icon_profits.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item three">
|
|
|
+ <div class="left_">
|
|
|
+ <div class="money">
|
|
|
+ {{ 0 }}
|
|
|
+ </div>
|
|
|
+ <div>下单客户数(人)</div>
|
|
|
+ </div>
|
|
|
+ <div class="right_">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="@/assets/images/portrait/icon_email.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bck scatter" style="margin-top: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <TitleInfo :content="titleList[0]"></TitleInfo>
|
|
|
+ <div ref="echartDom" style="height: 40vh"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <byTable
|
|
|
+ :source="sourceList.scatterData"
|
|
|
+ :pagination="sourceList.scatterPagination"
|
|
|
+ :config="scatterConfig"
|
|
|
+ :loading="scatterLoading"
|
|
|
+ highlight-current-row
|
|
|
+ :selectConfig="[]"
|
|
|
+ @get-list="getList"
|
|
|
+ >
|
|
|
+ </byTable>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
+import TitleInfo from "@/components/TitleInfo/index.vue";
|
|
|
+const titleList = [
|
|
|
+ "销售分布",
|
|
|
+ "客户分类",
|
|
|
+ "业务员销售趋势",
|
|
|
+ "商品销售额",
|
|
|
+ "商品销量",
|
|
|
+];
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const scatterLoading = ref(false);
|
|
|
+const loadingOne = ref(false);
|
|
|
+const loadingTwo = ref(false);
|
|
|
+const queryForm = reactive({
|
|
|
+ beginTime: "",
|
|
|
+ endTime: "",
|
|
|
+ timeArr: "",
|
|
|
+});
|
|
|
+const sourceList = ref({
|
|
|
+ scatterData: [],
|
|
|
+ scatterPagination: {
|
|
|
+ total: 3,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+});
|
|
|
+//图表
|
|
|
+const echartDom = ref(null);
|
|
|
+let myChart = null;
|
|
|
+const option = reactive({
|
|
|
+ data: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: "0%",
|
|
|
+ left: "center",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "销售分布",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["20%", "50%"],
|
|
|
+ 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: [2000, 1000],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+});
|
|
|
+const scatterConfig = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "序列",
|
|
|
+ prop: "receiptWarehouseName",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "国家",
|
|
|
+ prop: "receiptWarehouseName",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "订单量(单)",
|
|
|
+ prop: "receiptWarehouseName",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "交易金额(¥)",
|
|
|
+ prop: "amount",
|
|
|
+ },
|
|
|
+ render(amount) {
|
|
|
+ return proxy.moneyFormat(amount, 2);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+
|
|
|
+const getData = () => {
|
|
|
+ // loading.value = true;
|
|
|
+ loadingOne.value = true;
|
|
|
+ loadingTwo.value = true;
|
|
|
+ // proxy.post("/saleQuotation/sourceStatistics", queryForm).then((res) => {
|
|
|
+ // allData.sourceData = res;
|
|
|
+ // setTimeout(() => {
|
|
|
+ // loading.value = false;
|
|
|
+ // }, 200);
|
|
|
+ // });
|
|
|
+ // proxy.post("/saleQuotation/typeStatistics", queryForm).then((res) => {
|
|
|
+ // allData.typeData = res;
|
|
|
+ // setTimeout(() => {
|
|
|
+ // loadingOne.value = false;
|
|
|
+ // }, 200);
|
|
|
+ // });
|
|
|
+ proxy.post("/contract/salesStatistics", queryForm).then((res) => {
|
|
|
+ console.log(res, "aa");
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const onQuery = () => {
|
|
|
+ queryForm.beginTime = queryForm.timeArr[0];
|
|
|
+ queryForm.endTime = queryForm.timeArr[1];
|
|
|
+ getData();
|
|
|
+};
|
|
|
+
|
|
|
+const onReset = () => {};
|
|
|
+onMounted(() => {
|
|
|
+ myChart = echarts.init(echartDom.value);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ myChart.setOption(option.data);
|
|
|
+ getData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content {
|
|
|
+ margin: 20px;
|
|
|
+}
|
|
|
+:deep(.el-form-item) {
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
+.bck {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+.statistics {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ .item {
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 13vw;
|
|
|
+ height: 70px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left_ {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ .money {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_ {
|
|
|
+ .icon {
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .first {
|
|
|
+ background: linear-gradient(#c7e3fe, #dfecff);
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ background: linear-gradient(#eae8fb, #ded9ff);
|
|
|
+ }
|
|
|
+ .three {
|
|
|
+ background: linear-gradient(#fcf1e4, #fce5ca);
|
|
|
+ }
|
|
|
+ .four {
|
|
|
+ background: linear-gradient(#e2fbe8, #e2fbe8);
|
|
|
+ }
|
|
|
+ .five {
|
|
|
+ background: linear-gradient(#ffebe9, #ffebe9);
|
|
|
+ }
|
|
|
+}
|
|
|
+.scatter {
|
|
|
+ // display: flex;
|
|
|
+}
|
|
|
+</style>
|