This commit is contained in:
duanxiaohai 2024-10-18 10:52:47 +08:00
commit 612c88a2b9
4 changed files with 485 additions and 29 deletions

View File

@ -0,0 +1,387 @@
<template>
<div class="dialogPage">
<el-dialog
v-model="dialogShow"
width="80vw"
heigth="600px"
: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">{{ 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)" >
<div style="border: 1px solid #5284b0">
<el-table
:data="data.tableData"
height='500px'
:header-cell-style="{ background: 'rgba(0, 143, 205, 0.63)' }"
@row-click="handleRowClick"
stripe
>
<template v-for="item in data.columns" :key="item.label">
<el-table-column
v-if="item.type === 'slot'"
:label="item.label"
:property="item.property"
:width="item.width || ''"
:align="item.align || 'center'"
>
<template #default="scope">
</template>
</el-table-column>
<el-table-column
v-else
:property="item.property"
:label="item.label"
:show-overflow-tooltip="false"
:width="item.width || ''"
:align="item.align || 'center'"
/>
</template>
</el-table>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import {
onMounted,
onBeforeMount,
reactive,
ref,
onBeforeUnmount,
defineProps,
watch,
nextTick,
} from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import http from "@/utils/request.js";
const router = useRouter();
const routers = useRoute();
const props = defineProps({
dialogShow: {
type: Boolean,
default: () => {
return false;
},
},
columns: {
type: Array,
default: () => {
return [];
},
},
typeId: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Object,
default: () => {
return [];
},
},
title: {
type: String,
default: () => {
return "";
},
},
});
const emit = defineEmits(["close",'showList']);
const handleRowClick = (row, column, event) => {
emit("showList", row);
};
//
const dialogShow = ref();
const data = reactive({
title: "",
columns: [],
tableData: [],
});
const gridData = [];
//
//
watch(
() => props.dialogShow,
(newVal, oldVal) => {
dialogShow.value = newVal;
}
);
watch(
() => props.tableData,
(newVal, oldVal) => {
}
);
// 使
onMounted(() => {
dialogShow.value = props.dialogShow;
data.title = props.title;
data.columns = props.columns;
});
const closeDialog = () => {
dialogShow.value = false;
emit("close");
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--el-dialog-width: 76% !important;
}
.my-header {
display: flex;
flex-direction: row-reverse;
}
// .backgroundVirtual {
// position: absolute;
// top: 0;
// width: 100%;
// height: 79px;
// box-shadow: inset 0px 0px 55px 0px rgba(173, 221, 255, 1);
// z-index: 99;
// }
.tabelPart {
height: 600px;
padding: 16px 110px 32px 110px;
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;
.tabelHead {
color: #fff;
display: flex;
align-items: center;
font-size: 18px;
justify-content: space-between;
margin-bottom: 10px;
margin-top: 46px;
img {
width: 36px;
height: 36px;
}
// &div:nth-last-child(1){
// display: flex;
// align-items: center;
// }
.status {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
.statusMessage {
display: flex;
align-items: center;
}
.lampBox {
width: 270px;
height: 146px;
position: absolute;
top: 40px;
right: -6px;
background-image: url(@/assets/sy-table/popk.png);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 999;
.lampTitle {
text-align: center;
// padding-top: 33px;
margin: 28px 0 32px 0;
font-size: 16px;
font-weight: 500;
font-family: PingFangSC, PingFang SC;
color: #ffffff;
line-height: 22px;
letter-spacing: 1px;
}
.lampBtn {
display: flex;
align-items: center;
justify-content: center;
.confirm {
width: 82.5px;
height: 30.5px;
line-height: 30.5px;
text-align: center;
background-image: url(@/assets/sy-table/btn1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 9px;
}
.cancel {
width: 82.5px;
height: 30.5px;
line-height: 30.5px;
text-align: center;
background-image: url(@/assets/sy-table/btn2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
}
.lampMessage {
font-size: 16px;
font-weight: 600;
font-family: PingFangSC, PingFang SC;
letter-spacing: 1px;
color: #ff5959;
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 17px;
z-index: 10;
}
.bo {
width: 100%;
display: flex;
.title {
margin: 10px auto;
display: flex;
flex-direction: column;
&_top {
display: flex;
align-items: end;
justify-content: center;
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;
}
}
}
.progressGreen {
width: 181px;
height: 15px;
margin: 0 auto;
border-radius: 6px;
background: linear-gradient(358deg, #21eda8 0%, #8bffcd 100%);
}
.progressYellow {
width: 181px;
height: 15px;
border: 2px solid #ffe1a5;
margin: 0 auto;
border-radius: 6px;
}
: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;
--el-table-border-color: none !important;
font-size: 16px;
}
:deep(
.el-table--striped
.el-table__body
tr.el-table__row--striped
td.el-table__cell
) {
background: #2f4b74;
}
:deep(.el-table .el-table__cell) {
padding: 18px 0;
}
// :deep(.el-table th) {
// text-align: center;
// }
}
</style>

View File

@ -184,12 +184,10 @@ const props = defineProps({
},
},
});
const emit = defineEmits(["close", "handle"]);
const emit = defineEmits(["close", "handle",'showList']);
const handleRowClick = (row, column, event) => {
if (props.dj) {
console.log(row, props.dj, "rwxq");
}
emit("showList", row);
};
//
const clicked = ref(false);
@ -288,6 +286,8 @@ watch(
if (props.tableData.data.wxs.length > 0) {
props.tableData.data.wxs.forEach((item, index) => {
let obj = {
bm: item.bm,
xh: item.xh,
deng: 2,
bzlx: item.bzlx,
qtbm: item.qtbm,
@ -302,6 +302,8 @@ watch(
if (props.tableData.data.ysx.length > 0) {
props.tableData.data.ysx.forEach((item, index) => {
let obj = {
bm: item.bm,
xh: item.xh,
deng: 1,
bzlx: item.bzlx,
qtbm: item.qtbm,

View File

@ -70,7 +70,7 @@
<i></i>
</div>
<div class="lampState">
<div >
<div>
<img
src="@/assets/sy-table/sfmx.png"
@click="openSf()"
@ -230,6 +230,7 @@
:title="tableType.title"
:tableData="tableType"
@close="closeJj"
@showList="showList"
>
</DialogLamp>
<DialogSf
@ -240,6 +241,14 @@
@close="closeJj"
>
</DialogSf>
<DialogPush
:dialogShow="dialogShowPush"
:title="push.title"
:tableData="push.data"
:columns="push.columns"
@close="closePush"
>
</DialogPush>
</div>
</template>
@ -250,6 +259,7 @@ import http from "@/utils/request.js";
import { ElMessage } from "element-plus";
import DialogLamp from "./dialog/dialogRW.vue";
import DialogSf from "./dialog/dialogSf.vue";
import DialogPush from "./dialog/dialogPush.vue";
import lamp1 from "../assets/sy-table/green.gif";
import lamp2 from "../assets/sy-table/red.gif";
import lamp3 from "../assets/sy-table/lampYellow1.gif";
@ -431,16 +441,44 @@ const lampScreen = (val) => {
*/
const dialogShow = ref(false);
const dialogShowSf = ref(false);
const sfType=reactive({
const dialogShowPush = ref(false);
const push = reactive({
title: "推送记录",
data: [],
columns: [
{
label: "序号",
property: "xm",
width: "90",
},
{
label: "应用",
property: "app",
},
{
label: "事项",
property: "content",
},
{
label: "接收人",
property: "adminName",
},
{
label: "推送时间",
property: "sendTime",
},
],
});
const sfType = reactive({
url: ``,
title: "服务事项名称",
data:{
gkmx:'备注内容',
sr:'xxxxxxxxxx输入内容xxxxxxxxxx输入内容xxxxxxxxxx输入内容',
dblj:'对比逻辑',
sc:'输出',
data: {
gkmx: "备注内容",
sr: "xxxxxxxxxx输入内容xxxxxxxxxx输入内容xxxxxxxxxx输入内容",
dblj: "对比逻辑",
sc: "输出",
},
})
});
const tableType = reactive({
url: `/api/ggfwyth/pg/fwjgqdxq`,
title: "服务详情",
@ -461,13 +499,16 @@ const tableType = reactive({
{
label: "牵头单位",
property: "qtbm",
}, {
},
{
label: "业务科室",
property: "zrks",
}, {
},
{
label: "负责人",
property: "ywfzr",
}, {
},
{
label: "联系电话",
property: "fgldsj",
},
@ -528,17 +569,43 @@ const closeJj = () => {
tableType.data = [];
pagination3.currentPage = 1;
};
//
const showList = (val) => {
http
.get(`/api/ggfwyth/pg/pushSendRecord?xh=${val.xh}&bm=${val.bm}`)
.then((res) => {
if (res.code == 200) {
push.data = res.data;
if (res.data.length == 0) {
ElMessage.warning({
message: `该服务内容暂无推送记录!`,
});
} else {
push.data = push.data.map((item, index1) => {
return {
...item,
index: index1 + 1,
};
});
dialogShowPush.value = true;
}
}
});
};
//
const closePush = () => {
dialogShowPush.value = false;
};
//
const openSf=()=>{
const openSf = () => {
http.get(`/api/ggfwyth/pg/sfljqd?xh=${routers.query.xh}`).then((res) => {
if (res.code == 200) {
sfType.title=routers.query.name;
sfType.data=res.data;
sfType.title = routers.query.name;
sfType.data = res.data;
dialogShowSf.value = true;
}
});
}
};
const getTable = (pagination) => {
http
.get(

View File

@ -79,9 +79,9 @@
:row-style="rowState"
:header-cell-style="tableHeaderColor"
>
<el-table-column prop="name" label="社区名称" />
<el-table-column prop="address" label="社区位置" />
<el-table-column prop="text" label="社区材料" />
<el-table-column prop="name" label="社区名称" show-overflow-tooltip/>
<el-table-column prop="address" label="社区位置" show-overflow-tooltip/>
<el-table-column prop="text" label="社区材料" show-overflow-tooltip/>
</el-table>
</div>
</div>
@ -126,14 +126,14 @@
:row-style="rowState"
:header-cell-style="tableHeaderColor"
>
<el-table-column prop="starttime" label="开始时间" width="132" />
<el-table-column prop="starttime" label="开始时间" width="120" show-overflow-tooltip/>
<el-table-column prop="endtime" label="结束时间" width="131" />
<el-table-column prop="address" label="地点" width="132" />
<el-table-column prop="title" label="名称" width="132" />
<el-table-column prop="finish" label="详情">
<el-table-column prop="endtime" label="结束时间" width="120" show-overflow-tooltip/>
<el-table-column prop="address" label="地点" width="132" show-overflow-tooltip/>
<el-table-column prop="title" label="名称" width="132" show-overflow-tooltip/>
<el-table-column prop="finish" label="详情" width="120">
<template #default="scope">
<div style="text-align: center">查看详情</div>
<div>查看详情</div>
</template>
</el-table-column>
</el-table>