From 307b17ef15c73a071912a262834f2a5f68e1fa87 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 11 九月 2025 15:20:35 +0800
Subject: [PATCH] 完成走航季度报告自动生成
---
src/components/monitor/FactorLegend.vue | 123 ++++++++++++++++++++++++++--------------
1 files changed, 80 insertions(+), 43 deletions(-)
diff --git a/src/components/monitor/FactorLegend.vue b/src/components/monitor/FactorLegend.vue
index b87e4ce..caba203 100644
--- a/src/components/monitor/FactorLegend.vue
+++ b/src/components/monitor/FactorLegend.vue
@@ -1,44 +1,66 @@
<template>
- <BaseCard>
+ <transition
+ name="el-zoom-in-left"
+ @before-enter="onBeforeEnter"
+ @after-leave="onAfterLeave"
+ >
+ <BaseCard v-show="show">
+ <template #content>
+ <el-row justify="space-between" align="middle">
+ <el-row align="middle">
+ <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" />
+ <span>璧拌埅鍥句緥</span>
+ <span v-if="factor.factorName">锛坽{ factor.factorName }}锛�</span>
+ </el-row>
+ <span @click="show = !show" class="btn-show">
+ <el-icon v-if="show"><ArrowLeftBold /></el-icon>
+ <el-icon v-else><ArrowRightBold /></el-icon>
+ </span>
+ </el-row>
+ <div
+ v-for="(item, index) in legends"
+ :key="index"
+ class="flexbox align-items margin-top"
+ >
+ <div
+ class="rectangle"
+ :style="'background-color: ' + item.color"
+ ></div>
+ <el-row v-if="item.max">
+ <span class="w-40 text-right">{{ item.min }}</span>
+ <span class="w-20 text-center">~</span>
+ <span class="w-40 text-right">{{ item.max }}</span>
+ <span class="w-60 m-l-8">{{ item.unit }}</span>
+ </el-row>
+ <el-row v-else>
+ <span class="w-40 text-right"></span>
+ <span class="w-20 text-center">></span>
+ <span class="w-40 text-right">{{ item.min }}</span>
+ <span class="w-60 m-l-8">{{ item.unit }}</span>
+ </el-row>
+ </div>
+ <div>
+ 鍒囨崲缁樺浘妯″紡锛�
+ <el-switch
+ v-model="legendType"
+ width="60"
+ inline-prompt
+ style=""
+ active-text="鍔ㄦ��"
+ inactive-text="鏍囧噯"
+ @change="handleChange"
+ />
+ </div>
+ </template>
+ </BaseCard>
+ </transition>
+ <BaseCard v-show="btnShow">
<template #content>
- <el-row justify="space-between" align="middle">
- <el-row align="middle">
- <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" />
- <span>璧拌埅鍥句緥</span>
- </el-row>
- <span>{{ factor.factorName }}</span>
- </el-row>
- <div
- v-for="(item, index) in legends"
- :key="index"
- class="flexbox align-items margin-top"
- >
- <div class="rectangle" :style="'background-color: ' + item.color"></div>
- <el-row v-if="item.max">
- <span class="w-40 text-right">{{ item.min }}</span>
- <span class="w-20 text-center">~</span>
- <span class="w-40 text-right">{{ item.max }}</span>
- <span class="w-60 m-l-8">{{ item.unit }}</span>
- </el-row>
- <el-row v-else>
- <span class="w-40 text-right"></span>
- <span class="w-20 text-center">></span>
- <span class="w-40 text-right">{{ item.min }}</span>
- <span class="w-60 m-l-8">{{ item.unit }}</span>
- </el-row>
- </div>
- <div>
- 鍒囨崲缁樺浘妯″紡锛�
- <el-switch
- v-model="legendType"
- width="60"
- inline-prompt
- style=""
- active-text="鍔ㄦ��"
- inactive-text="鏍囧噯"
- @change="handleChange"
- />
- </div>
+ <span @click="show = !show" class="btn-show">
+ <img src="@/assets/mipmap/data_chart.png" class="ff-img m-r-4" />
+ <el-icon v-if="show"><ArrowLeftBold /></el-icon>
+ <el-icon v-else><ArrowRightBold /></el-icon>
+ </span>
</template>
</BaseCard>
</template>
@@ -60,7 +82,9 @@
return {
// 缁樺浘妯″紡锛宖alse: 鏍囧噯妯″紡锛泃rue锛氬姩鎬佹ā寮�
legendType: false,
- legends: []
+ legends: [],
+ show: true,
+ btnShow: false
};
},
watch: {
@@ -128,11 +152,12 @@
', ' +
color[3] +
')';
+ const { scale = 1, unit = '' } = factorUnit[name];
legendList.push({
color: bgColor,
- min: r[0],
- max: nextR ? nextR[0] : undefined,
- unit: factorUnit[name] ? factorUnit[name].unit : ''
+ min: r[0] * scale,
+ max: nextR ? nextR[0] * scale : undefined,
+ unit: unit
});
}
@@ -148,6 +173,12 @@
this.factor.max
);
});
+ },
+ onBeforeEnter() {
+ this.btnShow = false;
+ },
+ onAfterLeave() {
+ this.btnShow = true;
}
}
};
@@ -165,4 +196,10 @@
--el-switch-on-color: #1f9956;
--el-switch-off-color: #8b8b8b;
}
+.btn-show {
+ cursor: pointer;
+}
+.btn-show:hover {
+ color: #23dad1;
+}
</style>
--
Gitblit v1.9.3