linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat：设备模块添加图表

Browse Source
master
黄伟杰 3 weeks ago
parent 5244e54162
commit 6cce45cb0e
1 changed files with 395 additions and 5 deletions
Show Stats Download Patch File Download Diff File

400
src/components/dashboard/DeviceSection.vue
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save