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>
|
||||||