|
@@ -20,16 +20,8 @@
|
|
|
</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-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>
|
|
@@ -37,11 +29,7 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="bck statistics"
|
|
|
- style="margin-top: 10px"
|
|
|
- v-loading="statisticsLoading"
|
|
|
- >
|
|
|
+ <div class="bck statistics" style="margin-top: 10px" v-loading="statisticsLoading">
|
|
|
<div class="stat-warp">
|
|
|
<ul>
|
|
|
<li class="theme1">
|
|
@@ -68,40 +56,27 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="bck scatter"
|
|
|
- style="margin-top: 10px"
|
|
|
- v-loading="scatterLoading"
|
|
|
- >
|
|
|
+ <div class="bck scatter" style="margin-top: 10px" v-loading="scatterLoading">
|
|
|
<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
|
|
|
- :hideSearch="true"
|
|
|
- :tableHeight="tableHeight"
|
|
|
- :source="sourceList.scatterData"
|
|
|
- :pagination="sourceList.scatterPagination"
|
|
|
- :config="scatterConfig"
|
|
|
- :loading="scatterLoading"
|
|
|
- highlight-current-row
|
|
|
- :hidePagination="true"
|
|
|
- :selectConfig="[]"
|
|
|
- >
|
|
|
- <template #flag="{ item }">
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use :xlink:href="'#' + item.countryIcon"></use>
|
|
|
- </svg>
|
|
|
-
|
|
|
- {{ item.countryName }}
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <byTable :hideSearch="true" :tableHeight="tableHeight" :source="sourceList.scatterData" :pagination="sourceList.scatterPagination"
|
|
|
+ :config="scatterConfig" :loading="scatterLoading" highlight-current-row :hidePagination="true" :selectConfig="[]">
|
|
|
+ <template #flag="{ item }">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <svg class="icon" aria-hidden="true">
|
|
|
+ <use :xlink:href="'#' + item.countryIcon"></use>
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ {{ item.countryName }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</byTable>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -112,16 +87,8 @@
|
|
|
<TitleInfo :content="titleList[1]"></TitleInfo>
|
|
|
<div ref="echartDomOne" style="height: 30vh"></div>
|
|
|
<div style="margin-top: 10px">
|
|
|
- <byTable
|
|
|
- :hideSearch="true"
|
|
|
- :tableHeight="300"
|
|
|
- :source="sourceList.salesData"
|
|
|
- :pagination="sourceList.salesPagination"
|
|
|
- :config="salesConfig"
|
|
|
- :loading="salesLoading"
|
|
|
- highlight-current-row
|
|
|
- :selectConfig="[]"
|
|
|
- >
|
|
|
+ <byTable :hideSearch="true" :tableHeight="300" :source="sourceList.salesData" :pagination="sourceList.salesPagination"
|
|
|
+ :config="salesConfig" :loading="salesLoading" highlight-current-row :selectConfig="[]">
|
|
|
</byTable>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -130,16 +97,8 @@
|
|
|
<TitleInfo :content="titleList[2]"></TitleInfo>
|
|
|
<div ref="echartDomTwo" style="height: 30vh"></div>
|
|
|
<div style="margin-top: 10px">
|
|
|
- <byTable
|
|
|
- :hideSearch="true"
|
|
|
- :tableHeight="300"
|
|
|
- :source="sourceList.salesmanSalesData"
|
|
|
- :pagination="sourceList.salesmanSalesPagination"
|
|
|
- :config="salesmanSalesConfig"
|
|
|
- :loading="salesmanSalesLoading"
|
|
|
- highlight-current-row
|
|
|
- :selectConfig="[]"
|
|
|
- >
|
|
|
+ <byTable :hideSearch="true" :tableHeight="300" :source="sourceList.salesmanSalesData" :pagination="sourceList.salesmanSalesPagination"
|
|
|
+ :config="salesmanSalesConfig" :loading="salesmanSalesLoading" highlight-current-row :selectConfig="[]">
|
|
|
</byTable>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -153,16 +112,9 @@
|
|
|
<TitleInfo :content="titleList[3]"></TitleInfo>
|
|
|
<div ref="echartDomThree" style="height: 30vh"></div>
|
|
|
<div style="margin-top: 10px">
|
|
|
- <byTable
|
|
|
- :hideSearch="true"
|
|
|
- :tableHeight="300"
|
|
|
- :source="sourceList.productSalesVolumeData"
|
|
|
- :pagination="sourceList.productSalesVolumePagination"
|
|
|
- :config="productSalesConfig"
|
|
|
- :loading="productSalesLoading"
|
|
|
- highlight-current-row
|
|
|
- :selectConfig="[]"
|
|
|
- >
|
|
|
+ <byTable :hideSearch="true" :tableHeight="300" :source="sourceList.productSalesVolumeData"
|
|
|
+ :pagination="sourceList.productSalesVolumePagination" :config="productSalesConfig" :loading="productSalesLoading"
|
|
|
+ highlight-current-row :selectConfig="[]">
|
|
|
</byTable>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -171,16 +123,9 @@
|
|
|
<TitleInfo :content="titleList[4]"></TitleInfo>
|
|
|
<div ref="echartDomFour" style="height: 30vh"></div>
|
|
|
<div style="margin-top: 10px">
|
|
|
- <byTable
|
|
|
- :hideSearch="true"
|
|
|
- :tableHeight="300"
|
|
|
- :source="sourceList.productSalesVolumeOneData"
|
|
|
- :pagination="sourceList.productSalesVolumeOnePagination"
|
|
|
- :config="productSalesOneConfig"
|
|
|
- :loading="productSalesOneLoading"
|
|
|
- highlight-current-row
|
|
|
- :selectConfig="[]"
|
|
|
- >
|
|
|
+ <byTable :hideSearch="true" :tableHeight="300" :source="sourceList.productSalesVolumeOneData"
|
|
|
+ :pagination="sourceList.productSalesVolumeOnePagination" :config="productSalesOneConfig" :loading="productSalesOneLoading"
|
|
|
+ highlight-current-row :selectConfig="[]">
|
|
|
</byTable>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -360,10 +305,16 @@ const scatterConfig = computed(() => {
|
|
|
align: "center",
|
|
|
},
|
|
|
},
|
|
|
+ // {
|
|
|
+ // attrs: {
|
|
|
+ // label: "国旗",
|
|
|
+ // slot: "flag",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
{
|
|
|
attrs: {
|
|
|
- label: "国旗",
|
|
|
- slot: "flag",
|
|
|
+ label: "国家",
|
|
|
+ prop: "countryName",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
@@ -465,7 +416,7 @@ const productSalesConfig = computed(() => {
|
|
|
];
|
|
|
});
|
|
|
const tableHeight = computed(() => {
|
|
|
- return document.documentElement.clientHeight / 10 * 4;
|
|
|
+ return (document.documentElement.clientHeight / 10) * 4;
|
|
|
});
|
|
|
|
|
|
const productSalesOneConfig = computed(() => {
|
|
@@ -513,8 +464,8 @@ const getData = () => {
|
|
|
//根据amount字段从大到小
|
|
|
res.sort((a, b) => b.amount - a.amount);
|
|
|
//截取前十条
|
|
|
- if(res.length > 10) res = res.slice(0, 10);
|
|
|
-
|
|
|
+ if (res.length > 10) res = res.slice(0, 10);
|
|
|
+
|
|
|
optionOne.data.series[0].data = res.map((x) => ({
|
|
|
value: x.amount,
|
|
|
name: x.countryName,
|
|
@@ -615,12 +566,15 @@ onMounted(() => {
|
|
|
window.addEventListener("resize", () => {
|
|
|
myChartFour.resize();
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
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}"),
|
|
|
+ ];
|
|
|
onQuery();
|
|
|
});
|
|
|
</script>
|
|
@@ -692,154 +646,151 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.stat-warp {
|
|
|
- background: #fff;
|
|
|
- padding: 20px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- .title {
|
|
|
- height: 60px;
|
|
|
- select {
|
|
|
- height: 60px;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- -webkit-appearance: none;
|
|
|
- appearance: none;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- background: url('@/assets/images/sanjiao.png') no-repeat right
|
|
|
- center;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
- div {
|
|
|
- height: 60px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 60px;
|
|
|
- }
|
|
|
- }
|
|
|
- ul {
|
|
|
- padding: 0;
|
|
|
- overflow: hidden;
|
|
|
- margin: 0;
|
|
|
- li {
|
|
|
- list-style: none;
|
|
|
- min-width: 285px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-right: 20px;
|
|
|
- background: linear-gradient(360deg, #C7E3FE 0%, #DFECFF 100%);
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- padding: 20px;
|
|
|
- color: #333333;
|
|
|
- position: relative;
|
|
|
- border-radius: 10px;
|
|
|
- cursor: pointer;
|
|
|
- .label {
|
|
|
- font-size: 14px;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .label::before {
|
|
|
- // width: 10px;
|
|
|
- // height: 10px;
|
|
|
- // content: '';
|
|
|
- // border-radius: 50%;
|
|
|
- // background: #0084ff;
|
|
|
- // display: inline-block;
|
|
|
- // margin-right: 10px;
|
|
|
-
|
|
|
- }
|
|
|
- .num {
|
|
|
-
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .icon-box{
|
|
|
- position: absolute;
|
|
|
- height: 40px;
|
|
|
- width: 40px;
|
|
|
- right: 20px;
|
|
|
- top: 20px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
- i{
|
|
|
- font-size: 20px;
|
|
|
- color:#0084FF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //#F5F3FF #9E64ED
|
|
|
- .theme2 {
|
|
|
- background: linear-gradient(180deg, #EAE8FB 0%, #DED9FF 100%);
|
|
|
- .label::before {
|
|
|
- background: #7566F0;
|
|
|
- }
|
|
|
- .icon-box i {
|
|
|
- color: #7566F0;
|
|
|
- }
|
|
|
- }
|
|
|
- //#FFF1E1 #FF9315
|
|
|
- .theme3 {
|
|
|
- background: #fff1e1;
|
|
|
- .label::before {
|
|
|
- background: #ff9315;
|
|
|
- }
|
|
|
- .icon-box i {
|
|
|
- color: #FF9315;
|
|
|
- }
|
|
|
- }
|
|
|
- //#E2FBE8 #39C55A
|
|
|
- .theme4 {
|
|
|
- background: #e2fbe8;
|
|
|
- .label::before {
|
|
|
- background: #39c55a;
|
|
|
- }
|
|
|
- }
|
|
|
- .theme5 {
|
|
|
- background: #ffebe9;
|
|
|
- .label::before {
|
|
|
- background: #f94539;
|
|
|
- }
|
|
|
- }
|
|
|
- .theme6 {
|
|
|
- background: #e4f9f9;
|
|
|
- .label::before {
|
|
|
- background: #53cbcb;
|
|
|
- }
|
|
|
- }
|
|
|
- .multi-data {
|
|
|
- .label::before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .label {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- .num-warp {
|
|
|
- overflow: hidden;
|
|
|
- .num-box {
|
|
|
- float: left;
|
|
|
- min-width: 80px;
|
|
|
- margin-right: 20px;
|
|
|
- .num-small {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- .label-small {
|
|
|
- color: #666;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 60px;
|
|
|
+ select {
|
|
|
+ height: 60px;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ appearance: none;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: url("@/assets/images/sanjiao.png") no-repeat right center;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ height: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0;
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ min-width: 285px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-right: 20px;
|
|
|
+ background: linear-gradient(360deg, #c7e3fe 0%, #dfecff 100%);
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20px;
|
|
|
+ color: #333333;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .label::before {
|
|
|
+ // width: 10px;
|
|
|
+ // height: 10px;
|
|
|
+ // content: '';
|
|
|
+ // border-radius: 50%;
|
|
|
+ // background: #0084ff;
|
|
|
+ // display: inline-block;
|
|
|
+ // margin-right: 10px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .icon-box {
|
|
|
+ position: absolute;
|
|
|
+ height: 40px;
|
|
|
+ width: 40px;
|
|
|
+ right: 20px;
|
|
|
+ top: 20px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ i {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #0084ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //#F5F3FF #9E64ED
|
|
|
+ .theme2 {
|
|
|
+ background: linear-gradient(180deg, #eae8fb 0%, #ded9ff 100%);
|
|
|
+ .label::before {
|
|
|
+ background: #7566f0;
|
|
|
+ }
|
|
|
+ .icon-box i {
|
|
|
+ color: #7566f0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //#FFF1E1 #FF9315
|
|
|
+ .theme3 {
|
|
|
+ background: #fff1e1;
|
|
|
+ .label::before {
|
|
|
+ background: #ff9315;
|
|
|
+ }
|
|
|
+ .icon-box i {
|
|
|
+ color: #ff9315;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //#E2FBE8 #39C55A
|
|
|
+ .theme4 {
|
|
|
+ background: #e2fbe8;
|
|
|
+ .label::before {
|
|
|
+ background: #39c55a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .theme5 {
|
|
|
+ background: #ffebe9;
|
|
|
+ .label::before {
|
|
|
+ background: #f94539;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .theme6 {
|
|
|
+ background: #e4f9f9;
|
|
|
+ .label::before {
|
|
|
+ background: #53cbcb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .multi-data {
|
|
|
+ .label::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .num-warp {
|
|
|
+ overflow: hidden;
|
|
|
+ .num-box {
|
|
|
+ float: left;
|
|
|
+ min-width: 80px;
|
|
|
+ margin-right: 20px;
|
|
|
+ .num-small {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .label-small {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
// .scatter {
|
|
|
// display: flex;
|
|
|
// }
|