squi-mobile/src/views/IncidentManagementReport/index.tsx

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 { useCommonStore, useIncidentStore, useMainStore } from '@/store';
import QueryMap from '@/components/QueryMap';
import Map from '@/components/MapView';
import { BaseMediaUrl,isImage,isVideo } from '@/utils/index';
import { api_getusergps } from '@/service/login';
import { api_getuserInfo } from '@/service/warehouse';
// 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';

/** @ts-ignore */
import icon_location_svg1 from '@/assets/icons/incident/location1.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,
  DatetimePicker

} from 'vant';
import { isArray } from 'lodash';
import moment from 'moment';

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 currentDate=ref(new Date());

    const route = useRoute();
    const router = useRouter();
    const isshowprew = ref(false);
    const videosrclist = reactive([]);
    const imagessrclist = reactive([]);
    const videop = ref();
    const videopsrc = ref('');

    const isshowmove = ref(false);
    const state = reactive({
      map: null,
      _marker: null,
      loading: false,
      postition: {
        longitude: '',
        latitude: '',
        name: '',
      },
    });
    let allmark:Array<any> = [];

    const handleUpload = (file) => {
      Toast.loading({
        message: '上传中...',
        duration: 0,
        forbidClick: true,
      });
      upload(file)
        .then((res) => {
          Toast.clear();
          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) => {
          Toast.clear();
        });
    };

    const handleSaveReport = async () => {
      const { id } = route.query;

      const saveFn = id ? store.putIncidentItem : store.postIncidentItem;
      // console.log(formRef);
      form.value.happenTime = moment(form.value.happenTime).format(
        'YYYY-MM-DD HH:mm:ss',
      );

      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不支持地理定位。',
    //       });
    //     }
    //   });
    // };

    const selectpoint = () => {
      if (isshowmove.value) {
        var center = state.map.getCenter();
        getlocalname(center.lng.toFixed(6) + ',' + center.lat.toFixed(6));
      } else {
        isshowmove.value = true;
        if (state.map && state._marker) {
          state._marker.remove();
        }
      }
    };
    const setpoint = (longitude, latitude, name) => {
      if (state._marker) {
        state._marker.remove();
      }

      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(name);

      state._marker = new window.minemap.Marker(el, {
        offset: [-12, -12],
      })
        .setLngLat([longitude, latitude])
        .setPopup(popup)
        .addTo(state.map);
      state.map.flyTo({
        center: [longitude, latitude],
        zoom: 14,
        bearing: 0,
        pitch: 0,
        duration: 2000,
      });
      state._marker.togglePopup();
      form.value.addr = name;
      form.value.locations = longitude + ',' + latitude;
      // whdata.value.longitude = longitude;
      isshowmove.value = false;
    };


    const dores = (data) => {
       // console.log(data.pois)
          var clearallmark = () => {
            if (state.map && state._marker) {
              state._marker.remove();
            }
            if (allmark.length > 0) {
              allmark.map((item) => {
                item.remove();
              });
              allmark = [];
            }
          };
          clearallmark();
          var top = [];
          var bottom = [];
          data.pois.map((item) => {
            if (top.length < 1) {
              top = [
                Number(item.location.split(',')[0]),
                Number(item.location.split(',')[1]),
              ];
              bottom = [
                Number(item.location.split(',')[0]),
                Number(item.location.split(',')[1]),
              ];
            }
            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%';
            el.onclick = () => {
              clearallmark();
              setpoint(
                Number(item.location.split(',')[0]),
                Number(item.location.split(',')[1]),
                item.name,
              );
            };

            const popup = new window.minemap.Popup({
              closeOnClick: false,
              closeButton: false,
              offset: [0, -15],
            }).setText(item.name);

            var mark = new window.minemap.Marker(el, {
              offset: [-12, -12],
            })
              .setLngLat([
                Number(item.location.split(',')[0]),
                Number(item.location.split(',')[1]),
              ])
              .setPopup(popup)
              .addTo(state.map);
            allmark.push(mark);
            mark.togglePopup();
            if (top[0] < Number(item.location.split(',')[0])) {
              top[0] = Number(item.location.split(',')[0]);
            }
            if (top[1] > Number(item.location.split(',')[1])) {
              top[1] = Number(item.location.split(',')[1]);
            }
            if (bottom[0] > Number(item.location.split(',')[0])) {
              bottom[0] = Number(item.location.split(',')[0]);
            }
            if (bottom[1] < Number(item.location.split(',')[1])) {
              bottom[1] = Number(item.location.split(',')[1]);
            }
          });
          state.map.fitBounds([top, bottom]);
     }

    const searchaddr = () => {
      isshowmove.value = false;
      fetch(
        `https://tocc.jtj.suqian.gov.cn:21100/service/lbs/search/v1/keywords?keywords=${form.value.addr}&city=宿迁&citylimit=true&page_idx=1&page_size=10&key=${window.key}`,
      )
        .then((res) => res.json())
        .then((data) => {
          dores(data);
        });
    };
    const getlocalname = (location) => {
      fetch(
        // `https://service.minedata.cn/service/lbs/reverse/v1/regeo?location=${location}&key=77ef70465c2d4888b3a5132523494b94`,
        `https://tocc.jtj.suqian.gov.cn:21100/service/lbs/search/v1/around?location=${location}&key=${window.key}`
      )
        .then((res) => res.json())
        .then((data) => {
          dores(data);
          // setpoint(
          //   Number(location.split(',')[0]),
          //   Number(location.split(',')[1]),
          //   data.regeocodes[0].formatted_address,
          // );
        });
    };
    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) {
          //  debugger
          var location = `${lon},${lat}`;
          getlocalname(location);
          //  setpoint(lon,lat,data.regeocodes[0].formatted_address)
        } else {
          // Notify({
          //   type: 'danger',
          //   message: 'App不支持地理定位。',
          // });
        }
      });
    };

    try {
      api_getuserInfo().then((res) => { 
         try {
           getLocation();
         } catch (E) {}

      });
    } catch (e) {
      Toast.fail({ message: e + '' });
    }

   
    onMounted(async () => {
      commonStore.getGlobalDict('zhdd_incident_level');
      commonStore.getGlobalDict('zhdd_incident_type');
      commonStore.getGlobalDict('zhdd_org_upload');

      

      route.query.id && (await store.getIncidentItem(route.query.id as string));
      addr.value = detail?.value?.addr ?? '';
      if (detail.value) {
        form.value = cloneDeep(detail.value);
        
      }
      form.value.happenTime = moment(new Date()).format('YYYY-MM-DD HH:mm');
    });

    onUnmounted(() => {
      commonStore.uploadFiles = [];
      store.incidentDetail = {};
      store.incidentDetail = {
        baseInfo: {},
        process: [],
        task: [],
      };
    });

    return () => (
      <div class="incident-report-container ">
        <NavBar
          title="应急事件上报"
          left-arrow
          fixed
          onClick-left={() => {
            // router.push('/home')
            //  uni.postMessage({
            //    data: 'test',
            //  });
            try {
              uni.navigateBack();
            } catch (E) {}
          }}
          onClick-right={() =>{
            useMainStore().gotohelp("be2dc45c2e644314a6b5a1ff2bf24420");
          }
          }
          v-slots={{ right: () => <Icon size="18" name="question-o" />  }}

          
        />
        <Popup
          style="width:100%;background:rgba(0,0,0,0)"
          v-model:show={isshowprew.value}
          onClose={() => {
            videop.value.pause();
          }}>
          <video
            ref={videop}
            src={videopsrc.value}
            controls
            autoplay="true"
            style="width:100%"></video>
        </Popup>
        <Form>
          <CellGroup>
            <Field
              v-model={form.value.name}
              name="事件标题"
              label="事件标题"
              placeholder="请输入"
              required
              rules={[{ required: true, message: '事件标题必填' }]}
            />
            <Field
              v-model={form.value.happenTime}
              // rows={2}
              // autosize
              readonly
              is-link
              name="发生时间"
              label="发生时间"
              rules={[{ required: true, message: '事件发生时间必填' }]}
              // type="textarea"
              required
              placeholder="点击选择时间"
              onClick={() => (showCreateByDeptPicker.value = true)}
            />
            <Popup
              v-model:show={showCreateByDeptPicker.value}
              position="bottom">
              <DatetimePicker
                v-model={currentDate.value}
                type="datetime"
                title="选择时间"
                onConfirm={(value) => {
                  //
                  form.value.happenTime =
                    moment(value).format('YYYY-MM-DD HH:mm');;
                  // form.value.type = value.value;
                  console.log(value, '---');

                  showCreateByDeptPicker.value = false;
                }}
                onCancel={() => {
                  showCreateByDeptPicker.value = false;
                }}
              />
            </Popup>
            {/* <Field
              v-model={form.value.createBy}
              name="上报人"
              label="上报人"
              placeholder="请输入"
              required
              rules={[{ required: true, message: '上报人必填' }]}
            />
            <Field
              v-model={form.value.createDeptText}
              name="上报单位"
              is-link
              readonly
              label="上报单位"
              placeholder="请选择"
              required
              rules={[{ required: true, message: '上报单位必填' }]}
              onClick={() => (showCreateByDeptPicker.value = true)}
            />
            <Field
              v-model={form.value.typeText}
              is-link
              readonly
              name="事件类型"
              label="事件类型"
              placeholder="请选择"
              required
              rules={[{ required: true, message: '事件类型必填' }]}
              onClick={() => (showCreateTypeByPicker.value = true)}
            />
            <Popup
              v-model:show={showCreateTypeByPicker.value}
              position="bottom">
              <Picker
                columns={commonStore.globalDict['zhdd_incident_type']?.map(
                  (i) => ({ 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;
                }}
              />
            </Popup>
            <Field
              v-model={form.value.levelText}
              is-link
              readonly
              name="事件等级"
              label="事件等级"
              placeholder="请选择"
              required
              rules={[{ required: true, message: '事件等级必填' }]}
              onClick={() => (showCreateByPicker.value = true)}
            />
            <Popup v-model:show={showCreateByPicker.value} position="bottom">
              <Picker
                columns={commonStore.globalDict['zhdd_incident_level']?.map(
                  (i) => ({ 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;
                }}
              />
            </Popup>

            <Popup
              v-model:show={showCreateByDeptPicker.value}
              position="bottom">
              <Picker
                columns={commonStore.globalDict['zhdd_org_upload']?.map(
                  (i) => ({ 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;
                }}
              />
            </Popup> */}
            <Field
              v-model={form.value.des}
              rows={2}
              autosize
              name="事件描述"
              label="事件描述"
              type="textarea"
              placeholder="请输入"
            />
            <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: '事件地点必填' }]}
                v-slots={{
                  button: () => {
                    return (
                      <van-button
                        size="small"
                        type="primary"
                        color="#f2f4fa"
                        onClick={searchaddr}>
                        <van-icon color="black" name="search" />
                      </van-button>
                    );
                  },
                }}></Field>
              {/* <Button
                style={'border:none;position:absolute;right:10px;top:0'}
                onClick={() => {
                  getLocation();
                }}>
                <img style={'width:20px;height:20px'} src={icon_location} />
              </Button> */}
            </div>

            {/* <QueryMap
              address={addr.value}
              v-model:locations={form.value.locations}
              v-model:longitude={(form.value.locations ?? '').split(',')[0]}
              v-model:latitude={(form.value.locations ?? '').split(',')[1]}
              onChoose={(name) => {
                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;
              }}
            /> */}
            {
              <div style="padding: 15px; background: #fff; position: relative">
                <Map
                  v-model:map={state.map}
                  style={
                    'height: 240px;borderradius: 2px;boxshadow: 0px 0px 0px 1px #d9d9d9;'
                  }
                />
                {isshowmove.value ? (
                  <div class="mark">
                    <img src={icon_map_location} />
                  </div>
                ) : (
                  ''
                )}

                <div class="marklocation" onClick={getLocation}>
                  <img src={icon_location_svg1} />
                </div>
                <div style={'position: absolute; right: 21px; top: 21px'}>
                  <van-button type="primary" size="mini" onClick={selectpoint}>
                    {isshowmove.value ? '确定' : '选点'}
                  </van-button>
                </div>
              </div>
            }

            <Field
              name="上传图片"
              label="上传图片"
              placeholder="请输入"
              v-slots={{
                input: () => (
                  <Uploader
                    accept="image/*"
                    v-model={form.value.pic}
                    max-size={20 * 1024 * 1024}
                    onOversize={() => {
                      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;
                    }}
                  />
                ),
              }}
            />

            <Field
              name="上传视频"
              label="上传视频"
              placeholder="请输入"
              v-slots={{
                input: () => (
                  <Uploader
                    accept="video/*"
                    v-model={form.value.video}
                    max-size={100 * 1024 * 1024}
                    onOversize={() => {
                      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': () => (
                    // <video
                    // style="width:100%;height:100%"
                    // controls
                    // src="https://vod-progressive.akamaized.net/exp=1643032410~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2673%2F7%2F188365455%2F623960082.mp4~hmac=e4a0fb352e805ff4fe74317441bf6f6deb059508cc7bb2f7aa92884023b13818/vimeo-prod-skyfire-std-us/01/2673/7/188365455/623960082.mp4?filename=Emoji+Saver+-+Drama.mp4"></video>
                    // ),
                    // }}
                  />
                ),
              }}
            />
          </CellGroup>
          <div style={{ height: '80px' }}></div>

          <ActionBar>
            <div style={{ padding: '10px 20px' }}>
              <Button block type="primary" onClick={handleSaveReport}>
                提交
              </Button>
            </div>
          </ActionBar>
        </Form>
      </div>
    );
  },
});