更改

src/components/HomeComponents/stationPie.vue

@@ -17,7 +17,7 @@
                                     总装备数
                                 </div>
                                 <div class="countClass" style="color: #FEF822;">
-                                    5680
+                                    80
                                 </div>
                             </div>
                             <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
@@ -30,7 +30,7 @@
                                 在线设备
                             </div>
                             <div class="countClass" style="color: #22FE31;">
-                                4891
+                                1
                             </div>
                         </div>
                         <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
@@ -43,7 +43,7 @@
                                 箱体总数
                             </div>
                             <div class="countClass" style="color: #FEF822;">
-                                18967
+                                3200
                             </div>
                         </div>
                         <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
@@ -53,7 +53,7 @@
                         <div><img style="width: 2vw;height: 1vh;" src="@/assets/images/homeImages/up.png"></div>
                         <div style="display: flex;flex-direction: row;justify-content: space-around;">
                             <div class="typeClass">
-                                空闲箱体
+                                3100
                             </div>
                             <div class="countClass" style="color: #22FE31;">
                                 259

src/components/Map/map.vue

@@ -18,6 +18,7 @@ import { getGpsData } from '@/api/gpsData/index'
 import carImage from "@/assets/images/icon/小货车.png";
 import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
 import add from '@/views/car/carInfo/add.vue';
+import { color } from 'echarts';
 
 const props = defineProps({
     showMarket: {
@@ -35,6 +36,7 @@ const path = ref([]);
 const current_position = ref([]);
 let mapObj = ref()
 let singleMarker = ref(null);
+const fontColor = ref('#6cb3e0')
 
 const lineObj = ref(null);
 
@@ -172,9 +174,12 @@ const addMarker = (obj, data, src, type) => {
         // 通过设置 offset 来添加偏移量
         offset: new AMap.Pixel(-10, -20),
     });
+    if (props.darkType) {
+        fontColor.value = '#ffffff'
+    }
     marker.setLabel({
         offset: new AMap.Pixel(-50, 25),
-        content: data.carNum
+        content: data.carNum,
     });
     if (type == 'car') {
         singleMarker.value = marker
@@ -290,6 +295,6 @@ defineExpose({
 .amap-marker-label{
     border: 0px solid #00f;
     background-color: transparent;
-    color: #ffffff;
+    color: v-bind(fontColor);;
 }
 </style>

src/views/car/carInfo/index.vue

@@ -107,7 +107,7 @@ const total = ref(0);
 
 const showMarket = ref(false)
 
-const timeArry = ref('')
+const timeArry = ref([])
 
 const queryFormRef = ref<ElFormInstance>();
 const carInfoFormRef = ref<ElFormInstance>();
@@ -141,13 +141,13 @@ const columns = ref([
         onClick: () => {
           handleDelete(data)
         },
-      }, '删除')].concat(data.carType == 1 ? [h(ElButton, {
+      }, '删除')].concat([h(ElButton, {
         type: 'primary', // 组件属性
         link: true,
         onClick: () => {
           openMapDiv(data)
         },
-      }, '查看地图')] : []));
+      }, '轨迹查询')]));
     }
   },
 ])
@@ -272,7 +272,12 @@ const initMapLine = () => {
 
 const openMapDiv = (data) => {
   dialog.visible = true;
-  catObj.value = data
+  catObj.value = data;
+  timeArry.value[0] = new Date(new Date().getTime() - 60*60*24*1000);
+  timeArry.value[1] = new Date(new Date().getTime());
+  setTimeout(() => {
+    initMapLine();
+  }, 1000);
 }
 
 /** 查询车辆信息列表 */
@@ -377,6 +382,7 @@ const handleExport = () => {
 getList();
 
 onMounted(() => {
+  // initMapLine();
   // getList();
 });
 

src/views/statics/passengerFlow.vue

@@ -0,0 +1,398 @@
+<template>
+    <div class="p-2">
+        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane label="车辆客流数据" name="first">
+                <div>
+                    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                        :leave-active-class="proxy?.animate.searchAnimate.leave">
+                        <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
+                            <div style="width: 80%;">
+                                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+                                    <el-form-item label="路线">
+                                        <el-select v-model="line" placeholder="请选择路线" style="width: 120px">
+                                            <el-option v-for="item in carPathList" :key="item.id" :label="item.name"
+                                                :value="item.id" />
+                                        </el-select>
+                                    </el-form-item>
+                                    <el-form-item label="车辆">
+                                        <el-select v-model="line" placeholder="请选择车辆" style="width: 120px">
+                                            <el-option v-for="item in carInfoList" :key="item.id" :label="item.name"
+                                                :value="item.id" />
+                                        </el-select>
+                                    </el-form-item>
+                                    <el-form-item label="时间" prop="carNum">
+                                        <el-date-picker v-model="value2" type="datetimerange" :shortcuts="shortcuts"
+                                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
+                                    </el-form-item>
+                                </el-form>
+                            </div>
+                            <div style="width: 20%;">
+                                <el-form-item>
+                                    <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
+                                    <el-button type="primary" plain @click="resetQuery">昨天</el-button>
+                                    <el-button type="primary" plain @click="resetQuery">近三天</el-button> -->
+                                    <el-button type="primary" @click="goadd">查询</el-button>
+                                    <el-button @click="resetQuery">重置</el-button>
+                                </el-form-item>
+                            </div>
+                        </div>
+                    </transition>
+                    <el-card shadow="never">
+
+                        <tableElm @childToParent='childrenClick' :columns="columns1" ref="table1"></tableElm>
+
+                        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                            v-model:limit="queryParams.pageSize" @pagination="getList" />
+                    </el-card>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="站点客流数据" name="second">
+                <div>
+                    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                        :leave-active-class="proxy?.animate.searchAnimate.leave">
+                        <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
+                            <div style="width: 80%;">
+                                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+                                    <el-form-item label="路线">
+                                        <el-select v-model="line" placeholder="请选择路线" style="width: 120px">
+                                            <el-option v-for="item in carPathList" :key="item.id" :label="item.name"
+                                                :value="item.id" />
+                                        </el-select>
+                                    </el-form-item>
+                                    <el-form-item label="站点">
+                                        <el-select v-model="line" placeholder="请选择车辆" style="width: 120px">
+                                            <el-option v-for="item in carInfoList" :key="item.id" :label="item.name"
+                                                :value="item.id" />
+                                        </el-select>
+                                    </el-form-item>
+                                    <el-form-item label="时间" prop="carNum">
+                                        <el-date-picker v-model="value2" type="datetimerange" :shortcuts="shortcuts"
+                                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
+                                    </el-form-item>
+                                </el-form>
+                            </div>
+                            <div style="width: 20%;">
+                                <el-form-item>
+                                    <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
+                                    <el-button type="primary" plain @click="resetQuery">昨天</el-button>
+                                    <el-button type="primary" plain @click="resetQuery">近三天</el-button> -->
+                                    <el-button type="primary" @click="goadd">查询</el-button>
+                                    <el-button @click="resetQuery">重置</el-button>
+                                </el-form-item>
+                            </div>
+                        </div>
+                    </transition>
+                    <el-card shadow="never">
+
+                        <tableElm @childToParent='childrenClick' :columns="columns2" ref="table2"></tableElm>
+
+                        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                            v-model:limit="queryParams.pageSize" @pagination="getList" />
+                    </el-card>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup name="CarInfo" lang="ts">
+import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
+import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
+import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
+import tableElm from "@/components/Public/table.vue";
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const carInfoList = ref<CarInfoVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const value2 = ref('')
+const carPathList = ref([])
+
+const queryFormRef = ref<ElFormInstance>();
+const carInfoFormRef = ref<ElFormInstance>();
+
+
+const dialog = reactive<DialogOption>({
+    visible: false,
+    title: ''
+});
+
+const table = ref(tableElm)
+const table1 = ref(tableElm)
+const table2 = ref(tableElm)
+const activeName = ref("first")
+
+const columns = ref([
+    // {label: '上层位置', prop: 'v', visible: true},
+    { label: '来源', prop: 'carNum', visible: true, isTemplate: false },
+    { label: '时间', prop: 'workTime', visible: true, isTemplate: false, },
+    { label: '内容', prop: 'workName', pprop: "ext1", visible: true, isTemplate: false },
+])
+
+const columns1 = ref([
+    // {label: '上层位置', prop: 'v', visible: true},
+    { label: '车牌号', prop: 'carNum', visible: true, isTemplate: false },
+    { label: '开始时间', prop: 'startTime', visible: true, isTemplate: false, },
+    { label: '结束时间', prop: 'endTime', pprop: "ext1", visible: true, isTemplate: false },
+    { label: '上车总数', prop: 'upCount', visible: true, isTemplate: false, },
+    { label: '下车总数', prop: 'downCount', pprop: "ext1", visible: true, isTemplate: false },
+])
+
+const columns2 = ref([
+    // {label: '上层位置', prop: 'v', visible: true},
+    { label: '站点名', prop: 'siteName', visible: true, isTemplate: false },
+    { label: '开始时间', prop: 'startTime', visible: true, isTemplate: false, },
+    { label: '结束时间', prop: 'endTime', pprop: "ext1", visible: true, isTemplate: false },
+    { label: '上车总数', prop: 'upCount', visible: true, isTemplate: false, },
+    { label: '下车总数', prop: 'downCount', pprop: "ext1", visible: true, isTemplate: false },
+])
+
+const initFormData: CarInfoForm = {
+    id: undefined,
+    carNum: undefined,
+    carType: undefined,
+    deviceInfos: undefined,
+    repairInfo: undefined,
+    maintenanceInfo: undefined,
+    insuranceInfo: undefined,
+    inspectionInfo: undefined,
+    trafficAccidentInfo: undefined,
+    violationInfo: undefined,
+    changeInfo: undefined,
+    ext1: undefined,
+    ext2: undefined
+}
+const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
+    form: { ...initFormData },
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        carNum: undefined,
+        carType: undefined,
+        deviceInfos: undefined,
+        repairInfo: undefined,
+        maintenanceInfo: undefined,
+        insuranceInfo: undefined,
+        inspectionInfo: undefined,
+        trafficAccidentInfo: undefined,
+        violationInfo: undefined,
+        changeInfo: undefined,
+        ext1: undefined,
+        ext2: undefined,
+        params: {
+        }
+    },
+    rules: {
+        id: [
+            { required: true, message: "编号不能为空", trigger: "blur" }
+        ],
+        carNum: [
+            { required: true, message: "车牌号不能为空", trigger: "blur" }
+        ],
+        carType: [
+            { required: true, message: "车类型不能为空", trigger: "change" }
+        ],
+        deviceInfos: [
+            { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
+        ],
+        repairInfo: [
+            { required: true, message: "维修信息不能为空", trigger: "blur" }
+        ],
+        maintenanceInfo: [
+            { required: true, message: "保养信息不能为空", trigger: "blur" }
+        ],
+        insuranceInfo: [
+            { required: true, message: "保险信息不能为空", trigger: "blur" }
+        ],
+        inspectionInfo: [
+            { required: true, message: "年检信息不能为空", trigger: "blur" }
+        ],
+        trafficAccidentInfo: [
+            { required: true, message: "交通事故信息不能为空", trigger: "blur" }
+        ],
+        violationInfo: [
+            { required: true, message: "违章信息不能为空", trigger: "blur" }
+        ],
+        changeInfo: [
+            { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
+        ],
+        ext1: [
+            { required: true, message: "扩展1不能为空", trigger: "blur" }
+        ],
+        ext2: [
+            { required: true, message: "扩展2不能为空", trigger: "blur" }
+        ]
+    }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+const goadd = () => {
+    router.push("/car/work/addWork")
+}
+
+/** 查询车辆信息列表 */
+const getList = async () => {
+    // loading.value = true;
+    // const res = await listCarInfo(queryParams.value);
+    var res = {
+        rows: [
+            {
+                carNum: '苏A862123',
+                startTime: "2024-01-23 09:12:23",
+                endTime: "2024-01-23 09:13:23",
+                upCount: "10",
+                downCount: "9",
+            },
+            {
+                carNum: '苏A862123',
+                startTime: "2024-01-23 10:12:23",
+                endTime: "2024-01-23 10:13:23",
+                upCount: "10",
+                downCount: "9",
+
+            }
+        ],
+        total: 1
+    }
+    var res1 = {
+        rows: [
+            {
+                siteName: '松罗客运站',
+                startTime: "2024-01-23 09:12:23",
+                endTime: "2024-01-23 09:13:23",
+                upCount: "10",
+                downCount: "9",
+            },
+            {
+                siteName: '福清客运站',
+                startTime: "2024-01-23 10:12:23",
+                endTime: "2024-01-23 10:13:23",
+                upCount: "10",
+                downCount: "9",
+
+            }
+        ],
+        total: 1
+    }
+    var buttons = [
+        { type: 'danger', text: '删除', func: "goAdd" },
+    ]
+    table1.value.setDataList(res.rows);
+    table1.value.setButton(buttons);
+    table2.value.setDataList(res1.rows);
+    table2.value.setButton(buttons);
+    total.value = res.total;
+    loading.value = false;
+}
+
+/** 取消按钮 */
+const cancel = () => {
+    reset();
+    dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+    form.value = { ...initFormData };
+    carInfoFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    queryParams.value.pageNum = 1;
+    getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    handleQuery();
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: CarInfoVO[]) => {
+    ids.value = selection.map(item => item.id);
+    single.value = selection.length != 1;
+    multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+    reset();
+    dialog.visible = true;
+    dialog.title = "添加车辆信息";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: CarInfoVO) => {
+    reset();
+    const _id = row?.id || ids.value[0]
+    const res = await getCarInfo(_id);
+    Object.assign(form.value, res.data);
+    dialog.visible = true;
+    dialog.title = "修改车辆信息";
+}
+
+const childrenClick = (data) => {
+    eval(data.func + "(data.data)")
+}
+
+const openDialog = () => {
+    dialog.visible = true
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+    carInfoFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+            buttonLoading.value = true;
+            if (form.value.id) {
+                await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
+            } else {
+                await addCarInfo(form.value).finally(() => buttonLoading.value = false);
+            }
+            proxy?.$modal.msgSuccess("修改成功");
+            dialog.visible = false;
+            await getList();
+        }
+    });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: CarInfoVO) => {
+    const _ids = row?.id || ids.value;
+    await proxy?.$modal.confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+    await delCarInfo(_ids);
+    proxy?.$modal.msgSuccess("删除成功");
+    await getList();
+}
+
+/** 导出按钮操作 */
+const handleExport = () => {
+    proxy?.download('system/carInfo/export', {
+        ...queryParams.value
+    }, `carInfo_${new Date().getTime()}.xlsx`)
+}
+
+const initData = async () => {
+    const res = await listCarPath({ pageSize: 1000 });
+    carPathList.value = res.rows
+    const res2 = await listCarInfo({ pageSize: 1000 });
+    carInfoList.value = res.rows
+}
+
+onMounted(() => {
+    getList();
+});
+</script>

