YZProjectCloud/yanzhu-bigscreen/src/views/projectDetail.vue

978 lines
37 KiB
Vue
Raw Normal View History

2024-11-27 23:42:39 +08:00
<template>
2024-12-02 00:05:10 +08:00
<div class="project-detail main-page">
<el-col :span="6" class="h100">
<module-one-1-1 label="项目概况">
<img src="images/icon2001.png" class="img-openwin" @click="showDetailDlg" />
<div class="glr-title prj-info-title">{{ selProject?.projectName || '' }}</div>
<div class="dept-info-list">
<el-row>
<el-col :span="12" class="dept-item">
<div class="dept-title">建设单位</div>
<div v-if="deptType1 == null" class="dept-nodata">
暂无数据
2024-11-28 23:59:43 +08:00
</div>
2024-12-02 00:05:10 +08:00
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_3.png" />
<div class="dept-row">
<div class="dept-name"> {{ deptType1.deptName }}</div>
<div class="dept-leader-phone"
:title="(deptType1.leader || '') + ' ' + (deptType1.phone || '')">
<span class="dept-leader">{{ deptType1.leader }}</span>
<span class="dept-phone">{{ deptType1.phone }}</span>
</div>
</div>
</div>
</el-col>
<el-col :span="12" class="dept-item">
<div class="dept-title">设计单位</div>
<div v-if="deptType2 == null" class="dept-nodata">
暂无数据
</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_2.png" />
<div class="dept-row">
<div class="dept-name"> {{ deptType2.deptName }}</div>
<div class="dept-leader-phone"
:title="(deptType2.leader || '') + ' ' + (deptType2.phone || '')">
<span class="dept-leader">{{ deptType2.leader }}</span>
<span class="dept-phone">{{ deptType2.phone }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" class="dept-item">
<div class="dept-title">总包单位</div>
<div v-if="deptType3.deptName == null" class="dept-nodata">
暂无数据
</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_3.png" />
<div class="dept-row">
<div class="dept-name"> {{ deptType3.deptName }}</div>
<div class="dept-leader-phone"
:title="(deptType3.leader || '') + ' ' + (deptType3.phone || '')">
<span class="dept-leader">{{ deptType3.leader }}</span>
<span class="dept-phone">{{ deptType3.phone }}</span>
</div>
</div>
</div>
</el-col>
<el-col :span="12" class="dept-item">
<div class="dept-title">监理单位</div>
<div v-if="deptType4 == null" class="dept-nodata">
暂无数据
</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_11.png" />
<div class="dept-row">
<div class="dept-name"> {{ deptType4.deptName }}</div>
<div class="dept-leader-phone"
:title="(deptType4.leader || '') + ' ' + (deptType4.phone || '')">
<span class="dept-leader">{{ deptType4.leader }}</span>
<span class="dept-phone">{{ deptType4.phone }}</span>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" class="dept-item">
<div class="dept-title">检测单位</div>
<div v-if="deptType5 == null" class="dept-nodata">
暂无数据
</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_12.png" />
<div class="dept-row">
<div class="dept-name"> {{ deptType5.deptName }}</div>
<div class="dept-leader-phone"
:title="(deptType5.leader || '') + ' ' + (deptType5.phone || '')">
<span class="dept-leader">{{ deptType5.leader }}</span>
<span class="dept-phone">{{ deptType5.phone }}</span>
</div>
</div>
</div>
</el-col>
<el-col :span="12" class="dept-item">
<div class="dept-title">勘察单位</div>
<div v-if="deptType6 == null" class="dept-nodata">
暂无数据
</div>
<div class="dept-info" v-else>
<img class="dept-img" src="images/company_10.png" />
<div class="dept-row">
<div class="dept-name"> {{ deptType6.deptName }}</div>
<div class="dept-leader-phone"
:title="(deptType6.leader || '') + ' ' + (deptType6.phone || '')">
<span class="dept-leader">{{ deptType6.leader }}</span>
<span class="dept-phone">{{ deptType6.phone }}</span>
</div>
</div>
2024-11-28 23:59:43 +08:00
</div>
2024-12-02 00:05:10 +08:00
</el-col>
</el-row>
</div>
</module-one-1-1>
<module-one-1-1 label="劳务人员概况">
<div class="attendance-info warning-info">
<div class="attendance-info-title warning-info-title">
<div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人数')">
在岗人数
</div>
<div :class="attendanceNav == 1 ? 'active' : ''" @click="doAttendanceNav(2, '今日出勤')">
今日出勤
2024-11-28 23:59:43 +08:00
</div>
</div>
2024-12-02 00:05:10 +08:00
<img src="images/icon2001.png" v-show="attendanceTotal > 0"
style="position: absolute; cursor: pointer; right: 20px; top: 12px"
@click="doShowAttendanceDetail" />
<el-row>
<el-col :span="8" class="attendance-tag">
<div class="survey_content">
<div class="survey_content_img">
<img
:src="attendanceNav == 0 ? 'images/survey_icon_4.png' : 'images/survey_icon_5.png'" />
</div>
</div>
<div class="survey_content_number labour-survey_content_number">
<div class="survey_content_value">
<span>{{ attendanceTotal }}</span>
</div>
<p>{{ attendanceNav == 0 ? '在岗人数' : '今日出勤' }}</p>
2024-11-28 23:59:43 +08:00
</div>
2024-12-02 00:05:10 +08:00
</el-col>
<el-col :span="16">
<staffSurveyChart :key="chartKey"
:height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'"
:data="attendanceData" :width="140"></staffSurveyChart>
</el-col>
</el-row>
</div>
</module-one-1-1>
<module-one-1-1 label="设备概览">
<div class="device-info">
<div class="survey_title device-title">
<div class="survey_title_btn">
<div :class="deviceNav == 0 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
@click="doDeviceNav(0)">设备数量</div>
</div>
<div class="survey_title_btn">
<div :class="deviceNav == 1 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
@click="doDeviceNav(1)">绑定数量</div>
</div>
<div class="survey_title_btn">
<div :class="deviceNav == 2 ? 'survey_title_btn_min active' : 'survey_title_btn_min'"
@click="doDeviceNav(2)">监测数量</div>
2024-11-28 23:59:43 +08:00
</div>
</div>
2024-12-02 00:05:10 +08:00
<div class="device-data">
<el-row>
<el-col :span="12">
<div class="survey_content" style="justify-content: right;">
<div class="survey_content_img">
<img
:src="attendanceNav == 0 ? 'images/survey_icon_4.png' : 'images/survey_icon_5.png'" />
</div>
</div>
</el-col>
<el-col :span="12">
<div class="survey_content_number labour-survey_content_number"
style="padding-top:0px;text-align: left;margin-left: 10px;">
<p>{{ deviceNav == 0 ? '设备数量' : deviceNav == 1 ? '绑定数量' : '监测数量' }}</p>
<div class="survey_content_value">
<span class="sp-number led-number">{{ attendanceTotal }}</span>
<span class="sp-unit" style="font-style: normal;"></span>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="device-data-list">
<div v-for="(it, idx) in deviceData" :key="idx" class="device-data-item">
<img src="images/legend_weiyi.png" />
<span>{{ it.text }}</span>
<span class="fblue led-number">{{ it.value }}</span>
2024-11-28 23:59:43 +08:00
</div>
</div>
2024-12-02 00:05:10 +08:00
</div>
</module-one-1-1>
</el-col>
<el-col :span="12" class="h100">
<module-one-2-2 label="" class="no-title no-border">
<div v-autoscroll="20" style="height: 100px; overflow: hidden;" v-if="1 == 2">
<svg-icon icon-class="money"></svg-icon>
<div v-for="(it, idx) in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="idx">
{{ it }}
</div>
</div>
<div>
</div>
<div class="modify-project-amount" @mouseout="costMouseout" @mouseover="costMouseover">
<div class="modify-btn">
<img src="images/foot_left.png" @click="modifyLeftBtn" />
</div>
<div class="modify-content" id="modifyContent">
<div class="modify-content-overflow">
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>
总投资
</p>
<div>
<span class="led-number">{{ 1000 }}</span> 万元
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>
本月完成
</p>
<div>
<span class="led-number">{{ 1000 }}</span> 万元
</div>
</div>
</div>
2024-11-28 23:59:43 +08:00
</div>
2024-12-02 00:05:10 +08:00
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>
本年完成
</p>
<div>
<span class="led-number">{{ 1000 }}</span> 万元
</div>
</div>
</div>
2024-11-28 23:59:43 +08:00
</div>
2024-12-02 00:05:10 +08:00
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="money"></svg-icon>
开累完成
</p>
<div>
<span class="led-number">{{ 1000 }}</span> 万元
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>
计划开工日期
</p>
<div>
<span class="led-number">{{ new Date() | toDate }}</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>
计划竣工日期
</p>
<div>
<span class="led-number">{{ new Date() | toDate }}</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>
实际开工日期
</p>
<div>
<span class="led-number">{{ new Date() | toDate }}</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="date"></svg-icon>
合同工期
</p>
<div>
<span class="led-number">{{ 2100 }}</span>
</div>
</div>
</div>
</div>
<div class="project-amount">
<div class="project-amount-bgd">
<div class="project-amount-con">
<p>
<svg-icon icon-class="area"></svg-icon>
建筑面积
</p>
<div>
<span class="led-number">{{ 10000 }}</span> 平方米
</div>
</div>
</div>
</div>
2024-11-28 23:59:43 +08:00
</div>
2024-12-02 00:05:10 +08:00
</div>
<div class="modify-btn">
<img src="images/foot_right.png" @click="modifyRightBtn" />
</div>
</div>
<div class="prj-img-list">
<el-carousel height="100%" :autoplay="false">
<el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
<el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
</el-carousel-item>
</el-carousel>
</div>
</module-one-2-2>
<module-one-1-2 label="项目概况">
</module-one-1-2>
</el-col>
<el-col :span="6" class="h100">
<module-one-1-1 label="项目概况">
</module-one-1-1>
<module-one-2-1 label="项目概况">
</module-one-2-1>
</el-col>
<project-info-dialog ref="infoDlg"></project-info-dialog>
</div>
</template>
2024-11-27 23:42:39 +08:00
<script>
2024-11-30 00:13:31 +08:00
import projectInfoDialog from './detail/projectInfoDialog.vue';
2024-12-02 00:05:10 +08:00
import staffSurveyChart from '@/components/staffSurveyChart.vue';
import debounce from 'lodash.debounce'
2024-11-27 23:42:39 +08:00
export default {
2024-12-02 00:05:10 +08:00
components: {
projectInfoDialog,
staffSurveyChart
2024-11-30 00:13:31 +08:00
},
2024-11-27 23:42:39 +08:00
data() {
return {
2024-12-02 00:05:10 +08:00
chartKey: 0,
dpi: '',
selProject: null,
prjInfo: {},
deptType1: [],//建设单位
deptType2: [],//设计单位
deptType3: [],//总包单位
deptType4: [],//监理单位
deptType5: [],//检测单位
deptType6: [],//勘察单位
prjImgs: [],
attendanceNav: 0,
attendanceTotal: 0,
attendanceData: [
{ text: "普通工种", value: 10 },
{ text: "特殊工种", value: 20 },
{ text: "管理人员", value: 30 },
],
deviceNav: 0,
deviceData: [
{ text: '自有', value: 45 },
{ text: '租赁', value: 55 },
{ text: '分包', value: 65 },
],
costIndex: 0,
direction: "right",
costInterval: undefined,
2024-11-27 23:42:39 +08:00
}
},
mounted() {
this.$store.dispatch('ChangeNav', 2);
2024-12-02 00:05:10 +08:00
this.$bus.$on('projectChange', debounce(prj => {
this.selProject = prj;
2024-11-28 23:59:43 +08:00
this.init();
2024-12-02 00:05:10 +08:00
}));
this.selProject = this.$store.getters.selProject;
2024-11-28 23:59:43 +08:00
this.init();
2024-12-02 00:05:10 +08:00
this.dpi = this.$dpi();
window.addEventListener("resize", () => {
if (this.dpi != this.$dpi()) {
this.dpi = this.$dpi();
this.chartKey++;
}
});
this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
2024-11-28 23:59:43 +08:00
},
2024-12-02 00:05:10 +08:00
methods: {
showDetailDlg() {
2024-11-30 00:13:31 +08:00
this.$refs.infoDlg.showDialog({
2024-12-02 00:05:10 +08:00
prjInfo: this.prjInfo,
selProject: this.selProject
2024-11-30 00:13:31 +08:00
});
},
2024-12-02 00:05:10 +08:00
init() {
if (!this.selProject) {
2024-11-28 23:59:43 +08:00
return;
}
2024-12-02 00:05:10 +08:00
this.$api.project.getProjectInfo(this.selProject.id).then(d => {
this.prjInfo = d.data || {};
let tmps = this.prjInfo.projectDeptsList || [];
const func = (t) => {
let objs = tmps.filter(it => it.deptType == t);
return objs.length > 0 ? objs[0] : null;
2024-11-28 23:59:43 +08:00
};
2024-12-02 00:05:10 +08:00
this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
this.deptType1 = func('建设单位');
this.deptType2 = func('设计单位');
this.deptType3 = { deptName: this.prjInfo.disDeptName, leader: this.prjInfo.projectPerson, phone: this.prjInfo.projectPersonPhone };
this.deptType4 = func("监理单位");
this.deptType5 = func("检测单位");
this.deptType6 = func("勘察单位");
2024-11-28 23:59:43 +08:00
});
2024-12-02 00:05:10 +08:00
},
doAttendanceNav(n) {
this.attendanceNav = n;
},
doShowAttendanceDetail() {
},
doDeviceNav(n) {
this.deviceNav = n;
},
costMouseover() {
clearInterval(this.costInterval);
},
costMouseout() {
this.costInterval = setInterval(this.manufacturingCostRoll, 5000);
},
modifyLeftBtn() {
this.direction = "left";
this.manufacturingCostRoll();
},
modifyRightBtn() {
this.direction = "right";
this.manufacturingCostRoll();
},
manufacturingCostRoll() {
var width = $(".project-amount").innerWidth();
if (this.direction == "right") {
if (this.costIndex == 6) {
this.costIndex = 0;
} else {
this.costIndex = this.costIndex + 3;
}
} else {
if (this.costIndex == 0) {
this.costIndex = 6;
} else {
this.costIndex = this.costIndex - 3;
}
}
$("#modifyContent").animate({ scrollLeft: width * this.costIndex + "px" });
this.direction = "right";
},
2024-11-27 23:42:39 +08:00
}
}
</script>
2024-11-29 23:08:39 +08:00
<style lang="less">
2024-12-02 00:05:10 +08:00
.project-detail {
2024-11-29 23:08:39 +08:00
color: #c2d5f6;
2024-12-02 00:05:10 +08:00
.dept-info-list {
2024-11-29 23:08:39 +08:00
height: calc(100% - 30px);
2024-12-02 00:05:10 +08:00
margin-top: 10px;
.el-row {
2024-11-29 23:08:39 +08:00
min-height: 33%;
}
2024-12-02 00:05:10 +08:00
.dept-item {
.dept-title {
line-height: 30px;
font-size: 14px;
2024-11-29 23:08:39 +08:00
}
2024-12-02 00:05:10 +08:00
.dept-nodata {
color: #ccc;
font-size: 12px;
}
.dept-info {
display: flex;
.dept-img {
width: 42px;
height: 42px;
2024-11-29 23:08:39 +08:00
}
2024-12-02 00:05:10 +08:00
.dept-row {
margin-left: 8px;
font-size: 12px;
line-height: 22px;
display: inline-grid;
flex-grow: 1;
padding-right: 10px;
.dept-name {
color: #50a2eb;
}
.dept-leader-phone {
color: #ab3715;
cursor: pointer;
overflow: hidden;
2024-11-29 23:08:39 +08:00
white-space: nowrap;
2024-12-02 00:05:10 +08:00
text-overflow: ellipsis;
.dept-leader {
margin-right: 10px;
}
2024-11-29 23:08:39 +08:00
}
}
}
2024-12-02 00:05:10 +08:00
}
}
.device-info {
.device-title {
padding: 10px;
}
.device-data {
padding: 30px 0px;
.survey_content_value {
.sp-number {
font-size: 40px;
}
.sp-unit {
font-size: 12px;
}
}
}
.device-data-list {
display: flex;
padding: 0px 10%;
.device-data-item {
display: inline-flex;
width: 33%;
align-items: center;
}
}
}
.modify-project-amount {
.modify-content {
width: 840px;
.modify-content-overflow {
width: 2500px;
.project-amount {
.project-amount-bgd {
width: 256px;
.project-amount-con {
.svg-icon {
width: 20px;
height: 20px;
fill: #63c8ff;
}
.led-number {
font-size: 40px;
}
}
}
}
}
}
}
.prj-img-list {
height: calc(100% - 130px);
.el-carousel {
height: 100%;
.el-carousel__arrow {
width: 50px;
height: 50px;
background-color: #192c648a;
i {
font-size: 20px;
}
}
2024-11-29 23:08:39 +08:00
}
}
}
2024-12-02 00:05:10 +08:00
2024-11-29 23:08:39 +08:00
@media (min-width: 1921px) and (max-width: 2560px) {
2024-12-02 00:05:10 +08:00
.project-detail {
.prj-info-title {
font-size: 24px;
2024-11-29 23:08:39 +08:00
}
2024-12-02 00:05:10 +08:00
.dept-info-list {
.dept-item {
.dept-title {
2024-11-29 23:08:39 +08:00
font-size: 18px;
line-height: 40px;
}
2024-12-02 00:05:10 +08:00
.dept-nodata {
2024-11-29 23:08:39 +08:00
font-size: 16px;
}
2024-12-02 00:05:10 +08:00
.dept-info {
.dept-img {
width: 60px;
height: 60px;
2024-11-29 23:08:39 +08:00
}
2024-12-02 00:05:10 +08:00
.dept-row {
2024-11-29 23:08:39 +08:00
font-size: 18px;
line-height: 32px;
}
}
}
}
2024-12-02 00:05:10 +08:00
.attendance-tag {
* {
font-size: 24px;
}
padding-top:40px;
.survey_content_img {
background-size: 120px 80px;
width: 120px;
height: 120px;
img {
width: 60px;
height: 60px;
}
}
}
.device-info {
.device-title {
padding: 10px;
.survey_title_btn_min {
font-size: 20px;
height: 40px;
width: 150px;
line-height: 40px;
}
}
.device-data {
padding: 70px 0px;
.survey_content_img {
width: 120px;
height: 120px;
line-height: 120px;
background-size: 120px 80px;
img {
width: 60px;
height: 60px;
}
}
.survey_content_number {
font-size: 20px;
.survey_content_value {
.sp-number {
font-size: 60px;
}
.sp-unit {
font-size: 20px;
}
}
}
}
.device-data-list {
.device-data-item {
font-size: 20px;
}
}
}
.modify-project-amount {
.modify-btn {
img {
height: 60px;
}
}
.modify-content {
width: 1110px;
.modify-content-overflow {
width: 3420px;
.project-amount {
.project-amount-bgd {
width: 350px;
height: 130px;
.project-amount-con {
p {
font-size: 20px;
.svg-icon {
width: 20px;
height: 20px;
fill: #63c8ff;
}
}
.led-number {
font-size: 50px;
}
}
}
}
}
}
}
.prj-img-list {
height: calc(100% - 150px);
.el-carousel {
height: 100%;
.el-carousel__arrow {
width: 80px;
height: 80px;
background-color: #192c648a;
i {
font-size: 30px;
}
}
}
}
2024-11-29 23:08:39 +08:00
}
}
2024-12-02 00:05:10 +08:00
2024-11-29 23:08:39 +08:00
@media (min-width: 2561px) {
2024-12-02 00:05:10 +08:00
.project-detail {
.prj-info-title {
font-size: 32px;
2024-11-29 23:08:39 +08:00
}
2024-12-02 00:05:10 +08:00
.dept-info-list {
.dept-item {
.dept-title {
2024-11-29 23:08:39 +08:00
font-size: 24px;
line-height: 40px;
}
2024-12-02 00:05:10 +08:00
.dept-nodata {
2024-11-29 23:08:39 +08:00
font-size: 18px;
}
2024-12-02 00:05:10 +08:00
.dept-info {
.dept-img {
width: 100px;
height: 100px;
2024-11-29 23:08:39 +08:00
}
2024-12-02 00:05:10 +08:00
.dept-row {
2024-11-29 23:08:39 +08:00
font-size: 24px;
line-height: 32px;
}
}
}
}
2024-12-02 00:05:10 +08:00
.attendance-info-title {
* {
font-size: 36px;
}
}
.attendance-tag {
* {
font-size: 36px;
}
padding-top:100px;
.survey_content_img {
background-size: 150px 100px;
width: 150px;
height: 150px;
img {
width: 80px;
height: 80px;
}
}
}
.device-info {
.device-title {
padding: 20px;
.survey_title_btn_min {
font-size: 30px;
height: 60px;
width: 210px;
line-height: 60px;
}
}
.device-data {
padding: 120px 0px;
.survey_content_img {
width: 180px;
height: 180px;
line-height: 180px;
background-size: 180px 120px;
img {
width: 90px;
height: 90px;
}
}
.survey_content_number {
font-size: 30px;
.survey_content_value {
.sp-number {
font-size: 90px;
}
.sp-unit {
font-size: 30px;
}
}
}
}
.device-data-list {
.device-data-item {
img {
width: 40px;
height: 40px;
}
font-size: 30px;
}
}
}
.modify-project-amount {
.modify-btn {
img {
height: 90px;
margin-top: 10px;
}
}
.modify-content {
width: 1680px;
.modify-content-overflow {
width: 5220px;
.project-amount {
.project-amount-bgd {
width: 540px;
height: 165px;
.project-amount-con {
p {
font-size: 30px;
.svg-icon {
width: 30px;
height: 30px;
}
}
div {
font-size: 30px;
.led-number {
font-size: 70px;
}
}
}
}
}
}
}
}
.prj-img-list {
height: calc(100% - 190px);
.el-carousel {
height: 100%;
.el-carousel__arrow {
width: 120px;
height: 120px;
background-color: #192c648a;
i {
font-size: 40px;
}
}
}
}
2024-11-29 23:08:39 +08:00
}
}
</style>