feat:增加地图

src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue

@@ -1,133 +1,393 @@
 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+  <div>
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+    <el-form
-        <el-form-item label="所属组织名称" prop="orgName">
+      :model="dataForm"
-            <el-input v-model="dataForm.orgName" placeholder="所属组织名称"></el-input>
+      :rules="dataRule"
-        </el-form-item>
+      ref="dataForm"
-        <el-form-item label="核酸监测点名称" prop="name">
+      @keyup.enter.native="dataFormSubmitHandle()"
-            <el-input v-model="dataForm.name" placeholder="核酸监测点名称"></el-input>
+      label-width="120px"
-        </el-form-item>
+    >
-        <el-form-item label="服务时间" prop="serveTime">
+      <el-form-item label="所属组织名称" prop="orgName">
-            <el-input v-model="dataForm.serveTime" type="textarea" :rows="2" placeholder="请输入服务时间，如：每日开放 上午：8:00-11:30 ；下午：13:00-17:00"></el-input>
+        <!-- <el-input v-model="dataForm.orgName" placeholder="所属组织名称"></el-input> -->
-        </el-form-item>
+        <el-select v-model="dataForm.orgName" placeholder="所属组织名称">
-        <el-form-item label="咨询电话" prop="mobile">
+          <el-option
-            <el-input v-model="dataForm.mobile" placeholder="咨询电话" :change="check_num()"></el-input>
+            v-for="item in organizationList"
-        </el-form-item>
+            :key="item.value"
-        <el-form-item label="监测点地址" prop="address">
+            :label="item.label"
-            <el-input v-model="dataForm.address" placeholder="监测点地址"></el-input>
+            :value="item.value"
-        </el-form-item>
+          >
-      </el-form>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="核酸监测点名称" prop="name">
+        <el-input
+          v-model="dataForm.name"
+          placeholder="核酸监测点名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="服务时间" prop="serveTime">
+        <el-input
+          v-model="dataForm.serveTime"
+          type="textarea"
+          :rows="2"
+          placeholder="请输入服务时间，如：每日开放 上午：8:00-11:30 ；下午：13:00-17:00"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="咨询电话" prop="mobile">
+        <el-input
+          v-model="dataForm.mobile"
+          placeholder="咨询电话"
+          :change="check_num()"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="监测点地址" prop="address">
+        <el-input
+          v-model="dataForm.address"
+          placeholder="监测点地址"
+          disabled
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="位置坐标" prop="longitude" style="display: block">
+        <div>
+          <el-input
+            class="item_width_4"
+            maxlength="50"
+            placeholder="例:青岛市时代国际广场"
+            v-model="keyWords"
+            style="width: 200px"
+          >
+          </el-input>
+          <el-button
+            style="margin-left: 10px"
+            type="primary"
+            size="small"
+            @click="handleSearchMap"
+            >查询</el-button
+          >
+          <div
+            id="map_app"
+            class="div_map"
+            style="width: 500px; height: 300px; margin-top: 20px"
+          ></div>
+          <div style="margin-top: 10px">
+            <span>经度</span>
+            <el-input
+              class="item_width_3"
+              maxlength="50"
+              placeholder="请输入经度"
+              v-model="dataForm.longitude"
+              disabled
+              style="width: 200px;margin-left: 20px;"
+            >
+            </el-input>
+            <span style="margin-left: 20px">纬度</span>
+            <el-input
+              class="item_width_3"
+              maxlength="50"
+              placeholder="请输入纬度"
+              v-model="dataForm.latitude"
+              disabled
+              style="width: 200px;margin-left: 20px;"
+            >
+            </el-input>
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
     <template slot="footer">
-      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t("confirm")
+      }}</el-button>
     </template>
-  </el-dialog>
+  </div>
 </template>
 
 <script>
