光字牌开发
parent
05cff73389
commit
865045c4fe
Binary file not shown.
Binary file not shown.
@ -1,20 +1,50 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%">
|
||||
<h2 class="my-button" style="width: 100%; height: 100%">{{ props.modelValue }}</h2>
|
||||
<!-- <h2 class="my-button" style="width: 100%; height: 100%">{{ props.modelValue }}</h2> -->
|
||||
<el-text class="my-button">{{ props.modelValue }}</el-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
fontFamily: String,
|
||||
testColor: String
|
||||
testColor: String,
|
||||
fontSize: Number,
|
||||
fontBold: Boolean
|
||||
});
|
||||
|
||||
let computedSize = computed({
|
||||
// 读取
|
||||
get() {
|
||||
return props.fontSize + 'px';
|
||||
}, // 修改
|
||||
set(val) {}
|
||||
});
|
||||
|
||||
let computedBold = computed({
|
||||
// 读取
|
||||
get() {
|
||||
return props.fontBold ? 'bold' : 'normal';
|
||||
}, // 修改
|
||||
set(val) {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
font-weight: v-bind('computedBold');
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
text-align: center;
|
||||
color: v-bind('props.testColor');
|
||||
font-family: v-bind('props.fontFamily');
|
||||
font-size: v-bind('computedSize');
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<el-card class="card">
|
||||
<h2 class="cardHead">基本信息</h2>
|
||||
<div class="cardBody">
|
||||
<el-scrollbar>
|
||||
<el-row
|
||||
v-for="item in dataObj"
|
||||
:key="item.field"
|
||||
:gutter="0"
|
||||
style="display: flex; align-items: center; margin-bottom: 1%"
|
||||
>
|
||||
<el-col :span="8" :offset="4">{{ item.field }}</el-col>
|
||||
<el-col :span="4">
|
||||
<el-tag type="primary" size="small">{{ item.value }}</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-row :gutter="0" style="display: flex; align-items: center;margin-bottom: 1%;">
|
||||
<el-col :span="8" :offset="4"> 名称 </el-col>
|
||||
<el-col :span="4">
|
||||
<el-tag type="primary" size="small">{{ data.name }}</el-tag>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch, onMounted, reactive } from 'vue';
|
||||
import { invariantObjMap, type Paragraph } from '@/utils/invariable';
|
||||
import { da } from 'element-plus/es/locales.mjs';
|
||||
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: String,
|
||||
default: '--'
|
||||
}
|
||||
});
|
||||
const dataObj = reactive<Paragraph[]>([]);
|
||||
|
||||
function getDataBySource() {
|
||||
dataObj.length = 0;
|
||||
if (props.dataSource != null && props.dataSource !== '' && props.dataSource !== '--') {
|
||||
const dataObjTemp = invariantObjMap[props.dataSource];
|
||||
if (!dataObjTemp) return;
|
||||
dataObj.push(...dataObjTemp);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadDataSource(props.dataSource);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.dataSource,
|
||||
(newVal, oldVal) => {
|
||||
loadDataSource(newVal);
|
||||
}
|
||||
);
|
||||
|
||||
function loadDataSource(val: string) {
|
||||
// 加载对应数据源的数据
|
||||
getDataBySource();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-card__body) {
|
||||
padding: 0;
|
||||
padding-top: 10px;
|
||||
padding-left: 2%;
|
||||
}
|
||||
|
||||
.el-row .el-col {
|
||||
margin-bottom: 6px; /* 设置上下间距 */
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.cardBody {
|
||||
width: 98%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<!-- <el-button @click="ccc">Default</el-button> -->
|
||||
<el-card class="card">
|
||||
<el-scrollbar height="100%">
|
||||
<h2 class="cardHead">{{ testContent }}</h2>
|
||||
|
||||
<div class="cardBody" v-if="skeletonBool">
|
||||
<el-skeleton :rows="rows" style="margin-top: 4%" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch, onMounted } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: 'Segoe UI'
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 14
|
||||
},
|
||||
testColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
testContent: {
|
||||
type: String,
|
||||
default: '标题内容'
|
||||
},
|
||||
skeletonBool: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
skeletonRows: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
});
|
||||
let computedSize = computed({
|
||||
// 读取
|
||||
get() {
|
||||
return props.fontSize + 'px';
|
||||
}, // 修改
|
||||
set(val) {
|
||||
console.log('有人修改了fullName', val);
|
||||
}
|
||||
});
|
||||
|
||||
let rows = computed({
|
||||
// 读取
|
||||
get() {
|
||||
if (props.skeletonRows >= 1) return props.skeletonRows - 1;
|
||||
else return 0;
|
||||
},
|
||||
set(val) {}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-card__body) {
|
||||
padding: 0;
|
||||
padding-top: 10px;
|
||||
/* padding-left: 10px; */
|
||||
}
|
||||
.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: 90%;
|
||||
height: 100%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
/* 让骨架屏的段落更厚且宽度一致 */
|
||||
:deep(.el-skeleton__item) {
|
||||
height: 24px; /* 增加段落高度，默认约 16px */
|
||||
width: 100%; /* 让所有段落宽度一致，填满容器 */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
export interface Paragraph {
|
||||
field: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const invariantObjMap: Record<string, Paragraph[]> = {
|
||||
// 火灾报警系统主机
|
||||
fireAlarmHost: [
|
||||
{ field: '名称', value: '火灾报警系统主机' },
|
||||
{ field: '产品型号', value: 'JB-QB-GST200' },
|
||||
{ field: '厂商', value: '海湾公司' },
|
||||
{ field: '运行日期', value: '2023-04-01' },
|
||||
{ field: '电源电压', value: '220V AC' },
|
||||
{ field: '频率', value: '50Hz' },
|
||||
{ field: '输出电压', value: '24V DC' },
|
||||
{ field: '输出电流', value: '5A' },
|
||||
{ field: '环境温度', value: '-5℃ ~ 45℃' },
|
||||
{ field: '相对湿度', value: '5% ~ 95%' },
|
||||
{ field: '维护单位', value: '陕西消防科技有限公司' },
|
||||
{ field: '联系电话', value: '188*****00' }
|
||||
],
|
||||
// 主机
|
||||
host: [
|
||||
{ field: '名称', value: 'PAVLN排油注氮智能防护系统控制主机' },
|
||||
{ field: '型号', value: 'JB-QB-GST200' },
|
||||
{ field: '厂家', value: '海湾公司' },
|
||||
{ field: '运行日期', value: '2015-10-10' },
|
||||
{ field: '电源电压', value: 'DC 220V 5A/AC 220V 5A' },
|
||||
{ field: '频率', value: '27~1600MHz' },
|
||||
{ field: '输出电压', value: '24V DC' },
|
||||
{ field: '输出电流', value: '5A' },
|
||||
{ field: '环境温度', value: '-5℃ ~ 45℃' },
|
||||
{ field: '相对湿度', value: '5% ~ 95%' },
|
||||
{ field: '维护单位', value: '陕西消防科技有限公司' },
|
||||
{ field: '联系电话', value: '188*****00' }
|
||||
],
|
||||
// 2号主变油色谱
|
||||
oilChromatography: [
|
||||
{ field: '厂家', value: '宁波理工' },
|
||||
{ field: '型号', value: 'MGA2000-6H' },
|
||||
{ field: '投运日期', value: '2015年10月27日' },
|
||||
{ field: '工作电源', value: 'AC220V,50Hz' },
|
||||
{ field: '工作环境温度', value: '-40°C~+80°C' },
|
||||
{ field: '工作相对湿度', value: '5%~95%' }
|
||||
],
|
||||
//2号主变局放
|
||||
partialDischarge: [
|
||||
{ field: '厂家', value: '上海思瑞在线监测技术有限公司' },
|
||||
{ field: '型号', value: 'MGA2000-6H' },
|
||||
{ field: '投运日期', value: '2015年10月16日' },
|
||||
{ field: '局放测量通道', value: '3个局放测量通道+1个噪音测量通道' },
|
||||
{ field: '局放传感器频宽', value: '300MHZ~2000MHZ' },
|
||||
{ field: '工作环境温度', value: '-25°C~+55°C' },
|
||||
{ field: '工作相对湿度', value: '5%~95%' }
|
||||
],
|
||||
//2215开关间隔
|
||||
switchGap: [
|
||||
{ field: '厂家', value: '许继电气股份有限公司' },
|
||||
{ field: '型号', value: 'DPD-801' },
|
||||
{ field: '投运日期', value: '2015年11月17日' },
|
||||
{ field: '局放测量通道', value: '3个局放测量通道+1个噪音测量通道' },
|
||||
{ field: '工作环境温度', value: '-40°C~+70°C' },
|
||||
{ field: '工作相对湿度', value: '5%~95%' }
|
||||
]
|
||||
};
|
||||
|
||||
const threeDPath = {
|
||||
smokeSiren: '/models/smokeSiren/smokeSiren.glb',
|
||||
default: '/models/default/default.glb'
|
||||
};
|
||||
|
||||
export const invariant3DObjMap: Record<string, Paragraph[]> = {
|
||||
// 烟感报警器
|
||||
smokeSiren: [
|
||||
{ field: '3D模型', value: threeDPath.smokeSiren },
|
||||
{ field: '厂家', value: '海湾公司' },
|
||||
{ field: '型号', value: 'VLP-666-CH标准型' },
|
||||
{ field: '投运日期', value: '2014-06-08' },
|
||||
{ field: '布设位置', value: '35kV高压室' },
|
||||
{ field: '供电电压', value: '18-30VDC' },
|
||||
{ field: 'IP等级', value: 'IP30' },
|
||||
{ field: '接线方式', value: '两线制(L+、L-)' },
|
||||
{ field: '尺寸(长x高x宽)', value: '350mmx225mmx125mm' },
|
||||
{ field: '报警灵敏度范围', value: '0.005%至20%obs/m' },
|
||||
{ field: '运行条件1', value: '探测器环境(-5°C至45°C)' },
|
||||
{ field: '运行条件2', value: '采样空气(-20°C至60°C)' },
|
||||
{ field: '运行条件3', value: '湿度(5%至95%RH)' }
|
||||
],
|
||||
// 温感火灾探测器
|
||||
temperatureFireDetector: [
|
||||
{ field: '3D模型', value: threeDPath.default },
|
||||
{ field: '厂家', value: '海湾公司' },
|
||||
{ field: '型号', value: 'CT1-155X' },
|
||||
{ field: '投运日期', value: '2012-08-08' },
|
||||
{ field: '使用环境', value: '温度-5°C~45°C' },
|
||||
{ field: '火灾响应规模', value: '10mm' },
|
||||
{ field: '测量温度精度', value: '≤1°C' },
|
||||
{ field: '类型', value: '定温式' },
|
||||
{ field: '报警温度', value: '85°C' },
|
||||
{ field: '标准', value: 'GB16280-2014' }
|
||||
],
|
||||
// 消火栓
|
||||
fireHydrant: [
|
||||
{ field: '3D模型', value: threeDPath.default },
|
||||
{ field: '厂家', value: '宏达消防设备制造有限公司' },
|
||||
{ field: '型号', value: 'SN-65' },
|
||||
{ field: '投运日期', value: '2016-10-10' },
|
||||
{ field: '布设位置', value: '生产综合楼1楼走廊' },
|
||||
{ field: '质量保证书类型', value: '型式认证' },
|
||||
{ field: '质保证书', value: 'NO2015-2032' },
|
||||
{ field: '维保单位', value: '陕西消防科技有限公司' },
|
||||
{ field: '联系电话', value: '188*****00' }
|
||||
],
|
||||
// 灭火器
|
||||
fireExtinguisher: [
|
||||
{ field: '3D模型', value: threeDPath.default },
|
||||
{ field: '厂家', value: '天河消防厂' },
|
||||
{ field: '型号', value: 'MFZ35' },
|
||||
{ field: '投运日期', value: '2012-08-08' },
|
||||
{ field: '布设位置', value: '生产综合楼1楼35kV高压室' },
|
||||
{ field: '名称', value: '推车式干粉灭火器' },
|
||||
{ field: '品牌', value: '淮海' },
|
||||
{ field: '灭火剂', value: '碳酸铵盐50%、硫酸铵25%、滑石粉25%' },
|
||||
{ field: '灭火级别', value: 'ABCD' }
|
||||
],
|
||||
// 疏散指示灯
|
||||
evacuationSign: [
|
||||
{ field: '3D模型', value: threeDPath.default },
|
||||
{ field: '厂家', value: 'XXX消防设备有限公司' },
|
||||
{ field: '型号', value: 'BSD128F(自带应急照明)' },
|
||||
{ field: '投运日期', value: '2013-08-06' },
|
||||
{ field: '布设位置', value: '110kV保护室' },
|
||||
{ field: '输入电压', value: 'AC220V(+10%)' },
|
||||
{ field: '频率', value: '50Hz' },
|
||||
{ field: '功率', value: '<3W' },
|
||||
{ field: '应急时间', value: '>=90min' },
|
||||
{ field: '转换时间', value: '<=10s' },
|
||||
{ field: '充电时间', value: '>=24h' },
|
||||
{ field: '电池类型', value: 'Ni-Cd 1.2v 800mAh' }
|
||||
],
|
||||
// 红外对射
|
||||
infraredBeam: [
|
||||
{ field: '3D模型', value: threeDPath.default },
|
||||
{ field: '厂家', value: 'XX霍尼维尔' },
|
||||
{ field: '生产型号', value: 'DT-8041' },
|
||||
{ field: '供电电源', value: '9.0-15VDC' },
|
||||
{ field: '微波频率', value: '10.525GHz' },
|
||||
{ field: '工作温度', value: '-10°C~55°C' },
|
||||
{ field: '相对湿度', value: '5至93%' },
|
||||
{ field: '探测范围', value: '12m' }
|
||||
],
|
||||
// 门禁控制器
|
||||
accessController: [
|
||||
{ field: '3D模型', value: threeDPath.default },
|
||||
{ field: '生产厂家', value: 'Pegasus' },
|
||||
{ field: '生产型号', value: 'PP6750V' },
|
||||
{ field: '投运日期', value: '2017-05-09' },
|
||||
{ field: '电源电压', value: 'DC12V' },
|
||||
{ field: '工作电流', value: '100mA' },
|
||||
{ field: '管理门数', value: '4' }
|
||||
]
|
||||
};
|
||||
Loading…
Reference in New Issue