修改

src/views/HeaderOne.vue

 <!--
  * @Author: zhaopenglong
  * @Date: 2021-07-06 16:17:54
- * @LastEditTime: 2021-09-11 14:02:25
+ * @LastEditTime: 2021-09-11 17:04:52
  * @LastEditors: 赵鹏龙
  * @Description: In User Settings Edit
  * @FilePath: \map_vue\src\views\HeaderWithStyleOne\header.vue
@@ -60,6 +60,7 @@
         <li style="border:none">操作手册</li>
       </ul>
     </div>
+    <!-- 上传数据dialog弹出框 -->
     <el-dialog
       title="上传数据"
       :modal="false"
@@ -132,6 +133,65 @@
         >
       </span>
     </el-dialog>
+    <!-- 选择时间 -->
+    <el-dialog
+      title="上传数据"
+      :visible.sync="pointMessageDialogVisible"
+      :append-to-body="true"
+    >
+      <div class="interior">
+        <div style="padding: 5px" class="time-space-collision-dialog-header">
+          <span>开始时间:</span>
+          <el-date-picker
+            v-model="pointTimePickerOption.startTime"
+            size="mini"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="datetime"
+          />
+        </div>
+        <div style="padding: 5px" class="time-space-collision-dialog-header">
+          <span>结束时间</span>
+          <el-date-picker
+            v-model="pointTimePickerOption.endTime"
+            size="mini"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="datetime"
+          />
+        </div>
+        <div class="time-space-bottom">
+          <span>区域名称：</span>
+          <el-input
+            v-model="pointTimePickerOption.areaName"
+            size="mini"
+            placeholder="具体地名"
+            style="width: 200px"
+          />
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="primary" type="primary" @click="getPointMessage"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+    <!-- 左上角显示的点位信息 -->
+    <div
+      v-if="circleArray.length !== 0"
+      style="background: #ccc;
+            width: 300px;
+            margin-left: 20px;
+            margin-top: 20px;"
+    >
+      <div v-for="(item, index) in circleArray" :key="index">
+        <div>地址名称：{{ item.areaName }}</div>
+        <div>开始时间：{{ item.startTime }}</div>
+        <div>结束时间:{{ item.endTime }}</div>
+        <div>范围：{{ item.caseRange }}(米)</div>
+        <el-button @click="beginSearch(item)">开始分析</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -191,7 +251,19 @@ export default {
       tableData: [], //上传文件之后得到的数据
       rightShowArray: [], // 右侧的区域
       rightTableData: [], // 两个圈碰撞出的区域
-      radio: "3" //3:默认 84 1:高德 2:百度
+      radio: "3", //3:默认 84 1:高德 2:百度
+      pointMessageDialogVisible: false, //创建点位时候显示
+      // 绘制的圆形的信息
+      pointTimePickerOption: {
+        startTime: "",
+        endTime: "",
+        areaName: "",
+        geometry: "",
+        point: [],
+        caseRange: ""
+      },
+      // 选中的点位数组
+      circleArray: []
     };
   },
   //方法集合
@@ -232,6 +304,7 @@ export default {
     areaCrash() {
       this.drawCircleNumber++;
       let self = this;
+      // 绘制圆形 circle
       this.$setDraw({
         zIndex: 0,
         layerId: `drawLayer${self.drawCircleNumber}`, //必要
@@ -241,10 +314,11 @@ export default {
         strokeWidth: 2,
         img: { src: require("@/assets/img/redpoint.png"), scale: 1 }
       });
+      // drawend 绘制完成
       this.$getInteractions({
         layerId: `drawLayer${self.drawCircleNumber}`
       }).on("drawend", function(e) {
-        self.$clearLayer({ layerId: `drawLayer${self.drawCircleNumber}` });
+        self.pointMessageDialogVisible = true;
         self
           .$getInteractions({ layerId: `drawLayer${self.drawCircleNumber}` })
           .setActive(false);
@@ -253,8 +327,42 @@ export default {
           self.tableData
         );
         self.getSetArray(inCircleMessage, `drawLayer${self.drawCircleNumber}`);
+        self.$emit("showLeftDialog", false); //先将左侧弹出框关闭
+        self.pointTimePickerOption.geometry = e.feature.getGeometry();
+        self.pointTimePickerOption.caseRange = (
+          e.feature.getGeometry().getRadius() * 100000
+        ).toFixed(2);
+      });
+      // 添加动态形式
+      this.$setModify({
+        layerId: `drawLayer${self.drawCircleNumber}`,
+        id: "ModifyCircle"
+      });
+      // 拖动完成
+      self
+        .$getInteractions({
+          layerId: `ModifyCircle`
+        })
+        .on("modifyend", function(evt) {
+          var feature = evt.target.dragSegments_[0][0].feature; //得到 feature
+          let inCircleMessage = self.getPhoneInCircle(
+            feature.getGeometry().getExtent(),
+            self.tableData
+          );
+          self.getSetArray(
+            inCircleMessage,
+            `drawLayer${self.drawCircleNumber}`
+          );
+          console.log(feature);
         });
     },
+    // 画圈之后将时间和名称存储到circleArray数组中
+    getPointMessage() {
+      this.pointMessageDialogVisible = false;
+      this.pointTimePickerOption.point = this.pointTimePickerOption.geometry.getCenter();
+      this.circleArray.push(this.pointTimePickerOption);
+      console.log(this.circleArray);
+    },
     /**
      * @description: 在圈内的点位数组
      * @param {Array} getArray
@@ -381,6 +489,26 @@ export default {
     getRandomColor() {
       return "#" + Math.floor(Math.random() * 16777215).toString(16);
     },
+    beginSearch(item) {
+      let returnArray = [];
+      console.log(item.geometry.getExtent());
+      this.tableData.forEach(each => {
+        each.phoneArray.forEach(phoneEach => {
+          if (
+            parseFloat(item.geometry.getExtent()[0]) <=
+              parseFloat(phoneEach.longitude) &&
+            parseFloat(phoneEach.longitude) <=
+              parseFloat(item.geometry.getExtent()[2]) &&
+            parseFloat(item.geometry.getExtent()[1]) <=
+              parseFloat(phoneEach.latitude) &&
+            parseFloat(phoneEach.latitude) <=
+              parseFloat(item.geometry.getExtent()[3])
+          ) {
+            returnArray.push(each);
+          }
+        });
+      });
+    },
     uploadFile() {
       let self = this;
       let file = this.file;

src/views/Home.vue

@@ -50,7 +50,15 @@ export default {
       uploadFileFlag: false,
       curType: "",
       list: [],
-      total: 0
+      total: 0,
+      // 左上角弹出框的数据
+      formLabelAlign: {
+        name: "",
+        region: "",
+        type: "",
+        date1: ""
+      },
+      crashDivFlag: false
     };
   },
   mounted() {
@@ -102,8 +110,8 @@ export default {
       this.$refs.creatActiveMain.tableData = val;
     },
     // 打开左侧的 dialog
-    showLeftDialog() {
-      this.$refs.creatActiveMain.btnHandleFunc();
+    showLeftDialog(val) {
+      this.$refs.creatActiveMain.btnHandleFunc(val);
     }
   }
 };
@@ -125,5 +133,21 @@ export default {
     position: fixed;
     bottom: 20px;
   }
+  .crash-div-left {
+    background-color: #1c324c;
+    position: absolute;
+    top: 100px;
+    .el-form {
+      margin-right: 40px;
+      background-color: #1c324c;
+      .el-form-item__label {
+        color: #fefeff;
+      }
+      .el-input__inner {
+        background-color: transparent;
+        color: #fefefe;
+      }
+    }
+  }
 }
 </style>

src/views/creatActiveMain.vue

@@ -467,7 +467,7 @@ export default {
         // this.clusterLayer.getSource().setDistance(thresholdVal);
       }
     },
-    btnHandleFunc() {
+    btnHandleFunc(val) {
       // 默认将弹出框 checkbox 选中
       this.$nextTick(() => {
         this.tableData.forEach(row => {
@@ -476,6 +476,7 @@ export default {
       });
 
       this.leftListBoxFlag = !this.leftListBoxFlag;
+      this.leftListBoxFlag = val;
       if (this.leftListBoxFlag) {
         this.leftListBoxL = 0;
       } else {