init

.env.development

+NODE_ENV=development
+
+VUE_APP_MAP_INIT_STYLE=http://39.104.87.15/api/tileset
+VUE_APP_YGYX_URL=http://39.104.87.15/api/rasterviz
+VUE_APP_BASE_MAP_URL=http://39.104.87.15/api/basemap/style/
+DECIMAL_NUMBER=4
\ No newline at end of file

.env.production

+NODE_ENV=development
+VUE_APP_MAP_INIT_STYLE=http://localhost/api/tileset
+VUE_APP_YGYX_URL=http://localhost/api/rasterviz
+VUE_APP_BASE_MAP_URL=http://localhost/api/basemap/style/
+DECIMAL_NUMBER=4
\ No newline at end of file

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "ant-design-vue": "^1.7.6",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.3",
+    "mapbox-gl": "1.13.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
+      <keep-alive>
+        <router-view />
+      </keep-alive>
   </div>
 </template>
 
-<style lang="less">
-#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;
+<script>
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+export default {
+  data() {
+    return {
+    };
+  },
+};
+</script>
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+<style lang="less">
+@import url("./assets/css/cssreset.css");
+@import url("./assets/css/public.less");
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+#app {
+  height: 100%;
 }
 </style>

src/api/base.js

+import axios from 'axios'
+import Message from 'ant-design-vue/es/message/index'
+// import loginApi from './login'
+// import { logout } from '@/util/logout'
+
+axios.defaults.withCredentials = true
+
+// const baseUrl = '/api/'
+const baseUrl = '/api/feature/'
+
+// let requestQueen = []
+// let canRequest = true
+
+export default function ajax(firstUrl, data = {}, type = 'GET', header = {}) {
+  return new Promise((resolve, reject) => {
+    let option = {}
+    let url = baseUrl + firstUrl
+    let homeHeader = { Authorization: `Bearer ${sessionStorage.getItem('access_token')}` } // 除登录外的header
+    let headers = Object.assign(homeHeader, header)
+    if (['POST', 'PUT', 'PATCH', 'FORM_POST', 'FORM_PUT'].includes(type.toUpperCase())) {
+      option = {
+        url,
+        method: type.toUpperCase(),
+        headers,
+        data
+      }
+    } else if (['GET', 'DELETE'].includes(type.toUpperCase())) {
+      option = {
+        url,
+        method: type.toUpperCase(),
+        params: data,
+        headers
+      }
+    }
+    axios(option).then((res) => {
+      if (res.status === 200) {
+        const status = res.data.code
+        switch (status) {
+          case 0:
+            break
+          case 4001: // token失效
+            // 如果请求是4001，直接加入请求缓存队列，通过回调函数保存当前resolve
+            // requestQueen.push(() => {
+            //   resolve(ajax(firstUrl, data, type, header))
+            // })
+            // if (canRequest) { // 如果是可以请求，也就是说当前是第一个4001返回的请求
+            //   canRequest = false // 设置不能继续请求
+            //   if (sessionStorage.getItem('refresh_token')) { // 判断有无refresh_token，有的话就去刷新token
+            //     loginApi.refreshToken().then(async res => {
+            //       canRequest = true
+            //       if (res.code === 2000) { // 刷新token成功
+            //         for (let i of requestQueen) { // 成功后将队列全部重试
+            //           await i()
+            //         }
+            //       } else { // 刷新token不成功
+            //         Message.error('登录过期, 请重新登录')
+            //         // logout()
+            //       }
+            //       requestQueen = [] // 无论成功与否，清空请求队列
+            //     })
+            //   } else { // 因为某些原因丢失了refresh_token,直接退出
+            //     Message.error('登录过期, 请重新登录')
+            //     // logout()
+            //   }
+            // }
+            break
+          case 4000:
+            console.log(`${url}Bad Request`)
+            Message.error('Bad Request')
+            break
+          case 4003:
+            console.log(`${url}禁止访问`)
+            Message.error('禁止访问')
+            break
+          case 4004:
+            console.log(`${url}资源未找到`)
+            Message.error('资源未找到')
+            break
+          case 4005:
+            Message.error(`${url}接口不支持${type}方式请求`)
+            break
+          case 5000:
+            console.log(`${url}接口业务异常`)
+            break
+          case -1:
+            console.log(`${url}接口系统错误`)
+            Message.error(`${url}接口系统错误`)
+            break
+          default:
+            console.log('未知错误')
+            break
+        }
+        if (status !== 4001) {
+          resolve(res.data)
+        }
+      } else {
+        reject(res)
+      }
+    })
+      .catch((error) => {
+        if (error.response) {
+          Message.error(`http错误, ${error.response.status},${error.response.statusText}`)
+          console.log('http错误', error)
+          console.log('url', option.url)
+        } else {
+          Message.error(`未知http错误, ${error.message}`)
+          console.log('http错误', error)
+          console.log('url', error.config.url)
+        }
+        reject(error)
+      })
+  })
+}

