feat(base): 新增电柜和母排树形结构功能

- 新增 CabinetAndBusbarTree 类用于树形结构展示
- 实现 CabinetAndBusbarTreeServiceImpl服务类
- 更新 BaseCabinetInfo 和 BaseBusbarInfo增加子节点列表
- 在前端添加电柜树形结构筛选功能
- 优化母排信息查询界面
IOT
zch 1 year ago
parent 747e2d0548
commit 459f95f33f

@ -3,7 +3,9 @@ package com.ruoyi.base.controller;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import com.ruoyi.base.domain.CabinetAndBusbarTree;
import com.ruoyi.base.domain.baseCabinetInfoTreeSelects;
import com.ruoyi.base.service.ICabinetAndBusbarTreeService;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
@ -36,6 +38,9 @@ public class BaseCabinetInfoController extends BaseController
@Autowired
private IBaseCabinetInfoService baseCabinetInfoService;
@Autowired
private ICabinetAndBusbarTreeService cabinetAndBusbarTreeService;
/**
*
*/
@ -105,11 +110,21 @@ public class BaseCabinetInfoController extends BaseController
}
/**
*
*
* */
@PostMapping("/getBaseCabinetInfoTree")
public AjaxResult getBaseCabinetInfoTree(@RequestBody BaseCabinetInfo baseCabinetInfo) {
List<baseCabinetInfoTreeSelects> list = baseCabinetInfoService.selectCabinetInfoTreeList(baseCabinetInfo);
return success(list);
}
/**
*
*
* */
@PostMapping("/CabinetAndBusbarTree")
public AjaxResult CabinetAndBusbarTree(@RequestBody BaseCabinetInfo baseCabinetInfo) {
List<CabinetAndBusbarTree> list = cabinetAndBusbarTreeService.selectCabinetAndBusbarTree(baseCabinetInfo);
return success(list);
}
}

@ -91,6 +91,8 @@ public class BaseBusbarInfo extends BaseEntity
@Excel(name = "是否旋转:1-是0-否")
private Long isRotate;
List<BaseBusbarInfo> children = new ArrayList<BaseBusbarInfo>();
public void setObjId(Long objId)
{
this.objId = objId;
@ -245,6 +247,15 @@ public class BaseBusbarInfo extends BaseEntity
return isRotate;
}
public List<BaseBusbarInfo> getChildren() {
return children;
}
public void setChildren(List<BaseBusbarInfo> children) {
this.children = children;
}
@Override
public String toString() {
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)

@ -66,8 +66,9 @@ public class BaseCabinetInfo extends BaseEntity
/** 旋转角度 */
@Excel(name = "旋转角度")
private BigDecimal rotateAngle;
/*
public List<BaseBusbarInfo> children = new ArrayList<BaseBusbarInfo>();*/
public List<BaseCabinetInfo> children = new ArrayList<BaseCabinetInfo>();
public void setObjId(Long objId)
{
@ -169,14 +170,13 @@ public class BaseCabinetInfo extends BaseEntity
return rotateAngle;
}
/*
public List<BaseBusbarInfo> getChildren() {
public List<BaseCabinetInfo> getChildren() {
return children;
}
public void setChildren(List<BaseBusbarInfo> children) {
public void setChildren(List<BaseCabinetInfo> children) {
this.children = children;
}*/
}
@Override
public String toString() {

@ -0,0 +1,108 @@
package com.ruoyi.base.domain;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.ruoyi.common.core.domain.entity.SysDept;
import com.ruoyi.common.core.domain.entity.SysMenu;
import java.io.Serializable;
import java.util.List;
import java.util.stream.Collectors;
/**
* baseCabinetInfoTreeSelects
*
* @author zangch
*/
public class CabinetAndBusbarTree implements Serializable
{
private static final long serialVersionUID = 1L;
/** 节点ID */
private Long id;
/** 节点名称 */
private String label;
private String code;
/** 子节点 */
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<CabinetAndBusbarTree> children;
public CabinetAndBusbarTree()
{
}
public CabinetAndBusbarTree(SysDept dept)
{
this.id = dept.getDeptId();
this.label = dept.getDeptName();
this.children = dept.getChildren().stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
}
public CabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo){
this.id = baseCabinetInfo.getObjId();
this.label = baseCabinetInfo.getCabinetAlias();
this.code = baseCabinetInfo.getCabinetCode().toString();
this.children = baseCabinetInfo.getChildren().stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
}
public CabinetAndBusbarTree(BaseBusbarInfo baseBusbarInfo) {
this.id = baseBusbarInfo.getObjId();
this.label = baseBusbarInfo.getBusbarAlias();
this.code = baseBusbarInfo.getBusbarCode().toString();
this.children = baseBusbarInfo.getChildren().stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
}
public CabinetAndBusbarTree(SysMenu menu)
{
this.id = menu.getMenuId();
this.label = menu.getMenuName();
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public Long getId()
{
return id;
}
public void setId(Long id)
{
this.id = id;
}
public String getLabel()
{
return label;
}
public void setLabel(String label)
{
this.label = label;
}
public List<CabinetAndBusbarTree> getChildren()
{
return children;
}
public void setChildren(List<CabinetAndBusbarTree> children)
{
this.children = children;
}
public void addChild(CabinetAndBusbarTree child) {
this.children.add(child);
}
}

@ -3,6 +3,7 @@ package com.ruoyi.base.service;
import java.util.List;
import com.ruoyi.base.domain.BaseCabinetInfo;
import com.ruoyi.base.domain.CabinetAndBusbarTree;
import com.ruoyi.base.domain.baseCabinetInfoTreeSelects;
/**
@ -66,5 +67,5 @@ public interface IBaseCabinetInfoService
*
* @return
*/
List<baseCabinetInfoTreeSelects> selectCabinetInfoTreeList(BaseCabinetInfo baseCabinetInfo);
public List<baseCabinetInfoTreeSelects> selectCabinetInfoTreeList(BaseCabinetInfo baseCabinetInfo);
}

@ -0,0 +1,30 @@
package com.ruoyi.base.service;
import com.ruoyi.base.domain.BaseCabinetInfo;
import com.ruoyi.base.domain.CabinetAndBusbarTree;
import com.ruoyi.base.domain.baseCabinetInfoTreeSelects;
import java.util.List;
/**
* Service
*
* @author ruoyi
* @date 2024-10-31
*/
public interface ICabinetAndBusbarTreeService
{
/**
*
*
* */
public List<CabinetAndBusbarTree> selectCabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo);
}

@ -0,0 +1,112 @@
package com.ruoyi.base.service.impl;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
import com.ruoyi.base.domain.*;
import com.ruoyi.base.mapper.*;
import com.ruoyi.base.service.ICabinetAndBusbarTreeService;
import com.ruoyi.common.utils.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class CabinetAndBusbarTreeServiceImpl implements ICabinetAndBusbarTreeService {
@Autowired
private BaseCabinetInfoMapper baseCabinetInfoMapper;
@Autowired
private BaseBusbarInfoMapper baseBusbarInfoMapper;
/**
*
*
*
* @return
*/
@Override
public List<CabinetAndBusbarTree> selectCabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo) {
// 创建一个空的List用于存储查询结果
List<CabinetAndBusbarTree> tree = new ArrayList<>();
/* BaseCabinetInfo allBaseCabinetInfo = new BaseCabinetInfo();*/
// 根据传入的baseCabinetInfo查询所有符合条件的BaseCabinetInfo
List<BaseCabinetInfo> cabinets = baseCabinetInfoMapper.selectBaseCabinetInfoList(baseCabinetInfo);
// 遍历查询结果
for (BaseCabinetInfo cabinet : cabinets) {
// 创建一个CabinetAndBusbarTree对象用于存储查询结果
CabinetAndBusbarTree cabinetNode = new CabinetAndBusbarTree(cabinet);
// 创建一个BaseBusbarInfo对象用于存储查询条件
BaseBusbarInfo allBaseBusbarInfo = new BaseBusbarInfo();
// 设置查询条件
allBaseBusbarInfo.setCabinetCode(cabinet.getCabinetCode());
// 根据查询条件查询所有符合条件的BaseBusbarInfo
List<BaseBusbarInfo> busbars = baseBusbarInfoMapper.selectBaseBusbarInfoList(allBaseBusbarInfo);
for (BaseBusbarInfo busbar : busbars){
cabinetNode.addChild(new CabinetAndBusbarTree(busbar));
}
// 将查询结果添加到tree中
tree.add(cabinetNode);
}
// 返回查询结果
return tree;
}
/*
public List<CabinetAndBusbarTree> selectCabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo){
List<BaseCabinetInfo> baseCabinetInfos = baseCabinetInfoMapper.selectBaseCabinetInfoList(baseCabinetInfo);
return buildCabinetAndBusbarTreeSelects(baseCabinetInfos);
}
private List<CabinetAndBusbarTree> buildCabinetAndBusbarTreeSelects(List<BaseCabinetInfo> baseCabinetInfos) {
List<CabinetAndBusbarTree> cabinetAndBusbarTrees = buildCabinetAndBusbarTree(baseCabinetInfos);
return cabinetAndBusbarTrees.stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
}
private List<CabinetAndBusbarTree> buildCabinetAndBusbarTree(List<BaseCabinetInfo> baseCabinetInfos) {
List<CabinetAndBusbarTree> cabinetAndBusbarTrees = new ArrayList<>();
for (BaseCabinetInfo baseCabinetInfo : baseCabinetInfos) {
recursionFn(baseCabinetInfos, baseCabinetInfo);
cabinetAndBusbarTrees.add(baseCabinetInfo);
}
if (cabinetAndBusbarTrees.isEmpty()) {
cabinetAndBusbarTrees = baseCabinetInfos;
}
return cabinetAndBusbarTrees;
}
private void recursionFn(List<BaseCabinetInfo> baseCabinetInfos, BaseCabinetInfo baseCabinetInfo) {
List<BaseBusbarInfo> baseBusbarInfos = getChildList(list, t);
}
private List<BaseBusbarInfo> getChildList(List<BaseBusbarInfo> list, BaseBusbarInfo t) {
List<BaseBusbarInfo> baseBusbarInfos = new ArrayList<>();
Iterator<BaseBusbarInfo> it = list.iterator();
while(it.hasNext()) {
BaseBusbarInfo n = (BaseBusbarInfo)it.next();
if(n.getParentObjId().longValue()==t.getObjId().longValue()) {
baseBusbarInfos.add(n);
}
}
return baseBusbarInfos;
}
*/
}

@ -32,7 +32,7 @@ import com.ruoyi.common.core.page.TableDataInfo;
/**
* Controller
*
*
* @author zangch
* @date 2024-11-07
*/
@ -203,6 +203,7 @@ public class RecordBusbarTempController extends BaseController
return ResponseEntity.notFound().build();
}
}
}

@ -57,3 +57,13 @@ export function getThermalPhoto(filePath) {
method: 'get'
})
}
//查询电柜和母排树型结构
export function CabinetAndBusbarTree(data) {
return request({
url: '/base/baseCabinetInfo/CabinetAndBusbarTree',
method: 'post',
data: data
})
}

