webgit init

.env.development

@@ -0,0 +1,32 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/api/'
+
+#高德地图API—KEY
+VUE_APP_AMAP_KEY = 7a6db58e92f9271f0f7c159871eb3a5e
+
+#天地图TOKEN
+VUE_APP_TDT_TOKEN = b4513f9270169f4d38d5f516e783ba19
+
+#天地图底图瓦片
+VUE_APP_TDT_BOTTOM_URL = 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
+
+#天地图路网标记图层
+VUE_APP_TDT_BOTTOM_MARK_URL = 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk='
+
+#Geoserver服务地址
+VUE_APP_GEO_SERVER_BASE_URL = 'http://47.108.172.52:9811/geoserver/'
+
+#Geoserver服务 住宅 工作空间 
+VUE_APP_GEO_SERVER_HOUSE_SUFFIX = -house/wms?service=WMS
+
+#Geoserver服务 工业 工作空间 
+VUE_APP_GEO_SERVER_FACTORY_SUFFIX = -factory/wms?service=WMS
+
+#Geoserver服务 公服 工作空间 
+VUE_APP_GEO_SERVER_COMMON_SUFFIX = -common/wms?service=WMS
+
+#Geoserver服务 商服 工作空间 
+VUE_APP_GEO_SERVER_BUSINESS_SUFFIX = -business/wms?service=WMS

.env.production

@@ -0,0 +1,33 @@
+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/api/'
+
+
+#高德地图API—KEY
+VUE_APP_AMAP_KEY = 7a6db58e92f9271f0f7c159871eb3a5e
+
+#天地图TOKEN
+VUE_APP_TDT_TOKEN = b4513f9270169f4d38d5f516e783ba19
+
+#天地图底图瓦片
+VUE_APP_TDT_BOTTOM_URL = 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
+
+#天地图路网标记图层
+VUE_APP_TDT_BOTTOM_MARK_URL = 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
+
+#Geoserver服务地址
+VUE_APP_GEO_SERVER_BASE_URL = 'http://47.108.172.52:9811/geoserver/'
+
+#Geoserver服务 住宅 工作空间 
+VUE_APP_GEO_SERVER_HOUSE_SUFFIX = -house/wms?service=WMS
+
+#Geoserver服务 工业 工作空间 
+VUE_APP_GEO_SERVER_FACTORY_SUFFIX = -factory/wms?service=WMS
+
+#Geoserver服务 公服 工作空间 
+VUE_APP_GEO_SERVER_COMMON_SUFFIX = -common/wms?service=WMS
+
+#Geoserver服务 商服 工作空间 
+VUE_APP_GEO_SERVER_BUSINESS_SUFFIX = -business/wms?service=WMS

.env.test

@@ -0,0 +1,35 @@
+NODE_ENV = test
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/api/'
+
+
+# #高德地图API—KEY
+# VUE_APP_AMAP_KEY= 7a6db58e92f9271f0f7c159871eb3a5e
+
+# #天地图TOKEN
+# VUE_APP_TDT_TOKEN= b4513f9270169f4d38d5f516e783ba19
+
+# #天地图底图瓦片
+# VUE_APP_TDT_BOTTOM_URL = 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
+
+# #天地图路网标记图层
+# VUE_APP_TDT_BOTTOM_MARK_URL = 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
+
+# #Geoserver服务地址
+# VUE_APP_GEO_SERVER_BASE_URL = 'http://47.108.172.52:9811/geoserver/'
+
+# #Geoserver服务 住宅 工作空间 
+# VUE_APP_GEO_SERVER_HOUSE_SUFFIX = -house/wms?service=WMS
+
+# #Geoserver服务 工业 工作空间 
+# VUE_APP_GEO_SERVER_FACTORY_SUFFIX = -factory/wms?service=WMS
+
+# #Geoserver服务 公服 工作空间 
+# VUE_APP_GEO_SERVER_COMMON_SUFFIX = -common/wms?service=WMS
+
+# #Geoserver服务 商服 工作空间 
+# VUE_APP_GEO_SERVER_BUSINESS_SUFFIX = -business/wms?service=WMS

.eslintignore

@@ -0,0 +1,6 @@
+build/*.js
+src/assets
+public
+dist
+*.js
+*.vue

.eslintrc.js

@@ -0,0 +1,203 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  // 0的意思是off关闭,1是warning警告,2是error 报错
+  rules: {
+    'vue/max-attributes-per-line': [0, {
+      'singleline': 10,
+      'multiline': {
+        'max': 1,
+        'allowFirstLine': false
+      }
+    }],
+    'vue/attributes-order': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/name-property-casing': 'off',
+    'vue/no-v-html': 'off',
+    'vue/html-closing-bracket-spacing': 'off',
+    'accessor-pairs': 2,
+    'arrow-spacing': [0, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [0, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    // 'indent': [2, 2, {
+    //   'SwitchCase': 1
+    // }],
+    'indent': 0,
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [0, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [0, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [0, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [0, 'never'],
+    'quotes': [1, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [0, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [0, 'always'],
+    'space-before-function-paren': [0, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 0,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [0, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 0,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [0, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never'],
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+
+}

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "dy-webgis",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build --mode production",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@element-plus/icons-vue": "^2.1.0",
+    "axios": "^1.4.0",
+    "core-js": "^3.8.3",
+    "element-plus": "^2.2.17",
+    "esri-loader": "^3.7.0",
+    "js-md5": "^0.7.3",
+    "vue": "^3.2.13",
+    "vue-cookies": "^1.8.3",
+    "vue-router": "^4.1.2",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

public/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script type="text/javascript">
+      window._AMapSecurityConfig = {
+        securityJsCode: "af185b47b43d939897cb6ad96d928bb1",
+      }
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+  </body>
+</html>
+<style type="text/css">
+  .amap-logo{
+    display: none;
+    opacity:0 !important;
+  }
+  .amap-copyright {
+    opacity:0;
+  }
+</style>

src/App.vue

@@ -0,0 +1,677 @@
+<template>
+    <div class="header">
+        <div class="left">
+            <i class="logo" />
+            <span class="title">四川省公示地价查询平台</span>
+        </div>
+        <div class="center">
+            <div>
+                <ul class="menus" v-if="header.showHeader">
+                    <li @click="home">首页</li>
+                    <li @click="goBack">{{ areaName }}</li>
+                </ul>
+            </div>
+        </div>
+        <div class="right">
+            <div>
+                <ul class="buttons" v-if="header.showHeader">
+                    <li @click="">
+                        <span>
+                            <el-icon :size="14">
+                                <StarFilled />
+                            </el-icon>
+                            欢迎您：{{ username }}
+                        </span>
+                    </li>
+                    <li>|</li>
+                    <li @click="">
+                        <span>
+                            <el-icon :size="14">
+                                <Histogram />
+                            </el-icon>
+                            访问量:{{ count }}
+                        </span>
+                    </li>
+                    <li>|</li>
+                    <li class="item" @click="dialogVisible = true">
+                        <span>
+                            <el-icon :size="14">
+                                <Avatar />
+                            </el-icon>
+                            用户中心
+                        </span>
+                    </li>
+                    <li>|</li>
+                    <li class="item" @click="logout">
+                        <span>
+                            <el-icon :size="14">
+                                <Expand />
+                            </el-icon>
+                            安全退出
+                        </span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="sys-content">
+        <router-view @getAreaName="getAreaName" :serverType="form.type"></router-view>
+        <el-card id="formDiv" v-if="check.ifCheckForm">
+            <template #header>
+                <div class="card-header">
+                    <span>公示地价查询</span>
+                </div>
+            </template>
+            <el-form id="form" :model="form" label-width="120px">
+                <el-form-item label="公示地价:">
+                    <el-select v-model="form.type" placeholder="请选择">
+                        <el-option v-for="(item, index) in types" :label="item" :value="item" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="州&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市:">
+                    <el-select v-model="form.city" placeholder="请选择" @change="gotoCity">
+                        <el-option v-for="(item, index) in citys" :label="item.cityName" :value="JSON.stringify(item)" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="县&nbsp;&nbsp;市&nbsp;&nbsp;区:">
+                    <el-select v-model="form.country" placeholder="请选择" @change="getXY">
+                        <el-option v-for="(item, index) in subCitys" :label="item.cityName" :value="JSON.stringify(item)" />
+                    </el-select>
+                </el-form-item>
+                <el-input v-show=false :model=form.x></el-input>
+                <el-input v-show=false :model=form.y></el-input>
+                <el-input v-show=false :model=form.serverURI></el-input>
+                <el-button type="success" :disabled="unClickAble"
+                    style="width: 290px; margin-top: 30px; margin-left: 45px;" @click="gotoData">查&nbsp;&nbsp;询</el-button>
+            </el-form>
+        </el-card>
+    </div>
+
+    <div class="footer">
+        技术支持：四川大友房地产土地资产评估有限公司
+    </div>
+
+    <el-dialog v-model="dialogVisible" width="40%" style="border-radius: 10px;">
+        <el-descriptions title="我的信息" direction="vertical" column="4" border>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <star />
+                        </el-icon>
+                        名称
+                    </div>
+                </template>
+                <el-tag>{{ userInfo.name }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <user />
+                        </el-icon>
+                        账号
+                    </div>
+                </template>
+                <el-tag>{{ userInfo.account }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <key />
+                        </el-icon>
+                        密码
+                    </div>
+                </template>
+                <el-button type="danger" round size="small" @click="dialogVisiblex = true">修改密码</el-button>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <location />
+                        </el-icon>
+                        地区
+                    </div>
+                </template>
+                <el-tag>{{ userInfo.cityName }}-{{ userInfo.countryName }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <user />
+                        </el-icon>
+                        联系人
+                    </div>
+                </template>
+                <el-tag>{{ userInfo.linkman }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <iphone />
+                        </el-icon>
+                        电话
+                    </div>
+                </template>
+                <el-tag>{{ userInfo.mobile }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <message />
+                        </el-icon>
+                        邮箱
+                    </div>
+                </template>
+                <el-tag>{{ userInfo.email }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <open />
+                        </el-icon>
+                        状态
+                    </div>
+                </template>
+                <el-tag>{{ userInfo.enable ? '已激活' : '禁用' }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <template #label>
+                    <div class="cell-item">
+                        <el-icon :style="iconStyle">
+                            <clock />
+                        </el-icon>
+                        账号有效期
+                    </div>
+                </template>
+                <el-tag type="error">{{ userInfo.expiryDate }}</el-tag>
+            </el-descriptions-item>
+        </el-descriptions>
+    </el-dialog>
+
+    <el-dialog title="修改密码" v-model="dialogVisiblex" width="30%" style="border-radius: 10px;">
+        <div style="margin: 20px" />
+        <el-form ref="ruleForm" :label-position="labelPosition" label-width="100px" :model="updatePswForm"
+            style="max-width: 460px" :rules="rules">
+            <el-form-item label="原密码：" prop="oldPsw">
+                <el-input v-model.trim="updatePswForm.oldPsw" type="password" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="新密码：" prop="newPsw">
+                <el-input v-model.trim="updatePswForm.newPsw" type="password" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="确认密码：" prop="repeatPsw">
+                <el-input v-model.trim="updatePswForm.repeatPsw" type="password" autocomplete="off" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submit">确认</el-button>
+                <el-button @click="resetForm">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
+</template>
+
+<script>
+import { ElButton, ElNotification } from 'element-plus';
+import citysJson from './assets/data/citys.json';
+import router from './router';
+import { watch, reactive, computed, ref, unref } from "vue";
+import { enableCity, enableCountry } from './enableCity';
+import { useStore } from 'vuex';
+import API from '@/api';
+
+
+export default {
+    name: "App",
+    setup() {
+        let check = reactive({ ifCheckForm: false });
+        let header = reactive({ showHeader: false });
+        watch(() => router.currentRoute.value.name, (newName, oldName) => {
+            if (newName === "Login") {
+                header.showHeader = false;
+            }
+            if (newName === "AreaData" || newName === "Login") {
+                check.ifCheckForm = false;
+            }
+            else {
+                header.showHeader = true;
+                check.ifCheckForm = true;
+            }
+        }, { immediate: true });
+        const store = useStore();
+        const username = computed(() => {
+            return store.getters.name;
+        });
+        const userInfo = computed(() => {
+            return store.getters.userInfo;
+        });
+        const count = computed(() => {
+            return store.getters.count;
+        });
+        const logout = () => {
+            store.dispatch("logout")
+                .then(() => {
+                    sessionStorage.removeItem("store");
+                    router.push({
+                        name: "Login",
+                    });
+                });
+        };
+        let dialogVisible = ref(false);
+        let dialogVisiblex = ref(false);
+        const ruleForm = ref(null)
+        const updatePswForm = reactive({
+            oldPsw: '',
+            newPsw: '',
+            repeatPsw: '',
+        });
+        var checkRepeat = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请再次输入新密码'));
+            } else {
+                if (!/^\w{6,24}$/.test(value)) {
+                    callback(new Error('密码是6-24个字符'));
+                }
+                if (value !== updatePswForm.newPsw) {
+                    callback(new Error('两次输入的新密码不一致'));
+                }
+                callback();
+            }
+        };
+
+        var oldPsw = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入原密码'));
+            } else {
+                callback();
+            }
+        };
+
+        var newPsw = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入新密码'));
+            } else {
+                if (!/^\w{6,24}$/.test(value)) {
+                    callback(new Error('密码是6-24个字符'));
+                }
+            }
+        };
+
+        const rules = {
+            repeatPsw: [{ validator: checkRepeat, trigger: 'blur' }],
+            oldPsw: [{ validator: oldPsw, trigger: 'blur' }],
+            newPsw: [{ validator: newPsw, trigger: 'blur' }],
+        }
+        const blockMargin = computed(() => {
+            const marginMap = {
+                large: "32px",
+                default: "28px",
+                small: "24px",
+            };
+        });
+
+        const submitForm = () => {
+            const form = unref(ruleForm)
+            try {
+                let res = form.validate()
+                if (res) {
+                    API.account.modifyPass({
+                        "newPsw": updatePswForm.newPsw,
+                        "oldPsw": updatePswForm.oldPsw,
+                        "repeatPsw": updatePswForm.repeatPsw
+                    })
+                        .then(response => {
+                            const { code } = response;
+                            const { msg } = response;
+                            if (code === 200) {
+                                ElNotification({
+                                    title: "成功",
+                                    message: "密码修改成功,请重新登录",
+                                    type: "success",
+                                });
+                                setTimeout(() => {
+                                    store.dispatch("logout")
+                                        .then(() => {
+                                            sessionStorage.removeItem("store");
+                                            router.push({
+                                                name: "Login",
+                                            });
+                                        });
+                                }, 3000)
+                            } else {
+                                ElNotification({
+                                    title: "失败",
+                                    message: msg,
+                                    type: "info",
+                                })
+                            }
+                        })
+                }
+            } catch (error) {
+                console.log(error)
+            }
+        }
+
+        const resetForm = () => {
+            const form = unref(ruleForm)
+            form.resetFields();
+        }
+
+        return { check, header, logout, dialogVisible, dialogVisiblex, username, userInfo, updatePswForm, blockMargin, rules, submitForm, ruleForm, resetForm,count };
+    },
+    data() {
+        return {
+            areaName: null,
+            types: ["城镇基准地价"],
+            citys: citysJson,
+            subCitys: null,
+            unClickAble: true,
+            form: {
+                type: "城镇基准地价",
+                city: {},
+                country: {},
+                x: null,
+                y: null,
+                serverURI: null
+            },
+        };
+    },
+    created() {
+        //在页面加载时读取sessionStorage里的状态信息
+        if (sessionStorage.getItem("store")) {
+            this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))));
+        }
+        //在页面刷新时将vuex里的信息保存到sessionStorage里
+        window.addEventListener("beforeunload", () => {
+            sessionStorage.setItem("store", JSON.stringify(this.$store.state));
+        });
+        this.form.city = null;
+        this.form.country = null;
+    },
+    methods: {
+        home() {
+            this.areaName = null;
+            this.form.city = null;
+            this.form.country = null;
+            router.push({
+                name: "home"
+            });
+        },
+        goBack() {
+            if (this.$route.name === "AreaData") {
+                router.back();
+            }
+        },
+        getAreaName(val) {
+            this.areaName = val;
+            let selectedCity = this.getCityByCityName(val);
+            if (selectedCity != null) {
+                this.form.city = JSON.stringify(selectedCity);
+                this.subCitys = selectedCity.subCitys;
+            }
+        },
+        gotoCity() {
+            if (this.form.country != null) {
+                this.form.country = null;
+            }
+            const city = JSON.parse(this.form.city);
+            this.subCitys = city.subCitys;
+            const areaName = city.cityName;
+            const serverURI = city.uri;
+            const serverType = this.form.type === null ? "null" : this.form.type;
+            if (enableCity.indexOf(areaName) == -1) {
+                ElNotification({
+                    title: "抱歉",
+                    message: "平台暂未开放此区域，敬请期待！",
+                    type: "error",
+                });
+                return;
+            }
+            const adCode = city.adCode;
+            const x = city.x;
+            const y = city.y;
+            router.push({
+                name: "ChildAreaMap",
+                query: {
+                    adCode: adCode,
+                    areaName: areaName,
+                    serverURI: serverURI,
+                    serverType: serverType,
+                    x: x + 1,
+                    y: y + 0.4
+                }
+            });
+        },
+        getCityByCityName(cityName) {
+            let value;
+            for (var index in citysJson) {
+                value = citysJson[index];
+                if (cityName === value.cityName) {
+                    return value;
+                }
+            }
+            return null;
+        },
+        getXY() {
+            const country = JSON.parse(this.form.country);
+            const city = JSON.parse(this.form.city);
+            this.form.x = country.x;
+            this.form.y = country.y;
+            this.form.serverURI = city.uri;
+        },
+        gotoData() {
+            const countryName = JSON.parse(this.form.country).cityName;
+            if (enableCountry.indexOf(countryName) == -1) {
+                ElNotification({
+                    title: "抱歉",
+                    message: "平台暂未开放此区域，敬请期待！",
+                    type: "error",
+                });
+                return;
+            }
+            if (this.form.type != null && this.form.serverURI != null && this.form.x != null && this.form.y != null) {
+                router.push({
+                    name: "AreaData",
+                    query: {
+                        serverType: this.form.type,
+                        serverURI: this.form.serverURI,
+                        x: this.form.x,
+                        y: this.form.y
+                    }
+                });
+            }
+        },
+
+        submit(){
+            setTimeout(()=>{
+                this.dialogVisible = false;
+                this.dialogVisiblex = false;
+            },2000)
+           
+            this.submitForm();
+        }
+    },
+    watch: {
+        form: {
+            handler(newForm, oldForm) {
+                if (newForm.type != null && newForm.city != null && newForm.country != null) {
+                    this.unClickAble = false;
+                }
+                else {
+                    this.unClickAble = true;
+                }
+            },
+            deep: true
+        }
+    },
+    components: { ElButton }
+};
+
+</script>
+
+<style>
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.header {
+    height: 60px;
+    padding: 0;
+    background-color: rgb(10, 75, 135);
+    vertical-align: middle;
+    display: flex;
+    position: relative;
+    width: 100%;
+}
+
+.left {
+    margin: 0;
+    padding-left: 10px;
+    position: relative;
+    display: flex;
+    width: 18%;
+}
+
+.logo {
+    background: url("assets/images/logo.png") no-repeat 50%;
+    display: flex;
+    width: 40px;
+    height: 40px;
+    margin-top: 10px;
+}
+
+.title {
+    color: #fff;
+    font-size: 24px;
+    font-weight: bold;
+    letter-spacing: 3px;
+    margin-left: 5px;
+    vertical-align: middle;
+    width: 300px;
+    display: flex;
+    line-height: 60px;
+}
+
+.center {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    width: 40%;
+}
+
+.menus {
+    margin: 0;
+    padding-left: 10px;
+    position: relative;
+    display: flex;
+}
+
+.menus li {
+    align-items: center;
+    cursor: pointer;
+    padding: 0 20px;
+    position: relative;
+    color: #fff;
+    font-size: 18px;
+    letter-spacing: 1px;
+    display: inline-block;
+    height: 60px;
+    line-height: 60px;
+}
+
+.menus :hover {
+    color: #CD2626;
+}
+
+.sys-content {
+    width: 100%;
+    position: absolute;
+    top: 60px;
+    bottom: 0px;
+    left: 0px;
+    /*background-image: url("assets/images/bj.jpg");*/
+}
+
+.footer {
+    width: 100%;
+    background-color: rgb(10, 75, 135);
+    position: fixed;
+    bottom: 0;
+    height: 20px;
+    font-size: 10px;
+    vertical-align: middle;
+    padding-left: 10px;
+    color: #fff;
+}
+
+.card-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    letter-spacing: 3px;
+    font-weight: bolder
+}
+
+#formDiv {
+    width: 500px;
+    height: 400px;
+    position: absolute;
+    top: 200px;
+    right: 200px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 10px;
+}
+
+#form {
+    margin-left: 40px;
+}
+
+.right {
+    align-items: center;
+    display: flex;
+    padding-right: 10px;
+    width: auto;
+    justify-content: flex-end;
+    flex: 1;
+}
+
+.buttons {
+    margin: 0;
+    position: relative;
+    display: flex;
+}
+
+.buttons li {
+    align-items: center;
+    padding: 0 5px;
+    position: relative;
+    color: #fff;
+    font-size: 13px;
+    display: inline-block;
+    height: 60px;
+    line-height: 60px;
+}
+
+.buttons>.item :hover {
+    color: #CD2626;
+    cursor: pointer;
+}
+
+.el-descriptions {
+    margin-top: 20px;
+}
+
+.cell-item {
+    display: flex;
+    align-items: center;
+}
+</style>

src/api/index.js

@@ -0,0 +1,11 @@
+const ApiObj = {}
+const files = require.context('./modules', false, /\.js$/)
+const requireAll = requireContext => requireContext.keys().forEach(key => {
+  const keyName = key.replace('./', '').replace('.js', '')
+  ApiObj[keyName] = files(key).default // 读取文件中的default 模块
+   //console.log(keyName)
+})
+requireAll(files)
+// console.log(ApiObj)
+
+export default ApiObj

src/api/modules/account.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+import md5 from 'js-md5'
+
+/*
+* 账号用户
+*/
+export default {
+  login(params) {
+    return request.post(`/gisUser/login`,{
+      account:params.account,
+      password:md5(params.password),
+      nonceId:params.nonceId,
+      verificationCode:params.verificationCode
+    })
+  },
+
+  userInfo(params) {
+    return request.get('/gisUser/baseInfo', { params: params })
+  },
+  modifyPass(params) {
+    return request.put(`/gisUser/updatePassword`, {
+      originalPassword:md5(params.oldPsw),
+      currentPassword: md5(params.newPsw),
+      repeatPassword: md5(params.repeatPsw),
+    })
+  },
+
+  verification(params){
+    return request({
+      url:'/gisUser/verification',
+      method: 'get',
+      responseType: 'blob', //选择接收方式为blob
+      params:params
+    })
+  
+  },
+  keepAlive(){
+    return request.post('/gisUser/keepAlive')
+  },
+  visit(){
+    return request.post('/gisVisited')
+  },
+  countVisit(){
+    return request.get('/gisVisited/count')
+  }
+}

src/assets/data/citys.json

