362 lines
8.4 KiB
Vue
362 lines
8.4 KiB
Vue
<template>
|
|
<div class="peak-coal-content">
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<p>峰煤焦化超低排放"管控治"</p>
|
|
<p class="suntitle">一体化平台</p>
|
|
</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 />
|
|
<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="video-btn footer-btn">重点监控</div>
|
|
<div class="map-filter footer-btn" @click="showFilter = !showFilter">
|
|
图例
|
|
</div>
|
|
<div class="filters" v-show="showFilter">
|
|
<div class="search"></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>
|
|
|
|
<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
|
|
}
|
|
},
|
|
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: {
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
</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%;
|
|
.bg("~/assets/peakCoalImages/header/first-title-bg.png");
|
|
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;
|
|
> p {
|
|
margin: 0;
|
|
}
|
|
.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;
|
|
.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;
|
|
|
|
.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;
|
|
.center-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-content {
|
|
position: absolute;
|
|
bottom: -44px;
|
|
width: 100%;
|
|
height: 220px;
|
|
.bg("~/assets/peakCoalImages/footer/footer-bg.webp", center, center);
|
|
z-index: 2;
|
|
.footer-btn {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 84px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.filters {
|
|
position: absolute;
|
|
bottom: 240px;
|
|
right: 1470px * 2;
|
|
width: 528px;
|
|
.search {
|
|
height: 142px;
|
|
background: rgba(20, 64, 114, 0.7);
|
|
border: 1px solid rgba(31, 97, 173, 0.84);
|
|
}
|
|
|
|
.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 {
|
|
position: absolute;
|
|
left: 0px;
|
|
width: 531px;
|
|
height: 100%;
|
|
.bg("~/assets/peakCoalImages/left/left-icon.png", center, center);
|
|
}
|
|
|
|
.right-icon {
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 531px;
|
|
height: 100%;
|
|
.bg("~/assets/peakCoalImages/right/right-icon.png", center, center);
|
|
}
|
|
}
|
|
</style>
|