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