pang.jiabao
2025-09-02 1eee1c2af23940a6c2af5b519b65bdd1e7b4ac49
src/main/webapp/views/index.html
@@ -5,7 +5,7 @@
    <title>环形穿梭车智能系统</title>
    <link rel="stylesheet" href="../static/css/element.css">
    <link rel="stylesheet" href="../static/css/element-ui.css">
    <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon">
<!--    <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon">-->
    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <script type="text/javascript" src="../static/js/vue.min.js"></script>
@@ -59,15 +59,15 @@
        }
        .station {
            position: absolute;
            width: 40px;
            height: 24px;
            /*border-radius: 50%;*/
            width: 26px;
            height: 14px;
            text-align: center;
            line-height: 24px;
            line-height: 1.5; /* 调整行高与字体大小的比值 */
            font-size: 10px; /* 设置更小的字体 */
            font-weight: bold;
            transition: transform 0.3s ease;
            background-color: #ab1839;
            transform: scale(1.2);
            transform: scale(1); /* 可选:如果不需要放大效果 */
        }
        .bus {
            font-size: 10px;
@@ -90,6 +90,19 @@
        .task-bar-left {
            position: fixed;
            top: 1%;
            /*transform: translateY(-50%);*/
            width: 25%; /* 设置宽度 */
            background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0);
            z-index: 1000; /* 确保在其他元素之上 */
        }
        .task-bar-right1 {
            position: fixed;
            top: 5%;
            /*transform: translateY(-50%);*/
            width: 25%; /* 设置宽度 */
            background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
@@ -137,8 +150,9 @@
            background: #f0f9eb;
        }
        .container {
            width: 100vh;
            height: 72vh;
            margin-left: 20vh;
            width: 120vh;
            height: 90vh;
            position: absolute;
            /*background: #8c939d;*/
        }
@@ -203,43 +217,44 @@
<!--                        C 1150,150 1150,100 1100,100-->
<!--                        L 250,100-->
<!--                        C 250,100 90,90 100,250 z"-->
                <!--                C 32,810 32,850 65,850-->
                <!--                C 65,850 100,850 100,810-->
<!--                      style="fill:none; stroke:blue; stroke-width:4;" />-->
                <path d="M 1200,750
                        L 1200,100
                        C 1200,100 1200,50 1150,50
                        C 1150,50 1100,50 1100,100
                        L 1100,700
                        C 1100,700 1100,750 1050,750
                        L 60,750
                        C 60,750 10,750 10,800
                        C 10,800 10,850 60,850
                        L 1100,850
                        C 1100,850 1200,850 1200,750
"
                      style="fill:none; stroke:blue; stroke-width:4;" />
                <path d="M 66,0
                C 66,0 32,0 32,40
                L 32,770
                C 32,770 31,810 72,810
                L 1000,810
                C 1000,810 1020,810 1020,790
                C 1020,790 1020,770 1000,770
                L 120,770
                C 120,770 100,770 100,750
                L 100,40
                C 100,40 100,0 66,0 z"
                      style="fill:none; stroke:blue; stroke-width:1;" />
            </svg>
            <div class="bus-station">
                <div v-for="(item,i) in devpPos1" class="bus-item-top" :style="'left:' + (75 + i * 15) + 'px'">{{item.dev_no}}</div>
            </div>
            <div class="bus-station" style="flex-direction: column">
                <div v-for="(item,i) in devpPos2" class="bus-item-left" :style="'top:' + (200 + i * 50) + 'px'">{{item.dev_no}}</div>
            </div>
            <div class="bus-station" style="flex-direction: column">
                <div v-for="(item,i) in devpPos3" class="bus-item-left2" :style="'top:' + (100 + i * 10) + 'px'">{{item.dev_no}}</div>
            </div>
            <!-- Stations on outer ring -->
<!--            <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueX + '%', left: station.valueY + '%' }">{{ station.index }}</div>-->
            <div>
                <el-switch
                        style="display: block"
                        v-model="valueSystem"
                        active-color="#13ce66"
                        inactive-color="#A64036"
                        active-text="系统运行中..."
                        inactive-text="系统已停止!"
                        @change='upDateValueSystem'>
                </el-switch>
            </div>
