From 18d5b74d1722f234f13c4383683b40345363cb43 Mon Sep 17 00:00:00 2001
From: xhf <1424913779@qq.com>
Date: Fri, 14 Feb 2025 11:44:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                                    |   2 +-
 src/api/map/map.ts                            |   4 +
 src/views/board/carBoard/index.vue            | 302 +++++++++------
 src/views/board/device/index.vue              |  20 +-
 .../realTimeMap/components/indexPage.vue      |  14 +-
 .../realTimeMap/components/storeDialog.vue    | 352 ++++++++++++++++++
 6 files changed, 572 insertions(+), 122 deletions(-)
 create mode 100644 src/views/mapPage/realTimeMap/components/storeDialog.vue

diff --git a/.env.local b/.env.local
index f0650411..a3752946 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.66:48080'
+VITE_BASE_URL='http://192.168.0.74:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
diff --git a/src/api/map/map.ts b/src/api/map/map.ts
index 3b0f3cec..9d0b041b 100644
--- a/src/api/map/map.ts
+++ b/src/api/map/map.ts
@@ -87,3 +87,7 @@ export const createOrEditOrDelHouseArea = async (data) => {
 export const createOrEditOrDelHouseLane = async (data) => {
   return await request.post({ url: `/system/ware/house-lane/createOrEditOrDel`, data })
 }
+//根据点位获取库位信息列表
+export const houseLocationGetByMapItemId = async (params) => {
+  return await request.get({ url: `/system/ware/house-location/getByMapItemId`, params })
+}
\ No newline at end of file
diff --git a/src/views/board/carBoard/index.vue b/src/views/board/carBoard/index.vue
index 0a269a88..abdcab0e 100644
--- a/src/views/board/carBoard/index.vue
+++ b/src/views/board/carBoard/index.vue
@@ -1,45 +1,40 @@
 <template>
- 
   <ContentWrap>
     <div>
       <div class="new-top-box">
         <div class="new-top-box-left">
           <div class="new-top-box-left-title"> 车辆看板 </div>
-          <div class="new-top-box-left-statistics"> 总数 {{ carStatistics.total || 0 }} </div>
+          <div class="new-top-box-left-statistics" @click="changeRobotStatisticsType(undefined)" :style="{ background: queryParams.robotStatisticsType== undefined ? '#ebf1ff' : 'none' }"> 总数 {{ carStatistics.total || 0 }} </div>
           <div class="grey-line"> </div>
           <!-- <el-divider direction="vertical" /> -->
-          <div style="display: flex; align-items: center" v-if="carStatistics" >
-            <div class="new-top-box-left-item" style="color: #00329f">
+          <div style="display: flex; align-items: center" v-if="carStatistics">
+            <div class="new-top-box-left-item"  @click="changeRobotStatisticsType('inTask')" style="color: #00329f" :style="{background:queryParams.robotStatisticsType== 'inTask' ? '#ebf1ff' : '' }">
               <div class="new-top-box-left-item-name">工作</div>
               <div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
-             
             </div>
             <div class="grey-line"> </div>
-            <div class="new-top-box-left-item" style="color: #e07300;background: #EBF1FF;">
+            <div class="new-top-box-left-item"  @click="changeRobotStatisticsType('charge')" style="color: #e07300; " :style="{background:queryParams.robotStatisticsType== 'charge' ? '#ebf1ff' : '' }">
+              <!-- background: #ebf1ff -->
               <div class="new-top-box-left-item-name">充电</div>
               <div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
-             
-            </div>
-            <div class="grey-line" > </div>
-            <div class="new-top-box-left-item" style="color: #c60606">
-              <div class="new-top-box-left-item-name">异常</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
-              
-            </div>
-            <div class="grey-line" > </div>
-            <div class="new-top-box-left-item" style="color: #f1cd0b">
-              <div class="new-top-box-left-item-name">锁定</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.doLock || 0 }}</div>
-              
-            </div>
-            <div class="grey-line" > </div>
-            <div class="new-top-box-left-item" style="color: #4dc606">
-              <div class="new-top-box-left-item-name">待命</div>
-              <div class="new-top-box-left-item-value">{{ carStatistics.standby || 0 }}</div>
-              
             </div>
             <div class="grey-line"> </div>
