feat : 站点管理新增上传图纸按钮,隧道管理新增图纸导航模式

src/views/tunnel-manage/index.vue

@@ -8,6 +8,16 @@
       <div class="site-name">
         {{ siteName }}
       </div>
+      <div class="model-change">
+        <div class="model" @click="clickModel=1">
+          <div class="card-bg"></div>
+          <span>卡片模式</span>
+        </div>
+        <div class="model" @click="clickModel=2">
+          <div class="img-bg"></div>
+          <span>图纸导航</span>
+        </div>
+      </div>
       <tunnel-title/>
       <div class="all-del-btn" v-if="showOperation">
         <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
@@ -21,7 +31,7 @@
         </div>
       </div>
     </div>
-    <div class="box-content">
+    <div class="box-content" v-if="clickModel===1">
       <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
@@ -62,6 +72,16 @@
         <div style="cursor: pointer">添加隧道</div>
       </div>
     </div>
+    <div v-else>
+      <div class="img-box">
+        <img src="@/assets/images/tunnel/img.png" style="width:3500px;height:1789px" id="imgModel" usemap="#image"
+             alt="" @click="clickHandler">
+        <map name="image" id="image">
+          <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
+                :title="item.tunnelId+'隧道'" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
+        </map>
+      </div>
+    </div>
     <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
       <div class="siteId">
         <span>{{ title }}</span>
@@ -138,10 +158,23 @@ const formRules = ref({
   totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
   constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}]
 })
+const clickModel = ref(1)
 const showFirst = ref(true)
 const showOperation = ref(true)
 const formInstance = ref()
 const tunnelList = ref([])
+const coordsList = ref([
+  {
+    tunnelId: 1,
+    coords: '767,1117,793,1182,2379,682,2437,454,2349,505,2298,666,2221,531,2153,578,2212,692,765,1126',
+  }, {
+    tunnelId: 91,
+    coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
+  }, {
+    tunnelId: 1,
+    coords: '1181,1364,2105,622,2005,589,1116,1324'
+  }
+])
 const iconsList = ref([
   {
     icon: 'sd_icon_fj.png',
@@ -214,7 +247,18 @@ const total = ref(10);
 onMounted(() => {
   showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
-
+const clickHot = (id) => {
+  console.log('点击热区===============')
+  router.push('/' + id + '/' + siteId)
+}
+// const testArr=[]
+const clickHandler = (id) => {
+  // let obj=e.offsetX+','+e.offsetY
+  // testArr.push(obj)
+  // console.log('正确数值',testArr.map(item=>item).join())
+  // console.log('点击',e.offsetX+','+e.offsetY+',')
+  // console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
+}
 const handleGoSiteOrIndex = () => {
   if (type === 'bySite') {
     router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
@@ -401,6 +445,44 @@ const handleMoreDelete = () => {
   line-height: 61px;
 }
 
+.model-change {
+  z-index: 55;
+  position: absolute;
+  left: 700px;
+  font-size: 46px;
+  color: #05FEFF;
+  display: flex;
+  //flex-direction: column;
+  .model {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin-left: 30px
+    }
+
+    > span:hover {
+      text-decoration: underline;
+    }
+  }
+
+
+  .card-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
+    margin-right: 16px;
+  }
+
+  .img-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
+    margin-right: 16px;
+  }
+}
+
 :deep(.el-radio-group) {
   margin-top: 10px;
 }
@@ -544,6 +626,10 @@ const handleMoreDelete = () => {
     }
   }
 
+  .img-box {
+    margin: 100px;
+  }
+
   .box-content {
     height: 1850px;
     display: flex;