d3&workflow

This commit is contained in:
shijing 2022-07-21 16:01:01 +08:00
parent cbb1920724
commit ca5084d20a
11 changed files with 1516 additions and 835 deletions

View File

@ -15,15 +15,17 @@
"core-js": "3.22.8",
"cropperjs": "1.5.12",
"crypto-js": "4.1.1",
"d3": "^7.6.1",
"dagre-d3": "^0.6.4",
"echarts": "5.3.2",
"element-plus": "2.2.3",
"json-editor-vue3": "^1.0.6",
"nprogress": "0.2.0",
"qrcodejs2": "0.0.2",
"sortablejs": "1.15.0",
"tinymce": "6.0.3",
"vue": "3.2.36",
"vue-i18n": "9.1.10",
"vue-json-editor": "^1.4.3",
"vue-router": "4.0.15",
"vuedraggable": "4.0.3",
"vuex": "4.0.2",

View File

@ -6,7 +6,7 @@ export default {
oplcate: {
list: {
name: "获取",
req: async function(data){
req: async function (data) {
return await http.get(
`${config.API_URL}/opm/opl_cate/`,
data
@ -15,22 +15,22 @@ export default {
},
update: {
name: "更新",
req: async function(id, data){
req: async function (id, data) {
return await http.put(
`${config.API_URL}/opm/opl_cate/${id}/`,
data);
}
},
read:{
read: {
name: "查询",
req: async function(id){
req: async function (id) {
return await http.get(
`${config.API_URL}/opm/opl_cate/${id}/`);
}
},
create: {
create: {
name: "创建",
req: async function(data){
req: async function (data) {
return await http.post(
`${config.API_URL}/opm/opl_cate/`,
data);
@ -38,79 +38,75 @@ export default {
},
delete: {
name: "删除",
req: async function(id){
req: async function (id) {
return await http.delete(
`${config.API_URL}/opm/opl_cate/${id}/`);
}
}
},
/*作业*/
operation: {
list: {
name: "获取",
req: async function(data){
return await http.get(
`${config.API_URL}/opm/operation/`,
data
);
}
},
read:{
name: "查询",
req: async function(id){
return await http.get(
`${config.API_URL}/opm/operation/${id}/`);
}
},
update: {
name: "更新",
req: async function(id, data){
return await http.put(
`${config.API_URL}/opm/operation/${id}/`,
data);
}
},
create: {
name: "创建",
req: async function(data){
return await http.post(
`${config.API_URL}/opm/operation/`,
data);
}
},
delete: {
name: "删除",
req: async function(id){
return await http.delete(
`${config.API_URL}/opm/operation/${id}/`);
}
/*作业*/
operation: {
list: {
name: "获取",
req: async function (data) {
return await http.get(
`${config.API_URL}/opm/operation/`,
data
);
}
},
read: {
name: "查询",
req: async function (id) {
return await http.get(
`${config.API_URL}/opm/operation/${id}/`);
}
},
update: {
name: "更新",
req: async function (id, data) {
return await http.put(
`${config.API_URL}/opm/operation/${id}/`,
data);
}
},
create: {
name: "创建",
req: async function (data) {
return await http.post(
`${config.API_URL}/opm/operation/`,
data);
}
},
delete: {
name: "删除",
req: async function (id) {
return await http.delete(
`${config.API_URL}/opm/operation/${id}/`);
}
}
},
/*作业许可证*/
opl: {
list: {
name: "获取",
req: async function(data){
req: async function (data) {
return await http.get(
`${config.API_URL}/opm/opl/`,
data
);
}
},
read:{
read: {
name: "查询",
req: async function(id){
req: async function (id) {
return await http.get(
`${config.API_URL}/opm/opl/${id}/`);
}
},
update: {
name: "更新",
req: async function(id, data){
req: async function (id, data) {
return await http.put(
`${config.API_URL}/opm/opl/${id}/`,
data);
@ -118,7 +114,7 @@ export default {
},
create: {
name: "创建",
req: async function(data){
req: async function (data) {
return await http.post(
`${config.API_URL}/opm/opl/`,
data);
@ -126,94 +122,94 @@ export default {
},
delete: {
name: "删除",
req: async function(id){
req: async function (id) {
return await http.delete(
`${config.API_URL}/opm/opl/${id}/`);
}
}
},
/*作业人员*/
worker: {
list: {
name: "获取",
req: async function(data){
return await http.get(
`${config.API_URL}/opm/opl_worker/`,
data
);
/*作业人员*/
worker: {
list: {
name: "获取",
req: async function (data) {
return await http.get(
`${config.API_URL}/opm/opl_worker/`,
data
);
}
},
read: {
name: "查询",
req: async function (id) {
return await http.get(
`${config.API_URL}/opm/opl_worker/${id}/`);
}
},
update: {
name: "更新",
req: async function (id, data) {
return await http.put(
`${config.API_URL}/opm/opl_worker/${id}/`,
data);
}
},
create: {
name: "创建",
req: async function (data) {
return await http.post(
`${config.API_URL}/opm/opl_worker/`,
data);
}
},
delete: {
name: "删除",
req: async function (id) {
return await http.delete(
`${config.API_URL}/opm/opl_worker/${id}/`);
}
}
},
read:{
name: "查询",
req: async function(id){
return await http.get(
`${config.API_URL}/opm/opl_worker/${id}/`);
}
},
update: {
name: "更新",
req: async function(id, data){
return await http.put(
`${config.API_URL}/opm/opl_worker/${id}/`,
data);
}
},
create: {
name: "创建",
req: async function(data){
return await http.post(
`${config.API_URL}/opm/opl_worker/`,
data);
}
},
delete: {
name: "删除",
req: async function(id){
return await http.delete(
`${config.API_URL}/opm/opl_worker/${id}/`);
}
}
},
/*气体检测*/
gas: {
list: {
name: "获取",
req: async function(data){
return await http.get(
`${config.API_URL}/opm/gas_check/`,
data
);
gas: {
list: {
name: "获取",
req: async function (data) {
return await http.get(
`${config.API_URL}/opm/gas_check/`,
data
);
}
},
read: {
name: "查询",
req: async function (id) {
return await http.get(
`${config.API_URL}/opm/gas_check/${id}/`);
}
},
update: {
name: "更新",
req: async function (id, data) {
return await http.put(
`${config.API_URL}/opm/gas_check/${id}/`,
data);
}
},
create: {
name: "创建",
req: async function (data) {
return await http.post(
`${config.API_URL}/opm/gas_check/`,
data);
}
},
delete: {
name: "删除",
req: async function (id) {
return await http.delete(
`${config.API_URL}/opm/gas_check/${id}/`);
}
}
},
read:{
name: "查询",
req: async function(id){
return await http.get(
`${config.API_URL}/opm/gas_check/${id}/`);
}
},
update: {
name: "更新",
req: async function(id, data){
return await http.put(
`${config.API_URL}/opm/gas_check/${id}/`,
data);
}
},
create: {
name: "创建",
req: async function(data){
return await http.post(
`${config.API_URL}/opm/gas_check/`,
data);
}
},
delete: {
name: "删除",
req: async function(id){
return await http.delete(
`${config.API_URL}/opm/gas_check/${id}/`);
}
}
},
}
}

View File

@ -0,0 +1,387 @@
<template>
<!--基本信息!-->
<el-form
ref="dialogForm"
:model="form"
:rules="rules"
label-width="110px"
style="margin: 10px 20px 0 20px"
>
<el-row>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="关联作业:">
<span>{{form.name}}</span>
</el-form-item>
</el-col>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="作业许可种类:">
<span>{{pagtitle}}</span>
</el-form-item>
</el-col>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="作业开始时间:">
<span>{{form.start_time}}</span>
</el-form-item>
</el-col>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="作业结束时间:">
<span>{{form.end_time}}</span>
</el-form-item>
</el-col>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="作业级别:">
<el-select v-model="form.level" placeholder="选择作业级别">
<el-option
v-for="item in leveloptions"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="作业部门:">
<el-cascader
placeholder="选择作业部门"
getCheckedNodes="true"
v-model="form.dept_do"
:options="deptoptions"
:props="{
expandTrigger: 'hover', //
label: 'label', //
value: 'value', //
emitPath: false, // false
}"
clearable
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="作业负责人:">
<el-select v-model="form.charger" placeholder="选择作业负责人">
<el-option
v-for="item in useroptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="12" :xs="24">
<el-form-item label="作业监护人:">
<el-select v-model="form.monitor" placeholder="选择作业监护人">
<el-option
v-for="item in useroptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="24" :sm="12" :xs="24">
<el-form-item label="风险选择:">
<el-checkbox-group v-model="form.risks_checked" disabled>
<el-checkbox
v-show="form.risks_checked.indexOf(item.id)>-1"
v-for="(item, index) in risklist"
:key="index"
:label="item.id"
>{{ item.name }}
</el-checkbox
>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :md="24" :sm="12" :xs="24">
<el-form-item label="其他风险:">
<span>{{form.other_risk}}</span>
</el-form-item>
</el-col>
<el-col :md="24" :sm="12" :xs="24">
<el-form-item label="措施选择:">
<el-checkbox-group v-model="form.measures_checked" disabled>
<el-checkbox
v-show="form.measures_checked.indexOf(item.id)>-1"
v-for="(item, index) in measurelist"
:key="index"
:label="item.id"
>{{ item.name }}
</el-checkbox
>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :md="24" :sm="12" :xs="24">
<el-card class="box-card">
<div class="clearfix">
<span>应急处置</span>
</div>
<div class="content">
<p>1发生火灾时立即使用消防器材边灭火边报告</p>
<p>2预判火势无法控制时应立即疏散人群并拨打110或119求救</p>
<p>
3发生人员烫伤时用清水对烫伤部位进行冲洗或浸泡用干净的纱布或衣物盖住被烫伤部位伤势严重时立即拨打120送医若贴身衣服与伤口粘在一起时可用剪刀剪开然后缓慢剥离衣物
</p>
</div>
</el-card>
<el-form-item label="其他应急处置:">
<span>{{form.other_emr}}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-card>
<div>作业人员</div>
<!--作业人员!-->
<scTable
ref="workerTable"
:data="apiworkerObj"
row-key="id"
hidePagination
stripe
hideDo
style="height: calc(100% - 60px);"
>
<el-table-column
label="#"
fixed="left"
type="index"
width="50"
></el-table-column>
<el-table-column label="姓名" prop="name" width="150">
<template #default="scope">
{{ scope.row.worker_.name }}
</template>
</el-table-column>
<el-table-column label="工作职责" prop="duty" width="150">
</el-table-column>
<el-table-column label="证书" prop="certificates" width="150">
<template #default="scope">
<el-tag v-for="item in scope.row.certificates_"
:key="item.number"
:label="item.name"
:value="item.number">{{item.name}}
</el-tag>
</template>
</el-table-column>
<el-table-column
label="创建时间"
prop="create_time"
width="150"
></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="100">
<template #default="scope">
<el-button text type="primary" size="small" @click="bltHandle(scope.row,'1')">绑卡</el-button>
<!--<el-button text type="primary" size="small" @click="bltHandle(scope.row,'0')">解绑</el-button>-->
</template>
</el-table-column>
</scTable>
</el-card>
<el-card>
<div>气体检测记录</div>
<!--气体检测记录!-->
<scTable
ref="gasTable"
:data="apigasObj"
row-key="id"
hidePagination
stripe
hideDo
>
<el-table-column
label="#"
fixed="left"
type="index"
width="50"
></el-table-column>
<el-table-column
label="检测部位"
prop="check_place"
min-width="150"
></el-table-column>
<el-table-column label="O2(%)" prop="o2" min-width="120"></el-table-column>
<el-table-column label="CO" prop="co" min-width="120"></el-table-column>
<el-table-column
label="可燃气体(V%LEL)"
prop="lel"
min-width="150"
></el-table-column>
<el-table-column
label="检验结论"
prop="is_ok"
min-width="150"
>
<template #default="scope">
{{ is_ok_[scope.row.is_ok] }}
</template>
</el-table-column>
<el-table-column
label="检测人"
prop="checker"
min-width="150"
>
<template #default="scope">
{{ scope.row.checker_.name }}
</template>
</el-table-column>
<el-table-column
label="检测时间"
prop="check_time"
min-width="150"
></el-table-column>
<el-table-column
label="创建时间"
prop="create_time"
min-width="150"
></el-table-column>
</scTable>
</el-card>
</template>
<script>
import {genTree} from "@/utils/verificate";
export default {
name: "scFire",
props: {
id: { type: String, default: "" },
},
data() {
return {
active: 0,
stepSuc: [0],
stepTitle: ["基本信息", "作业人员", "气体检测记录"],
query: {},
selection: [],
issave: false, //
search: {
keyword: null,
},
form: {
id: "",
start_time: null,
end_time: null,
operation: "",
cate: "",
risks_checked: [],
},
initForm: {},
oplcateCode: "",
operationId: "",
oplId: "",
leveloptions: [
{id: 10, name: "特殊动火"},
{id: 20, name: "一级动火"},
{id: 30, name: "二级动火"},
],
deptoptions: [],
useroptions: [],
risklist: [],
measurelist: [],
pagtitle: "",
dutyOptions: [
{value: 10, label: "作业人员"},
{value: 20, label: "起重司机"},
{value: 30, label: "司索人员"},
{value: 40, label: "起重指挥"},
{value: 40, label: "电工"},
],
certificatesOptions: [],
apiworkerObj: [],
workerdialog: false,
gasdialog: false,
apigasObj: [],
is_ok_: {
true: "正常",
false: "不正常",
},
};
},
mounted() {
let that = this;
that.oplId = that.id; //ID
this.$nextTick(()=>{
debugger;
console.log("this.getData");
that.getOplData();
that.getDept();
that.getUser();
that.getworkerList();
that.getgasList();
})
},
methods: {
//oplId
getOplData() {
debugger;
this.$API.opm.opl.read.req(this.oplId).then((res) => {
this.form = res;
this.oplcateId = res.cate;
this.operationId = res.operation;
this.getOperation();
this.getOplcates();
});
},
//ID===>
getOplcates() {
debugger;
this.$API.opm.oplcate.read.req(this.oplcateId).then((res) => {
console.log(res); //
this.pagtitle = res.name;
this.oplcateCode = res.code;
this.risklist = res.risk_options_; //
this.measurelist = res.measure_options_; //
});
},
//operationId
getOperation() {
this.$API.opm.operation.read.req(this.operationId).then((res) => {
this.form.start_time = res.start_time; //
this.form.end_time = res.end_time; //
this.form.name = res.name; //
});
},
//
getDept() {
this.$API.system.dept.list.req({page: 0}).then((res) => {
this.deptoptions = genTree(res);
});
},
//
getUser() {
this.$API.system.user.list.req({page: 0}).then((res) => {
this.useroptions = res;
});
},
//
getworkerList(id) {
this.$API.opm.worker.list.req({opl: id, page: 0}).then((res) => {
this.apiworkerObj = res;
});
},
//
getgasList(id) {
this.$API.opm.gas.list.req({opl: id, page: 0}).then((res) => {
this.apigasObj = res;
});
},
bltHandle(item,index){
if(index==='1'){
//
}else{
//
}
},
},
}
</script>
<style scoped>
</style>

View File

@ -23,6 +23,7 @@ import scQrCode from './components/scQrCode'
import scStatusIndicator from './components/scMini/scStatusIndicator'
import scTrend from './components/scMini/scTrend'
import scFire from './components/scOpl/scFire'
import auth from './directives/auth'
import role from './directives/role'
@ -62,6 +63,7 @@ export default {
app.component('scStatusIndicator', scStatusIndicator);
app.component('scUserSelect', scUserSelect);
app.component('scTrend', scTrend);
app.component('scFire', scFire);
//注册全局指令
app.directive('auth', auth);

View File

@ -1,278 +1,280 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<!-- <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button> -->
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input
v-model="search.keyword"
placeholder="名称"
clearable
@click="upsearch"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="upsearch"
></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="tableoperation"
:apiObj="apiObj"
row-key="id"
@selection-change="selectionChange"
stripe
@resetQuery="resetQuery"
>
<el-table-column
label="#"
fixed="left"
type="index"
width="50"
></el-table-column>
<el-table-column
label="作业简介"
prop="name"
width="200"
fixed="left"
></el-table-column>
<el-table-column label="作业状态" prop="state" width="180" fixed="left">
<template #default="scope">{{
stateoptions[scope.row.state]
}}</template></el-table-column
>
<el-table-column
label="生产状态"
prop="state_work"
width="180"
fixed="left"
></el-table-column>
<el-table-column
label="具体地点"
prop="place"
width="180"
></el-table-column>
<el-table-column
label="作业开始时间"
prop="start_time"
width="180"
></el-table-column>
<el-table-column
label="作业结束时间"
prop="end_time"
width="180"
></el-table-column>
<el-table-column
label="作业区域"
prop="area"
width="180"
></el-table-column>
<el-table-column
label="属地部门"
prop="dept_ter"
width="180"
></el-table-column>
<el-table-column
label="业务部门"
prop="dept_bus"
width="180"
></el-table-column>
<el-table-column
label="业务部门协调员"
prop="coordinator"
width="180"
></el-table-column>
<el-table-column
label="创建人"
prop="create_by"
width="180"
></el-table-column>
<el-table-column
label="创建时间"
prop="create_time"
width="180"
></el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="170">
<template #default="scope">
<el-button-group>
<el-button
text
type="primary"
size="small"
@click="creatopl(scope.row)"
>关联许可证</el-button
>
<el-button
text
type="primary"
size="small"
@click="table_show(scope.row, scope.$index)"
>查看</el-button
>
<el-button
text
type="warning"
size="small"
@click="table_edit(scope.row, scope.$index)"
>编辑</el-button
>
<el-button
text
type="primary"
size="small"
v-if="scope.row.state == 10"
@click="table_del(scope.row)"
>删除</el-button
>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
</el-container>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<!-- <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button> -->
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input
v-model="search.keyword"
placeholder="名称"
clearable
@click="upsearch"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="upsearch"
></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="tableoperation"
:apiObj="apiObj"
row-key="id"
@selection-change="selectionChange"
stripe
@resetQuery="resetQuery"
>
<el-table-column
label="#"
fixed="left"
type="index"
width="50"
></el-table-column>
<el-table-column
label="作业简介"
prop="name"
width="200"
fixed="left"
></el-table-column>
<el-table-column label="作业状态" prop="state" width="180" fixed="left">
<template #default="scope">{{stateoptions[scope.row.state]}}</template>
</el-table-column>
<el-table-column
label="生产状态"
prop="state_work"
width="180"
fixed="left"
></el-table-column>
<el-table-column
label="具体地点"
prop="place"
width="180"
></el-table-column>
<el-table-column
label="作业开始时间"
prop="start_time"
width="180"
></el-table-column>
<el-table-column
label="作业结束时间"
prop="end_time"
width="180"
></el-table-column>
<el-table-column
label="作业区域"
prop="area"
width="180"
></el-table-column>
<el-table-column
label="属地部门"
prop="dept_ter"
width="180"
></el-table-column>
<el-table-column
label="业务部门"
prop="dept_bus"
width="180"
></el-table-column>
<el-table-column
label="业务部门协调员"
prop="coordinator"
width="180"
></el-table-column>
<el-table-column
label="创建人"
prop="create_by"
width="180"
></el-table-column>
<el-table-column
label="创建时间"
prop="create_time"
width="180"
></el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="170">
<template #default="scope">
<el-button-group>
<el-button
text
type="primary"
size="small"
@click="creatopl(scope.row)"
>许可证
</el-button>
<el-button
text
type="primary"
size="small"
@click="table_show(scope.row, scope.$index)"
>查看
</el-button>
<el-button
v-if="scope.row.state === 10"
text
type="warning"
size="small"
@click="table_edit(scope.row, scope.$index)"
>编辑
</el-button>
<el-button
text
type="danger"
size="small"
v-if="scope.row.state === 10"
@click="table_del(scope.row)"
>删除
</el-button>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
</el-container>
</template>
<script>
import saveDialog from "./operation_form.vue";
export default {
name: "operation",
components: {
saveDialog,
},
data() {
return {
dialog: {
save: false,
permission: false,
},
apiObj: this.$API.opm.operation.list,
query: {},
selection: [],
search: {
keyword: null,
},
stateoptions: {
10: "创建中",
20: "审批中",
30: "待作业",
40: "作业中",
50: "已关闭",
},
};
},
methods: {
//
add() {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("add");
});
},
<script>
import saveDialog from "./operation_form.vue";
//
table_edit(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("edit").setData(row);
});
},
//
table_show(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("show").setData(row);
});
},
//
creatopl(row) {
this.$router.push({
name: "opl",
query: {
id: row.id,
},
});
},
//
permission() {
this.dialog.permission = true;
this.$nextTick(() => {
this.$refs.permissionDialog.open();
});
},
//
table_del(row) {
this.$API.opm.operation.delete
.req(row.id)
.then((res) => {
this.$message.success("删除成功");
this.$refs.tableoperation.refresh();
return res;
})
.catch((err) => {
return err;
});
},
export default {
name: "operation",
components: {
saveDialog,
},
data() {
return {
dialog: {
save: false,
permission: false,
},
apiObj: this.$API.opm.operation.list,
query: {},
selection: [],
search: {
keyword: null,
},
stateoptions: {
10: "创建中",
20: "审批中",
30: "待作业",
40: "作业中",
50: "已关闭",
},
};
},
methods: {
//
selectionChange(selection) {
this.selection = selection;
},
//
changeSwitch(val, row) {
row.status = row.status == "1" ? "0" : "1";
row.$switch_status = true;
setTimeout(() => {
delete row.$switch_status;
row.status = val;
this.$message.success("操作成功");
}, 500);
},
//
upsearch() {},
//ID
filterTree(id) {
var target = null;
function filter(tree) {
tree.forEach((item) => {
if (item.id == id) {
target = item;
}
if (item.children) {
filter(item.children);
}
});
}
filter(this.$refs.tableoperation.tableData);
return target;
},
//
handleSaveSuccess(data, mode) {
if (mode == "add") {
this.$refs.tableoperation.refresh();
} else if (mode == "edit") {
this.$refs.tableoperation.refresh();
}
},
resetQuery() {
this.query = {};
},
},
};
</script>
//
add() {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("add");
});
},
//
table_edit(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("edit").setData(row);
});
},
//
table_show(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("show").setData(row);
});
},
//
creatopl(row) {
this.$router.push({
name: "opl",
query: {
id: row.id,
},
});
},
//
permission() {
this.dialog.permission = true;
this.$nextTick(() => {
this.$refs.permissionDialog.open();
});
},
//
table_del(row) {
this.$API.opm.operation.delete
.req(row.id)
.then((res) => {
this.$message.success("删除成功");
this.$refs.tableoperation.refresh();
return res;
})
.catch((err) => {
return err;
});
},
//
selectionChange(selection) {
this.selection = selection;
},
//
changeSwitch(val, row) {
row.status = row.status == "1" ? "0" : "1";
row.$switch_status = true;
setTimeout(() => {
delete row.$switch_status;
row.status = val;
this.$message.success("操作成功");
}, 500);
},
//
upsearch() {
},
//ID
filterTree(id) {
var target = null;
function filter(tree) {
tree.forEach((item) => {
if (item.id == id) {
target = item;
}
if (item.children) {
filter(item.children);
}
});
}
filter(this.$refs.tableoperation.tableData);
return target;
},
//
handleSaveSuccess(data, mode) {
if (mode == "add") {
this.$refs.tableoperation.refresh();
} else if (mode == "edit") {
this.$refs.tableoperation.refresh();
}
},
resetQuery() {
this.query = {};
},
},
};
</script>

View File

@ -1,415 +1,466 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button
icon="el-icon-plus"
style="margin: 3px 0px 0px 10px"
v-for="(item, index) in oplcateList"
:key="index"
:title="item.name"
type="primary"
@click="addFire(item.id, item.name)"
>
{{ item.name }}
</el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input
v-model="search.keyword"
placeholder="名称"
clearable
@click="upsearch"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="upsearch"
></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:data="apiObj"
row-key="id"
@selection-change="selectionChange"
stripe
@resetQuery="resetQuery"
>
<el-table-column
label="#"
type="index"
width="50"
fixed="left"
></el-table-column>
<el-table-column
label="作业许可编号"
prop="number"
width="120"
fixed="left"
></el-table-column>
<el-table-column
label="作业级别"
prop="level"
width="120"
fixed="left"
></el-table-column>
<el-table-column
label="许可证种类"
prop="cate_name"
width="120"
fixed="left"
></el-table-column>
<el-table-column
label="作业开始时间"
prop="start_time"
width="180"
></el-table-column>
<el-table-column
label="作业结束时间"
prop="end_time"
width="180"
></el-table-column>
<el-table-column
label="作业部门"
prop="dept_do"
width="180"
></el-table-column>
<el-table-column
label="作业负责人"
prop="charger"
width="180"
></el-table-column>
<el-table-column
label="作业监护人"
prop="monitor"
width="180"
></el-table-column>
<el-container>
<el-header>
<div class="left-panel">
<el-button
icon="el-icon-plus"
style="margin: 3px 0px 0px 10px"
v-for="(item, index) in oplcateList"
:key="index"
:title="item.name"
type="primary"
@click="addFire(item.id, item.name)"
>
{{ item.name }}
</el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input
v-model="search.keyword"
placeholder="名称"
clearable
@click="upsearch"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="upsearch"
></el-button>
</div>
</div>
</el-header>
<el-card>
<el-descriptions title="作业详情" :column="3">
<el-descriptions-item label="作业名称:">
{{operationObj.name}}
</el-descriptions-item>
<el-descriptions-item label="具体地点:">
{{operationObj.place }}
</el-descriptions-item>
<el-descriptions-item label="生产状态:">
{{operationObj.state_work }}
</el-descriptions-item>
<el-descriptions-item label="状态:">
{{state_[operationObj.state] }}
</el-descriptions-item>
<el-descriptions-item label="开始时间:">
{{operationObj.start_time }}
</el-descriptions-item>
<el-descriptions-item label="结束时间:">
{{operationObj.end_time }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-main class="nopadding">
<scTable
ref="table"
:data="apiObj"
row-key="id"
@selection-change="selectionChange"
stripe
@resetQuery="resetQuery"
>
<el-table-column
label="#"
type="index"
width="50"
fixed="left"
></el-table-column>
<el-table-column
label="作业许可编号"
prop="number"
width="120"
fixed="left"
></el-table-column>
<el-table-column
label="作业级别"
prop="level"
width="120"
fixed="left"
></el-table-column>
<el-table-column
label="许可证种类"
prop="cate_name"
width="120"
fixed="left"
></el-table-column>
<el-table-column
label="作业开始时间"
prop="start_time"
width="180"
></el-table-column>
<el-table-column
label="作业结束时间"
prop="end_time"
width="180"
></el-table-column>
<el-table-column
label="作业部门"
prop="dept_do"
width="180"
></el-table-column>
<el-table-column
label="作业负责人"
prop="charger"
width="180"
></el-table-column>
<el-table-column
label="作业监护人"
prop="monitor"
width="180"
></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="170">
<template #default="scope">
<el-button-group>
<el-button
text
type="primary"
size="small"
@click="table_show(scope.row, scope.$index)"
>查看</el-button
>
<el-button
text
type="warning"
size="small"
@click="table_edit(scope.row, scope.$index)"
>编辑</el-button
>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-table-column label="操作" fixed="right" align="right" width="170">
<template #default="scope">
<el-button-group>
<el-button
text
type="primary"
size="small"
@click="table_show(scope.row, scope.$index)"
>查看
</el-button
>
<el-button
v-if="operationObj.state===10"
text
type="warning"
size="small"
@click="table_edit(scope.row, scope.$index)"
>编辑
</el-button
>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
<el-drawer :size="'50%'" v-model="showLimited" :title="oplName+'作业许可证详情'">
<sc-fire :id="oplId"></sc-fire>
</el-drawer>
</el-container>
</template>
<script>
export default {
name: "opl",
components: {},
data() {
return {
dialog: {
save: false,
permission: false,
},
apiObj: [],
query: {},
selection: [],
search: {
keyword: null,
},
oplcateList: {},
};
},
<script>
import ScFire from "../../components/scOpl/scFire";
mounted() {
this.getoplcate();
this.getopllist();
},
methods: {
//
getopllist() {
this.$API.opm.opl.list.req({ operation:this.$route.query.id, page: 0 }).then((res) => {
this.apiObj = res;
});
},
export default {
name: "opl",
components: {ScFire},
data() {
return {
dialog: {
save: false,
permission: false,
},
apiObj: [],
query: {},
selection: [],
search: {
keyword: null,
},
oplcateList: {},
operationObj: {},
showLimited: false,
oplId: '',
state_: {
10: "创建中",
20: "审批中",
30: "待入厂",
40: "进行中",
50: "已完成",
},
};
},
//
getoplcate() {
this.$API.opm.oplcate.list.req({ page: 0 }).then((res) => {
this.oplcateList = res;
console.log(res);
});
},
mounted() {
this.getoplcate();
this.getopllist();
this.getOperation();
},
methods: {
getOperation(){
this.$API.opm.operation.read.req(this.$route.query.id).then((res) => {
debugger;
this.operationObj = res;
});
},
//
getopllist() {
this.$API.opm.opl.list.req({operation: this.$route.query.id, page: 0}).then((res) => {
this.apiObj = res;
});
},
//
addFire(id, name) {
switch (name) {
case "动火":
this.$router.push({
name: "fire",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "有限空间":
this.$router.push({
name: "space",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "清库":
this.$router.push({
name: "clear",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "高处":
this.$router.push({
name: "high",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "吊装":
this.$router.push({
name: "hoisting",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "预热器清堵":
this.$router.push({
name: "preheat",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "篦冷机清大块":
this.$router.push({
name: "cooler",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "动土":
this.$router.push({
name: "soil",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "临时用电":
this.$router.push({
name: "usecl",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
}
},
//
table_edit(row) {
switch (row.cate_name) {
case "动火":
this.$router.push({
name: "fire",
query: {
oplId: row.id, //ID
},
});
break;
case "有限空间":
this.$router.push({
name: "space",
query: {
oplId: row.id, //ID
},
});
break;
case "清库":
this.$router.push({
name: "clear",
query: {
oplId: row.id, //ID
},
});
break;
case "高处":
this.$router.push({
name: "high",
query: {
oplId: row.id, //ID
},
});
break;
case "吊装":
this.$router.push({
name: "hoisting",
query: {
oplId: row.id, //ID
},
});
break;
case "预热器清堵":
this.$router.push({
name: "preheat",
query: {
oplId: row.id, //ID
},
});
break;
case "篦冷机清大块":
this.$router.push({
name: "cooler",
query: {
oplId: row.id, //ID
},
});
break;
case "动土":
this.$router.push({
name: "soil",
query: {
oplId: row.id, //ID
},
});
break;
case "临时用电":
this.$router.push({
name: "usecl",
query: {
oplId: row.id, //ID
},
});
break;
}
},
//
table_show(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("show").setData(row);
});
},
//
permission() {
this.dialog.permission = true;
this.$nextTick(() => {
this.$refs.permissionDialog.open();
});
},
//
async table_del(row) {
var reqData = { id: row.id };
var res = await this.$API.demo.post.post(reqData);
if (res.code == 200) {
this.$refs.table.refresh();
this.$message.success("删除成功");
} else {
this.$alert(res.message, "提示", { type: "error" });
}
},
//
async batch_del() {
this.$confirm(
`确定删除选中的 ${this.selection.length} 项吗?如果删除项中含有子集将会被一并删除`,
"提示",
{
type: "warning",
}
)
.then(() => {
const loading = this.$loading();
this.$refs.table.refresh();
loading.close();
this.$message.success("操作成功");
})
.catch(() => {});
},
//
selectionChange(selection) {
this.selection = selection;
},
//
changeSwitch(val, row) {
row.status = row.status == "1" ? "0" : "1";
row.$switch_status = true;
setTimeout(() => {
delete row.$switch_status;
row.status = val;
this.$message.success("操作成功");
}, 500);
},
//
upsearch() {},
//ID
filterTree(id) {
var target = null;
function filter(tree) {
tree.forEach((item) => {
if (item.id == id) {
target = item;
}
if (item.children) {
filter(item.children);
}
});
}
filter(this.$refs.table.tableData);
return target;
},
//
handleSaveSuccess(data, mode) {
if (mode == "add") {
this.$refs.table.refresh();
} else if (mode == "edit") {
this.$refs.table.refresh();
}
},
resetQuery() {
this.query = {};
},
},
};
</script>
//
getoplcate() {
this.$API.opm.oplcate.list.req({page: 0}).then((res) => {
this.oplcateList = res;
console.log(res);
});
},
//
addFire(id, name) {
switch (name) {
case "动火":
this.$router.push({
name: "fire",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "有限空间":
this.$router.push({
name: "space",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "清库":
this.$router.push({
name: "clear",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "高处":
this.$router.push({
name: "high",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "吊装":
this.$router.push({
name: "hoisting",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "预热器清堵":
this.$router.push({
name: "preheat",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "篦冷机清大块":
this.$router.push({
name: "cooler",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "动土":
this.$router.push({
name: "soil",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
case "临时用电":
this.$router.push({
name: "usecl",
query: {
operationid: this.$route.query.id, //ID
oplcateId: id, //ID
oplId: "", //ID
},
});
break;
}
},
//
table_edit(row) {
switch (row.cate_name) {
case "动火":
this.$router.push({
name: "fire",
query: {
oplId: row.id, //ID
},
});
break;
case "有限空间":
this.$router.push({
name: "space",
query: {
oplId: row.id, //ID
},
});
break;
case "清库":
this.$router.push({
name: "clear",
query: {
oplId: row.id, //ID
},
});
break;
case "高处":
this.$router.push({
name: "high",
query: {
oplId: row.id, //ID
},
});
break;
case "吊装":
this.$router.push({
name: "hoisting",
query: {
oplId: row.id, //ID
},
});
break;
case "预热器清堵":
this.$router.push({
name: "preheat",
query: {
oplId: row.id, //ID
},
});
break;
case "篦冷机清大块":
this.$router.push({
name: "cooler",
query: {
oplId: row.id, //ID
},
});
break;
case "动土":
this.$router.push({
name: "soil",
query: {
oplId: row.id, //ID
},
});
break;
case "临时用电":
this.$router.push({
name: "usecl",
query: {
oplId: row.id, //ID
},
});
break;
}
},
//
table_show(row) {
this.showLimited = true;
this.oplId = row.id;
this.oplName = row.cate_name;
this.workId = row.workers[0];
},
//
permission() {
this.dialog.permission = true;
this.$nextTick(() => {
this.$refs.permissionDialog.open();
});
},
//
async table_del(row) {
var reqData = {id: row.id};
var res = await this.$API.demo.post.post(reqData);
if (res.code == 200) {
this.$refs.table.refresh();
this.$message.success("删除成功");
} else {
this.$alert(res.message, "提示", {type: "error"});
}
},
//
async batch_del() {
this.$confirm(
`确定删除选中的 ${this.selection.length} 项吗?如果删除项中含有子集将会被一并删除`,
"提示",
{
type: "warning",
}
)
.then(() => {
const loading = this.$loading();
this.$refs.table.refresh();
loading.close();
this.$message.success("操作成功");
})
.catch(() => {
});
},
//
selectionChange(selection) {
this.selection = selection;
},
//
changeSwitch(val, row) {
row.status = row.status == "1" ? "0" : "1";
row.$switch_status = true;
setTimeout(() => {
delete row.$switch_status;
row.status = val;
this.$message.success("操作成功");
}, 500);
},
//
upsearch() {
},
//ID
filterTree(id) {
var target = null;
function filter(tree) {
tree.forEach((item) => {
if (item.id == id) {
target = item;
}
if (item.children) {
filter(item.children);
}
});
}
filter(this.$refs.table.tableData);
return target;
},
//
handleSaveSuccess(data, mode) {
if (mode == "add") {
this.$refs.table.refresh();
} else if (mode == "edit") {
this.$refs.table.refresh();
}
},
resetQuery() {
this.query = {};
},
},
};
</script>

View File

@ -80,15 +80,15 @@
this.list = res;
},
handleShow(row) {
let workflowKey = row.workflow_.key;
let cateType = '',projectId='';
if(workflowKey==='visit'){
cateType = row.workflow_.key;
let cateType = row.workflow_.key;
let projectId='';
if(cateType==='visit'){
projectId = row.ticket_data.visit;
}else if(workflowKey==='rparty'){
cateType = row.workflow_.key;
}else if(cateType==='rparty'){
projectId = row.ticket_data.rpj;
}else{}
}else{
projectId = row.ticket_data.opl;
}
this.$router.push({
name: "visitdetail",
query: {

View File

@ -138,11 +138,20 @@
},
//
handleDetail(row){
debugger;
console.log(row)
let projectId = '';
let catetype = row.workflow_.key;
if(catetype==='visit'){
projectId=row.ticket_data.visit;
}else if(catetype==='Fire'){
projectId=row.ticket_data.opl;
}
this.$router.push({
name: "visitdetail",
query: {
id: row.id,
projectId:row.ticket_data.visit,
projectId:projectId,
catetype:row.workflow_.key
},
});

View File

@ -83,14 +83,15 @@
</el-select>
</el-form-item>
<el-form-item label="条件表达式" prop="condition_expression">
<vue-json-editor
<!--<vue-json-editor
style="width:100%"
v-model="addForm.condition_expression"
:showBtns="false"
:mode="'code'"
lang="zh"
@json-change="onJsonChange"
/>
/>-->
<JsonEditorVue class="editorJson" v-model="addForm.condition_expression"/>
</el-form-item>
<el-form-item label="属性类型" prop="attribute_type">
<el-select style="width: 100%" v-model="addForm.attribute_type" placeholder="请选择">
@ -120,10 +121,11 @@
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
// import vueJsonEditor from 'vue-json-editor'
import JsonEditorVue from 'json-editor-vue3'
export default {
name: "transform",
components: { vueJsonEditor },
components: { JsonEditorVue },
data() {
return {
id: sessionStorage.getItem('jinYuWorkflowId'),
@ -224,5 +226,7 @@
</script>
<style scoped>
.editorJson{
width: 100%;
}
</style>

View File

@ -78,6 +78,34 @@
</div>
<show-dialog v-if="rpjShow" ref="showDialog"></show-dialog>
</el-card>
<el-card style="margin-left: 10px; margin-bottom: 10px" v-else>
<el-descriptions title="作业许可证" :column="3">
<el-descriptions-item label="工单流水号:">
{{ticketDetail.sn }}
</el-descriptions-item>
<el-descriptions-item label="许可证编号:">
{{oplDetail.number }}
</el-descriptions-item>
<el-descriptions-item label="许可证类别:">
{{oplDetail.cate_name}}
</el-descriptions-item>
<el-descriptions-item label="级别:">
{{oplDetail.level }}
</el-descriptions-item>
<el-descriptions-item label="开始时间:">
{{oplDetail.start_time }}
</el-descriptions-item>
<el-descriptions-item label="结束时间:">
{{oplDetail.end_time }}
</el-descriptions-item>
</el-descriptions>
<div style="text-align: center">
<el-link type="primary" @click="showMoreInfo"> 更多信息 </el-link>
</div>
<show-dialog v-if="rpjShow" ref="showDialog"></show-dialog>
</el-card>
<el-card style="margin-left: 10px; margin-bottom: 10px" v-if="type!=='show'">
<scTitle title="处理"></scTitle>
<el-form :model="form" ref="addForm" label-width="100px" label-position="left">
@ -156,6 +184,7 @@
projectId: "",//id
userName: "",
rpjDetail: {},
oplDetail: {},
ticketDetail: [],
visitDetail: [],
employeeLists: [],
@ -204,10 +233,14 @@
},
mounted() {
debugger;
if(this.cateType==='visit'){
this.getVisit();
}else if(this.cateType==='rparty'){
this.getRpj();
}else{
debugger;
this.getOpl();
}
this.getticketItem();
this.getBtns();
@ -246,6 +279,13 @@
this.rpjDetail = res;
});
},
//
getOpl(){
this.$API.opm.opl.read.req(this.projectId).then((res) => {
debugger;
this.oplDetail = res;
});
},
//-start
addNode(){
this.limitedAdd = true;

View File

@ -15,6 +15,7 @@
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id">
<el-table-column label="#" type="index"></el-table-column>
<el-table-column label="ID" prop="id" min-width="120"></el-table-column>
<el-table-column label="工作流名称" prop="name" min-width="250"></el-table-column>
<el-table-column label="标识" prop="key" min-width="250"></el-table-column>
@ -32,6 +33,13 @@
<el-divider direction="vertical"></el-divider>
<el-button link size="small" type="primary" @click="workflowEdit(scope.row)">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-link
type="primary"
@click="handleWatch(scope)"
>
查看流程图
</el-link>
<el-divider direction="vertical"></el-divider>
<el-popconfirm title="确定删除吗?" @confirm="workflowDel(scope.row)">
<template #reference>
<el-button link size="small" type="danger">删除</el-button>
@ -42,6 +50,15 @@
</scTable>
</el-main>
</el-container>
<div class="svgMark" v-if="limitedWatch" @click="closeMark">
<div class="svgWrapper">
<div class="svgItem">工作流流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div>
<div style="width: 90%;margin: auto;">
<svg height=1800 id="mySvg" style="width:100%!important;">
</svg>
</div>
</div>
</div>
<el-dialog :title="titleMap[type]" v-model="limitedVisible">
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" label-position="left">
<el-form-item label="名称" prop="name">
@ -86,7 +103,10 @@
</template>
</el-dialog>
</template>
<script>
import dagreD3 from 'dagre-d3'
import * as d3 from 'd3'
export default {
name: 'index',
data() {
@ -101,6 +121,7 @@
editId: null,
isSaving: false,
limitedVisible: false,
limitedWatch: false,
type: "add",
titleMap: {
add: '新增',
@ -234,7 +255,104 @@
} else if (type == 'edit') {
this.$refs.table.refresh()
}
}
},
handleWatch(scope) {
debugger;
let that = this;
let workFlow = scope.row.id;
that.limitedWatch = true;
that.$nextTick(() => {
var g = new dagreD3.graphlib.Graph().setGraph({
rankdir: 'DL',
nodesep: 100,
edgesep: 50,//线
ranksep: 50,//
marginx: 160,
marginy: 20,
});
//state
this.$API.wf.workflow.states.req(workFlow).then((response) => {
if (!response.err_msg) {
let nodes = response;
//
nodes.forEach((item) => {
debugger;
g.setNode(item.id, {
//
label: item.name,
//
shape: 'rect',
toolText: item.name,
//
style: "fill:#fff;stroke:#000",
labelStyle: "fill:#000;",
rx: 5,//
ry: 5
});
});
debugger;
console.log(g.nodes());
g.nodes().forEach(function (v) {
debugger;
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
});
//线
this.$API.wf.workflow.transitions.req(workFlow).then((res) => {
if (!res.err_msg) {
let transitionList = res;
debugger;
transitionList.forEach((transition0) => {
if (transition0.condition_expression.length > 0) {
debugger;
g.setNode(transition0.source_state_.id + 100000, {
label: "条件表达式",
style: "stroke: #000;fill: #afa",
shape: "diamond"
});
g.setEdge(transition0.source_state_.id, transition0.source_state_.id + 100000, {
//
label: transition0.name,
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
});
let condition_expression = transition0.condition_expression;
condition_expression.forEach(condition_expression0 => {
g.setEdge(transition0.source_state_.id + 100000, condition_expression0.target_state, {
label: condition_expression0.label,
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
})
})
} else {
g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
//
label: transition0.name,
//
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 线
});
}
})
g.nodes().length - 1
g.nodes().forEach(function (v) {
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
});
//
let render = new dagreD3.render();
// svg g.
let svg = d3.select('#mySvg');
let svgGroup = svg.append('g');
// .
render(d3.select("svg g"), g);
} else {
}
});
}
});
})
},
closeMark() {
this.limitedWatch = false;
},
}
}
</script>
@ -245,5 +363,75 @@
border: 1px solid #dcdfe6;
margin-bottom: 10px;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
background-color: #fefefe;
border-radius: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
background-color: #f5f5f5;
}
.svgMark {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
z-index: 2000;
background: rgba(0, 0, 0, .3);
}
.svgWrapper {
background: #fff;
width: 800px;
margin:0 auto;
height: 100vh;
text-align: center;
border-radius: 2px;
overflow-y: scroll;
}
.svgItem {
padding: 20px 40px 0;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
font-size: 18px;
display: flex;
justify-content: space-between;
}
svg {
font-size: 14px;
}
.node rect {
stroke: #606266;
fill: #fff;
}
.edgePath path {
stroke: #606266;
fill: #333;
stroke-width: 1.5px;
}
g.conditions > rect {
fill: #00ffd0;
stroke: #000;
}
.el-icon-close {
cursor: pointer;
}
</style>