WCS监控图增加设备信息

Junjie

2023-05-20 3f3e2af96c938192cd679b67b3ebf5fafa9e54a1

WCS监控图增加设备信息

 src/main/java/com/zy/asrs/controller/ConsoleController.java

@@ -13,14 +13,12 @@
import com.zy.asrs.domain.enums.SiteStatusType;
import com.zy.asrs.domain.param.SystemSwitchParam;
import com.zy.asrs.domain.vo.*;
import com.zy.asrs.entity.BasCrnError;
import com.zy.asrs.entity.BasDevp;
import com.zy.asrs.entity.ChartBean;
import com.zy.asrs.entity.WrkMast;
import com.zy.asrs.entity.*;
import com.zy.asrs.mapper.BasCrnErrorMapper;
import com.zy.asrs.mapper.LocMastMapper;
import com.zy.asrs.mapper.ReportQueryMapper;
import com.zy.asrs.service.BasDevpService;
import com.zy.asrs.service.DeviceErrorService;
import com.zy.asrs.service.WrkMastService;
import com.zy.common.CodeRes;
import com.zy.core.CrnThread;
@@ -67,6 +65,8 @@
    private BasCrnErrorMapper basCrnErrorMapper;
    @Autowired
    private ReportQueryMapper reportQueryMapper;
    @Autowired
    private DeviceErrorService deviceErrorService;

    @PostMapping("/system/running/status")
    @ManagerAuth(memo = "系统运行状态")
@@ -198,6 +198,60 @@
        return R.ok().add(list);
    }

    /**
     * 获取设备详情
     */
    @GetMapping("/deviceInfo")
    @ManagerAuth
    public R getDeviceInfo() {
        ArrayList<HashMap<String, Object>> list = new ArrayList<>();
        for (CrnSlave crn : slaveProperties.getCrn()) {
            // 获取堆垛机信息
            CrnThread crnThread = (CrnThread) SlaveConnection.get(SlaveType.Crn, crn.getId());
            if (crnThread == null) {
                continue;
            }
            CrnProtocol crnProtocol = crnThread.getCrnProtocol();
            if (crnProtocol == null) {
                continue;
            }

            HashMap<String, Object> map = new HashMap<>();
            map.put("device", "堆垛机");
            map.put("deviceId", crn.getId());
            map.put("battery", "");
            map.put("error", crnProtocol.getFault());
            map.put("status", crnProtocol.getStatusType().desc);
            list.add(map);
        }

        for (DevpSlave devp : slaveProperties.getDevp()) {
            DeviceError deviceError = deviceErrorService.selectByDeviceAndDeviceId("devp", devp.getId());
            HashMap<String, Object> map = new HashMap<>();
            map.put("device", "输送线");
            map.put("deviceId", devp.getId());
            map.put("battery", "");
            map.put("error", deviceError != null);
            map.put("status", deviceError == null ? "" : deviceError.getMsg());
            list.add(map);
        }

        for (Slave scale : slaveProperties.getScale()) {
            DeviceError deviceError = deviceErrorService.selectByDeviceAndDeviceId("scale", scale.getId());
            HashMap<String, Object> map = new HashMap<>();
            map.put("device", "磅秤");
            map.put("deviceId", scale.getId());
            map.put("battery", "");
            map.put("error", deviceError != null);
            map.put("status", deviceError == null ? "" : deviceError.getMsg());
            list.add(map);
        }

        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("records", list);
        return R.ok().add(hashMap);
    }

    /****************************************************************/
    /************************** 详情操作 ******************************/
    /****************************************************************/

 src/main/webapp/static/wcs/css/render.css

@@ -527,3 +527,29 @@
    width: auto;

}
.main-part {
    position: relative;
    top: -50px;
    left: -150px;
    width: 100%;
    height: 100%;
}

.device-info {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 200px;
    background: rgba(255, 255, 255, 0.7);
    overflow: auto;
}

.device-info table td,.device-info table th{
    font-size: 12px !important;
}

