update 产量驾驶舱

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-04-25 14:55:23 +08:00
parent 30af8faa49
commit bb399835e7
11 changed files with 371 additions and 52 deletions

View File

@ -6,7 +6,7 @@
-->
<template>
<DoubleRingWrapperVue />
<DoubleRingWrapperVue :data-source="dataBundle" :period="period" />
</template>
<script>
@ -15,9 +15,14 @@ import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
export default {
name: "BipvOutput",
components: { DoubleRingWrapperVue },
props: {},
props: {
period: {
type: String,
default: "日",
},
},
data() {
return {};
return { dataBundle: null };
},
};
</script>

View File

@ -0,0 +1,121 @@
<!--
filename: FtoInvest.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<bar-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
class="fto-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}${month}`, color: "#12f7f1" },
{ label: `${year - 1}${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 template =
this.period == "日" || this.period == "周"
? [
{
name: "样例数据--2023年",
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)
),
},
];
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>

View File

@ -6,7 +6,7 @@
-->
<template>
<DoubleRingWrapperVue />
<DoubleRingWrapperVue :data-source="dataBundle" :period="period" />
</template>
<script>
@ -15,9 +15,14 @@ import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
export default {
name: "ChipOutput",
components: { DoubleRingWrapperVue },
props: {},
props: {
period: {
type: String,
default: "日",
},
},
data() {
return {};
return { dataBundle: null };
},
};
</script>

View File

@ -9,7 +9,10 @@
<div class="city-data">
<div class="headquarter">
<div class="inner-shadow w-1"></div>
<div class="inner-shadow flex-1">凯盛光伏</div>
<div class="inner-shadow flex-1 flex">
<CityName value="凯盛光伏" />
<CityValue value="32212" horizontal :period="period" />
</div>
<div class="inner-shadow w-1"></div>
</div>
@ -27,9 +30,16 @@
<script>
import CityItemVue from "./CityItem.vue";
import CityNameVue from "./CityName.vue";
import CityValueVue from "./CityValue.vue";
export default {
name: "CityData",
components: { CityItem: CityItemVue },
components: {
CityItem: CityItemVue,
CityName: CityNameVue,
CityValue: CityValueVue,
},
props: {
dataSource: {
type: Object,
@ -77,6 +87,10 @@ export default {
width: 70px;
}
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
@ -90,7 +104,6 @@ export default {
flex: 3;
display: grid;
grid-template-columns: repeat(2, 1fr);
background: #ccc3;
gap: 8px;
}
</style>

View File

@ -7,44 +7,22 @@
<template>
<div class="city-item inner-shadow">
<div class="item-location">
<img src="#" alt="" />
<span>{{ location }}</span>
</div>
<div class="item-value" style="position: relative; flex: 1">
<div
class=""
style="
width: 100%;
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-25%);
overflow: hidden;
"
>
<GradientTextVue :text="'' + value" />
</div>
<span
style="
width: 100%;
font-size: 14px;
line-height: 16px;
position: absolute;
top: 56%;
left: 24%;
"
>{{ period == "日" ? "今日产出" : "本周产出" }}</span
>
</div>
<CityName :value="location" />
<CityValue :value="value+''" :period="period" />
</div>
</template>
<script>
import CityNameVue from "./CityName.vue";
import CityValueVue from "./CityValue.vue";
import GradientTextVue from "./GradientText.vue";
export default {
name: "CityItem",
components: { GradientTextVue },
components: {
GradientTextVue,
CityName: CityNameVue,
CityValue: CityValueVue,
},
props: {
location: {
type: String,
@ -71,7 +49,6 @@ export default {
<style scoped lang="scss">
.city-item {
display: flex;
gap: 8px;
}
.inner-shadow {

View File

@ -0,0 +1,55 @@
<!--
filename: CityName.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<div class="city-name">
<img :src="Icon" alt="city icon" />
<span>{{ value }}</span>
</div>
</template>
<script>
import Icon from "./icon.png";
export default {
name: "CityName",
props: {
value: {
type: String,
default: "",
},
},
data() {
return { Icon };
},
};
</script>
<style scoped>
.city-name {
min-width: 80px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 8px;
flex: 1;
}
img {
/* width: 32px; */
width: 1.543vw;
}
span {
/* font-size: 12px; */
font-size: 0.77vw;
letter-spacing: 2px;
text-align: center;
}
</style>

View File

@ -0,0 +1,127 @@
<!--
filename: CityValue.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<div class="city-value" :class="[horizontal ? 'horizontal' : '']">
<span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
period == "周" ? "本周产出" : "今日产出"
}}</span>
<span class="value" :class="[horizontal ? 'horizontal' : '']">{{
value | numberFilter
}}</span>
<!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
</div>
</template>
<script>
import GradientTextVue from "./GradientText.vue";
export default {
name: "CityValue",
components: { GradientTextVue },
props: {
period: {
type: String,
default: "日",
},
value: {
type: String,
default: "",
},
horizontal: {
type: Boolean,
default: false,
},
},
filters: {
numberFilter(value) {
if (value != null && !isNaN(parseInt(value))) {
return parseInt(value).toLocaleString();
} else {
return value;
}
},
},
data() {
return {};
},
};
</script>
<style scoped>
.city-value {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 8px;
flex: 2;
position: relative;
}
.city-value.horizontal {
flex-direction: row;
}
.city-value::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
transparent 20%,
#fff 50%,
transparent 80%
);
}
span.hint {
margin: 0 0.77vw;
font-size: 0.77vw;
order: 2;
/* margin: 0 12px;
width: 32px;
font-size: 12px; */
}
span.hint.horizontal {
margin: 0 1.235vw;
width: 1.543vw;
order: 1;
font-size: 0.77vw;
/* margin: 0 12px;
width: 32px;
font-size: 12px; */
}
.value {
color: #4dd2fe;
text-align: center;
font-size: 1.132vw;
order: 1;
}
.value.horizontal {
text-align: left;
flex: 1;
font-size: 1.543vw;
order: 2;
}
svg,
.value {
width: 100px;
order: 1;
}
.value.horizontal,
svg.horizontal {
order: 2;
}
</style>

View File

@ -6,7 +6,7 @@
-->
<template>
<svg height="32" width="100%">
<svg :height="size + 8" width="100%">
<defs>
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
@ -15,9 +15,13 @@
</defs>
<text
x="0"
y="24"
:y="size"
fill="url(#smoke-text)"
:style="{ fontSize: '24px', letterSpacing: spacing || '2px' }"
:style="{
fontSize: `${size}px`,
letterSpacing: spacing || '2px',
fontFamily: 'Calibri, Verdana, sans-serif',
}"
>
{{ text | numberFilter }}
</text>
@ -37,6 +41,10 @@ export default {
type: String,
default: "1px",
},
size: {
type: Number,
default: 24,
},
},
filters: {
numberFilter(value) {

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -42,6 +42,14 @@ export default {
period: "日",
};
},
// mounted() {
// document.body.style.minHeight = "1024px";
// document.body.style.minWidth = "1550px";
// },
// destroyed() {
// document.body.style.minHeight = "1024px";
// document.body.style.minWidth = "1550px";
// },
};
</script>

View File

@ -12,21 +12,19 @@
<std-output :period="period" />
</db-container>
<db-container class="chip-yield" title="芯片产出" icon="chip2">
<chip-output />
<chip-output :period="period" />
</db-container>
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
<bipv-output />
<bipv-output :period="period" />
</db-container>
</section>
<section class="bottom flex">
<db-container class="fto-involve" title="FTO投入">
<fto-invest :period="period" />
</db-container>
<db-container
class="chip-involve"
title="芯片投入"
icon="chip"
></db-container>
<db-container class="chip-involve" title="芯片投入" icon="chip">
<chip-invest :period="period" />
</db-container>
</section>
</div>
</template>
@ -37,6 +35,7 @@ import StdOutputVue from "../components/charts/StdOutput.vue";
import ChipOutputVue from "../components/charts/ChipOutput.vue";
import FtoInvestVue from "../components/charts/FtoInvest.vue";
import BipvOutputVue from "../components/charts/BipvOutput.vue";
import ChipInvestVue from "../components/charts/ChipInvest.vue";
export default {
name: "YieldCopilot",
@ -45,7 +44,8 @@ export default {
StdOutput: StdOutputVue,
ChipOutput: ChipOutputVue,
BipvOutput: BipvOutputVue,
FtoInvest: FtoInvestVue
FtoInvest: FtoInvestVue,
ChipInvest: ChipInvestVue,
},
props: {
period: {