feat: 区域排行

mm/mm.config.js

@@ -178,6 +178,7 @@ module.exports = async (util) => {
                 .description(`排序方式, asc | desc`),
               q: joi.string().description(`模糊搜索`),
             })
+            .unknown(true)
             .description(`搜索项`),
         },
         async action(req, res, next) {

src/views/page2/cmap.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div id="container" class="g-bg1"></div>
+  </div>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+window.map = {}
+
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  async created() {},
+  mounted() {
+    this.initAMap()
+  },
+  unmounted() {
+    window.map.destroy()
+  },
+  methods: {
+    async initAMap() {
+      const json = await this.$http.get(
+        `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520600_full`
+      )
+      window._AMapSecurityConfig = {
+        securityJsCode: `a2017cdc059be6c03b430a3185098003`,
+      }
+      AMapLoader.load({
+        key: `6260c9b9128ad802001c8a5ff18bde16`, // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+      })
+        .then((AMap) => {
+          let content = [
+            `<div class='info_box_contant'> ` + `vo.aname` + ` </div>`,
+          ]
+          function addPolygon(data) {
+            const { name, center } = data.properties
+            const path = data.geometry.coordinates
+            let polygon = new AMap.Polygon({
+              path: path,
+              fillColor: `#ccebc5`,
+              strokeOpacity: 1,
+              fillOpacity: 0,
+              strokeColor: `#2b8cbe`,
+              strokeWeight: 4,
+              // strokeStyle: `dashed`,
+              strokeDasharray: [5, 5],
+              lineJoin: `round`,
+              lineCap: `round`,
+            })
+            polygon.on(`mouseover`, (e) => {
+              console.log(`mouseover`)
+              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
+              if (window.map.getZoom() <= 11) {
+                // infoWindow.open(window.map, [e.lnglat.lng, e.lnglat.lat]) // 后面的参数指的是经纬度，在此显示窗口
+                infoWindow.open(window.map, center) // 后面的参数指的是经纬度，在此显示窗口
+                polygon.setOptions({
+                  fillOpacity: 0.7,
+                  fillColor: `#7bccc4`,
+                })
+              }
+            })
+            polygon.on(`click`, (e) => {
+              console.log(`点击了`, data.properties)
+            })
+            polygon.on(`mouseout`, () => {
+              polygon.setOptions({
+                fillOpacity: 0,
+                fillColor: `#ccebc5`,
+              })
+              infoWindow.close()
+            })
+            window.map.add(polygon)
+          }
+          const infoWindow = new AMap.InfoWindow({
+            isCustom: true, // 使用自定义窗体
+            content: content.join(`<br>`),
+            offset: new AMap.Pixel(-15, -25),
+          })
+          window.map = new AMap.Map(`container`, {
+            // resizeEnable: true,
+            // 设置地图容器id
+            // viewMode: `2D`, // 2D视图
+            // mapStyle: `amap://styles/whitesmoke`, // 卫星地图样式
+            viewMode: `3D`, // 是否为3D地图模式
+            // zoom: 7, // 初始化地图级别
+            zoom: 9.22, // 初始化地图级别
+            // center: [107.943579, 30.131735], // 初始化地图中心点位置
+            center: [108.597461, 28.047503], // 初始化地图中心点位置
+            resizeEnable: true,
+            layers: [
+              new AMap.TileLayer.Satellite(),
+              new AMap.TileLayer.RoadNet(),
+              // 谷歌图
+              // new AMap.TileLayer({
+              //   // getTileUrl: `//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali`,
+              //   getTileUrl: `http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
+              //   zIndex: 20,
+              //   zoom: 17,
+              // }),
+              // new AMap.TileLayer({
+              //   getTileUrl: `//mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
+              //   zIndex: 20,
+              //   zoom: 17,
+              // }),
+              // 天地图
+              // new AMap.TileLayer({
+              //   getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
+              //   zIndex: 20,
+              //   zoom: 17,
+              // }),
+              // new AMap.TileLayer({
+              //   getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
+              //   zIndex: 20,
+              //   zoom: 17,
+              // }),
+            ],
+            // zooms: [16, 20],
+          })
+          window.map.setFeatures([`point`]) // 单一种类要素显示
+          let list = json.features.map((item) => item)
+          list.forEach((item) => {
+            addPolygon(item)
+          })
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    },
+    tabChange(val) {
+      if (val === 0) {
+        this.$router.push(`/page1`)
+      }
+      console.log(`val`, val)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+#container {
+  position: absolute;
+  padding: 0px;
+  margin: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 8;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 9;
+    background: radial-gradient(transparent 40vh, rgba(0, 0, 0, 1));
+    pointer-events: none;
+  }
+}
+</style>

src/views/page2/index.vue

@@ -1,143 +1,35 @@
 <template>
   <div>
     <bgBox class="bgBox" bgType="g-bg2" :tabChange="tabChange" :tabIndex="1">
-      <div id="container" class="g-bg1"></div>
+      <leftBox class="lefBox" />
+      <cmap />
     </bgBox>
   </div>
 </template>
 
 <script>
 import bgBox from '@/components/bgBox/index.vue'
-import AMapLoader from '@amap/amap-jsapi-loader'
+import cmap from './cmap.vue'
+import leftBox from './leftBox.vue'
 
 window.map = {}
 
 export default {
   components: {
     bgBox,
+    leftBox,
+    cmap,
   },
   data() {
     return {}
   },
   computed: {},
   async created() {},
-  mounted() {
-    this.initAMap()
-  },
+  mounted() {},
   unmounted() {
     window.map.destroy()
   },
   methods: {
-    async initAMap() {
-      const json = await this.$http.get(
-        `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520600_full`
-      )
-      window._AMapSecurityConfig = {
-        securityJsCode: `a2017cdc059be6c03b430a3185098003`,
-      }
-      AMapLoader.load({
-        key: `6260c9b9128ad802001c8a5ff18bde16`, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
-      })
-        .then((AMap) => {
-          let content = [
-            `<div class='info_box_contant'> ` + `vo.aname` + ` </div>`,
-          ]
-          function addPolygon(data) {
-            const { name, center } = data.properties
-            const path = data.geometry.coordinates
-            let polygon = new AMap.Polygon({
-              path: path,
-              fillColor: `#ccebc5`,
-              strokeOpacity: 1,
-              fillOpacity: 0,
-              strokeColor: `#2b8cbe`,
-              strokeWeight: 4,
-              // strokeStyle: `dashed`,
-              strokeDasharray: [5, 5],
-              lineJoin: `round`,
-              lineCap: `round`,
-            })
-            polygon.on(`mouseover`, (e) => {
-              console.log(`mouseover`)
-              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
-              if (window.map.getZoom() <= 11) {
-                // infoWindow.open(window.map, [e.lnglat.lng, e.lnglat.lat]) // 后面的参数指的是经纬度，在此显示窗口
-                infoWindow.open(window.map, center) // 后面的参数指的是经纬度，在此显示窗口
-                polygon.setOptions({
-                  fillOpacity: 0.7,
-                  fillColor: `#7bccc4`,
-                })
-              }
-            })
-            polygon.on(`click`, (e) => {
-              console.log(`点击了`, data.properties)
-            })
-            polygon.on(`mouseout`, () => {
-              polygon.setOptions({
-                fillOpacity: 0,
-                fillColor: `#ccebc5`,
-              })
-              infoWindow.close()
-            })
-            window.map.add(polygon)
-          }
-          const infoWindow = new AMap.InfoWindow({
-            isCustom: true, // 使用自定义窗体
-            content: content.join(`<br>`),
-            offset: new AMap.Pixel(-15, -25),
-          })
-          window.map = new AMap.Map(`container`, {
-            // resizeEnable: true,
-            // 设置地图容器id
-            // viewMode: `2D`, // 2D视图
-            // mapStyle: `amap://styles/whitesmoke`, // 卫星地图样式
-            viewMode: `3D`, // 是否为3D地图模式
-            // zoom: 7, // 初始化地图级别
-            zoom: 9.22, // 初始化地图级别
-            // center: [107.943579, 30.131735], // 初始化地图中心点位置
-            center: [108.597461, 28.047503], // 初始化地图中心点位置
-            resizeEnable: true,
-            layers: [
-              // new AMap.TileLayer.Satellite(),
-              // new AMap.TileLayer.RoadNet(),
-              // 谷歌图
-              // new AMap.TileLayer({
-              //   // getTileUrl: `//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali`,
-              //   getTileUrl: `http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
-              //   zIndex: 20,
-              //   zoom: 17,
-              // }),
-              // new AMap.TileLayer({
-              //   getTileUrl: `//mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
-              //   zIndex: 20,
-              //   zoom: 17,
-              // }),
-              // 天地图
-              new AMap.TileLayer({
-                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
-                zIndex: 20,
-                zoom: 17,
-              }),
-              new AMap.TileLayer({
-                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
-                zIndex: 20,
-                zoom: 17,
-              }),
-            ],
-            // zooms: [16, 20],
-          })
-          window.map.setFeatures([`point`]) // 单一种类要素显示
-          let list = json.features.map((item) => item)
-          list.forEach((item) => {
-            addPolygon(item)
-          })
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
     tabChange(val) {
       if (val === 0) {
         this.$router.push(`/page1`)
@@ -149,32 +41,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#container {
-  position: absolute;
-  padding: 0px;
-  margin: 0px;
-  width: 100vw;
-  height: 100vh;
-  z-index: 8;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
+.bgBox {
+  .lefBox {
     position: absolute;
-    z-index: 9;
-    background: radial-gradient(transparent 80vh, rgba(0, 0, 0, 1));
-    pointer-events: none;
+    z-index: 10;
+    left: 47px;
+    top: 120px;
   }
-}
-.bgBox {
   ::v-deep {
     .top {
       z-index: 10;
     }
     .box {
-      background-color: #f00;
       left: 0;
       top: 0;
       padding: 0;

src/views/page2/item.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="list">
+    <div class="containerBox" v-for="(item, index) in list" :key="index">
+      <div class="left">
+        <p class="title">{{ item.名称 }}</p>
+        <p>种植数量：{{ item.已种植 }}</p>
+        <p>目标完成率：{{ item.完成率 }}%</p>
+        <p>地址：{{ item.地址 }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.图片[0]" alt="风景图" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: `LayoutExample`,
+  data() {
+    return {}
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  async created() {},
+}
+</script>
+
+<style scoped lang="less">
+.list {
+  padding: 16px;
+  width: 357px;
+  height: 750px;
+  overflow: auto;
+  .containerBox {
+    cursor: pointer;
+    margin-top: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    background: rgba(168, 168, 168, 0.15);
+    backdrop-filter: blur(8px);
+    padding: 10px;
+    .left {
+      .title {
+        font-size: 20px;
+        line-height: 1.2em;
+        color: #fff;
+      }
+      p {
+        padding: 0;
+        margin: 0;
+        color: #bec1cc;
+        line-height: 1.5em;
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+    }
+    .right {
+      padding-left: 10px;
+      img {
+        width: 105px;
+        height: 105px;
+        border-radius: 10px;
+      }
+    }
+  }
+}
+</style>

src/views/page2/leftBox.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="leftBox">
+    <div class="search-bar">
+      <input
+        v-model="leftBox.input"
+        type="text"
+        placeholder="输入关键字进行搜索"
+        @keyup.enter="searchFn"
+      />
+      <div class="icons">
+        <span class="icon i-mdi-search" @click="searchFn"></span>
+        <span class="icon i-mdi-delete" @click="clearFn"></span>
+        <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
+      </div>
+    </div>
+    <item :list="leftBox.list" />
+  </div>
+</template>
+
+<script>
+import item from './item.vue'
+
+export default {
+  data() {
+    return {
+      leftBox: {
+        input: ``,
+        list: [],
+        sortIndex: 0,
+        sortList: [`已种植`, `完成率`],
+      },
+    }
+  },
+  components: {
+    item,
+  },
+  async created() {
+    this.searchFn()
+  },
+  methods: {
+    async searchFn() {
+      console.log(`search`, this.leftBox.input)
+      const data = await this.$http.get(`/base`, {
+        params: {
+          _sort:
+            this.leftBox.sortList[
+              this.leftBox.sortIndex % this.leftBox.sortList.length
+            ] || undefined,
+          名称_like: this.leftBox.input || undefined,
+        },
+      })
+      this.leftBox.list = data
+    },
+    clearFn() {
+      this.leftBox.input = ``
+      this.searchFn()
+      console.log(`clearFn`)
+    },
+    sortFn() {
+      this.leftBox.sortIndex++
+      this.searchFn()
+      console.log(`sortFn`)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.leftBox {
+  height: 845px;
+  background: rgba(48, 42, 42, 0.3);
+  backdrop-filter: blur(8px);
+  .search-bar {
+    display: flex;
+    align-items: center;
+    background-color: #2c2f3f;
+    height: 48px;
+    padding: 10px;
+    border-radius: 4px;
+    background: rgba(37, 34, 59, 0.31);
+    border: 0.5px solid;
+    box-sizing: border-box;
+    border-image: linear-gradient(
+        180deg,
+        #8a8989,
+        #bec1cc 27%,
+        rgba(255, 255, 255, 0.72) 59%,
+        #bec1cc 82%,
+        rgba(255, 255, 255, 0.76) 99%
+      )
+      0.5 0.5;
+
+    input {
+      flex: 1;
+      padding: 10px;
+      border: none;
+      background-color: transparent;
+      color: #fff;
+      font-size: 14px;
+      height: 35px;
+      line-height: 35px;
+      outline: none;
+    }
+
+    .icons {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+
+      span {
+        margin-right: 10px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .icon {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>