9 changed files with 2521 additions and 0 deletions
Unified View
Diff Options
-
+1 -0package.json
-
+9 -0rongxin.dashboard.iml
-
+62 -0src/api/business/resourceLand.js
-
+62 -0src/api/business/resourceOperation.js
-
BINsrc/assets/images/dataScreen/plotPremises/mark.png
-
+286 -0src/components/house/MapField.vue
-
+727 -0src/utils/ol_map.js
-
+810 -0src/views/business/resourceLand/index.vue
-
+564 -0src/views/business/resourceOperation/index.vue
+ 1
- 0
package.json
View File
| @@ -33,6 +33,7 @@ | |||||
| "file-saver": "2.0.5", | "file-saver": "2.0.5", | ||||
| "fuse.js": "6.4.3", | "fuse.js": "6.4.3", | ||||
| "highlight.js": "9.18.5", | "highlight.js": "9.18.5", | ||||
| "jquery": "^3.7.1", | |||||
| "js-beautify": "1.13.0", | "js-beautify": "1.13.0", | ||||
| "js-cookie": "3.0.1", | "js-cookie": "3.0.1", | ||||
| "jsencrypt": "3.0.0-rc.1", | "jsencrypt": "3.0.0-rc.1", | ||||
+ 9
- 0
rongxin.dashboard.iml
View File
| @@ -0,0 +1,9 @@ | |||||
| <?xml version="1.0" encoding="UTF-8"?> | |||||
| <module type="WEB_MODULE" version="4"> | |||||
| <component name="NewModuleRootManager" inherit-compiler-output="true"> | |||||
| <exclude-output /> | |||||
| <content url="file://$MODULE_DIR$" /> | |||||
| <orderEntry type="inheritedJdk" /> | |||||
| <orderEntry type="sourceFolder" forTests="false" /> | |||||
| </component> | |||||
| </module> | |||||
+ 62
- 0
src/api/business/resourceLand.js
View File
| @@ -0,0 +1,62 @@ | |||||
| import request from '@/utils/request' | |||||
| // 查询地块属性列表 | |||||
| export function listResourceLand(query) { | |||||
| return request({ | |||||
| url: '/business/resourceLand/list', | |||||
| method: 'get', | |||||
| params: query | |||||
| }) | |||||
| } | |||||
| // 查询地块属性详细 | |||||
| export function getResourceLand(DKBM) { | |||||
| return request({ | |||||
| url: '/business/resourceLand/' + DKBM, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| // 查询地块属性详细 | |||||
| export function getResourceLandDetail(DKBM) { | |||||
| return request({ | |||||
| url: '/business/resourceLand/detail/' + DKBM, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| // 新增地块属性 | |||||
| export function addResourceLand(data) { | |||||
| return request({ | |||||
| url: '/business/resourceLand/add', | |||||
| method: 'post', | |||||
| data: data | |||||
| }) | |||||
| } | |||||
| // 修改地块属性 | |||||
| export function updateResourceLand(data) { | |||||
| return request({ | |||||
| url: '/business/resourceLand/update', | |||||
| method: 'post', | |||||
| data: data | |||||
| }) | |||||
| } | |||||
| // 删除地块属性 | |||||
| export function delResourceLand(DKBM) { | |||||
| return request({ | |||||
| url: '/business/resourceLand/delete/' + DKBM, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| // 打印地块属性 | |||||
| export function printResourceLand(query) { | |||||
| return request({ | |||||
| url: '/business/resourceLand/print', | |||||
| method: 'get', | |||||
| params: query | |||||
| }) | |||||
| } | |||||
+ 62
- 0
src/api/business/resourceOperation.js
View File
| @@ -0,0 +1,62 @@ | |||||
| import request from '@/utils/request' | |||||
| // 查询地块经营列表 | |||||
| export function listResourceOperation(query) { | |||||
| return request({ | |||||
| url: '/business/resourceOperation/list', | |||||
| method: 'get', | |||||
| params: query | |||||
| }) | |||||
| } | |||||
| // 查询地块经营详细 | |||||
| export function getResourceOperation(id) { | |||||
| return request({ | |||||
| url: '/business/resourceOperation/' + id, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| // 查询地块经营详细 | |||||
| export function getResourceOperationDetail(id) { | |||||
| return request({ | |||||
| url: '/business/resourceOperation/detail/' + id, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| // 新增地块经营 | |||||
| export function addResourceOperation(data) { | |||||
| return request({ | |||||
| url: '/business/resourceOperation/add', | |||||
| method: 'post', | |||||
| data: data | |||||
| }) | |||||
| } | |||||
| // 修改地块经营 | |||||
| export function updateResourceOperation(data) { | |||||
| return request({ | |||||
| url: '/business/resourceOperation/update', | |||||
| method: 'post', | |||||
| data: data | |||||
| }) | |||||
| } | |||||
| // 删除地块经营 | |||||
| export function delResourceOperation(id) { | |||||
| return request({ | |||||
| url: '/business/resourceOperation/delete/' + id, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| // 打印地块经营 | |||||
| export function printResourceOperation(query) { | |||||
| return request({ | |||||
| url: '/business/resourceOperation/print', | |||||
| method: 'get', | |||||
| params: query | |||||
| }) | |||||
| } | |||||
BIN
src/assets/images/dataScreen/plotPremises/mark.png
View File
| Before | After |
|---|---|
|
|
| Width: 19 | Height: 31 | Size: 1.7 KiB |
+ 286
- 0
src/components/house/MapField.vue
View File
| @@ -0,0 +1,286 @@ | |||||
| <template> | |||||
| <div> | |||||
| <div :id="'map-element' + elementId" class="map-element" style="width: 100%; height: 100%;"></div> | |||||
| <div :id="'draw-toolbar' + elementId" class='draw-toolbar' v-show="allowDraw"> | |||||
| <el-row> | |||||
| <input :id="'drawPolygon' + elementId" class="ant-btn ant-btn-red" type="button" value="画图"/> | |||||
| <input :id="'drawRemove' + elementId" type="button" class="ant-btn ant-btn-red" value="取消画图"/> | |||||
| <input :id="'drawReset' + elementId" type="button" class="ant-btn ant-btn-red" value="重置画图"/> | |||||
| </el-row> | |||||
| </div> | |||||
| <div :id="'mark-toolbar' + elementId" class='draw-toolbar' v-show="allowMark"> | |||||
| <el-row> | |||||
| <input :id="'markPoint' + elementId" class="ant-btn ant-btn-red" type="button" value="标记"/> | |||||
| <input :id="'markReset' + elementId" type="button" class="ant-btn ant-btn-red" value="重置标记"/> | |||||
| </el-row> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import $ from "jquery"; | |||||
| import {olMap} from "@/utils/ol_map"; | |||||
| const TYPE_NONE = 0; // 无交互 默认 | |||||
| const TYPE_DRAW = 1; // 绘制多边形 v-model为MultiPolygon的JSON | |||||
| const TYPE_SELECT = 2; // 选择, 必须指定list属性 v-model为list索引, 未选中为-1 | |||||
| const TYPE_MARK = 3; // 标记点 v-model为[经度, 维度]数组 | |||||
| export default { | |||||
| name: "MapField", | |||||
| props: { | |||||
| minMapZoom: { | |||||
| type: Number, | |||||
| default: 16, | |||||
| }, | |||||
| maxMapZoom: { | |||||
| type: Number, | |||||
| default: 18.9, | |||||
| }, | |||||
| allowDraw: { | |||||
| type: Boolean, | |||||
| default: false, | |||||
| }, | |||||
| type: { | |||||
| type: [Number, String], // 0 原始 1 绘制 2 选择 | |||||
| default: 0, | |||||
| }, | |||||
| coord: { | |||||
| type: Array, | |||||
| default: function() { | |||||
| return [115.452752, 31.789033]; | |||||
| }, | |||||
| }, | |||||
| value: { | |||||
| type: [String, Array, Number], | |||||
| }, | |||||
| list: { | |||||
| type: Array, | |||||
| default: function() { | |||||
| return []; | |||||
| }, | |||||
| }, | |||||
| allowSelect: { | |||||
| type: Boolean, | |||||
| default: false, | |||||
| }, | |||||
| allowMark: { | |||||
| type: Boolean, | |||||
| default: false, | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isInited: false, | |||||
| mapObject: null, | |||||
| mapResult: null, | |||||
| elementId: ('_' + Math.random()).replaceAll('.', ''), | |||||
| internalValue: null, // string only | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| }, | |||||
| mounted() { | |||||
| this.Init(); | |||||
| this.SetupCoord(); | |||||
| if(this.list) | |||||
| this.mapObject.SetLayers(this.list); | |||||
| if(this.value) | |||||
| this.SetValue(this.value); | |||||
| }, | |||||
| watch: { | |||||
| value: function(newVal, oldVal) { | |||||
| this.SetValue(newVal); | |||||
| }, | |||||
| coord: { | |||||
| handler: function(newVal, oldVal) { | |||||
| this.SetupCoord(); | |||||
| }, | |||||
| deep: true, | |||||
| }, | |||||
| list: { | |||||
| handler: function(newVal, oldVal) { | |||||
| if(this.type == TYPE_SELECT) | |||||
| { | |||||
| this.mapObject.ClearSelection(); | |||||
| this.mapObject.SetLayers(newVal); | |||||
| if(this.internalValue >= 0 && this.internalValue < this.list.length) | |||||
| this.mapObject.SetSelection(this.list[this.internalValue].name); | |||||
| } | |||||
| }, | |||||
| deep: true, | |||||
| }, | |||||
| }, | |||||
| methods: { | |||||
| SetValue(val) { | |||||
| if(this.internalValue === val) | |||||
| return; | |||||
| this.internalValue = val; | |||||
| this.UpdateValueToMap(); | |||||
| }, | |||||
| UpdateValueToMap() { | |||||
| this.SetupCoord(); | |||||
| if(this.type == TYPE_SELECT) | |||||
| { | |||||
| this.mapObject.ClearSelection(); | |||||
| if(this.internalValue >= 0 && this.internalValue < this.list.length) | |||||
| this.mapObject.SetSelection(this.list[this.internalValue].name); | |||||
| } | |||||
| else if(this.type == TYPE_MARK) | |||||
| { | |||||
| this.mapObject.RemoveDrawLayer(); | |||||
| if(this.internalValue && this.internalValue.length > 0) | |||||
| { | |||||
| let json = olMap.gen_polygon([this.internalValue]); | |||||
| this.mapObject.SetLayer(olMap.MAP_FIELD_INIT_LAYER_NAME, json, null, null, { | |||||
| 'style.stroke.width': 10, | |||||
| 'style.stroke.color': '#FF0000', | |||||
| }); | |||||
| } | |||||
| else | |||||
| this.mapObject.PopLayer(olMap.MAP_FIELD_INIT_LAYER_NAME); | |||||
| } | |||||
| else | |||||
| { | |||||
| this.mapObject.RemoveDrawLayer(); | |||||
| this.mapObject.SetLayer(olMap.MAP_FIELD_INIT_LAYER_NAME, this.internalValue); | |||||
| } | |||||
| }, | |||||
| Init() { | |||||
| if(this.isInited) | |||||
| return; | |||||
| this.mapObject = new olMap('map-element' + this.elementId); | |||||
| if(this.type == TYPE_DRAW) | |||||
| { | |||||
| this.mapObject.SetAllowDraw(this.allowDraw); | |||||
| let self = this; | |||||
| $("#drawPolygon" + this.elementId).click(function () { | |||||
| self.mapObject.StartDraw(); | |||||
| }); | |||||
| //清除画图鼠标点击事件 | |||||
| $("#drawRemove" + this.elementId).click(function () { | |||||
| self.mapObject.ClearDraw(); | |||||
| }); | |||||
| //还原之前图层 | |||||
| $("#drawReset" + this.elementId).click(function () { | |||||
| self.mapObject.ResetDraw(); | |||||
| }); | |||||
| this.mapObject.SetCallback("draw::start", () => { | |||||
| this.mapResult = null; | |||||
| }); | |||||
| this.mapObject.SetCallback("draw::remove", () => { | |||||
| }); | |||||
| this.mapObject.SetCallback("draw::end", (res) => { | |||||
| this.mapResult = res; | |||||
| this.SetInternalValue(); | |||||
| }); | |||||
| this.mapObject.SetCallback("draw::reset", () => { | |||||
| this.mapResult = null; | |||||
| }); | |||||
| } | |||||
| else if(this.type == TYPE_SELECT) | |||||
| { | |||||
| this.mapObject.SetAllowSelect(this.allowSelect); | |||||
| this.mapObject.SetCallback("interactive::select", (name) => { | |||||
| console.log('select -> ' + name); | |||||
| this.mapResult = name; | |||||
| this.SetInternalValue(); | |||||
| this.$emit('select', name); | |||||
| }); | |||||
| } | |||||
| else if(this.type == TYPE_MARK) | |||||
| { | |||||
| this.mapObject.SetAllowMark(this.allowMark); | |||||
| let self = this; | |||||
| $("#markPoint" + this.elementId).click(function () { | |||||
| self.mapObject.StartMark(); | |||||
| }); | |||||
| //还原之前图层 | |||||
| $("#markReset" + this.elementId).click(function () { | |||||
| self.mapObject.ResetMark(); | |||||
| }); | |||||
| this.mapObject.SetCallback("mark::start", () => { | |||||
| this.mapResult = null; | |||||
| }); | |||||
| this.mapObject.SetCallback("mark::end", (res) => { | |||||
| this.mapResult = res; | |||||
| this.SetInternalValue(); | |||||
| }); | |||||
| this.mapObject.SetCallback("mark::reset", () => { | |||||
| this.mapResult = null; | |||||
| }); | |||||
| } | |||||
| this.isInited = true; | |||||
| if(this.internalValue) | |||||
| this.UpdateValueToMap(); | |||||
| }, | |||||
| DestroyMap() { | |||||
| if(!this.mapObject) | |||||
| return; | |||||
| //delete this.mapObject; | |||||
| this.mapObject.DestroyMap(); | |||||
| this.mapObject = null; | |||||
| }, | |||||
| SetInternalValue() { | |||||
| if(this.type == TYPE_SELECT) | |||||
| { | |||||
| this.internalValue = this.mapResult; | |||||
| if(this.mapResult) | |||||
| this.internalValue = this.list.findIndex((x) => x.name == this.mapResult); | |||||
| else | |||||
| this.internalValue = -1; | |||||
| this.$emit('input', this.internalValue); | |||||
| } | |||||
| else if(this.type == TYPE_MARK) | |||||
| { | |||||
| this.internalValue = this.mapResult ? this.mapResult : [null, null]; | |||||
| this.$emit('input', this.internalValue); | |||||
| } | |||||
| else | |||||
| { | |||||
| this.internalValue = JSON.stringify(this.mapResult); | |||||
| this.$emit('input', this.internalValue); | |||||
| } | |||||
| //console.log(this.type, this.mapResult, this.internalValue); | |||||
| }, | |||||
| Update() { | |||||
| if(this.mapObject) | |||||
| this.mapObject.Update(); | |||||
| }, | |||||
| SetupCoord() { | |||||
| if(this.mapObject && this.coord && this.coord.length >= 2 && this.coord[0] && this.coord[1]) | |||||
| this.mapObject.SetCoord(this.coord[0], this.coord[1]); | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped> | |||||
| .map-element { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| .draw-toolbar { | |||||
| position: relative; | |||||
| width: 40%; | |||||
| left: 60%; | |||||
| bottom: 95%; | |||||
| z-index: 2000; | |||||
| } | |||||
| .ant-btn-red { | |||||
| position: relative; | |||||
| display: inline-block; | |||||
| background: #D0EEFF; | |||||
| border: 1px solid #99D3F5; | |||||
| border-radius: 4px; | |||||
| padding: 4px 12px; | |||||
| overflow: hidden; | |||||
| color: #1E88C7; | |||||
| text-decoration: none; | |||||
| text-indent: 0; | |||||
| line-height: 20px; | |||||
| } | |||||
| </style> | |||||
+ 727
- 0
src/utils/ol_map.js
View File
| @@ -0,0 +1,727 @@ | |||||
| const MAP_FIELD_DRAW_LAYER_NAME = '_Draw_layer'; | |||||
| const MAP_FIELD_INIT_LAYER_NAME = '_Init_layer'; | |||||
| export const olMap = function(selector) { | |||||
| this.selector = selector; | |||||
| this.mapObject = null; | |||||
| this.minMapZoom = 16; | |||||
| this.maxMapZoom = 18; | |||||
| this.allowDraw = false; | |||||
| this.allowSelect = false; | |||||
| this.allowMark = false; | |||||
| this.coord = [115.452752, 31.789033]; | |||||
| this.isInited = false; | |||||
| this.error = null; | |||||
| this.userLayers = []; | |||||
| this.callback = { | |||||
| 'draw::start': [], | |||||
| 'draw::end': [], | |||||
| 'draw::remove': [], | |||||
| 'draw::reset': [], | |||||
| 'interactive::select': [], | |||||
| 'mark::start': [], | |||||
| 'mark::end': [], | |||||
| 'mark::reset': [], | |||||
| }; | |||||
| // 当前支持的配置和默认值, 支持.拼接的字符串作为键(只能一级) | |||||
| const SUPPORT_CONFIG = { | |||||
| style: { | |||||
| fill: { | |||||
| color: 'rgba(204, 255, 204, 0.3)', // 多边形填充颜色 | |||||
| 'color::SELECTED': "rgb(204, 255, 255, 0.5)", // 选择模式下选中时的多边形填充颜色 | |||||
| }, | |||||
| stroke: { | |||||
| color: '#47c68f', // 线颜色 | |||||
| width: 3, // 线宽 | |||||
| 'color::SELECTED': '#00FFFF', // 选择模式下选中时的线颜色 | |||||
| 'width::SELECTED': 8, // 选择模式下选中时的线宽 | |||||
| }, | |||||
| text: { | |||||
| font: 'normal 12px 微软雅黑', // 字体 | |||||
| fill: { | |||||
| color: '#FF0000', // 文字颜色 | |||||
| } | |||||
| } | |||||
| } | |||||
| }; | |||||
| this.drawResult = null; | |||||
| this.draw = null; | |||||
| this.currentSelect = null; | |||||
| this.markResult = null; | |||||
| this.__ASSERT = function(cond, msg) { | |||||
| if(!cond) | |||||
| this.__SetError(msg || '错误'); | |||||
| return !!cond; | |||||
| }; | |||||
| // 设置回调 | |||||
| this.SetCallback = function(type, func) { | |||||
| if(!func || !this.callback.hasOwnProperty(type)) | |||||
| return false; | |||||
| let arr = this.callback[type]; | |||||
| if(arr.includes(func)) | |||||
| return false; | |||||
| arr.push(func); | |||||
| return func; | |||||
| }; | |||||
| // 移除回调, 函数为空则移除该回调类型下的所有函数 | |||||
| this.RemoveCallback = function(type, func = null) { | |||||
| if(!this.callback.hasOwnProperty(type)) | |||||
| return false; | |||||
| if(func) | |||||
| { | |||||
| let arr = this.callback[type]; | |||||
| let index = arr.indexOf(func); | |||||
| if(index >= 0) | |||||
| { | |||||
| arr.splice(index, 1); | |||||
| return true; | |||||
| } | |||||
| return false; | |||||
| } | |||||
| else | |||||
| { | |||||
| this.callback[type] = []; | |||||
| return true; | |||||
| } | |||||
| }; | |||||
| // 清空全部回调 | |||||
| this.ClearCallback = function() { | |||||
| for(let k in this.callback) | |||||
| this.callback[k] = []; | |||||
| }; | |||||
| // private 调用回调 | |||||
| this.__Callback = function(type/*, 其他参数 */) { | |||||
| let args = []; | |||||
| for(let i = 1; i < arguments.length; i++) | |||||
| args.push(arguments[i]); | |||||
| this.callback[type].forEach((x) => x(...args)); | |||||
| }; | |||||
| // private 请求必须初始化, 未初始化则错误 | |||||
| this.__RequireInited = function() { | |||||
| return this.__ASSERT(this.IsInited(), '地图未初始化'); | |||||
| }; | |||||
| // private 设置当前错误, 并抛出错误 | |||||
| this.__SetError = function(err) { | |||||
| this.error = err; | |||||
| if(this.error) | |||||
| { | |||||
| console.error(err); | |||||
| throw this.error; | |||||
| } | |||||
| }; | |||||
| // 是否完成初始化 | |||||
| this.IsInited = function() { | |||||
| return this.mapObject !== null; | |||||
| }; | |||||
| // 初始化, 如果已初始化则错误 | |||||
| this.Init = function() { | |||||
| this.__ASSERT(!this.IsInited(), '已经初始化'); | |||||
| this.__CreateMap(this.selector); | |||||
| this.isInited = true; | |||||
| }; | |||||
| // 销毁地图对象, 如果未初始化则返回 | |||||
| this.DestroyMap = function() { | |||||
| if(!this.IsInited()) | |||||
| return; | |||||
| this.ClearCallback(); | |||||
| this.userLayers = []; | |||||
| //delete this.mapObject; | |||||
| document.querySelector('#' + this.selector).innerHTML = ''; | |||||
| this.mapObject = null; | |||||
| }; | |||||
| // private 创建地图元素, 已初始化则错误, 元素ID未指定则错误 | |||||
| this.__CreateMap = function() { | |||||
| this.__ASSERT(!this.IsInited(), '已经初始化'); | |||||
| this.__ASSERT(this.selector, '元素ID缺失'); | |||||
| let projection = new ol.proj.Projection({ | |||||
| //地图投影类型 | |||||
| code: "EPSG:3857", | |||||
| units: "degrees", | |||||
| //extent:extent | |||||
| }); | |||||
| let aerial = new ol.layer.Tile({ | |||||
| source: new ol.source.XYZ({ | |||||
| url: "http://t0.tianditu.gov.cn/img_w/wmts?" + | |||||
| "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + | |||||
| "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067", | |||||
| }), | |||||
| isGroup: true, | |||||
| name: "卫星影像图", | |||||
| }); | |||||
| let yingxzi = new ol.layer.Tile({ | |||||
| source: new ol.source.XYZ({ | |||||
| url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067", | |||||
| }), | |||||
| isGroup: true, | |||||
| name: "天地图文字标注--卫星影像图", | |||||
| }); | |||||
| //加载地图 | |||||
| let map = new ol.Map({ | |||||
| // interactions: ol.interaction.DragPan({ | |||||
| // onFocusOnly: false | |||||
| // }), | |||||
| controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮 | |||||
| layers: [aerial, yingxzi], | |||||
| projection: projection, | |||||
| target: this.selector, | |||||
| logo: 'false', | |||||
| view: new ol.View({ | |||||
| center: ol.proj.fromLonLat(this.coord), | |||||
| //zoom: false, | |||||
| zoom: 17.9, | |||||
| minZoom: this.minMapZoom, //地图缩小限制 | |||||
| maxZoom: this.maxMapZoom, //地图放大限制 | |||||
| }), | |||||
| }); | |||||
| this.mapObject = map; | |||||
| //console.log(map, map.getProperties()); | |||||
| }; | |||||
| // 获取配置值 | |||||
| this.__GetConfig = function(config, name, defVal) { | |||||
| if(!config || typeof(config) !== 'object') | |||||
| return defVal; | |||||
| if(config.hasOwnProperty(name)) | |||||
| return config[name]; | |||||
| let arr = name.split('.'); | |||||
| let ptr = config; | |||||
| for(let i in arr) | |||||
| { | |||||
| ptr = ptr[arr[i]]; | |||||
| //console.log(arr[i], JSON.stringify(ptr)); | |||||
| if(!ptr) | |||||
| break; | |||||
| } | |||||
| //console.log(`__GetConfig(${name}) -> ${ptr}`); | |||||
| if(ptr === undefined || ptr === null || ptr === '') | |||||
| return defVal; | |||||
| return ptr; | |||||
| }; | |||||
| // 获取默认配置值 | |||||
| this.GetDefaultConfig = function(name) { | |||||
| let arr = name.split('.'); | |||||
| let ptr = SUPPORT_CONFIG; | |||||
| for(let i in arr) | |||||
| { | |||||
| ptr = ptr[arr[i]]; | |||||
| if(!ptr) | |||||
| break; | |||||
| } | |||||
| return ptr; | |||||
| }; | |||||
| // 设置当前坐标点 | |||||
| this.SetCoord = function(lng, lat) { | |||||
| this.__RequireInited(); | |||||
| this.mapObject.getView().setCenter(ol.proj.fromLonLat([lng, lat])); | |||||
| //console.log('SetCoord', lng, lat,this.mapObject); | |||||
| return true; | |||||
| }; | |||||
| // 获取地图投影对象 | |||||
| this.GetProjection = function() { | |||||
| this.__RequireInited(); | |||||
| return this.mapObject.get('view').getProjection(); | |||||
| }; | |||||
| // 检查名称是否存在 | |||||
| this.ExistsName = function(name) { | |||||
| if(this.userLayers.length === 0) | |||||
| return false; | |||||
| let res = this.userLayers.findIndex((x) => { | |||||
| return x.name === name; | |||||
| }); | |||||
| return res !== -1; | |||||
| }; | |||||
| // private 检查名称是否存在, 存在则错误 | |||||
| this.__CheckNameExists = function(name) { | |||||
| return this.__ASSERT(!this.ExistsName(name), `标识重复: ${name}`); | |||||
| }; | |||||
| // private 放入图层, 名称存在则错误 | |||||
| this.__PushLayer = function(name, layer, title = null, data = null, config = null) { | |||||
| this.__RequireInited(); | |||||
| this.__CheckNameExists(name); | |||||
| this.mapObject.addLayer(layer); | |||||
| //console.log(name, layer); | |||||
| this.userLayers.push({ | |||||
| name: name, | |||||
| layer: layer, | |||||
| visible: true, | |||||
| title: title, | |||||
| data: data, | |||||
| config: config, | |||||
| }); | |||||
| return true; | |||||
| }; | |||||
| // 根据索引获取图层, 索引可为负数, 索引无效则错误 | |||||
| this.GetLayer = function(index) { | |||||
| if(this.userLayers.length === 0) | |||||
| return null; | |||||
| let i = index < 0 ? this.userLayers.length + index : index; | |||||
| this.__ASSERT(i >= 0 && i < this.userLayers.length, `无效索引: ${index}`); | |||||
| return this.userLayers[i]; | |||||
| }; | |||||
| // 根据名称查找图层, 名称不存在返回null | |||||
| this.FindLayer = function(name) { | |||||
| if(this.userLayers.length === 0) | |||||
| return null; | |||||
| return this.userLayers.find((x) => x.name === name); | |||||
| }; | |||||
| // private 搜索图层, 索引/名称, orFail为真, 则未找到时错误 | |||||
| this.__SearchLayer = function(name, orFail = false) { | |||||
| let layer = null; | |||||
| let index = -1; | |||||
| if(typeof(name) === 'number') | |||||
| { | |||||
| let i = name < 0 ? this.userLayers.length + name : name; | |||||
| if(i >= 0 && i < this.userLayers.length) | |||||
| { | |||||
| layer = this.userLayers[i]; | |||||
| index = i; | |||||
| } | |||||
| } | |||||
| else | |||||
| { | |||||
| let i = this.userLayers.findIndex((x) => x.name === name); | |||||
| if(i >= 0) | |||||
| { | |||||
| layer = this.userLayers[i]; | |||||
| index = i; | |||||
| } | |||||
| } | |||||
| if(orFail && index === -1) | |||||
| this.__SetError(`未找到图层: ${name}(${typeof(name)})`); | |||||
| return [layer, index]; | |||||
| }; | |||||
| // 带出图层数据 索引/名称, 未找到则返回null, 找到会移除图层数据, 但不会从地图移除图层 | |||||
| this.__TakeLayer = function(name) { | |||||
| if(this.userLayers.length === 0) | |||||
| return null; | |||||
| let [layer, index] = this.__SearchLayer(name); | |||||
| if(index !== -1) | |||||
| this.userLayers.splice(index, 1); | |||||
| return layer; | |||||
| }; | |||||
| // 移除图层, 如果不指定name, 则移除最后一个 | |||||
| this.PopLayer = function(name = null) { | |||||
| this.__RequireInited(); | |||||
| //console.log("pop", name, typeof(name)); | |||||
| if(name === null) | |||||
| name = -1; | |||||
| let layer = this.__TakeLayer(name); | |||||
| if(layer) | |||||
| this.mapObject.removeLayer(layer.layer); | |||||
| return layer !== null; | |||||
| }; | |||||
| // 设置图层显隐 | |||||
| this.SetLayerVisible = function(name, on) { | |||||
| this.__RequireInited(); | |||||
| let [layer, ] = this.__SearchLayer(name, true); | |||||
| layer.visible = true; | |||||
| layer.layer.setVisible(on); | |||||
| return true; | |||||
| }; | |||||
| // 隐藏图层 | |||||
| this.HideLayer = function(name) { | |||||
| return this.SetLayerVisible(name, false); | |||||
| }; | |||||
| // 显示图层 | |||||
| this.ShowLayer = function(name) { | |||||
| return this.SetLayerVisible(name, true); | |||||
| }; | |||||
| // 开始绘制 | |||||
| this.StartDraw = function() { | |||||
| this.__RequireInited(); | |||||
| this.__ASSERT(this.allowDraw, '未开启绘制'); | |||||
| this.drawResult = null; | |||||
| this.__Callback('draw::start'); | |||||
| this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME); | |||||
| this.mapObject.removeInteraction(this.draw); | |||||
| let drawLayer = new ol.layer.Vector({ | |||||
| source: new ol.source.Vector(), | |||||
| }); | |||||
| this.__PushLayer(MAP_FIELD_DRAW_LAYER_NAME, drawLayer); | |||||
| this.draw = new ol.interaction.Draw({ | |||||
| source: drawLayer.getSource(), | |||||
| type: "Polygon" | |||||
| }); | |||||
| let self = this; | |||||
| this.draw.on('drawend', function (evt) { | |||||
| self.mapObject.removeInteraction(self.draw); | |||||
| let feature = evt.feature; | |||||
| let geometry = feature.getGeometry(); | |||||
| let coordinate = geometry.getCoordinates(); | |||||
| self.drawResult = coordinate; | |||||
| self.__Callback('draw::end', self.drawResult); | |||||
| }); | |||||
| this.mapObject.addInteraction(this.draw); | |||||
| //console.log("drawPolygon"); | |||||
| }; | |||||
| // 移除绘制 | |||||
| this.ClearDraw = function() { | |||||
| this.__RequireInited(); | |||||
| this.__ASSERT(this.draw, '没有开始绘制'); | |||||
| this.mapObject.removeInteraction(this.draw); | |||||
| this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME); | |||||
| this.draw = null; | |||||
| this.drawResult = null; | |||||
| this.__Callback('draw::remove'); | |||||
| this.__Callback('draw::end', ''); | |||||
| }; | |||||
| // 重置绘制 | |||||
| this.ResetDraw = function() { | |||||
| this.ClearDraw(); | |||||
| this.StartDraw(); | |||||
| this.__Callback('draw::reset'); | |||||
| }; | |||||
| // 设置是否启用绘制 | |||||
| this.SetAllowDraw = function(on) { | |||||
| this.__RequireInited(); | |||||
| if(this.allowDraw == on) | |||||
| return; | |||||
| this.allowDraw = on; | |||||
| this.RemoveDrawLayer(); | |||||
| }; | |||||
| this.RemoveDrawLayer = function() { | |||||
| this.__RequireInited(); | |||||
| if(this.draw) | |||||
| { | |||||
| this.ClearDraw(); | |||||
| this.draw = null; | |||||
| } | |||||
| this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME); | |||||
| this.drawResult = null; | |||||
| this.markResult = null; | |||||
| }; | |||||
| // 更新视图 | |||||
| this.Update = function() { | |||||
| this.__RequireInited(); | |||||
| this.mapObject.updateSize(); | |||||
| }; | |||||
| // 新增/替换图层 | |||||
| this.SetLayer = function(name, theGeom, title = null, data = null, config = null) { | |||||
| this.__RequireInited(); | |||||
| this.PopLayer(name); | |||||
| this.AddLayer(name, theGeom, title, data, config); | |||||
| }; | |||||
| // 新增图层(name不可存在) | |||||
| this.AddLayer = function(name, theGeom, title = null, data = null, config = null) { | |||||
| //console.log("pop", name, theGeom); | |||||
| if(!theGeom) | |||||
| return false; | |||||
| this.__RequireInited(); | |||||
| this.__CheckNameExists(name); | |||||
| if(typeof(theGeom) !== 'object') | |||||
| theGeom = JSON.parse(theGeom); | |||||
| let features = { | |||||
| type: 'Feature', | |||||
| geometry: theGeom, | |||||
| properties: { | |||||
| name: name, | |||||
| title: title, | |||||
| data: data, | |||||
| }, | |||||
| }; | |||||
| //地图只加载一次 | |||||
| //加载地图编辑 | |||||
| //图层查询定位开始 ---------start | |||||
| let hc_land = new ol.layer.Vector({ | |||||
| title: name, | |||||
| source: new ol.source.Vector({ | |||||
| projection: this.GetProjection(), | |||||
| features: new ol.format.GeoJSON().readFeatures(JSON.stringify(features)), | |||||
| }), | |||||
| style: new ol.style.Style({ | |||||
| fill: new ol.style.Fill({ | |||||
| //矢量图层填充颜色，以及透明度 | |||||
| color: this.__GetConfig(config, 'style.fill.color', "rgba(204, 255, 204, 0.3)"), | |||||
| }), | |||||
| stroke: new ol.style.Stroke({ | |||||
| //边界样式 | |||||
| color: this.__GetConfig(config, 'style.stroke.color', "#47c68f"), | |||||
| width: this.__GetConfig(config, 'style.stroke.width', 3), | |||||
| }), | |||||
| //矢量标注样式设置函数，设置image为图标ol.style.Icon | |||||
| text: new ol.style.Text({ | |||||
| textAlign: "center", //位置 | |||||
| textBaseline: "middle", //基准线 | |||||
| font: this.__GetConfig(config, 'style.text.font', "normal 12px 微软雅黑"), //文字样式 | |||||
| text: title, //文本内容 | |||||
| fill: new ol.style.Fill({ | |||||
| //文本填充样式（即文字颜色) | |||||
| color: this.__GetConfig(config, 'style.text.fill.color', "#FF0000"), | |||||
| }), | |||||
| }), | |||||
| }), | |||||
| }); | |||||
| if(!this.__PushLayer(name, hc_land, title, data, config)) | |||||
| return false; | |||||
| let maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX; | |||||
| let maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY; | |||||
| let minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX; | |||||
| let minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY; | |||||
| //定位查询位置 | |||||
| let center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 | |||||
| this.mapObject.getView().animate({ | |||||
| // 只设置需要的属性即可 | |||||
| center: center, // 中心点 | |||||
| zoom: 17.9, // 缩放级别 | |||||
| rotation: undefined, // 缩放完成view视图旋转弧度 | |||||
| duration: 1000, // 缩放持续时间，默认不需要设置 | |||||
| }); | |||||
| return true; | |||||
| }; | |||||
| // 新增图层列表 | |||||
| this.AddLayers = function(list /* name, theGeom, title = null, data = null, config = null */) { | |||||
| if(!list.length) | |||||
| return; | |||||
| this.__RequireInited(); | |||||
| for(let i in list) | |||||
| { | |||||
| let {name, theGeom, title, data, config} = list[i]; | |||||
| this.AddLayer(name, theGeom, title, data, config); | |||||
| } | |||||
| }; | |||||
| // 清除所有用户图层 | |||||
| this.Clear = function() { | |||||
| this.__RequireInited(); | |||||
| for(let i in this.userLayers) | |||||
| this.PopLayer(name); | |||||
| this.userLayers = []; | |||||
| }; | |||||
| // 设置图层列表 | |||||
| this.SetLayers = function(list /* name, theGeom, title = null, data = null, config = null */) { | |||||
| this.Clear(); | |||||
| this.AddLayers(list); | |||||
| }; | |||||
| this.SetAllowSelect = function(on) { | |||||
| this.__RequireInited(); | |||||
| if(this.allowSelect == on) | |||||
| return; | |||||
| this.allowSelect = on; | |||||
| this.ClearSelection(); | |||||
| if(this.allowSelect) | |||||
| { | |||||
| let self = this; | |||||
| this.mapObject.on("singleclick", function (evt) { | |||||
| let feature = self.mapObject.forEachFeatureAtPixel( | |||||
| evt.pixel, | |||||
| (feature) => feature, | |||||
| ); | |||||
| self.SetSelection(feature ? feature.values_.name : null, true); | |||||
| }); | |||||
| } | |||||
| else | |||||
| { | |||||
| this.mapObject.on("singleclick", null); | |||||
| } | |||||
| }; | |||||
| this.ClearSelection = function() { | |||||
| this.__RequireInited(); | |||||
| if(this.currentSelect) | |||||
| { | |||||
| this.__ResetStyle(this.currentSelect); | |||||
| this.currentSelect = null; | |||||
| } | |||||
| }; | |||||
| this.SetSelection = function(name, callback = false) { | |||||
| this.__RequireInited(); | |||||
| if(name) | |||||
| { | |||||
| if(name !== this.currentSelect) | |||||
| { | |||||
| this.ClearSelection(); | |||||
| this.__HighlightStyle(name); | |||||
| } | |||||
| else if(this.currentSelect) | |||||
| { | |||||
| name = null; | |||||
| this.ClearSelection(); | |||||
| } | |||||
| } | |||||
| else | |||||
| { | |||||
| if(this.currentSelect) | |||||
| { | |||||
| name = null; | |||||
| this.ClearSelection(); | |||||
| } | |||||
| } | |||||
| this.currentSelect = name; | |||||
| if(callback) | |||||
| this.__Callback('interactive::select', this.currentSelect); | |||||
| }; | |||||
| this.__ResetStyle = function(name) { | |||||
| let ulayer = this.FindLayer(name); | |||||
| let style = ulayer.layer.getStyle(); | |||||
| style.setFill(new ol.style.Fill({ | |||||
| //矢量图层填充颜色，以及透明度 | |||||
| color: this.__GetConfig(ulayer.config, 'style.fill.color', "rgba(204, 255, 204, 0.3)"), | |||||
| })); | |||||
| style.setStroke(new ol.style.Stroke({ | |||||
| //边界样式 | |||||
| color: this.__GetConfig(ulayer.config, 'style.stroke.color', "#47c68f"), | |||||
| width: this.__GetConfig(ulayer.config, 'style.stroke.width', 3), | |||||
| })); | |||||
| ulayer.layer.setStyle(style); | |||||
| }; | |||||
| this.__HighlightStyle = function(name) { | |||||
| let ulayer = this.FindLayer(name); | |||||
| //console.log(this.mapObject, ulayer, ulayer.layer.getStyle()); | |||||
| let style = ulayer.layer.getStyle(); | |||||
| style.setFill(new ol.style.Fill({ | |||||
| //矢量图层填充颜色，以及透明度 | |||||
| color: this.__GetConfig(ulayer.config, 'style.fill.color::SELECTED', "rgb(204, 255, 255, 0.5)"), | |||||
| })); | |||||
| style.setStroke(new ol.style.Stroke({ | |||||
| //边界样式 | |||||
| color: this.__GetConfig(ulayer.config, 'style.stroke.color::SELECTED', "#00FFFF"), | |||||
| width: this.__GetConfig(ulayer.config, 'style.stroke.width::SELECTED', 8), | |||||
| })); | |||||
| ulayer.layer.setStyle(style); | |||||
| }; | |||||
| // 设置是否启用标记 | |||||
| this.SetAllowMark = function(on) { | |||||
| this.__RequireInited(); | |||||
| if(this.allowMark == on) | |||||
| return; | |||||
| this.allowMark = on; | |||||
| this.RemoveDrawLayer(); | |||||
| }; | |||||
| // 开始标记 | |||||
| this.StartMark = function() { | |||||
| this.__RequireInited(); | |||||
| this.__ASSERT(this.allowMark, '未开启标记'); | |||||
| this.markResult = null; | |||||
| this.__Callback('mark::start'); | |||||
| this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME); | |||||
| let sourceMap = new ol.source.Vector({wrapX: false}); | |||||
| let drawLayer = new ol.layer.Vector({ | |||||
| source: sourceMap, | |||||
| }); | |||||
| this.__PushLayer(MAP_FIELD_DRAW_LAYER_NAME, drawLayer); | |||||
| this.draw = new ol.interaction.Draw({ | |||||
| source: drawLayer.getSource(), | |||||
| type: "Point" | |||||
| }); | |||||
| //this.draw.__sourceMap = sourceMap; | |||||
| let self = this; | |||||
| this.draw.on('drawend', function (evt) { | |||||
| if(self.draw) | |||||
| { | |||||
| self.__ClearMark(); | |||||
| self.StartMark(); | |||||
| } | |||||
| let feature = evt.feature; | |||||
| let geometry = feature.getGeometry(); | |||||
| let coordinate = geometry.getCoordinates(); | |||||
| self.markResult = coordinate; | |||||
| let newFeature = new ol.Feature({ | |||||
| geometry: new ol.geom.Point(coordinate), //几何信息 | |||||
| //name: "标注点", | |||||
| }); | |||||
| newFeature.setStyle(new ol.style.Style({ | |||||
| image: new ol.style.Icon({ | |||||
| //设置图标偏移 | |||||
| anchor: [0.5, 1], | |||||
| //标注样式的起点位置 | |||||
| anchorOrigin: "top-right", | |||||
| //X方向单位：分数 | |||||
| anchorXUnits: "fraction", | |||||
| //Y方向单位：像素 | |||||
| anchorYUnits: "fraction", | |||||
| //偏移起点位置的方向 | |||||
| offsetOrigin: "top-right", | |||||
| //透明度 | |||||
| opacity: 0.9, | |||||
| //图片路径 | |||||
| src: require("@/assets/images/dataScreen/plotPremises/mark.png"), | |||||
| }), | |||||
| /* text: new ol.style.Text({ | |||||
| textAlign: "center", //位置 | |||||
| textBaseline: "middle", //基准线 | |||||
| font: "normal 12px 微软雅黑", //文字样式 | |||||
| //text: "标注点", //文本内容 | |||||
| fill: new ol.style.Fill({ | |||||
| //文本填充样式（即文字颜色) | |||||
| color: "#ff0000", | |||||
| }), | |||||
| }),*/ | |||||
| zIndex: 9999, | |||||
| })); | |||||
| self.draw.source_.addFeature(newFeature); | |||||
| self.__Callback('mark::end', self.markResult); | |||||
| }); | |||||
| this.mapObject.addInteraction(this.draw); | |||||
| //console.log("drawPolygon"); | |||||
| }; | |||||
| // 移除标记 | |||||
| this.__ClearMark = function() { | |||||
| this.__RequireInited(); | |||||
| this.__ASSERT(this.draw, '没有开始标记'); | |||||
| this.mapObject.removeInteraction(this.draw); | |||||
| this.draw = null; | |||||
| }; | |||||
| // 重置标记 | |||||
| this.ResetMark = function() { | |||||
| this.__RequireInited(); | |||||
| this.__ASSERT(this.draw, '没有标记'); | |||||
| this.mapObject.removeInteraction(this.draw); | |||||
| this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME); | |||||
| this.markResult = null; | |||||
| this.__Callback('mark::reset'); | |||||
| }; | |||||
| // 构造初始化 | |||||
| if(this.selector) | |||||
| this.Init(); | |||||
| return this; | |||||
| }; | |||||
| // olMap类静态成员 | |||||
| olMap.MAP_FIELD_DRAW_LAYER_NAME = MAP_FIELD_DRAW_LAYER_NAME; | |||||
| olMap.MAP_FIELD_INIT_LAYER_NAME = MAP_FIELD_INIT_LAYER_NAME; | |||||
| olMap.gen_multipoint = function() { | |||||
| let json = { | |||||
| type: 'MultiPoint', | |||||
| coordinates: [], | |||||
| }; | |||||
| for(let i in arguments) | |||||
| { | |||||
| json.coordinates.push(arguments[i]); | |||||
| } | |||||
| return json; | |||||
| }; | |||||
| olMap.gen_multipoint_json = function() { | |||||
| return JSON.stringify(this.gen_multipoint(...arguments)); | |||||
| }; | |||||
| olMap.gen_point = function(x, y, z) { | |||||
| let json = { | |||||
| type: 'Point', | |||||
| coordinates: Array.isArray(x) ? x : (z !== undefined ? [x, y, z] : [x, y]), | |||||
| }; | |||||
| return json; | |||||
| }; | |||||
| olMap.gen_point_json = function(x, y, z) { | |||||
| return JSON.stringify(this.gen_point(x, y, z)); | |||||
| }; | |||||
| olMap.gen_polygon = function() { | |||||
| let json = { | |||||
| type: 'Polygon', | |||||
| coordinates: [], | |||||
| }; | |||||
| for(let i in arguments) | |||||
| { | |||||
| json.coordinates.push(arguments[i]); | |||||
| } | |||||
| return json; | |||||
| }; | |||||
| olMap.gen_polygon_json = function(x, y, z) { | |||||
| return JSON.stringify(this.gen_polygon(x, y, z)); | |||||
| }; | |||||
+ 810
- 0
src/views/business/resourceLand/index.vue
View File
| @@ -0,0 +1,810 @@ | |||||
| <template> | |||||
| <div class="app-container"> | |||||
| <el-row :gutter="20"> | |||||
| <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme"> | |||||
| <!--部门数据--> | |||||
| <pane size="16"> | |||||
| <el-col> | |||||
| <div class="head-container"> | |||||
| <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> | |||||
| </div> | |||||
| <div class="head-container"> | |||||
| <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" /> | |||||
| </div> | |||||
| </el-col> | |||||
| </pane> | |||||
| <!--用户数据--> | |||||
| <pane size="84"> | |||||
| <el-col> | |||||
| <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"> | |||||
| <el-form-item label="标识码" prop="bsm"> | |||||
| <el-input v-model="queryParams.bsm" placeholder="请输入标识码" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="要素代码" prop="ysdm"> | |||||
| <el-input v-model="queryParams.ysdm" placeholder="请输入要素代码" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块名称" prop="dkmc"> | |||||
| <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="所有权性质" prop="syqxz"> | |||||
| <el-select v-model="queryParams.syqxz" placeholder="请选择所有权性质" clearable> | |||||
| <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块类别" prop="dklb"> | |||||
| <el-select v-model="queryParams.dklb" placeholder="请选择地块类别" clearable> | |||||
| <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="土地利用类型" prop="tdlylx"> | |||||
| <el-select v-model="queryParams.tdlylx" placeholder="请选择土地利用类型" clearable> | |||||
| <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="地力等级" prop="dldj"> | |||||
| <el-select v-model="queryParams.dldj" placeholder="请选择地力等级" clearable> | |||||
| <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="土地用途" prop="tdyt"> | |||||
| <el-select v-model="queryParams.tdyt" placeholder="请选择土地用途" clearable> | |||||
| <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="是否基本农田" prop="sfjbnt"> | |||||
| <el-select v-model="queryParams.sfjbnt" placeholder="请选择是否基本农田" clearable> | |||||
| <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <!-- <el-form-item label="指界人姓名" prop="zjrxm"> | |||||
| <el-input v-model="queryParams.zjrxm" placeholder="请输入指界人姓名" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> --> | |||||
| <el-form-item label="调查状态" prop="surveyStatus"> | |||||
| <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态" clearable> | |||||
| <el-option v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item> | |||||
| <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |||||
| <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| <el-row :gutter="10" class="mb8"> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:resourceLand:add']">新增</el-button> | |||||
| </el-col> | |||||
| <!-- | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:resourceLand:edit']">修改</el-button> | |||||
| </el-col> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:resourceLand:remove']">删除</el-button> | |||||
| </el-col> | |||||
| --> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:resourceLand:import']">导入</el-button> | |||||
| </el-col> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:resourceLand:export']">导出</el-button> | |||||
| </el-col> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="success" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:resourceLand:print']">打印</el-button> | |||||
| </el-col> | |||||
| <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||||
| </el-row> | |||||
| <!-- 数据列表 列属性 min-width="60" show-overflow-tooltip @selection-change="handleSelectionChange" --> | |||||
| <el-table v-loading="loading" :data="resourceLandList" > | |||||
| <el-table-column label="区域位置名称" align="center" prop="deptName" /> | |||||
| <!--<el-table-column type="selection" width="55" align="center" />--> | |||||
| <el-table-column label="标识码" align="center" prop="bsm" /> | |||||
| <el-table-column label="要素代码" align="center" prop="ysdm" /> | |||||
| <el-table-column label="地块代码" align="center" prop="dkbm" /> | |||||
| <el-table-column label="地块名称" align="center" prop="dkmc" /> | |||||
| <el-table-column label="地块四至" align="center"> | |||||
| <el-table-column label="东至" align="center" prop="dkdz" /> | |||||
| <el-table-column label="西至" align="center" prop="dkxz" /> | |||||
| <el-table-column label="南至" align="center" prop="dknz" /> | |||||
| <el-table-column label="北至" align="center" prop="dkbz" /> | |||||
| </el-table-column> | |||||
| <!-- <el-table-column label="所有权性质" align="center" prop="syqxz"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.ownership_type" :value="scope.row.syqxz"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column label="地块类别" align="center" prop="dklb"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.land_type" :value="scope.row.dklb"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column label="土地利用类型" align="center" prop="tdlylx"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.land_use" :value="scope.row.tdlylx"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column label="地力等级" align="center" prop="dldj"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.land_grade_type" :value="scope.row.dldj"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column label="土地用途" align="center" prop="tdyt"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.land_use_type" :value="scope.row.tdyt"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column label="是否基本农田" align="center" prop="sfjbnt"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.sfjbnt"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column label="备注信息" align="center" prop="dkbzxx" /> | |||||
| <el-table-column label="指界人姓名" align="center" prop="zjrxm" /> | |||||
| <el-table-column label="空间坐标" align="center" prop="kjzb" /> | |||||
| <el-table-column label="实测面积(㎡)" align="center" prop="scmj" />--> | |||||
| <el-table-column label="实测面积(亩)" align="center" prop="scmjm" /> | |||||
| <!-- <el-table-column label="地块轮廓坐标" align="center" prop="theGeom" /> | |||||
| <el-table-column label="fid (这个不用管)" align="center" prop="fid" /> --> | |||||
| <el-table-column label="调查状态" align="center" prop="surveyStatus"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.survey_status" :value="scope.row.surveyStatus"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <!-- <el-table-column label="部门级联代码" align="center" prop="importCode" /> --> | |||||
| <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |||||
| <template slot-scope="scope"> | |||||
| <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:resourceLand:query']">查看</el-button> | |||||
| <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:resourceLand:edit']">修改</el-button> | |||||
| <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:resourceLand:remove']">删除</el-button> | |||||
| </template> | |||||
| </el-table-column> | |||||
| </el-table> | |||||
| <!-- 分页插件 --> | |||||
| <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> | |||||
| </el-col> | |||||
| </pane> | |||||
| </splitpanes> | |||||
| </el-row> | |||||
| <!-- 导入EXCEL组件 --> | |||||
| <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> | |||||
| <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> | |||||
| <i class="el-icon-upload"></i> | |||||
| <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> | |||||
| <div class="el-upload__tip text-left" slot="tip"> | |||||
| <div class="el-upload__tip" slot="tip"> | |||||
| <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块属性 | |||||
| </div> | |||||
| <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p> | |||||
| <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> | |||||
| </div> | |||||
| </el-upload> | |||||
| <div slot="footer" class="dialog-footer"> | |||||
| <el-button type="primary" @click="submitFileForm">确 定</el-button> | |||||
| <el-button @click="upload.open = false">取 消</el-button> | |||||
| </div> | |||||
| </el-dialog> | |||||
| <!-- 添加或修改地块属性对话框 --> | |||||
| <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> | |||||
| <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="120px"> | |||||
| <el-form-item label="标识码" prop="bsm"> | |||||
| <el-input-number v-model="form.bsm" placeholder="请输入标识码" controls-position="right" /> | |||||
| </el-form-item> | |||||
| <el-form-item label="要素代码" prop="ysdm"> | |||||
| <el-input v-model="form.ysdm" placeholder="请输入要素代码" show-word-limit :maxlength="6"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块代码" prop="dkbm"> | |||||
| <el-input v-model="form.dkbm" placeholder="<自动生成>" show-word-limit :maxlength="50" disabled/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块名称" prop="dkmc"> | |||||
| <el-input v-model="form.dkmc" placeholder="请输入地块名称" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="所有权性质" prop="syqxz"> | |||||
| <el-select v-model="form.syqxz" placeholder="请选择所有权性质"> | |||||
| <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块类别" prop="dklb"> | |||||
| <el-select v-model="form.dklb" placeholder="请选择地块类别"> | |||||
| <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="土地利用类型" prop="tdlylx"> | |||||
| <el-select v-model="form.tdlylx" placeholder="请选择土地利用类型"> | |||||
| <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="地力等级" prop="dldj"> | |||||
| <el-select v-model="form.dldj" placeholder="请选择地力等级"> | |||||
| <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="土地用途" prop="tdyt"> | |||||
| <el-select v-model="form.tdyt" placeholder="请选择土地用途"> | |||||
| <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="是否基本农田" prop="sfjbnt"> | |||||
| <el-select v-model="form.sfjbnt" placeholder="请选择是否基本农田"> | |||||
| <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块东至" prop="dkdz"> | |||||
| <el-input v-model="form.dkdz" placeholder="请输入地块东至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块西至" prop="dkxz"> | |||||
| <el-input v-model="form.dkxz" placeholder="请输入地块西至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块南至" prop="dknz"> | |||||
| <el-input v-model="form.dknz" placeholder="请输入地块南至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块北至" prop="dkbz"> | |||||
| <el-input v-model="form.dkbz" placeholder="请输入地块北至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="指界人姓名" prop="zjrxm"> | |||||
| <el-input v-model="form.zjrxm" placeholder="请输入指界人姓名" show-word-limit :maxlength="100"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="空间坐标" prop="kjzb"> | |||||
| <el-input v-model="form.kjzb" placeholder="请输入空间坐标" show-word-limit :maxlength="254"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="实测面积( ㎡)" prop="scmj"> | |||||
| <el-input-number v-model="form.scmj" placeholder="请输入实测面积( ㎡)" controls-position="right" :precision="2"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="实测面积" prop="scmjm"> | |||||
| <el-input-number v-model="form.scmjm" placeholder="请输入实测面积" controls-position="right" :precision="3"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="备注信息" prop="dkbzxx"> | |||||
| <el-input v-model="form.dkbzxx" type="textarea" :autosize="{ minRows: 2, maxRows: 3}" :maxlength="200" show-word-limit placeholder="请输入内容" /> | |||||
| </el-form-item> | |||||
| <el-form-item label="调查状态" prop="surveyStatus"> | |||||
| <el-radio-group v-model="form.surveyStatus"> | |||||
| <el-radio v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio> | |||||
| </el-radio-group> | |||||
| </el-form-item> | |||||
| <MapField style="height: 550px;" :allowDraw="true" v-model="form.theGeomJson" :coord="mapCenterLocation" type="1"/> | |||||
| </el-form> | |||||
| <div slot="footer" class="dialog-footer"> | |||||
| <el-button type="primary" v-if="diglogStatus" @click="submitForm">确 定</el-button> | |||||
| <el-button @click="cancel">取 消</el-button> | |||||
| </div> | |||||
| </el-dialog> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { listResourceLand, getResourceLand, delResourceLand, addResourceLand, updateResourceLand, printResourceLand } from "@/api/business/resourceLand" | |||||
| import { getToken } from "@/utils/auth" | |||||
| import { deptTreeSelect } from "@/api/system/user" | |||||
| import Treeselect from "@riophae/vue-treeselect" | |||||
| import "@riophae/vue-treeselect/dist/vue-treeselect.css" | |||||
| import { Splitpanes, Pane } from "splitpanes" | |||||
| import "splitpanes/dist/splitpanes.css" | |||||
| import MapField from "@/components/house/MapField"; | |||||
| export default { | |||||
| name: "ResourceLand", | |||||
| dicts: ['ownership_type', 'land_use_type', 'survey_status', 'land_grade_type', 'sys_yes_no', 'land_type', 'land_use'], | |||||
| components: { Treeselect, Splitpanes, Pane,MapField }, | |||||
| data() { | |||||
| return { | |||||
| // 遮罩层 | |||||
| loading: true, | |||||
| // 遮罩按钮新增点击状态 | |||||
| diglogStatus: true, | |||||
| // 导出遮罩层 | |||||
| exportLoading: false, | |||||
| // 选中数组 | |||||
| ids: [], | |||||
| // 非单个禁用 | |||||
| single: true, | |||||
| // 非多个禁用 | |||||
| multiple: true, | |||||
| // 显示搜索条件 | |||||
| showSearch: true, | |||||
| // 总条数 | |||||
| total: 0, | |||||
| // 地块属性表格数据 | |||||
| resourceLandList: [], | |||||
| // 弹出层标题 | |||||
| title: "", | |||||
| // 是否显示弹出层 | |||||
| open: false, | |||||
| // 详情组件列数 | |||||
| descColumn: 2, | |||||
| // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth} | |||||
| descLabelWidth: 15, | |||||
| // 项目路径 | |||||
| baseRoutingUrl: process.env.VUE_APP_BASE_API, | |||||
| // 查询参数 | |||||
| queryParams: { | |||||
| pageNum: 1, | |||||
| pageSize: 10, | |||||
| // 查询排序 | |||||
| //orderByColumn: "id", | |||||
| //isAsc: "desc", | |||||
| // 翻译字典 | |||||
| //toTranslateDict: "1", | |||||
| bsm: null, | |||||
| ysdm: null, | |||||
| dkmc: null, | |||||
| syqxz: null, | |||||
| dklb: null, | |||||
| tdlylx: null, | |||||
| dldj: null, | |||||
| tdyt: null, | |||||
| sfjbnt: null, | |||||
| dkdz: null, | |||||
| dkxz: null, | |||||
| dknz: null, | |||||
| dkbz: null, | |||||
| dkbzxx: null, | |||||
| zjrxm: null, | |||||
| kjzb: null, | |||||
| scmj: null, | |||||
| scmjm: null, | |||||
| theGeom: null, | |||||
| fid: null, | |||||
| surveyStatus: null, | |||||
| importCode: null, | |||||
| deptName: null, | |||||
| }, | |||||
| // 表单参数 | |||||
| form: {}, | |||||
| // 遮罩按钮新增点击状态 | |||||
| diglogStatus: true, | |||||
| // 部门名称 | |||||
| deptName: undefined, | |||||
| // 所有部门树选项 | |||||
| deptOptions: undefined, | |||||
| // 过滤掉已禁用部门树选项 | |||||
| enabledDeptOptions: undefined, | |||||
| defaultProps: { | |||||
| children: "children", | |||||
| label: "label" | |||||
| }, | |||||
| map: "", // 地图 | |||||
| mapGeoServerUrl: "", // geoserver地址 | |||||
| mapCenterLocation: [], // 地图中心坐标 | |||||
| landLayerName: "", // 地块图层名称 | |||||
| // 表单校验 | |||||
| rules: { | |||||
| dkmc: [ | |||||
| { required: true, message: "地块名称不能为空", trigger: "blur" } | |||||
| ], | |||||
| scmjm: [ | |||||
| { required: true, message: "实测面积不能为空", trigger: "blur" } | |||||
| ], | |||||
| surveyStatus: [ | |||||
| { required: true, message: "调查状态不能为空", trigger: "change" } | |||||
| ], | |||||
| importCode: [ | |||||
| { required: true, message: "部门级联代码不能为空", trigger: "blur" } | |||||
| ], | |||||
| }, | |||||
| // EXCEL导入 | |||||
| upload: { | |||||
| // 是否显示弹出层（用户导入） | |||||
| open: false, | |||||
| // 弹出层标题（用户导入） | |||||
| title: "", | |||||
| // 是否禁用上传 | |||||
| isUploading: false, | |||||
| // 是否更新已经存在的用户数据 | |||||
| updateSupport: 0, | |||||
| // 设置上传的请求头部 | |||||
| headers: { Authorization: "Bearer " + getToken() }, | |||||
| // 上传的地址 | |||||
| url: process.env.VUE_APP_BASE_API + "/business/resourceLand/importData" | |||||
| }, | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| // 根据名称筛选部门树 | |||||
| deptName(val) { | |||||
| this.$refs.tree.filter(val) | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| this.getList(); | |||||
| this.getDeptTree(); | |||||
| // 获取geoserver的地址 | |||||
| this.getGeoServerUrl(); | |||||
| // 获取地块图层名称 | |||||
| this.getLandLayerName(); | |||||
| // 获取村边界的图层名称 | |||||
| // this.getVillageBorderLayerName(); | |||||
| // 获取当前部门的位置 | |||||
| this.getCurrentDeptLocation(); | |||||
| }, | |||||
| methods: { | |||||
| /** 查询地块属性列表 */ | |||||
| getList() { | |||||
| this.loading = true | |||||
| listResourceLand(this.queryParams).then(response => { | |||||
| this.resourceLandList = response.rows | |||||
| this.total = response.total | |||||
| this.loading = false | |||||
| }) | |||||
| }, | |||||
| // 获取geoserver的地址 | |||||
| getGeoServerUrl() { | |||||
| getConfigKey("system.geoServer.url").then(response => { | |||||
| this.mapGeoServerUrl = response.msg; | |||||
| }); | |||||
| }, | |||||
| // 获取地块图层名称 | |||||
| getLandLayerName() { | |||||
| getConfigKey("geoserver.layer.dk").then(response => { | |||||
| this.landLayerName = response.msg; | |||||
| }); | |||||
| }, | |||||
| // 获取村边界的图层名称 | |||||
| /* getVillageBorderLayerName() { | |||||
| getConfigKey("geoserver.layer.villageBorder").then(response => { | |||||
| this.villageBorderLayerName = response.msg; | |||||
| }); | |||||
| }, */ | |||||
| // 获取当前部门的位置 | |||||
| getCurrentDeptLocation() { | |||||
| getCurrentDept().then(response => { | |||||
| let dept = response.data; | |||||
| if (dept.lng && dept.lat) { | |||||
| this.mapCenterLocation = [dept.lng, dept.lat]; | |||||
| } else { | |||||
| this.mapCenterLocation = [116.391458, 39.902377]; | |||||
| } | |||||
| }); | |||||
| }, | |||||
| /** 查询部门下拉树结构 */ | |||||
| getDeptTree() { | |||||
| deptTreeSelect().then(response => { | |||||
| this.deptOptions = response.data | |||||
| this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data))) | |||||
| }) | |||||
| }, | |||||
| // 过滤禁用的部门 | |||||
| filterDisabledDept(deptList) { | |||||
| return deptList.filter(dept => { | |||||
| if (dept.disabled) { | |||||
| return false | |||||
| } | |||||
| if (dept.children && dept.children.length) { | |||||
| dept.children = this.filterDisabledDept(dept.children) | |||||
| } | |||||
| return true | |||||
| }) | |||||
| }, | |||||
| // 筛选节点 | |||||
| filterNode(value, data) { | |||||
| if (!value) return true | |||||
| return data.label.indexOf(value) !== -1 | |||||
| }, | |||||
| // 节点单击事件 | |||||
| handleNodeClick(data) { | |||||
| this.queryParams.deptId = data.id | |||||
| this.handleQuery() | |||||
| }, | |||||
| // 取消按钮 | |||||
| cancel() { | |||||
| this.open = false | |||||
| this.reset() | |||||
| }, | |||||
| cancelDetail() { | |||||
| this.open = false | |||||
| }, | |||||
| // 表单重置 | |||||
| reset() { | |||||
| this.form = { | |||||
| bsm: null, | |||||
| ysdm: null, | |||||
| dkbm: null, | |||||
| dkmc: null, | |||||
| syqxz: null, | |||||
| dklb: null, | |||||
| tdlylx: null, | |||||
| dldj: null, | |||||
| tdyt: null, | |||||
| sfjbnt: null, | |||||
| dkdz: null, | |||||
| dkxz: null, | |||||
| dknz: null, | |||||
| dkbz: null, | |||||
| dkbzxx: null, | |||||
| zjrxm: null, | |||||
| kjzb: null, | |||||
| scmj: null, | |||||
| scmjm: null, | |||||
| theGeom: null, | |||||
| fid: null, | |||||
| surveyStatus: null, | |||||
| importCode: null, | |||||
| deptName: null, | |||||
| createBy: null, | |||||
| createTime: null, | |||||
| updateBy: null, | |||||
| updateTime: null, | |||||
| theGeom: null, | |||||
| theGeomJson: null | |||||
| } | |||||
| this.resetForm("form") | |||||
| // 防止表单提交失败再次打开按钮隐藏 | |||||
| this.diglogStatus = true; | |||||
| }, | |||||
| /** 搜索按钮操作 */ | |||||
| handleQuery() { | |||||
| this.queryParams.pageNum = 1 | |||||
| this.getList() | |||||
| }, | |||||
| /** 重置按钮操作 */ | |||||
| resetQuery() { | |||||
| this.resetForm("queryForm") | |||||
| this.queryParams.deptId = undefined | |||||
| this.$refs.tree.setCurrentKey(null) | |||||
| this.handleQuery() | |||||
| }, | |||||
| // 多选框选中数据 | |||||
| handleSelectionChange(selection) { | |||||
| this.ids = selection.map(item => item.dkbm) | |||||
| this.single = selection.length!==1 | |||||
| this.multiple = !selection.length | |||||
| }, | |||||
| /** 新增按钮操作 */ | |||||
| handleAdd() { | |||||
| this.reset() | |||||
| this.open = true | |||||
| this.title = "添加地块属性" | |||||
| }, | |||||
| /** 修改按钮操作 */ | |||||
| handleUpdate(row) { | |||||
| this.reset() | |||||
| const dkbm = row.dkbm || this.ids | |||||
| getResourceLand(dkbm).then(response => { | |||||
| this.form = response.data | |||||
| this.open = true | |||||
| this.title = "修改地块属性" | |||||
| }) | |||||
| }, | |||||
| /** 查看按钮操作 */ | |||||
| handleLook(row) { | |||||
| this.diglogStatus = false; | |||||
| const dkbm = row.dkbm || this.ids | |||||
| getResourceLand(dkbm).then(response => { | |||||
| this.form = response.data; | |||||
| this.open = true; | |||||
| this.title = "查看地块属性"; | |||||
| }); | |||||
| }, | |||||
| /** 提交按钮 */ | |||||
| submitForm() { | |||||
| this.$refs["form"].validate(valid => { | |||||
| if (valid) { | |||||
| if (this.form.theGeomJson && this.form.theGeomJson.startsWith('[')) { | |||||
| this.form.theGeom = this.form.theGeomJson; | |||||
| } | |||||
| this.diglogStatus = false; | |||||
| if (this.form.dkbm != null) { | |||||
| updateResourceLand(this.form).then(response => { | |||||
| this.$modal.msgSuccess("修改成功") | |||||
| this.open = false | |||||
| this.getList() | |||||
| this.diglogStatus = true; | |||||
| }).catch(() => this.diglogStatus = true); | |||||
| } else { | |||||
| addResourceLand(this.form).then(response => { | |||||
| this.$modal.msgSuccess("新增成功") | |||||
| this.open = false | |||||
| this.getList() | |||||
| this.diglogStatus = true; | |||||
| }).catch(() => this.diglogStatus = true); | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| /** 删除按钮操作 */ | |||||
| handleDelete(row) { | |||||
| const dkbms = row.dkbm || this.ids | |||||
| this.$modal.confirm('是否确认删除地块属性编号为"' + dkbms + '"的数据项？').then(function() { | |||||
| return delResourceLand(dkbms) | |||||
| }).then(() => { | |||||
| this.getList() | |||||
| this.$modal.msgSuccess("删除成功") | |||||
| }).catch(() => {}) | |||||
| }, | |||||
| /** 导出按钮操作 */ | |||||
| handleExport() { | |||||
| this.download('business/resourceLand/export', { | |||||
| ...this.queryParams | |||||
| }, `地块属性_${new Date().getTime()}.xlsx`) | |||||
| }, | |||||
| /** 打印表单 */ | |||||
| doPrint() { | |||||
| const originalTitle = document.title; | |||||
| try { | |||||
| document.title = this.title || '打印详情'; | |||||
| const printElement = document.getElementById('printDetail'); | |||||
| const printFrame = document.createElement('iframe'); | |||||
| printFrame.style.position = 'absolute'; | |||||
| printFrame.style.width = '0'; | |||||
| printFrame.style.height = '0'; | |||||
| printFrame.style.border = 'none'; | |||||
| printFrame.style.left = '-9999px'; | |||||
| printFrame.onload = function() { | |||||
| try { | |||||
| const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document; | |||||
| const contentClone = printElement.cloneNode(true); | |||||
| const style = document.createElement('style'); | |||||
| style.innerHTML = ` | |||||
| @page { | |||||
| size: auto; | |||||
| margin: 10mm; | |||||
| } | |||||
| body { | |||||
| font-family: Arial, sans-serif; | |||||
| line-height: 1.5; | |||||
| margin: 0; | |||||
| padding: 0; | |||||
| } | |||||
| .el-descriptions { | |||||
| width: 100% !important; | |||||
| } | |||||
| .el-descriptions-item__label { | |||||
| width: ${this.descLabelWidth}% !important; | |||||
| } | |||||
| .el-descriptions-item__content { | |||||
| width: ${(100 / this.descColumn) - this.descLabelWidth}% !important; | |||||
| } | |||||
| /* 确保图片在打印时显示完整 */ | |||||
| img, .el-image { | |||||
| max-width: 100% !important; | |||||
| height: auto !important; | |||||
| } | |||||
| `; | |||||
| frameDoc.head.appendChild(style); | |||||
| frameDoc.body.appendChild(contentClone); | |||||
| setTimeout(() => { | |||||
| printFrame.contentWindow.focus(); | |||||
| printFrame.contentWindow.print(); | |||||
| setTimeout(() => { | |||||
| document.body.removeChild(printFrame); | |||||
| document.title = originalTitle; | |||||
| }, 1000); | |||||
| }, 500); | |||||
| } catch (e) { | |||||
| document.body.removeChild(printFrame); | |||||
| document.title = originalTitle; | |||||
| this.$message.error('打印过程中发生错误'); | |||||
| } | |||||
| }; | |||||
| document.body.appendChild(printFrame); | |||||
| } catch (e) { | |||||
| document.title = originalTitle; | |||||
| this.$message.error('打印过程中发生错误'); | |||||
| } | |||||
| }, | |||||
| /** 打印按钮操作 */ | |||||
| handlePrint() { | |||||
| printResourceLand(this.queryParams).then(response => {}) | |||||
| }, | |||||
| /* 导入EXCEL组件 */ | |||||
| handleImport() { | |||||
| this.upload.title = "地块属性导入" | |||||
| this.upload.open = true | |||||
| }, | |||||
| /** 下载模板操作 */ | |||||
| importTemplate() { | |||||
| this.download('business/resourceLand/importTemplate', { | |||||
| }, `resourceLand_template.xlsx`) | |||||
| }, | |||||
| // 文件上传中处理 | |||||
| handleFileUploadProgress(event, file, fileList) { | |||||
| this.upload.isUploading = true | |||||
| }, | |||||
| // 文件上传成功处理 | |||||
| handleFileSuccess(response, file, fileList) { | |||||
| this.upload.open = false | |||||
| this.upload.isUploading = false | |||||
| this.$refs.upload.clearFiles() | |||||
| this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) | |||||
| this.getList() | |||||
| }, | |||||
| // 提交上传文件 | |||||
| submitFileForm() { | |||||
| this.$refs.upload.submit() | |||||
| }, | |||||
| handleMap(row) { | |||||
| this.openMap = true; | |||||
| this.map = ""; | |||||
| setTimeout(() => { | |||||
| this.drawMap(row.theGeomJson); | |||||
| }, 500); | |||||
| }, | |||||
| drawMap(theGeomJson) { | |||||
| document.getElementById("landMapWrap").innerHTML = ""; | |||||
| // 定义地图投影 | |||||
| let projection = new ol.proj.Projection({ | |||||
| code: "EPSG:3857", | |||||
| units: "degrees", | |||||
| }); | |||||
| // 定义地图图层 | |||||
| let aerial = new ol.layer.Tile({ | |||||
| source: new ol.source.XYZ({ | |||||
| url: "http://t{0-7}.tianditu.com/img_w/wmts?" + | |||||
| "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + | |||||
| "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067", | |||||
| }), | |||||
| isGroup: true, | |||||
| name: "卫星影像图", | |||||
| }); | |||||
| let yingxzi = new ol.layer.Tile({ | |||||
| source: new ol.source.XYZ({ | |||||
| url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067", | |||||
| }), | |||||
| isGroup: true, | |||||
| name: "天地图文字标注--卫星影像图", | |||||
| }); | |||||
| //加载地图 | |||||
| this.map = new ol.Map({ | |||||
| controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), | |||||
| layers: [aerial, yingxzi], | |||||
| projection: projection, | |||||
| target: "landMapWrap", | |||||
| view: new ol.View({ | |||||
| center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标 | |||||
| zoom: 13.5, | |||||
| minZoom: 1, //地图缩小限制 | |||||
| maxZoom: 18, //地图放大限制 | |||||
| // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416] | |||||
| }), | |||||
| }); | |||||
| // 添加全部的地块图层 | |||||
| const deptId = this.$store.state.user.loginDeptId; | |||||
| this.addLandLayer(deptId); | |||||
| // 添加选中的地块图层 | |||||
| this.addSelectedLandLayer(theGeomJson); | |||||
| }, | |||||
| // 添加全部的地块图层 | |||||
| addLandLayer(deptId) { | |||||
| const landLayer = new ol.layer.Image({ | |||||
| source: new ol.source.ImageWMS({ | |||||
| url: this.mapGeoServerUrl + '/wms', | |||||
| params: { | |||||
| LAYERS: this.landLayerName, | |||||
| cql_filter: "dept_id = '" + deptId + "'", | |||||
| SRID: 3857, | |||||
| } | |||||
| }), | |||||
| name: 'landLayer' | |||||
| }); | |||||
| this.map.getLayers().insertAt(3, landLayer); | |||||
| // this.map.addLayer(landLayer); | |||||
| }, | |||||
| // 添加选中的地块图层 | |||||
| addSelectedLandLayer(theGeomJson) { | |||||
| if (theGeomJson) { | |||||
| const selectedLandLayer = new ol.layer.Vector({ | |||||
| source: new ol.source.Vector({ | |||||
| features: new ol.format.GeoJSON().readFeatures(theGeomJson), | |||||
| }), | |||||
| name: 'selectedLandLayer', | |||||
| style: new ol.style.Style({ | |||||
| fill: new ol.style.Fill({ | |||||
| //矢量图层填充颜色，以及透明度 | |||||
| color: "rgba(255, 84, 87, 0.3)", | |||||
| }), | |||||
| stroke: new ol.style.Stroke({ | |||||
| //边界样式 | |||||
| color: "#ff5457", | |||||
| width: 3, | |||||
| }), | |||||
| }) | |||||
| }); | |||||
| this.map.getLayers().insertAt(4, selectedLandLayer); | |||||
| this.map.getView().setCenter(ol.extent.getCenter(selectedLandLayer.getSource().getExtent())); | |||||
| this.map.getView().setZoom(18); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
+ 564
- 0
src/views/business/resourceOperation/index.vue
View File
| @@ -0,0 +1,564 @@ | |||||
| <template> | |||||
| <div class="app-container"> | |||||
| <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||||
| <el-form-item label="地块代码" prop="dkbm"> | |||||
| <el-input v-model="queryParams.dkbm" placeholder="请输入地块代码" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块名称" prop="dkmc"> | |||||
| <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块东至" prop="dkdz"> | |||||
| <el-input v-model="queryParams.dkdz" placeholder="请输入地块东至" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块西至" prop="dkxz"> | |||||
| <el-input v-model="queryParams.dkxz" placeholder="请输入地块西至" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块南至" prop="dknz"> | |||||
| <el-input v-model="queryParams.dknz" placeholder="请输入地块南至" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块北至" prop="dkbz"> | |||||
| <el-input v-model="queryParams.dkbz" placeholder="请输入地块北至" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营面积(亩)" prop="jymj"> | |||||
| <el-input v-model="queryParams.jymj" placeholder="请输入经营面积(亩)" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营方式" prop="jyfs"> | |||||
| <el-input v-model="queryParams.jyfs" placeholder="请输入经营方式" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营对象名称" prop="jydxmc"> | |||||
| <el-input v-model="queryParams.jydxmc" placeholder="请输入经营对象名称" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营开始时间" prop="jykssj"> | |||||
| <el-date-picker clearable v-model="queryParams.jykssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营开始时间"></el-date-picker> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营结束时间" prop="jyjssj"> | |||||
| <el-date-picker clearable v-model="queryParams.jyjssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营结束时间"></el-date-picker> | |||||
| </el-form-item> | |||||
| <el-form-item label="承包金额(元)" prop="cbje"> | |||||
| <el-input v-model="queryParams.cbje" placeholder="请输入承包金额(元)" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="备注" prop="bz"> | |||||
| <el-input v-model="queryParams.bz" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="实物图" prop="dkImg"> | |||||
| <el-input v-model="queryParams.dkImg" placeholder="请输入实物图" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="调查状态 字典 survey_status" prop="surveyStatus"> | |||||
| <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态 字典 survey_status" clearable> | |||||
| <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
| </el-select> | |||||
| </el-form-item> | |||||
| <el-form-item label="部门级联代码" prop="importCode"> | |||||
| <el-input v-model="queryParams.importCode" placeholder="请输入部门级联代码" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="区域位置名称" prop="deptName"> | |||||
| <el-input v-model="queryParams.deptName" placeholder="请输入区域位置名称" clearable @keyup.enter.native="handleQuery"/> | |||||
| </el-form-item> | |||||
| <el-form-item> | |||||
| <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |||||
| <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| <el-row :gutter="10" class="mb8"> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:resourceOperation:add']">新增</el-button> | |||||
| </el-col> | |||||
| <!-- | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:resourceOperation:edit']">修改</el-button> | |||||
| </el-col> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:resourceOperation:remove']">删除</el-button> | |||||
| </el-col> | |||||
| --> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:resourceOperation:import']">导入</el-button> | |||||
| </el-col> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:resourceOperation:export']">导出</el-button> | |||||
| </el-col> | |||||
| <el-col :span="1.5"> | |||||
| <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:resourceOperation:print']">打印</el-button> | |||||
| </el-col> | |||||
| <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||||
| </el-row> | |||||
| <!-- 数据列表 列属性 min-width="60" show-overflow-tooltip @selection-change="handleSelectionChange" --> | |||||
| <el-table v-loading="loading" :data="resourceOperationList" border> | |||||
| <!--<el-table-column type="selection" width="55" align="center" />--> | |||||
| <el-table-column label="id" align="center" prop="id" min-width="60"/> | |||||
| <el-table-column label="地块代码" align="center" prop="dkbm" min-width="60"/> | |||||
| <el-table-column label="地块名称" align="center" prop="dkmc" /> | |||||
| <el-table-column label="地块东至" align="center" prop="dkdz" /> | |||||
| <el-table-column label="地块西至" align="center" prop="dkxz" /> | |||||
| <el-table-column label="地块南至" align="center" prop="dknz" /> | |||||
| <el-table-column label="地块北至" align="center" prop="dkbz" /> | |||||
| <el-table-column label="经营面积(亩)" align="center" prop="jymj" /> | |||||
| <el-table-column label="经营方式" align="center" prop="jyfs" /> | |||||
| <el-table-column label="经营对象名称" align="center" prop="jydxmc" /> | |||||
| <el-table-column label="经营开始时间" align="center" prop="jykssj" /> | |||||
| <el-table-column label="经营结束时间" align="center" prop="jyjssj" /> | |||||
| <el-table-column label="承包金额(元)" align="center" prop="cbje" /> | |||||
| <el-table-column label="备注" align="center" prop="bz" /> | |||||
| <el-table-column label="实物图" align="center" prop="dkImg" /> | |||||
| <el-table-column label="调查状态 字典 survey_status" align="center" prop="surveyStatus"> | |||||
| <template slot-scope="scope"> | |||||
| <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.surveyStatus"/> | |||||
| </template> | |||||
| </el-table-column> | |||||
| <el-table-column label="部门级联代码" align="center" prop="importCode" /> | |||||
| <el-table-column label="区域位置名称" align="center" prop="deptName" /> | |||||
| <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="250"> | |||||
| <template slot-scope="scope"> | |||||
| <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:resourceOperation:query']">查看</el-button> | |||||
| <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:resourceOperation:edit']">修改</el-button> | |||||
| <el-dropdown size="mini" v-hasPermi="['business:resourceOperation:remove']"> | |||||
| <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> | |||||
| <el-dropdown-menu slot="dropdown" style="padding: 5px"> | |||||
| <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:resourceOperation:remove']">删除</el-button> | |||||
| </el-dropdown-menu> | |||||
| </el-dropdown> | |||||
| </template> | |||||
| </el-table-column> | |||||
| </el-table> | |||||
| <!-- 分页插件 --> | |||||
| <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> | |||||
| <!-- 导入EXCEL组件 --> | |||||
| <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> | |||||
| <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> | |||||
| <i class="el-icon-upload"></i> | |||||
| <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> | |||||
| <div class="el-upload__tip text-left" slot="tip"> | |||||
| <div class="el-upload__tip" slot="tip"> | |||||
| <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块经营 | |||||
| </div> | |||||
| <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p> | |||||
| <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> | |||||
| </div> | |||||
| </el-upload> | |||||
| <div slot="footer" class="dialog-footer"> | |||||
| <el-button type="primary" @click="submitFileForm">确 定</el-button> | |||||
| <el-button @click="upload.open = false">取 消</el-button> | |||||
| </div> | |||||
| </el-dialog> | |||||
| <!-- 查看地块经营对话框 --> | |||||
| <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body> | |||||
| <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}"> | |||||
| <el-descriptions-item label="地块名称">{{ form.dkmc }}</el-descriptions-item> | |||||
| <el-descriptions-item label="地块东至">{{ form.dkdz }}</el-descriptions-item> | |||||
| <el-descriptions-item label="地块西至">{{ form.dkxz }}</el-descriptions-item> | |||||
| <el-descriptions-item label="地块南至">{{ form.dknz }}</el-descriptions-item> | |||||
| <el-descriptions-item label="地块北至">{{ form.dkbz }}</el-descriptions-item> | |||||
| <el-descriptions-item label="经营面积(亩)">{{ form.jymj }}</el-descriptions-item> | |||||
| <el-descriptions-item label="经营方式">{{ form.jyfs }}</el-descriptions-item> | |||||
| <el-descriptions-item label="经营对象名称">{{ form.jydxmc }}</el-descriptions-item> | |||||
| <el-descriptions-item label="经营开始时间">{{ form.jykssj }}</el-descriptions-item> | |||||
| <el-descriptions-item label="经营结束时间">{{ form.jyjssj }}</el-descriptions-item> | |||||
| <el-descriptions-item label="承包金额(元)">{{ form.cbje }}</el-descriptions-item> | |||||
| <el-descriptions-item label="备注">{{ form.bz }}</el-descriptions-item> | |||||
| <el-descriptions-item label="实物图">{{ form.dkImg }}</el-descriptions-item> | |||||
| <el-descriptions-item label="调查状态 字典 survey_status">{{ form.surveyStatus }}</el-descriptions-item> | |||||
| <el-descriptions-item label="部门级联代码">{{ form.importCode }}</el-descriptions-item> | |||||
| <el-descriptions-item label="区域位置名称">{{ form.deptName }}</el-descriptions-item> | |||||
| </el-descriptions> | |||||
| <!-- 弹框操作按钮 --> | |||||
| <div slot="footer" class="dialog-footer"> | |||||
| <el-button @click="doPrint">打 印</el-button> | |||||
| <el-button @click="cancelDetail">关 闭</el-button> | |||||
| </div> | |||||
| </el-dialog> | |||||
| <!-- 添加或修改地块经营对话框 --> | |||||
| <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> | |||||
| <el-form ref="form" :model="form" :rules="rules" label-width="100px"> | |||||
| <el-form-item label="地块名称" prop="dkmc"> | |||||
| <el-input v-model="form.dkmc" placeholder="请输入地块名称" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块东至" prop="dkdz"> | |||||
| <el-input v-model="form.dkdz" placeholder="请输入地块东至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块西至" prop="dkxz"> | |||||
| <el-input v-model="form.dkxz" placeholder="请输入地块西至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块南至" prop="dknz"> | |||||
| <el-input v-model="form.dknz" placeholder="请输入地块南至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="地块北至" prop="dkbz"> | |||||
| <el-input v-model="form.dkbz" placeholder="请输入地块北至" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营面积(亩)" prop="jymj"> | |||||
| <el-input-number v-model="form.jymj" placeholder="请输入经营面积(亩)" controls-position="right" :precision="2"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营方式" prop="jyfs"> | |||||
| <el-input v-model="form.jyfs" placeholder="请输入经营方式" show-word-limit :maxlength="1"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营对象名称" prop="jydxmc"> | |||||
| <el-input v-model="form.jydxmc" placeholder="请输入经营对象名称" show-word-limit :maxlength="200"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营开始时间" prop="jykssj"> | |||||
| <el-date-picker clearable v-model="form.jykssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营开始时间"></el-date-picker> | |||||
| </el-form-item> | |||||
| <el-form-item label="经营结束时间" prop="jyjssj"> | |||||
| <el-date-picker clearable v-model="form.jyjssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营结束时间"></el-date-picker> | |||||
| </el-form-item> | |||||
| <el-form-item label="承包金额(元)" prop="cbje"> | |||||
| <el-input-number v-model="form.cbje" placeholder="请输入承包金额(元)" controls-position="right" :precision="2"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="备注" prop="bz"> | |||||
| <el-input v-model="form.bz" placeholder="请输入备注" show-word-limit :maxlength="255"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="实物图" prop="dkImg"> | |||||
| <el-input v-model="form.dkImg" placeholder="请输入实物图" show-word-limit :maxlength="255"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="调查状态 字典 survey_status" prop="surveyStatus"> | |||||
| <el-radio-group v-model="form.surveyStatus"> | |||||
| <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-radio> | |||||
| </el-radio-group> | |||||
| </el-form-item> | |||||
| <el-form-item label="部门级联代码" prop="importCode"> | |||||
| <el-input v-model="form.importCode" placeholder="请输入部门级联代码" show-word-limit :maxlength="20"/> | |||||
| </el-form-item> | |||||
| <el-form-item label="区域位置名称" prop="deptName"> | |||||
| <el-input v-model="form.deptName" placeholder="请输入区域位置名称" show-word-limit :maxlength="50"/> | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| <div slot="footer" class="dialog-footer"> | |||||
| <el-button type="primary" @click="submitForm">确 定</el-button> | |||||
| <el-button @click="cancel">取 消</el-button> | |||||
| </div> | |||||
| </el-dialog> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { listResourceOperation, getResourceOperation, getResourceOperationDetail, delResourceOperation, addResourceOperation, updateResourceOperation, printResourceOperation } from "@/api/business/resourceOperation" | |||||
| import { getToken } from "@/utils/auth" | |||||
| export default { | |||||
| name: "ResourceOperation", | |||||
| dicts: ['sys_yes_no'], | |||||
| data() { | |||||
| return { | |||||
| // 遮罩层 | |||||
| loading: true, | |||||
| // 导出遮罩层 | |||||
| exportLoading: false, | |||||
| // 选中数组 | |||||
| ids: [], | |||||
| // 非单个禁用 | |||||
| single: true, | |||||
| // 非多个禁用 | |||||
| multiple: true, | |||||
| // 显示搜索条件 | |||||
| showSearch: true, | |||||
| // 总条数 | |||||
| total: 0, | |||||
| // 地块经营表格数据 | |||||
| resourceOperationList: [], | |||||
| // 弹出层标题 | |||||
| title: "", | |||||
| // 是否显示弹出层 | |||||
| open: false, | |||||
| // 详情组件列数 | |||||
| descColumn: 2, | |||||
| // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth} | |||||
| descLabelWidth: 15, | |||||
| // 对话框显示只读的详情 | |||||
| viewOpen: false, | |||||
| // 项目路径 | |||||
| baseRoutingUrll: process.env.VUE_APP_BASE_API, | |||||
| // 查询参数 | |||||
| queryParams: { | |||||
| pageNum: 1, | |||||
| pageSize: 10, | |||||
| // 查询排序 | |||||
| //orderByColumn: "id", | |||||
| //isAsc: "desc", | |||||
| // 翻译字典 | |||||
| //toTranslateDict: "1", | |||||
| dkbm: null, | |||||
| dkmc: null, | |||||
| dkdz: null, | |||||
| dkxz: null, | |||||
| dknz: null, | |||||
| dkbz: null, | |||||
| jymj: null, | |||||
| jyfs: null, | |||||
| jydxmc: null, | |||||
| jykssj: null, | |||||
| jyjssj: null, | |||||
| cbje: null, | |||||
| bz: null, | |||||
| dkImg: null, | |||||
| surveyStatus: null, | |||||
| importCode: null, | |||||
| deptName: null, | |||||
| }, | |||||
| // 表单参数 | |||||
| form: {}, | |||||
| // 表单校验 | |||||
| rules: { | |||||
| dkmc: [ | |||||
| { required: true, message: "地块名称不能为空", trigger: "blur" } | |||||
| ], | |||||
| surveyStatus: [ | |||||
| { required: true, message: "调查状态 字典 survey_status不能为空", trigger: "change" } | |||||
| ], | |||||
| importCode: [ | |||||
| { required: true, message: "部门级联代码不能为空", trigger: "blur" } | |||||
| ], | |||||
| createBy: [ | |||||
| { required: true, message: "创建者不能为空", trigger: "blur" } | |||||
| ], | |||||
| createTime: [ | |||||
| { required: true, message: "创建时间不能为空", trigger: "blur" } | |||||
| ], | |||||
| }, | |||||
| // EXCEL导入 | |||||
| upload: { | |||||
| // 是否显示弹出层（用户导入） | |||||
| open: false, | |||||
| // 弹出层标题（用户导入） | |||||
| title: "", | |||||
| // 是否禁用上传 | |||||
| isUploading: false, | |||||
| // 是否更新已经存在的用户数据 | |||||
| updateSupport: 0, | |||||
| // 设置上传的请求头部 | |||||
| headers: { Authorization: "Bearer " + getToken() }, | |||||
| // 上传的地址 | |||||
| url: process.env.VUE_APP_BASE_API + "/business/resourceOperation/importData" | |||||
| }, | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| this.getList() | |||||
| }, | |||||
| methods: { | |||||
| /** 查询地块经营列表 */ | |||||
| getList() { | |||||
| this.loading = true | |||||
| listResourceOperation(this.queryParams).then(response => { | |||||
| this.resourceOperationList = response.rows | |||||
| this.total = response.total | |||||
| this.loading = false | |||||
| }) | |||||
| }, | |||||
| // 取消按钮 | |||||
| cancel() { | |||||
| this.open = false | |||||
| this.reset() | |||||
| }, | |||||
| cancelDetail() { | |||||
| this.viewOpen = false | |||||
| }, | |||||
| // 表单重置 | |||||
| reset() { | |||||
| this.form = { | |||||
| id: null, | |||||
| dkbm: null, | |||||
| dkmc: null, | |||||
| dkdz: null, | |||||
| dkxz: null, | |||||
| dknz: null, | |||||
| dkbz: null, | |||||
| jymj: null, | |||||
| jyfs: null, | |||||
| jydxmc: null, | |||||
| jykssj: null, | |||||
| jyjssj: null, | |||||
| cbje: null, | |||||
| bz: null, | |||||
| dkImg: null, | |||||
| surveyStatus: null, | |||||
| importCode: null, | |||||
| deptName: null, | |||||
| createBy: null, | |||||
| createTime: null, | |||||
| updateBy: null, | |||||
| updateTime: null | |||||
| } | |||||
| this.resetForm("form") | |||||
| }, | |||||
| /** 搜索按钮操作 */ | |||||
| handleQuery() { | |||||
| this.queryParams.pageNum = 1 | |||||
| this.getList() | |||||
| }, | |||||
| /** 重置按钮操作 */ | |||||
| resetQuery() { | |||||
| this.resetForm("queryForm") | |||||
| this.handleQuery() | |||||
| }, | |||||
| // 多选框选中数据 | |||||
| handleSelectionChange(selection) { | |||||
| this.ids = selection.map(item => item.id) | |||||
| this.single = selection.length!==1 | |||||
| this.multiple = !selection.length | |||||
| }, | |||||
| /** 新增按钮操作 */ | |||||
| handleAdd() { | |||||
| this.reset() | |||||
| this.open = true | |||||
| this.title = "添加地块经营" | |||||
| }, | |||||
| /** 修改按钮操作 */ | |||||
| handleUpdate(row) { | |||||
| this.reset() | |||||
| const id = row.id || this.ids | |||||
| getResourceOperation(id).then(response => { | |||||
| this.form = response.data | |||||
| this.open = true | |||||
| this.title = "修改地块经营" | |||||
| }) | |||||
| }, | |||||
| /** 查看按钮操作 */ | |||||
| handleLook(row) { | |||||
| const id = row.id || this.ids | |||||
| getResourceOperationDetail(id).then(response => { | |||||
| this.form = response.data; | |||||
| this.viewOpen = true; | |||||
| this.title = "查看地块经营"; | |||||
| }); | |||||
| }, | |||||
| /** 提交按钮 */ | |||||
| submitForm() { | |||||
| this.$refs["form"].validate(valid => { | |||||
| if (valid) { | |||||
| if (this.form.id != null) { | |||||
| updateResourceOperation(this.form).then(response => { | |||||
| this.$modal.msgSuccess("修改成功") | |||||
| this.open = false | |||||
| this.getList() | |||||
| }) | |||||
| } else { | |||||
| addResourceOperation(this.form).then(response => { | |||||
| this.$modal.msgSuccess("新增成功") | |||||
| this.open = false | |||||
| this.getList() | |||||
| }) | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| /** 删除按钮操作 */ | |||||
| handleDelete(row) { | |||||
| const ids = row.id || this.ids | |||||
| this.$modal.confirm('是否确认删除地块经营编号为"' + ids + '"的数据项？').then(function() { | |||||
| return delResourceOperation(ids) | |||||
| }).then(() => { | |||||
| this.getList() | |||||
| this.$modal.msgSuccess("删除成功") | |||||
| }).catch(() => {}) | |||||
| }, | |||||
| /** 导出按钮操作 */ | |||||
| handleExport() { | |||||
| this.download('business/resourceOperation/export', { | |||||
| ...this.queryParams | |||||
| }, `地块经营_${new Date().getTime()}.xlsx`) | |||||
| }, | |||||
| /** 打印表单 */ | |||||
| doPrint() { | |||||
| const originalTitle = document.title; | |||||
| try { | |||||
| document.title = this.title || '打印详情'; | |||||
| const printElement = document.getElementById('printDetail'); | |||||
| const printFrame = document.createElement('iframe'); | |||||
| printFrame.style.position = 'absolute'; | |||||
| printFrame.style.width = '0'; | |||||
| printFrame.style.height = '0'; | |||||
| printFrame.style.border = 'none'; | |||||
| printFrame.style.left = '-9999px'; | |||||
| printFrame.onload = function() { | |||||
| try { | |||||
| const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document; | |||||
| const contentClone = printElement.cloneNode(true); | |||||
| const style = document.createElement('style'); | |||||
| style.innerHTML = ` | |||||
| @page { | |||||
| size: auto; | |||||
| margin: 10mm; | |||||
| } | |||||
| body { | |||||
| font-family: Arial, sans-serif; | |||||
| line-height: 1.5; | |||||
| margin: 0; | |||||
| padding: 0; | |||||
| } | |||||
| .el-descriptions { | |||||
| width: 100% !important; | |||||
| } | |||||
| .el-descriptions-item__label { | |||||
| width: ${this.descLabelWidth}% !important; | |||||
| } | |||||
| .el-descriptions-item__content { | |||||
| width: ${(100 / this.descColumn) - this.descLabelWidth}% !important; | |||||
| } | |||||
| /* 确保图片在打印时显示完整 */ | |||||
| img, .el-image { | |||||
| max-width: 100% !important; | |||||
| height: auto !important; | |||||
| } | |||||
| `; | |||||
| frameDoc.head.appendChild(style); | |||||
| frameDoc.body.appendChild(contentClone); | |||||
| setTimeout(() => { | |||||
| printFrame.contentWindow.focus(); | |||||
| printFrame.contentWindow.print(); | |||||
| setTimeout(() => { | |||||
| document.body.removeChild(printFrame); | |||||
| document.title = originalTitle; | |||||
| }, 1000); | |||||
| }, 500); | |||||
| } catch (e) { | |||||
| document.body.removeChild(printFrame); | |||||
| document.title = originalTitle; | |||||
| this.$message.error('打印过程中发生错误'); | |||||
| } | |||||
| }; | |||||
| document.body.appendChild(printFrame); | |||||
| } catch (e) { | |||||
| document.title = originalTitle; | |||||
| this.$message.error('打印过程中发生错误'); | |||||
| } | |||||
| }, | |||||
| /** 打印按钮操作 */ | |||||
| handlePrint() { | |||||
| printResourceOperation(this.queryParams).then(response => {}) | |||||
| }, | |||||
| /* 导入EXCEL组件 */ | |||||
| handleImport() { | |||||
| this.upload.title = "地块经营导入" | |||||
| this.upload.open = true | |||||
| }, | |||||
| /** 下载模板操作 */ | |||||
| importTemplate() { | |||||
| this.download('business/resourceOperation/importTemplate', { | |||||
| }, `地块经营_template.xlsx`) | |||||
| }, | |||||
| // 文件上传中处理 | |||||
| handleFileUploadProgress(event, file, fileList) { | |||||
| this.upload.isUploading = true | |||||
| }, | |||||
| // 文件上传成功处理 | |||||
| handleFileSuccess(response, file, fileList) { | |||||
| this.upload.open = false | |||||
| this.upload.isUploading = false | |||||
| this.$refs.upload.clearFiles() | |||||
| this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) | |||||
| this.getList() | |||||
| }, | |||||
| // 提交上传文件 | |||||
| submitFileForm() { | |||||
| this.$refs.upload.submit() | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||