308 lines
7.7 KiB
Vue
308 lines
7.7 KiB
Vue
<template>
|
||
<div class="leftTop">
|
||
<div class="header">
|
||
<div class="hLeft">项目基本信息</div>
|
||
<!-- <div class="hRight">
|
||
<el-date-picker
|
||
style="width: 85%"
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
<div class="content">
|
||
<div class="content-info">
|
||
<span style="font-size: 15px">项目名称：</span>
|
||
<span style="font-size: 15px">{{ projectData.projectName || "" }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span style="font-size: 15px">项目地址：</span>
|
||
<span style="font-size: 15px">{{ addressData() }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span style="font-size: 15px">项目编号：</span>
|
||
<span style="font-size: 15px">{{ projectData.projectNumber || "" }}</span>
|
||
</div>
|
||
<div style="font-size: 15px; line-height: 22px">
|
||
<div style="display: flex; color: white; margin-top: 8px">
|
||
<div style="width: 50%; display: flex">
|
||
<span>项目经理：</span>
|
||
<span>{{ projectData.projectManage || "" }}</span>
|
||
</div>
|
||
<div style="width: 50%; display: flex">
|
||
<span>联系电话：</span>
|
||
<span>{{ projectData.projectTel || "" }}</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; color: white; margin-top: 8px">
|
||
<div style="width: 50%; display: flex">
|
||
<span>建筑面积：</span>
|
||
<span>{{ projectData.projectAcreage || "" }} {{ projectData.projectAcreage ? "㎡" : "" }}</span>
|
||
</div>
|
||
<div style="width: 50%; display: flex">
|
||
<span>开工日期：</span>
|
||
<span>{{ projectData.startWorkDate || "" }}</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; color: white; margin-top: 8px">
|
||
<div style="width: 50%; display: flex">
|
||
<span>工程类别：</span>
|
||
<span>{{
|
||
projectData.projectType && projectTypeEnumList.length > 0
|
||
? projectTypeEnumList[projectData.projectType - 1].name
|
||
: ""
|
||
}}</span>
|
||
<div style="margin-left: 5px; line-height: 20px">
|
||
<img style="width: 25px; height: 25px" src="@/assets/images/mountain-icon.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="content-info">
|
||
<span>项目名称：</span>
|
||
<span>{{ projectData.projectName || "" }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span>项目地址：</span>
|
||
<span>{{addressData()}}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span>项目经理：</span>
|
||
<span>{{ projectData.projectManage || "" }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span>联系电话：</span>
|
||
<span>{{ projectData.projectTel || "" }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span>建筑面积：</span>
|
||
<span>{{ projectData.projectAcreage || "" }} {{ projectData.projectAcreage ? '㎡' : "" }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span>开工日期：</span>
|
||
<span>{{ projectData.startWorkDate || "" }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span>项目编号：</span>
|
||
<span>{{ projectData.projectNumber || "" }}</span>
|
||
</div>
|
||
<div class="content-info">
|
||
<span>工程类别：</span>
|
||
<span>{{ projectData.projectType && projectTypeEnumList.length > 0 ? projectTypeEnumList[projectData.projectType - 1].name : "" }}</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, watch } from "vue";
|
||
import { getProjectDetail, getStageOption } from "@/api/modules/projectOverview";
|
||
import { GlobalStore } from "@/stores";
|
||
const store = GlobalStore();
|
||
const projectData = ref({} as any);
|
||
const projectTypeEnumList: any = ref([]); //工程类别
|
||
const addressData = () => {
|
||
return projectData.value.provinceName
|
||
? projectData.value.provinceName + projectData.value.cityName + projectData.value.areaName + projectData.value.projectAddress
|
||
: "";
|
||
};
|
||
// 工程类别字典数据
|
||
const projectTypeEnum = async (showLoading: boolean) => {
|
||
const res: any = await getStageOption({ dictionaryEncoding: "project_type", projectSn: store.sn }, showLoading);
|
||
if (res.result.length > 0) {
|
||
let newArray = res.result.map((item: any) => {
|
||
return {
|
||
name: item.name,
|
||
id: Number(item.data)
|
||
};
|
||
});
|
||
projectTypeEnumList.value = newArray;
|
||
} else {
|
||
projectTypeEnumList.value = [];
|
||
}
|
||
};
|
||
//获取项目信息
|
||
const getProjectInfo = async (showLoading: boolean) => {
|
||
const res = await getProjectDetail({ projectSn: store.sn }, showLoading);
|
||
console.log("获取项目信息666", res);
|
||
// console.log("获取工程类别", projectTypeEnum);
|
||
projectData.value = res.result;
|
||
};
|
||
const setIntervalFn = (showLoading: boolean) => {
|
||
getProjectInfo(showLoading);
|
||
projectTypeEnum(showLoading);
|
||
};
|
||
|
||
onMounted(async () => {
|
||
setIntervalFn(false);
|
||
setInterval(() => {
|
||
setIntervalFn(true);
|
||
}, 30000);
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.leftTop {
|
||
background: url("@/assets/images/commandScreen/card-left-top.png") no-repeat;
|
||
// background-color: #fff;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 35%;
|
||
.header {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 20px;
|
||
border-bottom: 1px solid #0059ff;
|
||
.hLeft {
|
||
width: 50%;
|
||
// color: white;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.hRight {
|
||
width: 50%;
|
||
}
|
||
}
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 10px;
|
||
margin-left: 10px;
|
||
&-info:not(:first-child) {
|
||
margin-top: 11px;
|
||
}
|
||
&-info {
|
||
display: flex;
|
||
align-items: center;
|
||
color: white;
|
||
font-size: 14px;
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
width: 80%;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .el-input__inner {
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-select .el-input .el-select__caret {
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-input__wrapper {
|
||
width: 85%;
|
||
height: 0%;
|
||
background: #0d2956;
|
||
}
|
||
::v-deep .el-range-separator {
|
||
color: #ccc;
|
||
font-size: 10px;
|
||
}
|
||
::v-deep .el-range-input {
|
||
color: #ccc;
|
||
font-size: 10px;
|
||
}
|
||
.dialogContainer {
|
||
padding: 0 50px;
|
||
// height: 600px;
|
||
::v-deep .el-tabs__item {
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-tabs__nav-wrap::after {
|
||
background-color: rgba(255, 0, 0, 0);
|
||
}
|
||
.tabList {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 14%;
|
||
background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
|
||
// background-color: #00224f;
|
||
background-size: 100% 100%;
|
||
left: 75.5%;
|
||
top: 75%;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
line-height: 30px;
|
||
justify-content: space-around;
|
||
text-align: center;
|
||
|
||
div {
|
||
width: 100px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
.listBox {
|
||
// height: 10%;
|
||
.listStyle {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
color: #fff;
|
||
height: 12%;
|
||
line-height: 25px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
div {
|
||
width: 100px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
.listStyle:hover {
|
||
background: #003c84;
|
||
}
|
||
}
|
||
.notoDta {
|
||
top: 40%;
|
||
width: 30%;
|
||
left: 35%;
|
||
text-align: center;
|
||
position: absolute;
|
||
img {
|
||
width: 40%;
|
||
margin: 5% 30%;
|
||
}
|
||
p {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
margin: -6% 37%;
|
||
}
|
||
}
|
||
}
|
||
::v-deep .el-dialog {
|
||
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
||
// background-color: #fff;
|
||
background-size: 100% 100%;
|
||
margin-top: 12%;
|
||
}
|
||
::v-deep .el-dialog__headerbtn {
|
||
right: 35px;
|
||
top: 25px;
|
||
}
|
||
::v-deep .el-dialog .el-dialog__header .el-dialog__title {
|
||
margin-left: 30px;
|
||
margin-top: 10px;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
position: absolute;
|
||
}
|
||
::v-deep el-dialog__header {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|