This commit is contained in:
duanxiaohai 2024-10-16 17:29:48 +08:00
commit c35841041e
4 changed files with 430 additions and 44 deletions

View File

@ -0,0 +1,292 @@
<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="item_title">概况模型</div>
<div class="item_content">{{ data.content.gkmx }}</div>
</div>
<div class="item" style="margin-top: 20px">
<div class="item_title">详情描述</div>
<div class="item_content">
<div class="item_content_item">
<div class="item_content_item_title">输入</div>
<div class="item_content_item_content">
{{ data.content.sr }}
</div>
</div>
<div class="item_content_item">
<div class="item_content_item_title">对比逻辑</div>
<div class="item_content_item_content">
{{ data.content.dblj }}
</div>
</div>
<div class="item_content_item">
<div class="item_content_item_title">输出</div>
<div class="item_content_item_content">
{{ data.content.sc }}
</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 "";
},
},
showXq: {
type: Boolean,
default: () => {
return true;
},
},
});
const emit = defineEmits(["close"]);
//
const dialogShow = ref();
const data = reactive({
title: "",
content: {},
});
//
watch(
() => props.dialogShow,
(newVal, oldVal) => {
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;
});
const closeDialog = () => {
dialogShow.value = false;
emit("close");
};
//
const handle = (current) => {
emit("handle", current);
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--el-dialog-width: 40% !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%;
.item_title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #ffffff;
line-height: 22px;
letter-spacing: 3px;
margin-bottom: 16px;
}
.item_content {
box-sizing: border-box;
background: rgba(70, 114, 171, 0.36);
border-radius: 4px;
padding: 20px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
letter-spacing: 3px;
color: #ffffff;
line-height: 22px;
.item_content_item {
width: 100%;
display: flex;
margin-bottom: 20px;
box-sizing: border-box;
.item_content_item_title {
width: 100px;
margin-right: 10px;
}
.item_content_item_content {
width: calc(100% - 110px);
}
}
.item_content_item:last-child {
margin-bottom: 0px;
}
}
}
</style>

View File

