Bladeren bron

添加注释,图例库的添加

zhulizhen1111 4 jaren geleden
bovenliggende
commit
68614cb69d

+ 60 - 27
src/components/edit.vue

@@ -1,21 +1,23 @@
+<!-- 楼层功能右下侧hove的时候出现编辑平面图-->
 <template>
     <div class='edit_map'>
-        <span class='edit-icon'>
-            <a-icon type='edit' style='color:#fff' />
-        </span>
+        <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
+            <span class='edit-icon'>
+                <a-icon type='edit' style='color:#fff' />
+            </span>
+        </el-tooltip>
+
         <div class='hover-div'>
-            <a-popover placement='left'>
-                <template slot='content'>编辑图例</template>
-                <a-button type='primary'>
+            <el-tooltip class='item' effect='dark' content='111' placement='left'>
+                <span class='icon1'>
                     <a-icon type='form' />
-                </a-button>
-            </a-popover>
-            <a-popover placement='left'>
-                <template slot='content'>修改</template>
-                <a-button type='primary'>
+                </span>
+            </el-tooltip>
+            <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
+                <span class='icon2' @click='dump'>
                     <a-icon type='form' />
-                </a-button>
-            </a-popover>
+                </span>
+            </el-tooltip>
         </div>
     </div>
 </template>
@@ -25,7 +27,9 @@ export default {
     data() {
         return {}
     },
-    methods: {},
+    methods: {
+        dump() {}
+    },
     mounted() {}
 }
 </script>
@@ -35,25 +39,54 @@ export default {
     bottom: 28px;
     right: 28px;
     z-index: 2;
-    width: 48px;
-    height: 48px;
-    background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-    box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
-    border-radius: 50%;
-    text-align: center;
-    line-height: 48px;
-    display: inline-block;
-    cursor: pointer;
     .edit-icon {
-        &:hover + .hover-div {
-            display: block;
-        }
+        width: 48px;
+        height: 48px;
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
+        border-radius: 50%;
+        text-align: center;
+        line-height: 48px;
+        display: inline-block;
+        cursor: pointer;
+        // &:hover + .hover-div {
+        //     display: block;
+        // }
     }
     .hover-div {
         position: absolute;
         bottom: 58px;
         right: 28px;
-        display: none;
+        // display: none;
+        .icon1 {
+            width: 40px;
+            height: 40px;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
+            border: 1px solid rgba(31, 36, 41, 0.2);
+            font-size: 16px;
+            display: inline-block;
+            color: #646c73;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 40px;
+            cursor: pointer;
+        }
+        .icon2 {
+            width: 40px;
+            height: 40px;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
+            border: 1px solid rgba(31, 36, 41, 0.2);
+            font-size: 16px;
+            display: inline-block;
+            color: #646c73;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 40px;
+            margin-top: 15px;
+            cursor: pointer;
+        }
     }
 }
 </style>

+ 1 - 0
src/components/floorList.vue

@@ -1,3 +1,4 @@
+<!--  楼层按钮点击和上下活动效果-->
 <template>
     <div class='floor-box'>
         <span class='box-style1' @click='showLegend'>图例</span>

+ 1 - 0
src/components/floorMap/floorBase.vue

@@ -1,3 +1,4 @@
+<!-- 底图 -->
 <template>
     <div id='floor_base'>
         <canvas id='map' :width='initWidth' height='700'></canvas>

+ 18 - 5
src/components/menuList.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 顶部路由 -->
     <div class='menu'>
         <div class='home' @click='$emit("update:modelNum", 0)'>福建三明万达广场</div>
         <div>
@@ -10,10 +11,14 @@
             >{{ item.name }}</div>
         </div>
         <div class='home-right'>
-            <img class='img1' src='../assets/imgs/favorites.svg' alt />
+            <span @click='dumpLegend'>
+                <img class='img1' src='../assets/imgs/favorites.svg' alt />
+                <span class='span1'>图例库</span>
+            </span>
             <img class='img2' src='../assets/imgs/file.svg' alt />
+            <span class='span2'>草稿箱</span>
             <img class='img3' src='../assets/imgs/clock.svg' alt />
-            <span>{{times}}</span>
+            <span class='span3'>{{times}}</span>
         </div>
     </div>
 </template>
@@ -59,6 +64,9 @@ export default {
             })
             item.state = true
             this.$router.push({ path: `/home/${item.route}` })
+        },
+        dumpLegend() {
+            this.$router.push({ path: `/home/legendLibrary` })
         }
     },
     components: {}
@@ -108,9 +116,14 @@ export default {
         line-height: 48px;
         color: #646c73;
         font-size: 14px;
-        img {
-            margin-right: 16px;
-        }
+        cursor: pointer;
+    }
+    .span1,
+    .span2 {
+        padding: 0 6px 0 3px;
+    }
+    .span3 {
+        padding-left: 3px;
     }
 }
 </style>

+ 16 - 11
src/router/index.js

@@ -8,7 +8,7 @@ const routes = [
     {
         path: "/",
         name: "login",
-        component: () => import("../views/login")
+        component: () => import("../views/login"),
     },
     // home
     {
@@ -19,41 +19,46 @@ const routes = [
             //手语舞
             {
                 path: "first",
-                component: () => import("../views/first")
+                component: () => import("../views/first"),
             },
             //概览
             {
                 path: "overview",
-                component: () => import("../views/overview")
+                component: () => import("../views/overview"),
             },
             // 楼层功能
             {
                 path: "floorFunc",
-                component: () => import("../views/floorFunc")
+                component: () => import("../views/floorFunc"),
             },
             // 设备设施
             {
                 path: "equipment",
-                component: () => import("../views/equipment")
+                component: () => import("../views/equipment"),
             },
             // 其他功能
             {
                 path: "other",
-                component: () => import("../views/other")
+                component: () => import("../views/other"),
             },
             // 分析
             {
                 path: "analysis",
-                component: () => import("../views/analysis")
-            }
-        ]
-    }
+                component: () => import("../views/analysis"),
+            },
+            //新开页面图例库
+            {
+                path: "legendLibrary",
+                component: () => import("../views/legendLibrary"),
+            },
+        ],
+    },
 ]
 
 const router = new VueRouter({
     mode: "history",
     base: process.env.BASE_URL,
-    routes
+    routes,
 })
 
 export default router

+ 1 - 0
src/views/equipment/bottomLayer.vue

@@ -1,3 +1,4 @@
+<!-- 楼层和设备底图下面的放大缩小的浮层 -->
 <template>
     <div class='bottom-layer'>
         <span class='icon-style'>

+ 1 - 0
src/views/equipment/eqDialog.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 设备设施的三级路由的tabs -->
     <div class='dialog-container'>
         <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
             <div class='top'></div>

+ 1 - 0
src/views/equipment/legendBox.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 设备右侧点击图例按钮显示的图例弹框 -->
     <div class='box'>
         <div class='legend-box' v-if='isShow'>
             <a-table :columns='columns' :data-source='data' :row-selection='rowSelection' :pagination='false' size='small' />

+ 1 - 0
src/views/equipment/table/eqListTable.vue

@@ -1,3 +1,4 @@
+<!-- 设备清单的有select的表格 -->
 <template>
     <div class='eq-list'>
         <a-select default-value='全部' style='width: 120px' @change='handleChange'>

+ 14 - 0
src/views/legendLibrary/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <!-- 图例库首页 -->
+    <div class='legend-library'>图例库首页</div>
+</template>
+<script>
+export default {
+    components: {},
+    data() {
+        return {}
+    },
+    methods: {},
+    mounted() {}
+}
+</script>