xiaosi
7 months ago
93 changed files with 28934 additions and 261 deletions
@ -1,4 +1,4 @@ |
|||||
APP_TITLE=云端无人机管理系统 |
APP_TITLE=云端无人机管理系统 |
||||
APP_ICON_URL=//at.alicdn.com/t/c/font_4349903_2p0gyrtbo2.js |
|
||||
|
APP_ICON_URL=//at.alicdn.com/t/c/font_4349903_nbo0vtlaa9d.js |
||||
APP_DEVELOPMENT_BASE_URL=/api |
APP_DEVELOPMENT_BASE_URL=/api |
||||
APP_PRODUCTION_BASE_URL=/ |
|
||||
|
APP_PRODUCTION_BASE_URL=http://sgcloud-test.jiagutech.com/api |
||||
|
|||||
File diff suppressed because it is too large
@ -0,0 +1,38 @@ |
|||||
|
/** |
||||
|
* 飞机图标 |
||||
|
*/ |
||||
|
|
||||
|
class DroneIcon { |
||||
|
constructor(colorOption) { |
||||
|
const { |
||||
|
outlineColor = 'rgba(255, 255, 255, 1)', |
||||
|
bodyColor = 'rgba(255, 255, 255, 0.3)', |
||||
|
directionColor = 'rgba(255, 255, 255, 1)', |
||||
|
} = colorOption || {}; |
||||
|
|
||||
|
this.width = 128; |
||||
|
this.height = 128; |
||||
|
const canvas = document.createElement('canvas'); |
||||
|
canvas.width = this.width; |
||||
|
canvas.height = this.height; |
||||
|
const context = canvas.getContext('2d'); |
||||
|
|
||||
|
/* eslint-disable max-len */ |
||||
|
const outlinePath = new Path2D(); |
||||
|
outlinePath.addPath(new Path2D('M100.3,94.6c-0.6-0.9-1.1-1.7-1.8-2.5c-0.3-0.4-0.6-0.8-0.9-1.2s-0.6-0.8-1-1.1c-1.3-1.5-2.7-3-4.1-4.3 c-0.7-0.7-1.4-1.4-2.1-2l-2.2-2l-4.3-4.1L82.4,76V52l1.4-1.3l4.3-4.1l2.2-2c0.7-0.7,1.4-1.3,2.2-2c1.4-1.5,2.8-2.9,4.1-4.4 c0.3-0.4,0.7-0.8,1-1.2s0.6-0.8,0.9-1.2c0.6-0.8,1.2-1.6,1.8-2.5c0.5-0.8,0.3-1.9-0.5-2.4c-0.5-0.3-1.1-0.3-1.7-0.1 c-0.9,0.5-1.8,1-2.7,1.5c-0.4,0.3-0.8,0.5-1.3,0.8s-0.8,0.6-1.2,0.8c-1.6,1.1-3.2,2.3-4.7,3.6c-0.8,0.6-1.5,1.3-2.3,1.9l-2.2,2 L81.9,43c0-0.1-0.1-0.2-0.2-0.3l-4.1-7.1c-1.1-1.9-3.1-3-5.2-3H55.8c-2.2,0-4.1,1.1-5.2,3l-4.1,7.1c-0.1,0.1-0.2,0.3-0.2,0.4l-2-1.8 l-2.2-2c-0.7-0.7-1.5-1.3-2.2-1.9c-1.5-1.3-3.1-2.5-4.7-3.6L33.9,33c-0.4-0.3-0.8-0.5-1.3-0.8c-0.8-0.5-1.7-1-2.6-1.5 c-0.8-0.4-1.9-0.1-2.3,0.8c-0.3,0.5-0.2,1.2,0.1,1.6c0.5,0.9,1.1,1.7,1.7,2.5c0.3,0.4,0.6,0.8,0.9,1.2s0.6,0.8,1,1.2 c1.3,1.5,2.7,3,4.1,4.3c0.7,0.7,1.4,1.4,2.1,2l2.2,2l4.3,4.1l1.5,1.6v23.6L44,77.1l-4.3,4.1l-2.2,2c-0.7,0.7-1.4,1.3-2.1,2 c-1.4,1.4-2.8,2.8-4.1,4.3c-0.3,0.4-0.6,0.8-1,1.1s-0.6,0.8-0.9,1.2c-0.6,0.8-1.2,1.6-1.8,2.5c-0.5,0.8-0.3,1.9,0.5,2.4l0,0 c0.5,0.3,1.1,0.3,1.7,0.1c0.9-0.5,1.8-1,2.6-1.5l1.3-0.8l1.2-0.8c1.6-1.2,3.2-2.4,4.7-3.6c0.8-0.6,1.5-1.3,2.3-1.9l2.2-2l1.8-1.6 c0.1,0.3,0.3,0.6,0.4,0.9l4.1,7.1c1.1,1.9,3.1,3,5.2,3h16.5c2.2,0,4.2-1.1,5.2-3l4.1-7.1c0.1-0.3,0.3-0.5,0.4-0.8l1.7,1.4l2.2,2 c0.8,0.7,1.5,1.3,2.3,1.9c1.5,1.3,3.1,2.5,4.7,3.6l1.2,0.8l1.3,0.8c0.8,0.5,1.7,1,2.6,1.5c0.8,0.4,1.9,0.1,2.3-0.7 C100.5,95.7,100.5,95,100.3,94.6L100.3,94.6z M79.1,82.8c0,0.5-0.1,0.9-0.4,1.4l-4.1,7.1c-0.5,0.9-1.4,1.4-2.4,1.4H55.8 c-1,0-1.9-0.5-2.4-1.4l-4.1-7.1c-0.2-0.4-0.4-0.9-0.4-1.3v-37c0-0.1,0-0.2,0-0.2c0-0.4,0.2-0.8,0.3-1.1l4.1-7.1 c0.5-0.9,1.4-1.4,2.4-1.4h16.5c1,0,1.9,0.5,2.4,1.4l4.1,7.1c0.2,0.3,0.3,0.6,0.3,1c0,0.1,0,0.3,0,0.4L79.1,82.8z')); |
||||
|
outlinePath.addPath(new Path2D('M29.8,44.2c-0.3,0-0.7,0-1,0c-6.7,0-12.1-5.4-12.1-12.1C16.6,25.5,22,20,28.7,20c6.6,0,12,5.3,12.1,11.9 l3.1,2.8c0.2-0.9,0.2-1.7,0.2-2.6c0-8.5-6.9-15.3-15.4-15.3c-8.4,0-15.3,6.9-15.3,15.4s6.9,15.3,15.4,15.3c1.4,0,2.7-0.2,4-0.5 L29.8,44.2z M99.1,80.5c-1.4,0-2.8,0.2-4.1,0.6l3.1,2.8c0.3,0,0.7,0,1,0c6.7,0,12.1,5.4,12.1,12.1s-5.4,12.1-12.1,12.1 S87,102.7,87,96.1l-3.1-2.9c-0.1,0.9-0.2,1.7-0.2,2.6c0,8.5,6.9,15.4,15.4,15.4s15.4-6.9,15.4-15.4C114.4,87.4,107.6,80.5,99.1,80.5 L99.1,80.5L99.1,80.5z M99.1,16.8c-8.5,0-15.3,6.9-15.4,15.3c0,0.9,0.1,1.7,0.2,2.6l3.1-2.8c0.1-6.7,5.6-12,12.2-11.9 s12,5.6,11.9,12.2S105.6,44.1,99,44.1c-0.3,0-0.7,0-1,0L95,47c1.3,0.4,2.7,0.5,4.1,0.5c8.5,0,15.4-6.9,15.4-15.4 S107.6,16.8,99.1,16.8L99.1,16.8L99.1,16.8z M40.8,96c-0.1,6.7-5.6,12-12.2,11.9s-12-5.6-11.9-12.2c0.1-6.6,5.5-11.9,12.1-11.9 c0.4,0,0.7,0,1,0l3.1-2.8c-1.3-0.4-2.7-0.5-4.1-0.6c-8.5,0-15.4,6.9-15.4,15.4s6.9,15.4,15.4,15.4s15.3-6.9,15.4-15.3 c0-0.9-0.1-1.8-0.2-2.6L40.8,96z')); |
||||
|
context.fillStyle = outlineColor; |
||||
|
context.fill(outlinePath); |
||||
|
const bodyPath = new Path2D('M79,46c0-0.1,0-0.3,0-0.4c0-0.4-0.1-0.7-0.3-1l-4.1-7.1c-0.5-0.9-1.4-1.4-2.4-1.4H55.7c-1,0-1.9,0.5-2.4,1.4 l-4.1,7.1c-0.1,0.3-0.3,0.7-0.3,1.1c0,0,0,0.1,0,0.2v37c0,0.4,0.2,0.9,0.4,1.3l4.1,7.1c0.5,0.9,1.4,1.4,2.4,1.4h16.4 c1,0,1.9-0.5,2.4-1.4l4.1-7.1c0.3-0.5,0.4-0.9,0.4-1.4L79,46z M67.3,55.2c0,1.8-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3v-8.8 c0-1.8,1.5-3.3,3.3-3.3s3.3,1.5,3.3,3.3V55.2z'); |
||||
|
context.fillStyle = bodyColor; |
||||
|
context.fill(bodyPath); |
||||
|
const directionPath = new Path2D('M64,43.1c-1.8,0-3.3,1.5-3.3,3.3v8.8c0,1.8,1.5,3.3,3.3,3.3s3.3-1.5,3.3-3.3v-8.8C67.3,44.6,65.8,43.1,64,43.1z'); |
||||
|
context.fillStyle = directionColor; |
||||
|
context.fill(directionPath); |
||||
|
/* eslint-enable max-len */ |
||||
|
|
||||
|
this.data = context.getImageData(0, 0, this.width, this.height).data; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default DroneIcon; |
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 224 B |
|
After Width: | Height: | Size: 727 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 863 B |
|
After Width: | Height: | Size: 893 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 26 KiB |
@ -0,0 +1,42 @@ |
|||||
|
<script setup> |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import { useManufacturerStore } from '@/stores'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
|
||||
|
const manufacturerStore = useManufacturerStore(); |
||||
|
const { getManufacturerList } = manufacturerStore; |
||||
|
|
||||
|
const list = ref([]); |
||||
|
const loading = ref(false); |
||||
|
function loadList() { |
||||
|
loading.value = true; |
||||
|
getManufacturerList({ page: 1, pageSize: 10, all: true, search: undefined }, { mergeArgs: false, mergeData: false }).then(({ data = [] } = {}) => { |
||||
|
// const { data: manufacturerList = [] } = data || {}; |
||||
|
// console.log(data); |
||||
|
list.value = data; |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}).finally(() => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
loadList(); |
||||
|
|
||||
|
const props = defineProps(['modelValue']); |
||||
|
const emit = defineEmits(['update:modelValue']); |
||||
|
|
||||
|
const value = computed({ |
||||
|
get() { |
||||
|
return props.modelValue; |
||||
|
}, |
||||
|
set(nv) { |
||||
|
emit('update:modelValue', nv); |
||||
|
}, |
||||
|
}); |
||||
|
const options = computed(() => list.value.map(({ manufacturerName, id }) => ({ label: manufacturerName, value: id }))); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-select v-model="value" :loading="loading" :options="options" placeholder="请选择制造商" filterable /> |
||||
|
</template> |
||||
@ -0,0 +1,92 @@ |
|||||
|
<script setup> |
||||
|
import { ref, watch } from 'vue'; |
||||
|
import { REQUEST_UPLOAD_FILE } from '@/config/urls'; |
||||
|
import auth from '@/utils/auth'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
modelValue: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}); |
||||
|
const emit = defineEmits(['update:modelValue']); |
||||
|
|
||||
|
const subject = ref('image'); |
||||
|
|
||||
|
const files = ref([]); |
||||
|
|
||||
|
watch(() => props.modelValue, (nv = []) => { |
||||
|
console.log('nv', nv); |
||||
|
if (!nv.length) files.value = []; |
||||
|
if (files.value.length) return; |
||||
|
files.value = [...props.modelValue]; |
||||
|
}, { deep: true }); |
||||
|
|
||||
|
const ABRIDGE_NAME = [10, 7]; |
||||
|
|
||||
|
const formatResponse = (res) => { |
||||
|
if (!res) { |
||||
|
return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' }; |
||||
|
} |
||||
|
return res; |
||||
|
}; |
||||
|
|
||||
|
function beforeUpload(UploadFile) { |
||||
|
const { type = 'image' } = UploadFile || {}; |
||||
|
if (type.includes('image')) { |
||||
|
subject.value = 'image'; |
||||
|
} |
||||
|
if (type.includes('video')) { |
||||
|
subject.value = 'video'; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
// const handleSuccess = ({ response }) => { |
||||
|
const handleSuccess = () => { |
||||
|
setTimeout(() => { |
||||
|
const temp = files.value.map(({ name, size, status, url, response, type }) => ({ |
||||
|
name, |
||||
|
size, |
||||
|
status, |
||||
|
url: url || response?.data?.url, |
||||
|
raw: {}, |
||||
|
type, |
||||
|
})); |
||||
|
emit('update:modelValue', temp); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const handleRemove = ({ index }) => { |
||||
|
const temp = [...(props.modelValue || [])]; |
||||
|
temp.splice(index, 1); |
||||
|
emit('update:modelValue', temp); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-upload |
||||
|
v-model="files" |
||||
|
placeholder="支持批量上传文件，文件格式不限" |
||||
|
:action="REQUEST_UPLOAD_FILE(subject)" |
||||
|
:headers="{ |
||||
|
Authorization: `Bearer ${auth.getToken()}`, |
||||
|
}" |
||||
|
theme="file-flow" |
||||
|
multiple |
||||
|
:abridge-name="ABRIDGE_NAME" |
||||
|
auto-upload |
||||
|
show-thumbnail |
||||
|
allow-upload-duplicate-file |
||||
|
:format-response="formatResponse" |
||||
|
:before-upload="beforeUpload" |
||||
|
@success="handleSuccess" |
||||
|
@remove="handleRemove" |
||||
|
/> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,31 @@ |
|||||
|
<script setup> |
||||
|
defineProps({ |
||||
|
label: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<dl :class="s.root"> |
||||
|
<dt v-if="label">{{ label }}</dt> |
||||
|
<dd><slot /></dd> |
||||
|
</dl> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
display: flex; |
||||
|
margin: 0; |
||||
|
|
||||
|
&:global > dt { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
&:global > dd { |
||||
|
margin: 0; |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,143 @@ |
|||||
|
<script setup> |
||||
|
import { computed } from 'vue'; |
||||
|
import deviceCruise from '@/core/deviceCruise'; |
||||
|
import { popularTime } from '@/utils/helpers'; |
||||
|
|
||||
|
const ready = computed(() => deviceCruise.ready); |
||||
|
const speedRate = computed(() => deviceCruise.speedRate); |
||||
|
const totalTime = computed(() => deviceCruise.totalTime); |
||||
|
const currentTime = computed({ |
||||
|
get() { |
||||
|
return deviceCruise.elapsedMs; |
||||
|
}, |
||||
|
set(val) { |
||||
|
deviceCruise.setCurrentTime(val); |
||||
|
}, |
||||
|
}); |
||||
|
// const currentTime = ref(0); |
||||
|
|
||||
|
// deviceCruise.change((elapsedMs = 0) => { |
||||
|
// currentTime.value = elapsedMs; |
||||
|
// }); |
||||
|
// const currentTime = ref(0); |
||||
|
// watch(() => device.value.elapsedMs, (nv) => { |
||||
|
// console.log(nv); |
||||
|
// }); |
||||
|
const showPlayButton = computed(() => deviceCruise.isPaused || deviceCruise.isStopped); |
||||
|
const sliderMarks = computed(() => ({ [totalTime.value]: popularTime(totalTime.value / 1000, 1) })); |
||||
|
|
||||
|
const handleTipFormat = computed(() => popularTime(deviceCruise.elapsedMs / 1000, 1) || 0); |
||||
|
|
||||
|
function onChangeSpeedRate() { |
||||
|
const speedRat = speedRate.value >= 8 ? 1 : speedRate.value * 2; |
||||
|
deviceCruise.setSpeedRate(speedRat); |
||||
|
} |
||||
|
|
||||
|
function onPlay() { |
||||
|
deviceCruise.handlePlay(); |
||||
|
} |
||||
|
|
||||
|
function onPause() { |
||||
|
deviceCruise.handlePause(); |
||||
|
} |
||||
|
|
||||
|
function onStop() { |
||||
|
deviceCruise.handleStop(); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="$style.root" v-if="ready"> |
||||
|
<t-slider |
||||
|
v-model="currentTime" |
||||
|
:tooltip-props="{ visible: false, content: `${handleTipFormat}`, placement: 'top' }" |
||||
|
:max="totalTime" :marks="sliderMarks" |
||||
|
/> |
||||
|
<div class="btn speedRate" @click="onChangeSpeedRate"> |
||||
|
<span>{{ speedRate }}</span> |
||||
|
<t-icon size="large" name="forward" /> |
||||
|
</div> |
||||
|
<t-icon name="play" size="large" class="btn" v-if="showPlayButton" @click="onPlay" /> |
||||
|
<t-icon name="pause" size="large" class="btn" v-else @click="onPause" /> |
||||
|
<t-icon name="stop" size="large" class="btn" @click="onStop" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module> |
||||
|
//@import "~@/styles/variables"; |
||||
|
|
||||
|
.root { |
||||
|
position: absolute; |
||||
|
left: 20px; |
||||
|
right: 20px; |
||||
|
bottom: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: fade(#eee, 90%); |
||||
|
padding: 20px; |
||||
|
border-radius: 5px; |
||||
|
|
||||
|
:global { |
||||
|
.t-slider { |
||||
|
//flex: 1; |
||||
|
//margin: 0 30px 0 0; |
||||
|
// |
||||
|
//&.ant-slider-with-marks { |
||||
|
// margin-bottom: 0; |
||||
|
// |
||||
|
// .ant-slider-mark-text { |
||||
|
// color: @primary-color; |
||||
|
// } |
||||
|
//} |
||||
|
|
||||
|
.t-slider__rail { |
||||
|
background-color: fade(white, 90%); |
||||
|
} |
||||
|
|
||||
|
&:hover .t-slider__rail { |
||||
|
background-color: fade(#4582e6, 40%); |
||||
|
} |
||||
|
|
||||
|
//.t-slider__track { |
||||
|
// background-color: #4582e6; |
||||
|
//} |
||||
|
// |
||||
|
.t-slider__button { |
||||
|
background-color: var(--td-brand-color); |
||||
|
border-color: white; |
||||
|
box-shadow: 0 0 0 5px fade(#4582e6, 40%); |
||||
|
} |
||||
|
// |
||||
|
//.ant-slider-handle { |
||||
|
// border-color: fade(white, 80%); |
||||
|
// background-color: @primary-color; |
||||
|
// box-shadow: 0 0 0 5px fade(@primary-color, 20%); |
||||
|
//} |
||||
|
} |
||||
|
|
||||
|
.speedRate { |
||||
|
display: flex; |
||||
|
//font-size: 14px; |
||||
|
line-height: 1; |
||||
|
user-select: none; |
||||
|
} |
||||
|
|
||||
|
//.t-icon { |
||||
|
// font-size: 16px; |
||||
|
//} |
||||
|
|
||||
|
.btn { |
||||
|
border: 1px solid var(--td-brand-color); |
||||
|
border-radius: 3px; |
||||
|
padding: 0 5px; |
||||
|
color: var(--td-brand-color); |
||||
|
margin-left: 10px; |
||||
|
height: 28px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,65 @@ |
|||||
|
<script setup> |
||||
|
import deviceCruise from '@/core/deviceCruise'; |
||||
|
import TextRow from '@/components/TextRow.vue'; |
||||
|
import { computed } from 'vue'; |
||||
|
import { formatTime, toFixed } from '@/utils/helpers'; |
||||
|
|
||||
|
const info = computed(() => deviceCruise.timelyData); |
||||
|
|
||||
|
const isVisible = computed(() => !!Object.keys(info.value).length); |
||||
|
|
||||
|
const isBox = computed(() => { |
||||
|
const { yaw } = info.value; |
||||
|
return yaw === undefined; |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root" v-if="isVisible"> |
||||
|
<template v-if="isBox"> |
||||
|
<TextRow label="时间：">{{ formatTime(info.timestamp) }}</TextRow> |
||||
|
<TextRow label="经度："><ValueUnit unit="°" tag="small">{{ toFixed(info.lng, 7) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="纬度："><ValueUnit unit="°" tag="small">{{ toFixed(info.lat, 7) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="速度："><ValueUnit unit="米/秒" tag="small">{{ toFixed(info.spd / 10, 2) }}</ValueUnit></TextRow> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<TextRow label="时间：">{{ formatTime(info.timestamp) }}</TextRow> |
||||
|
<TextRow label="经度："><ValueUnit unit="°" tag="small">{{ toFixed(info.lng, 7) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="纬度："><ValueUnit unit="°" tag="small">{{ toFixed(info.lat, 7) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="对地高度："><ValueUnit unit="米" tag="small">{{ toFixed(info.height, 2) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="水平速度："><ValueUnit unit="米/秒" tag="small">{{ toFixed(info.xspeed, 2) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="垂直速度："><ValueUnit unit="米/秒" tag="small">{{ toFixed(info.yspeed, 2) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="航向角："><ValueUnit unit="°" tag="small">{{ toFixed(info.yaw, 2) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="横滚角："><ValueUnit unit="°" tag="small">{{ toFixed(info.ra, 2) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="俯仰角："><ValueUnit unit="°" tag="small">{{ toFixed(info.pa, 2) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="喷洒流速："><ValueUnit unit="升/分钟" tag="small">{{ toFixed(info.flowSpeed, 2) }}</ValueUnit></TextRow> |
||||
|
<TextRow label="已施药量："><ValueUnit unit="毫升" tag="small">{{ toFixed(info.dose, 2) }}</ValueUnit></TextRow> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 10px; |
||||
|
//background-color: fade(black, 60%); |
||||
|
background-color: fade(#eee, 90%); |
||||
|
//color: whitesmoke; |
||||
|
color: black; |
||||
|
padding: 20px; |
||||
|
border-radius: 5px; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
:global { |
||||
|
dl dt { |
||||
|
width: 70px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
dt { |
||||
|
//color: var(--td-brand-color); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,295 @@ |
|||||
|
<script setup> |
||||
|
import BasePanel from '@/components/BasePanel.vue'; |
||||
|
import Player from 'xgplayer'; |
||||
|
import 'xgplayer/dist/index.min.css'; |
||||
|
// import HlsPlugin from 'xgplayer-hls'; |
||||
|
import { onMounted, ref, onUnmounted, watch } from 'vue'; |
||||
|
// import MultipleFilesUploader from '@/components/MultipleFilesUploader.vue'; |
||||
|
// import mp4 from '@/assets/xgplayer-demo.mp4'; |
||||
|
// import liveCancel from '@/assets/live_cancel.png'; |
||||
|
|
||||
|
// let player = new Player({ |
||||
|
// id: 'mse', |
||||
|
// url: '//abc.com/**/*.mp4', |
||||
|
// height: '100%', |
||||
|
// width: '100%', |
||||
|
// }); |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const playerRef = ref(); |
||||
|
|
||||
|
const player = ref(); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const options = { |
||||
|
// id: 'player', |
||||
|
el: playerRef.value, |
||||
|
url: '', // 替换为你的 HLS 流地址 |
||||
|
// type: 'hls', |
||||
|
// fluid: true, |
||||
|
autoplayMuted: false, |
||||
|
autoplay: false, |
||||
|
lang: 'zh', |
||||
|
width: '100%', |
||||
|
height: '100%', |
||||
|
}; |
||||
|
player.value = new Player(options); |
||||
|
|
||||
|
// if (props.list.length) { |
||||
|
// setTimeout(() => { |
||||
|
// player.value.setConfig({ |
||||
|
// url: props.list[0]?.url, |
||||
|
// }); |
||||
|
// }); |
||||
|
// // onPlayNext(props.list[0]); |
||||
|
// } |
||||
|
}); |
||||
|
|
||||
|
const panelOpen = ref(false); |
||||
|
|
||||
|
function onPlayNext(media) { |
||||
|
player.value.playNext({ |
||||
|
url: media.url, |
||||
|
autoplay: true, |
||||
|
// poster: '新的海报图', |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
if (player.value) player.value.destroy(); |
||||
|
}); |
||||
|
|
||||
|
watch(() => props.list, (nv) => { |
||||
|
if (!nv.length) { |
||||
|
player.value.playNext({ |
||||
|
url: [], |
||||
|
autoplay: false, |
||||
|
// poster: liveCancel, |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
// onPlayNext(nv[0]); |
||||
|
if (!player.value) return; |
||||
|
onPlayNext(nv[0]); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div ref="playerRef" /> |
||||
|
|
||||
|
<BasePanel |
||||
|
:open="panelOpen" |
||||
|
class="list-container" |
||||
|
width="25vh" |
||||
|
style="z-index: 50" |
||||
|
expand-ability |
||||
|
:show-tip="false" |
||||
|
scrollbar |
||||
|
> |
||||
|
<div class="title">视频列表</div> |
||||
|
|
||||
|
<t-list> |
||||
|
<template v-if="list.length"> |
||||
|
<t-list-item v-for="item in list" :key="item.id"> |
||||
|
{{ item.name }} |
||||
|
<template #action> |
||||
|
<t-button variant="text" @click="onPlayNext(item)"> |
||||
|
<template #icon> |
||||
|
<t-icon name="play-circle" /> |
||||
|
</template> |
||||
|
</t-button> |
||||
|
</template> |
||||
|
</t-list-item> |
||||
|
</template> |
||||
|
|
||||
|
<template v-else> |
||||
|
<t-list-item> |
||||
|
<div style="text-align: center;">还没有上传视频哦 ~</div> |
||||
|
</t-list-item> |
||||
|
</template> |
||||
|
</t-list> |
||||
|
</BasePanel> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
//pointer-events: none; |
||||
|
//background-color: fade(red, 80%); |
||||
|
|
||||
|
&:global:hover { |
||||
|
.list-container { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
|
||||
|
.list-container { |
||||
|
display: none; |
||||
|
padding: 0; |
||||
|
|
||||
|
.nav { |
||||
|
top: 50%; |
||||
|
transform: translateY(-60%); |
||||
|
} |
||||
|
|
||||
|
.nav .btn { |
||||
|
width: unset; |
||||
|
padding: 40px 2px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
padding: var(--td-comp-paddingTB-s); |
||||
|
text-align: center; |
||||
|
border-bottom: 1px solid var(--td-component-stroke); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//.urlList { |
||||
|
// pointer-events: auto; |
||||
|
// position: absolute; |
||||
|
// right: 0; |
||||
|
// top: 0; |
||||
|
// bottom: 0; |
||||
|
// z-index: 2; |
||||
|
// color: var(--td-text-color-primary); |
||||
|
// width: var(--width); |
||||
|
// background-color: var(--td-bg-color-page); |
||||
|
// padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); |
||||
|
// box-sizing: border-box; |
||||
|
// transition: all 0.2s ease; |
||||
|
// |
||||
|
// &.expand{ |
||||
|
// transform: translateX(100%); |
||||
|
// } |
||||
|
// |
||||
|
// &.is-open { |
||||
|
// transform: translateX(0px); |
||||
|
// } |
||||
|
// |
||||
|
// .wrapper { |
||||
|
// height: 100%; |
||||
|
// //background-color: var(--td-bg-color-container); |
||||
|
// background-color: transparent; |
||||
|
// //border-radius: var(--td-radius-medium); |
||||
|
// //border-radius: var(--td-radius-medium); |
||||
|
// //border-left-color: var(--td-gray-color-10); |
||||
|
// //border-left: 1px solid var(--td-component-stroke); |
||||
|
// //backdrop-filter: blur(20px); |
||||
|
// display: flex; |
||||
|
// flex-direction: column; |
||||
|
// //overflow: hidden; |
||||
|
// |
||||
|
// .header { |
||||
|
// display: flex; |
||||
|
// justify-content: center; |
||||
|
// align-items: center; |
||||
|
// min-height: var(--td-comp-size-xxl); |
||||
|
// font-size: var(--td-font-size-title-large); |
||||
|
// background-color: var(--td-bg-color-container); |
||||
|
// //background-color: fade(black, 30%); |
||||
|
// border-radius: var(--td-radius-medium); |
||||
|
// box-sizing: border-box; |
||||
|
// //box-shadow: 0 0 5px 0 rgba(174, 174, 174, 60%); |
||||
|
// //box-shadow: 0 0 1px 0 var(--td-component-border); |
||||
|
// border: 1px solid var(--td-component-stroke); |
||||
|
// padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); |
||||
|
// |
||||
|
// .interspace { |
||||
|
// flex: 1; |
||||
|
// } |
||||
|
// |
||||
|
// .t-space .t-icon { |
||||
|
// font-size: var(--td-font-size-headline-medium); |
||||
|
// } |
||||
|
// } |
||||
|
// |
||||
|
// .top-bar { |
||||
|
// padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); |
||||
|
// } |
||||
|
// |
||||
|
// .body { |
||||
|
// flex: 1; |
||||
|
// //padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); |
||||
|
// overflow: auto; |
||||
|
// //box-shadow: 0 0 5px 0 rgba(174, 174, 174, 60%); |
||||
|
// //box-shadow: 0 0 1px 0 var(--td-component-border); |
||||
|
// border: 1px solid var(--td-component-stroke); |
||||
|
// background-color: var(--td-bg-color-container); |
||||
|
// border-radius: var(--td-radius-medium); |
||||
|
// } |
||||
|
// |
||||
|
// .footer { |
||||
|
// display: flex; |
||||
|
// justify-content: center; |
||||
|
// align-items: center; |
||||
|
// min-height: var(--td-comp-size-xxl); |
||||
|
// padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); |
||||
|
// //background-color: fade(black, 30%); |
||||
|
// box-sizing: border-box; |
||||
|
// } |
||||
|
// } |
||||
|
// |
||||
|
// .nav { |
||||
|
// position: absolute; |
||||
|
// right: 100%; |
||||
|
// //left: 100%; |
||||
|
// top: var(--td-comp-paddingTB-m); |
||||
|
// |
||||
|
// .btn { |
||||
|
// width: var(--td-comp-size-l); |
||||
|
// min-height: var(--td-comp-size-m); |
||||
|
// padding: var(--td-comp-paddingTB-m) 0; |
||||
|
// background-color: var(--td-bg-color-container); |
||||
|
// border-right: 1px solid var(--td-bg-color-container); |
||||
|
// border-radius: var(--td-radius-medium) 0 0 var(--td-radius-medium); |
||||
|
// backdrop-filter: blur(10px); |
||||
|
// transition: background-color ease 0.2s; |
||||
|
// display: flex; |
||||
|
// flex-direction: column; |
||||
|
// justify-content: center; |
||||
|
// align-items: center; |
||||
|
// box-sizing: border-box; |
||||
|
// cursor: pointer; |
||||
|
// |
||||
|
// &:hover { |
||||
|
// background-color: var(--td-brand-color-hover); |
||||
|
// } |
||||
|
// |
||||
|
// & + .btn { |
||||
|
// border-top: 1px solid fade(black, 50%); |
||||
|
// } |
||||
|
// |
||||
|
// span { |
||||
|
// display: none; |
||||
|
// width: 1em; |
||||
|
// font-size: var(--td-font-size-link-medium); |
||||
|
// line-height: 1.2; |
||||
|
// margin-top: 5px; |
||||
|
// } |
||||
|
// |
||||
|
// &.is-active { |
||||
|
// background-color: var(--td-brand-color-active); |
||||
|
// border-top-color: transparent; |
||||
|
// |
||||
|
// span { |
||||
|
// display: block; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
//} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,264 @@ |
|||||
|
/** |
||||
|
* 圈地（算面积） |
||||
|
*/ |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
|
||||
|
const SOURCE_LINE = 'enclosure-source-line'; |
||||
|
const SOURCE_FILL = 'enclosure-source-fill'; |
||||
|
const SOURCE_SYMBOL = 'enclosure-source-symbol'; |
||||
|
const LAYER_LINE = 'enclosure-layer-line'; |
||||
|
const LAYER_FILL = 'enclosure-layer-fill'; |
||||
|
const LAYER_SYMBOL = 'enclosure-layer-symbol'; |
||||
|
|
||||
|
class Enclosure { |
||||
|
// 地图实例
|
||||
|
map = null; |
||||
|
|
||||
|
// 点坐标
|
||||
|
coordinates = []; |
||||
|
|
||||
|
// 操作点
|
||||
|
markers = []; |
||||
|
|
||||
|
// 形状是否已经闭合（即：是否已经圈完地了）
|
||||
|
isClosed = false; |
||||
|
|
||||
|
// 形状是否扭结了
|
||||
|
isKinked = false; |
||||
|
|
||||
|
// 视觉选项
|
||||
|
option = { |
||||
|
edgeColor: 'rgba(0, 0, 255, 0.8)', |
||||
|
fillColor: 'rgba(0, 0, 255, 0.3)', |
||||
|
markerColor: 'rgba(255, 255, 255, 0.8)', |
||||
|
labelColor: 'rgba(255, 255, 255, 0.8)', |
||||
|
labelStrokeColor: 'rgba(0, 0, 0, 1)', |
||||
|
labelFontSize: 14, |
||||
|
}; |
||||
|
|
||||
|
constructor(map, option = {}) { |
||||
|
this.map = map; |
||||
|
this.option = { |
||||
|
...this.option, |
||||
|
...option, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
onDrawOn() { |
||||
|
this.map.getCanvas().style.cursor = 'crosshair'; |
||||
|
this.coordinates = []; |
||||
|
this.markers = []; |
||||
|
this.isClosed = false; |
||||
|
this.map.on('click', this.onClickMap); |
||||
|
this.map.on('style.load', this.draw); |
||||
|
this.map.fire('enclosure.on'); |
||||
|
} |
||||
|
|
||||
|
onDrawOff() { |
||||
|
this.map.getCanvas().style.cursor = ''; |
||||
|
if (this.map.getSource(SOURCE_LINE)) { |
||||
|
this.map.removeLayer(LAYER_LINE); |
||||
|
this.map.removeSource(SOURCE_LINE); |
||||
|
} |
||||
|
if (this.map.getSource(SOURCE_FILL)) { |
||||
|
this.map.removeLayer(LAYER_FILL); |
||||
|
this.map.removeSource(SOURCE_FILL); |
||||
|
} |
||||
|
if (this.map.getSource(SOURCE_SYMBOL)) { |
||||
|
this.map.removeLayer(LAYER_SYMBOL); |
||||
|
this.map.removeSource(SOURCE_SYMBOL); |
||||
|
} |
||||
|
this.markers.forEach(m => m.remove()); |
||||
|
this.map.off('click', this.onClickMap); |
||||
|
this.map.off('style.load', this.draw); |
||||
|
this.map.fire('enclosure.off'); |
||||
|
} |
||||
|
|
||||
|
// 生成线段geojson
|
||||
|
genLineFeature() { |
||||
|
const [first] = this.coordinates; |
||||
|
const coordinates = this.isClosed ? [...this.coordinates, first] : this.coordinates; |
||||
|
return turf.lineString(coordinates); |
||||
|
} |
||||
|
|
||||
|
// 生成多边形geojson
|
||||
|
// eslint-disable-next-line class-methods-use-this
|
||||
|
genPolygonFeature(lineFeature) { |
||||
|
return turf.lineToPolygon(lineFeature); |
||||
|
} |
||||
|
|
||||
|
// 检测形状是否扭结（判断新坐标加入后，或者对原有坐标进行判断）
|
||||
|
checkKinked(newCoordinate) { |
||||
|
if (this.coordinates.length < 3) return false; |
||||
|
if (newCoordinate) { |
||||
|
const lineFeature = turf.lineString([...this.coordinates, newCoordinate]); |
||||
|
const kinks = turf.kinks(lineFeature); |
||||
|
return !!kinks.features.length; |
||||
|
} |
||||
|
const lineFeature = turf.lineString(this.coordinates); |
||||
|
const polygonFeature = turf.lineToPolygon(lineFeature); |
||||
|
const kinks = turf.kinks(polygonFeature); |
||||
|
return !!kinks.features.length; |
||||
|
} |
||||
|
|
||||
|
draw = () => { |
||||
|
const { length: count } = this.coordinates; |
||||
|
if (count < 2) return; |
||||
|
|
||||
|
// 显示边线
|
||||
|
const sourceLine = this.map.getSource(SOURCE_LINE); |
||||
|
const lineFeature = this.genLineFeature(); |
||||
|
if (!sourceLine) { |
||||
|
this.map.addSource(SOURCE_LINE, { |
||||
|
type: 'geojson', |
||||
|
data: lineFeature, |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_LINE, |
||||
|
type: 'line', |
||||
|
source: SOURCE_LINE, |
||||
|
paint: { |
||||
|
'line-color': this.option.edgeColor, |
||||
|
'line-width': 2, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
sourceLine.setData(lineFeature); |
||||
|
} |
||||
|
|
||||
|
if (count < 3) return; |
||||
|
|
||||
|
// 显示多边形
|
||||
|
const sourceFill = this.map.getSource(SOURCE_FILL); |
||||
|
const polygonFeature = this.genPolygonFeature(lineFeature); |
||||
|
if (!sourceFill) { |
||||
|
this.map.addSource(SOURCE_FILL, { |
||||
|
type: 'geojson', |
||||
|
data: polygonFeature, |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_FILL, |
||||
|
type: 'fill', |
||||
|
source: SOURCE_FILL, |
||||
|
paint: { |
||||
|
'fill-color': this.option.fillColor, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
sourceFill.setData(polygonFeature); |
||||
|
} |
||||
|
|
||||
|
if (!this.isClosed) return; |
||||
|
|
||||
|
const area = this.isKinked ? '0' : (turf.area(polygonFeature) * 0.0015).toFixed(2); // 亩
|
||||
|
const pointFeature = turf.centerOfMass(polygonFeature); |
||||
|
pointFeature.properties.area = this.isKinked ? '' : `${area}亩`; |
||||
|
|
||||
|
const sourceSymbol = this.map.getSource(SOURCE_SYMBOL); |
||||
|
if (!sourceSymbol) { |
||||
|
this.map.addSource(SOURCE_SYMBOL, { |
||||
|
type: 'geojson', |
||||
|
data: pointFeature, |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_SYMBOL, |
||||
|
type: 'symbol', |
||||
|
source: SOURCE_SYMBOL, |
||||
|
layout: { |
||||
|
'text-field': '{area}', |
||||
|
'text-anchor': 'top', |
||||
|
'text-size': this.option.labelFontSize, |
||||
|
'text-allow-overlap': true, |
||||
|
}, |
||||
|
paint: { |
||||
|
'text-color': this.option.labelColor, |
||||
|
'text-halo-color': this.option.labelStrokeColor, |
||||
|
'text-halo-width': 1, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
sourceSymbol.setData(pointFeature); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 闭合路径
|
||||
|
closePath() { |
||||
|
this.isClosed = true; |
||||
|
if (this.checkKinked()) { |
||||
|
this.isKinked = true; |
||||
|
this.map.fire('enclosure.kinked', { action: 'drag' }); |
||||
|
} else { |
||||
|
this.isKinked = false; |
||||
|
} |
||||
|
this.draw(); |
||||
|
} |
||||
|
|
||||
|
// 生成操作点
|
||||
|
genMarkerNode() { |
||||
|
const node = document.createElement('div'); |
||||
|
node.style.cursor = 'pointer'; |
||||
|
node.style.width = '12px'; |
||||
|
node.style.height = '12px'; |
||||
|
node.style.borderRadius = '50%'; |
||||
|
node.style.background = this.option.markerColor; |
||||
|
node.style.boxSizing = 'border-box'; |
||||
|
node.style.border = `2px solid ${this.option.edgeColor}`; |
||||
|
node.addEventListener('click', e => { |
||||
|
e.stopPropagation(); |
||||
|
const [first] = this.markers; |
||||
|
// 当有3个以上的点出现，就可以点击第一个点，闭合多边形
|
||||
|
if (first && (first.getElement() === node) && this.coordinates.length >= 3) { |
||||
|
this.closePath(); |
||||
|
} |
||||
|
}, false); |
||||
|
return node; |
||||
|
} |
||||
|
|
||||
|
onClickMap = e => { |
||||
|
if (this.isClosed) return; |
||||
|
|
||||
|
const { lng, lat } = e.lngLat; |
||||
|
// 判断新坐标是否会造成扭结（即：新的边线是否会跟其他边线交叉）
|
||||
|
if (this.checkKinked([lng, lat])) { |
||||
|
this.map.fire('enclosure.kinked', { action: 'click' }); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const marker = new mapbox.Marker({ |
||||
|
element: this.genMarkerNode(), |
||||
|
draggable: true, |
||||
|
}).setLngLat(e.lngLat).addTo(this.map); |
||||
|
|
||||
|
this.coordinates.push([lng, lat]); |
||||
|
this.draw(); |
||||
|
this.markers.push(marker); |
||||
|
this.map.fire('enclosure.change', { coordinates: this.coordinates }); |
||||
|
|
||||
|
marker.on('drag', () => { |
||||
|
const index = this.markers.indexOf(marker); |
||||
|
const { lng: newLng, lat: newLat } = marker.getLngLat(); |
||||
|
this.coordinates[index] = [newLng, newLat]; |
||||
|
if (this.checkKinked()) { |
||||
|
this.isKinked = true; |
||||
|
this.map.fire('enclosure.kinked', { action: 'drag' }); |
||||
|
} else { |
||||
|
// 从扭结复原了
|
||||
|
if (this.isKinked) { |
||||
|
this.map.fire('enclosure.kink-recovered'); |
||||
|
} |
||||
|
this.isKinked = false; |
||||
|
} |
||||
|
this.draw(); |
||||
|
}); |
||||
|
|
||||
|
marker.on('dragend', () => { |
||||
|
this.map.fire('enclosure.change', { coordinates: this.coordinates }); |
||||
|
}); |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default Enclosure; |
||||
@ -0,0 +1,34 @@ |
|||||
|
/** |
||||
|
* 图标 |
||||
|
*/ |
||||
|
|
||||
|
const check = Symbol('Icon.check'); |
||||
|
|
||||
|
class Icon { |
||||
|
constructor(name, image, zoom, offset) { |
||||
|
Icon[check](image); |
||||
|
|
||||
|
this.name = name; |
||||
|
this.zoom = zoom || 1; |
||||
|
this.offset = offset || [0, 0]; |
||||
|
this.data = image; |
||||
|
} |
||||
|
|
||||
|
update(image) { |
||||
|
Icon[check](image); |
||||
|
this.data = image; |
||||
|
} |
||||
|
|
||||
|
static [check](image) { |
||||
|
if ( |
||||
|
!(image instanceof HTMLImageElement) |
||||
|
&& !(image instanceof ImageBitmap) |
||||
|
&& !(image instanceof ImageData) |
||||
|
&& !('data' in image && 'width' in image && 'height' in image) |
||||
|
) { |
||||
|
throw new Error('image类型错误'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Icon; |
||||
@ -0,0 +1,234 @@ |
|||||
|
/** |
||||
|
* 带图标的点 |
||||
|
*/ |
||||
|
import { action, computed, makeObservable, observable, reaction } from 'mobx'; |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
import EventDispatcher from '../EventDispatcher'; |
||||
|
import Icon from './Icon'; |
||||
|
|
||||
|
class IconPointRenderer extends EventDispatcher { |
||||
|
_topic = null; |
||||
|
|
||||
|
_map = null; |
||||
|
|
||||
|
_icons = {}; |
||||
|
|
||||
|
_dataSource = []; |
||||
|
|
||||
|
get _sourceId() { |
||||
|
return `${this._topic}-icon-point-source`; |
||||
|
} |
||||
|
|
||||
|
get _layerId() { |
||||
|
return `${this._topic}-icon-point-layer`; |
||||
|
} |
||||
|
|
||||
|
get _pointFeatures() { |
||||
|
return this._dataSource.map(({ id, iconName, point, ...others }) => { |
||||
|
const { [iconName]: icon } = this._icons; |
||||
|
const { zoom: iconZoom = 1, offset: iconOffset = [0, 0] } = icon || {}; |
||||
|
const feature = turf.point(point, { id, iconName, iconZoom, iconOffset, ...others }); |
||||
|
feature.id = id; |
||||
|
return feature; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
get _pointFeatureCollection() { |
||||
|
return turf.featureCollection(this._pointFeatures); |
||||
|
} |
||||
|
|
||||
|
constructor(topic, icons = []) { |
||||
|
super(['mousemove', 'mouseleave', 'mouseenter']); |
||||
|
this._topic = topic; |
||||
|
if (!icons.length) { |
||||
|
throw new Error('入参icons至少包含一个图标元素'); |
||||
|
} |
||||
|
icons.forEach(this.updateIcon); |
||||
|
|
||||
|
makeObservable(this, { |
||||
|
_topic: observable, |
||||
|
_icons: observable, |
||||
|
_dataSource: observable, |
||||
|
_sourceId: computed, |
||||
|
_layerId: computed, |
||||
|
_pointFeatures: computed, |
||||
|
_pointFeatureCollection: computed, |
||||
|
loadDataSource: action, |
||||
|
updateIcon: action, |
||||
|
destroy: action, |
||||
|
}); |
||||
|
|
||||
|
reaction(() => this._dataSource, () => { |
||||
|
this._render(); |
||||
|
}); |
||||
|
reaction(() => this._icons, () => { |
||||
|
this._render(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
setMap(mapInstance) { |
||||
|
if (this._map === mapInstance) return; |
||||
|
if (!(mapInstance instanceof mapbox.Map)) { |
||||
|
throw new Error('必须传入一个mapbox地图实例'); |
||||
|
} |
||||
|
this._map = mapInstance; |
||||
|
} |
||||
|
|
||||
|
// 载入数据
|
||||
|
// list->item必须包含id、point、iconName（其中point如果是对象则必须包含lng、lat属性，如果是数组则必须是[lng, lat]）
|
||||
|
// list->item可以包含rotate，表示旋转角度
|
||||
|
loadDataSource(list) { |
||||
|
if (!this._map) { |
||||
|
throw new Error('请先设置地图实例'); |
||||
|
} |
||||
|
this._dataSource = (list || []).map(item => { |
||||
|
const { id, iconName, point } = item; |
||||
|
const newItem = { ...item }; |
||||
|
if (!Array.isArray(point)) { |
||||
|
const { lng, lat } = point; |
||||
|
newItem.point = [lng, lat]; |
||||
|
} |
||||
|
return (id >= 0 && iconName && Array.isArray(newItem.point)) ? newItem : null; |
||||
|
}).filter(Boolean); |
||||
|
if (!this._dataSource.length) { |
||||
|
console.warn('数据列表为空'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
updateIcon = icon => { |
||||
|
if (!(icon instanceof Icon)) { |
||||
|
throw new Error(`入参icon必须是${Icon}的实例`); |
||||
|
} |
||||
|
this._icons = { |
||||
|
...this._icons, |
||||
|
[icon.name]: icon, |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
_loadIcons() { |
||||
|
if (!this._map) return; |
||||
|
Object.values(this._icons).forEach(icon => { |
||||
|
if (this._map.hasImage(icon.name)) { |
||||
|
this._map.updateImage(icon.name, icon.data); |
||||
|
} else { |
||||
|
this._map.addImage(icon.name, icon.data); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
_render() { |
||||
|
if (!this._map) return; |
||||
|
this._loadIcons(); |
||||
|
this._renderPoints(); |
||||
|
} |
||||
|
|
||||
|
_renderPoints() { |
||||
|
const source = this._map.getSource(this._sourceId); |
||||
|
if (!source) { |
||||
|
this._map.addSource(this._sourceId, { |
||||
|
type: 'geojson', |
||||
|
data: this._pointFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: this._layerId, |
||||
|
type: 'symbol', |
||||
|
source: this._sourceId, |
||||
|
paint: { |
||||
|
'icon-opacity': [ |
||||
|
'case', |
||||
|
['boolean', ['feature-state', 'visible'], true], |
||||
|
1, |
||||
|
0, |
||||
|
], |
||||
|
// 'icon-translate': ['get', 'iconOffset'], // 缩放之后平移的像素值（mark：icon-translate不支持表达式）
|
||||
|
}, |
||||
|
layout: { |
||||
|
'icon-image': ['get', 'iconName'], |
||||
|
'icon-size': ['get', 'iconZoom'], |
||||
|
'icon-offset': ['get', 'iconOffset'], // 乘以缩放值后，才是最终偏移量
|
||||
|
'icon-rotate': ['coalesce', ['get', 'rotate'], ['number', 0]], |
||||
|
'icon-allow-overlap': true, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
this._map.on('click', this._layerId, this._onClick); |
||||
|
this._map.on('mouseenter', this._layerId, this._onMouseEnter); |
||||
|
this._map.on('mousemove', this._layerId, this._onMouseMove); |
||||
|
this._map.on('mouseleave', this._layerId, this._onMouseLeave); |
||||
|
} else { |
||||
|
source.setData(this._pointFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_onClick = e => { |
||||
|
if (!e.features.length) return; |
||||
|
const { lngLat, point } = e; |
||||
|
const [{ properties: detail }] = e.features; |
||||
|
this._trigger('click', { lngLat, point, detail }); |
||||
|
}; |
||||
|
|
||||
|
_onMouseMove = () => { |
||||
|
this._map.getCanvas().style.cursor = 'pointer'; |
||||
|
}; |
||||
|
|
||||
|
_onMouseEnter = e => { |
||||
|
if (!e.features.length) return; |
||||
|
const { lngLat, point } = e; |
||||
|
const [{ properties: detail }] = e.features; |
||||
|
this._trigger('mouseenter', { lngLat, point, detail }); |
||||
|
}; |
||||
|
|
||||
|
_onMouseLeave = e => { |
||||
|
this._map.getCanvas().style.cursor = ''; |
||||
|
|
||||
|
const { lngLat, point } = e; |
||||
|
this._trigger('mouseleave', { lngLat, point }); |
||||
|
}; |
||||
|
|
||||
|
// 是否包含某个点
|
||||
|
hasPoint(pointId) { |
||||
|
return this._dataSource.findIndex(({ id }) => pointId === id) >= 0; |
||||
|
} |
||||
|
|
||||
|
// 隐藏某个点
|
||||
|
hidePoint(pointId) { |
||||
|
if (!this._map || !this.hasPoint(pointId)) return; |
||||
|
if (this._map.getSource(this._sourceId)) this._map.setFeatureState({ source: this._sourceId, id: pointId }, { visible: false }); |
||||
|
} |
||||
|
|
||||
|
// 显示某个点
|
||||
|
showPoint(pointId) { |
||||
|
if (!this._map || !this.hasPoint(pointId)) return; |
||||
|
if (this._map.getSource(this._sourceId)) this._map.setFeatureState({ source: this._sourceId, id: pointId }, { visible: true }); |
||||
|
} |
||||
|
|
||||
|
changeVisibility(stateValue) { |
||||
|
if (!this._map) return; |
||||
|
if (this._map.getLayer(this._layerId)) { |
||||
|
this._map.setLayoutProperty(this._layerId, 'visibility', stateValue ? 'visible' : 'none'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
clear() { |
||||
|
if (!this._map) return; |
||||
|
if (this._map.getSource(this._sourceId)) { |
||||
|
this._map.off('click', this._layerId, this._onClick); |
||||
|
this._map.off('mousemove', this._layerId, this._onMouseMove); |
||||
|
this._map.off('mouseleave', this._layerId, this._onMouseLeave); |
||||
|
this._map.off('mouseenter', this._layerId, this._onMouseEnter); |
||||
|
this._map.removeLayer(this._layerId); |
||||
|
this._map.removeSource(this._sourceId); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
destroy() { |
||||
|
this.icons = {}; |
||||
|
this._dataSource = []; |
||||
|
this.clear(); |
||||
|
this._map = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default IconPointRenderer; |
||||
@ -0,0 +1,138 @@ |
|||||
|
/** |
||||
|
* 位置点 |
||||
|
*/ |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
|
||||
|
const SOURCE_SYMBOL = 'pinpoint-source-symbol'; |
||||
|
const LAYER_SYMBOL = 'pinpoint-layer-symbol'; |
||||
|
|
||||
|
class Pinpoint { |
||||
|
// 地图实例
|
||||
|
map = null; |
||||
|
|
||||
|
// 点坐标
|
||||
|
coordinates = []; |
||||
|
|
||||
|
// 操作点
|
||||
|
pins = []; |
||||
|
|
||||
|
// 视觉选项
|
||||
|
option = { |
||||
|
mainColor: 'rgba(255,0,0,0.7)', |
||||
|
secondaryColor: '#fff', |
||||
|
shadowColor: 'rgba(255,0,0,0.2)', |
||||
|
fontSize: 12, |
||||
|
}; |
||||
|
|
||||
|
constructor(map, option = {}) { |
||||
|
this.map = map; |
||||
|
this.option = { |
||||
|
...this.option, |
||||
|
...option, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 开启打点
|
||||
|
onPinOn() { |
||||
|
this.map.getCanvas().style.cursor = 'crosshair'; |
||||
|
this.coordinates = []; |
||||
|
this.pins = []; |
||||
|
this.map.on('click', this.onClickMap); |
||||
|
this.map.on('style.load', this.draw); |
||||
|
this.map.fire('pinpoint.on'); |
||||
|
} |
||||
|
|
||||
|
// 关闭打点
|
||||
|
onPinOff() { |
||||
|
this.map.getCanvas().style.cursor = ''; |
||||
|
if (this.map.getSource(SOURCE_SYMBOL)) { |
||||
|
this.map.removeLayer(LAYER_SYMBOL); |
||||
|
this.map.removeSource(SOURCE_SYMBOL); |
||||
|
} |
||||
|
this.pins.forEach(m => m.remove()); |
||||
|
this.map.off('click', this.onClickMap); |
||||
|
this.map.off('style.load', this.draw); |
||||
|
this.map.fire('pinpoint.off'); |
||||
|
} |
||||
|
|
||||
|
// 生成点geojson
|
||||
|
genPointFeature() { |
||||
|
const pointFeatures = this.coordinates.map(([lng, lat]) => turf.point([lng, lat], { |
||||
|
text: `${Number(lng).toFixed(7)}\n${Number(lat).toFixed(7)}`, |
||||
|
})); |
||||
|
return turf.featureCollection(pointFeatures); |
||||
|
} |
||||
|
|
||||
|
draw = () => { |
||||
|
const sourceSymbol = this.map.getSource(SOURCE_SYMBOL); |
||||
|
if (!sourceSymbol) { |
||||
|
this.map.addSource(SOURCE_SYMBOL, { |
||||
|
type: 'geojson', |
||||
|
data: this.genPointFeature(), |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_SYMBOL, |
||||
|
type: 'symbol', |
||||
|
source: SOURCE_SYMBOL, |
||||
|
layout: { |
||||
|
'text-field': '{text}', |
||||
|
'text-anchor': 'top', |
||||
|
'text-justify': 'right', |
||||
|
'text-size': this.option.fontSize, |
||||
|
'text-offset': [0, 0.8], |
||||
|
'text-allow-overlap': true, |
||||
|
}, |
||||
|
paint: { |
||||
|
'text-color': this.option.mainColor, |
||||
|
'text-halo-color': this.option.secondaryColor, |
||||
|
'text-halo-width': 1, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
sourceSymbol.setData(this.genPointFeature()); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 生成操作点
|
||||
|
genPinNode() { |
||||
|
const node = document.createElement('div'); |
||||
|
node.style.width = '17px'; |
||||
|
node.style.height = '30px'; |
||||
|
/* eslint-disable max-len */ |
||||
|
node.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.48 29.5">
|
||||
|
<path d="M4.72,27.12c0,1.3,1.59,2.38,3.54,2.38s3.54-1,3.54-2.38-1.59-2.39-3.54-2.39S4.72,25.82,4.72,27.12Z" fill="${this.option.shadowColor}" /> |
||||
|
<path d="M9.7.12A8.26,8.26,0,1,0,7.07,16.43V26a1.18,1.18,0,0,0,1.17,1.17h0A1.17,1.17,0,0,0,9.41,26V16.43a8.25,8.25,0,0,0,7.07-8.12h0A8.25,8.25,0,0,0,9.7.12ZM8.26,10.62A2.36,2.36,0,0,1,8.19,5.9h.07a2.36,2.36,0,0,1,0,4.72Z" fill="${this.option.mainColor}" /> |
||||
|
</svg>`; |
||||
|
/* eslint-enable max-len */ |
||||
|
return node; |
||||
|
} |
||||
|
|
||||
|
onClickMap = e => { |
||||
|
const marker = new mapbox.Marker({ |
||||
|
element: this.genPinNode(), |
||||
|
offset: [0, -12], |
||||
|
draggable: true, |
||||
|
}).setLngLat(e.lngLat).addTo(this.map); |
||||
|
|
||||
|
const { lng, lat } = e.lngLat; |
||||
|
this.coordinates.push([lng, lat]); |
||||
|
this.draw(); |
||||
|
this.pins.push(marker); |
||||
|
this.map.fire('pinpoint.change', { coordinates: this.coordinates }); |
||||
|
|
||||
|
marker.on('drag', () => { |
||||
|
const index = this.pins.indexOf(marker); |
||||
|
const { lng: newLng, lat: newLat } = marker.getLngLat(); |
||||
|
this.coordinates[index] = [newLng, newLat]; |
||||
|
this.draw(); |
||||
|
}); |
||||
|
|
||||
|
marker.on('dragend', () => { |
||||
|
this.map.fire('pinpoint.change', { coordinates: this.coordinates }); |
||||
|
}); |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default Pinpoint; |
||||
@ -0,0 +1,185 @@ |
|||||
|
/** |
||||
|
* 测距尺 |
||||
|
*/ |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
|
||||
|
const SOURCE_LINE = 'ruler-source-line'; |
||||
|
const SOURCE_SYMBOL = 'ruler-source-symbol'; |
||||
|
const LAYER_LINE = 'ruler-layer-line'; |
||||
|
const LAYER_SYMBOL = 'ruler-layer-symbol'; |
||||
|
const labelFormat = n => (n < 1000 ? `${Number(n).toFixed(2)}米` : `${(n / 1000).toFixed(2)}千米`); |
||||
|
|
||||
|
class Ruler { |
||||
|
// 地图实例
|
||||
|
map = null; |
||||
|
|
||||
|
// 点坐标
|
||||
|
coordinates = []; |
||||
|
|
||||
|
// 距离值（含单位）
|
||||
|
labels = []; |
||||
|
|
||||
|
// 操作点
|
||||
|
markers = []; |
||||
|
|
||||
|
// 视觉选项
|
||||
|
option = { |
||||
|
mainColor: 'rgba(255,0,0,0.8)', |
||||
|
secondaryColor: '#fff', |
||||
|
fontSize: 12, |
||||
|
}; |
||||
|
|
||||
|
constructor(map, option = {}) { |
||||
|
this.map = map; |
||||
|
this.option = { |
||||
|
...this.option, |
||||
|
...option, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 开启测量（外部调用）
|
||||
|
onMeasuringOn() { |
||||
|
this.map.getCanvas().style.cursor = 'crosshair'; |
||||
|
this.coordinates = []; |
||||
|
this.markers = []; |
||||
|
this.labels = []; |
||||
|
this.map.on('click', this.onClickMap); |
||||
|
this.map.on('style.load', this.draw); |
||||
|
this.map.fire('ruler.on'); |
||||
|
} |
||||
|
|
||||
|
// 关闭测量（外部调用）
|
||||
|
onMeasuringOff() { |
||||
|
this.map.getCanvas().style.cursor = ''; |
||||
|
if (this.map.getSource(SOURCE_LINE)) { |
||||
|
this.map.removeLayer(LAYER_LINE); |
||||
|
this.map.removeSource(SOURCE_LINE); |
||||
|
} |
||||
|
if (this.map.getSource(SOURCE_SYMBOL)) { |
||||
|
this.map.removeLayer(LAYER_SYMBOL); |
||||
|
this.map.removeSource(SOURCE_SYMBOL); |
||||
|
} |
||||
|
this.markers.forEach(m => m.remove()); |
||||
|
this.map.off('click', this.onClickMap); |
||||
|
this.map.off('style.load', this.draw); |
||||
|
this.map.fire('ruler.off'); |
||||
|
} |
||||
|
|
||||
|
// 生成线段geojson
|
||||
|
genLineFeature() { |
||||
|
return turf.lineString(this.coordinates); |
||||
|
} |
||||
|
|
||||
|
// 生成点geojson
|
||||
|
genPointFeature() { |
||||
|
const pointFeatures = this.coordinates.map((coordinate, index) => turf.point(coordinate, { |
||||
|
text: this.labels[index], |
||||
|
})); |
||||
|
return turf.featureCollection(pointFeatures); |
||||
|
} |
||||
|
|
||||
|
// 绘制
|
||||
|
draw = () => { |
||||
|
if (this.coordinates.length >= 2) { |
||||
|
const sourceLine = this.map.getSource(SOURCE_LINE); |
||||
|
if (!sourceLine) { |
||||
|
this.map.addSource(SOURCE_LINE, { |
||||
|
type: 'geojson', |
||||
|
data: this.genLineFeature(), |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_LINE, |
||||
|
type: 'line', |
||||
|
source: SOURCE_LINE, |
||||
|
paint: { |
||||
|
'line-color': this.option.mainColor, |
||||
|
'line-width': 2, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
sourceLine.setData(this.genLineFeature()); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const sourceSymbol = this.map.getSource(SOURCE_SYMBOL); |
||||
|
if (!sourceSymbol) { |
||||
|
this.map.addSource(SOURCE_SYMBOL, { |
||||
|
type: 'geojson', |
||||
|
data: this.genPointFeature(), |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_SYMBOL, |
||||
|
type: 'symbol', |
||||
|
source: SOURCE_SYMBOL, |
||||
|
layout: { |
||||
|
'text-field': '{text}', |
||||
|
'text-anchor': 'top', |
||||
|
'text-size': this.option.fontSize, |
||||
|
'text-offset': [0, 0.8], |
||||
|
'text-allow-overlap': true, |
||||
|
}, |
||||
|
paint: { |
||||
|
'text-color': this.option.mainColor, |
||||
|
'text-halo-color': this.option.secondaryColor, |
||||
|
'text-halo-width': 1, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
sourceSymbol.setData(this.genPointFeature()); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 生成操作点
|
||||
|
genMarkerNode() { |
||||
|
const node = document.createElement('div'); |
||||
|
node.style.width = '12px'; |
||||
|
node.style.height = '12px'; |
||||
|
node.style.borderRadius = '50%'; |
||||
|
node.style.background = this.option.secondaryColor; |
||||
|
node.style.boxSizing = 'border-box'; |
||||
|
node.style.border = `2px solid ${this.option.mainColor}`; |
||||
|
return node; |
||||
|
} |
||||
|
|
||||
|
onClickMap = e => { |
||||
|
const marker = new mapbox.Marker({ |
||||
|
element: this.genMarkerNode(), |
||||
|
draggable: true, |
||||
|
}).setLngLat(e.lngLat).addTo(this.map); |
||||
|
|
||||
|
const { lng, lat } = e.lngLat; |
||||
|
this.coordinates.push([lng, lat]); |
||||
|
this.updateLabels(); |
||||
|
this.draw(); |
||||
|
this.markers.push(marker); |
||||
|
this.map.fire('ruler.change', { coordinates: this.coordinates }); |
||||
|
|
||||
|
marker.on('drag', () => { |
||||
|
const index = this.markers.indexOf(marker); |
||||
|
const { lng: newLng, lat: newLat } = marker.getLngLat(); |
||||
|
this.coordinates[index] = [newLng, newLat]; |
||||
|
this.updateLabels(); |
||||
|
this.draw(); |
||||
|
}); |
||||
|
|
||||
|
marker.on('dragend', () => { |
||||
|
this.map.fire('ruler.change', { coordinates: this.coordinates }); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 更新测量结果值
|
||||
|
updateLabels() { |
||||
|
const { coordinates } = this; |
||||
|
let sum = 0; |
||||
|
this.labels = coordinates.map((coordinate, index) => { |
||||
|
if (index === 0) return labelFormat(0); |
||||
|
sum += turf.distance(coordinates[index - 1], coordinates[index], { units: 'meters' }); |
||||
|
return labelFormat(sum); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Ruler; |
||||
@ -0,0 +1,455 @@ |
|||||
|
/** |
||||
|
* 多边形组显示 |
||||
|
*/ |
||||
|
import { action, computed, makeObservable, observable, reaction } from 'mobx'; |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
|
||||
|
class ShapeGroupRenderer { |
||||
|
_topic = null; |
||||
|
|
||||
|
// 地图实例
|
||||
|
_map = null; |
||||
|
|
||||
|
// 分组标识
|
||||
|
_groupIdKey = null; |
||||
|
|
||||
|
// 分组名称标识
|
||||
|
_groupNameKey = null; |
||||
|
|
||||
|
// 分组父级标识
|
||||
|
_groupParentIdKey = null; |
||||
|
|
||||
|
_dataSource = []; |
||||
|
|
||||
|
_defaultOptions = { |
||||
|
// 显示描边
|
||||
|
showStroke: true, |
||||
|
// 显示标签
|
||||
|
showLabel: true, |
||||
|
// 显示填充
|
||||
|
showFill: true, |
||||
|
}; |
||||
|
|
||||
|
_options = {}; |
||||
|
|
||||
|
_defaultStyle = { |
||||
|
color: 'rgba(255, 95, 0, 0.7)', |
||||
|
hoverColor: 'rgba(255, 95, 0, 1)', |
||||
|
offset: -2, |
||||
|
isDashed: false, |
||||
|
labelColor: 'rgba(255, 95, 0, 1)', |
||||
|
labelStrokeColor: 'rgba(0, 0, 0, 0.4)', |
||||
|
labelMinZoom: 3, |
||||
|
}; |
||||
|
|
||||
|
// 视觉选项
|
||||
|
_style = {}; |
||||
|
|
||||
|
get _sourceId() { |
||||
|
return { |
||||
|
FILL: `${this._topic}-shape-fill-source`, |
||||
|
STROKE: `${this._topic}-shape-hull-stroke-source`, |
||||
|
LABEL: `${this._topic}-shape-hull-label-source`, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
get _layerId() { |
||||
|
return { |
||||
|
FILL: `${this._topic}-shape-fill-source`, |
||||
|
STROKE: `${this._topic}-shape-hull-stroke-layer`, |
||||
|
LABEL: `${this._topic}-shape-hull-label-layer`, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 形状填充
|
||||
|
get _shapeFillFeatures() { |
||||
|
return this._dataSource.map(({ id, points, ...others }) => { |
||||
|
const newPoints = Array.isArray(points[0]) ? points : points.map(({ lng, lat }) => [lng, lat]); |
||||
|
const lineFeature = turf.lineString(newPoints, { id, ...others }); |
||||
|
const polygonFeature = turf.lineToPolygon(lineFeature); |
||||
|
polygonFeature.id = id; |
||||
|
return polygonFeature; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 形状填充集合
|
||||
|
get _shapeFillFeatureCollection() { |
||||
|
return turf.featureCollection(this._shapeFillFeatures); |
||||
|
} |
||||
|
|
||||
|
// 形状填充色表达式
|
||||
|
get _shapeFillColorExpression() { |
||||
|
return [ |
||||
|
'case', |
||||
|
[ |
||||
|
'any', |
||||
|
['boolean', ['feature-state', 'hover'], false], |
||||
|
['boolean', ['feature-state', 'highlight'], false], |
||||
|
], |
||||
|
this._options.showFill ? this._style.fillHoverColor : 'rgba(0, 0, 0, 0)', |
||||
|
this._options.showFill ? this._style.fillColor : 'rgba(0, 0, 0, 0)', |
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
// 边框颜色表达式
|
||||
|
get _strokeColorExpression() { |
||||
|
return [ |
||||
|
'case', |
||||
|
[ |
||||
|
'any', |
||||
|
['boolean', ['feature-state', 'hover'], false], |
||||
|
['boolean', ['feature-state', 'highlight'], false], |
||||
|
], |
||||
|
this._style.hoverColor, |
||||
|
this._style.color, |
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
get _strokeDashedExpression() { |
||||
|
return this._style.isDashed ? [2, 2] : [1]; |
||||
|
} |
||||
|
|
||||
|
// 标签透明度表达式
|
||||
|
get _labelOpacityExpression() { |
||||
|
return [ |
||||
|
'interpolate', ['linear'], |
||||
|
['zoom'], |
||||
|
this._style.labelMinZoom - 0.01, 0, |
||||
|
this._style.labelMinZoom, 1, |
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
// 分组数据
|
||||
|
get _group() { |
||||
|
const group = {}; |
||||
|
Object.values(this._dataSource).forEach(item => { |
||||
|
const { [this._groupIdKey]: groupId } = item; |
||||
|
if (groupId) { |
||||
|
group[groupId] = [ |
||||
|
...(group[groupId] || []), |
||||
|
item, |
||||
|
]; |
||||
|
} |
||||
|
}); |
||||
|
return group; |
||||
|
} |
||||
|
|
||||
|
// 每个组中所有形状边界点集合
|
||||
|
get _pointFeatureCollections() { |
||||
|
const group = {}; |
||||
|
Object.keys(this._group).forEach(groupId => { |
||||
|
const groupPoints = this._group[groupId].map(({ points }) => points).flat(); |
||||
|
const pointFeatures = groupPoints.map(point => turf.point(point)); |
||||
|
group[groupId] = turf.featureCollection(pointFeatures); |
||||
|
}); |
||||
|
return group; |
||||
|
} |
||||
|
|
||||
|
// 每个组的凸包
|
||||
|
get _convexHulls() { |
||||
|
return Object.keys(this._pointFeatureCollections).map(groupId => { |
||||
|
const convexHull = turf.convex(this._pointFeatureCollections[groupId]); |
||||
|
const [{ [this._groupNameKey]: groupName, [this._groupParentIdKey]: groupParentId }] = this._group[groupId]; |
||||
|
convexHull.id = groupId - 0; |
||||
|
convexHull.properties = { |
||||
|
[this._groupIdKey]: groupId - 0, |
||||
|
[this._groupNameKey]: groupName || '', |
||||
|
[this._groupParentIdKey]: (groupParentId - 0) || 0, |
||||
|
}; |
||||
|
return convexHull; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 组凸包集合
|
||||
|
get _convexHullFeatureCollection() { |
||||
|
return turf.featureCollection(this._convexHulls); |
||||
|
} |
||||
|
|
||||
|
// 各分组中心点
|
||||
|
get _groupCenterFeatures() { |
||||
|
return this._convexHulls.map(feature => { |
||||
|
const pointFeature = turf.centerOfMass(feature); |
||||
|
pointFeature.properties = feature.properties; |
||||
|
return pointFeature; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 分组中心点集合
|
||||
|
get _groupCenterFeatureCollection() { |
||||
|
return turf.featureCollection(this._groupCenterFeatures); |
||||
|
} |
||||
|
|
||||
|
constructor(topic, groupIdKey, groupNameKey = null, groupParentIdKey = null) { |
||||
|
this._topic = topic; |
||||
|
this._groupIdKey = groupIdKey; |
||||
|
this._groupNameKey = groupNameKey; |
||||
|
this._groupParentIdKey = groupParentIdKey; |
||||
|
|
||||
|
this.updateOptions(); |
||||
|
this.updateStyle(); |
||||
|
|
||||
|
makeObservable(this, { |
||||
|
_topic: observable, |
||||
|
_dataSource: observable, |
||||
|
_options: observable, |
||||
|
_style: observable, |
||||
|
_sourceId: computed, |
||||
|
_layerId: computed, |
||||
|
_strokeColorExpression: computed, |
||||
|
_strokeDashedExpression: computed, |
||||
|
_labelOpacityExpression: computed, |
||||
|
_group: computed, |
||||
|
_pointFeatureCollections: computed, |
||||
|
_convexHulls: computed, |
||||
|
_convexHullFeatureCollection: computed, |
||||
|
_groupCenterFeatures: computed, |
||||
|
_groupCenterFeatureCollection: computed, |
||||
|
loadDataSource: action, |
||||
|
updateOptions: action, |
||||
|
updateStyle: action, |
||||
|
destroy: action, |
||||
|
}); |
||||
|
|
||||
|
reaction(() => this._dataSource, () => { |
||||
|
this._render(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 更新配置项
|
||||
|
updateOptions(options = {}) { |
||||
|
if (Object.keys(options).length) { |
||||
|
this._options = { |
||||
|
...this._options, |
||||
|
...options, |
||||
|
}; |
||||
|
this._refreshVisibility(); |
||||
|
} else { |
||||
|
this._options = { |
||||
|
...this._defaultOptions, |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 更新视觉样式
|
||||
|
updateStyle(style = {}) { |
||||
|
if (Object.keys(style).length) { |
||||
|
this._style = { |
||||
|
...this._style, |
||||
|
...style, |
||||
|
}; |
||||
|
this._repaintStyle(); |
||||
|
} else { |
||||
|
this._style = { |
||||
|
...this._defaultStyle, |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
setMap(mapInstance) { |
||||
|
if (this._map === mapInstance) return; |
||||
|
if (!(mapInstance instanceof mapbox.Map)) { |
||||
|
throw new Error('必须传入一个mapbox地图实例'); |
||||
|
} |
||||
|
this._map = mapInstance; |
||||
|
} |
||||
|
|
||||
|
// 载入数据（list->item必须包含id、%_groupIdKey%、points数组，points->item如果是对象则必须包含lng、lat属性，如果是数组则必须是[lng, lat]）
|
||||
|
loadDataSource(list) { |
||||
|
if (!this._map) { |
||||
|
throw new Error('请先设置地图实例'); |
||||
|
} |
||||
|
this._dataSource = (list || []).map(item => { |
||||
|
const { id, points } = item; |
||||
|
const newPoints = Array.isArray(points[0]) ? points : points.map(({ lng, lat }) => [lng, lat]); |
||||
|
return (id >= 0 && Array.isArray(points) && points.length >= 3) ? { ...item, points: newPoints } : null; |
||||
|
}).filter(Boolean); |
||||
|
} |
||||
|
|
||||
|
_render() { |
||||
|
if (!this._map) return; |
||||
|
if (this._options.showStroke) this._renderStroke(); |
||||
|
if (this._options.showLabel) this._renderLabel(); |
||||
|
if (this._options.showFill) this._renderShapeFill(); |
||||
|
} |
||||
|
|
||||
|
// 渲染形状填充
|
||||
|
_renderShapeFill() { |
||||
|
const source = this._map.getSource(this._sourceId.FILL); |
||||
|
|
||||
|
if (!source) { |
||||
|
this._map.addSource(this._sourceId.FILL, { |
||||
|
type: 'geojson', |
||||
|
data: this._shapeFillFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: this._layerId.FILL, |
||||
|
type: 'fill', |
||||
|
source: this._sourceId.FILL, |
||||
|
paint: { |
||||
|
'fill-color': this._shapeFillColorExpression, |
||||
|
'fill-opacity': [ |
||||
|
'case', |
||||
|
['boolean', ['feature-state', 'visible'], true], |
||||
|
1, |
||||
|
0, |
||||
|
], |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
// this._map.on('click', this._layerId.FILL, this._onClick);
|
||||
|
// this._map.on('mousemove', this._layerId.FILL, this._onMouseMove);
|
||||
|
// this._map.on('mouseleave', this._layerId.FILL, this._onMouseLeave);
|
||||
|
} else { |
||||
|
source.setData(this._shapeFillFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_renderStroke() { |
||||
|
const source = this._map.getSource(this._sourceId.STROKE); |
||||
|
if (!source) { |
||||
|
this._map.addSource(this._sourceId.STROKE, { |
||||
|
type: 'geojson', |
||||
|
data: this._convexHullFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: this._layerId.STROKE, |
||||
|
type: 'line', |
||||
|
source: this._sourceId.STROKE, |
||||
|
paint: { |
||||
|
'line-color': this._strokeColorExpression, |
||||
|
'line-width': [ |
||||
|
'case', |
||||
|
[ |
||||
|
'any', |
||||
|
['boolean', ['feature-state', 'hover'], false], |
||||
|
['boolean', ['feature-state', 'highlight'], false], |
||||
|
], |
||||
|
2, |
||||
|
1, |
||||
|
], |
||||
|
'line-dasharray': this._strokeDashedExpression, |
||||
|
'line-offset': this._defaultStyle.offset, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
source.setData(this._convexHullFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_renderLabel() { |
||||
|
const source = this._map.getSource(this._sourceId.LABEL); |
||||
|
if (!source) { |
||||
|
this._map.addSource(this._sourceId.LABEL, { |
||||
|
type: 'geojson', |
||||
|
data: this._groupCenterFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: this._layerId.LABEL, |
||||
|
type: 'symbol', |
||||
|
source: this._sourceId.LABEL, |
||||
|
layout: { |
||||
|
'text-field': `{${this._groupNameKey}}`, |
||||
|
'text-size': 12, |
||||
|
'text-allow-overlap': true, |
||||
|
}, |
||||
|
paint: { |
||||
|
'text-color': this._style.labelColor, |
||||
|
'text-halo-color': this._style.labelStrokeColor, |
||||
|
'text-halo-width': 1, |
||||
|
'text-translate': [0, -20], |
||||
|
'text-opacity': this._labelOpacityExpression, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
source.setData(this._groupCenterFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 高亮某个分组框（或取消高亮）
|
||||
|
highlightGroup(groupId, stateValue = true) { |
||||
|
if (!this._map) return; |
||||
|
if (this._map.getSource(this._sourceId.STROKE)) this._map.setFeatureState({ source: this._sourceId.STROKE, id: groupId }, { highlight: stateValue }); |
||||
|
if (this._map.getSource(this._sourceId.LABEL)) this._map.setFeatureState({ source: this._sourceId.LABEL, id: groupId }, { highlight: stateValue }); |
||||
|
} |
||||
|
|
||||
|
// 高亮一组分组框（或取消高亮）
|
||||
|
highlightGroups(keyName, keyValue, stateValue = true) { |
||||
|
if (!this._map) return; |
||||
|
turf.featureEach(this._convexHullFeatureCollection, currentFeature => { |
||||
|
const { id } = currentFeature; |
||||
|
if (currentFeature.properties[keyName] === keyValue) this.highlightGroup(id, stateValue); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
_refreshVisibility() { |
||||
|
if (!this._map) return; |
||||
|
if (this._map.getLayer(this._layerId.STROKE)) this._map.setLayoutProperty(this._layerId.STROKE, 'visibility', this._options.showStroke ? 'visible' : 'none'); |
||||
|
if (this._map.getLayer(this._layerId.LABEL)) this._map.setLayoutProperty(this._layerId.LABEL, 'visibility', this._options.showLabel ? 'visible' : 'none'); |
||||
|
} |
||||
|
|
||||
|
_repaintStyle() { |
||||
|
if (!this._map) return; |
||||
|
if (this._map.getLayer(this._layerId.FILL)) { |
||||
|
this._map.setPaintProperty(this._layerId.FILL, 'fill-color', this._shapeFillColorExpression); |
||||
|
} |
||||
|
if (this._map.getLayer(this._layerId.STROKE)) { |
||||
|
this._map.setPaintProperty(this._layerId.STROKE, 'line-color', this._strokeColorExpression); |
||||
|
this._map.setPaintProperty(this._layerId.STROKE, 'line-dasharray', this._strokeDashedExpression); |
||||
|
this._map.setPaintProperty(this._layerId.STROKE, 'line-offset', this._defaultStyle.offset); |
||||
|
} |
||||
|
if (this._map.getLayer(this._layerId.LABEL)) { |
||||
|
this._map.setPaintProperty(this._layerId.LABEL, 'text-color', this._style.labelColor); |
||||
|
this._map.setPaintProperty(this._layerId.LABEL, 'text-halo-color', this._style.labelStrokeColor); |
||||
|
this._map.setPaintProperty(this._layerId.LABEL, 'text-opacity', this._labelOpacityExpression); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 缩放到包围盒
|
||||
|
fit(groupId, { top = 0, bottom = 0, left = 0, right = 0 } = {}, cut = 120) { |
||||
|
if (!this._map || !(groupId in this._group)) return; |
||||
|
const feature = this._convexHullFeatureCollection.features.find(({ id }) => id === groupId); |
||||
|
if (!feature) return; |
||||
|
this._map.fitBounds(turf.bbox(feature), { |
||||
|
duration: 2000, |
||||
|
padding: { |
||||
|
top: top + cut, |
||||
|
bottom: bottom + cut, |
||||
|
left: left + cut, |
||||
|
right: right + cut, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
clear() { |
||||
|
if (!this._map) return; |
||||
|
if (this._map.getSource(this._sourceId.STROKE)) { |
||||
|
this._map.removeLayer(this._layerId.STROKE); |
||||
|
this._map.removeSource(this._sourceId.STROKE); |
||||
|
} |
||||
|
if (this._map.getSource(this._sourceId.LABEL)) { |
||||
|
this._map.removeLayer(this._layerId.LABEL); |
||||
|
this._map.removeSource(this._sourceId.LABEL); |
||||
|
} |
||||
|
if (this._map.getSource(this._sourceId.FILL)) { |
||||
|
// this._map.off('click', this._layerId.FILL, this._onClick);
|
||||
|
// this._map.off('mousemove', this._layerId.FILL, this._onMouseMove);
|
||||
|
// this._map.off('mouseleave', this._layerId.FILL, this._onMouseLeave);
|
||||
|
this._map.removeLayer(this._layerId.FILL); |
||||
|
this._map.removeSource(this._sourceId.FILL); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
destroy() { |
||||
|
this.clear(); |
||||
|
this._map = null; |
||||
|
this._dataSource = []; |
||||
|
this.updateStyle(); |
||||
|
this.updateOptions(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default ShapeGroupRenderer; |
||||
@ -0,0 +1,63 @@ |
|||||
|
/** |
||||
|
* 地块助手 |
||||
|
*/ |
||||
|
import blockRenderer from './blockRenderer'; |
||||
|
import groupRenderer from './groupRenderer'; |
||||
|
import subFarmRenderer from './subFarmRenderer'; |
||||
|
|
||||
|
class BlockHelper { |
||||
|
static blockRenderer = blockRenderer; |
||||
|
|
||||
|
static groupRenderer = groupRenderer; |
||||
|
|
||||
|
static subFarmRenderer = subFarmRenderer; |
||||
|
|
||||
|
static setMap(map) { |
||||
|
blockRenderer.setMap(map); |
||||
|
groupRenderer.setMap(map); |
||||
|
subFarmRenderer.setMap(map); |
||||
|
} |
||||
|
|
||||
|
static loadDataSource(list = []) { |
||||
|
blockRenderer.loadDataSource(list); |
||||
|
groupRenderer.loadDataSource(list); |
||||
|
subFarmRenderer.loadDataSource(list); |
||||
|
} |
||||
|
|
||||
|
static getBlock(blockId) { |
||||
|
return blockRenderer.getShape(blockId - 0); |
||||
|
} |
||||
|
|
||||
|
static highlightBlock(blockId, stateValue) { |
||||
|
blockRenderer.highlightShape(blockId - 0, stateValue); |
||||
|
} |
||||
|
|
||||
|
static highlightGroup(groupId, stateValue) { |
||||
|
groupRenderer.highlightGroup(groupId - 0, stateValue); |
||||
|
blockRenderer.highlightShapes('groupId', groupId - 0, stateValue); |
||||
|
} |
||||
|
|
||||
|
static highlightSubFarm(subFarmId, stateValue) { |
||||
|
subFarmRenderer.highlightGroup(subFarmId - 0, stateValue); |
||||
|
groupRenderer.highlightGroups('subFarmId', subFarmId - 0, stateValue); |
||||
|
blockRenderer.highlightShapes('subFarmId', subFarmId - 0, stateValue); |
||||
|
} |
||||
|
|
||||
|
static fitBlock(blockId, padding = {}, cut = 120) { |
||||
|
blockRenderer.fitShape(blockId - 0, padding, cut); |
||||
|
} |
||||
|
|
||||
|
static fitGroup(groupId, padding = {}, cut = 120) { |
||||
|
groupRenderer.fit(groupId - 0, padding, cut); |
||||
|
} |
||||
|
|
||||
|
static fitSubFarm(subFarmId, padding = {}, cut = 120) { |
||||
|
subFarmRenderer.fit(subFarmId - 0, padding, cut); |
||||
|
} |
||||
|
|
||||
|
static fitView(padding = {}, cut = 120) { |
||||
|
blockRenderer.fitView(padding, cut); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default BlockHelper; |
||||
@ -0,0 +1,23 @@ |
|||||
|
/** |
||||
|
* 地块显示 |
||||
|
*/ |
||||
|
import ShapeRenderer from '../ShapeRenderer'; |
||||
|
|
||||
|
class BlockRenderer extends ShapeRenderer { |
||||
|
_defaultStyle = { |
||||
|
fillColor: 'rgba(255, 255, 0, 0.1)', |
||||
|
fillHoverColor: 'rgba(255, 255, 0, 0.3)', |
||||
|
strokeColor: 'rgba(255, 255, 0, 0.5)', |
||||
|
strokeHoverColor: 'rgba(255, 255, 0, 1)', |
||||
|
labelColor: 'rgba(0, 0, 0, 1)', |
||||
|
labelStrokeColor: 'rgba(255, 255, 255, 1)', |
||||
|
labelMinZoom: 16, |
||||
|
}; |
||||
|
|
||||
|
constructor() { |
||||
|
super('block'); |
||||
|
this.updateStyle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new BlockRenderer(); |
||||
@ -0,0 +1,23 @@ |
|||||
|
/** |
||||
|
* 地块分组显示 |
||||
|
*/ |
||||
|
import ShapeGroupRenderer from '../ShapeGroupRenderer'; |
||||
|
|
||||
|
class GroupRenderer extends ShapeGroupRenderer { |
||||
|
_defaultStyle = { |
||||
|
color: 'rgba(255, 95, 0, 0.7)', |
||||
|
hoverColor: 'rgba(255, 95, 0, 1)', |
||||
|
offset: -2, |
||||
|
isDashed: true, |
||||
|
labelColor: 'rgba(255, 95, 0, 1)', |
||||
|
labelStrokeColor: 'rgba(0, 0, 0, 0.4)', |
||||
|
labelMinZoom: 14, |
||||
|
}; |
||||
|
|
||||
|
constructor() { |
||||
|
super('blockGroup', 'groupId', 'groupName', 'subFarmId'); |
||||
|
this.updateStyle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new GroupRenderer(); |
||||
@ -0,0 +1,26 @@ |
|||||
|
/** |
||||
|
* 地块分组显示 |
||||
|
*/ |
||||
|
import ShapeGroupRenderer from '../ShapeGroupRenderer'; |
||||
|
|
||||
|
class SubFarmRenderer extends ShapeGroupRenderer { |
||||
|
_defaultOptions = { |
||||
|
showStroke: true, |
||||
|
showLabel: false, |
||||
|
}; |
||||
|
|
||||
|
_defaultStyle = { |
||||
|
color: 'rgba(170, 0, 255, 0.7)', |
||||
|
hoverColor: 'rgba(170, 0, 255, 1)', |
||||
|
offset: -5, |
||||
|
isDashed: false, |
||||
|
}; |
||||
|
|
||||
|
constructor() { |
||||
|
super('blockSubFarm', 'subFarmId', 'subFarmName', 'farmId'); |
||||
|
this.updateOptions(); |
||||
|
this.updateStyle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new SubFarmRenderer(); |
||||
@ -0,0 +1,356 @@ |
|||||
|
/** |
||||
|
* 集群控制助手 |
||||
|
* 分段显示地块边+选择边+显示航线轨迹 |
||||
|
*/ |
||||
|
import { action, computed, makeObservable, observable, reaction } from 'mobx'; |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
import chroma from 'chroma-js'; |
||||
|
|
||||
|
const SOURCE_CLUSTER_CONTROL_EDGE_LINE = 'cluster-control-edge-line-source'; |
||||
|
const LAYER_CLUSTER_CONTROL_EDGE_LINE = 'cluster-control-edge-line-layer'; |
||||
|
const SOURCE_CLUSTER_CONTROL_EDGE_LABEL = 'cluster-control-edge-label-source'; |
||||
|
const LAYER_CLUSTER_CONTROL_EDGE_LABEL = 'cluster-control-edge-label-layer'; |
||||
|
const SOURCE_CLUSTER_CONTROL_TRACK_LINE = 'cluster-control-track-line-source'; |
||||
|
const LAYER_CLUSTER_CONTROL_TRACK_LINE = 'cluster-control-track-line-layer'; |
||||
|
const SOURCE_CLUSTER_CONTROL_TRACK_LABEL = 'cluster-control-track-label-source'; |
||||
|
const LAYER_CLUSTER_CONTROL_TRACK_LABEL = 'cluster-control-track-label-layer'; |
||||
|
|
||||
|
class ClusterControlHelper { |
||||
|
// 地图实例
|
||||
|
map = null; |
||||
|
|
||||
|
// 单个地块数据
|
||||
|
dataSource = {}; |
||||
|
|
||||
|
// 多条轨迹
|
||||
|
tracks = []; |
||||
|
|
||||
|
// 鼠标经过的边索引
|
||||
|
hoveredEdgeIndex = null; |
||||
|
|
||||
|
// 选边回调
|
||||
|
pickEdgeCallback = () => {}; |
||||
|
|
||||
|
// 地块各边集合
|
||||
|
get edgeLineFeatureCollection() { |
||||
|
const { points } = this.dataSource; |
||||
|
if (!Array.isArray(points) || !points.length) { |
||||
|
return turf.featureCollection([]); |
||||
|
} |
||||
|
const boundaryFeature = turf.lineString(points); |
||||
|
return turf.lineSegment(turf.lineToPolygon(boundaryFeature)); |
||||
|
} |
||||
|
|
||||
|
// 每条边中点
|
||||
|
get edgeLineMiddlePointFeatureCollection() { |
||||
|
const points = []; |
||||
|
turf.featureEach(this.edgeLineFeatureCollection, (feature, index) => { |
||||
|
const [point1, point2] = turf.getCoords(feature).map(position => turf.point(position)); |
||||
|
const point = turf.midpoint(point1, point2); |
||||
|
point.id = index; |
||||
|
point.properties = { n: index + 1 }; |
||||
|
points.push(point); |
||||
|
}); |
||||
|
return turf.featureCollection(points); |
||||
|
} |
||||
|
|
||||
|
// 航线颜色
|
||||
|
get trackColors() { |
||||
|
return chroma.scale([ |
||||
|
chroma.hsl(0, 1, 0.4), |
||||
|
chroma.hsl(30, 1, 0.4), |
||||
|
chroma.hsl(60, 1, 0.4), |
||||
|
chroma.hsl(90, 1, 0.4), |
||||
|
chroma.hsl(120, 1, 0.4), |
||||
|
chroma.hsl(150, 1, 0.4), |
||||
|
chroma.hsl(180, 1, 0.4), |
||||
|
chroma.hsl(210, 1, 0.4), |
||||
|
chroma.hsl(240, 1, 0.4), |
||||
|
chroma.hsl(270, 1, 0.4), |
||||
|
chroma.hsl(300, 1, 0.4), |
||||
|
chroma.hsl(330, 1, 0.4), |
||||
|
chroma.hsl(360, 1, 0.4), |
||||
|
]).colors(this.tracks.length + 1); |
||||
|
} |
||||
|
|
||||
|
// 航线
|
||||
|
get trackLineFeatureCollection() { |
||||
|
const features = this.tracks.map((track, index) => { |
||||
|
const color = this.trackColors[index]; |
||||
|
return turf.lineString(track, { color }, { id: index }); |
||||
|
}); |
||||
|
return turf.featureCollection(features); |
||||
|
} |
||||
|
|
||||
|
// 航线编号
|
||||
|
get trackLabelFeatureCollection() { |
||||
|
const showNumber = this.tracks.length > 1; |
||||
|
const features = this.tracks.map((track, index) => { |
||||
|
const color = this.trackColors[index]; |
||||
|
const number = showNumber ? index + 1 : ''; |
||||
|
const [point] = track; |
||||
|
return turf.point(point, { color, number }, { id: index }); |
||||
|
}); |
||||
|
return turf.featureCollection(features); |
||||
|
} |
||||
|
|
||||
|
constructor() { |
||||
|
makeObservable(this, { |
||||
|
dataSource: observable, |
||||
|
tracks: observable, |
||||
|
edgeLineFeatureCollection: computed, |
||||
|
edgeLineMiddlePointFeatureCollection: computed, |
||||
|
trackColors: computed, |
||||
|
trackLineFeatureCollection: computed, |
||||
|
trackLabelFeatureCollection: computed, |
||||
|
loadBlock: action, |
||||
|
loadTracks: action, |
||||
|
destroy: action, |
||||
|
}); |
||||
|
|
||||
|
reaction(() => this.dataSource, () => { |
||||
|
this.render(); |
||||
|
}); |
||||
|
reaction(() => this.tracks, () => { |
||||
|
this.renderTracks(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 设置地图实例
|
||||
|
setMap(map) { |
||||
|
if (this.map === map) return; |
||||
|
if (!(map instanceof mapbox.Map)) { |
||||
|
throw new Error('必须传入一个mapbox地图实例'); |
||||
|
} |
||||
|
this.map = map; |
||||
|
} |
||||
|
|
||||
|
// 载入地块详情
|
||||
|
loadBlock(detail) { |
||||
|
if (!this.map) { |
||||
|
throw new Error('请先设置地图实例'); |
||||
|
} |
||||
|
const { points, ...otherDetail } = detail; |
||||
|
const newPoints = Array.isArray(points[0]) ? points : points.map(({ lng, lat }) => [lng, lat]); |
||||
|
this.dataSource = { |
||||
|
...otherDetail, |
||||
|
points: newPoints, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 载入多条轨迹
|
||||
|
loadTracks(tracks) { |
||||
|
this.tracks = (tracks || []).map(track => (track || []).map(({ longitude, latitude }) => [longitude, latitude])); |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
if (!this.map) return; |
||||
|
this.renderEdgeLine(); |
||||
|
this.renderEdgeLabel(); |
||||
|
} |
||||
|
|
||||
|
// 边界线
|
||||
|
renderEdgeLine() { |
||||
|
const source = this.map.getSource(SOURCE_CLUSTER_CONTROL_EDGE_LINE); |
||||
|
if (!source) { |
||||
|
this.map.addSource(SOURCE_CLUSTER_CONTROL_EDGE_LINE, { |
||||
|
type: 'geojson', |
||||
|
data: this.edgeLineFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_CLUSTER_CONTROL_EDGE_LINE, |
||||
|
type: 'line', |
||||
|
source: SOURCE_CLUSTER_CONTROL_EDGE_LINE, |
||||
|
layout: { |
||||
|
'line-cap': 'round', |
||||
|
}, |
||||
|
paint: { |
||||
|
'line-color': [ |
||||
|
'case', |
||||
|
['boolean', ['feature-state', 'hover'], false], |
||||
|
'rgba(0,0,0,1)', |
||||
|
'rgba(0,0,0,0.5)', |
||||
|
], |
||||
|
'line-width': 6, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
this.map.on('mouseenter', LAYER_CLUSTER_CONTROL_EDGE_LINE, this.onEnterEdge); |
||||
|
this.map.on('mouseleave', LAYER_CLUSTER_CONTROL_EDGE_LINE, this.onLeaveEdge); |
||||
|
this.map.on('click', LAYER_CLUSTER_CONTROL_EDGE_LINE, this.onPickEdge); |
||||
|
} else { |
||||
|
source.setData(this.edgeLineFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
renderEdgeLabel() { |
||||
|
const source = this.map.getSource(SOURCE_CLUSTER_CONTROL_EDGE_LABEL); |
||||
|
if (!source) { |
||||
|
this.map.addSource(SOURCE_CLUSTER_CONTROL_EDGE_LABEL, { |
||||
|
type: 'geojson', |
||||
|
data: this.edgeLineMiddlePointFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_CLUSTER_CONTROL_EDGE_LABEL, |
||||
|
type: 'symbol', |
||||
|
source: SOURCE_CLUSTER_CONTROL_EDGE_LABEL, |
||||
|
layout: { |
||||
|
'text-field': '{n}', |
||||
|
'text-size': 16, |
||||
|
'text-allow-overlap': true, |
||||
|
}, |
||||
|
paint: { |
||||
|
'text-color': 'white', |
||||
|
'text-halo-color': 'black', |
||||
|
'text-halo-width': 2, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
source.setData(this.edgeLineMiddlePointFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
renderTracks() { |
||||
|
if (!this.map) return; |
||||
|
// 轨迹线
|
||||
|
{ |
||||
|
const source = this.map.getSource(SOURCE_CLUSTER_CONTROL_TRACK_LINE); |
||||
|
if (!source) { |
||||
|
this.map.addSource(SOURCE_CLUSTER_CONTROL_TRACK_LINE, { |
||||
|
type: 'geojson', |
||||
|
data: this.trackLineFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_CLUSTER_CONTROL_TRACK_LINE, |
||||
|
type: 'line', |
||||
|
source: SOURCE_CLUSTER_CONTROL_TRACK_LINE, |
||||
|
layout: { |
||||
|
'line-cap': 'round', |
||||
|
}, |
||||
|
paint: { |
||||
|
'line-color': ['get', 'color'], |
||||
|
'line-width': 2, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
this.map.getSource(SOURCE_CLUSTER_CONTROL_TRACK_LINE).setData(this.trackLineFeatureCollection); |
||||
|
this.fadeTracks(1); |
||||
|
} |
||||
|
} |
||||
|
// 轨迹编号
|
||||
|
{ |
||||
|
const source = this.map.getSource(SOURCE_CLUSTER_CONTROL_TRACK_LABEL); |
||||
|
if (!source) { |
||||
|
this.map.addSource(SOURCE_CLUSTER_CONTROL_TRACK_LABEL, { |
||||
|
type: 'geojson', |
||||
|
data: this.trackLabelFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this.map.addLayer({ |
||||
|
id: LAYER_CLUSTER_CONTROL_TRACK_LABEL, |
||||
|
type: 'symbol', |
||||
|
source: SOURCE_CLUSTER_CONTROL_TRACK_LABEL, |
||||
|
layout: { |
||||
|
'text-field': ['get', 'number'], |
||||
|
'text-allow-overlap': true, |
||||
|
}, |
||||
|
paint: { |
||||
|
'text-color': ['get', 'color'], |
||||
|
'text-halo-width': 1, |
||||
|
'text-halo-color': 'black', |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
this.map.getSource(SOURCE_CLUSTER_CONTROL_TRACK_LABEL).setData(this.trackLabelFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 淡化
|
||||
|
fadeTracks(opacity) { |
||||
|
if (!this.map) return; |
||||
|
if (this.map.getLayer(LAYER_CLUSTER_CONTROL_TRACK_LINE)) { |
||||
|
this.map.setPaintProperty(LAYER_CLUSTER_CONTROL_TRACK_LINE, 'line-opacity', opacity); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onEnterEdge = e => { |
||||
|
if (!e.features.length) return; |
||||
|
this.map.getCanvas().style.cursor = 'pointer'; |
||||
|
if (this.hoveredEdgeIndex !== null) { |
||||
|
this.map.setFeatureState( |
||||
|
{ source: SOURCE_CLUSTER_CONTROL_EDGE_LINE, id: this.hoveredEdgeIndex }, |
||||
|
{ hover: false }, |
||||
|
); |
||||
|
} |
||||
|
this.hoveredEdgeIndex = e.features[0].id; |
||||
|
this.map.setFeatureState( |
||||
|
{ source: SOURCE_CLUSTER_CONTROL_EDGE_LINE, id: this.hoveredEdgeIndex }, |
||||
|
{ hover: true }, |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
onLeaveEdge = () => { |
||||
|
this.map.getCanvas().style.cursor = ''; |
||||
|
if (this.hoveredEdgeIndex !== null) { |
||||
|
this.map.setFeatureState( |
||||
|
{ source: SOURCE_CLUSTER_CONTROL_EDGE_LINE, id: this.hoveredEdgeIndex }, |
||||
|
{ hover: false }, |
||||
|
); |
||||
|
} |
||||
|
this.hoveredEdgeIndex = null; |
||||
|
}; |
||||
|
|
||||
|
onPickEdge = e => { |
||||
|
const [{ id } = {}] = e.features; |
||||
|
this.pickEdgeCallback(id); |
||||
|
}; |
||||
|
|
||||
|
// 清除边
|
||||
|
clearEdge() { |
||||
|
if (!this.map) return; |
||||
|
if (this.map.getSource(SOURCE_CLUSTER_CONTROL_EDGE_LINE)) { |
||||
|
this.map.off('mouseenter', LAYER_CLUSTER_CONTROL_EDGE_LINE, this.onEnterEdge); |
||||
|
this.map.off('mouseleave', LAYER_CLUSTER_CONTROL_EDGE_LINE, this.onLeaveEdge); |
||||
|
this.map.off('click', LAYER_CLUSTER_CONTROL_EDGE_LINE, this.onPickEdge); |
||||
|
this.map.removeLayer(LAYER_CLUSTER_CONTROL_EDGE_LINE); |
||||
|
this.map.removeSource(SOURCE_CLUSTER_CONTROL_EDGE_LINE); |
||||
|
} |
||||
|
if (this.map.getSource(SOURCE_CLUSTER_CONTROL_EDGE_LABEL)) { |
||||
|
this.map.removeLayer(LAYER_CLUSTER_CONTROL_EDGE_LABEL); |
||||
|
this.map.removeSource(SOURCE_CLUSTER_CONTROL_EDGE_LABEL); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 清除航线
|
||||
|
clearTrack() { |
||||
|
if (this.map.getSource(SOURCE_CLUSTER_CONTROL_TRACK_LINE)) { |
||||
|
this.map.removeLayer(LAYER_CLUSTER_CONTROL_TRACK_LINE); |
||||
|
this.map.removeSource(SOURCE_CLUSTER_CONTROL_TRACK_LINE); |
||||
|
} |
||||
|
if (this.map.getSource(SOURCE_CLUSTER_CONTROL_TRACK_LABEL)) { |
||||
|
this.map.removeLayer(LAYER_CLUSTER_CONTROL_TRACK_LABEL); |
||||
|
this.map.removeSource(SOURCE_CLUSTER_CONTROL_TRACK_LABEL); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
clearAll() { |
||||
|
this.clearEdge(); |
||||
|
this.clearTrack(); |
||||
|
} |
||||
|
|
||||
|
destroy() { |
||||
|
this.clearAll(); |
||||
|
this.pickEdgeCallback = () => {}; |
||||
|
this.hoveredEdgeIndex = null; |
||||
|
this.tracks = []; |
||||
|
this.dataSource = {}; |
||||
|
this.map = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new ClusterControlHelper(); |
||||
@ -0,0 +1,308 @@ |
|||||
|
/** |
||||
|
* 设备按轨迹巡航 |
||||
|
*/ |
||||
|
// import Vue from 'vue';
|
||||
|
import { reactive } from 'vue'; |
||||
|
import { interpolate } from 'popmotion'; |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
import chroma from 'chroma-js'; |
||||
|
import Icon from './IconPoint/Icon'; |
||||
|
import DroneIcon from '../assets/DroneIcon'; |
||||
|
|
||||
|
const SOURCE_DEVICE_CRUISE_POINT = 'device-cruise-point-source'; |
||||
|
const LAYER_DEVICE_CRUISE_POINT = 'device-cruise-point-layer'; |
||||
|
const DEVICE_CRUISE_POINT_ICON = 'device-cruise-point-icon'; |
||||
|
|
||||
|
class DeviceCruise { |
||||
|
_that = null; |
||||
|
|
||||
|
// 地图实例
|
||||
|
_map = null; |
||||
|
|
||||
|
_icon = null; |
||||
|
|
||||
|
// 单条轨迹数据
|
||||
|
_dataSource = {}; |
||||
|
|
||||
|
// 巡航速率
|
||||
|
speedRate = 1; |
||||
|
|
||||
|
// 动画计时器
|
||||
|
_timer = null; |
||||
|
|
||||
|
// 上一帧时间点
|
||||
|
_lastFrameAt = 0; |
||||
|
|
||||
|
// 累计播放时长（毫秒数）
|
||||
|
elapsedMs = 0; |
||||
|
|
||||
|
// 每帧期望间隔（毫秒数，实际间隔取决于浏览器fps）
|
||||
|
_fpsInterval = 1000 / 30; |
||||
|
|
||||
|
// 上一帧时间戳
|
||||
|
_lastFrameTimestamp = 0; |
||||
|
|
||||
|
// 巡航到的时间点数据
|
||||
|
timelyData = {}; |
||||
|
|
||||
|
isPlaying = false; |
||||
|
|
||||
|
isPaused = false; |
||||
|
|
||||
|
isStopped = true; |
||||
|
|
||||
|
// 视觉样式
|
||||
|
_defaultStyle = { |
||||
|
deviceMainColor: '#1890ff', |
||||
|
deviceDirectionColor: 'rgba(255,255,0,0.75)', |
||||
|
}; |
||||
|
|
||||
|
_style = {}; |
||||
|
|
||||
|
// 是否准备完毕
|
||||
|
get ready() { |
||||
|
return Object.keys(this._that._dataSource).length > 0; |
||||
|
} |
||||
|
|
||||
|
get _points() { |
||||
|
const { points } = this._that._dataSource; |
||||
|
return points || []; |
||||
|
} |
||||
|
|
||||
|
// 基准时间点（从0开始的毫秒数）
|
||||
|
get _datumTime() { |
||||
|
const [{ timestamp: startTs } = {}] = this._that._points || []; |
||||
|
return this._that._points.map(({ timestamp }) => timestamp - startTs); |
||||
|
} |
||||
|
|
||||
|
// 轨迹总时间（毫秒数）
|
||||
|
get totalTime() { |
||||
|
return this._that._datumTime[this._that._datumTime.length - 1] || 0; |
||||
|
} |
||||
|
|
||||
|
// 是否已经开始播放了
|
||||
|
get isStarted() { |
||||
|
return this._that.isPlaying || this._that.isPaused; |
||||
|
} |
||||
|
|
||||
|
constructor() { |
||||
|
this._that = reactive(this); |
||||
|
// Vue.observable(this);
|
||||
|
this._that.initStyle(); |
||||
|
// eslint-disable-next-line no-constructor-return
|
||||
|
return this._that; |
||||
|
} |
||||
|
|
||||
|
// 初始化视觉演示（需在loadTracks之前配置）
|
||||
|
initStyle(style = {}) { |
||||
|
this._that._style = { |
||||
|
...this._that._defaultStyle, |
||||
|
...style, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 设置地图实例
|
||||
|
setMap(mapInstance) { |
||||
|
if (this._that._map === mapInstance) return; |
||||
|
if (!(mapInstance instanceof mapbox.Map)) { |
||||
|
throw new Error('必须传入一个mapbox地图实例'); |
||||
|
} |
||||
|
this._that._map = mapInstance; |
||||
|
} |
||||
|
|
||||
|
setIcon(icon) { |
||||
|
if (!(icon instanceof Icon)) { |
||||
|
throw new Error(`入参icon必须是${Icon}的实例`); |
||||
|
} |
||||
|
this._that._icon = icon; |
||||
|
if (this._that._map.hasImage(this._that._icon.name)) { |
||||
|
this._that._map.updateImage(this._that._icon.name, this._that._icon.data); |
||||
|
} else { |
||||
|
this._that._map.addImage(this._that._icon.name, this._that._icon.data); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 载入轨迹数据（point中必须包含lng, lat, timestamp, yaw）
|
||||
|
loadTrack({ id, points, ...others }) { |
||||
|
if (!this._that._map) { |
||||
|
throw new Error('请先设置地图实例'); |
||||
|
} |
||||
|
this._that._dataSource = { |
||||
|
id, |
||||
|
points: (points || []).map(item => ({ ...item })), |
||||
|
...others, |
||||
|
}; |
||||
|
this._that._reset(); |
||||
|
this._that._initDevice(); |
||||
|
} |
||||
|
|
||||
|
// 设置速率
|
||||
|
setSpeedRate(val) { |
||||
|
this._that.speedRate = val; |
||||
|
} |
||||
|
|
||||
|
// 设置当前巡航时间点
|
||||
|
setCurrentTime(ms) { |
||||
|
if (ms < 0 || ms > this._that.totalTime) return; |
||||
|
this._that.elapsedMs = ms; |
||||
|
// if (!this._that.isStarted) {
|
||||
|
this._that._renderDevice(); |
||||
|
// }
|
||||
|
} |
||||
|
|
||||
|
// 获取指定毫秒处的数据值
|
||||
|
_getTimelyData(ms = 0) { |
||||
|
const genTimelyData = interpolate(this._that._datumTime, this._that._points); |
||||
|
return genTimelyData(ms); |
||||
|
} |
||||
|
|
||||
|
_reset() { |
||||
|
this._that.isPlaying = false; |
||||
|
this._that.isPaused = false; |
||||
|
this._that.isStopped = true; |
||||
|
this._that.speedRate = 1; |
||||
|
this._that._lastFrameAt = 0; |
||||
|
this._that.elapsedMs = 0; |
||||
|
this._that._lastFrameTimestamp = 0; |
||||
|
} |
||||
|
|
||||
|
_initDevice() { |
||||
|
if (!this._that._icon) { |
||||
|
const icon = new Icon(DEVICE_CRUISE_POINT_ICON, new DroneIcon({ |
||||
|
outlineColor: this._that._style.deviceMainColor, |
||||
|
bodyColor: chroma(this._that._style.deviceMainColor).alpha(0.5).css(), |
||||
|
directionColor: this._that._style.deviceDirectionColor, |
||||
|
}), 0.25); |
||||
|
this._that.setIcon(icon); |
||||
|
} |
||||
|
|
||||
|
const [point] = this._that._points; |
||||
|
const { lng, lat, yaw } = point || {}; |
||||
|
const pointFeature = point ? turf.point([lng, lat], { |
||||
|
...point, |
||||
|
yaw: (+Number(yaw) || 0).toFixed(2), |
||||
|
}) : turf.multiPoint([]); |
||||
|
|
||||
|
const source = this._that._map.getSource(SOURCE_DEVICE_CRUISE_POINT); |
||||
|
if (!source) { |
||||
|
this._that._map.addSource(SOURCE_DEVICE_CRUISE_POINT, { |
||||
|
type: 'geojson', |
||||
|
data: pointFeature, |
||||
|
}); |
||||
|
|
||||
|
this._that._map.addLayer({ |
||||
|
id: LAYER_DEVICE_CRUISE_POINT, |
||||
|
type: 'symbol', |
||||
|
source: SOURCE_DEVICE_CRUISE_POINT, |
||||
|
layout: { |
||||
|
'icon-image': this._that._icon.name, |
||||
|
'icon-size': this._that._icon.zoom, |
||||
|
'icon-offset': this._that._icon.offset, |
||||
|
'icon-rotate': ['get', 'yaw'], |
||||
|
'icon-allow-overlap': true, |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
source.setData(pointFeature); |
||||
|
this._that._map.setLayoutProperty(LAYER_DEVICE_CRUISE_POINT, 'icon-image', this._that._icon.name); |
||||
|
this._that._map.setLayoutProperty(LAYER_DEVICE_CRUISE_POINT, 'icon-size', this._that._icon.zoom); |
||||
|
this._that._map.setLayoutProperty(LAYER_DEVICE_CRUISE_POINT, 'icon-offset', this._that._icon.offset); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_clearDevice() { |
||||
|
if (!this._that._map) return; |
||||
|
if (this._that._map.getSource(SOURCE_DEVICE_CRUISE_POINT)) { |
||||
|
this._that._map.removeLayer(LAYER_DEVICE_CRUISE_POINT); |
||||
|
this._that._map.removeSource(SOURCE_DEVICE_CRUISE_POINT); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_renderDevice() { |
||||
|
if (!this._that._points.length) { |
||||
|
const source = this._that._map.getSource(SOURCE_DEVICE_CRUISE_POINT); |
||||
|
if (source) source.setData(turf.featureCollection([])); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const point = this._that._getTimelyData(this._that.elapsedMs); |
||||
|
this._that.timelyData = point; |
||||
|
if (!point) return; |
||||
|
|
||||
|
const { lng, lat, yaw } = point; |
||||
|
const pointFeature = turf.point([lng, lat], { |
||||
|
...point, |
||||
|
yaw: (+Number(yaw) || 0).toFixed(2), |
||||
|
}); |
||||
|
|
||||
|
const source = this._that._map.getSource(SOURCE_DEVICE_CRUISE_POINT); |
||||
|
source.setData(pointFeature); |
||||
|
} |
||||
|
|
||||
|
_ticker = timestamp => { |
||||
|
this._that.elapsedMs += Math.round((timestamp - this._that._lastFrameAt) * this._that.speedRate); |
||||
|
this._that._lastFrameAt = timestamp; |
||||
|
if (this._that.elapsedMs > this._that.totalTime) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 在期望的间隔内_renderDevice，而不是每个tick都_renderDevice（目的：降低render频率，提高显示性能）
|
||||
|
const now = Date.now(); |
||||
|
const timeDiff = now - this._that._lastFrameTimestamp; |
||||
|
if (timeDiff > this._that._fpsInterval) { |
||||
|
this._that._lastFrameTimestamp = now - (timeDiff % this._that._fpsInterval); // 矫正时间戳
|
||||
|
this._that._renderDevice(); |
||||
|
} |
||||
|
|
||||
|
this._that._timer = requestAnimationFrame(this._that._ticker); |
||||
|
}; |
||||
|
|
||||
|
// 开始播放巡航动画、恢复播放巡航动画
|
||||
|
handlePlay() { |
||||
|
this._that.isPlaying = true; |
||||
|
this._that.isPaused = false; |
||||
|
this._that.isStopped = false; |
||||
|
this._that._lastFrameAt = performance.now(); |
||||
|
requestAnimationFrame(this._that._ticker); |
||||
|
} |
||||
|
|
||||
|
// 暂停播放巡航动画
|
||||
|
handlePause() { |
||||
|
this._that.isPlaying = false; |
||||
|
this._that.isPaused = true; |
||||
|
this._that.isStopped = false; |
||||
|
cancelAnimationFrame(this._that._timer); |
||||
|
} |
||||
|
|
||||
|
// 停止播放巡航动画
|
||||
|
handleStop() { |
||||
|
this._that.isPlaying = false; |
||||
|
this._that.isPaused = false; |
||||
|
this._that.isStopped = true; |
||||
|
this._that._lastFrameAt = 0; |
||||
|
this._that.elapsedMs = 0; |
||||
|
cancelAnimationFrame(this._that._timer); |
||||
|
this._that._renderDevice(); |
||||
|
this._that.timelyData = {}; |
||||
|
} |
||||
|
|
||||
|
clear() { |
||||
|
if (!this._that._map) return; |
||||
|
|
||||
|
this._that.handleStop(); |
||||
|
this._that._clearDevice(); |
||||
|
this._that._reset(); |
||||
|
this._that._dataSource = {}; |
||||
|
this._that.timelyData = {}; |
||||
|
} |
||||
|
|
||||
|
destroy() { |
||||
|
this._that.clear(); |
||||
|
this._that._timer = null; |
||||
|
this._that._map = null; |
||||
|
this._that.initStyle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new DeviceCruise(); |
||||
@ -0,0 +1,17 @@ |
|||||
|
/** |
||||
|
* 障碍物助手 |
||||
|
*/ |
||||
|
import obstacleRenderer from './obstacleRenderer'; |
||||
|
import blockObstacleRenderer from './blockObstacleRenderer'; |
||||
|
|
||||
|
class ObstacleHelper { |
||||
|
static obstacleRenderer = obstacleRenderer; |
||||
|
|
||||
|
static blockObstacleRenderer = blockObstacleRenderer; |
||||
|
|
||||
|
static setMap(map) { |
||||
|
obstacleRenderer.setMap(map); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default ObstacleHelper; |
||||
@ -0,0 +1,31 @@ |
|||||
|
/** |
||||
|
* 地块障碍物 |
||||
|
*/ |
||||
|
import ShapeRenderer from '../ShapeRenderer'; |
||||
|
|
||||
|
class BlockObstacleRenderer extends ShapeRenderer { |
||||
|
_defaultOptions = { |
||||
|
showFill: true, |
||||
|
showStroke: false, |
||||
|
showLabel: true, |
||||
|
showLabelOnOver: true, |
||||
|
}; |
||||
|
|
||||
|
_defaultStyle = { |
||||
|
fillColor: 'rgba(255, 0, 0, 0.2)', |
||||
|
fillHoverColor: 'rgba(255, 0, 0, 0.8)', |
||||
|
strokeColor: 'rgba(255, 0, 0, 0.5)', |
||||
|
strokeHoverColor: 'rgba(255, 0, 0, 1)', |
||||
|
labelColor: 'rgba(0, 0, 0, 1)', |
||||
|
labelStrokeColor: 'rgba(255, 255, 255, 1)', |
||||
|
labelMinZoom: 3, |
||||
|
}; |
||||
|
|
||||
|
constructor() { |
||||
|
super('block-obstacle'); |
||||
|
this.updateOptions(); |
||||
|
this.updateStyle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new BlockObstacleRenderer(); |
||||
@ -0,0 +1,31 @@ |
|||||
|
/** |
||||
|
* 所有障碍物 |
||||
|
*/ |
||||
|
import ShapeRenderer from '../ShapeRenderer'; |
||||
|
|
||||
|
class ObstacleRenderer extends ShapeRenderer { |
||||
|
_defaultOptions = { |
||||
|
showFill: true, |
||||
|
showStroke: false, |
||||
|
showLabel: true, |
||||
|
showLabelOnOver: true, |
||||
|
}; |
||||
|
|
||||
|
_defaultStyle = { |
||||
|
fillColor: 'rgba(255, 0, 0, 0.2)', |
||||
|
fillHoverColor: 'rgba(255, 0, 0, 0.8)', |
||||
|
strokeColor: 'rgba(255, 0, 0, 0.5)', |
||||
|
strokeHoverColor: 'rgba(255, 0, 0, 1)', |
||||
|
labelColor: 'rgba(0, 0, 0, 1)', |
||||
|
labelStrokeColor: 'rgba(255, 255, 255, 1)', |
||||
|
labelMinZoom: 3, |
||||
|
}; |
||||
|
|
||||
|
constructor() { |
||||
|
super('obstacle'); |
||||
|
this.updateOptions(); |
||||
|
this.updateStyle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new ObstacleRenderer(); |
||||
@ -0,0 +1,443 @@ |
|||||
|
/** |
||||
|
* 多轨迹在地图上显示 |
||||
|
*/ |
||||
|
import { action, computed, makeObservable, observable, reaction } from 'mobx'; |
||||
|
import mapbox from 'mapbox-gl'; |
||||
|
import * as turf from '@turf/turf'; |
||||
|
import EventDispatcher from './EventDispatcher'; |
||||
|
|
||||
|
const SOURCE_RUNNING_TRACK_LINE = 'running-track-line-source'; |
||||
|
const LAYER_RUNNING_TRACK_LINE = 'running-track-line-layer'; |
||||
|
const SOURCE_WORKING_TRACK_LINE = 'running-working-line-source'; |
||||
|
const LAYER_WORKING_TRACK_LINE = 'running-working-line-layer'; |
||||
|
const SOURCE_START_TRACK_POINT = 'start-track-point-source'; |
||||
|
const LAYER_START_TRACK_POINT = 'start-track-point-layer'; |
||||
|
const SOURCE_END_TRACK_POINT = 'end-track-point-source'; |
||||
|
const LAYER_END_TRACK_POINT = 'end-track-point-layer'; |
||||
|
|
||||
|
class TrackRenderer extends EventDispatcher { |
||||
|
// 地图实例
|
||||
|
_map = null; |
||||
|
|
||||
|
// 轨迹容器
|
||||
|
_tracksStore = []; |
||||
|
|
||||
|
// 每条轨迹唯一键
|
||||
|
_trackKey = 'id'; |
||||
|
|
||||
|
// 鼠标经过的轨迹id
|
||||
|
_hoveredId = null; |
||||
|
|
||||
|
// 鼠标经过显示的气泡框
|
||||
|
_popup = new mapbox.Popup({ closeButton: false }); |
||||
|
|
||||
|
// 以回调形式获取popup显示内容
|
||||
|
_getPopupHtml = () => 'Nothing'; |
||||
|
|
||||
|
// 显示配置项
|
||||
|
_defaultOptions = { |
||||
|
// 最小显示级别
|
||||
|
minZoom: 3, |
||||
|
// 显示端点
|
||||
|
showEndpoint: true, |
||||
|
// 显示作业轨迹
|
||||
|
showWorkingTrack: true, |
||||
|
// 显示行驶轨迹
|
||||
|
showRunningTrack: true, |
||||
|
// 显示气泡框
|
||||
|
showPopup: false, |
||||
|
}; |
||||
|
|
||||
|
_options = {}; |
||||
|
|
||||
|
// 视觉样式
|
||||
|
_defaultStyle = { |
||||
|
startPointColor: 'rgba(0,0,255,0.8)', |
||||
|
endPointColor: 'rgba(0,255,0,0.8)', |
||||
|
pointStrokeColor: '#ffffff', |
||||
|
runningTrackColor: 'rgba(255,255,255,0.3)', |
||||
|
runningTrackHoverColor: 'rgba(255,255,255,0.8)', |
||||
|
workingTrackColor: 'rgba(255,0,0,0.3)', |
||||
|
workingTrackHoverColor: 'rgba(255,0,0,0.6)', |
||||
|
}; |
||||
|
|
||||
|
_style = {}; |
||||
|
|
||||
|
// 所有轨迹起始点
|
||||
|
get _startPointsFeature() { |
||||
|
if (!this._options.showEndpoint) return turf.featureCollection([]); |
||||
|
|
||||
|
const positions = this._tracksStore.map(({ points }) => { |
||||
|
const [{ lng, lat }] = points; |
||||
|
return [lng, lat]; |
||||
|
}); |
||||
|
return turf.multiPoint(positions); |
||||
|
} |
||||
|
|
||||
|
// 所有轨迹结束点
|
||||
|
get _endPointsFeature() { |
||||
|
if (!this._options.showEndpoint) return turf.featureCollection([]); |
||||
|
|
||||
|
const positions = this._tracksStore.map(({ points }) => { |
||||
|
const { lng, lat } = points[points.length - 1]; |
||||
|
return [lng, lat]; |
||||
|
}); |
||||
|
return turf.multiPoint(positions); |
||||
|
} |
||||
|
|
||||
|
// 行驶轨迹集合
|
||||
|
get _runningTrackFeatureCollection() { |
||||
|
if (!this._options.showRunningTrack) return turf.featureCollection([]); |
||||
|
|
||||
|
const features = this._tracksStore.map(detail => { |
||||
|
const { points, [this._trackKey]: id, ...others } = detail; |
||||
|
const positions = points.map(({ lng, lat }) => ([lng, lat])); |
||||
|
return turf.lineString(positions, { id, ...others }, { id }); |
||||
|
}); |
||||
|
return turf.featureCollection(features); |
||||
|
} |
||||
|
|
||||
|
// 作业轨迹集合
|
||||
|
get _workingTrackFeatureCollection() { |
||||
|
if (!this._options.showWorkingTrack) return turf.featureCollection([]); |
||||
|
|
||||
|
const features = this._tracksStore.map(({ points, [this._trackKey]: id }) => { |
||||
|
const segments = TrackRenderer.pickWorkingTrackSegments(points); |
||||
|
return turf.multiLineString(segments, {}, { id }); |
||||
|
}); |
||||
|
return turf.featureCollection(features); |
||||
|
} |
||||
|
|
||||
|
// 限位框
|
||||
|
get _boundingBox() { |
||||
|
return turf.bbox(this._runningTrackFeatureCollection); |
||||
|
} |
||||
|
|
||||
|
// 拾取某个轨迹里的各个作业片段
|
||||
|
static pickWorkingTrackSegments(trackPoints) { |
||||
|
const result = []; |
||||
|
let segment = []; |
||||
|
trackPoints.forEach(({ lng, lat, flowSpeed }) => { |
||||
|
if (flowSpeed > 0) { |
||||
|
segment.push([lng, lat]); |
||||
|
} else { |
||||
|
if (segment.length >= 2) { |
||||
|
result.push(segment); |
||||
|
} |
||||
|
segment = []; |
||||
|
} |
||||
|
}); |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
constructor() { |
||||
|
super(['rendered']); |
||||
|
|
||||
|
this.initOptions(); |
||||
|
this.initStyle(); |
||||
|
|
||||
|
makeObservable(this, { |
||||
|
_tracksStore: observable, |
||||
|
_startPointsFeature: computed, |
||||
|
_endPointsFeature: computed, |
||||
|
_runningTrackFeatureCollection: computed, |
||||
|
_workingTrackFeatureCollection: computed, |
||||
|
loadTracks: action, |
||||
|
destroy: action, |
||||
|
}); |
||||
|
|
||||
|
reaction(() => this._tracksStore, () => { |
||||
|
if (this._tracksStore.length) { |
||||
|
this._render(); |
||||
|
} else { |
||||
|
this._clear(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 初始化配置（需在loadTracks之前配置）
|
||||
|
initOptions(options = {}) { |
||||
|
this._options = { |
||||
|
...this._defaultOptions, |
||||
|
...options, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 初始化视觉演示（需在loadTracks之前配置）
|
||||
|
initStyle(style = {}) { |
||||
|
this._style = { |
||||
|
...this._defaultStyle, |
||||
|
...style, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 设置地图实例
|
||||
|
setMap(mapInstance) { |
||||
|
if (this._map === mapInstance) return; |
||||
|
if (!(mapInstance instanceof mapbox.Map)) { |
||||
|
throw new Error('必须传入一个mapbox地图实例'); |
||||
|
} |
||||
|
this._map = mapInstance; |
||||
|
} |
||||
|
|
||||
|
// 载入轨迹数据
|
||||
|
loadTracks(list, trackKey = 'id') { |
||||
|
if (!this._map) { |
||||
|
throw new Error('请先设置地图实例'); |
||||
|
} |
||||
|
// list = [{ id: 123, points: [{ lng, lat, yaw, flowSpeed }] }];
|
||||
|
this._tracksStore = (list || []).slice(); |
||||
|
this._trackKey = trackKey; |
||||
|
} |
||||
|
|
||||
|
// 设置气泡框显示内容回调
|
||||
|
setPopupContentCallback(callback) { |
||||
|
if (typeof callback !== 'function') { |
||||
|
throw new Error('入参必须是一个函数'); |
||||
|
} |
||||
|
this._getPopupHtml = callback; |
||||
|
} |
||||
|
|
||||
|
_render() { |
||||
|
if (this._options.showRunningTrack) this._renderRunningTrack(); |
||||
|
if (this._options.showWorkingTrack) this._renderWorkingTrack(); |
||||
|
if (this._options.showRunningTrack) { |
||||
|
this._renderStartPoint(); |
||||
|
this._renderEndPoint(); |
||||
|
} |
||||
|
this._trigger('rendered'); |
||||
|
} |
||||
|
|
||||
|
_renderStartPoint() { |
||||
|
const source = this._map.getSource(SOURCE_START_TRACK_POINT); |
||||
|
if (!source) { |
||||
|
this._map.addSource(SOURCE_START_TRACK_POINT, { |
||||
|
type: 'geojson', |
||||
|
data: this._startPointsFeature, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: LAYER_START_TRACK_POINT, |
||||
|
type: 'circle', |
||||
|
source: SOURCE_START_TRACK_POINT, |
||||
|
paint: { |
||||
|
'circle-radius': 4, |
||||
|
'circle-color': this._style.startPointColor, |
||||
|
'circle-stroke-width': 1, |
||||
|
'circle-stroke-color': this._style.pointStrokeColor, |
||||
|
'circle-stroke-opacity': 0.6, |
||||
|
'circle-opacity': [ |
||||
|
'interpolate', ['linear'], |
||||
|
['zoom'], |
||||
|
this._options.minZoom - 0.01, 0, |
||||
|
this._options.minZoom, 1, |
||||
|
], |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
source.setData(this._startPointsFeature); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_renderEndPoint() { |
||||
|
const source = this._map.getSource(SOURCE_END_TRACK_POINT); |
||||
|
if (!source) { |
||||
|
this._map.addSource(SOURCE_END_TRACK_POINT, { |
||||
|
type: 'geojson', |
||||
|
data: this._endPointsFeature, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: LAYER_END_TRACK_POINT, |
||||
|
type: 'circle', |
||||
|
source: SOURCE_END_TRACK_POINT, |
||||
|
paint: { |
||||
|
'circle-radius': 4, |
||||
|
'circle-color': this._style.endPointColor, |
||||
|
'circle-stroke-width': 1, |
||||
|
'circle-stroke-color': this._style.pointStrokeColor, |
||||
|
'circle-stroke-opacity': 0.6, |
||||
|
'circle-opacity': [ |
||||
|
'interpolate', ['linear'], |
||||
|
['zoom'], |
||||
|
this._options.minZoom - 0.01, 0, |
||||
|
this._options.minZoom, 1, |
||||
|
], |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
source.setData(this._endPointsFeature); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_renderRunningTrack() { |
||||
|
const source = this._map.getSource(SOURCE_RUNNING_TRACK_LINE); |
||||
|
if (!source) { |
||||
|
this._map.addSource(SOURCE_RUNNING_TRACK_LINE, { |
||||
|
type: 'geojson', |
||||
|
data: this._runningTrackFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: LAYER_RUNNING_TRACK_LINE, |
||||
|
type: 'line', |
||||
|
source: SOURCE_RUNNING_TRACK_LINE, |
||||
|
paint: { |
||||
|
'line-color': [ |
||||
|
'case', |
||||
|
['boolean', ['feature-state', 'hover'], false], |
||||
|
this._style.runningTrackHoverColor, |
||||
|
this._style.runningTrackColor, |
||||
|
], |
||||
|
'line-width': 3, |
||||
|
'line-opacity': [ |
||||
|
'interpolate', ['linear'], |
||||
|
['zoom'], |
||||
|
this._options.minZoom - 0.01, 0, |
||||
|
this._options.minZoom, 1, |
||||
|
], |
||||
|
}, |
||||
|
layout: { |
||||
|
'line-cap': 'round', |
||||
|
'line-join': 'round', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
this._map.on('mousemove', LAYER_RUNNING_TRACK_LINE, this._onMouseMove); |
||||
|
this._map.on('mouseleave', LAYER_RUNNING_TRACK_LINE, this._onMouseLeave); |
||||
|
this._map.on('click', LAYER_RUNNING_TRACK_LINE, this._onClick); |
||||
|
} else { |
||||
|
source.setData(this._runningTrackFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_renderWorkingTrack() { |
||||
|
const source = this._map.getSource(SOURCE_WORKING_TRACK_LINE); |
||||
|
if (!source) { |
||||
|
this._map.addSource(SOURCE_WORKING_TRACK_LINE, { |
||||
|
type: 'geojson', |
||||
|
data: this._workingTrackFeatureCollection, |
||||
|
}); |
||||
|
|
||||
|
this._map.addLayer({ |
||||
|
id: LAYER_WORKING_TRACK_LINE, |
||||
|
type: 'line', |
||||
|
source: SOURCE_WORKING_TRACK_LINE, |
||||
|
paint: { |
||||
|
'line-color': [ |
||||
|
'case', |
||||
|
['boolean', ['feature-state', 'hover'], false], |
||||
|
this._style.workingTrackHoverColor, |
||||
|
this._style.workingTrackColor, |
||||
|
], |
||||
|
'line-width': 6, |
||||
|
'line-opacity': [ |
||||
|
'interpolate', ['linear'], |
||||
|
['zoom'], |
||||
|
this._options.minZoom - 0.01, 0, |
||||
|
this._options.minZoom, 1, |
||||
|
], |
||||
|
}, |
||||
|
layout: { |
||||
|
'line-cap': 'round', |
||||
|
'line-join': 'round', |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
source.setData(this._workingTrackFeatureCollection); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
_onMouseMove = e => { |
||||
|
if (this._map.getZoom() < this._options.minZoom) return; |
||||
|
this._map.getCanvas().style.cursor = 'pointer'; |
||||
|
if (e.features.length > 0) { |
||||
|
if (this._hoveredId !== null) { |
||||
|
const id = this._hoveredId; |
||||
|
if (this._options.showRunningTrack) this._map.setFeatureState({ source: SOURCE_RUNNING_TRACK_LINE, id }, { hover: false }); |
||||
|
if (this._options.showWorkingTrack) this._map.setFeatureState({ source: SOURCE_WORKING_TRACK_LINE, id }, { hover: false }); |
||||
|
} |
||||
|
const [{ id }] = e.features; |
||||
|
if (this._options.showRunningTrack) this._map.setFeatureState({ source: SOURCE_RUNNING_TRACK_LINE, id }, { hover: true }); |
||||
|
if (this._options.showWorkingTrack) this._map.setFeatureState({ source: SOURCE_WORKING_TRACK_LINE, id }, { hover: true }); |
||||
|
this._hoveredId = id; |
||||
|
} |
||||
|
if (this._options.showPopup) { |
||||
|
const [{ properties: detail }] = e.features; |
||||
|
this._popup.setLngLat(e.lngLat).setHTML(this._getPopupHtml(detail)).addTo(this._map); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
_onMouseLeave = () => { |
||||
|
if (this._map.getZoom() < this._options.minZoom) return; |
||||
|
this._map.getCanvas().style.cursor = ''; |
||||
|
if (this._hoveredId !== null) { |
||||
|
if (this._options.showRunningTrack) this._map.setFeatureState({ source: SOURCE_RUNNING_TRACK_LINE, id: this._hoveredId }, { hover: false }); |
||||
|
if (this._options.showWorkingTrack) this._map.setFeatureState({ source: SOURCE_WORKING_TRACK_LINE, id: this._hoveredId }, { hover: false }); |
||||
|
} |
||||
|
this._hoveredId = null; |
||||
|
if (this._options.showPopup) { |
||||
|
this._popup.remove(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
_onClick = e => { |
||||
|
if (this._map.getZoom() < this._options.minZoom) return; |
||||
|
if (!e.features.length) return; |
||||
|
const [{ properties: detail }] = e.features; |
||||
|
const { points } = this._tracksStore.find(({ [this._trackKey]: key }) => key === detail.id) || {}; |
||||
|
this._trigger('click', { ...detail, points: (points || []).map(item => ({ ...item })) }); |
||||
|
}; |
||||
|
|
||||
|
// 缩放到所有轨迹总边界
|
||||
|
fitView({ top = 0, bottom = 0, left = 0, right = 0 } = {}, cut = 120) { |
||||
|
if (!this._tracksStore.length) return; |
||||
|
this._map.setPadding({ top: 0, bottom: 0, left: 0, right: 0 }); |
||||
|
this._map.fitBounds(this._boundingBox, { |
||||
|
duration: 2000, |
||||
|
padding: { |
||||
|
top: top + cut, |
||||
|
bottom: bottom + cut, |
||||
|
left: left + cut, |
||||
|
right: right + cut, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
_clear() { |
||||
|
if (!this._map) return; |
||||
|
if (this._map.getSource(SOURCE_RUNNING_TRACK_LINE)) { |
||||
|
this._map.off('mousemove', LAYER_RUNNING_TRACK_LINE, this._onMouseMove); |
||||
|
this._map.off('mouseleave', LAYER_RUNNING_TRACK_LINE, this._onMouseLeave); |
||||
|
this._map.off('click', LAYER_RUNNING_TRACK_LINE, this._onClick); |
||||
|
this._map.removeLayer(LAYER_RUNNING_TRACK_LINE); |
||||
|
this._map.removeSource(SOURCE_RUNNING_TRACK_LINE); |
||||
|
} |
||||
|
if (this._map.getSource(SOURCE_WORKING_TRACK_LINE)) { |
||||
|
this._map.removeLayer(LAYER_WORKING_TRACK_LINE); |
||||
|
this._map.removeSource(SOURCE_WORKING_TRACK_LINE); |
||||
|
} |
||||
|
if (this._map.getSource(SOURCE_START_TRACK_POINT)) { |
||||
|
this._map.removeLayer(LAYER_START_TRACK_POINT); |
||||
|
this._map.removeSource(SOURCE_START_TRACK_POINT); |
||||
|
} |
||||
|
if (this._map.getSource(SOURCE_END_TRACK_POINT)) { |
||||
|
this._map.removeLayer(LAYER_END_TRACK_POINT); |
||||
|
this._map.removeSource(SOURCE_END_TRACK_POINT); |
||||
|
} |
||||
|
if (this._options.showPopup) { |
||||
|
this._popup.remove(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
destroy() { |
||||
|
this._clear(); |
||||
|
this._map = null; |
||||
|
this._tracksStore = []; |
||||
|
this._getPopupHtml = () => 'Nothing'; |
||||
|
this.initOptions(); |
||||
|
this.initStyle(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default new TrackRenderer(); |
||||
@ -0,0 +1,108 @@ |
|||||
|
<script setup> |
||||
|
// import BasePanel from '@/components/BasePanel.vue'; |
||||
|
import Player from 'xgplayer'; |
||||
|
import 'xgplayer/dist/index.min.css'; |
||||
|
// import LivePreset from 'xgplayer/es/presets/live'; |
||||
|
import HlsPlugin from 'xgplayer-hls'; |
||||
|
import { onMounted, ref, onUnmounted } from 'vue'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
import { useLiveStore } from '@/stores'; |
||||
|
|
||||
|
const liveStore = useLiveStore(); |
||||
|
const { liveUrl } = storeToRefs(liveStore); |
||||
|
|
||||
|
console.log(liveUrl); |
||||
|
|
||||
|
// console.log(liveUrl); |
||||
|
|
||||
|
const visible = ref(false); |
||||
|
|
||||
|
const playerRef = ref(); |
||||
|
|
||||
|
const player = ref(); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const options = { |
||||
|
// id: 'player', |
||||
|
el: playerRef.value, |
||||
|
url: '', // 替换为你的 HLS 流地址 |
||||
|
// url: 'http://pull.jiagutech.com/sgcloud/1736050936087842816.m3u8', // 替换为你的 HLS 流地址 |
||||
|
// url: 'http://pull.jiagutech.com/live/test.m3u8', // 替换为你的 HLS 流地址 |
||||
|
type: 'hls', |
||||
|
ignores: ['progress', 'time', 'playbackrate', 'pip'], |
||||
|
// fluid: true, |
||||
|
autoplayMuted: false, |
||||
|
autoplay: false, |
||||
|
plugins: [HlsPlugin], |
||||
|
lang: 'zh', |
||||
|
width: '100%', |
||||
|
height: '100%', |
||||
|
}; |
||||
|
player.value = new Player(options); |
||||
|
|
||||
|
eventBus.on('show-live-dialog', () => { |
||||
|
if (player.value) { |
||||
|
// player.value.resetState(); |
||||
|
player.value.playNext({ |
||||
|
url: liveUrl.value?.m3u8Url, |
||||
|
autoplayMuted: true, |
||||
|
autoplay: true, |
||||
|
}); |
||||
|
} |
||||
|
visible.value = true; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
if (player.value) player.value.destroy(); |
||||
|
eventBus.off('show-live-dialog'); |
||||
|
}); |
||||
|
|
||||
|
function onCancel() { |
||||
|
// |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-dialog |
||||
|
:class="s.root" |
||||
|
v-model:visible="visible" |
||||
|
mode="full-screen" |
||||
|
:footer="null" |
||||
|
@closed="onCancel" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div style="flex: 1; text-align: center;">直播</div> |
||||
|
</template> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div ref="playerRef" /> |
||||
|
</div> |
||||
|
</t-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
:global { |
||||
|
.container { |
||||
|
height: 100%; |
||||
|
border-radius: var(--td-radius-medium); |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
|
||||
|
.video-player { |
||||
|
flex: 1; |
||||
|
margin-left: var(--td-comp-margin-s); |
||||
|
margin-top: var(--td-comp-margin-s); |
||||
|
border-radius: var(--td-radius-medium); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.t-dialog__position_fullscreen { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,105 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, onUnmounted, ref } from 'vue'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
import { useAuthStore } from '@/stores'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
// import ImageUploader from '@/components/ImageUploader.vue'; |
||||
|
// import { update } from '@/utils/helpers'; |
||||
|
|
||||
|
const visible = ref(false); |
||||
|
|
||||
|
const authStore = useAuthStore(); |
||||
|
const { userInfo } = storeToRefs(authStore); |
||||
|
const { updatePassword } = authStore; |
||||
|
|
||||
|
const form = ref(); |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
phone: undefined, |
||||
|
oldPassword: undefined, |
||||
|
newPassword: undefined, |
||||
|
}); |
||||
|
|
||||
|
const FORM_RULES = { |
||||
|
phone: [{ required: true, message: '请输入' }], |
||||
|
oldPassword: [{ required: true, message: '请输入原密码' }], |
||||
|
newPassword: [{ required: true, message: '请输入新密码' }], |
||||
|
}; |
||||
|
|
||||
|
function onCancel() { |
||||
|
visible.value = false; |
||||
|
form.value.reset(); |
||||
|
} |
||||
|
|
||||
|
function onSubmit({ validateResult }) { |
||||
|
if (validateResult === true) { |
||||
|
updatePassword(formData.value).then(() => { |
||||
|
MessagePlugin.success('更改成功'); |
||||
|
onCancel(); |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-change-password', () => { |
||||
|
formData.value.id = userInfo.value.id; |
||||
|
formData.value.phone = userInfo.value.phone; |
||||
|
visible.value = true; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-change-password'); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-dialog |
||||
|
:class="s.root" |
||||
|
v-model:visible="visible" |
||||
|
:close-btn="false" |
||||
|
:footer="null" |
||||
|
@closed="onCancel" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div style="flex: 1; text-align: center;">更改密码</div> |
||||
|
</template> |
||||
|
<t-form |
||||
|
ref="form" |
||||
|
:data="formData" |
||||
|
:rules="FORM_RULES" |
||||
|
colon |
||||
|
@submit="onSubmit" |
||||
|
> |
||||
|
<t-form-item name="id" v-show="false" /> |
||||
|
|
||||
|
<t-form-item label="手机号" name="phone"> |
||||
|
<t-input v-model="formData.phone" disabled /> |
||||
|
</t-form-item> |
||||
|
|
||||
|
<t-form-item label="原密码" name="oldPassword"> |
||||
|
<t-input v-model="formData.oldPassword" /> |
||||
|
</t-form-item> |
||||
|
|
||||
|
<t-form-item label="新密码" name="newPassword"> |
||||
|
<t-input v-model="formData.newPassword" /> |
||||
|
</t-form-item> |
||||
|
|
||||
|
<t-form-item> |
||||
|
<t-space> |
||||
|
<t-button theme="primary" type="submit">提交</t-button> |
||||
|
<t-button theme="default" @click="onCancel">取消</t-button> |
||||
|
</t-space> |
||||
|
</t-form-item> |
||||
|
</t-form> |
||||
|
</t-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,111 @@ |
|||||
|
/** |
||||
|
* 成果管理 |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '@/utils/http'; |
||||
|
import * as urls from '@/config/urls'; |
||||
|
import * as helpers from '@/utils/helpers'; |
||||
|
|
||||
|
export const useAchievementStore = defineStore('achievement', () => { |
||||
|
const achievementList = ref([]); |
||||
|
const achievementExtra = ref({ total: null }); |
||||
|
const achievementQueries = ref({ page: 1, pageSize: 10 }); |
||||
|
|
||||
|
// const achievementDetail = ref({});
|
||||
|
|
||||
|
function getAchievementList(otherQueries = {}) { |
||||
|
return http.getInstance().get(urls.GET_ACHIEVEMENT_LIST, { |
||||
|
params: { ...achievementQueries.value, ...otherQueries }, |
||||
|
}).then(({ data }) => { |
||||
|
const { data: list, extra } = data; |
||||
|
achievementList.value = list || []; |
||||
|
achievementExtra.value = { ...achievementExtra.value, ...(extra || {}) }; |
||||
|
achievementQueries.value = { ...achievementQueries.value, ...otherQueries }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// function getAchievementDetail(achievementId = '') {
|
||||
|
// const url = helpers.buildURL(urls.GET_SORTIE_DETAIL, achievementId);
|
||||
|
// return http.getInstance().get(url).then(({ data }) => {
|
||||
|
// const { data: detail } = data || {};
|
||||
|
// achievementDetail.value = detail;
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
function createAchievementShareCode(formData = {}, { refreshList = false } = {}) { |
||||
|
const reqData = helpers.pick(formData, [ |
||||
|
'ids', |
||||
|
]); |
||||
|
|
||||
|
return http.getInstance().post(urls.CREATE_ACHIEVEMENT_SHARE_CODE, reqData).then(({ data }) => { |
||||
|
if (refreshList) getAchievementList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function bindingAchievement(formData = {}, { refreshList = false } = {}) { |
||||
|
const reqData = helpers.pick(formData, [ |
||||
|
'id', |
||||
|
]); |
||||
|
const url = helpers.buildURL(urls.BINDING_ACHIEVEMENT, reqData.id); |
||||
|
return http.getInstance().post(url).then(({ data }) => { |
||||
|
if (refreshList) getAchievementList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
//
|
||||
|
// function updateAchievement(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// 'manufacturerId',
|
||||
|
// 'sn',
|
||||
|
// 'type',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE, reqData.id);
|
||||
|
// return http.getInstance().put(url, reqData).then(({ data }) => {
|
||||
|
// if (refreshList) getAchievementList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function deleteAchievement(achievementId = '', { refreshList = false } = {}) {
|
||||
|
// const url = helpers.buildURL(urls.DELETE_SORTIE, achievementId);
|
||||
|
// return http.getInstance().delete(url).then(({ data }) => {
|
||||
|
// if (refreshList) getAchievementList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function updateAchievementState(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE_LOCKED, reqData.id);
|
||||
|
// return http.getInstance().put(url).then(({ data }) => {
|
||||
|
// if (refreshList) getAchievementList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
return { |
||||
|
achievementList, |
||||
|
achievementQueries, |
||||
|
achievementExtra, |
||||
|
// achievementDetail,
|
||||
|
getAchievementList, |
||||
|
// createAchievement,
|
||||
|
// updateAchievement,
|
||||
|
// deleteAchievement,
|
||||
|
// updateAchievementState,
|
||||
|
// getAchievementDetail,
|
||||
|
createAchievementShareCode, |
||||
|
bindingAchievement, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
export default null; |
||||
@ -0,0 +1,100 @@ |
|||||
|
/** |
||||
|
* 设备管理 |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '@/utils/http'; |
||||
|
import * as urls from '@/config/urls'; |
||||
|
import * as helpers from '@/utils/helpers'; |
||||
|
|
||||
|
export const useDeviceStore = defineStore('device', () => { |
||||
|
const deviceList = ref([]); |
||||
|
const deviceExtra = ref({ total: null }); |
||||
|
const deviceQueries = ref({ page: 1, pageSize: 10, all: undefined, type: undefined, search: undefined }); |
||||
|
|
||||
|
const deviceDetail = ref({}); |
||||
|
|
||||
|
function getDeviceList(otherQueries = {}) { |
||||
|
return http.getInstance().get(urls.GET_DEVICE_LIST, { |
||||
|
params: { ...deviceQueries.value, ...otherQueries }, |
||||
|
}).then(({ data }) => { |
||||
|
const { data: list, extra } = data; |
||||
|
deviceList.value = list || []; |
||||
|
deviceExtra.value = { ...deviceExtra.value, ...(extra || {}) }; |
||||
|
deviceQueries.value = { ...deviceQueries.value, ...otherQueries }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getDeviceDetail(deviceId = '') { |
||||
|
const url = helpers.buildURL(urls.GET_DEVICE_DETAIL, deviceId); |
||||
|
return http.getInstance().get(url).then(({ data }) => { |
||||
|
const { data: detail } = data || {}; |
||||
|
deviceDetail.value = detail; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function createDevice(formData = {}, { refreshList = false } = {}) { |
||||
|
const reqData = helpers.pick(formData, [ |
||||
|
'manufacturerId', |
||||
|
'sn', |
||||
|
'type', |
||||
|
]); |
||||
|
|
||||
|
return http.getInstance().post(urls.CREATE_DEVICE, reqData).then(({ data }) => { |
||||
|
if (refreshList) getDeviceList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function updateDevice(formData = {}, { refreshList = false } = {}) { |
||||
|
const reqData = helpers.pick(formData, [ |
||||
|
'id', |
||||
|
'manufacturerId', |
||||
|
'sn', |
||||
|
'type', |
||||
|
]); |
||||
|
|
||||
|
const url = helpers.buildURL(urls.UPDATE_DEVICE, reqData.id); |
||||
|
return http.getInstance().put(url, reqData).then(({ data }) => { |
||||
|
if (refreshList) getDeviceList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function deleteDevice(deviceId = '', { refreshList = false } = {}) { |
||||
|
const url = helpers.buildURL(urls.DELETE_DEVICE, deviceId); |
||||
|
return http.getInstance().delete(url).then(({ data }) => { |
||||
|
if (refreshList) getDeviceList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function updateDeviceState(formData = {}, { refreshList = false } = {}) { |
||||
|
const reqData = helpers.pick(formData, [ |
||||
|
'id', |
||||
|
]); |
||||
|
|
||||
|
const url = helpers.buildURL(urls.UPDATE_DEVICE_LOCKED, reqData.id); |
||||
|
return http.getInstance().put(url).then(({ data }) => { |
||||
|
if (refreshList) getDeviceList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
deviceList, |
||||
|
deviceQueries, |
||||
|
deviceExtra, |
||||
|
deviceDetail, |
||||
|
getDeviceList, |
||||
|
createDevice, |
||||
|
updateDevice, |
||||
|
deleteDevice, |
||||
|
updateDeviceState, |
||||
|
getDeviceDetail, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
export default null; |
||||
@ -0,0 +1,110 @@ |
|||||
|
/** |
||||
|
* 直播 |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '@/utils/http'; |
||||
|
import * as urls from '@/config/urls'; |
||||
|
import * as helpers from '@/utils/helpers'; |
||||
|
|
||||
|
export const useLiveStore = defineStore('live', () => { |
||||
|
const liveUrl = ref({}); |
||||
|
const liveQueries = ref({ id: undefined }); |
||||
|
|
||||
|
function getLiveUrl(otherQueries = {}) { |
||||
|
const url = helpers.buildURL(urls.GET_PULL_STREAM_URL, otherQueries.id); |
||||
|
return http.getInstance().get(url, { |
||||
|
params: { ...liveQueries.value, ...otherQueries }, |
||||
|
}).then(({ data }) => { |
||||
|
const { data: Urls } = data; |
||||
|
liveUrl.value = Urls || {}; |
||||
|
// liveExtra.value = { ...liveExtra.value, ...(extra || {}) };
|
||||
|
liveQueries.value = { ...liveQueries.value, ...otherQueries }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// function getLiveDetail(liveId = '') {
|
||||
|
// const url = helpers.buildURL(urls.GET_SORTIE_DETAIL, liveId);
|
||||
|
// return http.getInstance().get(url).then(({ data }) => {
|
||||
|
// const { data: detail } = data || {};
|
||||
|
// liveDetail.value = detail;
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
// function createLiveShareCode(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'ids',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// return http.getInstance().post(urls.CREATE_ACHIEVEMENT_SHARE_CODE, reqData).then(({ data }) => {
|
||||
|
// if (refreshList) getLiveList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
// function bindingLive(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// ]);
|
||||
|
// const url = helpers.buildURL(urls.BINDING_ACHIEVEMENT, reqData.id);
|
||||
|
// return http.getInstance().post(url).then(({ data }) => {
|
||||
|
// if (refreshList) getLiveList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function updateLive(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// 'manufacturerId',
|
||||
|
// 'sn',
|
||||
|
// 'type',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE, reqData.id);
|
||||
|
// return http.getInstance().put(url, reqData).then(({ data }) => {
|
||||
|
// if (refreshList) getLiveList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function deleteLive(liveId = '', { refreshList = false } = {}) {
|
||||
|
// const url = helpers.buildURL(urls.DELETE_SORTIE, liveId);
|
||||
|
// return http.getInstance().delete(url).then(({ data }) => {
|
||||
|
// if (refreshList) getLiveList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function updateLiveState(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE_LOCKED, reqData.id);
|
||||
|
// return http.getInstance().put(url).then(({ data }) => {
|
||||
|
// if (refreshList) getLiveList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
return { |
||||
|
liveUrl, |
||||
|
liveQueries, |
||||
|
getLiveUrl, |
||||
|
// liveExtra,
|
||||
|
// liveDetail,
|
||||
|
// getLiveList,
|
||||
|
// createLive,
|
||||
|
// updateLive,
|
||||
|
// deleteLive,
|
||||
|
// updateLiveState,
|
||||
|
// getLiveDetail,
|
||||
|
// createLiveShareCode,
|
||||
|
// bindingLive,
|
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
export default null; |
||||
@ -0,0 +1,55 @@ |
|||||
|
/** |
||||
|
* 媒体管理 |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '@/utils/http'; |
||||
|
import * as urls from '@/config/urls'; |
||||
|
import * as helpers from '@/utils/helpers'; |
||||
|
|
||||
|
export const useMediaStore = defineStore('media', () => { |
||||
|
const mediaList = ref([]); |
||||
|
const mediaQueries = ref({ sortieId: undefined }); |
||||
|
|
||||
|
function getMediaList(sortieId = '') { |
||||
|
const id = sortieId || mediaQueries.value.sortieId; |
||||
|
const url = helpers.buildURL(urls.GET_MEDIA_LIST, id); |
||||
|
return http.getInstance().get(url).then(({ data }) => { |
||||
|
const { data: list } = data; |
||||
|
mediaList.value = list || []; |
||||
|
mediaQueries.value = { mediaId: sortieId || mediaQueries.value.sortieId }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function createMedia(formData = {}, { refreshList = false } = {}) { |
||||
|
const reqData = helpers.pick(formData, [ |
||||
|
'id', |
||||
|
'medias', |
||||
|
]); |
||||
|
|
||||
|
const url = helpers.buildURL(urls.CREATE_MEDIA, reqData.id); |
||||
|
return http.getInstance().post(url, reqData).then(({ data }) => { |
||||
|
if (refreshList) getMediaList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function deleteMedia(mediaId = '', { refreshList = false } = {}) { |
||||
|
const url = helpers.buildURL(urls.DELETE_MEDIA, mediaId); |
||||
|
return http.getInstance().delete(url).then(({ data }) => { |
||||
|
if (refreshList) getMediaList(); |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
mediaList, |
||||
|
mediaQueries, |
||||
|
getMediaList, |
||||
|
createMedia, |
||||
|
deleteMedia, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
export default null; |
||||
@ -0,0 +1,124 @@ |
|||||
|
/** |
||||
|
* 实时监控 |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import mapConfig from '@/config/map'; |
||||
|
import http from '@/utils/http'; |
||||
|
import * as urls from '@/config/urls'; |
||||
|
// import * as helpers from '@/utils/helpers';
|
||||
|
|
||||
|
export const useMonitorStore = defineStore('monitor', () => { |
||||
|
const mapOptions = ref({ |
||||
|
currentZoom: mapConfig.zoom, |
||||
|
currentCenter: mapConfig.center, |
||||
|
currentRange: { |
||||
|
maxLat: 67.332486, |
||||
|
maxLng: 135.227994, |
||||
|
minLat: 18.186979, |
||||
|
minLng: 49.880052, |
||||
|
}, |
||||
|
}); |
||||
|
const monitorList = ref([]); |
||||
|
const monitorExtra = ref({ total: null }); |
||||
|
const monitorQueries = ref({ }); |
||||
|
|
||||
|
// const monitorDetail = ref({});
|
||||
|
|
||||
|
function getMonitorList(otherQueries = {}) { |
||||
|
return http.getInstance().get(urls.GET_ONLINE_DEVICE, { |
||||
|
params: { ...monitorQueries.value, ...otherQueries }, |
||||
|
}).then(({ data }) => { |
||||
|
const { data: list, extra } = data; |
||||
|
monitorList.value = list || []; |
||||
|
monitorExtra.value = { ...monitorExtra.value, ...(extra || {}) }; |
||||
|
// monitorQueries.value = { ...monitorQueries.value, ...otherQueries };
|
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// function getMonitorDetail(monitorId = '') {
|
||||
|
// const url = helpers.buildURL(urls.GET_SORTIE_DETAIL, monitorId);
|
||||
|
// return http.getInstance().get(url).then(({ data }) => {
|
||||
|
// const { data: detail } = data || {};
|
||||
|
// monitorDetail.value = detail;
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
// function createMonitorShareCode(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'ids',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// return http.getInstance().post(urls.CREATE_ACHIEVEMENT_SHARE_CODE, reqData).then(({ data }) => {
|
||||
|
// if (refreshList) getMonitorList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function bindingMonitor(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// ]);
|
||||
|
// const url = helpers.buildURL(urls.BINDING_ACHIEVEMENT, reqData.id);
|
||||
|
// return http.getInstance().post(url).then(({ data }) => {
|
||||
|
// if (refreshList) getMonitorList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function updateMonitor(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// 'manufacturerId',
|
||||
|
// 'sn',
|
||||
|
// 'type',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE, reqData.id);
|
||||
|
// return http.getInstance().put(url, reqData).then(({ data }) => {
|
||||
|
// if (refreshList) getMonitorList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function deleteMonitor(monitorId = '', { refreshList = false } = {}) {
|
||||
|
// const url = helpers.buildURL(urls.DELETE_SORTIE, monitorId);
|
||||
|
// return http.getInstance().delete(url).then(({ data }) => {
|
||||
|
// if (refreshList) getMonitorList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function updateMonitorState(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE_LOCKED, reqData.id);
|
||||
|
// return http.getInstance().put(url).then(({ data }) => {
|
||||
|
// if (refreshList) getMonitorList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
return { |
||||
|
// monitorList,
|
||||
|
// monitorQueries,
|
||||
|
// monitorExtra,
|
||||
|
// monitorDetail,
|
||||
|
// getMonitorList,
|
||||
|
// createMonitor,
|
||||
|
// updateMonitor,
|
||||
|
// deleteMonitor,
|
||||
|
// updateMonitorState,
|
||||
|
// getMonitorDetail,
|
||||
|
// createMonitorShareCode,
|
||||
|
// bindingMonitor,
|
||||
|
getMonitorList, |
||||
|
mapOptions, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
export default null; |
||||
@ -0,0 +1,87 @@ |
|||||
|
/** |
||||
|
* 架次管理 |
||||
|
*/ |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineStore } from 'pinia'; |
||||
|
import http from '@/utils/http'; |
||||
|
import * as urls from '@/config/urls'; |
||||
|
import * as helpers from '@/utils/helpers'; |
||||
|
|
||||
|
export const useSortieStore = defineStore('sortie', () => { |
||||
|
const sortieList = ref([]); |
||||
|
const sortieExtra = ref({ total: null }); |
||||
|
const sortieQueries = ref({ page: 1, pageSize: 10, search: undefined }); |
||||
|
|
||||
|
const sortieDetail = ref({}); |
||||
|
|
||||
|
function getSortieList(otherQueries = {}) { |
||||
|
return http.getInstance().get(urls.GET_SORTIE_LIST, { |
||||
|
params: { ...sortieQueries.value, ...otherQueries }, |
||||
|
}).then(({ data }) => { |
||||
|
const { data: list, extra } = data; |
||||
|
sortieList.value = list || []; |
||||
|
sortieExtra.value = { ...sortieExtra.value, ...(extra || {}) }; |
||||
|
sortieQueries.value = { ...sortieQueries.value, ...otherQueries }; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function getSortieDetail(sortieId = '') { |
||||
|
const url = helpers.buildURL(urls.GET_SORTIE_DETAIL, sortieId); |
||||
|
return http.getInstance().get(url).then(({ data }) => { |
||||
|
const { data: detail } = data || {}; |
||||
|
sortieDetail.value = detail; |
||||
|
return data; |
||||
|
}); |
||||
|
} |
||||
|
//
|
||||
|
// function updateSortie(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// 'manufacturerId',
|
||||
|
// 'sn',
|
||||
|
// 'type',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE, reqData.id);
|
||||
|
// return http.getInstance().put(url, reqData).then(({ data }) => {
|
||||
|
// if (refreshList) getSortieList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function deleteSortie(sortieId = '', { refreshList = false } = {}) {
|
||||
|
// const url = helpers.buildURL(urls.DELETE_SORTIE, sortieId);
|
||||
|
// return http.getInstance().delete(url).then(({ data }) => {
|
||||
|
// if (refreshList) getSortieList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
//
|
||||
|
// function updateSortieState(formData = {}, { refreshList = false } = {}) {
|
||||
|
// const reqData = helpers.pick(formData, [
|
||||
|
// 'id',
|
||||
|
// ]);
|
||||
|
//
|
||||
|
// const url = helpers.buildURL(urls.UPDATE_SORTIE_LOCKED, reqData.id);
|
||||
|
// return http.getInstance().put(url).then(({ data }) => {
|
||||
|
// if (refreshList) getSortieList();
|
||||
|
// return data;
|
||||
|
// });
|
||||
|
// }
|
||||
|
|
||||
|
return { |
||||
|
sortieList, |
||||
|
sortieQueries, |
||||
|
sortieExtra, |
||||
|
sortieDetail, |
||||
|
getSortieList, |
||||
|
// createSortie,
|
||||
|
// updateSortie,
|
||||
|
// deleteSortie,
|
||||
|
// updateSortieState,
|
||||
|
getSortieDetail, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
export default null; |
||||
@ -0,0 +1,466 @@ |
|||||
|
:root,:root[theme-mode="light"] { |
||||
|
--brand-main: var(--td-brand-color-5); |
||||
|
--td-brand-color-light: var(--td-brand-color-1); |
||||
|
--td-brand-color-focus: var(--td-brand-color-2); |
||||
|
--td-brand-color-disabled: var(--td-brand-color-3); |
||||
|
--td-brand-color-hover: var(--td-brand-color-4); |
||||
|
--td-brand-color: var(--td-brand-color-5); |
||||
|
--td-brand-color-active: var(--td-brand-color-6); |
||||
|
--td-brand-color-1: #eef4ff; |
||||
|
--td-brand-color-2: #d1e4ff; |
||||
|
--td-brand-color-3: #a3ccff; |
||||
|
--td-brand-color-4: #6bb2ff; |
||||
|
--td-brand-color-5: #0894fa; |
||||
|
--td-brand-color-6: #007ad3; |
||||
|
--td-brand-color-7: #0060a8; |
||||
|
--td-brand-color-8: #004881; |
||||
|
--td-brand-color-9: #00325c; |
||||
|
--td-brand-color-10: #00203f; |
||||
|
--td-warning-color-1: #fef3e6; |
||||
|
--td-warning-color-2: #f9e0c7; |
||||
|
--td-warning-color-3: #f7c797; |
||||
|
--td-warning-color-4: #f2995f; |
||||
|
--td-warning-color-5: #ed7b2f; |
||||
|
--td-warning-color-6: #d35a21; |
||||
|
--td-warning-color-7: #ba431b; |
||||
|
--td-warning-color-8: #9e3610; |
||||
|
--td-warning-color-9: #842b0b; |
||||
|
--td-warning-color-10: #5a1907; |
||||
|
--td-warning-color: var(--td-warning-color-5); |
||||
|
--td-warning-color-hover: var(--td-warning-color-4); |
||||
|
--td-warning-color-focus: var(--td-warning-color-2); |
||||
|
--td-warning-color-active: var(--td-warning-color-6); |
||||
|
--td-warning-color-disabled: var(--td-warning-color-3); |
||||
|
--td-warning-color-light: var(--td-warning-color-1); |
||||
|
--td-error-color-1: #fdecee; |
||||
|
--td-error-color-2: #f9d7d9; |
||||
|
--td-error-color-3: #f8b9be; |
||||
|
--td-error-color-4: #f78d94; |
||||
|
--td-error-color-5: #f36d78; |
||||
|
--td-error-color-6: #e34d59; |
||||
|
--td-error-color-7: #c9353f; |
||||
|
--td-error-color-8: #b11f26; |
||||
|
--td-error-color-9: #951114; |
||||
|
--td-error-color-10: #680506; |
||||
|
--td-error-color: var(--td-error-color-6); |
||||
|
--td-error-color-hover: var(--td-error-color-5); |
||||
|
--td-error-color-focus: var(--td-error-color-2); |
||||
|
--td-error-color-active: var(--td-error-color-7); |
||||
|
--td-error-color-disabled: var(--td-error-color-3); |
||||
|
--td-error-color-light: var(--td-error-color-1); |
||||
|
--td-success-color-1: #e8f8f2; |
||||
|
--td-success-color-2: #bcebdc; |
||||
|
--td-success-color-3: #85dbbe; |
||||
|
--td-success-color-4: #48c79c; |
||||
|
--td-success-color-5: #00a870; |
||||
|
--td-success-color-6: #078d5c; |
||||
|
--td-success-color-7: #067945; |
||||
|
--td-success-color-8: #056334; |
||||
|
--td-success-color-9: #044f2a; |
||||
|
--td-success-color-10: #033017; |
||||
|
--td-success-color: var(--td-success-color-5); |
||||
|
--td-success-color-hover: var(--td-success-color-4); |
||||
|
--td-success-color-focus: var(--td-success-color-2); |
||||
|
--td-success-color-active: var(--td-success-color-6); |
||||
|
--td-success-color-disabled: var(--td-success-color-3); |
||||
|
--td-success-color-light: var(--td-success-color-1); |
||||
|
--td-gray-color-1: #f3f3f3; |
||||
|
--td-gray-color-2: #eee; |
||||
|
--td-gray-color-3: #e7e7e7; |
||||
|
--td-gray-color-4: #dcdcdc; |
||||
|
--td-gray-color-5: #c5c5c5; |
||||
|
--td-gray-color-6: #a6a6a6; |
||||
|
--td-gray-color-7: #8b8b8b; |
||||
|
--td-gray-color-8: #777; |
||||
|
--td-gray-color-9: #5e5e5e; |
||||
|
--td-gray-color-10: #4b4b4b; |
||||
|
--td-gray-color-11: #383838; |
||||
|
--td-gray-color-12: #2c2c2c; |
||||
|
--td-gray-color-13: #242424; |
||||
|
--td-gray-color-14: #181818; |
||||
|
--td-bg-color-container: #fff; |
||||
|
--td-bg-color-container-select: #fff; |
||||
|
--td-bg-color-page: var(--td-gray-color-2); |
||||
|
--td-bg-color-container-hover: var(--td-gray-color-1); |
||||
|
--td-bg-color-container-active: var(--td-gray-color-3); |
||||
|
--td-bg-color-secondarycontainer: var(--td-gray-color-1); |
||||
|
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); |
||||
|
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4); |
||||
|
--td-bg-color-component: var(--td-gray-color-3); |
||||
|
--td-bg-color-component-hover: var(--td-gray-color-4); |
||||
|
--td-bg-color-component-active: var(--td-gray-color-6); |
||||
|
--td-bg-color-component-disabled: var(--td-gray-color-2); |
||||
|
--td-component-stroke: var(--td-gray-color-3); |
||||
|
--td-component-border: var(--td-gray-color-4); |
||||
|
--td-font-white-1: #ffffff; |
||||
|
--td-font-white-2: rgba(255, 255, 255, 0.55); |
||||
|
--td-font-white-3: rgba(255, 255, 255, 0.35); |
||||
|
--td-font-white-4: rgba(255, 255, 255, 0.22); |
||||
|
--td-font-gray-1: rgba(0, 0, 0, 0.9); |
||||
|
--td-font-gray-2: rgba(0, 0, 0, 0.6); |
||||
|
--td-font-gray-3: rgba(0, 0, 0, 0.4); |
||||
|
--td-font-gray-4: rgba(0, 0, 0, 0.26); |
||||
|
--td-brand-color-light-hover: var(--td-brand-color-2); |
||||
|
--td-warning-color-light-hover: var(--td-warning-color-2); |
||||
|
--td-error-color-light-hover: var(--td-error-color-2); |
||||
|
--td-success-color-light-hover: var(--td-success-color-2); |
||||
|
--td-bg-color-secondarycomponent: var(--td-gray-color-4); |
||||
|
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); |
||||
|
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6); |
||||
|
--td-table-shadow-color: rgba(0, 0, 0, 8%); |
||||
|
--td-scrollbar-color: rgba(0, 0, 0, 10%); |
||||
|
--td-scrollbar-hover-color: rgba(0, 0, 0, 30%); |
||||
|
--td-scroll-track-color: #fff; |
||||
|
--td-bg-color-specialcomponent: #fff; |
||||
|
--td-border-level-1-color: var(--td-gray-color-3); |
||||
|
--td-border-level-2-color: var(--td-gray-color-4); |
||||
|
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc; |
||||
|
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc; |
||||
|
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc; |
||||
|
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc; |
||||
|
--td-mask-active: rgba(0, 0, 0, 0.6); |
||||
|
--td-mask-disabled: rgba(255, 255, 255, 0.6); |
||||
|
/* 字体配置 */ |
||||
|
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; |
||||
|
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; |
||||
|
--td-font-size-link-small: 12px; |
||||
|
--td-font-size-link-medium: 14px; |
||||
|
--td-font-size-link-large: 16px; |
||||
|
--td-font-size-mark-small: 12px; |
||||
|
--td-font-size-mark-medium: 14px; |
||||
|
--td-font-size-body-small: 12px; |
||||
|
--td-font-size-body-medium: 14px; |
||||
|
--td-font-size-body-large: 16px; |
||||
|
--td-font-size-title-small: 14px; |
||||
|
--td-font-size-title-medium: 16px; |
||||
|
--td-font-size-title-large: 20px; |
||||
|
--td-font-size-headline-small: 24px; |
||||
|
--td-font-size-headline-medium: 28px; |
||||
|
--td-font-size-headline-large: 36px; |
||||
|
--td-font-size-display-medium: 48px; |
||||
|
--td-font-size-display-large: 64px; |
||||
|
--td-line-height-common: 8px; |
||||
|
--td-line-height-link-small: calc( var(--td-font-size-link-small) + var(--td-line-height-common) ); |
||||
|
--td-line-height-link-medium: calc( var(--td-font-size-link-medium) + var(--td-line-height-common) ); |
||||
|
--td-line-height-link-large: calc( var(--td-font-size-link-large) + var(--td-line-height-common) ); |
||||
|
--td-line-height-mark-small: calc( var(--td-font-size-mark-small) + var(--td-line-height-common) ); |
||||
|
--td-line-height-mark-medium: calc( var(--td-font-size-mark-medium) + var(--td-line-height-common) ); |
||||
|
--td-line-height-body-small: calc( var(--td-font-size-body-small) + var(--td-line-height-common) ); |
||||
|
--td-line-height-body-medium: calc( var(--td-font-size-body-medium) + var(--td-line-height-common) ); |
||||
|
--td-line-height-body-large: calc( var(--td-font-size-body-large) + var(--td-line-height-common) ); |
||||
|
--td-line-height-title-small: calc( var(--td-font-size-title-small) + var(--td-line-height-common) ); |
||||
|
--td-line-height-title-medium: calc( var(--td-font-size-title-medium) + var(--td-line-height-common) ); |
||||
|
--td-line-height-title-large: calc( var(--td-font-size-title-medium) + var(--td-line-height-common) ); |
||||
|
--td-line-height-headline-small: calc( var(--td-font-size-headline-small) + var(--td-line-height-common) ); |
||||
|
--td-line-height-headline-medium: calc( var(--td-font-size-headline-medium) + var(--td-line-height-common) ); |
||||
|
--td-line-height-headline-large: calc( var(--td-font-size-headline-large) + var(--td-line-height-common) ); |
||||
|
--td-line-height-display-medium: calc( var(--td-font-size-display-medium) + var(--td-line-height-common) ); |
||||
|
--td-line-height-display-large: calc( var(--td-font-size-display-large) + var(--td-line-height-common) ); |
||||
|
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family); |
||||
|
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family); |
||||
|
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family); |
||||
|
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family); |
||||
|
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family); |
||||
|
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family); |
||||
|
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family); |
||||
|
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family); |
||||
|
--td-font-title-small: var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family); |
||||
|
--td-font-title-medium: var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family); |
||||
|
--td-font-title-large: var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family); |
||||
|
--td-font-headline-small: var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family); |
||||
|
--td-font-headline-medium: var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family); |
||||
|
--td-font-headline-large: var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family); |
||||
|
--td-font-display-medium: var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family); |
||||
|
--td-font-display-large: var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family); |
||||
|
/* 字体颜色 */ |
||||
|
--td-text-color-primary: var(--td-font-gray-1); |
||||
|
--td-text-color-secondary: var(--td-font-gray-2); |
||||
|
--td-text-color-placeholder: var(--td-font-gray-3); |
||||
|
--td-text-color-disabled: var(--td-font-gray-4); |
||||
|
--td-text-color-anti: #fff; |
||||
|
--td-text-color-brand: var(--td-brand-color); |
||||
|
--td-text-color-link: var(--td-brand-color); |
||||
|
/* end 字体配置 */ /* 圆角配置 */ |
||||
|
--td-radius-small: 2px; |
||||
|
--td-radius-default: 3px; |
||||
|
--td-radius-medium: 6px; |
||||
|
--td-radius-large: 9px; |
||||
|
--td-radius-extraLarge: 12px; |
||||
|
--td-radius-round: 999px; |
||||
|
--td-radius-circle: 50%; |
||||
|
/* end 圆角配置 *//* 阴影配置 */ |
||||
|
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); |
||||
|
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); |
||||
|
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); |
||||
|
/* end 阴影配置 *//* 尺寸配置 */ |
||||
|
--td-size-1: 2px; |
||||
|
--td-size-2: 4px; |
||||
|
--td-size-3: 6px; |
||||
|
--td-size-4: 8px; |
||||
|
--td-size-5: 12px; |
||||
|
--td-size-6: 16px; |
||||
|
--td-size-7: 20px; |
||||
|
--td-size-8: 24px; |
||||
|
--td-size-9: 28px; |
||||
|
--td-size-10: 32px; |
||||
|
--td-size-11: 36px; |
||||
|
--td-size-12: 40px; |
||||
|
--td-size-13: 48px; |
||||
|
--td-size-14: 56px; |
||||
|
--td-size-15: 64px; |
||||
|
--td-size-16: 72px; |
||||
|
--td-comp-size-xxxs: var(--td-size-6); |
||||
|
--td-comp-size-xxs: var(--td-size-7); |
||||
|
--td-comp-size-xs: var(--td-size-8); |
||||
|
--td-comp-size-s: var(--td-size-9); |
||||
|
--td-comp-size-m: var(--td-size-10); |
||||
|
--td-comp-size-l: var(--td-size-11); |
||||
|
--td-comp-size-xl: var(--td-size-12); |
||||
|
--td-comp-size-xxl: var(--td-size-13); |
||||
|
--td-comp-size-xxxl: var(--td-size-14); |
||||
|
--td-comp-size-xxxxl: var(--td-size-15); |
||||
|
--td-comp-size-xxxxxl: var(--td-size-16); |
||||
|
--td-pop-padding-s: var(--td-size-2); |
||||
|
--td-pop-padding-m: var(--td-size-3); |
||||
|
--td-pop-padding-l: var(--td-size-4); |
||||
|
--td-pop-padding-xl: var(--td-size-5); |
||||
|
--td-pop-padding-xxl: var(--td-size-6); |
||||
|
--td-comp-paddingLR-xxs: var(--td-size-1); |
||||
|
--td-comp-paddingLR-xs: var(--td-size-2); |
||||
|
--td-comp-paddingLR-s: var(--td-size-4); |
||||
|
--td-comp-paddingLR-m: var(--td-size-5); |
||||
|
--td-comp-paddingLR-l: var(--td-size-6); |
||||
|
--td-comp-paddingLR-xl: var(--td-size-8); |
||||
|
--td-comp-paddingLR-xxl: var(--td-size-10); |
||||
|
--td-comp-paddingTB-xxs: var(--td-size-1); |
||||
|
--td-comp-paddingTB-xs: var(--td-size-2); |
||||
|
--td-comp-paddingTB-s: var(--td-size-4); |
||||
|
--td-comp-paddingTB-m: var(--td-size-5); |
||||
|
--td-comp-paddingTB-l: var(--td-size-6); |
||||
|
--td-comp-paddingTB-xl: var(--td-size-8); |
||||
|
--td-comp-paddingTB-xxl: var(--td-size-10); |
||||
|
--td-comp-margin-xxs: var(--td-size-1); |
||||
|
--td-comp-margin-xs: var(--td-size-2); |
||||
|
--td-comp-margin-s: var(--td-size-4); |
||||
|
--td-comp-margin-m: var(--td-size-5); |
||||
|
--td-comp-margin-l: var(--td-size-6); |
||||
|
--td-comp-margin-xl: var(--td-size-7); |
||||
|
--td-comp-margin-xxl: var(--td-size-8); |
||||
|
--td-comp-margin-xxxl: var(--td-size-10); |
||||
|
--td-comp-margin-xxxxl: var(--td-size-12); |
||||
|
/* end 尺寸配置 */ |
||||
|
} |
||||
|
|
||||
|
:root[theme-mode="dark"] { |
||||
|
--brand-main: var(--td-brand-color-6); |
||||
|
--td-brand-color-light: var(--td-brand-color-1); |
||||
|
--td-brand-color-focus: var(--td-brand-color-2); |
||||
|
--td-brand-color-disabled: var(--td-brand-color-3); |
||||
|
--td-brand-color-hover: var(--td-brand-color-5); |
||||
|
--td-brand-color: var(--td-brand-color-6); |
||||
|
--td-brand-color-active: var(--td-brand-color-7); |
||||
|
--td-brand-color-1: #0894fa20; |
||||
|
--td-brand-color-2: #00325c; |
||||
|
--td-brand-color-3: #004881; |
||||
|
--td-brand-color-4: #0060a8; |
||||
|
--td-brand-color-5: #007ad3; |
||||
|
--td-brand-color-6: #0894fa; |
||||
|
--td-brand-color-7: #6bb2ff; |
||||
|
--td-brand-color-8: #a3ccff; |
||||
|
--td-brand-color-9: #d1e4ff; |
||||
|
--td-brand-color-10: #eef4ff; |
||||
|
--td-warning-color-1: #4f2a1d; |
||||
|
--td-warning-color-2: #582f21; |
||||
|
--td-warning-color-3: #733c23; |
||||
|
--td-warning-color-4: #a75d2b; |
||||
|
--td-warning-color-5: #cf6e2d; |
||||
|
--td-warning-color-6: #dc7633; |
||||
|
--td-warning-color-7: #e8935c; |
||||
|
--td-warning-color-8: #ecbf91; |
||||
|
--td-warning-color-9: #eed7bf; |
||||
|
--td-warning-color-10: #f3e9dc; |
||||
|
--td-error-color-1: #472324; |
||||
|
--td-error-color-2: #5e2a2d; |
||||
|
--td-error-color-3: #703439; |
||||
|
--td-error-color-4: #83383e; |
||||
|
--td-error-color-5: #a03f46; |
||||
|
--td-error-color-6: #c64751; |
||||
|
--td-error-color-7: #de6670; |
||||
|
--td-error-color-8: #ec888e; |
||||
|
--td-error-color-9: #edb1b6; |
||||
|
--td-error-color-10: #eeced0; |
||||
|
--td-success-color-1: #193a2a; |
||||
|
--td-success-color-2: #1a4230; |
||||
|
--td-success-color-3: #17533d; |
||||
|
--td-success-color-4: #0d7a55; |
||||
|
--td-success-color-5: #059465; |
||||
|
--td-success-color-6: #43af8a; |
||||
|
--td-success-color-7: #46bf96; |
||||
|
--td-success-color-8: #80d2b6; |
||||
|
--td-success-color-9: #b4e1d3; |
||||
|
--td-success-color-10: #deede8; |
||||
|
--td-gray-color-1: #f3f3f3; |
||||
|
--td-gray-color-2: #eee; |
||||
|
--td-gray-color-3: #e7e7e7; |
||||
|
--td-gray-color-4: #dcdcdc; |
||||
|
--td-gray-color-5: #c5c5c5; |
||||
|
--td-gray-color-6: #a6a6a6; |
||||
|
--td-gray-color-7: #8b8b8b; |
||||
|
--td-gray-color-8: #777; |
||||
|
--td-gray-color-9: #5e5e5e; |
||||
|
--td-gray-color-10: #4b4b4b; |
||||
|
--td-gray-color-11: #383838; |
||||
|
--td-gray-color-12: #2c2c2c; |
||||
|
--td-gray-color-13: #242424; |
||||
|
--td-gray-color-14: #181818; |
||||
|
--td-bg-color-page: var(--td-gray-color-14); |
||||
|
--td-bg-color-container: var(--td-gray-color-13); |
||||
|
--td-bg-color-container-hover: var(--td-gray-color-12); |
||||
|
--td-bg-color-container-active: var(--td-gray-color-10); |
||||
|
--td-bg-color-container-select: var(--td-gray-color-9); |
||||
|
--td-bg-color-secondarycontainer: var(--td-gray-color-12); |
||||
|
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); |
||||
|
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9); |
||||
|
--td-bg-color-component: var(--td-gray-color-11); |
||||
|
--td-bg-color-component-hover: var(--td-gray-color-10); |
||||
|
--td-bg-color-component-active: var(--td-gray-color-9); |
||||
|
--td-bg-color-component-disabled: var(--td-gray-color-12); |
||||
|
--td-component-stroke: var(--td-gray-color-11); |
||||
|
--td-component-border: var(--td-gray-color-9); |
||||
|
--td-font-white-1: rgba(255, 255, 255, 0.9); |
||||
|
--td-font-white-2: rgba(255, 255, 255, 0.55); |
||||
|
--td-font-white-3: rgba(255, 255, 255, 0.35); |
||||
|
--td-font-white-4: rgba(255, 255, 255, 0.22); |
||||
|
--td-font-gray-1: rgba(0, 0, 0, 0.9); |
||||
|
--td-font-gray-2: rgba(0, 0, 0, 0.6); |
||||
|
--td-font-gray-3: rgba(0, 0, 0, 0.4); |
||||
|
--td-font-gray-4: rgba(0, 0, 0, 0.26); |
||||
|
--td-gray-color-1: #f3f3f3; |
||||
|
--td-gray-color-2: #eee; |
||||
|
--td-gray-color-3: #e7e7e7; |
||||
|
--td-gray-color-4: #dcdcdc; |
||||
|
--td-gray-color-5: #c5c5c5; |
||||
|
--td-gray-color-6: #a6a6a6; |
||||
|
--td-gray-color-7: #8b8b8b; |
||||
|
--td-gray-color-8: #777; |
||||
|
--td-gray-color-9: #5e5e5e; |
||||
|
--td-gray-color-10: #4b4b4b; |
||||
|
--td-gray-color-11: #383838; |
||||
|
--td-gray-color-12: #2c2c2c; |
||||
|
--td-gray-color-13: #242424; |
||||
|
--td-gray-color-14: #181818; |
||||
|
--td-bg-color-page: var(--td-gray-color-14); |
||||
|
--td-bg-color-container: var(--td-gray-color-13); |
||||
|
--td-bg-color-container-hover: var(--td-gray-color-12); |
||||
|
--td-bg-color-container-active: var(--td-gray-color-10); |
||||
|
--td-bg-color-container-select: var(--td-gray-color-9); |
||||
|
--td-bg-color-secondarycontainer: var(--td-gray-color-12); |
||||
|
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); |
||||
|
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9); |
||||
|
--td-bg-color-component: var(--td-gray-color-11); |
||||
|
--td-bg-color-component-hover: var(--td-gray-color-10); |
||||
|
--td-bg-color-component-active: var(--td-gray-color-9); |
||||
|
--td-bg-color-secondarycomponent: var(--td-gray-color-10); |
||||
|
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); |
||||
|
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8); |
||||
|
--td-bg-color-component-disabled: var(--td-gray-color-12); |
||||
|
--td-component-stroke: var(--td-gray-color-11); |
||||
|
--td-component-border: var(--td-gray-color-9); |
||||
|
--td-font-white-1: rgba(255, 255, 255, 0.9); |
||||
|
--td-font-white-2: rgba(255, 255, 255, 0.55); |
||||
|
--td-font-white-3: rgba(255, 255, 255, 0.35); |
||||
|
--td-font-white-4: rgba(255, 255, 255, 0.22); |
||||
|
--td-font-gray-1: rgba(0, 0, 0, 0.9); |
||||
|
--td-font-gray-2: rgba(0, 0, 0, 0.6); |
||||
|
--td-font-gray-3: rgba(0, 0, 0, 0.4); |
||||
|
--td-font-gray-4: rgba(0, 0, 0, 0.26); |
||||
|
--td-text-color-primary: var(--td-font-white-1); |
||||
|
--td-text-color-secondary: var(--td-font-white-2); |
||||
|
--td-text-color-placeholder: var(--td-font-white-3); |
||||
|
--td-text-color-disabled: var(--td-font-white-4); |
||||
|
--td-text-color-anti: #fff; |
||||
|
--td-text-color-brand: var(--td-brand-color); |
||||
|
--td-text-color-link: var(--td-brand-color); |
||||
|
--td-table-shadow-color: rgba(0, 0, 0, 55%); |
||||
|
--td-scrollbar-color: rgba(255, 255, 255, 10%); |
||||
|
--td-scrollbar-hover-color: rgba(255, 255, 255, 30%); |
||||
|
--td-scroll-track-color: #333; |
||||
|
--td-bg-color-specialcomponent: transparent; |
||||
|
--td-border-level-1-color: var(--td-gray-color-11); |
||||
|
--td-border-level-2-color: var(--td-gray-color-9); |
||||
|
--td-mask-active: rgba(0, 0, 0, 0.4); |
||||
|
--td-mask-disabled: rgba(0, 0, 0, 0.6); |
||||
|
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e; |
||||
|
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e; |
||||
|
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e; |
||||
|
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e; |
||||
|
/* 圆角配置 */ |
||||
|
--td-radius-small: 2px; |
||||
|
--td-radius-default: 3px; |
||||
|
--td-radius-medium: 6px; |
||||
|
--td-radius-large: 9px; |
||||
|
--td-radius-extraLarge: 12px; |
||||
|
--td-radius-round: 999px; |
||||
|
--td-radius-circle: 50%; |
||||
|
/* end 圆角配置 *//* 阴影配置 */ |
||||
|
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); |
||||
|
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); |
||||
|
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); |
||||
|
/* end 阴影配置 *//* 尺寸配置 */ |
||||
|
--td-size-1: 2px; |
||||
|
--td-size-2: 4px; |
||||
|
--td-size-3: 6px; |
||||
|
--td-size-4: 8px; |
||||
|
--td-size-5: 12px; |
||||
|
--td-size-6: 16px; |
||||
|
--td-size-7: 20px; |
||||
|
--td-size-8: 24px; |
||||
|
--td-size-9: 28px; |
||||
|
--td-size-10: 32px; |
||||
|
--td-size-11: 36px; |
||||
|
--td-size-12: 40px; |
||||
|
--td-size-13: 48px; |
||||
|
--td-size-14: 56px; |
||||
|
--td-size-15: 64px; |
||||
|
--td-size-16: 72px; |
||||
|
--td-comp-size-xxxs: var(--td-size-6); |
||||
|
--td-comp-size-xxs: var(--td-size-7); |
||||
|
--td-comp-size-xs: var(--td-size-8); |
||||
|
--td-comp-size-s: var(--td-size-9); |
||||
|
--td-comp-size-m: var(--td-size-10); |
||||
|
--td-comp-size-l: var(--td-size-11); |
||||
|
--td-comp-size-xl: var(--td-size-12); |
||||
|
--td-comp-size-xxl: var(--td-size-13); |
||||
|
--td-comp-size-xxxl: var(--td-size-14); |
||||
|
--td-comp-size-xxxxl: var(--td-size-15); |
||||
|
--td-comp-size-xxxxxl: var(--td-size-16); |
||||
|
--td-pop-padding-s: var(--td-size-2); |
||||
|
--td-pop-padding-m: var(--td-size-3); |
||||
|
--td-pop-padding-l: var(--td-size-4); |
||||
|
--td-pop-padding-xl: var(--td-size-5); |
||||
|
--td-pop-padding-xxl: var(--td-size-6); |
||||
|
--td-comp-paddingLR-xxs: var(--td-size-1); |
||||
|
--td-comp-paddingLR-xs: var(--td-size-2); |
||||
|
--td-comp-paddingLR-s: var(--td-size-4); |
||||
|
--td-comp-paddingLR-m: var(--td-size-5); |
||||
|
--td-comp-paddingLR-l: var(--td-size-6); |
||||
|
--td-comp-paddingLR-xl: var(--td-size-8); |
||||
|
--td-comp-paddingLR-xxl: var(--td-size-10); |
||||
|
--td-comp-paddingTB-xxs: var(--td-size-1); |
||||
|
--td-comp-paddingTB-xs: var(--td-size-2); |
||||
|
--td-comp-paddingTB-s: var(--td-size-4); |
||||
|
--td-comp-paddingTB-m: var(--td-size-5); |
||||
|
--td-comp-paddingTB-l: var(--td-size-6); |
||||
|
--td-comp-paddingTB-xl: var(--td-size-8); |
||||
|
--td-comp-paddingTB-xxl: var(--td-size-10); |
||||
|
--td-comp-margin-xxs: var(--td-size-1); |
||||
|
--td-comp-margin-xs: var(--td-size-2); |
||||
|
--td-comp-margin-s: var(--td-size-4); |
||||
|
--td-comp-margin-m: var(--td-size-5); |
||||
|
--td-comp-margin-l: var(--td-size-6); |
||||
|
--td-comp-margin-xl: var(--td-size-7); |
||||
|
--td-comp-margin-xxl: var(--td-size-8); |
||||
|
--td-comp-margin-xxxl: var(--td-size-10); |
||||
|
--td-comp-margin-xxxxl: var(--td-size-12); |
||||
|
/* end 尺寸配置 */ |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,226 @@ |
|||||
|
<script setup> |
||||
|
import { OverlayScrollbars } from 'overlayscrollbars'; |
||||
|
import { computed } from 'vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
let scrollBar; |
||||
|
const vScroll = { |
||||
|
mounted: (el) => { |
||||
|
scrollBar = OverlayScrollbars(el, { |
||||
|
paddingAbsolute: true, |
||||
|
overflow: { |
||||
|
x: 'hidden', |
||||
|
y: 'scroll', |
||||
|
}, |
||||
|
scrollbars: { |
||||
|
theme: 'os-theme-light', |
||||
|
autoHide: 'leave', |
||||
|
autoHideDelay: 300, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
}; |
||||
|
function onScrollTo(direction = 'down') { |
||||
|
const { scrollOffsetElement } = scrollBar.elements(); |
||||
|
let top; |
||||
|
if (direction === 'down') { |
||||
|
top = scrollOffsetElement.scrollTop + 300; |
||||
|
} |
||||
|
if (direction === 'up') { |
||||
|
top = scrollOffsetElement.scrollTop - 300; |
||||
|
} |
||||
|
scrollOffsetElement.scrollTo({ |
||||
|
behavior: 'smooth', |
||||
|
top, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const urlList = computed(() => props.list.map(({ url }) => url)); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<div class="page-turning-left" @click="onScrollTo('up')"> |
||||
|
<t-icon name="chevron-up" /> |
||||
|
</div> |
||||
|
<div class="container" v-scroll> |
||||
|
<div class="custom-space"> |
||||
|
<template v-for="(item, index) in list" :key="item.id"> |
||||
|
<t-image-viewer |
||||
|
:images="urlList" |
||||
|
:default-index="index" |
||||
|
> |
||||
|
<template #trigger="{ open: onPreview }"> |
||||
|
<div class="image-box"> |
||||
|
<t-image |
||||
|
shape="round" |
||||
|
fit="cover" |
||||
|
:style="{ 'width': '20vh', height: '15vh' }" |
||||
|
:src="item.url" |
||||
|
error="" |
||||
|
> |
||||
|
<template #overlay-content> |
||||
|
<div class="overlay-container"> |
||||
|
<div class="img-type"> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</t-image> |
||||
|
<div class="image-hover" @click="onPreview"> |
||||
|
<span><t-icon name="browse" size="1.4em" /> 预览</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</t-image-viewer> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="!list.length"> |
||||
|
<t-image |
||||
|
shape="round" |
||||
|
fit="cover" |
||||
|
:style="{ 'width': '20vh', height: '15vh' }" |
||||
|
src="" |
||||
|
error="" |
||||
|
> |
||||
|
<template #overlay-content> |
||||
|
<div class="overlay-container"> |
||||
|
<div class="img-type"> |
||||
|
没有上传图片哦 ~ |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</t-image> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="page-turning-right" @click="onScrollTo('down')"> |
||||
|
<t-icon name="chevron-down" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
:global { |
||||
|
.page-turning-left { |
||||
|
background-color: fade(black, 35%); |
||||
|
padding: 0px 24px; |
||||
|
border-top-left-radius: 10px; |
||||
|
border-top-right-radius: 10px; |
||||
|
margin-bottom: 2px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: fade(black, 55%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.page-turning-right { |
||||
|
background-color: fade(black, 35%); |
||||
|
padding: 0px 24px; |
||||
|
border-bottom-left-radius: 10px; |
||||
|
border-bottom-right-radius: 10px; |
||||
|
margin-top: 2px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: fade(black, 55%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
flex: 1; |
||||
|
background-color: fade(black, 35%); |
||||
|
padding: var(--td-comp-paddingTB-s); |
||||
|
border-radius: var(--td-radius-large); |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.custom-space { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: var(--td-comp-margin-l); |
||||
|
|
||||
|
.image-box { |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.overlay-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
.img-quantity { |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
right: 5px; |
||||
|
background-color: fade(black, 60%); |
||||
|
padding: 2px 10px; |
||||
|
border-radius: 40px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 12px; |
||||
|
|
||||
|
.text { |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img-type { |
||||
|
position: absolute; |
||||
|
bottom: 5px; |
||||
|
left: 5px; |
||||
|
background-color: fade(black, 60%); |
||||
|
padding: 2px 15px; |
||||
|
border-radius: 40px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.image-box { |
||||
|
//width: 40px; |
||||
|
//height: 60px; |
||||
|
display: inline-flex; |
||||
|
position: relative; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: var(--td-radius-small); |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.image-hover { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
opacity: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
color: var(--td-text-color-anti); |
||||
|
line-height: 22px; |
||||
|
transition: 0.2s; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
&:hover .image-hover { |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,178 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, onUnmounted, ref } from 'vue'; |
||||
|
import { REQUEST_UPLOAD_FILE } from '@/config/urls'; |
||||
|
import auth from '@/utils/auth'; |
||||
|
// import { storeToRefs } from 'pinia'; |
||||
|
import { useMediaStore } from '@/stores'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
|
||||
|
const mediaStore = useMediaStore(); |
||||
|
const { getMediaList, createMedia, deleteMedia } = mediaStore; |
||||
|
|
||||
|
const sortieId = ref(); |
||||
|
const visible = ref(false); |
||||
|
|
||||
|
const files = ref([]); |
||||
|
function init() { |
||||
|
if (!sortieId.value) return; |
||||
|
getMediaList(sortieId.value).then(({ data }) => { |
||||
|
(data || []).forEach(item => { |
||||
|
const temp = item; |
||||
|
temp.status = 'success'; |
||||
|
temp.raw = {}; |
||||
|
}); |
||||
|
files.value = [...(data || []), ...files.value]; |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const mediaList = ref([]); |
||||
|
function loadList() { |
||||
|
if (!sortieId.value) return; |
||||
|
getMediaList(sortieId.value).then(({ data }) => { |
||||
|
mediaList.value = [...(data || [])]; |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onCancel() { |
||||
|
files.value = []; |
||||
|
mediaList.value = []; |
||||
|
} |
||||
|
|
||||
|
const subject = ref('image'); |
||||
|
|
||||
|
const ABRIDGE_NAME = [10, 7]; |
||||
|
|
||||
|
const formatResponse = (res) => { |
||||
|
if (!res) { |
||||
|
return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' }; |
||||
|
} |
||||
|
return res; |
||||
|
}; |
||||
|
|
||||
|
function beforeUpload(UploadFile) { |
||||
|
const { type = 'image' } = UploadFile || {}; |
||||
|
if (type.includes('image')) { |
||||
|
subject.value = 'image'; |
||||
|
} |
||||
|
if (type.includes('video')) { |
||||
|
subject.value = 'video'; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
const handleSuccess = ({ currentFiles = [], response = [] } = {}) => { |
||||
|
console.log('aaa', currentFiles, response); |
||||
|
const medias = currentFiles.map(({ name, size, type, status, response: { code, data } }) => { |
||||
|
if (status !== 'success') return null; |
||||
|
if (code !== 200) return null; |
||||
|
let typeInt; |
||||
|
if (type.includes('image')) { |
||||
|
typeInt = 1; |
||||
|
} |
||||
|
if (type.includes('video')) { |
||||
|
typeInt = 2; |
||||
|
} |
||||
|
return { |
||||
|
name, |
||||
|
size, |
||||
|
type: typeInt, |
||||
|
url: data, |
||||
|
}; |
||||
|
}).filter(Boolean); |
||||
|
// const { name, size, type } = currentFiles[0] || {}; |
||||
|
// const { code, data } = response[0] || {}; |
||||
|
// if (code !== 200) return; |
||||
|
// let typeInt; |
||||
|
// if (type.includes('image')) { |
||||
|
// typeInt = 1; |
||||
|
// } |
||||
|
// if (type.includes('video')) { |
||||
|
// typeInt = 2; |
||||
|
// } |
||||
|
const formData = { |
||||
|
id: sortieId.value, |
||||
|
medias, |
||||
|
}; |
||||
|
createMedia(formData).then(() => { |
||||
|
if (!visible.value) return; |
||||
|
loadList(); |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const handleRemove = ({ file } = {}) => { |
||||
|
if (file.status !== 'success') return; |
||||
|
let mediaId; |
||||
|
|
||||
|
if (file.id) { |
||||
|
mediaId = file.id; |
||||
|
} else { |
||||
|
const { response: { data } } = file; |
||||
|
const media = mediaList.value.find(({ url }) => url === data); |
||||
|
mediaId = media?.id; |
||||
|
} |
||||
|
|
||||
|
if (!mediaId) return; |
||||
|
deleteMedia(mediaId).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-media-manage', (row) => { |
||||
|
if (!row.id) return; |
||||
|
sortieId.value = row.id; |
||||
|
init(); |
||||
|
visible.value = true; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-media-manage'); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-dialog |
||||
|
:class="s.root" |
||||
|
v-model:visible="visible" |
||||
|
width="fit-content" |
||||
|
:footer="null" |
||||
|
@closed="onCancel" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div style="flex: 1; text-align: center;">媒体管理</div> |
||||
|
</template> |
||||
|
|
||||
|
<t-upload |
||||
|
v-model="files" |
||||
|
placeholder="支持上传图片、视频文件" |
||||
|
:action="REQUEST_UPLOAD_FILE(subject)" |
||||
|
:headers="{ |
||||
|
Authorization: `Bearer ${auth.getToken()}`, |
||||
|
}" |
||||
|
theme="file-flow" |
||||
|
multiple |
||||
|
:abridge-name="ABRIDGE_NAME" |
||||
|
auto-upload |
||||
|
show-thumbnail |
||||
|
allow-upload-duplicate-file |
||||
|
:format-response="formatResponse" |
||||
|
:before-upload="beforeUpload" |
||||
|
@success="handleSuccess" |
||||
|
@remove="handleRemove" |
||||
|
/> |
||||
|
</t-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,173 @@ |
|||||
|
<script setup> |
||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue'; |
||||
|
// import { REQUEST_UPLOAD_FILE } from '@/config/urls'; |
||||
|
// import auth from '@/utils/auth'; |
||||
|
// import { storeToRefs } from 'pinia'; |
||||
|
import { useMediaStore } from '@/stores'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
import ImageBar from '@/views/SortieView/components/ImageBar.vue'; |
||||
|
import VideoPlayer from '@/components/VideoPlayer.vue'; |
||||
|
|
||||
|
const mediaStore = useMediaStore(); |
||||
|
const { getMediaList } = mediaStore; |
||||
|
|
||||
|
const sortieId = ref(); |
||||
|
const visible = ref(false); |
||||
|
|
||||
|
// const files = ref([]); |
||||
|
// function init() { |
||||
|
// if (!sortieId.value) return; |
||||
|
// getMediaList(sortieId.value).then(({ data }) => { |
||||
|
// // data.forEach(item => { |
||||
|
// // const temp = item; |
||||
|
// // temp.status = 'success'; |
||||
|
// // temp.raw = {}; |
||||
|
// // }); |
||||
|
// // files.value = [...data, ...files.value]; |
||||
|
// }).catch(({ message }) => { |
||||
|
// if (message) MessagePlugin.error(message); |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
const mediaList = ref([]); |
||||
|
|
||||
|
const imageList = computed(() => mediaList.value.filter(({ type }) => type === 1)); |
||||
|
const videoList = computed(() => mediaList.value.filter(({ type }) => type === 2)); |
||||
|
|
||||
|
function loadList() { |
||||
|
if (!sortieId.value) return; |
||||
|
getMediaList(sortieId.value).then(({ data = [] } = {}) => { |
||||
|
mediaList.value = [...(data || [])]; |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onCancel() { |
||||
|
mediaList.value = []; |
||||
|
} |
||||
|
|
||||
|
// const subject = ref('image'); |
||||
|
|
||||
|
// const ABRIDGE_NAME = [10, 7]; |
||||
|
// |
||||
|
// const formatResponse = (res) => { |
||||
|
// if (!res) { |
||||
|
// return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' }; |
||||
|
// } |
||||
|
// return res; |
||||
|
// }; |
||||
|
// |
||||
|
// function beforeUpload(UploadFile) { |
||||
|
// const { type = 'image' } = UploadFile || {}; |
||||
|
// if (type.includes('image')) { |
||||
|
// subject.value = 'image'; |
||||
|
// } |
||||
|
// if (type.includes('video')) { |
||||
|
// subject.value = 'video'; |
||||
|
// } |
||||
|
// return true; |
||||
|
// } |
||||
|
|
||||
|
// const handleSuccess = ({ currentFiles = [], response = [] } = {}) => { |
||||
|
// const { name, size, type } = currentFiles[0] || {}; |
||||
|
// const { code, data } = response[0] || {}; |
||||
|
// if (code !== 200) return; |
||||
|
// let typeInt; |
||||
|
// if (type.includes('image')) { |
||||
|
// typeInt = 1; |
||||
|
// } |
||||
|
// if (type.includes('video')) { |
||||
|
// typeInt = 2; |
||||
|
// } |
||||
|
// const formData = { |
||||
|
// id: sortieId.value, |
||||
|
// medias: [{ |
||||
|
// name, |
||||
|
// size, |
||||
|
// type: typeInt, |
||||
|
// url: data, |
||||
|
// }], |
||||
|
// }; |
||||
|
// createMedia(formData).then(() => { |
||||
|
// loadList(); |
||||
|
// }).catch(({ message }) => { |
||||
|
// if (message) MessagePlugin.error(message); |
||||
|
// }); |
||||
|
// }; |
||||
|
|
||||
|
// const handleRemove = ({ file } = {}) => { |
||||
|
// if (file.status !== 'success') return; |
||||
|
// let mediaId; |
||||
|
// |
||||
|
// if (file.id) { |
||||
|
// mediaId = file.id; |
||||
|
// } else { |
||||
|
// const { response: { data } } = file; |
||||
|
// const media = mediaList.value.find(({ url }) => url === data); |
||||
|
// mediaId = media?.id; |
||||
|
// } |
||||
|
// |
||||
|
// if (!mediaId) return; |
||||
|
// deleteMedia(mediaId).catch(({ message }) => { |
||||
|
// if (message) MessagePlugin.error(message); |
||||
|
// }); |
||||
|
// }; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-sortie-detail', (row) => { |
||||
|
if (!row.id) return; |
||||
|
sortieId.value = row.id; |
||||
|
loadList(); |
||||
|
visible.value = true; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-sortie-detail'); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-dialog |
||||
|
:class="s.root" |
||||
|
v-model:visible="visible" |
||||
|
mode="full-screen" |
||||
|
:footer="null" |
||||
|
@closed="onCancel" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div style="flex: 1; text-align: center;">查看媒体</div> |
||||
|
</template> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<ImageBar :list="imageList" class="image-bar" /> |
||||
|
|
||||
|
<VideoPlayer :list="videoList" class="video-player" /> |
||||
|
</div> |
||||
|
</t-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
:global { |
||||
|
.container { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
|
||||
|
.video-player { |
||||
|
flex: 1; |
||||
|
margin-left: var(--td-comp-margin-s); |
||||
|
margin-top: var(--td-comp-margin-s); |
||||
|
border-radius: var(--td-radius-medium); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.t-dialog__position_fullscreen { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,147 @@ |
|||||
|
<script setup> |
||||
|
import BasePanel from '@/components/BasePanel.vue'; |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
import { useDeviceStore } from '@/stores'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
import DeviceEditor from '@/views/DeviceView/components/DeviceEditor.vue'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
import { formatTime, popularTime } from '@/utils/helpers'; |
||||
|
|
||||
|
const deviceStore = useDeviceStore(); |
||||
|
const { deviceList, deviceQueries, deviceExtra } = storeToRefs(deviceStore); |
||||
|
const { getDeviceList, updateDeviceState, deleteDevice } = deviceStore; |
||||
|
|
||||
|
function loadList(queries = {}) { |
||||
|
getDeviceList(queries).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
loadList({ page: 1, pageSize: 10, all: undefined, type: undefined, search: undefined }); |
||||
|
|
||||
|
function onPageChange({ current, pageSize }) { |
||||
|
loadList({ page: current, pageSize }); |
||||
|
} |
||||
|
|
||||
|
const search = ref(); |
||||
|
function onSearchList() { |
||||
|
loadList({ search: search.value }); |
||||
|
} |
||||
|
|
||||
|
function onResetList() { |
||||
|
search.value = undefined; |
||||
|
onSearchList(); |
||||
|
} |
||||
|
|
||||
|
const typeLabel = { 1: '抛投无人机', 2: '巡检无人机' }; |
||||
|
const columns = [ |
||||
|
{ colKey: 'serial-number', title: '序列号', ellipsis: true, width: 100 }, |
||||
|
{ colKey: 'sn', title: '飞控ID', ellipsis: true }, |
||||
|
{ colKey: 'manufacturerName', title: '制造商', ellipsis: true }, |
||||
|
{ colKey: 'type', title: '机型', ellipsis: true, cell: (_, { row }) => (typeLabel[row.type] || '-') }, |
||||
|
{ colKey: 'onLine', title: '是否在线', ellipsis: true }, |
||||
|
{ colKey: 'locked', title: '锁定状态', ellipsis: true }, |
||||
|
{ colKey: 'workTime', title: '工作时长', ellipsis: true, cell: (_, { row }) => popularTime(row.workTime) || '0s' }, |
||||
|
{ colKey: 'createdAt', title: '添加时间', ellipsis: true, cell: (_, { row }) => formatTime(row.createdAt * 1000), width: 200 }, |
||||
|
{ colKey: 'operation', title: '操作', width: '300px' }, |
||||
|
]; |
||||
|
|
||||
|
function onShowEditor(row = {}) { |
||||
|
eventBus.emit('show-device-editor', row); |
||||
|
} |
||||
|
|
||||
|
const pagination = computed(() => ({ |
||||
|
current: deviceQueries.value.page, |
||||
|
pageSize: deviceQueries.value.pageSize, |
||||
|
total: deviceExtra.value.total, |
||||
|
})); |
||||
|
|
||||
|
function onChangeState(row = {}) { |
||||
|
updateDeviceState(row, { refreshList: true }).then(() => { |
||||
|
MessagePlugin.success('更改成功'); |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onDeleteManufacturer(row = {}) { |
||||
|
deleteDevice(row.id, { refreshList: true }).then(() => { |
||||
|
MessagePlugin.success('成功删除'); |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<BasePanel> |
||||
|
<template #header> |
||||
|
<t-space> |
||||
|
<div class="vertical-line" /> |
||||
|
<div class="header-title">设备管理</div> |
||||
|
</t-space> |
||||
|
</template> |
||||
|
<template #header-extra> |
||||
|
<t-space> |
||||
|
<t-button @click="onShowEditor">录入设备</t-button> |
||||
|
</t-space> |
||||
|
</template> |
||||
|
|
||||
|
<template #top-bar> |
||||
|
<t-space align="center"> |
||||
|
<div>关键字查询</div> |
||||
|
<t-input v-model="search" clearable /> |
||||
|
<t-button @click="onSearchList">查询</t-button> |
||||
|
<t-button theme="default" @click="onResetList">重置</t-button> |
||||
|
</t-space> |
||||
|
</template> |
||||
|
|
||||
|
<t-table |
||||
|
class="table-custom" |
||||
|
row-key="id" |
||||
|
:data="deviceList" |
||||
|
:columns="columns" |
||||
|
cell-empty-content="-" |
||||
|
:pagination="pagination" |
||||
|
@page-change="onPageChange" |
||||
|
> |
||||
|
<template #onLine="{ row }"> |
||||
|
<t-tag theme="success" v-if="row.onLine">在线</t-tag> |
||||
|
<t-tag theme="danger" v-else>离线</t-tag> |
||||
|
</template> |
||||
|
|
||||
|
<template #locked="{ row }"> |
||||
|
<t-tag theme="success" v-if="!row.locked">未锁定</t-tag> |
||||
|
<t-tag theme="danger" v-else>已锁定</t-tag> |
||||
|
</template> |
||||
|
<template #operation="{ row }"> |
||||
|
<t-space align="center"> |
||||
|
<t-popconfirm :content="`确认${!row.locked ? '锁定' : '解锁'}吗？`" @confirm="onChangeState(row)"> |
||||
|
<t-button :theme="!row.locked ? 'danger' : 'success'">{{ !row.locked ? '锁定' : '解锁' }}</t-button> |
||||
|
</t-popconfirm> |
||||
|
<t-popconfirm :content="`确认删除吗？`" @confirm="onDeleteManufacturer(row)"> |
||||
|
<t-button theme="danger">删除</t-button> |
||||
|
</t-popconfirm> |
||||
|
<t-button @click="onShowEditor(row)">编辑</t-button> |
||||
|
</t-space> |
||||
|
</template> |
||||
|
</t-table> |
||||
|
</BasePanel> |
||||
|
|
||||
|
<DeviceEditor /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
} |
||||
|
|
||||
|
.dropdown { |
||||
|
:global { |
||||
|
.t-dropdown__submenu ul { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,117 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, onUnmounted, ref, computed } from 'vue'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
import { useDeviceStore } from '@/stores'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
// import ImageUploader from '@/components/ImageUploader.vue'; |
||||
|
import ManufacturerSelector from '@/components/ManufacturerSelector.vue'; |
||||
|
import { update } from '@/utils/helpers'; |
||||
|
|
||||
|
const visible = ref(false); |
||||
|
|
||||
|
const deviceStore = useDeviceStore(); |
||||
|
const { createDevice, updateDevice } = deviceStore; |
||||
|
|
||||
|
const form = ref(); |
||||
|
const formData = ref({ |
||||
|
id: undefined, |
||||
|
manufacturerId: undefined, |
||||
|
sn: undefined, |
||||
|
type: 1, |
||||
|
}); |
||||
|
const FORM_RULES = { |
||||
|
sn: [{ required: true, message: '请输入飞控ID' }], |
||||
|
manufacturerId: [{ required: true, message: '请选择制造商' }], |
||||
|
type: [{ required: true, message: '请选择' }], |
||||
|
}; |
||||
|
|
||||
|
function onCancel() { |
||||
|
visible.value = false; |
||||
|
form.value.reset(); |
||||
|
} |
||||
|
|
||||
|
function onSubmit({ validateResult }) { |
||||
|
if (validateResult === true) { |
||||
|
if (formData.value.id) { |
||||
|
updateDevice(formData.value, { refreshList: true }).then(() => { |
||||
|
MessagePlugin.success('更新成功'); |
||||
|
onCancel(); |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
createDevice(formData.value, { refreshList: true }).then(() => { |
||||
|
MessagePlugin.success('创建成功'); |
||||
|
onCancel(); |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-device-editor', (row = {}) => { |
||||
|
if (row.id) { |
||||
|
formData.value = update(formData.value, row); |
||||
|
} |
||||
|
visible.value = true; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-device-editor'); |
||||
|
}); |
||||
|
|
||||
|
const options = [{ value: 1, label: '抛投无人机' }, { value: 2, label: '巡检无人机' }]; |
||||
|
|
||||
|
const isEdit = computed(() => !!formData.value?.id); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-dialog |
||||
|
:class="s.root" |
||||
|
v-model:visible="visible" |
||||
|
:close-btn="false" |
||||
|
:footer="null" |
||||
|
@closed="onCancel" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div style="flex: 1; text-align: center;">{{ formData.id ? '更新' : '录入' }}设备</div> |
||||
|
</template> |
||||
|
<t-form |
||||
|
ref="form" |
||||
|
:data="formData" |
||||
|
:rules="FORM_RULES" |
||||
|
colon |
||||
|
@submit="onSubmit" |
||||
|
> |
||||
|
<t-form-item name="id" v-show="false" /> |
||||
|
|
||||
|
<t-form-item label="飞控ID" name="sn"> |
||||
|
<t-input v-model="formData.sn" :disabled="isEdit" /> |
||||
|
</t-form-item> |
||||
|
|
||||
|
<t-form-item label="制造商" name="manufacturerId"> |
||||
|
<ManufacturerSelector v-model="formData.manufacturerId" /> |
||||
|
</t-form-item> |
||||
|
|
||||
|
<t-form-item label="机型" name="type"> |
||||
|
<t-select v-model="formData.type" :options="options" placeholder="请选择机型" /> |
||||
|
</t-form-item> |
||||
|
|
||||
|
<t-form-item> |
||||
|
<t-space> |
||||
|
<t-button theme="primary" type="submit">提交</t-button> |
||||
|
<t-button theme="default" @click="onCancel">取消</t-button> |
||||
|
</t-space> |
||||
|
</t-form-item> |
||||
|
</t-form> |
||||
|
</t-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,105 @@ |
|||||
|
<script setup> |
||||
|
// import { mapState, mapGetters, mapActions } from 'vuex'; |
||||
|
// import _throttle from 'lodash.throttle'; |
||||
|
// import { getAddressLabel } from '../../../utils/cascadeDistrict'; |
||||
|
// import deviceTypes from '../../../config/deviceTypes'; |
||||
|
// import eventBus from '@/utils/eventBus'; |
||||
|
import { onMounted, onUnmounted } from 'vue'; |
||||
|
|
||||
|
// const detail = ref({}); |
||||
|
|
||||
|
// const dynamicInfo = computed(() => { |
||||
|
// // eslint-disable-next-line no-shadow |
||||
|
// const { dynamicInfo } = detail.value; |
||||
|
// return dynamicInfo || {}; |
||||
|
// }); |
||||
|
|
||||
|
// const baseInfo = computed(() => { |
||||
|
// // eslint-disable-next-line no-shadow |
||||
|
// const { baseInfo } = detail.value; |
||||
|
// return baseInfo || {}; |
||||
|
// }); |
||||
|
|
||||
|
// const isVisible = ref(false); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
// |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<t-space align="center"> |
||||
|
<t-divider layout="vertical" /> |
||||
|
<t-statistic title="无人机总数" :value="123456" prefix="$" unit="个" color="blue"> |
||||
|
<template #prefix> |
||||
|
<t-icon name="data-base" /> |
||||
|
</template> |
||||
|
</t-statistic> |
||||
|
<t-divider layout="vertical" /> |
||||
|
<t-statistic title="在线数量" :value="123456" prefix="$" unit="个" color="orange"> |
||||
|
<template #prefix> |
||||
|
<t-icon name="gps" /> |
||||
|
</template> |
||||
|
</t-statistic> |
||||
|
<t-divider layout="vertical" /> |
||||
|
<t-statistic title="总架次时长" :value="123456" prefix="$" unit="h" color="green"> |
||||
|
<template #prefix> |
||||
|
<t-icon name="time" /> |
||||
|
</template> |
||||
|
</t-statistic> |
||||
|
<t-divider layout="vertical" /> |
||||
|
<t-statistic title="总架次数" :value="123456" prefix="$" unit="次" color="red"> |
||||
|
<template #prefix> |
||||
|
<t-icon name="analytics" /> |
||||
|
</template> |
||||
|
</t-statistic> |
||||
|
<t-divider layout="vertical" /> |
||||
|
</t-space> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
//display: flex; |
||||
|
//justify-content: flex-end; |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 10px; |
||||
|
z-index: 1; |
||||
|
//width: 35vh; |
||||
|
//height: 200px; |
||||
|
background-color: fade(#000, 60%); |
||||
|
//border-radius: 4px; |
||||
|
//overflow: hidden; |
||||
|
//transition: right .2s ease; |
||||
|
//pointer-events: none; |
||||
|
box-sizing: border-box; |
||||
|
border: 10px solid transparent; |
||||
|
border-image: url("../../../assets/bg.svg"); |
||||
|
border-image-repeat: stretch; |
||||
|
border-image-slice: 10; |
||||
|
|
||||
|
box-shadow: 0 0 10px 0 var(--td-brand-color); |
||||
|
//&:global::after { |
||||
|
// content: ''; |
||||
|
// position: absolute; |
||||
|
// top: 0; |
||||
|
// bottom: 0; |
||||
|
// right: 0; |
||||
|
// left: 0; |
||||
|
// //background: url("../../../assets/bg.svg") no-repeat scroll center bottom transparent; |
||||
|
//} |
||||
|
|
||||
|
:global { |
||||
|
// |
||||
|
.t-statistic-title { |
||||
|
color: fade(#eee, 60%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,303 @@ |
|||||
|
<script setup> |
||||
|
// import { mapState, mapGetters, mapActions } from 'vuex'; |
||||
|
// import _throttle from 'lodash.throttle'; |
||||
|
// import { getAddressLabel } from '../../../utils/cascadeDistrict'; |
||||
|
// import deviceTypes from '../../../config/deviceTypes'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue'; |
||||
|
|
||||
|
const detail = ref({}); |
||||
|
|
||||
|
const dynamicInfo = computed(() => { |
||||
|
// eslint-disable-next-line no-shadow |
||||
|
const { dynamicInfo } = detail.value; |
||||
|
return dynamicInfo || {}; |
||||
|
}); |
||||
|
|
||||
|
const baseInfo = computed(() => { |
||||
|
// eslint-disable-next-line no-shadow |
||||
|
const { baseInfo } = detail.value; |
||||
|
return baseInfo || {}; |
||||
|
}); |
||||
|
|
||||
|
const isVisible = ref(false); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-real-time-plane', (data = {}) => { |
||||
|
detail.value = data; |
||||
|
isVisible.value = true; |
||||
|
console.log(isVisible.value); |
||||
|
}); |
||||
|
eventBus.on('hide-all-panels', () => { |
||||
|
isVisible.value = false; |
||||
|
console.log(isVisible.value); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-real-time-plane'); |
||||
|
eventBus.off('hide-all-panels'); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root" v-if="isVisible"> |
||||
|
<div class="columns"> |
||||
|
<div class="column custom1" v-if="dynamicInfo.online"> |
||||
|
<div class="columns is-mobile is-gapless is-marginless ui-own-title"> |
||||
|
<div class="column">实时动态信息</div> |
||||
|
<div class="column is-narrow" /> |
||||
|
</div> |
||||
|
<table class="table" v-if="baseInfo.recorderType !== 2"> |
||||
|
<colgroup> |
||||
|
<col width="150"> |
||||
|
<col width="200"> |
||||
|
</colgroup> |
||||
|
<tr> |
||||
|
<th>农机状态</th> |
||||
|
<td>{{ dynamicInfo.landStatus ? '-' : '作业中' }}</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>当前位置</th> |
||||
|
<td /> |
||||
|
</tr> |
||||
|
<!-- <tr>--> |
||||
|
<!-- <th>卫星数</th>--> |
||||
|
<!-- <td>{{ dynamicInfo.satelliteCount }}</td>--> |
||||
|
<!-- </tr>--> |
||||
|
<tr> |
||||
|
<th>定位精度</th> |
||||
|
<td>{{ }}</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>经纬度</th> |
||||
|
<!-- <td>{{ dynamicInfo.lng }}, {{ dynamicInfo.lat }}</td>--> |
||||
|
</tr> |
||||
|
<!-- <tr>--> |
||||
|
<!-- <th>海拔高度</th>--> |
||||
|
<!-- <td>{{ dynamicInfo.altitude }}m</td>--> |
||||
|
<!-- </tr>--> |
||||
|
<tr> |
||||
|
<th>对地高度</th> |
||||
|
<td>{{ dynamicInfo.height }}m</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>水平速度</th> |
||||
|
<td>{{ dynamicInfo.xspeed }}m/s</td> |
||||
|
</tr> |
||||
|
<!-- <tr>--> |
||||
|
<!-- <th>垂直速度</th>--> |
||||
|
<!-- <td>{{ dynamicInfo.yspeed }}m/s</td>--> |
||||
|
<!-- </tr>--> |
||||
|
<!-- <tr>--> |
||||
|
<!-- <th>航向角</th>--> |
||||
|
<!-- <td>{{ dynamicInfo.mha }}°</td>--> |
||||
|
<!-- </tr>--> |
||||
|
<!-- <tr>--> |
||||
|
<!-- <th>俯仰角</th>--> |
||||
|
<!-- <td>{{ dynamicInfo.pa }}°</td>--> |
||||
|
<!-- </tr>--> |
||||
|
<!-- <tr>--> |
||||
|
<!-- <th>横滚角</th>--> |
||||
|
<!-- <td>{{ dynamicInfo.ra }}°</td>--> |
||||
|
<!-- </tr>--> |
||||
|
<tr> |
||||
|
<th>喷洒流速</th> |
||||
|
<td>{{ dynamicInfo.flowSpeed }}L/min</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
<div class="column custom2"> |
||||
|
<div class="columns ui-own-title"> |
||||
|
<div class="column">基本信息</div> |
||||
|
<div class="column" v-if="false"> |
||||
|
<b>违章记录</b> |
||||
|
</div> |
||||
|
</div> |
||||
|
<table class="table"> |
||||
|
<colgroup> |
||||
|
<col width="120"> |
||||
|
<col width="200"> |
||||
|
</colgroup> |
||||
|
<tr> |
||||
|
<th>农机ID</th> |
||||
|
<td>{{ baseInfo.droneId }}</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>农机类型</th> |
||||
|
<td>{{ baseInfo.deviceType }}</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>制造商</th> |
||||
|
<td>{{ baseInfo.zzAccountName }}</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>制造商</th> |
||||
|
<td>{{ baseInfo.zzAccountName }}</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>制造商</th> |
||||
|
<td>{{ baseInfo.zzAccountName }}</td> |
||||
|
</tr> |
||||
|
<tr v-if="false"> |
||||
|
<th>机型</th> |
||||
|
<td>{{ baseInfo.modelName }}</td> |
||||
|
</tr> |
||||
|
<tr v-if="false"> |
||||
|
<th>运营人</th> |
||||
|
<td>{{ baseInfo.owner }}</td> |
||||
|
</tr> |
||||
|
<tr v-if="false"> |
||||
|
<th>实名登记标识</th> |
||||
|
<td>{{ baseInfo.regMark }}</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
<div class="columns ui-own-title" v-if="false"> |
||||
|
<div class="column">动态统计信息</div> |
||||
|
<div class="column"> |
||||
|
<b>历史作业</b> |
||||
|
</div> |
||||
|
</div> |
||||
|
<table class="table" v-if="false"> |
||||
|
<colgroup> |
||||
|
<col width="120"> |
||||
|
<col width="150"> |
||||
|
</colgroup> |
||||
|
<tr> |
||||
|
<th>总作业时长</th> |
||||
|
<td>{{ dynamicInfo.flyTotalDuration }}h</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>总作业里程</th> |
||||
|
<td>{{ dynamicInfo.flyTotalMileage }}km</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>总作业亩数</th> |
||||
|
<td>10000亩</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>飞控总亩数</th> |
||||
|
<td>10000亩</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>总喷洒量</th> |
||||
|
<td>{{ dynamicInfo.sparyTotalAmount }}L</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<th>总作业架次</th> |
||||
|
<td>{{ dynamicInfo.flySeqCount }}</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
//display: flex; |
||||
|
//justify-content: flex-end; |
||||
|
position: absolute; |
||||
|
top: 106px; |
||||
|
right: 10px; |
||||
|
z-index: 1; |
||||
|
width: 35vh; |
||||
|
//height: 200px; |
||||
|
//background-color: fade(#000, 20%); |
||||
|
//border-radius: 4px; |
||||
|
//overflow: hidden; |
||||
|
//transition: right .2s ease; |
||||
|
//pointer-events: none; |
||||
|
|
||||
|
//background-image: url("../../../assets/map-tan-1.png"); |
||||
|
//background-repeat: no-repeat; |
||||
|
//background-size: contain; |
||||
|
//background-size: 100% 100%; |
||||
|
|
||||
|
//box-sizing: border-box; |
||||
|
//border: 10px solid transparent; |
||||
|
//border-image: url("../../../assets/bg.svg"); |
||||
|
//border-image-repeat: stretch; |
||||
|
//border-image-slice: 10; |
||||
|
// |
||||
|
//box-shadow: 0 0 10px 0 var(--td-brand-color); |
||||
|
|
||||
|
//&:global::after { |
||||
|
// content: ''; |
||||
|
// position: absolute; |
||||
|
// top: 0; |
||||
|
// bottom: 0; |
||||
|
// right: 0; |
||||
|
// left: 0; |
||||
|
// //background: url("../../../assets/bg.svg") no-repeat scroll center bottom transparent; |
||||
|
//} |
||||
|
|
||||
|
:global { |
||||
|
//.demo-item { |
||||
|
// width: 100px; |
||||
|
// height: 100px; |
||||
|
// background-color: red; |
||||
|
//} |
||||
|
|
||||
|
.columns { |
||||
|
.custom1 { |
||||
|
min-height: 232px; |
||||
|
background-image: url("../../../assets/map-tan-1-1.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: contain; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.custom2 { |
||||
|
min-height: 246px; |
||||
|
margin-top: -1px; |
||||
|
background-image: url("../../../assets/map-tan-1-2.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: contain; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
th { |
||||
|
color: #27e7dc; |
||||
|
} |
||||
|
|
||||
|
td { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.column { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.ui-own-title { |
||||
|
//background-color: var(--td-brand-color); |
||||
|
color: var(--td-text-color-anti); |
||||
|
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-xl) 0 var(--td-comp-paddingLR-xl); |
||||
|
line-height: 1; |
||||
|
font-weight: bold; |
||||
|
font-size: var(--td-font-size-title-medium); |
||||
|
//.column:first-child:before { |
||||
|
// content: ''; |
||||
|
// display: inline-block; |
||||
|
// width: 3px; |
||||
|
// height: 100%; |
||||
|
// background-color: #fff; |
||||
|
// margin-right: 5px; |
||||
|
// vertical-align: -3px; |
||||
|
//} |
||||
|
//b { |
||||
|
// font-weight: normal; |
||||
|
// border-bottom: 1px solid; |
||||
|
// cursor: pointer; |
||||
|
//} |
||||
|
} |
||||
|
.table { |
||||
|
margin-bottom: 0; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
padding: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,229 @@ |
|||||
|
<script setup> |
||||
|
import { OverlayScrollbars } from 'overlayscrollbars'; |
||||
|
import { computed } from 'vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
// let scrollBar; |
||||
|
const vScroll = { |
||||
|
mounted: (el) => { |
||||
|
// scrollBar = OverlayScrollbars(el, { |
||||
|
OverlayScrollbars(el, { |
||||
|
paddingAbsolute: true, |
||||
|
overflow: { |
||||
|
x: 'hidden', |
||||
|
y: 'scroll', |
||||
|
}, |
||||
|
scrollbars: { |
||||
|
theme: 'os-theme-light', |
||||
|
autoHide: 'leave', |
||||
|
autoHideDelay: 300, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
}; |
||||
|
// function onScrollTo(direction = 'down') { |
||||
|
// const { scrollOffsetElement } = scrollBar.elements(); |
||||
|
// let top; |
||||
|
// if (direction === 'down') { |
||||
|
// top = scrollOffsetElement.scrollTop + 300; |
||||
|
// } |
||||
|
// if (direction === 'up') { |
||||
|
// top = scrollOffsetElement.scrollTop - 300; |
||||
|
// } |
||||
|
// scrollOffsetElement.scrollTo({ |
||||
|
// behavior: 'smooth', |
||||
|
// top, |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
const urlList = computed(() => props.list.map(({ url }) => url)); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :class="s.root"> |
||||
|
<!-- <div class="page-turning-left" @click="onScrollTo('up')">--> |
||||
|
<!-- <t-icon name="chevron-up" />--> |
||||
|
<!-- </div>--> |
||||
|
<div class="container" v-scroll> |
||||
|
<div class="custom-space"> |
||||
|
<template v-for="(item, index) in list" :key="item.id"> |
||||
|
<t-image-viewer |
||||
|
:images="urlList" |
||||
|
:default-index="index" |
||||
|
> |
||||
|
<template #trigger="{ open: onPreview }"> |
||||
|
<div class="image-box"> |
||||
|
<t-image |
||||
|
shape="round" |
||||
|
fit="cover" |
||||
|
:style="{ 'width': '20vh', height: '15vh' }" |
||||
|
:src="item.url" |
||||
|
error="" |
||||
|
> |
||||
|
<template #overlay-content> |
||||
|
<div class="overlay-container"> |
||||
|
<div class="img-type"> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</t-image> |
||||
|
<div class="image-hover" @click="onPreview"> |
||||
|
<span><t-icon name="browse" size="1.4em" /> 预览</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</t-image-viewer> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="!list.length"> |
||||
|
<t-image |
||||
|
shape="round" |
||||
|
fit="cover" |
||||
|
:style="{ 'width': '20vh', height: '15vh' }" |
||||
|
src="" |
||||
|
error="" |
||||
|
> |
||||
|
<template #overlay-content> |
||||
|
<div class="overlay-container"> |
||||
|
<div class="img-type"> |
||||
|
没有上传图片哦 ~ |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</t-image> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="page-turning-right" @click="onScrollTo('down')">--> |
||||
|
<!-- <t-icon name="chevron-down" />--> |
||||
|
<!-- </div>--> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
:global { |
||||
|
.page-turning-left { |
||||
|
background-color: fade(black, 35%); |
||||
|
padding: 0px 24px; |
||||
|
border-top-left-radius: 10px; |
||||
|
border-top-right-radius: 10px; |
||||
|
margin-bottom: 2px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: fade(black, 55%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.page-turning-right { |
||||
|
background-color: fade(black, 35%); |
||||
|
padding: 0px 24px; |
||||
|
border-bottom-left-radius: 10px; |
||||
|
border-bottom-right-radius: 10px; |
||||
|
margin-top: 2px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: fade(black, 55%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
flex: 1; |
||||
|
//background-color: fade(black, 35%); |
||||
|
background-color: var(--td-component-border); |
||||
|
padding: var(--td-comp-paddingTB-s); |
||||
|
border-radius: var(--td-radius-large); |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.custom-space { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: var(--td-comp-margin-l); |
||||
|
|
||||
|
.image-box { |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.overlay-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
.img-quantity { |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
right: 5px; |
||||
|
background-color: fade(black, 60%); |
||||
|
padding: 2px 10px; |
||||
|
border-radius: 40px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 12px; |
||||
|
|
||||
|
.text { |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img-type { |
||||
|
position: absolute; |
||||
|
bottom: 5px; |
||||
|
left: 5px; |
||||
|
background-color: fade(black, 60%); |
||||
|
padding: 2px 15px; |
||||
|
border-radius: 40px; |
||||
|
font-size: 12px; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.image-box { |
||||
|
//width: 40px; |
||||
|
//height: 60px; |
||||
|
display: inline-flex; |
||||
|
position: relative; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: var(--td-radius-small); |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.image-hover { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
opacity: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
color: var(--td-text-color-anti); |
||||
|
line-height: 22px; |
||||
|
transition: 0.2s; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
&:hover .image-hover { |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,178 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, onUnmounted, ref } from 'vue'; |
||||
|
import { REQUEST_UPLOAD_FILE } from '@/config/urls'; |
||||
|
import auth from '@/utils/auth'; |
||||
|
// import { storeToRefs } from 'pinia'; |
||||
|
import { useMediaStore } from '@/stores'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
|
||||
|
const mediaStore = useMediaStore(); |
||||
|
const { getMediaList, createMedia, deleteMedia } = mediaStore; |
||||
|
|
||||
|
const sortieId = ref(); |
||||
|
const visible = ref(false); |
||||
|
|
||||
|
const files = ref([]); |
||||
|
function init() { |
||||
|
if (!sortieId.value) return; |
||||
|
getMediaList(sortieId.value).then(({ data }) => { |
||||
|
(data || []).forEach(item => { |
||||
|
const temp = item; |
||||
|
temp.status = 'success'; |
||||
|
temp.raw = {}; |
||||
|
}); |
||||
|
files.value = [...(data || []), ...files.value]; |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const mediaList = ref([]); |
||||
|
function loadList() { |
||||
|
if (!sortieId.value) return; |
||||
|
getMediaList(sortieId.value).then(({ data }) => { |
||||
|
mediaList.value = [...(data || [])]; |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onCancel() { |
||||
|
files.value = []; |
||||
|
mediaList.value = []; |
||||
|
} |
||||
|
|
||||
|
const subject = ref('image'); |
||||
|
|
||||
|
const ABRIDGE_NAME = [10, 7]; |
||||
|
|
||||
|
const formatResponse = (res) => { |
||||
|
if (!res) { |
||||
|
return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' }; |
||||
|
} |
||||
|
return res; |
||||
|
}; |
||||
|
|
||||
|
function beforeUpload(UploadFile) { |
||||
|
const { type = 'image' } = UploadFile || {}; |
||||
|
if (type.includes('image')) { |
||||
|
subject.value = 'image'; |
||||
|
} |
||||
|
if (type.includes('video')) { |
||||
|
subject.value = 'video'; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
const handleSuccess = ({ currentFiles = [], response = [] } = {}) => { |
||||
|
console.log('aaa', currentFiles, response); |
||||
|
const medias = currentFiles.map(({ name, size, type, status, response: { code, data } }) => { |
||||
|
if (status !== 'success') return null; |
||||
|
if (code !== 200) return null; |
||||
|
let typeInt; |
||||
|
if (type.includes('image')) { |
||||
|
typeInt = 1; |
||||
|
} |
||||
|
if (type.includes('video')) { |
||||
|
typeInt = 2; |
||||
|
} |
||||
|
return { |
||||
|
name, |
||||
|
size, |
||||
|
type: typeInt, |
||||
|
url: data, |
||||
|
}; |
||||
|
}).filter(Boolean); |
||||
|
// const { name, size, type } = currentFiles[0] || {}; |
||||
|
// const { code, data } = response[0] || {}; |
||||
|
// if (code !== 200) return; |
||||
|
// let typeInt; |
||||
|
// if (type.includes('image')) { |
||||
|
// typeInt = 1; |
||||
|
// } |
||||
|
// if (type.includes('video')) { |
||||
|
// typeInt = 2; |
||||
|
// } |
||||
|
const formData = { |
||||
|
id: sortieId.value, |
||||
|
medias, |
||||
|
}; |
||||
|
createMedia(formData).then(() => { |
||||
|
if (!visible.value) return; |
||||
|
loadList(); |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const handleRemove = ({ file } = {}) => { |
||||
|
if (file.status !== 'success') return; |
||||
|
let mediaId; |
||||
|
|
||||
|
if (file.id) { |
||||
|
mediaId = file.id; |
||||
|
} else { |
||||
|
const { response: { data } } = file; |
||||
|
const media = mediaList.value.find(({ url }) => url === data); |
||||
|
mediaId = media?.id; |
||||
|
} |
||||
|
|
||||
|
if (!mediaId) return; |
||||
|
deleteMedia(mediaId).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-media-manage', (row) => { |
||||
|
if (!row.id) return; |
||||
|
sortieId.value = row.id; |
||||
|
init(); |
||||
|
visible.value = true; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-media-manage'); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-dialog |
||||
|
:class="s.root" |
||||
|
v-model:visible="visible" |
||||
|
width="fit-content" |
||||
|
:footer="null" |
||||
|
@closed="onCancel" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div style="flex: 1; text-align: center;">媒体管理</div> |
||||
|
</template> |
||||
|
|
||||
|
<t-upload |
||||
|
v-model="files" |
||||
|
placeholder="支持上传图片、视频文件" |
||||
|
:action="REQUEST_UPLOAD_FILE(subject)" |
||||
|
:headers="{ |
||||
|
Authorization: `Bearer ${auth.getToken()}`, |
||||
|
}" |
||||
|
theme="file-flow" |
||||
|
multiple |
||||
|
:abridge-name="ABRIDGE_NAME" |
||||
|
auto-upload |
||||
|
show-thumbnail |
||||
|
allow-upload-duplicate-file |
||||
|
:format-response="formatResponse" |
||||
|
:before-upload="beforeUpload" |
||||
|
@success="handleSuccess" |
||||
|
@remove="handleRemove" |
||||
|
/> |
||||
|
</t-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,173 @@ |
|||||
|
<script setup> |
||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue'; |
||||
|
// import { REQUEST_UPLOAD_FILE } from '@/config/urls'; |
||||
|
// import auth from '@/utils/auth'; |
||||
|
// import { storeToRefs } from 'pinia'; |
||||
|
import { useMediaStore } from '@/stores'; |
||||
|
import { MessagePlugin } from 'tdesign-vue-next'; |
||||
|
import eventBus from '@/utils/eventBus'; |
||||
|
import ImageBar from '@/views/SortieView/components/ImageBar.vue'; |
||||
|
import VideoPlayer from '@/components/VideoPlayer.vue'; |
||||
|
|
||||
|
const mediaStore = useMediaStore(); |
||||
|
const { getMediaList } = mediaStore; |
||||
|
|
||||
|
const sortieId = ref(); |
||||
|
const visible = ref(false); |
||||
|
|
||||
|
// const files = ref([]); |
||||
|
// function init() { |
||||
|
// if (!sortieId.value) return; |
||||
|
// getMediaList(sortieId.value).then(({ data }) => { |
||||
|
// // data.forEach(item => { |
||||
|
// // const temp = item; |
||||
|
// // temp.status = 'success'; |
||||
|
// // temp.raw = {}; |
||||
|
// // }); |
||||
|
// // files.value = [...data, ...files.value]; |
||||
|
// }).catch(({ message }) => { |
||||
|
// if (message) MessagePlugin.error(message); |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
const mediaList = ref([]); |
||||
|
|
||||
|
const imageList = computed(() => mediaList.value.filter(({ type }) => type === 1)); |
||||
|
const videoList = computed(() => mediaList.value.filter(({ type }) => type === 2)); |
||||
|
|
||||
|
function loadList() { |
||||
|
if (!sortieId.value) return; |
||||
|
getMediaList(sortieId.value).then(({ data = [] } = {}) => { |
||||
|
mediaList.value = [...(data || [])]; |
||||
|
}).catch(({ message }) => { |
||||
|
if (message) MessagePlugin.error(message); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function onCancel() { |
||||
|
mediaList.value = []; |
||||
|
} |
||||
|
|
||||
|
// const subject = ref('image'); |
||||
|
|
||||
|
// const ABRIDGE_NAME = [10, 7]; |
||||
|
// |
||||
|
// const formatResponse = (res) => { |
||||
|
// if (!res) { |
||||
|
// return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' }; |
||||
|
// } |
||||
|
// return res; |
||||
|
// }; |
||||
|
// |
||||
|
// function beforeUpload(UploadFile) { |
||||
|
// const { type = 'image' } = UploadFile || {}; |
||||
|
// if (type.includes('image')) { |
||||
|
// subject.value = 'image'; |
||||
|
// } |
||||
|
// if (type.includes('video')) { |
||||
|
// subject.value = 'video'; |
||||
|
// } |
||||
|
// return true; |
||||
|
// } |
||||
|
|
||||
|
// const handleSuccess = ({ currentFiles = [], response = [] } = {}) => { |
||||
|
// const { name, size, type } = currentFiles[0] || {}; |
||||
|
// const { code, data } = response[0] || {}; |
||||
|
// if (code !== 200) return; |
||||
|
// let typeInt; |
||||
|
// if (type.includes('image')) { |
||||
|
// typeInt = 1; |
||||
|
// } |
||||
|
// if (type.includes('video')) { |
||||
|
// typeInt = 2; |
||||
|
// } |
||||
|
// const formData = { |
||||
|
// id: sortieId.value, |
||||
|
// medias: [{ |
||||
|
// name, |
||||
|
// size, |
||||
|
// type: typeInt, |
||||
|
// url: data, |
||||
|
// }], |
||||
|
// }; |
||||
|
// createMedia(formData).then(() => { |
||||
|
// loadList(); |
||||
|
// }).catch(({ message }) => { |
||||
|
// if (message) MessagePlugin.error(message); |
||||
|
// }); |
||||
|
// }; |
||||
|
|
||||
|
// const handleRemove = ({ file } = {}) => { |
||||
|
// if (file.status !== 'success') return; |
||||
|
// let mediaId; |
||||
|
// |
||||
|
// if (file.id) { |
||||
|
// mediaId = file.id; |
||||
|
// } else { |
||||
|
// const { response: { data } } = file; |
||||
|
// const media = mediaList.value.find(({ url }) => url === data); |
||||
|
// mediaId = media?.id; |
||||
|
// } |
||||
|
// |
||||
|
// if (!mediaId) return; |
||||
|
// deleteMedia(mediaId).catch(({ message }) => { |
||||
|
// if (message) MessagePlugin.error(message); |
||||
|
// }); |
||||
|
// }; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
eventBus.on('show-sortie-detail', (row) => { |
||||
|
if (!row.id) return; |
||||
|
sortieId.value = row.id; |
||||
|
loadList(); |
||||
|
visible.value = true; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
eventBus.off('show-sortie-detail'); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<t-dialog |
||||
|
:class="s.root" |
||||
|
v-model:visible="visible" |
||||
|
mode="full-screen" |
||||
|
:footer="null" |
||||
|
@closed="onCancel" |
||||
|
> |
||||
|
<template #header> |
||||
|
<div style="flex: 1; text-align: center;">查看媒体</div> |
||||
|
</template> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<ImageBar :list="imageList" class="image-bar" /> |
||||
|
|
||||
|
<VideoPlayer :list="videoList" class="video-player" /> |
||||
|
</div> |
||||
|
</t-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" module="s"> |
||||
|
.root { |
||||
|
// |
||||
|
:global { |
||||
|
.container { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
|
||||
|
.video-player { |
||||
|
flex: 1; |
||||
|
margin-left: var(--td-comp-margin-s); |
||||
|
//margin-top: var(--td-comp-margin-s); |
||||
|
border-radius: var(--td-radius-medium); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.t-dialog__position_fullscreen { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue