Road_roller/src/components/work/deviceControl.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useCurrentProject } from '@/composables/useCurrentProject'

const { hasCurrentProject } = useCurrentProject()

const deviceInfo = computed(() => {
  if (!hasCurrentProject.value) {
    return {
      编号: '--',
      status: '--',
      connected: '--',
      workStatus: '--',
      signalStatus: '--',
    }
  }
  return {
    编号: '徐工XS65H #01',
    status: '作业中',
    connected: '已连接',
    workStatus: '正常运行',
    signalStatus: '信号良好',
  }
})

const workStatus = computed(() => (hasCurrentProject.value ? '作业进行中' : '--'))
</script>

<template>
  <view class="card">
    <view class="card-body">
      <!-- 左侧：设备作业状态 -->
      <view class="status-section">
        <view class="section-header">
          <view class="icon-box icon-box--blue">
            <wd-icon name="equipment" size="20px" color="#fff" />
          </view>
          <view class="header-info">
            <text class="title">
              设备作业状态
            </text>
            <text class="subtitle">
              设备编号 {{ deviceInfo.编号 }}
            </text>
          </view>
        </view>

        <view class="status-columns">
          <!-- 左列：作业状态 -->
          <view class="status-col">
            <view class="tag">
              <view class="dot" :class="hasCurrentProject ? 'dot--green' : 'dot--gray'" />
              <text>{{ deviceInfo.status }}</text>
            </view>
            <text class="info-label">
              压实作业
            </text>
            <text class="info-value" :class="{ 'info-value--green': hasCurrentProject }">
              {{ deviceInfo.workStatus }}
            </text>
          </view>

          <!-- 右列：连接状态 -->
          <view class="status-col">
            <view class="tag">
              <view class="dot" :class="hasCurrentProject ? 'dot--green' : 'dot--gray'" />
              <text>{{ deviceInfo.connected }}</text>
            </view>
            <text class="info-label">
              设备连接
            </text>
            <text class="info-value" :class="{ 'info-value--green': hasCurrentProject }">
              {{ deviceInfo.signalStatus }}
            </text>
          </view>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="divider" />

      <!-- 右侧：作业控制 -->
      <view class="control-section">
        <view class="section-header">
          <view class="icon-box icon-box--blue">
            <wd-icon name="user" size="20px" color="#fff" />
          </view>
          <view class="header-info">
            <text class="title">
              作业控制
            </text>
          </view>
        </view>

        <view class="control-rows">
          <!-- 第一行：空（对齐左侧 tag 行） -->
          <view class="control-row" />

          <!-- 第二行：当前状态（对齐左侧 label 行） -->
          <view class="control-row">
            <view class="tag">
              <view class="dot" :class="hasCurrentProject ? 'dot--green' : 'dot--gray'" />
              <text>当前：{{ workStatus }}</text>
            </view>
          </view>

          <!-- 第三行：暂停按钮（对齐左侧 value 行） -->
          <view class="control-row">
            <wd-button type="warning" class="pause-btn" round :disabled="!hasCurrentProject">
              暂停作业
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
}

.card-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.status-section,
.control-section {
  flex: 1;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 12px;
}

.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box--blue {
  background: #3b82f6;
}

.header-info {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #999;
  margin-top: 2px;
}

.status-columns {
  display: flex;
  gap: 24px;
}

.status-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot--green {
  background: #22c55e;
}

.dot--gray {
  background: #ccc;
}

.info-label {
  font-size: 14px;
  color: #333333;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.info-value--green {
  color: #22c55e;
}

.divider {
  width: 1px;
  background: #eee;
  align-self: stretch;
}

.control-rows {
  display: flex;
  flex-direction: column;
  gap: 34rpx;
}

.control-row {
  display: flex;
  align-items: center;
}

.pause-btn {
  width: 80%;
}
</style>