@ -69,6 +69,15 @@
<i></i>
<i></i>
</div>
<div class="lampState">
<div @click="openSf()">
<!-- <img
:src="selectedLamp == 0 ? lampImages[1] : lampImages[4]"
@click="lampScreen(0)"
/> -->
算法模型
</div>
</div>
</div>
</div>
<div style="width: 97.5%; position: relative">
@ -223,6 +232,14 @@
@close="closeJj"
>
</DialogLamp>
<DialogSf
:dialogShow="dialogShowSf"
:title="sfType.title"
:tableData="sfType.data"
:showXq="false"
@close="closeJj"
>
</DialogSf>
</div>
</template>
@ -232,6 +249,7 @@ import { useRouter, useRoute } from "vue-router";
import http from "@/utils/request.js";
import { ElMessage } from "element-plus";
import DialogLamp from "./dialog/dialogRW.vue";
import DialogSf from "./dialog/dialogSf.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";
@ -409,8 +427,20 @@ const lampScreen = (val) => {
/**
* 表格弹框
* @param {*} dialogShow -弹框状态false表示关闭true表示开启
* @param {*} dialogShowSf -算法弹框状态false表示关闭true表示开启
*/
const dialogShow = ref(false);
const dialogShowSf = ref(false);
const sfType=reactive({
url: ``,
title: "服务事项名称",
data:{
gkmx:'备注内容',
sr:'xxxxxxxxxx输入内容xxxxxxxxxx输入内容xxxxxxxxxx输入内容',
dblj:'对比逻辑',
sc:'输出',
},
})
const tableType = reactive({
url: `/api/ggfwyth/pg/fwjgqdxq`,
title: "服务详情",
@ -494,9 +524,19 @@ const statusDetails = (val) => {
//
const closeJj = () => {
dialogShow.value = false;
dialogShowSf.value = false;
tableType.data = [];
pagination3.currentPage = 1;
};
//
const openSf=()=>{
dialogShowSf.value = true;
// http.get(`/api/ggfwyth/pg/sfmx?xh=${routers.query.xh}`).then((res) => {
// if (res.code == 200) {
// tableType.data = res.data;
// }
// });
}
const getTable = (pagination) => {
http
.get(

View File

@ -1853,7 +1853,7 @@ const clearyaosu = () => {
yaosuList.value.length = 0;
zyys_dk.value.length = 0;
zyys_center.value.length = 0;
zyys_choose_cs.value='';
zyys_choose_cs.value = "";
}
};
//
@ -2741,6 +2741,7 @@ const changeys = (name) => {
zyys_center.value.length = 0;
}
} else {
loadingss.value=true;
csh();
clearPerson();
yaosuList.value.push(name);
@ -2808,6 +2809,7 @@ const getZyys = (url, name, img, img_map, tooltip) => {
createZyys(itemm, indexx, name, tooltip);
});
}
loadingss.value = false;
});
};
//
@ -2824,6 +2826,7 @@ const getZyys2 = (name, img, img_map, tooltip) => {
yaosuIcon.value[name].sj.forEach((itemm, indexx) => {
createZyys(itemm, indexx, name, tooltip);
});
loadingss.value = false;
}
};
@ -2884,7 +2887,7 @@ const createZyys = (polygon, indexx, name, tooltip) => {
case "汽车充电桩":
break;
default:
zyys_choose_cs.value=name;
zyys_choose_cs.value = name;
if (zyys_dk.value.length) {
zyys_dk.value.forEach((item, index) => {
map.removeOverlay(item); //
@ -2893,18 +2896,14 @@ const createZyys = (polygon, indexx, name, tooltip) => {
map.removeOverlay(item); //
});
}
await get_dk_zyys(
polygon.xzjd,
polygon.csq,
polygon.num,
polygon.zyysmc
);
if (zyys_data.value.point.length == 0) {
if (polygon.fgfwrs.length == 0) {
ElMessage.warning({
message: "地图上未找到对应村社",
message: "暂无数据",
});
} else {
zyysCenter.length = 0;
zyysDk.length = 0;
await get_dk_zyys(polygon.fgfwrs);
xr_dk_center_zyys();
}
@ -2917,26 +2916,73 @@ const createZyys = (polygon, indexx, name, tooltip) => {
const zyys_data = ref({
point: [],
center: [],
name: "",
});
const get_dk_zyys = async (xzjd, csq, number, name) => {
//(,)
const zyysCenter = reactive([]);
const zyysDk = reactive([]);
const loadCs_zyys = async (name) => {
cssj.forEach((item, index) => {
if (item.name == name) {
csqk.value = item.sj;
}
});
for (let v of csqk.value.features) {
if (v.geometry.coordinates.length > 1) {
for (let w in v.geometry.coordinates) {
if (v.geometry.coordinates[w][0].length < 60) continue;
zyysDk.push({
id: v.id,
name: v.properties.name,
point: v.geometry.coordinates[w],
});
}
zyysCenter.push({
id: v.id,
name: v.properties.name,
center: v.properties.center,
});
} else {
zyysDk.push({
id: v.id,
name: v.properties.name,
point: v.geometry.coordinates[0],
});
zyysCenter.push({
id: v.id,
name: v.properties.name,
center: v.properties.center,
});
}
}
};
const get_dk_zyys = async (sj) => {
zyys_dk.value.length = 0;
zyys_center.value.length = 0;
zyys_data.value.point.length = 0;
zyys_data.value.center.length = 0;
zyys_data.value.name = "";
await loadCs(xzjd);
zyys_data.value.name = csq;
xkzDk.forEach((dk) => {
if (csq == dk.name) {
zyys_data.value.point.push(dk);
let zyys_jd = [];
sj.forEach((itemN) => {
if (!zyys_jd.includes(itemN.town)) {
zyys_jd.push(itemN.town);
}
});
xkzCenter.forEach((center) => {
if (csq == center.name) {
let a = { ...center, num: number, zyysmc: name };
zyys_data.value.center.push(a);
}
console.log(1111111111111, zyys_jd);
zyys_jd.forEach((item) => {
loadCs_zyys(item);
});
sj.forEach((item, index) => {
zyysDk.forEach((dk) => {
if (item.committee == dk.name) {
zyys_data.value.point.push(dk);
}
});
zyysCenter.forEach((center) => {
if (item.committee == center.name) {
let a = { ...center, num: item.num,town: item.town,committee: item.committee};
zyys_data.value.center.push(a);
}
});
});
};
//()
@ -2964,7 +3010,6 @@ const xr_dk_center_zyys = async () => {
//()
const Xr_zyysNum = (polygon, indexx) => {
console.log(4444444, ...polygon.center);
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
@ -3027,11 +3072,33 @@ const Xr_zyysNum = (polygon, indexx) => {
map.addOverlay(zyys_center.value[indexx]);
zyys_center.value[indexx].addEventListener("click", () => {
console.log(polygon.name);
console.log(polygon);
// cfCsZs.value = polygon.name;
// open_detail();
open_detail_zyys(polygon.town, polygon.committee);
});
};
const open_detail_zyys = (town,committee) => {
let age = "";
dialogShow.value = true;
http
.get(
`/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${
pagination.pageSize
}&committee=${committee}&town=${
town
}`
)
.then((res) => {
if (res.code == 200) {
tableType.data = res.data;
res.data.forEach((item, index) => {
item.index =
index + 1 + (pagination.currentPage - 1) * pagination.pageSize;
});
pagination.total = res.count;
}
});
};
//
const getCameraUrl = () => {
// camera.deviceCode = dataMyTag.camera.sbbm;
@ -3303,6 +3370,7 @@ const changeFwq = async (id, name, names) => {
// map.removeOverlay(circle); //
// circle = null;
} else {
loadingss.value = true;
csh();
clearPerson();
await loadCs(name);
@ -3326,6 +3394,7 @@ const changeFwq = async (id, name, names) => {
message: "无数据",
});
}
loadingss.value = false;
}
};
//
@ -4010,21 +4079,6 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
div.appendChild(number);
number.appendChild(document.createTextNode(this.properties.number));
content.appendChild(div);
// div.onclick = function () {
// let jdCenter = [];
// if (polygon.name == "") {
// title_choose.value = title_choose.value + `>${polygon.name}`;
// loadCs();
// addPolygonCountyCs();
// mapTownCount.map((item) => {
// if (item.name == "") {
// jdCenter = item.center;
// }
// });
// addCs2();
// goMapCenter(jdCenter, 14);
// }
// };
return content;
}
let num = "";

View File

@ -15,8 +15,8 @@ export default defineConfig({
// 第一个代理
"/api": {
// 匹配到啥来进行方向代理
// target: "http://10.0.0.7:8095/", //刘进
target: "https://jzzf.longyou.gov.cn:998/", //线上
target: "http://10.0.0.7:8095/", //刘进
// target: "https://jzzf.longyou.gov.cn:998/", //线上
// target: "http://220.191.238.50:996/", //线上
// target: "https://zzdyyfb.dsjj.qz.gov.cn/web/mgop/gov-open/zj/2002428903/reserved/", //线上
changeOrigin: true, //是否支持跨域