修改问题
This commit is contained in:
xhf
parent
3266d315c6
commit
979be7aa8b
@ -31,7 +31,11 @@
|
||||
<div class="indexpage-container" v-if="imgUrl">
|
||||
<div class="indexpage-container-box">
|
||||
<img :src="imgUrl" alt="" class="indexpage-container-box-img" />
|
||||
|
||||
<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
|
||||
class="indexpage-container-box-point-item"
|
||||
v-for="(item, index) in pointList"
|
||||
@ -110,6 +114,8 @@ import { ref, defineComponent, reactive, nextTick, onMounted, onBeforeUnmount }
|
||||
import * as MapApi from '@/api/map/map'
|
||||
import WebSocketClient from '../webSocket.js'
|
||||
import storeDialog from './storeDialog.vue'
|
||||
import { color } from 'echarts'
|
||||
|
||||
const imgUrl = ref('')
|
||||
|
||||
const socketClient = ref(null)
|
||||
@ -145,6 +151,7 @@ const storeClick = async (item) => {
|
||||
console.log(storeData)
|
||||
storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
|
||||
}
|
||||
const lineList = ref([])
|
||||
const pointList = ref([])
|
||||
const getPositionMapListFun = async (positionMapId) => {
|
||||
// console.log(positionMapId)
|
||||
@ -153,13 +160,50 @@ const getPositionMapListFun = async (positionMapId) => {
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item) => {
|
||||
// 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.imgUrl = formatteTypeImg(item.type)
|
||||
})
|
||||
}
|
||||
console.log(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) => {
|
||||
@ -219,6 +263,7 @@ const getMapData = async (item) => {
|
||||
})
|
||||
imgUrl.value = data
|
||||
computedRatio()
|
||||
|
||||
}
|
||||
const radio = ref(1)
|
||||
const computedRatio = () => {
|
||||
@ -341,4 +386,7 @@ font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #0D162A;
|
||||
}
|
||||
.line-box{
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,12 +2,10 @@
|
||||
<div class="page">
|
||||
<ContentWrap>
|
||||
<div class="top-header">
|
||||
<span class="title">充电设置</span>
|
||||
<span class="title">参数设置</span>
|
||||
<div>
|
||||
<el-button :icon="RefreshRight" @click="resetFormData">重置</el-button>
|
||||
<el-button type="primary" @click="submit" :disabled="formLoading"
|
||||
>确认</el-button
|
||||
>
|
||||
<el-button type="primary" @click="submit" :disabled="formLoading">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
@ -23,100 +21,102 @@
|
||||
<div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="自动电电量" label-width="146">
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="formData.startAutoCharge"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="充电阈值"
|
||||
>
|
||||
<template #append>%</template>
|
||||
</el-input-number>
|
||||
<span style="margin-left: 10px;">%</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="formData.endAutoCharge"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="离开阈值"
|
||||
>
|
||||
<template #append>%</template>
|
||||
</el-input-number>
|
||||
<span style="margin-left: 10px;">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="自动充电阈值" label-width="146">
|
||||
<el-input-number
|
||||
v-model="formData.startAutoCharge"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="自动充电阈值"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<template #suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="自动充电离开阈值" label-width="146">
|
||||
<el-input-number
|
||||
v-model="formData.endAutoCharge"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="自动充电离开阈值"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<template #suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="机会充电电量" label-width="146">
|
||||
<div>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="formData.chanceChargeStart"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="充电阈值"
|
||||
>
|
||||
<template #append>%</template>
|
||||
</el-input-number>
|
||||
<span style="margin-left: 10px;">%</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="formData.chanceChargeEnd"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="离开阈值"
|
||||
>
|
||||
<template #append>%</template>
|
||||
</el-input-number>
|
||||
<span style="margin-left: 10px;">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-input-number
|
||||
v-model="formData.chanceChargeStart"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="机会充电电量"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<template #suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="机会充电离开阈值" label-width="146">
|
||||
<el-input-number
|
||||
v-model="formData.chanceChargeEnd"
|
||||
:disabled="false"
|
||||
:controls="false"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="100"
|
||||
placeholder="机会充电离开阈值"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<template #suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="定时充电时段" label-width="146" style="width: 100%">
|
||||
<div style="width: 100%;">
|
||||
<div>
|
||||
<el-time-select
|
||||
<el-col :span="24">
|
||||
<el-form-item label="定时充电时段" label-width="146" style="width: 100%">
|
||||
<div style="display: flex;">
|
||||
<el-time-select
|
||||
v-model="formData.scheduleChargeStartTime"
|
||||
:max-time="formData.scheduleChargeEndTime"
|
||||
placeholder="开始时间"
|
||||
start="00:00"
|
||||
step="00:01"
|
||||
end="23:59"
|
||||
style="width: 100%"
|
||||
style="width: 240px;"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<el-time-select
|
||||
v-model="formData.scheduleChargeEndTime"
|
||||
:min-time="formData.scheduleChargeStartTime"
|
||||
@ -124,12 +124,14 @@
|
||||
start="00:00"
|
||||
step="00:01"
|
||||
end="23:59"
|
||||
style="width: 100%"
|
||||
style="width: 240px;margin-left: 16px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox label="每天" :value="1" style="margin-left: 16px;" :true-value="1" :false-value="0" v-model="formData.everyDay" @change="everyDayChange"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
@ -143,10 +145,12 @@
|
||||
type="number"
|
||||
:min="0"
|
||||
placeholder="充电周期"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<template #append>天</template>
|
||||
<template #suffix>
|
||||
<span>天</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
<span style="margin-left: 10px;">天</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -171,16 +175,16 @@
|
||||
:step="1"
|
||||
type="number"
|
||||
:min="0"
|
||||
|
||||
placeholder="请输入等待时间"
|
||||
style="width: 240px;"
|
||||
>
|
||||
<template #append>秒</template>
|
||||
<template #suffix>
|
||||
<span>S</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
<span style="margin-left: 10px;">秒</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-form>
|
||||
@ -200,35 +204,41 @@ const message = useMessage() // 消息弹窗
|
||||
const { push } = useRouter()
|
||||
|
||||
const formData = ref({
|
||||
startAutoCharge: undefined, //自动充电开始阈值
|
||||
endAutoCharge: undefined, //自动充电结束阈值
|
||||
chanceChargeStart: undefined, //机会充电开始阈值
|
||||
chanceChargeEnd: undefined, //机会充电结束阈值
|
||||
chanceCycle: undefined, //充满电周期
|
||||
scheduleChargeStartTime: undefined, //定时充电开始时间
|
||||
scheduleChargeEndTime: undefined, //定时充电结束时间
|
||||
warnWaitTime: undefined, //等待时间
|
||||
startAutoCharge: undefined, //自动充电开始阈值
|
||||
endAutoCharge: undefined, //自动充电结束阈值
|
||||
chanceChargeStart: undefined, //机会充电开始阈值
|
||||
chanceChargeEnd: undefined, //机会充电结束阈值
|
||||
chanceCycle: undefined, //充满电周期
|
||||
scheduleChargeStartTime: undefined, //定时充电开始时间
|
||||
scheduleChargeEndTime: undefined, //定时充电结束时间
|
||||
warnWaitTime: undefined, //等待时间
|
||||
everyDay:0
|
||||
})
|
||||
const resData = ref(null)
|
||||
const getConfig = async () => {
|
||||
const res = await ParameterSettingAPi.getCommonConfig({configType:1})
|
||||
if(res){
|
||||
console.log(JSON.parse(res.configStr),res)
|
||||
formData.value = JSON.parse(res.configStr)
|
||||
resData.value = res
|
||||
} else{
|
||||
formData.value = {
|
||||
startAutoCharge: undefined, //自动充电开始阈值
|
||||
endAutoCharge: undefined, //自动充电结束阈值
|
||||
chanceChargeStart: undefined, //机会充电开始阈值
|
||||
chanceChargeEnd: undefined, //机会充电结束阈值
|
||||
chanceCycle: undefined, //充满电周期
|
||||
scheduleChargeStartTime: undefined, //定时充电开始时间
|
||||
scheduleChargeEndTime: undefined, //定时充电结束时间
|
||||
warnWaitTime: undefined, //等待时间
|
||||
const res = await ParameterSettingAPi.getCommonConfig({ configType: 1 })
|
||||
if (res) {
|
||||
console.log(JSON.parse(res.configStr), res)
|
||||
formData.value = JSON.parse(res.configStr)
|
||||
resData.value = res
|
||||
} else {
|
||||
formData.value = {
|
||||
startAutoCharge: undefined, //自动充电开始阈值
|
||||
endAutoCharge: undefined, //自动充电结束阈值
|
||||
chanceChargeStart: undefined, //机会充电开始阈值
|
||||
chanceChargeEnd: undefined, //机会充电结束阈值
|
||||
chanceCycle: undefined, //充满电周期
|
||||
scheduleChargeStartTime: undefined, //定时充电开始时间
|
||||
scheduleChargeEndTime: undefined, //定时充电结束时间
|
||||
warnWaitTime: undefined, //等待时间
|
||||
everyDay:0
|
||||
}
|
||||
resData.value = null
|
||||
}
|
||||
resData.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const everyDayChange = () => {
|
||||
console.log(formData.value.everyDay)
|
||||
}
|
||||
//重置
|
||||
const resetFormData = () => {
|
||||
@ -240,53 +250,54 @@ const resetFormData = () => {
|
||||
chanceCycle: undefined, //充满电周期
|
||||
scheduleChargeStartTime: undefined, //定时充电开始时间
|
||||
scheduleChargeEndTime: undefined, //定时充电结束时间
|
||||
warnWaitTime: undefined, //等待时间
|
||||
warnWaitTime: undefined //等待时间
|
||||
}
|
||||
|
||||
|
||||
formRef.value?.resetFields()
|
||||
getConfig()
|
||||
}
|
||||
|
||||
|
||||
|
||||
//提交表单
|
||||
const formRef = ref()
|
||||
const formLoading = ref(false)
|
||||
//校验数组的
|
||||
|
||||
const submit = async () => {
|
||||
if(formData.value.everyDay == 1 && (!formData.value.scheduleChargeStartTime || !formData.value.scheduleChargeEndTime)){
|
||||
message.warning('勾选每天,定时充电时段不能为空！')
|
||||
return
|
||||
}
|
||||
await formRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
formLoading.value = true
|
||||
if(resData.value){
|
||||
if (resData.value) {
|
||||
let data = {
|
||||
configType: resData.value.configType,
|
||||
configStr: JSON.stringify(formData.value),
|
||||
id: resData.value.id
|
||||
}
|
||||
configType: resData.value.configType,
|
||||
configStr: JSON.stringify(formData.value),
|
||||
id: resData.value.id
|
||||
}
|
||||
|
||||
try {
|
||||
await ParameterSettingAPi.updateCommonConfig(data)
|
||||
message.success('更新成功')
|
||||
resetFormData()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
try {
|
||||
await ParameterSettingAPi.updateCommonConfig(data)
|
||||
message.success('更新成功')
|
||||
resetFormData()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
} else {
|
||||
let data = {
|
||||
configType: 1,
|
||||
configStr: JSON.stringify(formData.value)
|
||||
}
|
||||
configType: 1,
|
||||
configStr: JSON.stringify(formData.value)
|
||||
}
|
||||
|
||||
try {
|
||||
await ParameterSettingAPi.createCommonConfig(data)
|
||||
message.success('创建成功')
|
||||
resetFormData()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
try {
|
||||
await ParameterSettingAPi.createCommonConfig(data)
|
||||
message.success('创建成功')
|
||||
resetFormData()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
message.warning('请补充完整表单信息！')
|
||||
}
|
||||
@ -300,6 +311,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep( .el-input-number .el-input__inner) {
|
||||
text-align: left !important;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user