jhbigscreen/src/pages/projectQuality.vue

450 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="project-quality">
<!--大屏背景-->
<background-video></background-video>
<!--大屏内容-->
<div class="screen-content-max">
<screen-header :nav="4" ></screen-header>
<div class="screen-content">
<el-row :key="elKey">
<el-col :span="12">
<module-one-3-1 label="质量隐患检查">
<div class="warning-info-title" style="padding-left: 20px;">
<div :class="safeNav==0?'active':''" @click="doSafeNav(0,'汇总总数')"></div>
<div :class="safeNav==3?'active':''" @click="doSafeNav(3,'集团总数')"></div>
<div :class="safeNav==4?'active':''" @click="doSafeNav(4,'子公司总数')"></div>
<div :class="safeNav==5?'active':''" @click="doSafeNav(5,'甲方代表')"></div>
<div :class="safeNav==6?'active':''" @click="doSafeNav(6,'监理单位')"></div>
<div :class="safeNav==7?'active':''" @click="doSafeNav(7,'施工单位')"></div>
</div>
<project-overview-chart2 :key="safeNav" :sp="'\n'" :maintitle="fmt(summaryTotal)" :typedata="summary" :text="safeText" :height="230"></project-overview-chart2>
<div style="padding:0px 20px">
<el-row>
<el-col :span="12">
<div class="rank-chart-title bottom-line">质量隐患类型分析</div>
<rank-chart :data="summary" :showval="true" :height="600"></rank-chart>
</el-col>
<el-col :span="12">
<div class="rank-chart-title bottom-line">项目质量隐患占比</div>
<div class="idle-list" style="padding-top:20px;">
<el-table style="width: 100%" ref="wgzp" :data="summaryPrj" height="600" :row-style="rowStyle" class="elTable">
<el-table-column type="index" width="40">
<template slot-scope="scope">
<div :class="scope.$index < 3 && +scope.row.value>0 ? 'idle-list-color':''">{{scope.$index + 1}} </div>
</template></el-table-column>
<el-table-column prop="name" label="项目名称" width="120" class-name="text-left" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="prop" label="占比" >
<template slot-scope="scope">
<idle-list-chart :prop="Number(scope.row.prop)" :color="scope.$index < 3 && +scope.row.value>0 ? '#f05e35':'#6ab9fe'"></idle-list-chart>
</template>
</el-table-column>
<el-table-column prop="number" label="隐患数" width="60" align="center">
<template slot-scope="scope">
<div>{{scope.row.value}} </div>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
</module-one-3-1>
</el-col>
<el-col :span="6" >
<module-one-1-1 label="材料进场取样复试">
<div class="warning-info">
<div class="warning-info-title">
<div :class="samplingNav==0?'active':''" @click="samplingNav=0"></div>
<div :class="samplingNav==1?'active':''" @click="samplingNav=1"></div>
<div :class="samplingNav==2?'active':''" @click="samplingNav=2"></div>
</div>
<div class="equipment-list-max quality-target-index">
<el-row>
<el-col :span="12">
<div class="equipment-list-min quality-target-index-min">
<div class="czz-number-img czz-number-img-blue">
<svg class="my-svg-icon-blue" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3054"><path d="M530.46 269c4.64 0 9.05 2.01 12.09 5.52l109.54 126.3A16.01 16.01 0 0 1 656 411.3V893c0 8.82-7.18 16-16 16H178c-8.82 0-16-7.18-16-16V285c0-8.82 7.18-16 16-16h352.46m0-64H178c-44.18 0-80 35.82-80 80v608c0 44.18 35.82 80 80 80h462c44.18 0 80-35.82 80-80V411.3c0-19.26-6.95-37.87-19.56-52.42L590.9 232.58A80.014 80.014 0 0 0 530.46 205zM819.29 864h-45.92c-17.67 0-32-14.33-32-32s14.33-32 32-32h45.92c25.21 0 45.71-19.94 45.71-44.46V295.17c0-10.61-3.91-20.88-11.01-28.94L747.58 145.52c-8.7-9.87-21.35-15.52-34.7-15.52H370.49c-17.67 0-32-14.33-32-32s14.33-32 32-32h342.38c31.72 0 61.87 13.56 82.71 37.2L902 223.91c17.41 19.75 27 45.06 27 71.26v460.37C929 815.35 879.78 864 819.29 864zM702 468H552.09c-41.96 0-76.09-31.47-76.09-70.15V240.5h64v157.35c0 1.88 4.57 6.15 12.09 6.15H702v64zM898 326H748.09c-41.96 0-76.09-31.47-76.09-70.15V98.5h64v157.35c0 1.88 4.57 6.15 12.09 6.15H898v64zM535.13 784.5H262.88c-17.67 0-32 14.33-32 32s14.33 32 32 32h272.25c17.67 0 32-14.33 32-32s-14.33-32-32-32zM535.13 638.75H262.88c-17.67 0-32 14.33-32 32s14.33 32 32 32h272.25c17.67 0 32-14.33 32-32s-14.33-32-32-32zM535.13 493H262.88c-17.67 0-32 14.33-32 32s14.33 32 32 32h272.25c17.67 0 32-14.33 32-32s-14.33-32-32-32z" p-id="3055"></path></svg>
</div>
<div class="equipment-list-data">
<p style="font-size: 12px;">送检数</p>
<div><span>4</span><span style="font-size: 12px;"></span></div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="equipment-list-min quality-target-index-min">
<div class="czz-number-img czz-number-img-green">
<svg class="my-svg-icon-green" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7849"><path d="M896 64H128c-35.296 0-64 28.704-64 64v768c0 35.296 28.704 64 64 64h592a32 32 0 1 0 0-64H128V128h768v592a32 32 0 1 0 64 0V128c0-35.296-28.704-64-64-64zM791.744 746.496A206.752 206.752 0 0 0 832 624c0-114.688-93.312-208-208-208S416 509.312 416 624s93.312 208 208 208a206.752 206.752 0 0 0 122.496-40.256l110.88 110.88a31.904 31.904 0 0 0 45.248 0 31.968 31.968 0 0 0 0-45.248l-110.88-110.88zM480 624c0-79.392 64.608-144 144-144s144 64.608 144 144-64.608 144-144 144-144-64.608-144-144zM800 264a32 32 0 0 0-32-32H256a32 32 0 0 0 0 64h512a32 32 0 0 0 32-32zM256 422.656a32 32 0 0 0 0 64h96a32 32 0 0 0 0-64H256z" p-id="7850"></path></svg>
</div>
<div class="equipment-list-data">
<p style="font-size: 12px;">待检数</p>
<div><span class="fgreen">0</span><span style="font-size: 12px;"></span></div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="equipment-list-min quality-target-index-min">
<div class="czz-number-img czz-number-img-blue">
<svg class="my-svg-icon-blue" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10575"><path d="M634.593683 354.898336h-189.279113c39.748614-30.284658 71.926063-58.676525 96.532347-87.068391 26.499076 32.177449 58.676525 60.569316 92.746766 87.068391z m30.284658 177.922366h-246.062847v81.390019H662.985549v-81.390019zM984.760041 190.225508v202.528651c0 183.600739-81.390018 355.844732-225.242144 471.304991l-187.386322 151.42329c-5.678373 5.678373-15.142329 7.571165-22.713493 7.571164s-17.03512-1.892791-24.606285-7.571164l-187.386322-151.42329C195.466141 748.598891 114.076122 576.354898 114.076122 392.754159V190.225508c0-15.142329 9.463956-30.284658 24.606285-35.963031l397.486137-151.42329c9.463956-3.785582 18.927911-3.785582 26.499076 0l397.486136 151.42329c15.142329 5.678373 24.606285 20.820702 24.606285 35.963031zM734.911612 464.680222H348.782222v240.384473h70.033272v-24.606285H662.985549v24.606285h70.033272V464.680222z m64.354899-98.425139c-92.746765-39.748614-162.780037-88.961183-210.099816-149.530499l18.927912-22.713493h-98.425139c-41.641405 62.462107-117.35305 121.138632-225.242144 177.922366 17.03512 18.927911 32.177449 39.748614 45.426987 60.569316 22.713494-13.249538 45.426987-26.499076 64.354898-39.748614v30.284658h293.382625v-28.391867c20.820702 13.249538 41.641405 24.606285 62.462107 34.07024 15.142329-18.927911 30.284658-39.748614 49.21257-62.462107z" fill="" p-id="10576"></path></svg>
</div>
<div class="equipment-list-data">
<p>合格数</p>
<div><span>4</span><span style="font-size: 12px;"></span></div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="equipment-list-min quality-target-index-min">
<div class="czz-number-img czz-number-img-green">
<svg class="my-svg-icon-green" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8279"><path d="M855.13728 187.4176c-105.97376 0-209.34656-36.9152-291.08736-103.936l-40.9344-33.56672-40.94976 33.56672c-81.77152 67.01568-185.15456 103.936-291.09248 103.936H126.49984V622.83264l4.95104 11.90912c67.33824 161.82784 206.54592 289.3824 372.38272 341.2224l19.08224 5.96992 19.11808-5.86752c170.07616-52.16768 305.99168-176.79872 372.92032-341.89824l4.62848-11.43808 0.08704-12.34944 0.03072-3.27168V187.4176h-64.5632z m0 419.22048l-0.03072 3.26144c-58.8544 145.21856-180.87424 258.06848-332.00128 304.44032-148.33664-46.39232-272.86528-162.24256-332.032-304.4096V252.0064c125.99296 0 241.62304-44.46208 332.032-118.56896C613.50912 207.5648 729.088 252.0064 855.13728 252.0064v354.63168z" fill="" p-id="8280"></path><path d="M400.47616 304.95232c57.68192 2.5856 87.78752 39.74656 90.368 111.5136-2.58048 70.50752-33.97632 107.0336-94.21312 109.5936-55.12192-3.85024-84.59264-40.37632-88.43776-109.5936 2.55488-71.76704 33.31584-108.928 92.28288-111.5136z m-1.92 174.96064c26.91584-1.25952 41.0112-23.07072 42.30144-65.37216-1.29024-42.29632-14.7456-64.08192-40.37632-65.37216-28.20608 0-42.29632 22.44096-42.29632 67.29216 1.25952 39.75168 14.72 60.89728 40.3712 63.45216z m207.64672-174.96064h51.91168l-219.18208 417.21856H387.0208l219.18208-417.21856z m40.37632 199.95648c57.68192 2.5856 87.78752 40.37632 90.36288 113.4336-2.58048 66.6624-33.97632 101.23776-94.208 103.82336-56.41728-3.84512-85.88288-38.45632-88.44288-103.82336 2.56-71.77216 33.32096-109.58848 92.288-113.4336z m-1.92512 176.88576c25.63072-1.25952 39.0912-23.71072 40.38144-67.29728-1.29024-41.0112-14.12096-62.16192-38.45632-63.45216-26.91584 0-41.0368 21.81632-42.30144 65.37728 1.26976 41.0368 14.72512 62.81216 40.37632 65.37216z" fill="" p-id="8281"></path></svg>
</div>
<div class="equipment-list-data">
<p>合格率</p>
<div><span class="fgreen">100</span><span style="font-size: 12px;">%</span></div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</module-one-1-1>
<module-one-1-1 label="机械设备管理">
<div class="nav-info" style="padding:20px 20px 0px">
<span class="nav-label">设备总数:</span>
<span class="nav-num">100</span>
<span class="nav-unit"></span>
</div>
<rank-chart :data="mechanicalData" :showval="true" :height="224"></rank-chart>
</module-one-1-1>
<module-one-1-1 label="实测实量">
<div class="warning-info-title" style="padding-left: 20px;">
<div :class="measuredNav==0?'active':''" @click="doMeasuredNav(0,' 全部')">全部</div>
<div :class="measuredNav==1?'active':''" @click="doMeasuredNav(1,' 正常')">正常</div>
<div :class="measuredNav==2?'active':''" @click="doMeasuredNav(2,' 待校准')">待校准</div>
</div>
<project-overview-chart :key="measuredNav" :sp="'\n'" :maintitle="measuredTotal"
:typedata="measuredData" :text="measuredText" :height="230"></project-overview-chart>
</module-one-1-1>
</el-col>
<el-col :span="6">
<module-one-3-1 label="举牌验收">
<div class="nav-info" style="padding:20px 20px 0px">
<span>
<span class="nav-label">首次验收:</span>
<span class="nav-num">42</span>
<span class="nav-unit"></span>
</span>
<span style="display: inline-block;margin-left: 100px;">
<span class="nav-label">合格率:</span>
<span class="nav-num">96</span>
<span class="nav-unit">%</span>
</span>
</div>
<div class="acceptance-item" v-for="(it,idx) in acceptanceData" :key="idx">
<div class="row-1">
<div class="div-img"><img :src="it.img"></div>
<div class="div-text">
<div class="row-3">
<span class="sp-lbl">举牌验收</span>
<span class="sp-date">{{it.date}}</span>
</div>
<div class="row-3">
<span class="sp-label">项目:</span>
<span class="sp-text">{{it.name}}</span>
</div>
<div class="row-3">
<span class="sp-label">区域:</span>
<span class="sp-text">{{it.area}}</span>
</div>
</div>
</div>
<div class="row-5">
描述:{{it.detail}}
</div>
</div>
</module-one-3-1>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import '../components/module/module-one-1-1'
import '../components/module/module-one-3-1'
import '../components/background_video'
import '../components/header'
import '../components/project-overview-chart'
import '../components/project-overview-chart2'
import '../components/rank-chart'
import '../components/idle-list-chart'
import '../components/people-number'
export default {
data() {
return {
elKey:0,
dept:null,
safeNav:0,
safeText:'汇总总数',
rowStyle:{
color:'#B6CFEF',
fontSize:'12px',
height:'32px'
},
samplingNav:0,
//机械设备管理
mechanicalData:[
{value: '5',prop: '62.5', text: '履带挖掘机'},
{value: '1',prop: '12.5', text: '洒水车'},
{value: '1',prop: '12.5', text: '轮胎装载机'},
{value: 1,prop: '12.5', text: '小轿车'},
],
measuredNav:0,
measuredTotal:7,
measuredText:" 全部",
measuredData:[
{ name:'钢卷尺', value:'2' },
{ name:'光学水准仪', value:'2' },
{ name:'电子经纬仪', value:'1' } ,
{ name:'数字回弹仪', value:'1' },
{ name:'激光垂准仪', value:'1' },
],
//举牌验收
acceptanceData:[
{name:'泾河新城荟锦坊二期项目',date:'2023-06-08 11:11:11',area:'基础施工',img:'./images/850.jpg', detail:'锚索验收12次,结果为合格'},
{name:'泾河新城荟锦坊二期项目',date:'2023-06-08 11:11:11',area:'基础施工',img:'./images/851.jpg',detail:'筏板钢筋验收15次,结果为合格'},
{name:'泾河新城荟锦坊二期项目',date:'2023-06-08 11:11:11',area:'基础施工',img:'./images/852.jpg',detail:'墙柱钢筋验收6复查结果不合格'},
{name:'泾河新城荟锦坊二期项目',date:'2023-06-08 11:11:11',area:'基础施工',img:'./images/853.jpg',detail:'模板及脚手架验收5次复查结果为合格'},
],
summary:[],
summaryTotal:0,
summaryPrj:[],
summaryPrjTotal:0
}
},
created() {
this.init()
},
mounted() {
this.$bus.$on("deptChange",dept=>{
this.dept=dept;
this.doDeptChane();
});
},
methods: {
fmt(n){
n=""+n;
return " ".substring(0,3-n.length)+n;
},
doDeptChane(){
this.$api.problemmodify.qualitySummary(this.dept.id,this.safeNav).then(d=>{
this.summary=(d||[]).map(it=>{
return {
text:it.problemArea,
prop:'0.0',
name:it.problemArea,
value:+it.roleType||0
}
});
this.summaryTotal=0;
this.summary.forEach(it=>{
this.summaryTotal+=it.value;
})
this.summary.forEach(it=>{
if(this.summaryTotal==0){
it.prop="0.0"
}else{
it.prop=(it.value*100.0/this.summaryTotal).toFixed(1);
}
});
this.elKey++;
});
this.$api.problemmodify.qualitySummaryByProject(this.dept.id,this.safeNav).then(d=>{
this.summaryPrj=(d||[]).map(it=>{
return {
text:it.problemArea,
prop:'0.0',
name:it.problemArea,
value:it.roleType||0
}
});
this.summaryPrjTotal=0;
this.summaryPrj.forEach(it=>{
this.summaryPrjTotal+=it.value;
});
this.summaryPrj.forEach(it=>{
if(this.summaryPrjTotal==0){
it.prop="0.0"
}else{
it.prop=(it.value*100.0/this.summaryPrjTotal).toFixed(1);
}
})
this.elKey++;
});
},
doMeasuredNav(n,t){
this.measuredNav=n;
this.measuredText=t;
},
doSafeNav(n,t){
this.safeNav=n;
this.safeText=t;
this.doDeptChane();
},
init(){
this.localStorage = JSON.parse(localStorage.getItem("data1"))
//设备概况点击事件定时器
this.overviewInterval = setInterval(this.overviewClick,5000);
//重大节点预期预警
this.majorInterval = setInterval(this.timer,5000);
//正在发生 定时器
this.warningInterval = setInterval(this.automaticRoll,5000);
//预警类型 定时器
this.warningTypeInterval = setInterval(this.automaticRollType,5000);
},
},
};
</script>
<style lang="less">
.project-quality{
.center-image .screen-one-2-1{
overflow: hidden;
}
.equipment-list-data{
position: relative;
}
.my-svg-icon-blue,.my-svg-icon-green{
width: 28px;
height: 28px;
position: relative;
top:-10px;
}
.my-svg-icon-green *{
fill: #63F8BC;
}
.fgreen{
color: #63F8BC !important;
}
.my-svg-icon{
width: 40px;
height: 40px;
margin-bottom: 20px;
}
.my-svg-icon-blue *, .my-svg-icon *{
fill: #389DE3;
}
.people-number-con div:nth-child(3){
background: none;
}
.labour-education .number-unit{
position: relative;
bottom: -8px;
}
.bottom-line2,.bottom-line{
border:none !important;
position: relative;
}
.bottom-line::after{
content: " ";
display: block;
position: absolute;
width: calc(100% - 30px);
border-bottom: solid 1px rgba(90,192,244,0.3);
bottom: 5px;
left:20px;
opacity: 0.5;
}
.idle-list .el-table__body .el-table__row{
line-height: 55px;
height: 55px !important;
}
.bottom-line2::after{
content: " ";
display: block;
position: absolute;
width: calc(100% - 5px);
border-bottom: solid 1px rgba(90,192,244,0.3);
bottom: -4px;
opacity: 0.5;
}
.bottom-line2::before{
content: " ";
display: inline-block;
position: absolute;
width: 60px;
border-bottom: solid 2px #389DE3;
bottom: -4px;
opacity: 0.5;
}
.my-svg-icon2{
width: 40px;
height: 40px;
}
.my-svg-icon2 *{
fill: #01A9FF;
}
.nav-info{
color: #82c9ff;
font-size: 12px;
}
.nav-info .nav-label{
font-size: 12px;
}
.nav-info .nav-num{
font-size: 28px;
font-weight: bold;
}
.nav-info .nav-unit{
font-size: 12px;
}
.acceptance-item:first-child{
margin-top: 10px;
}
.acceptance-item{
margin-top: 20px;
padding:20px;
}
.acceptance-item .row-5{
margin-top:10px;
line-height:30px;
color: #C7DAFD;
}
.acceptance-item .row-3{
line-height:30px;
color:#4996D4;
}
.acceptance-item .row-1{
display: flex;
}
.acceptance-item .div-img{
height: 90px;
margin-right: 10px;
overflow: hidden;
}
.acceptance-item .div-img img{
height: 90px;
}
.acceptance-item .sp-lbl{
background: #074031;
border:solid 1px #1D642C;
color: #41AA20;
padding:2px 8px;
}
.acceptance-item .sp-date{
font-size: 12px;
margin-left: 50px;
color: #aaa;
}
}
</style>