pms-iot-vue/src/views/oli-connection/monitoring-board/1.vue

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Search, RefreshLeft, Cpu, Aim } from '@element-plus/icons-vue'

// --- 表单数据模型 ---
const queryForm = reactive({
  orgNode: [], // 级联选择结果
  deviceCode: '',
  deviceName: '',
  deviceStatus: '',
  selectedDevices: [], // 设备多选结果
  timeRange: []
})

// --- 模拟数据 (与之前相同) ---
const orgOptions = [
  { value: 'factory-1', label: '第一工厂', children: [{ value: 'workshop-a', label: '总装车间' }] },
  { value: 'factory-2', label: '第二工厂' }
]

const statusOptions = [
  { label: '运行中 (RUNNING)', value: 'running', color: '#00f2ea' }, // 青色
  { label: '故障 (ERROR)', value: 'error', color: '#ff0055' }, // 玫红
  { label: '待机 (IDLE)', value: 'stopped', color: '#f59e0b' } // 橙色
]

const deviceOptions = ref([
  { label: '[CNC-001] 数控机床核心单元', value: 'cnc-001' },
  { label: '[ROBOT-A] 焊接机械臂一号', value: 'robot-a' },
  { label: '[AGV-102] 智能物流载具', value: 'agv-102' }
])

// --- 级联配置 ---
const cascaderProps = { checkStrictly: true, expandTrigger: 'hover' as const }

// --- 事件处理 ---
const handleQueryConditionChange = () => {
  console.log('>> 系统提示: 前置条件变更，正在重新计算目标设备列表...')
  // 模拟 API 调用延迟和数据更新动画效果
  const originalOptions = [...deviceOptions.value]
  deviceOptions.value = []
  setTimeout(() => {
    deviceOptions.value = originalOptions
    console.log('>> 系统提示: 设备列表更新完毕。')
  }, 500)
}

const handleSearch = () => {
  console.log('执行指令: 检索数据', queryForm)
}
const handleReset = () => {
  queryForm.orgNode = []
  queryForm.deviceCode = ''
  queryForm.deviceName = ''
  queryForm.deviceStatus = ''
  queryForm.selectedDevices = []
  queryForm.timeRange = []
}
</script>

