This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-20 11:22:50 +08:00
parent 82573307e9
commit c992fa0200
3 changed files with 16 additions and 15 deletions

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, onMounted, ref, watch } from "vue"; import { computed, nextTick, onMounted, ref, watch } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import getOptions from "./rateOption"; import getOptions from "./rateOption";
@ -33,14 +33,14 @@ watch(
); );
const rate = computed(() => { const rate = computed(() => {
if (!props.rawData.nowYield || props.rawData.nowYield == 0) return [0, 0]; if (!props.rawData?.nowYield || props.rawData.nowYield == 0) return [0, 0];
// const _rate = ((props.rawData.nowYield / props.rawData.targetYield) * 100) // const _rate = ((props.rawData.nowYield / props.rawData.targetYield) * 100)
// .toFixed(2) // .toFixed(2)
// .toString(); // .toString();
// return [parseInt(_rate), _rate.split(".")[1]]; // return [parseInt(_rate), _rate.split(".")[1]];
return [ return [
parseInt(props.rawData.nowYield), parseInt(props.rawData.nowYield),
(props.rawData.nowYield + "").split(".")[1], ((props.rawData.nowYield + "").split(".")[1] ?? "").padStart(2, "0"),
]; ];
}); });
@ -55,7 +55,9 @@ function reInitChart() {
} }
onMounted(() => { onMounted(() => {
reInitChart(); nextTick(() => {
reInitChart();
});
}); });
</script> </script>
@ -63,10 +65,7 @@ onMounted(() => {
<div class="chart rate-chart"> <div class="chart rate-chart">
<div ref="rateChartRef" class="chart-container"></div> <div ref="rateChartRef" class="chart-container"></div>
<div <div :class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']">
v-if="!displayPlaceholder"
:class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']"
>
<span class="integer-part">{{ rate[0] }}.</span> <span class="integer-part">{{ rate[0] }}.</span>
<span class="decimal-part">{{ rate[1] }}%</span> <span class="decimal-part">{{ rate[1] }}%</span>
</div> </div>
@ -104,11 +103,11 @@ onMounted(() => {
user-select: none; user-select: none;
position: absolute; position: absolute;
top: 30%; top: 30%;
left: 32%; left: 36%;
} }
.fake-chart-title.is-only-child { .fake-chart-title.is-only-child {
left: 42%; left: 36%;
} }
.fake-chart-title > .integer-part { .fake-chart-title > .integer-part {

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { nextTick, onMounted, ref } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import getOptions from "./yieldOption"; import getOptions from "./yieldOption";
@ -33,7 +33,9 @@ function reInitChart() {
} }
onMounted(() => { onMounted(() => {
reInitChart(); nextTick(() => {
reInitChart();
});
}); });
</script> </script>

View File

@ -15,9 +15,9 @@ onMounted(() => {
// websocketData.value = loadData([ // websocketData.value = loadData([
// { // {
// targetProduction: 120, // targetProduction: 120,
// nowProduction: 10, // nowProduction: 0,
// targetYield: 10.34, // targetYield: 0,
// nowYield: 3.11, // nowYield: 10,
// }, // },
// ]); // ]);
websocketData.value = loadData(store.data2.dailyTarget); websocketData.value = loadData(store.data2.dailyTarget);