zhangzl
/
rongxin.dashboard
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
管理系统PC端
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
64 Commits
1 Branch
5.5 MiB
 
 
 
 
Struktur: 809bf6fc6f
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „809bf6fc6f“
${ noResults }
rongxin.dashboard/src/views/resource/land/index.vue

1186 Zeilen
49 KiB
Originalformat Blame Verlauf 

  1. <template>

  2.   <div class="app-container">

  3.     <el-row :gutter="20">

  4.       <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">

  5.         <!--部门数据-->

  6.         <pane size="16">

  7.           <el-col>

  8.             <div class="head-container">

  9.               <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />

  10.             </div>

  11.             <div class="head-container container_main">

  12.               <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />

  13.             </div>

  14.           </el-col>

  15.         </pane>

  16.         <!--用户数据-->

  17.         <pane size="84">

  18.           <el-col>

  19. 

  20.             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

  21.               <el-form-item label="地块代码" prop="dkbm">

  22.                 <el-input v-model="queryParams.dkbm" placeholder="请输入地块代码" clearable @keyup.enter.native="handleQuery"/>

  23.               </el-form-item>

  24.               <el-form-item label="地块名称" prop="dkmc">

  25.                 <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/>

  26.               </el-form-item>

  27.               <el-form-item label="权属性质" prop="syqxz">

  28.                 <el-select v-model="queryParams.syqxz" placeholder="请选择所有权性质" clearable>

  29.                   <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  30.                 </el-select>

  31.               </el-form-item>

  32.               <el-form-item label="地块类别" prop="dklb">

  33.                 <el-select v-model="queryParams.dklb" placeholder="请选择地块类别" clearable>

  34.                   <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  35.                 </el-select>

  36.               </el-form-item>

  37.               <el-form-item label="利用类型" prop="tdlylx">

  38.                 <el-select v-model="queryParams.tdlylx" placeholder="请选择土地利用类型" clearable>

  39.                   <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"/>

  40.                 </el-select>

  41.               </el-form-item>

  42.               <el-form-item label="地力等级" prop="dldj">

  43.                 <el-select v-model="queryParams.dldj" placeholder="请选择地力等级" clearable>

  44.                   <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  45.                 </el-select>

  46.               </el-form-item>

  47.               <el-form-item label="土地用途" prop="tdyt">

  48.                 <el-select v-model="queryParams.tdyt" placeholder="请选择土地用途" clearable>

  49.                   <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  50.                 </el-select>

  51.               </el-form-item>

  52.               <el-form-item label="基本农田" prop="sfjbnt">

  53.                 <el-select v-model="queryParams.sfjbnt" placeholder="请选择是否基本农田" clearable>

  54.                   <el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>

  55.                 </el-select>

  56.               </el-form-item>

  57.               <!--<el-form-item label="是账外地" prop="sfzwd">

  58.                 <el-select v-model="queryParams.sfzwd" placeholder="请选择是否账外地" clearable>

  59.                   <el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>

  60.                 </el-select>

  61.               </el-form-item>-->

  62.               <el-form-item label="调查状态" prop="surveyStatus">

  63.                 <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态" clearable>

  64.                   <el-option v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.label" :value="dict.value"/>

  65.                 </el-select>

  66.               </el-form-item>

  67.               <el-form-item>

  68.                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

  69.                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

  70.               </el-form-item>

  71.             </el-form>

  72. 

  73.             <el-row :gutter="10" class="mb8">

  74.               <el-col :span="1.5">

  75.                 <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['resource:land:add']">新增</el-button>

  76.               </el-col>

  77.               <!--

  78.               <el-col :span="1.5">

  79.                 <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['resource:land:edit']">修改</el-button>

  80.               </el-col>

  81.               <el-col :span="1.5">

  82.                 <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['resource:land:remove']">删除</el-button>

  83.               </el-col>

  84.               -->

  85.               <el-col :span="1.5">

  86.                   <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['resource:land:import']">导入</el-button>

  87.               </el-col>

  88.               <el-col :span="1.5">

  89.                 <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['resource:land:export']">导出</el-button>

  90.               </el-col>

  91.               <el-col :span="1.5">

  92.                   <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['resource:land:print']">打印</el-button>

  93.               </el-col>

  94.               <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

  95.             </el-row>

  96. 

  97.               <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->

  98.             <el-table v-loading="loading" :data="landList" border>

  99.                 <!--<el-table-column type="selection" width="55" align="center" />

  100.               <el-table-column label="fid " align="center" prop="fid"  min-width="60"/>-->

  101.               <el-table-column label="地块代码" align="center" prop="dkbm" min-width="180" show-overflow-tooltip />

  102.               <el-table-column label="地块名称" align="left" prop="dkmc" min-width="120" show-overflow-tooltip />

  103.              <!-- <el-table-column label="所有权性质" align="center" prop="syqxz">

  104.                 <template slot-scope="scope">

  105.                   <dict-tag :options="dict.type.ownership_type" :value="scope.row.syqxz"/>

  106.                 </template>

  107.               </el-table-column>-->

  108.               <el-table-column label="地块类别" align="center" prop="dklb" min-width="80" show-overflow-tooltip>

  109.                 <template slot-scope="scope">

  110.                   <dict-tag :options="dict.type.land_type" :value="scope.row.dklb"/>

  111.                 </template>

  112.               </el-table-column>

  113.               <!--<el-table-column label="土地利用类型" align="center" prop="tdlylx">

  114.                 <template slot-scope="scope">

  115.                   <dict-tag :options="dict.type.land_use" :value="scope.row.tdlylx"/>

  116.                 </template>

  117.               </el-table-column>

  118.               <el-table-column label="地力等级" align="center" prop="dldj">

  119.                 <template slot-scope="scope">

  120.                   <dict-tag :options="dict.type.land_grade_type" :value="scope.row.dldj"/>

  121.                 </template>

  122.               </el-table-column>

  123.               <el-table-column label="土地用途" align="center" prop="tdyt">

  124.                 <template slot-scope="scope">

  125.                   <dict-tag :options="dict.type.land_use_type" :value="scope.row.tdyt"/>

  126.                 </template>

  127.               </el-table-column>

  128.               <el-table-column label="是否基本农田" align="center" prop="sfjbnt">

  129.                 <template slot-scope="scope">

  130.                   <dict-tag :options="dict.type.is_common" :value="scope.row.sfjbnt"/>

  131.                 </template>

  132.               </el-table-column>-->

  133.               <el-table-column label="地块四至" align="center">

  134.                 <el-table-column label="地块东至" align="left" prop="dkdz" min-width="100" show-overflow-tooltip />

  135.                 <el-table-column label="地块西至" align="left" prop="dkxz" min-width="100" show-overflow-tooltip />

  136.                 <el-table-column label="地块南至" align="left" prop="dknz" min-width="100" show-overflow-tooltip />

  137.                 <el-table-column label="地块北至" align="left" prop="dkbz" min-width="100" show-overflow-tooltip />

  138.               </el-table-column>

  139.               <!--<el-table-column label="备注信息" align="center" prop="dkbzxx" />

  140.               <el-table-column label="指界人姓名" align="center" prop="zjrxm" />

  141.               <el-table-column label="图显面积 " align="center" prop="txmj" />-->

  142.               <el-table-column label="实测面积" align="center" prop="scmjm" min-width="80" show-overflow-tooltip/>

  143.               <el-table-column label="调查状态" align="center" prop="surveyStatus" min-width="80" show-overflow-tooltip>

  144.                 <template slot-scope="scope">

  145.                   <dict-tag :options="dict.type.survey_status" :value="scope.row.surveyStatus"/>

  146.                 </template>

  147.               </el-table-column>

  148.               <!--<el-table-column label="部门级联代码" align="center" prop="importCode" />

  149.               <el-table-column label="区域位置名称" align="center" prop="deptName" />-->

  150.               <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="170">

  151.                 <template slot-scope="scope">

  152.                   <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['resource:land:query']">查看</el-button>

  153.                   <el-button size="mini" type="text" icon="el-icon-s-promotion" @click="handleMap(scope.row)" v-hasPermi="['resource:land:map']">地图</el-button>

  154.                   <el-dropdown size="mini" v-hasPermi="['resource:land:remove']">

  155.                     <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>

  156.                     <el-dropdown-menu slot="dropdown" style="padding: 5px">

  157.                       <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['resource:land:edit']">修改</el-button>

  158.                       <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['resource:land:remove']">删除</el-button>

  159.                     </el-dropdown-menu>

  160.                   </el-dropdown>

  161.                 </template>

  162.               </el-table-column>

  163.             </el-table>

  164. 

  165.             <!-- 分页插件 -->

  166.             <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

  167. 

  168.           </el-col>

  169.         </pane>

  170.       </splitpanes>

  171.     </el-row>

  172. 

  173.      <!-- 导入EXCEL组件 -->

  174.       <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>

  175.           <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>

  176.               <i class="el-icon-upload"></i>

  177.               <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

  178.               <div class="el-upload__tip text-left" slot="tip">

  179.                   <div class="el-upload__tip" slot="tip">

  180.                       <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块属性

  181.                   </div>

  182.                   <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>

  183.                   <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>

  184.               </div>

  185.           </el-upload>

  186.           <div slot="footer" class="dialog-footer">

  187.               <el-button type="primary" @click="submitFileForm">确 定</el-button>

  188.               <el-button @click="upload.open = false">取 消</el-button>

  189.           </div>

  190.       </el-dialog>

  191. 

  192.       <!-- 查看地块属性对话框 -->

  193.       <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>

  194.         <el-descriptions title="地块信息" border :column="2" class="margin-top">

  195.           <el-descriptions-item label="区域位置名称">{{ form.deptName }}</el-descriptions-item>

  196.           <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>

  197.           <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>

  198.           <el-descriptions-item label="地块代码">{{ form.dkbm }}</el-descriptions-item>

  199.           <el-descriptions-item label="地块名称">{{ form.dkmc }}</el-descriptions-item>

  200.           <el-descriptions-item label="所有权性质">{{ form.syqxz }}</el-descriptions-item>

  201.           <el-descriptions-item label="地块类别">{{ form.dklb }}</el-descriptions-item>

  202.           <el-descriptions-item label="土地利用类型">{{ form.tdlylx }}</el-descriptions-item>

  203.           <el-descriptions-item label="地力等级">{{ form.dldj }}</el-descriptions-item>

  204.           <el-descriptions-item label="土地用途">{{ form.tdyt }}</el-descriptions-item>

  205.           <el-descriptions-item label="是否基本农田">{{ form.sfjbnt }}</el-descriptions-item>

  206.           <el-descriptions-item label="地块东至">{{ form.dkdz }}</el-descriptions-item>

  207.           <el-descriptions-item label="地块西至">{{ form.dkxz }}</el-descriptions-item>

  208.           <el-descriptions-item label="地块南至">{{ form.dknz }}</el-descriptions-item>

  209.           <el-descriptions-item label="地块北至">{{ form.dkbz }}</el-descriptions-item>

  210.           <el-descriptions-item label="备注信息">{{ form.dkbzxx }}</el-descriptions-item>

  211.           <el-descriptions-item label="指界人姓名">{{ form.zjrxm }}</el-descriptions-item>

  212.           <el-descriptions-item label="图显面积">{{ form.txmj }}</el-descriptions-item>

  213.           <el-descriptions-item label="实测面积">{{ form.scmjm }}</el-descriptions-item>

  214.           <el-descriptions-item label="是否账外地">{{ form.sfzwd }}</el-descriptions-item>

  215.         </el-descriptions>

  216. 

  217.         <el-descriptions title="经营数据" border :column="2" class="margin-top">

  218.           <el-descriptions-item label="经营面积(亩)">{{ form.jymj }}</el-descriptions-item>

  219.           <el-descriptions-item label="经营方式">{{ form.jyfs }}</el-descriptions-item>

  220.           <el-descriptions-item label="经营对象名称">{{ form.jydxmc }}</el-descriptions-item>

  221.           <el-descriptions-item label="经营开始时间">{{ form.jykssj }}</el-descriptions-item>

  222.           <el-descriptions-item label="经营结束时间">{{ form.jyjssj }}</el-descriptions-item>

  223.           <el-descriptions-item label="承包金额(元)">{{ form.cbje }}</el-descriptions-item>

  224.           <el-descriptions-item label="备注">{{ form.bz }}</el-descriptions-item>

  225.           <el-descriptions-item label="调查状态">{{ form.surveyStatus }}</el-descriptions-item>

  226.           <el-descriptions-item label="实物图">

  227.             <div v-if="!!form.dkImg">

  228.               <el-tooltip effect="light" :content="item" placement="bottom" v-for="(item, index) in form.dkImg.split(',')" :key="index">

  229.                 <el-image style="height: 64px; width: 64px; margin: 2px; display: inline-block;" fit="scale-down" :src="this.baseRoutingUrll + item" :preview-src-list="form.dkImg.split(',').map((x) => this.baseRoutingUrll + x)"/>

  230.               </el-tooltip>

  231.             </div>

  232.           </el-descriptions-item>

  233.         </el-descriptions>

  234. 

  235.           <!-- 弹框操作按钮 -->

  236.          <div slot="footer" class="dialog-footer">

  237.              <el-button @click="doPrint">打 印</el-button>

  238.              <el-button @click="cancelDetail">关 闭</el-button>

  239.          </div>

  240.       </el-dialog>

  241. 

  242.     <!-- 添加或修改地块属性对话框 -->

  243.     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>

  244.       <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="120px">

  245.         <el-form-item label="区域位置" prop="deptName">

  246.           <el-input v-model="form.deptName" placeholder="请输入区域位置名称"  show-word-limit :maxlength="100"/>

  247.         </el-form-item>

  248.         <el-form-item label="地块代码" prop="dkbm">

  249.             <el-input v-model="form.dkbm" placeholder="地块代码不输入时，系统自动分配"  show-word-limit :maxlength="19"/>

  250.         </el-form-item>

  251.         <el-form-item label="地块名称" prop="dkmc">

  252.             <el-input v-model="form.dkmc" placeholder="请输入地块名称"  show-word-limit :maxlength="50"/>

  253.         </el-form-item>

  254.         <el-form-item label="所有权性质" prop="syqxz">

  255.           <el-select v-model="form.syqxz" placeholder="请选择所有权性质">

  256.             <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  257.           </el-select>

  258.         </el-form-item>

  259.         <el-form-item label="地块类别" prop="dklb">

  260.           <el-select v-model="form.dklb" placeholder="请选择地块类别">

  261.             <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  262.           </el-select>

  263.         </el-form-item>

  264.         <el-form-item label="土地利用类型" prop="tdlylx">

  265.           <el-select v-model="form.tdlylx" placeholder="请选择土地利用类型">

  266.             <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  267.           </el-select>

  268.         </el-form-item>

  269.         <el-form-item label="地力等级" prop="dldj">

  270.           <el-select v-model="form.dldj" placeholder="请选择地力等级">

  271.             <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  272.           </el-select>

  273.         </el-form-item>

  274.         <el-form-item label="土地用途" prop="tdyt">

  275.           <el-select v-model="form.tdyt" placeholder="请选择土地用途">

  276.             <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  277.           </el-select>

  278.         </el-form-item>

  279.         <el-form-item label="是否基本农田" prop="sfjbnt">

  280.           <el-radio-group v-model="form.sfjbnt">

  281.             <el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>

  282.           </el-radio-group>

  283.         </el-form-item>

  284.         <el-form-item label="地块东至" prop="dkdz">

  285.             <el-input v-model="form.dkdz" placeholder="请输入地块东至"  show-word-limit :maxlength="50"/>

  286.         </el-form-item>

  287.         <el-form-item label="地块西至" prop="dkxz">

  288.             <el-input v-model="form.dkxz" placeholder="请输入地块西至"  show-word-limit :maxlength="50"/>

  289.         </el-form-item>

  290.         <el-form-item label="地块南至" prop="dknz">

  291.             <el-input v-model="form.dknz" placeholder="请输入地块南至"  show-word-limit :maxlength="50"/>

  292.         </el-form-item>

  293.         <el-form-item label="地块北至" prop="dkbz">

  294.             <el-input v-model="form.dkbz" placeholder="请输入地块北至"  show-word-limit :maxlength="50"/>

  295.         </el-form-item>

  296.         <el-form-item label="备注信息" prop="dkbzxx">

  297.             <el-input v-model="form.dkbzxx" placeholder="请输入备注信息"  show-word-limit :maxlength="254"/>

  298.         </el-form-item>

  299.         <el-form-item label="指界人姓名" prop="zjrxm">

  300.             <el-input v-model="form.zjrxm" placeholder="请输入指界人姓名"  show-word-limit :maxlength="100"/>

  301.         </el-form-item>

  302.         <el-form-item label="图显面积" prop="txmj">

  303.             <el-input-number v-model="form.txmj" placeholder="请输入图显面积" controls-position="right"   :precision="2"/>

  304.         </el-form-item>

  305.         <el-form-item label="实测面积" prop="scmjm">

  306.             <el-input-number v-model="form.scmjm" placeholder="请输入实测面积" controls-position="right"   :precision="3"/>

  307.         </el-form-item>

  308.         <el-form-item label="是否账外地" prop="sfzwd">

  309.           <el-radio-group v-model="form.sfzwd">

  310.             <el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>

  311.           </el-radio-group>

  312.         </el-form-item>

  313.         <el-form-item label="调查状态" prop="surveyStatus">

  314.           <el-radio-group v-model="form.surveyStatus">

  315.             <el-radio v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>

  316.           </el-radio-group>

  317.         </el-form-item>

  318. 

  319.       </el-form>

  320.       <div slot="footer" class="dialog-footer">

  321.         <el-button type="primary" @click="submitForm">确 定</el-button>

  322.         <el-button @click="cancel">取 消</el-button>

  323.       </div>

  324.     </el-dialog>

  325. 

  326. 

  327.     <!-- 地图对话框 -->

  328.     <el-dialog :title="title" :visible.sync="openMap" width="1200px" append-to-body>

  329.       <el-divider><h3 class="header-anchor">地图信息：绿色地块表示该地块，青色表示本组织已标记的其他地块</h3></el-divider>

  330.       <div id="full-screen-acceptance" style="width: 100%;height:65vh;">

  331.         <!--<div id="landMapDiv"></div>-->

  332.         <div id="mapWrap"></div>

  333.         <div id='land-btn-wrap'>

  334.           <el-row>

  335.             <input id="drawPolygon" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;

  336.             <!-- <input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp; -->

  337.             <input id="drawReset" type="button" class="ant-btn ant-btn-red" value="还原"/>

  338.           </el-row>

  339.         </div>

  340.       </div>

  341.       <div slot="footer" class="dialog-footer">

  342.         <el-button type="primary" v-if="diglogStatus" @click="submitFormMap">确 定</el-button>

  343.         <el-button type="danger" @click="clearMapLayer">清除图层</el-button>

  344.         <el-button @click="cancelMap">关 闭</el-button>

  345.       </div>

  346.     </el-dialog>

  347.   </div>

  348. </template>

  349. 

  350. <script>

  351. import { listLand, listLandQuery,getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"

  352. import { areaSavePri, cleanSavePri } from "@/api/gis/map"

  353. import { getToken } from "@/utils/auth"

  354. import Treeselect from "@riophae/vue-treeselect";

  355. import { Splitpanes, Pane } from "splitpanes"

  356. import "@riophae/vue-treeselect/dist/vue-treeselect.css"

  357. import "splitpanes/dist/splitpanes.css"

  358. import { deptTreeSelect } from "@/api/system/user"

  359. import {getConfigKey} from "@/api/system/config";

  360. import {getDept,getInfoByImportCode} from "@/api/system/dept";

  361. import MapField from "@/components/house/MapField";

  362. import $ from "jquery";

  363. 

  364. export default {

  365.   name: "Land",

  366.   dicts: ['ownership_type', 'land_use_type', 'survey_status', 'is_common', 'land_grade_type', 'land_type', 'land_use'],

  367.   components: { Treeselect, Splitpanes, Pane,MapField },

  368.   data() {

  369.     return {

  370.       // 遮罩层

  371.       loading: true,

  372.       // 导出遮罩层

  373.       exportLoading: false,

  374.       // 选中数组

  375.       ids: [],

  376.       // 非单个禁用

  377.       single: true,

  378.       // 非多个禁用

  379.       multiple: true,

  380.       // 显示搜索条件

  381.       showSearch: true,

  382.       // 总条数

  383.       total: 0,

  384.       // 地块属性表格数据

  385.       landList: [],

  386.       // 弹出层标题

  387.       title: "",

  388.       // 是否显示弹出层

  389.       open: false,

  390.       // 详情组件列数

  391.       descColumn: 2,

  392.       // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}

  393.       descLabelWidth: 15,

  394.       // 对话框显示只读的详情

  395.       viewOpen: false,

  396.       // 项目路径

  397.       baseRoutingUrll: process.env.VUE_APP_BASE_API,

  398.       // 所有部门树选项

  399.       deptOptions: undefined,

  400.       // 过滤掉已禁用部门树选项

  401.       enabledDeptOptions: undefined,

  402.       // 筛选部门名称

  403.       deptName: undefined,

  404.       // 选中的部门

  405.       selectDeptName: null,

  406.       defaultProps: {

  407.         children: "children",

  408.         label: "label"

  409.       },

  410.       // 遮罩按钮新增点击状态

  411.       diglogStatus: true,

  412.       //地图

  413.       openMap: false,

  414.       mapTheGeomId: null,

  415.       mapTheGeom: null,

  416.       drawInsert:null,

  417.       tGeoOrganizationLng: null,

  418.       tGeoOrganizationLat: null,

  419.       // 查询参数

  420.       queryParams: {

  421.         pageNum: 1,

  422.         pageSize: 10,

  423.        // 查询排序

  424.        //orderByColumn: "id",

  425.        //isAsc: "desc",

  426.        // 翻译字典

  427.        //toTranslateDict: "1",

  428.         dkbm: null,

  429.         dkmc: null,

  430.         syqxz: null,

  431.         dklb: null,

  432.         tdlylx: null,

  433.         dldj: null,

  434.         tdyt: null,

  435.         sfjbnt: null,

  436.         surveyStatus: null,

  437.         importCode: null,

  438.         sfzwd: null,

  439.       },

  440.       // 表单参数

  441.       form: {},

  442.       // 表单校验

  443.       rules: {

  444.         dkmc: [

  445.           { required: true, message: "地块名称不能为空", trigger: "blur" }

  446.         ],

  447.         scmjm: [

  448.           { required: true, message: "实测面积不能为空", trigger: "blur" }

  449.         ],

  450. 

  451.       },

  452.       // EXCEL导入

  453.       upload: {

  454.           // 是否显示弹出层（用户导入）

  455.           open: false,

  456.           // 弹出层标题（用户导入）

  457.           title: "",

  458.           // 是否禁用上传

  459.           isUploading: false,

  460.           // 是否更新已经存在的用户数据

  461.           updateSupport: 0,

  462.           // 设置上传的请求头部

  463.           headers: { Authorization: "Bearer " + getToken() },

  464.           // 上传的地址

  465.           url: process.env.VUE_APP_BASE_API + "/resource/land/importData"

  466.       },

  467. 

  468.     }

  469.   },

  470.   watch: {

  471.     // 根据名称筛选部门树

  472.     deptName(val) {

  473.       this.$refs.tree.filter(val)

  474.     }

  475.   },

  476.   created() {

  477.     this.getDeptTree()

  478.     this.getList()

  479.     // 获取geoserver的地址

  480.     this.getGeoServerUrl();

  481.     // 获取地块图层名称

  482.     this.getLandLayerName();

  483.     // 获取村边界的图层名称

  484.     this.getVillageBorderLayerName();

  485.     // 获取当前部门的位置

  486.     // this.getCurrentDeptLocation();

  487.   },

  488.   methods: {

  489.     /** 查询地块属性列表 */

  490.     getList() {

  491.       this.loading = true

  492.       listLand(this.queryParams).then(response => {

  493.         this.landList = response.rows

  494.         this.total = response.total

  495.         this.loading = false

  496.       })

  497.     },

  498.     // 取消按钮

  499.     cancel() {

  500.       this.open = false

  501.       this.reset()

  502.     },

  503.     // 取消按钮

  504.     cancelMap() {

  505.       this.openMap = false;

  506.       this.reset();

  507.     },

  508.     cancelDetail() {

  509.         this.viewOpen = false

  510.     },

  511.     // 表单重置

  512.     reset() {

  513.       this.form = {

  514.         bsm: null,

  515.         ysdm: '211011',

  516.         dkbm: null,

  517.         dkmc: null,

  518.         syqxz: '30',

  519.         dklb: '22',

  520.         tdlylx: '011',

  521.         dldj: '01',

  522.         tdyt: '1',

  523.         sfjbnt: '1',

  524.         dkdz: null,

  525.         dkxz: null,

  526.         dknz: null,

  527.         dkbz: null,

  528.         dkbzxx: null,

  529.         zjrxm: null,

  530.         txmj: null,

  531.         scmjm: null,

  532.         theGeom: null,

  533.         surveyStatus: '1',

  534.         importCode: null,

  535.         deptName: null,

  536.         sfzwd: '2'

  537.       }

  538.       this.diglogStatus = true;

  539.       this.resetForm("form")

  540.     },

  541.     /** 搜索按钮操作 */

  542.     handleQuery() {

  543.       this.queryParams.pageNum = 1

  544.       this.getList()

  545.     },

  546.     /** 重置按钮操作 */

  547.     resetQuery() {

  548.       this.resetForm("queryForm")

  549.       this.handleQuery()

  550.     },

  551.     // 多选框选中数据

  552.     handleSelectionChange(selection) {

  553.       this.ids = selection.map(item => item.fid)

  554.       this.single = selection.length!==1

  555.       this.multiple = !selection.length

  556.     },

  557.     /** 新增按钮操作 */

  558.     handleAdd() {

  559.       if(this.selectDeptName == null || this.selectDeptName == ''){

  560.         this.$modal.msgWarning("请先选择村/组行政区划！")

  561.         return

  562.       }

  563.       this.reset()

  564.       this.form.deptId = this.queryParams.deptId;

  565.       this.form.deptName = this.selectDeptName;

  566.       this.open = true

  567.       this.title = "添加地块属性"

  568.     },

  569.     /** 修改按钮操作 */

  570.     handleUpdate(row) {

  571.       this.reset()

  572.       const fid = row.fid || this.ids

  573.       getLand(fid).then(response => {

  574.         this.form = response.data

  575.         this.open = true

  576.         this.title = "修改地块属性"

  577.       })

  578.     },

  579.     /** 查看按钮操作 */

  580.     handleLook(row) {

  581.       getLandDetailByDkbm(row.dkbm).then(response => {

  582.           this.form = response.data;

  583.           this.viewOpen = true;

  584.           this.title = "查看地块属性";

  585.       });

  586.     },

  587.     /** 提交按钮 */

  588.     submitForm() {

  589.       this.$refs["form"].validate(valid => {

  590.         if (valid) {

  591.           if (this.form.fid != null) {

  592.             updateLand(this.form).then(response => {

  593.               this.$modal.msgSuccess("修改成功")

  594.               this.open = false

  595.               this.getList()

  596.             })

  597.           } else {

  598.             addLand(this.form).then(response => {

  599.               this.$modal.msgSuccess("新增成功")

  600.               this.open = false

  601.               this.getList()

  602.             })

  603.           }

  604.         }

  605.       })

  606.     },

  607.     /** 删除按钮操作 */

  608.     handleDelete(row) {

  609.       const fids = row.fid || this.ids

  610.       this.$modal.confirm('是否确认删除地块属性编号为"' + fids + '"的数据项？').then(function() {

  611.         return delLand(fids)

  612.       }).then(() => {

  613.         this.getList()

  614.         this.$modal.msgSuccess("删除成功")

  615.       }).catch(() => {})

  616.     },

  617.     /** 导出按钮操作 */

  618.     handleExport() {

  619.       this.download('resource/land/export', {

  620.         ...this.queryParams

  621.       }, `地块属性_${new Date().getTime()}.xlsx`)

  622.     },

  623.     /** 打印表单 */

  624.     doPrint() {

  625.         const originalTitle = document.title;

  626.         try {

  627.             document.title = this.title || '打印详情';

  628.             const printElement = document.getElementById('printDetail');

  629.             const printFrame = document.createElement('iframe');

  630.             printFrame.style.position = 'absolute';

  631.             printFrame.style.width = '0';

  632.             printFrame.style.height = '0';

  633.             printFrame.style.border = 'none';

  634.             printFrame.style.left = '-9999px';

  635.             printFrame.onload = function() {

  636.                 try {

  637.                     const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;

  638.                     const contentClone = printElement.cloneNode(true);

  639.                     const style = document.createElement('style');

  640.                     style.innerHTML = `

  641.                       @page {

  642.                         size: auto;

  643.                         margin: 10mm;

  644.                       }

  645.                       body {

  646.                         font-family: Arial, sans-serif;

  647.                         line-height: 1.5;

  648.                         margin: 0;

  649.                         padding: 0;

  650.                       }

  651.                       .el-descriptions {

  652.                         width: 100% !important;

  653.                       }

  654.                       .el-descriptions-item__label {

  655.                         width: ${this.descLabelWidth}% !important;

  656.                       }

  657.                       .el-descriptions-item__content {

  658.                         width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;

  659.                       }

  660.                       /* 确保图片在打印时显示完整 */

  661.                       img, .el-image {

  662.                         max-width: 100% !important;

  663.                         height: auto !important;

  664.                       }

  665.                     `;

  666.                     frameDoc.head.appendChild(style);

  667.                     frameDoc.body.appendChild(contentClone);

  668.                     setTimeout(() => {

  669.                         printFrame.contentWindow.focus();

  670.                         printFrame.contentWindow.print();

  671.                         setTimeout(() => {

  672.                             document.body.removeChild(printFrame);

  673.                             document.title = originalTitle;

  674.                         }, 1000);

  675.                     }, 500);

  676.                 } catch (e) {

  677.                     document.body.removeChild(printFrame);

  678.                     document.title = originalTitle;

  679.                     this.$message.error('打印过程中发生错误');

  680.                 }

  681.             };

  682.             document.body.appendChild(printFrame);

  683.         } catch (e) {

  684.             document.title = originalTitle;

  685.             this.$message.error('打印过程中发生错误');

  686.         }

  687.     },

  688.     /** 打印按钮操作 */

  689.     handlePrint() {

  690.         printLand(this.queryParams).then(response => {})

  691.     },

  692.     /* 导入EXCEL组件 */

  693.     handleImport() {

  694.         this.upload.title = "地块属性导入"

  695.         this.upload.open = true

  696.     },

  697.     /** 下载模板操作 */

  698.     importTemplate() {

  699.         this.download('resource/land/importTemplate', {

  700.         }, `地块属性_template.xlsx`)

  701.     },

  702.     // 文件上传中处理

  703.     handleFileUploadProgress(event, file, fileList) {

  704.         this.upload.isUploading = true

  705.     },

  706.     // 文件上传成功处理

  707.     handleFileSuccess(response, file, fileList) {

  708.         this.upload.open = false

  709.         this.upload.isUploading = false

  710.         this.$refs.upload.clearFiles()

  711.         this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })

  712.         this.getList()

  713.     },

  714.     // 提交上传文件

  715.     submitFileForm() {

  716.         this.$refs.upload.submit()

  717.     },

  718.     /** 查询部门下拉树结构 */

  719.     getDeptTree() {

  720.       deptTreeSelect().then(response => {

  721.         this.deptOptions = response.data

  722.         this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))

  723.       })

  724.     },

  725.     // 过滤禁用的部门

  726.     filterDisabledDept(deptList) {

  727.       return deptList.filter(dept => {

  728.         if (dept.disabled) {

  729.           return false

  730.         }

  731.         if (dept.children && dept.children.length) {

  732.           dept.children = this.filterDisabledDept(dept.children)

  733.         }

  734.         return true

  735.       })

  736.     },

  737.     // 筛选节点

  738.     filterNode(value, data) {

  739.       if (!value) return true

  740.       return data.label.indexOf(value) !== -1

  741.     },

  742.     // 节点单击事件

  743.     handleNodeClick(data) {

  744.       this.queryParams.deptId = data.id

  745.       this.selectDeptName = data.label

  746.       this.handleQuery()

  747.     },

  748.     // 获取geoserver的地址

  749.     getGeoServerUrl() {

  750.       getConfigKey("system.geoServer.url").then(response => {

  751.         this.mapGeoServerUrl = response.msg;

  752.       });

  753.     },

  754.     // 获取地块图层名称

  755.     getLandLayerName() {

  756.       getConfigKey("geoserver.layer.dk").then(response => {

  757.         this.landLayerName = response.msg;

  758.       });

  759.     },

  760.     // 获取村边界的图层名称

  761.     getVillageBorderLayerName() {

  762.       getConfigKey("geoserver.layer.villageBorder").then(response => {

  763.         this.villageBorderLayerName = response.msg;

  764.       });

  765.     },

  766.     // 获取当前部门的位置

  767.     getCurrentDeptLocation() {

  768.       var deptId = this.queryParams.deptId;

  769.       if(deptId){

  770.         deptId = 100;

  771.       }

  772.       getDept(deptId).then(response => {

  773.         let insertCode = response.data;

  774.         if (insertCode != null) {

  775.           this.tGeoOrganizationLat = insertCode.latitude;

  776.           this.tGeoOrganizationLng = insertCode.longitude;

  777.         }

  778.       });

  779.     },

  780.     /** 地图修改按钮操作 */

  781.     handleMap(row) {

  782.       this.mapTheGeomId = row;

  783.       getLandDetail(row.fid).then((res) => {

  784.         getInfoByImportCode(row.importCode).then((res) => {

  785.           let insertCode = res.data;

  786.           if (insertCode != null) {

  787.             this.tGeoOrganizationLat = insertCode.latitude;

  788.             this.tGeoOrganizationLng = insertCode.longitude;

  789.           }

  790.           const tableRow = { importCode: row.importCode };

  791.           listLandQuery(tableRow).then(response => {

  792.             this.openMap = true;

  793.             this.title = "修改地图";

  794.             setTimeout(() => {

  795.               this.pointDarw(response.rows);

  796.             }, 500);

  797.           });

  798.         });

  799.       });

  800.     },

  801.     /** 地图提交按钮 */

  802.     submitFormMap() {

  803.       this.diglogStatus = false;

  804.       if(this.drawInsert !=null && this.drawInsert !=""){

  805.         this.mapTheGeomId.theGeom = JSON.stringify(this.drawInsert);

  806.       }

  807.       let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid,theGeom: this.mapTheGeomId.theGeom };

  808.       if (this.mapTheGeomId != null) {

  809.         areaSavePri(sysGis).then(response => {

  810.           this.$modal.msgSuccess("修改成功");

  811.           this.openMap = false;

  812.           this.getList();

  813.           this.diglogStatus = true;

  814.         });

  815.       }

  816.     },

  817.     /** 清除坐标点图层 */

  818.     clearMapLayer() {

  819.       let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid};

  820.       cleanSavePri(sysGis).then(response => {

  821.         this.$modal.msgSuccess("清除成功");

  822.         this.openMap = false;

  823.         this.getList();

  824.       });

  825.     },

  826.     pointDarw(resourceList) {

  827.       //加载地图编辑

  828.       var that = this;

  829.       var map;

  830.       //var hc_land;

  831.       var draw; // global so we can remove it later

  832.       var vector_drawing;

  833.       var startDarw =false;

  834.       var openDarw = false;

  835.       this.mapTheGeomId = resourceList.find((land) => {

  836.         //model就是上面的数据源

  837.         return land.fid === this.mapTheGeomId.fid; //筛选出匹配数据

  838.       });

  839.       if (this.mapTheGeomId.theGeom != null && this.mapTheGeomId.theGeom != ""

  840.         && this.mapTheGeomId.theGeom != undefined) {

  841.         startDarw = true;

  842.         openDarw = false;

  843.       } else {

  844.         startDarw = false;

  845.         openDarw = true;

  846.       }

  847.       if (startDarw) {

  848.         document.getElementById("mapWrap").innerHTML = '';

  849.         var hc_land;

  850.         var draw; // global so we can remove it later

  851.         var vector_drawing;

  852.         var projection = new ol.proj.Projection({

  853.           //地图投影类型

  854.           code: "EPSG:3857",

  855.           units: "degrees",

  856.           //extent:extent

  857.         });

  858. 

  859.         var aerial = new ol.layer.Tile({

  860.           source: new ol.source.XYZ({

  861.             url: "http://t0.tianditu.gov.cn/img_w/wmts?" +

  862.               "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +

  863.               "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",

  864.           }),

  865.           isGroup: true,

  866.           name: "卫星影像图",

  867.         });

  868. 

  869.         var yingxzi = new ol.layer.Tile({

  870.           source: new ol.source.XYZ({

  871.             url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",

  872.           }),

  873.           isGroup: true,

  874.           name: "天地图文字标注--卫星影像图",

  875.         });

  876.         //加载地图

  877.         map = new ol.Map({

  878.           controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮

  879.           layers: [aerial, yingxzi],

  880.           projection: projection,

  881.           target: "mapWrap",

  882.           view: new ol.View({

  883.             //center: ol.proj.fromLonLat([115.452752, 31.789033]),

  884.             zoom: 17.8,

  885.             minZoom: 0, //地图缩小限制

  886.             maxZoom: 18.3, //地图放大限制

  887.           }),

  888.         });

  889.         // 添加村边界

  890.         let mapBorder = new ol.layer.Image({

  891.           source: new ol.source.ImageWMS({

  892.             url: this.mapGeoServerUrl + '/wms',

  893.             params: {

  894.               LAYERS: this.villageBorderLayerName,

  895.               cql_filter: "import_code = '" + this.mapTheGeomId.importCode + "'",

  896.               SRID: 3857,

  897.             },

  898.           }),

  899.           name: 'villageBorderLayer'

  900.         });

  901.         map.addLayer(mapBorder);

  902. 

  903.         // 添加已经存在的资源图层

  904.         let vectorSource = new ol.source.Vector();

  905.         for (let resource of resourceList) {

  906.           if (resource.theGeom && resource.fid !== this.mapTheGeomId.fid) {

  907.             let feature = new ol.Feature({

  908.               geometry: new ol.geom.MultiPolygon(JSON.parse(resource.theGeom).coordinates),

  909.               // permanentName: permanent.name

  910.             });

  911.             vectorSource.addFeature(feature);

  912.           }

  913.         }

  914. 

  915.         let resourceLayer = new ol.layer.Vector({

  916.           source: vectorSource,

  917.           style:  (feature, resolution) => {

  918.             return new ol.style.Style({

  919.               fill: new ol.style.Fill({

  920.                 //矢量图层填充颜色，以及透明度

  921.                 color: "rgba(0, 218, 255, 0.3)",

  922.               }),

  923.               stroke: new ol.style.Stroke({

  924.                 //边界样式

  925.                 color: "#00DAFF",

  926.                 width: 3,

  927.               }),

  928.             })

  929.           }

  930.         });

  931.         map.addLayer(resourceLayer);

  932.         //图层查询定位开始 ---------start

  933.         hc_land = new ol.layer.Vector({

  934.           title: "add Layer",

  935.           source: new ol.source.Vector({

  936.             projection: projection,

  937.             features: new ol.format.GeoJSON().readFeatures("{\n" +

  938.               "    \"type\": \"Feature\",\n" +

  939.               "    \"geometry\":" + this.mapTheGeomId.theGeom + "}"),

  940.           }),

  941.           style: new ol.style.Style({

  942.             fill: new ol.style.Fill({

  943.               //矢量图层填充颜色，以及透明度

  944.               color: "rgba(204, 255, 204,0.3)",

  945.             }),

  946.             stroke: new ol.style.Stroke({

  947.               //边界样式

  948.               color: "#47c68f",

  949.               width: 3,

  950.             }),

  951.           }),

  952.         });

  953.         map.addLayer(hc_land);

  954.         var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;

  955.         var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;

  956.         var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;

  957.         var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;

  958.         //定位查询位置

  959.         var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  960.         map.getView().animate({

  961.           // 只设置需要的属性即可

  962.           center: center, // 中心点

  963.           zoom: 17.8, // 缩放级别

  964.           rotation: undefined, // 缩放完成view视图旋转弧度

  965.           duration: 1000, // 缩放持续时间，默认不需要设置

  966.         });

  967.         //图层查询定位结束 ---------end

  968.         //开始绘制地图

  969.         $("#drawPolygon").off("click").on("click", function () {

  970.           map.removeLayer(hc_land);

  971.           map.removeLayer(vector_drawing);

  972.           that.drawInsert = null;

  973.           //var source = new ol.source.Vector({wrapX: false});

  974.           vector_drawing = new ol.layer.Vector({

  975.             source: new ol.source.Vector(),

  976.           });

  977.           map.addLayer(vector_drawing);

  978. 

  979.           function addInteraction() {

  980.             draw = new ol.interaction.Draw({

  981.               source: vector_drawing.getSource(),

  982.               type: "Polygon"

  983.             });

  984.             draw.on('drawend', function (evt) {

  985.               map.removeInteraction(draw);

  986.               var feature = evt.feature;

  987.               var geometry = feature.getGeometry();

  988.               var coordinate = geometry.getCoordinates();

  989.               that.drawInsert = coordinate;

  990.             });

  991.             map.addInteraction(draw);

  992.           }

  993. 

  994.           addInteraction();

  995.         });

  996.         //清除画图鼠标点击事件

  997.         $("#drawRemove").off("click").on("click", function () {

  998.           //map.addLayer(hc_land);

  999.           map.removeInteraction(draw);

  1000.           //map.removeLayer(vector_drawing);

  1001.         });

  1002.         //还原之前图层

  1003.         $("#drawReset").off("click").on("click", function () {

  1004.           map.removeInteraction(draw);

  1005.           map.removeLayer(vector_drawing);

  1006.           map.addLayer(hc_land);

  1007.           that.drawInsert = null;

  1008.         });

  1009.       }

  1010.       if (openDarw) {

  1011.         document.getElementById("mapWrap").innerHTML = '';

  1012.         var projection = new ol.proj.Projection({

  1013.           //地图投影类型

  1014.           code: "EPSG:3857",

  1015.           units: "degrees",

  1016.           //extent:extent

  1017.         });

  1018. 

  1019.         var aerial = new ol.layer.Tile({

  1020.           source: new ol.source.XYZ({

  1021.             url: "http://t0.tianditu.gov.cn/img_w/wmts?" +

  1022.               "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +

  1023.               "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",

  1024.           }),

  1025.           isGroup: true,

  1026.           name: "卫星影像图",

  1027.         });

  1028. 

  1029.         var yingxzi = new ol.layer.Tile({

  1030.           source: new ol.source.XYZ({

  1031.             url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",

  1032.           }),

  1033.           isGroup: true,

  1034.           name: "天地图文字标注--卫星影像图",

  1035.         });

  1036.         //获取坐标是否存在

  1037.         var Zb;

  1038.         if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null && this.tGeoOrganizationLng !=""

  1039.           && this.tGeoOrganizationLat !="" && this.tGeoOrganizationLng !=undefined && this.tGeoOrganizationLat !=undefined) {

  1040.           Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat]

  1041.         } else {

  1042.           Zb = [115.452752, 31.789033];

  1043.         }

  1044.         //加载地图

  1045.         map = new ol.Map({

  1046.           controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮

  1047.           layers: [aerial, yingxzi],

  1048.           projection: projection,

  1049.           logo: 'false',

  1050.           target: "mapWrap",

  1051.           view: new ol.View({

  1052.             center: ol.proj.fromLonLat(Zb),

  1053.             //center: ol.proj.fromLonLat([115.452752, 31.789033]),

  1054.             zoom: 17.8,

  1055.             minZoom: 0, //地图缩小限制

  1056.             maxZoom: 18, //地图放大限制

  1057.           }),

  1058.         });

  1059.         // 添加村边界

  1060.         let mapBorder = new ol.layer.Image({

  1061.           source: new ol.source.ImageWMS({

  1062.             url: this.mapGeoServerUrl + '/wms',

  1063.             params: {

  1064.               LAYERS: this.villageBorderLayerName,

  1065.               cql_filter: "import_code = '" + this.mapTheGeomId.importCode + "'",

  1066.               SRID: 3857,

  1067.             },

  1068.           }),

  1069.           name: 'villageBorderLayer'

  1070.         });

  1071.         map.addLayer(mapBorder);

  1072. 

  1073.         // 添加已经存在的资源图层

  1074.         let vectorSource = new ol.source.Vector();

  1075.         for (let resource of resourceList) {

  1076.           if (resource.theGeom && resource.fid !== this.mapTheGeomId.fid) {

  1077.             let feature = new ol.Feature({

  1078.               geometry: new ol.geom.MultiPolygon(JSON.parse(resource.theGeom).coordinates),

  1079.               // permanentName: permanent.name

  1080.             });

  1081.             vectorSource.addFeature(feature);

  1082.           }

  1083.         }

  1084. 

  1085.         let resourceLayer = new ol.layer.Vector({

  1086.           source: vectorSource,

  1087.           style:  (feature, resolution) => {

  1088.             return new ol.style.Style({

  1089.               fill: new ol.style.Fill({

  1090.                 //矢量图层填充颜色，以及透明度

  1091.                 color: "rgba(0, 218, 255, 0.3)",

  1092.               }),

  1093.               stroke: new ol.style.Stroke({

  1094.                 //边界样式

  1095.                 color: "#00DAFF",

  1096.                 width: 3,

  1097.               }),

  1098.             })

  1099.           }

  1100.         });

  1101.         map.addLayer(resourceLayer);

  1102. 

  1103.         //图层查询定位结束 ---------end

  1104.         //开始绘制地图

  1105.         $("#drawPolygon").off("click").on("click", function () {

  1106.           //map.removeLayer(hc_land);

  1107.           map.removeLayer(vector_drawing);

  1108.           that.drawInsert = null;

  1109.           map.removeInteraction(draw);

  1110.           var source = new ol.source.Vector({wrapX: false});

  1111.           vector_drawing = new ol.layer.Vector({

  1112.             source: source,

  1113.           });

  1114.           map.addLayer(vector_drawing);

  1115.           var typeSelect = "Polygon";

  1116. 

  1117.           function addInteraction() {

  1118.             var value = typeSelect;

  1119.             draw = new ol.interaction.Draw({

  1120.               source: source,

  1121.               type: typeSelect

  1122.             });

  1123.             draw.on('drawend', function (evt) {

  1124.               //map.removeLayer(vector_drawing);

  1125.               var feature = evt.feature;

  1126.               var geometry = feature.getGeometry();

  1127.               var coordinate = geometry.getCoordinates();

  1128.               that.drawInsert = coordinate;

  1129.               map.removeInteraction(draw);

  1130.             });

  1131.             map.addInteraction(draw);

  1132.           }

  1133. 

  1134.           addInteraction();

  1135.         });

  1136.         //清除画图鼠标点击事件

  1137.         $("#drawRemove").off("click").on("click", function () {

  1138.           //map.addLayer(hc_land);

  1139.           map.removeInteraction(draw);

  1140.           //map.removeLayer(vector_drawing);

  1141.         });

  1142.         //还原之前图层

  1143.         $("#drawReset").off("click").on("click", function () {

  1144.           map.removeInteraction(draw);

  1145.           map.removeLayer(vector_drawing);

  1146.           //map.addLayer(hc_land);

  1147.           that.drawInsert = null;

  1148.         });

  1149.       }

  1150.     },

  1151.   }

  1152. }

  1153. </script>

  1154. <style scoped type="scss">

  1155.   .container_main{

  1156.     height: 75vh;

  1157.     overflow-y: scroll;

  1158.   }

  1159.   #land-btn-wrap {

  1160.     position: relative;

  1161.     width: 40%;

  1162.     left: 60%;

  1163.     bottom: 95%;

  1164.     z-index: 2000;

  1165.   }

  1166. 

  1167.   #mapWrap {

  1168.     width: 100%;

  1169.     height: 100%;

  1170.   }

  1171.   .ant-btn-red {

  1172.     position: relative;

  1173.     display: inline-block;

  1174.     background: #D0EEFF;

  1175.     border: 1px solid #99D3F5;

  1176.     border-radius: 4px;

  1177.     padding: 4px 12px;

  1178.     overflow: hidden;

  1179.     color: #1E88C7;

  1180.     text-decoration: none;

  1181.     text-indent: 0;

  1182.     line-height: 20px;

  1183.     right: -36%;

  1184.   }

  1185. </style>