修改格子高度

ZengTao

2023-09-17 9c3ae7e4abd5452b3bc005c549de3f448b5a4cde

修改格子高度

 CanadaMes-ui/src/views/home/index.vue

@@ -60,25 +60,25 @@


.gezi {

    height: 35px;

    


    position: absolute;

    width: 3.07px;

    width: 3.08px;

    /* width: 4.22px; */

}



.gezi:nth-child(22),

/* .gezi:nth-child(22),

.gezi:nth-child(43),

.gezi:nth-child(64),

.gezi:nth-child(85) {

    margin-left: 7px;

    /* margin-left: 10px; */

}

    margin-left: 10px;

} */







.blocks {



    


    background-image: url('../../img/xmjc.png');

    margin: 0 auto;

    background-repeat: no-repeat;

@@ -241,22 +241,24 @@
        <el-footer>

            <div class="blocks" style="position: relative;">

                <div style="display:flex;position: absolute;float:left;z-index: 999;top:102px;left:237px;">

                    <div :class="getStatusClass(item.state)" v-for="(item,index) in cagelist1" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px',left:3.07*index+'px' }" @click="showcageinfo(item['cage'])"></div>

                    <div :class="getStatusClass(item.state)" v-for="(item, index) in cagelist1" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px', left: 3.07 * index+(item['cage']-1)*6.8 + 'px' }"

                        @click="showcageinfo(item['cage'])"></div>

                </div>

                <div style="display:flex;position: absolute;float:left;z-index: 999;top:102px;left:640px;">

                    <div :class="getStatusClass(item.state)" v-for="(item,index) in cagelist2" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px',left:3.07*index+'px' }" @click="showcageinfo(item['cage'])"></div>

                    <div :class="getStatusClass(item.state)" v-for="(item, index) in cagelist2" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px', left: 3.07 * index+(item['cage']-6)*6.8 + 'px' }"

                        @click="showcageinfo(item['cage'])"></div>

                </div>

                <div style="display:flex;position: absolute;float:left;z-index: 999;top:139px;left:237px;">

                    <div :class="getStatusClass(item.state)" v-for="(item,index) in cagelist3" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + 'px',left:3.07*index+'px' }"

                    <div :class="getStatusClass(item.state)" v-for="(item, index) in cagelist3" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + 'px', left: 3.07 * index+(item['cage']-1)*6.8 + 'px' }"

                        @click="showcageinfo(item['cage'])">

                    </div>

                </div>

                <div style="display:flex;position: absolute;float:left;z-index: 999;top:139px;left:640px;">

                    <div :class="getStatusClass(item.state)" v-for="(item,index) in cagelist4" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + 'px',left:3.07*index+'px' }"

                    <div :class="getStatusClass(item.state)" v-for="(item, index) in cagelist4" :key="item['date']"

                        :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + 'px', left: 3.07 * index+(item['cage']-6)*6.8 + 'px' }"

                        @click="showcageinfo(item['cage'])"></div>

                </div>

                <div class="blocks-img" :style="{ left: car1 + 'px', top: '16px' }"></div>

@@ -403,7 +405,7 @@
            // car2: 300,

            cageinfo: [],

            cage: 0,

            carlist:[]

            carlist: []

        };

    },

    created() {

@@ -435,8 +437,8 @@
                    //console.log("收到数据====" + msg.data);

                    let obj = JSON.parse(msg.data);

                    if (obj.params != null) {

                        this.car1 = 145 + 8.15 * (obj.params[0][0]-this.carlist[0]['start'])/(this.carlist[0]['end']-this.carlist[0]['start'])*100;

                        this.car2 = 210 + 8.15 * (obj.params[0][1]-this.carlist[1]['start'])/(this.carlist[1]['end']-this.carlist[1]['start'])*100;

                        this.car1 = 145 + 8.15 * (obj.params[0][0] - this.carlist[0]['start']) / (this.carlist[0]['end'] - this.carlist[0]['start']) * 100;

                        this.car2 = 210 + 8.15 * (obj.params[0][1] - this.carlist[1]['start']) / (this.carlist[1]['end'] - this.carlist[1]['start']) * 100;

                        // this.car1 = 210 + 11.25 * (obj.params[0][1]-this.carlist[1]['start'])/(this.carlist[1]['end']-this.carlist[1]['start'])*100;

                        // this.car2 = 300 + 11.25 * (obj.params[0][1]-this.carlist[1]['start'])/(this.carlist[1]['end']-this.carlist[1]['start'])*100;

                    }