[Feat 2862] 公司端首页地图相关修改

src/views/vent/home/clique/components/3Dmap/3dMap.ts

@@ -465,6 +465,14 @@ class earthtMap {
     }
   }
 
+  /** 为 tooltip 设置标题，该标题的设置过程依赖 ../dialog-modal 中的结构 */
+  setTooltipTitle(title: string) {
+    const obj = this.detailModalCSS2Obj as CSS2DObject;
+    const ele = obj.element.getElementsByClassName('modal-title')[0];
+    if (!ele) return;
+    ele.innerHTML = title;
+  }
+
   async setTag(locationInfo: any[]) {
     const loader = new FontLoader();
     const font = await loader.loadAsync('/font/STSong_Regular.json');
@@ -532,7 +540,7 @@ class earthtMap {
       boxMesh.rotateZ(-Math.PI);
       boxMesh.position.set(x - Math.abs(max.x - min.x) + 0.018, -y + 0.01, this.mapConfig.deep + 0.03);
       boxMesh.renderOrder = 1;
-      boxMesh['userData']['code'] = item['code'];
+      boxMesh['userData'] = item;
 
       this.locationNameBgArr.push(boxMesh);
 
@@ -700,6 +708,7 @@ class earthtMap {
           if (detailMesh) {
             // 发送消息
             this.detailModalCSS2Obj.visible = true;
+            this.setTooltipTitle(detailMesh.object.userData.name);
           }
         }
       }

src/views/vent/home/clique/components/dialog-modal.vue

@@ -4,7 +4,7 @@
       <i>
         <SvgIcon class="icon" size="14" name="inner-kd" />
       </i>
-      <span class="modal-title"> {{ modalTitle }}</span>
+      <span class="modal-title"> {{ title }}</span>
       <span class="close" @click="getClose">✕</span>
     </div>
     <div class="modal-card">
@@ -88,9 +88,13 @@
         return {};
       },
     },
+    title: {
+      type: String,
+      default: '布尔台矿',
+    },
   });
 
-  let modalTitle = ref('布尔台矿');
+  // let modalTitle = ref('布尔台矿');
   // let modalTitle = ref('yjl');
   let modalCard = reactive([
     { imgSrc: getAssetURL('company/home/hang.png'), label: '巷道长度', value: 0 },

src/views/vent/home/clique/components/icon-light.vue

@@ -37,7 +37,7 @@
     { code: 'buErTaiTa', imgSrc: selectBgPath, label: '布尔台矿', leftV: '286px', topV: '97px', textColor: 'rgba(255, 231, 83,.9)' },
     { code: 'wuLunTa', imgSrc: unselectBgPath, label: '乌兰木伦矿', leftV: '327px', topV: '115px', textColor: '#fff' },
     { code: 'cunCaoTa', imgSrc: selectBgPath, label: '寸草塔矿', leftV: '346px', topV: '132px', textColor: 'rgba(255, 231, 83,.9)' },
-    { code: 'shiKanTa', imgSrc: unselectBgPath, label: '石坎台矿', leftV: '373px', topV: '149px', textColor: '#fff' },
+    { code: 'shiKanTa', imgSrc: unselectBgPath, label: '石圪台矿', leftV: '373px', topV: '149px', textColor: '#fff' },
     { code: 'buLieTa', imgSrc: selectBgPath, label: '补连塔矿', leftV: '408px', topV: '184px', textColor: 'rgba(255, 231, 83,.9)' },
     { code: 'haLaGouTa', imgSrc: unselectBgPath, label: '哈拉沟矿', leftV: '445px', topV: '214px', textColor: '#fff' },
     { code: 'shangWanTa', imgSrc: selectBgPath, label: '上湾矿', leftV: '439px', topV: '244px', textColor: 'rgba(255, 231, 83,.9)' },
@@ -45,10 +45,10 @@
     { code: 'daLiuTa', imgSrc: unselectBgPath, label: '大柳塔矿', leftV: '492px', topV: '260px', textColor: '#fff' },
     { code: 'jinJieTa', imgSrc: selectBgPath, label: '锦界矿', leftV: '565px', topV: '413px', textColor: 'rgba(255, 231, 83,.9)' },
     { code: 'yuJiaTa', imgSrc: unselectBgPath, label: '榆家梁矿', leftV: '669px', topV: '308px', textColor: '#fff' },
-    { code: 'baoDeTa', imgSrc: selectBgPath, label: '宝德矿', leftV: '862px', topV: '340px', textColor: 'rgba(255, 231, 83,.9)' },
+    { code: 'baoDeTa', imgSrc: selectBgPath, label: '保德矿', leftV: '862px', topV: '340px', textColor: 'rgba(255, 231, 83,.9)' },
   ]);
 
-  function openModal(code, leftV, label, topV) {
+  function openModal(code, label, leftV, topV) {
     emit('showDetail', code, label, leftV, topV);
   }
 </script>

src/views/vent/home/clique/index.vue

@@ -44,7 +44,7 @@
       </div>
     </div>
     <div class="area-card2" v-show="isShowDialog">
-      <dialogModal ref="dialogModalRef" @close-dialog="closeDialog" :centerDetail="centerDetail" />
+      <dialogModal ref="dialogModalRef" @close-dialog="closeDialog" :title="dialogTitle" :centerDetail="centerDetail" />
     </div>
   </div>
 </template>
@@ -59,9 +59,10 @@
   import dialogModal from './components/dialog-modal.vue';
   import { getHomeData, getList } from './clique.api';
   const dialogModalRef = ref();
-  // let mainTitle = ref('国家能源神东煤炭集团');
-  let mainTitle = ref('XXXX集团');
+  let mainTitle = ref('国家能源神东煤炭集团');
+  // let mainTitle = ref('XXXX集团');
   const isShowDialog = ref(false);
+  const dialogTitle = ref('');
 
   //矿井通风状态数据
   let airKjStatus = reactive<any[]>([]);
@@ -133,8 +134,9 @@
     }
   }
 
-  function showDetail(code, leftV, topV) {
+  function showDetail(code, label, leftV, topV) {
     if (code) {
+      dialogTitle.value = label;
       isShowDialog.value = true;
     }
     nextTick(() => {

src/views/vent/home/clique/index1.vue

@@ -57,7 +57,8 @@
   import iconLight from './components/icon-light.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  let mainTitle = ref('XXXX集团');
+  let mainTitle = ref('国家能源神东煤炭集团');
+  // let mainTitle = ref('XXXX集团');
   function showDetail(code) {
     if (code) {
       // isShowDialog.value = true;