lxf
/
baise-pc-vue


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!--
 * @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>