odf_new/odf-uniapp/pages/trunk-search/index.vue

<template>
  <view class="trunk-search-page">
    <view class="content">
      <!-- 顶部导航栏 -->
      <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="nav-bar-inner">
          <image
            class="nav-icon"
            src="/static/images/ic_back.png"
            mode="aspectFit"
            @click="goBack"
          />
          <text class="nav-title">搜索结果</text>
          <view class="nav-icon-placeholder" />
        </view>
      </view>

      <!-- 搜索结果区域 -->
      <view class="result-area" v-if="!loading">
        <!-- 光缆分类 -->
        <view class="section" v-if="cables.length > 0">
          <text class="section-title">光缆</text>
          <view
            class="cable-card"
            v-for="item in cables"
            :key="item.id"
            @click="goCableFaultList(item)"
          >
            <text class="cable-name">{{ item.cableName }}</text>
          </view>
        </view>

        <!-- 故障分类 -->
        <view class="section" v-if="faults.length > 0">
          <text class="section-title">故障列表</text>
          <view
            class="fault-card"
            v-for="item in faults"
            :key="item.id"
            @click="goFaultDetail(item)"
          >
            <view class="fault-row">
              <text class="fault-label">故障时间：</text>
              <text class="fault-value">{{ item.faultTime }}</text>
            </view>
            <view class="fault-row">
              <text class="fault-label">故障原因：</text>
              <text class="fault-value">{{ item.faultReason }}</text>
            </view>
            <view class="fault-row">
              <text class="fault-label">表显故障里程：</text>
              <text class="fault-value">{{ item.mileage }}</text>
            </view>
            <view class="fault-row last-row">
              <text class="fault-label">所属光缆：</text>
              <text class="fault-value">{{ item.cableName }}</text>
            </view>
          </view>
        </view>

        <!-- 无结果 -->
        <view class="no-result" v-if="cables.length === 0 && faults.length === 0">
          <text class="no-result-text">暂无搜索结果</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { searchCablesAndFaults } from '@/services/trunk'

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
const cables = ref([])
const faults = ref([])
const loading = ref(true)

async function doSearch(deptId, keyword) {
  loading.value = true
  try {
    const res = await searchCablesAndFaults(deptId, keyword)
    if (res.code === 200 && res.data) {
      cables.value = res.data.cables || []
      faults.value = res.data.faults || []
    }
  } catch (err) {
    uni.showToast({ title: '搜索失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function goBack() {
  uni.navigateBack()
}

function goCableFaultList(item) {
  uni.navigateTo({
    url: '/pages/fault-list/index?cableId=' + item.id + '&cableName=' + encodeURIComponent(item.cableName)
  })
}

function goFaultDetail(item) {
  uni.navigateTo({ url: '/pages/fault-detail/index?faultId=' + item.id })
}

onLoad((options) => {
  const deptId = options.deptId || ''
  const keyword = decodeURIComponent(options.keyword || '')
  if (deptId && keyword) {
    doSearch(deptId, keyword)
  } else {
    loading.value = false
  }
})
</script>

<style scoped>
.trunk-search-page {
  position: relative;
  min-height: 100vh;
  background-color: transparent;
}

.content {
  position: relative;
  z-index: 1;
}

.nav-bar {
  width: 100%;
}

.nav-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
}

.nav-icon {
  width: 44rpx;
  height: 44rpx;
}

.nav-icon-placeholder {
  width: 44rpx;
  height: 44rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
}

.result-area {
  padding: 16rpx 0;
}

.section {
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  padding: 16rpx 24rpx 8rpx;
  display: block;
}

/* 光缆卡片 — 复用 cable 页样式 */
.cable-card {
  display: flex;
  align-items: center;
  margin: 0 24rpx 20rpx;
  padding: 28rpx 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #E8E8E8;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.cable-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

/* 故障卡片 — 复用 fault-list 页样式 */
.fault-card {
  background-color: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #E8E8E8;
  padding: 24rpx;
  margin: 0 24rpx 20rpx;
}

.fault-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

.fault-row.last-row {
  margin-bottom: 0;
}

.fault-label {
  font-size: 26rpx;
  color: #999;
  flex-shrink: 0;
}

.fault-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

/* 无结果 */
.no-result {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.no-result-text {
  font-size: 28rpx;
  color: #999;
}
</style>