1

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.3",
     "pinia": "^2.1.7",
     "vant": "^4.8.0",
     "vue": "^3.3.4",

src/utils/request.js

@@ -0,0 +1,137 @@
+import axios from 'axios';
+// import { ElMessage } from 'element-plus'
+// import tools from '@/utils/tools'
+import { useRoute, useRouter } from "vue-router";
+import { Toast } from "vant";
+const Route = useRoute(); //路由数据
+const Router = useRouter(); //方法可以跳转 添加路由
+// axios.defaults.baseURL = 'https://www.zdool.com/'
+axios.defaults.timeout = 600000
+
+// HTTP request 拦截器
+axios.interceptors.request.use(
+    (config) => {
+        // if(config.method === 'get') {
+        //     //  给data赋值以绕过if判断
+        //     config.data = true
+        // }
+        let user = sessionStorage.getItem('token')
+        if (user) {
+            config.headers['x-token'] = 'Bearer ' + user;
+        }
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
+
+// HTTP response 拦截器
+axios.interceptors.response.use(
+    (response) => {
+        return response;
+    },
+    (error) => {
+        if (error.response) {
+            if (error.response.status == 401) {
+                // Toast.fail('请重新登录!')
+                // 跳转登录页
+                // Router.push('/longn')
+                // localStorage.removeItem("user");
+
+            } else if (error.response.status == 404) {
+                // Toast.fail("Status:404，正在请求不存在的服务器记录！")
+                // Router.push('/404')
+            } else if (error.response.status == 500) {
+                // Toast.fail('Status:500，服务器发生错误！')
+                // Router.push('/500')
+            } else if (error.response.status == '访问受限') {
+                // Router.push('/fwsx')
+            } else {
+                // Toast.fail(`Status:${error.response.status}，未知错误！`)
+                // Router.push('/qtcw')
+            }
+        } else {
+            Toast.fail("请求服务器无响应！")
+        }
+        return Promise.reject(error.response);
+    }
+);
+
+var http = {
+
+    /** get 请求
+     * @param  {接口地址} url
+     * @param  {请求参数} params
+     */
+    get: function (url, params) {
+        return new Promise((resolve, reject) => {
+            axios.get(url, {
+                params: params
+            })
+                .then((response) => {
+                    resolve(response.data);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        })
+    },
+
+    /** post 请求
+     * @param  {接口地址} url
+     * @param  {请求参数} params
+     */
+    post: function (url, params) {
+        return new Promise((resolve, reject) => {
+            axios.post(url, params)
+                .then((response) => {
+                    resolve(response.data);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        })
+    },
+
+    put: function (url, params) {
+        return new Promise((resolve, reject) => {
+            axios.put(url, params)
+                .then((response) => {
+                    resolve(response.data);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        })
+    },
+
+    delete: function (url, params) {
+        return new Promise((resolve, reject) => {
+            axios.delete(url, params)
+                .then((response) => {
+                    resolve(response.data);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        })
+    },
+    // download: function (url) {
+    //     let user = tools.data.get('user');
+    //     let token = "x-token=" + user.token;
+    //     url = url + (url.indexOf("?") > 0 ? "&" : "?") + token;
+    //     window.open(url);
+    // },
+    // downloadFile(url, params) {
+    //     return new Promise((resolve, reject) => {
+    //         axios({ url, params, responseType: 'blob', }).then((res) => {
+    //             resolve(res);
+    //         })
+
+    //     })
+    // }
+
+}
+
+export default http;

src/utils/tool.js

@@ -0,0 +1,105 @@
+const tool = {
+    /**
+     * 
+     * @param {*} 工具函数 
+     * @param {*} length 
+     * @returns 
+     * truncateString(string, length) 该方法可以从指定长度处截断字符串
+     * 
+     * tripHtml(html) 去除字符串中的HTML
+     * 
+     * capitalize(str)字符串首字母大写
+     * 
+     * timeFromDate(date)该方法可以用于将时间转化为hour:minutes:seconds的格式
+     * 
+     * dayOfYear(date)该方法用于检测给出的日期位于今年的第几天
+     * 
+     * dayDif(date1,date2)该方法用于计算两个日期之间的间隔时间
+     * 
+     * isDateValid(...val)方法用于检测给出的日期是否有效
+     * 
+     * removeDuplicates(arr)该方法用于移除数组中的重复项
+     * 
+     * isNotEmpty(arr)该方法用于判断一个数组是否为空数组，它将返回一个布尔值
+     * 
+     * isEmpty(obj)方法用于检测一个JavaScript对象是否为空
+     * 
+     * goToTop()该方法用于在页面中返回顶部
+     * 
+     * scrolledToBottom()该方法用于判断页面是否已经底部
+     * 
+     * trueTypeOf(obj)方法用于获取一个变量的类型
+     */
+    // 该方法可以从指定长度处截断字符串
+    truncateString: (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`,
+
+    //去除字符串中的HTML
+    tripHtml: html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '',
+
+    //字符串首字母大写
+    capitalize: str => str.charAt(0).toUpperCase() + str.slice(1),
+
+    // 该方法可以用于将时间转化为hour:minutes:seconds的格式
+    timeFromDate: date => date.toTimeString().slice(0, 8),
+
+    // 该方法用于检测给出的日期位于今年的第几天
+    dayOfYear: (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24),
+
+    // 该方法用于计算两个日期之间的间隔时间
+    dayDif: (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000),
+
+    // 该方法用于检测给出的日期是否有效
+    isDateValid: (...val) => !Number.isNaN(new Date(...val).valueOf()),
+
+    // 该方法用于移除数组中的重复项
+    removeDuplicates: (arr) => [...new Set(arr)],
+
+    //该方法用于判断一个数组是否为空数组，它将返回一个布尔值
+    isNotEmpty: arr => Array.isArray(arr) && arr.length > 0,
+
+    // 该方法用于检测一个JavaScript对象是否为空
+    isEmpty: obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object,
+
+    //该方法用于在页面中返回顶部
+    goToTop: () => window.scrollTo(0, 0),
+
+    //该方法用于判断页面是否已经底部
+    scrolledToBottom: () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight,
+
+    // 该方法用于获取一个变量的类型
+    trueTypeOf: (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(),
+    // 阿拉伯数字转中文
+    convertToChineseNumeral: (num) => {
+        if (num == 10) {
+            return '十'
+        } else if (num == 1) {
+            return '一'
+        }
+        const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+        const units = ['', '十', '百', '千', '万'];
+        let result = '';
+        let numStr = num.toString();
+        for (let i = 0; i < numStr.length; i++) {
+            let digit = parseInt(numStr.charAt(i));
+            let unit = units[numStr.length - i - 1];
+            if (digit === 0) {
+                // 当前数字为0时不需要输出汉字，但需要考虑上一个数字是否为0，避免出现连续的零
+                if (result.charAt(result.length - 1) !== '零') {
+                    result += '零';
+                }
+            } else {
+                result += digits[digit] + unit;
+            }
+        }
+        // 对于一些特殊的数字，如10、100等，需要在最前面加上“一”
+        if (result.charAt(0) === '一') {
+            result = result.substr(1, result.length);
+        } else if (result.charAt(0) === '百') {
+            result = '一' + result;
+        } else if (result.charAt(0) === '千') {
+            result = '一' + result;
+        }
+        return result;
+    }
+}
+export default tool;

src/views/HomeView.vue

@@ -90,6 +90,7 @@
 </template>
   
 <script  setup>
+import http from "@/utils/request";
 import { onMounted, ref, reactive } from "vue";
 import img1 from "@/assets/home/yysy.png";
 import img2 from "@/assets/home/yysyxz.png";
@@ -233,45 +234,65 @@ const list = reactive({
       name: "幼有善育",
       img: img1,
       imgs: img2,
+      columnName: "Childcare",
     },
     {
       id: 1,
       name: "学有优教",
       img: img3,
       imgs: img4,
+      columnName: "Education",
     },
     {
       id: 2,
       name: "劳有所得",
       img: img5,
       imgs: img6,
+      columnName: "ObtainEmployment",
     },
     {
       id: 3,
       name: "病有良医",
       img: img7,
       imgs: img8,
+      columnName: "Health",
     },
     {
       id: 4,
       name: "老有康养",
       img: img9,
       imgs: img10,
+      columnName: "Retirement",
     },
-    {
+    // {
-      id: 5,
+    //   id: 5,
-      name: "住有宜居",
+    //   name: "住有宜居",
-      img: img11,
+    //   img: img11,
-      imgs: img12,
+    //   imgs: img12,
-    },
+    //   columnName: "HelpDisabled",
+    // },
     {
       id: 6,
       name: "弱有众扶",
       img: img13,
       imgs: img14,
+      columnName: "HelpDisabled",
     },
   ],
 });
+const getlist = (e) => {
+  let patle = "";
+  if (!e) {
+    patle = "Childcare";
+  } else {
+    patle = e;
+  }
+  http.post(`/srv/platform/map/list/${patle}`).then((res) => {
+    if (res.code == 200) {
+      console.log(res.data);
+    }
+  });
+};
 const init = () => {
   map = new T.Map("mapDiv");
   // map.setMapType(window.TMAP_SATELLITE_MAP);
@@ -293,6 +314,7 @@ const init = () => {
 
 const yxfwxz = (e) => {
   list.index = e.id;
+  getlist(e.columnName)
   // map.clearOverLays();
 };
 const touchmove = (event) => {
@@ -321,6 +343,7 @@ const yxf = () => {
 
 onMounted(() => {
   init();
+  getlist();
 });
 </script>
 <style scoped lang='scss'>

vite.config.js

@@ -6,8 +6,18 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    // ← ← ← ← ← ←
+    host: '0.0.0.0', // 解决“vite use `--host` to expose”-- 0.0.0.0 将监听所有地址
-    host: "0.0.0.0", // ← 新增内容 ←
+    proxy: {
+      // '/api': {
+      //   target: 'https://qqzso.ydool.com/',//马顺华
+      //   changeOrigin: true,
+      // },
+      '/srv': {
+        target: 'http://192.168.1.98:10001/',//沈涛
+        changeOrigin: true,
+      },
+
+    }
   },
   base: "./", //生产环境路径
   plugins: [vue()],

yarn.lock

@@ -240,6 +240,20 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.6.3.tgz#7f50f23b3aa246eff43c54834272346c396613f4"
+  integrity sha512-fWyNdeawGam70jXSVlKl+SUNVcL6j6W79CuSIPfi6HnDUmSCH6gyUys/HrqHeA/wU0Az41rRgean494d0Jb+ww==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -267,11 +281,23 @@ braces@~3.0.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 esbuild@^0.18.10:
   version "0.18.20"
   resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
@@ -312,6 +338,20 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+follow-redirects@^1.15.0:
+  version "1.15.4"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
+  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -360,6 +400,18 @@ magic-string@^0.30.5:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -397,6 +449,11 @@ postcss@^8.4.27, postcss@^8.4.32:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"