feat：新增一键巡航弹窗

src/assets/scss/index.scss

@@ -240,11 +240,16 @@ html#baidu-map-hack {
   }
 }
 
-.u-popper-select{
+.u-popper-select {
   background-color: rgba(79, 159, 255, 0.3);
   border-color: #4f9fff;
-  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+  .el-select-dropdown__item {
+    color: #fff;
+    padding-left: px-to-rem(10);
+  }
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
     background-color: rgba(79, 159, 255, 0.4);
-    color: #FFF;
+    color: #fff;
   }
 }

src/views/index.vue

@@ -12,9 +12,9 @@
           <SandMonitorRight v-if="mainMenu === '采砂监控'"></SandMonitorRight>
           <SafetyInspectionLeft v-if="mainMenu === '安全巡查'"></SafetyInspectionLeft>
           <SafetyInspectionRight v-if="mainMenu === '安全巡查'"></SafetyInspectionRight>
+          <AddInspectionTask />
           <ComprehensiveOverview v-if="mainMenu === '综合概览'"></ComprehensiveOverview>
           <HydrologicInfo v-if="mainMenu === '水文信息'"></HydrologicInfo>
-
           <WaterStationPopup />
         </div>
       </el-main>
@@ -34,6 +34,7 @@ import SafetyInspectionRight from './safety-inspection/right.vue'
 import ComprehensiveOverview from '@/views/comprehensive-overview/index'
 import HydrologicInfo from '@/views/hydrologic-info/index'
 import WaterStationPopup from '@/views/water-station-popup'
+import AddInspectionTask from './safety-inspection/addInspectionTask.vue'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
@@ -47,7 +48,8 @@ export default {
     ComprehensiveOverview,
     SafetyInspectionRight,
     HydrologicInfo,
-    WaterStationPopup
+    WaterStationPopup,
+    AddInspectionTask
   },
   computed: {
     ...mapState({

src/views/safety-inspection/addInspectionTask.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="add-inspection-task-container" v-if="visible">
+    <div class="add-inspection-task-title">
+      <span class="title-text">新增巡查任务</span>
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="visible = false" />
+    </div>
+    <div class="add-inspection-task-content">
+      <el-form ref="addTaskFormRef" :model="addTaskFrom" label-width="0.8rem" size="mini">
+        <el-form-item label="任务名称">
+          <el-input v-model="addTaskFrom.taskName" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="任务内容">
+          <el-input type="textarea" rows="4" v-model="addTaskFrom.taskContent" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="巡查点">
+          <el-select v-model="addTaskFrom.inspectionPoint" placeholder="请选择巡查点" :popper-append-to-body="false" popper-class="u-popper-select">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="巡查时长">
+          <el-input v-model="addTaskFrom.taskDuration" placeholder="请输入" style="width: 85%"></el-input>
+          <span style="color: #fff">&nbsp;&nbsp;min</span>
+        </el-form-item>
+        <el-form-item label="责任人">
+          <el-select v-model="addTaskFrom.person" placeholder="请选择责任人" style="width: 100%" :popper-append-to-body="false" popper-class="u-popper-select">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div style="display: flex; justify-content: flex-end; margin-top: 0.22rem">
+            <el-button size="mini" plain @click="visible = false">取消</el-button>
+            <el-button size="mini" type="primary">保存</el-button>
+            <el-button size="mini" type="primary">开始巡查</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { warning } from '@/utils'
+export default {
+  name: 'addInspectionTask',
+  data() {
+    return {
+      visible: false,
+      addTaskFrom: {
+        taskName: '',
+        taskContent: '',
+        inspectionPoint: '',
+        taskDuration: '',
+        person: ''
+      }
+    }
+  },
+  mounted() {
+    this.$globalEventBus.$on('clcikAddTask', (data) => {
+      this.visible = true
+    })
+  },
+  destroyed() {
+    this.$globalEventBus.$off('clcikAddTask')
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.add-inspection-task-container {
+  position: absolute;
+  top: 0.8rem;
+  right: 4.85rem;
+  width: px-to-rem(422);
+  z-index: 9999;
+  .add-inspection-task-title {
+    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
+    background-size: 100% 100%;
+    height: px-to-rem(39);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 px-to-rem(20);
+    font-size: px-to-rem(16);
+    color: #fff;
+    .title-text {
+      font-weight: bold;
+      margin-left: px-to-rem(20);
+    }
+  }
+  .add-inspection-task-content {
+    padding: px-to-rem(10);
+    min-height: px-to-rem(465);
+    background: rgb(35, 61, 108, 0.8);
+    :deep(.el-form) {
+      .el-button {
+        font-size: px-to-rem(14);
+      }
+      .el-form-item__label {
+        color: #fff;
+        font-size: px-to-rem(14);
+      }
+      .el-input__inner,
+      .el-textarea__inner {
+        background: rgba(79, 159, 255, 0.12);
+        border-radius: 4px;
+        border: 1px solid #4f9fff;
+        background: transparent;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/safety-inspection/right.vue

@@ -4,7 +4,7 @@
       <base-header title="一键巡河"></base-header>
       <div class="card-item">
         <div class="tools-panel">
-          <div class="btn add-btn"><i class="el-icon-plus"></i>&nbsp;新建任务</div>
+          <div class="btn add-btn" @click="addTask"><i class="el-icon-plus"></i>&nbsp;新建任务</div>
           <div class="input-bg">
             <el-input v-model="taskName" size="mini" placeholder="搜索任务名称" suffix-icon="el-icon-search"></el-input>
           </div>
@@ -108,7 +108,11 @@ export default {
     }
   },
 
-  methods: {}
+  methods: {
+    addTask() {
+      this.$globalEventBus.$emit('clcikAddTask')
+    }
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -244,6 +248,7 @@ export default {
     height: px-to-rem(24);
   }
   .btn {
+    cursor: pointer;
     background: linear-gradient(0deg, #468adb 0%, #366dae 100%);
     border-radius: px-to-rem(4);
     border: px-to-rem(1) solid rgba(255, 255, 255, 0.8);