238 lines
6.1 KiB
Vue
238 lines
6.1 KiB
Vue
<template>
|
||
<div class="big-head-wrap">
|
||
<div class="left-wrap">
|
||
<!-- <i class="el-icon-map-location"></i>
|
||
<span class="span-info">全国</span>-->
|
||
<!-- <el-cascader :options="treeList" :props="{ checkStrictly: true }" clearable></el-cascader> -->
|
||
<treeselect
|
||
class="tree-select-wrap"
|
||
v-model="treeValue"
|
||
@select="handleTreeChange"
|
||
:options="treeList"
|
||
placeholder="全国"
|
||
v-show="tempUserType !== 'PERSONAL'"
|
||
/>
|
||
<el-select
|
||
v-show="tempUserType !== 'PERSONAL'"
|
||
v-model="inputValue"
|
||
size="small"
|
||
filterable
|
||
placeholder="项目名称"
|
||
clearable
|
||
:popper-append-to-body="false"
|
||
>
|
||
<el-option
|
||
v-for="item in projectList"
|
||
:key="item.projectId"
|
||
:label="item.projectName"
|
||
:value="item.projectId"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="title-wrap">{{handelTile}}</div>
|
||
<div class="right-wrap">
|
||
<span>{{days}}</span>
|
||
<span>{{weeks}}</span>
|
||
<span>{{time}}</span>
|
||
<!-- <el-button type="text" @click="signOut" title="退出大屏" plain icon="iconfont icontuichu"></el-button> -->
|
||
<el-button
|
||
type="text"
|
||
@click="fullScreen"
|
||
:title="fullscreen ? '退出全屏':'全屏' "
|
||
plain
|
||
:icon="fullscreen ? 'iconfont iconshousuo':'iconfont iconquanping1'"
|
||
></el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { treeListRegionalism } from "@/api/system/regionalism";
|
||
import Treeselect from "@riophae/vue-treeselect";
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
export default {
|
||
name: "EHead",
|
||
props: ["handelTile", "projectList"],
|
||
components: {
|
||
Treeselect
|
||
},
|
||
data() {
|
||
return {
|
||
inputValue: "",
|
||
days: "",
|
||
weeks: "",
|
||
time: "",
|
||
treeList: [],
|
||
treeValue: null,
|
||
tempUserType: null,
|
||
fullscreen: false
|
||
};
|
||
},
|
||
mounted() {
|
||
setInterval(this.getDate, 1000);
|
||
},
|
||
created() {
|
||
this.tempUserType = this.$store.getters.userType;
|
||
this.treeListRegionalism();
|
||
this.getDate();
|
||
},
|
||
watch: {
|
||
inputValue(val) {
|
||
this.$emit("eventProjectId", val);
|
||
},
|
||
treeValue(val) {
|
||
// this.$emit("eventRegionalismId", val);
|
||
}
|
||
},
|
||
methods: {
|
||
handleTreeChange(e, v) {
|
||
console.log('handleTreeChange--', e);
|
||
this.$emit("eventRegionalism", e);
|
||
},
|
||
// 退出大屏 默认进入项目首页
|
||
signOut() {
|
||
this.$router.push("/");
|
||
},
|
||
fullScreen() {
|
||
// let element = document.getElementsByClassName("big-head-wrap"); //设置后就是 id==con_lf_top_div 的容器全屏
|
||
let element = document.getElementById("con_lf_top_div"); //设置后就是 id==con_lf_top_div 的容器全屏
|
||
if (this.fullscreen) {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
} else if (document.webkitCancelFullScreen) {
|
||
document.webkitCancelFullScreen();
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen();
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen();
|
||
}
|
||
} else {
|
||
if (element.requestFullscreen) {
|
||
element.requestFullscreen();
|
||
} else if (element.webkitRequestFullScreen) {
|
||
element.webkitRequestFullScreen();
|
||
} else if (element.mozRequestFullScreen) {
|
||
element.mozRequestFullScreen();
|
||
} else if (element.msRequestFullscreen) {
|
||
// IE11
|
||
element.msRequestFullscreen();
|
||
}
|
||
}
|
||
this.fullscreen = !this.fullscreen;
|
||
this.$emit("eventFullscreen", { value: this.fullscreen });
|
||
},
|
||
treeListRegionalism() {
|
||
treeListRegionalism({}).then(res => {
|
||
this.treeList = res.data;
|
||
});
|
||
},
|
||
getDate() {
|
||
this.weeks = this.parseTime(new Date(), "星期{a}");
|
||
this.days = this.parseTime(new Date(), "{y}-{m}-{d}");
|
||
this.time = this.parseTime(new Date(), "{h}:{i}:{s}");
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.big-head-wrap {
|
||
height: 72px;
|
||
//padding-bottom: 10px;
|
||
width: 100%;
|
||
display: flex;
|
||
background-image: url("../../../../assets/images/big/v3/head.png");
|
||
background-size: cover;
|
||
.left-wrap {
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
// color: #fff;
|
||
font-size: 14px;
|
||
align-items: flex-end;
|
||
justify-content: left;
|
||
padding-left: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
> i {
|
||
line-height: 1.5;
|
||
}
|
||
.span-info {
|
||
display: block;
|
||
width: 70px;
|
||
margin-left: 5px;
|
||
}
|
||
.el-input {
|
||
min-width: 150px;
|
||
}
|
||
.el-input--small .el-input__inner {
|
||
// line-height: 36px;
|
||
background: #ff000000;
|
||
border-color: #007598;
|
||
border-color: #153678;
|
||
color: #fff;
|
||
margin-left: 10px;
|
||
}
|
||
.el-input__prefix {
|
||
top: -4px;
|
||
}
|
||
.tree-select-wrap {
|
||
height: 32px;
|
||
.vue-treeselect__control {
|
||
background: #fff0;
|
||
border-color: #007598;
|
||
border-color: #153678;
|
||
height: 32px;
|
||
}
|
||
.vue-treeselect__single-value {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.title-wrap {
|
||
color: #fff;
|
||
width: calc(100% - 40%);
|
||
display: flex;
|
||
font-size: 36px;
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 500;
|
||
letter-spacing: 2px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 36px;
|
||
/* font-weight: bold; */
|
||
//color: #66FFFF;
|
||
line-height: 18px;
|
||
letter-spacing: 8px;
|
||
}
|
||
.right-wrap {
|
||
width: 20%;
|
||
display: flex;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
justify-content: space-around;
|
||
align-items: flex-end;
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 400;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
margin-right: 30px;
|
||
.el-button--text {
|
||
border: 1px solid;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 5px 0;
|
||
padding-top: 6px;
|
||
font-size: 16px;
|
||
color: #00f7f8;
|
||
.el-icon-setting {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.el-button--text：hover {
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|