vue2-client 1.20.71 → 1.20.73

package/src/base-client/components/common/XInspectionDetailDrawer/components/AiDeviceStatus.vue

@@ -5,78 +5,160 @@
       <template slot="title">
         <div class="device-header">
           <div class="device-title">
-            <a-icon type="tool" style="color: #1890FF;" />
-            <span>AI拍照识别</span>
+            <a-icon type="tool" style="color: #1890FF;"/>
+            <span>{{ config?.titleText || 'AI检测结果' }}</span>
           </div>
           <div class="device-count">
-            AI识别 {{ (deviceList || []).length }} 项
+            {{ config?.titleLeftCountText || 'AI识别' }}{{ (deviceList || []).length }}{{
+              config?.titleLeftCountUnitText
+              || '项'
+            }}
           </div>
         </div>
       </template>
 
       <!-- 设备网格 -->
       <div class="device-grid">
-        <div
-          v-for="device in deviceList"
-          :key="device.id"
-          class="device-item"
-          :class="device.statusClass"
-        >
-          <!-- 状态指示条 -->
-          <!-- 设备内容 -->
-          <div class="device-content">
-            <!-- 设备头部：图标、名称、品牌型号和状态 -->
-            <div class="device-item-header">
-              <div class="device-info-section">
-                <div class="device-icon">
-                  <device-icon :type="getDeviceIconType(device)" />
+        <!-- 第一行：两个卡片并排 -->
+        <div class="device-row">
+          <!-- 操作违规 -->
+          <div class="device-item">
+            <div class="device-content">
+              <div class="device-item-header">
+                <div class="device-info-section">
+                  <div class="device-icon">
+                    <device-icon type="stove"/>
+                  </div>
+                  <div class="device-info">
+                    <div class="device-name">{{ getDeviceByName('operationalViolation')?.name }}</div>
+                    <div class="device-brand-model">{{ getDeviceByName('operationalViolation')?.desc }}</div>
+                  </div>
                 </div>
-                <div class="device-info">
-                  <div class="device-name">{{ getDeviceName(device) }}</div>
-                  <div class="device-brand-model"></div>
+                <div class="device-status-badge status-warning">
+                  <span class="status-text">{{ getDeviceByName('operationalViolation')?.tag }}</span>
                 </div>
               </div>
-              <div class="device-status-badge" :class="getStatusBadgeClass(device)">
-                <span class="status-text">{{ getDeviceKxd(device) }}</span>
+              <div class="violation-section">
+                <div class="violation-row section-header">
+                  <span class="header-item">详情</span>
+                  <span class="header-item">图片</span>
+                </div>
+                <div
+                  v-for="item in getDeviceByName('operationalViolation')?.item || []"
+                  :key="item.key"
+                  class="violation-row">
+                  <span class="violation-key">{{ item.key }}</span>
+                  <div class="violation-images" v-if="item.img && item.img.length > 0">
+                    <img
+                      v-for="(imgUrl, idx) in item.img"
+                      :key="idx"
+                      :src="imgUrl"
+                      :alt="item.key + '-' + idx"
+                      class="violation-img"
+                    />
+                  </div>
+                  <div v-else class="violation-images-empty"></div>
+                </div>
+                <div v-if="(!getDeviceByName('operationalViolation')?.item || getDeviceByName('operationalViolation')?.item.length === 0)" class="empty-content">
+                  <span>暂无数据</span>
+                </div>
               </div>
             </div>
+          </div>
 
-            <!-- 安全检查 -->
-            <div class="safety-checks-section" v-if="getDeviceDetail(device).length > 0">
-              <div class="section-title">详情</div>
-              <div class="safety-checks-grid">
+          <!-- 检测结果不一致 -->
+          <div class="device-item">
+            <div class="device-content">
+              <div class="device-item-header">
+                <div class="device-info-section">
+                  <div class="device-icon">
+                    <device-icon type="stove"/>
+                  </div>
+                  <div class="device-info">
+                    <div class="device-name">{{ getDeviceByName('detectionResultInconsistent')?.name }}</div>
+                    <div class="device-brand-model">{{ getDeviceByName('detectionResultInconsistent')?.desc }}</div>
+                  </div>
+                </div>
+                <div class="device-status-badge status-warning">
+                  <span class="status-text">{{ getDeviceByName('detectionResultInconsistent')?.tag }}</span>
+                </div>
+              </div>
+              <div class="inconsistent-section">
+                <div class="inconsistent-row section-header">
+                  <span class="header-item">详情</span>
+                  <span class="header-item">图片</span>
+                  <span class="header-item">安检结果</span>
+                  <span class="header-item">AI检测结果</span>
+                </div>
                 <div
