|
|
@@ -1,12 +1,23 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-form :inline="true" size="small">
|
|
|
+ <el-form size="small">
|
|
|
<el-form-item label="查询时间范围" size="small">
|
|
|
<datetime-picker @change="onDateChange" :default="daterange_default" :lowerlimit="lastmonth" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <v-chart class="chart" :option="option" v-show="data.time.length > 0" />
|
|
|
- <div v-if="data.time.length == 0">暂无数据</div>
|
|
|
+ <div v-if="data?.time && data.time.length > 0">
|
|
|
+ <el-form size="small">
|
|
|
+ <el-form-item label="展示数据范围" size="small">
|
|
|
+ <el-date-picker v-model="actual_daterange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期" disabled>
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="height:380px">
|
|
|
+ <v-chart class="chart" :option="option" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-empty v-else description="暂无数据" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -17,24 +28,22 @@ import VChart from "vue-echarts";
|
|
|
import { use as echarts_use } from "echarts/core";
|
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
|
import { LineChart } from "echarts/charts";
|
|
|
-import { GridComponent, DatasetComponent, TooltipComponent, LegendComponent } from "echarts/components";
|
|
|
-
|
|
|
+import { GridComponent, TooltipComponent, LegendComponent, DataZoomComponent } from "echarts/components";
|
|
|
|
|
|
import DatetimePicker from "@/components/datetime-picker/index.vue";
|
|
|
import dayjs from 'dayjs';
|
|
|
import toSafeInteger from 'lodash/toSafeInteger';
|
|
|
import httpx from '@/utils/httpx';
|
|
|
import { datetime_format } from '@/utils/formatters';
|
|
|
-import { range } from 'lodash';
|
|
|
|
|
|
|
|
|
echarts_use([
|
|
|
CanvasRenderer,
|
|
|
LineChart,
|
|
|
GridComponent,
|
|
|
- DatasetComponent,
|
|
|
TooltipComponent,
|
|
|
- LegendComponent
|
|
|
+ LegendComponent,
|
|
|
+ DataZoomComponent,
|
|
|
])
|
|
|
|
|
|
function transpose_matrix<T>(matrix: T[][]): T[][] {
|
|
|
@@ -54,18 +63,17 @@ export default Vue.extend({
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- data: {
|
|
|
- time: range(1, 10).map((v => dayjs().add(v, 'hour').toDate())),
|
|
|
- wx: range(1, 10),
|
|
|
- zy: range(1, 10).map(v => -2 * v + 10),
|
|
|
- } as {
|
|
|
+ data: null as null | {
|
|
|
time: Date[],
|
|
|
wx: number[],
|
|
|
- zy: number[]
|
|
|
+ zy: number[],
|
|
|
},
|
|
|
roomId: 0,
|
|
|
daterange: [] as Date[],
|
|
|
- daterange_default: [dayjs().startOf('day').toDate(), dayjs().toDate()],
|
|
|
+ daterange_default: [
|
|
|
+ dayjs().subtract(10, 'day').startOf('day').toDate(),
|
|
|
+ dayjs().toDate()
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -99,6 +107,8 @@ export default Vue.extend({
|
|
|
wx: result.statResultWx,
|
|
|
zy: result.statResultZy,
|
|
|
}
|
|
|
+ }).catch((e) => {
|
|
|
+ this.data = null
|
|
|
})
|
|
|
},
|
|
|
onDateChange(range: Date[]) {
|
|
|
@@ -108,28 +118,46 @@ export default Vue.extend({
|
|
|
},
|
|
|
computed: {
|
|
|
option() {
|
|
|
- return {
|
|
|
- xAxis: { type: 'time' },
|
|
|
- yAxis: { type: 'value' },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data: ['微信', '掌银'] },
|
|
|
- series: [
|
|
|
- //@ts-ignore
|
|
|
- { type: 'line', name: "微信", data: transpose_matrix([this.data.time, this.data.wx]) },
|
|
|
- //@ts-ignore
|
|
|
- { type: 'line', name: "掌银", data: transpose_matrix([this.data.time, this.data.zy]) },
|
|
|
- ],
|
|
|
+ if (this.data && this.data.time.length > 0) {
|
|
|
+ return {
|
|
|
+ xAxis: { type: 'time', maxInterval: 12 * 3600 * 1000 },
|
|
|
+ yAxis: { type: 'value' },
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
+ legend: {
|
|
|
+ selected: {
|
|
|
+ "微信": true,
|
|
|
+ "掌银": true,
|
|
|
+ "总计": false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ //@ts-ignore
|
|
|
+ { type: 'line', name: "微信", data: transpose_matrix([this.data.time, this.data.wx]) },
|
|
|
+ //@ts-ignore
|
|
|
+ { type: 'line', name: "掌银", data: transpose_matrix([this.data.time, this.data.zy]) },
|
|
|
+ //@ts-ignore
|
|
|
+ { type: 'line', name: "总计", data: transpose_matrix([this.data.time, this.data.zy.map((v, i) => v + this.data.wx[i])]) },
|
|
|
+ ],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ id: 'dataZoomX',
|
|
|
+ type: 'slider',
|
|
|
+ xAxisIndex: [0],
|
|
|
+ filterMode: 'filter'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return null
|
|
|
}
|
|
|
},
|
|
|
lastmonth() {
|
|
|
return dayjs().subtract(1, 'month').toDate()
|
|
|
+ },
|
|
|
+ actual_daterange() {
|
|
|
+ //@ts-ignore
|
|
|
+ return [this.data.time[this.data.time.length - 1], this.data.time[0]]
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.chart {
|
|
|
- height: 400px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+</script>
|
furffico