yudao-init/src/views/copilot/components/charts/ChipInvest.vue
DESKTOP-FUDKNA8\znjsz 517874ffc2 update
2024-04-26 15:44:04 +08:00

107 lines
2.7 KiB
Vue

<!--
filename: FtoInvest.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<bar-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
in="ChipInvest"
class="chip-invest-chart"
/>
</template>
<script>
import BarChartBase from "./base/BarChartBase.vue";
export default {
name: "ChipInvest",
components: { BarChartBase },
data() {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
},
props: {
period: {
type: String,
default: "日",
},
},
computed: {
legend() {
switch (this.period) {
case "日":
return [{ label: "昨日", color: "#12f7f1" }];
case "周":
return [{ label: "本周", color: "#12f7f1" }];
case "月": {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${year}${month}`, color: "#58adfa" },
];
}
case "年": {
const year = new Date().getFullYear();
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
default:
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
},
series() {
const { chipInvest } = this.$store.getters.copilot.yield;
let dataList = null;
switch (this.period) {
case "日":
case "周":
dataList = chipInvest?.current;
break;
default:
dataList = [];
dataList[0] = chipInvest?.pervious;
dataList[1] = chipInvest?.current;
}
return getTemplate(this.period, dataList);
},
},
};
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}` : `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}` : `${year}${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
</script>