2023-8-22

src/components/XyMap/index.vue

@@ -11,7 +11,7 @@ export default {
     value: [String, Object, Array, Number, Boolean],
     resultFormat: {
       type: [String, Object, Array],
-      default: () => ['latitude', 'longitude'] //latitude纬度，longitude经度,formattedAddress地址
+      default: () => ['longitude','latitude'] //latitude纬度，longitude经度,formattedAddress地址
     }
   },
   data() {

src/layout/components/AppMain.vue

@@ -28,7 +28,7 @@ export default {
   overflow: hidden;
 }
 .fixed-header+.app-main {
-  padding: 50px 20px 0 20px;
+  padding: 50px 20px 20px 20px;
 }
 </style>
 

src/views/component/map.vue

@@ -1,82 +1,207 @@
 <template>
-  <div>
+  <div class="container">
-    <div class="search-bar">
+    <el-card class="search-bar">
+      <span class="search-name">区域</span>
       <el-select
+        clearable
+        style="width: 110px;"
         v-model="select.filter[0].value"
-        size="small"
+        size="mini"
         placeholder="请选择区域"
-        @change="areaPick"
       >
+<!--        @change="areaPick"-->
         <el-option
           v-for="(item, index) in wxAreas"
           :value="index + 1"
           :label="item"
         ></el-option>
       </el-select>
-    </div>
 
-    <div class="search" v-draggable="(status) => (dragging = status)">
+      <span class="search-name">地块类型</span>
-      <transition name="fade">
+      <el-select
+        clearable
+        style="width: 120px;"
+        v-model="select.filter[2].value"
+        size="mini"
+        placeholder="请选择地块类型"
+      >
+        <el-option
+          v-for="(item, index) in dikuaileixingTypes"
+          :value="item.value"
+          :label="item.key"
+        ></el-option>
+      </el-select>
+
+      <span class="search-name">建筑类型</span>
+      <el-select
+        clearable
+        style="width: 120px;"
+        v-model="select.filter[3].value"
+        size="mini"
+        placeholder="请选择建筑类型"
+      >
+        <el-option
+          v-for="(item, index) in jianzhuleixingTypes"
+          :value="item.value"
+          :label="item.key"
+        ></el-option>
+      </el-select>
+
+      <span class="search-name">资产类型</span>
+      <el-select
+        clearable
+        style="width: 120px;"
+        v-model="select.filter[4].value"
+        size="mini"
+        placeholder="请选择资产类型"
+      >
+        <el-option
+          v-for="(item, index) in zichanleixingTypes"
+          :value="item.value"
+          :label="item.key"
+        ></el-option>
+      </el-select>
+
+      <el-button size="mini" type="primary" style="margin-left: 10px;" @click="areaPick">查询</el-button>
+    </el-card>
+
+    <transition name="fade">
+      <div class="search-list" v-show="searchShow" v-loading="loading">
+        <div class="search-list__close" @click="searchShow = false">
+          <i class="el-icon-arrow-right"></i>
+        </div>
+
         <div
-          class="search-btn"
+          class="search-list__bar"
-          v-if="!searchShow"
-          @click="dragging ? '' : (searchShow = true)"
         >
-          查询
+          <Button size="small" type="success" :ghost="select.filter[5].value !== 1" @click="select.filter[5].value = 1,areaPick()">有建筑</Button>
+          <Button size="small" type="primary" :ghost="select.filter[5].value !== 2" @click="select.filter[5].value = 2,areaPick()">无建筑</Button>
+          <Button size="small" type="info" :ghost="!!select.filter[5].value" @click="select.filter[5].value = '',areaPick()">全部</Button>
+<!--          <RadioGroup v-model="select.filter[5].value" type="button" button-style="solid">-->
+<!--            <Radio label="是" :value="1"></Radio>-->
+<!--            <Radio label="否" :value="0"></Radio>-->
+<!--            <Radio label="全部" value=""></Radio>-->
+<!--          </RadioGroup>-->
+<!--          <Input-->
+<!--            ref="search-input"-->
+<!--            v-model="select.filter[1].value"-->
+<!--            style="width: 120px; margin-right: 10px"-->
+<!--            placeholder="地块名称"-->
+<!--            @mousedown="test"-->
+<!--          />-->
+<!--          <el-select-->
+<!--            v-model="select.filter[0].value"-->
+<!--            size="small"-->
+<!--            style="width: 120px; margin-right: 10px"-->
+<!--            placeholder="请选择区域"-->
+<!--          >-->
+<!--            <el-option-->
+<!--              v-for="(item, index) in wxAreas"-->
+<!--              :value="index + 1"-->
+<!--              :label="item"-->
+<!--            ></el-option>-->
+<!--          </el-select>-->
+<!--          <Button type="primary" @click="$refs['table'].getTableData(true)"-->
+<!--          >查询</Button-->
+<!--          >-->
         </div>
-      </transition>
 
-      <transition name="fade">
+        <ul v-if="list && list.length > 0">
-        <div class="search-list" v-if="searchShow">
+          <li v-for="(item,index) in list" :key="item.id" :style="{'border-color': openData.id === item.id ? 'blue' : ''}">
-          <div class="search-list__close" @click="searchShow = false">
+            <div class="left">
-            <i class="el-icon-arrow-right"></i>
+              <p>{{ item.dikuaimingcheng }}</p>
-          </div>
+              <Tag color="blue" v-if="item.suoshuqu">{{ wxAreas[item.suoshuqu-1] }}</Tag>
+              <Tag color="cyan" v-if="item.suoshuqu">{{ dikuaileixing(item.dikuaileixing) }}</Tag>
+              <Tag color="gold" v-if="item.jianzhuleixing">{{ jianzhuleixing(item.jianzhuleixing) }}</Tag>
+              <Tag color="magenta" v-if="item.zichanleixing">{{ zichanleixing(item.zichanleixing) }}</Tag>
+            </div>
+            <div class="right">
+              <Button type="primary" @click="pickRow({ row:item })">查看</Button>
+            </div>
+          </li>
+        </ul>
+        <el-empty v-else style="flex: 1;width: 100%;padding: 40px 60px;">
+        </el-empty>
+<!--        <div>-->
+<!--          <xy-table-->
+<!--            ref="table"-->
+<!--            :height="360"-->
+<!--            :action="index"-->
+<!--            :table-item="table"-->
+<!--            :req-opt="selectList"-->
+<!--            @row-click="pickRow"-->
+<!--          ></xy-table>-->
+<!--        </div>-->
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="search-list__close close-btn__hidden" v-show="!searchShow" @click="searchShow = true">
+        <i class="el-icon-arrow-left"></i>
+      </div>
+    </transition>
+<!--    <div class="search" v-draggable="(status) => (dragging = status)">-->
+<!--      <transition name="fade">-->
+<!--        <div-->
+<!--          class="search-btn"-->
+<!--          v-if="!searchShow"-->
+<!--          @click="dragging ? '' : (searchShow = true)"-->
+<!--        >-->
+<!--          查询-->
+<!--        </div>-->
+<!--      </transition>-->
 
-          <div
+<!--      <transition name="fade">-->
-            style="
+<!--        <div class="search-list" v-if="searchShow">-->
-              display: flex;
+<!--          <div class="search-list__close" @click="searchShow = false">-->
-              justify-content: flex-start;
+<!--            <i class="el-icon-arrow-right"></i>-->
-              flex-wrap: wrap;
+<!--          </div>-->
-              margin-bottom: 10px;
+
-            "
+<!--          <div-->
-          >
+<!--            style="-->
-            <Input
+<!--              display: flex;-->
-              ref="search-input"
+<!--              justify-content: flex-start;-->
-              v-model="selectList.filter[1].value"
+<!--              flex-wrap: wrap;-->
-              style="width: 120px; margin-right: 10px"
+<!--              margin-bottom: 10px;-->
-              placeholder="地块名称"
+<!--            "-->
-              @mousedown="test"
+<!--          >-->
-            />
+<!--            <Input-->
-            <el-select
+<!--              ref="search-input"-->
-              v-model="selectList.filter[0].value"
+<!--              v-model="selectList.filter[1].value"-->
-              size="small"
+<!--              style="width: 120px; margin-right: 10px"-->
-              style="width: 120px; margin-right: 10px"
+<!--              placeholder="地块名称"-->
-              placeholder="请选择区域"
+<!--              @mousedown="test"-->
-            >
+<!--            />-->
-              <el-option
+<!--            <el-select-->
-                v-for="(item, index) in wxAreas"
+<!--              v-model="selectList.filter[0].value"-->
-                :value="index + 1"
+<!--              size="small"-->
-                :label="item"
+<!--              style="width: 120px; margin-right: 10px"-->
-              ></el-option>
+<!--              placeholder="请选择区域"-->
-            </el-select>
+<!--            >-->
-            <Button type="primary" @click="$refs['table'].getTableData(true)"
+<!--              <el-option-->
-              >查询</Button
+<!--                v-for="(item, index) in wxAreas"-->
-            >
+<!--                :value="index + 1"-->
-          </div>
+<!--                :label="item"-->
+<!--              ></el-option>-->
+<!--            </el-select>-->
+<!--            <Button type="primary" @click="$refs['table'].getTableData(true)"-->
+<!--              >查询</Button-->
+<!--            >-->
+<!--          </div>-->
+
+<!--          <div>-->
+<!--            <xy-table-->
+<!--              ref="table"-->
+<!--              :height="360"-->
+<!--              :action="index"-->
+<!--              :table-item="table"-->
+<!--              :req-opt="selectList"-->
+<!--              @row-click="pickRow"-->
+<!--            ></xy-table>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </transition>-->
+<!--    </div>-->
 
-          <div>
-            <xy-table
-              ref="table"
-              :height="360"
-              :action="index"
-              :table-item="table"
-              :req-opt="selectList"
-              @row-click="pickRow"
-            ></xy-table>
-          </div>
-        </div>
-      </transition>
-    </div>
     <div class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>
 
     <div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
@@ -108,8 +233,9 @@ export default {
   name: "mapList",
   data() {
     return {
+      loading: false,
       dragging: false,
-      searchShow: false,
+      searchShow: true,
       selectList: {
         table_name: "assets",
         filter: [
@@ -122,7 +248,7 @@ export default {
             key: "dikuaimingcheng",
             op: "like",
             value: "",
-          },
+          }
         ],
       },
       select: {
@@ -133,6 +259,31 @@ export default {
             op: "eq",
             value: "",
           },
+          {
+            key: "dikuaimingcheng",
+            op: "like",
+            value: "",
+          },
+          {
+            key: "dikuaileixing",
+            op: "eq",
+            value: ""
+          },
+          {
+            key: "jianzhuleixing",
+            op: "eq",
+            value: ""
+          },
+          {
+            key: 'zichanleixing',
+            op: 'eq',
+            value: ''
+          },
+          {
+            key: 'zichanshifouyoujianzhu',
+            op: 'eq',
+            value: ''
+          }
         ],
       },
       customForm: {
@@ -175,7 +326,7 @@ export default {
     },
     index,
     areaPick(e) {
-      this.areaBG(this.wxAreas[e - 1]);
+      this.areaBG(this.wxAreas[this.select.filter[0].value - 1]);
       this.getList().then((res) => {
         this.setMapMarker();
       });
@@ -187,6 +338,7 @@ export default {
         let lat, lng;
         [lng, lat] = row.zichanweizhi.split(",");
         this.map.panTo([lng, lat]);
+        this.map.setZoom(30);
         this.infoWindow.open(this.map, [lng, lat]);
       } else {
         this.map.panTo(this.center);
@@ -194,6 +346,7 @@ export default {
       }
     },
     async getList() {
+      this.loading = true;
       const res = await index({
         page: 1,
         page_size: 9999,
@@ -201,6 +354,7 @@ export default {
       });
 
       this.list = res.data;
+      this.loading = false;
     },
     addCluster() {
       if (this.cluster) {
@@ -263,7 +417,7 @@ export default {
           };
           let markerImg = document.createElement("img");
           markerImg.src =
-            "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
+            item.zichanshifouyoujianzhu === 1 ? "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" : "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
           let markerSpan = document.createElement("span");
           markerSpan.setAttribute("class", "map-marker__text");
           markerSpan.innerText =
@@ -284,14 +438,14 @@ export default {
     },
     init(adcode = ["320200"]) {
       let winHeight = document
-        .querySelector(".app-main")
+        .querySelector("#app")
         ?.getBoundingClientRect()?.height;
-      this.mapHeight = winHeight - 50 - 20;
+      this.mapHeight = winHeight - 50 - 20 - 20;
 
       this.map = new AMap.Map("map", {
         center: this.center,
         mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
-        zoom: this.zoom,
+        zoom: 15,
       });
       // 行政区域加载
       this.areaBG(adcode);
@@ -305,7 +459,7 @@ export default {
       });
     },
     // 加载
-    areaBG(adcode) {
+    areaBG(adcode = ["320200"]) {
       AMap.service("AMap.DistrictSearch", () => {
         let opts = {
           subdistrict: 1, // 返回下一级行政区
@@ -322,7 +476,7 @@ export default {
           this.map.remove(this.polygons);
           this.polygons = [];
           // 获取边界信息
-          let bounds = result.districtList[0].boundaries;
+          let bounds = result.districtList[0]?.boundaries;
           if (bounds) {
             for (let i = 0, l = bounds.length; i < l; i++) {
               // 生成行政区划polygon
@@ -558,6 +712,30 @@ export default {
         return this.openData[i.field] || "/";
       };
     },
+    dikuaileixing () {
+      return function (dikuaileixing) {
+        return this.form.find(j => j.field === 'dikuaileixing')?._params.find(i => i.value == dikuaileixing)?.key || ''
+      }
+    },
+    dikuaileixingTypes () {
+      return this.form.find(j => j.field === 'dikuaileixing')?._params || []
+    },
+    jianzhuleixing () {
+      return function (jianzhuleixing) {
+        return this.form.find(j => j.field === 'jianzhuleixing')?._params.find(i => i.value == jianzhuleixing)?.key || ''
+      }
+    },
+    jianzhuleixingTypes () {
+      return this.form.find(j => j.field === 'jianzhuleixing')?._params || []
+    },
+    zichanleixing () {
+      return function (zichanleixing) {
+        return this.form.find(j => j.field === 'zichanleixing')?._params.find(i => i.value == zichanleixing)?.key || ''
+      }
+    },
+    zichanleixingTypes () {
+      return this.form.find(j => j.field === 'zichanleixing')?._params || []
+    },
   },
   created() {
     this.getFormDetail();
@@ -573,69 +751,175 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.container {
+
+  position: relative;
+}
+::v-deep .el-card__body {
+  padding: 8px;
+}
 .search-bar {
-  padding: 10px 0;
+  .search-name {
+    zoom: .9;
+
+    padding: 0 10px;
+  }
+
+  z-index: 2;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.close-btn__hidden {
+  filter: drop-shadow(2px 2px 5px #00000033);
+
+  z-index: 2;
+  position: absolute;
+  right: 0;
+  left: unset!important;
+  top: 8px;
 }
-.search {
+.search-list {
-  min-width: 50px;
+  background-color: #ebeef6;
-  min-height: 50px;
+  max-height: calc(100% - 16px);
-  position: fixed;
+  min-height: 200px;
-  top: 115px;
+  max-width: 355px;
-  left: 85px;
+  border-radius: 6px;
-  z-index: 99;
+  filter: drop-shadow(2px 2px 5px #00000055);
-
+  display: flex;
-  &-btn {
+  flex-direction: column;
-    color: #fff;
+
-    width: 50px;
+  //padding: 10px;
-    height: 50px;
+  z-index: 2;
-    background: $primaryColor;
+  position: absolute;
-    filter: drop-shadow(2px 2px 5px #000000aa);
+  right: 8px;
-    transition: all 0.3s;
+  top: 8px;
-    border-radius: 50px;
+
+  &__bar {
+    background-color: #fff;
+    display: flex;
+    border-radius: 6px 6px 0 0;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    padding: 8px 10px;
+
+    Button {
+      flex: 1;
+    }
+  }
+  &__close {
+    zoom: 0.85;
+    width: 40px;
+    height: 40px;
+    border-radius: 40px 0 0 40px;
     text-align: center;
-    line-height: 50px;
+    line-height: 40px;
+    font-size: 22px;
+    background: #ebeef6;
     cursor: pointer;
-    font-weight: bold;
 
     position: absolute;
-    top: 0;
+    top: 76px;
-    left: 0;
+    left: -30px;
-    &:hover {
-      transform: scale(1.1, 1.1);
-    }
   }
 
-  &-list {
+  ul {
-    max-width: 560px;
+    flex: 1;
-    border-radius: 6px;
+    overflow-y: scroll;
-    filter: drop-shadow(2px 2px 5px #00000055);
-    background: #fff;
 
     padding: 10px;
-    position: relative;
+    &::-webkit-scrollbar {
-
+      width: 4px;
-    &__close {
+    }
-      zoom: 0.85;
+    li {
-      width: 40px;
+      border-color: #0000;
-      height: 40px;
+      border-width: 1px;
-      border-radius: 40px 0 0 40px;
+      border-style: solid;
-      text-align: center;
+      border-radius: 4px;
-      line-height: 40px;
+      background-color: #fff;
-      font-size: 22px;
+      list-style: none;
-      background: #fff;
+      filter: drop-shadow(2px 2px 5px #00000022);
-      cursor: pointer;
+      display: flex;
-      transform: translateY(-50%);
+
-
+      padding: 8px;
-      position: absolute;
+      .left {
-      top: 10%;
+        flex: 1;
-      left: -24px;
+
+        margin-right: 20px;
+        & > p {
+          font-weight: 600;
+        }
+      }
+      & + li {
+
+        margin-top: 10px;
+      }
     }
   }
 }
+//.search {
+//  min-width: 50px;
+//  min-height: 50px;
+//  position: fixed;
+//  top: 115px;
+//  left: 85px;
+//  z-index: 99;
+//
+//  &-btn {
+//    color: #fff;
+//    width: 50px;
+//    height: 50px;
+//    background: $primaryColor;
+//    filter: drop-shadow(2px 2px 5px #000000aa);
+//    transition: all 0.3s;
+//    border-radius: 50px;
+//    text-align: center;
+//    line-height: 50px;
+//    cursor: pointer;
+//    font-weight: bold;
+//
+//    position: absolute;
+//    top: 0;
+//    left: 0;
+//    &:hover {
+//      transform: scale(1.1, 1.1);
+//    }
+//  }
+//
+//  &-list {
+//    max-width: 560px;
+//    border-radius: 6px;
+//    filter: drop-shadow(2px 2px 5px #00000055);
+//    background: #fff;
+//
+//    padding: 10px;
+//    position: relative;
+//
+//    &__close {
+//      zoom: 0.85;
+//      width: 40px;
+//      height: 40px;
+//      border-radius: 40px 0 0 40px;
+//      text-align: center;
+//      line-height: 40px;
+//      font-size: 22px;
+//      background: #fff;
+//      cursor: pointer;
+//      transform: translateY(-50%);
+//
+//      position: absolute;
+//      top: 10%;
+//      left: -24px;
+//    }
+//  }
+//}
 
 #map {
   border-radius: 4px;
   filter: drop-shadow(2px 2px 5px #00000033);
+
+  margin-top: 20px;
 }
 
 .fade-enter-active {
@@ -644,9 +928,11 @@ export default {
 
 @keyframes fade-in {
   0% {
+    transform: translateX(200px);
     opacity: 0;
   }
   100% {
+    transform: translateX(0px);
     opacity: 1;
   }
 }
@@ -656,9 +942,11 @@ export default {
 
 @keyframes fade-out {
   0% {
+    transform: translateX(0px);
     opacity: 1;
   }
   100% {
+    transform: translateX(200px);
     opacity: 0;
   }
 }