| | |
| | | } |
| | | .station { |
| | | position: absolute; |
| | | width: 40px; |
| | | width: 20px; |
| | | height: 24px; |
| | | /*border-radius: 50%;*/ |
| | | text-align: center; |
| | |
| | | " |
| | | style="fill:none; stroke:blue; stroke-width:4;" /> |
| | | </svg> |
| | | <div class="bus-station"> |
| | | <div v-for="(item,i) in devpPos1" class="bus-item-top" :style="'left:' + (75 + i * 15) + 'px'">{{item.dev_no}}</div> |
| | | </div> |
| | | <div class="bus-station" style="flex-direction: column"> |
| | | <div v-for="(item,i) in devpPos2" class="bus-item-left" :style="'top:' + (200 + i * 50) + 'px'">{{item.dev_no}}</div> |
| | | </div> |
| | | <div class="bus-station" style="flex-direction: column"> |
| | | <div v-for="(item,i) in devpPos3" class="bus-item-left2" :style="'top:' + (100 + i * 10) + 'px'">{{item.dev_no}}</div> |
| | | </div> |
| | | <!-- Stations on outer ring --> |
| | | <!-- <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueX + '%', left: station.valueY + '%' }">{{ station.index }}</div>--> |
| | | <!-- <div class="bus-station">--> |
| | | <!-- <div v-for="(item,i) in devpPos1" class="bus-item-top" :style="'left:' + (75 + i * 15) + 'px'">{{item.dev_no}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="bus-station" style="flex-direction: column">--> |
| | | <!-- <div v-for="(item,i) in devpPos2" class="bus-item-left" :style="'top:' + (200 + i * 50) + 'px'">{{item.dev_no}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="bus-station" style="flex-direction: column">--> |
| | | <!-- <div v-for="(item,i) in devpPos3" class="bus-item-left2" :style="'top:' + (100 + i * 10) + 'px'">{{item.dev_no}}</div>--> |
| | | <!-- </div>--> |
| | | <!-- Stations on outer ring--> |
| | | <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueY + 'px', left: station.valueX + 'px' }">{{ station.index }}</div> |
| | | <div> |
| | | <el-switch |
| | | style="display: block" |