From c104bf2b4ecf604245b38590bf1e8119530de10b Mon Sep 17 00:00:00 2001
From: yaowanxin <3588231647@qq.com>
Date: 星期二, 12 八月 2025 16:26:55 +0800
Subject: [PATCH] Merge branch 'ywx' of http://114.132.189.42:9002/r/product-inventory-management into dev_ai
---
src/views/equipmentManagement/gasTank/simple.vue | 566 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 566 insertions(+), 0 deletions(-)
diff --git a/src/views/equipmentManagement/gasTank/simple.vue b/src/views/equipmentManagement/gasTank/simple.vue
new file mode 100644
index 0000000..92e88df
--- /dev/null
+++ b/src/views/equipmentManagement/gasTank/simple.vue
@@ -0,0 +1,566 @@
+<template>
+ <div class="app-container">
+ <!-- 椤甸潰鏍囬 -->
+ <div class="page-header">
+ <h2>閲嶅瀷缃愬紡璐ц溅鐩戞帶</h2>
+ <div class="header-actions">
+<!-- <el-button type="primary" @click="addTank">鏂板鍌ㄧ綈</el-button>-->
+<!-- <el-button @click="exportData">瀵煎嚭鏁版嵁</el-button>-->
+ </div>
+ </div>
+
+ <!-- 鍥涗釜涓昏妯″潡 -->
+ <div class="modules-container">
+ <!-- 1. 鍩烘湰淇℃伅妯″潡 -->
+ <el-card class="module-card">
+ <template #header>
+ <div class="card-header">
+ <span>1. 鍩烘湰淇℃伅</span>
+ <el-button type="text" @click="handleEditBasicInfo">缂栬緫</el-button>
+ </div>
+ </template>
+ <div class="info-grid">
+ <div class="info-item">
+ <label>鍌ㄧ綈缂栧彿锛�</label>
+ <span>{{ basicInfo.tankCode }}</span>
+ </div>
+ <div class="info-item">
+ <label>鍌ㄧ綈鍚嶇О锛�</label>
+ <span>{{ basicInfo.tankName }}</span>
+ </div>
+ <div class="info-item">
+ <label>鍌ㄧ綈绫诲瀷锛�</label>
+ <span>{{ basicInfo.tankType }}</span>
+ </div>
+ <div class="info-item">
+ <label>璁捐鍘嬪姏锛�</label>
+ <span>{{ basicInfo.designPressure }} MPa</span>
+ </div>
+ <div class="info-item">
+ <label>宸ヤ綔鍘嬪姏锛�</label>
+ <span>{{ basicInfo.workingPressure }} MPa</span>
+ </div>
+ <div class="info-item">
+ <label>瀹圭Н锛�</label>
+ <span>{{ basicInfo.volume }} m鲁</span>
+ </div>
+ </div>
+ </el-card>
+
+ <!-- 2. 鐩戞祴鍙傛暟妯″潡 -->
+ <el-card class="module-card">
+ <template #header>
+ <div class="card-header">
+ <span>2. 鐩戞祴鍙傛暟</span>
+ <el-button type="text" @click="refreshMonitoring">鍒锋柊</el-button>
+ </div>
+ </template>
+ <div class="monitoring-grid">
+ <div class="monitor-item">
+ <div class="monitor-label">鍘嬪姏</div>
+ <div class="monitor-value" :class="getStatusClass(monitoringData.pressureStatus)">
+ {{ monitoringData.pressure }} MPa
+ </div>
+ <div class="monitor-status">{{ monitoringData.pressureStatus === 'normal' ? '姝ｅ父' : '寮傚父' }}</div>
+ </div>
+ <div class="monitor-item">
+ <div class="monitor-label">娓╁害</div>
+ <div class="monitor-value" :class="getStatusClass(monitoringData.temperatureStatus)">
+ {{ monitoringData.temperature }} 鈩�
+ </div>
+ <div class="monitor-status">{{ monitoringData.temperatureStatus === 'normal' ? '姝ｅ父' : '寮傚父' }}</div>
+ </div>
+ <div class="monitor-item">
+ <div class="monitor-label">姘斾綋娴撳害</div>
+ <div class="monitor-value" :class="getStatusClass(monitoringData.gasStatus)">
+ {{ monitoringData.gasConcentration }} ppm
+ </div>
+ <div class="monitor-status">{{ monitoringData.gasStatus === 'normal' ? '姝ｅ父' : '寮傚父' }}</div>
+ </div>
+ <div class="monitor-item">
+ <div class="monitor-label">娴侀噺</div>
+ <div class="monitor-value" :class="getStatusClass(monitoringData.flowStatus)">
+ {{ monitoringData.flow }} m鲁/h
+ </div>
+ <div class="monitor-status">{{ monitoringData.flowStatus === 'normal' ? '姝ｅ父' : '寮傚父' }}</div>
+ </div>
+ </div>
+ </el-card>
+
+ <!-- 3. 瀹夊叏瑁呯疆妯″潡 -->
+ <el-card class="module-card">
+ <template #header>
+ <div class="card-header">
+ <span>3. 瀹夊叏瑁呯疆</span>
+ <el-button type="text" @click="checkSafetyDevices">妫�鏌�</el-button>
+ </div>
+ </template>
+ <div class="safety-grid">
+ <div class="safety-item" v-for="device in safetyDevices" :key="device.name">
+
+ <div class="device-info">
+ <div class="device-name">{{ device.name }}</div>
+ <div class="device-status" :class="device.status">
+ {{ device.status === 'normal' ? '姝ｅ父' : '寮傚父' }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-card>
+
+ <!-- 4. 缁存姢璁板綍妯″潡 -->
+ <el-card class="module-card">
+ <template #header>
+ <div class="card-header">
+ <span>4. 缁存姢璁板綍</span>
+ <el-button type="text" @click="addMaintenanceRecord">娣诲姞璁板綍</el-button>
+ </div>
+ </template>
+ <div class="maintenance-list">
+ <div class="maintenance-item" v-for="record in maintenanceRecords" :key="record.id">
+ <div class="record-header">
+ <span class="record-date">{{ record.date }}</span>
+ <el-tag :type="record.type === 'inspection' ? 'primary' : 'success'" size="small">
+ {{ record.type === 'inspection' ? '妫�楠�' : '缁存姢' }}
+ </el-tag>
+ </div>
+ <div class="record-content">
+ <div class="record-title">{{ record.title }}</div>
+ <div class="record-desc">{{ record.description }}</div>
+ <div class="record-operator">鎿嶄綔浜猴細{{ record.operator }}</div>
+ </div>
+ </div>
+ </div>
+ </el-card>
+ </div>
+
+ <!-- 缂栬緫鍩烘湰淇℃伅寮圭獥 -->
+ <el-dialog v-model="basicInfoDialogVisible" title="缂栬緫鍩烘湰淇℃伅" width="600px">
+ <el-form :model="editBasicInfo" label-width="120px">
+ <el-form-item label="鍌ㄧ綈缂栧彿">
+ <el-input v-model="editBasicInfo.tankCode" />
+ </el-form-item>
+ <el-form-item label="鍌ㄧ綈鍚嶇О">
+ <el-input v-model="editBasicInfo.tankName" />
+ </el-form-item>
+ <el-form-item label="鍌ㄧ綈绫诲瀷">
+ <el-select v-model="editBasicInfo.tankType" style="width: 100%">
+ <el-option label="娑插寲姘斾綋鍌ㄧ綈" value="娑插寲姘斾綋鍌ㄧ綈" />
+ <el-option label="鍘嬪姏瀹瑰櫒" value="鍘嬪姏瀹瑰櫒" />
+ <el-option label="甯稿帇鍌ㄧ綈" value="甯稿帇鍌ㄧ綈" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="璁捐鍘嬪姏">
+ <el-input-number v-model="editBasicInfo.designPressure" :precision="2" style="width: 100%" />
+ </el-form-item>
+ <el-form-item label="宸ヤ綔鍘嬪姏">
+ <el-input-number v-model="editBasicInfo.workingPressure" :precision="2" style="width: 100%" />
+ </el-form-item>
+ <el-form-item label="瀹圭Н">
+ <el-input-number v-model="editBasicInfo.volume" :precision="2" style="width: 100%" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="basicInfoDialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="saveBasicInfo">淇濆瓨</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 娣诲姞缁存姢璁板綍寮圭獥 -->
+ <el-dialog v-model="maintenanceDialogVisible" title="娣诲姞缁存姢璁板綍" width="600px">
+ <el-form :model="newMaintenanceRecord" label-width="120px">
+ <el-form-item label="璁板綍绫诲瀷">
+ <el-select v-model="newMaintenanceRecord.type" style="width: 100%">
+ <el-option label="妫�楠�" value="inspection" />
+ <el-option label="缁存姢" value="maintenance" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏍囬">
+ <el-input v-model="newMaintenanceRecord.title" />
+ </el-form-item>
+ <el-form-item label="鎻忚堪">
+ <el-input type="textarea" v-model="newMaintenanceRecord.description" :rows="3" />
+ </el-form-item>
+ <el-form-item label="鎿嶄綔浜�">
+ <el-input v-model="newMaintenanceRecord.operator" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="maintenanceDialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="saveMaintenanceRecord">淇濆瓨</el-button>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// 鍩烘湰淇℃伅
+const basicInfo = reactive({
+ tankCode: 'GT001',
+ tankName: '娑插寲姘斿偍缃怉',
+ tankType: '娑插寲姘斾綋鍌ㄧ綈',
+ designPressure: 1.6,
+ workingPressure: 0.8,
+ volume: 100.5
+})
+
+// 鐩戞祴鍙傛暟
+const monitoringData = reactive({
+ pressure: 0.8,
+ pressureStatus: 'normal',
+ temperature: 25.5,
+ temperatureStatus: 'normal',
+ gasConcentration: 0.1,
+ gasStatus: 'normal',
+ flow: 15.2,
+ flowStatus: 'normal'
+})
+
+// 瀹夊叏瑁呯疆
+const safetyDevices = ref([
+ { name: '瀹夊叏闃�', status: 'normal' },
+ { name: '鍘嬪姏浼犳劅鍣�', status: 'normal' },
+ { name: '娓╁害浼犳劅鍣�', status: 'normal' },
+ { name: '姘斾綋妫�娴嬪櫒', status: 'normal' },
+ { name: '鐖嗙牬鐗�', status: 'normal' },
+ { name: '娉勫帇瑁呯疆', status: 'normal' }
+])
+
+// 缁存姢璁板綍
+const maintenanceRecords = ref([
+ {
+ id: 1,
+ date: '2024-01-15',
+ type: 'inspection',
+ title: '骞村害妫�楠�',
+ description: '鎸夌収TSG 21-2016鏍囧噯杩涜骞村害妫�楠岋紝璁惧鐘舵�佽壇濂�',
+ operator: '寮犲伐绋嬪笀'
+ },
+ {
+ id: 2,
+ date: '2024-02-20',
+ type: 'maintenance',
+ title: '瀹夊叏闃�缁存姢',
+ description: '鏇存崲瀹夊叏闃�瀵嗗皝鍦堬紝鏍″噯鍘嬪姏璁惧畾鍊�',
+ operator: '鏉庢妧甯�'
+ },
+ {
+ id: 3,
+ date: '2024-03-10',
+ type: 'inspection',
+ title: '鍘嬪姏娴嬭瘯',
+ description: '杩涜鍘嬪姏瀹瑰櫒姘村帇璇曢獙锛岀鍚堣璁¤姹�',
+ operator: '鐜嬫楠屽憳'
+ }
+])
+
+// 寮圭獥鎺у埗
+const basicInfoDialogVisible = ref(false)
+const maintenanceDialogVisible = ref(false)
+
+// 缂栬緫琛ㄥ崟鏁版嵁
+const editBasicInfo = reactive({ ...basicInfo })
+const newMaintenanceRecord = reactive({
+ type: 'inspection',
+ title: '',
+ description: '',
+ operator: ''
+})
+
+// 鑾峰彇鐘舵�佹牱寮忕被
+const getStatusClass = (status) => {
+ return status === 'normal' ? 'status-normal' : 'status-warning'
+}
+
+// 鏂板鍌ㄧ綈
+const addTank = () => {
+ ElMessage.success('鏂板鍌ㄧ綈鍔熻兘')
+}
+
+// 瀵煎嚭鏁版嵁
+const exportData = () => {
+ ElMessage.success('瀵煎嚭鎴愬姛')
+}
+
+// 缂栬緫鍩烘湰淇℃伅
+const handleEditBasicInfo = () => {
+ Object.assign(editBasicInfo, basicInfo)
+ basicInfoDialogVisible.value = true
+}
+
+// 淇濆瓨鍩烘湰淇℃伅
+const saveBasicInfo = () => {
+ Object.assign(basicInfo, editBasicInfo)
+ basicInfoDialogVisible.value = false
+ ElMessage.success('淇濆瓨鎴愬姛')
+}
+
+// 鍒锋柊鐩戞祴鏁版嵁
+const refreshMonitoring = () => {
+ // 妯℃嫙鏁版嵁鏇存柊
+ monitoringData.pressure = (Math.random() * 0.5 + 0.6).toFixed(2)
+ monitoringData.temperature = (Math.random() * 10 + 20).toFixed(1)
+ monitoringData.gasConcentration = (Math.random() * 0.2).toFixed(2)
+ monitoringData.flow = (Math.random() * 10 + 10).toFixed(1)
+ ElMessage.success('鏁版嵁宸插埛鏂�')
+}
+
+// 妫�鏌ュ畨鍏ㄨ缃�
+const checkSafetyDevices = () => {
+ // 妯℃嫙妫�鏌ヨ繃绋�
+ safetyDevices.value.forEach(device => {
+ device.status = Math.random() > 0.1 ? 'normal' : 'warning'
+ })
+ ElMessage.success('瀹夊叏瑁呯疆妫�鏌ュ畬鎴�')
+}
+
+// 娣诲姞缁存姢璁板綍
+const addMaintenanceRecord = () => {
+ newMaintenanceRecord.type = 'inspection'
+ newMaintenanceRecord.title = ''
+ newMaintenanceRecord.description = ''
+ newMaintenanceRecord.operator = ''
+ maintenanceDialogVisible.value = true
+}
+
+// 淇濆瓨缁存姢璁板綍
+const saveMaintenanceRecord = () => {
+ const record = {
+ id: Date.now(),
+ date: new Date().toISOString().split('T')[0],
+ ...newMaintenanceRecord
+ }
+ maintenanceRecords.value.unshift(record)
+ maintenanceDialogVisible.value = false
+ ElMessage.success('璁板綍娣诲姞鎴愬姛')
+}
+
+// 妯℃嫙瀹炴椂鏁版嵁鏇存柊
+onMounted(() => {
+ setInterval(() => {
+ monitoringData.pressure = (Math.random() * 0.5 + 0.6).toFixed(2)
+ monitoringData.temperature = (Math.random() * 10 + 20).toFixed(1)
+ monitoringData.gasConcentration = (Math.random() * 0.2).toFixed(2)
+ monitoringData.flow = (Math.random() * 10 + 10).toFixed(1)
+ }, 5000)
+})
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+ padding: 20px;
+ background: #f5f5f5;
+ min-height: 100vh;
+}
+
+.page-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding: 20px;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ h2 {
+ margin: 0;
+ color: #303133;
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 10px;
+ }
+}
+
+.modules-container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+}
+
+.module-card {
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: bold;
+ color: #303133;
+ }
+}
+
+.info-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+
+ .info-item {
+ display: flex;
+ justify-content: space-between;
+ padding: 10px;
+ background: #f8f9fa;
+ border-radius: 4px;
+
+ label {
+ font-weight: bold;
+ color: #606266;
+ }
+
+ span {
+ color: #303133;
+ }
+ }
+}
+
+.monitoring-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+
+ .monitor-item {
+ text-align: center;
+ padding: 15px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ border: 2px solid transparent;
+
+ .monitor-label {
+ font-size: 14px;
+ color: #606266;
+ margin-bottom: 8px;
+ }
+
+ .monitor-value {
+ font-size: 20px;
+ font-weight: bold;
+ margin-bottom: 5px;
+
+ &.status-normal {
+ color: #67c23a;
+ }
+
+ &.status-warning {
+ color: #e6a23c;
+ }
+ }
+
+ .monitor-status {
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+}
+
+.safety-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+
+ .safety-item {
+ display: flex;
+ align-items: center;
+ padding: 15px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ border: 2px solid transparent;
+
+ .device-icon {
+ margin-right: 15px;
+ }
+
+ .device-info {
+ flex: 1;
+
+ .device-name {
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 5px;
+ }
+
+ .device-status {
+ font-size: 12px;
+ padding: 2px 8px;
+ border-radius: 10px;
+ display: inline-block;
+
+ &.normal {
+ background: #f0f9ff;
+ color: #409eff;
+ }
+
+ &.warning {
+ background: #fef7e0;
+ color: #e6a23c;
+ }
+ }
+ }
+ }
+}
+
+.maintenance-list {
+ max-height: 300px;
+ overflow-y: auto;
+
+ .maintenance-item {
+ padding: 15px;
+ border-bottom: 1px solid #ebeef5;
+ margin-bottom: 10px;
+
+ &:last-child {
+ border-bottom: none;
+ margin-bottom: 0;
+ }
+
+ .record-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+
+ .record-date {
+ font-size: 14px;
+ color: #909399;
+ }
+ }
+
+ .record-content {
+ .record-title {
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 5px;
+ }
+
+ .record-desc {
+ font-size: 14px;
+ color: #606266;
+ margin-bottom: 5px;
+ line-height: 1.4;
+ }
+
+ .record-operator {
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+ }
+}
+
+// 鍝嶅簲寮忚璁�
+@media (max-width: 1200px) {
+ .modules-container {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 768px) {
+ .info-grid,
+ .monitoring-grid,
+ .safety-grid {
+ grid-template-columns: 1fr;
+ }
+}
+</style>
--
Gitblit v1.9.3