property-manager-side/wuye-manager-uniapp/pageSubPack/inspection/inspection_main.vue

<template>
  <view class="page_padding">
    <view class="flex-1 flex-col flex inspection_main_box">
      <view class="info_box">
        <view class="title_box flex items-center justify-between">
          <view class="title flex items-center">
            <view class="line"> </view>
            <text>{{ info.taskName }}</text>
          </view>
          <view class="inspection_status" v-if="info.status === 0"> <text>已巡检</text> </view>
          <view class="inspection_status todo" v-else>
            <text>未巡检</text>
          </view>
        </view>
        <view class="info">
          <view class="item">
            <text>巡检项目：</text>
            <text>{{ info.items.join('； ') }}</text>
          </view>
          <view class="item">
            <text>巡检时间：</text>
            <text>{{ info.time }}</text>
          </view>
          <view class="item">
            <text>巡检小区：</text>
            <text>{{ info.villageName }}</text>
          </view>
          <view class="item">
            <text>巡检路线：</text>
            <text>{{ info.planName }}</text>
          </view>
          <view class="item">
            <text>巡检点：</text>
            <text>{{ info.point.join('; ') }}</text>
          </view>
        </view>
      </view>
      <view class="result_box">
        <view class="inspecton_result_title">
          <text>巡检结果</text>
        </view>
        <view class="inspection_body" v-for="(item, index) in result" :key="index">
          <view class="inspection_items">
            <text class="label">巡检点：</text>
            <text>{{ item.pointName }}</text>
          </view>
          <view class="inspection_items">
            <text class="label">巡检人：</text>
            <text>{{ item.user }}</text>
          </view>
          <view class="inspection_items">
            <text class="label">手机号码：</text>
            <text>{{ item.phone }}</text>
          </view>
          <view class="inspection_items">
            <text class="label">巡检时间：</text>
            <text>{{ item.time }}</text>
          </view>
          <view class="inspection_items">
            <view class="label">巡检结果：</view>
            <view class="desction_value">{{ item.descrtion }}</view>
          </view>
          <view class="inspection_items">
            <view class="label">巡检照片：</view>
            <image
              lazy-load
              class="inspection_photo"
              v-for="(ite, ind) in item.photos"
              :key="ind"
              :src="ite"
              mode="scaleToFill"
            ></image>
          </view>
          <view class="linedash" v-show="index + 1 !== result.length"> </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const info = ref({
  items: ['设备巡检', '电力检查'],
  time: '07:00:00-12:00:00',
  villageName: '幸福苑小区',
  taskName: '幸福苑小区-B1层地下车区',
  status: 0, // 0 已巡检 1未巡检
  planName: '常规巡检路线1',
  point: ['安全出口1号', '巡检点2号', '巡检点3号']
})
const result = ref([
  {
    pointName: '安全出口1号',
    user: '李相龙',
    phone: '1502360831',
    time: '2026-10-25 08:10:01',
    descrtion: '设备正常运转，电力系统正常，设备使用正常',
    photos: [
      'https://picsum.photos/80',
      'https://picsum.photos/80',
      'https://picsum.photos/80',
      'https://picsum.photos/80'
    ]
  },
  {
    pointName: '巡检点2号',
    user: '李相龙',
    phone: '1502360831',
    time: '2026-10-25 10:10:01',
    descrtion: '部分墙体漏水',
    photos: [
      'https://picsum.photos/80',
      'https://picsum.photos/80',
      'https://picsum.photos/80',
      'https://picsum.photos/80'
    ]
  },
  {
    pointName: '巡检点3号',
    user: '李相龙',
    phone: '1502360831',
    time: '2026-10-25 12:10:01',
    descrtion: '正常',
    photos: [
      'https://picsum.photos/80',
      'https://picsum.photos/80',
      'https://picsum.photos/80',
      'https://picsum.photos/80'
    ]
  }
])
</script>

<style lang="scss" scoped>
.page_padding {
  background: #f9f9f9;
}
.inspection_main_box {
  padding: 20rpx 40rpx;
  background: #f9f9f9;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;

  .info_box {
    padding: 40rpx 30rpx;
    border-radius: 16rpx;
    background-color: #fff;
    .title_box {
      height: 40rpx;
      line-height: 40rpx;
      .title {
        font-weight: 550;
        font-size: 32rpx;
        color: #333333;
        line-height: 40rpx;
        .line {
          width: 6rpx;
          height: 28rpx;
          background: #4d5dfa;
          margin-right: 10rpx;
        }
      }
      .inspection_status {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 36rpx;

        &.todo {
          color: #4d5dfa;
        }
      }
    }
    .info {
      margin-top: 20rpx;
      .item {
        font-weight: 400;
        font-size: 28rpx;
        margin-bottom: 20rpx;
        color: #333333;
        line-height: 36rpx;
      }
    }
  }

  // 巡检结果
  .result_box {
    padding: 28rpx 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 20rpx;
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .inspecton_result_title {
      font-size: 32rpx;
      color: #222222;
      line-height: 40rpx;
      font-weight: 550;
    }
    .inspection_body {
      margin-top: 20rpx;
      padding-left: 15rpx;
      margin-bottom: 20rpx;
      .inspection_items {
        margin-bottom: 20rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
        .inspection_photo {
          width: 160rpx;
          height: 160rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          margin-top: 20rpx;
        }

        .label {
          font-weight: 450;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 20rpx;
        }

        .desction_value {
          margin-bottom: 20rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          line-height: 36rpx;
        }
      }
      .linedash {
        width: 100%;
        border: 2rpx dashed #ccc;
      }
    }
  }
}
</style>