suzhou-jichuang-lanhai
/
Gyyq-Upstairs
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

项目信息管理详情头部样式优化

Browse Source
yfy
项洋 7 days ago
parent db86a7fa73
commit f8b2ec3593
2 changed files with 569 additions and 458 deletions
Show Stats Download Patch File Download Diff File

315
src/views/manage-add/index.vue
Unescape View File

@ -2,43 +2,71 @@
<div class="bigone">
<!-- 标题和目录 -->
<xiding>
<div style="padding: 0 0.9rem 0 0.5rem;">
<div style="padding: 0 0.9rem 0 0.5rem">
<div class="containerheadone" id="listtop">
<Title :basicInfo="basicInformation"></Title>
<div style="display: flex;gap: 5%; width: auto;">
<div style="display: flex; gap: 5%; width: auto">
<div v-if="checkRole(['common']) && action === 'okay'">
<el-button type="primary" v-if="checkRole(['common'])" @click="aduitAlltwo">保存</el-button>
<el-button
type="primary"
v-if="checkRole(['common'])"
@click="aduitAlltwo"
>保存</el-button
>
</div>
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="goBack">
<el-button
type="primary"
size="medium"
plain
style="
border: none;
background-color: rgba(43, 98, 241, 0.1);
color: #2b62f1;
"
@click="goBack"
>
返回
</el-button>
</div>
</div>
<!-- 目录 -->
<div class="containerhead">
<el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection"
class="custom-menu">
<el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id"
class="custom-menu-item">
<el-menu
:default-active="activeSection"
mode="horizontal"
@select="scrollToSection"
class="custom-menu"
>
<el-menu-item
v-for="(item, index) in sections"
:key="index"
:index="item.id"
class="custom-menu-item"
>
{{ item.label }}
</el-menu-item>
</el-menu>
</div>
</div>
</xiding>
<div class="containerbody" v-if="isContainerVisible">
<div class="containerbody" v-if="isContainerVisible" @scroll="handleScroll">
<!-- 基本信息 -->
<div id="basic">
<Basic :action="action" :basicInfo="basicInformation"
@update-data="handleDataUpdate('basicInformation', $event)">
<Basic
:action="action"
:basicInfo="basicInformation"
@update-data="handleDataUpdate('basicInformation', $event)"
>
</Basic>
</div>
<!-- 规划信息 -->
<div id="programme">
<Programme :action="action" :planInfo="planInformation" :xmId="projectId"
@update-data="handleDataUpdate('planInformation', $event)">
<Programme
:action="action"
:planInfo="planInformation"
:xmId="projectId"
@update-data="handleDataUpdate('planInformation', $event)"
>
</Programme>
</div>
<!-- 建筑信息 -->
@ -47,8 +75,11 @@
</div>
<!-- 要素模型信息 -->
<div id="models">
<Models :action="action" :wysmxInfo="wysmxInformations"
@updata-data="handleDataUpdate('wysmxInformations', $event)">
<Models
:action="action"
:wysmxInfo="wysmxInformations"
@updata-data="handleDataUpdate('wysmxInformations', $event)"
>
</Models>
</div>
<!-- 月度进展信息 -->
@ -57,8 +88,12 @@
</div>
<!-- 企业入驻信息 -->
<div id="companyenter">
<Companyenter :xmId="projectId" :action="action" :qyrzInfo="qyrzInformation"
@update-data="handleDataUpdate('qyrzInformation', $event)">
<Companyenter
:xmId="projectId"
:action="action"
:qyrzInfo="qyrzInformation"
@update-data="handleDataUpdate('qyrzInformation', $event)"
>
</Companyenter>
</div>
<!-- 项目画像 -->
@ -83,23 +118,37 @@
</div>
<!-- 其他信息 -->
<div class="bottombox" id="others">
<Others :action="action" :xmId="projectId" :anotherInfo="projectOtherInfos"
@update-data="handleDataUpdate('projectOtherInfos', $event)">
<Others
:action="action"
:xmId="projectId"
:anotherInfo="projectOtherInfos"
@update-data="handleDataUpdate('projectOtherInfos', $event)"
>
</Others>
</div>
<div class="footer" v-if="checkRole(['common']) && action === 'fill'">
<el-button type="primary" v-if="checkRole(['common'])" @click="aduitAll">审核通过</el-button>
<el-button type="primary" v-if="checkRole(['common'])" @click="aduitAll"
>审核通过</el-button
>
</div>
</div>
<!-- 返回顶部 -->
<el-backtop target=".containerbody" :visibility-height="200" :bottom="50" :right="10" style="z-index: 1000;
border: 1px solid #2B62F1;
">
<el-backtop
target=".containerbody"
:visibility-height="200"
:bottom="50"
:right="10"
style="z-index: 1000; border: 1px solid #2b62f1"
>
</el-backtop>
<!-- 消息提醒 -->
<div class="message-notice">
<el-tooltip class="item" effect="dark" content="新增智能提醒" placement="top-start">
<el-tooltip
class="item"
effect="dark"
content="新增智能提醒"
placement="top-start"
>
<Supericon :xmId="projectId" />
</el-tooltip>
</div>
@ -107,23 +156,28 @@
</template>
<script>
import xiding from "./index2.vue"
import Title from '@/views/components/ProjectDetails/Title.vue';
import Basic from '@/views/components/ProjectDetails/Basic.vue';
import Buildings from '@/views/components/ProjectDetails/Buildings.vue';
import Companyenter from '@/views/components/ProjectDetails/Companyenter.vue';
import Liver from '@/views/components/ProjectDetails/Liver.vue';
import Memo from '@/views/components/ProjectDetails/Memo.vue';
import Models from '@/views/components/ProjectDetails/Models.vue';
import Months from '@/views/components/ProjectDetails/Months.vue';
import Programme from '@/views/components/ProjectDetails/Programme.vue';
import Projectgift from '@/views/components/ProjectDetails/Projectgift.vue';
import Projectpicture from '@/views/components/ProjectDetails/Projectpicture.vue';
import Projectdraw from '@/views/components/ProjectDetails/Projectdraw.vue';
import Others from '@/views/components/ProjectDetails/Others.vue';
import Supericon from '@/views/components/ProjectDetails/supervisionicon.vue';
import xiding from "./index2.vue";
import Title from "@/views/components/ProjectDetails/Title.vue";
import Basic from "@/views/components/ProjectDetails/Basic.vue";
import Buildings from "@/views/components/ProjectDetails/Buildings.vue";
import Companyenter from "@/views/components/ProjectDetails/Companyenter.vue";
import Liver from "@/views/components/ProjectDetails/Liver.vue";
import Memo from "@/views/components/ProjectDetails/Memo.vue";
import Models from "@/views/components/ProjectDetails/Models.vue";
import Months from "@/views/components/ProjectDetails/Months.vue";
import Programme from "@/views/components/ProjectDetails/Programme.vue";
import Projectgift from "@/views/components/ProjectDetails/Projectgift.vue";
import Projectpicture from "@/views/components/ProjectDetails/Projectpicture.vue";
import Projectdraw from "@/views/components/ProjectDetails/Projectdraw.vue";
import Others from "@/views/components/ProjectDetails/Others.vue";
import Supericon from "@/views/components/ProjectDetails/supervisionicon.vue";
import { checkPermi, checkRole } from "@/utils/permission";
import { getzwBasicInformationById, fillBasicInformation, auditBasicInformation, tempBasicInformation } from '@/api/ManageApi/index';
import {
getzwBasicInformationById,
fillBasicInformation,
auditBasicInformation,
tempBasicInformation,
} from "@/api/ManageApi/index";
export default {
components: {
@ -141,24 +195,24 @@ export default {
Projectpicture,
Projectdraw,
Others,
Supericon
Supericon,
},
data() {
return {
activeSection: 'basic',
activeSection: "basic",
sections: [
{ id: 'basic', label: '基本信息' },
{ id: 'programme', label: '规划信息' },
{ id: 'buildings', label: '建筑信息' },
{ id: 'models', label: '五要素模型信息' },
{ id: 'months', label: '月度进展信息' },
{ id: 'companyenter', label: '企业入驻信息' },
{ id: 'projectpicture', label: '项目画像' },
{ id: 'projectpicturetwo', label: '项目图例' },
{ id: 'projectgift', label: '项目巡礼' },
{ id: 'liver', label: '现场实况' },
{ id: 'memo', label: '项目备忘录' },
{ id: 'others', label: '其他信息' }
{ id: "basic", label: "基本信息" },
{ id: "programme", label: "规划信息" },
{ id: "buildings", label: "建筑信息" },
{ id: "models", label: "五要素模型信息" },
{ id: "months", label: "月度进展信息" },
{ id: "companyenter", label: "企业入驻信息" },
{ id: "projectpicture", label: "项目画像" },
{ id: "projectpicturetwo", label: "项目图例" },
{ id: "projectgift", label: "项目巡礼" },
{ id: "liver", label: "现场实况" },
{ id: "memo", label: "项目备忘录" },
{ id: "others", label: "其他信息" },
],
projectId: null,
isContainerVisible: true,
@ -192,7 +246,7 @@ export default {
xzfl: 0,
zjzmj: 0,
ztze: 0,
zydmj: 0
zydmj: 0,
},
planInformation: {
bzcjzmj: 0,
@ -212,7 +266,7 @@ export default {
zgjzcs: 0,
zgjzgd: 0,
zjzmj: 0,
zydmj: 0
zydmj: 0,
},
projectOtherInfos: [],
wysmxInformations: [],
@ -228,7 +282,7 @@ export default {
rzqyhylx: "",
rzqys: 0,
xmId: 0,
yczmj: 0
yczmj: 0,
},
projectRemarks: [],
loading: false,
@ -239,47 +293,55 @@ export default {
this.projectId = Number(this.$route.params.id);
this.loadData();
this.action = this.$route.query.action;
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
this.loadData();
// 添加滚动监听
window.addEventListener("scroll", this.handleScroll);
const container = document.querySelector(".containerbody");
if (container) {
container.addEventListener("scroll", this.handleScroll);
}
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
window.removeEventListener("scroll", this.handleScroll);
const container = document.querySelector(".containerbody");
if (container) {
container.removeEventListener("scroll", this.handleScroll);
}
},
computed: {
showCompanySection() {
const isCompany = this.checkRole(['company']);
const isCommon = this.checkRole(['common']);
const isCompany = this.checkRole(["company"]);
const isCommon = this.checkRole(["common"]);
// 隐藏企业端
return isCompany && !isCommon;
}
},
},
methods: {
checkPermi,
checkRole,
loadData() {
getzwBasicInformationById(this.projectId).then(response => {
getzwBasicInformationById(this.projectId).then((response) => {
const data = response.data;
this.basicInformation = data.basicInformation;
this.planInformation = data.planInformation;
this.projectOtherInfos = data.projectOtherInfos;
this.wysmxInformations = data.wysmxResponses;
this.qyrzInformation = data.qyrzInformation;
this.projectRemarks = data.projectRemarks
this.projectRemarks = data.projectRemarks;
});
},
scrollToSection(id) {
this.activeSection = id;
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
element.scrollIntoView({ behavior: "smooth" });
}
},
goBack() {
this.$router.go(-1);
},
handleDataUpdate(dataKey, updatedData) {
if (dataKey === 'projectOtherInfos' || dataKey === 'wysmxInformations') {
if (dataKey === "projectOtherInfos" || dataKey === "wysmxInformations") {
if (Array.isArray(updatedData)) {
this[dataKey] = updatedData;
} else {
@ -301,13 +363,13 @@ export default {
this.loading = true;
const tempData = this.prepareSubmitData();
tempBasicInformation(tempData)
.then(response => {
this.$message.success('暂存成功');
console.log('暂存数据:', response);
.then((response) => {
this.$message.success("暂存成功");
console.log("暂存数据:", response);
})
.catch(error => {
this.$message.error('暂存失败');
console.error('暂存错误:', error);
.catch((error) => {
this.$message.error("暂存失败");
console.error("暂存错误:", error);
})
.finally(() => {
this.loading = false;
@ -317,10 +379,10 @@ export default {
this.loading = true;
const submitData = this.prepareSubmitData();
fillBasicInformation(submitData)
.then(response => {
this.$message.success('提交成功');
.then((response) => {
this.$message.success("提交成功");
this.isSubmitted = true;
this.$router.push('/manage');
this.$router.push("/manage");
})
.finally(() => {
this.loading = false;
@ -329,21 +391,21 @@ export default {
aduitAll() {
const loading = this.$loading({
lock: true,
text: '正在提交审核...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
text: "正在提交审核...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
const submitData = this.prepareSubmitData();
auditBasicInformation(submitData)
.then(response => {
this.$message.success('审核通过');
.then((response) => {
this.$message.success("审核通过");
this.isSubmitted = true;
this.$router.push('/manage');
this.$router.push("/manage");
})
.catch(error => {
this.$message.error('审核失败');
.catch((error) => {
this.$message.error("审核失败");
})
.finally(() => {
loading.close();
@ -352,21 +414,21 @@ export default {
aduitAlltwo() {
const loading = this.$loading({
lock: true,
text: '正在提交修改...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
text: "正在提交修改...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
const submitData = this.prepareSubmitData();
auditBasicInformation(submitData)
.then(response => {
this.$message.success('修改成功');
.then((response) => {
this.$message.success("修改成功");
this.isSubmitted = true;
this.$router.push('/manage');
this.$router.push("/manage");
})
.catch(error => {
this.$message.error('修改失败');
.catch((error) => {
this.$message.error("修改失败");
})
.finally(() => {
loading.close();
@ -378,12 +440,12 @@ export default {
planInformation: this.planInformation,
projectOtherInfos: this.projectOtherInfos,
qyrzInformation: this.qyrzInformation,
wysmxInformations: this.formatWysmxData()
wysmxInformations: this.formatWysmxData(),
};
},
formatWysmxData() {
return this.wysmxInformations.flatMap(item =>
item.list.map(listItem => ({
return this.wysmxInformations.flatMap((item) =>
item.list.map((listItem) => ({
id: listItem.id,
createTime: this.formatDate(new Date()),
updateTime: this.formatDate(new Date()),
@ -394,41 +456,51 @@ export default {
createBy: "",
updateBy: "",
createId: 0,
updateId: 0
updateId: 0,
}))
);
},
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
handleScroll() {
const sections = this.sections;
const scrollPosition = window.scrollY + window.innerHeight / 2;
// 获取滚动容器
const container = document.querySelector(".containerbody");
if (!container) return;
sections.forEach(section => {
const element = document.getElementById(section.id);
// 获取容器的滚动位置
const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮
// 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分
for (let i = this.sections.length - 1; i >= 0; i--) {
const element = document.getElementById(this.sections[i].id);
if (element) {
const rect = element.getBoundingClientRect();
if (rect.top <= scrollPosition && rect.bottom >= scrollPosition) {
this.activeSection = section.id;
// 计算元素相对于滚动容器的位置
const elementPosition = element.offsetTop - container.offsetTop;
if (elementPosition <= scrollPosition) {
if (this.activeSection !== this.sections[i].id) {
this.activeSection = this.sections[i].id;
}
break;
}
});
}
}
},
},
};
</script>
<style scoped>
.containerbody {
height: calc(100% - 7rem);
padding: .3rem .5rem;
padding: 0.3rem 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
@ -442,7 +514,7 @@ export default {
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 1rem 0 .7rem;
padding: 0 1rem 0 0.7rem;
background-color: #fff;
}
@ -451,7 +523,7 @@ export default {
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #FFFFFF;
background-color: #ffffff;
}
.custom-menu {
@ -462,10 +534,10 @@ export default {
}
.custom-menu-item {
color: #3D424C;
color: #3d424c;
width: auto;
height: 2rem;
background: #F4F7FE;
background: #f4f7fe;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
display: flex;
align-items: center;
@ -474,20 +546,21 @@ export default {
/* 高亮 */
.custom-menu-item.is-active {
background-color: #2B62F1;
background-color: #2b62f1;
color: #fff !important;
box-shadow: 0 2px 8px rgba(43, 98, 241, 0.3);
}
/* 悬停 */
.custom-menu-item:hover {
background-color: #2B62F1;
background-color: #2b62f1;
color: #fff !important;
}
/* 默认的下划线 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: #2B62F1;
background-color: #2b62f1;
border-bottom: none;
}

40
src/views/manage-info/index.vue
Unescape View File

@ -22,7 +22,7 @@
</div>
</div>
</xiding>
<div class="containerbody" v-if="isContainerVisible">
<div class="containerbody" v-if="isContainerVisible" @srorll="handleScroll">
<!-- 基本信息 -->
<div id="basic">
<Basic :action="action" :basicInfo="basicInformation"
@ -227,6 +227,20 @@ export default {
this.projectId = Number(this.$route.params.id);
this.loadData();
this.action = this.$route.query.action;
this.loadData();
// 添加滚动监听
window.addEventListener("scroll", this.handleScroll);
const container = document.querySelector(".containerbody");
if (container) {
container.addEventListener("scroll", this.handleScroll);
}
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
const container = document.querySelector(".containerbody");
if (container) {
container.removeEventListener("scroll", this.handleScroll);
}
},
methods: {
checkPermi,
@ -261,6 +275,30 @@ export default {
},
goBack() {
this.$router.go(-1);
},
handleScroll() {
// 获取滚动容器
const container = document.querySelector(".containerbody");
if (!container) return;
// 获取容器的滚动位置
const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮
// 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分
for (let i = this.sections.length - 1; i >= 0; i--) {
const element = document.getElementById(this.sections[i].id);
if (element) {
// 计算元素相对于滚动容器的位置
const elementPosition = element.offsetTop - container.offsetTop;
if (elementPosition <= scrollPosition) {
if (this.activeSection !== this.sections[i].id) {
this.activeSection = this.sections[i].id;
}
break;
}
}
}
},
// 子组件的
handleDataUpdate(dataKey, updatedData) {

Write Preview
Loading…
Cancel
Save