首页和设备监控页面

This commit is contained in:
猫猫guowen
2025-12-23 15:46:56 +08:00
parent 99d62be9be
commit debbcb1915
8 changed files with 411 additions and 495 deletions

View File

@@ -5,8 +5,11 @@ import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.ruoyi.device.ddj.domain.MsgDdj;
import com.ruoyi.device.ddj.service.IMsgDdjService;
import com.ruoyi.device.srgv.domain.DeviceSrgv;
import com.ruoyi.device.srgv.service.IDeviceSrgvService;
import com.ruoyi.device.tsj.domain.DeviceTsj;
import com.ruoyi.device.tsj.service.IDeviceTsjService;
import com.ruoyi.job.domain.MydoJob;
import com.ruoyi.job.service.IMydoJobService;
import org.springframework.beans.factory.annotation.Autowired;
@@ -15,13 +18,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.device.DeviceCar.service.IDeviceCarService;
import com.ruoyi.queue.agv.service.IAgvQueueService;
import com.ruoyi.queue.agv.service.IAgvQueueFinishService;
import com.ruoyi.device.ssj.service.IDeviceSsjService;
import com.ruoyi.device.DeviceCar.domain.DeviceCar;
import com.ruoyi.queue.agv.domain.AgvQueue;
import com.ruoyi.queue.agv.domain.AgvQueueFinish;
import com.ruoyi.device.ssj.domain.DeviceSsj;
/**
@@ -33,18 +30,15 @@ import com.ruoyi.device.ssj.domain.DeviceSsj;
@RestController
@RequestMapping("/index")
public class IndexController extends BaseController {
@Autowired
private IDeviceCarService deviceCarService;
@Autowired
private IAgvQueueService agvQueueService;
@Autowired
private IAgvQueueFinishService agvQueueFinishService;
@Autowired
private IDeviceSsjService deviceSsjService;
@Autowired
private IDeviceSrgvService deviceSrgvService;
@Autowired
private IDeviceTsjService deviceTsjService;
@Autowired
private IMsgDdjService msgDdjService;
@@ -58,18 +52,19 @@ public class IndexController extends BaseController {
@GetMapping("/deviceStats")
public AjaxResult getDeviceStats() {
try {
DeviceCar deviceCar = new DeviceCar();
MsgDdj msgDdj = new MsgDdj();
DeviceSrgv deviceSrgv = new DeviceSrgv();
DeviceTsj deviceTsj = new DeviceTsj();
DeviceSsj deviceSsj = new DeviceSsj();
List<DeviceCar> deviceList = deviceCarService.selectDeviceCarList(deviceCar);
List<MsgDdj> msgDdjList = msgDdjService.selectMsgDdjList(msgDdj);
List<DeviceSsj> deviceSsjList = deviceSsjService.selectDeviceSsjList(deviceSsj);
List<DeviceSrgv> deviceSrgvList = deviceSrgvService.selectDeviceSrgvList(deviceSrgv);
List<DeviceTsj> deviceTsjList = deviceTsjService.selectDeviceTsjList(deviceTsj);
Map<String, Object> count = new HashMap<>();
count.put("agvCount", deviceList.size());
count.put("ddjCount", msgDdjList.size());
count.put("srgvCount", deviceSrgvList.size());
count.put("ssjCount", deviceSsjList.size());
count.put("tsjCount", deviceTsjList.size());
return AjaxResult.success(count);
} catch (Exception e) {
@@ -84,8 +79,6 @@ public class IndexController extends BaseController {
public AjaxResult getTaskStats() {
try {
MydoJob mydoJob = new MydoJob();
AgvQueue agvQueue = new AgvQueue();
List<AgvQueue> queueList = agvQueueService.selectAgvQueueList(agvQueue);
List<MydoJob> mydoJobList = mydoJobService.selectMydoJobList(mydoJob);
List<MydoJob> mydoJobFinishList = mydoJobService.selectMydoJobFinishList(mydoJob);
@@ -144,55 +137,60 @@ public class IndexController extends BaseController {
try {
List<Map<String, Object>> runningDevices = new ArrayList<>();
// 查询运行中的AGV和CTU设备
/*DeviceCar deviceCar = new DeviceCar();
List<DeviceCar> deviceList = deviceCarService.selectDeviceCarList(deviceCar);
for (DeviceCar device : deviceList) {
String taskNo = device.getTaskNo();
// 判断是否为运行中设备:taskNo不为空且不为0
if (taskNo != null && !taskNo.trim().isEmpty() && !"0".equals(taskNo.trim())) {
Map<String, Object> deviceInfo = new HashMap<>();
deviceInfo.put("deviceCode", device.getDeviceCode());
deviceInfo.put("deviceName", device.getName());
deviceInfo.put("deviceType", "AGV");
deviceInfo.put("taskNo", device.getTaskNo());
runningDevices.add(deviceInfo);
}
}*/
// 查询运行中的SSJ设备
DeviceSsj deviceSsj = new DeviceSsj();
List<DeviceSsj> ssjList = deviceSsjService.selectDeviceSsjList(deviceSsj);
for (DeviceSsj ssj : ssjList) {
int taskNo = ssj.getTaskNo();
// 判断是否为运行中设备:taskNo不为0
if (taskNo != 0) {
Map<String, Object> deviceInfo = new HashMap<>();
deviceInfo.put("deviceCode", ssj.getDeviceCode());
deviceInfo.put("deviceName", ssj.getName());
deviceInfo.put("deviceType", "SSJ");
deviceInfo.put("taskNo", String.valueOf(ssj.getTaskNo()));
runningDevices.add(deviceInfo);
if (ssjList != null && !ssjList.isEmpty()){
for (DeviceSsj ssj : ssjList) {
Integer taskNo = ssj.getTaskNo();
// 判断是否为运行中设备:taskNo不为0
if (taskNo != 0 && taskNo != null) {
Map<String, Object> deviceInfo = new HashMap<>();
deviceInfo.put("deviceCode", ssj.getDeviceCode());
deviceInfo.put("deviceName", ssj.getName());
deviceInfo.put("deviceType", "SSJ");
deviceInfo.put("taskNo", String.valueOf(ssj.getTaskNo()));
runningDevices.add(deviceInfo);
}
}
}
MsgDdj msgDdj = new MsgDdj();
List<MsgDdj> msgDdjList = msgDdjService.selectMsgDdjList(msgDdj);
for (MsgDdj ddj : msgDdjList){
Long taskNo = ddj.getRwh();
if (taskNo != 0){
HashMap<String, Object> deviceInfo = new HashMap<>();
deviceInfo.put("deviceCode",ddj.getId());
deviceInfo.put("deviceName", ddj.getName());
deviceInfo.put("deviceType", "DDJ");
deviceInfo.put("taskNo", ddj.getRwh());
runningDevices.add(deviceInfo);
DeviceSrgv deviceSrgv = new DeviceSrgv();
List<DeviceSrgv> srgvList = deviceSrgvService.selectDeviceSrgvList(deviceSrgv);
if (srgvList != null && !srgvList.isEmpty()){
for (DeviceSrgv srgv : srgvList) {
Integer taskNo = srgv.getTaskNo();
if (taskNo != null && taskNo != 0) {
Map<String, Object> deviceInfo = new HashMap<>();
deviceInfo.put("deviceCode", srgv.getDeviceId());
deviceInfo.put("deviceName", srgv.getDeviceName());
deviceInfo.put("deviceType", "SRGV");
deviceInfo.put("taskNo", String.valueOf(srgv.getTaskNo()));
runningDevices.add(deviceInfo);
}
}
}
DeviceTsj deviceTsj = new DeviceTsj();
List<DeviceTsj> tsjList = deviceTsjService.selectDeviceTsjList(deviceTsj);
if (tsjList != null && !tsjList.isEmpty()){
for (DeviceTsj tsj : tsjList) {
Long taskNo = tsj.getRwh();
if (taskNo != null && taskNo != 0) {
Map<String, Object> deviceInfo = new HashMap<>();
deviceInfo.put("deviceCode", tsj.getId());
deviceInfo.put("deviceName", tsj.getName());
deviceInfo.put("deviceType", "TSJ");
deviceInfo.put("taskNo", String.valueOf(tsj.getRwh()));
runningDevices.add(deviceInfo);
}
}
}
return AjaxResult.success(runningDevices);
} catch (Exception e) {
return AjaxResult.error("获取运行中设备列表失败");
@@ -242,56 +240,65 @@ public class IndexController extends BaseController {
public AjaxResult getDeviceStatusChart() {
try {
Map<String, Map<String, Integer>> statusCount = new HashMap<>();
// statusCount.put("AGV", new HashMap<>());
statusCount.put("DDJ", new HashMap<>());
statusCount.put("SRGV", new HashMap<>());
statusCount.put("TSJ", new HashMap<>());
statusCount.put("SSJ", new HashMap<>());
// 查询DeviceCar数据(AGV)
DeviceCar deviceCar = new DeviceCar();
List<DeviceCar> deviceList = deviceCarService.selectDeviceCarList(deviceCar);
DeviceSrgv deviceSrgv = new DeviceSrgv();
List<DeviceSrgv> deviceSrgvs = deviceSrgvService.selectDeviceSrgvList(deviceSrgv);
if (deviceSrgvs != null && !deviceSrgvs.isEmpty()){
for (DeviceSrgv device : deviceSrgvs) {
Integer taskNo = device.getTaskNo();
String status = "其他";
// 根据taskNo判断状态:不等于空或0时为运行状态
if (taskNo != 0 && taskNo != null) {
status = "运行";
}
Map<String, Integer> typeStatusCount = statusCount.get("SRGV");
typeStatusCount.put(status, typeStatusCount.getOrDefault(status, 0) + 1);
for (DeviceCar device : deviceList) {
String taskNo = device.getTaskNo();
String status = "其他";
// 根据taskNo判断状态:不等于空或0时为运行状态
if (taskNo != null && !taskNo.trim().isEmpty() && !"0".equals(taskNo.trim())) {
status = "运行";
}
Map<String, Integer> typeStatusCount = statusCount.get("AGV");
typeStatusCount.put(status, typeStatusCount.getOrDefault(status, 0) + 1);
}
// 查询DeviceSsj数据(SSJ)
DeviceSsj deviceSsj = new DeviceSsj();
List<DeviceSsj> ssjList = deviceSsjService.selectDeviceSsjList(deviceSsj);
for (DeviceSsj ssj : ssjList) {
int taskNo = ssj.getTaskNo();
String status = "其他";
if (ssjList != null && !ssjList.isEmpty()){
for (DeviceSsj ssj : ssjList) {
Integer taskNo = ssj.getTaskNo();
String status = "其他";
// 根据taskNo判断状态:不等于空或0时为运行状态
if (taskNo != 0) {
status = "运行";
// 根据taskNo判断状态:不等于空或0时为运行状态
if (taskNo != 0 && taskNo != null) {
status = "运行";
}
Map<String, Integer> typeStatusCount = statusCount.get("SSJ");
typeStatusCount.put(status, typeStatusCount.getOrDefault(status, 0) + 1);
}
Map<String, Integer> typeStatusCount = statusCount.get("SSJ");
typeStatusCount.put(status, typeStatusCount.getOrDefault(status, 0) + 1);
}
MsgDdj msgDdj = new MsgDdj();
List<MsgDdj> msgDdjList = msgDdjService.selectMsgDdjList(msgDdj);
for (MsgDdj ddj : msgDdjList){
Long taskNo = ddj.getRwh();
String status = "其他";
if (taskNo!=0){
status = "运行";
DeviceTsj deviceTsj = new DeviceTsj();
List<DeviceTsj> TsjList = deviceTsjService.selectDeviceTsjList(deviceTsj);
if (TsjList != null && !TsjList.isEmpty()){
for (DeviceTsj tsj : TsjList){
Long taskNo = tsj.getRwh();
String status = "其他";
if (taskNo != 0 && taskNo != null){
status = "运行";
}
Map<String,Integer> typeStatusCount = statusCount.get("TSJ");
typeStatusCount.put(status,typeStatusCount.getOrDefault(status,0) + 1);
}
Map<String,Integer> typeStatusCount = statusCount.get("DDJ");
typeStatusCount.put(status,typeStatusCount.getOrDefault(status,0) + 1);
}
return AjaxResult.success(statusCount);
} catch (Exception e) {
return AjaxResult.error("获取设备状态分布数据失败");

View File

@@ -6,8 +6,8 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<resultMap type="DeviceSsj" id="DeviceSsjResult">
<result property="id" column="id" />
<result property="deviceCode " column="device_code " />
<result property="name " column="name " />
<result property="deviceCode" column="device_code" />
<result property="name" column="name" />
<result property="type" column="type" />
<result property="ipAddress" column="ip_address" />
<result property="plcDbReadAddress" column="plc_db_read_address" />
@@ -31,8 +31,8 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<select id="selectDeviceSsjList" parameterType="DeviceSsj" resultMap="DeviceSsjResult">
<include refid="selectDeviceSsjVo"/>
<where>
<if test="deviceCode != null and deviceCode != ''"> and device_code = #{deviceCode }</if>
<if test="name != null and name != ''"> and name = #{name }</if>
<if test="deviceCode != null and deviceCode != ''"> and device_code = #{deviceCode}</if>
<if test="name != null and name != ''"> and name = #{name}</if>
<if test="type != null and type != ''"> and type = #{type}</if>
<if test="ipAddress != null and ipAddress != ''"> and ip_address = #{ipAddress}</if>
<if test="plcDbReadAddress != null and plcDbReadAddress != ''"> and plc_db_read_address = #{plcDbReadAddress}</if>

View File

@@ -0,0 +1,28 @@
import request from '@/utils/request'
// 查询输送机列表
export function listSsj(query) {
return request({
url: '/device/ssj/list',
method: 'get',
params: query
})
}
// 查询四向车列表
export function srgvList(query) {
return request({
url: '/device/srgv/list',
method: 'get',
params: query
})
}
// 查询提升机列表
export function tsjList(query) {
return request({
url: '/device/tsj/list',
method: 'get',
params: query
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 426 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 398 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 477 KiB

View File

@@ -1,420 +1,282 @@
<template>
<div class="app-container">
<!-- 搜索和操作区域 -->
<!-- 7个表格区域 -->
<el-row :gutter="20" class="table-container">
<el-col :span="24" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">堆垛机监控</span>
<el-tag type="success" size="mini">总计: 6 台</el-tag>
<el-row :gutter="20">
<el-col v-for="dev in Sagv" :key="dev.id" :span="12">
<el-card shadow="always" class="device-card">
<div slot="header" class="card-header gradient">
<span class="device-title">{{ dev.name }}</span>
<div class="header-tags">
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
</div>
</div>
<el-table :data="ddjData" size="mini" style="width: 100%">
<el-table-column label="id" align="center" prop="id"/>
<el-table-column label="堆垛机名称" align="center" prop="name"/>
<el-table-column label="当前巷道" align="center" prop="dqxd"/>
<el-table-column label="任务号" align="center" prop="rwh"/>
<el-table-column label="阶段标志" align="center" prop="jdbz">
<template slot-scope="scope">
<dict-tag :options="dict.type.ddj_task_status" :value="scope.row.jdbz"/>
</template>
</el-table-column>
<el-table-column label="设备状态" align="center" prop="sbzt">
<template slot-scope="scope">
<dict-tag :options="dict.type.ddj_sbzt" :value="scope.row.sbzt"/>
</template>
</el-table-column>
<el-table-column label="操作方式" align="center" prop="czfs">
<template slot-scope="scope">
<dict-tag :options="dict.type.ddj_czfs" :value="scope.row.czfs"/>
</template>
</el-table-column>
<el-table-column label="允许下发" align="center" prop="yxxf">
<template slot-scope="scope">
<dict-tag :options="dict.type.ddj_yxxf" :value="scope.row.yxxf"/>
</template>
</el-table-column>
<el-table-column label="原排" align="center" prop="yph"/>
<el-table-column label="原列" align="center" prop="ylh"/>
<el-table-column label="原层" align="center" prop="ych"/>
<el-table-column label="目标排" align="center" prop="mbph"/>
<el-table-column label="目标列" align="center" prop="mblh"/>
<el-table-column label="目标层" align="center" prop="mbch"/>
<el-table-column label="心跳信号" align="center" prop="xtxh"/>
</el-table>
</div>
<el-row :gutter="10" class="card-body">
<el-col :span="16">
<el-row class="data-grid">
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
<span class="data-label">{{ item.label }}</span>
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
</el-col>
</el-row>
</el-col>
<el-col :span="8" class="image-wrap">
<el-image :src="imageUrl2" fit="contain" class="device-image" />
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" class="table-container">
<!-- 表格1:入库输送机 -->
<el-col :span="8" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">巷道1输送机</span>
<el-tag type="success" size="mini">{{ table1Data.length }}台</el-tag>
<el-row :gutter="20">
<el-col v-for="dev in SSJ" :key="dev.id" :span="12">
<el-card shadow="always" class="device-card">
<div slot="header" class="card-header gradient">
<span class="device-title">{{ dev.name }}</span>
<div class="header-tags">
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
</div>
</div>
<el-table :data="table1Data" size="mini" style="width: 100%">
<el-table-column label="设备编码" prop="deviceCode"/>
<!-- <el-table-column label="设备名称" prop="name"/>-->
<el-table-column label="任务号" prop="taskNo"/>
<el-table-column label="到位" prop="dw">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
</template>
</el-table-column>
<el-table-column label="空闲" prop="kx">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
</template>
</el-table-column>
<el-table-column label="异常" prop="exception">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
</template>
</el-table-column>
<el-table-column label="模式" prop="traySize">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<!-- 表格2:出库输送机 -->
<el-col :span="8" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">巷道2输送机</span>
<el-tag type="success" size="mini">{{ table2Data.length }}台</el-tag>
</div>
<el-table :data="table2Data" size="mini" style="width: 100%">
<el-table-column label="设备编码" prop="deviceCode"/>
<!-- <el-table-column label="设备名称" prop="name"/>-->
<el-table-column label="任务号" prop="taskNo"/>
<el-table-column label="到位" prop="dw">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
</template>
</el-table-column>
<el-table-column label="空闲" prop="kx">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
</template>
</el-table-column>
<el-table-column label="异常" prop="exception">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
</template>
</el-table-column>
<el-table-column label="模式" prop="traySize">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<!-- 表格3:分拣输送机 -->
<el-col :span="8" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">巷道3输送机</span>
<el-tag type="success" size="mini">{{ table3Data.length }}台</el-tag>
</div>
<el-table :data="table3Data" size="mini" style="width: 100%">
<el-table-column label="设备编码" prop="deviceCode"/>
<!-- <el-table-column label="设备名称" prop="name"/>-->
<el-table-column label="任务号" prop="taskNo"/>
<el-table-column label="到位" prop="dw">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
</template>
</el-table-column>
<el-table-column label="空闲" prop="kx">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
</template>
</el-table-column>
<el-table-column label="异常" prop="exception">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
</template>
</el-table-column>
<el-table-column label="模式" prop="traySize">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
</template>
</el-table-column>
</el-table>
</div>
<el-row :gutter="10" class="card-body">
<el-col :span="16">
<el-row class="data-grid">
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
<span class="data-label">{{ item.label }}</span>
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
</el-col>
</el-row>
</el-col>
<el-col :span="8" class="image-wrap">
<el-image :src="imageUrl1" fit="contain" class="device-image" />
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" class="table-container">
<!-- 表格4:提升机 -->
<el-col :span="8" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">巷道4输送机</span>
<el-tag type="success" size="mini">{{ table4Data.length }}台</el-tag>
<el-row :gutter="20">
<el-col v-for="dev in TSJ" :key="dev.id" :span="12">
<el-card shadow="always" class="device-card">
<div slot="header" class="card-header gradient">
<span class="device-title">{{ dev.name }}</span>
<div class="header-tags">
<el-tag size="small" type="info">{{ tagLeft(dev) }}</el-tag>
<el-tag size="small" type="success">{{ tagRight(dev) }}</el-tag>
</div>
</div>
<el-table :data="table4Data" size="mini" style="width: 100%">
<el-table-column label="设备编码" prop="deviceCode"/>
<!-- <el-table-column label="设备名称" prop="name"/>-->
<el-table-column label="任务号" prop="taskNo"/>
<el-table-column label="到位" prop="dw">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
</template>
</el-table-column>
<el-table-column label="空闲" prop="kx">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
</template>
</el-table-column>
<el-table-column label="异常" prop="exception">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
</template>
</el-table-column>
<el-table-column label="模式" prop="traySize">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<!-- 表格5:移载机 -->
<el-col :span="8" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">巷道5输送机</span>
<el-tag type="success" size="mini">{{ table5Data.length }}台</el-tag>
</div>
<el-table :data="table5Data" size="mini" style="width: 100%">
<el-table-column label="设备编码" prop="deviceCode"/>
<!-- <el-table-column label="设备名称" prop="name"/>-->
<el-table-column label="任务号" prop="taskNo"/>
<el-table-column label="到位" prop="dw">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
</template>
</el-table-column>
<el-table-column label="空闲" prop="kx">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
</template>
</el-table-column>
<el-table-column label="异常" prop="exception">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
</template>
</el-table-column>
<el-table-column label="模式" prop="traySize">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<!-- 表格6:旋转台 -->
<el-col :span="8" class="table-col">
<div class="table-card">
<div class="table-header">
<span class="table-title">巷道6输送机</span>
<el-tag size="success">{{ table6Data.length }}台</el-tag>
</div>
<el-table :data="table6Data" size="mini" style="width: 100%">
<el-table-column label="设备编码" prop="deviceCode"/>
<!-- <el-table-column label="设备名称" prop="name"/>-->
<el-table-column label="任务号" prop="taskNo"/>
<el-table-column label="到位" prop="dw">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
</template>
</el-table-column>
<el-table-column label="空闲" prop="kx">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
</template>
</el-table-column>
<el-table-column label="异常" prop="exception">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
</template>
</el-table-column>
<el-table-column label="模式" prop="traySize">
<template slot-scope="scope">
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
</template>
</el-table-column>
</el-table>
</div>
<el-row :gutter="10" class="card-body">
<el-col :span="16">
<el-row class="data-grid">
<el-col :span="12" v-for="item in dataItems(dev)" :key="item.key" class="data-item">
<span class="data-label">{{ item.label }}</span>
<span v-if="!item.dict" class="data-value" :class="valueClass(item.key)">{{ item.value }}</span>
<dict-tag v-else :options="dict.type[item.dict]" :value="item.value" />
</el-col>
</el-row>
</el-col>
<el-col :span="8" class="image-wrap">
<el-image :src="imageUrl3" fit="contain" class="device-image" />
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import {listSsj} from "@/api/device/ssj";
import "@/assets/styles/index.scss";
import {listDdj} from "@/api/device/ddj"
import "@/assets/styles/index.scss"
import ssjImg from "@/assets/images/ssj.png"
import agvImg from "@/assets/images/agv.png"
import tsjImg from "@/assets/images/tsj.png"
import { srgvList, tsjList, listSsj } from "@/api/device/monitor"
import { selectDictLabel } from "@/utils/ruoyi"
export default {
name: "deviceMonitor",
dicts: ['ddj_task_status', 'ddj_sbzt', 'ddj_czfs', 'ddj_yxxf', 'ddj_hczt', 'ssj_dw', 'ssj_kx', 'ssj_model', 'ssj_ex'],
dicts: ['srgv_work_phase','srgv_work_mode','srgv_status','srgv_err_msg','srgv_alarm','srgv_task_type','ssj_dw','ssj_kx','ssj_ex','tsj_zxjd','tsj_alarm'],
data() {
return {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 99
},
// 7个表格的模拟数据
table1Data: [], // 入库输送机
table2Data: [], // 出库输送机
table3Data: [], // 分拣输送机
table4Data: [], // 提升机
table5Data: [], // 移载机
table6Data: [], // 旋转台
ddjData: [], // 汇总统计
timer: null
};
imageUrl1: ssjImg,
imageUrl2: agvImg,
imageUrl3: tsjImg,
Sagv: [],
SSJ: [],
TSJ: [],
pollTimer: null
}
},
created() {
this.initMockData()
},
mounted() {
this.timer = setInterval(() => {
this.initMockData();
}, 1000); // 每1秒刷新一次
this.fetchAll()
this.pollTimer = setInterval(() => {
this.fetchAll()
}, 3000)
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
if (this.pollTimer) {
clearInterval(this.pollTimer)
this.pollTimer = null
}
},
methods: {
/** 初始化模拟数据 */
initMockData() {
listDdj().then(response => {
this.ddjData = response.rows
})
listSsj(this.queryParams).then(response => {
this.table1Data = response.rows.filter(item => item.deviceCode === 'L2001' || item.deviceCode === 'L2002' || item.deviceCode === 'L2007' || item.deviceCode === 'L2008')
this.table2Data = response.rows.filter(item => item.deviceCode === 'L2003' || item.deviceCode === 'L2004' || item.deviceCode === 'L2009' || item.deviceCode === 'L2010')
this.table3Data = response.rows.filter(item => item.deviceCode === 'L2005' || item.deviceCode === 'L2006' || item.deviceCode === 'L2011' || item.deviceCode === 'L2012')
this.table4Data = response.rows.filter(item => item.deviceCode === 'L1001' || item.deviceCode === 'L1002')
this.table5Data = response.rows.filter(item => item.deviceCode === 'L1003' || item.deviceCode === 'L1004')
this.table6Data = response.rows.filter(item => item.deviceCode === 'L1005' || item.deviceCode === 'L1006')
})
valueClass(key) {
if (key === 'rowDistanceKm') return 'value-warn'
if (key === 'columnDistanceKm') return 'value-accent'
return ''
},
tagLeft(dev) {
if (dev.kind === 'ssj') return '任务号 ' + (dev.raw.taskNo || '-')
if (dev.kind === 'srgv') return '任务号 ' + (dev.raw.taskNo || '-')
if (dev.kind === 'tsj') return '任务号 ' + (dev.raw.rwh || '-')
return ''
},
tagRight(dev) {
if (dev.kind === 'ssj') return '空闲 ' + (dev.raw.kx+"" || '-')
if (dev.kind === 'srgv') return '层 ' + (dev.raw.currFloor || '-')
if (dev.kind === 'tsj') return '层 ' + (dev.raw.dqcs || '-')
return ''
},
dataItems(dev) {
if (dev.kind === 'ssj') {
const d = dev.raw
return [
{ key: 'deviceCode', label: '设备编码', value: d.deviceCode },
{ key: 'trayCode', label: '托盘条码', value: d.trayCode },
{ key: 'taskNo', label: '任务号', value: d.taskNo },
{ key: 'traySize', label: '托盘尺寸', value: d.traySize },
{ key: 'allowPut', label: '允许放货', value: d.allowPut },
{ key: 'kx', label: '空闲', value: d.kx, dict: 'ssj_kx' },
{ key: 'dw', label: '到位', value: d.dw, dict: 'ssj_dw' },
{ key: 'exception', label: '异常', value: d.exception, dict: 'ssj_ex'},
]
}
if (dev.kind === 'srgv') {
const d = dev.raw
return [
// { key: 'deviceName', label: '设备名称', value: d.deviceName },
{ key: 'deviceId', label: '设备编码', value: d.deviceId },
{ key: 'currSite', label: '当前位置', value: d.currSite },
{ key: 'srcSite', label: '原位置', value: d.srcSite },
{ key: 'tarSite', label: '目标位置', value: d.tarSite },
{ key: 'taskNo', label: '任务号', value: d.taskNo },
{ key: 'taskType', label: '任务类型', value: d.taskType, dict: 'srgv_task_type' },
{ key: 'battery', label: '电量', value: d.battery },
{ key: 'workMode', label: '工作模式', value: d.workMode, dict: 'srgv_work_mode' },
{ key: 'status', label: '车状态', value: d.status, dict: 'srgv_status' },
{ key: 'workPhase', label: '执行阶段', value: d.workPhase, dict: 'srgv_work_phase' },
{ key: 'chargeFlag', label: '充电标志', value: d.chargeFlag },
{ key: 'alarm', label: '报警信息', value: d.alarm, dict: 'srgv_alarm' },
{ key: 'errMsg', label: '异常信息', value: d.errMsg, dict: 'srgv_err_msg' },
{ key: 'currFloor', label: '当前层数', value: d.currFloor }
]
}
if (dev.kind === 'tsj') {
const d = dev.raw
return [
{ key: 'name', label: '设备名称', value: d.name },
{ key: 'rwh', label: '任务号', value: d.rwh },
{ key: 'yxxf', label: '允许下发', value: d.yxxf },
{ key: 'dqcs', label: '当前层数', value: d.dqcs },
{ key: 'ych', label: '原层', value: d.ych },
{ key: 'mbch', label: '目标层', value: d.mbch },
{ key: 'hczt', label: '载货状态', value: d.hczt },
{ key: 'xtxh', label: '心跳信号', value: d.xtxh },
{ key: 'sbzt', label: '设备状态', value: d.sbzt, dict: 'tsj_alarm' },
{ key: 'jdbz', label: '执行阶段', value: d.jdbz, dict: 'tsj_zxjd' }
]
}
return []
},
fetchAll() {
Promise.all([srgvList({}), listSsj({}), tsjList({})]).then(([srgvRes, ssjRes, tsjRes]) => {
const srgvRows = srgvRes.rows || srgvRes.data || []
const ssjRows = ssjRes.rows || ssjRes.data || []
const tsjRows = tsjRes.rows || tsjRes.data || []
this.Sagv = srgvRows.map(it => ({ id: it.deviceId || it.guid || it.id, name: it.deviceName || it.name, kind: 'srgv', raw: it }))
this.SSJ = ssjRows.map(it => ({ id: it.id || it.deviceCode, name: it.name, kind: 'ssj', raw: it }))
this.TSJ = tsjRows.map(it => ({ id: it.id, name: it.name, kind: 'tsj', raw: it }))
console.log(srgvRows)
}).catch(() => {})
}
}
}
</script>
<style scoped>
.el-form-item >>> .el-form-item__label {
white-space: nowrap;
width: auto;
min-width: fit-content;
}
/* 表格容器样式 */
.table-container {
.device-card {
margin-bottom: 20px;
}
.table-col {
margin-bottom: 20px;
}
/* 表格卡片样式 */
.table-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.table-card:hover {
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
.card-body {
padding: 6px 8px;
}
/* 表格头部样式 */
.table-header {
.gradient {
background: linear-gradient(90deg, rgba(16,108,123,0.1), rgba(255,255,255,0));
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-tags {
display: flex;
gap: 6px;
}
.device-title {
font-weight: 600;
font-size: 16px;
}
.stat-bar {
margin: 4px 0 8px 0;
}
.stat-box {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-label {
margin-top: 6px;
font-size: 12px;
color: #606266;
}
.data-grid {
margin-top: 6px;
}
.data-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #ffffff; /* Element UI 主题蓝 */
color: rgb(0, 0, 0);
border-bottom: 1px solid #ebeef5;
padding: 8px 10px;
border-bottom: 1px dashed #eee;
}
.table-title {
font-size: 16px;
font-weight: 600;
margin: 0;
.data-label {
color: #909399;
}
/* 表格样式调整 */
.el-table {
border-radius: 0 0 8px 8px;
}
.el-table--mini {
font-size: 12px;
}
/* 响应式布局 */
@media (max-width: 1200px) {
.el-col-8 {
width: 50% !important;
}
}
@media (max-width: 768px) {
.el-col-8 {
width: 100% !important;
}
.table-header {
padding: 12px 15px;
}
.table-title {
font-size: 14px;
}
}
/* 标签样式优化 */
.el-tag {
.data-value {
color: #303133;
font-weight: 500;
}
/* 进度条样式 */
.el-progress {
.value-warn {
color: #e6a23c;
}
.value-accent {
color: #67c23a;
}
.image-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.device-image {
width: 100%;
height: 100%;
border-radius: 8px;
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.image-url {
margin-top: 8px;
font-size: 12px;
color: #999;
}
</style>

View File

@@ -3,20 +3,20 @@
<!-- 统计卡片 -->
<el-row :gutter="20" class="stats-row">
<el-col :span="5">
<el-col :span="4">
<el-card class="stats-card">
<div class="stats-content">
<div class="stats-icon ddj-icon">
<i class="el-icon-cpu"></i>
</div>
<div class="stats-info">
<div class="stats-number">{{ deviceStats.ddjCount }}</div>
<div class="stats-label">堆垛机设备总数</div>
<div class="stats-number">{{ deviceStats.srgvCount }}</div>
<div class="stats-label">四向车设备总数</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="5">
<el-col :span="4">
<el-card class="stats-card">
<div class="stats-content">
<div class="stats-icon ctu-icon">
@@ -29,7 +29,20 @@
</div>
</el-card>
</el-col>
<el-col :span="5">
<el-col :span="4">
<el-card class="stats-card">
<div class="stats-content">
<div class="stats-icon tsj-icon">
<i class="el-icon-upload"></i>
</div>
<div class="stats-info">
<div class="stats-number">{{ deviceStats.tsjCount }}</div>
<div class="stats-label">提升机设备总数</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="4">
<el-card class="stats-card">
<div class="stats-content">
<div class="stats-icon queue-icon">
@@ -42,7 +55,7 @@
</div>
</el-card>
</el-col>
<el-col :span="5">
<el-col :span="4">
<el-card class="stats-card">
<div class="stats-content">
<div class="stats-icon running-icon">
@@ -170,8 +183,8 @@ export default {
return {
// 统计数据
deviceStats: {
agvCount: 0,
ctuCount: 0,
srgvCount: 0,
tsjCount: 0,
ssjCount: 0
},
taskStats: {
@@ -414,21 +427,22 @@ export default {
if (response.code === 200) {
const statusData = response.data
// AGV数据
/*if (statusData.AGV) {
runningData[0] = statusData.AGV['运行'] || 0 // 运行
idleData[0] = statusData.AGV['其他'] || 0 // 其他
}*/
// CTU数据
if (statusData.DDJ) {
runningData[0] = statusData.DDJ['运行'] || 0 // 运行
idleData[0] = statusData.DDJ['其他'] || 0 // 其他
console.log(statusData)
// SRGV数据
if (statusData.SRGV) {
runningData[0] = statusData.SRGV['运行'] || 0 // 运行
idleData[0] = statusData.SRGV['其他'] || 0 // 其他
}
// SSJ数据
if (statusData.SSJ) {
runningData[1] = statusData.SSJ['运行'] || 0 // 运行
idleData[1] = statusData.SSJ['其他'] || 0 // 其他
}
// TSJ数据
if (statusData.TSJ) {
runningData[2] = statusData.TSJ['运行'] || 0 // 运行
idleData[2] = statusData.TSJ['其他'] || 0 // 其他
}
} else {
// 默认数据
runningData = [4, 2]
@@ -447,7 +461,7 @@ export default {
},
xAxis: {
type: 'category',
data: ['DDJ', 'SSJ']
data: ['SRGV', 'SSJ', 'TSJ']
},
yAxis: {
type: 'value'
@@ -483,7 +497,7 @@ export default {
},
xAxis: {
type: 'category',
data: ['AGV', 'DDJ', 'SSJ']
data: ['SRGV', 'SSJ', 'TSJ']
},
yAxis: {
type: 'value'
@@ -538,8 +552,8 @@ export default {
// 获取设备类型文本
getDeviceTypeText(type) {
const typeMap = {
'1': 'AGV',
'2': 'CTU',
'1': 'SRGV',
'2': 'TSJ',
'3': 'SSJ'
}
return typeMap[type] || this.$t('index.unknown') // 未知
@@ -618,8 +632,13 @@ export default {
background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
}
.tsj-icon {
background: linear-gradient(135deg, #d593fb 0%, #f557e0 100%);
}
.queue-icon {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
background: linear-gradient(135deg, #fbf993 0%, #f56957 100%);
}
.running-icon {