|
|
<template>
|
|
|
<el-card class="card">
|
|
|
<el-scrollbar height="100%">
|
|
|
<h2 class="cardHead">运行信息</h2>
|
|
|
|
|
|
<div class="cardBody" v-if="globalOverviewBool">
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 设备状态： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">正常/中断</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 温度： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">23℃</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 湿度： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">45%RH</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 风力： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">三级（5m/s）</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 风向： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">东风</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 雨量： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">20mm</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
|
|
|
<div class="cardBody" v-if="fireExtinguishingBool">
|
|
|
<el-row style="display: flex; align-items: center">
|
|
|
<el-col :span="24">火灾报警系统</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="1"
|
|
|
>设备状态
|
|
|
<el-tag type="primary">正常/故障</el-tag>
|
|
|
</el-col>
|
|
|
<el-col :span="8" :offset="2"
|
|
|
>通信状态
|
|
|
<el-tag type="primary">正常/中断</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="22" :offset="1"
|
|
|
>火灾总告警
|
|
|
<!-- 带边框的蓝色圆 -->
|
|
|
<div class="blue-circle redBordered"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-divider style="margin-top: 10px; margin-bottom: 10px" />
|
|
|
|
|
|
<el-row style="display: flex; align-items: center">
|
|
|
<el-col :span="24">2号主变灭火系统（排油注氮灭火）</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="7" :offset="1">
|
|
|
启动方式
|
|
|
<el-tag type="primary">自动/手动</el-tag>
|
|
|
</el-col>
|
|
|
<el-col :span="7" :offset="1"
|
|
|
>设备状态
|
|
|
<el-tag type="primary">正常/故障</el-tag>
|
|
|
</el-col>
|
|
|
<el-col :span="7" :offset="1"
|
|
|
>通信状态
|
|
|
<el-tag type="primary">正常/中断</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="7" :offset="1"
|
|
|
>火灾总告警
|
|
|
<div class="blue-circle redBordered"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="7" :offset="1">
|
|
|
<el-popover placement="top" :width="170" trigger="hover" content="查看灭火允许满足条件">
|
|
|
<template #reference>
|
|
|
<el-text class="mx-1" type="primary">灭火允许</el-text>
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
|
|
|
<!-- 带边框的蓝色圆 -->
|
|
|
<div class="blue-circle greenBordered"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="7" :offset="1" style="display: flex; align-items: center">
|
|
|
<el-text class="mx-1" type="primary" @click="dialogTableVisible = true"
|
|
|
>灭火动作</el-text
|
|
|
>
|
|
|
|
|
|
<!-- 带边框的蓝色圆 -->
|
|
|
<div class="blue-circle redBordered"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center; margin-top: 8px">
|
|
|
<el-col :span="5" :offset="1">灭火手动操作</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-button type="primary" size="small">手动启动</el-button>
|
|
|
<el-button type="primary" size="small">紧急停止</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
|
|
|
<div class="cardBody" v-if="firePoliceBool">
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 设备状态： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">正常/故障</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 通信状态： </el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-tag type="primary">正常/中断</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="0" style="display: flex; align-items: center">
|
|
|
<el-col :span="8" :offset="4"> 电源状态：</el-col>
|
|
|
<el-col :span="4">
|
|
|
<!-- 主供电源工作/备供电源工作/电源中断 -->
|
|
|
<el-tag type="primary">主供电源工作</el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- :append-to-body="true" -->
|
|
|
<el-dialog
|
|
|
v-model="dialogTableVisible"
|
|
|
title="灭火动作流程"
|
|
|
style="height: 60vh"
|
|
|
width="45%"
|
|
|
:append-to-body="true"
|
|
|
>
|
|
|
<el-scrollbar height="42vh">
|
|
|
<el-timeline mode="alternate-reverse">
|
|
|
<el-timeline-item
|
|
|
v-for="(activity, index) in activities"
|
|
|
:key="index"
|
|
|
center
|
|
|
:timestamp="activity.timestamp"
|
|
|
>
|
|
|
{{ activity.content }}
|
|
|
</el-timeline-item>
|
|
|
</el-timeline>
|
|
|
</el-scrollbar>
|
|
|
|
|
|
<!-- 按钮 -->
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="dialogTableVisible = false">退出</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { computed, ref, watch, onMounted } from 'vue';
|
|
|
|
|
|
let dialogTableVisible = ref(false);
|
|
|
|
|
|
const props = defineProps({
|
|
|
fontFamily: {
|
|
|
type: String,
|
|
|
default: 'Segoe UI'
|
|
|
},
|
|
|
fontSize: {
|
|
|
type: Number,
|
|
|
default: 14
|
|
|
},
|
|
|
testColor: {
|
|
|
type: String,
|
|
|
default: '#000000'
|
|
|
},
|
|
|
testBool: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
},
|
|
|
dataSource: {
|
|
|
type: String,
|
|
|
default: '--'
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const activities = [
|
|
|
{
|
|
|
content: '灭火允许',
|
|
|
timestamp: '2018-04-15'
|
|
|
},
|
|
|
{
|
|
|
content: '手动启动',
|
|
|
timestamp: '2018-04-16'
|
|
|
},
|
|
|
{
|
|
|
content: '紧急停止',
|
|
|
timestamp: '2018-04-17'
|
|
|
},
|
|
|
{
|
|
|
content: '手动启动',
|
|
|
timestamp: '2018-04-18'
|
|
|
},
|
|
|
{
|
|
|
content: '灭火允许',
|
|
|
timestamp: '2018-04-15'
|
|
|
},
|
|
|
{
|
|
|
content: '手动启动',
|
|
|
timestamp: '2018-04-16'
|
|
|
},
|
|
|
{
|
|
|
content: '紧急停止',
|
|
|
timestamp: '2018-04-17'
|
|
|
},
|
|
|
{
|
|
|
content: '手动启动',
|
|
|
timestamp: '2018-04-18'
|
|
|
}
|
|
|
];
|
|
|
|
|
|
onMounted(() => {
|
|
|
loadDataSource(props.dataSource);
|
|
|
});
|
|
|
|
|
|
watch(
|
|
|
() => props.dataSource,
|
|
|
(newVal, oldVal) => {
|
|
|
loadDataSource(newVal);
|
|
|
}
|
|
|
);
|
|
|
|
|
|
//全站总揽
|
|
|
let globalOverviewBool = ref(false);
|
|
|
//消防系统
|
|
|
let fireExtinguishingBool = ref(false);
|
|
|
|
|
|
//火灾报警主机
|
|
|
let firePoliceBool = ref(false);
|
|
|
|
|
|
function loadDataSource(val: string) {
|
|
|
if (val === 'globalOverview') {
|
|
|
globalOverviewBool.value = true;
|
|
|
fireExtinguishingBool.value = false;
|
|
|
firePoliceBool.value = false;
|
|
|
} else if (val === 'fireExtinguishing') {
|
|
|
globalOverviewBool.value = false;
|
|
|
fireExtinguishingBool.value = true;
|
|
|
firePoliceBool.value = false;
|
|
|
} else if (val === 'firePolice') {
|
|
|
globalOverviewBool.value = false;
|
|
|
fireExtinguishingBool.value = false;
|
|
|
firePoliceBool.value = true;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let computedSize = computed({
|
|
|
// 读取
|
|
|
get() {
|
|
|
return props.fontSize + 'px';
|
|
|
}, // 修改
|
|
|
set(val) {
|
|
|
console.log('有人修改了fullName', val);
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.blue-circle {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
border-radius: 50%;
|
|
|
background-color: #409eff;
|
|
|
display: inline-block;
|
|
|
margin-left: 5px;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.blueBordered {
|
|
|
background-color: rgb(217, 236, 255);
|
|
|
border: 2px solid rgb(160, 207, 255);
|
|
|
}
|
|
|
|
|
|
.redBordered {
|
|
|
background-color: rgb(253, 226, 226);
|
|
|
border: 2px solid rgb(250, 182, 182);
|
|
|
}
|
|
|
|
|
|
.greenBordered {
|
|
|
background-color: rgb(225, 243, 216);
|
|
|
border: 2px solid rgb(179, 225, 157);
|
|
|
}
|
|
|
|
|
|
:deep(.el-card__body) {
|
|
|
padding: 0;
|
|
|
padding-top: 10px;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
|
|
|
:deep(.adTextDetailDialogClass .el-dialog__body) {
|
|
|
max-height: calc(100vh - 150px);
|
|
|
overflow: auto;
|
|
|
border-top: 1px solid #dfdfdf;
|
|
|
border-bottom: 1px solid #dfdfdf;
|
|
|
}
|
|
|
:deep(.adTextDetailDialogClass .el-dialog) {
|
|
|
position: fixed;
|
|
|
height: 20vh !important;
|
|
|
background: #000;
|
|
|
left: 0 !important;
|
|
|
right: 0 !important;
|
|
|
top: 0 !important;
|
|
|
bottom: 0 !important;
|
|
|
margin: auto !important;
|
|
|
}
|
|
|
|
|
|
.el-row .el-col {
|
|
|
margin-bottom: 10px; /* 设置上下间距 */
|
|
|
}
|
|
|
|
|
|
P {
|
|
|
margin: 2px 0px;
|
|
|
padding: 0 15%;
|
|
|
transition: background-color 0.3s ease;
|
|
|
}
|
|
|
|
|
|
P:hover {
|
|
|
background-color: #f0f0f0; /* 悬停时的底色，您可以根据需要调整颜色 */
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
/* max-width: 480px; */
|
|
|
color: v-bind('props.testColor');
|
|
|
font-family: v-bind('props.fontFamily');
|
|
|
/* font-family: 'Segoe UI'; */
|
|
|
font-size: v-bind('computedSize');
|
|
|
}
|
|
|
|
|
|
.cardHead {
|
|
|
margin: 0;
|
|
|
padding: 0px;
|
|
|
padding-bottom: 5px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.cardBody {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0 0%;
|
|
|
|
|
|
/* padding-bottom: 15px; */
|
|
|
}
|
|
|
</style>
|