jhbigscreen/src/pages/detail/projectInfoDlg.vue

619 lines
22 KiB
Vue
Raw Normal View History

2023-08-24 00:12:01 +08:00
<template>
<MyDialog v-if="show" v-model="show" width="1600px" height="850px" :class="'font-size-' + fontSize"
class="project-info-dlg">
<template slot="title">
<div style="display: flex; align-items: center;justify-content: space-between;">
<div :key="elKey" class="header-title">
{{ prj.projectName }} - 项目简介
</div>
<div v-if="1 == 2">
<div class="head-title-select" @mouseleave="hideScreenUlSel2">
<div class="head-select">
<input type="text" :value="selProject" @click="showScreenUlSel2" placeholder="请选择项目" readonly>
</div>
<el-collapse-transition>
<ul class="header-screen-ul" v-show="showSel2" ref="selectUl">
<li v-for="item in prjs" @click="setScreenLiSel2(item)" :title="item.projectName">{{
item.projectName }}
</li>
</ul>
</el-collapse-transition>
</div>
</div>
</div>
</template>
<div class="font-size-tools">
<i class="set-font-size font-size2" @click="fontSize = 2" :class="fontSize == 2 ? 'active' : ''">
<svg class="icon svg-icon"
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
<path
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
fill="#fff" p-id="3687"></path>
</svg>
</i>
<i class="set-font-size font-size1" @click="fontSize = 1" :class="fontSize == 1 ? 'active' : ''">
<svg class="icon svg-icon"
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
<path
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
fill="#fff" p-id="3687"></path>
</svg>
</i>
<i class="set-font-size font-size0" @click="fontSize = 0" :class="fontSize == 0 ? 'active' : ''">
<svg class="icon svg-icon"
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
<path
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
fill="#fff" p-id="3687"></path>
</svg>
</i>
</div>
<div class="modify-btn btn-left" v-if="1 == 2">
<svg class="my-svg-icon-aaa" @click="modifyLeftBtn"
style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4967">
<path
d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
p-id="4968"></path>
</svg>
</div>
<div class="modify-btn btn-right" v-if="1 == 2">
<svg class="my-svg-icon-aaa" @click="modifyRightBtn"
style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4997">
<path
d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
p-id="4998"></path>
</svg>
</div>
<div class="main-content scroll" style="max-height: 780px;overflow-y: auto;">
<el-row class="data-item">
<el-col :span="12" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">项目名称:</span>
<div class="div-text">{{ prj.projectName }}</div>
</el-col>
<el-col :span="12" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">项目地址:</span>
<div class="div-text">{{ prj.projectAddress }}</div>
</el-col>
</el-row>
<el-row class="data-item">
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">责任主体:</span>
<div class="div-text">{{ prj.deptName }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">重要等级:</span>
<div class="div-text">{{ getProjectWeight(prj.weightType) }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">甲方代表:</span>
<div class="div-text">{{ getPrjDeptName('甲方代表') }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">项目分类:</span>
<div class="div-text">{{ getProjectCategory(prj.projectType) }}</div>
</el-col>
</el-row>
<el-row class="data-item">
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">项目等级:</span>
<div class="div-text">{{ getProjectLevel(prj.projiectLevel) }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">建筑面积:</span>
<div class="div-text">{{ prj.floorArea ? prj.floorArea + '平方米' : '' }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">工程期限:</span>
<div class="div-text">{{ prj.projectTimeLimit ? prj.projectTimeLimit + '天' : '' }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">项目建设类型:</span>
<div class="div-text">{{ getProjectBuildType(prj.projectNature) }}</div>
</el-col>
</el-row>
<el-row class="data-item">
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">计划开工时间:</span>
<div class="div-text">{{ prj.scheduledStartTime }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">计划完成时间:</span>
<div class="div-text">{{ prj.plannedCompletionTime }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">实际开工时间:</span>
<div class="div-text">{{ prj.actualOperatingTime | formatDate }}</div>
</el-col>
<el-col :span="6" class="data-row">
<img src="images/title_icon.png"><span class="sp-lbl">实际完工时间:</span>
<div class="div-text">{{ prj.actualCompletionTime }}</div>
</el-col>
</el-row>
<el-row class="data-item" v-if="users11.length > 0" style="display:block;">
<el-col :span="12" class="data-row" style="display:flex;width:100%">
<img src="images/title_icon.png"><span class="sp-lbl">责任主体:</span>
<div class="div-text">{{ users11.length > 0 ? users11[0].deptName : '' }}</div>
</el-col>
<div style="width:80%;margin-left:10%" class="data-table">
<table>
<tr class="tr-header">
<th>姓名</th>
<th>岗位</th>
</tr>
<tr v-for="(it, idx) in users11" :key="idx" class="tr-data">
<td style="width:50%;">{{ it.nickName }}</td>
<td>{{ it.jobTypeName }}</td>
</tr>
</table>
</div>
</el-row>
<el-row class="data-item" v-if="users4.length > 0" style="display:block;">
<el-col :span="12" class="data-row" style="display:flex;width:100%">
<img src="images/title_icon.png"><span class="sp-lbl">监理单位:</span>
<div class="div-text">{{ users4.length > 0 ? users11[0].deptName : '' }}</div>
</el-col>
<div style="width:80%;margin-left:10%" class="data-table">
<table>
<tr class="tr-header">
<th>姓名</th>
<th>岗位</th>
</tr>
<tr v-for="(it, idx) in users4" :key="idx" class="tr-data">
<td style="width:50%;">{{ it.nickName }}</td>
<td>{{ it.jobTypeName }}</td>
</tr>
</table>
</div>
</el-row>
<el-row class="data-item" v-if="users2.length > 0" style="display:block;">
<el-col :span="12" class="data-row" style="display:flex;width:100%">
<img src="images/title_icon.png"><span class="sp-lbl">总包单位:</span>
<div class="div-text">{{ users2.length > 0 ? users11[0].deptName : '' }}</div>
</el-col>
<div style="width:80%;margin-left:10%" class="data-table">
<table>
<tr class="tr-header">
<th>姓名</th>
<th>岗位</th>
</tr>
<tr v-for="(it, idx) in users2" :key="idx" class="tr-data">
<td style="width:50%;">{{ it.nickName }}</td>
<td>{{ it.jobTypeName }}</td>
</tr>
</table>
</div>
</el-row>
<el-row class="data-item" v-if="users2.length > 0" style="display:block;">
<el-col :span="12" class="data-row" style="display:flex;width:100%">
<img src="images/title_icon.png"><span class="sp-lbl">分包单位:</span>
<div class="div-text">{{ users2.length > 0 ? users11[0].deptName : '' }}</div>
</el-col>
<div style="width:80%;margin-left:10%" class="data-table">
<table>
<tr class="tr-header">
<th>姓名</th>
<th>岗位</th>
</tr>
<tr v-for="(it, idx) in users2" :key="idx" class="tr-data">
<td style="width:50%;">{{ it.nickName }}</td>
<td>{{ it.jobTypeName }}</td>
</tr>
</table>
</div>
</el-row>
</div>
</MyDialog>
</template>
<script>
import MyDialog from '../components/MyDialog'
export default {
components: {
MyDialog
},
data() {
return {
elKey: 0,
fontSize: 0,
index: 0,
nav: '01',
show: false,
prj: null,
prjs: [],
users: [],
selProject: '',
showSel2: false,
projectWeight: [],
projectCategory: [],
projectLevel: [],
projectBuildType: [],
users11: [],//责任主体
users4: [],//监理单位
users2: [],//总包单位
users3: [],//分包单位
};
},
mounted() {
},
methods: {
getPrjUser(t, deptType) {
if (this.users && this.users.length > 0) {
if (deptType) {
let tmps = this.users.filter(it => it.deptType == deptType);
if (tmps.length > 0) {
return tmps[0].deptName;
}
} else {
let tmps = this.users.filter(it => it.jobTypeName == t);
if (tmps.length > 0) {
return tmps[0].nickName + ' ' + tmps[0].phonenumber;
}
}
}
return "";
},
getPrjDeptName(t) {
if (this.users && this.users.length > 0) {
let tmps = this.users.filter(it => it.jobTypeName == t);
if (tmps.length > 0) {
return tmps[0].deptName;
}
};
return "";
},
getProjectWeight(v) {
if (!v) {
return "";
}
let tmps = this.projectWeight.filter(d => d.dictValue == v);
return tmps.length > 0 ? tmps[0].dictLabel : '';
},
getProjectBuildType(v) {
if (!v) {
return "";
}
let tmps = this.projectBuildType.filter(d => d.dictValue == v);
return tmps.length > 0 ? tmps[0].dictLabel : '';
},
getProjectLevel(v) {
if (!v) {
return "";
}
let tmps = this.projectLevel.filter(d => d.dictValue == v);
return tmps.length > 0 ? tmps[0].dictLabel : '';
},
getProjectCategory(v) {
if (!v) {
return "";
}
let tmps = this.projectCategory.filter(d => d.dictValue == v);
return tmps.length > 0 ? tmps[0].dictLabel : '';
},
showScreenUlSel2() {
this.showSel2 = true
},
hideScreenUlSel2() {
this.showSel2 = false
},
setScreenLiSel2(item) {
this.selProject = item.projectName;
this.prj = item;
this.index = this.prjs.indexOf(this.prj);
this.loadData();
this.showSel2 = false
},
doLvl2HeaderClick(it) {
if (it.children.length > 0) {
it.expend = !it.expend;
}
},
doNavClick(it) {
this.nav = it.lvl;
this.curNodes = it.children;
this.curNode = it;
},
findItem() {
let tmps = this.prjs.filter(d => d.id == this.prj.id);
if (tmps.length > 0) {
return tmps[0];
}
return null;
},
showDialog(prjs, prj, users) {
this.show = true
this.users = users;
let id = prj.id;
if (id == 0) {
id = prjs[1].id;
this.prj = prjs[1];
} else {
this.prj = prj;
}
this.selProject = this.prj.projectName;
this.prjs = prjs.filter(d => d.id > 0);
let find = this.findItem();
if (find) {
this.index = this.prjs.indexOf(find);
} else {
this.index = 0;
}
this.$api.dict("sur_project_weight").then(d => {
this.projectWeight = d || [];
});
this.$api.dict("project_category").then(d => {
this.projectCategory = d || [];
});
this.$api.dict("project_level").then(d => {
this.projectLevel = d || [];
});
this.$api.dict("project_build_type").then(d => {
this.projectBuildType = d || [];
});
this.users11 = users.filter(d => d.deptType == 11);
this.users4 = users.filter(d => d.deptType == 4);
this.users2 = users.filter(d => d.deptType == 2);
this.users3 = users.filter(d => d.deptType == 3);
},
modifyLeftBtn() {
let n = this.index;
n--;
if (n < 0) {
n = this.prjs.length - 1;
}
this.index = n;
this.loadData();
},
modifyRightBtn() {
let n = this.index;
n++;
if (n > this.prjs.length - 1) {
n = 0;
}
this.index = n;
this.loadData();
}
},
};
</script>
<style lang="less">
.project-info-dlg {
.popup-project-introduction-min {
transform: translateY(100px);
&:hover {
.modify-btn {
display: flex;
}
}
}
&.font-size-2 {
.header-title {
font-size: 28px;
}
.popup-project-introduction-details {
.main-content {
font-size: 28px;
line-height: 64px;
.head-title-tab {
.head-nav {
padding: 12px 36px;
}
}
.data-table {
padding: 64px 36px;
table {
th {
line-height: 64px;
font-weight: bold
}
td {
line-height: 64px;
}
}
}
}
}
}
&.font-size-1 {
.header-title {
font-size: 24px;
}
.popup-project-introduction-details {
.main-content {
font-size: 24px;
line-height: 28px;
.head-title-tab {
.head-nav {
padding: 12px 36px;
}
}
.data-table {
padding: 48px 24px;
table {
th {
line-height: 48px;
font-weight: bold
}
td {
line-height: 48px;
}
}
}
}
}
}
.popup-project-introduction-details {
padding: 0px !important;
position: relative;
.quality-table {
padding: 0px !important;
}
.font-size-tools {
position: absolute;
top: -40px;
right: 200px;
}
.modify-btn {
display: none;
position: absolute;
top: 400px;
z-index: 100;
cursor: pointer;
padding: 0px;
border-radius: 50%;
width: 100px;
height: 100px;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.2);
svg {
* {
fill: #fff;
}
}
}
&.btn-right {
right: 20px;
}
&.btn-left {
left: 20px;
}
}
}
.main-content {
.data-item {
border-bottom: solid 1px #fff;
padding: 12px 0px 12px 20px;
box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);
img {
width: 16px;
height: 16px;
display: inline-block;
position: relative;
top: 8px;
}
.data-row {
display: flex;
line-height: 30px;
}
.data-table {
padding: 12px;
table {
border-collapse: collapse;
border: solid 1px #fff;
th {
border: solid 1px #fff;
line-height: 36px;
background: rgba(255, 255, 255, 0.3);
font-weight: bold
}
td {
border: solid 1px #fff;
line-height: 36px;
text-align: center;
}
}
}
}
}
.head-title-tab {
padding-top: 12px;
display: block;
width: 100%;
.head-nav {
background-size: 100% 100%;
display: inline-block;
width: auto;
padding: 0px 24px;
}
}
.head-title-select {
width: 300px;
padding-top: 0px;
}
}</style>