@@ -0,0 +1,881 @@
+[
+    {
+        "cityName": "成都市",
+        "adCode": "510100",
+        "subCitys": [
+            {
+                "cityName": "锦江区",
+                "adCode": "510104"
+            },
+            {
+                "cityName": "青羊区",
+                "adCode": "510105"
+            },
+            {
+                "cityName": "金牛区",
+                "adCode": "510106"
+            },
+            {
+                "cityName": "武侯区",
+                "adCode": "510107"
+            },
+            {
+                "cityName": "成华区",
+                "adCode": "510108"
+            },
+            {
+                "cityName": "龙泉驿区",
+                "adCode": "510112"
+            },
+            {
+                "cityName": "青白江区",
+                "adCode": "510113"
+            },
+            {
+                "cityName": "新都区",
+                "adCode": "510114"
+            },
+            {
+                "cityName": "温江区",
+                "adCode": "510115"
+            },
+            {
+                "cityName": "双流区",
+                "adCode": "510116"
+            },
+            {
+                "cityName": "郫都区",
+                "adCode": "510117"
+            },
+            {
+                "cityName": "新津区",
+                "adCode": "510118"
+            },
+            {
+                "cityName": "金堂县",
+                "adCode": "510121"
+            },
+            {
+                "cityName": "大邑县",
+                "adCode": "510129"
+            },
+            {
+                "cityName": "蒲江县",
+                "adCode": "510131"
+            },
+            {
+                "cityName": "都江堰市",
+                "adCode": "510181"
+            },
+            {
+                "cityName": "彭州市",
+                "adCode": "510182"
+            },
+            {
+                "cityName": "邛崃市",
+                "adCode": "510183"
+            },
+            {
+                "cityName": "崇州市",
+                "adCode": "510184"
+            },
+            {
+                "cityName": "简阳市",
+                "adCode": "510185"
+            }
+        ]
+    },
+    {
+        "cityName": "南充市",
+        "adCode": "511300",
+        "uri":"nc",
+        "x":106.082,
+        "y":30.795,
+        "subCitys": [
+            {
+                "cityName": "顺庆区",
+                "adCode": "511302",
+                "x":106.084,
+                "y":30.795
+            },
+            {
+                "cityName": "高坪区",
+                "adCode": "511303",
+                "x":106.108,
+                "y":30.781
+            },
+            {
+                "cityName": "嘉陵区",
+                "adCode": "511304",
+                "x":106.067,
+                "y":30.762
+            },
+            {
+                "cityName": "南部县",
+                "adCode": "511321",
+                "x":106.061,
+                "y":31.349
+            },
+            {
+                "cityName": "营山县",
+                "adCode": "511322",
+                "x":106.564,
+                "y":31.075
+            },
+            {
+                "cityName": "蓬安县",
+                "adCode": "511323",
+                "x":106.413,
+                "y":31.027
+            },
+            {
+                "cityName": "仪陇县",
+                "adCode": "511324",
+                "x":106.297,
+                "y":31.271
+            },
+            {
+                "cityName": "西充县",
+                "adCode": "511325",
+                "x":105.893,
+                "y":30.994
+            },
+            {
+                "cityName": "阆中市",
+                "adCode": "511381",
+                "x":105.975,
+                "y":31.58
+            }
+        ]
+    },
+    {
+        "cityName": "自贡市",
+        "adCode": "510300",
+        "subCitys": [
+            {
+                "cityName": "自流井区",
+                "adCode": "510302"
+            },
+            {
+                "cityName": "贡井区",
+                "adCode": "510303"
+            },
+            {
+                "cityName": "大安区",
+                "adCode": "510304"
+            },
+            {
+                "cityName": "沿滩区",
+                "adCode": "510311"
+            },
+            {
+                "cityName": "荣县",
+                "adCode": "510321"
+            },
+            {
+                "cityName": "富顺县",
+                "adCode": "510322"
+            }
+        ]
+    },
+    {
+        "cityName": "攀枝花市",
+        "adCode": "510400",
+        "subCitys": [
+            {
+                "cityName": "东区",
+                "adCode": "510402"
+            },
+            {
+                "cityName": "西区",
+                "adCode": "510403"
+            },
+            {
+                "cityName": "仁和区",
+                "adCode": "510411"
+            },
+            {
+                "cityName": "米易县",
+                "adCode": "510421"
+            },
+            {
+                "cityName": "盐边县",
+                "adCode": "510422"
+            }
+        ]
+    },
+    {
+        "cityName": "泸州市",
+        "adCode": "510500",
+        "subCitys": [
+            {
+                "cityName": "江阳区",
+                "adCode": "510502"
+            },
+            {
+                "cityName": "纳溪区",
+                "adCode": "510503"
+            },
+            {
+                "cityName": "龙马潭区",
+                "adCode": "510504"
+            },
+            {
+                "cityName": "泸县",
+                "adCode": "510521"
+            },
+            {
+                "cityName": "合江县",
+                "adCode": "510522"
+            },
+            {
+                "cityName": "叙永县",
+                "adCode": "510524"
+            },
+            {
+                "cityName": "古蔺县",
+                "adCode": "510525"
+            }
+        ]
+    },
+    {
+        "cityName": "德阳市",
+        "adCode": "510600",
+        "subCitys": [
+            {
+                "cityName": "旌阳区",
+                "adCode": "510603"
+            },
+            {
+                "cityName": "罗江区",
+                "adCode": "510604"
+            },
+            {
+                "cityName": "中江县",
+                "adCode": "510623"
+            },
+            {
+                "cityName": "广汉市",
+                "adCode": "510681"
+            },
+            {
+                "cityName": "什邡市",
+                "adCode": "510682"
+            },
+            {
+                "cityName": "绵竹市",
+                "adCode": "510683"
+            }
+        ]
+    },
+    {
+        "cityName": "绵阳市",
+        "adCode": "510700",
+        "subCitys": [
+            {
+                "cityName": "涪城区",
+                "adCode": "510703"
+            },
+            {
+                "cityName": "游仙区",
+                "adCode": "510704"
+            },
+            {
+                "cityName": "安州区",
+                "adCode": "510705"
+            },
+            {
+                "cityName": "三台县",
+                "adCode": "510722"
+            },
+            {
+                "cityName": "盐亭县",
+                "adCode": "510723"
+            },
+            {
+                "cityName": "梓潼县",
+                "adCode": "510725"
+            },
+            {
+                "cityName": "北川羌族自治县",
+                "adCode": "510726"
+            },
+            {
+                "cityName": "平武县",
+                "adCode": "510727"
+            },
+            {
+                "cityName": "江油市",
+                "adCode": "510781"
+            }
+        ]
+    },
+    {
+        "cityName": "广元市",
+        "adCode": "510800",
+        "subCitys": [
+            {
+                "cityName": "利州区",
+                "adCode": "510802"
+            },
+            {
+                "cityName": "昭化区",
+                "adCode": "510811"
+            },
+            {
+                "cityName": "朝天区",
+                "adCode": "510812"
+            },
+            {
+                "cityName": "旺苍县",
+                "adCode": "510821"
+            },
+            {
+                "cityName": "青川县",
+                "adCode": "510822"
+            },
+            {
+                "cityName": "剑阁县",
+                "adCode": "510823"
+            },
+            {
+                "cityName": "苍溪县",
+                "adCode": "510824"
+            }
+        ]
+    },
+    {
+        "cityName": "遂宁市",
+        "adCode": "510900",
+        "subCitys": [
+            {
+                "cityName": "船山区",
+                "adCode": "510903"
+            },
+            {
+                "cityName": "安居区",
+                "adCode": "510904"
+            },
+            {
+                "cityName": "蓬溪县",
+                "adCode": "510921"
+            },
+            {
+                "cityName": "大英县",
+                "adCode": "510923"
+            },
+            {
+                "cityName": "射洪市",
+                "adCode": "510981"
+            }
+        ]
+    },
+    {
+        "cityName": "内江市",
+        "adCode": "511000",
+        "subCitys": [
+            {
+                "cityName": "市中区",
+                "adCode": "511002"
+            },
+            {
+                "cityName": "东兴区",
+                "adCode": "511011"
+            },
+            {
+                "cityName": "威远县",
+                "adCode": "511024"
+            },
+            {
+                "cityName": "资中县",
+                "adCode": "511025"
+            },
+            {
+                "cityName": "隆昌市",
+                "adCode": "511083"
+            }
+        ]
+    },
+    {
+        "cityName": "乐山市",
+        "adCode": "511100",
+        "subCitys": [
+            {
+                "cityName": "市中区",
+                "adCode": "511102"
+            },
+            {
+                "cityName": "沙湾区",
+                "adCode": "511111"
+            },
+            {
+                "cityName": "五通桥区",
+                "adCode": "511112"
+            },
+            {
+                "cityName": "金口河区",
+                "adCode": "511113"
+            },
+            {
+                "cityName": "犍为县",
+                "adCode": "511123"
+            },
+            {
+                "cityName": "井研县",
+                "adCode": "511124"
+            },
+            {
+                "cityName": "夹江县",
+                "adCode": "511126"
+            },
+            {
+                "cityName": "沐川县",
+                "adCode": "511129"
+            },
+            {
+                "cityName": "峨边彝族自治县",
+                "adCode": "511132"
+            },
+            {
+                "cityName": "马边彝族自治县",
+                "adCode": "511133"
+            },
+            {
+                "cityName": "峨眉山市",
+                "adCode": "511181"
+            }
+        ]
+    },
+    {
+        "cityName": "眉山市",
+        "adCode": "511400",
+        "subCitys": [
+            {
+                "cityName": "东坡区",
+                "adCode": "511402"
+            },
+            {
+                "cityName": "彭山区",
+                "adCode": "511403"
+            },
+            {
+                "cityName": "仁寿县",
+                "adCode": "511421"
+            },
+            {
+                "cityName": "洪雅县",
+                "adCode": "511423"
+            },
+            {
+                "cityName": "丹棱县",
+                "adCode": "511424"
+            },
+            {
+                "cityName": "青神县",
+                "adCode": "511425"
+            }
+        ]
+    },
+    {
+        "cityName": "宜宾市",
+        "adCode": "511500",
+        "subCitys": [
+            {
+                "cityName": "翠屏区",
+                "adCode": "511502"
+            },
+            {
+                "cityName": "南溪区",
+                "adCode": "511503"
+            },
+            {
+                "cityName": "叙州区",
+                "adCode": "511504"
+            },
+            {
+                "cityName": "江安县",
+                "adCode": "511523"
+            },
+            {
+                "cityName": "屏山县",
+                "adCode": "511529"
+            },
+            {
+                "cityName": "长宁县",
+                "adCode": "511524"
+            },
+            {
+                "cityName": "高县",
+                "adCode": "511525"
+            },
+            {
+                "cityName": "珙县",
+                "adCode": "511526"
+            },
+            {
+                "cityName": "筠连县",
+                "adCode": "511527"
+            },
+            {
+                "cityName": "兴文县",
+                "adCode": "511528"
+            }
+        ]
+    },
+    {
+        "cityName": "广安市",
+        "adCode": "511600",
+        "subCitys": [
+            {
+                "cityName": "广安区",
+                "adCode": "511602"
+            },
+            {
+                "cityName": "前锋区",
+                "adCode": "511603"
+            },
+            {
+                "cityName": "岳池县",
+                "adCode": "511621"
+            },
+            {
+                "cityName": "武胜县",
+                "adCode": "511622"
+            },
+            {
+                "cityName": "邻水县",
+                "adCode": "511623"
+            },
+            {
+                "cityName": "华蓥市",
+                "adCode": "511681"
+            }
+        ]
+    },
+    {
+        "cityName": "达州市",
+        "adCode": "511700",
+        "subCitys": [
+            {
+                "cityName": "通川区",
+                "adCode": "511702"
+            },
+            {
+                "cityName": "达川区",
+                "adCode": "511703"
+            },
+            {
+                "cityName": "宣汉县",
+                "adCode": "511722"
+            },
+            {
+                "cityName": "开江县",
+                "adCode": "511723"
+            },
+            {
+                "cityName": "大竹县",
+                "adCode": "511724"
+            },
+            {
+                "cityName": "渠县",
+                "adCode": "511725"
+            },
+            {
+                "cityName": "万源市",
+                "adCode": "511781"
+            }
+        ]
+    },
+    {
+        "cityName": "雅安市",
+        "adCode": "511800",
+        "subCitys": [
+            {
+                "cityName": "雨城区",
+                "adCode": "511802"
+            },
+            {
+                "cityName": "名山区",
+                "adCode": "511803"
+            },
+            {
+                "cityName": "荥经县",
+                "adCode": "511822"
+            },
+            {
+                "cityName": "汉源县",
+                "adCode": "511823"
+            },
+            {
+                "cityName": "石棉县",
+                "adCode": "511824"
+            },
+            {
+                "cityName": "天全县",
+                "adCode": "511825"
+            },
+            {
+                "cityName": "芦山县",
+                "adCode": "511826"
+            },
+            {
+                "cityName": "宝兴县",
+                "adCode": "511827"
+            }
+        ]
+    },
+    {
+        "cityName": "巴中市",
+        "adCode": "511900",
+        "subCitys": [
+            {
+                "cityName": "巴州区",
+                "adCode": "511902"
+            },
+            {
+                "cityName": "恩阳区",
+                "adCode": "511903"
+            },
+            {
+                "cityName": "通江县",
+                "adCode": "511921"
+            },
+            {
+                "cityName": "南江县",
+                "adCode": "511922"
+            },
+            {
+                "cityName": "平昌县",
+                "adCode": "511923"
+            }
+        ]
+    },
+    {
+        "cityName": "资阳市",
+        "adCode": "512000",
+        "subCitys": [
+            {
+                "cityName": "雁江区",
+                "adCode": "512002"
+            },
+            {
+                "cityName": "安岳县",
+                "adCode": "512021"
+            },
+            {
+                "cityName": "乐至县",
+                "adCode": "512022"
+            }
+        ]
+    },
+    {
+        "cityName": "阿坝藏族羌族自治州",
+        "adCode": "513200",
+        "subCitys": [
+            {
+                "cityName": "马尔康市",
+                "adCode": "513201"
+            },
+            {
+                "cityName": "汶川县",
+                "adCode": "513221"
+            },
+            {
+                "cityName": "理县",
+                "adCode": "513222"
+            },
+            {
+                "cityName": "茂县",
+                "adCode": "513223"
+            },
+            {
+                "cityName": "松潘县",
+                "adCode": "513224"
+            },
+            {
+                "cityName": "九寨沟县",
+                "adCode": "513225"
+            },
+            {
+                "cityName": "金川县",
+                "adCode": "513226"
+            },
+            {
+                "cityName": "小金县",
+                "adCode": "513227"
+            },
+            {
+                "cityName": "黑水县",
+                "adCode": "513228"
+            },
+            {
+                "cityName": "壤塘县",
+                "adCode": "513230"
+            },
+            {
+                "cityName": "阿坝县",
+                "adCode": "513231"
+            },
+            {
+                "cityName": "若尔盖县",
+                "adCode": "513232"
+            },
+            {
+                "cityName": "红原县",
+                "adCode": "513233"
+            }
+        ]
+    },
+    {
+        "cityName": "甘孜藏族自治州",
+        "adCode": "513300",
+        "subCitys": [
+            {
+                "cityName": "康定市",
+                "adCode": "513301"
+            },
+            {
+                "cityName": "泸定县",
+                "adCode": "513322"
+            },
+            {
+                "cityName": "丹巴县",
+                "adCode": "513323"
+            },
+            {
+                "cityName": "九龙县",
+                "adCode": "513324"
+            },
+            {
+                "cityName": "雅江县",
+                "adCode": "513325"
+            },
+            {
+                "cityName": "道孚县",
+                "adCode": "513326"
+            },
+            {
+                "cityName": "炉霍县",
+                "adCode": "513327"
+            },
+            {
+                "cityName": "甘孜县",
+                "adCode": "513328"
+            },
+            {
+                "cityName": "新龙县",
+                "adCode": "513329"
+            },
+            {
+                "cityName": "德格县",
+                "adCode": "513330"
+            },
+            {
+                "cityName": "白玉县",
+                "adCode": "513331"
+            },
+            {
+                "cityName": "石渠县",
+                "adCode": "513332"
+            },
+            {
+                "cityName": "色达县",
+                "adCode": "513333"
+            },
+            {
+                "cityName": "理塘县",
+                "adCode": "513334"
+            },
+            {
+                "cityName": "巴塘县",
+                "adCode": "513335"
+            },
+            {
+                "cityName": "乡城县",
+                "adCode": "513336"
+            },
+            {
+                "cityName": "稻城县",
+                "adCode": "513337"
+            },
+            {
+                "cityName": "得荣县",
+                "adCode": "513338"
+            }
+        ]
+    },
+    {
+        "cityName": "凉山彝族自治州",
+        "adCode": "513400",
+        "subCitys": [
+            {
+                "cityName": "西昌市",
+                "adCode": "513401"
+            },
+            {
+                "cityName": "木里藏族自治县",
+                "adCode": "513422"
+            },
+            {
+                "cityName": "盐源县",
+                "adCode": "513423"
+            },
+            {
+                "cityName": "德昌县",
+                "adCode": "513424"
+            },
+            {
+                "cityName": "会理县",
+                "adCode": "513425"
+            },
+            {
+                "cityName": "会东县",
+                "adCode": "513426"
+            },
+            {
+                "cityName": "宁南县",
+                "adCode": "513427"
+            },
+            {
+                "cityName": "普格县",
+                "adCode": "513428"
+            },
+            {
+                "cityName": "布拖县",
+                "adCode": "513429"
+            },
+            {
+                "cityName": "金阳县",
+                "adCode": "513430"
+            },
+            {
+                "cityName": "昭觉县",
+                "adCode": "513431"
+            },
+            {
+                "cityName": "喜德县",
+                "adCode": "513432"
+            },
+            {
+                "cityName": "冕宁县",
+                "adCode": "513433"
+            },
+            {
+                "cityName": "越西县",
+                "adCode": "513434"
+            },
+            {
+                "cityName": "甘洛县",
+                "adCode": "513435"
+            },
+            {
+                "cityName": "美姑县",
+                "adCode": "513436"
+            },
+            {
+                "cityName": "雷波县",
+                "adCode": "513437"
+            }
+        ]
+    }
+]

src/components/form.vue

@@ -0,0 +1,103 @@
+<template>
+    <el-card id="formDiv">
+        <template #header>
+            <div class="card-header">
+                <span>公示地价查询</span>
+            </div>
+        </template>
+        <el-form id="form" :model="form" label-width="120px">
+        <el-form-item label="公示地价:">
+            <el-select v-model="form.type" placeholder="请选择"   >
+                <el-option v-for="(item,index) in types" :label="item" :value="item" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="州&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市:">
+            <el-select v-model="form.city" placeholder="请选择" @change="getCountry">
+                <el-option v-for="(item,index) in citys" :label="item.cityName" :value="JSON.stringify(item)"  />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="县&nbsp;&nbsp;市&nbsp;&nbsp;区:">
+            <el-select v-model="form.country" placeholder="请选择">
+                <el-option v-for="(item,index) in subCitys" :label="item.cityName" :value="item.adCode" />
+            </el-select>
+        </el-form-item>
+        <el-button :icon="Search" type="success" :disabled = "unClickAble" style="width: 290px; margin-top: 30px; margin-left: 45px;">查&nbsp;&nbsp;询</el-button>
+        </el-form>
+    </el-card>
+</template>
+
+<script>
+import { Search } from '@element-plus/icons-vue';
+import citysJson from '../assets/data/citys.json';
+
+export default {
+    name: 'CheckForm',
+    data(){
+        return{
+            types:['城镇基准地价','标定地价'],
+                citys:citysJson,
+                subCitys:null,
+                unClickAble:true,
+                form:{
+                    type:null,
+                    city:{},
+                    country:{}
+                },
+            Search:Search
+        }
+    },
+
+    created(){
+        this.form.city = null;
+        this.form.country = null;
+    },
+
+    watch:{
+        form:{
+            handler(newForm, oldForm){
+            if (newForm.type!=null && newForm.city!=null && newForm.country!=null){
+                this.unClickAble = false;
+            }else{
+                this.unClickAble = true;
+            }
+            },
+            deep:true
+        }
+    },
+    methods: {
+        getCountry(){
+            if (this.form.country!=null){
+                this.form.country = null;
+            }
+            const city = JSON.parse(this.form.city);
+            this.subCitys = city.subCitys;
+        }
+    }
+};
+</script>
+
+<style>
+ .card-header {
+        display: flex;
+        justify-content:center;
+        align-items: center;
+        font-size: 20px;
+        letter-spacing: 3px;
+        font-weight:bolder
+
+    }
+    #formDiv{
+        width: 500px;
+        height: 400px;
+        position:absolute;
+        top: 200px;
+        right: 200px;
+        background-color:rgba(255,255,255,0.9);
+        border-radius: 10px;
+    }
+
+    #form{
+        margin-left: 40px;
+    }
+
+</style>

src/enableCity.js

@@ -0,0 +1,3 @@
+const enableCity = ["南充市"];
+const enableCountry = ["高坪区","顺庆区","嘉陵区"];
+export  {enableCity,enableCountry}

src/main.js

@@ -0,0 +1,36 @@
+import { createApp } from 'vue'
+
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';//解决elementpLus一些组件是英文的问题
+import router from './router';
+import App from './App.vue'
+import AMapLoader from "@amap/amap-jsapi-loader";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import store from './store'
+
+const app = createApp(App);
+
+app.use(ElementPlus,{
+    locale:zhCn
+});
+
+for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(name, component);
+}
+
+app.use(router);
+
+app.use(ElementPlus);
+
+app.use(store);
+
+app.mount('#app');
+
+// const loader = AMapLoader.load({
+//     key: "7a6db58e92f9271f0f7c159871eb3a5e",             // 申请好的Web端开发者Key，首次调用 load 时必填
+//     version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+//     plugins: ['AMap.DistrictSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+// });
+
+//export default loader

src/router/index.js

@@ -0,0 +1,39 @@
+import { createRouter, createWebHashHistory,createWebHistory } from "vue-router";
+
+var routes = [
+  {
+    path: '/',
+    name: 'home',
+    redirect: '/login'
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login')
+  },
+  {
+    path: '/home',
+    name: 'AMap',
+    component: () => import('@/views/aMap')
+  },
+  {
+    path: '/area',
+    name: 'ChildAreaMap',
+    props: { adCode:null,areaName:null,x:null,y:null,serverType:null,serverURI:null },
+    component: () => import('@/views/childAreaMap')
+  },
+  {
+    path: '/data',
+    name: 'AreaData',
+    props: {x:null,y:null,serverType:null,serverURI:null },
+    component: () => import('@/views/arcMap')
+  },
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+    base:"/platform"
+
+});
+export default router

src/store/index.js

@@ -0,0 +1,11 @@
+import { createStore } from 'vuex'
+import ModuleUser from './modules/user'
+import ModuleApp from './modules/app'
+
+export default createStore({
+  
+  modules: {
+    ModuleUser,
+    ModuleApp
+  }
+})

src/store/modules/app.js

@@ -0,0 +1,29 @@
+import API from '@/api'
+
+const ModuleApp = {
+ state : {
+    count: '',
+  },
+  getters: {
+    count: state => state.count,
+  },
+ mutations : {
+    SET_COUNT: (state, count) => {
+      state.count = count
+    },
+  },
+  
+ actions : {
+  
+    count({ commit }) {
+      return new Promise((resolve) => {
+        API.account.countVisit().then(response => {
+          const { data } = response
+          commit('SET_COUNT', data)
+          resolve(data)
+        })
+      })
+    },
+  },
+}
+export default ModuleApp;

src/store/modules/user.js

