tj

src/views/aqpt/visualEditor/index.vue

@@ -1,62 +1,70 @@
 <template>
-  <div class="conatiner">
-    <div class="leftSide">
-      <div class="title">作业项目</div>
-      <div v-for="(item,index) in items" :key="index" :class="checkItemIndex===index?'item active':'item'" @click="checkItem(item,index)">
-        <img :src="item.icon" alt="" class="icon">
-        <div class="name">{{ item.name }}</div>
+  <div>
+    <div class="head-wrap">
+      <div class="header">
+        <img class="logo" src="./images/logo.png" alt="">
+        <div class="title">危险作业动态标识</div>
       </div>
     </div>
-    <div class="map-warp">
-      <div id="vmap" />
-    </div>
-    <div class="rightSide">
-      <div v-if="type==1" class="remark">
-        <div class="title">使用说明</div>
-        <ul>
-          <li>1.点击作业项目下面的图标</li>
-          <li>2.点击地图绘制点</li>
-          <li>3.编辑信息保存点位</li>
-        </ul>
+    <div class="conatiner">
+      <div class="leftSide">
+        <div class="title">作业项目</div>
+        <div v-for="(item,index) in items" :key="index" :class="checkItemIndex===index?'item active':'item'" @click="checkItem(item,index)">
+          <img :src="item.icon" alt="" class="icon">
+          <div class="name">{{ item.name }}</div>
+        </div>
       </div>
-      <div v-if="type==2||type=='drage'" class="saveForm">
-        <div class="title">作业点基本信息</div>
-        <div class="item">
-          <div class="lable">作业项目：</div>
-          <div class="content">
-            <img class="icon" :src="saveForm.icon" alt="">
-            <span>{{ saveForm.name }}</span>
-          </div>
+      <div class="map-warp">
+        <div id="vmap" />
+      </div>
+      <div class="rightSide">
+        <div v-if="type==1" class="remark">
+          <div class="title">使用说明</div>
+          <ul>
+            <li>1.点击作业项目下面的图标</li>
+            <li>2.点击地图绘制点</li>
+            <li>3.编辑信息保存点位</li>
+          </ul>
         </div>
-        <div class="item">
-          <div class="lable">名称：</div>
-          <div class="content">
-            <span>{{ saveForm.name }}</span>
+        <div v-if="type==2||type=='drage'" class="saveForm">
+          <div class="title">作业点基本信息</div>
+          <div class="item">
+            <div class="lable">作业项目：</div>
+            <div class="content">
+              <img class="icon" :src="saveForm.icon" alt="">
+              <span>{{ saveForm.name }}</span>
+            </div>
           </div>
-        </div>
-        <div class="bt-wrap">
-          <div class="bt save" @click="save">保存</div>
-          <div class="bt margin" @click="cancel">撤销</div>
-        </div>
-      </div>
-      <div v-if="type==3" class="deleteForm">
-        <div class="title">作业点基本信息</div>
-        <div class="item">
-          <div class="lable">作业项目：</div>
-          <div class="content">
-            <img class="icon" :src="deleteForm.icon" alt="">
-            <span>{{ deleteForm.name }}</span>
+          <div class="item">
+            <div class="lable">名称：</div>
+            <div class="content">
+              <span>{{ saveForm.name }}</span>
+            </div>
           </div>
-        </div>
-        <div class="item">
-          <div class="lable">名称：</div>
-          <div class="content">
-            <span>{{ deleteForm.name }}</span>
+          <div class="bt-wrap">
+            <div class="bt save" @click="save">保存</div>
+            <div class="bt margin" @click="cancel">撤销</div>
           </div>
         </div>
-        <div class="bt-wrap">
-          <div class="bt" @click="save">保存</div>
-          <div class="bt delete margin" @click="delMarker">删除</div>
+        <div v-if="type==3" class="deleteForm">
+          <div class="title">作业点基本信息</div>
+          <div class="item">
+            <div class="lable">作业项目：</div>
+            <div class="content">
+              <img class="icon" :src="deleteForm.icon" alt="">
+              <span>{{ deleteForm.name }}</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="lable">名称：</div>
+            <div class="content">
+              <span>{{ deleteForm.name }}</span>
+            </div>
+          </div>
+          <div class="bt-wrap">
+            <div class="bt" @click="save">保存</div>
+            <div class="bt delete margin" @click="delMarker">删除</div>
+          </div>
         </div>
       </div>
     </div>
@@ -202,6 +210,7 @@ export default {
         this.dragstartMarker = undefined
         return
       }
+      this.type = 1
       if (this.layer && this.layer._leaflet_id && this.map._layers[this.layer._leaflet_id]) {
         this.map.removeLayer(this.map._layers[this.layer._leaflet_id])
       }
@@ -383,6 +392,32 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.head-wrap{
+  padding: 0 16px;
+  background-color: #071C2B;
+  .header{
+    height: 50px;
+    line-height: 50px;
+    background-color: #193142;
+    color: #fff;
+    text-align: center;
+    position: relative;
+
+    .logo{
+      display: block;
+      height: 40px;
+      position: absolute;
+      left: 16px;
+      top: 5px;
+    }
+    .title{
+      font-size: 30px;
+      font-weight: 600;
+      letter-spacing: 4px;
+    }
+  }
+}
+
 .conatiner{
     height: 100%;
     height: 100vh;