src/views/yunying/kdg/index.vue

@@ -41,87 +41,267 @@
                   line-height: 19px;
                   height: 19px;
                   margin-left: 5px;
-                ">站点设备</span>
+                ">快递柜设备</span>
             <span style="margin-left: 30px; font-size: 14px">{{ currentdata?.label }}</span>
 
 
           </div>
-          <el-button v-if="tableData.length > 0 && tableData.length < 4" type="primary"
-            style="position: absolute;right: 20px;" @click="goAdd">添加设备</el-button>
+          <!-- <el-button v-if="tableData.length > 0 && tableData.length < 4" type="primary"
+            style="position: absolute;right: 20px;" @click="goAdd">添加设备</el-button> -->
         </div>
-        <div style="margin-top: 20px">
-          <el-table :data="tableData" border style="width: 100%">
-            <el-table-column prop="name" label="设备名称" width="160">
-              <template #default="scope">
-                <div>
-                  <span>{{ scope.row.name }}</span> <el-tag style="margin-left: 40px;" type="success"
-                    v-if="scope.row.type == 'cabinet'">{{ '在线' }}</el-tag>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="type" label="类型">
-              <template #default="scope">
-                <div>
-                  <el-tag type="success" effect="dark">{{ scope.row.type }}</el-tag> <span style="margin-left: 20px;"
-                    v-if="scope.row.type == 'cabinet'">{{ `共 ${currentCabinet.total} 格` }}<span
-                      style="margin-left: 5px;color:green">{{ `可用 ${currentCabinet.total - currentCabinet.unused} 格`
-                      }}</span></span>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="code" label="设备序列号">
-              <template #default="scope">
-                <div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-between;">
-                  <el-input v-model="scope.row.code" style="width: 240px" placeholder="请输入" />
-                  <el-button type="primary" size="small" @click="savedata">保存</el-button>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="code" label="操作">
-              <template #default="scope">
-                <div>
-                  <el-button type="danger" link size="small" @click="deleteDevice(scope.row)">删除</el-button>
-                  <el-button v-if="scope.row.type == 'cabinet'" type="primary" link size="small">立即同步</el-button>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
-            <el-tab-pane label="一主两副" name="camera">
-              <div style="display: flex;flex-direction: row;justify-content: center;">
-                <img src="@/assets/images/一主二副.png" />
+        <div style="margin-top: 10vh;">
+          <div v-if="type == 1">
+            <div style="display: flex;flex-direction: row;justify-content: center;">
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(1)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(1) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(2)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(2) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 3)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 3) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 9)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 9) }}</div>
+                </div>
+              </div>
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(12)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(12) }}</div>
+                </div>
+                <div style="width: 8vw;height: 154px;position:relative" @click="clickCabinet(13)">
+                  <img style="width: 8vw;height: 154px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(13) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 14)"
+                  v-for="(item, index) in 2">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 14) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 16)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 16) }}</div>
+                </div>
               </div>
