实时地图添加sortNum图例

src/views/board/carBoard/createEditDialog.vue

@@ -1,6 +1,8 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="title" width="545px" style="padding: 0">
-    <el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules">
+  <Dialog v-model="dialogVisible" :title="title" width="1000" style="padding: 0">
+    <el-form :model="formData" label-width="110" ref="formRef" :rules="formRules">
+      <el-row :gutter="20">
+        <el-col :span="12">
           <el-form-item label="车辆类型" prop="robotModelId" required>
             <el-select
               v-model="formData.robotModelId"
@@ -16,6 +18,8 @@
               />
             </el-select>
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
           <el-form-item required label="车辆编号" prop="robotNo">
             <el-input
               v-model="formData.robotNo"
@@ -25,15 +29,26 @@
               show-word-limit
             />
           </el-form-item>
-      <el-form-item required label="车辆状态" v-if="formData.id">
-        <el-select v-model="formData.robotTaskModel" placeholder="请选择车辆类型" required>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item required label="车辆状态">
+            <el-select
+              v-model="formData.robotTaskModel"
+              placeholder="请选择车辆类型"
+              required
+              :disabled="!formData.id"
+            >
               <el-option :label="'锁定'" :value="0" />
               <el-option :label="'正常'" :value="1" />
             </el-select>
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
           <el-form-item required label="自动充电电量" prop="autoCharge">
             <el-input-number
-          style="width: 100px"
+              style="width: 130px"
               v-model="formData.autoCharge"
               :disabled="false"
               :controls="false"
@@ -51,6 +66,10 @@
               >建议自动充电电量大于30%</span
             >
           </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
           <el-form-item required label="Mac地址" prop="macAddress">
             <el-input
               v-model="formData.macAddress"
@@ -60,6 +79,8 @@
               show-word-limit
             />
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
           <el-form-item required label="选择范围" placeholder="请选择范围">
             <el-cascader
               :options="floorAreaList"
@@ -68,8 +89,13 @@
               :collapse-tags="false"
               v-model="floorAreaJsonData"
               @change="floorAreaChange"
+              style="width: 100%"
             />
           </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
           <el-form-item label="车辆ip" prop="robotIp">
             <el-input
               v-model="formData.robotIp"
@@ -79,6 +105,8 @@
               show-word-limit
             />
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
           <el-form-item label="车辆端口" prop="robotPort">
             <el-input
               v-model="formData.robotPort"
@@ -88,6 +116,98 @@
               show-word-limit
             />
           </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-form-item label="摄像头配置">
+          <el-button type="primary" @click="addCameraConfig">添加</el-button>
+        </el-form-item>
+      </el-row>
+      <template v-if="formData.cameraAddVOList && formData.cameraAddVOList.length > 0">
+        <div v-for="(item, index) in formData.cameraAddVOList" :key="index" class="camera-item">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item
+                label="摄像头位置"
+                required
+                :prop="`cameraAddVOList[${index}].cameraPosition`"
+                :rules="{ required: true, message: '摄像头位置不能为空', trigger: 'change' }"
+              >
+                <el-select v-model="item.cameraPosition" placeholder="请选择" style="width: 100%">
+                  <el-option
+                    v-for="(type, typeIndex) in cameraType"
+                    :key="typeIndex"
+                    :label="type.label"
+                    :value="type.value"
+                    :disabled="cameraPositionDisable(type)"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item
+                label="摄像头IP"
+                :prop="`cameraAddVOList[${index}].cameraIp`"
+                :rules="{ required: true, message: '摄像头IP不能为空', trigger: 'change' }"
+              >
+                <el-input
+                  v-model="item.cameraIp"
+                  placeholder="请输入摄像头IP"
+                  maxlength="20"
+                  show-word-limit
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item
+                label="摄像头端口"
+                :prop="`cameraAddVOList[${index}].cameraPort`"
+                :rules="{ required: true, message: '摄像头端口不能为空', trigger: 'change' }"
+              >
+                <el-input
+                  v-model="item.cameraPort"
+                  placeholder="请输入摄像头端口"
+                  maxlength="10"
+                  show-word-limit
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item
+                label="摄像头账号"
+                :prop="`cameraAddVOList[${index}].cameraAccount`"
+                :rules="{ required: true, message: '摄像头账号不能为空', trigger: 'change' }"
+              >
+                <el-input
+                  v-model="item.cameraAccount"
+                  placeholder="请输入摄像头账号"
+                  maxlength="30"
+                  show-word-limit
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item
+                label="摄像头密码"
+                :prop="`cameraAddVOList[${index}].cameraPassword`"
+                :rules="{ required: true, message: '摄像头密码不能为空', trigger: 'change' }"
+              >
+                <el-input
+                  v-model="item.cameraPassword"
+                  placeholder="请输入摄像头密码"
+                  maxlength="40"
+                  show-word-limit
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <div class="delete-btn">
+                <el-button type="danger" @click="deleteItem(index)">删除</el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </template>
     </el-form>
 
     <template #footer>
