loveflow
6 months ago
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>
|
<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>
|
</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>
|
<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>
|
</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