.layui-table-cell {
    height: auto ;
    white-space: normal;
}

 src/main/webapp/static/wcs/js/console.js

@@ -148,4 +148,76 @@
    $("#line-total").empty()
    $("#line-total").html(total[e])
    // listenChange();
}
}


layui.config({
    base: baseUrl + "/static/wms/layui/lay/modules/"
}).use(['table', 'form'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var cache;

    // 数据渲染
    tableIns = table.render({
        elem: '#deviceInfo',
        headers: {token: localStorage.getItem('token')},
        url: baseUrl + '/console/deviceInfo',
        page: false,
        limit: 16,
        limits: [16, 30, 50, 100, 200, 500],
        even: true,
        cellMinWidth: 50,
        cols: [[
            {field: 'device', align: 'center', title: '设备'}
            , {field: 'deviceId', align: 'center', title: '编号'}
            , {field: 'battery', align: 'center', title: '电量'}
            , {field: 'error', align: 'center', title: '异常', templet: '#errorTpl'}
            , {field: 'status', align: 'center', title: '状态', width: 150}
        ]],
        request: {
            pageName: 'curr',
            pageSize: 'limit'
        },
        parseData: function (res) {
            return {
                'code': res.code,
                'msg': res.msg,
                'count': res.data.total,
                'data': res.data.records
            }
        },
        response: {
            statusCode: 200
        },
        done: function (res, curr, count) {
            $(".layui-table-tool").hide()
            $(".layui-table-view").css({"margin":"0px"})
            $(".layui-table-box").css({"padding-bottom":"0px"})

            cache = table.cache['deviceInfo'];
        }
    });

    setInterval(() => {
        tableReload()
    },10000)

    function tableReload() {
        $.ajax({
            url: baseUrl + "/console/deviceInfo",
            headers: {'token': localStorage.getItem('token')},
            contentType: 'application/json;charset=UTF-8',
            method: 'GET',
            traditional: true,
            success: function (res) {
                cache = res.data.records
                table.reload('deviceInfo',{
                    data: cache
                })
            }
        })
    }

});


 src/main/webapp/views/realtimeWatch/console.html

@@ -4,15 +4,28 @@
    <meta charset="UTF-8">
    <title>自动仓库wcs系统</title>
    <link rel="stylesheet" href="../../static/wcs/css/render.css">
    <script src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>
    <script src="../../static/wcs/js/layer/layer.js"></script>
    <link rel="stylesheet" href="../../static/wms/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/wms/css/cool.css" media="all">
    <link rel="stylesheet" href="../../static/wms/css/common.css" media="all">

<!--    <script src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>-->
<!--    <script src="../../static/wcs/js/layer/layer.js"></script>-->
    <script type="text/javascript" src="../../static/wms/js/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../static/wms/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../static/wms/js/common.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../static/wms/js/cool.js" charset="utf-8"></script>
    <!--地图json-->
    <script src="../../static/wcs/js/console.map.js"></script>
    <script src="../../static/wcs/js/console.js"></script>
    <script src="../../static/wcs/js/common.js"></script>


</head>
<script type="text/html" id="errorTpl">
    {{# if( d.error === false ){ }}
    <span name="level" class="layui-badge layui-badge-green">正常</span>
    {{# } else { }}
    <span name="level" class="layui-badge layui-badge-red">异常</span>
    {{# } }}
</script>
<body>
    <div id="main">
        <div class="head">
@@ -20,14 +33,17 @@
                <h1>自动仓库WCS监控图</h1>
                <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6>
            </div>
            <div class="head-right">
                <img src="../../static/wcs/images/zy-logo.png" alt="中扬" height="44" width="80">
            </div>
        </div>
        <!-- 货架 + 堆垛机 + 入库站点 -->
        <div class="main-part">

        </div>

        <!--设备列表-->
        <div class="device-info">
            <table class="layui-hide" id="deviceInfo" lay-filter="deviceInfo"></table>
        </div>

        <div id="body">
            <!-- 总开关 -->
            <div class="system-state">