update 产量驾驶舱
This commit is contained in:
parent
30af8faa49
commit
bb399835e7
@ -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>
|
||||
|
121
src/views/copilot/components/charts/ChipInvest.vue
Normal file
121
src/views/copilot/components/charts/ChipInvest.vue
Normal 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>
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
55
src/views/copilot/components/charts/base/CityName.vue
Normal file
55
src/views/copilot/components/charts/base/CityName.vue
Normal 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>
|
127
src/views/copilot/components/charts/base/CityValue.vue
Normal file
127
src/views/copilot/components/charts/base/CityValue.vue
Normal 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>
|
@ -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) {
|
||||
|
BIN
src/views/copilot/components/charts/base/icon.png
Normal file
BIN
src/views/copilot/components/charts/base/icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.0 KiB |
@ -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>
|
||||
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user