Commit 858fc493 authored by wanghao's avatar wanghao

1 托盘列表 和 托盘绑定设备 关联跳转及 设备和托盘绑定数据功能实现中;

parent 5bf63fbd
package com.zehong.web.controller.equipment;
import java.util.List;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.zehong.common.annotation.Log;
import com.zehong.common.core.controller.BaseController;
import com.zehong.common.core.domain.AjaxResult;
import com.zehong.common.enums.BusinessType;
import com.zehong.system.domain.PalletDeviceBinding;
import com.zehong.system.service.IPalletDeviceBindingService;
import com.zehong.common.utils.poi.ExcelUtil;
import com.zehong.common.core.page.TableDataInfo;
/**
* 托盘绑定的设备列Controller
*
* @author zehong
* @date 2025-06-29
*/
@RestController
@RequestMapping("/palletDevice/binding")
public class PalletDeviceBindingController extends BaseController
{
@Autowired
private IPalletDeviceBindingService palletDeviceBindingService;
/**
* 查询托盘绑定的设备列列表
*/
@GetMapping("/list")
public TableDataInfo list(PalletDeviceBinding palletDeviceBinding)
{
startPage();
List<PalletDeviceBinding> list = palletDeviceBindingService.selectPalletDeviceBindingList(palletDeviceBinding);
return getDataTable(list);
}
/**
* 获取所有托盘绑定的设备列列表
*/
@GetMapping("/getAll")
public AjaxResult getAll(PalletDeviceBinding palletDeviceBinding) {
return AjaxResult.success(palletDeviceBindingService.selectPalletDeviceBindingList(palletDeviceBinding));
}
/**
* 导出托盘绑定的设备列列表
*/
@GetMapping("/export")
public AjaxResult export(PalletDeviceBinding palletDeviceBinding)
{
List<PalletDeviceBinding> list = palletDeviceBindingService.selectPalletDeviceBindingList(palletDeviceBinding);
ExcelUtil<PalletDeviceBinding> util = new ExcelUtil<PalletDeviceBinding>(PalletDeviceBinding.class);
return util.exportExcel(list, "托盘绑定的设备列数据");
}
/**
* 获取托盘绑定的设备列详细信息
*/
@GetMapping(value = "/{palletDeviceBindingId}")
public AjaxResult getInfo(@PathVariable("palletDeviceBindingId") Long palletDeviceBindingId)
{
return AjaxResult.success(palletDeviceBindingService.selectPalletDeviceBindingById(palletDeviceBindingId));
}
/**
* 新增托盘绑定的设备列
*/
@PostMapping
public AjaxResult add(@RequestBody PalletDeviceBinding palletDeviceBinding)
{
return toAjax(palletDeviceBindingService.insertPalletDeviceBinding(palletDeviceBinding));
}
/**
* 批量新增托盘绑定的设备列
* @param palletDeviceBindings p
* @return l
*/
@PostMapping ("/batchAdd")
public AjaxResult batchAdd(@RequestBody List<PalletDeviceBinding> palletDeviceBindings){
return toAjax(palletDeviceBindingService.batchInsertPalletDeviceBinding(palletDeviceBindings));
}
/**
* 批量更新托盘绑定的设备列
* @param palletDeviceBindings p
* @return r
*/
@PostMapping("/batchUpdateDeviceCode")
public AjaxResult batchUpdateDeviceCode(@RequestBody List<PalletDeviceBinding> palletDeviceBindings) {
return toAjax(palletDeviceBindingService.batchUpdateDeviceCode(palletDeviceBindings));
}
/**
* 修改托盘绑定的设备列
*/
@PutMapping
public AjaxResult edit(@RequestBody PalletDeviceBinding palletDeviceBinding)
{
return toAjax(palletDeviceBindingService.updatePalletDeviceBinding(palletDeviceBinding));
}
/**
* 删除托盘绑定的设备列
*/
@DeleteMapping("/{palletDeviceBindingIds}")
public AjaxResult remove(@PathVariable Long[] palletDeviceBindingIds)
{
return toAjax(palletDeviceBindingService.deletePalletDeviceBindingByIds(palletDeviceBindingIds));
}
}
...@@ -4,9 +4,9 @@ import com.serotonin.modbus4j.ModbusMaster; ...@@ -4,9 +4,9 @@ import com.serotonin.modbus4j.ModbusMaster;
import com.serotonin.modbus4j.exception.ErrorResponseException; import com.serotonin.modbus4j.exception.ErrorResponseException;
import com.serotonin.modbus4j.exception.ModbusInitException; import com.serotonin.modbus4j.exception.ModbusInitException;
import com.serotonin.modbus4j.exception.ModbusTransportException; import com.serotonin.modbus4j.exception.ModbusTransportException;
import com.zehong.framework.modbus4j.Modbus4jUtils;
import com.zehong.system.domain.TEquipmentAlarmData; import com.zehong.system.domain.TEquipmentAlarmData;
import com.zehong.system.domain.TStoreyInfo; import com.zehong.system.domain.TStoreyInfo;
import com.zehong.system.modbus.util.Modbus4jUtils;
import com.zehong.system.service.ITEquipmentAlarmDataService; import com.zehong.system.service.ITEquipmentAlarmDataService;
import com.zehong.system.service.ITStoreyInfoService; import com.zehong.system.service.ITStoreyInfoService;
import org.quartz.SchedulerException; import org.quartz.SchedulerException;
......
package com.zehong.system.domain;
import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
import com.zehong.common.annotation.Excel;
import com.zehong.common.core.domain.BaseEntity;
/**
* 托盘绑定的设备列对象 t_pallet_device_binding
*
* @author zehong
* @date 2025-06-29
*/
public class PalletDeviceBinding extends BaseEntity
{
private static final long serialVersionUID = 1L;
/** 托盘id */
private Long palletDeviceBindingId;
/** 托盘id */
@Excel(name = "托盘id")
private Long trayId;
/** 绑定的设备编号 */
@Excel(name = "绑定的设备编号")
private String deviceCode;
/** 行 */
@Excel(name = "行")
private Integer row;
/** 列 */
@Excel(name = "列")
private Integer col;
/**
* 第几个
*/
private Integer index;
/** 绑定时间 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "绑定时间", width = 30, dateFormat = "yyyy-MM-dd")
private Date bindingTime;
/** 解绑时间 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "解绑时间", width = 30, dateFormat = "yyyy-MM-dd")
private Date unbindingTime;
private String status;
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public void setPalletDeviceBindingId(Long palletDeviceBindingId)
{
this.palletDeviceBindingId = palletDeviceBindingId;
}
public Long getPalletDeviceBindingId()
{
return palletDeviceBindingId;
}
public void setTrayId(Long trayId)
{
this.trayId = trayId;
}
public Long getTrayId()
{
return trayId;
}
public void setDeviceCode(String deviceCode)
{
this.deviceCode = deviceCode;
}
public String getDeviceCode()
{
return deviceCode;
}
public void setRow(Integer row)
{
this.row = row;
}
public Integer getRow()
{
return row;
}
public void setCol(Integer col)
{
this.col = col;
}
public Integer getCol()
{
return col;
}
public void setBindingTime(Date bindingTime)
{
this.bindingTime = bindingTime;
}
public Integer getIndex() {
return index;
}
public void setIndex(Integer index) {
this.index = index;
}
public Date getBindingTime()
{
return bindingTime;
}
public void setUnbindingTime(Date unbindingTime)
{
this.unbindingTime = unbindingTime;
}
public Date getUnbindingTime()
{
return unbindingTime;
}
@Override
public String toString() {
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
.append("palletDeviceBindingId", getPalletDeviceBindingId())
.append("trayId", getTrayId())
.append("deviceCode", getDeviceCode())
.append("row", getRow())
.append("col", getCol())
.append("bindingTime", getBindingTime())
.append("unbindingTime", getUnbindingTime())
.append("createTime", getCreateTime())
.toString();
}
}
package com.zehong.system.mapper;
import java.util.List;
import com.zehong.system.domain.PalletDeviceBinding;
import org.apache.ibatis.annotations.Param;
/**
* 托盘绑定的设备列Mapper接口
*
* @author zehong
* @date 2025-06-29
*/
public interface PalletDeviceBindingMapper
{
/**
* 查询托盘绑定的设备列
*
* @param palletDeviceBindingId 托盘绑定的设备列ID
* @return 托盘绑定的设备列
*/
public PalletDeviceBinding selectPalletDeviceBindingById(Long palletDeviceBindingId);
/**
* 查询托盘绑定的设备列列表
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 托盘绑定的设备列集合
*/
public List<PalletDeviceBinding> selectPalletDeviceBindingList(PalletDeviceBinding palletDeviceBinding);
/**
* 新增托盘绑定的设备列
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 结果
*/
public int insertPalletDeviceBinding(PalletDeviceBinding palletDeviceBinding);
public int batchInsertPalletDeviceBinding(@Param("palletDeviceBindingList") List<PalletDeviceBinding> palletDeviceBindingList);
/**
* 修改托盘绑定的设备列
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 结果
*/
public int updatePalletDeviceBinding(PalletDeviceBinding palletDeviceBinding);
public int batchUpdateDeviceCode(@Param("palletDeviceBindingList") List<PalletDeviceBinding> palletDeviceBindingList);
/**
* 删除托盘绑定的设备列
*
* @param palletDeviceBindingId 托盘绑定的设备列ID
* @return 结果
*/
public int deletePalletDeviceBindingById(Long palletDeviceBindingId);
/**
* 批量删除托盘绑定的设备列
*
* @param palletDeviceBindingIds 需要删除的数据ID
* @return 结果
*/
public int deletePalletDeviceBindingByIds(Long[] palletDeviceBindingIds);
}
package com.zehong.system.service;
import java.util.List;
import com.zehong.system.domain.PalletDeviceBinding;
/**
* 托盘绑定的设备列Service接口
*
* @author zehong
* @date 2025-06-29
*/
public interface IPalletDeviceBindingService
{
/**
* 查询托盘绑定的设备列
*
* @param palletDeviceBindingId 托盘绑定的设备列ID
* @return 托盘绑定的设备列
*/
public PalletDeviceBinding selectPalletDeviceBindingById(Long palletDeviceBindingId);
/**
* 查询托盘绑定的设备列列表
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 托盘绑定的设备列集合
*/
public List<PalletDeviceBinding> selectPalletDeviceBindingList(PalletDeviceBinding palletDeviceBinding);
/**
* 新增托盘绑定的设备列
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 结果
*/
public int insertPalletDeviceBinding(PalletDeviceBinding palletDeviceBinding);
public int batchInsertPalletDeviceBinding(List<PalletDeviceBinding> palletDeviceBindingList);
public int batchUpdateDeviceCode(List<PalletDeviceBinding> palletDeviceBindingList);
/**
* 修改托盘绑定的设备列
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 结果
*/
public int updatePalletDeviceBinding(PalletDeviceBinding palletDeviceBinding);
/**
* 批量删除托盘绑定的设备列
*
* @param palletDeviceBindingIds 需要删除的托盘绑定的设备列ID
* @return 结果
*/
public int deletePalletDeviceBindingByIds(Long[] palletDeviceBindingIds);
/**
* 删除托盘绑定的设备列信息
*
* @param palletDeviceBindingId 托盘绑定的设备列ID
* @return 结果
*/
public int deletePalletDeviceBindingById(Long palletDeviceBindingId);
}
package com.zehong.system.service.impl;
import java.util.List;
import com.zehong.common.utils.DateUtils;
import org.springframework.stereotype.Service;
import com.zehong.system.mapper.PalletDeviceBindingMapper;
import com.zehong.system.domain.PalletDeviceBinding;
import com.zehong.system.service.IPalletDeviceBindingService;
import javax.annotation.Resource;
/**
* 托盘绑定的设备列Service业务层处理
*
* @author zehong
* @date 2025-06-29
*/
@Service
public class PalletDeviceBindingServiceImpl implements IPalletDeviceBindingService
{
@Resource
private PalletDeviceBindingMapper palletDeviceBindingMapper;
/**
* 查询托盘绑定的设备列
*
* @param palletDeviceBindingId 托盘绑定的设备列ID
* @return 托盘绑定的设备列
*/
@Override
public PalletDeviceBinding selectPalletDeviceBindingById(Long palletDeviceBindingId)
{
return palletDeviceBindingMapper.selectPalletDeviceBindingById(palletDeviceBindingId);
}
/**
* 查询托盘绑定的设备列列表
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 托盘绑定的设备列
*/
@Override
public List<PalletDeviceBinding> selectPalletDeviceBindingList(PalletDeviceBinding palletDeviceBinding)
{
return palletDeviceBindingMapper.selectPalletDeviceBindingList(palletDeviceBinding);
}
/**
* 新增托盘绑定的设备列
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 结果
*/
@Override
public int insertPalletDeviceBinding(PalletDeviceBinding palletDeviceBinding)
{
palletDeviceBinding.setCreateTime(DateUtils.getNowDate());
return palletDeviceBindingMapper.insertPalletDeviceBinding(palletDeviceBinding);
}
/**
* 批量添加托盘绑定的设备列
*
* @param palletDeviceBindingList 托盘绑定的设备列
* @return 结果
*/
@Override
public int batchInsertPalletDeviceBinding(List<PalletDeviceBinding> palletDeviceBindingList) {
palletDeviceBindingList.forEach(palletDeviceBinding -> {
palletDeviceBinding.setUpdateTime(DateUtils.getNowDate());
palletDeviceBinding.setCreateTime(DateUtils.getNowDate());
});
return palletDeviceBindingMapper.batchInsertPalletDeviceBinding(palletDeviceBindingList);
}
@Override
public int batchUpdateDeviceCode(List<PalletDeviceBinding> palletDeviceBindingList) {
palletDeviceBindingList.forEach(palletDeviceBinding -> {
palletDeviceBinding.setUpdateTime(DateUtils.getNowDate());
});
return palletDeviceBindingMapper.batchUpdateDeviceCode(palletDeviceBindingList);
}
/**
* 修改托盘绑定的设备列
*
* @param palletDeviceBinding 托盘绑定的设备列
* @return 结果
*/
@Override
public int updatePalletDeviceBinding(PalletDeviceBinding palletDeviceBinding)
{
return palletDeviceBindingMapper.updatePalletDeviceBinding(palletDeviceBinding);
}
/**
* 批量删除托盘绑定的设备列
*
* @param palletDeviceBindingIds 需要删除的托盘绑定的设备列ID
* @return 结果
*/
@Override
public int deletePalletDeviceBindingByIds(Long[] palletDeviceBindingIds)
{
return palletDeviceBindingMapper.deletePalletDeviceBindingByIds(palletDeviceBindingIds);
}
/**
* 删除托盘绑定的设备列信息
*
* @param palletDeviceBindingId 托盘绑定的设备列ID
* @return 结果
*/
@Override
public int deletePalletDeviceBindingById(Long palletDeviceBindingId)
{
return palletDeviceBindingMapper.deletePalletDeviceBindingById(palletDeviceBindingId);
}
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zehong.system.mapper.PalletDeviceBindingMapper">
<resultMap type="PalletDeviceBinding" id="PalletDeviceBindingResult">
<result property="palletDeviceBindingId" column="f_pallet_device_binding_id" />
<result property="trayId" column="f_tray_id" />
<result property="deviceCode" column="f_device_code" />
<result property="row" column="f_row" />
<result property="col" column="f_col" />
<result property="index" column="f_index" />
<result property="bindingTime" column="f_binding_time" />
<result property="unbindingTime" column="f_unbinding_time" />
<result property="createTime" column="f_create_time" />
<result property="status" column="f_status" />
</resultMap>
<sql id="selectPalletDeviceBindingVo">
select f_pallet_device_binding_id, f_tray_id, f_device_code, f_row, f_col, f_index,f_binding_time, f_unbinding_time, f_create_time,f_status from t_pallet_device_binding
</sql>
<select id="selectPalletDeviceBindingList" parameterType="PalletDeviceBinding" resultMap="PalletDeviceBindingResult">
<include refid="selectPalletDeviceBindingVo"/>
<where>
<if test="trayId != null "> and f_tray_id = #{trayId}</if>
<if test="deviceCode != null and deviceCode != ''"> and f_device_code = #{deviceCode}</if>
<if test="row != null "> and f_row = #{row}</if>
<if test="col != null "> and f_col = #{col}</if>
<if test="index != null "> and f_index = #{index}</if>
<if test="bindingTime != null "> and f_binding_time = #{bindingTime}</if>
<if test="unbindingTime != null "> and f_unbinding_time = #{unbindingTime}</if>
<if test="createTime != null "> and f_create_time = #{createTime}</if>
<if test="status != null "> and f_status = #{status}</if>
</where>
</select>
<select id="selectPalletDeviceBindingById" parameterType="Long" resultMap="PalletDeviceBindingResult">
<include refid="selectPalletDeviceBindingVo"/>
where f_pallet_device_binding_id = #{palletDeviceBindingId}
</select>
<insert id="batchInsertPalletDeviceBinding" parameterType="list">
insert into t_pallet_device_binding (f_tray_id, f_device_code,f_row,f_col,f_index,f_binding_time,f_unbinding_time,
f_create_time,f_status)
values
<foreach collection="palletDeviceBindingList" item="item" index="index" separator=",">
(
#{item.trayId}, #{item.deviceCode}, #{item.row}, #{item.col}, #{item.index},#{item.bindingTime},
#{item.unbindingTime},#{item.createTime},#{item.status}
)
</foreach>
</insert>
<insert id="insertPalletDeviceBinding" parameterType="PalletDeviceBinding" useGeneratedKeys="true" keyProperty="palletDeviceBindingId">
insert into t_pallet_device_binding
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="trayId != null">f_tray_id,</if>
<if test="deviceCode != null">f_device_code,</if>
<if test="row != null">f_row,</if>
<if test="col != null">f_col,</if>
<if test="index != null">f_index,</if>
<if test="bindingTime != null">f_binding_time,</if>
<if test="unbindingTime != null">f_unbinding_time,</if>
<if test="createTime != null">f_create_time,</if>
<if test="status != null">f_status,</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="trayId != null">#{trayId},</if>
<if test="deviceCode != null">#{deviceCode},</if>
<if test="row != null">#{row},</if>
<if test="col != null">#{col},</if>
<if test="index != null">#{index},</if>
<if test="bindingTime != null">#{bindingTime},</if>
<if test="unbindingTime != null">#{unbindingTime},</if>
<if test="createTime != null">#{createTime},</if>
<if test="status != null">#{status},</if>
</trim>
</insert>
<update id="updatePalletDeviceBinding" parameterType="PalletDeviceBinding">
update t_pallet_device_binding
<trim prefix="SET" suffixOverrides=",">
<if test="trayId != null">f_tray_id = #{trayId},</if>
<if test="deviceCode != null">f_device_code = #{deviceCode},</if>
<if test="row != null">f_row = #{row},</if>
<if test="col != null">f_col = #{col},</if>
<if test="index != null">f_index = #{index},</if>
<if test="bindingTime != null">f_binding_time = #{bindingTime},</if>
<if test="unbindingTime != null">f_unbinding_time = #{unbindingTime},</if>
<if test="createTime != null">f_create_time = #{createTime},</if>
<if test="status != null">f_status = #{status},</if>
</trim>
where f_pallet_device_binding_id = #{palletDeviceBindingId}
</update>
<update id="batchUpdateDeviceCode" parameterType="list">
<foreach collection="palletDeviceBindingList" item="item" index="index" separator=";">
UPDATE t_pallet_device_binding
<set>
f_device_code = #{item.deviceCode}
</set>
WHERE f_pallet_device_binding_id = #{item.palletDeviceBindingId}
</foreach>
</update>
<delete id="deletePalletDeviceBindingById" parameterType="Long">
delete from t_pallet_device_binding where f_pallet_device_binding_id = #{palletDeviceBindingId}
</delete>
<delete id="deletePalletDeviceBindingByIds" parameterType="String">
delete from t_pallet_device_binding where f_pallet_device_binding_id in
<foreach item="palletDeviceBindingId" collection="array" open="(" separator="," close=")">
#{palletDeviceBindingId}
</foreach>
</delete>
</mapper>
\ No newline at end of file
import request from '@/utils/request'
// 查询托盘绑定的设备列列表
export function listBinding(query) {
return request({
url: '/palletDevice/binding/list',
method: 'get',
params: query
})
}
// 查询托盘绑定的设备列列表
export function getAllBinding(query) {
return request({
url: '/palletDevice/binding/getAll',
method: 'get',
params: query
})
}
// 查询托盘绑定的设备列详细
export function getBinding(palletDeviceBindingId) {
return request({
url: '/palletDevice/binding/' + palletDeviceBindingId,
method: 'get'
})
}
// 新增托盘绑定的设备列
export function addBinding(data) {
return request({
url: '/palletDevice/binding',
method: 'post',
data: data
})
}
// 批量新增托盘绑定的设备列
export function batchAdd(data) {
return request({
url: '/palletDevice/binding/batchAdd',
method: 'post',
data: data
})
}
// 修改托盘绑定的设备列
export function updateBinding(data) {
return request({
url: '/palletDevice/binding',
method: 'put',
data: data
})
}
// 修改托盘绑定的设备列
export function batchUpdateDeviceCode(data) {
return request({
url: '/palletDevice/binding/batchUpdateDeviceCode',
method: 'post',
data: data
})
}
// 删除托盘绑定的设备列
export function delBinding(palletDeviceBindingId) {
return request({
url: '/palletDevice/binding/' + palletDeviceBindingId,
method: 'delete'
})
}
// 导出托盘绑定的设备列
export function exportBinding(query) {
return request({
url: '/palletDevice/binding/export',
method: 'get',
params: query
})
}
...@@ -59,43 +59,43 @@ export default { ...@@ -59,43 +59,43 @@ export default {
return { return {
// 示例数据格式,实际从后端获取 // 示例数据格式,实际从后端获取
cabinets: [ cabinets: [
// { id: 1, deviceStatus: '1' }, { id: 1, deviceStatus: '1' },
// { id: 2, deviceStatus: '2' }, { id: 2, deviceStatus: '2' },
// { id: 3, deviceStatus: '0' }, { id: 3, deviceStatus: '0' },
// { id: 4, deviceStatus: '0' }, { id: 4, deviceStatus: '0' },
// { id: 5, deviceStatus: '0' }, { id: 5, deviceStatus: '0' },
// { id: 6, deviceStatus: '0' }, { id: 6, deviceStatus: '0' },
// { id: 7, deviceStatus: '0' }, { id: 7, deviceStatus: '0' },
// { id: 8, deviceStatus: '0' }, { id: 8, deviceStatus: '0' },
// { id: 9, deviceStatus: '0' }, { id: 9, deviceStatus: '0' },
// { id: 10, deviceStatus: '0' }, { id: 10, deviceStatus: '0' },
// { id: 11, deviceStatus: '0' }, { id: 11, deviceStatus: '0' },
// { id: 12, deviceStatus: '0' }, { id: 12, deviceStatus: '0' },
// { id: 13, deviceStatus: '0' }, { id: 13, deviceStatus: '0' },
// { id: 14, deviceStatus: '0' }, { id: 14, deviceStatus: '0' },
// { id: 15, deviceStatus: '0' }, { id: 15, deviceStatus: '0' },
// { id: 16, deviceStatus: '0' }, { id: 16, deviceStatus: '0' },
// { id: 17, deviceStatus: '0' }, { id: 17, deviceStatus: '0' },
// { id: 18, deviceStatus: '0' }, { id: 18, deviceStatus: '0' },
// { id: 19, deviceStatus: '0' }, { id: 19, deviceStatus: '0' },
// { id: 20, deviceStatus: '0' }, { id: 20, deviceStatus: '0' },
// { id: 21, deviceStatus: '0' }, { id: 21, deviceStatus: '0' },
// { id: 22, deviceStatus: '0' }, { id: 22, deviceStatus: '0' },
// { id: 23, deviceStatus: '0' }, { id: 23, deviceStatus: '0' },
// { id: 24, deviceStatus: '0' }, { id: 24, deviceStatus: '0' },
// { id: 25, deviceStatus: '0' }, { id: 25, deviceStatus: '0' },
// { id: 26, deviceStatus: '0' }, { id: 26, deviceStatus: '0' },
// { id: 27, deviceStatus: '0' }, { id: 27, deviceStatus: '0' },
// { id: 28, deviceStatus: '0' }, { id: 28, deviceStatus: '0' },
// { id: 29, deviceStatus: '0' }, { id: 29, deviceStatus: '0' },
// { id: 30, deviceStatus: '0' }, { id: 30, deviceStatus: '0' },
// { id: 31, deviceStatus: '0' }, { id: 31, deviceStatus: '0' },
// { id: 32, deviceStatus: '0' }, { id: 32, deviceStatus: '0' },
// { id: 33, deviceStatus: '0' }, { id: 33, deviceStatus: '0' },
// { id: 34, deviceStatus: '0' }, { id: 34, deviceStatus: '0' },
// { id: 35, deviceStatus: '0' }, { id: 35, deviceStatus: '0' },
// { id: 36, deviceStatus: '0' }, { id: 36, deviceStatus: '0' },
// ...共36个 //...共36个
], ],
// 状态对应的颜色类名 // 状态对应的颜色类名
statusMap: { statusMap: {
...@@ -118,12 +118,13 @@ export default { ...@@ -118,12 +118,13 @@ export default {
} }
}, },
mounted() { mounted() {
this.testAgingCabinetAndPowerCheck(); // this.testAgingCabinetAndPowerCheck();
}, },
methods: { methods: {
handleCardClick(item) { handleCardClick(item) {
// 触发事件传递 cabinetId 给父组件 // 触发事件传递 cabinetId 给父组件
this.$emit('cabinet-click', item); // 3 是 AgingLayer 组件的索引
this.$emit('cabinet-click', item,3);
}, },
getTooltipContent(item) { getTooltipContent(item) {
switch (item.deviceStatus) { switch (item.deviceStatus) {
......
...@@ -226,7 +226,7 @@ export default { ...@@ -226,7 +226,7 @@ export default {
// 返回老化柜看板 // 返回老化柜看板
goBack() { goBack() {
this.$emit('go-back'); this.$emit('go-back',0);
}, },
// 选择层 // 选择层
......
...@@ -2,115 +2,152 @@ ...@@ -2,115 +2,152 @@
<div class="tray-binding-container"> <div class="tray-binding-container">
<!-- 头部区域 --> <!-- 头部区域 -->
<div class="header"> <div class="header">
<p>通过扫描枪扫描设备条码,自动将设备绑定到托盘指定位置</p> <div class="back-button" @click="goBack">
<i class="el-icon-back"></i> 返回托盘列表看板
</div>
</div> </div>
<!-- 托盘ID绑定区域 --> <!-- 托盘ID绑定区域 -->
<div class="tray-id-section"> <div class="tray-id-section">
<div class="tray-display"> <div class="tray-info">
<div class="tray-label">当前托盘:</div> <div class="tray-display">
<div class="tray-id">{{ trayId || 'TP-未绑定' }}</div> <div class="tray-label">当前托盘:</div>
</div> <div class="tray-id">{{ fTrayCode || 'TP-未绑定' }}</div>
</div>
<div class="scan-section">
<input
type="text"
class="scan-input"
placeholder="扫描托盘条码..."
v-model="trayInput"
@keyup.enter="setTrayId"
ref="trayInput"
>
<button class="bind-btn" @click="setTrayId">
<i class="fas fa-barcode"></i> 绑定托盘
</button>
</div>
</div>
<!-- 设备矩阵区域 --> <!-- 添加托盘状态 -->
<div class="devices-grid-container"> <div class="tray-status">
<h2 class="grid-title"><i class="fas fa-microchip"></i> 设备绑定矩阵 (8×9)</h2> <div class="status-label">托盘状态:</div>
<div class="devices-grid"> <el-tag :type="trayStatusTagType" size="medium">
<div {{ trayStatusText }}
v-for="(device, index) in devices" </el-tag>
:key="index"
class="device-cell"
:class="{
'active': activeCell === index,
'empty': !device.value
}"
@click="setActiveCell(index)"
>
<div class="device-id">
{{ device.value || '+' }}
</div>
<div class="position-indicator">
{{ getPositionLabel(index) }}
</div>
</div> </div>
</div> </div>
</div>
<!-- 设备扫描区域 --> <!-- 设备扫描区域 -->
<div class="scan-section" style="align-items: center;"> <div
class="scan-section"
style="align-items: center;"
v-if="trayStatus !== '1'"
>
<input <input
type="text" type="text"
class="scan-input" class="scan-input"
placeholder="扫描设备条码..." :placeholder="scanPlaceholder"
v-model="deviceInput" v-model="deviceInput"
@keyup.enter="addDevice" @keyup.enter="addDevice"
ref="deviceInput" ref="deviceInput"
:disabled="trayStatus === '1'"
> >
<div class="status-bar"> <div class="status-bar">
<i class="fas fa-info-circle"></i> <i class="fas fa-info-circle"></i>
已绑定设备: <span class="filled-count">{{ filledCount }}</span>/72 <span v-if="trayStatus === '0'">已绑定设备: <span class="filled-count">{{ filledCount }}</span>/72</span>
<span v-if="trayStatus === '2'">待处理异常设备: <span class="filled-count">{{ abnormalCount }}</span>/{{ initialAbnormalCount }}</span>
</div> </div>
</div> </div>
</div>
<!-- 操作按钮区域 --> <!-- 设备矩阵区域 -->
<div class="binding-controls"> <div class="devices-grid-container">
<button class="reset-btn" @click="resetAll"> <div class="devices-grid">
<i class="fas fa-redo"></i> 重置所有 <div
</button> v-for="(device, index) in devices"
<button :key="index"
class="bind-btn" class="device-cell"
@click="bindTray" :class="{
:disabled="filledCount === 0 || !trayId" 'active': activeCell === index,
'empty': !device.deviceCode,
'error': device.deviceCode && device.status === '0'
}"
@click="setActiveCell(index)"
> >
<i class="fas fa-paper-plane"></i> 提交绑定 <div class="device-id">
</button> {{ device.deviceCode || '+' }}
<!-- 添加错误状态图标 -->
<i v-if="device.deviceCode && device.status === '0'" class="error-icon fas fa-exclamation-circle"></i>
</div>
<div class="position-indicator">
{{ getPositionLabel(index) }}
</div>
</div>
</div> </div>
</div>
<!-- 使用说明区域 --> <!-- 操作按钮区域 -->
<div class="instructions"> <div class="binding-controls">
<h3><i class="fas fa-lightbulb"></i> 使用说明</h3> <button
<ul> class="reset-btn"
<li>1. 首先扫描<span class="highlight">托盘条码</span>并点击绑定托盘按钮</li> @click="resetAll"
<li>2. 点击矩阵中的单元格或按顺序扫描<span class="highlight">设备条码</span>(扫描枪自动识别)</li> >
<li>3. 设备条码会自动填充到当前激活的单元格中</li> <i class="fas fa-redo"></i> 重置所有
<li>4. 可以手动点击任何单元格进行修改或重新扫描</li> </button>
<li>5. 完成所有设备绑定后,点击<span class="highlight">提交绑定</span>按钮</li> <button
<li><i class="fas fa-bolt scanner-icon"></i> 提示:使用扫描枪时,请确保输入框获得焦点</li> class="bind-btn"
</ul> @click="bindTray"
</div> :disabled="bindButtonDisabled"
>
<i class="fas fa-paper-plane"></i>
{{ trayStatus === '2' ? '提交修复' : '提交绑定' }}
</button>
</div>
<!-- 使用说明区域 -->
<div class="instructions">
<h3><i class="fas fa-lightbulb"></i> 使用说明</h3>
<ul>
<li v-if="trayStatus === '0'">1. 点击矩阵中的单元格或按顺序扫描<span class="highlight">设备条码</span>(扫描枪自动识别)</li>
<li v-if="trayStatus === '0'">2. 设备条码会自动填充到当前激活的单元格中</li>
<li v-if="trayStatus === '2'">1. 请扫描异常设备条码进行修复处理</li>
<li v-if="trayStatus === '2'">2. 每修复一个异常设备,待处理数量将减少</li>
<li>3. 可以手动点击任何单元格进行修改或重新扫描</li>
<li>4. 完成操作后,点击<span class="highlight">{{ trayStatus === '2' ? '提交修复' : '提交绑定' }}</span>按钮</li>
<li><i class="fas fa-bolt scanner-icon"></i> 提示:使用扫描枪时,请确保输入框获得焦点</li>
</ul>
</div>
</div> </div>
</template> </template>
<script> <script>
import {queryByDepartmentId} from "@/api/storey/storey"; import {getAllBinding, batchAdd, batchUpdateDeviceCode} from "@/api/palletDeviceBinding/binding"
export default { export default {
name: "TrayBinding", name: "TrayBinding",
props: {
modbusDeviceData: {
type: Object,
default: () => ({})
}
},
watch: {
modbusDeviceData: {
immediate: true,
handler(newVal) {
this.fTrayId = newVal.fTrayId;
this.fTrayCode = newVal.fTrayCode;
this.trayStatus = newVal.status; // 从父组件获取托盘状态
// 查询托盘是否有绑定的设备数据
this.getAllBindingData(newVal.fTrayId);
}
},
},
data() { data() {
return { return {
// 托盘ID // 托盘ID
trayId: '', fTrayId: '',
fTrayCode: '',
trayInput: '', trayInput: '',
// 托盘状态
trayStatus: '0', // 0:空闲, 1:运行中, 2:标检完成
// 异常设备计数
abnormalCount: 0,
initialAbnormalCount: 0,
// 设备矩阵数据 (8x9 = 72个设备) // 设备矩阵数据 (8x9 = 72个设备)
devices: Array(72).fill().map((_, i) => ({ devices: Array(72).fill().map((_, i) => ({
id: i + 1, index: i + 1,
value: '', deviceCode: '',
row: Math.floor(i / 9) + 1, row: Math.floor(i / 9) + 1,
col: (i % 9) + 1 col: (i % 9) + 1
})), })),
...@@ -125,19 +162,96 @@ export default { ...@@ -125,19 +162,96 @@ export default {
computed: { computed: {
// 计算已填充的设备数量 // 计算已填充的设备数量
filledCount() { filledCount() {
return this.devices.filter(d => d.value).length; return this.devices.filter(d => d.deviceCode).length;
},
// 计算绑定按钮是否禁用
bindButtonDisabled() {
if (this.trayStatus === '0') {
return this.filledCount === 0 || !this.fTrayCode;
} else if (this.trayStatus === '2') {
return this.abnormalCount > 0;
}
return true;
},
// 托盘状态标签类型
trayStatusTagType() {
const map = {
'0': 'success', // 空闲 - 绿色
'1': 'warning', // 运行中 - 黄色
'2': 'danger' // 标检完成 - 红色
};
return map[this.trayStatus] || 'info';
},
// 托盘状态文本
trayStatusText() {
const map = {
'0': '空闲',
'1': '运行中',
'2': '标检完成'
};
return map[this.trayStatus] || '未知状态';
},
// 扫描输入框提示语
scanPlaceholder() {
return this.trayStatus === '2'
? '扫描异常设备条码...'
: '扫描设备条码...';
} }
}, },
methods: { methods: {
// 设置托盘ID getAllBindingData(trayId) {
setTrayId() { const query = {
if (this.trayInput) { trayId: trayId
this.trayId = `TP-${this.trayInput}`;
this.trayInput = '';
this.$nextTick(() => {
this.$refs.deviceInput.focus();
});
} }
this.devices = [];
getAllBinding(query).then(res => {
if(res.code === 200 && res.data.length > 0) {
this.devices = res.data;
// 计算初始异常设备数量(标检完成状态)
if (this.trayStatus === '2') {
this.abnormalCount = this.devices.filter(
d => d.deviceCode && d.status === '0'
).length;
this.initialAbnormalCount = this.abnormalCount;
}
const firstDeviceCodeEmptyItem = this.devices.find(item =>
item.deviceCode === null ||
item.deviceCode === undefined ||
(typeof item.deviceCode === 'string' && item.deviceCode.trim() === '')
);
if(firstDeviceCodeEmptyItem !== undefined) {
// 自动移动到下一个单元格
if (firstDeviceCodeEmptyItem.index < 72) {
this.activeCell = firstDeviceCodeEmptyItem.index - 1;
}
} else {
// 如果已经是最后一个,则回到第一个
this.activeCell = 0;
}
} else {
// 初始化设备矩阵数据 (8x9 = 72个设备)
this.devices = Array(72).fill().map((_, i) => ({
index: i + 1,
trayId: this.fTrayId,
deviceCode: '',
row: Math.floor(i / 9) + 1,
col: (i % 9) + 1
}))
}
})
},
// 返回托盘列表看板
goBack() {
this.$emit('go-back',1);
}, },
// 设置当前激活的单元格 // 设置当前激活的单元格
...@@ -151,16 +265,44 @@ export default { ...@@ -151,16 +265,44 @@ export default {
// 添加设备到当前激活单元格 // 添加设备到当前激活单元格
addDevice() { addDevice() {
if (this.deviceInput) { if (this.deviceInput) {
this.devices[this.activeCell].value = this.deviceInput; // 标检完成状态下的特殊处理
this.deviceInput = ''; if (this.trayStatus === '2') {
// 检查扫描的设备是否是异常设备
// 自动移动到下一个单元格 const deviceIndex = this.devices.findIndex(
if (this.activeCell < 71) { d => d.deviceCode === this.deviceInput && d.status === '0'
this.activeCell++; );
if (deviceIndex !== -1) {
// 找到异常设备,进行修复
this.devices[deviceIndex].status = '1'; // 标记为已修复
this.abnormalCount--; // 减少异常设备计数
// 提示修复成功
this.$message.success(`设备 ${this.deviceInput} 修复成功!`);
// 自动移动到下一个单元格
if (this.activeCell < 71) {
this.activeCell++;
} else {
this.activeCell = 0;
}
} else {
// 非异常设备提示
this.$message.warning(`设备 ${this.deviceInput} 不是异常设备或不存在`);
}
} else { } else {
// 如果已经是最后一个,则回到第一个 // 空闲状态下的正常处理
this.activeCell = 0; this.devices[this.activeCell].deviceCode = this.deviceInput;
// 自动移动到下一个单元格
if (this.activeCell < 71) {
this.activeCell++;
} else {
this.activeCell = 0;
}
} }
this.deviceInput = '';
} }
}, },
...@@ -172,29 +314,50 @@ export default { ...@@ -172,29 +314,50 @@ export default {
}, },
// 绑定托盘 // 绑定托盘
bindTray() { bindTray: function () {
const boundDevices = this.devices if (this.trayStatus === '0') {
.filter(d => d.value) // 空闲状态 - 绑定设备
.map(d => ({ const palletDeviceBindingId = this.devices[0].palletDeviceBindingId;
position: this.getPositionLabel(d.id - 1), if (this.filledCount > 0) {
deviceId: d.value if(palletDeviceBindingId == null) {
})); batchAdd(this.devices).then(res => {
if (res.code === 200) {
alert(`托盘 ${this.trayId} 绑定成功!\n绑定设备数量: ${boundDevices.length}`); this.msgSuccess("绑定成功");
console.log('托盘ID:', this.trayId); } else {
console.log('绑定设备:', boundDevices); this.msgError("绑定失败");
}
})
} else {
batchUpdateDeviceCode(this.devices).then(res => {
if (res.code === 200) {
this.msgSuccess("绑定成功");
} else {
this.msgError("绑定失败");
}
})
}
}
} else if (this.trayStatus === '2') {
// 标检完成状态 - 提交修复
batchUpdateDeviceCode(this.devices).then(res => {
if (res.code === 200) {
this.msgSuccess("修复信息提交成功");
this.abnormalCount = 0; // 重置异常计数
} else {
this.msgError("提交失败");
}
})
}
}, },
// 重置所有数据 // 重置所有数据
resetAll() { resetAll() {
if (confirm('确定要重置所有数据吗?')) { if (confirm('确定要重置所有数据吗?')) {
this.trayId = '';
this.trayInput = '';
this.deviceInput = ''; this.deviceInput = '';
this.devices = this.devices.map(d => ({ ...d, value: '' })); this.devices = this.devices.map(d => ({ ...d, deviceCode: '' }));
this.activeCell = 0; this.activeCell = 0;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.trayInput.focus(); this.$refs.deviceInput.focus();
}); });
} }
} }
...@@ -202,13 +365,34 @@ export default { ...@@ -202,13 +365,34 @@ export default {
mounted() { mounted() {
// 初始化时聚焦到托盘输入框 // 初始化时聚焦到托盘输入框
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.trayInput.focus(); this.$refs.deviceInput.focus();
}); });
} },
}; };
</script> </script>
<style scoped> <style scoped>
/* 添加托盘信息容器样式 */
.tray-info {
display: flex;
flex-direction: column;
gap: 15px;
min-width: 300px;
}
.tray-status {
display: flex;
align-items: center;
gap: 10px;
}
.status-label {
font-size: 1.1rem;
color: #64c8ff;
font-weight: bold;
}
/* 其他样式保持不变 */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -217,7 +401,7 @@ export default { ...@@ -217,7 +401,7 @@ export default {
} }
body { body {
background: linear-gradient(135deg, #1a2a6c, #2c3e50); background: linear-gradient(135deg, #0a1929, #0c2a46);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -228,7 +412,7 @@ body { ...@@ -228,7 +412,7 @@ body {
.tray-binding-container { .tray-binding-container {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1400px;
background: rgba(10, 20, 40, 0.85); background: rgba(10, 20, 40, 0.85);
border-radius: 20px; border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
...@@ -239,46 +423,50 @@ body { ...@@ -239,46 +423,50 @@ body {
} }
.header { .header {
text-align: center; text-align: right;
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
} }
.header h1 { .back-button {
font-size: 2.8rem; cursor: pointer;
background: linear-gradient(to right, #4facfe, #00f2fe); margin-bottom: 20px;
-webkit-background-clip: text; width: 200px;
color: transparent; color: #409EFF;
margin-bottom: 15px; display: inline-flex;
text-shadow: 0 0 15px rgba(79, 172, 254, 0.5); align-items: center;
transition: all 0.3s;
padding: 8px 15px;
background: rgba(0, 40, 80, 0.4);
border-radius: 8px;
font-size: 1.1rem;
} }
.header p { .back-button:hover {
color: #a0d2ff; color: #66b1ff;
font-size: 1.2rem; background: rgba(0, 60, 120, 0.6);
max-width: 700px; transform: translateX(-5px);
margin: 0 auto;
line-height: 1.6;
} }
.tray-id-section { .tray-id-section {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
gap: 20px;
margin-bottom: 40px; margin-bottom: 40px;
flex-wrap: wrap; flex-wrap: wrap;
gap: 30px;
background: rgba(0, 40, 80, 0.3);
border-radius: 15px;
padding: 25px;
border: 1px solid rgba(64, 158, 255, 0.4);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
} }
.tray-display { .tray-display {
background: rgba(0, 40, 80, 0.4);
border: 2px solid rgba(64, 158, 255, 0.6);
border-radius: 15px;
padding: 25px 40px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); min-width: 300px;
} }
.tray-label { .tray-label {
...@@ -302,6 +490,7 @@ body { ...@@ -302,6 +490,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
min-width: 400px;
} }
.scan-input { .scan-input {
...@@ -311,7 +500,7 @@ body { ...@@ -311,7 +500,7 @@ body {
padding: 15px 25px; padding: 15px 25px;
color: white; color: white;
font-size: 1.2rem; font-size: 1.2rem;
width: 300px; width: 100%;
transition: all 0.3s; transition: all 0.3s;
} }
...@@ -321,8 +510,32 @@ body { ...@@ -321,8 +510,32 @@ body {
box-shadow: 0 0 15px rgba(100, 200, 255, 0.5); box-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
} }
.status-bar {
text-align: center;
padding: 15px;
background: rgba(0, 30, 60, 0.5);
border-radius: 10px;
font-size: 1.2rem;
color: #64ffda;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.filled-count {
font-weight: bold;
color: #64c8ff;
font-size: 1.4rem;
}
.devices-grid-container { .devices-grid-container {
margin-bottom: 40px; margin-bottom: 40px;
background: rgba(0, 40, 80, 0.3);
border-radius: 15px;
padding: 25px;
border: 1px solid rgba(64, 158, 255, 0.4);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
} }
.grid-title { .grid-title {
...@@ -336,23 +549,26 @@ body { ...@@ -336,23 +549,26 @@ body {
.devices-grid { .devices-grid {
display: grid; display: grid;
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr);
gap: 12px; gap: 15px;
margin: 0 auto; margin: 0 auto;
max-width: 900px; max-width: 100%;
} }
/* 长方形设备单元格样式 */
.device-cell { .device-cell {
background: rgba(30, 60, 100, 0.4); background: rgba(30, 60, 100, 0.4);
border: 2px solid rgba(64, 158, 255, 0.5); border: 2px solid rgba(64, 158, 255, 0.5);
border-radius: 8px; border-radius: 8px;
aspect-ratio: 1; height: 80px; /* 高度固定 */
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 5px;
} }
.device-cell:hover { .device-cell:hover {
...@@ -366,15 +582,23 @@ body { ...@@ -366,15 +582,23 @@ body {
border-color: #64ffda; border-color: #64ffda;
background: rgba(100, 255, 218, 0.15); background: rgba(100, 255, 218, 0.15);
box-shadow: 0 0 15px rgba(100, 255, 218, 0.4); box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
transform: scale(1.05);
} }
.device-id { .device-id {
font-size: 1.1rem; font-size: 0.85rem;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
padding: 5px; width: 100%;
padding: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 40px;
} }
.device-cell.empty .device-id { .device-cell.empty .device-id {
...@@ -447,26 +671,6 @@ body { ...@@ -447,26 +671,6 @@ body {
box-shadow: 0 8px 20px rgba(255, 65, 108, 0.5); box-shadow: 0 8px 20px rgba(255, 65, 108, 0.5);
} }
.status-bar {
text-align: center;
margin-top: 30px;
padding: 15px;
background: rgba(0, 30, 60, 0.5);
border-radius: 10px;
font-size: 1.2rem;
color: #64ffda;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.filled-count {
font-weight: bold;
color: #64c8ff;
font-size: 1.4rem;
}
.instructions { .instructions {
background: rgba(0, 30, 60, 0.4); background: rgba(0, 30, 60, 0.4);
border-radius: 15px; border-radius: 15px;
...@@ -509,30 +713,35 @@ body { ...@@ -509,30 +713,35 @@ body {
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 900px) { @media (max-width: 1200px) {
.devices-grid { .devices-grid {
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
max-width: 600px; }
}
@media (max-width: 900px) {
.devices-grid {
grid-template-columns: repeat(4, 1fr);
} }
.tray-id-section { .tray-id-section {
flex-direction: column; flex-direction: column;
align-items: stretch;
}
.tray-display, .scan-section {
min-width: 100%;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.devices-grid { .devices-grid {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr);
max-width: 400px;
} }
.tray-display { .tray-display {
padding: 15px 25px; flex-direction: column;
} text-align: center;
.tray-id {
font-size: 1.8rem;
min-width: 200px;
} }
.bind-btn, .reset-btn { .bind-btn, .reset-btn {
...@@ -540,4 +749,63 @@ body { ...@@ -540,4 +749,63 @@ body {
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
.matrix-info {
text-align: center;
margin-top: 15px;
color: #64c8ff;
font-size: 1.1rem;
}
/* 设备单元格错误状态样式 */
.device-cell.error {
border-color: #ff4d4f !important;
box-shadow: 0 0 8px rgba(255, 77, 79, 0.5);
position: relative;
overflow: visible;
}
.device-cell.error::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid #ff4d4f;
border-radius: 8px;
animation: pulseError 1.5s infinite;
z-index: 1;
}
@keyframes pulseError {
0% { opacity: 0.8; }
50% { opacity: 0.3; }
100% { opacity: 0.8; }
}
.error-icon {
position: absolute;
top: -8px;
right: -8px;
color: #ff4d4f;
font-size: 18px;
background: rgba(10, 20, 40, 0.9);
border-radius: 50%;
z-index: 2;
animation: pulseIcon 1.5s infinite;
}
@keyframes pulseIcon {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* 调整设备ID显示区域,为错误图标留出空间 */
.device-id {
position: relative;
padding-top: 5px;
padding-right: 15px;
}
</style> </style>
<template> <template>
<div class="container"> <div class="tray-container">
<div class="header"> <div class="tray-header">
<div class="tray-title">
<div class="title-text">托盘信息管理</div>
<div class="title-line"></div>
</div>
<div class="search-box"> <div class="search-box">
<el-input <el-input
class="search-input" class="search-input"
...@@ -8,33 +13,52 @@ ...@@ -8,33 +13,52 @@
placeholder="请输入托盘编号" placeholder="请输入托盘编号"
clearable clearable
@keyup.enter.native="searchTray" @keyup.enter.native="searchTray"
></el-input> >
<i slot="prefix" class="el-icon-search"></i>
</el-input>
<el-button <el-button
type="primary" type="primary"
icon="el-icon-search" icon="el-icon-search"
@click="searchTray" @click="searchTray"
class="search-button"
>搜索</el-button> >搜索</el-button>
</div> </div>
</div> </div>
<div class="table-container"> <div class="tray-table-container">
<el-table <el-table
:data="filteredTrays" :data="filteredTrays"
border border
style="width: 100%" style="width: 100%"
@row-click="handleRowClick" @row-click="handleRowClick"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
class="tray-table"
> >
<el-table-column prop="trayId" label="托盘编号" width="200"></el-table-column> <el-table-column prop="trayId" label="托盘编号" width="200" align="center">
<el-table-column prop="status" label="状态" width="150"> <template slot-scope="scope">
<div class="tray-id">{{ scope.row.fTrayCode }}</div>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="statusTagType(scope.row.status)"> <el-tag :type="statusTagType(scope.row.status)" class="status-tag">
{{ scope.row.status }} {{ scope.row.statusStr }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="boardCount" label="主板数量" width="150"></el-table-column> <el-table-column prop="boardCount" label="主板数量" width="150" align="center">
<el-table-column prop="location" label="位置"></el-table-column> <template slot-scope="scope">
<div class="board-count">
<span class="count-number">{{ scope.row.boardCount }}</span>
<span class="count-label"></span>
</div>
</template>
</el-table-column>
<el-table-column prop="location" label="位置" align="center">
<template slot-scope="scope">
<div class="location-text">{{ scope.row.location }}</div>
</template>
</el-table-column>
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
...@@ -53,6 +77,7 @@ ...@@ -53,6 +77,7 @@
</template> </template>
<script> <script>
import {queryByDepartmentId} from "@/api/storey/storey"; import {queryByDepartmentId} from "@/api/storey/storey";
export default { export default {
name: "TrayInformation", name: "TrayInformation",
...@@ -94,18 +119,21 @@ export default { ...@@ -94,18 +119,21 @@ export default {
// 模拟API请求 // 模拟API请求
fetchTrays() { fetchTrays() {
// 实际项目中替换为真实的API请求 // 实际项目中替换为真实的API请求
// 0 空闲
// 1 运行中
// 2 标检完成
setTimeout(() => { setTimeout(() => {
this.trays = [ this.trays = [
{trayId: 'TP20240001', status: '空闲', boardCount: 0, location: 'A区-1号架'}, {fTrayId:1,fTrayCode: 'TP20240001', status: '2',statusStr:"标检完成", boardCount: 0, location: 'A区-1号架'},
{trayId: 'TP20240002', status: '使用中', boardCount: 8, location: 'B区-3号架'}, {fTrayId:2,fTrayCode: 'TP20240002', status: '0',statusStr:"空闲", boardCount: 8, location: 'B区-3号架'},
{trayId: 'TP20240003', status: '满载', boardCount: 12, location: 'C区-2号架'}, {fTrayId:3,fTrayCode: 'TP20240003', status: '1',statusStr:"运行中", boardCount: 12, location: 'C区-2号架'},
{trayId: 'TP20240004', status: '维护中', boardCount: 0, location: '维修区'}, {fTrayId:4,fTrayCode: 'TP20240004', status: '2',statusStr:"标检完成", boardCount: 0, location: '维修区'},
{trayId: 'TP20240005', status: '空闲', boardCount: 0, location: 'D区-4号架'}, {fTrayId:5,fTrayCode: 'TP20240005', status: '0',statusStr:"空闲", boardCount: 0, location: 'D区-4号架'},
{trayId: 'TP20240006', status: '使用中', boardCount: 5, location: 'E区-1号架'}, {fTrayId:6,fTrayCode: 'TP20240006', status: '1',statusStr:"运行中", boardCount: 5, location: 'E区-1号架'},
{trayId: 'TP20240007', status: '满载', boardCount: 12, location: 'F区-2号架'}, {fTrayId:7,fTrayCode: 'TP20240007', status: '2',statusStr:"标检完成", boardCount: 12, location: 'F区-2号架'},
{trayId: 'TP20240008', status: '空闲', boardCount: 0, location: 'G区-5号架'}, {fTrayId:8,fTrayCode: 'TP20240008', status: '0',statusStr:"空闲", boardCount: 0, location: 'G区-5号架'},
{trayId: 'TP20240009', status: '使用中', boardCount: 10, location: 'H区-3号架'}, {fTrayId:9,fTrayCode: 'TP20240009', status: '1',statusStr:"运行中", boardCount: 10, location: 'H区-3号架'},
{trayId: 'TP20240110', status: '满载', boardCount: 12, location: 'I区-1号架'} {fTrayId:10,fTrayCode: 'TP20240110', status: '2',statusStr:"标检完成", boardCount: 12, location: 'I区-1号架'}
]; ];
}, 500); }, 500);
}, },
...@@ -117,7 +145,9 @@ export default { ...@@ -117,7 +145,9 @@ export default {
// 处理行点击 // 处理行点击
handleRowClick(row) { handleRowClick(row) {
this.$router.push({name: 'TrayConfig', params: {id: row.trayId}}); // 触发事件传递 cabinetId 给父组件
// 4 是 TrayBinding 的组件
this.$emit('cabinet-click', row,4);
}, },
// 设置行样式 // 设置行样式
...@@ -126,12 +156,14 @@ export default { ...@@ -126,12 +156,14 @@ export default {
}, },
// 状态标签类型 // 状态标签类型
// 0 空闲
// 1 运行中
// 2 标检完成
statusTagType(status) { statusTagType(status) {
const statusMap = { const statusMap = {
'空闲': 'success', '0': 'success',
'使用中': 'primary', '1': 'primary',
'满载': 'warning', '2': 'danger'
'维护中': 'danger'
}; };
return statusMap[status] || 'info'; return statusMap[status] || 'info';
}, },
...@@ -150,31 +182,196 @@ export default { ...@@ -150,31 +182,196 @@ export default {
</script> </script>
<style scoped> <style scoped>
.tray-container {
.container {
padding: 20px; padding: 20px;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
background: rgba(4, 18, 57, 0.7);
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 153, 255, 0.2);
border: 1px solid rgba(64, 158, 255, 0.3);
}
.tray-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(64, 158, 255, 0.3);
}
.tray-title {
display: flex;
flex-direction: column;
} }
.title-text {
font-size: 22px;
font-weight: bold;
color: #ffffff;
letter-spacing: 1px;
text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}
.title-line {
height: 3px;
width: 100px;
background: linear-gradient(to right, #409EFF, transparent);
margin-top: 8px;
border-radius: 2px;
}
.search-box { .search-box {
display: flex; display: flex;
margin-bottom: 20px; max-width: 500px;
max-width: 400px;
} }
.search-input { .search-input {
flex: 1; flex: 1;
margin-right: 10px; margin-right: 15px;
}
.search-input >>> .el-input__inner {
background: rgba(10, 30, 70, 0.6);
border: 1px solid #409EFF;
color: #ffffff;
height: 40px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(64, 158, 255, 0.3) inset;
}
.search-input >>> .el-input__inner::placeholder {
color: rgba(200, 200, 255, 0.5);
} }
.table-container {
margin-top: 20px; .search-button {
height: 40px;
padding: 0 25px;
background: linear-gradient(90deg, #409EFF, #1a73e8);
border: none;
border-radius: 4px;
font-weight: bold;
letter-spacing: 1px;
box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
transition: all 0.3s ease;
} }
.search-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(64, 158, 255, 0.7);
}
.tray-table-container {
margin-top: 15px;
}
.tray-table >>> .el-table {
background: transparent;
color: #e0f0ff;
}
.tray-table >>> .el-table th {
background: rgba(10, 35, 80, 0.8);
color: #a0d0ff;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #409EFF;
}
.tray-table >>> .el-table tr {
background: rgba(8, 28, 65, 0.5);
}
.tray-table >>> .el-table tr:hover {
background: rgba(15, 45, 90, 0.7) !important;
}
.tray-table >>> .el-table td {
border-bottom: 1px solid rgba(64, 158, 255, 0.2);
padding: 12px 0;
}
.tray-table >>> .el-table--border {
border: 1px solid rgba(64, 158, 255, 0.3);
}
.tray-table >>> .el-table--border::after,
.tray-table >>> .el-table--group::after,
.tray-table >>> .el-table::before {
background-color: rgba(64, 158, 255, 0.3);
}
.tray-id {
font-weight: bold;
color: #6dc6ff;
}
.status-tag {
font-weight: bold;
border-radius: 12px;
padding: 0 12px;
height: 28px;
line-height: 28px;
min-width: 80px;
text-align: center;
}
.board-count {
display: flex;
align-items: center;
justify-content: center;
}
.count-number {
font-size: 18px;
font-weight: bold;
color: #ffcf5c;
margin-right: 5px;
}
.count-label {
color: #a0d0ff;
}
.location-text {
color: #a0d0ff;
}
.pagination { .pagination {
margin-top: 20px; margin-top: 25px;
text-align: right; display: flex;
justify-content: flex-end;
}
.pagination >>> .el-pagination {
color: #a0d0ff;
}
.pagination >>> .el-pagination button,
.pagination >>> .el-pager li {
background: rgba(10, 35, 80, 0.6);
color: #a0d0ff;
border: 1px solid rgba(64, 158, 255, 0.3);
margin: 0 3px;
border-radius: 4px;
}
.pagination >>> .el-pagination button:hover,
.pagination >>> .el-pager li:hover {
color: #409EFF;
} }
.pagination >>> .el-pager li.active {
background: linear-gradient(90deg, #409EFF, #1a73e8);
color: #fff;
border: none;
}
.clickable-row { .clickable-row {
cursor: pointer; cursor: pointer;
} }
.clickable-row:hover { .clickable-row:hover {
background-color: #f5f7fa; background-color: rgba(64, 158, 255, 0.1) !important;
} }
</style> </style>
...@@ -79,7 +79,8 @@ export default { ...@@ -79,7 +79,8 @@ export default {
{ icon: '📷', text: '老化柜看板', component: 'AgingCabinetBoard' }, { icon: '📷', text: '老化柜看板', component: 'AgingCabinetBoard' },
{ icon: '📊', text: '托盘信息', component: 'TrayInformation' }, { icon: '📊', text: '托盘信息', component: 'TrayInformation' },
{ icon: '📦', text: '实时数据', component: 'RealTimeData' }, { icon: '📦', text: '实时数据', component: 'RealTimeData' },
{ icon: '🔍', text: '老化层详情', component: 'AgingLayer' } // 新增菜单项 { icon: '🔍', text: '老化层详情', component: 'AgingLayer' }, // 新增菜单项,
{ icon: '🔍', text: '托盘与设备绑定', component: 'TrayBinding' } // 新增菜单项
], ],
modbusDeviceData: null // 存储传递的柜子ID modbusDeviceData: null // 存储传递的柜子ID
} }
...@@ -92,16 +93,17 @@ export default { ...@@ -92,16 +93,17 @@ export default {
}, },
methods: { methods: {
// 处理返回事件 // 处理返回事件
handleGoBack() { handleGoBack(selectedMenu) {
// 返回老化柜看板(菜单索引 0) // 返回老化柜看板(菜单索引 0)
this.selectedMenu = 0; // 返回托盘信息列表 菜单索引 3
this.selectedMenu = selectedMenu;
this.modbusDeviceData = null; this.modbusDeviceData = null;
}, },
// 接收从 AgingCabinetBoard 传递的柜子ID // 接收从 AgingCabinetBoard 传递的柜子ID
handleCabinetClick(modbusDeviceData) { handleCabinetClick(modbusDeviceData,selectedMenu) {
this.modbusDeviceData = modbusDeviceData; this.modbusDeviceData = modbusDeviceData;
// 切换到 AgingLayer 组件(对应菜单索引 3) // 切换到 AgingLayer 组件(对应菜单索引 3)
this.selectedMenu = 3; this.selectedMenu = selectedMenu;
}, },
selectMenu(index) { selectMenu(index) {
// if(index === 3) { // if(index === 3) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment