2023-8-18

src/components/XyMap/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <avue-map v-model="map" placeholder="请选择地图"></avue-map>
+    <p style="zoom: .85;">{{ value }}</p>
   </div>
 </template>
 

src/draggable.js

@@ -12,7 +12,7 @@ export const defineDirective = () => {
 
       el.onmousedown = e => {
         e.stopPropagation();
-        e.preventDefault();
+        //e.preventDefault();
         //鼠标按下，计算当前元素距离可视区的距离
         let disX = e.clientX - dom.offsetLeft;
         let disY = e.clientY - dom.offsetTop;
@@ -47,10 +47,10 @@ export const defineDirective = () => {
           }
 
 
+          setTimeout(() => {
+            binding.value(false)
+          },500)
         };
-        el.onclick = e => {
-          binding.value(false)
-        }
         //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
         //return false;
       };

src/views/component/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-page-header
-      :content="$route.meta.title"
+      :content="$route.meta.title + (detail.dikuaimingcheng ? ' - ' : '') + detail.dikuaimingcheng"
       style="
         padding: 1em;
         font-size: 1em;
@@ -16,8 +16,8 @@
 
     <el-row :gutter="20">
       <el-col :span="14">
-        <el-card v-if="detail.id_assets_picture_files_file_id_relation" style="margin-bottom: 20px;">
+        <el-card v-if="detail.id_assets_picture_files_file_id_relation && detail.id_assets_picture_files_file_id_relation.length > 0">
-          <div class="el-descriptions__header el-descriptions__title">图集</div>
+          <div class="el-descriptions__header el-descriptions__title">资产图集</div>
           <el-carousel trigger="click" height="150px">
             <el-carousel-item v-for="item in detail.id_assets_picture_files_file_id_relation">
               <el-image
@@ -29,24 +29,69 @@
           </el-carousel>
         </el-card>
         <el-card>
-          <el-descriptions title="详情" :column="2" :label-style="{'font-weight': '600'}">
+          <el-descriptions title="基本信息" :column="2" :label-style="{'font-weight': '600'}">
-            <el-descriptions-item v-for="item in fields" :label="item.name">{{
+            <el-descriptions-item v-for="item in fields" :label="item.name" v-if="!['file','picture'].find(j => j === item.field)">{{
                 contentFormat(item)
-              }}</el-descriptions-item>
+              }}{{ units.get(item.field) }}</el-descriptions-item>
           </el-descriptions>
         </el-card>
+
+        <el-card>
+          <div class="el-descriptions__header el-descriptions__title">资产相关附件</div>
+          <template>
+            <template v-if="detail.id_assets_file_files_file_id_relation && detail.id_assets_file_files_file_id_relation.length > 0">
+              <div v-for="item in detail.id_assets_file_files_file_id_relation">
+                <a :download="item.url">{{ item.original_name }}</a>
+              </div>
+            </template>
+            <template v-else>
+              <el-empty description="无"></el-empty>
+            </template>
+          </template>
+        </el-card>
+
+
+        <el-card>
+          <div class="el-descriptions__header el-descriptions__title">资产证件图片</div>
+          <template>
+            <template  v-if="detail.id_assets_picture_files_file_id_relation && detail.id_assets_picture_files_file_id_relation.length > 0">
+              <div v-for="item in detail.id_assets_picture_files_file_id_relation">
+                <el-image
+                  style="width: 100%; height: 100%;"
+                  :src="item.url"
+                  :preview-src-list="picList"
+                  fit="contain"></el-image>
+              </div>
+            </template>
+            <template v-else>
+              <el-empty description="无"></el-empty>
+            </template>
+          </template>
+        </el-card>
       </el-col>
       <el-col :span="10" >
         <el-card>
           <div class="el-descriptions__header el-descriptions__title">资产历史</div>
-          <Timeline>
+          <template>
-            <TimelineItem v-for="(item,index) in histories" :key="item.id">
+            <template v-if="histories && histories.length > 0">
-              <p>{{ item.riqi }}</p>
+              <Timeline>
-              <div v-html="item.neirong"></div>
+                <TimelineItem v-for="(item,index) in histories" :key="item.id">
-              <el-image style="width: 78%;height: 160px;" v-for="img in item.id_his_tupian_files_asset_history_id_relation" :src="img.url" fit="contain"></el-image>
+                  <p>{{ item.riqi }}</p>
-            </TimelineItem>
+                  <div v-html="item.neirong"></div>
-
+                  <el-image style="width: 78%;height: 160px;" v-for="img in item.id_his_tupian_files_asset_history_id_relation" :src="img.url" fit="contain"></el-image>
-          </Timeline>
+                </TimelineItem>
+
+              </Timeline>
+            </template>
+            <template v-else>
+              <el-empty description="无"></el-empty>
+            </template>
+          </template>
+        </el-card>
+        <el-card>
+          <div class="el-descriptions__header el-descriptions__title">资产地图</div>
+
+          <div class="map" id="detail-map" style="width: 100%;height: 300px;"></div>
         </el-card>
       </el-col>
     </el-row>
@@ -61,6 +106,9 @@ import { listdept } from '@/api/system/department'
 export default {
   data() {
     return {
+      center: [120.283692, 31.614211],
+      marker: {},
+
       histories: [],
       picList: [],
       detail: {},
@@ -72,9 +120,52 @@ export default {
       },
 
 
+      units: new Map([
+        ['jianzhu','m²'],
+        ['jianzhugaodu','m'],
+        ['dikuaizongjia','元'],
+        ['dikuaimianji','m²'],
+        ['muqianjunjia','元'],
+      ])
     }
   },
   methods: {
+
+    init() {
+      this.map = new AMap.Map("detail-map", {
+        center: this.center,
+        mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
+        zoom: 60
+      });
+
+      this.map.remove(this.marker);
+      if (this.detail.zichanweizhi) {
+        let lat, lng;
+        [lng, lat] = this.detail.zichanweizhi.split(",");
+        let marker = new AMap.Marker({
+          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+          position: [Number(lng), Number(lat)],
+          offset: new AMap.Pixel(-13, -30),
+        });
+        let markerContent = document.createElement("div");
+        markerContent.setAttribute("class", "map-marker");
+        let markerImg = document.createElement("img");
+        markerImg.src =
+          "//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 = this.detail.dikuaimingcheng;
+        markerContent.appendChild(markerImg);
+        markerContent.appendChild(markerSpan);
+        marker.setContent(markerContent);
+
+        this.marker = marker;
+        this.map.add(this.marker)
+        this.map.setFitView(this.marker);
+      }
+    },
+
+
     async getFields () {
       if (this.$route.meta.params?.custom_form) {
         let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
@@ -158,6 +249,7 @@ export default {
         table_name: this.customForm.tableName
       })
       this.detail = detail
+      this.init();
 
       this.picList = detail?.id_assets_picture_files_file_id_relation?.map(i => i.url)
     },
@@ -215,4 +307,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
+::v-deep .el-card {
+  margin-bottom: 20px;
+}
+::v-deep .el-empty__image {
+  width: 120px;
+}
+</style>
+<style lang="scss">
+.map-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__text {
+    background: #fff;
+    zoom: 0.9;
+    padding: 2px 6px;
+    border-radius: 4px;
+    white-space: nowrap;
+    filter: drop-shadow(2px 2px 5px #00000055);
+  }
+}
 </style>

src/views/component/imports.vue

@@ -129,6 +129,11 @@ export default {
             width: 200
           };
         });
+        this.table.unshift({
+          key: 'id',
+          title: 'id',
+          width: 140
+        })
       }
     },
   },

src/views/component/map.vue

@@ -2,14 +2,14 @@
   <div>
     <div class="search-bar">
       <el-select
-        v-model="nowCity"
+        v-model="select.filter[0].value"
         size="small"
         placeholder="请选择区域"
         @change="areaPick"
       >
         <el-option
-          v-for="item in wxAreas"
+          v-for="(item,index) in wxAreas"
-          :value="item"
+          :value="index+1"
           :label="item"
         ></el-option>
       </el-select>
@@ -41,10 +41,24 @@
             "
           >
             <Input
-              v-model="select.name"
+              ref="search-input"
-              style="width: 65px; margin-right: 10px"
+              v-model="selectList.filter[1].value"
+              style="width: 120px; margin-right: 10px"
               placeholder="地块名称"
+              @mousedown="test"
             />
+            <el-select
+              v-model="selectList.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
             >
@@ -56,7 +70,7 @@
               :height="360"
               :action="index"
               :table-item="table"
-              :req-opt="select"
+              :req-opt="selectList"
               @row-click="pickRow"
             ></xy-table>
           </div>
@@ -66,12 +80,16 @@
     <div class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>
 
     <div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
-      <div>
+      <el-scrollbar style="height: 260px;width: 100%">
-        <div v-for="item in form">
+        <div class="infoWindow-container">
-          <p>{{ item.name }}</p>
+          <div class="infoWindow-container__item" v-for="item in form">
-          <p>{{ contentFormat(item) }}</p>
+            <p>{{ item.name }}</p>
+            <p>{{ contentFormat(item) }}{{ units.get(item.field) }}</p>
+          </div>
         </div>
-      </div>
+      </el-scrollbar>
+
+      <p class="to-detail" @click="$router.push('/assetsDetail?id='+openData.id)">查看详情</p>
     </div>
   </div>
 </template>
@@ -86,8 +104,30 @@ export default {
     return {
       dragging: false,
       searchShow: false,
+      selectList: {
+        table_name: "assets",
+        filter: [
+          {
+            key: 'suoshuqu',
+            op: 'eq',
+            value: ''
+          },
+          {
+            key: 'dikuaimingcheng',
+            op: 'like',
+            value: ''
+          }
+        ]
+      },
       select: {
         table_name: "assets",
+        filter: [
+          {
+            key: 'suoshuqu',
+            op: 'eq',
+            value: ''
+          }
+        ]
       },
       customForm: {
         customFormId: "",
@@ -97,7 +137,7 @@ export default {
       table: [],
       list: [],
       mapHeight: 0,
-      center: [119.597897, 31.723247],
+      center: [120.283692, 31.614211],
       isShowInfoWindow: false,
       openData: {},
       infoWindow: null,
@@ -105,22 +145,36 @@ export default {
       cluster: null,
       polygons: [],
       markerList: [],
-      nowCity: "",
       wxAreas: [
-        "锡山区",
+        "宜兴市",
         "惠山区",
-        "滨湖区",
-        "梁溪区",
         "新吴区",
+        "梁溪区",
         "江阴市",
-        "宜兴市",
+        "滨湖区",
+        "锡山区",
       ],
+      units: new Map([
+        ['jianzhu','m²'],
+        ['jianzhugaodu','m'],
+        ['dikuaizongjia','元'],
+        ['dikuaimianji','m²'],
+        ['muqianjunjia','元'],
+      ])
     };
   },
   methods: {
+    test () {
+      console.log(
+        this.$refs['search-input'].$el
+      )
+    },
     index,
     areaPick(e) {
-      this.areaBG(e);
+      this.areaBG(this.wxAreas[e-1]);
+      this.getList().then(res => {
+        this.setMapMarker()
+      })
     },
     pickRow({ row }) {
       this.isShowInfoWindow = true;
@@ -443,12 +497,15 @@ export default {
               };
             }
           }
+
+          let alignLeft = ['dikuaimingcheng']
           this.table.push(
             Object.assign(
               {
                 prop: i.field,
                 label: i.name,
                 width: i.width,
+                align: alignLeft.find(m => m === i.field) ? 'left' : 'center',
                 fixed: i.is_fixed,
               },
               linkOb
@@ -539,7 +596,7 @@ export default {
   }
 
   &-list {
-    max-width: 500px;
+    max-width: 560px;
     border-radius: 6px;
     filter: drop-shadow(2px 2px 5px #00000055);
     background: #fff;
@@ -598,20 +655,15 @@ export default {
 </style>
 <style lang="scss">
 #infoWindow {
-  min-width: 140px;
+  min-width: 260px;
-  max-height: 240px;
+  max-height: 260px;
-  overflow-y: scroll;
+  box-sizing: border-box;
-  position: relative;
   filter: drop-shadow(2px 2px 5px #00000055);
-  border-radius: 4px;
+  border-radius: 0 4px 4px 4px;
   background: #fff;
 
-  padding: 20px;
   animation: fade-in 0.4s forwards;
-
+  position: relative;
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
 }
 @keyframes fade-in {
   from {
@@ -621,11 +673,25 @@ export default {
     opacity: 1;
   }
 }
-#infoWindow > div {
+#infoWindow > p {
+  background: $primaryColor;
+  color: #fff;
+  padding: 3px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  border-radius: 6px 6px 0 0 ;
+  transform: translateY(-100%);
+
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.infoWindow-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 10px;
 
+  padding: 20px;
   & > div > p:nth-child(1) {
     font-weight: 600;
     padding-bottom: 6px;

src/views/component/table.vue

@@ -565,12 +565,15 @@ export default {
               };
             }
           }
+
+          let alignLeft = ['dikuaimingcheng']
           this.table.push(
             Object.assign(
               {
                 prop: i.field,
                 label: i.name,
                 width: i.width,
+                align: alignLeft.find(m => m === i.field) ? 'left' : 'center',
                 fixed: i.is_fixed,
               },
               linkOb