@@ -6,22 +6,42 @@ | |||
--> | |||
<template> | |||
<div class="chip-rate"> | |||
<ChipRateItem :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" /> | |||
<ChipRateItem :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" /> | |||
</div> | |||
</template> | |||
<script> | |||
import ChipRateItemVue from "./sub/chip/ChipRateItem.vue"; | |||
export default { | |||
name: "ChipRate", | |||
components: {}, | |||
props: {}, | |||
data() { | |||
return {} | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
} | |||
name: "ChipRate", | |||
components: { ChipRateItem: ChipRateItemVue }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<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> |
@@ -20,7 +20,7 @@ | |||
</template> | |||
<script> | |||
import StdRateItem from "./sub/StdRateItem.vue"; | |||
import StdRateItem from "./sub/std/StdRateItem.vue"; | |||
export default { | |||
name: "StdRate", | |||
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 |
@@ -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 }, | |||
}, | |||
], | |||
}, | |||
], | |||
}; | |||
} |