#

Junjie

2025-11-10 bbf4add59c8a4d973ef3dcebfd25ca99aade6fbe

#

 src/main/webapp/views/admin/watch/console.html

@@ -23,10 +23,12 @@
                        </el-tab-pane>
                        <el-tab-pane label="输送线" name="devp">输送线</el-tab-pane>
                        <el-tab-pane label="RGV" name="rgv">RGV</el-tab-pane>
                        <el-tab-pane label="地图配置" name="mapSetting">地图配置</el-tab-pane>
                        <el-tab-pane label="地图配置" name="mapSetting">
                            <map-setting-card :param="mapSettingParam"></map-setting-card>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div id="mapDataId" style="zoom: 0.6;position: relative;">
                <div id="mapDataId" style="position: relative;" :style="{zoom: mapSettingParam.zoom / 100}">
                    <table class="excel-table">
                        <tr v-for="(row,index) in map" :key="index">
                            <td
@@ -69,6 +71,7 @@
        </div>

        <script src="../../components/WatchCrnCard.js"></script>
        <script src="../../components/MapSettingCard.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
@@ -82,6 +85,9 @@
                    activateCard: 'crn',
                    crnParam: {
                        crnNo: 0
                    },
                    mapSettingParam: {
                        zoom: 70
                    }
                },
                created() {
@@ -95,11 +101,11 @@
                        this.getMap()
                        this.getSystemRunningStatus() //获取系统运行状态

                        this.consoleInterval = setInterval(() => {
                            this.getCrnInfo() //获取堆垛机数据
                            this.getSiteInfo() //获取输送站点数据
                            this.getRgvInfo() //获取RGV数据
                        }, 1000)
                        // this.consoleInterval = setInterval(() => {
                        //     this.getCrnInfo() //获取堆垛机数据
                        //     this.getSiteInfo() //获取输送站点数据
                        //     this.getRgvInfo() //获取RGV数据
                        // }, 1000)
                    },
                    //获取地图数据
                    getMap() {

 src/main/webapp/views/components/MapSettingCard.js

New file
@@ -0,0 +1,43 @@
Vue.component('map-setting-card', {
    template: `
    <div>
        <div>
              <div class="block">
                <span>地图比例 {{ zoom }}%</span>
                <el-slider v-model="zoom" @change="zoomChange" :min="1"></el-slider>
              </div>
        </div>
    </div>
    `,
    props: ['param'],
    data() {
        return {
            zoom: 70
        }
    },
    created() {

    },
    watch: {
        param: {
            handler(newVal, oldVal) {

            },
            deep: true,       // 深度监听嵌套属性
            immediate: true   // 立即触发一次（可选）
        }
    },
    created() {
        let cache= localStorage.getItem("mapZoom");
        if (cache != null) {
            this.zoom = parseInt(cache)
            this.param.zoom = this.zoom
        }
    },
    methods: {
        zoomChange() {
            this.param.zoom = this.zoom
            localStorage.setItem("mapZoom", this.zoom);
        }
    }
});

 src/main/webapp/views/components/WatchCrnCard.js

@@ -1,7 +1,10 @@
Vue.component('watch-crn-card', {
    template: `
    <div>
        <div>堆垛机监控</div>
        <div style="display: flex;margin-bottom: 10px;">
            <div style="width: 100%;">堆垛机监控</div>
            <div style="width: 100%;text-align: right;display: flex;"><el-input size="mini" v-model="searchCrnNo" placeholder="请输入堆垛机号"></el-input><el-button @click="getCrnStateInfo" size="mini">查询</el-button></div>
        </div>
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(item) in crnList" :name="item.crnNo">
            <template slot="title">
@@ -46,7 +49,8 @@
    data() {
        return {
            crnList: [],
            activeNames: ''
            activeNames: '',
            searchCrnNo: ''
        }
    },
    created() {
@@ -78,7 +82,18 @@
                    // 堆垛机信息表获取
                    if (res.code == 200) {
                        let list = res.data;
                        that.crnList = list;

                        if (that.searchCrnNo == '') {
                            that.crnList = list;
                        }else {
                            let tmp = []
                            list.forEach((item) => {
                                if(item.crnNo == that.searchCrnNo) {
                                    tmp.push(item)
                                }
                            })
                            that.crnList = tmp;
                        }
                    }
                }
            })