|
|
<template>
|
|
|
<!-- 四遥：遥测 -->
|
|
|
<!-- <button @click="console.log('data:', nodeByModelsStore.nodeMap)">点击</button> -->
|
|
|
<el-row :gutter="20" width="100%">
|
|
|
<el-col :span="24" justify="center" align="middle">
|
|
|
<el-tag :type="color" effect="plain" style="width: 100%">
|
|
|
<div style="display: flex; justify-content: space-around; align-items: center; width: 100%">
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<div v-if="showStart">
|
|
|
{{ nodeStatus }}
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="showModel">
|
|
|
{{ nodeModel }}
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="showVal">
|
|
|
{{ nodeValue }}
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="20" v-if="showText">
|
|
|
<el-col :span="24" justify="center" align="middle"
|
|
|
><el-tag type="primary">{{ modeName }}</el-tag></el-col
|
|
|
>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
|
|
|
import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels';
|
|
|
import emitter from '@/utils/emitter';
|
|
|
// F:\vue\workspace\maotu-webtopo\src\utils\config.ts
|
|
|
import { Rec, getIndex, getNodeStatus, getNodeColor } from '@/utils/config';
|
|
|
|
|
|
const nodeByModelsStore = useNodeByModelsStore();
|
|
|
|
|
|
onMounted(() => {
|
|
|
loadingModuleById();
|
|
|
saveodeByModels();
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
console.log('组件卸载');
|
|
|
deleteByModels();
|
|
|
emitter.off(props.definitionItemJson.id);
|
|
|
});
|
|
|
|
|
|
const props = defineProps({
|
|
|
moduleType: {
|
|
|
type: String,
|
|
|
default: '--'
|
|
|
},
|
|
|
moduleId: {
|
|
|
type: String,
|
|
|
default: '--'
|
|
|
},
|
|
|
definitionItemJson: {
|
|
|
type: Object,
|
|
|
default: () => ({})
|
|
|
},
|
|
|
showStart: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
showModel: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
},
|
|
|
showVal: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
showText: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
}
|
|
|
});
|
|
|
|
|
|
console.log('itemjson:', props.definitionItemJson.id);
|
|
|
|
|
|
function saveodeByModels() {
|
|
|
if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
|
|
|
nodeByModelsStore.saveOrUpdate(props.moduleId, props.definitionItemJson.id);
|
|
|
}
|
|
|
|
|
|
function deleteByModels() {
|
|
|
if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
|
|
|
nodeByModelsStore.delete(props.moduleId, props.definitionItemJson.id);
|
|
|
}
|
|
|
|
|
|
watch(
|
|
|
() => props.moduleId,
|
|
|
(newVal, oldVal) => {
|
|
|
loadingModuleById();
|
|
|
nodeByModelsStore.change(newVal, oldVal, props.definitionItemJson.id);
|
|
|
}
|
|
|
);
|
|
|
|
|
|
emitter.on(props.definitionItemJson.id, (value) => {
|
|
|
console.log('触发事件', value);
|
|
|
loadingModuleById();
|
|
|
});
|
|
|
|
|
|
let moduleUnit = ref<string>();
|
|
|
let modeName = ref<string>();
|
|
|
let percentage = ref<number>();
|
|
|
let color = ref<string>('info');
|
|
|
let nodeStatus = ref<string>('未知状态');
|
|
|
let nodeModel = ref<string>('无模式');
|
|
|
let nodeValue = ref<string>('--');
|
|
|
|
|
|
function getModuleById(moduleId: string) {
|
|
|
const globalData = (window as any).globalData;
|
|
|
if (!globalData || moduleId == undefined || moduleId == '' || props.moduleId == '--') {
|
|
|
console.warn('globalData 未初始化');
|
|
|
return null;
|
|
|
}
|
|
|
return globalData.get(moduleId);
|
|
|
}
|
|
|
|
|
|
function loadingModuleById() {
|
|
|
// 使用类型断言来访问 globalData
|
|
|
let module = getModuleById(props.moduleId);
|
|
|
if (props.moduleId !== '' && props.moduleId !== undefined && props.moduleId !== '--' && module) {
|
|
|
if (module) {
|
|
|
console.log('dddd');
|
|
|
modeName.value = module.node.name;
|
|
|
percentage.value = module.double;
|
|
|
moduleUnit.value = module.node.unit;
|
|
|
color.value = getNodeColor(module.sig);
|
|
|
nodeStatus.value = getNodeStatus(module.sig);
|
|
|
nodeModel.value = computedNodeModel();
|
|
|
nodeValue.value = computedVal.value;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function computedNodeModel(): string {
|
|
|
if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return '--';
|
|
|
let runTimeNode = getModuleById(props.moduleId);
|
|
|
if (!runTimeNode) return '--';
|
|
|
// 如果后端类型是 缺省 数值 返回数值
|
|
|
if (runTimeNode.node.etype == 0 || runTimeNode.node.etype == 2) {
|
|
|
return '无模式';
|
|
|
}
|
|
|
console.log('runTimeNode.node.etype', runTimeNode.node.etype);
|
|
|
console.log('runTimeNode.valInt', runTimeNode.valInt);
|
|
|
console.log('getIndex(runTimeNode.bType)', getIndex(runTimeNode.bType));
|
|
|
let val = Rec.EnumTypeValFun
|
|
|
);
|
|
|
|
|
|
return val;
|
|
|
}
|
|
|
|
|
|
// 计算模式
|
|
|
let computedModel = computed({
|
|
|
// 读取
|
|
|
get() {
|
|
|
if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return '--';
|
|
|
let runTimeNode = getModuleById(props.moduleId);
|
|
|
if (!runTimeNode) return '--';
|
|
|
// 如果后端类型是 缺省 数值 返回数值
|
|
|
if (runTimeNode.node.etype == 0 || runTimeNode.node.etype == 2) {
|
|
|
return '无模式';
|
|
|
}
|
|
|
console.log('runTimeNode.node.etype', runTimeNode.node.etype);
|
|
|
console.log('runTimeNode.valInt', runTimeNode.valInt);
|
|
|
console.log('getIndex(runTimeNode.bType)', getIndex(runTimeNode.bType));
|
|
|
let val = Rec.EnumTypeValFun
|
|
|
);
|
|
|
|
|
|
return val;
|
|
|
},
|
|
|
// 修改
|
|
|
set() {}
|
|
|
});
|
|
|
|
|
|
// 计算状态
|
|
|
let computedStatus = computed({
|
|
|
// 读取
|
|
|
get() {
|
|
|
if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--')
|
|
|
return '未知状态';
|
|
|
let runTimeNode = getModuleById(props.moduleId);
|
|
|
if (!runTimeNode) return '未知状态';
|
|
|
let val = getNodeStatus(runTimeNode.sig);
|
|
|
return val;
|
|
|
},
|
|
|
// 修改
|
|
|
set() {}
|
|
|
});
|
|
|
|
|
|
// 计算值
|
|
|
let computedVal = computed({
|
|
|
// 读取
|
|
|
get() {
|
|
|
if (percentage.value == undefined && moduleUnit.value == undefined) return '--';
|
|
|
// 保留两位小数，如果是整数则不显示小数位
|
|
|
const formattedValue =
|
|
|
percentage.value != null && !Number.isInteger(percentage.value)
|
|
|
? percentage.value.toFixed(2)
|
|
|
: (percentage.value?.toString() ?? '--');
|
|
|
return formattedValue + '' + moduleUnit.value;
|
|
|
},
|
|
|
// 修改
|
|
|
set() {}
|
|
|
});
|
|
|
|
|
|
function test() {
|
|
|
console.log(getModuleById(props.moduleId));
|
|
|
}
|
|
|
|
|
|
const customFormat = () => {
|
|
|
// 返回您自定义的单位和数值
|
|
|
if (percentage.value == undefined && moduleUnit.value == undefined) return '--';
|
|
|
return percentage.value + '' + moduleUnit.value;
|
|
|
};
|
|
|
</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; /* 水平居中 */
|
|
|
}
|
|
|
|
|
|
.el-statistic {
|
|
|
/* 控制文字大小 */
|
|
|
--el-statistic-content-font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.elColInfo {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
:deep(.el-progress__text) {
|
|
|
/* 控制文字大小 */
|
|
|
font-size: 16px !important;
|
|
|
}
|
|
|
|
|
|
.demo-progress .el-progress--line {
|
|
|
margin-bottom: 15px;
|
|
|
max-width: 500px;
|
|
|
}
|
|
|
.demo-progress .el-progress--circle {
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
.fontStyle {
|
|
|
color: rgb(51, 126, 204);
|
|
|
}
|
|
|
h3 {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
text-align: center;
|
|
|
/* padding-top: 5px;
|
|
|
padding-bottom: 5px; */
|
|
|
}
|
|
|
.demo-radius .radius {
|
|
|
height: 28px;
|
|
|
min-width: 66px;
|
|
|
width: fit-content;
|
|
|
border: 2px solid rgba(51, 125, 204, 0.205);
|
|
|
border-radius: 0;
|
|
|
padding: 0 8px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
</style>
|