|
@@ -3,7 +3,7 @@
|
|
<div class="content">
|
|
<div class="content">
|
|
<!-- <navigation @handleTab="handleTab"></navigation> -->
|
|
<!-- <navigation @handleTab="handleTab"></navigation> -->
|
|
<div class="left yes-events">
|
|
<div class="left yes-events">
|
|
- <component :is="components[currentComponent]" @backHome="backHome"/>
|
|
|
|
|
|
+ <component :is="components[currentComponent]" @backHome="backHome" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="right yes-events">
|
|
<div class="right yes-events">
|
|
@@ -30,14 +30,14 @@
|
|
<!-- 图例 -->
|
|
<!-- 图例 -->
|
|
<div v-if="legendArr && legendArr.length" class="map-bg map-legend yes-events">
|
|
<div v-if="legendArr && legendArr.length" class="map-bg map-legend yes-events">
|
|
<div class="item" v-for="(legend, legendI) in legendArr" :key="legendI">
|
|
<div class="item" v-for="(legend, legendI) in legendArr" :key="legendI">
|
|
- <span class="legend-block" :style="{background: legend.color}"></span>
|
|
|
|
|
|
+ <span class="legend-block" :style="{ background: legend.color }"></span>
|
|
{{ legend.name }}
|
|
{{ legend.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="map-bg map-legend yes-events">
|
|
<div v-else class="map-bg map-legend yes-events">
|
|
<div class="item" v-if="ROLE == 1">
|
|
<div class="item" v-if="ROLE == 1">
|
|
<img src="@/assets/images/map/status/wry.png" alt="" />
|
|
<img src="@/assets/images/map/status/wry.png" alt="" />
|
|
- 未开放认养
|
|
|
|
|
|
+ 未开放
|
|
</div>
|
|
</div>
|
|
<div class="item" v-if="ROLE == 2">
|
|
<div class="item" v-if="ROLE == 2">
|
|
<img src="@/assets/images/map/status/other.png" alt="" />
|
|
<img src="@/assets/images/map/status/other.png" alt="" />
|
|
@@ -45,11 +45,11 @@
|
|
</div>
|
|
</div>
|
|
<div class="item" v-show="!checkShow">
|
|
<div class="item" v-show="!checkShow">
|
|
<img src="@/assets/images/map/status/dry.png" alt="" />
|
|
<img src="@/assets/images/map/status/dry.png" alt="" />
|
|
- {{ ROLE == 1 ? "待认养" : "可团购" }}
|
|
|
|
|
|
+ 待守护
|
|
</div>
|
|
</div>
|
|
<div class="item" v-show="!checkShow">
|
|
<div class="item" v-show="!checkShow">
|
|
<img src="@/assets/images/map/status/yry.png" alt="" />
|
|
<img src="@/assets/images/map/status/yry.png" alt="" />
|
|
- 已认养
|
|
|
|
|
|
+ 已守护
|
|
</div>
|
|
</div>
|
|
<div class="item selected-item" v-show="checkShow">
|
|
<div class="item selected-item" v-show="checkShow">
|
|
<img src="@/assets/images/map/status/selected.png" alt="" />
|
|
<img src="@/assets/images/map/status/selected.png" alt="" />
|
|
@@ -59,14 +59,16 @@
|
|
|
|
|
|
<div class="tips" v-show="checkShow">
|
|
<div class="tips" v-show="checkShow">
|
|
<div class="text">
|
|
<div class="text">
|
|
- <span>提示:</span>请在底图上点选 <span>认养的果树</span>,或按住 Ctrl 框选 <span>认养的区域</span>
|
|
|
|
|
|
+ <span>提示:</span>请在底图上点选 <span>可守护的果树</span>,或按住 Ctrl 框选 <span>守护的区域</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div v-show="!checkShow && ROLE == 1" class="right-button yes-events" @click="hanldeCheck">勾选认养区域</div>
|
|
|
|
|
|
+ <div v-show="!checkShow && ROLE == 1" class="right-button yes-events" @click="hanldeCheck">
|
|
|
|
+ 新增守护区域
|
|
|
|
+ </div>
|
|
<div v-show="checkShow" class="center-button">
|
|
<div v-show="checkShow" class="center-button">
|
|
<div class="cancel yes-events" @click="handleCancel">取消</div>
|
|
<div class="cancel yes-events" @click="handleCancel">取消</div>
|
|
- <div class="yes-events" @click="handleCancel">确认开放认养权限</div>
|
|
|
|
|
|
+ <div class="yes-events" @click="handleCancel">确认开放守护权限</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -107,7 +109,7 @@ const components = {
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
const mapRef = ref(null);
|
|
const mapRef = ref(null);
|
|
|
|
|
|
-const activeName = ref('果树列表')
|
|
|
|
|
|
+const activeName = ref("果树列表");
|
|
// 用户角色
|
|
// 用户角色
|
|
store.commit("home/SET_USER_ROLE", 1);
|
|
store.commit("home/SET_USER_ROLE", 1);
|
|
|
|
|
|
@@ -116,18 +118,25 @@ onMounted(() => {
|
|
//区域切换监听事件
|
|
//区域切换监听事件
|
|
eventBus.on("area:id", areaId);
|
|
eventBus.on("area:id", areaId);
|
|
ROLE.value = store.state.home.userRole;
|
|
ROLE.value = store.state.home.userRole;
|
|
|
|
+ // 柏桥村
|
|
|
|
+ areaId({ areaId: 0, farmId: 80865 });
|
|
});
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
onUnmounted(() => {
|
|
|
|
+ if (mapRef.value) {
|
|
|
|
+ mapRef.value.destroy(); // 确保在自定义地图组件中实现了destroy方法
|
|
|
|
+ }
|
|
eventBus.off("area:id", areaId);
|
|
eventBus.off("area:id", areaId);
|
|
|
|
+ eventBus.off("changePointLegend", toggleLegend);
|
|
|
|
+ eventBus.off("clickMapPoint", toggleLeftComponet);
|
|
});
|
|
});
|
|
|
|
|
|
-const getPointList = () =>{
|
|
|
|
- let selectAll = undefined
|
|
|
|
|
|
+const getPointList = () => {
|
|
|
|
+ let selectAll = undefined;
|
|
if (regionId.value === 0) {
|
|
if (regionId.value === 0) {
|
|
- selectAll = 1
|
|
|
|
|
|
+ selectAll = 1;
|
|
}
|
|
}
|
|
- const areaId = selectAll ? undefined : regionId.value
|
|
|
|
|
|
+ const areaId = selectAll ? undefined : regionId.value;
|
|
VE_API.variety.pointList({ farmId: organId.value, regionId: areaId, selectAll }).then(({ data }) => {
|
|
VE_API.variety.pointList({ farmId: organId.value, regionId: areaId, selectAll }).then(({ data }) => {
|
|
// const arr = data.map(item =>{
|
|
// const arr = data.map(item =>{
|
|
// return{
|
|
// return{
|
|
@@ -136,60 +145,64 @@ const getPointList = () =>{
|
|
// lnglat:convertPointToArray(item.point)
|
|
// lnglat:convertPointToArray(item.point)
|
|
// }
|
|
// }
|
|
// })
|
|
// })
|
|
- if(mapRef.value){
|
|
|
|
|
|
+ if (mapRef.value) {
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
- data[0].icon = "1"
|
|
|
|
- data[1].icon = "1"
|
|
|
|
- data[10].icon = "2"
|
|
|
|
- data[20].icon = "2"
|
|
|
|
- data[30].icon = "2"
|
|
|
|
- data[35].icon = "1"
|
|
|
|
- data[40].icon = "1"
|
|
|
|
- data[50].icon = "2"
|
|
|
|
- mapRef.value.addCluster(data)
|
|
|
|
|
|
+ data[0].icon = "1";
|
|
|
|
+ data[1].icon = "1";
|
|
|
|
+ data[10].icon = "2";
|
|
|
|
+ data[20].icon = "2";
|
|
|
|
+ data[30].icon = "2";
|
|
|
|
+ data[35].icon = "1";
|
|
|
|
+ data[40].icon = "1";
|
|
|
|
+ data[50].icon = "2";
|
|
|
|
+ // 设置前50个对象的fosterStatus为1
|
|
|
|
+ for (let i = 0; i < 50 && i < data.length; i++) {
|
|
|
|
+ data[i].fosterStatus = 1;
|
|
|
|
+ }
|
|
|
|
+ mapRef.value.addCluster(data);
|
|
// mapRef.value.initData(arr)
|
|
// mapRef.value.initData(arr)
|
|
// mapRef.value.initMap(arr, () => mapRef.value.getRegionList(organId.value))
|
|
// mapRef.value.initMap(arr, () => mapRef.value.getRegionList(organId.value))
|
|
- })
|
|
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- })
|
|
|
|
-}
|
|
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
|
|
-const regionData = ref([])
|
|
|
|
|
|
+const regionData = ref([]);
|
|
function getBlueRegionList() {
|
|
function getBlueRegionList() {
|
|
- VE_API.region.list({farmId: organId.value}).then(({data}) =>{
|
|
|
|
- regionData.value = data
|
|
|
|
|
|
+ VE_API.region.list({ farmId: organId.value }).then(({ data }) => {
|
|
|
|
+ regionData.value = data;
|
|
mapRef.value.initAreaMap(data);
|
|
mapRef.value.initAreaMap(data);
|
|
- })
|
|
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
-const checkShow = ref(false)
|
|
|
|
-const hanldeCheck = () =>{
|
|
|
|
- checkShow.value = true
|
|
|
|
- mapRef.value.enableBoxSelect()
|
|
|
|
-}
|
|
|
|
|
|
+const checkShow = ref(false);
|
|
|
|
+const hanldeCheck = () => {
|
|
|
|
+ checkShow.value = true;
|
|
|
|
+ mapRef.value.enableBoxSelect();
|
|
|
|
+};
|
|
|
|
|
|
-const handleCancel = () =>{
|
|
|
|
- checkShow.value = false
|
|
|
|
|
|
+const handleCancel = () => {
|
|
|
|
+ checkShow.value = false;
|
|
// mapRef.value.clearSelection()
|
|
// mapRef.value.clearSelection()
|
|
- mapRef.value.stopBoxSelect()
|
|
|
|
-}
|
|
|
|
|
|
+ mapRef.value.stopBoxSelect();
|
|
|
|
+};
|
|
|
|
|
|
// 图例
|
|
// 图例
|
|
-const legendArr = ref([])
|
|
|
|
|
|
+const legendArr = ref([]);
|
|
|
|
|
|
const organId = ref("");
|
|
const organId = ref("");
|
|
const regionId = ref(null);
|
|
const regionId = ref(null);
|
|
const tabName = ref("");
|
|
const tabName = ref("");
|
|
const tabId = ref(0);
|
|
const tabId = ref(0);
|
|
-eventBus.off("changePointLegend", toggleLegend)
|
|
|
|
-eventBus.on("changePointLegend", toggleLegend)
|
|
|
|
-function toggleLegend({colorObj}) {
|
|
|
|
- legendArr.value = colorObj?.list
|
|
|
|
|
|
+eventBus.off("changePointLegend", toggleLegend);
|
|
|
|
+eventBus.on("changePointLegend", toggleLegend);
|
|
|
|
+function toggleLegend({ colorObj }) {
|
|
|
|
+ legendArr.value = colorObj?.list;
|
|
}
|
|
}
|
|
//选项卡事件监听
|
|
//选项卡事件监听
|
|
const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
|
|
const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
|
|
- eventBus.emit("changePointType", {legend, colorObj})
|
|
|
|
- legendArr.value = colorObj?.list
|
|
|
|
|
|
+ eventBus.emit("changePointType", { legend, colorObj });
|
|
|
|
+ legendArr.value = colorObj?.list;
|
|
tabName.value = name;
|
|
tabName.value = name;
|
|
tabId.value = id;
|
|
tabId.value = id;
|
|
// if (id === 0) {
|
|
// if (id === 0) {
|
|
@@ -202,7 +215,7 @@ function areaId({ areaId, farmId }) {
|
|
regionId.value = areaId;
|
|
regionId.value = areaId;
|
|
|
|
|
|
// 树点位
|
|
// 树点位
|
|
- getPointList()
|
|
|
|
|
|
+ getPointList();
|
|
// 分区
|
|
// 分区
|
|
if (!regionData.value.length) {
|
|
if (!regionData.value.length) {
|
|
// 全部区域
|
|
// 全部区域
|
|
@@ -215,14 +228,14 @@ const urlsIndex = ref(0);
|
|
|
|
|
|
const currentComponent = ref("leftTabs");
|
|
const currentComponent = ref("leftTabs");
|
|
|
|
|
|
-eventBus.on("clickMapPoint", toggleLeftComponet)
|
|
|
|
|
|
+eventBus.on("clickMapPoint", toggleLeftComponet);
|
|
function toggleLeftComponet() {
|
|
function toggleLeftComponet() {
|
|
- currentComponent.value = "treeDetail"
|
|
|
|
|
|
+ currentComponent.value = "treeDetail";
|
|
}
|
|
}
|
|
|
|
|
|
function backHome() {
|
|
function backHome() {
|
|
- currentComponent.value = "leftTabs"
|
|
|
|
- mapRef.value.resetCurrentTree()
|
|
|
|
|
|
+ currentComponent.value = "leftTabs";
|
|
|
|
+ mapRef.value.resetCurrentTree();
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -233,6 +246,7 @@ function backHome() {
|
|
position: absolute;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
|
.content {
|
|
.content {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -289,11 +303,11 @@ function backHome() {
|
|
width: 100px;
|
|
width: 100px;
|
|
}
|
|
}
|
|
.el-tabs__active-bar {
|
|
.el-tabs__active-bar {
|
|
- background-color: #2199F8;
|
|
|
|
|
|
+ background-color: #2199f8;
|
|
height: 1px;
|
|
height: 1px;
|
|
}
|
|
}
|
|
.el-tabs__item.is-active {
|
|
.el-tabs__item.is-active {
|
|
- color: #2199F8;
|
|
|
|
|
|
+ color: #2199f8;
|
|
}
|
|
}
|
|
.el-tabs__nav-wrap:after {
|
|
.el-tabs__nav-wrap:after {
|
|
height: 1px;
|
|
height: 1px;
|
|
@@ -381,25 +395,25 @@ function backHome() {
|
|
padding: 7px 16px;
|
|
padding: 7px 16px;
|
|
left: 460px;
|
|
left: 460px;
|
|
}
|
|
}
|
|
- .tips{
|
|
|
|
|
|
+ .tips {
|
|
position: fixed;
|
|
position: fixed;
|
|
z-index: 2;
|
|
z-index: 2;
|
|
top: 105px;
|
|
top: 105px;
|
|
width: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
- .text{
|
|
|
|
|
|
+ .text {
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
padding: 6px 16px;
|
|
padding: 6px 16px;
|
|
font-family: "PangMenZhengDao";
|
|
font-family: "PangMenZhengDao";
|
|
background: rgba(4, 3, 0, 0.6);
|
|
background: rgba(4, 3, 0, 0.6);
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
- span{
|
|
|
|
- color: #FFD489;
|
|
|
|
|
|
+ span {
|
|
|
|
+ color: #ffd489;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .right-button{
|
|
|
|
|
|
+ .right-button {
|
|
position: fixed;
|
|
position: fixed;
|
|
z-index: 2;
|
|
z-index: 2;
|
|
right: 460px;
|
|
right: 460px;
|
|
@@ -408,9 +422,9 @@ function backHome() {
|
|
font-family: "PangMenZhengDao";
|
|
font-family: "PangMenZhengDao";
|
|
padding: 16px 32px 20px 32px;
|
|
padding: 16px 32px 20px 32px;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- background: url('@/assets/images/foster-home/btn-bg.png') no-repeat center center /100% 100%;
|
|
|
|
|
|
+ background: url("@/assets/images/foster-home/btn-bg.png") no-repeat center center / 100% 100%;
|
|
}
|
|
}
|
|
- .center-button{
|
|
|
|
|
|
+ .center-button {
|
|
position: fixed;
|
|
position: fixed;
|
|
z-index: 2;
|
|
z-index: 2;
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -418,7 +432,7 @@ function backHome() {
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
bottom: 116px;
|
|
bottom: 116px;
|
|
- div{
|
|
|
|
|
|
+ div {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
width: 248px;
|
|
width: 248px;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -426,13 +440,13 @@ function backHome() {
|
|
font-family: "PangMenZhengDao";
|
|
font-family: "PangMenZhengDao";
|
|
color: #000;
|
|
color: #000;
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
- background: linear-gradient(0deg,#FFD887,#ED9E1E);
|
|
|
|
|
|
+ background: linear-gradient(0deg, #ffd887, #ed9e1e);
|
|
border: 2px solid rgba(255, 255, 255, 0.61);
|
|
border: 2px solid rgba(255, 255, 255, 0.61);
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
}
|
|
}
|
|
- .cancel{
|
|
|
|
|
|
+ .cancel {
|
|
margin-right: 20px;
|
|
margin-right: 20px;
|
|
- background: #EEEEEE;
|
|
|
|
|
|
+ background: #eeeeee;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.map-btn {
|
|
.map-btn {
|
|
@@ -507,7 +521,7 @@ function backHome() {
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
color: #ffd489;
|
|
color: #ffd489;
|
|
.tag {
|
|
.tag {
|
|
- border: 1px solid #FFD489;
|
|
|
|
|
|
+ border: 1px solid #ffd489;
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
display: inline-block;
|