loading

src/view/dialog/dialogMapDp.vue

@@ -41,6 +41,7 @@
         </div>
         <div style="width: 100%; height: calc(100% - 110px)">
           <el-table
+            v-loading="loadT"
             :data="data.tableData"
             height="100%"
             :header-cell-style="{ background: '#008FCD' }"
@@ -143,13 +144,20 @@ const props = defineProps({
   },
   pagination: {
     type: Object,
-    required: true,
+    default: () => {
+      return {};
+    },
+  },
+  loadTable: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
   },
 });
-const emit = defineEmits(["close", "handle"]);
+const emit = defineEmits(["close", "handle", "loadTables"]);
 const handleRowClick = (row, column, event) => {
   // row 是当前行的数据
-  console.log(row);
   emit("openMessage", { nm: row.nm, identNo: row.identNo });
   // router.push({
   //   path: `/home/index/person`,
@@ -158,6 +166,7 @@ const handleRowClick = (row, column, event) => {
 };
 // 详情弹框
 const dialogShow = ref();
+const loadT = ref();
 const data = reactive({
   title: "",
   columns: [],
@@ -173,7 +182,7 @@ watch(
   () => props.dialogShow,
   (newVal, oldVal) => {
     dialogShow.value = newVal;
-    // data.tableData = props.tableData;
+    loadT.value = newVal;
     data.columns = props.columns;
   }
 );
@@ -181,6 +190,7 @@ watch(
   () => props.tableData,
   (newVal, oldVal) => {
     data.tableData = props.tableData;
+    loadT.value = false;
     tableKey.value = Math.random();
   }
 );

src/view/person/index.vue

@@ -98,10 +98,8 @@
           <p>返回</p>
         </div>
         <!-- v-if="dataMyTag.camera" -->
-        <div class="videoCamera">
+        <div class="videoCamera" v-if="dataMyTag.camera">
-          <el-icon size="26" color="#fff" @click="openCamera">
+          <img src="@/assets/images/sxt_detail.png" alt="">
-            <VideoCamera />
-          </el-icon>
         </div>
       </div>
       <div class="person-side">
@@ -1206,9 +1204,13 @@ onMounted(() => {
 }
 .videoCamera {
   position: absolute;
-  top: 8px;
+  top: -10px;
   right: 30px;
   cursor: pointer;
+  img{
+    width: 46px;
+    height: 46px;
+  }
 }
 .widu {
   min-width: 40px !important;

src/view/sy_map.vue

@@ -169,11 +169,14 @@
           <div v-else>未居住</div>
         </template>
         <template #sxt="{ currentCol, currentData }">
-          <el-icon size="24" color="#fff" v-if="currentData.camera"
+          <img
-            ><VideoCamera
+            src="@/assets/images/sxt_map.png"
-          /></el-icon>
+            style="widht: 20px; height: 20px"
+            v-if="currentData.camera"
+          />
         </template>
       </Dialog>
+      <!-- 详情 -->
       <personDetail
         class="detail"
         style="width: 1920px; height: 1080px"
@@ -181,6 +184,24 @@
         :message="message"
         @closeDetail="closeDetail"
       ></personDetail>
+      <!-- 加载动画 -->
+      <div class="loadBody" v-show="loadingss">
+        <div class="load">
+          <div class="icon">
+            <div class="loading">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+          <div class="text">数据加载中...</div>
+        </div>
+      </div>
     </teleport>
   </div>
 </template>
@@ -215,6 +236,7 @@ import j7 from "@/assets/images/map/j7.png";
 import j8 from "@/assets/images/map/j8.png";
 import j9 from "@/assets/images/map/j9.png";
 import j10 from "@/assets/images/map/j10.png";
+import j11 from "@/assets/images/sxt_map.png";
 import dwd from "@/assets/images/map/dwd.png";
 import fwqbg1 from "@/assets/images/map/qlv.png";
 import fwqbg2 from "@/assets/images/map/qlan.png";
@@ -232,10 +254,10 @@ import xcbg from "@/assets/images/map/xcbg.png";
 import AED from "@/assets/images/map/AED.png";
 import Dialog from "./dialog/dialogMapDp.vue";
 import personDetail from "./person/index.vue";
-import { ElLoading } from "element-plus";
 //--------定义参数-------
 //加载
-var loading;
+const loadingss = ref(false);
+const loadTable = ref(false);
 //是否打开人物详情
 const openD = ref(true);
 const message = ref({});
@@ -673,7 +695,7 @@ const yaosuTotal = ref([
   {
     id: 11,
     name: "摄像头",
-    img: j0,
+    img: j11,
     wz: false,
     url: "/api/ggfwyth/ysyzt/getJashsxt",
   },
@@ -821,6 +843,7 @@ const tableType = reactive({
     {
       label: "",
       property: "sxt",
+      width: "50px",
       type: "slot",
     },
   ],
@@ -961,14 +984,10 @@ const buten = async (item) => {
       }
     }
   } else {
-    loading = ElLoading.service({
+    loadingss.value = true;
-      lock: true,
-      text: "加载中...",
-      background: "rgba(0, 0, 0, 0)",
-    });
     await getData(item.age);
     await getDatas(cfJd.value, item.age);
-    loading.close();
+    loadingss.value = false;
   }
 };
 //点击特殊标签(关键字存name)
@@ -1005,12 +1024,9 @@ const buten2 = async (item) => {
       }
     }
   } else {
-    loading = ElLoading.service({
+    loadingss.value = true;
-      lock: true,
+    await getDataBqs(cfJd.value, cfCs.value, item.id);
-      text: "加载中...",
+    loadingss.value = false;
-      background: "rgba(0, 0, 0, 0)",
-    });
-    getDataBqs(cfJd.value, cfCs.value, item.id);
   }
 };
 //人口
@@ -1106,7 +1122,7 @@ const getDatas = async (e, i, y = true) => {
   if (i == "9999") {
     i = "";
   }
-  await http
+  http
     .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
     .then((res) => {
       if (res.code == 200) {
@@ -1227,8 +1243,12 @@ const getDatas = async (e, i, y = true) => {
           } else {
             if (y) {
               if (choose.value.person == "") {
+                console.log(1111111111);
+
                 addCs();
               } else {
+                console.log(2222222222);
+
                 addCs2();
               }
             }
@@ -1434,8 +1454,10 @@ const getDataBq = async (jd, cs) => {
 };
 const getDataBqs = async (jd, cs, bq) => {
   await getDataBqJD(bq);
+  if (cfJd.value == "") {
+  } else {
     await getDataBqs2(cfJd.value, cfCs.value, bq);
-  loading.close();
+  }
 };
 //特殊标签获取街道内部人数
 const getDataBqs2 = async (jd, cs, bq) => {
@@ -1580,6 +1602,90 @@ const getDataBqs3 = async (jd, cs, bq) => {
       }
     });
 };
+//点击地图区块进入社区取消await的影响
+const getDataBqs4 = async (jd, cs, bq) => {
+  //f用来判断执不执行changeRs2
+  let data = {};
+  let vv = 0;
+  let tagIdBq;
+  tsbq_id_total.value.forEach((item, index) => {
+    if (bq == item.name) {
+      tagIdBq = item.tagId;
+    }
+  });
+  if (cs == "" && jd == "") {
+    data = {
+      tagId: tagIdBq,
+    };
+    vv = 1;
+  } else if (cs == "") {
+    data = {
+      town: jd,
+      tagId: tagIdBq,
+    };
+    vv = 2;
+  } else {
+    data = {
+      town: jd,
+      tagId: tagIdBq,
+      committee: cs,
+    };
+    vv = 3;
+  }
+  http.get(`/api/ggfwyth/ysyzt/getBqRsByTownAndCommittee`, data).then((res) => {
+    if (res.code == 200) {
+      if (cfJd.value != "") {
+        xkzCenter.map((item) => {
+          item.numbers = 0;
+          res.data.map((items) => {
+            if (items.committee == item.name) {
+              item.numbers = items.rs;
+            }
+          });
+        });
+      }
+
+      cs_name_arr.value.forEach((item, index) => {
+        map.removeOverlay(cs_name_arr.value[index]);
+      });
+      cs_number_name_arr.value.forEach((item, index) => {
+        map.removeOverlay(cs_number_name_arr.value[index]);
+      });
+      cs_dd_arr.value.forEach((item, index) => {
+        map.removeOverlay(cs_dd_arr.value[index]);
+      });
+      if (title_jd.value == "") {
+      } else {
+        if (sfdd.value) {
+          if (choose.value.person == "") {
+            cs_dd_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_dd_arr.value[index]);
+            });
+            cs_dd_arr.value = [...xuanzhongCs.value];
+            cs_dd_arr.value.map((item, index) => {
+              DGcreateCs(item, index);
+            });
+          } else {
+            cs_dd_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_dd_arr.value[index]);
+            });
+            cs_dd_arr.value = [...xuanzhongCs.value];
+            cs_dd_arr.value.map((item, index) => {
+              DGcreateCs2(item, index);
+            });
+          }
+        } else {
+          if (choose.value.person == "") {
+            addCs();
+          } else {
+            addCs2();
+          }
+        }
+      }
+      loadingss.value = false;
+    }
+  });
+};
 //特殊标签单独获取各个街道人数
 const getDataBqJD = async (bq) => {
   let data = {};
@@ -1717,26 +1823,28 @@ const createZyys = (polygon, indexx, name) => {
 };
 //----------资源要素------------
 //点击街道，回到街道
-const to_jd = (item_name) => {
+const to_jd = async (item_name) => {
+  loadingss.value = true;
   clear();
   title_jd.value = item_name;
   map.removeEventListener("click", markera);
   if (currentMarker !== null) {
     map.removeOverlay(currentMarker);
   }
-
-  // townName.value = item_name;
-  // if (item_name == cfJd.value) {
-  // } else {
-  // console.log(111, choose.value.person);
   cfJd.value = item_name;
   let jdCenter = [];
   BMAP();
   loadCs(item_name);
   addPolygonCountyCs();
+  mapTownCount.map((itemm) => {
+    if (itemm.name == item_name) {
+      jdCenter = itemm.center;
+    }
+  });
+  goMapCenter(jdCenter, 13);
   getDataBq(cfJd.value, "");
   if (choose.value.person == "") {
-    getDatas(cfJd.value, "");
+    await getDatas(cfJd.value, "");
   }
   if (
     choose.value.person == "残疾人" ||
@@ -1749,33 +1857,17 @@ const to_jd = (item_name) => {
     choose.value.person == "孤儿" ||
     choose.value.person == "特困"
   ) {
-    getDataBqs2(cfJd.value, cfCs.value, choose.value.person);
+    await getDatas(cfJd.value, "", false);
-    getDatas(cfJd.value, "", false);
+    getDataBqs4(cfJd.value, cfCs.value, choose.value.person);
   } else if (choose.value.person != "") {
     if (choose.value.person == "9999") {
-      getDatas(cfJd.value, "");
+      await getDatas(cfJd.value, "");
+      loadingss.value = false;
     } else {
-      // if (choose.value.person == 1) {
+      await getDatas(cfJd.value, choose.value.person);
-      //   getDatas(cfJd.value, "0"); //0岁传字符串
+      loadingss.value = false;
-      // } else {
-      //   getDatas(cfJd.value, choose.value.person);
-      // }
-      getDatas(cfJd.value, choose.value.person);
     }
   }
-  // if (title_jd.value == item.name) {
-  // } else {
-  //   title_jd.value = item.name;
-  // }
-
-  mapTownCount.map((itemm) => {
-    if (itemm.name == item_name) {
-      jdCenter = itemm.center;
-    }
-  });
-  goMapCenter(jdCenter, 13);
-
-  // }
 };
 //详情
 const open_detail = () => {
@@ -1783,8 +1875,8 @@ const open_detail = () => {
   let tagId;
   if (choose.value.person == "9999") {
     age = "";
-    person_detail(age);
     dialogShow.value = true;
+    person_detail(age);
   } else if (choose.value.person == "6666") {
     age = "";
   } else if (
@@ -1804,12 +1896,14 @@ const open_detail = () => {
         tagId = item.tagId;
       }
     });
-    person_detail(age, tagId);
     dialogShow.value = true;
+
+    person_detail(age, tagId);
   } else {
+    dialogShow.value = true;
+
     age = choose.value.person;
     person_detail(age);
-    dialogShow.value = true;
   }
 };
 const close = () => {
@@ -1892,6 +1986,7 @@ const person_detail = (age, tagId) => {
             index + 1 + (pagination.currentPage - 1) * pagination.pageSize;
         });
         pagination.total = res.count;
+
       }
     });
 };
