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

src/views/device-manage/index.vue

@@ -52,7 +52,7 @@
               <el-table-column prop="ratedPower" label="额定功率" align="center">
                 <template #default="scope">
                   <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
-                            @change="changeRatedPower(scope.row)"></el-input>
+                            @change="changeFanData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>

src/views/site/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="site-bgc">
     <div class="box-top">
-      <div class="back-tunnel"  @click="handleGoHome">
+      <div class="back-tunnel" @click="handleGoHome">
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
@@ -42,15 +42,23 @@
                 <div class="add-icon"></div>
               </div>
             </div>
-            <div class="more" @click="goToAddTunnel(item.siteId)"  v-if="item.info.tunnelName">
+            <div class="more" @click="goToAddTunnel(item.siteId)" v-if="item.info.tunnelName">
               更多
               <div class="icon"></div>
             </div>
           </div>
         </div>
-        <div class="edit-btn" @click="handleEdit(item)">
-          <div class="edit-icon"></div>
-          <div>站点编辑</div>
+        <div class="edit-btn">
+          <div @click="handleEdit(item)">
+            <div class="edit-icon"></div>
+            <div>站点编辑</div>
+          </div>
+          <div v-if="item.totalTunnel!==0" @click="handleUpload(item.siteId)">
+            <el-icon style="margin-left: 20px">
+              <UploadFilled/>
+            </el-icon>
+            <div>上传图纸</div>
+          </div>
         </div>
       </div>
       <div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
@@ -80,10 +88,37 @@
                     placeholder="请输入站点信息"/>
         </el-form-item>
       </el-form>
-
       <template #footer>
         <div class="btns">
-          <div class="cancel-btn" @click="isVisited=false">
+          <div class="cancel-btn" @click="isVisited=false;">
+            取消
+          </div>
+          <div class="sure-btn" @click="handleSubmit(formInstance)">
+            确定
+          </div>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog :close-on-click-modal="false" v-model="isUploadVisited" width="1558px">
+      <el-upload
+          class="upload-demo"
+          drag
+          limit="1"
+          :action="uploadFileUrl"
+          :auto-upload="false"
+          :on-success="handleUploadSuccess"
+      >
+        <el-icon>
+          <upload-filled/>
+        </el-icon>
+        <div class="el-upload__text">
+          拖拽一张图纸到这里 或者 <em>点击上传</em>
+        </div>
+      </el-upload>
+      <template #footer>
+        <div class="btns">
+          <div class="cancel-btn" @click="isUploadVisited=false">
             取消
           </div>
           <div class="sure-btn" @click="handleSubmit(formInstance)">
@@ -96,7 +131,7 @@
       <span @click="firstPage" v-if="showFirst">首页</span>
       <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                      :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
-                     @current-change="handleCurrentChange"  :hide-on-single-page="true"/>
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
       <span @click="lastPage" v-if="showFirst">尾页</span>
     </div>
   </div>
@@ -113,6 +148,9 @@ const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
+const baseURL = import.meta.env.VITE_BASE_URL
+// const uploadFileUrl = ref(baseURL + "/workflow/process/file");
+const uploadFileUrl = ref("#");
 const info = ref({
   tunnelName: '',
   constructionLength: 0,
@@ -120,6 +158,7 @@ const info = ref({
 })
 const title = ref('新增站点')
 const isVisited = ref(false);
+const isUploadVisited = ref(false);
 const showFirst = ref(true)
 const total = ref(10);
 const showAddIcon = ref(true)
@@ -134,29 +173,38 @@ const form = ref({
   isDefault: false
 });
 const formRules = ref({
-  siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
+  siteName: [{required: true, message: '请输入站点名称', trigger: ['blur', 'change']}]
 })
 const formInstance = ref()
+const handleUploadSuccess = (res, file) => {
+  console.log('file', file)
+  if (res.code !== 1000) {
+    ElMessage.error("上传失败");
+  }
+  let data = res.data;
+  // attachmentList.value.push(data);
+};
+
 const handleGoHome = () => {
   router.push('/' + 'siteToHome/' + siteId)
 }
 const getList = () => {
   getSiteList({
-    userId:userId,
+    userId: userId,
     ...pageInfo
   }).then((res) => {
     total.value = res.data.total;
-    if(total.value==0){
+    if (total.value == 0) {
 
-    }else {
-      showAddIcon.value = total.value % 6!==0;
+    } else {
+      showAddIcon.value = total.value % 6 !== 0;
     }
     showFirst.value = total.value / pageInfo.pageSize > 1;
     res.data.rows.map(item => {
       if (item.tunnelList === null || item.tunnelList.length === 0) {
         item.info = info.value
-      }else{
-        item.info=item.tunnelList[0]
+      } else {
+        item.info = item.tunnelList[0]
       }
       item.checked = false
     })
@@ -184,7 +232,7 @@ const handleClickSite = (type) => {
 }
 
 const goToAddTunnel = (siteId) => {
-  router.push('/tunnel/' + siteId+'/bySite'+'/'+userId)
+  router.push('/tunnel/' + siteId + '/bySite' + '/' + userId)
 }
 
 //重置from表单
@@ -205,7 +253,9 @@ const handleEdit = (item) => {
     isVisited.value = true
   });
 }
-
+const handleUpload = (siteId) => {
+  isUploadVisited.value = true
+}
 const handleAdd = () => {
   restFrom()
   title.value = '新增站点'
@@ -217,33 +267,33 @@ const handleSubmit = (instance) => {
     if (!valid) return
     if (title.value === '编辑站点') {
       editSite(form.value).then((res) => {
-        if(res.code===1000){
+        if (res.code === 1000) {
           isVisited.value = false
           getList()
           ElMessage.success(res.msg)
-        }else {
+        } else {
           ElMessage.warning(res.msg)
         }
       });
     } else {
       addSite(form.value).then((res) => {
-        if(res.code===1000){
+        if (res.code === 1000) {
           isVisited.value = false
           getList()
           ElMessage.success(res.msg)
-        }else {
+        } else {
           ElMessage.warning(res.msg)
         }
       });
     }
   })
 }
-const handleChooseAll=()=>{
-  siteList.value.map(item=>{
-    item.checked=!item.checked
-    if(item.checked&&!item.isDefault){
+const handleChooseAll = () => {
+  siteList.value.map(item => {
+    item.checked = !item.checked
+    if (item.checked && !item.isDefault) {
       siteIds.value.push(item.siteId)
-    }else if(!item.checked&&!item.isDefault){
+    } else if (!item.checked && !item.isDefault) {
       siteIds.value.map((newItem, index) => {
         if (newItem === item.siteId) {
           siteIds.value.splice(index, 1)
@@ -256,20 +306,20 @@ const handleMoreDelete = () => {
   if (siteIds.value.length === 0) {
     ElMessage.warning('请先选择站点进行删除')
   } else {
-    let flag=false
-    siteList.value.map(item=>{
-      siteIds.value.map(siteItem=>{
-        if(item.siteId===siteItem){
-          if(item.tunnelList.length!==0){
+    let flag = false
+    siteList.value.map(item => {
+      siteIds.value.map(siteItem => {
+        if (item.siteId === siteItem) {
+          if (item.tunnelList.length !== 0) {
             ElMessage.error('该站点下存在隧道，不能删除!')
-            flag=false
-          }else {
-            flag=true
+            flag = false
+          } else {
+            flag = true
           }
         }
       })
     })
-    if(flag){
+    if (flag) {
       ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -290,12 +340,12 @@ const handleMoreDelete = () => {
     }
   }
 }
-const firstPage=()=>{
+const firstPage = () => {
   pageInfo.pageNum = 1
   getList()
 }
-const lastPage=()=>{
-  pageInfo.pageNum = total.value/pageInfo.pageSize
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
   getList()
 }
 //点击页码进行分页功能
@@ -306,9 +356,50 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
-:deep(.el-form-item__error){
+:deep(.el-upload-dragger) {
+  background-color: transparent;
+  box-shadow: none;
+  border: 1px solid #05FEFF;
+
+  &:hover {
+    border: 1px solid #05FEFF;
+  }
+
+  .el-icon {
+    font-size: 250px;
+    color: #FFFFFF;
+  }
+
+  .el-upload__text {
+    font-size: 50px;
+    color: #FFFFFF;
+    em{
+      color: #05FEFF;
+    }
+  }
+}
+
+:deep(.el-upload-list) {
+  .el-upload-list__item{
+    &:hover {
+      background-color: transparent;
+    }
+    .el-icon{
+      font-size: 61px;
+      color: #FFFFFF;
+    }
+  }
+  .el-upload-list__item-name {
+    font-size: 61px !important;
+    color: #FFFFFF;
+
+  }
+}
+
+:deep(.el-form-item__error) {
   font-size: 35px;
 }
+
 :deep(.el-radio-group) {
   margin-top: 10px;
 }
@@ -340,6 +431,7 @@ const handleCurrentChange = (val) => {
   height: 18px;
   background: #05FEFF;
 }
+
 .clickColor {
   position: absolute;
   top: 7px;
@@ -521,10 +613,10 @@ const handleCurrentChange = (val) => {
 
 
         > span:last-child {
-          padding:1px 8px;
+          padding: 1px 8px;
           font-size: 32px;
           border: 2px solid #05FEFF;
-          border-radius:10px;
+          border-radius: 10px;
           position: relative;
         }
       }
@@ -630,7 +722,6 @@ const handleCurrentChange = (val) => {
       }
 
       .edit-btn {
-        cursor: pointer;
         margin-top: 117px;
         display: flex;
         align-items: center;
@@ -638,11 +729,23 @@ const handleCurrentChange = (val) => {
         color: #60DDDE;
         margin-left: 492px;
 
-        .edit-icon {
-          width: 42px;
-          height: 44px;
-          background-image: url('@/assets/images/site/zdgl_icon_bj.png');
-          margin-right: 16px;
+        > div:first-child {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+
+          .edit-icon {
+            width: 42px;
+            height: 44px;
+            background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+            margin-right: 16px;
+          }
+        }
+
+        > div:last-child {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
         }
       }
     }

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;