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方法封装处理
* Copyright (c) 2019 ruoyi
@ -7,147 +5,149 @@
// 日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
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 (arguments.length === 0 || !time) {
return null
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
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)) {
time = time * 1000
}
date = new Date(time)
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
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
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
return value || 0
})
return time_str
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
})
return time_str
}
// 表单重置
export function resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
}
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
} else {
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search;
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
} else {
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search;
}
// 回显数据字典
export function selectDictLabel(datas, value) {
if (value === undefined) {
return "";
}
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label);
return true;
if (value === undefined) {
return "";
}
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label);
return true;
}
})
if (actions.length === 0) {
actions.push(value);
}
})
if (actions.length === 0) {
actions.push(value);
}
return actions.join('');
return actions.join('');
}
// 回显数据字典（字符串数组）
export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) {
return "";
}
if (Array.isArray(value)) {
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);
if (value === undefined || value.length === 0) {
return "";
}
})
return actions.join('').substring(0, actions.join('').length - 1);
if (Array.isArray(value)) {
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);
}
})
return actions.join('').substring(0, actions.join('').length - 1);
}
// 字符串格式化(%s )
export function sprintf(str) {
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
}
// 转换字符串，undefined,null等转化为""
export function parseStrEmpty(str) {
if (!str || str == "undefined" || str == "null") {
return "";
}
return str;
if (!str || str == "undefined" || str == "null") {
return "";
}
return str;
}
// 数据合并
export function mergeRecursive(source, target) {
for (var p in target) {
try {
if (target[p].constructor == Object) {
source[p] = mergeRecursive(source[p], target[p]);
} else {
source[p] = target[p];
}
} catch (e) {
source[p] = target[p];
for (var p in target) {
try {
if (target[p].constructor == Object) {
source[p] = mergeRecursive(source[p], target[p]);
} else {
source[p] = target[p];
}
} catch (e) {
source[p] = target[p];
}
}
}
return source;
return source;
};
/**
@ -158,102 +158,105 @@ export function mergeRecursive(source, target) {
* @param {*} children 孩子节点字段 默认 'children'
*/
export function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
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) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
for (let t of tree) {
adaptToChildrenList(t);
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
function adaptToChildrenList(o) {
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) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
return result
return result
}
// 返回项目路径
export function getNormalPath(p) {
if (p.length === 0 || !p || p == 'undefined') {
return p
};
let res = p.replace('//', '/')
if (res[res.length - 1] === '/') {
return res.slice(0, res.length - 1)
}
return res;
if (p.length === 0 || !p || p == 'undefined') {
return p
}
;
let res = p.replace('//', '/')
if (res[res.length - 1] === '/') {
return res.slice(0, res.length - 1)
}
return res;
}
// 验证是否为blob格式
export function blobValidate(data) {
return data.type !== 'application/json'
return data.type !== 'application/json'
}
/**
* 转换字体颜色
*
* @param {array} rgbArr rgb数组
*/
export function resBgColor(rgbArr) {
// 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#000000
// 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff
var color = 0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
return color ? '#000000' : '#ffffff'
// 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#000000
// 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff
var color = 0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
return color ? '#000000' : '#ffffff'
}
/**
@ -268,34 +271,54 @@ export function resBgColor(rgbArr) {
* @param colorValue
*/
export function findTextColor(colorValue) {
// #123456或者rgb(12,34,56)转为rgb数组[12,34,56]
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var that = colorValue;
if (/^(rgb|RGB)/.test(that)) {
// 处理rgb转为数组
var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
return resBgColor(aColor);
} else if (reg.test(that)) {
// 处理十六进制色值
var sColor = colorValue.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
// #123456或者rgb(12,34,56)转为rgb数组[12,34,56]
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var that = colorValue;
if (/^(rgb|RGB)/.test(that)) {
// 处理rgb转为数组
var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
return resBgColor(aColor);
} else if (reg.test(that)) {
// 处理十六进制色值
var sColor = colorValue.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; 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 {
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-radius: 5px;
padding: 5px 10px;
//鼠标悬浮变成点击
cursor: pointer;
}
</style>

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

@ -1,14 +1,64 @@
<!--基地点坐标-->
<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 {areaConversion} from "@/utils/ruoyi.js";
import {ElMessageBox} from "element-plus";
const polygonRef = ref(null)
const router = useRouter()
const route = useRoute();
// 绘制面积(亩)
const floorSpace = ref(0)
const maxHeight = ref(window.innerHeight - 100);
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([
116.338461,
39.97947
@ -17,6 +67,22 @@ const center = ref([
const selectPoi = ({poi}) => {
center.value = poi.location.toArray()
}
const resetMassif = () => {
ElMessageBox.confirm(
'重置后本次绘制内容将会被清空,是否确认重置?重置后可重新绘制',
'重置地块',
{
confirmButtonText: '不，我再想想',
cancelButtonText: '确认重置',
customClass:'message-box'
}
)
.then(() => {
addMassif()
})
.catch(() => {
})
}
</script>
<template>
@ -26,45 +92,96 @@ const selectPoi = ({poi}) => {
:zoom="zoom"
>
<!--卫星云图-->
<el-amap-layer-satellite :visible="true" />
<el-amap-layer-satellite :visible="true"/>
<!--定位控件-->
<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
:visible="false"
:debounce="1000"
@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">
<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>
</el-amap>
</div>
</template>
<style scoped lang="scss">
.top-block{
.top-block {
position: absolute;
top: 0;
width: 100%;
height: 100%;
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
.operate{
pointer-events: none; //值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
.operate {
//该控件可以点击
pointer-events: all;
}
}
.local-icon{
.local-icon {
width: 30px;
height: 30px;
}
:deep(.amap-marker-label){
:deep(.amap-marker-label) {
border: none;
border-radius: 5px;
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>
Write Preview
Loading…
Cancel
Save