<template>
|
<div class="main-container" :style="{ zoom: zoom_main }" id="screencontent">
|
<div class="screen1-place" v-if="false"></div>
|
<div class="itm-map" @click="toArea01">
|
<itm-map-item
|
v-for="(item, index) in itmmapdatas"
|
:item="item"
|
:key="index"
|
:no="index"
|
></itm-map-item>
|
|
<!-- v-if="item_show" -->
|
</div>
|
<div class="chart-itm">
|
<itm
|
v-if="areas && !chartclose1"
|
:areas="areas"
|
:switchDeviceStatus="switchDeviceStatus"
|
:switchInfo="switchInfo"
|
:chartclose="chartclose1"
|
@show="chartclose1 = true"
|
@refresh="getSwitchInfoStatic"
|
:key="componentKey"
|
></itm>
|
<itm-left
|
v-if="areas && !chartclose2"
|
:areas="areas"
|
:chartclose="chartclose2"
|
@show="chartclose2 = true"
|
></itm-left>
|
<div
|
v-if="true && areas && chartclose1"
|
class="chart-open chart-open-right"
|
@click="chartclose1 = false"
|
>
|
<div class="img-button"></div>
|
</div>
|
<div
|
v-if="true && areas && chartclose2"
|
class="chart-open chart-open-left"
|
@click="chartclose2 = false"
|
>
|
<div class="img-button"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import itm from "./itm.vue";
|
import itmLeft from "./itm-left.vue";
|
import {itmmapdata} from "./itm-map.js";
|
import itmMapItem from "./itm-map-item.vue";
|
import {getAreaTjData, getSwitchStatusStatic, getSwitchInfoStatic} from "@/api/area";
|
|
export default {
|
components: {itmMapItem, itm, itmLeft},
|
props: {
|
item_show: true,
|
item1_show: false,
|
},
|
data() {
|
return {
|
itmmapdatas: itmmapdata,
|
websocket: null,
|
zoom_main: 0.9,
|
lineServerMap: {},
|
areas: undefined,
|
chartclose1: false,
|
chartclose2: false,
|
switchDeviceStatus: {},
|
switchInfo:{},
|
componentKey:0,
|
};
|
},
|
created() {
|
var zoom = this.$route.query.zoom;
|
console.log(this.$route, this.$router);
|
if (zoom) {
|
this.zoom_main = parseFloat(zoom);
|
}
|
this.getList();
|
},
|
|
methods: {
|
getList() {
|
getAreaTjData().then((res) => {
|
// console.log('areas',res.switchAreaInfo || [])
|
this.areas = res.switchAreaInfo || [];
|
});
|
getSwitchStatusStatic().then(res => {
|
// console.log('getSwitchStatusStatic',res.switchDeviceStatus)
|
this.switchDeviceStatus = {}
|
if (res.switchDeviceStatus) {
|
for (var item of res.switchDeviceStatus) {
|
this.switchDeviceStatus[item.type] = item
|
}
|
}
|
})
|
getSwitchInfoStatic().then(res => {
|
this.switchInfo = res
|
})
|
// this.getSwitchInfoStatic()
|
},
|
|
getSwitchInfoStatic(){
|
getSwitchInfoStatic().then(res => {
|
this.switchInfo = res
|
})
|
this.componentKey+=1
|
},
|
|
handleWheel(event) {
|
event.preventDefault();
|
const delta = event.deltaY < 0 ? 0.05 : -0.05;
|
this.zoom_main += delta;
|
if (this.zoom_main < 0.4) {
|
this.zoom_main = 0.4;
|
}
|
},
|
toArea01() {
|
// this.$router.push({ path: "/area", query: { code: "01" } });
|
},
|
backToTop() {
|
this.$router.push({path: "/"});
|
},
|
},
|
|
mounted() {
|
const content = document.getElementById("screencontent");
|
content && content.addEventListener("wheel", this.handleWheel);
|
},
|
beforeDestroy() {
|
// 组件销毁前断开WebSocket连接
|
},
|
destroyed() {
|
const content = document.getElementById("screencontent");
|
|
content && content.removeEventListener("wheel", this.handleWheel);
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
$width-screen1: 174.17rem;
|
$width-screen1: 214.17rem;
|
|
.main-container {
|
position: fixed;
|
right: calc(5rem);
|
top: calc($height-header - 6rem);
|
left: calc((100% - $width-screen1 - 10rem - 18rem) / 2);
|
left: 0;
|
right: 0;
|
/* background-color: rgba(209, 227, 247, 1); */
|
z-index: 2;
|
|
.screen1-place {
|
width: calc($width-screen1 + 10rem);
|
background-size: 100% 100%;
|
width: $width-screen1;
|
height: 88.3rem;
|
background-image: url("../../assets/screen/screen1/screen-place.png");
|
}
|
|
.itm-map {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
width: calc($width-screen1 - 11rem);
|
height: 88.3rem;
|
margin: 0 auto;
|
/* margin-left: calc(-9.1rem * 0.9 - 11rem*0.9 - 1rem); */
|
margin-left: 50%;
|
transform: translate(-50%, 0%);
|
zoom: 0.8;
|
display: inline-block;
|
cursor: pointer;
|
}
|
|
.chart-itm {
|
zoom: 0.8;
|
}
|
|
.chart-open {
|
width: 6.1rem;
|
height: 7.5rem;
|
background: #e9f4fd;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.83),
|
inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
|
border-radius: 1rem;
|
position: fixed;
|
right: 3rem;
|
top: 50%;
|
transform: translate(0%, 50%);
|
cursor: pointer;
|
|
.img-button {
|
background-size: 100% 100%;
|
background-image: url("../../assets/area/chart-open.svg");
|
width: 2.6rem;
|
height: 2.6rem;
|
transform: translate(-50%, -50%);
|
left: 50%;
|
top: 50%;
|
position: absolute;
|
}
|
}
|
|
.chart-open-left {
|
left: 3rem;
|
}
|
|
.chart-open-right {
|
}
|
}
|
</style>
|
|
<style scoped lang="scss">
|
.back-button-left-bottom {
|
width: 11.6rem;
|
height: 3.9rem;
|
background: #6eb3ff;
|
border-radius: 0.4rem;
|
border: 0.2rem solid #278afa;
|
font-size: 1.6rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #ffffff;
|
line-height: 3.9rem;
|
position: fixed;
|
right: 3rem;
|
top: calc(100vh - 20rem);
|
cursor: pointer;
|
z-index: 99;
|
}
|
</style>
|
