|
@@ -12,11 +12,14 @@ import cloneDeep from 'lodash/cloneDeep';
|
|
import div from '@/components/div';
|
|
import div from '@/components/div';
|
|
import { useCommonStore, useIncidentStore } from '@/store';
|
|
import { useCommonStore, useIncidentStore } from '@/store';
|
|
import QueryMap from '@/components/QueryMap';
|
|
import QueryMap from '@/components/QueryMap';
|
|
-import { BaseMediaUrl} from '@/utils/index';
|
|
|
|
|
|
+import { BaseMediaUrl } from '@/utils/index';
|
|
|
|
+import { api_getusergps } from '@/service/login';
|
|
// import MediaUpload from '@/components/MediaUpload';
|
|
// import MediaUpload from '@/components/MediaUpload';
|
|
|
|
|
|
/** @ts-ignore */
|
|
/** @ts-ignore */
|
|
import icon_map_location from '@/assets/icons/home/icon_map_location@2x.png';
|
|
import icon_map_location from '@/assets/icons/home/icon_map_location@2x.png';
|
|
|
|
+/** @ts-ignore */
|
|
|
|
+import icon_location from '@/assets/icons/incident/location.png';
|
|
import './index.scss';
|
|
import './index.scss';
|
|
import {
|
|
import {
|
|
DropdownItemOption,
|
|
DropdownItemOption,
|
|
@@ -112,98 +115,114 @@ export default defineComponent({
|
|
};
|
|
};
|
|
|
|
|
|
const getLocation = () => {
|
|
const getLocation = () => {
|
|
- if (navigator.geolocation) {
|
|
|
|
- navigator.geolocation.getCurrentPosition(
|
|
|
|
- (position: GeolocationPosition) => {
|
|
|
|
- console.log(position.coords.longitude);
|
|
|
|
- console.log(position.coords.latitude);
|
|
|
|
- // var location = '118.28,33.97';
|
|
|
|
- var location = `${position.coords.longitude},${position.coords.latitude}`;
|
|
|
|
- fetch(
|
|
|
|
- `https://minedata.cn/service/lbs/reverse/v1/regeo?location=${location}&key=${window.key}`,
|
|
|
|
- )
|
|
|
|
- .then((res) => res.json())
|
|
|
|
- .then((data) => {
|
|
|
|
- // console.log(data)
|
|
|
|
- // console.log(data.regeocodes[0].formatted_address);
|
|
|
|
- var ll = data.regeocodes[0].formatted_address;
|
|
|
|
- if (!window.map) {
|
|
|
|
- Notify({
|
|
|
|
- type: 'danger',
|
|
|
|
- message: '地图插件初始化异常, 请刷新页面 (Ctrl + R)',
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- window.map.flyTo({
|
|
|
|
- center: [
|
|
|
|
- Number(location.split(',')[0]),
|
|
|
|
- Number(location.split(',')[1]),
|
|
|
|
- ],
|
|
|
|
- zoom: 14,
|
|
|
|
- bearing: 0,
|
|
|
|
- pitch: 0,
|
|
|
|
- duration: 2000,
|
|
|
|
- });
|
|
|
|
- if (window.map && window._marker) {
|
|
|
|
- window._marker.remove();
|
|
|
|
- window._marker = null;
|
|
|
|
- }
|
|
|
|
- if (window.map) {
|
|
|
|
- var el = document.createElement('div');
|
|
|
|
- el.id = 'marker';
|
|
|
|
- el.style.backgroundImage = `url(${icon_map_location})`;
|
|
|
|
- el.style.backgroundSize = 'cover';
|
|
|
|
- el.style.width = '24px';
|
|
|
|
- el.style.height = '24px';
|
|
|
|
- el.style.borderRadius = '50%';
|
|
|
|
-
|
|
|
|
- const popup = new window.minemap.Popup({
|
|
|
|
- closeOnClick: false,
|
|
|
|
- closeButton: false,
|
|
|
|
- offset: [0, -15],
|
|
|
|
- }).setText(ll);
|
|
|
|
-
|
|
|
|
- window._marker = new window.minemap.Marker(el, {
|
|
|
|
- offset: [-12, -12],
|
|
|
|
- })
|
|
|
|
- .setLngLat([
|
|
|
|
|
|
+
|
|
|
|
+ api_getusergps().then((res) => {
|
|
|
|
+ var lat = null;
|
|
|
|
+ var lon = null;
|
|
|
|
+ var iserror = false;
|
|
|
|
+ try {
|
|
|
|
+ lat = res.result[0].lat;
|
|
|
|
+ lon = res.result[0].lon;
|
|
|
|
+ if (lat == null || lat == undefined) iserror = true;
|
|
|
|
+ } catch (e) {
|
|
|
|
+ iserror = true;
|
|
|
|
+ }
|
|
|
|
+ if (!iserror) {
|
|
|
|
+ var location = `${lon},${lat}`;
|
|
|
|
+ fetch(
|
|
|
|
+ `https://minedata.cn/service/lbs/reverse/v1/regeo?location=${location}&key=${window.key}`,
|
|
|
|
+ {
|
|
|
|
+ method: 'GET',
|
|
|
|
+ headers: new Headers({
|
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
|
+ }),
|
|
|
|
+ },
|
|
|
|
+ )
|
|
|
|
+ .then((res) => res.json())
|
|
|
|
+ .then((data) => {
|
|
|
|
+ // console.log(data)
|
|
|
|
+ // console.log(data.regeocodes[0].formatted_address);
|
|
|
|
+ var ll = data.regeocodes[0].formatted_address;
|
|
|
|
+ if (!window.map) {
|
|
|
|
+ Notify({
|
|
|
|
+ type: 'danger',
|
|
|
|
+ message: '地图插件初始化异常, 请刷新页面 (Ctrl + R)',
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ window.map.flyTo({
|
|
|
|
+ center: [
|
|
Number(location.split(',')[0]),
|
|
Number(location.split(',')[0]),
|
|
Number(location.split(',')[1]),
|
|
Number(location.split(',')[1]),
|
|
- ])
|
|
|
|
- .setPopup(popup)
|
|
|
|
- .addTo(window.map);
|
|
|
|
- }
|
|
|
|
- window._marker.togglePopup();
|
|
|
|
- // var ll =
|
|
|
|
- // data.regeocodes[0].formatted_address.replaceAll(
|
|
|
|
- // '江苏省宿迁市',
|
|
|
|
- // "");
|
|
|
|
-
|
|
|
|
- form.value.locations = location;
|
|
|
|
- form.value.addr = ll;
|
|
|
|
- });
|
|
|
|
- // minemap.service
|
|
|
|
- // .adminByPointData({
|
|
|
|
- // location: `${position.coords.longitude},${position.coords.latitude}`,
|
|
|
|
- // })
|
|
|
|
- // .then(function (response) {
|
|
|
|
- // console.log(response.data);
|
|
|
|
- // })
|
|
|
|
- // .catch(function (error) {
|
|
|
|
- // console.error(error);
|
|
|
|
- // });
|
|
|
|
- },
|
|
|
|
- (ee) => {
|
|
|
|
- console.log(ee);
|
|
|
|
- },
|
|
|
|
- );
|
|
|
|
- } else {
|
|
|
|
- Notify({
|
|
|
|
- type: 'danger',
|
|
|
|
- message: 'App不支持地理定位。',
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
|
|
+ ],
|
|
|
|
+ zoom: 14,
|
|
|
|
+ bearing: 0,
|
|
|
|
+ pitch: 0,
|
|
|
|
+ duration: 2000,
|
|
|
|
+ });
|
|
|
|
+ if (window.map && window._marker) {
|
|
|
|
+ window._marker.remove();
|
|
|
|
+ window._marker = null;
|
|
|
|
+ }
|
|
|
|
+ if (window.map) {
|
|
|
|
+ var el = document.createElement('div');
|
|
|
|
+ el.id = 'marker';
|
|
|
|
+ el.style.backgroundImage = `url(${icon_map_location})`;
|
|
|
|
+ el.style.backgroundSize = 'cover';
|
|
|
|
+ el.style.width = '24px';
|
|
|
|
+ el.style.height = '24px';
|
|
|
|
+ el.style.borderRadius = '50%';
|
|
|
|
+
|
|
|
|
+ const popup = new window.minemap.Popup({
|
|
|
|
+ closeOnClick: false,
|
|
|
|
+ closeButton: false,
|
|
|
|
+ offset: [0, -15],
|
|
|
|
+ }).setText(ll);
|
|
|
|
+
|
|
|
|
+ window._marker = new window.minemap.Marker(el, {
|
|
|
|
+ offset: [-12, -12],
|
|
|
|
+ })
|
|
|
|
+ .setLngLat([
|
|
|
|
+ Number(location.split(',')[0]),
|
|
|
|
+ Number(location.split(',')[1]),
|
|
|
|
+ ])
|
|
|
|
+ .setPopup(popup)
|
|
|
|
+ .addTo(window.map);
|
|
|
|
+ }
|
|
|
|
+ window._marker.togglePopup();
|
|
|
|
+ // var ll =
|
|
|
|
+ // data.regeocodes[0].formatted_address.replaceAll(
|
|
|
|
+ // '江苏省宿迁市',
|
|
|
|
+ // "");
|
|
|
|
+
|
|
|
|
+ form.value.locations = location;
|
|
|
|
+ form.value.addr = ll;
|
|
|
|
+ });
|
|
|
|
+ // minemap.service
|
|
|
|
+ // .adminByPointData({
|
|
|
|
+ // location: `${position.coords.longitude},${position.coords.latitude}`,
|
|
|
|
+ // })
|
|
|
|
+ // .then(function (response) {
|
|
|
|
+ // console.log(response.data);
|
|
|
|
+ // })
|
|
|
|
+ // .catch(function (error) {
|
|
|
|
+ // console.error(error);
|
|
|
|
+ // });
|
|
|
|
+
|
|
|
|
+ // (ee) => {
|
|
|
|
+ // console.log(ee);
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ Notify({
|
|
|
|
+ type: 'danger',
|
|
|
|
+ message: 'App不支持地理定位。',
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
@@ -374,17 +393,24 @@ export default defineComponent({
|
|
type="textarea"
|
|
type="textarea"
|
|
placeholder="请输入"
|
|
placeholder="请输入"
|
|
/>
|
|
/>
|
|
- <Field
|
|
|
|
- v-model={form.value.addr}
|
|
|
|
- name="事件地点"
|
|
|
|
- label="事件地点"
|
|
|
|
- placeholder="请输入"
|
|
|
|
- required
|
|
|
|
- onChange={(add: string) => {
|
|
|
|
- addr.value = add.target.value;
|
|
|
|
- }}
|
|
|
|
- rules={[{ required: true, message: '事件地点必填' }]}
|
|
|
|
- />
|
|
|
|
|
|
+ <div style={"position:relative"}>
|
|
|
|
+ <Field
|
|
|
|
+ v-model={form.value.addr}
|
|
|
|
+ name="事件地点"
|
|
|
|
+ label="事件地点"
|
|
|
|
+ placeholder="请输入"
|
|
|
|
+ required
|
|
|
|
+ style={'width:85%'}
|
|
|
|
+ onChange={(add: string) => {
|
|
|
|
+ addr.value = add.target.value;
|
|
|
|
+ }}
|
|
|
|
+ rules={[{ required: true, message: '事件地点必填' }]}
|
|
|
|
+ />
|
|
|
|
+ <Button style={'border:none;position:absolute;right:10px;top:0'} onClick={() => { getLocation();}}>
|
|
|
|
+ <img style={'width:20px;height:20px'} src={icon_location} />
|
|
|
|
+ </Button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<QueryMap
|
|
<QueryMap
|
|
address={addr.value}
|
|
address={addr.value}
|
|
v-model:locations={form.value.locations}
|
|
v-model:locations={form.value.locations}
|