admin/wisdomisitezwfront-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改项目大屏页面

Browse Source
This commit is contained in:
kun 2024-06-18 19:01:21 +08:00
parent f27a98152f
commit 4758a5d6d3
1 changed files with 156 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
src/views/hz-enterprise/largeScreen/largeScreenOne/components/milestone.vue
View File

@ -6,84 +6,115 @@
<span>项目里程碑</span>
</div>
<div class="milestone-stage">
<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="left-arrow" />
<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="right-arrow" />
<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="left-arrow" @click="reduceLeftDistance" />
<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="right-arrow" @click="addLeftDistance" />
<div class="stage-content">
<div class="stage-head">
<span>开始时间</span>
<span>结束时间</span>
</div>
<div class="stage-box">
<span>完成建议书</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">建议书</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成立项</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">立项</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成用地</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">用地</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成设计</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">设计</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成概算</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">概算</div>
<span style="color: #938e6c">2024年</span>
<span style="color: #938e6c">05-15</span>
<span style="color: #9f8a42">如期完成</span>
</div>
<div class="stage-box">
<span>完成施工图</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">施工图</div>
<span style="color: #884754">2024年</span>
<span style="color: #884754">05-15</span>
<span style="color: #a8433d">如期完成</span>
</div>
<div class="stage-box">
<span>完成预算</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">预算</div>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">待执行</span>
</div>
<div class="stage-box">
<span>完成招投标</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">招投标</div>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">待执行</span>
<div class="stage-body">
<div class="stage-body-content" :style="{ marginLeft: leftDistance + 'px' }">
<div class="stage-box">
<span>完成建议书</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">建议书</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成立项</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">立项</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成用地</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">用地</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成设计</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">设计</div>
<span>2024年</span>
<span>05-15</span>
<span>如期完成</span>
</div>
<div class="stage-box">
<span>完成概算</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">概算</div>
<span style="color: #938e6c">2024年</span>
<span style="color: #938e6c">05-15</span>
<span style="color: #9f8a42">如期完成</span>
</div>
<div class="stage-box">
<span>完成施工图</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">施工图</div>
<span style="color: #884754">2024年</span>
<span style="color: #884754">05-15</span>
<span style="color: #a8433d">如期完成</span>
</div>
<div class="stage-box">
<span>完成预算</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">预算</div>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">待执行</span>
</div>
<div class="stage-box">
<span>完成招投标</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">招投标</div>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">待执行</span>
</div>
<div class="stage-box">
<span>完成实施</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">实施</div>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">待执行</span>
</div>
<div class="stage-box">
<span>完成初验</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">初验</div>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">待执行</span>
</div>
<div class="stage-box">
<span>完成终验</span>
<span>2024年</span>
<span>05-15</span>
<div class="stage-circle">终验</div>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">/</span>
<span style="color: #5e6581">待执行</span>
</div>
</div>
</div>
</div>
</div>
@ -92,12 +123,26 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getEntSubItem } from "@/api/modules/huizhou";
import { ElMessage } from "element-plus";
const props = defineProps<{
projectData: Object;
engineeringSn: String;
}>();
const leftDistance = ref(0);
// 获取里程碑信息
let objData = ref([]);
// 添加偏移距离
const addLeftDistance = () => {
if (leftDistance.value == 0) {
ElMessage.warning("已经到底啦");
} else {
leftDistance.value = leftDistance.value + 20;
}
};
// 减少偏移距离
const reduceLeftDistance = () => {
leftDistance.value = leftDistance.value - 20;
};
const getSubItemFn = async () => {
const res: any = await getEntSubItem({ engineeringSn: props.engineeringSn });
objData.value = res.result;
@ -153,7 +198,7 @@ onMounted(async () => {
}
.stage-content {
width: 88%;
height: 90%;
height: 92%;
margin-left: 4%;
display: flex;
font-size: 14px;
@ -167,37 +212,43 @@ onMounted(async () => {
color: #1c7986;
}
}
.stage-box {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
margin-top: -5px;
margin-left: 12px;
span:nth-child(1) {
color: #307689;
}
span:nth-child(2),
span:nth-child(3) {
color: #88adc2;
}
.stage-circle {
width: 76px;
height: 76px;
text-align: center;
line-height: 76px;
background: url("@/assets/images/xmgl/projectScreenIcon3.png") no-repeat center;
background-size: 100% 100%;
color: #3eadb0;
font-size: 16px;
}
span:nth-child(5),
span:nth-child(6) {
color: #356646;
}
span:nth-child(7) {
color: #1cb12a;
.stage-body {
overflow: hidden;
.stage-body-content {
display: flex;
.stage-box {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
margin-top: -3px;
margin-left: 12px;
span:nth-child(1) {
color: #307689;
}
span:nth-child(2),
span:nth-child(3) {
color: #88adc2;
}
.stage-circle {
width: 76px;
height: 76px;
text-align: center;
line-height: 76px;
background: url("@/assets/images/xmgl/projectScreenIcon3.png") no-repeat center;
background-size: 100% 100%;
color: #3eadb0;
font-size: 16px;
}
span:nth-child(5),
span:nth-child(6) {
color: #356646;
}
span:nth-child(7) {
color: #1cb12a;
}
}
}
}
}