parent
b26c77cfc4
commit
9232d7c351
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="loveflowTabWrap">
|
||||
<div
|
||||
class="tabItem"
|
||||
v-for="item in tabList"
|
||||
:key="item.name"
|
||||
@click="tabClick(item.value)"
|
||||
:class="{ active: curVal == item.value }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
tabList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curVal: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.curVal = this.tabList.length ? this.tabList[0]["value"] : "";
|
||||
},
|
||||
methods: {
|
||||
tabClick(val) {
|
||||
this.curVal = val;
|
||||
this.$emit("tabClick", val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loveflowTabWrap {
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
|
||||
display: flex;
|
||||
.tabItem {
|
||||
padding: 0 vw(16);
|
||||
height: vw(38);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-size: vw(14);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(122, 163, 204, 0.3) 0%,
|
||||
rgba(122, 163, 204, 0) 100%
|
||||
);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: linear-gradient(0deg, #3cc7b0 0%, rgba(51, 204, 204, 0) 100%);
|
||||
}
|
||||
&.active {
|
||||
color: #ebfff4;
|
||||
border-bottom: solid 2px #33cccc;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(60, 199, 176, 0.3) 0%,
|
||||
rgba(51, 204, 204, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="enterpriseTeamWorkWrap loveflow">
|
||||
<div class="riskTrim tlIcon"></div>
|
||||
<div class="riskTrim trIcon"></div>
|
||||
<div class="riskTrim blIcon"></div>
|
||||
<div class="riskTrim brIcon"></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
backIcon: require("@/assets/images/topic/left.png"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$emit("gotoPage");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.enterpriseTeamWorkWrap {
|
||||
height: 100%;
|
||||
padding: 10px 24px 20px;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/topic/bg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
.topicMianBack {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: solid 1px #5b748c;
|
||||
height: 50px;
|
||||
.backBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
margin-right: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.riskTrim {
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.tlIcon {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/images/screen/tl.png") no-repeat center center;
|
||||
}
|
||||
.trIcon {
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url("~@/assets/images/screen/tr.png") no-repeat center center;
|
||||
}
|
||||
.blIcon {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url("~@/assets/images/screen/bl.png") no-repeat center center;
|
||||
}
|
||||
.brIcon {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: url("~@/assets/images/screen/br.png") no-repeat center center;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let dataList = this.chartObj.data;
|
||||
let maxArr = [];
|
||||
let maxValue = 0;
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
let total = 0;
|
||||
|
||||
dataList.forEach((item) => {
|
||||
xData.push(item.name);
|
||||
yData.push(item.value);
|
||||
if (maxValue < item.value) {
|
||||
maxValue = item.value;
|
||||
}
|
||||
});
|
||||
dataList.forEach((item) => {
|
||||
maxArr.push(maxValue);
|
||||
total = total + item.value;
|
||||
});
|
||||
if (!total) {
|
||||
total = 1;
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "14",
|
||||
top: "5%", // 设置条形图的边距
|
||||
right: "0",
|
||||
bottom: "0",
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
data: xData,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
verticalAlign: "bottom",
|
||||
color: "#299CD4",
|
||||
fontSize: 12,
|
||||
fontFamily: "Microsoft YaHei",
|
||||
align: "left",
|
||||
padding: [0, 0, 8, 8],
|
||||
rich: {
|
||||
index1: {
|
||||
align: "center",
|
||||
verticalAlign: "middle",
|
||||
padding: [4, 5, 1, 5],
|
||||
color: "#ff5933",
|
||||
borderWidth: 1,
|
||||
borderColor: "#ff5933",
|
||||
borderRadius: 2,
|
||||
},
|
||||
index2: {
|
||||
align: "center",
|
||||
verticalAlign: "middle",
|
||||
padding: [4, 5, 1, 5],
|
||||
color: "#31ec92",
|
||||
borderWidth: 1,
|
||||
borderColor: "#31ec92",
|
||||
borderRadius: 2,
|
||||
},
|
||||
name: {
|
||||
padding: [4, 8, 0, 2],
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (name, index) => {
|
||||
const _index = index + 1;
|
||||
if (dataList.length) {
|
||||
const item = dataList.filter((item) => item.name == name)[0];
|
||||
|
||||
let text = `{index2|${_index}} {name|${name}}`;
|
||||
if (index < 3) {
|
||||
text = `{index1|${_index}} {name|${name}}`;
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
},
|
||||
},
|
||||
offset: 0,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
// 内
|
||||
type: "bar",
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
console.log(params);
|
||||
let color = {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#2ccb7a", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#1aafc5", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#11a2e6", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
};
|
||||
if (params.dataIndex < 3) {
|
||||
color = {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#fdee37", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#f97d1f", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#f78060", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return color;
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: dataList,
|
||||
z: 2,
|
||||
animationEasing: "elasticOut",
|
||||
},
|
||||
{
|
||||
// 外边框
|
||||
type: "pictorialBar",
|
||||
symbol: "rect",
|
||||
symbolBoundingData: maxValue,
|
||||
barWidth: 1,
|
||||
itemStyle: {
|
||||
barBorderRadius: 10,
|
||||
normal: {
|
||||
color: "none",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
padding: [-20, 10, 0, -40],
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
rich: {
|
||||
value1: { color: "#FF9C9C" },
|
||||
value2: {
|
||||
color: "#9CE0FF",
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (params) => {
|
||||
var text = `{value2|${params.data}次}`;
|
||||
if (params.dataIndex < 3) {
|
||||
text = `{value1|${params.data}次}`;
|
||||
}
|
||||
return text;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: "#9CE0FF",
|
||||
fontSize: 14,
|
||||
align: "right",
|
||||
},
|
||||
},
|
||||
position: "right",
|
||||
distance: 1, // 向右偏移位置
|
||||
show: true,
|
||||
},
|
||||
data: yData,
|
||||
z: 0,
|
||||
animationEasing: "elasticOut",
|
||||
},
|
||||
{
|
||||
name: "外框",
|
||||
type: "pictorialBar",
|
||||
symbol: "rect",
|
||||
symbolBoundingData: maxValue,
|
||||
barGap: "-100%", // 设置外框粗细
|
||||
data: maxArr,
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0.06)", // 填充色
|
||||
label: {
|
||||
// 标签显示位置
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
z: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
@ -1,3 +1,203 @@
|
||||
<template>
|
||||
<div class="problemAnalysisWrap"></div>
|
||||
<div class="problemAnalysisWrap loveflow">
|
||||
<div class="topHead">
|
||||
<div class="leftWrap">
|
||||
<gTab ref="gTabRef" :tabList="tabList" @tabClick="typeChange"></gTab>
|
||||
</div>
|
||||
<div class="rightWrap">
|
||||
<gTab ref="timeRef" :tabList="timeList" @tabClick="timeChange"></gTab>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btmBody">
|
||||
<div class="screenRow screenRowTop pb14">
|
||||
<div class="rowTopWrap mr16">
|
||||
<colWrap title="招宝山街道">
|
||||
<barWrap :chartObj="wtObj"></barWrap>
|
||||
</colWrap>
|
||||
</div>
|
||||
<div class="rowTopWrap mr16">
|
||||
<colWrap title="九龙湖镇">
|
||||
<barWrap :chartObj="wtObj"></barWrap>
|
||||
</colWrap>
|
||||
</div>
|
||||
<div class="rowTopWrap mr16">
|
||||
<colWrap title="蟹浦镇">
|
||||
<barWrap :chartObj="wtObj"></barWrap>
|
||||
</colWrap>
|
||||
</div>
|
||||
<div class="rowTopWrap">
|
||||
<colWrap title="蛟川街道">
|
||||
<barWrap :chartObj="wtObj"></barWrap>
|
||||
</colWrap>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screenRow screenRowBtm">
|
||||
<div class="rowBtmWrap mr16">
|
||||
<colWrap title="骆驼街道">
|
||||
<barWrap :chartObj="wtObj"></barWrap>
|
||||
</colWrap>
|
||||
</div>
|
||||
<div class="rowBtmWrap mr16">
|
||||
<colWrap title="庄市街道">
|
||||
<barWrap :chartObj="wtObj"></barWrap>
|
||||
</colWrap>
|
||||
</div>
|
||||
<div class="rowBtmWrap">
|
||||
<colWrap title="贵驷街道">
|
||||
<barWrap :chartObj="wtObj"></barWrap>
|
||||
</colWrap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import colWrap from "../components/colWrap.vue";
|
||||
import barWrap from "./bar.vue";
|
||||
export default {
|
||||
components: {
|
||||
colWrap,
|
||||
barWrap,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
name: "高发问题区域展示",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
name: "重点问题区域展示",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
timeList: [
|
||||
{
|
||||
name: "月度",
|
||||
value: "month",
|
||||
},
|
||||
{
|
||||
name: "季度",
|
||||
value: "season",
|
||||
},
|
||||
{
|
||||
name: "年度",
|
||||
value: "year",
|
||||
},
|
||||
{
|
||||
name: "历史",
|
||||
value: "history",
|
||||
},
|
||||
],
|
||||
wtObj: {
|
||||
data: [
|
||||
{ name: "流动人员核查率异常", value: 23 },
|
||||
{ name: "重点人员流动异常", value: 17 },
|
||||
{ name: "值班人员配备异常", value: 15 },
|
||||
{ name: "灭火器数量不达标", value: 13 },
|
||||
{ name: "危险品使用人员资质异常", value: 9 },
|
||||
{ name: "夜间值班人员不足", value: 7 },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
typeChange(val) {
|
||||
console.log(val);
|
||||
if (val == "1") {
|
||||
this.wtObj.data = [
|
||||
{ name: "流动人员核查率异常", value: 23 },
|
||||
{ name: "重点人员流动异常", value: 17 },
|
||||
{ name: "值班人员配备异常", value: 15 },
|
||||
{ name: "灭火器数量不达标", value: 13 },
|
||||
{ name: "危险品使用人员资质异常", value: 9 },
|
||||
{ name: "夜间值班人员不足", value: 7 },
|
||||
];
|
||||
}
|
||||
if (val == "2") {
|
||||
this.wtObj.data = [
|
||||
{ name: "夜间值班人员不足", value: 33 },
|
||||
{ name: "重点人员流动异常", value: 27 },
|
||||
{ name: "流动人员核查率异常", value: 25 },
|
||||
{ name: "危险品使用人员资质异常", value: 23 },
|
||||
{ name: "灭火器数量不达标", value: 19 },
|
||||
{ name: "值班人员配备异常", value: 11 },
|
||||
];
|
||||
}
|
||||
},
|
||||
timeChange(val) {
|
||||
console.log(val);
|
||||
if (val == "month") {
|
||||
this.wtObj.data = [
|
||||
{ name: "流动人员核查率异常", value: 23 },
|
||||
{ name: "重点人员流动异常", value: 17 },
|
||||
{ name: "值班人员配备异常", value: 15 },
|
||||
{ name: "灭火器数量不达标", value: 13 },
|
||||
{ name: "危险品使用人员资质异常", value: 9 },
|
||||
{ name: "夜间值班人员不足", value: 7 },
|
||||
];
|
||||
}
|
||||
if (val == "season") {
|
||||
this.wtObj.data = [
|
||||
{ name: "流动人员核查率异常", value: 73 },
|
||||
{ name: "重点人员流动异常", value: 67 },
|
||||
{ name: "值班人员配备异常", value: 55 },
|
||||
{ name: "灭火器数量不达标", value: 53 },
|
||||
{ name: "危险品使用人员资质异常", value: 19 },
|
||||
{ name: "夜间值班人员不足", value: 17 },
|
||||
];
|
||||
}
|
||||
if (val == "year") {
|
||||
this.wtObj.data = [
|
||||
{ name: "流动人员核查率异常", value: 173 },
|
||||
{ name: "重点人员流动异常", value: 167 },
|
||||
{ name: "值班人员配备异常", value: 155 },
|
||||
{ name: "灭火器数量不达标", value: 153 },
|
||||
{ name: "危险品使用人员资质异常", value: 119 },
|
||||
{ name: "夜间值班人员不足", value: 117 },
|
||||
];
|
||||
}
|
||||
if (val == "history") {
|
||||
this.wtObj.data = [
|
||||
{ name: "流动人员核查率异常", value: 273 },
|
||||
{ name: "重点人员流动异常", value: 267 },
|
||||
{ name: "值班人员配备异常", value: 255 },
|
||||
{ name: "灭火器数量不达标", value: 253 },
|
||||
{ name: "危险品使用人员资质异常", value: 219 },
|
||||
{ name: "夜间值班人员不足", value: 217 },
|
||||
];
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.problemAnalysisWrap {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.topHead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 1px rgba(91, 116, 140, 0.6);
|
||||
}
|
||||
.btmBody {
|
||||
padding-top: vw(14);
|
||||
flex: 1;
|
||||
.screenRow {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
.rowTopWrap {
|
||||
flex: 1;
|
||||
}
|
||||
.rowBtmWrap {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -1,3 +1,237 @@
|
||||
<template>
|
||||
<div class="riskHandleWrap"></div>
|
||||
<div class="riskHandlePanel">
|
||||
<tableMain>
|
||||
<div class="riskHandleWrap">
|
||||
<div class="titleWrap">闭环处置</div>
|
||||
<div class="topHead">
|
||||
<gTab ref="gTabRef" :tabList="tabList" @tabClick="typeChange"></gTab>
|
||||
</div>
|
||||
<div class="btmBody">
|
||||
<div class="flexSpaceBetween">
|
||||
<div class="tableOperator"></div>
|
||||
<div class="searchWrap">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="queryParam"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item label="流程状态">
|
||||
<el-select
|
||||
v-model="queryParam.type"
|
||||
placeholder="选择流程状态"
|
||||
>
|
||||
<el-option label="进行中" value="1"></el-option>
|
||||
<el-option label="失败" value="0"></el-option>
|
||||
<el-option label="完成" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParam.time"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="关键字">
|
||||
<el-input
|
||||
v-model="queryParam.key"
|
||||
placeholder="请输入姓名、身份证"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchQuery"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" plain @click="searchReset"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableWrap">
|
||||
<gMainTable
|
||||
border
|
||||
stripe
|
||||
ref="gMainTable"
|
||||
:tableData="dataSource"
|
||||
:columns="columns"
|
||||
rowKey="id"
|
||||
:pagination="ipagination"
|
||||
@pageSizeChange="handlePageSizeChange"
|
||||
@currentPageChange="handleCurrentPageChange"
|
||||
>
|
||||
<template v-slot:stateSlot="{ scope }">
|
||||
<div class="failWrap" v-if="scope.row.state == 0">
|
||||
<div class="icon"></div>
|
||||
<div class="text">处理失败</div>
|
||||
</div>
|
||||
<div class="ingWrap" v-if="scope.row.state == 1">
|
||||
<div class="icon"></div>
|
||||
<div class="text">进行中</div>
|
||||
</div>
|
||||
<div class="finishWrap" v-if="scope.row.state == 2">
|
||||
<div class="icon"></div>
|
||||
<div class="text">处置完成</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:optSlot="{ scope }">
|
||||
<div class="clickText" @click="checkDetail(scope.row)">
|
||||
详情
|
||||
</div>
|
||||
</template>
|
||||
</gMainTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tableMain>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableMain from "../components/tableMain.vue";
|
||||
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
|
||||
export default {
|
||||
components: { tableMain },
|
||||
mixins: [tableListMixins],
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
name: "我的流程",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
name: "待办任务",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
name: "已办任务",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
name: "抄送我的",
|
||||
value: "4",
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
prop: "flow",
|
||||
label: "流程名称",
|
||||
},
|
||||
{
|
||||
prop: "date",
|
||||
label: "创建时间",
|
||||
attrs: {
|
||||
width: 220,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "flowType",
|
||||
label: "流程类型",
|
||||
},
|
||||
{
|
||||
slot: "stateSlot",
|
||||
prop: "state",
|
||||
label: "流程状态",
|
||||
},
|
||||
{
|
||||
prop: "node",
|
||||
label: "当前节点",
|
||||
},
|
||||
{
|
||||
prop: "name",
|
||||
label: "未操作者",
|
||||
},
|
||||
{
|
||||
slot: "optSlot",
|
||||
prop: "address",
|
||||
label: "操作",
|
||||
attrs: {
|
||||
width: 80,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
typeChange(val) {},
|
||||
checkDetail(obj) {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.riskHandlePanel {
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
.riskHandleWrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.titleWrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #ebfff4;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0px 0px 9px rgba(21, 255, 195, 0.6);
|
||||
border-bottom: solid 1px rgba(91, 116, 140, 0.6);
|
||||
}
|
||||
.topHead {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 50px;
|
||||
border-bottom: solid 1px rgba(91, 116, 140, 0.6);
|
||||
}
|
||||
.btmBody {
|
||||
padding-top: vw(14);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 100px);
|
||||
.failWrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ff6262;
|
||||
.icon {
|
||||
background-color: #ff6262;
|
||||
}
|
||||
}
|
||||
.ingWrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #4cf993;
|
||||
.icon {
|
||||
background-color: #4cf993;
|
||||
}
|
||||
}
|
||||
.finishWrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #30c4ff;
|
||||
.icon {
|
||||
background-color: #30c4ff;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.text {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in new issue