书写大屏页面

3 years ago · ad1888f816
commit ad1888f816
126 changed files with 31177 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
--- a/.gitignore
+++ b/.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?
--- a/README.md
+++ b/README.md
@ -0,0 +1,24 @@
+# admin
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,58 @@
+{
+  "name": "map",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "axios": "^1.4.0",
+    "core-js": "^3.8.3",
+    "echarts": "^5.4.2",
+    "element-ui": "^2.15.13",
+    "rxjs": "^7.8.1",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vue-seamless-scroll": "^1.1.23",
+    "vuex": "^3.6.2"
+  },
+  "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-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-airbnb": "^6.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vuejs-accessibility": "^1.1.0",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/airbnb"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
--- a/public/config.js
+++ b/public/config.js
@ -0,0 +1,4 @@
+const config = {
+    baseIp: '/gw/',
+    baseYFIp: '/yunfan/',
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,23 @@
+<!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 src="./config.js"></script>
+    <script type="text/javascript">
+        window._AMapSecurityConfig = {
+            securityJsCode: '03a24273f9b3e14e3806b84664820a1d',
+        }
+    </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>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
--- a/src/api/home.js
+++ b/src/api/home.js
@ -0,0 +1,7 @@
+import request from "@/util/axios";
+
+export const queryResolve = () =>
+  request({
+    url: "/api/blade-business/report/getMediateFinish",
+    method: "get",
+  });
--- a/src/assets/fonts/Alibaba-PuHuiTi-Bold.ttf
+++ b/src/assets/fonts/Alibaba-PuHuiTi-Bold.ttf
--- a/src/assets/fonts/Alibaba-PuHuiTi-Heavy.otf
+++ b/src/assets/fonts/Alibaba-PuHuiTi-Heavy.otf
--- a/src/assets/fonts/Alibaba-PuHuiTi-Heavy.ttf
+++ b/src/assets/fonts/Alibaba-PuHuiTi-Heavy.ttf
--- a/src/assets/fonts/Alibaba-PuHuiTi-Light.ttf
+++ b/src/assets/fonts/Alibaba-PuHuiTi-Light.ttf
--- a/src/assets/fonts/Alibaba-PuHuiTi-Medium.ttf
+++ b/src/assets/fonts/Alibaba-PuHuiTi-Medium.ttf
--- a/src/assets/fonts/Alibaba-PuHuiTi-Regular.ttf
+++ b/src/assets/fonts/Alibaba-PuHuiTi-Regular.ttf
--- a/src/assets/fonts/DIN-Medium.otf
+++ b/src/assets/fonts/DIN-Medium.otf
--- a/src/assets/fonts/DS-DIGI.TTF
+++ b/src/assets/fonts/DS-DIGI.TTF
--- a/src/assets/fonts/DS-DIGIB.TTF
+++ b/src/assets/fonts/DS-DIGIB.TTF
--- a/src/assets/fonts/DS-DIGII.TTF
+++ b/src/assets/fonts/DS-DIGII.TTF
--- a/src/assets/fonts/DS-DIGIT.TTF
+++ b/src/assets/fonts/DS-DIGIT.TTF
--- a/src/assets/fonts/HYLingXinJ.TTF
+++ b/src/assets/fonts/HYLingXinJ.TTF
--- a/src/assets/fonts/PangMenZhengDao-3.TTF
+++ b/src/assets/fonts/PangMenZhengDao-3.TTF
--- a/src/assets/fonts/ShiShangZhongHeiJianTi.ttf
+++ b/src/assets/fonts/ShiShangZhongHeiJianTi.ttf
--- a/src/assets/fonts/Source-KeynoteartHans.otf
+++ b/src/assets/fonts/Source-KeynoteartHans.otf
--- a/src/assets/fonts/SourceHanSansCN-Bold.otf
+++ b/src/assets/fonts/SourceHanSansCN-Bold.otf
--- a/src/assets/fonts/SourceHanSansCN-ExtraLight.otf
+++ b/src/assets/fonts/SourceHanSansCN-ExtraLight.otf
--- a/src/assets/fonts/SourceHanSansCN-Heavy.otf
+++ b/src/assets/fonts/SourceHanSansCN-Heavy.otf
--- a/src/assets/fonts/SourceHanSansCN-Light.otf
+++ b/src/assets/fonts/SourceHanSansCN-Light.otf
--- a/src/assets/fonts/SourceHanSansCN-Medium.otf
+++ b/src/assets/fonts/SourceHanSansCN-Medium.otf
--- a/src/assets/fonts/SourceHanSansCN-Normal.otf
+++ b/src/assets/fonts/SourceHanSansCN-Normal.otf
--- a/src/assets/fonts/SourceHanSansCN-Regular.otf
+++ b/src/assets/fonts/SourceHanSansCN-Regular.otf
--- a/src/assets/fonts/TRENDS.TTF
+++ b/src/assets/fonts/TRENDS.TTF
--- a/src/assets/fonts/YouSheBiaoTiHei.TTF
+++ b/src/assets/fonts/YouSheBiaoTiHei.TTF
--- a/src/assets/fonts/number.ttf
+++ b/src/assets/fonts/number.ttf
--- a/src/assets/fonts/password.ttf
+++ b/src/assets/fonts/password.ttf
--- a/src/assets/images/360-5.jpg
+++ b/src/assets/images/360-5.jpg
--- a/src/assets/images/back.png
+++ b/src/assets/images/back.png
--- a/src/assets/images/dangjian.png
+++ b/src/assets/images/dangjian.png
--- a/src/assets/images/maker-lan.png
+++ b/src/assets/images/maker-lan.png
--- a/src/assets/images/moren.png
+++ b/src/assets/images/moren.png
--- a/src/assets/images/shequ.png
+++ b/src/assets/images/shequ.png
--- a/src/assets/img/all.png
+++ b/src/assets/img/all.png
--- a/src/assets/img/bag.png
+++ b/src/assets/img/bag.png
--- a/src/assets/img/btn.png
+++ b/src/assets/img/btn.png
--- a/src/assets/img/cancel.png
+++ b/src/assets/img/cancel.png
--- a/src/assets/img/date.png
+++ b/src/assets/img/date.png
--- a/src/assets/img/day.png
+++ b/src/assets/img/day.png
--- a/src/assets/img/dia_bag.png
+++ b/src/assets/img/dia_bag.png
--- a/src/assets/img/green.png
+++ b/src/assets/img/green.png
--- a/src/assets/img/left.jpg
+++ b/src/assets/img/left.jpg
--- a/src/assets/img/qua.png
+++ b/src/assets/img/qua.png
--- a/src/assets/img/red.png
+++ b/src/assets/img/red.png
--- a/src/assets/img/sele.png
+++ b/src/assets/img/sele.png
--- a/src/assets/img/title_bag.png
+++ b/src/assets/img/title_bag.png
--- a/src/assets/img/year.png
+++ b/src/assets/img/year.png
--- a/src/assets/img/yellow.png
+++ b/src/assets/img/yellow.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/wangge4/bg1.png
+++ b/src/assets/wangge4/bg1.png
--- a/src/assets/wangge4/bg2.png
+++ b/src/assets/wangge4/bg2.png
--- a/src/assets/wangge4/empty.png
+++ b/src/assets/wangge4/empty.png
--- a/src/assets/wangge4/sex1.png
+++ b/src/assets/wangge4/sex1.png
--- a/src/assets/wangge4/sex2.png
+++ b/src/assets/wangge4/sex2.png
--- a/src/assets/wangge4/tu1.png
+++ b/src/assets/wangge4/tu1.png
--- a/src/assets/wangge4/tu10.png
+++ b/src/assets/wangge4/tu10.png
--- a/src/assets/wangge4/tu11.png
+++ b/src/assets/wangge4/tu11.png
--- a/src/assets/wangge4/tu12.png
+++ b/src/assets/wangge4/tu12.png
--- a/src/assets/wangge4/tu13.png
+++ b/src/assets/wangge4/tu13.png
--- a/src/assets/wangge4/tu14.png
+++ b/src/assets/wangge4/tu14.png
--- a/src/assets/wangge4/tu2.png
+++ b/src/assets/wangge4/tu2.png
--- a/src/assets/wangge4/tu3.png
+++ b/src/assets/wangge4/tu3.png
--- a/src/assets/wangge4/tu4.png
+++ b/src/assets/wangge4/tu4.png
--- a/src/assets/wangge4/tu5.png
+++ b/src/assets/wangge4/tu5.png
--- a/src/assets/wangge4/tu6.png
+++ b/src/assets/wangge4/tu6.png
--- a/src/assets/wangge4/tu7.png
+++ b/src/assets/wangge4/tu7.png
--- a/src/assets/wangge4/tu8.png
+++ b/src/assets/wangge4/tu8.png
--- a/src/assets/wangge4/tu9.png
+++ b/src/assets/wangge4/tu9.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,60 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/components/map.vue
+++ b/src/components/map.vue
@ -0,0 +1,632 @@
+<template>
+  <!-- :style="{ width: aWidth + 'px', height: aHeight + 'px' }"
+        :style="{
+                transform: `translate(-${translateX}px, -${translateY}px)`,
+            }" -->
+  <div class="amap-wai">
+    <div class="amap-box" :id="amapId"></div>
+    <!-- <div class="custom-info">
+        <div class="custom">
+            <div class="title_info">
+            <div class="title_name">胶西街道</div>
+            <div class="title_num">
+                <div>已上报</div>
+                <div><span>5</span>件</div>
+            </div>
+        </div>
+        <div class="con_info">
+            <div class="con_info_top">
+                <div class="con_tit">初登日期</div>
+                <div class="con_tit">诉求类型</div>
+                <div class="con_tit">来访人姓名</div>
+            </div>
+            <div class="con_info_con">
+                <div class="con_item">
+                    <div class="item_txt">2023/06/08</div>
+                    <div class="item_txt">王华华</div>
+                    <div class="item_txt">家庭纠纷</div>
+                </div>
+                <div class="con_item">
+                    <div class="item_txt">2023/06/08</div>
+                    <div class="item_txt">王华华</div>
+                    <div class="item_txt">家庭纠纷</div>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div class="cancel">
+            <img src="@/assets/img/cancel.png" alt="">
+        </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+let communityData = [];
+
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { getZoom, callFuncInMain, ifIframe } from "@/libs/util";
+import {
+  mapView1,
+  mapView2,
+  createAMap,
+  addJiaozhouMaker,
+  addQingdao,
+  addJiaozhou,
+  addJiedao,
+  addNullJiedao,
+  addWangge3,
+  addWangge4,
+  addJiaozhouTexts,
+  addQingDaoTexts,
+  addWanggeMakers,
+  addWangge31,
+  addWangge41,
+  resetGroup3Style,
+  resetGroup4Style,
+  hideWanggeAll,
+  resetGroup2Style,
+  deleteWanggeAll,
+  addJiaozhouLabelMarker,
+  deleteWangge2,
+  addShequ,
+} from "@/libs/amap";
+import {
+  selectedWanggeLevel$,
+  selectedJiaozhou$,
+  selectedStreet$,
+  selectedWangge3$,
+  selectedWangge4$,
+  hotMapType$,
+  selectedModelInfo$,
+} from "@/subjects/sub";
+import { Divider } from 'element-ui';
+
+export default {
+  name: "index",
+  props: {
+    reliData: Array,
+  },
+  data() {
+    return {
+      amapId: !ifIframe() ? "amap-id-click" : "amap-id",
+      aWidth: 1920,
+      aHeight: 1080,
+
+      winWidth: 1920,
+      winHeight: 1080,
+
+      translateX: 0,
+      translateY: 0,
+      amap: null,
+      ob: null,
+      ob1: null,
+      rankList: {},
+      markersArr:[],
+      markers: [
+        {
+          name: "洋河镇",
+          position: [119.945718, 36.136799], //洋河镇
+          offset: [-100, -80],
+        },
+        {
+          name: "铺集镇",
+          position: [119.726968, 36.126774], //铺集镇
+          offset: [-80, -120],
+        },
+        {
+          name: "里岔镇",
+          position: [119.788636, 36.070297], //里岔镇
+          offset: [20, -150],
+        },
+        {
+          name: "胶西街道",
+          position: [119.920687, 36.26026], //胶西街道
+          offset: [-80, -80],
+        },
+        {
+          name: "九龙街道",
+          position: [120.080354, 36.20667], //九龙街道
+          offset: [-30, 0],
+        },
+        {
+          name: "中云街道",
+          position: [120.002198, 36.28424], //中云街道
+          offset: [-80, -80],
+        },
+        {
+          name: "阜安街道",
+          position: [120.015932, 36.284843], //阜安街道
+          offset: [-60, -80],
+        },
+        {
+          name: "三里河街道",
+          position: [120.003466, 36.267643], //三里河街道
+          offset: [-60, -20],
+        },
+        {
+          name: "胶东街道",
+          position: [120.097643, 36.310525], //胶东街道
+          offset: [-100, -150],
+        },
+        {
+          name: "胶北街道",
+          position: [119.965759, 36.362683], //胶北街道
+          offset: [-80, -60],
+        },
+        {
+          name: "胶莱街道",
+          position: [120.070996, 36.443059], //胶莱街道
+          offset: [-80, -60],
+        },
+        {
+          name: "李哥庄镇",
+          position: [120.158927, 36.352635], //李哥庄镇
+          offset: [-20, -70],
+        },
+      ],
+    };
+  },
+  // 监听,当路由发生变化的时候执行
+  watch: {
+    $route: {
+      handler: function (val, oldVal) {},
+      // 深度观察监听
+      deep: true,
+    },
+    reliData: {
+      handler(newVal, oldVal) {
+        console.log("this ==>", this);
+        console.log("newVal ==>", newVal);
+        console.log("oldVal ==>", oldVal);
+        this.rankList = newVal[0];
+        if(this.amap == null){
+            this.$nextTick(() =>{
+                this.newMap()
+            })
+        }else{
+            this.selectedWanggeLevel2Event();
+        }
+        
+      },
+    },
+  },
+  mounted() {
+    this.setZoom();
+    window.clickMark = this.clickMark;
+
+    window.addEventListener("resize", () => {
+      this.setZoom();
+    });
+   
+  },
+  beforeUnmount() {
+    this.ob?.unsubscribe();
+    this.ob1?.unsubscribe();
+  },
+  created() {
+    // console.log('reliData ===>',)
+  },
+  methods: {
+    createInfo(title, content){
+            var info = document.createElement("div");
+            info.className = "custom-info input-card content-window-card";
+
+            // //可以通过下面的方式修改自定义窗体的宽高
+            info.style.width = "350px";
+            info.innerHTML = 
+            '<div class="custom">'+
+                '<div class="title_info">' +
+                    '<div class="title_name">洋河镇</div>'+
+                    '<div class="title_num">'+
+                        '<div style="color:#fff">已上报</div>'+
+                        '<div class="sb_num_txt"><span style="font-size:20px">5</span>件</div>'+
+                '</div>'+'</div>'+
+                '<div class="con_info">' +
+            ' <div class="con_info_top">' +
+                    '<div class="con_tit">初登日期</div>' +
+                    '<div class="con_tit">诉求类型</div>' +
+                ' <div class="con_tit">来访人姓名</div>' +
+            ' </div>' +
+                '<div class="con_info_con">' +
+                    '<div class="con_item">'+
+                    '  <div class="item_txt">2023/06/08</div>'+
+                        '<div class="item_txt">王华华</div>'+
+                        '<div class="item_txt">家庭纠纷</div>'+
+                    '</div>'+
+                    '<div class="con_item">'+
+                    ' <div class="item_txt">2023/06/08</div>'+
+                        '<div class="item_txt">王华华</div>'+
+                        '<div class="item_txt">家庭纠纷</div>'+
+                    '</div>'+
+                '</div>'+
+            '</div>'+
+            '</div>'+
+             '<div class="cancel">'+
+            '</div>'
+            console.log(info)
+            return info;
+    },
+    clickMark(val){
+        console.log('点击事件',val + '')
+        let tmp = this.markers.find(item => item.name == val)
+        console.log(tmp)
+        var title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
+    content = [];
+content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
+content.push("电话：010-64733333");
+content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
+        var infoWindow = new AMap.InfoWindow({
+            isCustom: true,  //使用自定义窗体
+            content: this.createInfo(title, content.join("<br/>")),
+            offset: new AMap.Pixel(16, -45)
+        });
+        infoWindow.open(this.amap,tmp.position)
+    },
+    // markerClick(e){
+    //     console.log(e)
+    // },
+    newMap(){
+         AMapLoader.load({
+      key: this.config.amap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: ["AMap.GeoJSON"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    })
+      .then((AMap) => {
+        this.amap = createAMap(this.amapId);
+        this.amap.setCenter([119.954097, 36.220797]);
+        this.amap.on("complete", async () => {
+          callFuncInMain("wanggeScreenComplete", "");
+
+          this.ob = selectedWanggeLevel$.subscribe(async (key) => {
+            console.log('key',key)
+            this.amap?.clearMap()
+            this.clearModal();
+            hideWanggeAll();
+            if (key === 1) {
+              this.amap.setZoomAndCenter(mapView1.zoom, mapView1.center, true);
+              this.amap.setPitch(mapView1.pitch, true);
+              this.amap.setRotation(mapView1.rotation, true);
+              addQingdao(this.amap);
+              addJiaozhou(this.amap);
+              addJiaozhouMaker(this.amap);
+              // addQingDaoTexts(this.amap)
+            } else if (key === 2) {
+              // deleteWangge2()
+              this.selectedWanggeLevel2Event(hotMapType$.value);
+            }
+          });
+        //   this.ob1 = hotMapType$.subscribe((type) => {
+        //     if (selectedWanggeLevel$.value === 2) {
+        //       this.selectedWanggeLevel2Event(hotMapType$.value);
+        //     }
+        //   });
+        });
+        this.amap.on("click", (e) => {
+          // console.log(this.amap.getCenter())
+          // console.log(this.amap.getZoom())
+          // console.log(this.amap.getPitch())
+          // console.log(this.amap.getRotation())
+          this.clearModal();
+        });
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+    },
+    async getSecret() {
+      const { data } = await this.$fetch.get("api/bs/secret", {});
+      return RSAJieMi(data);
+    },
+    /**
+     *
+     * @param {*} hotType  热力图 形式 0：按积分 1： 按数量
+     */
+    async selectedWanggeLevel2Event() {
+      // 接口比较慢，先加载个空的,接口好了再填充一遍
+      // this.addAMapWanggeLevel2({}, hotType)
+
+      // let rankList = {}
+      // if (hotType === 0) {
+      //     // 获取镇街的诉求排名
+      //     rankList = await this.qryMobileSuqiuKanbanList('zjd')
+      //     // console.log('rankList',rankList)
+      // } else {
+      //     // 获取镇街的诉求排名
+      //     // rankList = await this.getQrySqpm('zjd')
+      // }
+      // rankList = { 铺集镇: 1, 里岔镇: 4 };
+      console.log('selectedWanggeLevel$.value',selectedWanggeLevel$.value)
+      if (selectedWanggeLevel$.value === 2) {
+        this.addAMapWanggeLevel2(this.rankList);
+      }
+    },
+    /**
+     * 添加二级网格的地图上的东西
+     * @param {*} rankList
+     * @param {*} hotType
+     */
+    addAMapWanggeLevel2(rankList) {
+        // console.log('hotType ==>',hotType,)
+    //   this.amap.setZoomAndCenter(mapView2.zoom, mapView2.center, true);
+    //   this.amap.setPitch(mapView2.pitch, true);
+    //   this.amap.setRotation(mapView2.rotation, true);
+      // let latLng = new LatLng(119.726968,36.126774);
+      if(this.markersArr.length !== 0){
+        this.amap.remove(this.markersArr)
+      }
+      
+      let markerArr = [];
+
+      for (let key in rankList) {
+        this.markers.map((item) => {
+          if (key == item.name) {
+            if (rankList[key] < 75) {
+              markerArr.push({
+                markerContent:
+                  '<div class="green-content-marker">' +
+                  '   <div class="green-btn">' +
+                  rankList[key] +
+                  "</div>" +
+                  "</div>",
+                position: item.position,
+                offset: item.offset,
+              });
+            } else if (rankList[key] >= 75 && rankList[key] <= 85){ 
+              markerArr.push({
+                markerContent:
+                  "<div class='yellow-content-marker'" + 'onclick="clickMark(' + "'" + key + "'"  +')"' + '</div>'+
+                  '<div class="yellow-btn">' +
+                  rankList[key] +
+                  "</div>" +
+                  "</div>",
+                position: item.position,
+                offset: item.offset,
+              });
+            } else if (rankList[key] > 85) {
+              markerArr.push({
+                markerContent:
+                  '<div class="red-content-marker">' +
+                  '   <div class="red-btn">' +
+                  rankList[key] +
+                  "</div>" +
+                  "</div>",
+                position: item.position,
+                offset: item.offset,
+              });
+            }
+          }
+        });
+      }
+      markerArr.forEach((marker) => {
+        let markTmp =  new AMap.Marker({
+          map: this.amap,
+          content: marker.markerContent,
+          // icon: marker.icon,
+          position: [marker.position[0], marker.position[1]],
+          offset: new AMap.Pixel(marker.offset[0], marker.offset[1]),
+        });
+        this.markersArr.push(markTmp)
+        //  markTmp.on('click', this.markerClick);
+      });
+     
+      
+      addJiedao(this.amap, 2, rankList);
+      addJiaozhouTexts(this.amap);
+      addJiaozhouLabelMarker(this.amap)
+    },
+    clearModal() {
+      // 点击空白处的时候,取消弹窗
+      selectedJiaozhou$.next(null);
+      // 取消二级
+      selectedStreet$.next(null);
+      resetGroup2Style();
+      // 取消三级
+      selectedWangge3$.next(null);
+      resetGroup3Style();
+      // 取消四级
+      selectedWangge4$.next(null);
+
+      selectedModelInfo$.next(null);
+      resetGroup4Style();
+    },
+    setZoom() {
+      const zoom = getZoom();
+      this.aWidth = 1920 * zoom;
+      this.aHeight = 1080 * zoom;
+
+      // 设置偏移，把地图居中
+      this.winWidth = window.innerWidth;
+      this.winHeight = window.innerHeight;
+      if (this.winWidth > this.aWidth) {
+        this.translateX = (this.winWidth - this.aWidth) / 2;
+      }
+      if (this.winHeight > this.aHeight) {
+        this.translateY = (this.winHeight - this.aHeight) / 2;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.amap-wai {
+  width: 100%;
+  height: 100%;
+}
+::v-deep .amap-icon {
+  width: 100px !important;
+  height: 100px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+::v-deep .custom-info{
+    width: 350px;
+    height: 300px;
+    display: flex;
+    padding-top:20px;
+    
+    .custom{
+        width: 90%;
+        height: 100%;
+        background: url('@/assets/img/dia_bag.png') no-repeat;
+        background-size: 100% 100%;
+    
+
+        .title_info{
+            width: 96%;
+            height: 14%;
+            
+            /* background: red; */
+            display: flex;
+            /* margin-top: 20px; */
+            margin: 0 auto;
+            margin-top: 20px;
+            align-items: center;
+            justify-content: space-between;
+
+            .title_name{
+                width: 60%;
+                text-align: left;
+                padding-left: 10px;
+                font-size: 18px;
+                color: #fff;
+            }
+            .title_num{
+                width: 40%;
+                /* background: green; */
+                display: flex;
+                height: 100%;
+                align-items: center;
+
+                .sb_num_txt{
+                    background-image: linear-gradient(to bottom, #92eeff, #5bcaf5);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    font-weight: bold;
+                }
+                // justify-content: center;
+            }
+        }
+        .con_info{
+            width: 90%;
+            height: 75%;
+            margin: 0 auto;
+            margin-top: 3%;
+
+            .con_info_top{
+                width: 100%;
+                height: 13%;
+                display: flex;
+                background: url("@/assets/img/title_bag.png") no-repeat;
+                background-size: 100% 100%;
+                color: #47c5f0;
+
+                .con_tit{
+                    width: 33%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+            .con_info_con{
+                width: 100%;
+                height: 85%;
+                margin-top: 2%;
+
+                .con_item{
+                    width: 100%;
+                    height: 12%;
+                    background: rgba(17, 71, 96, 0.3);
+                    display: flex;
+                    align-items: center;
+                    color: #fff;
+                    margin-bottom: 5px;
+
+                    .item_txt{
+                        width: 33%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        
+                    }
+                }
+            }
+        }
+    }
+
+    .cancel{
+        width:30px;
+        height:30px;
+        background: url("@/assets/img/cancel.png") no-repeat;
+        background-size: 100% 100%;
+        
+    }
+}
+
+::v-deep .green-content-marker {
+  width: 100px;
+  height: 100px;
+  background: url("@/assets/img/green.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+::v-deep .red-content-marker {
+  width: 100px;
+  height: 100px;
+  background: url("@/assets/img/red.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+::v-deep .yellow-content-marker {
+  width: 100px;
+  height: 100px;
+  background: url("@/assets/img/yellow.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+::v-deep .green-btn {
+  background-image: linear-gradient(to bottom, #caffe9, #7effbb);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 34px;
+}
+::v-deep .red-btn {
+  background-image: linear-gradient(to bottom, #ffbbbb, #ff7373);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 34px;
+}
+::v-deep .yellow-btn {
+  background-image: linear-gradient(to bottom, #fff0c8, #f4e05c);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 34px;
+}
+.amap-box {
+  // position: absolute;
+  // left: 0;
+  // top: 0;
+  width: 100%;
+  height: 100%;
+
+  // width: 100vw;
+  // height: 100vh;
+}
+::v-deep .amap-marker {
+  color: #fff !important;
+}
+</style>
--- a/src/config/index.js
+++ b/src/config/index.js
@ -0,0 +1,55 @@
+export default {
+  /**
+   * @description 配置显示在浏览器标签的title
+   */
+  // title: '胶州市党建引领一网统筹城乡网格治理电子地图',
+  // title: '胶州市党建引领基层治理数字驾驶舱',
+  title: "党建引领基层治理综合服务平台",
+  /**
+   * 屏幕分辨率
+   */
+  sWidth: 1920,
+  sHeight: 1080,
+  /**
+   * 一些定时器的轮询时间，现在5分钟
+   */
+  timeInterval: 5 * 60 * 1000,
+  /**
+   * 胶州code
+   */
+  jzCode: 370281,
+  /**
+   * 公钥
+   */
+  PUBLICKEY: `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDJM+2K1ceGZfgAf80PAPGkjskem6WzS6ZSJb//pi9C0V2MBQUPKRvmYr4rEKwsU8Y/nwfINwU4SdQSjpG3JYq/Xi4BbOZYJIiyC98cOECBSJ9qMMjxsPUH8w0Oj8HQVWkIPNu/XMJwy0LHCkeOJY92lyPalsioqvlw+B59JGqsZQIDAQAB`,
+  /**
+   * @description api请求基础路径
+   */
+  baseUrl: {
+    imgBase: "https://rootai.cn",
+    dev: "/", // 正式环境
+    // pro: config.baseIp,
+  },
+  baseUrlYF: {
+    dev: "/",
+    // pro: config.baseYFIp,
+  },
+  amap: {
+    // 李学广的
+    key: "2803c231f8da7ed638fe7fb6ec0c07e5",
+    mapStyle: "becfeeb8d2ffaf0c7e58b872cf77a16d",
+    // 我的
+    // key:'aecab6c02e6bcca3dd79b717b54db235',
+    // mapStyle:'ae5993dd8f1b787fbc1c55cd4e7af167'
+  },
+  // 服务列表
+  serveces: {
+    ops: "services/smx-ops/",
+    tenant: "services/smx-tenant/",
+    tensec: "services/smx-tenant-security/",
+    uaa: "services/smx-uaa/",
+    iot: "services/smx-iot/",
+    grid: "services/smx-tenant-grid-operator/",
+    gateway: "",
+  },
+};
--- a/src/data/allData.js
+++ b/src/data/allData.js
@ -0,0 +1,137 @@
+/**
+ * 青岛的区
+ */
+export const QingDaoArea = [
+    {
+        name: '平度市',
+        lonlat: [119.958734, 36.756091],
+    },
+    {
+        name: '莱西市',
+        lonlat: [120.422906, 36.813283],
+    },
+    {
+        name: '即墨区',
+        lonlat: [120.686578, 36.491572],
+    },
+    {
+        name: '黄岛区',
+        lonlat: [119.901056, 35.88197],
+    },
+    {
+        name: '城阳区',
+        lonlat: [120.332269, 36.270448],
+    },
+    {
+        name: '崂山区',
+        lonlat: [120.609674, 36.184039],
+    },
+    {
+        name: '李沧区',
+        lonlat: [120.422765, 36.175832],
+    },
+    {
+        name: '市北区',
+        lonlat: [120.371742, 36.112084],
+    },
+    {
+        name: '市南区',
+        lonlat: [120.368115, 36.059835],
+    },
+]
+/**
+ * 胶州镇街
+ */
+export const JiaoZhouStreets = [
+    {
+        name: '洋河镇',
+        lonlat: [119.93812790669215, 36.10555101363873],
+    },
+    {
+        name: '里岔镇',
+        lonlat: [119.81427191569176, 36.088312187216864],
+    },
+    {
+        name: '铺集镇',
+        lonlat: [119.69961418613835, 36.10939977641625],
+    },
+    {
+        name: '九龙街道',
+        lonlat: [120.05134785376572, 36.1910063974024],
+    },
+    {
+        name: '胶西街道',
+        lonlat: [119.87578419752631, 36.22684798508332],
+    },
+    {
+        name: '胶北街道',
+        lonlat: [119.96510683139181, 36.3662414967107],
+    },
+    {
+        name: '胶莱街道',
+        lonlat: [120.05558423842885, 36.43479965967534],
+    },
+    {
+        name: '李哥庄镇',
+        lonlat: [120.176459, 36.336042],
+    },
+    {
+        name: '胶东街道',
+        lonlat: [120.07256238227389, 36.343183055182685],
+    },
+    {
+        name: '中云街道',
+        lonlat: [119.9773152727287, 36.2800766934777],
+    },
+    {
+        name: '阜安街道',
+        lonlat: [120.02124745283263, 36.28850013293789],
+    },
+    {
+        name: '三里河街道',
+        lonlat: [119.987337307199, 36.23296421121942],
+    },
+]
+/**
+ * 街道编码配置
+ */
+export const JiaoZhouStreetsCodeObj = {
+    洋河镇: '370281111',
+    铺集镇: '370281105',
+    李哥庄镇: '370281102',  
+    九龙街道: '370281006',
+    胶西街道: '370281009',
+    胶北街道: '370281008',
+    胶东街道: '370281007',
+    阜安街道: '370281001',
+    中云街道: '370281002',
+    三里河街道: '370281004',
+    里岔镇: '370281108',
+    胶莱街道: '370281010',
+}
+export const wangge3MapTexts = [
+    {
+        name: '商城社区',
+        lonlat: [119.88975, 36.116219],
+    },
+    {
+        name: '商城社区2',
+        lonlat: [119.81427191569176, 36.088312187216864],
+    },
+]
+export const wangge4MapTexts = [
+    {
+        name: '龙泉社区第一网格',
+        lonlat: [120.059352, 36.360455],
+    },
+    {
+        name: '龙泉社区第二网格',
+        lonlat: [119.943088, 36.283618],
+    },
+]
+
+export const data1 = {}
+
+function getRandom(num) {
+    return parseInt(Math.random() * num)
+}
--- a/src/data/imgs/1.jpg
+++ b/src/data/imgs/1.jpg
--- a/src/data/imgs/2.jpeg
+++ b/src/data/imgs/2.jpeg
--- a/src/data/imgs/af1.png
+++ b/src/data/imgs/af1.png
--- a/src/data/imgs/af2.png
+++ b/src/data/imgs/af2.png
--- a/src/data/imgs/af3.png
+++ b/src/data/imgs/af3.png
--- a/src/data/imgs/af4.png
+++ b/src/data/imgs/af4.png
--- a/src/data/imgs/af5.png
+++ b/src/data/imgs/af5.png
--- a/src/data/imgs/af6.png
+++ b/src/data/imgs/af6.png
--- a/src/data/imgs/dian.png
+++ b/src/data/imgs/dian.png
--- a/src/data/imgs/img1.png
+++ b/src/data/imgs/img1.png
--- a/src/data/imgs/jg.jpg
+++ b/src/data/imgs/jg.jpg
--- a/src/data/imgs/ma2.png
+++ b/src/data/imgs/ma2.png
--- a/src/data/imgs/qi.png
+++ b/src/data/imgs/qi.png
--- a/src/data/imgs/shui.png
+++ b/src/data/imgs/shui.png
--- a/src/data/imgs/xf.png
+++ b/src/data/imgs/xf.png
--- a/src/data/imgs/yx1.png
+++ b/src/data/imgs/yx1.png
--- a/src/data/imgs/yx2.png
+++ b/src/data/imgs/yx2.png
--- a/Show More
+++ b/Show More