|
@@ -4,14 +4,14 @@
|
|
|
<el-radio-button v-for="(item, key) in radioDic" :key="key" :label="key">{{ item.label }}</el-radio-button>
|
|
<el-radio-button v-for="(item, key) in radioDic" :key="key" :label="key">{{ item.label }}</el-radio-button>
|
|
|
</el-radio-group>
|
|
</el-radio-group>
|
|
|
|
|
|
|
|
- <vxe-date-range-picker v-if="query.type == 'year'" v-model="query.year" type="year" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
|
|
- <vxe-date-range-picker v-if="query.type == 'quarter'" v-model="query.quarter" type="quarter" label-format="yyyy-Qq" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
|
|
- <vxe-date-range-picker v-if="query.type == 'month'" v-model="query.month" type="month" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
|
|
- <vxe-date-range-picker v-if="query.type == 'day'" v-model="query.day" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
|
|
|
|
+ <vxe-date-range-picker v-if="query.type == 'year'" style="width: 150px;" v-model="query.year" type="year" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
|
|
+ <vxe-date-range-picker v-if="query.type == 'quarter'" style="width: 200px;" v-model="query.quarter" type="quarter" label-format="yyyy-Qq" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
|
|
+ <vxe-date-range-picker v-if="query.type == 'month'" style="width: 190px;" v-model="query.month" type="month" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
|
|
+ <vxe-date-range-picker v-if="query.type == 'day'" style="width: 240px;" v-model="query.day" transfer @change="pickerChange"></vxe-date-range-picker>
|
|
|
</el-header>
|
|
</el-header>
|
|
|
|
|
|
|
|
<div class="echart-panel">
|
|
<div class="echart-panel">
|
|
|
- <scEcharts clearCache :option="option"></scEcharts>
|
|
|
|
|
|
|
+ <scEcharts :option="option" clearCache></scEcharts>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -21,7 +21,7 @@ import XEUtils from "xe-utils";
|
|
|
|
|
|
|
|
import API from "@/api";
|
|
import API from "@/api";
|
|
|
import store from "@/store";
|
|
import store from "@/store";
|
|
|
-import { radioDic, lineSeriesDefault } from "../main";
|
|
|
|
|
|
|
+import { radioDic, lineSeries } from "../main";
|
|
|
watch(() => store.state.tenant.tenantId, () => getEcharts());
|
|
watch(() => store.state.tenant.tenantId, () => getEcharts());
|
|
|
|
|
|
|
|
const query = reactive({
|
|
const query = reactive({
|
|
@@ -65,37 +65,7 @@ const getEcharts = () => {
|
|
|
const beginDate = XEUtils.first(query[query.type]), endDate = moment(XEUtils.last(query[query.type])).endOf(query.type).format("YYYY-MM-DD");
|
|
const beginDate = XEUtils.first(query[query.type]), endDate = moment(XEUtils.last(query[query.type])).endOf(query.type).format("YYYY-MM-DD");
|
|
|
option.xAxis.data = radioDic[query.type].generateXAxis(beginDate, endDate);
|
|
option.xAxis.data = radioDic[query.type].generateXAxis(beginDate, endDate);
|
|
|
|
|
|
|
|
- API.sales.performance.echart({ type: query.type, beginDate, endDate }).then(res => {
|
|
|
|
|
- if (query.type == "day") {
|
|
|
|
|
- option.series = [{
|
|
|
|
|
- ...lineSeriesDefault[1],
|
|
|
|
|
- data: XEUtils.map(option.xAxis.data, date => XEUtils.get(XEUtils.find(res.actualList, item => item.date == date), "price", 0))
|
|
|
|
|
- }];
|
|
|
|
|
- } else {
|
|
|
|
|
- option.series = [{
|
|
|
|
|
- ...lineSeriesDefault[0],
|
|
|
|
|
- data: XEUtils.map(option.xAxis.data, date => XEUtils.get(XEUtils.find(res.planList, item => item.date2 == date), "price", 0))
|
|
|
|
|
- }, {
|
|
|
|
|
- ...lineSeriesDefault[1],
|
|
|
|
|
- data: XEUtils.map(option.xAxis.data, date => XEUtils.get(XEUtils.find(res.actualList, item => item.date2 == date), "price", 0))
|
|
|
|
|
- }];
|
|
|
|
|
- }
|
|
|
|
|
- }).catch(() => {
|
|
|
|
|
- if (query.type == "day") {
|
|
|
|
|
- option.series = [{
|
|
|
|
|
- ...lineSeriesDefault[1],
|
|
|
|
|
- data: new Array(option.xAxis.data.length).fill(0)
|
|
|
|
|
- }];
|
|
|
|
|
- } else {
|
|
|
|
|
- option.series = [{
|
|
|
|
|
- ...lineSeriesDefault[0],
|
|
|
|
|
- data: new Array(option.xAxis.data.length).fill(0)
|
|
|
|
|
- }, {
|
|
|
|
|
- ...lineSeriesDefault[1],
|
|
|
|
|
- data: new Array(option.xAxis.data.length).fill(0)
|
|
|
|
|
- }];
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ API.sales.performance.echart({ type: query.type, beginDate, endDate }).then(res => option.series = lineSeries(query.type, option.xAxis.data, res)).catch(() => option.series = lineSeries(query.type, option.xAxis.data, {}));
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
getEcharts();
|
|
getEcharts();
|
|
@@ -104,8 +74,9 @@ getEcharts();
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
.el-header {height: fit-content;padding: 0;border: none;}
|
|
.el-header {height: fit-content;padding: 0;border: none;}
|
|
|
.el-header :deep(.el-radio-group) {flex-wrap: nowrap;}
|
|
.el-header :deep(.el-radio-group) {flex-wrap: nowrap;}
|
|
|
-.el-header :deep(.vxe-date-range-picker) {width: 240px;}
|
|
|
|
|
|
|
+.el-header :deep(.vxe-date-range-picker) {flex-direction: row-reverse;}
|
|
|
.el-header :deep(.vxe-date-range-picker) .vxe-date-range-picker--inner {text-align: center;}
|
|
.el-header :deep(.vxe-date-range-picker) .vxe-date-range-picker--inner {text-align: center;}
|
|
|
|
|
+.el-header :deep(.vxe-date-range-picker) .vxe-date-range-picker--control-icon {padding-left: .5em;padding-right: 0;}
|
|
|
|
|
|
|
|
.echart-panel {flex: 1;}
|
|
.echart-panel {flex: 1;}
|
|
|
</style>
|
|
</style>
|