From 828c6cffd83d49ba9528f3009476d710cd0842ab Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 21 Aug 2023 16:17:21 +0800
Subject: [PATCH] 2023-8-21

---
 src/views/component/detail.vue | 294 ++++++++++++++++++++-------------
 src/views/component/map.vue    | 131 ++++++++-------
 2 files changed, 247 insertions(+), 178 deletions(-)

diff --git a/src/views/component/detail.vue b/src/views/component/detail.vue
index 4d069b3..5fcb2c0 100644
--- a/src/views/component/detail.vue
+++ b/src/views/component/detail.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <el-page-header
-      :content="$route.meta.title + (detail.dikuaimingcheng ? ' - ' + detail.dikuaimingcheng : '')"
+      :content="
+        $route.meta.title +
+        (detail.dikuaimingcheng ? ' - ' + detail.dikuaimingcheng : '')
+      "
       style="
         padding: 1em;
         font-size: 1em;
@@ -16,30 +19,55 @@
 
     <el-row :gutter="20">
       <el-col :span="14">
-        <el-card v-if="detail.id_assets_atlas_files_asset_id_relation && detail.id_assets_atlas_files_asset_id_relation.length > 0">
-          <div class="el-descriptions__header el-descriptions__title">资产图集</div>
+        <el-card
+          v-if="
+            detail.id_assets_atlas_files_asset_id_relation &&
+            detail.id_assets_atlas_files_asset_id_relation.length > 0
+          "
+        >
+          <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_atlas_files_asset_id_relation">
+            <el-carousel-item
+              v-for="item in detail.id_assets_atlas_files_asset_id_relation"
+            >
               <el-image
-                style="width: 100%; height: 100%;"
+                style="width: 100%; height: 100%"
                 :src="item.url"
                 :preview-src-list="picList"
-                fit="cover"></el-image>
+                fit="cover"
+              ></el-image>
             </el-carousel-item>
           </el-carousel>
         </el-card>
         <el-card>
-          <el-descriptions title="基本信息" :column="2" :label-style="{'font-weight': '600'}">
-            <el-descriptions-item v-for="item in fields" :label="item.name" v-if="!['file','picture'].find(j => j === item.field)">{{
-                contentFormat(item)
-              }}{{ units.get(item.field) }}</el-descriptions-item>
+          <el-descriptions
+            title="基本信息"
+            :column="2"
+            :label-style="{ 'font-weight': '600' }"
+          >
+            <el-descriptions-item
+              v-for="item in fields"
+              :label="item.name"
+              v-if="!['file', 'picture'].find((j) => j === item.field)"
+              >{{ contentFormat(item)
+              }}{{ units.get(item.field) }}</el-descriptions-item
+            >
           </el-descriptions>
         </el-card>
 
         <el-card>
-          <div class="el-descriptions__header el-descriptions__title">资产相关附件</div>
+          <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">
+            <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>
@@ -50,17 +78,26 @@
           </template>
         </el-card>
 
-
         <el-card>
-          <div class="el-descriptions__header el-descriptions__title">资产证件图片</div>
+          <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">
+            <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%;"
+                  style="width: 100%; height: 100%"
                   :src="item.url"
                   :preview-src-list="picList"
-                  fit="contain"></el-image>
+                  fit="contain"
+                ></el-image>
               </div>
             </template>
             <template v-else>
@@ -69,18 +106,24 @@
           </template>
         </el-card>
       </el-col>
-      <el-col :span="10" >
+      <el-col :span="10">
         <el-card>
-          <div class="el-descriptions__header el-descriptions__title">资产历史</div>
+          <div class="el-descriptions__header el-descriptions__title">
+            资产历史
+          </div>
           <template>
             <template v-if="histories && histories.length > 0">
               <Timeline>
-                <TimelineItem v-for="(item,index) in histories" :key="item.id">
+                <TimelineItem v-for="(item, index) in histories" :key="item.id">
                   <p>{{ item.riqi }}</p>
                   <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>
+                  <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>
                 </TimelineItem>
-
               </Timeline>
             </template>
             <template v-else>
@@ -89,9 +132,15 @@
           </template>
         </el-card>
         <el-card>
-          <div class="el-descriptions__header el-descriptions__title">资产地图</div>
+          <div class="el-descriptions__header el-descriptions__title">
+            资产地图
+          </div>
 
-          <div class="map" id="detail-map" style="width: 100%;height: 300px;"></div>
+          <div
+            class="map"
+            id="detail-map"
+            style="width: 100%; height: 300px"
+          ></div>
         </el-card>
       </el-col>
     </el-row>
@@ -101,10 +150,10 @@
 <script>
 import { show, index } from "@/api/system/baseForm";
 import { show as formShow } from "@/api/system/customForm";
-import { getparameter } from '@/api/system/dictionary'
-import { listdept } from '@/api/system/department'
+import { getparameter } from "@/api/system/dictionary";
+import { listdept } from "@/api/system/department";
 export default {
-  name: 'detail',
+  name: "detail",
   data() {
     return {
       center: [120.283692, 31.614211],
@@ -119,23 +168,21 @@ export default {
         tableName: "",
       },
 
-
       units: new Map([
-        ['jianzhumianji','m²'],
-        ['jianzhugaodu','m'],
-        ['dikuaizongjia','元'],
-        ['dikuaimianji','m²'],
-        ['muqianjunjia','元'],
-      ])
-    }
+        ["jianzhumianji", "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
+        zoom: 60,
       });
 
       this.map.remove(this.marker);
@@ -160,13 +207,12 @@ export default {
         marker.setContent(markerContent);
 
         this.marker = marker;
-        this.map.add(this.marker)
+        this.map.add(this.marker);
         this.map.setFitView(this.marker);
       }
     },
 
-
-    async getFields () {
+    async getFields() {
       if (this.$route.meta.params?.custom_form) {
         let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
         try {
@@ -179,20 +225,22 @@ export default {
       }
 
       const res = await formShow({ id: this.customForm.customFormId }, false);
-      this.fields = res.fields.sort((a,b) => a.sort - b.sort)
-      this.relation = res.relation
-
+      this.fields = res.fields.sort((a, b) => a.sort - b.sort);
+      this.relation = res.relation;
 
       //字段处理
       //初始表白名单
       let baseTable = new Map([
-        ['departments', async () => {
-          const res = await listdept()
-          return res
-        }],
-        ['admins',[]]
-      ])
-      let { fields, relation } = this
+        [
+          "departments",
+          async () => {
+            const res = await listdept();
+            return res;
+          },
+        ],
+        ["admins", []],
+      ]);
+      let { fields, relation } = this;
       if (
         !fields ||
         !relation ||
@@ -201,110 +249,122 @@ export default {
       ) {
         throw new Error("fields或relation格式错误");
       }
-      fields.sort((a,b) => a.sort - b.sort).forEach(i => {
-        i._relations = relation.find(
-          (j) => j.link_table_name.split("_")[1] === i.field
-        );
-        if (i.select_item && typeof i.select_item === "object") {
-          let keys = Object.keys(i.select_item);
-          i._params = keys.map((key) => {
-            return {
-              key,
-              value: /^\d*$/.test(i.select_item[key])
-                ? Number(i.select_item[key])
-                : i.select_item[key],
-            };
-          });
-        }
-        if (i.edit_input === 'file' || i.edit_input === 'files') {
-          return
-        }
-        if (i._relations) {
-          if (baseTable.get(i._relations.link_table_name)) {
-            baseTable
-              .get(i._relations.link_table_name)()
-              .then((res) => {
-                i._params = res.data;
-              });
-          } else {
-            i._params = i._relations.parameter_id
-              ? getparameter({ id: i._relations.parameter_id }, false).then(
-                (res) => {
-                  i._params = res.detail;
-                }
-              )
-              : this.index({
-                table_name: i._relations.link_table_name,
-                page: 1,
-                page_size: 9999,
-              }).then((res) => {
-                i._params = res.data;
-              });
+      fields
+        .sort((a, b) => a.sort - b.sort)
+        .forEach((i) => {
+          i._relations = relation.find(
+            (j) => j.link_table_name.split("_")[1] === i.field
+          );
+          if (i.select_item && typeof i.select_item === "object") {
+            let keys = Object.keys(i.select_item);
+            i._params = keys.map((key) => {
+              return {
+                key,
+                value: /^\d*$/.test(i.select_item[key])
+                  ? Number(i.select_item[key])
+                  : i.select_item[key],
+              };
+            });
           }
-        }
-      });
+          if (i.edit_input === "file" || i.edit_input === "files") {
+            return;
+          }
+          if (i._relations) {
+            if (baseTable.get(i._relations.link_table_name)) {
+              baseTable
+                .get(i._relations.link_table_name)()
+                .then((res) => {
+                  i._params = res.data;
+                });
+            } else {
+              i._params = i._relations.parameter_id
+                ? getparameter({ id: i._relations.parameter_id }, false).then(
+                    (res) => {
+                      i._params = res.detail;
+                    }
+                  )
+                : this.index({
+                    table_name: i._relations.link_table_name,
+                    page: 1,
+                    page_size: 9999,
+                  }).then((res) => {
+                    i._params = res.data;
+                  });
+            }
+          }
+        });
 
       const detail = await show({
         id: this.$route.query.id,
-        table_name: this.customForm.tableName
-      })
-      this.detail = detail
+        table_name: this.customForm.tableName,
+      });
+      this.detail = detail;
       this.init();
     },
 
-    async getHistory () {
+    async getHistory() {
       const res = await index({
         page: 1,
         page_size: 999,
         table_name: "asset_histories",
         filter: [
           {
-            key: 'asset_id',
-            op: 'eq',
-            value: this.detail.id
-          }
-        ]
-      })
-      this.histories = res.data
-    }
+            key: "asset_id",
+            op: "eq",
+            value: this.detail.id,
+          },
+        ],
+      });
+      this.histories = res.data;
+    },
   },
   computed: {
-    picList () {
-      return this.detail?.id_assets_atlas_files_asset_id_relation?.map(i => i.url) || []
+    picList() {
+      return (
+        this.detail?.id_assets_atlas_files_asset_id_relation?.map(
+          (i) => i.url
+        ) || []
+      );
     },
     contentFormat() {
       return function (i) {
         let { _relations } = i;
         if (_relations && _relations.link_table_name) {
-          if (_relations.link_relation === "hasOne" || _relations.link_relation === "newHasOne") {
+          if (
+            _relations.link_relation === "hasOne" ||
+            _relations.link_relation === "newHasOne"
+          ) {
             return (
               this.detail[_relations.link_with_name]?.name ||
               this.detail[_relations.link_with_name]?.no ||
               this.detail[_relations.link_with_name]?.value
             );
           }
-          if (_relations.link_relation === "hasMany" || _relations.link_relation === "newHasMany") {
+          if (
+            _relations.link_relation === "hasMany" ||
+            _relations.link_relation === "newHasMany"
+          ) {
             return this.detail[_relations.link_with_name]
               ?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
               ?.toString();
           }
 
-          return
+          return;
         }
         if (i._params && i._params.length > 0) {
-          return i._params.find(j => j.value == this.detail[i.field])?.key;
+          return i._params.find((j) => j.value == this.detail[i.field])?.key;
         }
 
-        return this.detail[i.field]
+        return this.detail[i.field];
       };
-    }
+    },
   },
   created() {
-    this.getFields().then(res => {
-      this.getHistory()
-    })
-  }
-}
+    this.getFields().then((res) => {
+      this.getHistory();
+    });
+  },
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/component/map.vue b/src/views/component/map.vue
index e577599..8953850 100644
--- a/src/views/component/map.vue
+++ b/src/views/component/map.vue
@@ -8,8 +8,8 @@
         @change="areaPick"
       >
         <el-option
-          v-for="(item,index) in wxAreas"
-          :value="index+1"
+          v-for="(item, index) in wxAreas"
+          :value="index + 1"
           :label="item"
         ></el-option>
       </el-select>
@@ -54,8 +54,8 @@
               placeholder="请选择区域"
             >
               <el-option
-                v-for="(item,index) in wxAreas"
-                :value="index+1"
+                v-for="(item, index) in wxAreas"
+                :value="index + 1"
                 :label="item"
               ></el-option>
             </el-select>
@@ -80,7 +80,7 @@
     <div class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>
 
     <div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
-      <el-scrollbar style="height: 260px;width: 100%">
+      <el-scrollbar style="height: 260px; width: 100%">
         <div class="infoWindow-container">
           <div class="infoWindow-container__item" v-for="item in form">
             <p>{{ item.name }}</p>
@@ -89,7 +89,12 @@
         </div>
       </el-scrollbar>
 
-      <p class="to-detail" @click="$router.push('/assetsDetail?id='+openData.id)">查看详情</p>
+      <p
+        class="to-detail"
+        @click="$router.push('/assetsDetail?id=' + openData.id)"
+      >
+        查看详情
+      </p>
     </div>
   </div>
 </template>
@@ -100,7 +105,7 @@ import { show } from "@/api/system/customForm";
 import { listdept } from "@/api/system/department";
 import { getparameter } from "@/api/system/dictionary";
 export default {
-  name: 'mapList',
+  name: "mapList",
   data() {
     return {
       dragging: false,
@@ -109,26 +114,26 @@ export default {
         table_name: "assets",
         filter: [
           {
-            key: 'suoshuqu',
-            op: 'eq',
-            value: ''
+            key: "suoshuqu",
+            op: "eq",
+            value: "",
           },
           {
-            key: 'dikuaimingcheng',
-            op: 'like',
-            value: ''
-          }
-        ]
+            key: "dikuaimingcheng",
+            op: "like",
+            value: "",
+          },
+        ],
       },
       select: {
         table_name: "assets",
         filter: [
           {
-            key: 'suoshuqu',
-            op: 'eq',
-            value: ''
-          }
-        ]
+            key: "suoshuqu",
+            op: "eq",
+            value: "",
+          },
+        ],
       },
       customForm: {
         customFormId: "",
@@ -156,26 +161,24 @@ export default {
         "锡山区",
       ],
       units: new Map([
-        ['jianzhumianji','m²'],
-        ['jianzhugaodu','m'],
-        ['dikuaizongjia','元'],
-        ['dikuaimianji','m²'],
-        ['muqianjunjia','元'],
-      ])
+        ["jianzhumianji", "m²"],
+        ["jianzhugaodu", "m"],
+        ["dikuaizongjia", "元"],
+        ["dikuaimianji", "m²"],
+        ["muqianjunjia", "元"],
+      ]),
     };
   },
   methods: {
-    test () {
-      console.log(
-        this.$refs['search-input'].$el
-      )
+    test() {
+      console.log(this.$refs["search-input"].$el);
     },
     index,
     areaPick(e) {
-      this.areaBG(this.wxAreas[e-1]);
-      this.getList().then(res => {
-        this.setMapMarker()
-      })
+      this.areaBG(this.wxAreas[e - 1]);
+      this.getList().then((res) => {
+        this.setMapMarker();
+      });
     },
     pickRow({ row }) {
       this.isShowInfoWindow = true;
@@ -199,7 +202,7 @@ export default {
 
       this.list = res.data;
     },
-    addCluster () {
+    addCluster() {
       if (this.cluster) {
         this.cluster.setMap(null);
       }
@@ -209,33 +212,36 @@ export default {
         renderMarker: this.renderMarker, // 自定义非聚合点样式
       });
     },
-    renderClusterMarker (context) {
+    renderClusterMarker(context) {
       let factor = Math.pow(context.count / this.list.length, 1 / 18);
-      let div = document.createElement('div');
+      let div = document.createElement("div");
       let Hue = 180 - factor * 180;
-      let bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-      let fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-      let borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-      let shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+      let bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
+      let fontColor = "hsla(" + Hue + ",100%,90%,1)";
+      let borderColor = "hsla(" + Hue + ",100%,40%,1)";
+      let shadowColor = "hsla(" + Hue + ",100%,90%,1)";
       div.style.backgroundColor = bgColor;
-      let size = Math.round(30 + Math.pow(context.count / this.list.length, 1 / 5) * 20);
-      div.style.width = div.style.height = size + 'px';
-      div.style.border = 'solid 1px ' + borderColor;
-      div.style.borderRadius = size / 2 + 'px';
-      div.style.boxShadow = '0 0 5px ' + shadowColor;
+      let size = Math.round(
+        30 + Math.pow(context.count / this.list.length, 1 / 5) * 20
+      );
+      div.style.width = div.style.height = size + "px";
+      div.style.border = "solid 1px " + borderColor;
+      div.style.borderRadius = size / 2 + "px";
+      div.style.boxShadow = "0 0 5px " + shadowColor;
       div.innerHTML = context.count;
-      div.style.lineHeight = size + 'px';
+      div.style.lineHeight = size + "px";
       div.style.color = fontColor;
-      div.style.fontSize = '14px';
-      div.style.textAlign = 'center';
+      div.style.fontSize = "14px";
+      div.style.textAlign = "center";
       context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-      context.marker.setContent(div)
+      context.marker.setContent(div);
     },
-    renderMarker (context) {
-      let content = '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
+    renderMarker(context) {
+      let content =
+        '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
       let offset = new AMap.Pixel(-9, -9);
-      context.marker.setContent(content)
-      context.marker.setOffset(offset)
+      context.marker.setContent(content);
+      context.marker.setOffset(offset);
     },
     setMapMarker() {
       this.map.remove(this.markerList);
@@ -262,7 +268,9 @@ export default {
           markerSpan.setAttribute("class", "map-marker__text");
           markerSpan.innerText =
             item.dikuaimingcheng.length > 4
-              ? item.dikuaimingcheng.slice(0,2) + ".." + item.dikuaimingcheng.slice(item.dikuaimingcheng.length - 2)
+              ? item.dikuaimingcheng.slice(0, 2) +
+                ".." +
+                item.dikuaimingcheng.slice(item.dikuaimingcheng.length - 2)
               : item.dikuaimingcheng;
           markerContent.appendChild(markerImg);
           markerContent.appendChild(markerSpan);
@@ -283,7 +291,7 @@ export default {
       this.map = new AMap.Map("map", {
         center: this.center,
         mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
-        zoom: this.zoom
+        zoom: this.zoom,
       });
       // 行政区域加载
       let adcode = ["320200"];
@@ -499,14 +507,14 @@ export default {
             }
           }
 
-          let alignLeft = ['dikuaimingcheng']
+          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',
+                align: alignLeft.find((m) => m === i.field) ? "left" : "center",
                 fixed: i.is_fixed,
               },
               linkOb
@@ -529,7 +537,8 @@ export default {
           )?.key;
         }
         if (i._relations) {
-          let { link_relation, foreign_key, link_with_name, link_table_name } = i._relations;
+          let { link_relation, foreign_key, link_with_name, link_table_name } =
+            i._relations;
 
           if (link_table_name && link_relation) {
             if (link_relation === "hasOne" || link_relation === "newHasOne") {
@@ -547,7 +556,7 @@ export default {
           }
         }
 
-        return this.openData[i.field] || '/';
+        return this.openData[i.field] || "/";
       };
     },
   },
@@ -680,7 +689,7 @@ export default {
   padding: 3px 10px;
   cursor: pointer;
   font-size: 13px;
-  border-radius: 6px 6px 0 0 ;
+  border-radius: 6px 6px 0 0;
   transform: translateY(-100%);
 
   position: absolute;