<!--
* @Author: your name
* @Date: 2021-01-18 15:46:34
* @LastEditTime: 2021-11-30 18:54:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \vue3-element-admin\src\views\Home.vue
-->
<template>
<Bg :active="menuType == 'znxy'" ></Bg>
<Head @selectOrganAndArea="selectOrganAndArea" @changeGarden="changeGarden" @goBack="goBack" :key="hideZnxy" :hideZnxy="hideZnxy" :menuType="menuType"></Head>
<Navigation v-if="hideZnxy && menuType == 'znxy'" @handleAct="handleAct" @select="navSelect" :val="menuType"></Navigation>
<Map ref="mapRef" v-if="menuType == 'znxy'" :tabValue="tabValue" @setHideZnxy="setHideZnxy"></Map>
<ZnxyPage v-if="hideZnxy && menuType == 'znxy'" ref="znxyRef" :tabValue="tabValue" @workerPath="workerPath" @setTreeStyle="setTreeStyle"
@nsAllot="nsAllot" @selectDay="selectDay"
></ZnxyPage>
<NsAllot v-if="menuType == 'ns_allot'"></NsAllot>
</template>
<script setup>
import {useStore} from "vuex"
import Map from "./Map";
import {onMounted, ref, onBeforeUnmount, watchEffect, provide, inject , watch, computed} from "vue";
import Head from "./Head";
import Bg from "./Bg";
import {fitExtent} from "../common/ol_common";
import ZnxyPage from "./znxy/index"
import NsAllot from "./ns_allot/index"
import Navigation from "./Navigation";
import {WKT} from "ol/format";
let store = useStore()
let state = useStore().state;
const menuType = ref("znxy")
const title = ref('智能巡园')
const mapRef = ref(null)
const znxyRef = ref(null)
const recordId = ref(null)
const recordRowData = ref(null)
let curGardenId = ref(store.getters.userinfo.curGardenId)
let hideZnxy = ref(true)
/**
* 给地图中的树设置样式
* @param style
*/
function setTreeStyle(style){
let view = mapRef.value.znxyMap.kmap.view
mapRef.value.znxyMap.setTreeStyle((f)=>{
let zoom = view.getZoom();
return style(f,zoom)
})
}
function navSelect(val,t){
title.value = t
menuType.value = val
}
function goBack(){
menuType.value = "znxy"
}
function showTreeDialog(f){
znxyRef.value.showTreeDialog(f)
}
function selectOrganAndArea({organ,area}){
if(organ){
let geom = new WKT().readGeometry(organ.point)
mapRef.value.znxyMap.fit(geom.getExtent())
}
if(area){
let geom = new WKT().readGeometry(area.wkt)
mapRef.value.znxyMap.fit(geom.getExtent())
}
}
function workerPath(e){
recordRowData.value = e
menuType.value = "grzxqk"
}
function nsAllot(){
title.value = "分配农事"
menuType.value = "ns_allot"
}
const tabValue = ref({})
const handleAct = (v) =>{
tabValue.value = v
}
function selectDay(e){
mapRef.value.znxyMap.refreshTree(curGardenId.value,e)
}
//切换果园
function changeGarden(){
let mymap = mapRef.value.znxyMap
setHideZnxy(false)
mymap.kmap.getView().fit(mymap.gardenLayer.layer.getSource().getExtent(), { duration: 1000, padding: [250, 150, 150, 150] });
}
function setHideZnxy(val){
hideZnxy.value = val
}
onMounted(()=>{
})
</script>
<style lang="scss" scoped>
.body{
min-width:1920px;
width: 100vw;
height: 100vh;
position: relative;
overflow: auto;
}
</style>