-    import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
-
+var map;
-    export default {
+var search;
-  data () {
+var markers;
+var geocoder;
+var infoWindowList;
+export default {
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
+        id: "",
-        customerId: '',
+        customerId: "",
-        orgId: '',
+        orgId: "",
-        orgName: '',
+        orgName: "",
-        pid: '',
+        pid: "",
-        pids: '',
+        pids: "",
-        name: '',
+        name: "",
-        serveTime: '',
+        serveTime: "",
-        mobile: '',
+        mobile: "",
-        address: '',
+        address: "",
-        longitude: '',
+        longitude: "120.38945519",
-        latitude: ''
+        latitude: "36.0722275",
-      }
+      },
-    }
+      keyWords: null,
+      organizationList: [],
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         customerId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         orgId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         orgName: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         serveTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         mobile: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         address: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         longitude: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         latitude: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
-        ]
+            required: true,
-      }
+            message: this.$t("validate.required"),
-    }
+            trigger: "blur",
+          },
+        ],
+      };
+    },
+  },
+  mounted() {
+    this.getFormInfo();
+    this.initMap();
   },
   methods: {
-    init () {
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
-      this.visible = true
+    initMap() {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519);
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById("map_app"), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45, // 设置地图旋转角度
+      });
+      search = new window.TMap.service.Search({ pageSize: 10 });
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: [],
+      });
+      infoWindowList = Array(10);
+      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+      // 监听地图平移结束
+      map.on("panend", () => {
+        this.handleMoveCenter();
+      });
+      this.handleMoveCenter();
+      this.convert();
+    },
+    handleMoveCenter() {
+      //修改地图中心点
+      const center = map.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      this.dataForm.latitude = lat;
+      this.dataForm.longitude = lng;
+      this.setMarker(lat, lng);
+      this.convert(lat, lng);
+    },
+    // 地图查询
+    handleSearchMap() {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close();
+      });
+      infoWindowList.length = 0;
+      markers.setGeometries([]);
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.keyWords,
+          bounds: map.getBounds(),
+        })
+        .then((result) => {
+          let { data } = result;
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng },
+            } = data[0];
+            map.setCenter(new TMap.LatLng(lat, lng));
+            this.setMarker(lat, lng);
+            this.dataForm.latitude = lat;
+            this.dataForm.longitude = lng;
+            this.convert();
+          } else {
+            this.$message.error("未检索到相关位置坐标");
+          }
+        });
+    },
+    convert(lat, lng) {
+      markers.setGeometries([]);
+      // var input = document.getElementById('location').value.split(',');
+      let location;
+      if (lat && lng) {
+        location = new TMap.LatLng(lat, lng);
+      } else {
+        location = new TMap.LatLng(
+          this.dataForm.latitude,
+          this.dataForm.longitude
+        );
+      }
+
+      // map.setCenter(location);
+      markers.updateGeometries([
+        {
+          id: "main", // 点标注数据数组
+          position: location,
+        },
+      ]);
+      geocoder
+        .getAddress({ location: location }) // 将给定的坐标位置转换为地址
+        .then((result) => {
+          this.dataForm.address = result.result.address;
+          // 显示搜索到的地址
+        });
+    },
+
+    setMarker(lat, lng) {
+      markers.setGeometries([]);
+      markers.add([
+        {
+          id: "4",
+          styleId: "marker",
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: "marker4",
+          },
+        },
+      ]);
+    },
+    // 获取所属组织列表
+    getFormInfo() {
+      this.$http
+        .post(`/gov/org/agency/community-list`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.organizationList = res.data;
+        })
+        .catch(() => {});
+    },
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
+    
     // 获取信息
-    getInfo () {
+    getInfo() {
-      this.$http.get(`/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`).then(({ data: res }) => {
+      console.log(111111);
-        if (res.code !== 0) {
+      this.$http
-          return this.$message.error(res.msg)
+        .get(`/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`)
-        }
+        .then(({ data: res }) => {
-        this.dataForm = {
+          if (res.code !== 0) {
-          ...this.dataForm,
+            return this.$message.error(res.msg);
-          ...res.data
+          }
-        }
+          this.dataForm = {
-      }).catch(() => {})
+            ...this.dataForm,
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
+    dataFormSubmitHandle: debounce(
-      this.$refs['dataForm'].validate((valid) => {
+      function () {
-        if (!valid) {
+        this.$refs["dataForm"].validate((valid) => {
-          return false
+          if (!valid) {
-        }
+            return false;
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/icPointNucleicMonitoring/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
           }
-          this.$message({
+          this.$http[!this.dataForm.id ? "post" : "put"](
-            message: this.$t('prompt.success'),
+            "/epmetuser/icPointNucleicMonitoring/",
-            type: 'success',
+            this.dataForm
-            duration: 500,
+          )
-            onClose: () => {
+            .then(({ data: res }) => {
-              this.visible = false
+              if (res.code !== 0) {
-              this.$emit('refreshDataList')
+                return this.$message.error(res.msg);
-            }
+              }
-          })
+              this.$message({
-        }).catch(() => {})
+                message: this.$t("prompt.success"),
-      })
+                type: "success",
-    }, 1000, { 'leading': true, 'trailing': false }),
+                duration: 500,
-      //限制
+                onClose: () => {
-      check_num: function(){
+                  this.visible = false;
-          this.dataForm.mobile = this.dataForm.mobile.replace(/[^\a-\z\A-\Z0-9]/g, '');
+                  this.$emit("refreshDataList");
-      }
+                },
-  }
+              });
-}
+            })
+            .catch(() => {});
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    //限制
+    check_num: function () {
+      this.dataForm.mobile = this.dataForm.mobile.replace(
+        /[^\a-\z\A-\Z0-9]/g,
+        ""
+      );
+    },
+  },
+};
 </script>

src/views/modules/plugins/point/icpointnucleicmonitoring.vue

@@ -1,31 +1,91 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-user__icPointNucleicMonitoring}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
           <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{
+            $t("add")
+          }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button type="danger" @click="deleteHandle()">{{
+            $t("deleteBatch")
+          }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+      <el-table
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        v-loading="dataListLoading"
-        <el-table-column prop="orgName" label="所属组织名称" header-align="center" align="center"></el-table-column>
+        :data="dataList"
-        <el-table-column prop="name" label="核酸监测点名称" header-align="center" align="center"></el-table-column>
+        border
-        <el-table-column prop="serveTime" label="服务时间" header-align="center" align="center"></el-table-column>
+        @selection-change="dataListSelectionChangeHandle"
-        <el-table-column prop="mobile" label="咨询电话" header-align="center" align="center"></el-table-column>
+        style="width: 100%"
-        <el-table-column prop="address" label="监测点地址" header-align="center" align="center"></el-table-column>
+      >
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="orgName"
+          label="所属组织名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="核酸监测点名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="serveTime"
+          label="服务时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="咨询电话"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="监测点地址"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button
-            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+              >{{ $t("update") }}</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+              >{{ $t("delete") }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -36,35 +96,47 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <el-dialog
+        :visible.sync="addOrUpdateVisible"
+        :title="!dataForm.id ? $t('add') : $t('update')"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :destroy-on-close="true"
+      >
+        <add-or-update
+          ref="addOrUpdate"
+          @refreshDataList="getDataList"
+        ></add-or-update>
+      </el-dialog>
     </div>
   </el-card>
 </template>
 
 <script>
-    import mixinViewModule from '@/mixins/view-module'
+import mixinViewModule from "@/mixins/view-module";
-    import AddOrUpdate from './icpointnucleicmonitoring-add-or-update'
+import AddOrUpdate from "./icpointnucleicmonitoring-add-or-update";
 
-    export default {
+export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/epmetuser/icPointNucleicMonitoring/page',
+        getDataListURL: "/epmetuser/icPointNucleicMonitoring/page",
         getDataListIsPage: true,
-        deleteURL: '/epmetuser/icPointNucleicMonitoring',
+        deleteURL: "/epmetuser/icPointNucleicMonitoring",
-        deleteIsBatch: true
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
+        id: "",
-      }
+      },
-    }
+    };
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
-  }
+  },
-}
+};
 </script>

src/views/modules/plugins/point/icpointvaccinesinoculation-add-or-update.vue

@@ -1,165 +1,448 @@
 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+  <div>
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+    <el-form
-        <el-form-item label="所属组织名称" prop="orgName">
+      :model="dataForm"
-            <el-input v-model="dataForm.orgName" placeholder="所属组织名称"></el-input>
+      :rules="dataRule"
-        </el-form-item>
+      ref="dataForm"
-        <el-form-item label="疫苗接种点名称" prop="name">
+      @keyup.enter.native="dataFormSubmitHandle()"
-            <el-input v-model="dataForm.name" placeholder="疫苗接种点名称"></el-input>
+      label-width="120px"
-        </el-form-item>
+    >
-        <el-form-item label="接种日期" prop="inoculationDate">
+      <el-form-item label="所属组织名称" prop="orgName">
-            <el-input v-model="dataForm.inoculationDate" placeholder="接种日期"></el-input>
+        <!-- <el-input
-        </el-form-item>
+          v-model="dataForm.orgName"
-        <el-form-item label="接种上午开始时间" prop="moStartTime">
+          placeholder="所属组织名称"
-            <el-input v-model="dataForm.moStartTime" placeholder="接种上午开始时间"></el-input>
+        ></el-input> -->
-        </el-form-item>
+        <el-select v-model="dataForm.orgName" placeholder="所属组织名称">
-        <el-form-item label="接种上午结束时间" prop="moEndTime">
+          <el-option
-            <el-input v-model="dataForm.moEndTime" placeholder="接种上午结束时间"></el-input>
+            v-for="item in organizationList"
-        </el-form-item>
+            :key="item.value"
-        <el-form-item label="接种下午开始时间" prop="afStartTime">
+            :label="item.label"
-            <el-input v-model="dataForm.afStartTime" placeholder="接种下午开始时间"></el-input>
+            :value="item.value"
-        </el-form-item>
+          >
-        <el-form-item label="接种下午结束时间" prop="afEndTime">
+          </el-option>
-            <el-input v-model="dataForm.afEndTime" placeholder="接种下午结束时间"></el-input>
+        </el-select>
-        </el-form-item>
+      </el-form-item>
-        <el-form-item label="" prop="noAvailableVaccines">
+      <el-form-item label="疫苗接种点名称" prop="name">
-            <el-checkbox v-model="dataForm.noAvailableVaccines" true-label="1" false-label="2">暂无疫苗</el-checkbox>
+        <el-input
-        </el-form-item>
+          v-model="dataForm.name"
-        <el-form-item label="咨询电话" prop="mobile">
+          placeholder="疫苗接种点名称"
-            <el-input v-model="dataForm.mobile" placeholder="咨询电话"></el-input>
+        ></el-input>
-        </el-form-item>
+      </el-form-item>
-        <el-form-item label="接种点地址" prop="address">
+      <el-form-item label="接种日期" prop="inoculationDate">
-            <el-input v-model="dataForm.address" placeholder="接种点地址"></el-input>
+        <el-input
-        </el-form-item>
+          v-model="dataForm.inoculationDate"
-      </el-form>
+          placeholder="接种日期"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="接种上午开始时间" prop="moStartTime">
+        <el-input
+          v-model="dataForm.moStartTime"
+          placeholder="接种上午开始时间"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="接种上午结束时间" prop="moEndTime">
+        <el-input
+          v-model="dataForm.moEndTime"
+          placeholder="接种上午结束时间"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="接种下午开始时间" prop="afStartTime">
+        <el-input
+          v-model="dataForm.afStartTime"
+          placeholder="接种下午开始时间"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="接种下午结束时间" prop="afEndTime">
+        <el-input
+          v-model="dataForm.afEndTime"
+          placeholder="接种下午结束时间"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="" prop="noAvailableVaccines">
+        <el-checkbox
+          v-model="dataForm.noAvailableVaccines"
+          true-label="1"
+          false-label="2"
+          >暂无疫苗</el-checkbox
+        >
+      </el-form-item>
+      <el-form-item label="咨询电话" prop="mobile">
+        <el-input v-model="dataForm.mobile" placeholder="咨询电话"></el-input>
+      </el-form-item>
+      <el-form-item label="接种点地址" prop="address">
+        <el-input
+          v-model="dataForm.address"
+          placeholder="接种点地址"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="位置坐标" prop="longitude" style="display: block">
+        <div>
+          <el-input
+            class="item_width_4"
+            maxlength="50"
+            placeholder="例:青岛市时代国际广场"
+            v-model="keyWords"
+            style="width: 200px"
+          >
+          </el-input>
+          <el-button
+            style="margin-left: 10px"
+            type="primary"
+            size="small"
+            @click="handleSearchMap"
+            >查询</el-button
+          >
+          <div
+            id="map_app"
+            class="div_map"
+            style="width: 500px; height: 300px; margin-top: 20px"
+          ></div>
+          <div style="margin-top: 10px">
+            <span>经度</span>
+            <el-input
+              class="item_width_3"
+              maxlength="50"
+              placeholder="请输入经度"
+              v-model="dataForm.longitude"
+              disabled
+              style="width: 200px; margin-left: 20px"
+            >
+            </el-input>
+            <span style="margin-left: 20px">纬度</span>
+            <el-input
+              class="item_width_3"
+              maxlength="50"
+              placeholder="请输入纬度"
+              v-model="dataForm.latitude"
+              disabled
+              style="width: 200px; margin-left: 20px"
+            >
+            </el-input>
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
     <template slot="footer">
-      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t("confirm")
+      }}</el-button>
     </template>
-  </el-dialog>
+  </div>
 </template>
 
 <script>
-    import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
-
+var map;
-    export default {
+var search;
-  data () {
+var markers;
+var geocoder;
+var infoWindowList;
+export default {
+  data() {
     return {
       visible: false,
       dataForm: {
-        id: '',
+        id: "",
-        customerId: '',
+        customerId: "",
-        orgId: '',
+        orgId: "",
-        orgName: '',
+        orgName: "",
-        pid: '',
+        pid: "",
-        pids: '',
+        pids: "",
-        name: '',
+        name: "",
-        inoculationDate: '',
+        inoculationDate: "",
-        moStartTime: '',
+        moStartTime: "",
-        moEndTime: '',
+        moEndTime: "",
-        afStartTime: '',
+        afStartTime: "",
-        afEndTime: '',
+        afEndTime: "",
-        noAvailableVaccines: '',
+        noAvailableVaccines: "",
-        mobile: '',
+        mobile: "",
-        address: '',
+        address: "",
-        longitude: '',
+        longitude: "120.38945519",
-        latitude: ''
+        latitude: "36.0722275",
-      }
+      },
-    }
+      keyWords: null,
+      organizationList: [],
+    };
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         customerId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         orgId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         orgName: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         inoculationDate: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         moStartTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         moEndTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         afStartTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         afEndTime: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         noAvailableVaccines: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         mobile: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         address: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         longitude: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         latitude: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
-        ]
+            required: true,
-      }
+            message: this.$t("validate.required"),
-    }
+            trigger: "blur",
+          },
+        ],
+      };
+    },
+  },
+  mounted() {
+    this.getFormInfo();
+    this.initMap();
   },
   methods: {
-    init () {
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
-      this.visible = true
+    initMap() {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519);
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById("map_app"), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45, // 设置地图旋转角度
+      });
+      search = new window.TMap.service.Search({ pageSize: 10 });
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: [],
+      });
+      infoWindowList = Array(10);
+      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+      // 监听地图平移结束
+      map.on("panend", () => {
+        this.handleMoveCenter();
+      });
+      this.handleMoveCenter();
+      this.convert();
+    },
+    handleMoveCenter() {
+      //修改地图中心点
+      const center = map.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      this.dataForm.latitude = lat;
+      this.dataForm.longitude = lng;
+      this.setMarker(lat, lng);
+      this.convert(lat, lng);
+    },
+    // 地图查询
+    handleSearchMap() {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close();
+      });
+      infoWindowList.length = 0;
+      markers.setGeometries([]);
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.keyWords,
+          bounds: map.getBounds(),
+        })
+        .then((result) => {
+          let { data } = result;
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng },
+            } = data[0];
+            map.setCenter(new TMap.LatLng(lat, lng));
+            this.setMarker(lat, lng);
+            this.dataForm.latitude = lat;
+            this.dataForm.longitude = lng;
+            this.convert();
+          } else {
+            this.$message.error("未检索到相关位置坐标");
+          }
+        });
+    },
+    convert(lat, lng) {
+      markers.setGeometries([]);
+      // var input = document.getElementById('location').value.split(',');
+      let location;
+      if (lat && lng) {
+        location = new TMap.LatLng(lat, lng);
+      } else {
+        location = new TMap.LatLng(
+          this.dataForm.latitude,
+          this.dataForm.longitude
+        );
+      }
+
+      // map.setCenter(location);
+      markers.updateGeometries([
+        {
+          id: "main", // 点标注数据数组
+          position: location,
+        },
+      ]);
+      geocoder
+        .getAddress({ location: location }) // 将给定的坐标位置转换为地址
+        .then((result) => {
+          this.dataForm.address = result.result.address;
+          // 显示搜索到的地址
+        });
+    },
+
+    setMarker(lat, lng) {
+      markers.setGeometries([]);
+      markers.add([
+        {
+          id: "4",
+          styleId: "marker",
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: "marker4",
+          },
+        },
+      ]);
+    },
+    // 获取所属组织列表
+    getFormInfo() {
+      this.$http
+        .post(`/gov/org/agency/community-list`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.organizationList = res.data;
+        })
+        .catch(() => {});
+    },
+    init() {
+      this.visible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 获取信息
-    getInfo () {
+    getInfo() {
-      this.$http.get(`/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`).then(({ data: res }) => {
+      this.$http
-        if (res.code !== 0) {
+        .get(`/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`)
-          return this.$message.error(res.msg)
+        .then(({ data: res }) => {
-        }
+          if (res.code !== 0) {
-        this.dataForm = {
+            return this.$message.error(res.msg);
-          ...this.dataForm,
+          }
-          ...res.data
+          this.dataForm = {
-        }
+            ...this.dataForm,
-      }).catch(() => {})
+            ...res.data,
+          };
+        })
+        .catch(() => {});
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
+    dataFormSubmitHandle: debounce(
-        console.log(this.dataForm)
+      function () {
-      // this.$refs['dataForm'].validate((valid) => {
+        console.log(this.dataForm);
-      //   if (!valid) {
+        // this.$refs['dataForm'].validate((valid) => {
-      //     return false
+        //   if (!valid) {
-      //   }
+        //     return false
-      //   this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/icPointVaccinesInoculation/', this.dataForm).then(({ data: res }) => {
+        //   }
-      //     if (res.code !== 0) {
+        //   this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/icPointVaccinesInoculation/', this.dataForm).then(({ data: res }) => {
-      //       return this.$message.error(res.msg)
+        //     if (res.code !== 0) {
-      //     }
+        //       return this.$message.error(res.msg)
-      //     this.$message({
+        //     }
-      //       message: this.$t('prompt.success'),
+        //     this.$message({
-      //       type: 'success',
+        //       message: this.$t('prompt.success'),
-      //       duration: 500,
+        //       type: 'success',
-      //       onClose: () => {
+        //       duration: 500,
-      //         this.visible = false
+        //       onClose: () => {
-      //         this.$emit('refreshDataList')
+        //         this.visible = false
-      //       }
+        //         this.$emit('refreshDataList')
-      //     })
+        //       }
-      //   }).catch(() => {})
+        //     })
-      // })
+        //   }).catch(() => {})
-    }, 1000, { 'leading': true, 'trailing': false })
+        // })
-  }
+      },
-}
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>

