maotu-webtopo/src/components/vue-components/vue-str-info.vue

<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![runTimeNode.node.etype](
    runTimeNode.valInt,
    getIndex(runTimeNode.bType)
  );

  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![runTimeNode.node.etype](
      runTimeNode.valInt,
      getIndex(runTimeNode.bType)
    );

    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>