-                  v-for="check in getDeviceDetail(device)"
-                  :key="check.key"
-                  class="check-item"
-                  :class="{ 'check-risk': check.isRisk }"
-                >
-                  <span class="check-label">{{ check.key }}：</span>
-                  <span class="check-value" :class="getCheckValueClass(check.isRisk)">{{ check.value }}</span>
+                  v-for="item in getDeviceByName('detectionResultInconsistent')?.item || []"
+                  :key="item.index"
+                  class="inconsistent-row">
+                  <div class="inconsistent-item">{{ item.name }}</div>
+                  <div class="inconsistent-item"><img v-if="item.inspectorImg" :src="item.inspectorImg" class="violation-img" /><span v-else></span></div>
+                  <div class="inconsistent-item">
+                    <a-tag :color="getStatusTag(item.inspectorVal, item.options)?.color">
+                      {{ getStatusTag(item.inspectorVal, item.options)?.text }}
+                    </a-tag>
+                  </div>
+                  <div class="inconsistent-action">
+                    <a-tag
+                      :color="getStatusTag(item.aiVal, item.options)?.color"
+                      :class="{ 'clickable-tag': isInconsistent(item) }"
+                      @click="isInconsistent(item) && handleProcess(item)"
+                    >
+                      {{ getStatusTag(item.aiVal, item.options)?.text }}
+                    </a-tag>
+                  </div>
+                </div>
+                <div v-if="(!getDeviceByName('detectionResultInconsistent')?.item || getDeviceByName('detectionResultInconsistent')?.item.length === 0)" class="empty-content">
+                  <span>暂无数据</span>
                 </div>
               </div>
             </div>
+          </div>
+        </div>
 
-            <!-- 设备照片 -->
-            <div class="device-photos-section" v-if="getDevicePhoto(device).length > 0">
-              <div class="section-title">设备照片</div>
-              <file-image-group
-                :file-ids="getDevicePhoto(device)"
-                :service-name="serviceName"
-                :columns="2"
-                :image-size="60"
-                :gap="8"
-                :alt-prefix="device.name + '照片'"
-                empty-text="暂无设备照片"
-              />
+        <!-- 第二行：新增隐患（只有item长度大于0才展示） -->
+        <div class="device-row" v-if="getDeviceByName('addDanger')?.item && getDeviceByName('addDanger')?.item.length > 0">
+          <div class="device-item danger-full-width">
+            <div class="device-content">
+              <div class="device-item-header">
+                <div class="device-info-section">
+                  <div class="device-icon">
+                    <device-icon type="stove"/>
+                  </div>
+                  <div class="device-info">
+                    <div class="device-name">{{ getDeviceByName('addDanger')?.name }}</div>
+                    <div class="device-brand-model">{{ getDeviceByName('addDanger')?.desc }}</div>
+                  </div>
+                </div>
+                <div class="device-status-badge status-warning">
+                  <span class="status-text">{{ getDeviceByName('addDanger')?.tag }}</span>
+                </div>
+              </div>
+              <div class="danger-section">
+                <div class="danger-row section-header">
+                  <span class="header-item">详情</span>
+                  <span class="header-item">图片</span>
+                  <span class="header-item">AI检测结果</span>
+                </div>
+                <div
+                  v-for="item in getDeviceByName('addDanger')?.item || []"
+                  :key="item.index"
+                  class="danger-row">
+                  <div class="danger-item">{{ item.name }}</div>
+                  <div class="danger-item"><img v-if="item.aiImg" :src="item.aiImg" class="violation-img" /><span v-else></span></div>
+                  <div class="danger-item">{{ item.aiVal }}</div>
+                </div>
+              </div>
             </div>
-
           </div>
         </div>
 
         <!-- 空状态 -->
