From 6cce45cb0e052df65dbf16018b8ae078942a7ac1 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Fri, 17 Apr 2026 14:05:12 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=AE=BE=E5=A4=87=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E6=B7=BB=E5=8A=A0=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dashboard/DeviceSection.vue | 400 ++++++++++++++++++++-
 1 file changed, 395 insertions(+), 5 deletions(-)

diff --git a/src/components/dashboard/DeviceSection.vue b/src/components/dashboard/DeviceSection.vue
index 6c49a60..c056d2b 100644
--- a/src/components/dashboard/DeviceSection.vue
+++ b/src/components/dashboard/DeviceSection.vue
@@ -1,6 +1,7 @@
 <template>
   <view class="device-section">
     <view class="section-title">{{ t('deviceOverview.title') }}</view>
+    <!-- 设备状态统计 -->
     <view class="trend-stats">
       <view class="trend-stat-card">
         <text class="trend-stat-value">{{ deviceData.totalDevices }}</text>
@@ -19,6 +20,7 @@
         <text class="trend-stat-label">{{ t('deviceOverview.faultCount') }}</text>
       </view>
     </view>
+    <!-- 设备比率统计 -->
     <view class="trend-stats">
       <view class="trend-stat-card">
         <text class="trend-stat-value offline">{{ deviceData.offlineCount }}</text>
@@ -37,11 +39,69 @@
         <text class="trend-stat-label">{{ t('deviceOverview.faultRate') }}</text>
       </view>
     </view>
+
+    <!-- 稼动率/开机率趋势图 -->
+    <view class="rate-trend-section">
+      <view class="rate-trend-header">
+        <text class="rate-trend-title">{{ t('deviceOverview.rateTrend') }}</text>
+        <view class="filter-select" @click="showPeriodPicker = true">
+          <text class="filter-text">{{ currentPeriodLabel }}</text>
+          <text class="filter-arrow">▼</text>
+        </view>
+      </view>
+      <view class="switch-bar">
+        <view class="switch-item">
+          <text class="switch-label">{{ t('deviceOverview.onlyScheduled') }}</text>
+          <up-switch v-model="onlyScheduled" size="20" activeColor="#1a3a5c" @change="onSwitchChange" />
+        </view>
+        <view class="switch-item">
+          <text class="switch-label">{{ t('deviceOverview.skipHoliday') }}</text>
+          <up-switch v-model="skipHoliday" size="20" activeColor="#1a3a5c" @change="onSwitchChange" />
+        </view>
+      </view>
+      <view class="chart-box">
+        <qiun-data-charts type="line" :chartData="rateChartData" :canvas2d="false" :opts="rateChartOpts" />
+      </view>
+    </view>
+
+    <!-- 近7日平均稼动率排名 -->
+    <view class="rate-trend-section">
+      <view class="rate-trend-header">
+        <text class="rate-trend-title">{{ t('deviceOverview.utilizationRanking') }}</text>
+      </view>
+      <scroll-view class="ranking-scroll" scroll-y :style="{ height: rankingScrollHeight }">
+        <view :style="{ height: rankingChartHeight }">
+          <qiun-data-charts type="bar" :chartData="rankingChartData" :canvas2d="false" :opts="rankingChartOpts" />
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 单设备近7日稼动率/开机率趋势 -->
+    <view class="rate-trend-section">
+      <view class="rate-trend-header">
+        <text class="rate-trend-title">{{ t('deviceOverview.deviceRateTrend') }}</text>
+        <view class="filter-select" @click="showDevicePicker = true">
+          <text class="filter-text">{{ selectedDeviceName || t('deviceOverview.selectDevice') }}</text>
+          <text class="filter-arrow">▼</text>
+        </view>
+      </view>
+      <view class="device-trend-chart-box" v-if="selectedDeviceId">
+        <qiun-data-charts type="bar" :chartData="deviceTrendChartData" :canvas2d="false" :opts="deviceTrendChartOpts" />
+      </view>
+      <view class="empty-hint" v-else>
+        <text class="empty-hint-text">{{ t('deviceOverview.selectDeviceHint') }}</text>
+      </view>
+    </view>
+
+    <up-picker :show="showPeriodPicker" :columns="periodColumns" @confirm="onPeriodConfirm"
+      @cancel="showPeriodPicker = false" @close="showPeriodPicker = false" closeOnClickOverlay />
+    <up-picker :show="showDevicePicker" :columns="deviceColumns" @confirm="onDeviceConfirm"
+      @cancel="showDevicePicker = false" @close="showDevicePicker = false" closeOnClickOverlay />
   </view>
 </template>
 
 <script setup>
