开发消防
parent
3105f0276e
commit
c3950561f9
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<h2 class="cardHead">操作流程</h2>
|
||||
<div class="cardBody">
|
||||
<el-steps
|
||||
style="max-width: 100%"
|
||||
:active="4"
|
||||
align-center
|
||||
direction="vertical"
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step description="变压器故障起火" />
|
||||
<el-step>
|
||||
<template #description>
|
||||
保护动作
|
||||
<div class="parallel-box">
|
||||
<el-tag type="primary">重瓦斯动作</el-tag>
|
||||
<el-tag type="success">温控器动作</el-tag>
|
||||
<el-tag type="primary">压力释放动作</el-tag>
|
||||
<el-tag type="primary">火灾探测器动作</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-step>
|
||||
<el-step description="排油阀开启" />
|
||||
<el-step description="注氮阀开启" />
|
||||
<el-step description="注氮阀关闭" />
|
||||
<el-step description="注氮 10 分钟以上达到防爆灭火效果" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<el-button type="primary" size="small">手动启动</el-button>
|
||||
<el-button type="primary" size="small">手动停止</el-button>
|
||||
<el-button type="primary" size="small">紧急停止</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card :deep(.el-card__body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cardBody {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 并行步骤框 */
|
||||
.parallel-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* el-tag 样式调整 */
|
||||
.parallel-box :deep(.el-tag) {
|
||||
text-align: left;
|
||||
padding: 8px 16px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* 并行步骤样式 */
|
||||
.parallel-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 按钮组样式 */
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 1%;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: #ffffff;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 操作区域 */
|
||||
.operation-area {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.area-title {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #4facfe;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
color: #f5576c;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.note-label {
|
||||
font-weight: bold;
|
||||
color: #f093fb;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.notes {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<h2 class="cardHead">火灾探测器基本信息</h2>
|
||||
<div class="cardBody">
|
||||
<el-row :gutter="20" style="height: 100%">
|
||||
<el-col :span="12" class="image-col">
|
||||
<img src="/imgs/xianqvan.png" style="width: 100%; height: 100%" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">厂家</el-col>
|
||||
<el-col :span="12"><el-tag size="small">海湾公司</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">型号</el-col>
|
||||
<el-col :span="12"><el-tag size="small">CTI-155X</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">投运日期</el-col>
|
||||
<el-col :span="12"><el-tag size="small">2012-08-08</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">使用环境</el-col>
|
||||
<el-col :span="12"><el-tag size="small">温度 -5℃~45℃</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">火灾响应规模</el-col>
|
||||
<el-col :span="12"><el-tag size="small">10mm</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">测量温度精度</el-col>
|
||||
<el-col :span="12"><el-tag size="small">≤1℃</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">定位精度</el-col>
|
||||
<el-col :span="12"><el-tag size="small">≤1 米</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">类型</el-col>
|
||||
<el-col :span="12"><el-tag size="small">定温式</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">报警温度</el-col>
|
||||
<el-col :span="12"><el-tag size="small">85℃</el-tag></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="info-row">
|
||||
<el-col :span="10" class="info-label">标准</el-col>
|
||||
<el-col :span="12"><el-tag size="small">GB16280-2014</el-tag></el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card :deep(.el-card__body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cardBody {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* el-row 高度继承 */
|
||||
.cardBody :deep(.el-row) {
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
/* el-col 高度继承 */
|
||||
.cardBody :deep(.el-col) {
|
||||
/* height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch; */
|
||||
}
|
||||
|
||||
/* 图片列样式 */
|
||||
.image-col {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 探测器图片样式 */
|
||||
.detector-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 信息行样式 */
|
||||
.info-row {
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* el-tag 样式 */
|
||||
.info-row :deep(.el-tag) {
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<!-- 2号主变 -->
|
||||
<el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<h2 class="cardHead">消火栓信息</h2>
|
||||
<div class="table-wrapper" v-loading="arr.length === 0">
|
||||
<el-table
|
||||
:data="arr"
|
||||
style="width: 100%"
|
||||
class="full-height-table"
|
||||
@cell-click="handleCellClick"
|
||||
>
|
||||
<el-table-column prop="equipmentName" label="设备名称" />
|
||||
<el-table-column prop="equipmentModel" label="规格型号" />
|
||||
<el-table-column prop="equipmentPlace" label="设备位置" />
|
||||
<el-table-column prop="manufacturers" label="厂家" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, onUnmounted } from 'vue';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
// 导入全局类型定义
|
||||
/// <reference path="../../../global.d.ts" />
|
||||
|
||||
function handleCellClick(obj: any) {
|
||||
console.log('点击：', obj);
|
||||
emitter.emit('binding-obj-facility-move', obj.id);
|
||||
}
|
||||
|
||||
emitter.on('binding-data-update', () => {
|
||||
console.log('@@binding-data-update');
|
||||
dataInit();
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: '黑体'
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
testColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
definitionItemJson: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
console.log('父传子itemjson:', props.definitionItemJson);
|
||||
|
||||
// 计算属性——既读取又修改
|
||||
let computedSize = computed({
|
||||
// 读取
|
||||
get() {
|
||||
return props.fontSize + 'px';
|
||||
}, // 修改
|
||||
set(val) {}
|
||||
});
|
||||
|
||||
//数据初始化
|
||||
async function dataInit() {}
|
||||
|
||||
// 在 onMounted 中
|
||||
onMounted(async () => {
|
||||
await dataInit();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('binding-data-update');
|
||||
});
|
||||
|
||||
//node
|
||||
interface EquipmentNode {
|
||||
equipmentName: string; //设备名称
|
||||
equipmentModel: string; //规格型号
|
||||
equipmentPlace: string; //设备位置
|
||||
manufacturers: string; //厂家
|
||||
}
|
||||
|
||||
// 数据源头
|
||||
// equipmentState 0正常 1故障
|
||||
// currentState 0未动作 1报警 2动作 3分位 4关闭 5开启 6运行 7正常
|
||||
// operation true屏蔽 false取消屏蔽 null
|
||||
const arr: EquipmentNode[] = [
|
||||
{
|
||||
equipmentName: '生产综合楼一楼消火栓1',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼一楼东走廊',
|
||||
manufacturers: '宏达'
|
||||
},
|
||||
{
|
||||
equipmentName: '生产综合楼一楼消火栓2',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼一楼西走廊',
|
||||
manufacturers: '宏达'
|
||||
},
|
||||
{
|
||||
equipmentName: '生产综合楼二楼消火栓1',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼二楼东走廊',
|
||||
manufacturers: '宏达'
|
||||
},
|
||||
{
|
||||
equipmentName: '生产综合楼二楼消火栓2',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼二楼西走廊',
|
||||
manufacturers: '宏达'
|
||||
},
|
||||
{
|
||||
equipmentName: '生产综合楼一楼消火栓1',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼一楼东走廊',
|
||||
manufacturers: '宏达'
|
||||
},
|
||||
{
|
||||
equipmentName: '生产综合楼一楼消火栓2',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼一楼西走廊',
|
||||
manufacturers: '宏达'
|
||||
},
|
||||
{
|
||||
equipmentName: '生产综合楼二楼消火栓1',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼二楼东走廊',
|
||||
manufacturers: '宏达'
|
||||
},
|
||||
{
|
||||
equipmentName: '生产综合楼二楼消火栓2',
|
||||
equipmentModel: 'SN-65',
|
||||
equipmentPlace: '生产综合楼二楼西走廊',
|
||||
manufacturers: '宏达'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card :deep(.el-card__body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.full-height-table {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-height-table :deep(.el-table__body-wrapper) {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.operation-btn {
|
||||
width: 60px;
|
||||
min-width: 50px;
|
||||
padding: 8px 12px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* 控制表头文字大小 */
|
||||
.full-height-table :deep(.el-table__header th) {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 控制表格内容文字大小 */
|
||||
.full-height-table :deep(.el-table__body td) {
|
||||
font-size: v-bind('computedSize');
|
||||
color: v-bind('props.testColor');
|
||||
}
|
||||
|
||||
/* 控制标签文字大小 */
|
||||
.full-height-table :deep(.el-tag) {
|
||||
font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
|
||||
}
|
||||
|
||||
/* 控制按钮文字大小 */
|
||||
.full-height-table :deep(.el-button) {
|
||||
font-size: v-bind('computedSize');
|
||||
color: v-bind('props.testColor');
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<!-- 2号主变 -->
|
||||
<el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<h2 class="cardHead">运行信息</h2>
|
||||
<div class="table-wrapper" v-loading="arr.length === 0">
|
||||
<el-table
|
||||
:data="arr"
|
||||
style="width: 100%"
|
||||
class="full-height-table"
|
||||
@cell-click="handleCellClick"
|
||||
>
|
||||
<el-table-column prop="equipmentName" label="设备名称" />
|
||||
|
||||
<el-table-column label="设备状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.equipmentState === 0 ? 'success' : 'warning'">
|
||||
{{ row.equipmentState === 0 ? '正常' : '故障' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="primary">{{ row.currentState }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.operation == null || row.operation === ''" type="info"
|
||||
>无操作</el-tag
|
||||
>
|
||||
<template v-else>
|
||||
<el-button type="primary" size="small">开启</el-button>
|
||||
<el-button type="primary" size="small">关闭</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, onUnmounted } from 'vue';
|
||||
import emitter from '@/utils/emitter';
|
||||
|
||||
// 导入全局类型定义
|
||||
/// <reference path="../../../global.d.ts" />
|
||||
|
||||
function handleCellClick(obj: any) {
|
||||
console.log('点击：', obj);
|
||||
emitter.emit('binding-obj-facility-move', obj.id);
|
||||
}
|
||||
|
||||
emitter.on('binding-data-update', () => {
|
||||
console.log('@@binding-data-update');
|
||||
dataInit();
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: '黑体'
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
testColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
definitionItemJson: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
console.log('父传子itemjson:', props.definitionItemJson);
|
||||
|
||||
// 计算属性——既读取又修改
|
||||
let computedSize = computed({
|
||||
// 读取
|
||||
get() {
|
||||
return props.fontSize + 'px';
|
||||
}, // 修改
|
||||
set(val) {}
|
||||
});
|
||||
|
||||
//数据初始化
|
||||
async function dataInit() {}
|
||||
|
||||
// 在 onMounted 中
|
||||
onMounted(async () => {
|
||||
await dataInit();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('binding-data-update');
|
||||
});
|
||||
|
||||
//node
|
||||
interface EquipmentNode {
|
||||
equipmentName: string; //设备名称
|
||||
equipmentState: number; //设备状态 0正常 1故障
|
||||
currentState: string; //当前状态
|
||||
operation: boolean | null; //操作 true屏蔽 false取消屏蔽 null
|
||||
}
|
||||
|
||||
// 数据源头
|
||||
// equipmentState 0正常 1故障
|
||||
// currentState 0未动作 1报警 2动作 3分位 4关闭 5开启 6运行 7正常
|
||||
// operation true屏蔽 false取消屏蔽 null
|
||||
const arr: EquipmentNode[] = [
|
||||
{
|
||||
equipmentName: '消防泵控制装置',
|
||||
equipmentState: 0,
|
||||
currentState: '运行',
|
||||
operation: null
|
||||
},
|
||||
{
|
||||
equipmentName: '消防泵主供电源供电',
|
||||
equipmentState: 0,
|
||||
currentState: '关',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '消防泵备用电源供电',
|
||||
equipmentState: 0,
|
||||
currentState: '开',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '控制装置主供电源供电',
|
||||
equipmentState: 0,
|
||||
currentState: '开',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '控制装置备用电源供电',
|
||||
equipmentState: 0,
|
||||
currentState: '关',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '深井泵',
|
||||
equipmentState: 0,
|
||||
currentState: '关',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '高压侧断路器',
|
||||
equipmentState: 0,
|
||||
currentState: '关',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '1号消防泵',
|
||||
equipmentState: 0,
|
||||
currentState: '关',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '2号消防泵',
|
||||
equipmentState: 0,
|
||||
currentState: '关',
|
||||
operation: true
|
||||
},
|
||||
{
|
||||
equipmentName: '消防水池水位',
|
||||
equipmentState: 0,
|
||||
currentState: '80%',
|
||||
operation: null
|
||||
},
|
||||
{
|
||||
equipmentName: '管网压力',
|
||||
equipmentState: 0,
|
||||
currentState: '0.4Mpa',
|
||||
operation: null
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card :deep(.el-card__body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.full-height-table {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-height-table :deep(.el-table__body-wrapper) {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.operation-btn {
|
||||
width: 60px;
|
||||
min-width: 50px;
|
||||
padding: 8px 12px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* 控制表头文字大小 */
|
||||
.full-height-table :deep(.el-table__header th) {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 控制表格内容文字大小 */
|
||||
.full-height-table :deep(.el-table__body td) {
|
||||
font-size: v-bind('computedSize');
|
||||
color: v-bind('props.testColor');
|
||||
}
|
||||
|
||||
/* 控制标签文字大小 */
|
||||
.full-height-table :deep(.el-tag) {
|
||||
font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
|
||||
}
|
||||
|
||||
/* 控制按钮文字大小 */
|
||||
.full-height-table :deep(.el-button) {
|
||||
font-size: v-bind('computedSize');
|
||||
color: v-bind('props.testColor');
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<el-card class="card">
|
||||
<h3 class="cardHead">2号主变排油注氮灭火</h3>
|
||||
|
||||
<div class="cardBody">
|
||||
<el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="danger" size="large" class="full-width-tag">火灾探测器1</el-tag>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="danger" size="large" class="full-width-tag">火灾探测器2</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="warning" size="large" class="full-width-tag">火灾探测器3</el-tag>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="primary" size="large" class="full-width-tag">火灾探测器4</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="danger" size="large" class="full-width-tag">注氮阀</el-tag>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="danger" size="large" class="full-width-tag">排油阀</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="danger" size="large" class="full-width-tag">断流阀</el-tag>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="full-width-col">
|
||||
<el-tag type="primary" size="large" class="full-width-tag">氮气瓶</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</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'
|
||||
},
|
||||
testBool: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
let computedSize = computed({
|
||||
// 读取
|
||||
get() {
|
||||
return props.fontSize + 'px';
|
||||
}, // 修改
|
||||
set(val) {
|
||||
console.log('有人修改了fullName', val);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row-spacing {
|
||||
margin-bottom: 10px; /* 每行之间的间隔 */
|
||||
}
|
||||
|
||||
.full-width-col {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
|
||||
.full-width-tag {
|
||||
width: 85%; /* 填满父容器 */
|
||||
text-align: center; /* 文字水平居中 */
|
||||
display: flex; /* 使用 flexbox */
|
||||
justify-content: center; /* 文字水平居中 */
|
||||
align-items: center; /* 文字垂直居中 */
|
||||
font-size: v-bind('computedSize');
|
||||
}
|
||||
|
||||
/* 闪烁动画 */
|
||||
.blinking-tag {
|
||||
animation: blink 1s infinite; /* 1秒一次无限循环 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1; /* 完全不透明 */
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3; /* 半透明 */
|
||||
}
|
||||
}
|
||||
|
||||
.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' - 1);
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: v-bind('computedSize' + 2);
|
||||
}
|
||||
.cardBody {
|
||||
width: 100%;
|
||||
margin: 0 0%;
|
||||
padding: 0px 0%;
|
||||
/* padding-bottom: 15px; */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 定义组件名称用于 keep-alive
|
||||
defineOptions({
|
||||
name: 'PreviewIndex'
|
||||
});
|
||||
|
||||
import { MtPreview } from '@/export';
|
||||
import { onMounted, ref, reactive, onUnmounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { globalStore } from '@/components/mt-edit/store/global';
|
||||
import { useExportJsonToDoneJson } from '@/components/mt-edit/composables';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { modelApi } from '@/utils/request';
|
||||
const route = useRoute();
|
||||
|
||||
const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
|
||||
const onEventCallBack = (type: string, item_id: string) => {
|
||||
console.log(type, item_id);
|
||||
|
||||
if (type == 'test-dialog') {
|
||||
ElMessage.success(`获取到了id:${item_id}`);
|
||||
}
|
||||
};
|
||||
onUnmounted(() => {
|
||||
console.log('view卸载完毕');
|
||||
});
|
||||
|
||||
async function newLoadModel() {
|
||||
let endJson = {
|
||||
menuType: route.query.screen
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await modelApi.model_getModelData_post(endJson);
|
||||
|
||||
if (response.code == 200) {
|
||||
const result = await response.data;
|
||||
const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
|
||||
|
||||
// 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
|
||||
const processedImportDoneJson = importDoneJson.map((item) => {
|
||||
if (item.props) {
|
||||
return {
|
||||
...item,
|
||||
props: reactive(item.props || {})
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
props: reactive(item.props || {})
|
||||
};
|
||||
});
|
||||
|
||||
console.log('processedImportDoneJson:', processedImportDoneJson);
|
||||
MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
|
||||
if (globalStore.group_ids.has(route.query.screen as string)) {
|
||||
globalStore.group_ids.delete(route.query.screen as string);
|
||||
}
|
||||
globalStore.group_ids.set(
|
||||
route.query.screen as string,
|
||||
processedImportDoneJson.map((item) => item.id)
|
||||
);
|
||||
|
||||
ElMessage.success('数据模型加载成功');
|
||||
} else {
|
||||
ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求错误：', error);
|
||||
ElMessage.error('网络请求失败');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('view挂载完毕');
|
||||
newLoadModel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vertical-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 定义组件名称用于 keep-alive
|
||||
defineOptions({
|
||||
name: 'PreviewIndex'
|
||||
});
|
||||
|
||||
import { MtPreview } from '@/export';
|
||||
import { onMounted, ref, reactive, onUnmounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { globalStore } from '@/components/mt-edit/store/global';
|
||||
import { useExportJsonToDoneJson } from '@/components/mt-edit/composables';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { modelApi } from '@/utils/request';
|
||||
const route = useRoute();
|
||||
|
||||
const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
|
||||
const onEventCallBack = (type: string, item_id: string) => {
|
||||
console.log(type, item_id);
|
||||
|
||||
if (type == 'test-dialog') {
|
||||
ElMessage.success(`获取到了id:${item_id}`);
|
||||
}
|
||||
};
|
||||
onUnmounted(() => {
|
||||
console.log('view卸载完毕');
|
||||
});
|
||||
|
||||
async function newLoadModel() {
|
||||
let endJson = {
|
||||
menuType: route.query.screen
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await modelApi.model_getModelData_post(endJson);
|
||||
|
||||
if (response.code == 200) {
|
||||
const result = await response.data;
|
||||
const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
|
||||
|
||||
// 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
|
||||
const processedImportDoneJson = importDoneJson.map((item) => {
|
||||
if (item.props) {
|
||||
return {
|
||||
...item,
|
||||
props: reactive(item.props || {})
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
props: reactive(item.props || {})
|
||||
};
|
||||
});
|
||||
|
||||
console.log('processedImportDoneJson:', processedImportDoneJson);
|
||||
MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
|
||||
if (globalStore.group_ids.has(route.query.screen as string)) {
|
||||
globalStore.group_ids.delete(route.query.screen as string);
|
||||
}
|
||||
globalStore.group_ids.set(
|
||||
route.query.screen as string,
|
||||
processedImportDoneJson.map((item) => item.id)
|
||||
);
|
||||
|
||||
ElMessage.success('数据模型加载成功');
|
||||
} else {
|
||||
ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求错误：', error);
|
||||
ElMessage.error('网络请求失败');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('view挂载完毕');
|
||||
newLoadModel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vertical-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
|
||||
</template>
|
||||
|
||||
<!-- 2号主变 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
// 定义组件名称用于 keep-alive
|
||||
defineOptions({
|
||||
name: 'PreviewIndex'
|
||||
});
|
||||
|
||||
import { MtPreview } from '@/export';
|
||||
import { onMounted, ref, reactive, onUnmounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { globalStore } from '@/components/mt-edit/store/global';
|
||||
import { useExportJsonToDoneJson } from '@/components/mt-edit/composables';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { modelApi } from '@/utils/request';
|
||||
const route = useRoute();
|
||||
|
||||
const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
|
||||
const onEventCallBack = (type: string, item_id: string) => {
|
||||
console.log(type, item_id);
|
||||
|
||||
if (type == 'test-dialog') {
|
||||
ElMessage.success(`获取到了id:${item_id}`);
|
||||
}
|
||||
};
|
||||
onUnmounted(() => {
|
||||
console.log('view卸载完毕');
|
||||
});
|
||||
|
||||
async function newLoadModel() {
|
||||
let endJson = {
|
||||
menuType: route.query.screen
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await modelApi.model_getModelData_post(endJson);
|
||||
|
||||
if (response.code == 200) {
|
||||
const result = await response.data;
|
||||
const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
|
||||
|
||||
// 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
|
||||
const processedImportDoneJson = importDoneJson.map((item) => {
|
||||
if (item.props) {
|
||||
return {
|
||||
...item,
|
||||
props: reactive(item.props || {})
|
||||
};
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
props: reactive(item.props || {})
|
||||
};
|
||||
});
|
||||
|
||||
console.log('processedImportDoneJson:', processedImportDoneJson);
|
||||
MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
|
||||
if (globalStore.group_ids.has(route.query.screen as string)) {
|
||||
globalStore.group_ids.delete(route.query.screen as string);
|
||||
}
|
||||
globalStore.group_ids.set(
|
||||
route.query.screen as string,
|
||||
processedImportDoneJson.map((item) => item.id)
|
||||
);
|
||||
|
||||
ElMessage.success('数据模型加载成功');
|
||||
} else {
|
||||
ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求错误：', error);
|
||||
ElMessage.error('网络请求失败');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('view挂载完毕');
|
||||
newLoadModel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vertical-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue