1***@qq.com
1***@qq.com
  • 发布:2024-07-24 08:37
  • 更新:2025-03-06 08:40
  • 阅读:210

经纬度圆形围栏校验

分类:uni-app

shortcuts: [{
text: '最近90天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 1000 24 * 90); // 设置开始时间为90天前的时间点
picker.$emit('pick', [start, end]);
}
}]
disabledDate(time) {
// 如果 value 中没有开始日期,则不限制结束日期
if (!this.value[0]) return false;
// 计算90天后的日期
const maxDate = new Date(this.value[0]);
maxDate.setDate(maxDate.getDate() + 90);
// 禁用超过90天的日期
return time.getTime() > maxDate.getTime();
}
linear-gradient(to left, #196aa8, #196aa8) left top no-repeat,
linear-gradient(to bottom, #196aa8, #196aa8) left top no-repeat,
linear-gradient(to left, #196aa8, #196aa8) right top no-repeat,
linear-gradient(to bottom, #196aa8, #196aa8) right top no-repeat,
linear-gradient(to left, #196aa8, #196aa8) left bottom no-repeat,
linear-gradient(to bottom, #196aa8, #196aa8) left bottom no-repeat,
linear-gradient(to left, #196aa8, #196AA8) right bottom no-repeat,
linear-gradient(to left, #196aa8, #196aa8) right bottom no-repeat;
background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;

graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
text: '中心文字',
fontSize: 20, // 文字大小
fill: '#333' // 文字颜色
}
}

getColumnWidth(prop) {
let maxWidth = 0;
this.tableData.forEach(row => {
const cellContent = row[prop] ? row[prop].toString() : '';
const span = document.createElement('span');
span.style.visibility = 'hidden';
span.style.position = 'absolute';
span.style.whiteSpace = 'nowrap';
span.style.fontSize = '14px'; // 根据你的字体大小设置
span.innerText = cellContent;
document.body.appendChild(span);
const width = span.offsetWidth;
document.body.removeChild(span);
maxWidth = Math.max(maxWidth, width);
});
return ${maxWidth + 20}px; // 额外增加一些宽度以应对padding等
},

@keyframes moveBackground {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0; / 或者根据需要调整为 0 100% 实现垂直移动 /
}
}

.background-animation {
background-image: url('your-image.jpg');
background-repeat: repeat-x; / 或者 repeat-y,取决于你的需求 /
animation: moveBackground 5s linear infinite;
}

option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};

<el-popover
placement="right"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="日期"></el-table-column>
<el-table-column width="100" property="name" label="姓名"></el-table-column>
<el-table-column width="300" property="address" label="地址"></el-table-column>
</el-table>
<el-button slot="reference">click 激活</el-button>
</el-popover>

// 计算点到圆心的距离的函数
function distance(lat1, lng1, lat2, lng2) {
const radius = 6378137.0; // 地球半径
const rad = Math.PI / 180.0;
const lat1rad = lat1 rad;
const lat2rad = lat2
rad;
const a = Math.sin(lat1rad) Math.sin(lat2rad) + Math.cos(lat1rad) Math.cos(lat2rad) Math.cos((lng2 - lng1) rad);
return radius * Math.acos(a);
}

// 检查点是否在圆内的函数
function isPointInCircle(lat, lng, circleLat, circleLng, radius) {
const d = distance(lat, lng, circleLat, circleLng);
return d <= radius;
}

// 使用示例
const pointLat = 39.9903; // 点的纬度
const pointLng = 116.4814; // 点的经度
const circleLat = 39.9109; // 圆心的纬度
const circleLng = 116.4119; // 圆心的经度
const radius = 1000; // 圆的半径,单位为米

const isInside = isPointInCircle(pointLat, pointLng, circleLat, circleLng, radius);
console.log(isInside ? '点在圆内' : '点在圆外');

<dv-scroll-board :config="config" style="width:500px;height:220px" /> headerBGC oddRowBGC evenRowBGC waitTime rowNum

时间禁用
timeRange: '', // 绑定值
pickerOptions: {
// 时间跨度限制为2天
onPick: time => {
if (time.minDate && !time.maxDate) {
// 当选择开始日期时,‌设置结束日期的最小值为开始日期
this.timeRange = time.minDate;
} else if (time.maxDate) {
// 当选择结束日期时,‌清除开始日期的值
this.timeRange = '';
}
},
disabledDate: time => {
const today = new Date(); // 当前日期
if (this.timeRange) {
// 如果设置了开始日期,‌则禁止选择今天的日期之前的日期作为结束日期
return time.getTime() < today.getTime();
} else {
// 如果没有设置开始日期,‌则允许选择任何日期(‌这里可以根据需求自定义)‌
return false;
}
}
}

@@@@ <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" on-preview="handlePictureCardPreview" on-remove="handleRemove"> <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
0 关注 分享

要回复文章请先登录注册

1***@qq.com

1***@qq.com (作者)

回复 1***@qq.com :
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
2025-03-06 08:40
1***@qq.com

1***@qq.com (作者)

{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
padAngle: 10,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
2025-03-06 08:15