| | |
| | | <template> |
| | | <div> |
| | | 111 |
| | | </div> |
| | | <div class="title"> |
| | | <el-row style="height:100%"> |
| | | <el-col :span="16"> |
| | | <el-row :gutter="20" style="height:100%"> |
| | | <el-col :span="8"> |
| | | <span style="position: relative; top: 100px;left: 30px;">第ä¸å±</span> |
| | | <el-row :gutter="20" style="height:1000px"> |
| | | <el-col :span="8"></el-col> |
| | | <el-col :span="8"> |
| | | <div class="line-container"> |
| | | <div class="RGVline"></div> |
| | | <div :class="updateRGVOne()" :style="{ marginTop: RGV01.LevelPoint + 'px' }" ref="childDot" @click="mouseClick">1</div> |
| | | <div :class="updateRGVTwo()" :style="{ marginTop: RGV02.LevelPoint + 'px' }" ref="childDot" @click="mouseClick">2</div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div> |
| | | <div v-for="(group, index) in groupedLines(linescopy1)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 118px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy2)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 115px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 112px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy4)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 109px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy5)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 107px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy6)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <!-- å åæº --> |
| | | <div style="position: relative; top: 50px;"> |
| | | <div class="stackerDiv"> |
| | | <div class="stackDivName">ä¸å·å åæº</div> |
| | | <LineComponent :x="xValue1" ref="lineComponent1" :equipNo="1"></LineComponent> |
| | | <LineComponent :x="xValue1" ref="stacker1" :equipNo="SC01"></LineComponent> |
| | | </div> |
| | | <el-divider></el-divider> |
| | | <div class="stackerDiv"> |
| | | <div class="stackDivName">äºå·å åæº</div> |
| | | <LineComponent :x="xValue2" ref="lineComponent2" :equipNo="2"></LineComponent> |
| | | <LineComponent :x="xValue2" ref="stacker2" :equipNo="SC02"></LineComponent> |
| | | </div> |
| | | <div class="stackerDiv"> |
| | | <el-divider></el-divider> |
| | | <div class="stackerDiv"> |
| | | <div class="stackDivName">ä¸å·å åæº</div> |
| | | <LineComponent :x="xValue2" ref="lineComponent2" :equipNo="2"></LineComponent> |
| | | <LineComponent :x="xValue3" ref="stacker3" :equipNo="SC03"></LineComponent> |
| | | </div> |
| | | <div class="stackerDiv"> |
| | | <el-divider></el-divider> |
| | | <div class="stackerDiv"> |
| | | <div class="stackDivName">åå·å åæº</div> |
| | | <LineComponent :x="xValue2" ref="lineComponent2" :equipNo="2"></LineComponent> |
| | | <LineComponent :x="xValue4" ref="stacker4" :equipNo="SC04"></LineComponent> |
| | | </div> |
| | | <el-divider></el-divider> |
| | | <div class="stackerDiv"> |
| | | <div class="stackDivName">äºå·å åæº</div> |
| | | <LineComponent :x="xValue5" ref="stacker5" :equipNo="SC05"></LineComponent> |
| | | </div> |
| | | <el-divider></el-divider> |
| | | <div class="stackerDiv"> |
| | | <div class="stackDivName">å
å·å åæº</div> |
| | | <LineComponent :x="xValue6" ref="stacker6" :equipNo="SC06"></LineComponent> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20" class="cardWidthrow"> |
| | | <el-col :span="7"> |
| | | <div class="cardWidth"> |
| | | <div> |
| | | <span style="position: relative; top: 100px;left: 10px;">第ä¸å±å</span> |
| | | <div v-for="(group, index) in groupedLines(linescopy1)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" |
| | | :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <el-divider class="divider"></el-divider> |
| | | <div> |
| | | <span style="position: relative; top: 120px;left: 30px;">第äºå±</span> |
| | | <div v-for="(group, index) in groupedLines(linescopy2)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" url="api/Equipment/GetLineInfoByNo" |
| | | :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-divider class="divider"></el-divider> |
| | | <div> |
| | | <span style="position: relative; top: 120px;left: 30px;">第ä¸å±</span> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" url="api/Equipment/GetLineInfoByNo" |
| | | :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </el-col> |
| | | <!-- <el-col :span="12"> |
| | | <!-- <el-col :span="8"> |
| | | <div> |
| | | <span style="position: relative; top: 120px;left: 30px;">第åå±</span> |
| | | <div v-for="(group, index) in groupedLines(linescopy4)" :key="index"> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" url="api/Equipment/GetLineInfoByNo" |
| | | :condition="line.condition" /> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" :equipNo="line.equipNo" |
| | | :imgType="line.imgType" :positionX="line.positionX" :positionY="line.positionY" |
| | | url="api/Equipment/GetLineInfoByNo" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div> |
| | | <span style="position: relative; top: 120px;left: 30px;">第äºå±</span> |
| | | <div v-for="(group, index) in groupedLines(linescopy5)" :key="index"> |
| | | <div style="margin-top: 105px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" |
| | | :equipNo="line.equipNo" :imgType="line.imgType" :positionX="line.positionX" |
| | | :positionY="line.positionY" url="api/Equipment/GetLineInfoByNo" |
| | | :condition="line.condition" /> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" :equipNo="line.equipNo" |
| | | :imgType="line.imgType" :positionX="line.positionX" :positionY="line.positionY" |
| | | url="api/Equipment/GetLineInfoByNo" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 105px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" :equipNo="line.equipNo" |
| | | :imgType="line.imgType" :positionX="line.positionX" :positionY="line.positionY" |
| | | url="api/Equipment/GetLineInfoByNo" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 105px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" :equipNo="line.equipNo" |
| | | :imgType="line.imgType" :positionX="line.positionX" :positionY="line.positionY" |
| | | url="api/Equipment/GetLineInfoByNo" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 100px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" :equipNo="line.equipNo" |
| | | :imgType="line.imgType" :positionX="line.positionX" :positionY="line.positionY" |
| | | url="api/Equipment/GetLineInfoByNo" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 100px;"></div> |
| | | <div v-for="(group, index) in groupedLines(linescopy3)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" :equipNo="line.equipNo" |
| | | :imgType="line.imgType" :positionX="line.positionX" :positionY="line.positionY" |
| | | url="api/Equipment/GetLineInfoByNo" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> --> |
| | | </el-row> |
| | | <el-row :gutter="20" class="cardWidthrow"> |
| | | <el-col :span="12"> |
| | | <div> |
| | | <span style="position: relative; top: 120px;left: 30px;">第äºå±</span> |
| | | <div v-for="(group, index) in groupedLines(linescopy4)" :key="index"> |
| | | <div class="positionY-group"> |
| | | <LineInfoCopy v-for="(line, lineIndex) in group.lines" :key="lineIndex" :equipNo="line.equipNo" |
| | | :imgType="line.imgType" :positionX="line.positionX" :positionY="line.positionY" |
| | | url="api/Equipment/GetLineInfoByNo" :condition="line.condition" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | | import { ref, reactive } from "vue"; |
| | | import { onMounted, ref, reactive } from "vue"; |
| | | // import StackerInfo from "./StackerInfo.vue"; |
| | | // import LineInfo from "./LineInfo.vue"; |
| | | import LineInfoCopy from "./LineInfocopy.vue"; |
| | | import LineComponent from './LineComponent.vue'; |
| | | import eventBus from "../uitils/eventBus"; |
| | | |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | //#region 第ä¸å± |
| | | linescopy1: [ |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1103", |
| | | equipNo: "1005", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1102", |
| | | equipNo: "1006", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2103", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | // { |
| | | // equipNo: "2102", |
| | | // imgType: "1", |
| | | // positionX: 5, |
| | | // positionY: 1, |
| | | // condition: false, |
| | | // }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬äºæ |
| | | { |
| | | equipNo: "1104", |
| | | equipNo: "1007", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 4, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1101", |
| | | equipNo: "1008", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 4, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, { |
| | | equipNo: "2002", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2104", |
| | | equipNo: "2001", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 4, |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | // { |
| | | // equipNo: "2101", |
| | | // imgType: "1", |
| | | // positionX: 5, |
| | | // positionY: 2, |
| | | // condition: false, |
| | | // }, |
| | | //#endregion |
| | | |
| | | { |
| | | equipNo: "2004", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2003", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | ], |
| | | //#endregion |
| | | |
| | | //#region 第äºå± |
| | | linescopy2: [ |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1204", |
| | | equipNo: "1009", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1203", |
| | | equipNo: "1010", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2204", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2203", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬äºæ |
| | | { |
| | | equipNo: "1205", |
| | | equipNo: "1011", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1202", |
| | | equipNo: "1012", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, { |
| | | equipNo: "2006", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2205", |
| | | equipNo: "2005", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 2, |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2202", |
| | | equipNo: "2008", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 2, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1206", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1201", |
| | | equipNo: "2007", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2205", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2201", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | ], |
| | | //#endregion |
| | | |
| | | //#region 第ä¸å± |
| | | linescopy3: [ |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1304", |
| | | equipNo: "1017", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1303", |
| | | equipNo: "1018", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2304", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2303", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬äºæ |
| | | { |
| | | equipNo: "1305", |
| | | equipNo: "1019", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1302", |
| | | equipNo: "1020", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, { |
| | | equipNo: "2010", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2305", |
| | | equipNo: "2009", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 2, |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2302", |
| | | equipNo: "2012", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 2, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1306", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1301", |
| | | equipNo: "2011", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2305", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2301", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | ], |
| | | //#endregion |
| | | |
| | | //#region 第åå± |
| | | linescopy4: [ |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1404", |
| | | equipNo: "1021", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1403", |
| | | equipNo: "1022", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2404", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2403", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬äºæ |
| | | { |
| | | equipNo: "1405", |
| | | equipNo: "1023", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1402", |
| | | equipNo: "1024", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, { |
| | | equipNo: "2014", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2405", |
| | | equipNo: "2013", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 2, |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2402", |
| | | equipNo: "2016", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 2, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1406", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1401", |
| | | equipNo: "2015", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2405", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2401", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | ], |
| | | //#endregion |
| | | |
| | | //#region 第äºå± |
| | | linescopy5: [ |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1504", |
| | | equipNo: "1031", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1503", |
| | | equipNo: "1032", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 1, |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2504", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2503", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 1, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬äºæ |
| | | { |
| | | equipNo: "1505", |
| | | equipNo: "1033", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1502", |
| | | equipNo: "1034", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 2, |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, { |
| | | equipNo: "2018", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2505", |
| | | equipNo: "2017", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 2, |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2502", |
| | | equipNo: "2020", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 2, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | //#region ç¬¬ä¸æ |
| | | { |
| | | equipNo: "1506", |
| | | imgType: "1", |
| | | positionX: 1, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1501", |
| | | equipNo: "2019", |
| | | imgType: "1", |
| | | positionX: 2, |
| | | positionY: 3, |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2505", |
| | | imgType: "1", |
| | | positionX: 4, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2501", |
| | | imgType: "1", |
| | | positionX: 5, |
| | | positionY: 3, |
| | | condition: false, |
| | | }, |
| | | //#endregion |
| | | |
| | | ], |
| | | //#endregion |
| | | linescopy6: [ |
| | | { |
| | | equipNo: "1035", |
| | | imgType: "1", |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1036", |
| | | imgType: "1", |
| | | positionX: 0.6, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | |
| | | { |
| | | equipNo: "1037", |
| | | imgType: "1", |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "1038", |
| | | imgType: "1", |
| | | positionX: 0.6, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, { |
| | | equipNo: "2022", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2021", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 8, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2024", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | { |
| | | equipNo: "2023", |
| | | imgType: "1", |
| | | positionX: 26, |
| | | positionY: 20, |
| | | condition: false, |
| | | }, |
| | | ], |
| | | StackerCrane: { |
| | | Automatic: "", |
| | | Fault: "", |
| | | CurrentLayer: "", |
| | | CurrentRow: "1", |
| | | CurrentColumn: "", |
| | | CurrentTaskNum: "", |
| | | Running: "", |
| | | DeviceName: "", |
| | | }, |
| | | xValue1: 0, |
| | | xValue2: 0, |
| | | xValue3: 0, |
| | | xValue4: 0, |
| | | xValue5: 0, |
| | | xValue6: 0, |
| | | timer1: null, // 宿¶å¨åé |
| | | timer2: null, // 宿¶å¨åé |
| | | result1: 0, |
| | | result1: 1, |
| | | RGV01:{ |
| | | Automatic: "", |
| | | Fault: "", |
| | | LevelPoint:0, |
| | | CurrentTaskNum: "", |
| | | Running: "", |
| | | DeviceName: "", |
| | | DeviceCode:"RGV01", |
| | | }, |
| | | RGV02:{ |
| | | Automatic: "", |
| | | Fault: "", |
| | | LevelPoint:1280, |
| | | CurrentTaskNum: "", |
| | | Running: "", |
| | | DeviceName: "", |
| | | DeviceCode:"RGV02", |
| | | }, |
| | | RGV03:{ |
| | | Automatic: "", |
| | | Fault: "", |
| | | LevelPoint:0, |
| | | CurrentTaskNum: "", |
| | | Running: "", |
| | | DeviceName: "", |
| | | DeviceCode:"", |
| | | }, |
| | | }; |
| | | }, |
| | | components: { |
| | |
| | | }); |
| | | return Object.values(groups); |
| | | }, |
| | | async increase() { |
| | | this.xValue1 += 100; |
| | | this.xValue2 += 100; |
| | | // let abc = this.xValue + 100; |
| | | // for (this.xValue; this.xValue < abc; this.xValue++) { |
| | | // await this.delay(10); |
| | | if (this.xValue1 > 1120) { |
| | | this.xValue1 = 1120; |
| | | this.xValue2 = 1120; |
| | | } |
| | | this.$nextTick(() => { |
| | | this.$refs.lineComponent1.moveDot(this.xValue1); |
| | | }); |
| | | this.$nextTick(() => { |
| | | this.$refs.lineComponent2.moveDot(this.xValue2); |
| | | }); |
| | | // } |
| | | updateRGVOne(){ |
| | | if(this.RGV01.Automatic=="èæºæ¨¡å¼"&&this.RGV01.Fault!="æ
é"&&this.RGV01.Running=="å¾
æº"){ |
| | | return 'dot-Automatic '; |
| | | } |
| | | else if(this.RGV01.Automatic=="èæºæ¨¡å¼"&&this.RGV01.Fault!="æ
é"&&this.RGV01.Running=="è¿è¡ä¸"){ |
| | | return 'dot-Running '; |
| | | }else if(this.RGV01.Fault=="æ
é"){ |
| | | return 'dot-Fault '; |
| | | }else{ |
| | | return 'dot-Fault '; |
| | | } |
| | | }, |
| | | async decrease() { |
| | | this.xValue1 -= 100; |
| | | this.xValue2 -= 100; |
| | | if (this.xValue1 < 0) { |
| | | this.xValue1 = 0; |
| | | this.xValue2 = 0; |
| | | } |
| | | // let abc = this.xValue - 100; |
| | | // for (this.xValue; this.xValue > abc; this.xValue--) { |
| | | // await this.delay(10); |
| | | this.$nextTick(() => { |
| | | this.$refs.lineComponent1.moveDot(this.xValue1); |
| | | }); |
| | | this.$nextTick(() => { |
| | | this.$refs.lineComponent2.moveDot(this.xValue2); |
| | | }); |
| | | // } |
| | | updateRGVTwo(){ |
| | | if(this.RGV02.Automatic=="èæºæ¨¡å¼"&&this.RGV02.Fault!="æ
é"&&this.RGV02.Running=="å¾
æº"){ |
| | | return 'dot-Automatic '; |
| | | } |
| | | else if(this.RGV02.Automatic=="èæºæ¨¡å¼"&&this.RGV01.Fault!="æ
é"&&this.RGV02.Running=="è¿è¡ä¸"){ |
| | | return 'dot-Running '; |
| | | }else if(this.RGV02.Fault=="æ
é"){ |
| | | return 'dot-Fault '; |
| | | }else{ |
| | | return 'dot-Fault '; |
| | | } |
| | | }, |
| | | delay(ms) { |
| | | return new Promise(resolve => setTimeout(resolve, ms)); |
| | | updateRGV03(){ |
| | | if(this.RGV03.Automatic=="èæºæ¨¡å¼"&&this.RGV03.Fault!="æ
é"&&this.RGV03.Running=="å¾
æº"){ |
| | | return 'dot-Automatic '; |
| | | } |
| | | else if(this.RGV03.Automatic=="èæºæ¨¡å¼"&&this.RGV03.Fault!="æ
é"&&this.RGV03.Running=="è¿è¡ä¸"){ |
| | | return 'dot-Running '; |
| | | }else if(this.RGV03.Fault=="æ
é"){ |
| | | return 'dot-Fault '; |
| | | }else{ |
| | | return 'dot-Fault '; |
| | | } |
| | | }, |
| | | startTimer() { |
| | | // å¼å¯å®æ¶å¨ï¼æ¯3ç§æ§è¡ä¸æ¬¡ |
| | | this.timer1 = setInterval(() => { |
| | | // æ§è¡å®æ¶å¨çæä½ |
| | | this.methodofexecution(1) |
| | | if (this.result1 <= 0) { |
| | | this.result1 = 0 |
| | | } |
| | | this.$nextTick(() => { |
| | | this.$refs.lineComponent1.moveDot(this.result1); |
| | | }); |
| | | }, 3000); |
| | | // å¼å¯å®æ¶å¨ï¼æ¯3ç§æ§è¡ä¸æ¬¡ |
| | | this.timer2 = setInterval(() => { |
| | | // æ§è¡å®æ¶å¨çæä½ |
| | | this.methodofexecution(2) |
| | | if (this.result2 <= 0) { |
| | | this.result2 = 0 |
| | | } |
| | | this.$nextTick(() => { |
| | | this.$refs.lineComponent2.moveDot(this.result2); |
| | | }); |
| | | }, 3000); |
| | | }, |
| | | stopTimer() { |
| | | // å
³é宿¶å¨ |
| | | clearInterval(this.timer1); |
| | | clearInterval(this.timer2); |
| | | }, |
| | | //è·å并计ç®å åæºä½ç½® |
| | | methodofexecution(equipNo, data, x) { |
| | | if (x) { |
| | | let WalkingLaserValue = data.r_Stack_WalkingLaserValue; |
| | | let Value = ((WalkingLaserValue - 1200) / 50) + 10 |
| | | if (equipNo === 1) { |
| | | this.result1 = Value |
| | | } |
| | | else if (equipNo === 2) { |
| | | this.result2 = Value |
| | | } |
| | | } else { |
| | | // this.$message({ |
| | | // type: "error", |
| | | // message: "x.message", |
| | | // }); |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | |
| | | }, |
| | | mounted() { |
| | | // åå§å页颿¶å¼å¯å®æ¶å¨ |
| | | // this.startTimer(); |
| | | // // çå¬è·¯ç±åå |
| | | // this.$router.beforeEach((to, from, next) => { |
| | | // this.stopTimer(); // å
³é宿¶å¨ |
| | | // next(); // ç»§ç»è·¯ç±å¯¼èª |
| | | // }); |
| | | }, |
| | | created() { |
| | | eventBus.on('stackerData', eventData => { |
| | | // æ´æ°ç»ä»¶çæ°æ® |
| | | this.methodofexecution(parseInt(eventData.plcName, 10), eventData.data, true) |
| | | const lineComponentsMap = { |
| | | 1: 'lineComponent1', |
| | | 2: 'lineComponent2', |
| | | |
| | | const stackerComponentsMap = { |
| | | "SC01": 'stacker1', |
| | | "SC02": 'stacker2', |
| | | "SC03": 'stacker3', |
| | | "SC04": 'stacker4', |
| | | "SC05": 'stacker5', |
| | | "SC06": 'stacker6', |
| | | }; |
| | | |
| | | const resultsMap = { |
| | | 1: this.result1, |
| | | 2: this.result2, |
| | | }; |
| | | |
| | | const componentKey = lineComponentsMap[eventData.plcName]; |
| | | const result = resultsMap[eventData.plcName]; |
| | | |
| | | if (componentKey && result !== undefined) { |
| | | const componentKey = stackerComponentsMap[eventData.data.deviceCode]; |
| | | if (componentKey) { |
| | | this.StackerCrane.Automatic=eventData.data.automatic; |
| | | this.StackerCrane.Fault=eventData.data.fault; |
| | | this.StackerCrane.Running=eventData.data.running; |
| | | this.StackerCrane.CurrentColumn=eventData.data.currentColumn; |
| | | this.StackerCrane.CurrentLayer=eventData.data.currentLayer; |
| | | this.StackerCrane.LevelPoint=eventData.data.levelPoint; |
| | | this.StackerCrane.DeviceName=eventData.data.deviceName; |
| | | this.$nextTick(() => { |
| | | this.$refs[componentKey].moveDot(result); |
| | | this.$refs[componentKey].moveDot(this.StackerCrane); |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | eventBus.on('RGVData', eventData => { |
| | | |
| | | if(eventData.data.deviceCode=="RGV01"){ |
| | | this.RGV01.Automatic=eventData.data.automatic; |
| | | this.RGV01.Fault=eventData.data.fault; |
| | | this.RGV01.Running=eventData.data.running; |
| | | this.RGV01.LevelPoint=eventData.data.levelPoint; |
| | | this.RGV01.DeviceName=eventData.data.deviceName; |
| | | console.log(this.RGV01.LevelPoint) |
| | | }else if(eventData.data.deviceCode=="RGV02"){ |
| | | this.RGV02.Automatic=eventData.data.automatic; |
| | | this.RGV02.Fault=eventData.data.fault; |
| | | this.RGV02.Running=eventData.data.running; |
| | | this.RGV02.LevelPoint=eventData.data.levelPoint; |
| | | this.RGV02.DeviceName=eventData.data.deviceName; |
| | | }else if(eventData.data.deviceCode=="RGV03"){ |
| | | this.RGV03.Automatic=eventData.data.automatic; |
| | | this.RGV03.Fault=eventData.data.fault; |
| | | this.RGV03.Running=eventData.data.running; |
| | | this.RGV03.LevelPoint=eventData.data.levelPoint; |
| | | this.RGV03.DeviceName=eventData.data.deviceName; |
| | | } |
| | | |
| | | }); |
| | | |
| | | eventBus.on("LineData", eventData => { |
| | | const stationMap = { |
| | | "11": this.linescopy1, |
| | | "10": this.linescopy1, |
| | | "12": this.linescopy2, |
| | | "22": this.linescopy2, |
| | | "13": this.linescopy3, |
| | | "23": this.linescopy3, |
| | | "14": this.linescopy4, |
| | | "24": this.linescopy4, |
| | | "15": this.linescopy5, |
| | | "25": this.linescopy5 |
| | | "SC01": this.linescopy1, |
| | | "SC02": this.linescopy2, |
| | | "SC03": this.linescopy3, |
| | | "SC04": this.linescopy4, |
| | | "SC05": this.linescopy5, |
| | | "SC06": this.linescopy6, |
| | | "SC07": this.linescopy7, |
| | | }; |
| | | |
| | | var station = eventData.station_code; |
| | | var layer = station.substring(0, 2); |
| | | |
| | | if (stationMap[layer]) { |
| | | stationMap[layer].forEach((line) => { |
| | | var station = eventData.stationChildCode; |
| | | if (stationMap[eventData.roadway]) { |
| | | stationMap[eventData.roadway].forEach((line) => { |
| | | if (line.equipNo === station) { |
| | | line.condition = eventData.r_Line_HasPallet === 1; |
| | | line.condition = eventData.inStock; |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | |
| | | for (let i = 1; i < 6; i++) { |
| | | this.methodofexecution(i, null, false) |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | margin-bottom: 10px; |
| | | } */ |
| | | .title { |
| | | height: 800px; |
| | | margin-left: 20px; |
| | | height: 1500px; |
| | | } |
| | | |
| | | .cardWidth { |
| | |
| | | |
| | | .stackerDiv { |
| | | border: 1px solid rgba(0, 195, 255, 0.822); |
| | | width: 1600px; |
| | | width: 980px; |
| | | padding-left: 3px; |
| | | } |
| | | |
| | |
| | | color: rgba(0, 195, 255, 0.822); |
| | | margin-bottom: 12px; |
| | | } |
| | | .dot-Running { |
| | | position: absolute; |
| | | top: -5px; |
| | | width: 20px; |
| | | height: 20px; |
| | | border-radius: 50%; |
| | | background-color: #409eff; |
| | | transition: transform 0.3s ease; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 9px; |
| | | font-weight: bold; |
| | | color: white; |
| | | } |
| | | .dot-Automatic { |
| | | position: absolute; |
| | | top: -5px; |
| | | width: 20px; |
| | | height: 20px; |
| | | border-radius: 50%; |
| | | background-color: #0df705; |
| | | transition: transform 0.3s ease; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 9px; |
| | | font-weight: bold; |
| | | color: white; |
| | | } |
| | | |
| | | .dot-Fault { |
| | | position: absolute; |
| | | top: -5px; |
| | | width: 20px; |
| | | height: 20px; |
| | | /* right:0px; */ |
| | | border-radius: 50%; |
| | | background-color: #f80410; |
| | | transition: transform 0.3s ease; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 9px; |
| | | font-weight: bold; |
| | | color: white; |
| | | } |
| | | |
| | | |
| | | .line-container { |
| | | position: relative; |
| | | height: 1280px; |
| | | background-color: #ecf5ff; |
| | | width: 20px; |
| | | top:30px; |
| | | left:200px |
| | | } |
| | | .RGVline { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: 2px; |
| | | background-color: #a0cfff; |
| | | } |
| | | .line { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: 2px; |
| | | background-color: #a0cfff; |
| | | } |
| | | </style> |