修改问题

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -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>

src/views/parameterSetting/index.vue

@@ -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 type="primary" @click="submit" :disabled="formLoading">保存</el-button>
-            >确认</el-button
-          >
         </div>
       </div>
     </ContentWrap>
@@ -23,9 +21,7 @@
         <div>
           <el-row :gutter="24">
             <el-col :span="12">
-              <el-form-item  label="自动电电量" label-width="146">
+              <el-form-item label="自动充电阈值" label-width="146">
-                <div>
-                  <div>
                 <el-input-number
                   v-model="formData.startAutoCharge"
                   :disabled="false"
@@ -35,13 +31,17 @@
                   type="number"
                   :min="0"
                   :max="100"
-                      placeholder="充电阈值"
+                  placeholder="自动充电阈值"
+                  style="width: 240px;"
                 >
-                      <template #append>%</template>
+                  <template #suffix>
+                    <span>%</span>
+                  </template>
                 </el-input-number>
-                    <span style="margin-left: 10px;">%</span>
+              </el-form-item>
-                  </div>
+            </el-col>
-                  <div>
+            <el-col :span="12">
+              <el-form-item label="自动充电离开阈值" label-width="146">
                 <el-input-number
                   v-model="formData.endAutoCharge"
                   :disabled="false"
@@ -51,21 +51,19 @@
                   type="number"
                   :min="0"
                   :max="100"
-                      placeholder="离开阈值"
+                  placeholder="自动充电离开阈值"
+                  style="width: 240px;"
                 >
-                      <template #append>%</template>
+                  <template #suffix>
+                    <span>%</span>
+                  </template>
                 </el-input-number>
-                    <span style="margin-left: 10px;">%</span>
-                  </div>
-                </div>
               </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"
@@ -75,13 +73,18 @@
                   type="number"
                   :min="0"
                   :max="100"
-                      placeholder="充电阈值"
+                  placeholder="机会充电电量"
+                  style="width: 240px;"
                 >
-                      <template #append>%</template>
+                  <template #suffix>
+                    <span>%</span>
+                  </template>
                 </el-input-number>
-                    <span style="margin-left: 10px;">%</span>
+              </el-form-item>
-                  </div>
+            </el-col>
-                  <div>
+
+            <el-col :span="12">
+              <el-form-item label="机会充电离开阈值" label-width="146">
                 <el-input-number
                   v-model="formData.chanceChargeEnd"
                   :disabled="false"
@@ -91,21 +94,20 @@
                   type="number"
                   :min="0"
                   :max="100"
-                      placeholder="离开阈值"
+                  placeholder="机会充电离开阈值"
+                  style="width: 240px;"
                 >
-                      <template #append>%</template>
+                  <template #suffix>
+                    <span>%</span>
+                  </template>
                 </el-input-number>
-                    <span style="margin-left: 10px;">%</span>
-                  </div>
-                </div>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row :gutter="24">
-            <el-col :span="12">
+            <el-col :span="24">
               <el-form-item label="定时充电时段" label-width="146" style="width: 100%">
-                <div style="width: 100%;">
+                    <div style="display: flex;">
-                  <div>
                       <el-time-select
                       v-model="formData.scheduleChargeStartTime"
                       :max-time="formData.scheduleChargeEndTime"
@@ -113,10 +115,8 @@
                       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>
+                    <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>
@@ -208,6 +212,7 @@ const formData = ref({
   scheduleChargeStartTime: undefined, //定时充电开始时间
   scheduleChargeEndTime: undefined, //定时充电结束时间
   warnWaitTime: undefined, //等待时间
+  everyDay:0
 })
 const resData = ref(null)
 const getConfig = async () => {
@@ -226,10 +231,15 @@ const getConfig = async () => {
       scheduleChargeStartTime: undefined, //定时充电开始时间
       scheduleChargeEndTime: undefined, //定时充电结束时间
       warnWaitTime: undefined, //等待时间
+      everyDay:0
     }
     resData.value = null
   }
 }
+
+const everyDayChange = () => {
+  console.log(formData.value.everyDay)
+}
 //重置
 const resetFormData = () => {
   formData.value = {
@@ -240,21 +250,23 @@ 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
@@ -286,7 +298,6 @@ const submit = async () => {
           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;