@@ -113,13 +233,60 @@ const formData = ref({
   floorAreaJson: [],
   autoCharge: undefined,
   robotIp: undefined,
-  robotPort: undefined
+  robotPort: undefined,
+  cameraAddVOList: []
 })
 const carModelList = ref([])
 const floorAreaList = ref([])
 const props = { multiple: true }
 const floorAreaJsonData = ref([])
 
+//添加摄像头配置
+const cameraType = ref([
+  {
+    label: '上',
+    value: 0
+  },
+  {
+    label: '左',
+    value: 1
+  },
+  {
+    label: '右',
+    value: 2
+  },
+  {
+    label: '下',
+    value: 3
+  },
+  {
+    label: '后',
+    value: 4
+  }
+])
+const addCameraConfig = () => {
+  if (formData.value.cameraAddVOList.length === cameraType.value.length) {
+    message.warning('已达到最大摄像头数量')
+    return
+  }
+
+  formData.value.cameraAddVOList.push({
+    cameraPosition: '', //摄像头位置(0:上, 1:左, 2:右, 3:下, 4:后)
+    cameraIp: '', //摄像头IP--长度20
+    cameraPort: '', //摄像头端口--长度10
+    cameraAccount: '', //摄像头账号--长度30", example = "24863
+    cameraPassword: '' //摄像头密码--长度40
+  })
+}
+//删除
+const deleteItem = (index) => {
+  formData.value.cameraAddVOList.splice(index, 1)
+}
+//切换位置
+const cameraPositionDisable = (typeItem) => {
+  return formData.value.cameraAddVOList.find((item) => item.cameraPosition === typeItem.value)
+}
+
 const getCarModelList = async () => {
   const res = await CarApi.robotGetAllModel()
   carModelList.value = res
@@ -181,8 +348,6 @@ const open = async (type, id) => {
   } else {
     title.value = '新建'
   }
-  // getCanUseRobotList()
-  // getTaskNo()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -267,7 +432,10 @@ const resetForm = () => {
     robotNo: undefined, //车辆编号
     macAddress: undefined, //mac地址
     floorAreaJson: [],
-    autoCharge: undefined
+    autoCharge: undefined,
+    robotIp: undefined,
+    robotPort: undefined,
+    cameraAddVOList: []
   }
   floorAreaJsonData.value = []
   formRef.value?.resetFields()
@@ -335,4 +503,18 @@ const resetForm = () => {
     opacity: 1;
   }
 }