<!--            <div class="bus-station">-->
<!--                <div v-for="(item,i) in devpPos1" class="bus-item-top" :style="'left:' + (75 + i * 15) + 'px'">{{item.dev_no}}</div>-->
<!--            </div>-->
<!--            <div class="bus-station" style="flex-direction: column">-->
<!--                <div v-for="(item,i) in devpPos2" class="bus-item-left" :style="'top:' + (200 + i * 50) + 'px'">{{item.dev_no}}</div>-->
<!--            </div>-->
<!--            <div class="bus-station" style="flex-direction: column">-->
<!--                <div v-for="(item,i) in devpPos3" class="bus-item-left2" :style="'top:' + (100 + i * 10) + 'px'">{{item.dev_no}}</div>-->
<!--            </div>-->
<!--             Stations on outer ring-->
            <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueY + 'px', left: station.valueX + 'px' , backgroundColor: station.modeColor}">{{ station.index }}</div>
<!--            <div>-->
<!--                <el-switch-->
<!--                        style="display: block"-->
<!--                        v-model="valueSystem"-->
<!--                        active-color="#13ce66"-->
<!--                        inactive-color="#A64036"-->
<!--                        active-text="系统运行中..."-->
<!--                        inactive-text="系统已停止!"-->
<!--                        @change='upDateValueSystem'>-->
<!--                </el-switch>-->
<!--            </div>-->
            <!-- Buses -->
            <div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueY + 'px', left: bus.valueX + 'px' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>
        </div>
@@ -276,7 +291,11 @@
                    </el-table-column>
                    <el-table-column
                            prop="sourceStaNo"
                            label="源站">
                            label="RGV源站">
                    </el-table-column>
                    <el-table-column
                            prop="rgvDstaNo"
                            label="RGV目标站">
                    </el-table-column>
                    <el-table-column
                            prop="staNo"
@@ -295,9 +314,16 @@
                            label="RGV状态">
                    </el-table-column>
<!--                    <el-table-column-->
<!--                            prop=""-->
<!--                            label="操作">-->
<!--                        <el-button type="primary" icon="el-icon-edit" circle></el-button>-->
<!--                            label="操作"-->
<!--                            type="template">-->
<!--                        <template slot-scope="scope">-->
<!--                            <el-button-->
<!--                                    type="danger"-->
<!--                                    size="small"-->
<!--                                    @click="taskDelete(scope.row)">-->
<!--                                删除-->
<!--                            </el-button>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                </el-table>
            </div>
@@ -321,14 +347,18 @@
                        :data="tableDataRight"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="rgvId"
                            label="编号"
                            width="80">
                    </el-table-column>
<!--                    <el-table-column-->
<!--                            prop="rgvId"-->
<!--                            label="编号"-->
<!--                            width="80">-->
<!--                    </el-table-column>-->
                    <el-table-column
                            prop="rgvNo"
                            label="小车号">
                    </el-table-column>
                    <el-table-column
                            prop="taskNo"
                            label="任务号">
                    </el-table-column>
                    <el-table-column
                            prop="position"
@@ -337,6 +367,10 @@
                    <el-table-column
                            prop="status$"
                            label="状态">
                    </el-table-column>
                    <el-table-column
                            prop="error$"
                            label="异常">
                    </el-table-column>
                    <el-table-column
                            label="操作"
@@ -353,6 +387,38 @@
                </el-table>
            </div>
        </div>
        <div class="task-bar-right1 right-task-bar">
            <div>
                <el-tooltip :content="'Switch value: ' + valueRight1" placement="top">
                    <el-switch
                            v-model="valueRight1"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="100"
                            inactive-value="0">
                    </el-switch>
                </el-tooltip>
            </div>
            <div v-if="valueRight1 === '100' " class="task-bar-div1">
                <el-table
                        :data="tableDataRight1"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="rgvNo"
                            label="小车号">
                    </el-table-column>
                    <el-table-column
                            prop="error"
                            label="异常">
                    </el-table-column>
                    <el-table-column
                            prop="createTime$"
                            label="记录日期">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <script>
@@ -362,7 +428,8 @@
                activeNames: ['1'],
                valueLeft: '0',
                valueRight: '0',
                licenseDay: '已过期',
                valueRight1: '0',
                licenseDay: ' ',
                licenseDayI: 100,
                valueSystem: false,
                tableDataRgv: [],
@@ -370,6 +437,7 @@
                energyGatheringRing: [],
                tableDataLeft: [],
                tableDataRight: [],
                tableDataRight1: [],
                devpPos1:[
                    {dev_no: 116,pos:633980},
                    {dev_no: 117,pos:604043},
@@ -425,8 +493,9 @@
                    this.getTableDataTrack()
                    this.getTableDataLeft()
                    this.getTableDataRight()
                    this.getTableDataRight1()
                    this.getValueSystem()
                    this.getLicenseDays()
                    // this.getLicenseDays()
                    setInterval(() => {
                        this.getTableDataRgv()
@@ -434,8 +503,9 @@
                        this.getTableDataTrack()
                        this.getTableDataLeft()
                        this.getTableDataRight()
                        this.getTableDataRight1()
                        this.getValueSystem()
                        this.getLicenseDays()
                        // this.getLicenseDays()
                    }, 1000)
                },
@@ -451,11 +521,50 @@
                        }
                    }
                },
                handleChange1(val) {
                    console.log(val);
                    if (val.length === 0){
                        valueRight1 = '0';
                    } else {
                        console.log("2222"+val);
                        if (val.length >= 1){
                            this.handleChangeValueRight1(1)
                        }
                    }
                },
                taskDelete(row) {
                    let that = this;
                    that.$confirm('确认要删除该设备吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            url: baseUrl + "/rgv/disable/task/delete",
                            headers: {'token': localStorage.getItem('token')},
                            method: 'POST',
                            data: {
                                wrkNo: row.wrkNo
                            },
                            success: function (res) {
                                if (res.code === 200) {
                                    that.$message.success('删除成功');
                                    // 删除当前行
                                    that.tableDataRight.splice(that.tableDataRight.indexOf(row), 1);
                                } else {
                                    that.$message.error('删除失败');
                                }
                            }
                        });
                    });
                },
                toggleStatus(index, row) {
                    let that = this;
                    const currentStatus = row.status;
                    const targetStatus = currentStatus === 0 ? 1 : 0;
                    this.$confirm(`确认要${currentStatus === 0 ? '禁用' : '启用'}该设备吗?`, '提示', {
                    that.$confirm(`确认要${currentStatus === 0 ? '禁用' : '启用'}该设备吗?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
@@ -465,15 +574,15 @@
                            headers: {'token': localStorage.getItem('token')},
                            method: 'POST',
                            data: {
                                rgvId: row.rgvNo,
                                rgvNo: row.rgvNo,
                                status: targetStatus
                            },
                            success: function (res) {
                                if (res.code === 200) {
                                    this.$message.success(`状态更新成功`);
                                    that.$message.success(`状态更新成功`);
                                    row.status$ = targetStatus; // 更新前端状态
                                } else {
                                    this.$message.error('状态更新失败');
                                    that.$message.error('状态更新失败');
                                }
                            }
                        });
@@ -495,6 +604,22 @@
                            valueRight = '0';
                    }
                },
                handleChangeValueRight1(val) {
                    console.log("33333"+val);
                    switch (val){
                        case 1:
                            valueRight1 = '100';
                        case 2:
                            valueRight1 = '100';
                        case 3:
                            valueRight1 = '100';
                        case 4:
                            valueRight1 = '100';
                        default:
                            valueRight1 = '0';
                    }
                },
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
@@ -512,14 +637,14 @@
                        success: function (res) {
                            if (res.code == 200) {
                                if (res.data.day<0){
                                    that.licenseDay = "已过期"+res.data.day+"天";
                                    that.licenseDay = " "+res.data.day+"天";
                                    that.licenseDayI = -1;
                                } else {
                                    that.licenseDay = "许可证有效期"+res.data.day+"天";
                                    that.licenseDayI = res.data.day;
                                }
                            }else {
                                that.licenseDay = "已过期";
                                that.licenseDay = " ";
                                that.licenseDayI = -1;
                            }
                        }
@@ -592,6 +717,22 @@
                        }
                    });
                },
                getTableDataRight1() {
                    let that = this;
                    $.ajax({
                        url: baseUrl + "/rgv/task/rgv/circular/shuttle/mast/position/data/v1",
                        headers: {
                            'token': localStorage.getItem('token')
                        },
                        data: {},
                        dataType: 'json',
                        contentType: 'application/json;charset=UTF-8',
                        method: 'post',
                        success: function (res) {
                            that.tableDataRight1 = res.data
                        }
                    });
                },
                getTableDataRgv() {
                    let that = this;
                    // that.tableDataRgv = busPsto