合并

src/views/board/device/createEditDialog.vue

@@ -26,7 +26,7 @@
           />
           <el-option
             :label="'手动充电'"
-            :value="2"
+            :value="0"
           />
         </el-select>
       </el-form-item>

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

@@ -22,8 +22,9 @@
         <div class="indexpage-container-box-point">
           <!-- 连线 -->
           <div v-if="legendObj.driveLineShow">
-            <div class="line-box" v-for="(item, index) in lineList" :key="index">
+            <div class="line-box">
               <svg id="svg" :width="widthVal" :height="heightVal">
+                <template v-for="(item, index) in lineList" :key="index">
                   <!-- 定义箭头 -->
                   <defs>
                     <marker id="forward-arrow" viewBox="0 0 10 10" refX="10" refY="5" orient="auto">
@@ -36,14 +37,15 @@
                   </defs>
                   <template v-if="item.method == 0">
                     <line
-                    :x1="(Number(item.startPointX) + Number(item.beginWidth) / 2) * radio"
+                      :x1="Number(item.startPointX) * radio"
-                    :y1="(Number(item.startPointY) + Number(item.beginHigh) / 2) * radio"
+                      :y1="Number(item.startPointY) * radio"
-                    :x2="(Number(item.endPointX) + Number(item.endWidth) / 2) * radio"
+                      :x2="Number(item.endPointX) * radio"
-                    :y2="(Number(item.endPointY) + Number(item.endHigh) / 2) * radio"
+                      :y2="Number(item.endPointY) * radio"
-                    stroke="#00329F"
+                      :stroke="item.isSelect ? '#f48924' : '#00329F'"
                       :stroke-width="5 * radio"
                       :marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
                       marker-end="url(#single-arrow)"
+                      @click="handleChooseRoute(item, index)"
                     />
                     <path
                       :d="getLineMidArrowPath(item)"
@@ -59,15 +61,17 @@
                   <template v-else>
                     <path
                       :d="getCurvePath(item)"
-                    :stroke="'#00329F'"
+                      :stroke="item.isSelect ? '#f48924' : '#00329F'"
                       :stroke-width="5 * radio"
                       fill="none"
                       :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
                       :marker-end="
                         item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
                       "
+                      @click="handleChooseRoute(item, index)"
                     />
                   </template>
+                </template>
               </svg>
             </div>
           </div>
@@ -94,7 +98,16 @@
             class="indexpage-container-box-point-item"
             v-for="(item, index) in pointList"
             :key="index"
-            :style="{ left: item.locationX * radio + 'px', top: item.locationY * radio + 'px' }"
+            :style="{
+              left:
+                (item.locationX - item.locationWide / 2 / nowObject.showYamlJson.resolution / 100) *
+                  radio +
+                'px',
+              top:
+                (item.locationY - item.locationDeep / 2 / nowObject.showYamlJson.resolution / 100) *
+                  radio +
+                'px'
+            }"
           >
             <!-- 库位点 -->
             <div
@@ -225,8 +238,8 @@
               class="indexpage-container-box-point-item-inner"
               v-if="item.type == 5"
               :style="{
-                width: 40 * radio + 'px',
+                width: 150 * radio + 'px',
-                height: 40 * radio + 'px'
+                height: 150 * radio + 'px'
               }"
             >
               <div>
@@ -246,8 +259,8 @@
               class="indexpage-container-box-point-item-inner"
               v-if="item.type == 6"
               :style="{
-                width: 40 * radio + 'px',
+                width: 150 * radio + 'px',
-                height: 40 * radio + 'px'
+                height: 150 * radio + 'px'
               }"
             >
               <div>
@@ -335,7 +348,7 @@
         class="affix-container-left-box-item-bottom"
         @click="legendObj.legendShow = !legendObj.legendShow"
       >
-        <div class="affix-container-left-box-item-bottom-left"> 图层 </div>
+        <div class="affix-container-left-box-item-bottom-left"> 图例 </div>
         <img
           src="@/assets/imgs/indexPage/zhankai@2x.png"
           alt=""
@@ -404,6 +417,7 @@ import { color } from 'echarts'
 import { resetDragPosition } from '@/utils/drag'
 import carDialog from './carDialog.vue'
 import { is } from 'bpmn-js/lib/util/ModelUtil'
+import JSONBigInt from 'json-bigint'
 const imgUrl = ref('')
 const carDialogRef = ref(null)
 const socketClient = ref(null)
@@ -446,12 +460,36 @@ const changeIsDrag = () => {
     }
   })
 }
+
+const handleChooseRoute = (val, i) => {
+  // console.log('============================', val)
+  if (lineList.value.length) {
+    if (val.isSelect) {
+      lineList.value.forEach((item, index) => {
+        if (index == i) {
+          item.isSelect = false
+        } else {
+          item.isSelect = false
+        }
+      })
+    } else {
+      lineList.value.forEach((item, index) => {
+        if (index == i) {
+          item.isSelect = true
+        } else {
+          item.isSelect = false
+        }
+      })
+    }
+  }
+}
+
 // 获取曲线的路径
 const getCurvePath = (curve) => {
-  let startPointX = (Number(curve.startPointX) + Number(curve.beginWidth) / 2) * radio.value
+  let startPointX = Number(curve.startPointX) * radio.value
-  let startPointY = (Number(curve.startPointY) + Number(curve.beginHigh) / 2) * radio.value
+  let startPointY = Number(curve.startPointY) * radio.value
-  let endPointX = (Number(curve.endPointX) + Number(curve.endWidth) / 2) * radio.value
+  let endPointX = Number(curve.endPointX) * radio.value
-  let endPointY = (Number(curve.endPointY) + Number(curve.endHigh) / 2) * radio.value
+  let endPointY = Number(curve.endPointY) * radio.value
 
   return `M ${startPointX} ${startPointY} C ${curve.beginControlX * radio.value} ${curve.beginControlY * radio.value}, ${curve.endControlX * radio.value} ${curve.endControlY * radio.value}, ${endPointX} ${endPointY}`
 }
@@ -621,7 +659,30 @@ const getPositionMapListFun = async (positionMapId) => {
   // console.log(data)
   pointList.value = data
 
-  // console.log(pointList.value)
+  console.log('=======================', pointList.value)
+  pointList.value.forEach((item) => {
+    if (item.type === 1) {
+      item.locationDeep = 40
+      item.locationWide = 40
+    } else if (item.type === 5 || item.type === 6) {
+      item.locationDeep = 150
+      item.locationWide = 150
+    } else if (item.type === 2) {
+      //库位点
+      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.locationDeep = item.dataList[0].locationDeep
+      item.locationWide = item.dataList[0].locationWide
+    } else if (item.type === 3) {
+      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.locationDeep = item.dataObj.locationDeep
+      item.locationWide = item.dataObj.locationWide
+    } else if (item.type === 4) {
+      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.locationDeep = item.dataObj.locationDeep
+      item.locationWide = item.dataObj.locationWide
+    } else if (item.type === 7) {
+    }
+  })
   // let lineStyle = calculateDistanceAndAngle(
   //   {
   //     left: pointList.value[0].locationX,
@@ -747,7 +808,7 @@ const disconnect = () => {
 }
 //获取扫描图
 const getMapData = async (item) => {
-  console.log('============', JSON.parse(item.yamlJson))
+  // console.log('============', JSON.parse(item.yamlJson))
   nowObject.value = JSON.parse(JSON.stringify(item))
   nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
   let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`