+
+.camera-item {
+  box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 0px 1px;
+  padding: 16px 8px 0 0;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  border: 1px solid #efefef;
+
+  .delete-btn {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>

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

@@ -215,7 +215,7 @@
     </div>
   </div>
   <!-- 左下角图层 -->
-  <div class="affix-container-left" :style="{ left: boxLeft + 'px' }" v-if="!isAllBoard">
+  <!-- <div class="affix-container-left" :style="{ left: boxLeft + 'px' }" v-if="!isAllBoard">
     <div class="affix-container-left-box">
       <div
         class="affix-container-left-box-item-box"
@@ -271,7 +271,7 @@
         />
       </div>
     </div>
-  </div>
+  </div> -->
 
   <!-- 右下角的功能 -->
   <div class="affix-container-right" v-if="!isAllBoard">

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

@@ -161,6 +161,21 @@
                       </div>
                     </div>
                   </template>
+                  <div>
+                    <div
+                      v-if="item.type === 1 && legendObj.sortNumberShow && item.sortNum"
+                      class="sort-num"
+                      :style="getSortNumStyle(item, index)"
+                    >
+                      {{ item.sortNum }}
+                    </div>
+                    <div
+                      v-if="item.type !== 1 && legendObj.sortNumberShow && item.sortNum"
+                      class="sort-num-location"
+                      :style="getSortNumLocationStyle(item, index)"
+                    >
+                      {{ item.sortNum }}
+                    </div>
                     <div
                       v-if="item.type === 1"
                       :style="{
@@ -209,6 +224,7 @@
                       style="background: #fff"
                       :style="nodeStyle(item, index)"
                     />
+                  </div>
                 </el-tooltip>
               </div>
             </div>
@@ -222,57 +238,75 @@
   <div class="affix-container-left" v-if="!isAllBoard">
     <div class="affix-container-left-box">
       <div
-        class="affix-container-left-box-item-box"
+        class="legend-list"
         :style="{
-          height: legendObj.legendShow ? '84px' : '0',
+          height: legendObj.legendShow ? '126px' : '0',
           overflow: 'hidden',
           transition: 'all 0.3s ease-in-out'
         }"
       >
-        <div class="affix-container-left-box-item">
-          <div class="affix-container-left-box-item-left"> 行驶路线 </div>
-          <img
-            src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
-            class="affix-container-left-box-item-img"
+        <div class="legend-item">
+          <div class="legend-item-left"> 行驶路线 </div>
+          <el-icon
+            class="legend-item-img"
+            size="20"
             v-if="legendObj.driveLineShow"
             @click="changDriveLineShow"
-          />
-          <img
-            src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
-            class="affix-container-left-box-item-img"
+            color="#1677FF"
+            ><View
+          /></el-icon>
+          <el-icon
+            class="legend-item-img"
+            size="20"
             v-if="!legendObj.driveLineShow"
             @click="changDriveLineShow"
-          />
+            color="#444444"
+            ><Hide
+          /></el-icon>
         </div>
-        <div class="affix-container-left-box-item">
-          <div class="affix-container-left-box-item-left"> 车辆 </div>
-          <img
-            src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
-            class="affix-container-left-box-item-img"
+        <div class="legend-item">
+          <div class="legend-item-left"> 车辆 </div>
+          <el-icon
+            class="legend-item-img"
+            size="20"
             v-if="legendObj.carShow"
             @click="changCarShow"
-          />
-          <img
-            src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
-            class="affix-container-left-box-item-img"
+            color="#1677FF"
+            ><View
+          /></el-icon>
+          <el-icon
+            class="legend-item-img"
+            size="20"
             v-if="!legendObj.carShow"
             @click="changCarShow"
-          />
+            color="#444444"
+            ><Hide
+          /></el-icon>
+        </div>
+        <div class="legend-item">
+          <div class="legend-item-left"> 节点ID </div>
+          <el-icon
+            class="legend-item-img"
+            size="20"
+            v-if="legendObj.sortNumberShow"
+            @click="changeSortNumber"
+            color="#1677FF"
+            ><View
+          /></el-icon>
+          <el-icon
+            class="legend-item-img"
+            size="20"
+            v-if="!legendObj.sortNumberShow"
+            @click="changeSortNumber"
+            color="#444444"
+            ><Hide
+          /></el-icon>
         </div>
       </div>
-      <div
-        class="affix-container-left-box-item-bottom"
-        @click="legendObj.legendShow = !legendObj.legendShow"
-      >
-        <div class="affix-container-left-box-item-bottom-left"> 图例 </div>
-        <img
-          src="@/assets/imgs/indexPage/zhankai@2x.png"
-          class="affix-container-left-box-item-bottom-img"
-          :style="{
-            transform: legendObj.legendShow ? 'rotate(180deg)' : 'rotate(0deg)',
-            transition: 'all 0.3s ease-in-out'
-          }"
-        />
+      <div class="legend-item-bottom" @click="legendObj.legendShow = !legendObj.legendShow">
+        <div class="legend-item-bottom-left"> 图例 </div>
+        <el-icon size="22" v-if="legendObj.legendShow" color="#98A4BF"><CaretTop /></el-icon>
+        <el-icon size="22" v-else color="#98A4BF"><CaretBottom /></el-icon>
       </div>
     </div>
   </div>
@@ -364,6 +398,61 @@ const nodeStyle = (item, index) => {
     borderRadius: '3px'
   }
 }
+//sortNum路径点的样式
+const getSortNumStyle = (item, index) => {
+  let leftNum = 0
+  if (item.sortNum.toString().length === 1) {
+    leftNum = 3
+  } else if (item.sortNum.toString().length === 2) {
+    leftNum = 7
+  } else if (item.sortNum.toString().length === 3) {
+    leftNum = 10
+  } else if (item.sortNum.toString().length === 4) {
+    leftNum = 14
+  } else if (item.sortNum.toString().length === 5) {
+    leftNum = 18
+  } else if (item.sortNum.toString().length === 6) {
+    leftNum = 21
+  } else if (item.sortNum.toString().length === 7) {
+    leftNum = 25
+  } else if (item.sortNum.toString().length === 8) {
+    leftNum = 28
+  } else if (item.sortNum.toString().length === 9) {
+    leftNum = 31
+  }
+  return {
+    left: Number(item.locationWidePx) / 2 - leftNum + 'px',
+    top: 6 + 'px'
+  }
+}
+//sortNum非路径点的样式
+const getSortNumLocationStyle = (item, index) => {
+  let leftNum = 0
+  if (item.sortNum.toString().length === 1) {
+    leftNum = 3
+  } else if (item.sortNum.toString().length === 2) {
+    leftNum = 7
+  } else if (item.sortNum.toString().length === 3) {
+    leftNum = 10
+  } else if (item.sortNum.toString().length === 4) {
+    leftNum = 14
+  } else if (item.sortNum.toString().length === 5) {
+    leftNum = 18
+  } else if (item.sortNum.toString().length === 6) {
+    leftNum = 21
+  } else if (item.sortNum.toString().length === 7) {
+    leftNum = 25
+  } else if (item.sortNum.toString().length === 8) {
+    leftNum = 28
+  } else if (item.sortNum.toString().length === 9) {
+    leftNum = 31
+  }
+  return {
+    left: Number(item.locationWidePx) / 2 - leftNum + 'px',
+    top: Number(item.locationDeepPx) / 2 - 2 + 'px'
+  }
+}
+
 //返回设备类型
 const filterTypeFun = (deviceType) => {
   let list = getIntDictOptions(DICT_TYPE.DEVICE_TYPE)
@@ -457,6 +546,7 @@ const changeSizeRaio = (type) => {
 const legendObj = reactive({
   driveLineShow: true,
   carShow: true,
+  sortNumberShow: true,
   legendShow: true
 })
 // 车辆是否显示
@@ -467,6 +557,11 @@ const changCarShow = () => {
 const changDriveLineShow = () => {
   legendObj.driveLineShow = !legendObj.driveLineShow
 }
+//sortNumber 是否显示
+const changeSortNumber = () => {
+  legendObj.sortNumberShow = !legendObj.sortNumberShow
+}
+
 const toggleFullScreen = () => {
   var elem = document.getElementById('indexpage-container') // 获取元素
   if (!document.fullscreenElement) {
@@ -1126,6 +1221,7 @@ onBeforeUnmount(() => {
   position: absolute;
   cursor: pointer;
 }
+
 .affix-container-left {
   position: fixed;
   right: 30px;
@@ -1135,12 +1231,13 @@ onBeforeUnmount(() => {
   .affix-container-left-box {
     width: 144px;
   }
-  .affix-container-left-box-item-box {
+
+  .legend-list {
     width: 100%;
     border-bottom: 1px solid #eeeeee;
     background: #ffffff;
-  }
-  .affix-container-left-box-item {
+
+    .legend-item {
       width: 100%;
       padding: 0 18px;
       height: 42px;
@@ -1148,7 +1245,9 @@ onBeforeUnmount(() => {
       align-items: center;
       justify-content: space-between;
     }
-  .affix-container-left-box-item-left {
+  }
+
+  .legend-item-left {
     font-family:
       PingFangSC,
       PingFang SC;
@@ -1156,13 +1255,10 @@ onBeforeUnmount(() => {
     font-size: 14px;
     color: rgba(0, 0, 0, 0.88);
   }
-  .affix-container-left-box-item-img {
+  .legend-item-img {
     cursor: pointer;
-    flex-shrink: 0;
-    width: 20px;
-    height: 12px;
   }
-  .affix-container-left-box-item-bottom {
+  .legend-item-bottom {
     width: 100%;
     height: 36px;
     display: flex;
@@ -1171,13 +1267,7 @@ onBeforeUnmount(() => {
     cursor: pointer;
     background: #ffffff;
   }
-  .affix-container-left-box-item-bottom-img {
-    cursor: pointer;
-    flex-shrink: 0;
-    width: 12px;
-    height: 7px;
-  }
-  .affix-container-left-box-item-bottom-left {
+  .legend-item-bottom-left {
     cursor: pointer;
     flex-shrink: 0;
     font-family:
@@ -1207,4 +1297,17 @@ onBeforeUnmount(() => {
     margin-left: 8px;
   }
 }
+
+.sort-num {
+  position: absolute;
+  font-size: 0.75rem;
+  user-select: none;
+  color: #000;
+}
+.sort-num-location {
+  position: absolute;
+  font-size: 0.75rem;
+  user-select: none;
+  color: #000;
+}
 </style>