mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update home

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
2024-04-18 17:01:10 +08:00
parent 67bfb9981a
commit a262fb96d4
55 changed files with 3836 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/views/dashboard/charts/Bipv.vue Normal file
View File

@@ -0,0 +1,89 @@
<!--
filename: Bipv.vue
author: liubin
date: 2024-04-10 15:39:54
description:
-->
<template>
<right-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
:vHeight="20.5"
class="bipv-chart"
/>
</template>
<script>
import RightChartBase from "./RightChartBase.vue";
export default {
name: "BipvChart",
components: { RightChartBase },
data() {
const year = new Date().getFullYear();
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
legend: [
{ label: `${year}年目标值`, color: "#f3c000" },
{ label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" },
],
xAxis: cities,
};
},
computed: {
series() {
const bipvOutput = this.$store.getters.home.bipvOutput;
// const bipvTarget = this.$store.getters.home.bipvTarget;
if (
!bipvOutput ||
!bipvOutput.current ||
!bipvOutput.previous ||
!bipvOutput.target
) {
return [
{
name: "样例数据--2024年目标值",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "样例数据--2023年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "样例数据--2024年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
];
}
return [
{
name: `${new Date().getFullYear()}年目标值`,
data: bipvOutput.target,
},
{
name: `${new Date().getFullYear() - 1}年`,
data: bipvOutput.previous,
},
{
name: `${new Date().getFullYear()}年`,
data: bipvOutput.current,
},
];
},
},
};
</script>
<style scoped lang="scss"></style>

70
src/views/dashboard/charts/ChipInvest.vue Normal file
View File

@@ -0,0 +1,70 @@
<!--
filename: chip-invest.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<left-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
class="chip-invest-chart"
/>
</template>
<script>
import LeftChartBase from "./LeftChartBase.vue";
export default {
name: "chip-investChart",
components: { LeftChartBase },
data() {
const year = new Date().getFullYear();
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
legend: [
{ label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" },
],
xAxis: cities,
};
},
computed: {
series() {
const chipInvest = this.$store.getters.home.chipInvest;
console.log("FTO ==> ", chipInvest);
if (!chipInvest || !chipInvest.current || !chipInvest.previous) {
return [
{
name: "样例数据--2023年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "样例数据--2024年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
];
}
return [
{
name: `${new Date().getFullYear() - 1}年`,
data: chipInvest.previous,
},
{
name: `${new Date().getFullYear()}年`,
data: chipInvest.current,
},
];
},
},
};
</script>

231
src/views/dashboard/charts/ChipYield.vue Normal file
View File

@@ -0,0 +1,231 @@
<!--
filename: ChipYield.vue
author: liubin
date: 2024-04-11 10:46:47
description:
-->
<template>
<div class="chip-yield">
<chip-yield-chart :factory="activeLoc" />
<section class="right-part">
<div class="yield-location">
<section class="btn-group">
<button
@click="activeLoc = '1'"
:class="activeLoc === '1' ? 'active' : ''"
>
成都
</button>
<button
@click="activeLoc = '2'"
:class="activeLoc === '2' ? 'active' : ''"
>
邯郸
</button>
<button
@click="activeLoc = '3'"
:class="activeLoc === '3' ? 'active' : ''"
>
株洲
</button>
<button
@click="activeLoc = '4'"
:class="activeLoc === '4' ? 'active' : ''"
>
瑞昌
</button>
</section>
<section class="btn-group">
<button
@click="activeLoc = '5'"
:class="activeLoc === '5' ? 'active' : ''"
class="fixwidth"
>
佳木斯
</button>
<button
@click="activeLoc = '6'"
:class="activeLoc === '6' ? 'active' : ''"
>
凯盛光伏
</button>
<button
@click="activeLoc = '7'"
:class="activeLoc === '7' ? 'active' : ''"
>
蚌埠兴科
</button>
</section>
</div>
<div class="yield-summary">
<div class="legend">
<span class="legend-label">2024年累计</span>
<span class="legend-value deep-green">{{ output.current }}</span>
</div>
<div class="legend">
<span class="legend-label">2024年目标</span>
<span class="legend-value">{{ output.target }}</span>
</div>
<div class="legend">
<span class="legend-label">2023年累计</span>
<span class="legend-value deep-blue">{{ output.previous }}</span>
</div>
</div>
</section>
</div>
</template>
<script>
import ChipYieldChart from "./ChipYieldChart.vue";
export default {
name: "ChipYield",
components: { ChipYieldChart },
props: {},
data() {
return {
activeLoc: "1",
};
},
computed: {
output() {
// ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]
const chipOutput = this.$store.getters.home.chipOutput;
if (
!chipOutput ||
!chipOutput.target ||
!chipOutput.current ||
!chipOutput.previous
)
return {
target: 0,
current: 0,
previous: 0,
};
const index =
this.activeLoc == "1"
? 4
: this.activeLoc == "2"
? 1
: this.activeLoc == "3"
? 2
: this.activeLoc == "4"
? 0
: this.activeLoc == "5"
? 3
: this.activeLoc == "6"
? 5
: 6;
return {
target: parseInt(chipOutput.target[index]).toLocaleString(),
current: parseInt(chipOutput.current[index]).toLocaleString(),
previous: parseInt(chipOutput.previous[index]).toLocaleString(),
};
},
},
};
</script>
<style scoped lang="scss">
.chip-yield {
height: 0;
flex: 1;
display: flex;
gap: 12px;
.yield-location {
margin-top: 2.2vh;
.btn-group {
margin-top: 8px;
display: flex;
border-radius: 4px;
overflow: hidden;
button {
flex: 1;
appearance: none;
outline: none;
border: none;
cursor: pointer;
background: #01306c;
color: #fff;
padding: 8px 6px;
font-size: 0.63vw;
position: relative;
}
button.fixwidth {
flex: unset;
width: 2.765vw;
}
button:not(:first-child)::before {
content: "";
display: inline-block;
width: 2px;
height: 60%;
background: #052141;
position: absolute;
top: 20%;
left: -1px;
}
button.active {
background: #1d74d8;
}
}
}
.yield-summary {
margin-top: 3vh;
display: grid;
gap: 0.56vw;
grid-auto-rows: 40px;
grid-template-columns: 1fr 1fr;
.legend {
border-radius: 4px;
padding: 1px;
display: flex;
flex-direction: column;
font-size: 0.725vw;
padding-left: 0.88vw;
position: relative;
&::before {
content: "";
position: absolute;
top: 20%;
left: 0;
width: 0.52vw;
height: 0.52vw;
border-radius: 2px;
background: #ccc;
display: inline-block;
}
&:first-child::before {
background: #11f0e8;
}
&:nth-child(2)::before {
background: #003982;
}
&:last-child::before {
background: #0551c7;
}
.deep-blue {
color: #0551c7;
}
.deep-green {
color: #11f0e8;
}
}
}
}
</style>

269
src/views/dashboard/charts/ChipYieldChart.vue Normal file
View File

@@ -0,0 +1,269 @@
<!--
filename: ChipYield.vue
author: liubin
date: 2024-04-11 10:46:47
description:
-->
<template>
<chart-container class="chip-yield-chart" :noScroll="true">
<div
ref="chart"
style="width: 10vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container>
</template>
<script>
import ChartContainerVue from "../../components/ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
import screenfull from "screenfull";
export default {
name: "ChipYield",
components: { ChartContainer: ChartContainerVue },
mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 22,
},
factory: {
type: String,
default: "1",
},
},
data() {
const year = new Date().getFullYear();
return {
isFullscreen: false,
options: {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
tooltip: {},
title: {
text: "0%",
left: "48%",
top: "40%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${year}年累计产出\u2002`,
subtextStyle: {
fontSize: 12,
fontWeight: 100,
color: "#fffd",
align: "right",
},
},
series: [
// 背景 series - 2024计划
{
type: "pie",
name: `${year}目标`,
radius: ["70%", "85%"],
center: ["50%", "52%"],
emptyCircleStyle: {
color: "#042c5f33",
},
},
// 数据 series - 2024累计
{
type: "pie",
radius: ["70%", "85%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
// position: "center",
},
labelLine: {
show: false,
},
data: [
{
value: 90,
name: `${year}累计产出`,
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#4CF0E811" },
{ offset: 1, color: "#4CF0E8" },
],
},
},
},
{
value: 20,
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
},
],
},
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["55%", "70%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: 90,
name: `${year - 1}累计产出`,
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#1065ff66" },
{ offset: 1, color: "#1065ff" },
],
},
},
},
{
value: 0,
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
},
],
},
],
},
};
},
computed: {
output() {
const chipOutput = this.$store.getters.home.chipOutput;
if (
!chipOutput ||
!chipOutput.target ||
!chipOutput.current ||
!chipOutput.previous
)
return {
target: 0,
current: 0,
previous: 0,
};
const index =
this.factory == "1"
? 4
: this.factory == "2"
? 1
: this.factory == "3"
? 2
: this.factory == "4"
? 0
: this.factory == "5"
? 3
: this.factory == "6"
? 5
: 6;
return {
target: chipOutput.target[index], // parseInt(chipOutput.target[index]).toLocaleString(),
current: chipOutput.current[index], // parseInt(chipOutput.current[index]).toLocaleString(),
previous: chipOutput.previous[index], // parseInt(chipOutput.previous[index]).toLocaleString(),
};
},
actualOptions() {
const options = JSON.parse(JSON.stringify(this.options));
// 标题
if (!this.output.target) options.title.text = "0%";
else
options.title.text =
(this.output.current / this.output.target) * 100 + "%";
// 外环
if (
this.output.current == this.output.target &&
this.output.current == 0
) {
options.series[1].data[0].value = 0;
options.series[1].data[1].value = 100;
} else {
options.series[1].data[0].value = this.output.current;
options.series[1].data[1].value =
this.output.target - this.output.current;
}
// 内环
if (this.output.previous == 0) {
options.series[2].data[0].value = 0;
options.series[2].data[1].value = 100;
} else {
options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0;
}
return options;
},
},
watch: {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.options.title.top = val ? "40%" : "37%";
this.options.title.textStyle.fontSize = val ? 48 : 32;
this.options.title.subtextStyle.fontSize = val ? 18 : 12;
// this.options.title.subtextStyle.fontSize = val ? 18 : 14;
this.initOptions(this.actualOptions);
},
factory(val) {
this.initOptions(this.actualOptions);
},
},
mounted() {
console.log("mounted", this.actualOptions);
/** 清除 MIN_WIDTH, 此处比较特殊, 需要这么一步, 去除 chart mixin 的滚动条功能 */
this.MIN_WIDTH = 0;
this.initOptions(this.actualOptions);
debugger;
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
};
</script>
<style scoped lang="scss">
.chip-yield-chart {
height: 100%;
flex: 1;
overflow: visible;
}
</style>

