JiaSu
/
sugarbreed-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地块绘制组件

Browse Source
master
贾肃 5 months ago
parent 2464fbc9de
commit f5a4eae842
3 changed files with 357 additions and 215 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 427
      src/utils/ruoyi.js
  2. 2
      src/views/system/base/mapMarkers.vue
  3. 143
      src/views/system/base/massifMap.vue

427
src/utils/ruoyi.js
Unescape View File

@ -1,5 +1,3 @@
/** /**
* 通用js方法封装处理 * 通用js方法封装处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
@ -7,147 +5,149 @@
// 日期格式化 // 日期格式化
export function parseTime(time, pattern) { export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) { if (arguments.length === 0 || !time) {
return null return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
} }
if ((typeof time === 'number') && (time.toString().length === 10)) { const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
time = time * 1000 let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
} }
date = new Date(time) const formatObj = {
} y: date.getFullYear(),
const formatObj = { m: date.getMonth() + 1,
y: date.getFullYear(), d: date.getDate(),
m: date.getMonth() + 1, h: date.getHours(),
d: date.getDate(), i: date.getMinutes(),
h: date.getHours(), s: date.getSeconds(),
i: date.getMinutes(), a: date.getDay()
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
if (result.length > 0 && value < 10) {
value = '0' + value
} }
return value || 0 const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
}) let value = formatObj[key]
return time_str // Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
} }
// 表单重置 // 表单重置
export function resetForm(refName) { export function resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
} }
// 添加日期范围 // 添加日期范围
export function addDateRange(params, dateRange, propName) { export function addDateRange(params, dateRange, propName) {
let search = params; let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}; search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
dateRange = Array.isArray(dateRange) ? dateRange : []; dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') { if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0]; search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1]; search.params['endTime'] = dateRange[1];
} else { } else {
search.params['begin' + propName] = dateRange[0]; search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1]; search.params['end' + propName] = dateRange[1];
} }
return search; return search;
} }
// 回显数据字典 // 回显数据字典
export function selectDictLabel(datas, value) { export function selectDictLabel(datas, value) {
if (value === undefined) { if (value === undefined) {
return ""; return "";
} }
var actions = []; var actions = [];
Object.keys(datas).some((key) => { Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) { if (datas[key].value == ('' + value)) {
actions.push(datas[key].label); actions.push(datas[key].label);
return true; return true;
}
})
if (actions.length === 0) {
actions.push(value);
} }
}) return actions.join('');
if (actions.length === 0) {
actions.push(value);
}
return actions.join('');
} }
// 回显数据字典（字符串数组） // 回显数据字典（字符串数组）
export function selectDictLabels(datas, value, separator) { export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) { if (value === undefined || value.length === 0) {
return ""; return "";
} }
if (Array.isArray(value)) { if (Array.isArray(value)) {
value = value.join(","); value = value.join(",");
}
var actions = [];
var currentSeparator = undefined === separator ? "," : separator;
var temp = value.split(currentSeparator);
Object.keys(value.split(currentSeparator)).some((val) => {
var match = false;
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + temp[val])) {
actions.push(datas[key].label + currentSeparator);
match = true;
}
})
if (!match) {
actions.push(temp[val] + currentSeparator);
} }
}) var actions = [];
return actions.join('').substring(0, actions.join('').length - 1); var currentSeparator = undefined === separator ? "," : separator;
var temp = value.split(currentSeparator);
Object.keys(value.split(currentSeparator)).some((val) => {
var match = false;
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + temp[val])) {
actions.push(datas[key].label + currentSeparator);
match = true;
}
})
if (!match) {
actions.push(temp[val] + currentSeparator);
}
})
return actions.join('').substring(0, actions.join('').length - 1);
} }
// 字符串格式化(%s ) // 字符串格式化(%s )
export function sprintf(str) { export function sprintf(str) {
var args = arguments, flag = true, i = 1; var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () { str = str.replace(/%s/g, function () {
var arg = args[i++]; var arg = args[i++];
if (typeof arg === 'undefined') { if (typeof arg === 'undefined') {
flag = false; flag = false;
return ''; return '';
} }
return arg; return arg;
}); });
return flag ? str : ''; return flag ? str : '';
} }
// 转换字符串，undefined,null等转化为"" // 转换字符串，undefined,null等转化为""
export function parseStrEmpty(str) { export function parseStrEmpty(str) {
if (!str || str == "undefined" || str == "null") { if (!str || str == "undefined" || str == "null") {
return ""; return "";
} }
return str; return str;
} }
// 数据合并 // 数据合并
export function mergeRecursive(source, target) { export function mergeRecursive(source, target) {
for (var p in target) { for (var p in target) {
try { try {
if (target[p].constructor == Object) { if (target[p].constructor == Object) {
source[p] = mergeRecursive(source[p], target[p]); source[p] = mergeRecursive(source[p], target[p]);
} else { } else {
source[p] = target[p]; source[p] = target[p];
} }
} catch (e) { } catch (e) {
source[p] = target[p]; source[p] = target[p];
}
} }
} return source;
return source;
}; };
/** /**
@ -158,102 +158,105 @@ export function mergeRecursive(source, target) {
* @param {*} children 孩子节点字段 默认 'children' * @param {*} children 孩子节点字段 默认 'children'
*/ */
export function handleTree(data, id, parentId, children) { export function handleTree(data, id, parentId, children) {
let config = { let config = {
id: id || 'id', id: id || 'id',
parentId: parentId || 'parentId', parentId: parentId || 'parentId',
childrenList: children || 'children' childrenList: children || 'children'
}; };
var childrenListMap = {}; var childrenListMap = {};
var nodeIds = {}; var nodeIds = {};
var tree = []; var tree = [];
for (let d of data) { for (let d of data) {
let parentId = d[config.parentId]; let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) { if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = []; childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
} }
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) { for (let d of data) {
let parentId = d[config.parentId]; let parentId = d[config.parentId];
if (nodeIds[parentId] == null) { if (nodeIds[parentId] == null) {
tree.push(d); tree.push(d);
}
} }
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) { for (let t of tree) {
if (childrenListMap[o[config.id]] !== null) { adaptToChildrenList(t);
o[config.childrenList] = childrenListMap[o[config.id]];
} }
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) { function adaptToChildrenList(o) {
adaptToChildrenList(c); if (childrenListMap[o[config.id]] !== null) {
} o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
} }
}
return tree; return tree;
} }
/** /**
* 参数处理 * 参数处理
* @param {*} params 参数 * @param {*} params 参数
*/ */
export function tansParams(params) { export function tansParams(params) {
let result = '' let result = ''
for (const propName of Object.keys(params)) { for (const propName of Object.keys(params)) {
const value = params[propName]; const value = params[propName];
var part = encodeURIComponent(propName) + "="; var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") { if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') { if (typeof value === 'object') {
for (const key of Object.keys(value)) { for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') { if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']'; let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "="; var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&"; result += subPart + encodeURIComponent(value[key]) + "&";
} }
}
} else {
result += part + encodeURIComponent(value) + "&";
}
} }
} else {
result += part + encodeURIComponent(value) + "&";
}
} }
} return result
return result
} }
// 返回项目路径 // 返回项目路径
export function getNormalPath(p) { export function getNormalPath(p) {
if (p.length === 0 || !p || p == 'undefined') { if (p.length === 0 || !p || p == 'undefined') {
return p return p
}; }
let res = p.replace('//', '/') ;
if (res[res.length - 1] === '/') { let res = p.replace('//', '/')
return res.slice(0, res.length - 1) if (res[res.length - 1] === '/') {
} return res.slice(0, res.length - 1)
return res; }
return res;
} }
// 验证是否为blob格式 // 验证是否为blob格式
export function blobValidate(data) { export function blobValidate(data) {
return data.type !== 'application/json' return data.type !== 'application/json'
} }
/** /**
* 转换字体颜色 * 转换字体颜色
* *
* @param {array} rgbArr rgb数组 * @param {array} rgbArr rgb数组
*/ */
export function resBgColor(rgbArr) { export function resBgColor(rgbArr) {
// 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#000000 // 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#000000
// 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff // 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff
var color = 0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2; var color = 0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
return color ? '#000000' : '#ffffff' return color ? '#000000' : '#ffffff'
} }
/** /**
@ -268,34 +271,54 @@ export function resBgColor(rgbArr) {
* @param colorValue * @param colorValue
*/ */
export function findTextColor(colorValue) { export function findTextColor(colorValue) {
// #123456或者rgb(12,34,56)转为rgb数组[12,34,56] // #123456或者rgb(12,34,56)转为rgb数组[12,34,56]
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var that = colorValue; var that = colorValue;
if (/^(rgb|RGB)/.test(that)) { if (/^(rgb|RGB)/.test(that)) {
// 处理rgb转为数组 // 处理rgb转为数组
var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
return resBgColor(aColor); return resBgColor(aColor);
} else if (reg.test(that)) { } else if (reg.test(that)) {
// 处理十六进制色值 // 处理十六进制色值
var sColor = colorValue.toLowerCase(); var sColor = colorValue.toLowerCase();
if (sColor && reg.test(sColor)) { if (sColor && reg.test(sColor)) {
if (sColor.length === 4) { if (sColor.length === 4) {
var sColorNew = "#"; var sColorNew = "#";
for (var i = 1; i < 4; i += 1) { for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)); sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return resBgColor(sColorChange);
} else {
return false;
} }
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return resBgColor(sColorChange);
} else { } else {
return false; return false;
} }
} else { }
return false;
} /**
* 面积转换
* @param value 单位面积
* @param from 从那个单位
* @param arrive 转换到那个单位
* @returns {number}
*/
export function areaConversion(value, from = '平方米', arrive = '亩') {
//10000平米 = 15亩 = 1公顷
var fRate = {//换算率
'公顷': {'亩': 15, '平方米': 10000},
'亩': {'平方米': 10000 / 15, '公顷': 1 / 15},
'平方米': {'亩': 15 / 10000, '公顷': 1 / 10000}
};
var v = parseFloat(value);//得到原来的值
//执行换算，注意fRate的取值，得到上一次的单位节点，再取当前单位的换算率
var rst = (v * fRate[from][arrive]).toFixed(4);//保留4位小数
return parseFloat(rst)
} }

2
src/views/system/base/mapMarkers.vue
Unescape View File

@ -108,5 +108,7 @@ const selectPoi = ({poi}) => {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
//鼠标悬浮变成点击
cursor: pointer;
} }
</style> </style>

143
src/views/system/base/massifMap.vue
Unescape View File

@ -1,14 +1,64 @@
<!--基地点坐标--> <!--基地点坐标-->
<script setup> <script setup>
import {ElAmap, useGeolocation ,lazyAMapApiLoaderInstance} from "@vuemap/vue-amap"; import {ElAmap, useGeolocation, lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
import BaseRightControl from "@/views/system/base/baseRightControl.vue"; import BaseRightControl from "@/views/system/base/baseRightControl.vue";
import {areaConversion} from "@/utils/ruoyi.js";
import {ElMessageBox} from "element-plus";
const polygonRef = ref(null)
const router = useRouter() const router = useRouter()
const route = useRoute(); const route = useRoute();
// 绘制面积(亩)
const floorSpace = ref(0)
const maxHeight = ref(window.innerHeight - 100); const maxHeight = ref(window.innerHeight - 100);
const zoom = ref(13); const zoom = ref(13);
onMounted(()=>{ // 是否出于绘制模式
console.log(route.params); const protract = ref(false)
}) // 显示鼠标绘制
const createdMouse = ref(false)
// 基地id
const baseId = Number(route.params.baseId)
// 地块列表
const polygonList = reactive([])
const polygonTemp = ref(null)
// 鼠标绘制地块完成
const draw = (value) => {
// polygonList.push({
// edit: false,
// path: value
// })
polygonTemp.value = value
computeArea(value)
createdMouse.value = false
}
const computeArea = (value) => {
lazyAMapApiLoaderInstance.then(() => {
// 算出平米
let number = Math.round(AMap.GeometryUtil.ringArea(value));
// 算出亩
floorSpace.value = areaConversion(number)
})
}
// 修改多边形事件
const updateMassif = (value) => {
// 获取多边形路径
let newPath = polygonRef.value.$$getInstance().getPath().map(item =>item.toArray())
polygonTemp.value = newPath
computeArea(newPath)
}
// 点击新增地块
const addMassif = () => {
createdMouse.value = true
polygonTemp.value = undefined
protract.value = true
floorSpace.value = 0
}
// 取消绘制地块
const cancelMassif = () => {
polygonTemp.value = undefined
protract.value = false
createdMouse.value = false
}
// 当前中心点
const center = ref([ const center = ref([
116.338461, 116.338461,
39.97947 39.97947
@ -17,6 +67,22 @@ const center = ref([
const selectPoi = ({poi}) => { const selectPoi = ({poi}) => {
center.value = poi.location.toArray() center.value = poi.location.toArray()
} }
const resetMassif = () => {
ElMessageBox.confirm(
'重置后本次绘制内容将会被清空,是否确认重置?重置后可重新绘制',
'重置地块',
{
confirmButtonText: '不，我再想想',
cancelButtonText: '确认重置',
customClass:'message-box'
}
)
.then(() => {
addMassif()
})
.catch(() => {
})
}
</script> </script>
<template> <template>
@ -26,45 +92,96 @@ const selectPoi = ({poi}) => {
:zoom="zoom" :zoom="zoom"
> >
<!--卫星云图--> <!--卫星云图-->
<el-amap-layer-satellite :visible="true" /> <el-amap-layer-satellite :visible="true"/>
<!--定位控件--> <!--定位控件-->
<el-amap-control-geolocation :visible="false"/> <el-amap-control-geolocation :visible="false"/>
<!--地图缩放控件--> <!--地图缩放控件-->
<el-amap-control-tool-bar :visible="true" /> <el-amap-control-tool-bar :visible="true"/>
<!--比例尺--> <!--比例尺-->
<el-amap-control-scale :visible="true" /> <el-amap-control-scale :visible="true"/>
<!--搜索控件--> <!--搜索控件-->
<el-amap-search-box <el-amap-search-box
:visible="false" :visible="false"
:debounce="1000" :debounce="1000"
@select="selectPoi" @select="selectPoi"
/> />
<!--鼠标工具-->
<el-amap-mouse-tool
v-if="createdMouse"
type="polyline"
:auto-clear="true"
@draw="draw"
/>
<!--多边形-->
<el-amap-polygon
v-for="(polygon, index) in polygonList"
:path="polygon.path"
:visible="true"
:editable="polygon.edit"
/>
<!--多边形-->
<el-amap-polygon
ref="polygonRef"
v-if="!!polygonTemp"
:path="polygonTemp"
@addnode="updateMassif"
@removenode="updateMassif"
@adjust="updateMassif"
:visible="true"
:editable="true"
/>
<div class="top-block"> <div class="top-block">
<base-right-control /> <el-button v-if="!protract" class="operate" @click="addMassif">添加地块</el-button>
<base-right-control v-if="!protract"/>
<!--绘制操作区-->
<div v-if="protract" class="protract-control operate">
<el-button type="primary" :disabled="createdMouse">确认({{ floorSpace }}亩)</el-button>
<el-button @click="resetMassif" :disabled="createdMouse">重置</el-button>
<el-button @click="cancelMassif">取消</el-button>
</div>
</div> </div>
</el-amap> </el-amap>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.top-block{ .top-block {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。 pointer-events: none; //值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
.operate{ .operate {
//该控件可以点击 //该控件可以点击
pointer-events: all; pointer-events: all;
} }
} }
.local-icon{
.local-icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
:deep(.amap-marker-label){
:deep(.amap-marker-label) {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
} }
.protract-control {
position: absolute;
right: 20px;
top: 10px;
}
</style>
<style lang="scss">
.message-box{
--el-messagebox-width: 450px;
padding: 20px;
.el-message-box__btns{
justify-content: center;
}
.el-button{
border-radius: 20px;
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save