<template>
<div >
<el-container
v-if="mineSurveyAndGovernStatus.mineSurveyStatus==='历史遗留矿山'&&mineSurveyAndGovernStatus.governState==='已治理(含自然修复)'">
<el-aside width="260px" style="border: 1px #dcdfe6 solid;" >
<div style="margin-bottom: 10px;color: #045fb3" v-if="surveyDetailCompleteFormArr.length===0">请填写图斑</div>
<el-tag
:class='index===isActive?"isActive":"notActive"'
style="margin-bottom: 10px"
:key="index"
v-for="(value,index) in surveyDetailCompleteFormArr"
closable
:disable-transitions="false"
@close="handleCompleteClose(value)"
@click="selectCompleteTag(index)">
<el-input v-model="value.remoteSensingSpotNumber"></el-input>
</el-tag>
<el-input
class="input-new-tag"
v-if="completeInputVisible"
v-model="completeInputValue"
ref="completeInputRef"
size="small"
@keyup.enter.native="handleCompleteInputConfirm"
@blur="handleCompleteInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showCompleteInput" style="border-radius: 4px"
type="primary" plain ><i style="margin-right: 5px" class="icon iconfont iconicon_add_data"></i>新增图斑
</el-button>
</el-aside>
<el-main style="margin-left: 20px">
<div style=" 100%">
<div v-for="(value,index) in surveyDetailCompleteFormArr" :key="index">
<div v-show="completeIndex===index">
<div class="title">历史遗留矿山调查基本情况（已治理的）</div>
<table border class="mine-survey-table">
<tr>
<td rowspan="5" class="label-info-survey">修复方式及面积（公顷）：</td>
</tr>
<tr>
<td class="label-info-survey">自然修复：</td>
<td class="center" colspan="3">
<el-input-number :controls="false"
v-model="value.naturalRepair" :precision="2"
:step="0.1"></el-input-number>
</td>
</tr>
<tr>
<td rowspan="3" class="label-info-survey">人工修复：</td>
</tr>
<tr>
<td class="label-info-survey">面积：</td>
<td class="center" colspan="2">
<el-input-number :controls="false"
v-model="value.artificialRepairArea" :precision="2"
:step="0.1"></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">投入资金(万元)：</td>
<td class="center" colspan="2">
<el-input-number :controls="false" v-model="value.investedCapital"
:precision="2" :step="0.1"></el-input-number>
</td>
</tr>
<tr>
<td rowspan="5" class="label-info-survey">修复土地资源（公顷）：</td>
</tr>
<tr>
<td class="label-info-survey">耕地：</td>
<td class="center">
<el-input-number :controls="false" v-model="value.arableLand"
:precision="2" :step="0.1"></el-input-number>
</td>
<td class="label-info-survey">种植园用地：</td>
<td class="center">
<el-input-number :controls="false" v-model="value.plantationLand"
:precision="2" :step="0.1"></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">林地：</td>
<td class="center">
<el-input-number :controls="false" v-model="value.woodLand"
:precision="2" :step="0.1"></el-input-number>
</td>
<td class="label-info-survey">草地：</td>
<td class="center">
<el-input-number :controls="false" v-model="value.grassLand"
:precision="2" :step="0.1"></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">建设用地：</td>
<td class="center">
<el-input-number :controls="false" v-model="value.constructionLand"
:precision="2" :step="0.1"></el-input-number>
</td>
<td class="label-info-survey">其他：</td>
<td class="center">
<el-input-number :controls="false" v-model="value.otherLand"
:precision="2" :step="0.1"></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">小计：</td>
<td class="center" colspan="3">
<el-input-number :controls="false" v-model="value.landSubtotal" disabled
:precision="2" :step="0.1"></el-input-number>
</td>
</tr>
</table>
</div>
</div>
</div>
</el-main>
</el-container>
<el-container style="height: 100%" v-if="mineSurveyAndGovernStatus.mineSurveyStatus==='历史遗留矿山'&&mineSurveyAndGovernStatus.governState==='拟治理'">
<el-aside width="260px" style="border: 1px #dcdfe6 solid;height: 689px;overflow-y: auto">
<div style="margin-bottom: 10px;color: #045fb3" v-if="surveyDetailPlanFormArr.length===0">请填写图斑</div>
<el-tag
:class='index===isActive?"isActive":"notActive"'
style="margin-bottom: 10px"
:key="index"
v-for="(value2,index) in surveyDetailPlanFormArr"
closable
:disable-transitions="false"
@close="handlePlanClose(value2)"
@click="selectPlanTag(index)">
<el-input v-model="value2.remoteSensingSpotNumber"></el-input>
</el-tag>
<el-input
class="input-new-tag"
v-if="planInputVisible"
v-model="planInputValue"
ref="planInputRef"
size="small"
@keyup.enter.native="handlePlanInputConfirm"
@blur="handlePlanInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showPlanInput" style="border-radius: 4px"
type="primary" plain
><i style="margin-right: 5px" class="icon iconfont iconicon_add_data"></i>新增图斑
</el-button>
</el-aside>
<el-main style="margin-left: 20px;height: 689px">
<div style=" 100%">
<div v-for="(value2, index) in surveyDetailPlanFormArr" >
<div v-show="planIndex===index">
<table border border class="mine-survey-table">
<tr>
<td colspan="6"
style="text-align: center;background-color:#e1eaf4;font-weight: bold">
历史遗留矿山调查基本情况一览表（拟治理的）
</td>
</tr>
<tr>
<td colspan="6" style="text-align: left">损毁土地资源(单位：公顷)</td>
</tr>
<tr>
<td class="label-info-survey">耕地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.arableLand" :precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">种植园用地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.plantationLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">林地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.woodLand" :precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">草地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.grassLand" :precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">建设用地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.constructionLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">其他：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.otherLand" :precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">小计：</td>
<el-input-number :controls="false" v-model="value2.damagedLandSubtotal"
:precision="2"
:step="0.1" disabled
></el-input-number>
</tr>
<tr>
<td class="label-info-survey">土地权属：</td>
<td colspan="3" class="label-info-survey-value">
<el-input v-model="value2.landOwnership"
></el-input>
</td>
<td class="label-info-survey">是否在生态红线内：</td>
<td class="label-info-survey-value">
<el-radio-group v-model="value2.ecologicalRedLine">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</td>
</tr>
<tr>
<td class="label-info-survey">主要问题：</td>
<td colspan="6" class="label-info-survey-value">
<el-input type="textarea" v-model="value2.mainProblem"></el-input>
</td>
</tr>
<tr>
<td colspan="6"
style="text-align: center;background-color:#e1eaf4;font-weight: bold">
历史遗留矿山生态修复工作部署一览表
</td>
</tr>
<tr>
<td colspan="6" style="text-align: left">拟修复方向及面积(单位：公顷)</td>
</tr>
<tr>
<td class="label-info-survey">自然修复：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.naturalRepair" :precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">绿化修复：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.greeningRepair"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">工程治理：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.projectRepair" :precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">小计：</td>
<td class="label-info-survey-value" colspan="5">
<el-input-number :controls="false" v-model="value2.repairSubtotal"
:precision="2"
:step="0.1" disabled
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">治理投入经费(万元)：</td>
<td colspan="2" class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.repairInvestedCapital"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">产生废弃土石料(万吨)：</td>
<td colspan="2" class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.produceWaste" :precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">拟修复起止时间：</td>
<td colspan="5" class="label-info-survey-value">
<el-date-picker
v-model="value2.intendedRepairTimeStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
至
<el-date-picker
v-model="value2.intendedRepairTimeEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</td>
</tr>
<tr>
<td class="label-info-survey">拟验收时间(初验)：</td>
<td class="label-info-survey-value">
<el-date-picker
v-model="value2.acceptanceTimeStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</td>
<td class="label-info-survey">拟验收时间(验收)：</td>
<td class="label-info-survey-value">
<el-date-picker
v-model="value2.acceptanceTimeEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</td>
<td class="label-info-survey">任务核销计划时间：</td>
<td colspan="5" class="label-info-survey-value">
<el-date-picker
v-model="value2.taskCancelPlanTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</td>
</tr>
<tr>
<td colspan="6"
style="text-align: center;background-color:#e1eaf4;font-weight: bold">
历史遗留矿山生态修复预期成果表
</td>
</tr>
<tr>
<td colspan="6" style="text-align: left">土地资源修复成果(单位：公顷)</td>
</tr>
<tr>
<td class="label-info-survey">耕地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.resultArableLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">种植园用地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.resultPlantationLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">林地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.resultWoodLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">草地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.resultGrassLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">建设用地：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.resultConstructionLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">其他：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.resultOtherLand"
:precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">小计：</td>
<td class="label-info-survey-value" colspan="5">
<el-input-number :controls="false" v-model="value2.resultLandSubtotal"
:precision="2"
:step="0.1" disabled
></el-input-number>
</td>
</tr>
<tr>
<td colspan="6" style="text-align: left">资源利用修复效益(单位：万元)</td>
</tr>
<tr>
<td class="label-info-survey">土地资源利用收益：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.landUseEarnings"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">废弃土石料处置收益：</td>
<td class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.wasteDisposalEarnings"
:precision="2"
:step="0.1"
></el-input-number>
</td>
<td class="label-info-survey">小计：</td>
<td class="label-info-survey-value" colspan="3">
<el-input-number :controls="false" v-model="value2.earningsSubtotal"
:precision="2"
:step="0.1" disabled
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">治理投入经费(万元)：</td>
<td colspan="5" class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.resultInvestedCapital"
:precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
<tr>
<td class="label-info-survey">投产比：</td>
<td colspan="5" class="label-info-survey-value">
<el-input-number :controls="false" v-model="value2.productionThan"
:precision="2"
:step="0.1"
></el-input-number>
</td>
</tr>
</table>
</div>
</div>
</div>
</el-main>
</el-container>
<div v-if="mineSurveyAndGovernStatus.mineSurveyStatus==='生产/在建矿山'&&mineSurveyAndGovernStatus.governState==='已治理(含自然修复)'">
<table border class="mine-survey-table">
<tr>
<td class="label-info-survey">
是否有证：
</td>
<td>
<el-radio-group v-model="surveyDetailCompleteForm.hasLicense">
<el-radio label="有证"></el-radio>
<el-radio label="无证"></el-radio>
</el-radio-group>
</td>
</tr>
<tr v-if="surveyDetailCompleteForm.hasLicense==='有证'">
<td class="label-info-survey">采矿许可证号：</td>
<td colspan="6" class="label-info-survey-value">
<el-input v-model="surveyDetailCompleteForm.licenseNumber"></el-input>
</td>
</tr>
</table>
</div>
<div v-if="mineSurveyAndGovernStatus.mineSurveyStatus==='生产/在建矿山'&&mineSurveyAndGovernStatus.governState==='拟治理'">
<table border class="mine-survey-table">
<tr>
<td class="label-info-survey">
是否有证：
</td>
<td>
<el-radio-group v-model="surveyDetailPlanForm.hasLicense">
<el-radio label="有证"></el-radio>
<el-radio label="无证"></el-radio>
</el-radio-group>
</td>
</tr>
<tr v-if="surveyDetailPlanForm.hasLicense==='有证'">
<td class="label-info-survey">采矿许可证号：</td>
<td colspan="6" class="label-info-survey-value">
<el-input v-model="surveyDetailPlanForm.licenseNumber"></el-input>
</td>
</tr>
</table>
</div>
</div>
</template>
<script lang="ts">
import {Component, Ref, Vue, Prop, Watch} from 'vue-property-decorator'
import {Action, Getter} from 'vuex-class';
@Component
export default class StepTwo extends Vue {
@Prop(Object) mineSurveyAndGovernStatus!: any
mineId: any = ''
surveyDetailCompleteForm: any = {}
surveyDetailPlanForm: any = {}
landSubtotal: any = '';
//损毁土地资源小计
damagedLandSubtotal: any = 0
//拟修复方向及面积-小计
repairSubtotal: any = 0
//土地资源修复成果-小计
resultLandSubtotal: any = 0
//资源利用修复效益-小计
earningsSubtotal: any = 0
surveyDetailCompleteFormArr: Array<object> = []
surveyDetailPlanFormArr: Array<object> = []
completeInputVisible: any = false
completeInputValue: any = ''
completeIndex: any = 0;
planInputVisible: any = false
planInputValue: any = ''
planIndex: any = 0;
isActive:any=0;
handleCompleteClose(tag: any) {
this.surveyDetailCompleteFormArr.splice(this.surveyDetailCompleteFormArr.indexOf(tag), 1);
this.completeIndex=0
this.isActive=0
}
showCompleteInput() {
this.completeInputVisible = true;
this.$nextTick(() => {
//this.saveTagInput.input.focus();
this.$refs.completeInputRef.$refs.input.focus();
});
}
handleCompleteInputConfirm() {
if (this.completeInputValue) {
let obj = {
mineId:this.mineId,
remoteSensingSpotNumber: this.completeInputValue,
landSubtotal:''
}
this.surveyDetailCompleteFormArr.push(obj);
}
this.completeInputVisible = false;
this.completeInputValue = '';
}
selectCompleteTag(index: any) {
console.log(index)
this.completeIndex = index
this.isActive=index
}
handlePlanClose(tag: any) {
this.surveyDetailPlanFormArr.splice(this.surveyDetailPlanFormArr.indexOf(tag), 1);
this.planIndex=0
this.isActive=0
}
showPlanInput() {
this.planInputVisible = true;
this.$nextTick(() => {
//this.saveTagInput.input.focus();
this.$refs.planInputRef.$refs.input.focus();
});
}
handlePlanInputConfirm() {
if (this.planInputValue) {
let obj = {
mineId:this.mineId,
remoteSensingSpotNumber: this.planInputValue,
damagedLandSubtotal:'',
repairSubtotal:'',
resultLandSubtotal:'',
earningsSubtotal:''
}
this.surveyDetailPlanFormArr.push(obj);
}
this.planInputVisible = false;
this.planInputValue = '';
}
selectPlanTag(index: any) {
console.log(index)
this.planIndex = index
this.isActive=index
}
mounted() {
this.getRouteParam()
}
getRouteParam() {
let data = this.$route.query;
this.mineId = data.id
}
@Watch('surveyDetailCompleteFormArr', {deep: true, immediate: true})
watchSurveyDetailCompleteFormArr(newVal: any, oldVal: any) {
if (newVal.length != 0) {
for (let i = 0; i < newVal.length; i++) {
newVal[i].landSubtotal = newVal[i].arableLand + newVal[i].plantationLand + newVal[i].woodLand + newVal[i].grassLand + newVal[i].constructionLand + newVal[i].otherLand
}
}
}
@Watch('surveyDetailPlanFormArr', {deep: true, immediate: true})
watchSurveyDetailPlanFormArr(newVal: any, oldVal: any) {
if (newVal.length != 0) {
for (let i = 0; i < newVal.length; i++) {
newVal[i].damagedLandSubtotal = newVal[i].arableLand + newVal[i].plantationLand + newVal[i].woodLand + newVal[i].grassLand + newVal[i].constructionLand + newVal[i].otherLand
newVal[i].repairSubtotal = newVal[i].naturalRepair + newVal[i].greeningRepair + newVal[i].projectRepair
newVal[i].resultLandSubtotal = newVal[i].resultArableLand + newVal[i].resultPlantationLand + newVal[i].resultWoodLand + newVal[i].resultGrassLand + newVal[i].resultConstructionLand + newVal[i].resultOtherLand
newVal[i].earningsSubtotal = newVal[i].landUseEarnings + newVal[i].wasteDisposalEarnings
}
}
}
}
</script>
<style scoped lang="scss">
/deep/ .el-tag {
200px !important;
height: 42px;
background-color: #f7f7f7;
border-color: #f7f7f7;
}
/deep/ .input-new-tag {
border: 1px #71C6FF solid;
200px;
border-radius: 4px;
}
/deep/.el-tag .el-icon-close{
right: -12px!important;
}
/deep/.el-tag>.el-input>.el-input__inner{
text-align: center!important;
}
.isActive{
border-color: #71C6FF;
}
.notActive{
border-color: #DCDFE6;
}
.label-info-survey {
230px;
text-align: right !important;
}
.mine-survey-table {
border-collapse: collapse;
border: 1px solid #dcdfe6;
100%;
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
td {
padding: 3px;
text-align: left;
height: 45px;
}
}
.title {
font-family: MicrosoftYaHei-Bold;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 49px;
letter-spacing: 0px;
color: #029ccf;
}
.border {
border: 1px #CBDDEE solid;
}
/deep/ .el-tabs__nav-scroll {
border: 1px #dcdfe6 solid;
}
/deep/ .el-form-item {
margin-bottom: 0 !important;
}
/deep/ .el-input__inner {
border: none;
}
/deep/ .el-textarea__inner {
border: none
}
/deep/ .el-tabs__active-bar {
background-color: #ffffff;
}
/deep/ .el-tabs el-tabs--left {
100% !important;
}
/deep/ .el-tabs--left .el-tabs__header.is-left {
margin-top: 60px !important;
}
/deep/.el-input__inner {
border: none;
background-color: #f7f7f7;
}
/deep/.el-textarea__inner{
border:none;
background-color: #f7f7f7;
}
</style>
效果展示：
