zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix conflict

This commit is contained in:
曹前明 2022-07-22 14:24:25 +08:00
parent 48e83cc4fa 03842ca8e9
commit 50f025455a
11 changed files with 407 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/model/wf.js
View File

@ -176,7 +176,13 @@ export default {
req: async function(id){ req: async function(id){
return await http.get( `${config.API_URL}/wf/ticketflow/${id}/`); return await http.get( `${config.API_URL}/wf/ticketflow/${id}/`);
} }
} },
retryScript: {
name: "重试脚本",
req: async function(id){
return await http.post(`${config.API_URL}/wf/ticket/${id}/retry_script/`);
}
},
}, },
field:{ field:{
list: { list: {

49
src/config/route.js
View File

@ -172,7 +172,8 @@ const routes = [
"meta": { "meta": {
"title": "工作流配置", "title": "工作流配置",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["workflow"]
}, },
"component": "wf/configuration" "component": "wf/configuration"
} }
@ -194,6 +195,7 @@ const routes = [
"meta": { "meta": {
"title": "我创建的", "title": "我创建的",
"icon": "el-icon-folder-add", "icon": "el-icon-folder-add",
"perms": ["ownerwork"]
}, },
"component": "wf/ownerwork" "component": "wf/ownerwork"
} }
@ -205,6 +207,7 @@ const routes = [
"meta": { "meta": {
"title": "待办工单", "title": "待办工单",
"icon": "el-icon-folder-opened", "icon": "el-icon-folder-opened",
"perms": ["duty"]
}, },
"component": "wf/dutywork" "component": "wf/dutywork"
}, },
@ -214,6 +217,7 @@ const routes = [
"meta": { "meta": {
"title": "我处理的", "title": "我处理的",
"icon": "el-icon-expand", "icon": "el-icon-expand",
"perms": ["worked"]
}, },
"component": "wf/worked" "component": "wf/worked"
}, },
@ -223,6 +227,7 @@ const routes = [
"meta": { "meta": {
"title": "抄送我的", "title": "抄送我的",
"icon": "el-icon-edit-pen", "icon": "el-icon-edit-pen",
"perms": ["ccwork"]
}, },
"component": "wf/ccwork" "component": "wf/ccwork"
}, },
@ -232,7 +237,8 @@ const routes = [
"meta": { "meta": {
"title": "工单详情", "title": "工单详情",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["allwork"]
}, },
"component": "wf/visitdetail" "component": "wf/visitdetail"
}, },
@ -277,7 +283,8 @@ const routes = [
"meta": { "meta": {
"title": "作业许可证", "title": "作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/opl" "component": "opm/opl"
}, },
@ -287,7 +294,8 @@ const routes = [
"meta": { "meta": {
"title": "动火作业许可证", "title": "动火作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/fire" "component": "opm/fire"
}, },
@ -297,7 +305,8 @@ const routes = [
"meta": { "meta": {
"title": "有限空间作业许可证", "title": "有限空间作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/space" "component": "opm/space"
}, },
@ -307,7 +316,8 @@ const routes = [
"meta": { "meta": {
"title": "清库作业许可证", "title": "清库作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/clear" "component": "opm/clear"
} , } ,
@ -317,7 +327,8 @@ const routes = [
"meta": { "meta": {
"title": "高处作业许可证", "title": "高处作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/high" "component": "opm/high"
}, },
@ -327,7 +338,8 @@ const routes = [
"meta": { "meta": {
"title": "吊装作业许可证", "title": "吊装作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/hoisting" "component": "opm/hoisting"
}, },
@ -337,7 +349,8 @@ const routes = [
"meta": { "meta": {
"title": "预热器清堵作业许可证", "title": "预热器清堵作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/preheat" "component": "opm/preheat"
}, },
@ -347,7 +360,8 @@ const routes = [
"meta": { "meta": {
"title": "篦冷机清大块作业许可证", "title": "篦冷机清大块作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/cooler" "component": "opm/cooler"
}, },
@ -357,7 +371,8 @@ const routes = [
"meta": { "meta": {
"title": "动土作业许可证", "title": "动土作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/soil" "component": "opm/soil"
}, },
@ -367,7 +382,8 @@ const routes = [
"meta": { "meta": {
"title": "临时用电作业许可证", "title": "临时用电作业许可证",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["operation"]
}, },
"component": "opm/usecl" "component": "opm/usecl"
} }
@ -440,7 +456,7 @@ const routes = [
"title": "入厂项目相关信息", "title": "入厂项目相关信息",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true, "hidden": true,
"perms": ["rpjadd"] "perms": ["rpj"]
}, },
"component": "rpm/rpjadd" "component": "rpm/rpjadd"
}, },
@ -482,7 +498,8 @@ const routes = [
"meta": { "meta": {
"title": "访客人员", "title": "访客人员",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["visit"]
}, },
"component": "vm/people" "component": "vm/people"
} }
@ -492,7 +509,8 @@ const routes = [
"meta": { "meta": {
"title": "来访项目相关信息", "title": "来访项目相关信息",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true "hidden": true,
"perms": ["visit"]
}, },
"component": "vm/vistoradd" "component": "vm/vistoradd"
}, },
@ -601,6 +619,7 @@ const routes = [
"title": "相关证书", "title": "相关证书",
"icon": "el-icon-menu", "icon": "el-icon-menu",
"hidden": true, "hidden": true,
"perms": ["employee"]
}, },
"component": "hrm/certificate" "component": "hrm/certificate"

2
src/views/opm/operation.vue
View File

@ -97,7 +97,7 @@
prop="create_time" prop="create_time"
width="180" width="180"
></el-table-column> ></el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="170"> <el-table-column label="操作" fixed="right" align="center" width="170">
<template #default="scope"> <template #default="scope">
<el-button-group> <el-button-group>
<el-button <el-button

1
src/views/sys/role.vue
View File

@ -53,6 +53,7 @@
show-checkbox show-checkbox
:data="menu.list" :data="menu.list"
:props="menu.props" :props="menu.props"
check-strictly="true"
:default-checked-keys="menu.checked" :default-checked-keys="menu.checked"
@check="handleChange" @check="handleChange"
></el-tree> ></el-tree>

21
src/views/wf/allwork.vue
View File

@ -33,7 +33,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" prop="create_time"></el-table-column> <el-table-column label="创建时间" prop="create_time"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="120"> <el-table-column label="操作" fixed="right" align="center" width="120">
<template #default="scope"> <template #default="scope">
<el-button type="text" size="small" @click="handleShow(scope.row)">查看详情</el-button> <el-button type="text" size="small" @click="handleShow(scope.row)">查看详情</el-button>
<!--多人且主动接单--> <!--多人且主动接单-->
@ -51,7 +51,6 @@
data() { data() {
return { return {
list: [], list: [],
actstate_: { actstate_: {
0: "草稿中", 0: "草稿中",
1: "进行中", 1: "进行中",
@ -81,13 +80,14 @@
}, },
handleShow(row) { handleShow(row) {
let cateType = row.workflow_.key; let cateType = row.workflow_.key;
let projectId=''; let projectId = '', operation = null;
if(cateType==='visit'){ if (cateType === 'visit') {
projectId = row.ticket_data.visit; projectId = row.ticket_data.visit;
}else if(cateType==='rparty'){ } else if (cateType === 'rparty') {
projectId = row.ticket_data.rpj; projectId = row.ticket_data.rpj;
}else{ } else {
projectId = row.ticket_data.opl; operation = row.ticket_data.operation ? row.ticket_data.operation : null;
projectId = row.ticket_data.opl;
} }
this.$router.push({ this.$router.push({
name: "visitdetail", name: "visitdetail",
@ -95,7 +95,8 @@
id: row.id, id: row.id,
type: 'show', type: 'show',
projectId: projectId, projectId: projectId,
catetype:cateType catetype: cateType,
operation: operation
}, },
}); });
}, },

179
src/views/wf/ccwork.vue
View File

@ -1,92 +1,103 @@
<template> <template>
<el-container> <el-container>
<el-main class="nopadding"> <el-main class="nopadding">
<scTable <scTable
ref="table" ref="table"
:data="list" :data="list"
row-key="id" row-key="id"
stripe stripe
highlightCurrentRow highlightCurrentRow
hidePagination hidePagination
> >
<el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="工单标题" prop="title"></el-table-column> <el-table-column label="工单标题" prop="title"></el-table-column>
<el-table-column label="流水号" prop="sn"></el-table-column> <el-table-column label="流水号" prop="sn"></el-table-column>
<el-table-column label="当前状态"> <el-table-column label="当前状态">
<template #default="scope"> <template #default="scope">
{{ scope.row.state_.name }} {{ scope.row.state_.name }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="进行状态" prop="sort"> <el-table-column label="进行状态" prop="sort">
<template #default="scope"> <template #default="scope">
{{ actstate_[scope.row.act_state] }} {{ actstate_[scope.row.act_state] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="关联工作流" prop="title"> <el-table-column label="关联工作流" prop="title">
<template #default="scope"> <template #default="scope">
{{ scope.row.workflow_.name }} {{ scope.row.workflow_.name }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="处理人类型"> <el-table-column label="处理人类型">
<template #default="scope"> <template #default="scope">
{{ participant_[scope.row.participant_type] }} {{ participant_[scope.row.participant_type] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" prop="create_time"></el-table-column> <el-table-column label="创建时间" prop="create_time"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="120"> <el-table-column label="操作" fixed="right" align="center" width="100">
<template #default="scope"> <template #default="scope">
<el-button link size="small" @click="handleShow(scope.row)">查看详情</el-button> <el-button text size="small" type="primary" @click="handleShow(scope.row)">查看详情</el-button>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
<script> <script>
export default { export default {
name: "state", name: "state",
data() { data() {
return { return {
list:[], list: [],
actstate_: { actstate_: {
0: "草稿中", 0: "草稿中",
1: "进行中", 1: "进行中",
2: "被退回", 2: "被退回",
3: "被撤回", 3: "被撤回",
4: "已完成", 4: "已完成",
5: "已关闭", 5: "已关闭",
}, },
participant_: { participant_: {
0: "无处理人", 0: "无处理人",
1: "个人", 1: "个人",
2: "多人", 2: "多人",
}, },
}; };
}, },
mounted() { mounted() {
this.getList(); this.getList();
}, },
methods: { methods: {
async getList() { async getList() {
let res = await this.$API.wf.ticket.list.req({ category: "cc",page:0 }); let res = await this.$API.wf.ticket.list.req({category: "cc", page: 0});
console.log(res); console.log(res);
this.list = res; this.list = res;
}, },
handleShow(row) { handleShow(row) {
this.$router.push({ let cateType = row.workflow_.key;
name: "visitdetail", let projectId = '', operation = null;
query: { if (cateType === 'visit') {
id: row.id, projectId = row.ticket_data.visit;
type: 'show', } else if (cateType === 'rparty') {
projectId: row.ticket_data.visit, projectId = row.ticket_data.rpj;
catetype : row.workflow_.key } else {
}, operation = row.ticket_data.operation ? row.ticket_data.operation : null;
}); projectId = row.ticket_data.opl;
}, }
}, this.$router.push({
}; name: "visitdetail",
query: {
id: row.id,
type: 'show',
projectId: projectId,
catetype: cateType,
operation: operation
},
});
},
},
};
</script> </script>
<style scoped> <style scoped>

73
src/views/wf/dutywork.vue
View File

@ -35,21 +35,14 @@
<el-table-column label="创建时间" prop="create_time"></el-table-column> <el-table-column label="创建时间" prop="create_time"></el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-link <el-button
text
v-if="(scope.row.act_state===1||scope.row.act_state===3)&&scope.row.state_.type===0" v-if="(scope.row.act_state===1||scope.row.act_state===3)&&scope.row.state_.type===0"
type="primary" type="primary"
@click="handleDetail(scope.row)" @click="handleDetail(scope.row)"
> >
处理 处理
</el-link> </el-button>
<!--多人处理，直接接单-->
<!--<el-link
v-if="scope.row.state_.distribute_type===1&&scope.row.participant_type===2"
type="primary"
@click="handleDetail(scope.row)"
>
接单
</el-link>-->
<el-button v-if="scope.row.state_.distribute_type===1&&scope.row.participant_type===2" <el-button v-if="scope.row.state_.distribute_type===1&&scope.row.participant_type===2"
type="text" size="small" @click="handleAccept(scope.row)"> type="text" size="small" @click="handleAccept(scope.row)">
接单 接单
@ -68,39 +61,11 @@
<el-dialog v-model="limitedFlowLogs" title="工单日志"> <el-dialog v-model="limitedFlowLogs" title="工单日志">
<ticket-log ref="ticketLogs" :ticket="ticketId"></ticket-log> <ticket-log ref="ticketLogs" :ticket="ticketId"></ticket-log>
</el-dialog> </el-dialog>
<!--<el-dialog v-model="limitedFlowLogs" title="工单日志">
<el-table
:data="floeLogs"
fit
stripe
style="width: 100%;border-top:1px solid #EBEEF5;"
>
<el-table-column label="工单标题">
<template #defalut="scope">
<span v-if="scope.row.ticket_data">{{scope.row.ticket_data.title}}</span>
</template>
</el-table-column>
<el-table-column label="进行状态">
<template #defalut="scope">
<span v-if="scope.row.state_">{{scope.row.state_.name}}</span>
</template>
</el-table-column>
<el-table-column label="操作人">
<template #default="scope">
<span v-if="scope.row.participant_">{{ scope.row.participant_.name }}</span>
</template>
</el-table-column>
<el-table-column label="操作意见" prop="suggestion">
</el-table-column>
<el-table-column label="更新时间" prop="update_time">
</el-table-column>
</el-table>
</el-dialog>-->
</template> </template>
<script> <script>
import ticketLog from "./details.vue"; import ticketLog from "./details.vue";
export default { export default {
components: { components: {
ticketLog, ticketLog,
@ -122,9 +87,9 @@
1: "个人", 1: "个人",
2: "多人", 2: "多人",
}, },
floeLogs:[], floeLogs: [],
ticketId:'', ticketId: '',
limitedFlowLogs:false, limitedFlowLogs: false,
}; };
}, },
mounted() { mounted() {
@ -137,22 +102,22 @@
this.list = res; this.list = res;
}, },
//处理 //处理
handleDetail(row){ handleDetail(row) {
debugger; let projectId = '', operation = null;
console.log(row)
let projectId = '';
let catetype = row.workflow_.key; let catetype = row.workflow_.key;
if(catetype==='visit'){ if (catetype === 'visit') {
projectId=row.ticket_data.visit; projectId = row.ticket_data.visit;
}else if(catetype==='Fire'){ } else if (catetype === 'Fire') {
projectId=row.ticket_data.opl; projectId = row.ticket_data.opl;
operation = row.ticket_data.operation ? row.ticket_data.operation : null;
} }
this.$router.push({ this.$router.push({
name: "visitdetail", name: "visitdetail",
query: { query: {
id: row.id, id: row.id,
projectId:projectId, projectId: projectId,
catetype:row.workflow_.key catetype: row.workflow_.key,
operation: operation
}, },
}); });
}, },
@ -162,10 +127,10 @@
let id = row.id; let id = row.id;
this.ticketId = row.id; this.ticketId = row.id;
that.limitedFlowLogs = true; that.limitedFlowLogs = true;
that.$API.wf.ticket.ticketFlow.req({ticket:id}).then(res => { that.$API.wf.ticket.ticketFlow.req({ticket: id}).then(res => {
if (res.err_msg) { if (res.err_msg) {
}else{ } else {
that.floeLogs = res.results; that.floeLogs = res.results;
} }
}) })

29
src/views/wf/ownerwork.vue
View File

@ -35,7 +35,7 @@
<el-table-column label="创建时间" prop="create_time"></el-table-column> <el-table-column label="创建时间" prop="create_time"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="160"> <el-table-column label="操作" fixed="right" align="center" width="160">
<template #default="scope"> <template #default="scope">
<el-button link size="small" @click="handleShow(scope.row)">查看详情</el-button> <el-button text size="small" type="primary" @click="handleShow(scope.row)">查看详情</el-button>
<!--创建人在初始状态--> <!--创建人在初始状态-->
<el-link <el-link
v-if="scope.row.state_.type===1&&userId===scope.row.create_by" v-if="scope.row.state_.type===1&&userId===scope.row.create_by"
@ -76,7 +76,7 @@
data() { data() {
return { return {
list: [], list: [],
userId:this.$TOOL.data.get("USER_INFO").id, userId: this.$TOOL.data.get("USER_INFO").id,
actstate_: { actstate_: {
0: "草稿中", 0: "草稿中",
1: "进行中", 1: "进行中",
@ -95,8 +95,8 @@
}, },
handleLabel: '撤回原因', handleLabel: '撤回原因',
handleTitle: '撤回工单', handleTitle: '撤回工单',
ticketId:null, ticketId: null,
limitedRetreat:false, limitedRetreat: false,
}; };
}, },
mounted() { mounted() {
@ -105,13 +105,24 @@
}, },
methods: { methods: {
handleShow(row) { handleShow(row) {
let cateType = row.workflow_.key;
let projectId = '', operation = null;
if (cateType === 'visit') {
projectId = row.ticket_data.visit;
} else if (cateType === 'rparty') {
projectId = row.ticket_data.rpj;
} else {
operation = row.ticket_data.operation ? row.ticket_data.operation : null;
projectId = row.ticket_data.opl;
}
this.$router.push({ this.$router.push({
name: "visitdetail", name: "visitdetail",
query: { query: {
id: row.id, id: row.id,
type: 'show', type: 'show',
projectId: row.ticket_data.visit, projectId: projectId,
catetype:row.workflow_.key catetype: cateType,
operation: operation
}, },
}); });
}, },
@ -137,7 +148,7 @@
handleSubmit() { handleSubmit() {
let res = ''; let res = '';
let that = this; let that = this;
that.$confirm('确认'+that.handleTitle+'吗?', "温馨提示", { that.$confirm('确认' + that.handleTitle + '吗?', "温馨提示", {
confirmButtonText: "确认", confirmButtonText: "确认",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
@ -148,9 +159,9 @@
} else { } else {
res = that.$API.wf.ticket.ticketClose.req(that.ticketId, that.handleForm); res = that.$API.wf.ticket.ticketClose.req(that.ticketId, that.handleForm);
} }
if(res.err_msg){ if (res.err_msg) {
that.getList(); that.getList();
}else{ } else {
that.limitedRetreat = false; that.limitedRetreat = false;
that.getList(); that.getList();
} }

219
src/views/wf/visitdetail.vue
View File

@ -1,8 +1,16 @@
<template> <template>
<el-container> <el-container>
<el-main class="nopadding"> <el-main class="nopadding">
<el-card style="margin-bottom: 10px"> <el-card style="margin-bottom: 10px;position: relative">
<work-step ref="workStep"></work-step> <work-step ref="workStep"></work-step>
<el-button
class="ticketRetry"
v-if="type!=='show'&&ticketDetail.state_&&ticketDetail.state_.name==='任务执行'"
@click="reStart"
type="primary"
>
重新执行
</el-button>
</el-card> </el-card>
<el-card style="margin-left: 10px; margin-bottom: 10px" v-if="cateType==='visit'"> <el-card style="margin-left: 10px; margin-bottom: 10px" v-if="cateType==='visit'">
<el-descriptions title="来访信息" :column="3"> <el-descriptions title="来访信息" :column="3">
@ -74,7 +82,7 @@
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<div style="text-align: center"> <div style="text-align: center">
<el-link type="primary" @click="showMore"> 更多信息 </el-link> <el-link type="primary" @click="showMore"> 更多信息</el-link>
</div> </div>
<show-dialog v-if="rpjShow" ref="showDialog"></show-dialog> <show-dialog v-if="rpjShow" ref="showDialog"></show-dialog>
</el-card> </el-card>
@ -83,15 +91,17 @@
<el-descriptions-item label="工单流水号:"> <el-descriptions-item label="工单流水号:">
{{ticketDetail.sn }} {{ticketDetail.sn }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="许可证编号:"> <el-descriptions-item label="作业名称:">
{{oplDetail.number }} {{oplDetail.name }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="许可证类别:"> <el-descriptions-item label="作业地点:">
{{oplDetail.cate_name}} {{oplDetail.place}}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="作业状态:">
<el-descriptions-item label="级别:"> {{state_[oplDetail.state]}}
{{oplDetail.level }} </el-descriptions-item>
<el-descriptions-item label="生产状态:">
{{oplDetail.state_work }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="开始时间:"> <el-descriptions-item label="开始时间:">
{{oplDetail.start_time }} {{oplDetail.start_time }}
@ -101,7 +111,7 @@
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<div style="text-align: center"> <div style="text-align: center">
<el-link type="primary" @click="showMoreInfo"> 更多信息 </el-link> <el-link type="primary" @click="showMoreInfo"> 作业许可证详情</el-link>
</div> </div>
<show-dialog v-if="rpjShow" ref="showDialog"></show-dialog> <show-dialog v-if="rpjShow" ref="showDialog"></show-dialog>
</el-card> </el-card>
@ -109,20 +119,47 @@
<el-card style="margin-left: 10px; margin-bottom: 10px" v-if="type!=='show'"> <el-card style="margin-left: 10px; margin-bottom: 10px" v-if="type!=='show'">
<scTitle title="处理"></scTitle> <scTitle title="处理"></scTitle>
<el-form :model="form" ref="addForm" label-width="100px" label-position="left"> <el-form :model="form" ref="addForm" label-width="100px" label-position="left">
<el-form-item label="作业情况：" v-if="ticketDetail.state_&&ticketDetail.state_.name==='作业负责人关闭'">
<el-select v-model="form.close_note" placeholder="选择关闭原因">
<el-option
v-for="item in noteOption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="关闭处理：" v-if="ticketDetail.state_&&ticketDetail.state_.name==='作业负责人关闭'">
<el-checkbox-group v-model="form.close_dos">
<el-checkbox
v-for="(item, index) in dosOption"
:key="index"
:label="item.id"
>{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="处理意见"> <el-form-item label="处理意见">
<el-input v-model="form.suggestion" clearable></el-input> <el-input v-model="form.suggestion" clearable></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div v-if="ticketDetail.in_add_node" style="text-align: right"> <div v-if="ticketDetail.in_add_node" style="text-align: right">
<el-button v-if="ticketDetail.in_add_node" class="filter-item" type="primary" @click="addNodeHandler('2')">加签处理</el-button> <el-button v-if="ticketDetail.in_add_node" class="filter-item" type="primary"
@click="addNodeHandler('2')">加签处理
</el-button>
</div> </div>
<div v-else style="display: flex;justify-content: space-between;"> <div v-else style="display: flex;justify-content: space-between;">
<div> <div>
<el-button type="primary" @click="addNode">加签</el-button> <el-button type="primary" @click="addNode">加签</el-button>
<el-button v-if="ticketDetail.state_&&ticketDetail.state_.enable_deliver" type="primary" plain @click="deliverNode">转交</el-button> <el-button v-if="ticketDetail.state_&&ticketDetail.state_.enable_deliver" type="primary" plain
@click="deliverNode">转交
</el-button>
</div> </div>
<div> <div>
<el-button v-for="item in operationBtn" :key="item.id" class="filter-item" :type="item.attribute_type===2?'danger':'primary'" @click="operationSubmit(item.id)">{{item.name}}</el-button> <el-button v-for="item in operationBtn" :key="item.id" class="filter-item"
:type="item.attribute_type===2?'danger':'primary'" @click="operationSubmit(item.id)">
{{item.name}}
</el-button>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -135,7 +172,8 @@
<el-form ref="Form" :model="addForm" label-width="100px" label-position="right"> <el-form ref="Form" :model="addForm" label-width="100px" label-position="right">
<el-form-item label="处理人"> <el-form-item label="处理人">
<el-input style="width: 50%;" v-model="userName" disabled placeholder="选择处理人"></el-input> <el-input style="width: 50%;" v-model="userName" disabled placeholder="选择处理人"></el-input>
<scUserSelect v-model="addForm.toadd_user" :closable="true" :multiple="false" @handlerSubmit="addNodeHandlerSubmit"></scUserSelect> <scUserSelect v-model="addForm.toadd_user" :closable="true" :multiple="false"
@handlerSubmit="addNodeHandlerSubmit"></scUserSelect>
</el-form-item> </el-form-item>
<el-form-item label="加签原因"> <el-form-item label="加签原因">
<el-input type="textarea" :rows="3" v-model="addForm.suggestion" placeholder="加签原因"/> <el-input type="textarea" :rows="3" v-model="addForm.suggestion" placeholder="加签原因"/>
@ -161,7 +199,9 @@
<el-button class="filter-item" type="primary" @click="deliverNodeHandler('1')">确定</el-button> <el-button class="filter-item" type="primary" @click="deliverNodeHandler('1')">确定</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-drawer :size="'50%'" v-model="showLimited" title="作业许可证详情">
<sc-fire :id="projectId"></sc-fire>
</el-drawer>
</template> </template>
<script> <script>
@ -189,21 +229,24 @@
visitDetail: [], visitDetail: [],
employeeLists: [], employeeLists: [],
operationBtn: [], operationBtn: [],
form:{ form: {
suggestion:'' suggestion: '',
close_note: '',
close_dos: [],
}, },
addForm:{ addForm: {
suggestion:'', suggestion: '',
toadd_user:'', toadd_user: '',
}, },
deliverForm:{ deliverForm: {
suggestion:'', suggestion: '',
target_user:'', target_user: '',
}, },
rpjShow:false, rpjShow: false,
limitedAdd:false, limitedAdd: false,
limitedDeliver:false, showLimited: false,
limitedUserSelect:false, limitedDeliver: false,
limitedUserSelect: false,
purpose_: { purpose_: {
10: "参观", 10: "参观",
20: "拜访", 20: "拜访",
@ -223,33 +266,56 @@
40: "进行中", 40: "进行中",
50: "已完成", 50: "已完成",
}, },
noteOption: [
{id: 10, name: '作业正常结束'},
{id: 20, name: '因计划改变停止作业'},
{id: 30, name: '因发生异常终止作业'},
{id: 40, name: '其他'},
],
dosOption: [],
}; };
}, },
created(){ created() {
this.ticketId = this.$route.query.id; this.ticketId = this.$route.query.id;
this.type = this.$route.query.type; this.type = this.$route.query.type;
this.projectId = this.$route.query.projectId; this.projectId = this.$route.query.projectId;
this.cateType = this.$route.query.catetype; this.cateType = this.$route.query.catetype;
this.operation = this.$route.query.operation;
}, },
mounted() { mounted() {
debugger; debugger;
if(this.cateType==='visit'){ if (this.cateType === 'visit') {
this.getVisit(); this.getVisit();
}else if(this.cateType==='rparty'){ } else if (this.cateType === 'rparty') {
this.getRpj(); this.getRpj();
}else{ } else {
debugger; if (this.operation !== null) {
this.getOpl(); this.getOperation();
} else {
this.getOpl();
}
this.getCloseDos();
} }
this.getticketItem(); this.getticketItem();
this.getBtns(); this.getBtns();
}, },
methods: { methods: {
showMore(){ //关闭工作
getCloseDos() {
this.$API.system.dict.list
.req({page: 0, type__code: "close_options"})
.then((res) => {
let dosOption = res.filter(item => {
return item.is_used
});
this.dosOption = dosOption.slice(0, 3)
});
},
showMore() {
this.rpjShow = true; this.rpjShow = true;
this.$nextTick(()=>{ this.$nextTick(() => {
this.$refs.showDialog.open().setData({id:this.projectId}); this.$refs.showDialog.open().setData({id: this.projectId});
}) })
}, },
//工单详情 //工单详情
@ -259,8 +325,8 @@
}); });
}, },
//获取应有的流转 //获取应有的流转
getBtns(){ getBtns() {
this.$API.wf.ticket.ticketTransitions.req(this.ticketId).then(res=>{ this.$API.wf.ticket.ticketTransitions.req(this.ticketId).then(res => {
this.operationBtn = res; this.operationBtn = res;
}) })
}, },
@ -273,57 +339,70 @@
}, },
//入厂项目详情 //入厂项目详情
getRpj(){ getRpj() {
this.$API.rpm.rpj.item.req(this.projectId).then((res) => { this.$API.rpm.rpj.item.req(this.projectId).then((res) => {
debugger; debugger;
this.rpjDetail = res; this.rpjDetail = res;
}); });
}, },
//作业详情 //许可证详情
getOpl(){ getOpl() {
this.$API.opm.opl.read.req(this.projectId).then((res) => { this.$API.opm.opl.read.req(this.projectId).then((res) => {
debugger; debugger;
this.oplDetail = res; this.oplDetail = res;
}); });
}, },
//作业详情
getOperation() {
debugger;
this.$API.opm.operation.read.req(this.operation).then((res) => {
debugger;
this.oplDetail = res;
});
},
showMoreInfo() {
this.showLimited = true;
},
//加签处理-start //加签处理-start
addNode(){ addNode() {
this.limitedAdd = true; this.limitedAdd = true;
}, },
addCancel(){ addCancel() {
this.limitedAdd = false; this.limitedAdd = false;
}, },
addNodeHandlerSubmit(data) { addNodeHandlerSubmit(data) {
this.addForm.toadd_user=data.id; this.addForm.toadd_user = data.id;
this.userName=data.name; this.userName = data.name;
}, },
addNodeHandler(index){ addNodeHandler(index) {
let res = null; let res = null;
if(index==='1'){ if (index === '1') {
res = this.$API.wf.ticket.addNode.req(this.ticketId,this.addForm); res = this.$API.wf.ticket.addNode.req(this.ticketId, this.addForm);
}else{ } else {
res = this.$API.wf.ticket.addNodeEnd.req(this.ticketId,this.form); res = this.$API.wf.ticket.addNodeEnd.req(this.ticketId, this.form);
} }
if(res.err_msg){}else{ if (res.err_msg) {
} else {
this.limitedAdd = false; this.limitedAdd = false;
this.$router.push("dutywork"); this.$router.push("dutywork");
} }
}, },
//加签处理-end //加签处理-end
//转交处理-start //转交处理-start
deliverNode(){ deliverNode() {
this.limitedDeliver = true; this.limitedDeliver = true;
}, },
deliverCancel(){ deliverCancel() {
this.limitedDeliver = false; this.limitedDeliver = false;
}, },
deliverHandlerSubmit(data) { deliverHandlerSubmit(data) {
this.deliverForm.target_user=data.id; this.deliverForm.target_user = data.id;
this.userName=data.name; this.userName = data.name;
}, },
deliverNodeHandler(){ deliverNodeHandler() {
this.$API.wf.ticket.ticketDeliver.req(this.ticketId,this.deliverForm).then(res=>{ this.$API.wf.ticket.ticketDeliver.req(this.ticketId, this.deliverForm).then(res => {
if(res.err_msg){}else{ if (res.err_msg) {
} else {
this.limitedDeliver = false; this.limitedDeliver = false;
this.$router.push("dutywork"); this.$router.push("dutywork");
} }
@ -331,20 +410,38 @@
}, },
//转交处理-end //转交处理-end
//流转按钮触发 //流转按钮触发
operationSubmit(id){ operationSubmit(id) {
let params = new Object(); let params = new Object();
params.transition = id; params.transition = id;
params.ticket_data = {}; params.ticket_data = {};
params.suggestion = this.form.suggestion; params.suggestion = this.form.suggestion;
this.$API.wf.ticket.ticketHandle.req(this.ticketId,params).then(res=>{ if (this.ticketDetail.state_.name === '作业负责人关闭') {
if(res.err_msg){}else{ params.ticket_data.close_note = this.form.close_note;
params.ticket_data.close_dos = this.form.close_dos;
}
this.$API.wf.ticket.ticketHandle.req(this.ticketId, params).then(res => {
if (res.err_msg) {
} else {
this.$router.push("dutywork"); this.$router.push("dutywork");
} }
}) })
}, },
reStart() {
this.$API.wf.ticket.retryScript.req(this.ticketId).then(res => {
if (res.err_msg) {
} else {
this.$router.push("dutywork");
}
});
},
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.ticketRetry {
right: 20px;
top: 30px;
position: absolute;
}
</style> </style>

20
src/views/wf/worked.vue
View File

@ -33,9 +33,9 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" prop="create_time"></el-table-column> <el-table-column label="创建时间" prop="create_time"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="120"> <el-table-column label="操作" fixed="right" align="center" width="100">
<template #default="scope"> <template #default="scope">
<el-button link size="small" @click="handleShow(scope.row)">查看详情</el-button> <el-button text size="small" type="primary" @click="handleShow(scope.row)">查看详情</el-button>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
@ -49,7 +49,6 @@
data() { data() {
return { return {
list: [], list: [],
actstate_: { actstate_: {
0: "草稿中", 0: "草稿中",
1: "进行中", 1: "进行中",
@ -75,13 +74,24 @@
this.list = res; this.list = res;
}, },
handleShow(row) { handleShow(row) {
let cateType = row.workflow_.key;
let projectId = '', operation = null;
if (cateType === 'visit') {
projectId = row.ticket_data.visit;
} else if (cateType === 'rparty') {
projectId = row.ticket_data.rpj;
} else {
operation = row.ticket_data.operation ? row.ticket_data.operation : null;
projectId = row.ticket_data.opl;
}
this.$router.push({ this.$router.push({
name: "visitdetail", name: "visitdetail",
query: { query: {
id: row.id, id: row.id,
type: 'show', type: 'show',
projectId: row.ticket_data.visit, projectId: projectId,
catetype: row.workflow_.key catetype: cateType,
operation: operation
}, },
}); });
}, },

89
src/views/wf/workflow.vue
View File

@ -17,9 +17,9 @@
<scTable ref="table" :apiObj="apiObj" row-key="id"> <scTable ref="table" :apiObj="apiObj" row-key="id">
<el-table-column label="#" type="index"></el-table-column> <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="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="name" min-width="200"></el-table-column>
<el-table-column label="标识" prop="key" min-width="250"></el-table-column> <el-table-column label="标识" prop="key" min-width="100"></el-table-column>
<el-table-column label="工单查看权限校验" prop="view_permission_check" min-width="150"> <el-table-column label="工单查看权限校验" prop="view_permission_check" min-width="120">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.view_permission_check">是</span> <span v-if="scope.row.view_permission_check">是</span>
<span v-else>否</span> <span v-else>否</span>
@ -27,11 +27,15 @@
</el-table-column> </el-table-column>
<el-table-column label="工作流描述" prop="description" min-width="150"></el-table-column> <el-table-column label="工作流描述" prop="description" min-width="150"></el-table-column>
<el-table-column label="创建时间" prop="create_time" min-width="150"></el-table-column> <el-table-column label="创建时间" prop="create_time" min-width="150"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="220"> <el-table-column label="操作" fixed="right" align="center" width="250">
<template #default="scope"> <template #default="scope">
<el-button link size="small" type="primary" @click="workflowShow(scope.row)" v-auth="'workflow.update'">配置</el-button> <el-button link size="small" type="primary" @click="workflowShow(scope.row)"
v-auth="'workflow.update'">配置
</el-button>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-button link size="small" type="primary" @click="workflowEdit(scope.row)" v-auth="'workflow.update'">编辑</el-button> <el-button link size="small" type="primary" @click="workflowEdit(scope.row)"
v-auth="'workflow.update'">编辑
</el-button>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-link <el-link
type="primary" type="primary"
@ -54,7 +58,7 @@
<div class="svgWrapper"> <div class="svgWrapper">
<div class="svgItem">工作流流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div> <div class="svgItem">工作流流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div>
<div style="width: 90%;margin: auto;"> <div style="width: 90%;margin: auto;">
<svg height=1800 id="mySvg" style="width:100%!important;"> <svg :height='mySvgHeight' id="mySvg" style="width:100%!important;">
</svg> </svg>
</div> </div>
</div> </div>
@ -80,7 +84,7 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="查看权限校验"> <el-form-item label="查看权限校验">
<el-switch v-model="addForm.view_permission_check" ></el-switch> <el-switch v-model="addForm.view_permission_check"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="展现表单字段"> <el-form-item label="展现表单字段">
<el-transfer <el-transfer
@ -107,6 +111,7 @@
<script> <script>
import dagreD3 from 'dagre-d3' import dagreD3 from 'dagre-d3'
import * as d3 from 'd3' import * as d3 from 'd3'
export default { export default {
name: 'index', name: 'index',
data() { data() {
@ -118,6 +123,7 @@
search: { search: {
keyword: null keyword: null
}, },
mySvgHeight: null,
editId: null, editId: null,
isSaving: false, isSaving: false,
limitedVisible: false, limitedVisible: false,
@ -134,7 +140,7 @@
sn_prefix: "", sn_prefix: "",
description: "", description: "",
view_permission_check: true, view_permission_check: true,
display_form_str:[], display_form_str: [],
title_template: "", title_template: "",
content_template: "", content_template: "",
}, },
@ -163,34 +169,34 @@
this.type = 'add'; this.type = 'add';
this.limitedVisible = true; this.limitedVisible = true;
}, },
submitHandle() {
submitHandle() {
let that = this; let that = this;
this.$refs.addForm.validate((valid) => { this.$refs.addForm.validate((valid) => {
if (valid) { if (valid) {
that.isSaveing = true; that.isSaveing = true;
that.submit(); that.submit();
} }
}) })
}, },
async submit(){ async submit() {
let that = this; let that = this;
let res = null; let res = null;
try{ try {
if (that.type === 'add') { if (that.type === 'add') {
res = await that.$API.wf.workflow.create.req(that.addForm) res = await that.$API.wf.workflow.create.req(that.addForm)
} else { } else {
res = await that.$API.wf.workflow.update.req(that.editId, that.addForm); res = await that.$API.wf.workflow.update.req(that.editId, that.addForm);
} }
that.isSaveing = false; that.isSaveing = false;
that.limitedVisible = false; that.limitedVisible = false;
that.$refs.table.refresh(); that.$refs.table.refresh();
}catch (e) { } catch (e) {
that.isSaveing = false; that.isSaveing = false;
} }
}, },
//编辑工作流 //编辑工作流
workflowEdit(row) { workflowEdit(row) {
this.type = 'edit'; this.type = 'edit';
@ -202,13 +208,13 @@
//工作流配置 //工作流配置
workflowShow(row) { workflowShow(row) {
let workflow = sessionStorage.getItem('jinYuWorkflowId'); let workflow = sessionStorage.getItem('jinYuWorkflowId');
if(workflow){ if (workflow) {
sessionStorage.removeItem('jinYuWorkflowId'); sessionStorage.removeItem('jinYuWorkflowId');
sessionStorage.setItem('jinYuWorkflowId',row.id); sessionStorage.setItem('jinYuWorkflowId', row.id);
}else{ } else {
sessionStorage.setItem('jinYuWorkflowId',row.id); sessionStorage.setItem('jinYuWorkflowId', row.id);
} }
this.$router.push({path:'/wf/configuration'}); this.$router.push({path: '/wf/configuration'});
}, },
//删除工作流 //删除工作流
@ -223,17 +229,21 @@
// this.$alert(res.message, "提示", {type: 'error'}) // this.$alert(res.message, "提示", {type: 'error'})
} }
}, },
//表格选择后回调事件 //表格选择后回调事件
selectionChange(selection) { selectionChange(selection) {
this.selection = selection; this.selection = selection;
}, },
//搜索 //搜索
upsearch() { upsearch() {
}, },
//根据ID获取树结构 //根据ID获取树结构
filterTree(id) { filterTree(id) {
var target = null; var target = null;
function filter(tree) { function filter(tree) {
tree.forEach(item => { tree.forEach(item => {
if (item.id == id) { if (item.id == id) {
@ -245,9 +255,10 @@
}) })
} }
filter(this.$refs.table.tableData) filter(this.$refs.table.tableData);
return target return target
}, },
//本地更新数据 //本地更新数据
handleSaveSuccess(data, type) { handleSaveSuccess(data, type) {
if (type == 'add') { if (type == 'add') {
@ -256,6 +267,7 @@
this.$refs.table.refresh() this.$refs.table.refresh()
} }
}, },
handleWatch(scope) { handleWatch(scope) {
debugger; debugger;
let that = this; let that = this;
@ -271,12 +283,11 @@
marginy: 20, marginy: 20,
}); });
//获取state得到节点 //获取state得到节点
this.$API.wf.workflow.states.req(workFlow).then((response) => { that.$API.wf.workflow.states.req(workFlow).then((response) => {
if (!response.err_msg) { if (!response.err_msg) {
let nodes = response; let nodes = response;
// 添加节点 // 添加节点
nodes.forEach((item) => { nodes.forEach((item) => {
debugger;
g.setNode(item.id, { g.setNode(item.id, {
// 节点标签 // 节点标签
label: item.name, label: item.name,
@ -290,20 +301,12 @@
ry: 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) => { that.$API.wf.workflow.transitions.req(workFlow).then((res) => {
if (!res.err_msg) { if (!res.err_msg) {
let transitionList = res; let transitionList = res;
debugger;
transitionList.forEach((transition0) => { transitionList.forEach((transition0) => {
if (transition0.condition_expression.length > 0) { if (transition0.condition_expression.length > 0) {
debugger;
g.setNode(transition0.source_state_.id + 100000, { g.setNode(transition0.source_state_.id + 100000, {
label: "条件表达式", label: "条件表达式",
style: "stroke: #000;fill: #afa", style: "stroke: #000;fill: #afa",
@ -329,11 +332,8 @@
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色 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)));
}); });
g.nodes().length - 1;
// 创建渲染器 // 创建渲染器
let render = new dagreD3.render(); let render = new dagreD3.render();
// 选择 svg 并添加一个g元素作为绘图容器. // 选择 svg 并添加一个g元素作为绘图容器.
@ -341,6 +341,7 @@
let svgGroup = svg.append('g'); let svgGroup = svg.append('g');
// 在绘图容器上运行渲染器生成流程图. // 在绘图容器上运行渲染器生成流程图.
render(d3.select("svg g"), g); render(d3.select("svg g"), g);
that.mySvgHeight = document.getElementsByClassName('nodes')[0].getBoundingClientRect().height + 50;
} else { } else {
} }
}); });
@ -363,21 +364,23 @@
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
margin-bottom: 10px; margin-bottom: 10px;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 15px; width: 10px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
background-color: #fefefe; background-color: #fefefe;
border-radius: 7px; border-radius: 5px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 7px; border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.svgMark { .svgMark {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -395,8 +398,8 @@
.svgWrapper { .svgWrapper {
background: #fff; background: #fff;
width: 800px; width: 800px;
margin:0 auto; margin: 5vh auto;
height: 100vh; height: 90vh;
text-align: center; text-align: center;
border-radius: 2px; border-radius: 2px;
overflow-y: scroll; overflow-y: scroll;