新增底部菜单组件

src/components/common/BottomForm/CreateTaskForm.vue

@@ -221,7 +221,7 @@ export default {
             .catch(() => {
               this.$message({
                 type: "info",
-                message: "已取消提交!"
+                message: "已撤回提交!"
               });
             });
         } else {

src/components/common/BottomForm/MyMission.vue

@@ -4,7 +4,9 @@
     <el-form :inline="true" ref="myTaskForm" :model="formInline" class="demo-form-inline">
       <el-form-item label="任务类型">
         <el-select v-model="formInline.taskType" placeholder="任务类型">
-          <el-option v-for="item in taskTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          <el-option-group v-for="group in taskTypeOptions" :key="group.label" :label="group.label">
+            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-option-group>
         </el-select>
       </el-form-item>
       <el-form-item label="关联项目">

src/components/common/BottomForm/SameScreenComparison.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- 同屏对比弹窗 -->
+  <el-dialog title="同屏对比" :visible.sync="dialogVisible" :before-close="handleClose"> 同屏对比组件 
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="clearDialogVisible()">取 消</el-button>
+      <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+/**
+ * 底部菜单（同屏对比）组件
+ * @author: LiuMengxiang
+ * @Date: 2022年11月21-25日
+ */
+export default {
+  name: "SameScreenComparison",
+  components: {},
+  data() {
+    return {
+      // 同屏对比弹窗显示状态
+      dialogVisible: false
+    };
+  },
+  mounted() {
+    // 同屏对比事件监听
+    this.$bus.$on("tpdb", () => {
+      this.changeShowBottomMenusStatus();
+    });
+    // 点击底部菜单SVG，且有弹窗打开时触发（弹窗关闭询问）
+    this.$bus.$on("handleClose", () => {
+      if (this.dialogVisible) {
+        this.handleClose();
+      }
+    });
+  },
+  destroy() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("tpdb");
+  },
+  props: [],
+  methods: {
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
+    changeShowBottomMenusStatus() {
+      if (this.dialogVisible) {
+        this.handleClose();
+      } else {
+        // 打开弹窗
+        this.dialogVisible = !this.dialogVisible;
+        this.$emit("changeShowBottomMenusStatus", false);
+      }
+    },
+    // 弹窗关闭询问
+    handleClose() {
+      if (this.dialogVisible) {
+        this.$confirm("确认关闭？")
+          .then(_ => {
+            this.clearDialogVisible();
+          })
+          .catch(_ => {});
+      }
+    },
+    // 同屏对比取消
+    clearDialogVisible() {
+      // 关闭弹窗
+      this.dialogVisible = false;
+      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+      this.$emit("changeShowBottomMenusStatus", true);
+    },
+    // 上传数据表单提交
+    subMitDialogVisible(){
+      this.$message.success('打开其他弹窗!');
+      this.clearDialogVisible();
+    }
+  },
+  watch: {}
+};
+</script>

src/components/common/BottomForm/UploadingData.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- 上传数据弹窗 -->
+  <el-dialog title="上传数据" :visible.sync="dialogVisible" :before-close="handleClose"> 上传数据组件 
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="clearDialogVisible()">取 消</el-button>
+      <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+/**
+ * 底部菜单（上传数据）组件
+ * @author: LiuMengxiang
+ * @Date: 2022年11月21-25日
+ */
+export default {
+  name: "UploadingData",
+  components: {},
+  data() {
+    return {
+      // 上传数据弹窗显示状态
+      dialogVisible: false
+    };
+  },
+  mounted() {
+    // 上传数据事件监听
+    this.$bus.$on("scsj", () => {
+      this.changeShowBottomMenusStatus();
+    });
+    // 点击底部菜单SVG，且有弹窗打开时触发（弹窗关闭询问）
+    this.$bus.$on("handleClose", () => {
+      if (this.dialogVisible) {
+        this.handleClose();
+      }
+    });
+  },
+  destroy() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("scsj");
+  },
+  props: [],
+  methods: {
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
+    changeShowBottomMenusStatus() {
+      if (this.dialogVisible) {
+        this.handleClose();
+      } else {
+        // 打开弹窗
+        this.dialogVisible = !this.dialogVisible;
+        this.$emit("changeShowBottomMenusStatus", false);
+      }
+    },
+    // 弹窗关闭询问
+    handleClose() {
+      if (this.dialogVisible) {
+        this.$confirm("确认关闭？")
+          .then(_ => {
+            this.clearDialogVisible();
+          })
+          .catch(_ => {});
+      }
+    },
+    // 上传数据关闭
+    clearDialogVisible() {
+      // 关闭弹窗
+      this.dialogVisible = false;
+      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+      this.$emit("changeShowBottomMenusStatus", true);
+    },
+    // 上传数据表单提交
+    subMitDialogVisible(){
+      this.$message.success('数据上传成功!');
+      this.clearDialogVisible();
+    }
+  },
+  watch: {}
+};
+</script>

src/components/common/BottomMenus.vue

@@ -7,7 +7,9 @@
     <!-- 我的任务弹窗 -->
     <MyMission @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 同屏对比弹窗 -->
-    <!-- 上传数据 -->
+    <SameScreenComparison />
+    <!-- 上传数据弹窗 -->
+    <UploadingData />
     <!-- 底部菜单主体 -->
     <div
       id="menusBox"
@@ -60,9 +62,11 @@
 import BottomMenuSvg from "./BottomMenuSvg.vue";
 import CreateTaskForm from "./BottomForm/CreateTaskForm.vue";
 import MyMission from "./BottomForm/MyMission.vue";
+import SameScreenComparison from "./BottomForm/SameScreenComparison.vue";
+import UploadingData from "./BottomForm/UploadingData.vue";
 export default {
   name: "BottomMenus",
-  components: { BottomMenuSvg, CreateTaskForm, MyMission },
+  components: { BottomMenuSvg, CreateTaskForm, MyMission, SameScreenComparison, UploadingData },
   data() {
     return {
       // 弹窗打开状态
@@ -87,10 +91,10 @@ export default {
           subMenu: [
             { index: 0, title: "疑点审计", bgImage: "ydsj", clickEmit:"caseAuditEvent" },
             { index: 1, title: "标记疑点", bgImage: "bjyd",clickEmit:"labelCaseEvent" },
-            { index: 2, title: "同屏对比", bgImage: "tpdb" },
+            { index: 2, title: "同屏对比", bgImage: "tpdb", clickEmit: "tpdb" },
             { index: 3, title: "卷帘对比", bgImage: "jldb", clickEmit: "JLControl" },
-            { index: 4, title: "上传数据", bgImage: "scsj" },
-            { index: 5, title: "自定义模型", bgImage: "zdymx",clickEmit:"customModelEvent" }
+            { index: 4, title: "上传数据", bgImage: "scsj", clickEmit: "scsj" },
+            { index: 5, title: "自定义模型", bgImage: "zdymx" }
           ]
         },
         {
@@ -118,6 +122,7 @@ export default {
     },
     // 根据菜单父级index和子菜单index，更新全局变量。
     changeBottomMenu(index, subIndex, clickEvent) {
+      // 该逻辑可能会舍弃
       this.$store.commit("changeBottomMenu", { index: index, subIndex: subIndex });
       if (clickEvent) {
         // 调用全局事件总线中的指定事件