<template>
|
<div class="mapChart">
|
<div class="leftChart">
|
<div class="chartContent">
|
<div class="chartHeader">
|
<chartHeader></chartHeader>
|
</div>
|
<div class="chartBox">
|
<div :class="$store.state.setScreenFlag ? 'leftContentActive' : 'leftContent'
|
">
|
<map-chart></map-chart>
|
</div>
|
</div>
|
</div>
|
<!-- -->
|
<!-- -->
|
|
<!-- </div> -->
|
</div>
|
<div :class="$store.state.setScreenFlag ? 'rightMapActive' : 'rightMap'">
|
<map-view v-show="!$store.state.showImageUrl"></map-view>
|
<img v-show="$store.state.showImageUrl" :src="$store.state.ImageUrl" style="width: 100%;height:100%">
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import mapChart from "./../mapChart/index.vue";
|
import mapView from "./../mapView/index.vue";
|
import chartHeader from "./../mapChart/chartHeader.vue";
|
export default {
|
components: {
|
mapChart,
|
mapView,
|
chartHeader
|
},
|
mounted() { }
|
};
|
</script>
|
|
<style scoped>
|
.mapChart {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
overflow: hidden;
|
background: #333333;
|
}
|
|
.leftChart {
|
flex: 1;
|
z-index: 999;
|
}
|
|
.chartContent {
|
width: 100%;
|
height: 100%;
|
/* background: skyblue; */
|
display: flex;
|
flex-direction: column;
|
}
|
|
.chartHeader {
|
width: 100%;
|
height: 38px;
|
}
|
|
.chartContent .chartBox {
|
flex: 1;
|
display: flex;
|
|
/* justify-content: center; */
|
|
/*
|
height: (100% - 38px);
|
*/
|
}
|
|
.leftContent {
|
width: 100%;
|
height: 100%;
|
transition: 1s ease-out;
|
display: flex;
|
justify-content: center;
|
background: skyblue;
|
}
|
|
.leftContentActive {
|
width: 100%;
|
height: 100%;
|
transition: 1s ease-out;
|
background: skyblue;
|
}
|
|
.rightMapActive {
|
width: 50%;
|
height: 100%;
|
transition: 1s ease-out;
|
}
|
|
.rightMap {
|
width: 0%;
|
height: 100%;
|
transition: 1s;
|
}
|
|
.chartHeader {
|
width: 100%;
|
height: 38px;
|
}
|
</style>
|