src/views/modules/plugins/point/icpointvaccinesinoculation.vue

@@ -1,38 +1,133 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-user__icPointVaccinesInoculation}">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
           <el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{
+            $t("add")
+          }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+          <el-button type="danger" @click="deleteHandle()">{{
+            $t("deleteBatch")
+          }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+      <el-table
-        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        v-loading="dataListLoading"
-        <el-table-column prop="orgName" label="所属组织名称" header-align="center" align="center"></el-table-column>
+        :data="dataList"
-        <el-table-column prop="name" label="疫苗接种点名称" header-align="center" align="center"></el-table-column>
+        border
-        <el-table-column prop="inoculationDate" label="接种日期" header-align="center" align="center"></el-table-column>
+        @selection-change="dataListSelectionChangeHandle"
-        <el-table-column prop="moStartTime" label="接种上午开始时间" header-align="center" align="center"></el-table-column>
+        style="width: 100%"
-        <el-table-column prop="moEndTime" label="接种上午结束时间" header-align="center" align="center"></el-table-column>
+      >
-        <el-table-column prop="afStartTime" label="接种下午开始时间" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column prop="afEndTime" label="接种下午结束时间" header-align="center" align="center"></el-table-column>
+          type="selection"
-        <el-table-column prop="noAvailableVaccines" label="暂无疫苗（1：是；2：否）" header-align="center" align="center"></el-table-column>
+          header-align="center"
-        <el-table-column prop="mobile" label="咨询电话" header-align="center" align="center"></el-table-column>
+          align="center"
-        <el-table-column prop="address" label="接种点地址" header-align="center" align="center"></el-table-column>
+          width="50"
-        <el-table-column prop="longitude" label="经度" header-align="center" align="center"></el-table-column>
+        ></el-table-column>
-        <el-table-column prop="latitude" label="纬度" header-align="center" align="center"></el-table-column>
+        <el-table-column
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          prop="orgName"
+          label="所属组织名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="疫苗接种点名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="inoculationDate"
+          label="接种日期"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="moStartTime"
+          label="接种上午开始时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="moEndTime"
+          label="接种上午结束时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="afStartTime"
+          label="接种下午开始时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="afEndTime"
+          label="接种下午结束时间"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="noAvailableVaccines"
+          label="暂无疫苗（1：是；2：否）"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="mobile"
+          label="咨询电话"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="接种点地址"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="longitude"
+          label="经度"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="latitude"
+          label="纬度"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button
-            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+              >{{ $t("update") }}</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+              >{{ $t("delete") }}</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -43,35 +138,47 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <el-dialog
+        :visible.sync="addOrUpdateVisible"
+        :title="!dataForm.id ? $t('add') : $t('update')"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :destroy-on-close="true"
+      >
+        <add-or-update
+          ref="addOrUpdate"
+          @refreshDataList="getDataList"
+        ></add-or-update>
+      </el-dialog>
     </div>
   </el-card>
 </template>
 
 <script>
-    import mixinViewModule from '@/mixins/view-module'
+import mixinViewModule from "@/mixins/view-module";
-    import AddOrUpdate from './icpointvaccinesinoculation-add-or-update'
+import AddOrUpdate from "./icpointvaccinesinoculation-add-or-update";
 
-    export default {
+export default {
   mixins: [mixinViewModule],
-  data () {
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/epmetuser/icPointVaccinesInoculation/page',
+        getDataListURL: "/epmetuser/icPointVaccinesInoculation/page",
         getDataListIsPage: true,
-        deleteURL: '/epmetuser/icPointVaccinesInoculation',
+        deleteURL: "/epmetuser/icPointVaccinesInoculation",
-        deleteIsBatch: true
+        deleteIsBatch: true,
       },
       dataForm: {
-        id: ''
+        id: "",
-      }
+      },
-    }
+    };
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
-  }
+  },
-}
+};
 </script>