| | |
| | | <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 in cagelist1" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + '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+'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 in cagelist2" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + '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+'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 in cagelist3" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + '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+'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 in cagelist4" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + '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+'px' }"
|
| | | @click="showcageinfo(item['cage'])"></div>
|
| | | </div>
|
| | | <div class="blocks-img" :style="{ left: car1 + 'px', top: '16px' }"></div>
|
| | |
| | | <div class="blocks-img2"></div>
|
| | | <div class="blocks-img3"></div>
|
| | | <!-- <div style="display:flex;position: absolute;float:left;z-index: 999;top:112px;left:328px;">
|
| | | <div :class="getStatusClass(item.state)" v-for="item in cagelist1" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px' }"
|
| | | <div :class="getStatusClass(item.state)" v-for="(item,index) in cagelist1" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px',left:4.22*index+'px' }"
|
| | | @click="showcageinfo(item['cage'])"></div>
|
| | | </div>
|
| | | <div style="display:flex;position: absolute;float:left;z-index: 999;top:112px;left:885px;">
|
| | | <div :class="getStatusClass(item.state)" v-for="item in cagelist2" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px' }"
|
| | | <div :class="getStatusClass(item.state)" v-for="(item,index) in cagelist2" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px',left:4.22*index+'px' }"
|
| | | @click="showcageinfo(item['cage'])"></div>
|
| | | </div>
|
| | | <div style="display:flex;position: absolute;float:left;z-index: 999;top:154px;left:328px;">
|
| | | <div :class="getStatusClass(item.state)" v-for="item in cagelist3" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + '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:4.22*index+'px' }"
|
| | | @click="showcageinfo(item['cage'])"></div>
|
| | | </div>
|
| | | <div style="display:flex;position: absolute;float:left;z-index: 999;top:154px;left:885px;">
|
| | | <div :class="getStatusClass(item.state)" v-for="item in cagelist4" :key="item['date']"
|
| | | :style="{ height: 35 * item['glassWidth'] + 'px', top: item['width'] * 35 - 35 + '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:4.22*index+'px' }"
|
| | | @click="showcageinfo(item['cage'])"></div>
|
| | | </div>
|
| | | <div class="blocks-img" :style="{ left: car1 + 'px', top: '16px' }"></div>
|
| | |
| | | </template>
|
| | | <script>
|
| | |
|
| | | import { home, home2, loadtask, InsertOrder, Addglassid, UpdateTask, SelectAlarmmgInfo, SelectCageInfo, DeleteByGlassID, OutByGlassID } from "../../api/home";
|
| | | import { home, home2, loadtask, InsertOrder, Addglassid, UpdateTask, SelectAlarmmgInfo, SelectCageInfo, DeleteByGlassID, OutByGlassID, Loadcarlist } from "../../api/home";
|
| | |
|
| | |
|
| | | import LanguageMixin from '../../lang/LanguageMixin'
|
| | |
| | | order: "",
|
| | | glassid: "",
|
| | | url: "../../img/bigcar01.png",
|
| | | car1: 107,
|
| | | car2: 175,
|
| | | // car1: 150,
|
| | | // car2: 242,
|
| | | car1: 145,
|
| | | car2: 210,
|
| | | // car1: 210,
|
| | | // car2: 300,
|
| | | cageinfo: [],
|
| | | cage: 0
|
| | | cage: 0,
|
| | | carlist:[]
|
| | | };
|
| | | },
|
| | | created() {
|
| | |
| | | //console.log("收到数据====" + msg.data);
|
| | | let obj = JSON.parse(msg.data);
|
| | | if (obj.params != null) {
|
| | | this.car1 = 107 + 17.62 * obj.params[0][0]/1000;
|
| | | this.car2 = 175 + 17.62 * obj.params[0][1]/1000;
|
| | | // this.car1 = 150 + 24.6 * obj.params[0][0]/1000;
|
| | | // this.car2 = 242 + 24.6 * obj.params[0][1]/1000;
|
| | | 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;
|
| | | }
|
| | | this.tableData = obj.tableData[0];
|
| | | this.cagelist1 = obj.cagelist1[0];
|
| | |
| | | if (res.data.list.length > 0) {
|
| | | this.outcell = this.tasklist2[0]['cell'];
|
| | | }
|
| | |
|
| | | });
|
| | | loadtask(this.task2).then(res => {
|
| | | this.tasklist2 = res.data.list;
|
| | |
|
| | | });
|
| | | SelectAlarmmgInfo().then(res => {
|
| | | this.alarm = res.data.alarmmg;
|
| | | });
|
| | | Loadcarlist().then(res => {
|
| | | this.carlist = res.data.carlist;
|
| | | console.log(this.carlist);
|
| | | });
|
| | | },
|
| | | //根据格子状态修改颜色
|
| | | getStatusClass(state) {
|