zhangzl
/
rongxin.dashboard
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

TASK 45751 地块属性和地块经营

master
yangfuda 3 miesięcy temu
rodzic
16cacc80c1
commit
57f932ee38
9 zmienionych plików z 2521 dodań i 0 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +1
    -0
      package.json
  2. +9
    -0
      rongxin.dashboard.iml
  3. +62
    -0
      src/api/business/resourceLand.js
  4. +62
    -0
      src/api/business/resourceOperation.js
  5. BIN
      src/assets/images/dataScreen/plotPremises/mark.png
  6. +286
    -0
      src/components/house/MapField.vue
  7. +727
    -0
      src/utils/ol_map.js
  8. +810
    -0
      src/views/business/resourceLand/index.vue
  9. +564
    -0
      src/views/business/resourceOperation/index.vue

+ 1
- 0
package.json Wyświetl plik

@@ -33,6 +33,7 @@
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"jquery": "^3.7.1",
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",


+ 9
- 0
rongxin.dashboard.iml Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

Przed Po
Szerokość: 19  |  Wysokość: 31  |  Rozmiar: 1.7 KiB

+ 286
- 0
src/components/house/MapField.vue Wyświetl plik

@@ -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="画图"/>&nbsp;&nbsp;
<input :id="'drawRemove' + elementId" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp;
<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="标记"/>&nbsp;&nbsp;
<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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -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 Wyświetl plik

@@ -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>

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz