代码更新

lms/nladmin-system/src/main/java/org/nl/AppRun.java

@@ -76,7 +76,7 @@ public class AppRun {
     public String index() {
         return "Backend service started successfully";
     }
-    @GetMapping("/w") // 最后可以去掉这个方法
+    @GetMapping("/w") // 立库监控初始化
     @SaIgnore
     public String index2() {
         // 采用循环+判断进行铺设图标, 可以通过舞台编辑协助完成
@@ -93,15 +93,15 @@ public class AppRun {
         int nodeSizeH = 50;
         for (int i = 2; i < 23; i=i+2) { // 第几块，每两块为一块
             // 获取列数col_num
-            System.out.println( (i>=10?"1":"10") + i);
+            System.out.println( (i>=10?"3":"30") + i);
             JSONObject jsonObject = WQL.getWO("ss").addParamMap(MapOf.of("flag", "1"
-                    , "block_num",  (i>=10?"1":"10") + i)).process().uniqueResult(0);
+                    , "block_num",  (i>=10?"3":"30") + i)).process().uniqueResult(0);
             int num = Integer.parseInt(jsonObject.getString("num"));
             for (int j = 1; j <= num; j++) {// 层数
                 // 获取2，1....块的数据
-                JSONArray array = attrTab.query("block_num IN ('" + (i>=10?"1":"10") + i + "','" +
+                JSONArray array = attrTab.query("block_num IN ('" + (i>=10?"3":"30") + i + "','" +
-                        ((i-1)>=10?"1":"10") + (i - 1) + "') AND " +
+                        ((i-1)>=10?"3":"30") + (i - 1) + "') AND " +
-                        "layer_num = 1 AND col_num = " + j, "block_num DESC, row_num DESC").getResultJSONArray(0);
+                        "layer_num = 3 AND col_num = " + j, "block_num DESC, row_num DESC").getResultJSONArray(0);
                 for (int k = 0; k < array.size(); k++) { // 1,2...块的每列数据
                     JSONObject object = array.getJSONObject(k);
 
@@ -178,7 +178,58 @@ public class AppRun {
         }
         save.put("nodes", nodes);
         save.put("edges", edges);
-        JSONObject jsonObject = stageTab.query("stage_code = 'AS'").uniqueResult(0);
+        JSONObject jsonObject = stageTab.query("stage_code = 'AS_3'").uniqueResult(0);
+        jsonObject.put("stage_data", save);
+        stageTab.update(jsonObject);
+        return "Backend service started successfully";
+    }
+
+    @GetMapping("/f") // 发货区监控初始化
+    @SaIgnore
+    public String index3() {
+        // 采用循环+判断进行铺设图标, 可以通过舞台编辑协助完成
+        WQLObject stageTab = WQLObject.getWQLObject("stage");
+        WQLObject attrTab = WQLObject.getWQLObject("sch_base_point");
+        JSONObject save = new JSONObject();
+        JSONArray nodes = new JSONArray();
+        JSONArray edges = new JSONArray();
+        int x = 50; // 首个位置
+        int y = 50;
+        int step = 5;
+        String type = "html-node";
+        int nodeSizeW = 50;
+        int nodeSizeH = 50;
+        for (int i = 1; i <= 4; i++) {
+
+            JSONArray resultJSONArray = attrTab.query("col_num = '" + i + "' and point_type = '9' and layer_num = '1' order by row_num ASC").getResultJSONArray(0);
+
+            for (int j = 0; j < resultJSONArray.size(); j++) {
+                JSONObject json = resultJSONArray.getJSONObject(j);
+
+                JSONObject node = new JSONObject();
+                node.put("id", IdUtil.getSnowflake(1,1).nextIdStr());
+                node.put("type", type);
+                node.put("x", x);
+                node.put("y", y);
+                JSONObject properties = new JSONObject();
+                JSONObject nodeSize = new JSONObject();
+                nodeSize.put("width", nodeSizeW);
+                nodeSize.put("height", nodeSizeH);
+                properties.put("nodeSize", nodeSize);
+                properties.put("struct_id", json.getString("point_id")); // 灵活配置，其他为固定参数
+                node.put("properties", properties);
+                node.put("zIndex", "2023");
+                x = x + step + nodeSizeW;
+                nodes.add(node);
+
+            }
+
+            x = 50;
+            y = y + step + nodeSizeH;
+        }
+        save.put("nodes", nodes);
+        save.put("edges", edges);
+        JSONObject jsonObject = stageTab.query("stage_code = 'FS'").uniqueResult(0);
         jsonObject.put("stage_data", save);
         stageTab.update(jsonObject);
         return "Backend service started successfully";

lms/nladmin-system/src/main/java/org/nl/modules/mnt/service/AutoRiKuService.java

@@ -0,0 +1,28 @@
+package org.nl.modules.mnt.service;
+
+
+import com.alibaba.fastjson.JSONObject;
+
+public interface AutoRiKuService {
+
+    /**
+     * 获取立库一层货位
+     * */
+    JSONObject getOnePoint();
+
+    /**
+     * 获取立库二层货位
+     * */
+    JSONObject getTwoPoint();
+
+    /**
+     * 获取立库三层货位
+     * */
+    JSONObject getThreePoint();
+
+    /**
+     * 获取全部货位
+     * */
+    JSONObject getAllPoint();
+
+}

lms/nladmin-system/src/main/java/org/nl/modules/mnt/service/impl/AutoRiKuServiceImpl.java

@@ -0,0 +1,173 @@
+package org.nl.modules.mnt.service.impl;
+
+import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
+import lombok.RequiredArgsConstructor;
+import org.nl.modules.mnt.service.AutoRiKuService;
+import org.nl.modules.wql.core.bean.WQLObject;
+import org.springframework.stereotype.Service;
+
+@Service
+@RequiredArgsConstructor
+public class AutoRiKuServiceImpl implements AutoRiKuService {
+    @Override
+    public JSONObject getOnePoint() {
+        WQLObject attrTab = WQLObject.getWQLObject("st_ivt_structattr");
+
+        JSONObject jsonAll = new JSONObject();
+        JSONArray dataArr = new JSONArray();
+
+        // 获取有货货位
+        JSONArray haveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') <> '' and layer_num = '1' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonHave = new JSONObject();
+        jsonHave.put("name", "有货");
+        jsonHave.put("value", haveArr.size());
+
+        // 获取无货货位
+        JSONArray notHaveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') = '' and layer_num = '1' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonNotHave = new JSONObject();
+        jsonNotHave.put("name", "空闲");
+        jsonNotHave.put("value", notHaveArr.size());
+
+        // 获取禁用货位
+        JSONArray usedArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and is_used = '0' and IFNULL(storagevehicle_code,'') = '' and layer_num = '1' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonUsed = new JSONObject();
+        jsonUsed.put("name", "禁用");
+        jsonUsed.put("value", usedArr.size());
+
+        dataArr.add(jsonHave);
+        dataArr.add(jsonNotHave);
+        dataArr.add(jsonUsed);
+
+        int num = haveArr.size() + notHaveArr.size() + usedArr.size();
+        jsonAll.put("pieSubTest", "总仓位:"+num);
+        jsonAll.put("data", dataArr);
+        jsonAll.put("name", "立库1层统计");
+
+        return jsonAll;
+    }
+
+    @Override
+    public JSONObject getTwoPoint() {
+        WQLObject attrTab = WQLObject.getWQLObject("st_ivt_structattr");
+
+        JSONObject jsonAll = new JSONObject();
+        JSONArray dataArr = new JSONArray();
+
+        // 获取有货货位
+        JSONArray haveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') <> '' and layer_num = '2' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonHave = new JSONObject();
+        jsonHave.put("name", "有货");
+        jsonHave.put("value", haveArr.size());
+
+        // 获取无货货位
+        JSONArray notHaveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') = '' and layer_num = '2' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonNotHave = new JSONObject();
+        jsonNotHave.put("name", "空闲");
+        jsonNotHave.put("value", notHaveArr.size());
+
+        // 获取禁用货位
+        JSONArray usedArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and is_used = '0' and IFNULL(storagevehicle_code,'') = '' and layer_num = '2' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonUsed = new JSONObject();
+        jsonUsed.put("name", "禁用");
+        jsonUsed.put("value", usedArr.size());
+
+        dataArr.add(jsonHave);
+        dataArr.add(jsonNotHave);
+        dataArr.add(jsonUsed);
+
+        int num = haveArr.size() + notHaveArr.size() + usedArr.size();
+        jsonAll.put("pieSubTest", "总仓位:"+num);
+        jsonAll.put("data", dataArr);
+        jsonAll.put("name", "立库2层统计");
+
+        return jsonAll;
+    }
+
+    @Override
+    public JSONObject getThreePoint() {
+        WQLObject attrTab = WQLObject.getWQLObject("st_ivt_structattr");
+
+        JSONObject jsonAll = new JSONObject();
+        JSONArray dataArr = new JSONArray();
+
+        // 获取有货货位
+        JSONArray haveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') <> '' and layer_num = '3' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonHave = new JSONObject();
+        jsonHave.put("name", "有货");
+        jsonHave.put("value", haveArr.size());
+
+        // 获取无货货位
+        JSONArray notHaveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') = '' and layer_num = '3' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonNotHave = new JSONObject();
+        jsonNotHave.put("name", "空闲");
+        jsonNotHave.put("value", notHaveArr.size());
+
+        // 获取禁用货位
+        JSONArray usedArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and is_used = '0' and IFNULL(storagevehicle_code,'') = '' and layer_num = '3' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonUsed = new JSONObject();
+        jsonUsed.put("name", "禁用");
+        jsonUsed.put("value", usedArr.size());
+
+        dataArr.add(jsonHave);
+        dataArr.add(jsonNotHave);
+        dataArr.add(jsonUsed);
+
+        int num = haveArr.size() + notHaveArr.size() + usedArr.size();
+        jsonAll.put("pieSubTest", "总仓位:"+num);
+        jsonAll.put("data", dataArr);
+        jsonAll.put("name", "立库3层统计");
+
+        return jsonAll;
+    }
+
+    @Override
+    public JSONObject getAllPoint() {
+        WQLObject attrTab = WQLObject.getWQLObject("st_ivt_structattr");
+
+        JSONObject jsonAll = new JSONObject();
+        JSONArray dataArr = new JSONArray();
+
+        // 获取有货货位
+        JSONArray haveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') <> ''  and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonHave = new JSONObject();
+        jsonHave.put("name", "有货");
+        jsonHave.put("value", haveArr.size());
+
+        // 获取无货货位
+        JSONArray notHaveArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and IFNULL(storagevehicle_code,'') = '' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonNotHave = new JSONObject();
+        jsonNotHave.put("name", "空闲");
+        jsonNotHave.put("value", notHaveArr.size());
+
+        // 获取禁用货位
+        JSONArray usedArr = attrTab.query("sect_code in ('ZC01','KTP01','ZZ01','PD01') and is_used = '0' and IFNULL(storagevehicle_code,'') = '' and is_delete = '0'").getResultJSONArray(0);
+
+        JSONObject jsonUsed = new JSONObject();
+        jsonUsed.put("name", "禁用");
+        jsonUsed.put("value", usedArr.size());
+
+        dataArr.add(jsonHave);
+        dataArr.add(jsonNotHave);
+        dataArr.add(jsonUsed);
+
+        int num = haveArr.size() + notHaveArr.size() + usedArr.size();
+        jsonAll.put("pieSubTest", "总仓位:"+num);
+        jsonAll.put("data", dataArr);
+        jsonAll.put("name", "立库汇总统计");
+
+        return jsonAll;
+    }
+
+}

lms/nladmin-system/src/main/java/org/nl/modules/mnt/websocket/AutoWebSocketRiKu.java

@@ -0,0 +1,40 @@
+package org.nl.modules.mnt.websocket;
+
+import com.alibaba.fastjson.JSONObject;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.nl.modules.logging.annotation.Log;
+import org.nl.modules.mnt.service.AutoRiKuService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.io.IOException;
+import java.util.Map;
+
+@RestController
+@RequiredArgsConstructor
+@Api(tags = "定时任务")
+@RequestMapping("/api/autoWeb")
+@Slf4j
+public class AutoWebSocketRiKu {
+    @Autowired
+    private AutoRiKuService autoRiKuService;
+
+    @PostMapping("/query")
+    @Log("查询数据")
+    @ApiOperation("查询数据")
+    public ResponseEntity<Object> query(){
+        JSONObject data = new JSONObject();
+        data.put("one",autoRiKuService.getOnePoint());
+        data.put("two",autoRiKuService.getTwoPoint());
+        data.put("three",autoRiKuService.getThreePoint());
+        data.put("all",autoRiKuService.getAllPoint());
+
+        return new ResponseEntity<>(data, HttpStatus.OK);
+    }
+}

lms/nladmin-system/src/main/java/org/nl/wms/basedata/master/service/dto/CustomerbaseDto.java

@@ -194,4 +194,9 @@ public class CustomerbaseDto implements Serializable {
      * 送货单明细数
      */
     private String shd_dtl_num;
+
+    /**
+     * 是否自动贴标
+     */
+    private String is_auto_table;
 }

lms/nladmin-system/src/main/java/org/nl/wms/basedata/st/rest/StructattrController.java

@@ -82,4 +82,19 @@ public class StructattrController {
         JSONArray jsonArray = JSONArray.parseArray(json);
         return new ResponseEntity<>(structattrService.getStructByCodes(jsonArray), HttpStatus.OK);
     }
+
+    @PostMapping("/getStructByCodesFs")
+    @Log("获取点位信息")
+    @ApiOperation("获取点位信息")
+    public ResponseEntity<Object> getStructByCodesFs(@RequestBody String json){
+        JSONArray jsonArray = JSONArray.parseArray(json);
+        return new ResponseEntity<>(structattrService.getStructByCodesFs(jsonArray), HttpStatus.OK);
+    }
+
+    @PostMapping("/unLockPoint")
+    @Log("解锁点位")
+    @ApiOperation("解锁点位")
+    public ResponseEntity<Object> unLockPoint(@RequestBody JSONObject whereJson){
+        return new ResponseEntity<>(structattrService.unLockPoint(whereJson), HttpStatus.OK);
+    }
 }

lms/nladmin-system/src/main/java/org/nl/wms/basedata/st/service/StructattrService.java

@@ -75,4 +75,16 @@ public interface StructattrService {
      * @return
      */
     JSONArray getStructByCodes(JSONArray json);
+
+    /**
+     * 获取点位信息
+     * @return
+     */
+    JSONArray getStructByCodesFs(JSONArray json);
+
+    /**
+     * 解锁点位
+     * @return
+     */
+    JSONObject unLockPoint(JSONObject whereJson);
 }

lms/nladmin-system/src/main/java/org/nl/wms/basedata/st/service/impl/StructattrServiceImpl.java

@@ -289,4 +289,60 @@ public class StructattrServiceImpl implements StructattrService {
         return arr;
     }
 
+    @Override
+    public JSONArray getStructByCodesFs(JSONArray jsonArray) {
+        WQLObject attrTab = WQLObject.getWQLObject("sch_base_point");
+        JSONArray arr = new JSONArray();
+        for (int i = 0; i < jsonArray.size(); i++) {
+            JSONObject obj = new JSONObject();
+            JSONObject js = jsonArray.getJSONObject(i);
+            String struct_id = js.getString("struct_id");
+
+            if (ObjectUtil.isEmpty(struct_id)) continue;
+
+            int struct_status = 2;
+            // 获取信息 1蓝色空载具 2黄色木箱 3绿色空位 4灰色禁用
+            // 查找详细信息， 这里可能是有多条数据
+            JSONArray array = WQL
+                    .getWO("QST_STRUCTATTR")
+                    .addParamMap(MapOf.of("struct_id", struct_id, "flag", "2"))
+                    .process()
+                    .getResultJSONArray(0);
+            // 获取仓位表中的信息
+            JSONObject strInfo = attrTab
+                    .query("point_id = '" + struct_id + "'")
+                    .uniqueResult(0);
+            if (ObjectUtil.isEmpty(strInfo.getString("vehicle_code"))) {
+                // 空位
+                struct_status = 3;
+            }
+
+            // 剩余层数货位信息没统计，统计可以用obj.put(key, value)返给前端，前端在initStatus()就可以遍历去获取，给节点赋值
+            obj.put("data", array);
+            obj.put("struct_status", struct_status);
+            obj.put("struct_id", strInfo.getString("point_id"));
+            obj.put("struct_code", strInfo.getString("point_code"));
+            obj.put("id", js.getString("id")); // 设备不存在就只保留id，方便前端查看
+            arr.add(obj);
+        }
+        return arr;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public JSONObject unLockPoint(JSONObject whereJson) {
+        WQLObject pointTab = WQLObject.getWQLObject("sch_base_point");
+
+        String point_code = whereJson.getString("point_code");
+        JSONObject jsonPoint = pointTab.query("point_code = '" + point_code + "'").uniqueResult(0);
+
+        jsonPoint.put("point_status", "1");
+        jsonPoint.put("vehicle_code", "");
+        jsonPoint.put("lock_type", "1");
+
+        pointTab.update(jsonPoint);
+
+        return null;
+    }
+
 }

lms/nladmin-ui/src/layout/components/Sidebar/SidebarItem.vue

@@ -62,13 +62,13 @@ export default {
         if (item.hidden) {
           return false
         } else {
-          // Temp set(will be used if only has one showing child)
+          // Temp set(will be used if only has rikuone showing child)
           this.onlyOneChild = item
           return true
         }
       })
 
-      // When there is only one child router, the child router is displayed by default
+      // When there is only rikuone child router, the child router is displayed by default
       if (showingChildren.length === 1) {
         return true
       }

lms/nladmin-ui/src/utils/index.js

@@ -185,7 +185,7 @@ export function html2Text(val) {
 }
 
 /**
- * Merges two objects, giving the last one precedence
+ * Merges two objects, giving the last rikuone precedence
  * @param {Object} target
  * @param {(Object|Array)} source
  * @returns {Object}

lms/nladmin-ui/src/views/system/build/utils/index.js

@@ -154,7 +154,7 @@ export function html2Text(val) {
 }
 
 /**
- * Merges two objects, giving the last one precedence
+ * Merges two objects, giving the last rikuone precedence
  * @param {Object} target
  * @param {(Object|Array)} source
  * @returns {Object}

lms/nladmin-ui/src/views/system/monitor/device/structStage.js

@@ -7,3 +7,26 @@ export function getStructByCodes(data) { // 获取仓位信息
     data: data
   })
 }
+
+export function getStructByCodesFs(data) { // 获取点位信息
+  return request({
+    url: 'api/structattr/getStructByCodesFs',
+    method: 'post',
+    data: data
+  })
+}
+
+export function unLockPoint(data) { // 解锁点位
+  return request({
+    url: 'api/structattr/unLockPoint',
+    method: 'post',
+    data: data
+  })
+}
+
+export function autoWeb() { // 查询立库监控数据
+  return request({
+    url: 'api/autoWeb/query',
+    method: 'post'
+  })
+}

lms/nladmin-ui/src/views/wms/riku/rikuone/index.vue

@@ -43,10 +43,11 @@ import { getStructByCodes } from '@/views/system/monitor/device/structStage'
 let data = {}
 let lf = ''
 export default {
-  name: 'MonitorDevice',
+  // 立库监控1层
+  name: 'Ibraryone',
   data() {
     return {
-      stageParam: 'AS', // 舞台参数
+      stageParam: 'AS_1', // 舞台参数
       dialogDeviceMsgVisible: false,
       device_code: null,
       tops: '20vh',
@@ -148,10 +149,10 @@ export default {
         this.initStatus()
       })
       // todo: 定时器
-      // this.timer = setInterval(() => { // 定时刷新设备的状态信息
+      this.timer = setInterval(() => { // 定时刷新设备的状态信息
-      //   console.log('定时器启动')
+        console.log('定时器启动')
-      //   this.initStatus()
+        this.initStatus()
-      // }, 10000)
+      }, 10000)
     },
     initStatus() { // 初始化数据
       let resion = {}

lms/nladmin-ui/src/views/wms/riku/rikustat/PieChart.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.setOptions()
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        title: {
+          text: this.chartData.name,
+          subtext: this.chartData.pieSubTest,
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: ['有货', '空闲', '禁用']
+        },
+        color: ['#e0a803', '#27aa0f', '#d2d1d1'], // 修改图饼颜色
+        series: [
+          {
+            name: this.chartData.name,
+            type: 'pie',
+            radius: '70%',
+            center: ['50%', '58%'],
+            data: this.chartData.data,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0,0,0,0.5)'
+              }
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

lms/nladmin-ui/src/views/wms/riku/rikustat/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-editor-container">
+
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <div class="chart-wrapper">
+            <pie-chart :chart-data="allList" />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <pie-chart :chart-data="oneList" />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <pie-chart :chart-data="twoList" />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <pie-chart :chart-data="threeList" />
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import PieChart from '@/views/wms/riku/rikustat/PieChart'
+import { autoWeb } from '@/views/system/monitor/device/structStage'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    PieChart
+  },
+  data() {
+    return {
+      allList: {},
+      oneList: {},
+      twoList: {},
+      threeList: {}
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    // js提供的clearInterval方法用来清除定时器
+    console.log('定时器销毁')
+    clearInterval(this.timer)
+  },
+  methods: {
+    init: function() {
+      this.initStageData()
+    },
+    initStageData() {
+      this.timer = setInterval(() => { // 定时刷新设备的状态信息
+        console.log('定时器启动')
+        this.initStatus()
+      }, 2000)
+    },
+    initStatus() {
+      autoWeb().then(res => {
+        debugger
+        this.oneList = res.one
+        this.twoList = res.two
+        this.threeList = res.three
+        this.allList = res.all
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+      position: absolute;
+      top: 0;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
+  .warp {
+    height: 365px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+      }
+    }
+  }
+</style>

lms/nladmin-ui/src/views/wms/riku/rikutthree/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <el-row>
+      <div id="container" className="container" />
+    </el-row>
+    <!--点击设备显示信息-->
+    <el-dialog
+      id="dialogs"
+      title="仓位信息"
+      class="newDialog"
+      :visible.sync="dialogDeviceMsgVisible"
+      width="22%"
+      :top="tops"
+      :show-close="false"
+      :modal="false"
+    >
+      <el-table
+        :data="arr"
+        style="width: 100%"
+        max-height="500px"
+      >
+        <el-table-column
+          prop="name"
+          label="监控项"
+        />
+        <el-table-column
+          prop="value"
+          label="当前值"
+        />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import crudStage from '@/api/logicflow/stage'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+
+import { LogicFlow } from '@logicflow/core'
+import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
+import { getStructByCodes } from '@/views/system/monitor/device/structStage'
+let data = {}
+let lf = ''
+export default {
+  // 立库监控1层
+  name: 'Ibraryone',
+  data() {
+    return {
+      stageParam: 'AS_3', // 舞台参数
+      dialogDeviceMsgVisible: false,
+      device_code: null,
+      tops: '20vh',
+      stage_code: '',
+      stageSelectList: [],
+      arr: [], // 显示数组
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      dialogFormVisible4: false,
+      form: {
+        device_code: '',
+        hasGoodStatus: null,
+        barcode: '',
+        suspended: null,
+        material_type: '',
+        requireSucess: '',
+        fullrequireSucess: ''
+      },
+      allStructMsg: [],
+      msgTop: '200px',
+      msgLeft: '200px'
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    // js提供的clearInterval方法用来清除定时器
+    console.log('定时器销毁')
+    clearInterval(this.timer)
+  },
+  methods: {
+    // 流程图初始化
+    init() {
+      // 初始化配置
+      lf = new LogicFlow({
+        overlapMode: 1,
+        container: document.querySelector('#container'), // 容器
+        // 画布配置
+        // width: window.innerWidth, // 宽度
+        height: window.innerHeight, // 高度
+        grid: { // 不用格子直接显示，使用背景
+          visible: false,
+          type: 'mesh',
+          size: 5
+        },
+        background: {
+          // backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
+          backgroundRepeat: 'repeat'
+        },
+        adjustEdge: false,
+        adjustEdgeMiddle: false,
+        adjustEdgeStartAndEnd: false,
+        adjustNodePosition: false,
+        hideAnchors: true,
+        nodeTextEdit: false,
+        edgeTextEdit: false
+      })
+      lf.setTheme(
+        {
+          baseEdge: { strokeWidth: 1 },
+          baseNode: { strokeWidth: 1 },
+          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
+          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
+        }
+      )
+      // 注册自定义元素
+      registerCustomElement(lf)
+      // 删除默认的右键菜单
+      lf.extension.menu.setMenuConfig({
+        nodeMenu: false
+      })
+      lf.on('node:click', (data, e) => { // 鼠标点击节点
+        // 展开显示设备信息 todo: 1
+        if (data.data.type !== 'pro-rect' && data.data.type !== 'pro-circle' && data.data.type !== 'triangle' && data.data.type !== 'rect-radius') {
+          if (data.data.properties.struct_id) {
+            this.moveShow(data.data) // 传递节点数据，用来获取id做比对
+            this.dialogDeviceMsgVisible = true
+            this.struct_id = data.data.properties.struct_id // ?暂时没用
+            this.tops = data.e.y + 'px'
+            document.getElementsByClassName('el-dialog')[0].style.marginLeft = data.e.x + 'px'
+          }
+        }
+      })
+      // lf.on('node:mouseleave', (data, e) => {
+      //   this.dialogDeviceMsgVisible = false
+      // })
+      // 开始渲染
+      lf.render(data)
+      this.initStageData()
+    },
+    initStageData() {
+      // 获取舞台编码
+      crudStage.getNewStageDataByCode(this.stageParam).then(res => {
+        data = JSON.parse(res.stage_data)
+        lf.render(data)
+        this.initStatus()
+      })
+      // todo: 定时器
+      this.timer = setInterval(() => { // 定时刷新设备的状态信息
+        console.log('定时器启动')
+        this.initStatus()
+      }, 10000)
+    },
+    initStatus() { // 初始化数据
+      let resion = {}
+      resion = lf.getGraphData().nodes.map(item => ({ id: item.id, struct_id: item.properties.struct_id }))
+      getStructByCodes(resion).then(res => {
+        this.allStructMsg = res
+        // 实时设置状态信息
+        for (var item of res) { // 循环设置属性
+          if (item.struct_status != undefined) {
+            lf.setProperties(item.id, {
+              struct_status: item.struct_status
+            })
+          }
+        }
+        // 设置动态实时显示设备信息
+        const { nodes } = lf.getSelectElements() // 获取选中的节点
+        if (nodes.length === 1) { // 因为是定时器，没有选中则不用实时更新显示数据
+          this.moveShow(nodes[0]) // 监控模式下不可能托选，因此就只有一个数据
+        }
+      })
+    },
+    moveShow(nodeData) { // 点击之后显示出来的数据----只需要设备信息
+      let item = ''
+      // 查找点击节点的id
+      item = this.allStructMsg.find((structMsg) => structMsg.id === nodeData.id)
+      this.arr = [] // 清空
+      if (item.struct_id && item.data) { // item.data是数组
+        this.arr = [
+          { name: '货位编号', value: item.struct_code }
+        ]
+        const data1 = item.data[0] // 至少有一条
+        const data = item.data // 总的data数据
+        // 以下是设置参数显示值
+        for (const val in data1) {
+          if (val === 'storagevehicle_code' && data1.storagevehicle_code) {
+            const obj = { name: '木箱号', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'quanlity_in_box' && data1.quanlity_in_box) {
+            const obj = { name: '子卷数', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'sale_order_name' && data1.sale_order_name) {
+            const obj = { name: '订单号', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'product_description' && data1.product_description) {
+            const obj = { name: '物料', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'box_weight' && data1.box_weight) {
+            const obj = { name: '木箱总重', value: data1[val] }
+            this.arr.push(obj)
+          }
+        }
+        if (data.length > 1) { // 显示子卷
+          for (let i = 0; i < data.length; i++) {
+            let container_name
+            let net_weight
+            for (const val in data[i]) {
+              if (val === 'container_name' && data[i].container_name) {
+                container_name = data[i][val]
+              }
+              if (val === 'net_weight' && data[i].net_weight) {
+                net_weight = data[i][val]
+              }
+            }
+            if (container_name && net_weight) {
+              const obj = { name: container_name, value: net_weight }
+              this.arr.push(obj)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+html, body {
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped>
+.container {
+  background-color: #f8f9fa;
+  height: 100%;
+}
+.newDialog /deep/ .el-dialog__header {
+  padding: 1vh 1vw 0 1vw;
+}
+.newDialog /deep/ .el-dialog__body {
+  padding: 1vh 1vw;
+}
+.toolbar-sty {
+  position: absolute;
+  margin-top: 5px;
+  top: 0;
+  padding: 5px;
+  left: 30px;
+  height: 45px;
+  /*width: 310px;*/
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 10;
+  background: #e5e5e5;
+}
+</style>

lms/nladmin-ui/src/views/wms/riku/rikutwo/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <el-row>
+      <div id="container" className="container" />
+    </el-row>
+    <!--点击设备显示信息-->
+    <el-dialog
+      id="dialogs"
+      title="仓位信息"
+      class="newDialog"
+      :visible.sync="dialogDeviceMsgVisible"
+      width="22%"
+      :top="tops"
+      :show-close="false"
+      :modal="false"
+    >
+      <el-table
+        :data="arr"
+        style="width: 100%"
+        max-height="500px"
+      >
+        <el-table-column
+          prop="name"
+          label="监控项"
+        />
+        <el-table-column
+          prop="value"
+          label="当前值"
+        />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import crudStage from '@/api/logicflow/stage'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+
+import { LogicFlow } from '@logicflow/core'
+import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
+import { getStructByCodes } from '@/views/system/monitor/device/structStage'
+let data = {}
+let lf = ''
+export default {
+  // 立库监控1层
+  name: 'Ibraryone',
+  data() {
+    return {
+      stageParam: 'AS_2', // 舞台参数
+      dialogDeviceMsgVisible: false,
+      device_code: null,
+      tops: '20vh',
+      stage_code: '',
+      stageSelectList: [],
+      arr: [], // 显示数组
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      dialogFormVisible4: false,
+      form: {
+        device_code: '',
+        hasGoodStatus: null,
+        barcode: '',
+        suspended: null,
+        material_type: '',
+        requireSucess: '',
+        fullrequireSucess: ''
+      },
+      allStructMsg: [],
+      msgTop: '200px',
+      msgLeft: '200px'
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    // js提供的clearInterval方法用来清除定时器
+    console.log('定时器销毁')
+    clearInterval(this.timer)
+  },
+  methods: {
+    // 流程图初始化
+    init() {
+      // 初始化配置
+      lf = new LogicFlow({
+        overlapMode: 1,
+        container: document.querySelector('#container'), // 容器
+        // 画布配置
+        // width: window.innerWidth, // 宽度
+        height: window.innerHeight, // 高度
+        grid: { // 不用格子直接显示，使用背景
+          visible: false,
+          type: 'mesh',
+          size: 5
+        },
+        background: {
+          // backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
+          backgroundRepeat: 'repeat'
+        },
+        adjustEdge: false,
+        adjustEdgeMiddle: false,
+        adjustEdgeStartAndEnd: false,
+        adjustNodePosition: false,
+        hideAnchors: true,
+        nodeTextEdit: false,
+        edgeTextEdit: false
+      })
+      lf.setTheme(
+        {
+          baseEdge: { strokeWidth: 1 },
+          baseNode: { strokeWidth: 1 },
+          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
+          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
+        }
+      )
+      // 注册自定义元素
+      registerCustomElement(lf)
+      // 删除默认的右键菜单
+      lf.extension.menu.setMenuConfig({
+        nodeMenu: false
+      })
+      lf.on('node:click', (data, e) => { // 鼠标点击节点
+        // 展开显示设备信息 todo: 1
+        if (data.data.type !== 'pro-rect' && data.data.type !== 'pro-circle' && data.data.type !== 'triangle' && data.data.type !== 'rect-radius') {
+          if (data.data.properties.struct_id) {
+            this.moveShow(data.data) // 传递节点数据，用来获取id做比对
+            this.dialogDeviceMsgVisible = true
+            this.struct_id = data.data.properties.struct_id // ?暂时没用
+            this.tops = data.e.y + 'px'
+            document.getElementsByClassName('el-dialog')[0].style.marginLeft = data.e.x + 'px'
+          }
+        }
+      })
+      // lf.on('node:mouseleave', (data, e) => {
+      //   this.dialogDeviceMsgVisible = false
+      // })
+      // 开始渲染
+      lf.render(data)
+      this.initStageData()
+    },
+    initStageData() {
+      // 获取舞台编码
+      crudStage.getNewStageDataByCode(this.stageParam).then(res => {
+        data = JSON.parse(res.stage_data)
+        lf.render(data)
+        this.initStatus()
+      })
+      // todo: 定时器
+      this.timer = setInterval(() => { // 定时刷新设备的状态信息
+        console.log('定时器启动')
+        this.initStatus()
+      }, 10000)
+    },
+    initStatus() { // 初始化数据
+      let resion = {}
+      resion = lf.getGraphData().nodes.map(item => ({ id: item.id, struct_id: item.properties.struct_id }))
+      getStructByCodes(resion).then(res => {
+        this.allStructMsg = res
+        // 实时设置状态信息
+        for (var item of res) { // 循环设置属性
+          if (item.struct_status != undefined) {
+            lf.setProperties(item.id, {
+              struct_status: item.struct_status
+            })
+          }
+        }
+        // 设置动态实时显示设备信息
+        const { nodes } = lf.getSelectElements() // 获取选中的节点
+        if (nodes.length === 1) { // 因为是定时器，没有选中则不用实时更新显示数据
+          this.moveShow(nodes[0]) // 监控模式下不可能托选，因此就只有一个数据
+        }
+      })
+    },
+    moveShow(nodeData) { // 点击之后显示出来的数据----只需要设备信息
+      let item = ''
+      // 查找点击节点的id
+      item = this.allStructMsg.find((structMsg) => structMsg.id === nodeData.id)
+      this.arr = [] // 清空
+      if (item.struct_id && item.data) { // item.data是数组
+        this.arr = [
+          { name: '货位编号', value: item.struct_code }
+        ]
+        const data1 = item.data[0] // 至少有一条
+        const data = item.data // 总的data数据
+        // 以下是设置参数显示值
+        for (const val in data1) {
+          if (val === 'storagevehicle_code' && data1.storagevehicle_code) {
+            const obj = { name: '木箱号', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'quanlity_in_box' && data1.quanlity_in_box) {
+            const obj = { name: '子卷数', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'sale_order_name' && data1.sale_order_name) {
+            const obj = { name: '订单号', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'product_description' && data1.product_description) {
+            const obj = { name: '物料', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'box_weight' && data1.box_weight) {
+            const obj = { name: '木箱总重', value: data1[val] }
+            this.arr.push(obj)
+          }
+        }
+        if (data.length > 1) { // 显示子卷
+          for (let i = 0; i < data.length; i++) {
+            let container_name
+            let net_weight
+            for (const val in data[i]) {
+              if (val === 'container_name' && data[i].container_name) {
+                container_name = data[i][val]
+              }
+              if (val === 'net_weight' && data[i].net_weight) {
+                net_weight = data[i][val]
+              }
+            }
+            if (container_name && net_weight) {
+              const obj = { name: container_name, value: net_weight }
+              this.arr.push(obj)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+html, body {
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped>
+.container {
+  background-color: #f8f9fa;
+  height: 100%;
+}
+.newDialog /deep/ .el-dialog__header {
+  padding: 1vh 1vw 0 1vw;
+}
+.newDialog /deep/ .el-dialog__body {
+  padding: 1vh 1vw;
+}
+.toolbar-sty {
+  position: absolute;
+  margin-top: 5px;
+  top: 0;
+  padding: 5px;
+  left: 30px;
+  height: 45px;
+  /*width: 310px;*/
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 10;
+  background: #e5e5e5;
+}
+</style>

lms/nladmin-ui/src/views/wms/sendout/outone/index.vue

@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <el-row>
+      <div id="container" className="container" />
+    </el-row>
+    <!--点击设备显示信息-->
+    <el-dialog
+      id="dialogs"
+      title="点位信息"
+      class="newDialog"
+      :visible.sync="dialogDeviceMsgVisible"
+      width="22%"
+      :top="tops"
+      :show-close="false"
+      :modal="false"
+    >
+      <el-table
+        :data="arr"
+        style="width: 100%"
+        max-height="500px"
+      >
+        <el-table-column
+          prop="name"
+          label="监控项"
+        />
+        <el-table-column
+          prop="value"
+          label="当前值"
+        />
+      </el-table>
+    </el-dialog>
+
+    <!--弹窗设置设备与图标绑定与角度-->
+    <el-dialog title="点位操作" :visible.sync="dialogFormVisible1" width="35%">
+      <el-form :model="form" size="small">
+        <el-form-item label="点位编码:" prop="device_code" label-width="80px">
+          <el-input v-model="form.point_code" :disabled="true" />
+        </el-form-item>
+
+        <el-form-item label="木箱号:" label-width="80px">
+          <el-input v-model="form.vehicle_code" :disabled="true" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
+        <el-button type="primary" @click="unlock">解 绑</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import crudStage from '@/api/logicflow/stage'
+import '@logicflow/core/dist/style/index.css'
+import '@logicflow/extension/lib/style/index.css'
+
+import { LogicFlow } from '@logicflow/core'
+import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
+import { getStructByCodesFs, unLockPoint } from '@/views/system/monitor/device/structStage'
+let data = {}
+let lf = ''
+export default {
+  // 发货区监控1层
+  name: 'Sendout',
+  data() {
+    return {
+      stageParam: 'FS_1', // 舞台参数
+      dialogDeviceMsgVisible: false,
+      device_code: null,
+      tops: '20vh',
+      stage_code: '',
+      stageSelectList: [],
+      arr: [], // 显示数组
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      dialogFormVisible4: false,
+      form: {
+        point_code: '',
+        vehicle_code: ''
+      },
+      allStructMsg: [],
+      msgTop: '200px',
+      msgLeft: '200px'
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    // js提供的clearInterval方法用来清除定时器
+    console.log('定时器销毁')
+    clearInterval(this.timer)
+  },
+  methods: {
+    // 流程图初始化
+    init() {
+      // 初始化配置
+      lf = new LogicFlow({
+        overlapMode: 1,
+        container: document.querySelector('#container'), // 容器
+        // 画布配置
+        // width: window.innerWidth, // 宽度
+        height: window.innerHeight, // 高度
+        grid: { // 不用格子直接显示，使用背景
+          visible: false,
+          type: 'mesh',
+          size: 5
+        },
+        background: {
+          // backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
+          backgroundRepeat: 'repeat'
+        },
+        adjustEdge: false,
+        adjustEdgeMiddle: false,
+        adjustEdgeStartAndEnd: false,
+        adjustNodePosition: false,
+        hideAnchors: true,
+        nodeTextEdit: false,
+        edgeTextEdit: false
+      })
+      lf.setTheme(
+        {
+          baseEdge: { strokeWidth: 1 },
+          baseNode: { strokeWidth: 1 },
+          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
+          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
+        }
+      )
+      // 注册自定义元素
+      registerCustomElement(lf)
+      // 删除默认的右键菜单
+      lf.extension.menu.setMenuConfig({
+        nodeMenu: false
+      })
+      lf.on('node:click', (data, e) => { // 鼠标点击节点
+        // 展开显示设备信息 todo: 1
+        if (data.data.type !== 'pro-rect' && data.data.type !== 'pro-circle' && data.data.type !== 'triangle' && data.data.type !== 'rect-radius') {
+          if (data.data.properties.struct_id) {
+            debugger
+            this.moveShow(data.data) // 传递节点数据，用来获取id做比对
+            this.dialogDeviceMsgVisible = true
+            this.struct_id = data.data.properties.struct_id // ?暂时没用
+            this.tops = data.e.y + 'px'
+            document.getElementsByClassName('el-dialog')[0].style.marginLeft = data.e.x + 'px'
+          }
+        }
+      })
+      // 右键单击事件
+      lf.on('node:contextmenu', (data, e) => {
+        debugger
+        let item = ''
+        item = this.allStructMsg.find((structMsg) => structMsg.id === data.data.id)
+
+        const data1 = item.data[0]
+
+        this.form.point_code = data1.point_code
+        this.form.vehicle_code = data1.vehicle_code
+        this.dialogFormVisible1 = true
+      })
+      // lf.on('node:mouseleave', (data, e) => {
+      //   this.dialogDeviceMsgVisible = false
+      // })
+      // 开始渲染
+      lf.render(data)
+      this.initStageData()
+    },
+    initStageData() {
+      // 获取舞台编码
+      crudStage.getNewStageDataByCode(this.stageParam).then(res => {
+        data = JSON.parse(res.stage_data)
+        lf.render(data)
+        this.initStatus()
+      })
+      // todo: 定时器
+      this.timer = setInterval(() => { // 定时刷新设备的状态信息
+        console.log('定时器启动')
+        this.initStatus()
+      }, 10000)
+    },
+    initStatus() { // 初始化数据
+      let resion = {}
+      resion = lf.getGraphData().nodes.map(item => ({ id: item.id, struct_id: item.properties.struct_id }))
+      getStructByCodesFs(resion).then(res => {
+        this.allStructMsg = res
+        // 实时设置状态信息
+        for (var item of res) { // 循环设置属性
+          if (item.struct_status != undefined) {
+            lf.setProperties(item.id, {
+              struct_status: item.struct_status
+            })
+          }
+        }
+        // 设置动态实时显示设备信息
+        const { nodes } = lf.getSelectElements() // 获取选中的节点
+        if (nodes.length === 1) { // 因为是定时器，没有选中则不用实时更新显示数据
+          this.moveShow(nodes[0]) // 监控模式下不可能托选，因此就只有一个数据
+        }
+      })
+    },
+    moveShow(nodeData) { // 点击之后显示出来的数据----只需要设备信息
+      let item = ''
+      // 查找点击节点的id
+      item = this.allStructMsg.find((structMsg) => structMsg.id === nodeData.id)
+      this.arr = [] // 清空
+      if (item.struct_id && item.data) { // item.data是数组
+        this.arr = [
+          { name: '货位编号', value: item.struct_code }
+        ]
+        const data1 = item.data[0] // 至少有一条
+        const data = item.data // 总的data数据
+        // 以下是设置参数显示值
+        for (const val in data1) {
+          if (val === 'vehicle_code' && data1.vehicle_code) {
+            const obj = { name: '木箱号', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'quanlity_in_box' && data1.quanlity_in_box) {
+            const obj = { name: '子卷数', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'sale_order_name' && data1.sale_order_name) {
+            const obj = { name: '订单号', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'product_description' && data1.product_description) {
+            const obj = { name: '物料', value: data1[val] }
+            this.arr.push(obj)
+          }
+          if (val === 'box_weight' && data1.box_weight) {
+            const obj = { name: '木箱总重', value: data1[val] }
+            this.arr.push(obj)
+          }
+        }
+        if (data.length > 1) { // 显示子卷
+          for (let i = 0; i < data.length; i++) {
+            let container_name
+            let net_weight
+            for (const val in data[i]) {
+              if (val === 'container_name' && data[i].container_name) {
+                container_name = data[i][val]
+              }
+              if (val === 'net_weight' && data[i].net_weight) {
+                net_weight = data[i][val]
+              }
+            }
+            if (container_name && net_weight) {
+              const obj = { name: container_name, value: net_weight }
+              this.arr.push(obj)
+            }
+          }
+        }
+      }
+    },
+    unlock() {
+      // 解锁点位
+      if (this.form.vehicle_code === '') {
+        this.$message({
+          message: '此点位已解绑',
+          type: 'warning'
+        })
+        return
+      }
+      unLockPoint(this.form).then(res => {
+        this.dialogFormVisible1 = false
+        this.initStageData()
+        this.$message({
+          message: '解绑成功',
+          type: 'success'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style>
+html, body {
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped>
+.container {
+  background-color: #f8f9fa;
+  height: 100%;
+}
+.newDialog /deep/ .el-dialog__header {
+  padding: 1vh 1vw 0 1vw;
+}
+.newDialog /deep/ .el-dialog__body {
+  padding: 1vh 1vw;
+}
+.toolbar-sty {
+  position: absolute;
+  margin-top: 5px;
+  top: 0;
+  padding: 5px;
+  left: 30px;
+  height: 45px;
+  /*width: 310px;*/
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  z-index: 10;
+  background: #e5e5e5;
+}
+</style>