修改问题
parent
19025c6442
commit
d5ec93ded6
@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div class="main-img">
|
||||
<div v-if="!machine" class="no-img">
|
||||
<el-icon :size="200" class="no-img-icon">
|
||||
<Picture />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- style="max-width: 300px" -->
|
||||
<div class="img-container" v-if="machine">
|
||||
<!-- <img v-if="imgUrl" draggable="false" class="display-img" :src="imgUrl" /> -->
|
||||
<img v-if="machine" draggable="false" class="display-img" :src="machine" />
|
||||
<!-- 等比缩放 -->
|
||||
<!-- <el-image :src="imgUrl" draggable="false" :preview-src-list="[]" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useImgStore } from '@/components/mt-edit/store/imgStore';
|
||||
import { Picture } from '@element-plus/icons-vue';
|
||||
import machine from '/public/imgs/machine.png';
|
||||
|
||||
// const displayImageUrl = ref<string | null>(null);
|
||||
const displayImageUrl = ref<string>();
|
||||
const imgStore = useImgStore();
|
||||
|
||||
const props = defineProps({
|
||||
definitionItemJson: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
moduleId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('组件卸载');
|
||||
});
|
||||
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.no-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.no-img-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #409efc;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.display-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* max-width: 300px; */
|
||||
}
|
||||
</style>
|
||||
@ -1,303 +0,0 @@
|
||||
<template>
|
||||
<!-- <button @click="console.log('data:', nodeByModelsStore.nodeMap)">点击</button> -->
|
||||
<el-row v-if="location === 'top'">
|
||||
<el-col :span="24" class="flex-center">
|
||||
<el-tag type="primary" size="small" style="opacity: 0.9">
|
||||
<el-text type="primary" style="max-width: 65px" size="small" truncated>
|
||||
{{ modeName }}
|
||||
</el-text>
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="center">
|
||||
<el-col :span="12" class="flex-center" v-if="location === 'left'">
|
||||
<el-tag type="primary" size="small" style="opacity: 0.9">
|
||||
<el-text type="primary" style="max-width: 65px" size="small" truncated>
|
||||
{{ modeName }}
|
||||
</el-text>
|
||||
</el-tag>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="flex-center">
|
||||
<div style="display: flex; gap: 10px; align-items: center">
|
||||
<el-popover
|
||||
:width="300"
|
||||
:disabled="false"
|
||||
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
|
||||
>
|
||||
<!-- :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }" -->
|
||||
<!-- rgb(196, 86, 86) -->
|
||||
<template #reference>
|
||||
<el-icon
|
||||
:class="['iconStyle', isAalarm ? 'blink-animation' : '']"
|
||||
:size="18"
|
||||
:style="{ color: isBool ? 'rgb(166, 169, 173)' : 'rgb(247, 137, 137)' }"
|
||||
>
|
||||
<WarningFilled />
|
||||
</el-icon>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="demo-rich-conent" style="display: flex; gap: 20px; flex-direction: column">
|
||||
<el-icon
|
||||
class="iconStyle"
|
||||
:size="60"
|
||||
:style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }"
|
||||
>
|
||||
<WarningFilled />
|
||||
</el-icon>
|
||||
|
||||
<el-row :gutter="6">
|
||||
<el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
|
||||
<el-statistic title="绑定ID" :value="null">
|
||||
<template #suffix>
|
||||
<el-tag size="default" type="primary">{{ moduleId }}</el-tag>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
|
||||
<el-statistic title="节点名称" :value="null">
|
||||
<template #suffix>
|
||||
<el-tag size="default" type="success">{{ modeName }}</el-tag>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
|
||||
<el-statistic title="类型" :value="null">
|
||||
<template #suffix>
|
||||
<el-tag size="default" type="primary">遥信</el-tag>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="6">
|
||||
<el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
|
||||
<el-statistic title="开关情况" :value="null">
|
||||
<template #suffix>
|
||||
<el-tag size="default" type="primary">{{ isBool }}</el-tag>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
|
||||
<el-statistic title="告警" :value="null">
|
||||
<template #suffix>
|
||||
<el-tag size="default" type="primary">{{ isAalarm }}</el-tag>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
|
||||
<el-statistic title="是否可告警" :value="null">
|
||||
<template #suffix>
|
||||
<el-tag size="default" type="primary">{{ isAlarmable }}</el-tag>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="flex-center" v-if="location === 'right'">
|
||||
<el-tag type="primary" size="small" style="opacity: 0.9">
|
||||
<el-text type="primary" style="max-width: 65px" size="small" truncated>
|
||||
{{ modeName }}
|
||||
</el-text>
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="location === 'bottom'">
|
||||
<el-col :span="24" class="flex-center">
|
||||
<el-tag type="primary" size="small" style="opacity: 0.9">
|
||||
<el-text type="primary" style="max-width: 65px" size="small" truncated>
|
||||
{{ modeName }}
|
||||
</el-text>
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onUnmounted, onMounted, watch } from 'vue';
|
||||
import { WarningFilled } from '@element-plus/icons-vue';
|
||||
import { useNodeByModelsStore } from '../mt-edit/store/nodeByModels';
|
||||
import emitter from '../../utils/emitter';
|
||||
const nodeByModelsStore = useNodeByModelsStore();
|
||||
|
||||
onMounted(() => {
|
||||
loadingModuleById();
|
||||
saveodeByModels();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
deleteByModels();
|
||||
console.log('组件卸载');
|
||||
emitter.off(props.definitionItemJson.id);
|
||||
});
|
||||
|
||||
// const props = defineProps(['definitionItemJson']);
|
||||
|
||||
const props = defineProps({
|
||||
moduleType: {
|
||||
type: String,
|
||||
default: '--'
|
||||
},
|
||||
moduleId: {
|
||||
type: String,
|
||||
default: '--'
|
||||
},
|
||||
definitionItemJson: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
}
|
||||
});
|
||||
let modeName = ref<string>();
|
||||
|
||||
// 开关情况
|
||||
let isBool = ref<boolean>(false);
|
||||
|
||||
// 告警
|
||||
let isAalarm = ref<boolean>();
|
||||
|
||||
// 是否可告警
|
||||
let isAlarmable = ref<boolean>();
|
||||
|
||||
function getModuleById(moduleId: string) {
|
||||
const globalData = (window as any).globalData;
|
||||
if (!globalData || moduleId == undefined || moduleId == '' || props.moduleId == '--') {
|
||||
console.warn('globalData 未初始化');
|
||||
return null;
|
||||
}
|
||||
|
||||
// 根据实际类型访问
|
||||
if (globalData instanceof Map) {
|
||||
// 如果是 Map 类型
|
||||
return globalData.get(moduleId);
|
||||
} else {
|
||||
// 如果是普通对象
|
||||
return globalData[moduleId];
|
||||
}
|
||||
}
|
||||
|
||||
function loadingModuleById() {
|
||||
let module = getModuleById(props.moduleId);
|
||||
if (props.moduleId !== '' && props.moduleId !== undefined && props.moduleId !== '--' && module) {
|
||||
if (module) {
|
||||
modeName.value = module.node.name;
|
||||
isBool.value = module.double == 1;
|
||||
isAalarm.value = module.alarm;
|
||||
isAlarmable.value = module.alarmable;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// function loadingModuleById() {
|
||||
// const globalData = (window as any).globalData as Map<string, any>;
|
||||
// if (
|
||||
// props.moduleId !== '' &&
|
||||
// props.moduleId !== undefined &&
|
||||
// props.moduleId !== '--' &&
|
||||
// globalData?.has(props.moduleId)
|
||||
// ) {
|
||||
// let module = globalData.get(props.moduleId);
|
||||
// if (module) {
|
||||
// modeName.value = module.node.name;
|
||||
// isBool.value = module.double == 1;
|
||||
// isAalarm.value = module.alarm;
|
||||
// isAlarmable.value = module.alarmable;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// 绑定事件
|
||||
emitter.on(props.definitionItemJson.id, (value) => {
|
||||
console.log('触发事件', value);
|
||||
loadingModuleById();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.moduleId,
|
||||
(newVal, oldVal) => {
|
||||
loadingModuleById();
|
||||
nodeByModelsStore.change(newVal, oldVal, props.definitionItemJson.id);
|
||||
}
|
||||
);
|
||||
|
||||
function deleteByModels() {
|
||||
if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
|
||||
nodeByModelsStore.delete(props.moduleId, props.definitionItemJson.id);
|
||||
}
|
||||
|
||||
function saveodeByModels() {
|
||||
if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
|
||||
nodeByModelsStore.saveOrUpdate(props.moduleId, props.definitionItemJson.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 设置固定宽度和文本省略 */
|
||||
.ellipsis-tag {
|
||||
width: 65px; /* 设置固定宽度 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
align-items: center; /* 水平居中 */
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
flex-direction: column; /* 垂直排列 */
|
||||
justify-content: center; /* 垂直居中 */
|
||||
align-items: center; /* 水平居中 */
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
size: 30;
|
||||
transition: opacity 0.5s ease-in-out; /* 添加平滑过渡 */
|
||||
/* color: v-bind('isBool ? "rgb(146, 252, 40)" : "rgb(252, 40, 40)"'); */
|
||||
/* color: rgb(146, 252, 40); */
|
||||
/* rgb(252, 40, 40); */
|
||||
}
|
||||
|
||||
/* 闪烁动画 */
|
||||
/* .blink-animation {
|
||||
animation: blink-animation 1s infinite;
|
||||
} */
|
||||
|
||||
/* 平滑闪烁动画 */
|
||||
.blink-animation {
|
||||
animation: smooth-blink 1s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes smooth-blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.el-statistic {
|
||||
/* 控制文字大小 */
|
||||
--el-statistic-content-font-size: 16px;
|
||||
}
|
||||
|
||||
.elColInfo {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue