caseEditor/src/view/material/sceneImg.vue

<template>
  <div class="scene abstract sceneImg">
    <el-dialog v-model="casePhotoItem.show" title="重命名" width="500">
      <el-form :model="casePhotoItem">
        <el-form-item :label-width="0">
          <el-input
            v-model="casePhotoItem.name"
            maxlength="15"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button @click="casePhotoItem.show = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <el-button class="w-full" @click="handledrawCasePhotos">照片卷</el-button> -->
    <div class="demo-image__preview">
      <el-image-viewer
        hide-on-click-modal
        @close="
          () => {
            urlindex = -1;
          }
        "
        :initial-index="urlindex"
        show-progress
        v-if="urlindex != -1"
        :url-list="ImgsrcList"
        fit="cover"
      />
    </div>
    <div class="scene-list">
      <div class="list">
        <el-tabs
          v-model="active1"
          class="demo-tabs"
          ref="tabsRef"
          @tab-click="handleClick"
        >
          <!-- //new  0 现场图 1 照片卷 2 现场照片 3 勘验笔录 -->
          <el-tab-pane
            v-for="(item, index) in list"
            :key="item.filesTypeName"
            :label="showText ? item.filesTypeName : ''"
            :childrenList="item.childrenList"
            :class="`handleIsShow show${handleIsShow(item)}`"
            :name="item.filesTypeName"
          >
            <div class="leftCenter" v-if="active1 == '现场图'">
              <div v-for="(a, b) in item.childrenList" :key="b">
                <div
                  class="listTitle"
                  v-if="!show || (a.caseFilesList && a.caseFilesList.length)"
                >
                  <span>{{ a.filesTypeName }}</span>
                  <el-dropdown
                    v-show="!show"
                    @command="
                      (command) => {
                        handleCommand(command, a);
                      }
                    "
                  >
                    <span class="el-dropdown-link">
                      <el-icon class="el-icon--right" title="新增"
                        ><Plus
                      /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="绘图">新增</el-dropdown-item>
                        <el-dropdown-item command="导入">导入</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div
                  class="itemList"
                  v-for="(items, indexs) in a.caseFilesList"
                  @click="handlItem0(items)"
                  :class="{
                    active:
                      childrenList.src == items.filesUrl &&
                      childrenList.filesId == items.filesId,
                  }"
                  :key="indexs"
                >
                  <div class="ItemTitle">
                    <div
                      class="text"
                      :title="items.filesTypeName || items.filesTitle"
                    >
                      {{ items.filesTypeName || items.filesTitle }}
                    </div>
                    <div
                      class="operation"
                      v-if="
                        !show &&
                        childrenList.src == items.filesUrl &&
                        childrenList.filesId == items.filesId
                      "
                    >
                      <el-icon
                        title="下载"
                        v-if="items.filesUrl"
                        @click="
                          downloadByUrl({
                            url: items.filesUrl,
                            fileName: items.filesTitle,
                          })
                        "
                        ><Download
                      /></el-icon>
                      <el-icon
                        title="编辑"
                        v-if="items.oldData != 1"
                        @click="handleoverviewEdit(a.filesTypeName, items)"
                        ><Edit
                      /></el-icon>
                      <el-icon
                        @click="OverviewDel(items, a.filesTypeName)"
                        title="删除"
                        ><CircleClose
                      /></el-icon>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="leftCenter" v-if="active1 == '现场照片'">
              <div
                v-for="(a, b) in item.childrenList"
                :key="b"
                v-show="show ? recursiveSearch(a.childrenList) : true"
              >
                <div class="listTitle">{{ a.filesTypeName }}</div>
                <div
                  class="itemList"
                  v-for="(items, indexs) in a.childrenList"
                  @click="handleClick2(items)"
                  :class="{ active: childrenList.value == items.filesTypeId }"
                  :key="indexs"
                >
                  <div class="ItemTitle">{{ items.filesTypeName }}</div>
                </div>
              </div>
            </div>
            <div class="leftCenter" v-if="active1 == '勘验笔录'">
              <div
                class="addButton flex"
                v-show="!show"
                style="margin-bottom: 10px"
              >
                <el-button
                  class="newbut"
                  :icon="Edit"
                  @click="handleRecords(-1)"
                  >填写</el-button
                >
                <el-upload
                  class="upload-demo"
                  style="display: inline-block"
                  :show-file-list="false"
                  :before-upload="upload"
                  :http-request="uploadNewFile"
                  :on-success="handleSuccess"
                  :on-preview="previewFile"
                  :accept="accept"
                  :before-remove="removeFile"
                  multiple
                >
                  <el-button class="newbut" :icon="Upload">上传</el-button>
                </el-upload>
              </div>
              <div
                class="itemList"
                v-for="(items, indexs) in item.caseFilesList"
                @click="handlItem1(items)"
                :class="{ active: childrenList.value == items.filesId }"
                :key="indexs"
              >
                <div class="ItemTitle">
                  <div class="text">
                    {{ items.filesTypeName || items.filesTitle }}
                  </div>
                  <div
                    class="operation"
                    v-if="childrenList.value == items.filesId"
                  >
                    <el-icon
                      title="下载"
                      @click="
                        downloadByUrl({
                          url: items.filesUrl,
                          fileName: items.filesTitle,
                        })
                      "
                      ><Download
                    /></el-icon>
                    <el-icon
                      title="编辑"
                      v-if="!show && items.createType != 'upload'"
                      @click="handleRecords(items.filesId)"
                      ><Edit
                    /></el-icon>
                    <el-icon v-if="!show" @click="del(items)" title="删除"
                      ><CircleClose
                    /></el-icon>
                  </div>
                </div>
              </div>
            </div>
            <div class="leftCenter" v-if="active1 == '照片卷'">
              <div
                class="addButton flex"
                v-show="!show"
                style="margin-bottom: 10px"
              >
                <el-button
                  class="newbut"
                  :icon="Edit"
                  @click="handledrawCasePhotos([])"
                  >制卷</el-button
                >
                <el-button
                  class="newbut"
                  @click="exportToPDF(true)"
                  :disabled="!casePhotoList.length"
                  :icon="Download"
                  >下载</el-button
                >
                <!--  -->
                <el-button class="newbut" :icon="Edit" @click="openAIdrawCase"
                  >AI制卷</el-button
                >
              </div>
              <div
                class="itemList"
                v-for="(items, indexs) in casePhotoList"
                @click="handlItem2(items)"
                :class="{ active: childrenList.value == items.id }"
                :key="indexs"
              >
                <div class="ItemTitle">
                  <div class="text">
                    {{ items.name }}
                  </div>
                  <div
                    class="operation"
                    v-if="!show && childrenList.value == items.id"
                  >
                    <el-icon title="下载" @click="exportToPDF(false, items)"
                      ><Download
                    /></el-icon>
                    <i
                      title="重命名"
                      class="el-icon iconfont icon-rename"
                      @click="handlemtk(items)"
                    ></i>
                    <el-icon
                      title="编辑"
                      v-if="!show && items.createType != 'upload'"
                      @click="handledrawCasePhotos(items.id)"
                      ><Edit
                    /></el-icon>
                    <el-icon v-if="!show" @click="del2(items)" title="删除"
                      ><CircleClose
                    /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 现场照片 -->
    <div class="abstractCentenr" v-if="active1 == '现场照片'">
      <div class="centerTop" v-show="!show">
        <div class="import" @click="handleYr">
          <el-icon size="26" color="#26559B">
            <i
              style="font-size: 26px; color: #26559b"
              class="iconfont icon-import"
            ></i
          ></el-icon>
          <div class="name">导入</div>
        </div>
        <el-upload
          class="upload-demo upload"
          multiple
          :show-file-list="false"
          :before-upload="imgupload"
          :file-list="imgfileLists"
          :http-request="uploadNewFile"
          :on-success="handleSuccess"
          :on-preview="imgpreviewFile"
          :accept="imgaccept"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        >
          <el-icon class="el-icon--upload" style="margin-top: 20px" size="26">
            <i
              style="font-size: 26px; color: #26559b"
              class="iconfont icon-Upload"
            ></i
          ></el-icon>
          <div class="el-upload__text">
            点击或拖拽文件上传<br />支持 jpg、png、jpeg ≤ 50MB
          </div>
        </el-upload>
      </div>
      <div class="centerBottom">
        <div class="imgList">
          <viewImg
            :key="childrenList.value"
            :list="childrenList.caseFilesList || []"
            @handleEdit="handleEdit"
            @refresh="getList"
          />
        </div>
      </div>
    </div>
    <!-- 现场图 -->
    <div class="abstractCentenr" v-if="active1 == '现场图'">
      <div class="imgSrcimport noView" v-if="!childrenList.src">暂无数据</div>
      <div class="imgSrccentenr" v-else>
        <img
          @click="handleView(childrenList.src)"
          :src="childrenList.src"
          class="noView viewImg"
          alt=""
        />
      </div>
    </div>
    <!-- 勘验笔录 -->
    <div class="abstractCentenr" v-if="active1 == '勘验笔录'">
      <div
        class="kybl"
        v-if="childrenList.item && childrenList.item.createType == 'online'"
      >
        <div class="title">现场勘验笔录</div>
        <div class="kyblid">勘验号：{{ data.inquestNum }}</div>
        <div>现场勘验单位：{{ data.deptName }}</div>
        <div>指派/报告单位：{{ data.reportDept }}</div>
        <div>时间：{{ data.inquestTime }}</div>
        <div>勘验事由：{{ data.inquestResource }}</div>
        <div>
          现场勘验时间：
          <span v-if="data.times && data.times[0]"
            >{{ dayjs(data.times[0]).format("YYYY-MM-DD HH:mm:ss") }} ~
            {{ dayjs(data.times[1]).format("YYYY-MM-DD HH:mm:ss") }}</span
          >
        </div>
        <div>现场地点：{{ data.address }}</div>
        <div>现场保护情况：{{ data.protectionSituation }}</div>
        <div>
          现场保护人：姓名 {{ data.protector.name }}单位
          {{ data.protector.unit }}职务 {{ data.protector.job }}
        </div>
        <div>
          保护措施：
          <el-checkbox-group class="checkbox" v-model="data.protectionMeasures">
            <el-checkbox :value="0" label="专人看护现场，防止他人进入" />
            <el-checkbox :value="1" checked label="设立警戒带，划定禁行区域" />
            <el-checkbox :value="2" label="其他措施" />
          </el-checkbox-group>
        </div>
        <div>
          现场情况：
          <el-checkbox-group class="checkbox" v-model="data.situation">
            <el-checkbox :value="0" label="原始现场" />
            <el-checkbox :value="1" checked label="变动现场" />
          </el-checkbox-group>
        </div>
        <div>
          变动原因：
          <el-checkbox-group class="checkbox" v-model="data.changeReason">
            <el-checkbox :value="0" label="事主进入" />
            <el-checkbox :value="1" label="报案人进入" />
            <el-checkbox :value="2" label="其他" />
          </el-checkbox-group>
          <span style="margin-left: 20px" v-if="data.changeReasonOtherValue">{{
            data.changeReasonOtherValue
          }}</span>
        </div>
        <div>
          天气：
          <el-checkbox-group class="checkbox" v-model="data.weatherInfo.type">
            <el-checkbox :value="0" label="阴" />
            <el-checkbox :value="1" label="晴" />
            <el-checkbox :value="2" label="雨" />
            <el-checkbox :value="3" label="雾" />
          </el-checkbox-group>
          <span>温度：{{ data.weatherInfo.temperature }}℃</span>
          <span>湿度：{{ data.weatherInfo.humidity }}%</span>
          <span>风向：{{ data.weatherInfo.windDirection }}</span>
        </div>
        <div>
          现场勘验利用的光线：
          <el-checkbox-group class="checkbox" v-model="data.light">
            <el-checkbox :value="0" checked label="自然光" />
            <el-checkbox :value="1" checked label="灯光" />
            <el-checkbox :value="2" label="特种光" />
          </el-checkbox-group>
        </div>
        <div>
          现场勘验指挥人：姓名{{ data.inquestCommander.name }}单位{{
            data.inquestCommander.unit
          }}职务{{ data.inquestCommander.job }}
        </div>
        <div>现场勘验情况：{{ data.inquestSituation }}</div>
        <div>
          现场勘验制图 {{ data.imageNum }} 张；照相　{{
            data.photographNum
          }}　张；摄像 {{ data.photographyMinNum }} 分{{
            data.photographySecNum
          }}秒；录音{{ data.recordingMinNum }} 分{{ data.recordingSecNum }}秒；
        </div>
        <div>
          现场勘验记录人员：
          <div class="list">
            <div
              v-for="(info, index) in data.recorderInfo"
              :key="index"
              v-show="info.name || info.unit || info.job"
            >
              {{ info.typeLabel }} 姓名： {{ info.name }} 单位：
              {{ info.unit }} 职务：
              {{ info.job }}
            </div>
          </div>
        </div>
        <div>
          现场勘验人员：
          <div class="list">
            <div
              v-for="(info, index) of data.signatureInfo"
              :key="index"
              v-show="info.name || info.unit || info.job"
            >
              姓名: {{ info.name || "_____" }} 单位: {{ info.unit }} 职务:
              {{ info.job }}
            </div>
          </div>
        </div>
        <div>
          现场勘验见证人：
          <div class="list">
            <div
              v-for="(info, index) of data.witnessInfo"
              :key="index"
              v-show="info.sex || info.birthday || info.address"
            >
              姓名: {{ info.name || "_____" }} 性别:
              {{ info.sex ? "女" : "男" }}出生日期:
              {{ info.birthday && dayjs(info.birthday).format("YYYY-MM-DD") }}
              住址: {{ info.address }}
            </div>
          </div>
        </div>
        <div>备注：{{ data.remark }}</div>
      </div>
      <div class="imgSrccentenr" v-else-if="isImage(childrenList.src)">
        <img
          @click="handleView(childrenList.src)"
          :src="childrenList.src"
          class="noView viewImg"
          alt=""
        />
      </div>
      <div class="noView" v-else>
        <div
          class="noViewTitle"
          v-if="childrenList.item && childrenList.item.filesUrl"
        >
          <div class="zbzc">暂不支持预览</div>
          <div
            class="cursor-pointer down"
            @click="
              downloadByUrl({
                fileName: childrenList.item && childrenList.item.filesTitle,
                url: childrenList.item && childrenList.item.filesUrl,
              })
            "
          >
            下载
          </div>
        </div>
        <div v-else class="noViewTitle">暂无数据</div>
      </div>
    </div>
    <div class="abstractCentenr" style="padding: 0" v-if="active1 == '照片卷'">
      <iframe id="iframe-outside" frameborder="0"></iframe>
      <showpages
        ref="showPagesRef"
        :photos="photos"
        v-if="childrenList.src"
        :pageCount="childrenList.item.pageCount || 0"
        :content="childrenList.src"
      />
      <div v-else class="noView">
        <div
          class="noViewTitle"
          v-if="childrenList.item && childrenList.item.filesUrl"
        >
          <div class="zbzc">暂不支持预览</div>
        </div>
        <div v-else class="noViewTitle">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import viewImg from "@/components/viewImg/list.vue";
import { computed, ref, reactive } from "vue";
import { addCaseScenes, exportCasePhotos, tableModelScene } from "./quisk";
import showpages from "./showpages.vue";
import {
  updateByTreeFileLists,
  getByTreeFileLists,
  getCasePhotoRollList,
  caseExportImg,
  overviewAdd,
  TabulationAdd,
} from "@/store/case";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { delCaseFile } from "@/store/caseFile";
import {
  uploadNewFile,
  addByMediaLiBrary,
  getSceneListHasAi,
  getCaseInquestInfoOld,
  casePhotoUpdate,
  casePhotodel,
  getAllPhotoList,
  getCaseInfoData,
  show,
} from "@/store/case";
import {
  downloadFile,
  downloadByUrl,
  isImage,
  recursiveSearch,
} from "@/util/index.ts";
import { caseOverviewDel } from "@/store/case";
import dayjs from "dayjs";
import { recorderInfoType, ChangeReasonType } from "./formData.ts";
import {
  Upload,
  DocumentAdd,
  CircleCheck,
  Delete,
  Download,
  CircleClose,
  Edit,
  Plus,
} from "@element-plus/icons-vue";
import { RouteName, router } from "@/router";
import { useUpload } from "@/hook/upload";
import { addCaseFile, setTypeFile, addSceneImg1, addSceneImg2 } from "./quisk";
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
const filesTypeId = ref(0);
const ImgsrcList = ref([]);
const active1 = ref("现场图");
const active = ref(true);
const urlindex = ref(-1);
const selectNum = ref(null)
const canvas = ref(null);
const editor = ref(null);

const tabsRef = ref(null);
const showText = ref(show.value ? false : true);
const settype = ref(false);
const childrenList = ref({
  list: [],
  value: "",
  parentId: 0,
  src: "",
  filesId: 0,
  item: {},
  caseFilesList: [],
});
const casePhotoItem = ref({
  id: "",
  name: "",
  content: "",
  show: false,
});
const showPagesRef = ref(null);
const data = reactive({
  title: "",
  inquestNum: "", //现场勘验号
  deptName: "", //单位名称
  sendDept: "", //发送单位
  issuanceCount: "", // 份数
  makeTime: "", //制作时间
  recorder: "", // 笔录人
  issuanceOpinion: "", //签发意见
  reportDept: "", //报告单位
  times: [], // startTime ,endTime
  address: "", // 勘验地址
  inquestTime: "", //勘验时间
  inquestResource:
    "x年x月x日x单位接到报警称;x年x月x日x地点发生一起什么案事件，需要勘验现场， 接通知后，技术员xx,xx前往现场考察", //勘验范围
  protector: {
    name: "",
    unit: "",
    job: "",
  }, // 现场保护人
  protectionSituation: "", // 现场保护情况
  situation: [], //现场情况
  changeReason: [],
  changeReasonOtherValue: "",
  protectionMeasures: [], //保护措施
  weatherInfo: {
    type: [],
    temperature: "",
    humidity: "",
    windDirection: "",
  }, //天气情况
  light: [], //光线
  painter: "",
  photographer: "",
  inquestCommander: {
    name: "",
    unit: "",
    job: "",
  }, //现场勘验指挥人
  inquestSituation:
    "案发现场以XXX小区为中心，东侧为XXX路，西侧是XXX街，北侧为XXX路，南侧是XXX路。", //现场勘验情况
  imageNum: 0, //现场勘验制图数量
  photographNum: 0, //照相数量
  photographyMinNum: 0, //摄影数量
  photographySecNum: 0, //摄影数量
  recordingMinNum: "",
  recordingSecNum: "",
  recorderInfo: JSON.parse(JSON.stringify(recorderInfoType)),
  signatureInfo: [], //现场勘验人员
  witnessInfo: [],
  remark: "",
});
const xczpfilesTypeId = ref(1);
const photos = ref([]);
const showModal = ref(false);
const srcList = ref([]);
const klblId = ref(0);
const fileLists = ref([]);
const imgfileLists = ref([]);
const list = ref([]);
const fileList = ref([]);
const casePhotoList = ref([
  {
    id: 0,
    name: "现场照片",
    caseId: 336,
    content: "现场照片",
  },
]);
const caseInfo = computed(() => getCaseInfoData());
const activeNames = ref(["1"]);
const { size, upload, removeFile, previewFile, file, accept } = useUpload({
  maxSize: 10 * 1024 * 1024,
  formats: [".doc", ".docx", ".pdf"],
});

const {
  size: imgSize,
  fileList: imgfileList,
  upload: imgupload,
  file: imgfile,
  previewFile: imgpreviewFile,
  accept: imgaccept,
} = useUpload({
  maxSize: 50 * 1024 * 1024,
  formats: [".jpg", ".png", ".jpeg", ".bmp"], //".mp4", ".wav", ".mp3", ".shp"
});
const handleChange = (val: string[]) => {
  console.log(val);
};
const getImgList = async () => {
  let imgList = await getAllPhotoList(filesTypeId.value);
  photos.value =
    imgList.map((ele) => ({
      ...ele,
      url: ele.filesUrl,
      id: ele.filesId,
      name: ele.filesTitle,
    })) || [];
};
getList();
function handleActive(params) {
  console.log("handleActive", params);
}
const initInfo = async (inquestFileId) => {
  const res = await getCaseInquestInfoOld(inquestFileId || fileId.value);
  for (var k in data) {
    if (res.data && res.data.hasOwnProperty(k)) {
      // console.log("Key is " + k);
      if (res.data[k]) {
        data[k] = res.data[k];
      } else {
        data[k] = "";
      }
    }
  }
};

function handleSuccess(item) {
  let uploadId = item?.data.id;
  addByMediaLiBrary({
    caseId: caseId.value,
    filesTypeId:
      active1.value == "勘验笔录" ? klblId.value : childrenList.value.value,
    uploadId,
  }).then((res) => {
    fileLists.value = [];
    imgfileLists.value = [];
    getList(true);
  });
}

function getList(refresh = false) {
  //new  0 现场图 1 照片卷 2 现场照片 3 勘验笔录
  //old  0 现场照片 1 现场图 2 勘验笔录
  getCasePhotoRollList(caseId.value).then((res) => {
    casePhotoList.value = res || [];
    let count = 0;
    casePhotoList.value = res.map((ele) => {
      let content = ele.content && JSON.parse(ele.content);
      let number = content.pages?.length;
      count = count + number;
      return {
        ...ele,
        pageCount: count - number,
      };
    });
    if (
      active1.value == "照片卷" &&
      casePhotoList.value &&
      casePhotoList.value.length
    ) {
      let item = res.find((ele) => ele.id == casePhotoItem.value.id) || res[0];
      handlItem2(item);
    }
  });
  updateByTreeFileLists(caseId.value).then((res) => {
    list.value =
      res.find((ele) => ele.filesTypeName == "三录材料")?.childrenList || [];
    klblId.value = list.value.find(
      (ele) => ele.filesTypeName == "勘验笔录"
    ).filesTypeId;
    let zpj = list.value.find((ele) => ele.filesTypeName == "现场照片");
    filesTypeId.value = zpj.filesTypeId;
    getImgList();
    if (show.value) {
      //展示也过滤现场照片空数据
      list.value[0].childrenList.map((ele) => {
        ele.childrenList =
          ele.childrenList?.filter((element) => element.caseFilesList) || [];
        return ele;
      });
      console.log("list", list.value);
      list.value[1].childrenList.map((ele) => {
        ele.caseFilesList =
          ele.caseFilesList?.filter((element) => element.filesUrl) || [];
        return ele;
      });
    }
    if (!refresh) {
      handleClick({
        paneName: active1.value,
        childrenListvalue: childrenList.value,
      });
      return;
    }

    let item = list.value.find((item) => item.filesTypeName == active1.value);
    let arr2 = [];
    if (active1.value == "现场照片" || active1.value == "现场图") {
      //现场图和勘验笔录
      item.childrenList.map((ele) => {
        if (ele.caseFilesList && ele.caseFilesList.length) {
          ele.caseFilesList.map((element) => {
            element.filesUrl && arr2.push(element);
          });
        } else {
          arr2.push(...ele.childrenList);
        }
      });
    }
    if (active1.value == "现场照片" && childrenList.value.parentId) {
      //现场照片
      item = item.childrenList.find(
        (ele) => ele.filesTypeId == childrenList.value.parentId
      );
    }
    if (active1.value == "现场图" && !childrenList.value.parentId) {
      item = item.childrenList[0];
    }
    console.log("activeItem", list.value, "arr2", arr2, item);
    srcList.value =
      active1.value == "现场照片" || active1.value == "现场图"
        ? arr2
        : item.childrenList;
    console.log("srcList", srcList.value, item, childrenList, active1.value);
    let activeIndex =
      srcList.value.findIndex(
        (item) => item.filesTypeId == childrenList.value.value
      ) || 0;
    if (!childrenList.value.value) {
      activeIndex = 0;
    }
    let activeItem = srcList.value[activeIndex];
    console.log(
      "activeItem",
      activeItem,
      activeIndex,
      "arr2",
      list.value,
      item
    );
    if (!activeItem) return;
    childrenList.value.value = activeItem.filesTypeId;
    childrenList.value.parentId = activeItem.parentId;
    childrenList.value.filesId = activeItem.filesId;
    childrenList.value.item = activeItem;
    childrenList.value.src =
      activeItem.filesUrl ||
      (activeItem.caseFilesList && activeItem.caseFilesList[0]?.filesUrl);
    childrenList.value.caseFilesList =
      active1.value == "勘验笔录" || active1.value == "现场照片"
        ? activeItem.caseFilesList
        : activeItem.childrenList;
  });
}
async function handleAdd() {
  await addCaseFile({ caseId: caseId.value, filesTypeName: ["三录材料"] });
  getList(true);
}
const handleClick = (a) => {
  let { paneName, childrenListvalue } = a;
  let newImgsrcList = [];
  casePhotoItem.value.id = "";
  let index = list.value.findIndex((item) => item.filesTypeName == paneName);
  let childrenLists = list.value[index].childrenList;
  if (childrenListvalue && show.value) {
    setTimeout(() => {
      let indexshow1 = recursiveSearch(list.value[0].childrenList);
      let indexshow2 = recursiveSearch(list.value[1].childrenList);
      let indexshow3 = recursiveSearch([list.value[3]]);
      let indexshow4 = casePhotoList.value.length;
      let tabsdom0 = document.getElementById("tab-现场图");
      let tabsdom1 = document.getElementById("tab-现场照片");
      let tabsdom2 = document.getElementById("tab-勘验笔录");
      let tabsdom3 = document.getElementById("tab-照片卷");
      if (!indexshow1 && tabsdom0) tabsdom0.style.display = "none";
      if (!indexshow2 && tabsdom1) tabsdom1.style.display = "none";
      if (!indexshow3 && tabsdom2) tabsdom2.style.display = "none";
      if (!indexshow4 && tabsdom3) tabsdom3.style.display = "none";
      if (indexshow1) {
      } else if (indexshow2) {
        active1.value = "现场照片";
        handleClick({ paneName: active1.value });
      } else if (indexshow4) {
        active1.value = "照片卷";
        handleClick({ paneName: active1.value });
      } else {
        active1.value = "勘验笔录";
        handleClick({ paneName: active1.value });
      }
      showText.value = true;
    }, 500);
  }
  if (paneName == "现场照片") {
    //现场照片
    let ArrList = [];
    childrenLists.map((ele) => {
      ArrList.push(...ele.childrenList);
    });
    let newindex = ArrList.findIndex(
      (items) => items.caseFilesList && items.caseFilesList.length
    );
    newindex = newindex == -1 ? 0 : newindex;
    let activeItem = ArrList[newindex] || {};
    console.log("handleClick", activeItem, childrenLists);
    if (!activeItem) return;
    childrenList.value.value = activeItem.filesTypeId;
    childrenList.value.parentId = activeItem.parentId;
    childrenList.value.filesId = activeItem.filesId;
    childrenList.value.src = activeItem.filesUrl;
    childrenList.value.caseFilesList = activeItem.caseFilesList || [];
    let newSrc = [];
    childrenLists &&
      childrenLists.map((ele) => {
        ele.caseFilesList && newSrc.push(...ele.caseFilesList);
      });
    newImgsrcList = newSrc.map((ele) => ele.filesUrl);
  } else if (paneName == "勘验笔录") {
    //笔录
    let activeItem =
      (list.value[index].caseFilesList && list.value[index].caseFilesList[0]) ||
      {};
    childrenList.value.value = activeItem.filesId;
    childrenList.value.parentId = activeItem.parentId;
    childrenList.value.src = activeItem.filesUrl;
    childrenList.value.item = activeItem;
    childrenList.value.caseFilesList = [];
    activeItem.createType == "online" && initInfo(activeItem.filesId);
    let newSrc =
      (list.value[index].caseFilesList &&
        list.value[index].caseFilesList.map((ele) => ele.filesUrl)) ||
      [];
    console.log("handleClick", newSrc, childrenLists.caseFilesList);
    newImgsrcList = newSrc.filter((ele) => isImage(ele));
  } else if (paneName == "照片卷") {
    childrenList.value.src = "";
    //照片卷
    let activeItem = casePhotoList.value[0] || {};
    console.log("handleClick", childrenLists, activeItem);
    childrenList.value.src = activeItem.content;
    childrenList.value.item = activeItem;
    childrenList.value.filesId = activeItem.id;
    childrenList.value.value = activeItem.id;
  } else {
    //现场图
    let ArrList = [];
    let index1 = 0,
      index2 = 0;
    index1 = childrenLists.findIndex((ele) => {
      index2 = ele.childrenList.findIndex(
        (element) => element.caseFilesList && element.caseFilesList.length
      );
      return index2 != -1;
    });
    console.log("handleClick", childrenLists, ArrList, index1, index2);
    let activeItem =
      list.value[index].childrenList[index1 == -1 ? 0 : index1]?.childrenList[
        index2 == -1 ? 0 : index2
      ] || {};
    childrenList.value.value = activeItem.filesTypeId;
    childrenList.value.parentId = activeItem.parentId;
    childrenList.value.caseFilesList = activeItem.caseFilesList || [];
  }
  getList(true);
  ImgsrcList.value = newImgsrcList.filter((ele) => isImage(ele));
};
function handlItem0(item) {
  childrenList.value.value = item.filesTypeId;
  childrenList.value.parentId = item.parentId;
  childrenList.value.src = item.filesUrl;
  childrenList.value.filesId = item.filesId;
  childrenList.value.caseFilesList = item.caseFilesList;
  console.log("handleClick", item, childrenList.value);
}
function handlItem1(item) {
  childrenList.value.value = item.filesId;
  childrenList.value.filesId = item.filesId;
  childrenList.value.item = item;
  childrenList.value.src = item.filesUrl;
  item.createType == "online" && initInfo(item.filesId);
  // childrenList.value.caseFilesList = item.caseFilesList || [];
  console.log("handleClick", item, childrenList.value);
}
const handlItem2 = (item) => {
  console.log("handlItem2", item, childrenList.value);
  childrenList.value.value = item.id;
  childrenList.value.filesId = item.id;
  childrenList.value.item = item;
  childrenList.value.src = item.content;
};
const handleClick2 = (item) => {
  console.log("handleClick2", item);
  childrenList.value.value = item.filesTypeId;
  childrenList.value.parentId = item.parentId;
  childrenList.value.caseFilesList =
    (item.caseFilesList &&
      item.caseFilesList.map((ele) => {
        return {
          ...ele,
          checked: false,
        };
      })) ||
    [];
  console.log("handleClick2", item);
};
const handleCommand = async (command, a) => {
  if (command == "绘图") {
    let addurl = a.filesTypeName == "方位图" ? TabulationAdd : overviewAdd;
    let resData = await addurl({
      type: a.filesTypeName == "方位图" ? 1 : 0,
      title: "",
      caseId: caseId.value,
    });
    // let params = {
    //   caseId: caseId.value,
    //   tabulationIds: a.filesTypeName == "方位图" ? [resData.id] : undefined,
    //   overviewIds : a.filesTypeName != "方位图" ? [resData.id] : undefined,
    // };
    // await caseExportImg(params);
    getList(true);
    // window.open(a.filesTypeName != "方位图"?`/draw/#/overview?caseId=${caseId.value}&overviewId=${resData.id}`:`/draw/#/tabulation?caseId=${caseId.value}&tabulationId=${resData.id}`);
  } else {
    let addFun = a.filesTypeName == "方位图" ? addSceneImg1 : addSceneImg2;
    let ids = await addFun({
      type: a.filesTypeName == "方位图" ? 1 : 0,
      title: a.filesTypeName,
      // dictId: filesTypeId,
    });
    let params = {
      caseId: caseId.value,
      overviewIds: a.filesTypeName != "方位图" ? ids : undefined,
      tabulationIds: a.filesTypeName == "方位图" ? ids : undefined,
    };
    if (ids && ids.length) {
      await caseExportImg(params);
      getList(true);
    }
  }
};
const del = async (file) => {
  console.log(file, "file");
  ElMessageBox.confirm("确定删除？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await delCaseFile({ caseId: caseId.value, filesId: file.filesId });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    childrenList.value.src = "";
    childrenList.value.value = "";
    getList(true);
  });
};
const del2 = async (file) => {
  console.log(file, "file");
  ElMessageBox.confirm("确定删除？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await casePhotodel({ caseId: caseId.value, id: file.id });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    childrenList.value.src = "";
    childrenList.value.value = "";
    getList(true);
  });
};
const OverviewDel = async (file, filesTypeName) => {
  console.log(file, "file");
  ElMessageBox.confirm("确定删除？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await delCaseFile({ caseId: caseId.value, filesId: file.filesId });
    // await caseOverviewDel({ tabulationId: file.tabulationId ,overviewId:file.overviewId, type: filesTypeName });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    childrenList.value.value = "";
    childrenList.value.src = "";
    getList(true);
  });
};
async function handleItem(type, item) {
  console.log("handleItem", type, item);
  if (type == "edit") {
    await setTypeFile({
      ...item,
      caseId: caseId.value,
      fileOptions: list.value,
    });
  }
  getList(true);
}
function handleoverviewEdit(type, item) {
  console.log("handleoverviewEdit", type, item);
  let url = `/draw/#/tabulation?caseId=${caseId.value}&tabulationId=${item.tabulationId}`;
  if ("平面图" == type) {
    url = `/draw/#/overview?caseId=${caseId.value}&overviewId=${item.overviewId}&title=${item.filesTitle}`;
    // gotoDraw(item.filesTypeId != pmtId.value? BoardType.scene : BoardType.map, item.filesId)
  }
  window.open(url);
  // getList();
}
function handleRecords(fileId) {
  router.push({
    name: RouteName.records,
    params: { caseId: caseId.value, fileId: fileId || -1 },
  });
}
async function handleYr() {
  let uploadIds = await addCaseScenes({
    caseId: caseId.value,
    fileTypes: [0],
    formats: [".jpg", ".png", ".jpeg", ".bmp"],
    filesTypeId: childrenList.value.value,
  });
  if (uploadIds == false || (uploadIds && uploadIds.length == 0)) {
    return;
  }
  await addByMediaLiBrary({
    caseId: caseId.value,
    uploadIds,
    filesTypeId: childrenList.value.value,
  });
  getList(true);
}
const handleEdit = async (lists) => {
  console.log(
    "handleEdit",
    list.value,
    lists,
    lists.map((ele) => ele.filesId)
  );
  let item = list.value.find((ele) => ele.filesTypeName == active1.value);
  await setTypeFile({
    caseId: caseId.value,
    // filesId: lists.map(ele => ele.filesId),
    filesTypeId: childrenList.value.value,
    fileOptions: item.childrenList,
    filesIds: lists.map((ele) => ele.filesId),
  });
  getList(true);
};
async function handledrawCasePhotos(val) {
  const id = Array.isArray(val) ? val.toString() : val;
  router.push({
    name: RouteName.drawCasePhotos,
    params: { caseId: caseId.value! },
    query: {
      id: id,
      filesTypeId: filesTypeId.value,
    },
  });
  console.log("handleAdd");
}
async function frameLoad(sdk) {
  // 这里可以获取到mesh方法
  const player = sdk.core.get("Player");
  sdk.Scene.on("loaded", () => {
    // if (isTest) {
      player.model.panos.list.forEach((pano) => pano.addLabel2());
    // } else {
    //   sdk.core.get("SceneRenderer").suspend();
    // }
  });
  console.log("--------frameLoad!---------");
  const list = await sdk.Camera.routeSnapGenerate();
  console.log("返回数据", list);
  const iframe = document.getElementById("iframe-outside");
  iframe?.classList.remove('show');
  // sdk.Scene.whenLoaded(()=>{
  //     console.log("返回数据",sdk.Camera.getPose())
  // })
}
async function openAIdrawCase() {
  const { num } = await tableModelScene({ numList: [] });
  selectNum.value = num;
  handleAIdrawCasePhotos(num);
  console.log("返回数据", num);
}
function handleAIdrawCasePhotos(num) {
  const iframe = document.getElementById("iframe-outside");
  console.log(iframe, "iframe");
  if (iframe && iframe.classList.contains("show") == false) {
    iframe.classList.add("show");
    iframe.onload = () => {
      console.log(iframe.contentWindow, "contentWindow");
      frameLoad(iframe.contentWindow.__sdk);
    };
    iframe.src = "./model.html?m=" + num;
  }
}
const handleView = (src) => {
  if (src && !ImgsrcList.value.includes(src)) {
    ImgsrcList.value.push(src);
  }
  urlindex.value = ImgsrcList.value.findIndex((ele) => ele == src);
};
const handleIsShow = (item) => {
  if (!show.value) return true;
  return !recursiveSearch(item && item.childrenList);
};

const handlemtk = (item) => {
  casePhotoItem.value = {
    show: true,
    ...item,
  };
  // ElMessageBox.prompt("", "重命名", {
  //   confirmButtonText: "确定",
  //   customClass: "promptClass",
  //   cancelButtonText: "取消",
  //   showClose: true,
  //   inputValue: item.name,
  //   inputValidator: (value) => {
  //     if (!value) {
  //       return false;
  //     }
  //     return true;
  //   },
  //   inputErrorMessage: "请输入名称",
  // })
  //   .then(async ({ value }) => {
  //     ElMessage({
  //       type: "success",
  //       message: `修改成功`,
  //     });
  //   })
  //   .catch(() => {
  //   });
};
const handleConfirm = async () => {
  let value = casePhotoItem.value.name;
  if (!value || value.trim() == "") {
    return ElMessage.error("请输入修改名称");
  }
  await casePhotoUpdate({
    ...casePhotoItem.value,
    name: value,
  });
  ElMessage({
    type: "success",
    message: `修改成功`,
  });
  casePhotoItem.value.show = false;
  await getList(true);
};
const exportToPDF = async (isAll, item) => {
  if (isAll === true) {
    await handleOpen(true);
  }
  await exportCasePhotos({
    showPagesRef: showPagesRef.value,
    title: (isAll ? caseInfo.value.caseTitle : item.name) + "照片卷",
  });
  console.log("exportToPDF完毕");
  if (isAll) {
    await handleOpen(false);
  }
};
const handleOpen = (val) => {
  // 关闭时重置到照片卷标签页
  if (!val) {
    setTimeout(() => {
      handleClick({ paneName: "照片卷" });
    }, 500);
  } else {
    console.log("handleOpen");
    // 初始化汇总数据结构
    let Alllist = {
      pages: [],
      indexingLineList: [],
    };
    // 遍历所有照片数据，合并页面和标引线
    casePhotoList.value.map((ele) => {
      let content = ele.content && JSON.parse(ele.content);
      let { pages, indexingLineList } = content;
      // 计算横向偏移量，每张图片宽度600+间距4
      let xAdd = (600 + 4) * Alllist.pages.length;
      // 根据偏移量调整标引线坐标
      if (xAdd) {
        indexingLineList = indexingLineList.map((element) => {
          let points = element.points.map((item) => ({
            ...item,
            x: item.x + xAdd,
          }));
          return { ...element, points };
        });
      }
      // 合并当前照片的页面和标引线到汇总数据
      Alllist.pages.push(...pages);
      Alllist.indexingLineList.push(...indexingLineList);
      console.log("handleOpen", content);
    });
    // 将汇总数据赋值给子组件
    childrenList.value.src = Alllist;
    childrenList.value.value = -1;
    childrenList.value.item.pageCount = 0;
    console.log("handleOpen", Alllist);
  }
};
</script>
<style scoped lang="scss">
.scene {
  height: 100%;
  display: flex;
  .scene-list {
    width: var(--leftwidth);
    height: 100%;
    overflow-x: scroll;
    .list {
      .addButton {
        padding: 20px 34px 0 34px;
        margin-left: 0px;
      }
      .listTitle {
        padding: 29px 48px 13px 48px;
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-icon {
          cursor: pointer;
        }
      }
      .itemList {
        &:hover {
          background: rgba(69, 144, 255, 0.1);
        }
        .ItemTitle {
          padding: 25px 48px;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          .text {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
        .operation {
          text-align: right;
          margin-top: 16px;
          .el-icon {
            cursor: pointer;
            margin-left: 32px;
          }
        }
      }
      .active {
        background: rgba(69, 144, 255, 0.1);
      }
    }
  }
  .abstractCentenr {
    background: #f5f5f5;
    height: 100%;
    width: calc(100% - var(--leftwidth));
    padding: 32px;
    position: relative;
    .noView {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      .down {
        margin-top: 20px;
        line-height: 32px;
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
        border-radius: 2px;
        border: 1px solid #26559b;
        font-size: 14px;
        color: #26559b;
      }
    }
    .viewImg {
      max-width: 95%;
      max-height: 95%;
      object-fit: contain;
    }
    .import {
      margin-right: 20px;
      padding-top: 40px;
      height: 100%;
      width: 148px;
      text-align: center;
      background: #fafafa;
      cursor: pointer;
    }
    .centerTop {
      height: 148px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 32px;
      .upload {
        height: 100%;
        width: calc(100% - 170px);
      }
    }
    .centerBottom {
      .selcet {
        // float: right;
        // text-align: right;
        display: flex;
        justify-content: space-between;
      }
    }
    .kybl {
      padding: 60px;
      background: #ffffff;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      margin: 24px auto;
      line-height: 28px;
      text-align: left;
      max-width: 1024px;
      word-break: break-all;
      .checkbox {
        display: inline-block;
      }
      .title {
        font-weight: 600;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        text-align: center;
      }
      .kyblid {
        text-align: right;
        margin: 16px 0;
      }
    }
    .imgSrcimport {
      display: flex;
      height: 148px;
    }
    .imgSrccentenr {
      max-width: 100%;
      height: auto;
    }
  }
  .title0 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }
  .demo-tabs {
    margin: 12px 0;
  }
}
</style>
<style lang="scss">
.sceneImg {
  .el-tabs__header {
    padding: 17px 0 13px 24px;
    .el-tabs__active-bar {
      display: none;
    }
    .el-tabs__item {
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.45);
      &:hover {
        // font-weight: bold;
        font-size: 16px;
        color: #26559b;
        line-height: 22px;
      }
    }
    .is-active {
      // font-weight: bold;
      font-size: 16px;
      color: #26559b;
      line-height: 22px;
    }
  }
  .el-icon:focus-visible {
    outline: none !important;
  }
  .el-dropdown {
    width: auto;
    .el-dropdown-link {
      outline: none !important;
    }
    &:focus-visible {
    }
  }
  .el-checkbox {
    height: 28px;
    // pointer-events: none;
  }
  .kybl {
    .el-checkbox {
      height: 28px;
      pointer-events: none;
    }
  }
  .el-checkbox__label {
    color: rgba(0, 0, 0, 0.85) !important;
  }
  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    top: -9px;
  }
}

#iframe-hiddens,
#iframe-outside {
  display: none;
  position: absolute;
  z-index: -999;
  width: 600px;
  height: 500px;
  pointer-events: none;
}
#iframe-hiddens.show {
  display: block;
  visibility: hidden;
  right: 0;
  bottom: 0;
}
#iframe-hiddens.visible {
  pointer-events: all;
  display: block;
  visibility: visible;
  z-index: 999;
}
#iframe-outside.show {
  display: block;
  left: -9999px;
}
#iframe-outside.visible {
  pointer-events: all;
  display: block;
  left: auto;
  right: 0;
  bottom: 0;
  z-index: 999;
}
</style>