map

src/view/dialog/dialogSf.vue

@@ -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>
+  

src/view/sy_details.vue

@@ -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: "服务详情",
@@ -479,9 +509,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(

src/view/sy_map.vue

@@ -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); // 清空服务圈 图标
             });
           }
-
+          if (polygon.fgfwrs.length == 0) {
-          await get_dk_zyys(
-            polygon.xzjd,
-            polygon.csq,
-            polygon.num,
-            polygon.zyysmc
-          );
-          if (zyys_data.value.point.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 = "";
+  let zyys_jd = [];
-  await loadCs(xzjd);
+  sj.forEach((itemN) => {
-  zyys_data.value.name = csq;
+    if (!zyys_jd.includes(itemN.town)) {
-  xkzDk.forEach((dk) => {
+      zyys_jd.push(itemN.town);
-    if (csq == dk.name) {
-      zyys_data.value.point.push(dk);
     }
   });
-  xkzCenter.forEach((center) => {
+  console.log(1111111111111, zyys_jd);
-    if (csq == center.name) {
+
-      let a = { ...center, num: number, zyysmc: name };
+  zyys_jd.forEach((item) => {
-      zyys_data.value.center.push(a);
+    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 = "";

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
       // 第一个代理
       "/api": {
         // 匹配到啥来进行方向代理
-        // target: "http://10.0.0.7:8095/", //刘进
+        target: "http://10.0.0.7:8095/", //刘进
-        target: "https://jzzf.longyou.gov.cn:998/", //线上
+        // 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, //是否支持跨域