maotu-webtopo/src/components/vue-xq-test/vue-signal-gaudy.vue

<template>
  <!-- <div style="display: flex; gap: 10px; align-items: center">
    <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-icon
          :class="['iconStyle', isAalarm ? 'blink-animation' : '']"
          :size="22"
          :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }"
        >
          <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>
    <el-tag type="primary">{{ modeName }}</el-tag>
  </div> -->

  <!-- <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>