xyh2023.4.22

src/api/FlowOperationController.js

@@ -0,0 +1,135 @@
+export default class FlowOperationController {
+  // 启动流程实例并且提交表单信息
+  static startAndTakeUserTask (sender, params, axiosOption, httpOption) {
+    let url = '/admin/flow/flowOnlineOperation/startAndTakeUserTask';
+    if (axiosOption && axiosOption.processDefinitionKey) {
+      url += '/' + axiosOption.processDefinitionKey;
+    }
+    return sender.doUrl(url, 'post', params, axiosOption, httpOption);
+  }
+  // 获得流程以及工单信息
+  static listWorkOrder (sender, params, axiosOption, httpOption) {
+    let url = '/admin/flow/flowOnlineOperation/listWorkOrder';
+    if (axiosOption && axiosOption.processDefinitionKey) {
+      url += '/' + axiosOption.processDefinitionKey;
+    }
+    return sender.doUrl(url, 'post', params, axiosOption, httpOption);
+  }
+  // 提交用户任务数据
+  static submitUserTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOnlineOperation/submitUserTask', 'post', params, axiosOption, httpOption);
+  }
+  // 获取历史流程数据
+  static viewHistoricProcessInstance (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOnlineOperation/viewHistoricProcessInstance', 'get', params, axiosOption, httpOption);
+  }
+  // 获取用户任务数据
+  static viewUserTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOnlineOperation/viewUserTask', 'get', params, axiosOption, httpOption);
+  }
+  // 获取在线表单工作流以及工作流下表单列表
+  static listFlowEntryForm (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOnlineOperation/listFlowEntryForm', 'get', params, axiosOption, httpOption);
+  }
+  // 撤销工单
+  static cancelWorkOrder (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/cancelWorkOrder', 'post', params, axiosOption, httpOption);
+  }
+  // 多实例加签
+  static submitConsign (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/submitConsign', 'post', params, axiosOption, httpOption);
+  }
+  // 已办任务列表
+  static listHistoricTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/listHistoricTask', 'post', params, axiosOption, httpOption);
+  }
+  // 获取已办任务信息
+  static viewHistoricTaskInfo (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/viewHistoricTaskInfo', 'get', params, axiosOption, httpOption);
+  }
+  // 仅启动流程实例
+  static startOnly (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/startOnly', 'post', params, axiosOption, httpOption);
+  }
+  // 获得流程定义初始化用户任务信息
+  static viewInitialTaskInfo (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/viewInitialTaskInfo', 'get', params, axiosOption, httpOption);
+  }
+  // 获取待办任务信息
+  static viewRuntimeTaskInfo (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/viewRuntimeTaskInfo', 'get', params, axiosOption, httpOption);
+  }
+  // 获取流程实例审批历史
+  static listFlowTaskComment (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/listFlowTaskComment', 'get', params, axiosOption, httpOption);
+  }
+  // 获取历史任务信息
+  static viewInitialHistoricTaskInfo (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/viewInitialHistoricTaskInfo', 'get', params, axiosOption, httpOption);
+  }
+   // 获取历史任务信息
+   static viewAllInitialHistoricTaskInfo (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/viewAllInitialHistoricTaskInfo', 'get', params, axiosOption, httpOption);
+  }
+  // 获取所有待办任务
+  static listRuntimeTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/listRuntimeTask', 'post', params, axiosOption, httpOption);
+  }
+  // 获得流程实例审批路径
+  static viewHighlightFlowData (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/viewHighlightFlowData', 'get', params, axiosOption, httpOption);
+  }
+  // 获得流程实例的配置XML
+  static viewProcessBpmn (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/viewProcessBpmn', 'get', params, axiosOption, httpOption);
+  }
+  // 获得所有历史流程实例
+  static listAllHistoricProcessInstance (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/listAllHistoricProcessInstance', 'post', params, axiosOption, httpOption);
+  }
+  // 获得当前用户历史流程实例
+  static listHistoricProcessInstance (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/listHistoricProcessInstance', 'post', params, axiosOption, httpOption);
+  }
+  // 终止流程
+  static stopProcessInstance (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/stopProcessInstance', 'post', params, axiosOption, httpOption);
+  }
+  // 删除流程实例
+  static deleteProcessInstance (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/deleteProcessInstance', 'post', params, axiosOption, httpOption);
+  }
+  // 催办
+  static remindRuntimeTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/remindRuntimeTask', 'post', params, axiosOption, httpOption);
+  }
+  // 催办消息列表
+  static listRemindingTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowMessage/listRemindingTask', 'post', params, axiosOption, httpOption);
+  }
+  // 驳回
+  static rejectRuntimeTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/rejectRuntimeTask', 'post', params, axiosOption, httpOption);
+  }
+  // 撤销
+  static revokeHistoricTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/revokeHistoricTask', 'post', params, axiosOption, httpOption);
+  }
+  // 挂起
+  static suspendInstance (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/suspendInstance', 'post', params, axiosOption, httpOption);
+  }
+  // 激活
+  static activeInstance (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/activeInstance', 'post', params, axiosOption, httpOption);
+  }
+  // 转交
+  static turnTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/turnTask', 'post', params, axiosOption, httpOption);
+  }
+  // 用户任务
+  static listUserTask (sender, params, axiosOption, httpOption) {
+    return sender.doUrl('/admin/flow/flowOperation/listUserTask', 'post', params, axiosOption, httpOption);
+  }
+  
+}