-            </el-tab-pane>
-            <el-tab-pane label="一主一副" name="cabinet">
-              <div style="display: flex;flex-direction: row;justify-content: center;">
-                <img src="@/assets/images/一主一副.png" />
+            </div>
+          </div>
+          <div v-if="type == 2">
+            <div style="display: flex;flex-direction: row;justify-content: center;">
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(1)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(1) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(2)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(2) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 3)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 3) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 9)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 9) }}</div>
+                </div>
               </div>
-            </el-tab-pane>
-            <el-tab-pane label="一主" name="3">
-              <div style="display: flex;flex-direction: row;justify-content: center;">
-                <img src="@/assets/images/一主.png" />
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(12)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(12) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(13)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(13) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 14)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 14) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 20)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 20) }}</div>
+                </div>
               </div>
-            </el-tab-pane>
-          </el-tabs>
-          <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
-              <el-tab-pane v-if="tableData.filter(i => i.type == 'camera').length > 0" label="摄像头" name="camera">
-                <div id="video-container" style="border-radius: 10px;"></div>
-              </el-tab-pane>
-              <el-tab-pane v-if="tableData.filter(i => i.type == 'cabinet').length > 0" label="快递柜" name="cabinet">
-                <div
-                  style="display: flex;align-items: center;flex-wrap: wrap;gap: 10px;place-content: center;width: 100%;justify-content: flex-start;flex-direction: row;align-content: center;">
-                  <div :class="item.box_status == 1 ? '' : ''" v-for="(item, index) in currentCabinet.boxlist"
-                    style="width: 60px;height:60px;border: 1px solid #33333317;border-radius: 6px;position: relative;">
-                    <div style="font-size: 10px;padding:8px">{{ item.box_name }}</div>
-  
-                    <el-button size="small" text style="position: absolute;right: 0;bottom: 0;" @click="openbox">
-                      <img style="width:10px" src="@/assets/images/unlock@2x.png">
-                    </el-button>
-                  </div>
-                </div>
-              </el-tab-pane>
-            </el-tabs> -->
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(23)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(23) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(24)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(24) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 25)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 25) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 31)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 31) }}</div>
+                </div>
+              </div>
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(34)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(34) }}</div>
+                </div>
+                <div style="width: 8vw;height: 154px;position:relative" @click="clickCabinet(35)">
+                  <img style="width: 8vw;height: 154px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(35) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 36)"
+                  v-for="(item, index) in 2">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 36) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 38)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 38) }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-if="type == 3">
+            <div style="display: flex;flex-direction: row;justify-content: center;">
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(1)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(1) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(2)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(2) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 3)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 3) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 9)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 9) }}</div>
+                </div>
+              </div>
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(12)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(12) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(13)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(13) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 14)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 14) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 20)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 20) }}</div>
+                </div>
+              </div>
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(23)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(23) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(24)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(24) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 25)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 25) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 31)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 31) }}</div>
+                </div>
+              </div>
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(34)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(34) }}</div>
+                </div>
+                <div style="width: 8vw;height: 154px;position:relative" @click="clickCabinet(35)">
+                  <img style="width: 8vw;height: 154px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(35) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 36)"
+                  v-for="(item, index) in 2">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 36) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 38)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 38) }}</div>
+                </div>
+              </div>
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(41)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(41) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(42)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(42) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 43)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 43) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 49)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 49) }}</div>
+                </div>
+              </div>
+              <div style="width: 9vw;border:0.5vw solid #000;">
+                <div style="width: 8vw;height: 86px;position:relative" @click="clickCabinet(52)">
+                  <img style="width: 8vw;height: 86px" src="@/assets/images/cabinet1.png" />
+                  <div class="indexDiv">{{ formatIndex(52) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(53)">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet2.png" />
+                  <div class="indexDiv">{{ formatIndex(53) }}</div>
+                </div>
+                <div style="width: 8vw;height: 28px;position:relative" @click="clickCabinet(index + 54)"
+                  v-for="(item, index) in 6">
+                  <img style="width: 8vw;height: 28px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 54) }}</div>
+                </div>
+                <div style="width: 8vw;height: 42px;position:relative" @click="clickCabinet(index + 60)"
+                  v-for="(item, index) in 3">
+                  <img style="width: 8vw;height: 42px;" src="@/assets/images/cabinet3.png" />
+                  <div class="indexDiv">{{ formatIndex(index + 60) }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -171,6 +351,8 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const sites = ref([]);
 
+const type = ref([])
+
 
 const formdata = ref({
   name: "",
@@ -205,6 +387,10 @@ const goAdd = () => {
   }
 }
 
+const clickCabinet = (value) => {
+  ElMessage.success(value + "号柜远程开启成功");
+}
+
 const initData = async () => {
   const res = await listCarPath({ pageSize: 1000 });
   carPathList.value = res.rows;
@@ -284,27 +470,12 @@ const treeclick = (data: TreeNodeData, node: TreeNode) => {
   currentdata.value = sites.value.filter(i => {
     return i.dictLabel == data.label
   })[0];
-  tableData.value = [];
+  console.log(currentdata.value)
+  tableData.value = JSON.parse(currentdata.value.remark)
   if (currentdata.value) {
-    tableData.value = JSON.parse(currentdata.value.remark);
-    var cameras = tableData.value.filter(i => i.type == 'camera');
-    if (cameras.length > 0) {
-      var cameracode = cameras[0].code;
-      //存在视频播放视频
-      getCameraPlayerConfig(cameracode).then(res => {
-        console.log(res.data);
-        var player = new EZUIKit.EZUIKitPlayer({
-          template: "pcLive",
-          id: 'video-container', // 视频容器ID
-          ...res.data
-        })
-      })
-    }
-
     var cabinets = tableData.value.filter(i => i.type == 'cabinet');
     if (cabinets.length > 0) {
-      var cabinetcode = cameras[0].code;
-      SycCabinet(cabinetcode);
+      type.value = cabinets[0].cabinetType
     }
   }
 
@@ -370,6 +541,13 @@ const openbox = (code) => {
   }, 1000);
 }
 
+const formatIndex = (value) => {
+  if (value < 10) {
+    return '0' + value
+  } else {
+    return value
+  }
+}
 
 const data = computed(() => {
 
@@ -406,4 +584,18 @@ onMounted(() => {
 .boxunused {
   background: #3333332d;
 }
+
+.indexDiv {
+  background-color: white;
+  width: 20px;
+  height: 10px;
+  color: #000;
+  font-weight: 600;
+  position: absolute;
+  right: 2px;
+  bottom: 1px;
+  z-index: 1000;
+  font-size: 10px;
+  text-align: center;
+}
 </style>

src/views/yunying/video/index.vue

@@ -62,10 +62,12 @@
             <el-table-column prop="type" label="类型">
               <template #default="scope">
                 <div>
-                  <el-tag type="success" effect="dark">{{ scope.row.type }}</el-tag> <span style="margin-left: 20px;"
+                  <el-tag type="success" effect="dark">{{ scope.row.type }}</el-tag>
+                  <!-- <span style="margin-left: 20px;"
                     v-if="scope.row.type == 'cabinet'">{{ `共 ${currentCabinet.total} 格` }}<span
                       style="margin-left: 5px;color:green">{{ `可用 ${currentCabinet.total - currentCabinet.unused} 格`
-                      }}</span></span>
+                      }}</span></span> -->
+                  <span style="margin-left: 20px;" v-if="scope.row.type == 'cabinet'">{{ getTypeName(scope.row) }}</span>
                 </div>
               </template>
             </el-table-column>
@@ -122,6 +124,13 @@
             <el-option v-if="tableData.filter(i => i.type == 'camera').length < 1" label="摄像头" value="camera" />
           </el-select>
         </el-form-item>
+        <el-form-item label="快递类型" v-if="formdata.type == 'cabinet'">
+          <el-select v-model="formdata.cabinetType" placeholder="请选择设备类型">
+            <el-option label="一主" value="1" />
+            <el-option label="一主一副" value="2" />
+            <el-option label="一主两副" value="3" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="序列号">
           <el-input v-model="formdata.code" />
         </el-form-item>
@@ -158,7 +167,8 @@ const sites = ref([]);
 const formdata = ref({
   name: "",
   type: "",
-  code: ""
+  code: "",
+  cabinetType: ''
 })
 
 
@@ -188,6 +198,17 @@ const goAdd = () => {
   }
 }
 
+const getTypeName = (data) => {
+  var type = data.cabinetType
+  if (type == 1) {
+    return '一主'
+  } else if (type == 2) {
+    return '一主一副'
+  } else {
+    return '一主二副'
+  }
+}
+
 const initData = async () => {
   const res = await listCarPath({ pageSize: 1000 });
   carPathList.value = res.rows;
@@ -226,7 +247,6 @@ const savedata = () => {
 const getSites = () => {
   listData({ dictType: "tbl_sites" }).then(res2 => {
     sites.value = res2.rows;
-
     var index = 1;
     data.value = [{
       id: 1,
@@ -274,14 +294,14 @@ const treeclick = (data: TreeNodeData, node: TreeNode) => {
     if (cameras.length > 0) {
       var cameracode = cameras[0].code;
       //存在视频播放视频
-      getCameraPlayerConfig(cameracode).then(res => {
-        console.log(res.data);
-        var player = new EZUIKit.EZUIKitPlayer({
-          template: "pcLive",
-          id: 'video-container', // 视频容器ID
-          ...res.data
-        })
-      })
+      // getCameraPlayerConfig(cameracode).then(res => {
+      //   console.log(res.data);
+      //   var player = new EZUIKit.EZUIKitPlayer({
+      //     template: "pcLive",
+      //     id: 'video-container', // 视频容器ID
+      //     ...res.data
+      //   })
+      // })
     }
 
     var cabinets = tableData.value.filter(i => i.type == 'cabinet');
@@ -315,8 +335,8 @@ const addDevice = () => {
   tableData.value.push(formdata.value);
   var data = {
     dictCode: currentdata.value.dictCode,
-    dictValue: currentdata.value.value,
-    dictLabel: currentdata.value.label,
+    dictValue: currentdata.value.dictValue,
+    dictLabel: currentdata.value.dictLabel,
     dictType: "tbl_sites",
     remark: JSON.stringify(tableData.value)
   }