mt-fe-group
/
yudao-init
7
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

update chip yield chart

pull/1/head
DESKTOP-FUDKNA8\znjsz pirms 5 mēnešiem
vecāks
11626c5142
revīzija
8bd678cf62
6 mainītis faili ar 428 papildinājumiem un 11 dzēšanām
Dalītais skats
Salīdzināšanas iespējas
Rādīt statistiku Lejupielādēt ielāpa failu Lejupielādēt izmaiņu failu
  1. +196
    -0
      src/views/dashboard/charts/ChipYield.vue
  2. +194
    -0
      src/views/dashboard/charts/ChipYieldChart.vue
  3. +12
    -2
      src/views/dashboard/components/ChartContainer.vue
  4. +13
    -0
      src/views/dashboard/components/Container.vue
  5. +8
    -4
      src/views/dashboard/mixins/chart.js
  6. +5
    -5
      src/views/index.vue

+ 196
- 0
src/views/dashboard/charts/ChipYield.vue Parādīt failu

@@ -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
- 0
src/views/dashboard/charts/ChipYieldChart.vue Parādīt failu

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

+ 12
- 2
src/views/dashboard/components/ChartContainer.vue Parādīt failu

@@ -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
- 0
src/views/dashboard/components/Container.vue Parādīt failu

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


+ 8
- 4
src/views/dashboard/mixins/chart.js Parādīt failu

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


+ 5
- 5
src/views/index.vue Parādīt failu

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


Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt