import { ref, defineComponent, computed, onMounted, onUnmounted, reactive, } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import { upload, UploadData } from '@/api/common'; import cloneDeep from 'lodash/cloneDeep'; import div from '@/components/div'; import { useCommonStore, useIncidentStore } from '@/store'; import QueryMap from '@/components/QueryMap'; import { BaseMediaUrl } from '@/utils/index'; import { api_getusergps } from '@/service/login'; // import MediaUpload from '@/components/MediaUpload'; /** @ts-ignore */ 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 { DropdownItemOption, NavBar, DropdownMenu, DropdownItem, Icon, PullRefresh, Sticky, Collapse, CollapseItem, Loading, Form, Field, CellGroup, Popup, Picker, ActionBar, Button, Notify, Uploader, UploaderFileListItem, Toast, } from 'vant'; import { isArray } from 'lodash'; export default defineComponent({ name: 'IncidentManagementReport', setup() { const store = useIncidentStore(); const commonStore = useCommonStore(); const detail = computed(() => store.incidentDetail?.baseInfo); const addr = ref(''); const form = ref({ ...detail.value }); const formRef = ref(); const showCreateByPicker = ref(false); const showCreateByDeptPicker = ref(false); const showCreateTypeByPicker = ref(false); const route = useRoute(); const router = useRouter(); const isshowprew = ref(false); const videosrclist = reactive([]); const imagessrclist = reactive([]); const videop = ref(); const videopsrc = ref(""); const handleUpload = (file) => { upload(file).then((res) => { let type = /\w+([.jpg|.png|.gif|.swf|.bmp|.jpeg]){1}$/.test( res.data.fileName?.substr( res.data.fileName?.lastIndexOf('.') + 1 ) ?? '', ); if (!type) { videosrclist.push(res.data); } else { imagessrclist.push(res.data);; } }).catch((error)=>{ }); }; const handleSaveReport = async () => { const { id } = route.query; const saveFn = id ? store.putIncidentItem : store.postIncidentItem; // console.log(formRef); const result = await saveFn({ ...form.value, // level: Number(form.value.level) ?? null, // type: Number(form.value.type) ?? null, pic: imagessrclist.map((i: UploadData) => i.url).join(','), video: videosrclist.map((i: UploadData) => i.url).join(','), source: '1', // status: route.params.status as unknown as number, }); if (result) { router.push("/") } }; const getLocation = () => { 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(',')[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([ 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 () => { commonStore.getGlobalDict('zhdd_incident_level'); commonStore.getGlobalDict('zhdd_incident_type'); commonStore.getGlobalDict('zhdd_org_upload'); try { getLocation(); } catch (E) { } route.query.id && (await store.getIncidentItem(route.query.id as string)); addr.value = detail?.value?.addr ?? ''; if (detail.value) { form.value = cloneDeep(detail.value); } }); onUnmounted(() => { commonStore.uploadFiles = []; store.incidentDetail = {}; store.incidentDetail = { baseInfo: {}, process: [], task: [], }; }); return () => (
{ // router.push('/home') uni.postMessage({ data: 'test', }); uni.navigateBack(); }} /> { videop.value.pause(); }}>
{/* (showCreateByDeptPicker.value = true)} /> (showCreateTypeByPicker.value = true)} /> ({ text: i.dictLabel, value: i.dictValue }), )} onConfirm={(value) => { form.value.typeText = value.text; form.value.type = value.value; console.log(value, '---'); showCreateTypeByPicker.value = false; }} onCancel={() => { showCreateTypeByPicker.value = false; }} /> (showCreateByPicker.value = true)} /> ({ text: i.dictLabel, value: i.dictValue }), )} onConfirm={(value) => { form.value.levelText = value.text; form.value.level = value.value; console.log(value, '---'); showCreateByPicker.value = false; }} onCancel={() => { showCreateByPicker.value = false; }} /> ({ text: i.dictLabel, value: i.dictValue }), )} onConfirm={(value) => { form.value.createDeptText = value.text; form.value.createDept = value.value; console.log(value, '---'); showCreateByDeptPicker.value = false; }} onCancel={() => { showCreateByDeptPicker.value = false; }} /> */}
{ addr.value = add.target.value; }} rules={[{ required: true, message: '事件地点必填' }]} />
{ form.value.addr = name; }} onRestPositon={() => { addr.value = store.incidentDetail.baseInfo?.addr ?? ''; form.value.addr = store.incidentDetail.baseInfo?.addr; form.value.locations = store.incidentDetail.baseInfo?.locations; }} /> ( { Toast('最大支持20M的图片'); }} onDelete={(filep, detail) => { imagessrclist.splice(detail.index, 1); console.log(imagessrclist); }} afterRead={( file: UploaderFileListItem | UploaderFileListItem[], ) => { handleUpload((isArray(file) ? file[0] : file).file); return false; }} /> ), }} /> ( { Toast('最大支持100M的视屏'); }} afterRead={( file: UploaderFileListItem | UploaderFileListItem[], ) => { handleUpload((isArray(file) ? file[0] : file).file); return false; }} onDelete={(filep, detail) => { videosrclist.splice(detail.index, 1); console.log(videosrclist); }} onClick-preview={(index) => { isshowprew.value = true; try { videopsrc.value = URL.createObjectURL(index.file); videop.value.play(); videop.value.currentTime = 0; } catch (error) {} }} // v-slots={{ // 'preview-cover': () => ( // // ), // }} /> ), }} />
); }, });