@@ -2288,11 +2383,7 @@ const addPolygonCounty = () => {
         // townName.value = item.name;
         if (item.name == cfJd.value) {
         } else {
-          loading = ElLoading.service({
+          loadingss.value = true;
-            lock: true,
-            text: "加载中...",
-            background: "rgba(0, 0, 0, 0)",
-          });
           clear();
           xkzDk.length = 0;
           cfJd.value = item.name;
@@ -2309,6 +2400,7 @@ const addPolygonCounty = () => {
           await getDataBq(cfJd.value, "");
           if (choose.value.person == "") {
             await getDatas(cfJd.value, "");
+            loadingss.value = false;
           }
           if (
             choose.value.person == "残疾人" ||
@@ -2321,21 +2413,22 @@ const addPolygonCounty = () => {
             choose.value.person == "孤儿" ||
             choose.value.person == "特困"
           ) {
-             getDataBqs2(cfJd.value, cfCs.value, choose.value.person);
+            await getDatas(cfJd.value, "", false);
-             getDatas(cfJd.value, "", false);
+            //使用await把loading放外面，没效果，所以把loading放接口里面
+            getDataBqs4(cfJd.value, cfCs.value, choose.value.person);
           } else if (choose.value.person != "") {
             if (choose.value.person == "9999") {
               await getDatas(cfJd.value, "");
+              loadingss.value = false;
             } else {
               await getDatas(cfJd.value, choose.value.person);
+              loadingss.value = false;
             }
           }
           if (title_jd.value == item.name) {
           } else {
             title_jd.value = item.name;
           }
-
-          loading.close();
         }
       });
     }
@@ -2533,17 +2626,13 @@ const addPolygonCountyCs = () => {
         strokeWeight: 2,
         strokeOpacity: 0.8,
         fillColor: fillColor,
-        fillOpacity: 0.5,
+        fillOpacity: 0.3,
         name: item.name,
         zIndex: 99,
       });
       map.addOverlay(cs_qk_arr.value[index]);
       cs_qk_arr.value[index].addEventListener("click", async () => {
-        loading = ElLoading.service({
+        loadingss.value = true;
-          lock: true,
-          text: "数据加载中...",
-          background: "rgba(0, 0, 0, 0)",
-        });
         cs_dd_arr.value = [];
         cfCs.value = item.name;
         title_cs.value = item.name;
@@ -2592,7 +2681,7 @@ const addPolygonCountyCs = () => {
 
         await getDatas2(cfJd.value, choose.value.person, cfCs.value);
 
-        loading.close();
+        loadingss.value = false;
       });
     }
   });
@@ -2612,7 +2701,7 @@ const addCsChoose = () => {
         strokeWeight: 2,
         strokeOpacity: 0.8,
         fillColor: fillColor,
-        fillOpacity: 0.4,
+        fillOpacity: 0.3,
         name: item.name,
         zIndex: 99,
       });
@@ -2634,17 +2723,13 @@ const addCsUnChoose = () => {
         strokeWeight: 2,
         strokeOpacity: 0.8,
         fillColor: fillColor,
-        fillOpacity: 0.5,
+        fillOpacity: 0.3,
         name: item.name,
         zIndex: 99,
       });
       map.addOverlay(cs_un_choose_arr.value[index]);
       cs_un_choose_arr.value[index].addEventListener("click", async () => {
-        loading = ElLoading.service({
+        loadingss.value = true;
-          lock: true,
-          text: "数据加载中...",
-          background: "rgba(0, 0, 0, 0)",
-        });
         cfCs.value = item.name;
         title_cs.value = cfCs.value;
         sfdd.value = true;
@@ -2691,7 +2776,7 @@ const addCsUnChoose = () => {
         ) {
           await getDataBqs3(cfJd.value, cfCs.value, choose.value.person);
         }
-        loading.close();
+        loadingss.value = false;
       });
     }
   });
