<template>
<div class="projectInformation">
<div class="top">
<el-form ref="queryFormRef" :model="form" v-show="showSearch">
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="项目名称:" prop="projectName" class="formItem">
<el-input
v-model="form.projectName"
placeholder="请输入项目名称"
style="width: 100%"
></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="项目类型:" prop="projectTypeId">
<el-select
v-model="form.projectTypeId"
placeholder="请选择项目类型"
style="width: 100%"
>
<el-option label="全部" value="" />
<el-option
v-for="dict in projectTypes"
:key="dict.id"
:label="dict.projectTypeName"
:value="dict.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="建设类别:" prop="buildCategory">
<el-select
v-model="form.buildCategory"
placeholder="请选择建设类别"
style="width: 100%"
>
<el-option label="全部" value="" />
<el-option
v-for="dict in build_category"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6.5">
<el-form-item label="项目日期:" prop="time">
<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="4.5">
<el-form-item label="责任部门:" prop="chargeDepartment">
<el-input
v-model="form.chargeDepartment"
placeholder="请输入责任部门"
style="width: 100%"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="项目库类型:" prop="projectLibraryType" class="formItem">
<el-select
v-model="form.projectLibraryType"
placeholder="请选择项目库类型"
style="width: 100%"
>
<el-option label="全部" value="" />
<el-option
v-for="dict in project_library_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4.5">
<el-form-item>
<el-button type="primary" icon="Search" @click="search">
查询</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<card-list class="card-list" ref="cardListRef" />
<el-row class="row">
<el-button
type="primary"
plain
icon="Plus"
@click="openDialog({}, 'add')"
>新增项目</el-button
>
<el-button
type="primary"
plain
icon="Edit"
@click="editSchedule"
>修改进度</el-button
>
<el-button
type="danger"
plain
icon="Delete"
@click="batchDel"
>批量删除</el-button
>
<el-button
type="primary"
plain
icon="Download"
>导出</el-button
>
<right-toolbar
v-model:showSearch="showSearch"
@queryTable="resetQuery"
></right-toolbar>
</el-row>
<div class="table" ref="table_box">
<el-table
:data="tableData"
v-loading="loading"
stripe
:max-height="maxHeight"
ref="multipleTableRef"
>
<el-table-column type="selection" align="center" width="55" />
<el-table-column label="项目编码" prop="projectNo" show-overflow-tooltip />
<el-table-column label="项目类型" align="center" prop="projectTypeName" show-overflow-tooltip />
<el-table-column label="项目名称" prop="projectName" show-overflow-tooltip />
<el-table-column label="建设类别" align="center" prop="buildCategory" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ findText('build_category', row.buildCategory) }}</span>
</template>
</el-table-column>
<el-table-column label="所属排水分区" align="center" prop="drainagePartition" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ findText('drainage_partition', row.drainagePartition) }}</span>
</template>
</el-table-column>
<el-table-column label="项目起止日期" align="center" prop="projectTime" show-overflow-tooltip />
<el-table-column label="项目位置" align="center" prop="projectLocation" show-overflow-tooltip>
<template #default="{ row }">
<el-button type="primary" link @click="viewPosition(row.projectLocation)">查看</el-button>
</template>
</el-table-column>
<el-table-column label="填报时间" align="center" prop="createTime" show-overflow-tooltip />
<el-table-column label="任务类型" align="center" prop="name9" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ findText('task_type', row.taskType) }}</span>
</template>
</el-table-column>
<el-table-column label="项目库类型" align="center" prop="projectLibraryType" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ findText('project_library_type', row.projectLibraryType) }}</span>
</template>
</el-table-column>
<el-table-column label="建设进度" align="center" prop="projectProgress" show-overflow-tooltip />
<el-table-column label="操作" align="center" show-overflow-tooltip width="170">
<template #default="{ row }">
<el-button type="primary" link @click="openDialog(row, 'view')">查看</el-button>
<el-button type="primary" link @click="openDialog(row, 'edit')">编辑</el-button>
<el-button type="danger" link @click="del(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination class="pagination" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
</div>
<el-dialog
v-model="visible"
:title="`${opts.text}项目`"
:close-on-click-modal="false"
width="70%"
:before-close="close"
>
<operate
ref="operateRef"
v-if="['add', 'edit'].includes(opts.type)"
:cur-row="curRow"
:opts="opts"
:types="projectTypes"
:build-category="build_category"
:project-library-type="project_library_type"
:project-content-type="project_content_type"
@close="close"
/>
<detail
:cur-row="curRow"
:types="projectTypes"
:build-category="build_category"
:project-library-type="project_library_type"
:project-content-type="project_content_type"
v-else-if="opts.type === 'view'"
/>
<template #footer v-if="opts.type !== 'view'">
<div class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="handleOk">确 定</el-button>
</div>
</template>
</el-dialog>
<el-dialog
v-model="visible1"
title="修改建设进度"
:close-on-click-modal="false"
width="40%"
:before-close="dialogClose"
class="dialog"
>
<el-form ref="dialogRuleFormRef" :model="dialogForm" :rules="dialogRules" v-if="visible1">
<el-form-item label="建设状态:" prop="buildStatus">
<el-select
v-model="dialogForm.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-form-item label="建设进度:" prop="projectProgress">
<div style="display: flex;width: 100%">
<el-slider v-model="dialogForm.projectProgress" style="flex: 1;" />
<span style="margin-left: 10px;">{{ dialogForm.projectProgress + '%' }}</span>
</div>
</el-form-item>
<el-form-item label="完成项目总投资（含主体工程）（万元）:" prop="accomplishTotalInvest">
<el-input v-model="dialogForm.accomplishTotalInvest" placeholder="请输入完成项目总投资" />
</el-form-item>
<el-form-item label="完成海绵相关投资（不含主体工程）（万元）:" prop="accomplishSpongeInvest">
<el-input v-model="dialogForm.accomplishSpongeInvest" placeholder="请输入完成海绵相关投资" />
</el-form-item>
<el-form-item label="建设过程中照片:" prop="underWay">
<div class="upload">
<div class="imgBox" v-if="constractionFlieList.length">
<div class="img" v-for="item in constractionFlieList">
<img :src="item.url" class="avatar" />
<div class="mask">
<el-icon
class="icon"
:size="20"
@click="removeFile(item)"
><Delete /></el-icon>
</div>
</div>
</div>
<el-upload
class="avatar-uploader"
action="/prod-api/system/upload"
:headers="uploadHeader"
:before-upload="(rawFile) => beforeUpload(rawFile, ['.png', '.jpg', '.jpeg'])"
:on-success="(response) => onSuccess(response, 'constraction')"
:on-error="(error, uploadFile, uploadFiles) => onError(error, uploadFile, uploadFiles)"
:show-file-list="false"
>
<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</div>
</el-form-item>
<el-form-item label="建设完成后照片:" prop="complete">
<div class="upload">
<div class="imgBox" v-if="postConstractionFlieList.length">
<div class="img" v-for="item in postConstractionFlieList">
<img :src="item.url" class="avatar" />
<div class="mask">
<el-icon
class="icon"
:size="20"
@click="removeFile(item)"
><Delete /></el-icon>
</div>
</div>
</div>
<el-upload
class="avatar-uploader"
action="/prod-api/system/upload"
:headers="uploadHeader"
:before-upload="(rawFile) => beforeUpload(rawFile, ['.png', '.jpg', '.jpeg'])"
:on-success="(response) => onSuccess(response, 'postConstraction')"
:on-error="(error, uploadFile, uploadFiles) => onError(error, uploadFile, uploadFiles)"
:show-file-list="false"
>
<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</div>
</el-form-item>
</el-form>
<template #footer v-if="opts.type !== 'view'">
<div class="dialog-footer">
<el-button type="primary" @click="dialogSubmit">确 定</el-button>
<el-button @click="dialogClose">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog
v-model="visible2"
title="查看位置"
:close-on-click-modal="false"
width="60%"
class="dialog"
>
<div class="mapBox" v-if="visible2">
<MapBox ref="mapBoxRef" :isShowTool="false" :isShowSearch="false"></MapBox>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, watch, shallowRef, nextTick } from 'vue'
import { usePagination, useAdaption, useDicts } from '@/hooks'
import CardList from './components/cardList.vue'
import { optTextMap } from '@/utils/map'
import operate from './operate.vue'
import detail from './details.vue'
import { required } from '@/utils/validate-helper'
import { inheritAttr } from '@/utils/v3'
import uploadHeader from '@/utils/getUploadHeader'
import {
getProjectInfoNewPage,
projectTypeList,
projectInfoNewDel,
projectInfoNewDetail,
updateProjectBuildStatus
} from '@/api/projectInformationNew'
import MapBox from '@/components/Map'
const { proxy } = getCurrentInstance();
const { build_category, project_library_type, project_content_type, build_status, findText } = useDicts(proxy)
const showSearch = ref(true)
const form = reactive({
projectName: '',
projectTypeId: '',
buildCategory: '',
time: '',
chargeDepartment: '',
projectLibraryType: ''
})
const params = computed(() => {
const args = JSON.parse(JSON.stringify(form))
const { time } = args
delete args.time
return {
...args,
startTime: time?.[0] || '',
endTime: time?.[1] || ''
}
})
const dialogForm = reactive({
projectNo: '',
buildStatus: '',
projectProgress: 0,
accomplishTotalInvest: '',
accomplishSpongeInvest: '',
underWay: '',
complete: ''
})
const dialogRules = reactive({
buildStatus: required('建设状态'),
projectProgress: required('建设进度'),
accomplishTotalInvest: required('完成项目总投资'),
accomplishSpongeInvest: required('完成海绵相关投资'),
// underWay: required('建设过程中照片'),
// complete: required('建设完成后照片'),
})
const fileList = ref([])
const constractionFlieList = computed(() => {
return fileList.value.filter(item => item.refField === 'constraction')
})
const postConstractionFlieList = computed(() => {
return fileList.value.filter(item => item.refField === 'postConstraction')
})
const { maxHeight, onResize } = useAdaption(proxy, 'table_box')
watch(showSearch, onResize)
const opts = reactive({
type: '',
text: ''
})
const visible = ref(false)
const curRow = shallowRef({})
const visible1 = ref(false)
const checkedList = shallowRef([])
const projectTypes = ref([])
const visible2 = ref(false)
const {
pageNum,
pageSize,
tableData,
total,
loading,
getTableList
} = usePagination(getProjectInfoNewPage, params)
const getProjectTypeList = async () => {
const res = await projectTypeList({ status: '0' })
if(res?.code !== 200) return
projectTypes.value = res?.data || []
}
const search = () => {
pageNum.value = 1
getTableList()
}
const resetQuery = () => {
proxy.$refs.queryFormRef.resetFields()
search()
}
const openDialog = (data, type) => {
visible.value = true
opts.type = type
opts.text = optTextMap.get(type)
curRow.value = data
}
const close = (type) => {
visible.value = false
opts.type = ''
opts.text = ''
if(['edit', 'add'].includes(type)) {
search()
proxy.$refs.cardListRef.getData()
}
}
const del = (row) => {
proxy.$modal
.confirm("是否确认删除？")
.then(async () => {
const res = await projectInfoNewDel(row.id)
if(res?.code !== 200) return
proxy.$modal.msgSuccess('操作成功！')
getTableList()
proxy.$refs.cardListRef.getData()
})
.catch(() => {});
}
const editSchedule = async () => {
const list = proxy.$refs.multipleTableRef.getSelectionRows()
if(!list.length) return proxy.$modal.msgError('请选择一条数据！')
if(list.length > 1) return proxy.$modal.msgError('只能选择一条数据！')
visible1.value = true
checkedList.value = list
const res = await projectInfoNewDetail(list[0].projectNo)
if(res?.code !== 200) return
console.log(res.data)
inheritAttr(res.data, dialogForm)
fileList.value = res.data.sysFileList || []
for (const item of fileList.value) {
item.refType = 'projectInfoNew'
}
}
const removeFile = (item) => {
proxy.$modal
.confirm("是否确认删除？")
.then(async () => {
const index = fileList.value.indexOf(item)
fileList.value.splice(index, 1)
})
.catch(() => {});
}
const batchDel = () => {
const checkedList = proxy.$refs.multipleTableRef.getSelectionRows()
if(!checkedList.length) return proxy.$modal.msgError('请选择一条数据！')
proxy.$modal
.confirm("是否确认删除？")
.then(async () => {
const res = await projectInfoNewDel(checkedList.map(item => item.id).join())
if(res?.code !== 200) return
proxy.$modal.msgSuccess('操作成功！')
getTableList()
})
.catch(() => {});
}
const handleOk = () => {
proxy.$refs.operateRef.submit()
}
const dialogClose = () => {
visible1.value = false
checkedList.value = []
}
const dialogSubmit = () => {
proxy.$refs.dialogRuleFormRef.validate(async (valid, fields) => {
if (valid) {
console.log('submit!', dialogForm)
const sysFileSaveRequestList = [].concat(fileList.value)
const res = await updateProjectBuildStatus({ projectNo: checkedList.value[0].projectNo, ...dialogForm, sysFileSaveRequestList })
if(res?.code !== 200) return
proxy.$modal.msgSuccess('操作成功！')
getTableList()
dialogClose()
} else {
console.log('error submit!', fields)
}
})
}
const beforeUpload = (rawFile) => {
console.log(rawFile)
}
const onSuccess = (response, refField) => {
console.log(response)
const { data } = response
fileList.value.push({
...data,
refType: 'projectInfoNew',
refField
})
}
const onError = (error, uploadFile, uploadFiles) => {
console.log(error, uploadFile, uploadFiles)
}
const viewPosition = (projectLocation) => {
console.log(projectLocation)
visible2.value = true
nextTick(() => {
let data = [];
if(projectLocation.includes('POINT')) {
data = [
{
type: NewFiberMap.Enum.VectorType.SPECIAL_CIRCLE,
id: 'point',
style: {
radius: 10,
clampToGround: false,
material: 'rgba(255, 0, 0, 1)'
},
geometrys: projectLocation,
},
];
} else if(projectLocation.includes('LINE')) {
data = [
{
type: NewFiberMap.Enum.VectorType.POLYLINE,
id: 'line',
geometrys: projectLocation,
style: {
width: 5,
material: "rgba(255,0,0,1)",
clampToGround: true,
},
},
]
} else if(projectLocation.includes('POLYGON')) {
data = [
{
type: NewFiberMap.Enum.VectorType.POLYGON,
style: { material: "rgba(255,0,0,1)", color: "rgba(255,0,0,1)" },
geometrys: projectLocation,
id: 'area'
},
]
}
if (data.length) {
setTimeout(() => {
let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(data);
toCenterByGeoJson(geojson);
newfiberMap.geojsonToMap(geojson);
}, 500)
}
})
}
const toCenterByGeoJson = (geojson) => {
let coords = turf.getCoords(geojson.features[0].geometry).flat();
let flag = geojson.features.length == 1 && coords.length == 2;
if (!!geojson.features.length && !flag) {
newfiberMap.getMap().camera.flyTo({destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2)))});
} else {
newfiberMap.setCenter({
"roll": 0.01658908985506884,
"pitch": -87.24924906709752,
"heading": 5.026928271138224,
"lng": coords[0],
"lat": coords[1],
"height": 943.5996932813425
})
}
}
onMounted(() => {
getTableList()
getProjectTypeList()
})
</script>
<style lang="scss" scoped>
.projectInformation {
padding: 20px;
height: 90vh;
display: flex;
flex-direction: column;
.top {
// margin-bottom: 15px;
flex-shrink: 0;
}
.card-list {
flex-shrink: 0;
}
.table {
flex: 1;
:deep(.pagination) {
margin-top: 0;
margin-right: 10px;
.el-pagination {
right: 20px;
}
}
}
:deep(.formItem) {
.el-form-item__label {
width: 110px;
word-break: keep-all;
}
}
}
:deep(.el-dialog__body) {
background-color: #eef1fb;
// height: 650px;
// overflow: auto;
}
.row {
margin: 10px 0;
}
.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, .5);
display: none;
.icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
}
&:hover {
.mask {
display: block;
}
}
}
</style>
