@@ -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> |
@@ -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> |
@@ -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; | |||
@@ -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; | |||
@@ -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: { | |||
@@ -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() { | |||