<template>
|
<div class="wraaper-box farming-detail-box">
|
<div class="dd">
|
<div class="da">
|
<div class="land-img" @click="mod()">
|
<img :src=url class="landimg"/>
|
</div>
|
<div class="cent">
|
<div class="l">{{ landName }}</div>
|
<div class="ln">{{ dic }}</div>
|
</div>
|
<div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
|
<div class="dck">所属农场:{{ deptname }}</div>
|
</div>
|
<div class="dv">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<!-- 种植记录 -->
|
<el-tab-pane label="种养品种" name="tab1">
|
<farmplant
|
></farmplant>
|
</el-tab-pane>
|
<!-- 农事记录 -->
|
<el-tab-pane label="农事记录" name="tab2">
|
<farming
|
></farming>
|
</el-tab-pane>
|
<!-- 采收记录 -->
|
<el-tab-pane label="采收记录" name="tab3">
|
<recovery
|
></recovery>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<el-dialog
|
title="地块位置"
|
:visible.sync="gradeBoxVisible1"
|
width="width"
|
:modal="true"
|
:modal-append-to-body="true"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:before-close="dialogBeforeClose"
|
>
|
<getMapDataInThere
|
ref="getMapData"
|
id="getMapData"
|
@setMapData="setMapData"
|
></getMapDataInThere>
|
<el-button>54654</el-button>
|
</el-dialog>
|
|
|
</div>
|
|
</template>
|
|
<script>
|
import {mapGetters} from "vuex";
|
import farmplant from "@/views/farmplant/farmplant.vue";
|
import farming from "@/views/farm/farmingrecord.vue";
|
import recovery from "@/views/recovery/recovery.vue";
|
import getMapDataInThere from "./getMapDataInThere.vue";
|
|
export default {
|
components: {
|
farmplant,
|
farming,
|
recovery,
|
getMapDataInThere
|
},
|
data() {
|
return {
|
farmId: "",
|
activeName: "tab1",
|
url: "",
|
dica: "",
|
deptname: "",
|
landArea: "",
|
dic: "",
|
formC: {},
|
gradeBoxVisible1: false,
|
option2: {
|
index: true,
|
tip: false,
|
searchMenuSpan: 6,
|
height: 583,
|
menuWidth: 300,
|
border: true,
|
align: "center",
|
selection: true,
|
column: [
|
{
|
label: "路线展示",
|
labelWidth: "0",
|
prop: "line",
|
className: "mapClass",
|
hide: true,
|
display: true,
|
span: 24,
|
formslot: true,
|
addDisplay: true
|
}
|
],
|
}
|
};
|
},
|
computed: {
|
...mapGetters(["userInfo", "permission", "polygons"]),
|
},
|
created() {
|
this.url = this.$route.query.url;
|
this.landName = this.$route.query.landName;
|
this.dic = this.$route.query.dic;
|
this.landArea = this.$route.query.landArea;
|
this.dica = this.$route.query.dica;
|
this.deptname = this.$route.query.deptname;
|
this.form = res.data.data;
|
let usePolygons = this.$route.query.landRange
|
.split("POLYGON((")[1]
|
.split("))")[0]
|
.split(",");
|
for (let k in usePolygons) {
|
usePolygons[k] = {
|
lng: +usePolygons[k].split(" ")[0],
|
lat: +usePolygons[k].split(" ")[1],
|
};
|
}
|
this.$refs.getMapData.draw(usePolygons);
|
},
|
methods: {
|
mod() {
|
this.formC = {};
|
this.gradeBoxVisible1 = true;
|
},
|
},
|
watch: {},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
#getMapData {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 100%;
|
height: 100%;
|
}
|
.wraaper-box {
|
padding: 0 !important;
|
position: absolute;
|
top: 40px;
|
left: 0;
|
width: 100%;
|
height: calc(100% - 40px);
|
}
|
|
.land-img {
|
width: 200px;
|
height: 200px;
|
margin-top: 25px;
|
margin-left: 60px;
|
float: left
|
}
|
|
.cent {
|
width: 250px;
|
height: 40px;
|
margin-top: 25px;
|
margin-left: 40px;
|
float: left;
|
text-align: center;
|
line-height: 40px;
|
}
|
|
.l {
|
width: 120px;
|
height: 40px;
|
float: left;
|
text-align: center;
|
line-height: 40px;
|
}
|
|
.ln {
|
width: 120px;
|
height: 40px;
|
margin-left: 2px;
|
float: left;
|
text-align: center;
|
line-height: 40px;
|
display: inline-block;
|
vertical-align: 1px;
|
border-radius: 3px;
|
}
|
|
.dc {
|
width: 151px;
|
margin-top: 20px;
|
margin-left: 340px;
|
width: 175px;
|
}
|
.dck {
|
width: 151px;
|
margin-left: 340px;
|
width: 175px;
|
}
|
|
.landimg {
|
width: 200px;
|
height: 200px;
|
}
|
|
.dd {
|
padding: 10px;
|
wdith: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
}
|
|
.da {
|
width: 100%;
|
line-height: 60px;
|
background: #fff;
|
}
|
|
.dv {
|
flex: 1;
|
line-height: 60px;
|
background: #fff;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
</style>
|
