@@ -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", | |||||
components: {}, | |||||
props: {}, | |||||
data() { | |||||
return {} | |||||
}, | |||||
computed: {}, | |||||
methods: {}, | |||||
} | |||||
name: "ChipRate", | |||||
components: { ChipRateItem: ChipRateItemVue }, | |||||
props: {}, | |||||
data() { | |||||
return {}; | |||||
}, | |||||
computed: {}, | |||||
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 |
@@ -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 }, | |||||
}, | |||||
], | |||||
}, | |||||
], | |||||
}; | |||||
} |