fix: 修改项目大屏页面

This commit is contained in:
kun 2024-06-18 19:01:21 +08:00
parent f27a98152f
commit 4758a5d6d3

View File

@ -6,13 +6,15 @@
<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-body">
<div class="stage-body-content" :style="{ marginLeft: leftDistance + 'px' }">
<div class="stage-box">
<span>完成建议书</span>
<span>2024</span>
@ -85,6 +87,35 @@
<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>
@ -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,13 +212,17 @@ onMounted(async () => {
color: #1c7986;
}
}
.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: -5px;
margin-top: -3px;
margin-left: 12px;
span:nth-child(1) {
color: #307689;
@ -202,5 +251,7 @@ onMounted(async () => {
}
}
}
}
}
}
</style>