From bdc61b62859f5113deb4979be0e8265a3252e3d0 Mon Sep 17 00:00:00 2001
From: menxipeng <menxipeng@zilot.cn>
Date: Mon, 3 Nov 2025 22:45:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E5=8D=95=E5=BD=92=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/WorkOrderArchivePage.tsx | 531 +++++++++++++++---
 1 file changed, 444 insertions(+), 87 deletions(-)

diff --git a/src/components/pages/WorkOrderArchivePage.tsx b/src/components/pages/WorkOrderArchivePage.tsx
index 581e09b..184188a 100644
--- a/src/components/pages/WorkOrderArchivePage.tsx
+++ b/src/components/pages/WorkOrderArchivePage.tsx
@@ -35,8 +35,14 @@ interface ArchivedWorkOrder {
   otherImg: string;
   repairImg: string;
   repairVideo: string;
+  sVideo: string;
   needRepair: boolean;
   equNormal: boolean;
+  equId: string;
+  equipmentModel: string;
+  brand: string;
+  reformType: string;
+  remark: string;
 }
 
 export default function WorkOrderArchivePage() {
@@ -298,7 +304,7 @@ export default function WorkOrderArchivePage() {
                           <Eye className="h-4 w-4 mr-1" />
                           查看详情
                         </Button>
-                        {(order.workOrderType === "厨房自动灭火设备" || order.workOrderType === "设备安装" || order.workOrderType === "设备检测") && (
+                        {((order.equipmentName?.includes("厨房自动灭火") || order.equipmentName === "厨房自动灭火设备") && (order.workOrderType === "设备安装" || order.workOrderType === "设备检测" || order.workOrderType === "设备改造" || order.workOrderType === "设备维修" || order.workOrderType === "故障维修" || order.workOrderType === "设备拆除" || order.workOrderType === "更换药剂")) && (
                           <Button variant="outline" size="sm" onClick={() => handleDownloadReport(order.workOrderNumber)}>
                             <FileDown className="h-4 w-4 mr-1" />
                             下载报告
@@ -394,106 +400,457 @@ export default function WorkOrderArchivePage() {
                       <p className="text-sm text-gray-600">地址</p>
                       <p className="font-medium">{selectedOrder.merchantAddress}</p>
                     </div>
+                    
+                    {/* 厨房自动灭火设备特有字段 - 在原有字段基础上增加 */}
+                    {(selectedOrder.equipmentName?.includes("厨房自动灭火") || selectedOrder.equipmentName === "厨房自动灭火设备") && 
+                     (selectedOrder.workOrderType === "设备安装" || selectedOrder.workOrderType === "设备检测" || selectedOrder.workOrderType === "设备改造" || selectedOrder.workOrderType === "设备维修" || selectedOrder.workOrderType === "故障维修" || selectedOrder.workOrderType === "设备拆除" || selectedOrder.workOrderType === "更换药剂") && (
+                      <>
+                        {selectedOrder.equId && (
+                          <div>
+                            <p className="text-sm text-gray-600">设备编码</p>
+                            <p className="font-medium">{selectedOrder.equId}</p>
+                          </div>
+                        )}
+                        {selectedOrder.equipmentModel && (
+                          <div>
+                            <p className="text-sm text-gray-600">设备型号</p>
+                            <p className="font-medium">{selectedOrder.equipmentModel}</p>
+                          </div>
+                        )}
+                        {selectedOrder.brand && (
+                          <div>
+                            <p className="text-sm text-gray-600">品牌</p>
+                            <p className="font-medium">{selectedOrder.brand}</p>
+                          </div>
+                        )}
+                        {selectedOrder.reformType && (
+                          <div>
+                            <p className="text-sm text-gray-600">改造类型</p>
+                            <p className="font-medium">{selectedOrder.reformType}</p>
+                          </div>
+                        )}
+                        {selectedOrder.remark && (
+                          <div className="col-span-2">
+                            <p className="text-sm text-gray-600">备注</p>
+                            <p className="font-medium">{selectedOrder.remark}</p>
+                          </div>
+                        )}
+                      </>
+                    )}
+                    
+                    {/* 动火离人设备特有字段 */}
+                    {(selectedOrder.equipmentName?.includes("动火离人") || selectedOrder.equipmentType === "fire_extinguisher") && selectedOrder.remark && (
+                      <div className="col-span-2">
+                        <p className="text-sm text-gray-600">备注</p>
+                        <p className="font-medium">{selectedOrder.remark}</p>
+                      </div>
+                    )}
                   </div>
                 </CardContent>
               </Card>
 
-              {/* Photos */}
+              {/* Photos and Videos */}
               <Card>
                 <CardHeader>
-                  <CardTitle className="text-lg">作业照片</CardTitle>
+                  <CardTitle className="text-lg">作业照片与视频</CardTitle>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-4">
-                    {selectedOrder.frontImg && (
-                      <div>
-                        <p className="text-sm text-gray-600 mb-2">正面照</p>
-                        <div className="grid grid-cols-4 gap-2">
-                          {selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
-                            <img
-                              key={index}
-                              src={photo || "/placeholder.svg"}
-                              alt={`正面照 ${index + 1}`}
-                              className="w-full h-32 object-cover rounded border"
-                            />
-                          ))}
+                    {/* 厨房自动灭火设备 + 设备维修/设备改造/故障维修/设备拆除 的特殊显示 */}
+                    {(selectedOrder.equipmentName?.includes("厨房自动灭火") || selectedOrder.equipmentName === "厨房自动灭火设备") && 
+                     (selectedOrder.workOrderType === "设备维修" || selectedOrder.workOrderType === "设备改造" || selectedOrder.workOrderType === "故障维修" || selectedOrder.workOrderType === "设备拆除") ? (
+                      <>
+                        {/* 显示模式提示 */}
+                        <div className="bg-blue-50 border border-blue-200 rounded p-3 mb-2">
+                          <p className="text-sm text-blue-700">
+                            📌 当前为设备维修/改造/故障维修/拆除模式，仅显示视频和其他照片
+                          </p>
                         </div>
-                      </div>
-                    )}
-                    {selectedOrder.openImg && (
-                      <div>
-                        <p className="text-sm text-gray-600 mb-2">开箱照</p>
-                        <div className="grid grid-cols-4 gap-2">
-                          {selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
-                            <img
-                              key={index}
-                              src={photo || "/placeholder.svg"}
-                              alt={`开箱照 ${index + 1}`}
-                              className="w-full h-32 object-cover rounded border"
-                            />
-                          ))}
+                        
+                        {/* 视频 */}
+                        <div>
+                          <p className="text-sm text-gray-600 mb-2">视频</p>
+                          {(selectedOrder.sVideo || selectedOrder.repairVideo) ? (
+                            <div className="grid grid-cols-3 gap-2">
+                              {selectedOrder.sVideo && selectedOrder.sVideo.split(',').filter(url => url.trim()).map((video, index) => (
+                                <video
+                                  key={`s-${index}`}
+                                  src={`${API_BASE_URL}${video}`}
+                                  controls
+                                  className="w-full h-48 rounded border"
+                                >
+                                  您的浏览器不支持视频播放
+                                </video>
+                              ))}
+                              {selectedOrder.repairVideo && selectedOrder.repairVideo.split(',').filter(url => url.trim()).map((video, index) => (
+                                <video
+                                  key={`r-${index}`}
+                                  src={`${API_BASE_URL}${video}`}
+                                  controls
+                                  className="w-full h-48 rounded border"
+                                >
+                                  您的浏览器不支持视频播放
+                                </video>
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="text-sm text-gray-500">暂无视频</p>
+                          )}
                         </div>
-                      </div>
-                    )}
-                    {selectedOrder.ropeReImg && (
-                      <div>
-                        <p className="text-sm text-gray-600 mb-2">绳索恢复照</p>
-                        <div className="grid grid-cols-4 gap-2">
-                          {selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
-                            <img
-                              key={index}
-                              src={photo || "/placeholder.svg"}
-                              alt={`绳索恢复 ${index + 1}`}
-                              className="w-full h-32 object-cover rounded border"
-                            />
-                          ))}
+                        
+                        {/* 其他照片 */}
+                        <div>
+                          <p className="text-sm text-gray-600 mb-2">其他照片</p>
+                          {selectedOrder.otherImg ? (
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`其他照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="text-sm text-gray-500">暂无其他照片</p>
+                          )}
                         </div>
-                      </div>
-                    )}
-                    {selectedOrder.hostReImg && (
-                      <div>
-                        <p className="text-sm text-gray-600 mb-2">主机恢复照</p>
-                        <div className="grid grid-cols-4 gap-2">
-                          {selectedOrder.hostReImg.split(',').filter(url => url.trim()).map((photo, index) => (
-                            <img
-                              key={index}
-                              src={photo || "/placeholder.svg"}
-                              alt={`主机恢复 ${index + 1}`}
-                              className="w-full h-32 object-cover rounded border"
-                            />
-                          ))}
+                      </>
+                    ) : (selectedOrder.equipmentName?.includes("厨房自动灭火") || selectedOrder.equipmentName === "厨房自动灭火设备") && 
+                       selectedOrder.workOrderType === "更换药剂" ? (
+                      <>
+                        {/* 显示模式提示 */}
+                        <div className="bg-green-50 border border-green-200 rounded p-3 mb-2">
+                          <p className="text-sm text-green-700">
+                            📌 当前为更换药剂模式，显示正面照、开箱照、灌药剂照片、主机恢复照、其他照片
+                          </p>
                         </div>
-                      </div>
-                    )}
-                    {selectedOrder.otherImg && (
-                      <div>
-                        <p className="text-sm text-gray-600 mb-2">其他照片</p>
-                        <div className="grid grid-cols-4 gap-2">
-                          {selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
-                            <img
-                              key={index}
-                              src={photo || "/placeholder.svg"}
-                              alt={`其他照片 ${index + 1}`}
-                              className="w-full h-32 object-cover rounded border"
-                            />
-                          ))}
+                        
+                        {/* 正面照 */}
+                        {selectedOrder.frontImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">正面照</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`正面照 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 开箱照 */}
+                        {selectedOrder.openImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">开箱照</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`开箱照 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 灌药剂照片 */}
+                        {selectedOrder.ropeReImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">灌药剂照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`灌药剂照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 主机恢复照 */}
+                        {selectedOrder.hostReImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">主机恢复照</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.hostReImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`主机恢复照 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 其他照片 */}
+                        {selectedOrder.otherImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">其他照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`其他照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    ) : (selectedOrder.equipmentName?.includes("动火离人") || selectedOrder.equipmentType === "fire_extinguisher") ? (
+                      <>
+                        {/* 显示模式提示 */}
+                        <div className="bg-purple-50 border border-purple-200 rounded p-3 mb-2">
+                          <p className="text-sm text-purple-700">
+                            📌 当前为动火离人设备模式，显示主机照片、配电箱照片、测试视频、探头安装位置照片、其他照片
+                          </p>
                         </div>
-                      </div>
-                    )}
-                    {selectedOrder.repairImg && (
-                      <div>
-                        <p className="text-sm text-gray-600 mb-2">维修照片</p>
-                        <div className="grid grid-cols-4 gap-2">
-                          {selectedOrder.repairImg.split(',').filter(url => url.trim()).map((photo, index) => (
-                            <img
-                              key={index}
-                              src={photo || "/placeholder.svg"}
-                              alt={`维修照片 ${index + 1}`}
-                              className="w-full h-32 object-cover rounded border"
-                            />
-                          ))}
-                        </div>
-                      </div>
+                        
+                        {/* 主机照片 */}
+                        {selectedOrder.frontImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">主机照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`主机照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 配电箱照片 */}
+                        {selectedOrder.openImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">配电箱照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`配电箱照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 测试视频 */}
+                        {selectedOrder.sVideo && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">测试视频</p>
+                            <div className="grid grid-cols-3 gap-2">
+                              {selectedOrder.sVideo.split(',').filter(url => url.trim()).map((video, index) => (
+                                <video
+                                  key={index}
+                                  src={`${API_BASE_URL}${video}`}
+                                  controls
+                                  className="w-full h-48 rounded border"
+                                >
+                                  您的浏览器不支持视频播放
+                                </video>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 探头安装位置照片 */}
+                        {selectedOrder.ropeReImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">探头安装位置照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`探头安装位置照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 其他照片 */}
+                        {selectedOrder.otherImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">其他照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`其他照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        {/* 常规显示 */}
+                        {selectedOrder.frontImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">正面照</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.frontImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`正面照 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        {selectedOrder.openImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">开箱照</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.openImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`开箱照 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 厨房自动灭火设备特有的剪断视频 */}
+                        {selectedOrder.equipmentName === "厨房自动灭火设备" && 
+                         (selectedOrder.workOrderType === "设备安装" || selectedOrder.workOrderType === "设备检测") && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">剪断视频</p>
+                            {selectedOrder.sVideo ? (
+                              <div className="grid grid-cols-3 gap-2">
+                                {selectedOrder.sVideo.split(',').filter(url => url.trim()).map((video, index) => (
+                                  <video
+                                    key={index}
+                                    src={`${API_BASE_URL}${video}`}
+                                    controls
+                                    className="w-full h-48 rounded border"
+                                  >
+                                    您的浏览器不支持视频播放
+                                  </video>
+                                ))}
+                              </div>
+                            ) : (
+                              <p className="text-sm text-gray-500">暂无剪断视频</p>
+                            )}
+                          </div>
+                        )}
+                        
+                        {selectedOrder.ropeReImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">绳索恢复照</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.ropeReImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`绳索恢复 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        {selectedOrder.hostReImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">主机恢复照/恢复开箱照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.hostReImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`主机恢复 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        {selectedOrder.otherImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">其他照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.otherImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`其他照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        {selectedOrder.repairImg && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">维修照片</p>
+                            <div className="grid grid-cols-4 gap-2">
+                              {selectedOrder.repairImg.split(',').filter(url => url.trim()).map((photo, index) => (
+                                <img
+                                  key={index}
+                                  src={`${API_BASE_URL}${photo}` || "/placeholder.svg"}
+                                  alt={`维修照片 ${index + 1}`}
+                                  className="w-full h-32 object-cover rounded border"
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* 厨房自动灭火设备特有的维修视频 */}
+                        {selectedOrder.equipmentName === "厨房自动灭火设备" && 
+                         (selectedOrder.workOrderType === "设备安装" || selectedOrder.workOrderType === "设备检测") && (
+                          <div>
+                            <p className="text-sm text-gray-600 mb-2">维修视频</p>
+                            {selectedOrder.repairVideo ? (
+                              <div className="grid grid-cols-3 gap-2">
+                                {selectedOrder.repairVideo.split(',').filter(url => url.trim()).map((video, index) => (
+                                  <video
+                                    key={index}
+                                    src={`${API_BASE_URL}${video}`}
+                                    controls
+                                    className="w-full h-48 rounded border"
+                                  >
+                                    您的浏览器不支持视频播放
+                                  </video>
+                                ))}
+                              </div>
+                            ) : (
+                              <p className="text-sm text-gray-500">暂无维修视频</p>
+                            )}
+                          </div>
+                        )}
+                      </>
                     )}
                   </div>
                 </CardContent>