290 lines
15 KiB
Vue
290 lines
15 KiB
Vue
|
<template>
|
||
|
|
<div :class="red?'head-title red-head':'head-title'" class="main-header">
|
||
|
|
<div class="head-title-label">
|
||
|
|
北跨泾河-产发工程数字管理平台
|
||
|
|
</div>
|
||
|
|
<div class="head-title-tab">
|
||
|
|
<div :class="nav==1?'head-nav active':'head-nav'" @click="pageJump(1,'#/')">项目概况</div>
|
||
|
|
<div :class="nav==2?'head-nav active':'head-nav'" @click="pageJump(2,'#/detail')">项目详情</div>
|
||
|
|
<div :class="nav==3?'head-nav active':'head-nav'" @click="pageJump(3,'#/safety')">安全管理</div>
|
||
|
|
<div :class="nav==4?'head-nav active':'head-nav'" @click="pageJump(4,'#/quality')">质量管理</div>
|
||
|
|
<div :class="nav==5?'head-nav active':'head-nav'" @click="pageJump(5,'#/progress')">进度管理</div>
|
||
|
|
<div :class="nav==61||nav==62?'head-nav active':'head-nav'" style="position: relative;" class="has-submenu">
|
||
|
|
<div>视频管理</div>
|
||
|
|
<div class="header-btn-list">
|
||
|
|
<div class="header-btn-list-arrow"></div>
|
||
|
|
<div class="header-btn-list-item" style="width: 276px;"><div class="header-btn-list-padding">
|
||
|
|
<button type="button" :class="nav==61?'active':''" class="sub-btn" @click="pageJump(61,'#/video')">视频监控</button>
|
||
|
|
<button type="button" :class="nav==62?'active':''" class="sub-btn" @click="pageJump(62,'#/aiVideo')">AI识别监控</button></div></div></div>
|
||
|
|
</div>
|
||
|
|
<div :class="nav==7?'head-nav active':'head-nav'" @click="pageJump(7,'#/engin')">工程管理</div>
|
||
|
|
</div>
|
||
|
|
<div class="head-title-select" @mouseleave="hideScreenUlSel1" v-if="localStorage1">
|
||
|
|
<div class="head-select">
|
||
|
|
<input type="text" :value="dept1" @click="showScreenUlSel1" placeholder="请选择公司" readonly>
|
||
|
|
</div>
|
||
|
|
<el-collapse-transition>
|
||
|
|
<ul class="header-screen-ul" v-show="showSel1" ref="selectUl">
|
||
|
|
<li v-for="item in depts" @click="setScreenLiSel1(item)" :title="item.text" >{{item.text}}</li>
|
||
|
|
</ul>
|
||
|
|
</el-collapse-transition>
|
||
|
|
</div>
|
||
|
|
<div class="head-title-select" @mouseleave="hideScreenUlSel2" v-if="localStorage2">
|
||
|
|
<div class="head-select">
|
||
|
|
<input type="text" :value="dept2" @click="showScreenUlSel2" placeholder="请选择项目" readonly>
|
||
|
|
</div>
|
||
|
|
<el-collapse-transition>
|
||
|
|
<ul class="header-screen-ul" v-show="showSel2" ref="selectUl">
|
||
|
|
<li v-for="item in data" @click="setScreenLiSel2(item)" :title="item.text">{{item.text}}</li>
|
||
|
|
</ul>
|
||
|
|
</el-collapse-transition>
|
||
|
|
</div>
|
||
|
|
<div class="head-title-date">
|
||
|
|
<div class="head-title-time">
|
||
|
|
<div class="head-title-date-con">{{date}}</div>
|
||
|
|
<div class="head-title-time-con">{{time}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="head-title-weather">
|
||
|
|
<img :src="condCode">
|
||
|
|
<span>{{condTxt}}</span>
|
||
|
|
<span>{{temperature}}℃</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<i class="set-fullscreen set-font-size" style="margin-left: 16px;position: absolute;top: 4px;right: 16px;" @click="toggleFullScreen">
|
||
|
|
<svg class="icon" v-if="!isFullScreen" style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3304"><path d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z" fill="" p-id="3305"></path></svg>
|
||
|
|
<svg class="icon" v-else style="width: 24px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3952"><path d="M384 597.333333h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6L17.066667 947.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333 17.066667 17.066667 42.666667 17.066667 59.733333 0L341.333333 742.4v153.6c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z m358.4 85.333334h153.6c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-256c-25.6 0-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V742.4l264.533333 264.533333c17.066667 17.066667 42.666667 17.066667 59.733333 0 17.066667-17.066667 17.066667-42.666667 0-59.733333L742.4 682.666667zM640 426.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667H742.4L1006.933333 76.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666667z m-256-341.333334c-25.6 0-42.666667 17.066667-42.666667 42.666667v153.6L76.8 8.533333C59.733333 0 25.6 0 8.533333 8.533333 0 25.6 0 59.733333 8.533333 76.8L281.6 341.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z" p-id="3953"></path></svg>
|
||
|
|
</i>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
red:{
|
||
|
|
type:String
|
||
|
|
},
|
||
|
|
item:{
|
||
|
|
type:Number
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
nav:1,
|
||
|
|
dept1:'',
|
||
|
|
dept2:'',
|
||
|
|
showSel1:false,
|
||
|
|
showSel2:false,
|
||
|
|
data:[],
|
||
|
|
depts:[],
|
||
|
|
timerID:undefined,
|
||
|
|
time: '',
|
||
|
|
date: '',
|
||
|
|
week:'',
|
||
|
|
selDept:'',
|
||
|
|
localStorage1: JSON.parse(localStorage.getItem("data1")),
|
||
|
|
localStorage2: JSON.parse(localStorage.getItem("data2")),
|
||
|
|
isFullScreen:false,
|
||
|
|
temperature:20,
|
||
|
|
condTxt:'',
|
||
|
|
condCode:'',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.getWeather();
|
||
|
|
if(location.hash.indexOf("#/detail")>=0){this.nav=2;}
|
||
|
|
else if(location.hash.indexOf("#/safety")>=0){this.nav=3;}
|
||
|
|
else if(location.hash.indexOf("#/quality")>=0){this.nav=4;}
|
||
|
|
else if(location.hash.indexOf("#/progress")>=0){this.nav=5;}
|
||
|
|
else if(location.hash.indexOf("#/video")>=0){this.nav=61;}
|
||
|
|
else if(location.hash.indexOf("#/aiVideo")>=0){this.nav=62;}
|
||
|
|
else if(location.hash.indexOf("#/engin")>=0){this.nav=7;}
|
||
|
|
else{this.nav=1;}
|
||
|
|
this.setTitle();
|
||
|
|
this.timerID = setInterval(this.updateTime, 1000);
|
||
|
|
this.updateTime();
|
||
|
|
this.init()
|
||
|
|
this.$api.dept.list().then(d=>{
|
||
|
|
this.$root.hasInitHeader=true;
|
||
|
|
this.depts=[{text:'产发集团',id:0},...(d?.data||[]).map(it=>{
|
||
|
|
it.text=it.deptName;
|
||
|
|
it.id=it.deptId;
|
||
|
|
return it;
|
||
|
|
})]
|
||
|
|
this.deptChange();
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getWeather(){
|
||
|
|
let url=`https://widget-api.heweather.net/s6/plugin/view?key=fcd4fc1e48a144a483b7af74284229b8&location=CN101110101&lang=zh`;
|
||
|
|
this.$api.http.get(url).then(d=>{
|
||
|
|
let info=d?.data?.now||{};
|
||
|
|
this.temperature=info.tmp||20;
|
||
|
|
this.condTxt=info.cond_txt||'晴';
|
||
|
|
this.condCode=info.cond_code||100;
|
||
|
|
this.condCode=`//widget-s.qweather.net/img/plugin/190516/icon/c/${this.condCode}n.png`
|
||
|
|
});
|
||
|
|
},
|
||
|
|
toggleFullScreen(){
|
||
|
|
let el=document.body;
|
||
|
|
this.$toggleFullScreen(el);
|
||
|
|
setTimeout(()=>{
|
||
|
|
this.isFullScreen=document.fullscreenElement==el;
|
||
|
|
},400);
|
||
|
|
},
|
||
|
|
init(){
|
||
|
|
try{
|
||
|
|
this.localStorage1=JSON.parse(localStorage.getItem("data1"))
|
||
|
|
this.localStorage2=JSON.parse(localStorage.getItem("data2"))
|
||
|
|
}catch(e){
|
||
|
|
|
||
|
|
}
|
||
|
|
if(!this.localStorage1){
|
||
|
|
this.localStorage1={
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(!this.localStorage2){
|
||
|
|
this.localStorage2={}
|
||
|
|
}
|
||
|
|
this.dept1=this.localStorage1?.text||'';
|
||
|
|
this.dept2=this.localStorage2?.text||'';
|
||
|
|
if(this.dept1){
|
||
|
|
this.loadProject(true);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deptChange(){
|
||
|
|
let tmps=this.depts.filter(d=>d.text==this.dept1);
|
||
|
|
if(tmps.length>0){
|
||
|
|
this.$bus.$emit("deptChange",tmps[0])
|
||
|
|
this.$root.dept=tmps[0];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setTitle(){
|
||
|
|
let titls=['','项目概况','项目详情','安全管理','质量管理','进度管理','视频管理','工程管理']
|
||
|
|
let title=titls[this.nav];
|
||
|
|
if(title){
|
||
|
|
window.document.title=title;
|
||
|
|
}else{
|
||
|
|
window.document.title='北跨泾河-产发工程数字管理平台-大屏';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//页面条状
|
||
|
|
pageJump(n,url){
|
||
|
|
this.nav=n;
|
||
|
|
this.setTitle();
|
||
|
|
if(url){
|
||
|
|
location.href = url
|
||
|
|
}else{
|
||
|
|
this.$notify({
|
||
|
|
title: '提示',
|
||
|
|
message: '页面开发中，敬请期待！',
|
||
|
|
type: 'warning'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
showScreenUlSel1(){
|
||
|
|
this.showSel1 = true
|
||
|
|
|
||
|
|
},
|
||
|
|
showScreenUlSel2(){
|
||
|
|
this.showSel2 = true
|
||
|
|
|
||
|
|
},
|
||
|
|
hideScreenUlSel1(){
|
||
|
|
this.showSel1 = false
|
||
|
|
},
|
||
|
|
hideScreenUlSel2(){
|
||
|
|
this.showSel2 = false
|
||
|
|
},
|
||
|
|
setScreenLiSel1(item){
|
||
|
|
localStorage.setItem("data1",JSON.stringify(item))
|
||
|
|
this.localStorage1=JSON.parse(localStorage.getItem("data1"))
|
||
|
|
this.$emit('itemdata',item);
|
||
|
|
this.showSel1 = false
|
||
|
|
this.dept1=item.text;
|
||
|
|
this.deptChange();
|
||
|
|
this.loadProject();
|
||
|
|
},
|
||
|
|
loadProject(init){
|
||
|
|
this.$api.project.findProjectByDept( this.localStorage1.id).then(d=>{
|
||
|
|
let objs=(d?.data||[]).map(it=>{
|
||
|
|
it.text=it.projectName;
|
||
|
|
return it;
|
||
|
|
}).filter(it=>+it.progressVisible==0);
|
||
|
|
this.data=[{id:0,text:'所有项目'},...objs];
|
||
|
|
this.$bus.$emit("loadProjects",this.data);
|
||
|
|
this.$root.projects=this.data;
|
||
|
|
if(this.data.length>0){
|
||
|
|
this.setScreenLiSel2(this.data[0],init);
|
||
|
|
}else{
|
||
|
|
this.setScreenLiSel2(null);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
setScreenLiSel2(item,init){
|
||
|
|
if(item){
|
||
|
|
this.showSel2 = false;
|
||
|
|
if(!init){
|
||
|
|
localStorage.setItem("data2",JSON.stringify(item))
|
||
|
|
this.localStorage2=JSON.parse(localStorage.getItem("data2"))
|
||
|
|
this.$emit('itemdata',item);
|
||
|
|
this.dept2=item.text;
|
||
|
|
}
|
||
|
|
this.$root.project=this.localStorage2;
|
||
|
|
this.$bus.$emit("projectChange",this.localStorage2);
|
||
|
|
}else{
|
||
|
|
localStorage.removeItem("data2");
|
||
|
|
this.localStorage2={};
|
||
|
|
this.showSel2 = false;
|
||
|
|
this.dept2='';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
//时间方法
|
||
|
|
updateTime(){
|
||
|
|
var cd = new Date();
|
||
|
|
this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
|
||
|
|
this.date = this.zeroPadding(cd.getFullYear(), 4) + '年' + this.zeroPadding(cd.getMonth()+1, 2) + '月' + this.zeroPadding(cd.getDate(), 2)+'日';
|
||
|
|
},
|
||
|
|
zeroPadding(num, digit) {
|
||
|
|
var zero = '';
|
||
|
|
for(var i = 0; i < digit; i++) {
|
||
|
|
zero += '0';
|
||
|
|
}
|
||
|
|
return (zero + num).slice(-digit);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.main-header{
|
||
|
|
.head-title-tab{
|
||
|
|
.has-submenu{
|
||
|
|
&:hover{
|
||
|
|
.header-btn-list{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.header-btn-list{
|
||
|
|
display: none;
|
||
|
|
.header-btn-list-item{
|
||
|
|
.sub-btn{
|
||
|
|
&.active{
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|