This commit is contained in:
duanxiaohai 2024-11-19 09:50:43 +08:00
parent 767d39e056
commit 0ade2e66c2
10 changed files with 620 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 937 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 745 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 782 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1,554 @@
<template>
<div class="dialogPage">
<el-dialog
v-model="dialogShow"
width="80vw"
:show-close="false"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
<el-icon size="26" color="#fff" @click="closeDialog">
<CircleCloseFilled />
</el-icon>
</div>
</template>
<div class="tabelPart">
<div class="bo">
<div class="title">
<div class="title_top">
<img
src="@/assets/images/table_l.png"
alt=""
style="margin-right: 10px"
/>
<div class="name" v-if="showXq">{{ title }}详情</div>
<div class="name" v-else>{{ title }}</div>
<img
src="@/assets/images/table_r.png"
alt=""
style="margin-left: 10px"
/>
</div>
<img
class="title_botton"
src="@/assets/images/table_c.png"
alt=""
/>
</div>
</div>
<div
style="
width: 100%;
height: calc(100% - 110px);
padding: 40px;
box-sizing: border-box;
"
>
<div class="item">
<div class="arrowl"></div>
<div class="item_content" v-for="item in data.menu">
{{ item.label }}
</div>
<div class="arrowr"></div>
</div>
<div class="conten" style="margin-top: 20px">
<div class="operationFlow">
<div class="titles">
<div class="titlea">
业务单位<span>民政局-社会救助科</span>
</div>
<div class="titlea">业务负责人<span>*</span></div>
</div>
<div class="operationConten">
<div class="progress">
<div>1/6 低保金</div>
</div>
<div class="stepsa">
<div class="stepsb">
<el-steps style="max-width: 600px" align-center :active="1">
<el-step
title="推送时间"
description="2024.11.1 12:00"
:icon="Edit"
/>
<el-step
title="业务处理时间"
description="2024.11.2 12:00"
:icon="Upload"
/>
<el-step
title="办结时间"
description=" 2024.12 15:00"
:icon="Picture"
/>
</el-steps>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
nextTick,
} from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const routers = useRoute();
const props = defineProps({
dialogShow: {
type: Boolean,
default: () => {
return false;
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
title: {
type: String,
default: () => {
return "";
},
},
menu: {
type: String,
default: () => {
return "";
},
},
showXq: {
type: Boolean,
default: () => {
return true;
},
},
});
const emit = defineEmits(["close"]);
//
const dialogShow = ref();
const data = reactive({
title: "",
content: {},
menu: {},
});
//
watch(
() => props.dialogShow,
(newVal, oldVal) => {
console.log(222);
dialogShow.value = newVal;
if (newVal == true) {
data.content = props.tableData;
data.title = props.title;
}
}
);
// 使
onMounted(() => {
dialogShow.value = props.dialogShow;
data.title = props.title;
data.content = props.tableData;
data.menu = props.menu;
});
const closeDialog = () => {
dialogShow.value = false;
emit("close");
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--el-dialog-width: 52% !important;
}
.my-header {
display: flex;
flex-direction: row-reverse;
}
.tabelPart {
padding: 16px;
background: linear-gradient(
270deg,
rgba(0, 77, 131, 0.69) 0%,
rgba(0, 51, 83, 0.77) 50%,
rgba(0, 77, 131, 0.74) 100%
),
radial-gradient(
66% 40% at 50% 0%,
rgba(1, 150, 243, 0.55) 0%,
rgba(0, 116, 255, 0) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
border: 2px solid;
border-image: linear-gradient(
180deg,
rgba(21, 150, 255, 1),
rgba(0, 157, 227, 0)
)
2 2;
:deep(.el-table) {
--el-table-bg-color: none;
--el-table-tr-bg-color: none;
--el-table-header-bg-color: none;
background: none;
border: none;
--el-table-text-color: #fff;
--el-table-header-text-color: #fff;
}
// :deep(.el-table th) {
// text-align: center;
// }
}
.bo {
width: 100%;
display: flex;
}
.title {
margin: 10px auto;
display: flex;
flex-direction: column;
&_top {
display: flex;
align-items: end;
img {
height: 33px;
width: 33px;
}
.name {
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 600;
font-size: 33px;
color: #ffffff;
line-height: 38px;
text-align: center;
font-style: normal;
letter-spacing: 2px;
background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
}
&_botton {
margin-top: 5px;
height: 19px;
}
}
.item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.item_content {
cursor: pointer;
box-sizing: border-box;
border-radius: 4px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
font-family: PingFangSC, PingFang SC;
// padding: 2px 10px;
width: 163px;
height: 34px;
line-height: 34px;
background-image: url(@/assets/images/sy_details_LC/fwlc1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
// display: flex;
}
.item_contentBJ {
background-image: url(@/assets/images/sy_details_LC/fwlc2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.arrowl {
width: 10.5px;
height: 20px;
background-image: url(@/assets/images/sy_details_LC/fwlc3.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.arrowr {
width: 10.5px;
height: 20px;
background-image: url(@/assets/images/sy_details_LC/fwlc4.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
}
.conten {
width: 98%;
display: flex;
// justify-content: center;
justify-content: space-around;
.operationFlow {
.titles {
width: 846px;
// width: 100%;
height: 34px;
background: rgba(0, 143, 205, 0.63);
color: #ffffff;
// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: row;
align-items: center;
.titlea {
padding: 0 10px;
width: 260px;
}
}
.operationConten {
width: 846px;
// width: 100%;
height: 249px;
flex-direction: column;
background: rgba(70, 114, 171, 0.36);
display: flex;
align-items: center;
justify-content: space-evenly;
.progress {
width: 176px;
height: 34px;
background-image: url(@/assets/images/sy_details_LC/fwlc5.png);
background-repeat: no-repeat;
background-size: 100% 100%;
color: #ffffff;
font-weight: 400;
font-size: 18px;
text-align: center;
padding-bottom: 6px;
}
}
.stepsa {
width: 846px;
text-align: center;
// display: flex;
// justify-content: center;
.stepsb {
width: 100%;
margin-left: 14%;
}
}
}
}
:deep(.el-step__title.is-finish) {
color: #ffffff;
}
:deep(.el-step__description.is-finish) {
color: #ffffff;
}
:deep(.el-step__title.is-process) {
color: #ffffff;
}
:deep(.el-step__description.is-process) {
color: #ffffff;
}
:deep(.el-step__main) {
color: #ffffff;
}
.yd_title {
box-sizing: border-box;
width: 98%;
height: 31px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
span {
font-size: 23px;
font-weight: 500;
font-family: titleNore;
margin-left: 20px;
color: #fff;
position: relative;
z-index: 1;
width: 500px;
overflow: hidden; /* 超出一行文字自动隐藏 */
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
white-space: nowrap;
}
/* 利用伪元素和两个i元素产生4条线 */
.animate-border {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
&::before,
&::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
}
i {
position: absolute;
display: inline-block;
height: 100%;
width: 2px;
}
&::before {
top: 0;
left: -100%;
background-image: linear-gradient(
90deg,
transparent,
#03e9f4,
transparent
);
animation: one 4s linear infinite;
}
i:nth-child(1) {
top: -100%;
right: 0;
background-image: linear-gradient(
180deg,
transparent,
#03e9f4,
transparent
);
/* 动画名称 动画持续时间 动画渲染函数 动画延迟时间 动画执行次数 */
animation: two 4s linear 1s infinite;
}
&::after {
bottom: 0;
right: -100%;
background-image: linear-gradient(
-90deg,
transparent,
#03e9f4,
transparent
);
animation: three 4s linear 2s infinite;
}
i:nth-child(2) {
bottom: -100%;
left: 0;
background-image: linear-gradient(
360deg,
transparent,
#03e9f4,
transparent
);
animation: four 4s linear 3s infinite;
}
}
.semi-circle-shadow {
position: absolute;
bottom: -5px;
left: -24px;
width: 22%;
height: 20px;
background: radial-gradient(
circle,
rgba(37, 127, 173, 1) 0%,
rgba(37, 127, 173, 0) 70%
);
border-radius: 50%;
z-index: 0;
}
}
.yd_title::before {
content: "";
width: 4px;
height: 4px;
background-color: rgba(0, 229, 255, 1);
border-radius: 50%;
position: absolute;
left: 0;
margin-left: 3px;
z-index: 2;
}
.yd_title::after {
content: "";
width: 90%;
height: 1px;
background: linear-gradient(to right, #257fad, rgba(37, 127, 173, 0));
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
}
@keyframes one {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes two {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes three {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
@keyframes four {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
</style>

View File

@ -37,7 +37,7 @@
:prop="item.property" :prop="item.property"
:show-overflow-tooltip="item.tooltip" :show-overflow-tooltip="item.tooltip"
:width="item.width || ''" :width="item.width || ''"
:align="item.align || 'left'" :align="item.align || 'left'"
> >
<template #default="scope"> <template #default="scope">
<!-- 补助类型 --> <!-- 补助类型 -->
@ -106,7 +106,7 @@
:label="item.label" :label="item.label"
:width="item.width || ''" :width="item.width || ''"
:prop="item.property" :prop="item.property"
:align="item.align || 'left'" :align="item.align || 'left'"
/> />
</template> </template>
</el-table> </el-table>
@ -125,7 +125,7 @@
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="bt_title"> <div class="bt_title">
<div class="yd_title left_3"> <div class="yd_title left_3">
<span>服务结果清单</span> <span >服务结果清单</span>
<div class="semi-circle-shadow"></div> <div class="semi-circle-shadow"></div>
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -215,13 +215,13 @@
</div> </div>
<!-- 完成途径 --> <!-- 完成途径 -->
<div v-if="item.property == 'operatesDeng'"> <div v-if="item.property == 'operatesDeng'" @click="openLC()">
<div v-if="scope.row.operatesDeng">系统推送</div> <div v-if="scope.row.operatesDeng">系统推送</div>
<div v-else>其他</div> <div v-else>其他</div>
</div> </div>
<!-- 推送次数 --> <!-- 推送次数 -->
<div v-if="item.property == 'pushSendTotal'"> <div v-if="item.property == 'pushSendTotal'">
<div>{{ scope.row.pushSendTotal }}</div> <div @click="openLC()">{{ scope.row.pushSendTotal }}</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -231,7 +231,7 @@
:width="item.width || ''" :width="item.width || ''"
:prop="item.property" :prop="item.property"
:show-overflow-tooltip="item.tooltip" :show-overflow-tooltip="item.tooltip"
:align="item.align || 'left'" :align="item.align || 'left'"
/> />
</template> </template>
</el-table> </el-table>
@ -272,6 +272,14 @@
@close="closePush" @close="closePush"
> >
</DialogPush> </DialogPush>
<DialogProcess
:dialogShow="dialogShowProcess"
:title="Process.title"
:tableData="Process.data"
:menu="Process.menu"
@close="closeProcess"
>
</DialogProcess>
</div> </div>
</template> </template>
@ -282,6 +290,7 @@ import http from "@/utils/request.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import DialogLamp from "./dialog/dialogRW.vue"; import DialogLamp from "./dialog/dialogRW.vue";
import DialogSf from "./dialog/dialogSf.vue"; import DialogSf from "./dialog/dialogSf.vue";
import DialogProcess from "./dialog/dialogLC.vue";
import DialogPush from "./dialog/dialogPush.vue"; import DialogPush from "./dialog/dialogPush.vue";
import lamp1 from "../assets/sy-table/green.gif"; import lamp1 from "../assets/sy-table/green.gif";
import lamp2 from "../assets/sy-table/red.gif"; import lamp2 from "../assets/sy-table/red.gif";
@ -565,6 +574,7 @@ const lampScreen = (val) => {
const dialogShow = ref(false); const dialogShow = ref(false);
const dialogShowSf = ref(false); const dialogShowSf = ref(false);
const dialogShowPush = ref(false); const dialogShowPush = ref(false);
const dialogShowProcess = ref(false);
const push = reactive({ const push = reactive({
title: "推送记录", title: "推送记录",
data: [], data: [],
@ -592,6 +602,33 @@ const push = reactive({
}, },
], ],
}); });
//
const Process = reactive({
title: "服务链流程",
data: [],
menu: [
{
label: "低保金",
property: "index",
},
{
label: "低保水费减免",
property: "xm",
},
{
label: "低保电费减免",
property: "item",
},
{
label: "低保有线电视减免",
property: "adminName",
},
{
label: "残疾人补贴",
property: "sendTime",
},
],
});
const sfType = reactive({ const sfType = reactive({
url: ``, url: ``,
title: "服务事项名称", title: "服务事项名称",
@ -762,6 +799,7 @@ const showList = (val) => {
const closePush = () => { const closePush = () => {
dialogShowPush.value = false; dialogShowPush.value = false;
}; };
// //
const openSf = () => { const openSf = () => {
http.get(`/api/ggfwyth/pg/sfljqd?xh=${routers.query.xh}`).then((res) => { http.get(`/api/ggfwyth/pg/sfljqd?xh=${routers.query.xh}`).then((res) => {
@ -778,6 +816,28 @@ const openSf = () => {
} }
}); });
}; };
//
const closeProcess = () => {
dialogShowProcess.value = false;
};
//
const openLC = () => {
console.log('推送');
dialogShowProcess.value = true;
// http.get(`/api/ggfwyth/pg/sfljqd?xh=${routers.query.xh}`).then((res) => {
// if (res.code == 200) {
// if (res.data == null) {
// ElMessage.warning({
// message: "",
// });
// } else {
// sfType.title = routers.query.name;
// sfType.data = res.data;
// dialogShowSf.value = true;
// }
// }
// });
};
const isLoading = ref(true); const isLoading = ref(true);
let loadingCount = 0; // let loadingCount = 0; //