admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
zhgdlarge/src/views/sevenLargeScreen/qualityControl/schedulePlan/leftBottom.vue
cjp 7d1dfd0bde fix: BUG修改
2023-11-14 09:37:21 +08:00

468 lines
11 KiB
Vue
Raw Blame History

<template>
<Card title="工作一览">
<div class="schedule-plan">
<div class="select-right">
<el-select v-model="selectDay" style="width: 85%" size="small" @change="selectChange">
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
</el-select>
</div>
<!-- 本月 -->
<div class="current-month">
<div class="realtime-data">
<div class="realtime-box">
<div class="text">工作总数</div>
<div class="num">{{ workTotal.workCount || 0 }}</div>
</div>
<div class="realtime-box" v-if="tabIndex === 1">
<div class="text">延迟工作</div>
<div class="num">{{ workTotal.delayCount || 0 }}</div>
</div>
<div class="realtime-box" v-if="tabIndex === 1">
<div class="text">提前工作</div>
<div class="num">{{ workTotal.aheadCount || 0 }}</div>
</div>
</div>
<div class="work-state">
<div v-if="tabIndex === 1" class="state-text" :class="checked == 1 ? 'active' : ''" @click="stateChange(1)">进行中</div>
<div v-if="tabIndex === 1" class="state-text" :class="checked == 0 ? 'active' : ''" @click="stateChange(0)">未开始</div>
<div v-if="tabIndex === 1" class="state-text" :class="checked == 2 ? 'active' : ''" @click="stateChange(2)">已完成</div>
</div>
<div class="monitor-list">
<el-scrollbar style="height: 88%">
<div class="monitor-item" v-for="item in raskList" :key="item.id">
<div class="item-top">
<div class="top-title">{{ item.taskName }}</div>
<div
class="top-state"
v-if="item.mergeWarning"
:style="{ background: formworkOption[item.mergeWarning - 1].color }"
>
<div>
{{ formworkOption[item.mergeWarning - 1].label }}
</div>
</div>
</div>
<div class="item-bottom">
<div class="bottom-text" style="width: 60%">计划开始: {{ item.startDate || "" }}</div>
<div class="bottom-text">实际开始: {{ item.actualStartDate || "" }}</div>
</div>
<div class="item-bottom">
<div class="bottom-text" style="width: 60%">计划结束: {{ item.finishDate || "" }}</div>
<div class="bottom-text">实际结束: {{ item.actualFinishDate || "" }}</div>
</div>
</div>
</el-scrollbar>
</div>
</div>
<!-- 下月 -->
<!-- <div class="next-month" v-if="tabIndex === 2">
<div class="realtime-data">
<div class="realtime-box">
<div class="text">工作总数</div>
<div class="num">{{ workTotal.workCount }}</div>
</div>
<div class="realtime-box">
<div class="text">延迟工作</div>
<div class="num">{{ workTotal.delayCount }}</div>
</div>
<div class="realtime-box">
<div class="text">提前工作</div>
<div class="num">{{ workTotal.aheadCount }}</div>
</div>
</div>
<div class="work-state">
<div class="state-text" :class="checked == 1 ? 'active' : ''" @click="stateChange(1)">进行中</div>
<div class="state-text" :class="checked == 0 ? 'active' : ''" @click="stateChange(0)">未开始</div>
<div class="state-text" :class="checked == 2 ? 'active' : ''" @click="stateChange(2)">已完成</div>
</div>
<div class="monitor-list">
<el-scrollbar style="height: 88%">
<div class="monitor-item" v-for="item in raskList" :key="item.id">
<div class="item-top">
<div class="top-title">{{ item.taskName }}</div>
</div>
<div class="item-bottom">
<div class="bottom-text" style="width: 60%">计划开始: {{ item.startDate || "" }}</div>
<div class="bottom-text">实际开始: {{ item.actualStartDate || "" }}</div>
</div>
<div class="item-bottom">
<div class="bottom-text" style="width: 60%">计划结束: {{ item.finishDate || "" }}</div>
<div class="bottom-text">实际结束: {{ item.actualFinishDate || "" }}</div>
</div>
</div>
</el-scrollbar>
</div>
</div> -->
<div class="notoDta" v-if="raskList.length === 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</div>
</Card>
</template>
<script setup lang="ts">
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
import { getCountTaskProgress, getTaskProgressList } from "@/api/modules/schedulePlan";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let formworkOption = ref([
{
value: 1,
label: "提前",
color: "#4AC0F3"
},
{
value: 2,
label: "正常",
color: "#48DA39"
},
{
value: 3,
label: "逾期",
color: "#EC6266"
}
]);
const nextMonthList = reactive([
{
id: 1,
workTitle: "11层机电预留预埋",
workType: 0,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 2,
workTitle: "11层墙柱合模",
workType: 2,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 3,
workTitle: "11层顶模及支撑体系安装",
workType: 1,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 4,
workTitle: "11层墙柱合模",
workType: 2,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 5,
workTitle: "11层墙柱合模",
workType: 1,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
}
]);
const list = reactive([
{
id: 1,
workTitle: "消防施工",
workType: 0,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 2,
workTitle: "通风空调",
workType: 2,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 3,
workTitle: "机电安装",
workType: 1,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 4,
workTitle: "消防施工",
workType: 2,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
},
{
id: 5,
workTitle: "消防施工",
workType: 1,
planStartTime: "2023.06.08 12:00:00",
planEndTime: "2023.06.08 12:00:00",
realStartTime: "2023.06.08 12:00:00",
realEndTime: "2023.06.08 12:00:00"
}
]);
let checked = ref(1 as any);
const stateChange = async (e: any) => {
checked.value = e;
// await getProjectInfo();
await getRaskList();
};
// 当前对应的种类
let selectDay = ref(1);
let dayList = ref([
{
value: 1,
dayType: "本月工作一览"
},
{
value: 2,
dayType: "下月工作一览"
}
]);
let tabIndex = ref(1 as any);
const selectChange = async (e: any) => {
if (e === 1) {
checked.value = 1;
} else {
checked.value = "";
}
tabIndex.value = e;
await getProjectInfo();
await getRaskList();
};
//工作一览（统计）
const workTotal = ref({} as any);
const getProjectInfo = async () => {
const res: any = await getCountTaskProgress({ projectSn: store.sn, type: tabIndex.value });
console.log("工作一览（统计）", res);
workTotal.value = res.result;
};
//列表查询任务进度甘特图信息
const raskList = ref([] as any);
const getRaskList = async () => {
const res: any = await getTaskProgressList({ projectSn: store.sn, type: tabIndex.value, status: checked.value });
console.log("列表查询任务进度甘特图信息", res);
raskList.value = res.result;
};
onMounted(async () => {
await getProjectInfo();
await getRaskList();
// console.log("Mount_type", dialogIndex.value);
});
</script>
<style scoped lang="scss">
.notoDta {
bottom: 30%;
width: 50%;
left: 25%;
position: absolute;
text-align: center;
img {
width: 40%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -6% 37%;
}
}
:deep(.el-input__wrapper) {
background: #112d59;
}
:deep(.el-input__inner) {
color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
color: #fff;
}
.schedule-plan {
width: 100%;
height: 100%;
position: relative;
.select-right {
position: absolute;
right: 0%;
width: 30%;
top: -9%;
z-index: 9;
}
.current-month {
width: 100%;
height: 100%;
.work-state {
display: flex;
margin-top: 4%;
.state-text {
font-size: 16px;
color: #fff;
margin-left: 5%;
cursor: pointer;
}
.active {
color: #65d7f9;
}
}
.monitor-list {
width: 100%;
height: 70%;
margin-top: 5%;
.monitor-item {
width: 94%;
margin: auto;
padding-bottom: 2%;
margin-bottom: 3%;
background: url("@/assets/images/concreteMonitor/listBg.png") no-repeat;
background-size: 100% 100%;
.item-top {
display: flex;
align-items: center;
padding-top: 3%;
padding-left: 3%;
.top-title {
font-size: 16px;
color: #fff;
}
.top-state {
padding: 0% 1%;
font-size: 12px;
margin-left: 2%;
color: #fff;
background: #ec6266;
border-radius: 2px 2px 2px 2px;
}
}
.item-bottom {
display: flex;
// justify-content: space-between;
margin-left: 3%;
margin-top: 2%;
margin-right: 6%;
.bottom-text {
font-size: 12px;
color: #a1accb;
}
}
}
}
}
.next-month {
width: 100%;
height: 100%;
.work-state {
display: flex;
margin-top: 4%;
.state-text {
font-size: 16px;
color: #fff;
margin-left: 5%;
cursor: pointer;
}
.active {
color: #65d7f9;
}
}
.monitor-list {
width: 100%;
height: 70%;
margin-top: 12%;
.monitor-item {
width: 94%;
margin: auto;
padding-bottom: 2%;
margin-bottom: 3%;
background: url("@/assets/images/concreteMonitor/listBg.png") no-repeat;
background-size: 100% 100%;
.item-top {
display: flex;
align-items: center;
padding-top: 3%;
padding-left: 3%;
.top-title {
font-size: 16px;
color: #fff;
}
.top-state {
padding: 0% 1%;
font-size: 12px;
margin-left: 2%;
color: #fff;
background: #ec6266;
border-radius: 2px 2px 2px 2px;
}
}
.item-bottom {
display: flex;
// justify-content: space-between;
margin-left: 3%;
margin-top: 2%;
margin-right: 6%;
.bottom-text {
font-size: 12px;
color: #a1accb;
}
}
}
}
}
}
.realtime-data {
width: 100%;
height: 15%;
padding-top: 4%;
display: flex;
align-items: center;
justify-content: space-around;
.realtime-box {
box-sizing: border-box;
padding: 2% 3%;
width: 28%;
height: 100%;
background: url("@/assets/images/loadometerManage/dataBg.png") no-repeat;
background-size: 100% 100%;
.text {
font-size: calc(100vw * 16 / 1920);
color: #fff;
}
.num {
margin-top: 5%;
font-family: PangMenZhengDao-Regular;
font-weight: bold;
font-size: 24px;
color: #65d7f9;
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink