From d6e6f8b5b31e132e4597eb531168d3e88f3bda72 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 04 七月 2025 17:26:49 +0800
Subject: [PATCH] 2025.7.4 动态溯源
---
src/components/monitor/FactorLegend.vue | 116 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 76 insertions(+), 40 deletions(-)
diff --git a/src/components/monitor/FactorLegend.vue b/src/components/monitor/FactorLegend.vue
index bcd447d..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: {
@@ -149,6 +173,12 @@
this.factor.max
);
});
+ },
+ onBeforeEnter() {
+ this.btnShow = false;
+ },
+ onAfterLeave() {
+ this.btnShow = true;
}
}
};
@@ -166,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