|
|
@@ -1,72 +1,56 @@
|
|
|
<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">
|
|
|
+ <div class="eachartTop">
|
|
|
+ <SearchHeader
|
|
|
+ title="时间筛选: "
|
|
|
+ :isShowQuert="true"
|
|
|
+ :dates="mdate"
|
|
|
+ @changeValue="changeValue"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <statistic :col="4" 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>
|
|
|
+ <count-to :endVal="totalAmount" :duration="300" :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>
|
|
|
+ <span>
|
|
|
+ <count-to :endVal="gymTotal" :duration="300" :decimals="2" :class="'des'" />
|
|
|
</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>
|
|
|
+ <span>
|
|
|
+ <count-to :endVal="colexiuTotal" :duration="300" :decimals="2" :class="'des'" />
|
|
|
</span>
|
|
|
- <count-to :endVal="0" :decimals="2" class="blod" />
|
|
|
</statistic-item>
|
|
|
+ <statistic-item>
|
|
|
+ <span>
|
|
|
+ 管乐团现金收入: (元)
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <count-to :endVal="gytTotal" :duration="300" :decimals="2" :class="'des'" />
|
|
|
+ </span>
|
|
|
+ </statistic-item>
|
|
|
+
|
|
|
</statistic>
|
|
|
+ <div></div>
|
|
|
|
|
|
- <el-form>
|
|
|
- <el-form-item label="分部">
|
|
|
+ <div class="operateEcharts">
|
|
|
+ <div class="eachartTitle">
|
|
|
+ <div>
|
|
|
+ 管乐迷现金收入:
|
|
|
+ <count-to :endVal="gymTotal" :duration="300" :decimals="2" class="des" /> 元
|
|
|
+ </div>
|
|
|
<el-select
|
|
|
clearable
|
|
|
filterable
|
|
|
@@ -85,12 +69,23 @@
|
|
|
:value="item.id"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="operateEcharts">
|
|
|
+ </div>
|
|
|
<div class="gym-echarts"></div>
|
|
|
- <div class="gyt-echarts"></div>
|
|
|
+ <div class="eachartTitle">
|
|
|
+ <div>
|
|
|
+ 酷乐秀现金收入:
|
|
|
+ <count-to :endVal="colexiuTotal" :duration="300" :decimals="2" class="des" /> 元
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="colexiu-echarts"></div>
|
|
|
+ <div class="eachartTitle">
|
|
|
+ <div>
|
|
|
+ 管乐团现金收入:
|
|
|
+ <count-to :endVal="gytTotal" :duration="300" :decimals="2" class="des" /> 元
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="gyt-echarts"></div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -125,6 +120,10 @@ export default {
|
|
|
mounted() {
|
|
|
this.mdate = this.getInitDate();
|
|
|
this.getData();
|
|
|
+ window.addEventListener("resize", this.resize);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener("resize", this.resize);
|
|
|
},
|
|
|
methods: {
|
|
|
getInitDate() {
|
|
|
@@ -166,6 +165,11 @@ export default {
|
|
|
this.mdate = date;
|
|
|
this.getData();
|
|
|
},
|
|
|
+ resize() {
|
|
|
+ this.gymECharts.resize();
|
|
|
+ this.gytEcharts.resize();
|
|
|
+ this.colexiuEcharts.resize();
|
|
|
+ },
|
|
|
init() {
|
|
|
this.createGym();
|
|
|
this.createGyt();
|
|
|
@@ -179,7 +183,7 @@ export default {
|
|
|
const option = {
|
|
|
title: {
|
|
|
top: "0%",
|
|
|
- text: "管乐迷经营数据",
|
|
|
+ text: "",
|
|
|
textStyle: {
|
|
|
color: "#333",
|
|
|
fontSize: 14
|
|
|
@@ -200,8 +204,7 @@ export default {
|
|
|
data: this.gymData.map(item => item.date),
|
|
|
axisLabel: {
|
|
|
color: "#333",
|
|
|
- fontSize: 10,
|
|
|
- rotate: 30
|
|
|
+ fontSize: 10
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -211,8 +214,9 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
data: this.gymData.map(item => item.totalAmount),
|
|
|
- type: "line",
|
|
|
- color: "#E8684A"
|
|
|
+ type: "bar",
|
|
|
+ color: "#00a79d",
|
|
|
+ barWidth: 40
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -224,13 +228,6 @@ export default {
|
|
|
}
|
|
|
this.gytEcharts = echarts.init(document.querySelector(".gyt-echarts"));
|
|
|
const option = {
|
|
|
- title: {
|
|
|
- text: "管乐团经营数据",
|
|
|
- textStyle: {
|
|
|
- color: "#333",
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- },
|
|
|
grid: {
|
|
|
left: 5,
|
|
|
top: 30,
|
|
|
@@ -246,8 +243,7 @@ export default {
|
|
|
data: this.gytData.map(item => item.date),
|
|
|
axisLabel: {
|
|
|
color: "#333",
|
|
|
- fontSize: 10,
|
|
|
- rotate: 30
|
|
|
+ fontSize: 10
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -257,8 +253,9 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
data: this.gytData.map(item => item.totalAmount),
|
|
|
- type: "line",
|
|
|
- color: "#5AD8A6"
|
|
|
+ type: "bar",
|
|
|
+ color: "#00a79d",
|
|
|
+ barWidth: 40
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -272,13 +269,6 @@ export default {
|
|
|
document.querySelector(".colexiu-echarts")
|
|
|
);
|
|
|
const option = {
|
|
|
- title: {
|
|
|
- text: "酷乐秀经营数据",
|
|
|
- textStyle: {
|
|
|
- color: "#333",
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- },
|
|
|
grid: {
|
|
|
left: 5,
|
|
|
top: 30,
|
|
|
@@ -289,16 +279,12 @@ export default {
|
|
|
tooltip: {
|
|
|
trigger: "axis"
|
|
|
},
|
|
|
- title: {
|
|
|
- text: "酷乐秀经营数据"
|
|
|
- },
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: this.colexiuData.map(item => item.date),
|
|
|
axisLabel: {
|
|
|
color: "#333",
|
|
|
- fontSize: 10,
|
|
|
- rotate: 30
|
|
|
+ fontSize: 10
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -308,8 +294,9 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
data: this.colexiuData.map(item => item.totalAmount),
|
|
|
- type: "line",
|
|
|
- color: "#7AD3CB"
|
|
|
+ type: "bar",
|
|
|
+ color: "#00a79d",
|
|
|
+ barWidth: 40
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -324,11 +311,32 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.operateEcharts {
|
|
|
+.eachartTop {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ // ::v-deep .box {
|
|
|
+ // margin-right: 5px;
|
|
|
+ // }
|
|
|
+ // ::v-deep .shape {
|
|
|
+ // display: none;
|
|
|
+ // }
|
|
|
+}
|
|
|
+.eachartTitle {
|
|
|
display: flex;
|
|
|
- div {
|
|
|
- width: calc(80vw / 3);
|
|
|
- height: 400px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.operateEcharts {
|
|
|
+ // display: flex;
|
|
|
+ .gym-echarts,
|
|
|
+ .gyt-echarts,
|
|
|
+ .colexiu-echarts {
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ margin-bottom: 24px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -339,8 +347,12 @@ export default {
|
|
|
font-size: 18px !important;
|
|
|
}
|
|
|
.blod {
|
|
|
- font-weight: bold;
|
|
|
- color: var(--color-primary);
|
|
|
+ font-weight: bold !important;
|
|
|
+ color: var(--color-primary) !important;
|
|
|
font-size: 22px !important;
|
|
|
}
|
|
|
+.des {
|
|
|
+ font-size: 18px !important;
|
|
|
+ color: var(--color-primary);
|
|
|
+}
|
|
|
</style>
|
