|
|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ class="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 text-cyan-100 p-6 relative overflow-hidden"
|
|
|
+ >
|
|
|
+ <!-- Animated background grid -->
|
|
|
+ <div class="absolute inset-0 opacity-20">
|
|
|
+ <div class="absolute inset-0 grid-pattern"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Scanning line effect -->
|
|
|
+ <div class="absolute inset-0 pointer-events-none">
|
|
|
+ <div class="scan-line"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="relative z-10 mb-6">
|
|
|
+ <div class="flex items-center justify-between border-b-2 border-cyan-500/30 pb-4">
|
|
|
+ <div class="flex items-center gap-8 text-sm">
|
|
|
+ <div
|
|
|
+ style="border: 0.5px solid #085b77"
|
|
|
+ v-for="(item, i) in leftNavItems"
|
|
|
+ :key="i"
|
|
|
+ class="px-4 py-2 bg-cyan-500/10 border border-[#085b77] skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
|
|
|
+ >
|
|
|
+ <span class="inline-block skew-x-[12deg]">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h1 class="text-2xl font-bold text-center flex-1 text-cyan-300 tracking-wider">
|
|
|
+ PSA3000万70MPa制氮装置监控系统
|
|
|
+ </h1>
|
|
|
+
|
|
|
+ <div class="flex items-center gap-8 text-sm">
|
|
|
+ <div
|
|
|
+ v-for="(item, i) in rightNavItems"
|
|
|
+ :key="i"
|
|
|
+ style="border: 0.5px solid #085b77"
|
|
|
+ class="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
|
|
|
+ >
|
|
|
+ <span class="inline-block skew-x-[12deg]">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="flex justify-center mt--8 mb-4 ml-26">
|
|
|
+ <dv-decoration5 :dur="2" style="width: 600px; height: 40px" />
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- Main content -->
|
|
|
+ <div class="relative z-10 grid grid-cols-12 gap-4">
|
|
|
+ <!-- Left panels -->
|
|
|
+ <div class="col-span-3 space-y-4">
|
|
|
+ <!-- PSA核心参数 -->
|
|
|
+ <div class="panel">
|
|
|
+ <div class="flex justify-between items-center panel-title">
|
|
|
+ <h4>PSA核心参数</h4>
|
|
|
+ <dv-decoration3 style="width: 120px; height: 30px" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-3">
|
|
|
+ <!-- <DataRow label="氧气纯度" value="99.66 %" button="启停按钮" button-color="green" /> -->
|
|
|
+ <DataRow label="氧气压力" value="0.54 MPa" />
|
|
|
+ <DataRow label="氧气瞬时流量" value="3002.10 Nm³" />
|
|
|
+ <DataRow label="氧气累计流量" value="219.6217 万Nm³" />
|
|
|
+ <div class="flex items-center justify-between mt-4">
|
|
|
+ <span class="text-cyan-200">运行状态</span>
|
|
|
+ <div class="status-indicator status-active"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 空气处理参数 -->
|
|
|
+ <div class="panel">
|
|
|
+ <div class="flex justify-between items-center panel-title">
|
|
|
+ <h4>空气处理参数</h4>
|
|
|
+ <dv-decoration3 style="width: 120px; height: 30px" />
|
|
|
+ </div>
|
|
|
+ <div class="space-y-3">
|
|
|
+ <!-- <DataRow label="出口温度" value="6.7 ℃" button="启停按钮" button-color="green" /> -->
|
|
|
+ <DataRow label="出口压力" value="0.6 MPa" />
|
|
|
+ <div class="flex items-center justify-between mt-4">
|
|
|
+ <span class="text-cyan-200">冷干机运行状态</span>
|
|
|
+ <div class="status-indicator status-inactive"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center justify-between mt-4">
|
|
|
+ <span class="text-cyan-200">风机运行状态</span>
|
|
|
+ <div class="status-indicator status-active"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 1800中压机参数 -->
|
|
|
+ <div class="panel">
|
|
|
+ <div class="flex justify-between items-center panel-title">
|
|
|
+ <h4>1800中压机参数</h4>
|
|
|
+ <dv-decoration3 style="width: 120px; height: 30px" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-3">
|
|
|
+ <!-- <DataRow label="排气压力" value="3.47 MPa" button="启停按钮" button-color="green" /> -->
|
|
|
+ <DataRow label="排气温度" value="107.0 ℃" />
|
|
|
+ <DataRow label="总用电能" value="247406.4 kWh" />
|
|
|
+ <div class="flex items-center justify-between mt-4">
|
|
|
+ <span class="text-cyan-200">运行状态</span>
|
|
|
+ <div class="status-indicator status-active"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Center - 3D View and Compressor Data -->
|
|
|
+ <div class="col-span-6 space-y-4">
|
|
|
+ <!-- 3D Factory View -->
|
|
|
+ <div class="panel relative overflow-hidden">
|
|
|
+ <div class="relative h-[400px]">
|
|
|
+ <img
|
|
|
+ src="@/assets/imgs/kanban.png"
|
|
|
+ alt="Factory 3D View"
|
|
|
+ class="w-full h-full object-cover"
|
|
|
+ />
|
|
|
+ <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>
|
|
|
+ <div class="scan-line-fast"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 1050空压机参数 -->
|
|
|
+ <div class="panel">
|
|
|
+ <div class="mb-2">
|
|
|
+ <dv-decoration7>
|
|
|
+ <h3 class="text-cyan-300 text-lg font-bold px-1"> 1050空压机参数 </h3>
|
|
|
+ </dv-decoration7>
|
|
|
+ </div>
|
|
|
+ <!-- <h3 class="panel-title">1050空压机参数</h3> -->
|
|
|
+ <div class="grid grid-cols-5 gap-4">
|
|
|
+ <div v-for="(unit, i) in compressorUnits" :key="i" class="space-y-2 text-center">
|
|
|
+ <div class="text-cyan-300 font-bold mb-2">{{ unit.name }}</div>
|
|
|
+ <div class="text-sm">
|
|
|
+ <div class="text-cyan-200">排气压力</div>
|
|
|
+ <div class="text-white font-mono">{{ unit.pressure }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-sm">
|
|
|
+ <div class="text-cyan-200">排气温度</div>
|
|
|
+ <div class="text-white font-mono">{{ unit.temp }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-sm">
|
|
|
+ <div class="text-cyan-200">总用电能</div>
|
|
|
+ <div class="text-white font-mono text-xs">{{ unit.energy }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'w-8 h-8 mx-auto rounded-full animate-pulse',
|
|
|
+ unit.status === 'active' ? 'status-active' : 'status-inactive'
|
|
|
+ ]"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Right panel -->
|
|
|
+ <div class="col-span-3">
|
|
|
+ <div class="panel h-full">
|
|
|
+ <div class="flex items-center justify-between mb-4 border-b border-cyan-500/30 pb-2">
|
|
|
+ <h3 class="text-cyan-300 text-lg font-bold">液驱压缩机参数</h3>
|
|
|
+ <dv-decoration8 :reverse="true" style="width: 130px; height: 30px" />
|
|
|
+ </div>
|
|
|
+ <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
|
|
|
+ <DataRow label="入口压力" value="3.30 MPa" :compact="true" />
|
|
|
+ <DataRow label="一级入口压力" value="3.32 MPa" :compact="true" />
|
|
|
+ <DataRow label="A级一级出口温度" value="104.5 ℃" :compact="true" />
|
|
|
+ <DataRow label="A级一级冷却后温度" value="16.6 ℃" :compact="true" />
|
|
|
+ <DataRow label="A级二级入口压力" value="8.40 MPa" :compact="true" />
|
|
|
+ <DataRow label="A级二级出口温度" value="134.3 ℃" :compact="true" />
|
|
|
+ <DataRow label="A级二级冷却后温度" value="27.6 ℃" :compact="true" />
|
|
|
+ <DataRow label="A级三级入口压力" value="22.57 MPa" :compact="true" />
|
|
|
+ <DataRow label="B级一级出口温度" value="109.6 ℃" :compact="true" />
|
|
|
+ <DataRow label="B级一级冷却后温度" value="16.5 ℃" :compact="true" />
|
|
|
+ <DataRow label="B级二级入口压力" value="8.23 MPa" :compact="true" />
|
|
|
+ <DataRow label="B级二级出口温度" value="130.0 ℃" :compact="true" />
|
|
|
+ <DataRow label="B级二级冷却后温度" value="21.5 ℃" :compact="true" />
|
|
|
+ <DataRow label="B级三级入口压力" value="22.46 MPa" :compact="true" />
|
|
|
+ <DataRow label="三级出口温度" value="83.6 ℃" :compact="true" />
|
|
|
+ <DataRow label="总出口温度" value="26.1 ℃" :compact="true" />
|
|
|
+ <DataRow label="总出口压力" value="40.82 MPa" :compact="true" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import DataRow from './data-row.vue'
|
|
|
+const leftNavItems = ['箱变', '1050空压机', 'PSA数据', '空气处理镜']
|
|
|
+const rightNavItems = ['主界面', '液驱及中压', '报警监控']
|
|
|
+
|
|
|
+const compressorUnits = [
|
|
|
+ {
|
|
|
+ name: '空压机1',
|
|
|
+ pressure: '0.68 MPa',
|
|
|
+ temp: '77.0 ℃',
|
|
|
+ energy: '124361.6 kWh',
|
|
|
+ status: 'active'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '空压机2',
|
|
|
+ pressure: '0.69 MPa',
|
|
|
+ temp: '78.0 ℃',
|
|
|
+ energy: '136750.4 kWh',
|
|
|
+ status: 'active'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '空压机3',
|
|
|
+ pressure: '0.69 MPa',
|
|
|
+ temp: '77.0 ℃',
|
|
|
+ energy: '134804.8 kWh',
|
|
|
+ status: 'active'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '空压机4',
|
|
|
+ pressure: '0.67 MPa',
|
|
|
+ temp: '84.0 ℃',
|
|
|
+ energy: '133656.0 kWh',
|
|
|
+ status: 'active'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '空压机5',
|
|
|
+ pressure: '0.00 MPa',
|
|
|
+ temp: '0.0 ℃',
|
|
|
+ energy: '12456.0 kWh',
|
|
|
+ status: 'inactive'
|
|
|
+ }
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+@keyframes scan {
|
|
|
+ 0% {
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes gridMove {
|
|
|
+ 0% {
|
|
|
+ transform: translate(0, 0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate(50px, 50px);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.grid-pattern {
|
|
|
+ background-image: linear-gradient(rgba(6, 182, 212, 0.3) 1px, transparent 1px),
|
|
|
+ linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px);
|
|
|
+ background-size: 50px 50px;
|
|
|
+ animation: gridMove 20s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.scan-line {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(to right, transparent, rgb(6, 182, 212), transparent);
|
|
|
+ opacity: 0.3;
|
|
|
+ animation: scan 4s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.scan-line-fast {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 4px;
|
|
|
+ background: linear-gradient(to right, transparent, rgba(6, 182, 212, 0.6), transparent);
|
|
|
+ animation: scan 3s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.panel {
|
|
|
+ background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.8), rgba(30, 58, 138, 0.5));
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ border: 2px solid rgba(6, 182, 212, 0.4);
|
|
|
+ padding: 1rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.panel:hover {
|
|
|
+ box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.panel-title {
|
|
|
+ color: rgb(103, 232, 249);
|
|
|
+ font-size: 1.125rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 1px solid rgba(6, 182, 212, 0.3);
|
|
|
+ padding-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.status-indicator {
|
|
|
+ width: 2rem;
|
|
|
+ height: 2rem;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: pulse 1.5s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.status-active {
|
|
|
+ background: rgb(34, 197, 94);
|
|
|
+ box-shadow: 0 0 15px rgba(34, 197, 94, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.status-inactive {
|
|
|
+ background: rgb(239, 68, 68);
|
|
|
+ box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ padding: 0.25rem 0.75rem;
|
|
|
+ border-radius: 0.25rem;
|
|
|
+ color: white;
|
|
|
+ transition: all 0.3s;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-green {
|
|
|
+ background: rgb(22, 163, 74);
|
|
|
+ box-shadow: 0 0 10px rgba(22, 163, 74, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-green:hover {
|
|
|
+ background: rgb(34, 197, 94);
|
|
|
+ box-shadow: 0 0 20px rgba(22, 163, 74, 0.8);
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-red {
|
|
|
+ background: rgb(220, 38, 38);
|
|
|
+ box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-red:hover {
|
|
|
+ background: rgb(239, 68, 68);
|
|
|
+ box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+</style>
|
