合并静态首页代码至master #1
196
src/views/dashboard/charts/ChipYield.vue
Normal file
196
src/views/dashboard/charts/ChipYield.vue
Normal file
@ -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
Normal file
194
src/views/dashboard/charts/ChipYieldChart.vue
Normal file
@ -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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user