-            <div class="new-top-box-left-item" style="color: #7a7a7a">
+            <div class="new-top-box-left-item"  @click="changeRobotStatisticsType('fault')" style="color: #c60606"  :style="{background:queryParams.robotStatisticsType== 'fault' ? '#ebf1ff' : '' }">
+              <div class="new-top-box-left-item-name">异常</div>
+              <div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
+            </div>
+            <div class="grey-line"> </div>
+            <div class="new-top-box-left-item"  @click="changeRobotStatisticsType('doLock')" style="color: #e07300" :style="{background:queryParams.robotStatisticsType== 'doLock' ? '#ebf1ff' : '' }" >
+              <div class="new-top-box-left-item-name">锁定</div>
+              <div class="new-top-box-left-item-value">{{ carStatistics.doLock || 0 }}</div>
+            </div>
+            <div class="grey-line"> </div>
+            <div class="new-top-box-left-item"  @click="changeRobotStatisticsType('standby')" style="color: #4dc606" :style="{background:queryParams.robotStatisticsType== 'standby' ? '#ebf1ff' : '' }">
+              <div class="new-top-box-left-item-name">待命</div>
+              <div class="new-top-box-left-item-value">{{ carStatistics.standby || 0 }}</div>
+            </div>
+            <div class="grey-line"> </div>
+            <div class="new-top-box-left-item"  @click="changeRobotStatisticsType('offline')" style="color: #cccccc" :style="{background:queryParams.robotStatisticsType== 'offline' ? '#ebf1ff' : '' }">
               <div class="new-top-box-left-item-name">离线</div>
               <div class="new-top-box-left-item-value">{{ carStatistics.offline || 0 }}</div>
             </div>
@@ -81,70 +76,137 @@
   </ContentWrap>
   <div class="new-list-box-all">
     <div class="new-list-box">
-      <div class="item" v-for="(item, index) in list" :key="index">
+      <div
+        class="item"
+        v-for="(item, index) in list"
+        :key="index"
+        :style="{ background: item.robotEssenceStatus == 2 ? '#FFDFDF' : '#ffffff' }"
+      >
         <div class="item-top">
-          <div class="item-inner-left-name"> 
-            <div class="item-inner-left-name-inner">
-              {{ item.robotNo }} 
+          <div
+            class="item-inner-left-status"
+            :style="{ backgroundColor: item.onlineStatus == 0 ? '#CCCCCC' : '#52C41A' }"
+          >
+          </div>
+          <div class="item-inner-left-name">
+            <div
+              class="item-inner-left-name-inner"
+              :style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
+            >
+              {{ item.robotNo }}
             </div>
-           </div>
+          </div>
           <div class="item-inner-right-top">
-              <div class="swiper-item-box-top-msg">
-                <el-dropdown>
-                  <div style="flex-shrink: 0">
-                    <el-icon size="20px"><MoreFilled /></el-icon>
-                  </div>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item @click="openForm('update', item.id)">编辑</el-dropdown-item>
-                      <el-dropdown-item @click="clockCar(item)">{{
-                        item.status == 0 ? '解锁' : '锁定'
-                      }}</el-dropdown-item>
-                      <el-dropdown-item @click="deleteCar(item.id)">删除</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </div>
+            <div class="swiper-item-box-top-msg">
+              <el-dropdown>
+                <div style="flex-shrink: 0">
+                  <el-icon size="20px"><MoreFilled /></el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="openForm('update', item.id)">编辑</el-dropdown-item>
+                    <el-dropdown-item @click="clockCar(item)">{{
+                      item.status == 0 ? '解锁' : '锁定'
+                    }}</el-dropdown-item>
+                    <el-dropdown-item @click="deleteCar(item.id)">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </div>
+          </div>
         </div>
         <div class="item-inner">
           <div class="item-inner-left">
-            
             <div class="item-inner-left-img-box">
               <el-image style="width: 100%; height: 100%" :src="item.url" :fit="'fill'" />
             </div>
             <div class="item-inner-left-bottom">
-              <div class="item-inner-left-bottom-btn" @click="goMap(item)"> 地图定位 </div>
-              <div class="item-inner-left-bottom-btn"> 日志查看 </div>
+              <div
+                class="item-inner-left-bottom-btn"
+                @click="goMap(item)"
+                :style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
+              >
+                地图定位
+              </div>
+              <div
+                class="item-inner-left-bottom-btn"
+                :style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
+              >
+                日志查看
+              </div>
             </div>
           </div>