-import { reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import request from '@/utils/request'
 
@@ -58,8 +118,129 @@ const deviceData = reactive({
   faultRate: '-'
 })
 
+const showPeriodPicker = ref(false)
+const currentPeriod = ref('LAST_7_DAYS')
+const onlyScheduled = ref(true)
+const skipHoliday = ref(false)
+
+const periodColumns = computed(() => [
+  [
+    { text: t('deviceOverview.periodLastWeek'), value: 'LAST_WEEK' },
+    { text: t('deviceOverview.periodThisWeek'), value: 'THIS_WEEK' },
+    { text: t('deviceOverview.periodLast7Days'), value: 'LAST_7_DAYS' },
+    { text: t('deviceOverview.periodLastMonth'), value: 'LAST_MONTH' },
+    { text: t('deviceOverview.periodThisMonth'), value: 'THIS_MONTH' }
+  ]
+])
+
+const periodLabelMap = computed(() => ({
+  LAST_WEEK: t('deviceOverview.periodLastWeek'),
+  THIS_WEEK: t('deviceOverview.periodThisWeek'),
+  LAST_7_DAYS: t('deviceOverview.periodLast7Days'),
+  LAST_MONTH: t('deviceOverview.periodLastMonth'),
+  THIS_MONTH: t('deviceOverview.periodThisMonth')
+}))
+
+const currentPeriodLabel = computed(() => {
+  return periodLabelMap.value[currentPeriod.value] || t('deviceOverview.periodLast7Days')
+})
+
+const rateChartOpts = {
+  color: ['#1a3a5c', '#18bc37'],
+  dataLabel: false,
+  legend: { show: true, position: 'bottom' },
+  xAxis: { disableGrid: true, labelCount: 5 },
+  yAxis: { gridType: 'dash', dashLength: 2, data: [{ min: 0, max: 100 }] },
+  extra: { line: { type: 'straight', width: 2, activeType: 'hollow' } }
+}
+
+const rateChartData = reactive({
+  categories: [],
+  series: [
+    { name: '', data: [] },
+    { name: '', data: [] }
+  ]
+})
+
+const rankingChartOpts = {
+  color: ['#1a3a5c'],
+  dataLabel: true,
+  legend: { show: false },
+  xAxis: { disableGrid: true, max: 100 },
+  yAxis: { disableGrid: true },
+  extra: {
+    bar: {
+      type: 'group',
+      width: 20,
+      seriesGap: 4,
+      categoryGap: 4,
+      barBorderRadius: [4, 4, 0, 0],
+      linearType: 'custom',
+      linearOpacity: 0.6,
+      activeBgColor: '#1a3a5c',
+      activeBgOpacity: 0.08
+    }
+  }
+}
+
+const rankingChartData = reactive({
+  categories: [],
+  series: [{ name: '', data: [] }]
+})
+
+const ITEM_HEIGHT_PX = 30
+const MAX_VISIBLE = 6
+const rankingScrollHeight = computed(() => {
+  const count = rankingChartData.categories.length || 1
+  const visible = Math.min(count, MAX_VISIBLE)
+  return `${visible * ITEM_HEIGHT_PX + 30}px`
+})
+const rankingChartHeight = computed(() => {
+  const count = rankingChartData.categories.length || 1
+  return `${count * ITEM_HEIGHT_PX + 30}px`
+})
+
+const showDevicePicker = ref(false)
+const deviceList = ref([])
+const selectedDeviceId = ref(null)
+const selectedDeviceName = ref('')
+const isInitialLoad = ref(true)
+
+const deviceColumns = computed(() => [
+  deviceList.value.map((d) => ({ text: d.deviceName || d.name || '', value: d.id }))
+])
+
+const deviceTrendChartOpts = {
+  color: ['#1a3a5c', '#18bc37'],
+  dataLabel: true,
+  legend: { show: true, position: 'bottom' },
+  xAxis: { disableGrid: true, max: 100 },
+  yAxis: { disableGrid: true },
+  extra: {
+    bar: {
+      type: 'group',
+      width: 20,
+      seriesGap: 4,
+      categoryGap: 4,
+      barBorderRadius: [4, 4, 0, 0],
+      linearType: 'custom',
+      linearOpacity: 0.6,
+      activeBgColor: '#1a3a5c',
+      activeBgOpacity: 0.08
+    }
+  }
+}
+
+const deviceTrendChartData = reactive({
+  categories: [],
+  series: [
+    { name: '', data: [] },
+    { name: '', data: [] }
+  ]
+})
+
 async function loadDeviceOverview() {
-  const res = await request({ url: '/admin-api/iot/device/getDeviceOverview', method: 'get' })
+  const res = await request({ url: '/admin-api/iot/device/getDeviceOverview', method: 'get', showLoading: !isInitialLoad.value })
   const data = res?.data || {}
   deviceData.totalDevices = data.totalDevices ?? 0
   deviceData.runningCount = data.runningCount ?? 0
@@ -71,11 +252,131 @@ async function loadDeviceOverview() {
   deviceData.faultRate = data.faultRate ?? '-'
 }
 
-onMounted(() => {
-  loadDeviceOverview()
+async function loadRateTrend() {
+  const params = {
+    period: currentPeriod.value,
+    onlyScheduled: onlyScheduled.value,
+    skipHoliday: skipHoliday.value
+  }
+  const res = await request({ url: '/admin-api/iot/device/deviceRateTrend', method: 'get', params, showLoading: !isInitialLoad.value })
+  const list = res?.data || []
+  const categories = list.map((item) => (item.day || '').substring(5))
+  const utilizationData = list.map((item) => {
+    const v = parseFloat(item.utilizationRate)
+    return isNaN(v) ? 0 : Math.round(v * 100) / 100
+  })
+  const powerOnData = list.map((item) => {
+    const v = parseFloat(item.powerOnRate)
+    return isNaN(v) ? 0 : Math.round(v * 100) / 100
+  })
+  rateChartData.categories = categories
+  rateChartData.series = [
+    { name: t('deviceOverview.utilizationRateTrend'), data: utilizationData },
+    { name: t('deviceOverview.bootRate'), data: powerOnData }
+  ]
+}
+
+async function loadUtilizationRanking() {
+  const now = new Date()
+  const pad2 = (n) => String(n).padStart(2, '0')
+  const endTime = `${now.getFullYear()}-${pad2(now.getMonth() + 1)}-${pad2(now.getDate())} 23:59:59`
+  const start = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000)
+  const startTime = `${start.getFullYear()}-${pad2(start.getMonth() + 1)}-${pad2(start.getDate())} 00:00:00`
+  const params = { startTime, endTime }
+  const res = await request({ url: '/admin-api/iot/device-operation-record/deviceOperationPageList', method: 'get', params, showLoading: !isInitialLoad.value })
+  const list = res?.data || []
+  const sorted = [...list].sort((a, b) => {
+    const va = parseFloat(a.utilizationRate) || 0
+    const vb = parseFloat(b.utilizationRate) || 0
+    return vb - va
+  })
+  const categories = sorted.map((item) => item.deviceName || '')
+  const data = sorted.map((item) => {
+    const v = parseFloat(item.utilizationRate)
+    return isNaN(v) ? 0 : Math.round(v * 100) / 100
+  })
+  const total = sorted.length
+  const colors = sorted.map((_, index) => {
+    const ratio = total > 1 ? index / (total - 1) : 0
+    const r = Math.round(26 + ratio * (74 - 26))
+    const g = Math.round(58 + ratio * (144 - 58))
+    const b = Math.round(92 + ratio * (194 - 92))
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+  })
+  rankingChartData.categories = categories
+  rankingChartData.series = [{
+    name: t('deviceOverview.utilizationRateTrend'),
+    data,
+    linearColor: colors.map((c) => ['#e8f0f8', c])
+  }]
+}
+
+async function loadDeviceList() {
+  const res = await request({ url: '/admin-api/iot/device/deviceList', method: 'get', showLoading: !isInitialLoad.value })
+  deviceList.value = res?.data || []
+  if (deviceList.value.length > 0 && !selectedDeviceId.value) {
+    const first = deviceList.value[0]
+    selectedDeviceId.value = first.id
+    selectedDeviceName.value = first.deviceName || first.name || ''
+    loadDeviceRateTrend()
+  }
+}
+
+async function loadDeviceRateTrend() {
+  if (!selectedDeviceId.value) return
+  const res = await request({
+    url: '/admin-api/iot/device-operation-record/deviceRateTrendByDeviceId',
+    method: 'get',
+    params: { deviceId: selectedDeviceId.value },
+    showLoading: !isInitialLoad.value
+  })
+  const list = res?.data || []
+  const categories = list.map((item) => (item.day || '').substring(5))
+  const utilizationData = list.map((item) => {
+    const v = parseFloat(item.utilizationRate)
+    return isNaN(v) ? 0 : Math.round(v * 100) / 100
+  })
+  const powerOnData = list.map((item) => {
+    const v = parseFloat(item.powerOnRate)
+    return isNaN(v) ? 0 : Math.round(v * 100) / 100
+  })
+  deviceTrendChartData.categories = categories
+  deviceTrendChartData.series = [
+    { name: t('deviceOverview.utilizationRateTrend'), data: utilizationData },
+    { name: t('deviceOverview.bootRate'), data: powerOnData }
+  ]
+}
+
+function onDeviceConfirm(e) {
+  const val = e.value[0]
+  selectedDeviceId.value = val.value
+  selectedDeviceName.value = val.text
+  showDevicePicker.value = false
+  loadDeviceRateTrend()
+}
+
+function onPeriodConfirm(e) {
+  const val = e.value[0]?.value || e.value[0]
+  currentPeriod.value = val
+  showPeriodPicker.value = false
+  loadRateTrend()
+}
+
+function onSwitchChange() {
+  loadRateTrend()
+}
+
+onMounted(async () => {
+  await Promise.all([
+    loadDeviceOverview(),
+    loadRateTrend(),
+    loadUtilizationRanking(),
+    loadDeviceList()
+  ])
+  isInitialLoad.value = false
 })
 
-defineExpose({ loadDeviceOverview })
+defineExpose({ loadDeviceOverview, loadRateTrend, loadUtilizationRanking, loadDeviceRateTrend })
 </script>
 
 <style lang="scss" scoped>
@@ -153,4 +454,93 @@ defineExpose({ loadDeviceOverview })
   font-size: 22rpx;
   color: #999999;
 }
+
+.rate-trend-section {
+  margin-top: 28rpx;
+  padding-top: 24rpx;
+  border-top: 2rpx solid #f0f2f5;
+}
+
+.rate-trend-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.rate-trend-title {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1a3a5c;
+}
+
+.filter-select {
+  display: flex;
+  align-items: center;
+  padding: 10rpx 20rpx;
+  background: #f0f2f5;
+  border-radius: 12rpx;
+
+  &:active {
+    background: #e8ecf0;
+  }
+}
+
+.filter-text {
+  font-size: 24rpx;
+  color: #1a3a5c;
+  font-weight: 500;
+  margin-right: 8rpx;
+}
+
+.filter-arrow {
+  font-size: 18rpx;
+  color: #999999;
+}
+
+.switch-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  gap: 32rpx;
+}
+
+.switch-item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.switch-label {
+  font-size: 24rpx;
+  color: #666666;
+}
+
+.chart-box {
+  width: 100%;
+  height: 450rpx;
+  min-width: 100%;
+}
+
+.ranking-scroll {
+  width: 100%;
+  min-width: 100%;
+}
+
+.device-trend-chart-box {
+  width: 100%;
+  min-width: 100%;
+}
+
+.empty-hint {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 60rpx 0;
+}
+
+.empty-hint-text {
+  font-size: 26rpx;
+  color: #999999;
+}
 </style>