68
src/views/dashboard/charts/Fto.vue Normal file
View File

@@ -0,0 +1,68 @@
<!--
filename: fto.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<left-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
class="fto-chart"
/>
</template>
<script>
import LeftChartBase from "./LeftChartBase.vue";
export default {
name: "FtoChart",
components: { LeftChartBase },
data() {
const year = new Date().getFullYear();
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
legend: [
{ label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" },
],
xAxis: cities,
};
},
computed: {
series() {
const ftoInvest = this.$store.getters.home.ftoInvest;
if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
return [
{
name: "样例数据--2023年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "样例数据--2024年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
];
}
return [
{
name: `${new Date().getFullYear() - 1}年`,
data: ftoInvest.previous,
},
{
name: `${new Date().getFullYear()}年`,
data: ftoInvest.current,
},
];
},
},
};
</script>

260
src/views/dashboard/charts/LeftChartBase.vue Normal file
View File

@@ -0,0 +1,260 @@
<!--
filename: left-chart-base
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<chart-container class="left-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div>
<div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainerVue from "../../components/ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
export default {
name: "LeftChartBase",
components: {
ChartContainer: ChartContainerVue,
},
mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
},
data() {
return {
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "3%",
right: "4%",
bottom: "0",
top: "15%",
containLabel: true,
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: '', // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: '', // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
],
},
};
},
watch: {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.actualOptions);
},
series(val) {
if (!val) {
this.initOptions(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name;
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
},
},
mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
};
</script>
<style scoped lang="scss">
.left-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::before {
content: "";
display: inline-block;
// width: 10px;
// height: 10px;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
/** add more */
// .legend-item:nth-child(3):before {
// background-color: #f7f1;
// }
}
</style>

