loveflow
11 months ago
|
After Width: | Height: | Size: 277 B |
|
After Width: | Height: | Size: 425 B |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 371 B |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="urgencyPanel">
|
||||
<div class="urgencyHead">
|
||||
<div class="urgencyLine" v-for="item in list" :key="item.id">
|
||||
<div class="urgencyTitleWrap">
|
||||
<div
|
||||
class="urgencyTitle"
|
||||
:style="{ backgroundImage: `url(${item.icon})` }"
|
||||
></div>
|
||||
<div class="urgencyNr">{{ item.nr }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="urgencyBtnWrap"
|
||||
:style="{ backgroundImage: `url(${item.btn})` }"
|
||||
@click="flowSet(item)"
|
||||
>
|
||||
流程设置
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="urgencyBody" v-if="title">
|
||||
<div class="topWrap">{{ title }}处置流程</div>
|
||||
<div class="btnWrap">
|
||||
<div class="addBtn flex-center" @click="add">
|
||||
<div class="plusIcon mr4"></div>
|
||||
<div>新增处置节点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="urNodePanel">
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
class="mb16"
|
||||
:span="6"
|
||||
v-for="(item, index) in nodeList"
|
||||
:key="item.label"
|
||||
>
|
||||
<urNodeWrap
|
||||
:ref="'index' + index"
|
||||
:show="index != nodeList.length - 1"
|
||||
:obj="item"
|
||||
></urNodeWrap>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formBtnOptWrap" v-if="title">
|
||||
<span class="editBtn" @click="sure">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { commonMixins } from "@/loveflow/mixins/commonMixins";
|
||||
import urNodeWrap from "./urNodeWrap";
|
||||
|
||||
export default {
|
||||
components: { urNodeWrap },
|
||||
mixins: [commonMixins, urNodeWrap],
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
id: "1",
|
||||
title: "一般",
|
||||
icon: require("@/assets/images/team/uryb.png"),
|
||||
nr: "系统判断后自动推送到指定的处置工作人员账号，处置工作人员处置结束后系统自动办结归档。",
|
||||
btn: require("@/assets/images/team/urybbtn.png"),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "重点",
|
||||
icon: require("@/assets/images/team/urzd.png"),
|
||||
nr: "经人工研判后推送到指定的处置工作人员账号，支持事件信息自动抄送提醒至相关部门领导，处置完毕后，系统自动推送钉消息给部门领导。",
|
||||
btn: require("@/assets/images/team/urzdbtn.png"),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "紧急",
|
||||
icon: require("@/assets/images/team/urjj.png"),
|
||||
nr: "经人工研判后推送到指定的处置工作人员账号，同时，支持事件信息自动抄送提醒至相关部门领导，处置完毕后，系统自动推送钉消息给部门领导。",
|
||||
btn: require("@/assets/images/team/urjjbtn.png"),
|
||||
},
|
||||
],
|
||||
title: "",
|
||||
nodeList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.nodeList = [];
|
||||
},
|
||||
methods: {
|
||||
flowSet(obj) {
|
||||
this.title = obj.title;
|
||||
},
|
||||
add() {
|
||||
let length = this.nodeList.length + 1;
|
||||
let obj = {
|
||||
label: "流程" + this.numberToChinese(length),
|
||||
unit: "",
|
||||
person: "",
|
||||
unitList: this.unitList,
|
||||
personList: this.personList,
|
||||
};
|
||||
this.nodeList.push(obj);
|
||||
},
|
||||
sure() {
|
||||
console.log(this.nodeList);
|
||||
},
|
||||
numberToChinese(num) {
|
||||
var chnNumChar = [
|
||||
"零",
|
||||
"一",
|
||||
"二",
|
||||
"三",
|
||||
"四",
|
||||
"五",
|
||||
"六",
|
||||
"七",
|
||||
"八",
|
||||
"九",
|
||||
];
|
||||
var chnUnitSection = ["", "万", "亿", "万亿", "亿亿"];
|
||||
var chnUnitChar = ["", "十", "百", "千"];
|
||||
var unitPos = 0;
|
||||
var strIns = "",
|
||||
chnStr = "";
|
||||
var needZero = false;
|
||||
|
||||
if (num === 0) {
|
||||
return chnNumChar[0];
|
||||
}
|
||||
|
||||
while (num > 0) {
|
||||
var section = num % 10000;
|
||||
if (needZero) {
|
||||
chnStr = chnNumChar[0] + chnStr;
|
||||
}
|
||||
strIns = this.sectionToChinese(section);
|
||||
strIns += section !== 0 ? chnUnitSection[unitPos] : chnUnitSection[0];
|
||||
chnStr = strIns + chnStr;
|
||||
needZero = section < 1000 && section > 0;
|
||||
num = Math.floor(num / 10000);
|
||||
unitPos++;
|
||||
}
|
||||
|
||||
return chnStr;
|
||||
},
|
||||
sectionToChinese(section) {
|
||||
var chnNumChar = [
|
||||
"零",
|
||||
"一",
|
||||
"二",
|
||||
"三",
|
||||
"四",
|
||||
"五",
|
||||
"六",
|
||||
"七",
|
||||
"八",
|
||||
"九",
|
||||
];
|
||||
var chnUnitSection = ["", "万", "亿", "万亿", "亿亿"];
|
||||
var chnUnitChar = ["", "十", "百", "千"];
|
||||
var strIns = "",
|
||||
chnStr = "";
|
||||
var unitPos = 0;
|
||||
var zero = true;
|
||||
while (section > 0) {
|
||||
var v = section % 10;
|
||||
if (v === 0) {
|
||||
if (!zero) {
|
||||
zero = true;
|
||||
chnStr = chnNumChar[v] + chnStr;
|
||||
}
|
||||
} else {
|
||||
zero = false;
|
||||
strIns = chnNumChar[v];
|
||||
strIns += chnUnitChar[unitPos];
|
||||
chnStr = strIns + chnStr;
|
||||
}
|
||||
unitPos++;
|
||||
section = Math.floor(section / 10);
|
||||
}
|
||||
return chnStr;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.urgencyPanel {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
box-sizing: border-box;
|
||||
.urgencyHead {
|
||||
padding: 0 vw(20);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
height: 180px;
|
||||
background: url("~@/assets/images/team/urHead.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.urgencyLine {
|
||||
display: flex;
|
||||
.urgencyTitleWrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
color: #ebf7ff;
|
||||
.urgencyTitle {
|
||||
margin-right: vw(14);
|
||||
width: vw(115);
|
||||
height: vw(36);
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
.urgencyBtnWrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: vw(104);
|
||||
height: vw(50);
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
font-size: vw(16);
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.urgencyBody {
|
||||
height: calc(100% - 240px);
|
||||
margin-top: vw(16);
|
||||
background: url("~@/assets/images/team/urBody.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.topWrap {
|
||||
margin: 0 14px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-weight: 500;
|
||||
font-size: vw(16);
|
||||
color: #ffe6d9;
|
||||
text-shadow: 0px 0px 8px rgba(255, 119, 52, 0.5);
|
||||
border-bottom: solid 1px rgba(91, 116, 140, 0.6);
|
||||
}
|
||||
.btnWrap {
|
||||
margin: 10px 14px;
|
||||
width: vw(140);
|
||||
}
|
||||
.urNodePanel {
|
||||
height: calc(100% - 90px);
|
||||
margin: 0 14px 14px;
|
||||
overflow-y: scroll;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.formBtnOptWrap {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||