feat：大屏页面
parent
3e1c6ea398
commit
e12fa4c39a
@ -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