车位2是5、6号机共用

components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACol: typeof import('ant-design-vue/es')['Col']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     AInput: typeof import('ant-design-vue/es')['Input']
     APopover: typeof import('ant-design-vue/es')['Popover']

src/App.vue

@@ -1,7 +1,11 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+</script>
 
 <template>
-  <router-view />
+  <a-config-provider :locale="zhCN">
+    <router-view />
+  </a-config-provider>
 </template>
 
 <style scoped></style>

src/router/index.ts

@@ -3,6 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    {
+      path: '/',
+      name: 'selectCar',
+      component: () => import('@/views/home/SelectCar.vue'),
+    },
     {
       path: '/car/:ccmNo/:positionNo',
       name: 'home',

src/views/home/HomePage.vue

@@ -101,7 +101,26 @@
             <a-col :span="5" class="vehicle-info-content-item flex items-center">
               <div class="vehicle-info-title">铸机</div>
               <a-divider type="vertical" style="background-color: #1e91bb" />
-              <div class="vehicle-info-desc">{{ vehicleInfo.ccmNo_dictText }}</div>
+              <a-select
+                ref="selectCcmNoRef"
+                class="select-zj"
+                v-if="vehicleInfo.ccmNo === '0' && String(vehicleInfo.positionNum) == '2'"
+                size="large"
+                :open="selectCcmNoOpen"
+                placeholder="请选择铸机"
+                v-model:value="selectCcmNo"
+                @change="ccmNoChange"
+                @focus="selectCcmNoOpen = true"
+                @blur="selectCcmNoOpen = false"
+              >
+                <a-select-option value="5" label="China">
+                  <span role="img" aria-label="5zj" class="vehicle-select-option zj5">5#机</span>
+                </a-select-option>
+                <a-select-option value="6" label="USA">
+                  <span role="img" aria-label="6zj" class="vehicle-select-option zj6">6#机</span>
+                </a-select-option>
+              </a-select>
+              <div class="vehicle-info-desc" v-else>{{ vehicleInfo.ccmNo_dictText }}</div>
             </a-col>
             <a-col :span="5" class="vehicle-info-content-item green flex items-center">
               <div class="vehicle-info-title">班组</div>
@@ -172,8 +191,7 @@ import type { VehicleInfo, VehicleResponse } from './types'
 
 const router = useRouter()
 const route = useRoute()
-const ccmNo = route.params.ccmNo || '5'
-const positionNo = route.params.positionNo || '1'
+const { ccmNo, positionNo } = route.params
 
 const loading = ref(false)
 const vehicleInfo = ref<VehicleInfo>({
@@ -194,10 +212,18 @@ const vehicleInfo = ref<VehicleInfo>({
   amountTotal: 0,
   licensePlateStatus: 0,
   hasDestination: false,
+  positionNum: '',
 })
 
+const selectCcmNo = ref<string>('')
+const selectCcmNoRef = ref()
+const selectCcmNoOpen = ref(false)
+
 // 获取目的地信息
 const getDestinationOptions = computed(() => {
+  if (!ccmNo || !destinationOptions[String(ccmNo)]) {
+    return []
+  }
   return destinationOptions[String(ccmNo)].map((oitem: MConfigProps) => oitem)
 })
 
@@ -247,7 +273,7 @@ const getVehicleInfo = () => {
       params: {
         column: 'createTime',
         order: 'desc',
-        ccmNo: ccmNo || '5',
+        ccmNo: positionNo === '2' ? '0' : ccmNo,
         positionNum: positionNo,
         pageNo: 1,
         pageSize: 1,
@@ -315,6 +341,12 @@ const { start, stop } = useTimeoutFn(() => {
 
 // 按钮操作
 const handleClick = (type: string) => {
+  if (positionNo === '2' && !['5', '6'].includes(vehicleInfo.value.ccmNo)) {
+    message.warning('请先选择铸机！')
+    selectCcmNoRef.value.focus()
+    return
+  }
+
   if (type === 'confirmCar') {
     visible.value = false
     Modal.confirm({
@@ -328,6 +360,7 @@ const handleClick = (type: string) => {
         editInfo(
           {
             licensePlate: vehicleInfo.value.licensePlate,
+            ccmNo: '',
           },
           type,
         )
@@ -398,7 +431,39 @@ const handleClick = (type: string) => {
   }
 }
 
-const editInfo = (params: { licensePlate?: string }, type: string) => {
+// 更改铸机号
+const ccmNoChange = (e: string) => {
+  console.log('changeCcmNo', e)
+  Modal.confirm({
+    iconType: 'warning',
+    centered: true,
+    title: h('div', [
+      h('span', '确定要把铸机修改为 '),
+      h(
+        'span',
+        {
+          style: {
+            color: '#f5222d',
+            fontSize: '36px',
+          },
+        },
+        `【 ${e}#机 】`,
+      ),
+    ]),
+    content: () => `注：确认修改后，不能再次修改 ！`,
+    class: 'confirm-destination-modal',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      editInfo({ ccmNo: e, licensePlate: '' }, 'confirmCar')
+    },
+    onCancel: () => {
+      selectCcmNo.value = ''
+    },
+  })
+}
+
+const editInfo = (params: { licensePlate?: string; ccmNo?: string }, type: string) => {
   stop()
   loading.value = true
   axios
@@ -648,6 +713,14 @@ onUnmounted(() => {
         }
       }
 
+      .select-zj {
+        width: 130px;
+
+        :deep(.ant-select-selector) {
+          border: 2px solid #ff4d4f;
+        }
+      }
+
       .ant-divider {
         height: 28px;
         margin-bottom: -2px;
@@ -737,6 +810,19 @@ onUnmounted(() => {
     cursor: pointer;
   }
 }
+
+.vehicle-select-option {
+  font-size: 18px;
+  font-weight: bold;
+
+  &.zj5 {
+    color: #f50;
+  }
+
+  &.zj6 {
+    color: #108ee9;
+  }
+}
 </style>
 <style lang="less">
 .confirm-destination-modal {

src/views/home/SelectCar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="select-car flex items-center justify-center">
+    <a-row class="car-num" :gutter="[16, 16]">
+      <a-col :span="12" v-for="(item, index) in 4" :key="'car' + index">
+        <div
+          class="col-content flex flex-col items-center justify-center"
+          @click="onClick(item)"
+          :style="{ borderColor: carColor[index] }"
+        >
+          <CarOutlined :style="{ color: carColor[index] }" />
+          <a-tag :color="carColor[index]">车位{{ item }}</a-tag>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script setup lang="ts" name="SelectCar">
+import { CarOutlined } from '@ant-design/icons-vue'
+import { useRouter } from 'vue-router'
+
+const carColor = ['#f50', '#2db7f5', '#87d068', '#108ee9']
+
+const router = useRouter()
+const onClick = (carNum: number) => {
+  const ccmNo = carNum === 1 ? '5' : '6'
+  router.push({
+    path: `/car/${ccmNo}/${carNum}`,
+  })
+}
+</script>
+<style lang="less" scoped>
+.select-car {
+  width: 100%;
+  height: 100%;
+
+  .car-num {
+    width: 1024px;
+    height: 768px;
+  }
+
+  .ant-col {
+    .col-content {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #ccc;
+      border-radius: 12px;
+      cursor: pointer;
+    }
+
+    .anticon {
+      font-size: 80px;
+    }
+
+    .ant-tag {
+      margin-top: 20px;
+    }
+  }
+}
+</style>

vite.config.ts

@@ -33,7 +33,7 @@ export default defineConfig({
     open: true,
     proxy: {
       '/jeecgbootbus': {
-        target: 'http://192.168.0.119:9999',
+        target: 'http://192.168.1.8:9999',
         changeOrigin: true,
         ws: true,
         rewrite: (path) => path.replace(/^\/jeecgbootbus/, ''),