-        <div v-if="!deviceList || deviceList.length === 0" class="device-empty">
-          <a-icon type="tool" style="font-size: 48px; color: #d9d9d9;" />
+        <div v-if="deviceList.length === 0" class="device-empty">
+          <a-icon type="tool" style="font-size: 48px; color: #d9d9d9;"/>
           <p style="color: #999; margin-top: 16px;">暂无设备信息</p>
         </div>
       </div>
@@ -85,7 +167,7 @@
 </template>
 
 <script>
-import { FileImageGroup } from '@vue2-client/base-client/components/common/FileImage'
+import {FileImageGroup} from '@vue2-client/base-client/components/common/FileImage'
 import DeviceIcon from './DeviceIcon.vue'
 
 export default {
@@ -95,180 +177,89 @@ export default {
     DeviceIcon
   },
   inject: {
-    serviceName: { default: '' }
+    serviceName: {default: ''}
   },
   props: {
     deviceList: {
       type: Array,
       default: () => []
+    },
+    config: {
+      type: Object,
+      default: () => {
+      }
     }
   },
   methods: {
-    /**
-     * 根据设备信息获取图标类型
-     */
-    getDeviceIconType (device) {
-      // 根据设备名称判断类型
-      return 'stove'
-    },
-
-    getDeviceName (device) {
-      // 根据设备名称判断类型
-      const find = device.properties.find(item => item.key === '名称')
-      return find?.value || 'default'
-    },
-
-    getDeviceKxd (device) {
-      // 根据设备名称判断类型
-      const find = device.properties.find(item => item.key === '可信度')
-      return find?.value || '90%'
-    },
-
-    getDeviceDetail (device) {
-      // 过滤掉“名称”
-      const filter = device.properties.filter(item => item.key !== '名称')
-
-      // 遍历处理“可信度”
-      const result = filter.map(item => {
-        if (item.key === '可信度') {
-          const val = item.value
-
-          // 如果是类似 "62.7%" 或 "62.86000000000001%"
-          if (typeof val === 'string' && val.includes('%')) {
-            const num = parseFloat(val.replace('%', ''))
-
-            if (!isNaN(num)) {
-              // 控制精度（保留1位 or 2位按你需求）
-              item.value = num.toFixed(1) + '%'
-            }
-          }
-
-          // 如果是纯数字（例如 0.6286）
-          else if (typeof val === 'number') {
-            item.value = (val * 100).toFixed(1) + '%'
-          }
-        }
-
-        return item
-      })
-
-      console.warn('getDeviceDetail', result)
-      return result || []
-    },
 
     /**
-     * 检查照片是否有真实文件ID
+     * 根据key获取设备数据
+     * @param {string} key - 设备key
+     * @returns {object|null} - 设备数据
      */
-    hasRealFileIds (photos) {
-      return photos && photos.length > 0 && photos.some(photo => photo.fileId)
+    getDeviceByName(key) {
+      return this.deviceList.find(device => device.key === key)
     },
 
     /**
-     * 获取文件ID数组
+     * 判断安检结果和AI检测结果是否不一致
+     * @param {object} item - 检测项数据
+     * @returns {boolean} - 是否不一致
      */
-    getFileIds (photos) {
-      return photos.filter(photo => photo.fileId).map(photo => photo.fileId)
+    isInconsistent(item) {
+      const inspectorTag = this.getStatusTag(item.inspectorVal, item.options)
+      const aiTag = this.getStatusTag(item.aiVal, item.options)
+      return inspectorTag?.text !== aiTag?.text
     },
 
     /**
-     * 获取状态徽章样式类
+     * 根据值和options判断状态
+     * @param {string} value - 当前值
+     * @param {array} options - 选项配置数组
+     * @returns {object} - { color, text }
      */
-    getStatusBadgeClass (device) {
-      const statusMap = {
-        normal: 'status-normal',
-        warning: 'status-warning',
-        error: 'status-error'
-      }
-      // 根据设备名称判断类型
-      const find = device.properties.find(item => item.key === '可信度')
-      const value = parseFloat(find?.value)
-      console.warn('getStatusBadgeClass', value)
-
-      if (isNaN(value)) return statusMap.error
-
-      if (value >= 70) {
-        return statusMap.normal
-      } else if (value >= 40) {
-        return statusMap.warning
-      } else {
-        return statusMap.error
+    getStatusTag(value, options) {
+      if (!options || !Array.isArray(options)) {
+        return { color: 'default', text: value || '未知' }
       }
-    },
 
-    /**
-     * 格式化字段值
-     */
-    formatFieldValue (field) {
-      if (!field.value) return '——'
+      // 扁平化 options（处理二维数组）
+      const flatOptions = options.flat()
+      const matchedOption = flatOptions.find(opt => opt.data === value)
 
-      // 如果是日期类型，格式化显示
-      if (field.type === 'datePicker' || field.key.includes('_date')) {
-        return this.formatDate(field.value)
+      if (matchedOption) {
+        if (matchedOption.isdefect) {
+          return { color: 'red', text: '异常' }
+        } else {
+          return { color: 'green', text: '正常' }
+        }
       }
 
-      return field.value
+      return { color: 'default', text: value || '未知' }
     },
 
     /**
-     * 格式化日期
+     * 处理按钮点击事件 - 将数据抛出到父组件
      */
-    formatDate (dateStr) {
-      if (!dateStr) return '——'
-
-      try {
-        const date = new Date(dateStr)
-        if (isNaN(date.getTime())) return dateStr
-
-        return date.toISOString().substring(0, 10)
-      } catch (error) {
-        return dateStr
-      }
+    handleProcess(item) {
+      this.$emit('process-item', item)
     },
 
     /**
-     *
+     * 获取设备照片（将 url 数组转换为 {url} 数组）
      */
-    getDevicePhoto(device) {
-      return device?.image || []
+    getImagesPhotos(images) {
+      return Array.isArray(images)
+        ? images.map(url => ({url}))
+        : []
     },
 
     /**
      * 预览隐患照片
      */
-    handlePreviewHazardPhotos (hazardPhotos, currentIndex = 0) {
+    handlePreviewHazardPhotos(hazardPhotos, currentIndex = 0) {
       const photos = hazardPhotos.map(photo => photo.url)
       this.$emit('preview-photos', photos, currentIndex)
-    },
-
-    /**
-     * 获取检查值样式类
-     */
-    getCheckValueClass (isRisk) {
-      return isRisk ? 'check-value-risk' : 'check-value-normal'
-    },
-
-    /**
-     * 获取建议样式类
-     */
-    getAdviceClass (status) {
-      const classMap = {
-        normal: 'advice-normal',
-        warning: 'advice-warning',
-        error: 'advice-error'
-      }
-      return classMap[status] || 'advice-normal'
-    },
-
-    /**
-     * 获取建议图标
-     */
-    getAdviceIcon (status) {
-      const iconMap = {
-        normal: 'check-circle',
-        warning: 'exclamation-circle',
-        error: 'close-circle'
-      }
-      return iconMap[status] || 'info-circle'
     }
   }
 }
@@ -304,10 +295,15 @@ export default {
 }
 
 .device-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 150px;
+}
+
+.device-row {
+  display: flex;
   gap: 16px;
-  min-height: 200px;
 }
 
 .device-item {
@@ -318,11 +314,16 @@ export default {
   overflow: hidden;
   background: white;
   transition: all 0.3s ease;
+  width: calc(50% - 8px);
 
   &:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     transform: translateY(-2px);
   }
+
+  &.danger-full-width {
+    width: calc(50% - 8px);
+  }
 }
 
 .device-status-bar {
@@ -358,7 +359,7 @@ export default {
   gap: 4px;
   padding: 2px 8px;
   border-radius: 12px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 500;
   border: 1px solid;
   white-space: nowrap; // 禁止换行，防止打印时文字竖排显示
@@ -431,12 +432,12 @@ export default {
   }
 
   span {
-    font-size: 11px;
+    font-size: 12px;
   }
 }
 
 .device-details {
-  font-size: 11px;
+  font-size: 12px;
   color: #6b7280;
   line-height: 1.4;
   max-height: 120px;
@@ -492,20 +493,45 @@ export default {
   text-align: center;
 }
 
+/* 空内容样式 */
+.empty-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: #9ca3af;
+  font-size: 12px;
+}
+
 /* 响应式适配 */
 @media (max-width: 1200px) {
   .device-grid {
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: 12px;
   }
+
+  .device-row {
+    gap: 12px;
+  }
+
+  .device-item {
+    width: calc(50% - 6px);
+  }
 }
 
 @media (max-width: 768px) {
   .device-grid {
-    grid-template-columns: 1fr;
     gap: 12px;
   }
 
+  .device-row {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .device-item {
+    width: 100%;
+  }
+
   .device-content {
     padding: 12px;
   }
@@ -617,7 +643,7 @@ export default {
 }
 
 .tag-label {
-  font-size: 11px;
+  font-size: 12px;
   color: #6b7280;
   font-weight: 500;
 }
@@ -635,8 +661,9 @@ export default {
 }
 
 .check-item {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr 60px;
+  gap: 12px;
   align-items: center;
   font-size: 12px;
   padding: 6px 0;
@@ -648,6 +675,11 @@ export default {
   }
 }
 
+.check-text {
+  display: flex;
+  align-items: center;
+}
+
 .check-label {
   color: #6b7280;
   flex-shrink: 0;
@@ -663,6 +695,18 @@ export default {
   font-weight: 600;
 }
 
+.check-photo {
+  width: 60px;
+  height: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.check-photo-placeholder {
+  width: 60px;
+  height: 40px;
+}
+
 .hazard-photos-section {
   .hazard-photos-grid {
     display: grid;
@@ -786,6 +830,165 @@ export default {
   }
 }
 
+/* 标题行样式 */
+.section-header {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 8px;
+}
+
+/* 操作违规样式 */
+.violation-section {
+  margin-top: 12px;
+
+  .section-header {
+    .header-item:nth-child(1) {
+      flex: 3;
+    }
+    .header-item:nth-child(2) {
+      flex: 1;
+    }
+  }
+}
+
+.violation-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.violation-key {
+  font-size: 12px;
+  color: #374151;
+  flex: 1;
+}
+
+.violation-images {
+  display: flex;
+  gap: 8px;
+}
+
+.violation-img {
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.violation-images-empty {
+  width: 50px;
+  height: 50px;
+  border: 1px dashed #d1d5db;
+  border-radius: 4px;
+  background: #f9fafb;
+}
+
+/* 检测结果不一致样式 */
+.inconsistent-section {
+  margin-top: 12px;
+
+  .section-header {
+    display: grid;
+    grid-template-columns: 5fr 3fr 3fr 3fr;
+    gap: 8px;
+    padding: 8px;
+    border-bottom: 1px solid #e5e7eb;
+    margin-bottom: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #6b7280;
+  }
+}
+
+.inconsistent-row {
+  display: grid;
+  grid-template-columns: 5fr 3fr 3fr 3fr;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #6b7280;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.inconsistent-item {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  word-break: break-word;
+  text-align: left;
+}
+
+.inconsistent-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clickable-tag {
+  cursor: pointer;
+}
+
+/* 新增隐患样式 */
+.danger-section {
+  margin-top: 12px;
+
+  .section-header {
+    display: grid;
+    grid-template-columns: 3fr 2fr 2fr;
+    gap: 8px;
+    padding: 8px;
+    //border-bottom: 1px solid #e5e7eb;
+    //margin-bottom: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #6b7280;
+  }
+}
+
+.danger-row {
+  display: grid;
+  grid-template-columns: 3fr 2fr 2fr;
+  gap: 8px;
+  padding: 8px;
+  //background: #fff5f5;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  //border: 1px solid #ffccc7;
+  font-size: 12px;
+  color: #6b7280;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.danger-item {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  word-break: break-word;
+  text-align: left;
+}
+
+.danger-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* 响应式适配优化 */
 @media (max-width: 1024px) {
   .basic-info-tags {
@@ -798,7 +1001,7 @@ export default {
   }
 
   .tag-value {
-    font-size: 11px;
+    font-size: 12px;
   }
 
   .device-icon {
@@ -815,7 +1018,7 @@ export default {
   }
 
   .device-brand-model {
-    font-size: 11px;
+    font-size: 12px;
   }
 }
 
@@ -846,11 +1049,11 @@ export default {
   }
 
   .section-title {
-    font-size: 11px;
+    font-size: 12px;
   }
 
   .check-item {
-    font-size: 11px;
+    font-size: 12px;
   }
 }
 </style>