<template>
  <div class="cyber-bg min-h-[400px] w-full p-6 flex flex-col gap-6 relative overflow-hidden">
    <div
      class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIiBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0wIDBoNDB2NDBIMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwZjJlYSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48L3N2Zz4=')] opacity-20 pointer-events-none"
    ></div>

    <div class="cyber-panel relative p-5 rounded-sm backdrop-blur-xl border border-[#00f2ea]/30">
      <div class="tech-corner top-left"></div>
      <div class="tech-corner top-right"></div>
      <div class="tech-corner bottom-left"></div>
      <div class="tech-corner bottom-right"></div>

      <div class="flex items-center justify-between mb-6 border-b border-[#00f2ea]/20 pb-3">
        <div class="flex items-center gap-3">
          <div class="p-2 bg-[#00f2ea]/10 rounded-sm border border-[#00f2ea]/50">
            <el-icon class="text-[#00f2ea] text-xl animate-pulse"><Cpu /></el-icon>
          </div>
          <h2
            class="text-xl font-oxanium text-transparent bg-clip-text bg-gradient-to-r from-[#00f2ea] to-[#bd00ff] tracking-wider font-bold uppercase u-text-glow"
          >
            设备数据检索终端 // DATA RETRIEVAL TERMINAL
          </h2>
        </div>
        <div class="flex items-center gap-2 text-xs text-[#00f2ea]/70 font-mono">
          <span class="relative flex h-3 w-3">
            <span
              class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00f2ea] opacity-75"
            ></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-[#00f2ea]"></span>
          </span>
          SYSTEM STATUS: ONLINE
        </div>
      </div>

      <el-form :inline="true" :model="queryForm" class="cyber-form flex flex-wrap gap-x-6 gap-y-4">
        <div
          class="w-full flex flex-wrap gap-4 items-end border-l-2 border-[#00f2ea]/30 pl-4 bg-gradient-to-r from-[#00f2ea]/5 to-transparent py-2"
        >
          <el-form-item label="节点层级 / NODE LEVEL">
            <el-cascader
              v-model="queryForm.orgNode"
              :options="orgOptions"
              :props="cascaderProps"
              placeholder="SELECT LEVEL >"
              clearable
              class="cyber-input w-48"
              :show-all-levels="false"
              popper-class="cyber-popper"
            />
          </el-form-item>

          <el-form-item label="设备编码 / CODE">
            <el-input
              v-model="queryForm.deviceCode"
              placeholder="INPUT CODE >"
              @change="handleQueryConditionChange"
              class="cyber-input w-40"
            >
              <template #prefix
                ><el-icon><Aim /></el-icon
              ></template>
            </el-input>
          </el-form-item>

          <el-form-item label="设备名称 / NAME">
            <el-input
              v-model="queryForm.deviceName"
              placeholder="INPUT NAME >"
              @change="handleQueryConditionChange"
              class="cyber-input w-40"
            />
          </el-form-item>

          <el-form-item label="运行状态 / STATUS">
            <el-select
              v-model="queryForm.deviceStatus"
              placeholder="SELECT STATUS >"
              clearable
              @change="handleQueryConditionChange"
              class="cyber-input w-44"
              popper-class="cyber-popper"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span class="flex items-center gap-2 font-mono text-sm">
                  <span
                    :style="{ backgroundColor: item.color, boxShadow: `0 0 8px ${item.color}` }"
                    class="h-1.5 w-1.5 rounded-full inline-block"
                  ></span>
                  {{ item.label }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="w-full flex flex-wrap gap-4 items-end mt-2 pl-4">
          <el-form-item label="目标设备锁定 / TARGET DEVICES" class="flex-grow">
            <el-select
              v-model="queryForm.selectedDevices"
              multiple
              collapse-tags
              collapse-tags-tooltip
              placeholder="MULTI-SELECT DEVICES >"
              class="cyber-input w-full md:w-[400px]"
              popper-class="cyber-popper"
            >
              <el-option
                v-for="item in deviceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span class="font-mono">{{ item.label }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间跨度 / TIME SPAN">
            <el-date-picker
              v-model="queryForm.timeRange"
              type="datetimerange"
              range-separator="TO"
              start-placeholder="START TIME"
              end-placeholder="END TIME"
              class="cyber-date-picker !w-[380px]"
              popper-class="cyber-popper"
            />
          </el-form-item>

          <div class="ml-auto flex gap-3">
            <el-button class="cyber-btn-primary" @click="handleSearch">
              <el-icon class="mr-2"><Search /></el-icon> 初始化查询
            </el-button>
            <el-button class="cyber-btn-secondary" @click="handleReset">
              <el-icon class="mr-2"><RefreshLeft /></el-icon> 重置条件
            </el-button>
          </div>
        </div>
      </el-form>
    </div>

    <div
      class="flex-grow cyber-panel relative p-6 rounded-sm backdrop-blur-md border border-[#00f2ea]/20 min-h-[300px] flex items-center justify-center flex-col gap-4"
    >
      <div class="scan-line absolute inset-0 pointer-events-none z-0"></div>
      <el-icon class="text-6xl text-[#00f2ea]/30"><Cpu /></el-icon>
      <p class="text-[#00f2ea]/70 font-mono tracking-[0.2em] z-10"
        >等待数据接入 // AWAITING DATA STREAM...</p
      >
    </div>
  </div>
</template>

<style scoped>
/* --- 引入科幻感字体 (可选，如果你的环境支持联网) --- */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700&family=Roboto+Mono:wght@400;500&display=swap');

/* --- 自定义工具类 --- */
.font-oxanium {
  font-family: Oxanium, cursive, sans-serif;
}

.font-mono {
  font-family: 'Roboto Mono', monospace;
}

.u-text-glow {
  text-shadow: 0 0 10px rgb(0 242 234 / 50%);
}

/* --- 核心背景 --- */
.cyber-bg {
  color: #e0f2fe;
  background: radial-gradient(circle at center top, #1a1a2e 0%, #050505 100%);
}

/* --- 面板样式 (HUD Container) --- */
.cyber-panel {
  background: rgb(10 10 20 / 70%);
  box-shadow:
    inset 0 0 30px rgb(0 242 234 / 5%),
    0 0 10px rgb(0 0 0 / 50%);
}

/* --- 装饰性角落 (Tech Corners) --- */
.tech-corner {
  position: absolute;
  z-index: 1;
  width: 15px;
  height: 15px;
  border-color: rgb(0 242 234 / 60%);
}

.tech-corner.top-left {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.tech-corner.top-right {
  top: -1px;
  right: -1px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.tech-corner.bottom-left {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.tech-corner.bottom-right {
  right: -1px;
  bottom: -1px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

/* =========================================
   Element Plus 深度定制 (The Magic Happens Here)
   ========================================= */

/* 1. Form Label 定制 */
:deep(.el-form-item__label) {
  padding-bottom: 4px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem; /* text-xs */
  font-weight: bold;
  letter-spacing: 0.05em;
  color: rgb(0 242 234 / 70%) !important; /* 青色文字 */
}

/* 2. 输入框与选择器容器 (Wrapper) 定制 */
:deep(.cyber-input .el-input__wrapper),
:deep(.cyber-input .el-select__wrapper),
:deep(.cyber-date-picker.el-input__wrapper) {
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: rgb(0 242 234 / 5%) !important; /* 极淡的青色背景 */
  border: 1px solid rgb(0 242 234 / 20%); /* 基础边框 */
  border-radius: 2px; /* 硬朗的圆角 */
  box-shadow: none !important; /* 移除默认阴影 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 悬停与聚焦状态：发光增强 */
:deep(.cyber-input .el-input__wrapper:hover),
:deep(.cyber-input .el-select__wrapper:hover),
:deep(.cyber-input .el-input__wrapper.is-focus),
:deep(.cyber-input .el-select__wrapper.is-focused) {
  border-color: rgb(0 242 234 / 80%);
  box-shadow:
    0 0 15px rgb(0 242 234 / 30%),
    inset 0 0 10px rgb(0 242 234 / 10%) !important;
}

/* 输入框内部文字 */
:deep(.el-input__inner) {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
  color: #fff !important;
}

:deep(.el-input__inner::placeholder) {
  color: rgb(0 242 234 / 30%);
}

/* 图标颜色 */
:deep(.el-input__prefix-inner .el-icon),
:deep(.el-select__caret),
:deep(.el-date-editor .el-range-separator) {
  color: rgb(0 242 234 / 60%) !important;
}

/* 日期选择器文字 */
:deep(.el-date-editor .el-range-input) {
  font-family: 'Roboto Mono', monospace;
  color: #fff !important;
}

/* Tag 标签定制 (用于多选和级联) */
:deep(.el-tag.el-tag--info) {
  color: #e0c0ff;
  background-color: rgb(189 0 255 / 20%); /* 紫色背景 */
  border-color: rgb(189 0 255 / 50%);
  border-radius: 2px;
}

:deep(.el-tag .el-tag__close) {
  color: #e0c0ff;
}

/* =========================================
   按钮定制 (Cyber Buttons)
   ========================================= */
.cyber-btn-primary {
  font-family: Oxanium, sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  color: #000 !important;
  background: linear-gradient(135deg, #00f2ea 0%, #00a8c6 100%) !important;
  border: none !important;
  transition: all 0.3s;
  clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%); /* 斜切角造型 */
}

.cyber-btn-primary:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgb(0 242 234 / 60%);
}

.cyber-btn-secondary {
  font-family: Oxanium, sans-serif;
  color: rgb(0 242 234 / 80%) !important;
  background: transparent !important;
  border: 1px solid rgb(0 242 234 / 50%) !important;
  clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%);
}

.cyber-btn-secondary:hover {
  color: #fff !important;
  background: rgb(0 242 234 / 10%) !important;
  border-color: #00f2ea !important;
  box-shadow: inset 0 0 10px rgb(0 242 234 / 30%);
}

/* =========================================
   下拉弹出层定制 (Global Styles needed for Poppers)
   ========================================= */

/* 注意：这部分通常需要放在全局样式文件中，或者去掉 scoped，
   为了方便演示，我这里使用了特殊的处理方式。
   在实际项目中，请确保这些样式能作用于 body 下的弹出层。
*/
</style>

<style>
@keyframes scan {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

.cyber-popper.el-popper {
  background: rgb(10 10 25 / 95%) !important;
  border: 1px solid rgb(0 242 234 / 30%) !important;
  backdrop-filter: blur(10px);
}

.cyber-popper .el-popper__arrow::before {
  background: rgb(10 10 25 / 95%) !important;
  border: 1px solid rgb(0 242 234 / 30%) !important;
}

/* 下拉选项 Item */
.cyber-popper .el-select-dropdown__item,
.cyber-popper .el-cascader-node {
  font-family: 'Roboto Mono', monospace;
  color: #a0aec0 !important;
}

/* 选项悬停/选中状态 */
.cyber-popper .el-select-dropdown__item.hover,
.cyber-popper .el-select-dropdown__item.selected,
.cyber-popper .el-cascader-node.is-active,
.cyber-popper .el-cascader-node:hover {
  font-weight: bold;
  color: #00f2ea !important;
  background: rgb(0 242 234 / 15%) !important;
}

/* 日期选择器面板特殊处理 */
.cyber-popper .el-picker-panel {
  color: #e0f2fe;
  background: transparent !important;
}

.cyber-popper .el-date-table td.available:hover {
  color: #00f2ea;
}

.cyber-popper .el-date-table td.today span {
  font-weight: bold;
  color: #00f2ea;
}

.cyber-popper .el-date-table td.current:not(.disabled) span {
  color: #000;
  background-color: #00f2ea;
}

.cyber-popper .el-date-range-picker__content.is-left {
  border-right: 1px solid rgb(0 242 234 / 20%);
}

/* 扫描线动画 */
.scan-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgb(0 242 234 / 20%), transparent);
  opacity: 0.3;
  animation: scan 3s linear infinite;
}
</style>