mt-fe-group/yudao-init
8
0
派生 0
代码 工单 合并请求 版本发布 百科 动态

update chip yield chart

浏览代码
这个提交包含在：
DESKTOP-FUDKNA8\znjsz 2024-04-11 14:35:15 +08:00
父节点 11626c5142
当前提交 8bd678cf62
共有 6 个文件被更改，包括 428 次插入 和 11 次删除
显示统计 下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

196
src/views/dashboard/charts/ChipYield.vue 普通文件
查看文件

@ -0,0 +1,196 @@
<!--
filename: ChipYield.vue
author: liubin
date: 2024-04-11 10:46:47
description:
-->
<template>
<div class="chip-yield">
<chip-yield-chart />
<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">40,100</span>
</div>
<div class="legend">
<span class="legend-label">2024年目标</span>
<span class="legend-value">30,100</span>
</div>
<div class="legend">
<span class="legend-label">2023年累计</span>
<span class="legend-value deep-blue">400</span>
</div>
</div>
</section>
</div>
</template>
<script>
import ChipYieldChart from "./ChipYieldChart.vue";
export default {
name: "ChipYield",
components: { ChipYieldChart },
props: {},
data() {
return {
activeLoc: "1",
};
},
};
</script>
<style scoped lang="scss">
.chip-yield {
height: 0;
flex: 1;
background: #c0c1;
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>

194
src/views/dashboard/charts/ChipYieldChart.vue 普通文件
查看文件

@ -0,0 +1,194 @@
<!--
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,
},
},
data() {
return {
isFullscreen: false,
options: {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
tooltip: {},
title: {
text: "78%",
left: "48%",
top: "35%",
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 },
},
],
},
],
},
};
},
watch: {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.options.title.top = val ? "40%" : "35%";
this.options.title.textStyle.fontSize = val ? 48 : 32;
this.options.title.subtextStyle.fontSize = val ? 18 : 14;
this.initOptions(this.options);
},
},
mounted() {
/** 清除 MIN_WIDTH, 此处比较特殊, 需要这么一步, 去除 chart mixin 的滚动条功能 */
this.MIN_WIDTH = 0;
this.initOptions(this.options);
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>

14
src/views/dashboard/components/ChartContainer.vue
查看文件

@ -7,7 +7,7 @@
-->
<template>
<div class="chart-container">
<div class="chart-container" :class="{ 'no-scroll': noScroll }">
<slot />
</div>
</template>
@ -16,7 +16,12 @@
export default {
name: "ChartContainer",
components: {},
props: {},
props: {
noScroll: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
@ -32,6 +37,11 @@ export default {
overflow-x: scroll;
}
.no-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;

13
src/views/dashboard/components/Container.vue
查看文件

@ -69,6 +69,19 @@ export default {
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;

12
src/views/dashboard/mixins/chart.js
查看文件

@ -9,18 +9,21 @@ function __resizeHandler(entries) {
: entry.contentBoxSize;
this.chart_mixin_chartInstance.resize({
width:
contentBoxSize.inlineSize < 400 ? 400 : contentBoxSize.inlineSize,
contentBoxSize.inlineSize < this.MIN_WIDTH
? this.MIN_WIDTH
: contentBoxSize.inlineSize,
height: contentBoxSize.blockSize,
});
} else {
// manipulate contentRect
this.chart_mixin_chartInstance.resize({
width: entry.contentRect.width < 400 ? 400 : entry.contentRect.width,
width:
entry.contentRect.width < this.MIN_WIDTH
? this.MIN_WIDTH
: entry.contentRect.width,
height: entry.contentRect.height,
});
}
console.log("[resizing.......] ");
}
}
@ -29,6 +32,7 @@ export default {
const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
return {
MIN_WIDTH: 400,
chart_mixin_chartInstance: null,
chart_mixin_observer: resizeObserver,
chart_mixin_options: {

10
src/views/index.vue
查看文件

@ -13,11 +13,9 @@
</db-container>
</div>
<div class="db-right">
<db-container
side="right"
icon="chip"
title="芯片产出"
></db-container>
<db-container side="right" icon="chip" title="芯片产出">
<chip-yield-chart />
</db-container>
<db-container
side="right"
icon="std"
@ -48,6 +46,7 @@ import ChartContainer from "./dashboard/components/ChartContainer.vue";
import FtoChart from "./dashboard/charts/Fto.vue";
import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
import BipvChart from "./dashboard/charts/Bipv.vue";
import ChipYieldChart from "./dashboard/charts/ChipYield.vue";
const LOCATIONS = [
// 佳木斯
@ -73,6 +72,7 @@ export default {
ChartContainer,
FtoChart,
ChipInvestChart,
ChipYieldChart,
BipvChart,
},
data() {