update 芯片良率
This commit is contained in:
parent
b6820fd61f
commit
e066a7c4c7
@ -6,22 +6,42 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div class="chip-rate">
|
||||||
|
<ChipRateItem :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
|
||||||
|
<ChipRateItem :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ChipRateItemVue from "./sub/chip/ChipRateItem.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "ChipRate",
|
name: "ChipRate",
|
||||||
components: {},
|
components: { ChipRateItem: ChipRateItemVue },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {},
|
methods: {},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.chip-rate {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
width: 3px;
|
||||||
|
height: 100%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import StdRateItem from "./sub/StdRateItem.vue";
|
import StdRateItem from "./sub/std/StdRateItem.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "StdRate",
|
name: "StdRate",
|
||||||
components: { StdRateItem },
|
components: { StdRateItem },
|
||||||
|
@ -0,0 +1,139 @@
|
|||||||
|
<!--
|
||||||
|
filename: ChipRateItem.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2024-04-29 14:25:18
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="chip-rate-item">
|
||||||
|
<div class="cities">
|
||||||
|
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
|
||||||
|
</div>
|
||||||
|
<div class="chart" ref="chart"></div>
|
||||||
|
<div class="legend" v-if="1">
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-item__value">20%</span>
|
||||||
|
<span class="legend-item__label">2023年累计</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-item__value">20%</span>
|
||||||
|
<span class="legend-item__label">2024年累计</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CopilotButtons from "@/views/copilot/components/select.vue";
|
||||||
|
import chartMixin from "@/mixins/chart.js";
|
||||||
|
import fullscreenMixin from "@/mixins/fullscreen.js";
|
||||||
|
import getOptions from "../../../options/chipOptions.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ChipRateItem",
|
||||||
|
components: { CopilotButtons },
|
||||||
|
mixins: [chartMixin, fullscreenMixin],
|
||||||
|
props: {
|
||||||
|
cities: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
period: "月",
|
||||||
|
valueTuple: [100, 100, 200],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
options() {
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
const month = new Date().getMonth() + 1;
|
||||||
|
const vt = this.valueTuple;
|
||||||
|
let titleValue =
|
||||||
|
vt[0] != null && vt[2] != null && vt[2] !== 0
|
||||||
|
? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
|
||||||
|
: "0%",
|
||||||
|
subtitle =
|
||||||
|
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
|
||||||
|
|
||||||
|
return getOptions({
|
||||||
|
single: true,
|
||||||
|
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
|
||||||
|
titleValue,
|
||||||
|
subtitle,
|
||||||
|
previousSum: this.valueTuple[0],
|
||||||
|
currentSum: this.valueTuple[1],
|
||||||
|
targetSum: this.valueTuple[2],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initOptions(this.options);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCityUpdate() {},
|
||||||
|
fullscreenCallback(isFullscreen) {
|
||||||
|
console.log("isFullscreen--->", isFullscreen);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.chip-rate-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 3px;
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
|
||||||
|
.cities {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
align-self: stretch;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
gap: 40px;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
.legend-item__value {
|
||||||
|
color: #0e61f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
.legend-item__value {
|
||||||
|
color: #0fd5d1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item__value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
l
|
156
src/views/copilot/efficiency/options/chipOptions.js
Normal file
156
src/views/copilot/efficiency/options/chipOptions.js
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
export default function ({
|
||||||
|
single = false,
|
||||||
|
color,
|
||||||
|
titleValue,
|
||||||
|
subtitle,
|
||||||
|
previousSum,
|
||||||
|
currentSum,
|
||||||
|
targetSum,
|
||||||
|
}) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
top: 0,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
title: {
|
||||||
|
text: titleValue,
|
||||||
|
left: "49%",
|
||||||
|
top: "39%",
|
||||||
|
textAlign: "center",
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: 32,
|
||||||
|
color: "#fffd",
|
||||||
|
},
|
||||||
|
subtext: `\u2002${subtitle}\u2002`,
|
||||||
|
subtextStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 100,
|
||||||
|
color: "#fffd",
|
||||||
|
align: "right",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
// 背景 series
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
name: "当前目标",
|
||||||
|
radius: ["70%", "85%"],
|
||||||
|
center: ["50%", "52%"],
|
||||||
|
emptyCircleStyle: {
|
||||||
|
color: "#040c5f45",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 数据 series
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["70%", "85%"],
|
||||||
|
center: ["50%", "52%"],
|
||||||
|
avoidLabelOvervlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: currentSum,
|
||||||
|
name: "当前累计产出",
|
||||||
|
selected: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderJoin: "round",
|
||||||
|
borderCap: "round",
|
||||||
|
borderWidth: 12,
|
||||||
|
borderRadius: "50%",
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 1,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: single
|
||||||
|
? [
|
||||||
|
{ offset: 0, color: `${color}11` },
|
||||||
|
{ offset: 1, color: `${color}` },
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
{ offset: 0, color: "#4CF0E811" },
|
||||||
|
{ offset: 1, color: "#4CF0E8" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:
|
||||||
|
targetSum > currentSum
|
||||||
|
? targetSum - currentSum
|
||||||
|
: targetSum == 0
|
||||||
|
? currentSum == 0
|
||||||
|
? 1
|
||||||
|
: 0
|
||||||
|
: 0,
|
||||||
|
|
||||||
|
name: "未达成累计",
|
||||||
|
itemStyle: { color: "transparent" },
|
||||||
|
label: { show: false },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 数据 series2 - 2023累计
|
||||||
|
single
|
||||||
|
? null
|
||||||
|
: {
|
||||||
|
type: "pie",
|
||||||
|
radius: ["55%", "70%"],
|
||||||
|
center: ["50%", "52%"],
|
||||||
|
avoidLabelOvervlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: previousSum,
|
||||||
|
name: "上期累计产出",
|
||||||
|
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:
|
||||||
|
targetSum > previousSum
|
||||||
|
? targetSum - previousSum
|
||||||
|
: previousSum == 0
|
||||||
|
? 1
|
||||||
|
: 0,
|
||||||
|
name: "-",
|
||||||
|
itemStyle: { color: "transparent" },
|
||||||
|
label: { show: false },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user