| | |
| | | .bus { |
| | | font-size: 10px; |
| | | background-color: #2196F3; |
| | | border: 10px solid #ffffff; |
| | | /*border: 10px solid #ffffff;*/ |
| | | position: absolute; |
| | | width: 15px; |
| | | height: 15px; |
| | |
| | | line-height: 15px; |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | /* 3D效果 */ |
| | | transform: translateZ(0); |
| | | border: 10px solid rgba(255, 255, 255, 0.8); |
| | | /* 添加流光动画 */ |
| | | animation: pulse 2s infinite; |
| | | } |
| | | |
| | | @keyframes pulse { |
| | | 0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); } |
| | | 70% { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); } |
| | | 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); } |
| | | } |
| | | .station:hover, .bus:hover { |
| | | transform: scale(1.4); |
| | |
| | | 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:2;" /> |
| | | C 1100,850 1200,850 1200,750" |
| | | style="fill:none; stroke:blue; stroke-width:3; stroke-dasharray:10,1;"/> |
| | | </svg> |
| | | <!-- <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueY + 'px', left: station.valueX + 'px' , backgroundColor: station.modeColor}">{{ station.index }}</div>--> |
| | | |
| | | <div v-for="station in tableDataDev" class="station" :style="{ |
| | | top: convertToCSSPosition(station.valueX, station.valueY).y + 'px', |
| | | left: convertToCSSPosition(station.valueX, station.valueY).x + 'px', |
| | | backgroundColor: station.modeColor}">{{ station.index }}</div> |
| | | backgroundColor: station.modeColor}">{{ station.index }} |
| | | </div> |
| | | |
| | | <div> |
| | | <el-switch |
| | | style="display: block" |
| | |
| | | @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 v-for="bus in tableDataRgv" class="bus" :style="{ |
| | | top: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).y + 'px', |
| | | left: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).x + 'px', |
| | | borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div> |
| | | borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }} |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | <!-- Left Task Bar --> |
| | |
| | | tableDataLeft: [], |
| | | tableDataLeft1: [], |
| | | tableDataRight: [], |
| | | tableDataRight1: [], |
| | | devpPos1:[ |
| | | {dev_no: 116,pos:633980}, |
| | | {dev_no: 117,pos:604043}, |
| | | {dev_no: 118,pos:574323}, |
| | | {dev_no: 119,pos:559534}, |
| | | {dev_no: 120,pos:544682}, |
| | | {dev_no: 121,pos:514912}, |
| | | {dev_no: 122,pos:485227}, |
| | | {dev_no: 123,pos:470367}, |
| | | {dev_no: 124,pos:455514}, |
| | | {dev_no: 125,pos:425768}, |
| | | {dev_no: 126,pos:396268}, |
| | | {dev_no: 127,pos:381106}, |
| | | {dev_no: 128,pos:366311}, |
| | | {dev_no: 129,pos:336638}, |
| | | {dev_no: 130,pos:306820}, |
| | | {dev_no: 131,pos:277067}, |
| | | {dev_no: 132,pos:257418}, |
| | | {dev_no: 133,pos:217730}, |
| | | ], |
| | | devpPos2:[ |
| | | {dev_no: 112,pos:891000}, |
| | | {dev_no: 113,pos:865000}, |
| | | {dev_no: 114,pos:800000}, |
| | | {dev_no: 115,pos:780000}, |
| | | ], |
| | | devpPos3:[ |
| | | {dev_no: 101,pos:1269958}, |
| | | {dev_no: 102,pos:1243454}, |
| | | {dev_no: 103,pos:1229081}, |
| | | {dev_no: 104,pos:1202099}, |
| | | {dev_no: 105,pos:1187564}, |
| | | {dev_no: 106,pos:1160630}, |
| | | {dev_no: 107,pos:1146152}, |
| | | {dev_no: 108,pos:1119463}, |
| | | {dev_no: 109,pos:1105038}, |
| | | {dev_no: 110,pos:1077961}, |
| | | {dev_no: 111,pos:1063813}, |
| | | ], |
| | | tableDataRight1: [] |
| | | }, |
| | | created(){ |
| | | this.init(); |
| | | this.devpPos1.reverse() |
| | | this.devpPos3.reverse() |
| | | }, |
| | | watch: { |
| | | |
| | |
| | | }); |
| | | }, |
| | | handleChange(val) { |
| | | console.log(val); |
| | | if (val.length === 0){ |
| | | valueRight = '0'; |
| | | } else { |
| | | console.log("2222"+val); |
| | | |
| | | if (val.length >= 1){ |
| | | this.handleChangeValueRight(1) |
| | |
| | | } |
| | | }, |
| | | handleChange1(val) { |
| | | console.log(val); |
| | | if (val.length === 0){ |
| | | valueRight1 = '0'; |
| | | } else { |
| | | console.log("2222"+val); |
| | | |
| | | if (val.length >= 1){ |
| | | this.handleChangeValueRight1(1) |
| | | } |
| | |
| | | }); |
| | | }, |
| | | handleChangeValueRight(val) { |
| | | console.log("33333"+val); |
| | | |
| | | switch (val){ |
| | | case 1: |
| | | valueRight = '100'; |
| | |
| | | } |
| | | }, |
| | | handleChangeValueRight1(val) { |
| | | console.log("33333"+val); |
| | | |
| | | switch (val){ |
| | | case 1: |
| | | valueRight1 = '100'; |
| | |
| | | }, |
| | | getTableDataRgv() { |
| | | let that = this; |
| | | // that.tableDataRgv = busPsto |
| | | // return |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/ring/through/rgv/position/data", |
| | | headers: { |