批量编辑路线

src/views/mapPage/realTimeMap/components-tool/EditNodesAndAlignmentsDialog.vue

@@ -0,0 +1,349 @@
+<template>
+  <!-- 新增设备 -->
+  <Dialog
+    v-model="dialogFormVisible"
+    title="路线批量编辑"
+    width="800"
+    class="edit-nodes-and-alignments-dialog"
+    @close="dialogClose"
+    top="40px"
+  >
+    <el-text type="warning">勾选则代表该属性需批量修改</el-text>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      border
+      :header-cell-style="{ background: '#f5f7fa' }"
+      class="mt-3"
+      :row-class-name="rowClassName"
+      @selection-change="handleSelectionChange"
+      ref="multipleTableRef"
+    >
+      <el-table-column type="selection" width="55" :selectable="selectable" />
+      <el-table-column label="参数名称" prop="label" width="260" />
+      <el-table-column label="参数值" prop="value">
+        <template #default="scope">
+          <div v-if="scope.row.type === 'input1'" class="mx-2">
+            <el-input v-model="form[scope.row.value]" type="number" placeholder="请输入">
+              <template #append>米</template>
+            </el-input>
+          </div>
+          <div v-if="scope.row.type === 'input2'" class="mx-2">
+            <el-input-number
+              style="width: 100%"
+              :step="0.1"
+              controls-position="right"
+              v-model="form[scope.row.value]"
+              :min="0"
+              :max="6"
+              placeholder="请输入"
+            >
+              <template #suffix>
+                <span>m/s</span>
+              </template>
+            </el-input-number>
+          </div>
+          <div v-if="scope.row.type === 'select'" class="mx-2">
+            <template v-if="scope.row.value === 'direction'">
+              <el-select
+                v-model="form[scope.row.value]"
+                placeholder="请选择"
+                @change="directionChange"
+                :disabled="!selectable(scope.row)"
+              >
+                <el-option
+                  v-for="(item, index) in scope.row.option"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+            <template v-else>
+              <el-select
+                v-model="form[scope.row.value]"
+                placeholder="请选择"
+                :disabled="!selectable(scope.row)"
+              >
+                <el-option
+                  v-for="(item, index) in scope.row.option"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm()"> 确定 </el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { reactive, ref, nextTick } from 'vue'
+import * as MapApi from '@/api/map/map'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  positionMapId: {
+    type: String,
+    default: () => ''
+  }
+})
+
+const dialogFormVisible = ref(false) //列表的
+
+const rules = reactive({
+  areaName: [{ required: true, message: '请输入物料区域名称', trigger: 'blur' }],
+  skuInfo: [{ required: true, message: '请输入物料信息', trigger: 'blur' }]
+})
+
+const selectable = (row) => {
+  if (
+    form.value.direction == 1 &&
+    (row.value == 'startToEndToward' || row.value == 'endToStartToward')
+  ) {
+    return false
+  } else if (form.value.direction == 2 && row.value == 'toward') {
+    return false
+  } else {
+    return true
+  }
+}
+
+//新增
+const defaultForm = {
+  expansionZoneFront: 0, //膨胀区域前
+  expansionZoneAfter: 0, //膨胀区域后
+  expansionZoneLeft: 0, //	膨胀区域左
+  expansionZoneRight: 0, //膨胀区域右
+  method: 0, // 行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
+  direction: 2, //方向 1.单向 2.双向
+  forwardSpeedLimit: 1.5, //正向限速
+  reverseSpeedLimit: 0.4, //	反向限速
+  toward: 0, //车头朝向(0:正正 1:正反 2:反正 3:反反 4正随 5随正 6随反 7反随 8随随 如果是单向的话 0代表正 1代表反 2代表随意
+  startToEndToward: 0, //开始点到结束点车头朝向
+  endToStartToward: 0, //结束点到开始点车头朝向
+  collisionAvoidanceFlag: 1 // 是否开启防撞 0否 1是
+}
+const form = ref({ ...defaultForm })
+
+const tableData = ref([
+  { label: '膨胀区域前', value: 'expansionZoneFront', type: 'input1' },
+  { label: '膨胀区域后', value: 'expansionZoneAfter', type: 'input1' },
+  { label: '膨胀区域左', value: 'expansionZoneLeft', type: 'input1' },
+  { label: '膨胀区域右', value: 'expansionZoneRight', type: 'input1' },
+  { label: '正向限速', value: 'forwardSpeedLimit', type: 'input2' },
+  { label: '反向限速', value: 'reverseSpeedLimit', type: 'input2' },
+  {
+    label: '是否开启防撞',
+    value: 'collisionAvoidanceFlag',
+    type: 'select',
+    option: [
+      { label: '开启', value: 1 },
+      { label: '关闭', value: 0 }
+    ]
+  },
+  {
+    label: '行走方法',
+    value: 'method',
+    type: 'select',
+    option: [
+      { label: '直线', value: 0 },
+      { label: '曲线', value: 1 }
+    ]
+  },
+  {
+    label: '方向',
+    value: 'direction',
+    type: 'select',
+    option: [
+      { label: '单向', value: 1 },
+      { label: '双向', value: 2 }
+    ]
+  },
+  {
+    label: '车头朝向',
+    value: 'toward',
+    type: 'select',
+    option: [
+      {
+        value: 0,
+        label: '前进'
+      },
+      {
+        value: 1,
+        label: '倒车'
+      },
+      {
+        value: 2,
+        label: '不限制方向'
+      }
+    ]
+  },
+  {
+    label: '开始点到结束点车头朝向',
+    value: 'startToEndToward',
+    type: 'select',
+    option: [
+      {
+        value: 0,
+        label: '前进'
+      },
+      {
+        value: 1,
+        label: '倒车'
+      },
+      {
+        value: 2,
+        label: '不限制方向'
+      }
+    ]
+  },
+  {
+    label: '结束点到开始点车头朝向',
+    value: 'endToStartToward',
+    type: 'select',
+    option: [
+      {
+        value: 0,
+        label: '前进'
+      },
+      {
+        value: 1,
+        label: '倒车'
+      },
+      {
+        value: 2,
+        label: '不限制方向'
+      }
+    ]
+  }
+])
+
+const open = (list) => {
+  form.value = JSON.parse(JSON.stringify(defaultForm))
+  selectList.value = []
+  dialogFormVisible.value = true
+}
+
+const emit = defineEmits(['addEventListener', 'editNodesAndAlignmentsSucceeded'])
+const dialogClose = () => {
+  emit('addEventListener')
+}
+
+const submitForm = async () => {
+  await checkToward()
+  const batchKeys = selectList.value.map((item) => item.value)
+  const formData = form.value
+  emit('editNodesAndAlignmentsSucceeded', { batchKeys, formData })
+  dialogFormVisible.value = false
+}
+
+const checkToward = () => {
+  //如果是双向
+  if (form.value.direction !== 2) return
+  // 只有selectList中包含endToStartToward和startToEndToward才执行
+  const selectedKeys = selectList.value.map((item) => item.value)
+  if (!(selectedKeys.includes('startToEndToward') && selectedKeys.includes('endToStartToward')))
+    return
+  //车头朝向(0:正正 1:正反 2:反正 3:反反 4正随 5随正 6随反 7反随 8随随
+  if (form.value.startToEndToward === 0 && form.value.endToStartToward === 0) {
+    form.value.toward = 0
+  } else if (form.value.startToEndToward === 0 && form.value.endToStartToward === 1) {
+    form.value.toward = 1
+  } else if (form.value.startToEndToward === 1 && form.value.endToStartToward === 0) {
+    form.value.toward = 2
+  } else if (form.value.startToEndToward === 1 && form.value.endToStartToward === 1) {
+    form.value.toward = 3
+  } else if (form.value.startToEndToward === 0 && form.value.endToStartToward === 2) {
+    form.value.toward = 4
+  } else if (form.value.startToEndToward === 2 && form.value.endToStartToward === 0) {
+    form.value.toward = 5
+  } else if (form.value.startToEndToward === 2 && form.value.endToStartToward === 1) {
+    form.value.toward = 6
+  } else if (form.value.startToEndToward === 1 && form.value.endToStartToward === 2) {
+    form.value.toward = 7
+  } else if (form.value.startToEndToward === 2 && form.value.endToStartToward === 2) {
+    form.value.toward = 8
+  }
+  nextTick(() => {
+    tableData.value.forEach((item, index) => {
+      if (index === 9) {
+        multipleTableRef.value.toggleRowSelection(item, true)
+      }
+    })
+  })
+}
+
+const rowClassName = ({ row }) => {
+  if (
+    form.value.direction == 1 &&
+    (row.value == 'startToEndToward' || row.value == 'endToStartToward')
+  ) {
+    return 'disabled-row'
+  } else if (form.value.direction == 2 && row.value == 'toward') {
+    return 'disabled-row'
+  } else {
+    return ''
+  }
+}
+
+const selectList = ref([])
+const handleSelectionChange = (val) => {
+  selectList.value = val
+}
+
+const multipleTableRef = ref()
+const directionChange = (e) => {
+  if (e === 1) {
+    //单向 - 取消勾选开始点到结束点和结束点到开始点的车头朝向
+    nextTick(() => {
+      tableData.value.forEach((item, index) => {
+        if (index === 10 || index === 11) {
+          multipleTableRef.value.toggleRowSelection(item, false)
+        }
+      })
+    })
+  } else if (e === 2) {
+    //双向 - 取消勾选车头朝向
+    nextTick(() => {
+      tableData.value.forEach((item, index) => {
+        if (index === 9) {
+          multipleTableRef.value.toggleRowSelection(item, false)
+        }
+      })
+    })
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss">
+.edit-nodes-and-alignments-dialog {
+  padding: 0px;
+
+  .el-dialog__footer {
+    padding: 0px 20px 20px 0;
+    border-top: none !important;
+  }
+}
+
+.el-input-number .el-input__inner {
+  text-align: left !important;
+}
+
+.disabled-row {
+  background: #f5f7fa !important;
+  color: #adadad;
+}
+</style>

src/views/mapPage/realTimeMap/components-tool/layerSelectionToolDialog.vue

@@ -53,13 +53,13 @@ const changeUnfold = () => {
   isUnfold.value = !isUnfold.value
 }
 const changeSelectList = (item) => {
+  item.isShow = !item.isShow
   if (item.category === 'node') {
     const types = list.value.filter((item) => !item.isShow).map((item) => item.type)
     emit('layerSelectionSuccess', types)
   } else {
     emit('isCurveDisplayChange')
   }
-  item.isShow = !item.isShow
 }
 
 const open = (item) => {}