|
|
@@ -1,19 +1,36 @@
|
|
|
<template>
|
|
|
- <el-card header="经营数据">
|
|
|
+ <el-card header="">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <searchHeader />
|
|
|
+ </div>
|
|
|
<statistic :col="5" class="statistic" :cols="0">
|
|
|
- <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
|
|
|
+ <statistic-item
|
|
|
+ v-for="(item, key) in items"
|
|
|
+ :key="key"
|
|
|
+ :class="{ active: active === key }"
|
|
|
+ @click="active = key"
|
|
|
+ >
|
|
|
<span>
|
|
|
- {{item.title}}
|
|
|
- <el-tooltip v-if="item.desc" :content="item.desc" :open-delay=".3" placement="top">
|
|
|
- <i style="margin-left: 5px;cursor: pointer;" class="el-icon-warning-outline"/>
|
|
|
+ {{ 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>
|
|
|
- <count-to :endVal="item.percent" :decimals="2"/>
|
|
|
+ <count-to :endVal="item.percent" :decimals="2" />
|
|
|
</span>
|
|
|
</statistic-item>
|
|
|
</statistic>
|
|
|
- <ve-line :settings="{
|
|
|
+ <ve-line
|
|
|
+ :settings="{
|
|
|
area: true,
|
|
|
}"
|
|
|
:data="chartData"
|
|
|
@@ -25,80 +42,87 @@
|
|
|
</el-card>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import 'echarts/lib/component/dataZoom'
|
|
|
-import countTo from 'vue-count-to'
|
|
|
-import veLine from 'v-charts/lib/line.common'
|
|
|
+import "echarts/lib/component/dataZoom";
|
|
|
+import countTo from "vue-count-to";
|
|
|
+import veLine from "v-charts/lib/line.common";
|
|
|
+import searchHeader from "./modals/searchHeader";
|
|
|
export default {
|
|
|
- props: ['data'],
|
|
|
+ props: ["data"],
|
|
|
components: {
|
|
|
- 've-line': veLine,
|
|
|
- 'count-to': countTo
|
|
|
+ "ve-line": veLine,
|
|
|
+ "count-to": countTo,
|
|
|
+ searchHeader,
|
|
|
},
|
|
|
computed: {
|
|
|
items() {
|
|
|
return {
|
|
|
- FINANCE_AMOUNT: this.data['FINANCE_AMOUNT'] || {},
|
|
|
- FINANCE_BALANCE_AMOUNT: this.data['FINANCE_BALANCE_AMOUNT'] || {},
|
|
|
- FINANCE_PAY: this.data['FINANCE_PAY'] || {},
|
|
|
- }
|
|
|
+ FINANCE_AMOUNT: this.data["FINANCE_AMOUNT"] || {},
|
|
|
+ FINANCE_BALANCE_AMOUNT: this.data["FINANCE_BALANCE_AMOUNT"] || {},
|
|
|
+ FINANCE_PAY: this.data["FINANCE_PAY"] || {},
|
|
|
+ };
|
|
|
},
|
|
|
chartExtend() {
|
|
|
return {
|
|
|
tooltip: {
|
|
|
- formatter: item => {
|
|
|
- return [item[0].axisValueLabel, ...item.map(d => {
|
|
|
- return `<br/>${d.marker}${d.seriesName}: ${this.$helpers.numeral(d.value[1]).format('0,0.00')}`
|
|
|
- })].join('')
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ formatter: (item) => {
|
|
|
+ return [
|
|
|
+ item[0].axisValueLabel,
|
|
|
+ ...item.map((d) => {
|
|
|
+ return `<br/>${d.marker}${
|
|
|
+ d.seriesName
|
|
|
+ }: ${this.$helpers.numeral(d.value[1]).format("0,0.00")}`;
|
|
|
+ }),
|
|
|
+ ].join("");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
dataZoom() {
|
|
|
return [
|
|
|
{
|
|
|
- type: 'slider',
|
|
|
+ type: "slider",
|
|
|
start: 50,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ]
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ];
|
|
|
},
|
|
|
chartData() {
|
|
|
- const values = Object.values(this.items)
|
|
|
- const months = {}
|
|
|
+ const values = Object.values(this.items);
|
|
|
+ const months = {};
|
|
|
for (const item of values) {
|
|
|
- for (const row of (item.indexMonthData || [])) {
|
|
|
- const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
|
|
|
+ for (const row of item.indexMonthData || []) {
|
|
|
+ const key = this.$helpers.dayjs(row.month).format("YYYY-MM-DD");
|
|
|
if (!months[key]) {
|
|
|
months[key] = {
|
|
|
- '日期': key,
|
|
|
- }
|
|
|
+ 日期: key,
|
|
|
+ };
|
|
|
}
|
|
|
- months[key][item.title] = row.percent
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
- columns: ['日期', ...values.map(item => item.title)],
|
|
|
- rows: Object.values(months)
|
|
|
- }
|
|
|
+ columns: ["日期", ...values.map((item) => item.title)],
|
|
|
+ rows: Object.values(months),
|
|
|
+ };
|
|
|
},
|
|
|
dataEmpty() {
|
|
|
- return !this.chartData.rows.length
|
|
|
+ return !this.chartData.rows.length;
|
|
|
},
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
- active: 'SHOULD_INCOME_MONEY',
|
|
|
- }
|
|
|
+ active: "SHOULD_INCOME_MONEY",
|
|
|
+ };
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- // .statistic{
|
|
|
- // /deep/ .statistic-content{
|
|
|
- // cursor: pointer;
|
|
|
- // &.active > span{
|
|
|
- // color: #14928a !important;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
+// .statistic{
|
|
|
+// /deep/ .statistic-content{
|
|
|
+// cursor: pointer;
|
|
|
+// &.active > span{
|
|
|
+// color: #14928a !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
</style>
|
mo