底部菜单新增同屏对比组件

src/assets/global.css

@@ -109,15 +109,33 @@
 /* el-dialog el-message-box */
 .el-dialog,
 .el-message-box {
-  border: 2px solid transparent;
-  border-image: --webkit-linear-gradient(to top, #00aaff, transparent) 1;
-  border-image: --moz-linear-gradient(to top, #00aaff, transparent) 1;
-  border-image: linear-gradient(to top, #00aaff, transparent) 1;
-  background-image: --webkit-linear-gradient(to top, #002f56, #002645);
-  background-image: --moz-linear-gradient(to top, #002f56, #002645);
-  background-image: linear-gradient(to top, #002f56, #002645);
+  background: rgba(0, 39, 77, 0.9);
+  border: 1px solid #2fb8ff;
   box-sizing: border-box;
 }
+.el-dialog__header {
+  position: relative;
+  background: linear-gradient(to left, transparent, transparent) right bottom
+      no-repeat,
+    linear-gradient(to right, transparent, #00aaff, transparent) right bottom
+      no-repeat;
+  background-size: 0 0, 100% 1px, 0 0, 0 0;
+}
+.dialogTitle {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-family: pingfangSC;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+.dialogTitleIcon {
+  width: 16px;
+  height: 16px;
+  background-color: #2fb8ff;
+  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
+  margin-right: 1rem;
+}
 .el-dialog__title,
 .el-message-box__title {
   color: #ffffff;

src/components/common/BottomForm/CreateTaskForm.vue

@@ -1,31 +1,43 @@
 <template>
   <!-- 申请任务弹窗 -->
-  <el-dialog title="新建任务" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+  <el-dialog :visible.sync="dialogVisible" :show-close="false" width="400px" :before-close="handleClose">
+    <template slot="title">
+      <div class="dialogTitle">
+        <div class="dialogTitleIcon"></div>
+        新建任务
+      </div>
+    </template>
     <el-form ref="createTaskForm" :model="createTaskForm" :rules="createTaskRrules" label-width="80px">
       <el-form-item label="任务名称" prop="taskName">
         <el-input v-model="createTaskForm.taskName" placeholder="请输入任务名称"></el-input>
       </el-form-item>
       <el-form-item label="任务类型" prop="taskType">
-        <el-select v-model="createTaskForm.taskType" filterable placeholder="请选择">
+        <el-select v-model="createTaskForm.taskType" filterable placeholder="请选择" width="100%">
           <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="关联项目" prop="associatedItems">
-        <el-select v-model="createTaskForm.associatedItems" filterable placeholder="请选择">
+        <el-select v-model="createTaskForm.associatedItems" filterable placeholder="请选择" width="100%">
           <el-option v-for="item in associatedItemsOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="所属街道" prop="streetOfOwnership">
-        <el-select v-model="createTaskForm.streetOfOwnership" filterable placeholder="请选择">
+        <el-select v-model="createTaskForm.streetOfOwnership" filterable placeholder="请选择" width="100%">
           <el-option v-for="item in streetOfOwnershipOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="任务描述" prop="taskDescription">
-        <el-input type="textarea" v-model="createTaskForm.taskDescription"></el-input>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 4, maxRows: 6 }"
+          placeholder="请描述任务"
+          v-model="createTaskForm.taskDescription"
+          width="100%"
+        ></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">

src/components/common/BottomForm/MyMission.vue

@@ -1,6 +1,12 @@
 <template>
-  <!-- 我的任务弹窗 -->
-  <el-dialog custom-class="myMission" title="我的任务" :visible.sync="dialogVisible" fullscreen :before-close="handleClose" >
+  <!-- 我的任务弹窗 fullscreen -->
+  <el-dialog custom-class="myMission" title="我的任务" :visible.sync="dialogVisible" width="70%" height="60%" :before-close="handleClose">
+    <template slot="title">
+      <div class="dialogTitle">
+        <div class="dialogTitleIcon"></div>
+        我的任务
+      </div>
+    </template>
     <el-form :inline="true" ref="myTaskForm" :model="formInline" class="demo-form-inline">
       <el-form-item label="任务类型">
         <el-select size="mini" v-model="formInline.taskType" placeholder="任务类型">
@@ -26,7 +32,7 @@
         <el-button @click="resetForm()">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="tableData" style="width: 100%" height="70vh" stripe>
+    <el-table :data="tableData" style="width: 100%" height="calc(80vh - 400px)" stripe>
       <el-table-column type="index" width="50"> </el-table-column>
       <el-table-column prop="taskId" label="任务编号"> </el-table-column>
       <el-table-column prop="taskName" label="任务名称"> </el-table-column>
@@ -48,7 +54,7 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="1"
-        :page-sizes="[10, 20, 50, 100]"
+        :page-sizes="[5, 10, 20, 50]"
         :page-size="10"
         layout="total, prev, pager, next, sizes, jumper"
         :total="400"
@@ -168,41 +174,6 @@ export default {
           state: "已审核",
           taskType: "土地资源"
         },
-        {
-          createDate: "2016-05-03",
-          taskName: "任务名称",
-          taskId: "任务编号",
-          state: "已审核",
-          taskType: "土地资源"
-        },
-        {
-          createDate: "2016-05-03",
-          taskName: "任务名称",
-          taskId: "任务编号",
-          state: "已审核",
-          taskType: "土地资源"
-        },
-        {
-          createDate: "2016-05-03",
-          taskName: "任务名称",
-          taskId: "任务编号",
-          state: "已审核",
-          taskType: "土地资源"
-        },
-        {
-          createDate: "2016-05-03",
-          taskName: "任务名称",
-          taskId: "任务编号",
-          state: "已审核",
-          taskType: "土地资源"
-        },
-        {
-          createDate: "2016-05-03",
-          taskName: "任务名称",
-          taskId: "任务编号",
-          state: "已审核",
-          taskType: "土地资源"
-        },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",

src/components/common/BottomForm/SameScreenComparison.vue

@@ -1,6 +1,56 @@
 <template>
   <!-- 同屏对比弹窗 -->
-  <el-dialog title="同屏对比" :visible.sync="dialogVisible" :before-close="handleClose"> 同屏对比组件 
+  <el-dialog title="同屏对比" fullscreen :visible.sync="dialogVisible" :before-close="handleClose">
+    <template slot="title">
+      <div class="dialogTitle">
+        <div class="dialogTitleIcon"></div>
+        同屏对比
+      </div>
+    </template>
+    <!-- 同屏对比主题 -->
+    <div class="ssc_main">
+      <!-- 地图列表 -->
+      <div class="ssc_main_mapList">
+        <div
+          class="ssc_main_mapList_showList"
+          :id="'map' + index"
+          v-for="(mapIndex, index) in checkedCities"
+          :key="index"
+          :style="mapListBoxStyle()"
+          @mouseover="changeMouseIndex(index)"
+        >
+          <span>{{ mapList[mapIndex].mapName }}</span>
+          <Map
+            :mapUrl="mapList[mapIndex].mapUrl"
+            :index="index"
+            :mouseIndex="mouseIndex"
+            :centerZoom="centerZoom"
+            @changeCenterZoom="changeCenterZoom"
+          />
+        </div>
+      </div>
+      <!-- 底图列表 -->
+      <div class="ssc_main_aimapList">
+        <span>地图底图(最多只能选择6个)</span>
+        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+          <el-checkbox
+            class="mapCheckBox"
+            :disabled="checkedCities.length >= 6 && checkedCities.indexOf(index) == -1"
+            @click="
+              index => {
+                if (this.checkedCities.length >= 6 && this.checkedCities.indexOf(index) == -1) {
+                  this.$message.info('最多只能选择6个地图底图哦！');
+                }
+              }
+            "
+            v-for="(city, index) in mapList"
+            :label="index"
+            :key="index"
+            >{{ city.mapName }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+    </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="clearDialogVisible()">取 消</el-button>
       <el-button type="primary" @click="subMitDialogVisible()">确 定</el-button>
@@ -14,13 +64,128 @@
  * @author: LiuMengxiang
  * @Date: 2022年11月21-25日
  */
+import Map from "../../map/Map.vue";
 export default {
   name: "SameScreenComparison",
-  components: {},
+  components: { Map },
   data() {
     return {
       // 同屏对比弹窗显示状态
-      dialogVisible: false
+      dialogVisible: false,
+      checkedCities: [],
+      // 地图暂存显示变量
+      mouseIndex: -1,
+      center: [-40, 10.72521988],
+      zoom: 3,
+      minZoom: 3,
+      maxZoom: 5,
+      bound: [
+        [85, -85],
+        [-85, 85]
+      ],
+      centerZoom: {},
+      mapList: [
+        {
+          mapName: "2018年航空影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2019年航空影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2020年航空影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2021年航空影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2022年航空影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2018年卫星影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2019年卫星影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2020年卫星影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2021年卫星影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2022年卫星影像图（春季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2018年航空影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2019年航空影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2020年航空影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2021年航空影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2022年航空影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2018年卫星影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2019年卫星影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2020年卫星影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2021年卫星影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        },
+        {
+          mapName: "2022年卫星影像图（秋季）",
+          mapUrl: "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d",
+          active: false
+        }
+      ]
     };
   },
   mounted() {
@@ -68,12 +233,95 @@ export default {
       // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
       this.$emit("changeShowBottomMenusStatus", true);
     },
-    // 上传数据表单提交
-    subMitDialogVisible(){
-      this.$message.success('打开其他弹窗!');
+    // 同屏对比表单提交
+    subMitDialogVisible() {
+      this.$message.success("打开其他弹窗!");
       this.clearDialogVisible();
+    },
+    // 修改
+    handleCheckedCitiesChange(e) {
+      // console.log("已选中的底图：", this.checkedCities, this.checkedCities.length);
+    },
+    // 根据地图列表，返回合适的样式
+    mapListBoxStyle() {
+      return "width:calc(33% - 2px);height:calc(50% - 2px);";
+    },
+    // 当其中一个地图移动或缩放时
+    changeCenterZoom(data) {
+      this.centerZoom = data;
+    },
+    // 暂存当前光标所在map组件的下标
+    changeMouseIndex(mouseIndex) {
+      this.mouseIndex = mouseIndex;
     }
   },
   watch: {}
 };
 </script>
+<style lang="less" scoped>
+.ssc_main {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 190px);
+  &_mapList {
+    width: 60%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome Safari */
+    }
+    &_showList {
+      border: 1px solid #ccc;
+      text-align: right;
+      position: relative;
+      span {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        font-size: 22px;
+        font-weight: bold;
+        color: #fff;
+        z-index: 999;
+      }
+    }
+  }
+  &_aimapList {
+    width: 40%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome Safari */
+    }
+    .mapCheckBox:hover {
+      color: #ffffff;
+      background: #002645 !important;
+    }
+    .mapCheckBox[disabled] {
+      color: #666666;
+      cursor: not-allowed;
+    }
+    .mapCheckBox {
+      width: 100%;
+      padding: 10px 5px;
+      border-bottom: 1px solid;
+      color: #cccccc;
+      font-size: 18px;
+      background: #001e37 !important;
+      .el-checkbox__label {
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>

src/components/map/Map.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="MapViewer" ref="map"></div>
+</template>
+<script>
+import publicFun from "@/utils/publicFunction.js";
+export default {
+  name: "Map",
+  data() {
+    return {
+      map: "",
+      layers: [],
+      center: [31.2, 121.5],
+      zoom: 9,
+      minZoom: 10,
+      maxZoom: 16,
+      bound: [
+        [30.5, 121],
+        [31.5, 122]
+      ]
+    };
+  },
+  mounted() {
+    //地图初始化
+    this.$nextTick(() => {
+      this.mapInit();
+      let that = this;
+      this.map.on("move", e => {
+        if (that.index == that.mouseIndex) {
+          let center = that.map.getCenter();
+          let zoom = that.map.getZoom();
+          this.$emit("changeCenterZoom", { center: [center.lat, center.lng], zoom: zoom, index: that.index });
+        }
+      });
+    });
+  },
+  props: ["mapUrl", "index", "centerZoom", "mouseIndex"],
+  beforeDestroyed() {},
+  methods: {
+    mapInit: function () {
+      this.map = L.map(this.$refs.map, {
+        attributionControl: false,
+        zoomControl: false,
+        minZoom: this.minZoom,
+        maxZoom: this.maxZoom
+        // maxBounds: new L.LatLngBounds(this.bound[0], this.bound[1]),
+      }).setView(this.center, this.zoom);
+
+      //添加默认图层
+      var guid = publicFun.buildGuid("baseLayer");
+      var layer = L.esri
+        .tiledMapLayer({
+          url:
+            // "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver/"
+            systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
+        })
+        .addTo(this.map);
+      layer.guid = guid;
+      this.layers[guid] = layer;
+    },
+    setView: function (coord, zoom) {
+      let center = L.latLng(coord[0], coord[1]);
+      this.map.setView(center, zoom);
+    }
+  },
+  watch: {
+    centerZoom: {
+      handler(newValue, oldValue) {
+        if (newValue.center && newValue.zoom && newValue.index != this.index) {
+          this.setView(newValue.center,newValue.zoom);
+        }
+      },
+      deep: true
+    }
+  }
+};
+</script>
+<style scoped>
+.MapViewer {
+  width: 100%;
+  height: 100%;
+  background-color: #003452;
+}
+</style>