|
|
@@ -0,0 +1,349 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-form>
|
|
|
+ <el-form-item label-width="0">
|
|
|
+ <SearchHeader
|
|
|
+ title="时间筛选"
|
|
|
+ :isShowQuert="true"
|
|
|
+ :dates="mdate"
|
|
|
+ @changeValue="changeValue"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <statistic :col="3" class="statistic" :cols="12">
|
|
|
+ <statistic-item>
|
|
|
+ <span>
|
|
|
+ {{ "总收入" + "(元)" }}
|
|
|
+ <el-tooltip
|
|
|
+ content="总收入：现金收入 + 余额收入"
|
|
|
+ :open-delay="0.3"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ style="margin-left: 5px; cursor: pointer"
|
|
|
+ class="el-icon-warning-outline"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <count-to :endVal="totalAmount" :decimals="2" class="blod"
|
|
|
+ /></span>
|
|
|
+ </statistic-item>
|
|
|
+
|
|
|
+ <statistic-item>
|
|
|
+ <span>
|
|
|
+ {{ "现金收入" + "(元)" }}
|
|
|
+ <el-tooltip
|
|
|
+ content="筛选时间段内现金收入总和"
|
|
|
+ :open-delay="0.3"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ style="margin-left: 5px; cursor: pointer"
|
|
|
+ class="el-icon-warning-outline"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <count-to :endVal="0" :decimals="2" class="blod" />
|
|
|
+ </statistic-item>
|
|
|
+ <statistic-item>
|
|
|
+ <span>
|
|
|
+ {{ "余额收入" + "(元)" }}
|
|
|
+ <el-tooltip
|
|
|
+ content="筛选时间段内余额消耗总和"
|
|
|
+ :open-delay="0.3"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ style="margin-left: 5px; cursor: pointer"
|
|
|
+ class="el-icon-warning-outline"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <count-to :endVal="0" :decimals="2" class="blod" />
|
|
|
+ </statistic-item>
|
|
|
+ </statistic>
|
|
|
+
|
|
|
+ <el-form>
|
|
|
+ <el-form-item label="分部">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择分部"
|
|
|
+ v-model="organId"
|
|
|
+ @change="
|
|
|
+ () => {
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in selects.branchs"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="operateEcharts">
|
|
|
+ <div class="gym-echarts"></div>
|
|
|
+ <div class="gyt-echarts"></div>
|
|
|
+ <div class="colexiu-echarts"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import echarts from "echarts";
|
|
|
+import CountTo from "vue-count-to";
|
|
|
+import { multiDataSourceHomeStatsSummerIncome } from "../../api";
|
|
|
+import SearchHeader from "./searchDayHeader";
|
|
|
+import { getTimes } from "@/utils";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ CountTo,
|
|
|
+ SearchHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ organId: "",
|
|
|
+ mdate: [],
|
|
|
+ gymECharts: null,
|
|
|
+ gymData: [],
|
|
|
+ gymTotal: 0,
|
|
|
+ gytEcharts: null,
|
|
|
+ gytData: [],
|
|
|
+ gytTotal: 0,
|
|
|
+ colexiuEcharts: null,
|
|
|
+ colexiuData: [],
|
|
|
+ colexiuTotal: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.mdate = this.getInitDate();
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getInitDate() {
|
|
|
+ const end = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
+ const start = this.$helpers
|
|
|
+ .dayjs(new Date())
|
|
|
+ // .set("month", 1)
|
|
|
+ .subtract(1, "month")
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ return [start, end];
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ multiDataSourceHomeStatsSummerIncome({
|
|
|
+ ...getTimes(this.mdate, ["startTime", "endTime"]),
|
|
|
+ organIds: this.organId
|
|
|
+ }).then(res => {
|
|
|
+ if (Array.isArray(res.data)) {
|
|
|
+ const gym = res.data.find(item => item.platform == "gym");
|
|
|
+ if (gym) {
|
|
|
+ this.gymTotal = gym.totalAmount;
|
|
|
+ this.gymData = gym.incomeByDates;
|
|
|
+ }
|
|
|
+ const gyt = res.data.find(item => item.platform == "gyt");
|
|
|
+ if (gyt) {
|
|
|
+ this.gytTotal = gyt.totalAmount;
|
|
|
+ this.gytData = gyt.incomeByDates;
|
|
|
+ }
|
|
|
+ const clx = res.data.find(item => item.platform == "cls");
|
|
|
+ if (clx) {
|
|
|
+ this.colexiuTotal = clx.totalAmount;
|
|
|
+ this.colexiuData = clx.incomeByDates;
|
|
|
+ }
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeValue(date) {
|
|
|
+ // 请求更改数据
|
|
|
+ this.mdate = date;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.createGym();
|
|
|
+ this.createGyt();
|
|
|
+ this.createColexiu();
|
|
|
+ },
|
|
|
+ createGym() {
|
|
|
+ if (this.gymECharts) {
|
|
|
+ this.gymECharts.dispose();
|
|
|
+ }
|
|
|
+ this.gymECharts = echarts.init(document.querySelector(".gym-echarts"));
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ top: "0%",
|
|
|
+ text: "管乐迷经营数据",
|
|
|
+ textStyle: {
|
|
|
+ color: "#333",
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 5,
|
|
|
+ top: 30,
|
|
|
+ right: 5,
|
|
|
+ bottom: 5,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: this.gymData.map(item => item.date),
|
|
|
+ axisLabel: {
|
|
|
+ color: "#333",
|
|
|
+ fontSize: 10,
|
|
|
+ rotate: 30
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: { formatter: "{value}元" }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: this.gymData.map(item => item.totalAmount),
|
|
|
+ type: "line",
|
|
|
+ color: "#E8684A"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ option && this.gymECharts.setOption(option);
|
|
|
+ },
|
|
|
+ createGyt() {
|
|
|
+ if (this.gytEcharts) {
|
|
|
+ this.gytEcharts.dispose();
|
|
|
+ }
|
|
|
+ this.gytEcharts = echarts.init(document.querySelector(".gyt-echarts"));
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: "管乐团经营数据",
|
|
|
+ textStyle: {
|
|
|
+ color: "#333",
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 5,
|
|
|
+ top: 30,
|
|
|
+ right: 5,
|
|
|
+ bottom: 5,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis"
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: "管乐团经营数据"
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: this.gytData.map(item => item.date),
|
|
|
+ axisLabel: {
|
|
|
+ color: "#333",
|
|
|
+ fontSize: 10,
|
|
|
+ rotate: 30
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: { formatter: "{value}元" }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: this.gytData.map(item => item.totalAmount),
|
|
|
+ type: "line",
|
|
|
+ color: "#5AD8A6"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ option && this.gytEcharts.setOption(option);
|
|
|
+ },
|
|
|
+ createColexiu() {
|
|
|
+ if (this.colexiuEcharts) {
|
|
|
+ this.colexiuEcharts.dispose();
|
|
|
+ }
|
|
|
+ this.colexiuEcharts = echarts.init(
|
|
|
+ document.querySelector(".colexiu-echarts")
|
|
|
+ );
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ subtext: "酷乐秀经营数据",
|
|
|
+ textStyle: {
|
|
|
+ color: "#333",
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 5,
|
|
|
+ top: 30,
|
|
|
+ right: 5,
|
|
|
+ bottom: 5,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis"
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: "酷乐秀经营数据"
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: this.colexiuData.map(item => item.date),
|
|
|
+ axisLabel: {
|
|
|
+ color: "#333",
|
|
|
+ fontSize: 10,
|
|
|
+ rotate: 30
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: { formatter: "{value}元" }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: this.colexiuData.map(item => item.totalAmount),
|
|
|
+ type: "line",
|
|
|
+ color: "#7AD3CB"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ option && this.colexiuEcharts.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ totalAmount() {
|
|
|
+ return this.gymTotal + this.gytTotal + this.colexiuTotal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.operateEcharts {
|
|
|
+ display: flex;
|
|
|
+ div {
|
|
|
+ width: calc(80vw / 3);
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.statistic .statistic-content > span {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+ font-size: 18px !important;
|
|
|
+}
|
|
|
+.blod {
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--color-primary);
|
|
|
+ font-size: 22px !important;
|
|
|
+}
|
|
|
+</style>
|