src/api/flowController.js

@@ -0,0 +1,6 @@
+
+import FlowOperationController from './FlowOperationController.js';
+
+export {
+  FlowOperationController
+}

src/api/flowStaticDict.js

@@ -0,0 +1,193 @@
+/**
+ * 工作流常量字典
+ */
+import Vue from 'vue';
+import { DictionaryBase } from './index.js';
+
+const SysFlowEntryBindFormType = new DictionaryBase('流程绑定表单类型', [
+  {
+    id: 0,
+    name: '动态表单',
+    symbol: 'ONLINE_FORM'
+  },
+  {
+    id: 1,
+    name: '路由表单',
+    symbol: 'ROUTER_FORM'
+  }
+]);
+Vue.prototype.SysFlowEntryBindFormType = SysFlowEntryBindFormType;
+
+const SysFlowEntryPublishedStatus = new DictionaryBase('流程设计发布状态', [
+  {
+    id: 0,
+    name: '未发布',
+    symbol: 'UNPUBLISHED'
+  },
+  {
+    id: 1,
+    name: '已发布',
+    symbol: 'PUBLISHED'
+  }
+]);
+Vue.prototype.SysFlowEntryPublishedStatus = SysFlowEntryPublishedStatus;
+
+const SysFlowEntryStep = new DictionaryBase('流程设计步骤', [
+  {
+    id: 0,
+    name: '编辑基础信息',
+    symbol: 'BASIC'
+  },
+  {
+    id: 1,
+    name: '流程变量设置',
+    symbol: 'PROCESS_VARIABLE'
+  },
+  {
+    id: 2,
+    name: '设计流程',
+    symbol: 'PROCESS_DESIGN'
+  }
+]);
+Vue.prototype.SysFlowEntryStep = SysFlowEntryStep;
+
+const SysFlowTaskOperationType = new DictionaryBase('任务操作类型', [
+  {
+    id: 'agree',
+    name: '同意',
+    symbol: 'AGREE'
+  },
+  {
+    id: 'refuse',
+    name: '拒绝',
+    symbol: 'REFUSE'
+  },
+  {
+    id: 'reject',
+    name: '驳回',
+    symbol: 'REJECT'
+  },
+  {
+    id: 'revoke',
+    name: '撤销',
+    symbol: 'REVOKE'
+  },
+  {
+    id: 'transfer',
+    name: '转办',
+    symbol: 'TRANSFER'
+  },
+  {
+    id: 'multi_consign',
+    name: '加签',
+    symbol: 'CO_SIGN'
+  },
+  {
+    id: 'save',
+    name: '保存',
+    symbol: 'SAVE'
+  },
+  {
+    id: 'stop',
+    name: '终止',
+    symbol: 'STOP'
+  },
+  {
+    id: 'multi_sign',
+    name: '会签',
+    symbol: 'MULTI_SIGN'
+  },
+  {
+    id: 'multi_agree',
+    name: '同意（会签）',
+    symbol: 'MULTI_AGREE'
+  },
+  {
+    id: 'multi_refuse',
+    name: '拒绝（会签）',
+    symbol: 'MULTI_REFUSE'
+  },
+  {
+    id: 'multi_abstain',
+    name: '弃权（会签）',
+    symbol: 'MULTI_ABSTAIN'
+  },
+  {
+    id: 'set_assignee',
+    name: '指定审批人',
+    symbol: 'SET_ASSIGNEE'
+  }
+]);
+Vue.prototype.SysFlowTaskOperationType = SysFlowTaskOperationType;
+
+const SysFlowTaskType = new DictionaryBase('工作流任务类型', [
+  {
+    id: 0,
+    name: '其他任务',
+    symbol: 'OTHER_TASK'
+  },
+  {
+    id: 1,
+    name: '用户任务',
+    symbol: 'USER_TASK'
+  }
+]);
+Vue.prototype.SysFlowTaskType = SysFlowTaskType;
+
+const SysFlowVariableType = new DictionaryBase('工作流变量类型', [
+  {
+    id: 0,
+    name: '流程变量',
+    symbol: 'INSTANCE'
+  },
+  {
+    id: 1,
+    name: '任务变量',
+    symbol: 'TASK'
+  }
+]);
+Vue.prototype.SysFlowVariableType = SysFlowVariableType;
+
+const SysFlowWorkOrderStatus = new DictionaryBase('工单状态', [
+  {
+    id: 0,
+    name: '已提交',
+    symbol: 'SUBMITED'
+  },
+  {
+    id: 1,
+    name: '审批中',
+    symbol: 'APPROVING'
+  },
+  {
+    id: 2,
+    name: '已拒绝',
+    symbol: 'REFUSED'
+  },
+  {
+    id: 3,
+    name: '已完成',
+    symbol: 'FINISHED'
+  },
+  {
+    id: 4,
+    name: '终止',
+    symbol: 'STOPPED'
+  },
+  {
+    id: 5,
+    name: '撤销',
+    symbol: 'CANCEL'
+  }
+]);
+Vue.prototype.SysFlowWorkOrderStatus = SysFlowWorkOrderStatus;
+
+export {
+  SysFlowEntryPublishedStatus,
+  SysFlowEntryBindFormType,
+  SysFlowEntryStep,
+  SysFlowTaskOperationType,
+  SysFlowTaskType,
+  SysFlowVariableType,
+  SysFlowWorkOrderStatus
+}

