update stdoutput
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
f3e02b01f1
commit
7c479072e0
23
src/mixins/fullscreen.js
Normal file
23
src/mixins/fullscreen.js
Normal file
@ -0,0 +1,23 @@
|
||||
import screenfull from "screenfull";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
// 暴露一个全屏状态改变的回调函数
|
||||
this.fullscreenCallback(val);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on("change", () => {
|
||||
this.isFullscreen = screenfull.isFullscreen;
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -100,18 +100,31 @@ export default {
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
// &::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;
|
||||
// }
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 0.11415vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center , #024798 2%, #024798 30%, transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::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;
|
||||
|
||||
@ -26,7 +26,11 @@
|
||||
/>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="export-btn" />
|
||||
<button type="button" class="fullscreen-btn" />
|
||||
<button
|
||||
type="button"
|
||||
class="fullscreen-btn"
|
||||
@click="toggleFullScreen"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div class="page-title">{{ active }}驾驶舱</div>
|
||||
@ -35,6 +39,8 @@
|
||||
|
||||
<script>
|
||||
import CopilotButton from "./button.vue";
|
||||
import screenfull from "screenfull";
|
||||
|
||||
export default {
|
||||
name: "CopilotHeader",
|
||||
components: { CopilotButton },
|
||||
@ -47,10 +53,22 @@ export default {
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
isFullscreen: false,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
toggleFullScreen() {
|
||||
this.isFullscreen = !this.isFullscreen;
|
||||
|
||||
screenfull.toggle(document.querySelector(".copilot-layout"));
|
||||
// 矫正宽度
|
||||
// const el = document.querySelector(".copilot-layout");
|
||||
// el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
|
||||
// el.style.left = this.isFullscreen ? "0" : "54px";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
33
src/views/copilot/components/charts/BipvOutput.vue
Normal file
33
src/views/copilot/components/charts/BipvOutput.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
filename: BipvOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "BipvOutput",
|
||||
components: { DoubleRingWrapperVue },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
33
src/views/copilot/components/charts/ChipOutput.vue
Normal file
33
src/views/copilot/components/charts/ChipOutput.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
filename: ChipOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "ChipOutput",
|
||||
components: { DoubleRingWrapperVue },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
@ -6,56 +6,25 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="std-output">
|
||||
<copilot-select :options="cityOptions" />
|
||||
<div class="flex-1 stretch">f</div>
|
||||
</div>
|
||||
<DoubleRingWrapperVue />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopilotSelect from "../select.vue";
|
||||
import fetcher from "./std-output-data";
|
||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "StdOutput",
|
||||
components: { CopilotSelect },
|
||||
components: { DoubleRingWrapperVue },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
cityOptions: [
|
||||
"成都",
|
||||
"邯郸",
|
||||
"株洲",
|
||||
"瑞昌",
|
||||
"佳木斯",
|
||||
"凯盛光伏",
|
||||
"蚌埠兴科",
|
||||
],
|
||||
};
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
fetcher.getData().then((res) => {
|
||||
console.log("getData--->", res, fetcher.options);
|
||||
});
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.std-output {
|
||||
height: 100%;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
background: #f001;
|
||||
}
|
||||
|
||||
.stretch {
|
||||
|
||||
119
src/views/copilot/components/charts/base/DoubleRingChart.vue
Normal file
119
src/views/copilot/components/charts/base/DoubleRingChart.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<!--
|
||||
filename: DoubleRingChart.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 11:01:55
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="double-ring-chart">
|
||||
<div ref="chart" class="double-ring-chart__container"></div>
|
||||
<!-- :style="{ height: vHeight + 'vh' }" -->
|
||||
<div class="double-ring-chart__legend">
|
||||
<div v-for="item in legendItems" :key="item.label" class="legend-item">
|
||||
<span class="legend-item__label">{{ item.label }}</span>
|
||||
<span class="legend-item__value">{{
|
||||
item.value.toLocaleString()
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartMixin from "@/mixins/chart.js";
|
||||
import fullscreenMixin from "@/mixins/fullscreen.js";
|
||||
import options from "./double-ring-chart-options";
|
||||
|
||||
export default {
|
||||
name: "DoubleRingChart",
|
||||
mixins: [chartMixin, fullscreenMixin],
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
legendItems: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ label: "2023年累计", value: 88002 },
|
||||
{ label: "2024年累计", value: 88002 },
|
||||
{ label: "2025年累计", value: 88002 },
|
||||
],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.initOptions(options);
|
||||
},
|
||||
methods: {
|
||||
// fullscreen mixin 需要的回调
|
||||
fullscreenCallback(isFullscreen) {
|
||||
console.log("isFullscreen--->", isFullscreen);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.double-ring-chart {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.double-ring-chart__container {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.double-ring-chart__legend {
|
||||
padding: 12px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.legend-item__label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.legend-item__label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ccc;
|
||||
border-radius: 2px;
|
||||
top: 6px;
|
||||
left: -18px;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1) .legend-item__label::before {
|
||||
background: #0f65ff;
|
||||
}
|
||||
.legend-item:nth-child(1) .legend-item__value {
|
||||
color: #0f65ff;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2) .legend-item__label::before {
|
||||
background: #12fff5;
|
||||
}
|
||||
.legend-item:nth-child(2) .legend-item__value {
|
||||
color: #12fff5;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3) .legend-item__label::before {
|
||||
background: #003982;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
filename: DoubleRingWrapper.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="double-ring-wrapper">
|
||||
<copilot-select :options="cityOptions" />
|
||||
<div class="flex-1 stretch">
|
||||
<DoubleRingChartVue />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopilotSelect from "../../select.vue";
|
||||
import fetcher from "./fetcherDoubleRing";
|
||||
import DoubleRingChartVue from "./DoubleRingChart.vue";
|
||||
|
||||
export default {
|
||||
name: "DoubleRingWrapper",
|
||||
components: { CopilotSelect, DoubleRingChartVue },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
cityOptions: [
|
||||
"成都",
|
||||
"邯郸",
|
||||
"株洲",
|
||||
"瑞昌",
|
||||
"佳木斯",
|
||||
"凯盛光伏",
|
||||
"蚌埠兴科",
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
fetcher.getData().then((res) => {
|
||||
console.log("getData--->", res);
|
||||
});
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.double-ring-wrapper {
|
||||
height: 100%;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,127 @@
|
||||
export default {
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {},
|
||||
title: {
|
||||
text: "78%",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 32,
|
||||
color: "#fffd",
|
||||
},
|
||||
subtext: "\u200224年累计产出\u2002",
|
||||
subtextStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 100,
|
||||
color: "#fffd",
|
||||
align: "right",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
// 背景 series - 2024计划
|
||||
{
|
||||
type: "pie",
|
||||
name: "2024目标",
|
||||
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: "2024累计产出",
|
||||
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: "2023累计产出",
|
||||
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: 20,
|
||||
name: "-",
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1,7 +1,4 @@
|
||||
import options from './double-ring-chart-options';
|
||||
|
||||
export default {
|
||||
options,
|
||||
getData: async function (url) {
|
||||
//
|
||||
return await new Promise((resolve, reject) => {
|
||||
@ -1,122 +0,0 @@
|
||||
export default {
|
||||
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,
|
||||
data: [],
|
||||
},
|
||||
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: "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[0].data,
|
||||
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: [],
|
||||
// data: this.series[1].data,
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -11,16 +11,12 @@
|
||||
<db-container class="std-yield" title="标准组件产出" icon="std">
|
||||
<std-output />
|
||||
</db-container>
|
||||
<db-container
|
||||
class="chip-yield"
|
||||
title="芯片产出"
|
||||
icon="chip2"
|
||||
></db-container>
|
||||
<db-container
|
||||
class="bipv-yield"
|
||||
title="BIPV产出"
|
||||
icon="bipv"
|
||||
></db-container>
|
||||
<db-container class="chip-yield" title="芯片产出" icon="chip2">
|
||||
<chip-output />
|
||||
</db-container>
|
||||
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
|
||||
<bipv-output />
|
||||
</db-container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<db-container class="fto-involve" title="FTO投入"></db-container>
|
||||
@ -36,10 +32,18 @@
|
||||
<script>
|
||||
import Container from "../components/Container.vue";
|
||||
import StdOutputVue from "../components/charts/StdOutput.vue";
|
||||
import ChipOutputVue from "../components/charts/ChipOutput.vue";
|
||||
|
||||
import BipvOutputVue from "../components/charts/BipvOutput.vue";
|
||||
|
||||
export default {
|
||||
name: "YieldCopilot",
|
||||
components: { DbContainer: Container, StdOutput: StdOutputVue },
|
||||
components: {
|
||||
DbContainer: Container,
|
||||
StdOutput: StdOutputVue,
|
||||
ChipOutput: ChipOutputVue,
|
||||
BipvOutput: BipvOutputVue,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
Caricamento…
Fai riferimento in un nuovo problema
Block a user