-         <div class="item-inner-right-msg">
+          <div class="item-inner-right-msg" v-if="item.onlineStatus != 0">
             <div class="item-inner-right-msg-item m-b-10">
               <div class="item-inner-right-msg-item-name">电量</div>
-              <div class="item-inner-right-msg-item-value" :style="{color:item.electricity>20?'#4DC606':'#C60606'}" v-if="item.electricity">{{ item.electricity || '' }} %</div>
+              <div
+                class="item-inner-right-msg-item-value"
+                :style="{ color: item.electricity > 20 ? '#4DC606' : '#C60606' }"
+                v-if="item.electricity"
+                >{{ item.electricity || '' }} %</div
+              >
             </div>
             <div class="item-inner-right-msg-item m-b-10">
-              <div class="item-inner-right-msg-item-name">状态</div>
-              <div class="item-inner-right-msg-item-value" >
-                <span v-if="item.robotStatus == 0" style="color: #C60606;">待命</span>
-                <span v-if="item.robotStatus == 1" style="color: #F1CD0B;">暂停</span>
-                <span v-if="item.robotStatus == 2" style="color: #01D3D8;">工作中</span>
-                <span v-if="item.robotStatus == 3" style="color: #4DC606;">待命中</span>
+              <div class="item-inner-right-msg-item-name">车辆状态</div>
+              <div class="item-inner-right-msg-item-value">
+                <span v-if="item.robotEssenceStatus == 2" style="color: #c60606">异常</span>
+                <span v-if="item.robotEssenceStatus == 1" style="color: #f1cd0b">锁定</span>
+                <span v-if="item.robotEssenceStatus == 0" style="color: #4dc606">空闲</span>
+              </div>
+            </div>
+            <div class="item-inner-right-msg-item m-b-10">
+              <div class="item-inner-right-msg-item-name">任务状态</div>
+              <div class="item-inner-right-msg-item-value">
+                <span v-if="item.robotTaskStatus == 1" style="color: #f1cd0b">工作中</span>
+                <span v-if="item.robotTaskStatus == 0" style="color: #01d3d8">待命中</span>
+                <span v-if="item.robotTaskStatus == 2" style="color: #4dc606">充电中</span>
               </div>
             </div>
             <div class="item-inner-right-msg-item m-b-10">
               <div class="item-inner-right-msg-item-name">楼层</div>
-              <div class="item-inner-right-msg-item-value"  v-if="item.floor!==null">{{ item.floor || '' }} </div>
+              <div class="item-inner-right-msg-item-value" v-if="item.floor !== null"
+                >{{ item.floor || '' }}
+              </div>
             </div>
             <div class="item-inner-right-msg-item m-b-10">
               <div class="item-inner-right-msg-item-name">区域</div>
-              <div class="item-inner-right-msg-item-value" v-if="item.area!==null">{{ item.area || '' }} </div>
+              <div class="item-inner-right-msg-item-value" v-if="item.area !== null"
+                >{{ item.area || '' }}
+              </div>
             </div>
             <div class="item-inner-right-msg-item m-b-10">
               <div class="item-inner-right-msg-item-name">信息</div>
-              <div class="item-inner-right-msg-item-value"  v-if="item.msg!==null">{{ item.msg || '' }} </div>
+              <div class="item-inner-right-msg-item-value" v-if="item.msg !== null"
+                >{{ item.msg || '' }}
+              </div>
             </div>
-         </div>
+          </div>
+          <div class="item-inner-right-msg" v-if="item.onlineStatus == 0">
+            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
+              <div class="item-inner-right-msg-item-name">电量</div>
+              <div style="width: 14px; height: 2px; background-color: #4dc606;margin-left: 10px;"> </div>
+            </div>
+            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
+              <div class="item-inner-right-msg-item-name">车辆状态</div>
+              <div style="width: 14px; height: 2px; background-color: #C60606;margin-left: 10px;"> </div>
+            </div>
+            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
+              <div class="item-inner-right-msg-item-name">任务状态</div>
+              <div style="width: 14px; height: 2px; background-color: #4dc606;margin-left: 10px;"> </div>
+            </div>
+            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
+              <div class="item-inner-right-msg-item-name">楼层</div>
+              <div style="width: 14px; height: 2px; background-color: #0D162A;margin-left: 10px;"> </div>
+            </div>
+            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
+              <div class="item-inner-right-msg-item-name">区域</div>
+              <div style="width: 14px; height: 2px; background-color: #0D162A;margin-left: 10px;"> </div>
+            </div>
+            <div class="item-inner-right-msg-item m-b-10" style="align-items: center">
+              <div class="item-inner-right-msg-item-name">信息</div>
+              <div style="width: 14px; height: 2px; background-color: #0D162A;margin-left: 10px;"> </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -156,45 +218,46 @@
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 defineOptions({ name: 'BoardCarBoard' })
 import * as CarApi from '@/api/car/index'
