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>

129
src/views/dashboard/components/CompanyInfo.vue Normal file
View File

@@ -0,0 +1,129 @@
<!--
filename: CompanyInfo.vue
author: liubin
date: 2024-04-08 15:27:04
description:
-->
<template>
<div class="company-info" :style="styles">
<div class="corner bl"></div>
<div class="corner br"></div>
<h2>{{ info.companyName }}</h2>
<ul>
<li v-for="item in info.items" :key="item.label">
{{ item.label }} {{ item.value | currency }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "CompanyInfo",
components: {},
props: {
info: {
type: Object,
required: true,
default: () => ({}),
},
position: {
type: Object,
required: true,
default: () => ({ x: 0, y: 0 }),
},
},
filters: {
currency(value) {
return value.toLocaleString();
},
},
data() {
return {};
},
computed: {
styles() {
return {
left: `${this.position.x}%`,
top: `${this.position.y}%`,
};
},
},
methods: {},
};
</script>
<style scoped lang="scss">
@font-face {
font-family: 优设标题黑;
src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
}
.company-info {
color: #fff;
background: #4443;
position: absolute;
z-index: 9999;
// padding: 14px;
padding: 0.745vw;
backdrop-filter: blur(2px);
border-radius: 4px;
transform: translate(-50%, -100%);
box-shadow: inset 0 0 12px 2px #fff3;
// 在这里设置一个总的字体大小 不失为一个好的选择
font-size: 1vw;
}
h2 {
margin: 6px 0;
font-family: 优设标题黑;
color: #fff;
// font-size: 24px;
font-size: 1.276em;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
ul {
display: flex;
flex-direction: column;
gap: 6px;
}
li {
font-size: 0.851em;
}
.corner {
position: absolute;
bottom: 0;
// width: 12px;
// height: 12px;
width: 0.639vw;
height: 0.639vw;
border-style: solid;
border-color: transparent;
}
.bl {
left: 0;
border-left: 0.1596vw solid #ffa600;
border-bottom: 0.1596vw solid #ffa600;
// border-left: 3px solid #ffa600;
// border-bottom: 3px solid #ffa600;
}
.br {
right: 0;
// border-right: 3px solid #ffa600;
// border-bottom: 3px solid #ffa600;
border-right: 0.1596vw solid #ffa600;
border-bottom: 0.1596vw solid #ffa600;
}
</style>

203
src/views/dashboard/components/Container.vue Normal file
View File

@@ -0,0 +1,203 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="dashboard-container">
<!-- refresh btn -->
<button
v-if="0"
style="appearance: none; outline: none; border: none; background: none; color:#fff; cursor: pointer; position: absolute; top: 8px; right: 8px"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div v-if="side == 'left'" class="corner bl"></div>
<div v-if="side == 'right'" class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.dashboard-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
// &::after {
// content: "";
// position: absolute;
// display: inline-block;
// width: 60%;
// height: 0.31415vh;
// border-radius: 2px;
// left: 8%;
// bottom: 0;
// background: linear-gradient(to right, #024798, transparent);
// z-index: 0;
// }
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

58
src/views/dashboard/components/ContainerIcon.vue Normal file
View File

@@ -0,0 +1,58 @@
<!--
filename: ContainerIcon.vue
author: liubin
date: 2024-04-09 16:41:36
description:
-->
<template>
<div class="container-icon" :style="bgStyle"></div>
</template>
<script>
import cube from "@/assets/images/homeindex/fto-icon.png";
import chip from "@/assets/images/homeindex/chip-icon.png";
import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
import bipv from "@/assets/images/homeindex/bipv-icon.png";
import std from "@/assets/images/homeindex/std-icon.png";
export default {
name: "ContainerIcon",
components: {},
props: {
icon: {
type: String,
default: "cube",
},
},
data() {
return {};
},
computed: {
bgStyle() {
return {
cube:
"background: url(" + cube + ") no-repeat center center / 100% 100%",
chip:
"background: url(" + chip + ") no-repeat center center / 100% 100%",
chip2:
"background: url(" + chip2 + ") no-repeat center center / 100% 100%",
bipv:
"background: url(" + bipv + ") no-repeat center center / 100% 100%",
std: "background: url(" + std + ") no-repeat center center / 100% 100%",
}[this.icon];
},
},
methods: {},
};
</script>
<style scoped lang="scss">
.container-icon {
// width: 32px;
// height: 32px;
width: 1.701vw;
height: 1.701vw;
background: #ccc2;
}
</style>

102
src/views/dashboard/components/Header.vue Normal file
View File

@@ -0,0 +1,102 @@
<!--
filename: Header.vue
author: liubin
date: 2024-04-09 09:04:12
description:
-->
<template>
<header class="dashboard-header">
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
<h1>发电玻璃智能管控平台地图总览</h1>
<span class="side left">晴转多云 14℃</span>
<span class="side right">23:12|星期一|2023.12.13</span>
</header>
</template>
<script>
import screenfull from "screenfull";
import fullscreenIcon from "@/assets/images/homeindex/fullscreen.png";
import fullscreenExitIcon from "@/assets/images/homeindex/exit-fullscreen.png";
export default {
name: "DashboardHeader",
components: {},
props: {},
data() {
return {
isFullscreen: false,
};
},
computed: {
btnStyle() {
return {
backgroundImage: `url(${
this.isFullscreen ? fullscreenExitIcon : fullscreenIcon
})`,
};
},
},
methods: {
toggleFullscreen() {
screenfull.toggle();
this.isFullscreen = !this.isFullscreen;
// 矫正宽度
const el = document.querySelector(".dashboard-factory-all");
el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
el.style.left = this.isFullscreen ? "0" : "54px";
},
},
};
</script>
<style scoped lang="scss">
.dashboard-header {
height: 8vh;
background: url(../../../assets/images/homeindex/header-bg.png) no-repeat 0 0 /
100% 100%;
position: relative;
display: grid;
place-content: center;
.btn {
cursor: pointer;
position: absolute;
width: 2vw;
height: 2vw;
top: 50%;
right: 1.18vw;
background-size: 100% 100%;
background-position: 0 0;
}
}
h1 {
// font-size: 32px;
font-size: 1.65vw;
// line-height: 45px;
line-height: 1.25;
letter-spacing: 0.32vw;
user-select: none;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}
.side {
position: absolute;
font-size: 1.18vw;
// line-height: 24px;
line-height: 1.277vw;
letter-spacing: 2px;
color: #69b4ff;
}
.left {
left: 22vw;
top: 4.9vh;
}
.right {
right: 15vw;
top: 4.9vh;
}
</style>