src/api/layer.js

+import ajax from "./base";
+
+export default {
+  // 行政区获取
+  async query(dataSetCode, params = {}) {
+    const defaultParams = {};
+    return ajax(
+      `${dataSetCode}/query`,
+      Object.assign({}, defaultParams, params),
+      "POST"
+    );
+  },
+  async aggregation(dataSetCode, params = {}) {
+    const defaultParams = {};
+    return ajax(
+      `${dataSetCode}/aggregation`,
+      Object.assign({}, defaultParams, params),
+      "POST"
+    );
+  },
+};

src/assets/css/cssreset.css

+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
+body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
+h1, h2, h3, h4, h5, h6{ font-size:100%; }
+address, cite, dfn, em, var { font-style:normal; }
+code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
+small{ font-size:12px; }
+ul, ol { list-style:none; }
+a { text-decoration:none; }
+a:hover { text-decoration:underline; }
+sup { vertical-align:text-top; }
+sub{ vertical-align:text-bottom; }
+legend { color:#000; }
+fieldset, img { border:0; }
+button, input, select, textarea { font-size:100%; }
+table { border-collapse:collapse; border-spacing:0; }
\ No newline at end of file

src/assets/fonts/font.css

+@font-face {
+  font-family: 'timeFont';
+  src: url('digit.TTF');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'title';
+  src: url('title.TTF');
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file

src/components/HelloWorld.vue

-<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="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Map/Map.vue

+<template>
+  <div :id="mapId" class="__map"></div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl'
+import { register } from './map'
+// import style from '@/config/mapStyle.js'
+export default {
+  props: {
+    center: {
+      type: Array,
+      default: () => [110, 30]
+    },
+    zoom: {
+      type: Number,
+      default: 2
+    },
+    mapId: {
+      // 接收图层容器的ID
+      type: String || undefined,
+      default: 'map'
+    }
+  },
+  data() {
+    return {
+      map: null
+    }
+  },
+  mounted() {
+    this.initMap()
+  },
+  methods: {
+    initMap() {
+      this.map = new mapboxgl.Map({
+        container: this.mapId,
+        zoom: this.zoom,
+        center: this.center,
+        maxZoom: 18,
+        // style: "mapbox://styles/mapbox/dark-v10",
+        style: `${process.env.VUE_APP_BASE_MAP_URL}grey_simple.json`
+        // style
+      })
+      this.map.on('load', () => {
+        let map = this.map
+
+        // 添加新的地图实例方法, 初始化相关状态
+        register(mapboxgl.Map.prototype)
+        map._initMapState({
+          center: this.center,
+          zoom: this.zoom
+        })
+        // console.log()
+        // map.setBaseMap({ sources: style.sources, layers: style.layers })
+        console.log('loadload', map)
+        this.$emit('onload', map)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.__map {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+// .pop-class {
+//   background-color: red;
+// }
+
+.mapboxgl-ctrl {
+  display: none !important;
+}
+</style>

src/main.js

@@ -2,7 +2,14 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import mapboxgl from "mapbox-gl";
 
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
+mapboxgl.accessToken =
+  "pk.eyJ1IjoiZmVuZ3ppZGFuIiwiYSI6ImNrY2s3ajF2cTFzc20ycnFrZWVuaDZwbngifQ.yneVi9iccAwqb6QoipjHrA";
 Vue.config.productionTip = false;
 
 new Vue({

src/pages/biogasManureEcoAgriculture/index.vue

+<template>
+  <div>BiogasManureEcoAgriculture</div>
+</template>
+
+<script>
+export default {
+  name: 'BiogasManureEcoAgriculture'
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/pages/biomassEnergyWarm/index.vue

+<template>
+  <div>BiomassEnergyWarm</div>
+</template>
+
+<script>
+export default {
+  name: 'BiomassEnergyWarm'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/pages/renewableEnergyVillage/index.vue

+<template>
+  <div>RenewableEnergyVillage</div>
+</template>
+
+<script>
+export default {
+  name: 'RenewableEnergyVillage'
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/router/index.js

@@ -6,18 +6,41 @@ Vue.use(VueRouter);
 
 const routes = [
   {
-    path: "/",
+    path: "/home",
     name: "Home",
     component: Home,
-  },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+    children: [
+      {
+        path: "methane_upgrade",
+        name: "MethaneUpgrade",
+        component: () =>
+          import(/* webpackChunkName: "about" */ "../pages/methaneUpgrade"),
+      },
+      {
+        path: "biomass_energy_warm",
+        name: "BiomassEnergyWarm",
+        component: () =>
+          import(
+            /* webpackChunkName: "about" */ "../pages/biomassEnergyWarm"
+          ),
+      },
+      {
+        path: "biogas_manure_eco_agriculture",
+        name: "BiogasManureEcoAgriculture",
+        component: () =>
+          import(
+            /* webpackChunkName: "about" */ "../pages/biogasManureEcoAgriculture"
+          ),
+      },
+      {
+        path: "renewable_energy_village",
+        name: "RenewableEnergyVillage",
+        component: () =>
+          import(
+            /* webpackChunkName: "about" */ "../pages/renewableEnergyVillage/index"
+          ),
+      },
+    ],
   },
 ];
 

src/views/About.vue

-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+  <div class="body">
+    <div class="contain">
+      <div class="header">
+        <div class>
+          <img src="../assets/img/logo.png" alt />
+          <h3>农村农业生态建设</h3>
+        </div>
+        <div class="menu">
+          <div class="a-menu" @click="$router.push('/home/methane_upgrade')">
+            11111
+          </div>
+          <div
+            class="a-menu"
+            @click="$router.push('/home/biomass_energy_warm')"
+          >
+            22222
+          </div>
+          <div
+            class="a-menu"
+            @click="$router.push('/home/biogas_manure_eco_agriculture')"
+          >
+            33333
+          </div>
+          <div
+            class="a-menu"
+            @click="$router.push('/home/renewable_energy_village')"
+          >
+            444444
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content-cont">
+      <div style="width: 100%; height: 100%">
+        <!-- <keep-alive> -->
+        <!-- <router-view /> -->
+        <!-- </keep-alive> -->
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
 export default {
-  name: "Home",
-  components: {
-    HelloWorld,
+  name: 'Home',
+  data() {
+    return {
+      // baseUrl: process.env.BASE_URL
+    }
   },
-};
+  components: {
+    // HelloWorld,
+  }
+}
 </script>
+
+<style scoped lang="less">
+@import url('../assets/css/public.less');
+.body {
+  width: 100%;
+  height: 100%;
+  .contain {
+    position: relative;
+    .header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      // height: 7vh;
+      z-index: 300;
+      box-sizing: border-box;
+      text-align: left;
+      padding-left: 1vw;
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 100, 200, 0.2),
+        rgba(0, 200, 100, 0)
+      );
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      z-index: 500;
+      img {
+        height: 6vh;
+        margin-right: 1vh;
+      }
+      h3 {
+        font-size: 4.7vh;
+        line-height: 10vh;
+        font-weight: 700;
+        letter-spacing: 0.1vh;
+        color: @main-color;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+    }
+  }
+}
+</style>

vue.config.js

+const path = require("path");
+
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+module.exports = {
+  publicPath: "./",
+  chainWebpack: (config) => {
+    //修改文件引入自定义路径
+    config.resolve.alias.set("@", resolve("src")).set("api", resolve("/api"));
+    // svg rule loader
+    const svgRule = config.module.rule("svg"); // 找到svg-loader
+    svgRule.uses.clear(); // 清除已有的loader, 如果不这样做会添加在此loader之后
+    svgRule.exclude.add(/node_modules/); // 正则匹配排除node_modules目录
+    svgRule // 添加svg新的loader处理
+      .test(/\.svg$/)
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
+      .options({
+        symbolId: "icon-[name]",
+      });
+
+    // 修改images loader 添加svg处理
+    const imagesRule = config.module.rule("images");
+    imagesRule.exclude.add(resolve("src/plugins/icon/svg"));
+    config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        additionalData: `@import "~@/assets/css/index.less";`,
+      },
+    },
+  },
+  devServer: {
+    proxy: {
+      "/api": {
+        // CI
+        // target: "http://localhost:5002",
+        target: "http://39.104.87.15",
+        changeOrigin: true,
+        // pathRewrite: {
+        //   "/api": "",
+        // },
+      },
+    },
+  },
+};