|
|
<template>
|
|
|
<el-card class="card">
|
|
|
<h2 class="cardHead">基本信息</h2>
|
|
|
|
|
|
<div class="cardBody">
|
|
|
<el-scrollbar>
|
|
|
<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">JB-QB-GST200</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">2015-10-10</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">220V AC</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">50Hz</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">24V DC</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">5A</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">-5℃ ~ 45℃</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">5% ~ 95%</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">188*****00 </el-tag>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
</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: 6px; /* 设置上下间距 */
|
|
|
}
|
|
|
|
|
|
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%;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
height: calc(100% - 40px); /* 减去标题高度 */
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
</style>
|