修改问题
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