|
@@ -1,10 +1,6 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div
|
|
|
- class="wall"
|
|
|
- style="height: 68px"
|
|
|
- v-if="JSON.stringify(items) == '{}'"
|
|
|
- ></div>
|
|
|
+ <div class="wall" style="height: 68px" v-if="JSON.stringify(items) == '{}'"></div>
|
|
|
<!-- 按月/按天 -->
|
|
|
<div class="wrap">
|
|
|
<ve-histogram
|
|
@@ -55,23 +51,23 @@ export default {
|
|
|
"count-to": countTo,
|
|
|
"ve-histogram": histogram,
|
|
|
searchHeader,
|
|
|
- organCoop
|
|
|
+ organCoop,
|
|
|
},
|
|
|
computed: {
|
|
|
legend() {
|
|
|
return {
|
|
|
- show: false
|
|
|
+ show: false,
|
|
|
};
|
|
|
},
|
|
|
items() {
|
|
|
let obj = {};
|
|
|
let arr = [
|
|
|
- "ORGAN_TOTAL_AMOUNT"
|
|
|
+ "ORGAN_TOTAL_AMOUNT",
|
|
|
// "FINANCE_AMOUNT",
|
|
|
// "FINANCE_BALANCE_AMOUNT",
|
|
|
// "FINANCE_PAY",
|
|
|
];
|
|
|
- arr.forEach(str => {
|
|
|
+ arr.forEach((str) => {
|
|
|
if (this.data[str]) {
|
|
|
obj[str] = this.data[str];
|
|
|
}
|
|
@@ -87,10 +83,10 @@ export default {
|
|
|
"ORGAN_RENEW_AMOUNT",
|
|
|
"ORGAN_VIP_AMOUNT",
|
|
|
"ORGAN_PRACTICE_AMOUNT",
|
|
|
- "ORGAN_OTHER_AMOUNT"
|
|
|
+ "ORGAN_OTHER_AMOUNT",
|
|
|
];
|
|
|
|
|
|
- arr.forEach(str => {
|
|
|
+ arr.forEach((str) => {
|
|
|
if (this.data[str]) {
|
|
|
obj[str] = this.data[str];
|
|
|
}
|
|
@@ -106,14 +102,14 @@ export default {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
color: "#000",
|
|
|
- formatter: function(value) {
|
|
|
+ formatter: function (value) {
|
|
|
var val = value.data;
|
|
|
return val + "%";
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
markerPoint: {
|
|
|
- data: { name: "百分比" }
|
|
|
+ data: { name: "百分比" },
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
@@ -124,15 +120,15 @@ export default {
|
|
|
min: 0,
|
|
|
|
|
|
axisLabel: {
|
|
|
- formatter: "{value}%"
|
|
|
+ formatter: "{value}%",
|
|
|
},
|
|
|
splitLine: {
|
|
|
//分割线配置
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: "#EBEEF5"
|
|
|
- }
|
|
|
- }
|
|
|
+ color: "#EBEEF5",
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
@@ -142,22 +138,22 @@ export default {
|
|
|
interval: 0, // 坐标轴刻度标签的显示间隔,在类目轴中有效;默认会采用标签不重叠的策略间隔显示标签;可以设置成0强制显示所有标签;如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。
|
|
|
inside: false, // 刻度标签是否朝内,默认朝外
|
|
|
margin: 6, // 刻度标签与轴线之间的距离
|
|
|
- rotate: 45
|
|
|
+ rotate: 45,
|
|
|
// formatter: function (value) {
|
|
|
// return value.split("").join("\n");
|
|
|
// },
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
shadowStyle: {
|
|
|
- color: "rgba(150,150,150,0.2)"
|
|
|
- }
|
|
|
+ color: "rgba(150,150,150,0.2)",
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
- formatter: item => {
|
|
|
+ formatter: (item) => {
|
|
|
// console.log(item);
|
|
|
// console.log(this.values, item[0].axisValue, "organ");
|
|
|
let arr = [
|
|
@@ -167,19 +163,16 @@ export default {
|
|
|
{ name: "乐团续费收入", dot: "元" },
|
|
|
{ name: "VIP课收入", dot: "元" },
|
|
|
{ name: "网管课收入", dot: "元" },
|
|
|
- { name: "其他收入", dot: "元" }
|
|
|
+ { name: "其他收入", dot: "元" },
|
|
|
];
|
|
|
return [
|
|
|
item[0].axisValueLabel,
|
|
|
...arr.map(
|
|
|
- d =>
|
|
|
- `<br/>${d.name}:${this.values[item[0].axisValue][d.name]}${
|
|
|
- d.dot
|
|
|
- }`
|
|
|
- )
|
|
|
+ (d) => `<br/>${d.name}:${this.values[item[0].axisValue][d.name]}${d.dot}`
|
|
|
+ ),
|
|
|
].join("");
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
// events: {
|
|
|
// click: (e, index) => {
|
|
|
// // this.onClick(e, index);
|
|
@@ -197,8 +190,8 @@ export default {
|
|
|
end: 20,
|
|
|
filterMode: "empty",
|
|
|
zoomLock: true,
|
|
|
- handleSize: 0
|
|
|
- }
|
|
|
+ handleSize: 0,
|
|
|
+ },
|
|
|
];
|
|
|
},
|
|
|
chartData() {
|
|
@@ -209,7 +202,7 @@ export default {
|
|
|
for (const row of values[0].indexMonthData || []) {
|
|
|
const key = row.organName;
|
|
|
organ[key] = {
|
|
|
- 分部: row.organName
|
|
|
+ 分部: row.organName,
|
|
|
};
|
|
|
for (const item of values) {
|
|
|
if (item.title == row.title) {
|
|
@@ -218,9 +211,7 @@ export default {
|
|
|
|
|
|
if (item.title == "总收入" && row.title == "总收入") {
|
|
|
organ[key]["总收入占比"] = (
|
|
|
- (isNaN(row.percent / item.percent)
|
|
|
- ? 0
|
|
|
- : row.percent / item.percent) * 100
|
|
|
+ (isNaN(row.percent / item.percent) ? 0 : row.percent / item.percent) * 100
|
|
|
).toFixed(2);
|
|
|
}
|
|
|
}
|
|
@@ -250,7 +241,7 @@ export default {
|
|
|
|
|
|
this.values = organ;
|
|
|
let row = Object.values(organ);
|
|
|
- row = lodash.sortBy(row, function(o) {
|
|
|
+ row = lodash.sortBy(row, function (o) {
|
|
|
return -o["总收入占比"];
|
|
|
});
|
|
|
// console.log(row, "row");
|
|
@@ -259,7 +250,7 @@ export default {
|
|
|
return {
|
|
|
columns: ["分部", "总收入占比"],
|
|
|
rows: row,
|
|
|
- loading: true
|
|
|
+ loading: true,
|
|
|
};
|
|
|
},
|
|
|
chartDataForMoth() {
|
|
@@ -271,7 +262,7 @@ export default {
|
|
|
|
|
|
if (!months[key]) {
|
|
|
months[key] = {
|
|
|
- 月份: key
|
|
|
+ 月份: key,
|
|
|
};
|
|
|
months[key][item.title] = row.percent;
|
|
|
} else {
|
|
@@ -296,15 +287,15 @@ export default {
|
|
|
"网管课收入",
|
|
|
"其他收入",
|
|
|
"乐团续费收入",
|
|
|
- "VIP课收入"
|
|
|
+ "VIP课收入",
|
|
|
],
|
|
|
rows: Object.values(months),
|
|
|
- loading: true
|
|
|
+ loading: true,
|
|
|
};
|
|
|
},
|
|
|
dataEmpty() {
|
|
|
return !this.chartData.rows.length;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
// this.chartSettings = {
|
|
@@ -323,7 +314,7 @@ export default {
|
|
|
handleStatus: false,
|
|
|
organId: "",
|
|
|
dataCoop: [],
|
|
|
- isClick: false
|
|
|
+ isClick: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -334,22 +325,18 @@ export default {
|
|
|
if (charts) {
|
|
|
const that = this;
|
|
|
charts.getZr().off("click"); //防止触发两次点击事件
|
|
|
- charts.getZr().on("click", async function(params) {
|
|
|
+ charts.getZr().on("click", async function (params) {
|
|
|
if (that.loading) return;
|
|
|
|
|
|
let op = charts.getOption();
|
|
|
// console.log(op, params);
|
|
|
let pointInPixel = [params.offsetX, params.offsetY];
|
|
|
if (charts.containPixel("grid", pointInPixel)) {
|
|
|
- const xIndex = charts.convertFromPixel(
|
|
|
- { seriesIndex: 0 },
|
|
|
- pointInPixel
|
|
|
- )[0];
|
|
|
+ const xIndex = charts.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
|
|
|
//获得图表中点击的列
|
|
|
var name = op.xAxis[0].data[xIndex]; // 当前点击的 X轴 的名称
|
|
|
- const indexMonthData =
|
|
|
- that.data?.ORGAN_FINANCE_AMOUNT.indexMonthData || [];
|
|
|
- indexMonthData.forEach(item => {
|
|
|
+ const indexMonthData = that.data?.ORGAN_FINANCE_AMOUNT.indexMonthData || [];
|
|
|
+ indexMonthData.forEach((item) => {
|
|
|
if (item.organName == name) {
|
|
|
that.organId = item.organId;
|
|
|
}
|
|
@@ -366,16 +353,17 @@ export default {
|
|
|
try {
|
|
|
const res = await indexCoop({
|
|
|
...getTimes(this.mdate1, ["startTime", "endTime"]),
|
|
|
- organId: this.organId
|
|
|
+ organId: this.organId,
|
|
|
});
|
|
|
const tempData = res.data || [];
|
|
|
// 只显示前10的数据
|
|
|
this.dataCoop = [];
|
|
|
tempData.forEach((item, index) => {
|
|
|
// console.log(item, index);
|
|
|
- if (index <= 9) {
|
|
|
- this.dataCoop.push(item);
|
|
|
- }
|
|
|
+ // if (index <= 9) {
|
|
|
+ // this.dataCoop.push(item);
|
|
|
+ // }
|
|
|
+ this.dataCoop.push(item);
|
|
|
});
|
|
|
this.handleStatus = true;
|
|
|
this.loading = false;
|
|
@@ -439,20 +427,15 @@ export default {
|
|
|
const count = this.$helpers
|
|
|
.dayjs(arr[0])
|
|
|
.diff(this.$helpers.dayjs(arr[1]), "day");
|
|
|
- Math.abs(count) > chioseNum
|
|
|
- ? (this.timer = "month")
|
|
|
- : (this.timer = "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");
|
|
|
+ const start = this.$helpers.dayjs(new Date()).set("date", 1).format("YYYY-MM-DD");
|
|
|
return [start, end];
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|