人口总数

2025-01-16 10:12:44 +08:00 · 2025-01-16 10:12:44 +08:00 · 79ded0bcdf
parent 471a030165
commit 79ded0bcdf
5 changed files with 106 additions and 66 deletions
--- a/src/assets/images/sy/gross-population.png
+++ b/src/assets/images/sy/gross-population.png
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -0,0 +1,4 @@
+// 获取静态图片
+export const onGobalImage = (url) => {
+    return new URL(`../assets/${url}`, import.meta.url).href;
+}
--- a/src/view/dialog/dialogModel.vue
+++ b/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;
-    background: rgba(70, 114, 171, 0.36);
+      max-height: 54vh;
      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 {
--- a/src/view/sy.vue
+++ b/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"
-        ></ePie2>
+          v-if="showEchart"></ePie2>
        <div class="bt">
          <ePie
            style="margin-bottom: 20px"
            :list="data.ageGroup"
-            v-if="showEchart"
-          ></ePie>
+            v-if="showEchart"></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);
 // 详情弹框
--- a/src/view/sy_map.vue
+++ b/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,
        });