325
src/views/dashboard/charts/RightChartBase.vue Normal file
View File

@@ -0,0 +1,325 @@
<!--
filename: right-chart-base
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<chart-container class="right-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div>
<div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainerVue from "../../components/ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
export default {
name: "RightChartBase",
components: {
ChartContainer: ChartContainerVue,
},
mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
},
data() {
return {
isFullscreen: false,
options: {
grid: {
left: "3%",
right: "4%",
bottom: "0",
top: "18%",
containLabel: true,
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#f3c000", // 0% 处的颜色
},
{
offset: 0.55,
color: "#f3c00033",
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // "2023年",
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年",
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[2].data,
},
],
},
actualOptions: null,
};
},
watch: {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.actualOptions);
},
series(val) {
if (!val) {
this.initOptions(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name;
actualOptions.series[2].data = val[2].data;
actualOptions.series[2].name = val[2].name;
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
},
},
mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
};
</script>
<style scoped lang="scss">
.right-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::before {
content: "";
display: inline-block;
// width: 10px;
// height: 10px;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(2):before {
background-color: #12f7f1;
}
.legend-item:nth-child(3):before {
background-color: #58adfa;
}
/** add more */
// .legend-item:nth-child(3):before {
// background-color: #f7f1;
// }
}
</style>

84
src/views/dashboard/charts/StdChart.vue Normal file
View File

@@ -0,0 +1,84 @@
<!--
filename: Bipv.vue
author: liubin
date: 2024-04-10 15:39:54
description:
-->
<template>
<right-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
:vHeight="20.5"
class="std-chart"
/>
</template>
<script>
import RightChartBase from "./RightChartBase.vue";
export default {
name: "StdChart",
components: { RightChartBase },
data() {
const year = new Date().getFullYear();
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
legend: [
{ label: `${year}年目标值`, color: "#f3c000" },
{ label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" },
],
xAxis: cities,
};
},
computed: {
series() {
const stdOutput = this.$store.getters.home.stdOutput;
if (!stdOutput || !stdOutput.current || !stdOutput.previous) {
return [
{
name: "样例数据--2024年目标值",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "样例数据--2023年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "样例数据--2024年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
];
}
return [
{
name: `${new Date().getFullYear()}年目标值`,
data: stdOutput.target,
},
{
name: `${new Date().getFullYear() - 1}年`,
data: stdOutput.previous,
},
{
name: `${new Date().getFullYear()}年`,
data: stdOutput.current,
},
];
},
},
};
</script>
<style scoped lang="scss"></style>