- <template>
- <div class="water-analysis-page">
- <div class="top">
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
- <el-tab-pane label="项目概况" name="first">
- <el-upload
- v-if="postList?.generalSituationFileList?.length == 0"
- :auto-upload="false"
- list-type="picture-card"
- v-model:file-list="postList.generalSituationFileList"
- class="upload-demo"
- action="/system/upload"
- :headers="uploadHeader"
- multiple
- :before-upload="handleBeforeUpload"
- >
- <template #trigger>
- <el-icon class="avatar-uploader-icon">
- <Plus />
- </el-icon>
- </template>
- </el-upload>
- <el-image
- v-else
- style="width: 100px; margin: 0 10px"
- v-for="i in postList.generalSituationFileList"
- :src="i.url"
- :zoom-rate="1"
- :initial-index="4"
- :preview-src-list="[i.url]"
- />
- </el-tab-pane>
- <el-tab-pane label="建设前" name="second">
- <el-upload
- v-if="postList?.preConstructionFileList?.length == 0"
- :auto-upload="false"
- list-type="picture-card"
- v-model:file-list="postList.preConstructionFileList"
- class="upload-demo"
- action="/system/upload"
- :headers="uploadHeader"
- multiple
- :before-upload="handleBeforeUpload"
- >
- <template #trigger>
- <el-icon class="avatar-uploader-icon">
- <Plus />
- </el-icon>
- </template>
- <template #tip> </template>
- </el-upload>
- <el-image
- v-else
- style="width: 100px; margin: 0 10px"
- v-for="i in postList.preConstructionFileList"
- :src="i.url"
- :zoom-rate="1"
- :initial-index="4"
- :preview-src-list="[i.url]"
- />
- </el-tab-pane>
- <el-tab-pane label="建设中" name="three">
- <el-upload
- v-if="postList?.underConstructionFileList?.length == 0"
- :auto-upload="false"
- list-type="picture-card"
- v-model:file-list="postList.underConstructionFileList"
- class="upload-demo"
- action="/system/upload"
- :headers="uploadHeader"
- multiple
- :before-upload="handleBeforeUpload"
- >
- <template #trigger>
- <el-icon class="avatar-uploader-icon">
- <Plus />
- </el-icon>
- </template>
- <template #tip> </template>
- </el-upload>
- <el-image
- v-else
- style="width: 100px; margin: 0 10px"
- v-for="i in postList.underConstructionFileList"
- :src="i.url"
- :zoom-rate="1"
- :initial-index="4"
- :preview-src-list="[i.url]"
- />
- </el-tab-pane>
- <el-tab-pane label="建设后" name="four">
- <el-upload
- v-if="postList?.postConstructionFileList?.length == 0"
- :auto-upload="false"
- v-model:file-list="postList.postConstructionFileList"
- class="upload-demo"
- :headers="uploadHeader"
- multiple
- list-type="picture-card"
- :before-upload="handleBeforeUpload"
- >
- <template #trigger>
- <el-icon class="avatar-uploader-icon">
- <Plus />
- </el-icon>
- </template>
- <template #tip> </template>
- </el-upload>
- <el-image
- v-else
- style="width: 100px; margin: 0 10px"
- v-for="i in postList.postConstructionFileList"
- :src="i.url"
- :zoom-rate="1"
- :initial-index="4"
- :preview-src-list="[i.url]"
- />
- </el-tab-pane>
- </el-tabs>
- </div>
- </div>
- </template>
- <script setup>
- import { getInfo } from '@/api/project/imgwh';
- const emits = defineEmits();
- const typeList = inject('typeList1');
- const postList = ref([]);
- const activeName = ref('first');
- const getInfoM = async p => {
- getInfo(p).then(({ data }) => {
- const arra = data.filter(i => {
- return i.id == typeList.value.id;
- });
- postList.value = arra[0];
- });
- };
- function handleBeforeUpload(file) {
- if (file.name.length > 50) {
- proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`);
- return false;
- }
- return true;
- }
- onMounted(() => {
- getInfoM({ projectNo: typeList.value.projectNo, pageSize: 999999, pageNum: 1 });
- });
- </script>
- <style lang="scss" scoped>
- .water-analysis-page {
- padding: 20px;
- }
- .pagination {
- float: right;
- margin-top: 10px;
- }
- .iconCLass {
- :deep .el-input__wrapper {
- box-shadow: 0 0 0 0;
- }
- }
- .tabs {
- :deep .el-input__wrapper {
- box-shadow: 0 0 0 0;
- }
- }
- .LeftBox1 {
- // width: 280px;
- height: 100%;
- .HTMoney1 {
- flex: 1;
- text-align: center;
- .JENum {
- height: 40px;
- font-size: 18px;
- font-weight: 400;
- color: #409eff;
- }
- .JEName {
- width: 100%;
- height: 40px;
- font-size: 16px;
- color: black;
- }
- }
- .HTMoney2 {
- background: red;
- .JEName {
- color: #fff;
- }
- .JENum {
- color: #fff;
- }
- }
- }
- .Top_cont {
- display: flex;
- width: 80vw;
- justify-content: center;
- align-items: center;
- margin-bottom: 35px;
- }
- </style>