-import { Swiper, SwiperSlide } from 'swiper/vue'
+// import { Swiper, SwiperSlide } from 'swiper/vue'
 // 导入两个组件内的路由守卫API
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 const message = useMessage() // 消息弹窗
 // 引入swiper样式（按需导入）
-import 'swiper/css/pagination' // 轮播图底面的小圆点
-import 'swiper/css/navigation' // 轮播图两边的左右箭头
+// import 'swiper/css/pagination' // 轮播图底面的小圆点
+// import 'swiper/css/navigation' // 轮播图两边的左右箭头
 // import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
 // 引入swiper核心和所需模块
-import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
+// import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
 import createEditDialog from './createEditDialog.vue'
-import 'swiper/css'
+// import 'swiper/css'
 const router = useRouter() // 路由对象
 const createEditDialogRef = ref(null)
 const list = ref([])
 const queryParams = reactive({
   // pageNo: 1,
   // pageSize: 100,
-  robotNo: undefined
+  robotNo: undefined,
+  robotStatisticsType:undefined, //车辆状态类型(待命:standby, 任务中:inTask, 锁定:doLock, 离线:offline, 充电中:charge, 故障:fault)
 })
-const spaceBetween = ref(20)
-const navigation = ref({
-  nextEl: '.swiper-button-next-custome',
-  prevEl: '.swiper-button-prev-custome'
-})
-// 在modules加入要使用的模块
-const modules = [Autoplay, Navigation, Scrollbar]
-// Pagination
-const prevEl = (item, index) => {
-  // console.log('上一张' + index + item)
-}
-const nextEl = () => {
-  // console.log('下一张')
-}
-// 更改当前活动swiper
-const onSlideChange = (swiper) => {
-  // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
-  console.log(swiper.activeIndex)
-}
+// const spaceBetween = ref(20)
+// const navigation = ref({
+//   nextEl: '.swiper-button-next-custome',
+//   prevEl: '.swiper-button-prev-custome'
+// })
+// // 在modules加入要使用的模块
+// const modules = [Autoplay, Navigation, Scrollbar]
+// // Pagination
+// const prevEl = (item, index) => {
+//   // console.log('上一张' + index + item)
+// }
+// const nextEl = () => {
+//   // console.log('下一张')
+// }
+// // 更改当前活动swiper
+// const onSlideChange = (swiper) => {
+//   // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
+//   console.log(swiper.activeIndex)
+// }
 const timerRef = ref(null)
 //查询车辆列表
 const getCarList = async () => {
@@ -225,13 +288,13 @@ const getRobotInformationStatistics = async () => {
   console.log('车辆统计', res)
   if (res) {
     carStatistics.value = res
-    carStatistics.value.total =
-      Number(carStatistics.value.standby) +
-      Number(carStatistics.value.inTask) +
-      Number(carStatistics.value.doLock) +
-      Number(carStatistics.value.offline) +
-      Number(carStatistics.value.fault) +
-      Number(carStatistics.value.charge)
+    // carStatistics.value.total =
+    //   Number(carStatistics.value.standby) +
+    //   Number(carStatistics.value.inTask) +
+    //   Number(carStatistics.value.doLock) +
+    //   Number(carStatistics.value.offline) +
+    //   Number(carStatistics.value.fault) +
+    //   Number(carStatistics.value.charge)
   } else {
     carStatistics.value = {
       standby: 0,
@@ -244,6 +307,12 @@ const getRobotInformationStatistics = async () => {
     }
   }
 }
+
+const changeRobotStatisticsType = (type) => {
+  queryParams.robotStatisticsType = type
+  getCarList()
+}
+
 //新建编辑车辆
 const openForm = (type, id) => {
   createEditDialogRef.value.open(type, id ? id : null)
@@ -338,7 +407,7 @@ onBeforeRouteLeave((to, from, next) => {
 }
 .swiperBox {
   width: 100%;
-  
+
   /* background: rgba(0, 0, 0, 0.3); */
 }
 .swiper-item-box {
@@ -468,6 +537,7 @@ onBeforeRouteLeave((to, from, next) => {
   color: #0d162a;
   flex-shrink: 0;
   background: #ebf1ff;
+  cursor: pointer;
 }
 .grey-line {
   width: 1px;
@@ -483,7 +553,7 @@ onBeforeRouteLeave((to, from, next) => {
     PingFang SC;
   font-weight: 600;
   font-size: 16px;
-  
+
   padding: 5px 10px;
   cursor: pointer;
 }
@@ -545,7 +615,7 @@ input::-webkit-input-placeholder {
   /* background: red; */
   padding: 20px 22px 26px 22px;
   margin-bottom: 12px;
-  height: 222px;
+  height: 230px;
   background: #ffffff;
 }
 .item-inner {
@@ -567,9 +637,9 @@ input::-webkit-input-placeholder {
     PingFang SC;
   font-weight: 600;
   font-size: 14px;
- width: 0;
+  width: 0;
 }
-.item-inner-left-name-inner{
+.item-inner-left-name-inner {
   white-space: nowrap; /* 防止文本换行 */
   overflow: hidden; /* 隐藏超出容器的部分 */
   text-overflow: ellipsis; /* 显示省略号来表示被截断的文本 */
@@ -578,6 +648,7 @@ input::-webkit-input-placeholder {
   width: 124px;
   height: 124px;
   background: #eeeeee;
+  position: relative;
 }
 .item-inner-left-bottom {
   display: flex;
@@ -602,7 +673,7 @@ input::-webkit-input-placeholder {
   flex: 1;
   height: 100%;
 }
-.item-top{
+.item-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -613,28 +684,43 @@ input::-webkit-input-placeholder {
   display: flex;
   justify-content: flex-end;
 }
-.item-inner-right-msg{
+.item-inner-right-msg {
   margin-left: 35px;
   flex: 1;
 }
-.item-inner-right-msg-item{
+.item-inner-right-msg-item {
   width: 100%;
   display: flex;
   flex-shrink: 0;
 }
-.item-inner-right-msg-item-name{
-  font-family: PingFangSC, PingFang SC;
+.item-inner-right-msg-item-name {
+  font-family:
+    PingFangSC,
+    PingFang SC;
   font-weight: 400;
   font-size: 14px;
+  width: 60px;
+  text-align: end;
+  
 }
-.item-inner-right-msg-item-value{
+.item-inner-right-msg-item-value {
   flex: 1;
   margin-left: 8px;
   font-size: 14px;
-  color: #0D162A;
+  color: #0d162a;
+  overflow: hidden;
+  text-overflow: ellipsis;  /* 超出宽度200px后显示省略号 */
+  white-space: nowrap;  /* 限制不允许换行 */
+  width: 0;
 }
-.m-b-10{
+.m-b-10 {
   margin-bottom: 10px;
 }
-
+.item-inner-left-status {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  margin-right: 4px;
+}
 </style>
diff --git a/src/views/board/device/index.vue b/src/views/board/device/index.vue
index 39b31670..9d4500d9 100644
--- a/src/views/board/device/index.vue
+++ b/src/views/board/device/index.vue
@@ -105,18 +105,18 @@
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 defineOptions({ name: 'BoardDevice' })
 import * as DeviceApi from '@/api/device/index'
-import { Swiper, SwiperSlide } from 'swiper/vue'
+// import { Swiper, SwiperSlide } from 'swiper/vue'
 // 导入两个组件内的路由守卫API
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 const message = useMessage() // 消息弹窗
 // 引入swiper样式（按需导入）
-import 'swiper/css/pagination' // 轮播图底面的小圆点
-import 'swiper/css/navigation' // 轮播图两边的左右箭头
+// import 'swiper/css/pagination' // 轮播图底面的小圆点
+// import 'swiper/css/navigation' // 轮播图两边的左右箭头
 // import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
 // 引入swiper核心和所需模块
-import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
+// import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
 import createEditDialog from './createEditDialog.vue'
-import 'swiper/css'
+// import 'swiper/css'
 
 import { formatter } from 'element-plus'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
@@ -130,11 +130,11 @@ const queryParams = reactive({
   deviceNo: undefined,
   deviceType: undefined
 })
-const spaceBetween = ref(20)
-const navigation = ref({
-  nextEl: '.swiper-button-next-custome',
-  prevEl: '.swiper-button-prev-custome'
-})
+// const spaceBetween = ref(20)
+// const navigation = ref({
+//   nextEl: '.swiper-button-next-custome',
+//   prevEl: '.swiper-button-prev-custome'
+// })
 const activeName = ref('-1')
 const handleClick = (tab, event) => {
   console.log(tab, event)
diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue
index 4fa0a2e8..0cc4831b 100644
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
@@ -108,6 +108,7 @@
 import { ref, defineComponent, reactive, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import * as MapApi from '@/api/map/map'
 import WebSocketClient from '../webSocket.js'
+import storeDialog from './storeDialog.vue'
 const imgUrl = ref('')
 
 const socketClient = ref(null)
@@ -133,8 +134,14 @@ const getList = async () => {
     getMapData(data[1][0])
   }
 }
-const storeClick = (item) => {
+//库位双击
+const storeClick = async (item) => {
   console.log(item)
+  let storeData = await MapApi.houseLocationGetByMapItemId({
+    mapId: item.positionMapId,
+    mapItemId: item.id
+  })
+  console.log(storeData)
 }
 const pointList = ref([])
 const getPositionMapListFun = async (positionMapId) => {
@@ -174,6 +181,7 @@ const formatteTypeImg = (type) => {
 const replaceHttpWithWs = (str) => {
   return str.replace(/^http/, 'ws')
 }
+// 连接websocket
 const linkWebSocket = (url) => {
   socketClient.value = new WebSocketClient(url)
   if (socketClient.value) {
@@ -183,11 +191,11 @@ const linkWebSocket = (url) => {
     })
   }
 }
-
+// 发送websocket消息
 const sendMessage = () => {
   socketClient.value.send('Hello, WebSocket!')
 }
-
+// 断开连接
 const disconnect = () => {
   socketClient.value.disconnect()
 }
diff --git a/src/views/mapPage/realTimeMap/components/storeDialog.vue b/src/views/mapPage/realTimeMap/components/storeDialog.vue
new file mode 100644
index 00000000..e786724d
--- /dev/null
+++ b/src/views/mapPage/realTimeMap/components/storeDialog.vue
@@ -0,0 +1,352 @@
+<template>
+  <Dialog v-model="dialogVisible" title="新建任务" width="600" class="task-dialog">
+    <el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules">
+      <el-form-item required label="任务号" prop="taskNo">
+        <el-input v-model="formData.taskNo" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="取货类型" prop="taskDetailList[0].takeType" required>
+        <el-select
+          v-model="formData.taskDetailList[0].takeType"
+          placeholder="请选择取货类型"
+          required
+        >
+          <el-option label="库位" :value="1" />
+          <el-option label="线库" :value="2" />
+          <el-option label="区域" :value="3" />
+        </el-select>
+      </el-form-item>
+      <el-form-item required label="取货位置" prop="taskDetailList[0].takeId">
+        <el-select
+          :disabled="!formData.taskDetailList[0].takeType"
+          v-model="formData.taskDetailList[0].takeId"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请输入取货位置"
+          :remote-method="
+            (query) => {
+              takeRemoteMethod(query, formData.taskDetailList[0])
+            }
+          "
+          :loading="loading"
+        >
+          <el-option
+            v-for="item in formData.taskDetailList[0].takeList"
+            :key="item.id"
+            :label="item.locationNo"
+            :value="item.id"
+          />
+          <template #loading>
+            <svg class="circular" viewBox="0 0 50 50">
+              <circle class="path" cx="25" cy="25" r="20" fill="none" />
+            </svg>
+          </template>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="放货类型" prop="taskDetailList[0].releaseType" required>
+        <el-select v-model="formData.taskDetailList[0].releaseType" placeholder="请选择放货类型">
+          <el-option label="库位" :value="1" />
+          <el-option label="线库" :value="2" />
+          <el-option label="区域" :value="3" />
+        </el-select>
+      </el-form-item>
+      <el-form-item required label="放货位置" prop="taskDetailList[0].releaseId">
+        <el-select
+          :disabled="!formData.taskDetailList[0].releaseType"
+          v-model="formData.taskDetailList[0].releaseId"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请输入放货位置"
+          :remote-method="
+            (query) => {
+              releaseRemoteMethod(query, formData.taskDetailList[0])
+            }
+          "
+          :loading="loading"
+        >
+          <el-option
+            v-for="item in formData.taskDetailList[0].releaseList"
+            :key="item.id"
+            :label="item.locationNo"
+            :value="item.id"
+          />
+          <template #loading>
+            <svg class="circular" viewBox="0 0 50 50">
+              <circle class="path" cx="25" cy="25" r="20" fill="none" />
+            </svg>
+          </template>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="物料信息" prop="skuInfo">
+        <el-input v-model="formData.skuInfo" placeholder="请输入物料信息" />
+      </el-form-item>
+      <el-form-item label="指定车辆" prop="robotNo">
+        <el-select v-model="formData.robotNo" placeholder="请选择车辆">
+          <el-option
+            v-for="car in robotList"
+            :key="car.id"
+            :label="car.robotNo"
+            :value="car.robotNo"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="优先级" prop="priority">
+        <el-input-number
+          placeholder="优先级范围为1-100"
+          v-model="formData.priority"
+          :min="1"
+          :max="100"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item label="其他信息" prop="otherMsg">
+        <el-input
+          v-model="formData.otherMsg"
+          rows="3"
+          type="textarea"
+          placeholder="请输入其他信息"
+        />
+      </el-form-item>
+      <div class="task-tips">
+        <el-text class="mx-1">若需要发起拼接任务，请点击前往</el-text>
+        <el-link type="primary" @click="taskManagement()">任务管理</el-link>
+      </div>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+import * as MapTaskAPi from '@/api/map/mapTask'
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+
+const formData = ref({
+  montageTask: 0, //是否拼接任务（0：不拼接、1：拼接）
+  montageNumber: 1, //	拼接任务数量
+  taskDetailList: [
+    {
+      taskType: 1, //任务类型（1：取放货、2：停车、 3：充电、4：移动、5：仅取货、6：仅放货、7：扫描码、8：检测托盘类型）
+      releaseType: 1, //放货类型 1：库位、2：线库、 3：区域
+      takeType: 1, //取货类型（1：库位、2：线库、 3：区域）
+      releaseId: undefined, //放货位置的id
+      releaseList: [], //放货的名称的列表
+      takeId: undefined, //取货位置的id
+      takeList: [], //取货位置的名称列表
+      robotNo: undefined, //AGV编号
+      needLock: 0, //停车后锁定(0:否、1:是)
+      electricity: undefined //所选车辆电量(充电模式)
+    }
+  ], //任务列表
+  skuInfo: undefined, //物料信息
+  skuBatch: undefined, //	物料批次号
+  skuNumber: undefined, // 物料数量
+  priority: undefined, //	优先级
+  otherMsg: undefined, //	其他信息
+  doCycle: 0, //循环(0:不循环、1：循环)
+  doMoveAll: 0, //是否搬空所选线库/区域(0:不搬空、1：搬空)
+  cycleNumber: 0, //	其他信息
+  remainingCycleNumber: 1, //剩余循环次数，默认1
+  taskNo: undefined, //	任务号
+  taskStatus: 0, //任务状态(0:未开始、1：执行中、2：已完成、3：已取消)
+  taskStage: 0, //任务阶段(0:待执行、1：前往取货、2：取货中、3：运输中、4：放货中、5：结束)
+  startTime: 0, //开始时间
+  endTime: 0 //结束时间
+})
+const formRules = reactive({
+  taskNo: [{ required: true, message: '任务号不能为空', trigger: 'change' }],
+  'taskDetailList[0].takeType': [
+    { required: true, message: '取货类型不能为空', trigger: 'change' }
+  ],
+  'taskDetailList[0].takeId': [{ required: true, message: '取货位置不能为空', trigger: 'change' }],
+  'taskDetailList[0].releaseType': [
+    { required: true, message: '放货类型不能为空', trigger: 'change' }
+  ],
+  'taskDetailList[0].releaseId': [
+    { required: true, message: '放货位置不能为空', trigger: 'change' }
+  ]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  resetForm()
+  getCanUseRobotList()
+  getTaskNo()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await MapTaskAPi.createTask(formData.value)
+    message.success(t('common.createSuccess'))
+    dialogVisible.value = false
+    push({ name: 'taskManagementTaskList' })
+  } finally {
+    formLoading.value = false
+  }
+}
+
+//前往任务管理页面
+const { push } = useRouter()
+const taskManagement = () => {
+  push({ name: 'taskManagementCreateTask' })
+}
+
+//查询能用的车辆
+const robotList = ref([])
+const getCanUseRobotList = async () => {
+  robotList.value = await MapTaskAPi.getCanUseRobot()
+}
+
+//获取任务号
+const getTaskNo = async () => {
+  formData.value.taskNo = await MapTaskAPi.getTaskNo()
+}
+
+//获取取货位置可选的列表
+const getLocationList = async (type, locationNo) => {
+  return await MapTaskAPi.getLocationByName({
+    type, //	放货类型（1：库位、2：线库、 3：区域）
+    locationNo
+  })
+}
+//放货的选择列表
+const loading = ref(false)
+const releaseRemoteMethod = async (query, item) => {
+  if (query) {
+    loading.value = true
+    item.releaseList = await getLocationList(item.releaseType, query)
+    loading.value = false
+  } else {
+    item.releaseList = []
+  }
+}
+//取货的选择列表
+const takeRemoteMethod = async (query, item) => {
+  if (query) {
+    item.takeList = await getLocationList(item.takeType, query)
+  } else {
+    item.takeList = []
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    montageTask: 0, //是否拼接任务（0：不拼接、1：拼接）
+    montageNumber: 0, //	拼接任务数量
+    taskDetailList: [
+      {
+        taskType: 1, //任务类型（1：取放货、2：停车、 3：充电、4：移动、5：仅取货、6：仅放货、7：扫描码、8：检测托盘类型）
+        releaseType: 1, //放货类型 1：库位、2：线库、 3：区域
+        takeType: 1, //取货类型（1：库位、2：线库、 3：区域）
+        releaseId: undefined, //放货位置的id
+        releaseList: [], //放货的名称的列表
+        takeId: undefined, //取货位置的id
+        takeList: [], //取货位置的名称列表
+        robotNo: undefined, //AGV编号
+        needLock: 0, //停车后锁定(0:否、1:是)
+        electricity: undefined //所选车辆电量(充电模式)
+      }
+    ], //任务列表
+    skuInfo: undefined, //物料信息
+    skuBatch: undefined, //	物料批次号
+    skuNumber: undefined, // 物料数量
+    priority: undefined, //	优先级
+    otherMsg: undefined, //	其他信息
+    doCycle: 0, //循环(0:不循环、1：循环)
+    doMoveAll: 0, //是否搬空所选线库/区域(0:不搬空、1：搬空)
+    cycleNumber: 0, //	其他信息
+    remainingCycleNumber: 1, //剩余循环次数，默认1
+    taskNo: undefined, //	任务号
+    taskStatus: 0, //任务状态(0:未开始、1：执行中、2：已完成、3：已取消)
+    taskStage: 0, //任务阶段(0:待执行、1：前往取货、2：取货中、3：运输中、4：放货中、5：结束)
+    startTime: 0, //开始时间
+    endTime: 0 //结束时间
+  }
+  formRef.value?.resetFields()
+}
+</script>
+
+<style lang="scss">
+.task-dialog {
+  .el-dialog__header {
+    border-bottom: none;
+  }
+
+  .el-dialog__footer {
+    border-top: none !important;
+  }
+}
+
+.task-tips {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.el-select-dropdown__loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  font-size: 20px;
+}
+
+.circular {
+  display: inline;
+  height: 30px;
+  width: 30px;
+  animation: loading-rotate 2s linear infinite;
+}
+.path {
+  animation: loading-dash 1.5s ease-in-out infinite;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-width: 2;
+  stroke: var(--el-color-primary);
+  stroke-linecap: round;
+}
+
+@keyframes loading-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+@keyframes custom-spin-move {
+  to {
+    opacity: 1;
+  }
+}
+</style>