|
|
@@ -15,29 +15,25 @@
|
|
|
|
|
|
<!-- 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 class="flex items-center justify-center border-b-2 border-cyan-500/30 pb-4 gap-8">
|
|
|
+ <h1 class="text-2xl font-bold text-cyan-300 flex-6 tracking-wider">
|
|
|
+ {{ dataInfo.groupName }}
|
|
|
+ </h1>
|
|
|
+
|
|
|
+ <div class="flex flex-4 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"
|
|
|
+ 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>
|
|
|
+ <span class="pr-4">部门名称</span>
|
|
|
+ <span class="inline-block skew-x-[12deg]">{{ dataInfo.deptName }}</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>
|
|
|
+ <span class="pr-4">井号</span>
|
|
|
+ <span class="inline-block skew-x-[12deg]">{{ dataInfo.wellName }}</span>
|
|
|
</div>
|
|
|
<div
|
|
|
@click="toggleFullscreen"
|
|
|
@@ -54,59 +50,56 @@
|
|
|
|
|
|
<dv-border-box1 class="relative z-10">
|
|
|
<div class="relative z-10 grid grid-cols-12 gap-4 mt-5 p-6">
|
|
|
- <!-- 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>
|
|
|
+ <!-- Left panels - 合并为一个大面板 -->
|
|
|
+ <div class="col-span-3">
|
|
|
+ <div class="panel h-full flex flex-col">
|
|
|
+ <!-- PSA核心参数 -->
|
|
|
+ <div class="flex-1 border-b border-cyan-500/30 pb-2 mb-2">
|
|
|
+ <div class="flex justify-between items-center panel-title mb-2">
|
|
|
+ <h4>PSA核心参数</h4>
|
|
|
+ <dv-decoration3 style="width: 120px; height: 30px" />
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="space-y-3">
|
|
|
- <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 class="space-y-3 overflow-y-auto overflow-x-hidden flex-grow">
|
|
|
+ <DataRow
|
|
|
+ v-for="item in psaData"
|
|
|
+ :key="item.modelName"
|
|
|
+ :label="item.modelName"
|
|
|
+ :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
|
|
|
+ />
|
|
|
</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="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 class="flex-1 border-b border-cyan-500/30 pb-2 mb-2">
|
|
|
+ <div class="flex justify-between items-center panel-title mb-2">
|
|
|
+ <h4>空气处理参数</h4>
|
|
|
+ <dv-decoration3 style="width: 120px; height: 30px" />
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="flex items-center justify-between mt-4">
|
|
|
- <span class="text-cyan-200">风机运行状态</span>
|
|
|
- <div class="status-indicator status-active"></div>
|
|
|
+ <div class="space-y-3 overflow-y-auto overflow-x-hidden flex-grow">
|
|
|
+ <DataRow
|
|
|
+ v-for="item in airTreatmentData"
|
|
|
+ :key="item.modelName"
|
|
|
+ :label="item.modelName"
|
|
|
+ :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
|
|
|
+ />
|
|
|
</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>
|
|
|
+ <!-- 1800中压机参数 -->
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between items-center panel-title mb-2">
|
|
|
+ <h4>中压机参数</h4>
|
|
|
+ <dv-decoration3 style="width: 120px; height: 30px" />
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="space-y-5">
|
|
|
- <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 class="space-y-5 overflow-y-auto overflow-x-hidden flex-grow">
|
|
|
+ <DataRow
|
|
|
+ v-for="item in mediumPressureData"
|
|
|
+ :key="item.modelName"
|
|
|
+ :label="item.modelName"
|
|
|
+ :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -123,28 +116,22 @@
|
|
|
<div class="panel">
|
|
|
<div class="mb-2">
|
|
|
<dv-decoration7>
|
|
|
- <h3 class="text-cyan-300 text-lg font-bold px-1"> 1050空压机参数 </h3>
|
|
|
+ <h3 class="text-cyan-300 text-lg font-bold px-1"> 空压机参数 </h3>
|
|
|
</dv-decoration7>
|
|
|
</div>
|
|
|
<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 v-for="(compressor, i) in compressorData" :key="i" class="space-y-2 text-center">
|
|
|
+ <div class="text-cyan-300 font-bold mb-2">{{ `空压机${i + 1}` }}</div>
|
|
|
+ <div class="text-sm" v-for="item in compressor" :key="item.modelName">
|
|
|
+ <div class="text-cyan-200">{{ item.modelName }}</div>
|
|
|
+ <div class="text-white font-mono">{{
|
|
|
+ formatValue(item.value, getUnitFromModelName(item.modelName))
|
|
|
+ }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
:class="[
|
|
|
'w-8 h-8 mx-auto rounded-full animate-pulse',
|
|
|
- unit.status === 'active' ? 'status-active' : 'status-inactive'
|
|
|
+ getStatusClass(getValueByModelName(compressor, '运行状态'))
|
|
|
]"
|
|
|
></div>
|
|
|
</div>
|
|
|
@@ -159,26 +146,14 @@
|
|
|
<h3 class="text-cyan-300 text-lg font-bold">液驱压缩机参数</h3>
|
|
|
<dv-decoration8 :reverse="true" style="width: 110px; height: 20px" />
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="space-y-2 text-sm overflow-y-auto overflow-x-hidden max-h-[calc(100vh-200px)]"
|
|
|
- >
|
|
|
- <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 class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
|
|
|
+ <DataRow
|
|
|
+ v-for="item in liquidDrivenData"
|
|
|
+ :key="item.modelName"
|
|
|
+ :label="item.modelName"
|
|
|
+ :value="formatValue(item.value, getUnitFromModelName(item.modelName))"
|
|
|
+ :compact="true"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -188,7 +163,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
+import { ref, onMounted, nextTick } from 'vue'
|
|
|
import DataRow from './data-row.vue'
|
|
|
import ModelViewer from './ModelViewer.vue'
|
|
|
import { IotDeviceApi } from '@/api/pms/device'
|
|
|
@@ -200,8 +175,57 @@ defineOptions({
|
|
|
name: 'Kanban'
|
|
|
})
|
|
|
|
|
|
+let dataInfo = ref<any>({})
|
|
|
+let psaData = ref<any[]>([])
|
|
|
+let airTreatmentData = ref<any[]>([])
|
|
|
+let mediumPressureData = ref<any[]>([])
|
|
|
+let liquidDrivenData = ref<any[]>([])
|
|
|
+let compressorData = ref<any[][]>([])
|
|
|
const isFullscreen = ref(false)
|
|
|
|
|
|
+// 从modelName中提取单位
|
|
|
+const getUnitFromModelName = (modelName: string) => {
|
|
|
+ if (!modelName) return ''
|
|
|
+
|
|
|
+ // 根据不同的参数类型返回单位
|
|
|
+ if (modelName.includes('压力') || modelName.includes('压力P')) return 'MPa'
|
|
|
+ if (modelName.includes('温度') || modelName.includes('T')) return '℃'
|
|
|
+ if (modelName.includes('流量')) return 'Nm³'
|
|
|
+ if (modelName.includes('时间')) return '小时'
|
|
|
+ if (modelName.includes('氮气纯度')) return '%'
|
|
|
+ if (modelName.includes('环境温度')) return '℃'
|
|
|
+ if (modelName.includes('喷油')) return modelName.includes('温度') ? '℃' : 'MPa'
|
|
|
+
|
|
|
+ return '' // 默认无单位
|
|
|
+}
|
|
|
+
|
|
|
+// 获取状态类名
|
|
|
+const getStatusClass = (statusValue: string | number) => {
|
|
|
+ return statusValue === '1' || statusValue === 1 || statusValue === 'true'
|
|
|
+ ? 'status-active'
|
|
|
+ : 'status-inactive'
|
|
|
+}
|
|
|
+
|
|
|
+// 格式化数值显示
|
|
|
+const formatValue = (value: string, unit: string) => {
|
|
|
+ if (
|
|
|
+ value === undefined ||
|
|
|
+ value === null ||
|
|
|
+ value === '' ||
|
|
|
+ value === 'null' ||
|
|
|
+ (value === '0' && unit === '')
|
|
|
+ ) {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ return unit ? `${value} ${unit}` : value
|
|
|
+}
|
|
|
+
|
|
|
+// 根据modelName获取值
|
|
|
+const getValueByModelName = (data: any[], modelName: string) => {
|
|
|
+ const item = data.find((i) => i.modelName === modelName)
|
|
|
+ return item ? item.value : '0'
|
|
|
+}
|
|
|
+
|
|
|
const toggleFullscreen = async () => {
|
|
|
if (!document.fullscreenElement) {
|
|
|
// 进入全屏
|
|
|
@@ -234,55 +258,42 @@ const handleFullscreenChange = () => {
|
|
|
onMounted(() => {
|
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange)
|
|
|
})
|
|
|
+
|
|
|
// 添加 onUnmounted 来清理事件监听器
|
|
|
onUnmounted(() => {
|
|
|
document.removeEventListener('fullscreenchange', handleFullscreenChange)
|
|
|
})
|
|
|
|
|
|
-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'
|
|
|
- }
|
|
|
-]
|
|
|
-
|
|
|
onMounted(async () => {
|
|
|
- const res = await IotDeviceApi.getDeviceSetParams(route.query.deviceSetId)
|
|
|
- console.log('成套设备参数>>>>>>>>>>>>>>>', typeof JSON.parse(res.YF297.distance))
|
|
|
+ try {
|
|
|
+ const res = await IotDeviceApi.getDeviceSetParams(route.query.deviceSetId)
|
|
|
+
|
|
|
+ // 设置基础信息
|
|
|
+ dataInfo.value = {
|
|
|
+ groupName: res.groupName,
|
|
|
+ deptName: res.deptName,
|
|
|
+ wellName: res.wellName
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置各个设备的数据
|
|
|
+ psaData.value = res.PSA
|
|
|
+ airTreatmentData.value = res['空气处理撬']
|
|
|
+ mediumPressureData.value = res['中压机']
|
|
|
+ liquidDrivenData.value = res['液驱机']
|
|
|
+
|
|
|
+ // 设置空压机数据（空压机1到空压机5）
|
|
|
+ compressorData.value = []
|
|
|
+ for (let i = 1; i <= 5; i++) {
|
|
|
+ const compressorKey = `空压${i}`
|
|
|
+ if (res[compressorKey]) {
|
|
|
+ compressorData.value.push(res[compressorKey])
|
|
|
+ } else {
|
|
|
+ compressorData.value.push([])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取设备参数失败:', error)
|
|
|
+ }
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
@@ -337,6 +348,7 @@ onMounted(async () => {
|
|
|
border-radius: 0.5rem;
|
|
|
box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
|
|
|
transition: all 0.3s;
|
|
|
+ min-height: 0; /* 允许flex项目收缩到其内容以下 */
|
|
|
}
|
|
|
|
|
|
.panel:hover {
|
|
|
@@ -346,10 +358,10 @@ onMounted(async () => {
|
|
|
.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;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.status-indicator {
|
