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 | 168 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 125 insertions(+), 43 deletions(-)
diff --git a/src/components/monitor/FactorLegend.vue b/src/components/monitor/FactorLegend.vue
index 23e576f..caba203 100644
--- a/src/components/monitor/FactorLegend.vue
+++ b/src/components/monitor/FactorLegend.vue
@@ -1,39 +1,73 @@
<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-50 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-50 m-l-8">{{ item.unit }}</span>
- </el-row>
- </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>
<script>
import { Legend } from '@/model/Legend';
-import { factorUnit } from '../../constant/factor-unit';
+import { factorUnit } from '@/constant/factor-unit';
import { Factor } from '@/model/Factor';
export default {
@@ -43,21 +77,40 @@
default: () => new Factor()
}
},
+ emits: ['change'],
data() {
- return {};
+ return {
+ // 缁樺浘妯″紡锛宖alse: 鏍囧噯妯″紡锛泃rue锛氬姩鎬佹ā寮�
+ legendType: false,
+ legends: [],
+ show: true,
+ btnShow: false
+ };
+ },
+ watch: {
+ factor(nValue, oValue) {
+ if (nValue != oValue && nValue) {
+ this.legends = this.refreshLegend(
+ nValue.factorName,
+ nValue.legendType,
+ nValue.min,
+ nValue.max
+ );
+ }
+ }
},
computed: {
- legends() {
- const res = this.factor
- ? this.refreshLegend(
- this.factor.factorName,
- this.factor.legendType,
- this.factor.min,
- this.factor.max
- )
- : [];
- return res;
- }
+ // legends() {
+ // const res = this.factor
+ // ? this.refreshLegend(
+ // this.factor.factorName,
+ // this.factor.legendType,
+ // this.factor.min,
+ // this.factor.max
+ // )
+ // : [];
+ // return res;
+ // }
},
methods: {
/**
@@ -99,15 +152,33 @@
', ' +
color[3] +
')';
+ const { scale = 1, unit = '' } = factorUnit[name];
legendList.push({
color: bgColor,
- min: r[0],
- max: nextR ? nextR[0] : undefined,
- unit: factorUnit[name]
+ min: r[0] * scale,
+ max: nextR ? nextR[0] * scale : undefined,
+ unit: unit
});
}
return legendList;
+ },
+
+ handleChange(value) {
+ this.$emit('change', value, () => {
+ this.legends = this.refreshLegend(
+ this.factor.factorName,
+ this.factor.legendType,
+ this.factor.min,
+ this.factor.max
+ );
+ });
+ },
+ onBeforeEnter() {
+ this.btnShow = false;
+ },
+ onAfterLeave() {
+ this.btnShow = true;
}
}
};
@@ -120,4 +191,15 @@
.text-center {
text-align: center;
}
+
+.el-switch {
+ --el-switch-on-color: #1f9956;
+ --el-switch-off-color: #8b8b8b;
+}
+.btn-show {
+ cursor: pointer;
+}
+.btn-show:hover {
+ color: #23dad1;
+}
</style>
--
Gitblit v1.9.3