<template>
 <way-filter :level="2"  class="layer-select"/>
 <div class="goData" @click="goData">运行工作台</div>
	<div class="layer-contrl-left">
	
	<div class="layer-contrl">
	
			<ComplaintConsultation />
			<FaultEvent />
			<MeteorologicalMonitor />

			<!-- <WorkOrder /> -->
			<!-- <ElectroWorkOrder /> -->
			<!-- <EquipmentStatus /> -->
		</div>
	</div>
	<div class="layer-contrl-right">
		<AccidentRescue />
		<!-- <viodeAccidentRescue /> -->
		<LiveEventList />
		<EventStatistics />
	</div>
	<!-- <div class="layer-contrl-buttom"> -->
		<!-- <RealTimeData /> -->
	<!-- </div> -->
	<div class="layer-contrl-top">
		<MonthlyIncome />
	</div>
  <div class="layer-map">
    <Map />
  </div>
  <div class="road">
    <RoadStatus />
  </div>
</template>

<script setup>
import { generateKey } from "@/api/operation";
import WayFilter from "@/components/wayFilter/index.vue";
import {
	ComplaintConsultation,
	FaultEvent,
	MeteorologicalMonitor,

	WorkOrder,
	ElectroWorkOrder,
	EquipmentStatus,
	AccidentRescue,
	// viodeAccidentRescue,
	LiveEventList,
	EventStatistics,
	RealTimeData,
	MonthlyIncome,
  Map,
  RoadStatus,
} from './components/index.js'


// import { useStore } from "vuex";
// import { key } from "@/store";
// const store = useStore(key);
// const selectLevel = computed(() => store.state.road?.selectLevel);
// const selectRoadId = computed(() => store.state.road?.selectRoadId);
</script>
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
   goData(){
	  generateKey().then((res) => {
       window.open(`http://183.64.175.153:28880/#/QXGL/operationMonitoring/investmentStatistics?tokenKey=${res.data}`);
      });
   }
  },
}
</script>



<style lang="postcss" scoped>
.goData{
	position: absolute;
	right:0;
	top: 12px;
	margin-right: 300px;
	width: 80px;
	height: 26px;
	line-height: 24px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #a0a8bc;
	background-color: #3c74ba;
	z-index: 999;
	cursor: pointer;
}
:deep(.module-content) {
	padding: 0;
}
.layer-contrl-left, .layer-contrl-right {
	width: 400px;
	height: 100vh;
	position: absolute;
	top: 0;
	/* background-color: rgba(0, 0, 0, 0.3); */

}
.layer-contrl-left {
	left: 0;
	margin-top: 50px;
}
.layer-select{
	position: absolute;
   top: 0px;
   z-index: 99;
}
.layer-contrl {
	width: 400px;
	top: 50px;
}
.layer-contrl-right {
	right: 0;
	padding-top: 50px;
}
.layer-contrl-buttom {
	position: absolute;
	width: 400px;
	height: 200px;
	bottom:  0;
	left: 425px;
  z-index: 1;
}
.layer-contrl-top {
	position: absolute;
	top: 110px;
	left: 50%;
	transform: translate(-50%,-50%);
  z-index: 1;
}
.layer-map {
  position: absolute;
  top: 0;
  left: 400px;
  bottom: 0;
  right: 400px;
}
.road {
  position: absolute;
  left: 425px;
  top: 140px;
  z-index: 1;
}
</style>