@ -35,18 +35,18 @@
<!-- 母排信息 -->
<div>
<el-form :model="queryParamsBusbar" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="母排编号" prop="busbarCode">
<!-- <el-form-item label="母排编号" prop="busbarCode">
<el-input
v-model="queryParamsBusbar.busbarCode"
placeholder="请输入母排编号"
clearable
@keyup.enter.native="handleQueryBusbar"
/>
</el-form-item>
<el-form-item label="母排别名" prop="busbarAlias">
</el-form-item>-->
<el-form-item label="检测位置" prop="busbarAlias">
<el-input
v-model="queryParamsBusbar.busbarAlias"
placeholder="请输入母排别名"
placeholder="请输入检测位置"
clearable
@keyup.enter.native="handleQueryBusbar"
/>
@ -61,8 +61,8 @@
/>
</el-select>
</el-form-item>
<el-form-item label="是否检" prop="isChecked">
<el-select v-model="queryParamsBusbar.isChecked" placeholder="请选择是否检" clearable>
<el-form-item label="是否" prop="isChecked">
<el-select v-model="queryParamsBusbar.isChecked" placeholder="请选择是否" clearable>
<el-option
v-for="dict in dict.type.busbar_is_checked"
:key="dict.value"
@ -340,7 +340,7 @@
<el-form-item label="是否检测" prop="isChecked">
<el-radio-group v-model="formBusbar.isChecked">
<el-radio
v-for="dict in dict.type.is_checked"
v-for="dict in dict.type.busbar_is_checked"
:key="dict.value"
:label="parseInt(dict.value)"
>{{dict.label}}</el-radio>
@ -479,7 +479,7 @@ import { getBaseCabinetInfoTree } from "@/api/base/baseCabinetInfo";
export default {
name: "BaseBusbarAndAlarmInfo",
dicts: ['is_pictures', 'is_rotate', 'cabinet_is_checked', 'busbar_is_flag', 'busbar_is_end', 'judg_method', 'is_flag', 'alarm_type'],
dicts: ['is_pictures', 'is_rotate', 'cabinet_is_checked',"busbar_is_checked", 'busbar_is_flag', 'busbar_is_end', 'judg_method', 'is_flag', 'alarm_type'],
data() {
return {
selectedCabinetCode: null, //

@ -1,5 +1,36 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="5" :xs="24">
<div class="head-container">
<el-input
v-model="filterBoxName"
placeholder="请输入电柜名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<div class="tree-container">
<el-tree
:data="InfoOptions"
:props="props"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</div>
</el-col>
<el-col :span="19" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!-- <el-form-item label="标识" prop="objId">
<el-input
@ -264,6 +295,11 @@
</el-table-column>
</el-table>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
@ -370,17 +406,6 @@
</el-dialog>
<!--<el-dialog :title="photoTitle" :visible.sync="photoOpen" width="500px" append-to-body>
<template>
<div class="image-container">
<img :src="visiblePhoto" alt="显示图片" />
</div>
<div class="image-container">
<img :src="thermalPhoto" alt="显示图片" />
</div>
</template>
</el-dialog>-->
</div>
</template>
@ -392,14 +417,27 @@ import {
delRecordBusbarTemp,
addRecordBusbarTemp,
updateRecordBusbarTemp,
getVisiblePhoto, getThermalPhoto
getVisiblePhoto, getThermalPhoto, CabinetAndBusbarTree
} from "@/api/record/recordBusbarTemp";
import {getBaseCabinetInfoTree} from "@/api/base/baseCabinetInfo";
export default {
name: "RecordBusbarTemp",
dicts: ['record_busbar_temp_is_alarm', 'record_busbar_temp_is_flag'],
data() {
return {
//
InfoOptions: [],
//
filterBoxName: undefined,
props:{
children: 'children',
label: 'label'
/* label: (data) => `(编号${data.code}) ${data.label} `*/
},
//
loading: true,
//
@ -468,6 +506,7 @@ export default {
},
created() {
this.getList();
this.getTreeselect();
},
methods: {
/** 查询母排测温信息列表 */
@ -633,6 +672,24 @@ export default {
}, `recordBusbarTemp_${new Date().getTime()}.xlsx`)
},
/** 查询电柜下拉树结构 */
getTreeselect() {
CabinetAndBusbarTree({}).then(response => {
this.InfoOptions = response.data
})
},
//
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
//
handleNodeClick(data) {
this.queryParams.busbarCode = data.code
this.handleQuery()
},
}
};
</script>

@ -0,0 +1,695 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!-- <el-form-item label="标识" prop="objId">
<el-input
v-model="queryParams.objId"
placeholder="请输入标识"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<el-form-item label="母排编号" prop="busbarCode">
<el-input
v-model="queryParams.busbarCode"
placeholder="请输入母排编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="电柜编号" prop="cabinetCode">
<el-input
v-model="queryParams.cabinetCode"
placeholder="请输入电柜编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="最高温度" prop="tempMax">
<el-input
v-model="queryParams.tempMax"
placeholder="请输入最高温度"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="最低温度" prop="tempMin">
<el-input
v-model="queryParams.tempMin"
placeholder="请输入最低温度"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="平均温度" prop="tempAvg">
<el-input
v-model="queryParams.tempAvg"
placeholder="请输入平均温度"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="温差" prop="tempDiff">
<el-input
v-model="queryParams.tempDiff"
placeholder="请输入温差"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<el-form-item label="是否告警" prop="isAlarm">
<el-select v-model="queryParams.isAlarm" placeholder="请选择是否告警" clearable>
<el-option
v-for="dict in dict.type.record_busbar_temp_is_alarm"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="图像路径" prop="filePath">
<el-input
v-model="queryParams.filePath"
placeholder="请输入图像路径"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<!-- <el-form-item label="是否启用" prop="isFlag">
<el-select v-model="queryParams.isFlag" placeholder="请选择是否启用" clearable>
<el-option
v-for="dict in dict.type.record_busbar_temp_is_flag"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>-->
<!-- <el-form-item label="备注" prop="remark">
<el-input
v-model="queryParams.remark"
placeholder="请输入备注"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建人" prop="createdBy">
<el-input
v-model="queryParams.createdBy"
placeholder="请输入创建人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="daterangeCreatedTime"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="更新人" prop="updatedBy">
<el-input
v-model="queryParams.updatedBy"
placeholder="请输入更新人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="更新时间">
<el-date-picker
v-model="daterangeUpdatedTime"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>-->
<el-form-item label="记录时间">
<el-date-picker
v-model="daterangeRecordTime"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['record:recordBusbarTemp:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['record:recordBusbarTemp:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['record:recordBusbarTemp:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['record:recordBusbarTemp:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="recordBusbarTempList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="标识" align="center" prop="objId" />-->
<el-table-column label="母排编号" align="center" prop="busbarCode" />
<el-table-column label="电柜编号" align="center" prop="cabinetCode" />
<el-table-column label="最高温度" align="center" prop="tempMax" />
<el-table-column label="最低温度" align="center" prop="tempMin" />
<el-table-column label="平均温度" align="center" prop="tempAvg" />
<el-table-column label="温差" align="center" prop="tempDiff" />
<el-table-column label="是否告警" align="center" prop="isAlarm">
<template slot-scope="scope">
<dict-tag :options="dict.type.record_busbar_temp_is_alarm" :value="scope.row.isAlarm"/>
</template>
</el-table-column>
<el-table-column label="图像路径" align="center" prop="filePath" />
<!-- <el-table-column label="打开文件" align="center">
<template slot-scope="scope">
<el-button type="primary" @click="showPhoto(scope.row)"></el-button>
</template>
</el-table-column>-->
<!-- <el-table-column label="是否启用" align="center" prop="isFlag">
<template slot-scope="scope">
<dict-tag :options="dict.type.record_busbar_temp_is_flag" :value="scope.row.isFlag"/>
</template>
</el-table-column>-->
<el-table-column label="备注" align="center" prop="remark" />
<!-- <el-table-column label="创建人" align="center" prop="createdBy" />
<el-table-column label="创建时间" align="center" prop="createdTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新人" align="center" prop="updatedBy" />
<el-table-column label="更新时间" align="center" prop="updatedTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>-->
<el-table-column label="记录时间" align="center" prop="recordTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="showPhoto(scope.row)"
v-hasPermi="['record:recordBusbarTemp:list']"
>打开文件</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['record:recordBusbarTemp:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['record:recordBusbarTemp:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改母排测温信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="母排编号" prop="busbarCode">
<el-input v-model="form.busbarCode" placeholder="请输入母排编号" />
</el-form-item>
<el-form-item label="电柜编号" prop="cabinetCode">
<el-input v-model="form.cabinetCode" placeholder="请输入电柜编号" />
</el-form-item>
<el-form-item label="最高温度" prop="tempMax">
<el-input v-model="form.tempMax" placeholder="请输入最高温度" />
</el-form-item>
<el-form-item label="最低温度" prop="tempMin">
<el-input v-model="form.tempMin" placeholder="请输入最低温度" />
</el-form-item>
<el-form-item label="平均温度" prop="tempAvg">
<el-input v-model="form.tempAvg" placeholder="请输入平均温度" />
</el-form-item>
<el-form-item label="温差" prop="tempDiff">
<el-input v-model="form.tempDiff" placeholder="请输入温差" />
</el-form-item>
<el-form-item label="是否告警" prop="isAlarm">
<el-radio-group v-model="form.isAlarm">
<el-radio
v-for="dict in dict.type.record_busbar_temp_is_alarm"
:key="dict.value"
:label="parseInt(dict.value)"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图像路径" prop="filePath">
<el-input v-model="form.filePath" placeholder="请输入图像名称(*.jpg)" />
</el-form-item>
<el-form-item label="是否启用" prop="isFlag">
<el-radio-group v-model="form.isFlag">
<el-radio
v-for="dict in dict.type.record_busbar_temp_is_flag"
:key="dict.value"
:label="parseInt(dict.value)"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<!-- <el-form-item label="创建人" prop="createdBy">
<el-input v-model="form.createdBy" placeholder="请输入创建人" />
</el-form-item>
<el-form-item label="创建时间" prop="createdTime">
<el-date-picker clearable
v-model="form.createdTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择创建时间">
</el-date-picker>
</el-form-item>
<el-form-item label="更新人" prop="updatedBy">
<el-input v-model="form.updatedBy" placeholder="请输入更新人" />
</el-form-item>
<el-form-item label="更新时间" prop="updatedTime">
<el-date-picker clearable
v-model="form.updatedTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择更新时间">
</el-date-picker>
</el-form-item>-->
<el-form-item label="记录时间" prop="recordTime">
<el-date-picker clearable
v-model="form.recordTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择记录时间">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 图片显示对话框 -->
<!-- 通过增加key属性来确保每次图片URL更新时Vue都会重新渲染图片元素从而避免显示旧的缓存图片 -->
<el-dialog :title="photoTitle" :visible.sync="photoOpen" width="1333px" append-to-body>
<div class="dialog-content">
<div class="image-container" v-if="visiblePhoto">
<img :src="visiblePhoto" alt="显示可见光图片" v-show="photoOpen" :key="visiblePhotoKey" />
</div>
<div class="image-container" v-if="thermalPhoto">
<img :src="thermalPhoto" alt="显示热成像图片" v-show="photoOpen" :key="thermalPhotoKey" />
</div>
</div>
</el-dialog>
<!--<el-dialog :title="photoTitle" :visible.sync="photoOpen" width="500px" append-to-body>
<template>
<div class="image-container">
<img :src="visiblePhoto" alt="显示图片" />
</div>
<div class="image-container">
<img :src="thermalPhoto" alt="显示图片" />
</div>
</template>
</el-dialog>-->
</div>
</template>
<script>
import {
listRecordBusbarTemp,
getRecordBusbarTemp,
delRecordBusbarTemp,
addRecordBusbarTemp,
updateRecordBusbarTemp,
getVisiblePhoto, getThermalPhoto
} from "@/api/record/recordBusbarTemp";
export default {
name: "RecordBusbarTemp",
dicts: ['record_busbar_temp_is_alarm', 'record_busbar_temp_is_flag'],
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
recordBusbarTempList: [],
//
title: "",
//
photoTitle: "",
//
open: false,
//
photoOpen: false,
//
daterangeCreatedTime: [],
//
daterangeUpdatedTime: [],
//
daterangeRecordTime: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
objId: null,
busbarCode: null,
cabinetCode: null,
tempMax: null,
tempMin: null,
tempAvg: null,
tempDiff: null,
isAlarm: null,
filePath: null,
isFlag: null,
remark: null,
createdBy: null,
createdTime: null,
updatedBy: null,
updatedTime: null,
recordTime: null
},
//
form: {},
//
rules: {
busbarCode: [
{ required: true, message: "母排编号不能为空", trigger: "blur" }
],
cabinetCode: [
{ required: true, message: "电柜编号不能为空", trigger: "blur" }
],
},
visiblePhoto: '',
thermalPhoto: '',
thermalPhotoKey: 0,//使key
visiblePhotoKey: 0,//使key
};
},
created() {
this.getList();
},
methods: {
/** 查询母排测温信息列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
if (null != this.daterangeCreatedTime && '' != this.daterangeCreatedTime) {
this.queryParams.params["beginCreatedTime"] = this.daterangeCreatedTime[0];
this.queryParams.params["endCreatedTime"] = this.daterangeCreatedTime[1];
}
if (null != this.daterangeUpdatedTime && '' != this.daterangeUpdatedTime) {
this.queryParams.params["beginUpdatedTime"] = this.daterangeUpdatedTime[0];
this.queryParams.params["endUpdatedTime"] = this.daterangeUpdatedTime[1];
}
if (null != this.daterangeRecordTime && '' != this.daterangeRecordTime) {
this.queryParams.params["beginRecordTime"] = this.daterangeRecordTime[0];
this.queryParams.params["endRecordTime"] = this.daterangeRecordTime[1];
}
listRecordBusbarTemp(this.queryParams).then(response => {
this.recordBusbarTempList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
this.photoOpen = false;
},
//
reset() {
this.form = {
objId: null,
busbarCode: null,
cabinetCode: null,
tempMax: null,
tempMin: null,
tempAvg: null,
tempDiff: null,
isAlarm: null,
filePath: null,
isFlag: null,
remark: null,
createdBy: null,
createdTime: null,
updatedBy: null,
updatedTime: null,
recordTime: null,
photoOpen : false,
visiblePhoto : null,
thermalPhoto : null,
thermalResponse : null,
visibleResponse : null,
};
this.resetForm("form");
this.photoOpen = false;
this.visiblePhoto = null;
this.thermalPhoto = null;
this.thermalResponse = null;
this.visibleResponse = null;
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeCreatedTime = [];
this.daterangeUpdatedTime = [];
this.daterangeRecordTime = [];
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.objId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加母排测温信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const objId = row.objId || this.ids
getRecordBusbarTemp(objId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改母排测温信息";
});
},
/** 图片显示操作 */
showPhoto(row) {
this.reset();
if(row.filePath){
const filePath = row.filePath ;
//
this.thermalPhoto = null;
this.visiblePhoto = null;
//TODO:
/* const thermalResponse = `/dev-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`;
this.thermalPhoto = thermalResponse;
const visibleResponse = `/dev-api/record/recordBusbarTemp/getThermalPhoto/${filePath}`;
this.visiblePhoto = visibleResponse;*/
const thermalResponse = `/prod-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`
this.thermalPhoto = thermalResponse;
const visibleResponse = `/prod-api/record/recordBusbarTemp/getThermalPhoto/${filePath}`
this.visiblePhoto = visibleResponse;
this.thermalPhotoKey++; // key
this.visiblePhotoKey++; // key
this.photoOpen = true;
this.photoTitle = row.filePath + "图片显示";
}else {
this.$modal.msgError("暂无图像路径");
}
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.objId != null) {
updateRecordBusbarTemp(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addRecordBusbarTemp(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const objIds = row.objId || this.ids;
this.$modal.confirm('是否确认删除母排测温信息编号为"' + objIds + '"的数据项?').then(function() {
return delRecordBusbarTemp(objIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('record/recordBusbarTemp/export', {
...this.queryParams
}, `recordBusbarTemp_${new Date().getTime()}.xlsx`)
},
}
};
</script>
<!--
上面的图像是 2688x1520下面的图像是 1920x1080
<style scoped>
/* 定义一个图像容器类,用于设置图像的布局和样式 */
.image-container {
width: 100%; /* 设置容器宽度为100%,以适应父元素 */
max-width: 1080px; /* 设置容器的最大宽度,防止图像在大屏幕上显示过大 */
margin: 0 auto; /* 居中显示容器 */
position: relative; /* 设置相对定位,以便于在容器内进行绝对定位 */
aspect-ratio: 16 / 9; /* 16:9 的比例,适合 1920x1080 的图像 */
margin-bottom: 10px; /* 减少容器之间的间距 */
}
/* 设置图像容器内的图像样式 */
.image-container img {
width: 100%; /* 设置图像宽度为100%,充满容器 */
height: 100%; /* 设置图像高度为100%,充满容器 */
object-fit: contain; /* 使用 contain 以确保图像完整显示 */
}
/* 对话框内容区域的样式 */
.dialog-content {
max-height: 80vh; /* 设置最大高度为视口高度的 80% */
overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
-->
<style scoped>
.dialog-content {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%; /* 增大对话框的宽度 */
max-width: 1920px; /* 设置对话框的最大宽度 */
}
.image-container {
text-align: center;
margin-bottom: 10px;
width: 49%; /* 修改为100%以充满父容器 */
max-width: 100%; /* 增加最大宽度 */
aspect-ratio: 16/9;
position: relative;
}
.image-container img {
max-width: 100%;
height: auto;
border: 1px solid #ddd;
padding: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
object-fit: contain;
}
</style>
Loading…
Cancel
Save