<template>
|
<div class="wraaper-box farming-detail-box">
|
<div class="dd">
|
<div class="da">
|
<!-- <div class="land-img" @click="mod(usePolygons)">-->
|
<div class="land-img">
|
<img v-if="url" :src="url" class="landimg" />
|
<img
|
v-else
|
src="../../../public/img/bg/noimage.jpg"
|
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 class="edit">
|
<el-button
|
@click="btnGrounpShow = !btnGrounpShow"
|
icon="el-icon-menu"
|
></el-button>
|
|
<div v-show="btnGrounpShow" class="btn-grounp">
|
<el-button size="small" @click="DelLand(delId)">删除地块</el-button>
|
<el-button style="margin-left:0px" size="small" @click="land">编辑地块</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="dv">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<!-- 种植记录 -->
|
<el-tab-pane label="种养品种" name="tab1">
|
<farmplant :is-land-info="true"></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-tab-pane label="农资使用记录" name="tab4">
|
<stockUseInfo></stockUseInfo>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<!-- <el-dialog-->
|
<!-- title="地块位置"-->
|
<!-- class="current-map-box"-->
|
<!-- :visible.sync="gradeBoxVisible1"-->
|
<!-- :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 class="save" type="success" @click="upLand()">保存</el-button>-->
|
<!-- </el-dialog>-->
|
<landUpdate
|
v-if="landVisible"
|
ref="landUpdate"
|
id="landUpdate"
|
></landUpdate>
|
</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 stockUseInfo from "@/views/farm/stockUseInfo.vue";
|
import getMapDataInThere from "./getMapDataInThere.vue";
|
import { getList, remove, update } from "@/api/land/land";
|
import landUpdate from "./landUpdate";
|
import topSearch2Vue from "../../page/index/top/top-search2.vue";
|
|
export default {
|
components: {
|
farmplant,
|
farming,
|
recovery,
|
stockUseInfo,
|
landUpdate,
|
getMapDataInThere,
|
},
|
data() {
|
return {
|
farmId: "",
|
activeName: "tab1",
|
url: "",
|
dica: "",
|
deptname: "",
|
landUnit: "",
|
delId: "",
|
landArea: "",
|
usePolygons: "",
|
dic: "",
|
formC: {},
|
gradeBoxVisible1: false,
|
landVisible: 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,
|
},
|
],
|
},
|
btnGrounpShow: false,
|
};
|
},
|
computed: {
|
...mapGetters(["userInfo", "permission", "polygons", "$farmId"]),
|
},
|
created() {
|
this.$nextTick(() => {
|
this.$EventBus.$emit("setFarmId", this.$route.query.farmId-0);
|
});
|
},
|
methods: {
|
//圈地
|
land() {
|
this.landVisible = true;
|
this.$nextTick(() => {
|
this.$refs.landUpdate.init();
|
});
|
},
|
openLandUpdate(page, params = {}) {
|
// getList(1, 10, Object.assign(params, this.query)).then(res => {
|
// const data = res.data.data
|
//
|
// this.farmPlanList = data.records
|
// })
|
},
|
mod(usePolygons) {
|
this.gradeBoxVisible1 = true;
|
this.$refs.getMapData.draw(usePolygons);
|
},
|
setMapData(val) {
|
this.LineData = val[0];
|
this.PointData = val[1];
|
},
|
//删除地块
|
DelLand(delId) {
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
return remove(delId);
|
})
|
.then(() => {
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
var arr = [];
|
this.$store.state.tags.tagList.forEach((item) => {
|
if (item.label != "地块详情") {
|
arr.push(item);
|
}
|
});
|
this.$store.state.tags.tagList = arr;
|
this.$router.back();
|
});
|
},
|
//修改地块
|
upLand() {
|
var params = {};
|
if (this.polygons.length == 0) {
|
//没有面的数据
|
this.$refs.getMapData.isCheck = true;
|
// loading()
|
} else {
|
//如果有值，空间坐标转换
|
let pol = this.polygons;
|
let polLength = this.polygons.length - 1;
|
let usePolygons = "";
|
for (let k in pol) {
|
usePolygons += pol[k].lng + "," + pol[k].lat;
|
if (k != polLength) {
|
usePolygons += ";";
|
}
|
}
|
//设置坐标点
|
params.userId = this.userInfo.user_id;
|
params.landRange = usePolygons;
|
(params.id = this.delId), (params.landUnit = this.landUnit);
|
}
|
// update(params).then(() => {
|
// that.$refs.form.resetFields();
|
// that.visible = false;
|
// this.$message({
|
// type: "success",
|
// message: "操作成功!"
|
// });
|
// done();
|
// }, error => {
|
// loading();
|
// window.console.log(error);
|
// });
|
},
|
},
|
watch: {
|
"$route.query": {
|
immediate: true,
|
handler(newData, oldData) {
|
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.delId = this.$route.query.id;
|
this.landUnit = this.$route.query.landUnit;
|
// this.form = res.data.data;
|
this.usePolygons = this.$route.query.landRange
|
// .split("POLYGON((")[1]
|
// .split("))")[0]
|
.split(",");
|
},
|
},
|
},
|
};
|
</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 {
|
position: relative;
|
width: 100%;
|
line-height: 60px;
|
background: #fff;
|
|
.edit {
|
position: absolute;
|
top: 25px;
|
right: 60px;
|
|
.btn-grounp {
|
padding: 0 10px;
|
position: absolute;
|
top: 40px;
|
right: 60px;
|
background: #fff;
|
box-shadow: 0 0 10px 1px #ccc;
|
}
|
}
|
}
|
|
.dv {
|
flex: 1;
|
line-height: 60px;
|
background: #fff;
|
width: 100%;
|
overflow: hidden;
|
}
|
</style>
|
