<template>
<div class="operate">
<el-form ref="operateRuleForm" :model="form" :rules="rules">
<el-divider content-position="left">基本情况</el-divider>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="项目名称:" prop="projectName">
<!-- 项目名称跟月度上报Excel里面的项目名称做匹配，所以不能随便改变 -->
<el-input v-model="form.projectName" placeholder="请输入项目名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目昵称:" prop="projectAbbreviation" class="formItem">
<el-input v-model="form.projectAbbreviation" placeholder="请输入项目昵称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目类别:" prop="projectTypeId" class="formItem">
<el-select v-model="form.projectTypeId" placeholder="请选择项目类别" @change="projectTypeChange" style="width: 100%">
<el-option v-for="dict in props.types" :key="dict.id" :label="dict.projectTypeName" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="建设类别:" prop="buildCategory">
<el-select v-model="form.buildCategory" placeholder="请选择建设类别" style="width: 100%">
<el-option v-for="dict in props.buildCategory" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目库类型:" prop="projectLibraryType" class="formItem">
<el-select v-model="form.projectLibraryType" placeholder="请选择项目库类型" style="width: 100%">
<el-option v-for="dict in props.projectLibraryType" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否豁免项目:" prop="isProjectExempt">
<el-select v-model="form.isProjectExempt" placeholder="请选择" style="width: 100%">
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="排水分区:" prop="drainagePartition">
<el-select
v-model="form.analysisUsers1"
placeholder="请选择排水分区(支持多选)"
style="width: 100%"
multiple
collapse-tags
collapse-tags-tooltip
>
<el-option v-for="dict in project_drainage_zone" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目起止日期:" prop="time" class="formItem">
<el-date-picker
v-model="form.time"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目完工日期:" prop="time1">
<el-date-picker
type="date"
v-model="form.projectCompleteTime"
value-format="YYYY-MM-DD"
start-placeholder="开始日期"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="16">
<el-form-item label="项目位置:" prop="projectLocationName" style="width: 100%">
<el-input v-model="form.projectLocationName" controls-position="right" placeholder="请输入">
<template #append>
<el-button type="primary" @click="visible = true">设置项目位置中心</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<!-- 用于应标，项目填报管理，不做字段存储 -->
<el-form-item label="项目管理级别:" prop="projectLevel" style="width: 100%">
<el-select v-model="form.projectLevel" placeholder="请选择" style="width: 100%">
<el-option v-for="dict in project_manage_level" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="项目范围:" prop="projectrange" style="width: 100%">
<el-input type="text" v-model="form.projectrange" placeholder="请输入项目范围">
<template #append>
<el-button type="primary" @click="openProjectDrawingTool">设置项目范围</el-button>
</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="规划条件:" prop="planCondition" style="width: 100%">
<el-input type="textarea" v-model="form.planCondition" placeholder="请输入规划条件" />
</el-form-item>
</el-row>
<el-row>
<el-form-item label="项目概况:" prop="projectOverview" style="width: 100%">
<el-input type="textarea" v-model="form.projectOverview" placeholder="请输入项目概况" resize="none" />
</el-form-item>
</el-row>
<el-row>
<el-form-item label="项目全景图片:" prop="projectpicture" style="width: 100%">
<ImageFileUpload
listType="picture-card"
:limit="1"
:saveFileArr="form.projectpicture"
refType="projectInfoNew"
refField="constraction"
:fileType="['png', 'jpg', 'jpeg']"
/>
</el-form-item>
</el-row>
<el-divider content-position="left">项目内容</el-divider>
<el-card class="box-card" shadow="never" v-for="(item, index) in projectContentList">
<template #header>
<div class="card-header">
<span>{{ item.label }}</span>
</div>
</template>
<el-table :data="form[`list${index + 2}`]">
<el-table-column v-for="it in item.list" :label="it.propertyName" :prop="it.propertyKey">
<template #default="{ row }">
<el-input v-model="row[it.propertyKey]" />
</template>
</el-table-column>
</el-table>
</el-card>
<el-divider content-position="left">项目投资</el-divider>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="投资批复文件说明（已批复项目填写）:" prop="investFileName">
<el-input v-model="form.investFileName" placeholder="请输入投资批复文件说明" />
</el-form-item>
</el-col>
<el-col :span="12">
<div class="upload">
<ImageFileUpload
listType="text"
:limit="1"
:saveFileArr="form.sysFileSaveRequestList"
refType="projectInfoNew"
refField="investmentApproval"
:fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
/>
</div>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="项目总投资（含主体工程）（万元）:" prop="totalInvest">
<el-input v-model="form.totalInvest" placeholder="请输入项目总投资" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="地方政府投资（万元）:" prop="govermentInvest">
<el-input v-model="form.govermentInvest" placeholder="请输入地方政府投资" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="社会资本投入（万元）:" prop="socialInvest">
<el-input v-model="form.socialInvest" placeholder="请输入社会资本投入" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="项目运作模式:" prop="projectOperationPattern">
<el-select v-model="form.projectOperationPattern" placeholder="请选择项目运作模式" style="width: 100%">
<el-option v-for="dict in project_operation_pattern" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="海绵相关投资（不含主体工程）（万元）:" prop="spongeInvest">
<el-input v-model="form.spongeInvest" placeholder="请输入海绵相关投资" />
</el-form-item>
</el-col>
</el-row>
<el-table :data="form.list1" v-if="projectInvestList[0]">
<el-table-column v-for="it in projectInvestList[0].list" :label="it.propertyName" :prop="it.propertyKey">
<template #default="{ row }">
<el-input v-model="row[it.propertyKey]" />
</template>
</el-table-column>
</el-table>
<el-divider content-position="left">责任部门</el-divider>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="责任部门:" prop="chargeDepartment">
<el-input v-model="form.chargeDepartment" placeholder="请输入责任部门" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="责任人:" prop="chargeUser">
<el-input v-model="form.chargeUser" placeholder="请输入责任人" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系方式:" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系方式" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="设计单位:" prop="designUnit">
<el-select v-model="form.designUnit" placeholder="请选择设计单位" filterable style="width: 100%">
<el-option v-for="dict in projectCompanyList3" :key="dict.id" :label="dict.unitName" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="施工单位:" prop="constructUnit">
<el-select v-model="form.constructUnit" filterable placeholder="请选择施工单位" style="width: 100%">
<el-option v-for="dict in projectCompanyList" :key="dict.id" :label="dict.unitName" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="运维单位:" prop="operationUnit">
<el-select v-model="form.operationUnit" filterable placeholder="请选择运维单位" style="width: 100%">
<el-option v-for="dict in projectCompanyList2" :key="dict.id" :label="dict.unitName" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">建设进度</el-divider>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="建设状态:" prop="buildStatus">
<el-select v-model="form.buildStatus" placeholder="请选择建设状态" style="width: 100%">
<el-option v-for="dict in build_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设进度:" prop="projectProgress">
<div style="display: flex; width: 100%">
<el-slider v-model="form.projectProgress" style="flex: 1" />
<span style="margin-left: 10px">{{ form.projectProgress + '%' }}</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="完成项目总投资（含主体工程）（万元）:" prop="accomplishTotalInvest">
<el-input v-model="form.accomplishTotalInvest" placeholder="请输入完成项目总投资" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="完成海绵相关投资（不含主体工程）（万元）:" prop="accomplishSpongeInvest">
<el-input v-model="form.accomplishSpongeInvest" placeholder="请输入完成海绵相关投资" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="建设过程中照片:" prop="underWay">
<div class="upload">
<ImageFileUpload
listType="picture-card"
:limit="10"
:saveFileArr="constractionFlieList"
refType="projectInfoNew"
refField="constraction"
:fileType="['png', 'jpg', 'jpeg']"
/>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设完成后照片:" prop="complete">
<div class="upload">
<ImageFileUpload
listType="picture-card"
:limit="10"
:saveFileArr="postConstractionFlieList"
refType="projectInfoNew"
refField="postConstraction"
:fileType="['png', 'jpg', 'jpeg']"
/>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 位置选择弹窗 -->
<el-dialog v-model="visible" title="选择位置" :close-on-click-modal="false" width="800px">
<div class="mapBox">
<mapBoxSelectPosition
style="position: relative; width: 100%; height: 99.5%"
:initJson="`/static/libs/mapbox/style/floodOneMap.json`"
:previousPoint="form.projectLocation"
:previousPointName="form.projectAbbreviation"
></mapBoxSelectPosition>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="essureGetPosition">确 定</el-button>
</div>
</template>
</el-dialog>
<!-- 边界绘制弹窗 -->
<el-dialog v-model="mapBoxDrawingTool" title="绘制工程范围" :close-on-click-modal="false" width="800px">
<div class="flex imgTool">
<el-tooltip effect="dark" :content="item.name" placement="bottom" v-for="item in toolList" :key="item.id">
<img
:src="getImageUrl(item.url, 'newImgs/paishuiImgs')"
:class="toolIndex == item.id ? 'active' : ''"
@click="changeTool(item.id)"
/>
</el-tooltip>
</div>
<div class="mapBox">
<gisMapBox1
style="position: relative; width: 100%; height: 99.5%"
:initJson="`/static/libs/mapbox/style/floodOneMap.json`"
></gisMapBox1>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="drawProjectGeometry">确 定</el-button>
</div>
</template>
</el-dialog>
<!-- 规划分区 -->
<el-dialog v-model="visibleArea" title="规划分区" :close-on-click-modal="false" width="1200px">
<projectionMap @getProjectArea="getProjectArea"></projectionMap>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="visibleArea = false">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { required } from '@/utils/validate-helper';
import projectionMap from './projectionAreaMap.vue';
import { useDicts } from '@/hooks';
import MapBox from '@/components/Map';
import gisMapBox1 from '@/views/gisMapPage/gisMapBox1.vue';
import mapBoxSelectPosition from '@/components/mapBoxSelectPosition/mapBoxSelectPosition.vue';
import { inheritAttr } from '@/utils/v3';
import {
getProjectCompanyList,
getProjectItemDescriptionConfigList,
projectInfoNewAdd,
projectInfoNewById,
getFileLIst,
projectInfoNewEdit,
} from '@/api/project/projectInformationNew';
import ImageFileUpload from '@/components/ImageFileUpload';
import { getImageUrl } from '@/utils/ruoyi';
import mapBoxSelectPositionVue from '../../../components/mapBoxSelectPosition/mapBoxSelectPosition.vue';
import { nextTick, onBeforeUnmount } from 'vue';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['close']);
const { drainage_partition, task_type, project_operation_pattern, build_status, project_drainage_zone } = useDicts(proxy);
const { project_manage_level } = proxy.useDict('project_manage_level');
const props = defineProps({
curRow: {
type: Object,
default: () => ({}),
},
opts: {
type: Object,
default: () => ({}),
},
types: {
type: Array,
default: () => [],
},
buildCategory: {
type: Array,
default: () => [],
},
projectLibraryType: {
type: Array,
default: () => [],
},
projectContentType: {
type: Array,
default: () => [],
},
});
const { curRow, opts } = props;
const form = reactive({
projectLevel: '',
projectTypeId: '',
projectName: '',
projectAbbreviation: '',
buildCategory: '',
drainagePartition: '',
time: '',
projectCompleteTime: proxy.moment(new Date()).format('YYYY-MM-DD'),
startTime: '',
endTime: '',
projectLocation: '',
controlPartitionNum: '',
isProjectExempt: '0',
exemptFileSaveRequestList: [],
projectLocationName: '',
planCondition: '',
projectrange: '',
projectLibraryType: '',
taskType: '',
projectOverview: '',
projectpicture: [],
investFileName: '',
totalInvest: '',
govermentInvest: '',
socialInvest: '',
projectOperationPattern: '',
spongeInvest: '',
chargeDepartment: '',
chargeUser: '',
phone: '',
designUnit: '',
constructUnit: '',
operationUnit: '',
buildStatus: '',
projectProgress: 0,
accomplishTotalInvest: '',
accomplishSpongeInvest: '',
underWay: '',
complete: '',
fileName: '',
list1: [{}],
list2: [{}],
list3: [{}],
list4: [{}],
sysFileSaveRequestList: [],
});
const getPointPosition = ref(''); //接收绘制得到的点位
const getPointAddress = ref(''); //接收绘制得到的点位地址
const rules = reactive({
projectTypeId: required('项目类别'),
projectName: required('项目名称'),
buildCategory: required('建设类别'),
time: required('项目日期'),
projectLocation: required('项目位置'),
isProjectExempt: required('豁免项目'),
projectLibraryType: required('项目库类型'),
projectOverview: required('项目概况'),
investFileName: required('投资批复文件说明'),
totalInvest: required('项目总投资'),
govermentInvest: required('地方政府投资'),
socialInvest: required('社会资本投入'),
projectOperationPattern: required('项目运作模式'),
spongeInvest: required('海绵相关投资'),
chargeDepartment: required('责任部门'),
});
const projectCompanyList = ref([]);
const projectCompanyList2 = ref([]);
const projectCompanyList3 = ref([]);
const { unit_type } = proxy.useDict('unit_type');
const projectItemDescriptionConfigList = ref([]);
const projectContentList = ref([]);
const projectInvestList = ref([]);
const visible = ref(false);
const mapBoxDrawingTool = ref(false);
const visibleArea = ref(false);
const constractionFlieList = ref([]);
const postConstractionFlieList = ref([]);
const previousPoint = ref('');
const previousPointName = ref('');
const toolList = ref([
{ name: '画点', url: 'position.png', id: '1' },
{ name: '画线', url: 'line.png', id: '2' },
{ name: '画面', url: 'area.png', id: '3' },
{ name: '清除测量', url: 'clear.png', id: '4' },
]);
const drawPointList = ref([]);
const multiPointList = ref([]);
const multiPolyLineList = ref([]);
const multiPolyPolygonList = ref([]);
const projectGeometry = ref('');
// 获取位置
function getAddress(val) {
form.projectLocation = val.lonLat.join(','); //经纬度
form.projectLocationName = val.caseAddress; //位置名称
console.log('获取位置信息--', val, form.projectLocation);
}
// 获取分区
function getProjectArea(val) {
form.controlPartitionNum = val.projectionAreaName;
}
const submit = () => {
proxy.$refs.operateRuleForm.validate(async (valid, fields) => {
if (valid) {
console.log('submit!', form);
if (form.isProjectExempt == '0') form.exemptFileSaveRequestList = [];
const projectItemDescriptionSaveRequestList = [];
for (let i = 0; i < projectContentList.value.length; i++) {
const formList = form[`list${i + 2}`];
const item = projectContentList.value[i];
for (const it of item.list) {
for (const key in formList[0]) {
if (Object.hasOwnProperty.call(formList[0], key)) {
const element = formList[0][key];
if (key === it.propertyKey) {
it.propertyValue = element;
}
}
}
projectItemDescriptionSaveRequestList.push(it);
}
}
for (let j = 0; j < projectInvestList.value.length; j++) {
const formList = form.list1;
const item = projectInvestList.value[j];
for (const it of item.list) {
for (const key in formList[0]) {
if (Object.hasOwnProperty.call(formList[0], key)) {
const element = formList[0][key];
if (key === it.propertyKey) {
it.propertyValue = element;
}
}
}
projectItemDescriptionSaveRequestList.push(it);
}
}
let sysFileSaveRequestList = JSON.parse(JSON.stringify(form.sysFileSaveRequestList));
sysFileSaveRequestList = sysFileSaveRequestList.concat(constractionFlieList.value, postConstractionFlieList.value);
form.drainagePartition = form.analysisUsers1.join(',');
const params = {
id: curRow?.id || '',
...form,
startTime: form.time[0],
endTime: form.time[1],
projectItemDescriptionSaveRequestList,
sysFileSaveRequestList,
};
delete params.list1;
delete params.list2;
delete params.list3;
delete params.list4;
delete params.time;
let methed = '';
if (params.id) {
methed = projectInfoNewEdit;
} else {
methed = projectInfoNewAdd;
}
if (!methed) return;
console.log(params, 'paramsparamsparams');
const res = await methed(params);
if (res?.code !== 200) return;
proxy.$modal.msgSuccess('操作成功！');
emit('close', opts.type);
} else {
console.log('error submit!', fields);
}
});
};
const getProjectCompanyLists = async () => {
const res = await getProjectCompanyList();
if (res && res.code == 200) {
let datas = res.data;
// 施工单位
projectCompanyList.value = datas.filter(item => item.unitType == unit_type.value[0].value);
// 运维单位
projectCompanyList2.value = datas.filter(item => item.unitType == unit_type.value[1].value);
// 设计单位
projectCompanyList3.value = datas.filter(item => item.unitType == unit_type.value[2].value);
}
};
const getProjectItemDescriptionConfigLists = async () => {
const res = await getProjectItemDescriptionConfigList({ projectTypeId: form.projectTypeId });
if (res?.code !== 200) return;
projectItemDescriptionConfigList.value = res?.data || [];
projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => {
const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value);
const obj = {};
for (const item of list) {
obj[item.propertyKey] = '';
}
form[`list${i + 2}`] = [obj];
return {
list: JSON.parse(JSON.stringify(list)),
label: item.label,
};
});
projectInvestList.value = props.projectContentType.slice(3).map(item => {
const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value);
const obj = {};
for (const item of list) {
obj[item.propertyKey] = '';
}
form.list1 = [obj];
return {
list: JSON.parse(JSON.stringify(list)),
label: item.label,
};
});
console.log(projectContentList, projectInvestList);
};
const projectTypeChange = () => {
form.list1 = [{}];
form.list2 = [{}];
form.list3 = [{}];
form.list4 = [{}];
getProjectItemDescriptionConfigLists();
};
const getDetail = async () => {
const res = await projectInfoNewById(curRow.id);
if (res?.code !== 200) return;
console.log(res.data, 'ressssss---------');
previousPoint.value = res.data.projectLocation;
previousPointName.value = res.data.projectName;
form.time = [res.data.startTime, res.data.endTime];
inheritAttr(res.data, form);
projectItemDescriptionConfigList.value = res?.data?.projectItemDescriptionList || [];
console.log(projectItemDescriptionConfigList);
projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => {
const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value);
const obj = {};
for (const item of list) {
obj[item.propertyKey] = item.propertyValue;
}
form[`list${i + 2}`] = [obj];
return {
list: JSON.parse(JSON.stringify(list)),
label: item.label,
};
});
projectInvestList.value = props.projectContentType.slice(3).map(item => {
const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value);
const obj = {};
for (const item of list) {
obj[item.propertyKey] = item.propertyValue;
}
form.list1 = [obj];
return {
list: JSON.parse(JSON.stringify(list)),
label: item.label,
};
});
getFileInfo(res.data.id, 'projectInfoNew', 'investmentApproval', data => {
console.log(data);
form.fileName = data?.[0]?.name || '';
if (data?.[0]) {
form.sysFileSaveRequestList = [data[0]];
}
});
res.data.sysFileList = res.data.sysFileList || [];
for (const item of res.data.sysFileList) {
item.refType = 'projectInfoNew';
}
constractionFlieList.value = res.data.sysFileList.filter(item => item.refField === 'constraction');
postConstractionFlieList.value = res.data.sysFileList.filter(item => item.refField === 'postConstraction');
};
const getFileInfo = async (id, refType, refField, callback) => {
const res = await getFileLIst({ refId: id, refType, refField });
if (res?.code !== 200) return;
callback && callback(res.data);
};
//绘制工具切换事件
const changeTool = toolId => {
newfiberMapbox.map.off('click', drawPointEvent);
if (toolId == '1') {
//画点
multiPointList.value = [];
multiPolyLineList.value = [];
multiPolyPolygonList.value = [];
drawPointList.value = [];
if (!!newfiberMapbox.measure) {
newfiberMapbox.measure.clearMeasureAll();
}
if (newfiberMapbox.map.getLayer('projectrange')) {
newfiberMapbox.map.removeLayer('projectrange');
newfiberMapbox.map.removeSource('projectrange');
}
window.drawPointFun = newfiberMapbox.map.on('click', drawPointEvent);
} else if (toolId == '2') {
//画线
multiPointList.value = [];
multiPolyPolygonList.value = [];
if (newfiberMapbox.map.getLayer('drawPoint')) {
newfiberMapbox.map.removeLayer('drawPoint');
newfiberMapbox.map.removeSource('drawPoint');
}
if (newfiberMapbox.map.getLayer('projectrange')) {
newfiberMapbox.map.removeLayer('projectrange');
newfiberMapbox.map.removeSource('projectrange');
}
let layerId = String(new Date().getTime());
if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map);
newfiberMapbox.measure.measureDistance('drawLine' + layerId, true, geojson => {
multiPolyLineList.value.push(geojson.geometry.coordinates);
projectGeometry.value = Terraformer.WKT.convert(turf.multiLineString(multiPolyLineList.value).geometry);
});
newfiberMapbox.measure.setDistance();
} else if (toolId == '3') {
//画面
multiPointList.value = [];
multiPolyLineList.value = [];
if (newfiberMapbox.map.getLayer('drawPoint')) {
newfiberMapbox.map.removeLayer('drawPoint');
newfiberMapbox.map.removeSource('drawPoint');
}
if (newfiberMapbox.map.getLayer('projectrange')) {
newfiberMapbox.map.removeLayer('projectrange');
newfiberMapbox.map.removeSource('projectrange');
}
let layerId = String(new Date().getTime());
if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map);
newfiberMapbox.measure.measureArea(layerId, true, geojson => {
multiPolyPolygonList.value.push(geojson.geometry.coordinates);
projectGeometry.value = Terraformer.WKT.convert(turf.multiPolygon(multiPolyPolygonList.value).geometry);
});
newfiberMapbox.measure.setArea();
} else {
//清除
multiPointList.value = [];
multiPolyLineList.value = [];
multiPolyPolygonList.value = [];
projectGeometry.value = '';
if (newfiberMapbox.map.getLayer('drawPoint')) {
newfiberMapbox.map.removeLayer('drawPoint');
newfiberMapbox.map.removeSource('drawPoint');
}
if (newfiberMapbox.map.getLayer('projectrange')) {
newfiberMapbox.map.removeLayer('projectrange');
newfiberMapbox.map.removeSource('projectrange');
}
if (!newfiberMapbox.measure) return;
newfiberMapbox.measure.clearMeasureAll();
}
};
//绘点方法监听
const drawPointEvent = e => {
let pointFeature = turf.point([e.lngLat.lng, e.lngLat.lat]);
drawPointList.value.push(pointFeature);
multiPointList.value.push(pointFeature.geometry.coordinates);
projectGeometry.value = Terraformer.WKT.convert(turf.multiPoint(multiPointList.value).geometry);
let drawPointGeojson = turf.featureCollection(drawPointList.value);
if (!newfiberMapbox.map.getLayer('drawPoint')) {
newfiberMapbox.map.addSource('drawPoint', { type: 'geojson', data: drawPointGeojson });
newfiberMapbox.map.addLayer({
id: 'drawPoint',
type: 'circle',
source: 'drawPoint',
paint: {
'circle-color': 'rgba(127, 186, 0,1)',
'circle-radius': 5,
},
});
} else {
newfiberMapbox.map.getSource('drawPoint').setData(drawPointGeojson);
}
};
const essureGetPosition = () => {
visible.value = false;
form.projectLocation = getPointPosition.value;
form.projectLocationName = getPointAddress.value;
};
//打开项目边界绘制工具
const openProjectDrawingTool = () => {
mapBoxDrawingTool.value = true;
nextTick(() => {
if (form.projectrange) {
let type, paint;
let projectionGeojson = turf.featureCollection([{ type: 'Feature', geometry: Terraformer.WKT.parse(form.projectrange) }]);
if (form.projectrange.includes('POINT')) {
type = 'circle';
paint = {
'circle-radius': 8,
'circle-color': 'rgba(15, 203, 116,1)',
'circle-blur': 3,
};
} else if (form.projectrange.includes('POLYGON')) {
type = 'fill';
paint = {
'fill-color': 'rgba(15, 203, 116,0.5)',
'fill-outline-color': 'rgba(15, 203, 116,1)',
};
} else {
type = 'line';
paint = {
'line-color': 'rgba(15, 203, 116,1)',
'line-blur': 3,
'line-width': 5,
};
}
setTimeout(() => {
newfiberMapbox.map.addSource('projectrange', { type: 'geojson', data: projectionGeojson });
newfiberMapbox.map.addLayer({
id: 'projectrange',
type: type,
source: 'projectrange',
paint: paint,
});
newfiberMapbox.setCenter(form.projectLocation.split(',').map(Number));
}, 500);
}
});
};
//绘制边界确认事件
const drawProjectGeometry = () => {
mapBoxDrawingTool.value = false;
form.projectrange = projectGeometry.value;
};
onMounted(() => {
getProjectCompanyLists();
form.analysisUsers1 = props.curRow.analysisUsers1;
if (curRow?.id) {
getDetail();
} else {
if (props.types.length) {
form.projectTypeId = props.types[0].id;
getProjectItemDescriptionConfigLists();
}
}
bus.on('getDrawPoint', e => {
console.log('eeeee---', e);
getPointPosition.value = e[0];
getPointAddress.value = e[1];
});
});
onBeforeUnmount(() => {
bus.off('getDrawPoint');
});
defineExpose({
submit,
});
</script>
<style lang="scss" scoped>
.operate {
.box-card {
margin-top: 10px;
&:first-of-type {
margin-top: 0;
}
}
.tips {
margin-left: 10px;
line-height: 30px;
}
.upload {
position: relative;
.fileName {
position: absolute;
left: 0;
top: 30px;
white-space: nowrap;
display: flex;
align-items: center;
.del {
flex-shrink: 0;
color: #f56c6c;
cursor: pointer;
margin-left: 10px;
}
}
.imgBox {
display: flex;
flex-wrap: wrap;
.img {
margin-right: 10px;
}
}
}
.img {
position: relative;
width: 178px;
height: 178px;
img {
width: 100%;
height: 100%;
}
.mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none;
.icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
}
&:hover {
.mask {
display: block;
}
}
}
}
.imgTool {
position: absolute;
top: 80px;
right: 30px;
align-items: center;
z-index: 111;
img {
cursor: pointer;
margin-left: 10px;
width: 28px;
height: 28px;
}
.active {
border: 1px solid red;
}
}
.mapBox {
height: 600px;
}
</style>
