14 changed files with 457 additions and 127 deletions
-
10src/assets/iconfonts/light/iconfont.css
-
2src/assets/iconfonts/light/iconfont.js
-
7src/assets/iconfonts/light/iconfont.json
-
BINsrc/assets/iconfonts/light/iconfont.ttf
-
BINsrc/assets/iconfonts/light/iconfont.woff
-
BINsrc/assets/iconfonts/light/iconfont.woff2
-
BINsrc/assets/images/system/process-img.png
-
189src/views/system/fourCharacterDetection/index.vue
-
132src/views/system/fourCharacterDetection/module/form.vue
-
9src/views/system/processManage/historicalProcess/index.vue
-
60src/views/system/processManage/index.vue
-
9src/views/system/processManage/modelDesign/index.vue
-
155src/views/system/processManage/processDeployment/index.vue
-
9src/views/system/processManage/runningProcess/index.vue
2
src/assets/iconfonts/light/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 1170 | Height: 680 | Size: 170 KiB |
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<!--表单渲染--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<!-- <span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> --> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="100px"> |
|||
<el-form-item label="一级分类" prop="oneLevel"> |
|||
<el-select v-model="form.oneLevel" placeholder="请选择" style="width:225px;"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="二级分类" prop="twoLevel"> |
|||
<el-select v-model="form.twoLevel" placeholder="请选择" style="width:225px;"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="检测编号" prop="number"> |
|||
<el-input v-model="form.number" /> |
|||
</el-form-item> |
|||
<el-form-item label="检测项目" prop="item"> |
|||
<el-input v-model="form.item" /> |
|||
</el-form-item> |
|||
<el-row> |
|||
<el-form-item label="检测目的" prop="purpose"> |
|||
<el-input v-model="form.purpose" style="width: 580px;" /> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="检测对象" prop="object"> |
|||
<el-input v-model="form.object" style="width: 580px;" /> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="依据和方法" prop="basis"> |
|||
<el-input v-model="form.basis" type="textarea" style="width: 580px;" /> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="检测方法" prop="method"> |
|||
<el-input v-model="form.method" style="width: 580px;" /> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-form-item label="是否开启" prop="isOpen"> |
|||
<el-radio-group v-model="form.isOpen"> |
|||
<el-radio label="1">是</el-radio> |
|||
<el-radio label="0">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
|||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { form } from '@crud/crud' |
|||
const defaultForm = { id: null, oneLevel: null, twoLevel: null, number: null, item: null, purpose: null, object: null, basis: null, method: null, isOpen: '1' } |
|||
export default { |
|||
mixins: [form(defaultForm)], |
|||
data() { |
|||
return { |
|||
options: [{ |
|||
value: '选项1', |
|||
label: '真实性检测' |
|||
}, { |
|||
value: '选项2', |
|||
label: '完整性检测' |
|||
}, { |
|||
value: '选项3', |
|||
label: '可用性检测' |
|||
}, { |
|||
value: '选项4', |
|||
label: '安全性检测' |
|||
}], |
|||
rules: { |
|||
oneLevel: [ |
|||
{ required: true, message: '请选择一级分类', trigger: 'change' } |
|||
], |
|||
twoLevel: [ |
|||
{ required: true, message: '请选择二级分类', trigger: 'change' } |
|||
], |
|||
number: [ |
|||
{ required: true, message: '检测编号不可为空', trigger: 'blur' } |
|||
], |
|||
item: [ |
|||
{ required: true, message: '检测项目不可为空', trigger: 'blur' } |
|||
], |
|||
purpose: [ |
|||
{ required: true, message: '检测目的不可为空', trigger: 'blur' } |
|||
], |
|||
object: [ |
|||
{ required: true, message: '检测对象不可为空', trigger: 'blur' } |
|||
], |
|||
basis: [ |
|||
{ required: true, message: '依据和方法不可为空', trigger: 'blur' } |
|||
], |
|||
isOpen: [ |
|||
{ required: true, message: '请选择是否开启', trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted: function() { |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.el-dialog .el-dialog__body .el-form-item:nth-child(odd){ |
|||
margin-right: 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div>历史流程</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -1,9 +1,65 @@ |
|||
<template> |
|||
<div>流程管理</div> |
|||
<div class="app-container tab-container"> |
|||
<div class="tab-content"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<span class="right-bottom-line" /> |
|||
<ul class="tab-nav"> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程部署<i /></li> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">模型设计<i /></li> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">运行中流程<i /></li> |
|||
<li :class="{ 'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">历史流程<i /></li> |
|||
<!-- 最右侧装饰img --> |
|||
<span class="tab-right-img" /> |
|||
</ul> |
|||
<component :is="comName" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import processDeployment from './processDeployment/index.vue' |
|||
import modelDesign from './modelDesign/index.vue' |
|||
import runningProcess from './runningProcess/index.vue' |
|||
import historicalProcess from './historicalProcess/index.vue' |
|||
|
|||
export default { |
|||
name: 'ProcessManage', |
|||
components: { |
|||
processDeployment, |
|||
modelDesign, |
|||
runningProcess, |
|||
historicalProcess |
|||
}, |
|||
data() { |
|||
return { |
|||
activeIndex: 0 |
|||
} |
|||
}, |
|||
computed: { |
|||
comName: function() { |
|||
if (this.activeIndex === 0) { |
|||
return 'processDeployment' |
|||
} else if (this.activeIndex === 1) { |
|||
return 'modelDesign' |
|||
} else if (this.activeIndex === 2) { |
|||
return 'runningProcess' |
|||
} else if (this.activeIndex === 3) { |
|||
return 'historicalProcess' |
|||
} |
|||
return 'processDeployment' |
|||
} |
|||
}, |
|||
methods: { |
|||
changeActiveTab(data) { |
|||
this.activeIndex = data |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
<style lang="scss" scoped> |
|||
.tab-content{ |
|||
height: calc(100vh - 179px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div>模型设计</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<div class="process-dep-container"> |
|||
<div class="head-container"> |
|||
<div class="head-left"> |
|||
<el-button size="mini"> |
|||
<i class="iconfont icon-xinzeng" /> |
|||
新增 |
|||
</el-button> |
|||
<el-button size="mini"> |
|||
<i class="iconfont icon-bianji" /> |
|||
编辑 |
|||
</el-button> |
|||
<el-button size="mini"> |
|||
<i class="iconfont icon-daochu" /> |
|||
导出 |
|||
</el-button> |
|||
</div> |
|||
<div class="head-right"> |
|||
<el-button size="mini"> |
|||
<i class="iconfont icon-jihuo" /> |
|||
激活 |
|||
</el-button> |
|||
<el-button size="mini"> |
|||
<i class="iconfont icon-guaqi" /> |
|||
挂起 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="process-dep-main"> |
|||
<ul class="process-list"> |
|||
<li> |
|||
<p>流程A</p> |
|||
<span class="process-on" /> |
|||
</li> |
|||
<li> |
|||
<p>流程B</p> |
|||
<span class="process-on" /> |
|||
</li> |
|||
<li> |
|||
<p>流程C</p> |
|||
<span class="process-off" /> |
|||
</li> |
|||
</ul> |
|||
<div class="process-info"> |
|||
<div class="process-info-txt"> |
|||
<div class="info-left"> |
|||
<p>当前版本：<span>1.0</span></p> |
|||
<p>部署时间：<span>2022-10-01 10:00:05</span></p> |
|||
</div> |
|||
<div class="info-right "> |
|||
<p>运行中：<span>2</span></p> |
|||
<p>已完成：<span>5</span></p> |
|||
</div> |
|||
</div> |
|||
<div class="process-info-img"> |
|||
<img src="~@/assets/images/system/process-img.png" alt=""> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.process-dep-container{ |
|||
min-height: calc(100vh - 300px); |
|||
} |
|||
.head-container{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
.head-left{ |
|||
width: 342px; |
|||
} |
|||
.head-right{ |
|||
flex: 1; |
|||
margin-left: 30px; |
|||
} |
|||
} |
|||
.process-dep-main{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
height: calc(100vh - 283px); |
|||
background-color: #F5F5F5 ; |
|||
border: 1px solid #E6E8ED; |
|||
.process-list{ |
|||
width: 342px; |
|||
background-color: #fff; |
|||
box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04); |
|||
li{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 16px; |
|||
font-size: 14px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
color: #0C0E1E; |
|||
cursor: pointer; |
|||
p{ |
|||
flex: 1; |
|||
} |
|||
span{ |
|||
display: block; |
|||
width: 9px; |
|||
height: 9px; |
|||
border-radius: 50%; |
|||
&.process-on{ |
|||
background-color: #3FE246; |
|||
} |
|||
&.process-off{ |
|||
background-color: #ED4A41; |
|||
} |
|||
} |
|||
&.active-li, |
|||
&:hover{ |
|||
background-color: #E8F2FF; |
|||
} |
|||
|
|||
} |
|||
} |
|||
.process-info{ |
|||
flex: 1; |
|||
padding:10px 30px; |
|||
.process-info-txt{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 14px; |
|||
line-height: 30px; |
|||
color: #0C0E1E; |
|||
margin-bottom: 10px; |
|||
.info-left{ |
|||
width: 50%; |
|||
} |
|||
.info-right{ |
|||
width: 50%; |
|||
text-align: right; |
|||
} |
|||
span{ |
|||
color: #545B65; |
|||
} |
|||
} |
|||
.process-info-img{ |
|||
height: calc(100vh - 374px); |
|||
& img{ |
|||
display: block; |
|||
height: 100%; |
|||
border: 1px solid #E6E8ED; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div>运行中流程</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue