添加轴详情对话框，支持双击查看详细信息

src/views/plan/EquipmentStatus.vue

@@ -13,7 +13,8 @@
             <div class="axle-side left">
               <div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`" 
                    class="axle-item" 
-                   :class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]">
+                   :class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
+                   @dblclick="showAxleDetails(record, equipment.equipment_code)">
                 <div class="axle-number">{{ record.axle_number }} <span v-if="!record.update_time" class="not-running-label">(不在运行)</span></div>
                 <div class="axle-spec" v-if="record.update_time">{{ record.specification }}</div>
                 <div class="axle-model" v-if="record.update_time">{{ record.model }}</div>
@@ -29,7 +30,8 @@
             <div class="axle-side right">
               <div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.update_time || 'no-data'}`" 
                    class="axle-item" 
-                   :class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]">
+                   :class="[getCompletionClass(record.degree_of_completion), { 'not-running': !record.update_time }]"
+                   @dblclick="showAxleDetails(record, equipment.equipment_code)">
                 <div class="axle-number">{{ record.axle_number }} <span v-if="!record.update_time" class="not-running-label">(不在运行)</span></div>
                 <div class="axle-spec" v-if="record.update_time">{{ record.specification }}</div>
                 <div class="axle-model" v-if="record.update_time">{{ record.model }}</div>
@@ -49,11 +51,76 @@
         </div>
       </div>
     </div>
+
+    <!-- 轴详情对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="轴详细信息"
+      width="50%"
+      :before-close="handleClose">
+      <div v-if="selectedAxle" class="axle-details">
+        <div class="detail-row">
+          <span class="detail-label">设备编号:</span>
+          <span class="detail-value">{{ selectedEquipmentCode }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">轴号:</span>
+          <span class="detail-value">{{ selectedAxle.axle_number }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">运行状态:</span>
+          <span class="detail-value" :class="{ 'status-running': selectedAxle.update_time, 'status-stopped': !selectedAxle.update_time }">
+            {{ selectedAxle.update_time ? '运行中' : '不在运行' }}
+          </span>
+        </div>
+        <div v-if="selectedAxle.update_time" class="detail-row">
+          <span class="detail-label">规格:</span>
+          <span class="detail-value">{{ selectedAxle.specification || '无' }}</span>
+        </div>
+        <div v-if="selectedAxle.update_time" class="detail-row">
+          <span class="detail-label">型号:</span>
+          <span class="detail-value">{{ selectedAxle.model || '无' }}</span>
+        </div>
+        <div v-if="selectedAxle.update_time" class="detail-row">
+          <span class="detail-label">线盘:</span>
+          <span class="detail-value">{{ selectedAxle.raw_wire_disc || '无' }}</span>
+        </div>
+        <div v-if="selectedAxle.update_time" class="detail-row">
+          <span class="detail-label">完成度:</span>
+          <span class="detail-value">{{ (selectedAxle.degree_of_completion * 100).toFixed(1) }}%</span>
+        </div>
+        <div v-if="selectedAxle.update_time && (selectedAxle.total_number || selectedAxle.total_net_weight || selectedAxle.total_gross_weight)" class="stock-details">
+          <div class="detail-title">库存信息</div>
+          <div v-if="selectedAxle.total_number" class="detail-row">
+            <span class="detail-label">总箱数:</span>
+            <span class="detail-value">{{ selectedAxle.total_number }}</span>
+          </div>
+          <div v-if="selectedAxle.total_net_weight" class="detail-row">
+            <span class="detail-label">总净重:</span>
+            <span class="detail-value">{{ selectedAxle.total_net_weight }}kg</span>
+          </div>
+          <div v-if="selectedAxle.total_gross_weight" class="detail-row">
+            <span class="detail-label">总毛重:</span>
+            <span class="detail-value">{{ selectedAxle.total_gross_weight }}kg</span>
+          </div>
+        </div>
+        <div v-if="selectedAxle.update_time" class="detail-row">
+          <span class="detail-label">最后更新:</span>
+          <span class="detail-value">{{ selectedAxle.update_time }}</span>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue';
+import { defineProps, computed, ref } from 'vue';
+import { ElDialog, ElButton } from 'element-plus';
 
 const props = defineProps({
   equipmentData: {
@@ -292,6 +359,23 @@ const getCompletionClass = (degree) => {
   if (percentage < 100) return 'completion-high';
   return 'completion-full';
 };
+
+// 对话框相关状态
+const dialogVisible = ref(false);
+const selectedAxle = ref(null);
+const selectedEquipmentCode = ref('');
+
+// 显示轴详情对话框
+const showAxleDetails = (record, equipmentCode) => {
+  selectedAxle.value = { ...record };
+  selectedEquipmentCode.value = equipmentCode;
+  dialogVisible.value = true;
+};
+
+// 关闭对话框
+const handleClose = () => {
+  dialogVisible.value = false;
+};
 </script>
 
 <style scoped>
@@ -483,4 +567,51 @@ const getCompletionClass = (degree) => {
   color: #f56c6c;
   font-weight: normal;
 }
+
+/* 对话框样式 */
+.axle-details {
+  padding: 10px 0;
+}
+
+.detail-row {
+  display: flex;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.detail-label {
+  min-width: 100px;
+  font-weight: bold;
+  color: #606266;
+}
+
+.detail-value {
+  flex: 1;
+  color: #303133;
+}
+
+.detail-title {
+  font-weight: bold;
+  color: #303133;
+  margin: 15px 0 10px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.status-running {
+  color: #67c23a;
+}
+
+.status-stopped {
+  color: #f56c6c;
+}
+
+/* 添加悬停效果，提示用户可以双击 */
+.axle-item {
+  cursor: pointer;
+}
+
+.axle-item:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
 </style>