add bpmn change

src/components/workflow/formTaskProcessViewer.vue

@@ -2,7 +2,7 @@
   <!-- 流程图 -->
   <div class="form-single-fragment" style="position: relative;">
     <el-row>
-      <ProcessViewer :xml="taskProcessXml" :finishedInfo="finishedInfo" style="height: 370px" />
+      <ProcessViewer :xml="taskProcessXml" :finishedInfo="finishedInfo" ref="processviewer" style="height: 370px" />
     </el-row>
   </div>
 </template>
@@ -37,6 +37,7 @@ export default {
       if (this.processInstanceId == null || this.processInstanceId === '') {
         return;
       }
+      
       let params = {
         processInstanceId: this.processInstanceId
       }
@@ -63,7 +64,6 @@ export default {
     }
   },
   mounted () {
-    console.log('FlowOperationController :>> ', FlowOperationController);
     this.getTaskHighlightData();
     this.getTaskProcessXml();
   }

src/views/taskScreen.vue

@@ -152,6 +152,7 @@
                   :processInstanceId="processInstanceId"
                   :processDefinitionId="processDefinitionId"
                   v-if="isReady"
+                  ref="FormTaskProcessViewer"
                 ></form-task-process-viewer>
               </div>
 
@@ -310,9 +311,9 @@
   </v-scale-screen>
 </template>
 <script>
-import * as echarts from 'echarts';
+
 import myFlylineChartEnhanced from '../components/my-flyline-chart-enhanced/index'
-import formTaskProcessViewer from '@/components/workflow/formTaskProcessViewer'
+
 import myscrollBoard from '../components/myscroll-board/src/main'
 import sacleBox from '../components/sacle-box/index'
 import { request } from '../utils/request';
@@ -344,6 +345,7 @@ export default {
       taskList:[],
       websocket: null, //建立的连接
       websocketOrder: null, //建立的连接
+      websocketBpmn: null, //建立的连接
       updatekey:'1',
       scrollTableConfig:{
         header: ['指令名称', '指令内容', '指令时间'],
@@ -461,7 +463,7 @@ export default {
          let param = {taskId: this.processInstanceId};
         const res1 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
         this.processDefinitionId = res1.data;
-     
+        this.initWebsoketBpmn();
         this.isReady = true;
         this.currentTaskName = data[0].taskName;
         this.currentTaskGrade = data[0].syntheticTaskScore;
@@ -498,6 +500,7 @@ export default {
       this.getinstructList(this.wholeOutTaskId);
       // 建立指令websocket 链接
       this.initInstructWebsoket();
+      this.initWebsoketBpmn();
     },
     changeTaskAndUnit() {
       this.systemSubjectId=''
@@ -603,6 +606,40 @@ export default {
     websocketclose(){
       console.log('ws 连接关闭');
       this.initWebsoket();//重新建立连接
+    },
+        // 建立websocket 链接 任务
+    initWebsoketBpmn(){
+      this.websocketBpmn = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/bpmn`);//这里将http替换成ws
+      switch (this.websocketBpmn.readyState) {
+        case 0:
+          console.log("正在连接");
+          break;
+        case 1:
+          console.log("已经链接并且可以通讯");
+          break;
+        case 2:
+          console.log("连接正在关闭");
+          break;
+        case 3:
+          console.log("连接已关闭或者没有链接成功");
+          break;
+      };
+      this.websocketBpmn.onopen = this.bpmnWebsocketsend;//websoket连接成功
+      this.websocketBpmn.onmessage =this.bpmnWebsocketonmessage;//websoket收到信息
+      this.websocketBpmn.onclose = this.bpmnWebsocketclose;//websoket连接关闭
+    },
+    bpmnWebsocketsend(){
+      console.log('ws 连接成功');
+    },
+    bpmnWebsocketonmessage(msg){
+      // 更新流程图
+      this.$refs.FormTaskProcessViewer.getTaskHighlightData();
+      this.$refs.FormTaskProcessViewer.getTaskProcessXml();
+      console.log('收到指令信息',msg);
+    },
+    bpmnWebsocketclose(){
+      console.log('ws 连接关闭');
+      this.initWebsoketBpmn();//重新建立连接
     },
     initInstructWebsoket(){
       // 指令的ws
@@ -762,6 +799,7 @@ export default {
         this.videoPlayerName[index++] = res.data[item].name;
       }
     },
+
     changeVideo(subjectName) {
       // if(this.playerList.length){
       // 	this.playerList.forEach((item)=>{