fix: 修改项目大屏页面
This commit is contained in:
kun
parent
f27a98152f
commit
4758a5d6d3
@ -6,84 +6,115 @@
|
|||||||
<span>项目里程碑</span>
|
<span>项目里程碑</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="milestone-stage">
|
<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="left-arrow" @click="reduceLeftDistance" />
|
||||||
<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="right-arrow" />
|
<img src="@/assets/images/xmgl/projectScreenIcon2.png" alt="" srcset="" class="right-arrow" @click="addLeftDistance" />
|
||||||
<div class="stage-content">
|
<div class="stage-content">
|
||||||
<div class="stage-head">
|
<div class="stage-head">
|
||||||
<span>开始时间</span>
|
<span>开始时间</span>
|
||||||
<span>结束时间</span>
|
<span>结束时间</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stage-box">
|
<div class="stage-body">
|
||||||
<span>完成建议书</span>
|
<div class="stage-body-content" :style="{ marginLeft: leftDistance + 'px' }">
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成建议书</span>
|
||||||
<div class="stage-circle">建议书</div>
|
<span>2024年</span>
|
||||||
<span>2024年</span>
|
<span>05-15</span>
|
||||||
<span>05-15</span>
|
<div class="stage-circle">建议书</div>
|
||||||
<span>如期完成</span>
|
<span>2024年</span>
|
||||||
</div>
|
<span>05-15</span>
|
||||||
<div class="stage-box">
|
<span>如期完成</span>
|
||||||
<span>完成立项</span>
|
</div>
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成立项</span>
|
||||||
<div class="stage-circle">立项</div>
|
<span>2024年</span>
|
||||||
<span>2024年</span>
|
<span>05-15</span>
|
||||||
<span>05-15</span>
|
<div class="stage-circle">立项</div>
|
||||||
<span>如期完成</span>
|
<span>2024年</span>
|
||||||
</div>
|
<span>05-15</span>
|
||||||
<div class="stage-box">
|
<span>如期完成</span>
|
||||||
<span>完成用地</span>
|
</div>
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成用地</span>
|
||||||
<div class="stage-circle">用地</div>
|
<span>2024年</span>
|
||||||
<span>2024年</span>
|
<span>05-15</span>
|
||||||
<span>05-15</span>
|
<div class="stage-circle">用地</div>
|
||||||
<span>如期完成</span>
|
<span>2024年</span>
|
||||||
</div>
|
<span>05-15</span>
|
||||||
<div class="stage-box">
|
<span>如期完成</span>
|
||||||
<span>完成设计</span>
|
</div>
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成设计</span>
|
||||||
<div class="stage-circle">设计</div>
|
<span>2024年</span>
|
||||||
<span>2024年</span>
|
<span>05-15</span>
|
||||||
<span>05-15</span>
|
<div class="stage-circle">设计</div>
|
||||||
<span>如期完成</span>
|
<span>2024年</span>
|
||||||
</div>
|
<span>05-15</span>
|
||||||
<div class="stage-box">
|
<span>如期完成</span>
|
||||||
<span>完成概算</span>
|
</div>
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成概算</span>
|
||||||
<div class="stage-circle">概算</div>
|
<span>2024年</span>
|
||||||
<span style="color: #938e6c">2024年</span>
|
<span>05-15</span>
|
||||||
<span style="color: #938e6c">05-15</span>
|
<div class="stage-circle">概算</div>
|
||||||
<span style="color: #9f8a42">如期完成</span>
|
<span style="color: #938e6c">2024年</span>
|
||||||
</div>
|
<span style="color: #938e6c">05-15</span>
|
||||||
<div class="stage-box">
|
<span style="color: #9f8a42">如期完成</span>
|
||||||
<span>完成施工图</span>
|
</div>
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成施工图</span>
|
||||||
<div class="stage-circle">施工图</div>
|
<span>2024年</span>
|
||||||
<span style="color: #884754">2024年</span>
|
<span>05-15</span>
|
||||||
<span style="color: #884754">05-15</span>
|
<div class="stage-circle">施工图</div>
|
||||||
<span style="color: #a8433d">如期完成</span>
|
<span style="color: #884754">2024年</span>
|
||||||
</div>
|
<span style="color: #884754">05-15</span>
|
||||||
<div class="stage-box">
|
<span style="color: #a8433d">如期完成</span>
|
||||||
<span>完成预算</span>
|
</div>
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成预算</span>
|
||||||
<div class="stage-circle">预算</div>
|
<span>2024年</span>
|
||||||
<span style="color: #5e6581">/</span>
|
<span>05-15</span>
|
||||||
<span style="color: #5e6581">/</span>
|
<div class="stage-circle">预算</div>
|
||||||
<span style="color: #5e6581">待执行</span>
|
<span style="color: #5e6581">/</span>
|
||||||
</div>
|
<span style="color: #5e6581">/</span>
|
||||||
<div class="stage-box">
|
<span style="color: #5e6581">待执行</span>
|
||||||
<span>完成招投标</span>
|
</div>
|
||||||
<span>2024年</span>
|
<div class="stage-box">
|
||||||
<span>05-15</span>
|
<span>完成招投标</span>
|
||||||
<div class="stage-circle">招投标</div>
|
<span>2024年</span>
|
||||||
<span style="color: #5e6581">/</span>
|
<span>05-15</span>
|
||||||
<span style="color: #5e6581">/</span>
|
<div class="stage-circle">招投标</div>
|
||||||
<span style="color: #5e6581">待执行</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -92,12 +123,26 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import { getEntSubItem } from "@/api/modules/huizhou";
|
import { getEntSubItem } from "@/api/modules/huizhou";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
projectData: Object;
|
projectData: Object;
|
||||||
engineeringSn: String;
|
engineeringSn: String;
|
||||||
}>();
|
}>();
|
||||||
|
const leftDistance = ref(0);
|
||||||
// 获取里程碑信息
|
// 获取里程碑信息
|
||||||
let objData = ref([]);
|
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 getSubItemFn = async () => {
|
||||||
const res: any = await getEntSubItem({ engineeringSn: props.engineeringSn });
|
const res: any = await getEntSubItem({ engineeringSn: props.engineeringSn });
|
||||||
objData.value = res.result;
|
objData.value = res.result;
|
||||||
@ -153,7 +198,7 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
.stage-content {
|
.stage-content {
|
||||||
width: 88%;
|
width: 88%;
|
||||||
height: 90%;
|
height: 92%;
|
||||||
margin-left: 4%;
|
margin-left: 4%;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -167,37 +212,43 @@ onMounted(async () => {
|
|||||||
color: #1c7986;
|
color: #1c7986;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.stage-box {
|
.stage-body {
|
||||||
height: 100%;
|
overflow: hidden;
|
||||||
display: flex;
|
.stage-body-content {
|
||||||
align-items: center;
|
display: flex;
|
||||||
flex-direction: column;
|
.stage-box {
|
||||||
justify-content: space-between;
|
height: 100%;
|
||||||
margin-top: -5px;
|
display: flex;
|
||||||
margin-left: 12px;
|
align-items: center;
|
||||||
span:nth-child(1) {
|
flex-direction: column;
|
||||||
color: #307689;
|
justify-content: space-between;
|
||||||
}
|
margin-top: -3px;
|
||||||
span:nth-child(2),
|
margin-left: 12px;
|
||||||
span:nth-child(3) {
|
span:nth-child(1) {
|
||||||
color: #88adc2;
|
color: #307689;
|
||||||
}
|
}
|
||||||
.stage-circle {
|
span:nth-child(2),
|
||||||
width: 76px;
|
span:nth-child(3) {
|
||||||
height: 76px;
|
color: #88adc2;
|
||||||
text-align: center;
|
}
|
||||||
line-height: 76px;
|
.stage-circle {
|
||||||
background: url("@/assets/images/xmgl/projectScreenIcon3.png") no-repeat center;
|
width: 76px;
|
||||||
background-size: 100% 100%;
|
height: 76px;
|
||||||
color: #3eadb0;
|
text-align: center;
|
||||||
font-size: 16px;
|
line-height: 76px;
|
||||||
}
|
background: url("@/assets/images/xmgl/projectScreenIcon3.png") no-repeat center;
|
||||||
span:nth-child(5),
|
background-size: 100% 100%;
|
||||||
span:nth-child(6) {
|
color: #3eadb0;
|
||||||
color: #356646;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
span:nth-child(7) {
|
span:nth-child(5),
|
||||||
color: #1cb12a;
|
span:nth-child(6) {
|
||||||
|
color: #356646;
|
||||||
|
}
|
||||||
|
span:nth-child(7) {
|
||||||
|
color: #1cb12a;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user