merge
kkk-ops
3 months ago
commit
9674e024d1
@ -0,0 +1,31 @@
|
|||||||
|
import request from '@/config/axios'
|
||||||
|
|
||||||
|
export interface DeviceOperationRecordVO {
|
||||||
|
id: number
|
||||||
|
deviceCode: string
|
||||||
|
deviceName: string
|
||||||
|
totalRunningTime: number
|
||||||
|
totalStandbyTime: number
|
||||||
|
totalFaultTime: number
|
||||||
|
totalWarningTime: number
|
||||||
|
utilizationRate: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceOperationRecordPageParams {
|
||||||
|
pageNo: number
|
||||||
|
pageSize: number
|
||||||
|
deviceCode?: string
|
||||||
|
deviceName?: string
|
||||||
|
startTime?: string
|
||||||
|
endTime?: string
|
||||||
|
ids?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DeviceOperationRecordApi = {
|
||||||
|
getDeviceOperationRecordPage: async (params: DeviceOperationRecordPageParams) => {
|
||||||
|
return await request.get({ url: `/iot/device-operation-record/deviceOperationPage`, params })
|
||||||
|
},
|
||||||
|
exportDeviceOperationReport: async (params: DeviceOperationRecordPageParams) => {
|
||||||
|
return await request.download({ url: `/iot/device-operation-record/export-device-operation-report`, params })
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,830 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<div v-loading="detailLoading" class="mold-detail-body">
|
||||||
|
<el-descriptions :column="3" class="mold-detail-desc">
|
||||||
|
<el-descriptions-item label="模具编码">{{ detailData?.code ?? '' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="模具名称">{{ detailData?.name ?? '' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="模具状态">
|
||||||
|
<dict-tag :type="DICT_TYPE.ERP_MOLD_STATUS" :value="detailData?.status" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="模具型号">{{ detailData?.brandName ?? '' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="模具规格">{{ detailData?.moldType ?? '' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="工序">
|
||||||
|
<dict-tag :type="DICT_TYPE.MES_ORG_TYPE" :value="detailData?.orgType" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="模穴数">{{ detailData?.moldSize ?? '' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="使用次数/次">{{ detailData?.useTime ?? '' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="使用设备">{{ detailData?.machineName ?? detailData?.machineId ?? ''
|
||||||
|
}}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="入库日期">{{ formatDetailDate(detailData?.inTime) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="是否启用">
|
||||||
|
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData?.isEnable" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="备注">{{ detailData?.remark ?? '' }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
|
||||||
|
<div class="mold-detail-tabs">
|
||||||
|
<el-tabs v-model="detailActiveTab" class="mt-12px">
|
||||||
|
<el-tab-pane label="点检履历" name="check">
|
||||||
|
<div class="device-ledger-tab-toolbar">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="inspectionDateRange"
|
||||||
|
type="daterange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
range-separator="至"
|
||||||
|
:unlink-panels="true"
|
||||||
|
class="mr-10px"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" plain @click="handleQueryInspection">查询</el-button>
|
||||||
|
<el-button @click="handleResetInspection">重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
:loading="inspectionExportLoading"
|
||||||
|
@click="handleExportInspection"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-empty v-if="!inspectionStepGroups.length" />
|
||||||
|
<el-steps
|
||||||
|
v-else direction="vertical" :active="inspectionStepGroups.length"
|
||||||
|
class="device-ledger-history-steps">
|
||||||
|
<el-step v-for="group in inspectionStepGroups" :key="group.key">
|
||||||
|
<template #title>
|
||||||
|
<div class="device-ledger-history-title">
|
||||||
|
<span class="device-ledger-history-time">[{{ group.time }}]</span>
|
||||||
|
<span class="device-ledger-history-operator">操作人: {{ group.operator }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #description>
|
||||||
|
<div class="device-ledger-history-items">
|
||||||
|
<div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
|
||||||
|
<div class="device-ledger-history-item-head">
|
||||||
|
<el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
|
||||||
|
<span class="device-ledger-history-item-text">{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-body">
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">点检方式</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
<dict-tag type="Inspection_method" :value="item.method" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">判定标准</span>
|
||||||
|
<span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">点检时间</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
{{ formatHistoryTime(item.taskTime) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">创建时间</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
{{ formatHistoryTime(item.createTime) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">备注</span>
|
||||||
|
<span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.images?.length" class="device-ledger-history-item-images">
|
||||||
|
<el-image
|
||||||
|
v-for="img in item.images" :key="img" :src="img" :preview-src-list="item.images"
|
||||||
|
preview-teleported fit="cover" class="device-ledger-history-item-image">
|
||||||
|
<template #error>
|
||||||
|
<div class="device-ledger-history-image-error">图片加载失败</div>
|
||||||
|
</template>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-step>
|
||||||
|
</el-steps>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="保养履历" name="maintain">
|
||||||
|
<div class="device-ledger-tab-toolbar">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="maintainDateRange"
|
||||||
|
type="daterange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
range-separator="至"
|
||||||
|
:unlink-panels="true"
|
||||||
|
class="mr-10px"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" plain @click="handleQueryMaintain">查询</el-button>
|
||||||
|
<el-button @click="handleResetMaintain">重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
:loading="maintainExportLoading"
|
||||||
|
@click="handleExportMaintain"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-empty v-if="!maintainStepGroups.length" />
|
||||||
|
<el-steps
|
||||||
|
v-else direction="vertical" class="device-ledger-history-steps"
|
||||||
|
:active="maintainStepGroups.length">
|
||||||
|
<el-step v-for="group in maintainStepGroups" :key="group.key">
|
||||||
|
<template #title>
|
||||||
|
<div class="device-ledger-history-title">
|
||||||
|
<span class="device-ledger-history-time">[{{ group.time }}]</span>
|
||||||
|
<span class="device-ledger-history-operator">操作人: {{ group.operator }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #description>
|
||||||
|
<div class="device-ledger-history-items">
|
||||||
|
<div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
|
||||||
|
<div class="device-ledger-history-item-head">
|
||||||
|
<el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
|
||||||
|
<span class="device-ledger-history-item-text">{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-body">
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">保养方式</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
<dict-tag type="Inspection_method" :value="item.method" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">判定标准</span>
|
||||||
|
<span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">保养时间</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
{{ String(formatHistoryTime(item.taskTime)).split(' ')[0] }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">创建时间</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
{{ formatHistoryTime(item.createTime) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">备注</span>
|
||||||
|
<span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.images?.length" class="device-ledger-history-item-images">
|
||||||
|
<el-image
|
||||||
|
v-for="img in item.images" :key="img" :src="img" :preview-src-list="item.images"
|
||||||
|
preview-teleported fit="cover" class="device-ledger-history-item-image">
|
||||||
|
<template #error>
|
||||||
|
<div class="device-ledger-history-image-error">图片加载失败</div>
|
||||||
|
</template>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-step>
|
||||||
|
</el-steps>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="维修履历" name="repair">
|
||||||
|
<div class="device-ledger-tab-toolbar">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="repairDateRange"
|
||||||
|
type="daterange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
range-separator="至"
|
||||||
|
:unlink-panels="true"
|
||||||
|
class="mr-10px"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" plain @click="handleQueryRepair">查询</el-button>
|
||||||
|
<el-button @click="handleResetRepair">重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
:loading="repairExportLoading"
|
||||||
|
@click="handleExportRepair"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-empty v-if="!repairGroups.length" />
|
||||||
|
<el-collapse v-else v-model="repairActiveNames" class="device-ledger-repair-collapse">
|
||||||
|
<el-collapse-item v-for="group in repairGroups" :key="group.key" :name="group.key">
|
||||||
|
<template #title>
|
||||||
|
<div class="device-ledger-repair-title">
|
||||||
|
<span class="device-ledger-repair-name">{{ group.name }}</span>
|
||||||
|
<span class="device-ledger-repair-meta">共{{ group.items.length }}条</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="device-ledger-history-items">
|
||||||
|
<div
|
||||||
|
v-for="row in group.items"
|
||||||
|
:key="String(row.id ?? row.subjectId ?? row.subjectCode)"
|
||||||
|
class="device-ledger-history-item"
|
||||||
|
>
|
||||||
|
<div class="device-ledger-history-item-head">
|
||||||
|
<el-tag type="info" effect="light">{{ row.subjectCode ?? '-' }}</el-tag>
|
||||||
|
<span class="device-ledger-history-item-text">{{ row.subjectName ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-body">
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">项目内容</span>
|
||||||
|
<span class="device-ledger-history-item-value">{{ row.subjectContent ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">维修结果</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
<el-tag :type="getResultTagType(row.result ?? row.repairResult)">
|
||||||
|
{{ getResultLabel(row.repairResult ?? row.result) }}
|
||||||
|
</el-tag>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">备注</span>
|
||||||
|
<span class="device-ledger-history-item-value">{{ row.remark ?? '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="device-ledger-history-item-row">
|
||||||
|
<span class="device-ledger-history-item-label">完成日期</span>
|
||||||
|
<span class="device-ledger-history-item-value">
|
||||||
|
{{ String(formatHistoryTime(row.finishDate)).split(' ')[0] }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="row.malfunctionImages?.length" class="device-ledger-history-item-images">
|
||||||
|
<el-image
|
||||||
|
v-for="img in row.malfunctionImages"
|
||||||
|
:key="img"
|
||||||
|
:src="img"
|
||||||
|
:preview-src-list="row.malfunctionImages"
|
||||||
|
preview-teleported
|
||||||
|
fit="cover"
|
||||||
|
class="device-ledger-history-item-image"
|
||||||
|
>
|
||||||
|
<template #error>
|
||||||
|
<div class="device-ledger-history-image-error">图片加载失败</div>
|
||||||
|
</template>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { DICT_TYPE } from '@/utils/dict'
|
||||||
|
import { formatDate } from '@/utils/formatTime'
|
||||||
|
import { MoldBrandApi, type MoldVO } from '@/api/erp/mold'
|
||||||
|
import { TicketManagementApi } from '@/api/mold/ticketManagement'
|
||||||
|
import { MoldRepairApi } from '@/api/mold/moldrepair'
|
||||||
|
import download from '@/utils/download'
|
||||||
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ErpMoldDetail' })
|
||||||
|
|
||||||
|
const message = useMessage()
|
||||||
|
const route = useRoute()
|
||||||
|
const { delView } = useTagsViewStore()
|
||||||
|
const { currentRoute } = useRouter()
|
||||||
|
|
||||||
|
const detailLoading = ref(false)
|
||||||
|
const detailData = ref<(MoldVO & Record<string, any>) | null>(null)
|
||||||
|
const detailActiveTab = ref('check')
|
||||||
|
const inspectionExportLoading = ref(false)
|
||||||
|
const inspectionDateRange = ref<string[] | undefined>(undefined)
|
||||||
|
const maintainExportLoading = ref(false)
|
||||||
|
const maintainDateRange = ref<string[] | undefined>(undefined)
|
||||||
|
const repairExportLoading = ref(false)
|
||||||
|
const repairDateRange = ref<string[] | undefined>(undefined)
|
||||||
|
|
||||||
|
const formatDetailDate = (value: any) => {
|
||||||
|
if (!value) return ''
|
||||||
|
return formatDate(new Date(value), 'YYYY-MM-DD')
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatHistoryTime = (value: any) => {
|
||||||
|
const raw = value ?? '-'
|
||||||
|
if (Array.isArray(raw) && raw.length >= 3) {
|
||||||
|
const [y, m, d, hh, mm, ss] = raw
|
||||||
|
const pad = (n: any) => String(n).padStart(2, '0')
|
||||||
|
if (hh !== undefined) return `${y}-${pad(m)}-${pad(d)} ${pad(hh)}:${pad(mm)}:${pad(ss)}`
|
||||||
|
return `${y}-${pad(m)}-${pad(d)}`
|
||||||
|
}
|
||||||
|
const tryDateFromNumber = (v: any) => {
|
||||||
|
const num = Number(v)
|
||||||
|
if (!Number.isFinite(num)) return undefined
|
||||||
|
const s = String(v).trim()
|
||||||
|
const ms = s.length === 10 ? num * 1000 : num
|
||||||
|
const d = new Date(ms)
|
||||||
|
if (Number.isNaN(d.getTime())) return undefined
|
||||||
|
return d
|
||||||
|
}
|
||||||
|
const tryDateFromString = (v: any) => {
|
||||||
|
const s = String(v).trim()
|
||||||
|
if (!s) return undefined
|
||||||
|
const d = new Date(s)
|
||||||
|
if (Number.isNaN(d.getTime())) return undefined
|
||||||
|
return d
|
||||||
|
}
|
||||||
|
const d = typeof raw === 'number' ? tryDateFromNumber(raw) : tryDateFromNumber(raw) ?? tryDateFromString(raw)
|
||||||
|
if (d) return formatDate(d, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
return String(raw)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getResultLabel = (value: any) => {
|
||||||
|
const v = value === '' || value === null || value === undefined ? undefined : String(value)
|
||||||
|
if (!v) return '-'
|
||||||
|
const upper = v.toUpperCase()
|
||||||
|
if (v === '0') return '待检测'
|
||||||
|
if (v === '1' || upper === 'OK') return '通过'
|
||||||
|
if (v === '2' || upper === 'NG') return '不通过'
|
||||||
|
return v
|
||||||
|
}
|
||||||
|
|
||||||
|
const getResultTagType = (value: any) => {
|
||||||
|
const v = value === '' || value === null || value === undefined ? undefined : String(value)
|
||||||
|
if (!v) return 'info'
|
||||||
|
const upper = v.toUpperCase()
|
||||||
|
if (v === '1' || upper === 'OK') return 'success'
|
||||||
|
if (v === '2' || upper === 'NG') return 'danger'
|
||||||
|
if (v === '0') return 'info'
|
||||||
|
return 'info'
|
||||||
|
}
|
||||||
|
|
||||||
|
const inspectionHistory = ref<any[]>([])
|
||||||
|
|
||||||
|
const maintainHistory = ref<any[]>([])
|
||||||
|
|
||||||
|
type HistoryStepItem = {
|
||||||
|
key: string
|
||||||
|
name: string
|
||||||
|
result: any
|
||||||
|
method?: any
|
||||||
|
criteria?: any
|
||||||
|
images?: string[]
|
||||||
|
remark?: any
|
||||||
|
taskTime?: any
|
||||||
|
inspectionTime?: any
|
||||||
|
createTime?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
type HistoryStepGroup = { key: string; time: string; operator: string; items: HistoryStepItem[] }
|
||||||
|
|
||||||
|
const parseImages = (value: any): string[] => {
|
||||||
|
if (!value) return []
|
||||||
|
if (Array.isArray(value)) return value.map(String).filter(Boolean)
|
||||||
|
const cleaned = String(value).replace(/[`'\"]/g, '').trim()
|
||||||
|
return cleaned
|
||||||
|
.split(',')
|
||||||
|
.map((v) => v.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildStepGroups = (
|
||||||
|
rows: any[],
|
||||||
|
options: { timeField: string; nameFieldCandidates: string[]; resultFieldCandidates: string[] }
|
||||||
|
) => {
|
||||||
|
const groups = new Map<string, HistoryStepGroup>()
|
||||||
|
|
||||||
|
for (const row of rows ?? []) {
|
||||||
|
const time = formatHistoryTime(row?.taskTime ?? row?.[options.timeField] ?? row?.createTime)
|
||||||
|
const operator = String(row?.operator ?? row?.creatorName ?? row?.creator ?? '-')
|
||||||
|
const groupKey = `${row?.managementId ?? ''}__${time}__${operator}`
|
||||||
|
|
||||||
|
const name =
|
||||||
|
options.nameFieldCandidates
|
||||||
|
.map((k) => row?.[k])
|
||||||
|
.find((v) => v !== undefined && v !== null && String(v).trim() !== '') ?? '-'
|
||||||
|
|
||||||
|
const result =
|
||||||
|
options.resultFieldCandidates.map((k) => row?.[k]).find((v) => v !== undefined && v !== null) ?? undefined
|
||||||
|
|
||||||
|
const item: HistoryStepItem = {
|
||||||
|
key: String(row?.id ?? `${groupKey}__${String(name)}`),
|
||||||
|
name: String(name),
|
||||||
|
result,
|
||||||
|
method: row?.inspectionMethod,
|
||||||
|
criteria: row?.judgmentCriteria,
|
||||||
|
images: parseImages(row?.images),
|
||||||
|
remark: row?.remark,
|
||||||
|
taskTime: row?.taskTime,
|
||||||
|
inspectionTime: row?.inspectionTime,
|
||||||
|
createTime: row?.createTime
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!groups.has(groupKey)) {
|
||||||
|
groups.set(groupKey, { key: groupKey, time, operator, items: [item] })
|
||||||
|
} else {
|
||||||
|
groups.get(groupKey)!.items.push(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return Array.from(groups.values()).sort((a, b) => String(b.time).localeCompare(String(a.time)))
|
||||||
|
}
|
||||||
|
|
||||||
|
const inspectionStepGroups = computed<HistoryStepGroup[]>(() => {
|
||||||
|
return buildStepGroups(inspectionHistory.value, {
|
||||||
|
timeField: 'inspectionTime',
|
||||||
|
nameFieldCandidates: ['inspectionItemName', 'name'],
|
||||||
|
resultFieldCandidates: ['inspectionResult']
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const maintainStepGroups = computed<HistoryStepGroup[]>(() => {
|
||||||
|
return buildStepGroups(maintainHistory.value, {
|
||||||
|
timeField: 'inspectionTime',
|
||||||
|
nameFieldCandidates: ['maintainItemName', 'inspectionItemName', 'name'],
|
||||||
|
resultFieldCandidates: ['maintainResult', 'inspectionResult']
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
type RepairHistoryRow = {
|
||||||
|
id?: any
|
||||||
|
repairId?: any
|
||||||
|
repairCode?: any
|
||||||
|
repairName?: any
|
||||||
|
subjectId?: any
|
||||||
|
subjectCode?: any
|
||||||
|
subjectName?: any
|
||||||
|
subjectContent?: any
|
||||||
|
subjectStandard?: any
|
||||||
|
malfunction?: any
|
||||||
|
malfunctionUrl?: any
|
||||||
|
repairDes?: any
|
||||||
|
remark?: any
|
||||||
|
createTime?: any
|
||||||
|
finishDate?: any
|
||||||
|
result?: any
|
||||||
|
repairResult?: any
|
||||||
|
malfunctionImages?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type RepairHistoryGroup = { key: string; name: string; items: RepairHistoryRow[] }
|
||||||
|
|
||||||
|
const repairActiveNames = ref<string[]>([])
|
||||||
|
const repairList = ref<RepairHistoryRow[]>([])
|
||||||
|
|
||||||
|
const repairGroups = computed<RepairHistoryGroup[]>(() => {
|
||||||
|
const groupsMap = new Map<string, RepairHistoryGroup>()
|
||||||
|
for (const row of repairList.value ?? []) {
|
||||||
|
const key = String(row.repairCode ?? row.repairId ?? row.subjectName ?? '-')
|
||||||
|
if (!groupsMap.has(key)) {
|
||||||
|
groupsMap.set(key, {
|
||||||
|
key,
|
||||||
|
name: String(row.repairName ?? row.repairCode ?? key),
|
||||||
|
items: []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const group = groupsMap.get(key)!
|
||||||
|
group.items.push({
|
||||||
|
...row,
|
||||||
|
malfunctionImages: parseImages(row?.malfunctionUrl)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const groups = Array.from(groupsMap.values()).filter((g) => g.items.length)
|
||||||
|
|
||||||
|
return groups.sort((a, b) => {
|
||||||
|
const at = formatHistoryTime(a.items?.[0]?.finishDate ?? a.items?.[0]?.createTime)
|
||||||
|
const bt = formatHistoryTime(b.items?.[0]?.finishDate ?? b.items?.[0]?.createTime)
|
||||||
|
return String(bt).localeCompare(String(at))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const fetchRepairHistory = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) return
|
||||||
|
const params: any = { moldId: id }
|
||||||
|
if (repairDateRange.value && repairDateRange.value.length === 2) {
|
||||||
|
params.startTime = repairDateRange.value[0]
|
||||||
|
params.endTime = repairDateRange.value[1]
|
||||||
|
}
|
||||||
|
const data = await MoldRepairApi.getRepairListByMoldId(params)
|
||||||
|
repairList.value = Array.isArray(data) ? data : []
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleQueryRepair = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await fetchRepairHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleResetRepair = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
repairDateRange.value = undefined
|
||||||
|
await fetchRepairHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportRepair = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
repairExportLoading.value = true
|
||||||
|
const params: any = { moldId: id }
|
||||||
|
if (repairDateRange.value && repairDateRange.value.length === 2) {
|
||||||
|
params.startTime = repairDateRange.value[0]
|
||||||
|
params.endTime = repairDateRange.value[1]
|
||||||
|
}
|
||||||
|
const data = await MoldRepairApi.exportRepairExcel(params)
|
||||||
|
download.excel(data, '模具维修履历.xls')
|
||||||
|
} finally {
|
||||||
|
repairExportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchMaintainHistory = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) return
|
||||||
|
const params: any = { moldId: id }
|
||||||
|
if (maintainDateRange.value && maintainDateRange.value.length === 2) {
|
||||||
|
params.startTime = maintainDateRange.value[0]
|
||||||
|
params.endTime = maintainDateRange.value[1]
|
||||||
|
}
|
||||||
|
const data = await TicketManagementApi.getMaintenanceByMoldId(params)
|
||||||
|
maintainHistory.value = Array.isArray(data) ? data : []
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleQueryMaintain = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await fetchMaintainHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleResetMaintain = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
maintainDateRange.value = undefined
|
||||||
|
await fetchMaintainHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportMaintain = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
maintainExportLoading.value = true
|
||||||
|
const params: any = { moldId: id }
|
||||||
|
if (maintainDateRange.value && maintainDateRange.value.length === 2) {
|
||||||
|
params.startTime = maintainDateRange.value[0]
|
||||||
|
params.endTime = maintainDateRange.value[1]
|
||||||
|
}
|
||||||
|
const data = await TicketManagementApi.exportMaintenance(params)
|
||||||
|
download.excel(data, '模具保养履历.xls')
|
||||||
|
} finally {
|
||||||
|
maintainExportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchInspectionHistory = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) return
|
||||||
|
const params: any = { moldId: id }
|
||||||
|
if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
|
||||||
|
params.startTime = inspectionDateRange.value[0]
|
||||||
|
params.endTime = inspectionDateRange.value[1]
|
||||||
|
}
|
||||||
|
const data = await TicketManagementApi.getInspectionByMoldId(params)
|
||||||
|
inspectionHistory.value = Array.isArray(data) ? data : []
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleQueryInspection = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await fetchInspectionHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleResetInspection = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
inspectionDateRange.value = undefined
|
||||||
|
await fetchInspectionHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportInspection = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
inspectionExportLoading.value = true
|
||||||
|
const params: any = { moldId: id }
|
||||||
|
if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
|
||||||
|
params.startTime = inspectionDateRange.value[0]
|
||||||
|
params.endTime = inspectionDateRange.value[1]
|
||||||
|
}
|
||||||
|
const data = await TicketManagementApi.exportInspection(params)
|
||||||
|
download.excel(data, '模具点检履历.xls')
|
||||||
|
} finally {
|
||||||
|
inspectionExportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
delView(unref(currentRoute))
|
||||||
|
}
|
||||||
|
|
||||||
|
const getDetail = async () => {
|
||||||
|
const id = Number(route.params.id)
|
||||||
|
if (!id) {
|
||||||
|
message.error('参数错误，模具不能为空')
|
||||||
|
close()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
detailActiveTab.value = 'check'
|
||||||
|
detailLoading.value = true
|
||||||
|
try {
|
||||||
|
detailData.value = await MoldBrandApi.getMold(id)
|
||||||
|
await fetchInspectionHistory()
|
||||||
|
await fetchMaintainHistory()
|
||||||
|
await fetchRepairHistory()
|
||||||
|
} finally {
|
||||||
|
detailLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getDetail()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.mold-detail-desc {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mold-history-table {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mold-detail-body {
|
||||||
|
max-height: 85vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mold-detail-tabs {
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
max-height: 65vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-steps {
|
||||||
|
padding: 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-tab-toolbar {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-time {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-operator {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-items {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
background: var(--el-fill-color-blank);
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
border-radius: 8px;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-label {
|
||||||
|
width: 70px;
|
||||||
|
flex: 0 0 70px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-value {
|
||||||
|
flex: 1;
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-images {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-image {
|
||||||
|
width: 76px;
|
||||||
|
height: 76px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-image-error {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
background: var(--el-fill-color);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-repair-collapse {
|
||||||
|
padding: 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-repair-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-repair-name {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-repair-meta {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-ledger-history-item-text {
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="120px">
|
||||||
|
<el-form-item label="设备编码" prop="deviceCode">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.deviceCode"
|
||||||
|
placeholder="请输入设备编码"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="deviceName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.deviceName"
|
||||||
|
placeholder="请输入设备名称"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备运行时间" prop="timeRange">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.timeRange"
|
||||||
|
type="datetimerange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||||
|
class="!w-360px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">
|
||||||
|
<Icon icon="ep:search" class="mr-5px" /> 搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery">
|
||||||
|
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||||
|
</el-button>
|
||||||
|
<el-button type="success" plain @click="handleExport" :loading="exportLoading">
|
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<ContentWrap>
|
||||||
|
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id">
|
||||||
|
<el-table-column label="设备编码" align="left" prop="deviceCode" min-width="140px" />
|
||||||
|
<el-table-column label="设备名称" align="left" prop="deviceName" min-width="160px" />
|
||||||
|
<el-table-column label="运行时间(小时)" align="center" prop="totalRunningTime" min-width="140px" />
|
||||||
|
<el-table-column label="待机时间(小时)" align="center" prop="totalStandbyTime" min-width="140px" />
|
||||||
|
<el-table-column label="故障时间(小时)" align="center" prop="totalFaultTime" min-width="140px" />
|
||||||
|
<el-table-column label="警告时间(小时)" align="center" prop="totalWarningTime" min-width="140px" />
|
||||||
|
<el-table-column label="稼动率" align="center" prop="utilizationRate" min-width="120px" />
|
||||||
|
<el-table-column label="设备运行开始时间" align="center" prop="startTime" min-width="120px" />
|
||||||
|
<el-table-column label="设备运行结束时间" align="center" prop="endTime" min-width="120px" />
|
||||||
|
</el-table>
|
||||||
|
<Pagination
|
||||||
|
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import download from '@/utils/download'
|
||||||
|
import { DeviceOperationRecordApi, type DeviceOperationRecordVO, type DeviceOperationRecordPageParams } from '@/api/iot/deviceOperationRecord'
|
||||||
|
|
||||||
|
defineOptions({ name: 'IotRunReport' })
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const list = ref<DeviceOperationRecordVO[]>([])
|
||||||
|
const total = ref(0)
|
||||||
|
const exportLoading = ref(false)
|
||||||
|
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
deviceCode: undefined as string | undefined,
|
||||||
|
deviceName: undefined as string | undefined,
|
||||||
|
timeRange: [] as string[] | [],
|
||||||
|
startTime: undefined as string | undefined,
|
||||||
|
endTime: undefined as string | undefined,
|
||||||
|
ids: undefined as string | undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
const queryFormRef = ref()
|
||||||
|
const getList = async () => {
|
||||||
|
const range = (queryParams.timeRange || []) as string[]
|
||||||
|
queryParams.startTime = range[0]
|
||||||
|
queryParams.endTime = range[1]
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = queryParams as unknown as DeviceOperationRecordPageParams
|
||||||
|
const data = await DeviceOperationRecordApi.getDeviceOperationRecordPage(params)
|
||||||
|
list.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields?.()
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExport = async () => {
|
||||||
|
try {
|
||||||
|
await useMessage().exportConfirm()
|
||||||
|
exportLoading.value = true
|
||||||
|
const range = (queryParams.timeRange || []) as string[]
|
||||||
|
queryParams.startTime = range[0]
|
||||||
|
queryParams.endTime = range[1]
|
||||||
|
const params = queryParams as unknown as DeviceOperationRecordPageParams
|
||||||
|
const data = await DeviceOperationRecordApi.exportDeviceOperationReport(params)
|
||||||
|
download.excel(data, '设备运行报表.xls')
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
exportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,338 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form
|
||||||
|
class="-mb-15px"
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
label-width="80px"
|
||||||
|
>
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.name"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.remark"
|
||||||
|
placeholder="请输入备注"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="启用状态" prop="state">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.state"
|
||||||
|
placeholder="请选择启用状态"
|
||||||
|
clearable
|
||||||
|
class="!w-240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="openCreateDialog">
|
||||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="handleQuery">
|
||||||
|
<Icon icon="ep:search" class="mr-5px" /> 搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery">
|
||||||
|
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<ContentWrap>
|
||||||
|
<div class="dashboard-card-list">
|
||||||
|
<el-empty v-if="!loading && list.length === 0" description="暂无数据" />
|
||||||
|
<el-row v-else :gutter="16">
|
||||||
|
<el-col
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.id"
|
||||||
|
:xl="6"
|
||||||
|
:lg="8"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
class="mb-16px"
|
||||||
|
>
|
||||||
|
<el-card shadow="hover" class="dashboard-card" :body-style="{ padding: '0' }">
|
||||||
|
<div class="dashboard-card-image-wrapper">
|
||||||
|
<img
|
||||||
|
class="dashboard-card-image"
|
||||||
|
:src="item.indexImage || defaultImage"
|
||||||
|
alt="封面图"
|
||||||
|
/>
|
||||||
|
<div class="dashboard-card-state">
|
||||||
|
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.state" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dashboard-card-body">
|
||||||
|
<div class="dashboard-card-main">
|
||||||
|
<div class="dashboard-card-title" :title="item.name">
|
||||||
|
{{ item.name || '-' }}
|
||||||
|
</div>
|
||||||
|
<div class="dashboard-card-remark" :title="item.remark">
|
||||||
|
{{ item.remark || '暂无描述' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dashboard-card-actions">
|
||||||
|
<el-button type="primary" text @click="handlePreview(item)">
|
||||||
|
<Icon icon="ep:arrow-right" class="mr-5px" /> 预览
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<Pagination
|
||||||
|
v-if="total > 0"
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<el-dialog v-model="createDialogVisible" title="新增数据大屏" width="600px">
|
||||||
|
<el-form :model="createForm" ref="createFormRef" label-width="80px">
|
||||||
|
<el-form-item label="名称">
|
||||||
|
<el-input v-model="createForm.name" placeholder="请输入名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="createForm.remark" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="启用状态">
|
||||||
|
<el-select v-model="createForm.state" placeholder="请选择启用状态" class="!w-240px">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图片路径">
|
||||||
|
<el-input v-model="createForm.indexImage" placeholder="请输入图片路径" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="路由路径">
|
||||||
|
<el-input v-model="createForm.route" placeholder="请输入路由路径" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="内容">
|
||||||
|
<el-input
|
||||||
|
v-model="createForm.content"
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="createDialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" :loading="createLoading" @click="submitCreate">
|
||||||
|
确 定
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||||
|
import request from '@/config/axios'
|
||||||
|
import defaultImage from '@/assets/imgs/logo.png'
|
||||||
|
|
||||||
|
defineOptions({ name: 'DashboardList' })
|
||||||
|
|
||||||
|
const { push } = useRouter()
|
||||||
|
|
||||||
|
interface DashboardItem {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
remark: string
|
||||||
|
state: string
|
||||||
|
indexImage?: string
|
||||||
|
route?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const list = ref<DashboardItem[]>([])
|
||||||
|
const total = ref(0)
|
||||||
|
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
name: undefined as string | undefined,
|
||||||
|
remark: undefined as string | undefined,
|
||||||
|
state: undefined as string | undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
const queryFormRef = ref()
|
||||||
|
|
||||||
|
const createDialogVisible = ref(false)
|
||||||
|
const createLoading = ref(false)
|
||||||
|
const createFormRef = ref()
|
||||||
|
const createForm = reactive({
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
state: '',
|
||||||
|
indexImage: '',
|
||||||
|
route: '',
|
||||||
|
content: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const data = await request.get({
|
||||||
|
url: '/mes/goview/page',
|
||||||
|
params: queryParams
|
||||||
|
})
|
||||||
|
list.value = (data?.list || []) as DashboardItem[]
|
||||||
|
total.value = data?.total || 0
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields?.()
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePreview = (item: DashboardItem) => {
|
||||||
|
if (!item.route) {
|
||||||
|
useMessage().error('未配置预览路由')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const path = item.route.startsWith('/') ? item.route : `/${item.route}`
|
||||||
|
push(path)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetCreateForm = () => {
|
||||||
|
createForm.name = ''
|
||||||
|
createForm.remark = ''
|
||||||
|
createForm.state = ''
|
||||||
|
createForm.indexImage = ''
|
||||||
|
createForm.route = ''
|
||||||
|
createForm.content = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const openCreateDialog = () => {
|
||||||
|
resetCreateForm()
|
||||||
|
createDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitCreate = async () => {
|
||||||
|
if (!createForm.name) {
|
||||||
|
useMessage().error('名称不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
createLoading.value = true
|
||||||
|
try {
|
||||||
|
await request.post({
|
||||||
|
url: '/mes/goview/create',
|
||||||
|
data: createForm
|
||||||
|
})
|
||||||
|
useMessage().success('新增成功')
|
||||||
|
createDialogVisible.value = false
|
||||||
|
handleQuery()
|
||||||
|
} finally {
|
||||||
|
createLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dashboard-card-list {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 56.25%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
background-color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-state {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-main {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-remark {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card-menu {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<div class="bg-grid"></div>
|
||||||
|
<div class="bg-scan"><div class="scan-line"></div></div>
|
||||||
|
|
||||||
|
<DashboardHeader />
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="layout">
|
||||||
|
<!-- 第一行 -->
|
||||||
|
<el-row :gutter="10" class="row-1">
|
||||||
|
<el-col :span="12">
|
||||||
|
<!-- 产线任务看板 -->
|
||||||
|
<TaskBoard />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<!-- 日产能达成情况 -->
|
||||||
|
<DayCapacity />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<!-- 月产能达成情况 -->
|
||||||
|
<MonthCapacity />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 第二行 -->
|
||||||
|
<el-row :gutter="10" class="row-2">
|
||||||
|
<el-col :span="9">
|
||||||
|
<!-- 周生产趋势 -->
|
||||||
|
<WeekTrend />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<!-- 开机率/稼动率趋势 -->
|
||||||
|
<OpsTrend />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="7">
|
||||||
|
<!-- 今日开机率/稼动率 -->
|
||||||
|
<TodayOps />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 第三行 -->
|
||||||
|
<el-row :gutter="10" class="row-3">
|
||||||
|
<el-col :span="8">
|
||||||
|
<!-- 成品检合格率趋势图 -->
|
||||||
|
<QualityTrend />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<!-- 实时报警信息 -->
|
||||||
|
<RealAlarm />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<!-- 能耗周趋势 -->
|
||||||
|
<EnergyTrend />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DashboardHeader from './components/DashboardHeader.vue'
|
||||||
|
import TaskBoard from './components/TaskBoard.vue'
|
||||||
|
import DayCapacity from './components/DayCapacity.vue'
|
||||||
|
import MonthCapacity from './components/MonthCapacity.vue'
|
||||||
|
import WeekTrend from './components/WeekTrend.vue'
|
||||||
|
import OpsTrend from './components/OpsTrend.vue'
|
||||||
|
import TodayOps from './components/TodayOps.vue'
|
||||||
|
import QualityTrend from './components/QualityTrend.vue'
|
||||||
|
import RealAlarm from './components/RealAlarm.vue'
|
||||||
|
import EnergyTrend from './components/EnergyTrend.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Define CSS Variables locally for this dashboard */
|
||||||
|
.dashboard-container {
|
||||||
|
--bg: #050816;
|
||||||
|
--bg-deep: #020617;
|
||||||
|
--card-bg: rgba(15, 23, 42, 0.86);
|
||||||
|
--border: rgba(56, 189, 248, 0.35);
|
||||||
|
--text: #e5f0ff;
|
||||||
|
--muted: #94a3b8;
|
||||||
|
--primary: #38bdf8;
|
||||||
|
--accent: #22d3ee;
|
||||||
|
--blue: #1e90ff;
|
||||||
|
--green: #22c55e;
|
||||||
|
--purple: #8b5cf6;
|
||||||
|
--warn: #f59e0b;
|
||||||
|
--danger: #ef4444;
|
||||||
|
--gap: 10px;
|
||||||
|
--header-h: 86px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", Arial, sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
background-color: var(--bg-deep);
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 20% 0, rgba(56, 189, 248, 0.26) 0, transparent 48%),
|
||||||
|
radial-gradient(circle at 80% 110%, rgba(129, 140, 248, 0.22) 0, transparent 52%),
|
||||||
|
linear-gradient(135deg, #020617 0%, #020617 45%, #020617 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-grid {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background-image: linear-gradient(rgba(15,23,42,0.8) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(15,23,42,0.8) 1px, transparent 1px);
|
||||||
|
background-size: 70px 70px;
|
||||||
|
opacity: 0.55;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-scan {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scan-line {
|
||||||
|
position: absolute;
|
||||||
|
top: -40%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
background: radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.38), transparent 70%);
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: blur(32px);
|
||||||
|
animation: scanDown 16s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanDown {
|
||||||
|
0% { transform: translateY(-100%); }
|
||||||
|
100% { transform: translateY(260%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px var(--gap) var(--gap);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--gap);
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--gap);
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%; /* Ensure full width */
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-1, .row-2, .row-3 {
|
||||||
|
flex: 1 1 0; /* Ensure equal height distribution */
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden; /* Prevent content from expanding the row */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure el-col takes full height */
|
||||||
|
:deep(.el-col) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure card takes full height and ignores inline flex styles */
|
||||||
|
:deep(.card) {
|
||||||
|
height: 100% !important;
|
||||||
|
flex: none !important;
|
||||||
|
box-sizing: border-box; /* Ensure padding/border doesn't add to height */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix chart containers if they are not sizing correctly */
|
||||||
|
:deep(.chart), :deep(.echarts) {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1366px) {
|
||||||
|
/* Adjust if needed, but flex: 1 should handle it automatically */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,158 @@
|
|||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<div class="header-inner">
|
||||||
|
<div class="title-wrap">
|
||||||
|
<div class="title-mark">
|
||||||
|
<Icon icon="fa-solid:microchip" class="title-mark-icon" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="title">智能制造产线任务总览</div>
|
||||||
|
<div class="sub-title">INTELLIGENT MANUFACTURING REAL-TIME DASHBOARD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<span class="chip">
|
||||||
|
<Icon icon="fa-regular:clock" class="chip-icon" />
|
||||||
|
<span>{{ timeStr }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="chip chip-strong">
|
||||||
|
<Icon icon="fa-solid:circle-nodes" class="chip-icon" />
|
||||||
|
<span>当前在线产线 <strong>10</strong> 条</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
|
||||||
|
const timeStr = ref('')
|
||||||
|
let timer: number | undefined
|
||||||
|
|
||||||
|
const updateTime = () => {
|
||||||
|
const d = new Date()
|
||||||
|
const y = d.getFullYear()
|
||||||
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(d.getDate()).padStart(2, '0')
|
||||||
|
const h = String(d.getHours()).padStart(2, '0')
|
||||||
|
const mi = String(d.getMinutes()).padStart(2, '0')
|
||||||
|
const s = String(d.getSeconds()).padStart(2, '0')
|
||||||
|
timeStr.value = `${y}-${m}-${day} ${h}:${mi}:${s}`
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
updateTime()
|
||||||
|
timer = window.setInterval(updateTime, 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer) clearInterval(timer)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
header {
|
||||||
|
height: var(--header-h);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 24px;
|
||||||
|
background:
|
||||||
|
linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85)),
|
||||||
|
radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.22), transparent 60%);
|
||||||
|
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
|
||||||
|
box-shadow: 0 10px 35px rgba(15, 23, 42, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
max-width: 1920px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-mark {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.75);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.35), transparent 70%);
|
||||||
|
box-shadow: 0 0 24px rgba(56, 189, 248, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-mark-icon {
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
background: linear-gradient(to bottom, #e0f2fe, #60a5fa);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-shadow: 0 0 20px rgba(56, 189, 248, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: 3px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.5);
|
||||||
|
padding: 4px 10px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(15, 23, 42, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-icon {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-strong {
|
||||||
|
border-color: rgba(56, 189, 248, 0.8);
|
||||||
|
background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.35), transparent 70%);
|
||||||
|
color: #e0f2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.title {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1366px) {
|
||||||
|
.title {
|
||||||
|
font-size: 22px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="card-title-icon">
|
||||||
|
<Icon icon="fa-solid:bolt" />
|
||||||
|
</span>
|
||||||
|
<span>能耗周趋势</span>
|
||||||
|
</div>
|
||||||
|
<span class="tag">本周能耗对比</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="chart-energy" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { useChart, colors, style } from '../utils'
|
||||||
|
|
||||||
|
const { init } = useChart('chart-energy')
|
||||||
|
|
||||||
|
const energyDays = ['周一','周二','周三','周四','周五','周六','周日']
|
||||||
|
const energyUse = [520, 540, 580, 610, 640, 590, 560]
|
||||||
|
const energyStd = [500, 520, 540, 560, 580, 560, 540]
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const chart = init()
|
||||||
|
if (!chart) return
|
||||||
|
|
||||||
|
chart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
legend: { top: 0, right: 0, textStyle: style.legendText },
|
||||||
|
grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
|
||||||
|
xAxis: { type: 'category', data: energyDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
|
||||||
|
yAxis: { type: 'value', axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '实际能耗(kWh)',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 16,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: [4,4,0,0],
|
||||||
|
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
||||||
|
{ offset: 0, color: colors.danger },
|
||||||
|
{ offset: 1, color: 'rgba(239,68,68,0.10)' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: energyUse
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '基准能耗(kWh)',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: { width: 2, color: colors.green },
|
||||||
|
data: energyStd
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.85);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 45px rgba(15,23,42,0.95),
|
||||||
|
0 0 0 1px rgba(15,23,42,1),
|
||||||
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before,
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(56,189,248,0.75);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-icon {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
border: 1px solid rgba(148,163,184,0.4);
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.chart { min-height: 160px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="card-title-icon">
|
||||||
|
<Icon icon="fa-solid:moon" />
|
||||||
|
</span>
|
||||||
|
<span>月产能达成情况</span>
|
||||||
|
</div>
|
||||||
|
<span class="tag">当月累计</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-body-row">
|
||||||
|
<div class="card-body-col" style="flex: 0 0 52%;">
|
||||||
|
<div ref="chartRef" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body-col">
|
||||||
|
<div class="metrics-grid">
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="metric-label">排产单数量</div>
|
||||||
|
<div class="metric-value" ref="monthOrderEl"></div>
|
||||||
|
<div class="metric-extra"><span>单</span><span>同比 +8.6%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="metric-label">排产数量</div>
|
||||||
|
<div class="metric-value" ref="monthPlanEl"></div>
|
||||||
|
<div class="metric-extra"><span>件</span><span>较计划 +3.2%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="metric-label">待生产数量</div>
|
||||||
|
<div class="metric-value warn" ref="monthPendingEl"></div>
|
||||||
|
<div class="metric-extra"><span>件</span><span>剩余 5 天完成</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="metric-label">产能达成率</div>
|
||||||
|
<div class="metric-value accent" ref="monthRateEl"></div>
|
||||||
|
<div class="metric-extra"><span>目标 ≥ 85%</span><span>接近预期</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { colors, animateCount, style } from '../utils'
|
||||||
|
|
||||||
|
const month = { orders: 158, plan: 420000, pending: 75600, rate: 82.0 }
|
||||||
|
|
||||||
|
const chartRef = ref<HTMLElement | null>(null)
|
||||||
|
const monthOrderEl = ref<HTMLElement | null>(null)
|
||||||
|
const monthPlanEl = ref<HTMLElement | null>(null)
|
||||||
|
const monthPendingEl = ref<HTMLElement | null>(null)
|
||||||
|
const monthRateEl = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
let chart: echarts.ECharts | null = null
|
||||||
|
|
||||||
|
const initChart = () => {
|
||||||
|
if (!chartRef.value) return
|
||||||
|
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
|
||||||
|
chart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
legend: { bottom: '0%', left: 'center', textStyle: style.legendText },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['60%', '82%'],
|
||||||
|
center: ['50%', '55%'],
|
||||||
|
label: { show: false },
|
||||||
|
emphasis: { scale: false },
|
||||||
|
data: [
|
||||||
|
{ value: month.plan - month.pending, name: '已完成', itemStyle: { color: colors.green } },
|
||||||
|
{ value: month.pending, name: '待生产', itemStyle: { color: 'rgba(15,23,42,0.8)' } }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const resizeHandler = () => {
|
||||||
|
chart?.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initChart()
|
||||||
|
animateCount(monthOrderEl.value, month.orders, '', 900)
|
||||||
|
animateCount(monthPlanEl.value, month.plan, '', 900)
|
||||||
|
animateCount(monthPendingEl.value, month.pending, '', 900)
|
||||||
|
animateCount(monthRateEl.value, month.rate, '%', 900)
|
||||||
|
window.addEventListener('resize', resizeHandler)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', resizeHandler)
|
||||||
|
chart?.dispose()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.85);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 45px rgba(15,23,42,0.95),
|
||||||
|
0 0 0 1px rgba(15,23,42,1),
|
||||||
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before,
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(56,189,248,0.75);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-icon {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body-row {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body-col {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
border: 1px solid rgba(148,163,184,0.4);
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
background: radial-gradient(circle at 0 0, rgba(56,189,248,0.16), transparent 70%);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.9);
|
||||||
|
padding: 6px 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value.accent { color: #22d3ee; }
|
||||||
|
.metric-value.warn { color: #f59e0b; }
|
||||||
|
.metric-value.ok { color: #22c55e; }
|
||||||
|
|
||||||
|
.metric-extra {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #94a3b8;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.chart { min-height: 160px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,272 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="card-title-icon">
|
||||||
|
<Icon icon="fa-solid:wave-square" />
|
||||||
|
</span>
|
||||||
|
<span>开机率/稼动率趋势</span>
|
||||||
|
</div>
|
||||||
|
<div class="ops-header-right">
|
||||||
|
<div class="tabs">
|
||||||
|
<button
|
||||||
|
v-for="line in opsLines"
|
||||||
|
:key="line.name"
|
||||||
|
type="button"
|
||||||
|
class="tab-btn"
|
||||||
|
:class="{ active: currentLine === line.name }"
|
||||||
|
@click="updateOps(line.name)"
|
||||||
|
>
|
||||||
|
{{ line.name }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span class="tag">{{ summary }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div ref="chartRef" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { colors, style } from '../utils'
|
||||||
|
|
||||||
|
const opsDays: string[] = []
|
||||||
|
for (let i = 7; i > 0; i--) {
|
||||||
|
const d = new Date()
|
||||||
|
d.setDate(d.getDate() - i)
|
||||||
|
opsDays.push(`${d.getMonth() + 1}-${d.getDate()}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const opsLines = [
|
||||||
|
{ name: '产线A', run: [85, 87, 84, 89, 88, 86, 85], avail: [78, 82, 80, 84, 83, 81, 79] },
|
||||||
|
{ name: '产线B', run: [83, 84, 82, 86, 85, 84, 83], avail: [76, 78, 77, 80, 79, 78, 77] },
|
||||||
|
{ name: '产线C', run: [88, 90, 89, 91, 92, 90, 89], avail: [82, 84, 83, 86, 87, 85, 84] },
|
||||||
|
{ name: '产线D', run: [80, 82, 81, 83, 84, 82, 81], avail: [72, 74, 73, 76, 77, 75, 74] },
|
||||||
|
{ name: '产线E', run: [86, 87, 86, 88, 89, 87, 86], avail: [79, 81, 80, 82, 83, 81, 80] },
|
||||||
|
{ name: '产线F', run: [90, 92, 91, 93, 94, 92, 91], avail: [84, 86, 85, 87, 88, 86, 85] }
|
||||||
|
]
|
||||||
|
|
||||||
|
const currentLine = ref(opsLines[0].name)
|
||||||
|
const summary = ref('')
|
||||||
|
const chartRef = ref<HTMLElement | null>(null)
|
||||||
|
let chart: echarts.ECharts | null = null
|
||||||
|
|
||||||
|
const avg = (arr: number[]) => {
|
||||||
|
return Math.round((arr.reduce((s, v) => s + v, 0) / arr.length) * 10) / 10
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateOps = (lineName: string) => {
|
||||||
|
currentLine.value = lineName
|
||||||
|
const item = opsLines.find((x) => x.name === lineName) || opsLines[0]
|
||||||
|
summary.value = `${item.name} · 开机率均值 ${avg(item.run)}% · 稼动率均值 ${avg(item.avail)}%`
|
||||||
|
|
||||||
|
if (!chart) return
|
||||||
|
chart.setOption({
|
||||||
|
xAxis: { data: opsDays },
|
||||||
|
series: [{ data: item.run }, { data: item.avail }]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const initChart = () => {
|
||||||
|
if (!chartRef.value) return
|
||||||
|
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
|
||||||
|
chart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
legend: { top: 0, right: 0, textStyle: style.legendText },
|
||||||
|
grid: { top: '22%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
|
||||||
|
xAxis: { type: 'category', data: opsDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '开机率(%)',
|
||||||
|
max: 100,
|
||||||
|
nameTextStyle: { color: '#a8b7d8', fontSize: 12 },
|
||||||
|
axisLabel: style.axisLabel,
|
||||||
|
splitLine: style.splitLine
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '稼动率(%)',
|
||||||
|
max: 100,
|
||||||
|
nameTextStyle: { color: '#a8b7d8', fontSize: 12 },
|
||||||
|
axisLabel: style.axisLabel,
|
||||||
|
splitLine: { show: false }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '开机率',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
lineStyle: { width: 2, color: colors.blue },
|
||||||
|
itemStyle: { color: colors.blue },
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '稼动率',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
lineStyle: { width: 2, color: colors.green },
|
||||||
|
itemStyle: { color: colors.green },
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
updateOps(currentLine.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resizeHandler = () => {
|
||||||
|
chart?.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initChart()
|
||||||
|
window.addEventListener('resize', resizeHandler)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', resizeHandler)
|
||||||
|
chart?.dispose()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.85);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 45px rgba(15,23,42,0.95),
|
||||||
|
0 0 0 1px rgba(15,23,42,1),
|
||||||
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before,
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(56,189,248,0.75);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-icon {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
border: 1px solid rgba(148,163,184,0.4);
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.chart { min-height: 160px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.ops-header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.55);
|
||||||
|
background: rgba(2, 6, 23, 0.28);
|
||||||
|
color: var(--muted);
|
||||||
|
padding: 3px 8px;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
transition: border-color 0.25s, box-shadow 0.25s, color 0.25s, background 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-btn:hover {
|
||||||
|
border-color: rgba(56, 189, 248, 0.9);
|
||||||
|
color: #e0f2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-btn.active {
|
||||||
|
border-color: rgba(34, 211, 238, 0.9);
|
||||||
|
color: #e0f2fe;
|
||||||
|
box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
|
||||||
|
background: radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.32), rgba(2, 6, 23, 0.2) 60%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="card-title-icon">
|
||||||
|
<Icon icon="fa-solid:bell" />
|
||||||
|
</span>
|
||||||
|
<span>实时报警信息</span>
|
||||||
|
</div>
|
||||||
|
<span class="tag">滚动展示</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul ref="listRef" class="alarm-list">
|
||||||
|
<li
|
||||||
|
v-for="(a, index) in alarms"
|
||||||
|
:key="index"
|
||||||
|
class="alarm-item"
|
||||||
|
:class="[a.type, { 'animating-out': index === 0 && isAnimating }]"
|
||||||
|
:title="a.msg"
|
||||||
|
>
|
||||||
|
<span class="alarm-time">[{{ a.time }}]</span>
|
||||||
|
<span class="alarm-msg">{{ a.msg }}</span>
|
||||||
|
<span class="alarm-level">{{ a.level }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
|
||||||
|
const alarms = ref([
|
||||||
|
{ time: '08:12:03', level: '严重', type: 'danger', msg: '产线B-包装工位异常停机' },
|
||||||
|
{ time: '08:15:27', level: '严重', type: 'danger', msg: '产线C-温控传感器漂移' },
|
||||||
|
{ time: '08:20:10', level: '警告', type: 'warn', msg: '产线A-物料待料' },
|
||||||
|
{ time: '08:35:42', level: '提示', type: 'safe', msg: '产线E-设备保养提醒' },
|
||||||
|
{ time: '08:40:18', level: '提示', type: 'safe', msg: '产线F-成品抽检合格' },
|
||||||
|
{ time: '09:02:56', level: '严重', type: 'danger', msg: '产线D-站点扫码失败' },
|
||||||
|
{ time: '09:15:12', level: '警告', type: 'warn', msg: '产线H-人员到岗不足' },
|
||||||
|
{ time: '09:26:33', level: '警告', type: 'warn', msg: '产线I-实时能耗升高' },
|
||||||
|
{ time: '09:37:05', level: '严重', type: 'danger', msg: '产线G-夹具寿命告警' },
|
||||||
|
{ time: '09:45:21', level: '警告', type: 'warn', msg: '产线J-物流滞后' }
|
||||||
|
])
|
||||||
|
|
||||||
|
const isAnimating = ref(false)
|
||||||
|
const listRef = ref<HTMLElement | null>(null)
|
||||||
|
let timer: ReturnType<typeof setInterval> | null = null
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
isAnimating.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
const first = alarms.value.shift()
|
||||||
|
if (first) {
|
||||||
|
alarms.value.push(first)
|
||||||
|
}
|
||||||
|
isAnimating.value = false
|
||||||
|
}, 360)
|
||||||
|
}, 3000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer) clearInterval(timer)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.85);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 45px rgba(15,23,42,0.95),
|
||||||
|
0 0 0 1px rgba(15,23,42,1),
|
||||||
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before,
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(56,189,248,0.75);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-icon {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
overflow: hidden; /* Ensure list stays within */
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
border: 1px solid rgba(148,163,184,0.4);
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 7px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(15,23,42,0.92);
|
||||||
|
border: 1px solid rgba(30,64,175,0.9);
|
||||||
|
font-size: 11px;
|
||||||
|
color: #e5f0ff;
|
||||||
|
transition: background 0.3s, box-shadow 0.3s;
|
||||||
|
flex-shrink: 0; /* Prevent shrinking */
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-item.danger { border-left: 3px solid #ef4444; box-shadow: 0 0 18px rgba(239,68,68,0.4); }
|
||||||
|
.alarm-item.warn { border-left: 3px solid #f59e0b; box-shadow: 0 0 14px rgba(245,158,11,0.35); }
|
||||||
|
.alarm-item.safe { border-left: 3px solid #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.35); }
|
||||||
|
|
||||||
|
.alarm-time {
|
||||||
|
width: 64px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-msg {
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alarm-level {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border: 1px solid rgba(148,163,184,0.6);
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation class */
|
||||||
|
.animating-out {
|
||||||
|
transition: all 0.35s;
|
||||||
|
transform: translateY(-48px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="card-title-icon">
|
||||||
|
<Icon icon="fa-solid:table-list" />
|
||||||
|
</span>
|
||||||
|
<span>产线任务看板</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-inline">
|
||||||
|
<span class="tag">实时刷新 · 滚动展示</span>
|
||||||
|
<span class="dot" style="background: var(--green);"></span> 已完成
|
||||||
|
<span class="dot" style="background: var(--warn);"></span> 进度偏低
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="table-shell">
|
||||||
|
<table class="task-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>产线名称</th>
|
||||||
|
<th>排产单</th>
|
||||||
|
<th>产品名称</th>
|
||||||
|
<th>计划数量</th>
|
||||||
|
<th>完工数量</th>
|
||||||
|
<th>完工率</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody ref="tbodyRef">
|
||||||
|
<tr v-for="(r, index) in tasks" :key="index">
|
||||||
|
<td>{{ r.line }}</td>
|
||||||
|
<td :style="{ color: colors.cyan }">{{ r.order }}</td>
|
||||||
|
<td :title="r.product">{{ r.product }}</td>
|
||||||
|
<td>{{ r.plan }}</td>
|
||||||
|
<td>{{ r.done }}</td>
|
||||||
|
<td>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:4px; align-items:center;">
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill" :style="{ width: getRate(r) + '%', background: getRateColor(r) }"></div>
|
||||||
|
</div>
|
||||||
|
<span :style="{ color: getRateColor(r), fontWeight: 700 }">{{ getRate(r) }}%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
|
||||||
|
const colors = {
|
||||||
|
blue: '#1e90ff',
|
||||||
|
cyan: '#22d3ee',
|
||||||
|
green: '#22c55e',
|
||||||
|
purple: '#8b5cf6',
|
||||||
|
warn: '#f59e0b',
|
||||||
|
danger: '#ef4444'
|
||||||
|
}
|
||||||
|
|
||||||
|
const tasks = [
|
||||||
|
{ line: '产线A', order: 'ORD-2025121701', product: '智能模组X1', plan: 1200, done: 1080 },
|
||||||
|
{ line: '产线B', order: 'ORD-2025121702', product: '高密电芯M2', plan: 1500, done: 1120 },
|
||||||
|
{ line: '产线C', order: 'ORD-2025121703', product: '组装组件A5', plan: 800, done: 760 },
|
||||||
|
{ line: '产线D', order: 'ORD-2025121704', product: '精密外壳S7', plan: 600, done: 480 },
|
||||||
|
{ line: '产线E', order: 'ORD-2025121705', product: '控制板K9', plan: 900, done: 855 },
|
||||||
|
{ line: '产线F', order: 'ORD-2025121706', product: '电源模组P3', plan: 1100, done: 990 },
|
||||||
|
{ line: '产线G', order: 'ORD-2025121707', product: '线束套件W4', plan: 700, done: 560 },
|
||||||
|
{ line: '产线H', order: 'ORD-2025121708', product: '散热组件H2', plan: 650, done: 559 },
|
||||||
|
{ line: '产线I', order: 'ORD-2025121709', product: '传感器C8', plan: 500, done: 450 },
|
||||||
|
{ line: '产线J', order: 'ORD-2025121710', product: '整机Z3', plan: 1000, done: 800 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const getRate = (r: any) => Math.round((r.done / r.plan) * 100)
|
||||||
|
|
||||||
|
const getRateColor = (r: any) => {
|
||||||
|
const rate = getRate(r)
|
||||||
|
if (rate < 50) return colors.danger
|
||||||
|
else if (rate < 90) return colors.warn
|
||||||
|
return colors.green
|
||||||
|
}
|
||||||
|
|
||||||
|
const tbodyRef = ref<HTMLElement | null>(null)
|
||||||
|
let scrollTimer: number | undefined
|
||||||
|
|
||||||
|
const setBodyHeight = () => {
|
||||||
|
if (!tbodyRef.value) return
|
||||||
|
// Wait for render
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!tbodyRef.value) return
|
||||||
|
const sample = tbodyRef.value.querySelector('tr') as HTMLElement | null
|
||||||
|
const rh = sample ? sample.getBoundingClientRect().height : 40
|
||||||
|
tbodyRef.value.style.height = `${Math.round(rh * 6)}px`
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
|
||||||
|
const startScroll = () => {
|
||||||
|
scrollTimer = window.setInterval(() => {
|
||||||
|
if (!tbodyRef.value) return
|
||||||
|
const first = tbodyRef.value.firstElementChild as HTMLElement | null
|
||||||
|
if (!first) return
|
||||||
|
first.style.transition = 'all 0.35s'
|
||||||
|
first.style.transform = 'translateY(-48px)'
|
||||||
|
first.style.opacity = '0'
|
||||||
|
window.setTimeout(() => {
|
||||||
|
if (!tbodyRef.value) return
|
||||||
|
first.style.transition = 'none'
|
||||||
|
first.style.transform = 'translateY(0)'
|
||||||
|
first.style.opacity = '1'
|
||||||
|
tbodyRef.value.appendChild(first)
|
||||||
|
}, 360)
|
||||||
|
}, 5000)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setBodyHeight()
|
||||||
|
startScroll()
|
||||||
|
window.addEventListener('resize', setBodyHeight)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (scrollTimer) clearInterval(scrollTimer)
|
||||||
|
window.removeEventListener('resize', setBodyHeight)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.85);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 45px rgba(15,23,42,0.95),
|
||||||
|
0 0 0 1px rgba(15,23,42,1),
|
||||||
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before,
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(56,189,248,0.75);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-icon {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-inline {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
border: 1px solid rgba(148,163,184,0.4);
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scoped styles specific to this component but we expect common styles from parent */
|
||||||
|
.table-shell {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0 5px;
|
||||||
|
table-layout: fixed;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table thead {
|
||||||
|
background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table thead th {
|
||||||
|
padding: 6px 4px;
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid rgba(51, 65, 85, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table tbody {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table thead tr,
|
||||||
|
.task-table tbody tr {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table tbody td {
|
||||||
|
padding: 6px 4px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text);
|
||||||
|
background: rgba(15, 23, 42, 0.88);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(30, 64, 175, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table tbody tr:nth-child(even) td {
|
||||||
|
background: rgba(15, 23, 42, 0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table tbody tr:hover td {
|
||||||
|
border-color: rgba(56, 189, 248, 0.95);
|
||||||
|
box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 6px;
|
||||||
|
background: rgba(15, 23, 42, 1);
|
||||||
|
border-radius: 999px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 999px;
|
||||||
|
transition: width 0.4s ease-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="card-title-icon">
|
||||||
|
<Icon icon="fa-solid:gauge-high" />
|
||||||
|
</span>
|
||||||
|
<span>今日开机率/稼动率</span>
|
||||||
|
</div>
|
||||||
|
<span class="chip">{{ currentLineName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="chart-today" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useChart, colors } from '../utils'
|
||||||
|
|
||||||
|
const { init, instance } = useChart('chart-today')
|
||||||
|
|
||||||
|
const lineMetrics = [
|
||||||
|
{ name: '产线A', run: 88, avail: 82 },
|
||||||
|
{ name: '产线B', run: 86, avail: 80 },
|
||||||
|
{ name: '产线C', run: 90, avail: 84 },
|
||||||
|
{ name: '产线D', run: 85, avail: 79 },
|
||||||
|
{ name: '产线E', run: 87, avail: 81 },
|
||||||
|
{ name: '产线F', run: 92, avail: 86 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const currentLineName = ref(lineMetrics[0].name)
|
||||||
|
let timer: ReturnType<typeof setInterval> | null = null
|
||||||
|
let currentLineIndex = 0
|
||||||
|
|
||||||
|
const gaugeOption = (run: number, avail: number) => {
|
||||||
|
return {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { show: true },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
startAngle: 200,
|
||||||
|
endAngle: -20,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
splitNumber: 10,
|
||||||
|
radius: '88%',
|
||||||
|
axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(30,144,255,0.18)']] } },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: { show: false },
|
||||||
|
pointer: { show: false },
|
||||||
|
progress: { show: true, width: 8, itemStyle: { color: colors.blue } },
|
||||||
|
detail: { formatter: '{value}%', color: '#fff', fontSize: 26, offsetCenter: ['0%', '-5%'] },
|
||||||
|
title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '-25%'] },
|
||||||
|
data: [{ value: run, name: '开机率' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
startAngle: 200,
|
||||||
|
endAngle: -20,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
radius: '68%',
|
||||||
|
axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(16,185,129,0.18)']] } },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: { show: false },
|
||||||
|
pointer: { show: false },
|
||||||
|
progress: { show: true, width: 8, itemStyle: { color: colors.green } },
|
||||||
|
detail: { formatter: '{value}%', color: '#fff', fontSize: 20, offsetCenter: ['0%', '45%'] },
|
||||||
|
title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '25%'] },
|
||||||
|
data: [{ value: avail, name: '稼动率' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const chart = init()
|
||||||
|
if (!chart) return
|
||||||
|
|
||||||
|
// Initial render
|
||||||
|
chart.setOption(gaugeOption(lineMetrics[0].run, lineMetrics[0].avail))
|
||||||
|
|
||||||
|
// Start rotation
|
||||||
|
timer = setInterval(() => {
|
||||||
|
currentLineIndex = (currentLineIndex + 1) % lineMetrics.length
|
||||||
|
const item = lineMetrics[currentLineIndex]
|
||||||
|
currentLineName.value = item.name
|
||||||
|
|
||||||
|
// Update chart
|
||||||
|
const c = instance()
|
||||||
|
if (c) {
|
||||||
|
c.setOption(gaugeOption(item.run, item.avail))
|
||||||
|
}
|
||||||
|
}, 3000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer) clearInterval(timer)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.85);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 45px rgba(15,23,42,0.95),
|
||||||
|
0 0 0 1px rgba(15,23,42,1),
|
||||||
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before,
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(56,189,248,0.75);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-icon {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(148,163,184,0.5);
|
||||||
|
padding: 4px 10px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(15,23,42,0.75);
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.chart { min-height: 160px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<span class="card-title-icon">
|
||||||
|
<Icon icon="fa-solid:chart-line" />
|
||||||
|
</span>
|
||||||
|
<span>周生产趋势</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-inline">
|
||||||
|
<span class="dot" style="background: var(--accent);"></span> 产量
|
||||||
|
<span class="dot" style="background: var(--purple);"></span> 计划
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div ref="chartRef" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { colors, style } from '../utils'
|
||||||
|
|
||||||
|
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
const weekPlan = [2600, 2800, 3000, 3100, 3200, 2900, 2700]
|
||||||
|
const weekReal = [2550, 2750, 2950, 3050, 3180, 2850, 2680]
|
||||||
|
|
||||||
|
const chartRef = ref<HTMLElement | null>(null)
|
||||||
|
let chart: echarts.ECharts | null = null
|
||||||
|
|
||||||
|
const initChart = () => {
|
||||||
|
if (!chartRef.value) return
|
||||||
|
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
|
||||||
|
chart.setOption({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: { trigger: 'axis' },
|
||||||
|
legend: { top: 0, right: 0, textStyle: style.legendText },
|
||||||
|
grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
|
||||||
|
xAxis: { type: 'category', data: weekDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
|
||||||
|
yAxis: { type: 'value', axisLine: style.axisLine, axisLabel: style.axisLabel, splitLine: style.splitLine },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '计划产量',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: { width: 2, color: colors.purple },
|
||||||
|
data: weekPlan
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '实际产量',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 6,
|
||||||
|
lineStyle: { width: 3, color: colors.cyan },
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(34,211,238,0.28)' },
|
||||||
|
{ offset: 1, color: 'rgba(15,23,42,0.8)' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: weekReal
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const resizeHandler = () => {
|
||||||
|
chart?.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initChart()
|
||||||
|
window.addEventListener('resize', resizeHandler)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', resizeHandler)
|
||||||
|
chart?.dispose()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(30,64,175,0.85);
|
||||||
|
box-shadow:
|
||||||
|
0 18px 45px rgba(15,23,42,0.95),
|
||||||
|
0 0 0 1px rgba(15,23,42,1),
|
||||||
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before,
|
||||||
|
.card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(56,189,248,0.75);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::before {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-icon {
|
||||||
|
color: #22d3ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-inline {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.chart { min-height: 160px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,57 @@
|
|||||||
|
import { onUnmounted } from 'vue'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
export const colors = {
|
||||||
|
blue: '#1e90ff',
|
||||||
|
cyan: '#22d3ee',
|
||||||
|
green: '#22c55e',
|
||||||
|
purple: '#8b5cf6',
|
||||||
|
warn: '#f59e0b',
|
||||||
|
danger: '#ef4444'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const style = {
|
||||||
|
axisLine: { lineStyle: { color: 'rgba(148,163,184,0.45)' } },
|
||||||
|
axisLabel: { color: '#a8b7d8', fontSize: 12 },
|
||||||
|
splitLine: { lineStyle: { color: 'rgba(30,64,175,0.55)', type: 'dashed' } },
|
||||||
|
legendText: { color: '#e5f0ff', fontSize: 12 }
|
||||||
|
}
|
||||||
|
|
||||||
|
export function animateCount(el: HTMLElement | null, target: number, suffix: string, duration: number) {
|
||||||
|
if (!el) return
|
||||||
|
const start = 0
|
||||||
|
const t0 = performance.now()
|
||||||
|
const step = (t: number) => {
|
||||||
|
const p = Math.min(1, (t - t0) / duration)
|
||||||
|
const v = start + (target - start) * p
|
||||||
|
const out = Number.isInteger(target) ? Math.round(v) : Math.round(v * 10) / 10
|
||||||
|
el.textContent = suffix ? `${out}${suffix}` : `${out}`
|
||||||
|
if (p < 1) requestAnimationFrame(step)
|
||||||
|
}
|
||||||
|
requestAnimationFrame(step)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useChart(domId: string) {
|
||||||
|
let chart: echarts.ECharts | null = null
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
const el = document.getElementById(domId)
|
||||||
|
if (!el) return null
|
||||||
|
chart = echarts.init(el, 'dark', { renderer: 'canvas' })
|
||||||
|
return chart
|
||||||
|
}
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
chart?.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
chart?.dispose()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
init,
|
||||||
|
resize,
|
||||||
|
instance: () => chart
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue