<script setup lang="ts"> import { Modal, message } from 'ant-design-vue'; import { ref } from 'vue'; import doubleSelect from './doubleSelect.vue'; import MapDialog from './mapDialog.vue'; import morejc from './morejc.vue'; import photolist from './photolist.vue'; import morenum from './morenum.vue'; import mxend from './mxend.vue'; import photomodal from './photomodal.vue'; import nameModal from './nameModal.vue'; import { getFullModelFileURL } from '@/utils/common'; // const props = withDefaults(defineProps<{ // searchobj: any // }>(), { // searchobj: () => { }, // }); const name = ref(); const confirmData = ref([]); const treeData: any = ref([ ]); // 航线信息 const doubleSelectList = ref([ { label: '三维建模测试航线A', children: [ { label: '三维建模测试航线A-航线1', value: '1', }, { label: '三维建模测试航线A-航线2', value: '2', }, { label: '三维建模测试航线A-航线3', value: '3', }, { label: '三维建模测试航线A-航线4', value: '4', }, { label: '三维建模测试航线A-航线5', value: '5', }, ], value: '12', }, { label: '三维建模测试航线B', children: [ { label: '三维建模测试航线B-航线1', value: '11', }, { label: '三维建模测试航线B-航线2', value: '22', }, { label: '三维建模测试航线B-航线3', value: '33', }, { label: '三维建模测试航线B-航线4', value: '44', }, { label: '三维建模测试航线B-航线5', value: '55', }, ], value: '21', }, ]); // const 0-未开始, 1-未完成, 2-正常 const STATE = { '0': '未开始', '1': '未完成', '2': '已完成', '-1': '建模失败', }; const mapDialogRef = ref(); // 左侧模型列表 let currentPage = 1; const leftItem = ref(); const total = ref<number>(0); const photolistqsRef = ref(); // 期数图片组件 const makeTypeshow = ref(1);// 模型样式 const numObj = ref();// 期数对象 const timer = ref<any>(); // 定时器 function _getApiModelMakePageQuery(isNew?: boolean, paramsObj?: any) { if (isNew) { currentPage = 1; } else { currentPage++; } const params: any = { currentPage, pageSize: 10, name: name.value, }; if (paramsObj && paramsObj !== null) { params.createStartTime = paramsObj.createStartTime; params.createEndTime = paramsObj.createEndTime; params.finishStartTime = paramsObj.finishStartTime; params.finishEndTime = paramsObj.finishEndTime; params.state = paramsObj.state; } getApiModelMakePageQuery(params).then((res) => { if (res.success) { if (res.data && res.data !== null) { const _list: any = res.data?.records; total.value = res?.data?.total ?? 0; if (_list && _list.length) { if (isNew) { treeData.value = _list; } else { treeData.value = [...treeData.value, ..._list]; } listClick(0, treeData.value[0]); leftItem.value = treeData.value[0]; // 默认第一条 timer.value = setInterval(() => { // 获取进度 treeData.value.forEach((element: any, index: any) => { // 0-未开始, 1-未完成, 2-正常 -1建模失败 */ if (element.state === 1) { _getApiMediaModelLibraryGetOdmTaskInfoByModelMakePeriodId(element.latestModelMakePeriodId, index); } else if (element.state === 2) { treeData.value[index].modelState = 99; treeData.value[index].progress = 100; } else if (element.state === -1) { treeData.value[index].modelState = -2; treeData.value[index].progress = 0; } else { treeData.value[index].modelState = -1; treeData.value[index].progress = 0; } }); }, 1000); } } else { treeData.value = []; } } }); } // 停止定时请求 function stop() { if (timer.value) { clearInterval(timer.value); timer.value = null; } } /** * 筛选确认事件 * @param val */ function onConfirm(val: any) { confirmData.value = val; const d = val.map((item: any) => { return { flyRecordId: item.id, taskName: item.taskName, }; }); // 追加架次 _postApiModelMakePeriodAppend(d); } /** * 删除已选数据事件 * @param val */ function onDelete(val: any) { Modal.confirm({ title: '提示', content: '是否确认删除?', okText: '确认', cancelText: '取消', async onOk() { _postApiModelMakePeriodClear(val.modelMakePeriodId, [val]); }, }); } // 已选任务删除 function _postApiModelMakePeriodClear(id: any, list: any) { postApiModelMakePeriodClear({ id, flyRecordList: list, }).then((res) => { if (res.success) { message.success(res.msg); _getApiModelMakePeriodFlyRecordList(numObj.value.id);// 已选任务 photolistqsRef.value?._getApiModelMakePeriodImagePageQuery(); // 更新图片 } else { message.error(res.msg); } }); } function search() { _getApiModelMakePageQuery(true); } function add() { mapDialogRef.value.open(); } const listIndex = ref(0); const numList: any = ref([ ]); const titIndex = ref(0); // 左侧点击 function listClick(index: any, item: any) { leftItem.value = item; listIndex.value = index; // 获取期数 numObj.value = null; titIndex.value = 0; confirmData.value = []; makeTypeshow.value = 1; numList.value = []; _getApiModelMakePeriodList(); } function _getApiModelMakePeriodList() { getApiModelMakePeriodList({ modelMakeId: leftItem.value.id, }).then((res) => { if (res.success) { if (res.data && res.data !== null) { numList.value = res?.data; if (numList.value && numList.value.length) { numObj.value = numList.value[0]; // 默认第一期 // 当前期数下已选任务 _getApiModelMakePeriodFlyRecordList(numObj.value.id); // 如若是已完成 显示模型 showModal(numObj.value); } } } }); } // 更新期数列表 function getNumList() { _getApiModelMakePeriodList(); _getApiModelMakePageQuery(true);// 左侧列表也更新 } // 期数点击 const newNumIndex = ref(); const newNumItem = ref(); function titClick(index: any, item: any) { titIndex.value = index; numObj.value = item; // 当前期数 newNumIndex.value = index; newNumItem.value = item; // console.log(item, 22222222222); // 已选任务 _getApiModelMakePeriodFlyRecordList(item.id); // 如若是已完成 显示模型 showModal(item); } // 追加架次 const morejcRef = ref(); function addmorejc() { if (!numObj.value) { message.warning('请先新建期数'); return; } morejcRef.value.open(); } // 重新添加 function addreset() { Modal.confirm({ title: '提示', content: '重新添加架次将清空所有已选数据，是否确定重新添加?', okText: '确认', cancelText: '取消', async onOk() { _postApiModelMakePeriodClear(numObj.value.id, []); }, }); } // 三维制作 function doing() { Modal.confirm({ title: '三维建模', content: '确认是否开始建模?', okText: '确认', cancelText: '取消', async onOk() { postApiModelMakePeriodStart({ id: numObj.value.id, }).then((res) => { if (res.success) { message.success(res.msg); _getApiModelMakePageQuery(true);// 左侧列表刷新 } else { message.error(res.msg); } }); }, }); } // 新增期数 const morenumRef = ref(); function addnum() { // 左侧点击的值传过去 morenumRef.value.open(leftItem.value); } const switchv = ref(1); // 右侧是否点击 const rightIsclick = ref(0); function makeClick() { rightIsclick.value++; } // 获取追加架次 function getjiaciconfirm(data: any) { const dd = data.map((item: any) => { return { flyRecordId: item.value, taskName: item.label, }; }); _postApiModelMakePeriodAppend(dd); } // 追加架次 function _postApiModelMakePeriodAppend(dataArr: any) { postApiModelMakePeriodAppend({ id: numObj.value.id, // 期数id flyRecordList: dataArr, }).then((res) => { if (res.success) { message.success(res.msg); _getApiModelMakePeriodFlyRecordList(numObj.value.id);// 已选任务 photolistqsRef.value?._getApiModelMakePeriodImagePageQuery();// 期数图片 } else { message.error(res.msg); } }); } // 查看原始数据 const photomodalRef = ref(); function lookPhoto() { photomodalRef.value.open(); } // 若是已完成，显示模型 function showModal(item: any) { if (item.state === 2) { makeTypeshow.value = 2; nextTick(() => { (window as any).viewer.tifModel.addModel(getFullModelFileURL(item.geoJsonPath), true, leftItem.value.altitude, 16); }); } else { makeTypeshow.value = 1; } } // 获取任务列表 function _getApiModelMakePeriodFlyRecordList(id: any) { getApiModelMakePeriodFlyRecordList({ id, }).then((res) => { if (res.success) { if (res.data && res.data.length) { confirmData.value = res.data; } else { confirmData.value = []; } // console.log('confirmData.value ', confirmData.value); } }); } // 名称修改 const nameModalRef = ref(); function edit() { nameModalRef.value?.open(leftItem.value); } function getname(data: any) { // postApiModelMakeUpdate // postApiModelMakePeriodUpdate postApiModelMakeUpdate({ id: leftItem.value.id, name: data.name, }).then((res) => { if (res.success) { message.success(res.msg); _getApiModelMakePageQuery(true); // nextTick(()=>{ // listClick(listIndex.value, leftItem.value); // setTimeout(() => { // titClick(newNumIndex.value, newNumItem.value); // }, 1000); // }) } else { message.error(res.msg); } }); } // 期数模型进度 function _getApiMediaModelLibraryGetOdmTaskInfoByModelMakePeriodId(modelMakePeriodIdv: any, index: any) { if (modelMakePeriodIdv && modelMakePeriodIdv !== null) { getApiMediaModelLibraryGetOdmTaskInfoByModelMakePeriodId({ modelMakePeriodId: modelMakePeriodIdv, }).then((res) => { if (res.success) { if (res.data && res.data !== null) { treeData.value[index].modelState = res.data.state; treeData.value[index].progress = (res.data.progress)?.toFixed(2); // console.log('treeData.value111', treeData.value); // 如果有正常的重新刷新列表 if (res.data.state === 99) { stop(); _getApiModelMakePageQuery(true); } } } }); } } function switchChange() { (window as any).viewer.tifModel.showModel(switchv.value); } // watch( // () => props.searchobj, // () => { // console.log('props.searchobj1111',props.searchobj) // }, // { // deep: true, // immediate: true, // }, // ); _getApiModelMakePageQuery(true); onUnmounted(() => { rightIsclick.value = 0; stop(); }); defineExpose({ _getApiModelMakePageQuery, }); </script> <template> <div class="h-full flex wrap-box" @click="makeClick"> <div class="flex-none w-350px py-4 px-3 left-box"> <div class="flex justify-between"> <a-input v-model:value="name" placeholder="请输入" class="flex-none w-70%" allow-clear @change="search"> <template #prefix> <SearchOutlined /> </template> </a-input> <a-button v-auth="'board.achievement.add'" type="primary" @click="add"> 新建模型 </a-button> </div> <ScrollLoad v-if="treeData?.length" class="list-box flex-auto overflow-auto min-h-0 pb-10" @load-more="_getApiModelMakePageQuery(false)" > <div v-for="(item, index) in treeData" :key="index" class="list-box-sub" :class="listIndex === index ? 'active' : ''" @click="listClick(index, item)" > <div> <span> {{ item.name }} </span> <span :class="`state-${item.state}`">{{ STATE[item.state] }}</span> </div> <div> {{ item.address }} </div> <!-- 进度新增 --> <div class="external-wrap"> <div class="chart-rising-external"> <div :style="{ width: `${item.progress}%` }" class="chart-rising-inside" :class="`state${item.modelState}`" /> </div> <div class="chart-rising-text"> {{ item.progress ? item.progress : 0 }}% </div> </div> </div> </ScrollLoad> <div v-else class="no-data pt-4 pl-2"> 暂无数据 </div> </div> <div class="flex-auto make_box"> <div class="right-top"> 三维照片： <div v-if="numList?.length" class="top-tit"> <span v-for="(item, index) in numList" :key="index" :class="titIndex === index ? 'active' : ''" @click="titClick(index, item)" >第 {{ item.periods }} 期</span> </div> <div v-else class="no-data"> 暂无期数 </div> <a-button v-if="treeData?.length" v-auth="'board.achievement.numadd'" type="primary" class="ml-2" @click="addnum" > 新增 </a-button> </div> <!-- 展示内容-制作添加 --> <div v-if="makeTypeshow === 1" class="cont-box"> <div class="flex items-center"> <doubleSelect title="选择飞行数据：" :tree-data="doubleSelectList" :right-isclick="rightIsclick" :num-obj="numObj" @confirm="onConfirm" /> <div class="flex justify-between" style="flex-grow: 1;"> <div> <a-button v-auth="'board.achievement.addzj'" type="primary" class="mr-3" @click="addmorejc"> 追加架次 </a-button> <a-button v-if="confirmData && confirmData.length" v-auth="'board.achievement.resetadd'" @click="addreset" > 重新添加 </a-button> </div> <div> <span class="mr-3">创建时间：{{ numObj ? numObj.createTime ? numObj.createTime : '--' : '--' }}</span> <!-- 未完成才可以制作 --> <a-button v-if="numObj && numObj.state === 0 && confirmData.length" v-auth="'board.achievement.adddoing'" type="primary" class="mr-3" @click="doing" > 三维制作 </a-button> </div> </div> </div> <div v-if="confirmData && confirmData.length" class="flex yixuan-box"> <div class="tit"> 已选数据： </div> <div class="flex w-full flex-wrap"> <div v-for="item, index in confirmData" :key="index" class="select-item"> <a-tooltip placement="top" :title="item?.taskName"> <div class="select-item-text"> {{ item?.taskName }} </div> </a-tooltip> <div v-auth="'board.achievement.numdel'" class="img" @click="onDelete(item)"> <img src="@/assets/images/delete.png" alt=""> </div> </div> </div> </div> <div v-else class="no-data yixuan-box"> 已选数据：请先选择 </div> <!-- 图片墙 --> <photolist ref="photolistqsRef" :model-make-period-id="numObj ? numObj.id : ''" /> </div> <!-- 展示内容-制作完成显示 --> <div v-if="makeTypeshow === 2" class="cont-box cont-box2"> <div class="tit-box flex"> <div class="tit-box-left"> <img src="@/assets/images/achieveDisplay/cont-right-icon.png" alt="" class="img1"> <span> {{ leftItem ? leftItem.name ? leftItem.name : '' : '' }} </span> <img v-auth="'board.achievement.edit'" src="@/assets/images/achieveDisplay/cont-right-edit.png" alt="" class="img2" @click="edit" > <span class="mr-4">|</span> <span class="detail-cls" @click="lookPhoto"> 查看原始建模数据 </span> <img src="@/assets/images/achieveDisplay/cont-right-arrow.png" alt="" class="img3"> </div> <div class="tit-box-right"> <span class="mr-8"> 制作完成时间：{{ numObj.finishTime ? numObj.finishTime : '--' }} </span> <span class="mr-8"> 在地图上显示 <a-switch v-model:checked="switchv" :checked-value="1" :un-checked-value="0" class="ml-2" @change="switchChange" /> </span> <span> 默认展示 <a-switch v-model:checked="switchv" :checked-value="1" :un-checked-value="0" class="ml-2" @change="switchChange" /> </span> </div> </div> <!-- 完整模型 --> <mxend /> </div> </div> <MapDialog ref="mapDialogRef" @confirm="_getApiModelMakePageQuery(true)" /> <!-- 追加架次 --> <morejc ref="morejcRef" @confirm="getjiaciconfirm" /> <!-- 期数添加 --> <morenum ref="morenumRef" @confirm="getNumList" /> <!-- 原始建模数据 --> <photomodal ref="photomodalRef" :model-make-period-id="numObj ? numObj.id : ''" :rewn-list="confirmData" /> <!-- 修改名称 --> <nameModal ref="nameModalRef" @confirmname="getname" /> </div> </template> <style lang="less" scoped> .wrap-box { border: 1px solid #456b9f; .left-box { border-right: 1px solid #456b9f; .list-box { // overflow-y: auto; // height: calc(100% - 50px); height: 670px; margin-top: 12px; .list-box-sub { padding: 8px; margin-bottom: 10px; font-family: PingFangSC-Regular; font-size: 15px; font-weight: 400; color: #f7f7f7; cursor: pointer; &:hover { background: #0c2e52; } &.active { background: #0c2e52; } div:nth-of-type(1) { display: flex; line-height: 21px; span:nth-of-type(1) { display: inline-block; width: 260px; } span:nth-of-type(2) { display: inline-block; width: 55px; // height: 16px; margin-top: 2px; margin-left: 8px; font-size: 12px; line-height: 16px; color: #ffffff; text-align: center; text-align: center; // background: #007f4f59; border-radius: 3px; // box-shadow: inset -3px -3px 12px 0 #03865cc7; } .state--1 { background: red; box-shadow: inset -3px -3px 12px 0 red; } .state-0 { background: #d86605; box-shadow: inset -3px -3px 12px 0 #d86605; } .state-1 { background: #fff70459; box-shadow: inset -3px -3px 12px 0 #f1e90659; } .state-2 { background: #007f4f59; box-shadow: inset -3px -3px 12px 0 #007f4f59; } } div:nth-of-type(2) { margin-top: 5px; font-size: 13px; color: #ffffffb3; } // .chart-rising-title { // width: 62px; // text-align: right; // } // .chart-rising-title, // .chart-rising-text { // margin: 0 5px; // font-size: 8px; // font-weight: 400; // color: rgba(255, 255, 255, 0.7); // } .external-wrap { display: flex; align-items: center; margin-top: 5px; .chart-rising-external { display: flex; align-items: center; width: 272px; height: 4px; background: #096fff4d; border-radius: 11px; .chart-rising-inside { height: 4px; background: #1790ff; border-radius: 11px; &.state99 { background: #59c06c; } &.state-1 { background: red; } &.state-2 { background: red; } &.state-3 { background: red; } } } .chart-rising-text { margin-top: 0; margin-left: 8px; font-family: PingFangSC-Regular; font-size: 12px; font-weight: 400; color: #ffffff80; text-align: right; } } } } } .make_box { .right-top { display: flex; align-items: center; height: 48px; padding: 0 16px; font-family: PingFangSC-Medium; font-size: 15px; font-weight: 500; color: #ffffff; border-bottom: 1px solid #456b9f; .top-tit { display: flex; align-items: center; height: 100%; margin-left: 26px; span { display: flex; align-items: center; height: 100%; margin-right: 43px; font-family: PingFangSC-Regular; font-size: 15px; font-weight: 400; color: #ffffffb3; text-align: center; cursor: pointer; // &:hover { // color: #fff; // border-bottom: 2px solid #2f6bff; // } &.active { color: #fff; border-bottom: 2px solid #2f6bff; } } } } .cont-box { .yixuan-box { display: flex; // flex-wrap: wrap; // align-items: center; // height: 32px; padding: 0 16px; .tit { width: 80px; } .select-item { display: flex; align-items: center; width: 218px; height: 28px; margin-right: 12px; margin-bottom: 10px; line-height: 32px; cursor: pointer; background: #173d66; border: 1px solid #446d9e00; border-radius: 4px; .select-item-text { width: 185px; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .img { // padding-left: 15px; padding: 0 6px; margin-top: 4px; cursor: pointer; img { width: 15px; height: 15px; } } } } &.cont-box2 { align-items: center; padding: 16px; .tit-box { display: flex; align-items: center; justify-content: space-between; height: 32px; line-height: 32px; .tit-box-left { display: flex; align-items: center; .img1 { width: 33px; height: 33px; margin-right: 8px; } .img2 { width: 16px; height: 16px; margin-right: 16px; margin-left: 4px; cursor: pointer; } .img3 { width: 16px; height: 16px; margin-left: 4px; } .detail-cls { font-family: PingFangSC-Regular; font-size: 15px; font-weight: 400; color: #1790ff; cursor: pointer; } } .tit-box-right { display: flex; align-items: center; span { display: flex; align-items: center; } } } } } } } </style>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。