ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf

Browse Source
This commit is contained in:
yyy 2025-02-17 16:07:23 +08:00
commit bc07a1db4f
2 changed files with 206 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/mapPage/realTimeMap/components/indexPage.vue
View File

@ -31,7 +31,11 @@
<div class="indexpage-container" v-if="imgUrl"> <div class="indexpage-container" v-if="imgUrl">
<div class="indexpage-container-box"> <div class="indexpage-container-box">
<img :src="imgUrl" alt="" class="indexpage-container-box-img" /> <img :src="imgUrl" alt="" class="indexpage-container-box-img" />
<div class="indexpage-container-box-point"> <div class="indexpage-container-box-point">
<div class="line-box" v-for="(item, index) in lineList" :key="index" :style="{ left: item.left * radio + 'px', top: item.top * radio + 'px', width: item.distance * radio + 'px', height: item.height * radio + 'px', transform: 'rotate(' + item.angle + 'deg)', backgroundColor: item.color ,transformOrigin: 'left top'}">
</div>
<div <div
class="indexpage-container-box-point-item" class="indexpage-container-box-point-item"
v-for="(item, index) in pointList" v-for="(item, index) in pointList"
@ -120,6 +124,8 @@ import { ref, defineComponent, reactive, nextTick, onMounted, onBeforeUnmount }
import * as MapApi from '@/api/map/map' import * as MapApi from '@/api/map/map'
import WebSocketClient from '../webSocket.js' import WebSocketClient from '../webSocket.js'
import storeDialog from './storeDialog.vue' import storeDialog from './storeDialog.vue'
import { color } from 'echarts'
const imgUrl = ref('') const imgUrl = ref('')
const socketClient = ref(null) const socketClient = ref(null)
@ -155,6 +161,7 @@ const storeClick = async (item) => {
console.log(storeData) console.log(storeData)
storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData))) storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
} }
const lineList = ref([])
const pointList = ref([]) const pointList = ref([])
const getPositionMapListFun = async (positionMapId) => { const getPositionMapListFun = async (positionMapId) => {
// console.log(positionMapId) // console.log(positionMapId)
@ -163,13 +170,50 @@ const getPositionMapListFun = async (positionMapId) => {
if (data && data.length > 0) { if (data && data.length > 0) {
data.forEach((item) => { data.forEach((item) => {
// console.log(JSON.parse(item.dataJson)) // console.log(JSON.parse(item.dataJson))
item.formattedData = JSON.parse(item.dataJson) item.formattedData = item.dataJson ?JSON.parse(item.dataJson):''
item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
item.imgUrl = formatteTypeImg(item.type) item.imgUrl = formatteTypeImg(item.type)
}) })
} }
console.log(data) console.log(data)
pointList.value = data pointList.value = data
console.log(pointList.value)
let lineStyle = calculateDistanceAndAngle({
left: pointList.value[0].locationX,
top: pointList.value[0].locationY
}, {
left: pointList.value[1].locationX,
top: pointList.value[1].locationY
})
console.log(lineStyle)
lineList.value = [{
...lineStyle,
color: '#1677ff',
height: 2,
}]
}
const calculateDistanceAndAngle = (point1, point2) => {
// 计算水平和垂直方向的差值
const dx = point2.left - point1.left;
const dy = point2.top - point1.top;
// 计算两点之间的长度（使用勾股定理）
const distance = Math.sqrt(dx * dx + dy * dy);
// 计算两点连线与水平轴正方向的夹角（弧度）
const angleInRadians = Math.atan2(dy, dx);
// 将弧度转换为角度
const angleInDegrees = angleInRadians * (180 / Math.PI);
return {
distance: distance,
angle: angleInDegrees,
left: point1.left,
top: point1.top
};
} }
const formatteTypeImg = (type) => { const formatteTypeImg = (type) => {
@ -229,6 +273,7 @@ const getMapData = async (item) => {
}) })
imgUrl.value = data imgUrl.value = data
computedRatio() computedRatio()
} }
const radio = ref(1) const radio = ref(1)
const computedRatio = () => { const computedRatio = () => {
@ -353,4 +398,7 @@ onBeforeUnmount(() => {
font-size: 14px; font-size: 14px;
color: #0d162a; color: #0d162a;
} }
.line-box{
position: absolute;
}
</style> </style>

300
src/views/parameterSetting/index.vue
View File

@ -2,12 +2,10 @@
<div class="page"> <div class="page">
<ContentWrap> <ContentWrap>
<div class="top-header"> <div class="top-header">
<span class="title">充电设置</span> <span class="title">参数设置</span>
<div> <div>
<el-button :icon="RefreshRight" @click="resetFormData">重置</el-button> <el-button :icon="RefreshRight" @click="resetFormData">重置</el-button>
<el-button type="primary" @click="submit" :disabled="formLoading" <el-button type="primary" @click="submit" :disabled="formLoading">保存</el-button>
>确认</el-button
>
</div> </div>
</div> </div>
</ContentWrap> </ContentWrap>
@ -23,100 +21,102 @@
<div> <div>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="自动电电量" label-width="146"> <el-form-item label="自动充电阈值" label-width="146">
<div> <el-input-number
<div> v-model="formData.startAutoCharge"
<el-input-number :disabled="false"
v-model="formData.startAutoCharge" :controls="false"
:disabled="false" :precision="0"
:controls="false" :step="1"
:precision="0" type="number"
:step="1" :min="0"
type="number" :max="100"
:min="0" placeholder="自动充电阈值"
:max="100" style="width: 240px;"
placeholder="充电阈值" >
> <template #suffix>
<template #append>%</template> <span>%</span>
</el-input-number> </template>
<span style="margin-left: 10px;">%</span> </el-input-number>
</div> </el-form-item>
<div> </el-col>
<el-input-number <el-col :span="12">
v-model="formData.endAutoCharge" <el-form-item label="自动充电离开阈值" label-width="146">
:disabled="false" <el-input-number
:controls="false" v-model="formData.endAutoCharge"
:precision="0" :disabled="false"
:step="1" :controls="false"
type="number" :precision="0"
:min="0" :step="1"
:max="100" type="number"
placeholder="离开阈值" :min="0"
> :max="100"
<template #append>%</template> placeholder="自动充电离开阈值"
</el-input-number> style="width: 240px;"
<span style="margin-left: 10px;">%</span> >
</div> <template #suffix>
</div> <span>%</span>
</template>
</el-input-number>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="机会充电电量" label-width="146"> <el-form-item label="机会充电电量" label-width="146">
<div> <el-input-number
<div> v-model="formData.chanceChargeStart"
<el-input-number :disabled="false"
v-model="formData.chanceChargeStart" :controls="false"
:disabled="false" :precision="0"
:controls="false" :step="1"
:precision="0" type="number"
:step="1" :min="0"
type="number" :max="100"
:min="0" placeholder="机会充电电量"
:max="100" style="width: 240px;"
placeholder="充电阈值" >
> <template #suffix>
<template #append>%</template> <span>%</span>
</el-input-number> </template>
<span style="margin-left: 10px;">%</span> </el-input-number>
</div> </el-form-item>
<div> </el-col>
<el-input-number
v-model="formData.chanceChargeEnd" <el-col :span="12">
:disabled="false" <el-form-item label="机会充电离开阈值" label-width="146">
:controls="false" <el-input-number
:precision="0" v-model="formData.chanceChargeEnd"
:step="1" :disabled="false"
type="number" :controls="false"
:min="0" :precision="0"
:max="100" :step="1"
placeholder="离开阈值" type="number"
> :min="0"
<template #append>%</template> :max="100"
</el-input-number> placeholder="机会充电离开阈值"
<span style="margin-left: 10px;">%</span> style="width: 240px;"
</div> >
</div> <template #suffix>
<span>%</span>
</template>
</el-input-number>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12"> <el-col :span="24">
<el-form-item label="定时充电时段" label-width="146" style="width: 100%"> <el-form-item label="定时充电时段" label-width="146" style="width: 100%">
<div style="width: 100%;"> <div style="display: flex;">
<div> <el-time-select
<el-time-select
v-model="formData.scheduleChargeStartTime" v-model="formData.scheduleChargeStartTime"
:max-time="formData.scheduleChargeEndTime" :max-time="formData.scheduleChargeEndTime"
placeholder="开始时间" placeholder="开始时间"
start="00:00" start="00:00"
step="00:01" step="00:01"
end="23:59" end="23:59"
style="width: 100%" style="width: 240px;"
/> />
</div>
<div>
<el-time-select <el-time-select
v-model="formData.scheduleChargeEndTime" v-model="formData.scheduleChargeEndTime"
:min-time="formData.scheduleChargeStartTime" :min-time="formData.scheduleChargeStartTime"
@ -124,12 +124,14 @@
start="00:00" start="00:00"
step="00:01" step="00:01"
end="23:59" end="23:59"
style="width: 100%" style="width: 240px;margin-left: 16px;"
/> />
</div> <el-checkbox label="每天" :value="1" style="margin-left: 16px;" :true-value="1" :false-value="0" v-model="formData.everyDay" @change="everyDayChange"/>
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12"> <el-col :span="12">
@ -143,10 +145,12 @@
type="number" type="number"
:min="0" :min="0"
placeholder="充电周期" placeholder="充电周期"
style="width: 240px;"
> >
<template #append>天</template> <template #suffix>
<span>天</span>
</template>
</el-input-number> </el-input-number>
<span style="margin-left: 10px;">天</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -171,16 +175,16 @@
:step="1" :step="1"
type="number" type="number"
:min="0" :min="0"
placeholder="请输入等待时间" placeholder="请输入等待时间"
style="width: 240px;"
> >
<template #append>秒</template> <template #suffix>
<span>S</span>
</template>
</el-input-number> </el-input-number>
<span style="margin-left: 10px;">秒</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</el-card> </el-card>
</el-form> </el-form>
@ -200,35 +204,41 @@ const message = useMessage() // 消息弹窗
const { push } = useRouter() const { push } = useRouter()
const formData = ref({ const formData = ref({
startAutoCharge: undefined, //自动充电开始阈值 startAutoCharge: undefined, //自动充电开始阈值
endAutoCharge: undefined, //自动充电结束阈值 endAutoCharge: undefined, //自动充电结束阈值
chanceChargeStart: undefined, //机会充电开始阈值 chanceChargeStart: undefined, //机会充电开始阈值
chanceChargeEnd: undefined, //机会充电结束阈值 chanceChargeEnd: undefined, //机会充电结束阈值
chanceCycle: undefined, //充满电周期 chanceCycle: undefined, //充满电周期
scheduleChargeStartTime: undefined, //定时充电开始时间 scheduleChargeStartTime: undefined, //定时充电开始时间
scheduleChargeEndTime: undefined, //定时充电结束时间 scheduleChargeEndTime: undefined, //定时充电结束时间
warnWaitTime: undefined, //等待时间 warnWaitTime: undefined, //等待时间
everyDay:0
}) })
const resData = ref(null) const resData = ref(null)
const getConfig = async () => { const getConfig = async () => {
const res = await ParameterSettingAPi.getCommonConfig({configType:1}) const res = await ParameterSettingAPi.getCommonConfig({ configType: 1 })
if(res){ if (res) {
console.log(JSON.parse(res.configStr),res) console.log(JSON.parse(res.configStr), res)
formData.value = JSON.parse(res.configStr) formData.value = JSON.parse(res.configStr)
resData.value = res resData.value = res
} else{ } else {
formData.value = { formData.value = {
startAutoCharge: undefined, //自动充电开始阈值 startAutoCharge: undefined, //自动充电开始阈值
endAutoCharge: undefined, //自动充电结束阈值 endAutoCharge: undefined, //自动充电结束阈值
chanceChargeStart: undefined, //机会充电开始阈值 chanceChargeStart: undefined, //机会充电开始阈值
chanceChargeEnd: undefined, //机会充电结束阈值 chanceChargeEnd: undefined, //机会充电结束阈值
chanceCycle: undefined, //充满电周期 chanceCycle: undefined, //充满电周期
scheduleChargeStartTime: undefined, //定时充电开始时间 scheduleChargeStartTime: undefined, //定时充电开始时间
scheduleChargeEndTime: undefined, //定时充电结束时间 scheduleChargeEndTime: undefined, //定时充电结束时间
warnWaitTime: undefined, //等待时间 warnWaitTime: undefined, //等待时间
everyDay:0
}
resData.value = null
} }
resData.value = null }
}
const everyDayChange = () => {
console.log(formData.value.everyDay)
} }
//重置 //重置
const resetFormData = () => { const resetFormData = () => {
@ -240,53 +250,54 @@ const resetFormData = () => {
chanceCycle: undefined, //充满电周期 chanceCycle: undefined, //充满电周期
scheduleChargeStartTime: undefined, //定时充电开始时间 scheduleChargeStartTime: undefined, //定时充电开始时间
scheduleChargeEndTime: undefined, //定时充电结束时间 scheduleChargeEndTime: undefined, //定时充电结束时间
warnWaitTime: undefined, //等待时间 warnWaitTime: undefined //等待时间
} }
formRef.value?.resetFields() formRef.value?.resetFields()
getConfig() getConfig()
} }
//提交表单 //提交表单
const formRef = ref() const formRef = ref()
const formLoading = ref(false) const formLoading = ref(false)
//校验数组的 //校验数组的
const submit = async () => { const submit = async () => {
if(formData.value.everyDay == 1 && (!formData.value.scheduleChargeStartTime || !formData.value.scheduleChargeEndTime)){
message.warning('勾选每天,定时充电时段不能为空！')
return
}
await formRef.value.validate(async (valid, fields) => { await formRef.value.validate(async (valid, fields) => {
if (valid) { if (valid) {
formLoading.value = true formLoading.value = true
if(resData.value){ if (resData.value) {
let data = { let data = {
configType: resData.value.configType, configType: resData.value.configType,
configStr: JSON.stringify(formData.value), configStr: JSON.stringify(formData.value),
id: resData.value.id id: resData.value.id
} }
try { try {
await ParameterSettingAPi.updateCommonConfig(data) await ParameterSettingAPi.updateCommonConfig(data)
message.success('更新成功') message.success('更新成功')
resetFormData() resetFormData()
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} else { } else {
let data = { let data = {
configType: 1, configType: 1,
configStr: JSON.stringify(formData.value) configStr: JSON.stringify(formData.value)
} }
try { try {
await ParameterSettingAPi.createCommonConfig(data) await ParameterSettingAPi.createCommonConfig(data)
message.success('创建成功') message.success('创建成功')
resetFormData() resetFormData()
} finally { } finally {
formLoading.value = false formLoading.value = false
}
} }
}
} else { } else {
message.warning('请补充完整表单信息！') message.warning('请补充完整表单信息！')
} }
@ -300,6 +311,9 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep( .el-input-number .el-input__inner) {
text-align: left !important;
}
.card-header { .card-header {
display: flex; display: flex;
align-items: center; align-items: center;