src/api/index.js

@@ -0,0 +1,201 @@
+/**
+ * 常量字典数据
+ */
+import Vue from 'vue';
+
+class DictionaryBase extends Map {
+  constructor (name, dataList, keyId = 'id', symbolId = 'symbol') {
+    super();
+    this.showName = name;
+    this.setList(dataList, keyId, symbolId);
+  }
+
+  setList (dataList, keyId = 'id', symbolId = 'symbol') {
+    this.clear();
+    if (Array.isArray(dataList)) {
+      dataList.forEach((item) => {
+        this.set(item[keyId], item);
+        if (item[symbolId] != null) {
+          Object.defineProperty(this, item[symbolId], {
+            get: function () {
+              return item[keyId];
+            }
+          });
+        }
+      });
+    }
+  }
+
+  getList (valueId = 'name', parentIdKey = 'parentId', filter) {
+    let temp = [];
+    this.forEach((value, key) => {
+      let obj = {
+        id: key,
+        name: (typeof value === 'string') ? value : value[valueId],
+        parentId: value[parentIdKey]
+      };
+      if (typeof filter !== 'function' || filter(obj)) {
+        temp.push(obj);
+      }
+    });
+
+    return temp;
+  }
+
+  getValue (id, valueId = 'name') {
+    // 如果id为boolean类型，则自动转换为0和1
+    if (typeof id === 'boolean') {
+      id = id ? 1 : 0;
+    }
+    return (this.get(id) || {})[valueId];
+  }
+}
+
+const SysUserStatus = new DictionaryBase('用户状态', [
+  {
+    id: 0,
+    name: '正常状态',
+    symbol: 'NORMAL'
+  },
+  {
+    id: 1,
+    name: '锁定状态',
+    symbol: 'LOCKED'
+  }
+]);
+Vue.prototype.SysUserStatus = SysUserStatus;
+
+const SysUserType = new DictionaryBase('用户类型', [
+  {
+    id: 0,
+    name: '管理员',
+    symbol: 'ADMIN'
+  },
+  {
+    id: 1,
+    name: '系统操作员',
+    symbol: 'SYSTEM'
+  },
+  {
+    id: 2,
+    name: '普通操作员',
+    symbol: 'OPERATOR'
+  }
+]);
+Vue.prototype.SysUserType = SysUserType;
+
+const SysPermModuleType = new DictionaryBase('权限分组类型', [
+  {
+    id: 0,
+    name: '分组模块',
+    symbol: 'GROUP'
+  }, {
+    id: 1,
+    name: '接口模块',
+    symbol: 'CONTROLLER'
+  }
+]);
+Vue.prototype.SysPermModuleType = SysPermModuleType;
+
+const SysPermCodeType = new DictionaryBase('权限字类型', [{
+  id: 0,
+  name: '表单',
+  symbol: 'FORM'
+}, {
+  id: 1,
+  name: '片段',
+  symbol: 'FRAGMENT'
+}, {
+  id: 2,
+  name: '操作',
+  symbol: 'OPERATION'
+}]);
+Vue.prototype.SysPermCodeType = SysPermCodeType;
+
+const SysMenuType = new DictionaryBase('菜单类型', [
+  {
+    id: 0,
+    name: '目录',
+    symbol: 'DIRECTORY'
+  },
+  {
+    id: 1,
+    name: '表单',
+    symbol: 'MENU'
+  },
+  {
+    id: 2,
+    name: '片段',
+    symbol: 'FRAGMENT'
+  },
+  {
+    id: 3,
+    name: '按钮',
+    symbol: 'BUTTON'
+  }
+]);
+Vue.prototype.SysMenuType = SysMenuType;
+
+const SysMenuBindType = new DictionaryBase('菜单绑定类型', [
+  {
+    id: 0,
+    name: '路由菜单',
+    symbol: 'ROUTER'
+  },
+  {
+    id: 1,
+    name: '在线表单',
+    symbol: 'ONLINE_FORM'
+  },
+  {
+    id: 2,
+    name: '工单列表',
+    symbol: 'WORK_ORDER'
+  }
+]);
+Vue.prototype.SysMenuBindType = SysMenuBindType;
+
+const SysDataPermType = new DictionaryBase('数据权限类型', [
+  {
+    id: 0,
+    name: '查看全部',
+    symbol: 'ALL'
+  },
+  {
+    id: 1,
+    name: '仅看自己',
+    symbol: 'ONLY_USER'
+  },
+  {
+    id: 2,
+    name: '仅看所在单位',
+    symbol: 'ONLY_DEPT'
+  },
+  {
+    id: 3,
+    name: '仅看所在单位及子单位',
+    symbol: 'ONLY_DEPT_AND_CHILD'
+  },
+  {
+    id: 4,
+    name: '自选单位及子单位',
+    symbol: 'CUSTOM_DEPT_AND_CHILD'
+  },
+  {
+    id: 5,
+    name: '仅自选单位',
+    symbol: 'CUSTOM_DEPT'
+  }
+]);
+Vue.prototype.SysDataPermType = SysDataPermType;
+
+export {
+  DictionaryBase,
+  SysUserStatus,
+  SysUserType,
+  SysDataPermType,
+  SysPermModuleType,
+  SysPermCodeType,
+  SysMenuBindType,
+  SysMenuType
+}