@@ -0,0 +1,87 @@
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import API from '@/api'
+
+const ModuleUser = {
+ state : {
+    token: getToken(),
+    name: '',
+    userInfo: '',
+  },
+  getters: {
+    token: state => state.token,
+    name: state => state.name,
+    userInfo: state => state.userInfo
+  },
+ mutations : {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, name) => {
+      state.name = name
+    },
+    SET_USERINFO: (state, userInfo) => {
+      state.userInfo = userInfo
+    },
+  },
+  
+ actions : {
+    // gisuser login
+    login({ commit }, userInfo) {
+      const { account, password,nonceId,verificationCode} = userInfo
+      return new Promise((resolve, reject) => {
+        API.account.login({
+          account,
+          password,
+          nonceId,
+          verificationCode
+        }).then(response => {
+          const { data } = response
+          commit('SET_TOKEN', data.token)
+          setToken(data.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+  
+    // get user info
+    userInfo({ commit }) {
+      return new Promise((resolve) => {
+        API.account.userInfo().then(response => {
+          const { data } = response
+          const { name } = data
+          commit('SET_NAME', name)
+          commit('SET_USERINFO', data)
+          resolve(data)
+        })
+      })
+    },
+  
+    // user logout
+    logout({ commit, state, dispatch }) {
+      return new Promise((resolve, reject) => {
+        // API.account.logout(state.token).then(() => {
+          commit('SET_TOKEN', '')
+          commit('SET_NAME', '')
+          commit('SET_USERINFO', '')
+          removeToken()
+          // reset visited views and cached views
+          // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
+          resolve()
+        // }).catch(error => {
+        //   reject(error)
+        // })
+      })
+    },
+    // remove token
+    resetToken({ commit }) {
+      return new Promise(resolve => {
+        commit('SET_TOKEN', '')
+        removeToken()
+        resolve()
+      })
+    },
+  },
+}
+export default ModuleUser;

src/utils/auth.js

@@ -0,0 +1,15 @@
+import VueCookies from 'vue-cookies'
+const TokenKey = 'token'
+
+export function getToken() {
+  return VueCookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return VueCookies.set(TokenKey, token, 30*60*60)
+}
+
+export function removeToken() {
+  return VueCookies.remove(TokenKey)
+}
+

src/utils/request.js

@@ -0,0 +1,118 @@
+import axios from 'axios'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import { ElNotification } from 'element-plus';
+import router from '../router';
+let loadingInstance = null
+
+
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // baseURL: apiUrl, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 1000 * 60 * 60 * 5 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (getToken()) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['token'] = getToken()
+    }
+    // 时间
+    if (config.params) {
+      config.params.nowDate = new Date()
+    }
+    if (config.loadingInstance === true) {
+      loadingInstance = Loading.service({
+        text: '正在导入请等待...'
+      })
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+    // console.log(res)
+
+    if (loadingInstance) {
+      loadingInstance.close()
+    }
+
+    // if the custom code is not 20000, it is judged as an error.
+    else if (res.code && res.code !== 200) {
+
+      if (res.code === 1) {
+        ElNotification({
+          title: '错误',
+          message: res.msg,
+          type: 'error',
+        })
+      }
+      else if (res.code === 10010 && res.msg === '图形验证码过期，请点击刷新。') {
+        ElNotification({
+          title: '提示',
+          message: res.msg,
+          type: 'info',
+        })
+      }
+      else if (res.code === 10010 && res.msg === '验证码错误，请重新输入') {
+        ElNotification({
+          title: '提示',
+          message: res.msg,
+          type: 'info',
+        })
+      }
+      else if (res.code === 10005 || res.code === 10004 || res.code === 401) { // 10005非法token, 10004用户未登录
+        ElNotification({
+          title: '提示',
+          message: '登录过期，请重新登录。',
+          type: 'info',
+        })
+        store.dispatch('resetToken').then(() => {
+          router.push({ name: 'Login' })
+        })
+      } else {
+        ElNotification({
+          title: '提示',
+          message: res.msg,
+          type: 'info',
+        })
+      }
+      return Promise.reject(new Error(res.msg || 'Error'))
+    } else if (response.config.originResponse) {
+      return response
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('err' + error)
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/aMap.vue

@@ -0,0 +1,188 @@
+<template>
+    <div id="container" v-loading="loading">
+    </div>
+</template>
+
+<script>
+
+import AMapLoader from "@amap/amap-jsapi-loader";
+import router from '../router';
+import { enableCity } from '../enableCity';
+import { ElNotification } from 'element-plus';
+import citysJson from '../assets/data/citys.json';
+import API from '@/api';
+import { useStore } from 'vuex';
+
+export default {
+    name: "AMap",
+    setup(props, { emit }) {
+        const store = useStore();
+        const sendVisitedCount = () => {
+            store.dispatch("count")
+        };
+        const aLoader = AMapLoader.load({
+                    key: process.env.VUE_APP_AMAP_KEY,             // 申请好的Web端开发者Key，首次调用 load 时必填
+                    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+                    plugins: ['AMap.DistrictSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+            })
+        return { sendVisitedCount,aLoader };
+    },
+    props: ['serverType'],
+    data() {
+        return {
+            code: null,
+            depth: 1,
+            adCode: 510000,
+            distProvince: null,
+            loading: false,
+            serverURI: null,
+        };
+    },
+    mounted() {
+        this.keepAlive();
+    },
+    methods: {
+        initMap(adCode, depth, serverType) {
+
+            this.loading = true;
+            this.aLoader.then((AMap) => {
+                const opts = {
+                    subdistrict: 0,
+                    extensions: 'all',
+                    level: 'city',
+                    showbiz: false
+                };
+                let distProvince;
+                let district = new AMap.DistrictSearch(opts);
+
+                district.search('四川省', function (status, result) {
+                    const map = new AMap.Map('container', {
+                        mapStyle: "amap://styles/whitesmoke",
+                        center: [106.542725, 30.076636],
+                        viewMode: '2D',
+                        zoom: 7,
+                        zooms: [6.5, 7.5],
+                        //features:["point"],
+                        animateEnable: false,
+                        isHotspot: false,
+                        showIndoorMap: false,
+                        jogEnable: false,
+                        zIndex: 1,
+                        keyboardEnable: false,
+                        defaultCursor: "pointer"
+                    });
+                    //2、创建省市简易行政区图层
+                    distProvince = new AMap.DistrictLayer.Province({
+                        zooms: [3, 10], // 设置图层显示范围
+                        adcode: adCode,  // 设置行政区 adcode
+                        depth: depth, // 设置数据显示层级
+                        fitView: true,
+                        eventSupport: true,
+                        drillDown: false,
+                        map: map,
+                        styles: {
+                            'fill': function (properties) {
+                                if (enableCity.indexOf(properties.NAME_CHN) == -1) {
+                                    return 'rgb(3,113,160)';
+                                } else {
+                                    return 'rgb(10,75,135)';
+                                }
+                            },
+                            'province-stroke': 'rgba(102,255,255,1)',
+                            'city-stroke': 'rgba(102,255,255,1)', // 中国地级市边界
+                        }
+                    });
+
+                    distProvince.on('mousemove', function (ev) {
+                        if (typeof (ev.props) != "undefined") {
+                            distProvince.setStyles({
+                                'fill': function (properties) {
+                                    if (ev.props.NAME_CHN === properties.NAME_CHN) {
+                                        return 'rgb(51,161,201)';
+                                    } else {
+                                        if (enableCity.indexOf(properties.NAME_CHN) == -1) {
+                                            return 'rgb(3,113,160)'; //孔雀蓝
+                                        }
+                                        else {
+                                            return 'rgb(10,75,135)';
+                                        }
+                                    }
+
+                                },
+                                'province-stroke': 'cornflowerblue',
+                                'city-stroke': 'rgba(102,255,255,1)', // 中国地级市边界
+
+                            });
+                        }
+
+                    });
+
+                    distProvince.on('click', function (ev) {
+                        if (typeof (ev.props) != "undefined" && ev.props.adcode_pro === 510000) {
+                            const selectedCity = ev.props.NAME_CHN;
+                            let uri;
+                            for (var index in citysJson) {
+                                let value = citysJson[index];
+                                if (selectedCity === value.cityName) {
+                                    uri = value.uri;
+                                }
+                            }
+                            if (enableCity.indexOf(selectedCity) == -1 || typeof (uri) == "undefined") {
+                                ElNotification({
+                                    title: '抱歉',
+                                    message: '平台暂未开放此区域，敬请期待！',
+                                    type: 'error',
+                                })
+                                return;
+                            }
+                            router.push({
+                                name: 'ChildAreaMap',
+                                query: {
+                                    adCode: ev.props.adcode,
+                                    areaName: ev.props.NAME_CHN,
+                                    //加上适当的偏移量
+                                    x: ev.props.x + 1,
+                                    y: ev.props.y + 0.4,
+                                    serverType: serverType,
+                                    serverURI: uri
+                                }
+                            });
+                            // 销毁地图，并清空地图容器
+                            setTimeout(() => {
+                                map.destroy();
+                            }, 1000)
+                        }
+
+                    });
+                });
+            }).catch(e => {
+                console.log(e);
+            });
+            setTimeout(() => {
+                this.loading = false;
+            }, 500);
+        },
+        keepAlive() {
+            this.sendVisitedCount();
+            API.account.keepAlive().then((response) => {
+                const { code } = response;
+                if (code === 200) {
+                    this.initMap(this.adCode, this.depth, this.serverType);
+                }
+            });
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+#container {
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+</style>
+

src/views/arcMap.vue

@@ -0,0 +1,163 @@
+<template>
+    <div id="viewDiv"></div>
+</template>
+
+<script>
+import { loadModules } from "esri-loader";
+import API from '@/api';
+
+export default {
+    name: "AreaData",
+    data(){
+        return{
+            serverURI:null,
+            serverType:null,
+            x:null,
+            y:null,
+            map:null,
+        }
+    },
+
+    mounted(){
+        this.serverURI =this.$route.query.serverURI;
+        this.serverType =this.$route.query.serverType;
+        this.x =this.$route.query.x;
+        this.y =this.$route.query.y;
+        this.xkeepAlive();
+        
+    },
+
+
+    methods:{
+        xkeepAlive(){
+            API.account.keepAlive().then((response) => {
+                const { code } = response;
+                if (code === 200) {
+                   this.renderMap(this.map,this.serverType,this.serverURI,this.x,this.y);
+                }
+            });
+        },
+
+        renderMap(map,serverType,serverURI,x,y){
+                    const options = {
+                                url: "https://js.arcgis.com/4.17/",
+                                css: "https://js.arcgis.com/4.17/esri/themes/light/main.css"
+                            };
+                    loadModules([
+                        "esri/Map",
+                        "esri/views/MapView",
+                        "esri/layers/WMSLayer",
+                        "esri/widgets/BasemapToggle",
+                        "esri/widgets/ScaleBar",
+                        "esri/layers/BaseTileLayer",
+                        "esri/widgets/LayerList",
+                    ], options).then(([Map, MapView, WMSLayer, BasemapToggle, ScaleBar, BaseTileLayer, LayerList]) => {
+                        //Arc底图 + 天地图矢量标注
+                        map = new Map({});
+                        let TMSLayer = BaseTileLayer.createSubclass({
+                            properties: {
+                                urlTemplate: null
+                            },
+                            getTileUrl: function (level, row, col) {
+                                return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);
+                            }
+                        });
+
+                        let bottomLayer = new TMSLayer({
+                            urlTemplate: process.env.VUE_APP_TDT_BOTTOM_URL + process.env.VUE_APP_TDT_TOKEN,
+                            listMode: "hide"
+                        });
+                        let bottomMarkLayer = new TMSLayer({
+                            urlTemplate: process.env.VUE_APP_TDT_BOTTOM_MARK_URL + process.env.VUE_APP_TDT_TOKEN,
+                            listMode: "hide"
+                        });
+                        map.add(bottomLayer);
+                        map.add(bottomMarkLayer);
+
+                        //业务矢量图层
+                        if (serverType === "城镇基准地价") {
+                            let houseLayer = new WMSLayer({
+                                url: process.env.VUE_APP_GEO_SERVER_BASE_URL + serverURI + process.env.VUE_APP_GEO_SERVER_HOUSE_SUFFIX,
+                                title: "住宅用地",
+                                visible:false
+                            });
+
+                            let factoryLayer = new WMSLayer({
+                                url: process.env.VUE_APP_GEO_SERVER_BASE_URL + serverURI + process.env.VUE_APP_GEO_SERVER_FACTORY_SUFFIX,
+                                title: "工业用地",
+                                visible:false
+                            });
+
+                            let commonLayer = new WMSLayer({
+                                url: process.env.VUE_APP_GEO_SERVER_BASE_URL + serverURI + process.env.VUE_APP_GEO_SERVER_COMMON_SUFFIX,
+                                title: "公服用地",
+                                visible:false
+                            });
+
+                            let businessLayer = new WMSLayer({
+                                url: process.env.VUE_APP_GEO_SERVER_BASE_URL + serverURI + process.env.VUE_APP_GEO_SERVER_BUSINESS_SUFFIX,
+                                title: "商服用地",
+                                
+                            });
+                            map.add(houseLayer);
+                            map.add(factoryLayer);
+                            map.add(commonLayer);
+                            map.add(businessLayer);
+                        }
+
+                        const view = new MapView({
+                            container: "viewDiv",
+                            map: map,
+                            zoom: 13,
+                            center: [x, y],
+                        });
+
+                        view.when(function () {
+                            const layerList = new LayerList({
+                                view: view
+                            });
+                            view.ui.add(layerList, "top-right");
+
+                            view.on("mouse-wheel", function (evt) {
+                                //鼠标滚轮缩小
+                                if (evt.deltaY > 0 && view.scale > 18489297.737236) {
+                                    evt.stopPropagation();
+                                    return false;
+                                }
+                                //鼠标滚轮放大
+                                else if (evt.deltaY < 0 && view.scale < 1000) {
+                                    evt.stopPropagation();
+                                    return false;
+                                }
+                            });
+                            const toggle = new BasemapToggle({
+                                // 2 - Set properties
+                                view: view,
+                                nextBasemap: "streets", // allows for toggling to the 'hybrid' basemap
+                            });
+                            const scaleBar = new ScaleBar({
+                                view: view,
+                                unit: "metric"
+                            });
+                            view.ui.add(toggle, "bottom-right");
+                            view.ui.add(scaleBar, "bottom-left");
+                            view.ui.remove("attribution");
+
+                        });
+                    });
+
+        },
+  }
+    
+}
+</script>
+
+<style scoped>
+#viewDiv {
+    padding: 0px;
+    margin: 0px;
+    height: 100%;
+    width: 100%;
+    outline: none !important;
+}
+</style>

src/views/childAreaMap.vue

@@ -0,0 +1,188 @@
+<template>
+    <div  id="childArea" v-loading="loading"></div>
+</template>
+
+<script>
+
+import AMapLoader from "@amap/amap-jsapi-loader";
+import router from "../router";
+import { enableCountry } from '../enableCity.js';
+import { ElNotification } from 'element-plus'
+import API from '@/api';
+
+export default {
+    name: "ChildAreaMap",
+    emits: ['getAreaName'],
+    setup(props,{emit}) {
+        const sendAreaName = (val) => {
+            emit('getAreaName',val)
+        };
+
+        const aLoader = AMapLoader.load({
+                    key: process.env.VUE_APP_AMAP_KEY,             // 申请好的Web端开发者Key，首次调用 load 时必填
+                    version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+                    plugins: ['AMap.DistrictSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+            })
+        return { sendAreaName,aLoader };
+    },
+    data(){
+        return {
+            depth  : 2,
+            adCode:null,
+            areaName:null,
+            serverURI:null,
+            serverType:null,
+            x:null,
+            y:null,
+        }
+    },
+
+    mounted() {
+        this.adCode = this.$route.query.adCode;
+        this.areaName =this.$route.query.areaName;
+        this.serverURI =this.$route.query.serverURI;
+        this.serverType =this.$route.query.serverType;
+        this.x =this.$route.query.x;
+        this.y =this.$route.query.y;
+        this.keepAlive();
+        this.sendAreaName(this.areaName);
+    },
+
+    methods: {
+        showChildArea(adCode, depth, areaName, x, y,serverURI,serverType) {
+            this.loading = true;
+            this.aLoader.then((AMap) => {
+                const opts = {
+                    subdistrict: 0,
+                    extensions: 'all',
+                    level: 'district',
+                    showbiz: false
+                };
+                let distProvince;
+                let district = new AMap.DistrictSearch(opts);
+                district.search(areaName, function (status, result) {
+                    const map = new AMap.Map('childArea', {
+                        mapStyle: "amap://styles/light",
+                        center: [x, y],
+                        viewMode: '2D',
+                        zoom: 9.5,
+                        zooms: [7.5, 10],
+                        //features:["point"],
+                        animateEnable: false,
+                        isHotspot: false,
+                        jogEnable: false,
+                        zIndex: 1,
+                        //dragEnable:false,
+                        keyboardEnable: false,
+                        defaultCursor: "pointer"
+                    });
+
+                    // 2、创建省市简易行政区图层
+                    distProvince = new AMap.DistrictLayer.Province({
+                        zIndex: 10, // 设置图层层级
+                        zooms: [3, 15], // 设置图层显示范围
+                        adcode: adCode,  // 设置行政区 adcode
+                        depth: depth, // 设置数据显示层级
+                        fitView: true,
+                        eventSupport: true,
+                        drillDown: false,
+                        map: map,
+                        styles: {
+                            'fill': function (properties) {
+                                if (enableCountry.indexOf(properties.NAME_CHN) == -1) {
+                                    return 'rgb(3,113,160)';
+                                } else {
+                                    return 'rgb(10,75,135)';
+                                }
+                            },
+                            'city-stroke': 'cornflowerblue',
+                            'county-stroke': 'rgba(102,255,255,1)', // 中国地级市边界
+                        }
+                    });
+
+                    distProvince.on('mousemove', function (ev) {
+                        if (typeof (ev.props) != "undefined") {
+                            distProvince.setStyles({
+                                'fill': function (properties) {
+                                    if (ev.props.NAME_CHN === properties.NAME_CHN) {
+                                        return 'rgb(51,161,201)';
+                                    } else {
+                                        if (enableCountry.indexOf(properties.NAME_CHN) == -1) {
+                                            return 'rgb(3,113,160)'; //孔雀蓝
+                                        }
+                                        else {
+                                            return 'rgb(10,75,135)';
+                                        }
+                                    }
+                                },
+                                'city-stroke': 'cornflowerblue',
+                                'county-stroke': 'rgba(102,255,255,1)', // 中国地级市边界
+                            });
+                        }
+
+                    });
+
+                    distProvince.on('click', function (ev) {
+                        if (typeof (serverType) === "undefined" || serverType===null){
+                            ElNotification({
+                                    title: '抱歉',
+                                    message: '请选择查询地价类型！',
+                                    type: 'error',
+                            })
+                            return;
+                        }
+                        if (typeof (ev.props) != "undefined" && ev.props.adcode_cit == adCode) {
+                            const selectedCity = ev.props.NAME_CHN;
+                            if (enableCountry.indexOf(selectedCity) == -1) {
+                                ElNotification({
+                                    title: '抱歉',
+                                    message: '平台暂未开放此区域，敬请期待！',
+                                    type: 'error',
+                                })
+                                return;
+                            }
+                            router.push({
+                                name: 'AreaData',
+                                query: {
+                                    x: ev.props.x,
+                                    y: ev.props.y,
+                                    serverType:serverType,
+                                    serverURI:serverURI,
+                                }
+                            });
+                            // 销毁地图，并清空地图容器
+                            setTimeout(() => {
+                                map.destroy();
+                            }, 1000)
+                        }
+                    });
+                });
+
+            }).catch(e => {
+                console.log(e);
+            });
+            setTimeout(() => {
+                this.loading = false;
+            }, 500);
+        },
+        keepAlive() {
+            API.account.keepAlive().then((response)=>{
+                const {code} = response;
+                if (code === 200){
+                    this.showChildArea(this.adCode, this.depth, this.areaName, this.x, this.y,this.serverURI,this.serverType);
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#childArea {
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 100%;
+}
+</style>
+

src/views/error-page/404.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">客官你好像迷路了!</div>
+        <div class="bullshit__info">您无权限访问或者页面不存在
+        </div>
+        <!--        <div class="bullshit__headline">{{ message }}</div>-->
+        <div class="bullshit__info">请检查您输入的网址是否正确，或单击下面的按钮返回首页
+        </div>
+        <router-link to="/" class="bullshit__return-home">返回首页</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'Page404',
+    computed: {
+      message() {
+        return 'The webmaster said that you can not enter this page...'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wscn-http404-container {
+    transform: translate(-50%, -50%);
+    position: absolute;
+    top: 40%;
+    left: 50%;
+  }
+
+  .wscn-http404 {
+    position: relative;
+    width: 1200px;
+    padding: 0 50px;
+    overflow: hidden;
+
+    .pic-404 {
+      position: relative;
+      float: left;
+      width: 600px;
+      overflow: hidden;
+
+      &__parent {
+        width: 100%;
+      }
+
+      &__child {
+        position: absolute;
+
+        &.left {
+          width: 80px;
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+          animation-name: cloudLeft;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+
+        &.mid {
+          width: 46px;
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+          animation-name: cloudMid;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1.2s;
+        }
+
+        &.right {
+          width: 62px;
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+          animation-name: cloudRight;
+          animation-duration: 2s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          animation-delay: 1s;
+        }
+
+        @keyframes cloudLeft {
+          0% {
+            top: 17px;
+            left: 220px;
+            opacity: 0;
+          }
+          20% {
+            top: 33px;
+            left: 188px;
+            opacity: 1;
+          }
+          80% {
+            top: 81px;
+            left: 92px;
+            opacity: 1;
+          }
+          100% {
+            top: 97px;
+            left: 60px;
+            opacity: 0;
+          }
+        }
+        @keyframes cloudMid {
+          0% {
+            top: 10px;
+            left: 420px;
+            opacity: 0;
+          }
+          20% {
+            top: 40px;
+            left: 360px;
+            opacity: 1;
+          }
+          70% {
+            top: 130px;
+            left: 180px;
+            opacity: 1;
+          }
+          100% {
+            top: 160px;
+            left: 120px;
+            opacity: 0;
+          }
+        }
+        @keyframes cloudRight {
+          0% {
+            top: 100px;
+            left: 500px;
+            opacity: 0;
+          }
+          20% {
+            top: 120px;
+            left: 460px;
+            opacity: 1;
+          }
+          80% {
+            top: 180px;
+            left: 340px;
+            opacity: 1;
+          }
+          100% {
+            top: 200px;
+            left: 300px;
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 30px 0;
+      overflow: hidden;
+
+      &__oops {
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 20px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+
+      &__headline {
+        font-size: 20px;
+        line-height: 24px;
+        color: #222;
+        font-weight: bold;
+        opacity: 0;
+        margin-bottom: 10px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+
+      &__info {
+        font-size: 13px;
+        line-height: 21px;
+        color: grey;
+        opacity: 0;
+        margin-bottom: 30px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+
+      &__return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        background: #1482f0;
+        border-radius: 100px;
+        text-align: center;
+        color: #ffffff;
+        opacity: 0;
+        font-size: 14px;
+        line-height: 36px;
+        cursor: pointer;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+
+      @keyframes slideUp {
+        0% {
+          transform: translateY(60px);
+          opacity: 0;
+        }
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>

src/views/login.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="login-container">
+    <div class="login-form-box">
+      <el-form ref="loginForm" :model="loginForm" class="login-form" autocomplete="on" label-position="left">
+        <el-form-item />
+        <el-form-item>
+          <el-input ref="username" v-model.trim="loginForm.account" placeholder="账号" name="username" type="text"
+            tabindex="1">
+            <template #prefix>
+            <el-icon class="el-input__icon"><user /></el-icon>
+        </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input ref="password" v-model.trim="loginForm.password" type="password" placeholder="密码" name="password"
+            tabindex="2"  @keyup.enter.native="handleLogin">
+            <template #prefix>
+            <el-icon class="el-input__icon"><lock /></el-icon>
+        </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <div class="verification">
+            <el-input v-model.trim="loginForm.verificationCode" placeholder="验证码" name="verificationCode" type="text"
+              tabindex="3">
+              <template #prefix>
+            <el-icon class="el-input__icon"><message /></el-icon>
+        </template>
+            </el-input>
+            <img ref="vcImg" :src="codeUrl" style="width:50%;height:50%; border-radius: 5px; margin-left: 3px;"
+              loading="lazy" @click="getVerification()" />
+          </div>
+        </el-form-item>
+
+        <el-form-item>
+          <div class="login-btn">
+            <el-button  @click.native="handleLogin">
+              登录
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import router from '../router';
+import API from '@/api';
+import { useStore } from 'vuex';
+import { computed } from "vue";
+import { ElIcon, ElNotification } from 'element-plus';
+
+export default {
+    name: "Login",
+    setup(props) {
+        const store = useStore();
+        const login = (loginForm) => {
+            store.dispatch("login", loginForm).then(() => {
+                store.dispatch("userInfo").then(response => {
+                    router.push({
+                        name: "AMap",
+                    });
+                });
+            });
+        };
+        const token = computed(() => {
+            return store.getters.token;
+        });
+        return { login,token };
+    },
+    data() {
+        return {
+            loginForm: {
+                account: "",
+                password: "",
+                nonceId: "",
+                verificationCode: ""
+            },
+            otherQuery: {},
+            nonceId: null,
+            codeUrl: null
+        };
+    },
+    created() {
+        const that = this;
+        let tok = new RegExp("(^|&)token=([^&]*)(&|$)", "i");
+        let t = window.location.search.substr(1).match(tok);
+        if (t != null) {
+            let token = decodeURIComponent(t[2]);
+            console.log(token);
+        }
+        this.loginForm.nonceId = null;
+        this.getVerification();
+        this.visit();
+    },
+    mounted() {
+      if (this.token){
+          router.push({
+                name: "AMap"
+            });
+      }
+        if (this.loginForm.account === "") {
+            this.$refs.username.focus();
+        }
+        else if (this.loginForm.pws === "") {
+            this.$refs.password.focus();
+        }
+    },
+    destroyed() {
+        // window.removeEventListener('storage', this.afterQRScan)
+    },
+    methods: {
+        checkCapslock(e) {
+            const { key } = e;
+            this.capsTooltip = key && key.length === 1 && (key >= "A" && key <= "Z");
+        },
+        showPwd() {
+            if (this.passwordType === "password") {
+                this.passwordType = "";
+            }
+            else {
+                this.passwordType = "password";
+            }
+            this.$nextTick(() => {
+                this.$refs.password.focus();
+            });
+        },
+        handleLogin() {
+            if (this.loginForm.account === "" || this.loginForm.account === null) {
+                ElNotification({
+                    title: "错误",
+                    message: "请输入账号",
+                    type: "error",
+                });
+                return;
+            }
+            if (this.loginForm.password === "" || this.loginForm.password === null) {
+                ElNotification({
+                    title: "错误",
+                    message: "请输入密码",
+                    type: "error",
+                });
+                return;
+            }
+            if (this.loginForm.verificationCode === "" || this.loginForm.verificationCode === null) {
+                ElNotification({
+                    title: "错误",
+                    message: "请输入验证码",
+                    type: "error",
+                });
+                return;
+            }
+            this.login(this.loginForm);
+        },
+        getVerification() {
+            const nonceId = new Date().getTime();
+            this.loginForm.nonceId = nonceId;
+            API.account.verification({ "nonceId": nonceId }).then(response => {
+                this.codeUrl = URL.createObjectURL(response);
+            });
+        },
+        visit() {
+            API.account.visit();
+        }
+    },
+    components: { ElIcon }
+}
+</script>
+
+<style lang="scss" scoped>
+$bg: #ffffff;
+$dark_gray: #ffffff;
+$light_gray: #eee;
+$assets: '~@/assets/';
+
+.verification {
+  display: flex
+}
+
+.login-container {
+  // background: url("../assets/images/login_bg.jpg") 0 0 no-repeat;
+  background-color: rgb(10, 75, 135);
+  background-size: 100% 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .login-form-box {
+    /*position: absolute;*/
+    /*兼容360*/
+    margin-top: -80px;
+    box-shadow: 12px 12px 12px rgb(13, 13, 14),
+      -12px -12px 12px rgb(24, 112, 194);
+    border-radius: 3rem;
+    background-color: rgb(10, 75, 135);
+    transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+
+  .login-form {
+    width: 300px;
+    height: 100%;
+    padding: 10% 60px 60px;
+    border-radius: 10px;
+    background-color: rgb(10, 75, 135);
+
+    .login-btn {
+      .el-button {
+        font-size: 20px;
+        color: #fbfbfc;
+        box-shadow: 9px 9px 18px rgb(10, 10, 10),
+          -9px -9px 18px rgb(77, 161, 240);
+        border-radius: 3rem;
+        transition: box-shadow .2s ease-out;
+        background-color: rgb(10, 75, 135);
+        top: 80px;
+        margin-top: 20px;
+        margin-left: 80px;
+        width: 130px;
+        height: 55px;
+        outline: none;
+        border: none;
+      }
+
+      :hover {
+        color: rgb(77, 161, 240);
+        box-shadow: 1px 1px 2px rgba(24, 112, 194, 0.8),
+          -1px -1px 2px rgba(24, 112, 194, 0.8);
+        border-radius: 3rem;
+        transition: box-shadow .2s ease-out;
+        transition: font-size .2s ease-out;
+      }
+    }
+
+    .el-form-item {
+      margin-bottom: 30px;
+    }
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 30px;
+      margin: 0 auto 40px auto;
+      font-weight: bold;
+      color: #FFFFFF;
+      text-align: center;
+      letter-spacing: 5px;
+      min-height: 64px;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+}
+</style>
+

vue.config.js

@@ -0,0 +1,28 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  assetsDir: 'static',     //  outputDir的静态资源(js、css、img、fonts)目录
+  publicPath: './',   // 静态资源路径（默认/，如果不改打包后会白屏）
+  productionSourceMap: false, //不输出map文件
+  transpileDependencies: true,
+  lintOnSave: false,
+  devServer: {
+    open: true,
+    host: 'localhost',
+    port: '8080',
+    https: false,
+    hot: "only",
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8088',
+        changeOrigin: true,
+        pathRewrite: {}
+      }
+    }
+  },
+  // chainWebpack: config => {
+  //   config.plugin('html').tap(args => {
+  //       args[0].title = '四川省公示地价查询平台'
+  //       return args
+  //   })
+  // }
+})