|
|
@@ -1,506 +1,374 @@
|
|
|
-<template >
|
|
|
- <el-card id="management">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <searchHeader
|
|
|
- :dates="mdate"
|
|
|
- :title="'经营数据'"
|
|
|
- @changeValue="changeValue"
|
|
|
- :isShowQuert="true"
|
|
|
- :endDate="endDate"
|
|
|
- ref="searchHeader"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="wall"
|
|
|
- style="height: 68px"
|
|
|
- v-if="JSON.stringify(items) == '{}'"
|
|
|
- ></div>
|
|
|
- <statistic :col="5" class="statistic" :cols="12">
|
|
|
- <statistic-item @click="active = 0">
|
|
|
- <span>
|
|
|
- {{ items["TOTAL_AMOUNT"].title + "(元)" }}
|
|
|
- <el-tooltip
|
|
|
- v-if="items['TOTAL_AMOUNT'].desc"
|
|
|
- :content="items['TOTAL_AMOUNT'].desc"
|
|
|
- :open-delay="0.3"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <i
|
|
|
- style="margin-left: 5px; cursor: pointer"
|
|
|
- class="el-icon-warning-outline"
|
|
|
- />
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- <!-- 12345678901.23 -->
|
|
|
- <span>
|
|
|
- <count-to
|
|
|
- :endVal="items['TOTAL_AMOUNT'].percent"
|
|
|
- :decimals="2"
|
|
|
- :class="'blod'"
|
|
|
- /></span>
|
|
|
- </statistic-item>
|
|
|
- <template v-for="(item, key) in items">
|
|
|
- <statistic-item
|
|
|
- v-if="item.dataType != 'TOTAL_AMOUNT'"
|
|
|
- :key="key"
|
|
|
- :class="{ active: active === key }"
|
|
|
- @click="active = key"
|
|
|
- >
|
|
|
- <span>
|
|
|
- {{ item.title + "(元)" }}
|
|
|
- <el-tooltip
|
|
|
- v-if="item.desc"
|
|
|
- :content="item.desc"
|
|
|
- :open-delay="0.3"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <i
|
|
|
- style="margin-left: 5px; cursor: pointer"
|
|
|
- class="el-icon-warning-outline"
|
|
|
- />
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- <!-- 12345678901.23 -->
|
|
|
- <span>
|
|
|
- <count-to
|
|
|
- :endVal="item.percent"
|
|
|
- :decimals="2"
|
|
|
- :class="item.dataType == 'TOTAL_AMOUNT' ? 'blod' : ''"
|
|
|
- /></span>
|
|
|
- </statistic-item>
|
|
|
- </template>
|
|
|
-
|
|
|
- <statistic-item></statistic-item>
|
|
|
- </statistic>
|
|
|
-
|
|
|
- <div class="statisticWrap">
|
|
|
- <statistic :col="5" class="statistic" :cols="0" :isNoLine='true'>
|
|
|
- <statistic-item
|
|
|
- v-for="(item, key) in items2"
|
|
|
- :key="key"
|
|
|
- :class="{ active: active === key }"
|
|
|
- @click="active = key"
|
|
|
- >
|
|
|
- <template v-if="item.dataType != 'OTHER_AMOUNT'">
|
|
|
- <span>
|
|
|
- {{ item.title + "(元)" }}
|
|
|
- <!-- {{ item.dataType == 'OTHER_AMOUNT' ? 'other' : null }} -->
|
|
|
- <el-tooltip
|
|
|
- v-if="item.desc"
|
|
|
- :content="item.desc"
|
|
|
- :open-delay="0.3"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <i
|
|
|
- style="margin-left: 5px; cursor: pointer"
|
|
|
- class="el-icon-warning-outline"
|
|
|
- />
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- <!-- 12345678901.23 -->
|
|
|
- <span> <count-to :endVal="item.percent" :decimals="2" /></span>
|
|
|
- </template>
|
|
|
- <el-popover
|
|
|
- placement="top"
|
|
|
- width="400"
|
|
|
- v-else
|
|
|
- trigger="hover">
|
|
|
- <descriptions :column="1" v-if="(item.indexMonthDataDetail || []).length > 0">
|
|
|
- <template v-for="(item, index) in item.indexMonthDataDetail || []">
|
|
|
- <descriptions-item :key="index" :label="orderType[item.orderType]">{{ item.totalNum | moneyFormat }}元
|
|
|
- </descriptions-item>
|
|
|
- </template>
|
|
|
- </descriptions>
|
|
|
- <div slot="reference">
|
|
|
- <span>
|
|
|
- {{ item.title + "(元)" }}
|
|
|
- <el-tooltip
|
|
|
- v-if="item.desc"
|
|
|
- :content="item.desc"
|
|
|
- :open-delay="0.3"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <i
|
|
|
- style="margin-left: 5px; cursor: pointer"
|
|
|
- class="el-icon-warning-outline"
|
|
|
- />
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- <span style="font-size: 18px; display: block; color: rgba(0, 0, 0, 0.85);"> <count-to :endVal="item.percent" :decimals="2" /></span>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- </statistic-item>
|
|
|
- </statistic>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 按月/按天 -->
|
|
|
-
|
|
|
- <div class="wrap">
|
|
|
- <div class="chioseBox">
|
|
|
- <el-radio-group v-model="timer" >
|
|
|
- <el-radio-button label="day">按天</el-radio-button>
|
|
|
- <el-radio-button label="month">按月</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- <!-- v-if="timer == 'day'" :settings="chartSettings" DD-->
|
|
|
- <ve-line
|
|
|
- :data="timer == 'day' ? chartData : chartDataForMoth"
|
|
|
- height="350px"
|
|
|
- :data-empty="dataEmpty"
|
|
|
- :extend="chartExtend"
|
|
|
- :legend="legend"
|
|
|
- />
|
|
|
- <!-- <ve-line
|
|
|
- v-else
|
|
|
- :data-zoom="dataZoom"
|
|
|
- :settings="{
|
|
|
- area: true,
|
|
|
- }"
|
|
|
- :data="chartDataForMoth"
|
|
|
- height="350px"
|
|
|
- :data-empty="dataEmpty"
|
|
|
- :data-zoom="dataZoom"
|
|
|
- :extend="chartExtend"
|
|
|
- :legend="legend"
|
|
|
- /> -->
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import "echarts/lib/component/dataZoom";
|
|
|
-import countTo from "vue-count-to";
|
|
|
-import veLine from "v-charts/lib/line.common";
|
|
|
-import histogram from "v-charts/lib/histogram.common";
|
|
|
-import searchHeader from "./modals/searchHeader";
|
|
|
-import { getIndex } from "../api";
|
|
|
-import { getTimes } from "@/utils";
|
|
|
-import { descs, chioseNum } from "../constant";
|
|
|
-import { orderType } from '@/constant'
|
|
|
-
|
|
|
-export default {
|
|
|
- props: ["data", "search"],
|
|
|
- components: {
|
|
|
- "ve-line": veLine,
|
|
|
- "count-to": countTo,
|
|
|
- "ve-histogram": histogram,
|
|
|
- searchHeader,
|
|
|
- },
|
|
|
- computed: {
|
|
|
- legend() {
|
|
|
- return {
|
|
|
- left: "10px",
|
|
|
- };
|
|
|
- },
|
|
|
- items() {
|
|
|
- let obj = {};
|
|
|
- let arr = [
|
|
|
- "TOTAL_AMOUNT",
|
|
|
- "FINANCE_AMOUNT",
|
|
|
- "FINANCE_BALANCE_AMOUNT",
|
|
|
- "FINANCE_PAY",
|
|
|
- ];
|
|
|
- arr.forEach((str) => {
|
|
|
- if (this.data[str]) {
|
|
|
- obj[str] = this.data[str];
|
|
|
- }
|
|
|
- });
|
|
|
- // console.log(obj);
|
|
|
- return obj;
|
|
|
- },
|
|
|
- items2() {
|
|
|
- let obj = {};
|
|
|
- let arr = [
|
|
|
- "APPLY_AMOUNT",
|
|
|
- "RENEW_AMOUNT",
|
|
|
- "VIP_AMOUNT",
|
|
|
- "PRACTICE_AMOUNT",
|
|
|
- "OTHER_AMOUNT",
|
|
|
- ];
|
|
|
- arr.forEach((str) => {
|
|
|
- if (this.data[str]) {
|
|
|
- obj[str] = this.data[str];
|
|
|
- }
|
|
|
- });
|
|
|
- return obj;
|
|
|
- },
|
|
|
- chartExtend() {
|
|
|
- return {
|
|
|
- series: {
|
|
|
- smooth: false,
|
|
|
- },
|
|
|
-
|
|
|
- yAxis: {
|
|
|
- //纵轴标尺固定
|
|
|
- minInterval: 1,
|
|
|
- type: "value",
|
|
|
- scale: true,
|
|
|
- min: 0,
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}元",
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- tooltip: {
|
|
|
- axisPointer: {
|
|
|
- type: "shadow",
|
|
|
- shadowStyle: {
|
|
|
- color: "rgba(150,150,150,0.2)",
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- formatter: (item) => {
|
|
|
- return [
|
|
|
- item[0].axisValueLabel,
|
|
|
- ...item.map(
|
|
|
- (d) => `<br/>${d.marker}${d.seriesName}: ${d.value[1]} 元`
|
|
|
- ),
|
|
|
- ].join("");
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- dataZoom() {
|
|
|
- return [
|
|
|
- {
|
|
|
- type: "slider",
|
|
|
- start: 50,
|
|
|
- end: 100,
|
|
|
- filterMode: "empty",
|
|
|
- },
|
|
|
- ];
|
|
|
- },
|
|
|
- chartData() {
|
|
|
- const values = Object.values({ ...this.items, ...this.items2 });
|
|
|
- const months = {};
|
|
|
- for (const item of values) {
|
|
|
- for (const row of item.indexMonthData || []) {
|
|
|
- const key = this.$helpers.dayjs(row.month).format("YYYY-MM-DD");
|
|
|
- if (!months[key]) {
|
|
|
- months[key] = {
|
|
|
- 日期: key,
|
|
|
- };
|
|
|
- }
|
|
|
- months[key][item.title] = row.percent;
|
|
|
- }
|
|
|
- }
|
|
|
- // console.log(values);
|
|
|
- return {
|
|
|
- columns: [
|
|
|
- "日期",
|
|
|
- "总收入",
|
|
|
- "现金收入",
|
|
|
- "余额收入",
|
|
|
- "财务支出",
|
|
|
- "报名缴费收入",
|
|
|
- "网管课收入",
|
|
|
- "其他收入",
|
|
|
- "乐团续费收入",
|
|
|
- "VIP课收入",
|
|
|
- ],
|
|
|
- rows: Object.values(months),
|
|
|
- loading: true,
|
|
|
- };
|
|
|
- },
|
|
|
- chartDataForMoth() {
|
|
|
- const values = Object.values({ ...this.items, ...this.items2 });
|
|
|
- const months = {};
|
|
|
- for (const item of values) {
|
|
|
- for (const row of item.indexMonthData || []) {
|
|
|
- const key = this.$helpers.dayjs(row.month).format("YYYY-MM");
|
|
|
-
|
|
|
- if (!months[key]) {
|
|
|
- months[key] = {
|
|
|
- 月份: key,
|
|
|
- };
|
|
|
- months[key][item.title] = row.percent;
|
|
|
- } else {
|
|
|
- if (months[key][item.title]) {
|
|
|
- months[key][item.title] = (
|
|
|
- parseFloat(months[key][item.title]) + parseFloat(row.percent)
|
|
|
- ).toFixed(2);
|
|
|
- } else {
|
|
|
- months[key][item.title] = parseFloat(row.percent).toFixed(2);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- columns: [
|
|
|
- "月份",
|
|
|
- "总收入",
|
|
|
- "现金收入",
|
|
|
- "余额收入",
|
|
|
- "财务支出",
|
|
|
- "报名缴费收入",
|
|
|
- "网管课收入",
|
|
|
- "其他收入",
|
|
|
- "乐团续费收入",
|
|
|
- "VIP课收入",
|
|
|
- ],
|
|
|
- rows: Object.values(months),
|
|
|
- loading: true,
|
|
|
- };
|
|
|
- },
|
|
|
- dataEmpty() {
|
|
|
- return !this.chartData.rows.length;
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- // this.chartSettings = {
|
|
|
- // stack: { 总收入: [`现金收入`, `余额收入`] },
|
|
|
- // };
|
|
|
- return {
|
|
|
- orderType,
|
|
|
- active: "SHOULD_INCOME_MONEY",
|
|
|
- timer: "day",
|
|
|
- mdate: [],
|
|
|
- loading: false,
|
|
|
- endDate: "",
|
|
|
- show: true,
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this.$refs.searchHeader.initStatue('month');
|
|
|
- this.mdate = this.getInitDate();
|
|
|
- this.endDate = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
- // this.$refs.searchHeader.initStatue()
|
|
|
- this.changeValue(this.mdate);
|
|
|
- },
|
|
|
- changeValue(date) {
|
|
|
- // 请求更改数据
|
|
|
- this.mdate = date;
|
|
|
- this.isDayOrMoth(date);
|
|
|
- this.FetchDetail();
|
|
|
- },
|
|
|
- async FetchDetail() {
|
|
|
- this.loading = true;
|
|
|
- let data = [];
|
|
|
- try {
|
|
|
- const { dates, ...rest } = this.search;
|
|
|
- const res = await getIndex({
|
|
|
- ...rest,
|
|
|
- ...getTimes(this.mdate, ["startDate", "endDate"]),
|
|
|
- //
|
|
|
- dataTypes:
|
|
|
- "FINANCE_AMOUNT,FINANCE_BALANCE_AMOUNT,FINANCE_PAY,TOTAL_AMOUNT",
|
|
|
- });
|
|
|
- for (const item of res.data) {
|
|
|
- // 再循环一遍
|
|
|
- for (const key in { ...this.items, ...this.items2 }) {
|
|
|
- // console.log(key);
|
|
|
- if (item.dataType == key) {
|
|
|
- data[item.dataType] = {
|
|
|
- ...item,
|
|
|
- desc: descs[item.dataType],
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- this.loading = false;
|
|
|
- this.$emit("resetDate", data);
|
|
|
- },
|
|
|
-
|
|
|
- isDayOrMoth(arr) {
|
|
|
- if (!arr || arr.length < 1) {
|
|
|
- this.timer = "day";
|
|
|
- } else {
|
|
|
- const count = this.$helpers
|
|
|
- .dayjs(arr[0])
|
|
|
- .diff(this.$helpers.dayjs(arr[1]), "day");
|
|
|
- Math.abs(count) > chioseNum
|
|
|
- ? (this.timer = "month")
|
|
|
- : (this.timer = "day");
|
|
|
- }
|
|
|
- },
|
|
|
- getInitDate() {
|
|
|
- const end = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
- const start = this.$helpers
|
|
|
- .dayjs(new Date())
|
|
|
- .set("date", 1)
|
|
|
- .format("YYYY-MM-DD");
|
|
|
- return [start, end];
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="less" scoped>
|
|
|
-/deep/.description-title {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-#management .statistic .statistic-content > span {
|
|
|
- &:first-child {
|
|
|
- font-size: 14px !important;
|
|
|
- }
|
|
|
- font-size: 18px !important;
|
|
|
-}
|
|
|
-.chioseBox {
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- z-index: 1000;
|
|
|
-}
|
|
|
-.wrap {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.blod {
|
|
|
- font-weight: bold;
|
|
|
- color: var(--color-primary);
|
|
|
- font-size: 22px !important;
|
|
|
-}
|
|
|
-// .chioseBox {
|
|
|
-// position: absolute;
|
|
|
-// right: 20px;
|
|
|
-// z-index: 1000;
|
|
|
-// }
|
|
|
-// .wrap {
|
|
|
-// position: relative;
|
|
|
-// }
|
|
|
-.statisticWrap {
|
|
|
- // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #ebeef5;
|
|
|
- padding-top: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- position: relative;
|
|
|
- &:after {
|
|
|
- top: -16px;
|
|
|
- margin-left:calc(10% - 14px) ;
|
|
|
- border-top-width: 0;
|
|
|
- border-color: transparent;
|
|
|
- border-bottom-color: #fff;
|
|
|
- content: " ";
|
|
|
- border-width: 8px;
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
-
|
|
|
- border-style: solid;
|
|
|
- z-index: 101;
|
|
|
-
|
|
|
- }
|
|
|
- &:before {
|
|
|
- top: -20px;
|
|
|
- margin-left:calc(10% - 16px) ;
|
|
|
-
|
|
|
- border-top-width: 0;
|
|
|
- border-color: transparent;
|
|
|
- border-bottom-color: #ebeef5;
|
|
|
- content: " ";
|
|
|
- border-width: 10px;
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
-
|
|
|
- border-style: solid;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template >
|
|
|
+ <el-card id="management">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <searchHeader
|
|
|
+ :dates="mdate"
|
|
|
+ :title="'经营数据'"
|
|
|
+ @changeValue="changeValue"
|
|
|
+ :isShowQuert="true"
|
|
|
+ :endDate="endDate"
|
|
|
+ ref="searchHeader"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-tabs v-model="activeName">
|
|
|
+ <el-tab-pane label="总览" name="first">
|
|
|
+ <div v-if="activeName == 'first'">
|
|
|
+ <manageOrganAll :data="data" :search="search" ref='manageOrganAll'/>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="分部数据" name="second">
|
|
|
+ <div v-if="activeName == 'second'">
|
|
|
+ <manageOrgan :data="data" :search="search" ref='manageOrgan'/>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import "echarts/lib/component/dataZoom";
|
|
|
+import countTo from "vue-count-to";
|
|
|
+import veLine from "v-charts/lib/line.common";
|
|
|
+import histogram from "v-charts/lib/histogram.common";
|
|
|
+import searchHeader from "./modals/searchHeader";
|
|
|
+import { getIndex } from "../api";
|
|
|
+import { getTimes } from "@/utils";
|
|
|
+import { descs, chioseNum } from "../constant";
|
|
|
+import { orderType } from "@/constant";
|
|
|
+import manageOrganAll from "./modals/manageOrganAll";
|
|
|
+import manageOrgan from "./modals/manageOrgan";
|
|
|
+export default {
|
|
|
+ props: ["data", "search"],
|
|
|
+ components: {
|
|
|
+ "ve-line": veLine,
|
|
|
+ "count-to": countTo,
|
|
|
+ "ve-histogram": histogram,
|
|
|
+ searchHeader,
|
|
|
+ manageOrganAll,
|
|
|
+ manageOrgan
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ legend() {
|
|
|
+ return {
|
|
|
+ left: "10px",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ items() {
|
|
|
+ let obj = {};
|
|
|
+ let arr = [
|
|
|
+ "TOTAL_AMOUNT",
|
|
|
+ "FINANCE_AMOUNT",
|
|
|
+ "FINANCE_BALANCE_AMOUNT",
|
|
|
+ "FINANCE_PAY",
|
|
|
+ ];
|
|
|
+ arr.forEach((str) => {
|
|
|
+ if (this.data[str]) {
|
|
|
+ obj[str] = this.data[str];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // console.log(obj);
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ items2() {
|
|
|
+ let obj = {};
|
|
|
+ let arr = [
|
|
|
+ "APPLY_AMOUNT",
|
|
|
+ "RENEW_AMOUNT",
|
|
|
+ "VIP_AMOUNT",
|
|
|
+ "PRACTICE_AMOUNT",
|
|
|
+ "OTHER_AMOUNT",
|
|
|
+ ];
|
|
|
+ arr.forEach((str) => {
|
|
|
+ if (this.data[str]) {
|
|
|
+ obj[str] = this.data[str];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ chartExtend() {
|
|
|
+ return {
|
|
|
+ series: {
|
|
|
+ smooth: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ //纵轴标尺固定
|
|
|
+ minInterval: 1,
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ min: 0,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}元",
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ shadowStyle: {
|
|
|
+ color: "rgba(150,150,150,0.2)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ formatter: (item) => {
|
|
|
+ return [
|
|
|
+ item[0].axisValueLabel,
|
|
|
+ ...item.map(
|
|
|
+ (d) => `<br/>${d.marker}${d.seriesName}: ${d.value[1]} 元`
|
|
|
+ ),
|
|
|
+ ].join("");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ dataZoom() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ type: "slider",
|
|
|
+ start: 50,
|
|
|
+ end: 100,
|
|
|
+ filterMode: "empty",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ chartData() {
|
|
|
+ const values = Object.values({ ...this.items, ...this.items2 });
|
|
|
+ const months = {};
|
|
|
+ for (const item of values) {
|
|
|
+ for (const row of item.indexMonthData || []) {
|
|
|
+ const key = this.$helpers.dayjs(row.month).format("YYYY-MM-DD");
|
|
|
+ if (!months[key]) {
|
|
|
+ months[key] = {
|
|
|
+ 日期: key,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(values);
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ "日期",
|
|
|
+ "总收入",
|
|
|
+ "现金收入",
|
|
|
+ "余额收入",
|
|
|
+ "财务支出",
|
|
|
+ "报名缴费收入",
|
|
|
+ "网管课收入",
|
|
|
+ "其他收入",
|
|
|
+ "乐团续费收入",
|
|
|
+ "VIP课收入",
|
|
|
+ ],
|
|
|
+ rows: Object.values(months),
|
|
|
+ loading: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ chartDataForMoth() {
|
|
|
+ const values = Object.values({ ...this.items, ...this.items2 });
|
|
|
+ const months = {};
|
|
|
+ for (const item of values) {
|
|
|
+ for (const row of item.indexMonthData || []) {
|
|
|
+ const key = this.$helpers.dayjs(row.month).format("YYYY-MM");
|
|
|
+
|
|
|
+ if (!months[key]) {
|
|
|
+ months[key] = {
|
|
|
+ 月份: key,
|
|
|
+ };
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
+ } else {
|
|
|
+ if (months[key][item.title]) {
|
|
|
+ months[key][item.title] = (
|
|
|
+ parseFloat(months[key][item.title]) + parseFloat(row.percent)
|
|
|
+ ).toFixed(2);
|
|
|
+ } else {
|
|
|
+ months[key][item.title] = parseFloat(row.percent).toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ "月份",
|
|
|
+ "总收入",
|
|
|
+ "现金收入",
|
|
|
+ "余额收入",
|
|
|
+ "财务支出",
|
|
|
+ "报名缴费收入",
|
|
|
+ "网管课收入",
|
|
|
+ "其他收入",
|
|
|
+ "乐团续费收入",
|
|
|
+ "VIP课收入",
|
|
|
+ ],
|
|
|
+ rows: Object.values(months),
|
|
|
+ loading: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ dataEmpty() {
|
|
|
+ return !this.chartData.rows.length;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ // this.chartSettings = {
|
|
|
+ // stack: { 总收入: [`现金收入`, `余额收入`] },
|
|
|
+ // };
|
|
|
+ return {
|
|
|
+ orderType,
|
|
|
+ active: "SHOULD_INCOME_MONEY",
|
|
|
+ timer: "day",
|
|
|
+ mdate: [],
|
|
|
+ loading: false,
|
|
|
+ endDate: "",
|
|
|
+ show: true,
|
|
|
+ activeName: "first",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.$refs.searchHeader.initStatue("month");
|
|
|
+ this.mdate = this.getInitDate();
|
|
|
+ this.endDate = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
+ // this.$refs.searchHeader.initStatue()
|
|
|
+ this.changeValue(this.mdate);
|
|
|
+ },
|
|
|
+ changeValue(date) {
|
|
|
+ // 请求更改数据
|
|
|
+ this.mdate = date;
|
|
|
+ // this.isDayOrMoth(date);
|
|
|
+ if(this.$refs.manageOrganAll&&this.$refs.manageOrganAll.isDayOrMoth){
|
|
|
+ this.$refs.manageOrganAll.isDayOrMoth(date)
|
|
|
+ }
|
|
|
+ this.FetchDetail();
|
|
|
+ },
|
|
|
+ async FetchDetail() {
|
|
|
+ this.loading = true;
|
|
|
+ let data = [];
|
|
|
+ try {
|
|
|
+ const { dates, ...rest } = this.search;
|
|
|
+ const res = await getIndex({
|
|
|
+ ...rest,
|
|
|
+ ...getTimes(this.mdate, ["startDate", "endDate"]),
|
|
|
+ //
|
|
|
+ dataTypes:
|
|
|
+ "FINANCE_AMOUNT,FINANCE_BALANCE_AMOUNT,FINANCE_PAY,TOTAL_AMOUNT",
|
|
|
+ });
|
|
|
+ for (const item of res.data) {
|
|
|
+ // 再循环一遍
|
|
|
+ for (const key in { ...this.items, ...this.items2 }) {
|
|
|
+ // console.log(key);
|
|
|
+ if (item.dataType == key) {
|
|
|
+ data[item.dataType] = {
|
|
|
+ ...item,
|
|
|
+ desc: descs[item.dataType],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ this.$emit("resetDate", data);
|
|
|
+ },
|
|
|
+
|
|
|
+ isDayOrMoth(arr) {
|
|
|
+ if (!arr || arr.length < 1) {
|
|
|
+ this.timer = "day";
|
|
|
+ } else {
|
|
|
+ const count = this.$helpers
|
|
|
+ .dayjs(arr[0])
|
|
|
+ .diff(this.$helpers.dayjs(arr[1]), "day");
|
|
|
+ Math.abs(count) > chioseNum
|
|
|
+ ? (this.timer = "month")
|
|
|
+ : (this.timer = "day");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getInitDate() {
|
|
|
+ const end = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
+ const start = this.$helpers
|
|
|
+ .dayjs(new Date())
|
|
|
+ .set("date", 1)
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ return [start, end];
|
|
|
+ },
|
|
|
+ changeTimer(val){
|
|
|
+ this.timer = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.description-title {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+#management .statistic .statistic-content > span {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+ font-size: 18px !important;
|
|
|
+}
|
|
|
+.chioseBox {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+.wrap {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.blod {
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--color-primary);
|
|
|
+ font-size: 22px !important;
|
|
|
+}
|
|
|
+// .chioseBox {
|
|
|
+// position: absolute;
|
|
|
+// right: 20px;
|
|
|
+// z-index: 1000;
|
|
|
+// }
|
|
|
+// .wrap {
|
|
|
+// position: relative;
|
|
|
+// }
|
|
|
+.statisticWrap {
|
|
|
+ // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ &:after {
|
|
|
+ top: -16px;
|
|
|
+ margin-left: calc(10% - 14px);
|
|
|
+ border-top-width: 0;
|
|
|
+ border-color: transparent;
|
|
|
+ border-bottom-color: #fff;
|
|
|
+ content: " ";
|
|
|
+ border-width: 8px;
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+
|
|
|
+ border-style: solid;
|
|
|
+ z-index: 101;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ top: -20px;
|
|
|
+ margin-left: calc(10% - 16px);
|
|
|
+
|
|
|
+ border-top-width: 0;
|
|
|
+ border-color: transparent;
|
|
|
+ border-bottom-color: #ebeef5;
|
|
|
+ content: " ";
|
|
|
+ border-width: 10px;
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+
|
|
|
+ border-style: solid;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
mo