src/assets/css/flow-element-variables.scss

@@ -0,0 +1,63 @@
+/* 改变主题色变量 */
+// $--color-primary: #1890ff;
+// $--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+
+.process-drawer .el-drawer__header {
+  padding: 16px 16px 8px 16px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+div[class^="el-drawer"]:focus,
+span:focus {
+  outline: none;
+}
+
+.process-drawer .el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.process-design {
+  .el-table td,
+  .el-table th {
+    color: #333;
+  }
+
+  .el-dialog__header {
+    padding: 16px 16px 8px 16px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .el-dialog__body {
+    padding: 16px;
+    max-height: 80vh;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+  .el-dialog__footer {
+    padding: 16px;
+    box-sizing: border-box;
+    border-top: 1px solid #e8e8e8;
+  }
+  .el-dialog__close {
+    font-weight: 600;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-divider:not(.el-divider--horizontal) {
+    margin: 0 8px ;
+  }
+  .el-divider.el-divider--horizontal {
+    margin: 16px 0;
+  }
+}

src/assets/css/index.scss

@@ -0,0 +1,89 @@
+@import "./flow-element-variables.scss";
+@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
+@import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
+@import "~bpmn-js-token-simulation/assets/css/normalize.css";
+@import "~bpmn-js/dist/assets/diagram-js.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
+@import "./process-designer.scss";
+@import "./process-panel.scss";
+
+$success-color: #1dc539;
+$current-color: #409EFF;
+
+.process-viewer {
+  position: relative;
+  border: 1px solid #EFEFEF;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
+  
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color!important;
+      marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+/* 修改所有任务节点名称的字体颜色为蓝色 */
+.bpmn .bpmn-task .djs-label {
+  fill: blue !important;
+}
+  .success.djs-shape {
+    .djs-visual rect {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .current.djs-shape {
+    .djs-visual rect {
+      stroke: $current-color!important;
+      fill: $current-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $current-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $current-color!important;
+      fill: $current-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
+  display: none;
+}

src/assets/css/process-designer.scss

@@ -0,0 +1,152 @@
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+    .el-button {
+      text-align: center;
+    }
+    .el-button-group {
+      margin: 4px;
+    }
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        text-align: left;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-button:hover {
+        background: rgba(64, 158, 255, 0.8);
+        color: #ffffff;
+      }
+    }
+    .align {
+      position: relative;
+      i {
+        &:after {
+          content: "|";
+          position: absolute;
+          transform: rotate(90deg) translate(200%, 60%);
+        }
+      }
+    }
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+    .align.align-center i {
+      transform: rotate(90deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(0deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+  }
+  .my-process-designer__container {
+    display: inline-flex;
+    width: 100%;
+    flex: 1;
+    .my-process-designer__canvas {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
+      repeat !important;
+      div.toggle-mode {
+        display: none;
+      }
+    }
+    .my-process-designer__property-panel {
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+      z-index: 10;
+      * {
+        box-sizing: border-box;
+      }
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+//侧边栏配置
+.djs-palette.open {
+  .djs-palette-entries {
+    div[class^="bpmn-icon-"]:before,
+    div[class*="bpmn-icon-"]:before {
+      line-height: unset;
+    }
+    div.entry {
+      position: relative;
+    }
+    div.entry:hover {
+      &::after {
+        width: max-content;
+        content: attr(title);
+        vertical-align: text-bottom;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        transform: translateX(100%);
+        font-size: 0.5em;
+        display: inline-block;
+        text-decoration: inherit;
+        font-variant: normal;
+        text-transform: none;
+        background: #fafafa;
+        box-shadow: 0 0 6px #eeeeee;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 16px;
+        border-radius: 4px;
+        z-index: 100;
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  max-height: calc(80vh - 32px);
+  overflow-y: auto;
+}
+.hljs {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}

src/assets/css/process-panel.scss

@@ -0,0 +1,110 @@
+.process-design {
+  .process-panel__container {
+    box-sizing: border-box;
+    padding: 0 8px;
+    border-left: 1px solid #eeeeee;
+    box-shadow: 0 0 8px #cccccc;
+    max-height: 100%;
+    overflow-y: scroll;
+  }
+  .panel-tab__title {
+    font-weight: 600;
+    padding: 0 8px;
+    font-size: 1.1em;
+    line-height: 1.2em;
+    i {
+      margin-right: 8px;
+      font-size: 1.2em;
+    }
+  }
+  .panel-tab__content {
+    width: 100%;
+    box-sizing: border-box;
+    border-top: 1px solid #eeeeee;
+    padding: 8px 16px;
+    .panel-tab__content--title {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      span {
+        flex: 1;
+        text-align: left;
+      }
+    }
+  }
+  .element-property {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    margin: 8px 0;
+    .element-property__label {
+      display: block;
+      width: 90px;
+      text-align: right;
+      overflow: hidden;
+      padding-right: 12px;
+      line-height: 32px;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+    .element-property__value {
+      flex: 1;
+      line-height: 32px;
+    }
+    .el-form-item {
+      width: 100%;
+      margin-bottom: 0;
+      padding-bottom: 18px;
+    }
+  }
+  .list-property {
+    flex-direction: column;
+    .element-listener-item {
+      width: 100%;
+      display: inline-grid;
+      grid-template-columns: 16px auto 32px 32px;
+      grid-column-gap: 8px;
+    }
+    .element-listener-item + .element-listener-item {
+      margin-top: 8px;
+    }
+  }
+  .listener-filed__title {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0;
+    span {
+      width: 200px;
+      text-align: left;
+      font-size: 14px;
+    }
+    i {
+      margin-right: 8px;
+    }
+  }
+  .element-drawer__button {
+    margin-top: 8px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+  }
+  .element-drawer__button > .el-button {
+    width: 100%;
+  }
+  
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+  .el-input.is-disabled .el-input__inner {
+    color: #999999;
+  }
+  .el-form-item.el-form-item--mini {
+    margin-bottom: 0;
+    & + .el-form-item {
+      margin-top: 16px;
+    }
+  }
+}
+

src/components/workflow/ProcessViewer.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="process-viewer">
+    <div class="process-canvas" style="height: 100%;" ref="processCanvas" v-show="!isLoading" />
+    <!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
+    <defs ref="customDefs">
+      <marker id="sequenceflow-end-white-success"  viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
+        <path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      </marker>
+      <marker id="conditional-flow-marker-white-success" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto">
+        <path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      </marker>
+    </defs>
+    <!-- 已完成节点悬浮弹窗 -->
+    <el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible">
+      <el-row>
+        <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray" height="500px">
+          <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
+          <el-table-column label="执行人" prop="createUsername" width="150px" />
+          <el-table-column label="操作" width="150px">
+            <template slot-scope="scope">
+              <el-tag size="mini" :type="getOperationTagType(scope.row.approvalType)" effect="dark">{{SysFlowTaskOperationType.getValue(scope.row.approvalType)}}</el-tag>
+              <el-tag v-if="scope.row.delegateAssginee != null" size="mini" type="success" effect="plain" style="margin-left: 10px;">{{scope.row.delegateAssginee}}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="审批意见">
+            <template slot-scope="scope">
+              <span>{{scope.row.comment ? scope.row.comment : ''}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="处理时间" prop="createTime" width="160px" />
+        </el-table>
+      </el-row>
+    </el-dialog>
+    <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
+      <el-row type="flex" justify="end">
+        <el-button-group key="scale-control" size="medium">
+          <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out" @click="processZoomOut()" />
+          <el-button size="medium" type="default" style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
+          <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in" @click="processZoomIn()" />
+          <el-button size="medium" type="default" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
+          <slot />
+        </el-button-group>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import '../../assets/css/index.scss';
+// import BpmnViewer from 'bpmn-js/lib/Viewer';
+import BpmnModeler from 'bpmn-js/lib/Modeler';
+
+export default {
+  props: {
+    xml: {
+      type: String
+    },
+    finishedInfo: {
+      type: Object
+    },
+    // 所有节点审批记录
+    allCommentList: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      dialogVisible: false,
+      dlgTitle: undefined,
+      defaultZoom: 1,
+      // 是否正在加载流程图
+      isLoading: true,
+      bpmnViewer: undefined,
+      // 已完成流程元素
+      processNodeInfo: undefined,
+      // 当前任务id
+      selectTaskId: undefined,
+      // 任务节点审批记录
+      taskCommentList: [],
+      // 已完成任务悬浮延迟Timer
+      hoverTimer: null
+    }
+  },
+  methods: {
+    processReZoom () {
+      this.defaultZoom = 1;
+      this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto');
+    },
+    processZoomIn (zoomStep = 0.1) {
+      let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
+      if (newZoom > 4) {
+        throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4');
+      }
+      this.defaultZoom = newZoom;
+      this.bpmnViewer.get('canvas').zoom(this.defaultZoom);
+    },
+    processZoomOut (zoomStep = 0.1) {
+      let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
+      if (newZoom < 0.2) {
+        throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2');
+      }
+      this.defaultZoom = newZoom;
+      this.bpmnViewer.get('canvas').zoom(this.defaultZoom);
+    },
+    getOperationTagType (type) {
+      switch (type) {
+        case this.SysFlowTaskOperationType.AGREE:
+        case this.SysFlowTaskOperationType.MULTI_AGREE:
+          return 'success';
+        case this.SysFlowTaskOperationType.REFUSE:
+        case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
+        case this.SysFlowTaskOperationType.MULTI_REFUSE:
+          return 'warning';
+        case this.SysFlowTaskOperationType.STOP:
+          return 'danger'
+        default:
+          return 'primary';
+      }
+    },
+    // 流程图预览清空
+    clearViewer () {
+      if (this.$refs.processCanvas) this.$refs.processCanvas.innerHTML = '';
+      if (this.bpmnViewer) this.bpmnViewer.destroy();
+      this.bpmnViewer = null;
+    },
+    // 添加自定义箭头
+    addCustomDefs () {
+      const canvas = this.bpmnViewer.get('canvas');
+      const svg = canvas._svg;
+      const customDefs = this.$refs.customDefs;
+      svg.appendChild(customDefs);
+    },
+    // 任务悬浮弹窗
+    onSelectElement (element) {
+      this.selectTaskId = undefined;
+      this.dlgTitle = undefined;
+      
+      if (this.processNodeInfo == null || this.processNodeInfo.finishedTaskSet == null) return;
+      
+      if (element == null || this.processNodeInfo.finishedTaskSet.indexOf(element.id) === -1) {
+        return;
+      }
+      
+      this.selectTaskId = element.id;
+      this.dlgTitle = element.businessObject ? element.businessObject.name : undefined;
+      // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
+      this.taskCommentList = (this.allCommentList || []).filter(item => {
+        return item.taskKey === this.selectTaskId;
+      });
+      this.dialogVisible = true;
+    },
+    // 显示流程图
+    async importXML (xml) {
+       
+      this.clearViewer();
+      if (xml != null && xml !== '') {
+         
+        try {
+      
+          this.bpmnViewer = new BpmnModeler({
+            container: this.$refs.processCanvas
+          });
+           
+          // 任务节点悬浮事件
+          this.bpmnViewer.on('element.click', ({ element }) => {
+            this.onSelectElement(element);
+          });
+         
+          this.isLoading = true;
+          await this.bpmnViewer.importXML(xml);
+          this.addCustomDefs();
+        } catch (e) {
+          console.error(e);
+          this.clearViewer();
+        } finally {
+          this.isLoading = false;
+          this.setProcessStatus(this.processNodeInfo);
+        }
+        
+      }
+    },
+
+    
+    // 设置流程图元素状态
+    setProcessStatus (processNodeInfo) {
+      this.processNodeInfo = processNodeInfo;
+      if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return;
+      let { finishedSequenceFlowSet, finishedTaskSet, unfinishedTaskSet } = this.processNodeInfo;
+      const canvas = this.bpmnViewer.get('canvas');
+      const elementRegistry = this.bpmnViewer.get('elementRegistry');
+      if (Array.isArray(finishedSequenceFlowSet)) {
+        finishedSequenceFlowSet.forEach(item => {
+          if (item != null) {
+            canvas.addMarker(item, 'success');
+            let element = elementRegistry.get(item);
+            const conditionExpression = element.businessObject.conditionExpression;
+            if (conditionExpression) {
+              canvas.addMarker(item, 'condition-expression');
+            }
+          }
+        });
+      }
+      if (Array.isArray(finishedTaskSet)) {
+        finishedTaskSet.forEach(item => {
+          canvas.addMarker(item, 'success');
+        });
+      }
+      if (Array.isArray(unfinishedTaskSet)) {
+        unfinishedTaskSet.forEach(item => {
+          canvas.addMarker(item, 'current');
+        });
+      }
+    }
+  },
+  destroyed () {
+    this.clearViewer();
+  },
+  mounted(){
+    this.processReZoom();
+    
+  },
+  watch: {
+    xml: {
+      handler (newXml) {
+        this.importXML(newXml);
+      },
+      immediate: true
+    },
+    finishedInfo: {
+      handler (newInfo) {
+        this.setProcessStatus(newInfo);
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .comment-dialog >>> .el-dialog__body {
+    padding: 0px;
+  }
+
+</style>

src/components/workflow/formTaskProcessViewer.vue

@@ -0,0 +1,74 @@
+<template>
+  <!-- 流程图 -->
+  <div class="form-single-fragment" style="position: relative;">
+    <el-row>
+      <ProcessViewer :xml="taskProcessXml" :finishedInfo="finishedInfo" style="height: 370px" />
+    </el-row>
+  </div>
+</template>
+
+<script>
+import '../../api/flowStaticDict.js';
+import { FlowOperationController } from '../../api/FlowOperationController';
+import ProcessViewer from './ProcessViewer.vue';
+import { request } from '../../utils/request';
+export default {
+  name: 'formTaskProcessViewer',
+  props: {
+    processDefinitionId: {
+      type: String,
+      required: true
+    },
+    processInstanceId: {
+      type: String
+    }
+  },
+  components: {
+    ProcessViewer
+  },
+  data () {
+    return {
+      finishedInfo: undefined,
+      taskProcessXml: undefined
+    }
+  },
+  methods: {
+    async getTaskHighlightData () {
+      if (this.processInstanceId == null || this.processInstanceId === '') {
+        return;
+      }
+      let params = {
+        processInstanceId: this.processInstanceId
+      }
+       const res = await request('/dt_screen/admin/flow/flowOperation/viewHighlightFlowData', 'get', params, false)
+       this.finishedInfo = res.data.data;
+      // FlowOperationController.viewHighlightFlowData(this, params).then(res => {
+      //   // 已完成节点
+      //   this.finishedInfo = res.data;
+      // }).catch(e => {});
+    },
+   async getTaskProcessXml () {
+      let params = {
+        processDefinitionId: this.processDefinitionId
+      }
+       const res = await request('/dt_screen/admin/flow/flowOperation/viewProcessBpmn', 'get', params, false)
+       
+       this.taskProcessXml = res.data.data;
+      // this.taskProcessXml = this.taskProcessXml.data;
+   
+      // FlowOperationController.viewProcessBpmn(this, params).then(res => {
+      //   // 当前流程实例xml
+      //   this.taskProcessXml = res.data;
+      // }).catch(e => {});
+    }
+  },
+  mounted () {
+    console.log('FlowOperationController :>> ', FlowOperationController);
+    this.getTaskHighlightData();
+    this.getTaskProcessXml();
+  }
+}
+</script>
+
+<style>
+</style>

src/views/taskScreen.vue

@@ -98,7 +98,7 @@
                                     </div>
                                     <div class="subject_list_container" id="subjectList">
                                         <template v-for="(item,index) in subjectDatas">
-                                            <div class="subject_list_item_new" :key="index">
+                                            <div class="subject_list_item_new" :key="index" @click="changeVideo(item.subjectName)">
                                                 <div class="subject_list_header">
                                                     <div>
                                                         <div class="subject_list_name">
@@ -143,8 +143,11 @@
 										</el-image>
 										流程图
 									</div>
+                                   
 								</div>
+                                <form-task-process-viewer :processInstanceId="processInstanceId" :processDefinitionId="processDefinitionId"></form-task-process-viewer>
                             </div>
+                            
                         </div>
                         <div class="task_header_footer_task_new">
                             <div class="subject_task_item_task" style="width:28.2%;">
@@ -195,7 +198,7 @@
                                         >
                                         </el-image>
                                     </div>
-                                    <div class="video_title">监控名称</div>
+                                    <div class="video_title">{{videoPlayerName[0]}}</div>
                                     <video  id="videoPlayerTask" class="video-js" muted></video>
 									<!-- <div class="center_no_data"> -->
 										<!-- <el-image
@@ -214,19 +217,19 @@
 								<div class="task_outer_cotnainer_status">
                                     <div class="video_flex_style" style="padding-top:12px;">
                                         <div>
-                                            <div class="video_title">监控名称</div>
+                                            <div class="video_title">{{videoPlayerName[1]}}</div>
                                             <video id="videoPlayer_first" class="video-js" muted></video>
                                         </div>
                                         <div>
-                                            <div class="video_title">监控名称</div>
+                                            <div class="video_title">{{videoPlayerName[2]}}</div>
                                             <video id="videoPlayer_second" class="video-js" muted></video>
                                         </div>
                                         <div>
-                                            <div class="video_title">监控名称</div>
+                                            <div class="video_title">{{videoPlayerName[3]}}</div>
                                             <video id="videoPlayer_third" class="video-js" muted></video>
                                         </div>
                                         <div>
-                                            <div class="video_title">监控名称</div>
+                                            <div class="video_title">{{videoPlayerName[4]}}</div>
                                             <video id="videoPlayer_fourth" class="video-js" muted></video>
                                         </div>
                                     </div>
@@ -285,18 +288,22 @@
 <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';
 var uploadedDataURL = require('../../public/json/taiyuan.json')
 import './taskScreen.css'
 import Videojs from "video.js"; // 引入Videojs 
+import FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
 
 export default {
     components:{
         myFlylineChartEnhanced,
         sacleBox,
-        myscrollBoard
+        myscrollBoard,
+       
+        FormTaskProcessViewer
     },
     data() {
         return {
@@ -306,6 +313,8 @@ export default {
 			systemSubjectId:'',
 			unitSubjectValue:'',
             subjectItem:{},
+            processDefinitionId: "taskOne:22:4775c887-d48a-11ed-9085-54bf641e8ec2",
+            processInstanceId:"d9b3f37b-d4ed-11ed-9fd5-52540097d374",
             moreFlag:true,
             dialogVisible:false,
             taskList:[],
@@ -335,9 +344,11 @@ export default {
 			currentTaskGrade:'',
 			unitSubGradeValue:'',
             gridData:[],
-            dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
+            dataSrc:['','','','',''],
 			completionRate:false,
-			playerList:[]
+			playerList:[],
+            videoPlayerName:['监控名称','监控名称','监控名称','监控名称','监控名称'],
+            videoList:['videoPlayerTask','videoPlayer_first','videoPlayer_second','videoPlayer_third','videoPlayer_fourth']
         }
     },
     methods:{
@@ -661,6 +672,7 @@ export default {
         // 初始化视频
         initVideo(nowPlayVideoUrl,id) {
 			let that =this
+      
             // 这些options属性也可直接设置在video标签上，见 muted
             let options = {
                 autoplay: true, // 设置自动播放
@@ -679,7 +691,55 @@ export default {
                 console.log(myPlyer === this); // 这里返回的是true
             });
 			this.playerList.push(myPlyer)
-        }
+            
+        },
+
+        async initUrl(subjectName){
+        //     		if(this.playerList.length){
+		// 	this.playerList.forEach((item)=>{
+		// 		item.dispose()
+		// 	})
+		// }
+            let params = {
+                subjectName: subjectName
+                };
+            const res = await request('/dt_screen/video/videos/getUnitUrl', 'post', params, false)
+            let index = 0;
+            this.dataSrc = ['','','','',''];
+            this.videoPlayerName=['监控名称','监控名称','监控名称','监控名称','监控名称'];
+           for(let item in res.data)
+           {
+            this.dataSrc[index]= res.data[item].url ;
+            this.videoPlayerName[index++] = res.data[item].name;
+           }
+
+            
+        },
+    changeVideo(subjectName){
+        // if(this.playerList.length){
+		// 	this.playerList.forEach((item)=>{
+		// 		item.dispose()
+		// 	})
+		// }
+         let params = {
+               
+                };
+            const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
+        this.initUrl(subjectName+'课目')
+        	setTimeout(() => {
+       
+        		let index = 0;
+                
+                this.playerList.forEach((item)=>{
+				item.src([{type: 'application/x-mpegURL',src: this.dataSrc[index++]},]); 
+                item.load(); 
+                item.play();
+			})
+       
+            
+      
+	}, 1000);
+    }
     },
     mounted(){
 		// 获取全部单位
@@ -688,11 +748,18 @@ export default {
 		this.getAllSystems()
         // 建立任务的weksocket链接
         this.initWebsoket()
-        this.initVideo(this.dataSrc,'videoPlayerTask')
-        this.initVideo(this.dataSrc,'videoPlayer_first')
-        this.initVideo(this.dataSrc,'videoPlayer_second')
-        this.initVideo(this.dataSrc,'videoPlayer_third')
-        this.initVideo(this.dataSrc,'videoPlayer_fourth')
+    //     this.initUrl()
+       
+    //     // 过14秒调用
+	setTimeout(() => {
+        for (let index = 0; index < this.dataSrc.length; index++) {
+        
+                this.initVideo(this.dataSrc[index],this.videoList[index])
+            
+        }
+	}, 1000);
+
+        
     },
 	beforeDestroy() {
 		if(this.playerList.length){
@@ -700,6 +767,7 @@ export default {
 				item.dispose()
 			})
 		}
+         const res = request('/dt_screen/video/videos/videoClose', 'get', params, false)
     },
 }
 </script>

vue.config.js

@@ -7,7 +7,11 @@ module.exports = {
         disableHostCheck: true,
         proxy: {
             '/dt_screen/': {
-                target: 'http://43.143.230.108/',
+                // target: 'http://43.143.230.108/',
+                target: 'http://localhost:8084/',
+                pathRewrite: {
+                    '^/dt_screen/':''
+                }
                 // changeOrigin: true,
             }
         }