<!--
Description: 首页
Author: 李亚光
Date: 2023-07-05
-->
<script lang="ts" setup name="Dashboard">
import card from './components/showCard.vue'
import { img } from './components/imgData'
// 基本概况数据
const basicProfileData = ref([
{
img: img.tiaoya,
value: '25',
name: '调压站',
unit: '座',
},
{
img: img.well,
value: '5231',
name: '闸井',
unit: '个',
},
{
img: img.guanxian,
value: '3421',
name: '管线',
unit: 'KM',
},
])
// 设备运行情况数据
const deviceOperationData = ref([
{
img: img.zaixian,
value: '4571',
name: '在线',
unit: '个',
},
{
img: img.lixian,
value: '31',
name: '离线',
unit: '个',
},
{
img: img.tingyong,
value: '21',
name: '停用',
unit: '个',
},
])
// 工作台数据
const benchData = ref([
{
name: '当前报警',
img: img.dqbj,
url: '',
auth: '',
},
{
name: '闸井监测',
img: img.zjjc,
url: '',
auth: '',
},
{
name: '场站监测',
img: img.czjc,
url: '',
auth: '',
},
{
name: '管线监测',
img: img.gxjc,
url: '',
auth: '',
},
{
name: '设备管理',
img: img.ssgl,
url: '',
auth: '',
},
{
name: '报警统计',
img: img.bjtj,
url: '',
auth: '',
},
])
// 消息通知数据
const messageData = ref([
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
{
alarmTypeName: '闸井浓度超限报警',
alarmContent: '永定路中压闸1A',
alarmTime: '2024-12-30 12:00',
},
])
// 更多跳转
const more = (type: string) => {
}
</script>
<template>
<!-- 布局 -->
<app-container>
<!-- 上部 -->
<div class="top-container">
<div class="top-left-container">
<!-- 基本概况 -->
<card class="base" title="基本概况" :show-more="false">
<template #content>
<div class="base-container">
<div v-for="item in basicProfileData" :key="item" class="base-item">
<div class="img">
<img :src="item.img">
</div>
<div class="content">
<div class="name">
{{ item.name }}
</div>
<div class="value">
<span class="value">{{ item.value }}</span>
<span class="unit">{{ item.unit }}</span>
</div>
</div>
</div>
</div>
</template>
</card>
<!-- 设备运行情况 -->
<card class="base top" title="设备运行情况" :show-more="false">
<template #content>
<div class="base-container">
<div v-for="item in deviceOperationData" :key="item" class="base-item">
<div class="img">
<img :src="item.img">
</div>
<div class="content">
<div class="name">
{{ item.name }}
</div>
<div class="value">
<span class="value">{{ item.value }}</span>
<span class="unit">{{ item.unit }}</span>
</div>
</div>
</div>
</div>
</template>
</card>
</div>
<!-- 工作台 -->
<card class="bench" title="工作台" :show-more="false">
<template #content>
<div class="bench-container">
<div v-for="item in benchData" :key="item" class="bench-item">
<div class="img">
<img :src="item.img">
</div>
<div class="value">
{{ item.name }}
</div>
</div>
</div>
</template>
</card>
<!-- 消息通知 -->
<card class="message" title="消息通知" :show-more="true" @more="more('message')">
<template #content>
<el-scrollbar height="200px">
<div class="message-container">
<div v-for="item in messageData" :key="item" class="message-item">
<div class="left">
<span class="type">【{{ item.alarmTypeName }}】</span>
<span class="content">{{ item.alarmContent }}</span>
</div>
<span class="time">{{ item.alarmTime }}</span>
</div>
</div>
</el-scrollbar>
</template>
</card>
</div>
<!-- 中部 -->
<div class="middle-container top">
<!-- 设备分类统计 -->
<card class="type-count" title="设备分类统计" :show-more="true" @more="more('type')">
<template #content>
内容1111111111111
</template>
</card>
<!-- 管理单位设备统计 -->
<card class="dept-count" title="管理单位设备统计" :show-more="true" @more="more('dept')">
<template #content>
内容1111111111111
</template>
</card>
</div>
<!-- 底部 -->
<div class="bottom-container top">
<!-- 7日报警趋势分析 -->
<card class="week-alarm" title="7日报警趋势分析" :show-more="true" @more="more('anaylse')">
<template #content>
内容1111111111111
</template>
</card>
<!-- 各管理单位报警统计 -->
<card class="dept-alarm" title="各管理单位报警统计" :show-more="true" @more="more('alarm')">
<template #content>
内容1111111111111
</template>
</card>
</div>
</app-container>
</template>
<style lang="scss" scoped>
.top-container {
width: 100%;
display: flex;
justify-content: space-around;
.top-left-container {
width: 36%;
.base {
width: 100%;
height: 120px;
.base-container {
display: flex;
justify-content: space-around;
.base-item {
width: 30%;
display: flex;
.img {
width: 30%;
}
.content {
width: 70%;
.value {
.value {
font-weight: 700;
font-size: 20px;
}
}
}
}
}
}
}
.bench {
width: 22%;
height: 250px;
.bench-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
.bench-item {
width: 40%;
display: flex;
height: 40px;
margin-top: 15px;
&:hover {
border: 1px solid #ccc;
cursor: pointer;
box-shadow: 0 0 12px rgb(0 0 0 / 12%);
border-radius: 4px;
}
.img {
display: flex;
justify-content: center;
flex-direction: column;
}
.value {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
width: 60%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.message {
width: 40%;
height: 250px;
.message-container {
.message-item {
height: 33px;
line-height: 33px;
display: flex;
justify-content: space-between;
padding: 0 10px;
width: 100%;
.left {
width: 75%;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
display: inline-block;
padding-left: 10px;
width: 65%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
font-size: 16px;
color: #7c7777;
white-space: nowrap;
}
}
}
}
}
.middle-container {
width: 100;
display: flex;
justify-content: space-around;
.type-count,
.dept-count {
width: 49.4%;
height: 255px;
}
}
.bottom-container {
width: 100;
display: flex;
justify-content: space-around;
.week-alarm,
.dept-alarm {
width: 49.4%;
height: 255px;
}
}
.top {
margin-top: 10px;
}
</style>
