492 lines
12 KiB
Vue
492 lines
12 KiB
Vue
<template>
|
||
<div class="peak-coal-content">
|
||
<div class="container">
|
||
<div class="header-content">
|
||
<div class="text">
|
||
<p>峰煤焦化超低排放"管控治"</p>
|
||
<p class="suntitle">一体化平台</p>
|
||
</div>
|
||
<video class="video" loop muted autoplay src="/media/toubu.webm"></video>
|
||
</div>
|
||
|
||
<div class="body-content">
|
||
<!-- 左侧内容-->
|
||
<div class="left-content">
|
||
<div class="left-data-panel">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<air-quality/>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<pollutant-trends/>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<overview-pollutants/>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<check-data/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间内容-->
|
||
<div class="center-content">
|
||
<Map @pointClick="pointClick" />
|
||
<div class="container"></div>
|
||
<img class="center-bg" :src="centerBg" />
|
||
</div>
|
||
<!-- 右侧内容-->
|
||
<div class="right-content">
|
||
<div class="right-data-panel">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<energy-use/>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<enterprise-operations/>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<device-run/>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<warning-statistics/>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<latest-warning/>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-content">
|
||
<div class="div">
|
||
|
||
<div class="video-btn footer-btn" @click="showCamera = !showCamera">重点监控</div>
|
||
<div class="camera-list" v-if="showCamera">
|
||
<div class="camera-itm">
|
||
<div class="player"></div>
|
||
</div>
|
||
<div class="camera-itm">
|
||
<div class="player"></div>
|
||
</div>
|
||
<div class="camera-itm">
|
||
<div class="player"></div>
|
||
</div>
|
||
<div class="camera-itm">
|
||
<div class="player"></div>
|
||
</div>
|
||
</div>
|
||
<div class="map-filter footer-btn" @click="showFilter = !showFilter">
|
||
图例
|
||
</div>
|
||
<div class="filters" v-show="showFilter">
|
||
<div class="search">
|
||
<a-auto-complete
|
||
v-model="resourceSearchText"
|
||
:data-source="resourceList"
|
||
style="width: 100%;"
|
||
placeholder="请输入关键字"
|
||
@change="onChange"
|
||
@select="onChange"
|
||
>
|
||
<a-input>
|
||
<a-icon :style="{ fontSize: '50px', color: '#37EAFF' }" slot="suffix" type="search" class="certain-category-icon" />
|
||
</a-input>
|
||
</a-auto-complete>
|
||
</div>
|
||
<div class="filter-box">
|
||
<div @click="selectItem(item)" class="filter-item" v-for="item in mapFilters" :key="item.id" :class="{ selected: item.selected }">
|
||
<span>{{ item.label }}</span>
|
||
<span>{{ item.count }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<video class="video" loop muted autoplay src="/media/footer.webm"></video>
|
||
</div>
|
||
|
||
<div class="left-icon" />
|
||
|
||
<div class="right-icon" />
|
||
</div>
|
||
|
||
<!-- <Map />-->
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import mapFilters from "@/config/mapFilters";
|
||
const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
|
||
export default {
|
||
name: "PeakCoalView",
|
||
components: {},
|
||
data() {
|
||
return {
|
||
autoStyle: {},
|
||
centerBg,
|
||
showFilter: false,
|
||
mapFilters,
|
||
// 资源搜索内容
|
||
resourceSearchText: '',
|
||
resourceList: [],
|
||
showCamera: false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$log.info('test')
|
||
this.$log.error('test')
|
||
this.$log.trace('test')
|
||
this.$log.info('test')
|
||
this.$log.warn('test')
|
||
this.getAutoStyle()
|
||
window.addEventListener('resize', (e) => {
|
||
e.stopPropagation()
|
||
this.getAutoStyle()
|
||
}, false)
|
||
},
|
||
methods: {
|
||
/**
|
||
* 图层构造器
|
||
* @param { object } props
|
||
* @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪) zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
|
||
* @param { object } props.data 图层类型
|
||
*/
|
||
pointClick ({ layerType, data }) {
|
||
// todo
|
||
},
|
||
getAutoStyle() {
|
||
const {scale, origin} = this.getScale()
|
||
this.autoStyle = {
|
||
transform: `scale(${scale})`,
|
||
transformOrigin: origin
|
||
}
|
||
},
|
||
getScale() {
|
||
let scale = 1
|
||
let origin = 'top center'
|
||
const baseWidth = 9450
|
||
const baseHeight = 3000
|
||
const innerWidth = window.innerWidth
|
||
const innerHeight = window.innerHeight
|
||
const widthScale = innerWidth / baseWidth
|
||
const scaleHeight = baseHeight * widthScale
|
||
if (scaleHeight <= innerHeight) {
|
||
origin = 'left top'
|
||
scale = widthScale
|
||
if (scale > 1) {
|
||
origin = 'left top'
|
||
}
|
||
} else {
|
||
scale = innerHeight / baseHeight
|
||
}
|
||
return {scale, origin}
|
||
},
|
||
selectItem (item) {
|
||
item.selected = !item.selected
|
||
this.$evBus.$emit('setVisibility', item.id, item.selected)
|
||
},
|
||
onChange (text) {
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
body, html, #__nuxt, #__layout {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #000;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-enter-active, .list-leave-active {
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
.list-enter, .list-leave-to
|
||
/* .list-leave-active for below version 2.1.8 */
|
||
{
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
</style>
|
||
<style scoped lang="less">
|
||
@import "assets/styles/mixin";
|
||
|
||
.peak-coal-content {
|
||
height: 3000px;
|
||
width: 9450px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
user-select: none;
|
||
|
||
.point-none {
|
||
pointer-events: none;
|
||
}
|
||
.point {
|
||
pointer-events: auto;
|
||
}
|
||
.container {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.header-content {
|
||
position: absolute;
|
||
top: 0px;
|
||
height: 507px;
|
||
width: 100%;
|
||
z-index: 2;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-size: 116.67px;
|
||
color: #D8F0FF;
|
||
letter-spacing: 7.68px;
|
||
text-align: center;
|
||
text-shadow: 0 0 11px #000000;
|
||
font-weight: 700;
|
||
line-height: 148px;
|
||
padding-top: 110px;
|
||
.text {
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index: 1;
|
||
top: 200px;
|
||
> p {
|
||
margin: 0;
|
||
}
|
||
}
|
||
.video {
|
||
height: 464px;
|
||
width: 100%;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.suntitle {
|
||
font-size: 80px;
|
||
line-height: 100px;
|
||
}
|
||
|
||
}
|
||
.body-content {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
|
||
.left-content {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 136px;
|
||
width: 2935px;
|
||
height: 2721px;
|
||
.bg("~/assets/peakCoalImages/left/left-content-bg.png", center, 60px);
|
||
padding: 300px 476px 100px 412px;
|
||
perspective: 1000px;
|
||
z-index: 2;
|
||
.left-data-panel {
|
||
height: 100%;
|
||
width: 100%;
|
||
transform: rotateY(2deg) ;
|
||
transform-origin: left center;
|
||
}
|
||
}
|
||
|
||
.right-content {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 136px;
|
||
width: 2935px;
|
||
height: 2721px;
|
||
.bg("~/assets/peakCoalImages/right/right-content-bg.png", center, 60px);
|
||
padding: 300px 476px 100px 480px;
|
||
perspective: 1000px;
|
||
z-index: 2;
|
||
|
||
.right-data-panel {
|
||
height: 100%;
|
||
width: 100%;
|
||
transform: rotateY(-2deg);
|
||
transform-origin: right center;
|
||
}
|
||
}
|
||
|
||
.center-content {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 411px;
|
||
transform: translateX(-50%);
|
||
width: 4383px;
|
||
height: 2628px;
|
||
z-index: 1;
|
||
.container {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: -384px;
|
||
height: 3000px;
|
||
width: 9450px;
|
||
.bg("~/assets/peakCoalImages/bg.png");
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
|
||
}
|
||
.center-bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 3;
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-content {
|
||
position: absolute;
|
||
bottom: -44px;
|
||
width: 100%;
|
||
height: 220px;
|
||
z-index: 2;
|
||
.div {
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index: 1;
|
||
}
|
||
.video {
|
||
height: 220px;
|
||
width: 100%;
|
||
object-fit: fill;
|
||
}
|
||
.footer-btn {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 66px;
|
||
font-family: AlimamaShuHeiTi-Bold;
|
||
font-size: 50px;
|
||
color: #D8F0FF;
|
||
letter-spacing: 3.29px;
|
||
text-shadow: 0 0 25px rgba(0,145,255,0.50);
|
||
font-weight: 700;
|
||
padding-left: 120px;
|
||
&.map-filter {
|
||
right: 3062px;
|
||
background: url('~/assets/images/map/filter/导航-点位.png') left center no-repeat;
|
||
background-size: 106px 111px;
|
||
}
|
||
|
||
&.video-btn {
|
||
left: 3014px;
|
||
background: url('~/assets/images/map/filter/导航-监控.png') left center no-repeat;
|
||
background-size: 106px 111px;
|
||
}
|
||
}
|
||
|
||
.camera-list {
|
||
position: absolute;
|
||
width: 2332px;
|
||
bottom: -40px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
height: 370px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.camera-itm {
|
||
padding: 14px;
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
width: 524px;
|
||
background-image: linear-gradient(61deg, rgba(8,31,55,0.80) 0%, rgba(18,50,81,0.80) 100%);
|
||
.player {
|
||
background-color: #000;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filters {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 1470px * 2;
|
||
width: 528px;
|
||
.search {
|
||
height: 142px;
|
||
background: rgba(20, 64, 114, 0.7);
|
||
border: 1px solid rgba(31, 97, 173, 0.84);
|
||
::v-deep {
|
||
.ant-select-auto-complete.ant-select .ant-input {
|
||
height: 142px;
|
||
font-family: MicrosoftYaHei-Bold;
|
||
font-size: 50px;
|
||
color: #37EAFF;
|
||
letter-spacing: 0;
|
||
line-height: 34.25px;
|
||
font-weight: 700;
|
||
}
|
||
.ant-select-selection {
|
||
background: transparent;
|
||
}
|
||
.ant-select-selection__rendered {
|
||
line-height: 142px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-box {
|
||
margin-top: 20px;
|
||
background: rgba(20, 64, 114, 0.7);
|
||
border: 1px solid rgba(31, 97, 173, 0.84);
|
||
padding: 0 40px 40px;
|
||
box-sizing: border-box;
|
||
.filter-item {
|
||
font-family: MicrosoftYaHei;
|
||
font-size: 38.89px;
|
||
color: rgba(255, 255, 255, 0.55);
|
||
letter-spacing: 2.56px;
|
||
font-weight: 400;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 52px;
|
||
line-height: 52px;
|
||
margin-top: 40px;
|
||
cursor: pointer;
|
||
&.selected {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.left-icon {
|
||
z-index: 2;
|
||
position: absolute;
|
||
left: 0px;
|
||
width: 531px;
|
||
height: 100%;
|
||
.bg("~/assets/peakCoalImages/left/left-icon.png", center, center);
|
||
}
|
||
|
||
.right-icon {
|
||
z-index: 2;
|
||
position: absolute;
|
||
right: 0px;
|
||
width: 531px;
|
||
height: 100%;
|
||
.bg("~/assets/peakCoalImages/right/right-icon.png", center, center);
|
||
}
|
||
}
|
||
</style>
|