<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:24
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-20 16:57:56
|
* @FilePath: \web\bigScreen\src\views\layout\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<template>
|
<div class="wrapper">
|
<map-box ref="modalForm" :curMap="curMap">
|
<!-- 主体内容区域 -->
|
<div slot="mainContent" class="main-content" id="MainContent">
|
<div class="main-header">
|
<div class="title">智慧水库平台</div>
|
</div>
|
|
<div class="main-container">
|
<!-- 地图区域 -->
|
<router-view ref="target-name"></router-view>
|
</div>
|
</div>
|
</map-box>
|
<div class="page-logout" @click="goOperationPlatform"></div>
|
<div class="page-search" v-if="!showBack">
|
<el-input
|
size="medium"
|
placeholder="请输入内容"
|
suffix-icon="el-icon-search"
|
@change="onSearch()"
|
v-model="searchVal"
|
></el-input>
|
</div>
|
<div class="page-search page-select" v-if="!showBack">
|
<el-cascader
|
size="medium"
|
v-model="value"
|
:options="options"
|
popper-class="select-popup"
|
:show-all-levels="false"
|
@change="selectChange"
|
></el-cascader>
|
</div>
|
<div class="page-search page-full" @click="changeFullscreen">
|
<i class="el-icon-rank"></i>
|
{{ fullscreen ? '缩小' : '全屏' }}
|
</div>
|
<div class="page-search page-mode">
|
<div :class="{ active: modeActive == 0 }" @click="modeChange(0, 'home')">综合态势感知</div>
|
<div :class="{ active: modeActive == 1 }" @click="modeChange(1, 'home2')">防汛值班</div>
|
</div>
|
|
<div class="page-map map-list" v-show="mapListShow">
|
<div
|
v-for="(item, index) in mapOptions"
|
:key="index"
|
:class="{ on: currentMap(item)}"
|
@click="pageMapClick(item)"
|
>
|
<img :src="item.img" alt />
|
<span>{{ item.name }}</span>
|
</div>
|
</div>
|
|
<div class="page-map">
|
<div class="on" @click="mapListShow = !mapListShow">
|
<img :src="mapOptions.filter(item => item.name == curMap)[0].img" alt />
|
<span>{{ mapOptions.filter(item => item.name == curMap)[0].name }}</span>
|
</div>
|
</div>
|
|
<div class="page-search page-section">
|
<el-collapse v-model="activeSection" @change="handleChange" accordion>
|
<el-collapse-item
|
v-for="item in sectionList"
|
:key="item.title"
|
:title="item.title"
|
:name="item.title"
|
>
|
<template slot="title">
|
<div class="title-wrap">
|
<img
|
class="title-img"
|
:src="activeSection == item.title ? item.iconActive : item.icon"
|
alt
|
/>
|
<span>{{ item.title }}</span>
|
</div>
|
</template>
|
<div class="check-item">
|
<el-checkbox
|
:indeterminate="item.isIndeterminate"
|
v-model="item.checkAll"
|
@change="handleCheckAllChange($event, item)"
|
>全选</el-checkbox>
|
</div>
|
<el-checkbox-group
|
v-model="item.checkedCities"
|
@change="handleCheckedCitiesChange($event, item)"
|
>
|
<el-checkbox
|
class="check-item"
|
v-for="child in item.children"
|
:label="child.title"
|
:key="child.title"
|
>
|
<img
|
class="title-img"
|
:src="child.checked == true ? child.iconActive : child.icon"
|
alt
|
/>
|
<span>{{ child.title }}</span>
|
</el-checkbox>
|
<!-- <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox> -->
|
</el-checkbox-group>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
<div class="page-back page-search" v-if="showBack" @click="goToHome">
|
<img src="images/back.png" alt />
|
<div>红卫水库</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
fullscreen: false, //是否全屏
|
searchVal: "", //搜索值
|
modeActive: 0, //底部切换
|
showBack: false, //是否显示返回
|
options: [
|
{
|
value: "zhinan",
|
label: "指南",
|
children: [
|
{
|
value: "shejiyuanze",
|
label: "设计原则",
|
children: [
|
{
|
value: "yizhi",
|
label: "一致"
|
},
|
{
|
value: "fankui",
|
label: "反馈"
|
},
|
{
|
value: "xiaolv",
|
label: "效率"
|
},
|
{
|
value: "kekong",
|
label: "可控"
|
}
|
]
|
},
|
{
|
value: "daohang",
|
label: "导航",
|
children: [
|
{
|
value: "cexiangdaohang",
|
label: "侧向导航"
|
},
|
{
|
value: "dingbudaohang",
|
label: "顶部导航"
|
}
|
]
|
}
|
]
|
}
|
],
|
activeSection: "水库",
|
sectionList: [
|
// {
|
// title: '综合监测',
|
// icon: require('./../../../public/check/zhjc.png'),
|
// iconActive: require('./../../../public/check/zhjcAc.png'),
|
// checkedCities: [],
|
// isIndeterminate: false,
|
// checkAll: false,
|
// children: [
|
// {
|
// title: '综合监测1',
|
// parentTitle: '综合监测',
|
// checked: false,
|
// icon: require('./../../../public/check/zhjc.png'),
|
// iconActive: require('./../../../public/check/zhjcAc.png'),
|
// },
|
|
// {
|
// title: '监控视频',
|
// parentTitle: '综合监测',
|
// checked: false,
|
// icon: require('./../../../public/check/monitoring.png'),
|
// iconActive: require('./../../../public/check/monitoringAc.png'),
|
// },
|
// {
|
// title: '变形监测',
|
// parentTitle: '综合监测',
|
// checked: false,
|
// icon: require('./../../../public/check/bxjc.png'),
|
// iconActive: require('./../../../public/check/bxjcAc.png'),
|
// }
|
// ]
|
// },
|
// {
|
// title: '综合监测',
|
// icon: require('./../../../public/check/zhjc.png'),
|
// iconActive: require('./../../../public/check/zhjcAc.png'),
|
// checkedCities: [],
|
// isIndeterminate: false,
|
// checkAll: false,
|
// children: [
|
// {
|
// title: '综合监测1',
|
// parentTitle: '综合监测',
|
// checked: false,
|
// icon: require('./../../../public/check/zhjc.png'),
|
// iconActive: require('./../../../public/check/zhjcAc.png'),
|
// }
|
// ]
|
// },
|
// {
|
// title: '大坝全景',
|
// icon: require('./../../../public/check/db.png'),
|
// iconActive: require('./../../../public/check/dbAc.png'),
|
// checkedCities: [],
|
// isIndeterminate: false,
|
// checkAll: false,
|
// children: [
|
// {
|
// title: '大坝全景1',
|
// parentTitle: '大坝全景',
|
// checked: false,
|
// icon: require('./../../../public/check/db.png'),
|
// iconActive: require('./../../../public/check/dbAc.png'),
|
// }
|
// ]
|
// },
|
{
|
title: "水库",
|
icon: require("./../../../public/images/section_01.png"),
|
iconActive: require("./../../../public/images/sectionAc_01.png"),
|
checkedCities: [],
|
isIndeterminate: false,
|
checkAll: false,
|
children: [
|
{
|
eng_scal: 5,
|
title: "小二型",
|
parentTitle: "水库",
|
checked: false,
|
icon: require("./../../../public/check/small-skAc.png"),
|
iconActive: require("./../../../public/check/small-skAc.png")
|
},
|
{
|
eng_scal: 4,
|
title: "小一型",
|
parentTitle: "水库",
|
checked: false,
|
icon: require("./../../../public/check/small-skAc.png"),
|
iconActive: require("./../../../public/check/small-skAc.png")
|
},
|
{
|
eng_scal: 3,
|
title: "中型",
|
parentTitle: "水库",
|
checked: false,
|
icon: require("./../../../public/check/mid-skAc.png"),
|
iconActive: require("./../../../public/check/mid-skAc.png")
|
},
|
{
|
eng_scal: 2,
|
title: "大二型",
|
parentTitle: "水库",
|
checked: false,
|
icon: require("./../../../public/check/big-skAc.png"),
|
iconActive: require("./../../../public/check/big-skAc.png")
|
},
|
{
|
eng_scal: 1,
|
title: "大一型",
|
parentTitle: "水库",
|
checked: false,
|
icon: require("./../../../public/check/big-skAc.png"),
|
iconActive: require("./../../../public/check/big-skAc.png")
|
}
|
]
|
},
|
{
|
title: "水雨情测站",
|
icon: require("./../../../public/images/section_01.png"),
|
iconActive: require("./../../../public/images/sectionAc_01.png"),
|
checkedCities: [],
|
isIndeterminate: false,
|
checkAll: false,
|
children: []
|
},
|
{
|
title: "安全监测站",
|
icon: require("./../../../public/images/section_01.png"),
|
iconActive: require("./../../../public/images/sectionAc_01.png"),
|
checkedCities: [],
|
isIndeterminate: false,
|
checkAll: false,
|
children: [
|
{
|
title: "全部",
|
parentTitle: "安全监测站",
|
checked: false,
|
icon: require("./../../../public/images/section_01.png"),
|
iconActive: require("./../../../public/images/sectionAc_01.png")
|
},
|
{
|
title: "应力应变",
|
parentTitle: "安全监测站",
|
checked: false,
|
icon: require("./../../../public/check/ylyb.png"),
|
iconActive: require("./../../../public/check/ylybAc.png")
|
},
|
{
|
title: "渗流监测",
|
parentTitle: "安全监测站",
|
checked: false,
|
icon: require("./../../../public/check/ylyb.png"),
|
iconActive: require("./../../../public/check/ylybAc.png")
|
},
|
{
|
title: "渗压监测",
|
parentTitle: "安全监测站",
|
checked: false,
|
icon: require("./../../../public/check/ylyb.png"),
|
iconActive: require("./../../../public/check/ylybAc.png")
|
}
|
]
|
},
|
{
|
title: "监控视频",
|
icon: require("./../../../public/check/monitoring.png"),
|
iconActive: require("./../../../public/check/monitoringAc.png"),
|
checkedCities: [],
|
isIndeterminate: false,
|
checkAll: false,
|
children: []
|
}
|
],
|
mapOptions: [
|
{
|
img: "/bigScreen/images/SL.png",
|
name: "矢量"
|
},
|
{
|
img: "/bigScreen/images/YX.png",
|
name: "影像"
|
}
|
],
|
curMap: "矢量",
|
mapListShow: false
|
};
|
},
|
watch: {
|
$route: {
|
handler(val) {
|
if (val.path == "/layout/home3") {
|
this.showBack = true;
|
} else {
|
this.showBack = false;
|
|
if (val.path == "/layout/home") {
|
this.modeActive = 0;
|
} else {
|
this.modeActive = 1;
|
}
|
}
|
},
|
|
immediate: true
|
}
|
},
|
|
computed: {
|
currentMap() {
|
return item => {
|
return this.curMap == item.name;
|
};
|
}
|
},
|
created() {
|
if (this.$route.path == "/layout/home3") {
|
this.showBack = true;
|
}
|
},
|
methods: {
|
onSearch() {},
|
selectChange(val) {},
|
changeFullscreen() {
|
if (this.fullscreen) {
|
this.exitFullScreen();
|
return;
|
}
|
this.requestFullscreen();
|
},
|
modeChange(idx, path) {
|
if (this.modeActive == idx) return;
|
this.modeActive = idx;
|
this.$router.push({
|
path: "/layout/" + path
|
});
|
},
|
requestFullscreen() {
|
const docElm = document.documentElement;
|
if (docElm.requestFullscreen) {
|
docElm.requestFullscreen();
|
} else if (docElm.msRequestFullscreen) {
|
docElm.msRequestFullscreen();
|
} else if (docElm.mozRequestFullScreen) {
|
docElm.mozRequestFullScreen();
|
} else if (docElm.webkitRequestFullScreen) {
|
docElm.webkitRequestFullScreen();
|
}
|
this.fullscreen = true;
|
},
|
exitFullScreen() {
|
if (document.exitFullscreen) {
|
document.exitFullscreen();
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen();
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen();
|
} else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen();
|
}
|
this.fullscreen = false;
|
},
|
|
pageMapClick(item) {
|
if (this.curMap == item.name) return;
|
this.curMap = item.name;
|
},
|
|
goOperationPlatform() {
|
window.open("https://sk.hubeishuiyi.cn/business/#/overview/index");
|
},
|
|
handleCheckAllChange(val, item) {
|
item.checkedCities = val ? item.children.map(item => item.title) : [];
|
item.isIndeterminate = false;
|
|
// 选中
|
if (val == true) {
|
this.$refs.modalForm.addSiteAllLayer(item);
|
} else {
|
this.$refs.modalForm.removeSiteAllLayer(item);
|
}
|
},
|
|
handleCheckedCitiesChange(value, item) {
|
console.log(value);
|
|
let checkedCount = value.length;
|
item.checkAll = checkedCount === item.children.length;
|
item.isIndeterminate =
|
checkedCount > 0 && checkedCount < item.children.length;
|
|
// 选中
|
if (value.length > 0) {
|
console.log(value, item, 864);
|
this.$refs.modalForm.addSiteLayer(value, item);
|
} else {
|
this.$refs.modalForm.removeSiteLayer(value, item);
|
}
|
},
|
|
goToHome() {
|
this.$router.push({ path: "/layout/home" });
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
$bg-blue: rgba(24, 33, 92, 0.9);
|
|
.wrapper {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
#MainContent {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 99;
|
}
|
|
.main-content {
|
height: 1080px;
|
background: url(/bigScreen/images/header.png) no-repeat center / 100% 100%,
|
url(/bigScreen/images/pro-bg.png) no-repeat center / 100% 100%;
|
|
pointer-events: none;
|
|
.main-header {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 68px;
|
pointer-events: auto;
|
|
.title {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 456px;
|
height: 40px;
|
font-size: 32px;
|
font-family: YouSheBiaoTiHei;
|
font-weight: 400;
|
color: #eff8fc;
|
line-height: 35px;
|
text-align: center;
|
letter-spacing: 8px;
|
font-weight: bolder;
|
background: linear-gradient(to bottom, #e2eaf0 0%, #aed1f1 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
// opacity: 0.89;
|
// text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
|
|
// background: linear-gradient(0deg, rgba(119, 186, 255, 0.45) 0%, rgba(233, 248, 255, 0.45) 73.3154296875%, rgba(255, 255, 255, 0.45) 100%);
|
// -webkit-background-clip: text;
|
// -webkit-text-fill-color: transparent;
|
}
|
}
|
|
.main-container {
|
position: absolute;
|
top: 68px;
|
left: 50px;
|
right: 50px;
|
bottom: 40px;
|
}
|
}
|
}
|
</style>
|
