1

src/view/case/draw/edit-shape/bgImage.vue

@@ -10,6 +10,11 @@
     />
   </el-form-item>
   <Del @delete="$emit('delete')" />
+  <div style="width: 100%">
+    <el-form-item label="裁剪：">
+      <el-button type="primary" @click="$emit('cropping')">裁剪</el-button>
+    </el-form-item>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, watchEffect } from "vue";

src/view/case/draw/eshape.vue

@@ -10,6 +10,7 @@
         :is="editComponent"
         :shape="props.shape"
         @delete="delHandler"
+        @cropping="emit('cropping', null, $event)"
         @inputIng="(bol) => (inputIng = bol)"
         @blur="emit('update:shape', null)"
       />
@@ -26,6 +27,7 @@ import { inputIng } from "./c";
 const props = defineProps<{ shape: BoardShape }>();
 const emit = defineEmits<{
   (e: "update:shape", value: BoardShape | null): void;
+  (e: "cropping", value: BoardShape | null): void;
 }>();
 const editComponent = computed(() => {
   const type = props.shape.data.type;

src/view/case/draw/index.vue

@@ -15,7 +15,7 @@
     />
 
     <div class="df-layout-child">
-      <Eshape v-model:shape="state.selectShape" v-if="state.selectShape" />
+      <Eshape v-model:shape="state.selectShape" v-if="state.selectShape" @cropping="handleCropping" />
       <div class="df-sider">
         <Slider
           :type="props.type"
@@ -50,6 +50,7 @@ import { CaseTagging } from "@/store/caseTagging";
 import saveAs from "@/util/file-serve";
 import { BoardTypeDesc } from "@/constant/caseFile";
 import { addByMediaLiBrary, updateByTreeFileLists, uploadNewFile } from "@/store/case";
+import { imageCropper } from "@/view/system/quisk";
 import {
   BoardType,
   SaveCaseFileImageInfo,
@@ -137,6 +138,23 @@ const getStore = async () => {
   return { store, titleShape };
 };
 
+//裁剪
+const handleCropping = async (data) => {
+  const appStore = await getStore();
+  console.log('titleShape', appStore, board.value, state.value);
+  const {width, height } = appStore.store.floors?.[0].bgImage;
+  const blob = await fetch(state.value.selectShape.data.url).then(res => res.blob());
+  const cropBlob = await imageCropper({
+      img: blob,
+      fixed: [width, height]
+     })
+     console.log(cropBlob)
+     setBackImage(cropBlob)
+  // if (data) {
+  //   state.value.croppingData = data;
+  //   board.value!.setCropping(data);
+  // }
+};
 // 保存数据
 const saveHandler = async () => {
   const { store, titleShape } = await getStore();

src/view/case/draw/selectMapImage.vue

@@ -33,17 +33,18 @@
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { Search } from "@element-plus/icons-vue";
 import { wgs84_to_gcj02 } from "./map"
-import { getTipsList, getTipsNames, } from "@/store/case";
-import { ref, watchEffect, onMounted  } from "vue";
+import { getTipsList, getTipsNames, getCaseInfo } from "@/store/case";
+import { ref, watchEffect, onMounted, computed  } from "vue";
 import { QuiskExpose } from "@/helper/mount";
 import { debounce } from "@/util";
 import html2canvas from "html2canvas"
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
+import { router } from "@/router";
 export type MapImage = { blob: Blob | null; search: MapInfo | null };
 type MapInfo = { lat: number; lng: number; zoom: number; text: string; address: string; id: string };
-// const layer = L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
-const layer = L.tileLayer('http://a.map.jms.gd/tile/osm/{z}/{x}/{y}.png')
+const layer = L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
+//const layer = L.tileLayer('http://a.map.jms.gd/tile/osm/{z}/{x}/{y}.png')
 // const layer = L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}&token=YOUR_API_KEY')
 
 
@@ -52,6 +53,7 @@ let clickMarker;
 const keyword = ref("");
 const showSearch = ref(true);
 const info = ref<MapInfo>();
+const caseInfoData = ref<any>(null);
 const searchInfo = ref<MapInfo>();
 const mapEl = ref<HTMLDivElement>();
 const keywordList = ref([]);
@@ -60,11 +62,23 @@ watchEffect(() => {
     showSearch.value = true;
   }
 });
+const caseId = computed(() => {
+  const caseId = router.currentRoute.value.params.caseId;
+  if (caseId) {
+    return Number(caseId);
+  }
+});
+onMounted(async () => {
+  caseInfoData.value = await getCaseInfo(caseId.value);
+  let center = [22.61, 113.05];
+  if(caseInfoData.value.latAndLong){
+    center = caseInfoData.value.latAndLong.split(",")
+  }
+  console.log("caseInfoData", caseInfoData.value.latAndLong, center);
 
-onMounted(() => {
   // 'map'为HTML节点id
   map = L.map(mapEl.value, {
-    center: [22.61, 113.05],//中心坐标
+    center: center,//中心坐标
     zoom: 10,//缩放级别
     zoomControl: true, //缩放组件
     attributionControl: false, //去掉右下角logol

src/view/case/records/index.vue

@@ -505,7 +505,7 @@ const data = reactive({
   address: "", // 勘验地址
   inquestTime: "", //勘验时间
   inquestResource:
-    "报警人：xxx（性别：xxx 电话：xxx）报警称：xxx发生一起：xxx案，现场需勘察。接报后技术科科长：xxx带领技术员：xxx、法医：xxx立即赶赴现场进行勘察.", //勘验范围
+    "x年x月x日x单位接到报警称;x年x月x日x地点发生一起什么案事件，需要勘验现场， 接通知后，技术员xx,xx前往现场考察", //勘验范围
   protector: {
     name: "",
     unit: "",
@@ -530,7 +530,7 @@ const data = reactive({
     unit: "",
     job: "",
   }, //现场勘验指挥人
-  inquestSituation: "", //现场勘验情况
+  inquestSituation: "案发现场以XXX小区为中心，东侧为XXX路，西侧是XXX街，北侧为XXX路，南侧是XXX路。 如果周边有大的单位，也可以增加上，比如东侧是XXX小学，南侧是XXXXX菜市场，如果没办法实现自动抓取， 就生成描述模板。", //现场勘验情况
   imageNum: 0, //现场勘验制图数量
   photographNum: 0, //照相数量
   photographyMinNum: 0, //摄影数量