<script setup lang="ts">
|
import { onMounted, ref } from 'vue';
|
|
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/plugins/echarts';
|
|
import { AlertTwoTone, NotificationTwoTone, TagTwoTone } from '@ant-design/icons-vue';
|
import { Avatar, Card, Col, Image, Row } from 'ant-design-vue';
|
|
const instChart = ref<EchartsUIType>();
|
const { renderEcharts: renderInstChart } = useEcharts(instChart);
|
const useStatuChart = ref<EchartsUIType>();
|
const { renderEcharts: renderUseChart } = useEcharts(useStatuChart);
|
const repairChart = ref<EchartsUIType>();
|
const { renderEcharts: renderRepairChart } = useEcharts(repairChart);
|
const faultChart = ref<EchartsUIType>();
|
const { renderEcharts: renderFaultChart } = useEcharts(faultChart);
|
const maintenChart = ref<EchartsUIType>();
|
const { renderEcharts: renderMaintenChart } = useEcharts(maintenChart);
|
|
const todoItems = ref<any>([
|
{
|
completed: false,
|
content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
|
date: '2024-07-30 11:00:00',
|
title: '审查前端代码提交'
|
},
|
{
|
completed: true,
|
content: `检查并优化系统性能，降低CPU使用率。`,
|
date: '2024-07-30 11:00:00',
|
title: '系统性能优化'
|
},
|
{
|
completed: false,
|
content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
|
date: '2024-07-30 11:00:00',
|
title: '安全检查'
|
},
|
|
{
|
completed: false,
|
content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
|
date: '2024-07-30 11:00:00',
|
title: '修复UI显示问题'
|
}
|
]);
|
|
onMounted(() => {
|
renderInstChart({
|
series: [
|
{
|
type: 'gauge',
|
startAngle: 180,
|
endAngle: 0,
|
center: ['50%', '75%'],
|
radius: '90%',
|
min: 0,
|
max: 1,
|
splitNumber: 8,
|
axisLine: {
|
lineStyle: {
|
width: 6,
|
color: [
|
[0.25, '#FF6E76'],
|
[0.5, '#FDDD60'],
|
[0.75, '#58D9F9'],
|
[1, '#7CFFB2']
|
]
|
}
|
},
|
pointer: {
|
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
length: '12%',
|
width: 20,
|
offsetCenter: [0, '-60%'],
|
itemStyle: {
|
color: 'auto'
|
}
|
},
|
axisTick: {
|
length: 12,
|
lineStyle: {
|
color: 'auto',
|
width: 2
|
}
|
},
|
splitLine: {
|
length: 20,
|
lineStyle: {
|
color: 'auto',
|
width: 5
|
}
|
},
|
axisLabel: {
|
color: '#464646',
|
fontSize: 20,
|
distance: -60,
|
rotate: 'tangential',
|
formatter(value: number) {
|
switch (value) {
|
case 0.125: {
|
return 'Grade D';
|
}
|
case 0.375: {
|
return 'Grade C';
|
}
|
case 0.625: {
|
return 'Grade B';
|
}
|
case 0.875: {
|
return 'Grade A';
|
}
|
// No default
|
}
|
return '';
|
}
|
},
|
title: {
|
offsetCenter: [0, '-10%'],
|
fontSize: 20
|
},
|
detail: {
|
fontSize: 30,
|
offsetCenter: [0, '-35%'],
|
valueAnimation: true,
|
formatter(value: number) {
|
return `${Math.round(value * 100)}%`;
|
},
|
color: 'inherit'
|
},
|
data: [
|
{
|
value: 0.95,
|
name: '正常设备占比'
|
}
|
]
|
}
|
],
|
tooltip: {
|
trigger: 'item'
|
}
|
});
|
renderUseChart({
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
show: false
|
},
|
grid: {
|
show: false
|
},
|
xAxis: {
|
type: 'value',
|
boundaryGap: [0, 0.01],
|
splitLine: { show: false }, // 隐藏网格线
|
axisTick: { show: false } // 隐藏刻度线
|
},
|
yAxis: {
|
type: 'category',
|
data: ['待检', '在用', '停用', '其他', '报废']
|
},
|
series: [
|
{
|
name: '2012',
|
type: 'bar',
|
data: [10, 63, 21, 91, 8],
|
label: {
|
show: true,
|
position: 'right'
|
},
|
barWidth: 20
|
}
|
]
|
});
|
renderRepairChart({
|
tooltip: {
|
trigger: 'item'
|
},
|
title: {
|
left: '18%', // 基于容器宽度的50%
|
top: '35%',
|
text: `{a|10个}\n{b|未修复}\n{c|今日新增 +1}`,
|
textStyle: {
|
rich: {
|
a: {
|
color: '#4E5766',
|
fontSize: 20,
|
lineHeight: 30,
|
align: 'center'
|
},
|
b: {
|
color: '#1C2029',
|
fontSize: 18,
|
lineHeight: 30,
|
align: 'center'
|
},
|
c: {
|
color: '#ef6666',
|
fontSize: 15,
|
lineHeight: 30,
|
align: 'center'
|
}
|
}
|
}
|
},
|
legend: {
|
orient: 'vertical',
|
top: 'center',
|
right: 'right',
|
left: '70%'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['40%', '65%'], // 调整内外半径
|
center: ['30%', '50%'], // 将饼图中心向左移一点
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: false,
|
fontSize: 40,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 10, name: '待接单' },
|
{ value: 8, name: '待维修' },
|
{ value: 9, name: '维修中' },
|
{ value: 16, name: '审核中' },
|
{ value: 8, name: '其他' }
|
]
|
}
|
]
|
});
|
renderFaultChart({
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ['smt', '贴片机', '注胶机'],
|
axisTick: {
|
alignWithLabel: true
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: 'Direct',
|
type: 'bar',
|
barWidth: 20,
|
data: [10, 8, 12],
|
label: {
|
show: true,
|
position: 'top'
|
}
|
}
|
]
|
});
|
renderMaintenChart({
|
tooltip: {
|
trigger: 'item'
|
},
|
title: {
|
left: '21%', // 基于容器宽度的50%
|
top: '40%',
|
text: `{a|总台数}\n{b|20}`,
|
textStyle: {
|
rich: {
|
a: {
|
color: '#4E5766',
|
fontSize: 20,
|
lineHeight: 30,
|
align: 'center'
|
},
|
b: {
|
color: '#1C2029',
|
fontSize: 18,
|
lineHeight: 30,
|
align: 'center'
|
}
|
}
|
}
|
},
|
legend: {
|
orient: 'vertical',
|
top: 'center',
|
right: 'right',
|
left: '70%'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['40%', '65%'], // 调整内外半径
|
center: ['30%', '50%'], // 将饼图中心向左移一点
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: false,
|
fontSize: 40,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 10, name: '未保养' },
|
{ value: 8, name: '待保养' },
|
{ value: 9, name: '保养中' },
|
{ value: 16, name: '待接单' }
|
]
|
}
|
]
|
});
|
});
|
</script>
|
|
<template>
|
<div class="main flex justify-center p-2">
|
<div class="mr-2 w-1/3">
|
<Card :bordered="false" class="section-height rounded-none">
|
<template #title>
|
<TagTwoTone />
|
<label class="ml-2">常用功能</label>
|
</template>
|
<Row>
|
<Col v-for="i in 9" :span="8" class="flex cursor-pointer flex-col items-center justify-center py-6 hover:bg-gray-100">
|
<Avatar size="large" src="/src/assets/logo.png">
|
<!-- <template #icon>
|
<UserOutlined />
|
</template>-->
|
</Avatar>
|
<label class="mt-1">设备台账{{ i }}</label>
|
</Col>
|
</Row>
|
</Card>
|
|
<Card :bordered="false" class="section-height mt-2 rounded-none">
|
<template #title>
|
<TagTwoTone />
|
<span class="ml-2">使用状态</span>
|
</template>
|
|
<EchartsUI ref="useStatuChart" height="400px" />
|
</Card>
|
|
<Card :bordered="false" class="section-height mt-2 rounded-none">
|
<template #title>
|
<TagTwoTone />
|
<span class="ml-2">设备维修</span>
|
</template>
|
<div class="flex w-full flex-col justify-center items-center">
|
<div class="flex w-full py-3">
|
<div class="flex flex-col justify-center items-center w-1/3">
|
<span class="font-bold text-xl">3</span>
|
<span>响应超时</span>
|
</div>
|
<div class="flex flex-col justify-center items-center w-1/3">
|
<span class="font-bold text-xl">1</span>
|
<span>维修超时</span>
|
</div>
|
<div class="flex flex-col justify-center items-center w-1/3">
|
<span class="font-bold text-xl">0</span>
|
<span>停机超时</span>
|
</div>
|
</div>
|
|
<EchartsUI ref="repairChart" height="300px" width="400px" />
|
</div>
|
</Card>
|
</div>
|
|
<div class="mr-2 w-1/3">
|
<Card :bordered="false" class="section-height flex justify-center rounded-none p-0">
|
<div class="w-full">
|
<EchartsUI ref="instChart" width="400px" />
|
|
<div class="flex justify-around pb-5">
|
<div>
|
<div class="text-center text-4xl">100<label class="ml-1 text-xl font-bold">台</label></div>
|
<div class="text-center font-bold">设备总数</div>
|
</div>
|
|
<div>
|
<div class="text-center text-4xl text-red-500">5<label class="ml-1 text-xl font-bold">台</label></div>
|
<div class="text-center font-bold">故障总数</div>
|
</div>
|
</div>
|
</div>
|
</Card>
|
<Card :bordered="false" class="section-height mt-2 rounded-none">
|
<template #title>
|
<NotificationTwoTone />
|
<span class="ml-2">公告</span>
|
</template>
|
<template #extra>
|
<a-button type="link">查看更多 ></a-button>
|
</template>
|
|
<div>
|
<ul class="divide-border w-full divide-y" role="list">
|
<li
|
v-for="item in todoItems"
|
:key="item.title"
|
:class="{
|
'select-none line-through opacity-60': item.completed
|
}"
|
class="flex cursor-pointer justify-between gap-x-6 py-5"
|
>
|
<div class="flex min-w-0 items-center gap-x-4">
|
<div class="min-w-0 flex-auto">
|
<p class="text-foreground text-sm font-semibold leading-6">
|
{{ item.title }}
|
</p>
|
<!-- eslint-disable vue/no-v-html -->
|
<p class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5" v-html="item.content"></p>
|
</div>
|
</div>
|
<div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
|
<span class="text-foreground/80 mt-6 text-xs leading-6">
|
{{ item.date }}
|
</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</Card>
|
|
<Card :bordered="false" class="section-height mt-2 rounded-none">
|
<template #title>
|
<TagTwoTone />
|
<span class="ml-2">故障统计</span>
|
</template>
|
<span class="text-gray-500 text-xs ml-3">故障次数:10</span>
|
<EchartsUI ref="faultChart" height="360px" />
|
</Card>
|
|
</div>
|
|
<div class="w-1/3">
|
<div class="flex h-14 items-center justify-around rounded-none bg-white p-0">
|
<div class="flex h-10 w-28 cursor-pointer items-center justify-around rounded-sm hover:bg-gray-100" style="background: #eaf3fe">
|
<Image :preview="false" :width="20" src="/src/assets/logo.png" />
|
<span class="mr-2 font-bold" style="color: #2d83f4">故障知识库</span>
|
</div>
|
<div class="flex h-10 w-28 cursor-pointer items-center justify-around rounded-sm hover:bg-gray-100" style="background: #eaeafe">
|
<Image :preview="false" :width="20" src="/src/assets/logo.png" />
|
<span class="mr-2 font-bold" style="color: #5070e0">智能搜索</span>
|
</div>
|
<div class="flex h-10 w-28 cursor-pointer items-center justify-around rounded-sm hover:bg-gray-100" style="background: #ebf8f7">
|
<Image :preview="false" :width="20" src="/src/assets/logo.png" />
|
<span class="mr-2 font-bold" style="color: #32b9af">帮助中心</span>
|
</div>
|
</div>
|
<Card :bordered="false" class="todo-height mt-2 rounded-none">
|
<template #title>
|
<TagTwoTone />
|
<span class="ml-2">待办事项</span>
|
</template>
|
|
<div class="todo-title mt-5">设备管理</div>
|
<div class="flex w-full flex-wrap justify-between">
|
<div
|
v-for="index in 12"
|
:class="{
|
'justify-center': index % 3 == 2,
|
'justify-end': index % 3 == 0,
|
'mt-2': index > 3
|
}"
|
class="flex w-1/3"
|
>
|
<div class="todo-box cursor-pointer hover:bg-gray-100">
|
<Image :preview="false" :width="20" src="/src/assets/logo.png" />
|
<span>故障审核</span>
|
<span>{{ index }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="todo-title mt-20">备件管理</div>
|
<div class="flex w-full flex-wrap justify-between">
|
<div
|
v-for="index in 3"
|
:class="{
|
'justify-center': index % 3 == 2,
|
'justify-end': index % 3 == 0
|
}"
|
class="flex w-1/3"
|
>
|
<div class="todo-box border-gray-100">
|
<Image :preview="false" :width="20" src="/src/assets/logo.png" />
|
<span>故障审核</span>
|
<span>{{ index }}</span>
|
</div>
|
</div>
|
</div>
|
</Card>
|
|
<Card :bordered="false" class="early-warn-height mt-2 rounded-none">
|
<template #title>
|
<AlertTwoTone two-tone-color="red" />
|
<span class="ml-2">预警管理</span>
|
</template>
|
<div class="flex h-full items-center">
|
<div class="up-info-box w-1/2 flex h-40">
|
<div class="w-1/2 flex items-center h-full justify-center flex-col">
|
<div class="w-16">
|
<span class="text-xl text-green-600">7</span>
|
<span class="ml-1">种</span>
|
</div>
|
<div class="w-16">高于上限</div>
|
</div>
|
<div class="w-1/2 h-full flex items-center justify-center">
|
<Image :preview="false" src="/src/assets/img/img-up-limit.png" />
|
</div>
|
</div>
|
<div class="low-info-box w-1/2 flex h-40">
|
<div class="w-1/2 flex items-center h-full justify-center flex-col">
|
<div class="w-16">
|
<span class="text-xl text-red-600">10</span>
|
<span class="ml-1">种</span>
|
</div>
|
<div class="w-16">低于下限</div>
|
</div>
|
<div class="w-1/2 h-full flex items-center justify-center">
|
<Image :preview="false" src="/src/assets/img/img-lower-limit.png" />
|
</div>
|
</div>
|
</div>
|
</Card>
|
|
<Card :bordered="false" class="section-height mt-2 rounded-none">
|
<template #title>
|
<TagTwoTone />
|
<span class="ml-2">设备保养</span>
|
</template>
|
<div class="flex w-full flex-col justify-center items-center">
|
<div class="flex w-full py-3">
|
<div class="flex flex-col justify-center items-center w-1/3">
|
<span class="font-bold text-xl">3</span>
|
<span>未保养</span>
|
</div>
|
<div class="flex flex-col justify-center items-center w-1/3">
|
<span class="font-bold text-xl">1</span>
|
<span>本月到期</span>
|
</div>
|
<div class="flex flex-col justify-center items-center w-1/3">
|
<span class="font-bold text-xl">0</span>
|
<span>下月到期</span>
|
</div>
|
</div>
|
|
<EchartsUI ref="maintenChart" height="300px" width="400px" />
|
</div>
|
</Card>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.main {
|
height: 2000px;
|
}
|
|
.section-height {
|
height: 484px;
|
}
|
|
.todo-height {
|
height: 644px;
|
}
|
|
.early-warn-height {
|
height: 260px;
|
|
:deep(.ant-card-body) {
|
height: calc(100% - 56px);
|
}
|
|
.up-info-box {
|
background: #f2faff;
|
}
|
|
.low-info-box {
|
background: #fff5eb;
|
}
|
}
|
|
.todo-title {
|
width: 100px;
|
height: 30px;
|
background: #ecf3fe;
|
border-left: 2px solid #2c83f4;
|
line-height: 30px;
|
text-align: center;
|
color: #2d83f4;
|
clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
|
border-bottom-right-radius: 15px;
|
border-top-right-radius: 5px;
|
}
|
|
.todo-box {
|
width: 120px;
|
height: 42px;
|
background: #f5f6f7;
|
padding: 10px;
|
display: flex;
|
flex-wrap: nowrap;
|
overflow: hidden;
|
align-content: center;
|
justify-content: space-around;
|
margin-top: 20px;
|
cursor: pointer;
|
}
|
|
.todo-box:hover {
|
background: #eaf3fe;
|
}
|
</style>
|
