update home
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
231
src/views/dashboard/charts/ChipYield.vue
Normal file
231
src/views/dashboard/charts/ChipYield.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<!--
|
||||
filename: ChipYield.vue
|
||||
author: liubin
|
||||
date: 2024-04-11 10:46:47
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="chip-yield">
|
||||
<chip-yield-chart :factory="activeLoc" />
|
||||
<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">{{ output.current }}</span>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span class="legend-label">2024年目标</span>
|
||||
<span class="legend-value">{{ output.target }}</span>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span class="legend-label">2023年累计</span>
|
||||
<span class="legend-value deep-blue">{{ output.previous }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChipYieldChart from "./ChipYieldChart.vue";
|
||||
|
||||
export default {
|
||||
name: "ChipYield",
|
||||
components: { ChipYieldChart },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
activeLoc: "1",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
output() {
|
||||
// ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]
|
||||
const chipOutput = this.$store.getters.home.chipOutput;
|
||||
if (
|
||||
!chipOutput ||
|
||||
!chipOutput.target ||
|
||||
!chipOutput.current ||
|
||||
!chipOutput.previous
|
||||
)
|
||||
return {
|
||||
target: 0,
|
||||
current: 0,
|
||||
previous: 0,
|
||||
};
|
||||
const index =
|
||||
this.activeLoc == "1"
|
||||
? 4
|
||||
: this.activeLoc == "2"
|
||||
? 1
|
||||
: this.activeLoc == "3"
|
||||
? 2
|
||||
: this.activeLoc == "4"
|
||||
? 0
|
||||
: this.activeLoc == "5"
|
||||
? 3
|
||||
: this.activeLoc == "6"
|
||||
? 5
|
||||
: 6;
|
||||
return {
|
||||
target: parseInt(chipOutput.target[index]).toLocaleString(),
|
||||
current: parseInt(chipOutput.current[index]).toLocaleString(),
|
||||
previous: parseInt(chipOutput.previous[index]).toLocaleString(),
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chip-yield {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
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>
|
||||
Reference in New Issue
Block a user