@@ -5558,6 +5558,33 @@ export const constantRoutes = [ | |||
}, | |||
component: (resolve) => require(['@/views/contracted/village/employer/employer'], resolve) | |||
}, | |||
{ | |||
path: '/contracted/village/massif', | |||
name: 'contractedVillageMassif', | |||
meta: { | |||
title: '地块', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/contracted/village/massif/massif'], resolve) | |||
}, | |||
{ | |||
path: '/contracted/village/massifDetail', | |||
name: 'contractedVillageMassifDetail', | |||
meta: { | |||
title: '地块', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/contracted/village/massif/massifDetail'], resolve) | |||
}, | |||
{ | |||
path: '/contracted/village/map', | |||
name: 'contractedVillageMap', | |||
meta: { | |||
title: '地图', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/contracted/village/map/map'], resolve) | |||
}, | |||
]; | |||
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div class="app-container"> | |||
<van-nav-bar title="B村" left-arrow fixed placeholder @click-left="onClickLeft" /> | |||
<van-nav-bar title="B村" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" /> | |||
<div class="tap_block"> | |||
<p class="active">承包方</p> | |||
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div class="app-container"> | |||
<van-nav-bar left-arrow fixed placeholder @click-left="onClickLeft" > | |||
<van-nav-bar left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" > | |||
<template #title> | |||
<div class="tb_main"> | |||
B村 | |||
@@ -0,0 +1,172 @@ | |||
<template> | |||
<div class="app-container"> | |||
<van-nav-bar title="B村" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" /> | |||
<div class="head"> | |||
<div class="tap_block"> | |||
<p @click="$router.push({path:'/contracted/village/contractor'})">承包方</p> | |||
<p @click="$router.push({path:'/contracted/village/employer'})">发包方</p> | |||
<p @click="$router.push({path:'/contracted/village/massif'})">地块</p> | |||
<p class="active">地图</p> | |||
</div> | |||
</div> | |||
<div style="position:relative;"> | |||
<div class="legend_main"> | |||
<div class="legend"> | |||
<p class="legend_tt">图例 | |||
<img src="../../../../../static/images/contracted/map_icon_01.png" alt=""> | |||
</p> | |||
<div><i></i><p>承包地</p></div> | |||
<div><i></i><p>自留地</p></div> | |||
<div><i></i><p>机动地</p></div> | |||
<div><i></i><p>开荒地</p></div> | |||
<div><i></i><p>其他地</p></div> | |||
</div> | |||
<div class="legend_second"> | |||
<p class="legend_tt"> | |||
<img src="../../../../../static/images/contracted/map_icon_02.png" alt="">画图 | |||
</p> | |||
</div> | |||
</div> | |||
<div class="mapBox"></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Cookies from "js-cookie"; | |||
export default { | |||
name: "contractedVillageContractor", | |||
data() { | |||
return { | |||
loading:false, | |||
finished:true, | |||
value:'' | |||
}; | |||
}, | |||
created() { | |||
}, | |||
methods: { | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.app-container{ | |||
background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center; | |||
background-size: 100% 100%; | |||
height: 100vh; | |||
} | |||
/deep/ .van-nav-bar{ | |||
background: transparent; | |||
} | |||
/deep/ .van-nav-bar .van-icon{ | |||
color: #000000; | |||
} | |||
/deep/ .van-hairline--bottom::after{ | |||
border: none; | |||
} | |||
.head{ | |||
padding: 0 4vw; | |||
} | |||
.tap_block{ | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
background: #ebfaf2; | |||
padding: 2PX 4PX; | |||
border-radius: 10PX; | |||
margin-top: 1vh; | |||
.active{ | |||
background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||
box-shadow: 0 0 10PX #cccccc; | |||
color: #333333; | |||
} | |||
p{ | |||
width: 25%; | |||
text-align: center; | |||
padding: 5PX 0; | |||
border-radius: 10PX; | |||
color: #666666; | |||
} | |||
} | |||
.legend_main{ | |||
position: absolute; | |||
top: 2vh; | |||
right: 2vw; | |||
} | |||
.legend_second{ | |||
background: rgba(255,255,255,.5); | |||
padding: 2vh; | |||
border-radius: 10PX; | |||
margin-top: 2vh; | |||
} | |||
.legend_tt{ | |||
font-size: 16PX; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
img{ | |||
width: 20PX; | |||
} | |||
} | |||
.legend{ | |||
background: rgba(255,255,255,.5); | |||
padding: 2vh; | |||
border-radius: 10PX; | |||
div{ | |||
display: flex; | |||
align-items: center; | |||
margin-top: 2vh; | |||
i{ | |||
display: block; | |||
width: 15PX; | |||
height: 15PX; | |||
border: 1px solid; | |||
border-radius: 3PX; | |||
margin-right: 10PX; | |||
} | |||
&:nth-child(2) i{ | |||
background: rgba(12,255,0,.5); | |||
border-color: rgba(12,255,0,1); | |||
} | |||
&:nth-child(3) i{ | |||
background: rgba(255,137,5,.5); | |||
border-color: rgba(255,137,5,1); | |||
} | |||
&:nth-child(4) i{ | |||
background: rgba(246,255,0,.5); | |||
border-color: rgba(246,255,0,1); | |||
} | |||
&:nth-child(5) i{ | |||
background: rgba(168,0,255,.5); | |||
border-color: rgba(168,0,255,1); | |||
} | |||
&:nth-child(6) i{ | |||
background: rgba(0,234,255,.5); | |||
border-color: rgba(0,234,255,1); | |||
} | |||
} | |||
} | |||
.mapBox{ | |||
margin-top: 2vh; | |||
height: 88vh; | |||
width: 100%; | |||
background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||
} | |||
</style> |
@@ -1,12 +1,12 @@ | |||
<template> | |||
<div class="app-container"> | |||
<van-nav-bar title="B村" left-arrow fixed placeholder @click-left="onClickLeft" /> | |||
<van-nav-bar title="B村" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" /> | |||
<div class="tap_block"> | |||
<p class="active">承包方</p> | |||
<p @click="$router.push({path:'/contracted/village/contractor'})">承包方</p> | |||
<p @click="$router.push({path:'/contracted/village/employer'})">发包方</p> | |||
<p @click="$router.push({path:'/contracted/village/massif'})">地块</p> | |||
<p class="active">地块</p> | |||
<p @click="$router.push({path:'/contracted/village/map'})">地图</p> | |||
</div> | |||
@@ -27,21 +27,24 @@ | |||
</div> | |||
<div class="second_tap"> | |||
<p class="active">待调查 1553</p> | |||
<p>挂起 527</p> | |||
<p>已完成 321</p> | |||
<p class="active">承包</p> | |||
<p>自留</p> | |||
<p>机动</p> | |||
<p>开荒</p> | |||
<p>其他</p> | |||
</div> | |||
<p class="page_tab">自留地 <span>5153亩</span></p> | |||
<div class="list_main"> | |||
<van-row style="color: #888888;font-size: 14px;"> | |||
<van-col span="5">姓名</van-col> | |||
<van-col span="14">证件号</van-col> | |||
<van-col span="5">成员数</van-col> | |||
<van-col span="9">地块代码</van-col> | |||
<van-col span="10">地块名称</van-col> | |||
<van-col span="5">面积(亩)</van-col> | |||
</van-row> | |||
<van-swipe-cell v-for="(item,index) in 50"> | |||
<van-row @click="goDetail"> | |||
<van-col span="5">张三</van-col> | |||
<van-col span="14">230381199770511239</van-col> | |||
<van-col span="9">45412353553</van-col> | |||
<van-col span="10">西湖地地块名称</van-col> | |||
<van-col span="5" style="color: #f78200">7</van-col> | |||
</van-row> | |||
<template #right> | |||
@@ -50,7 +53,6 @@ | |||
</van-swipe-cell> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
@@ -75,7 +77,7 @@ | |||
}, | |||
goDetail(){ | |||
this.$router.push({path:'/contracted/village/contractorDetail'}); | |||
this.$router.push({path:'/contracted/village/massifDetail'}); | |||
} | |||
}, | |||
}; | |||
@@ -171,14 +173,28 @@ | |||
} | |||
} | |||
.page_tab{ | |||
position: absolute; | |||
background: rgba(255,255,255,.5); | |||
padding: 3PX 10PX 15PX; | |||
color: #828282; | |||
right: 4vw; | |||
border-top-left-radius: 10PX; | |||
border-top-right-radius: 10PX; | |||
margin-top: 1.5vh; | |||
span{ | |||
color: #f78200; | |||
} | |||
} | |||
.list_main{ | |||
margin-top: 2vh; | |||
margin-top: 4vh; | |||
overflow-y: scroll; | |||
text-align: center; | |||
background: #ffffff; | |||
border-top-left-radius: 10PX; | |||
border-top-right-radius: 10PX; | |||
height: 77vh; | |||
height: 75vh; | |||
overflow-y: scroll; | |||
.van-col{ | |||
padding: 15PX 0; | |||
@@ -0,0 +1,349 @@ | |||
<template> | |||
<div class="app-container"> | |||
<van-nav-bar left-arrow fixed placeholder @click-left="onClickLeft" > | |||
<template #title> | |||
<div class="tb_main"> | |||
B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p> | |||
</div> | |||
</template> | |||
</van-nav-bar> | |||
<div class="tap_block"> | |||
<p @click="$router.push({path:'/contracted/village/contractor'})">承包方</p> | |||
<p @click="$router.push({path:'/contracted/village/employer'})">发包方</p> | |||
<p class="active">地块</p> | |||
<p @click="$router.push({path:'/contracted/village/map'})">地图</p> | |||
</div> | |||
<div class="list_main"> | |||
<van-field v-model="value" label="地块代码:" placeholder="请输入地块代码" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="地块名称:" placeholder="请输入地块名称" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="所有权性质:" | |||
placeholder="请选择所有权性质" | |||
required | |||
:border="false" | |||
input-align="right" | |||
right-icon="arrow-down" | |||
label-width="auto" | |||
readonly | |||
clickable | |||
@click="showType = true" | |||
/> | |||
<van-popup v-model="showSYQXZ" position="bottom"> | |||
<van-picker | |||
show-toolbar | |||
:columns="typeOptions" | |||
value-key="dictLabel" | |||
@confirm="onConfirmTypeOptions" | |||
@cancel="showSYQXZ = false" | |||
/> | |||
</van-popup> | |||
<van-field v-model="value" label="地块类别:" | |||
placeholder="请选择地块类别" | |||
required | |||
:border="false" | |||
input-align="right" | |||
right-icon="arrow-down" | |||
label-width="auto" | |||
readonly | |||
clickable | |||
@click="showZjType = true" | |||
/> | |||
<van-popup v-model="showDKLB" position="bottom"> | |||
<van-picker | |||
show-toolbar | |||
:columns="zjTypeOptions" | |||
value-key="dictLabel" | |||
@confirm="onConfirmZjTypeOptions" | |||
@cancel="showDKLB = false" | |||
/> | |||
</van-popup> | |||
<van-field v-model="value" label="土地利用类型:" | |||
placeholder="请选择土地利用类型" | |||
required | |||
:border="false" | |||
input-align="right" | |||
right-icon="arrow-down" | |||
label-width="auto" | |||
readonly | |||
clickable | |||
@click="showType = true" | |||
/> | |||
<van-popup v-model="showType" position="bottom"> | |||
<van-picker | |||
show-toolbar | |||
:columns="typeOptions" | |||
value-key="dictLabel" | |||
@confirm="onConfirmTypeOptions" | |||
@cancel="showType = false" | |||
/> | |||
</van-popup> | |||
<van-field v-model="value" label="地力等级:" | |||
placeholder="请选择地力等级" | |||
required | |||
:border="false" | |||
input-align="right" | |||
right-icon="arrow-down" | |||
label-width="auto" | |||
readonly | |||
clickable | |||
@click="showZjType = true" | |||
/> | |||
<van-popup v-model="showZjType" position="bottom"> | |||
<van-picker | |||
show-toolbar | |||
:columns="zjTypeOptions" | |||
value-key="dictLabel" | |||
@confirm="onConfirmZjTypeOptions" | |||
@cancel="showZjType = false" | |||
/> | |||
</van-popup> | |||
<van-field v-model="value" label="土地用途:" | |||
placeholder="请选择土地用途" | |||
required | |||
:border="false" | |||
input-align="right" | |||
right-icon="arrow-down" | |||
label-width="auto" | |||
readonly | |||
clickable | |||
@click="showTDYT = true" | |||
/> | |||
<van-popup v-model="showTDYT" position="bottom"> | |||
<van-picker | |||
show-toolbar | |||
:columns="TDYTOptions" | |||
value-key="dictLabel" | |||
@confirm="onConfirmTDYTOptions" | |||
@cancel="showTDYT = false" | |||
/> | |||
</van-popup> | |||
<van-field v-model="value" label="基本农田:" required :border="false" input-align="right" > | |||
<template #input> | |||
<van-radio-group v-model="radio" direction="horizontal"> | |||
<van-radio name="1">是</van-radio> | |||
<van-radio name="2">否</van-radio> | |||
</van-radio-group> | |||
</template> | |||
</van-field> | |||
<van-field v-model="value" label="实测面积(亩):" placeholder="请输入实测面积(亩)" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="指界:" placeholder="请输入指界" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="东面:" placeholder="请输入东面" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="西面:" placeholder="请输入西面" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="南面:" placeholder="请输入南面" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="北面:" placeholder="请输入北面" required :border="false" input-align="right" label-width="auto" /> | |||
<van-field v-model="value" label="备注:" placeholder="请输入备注" required :border="false" input-align="right" label-width="auto" /> | |||
<div class="mapBox"></div> | |||
<p class="btn">保存</p> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Cookies from "js-cookie"; | |||
export default { | |||
name: "contractedVillageContractor", | |||
data() { | |||
return { | |||
loading:false, | |||
finished:true, | |||
value:'', | |||
showType:false, | |||
showZjType:false, | |||
showTDYT:false, | |||
showSYQXZ:false, | |||
showDKLB:false, | |||
typeOptions:[{ | |||
dictLabel:'类型1', | |||
dictValue:'1', | |||
}], | |||
zjTypeOptions:[{ | |||
dictLabel:'类型2', | |||
dictValue:'1', | |||
}], | |||
TDYTOptions:[{ | |||
dictLabel:'类型2', | |||
dictValue:'1', | |||
}], | |||
radio:1, | |||
minDate: new Date(2020, 0, 1), | |||
maxDate: new Date(2025, 10, 1), | |||
currentDate: new Date(2021, 0, 17), | |||
}; | |||
}, | |||
created() { | |||
}, | |||
methods: { | |||
getList(){ | |||
}, | |||
onSearch(){ | |||
}, | |||
onConfirmTypeOptions(){ | |||
}, | |||
onConfirmZjTypeOptions(){ | |||
}, | |||
onConfirmTDYTOptions(){ | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.app-container{ | |||
background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center; | |||
background-size: 100% 100%; | |||
height: 100vh; | |||
padding: 0 4vw; | |||
overflow: hidden; | |||
} | |||
/deep/ .van-nav-bar{ | |||
background: transparent; | |||
} | |||
/deep/ .van-nav-bar .van-icon{ | |||
color: #000000; | |||
} | |||
/deep/ .van-hairline--bottom::after{ | |||
border: none; | |||
} | |||
/deep/ .van-search__content{ | |||
background: rgba(255,255,255,.5); | |||
} | |||
/deep/ .van-search{ | |||
padding: 0; | |||
flex: 1; | |||
} | |||
/deep/ .van-ellipsis{ | |||
overflow: initial; | |||
} | |||
.tb_main{ | |||
position: relative; | |||
p{ | |||
position: absolute; | |||
display: inline-block; | |||
margin-left: 10PX; | |||
} | |||
} | |||
.tb{ | |||
font-size: 12px; | |||
color: #ff8900; | |||
background: #daf6e7; | |||
border: 1px solid #d7be6e; | |||
padding: 2PX 8PX; | |||
border-radius: 50PX; | |||
margin-right: 5PX; | |||
} | |||
.tap_block{ | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
background: #ebfaf2; | |||
padding: 2PX 4PX; | |||
border-radius: 10PX; | |||
margin-top: 1vh; | |||
.active{ | |||
background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||
box-shadow: 0 0 10PX #cccccc; | |||
color: #333333; | |||
} | |||
p{ | |||
width: 25%; | |||
text-align: center; | |||
padding: 5PX 0; | |||
border-radius: 10PX; | |||
color: #666666; | |||
} | |||
} | |||
.search_main{ | |||
display: flex; | |||
margin-top: 2vh; | |||
.search_btn{ | |||
background: rgba(255,255,255,.5); | |||
width: 25%; | |||
border-radius: 50PX; | |||
margin-left: 10PX; | |||
padding: 2PX; | |||
.active{ | |||
background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||
color: #333333; | |||
border-radius: 50PX; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
} | |||
} | |||
} | |||
.second_tap{ | |||
display: flex; | |||
align-items: center; | |||
margin-top: 1vh; | |||
p{ | |||
background: #dbf1ea; | |||
border: 1px solid #cdcdcd; | |||
color: #5f5f5f; | |||
padding: 5PX 15PX; | |||
margin-right: 3vw; | |||
border-radius: 50PX; | |||
} | |||
.active{ | |||
background: #99eecb; | |||
border-color: #48e5a2; | |||
color: #333333; | |||
} | |||
} | |||
.list_main{ | |||
margin-top: 2vh; | |||
overflow-y: scroll; | |||
text-align: center; | |||
background: #ffffff; | |||
border-top-left-radius: 10PX; | |||
border-top-right-radius: 10PX; | |||
height: 88vh; | |||
.btn{ | |||
background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||
box-shadow: 0 0 10PX #cccccc; | |||
padding: 10PX 0PX; | |||
border-radius: 50PX; | |||
display: inline-block; | |||
width: 40%; | |||
margin-top: 2vh; | |||
} | |||
} | |||
.mapBox{ | |||
width: 94%; | |||
height: 50vw; | |||
background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||
border-radius: 10PX; | |||
margin: 2vh auto; | |||
} | |||
</style> |