人口总数

src/utils/index.js

@@ -0,0 +1,4 @@
+// 获取静态图片
+export const onGobalImage = (url) => {
+    return new URL(`../assets/${url}`, import.meta.url).href;
+}

src/view/dialog/dialogModel.vue

@@ -34,10 +34,13 @@
               alt="" />
           </div>
         </div>
-        <div class="tabel-part-box">
+        <div
+          :class="{ 'tabel-part-box': true, 'tabel-part-box-bg': isBgColor }">
+          <div class="tabel-part-box-content">
             <slot></slot>
           </div>
         </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -58,6 +61,12 @@ const props = defineProps({
       return "";
     },
   },
+  isBgColor: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
 });
 const show = computed({
   get() {
@@ -121,10 +130,10 @@ const onClose = () => {
   // }
   .tabel-part-box {
     margin: 30px 50px 50px;
-    padding: 26px;
+    padding: 13px;
+    .tabel-part-box-content {
       min-height: 300px;
-    max-height: 56vh;
+      max-height: 54vh;
-    background: rgba(70, 114, 171, 0.36);
       color: #fff;
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
@@ -132,11 +141,18 @@ const onClose = () => {
       color: #ffffff;
       line-height: 1.6;
       letter-spacing: 3px;
-    overflow: auto;
+      overflow: hidden;
       &::-webkit-scrollbar {
         display: none;
       }
     }
+  }
+  .tabel-part-box-bg {
+    background: rgba(70, 114, 171, 0.36);
+    .tabel-part-box-content {
+      overflow: auto;
+    }
+  }
 }
 
 .pagePart {

src/view/sy.vue

@@ -188,24 +188,21 @@
         <div class="left_3_1">
           <div
             class="left_3_1_item"
-            @click="showDialog('就业培训', '/api/ggfwyth/jypxList')"
+            @click="showDialog('就业培训', '/api/ggfwyth/jypxList')">
-          >
             <div>{{ data.employmentService.jypx }}<span>人</span></div>
             <div>就业培训</div>
             <div class="moveImg"></div>
           </div>
           <div
             class="left_3_1_item"
-            @click="showDialog('就业见习服务', '/api/ggfwyth/jyjxfwList')"
+            @click="showDialog('就业见习服务', '/api/ggfwyth/jyjxfwList')">
-          >
             <div>{{ data.employmentService.jyjxfw }}<span>次</span></div>
             <div>就业见习服务</div>
             <div class="moveImg"></div>
           </div>
           <div
             class="left_3_1_item"
-            @click="showDialog('就业援助', '/api/ggfwyth/jyyzList')"
+            @click="showDialog('就业援助', '/api/ggfwyth/jyyzList')">
-          >
             <div>{{ data.employmentService.jyyz }}<span>人</span></div>
             <div>就业援助</div>
             <div class="moveImg"></div>
@@ -219,15 +216,17 @@
           <img
             src="../assets/images/sy/主页人口.gif"
             style="width: 70%; height: 112%; margin: -2% 15%"
-            alt=""
+            alt="" />
-          />
           <div class="people_total_item left">
             <div class="number">{{ data.PopulationData.man }}</div>
             <img src="../assets/images/sy/man.png" alt="" />
             <div class="sex">男性人口</div>
             <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
           </div>
-          <div class="people_total_item2 center" style="cursor: pointer">
+          <div
+            class="people_total_item2 center"
+            style="cursor: pointer"
+            @click="onGrossPopulation">
             <img src="../assets/images/sy/people_total.png" alt="" />
             <div class="number">{{ data.PopulationData.rkzs }}</div>
             <div class="total">人口总数</div>
@@ -242,20 +241,17 @@
         <ePie2
           style="margin-top: 20px"
           :list="data.ageRatio"
-          v-if="showEchart"
+          v-if="showEchart"></ePie2>
-        ></ePie2>
         <div class="bt">
           <ePie
             style="margin-bottom: 20px"
             :list="data.ageGroup"
-            v-if="showEchart"
+            v-if="showEchart"></ePie>
-          ></ePie>
           <div
             class="btList"
             ref="mainRef"
             @mouseenter="stopAutoScroll"
-            @mouseleave="startAutoScroll"
+            @mouseleave="startAutoScroll">
-          >
             <div class="btList_item" v-for="(item, index) in btList">
               <div class="btList_item_color" :style="bt(index)"></div>
               <div class="btList_item_value">
@@ -268,20 +264,17 @@
           <div class="table_choose">
             <div
               :class="choose == '1' ? 'choose' : 'noChoose'"
-              @click="change('1')"
+              @click="change('1')">
-            >
               公共服务
             </div>
             <div
               :class="choose == '2' ? 'choose' : 'noChoose'"
-              @click="change('2')"
+              @click="change('2')">
-            >
               企业服务
             </div>
             <div
               :class="choose == '3' ? 'choose' : 'noChoose'"
-              @click="change('3')"
+              @click="change('3')">
-            >
               政务服务
             </div>
           </div>
@@ -311,29 +304,24 @@
                 class="table_border"
                 :row-style="rowState"
                 :header-cell-style="tableHeaderColor"
-                v-if="choose == '1'"
+                v-if="choose == '1'">
-              >
                 <el-table-column
                   prop="highFrequencyApp"
                   label="高频应用"
-                  width="132"
+                  width="132" />
-                />
 
                 <el-table-column
                   prop="monthlyVisits"
                   label="月访问量"
-                  width="131"
+                  width="131" />
-                />
                 <el-table-column
                   prop="highFrequencyApp1"
                   label="高频应用"
-                  width="132"
+                  width="132" />
-                />
                 <el-table-column
                   prop="monthlyVisits1"
                   label="月访问量"
-                  width="132"
+                  width="132" />
-                />
                 <!-- <el-table-column prop="finish" label="完成情况">
               <template #default="scope">
                 <div
@@ -352,8 +340,7 @@
               <div
                 class="qyfw_item"
                 v-for="(item, index) in qyfyList"
-                :key="index"
+                :key="index">
-              >
                 <img class="qyfw_item_left" :src="item.img" />
                 <div class="qyfw_item_right">
                   <div class="name">{{ item.name }}</div>
@@ -426,8 +413,7 @@
             v-for="(item, index) in data.ylwsList"
             :key="index"
             :style="{ cursor: item.name == '医院卫生院' ? 'pointer' : '' }"
-            @click="showDialog2(item.name, '/api/ggfwyth/yywsyList')"
+            @click="showDialog2(item.name, '/api/ggfwyth/yywsyList')">
-          >
             <div class="name">{{ item.name }}</div>
             <div class="value">{{ item.value }}{{ item.dw }}</div>
           </div>
@@ -444,8 +430,7 @@
           <div
             class="whsy_item"
             v-for="(item, index) in data.whsyList"
-            :key="index"
+            :key="index">
-          >
             <div class="name">{{ item.name }}</div>
             <div class="value">
               {{ item.value }}<span>{{ item.dw }}</span>
@@ -464,16 +449,14 @@
           <div
             class="tysy_item"
             v-for="(item, index) in data.tysyList"
-            :key="index"
+            :key="index">
-          >
             <div class="value">
               {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
             </div>
             <img :src="item.img" />
             <img
               src="../assets/images/sy/tyBon.png"
-              style="margin-top: -60px"
+              style="margin-top: -60px" />
-            />
             <div class="name">{{ item.name }}</div>
           </div>
         </div>
@@ -594,8 +577,7 @@
       :tableData="tableType.data"
       :pagination="pagination"
       @close="close"
-      @handle="handlePagination"
+      @handle="handlePagination">
-    >
     </Dialog>
     <DialogEc
       :dialogShowEc="dialogShowEc"
@@ -603,8 +585,7 @@
       :list1="dataEc.list1"
       :list2="dataEc.list2"
       :year="dataEc.times"
-      @close="close"
+      @close="close">
-    >
     </DialogEc>
     <DialogTab
       :dialogShowTab="dialogShowTab"
@@ -616,14 +597,22 @@
       :tableData="dataTab.data"
       :pagination="pagination"
       @handle="handlePaginationTab"
-      @close="close"
+      @close="close">
-    >
- 
     </DialogTab>
+    <DialogModel
+      v-bind="dialogModelConfig"
+      v-model:show="dialogModelConfig.show">
+      <component
+        v-if="dialogModelConfig.render"
+        :is="dialogModelConfig.render"></component>
+    </DialogModel>
   </div>
 </template>
 
 <script setup>
+import { ref, reactive, onMounted, onBeforeMount, computed, h } from "vue";
+import { ElMessage, ElMessageBox, ElImage } from "element-plus";
+import { onGobalImage } from "@/utils/index.js";
 import ePie from "./echarts_sy/pie.vue";
 import ePie2 from "./echarts_sy/pie2.vue";
 import zwfw1 from "./echarts_sy/zwfw1.vue";
@@ -644,7 +633,7 @@ import ggjtimg4 from "../assets/images/sy/ggjt4.png";
 import Dialog from "./dialog/dialog.vue";
 import DialogEc from "./dialog/dialogEc.vue";
 import DialogTab from "./dialog/dialogTab.vue";
-import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
+import DialogModel from "./dialog/dialogModel.vue";
 import http from "@/utils/request.js";
 import { CircleCloseFilled } from "@element-plus/icons-vue";
 import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
@@ -655,12 +644,39 @@ import qyfw4 from "../assets/images/sy/dxje.png";
 import { useRouter, useRoute } from "vue-router";
 const router = useRouter();
 const routers = useRoute();
+
 // 路由跳转
 const goto = (url) => {
   router.push({
     path: `${url}`,
   });
 };
+//#region 弹框模板
+const dialogModelConfig = reactive({
+  show: false,
+  title: "",
+  render: null,
+});
+//#endregion
+//#region 人口总数
+const onGrossPopulation = () => {
+  dialogModelConfig.title = "人口总数";
+  dialogModelConfig.render = () => {
+    return h(ElImage, {
+      style: {
+        width: "100%",
+        height: "54vh",
+      },
+      src: onGobalImage("images/sy/gross-population.png"),
+      fit: "fill",
+      width: "100%",
+      height: "100%",
+    });
+  };
+  dialogModelConfig.show = true;
+};
+
+//#endregion
 //控制echart的显示
 const showEchart = ref(false);
 // 详情弹框

src/view/sy_map.vue

@@ -400,7 +400,8 @@
       <!-- 弹框模版 -->
       <DialogModel
         v-bind="dialogModelConfig"
-        v-model:show="dialogModelConfig.show">
+        v-model:show="dialogModelConfig.show"
+        isBgColor>
         <component
           v-if="dialogModelConfig.render"
           :is="dialogModelConfig.render"></component>
@@ -1083,7 +1084,10 @@ const onMechanism = () => {
     if (res.code == 200) {
       dialogModelConfig.render = () => {
         let html =
-          res.data?.zcnr?.replace(/\n/g, "<br/>") || res?.data?.zcnr || "";
+          `&emsp;&emsp;` +
+            res.data?.zcnr?.replace(/\n/g, "<br/>&emsp;&emsp;") ||
+          res?.data?.zcnr ||
+          "";
         return h("div", {
           innerHTML: html,
         });