mt-fe-group
/
yudao-init
7
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

update stdoutput

projects/mescc/lb-home-map
DESKTOP-FUDKNA8\znjsz 5 місяці тому
джерело
f3e02b01f1
коміт
7c479072e0
12 змінених файлів з 466 додано та 186 видалено
Розділений перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  1. +23
    -0
      src/mixins/fullscreen.js
  2. +25
    -12
      src/views/copilot/components/Container.vue
  3. +21
    -3
      src/views/copilot/components/CopilotHeader.vue
  4. +33
    -0
      src/views/copilot/components/charts/BipvOutput.vue
  5. +33
    -0
      src/views/copilot/components/charts/ChipOutput.vue
  6. +4
    -35
      src/views/copilot/components/charts/StdOutput.vue
  7. +119
    -0
      src/views/copilot/components/charts/base/DoubleRingChart.vue
  8. +66
    -0
      src/views/copilot/components/charts/base/DoubleRingWrapper.vue
  9. +127
    -0
      src/views/copilot/components/charts/base/double-ring-chart-options.js
  10. +0
    -3
      src/views/copilot/components/charts/base/fetcherDoubleRing.js
  11. +0
    -122
      src/views/copilot/components/charts/double-ring-chart-options.js
  12. +15
    -11
      src/views/copilot/yield/index.vue

+ 23
- 0
src/mixins/fullscreen.js Переглянути файл

@@ -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;
});
}
},
};

+ 25
- 12
src/views/copilot/components/Container.vue Переглянути файл

@@ -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;


+ 21
- 3
src/views/copilot/components/CopilotHeader.vue Переглянути файл

@@ -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
- 0
src/views/copilot/components/charts/BipvOutput.vue Переглянути файл

@@ -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
- 0
src/views/copilot/components/charts/ChipOutput.vue Переглянути файл

@@ -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>

+ 4
- 35
src/views/copilot/components/charts/StdOutput.vue Переглянути файл

@@ -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
- 0
src/views/copilot/components/charts/base/DoubleRingChart.vue Переглянути файл

@@ -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>

+ 66
- 0
src/views/copilot/components/charts/base/DoubleRingWrapper.vue Переглянути файл

@@ -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>

+ 127
- 0
src/views/copilot/components/charts/base/double-ring-chart-options.js Переглянути файл

@@ -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 },
},
],
},
],
};

src/views/copilot/components/charts/std-output-data.js → src/views/copilot/components/charts/base/fetcherDoubleRing.js Переглянути файл

@@ -1,7 +1,4 @@
import options from './double-ring-chart-options';

export default {
options,
getData: async function (url) {
//
return await new Promise((resolve, reject) => {

+ 0
- 122
src/views/copilot/components/charts/double-ring-chart-options.js Переглянути файл

@@ -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,
},
],
};

+ 15
- 11
src/views/copilot/yield/index.vue Переглянути файл

@@ -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 {};


Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти