Compare commits

...

2 Commits

  1. 9
      web/src/views/HandDevice/Home/components/services/animation.service.ts
  2. 10
      web/src/views/HandDevice/Home/components/services/marker.service.ts
  3. 53
      web/src/views/gas/handdetector/HandDetectorForm.vue

9
web/src/views/HandDevice/Home/components/services/animation.service.ts

@ -138,7 +138,7 @@ export class AnimationService {
}
addAll(markers: MarkerData[]) {
console.time('animationService addAll')
// console.time('animationService addAll')
this.statusColor.clear()
this.statusColorStyleMap.clear()
// this.clear()
@ -151,12 +151,13 @@ export class AnimationService {
markers.forEach((marker) => {
const feature = new Feature({
geometry: new Point(fromLonLat(marker.coordinates)),
markerData: marker
markerData: marker,
rippleColor: marker.statusColor
})
// 设置动画开始时间
// feature.set('animationStart', Date.now())
feature.set('rippleColor', marker.statusColor)
// feature.set('rippleColor', marker.statusColor)
features.push(feature)
if (marker.statusColor) {
this.statusColor.add(marker.statusColor)
@ -164,7 +165,7 @@ export class AnimationService {
})
source?.addFeatures(features)
this.rippleLayer?.setSource(source)
console.timeEnd('animationService addAll')
// console.timeEnd('animationService addAll')
}
show() {

10
web/src/views/HandDevice/Home/components/services/marker.service.ts

@ -42,7 +42,7 @@ export class MarkerService {
*
*/
async updateData(markers: MarkerData[]) {
console.time('create features')
// console.time('create features')
const features: Feature<Point>[] = []
markers.forEach((marker) => {
const feature = new Feature({
@ -54,16 +54,16 @@ export class MarkerService {
feature.setStyle(createMarkerStyle(statusColor))
features.push(feature)
})
console.timeEnd('create features')
// console.timeEnd('create features')
await nextTick()
console.time('add features')
// console.time('add features')
const vectorSource = new VectorSource()
vectorSource.addFeatures(features)
this.markerLayer?.getSource()?.setSource(vectorSource)
console.timeEnd('add features')
// console.timeEnd('add features')
this.getSinglePointsInView()
}
setClusterDistance = debounce(() => {
@ -79,6 +79,8 @@ export class MarkerService {
distance = 80
} else if (zoom <= 10) {
distance = 50
} else if (zoom <= 14) {
distance = 40
} else if (zoom <= 16) {
distance = 20
} else if (zoom <= 17) {

53
web/src/views/gas/handdetector/HandDetectorForm.vue

@ -1,5 +1,5 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" :scroll="true">
<Dialog :title="dialogTitle" v-model="dialogVisible" :scroll="true" width="600px">
<el-form
ref="formRef"
:model="formData"
@ -11,7 +11,12 @@
<el-input v-model="formData.sn" placeholder="请输入SN" />
</el-form-item>
<el-form-item label="持有人" prop="personId">
<el-select v-model="formData.personId" clearable placeholder="请选择持有人" @change="handlePersonIdChange">
<el-select
v-model="formData.personId"
clearable
placeholder="请选择持有人"
@change="handlePersonIdChange"
>
<el-option
v-for="person in personnelList"
:key="person.id"
@ -20,6 +25,22 @@
/>
</el-select>
</el-form-item>
<el-form-item label="部门" prop="deptId">
<el-cascader
class="w-[100%]"
v-model="formData.deptId"
:options="deptList"
:props="{
checkStrictly: true,
label: 'name',
value: 'id',
children: 'children',
emitPath: false
}"
clearable
/>
</el-form-item>
<!-- <el-form-item label="持有人" prop="name">
<el-input v-model="formData.name" placeholder="请输入持有人" />
</el-form-item> -->
@ -117,6 +138,8 @@
<script setup lang="ts">
import { HandDetectorApi, HandDetector } from '@/api/gas/handdetector'
import { PersonnelApi, Personnel } from '@/api/gas/personnel'
import * as DeptApi from '@/api/system/dept'
import { handleTree } from '@/utils/tree'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { Fence } from '@/api/gas/fence'
import { Type } from '@/api/gas/gastype'
@ -164,7 +187,7 @@ const formData = ref<HandDetector>({
})
const formRules = reactive({
sn: [{ required: true, message: 'SN不能为空', trigger: 'blur' }],
personId: [{ required: true, message: '持有人不能为空', trigger: 'blur' }],
personId: [{ required: true, message: '持有人不能为空', trigger: 'blur' }],
// name: [{ required: true, message: '', trigger: 'blur' }],
gasTypeId: [{ required: true, message: '气体类型不能为空', trigger: 'blur' }],
enableStatus: [{ required: true, message: '启用状态不能为空', trigger: 'blur' }]
@ -181,21 +204,28 @@ const getAllPersonnel = async () => {
}
/** 持有人改变时,应用持有人姓名 */
const handlePersonIdChange = () => {
formData.value.name = personnelList.value.find((item) => item.id === formData.value.personId)?.name
formData.value.deptId = personnelList.value.find((item) => item.id === formData.value.personId)?.deptId
formData.value.name = personnelList.value.find(
(item) => item.id === formData.value.personId
)?.name
formData.value.deptId = personnelList.value.find(
(item) => item.id === formData.value.personId
)?.deptId
}
var selectFences=computed(()=>{
var selectFences = computed(() => {
return props.fences.filter((item) => item.type === formData.value.fenceType)
})
/** 围栏类型改变时,应用围栏列表也会改变 */
const fenceTypeChange = () => {
formData.value.fenceIdsArray = []
}
const deptList = ref<any[]>([]) //
function getDeptList() {
DeptApi.getSimpleDeptList().then((res) => {
deptList.value = handleTree(res || [])
})
}
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
@ -203,12 +233,15 @@ const open = async (type: string, id?: number) => {
formType.value = type
resetForm()
getAllPersonnel()
getDeptList()
//
if (id) {
formLoading.value = true
try {
formData.value = await HandDetectorApi.getHandDetector(id)
formData.value.fenceIdsArray = formData.value.fenceIds?formData.value.fenceIds?.split(',') : []
formData.value.fenceIdsArray = formData.value.fenceIds
? formData.value.fenceIds?.split(',')
: []
} finally {
formLoading.value = false
}

Loading…
Cancel
Save