|
@@ -1,103 +1,107 @@
|
|
|
<template>
|
|
|
- <div class="base-container no-events">
|
|
|
- <fnHeader showDate></fnHeader>
|
|
|
- <div class="content">
|
|
|
- <navigation></navigation>
|
|
|
- <div class="left yes-events">
|
|
|
- <tool-list
|
|
|
- direction="left"
|
|
|
- :list="leftToolList"
|
|
|
- @handleActive="handleActiveLeft"
|
|
|
- ></tool-list>
|
|
|
- <component :is="components[currentComponent]" />
|
|
|
- </div>
|
|
|
- <div class="home-bottom">
|
|
|
- <div class="log-box yes-events">
|
|
|
- <chart-box class="overflow">
|
|
|
- <template #title-name>
|
|
|
- <div class="box-name" @click="handleSelectArea">果园日志</div>
|
|
|
- </template>
|
|
|
- <div class="log-content">
|
|
|
- 2月13日,共抽样193棵树,拍摄了193张照片,{{indicatorChartData.content}}
|
|
|
- </div>
|
|
|
- <div class="chart-wrap">
|
|
|
- <indicator-chart :key="0 + 'log'" type="feature" :chartData="indicatorChartData"></indicator-chart>
|
|
|
- <!-- <img class="line" src="@/assets/images/home/time1.png" alt=""> -->
|
|
|
- <!-- <img src="@/assets/images/home/text.png" alt=""> -->
|
|
|
- </div>
|
|
|
- </chart-box>
|
|
|
- </div>
|
|
|
- <div class="file-box yes-events">
|
|
|
- <chart-box name="果园档案">
|
|
|
- <template #title-right>
|
|
|
- <el-icon class="arrow-icon cursor-pointer" color="#141414"
|
|
|
- ><DArrowLeft
|
|
|
- /></el-icon>
|
|
|
- <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
|
|
|
- </template>
|
|
|
- <!-- <file-bar></file-bar> -->
|
|
|
- <img src="@/assets/images/home/line-data.png" alt="">
|
|
|
- </chart-box>
|
|
|
+ <div class="base-container no-events">
|
|
|
+ <fnHeader showDate></fnHeader>
|
|
|
+ <div class="back btn yes-evetns" @click="goBack">
|
|
|
+ <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
|
|
|
+ <span>返回</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="right yes-events">
|
|
|
- <div class="list">
|
|
|
- <chart-box name="农事列表" arrow="arrow-left" :class="{'list-wrap': rightIndex===0}">
|
|
|
- <template v-if="rightIndex===0">
|
|
|
- <album></album>
|
|
|
- <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
|
|
|
+ <div class="content">
|
|
|
+ <!-- <navigation></navigation> -->
|
|
|
+ <div class="left yes-events">
|
|
|
+ <!-- <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list> -->
|
|
|
+ <component :is="components[currentComponent]" />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="home-bottom">
|
|
|
+ <div class="log-box yes-events">
|
|
|
+ <chart-box class="overflow">
|
|
|
+ <template #title-name>
|
|
|
+ <div class="box-name" @click="handleSelectArea">果园日志</div>
|
|
|
+ </template>
|
|
|
+ <div class="log-content">
|
|
|
+ 2月13日,共抽样193棵树,拍摄了193张照片,{{ indicatorChartData.content }}
|
|
|
+ </div>
|
|
|
+ <div class="chart-wrap">
|
|
|
+ <indicator-chart
|
|
|
+ :key="0 + 'log'"
|
|
|
+ type="feature"
|
|
|
+ :chartData="indicatorChartData"
|
|
|
+ ></indicator-chart>
|
|
|
+ </div>
|
|
|
+ </chart-box>
|
|
|
+ </div>
|
|
|
+ <div class="file-box yes-events">
|
|
|
+ <chart-box name="果园档案">
|
|
|
+ <template #title-right>
|
|
|
+ <el-icon class="arrow-icon cursor-pointer" color="#141414"><DArrowLeft /></el-icon>
|
|
|
+ <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
|
|
|
+ </template>
|
|
|
+ <img src="@/assets/images/home/line-data.png" alt="" />
|
|
|
+ </chart-box>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="right yes-events">
|
|
|
+ <div class="list">
|
|
|
+ <chart-box name="农情动态" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
|
|
|
+ <template v-if="rightIndex === 0">
|
|
|
+ <!-- <div class="sub-title">
|
|
|
+ <img src="@/assets/images/common/title-icon.png" />
|
|
|
+ <span>农情动态</span>
|
|
|
+ </div> -->
|
|
|
+ <album></album>
|
|
|
+ <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
|
|
|
<div class="img-box">
|
|
|
<img @click="handleAct(item)" v-for="item in 2" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
|
|
|
</div> -->
|
|
|
- </template>
|
|
|
- <template v-if="rightIndex===1">
|
|
|
- <div class="img-box1">
|
|
|
- <img src="@/assets/images/home/fh01.png" alt="">
|
|
|
- <img src="@/assets/images/home/fh02.png" alt="">
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="rightIndex===2">
|
|
|
- <div class="btn-wrap">
|
|
|
- <div :class="{active:btnIndex===0}" @click="handleBtn(0)">{{btnIndex===0&&btnName!=''?'采样分区:'+ btnName:'选择采样分区'}}</div>
|
|
|
- <div :class="{active:btnIndex===1}" @click="handleBtn(1)">{{btnIndex===1&&btnName!=''?'单树编号:'+ btnName:'选择树'}}</div>
|
|
|
- </div>
|
|
|
- <div class="img-box2" v-show="showPoint">
|
|
|
- <img v-if="showType==='point'" src="@/assets/images/home/line-chart.png" alt="">
|
|
|
- <img v-else src="@/assets/images/home/line-chart2.png" alt="">
|
|
|
- <img src="@/assets/images/home/fh01.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="img-box2" v-show="!showPoint">
|
|
|
- <img v-if="showType==='point'" src="@/assets/images/home/line-chart1.png" alt="">
|
|
|
- <img v-else src="@/assets/images/home/line-chart3.png" alt="">
|
|
|
- <img src="@/assets/images/home/fh02.png" alt="">
|
|
|
+ </template>
|
|
|
+ <template v-if="rightIndex === 1">
|
|
|
+ <div class="img-box1">
|
|
|
+ <img src="@/assets/images/home/fh01.png" alt="" />
|
|
|
+ <img src="@/assets/images/home/fh02.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="rightIndex === 2">
|
|
|
+ <div class="btn-wrap">
|
|
|
+ <div :class="{ active: btnIndex === 0 }" @click="handleBtn(0)">
|
|
|
+ {{ btnIndex === 0 && btnName != "" ? "采样分区:" + btnName : "选择采样分区" }}
|
|
|
+ </div>
|
|
|
+ <div :class="{ active: btnIndex === 1 }" @click="handleBtn(1)">
|
|
|
+ {{ btnIndex === 1 && btnName != "" ? "单树编号:" + btnName : "选择树" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="img-box2" v-show="showPoint">
|
|
|
+ <img v-if="showType === 'point'" src="@/assets/images/home/line-chart.png" alt="" />
|
|
|
+ <img v-else src="@/assets/images/home/line-chart2.png" alt="" />
|
|
|
+ <img src="@/assets/images/home/fh01.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="img-box2" v-show="!showPoint">
|
|
|
+ <img v-if="showType === 'point'" src="@/assets/images/home/line-chart1.png" alt="" />
|
|
|
+ <img v-else src="@/assets/images/home/line-chart3.png" alt="" />
|
|
|
+ <img src="@/assets/images/home/fh02.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </chart-box>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </chart-box>
|
|
|
- </div>
|
|
|
- <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list>
|
|
|
- </div>
|
|
|
+ <!-- <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list> -->
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 图例 -->
|
|
|
- <img class="legend yes-events" src="@/assets/images/home/legend.png" alt="">
|
|
|
+ <!-- 图例 -->
|
|
|
+ <img class="legend yes-events" src="@/assets/images/home/legend.png" alt="" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div ref="mapRef" class="bottom-map"></div>
|
|
|
+ <div ref="mapRef" class="bottom-map"></div>
|
|
|
|
|
|
- <!-- 图片弹窗 -->
|
|
|
- <PicturePreview
|
|
|
- :imageUrl="urls"
|
|
|
- :curIndex="urlsIndex"
|
|
|
- ></PicturePreview>
|
|
|
+ <!-- 图片弹窗 -->
|
|
|
+ <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
|
|
|
<album-carousel></album-carousel>
|
|
|
- <PdfDialog title="果园报告" ></PdfDialog>
|
|
|
+ <PdfDialog title="果园报告"></PdfDialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { onMounted, ref } from "vue";
|
|
|
-import config from "@/api/config.js"
|
|
|
+import config from "@/api/config.js";
|
|
|
import PicturePreview from "@/components/PicturePreview.vue";
|
|
|
import fnHeader from "@/components/fnHeader.vue";
|
|
|
-import navigation from "@/components/navigation.vue";
|
|
|
+// import navigation from "@/components/navigation.vue";
|
|
|
import chartBox from "@/components/chartBox.vue";
|
|
|
import toolList from "@/components/toolList.vue";
|
|
|
import fileBar from "@/components/fileBar.vue";
|
|
@@ -108,456 +112,478 @@ import phenologyPage from "./components/phenologyPage.vue";
|
|
|
import indicatorChart from "./components/indicatorChart.vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import SamplePointLayer from "./map/samplePointLayer";
|
|
|
-import {useStore} from "vuex";
|
|
|
+import { useStore } from "vuex";
|
|
|
import RegionLayer from "./map/regionLayer";
|
|
|
import eventBus from "@/api/eventBus";
|
|
|
import AlbumCarousel from "./album_compoents/albumCarousel.vue";
|
|
|
import album from "./album/index.vue";
|
|
|
-import PdfDialog from "../../components/PdfDialog"
|
|
|
-let store = useStore()
|
|
|
+import PdfDialog from "../../components/PdfDialog";
|
|
|
+let store = useStore();
|
|
|
const components = {
|
|
|
- homePage,
|
|
|
- weatherPage,
|
|
|
- phenologyPage,
|
|
|
+ homePage,
|
|
|
+ weatherPage,
|
|
|
+ phenologyPage,
|
|
|
};
|
|
|
//当前农场
|
|
|
const currentFarm = {
|
|
|
- id: store.getters.userinfo.curFarmId,
|
|
|
- name: store.getters.userinfo.curFarmName,
|
|
|
-}
|
|
|
+ id: store.getters.userinfo.curFarmId,
|
|
|
+ name: store.getters.userinfo.curFarmName,
|
|
|
+};
|
|
|
//当前区域
|
|
|
const currentRegion = {
|
|
|
- id: null,
|
|
|
- name: null
|
|
|
-}
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+};
|
|
|
let homeMap = new HomeMap();
|
|
|
-let samplePointLayer = null
|
|
|
-let regionLayer = null
|
|
|
+let samplePointLayer = null;
|
|
|
+let regionLayer = null;
|
|
|
const router = useRouter();
|
|
|
const mapRef = ref();
|
|
|
onMounted(() => {
|
|
|
- homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
|
|
|
- // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
|
|
|
- samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion)
|
|
|
- regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
|
|
|
+ homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
|
|
|
+ // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
|
|
|
+ samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion);
|
|
|
+ regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion);
|
|
|
|
|
|
- getYellow()
|
|
|
- getFarmLog()
|
|
|
+ getYellow();
|
|
|
+ getFarmLog();
|
|
|
});
|
|
|
|
|
|
-const indicatorChartData = ref({})
|
|
|
-const blueZone = ref('ws0y1meyhxp4')
|
|
|
+const indicatorChartData = ref({});
|
|
|
+const blueZone = ref("ws0y1meyhxp4");
|
|
|
|
|
|
-const getFarmLog = () =>{
|
|
|
- const params = {
|
|
|
- id: null,
|
|
|
- farmId: 766,
|
|
|
- blueZone:blueZone.value
|
|
|
- }
|
|
|
- VE_API.warning.fetchFarmLog(params).then(({data}) => {
|
|
|
- indicatorChartData.value = data || {}
|
|
|
- eventBus.emit('chart:updateOption',data)
|
|
|
- })
|
|
|
-}
|
|
|
+const getFarmLog = () => {
|
|
|
+ const params = {
|
|
|
+ id: null,
|
|
|
+ farmId: 766,
|
|
|
+ blueZone: blueZone.value,
|
|
|
+ };
|
|
|
+ VE_API.warning.fetchFarmLog(params).then(({ data }) => {
|
|
|
+ indicatorChartData.value = data || {};
|
|
|
+ eventBus.emit("chart:updateOption", data);
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
-const urls = ref([])
|
|
|
-const urlsIndex = ref(0)
|
|
|
-const getYellow = () =>{
|
|
|
- VE_API.home.getYellowList().then(res =>{
|
|
|
- // urls.value = res.data.map(item =>{
|
|
|
- // return {
|
|
|
- // ...item,
|
|
|
- // imgPath:config.base_img_url2+item.cloudFilename
|
|
|
- // }
|
|
|
- // })
|
|
|
- // urls.value = [
|
|
|
- // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
|
|
|
- // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
|
|
|
- // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
|
|
|
- // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
|
|
|
- // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
|
|
|
- // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
|
|
|
- // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
|
|
|
- // ]
|
|
|
- })
|
|
|
-}
|
|
|
+const urls = ref([]);
|
|
|
+const urlsIndex = ref(0);
|
|
|
+const getYellow = () => {
|
|
|
+ VE_API.home.getYellowList().then((res) => {
|
|
|
+ // urls.value = res.data.map(item =>{
|
|
|
+ // return {
|
|
|
+ // ...item,
|
|
|
+ // imgPath:config.base_img_url2+item.cloudFilename
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // urls.value = [
|
|
|
+ // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
|
|
|
+ // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
|
|
|
+ // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
|
|
|
+ // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
|
|
|
+ // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
|
|
|
+ // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
|
|
|
+ // "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
|
|
|
+ // ]
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
-const btnIndex = ref(null)
|
|
|
-const btnName = ref("")
|
|
|
-const handleBtn = (e) =>{
|
|
|
- btnName.value = ""
|
|
|
- btnIndex.value = e
|
|
|
- eventBus.emit("clear:area")
|
|
|
- samplePointLayer.updateAreaStatus(e===0?true:false)
|
|
|
- regionLayer.resetData()
|
|
|
- samplePointLayer.resetPoint()
|
|
|
-}
|
|
|
+const btnIndex = ref(null);
|
|
|
+const btnName = ref("");
|
|
|
+const handleBtn = (e) => {
|
|
|
+ btnName.value = "";
|
|
|
+ btnIndex.value = e;
|
|
|
+ eventBus.emit("clear:area");
|
|
|
+ samplePointLayer.updateAreaStatus(e === 0 ? true : false);
|
|
|
+ regionLayer.resetData();
|
|
|
+ samplePointLayer.resetPoint();
|
|
|
+};
|
|
|
|
|
|
//点击果园日志
|
|
|
-const handleSelectArea = () =>{
|
|
|
- btnName.value = ""
|
|
|
- btnIndex.value = null
|
|
|
- eventBus.emit("clear:area")
|
|
|
- regionLayer.resetData()
|
|
|
- samplePointLayer.resetPoint()
|
|
|
- samplePointLayer.updateAreaStatus(true)
|
|
|
-}
|
|
|
+const handleSelectArea = () => {
|
|
|
+ btnName.value = "";
|
|
|
+ btnIndex.value = null;
|
|
|
+ eventBus.emit("clear:area");
|
|
|
+ regionLayer.resetData();
|
|
|
+ samplePointLayer.resetPoint();
|
|
|
+ samplePointLayer.updateAreaStatus(true);
|
|
|
+};
|
|
|
|
|
|
//农事点击高亮
|
|
|
-const act = ref(null)
|
|
|
-const handleAct = (v) =>{
|
|
|
- act.value = v
|
|
|
- samplePointLayer.resetPoint()
|
|
|
- if(v===1){
|
|
|
- regionLayer.selectAreaMultiple([
|
|
|
- {value:2,color:"blue"},
|
|
|
- {value:4,color:"blue1"},
|
|
|
- {value:5,color:"blue2"},
|
|
|
- {value:7,color:"blue"},
|
|
|
- {value:13,color:"blue2"},
|
|
|
- ])
|
|
|
- }
|
|
|
- if(v===2){
|
|
|
- regionLayer.selectAreaMultiple([
|
|
|
- {value:1,color:"blue"},
|
|
|
- {value:2,color:"blue1"},
|
|
|
- {value:9,color:"blue2"},
|
|
|
- {value:12,color:"blue2"},
|
|
|
- ])
|
|
|
- }
|
|
|
-}
|
|
|
+const act = ref(null);
|
|
|
+const handleAct = (v) => {
|
|
|
+ act.value = v;
|
|
|
+ samplePointLayer.resetPoint();
|
|
|
+ if (v === 1) {
|
|
|
+ regionLayer.selectAreaMultiple([
|
|
|
+ { value: 2, color: "blue" },
|
|
|
+ { value: 4, color: "blue1" },
|
|
|
+ { value: 5, color: "blue2" },
|
|
|
+ { value: 7, color: "blue" },
|
|
|
+ { value: 13, color: "blue2" },
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ if (v === 2) {
|
|
|
+ regionLayer.selectAreaMultiple([
|
|
|
+ { value: 1, color: "blue" },
|
|
|
+ { value: 2, color: "blue1" },
|
|
|
+ { value: 9, color: "blue2" },
|
|
|
+ { value: 12, color: "blue2" },
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
//柱状图点击事件监听
|
|
|
-eventBus.on('echart:barClick',(e)=>{
|
|
|
- btnName.value = ""
|
|
|
- btnIndex.value = null
|
|
|
- eventBus.emit("clear:area")
|
|
|
- samplePointLayer.updateAreaStatus(false)
|
|
|
- const arr = ["花穗伸长", "啃食虫害","毛毡病"]
|
|
|
- const isDraw = arr.includes(e)
|
|
|
- const index = arr.indexOf(e)
|
|
|
- if(isDraw){
|
|
|
- if(index===0){
|
|
|
- regionLayer.selectAreaMultiple([
|
|
|
- {value:0,color:"green"},
|
|
|
- {value:1,color:"green"},
|
|
|
- {value:2,color:"green"},
|
|
|
- {value:3,color:"green1"},
|
|
|
- {value:4,color:"green1"},
|
|
|
- {value:5,color:"green2"},
|
|
|
- {value:6,color:"green1"},
|
|
|
- {value:7,color:"green2"},
|
|
|
- {value:8,color:"green2"},
|
|
|
- {value:9,color:"green"},
|
|
|
- {value:10,color:"green"},
|
|
|
- {value:11,color:"green1"},
|
|
|
- {value:12,color:"green2"},
|
|
|
- {value:13,color:"green"},
|
|
|
- {value:14,color:"green2"},
|
|
|
- ])
|
|
|
- }else if(index===1){
|
|
|
- regionLayer.selectAreaMultiple([{value:6,color:"red"}])
|
|
|
- }else{
|
|
|
- regionLayer.selectAreaMultiple([
|
|
|
- {value:12,color:"red2"},
|
|
|
- {value:10,color:"red"},
|
|
|
- {value:1,color:"red"}
|
|
|
- ])
|
|
|
+eventBus.on("echart:barClick", (e) => {
|
|
|
+ btnName.value = "";
|
|
|
+ btnIndex.value = null;
|
|
|
+ eventBus.emit("clear:area");
|
|
|
+ samplePointLayer.updateAreaStatus(false);
|
|
|
+ const arr = ["花穗伸长", "啃食虫害", "毛毡病"];
|
|
|
+ const isDraw = arr.includes(e);
|
|
|
+ const index = arr.indexOf(e);
|
|
|
+ if (isDraw) {
|
|
|
+ if (index === 0) {
|
|
|
+ regionLayer.selectAreaMultiple([
|
|
|
+ { value: 0, color: "green" },
|
|
|
+ { value: 1, color: "green" },
|
|
|
+ { value: 2, color: "green" },
|
|
|
+ { value: 3, color: "green1" },
|
|
|
+ { value: 4, color: "green1" },
|
|
|
+ { value: 5, color: "green2" },
|
|
|
+ { value: 6, color: "green1" },
|
|
|
+ { value: 7, color: "green2" },
|
|
|
+ { value: 8, color: "green2" },
|
|
|
+ { value: 9, color: "green" },
|
|
|
+ { value: 10, color: "green" },
|
|
|
+ { value: 11, color: "green1" },
|
|
|
+ { value: 12, color: "green2" },
|
|
|
+ { value: 13, color: "green" },
|
|
|
+ { value: 14, color: "green2" },
|
|
|
+ ]);
|
|
|
+ } else if (index === 1) {
|
|
|
+ regionLayer.selectAreaMultiple([{ value: 6, color: "red" }]);
|
|
|
+ } else {
|
|
|
+ regionLayer.selectAreaMultiple([
|
|
|
+ { value: 12, color: "red2" },
|
|
|
+ { value: 10, color: "red" },
|
|
|
+ { value: 1, color: "red" },
|
|
|
+ ]);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
//黄板点击事件监听
|
|
|
-eventBus.on('click:yellowBlock',(e)=>{
|
|
|
- const arr = ["113.61396985128522","113.61390710255375","113.61491218688275"]
|
|
|
- if(arr[0]==e){
|
|
|
- urls.value = ["HB-ws0y1menggxv"]
|
|
|
- urlsIndex.value = 0
|
|
|
- }
|
|
|
- if(arr[1]==e){
|
|
|
- urls.value = ["HB-ws0y1mg0pvd" ]
|
|
|
- urlsIndex.value = 3
|
|
|
- }
|
|
|
-if(arr[2]==e){
|
|
|
- urls.value = ["HB-ws0y1mg9wpcp"]
|
|
|
- urlsIndex.value = 6
|
|
|
- }
|
|
|
- eventBus.emit('dialog:show',true)
|
|
|
-})
|
|
|
+eventBus.on("click:yellowBlock", (e) => {
|
|
|
+ const arr = ["113.61396985128522", "113.61390710255375", "113.61491218688275"];
|
|
|
+ if (arr[0] == e) {
|
|
|
+ urls.value = ["HB-ws0y1menggxv"];
|
|
|
+ urlsIndex.value = 0;
|
|
|
+ }
|
|
|
+ if (arr[1] == e) {
|
|
|
+ urls.value = ["HB-ws0y1mg0pvd"];
|
|
|
+ urlsIndex.value = 3;
|
|
|
+ }
|
|
|
+ if (arr[2] == e) {
|
|
|
+ urls.value = ["HB-ws0y1mg9wpcp"];
|
|
|
+ urlsIndex.value = 6;
|
|
|
+ }
|
|
|
+ eventBus.emit("dialog:show", true);
|
|
|
+});
|
|
|
|
|
|
-const showPoint = ref(true)
|
|
|
-const showType = ref("point")
|
|
|
+const showPoint = ref(true);
|
|
|
+const showType = ref("point");
|
|
|
//地图点击事件
|
|
|
-eventBus.on('click:point',(e)=>{
|
|
|
- showType.value = "point"
|
|
|
- if(btnIndex.value===1){
|
|
|
- btnName.value=e.name
|
|
|
- if(e.value===1){
|
|
|
- showPoint.value = true
|
|
|
- samplePointLayer.updatePointStatus(true)
|
|
|
- }else{
|
|
|
- showPoint.value = false
|
|
|
+eventBus.on("click:point", (e) => {
|
|
|
+ showType.value = "point";
|
|
|
+ if (btnIndex.value === 1) {
|
|
|
+ btnName.value = e.name;
|
|
|
+ if (e.value === 1) {
|
|
|
+ showPoint.value = true;
|
|
|
+ samplePointLayer.updatePointStatus(true);
|
|
|
+ } else {
|
|
|
+ showPoint.value = false;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
//地图点击区域事件
|
|
|
-eventBus.on('click:area',(e)=>{
|
|
|
- showType.value = "area"
|
|
|
- if(btnIndex.value===0){
|
|
|
- btnName.value=e.name
|
|
|
- if(e.value===1){
|
|
|
- showPoint.value = true
|
|
|
- }else{
|
|
|
- showPoint.value = false
|
|
|
+eventBus.on("click:area", (e) => {
|
|
|
+ showType.value = "area";
|
|
|
+ if (btnIndex.value === 0) {
|
|
|
+ btnName.value = e.name;
|
|
|
+ if (e.value === 1) {
|
|
|
+ showPoint.value = true;
|
|
|
+ } else {
|
|
|
+ showPoint.value = false;
|
|
|
+ }
|
|
|
+ regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
|
|
|
}
|
|
|
- regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
|
|
|
- }
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
-eventBus.on('click:updateArea',(e)=>{
|
|
|
- blueZone.value = e.value
|
|
|
- btnName.value=e.name
|
|
|
- regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
|
|
|
- getFarmLog()
|
|
|
-})
|
|
|
+eventBus.on("click:updateArea", (e) => {
|
|
|
+ blueZone.value = e.value;
|
|
|
+ btnName.value = e.name;
|
|
|
+ regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
|
|
|
+ getFarmLog();
|
|
|
+});
|
|
|
|
|
|
const currentComponent = ref("homePage");
|
|
|
const handleActiveLeft = (e) => {
|
|
|
- currentComponent.value = e.componentName;
|
|
|
- if(e.title==='首页'){
|
|
|
- router.push('/warningHome')
|
|
|
- }
|
|
|
+ currentComponent.value = e.componentName;
|
|
|
+ if (e.title === "首页") {
|
|
|
+ router.push("/warningHome");
|
|
|
+ }
|
|
|
};
|
|
|
const leftToolList = [
|
|
|
- {
|
|
|
- title: "首页",
|
|
|
- name: "home",
|
|
|
- componentName: "homePage",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "气象预警",
|
|
|
- componentName: "weatherPage",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "物候调节",
|
|
|
- componentName: "phenologyPage",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "病虫测报",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "营养评估",
|
|
|
- },
|
|
|
+ {
|
|
|
+ title: "首页",
|
|
|
+ name: "home",
|
|
|
+ componentName: "homePage",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "气象预警",
|
|
|
+ componentName: "weatherPage",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "物候调节",
|
|
|
+ componentName: "phenologyPage",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "病虫测报",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "营养评估",
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
-const rightIndex = ref(0)
|
|
|
-const handleActiveRight = ({index}) => {
|
|
|
- rightIndex.value = index
|
|
|
- btnIndex.value = null
|
|
|
- btnName.value = ""
|
|
|
- samplePointLayer.updateAreaStatus(false)
|
|
|
- regionLayer.resetData()
|
|
|
- samplePointLayer.resetPoint()
|
|
|
- if(index!==0){
|
|
|
- act.value = null
|
|
|
+const rightIndex = ref(0);
|
|
|
+const handleActiveRight = ({ index }) => {
|
|
|
+ rightIndex.value = index;
|
|
|
+ btnIndex.value = null;
|
|
|
+ btnName.value = "";
|
|
|
+ samplePointLayer.updateAreaStatus(false);
|
|
|
+ regionLayer.resetData();
|
|
|
+ samplePointLayer.resetPoint();
|
|
|
+ if (index !== 0) {
|
|
|
+ act.value = null;
|
|
|
}
|
|
|
};
|
|
|
-const hanleRightIndex = (num) =>{
|
|
|
- rightIndex.value = num
|
|
|
- eventBus.emit('tool:updateAct',num)
|
|
|
-}
|
|
|
+const hanleRightIndex = (num) => {
|
|
|
+ rightIndex.value = num;
|
|
|
+ eventBus.emit("tool:updateAct", num);
|
|
|
+};
|
|
|
const rightToolList = [
|
|
|
- {
|
|
|
- title: "农事列表",
|
|
|
- index:0,
|
|
|
- },
|
|
|
- {
|
|
|
- title: "处方分析",
|
|
|
- index:2,
|
|
|
- },
|
|
|
- {
|
|
|
- title: "复核对比",
|
|
|
- index:1,
|
|
|
- },
|
|
|
+ {
|
|
|
+ title: "农事列表",
|
|
|
+ index: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "处方分析",
|
|
|
+ index: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "复核对比",
|
|
|
+ index: 1,
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
// 跳转果园档案
|
|
|
const toFilePage = () => {
|
|
|
- router.push('/garden-file')
|
|
|
-}
|
|
|
+ router.push("/garden-file");
|
|
|
+};
|
|
|
+
|
|
|
+// 返回
|
|
|
+const goBack = () => {
|
|
|
+ router.go(-1);
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.base-container {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- color: #fff;
|
|
|
- position: absolute;
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- .content {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 74px - 48px);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ height: 100vh;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
box-sizing: border-box;
|
|
|
- .left,
|
|
|
- .right {
|
|
|
- width: calc(376px + 54px);
|
|
|
- height: 100%;
|
|
|
- padding-top: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ z-index: 1;
|
|
|
+ .back {
|
|
|
+ position: absolute;
|
|
|
+ top: 52px;
|
|
|
+ left: 8px;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.78);
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ .icon {
|
|
|
+ width: 13px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
- .right {
|
|
|
- .list {
|
|
|
+
|
|
|
+ .content {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- .btn-wrap{
|
|
|
- width: 100%;
|
|
|
- height: 25px;
|
|
|
- line-height: 25px;
|
|
|
- margin: 10px 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- div{
|
|
|
- width: 48%;
|
|
|
+ height: calc(100% - 74px - 48px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ width: 376px;
|
|
|
height: 100%;
|
|
|
- color: #55E5C6;
|
|
|
- border: 1px solid rgba(255,213,137,0.6);
|
|
|
- border-radius: 2px;
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- &.active{
|
|
|
- background: #55E5C6;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .img-box{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 35px);
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .img-box1{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 10px);
|
|
|
- overflow: auto;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .img-box2{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 45px);
|
|
|
- overflow: auto;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- object-fit: cover;
|
|
|
- margin-bottom: 12px;
|
|
|
- cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ background: #141D1D;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #444444;
|
|
|
}
|
|
|
- .mt{
|
|
|
- margin-top: -12px;
|
|
|
+ .left {
|
|
|
+ margin-left: 8px;
|
|
|
+ padding: 7px 7px 0 7px;
|
|
|
}
|
|
|
- .list-wrap {
|
|
|
- ::v-deep {
|
|
|
- .chart-content {
|
|
|
- padding: 16px 0 0 0;
|
|
|
- }
|
|
|
+ .right {
|
|
|
+ margin-right: 8px;
|
|
|
+ .sub-title {
|
|
|
+ display: flex;
|
|
|
}
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .btn-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ margin: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ div {
|
|
|
+ width: 48%;
|
|
|
+ height: 100%;
|
|
|
+ color: #55e5c6;
|
|
|
+ border: 1px solid rgba(255, 213, 137, 0.6);
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ background: #55e5c6;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 35px);
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .img-box1 {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ overflow: auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .img-box2 {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ overflow: auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ // img {
|
|
|
+ // width: 100%;
|
|
|
+ // height: auto;
|
|
|
+ // object-fit: cover;
|
|
|
+ // margin-bottom: 12px;
|
|
|
+ // cursor: pointer;
|
|
|
+ // }
|
|
|
+ .mt {
|
|
|
+ margin-top: -12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .overflow{
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .home-bottom {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- width: calc(100% - 430px - 430px - 72px);
|
|
|
- height: 100%;
|
|
|
- align-self: flex-end;
|
|
|
- .log-box {
|
|
|
- height: 34%;
|
|
|
- width: calc(100% - 340px - 28px);
|
|
|
- margin-right: 28px;
|
|
|
- .box-name{
|
|
|
- width: 89px;
|
|
|
- height: 22px;
|
|
|
- text-align: center;
|
|
|
- line-height: 22px;
|
|
|
- border-radius: 20px;
|
|
|
- margin: 10px 0 5px 6px;
|
|
|
- cursor: pointer;
|
|
|
- background: linear-gradient(0deg,#BBA269 0%, #3D3523 100%);
|
|
|
- }
|
|
|
- .log-content {
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1.5;
|
|
|
- padding: 0 18px;
|
|
|
- }
|
|
|
- .chart-wrap{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 50px);
|
|
|
- .line{
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ .overflow {
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
- }
|
|
|
+ .home-bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ width: calc(100% - 430px - 430px - 72px);
|
|
|
+ height: 100%;
|
|
|
+ align-self: flex-end;
|
|
|
+ .log-box {
|
|
|
+ height: 34%;
|
|
|
+ width: calc(100% - 340px - 28px);
|
|
|
+ margin-right: 28px;
|
|
|
+ .box-name {
|
|
|
+ width: 89px;
|
|
|
+ height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin: 10px 0 5px 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: linear-gradient(0deg, #bba269 0%, #3d3523 100%);
|
|
|
+ }
|
|
|
+ .log-content {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
+ padding: 0 18px;
|
|
|
+ }
|
|
|
+ .chart-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ .line {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .file-box {
|
|
|
- height: 25%;
|
|
|
- min-height: 210px;
|
|
|
- width: 340px;
|
|
|
- position: relative;
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
- .arrow-icon {
|
|
|
- top: -32px;
|
|
|
- left: 50%;
|
|
|
- position: absolute;
|
|
|
- background: #fff;
|
|
|
- width: 16px;
|
|
|
- height: 80px;
|
|
|
- line-height: 80px;
|
|
|
- border-radius: 5px 0 0 5px;
|
|
|
- text-align: center;
|
|
|
- transform: translateX(-50%) rotate(270deg);
|
|
|
+ .file-box {
|
|
|
+ height: 25%;
|
|
|
+ min-height: 210px;
|
|
|
+ width: 340px;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+ .arrow-icon {
|
|
|
+ top: -32px;
|
|
|
+ left: 50%;
|
|
|
+ position: absolute;
|
|
|
+ background: #fff;
|
|
|
+ width: 16px;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
+ text-align: center;
|
|
|
+ transform: translateX(-50%) rotate(270deg);
|
|
|
+ }
|
|
|
+ .edit-btn {
|
|
|
+ padding: 2px 24px;
|
|
|
+ background: #55e5c6;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .edit-btn {
|
|
|
- padding: 2px 24px;
|
|
|
- background: #55E5C6;
|
|
|
- border-radius: 4px;
|
|
|
- color: #000;
|
|
|
+ .legend {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 8px;
|
|
|
+ right: 64px;
|
|
|
+ width: 525px;
|
|
|
+ height: 16px;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- .legend{
|
|
|
- position: fixed;
|
|
|
- bottom: 8px;
|
|
|
- right: 64px;
|
|
|
- width: 525px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.bottom-map {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- position: absolute;
|
|
|
- z-index: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 0;
|
|
|
}
|
|
|
</style>
|