@@ -3008,14 +3093,16 @@ const reset_font2 = () => {
   document.querySelector(".detail").style.transform =
     "scale(" + width / 1920 + "," + height / 1080 + ")";
 };
-onMounted(() => {
+onMounted(async () => {
   // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
+  loadingss.value = true;
   reset_font();
   initMap();
   getData();
-  getDataBq();
   BMAP();
   getFwq();
+  await getDataBq();
+  loadingss.value = false;
 });
 </script>
 
@@ -3435,6 +3522,179 @@ onMounted(() => {
     }
   }
 }
+//加载动画
+.loadBody {
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0);
+  position: absolute;
+  .load {
+    box-sizing: border-box;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 120px;
+    height: 120px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    backdrop-filter: blur(2px);
+    transform: translate(-50%, -50%);
+    z-index: 99999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      //加载
+      .loading,
+      .loading > div {
+        position: relative;
+        box-sizing: border-box;
+      }
+
+      .loading {
+        display: block;
+        font-size: 0;
+        color: #ffffff;
+      }
+
+      .loading.la-dark {
+        color: #333;
+      }
+
+      .loading > div {
+        display: inline-block;
+        float: none;
+        background-color: currentColor;
+        border: 0 solid currentColor;
+      }
+
+      .loading {
+        width: 50px;
+        height: 50px;
+      }
+
+      .loading > div {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 8px;
+        height: 8px;
+        margin-top: -4px;
+        margin-left: -4px;
+        border-radius: 100%;
+        animation: ball-spin-clockwise-fade 1s infinite linear;
+      }
+
+      .loading > div:nth-child(1) {
+        top: 5%;
+        left: 50%;
+        animation-delay: -0.875s;
+      }
+
+      .loading > div:nth-child(2) {
+        top: 18.1801948466%;
+        left: 81.8198051534%;
+        animation-delay: -0.75s;
+      }
+
+      .loading > div:nth-child(3) {
+        top: 50%;
+        left: 95%;
+        animation-delay: -0.625s;
+      }
+
+      .loading > div:nth-child(4) {
+        top: 81.8198051534%;
+        left: 81.8198051534%;
+        animation-delay: -0.5s;
+      }
+
+      .loading > div:nth-child(5) {
+        top: 94.9999999966%;
+        left: 50.0000000005%;
+        animation-delay: -0.375s;
+      }
+
+      .loading > div:nth-child(6) {
+        top: 81.8198046966%;
+        left: 18.1801949248%;
+        animation-delay: -0.25s;
+      }
+
+      .loading > div:nth-child(7) {
+        top: 49.9999750815%;
+        left: 5.0000051215%;
+        animation-delay: -0.125s;
+      }
+
+      .loading > div:nth-child(8) {
+        top: 18.179464974%;
+        left: 18.1803700518%;
+        animation-delay: 0s;
+      }
+
+      .loading.la-sm {
+        width: 16px;
+        height: 16px;
+      }
+
+      .loading.la-sm > div {
+        width: 4px;
+        height: 4px;
+        margin-top: -2px;
+        margin-left: -2px;
+      }
+
+      .loading.la-2x {
+        width: 64px;
+        height: 64px;
+      }
+
+      .loading.la-2x > div {
+        width: 16px;
+        height: 16px;
+        margin-top: -8px;
+        margin-left: -8px;
+      }
+
+      .loading.la-3x {
+        width: 96px;
+        height: 96px;
+      }
+
+      .loading.la-3x > div {
+        width: 24px;
+        height: 24px;
+        margin-top: -12px;
+        margin-left: -12px;
+      }
+
+      @keyframes ball-spin-clockwise-fade {
+        50% {
+          opacity: 0.25;
+          transform: scale(0.5);
+        }
+
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+    }
+    .text {
+      margin-top: 10px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 2px;
+      text-align: center;
+    }
+  }
+}
 
 .title {
   background-image: url(@/assets/images/map/map_title_bg.png);
@@ -3639,3 +3899,4 @@ onMounted(() => {
   z-index: 9998;
 }
 </style>
+