| | |
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
| | | <script type="text/javascript" src="../static/js/vue.min.js"></script> |
| | | <script type="text/javascript" src="../static/js/element.js"></script> |
| | | <script type="text/javascript" src="testPosition.js"></script> |
| | | <style> |
| | | body { |
| | | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | |
| | | } |
| | | .map { |
| | | position: relative; |
| | | width: 80vh; |
| | | width: 52vw; |
| | | height: 80vh; |
| | | border-radius: 50%; |
| | | display: flex; |
| | |
| | | transform: scale(1.2); |
| | | } |
| | | .bus { |
| | | font-size: 10px; |
| | | background-color: #2196F3; |
| | | border: 20px solid #ffffff; |
| | | border: 10px solid #ffffff; |
| | | position: absolute; |
| | | width: 24px; |
| | | height: 24px; |
| | | width: 15px; |
| | | height: 15px; |
| | | border-radius: 50%; |
| | | text-align: center; |
| | | line-height: 24px; |
| | | line-height: 15px; |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | } |
| | | .station:hover, .bus:hover { |
| | | transform: scale(1.4); |
| | | z-index: 999; |
| | | } |
| | | |
| | | .task-bar-left { |
| | |
| | | .el-table .success-row { |
| | | background: #f0f9eb; |
| | | } |
| | | .container { |
| | | width: 100vh; |
| | | height: 72vh; |
| | | position: absolute; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-station { |
| | | width: 100vh; |
| | | height: 72vh; |
| | | position: absolute; |
| | | display: flex; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-item-top { |
| | | background: red; |
| | | position: relative; |
| | | width: 40px; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | top: 880px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | left: 1230px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left2 { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | left: 1000px; |
| | | text-align: center; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | |
| | | <!--</header>--> |
| | | <div id="app"> |
| | | <div class="map"> |
| | | <div v-if="licenseDayI <=30 "> |
| | | <div style="color: red">{{licenseDay}}</div> |
| | | </div> |
| | | <!-- <div class="inner-ring"></div>--> |
| | | <!-- <div class="outer-ring"></div>--> |
| | | <div v-for="track in energyGatheringRing" class="inner-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div> |
| | | <div v-for="track in energyGatheringRing" class="outer-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div> |
| | | |
| | | <!-- <div v-for="track in energyGatheringRing" class="inner-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>--> |
| | | <!-- <div v-for="track in energyGatheringRing" class="outer-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>--> |
| | | <svg class="container"> |
| | | <!-- <path d="M 100,250--> |
| | | <!-- L 100,800--> |
| | | <!-- C 100,800 100,850 150,850--> |
| | | <!-- C 150,850 200,850 200,800--> |
| | | <!-- L 200,250--> |
| | | <!-- C 200,250 200,200 250,200--> |
| | | <!-- L 1100,200--> |
| | | <!-- C 1100,200 1150,200 1150,150--> |
| | | <!-- C 1150,150 1150,100 1100,100--> |
| | | <!-- L 250,100--> |
| | | <!-- C 250,100 90,90 100,250 z"--> |
| | | <!-- style="fill:none; stroke:blue; stroke-width:4;" />--> |
| | | <path d="M 1200,750 |
| | | L 1200,100 |
| | | C 1200,100 1200,50 1150,50 |
| | | C 1150,50 1100,50 1100,100 |
| | | L 1100,700 |
| | | C 1100,700 1100,750 1050,750 |
| | | L 60,750 |
| | | 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: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 v-for="station in tableDataDev" class="station" :style="{ top: station.valueX + '%', left: station.valueY + '%' }">{{ station.index }}</div>--> |
| | | <div> |
| | | <el-switch |
| | | style="display: block" |
| | |
| | | </el-switch> |
| | | </div> |
| | | <!-- Buses --> |
| | | <div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueX + '%', left: bus.valueY + '%' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div> |
| | | <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> |
| | | |
| | | <!-- Left Task Bar --> |
| | |
| | | label="工作状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="staNo" |
| | | label="目标站"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="sourceStaNo" |
| | | label="源站"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="staNo" |
| | | label="目标站"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="modiTime" |
| | |
| | | prop="rgvSts" |
| | | label="RGV状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="操作"> |
| | | <el-button type="primary" icon="el-icon-edit" circle></el-button> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop=""--> |
| | | <!-- label="操作">--> |
| | | <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button>--> |
| | | <!-- </el-table-column>--> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | |
| | | prop="status$" |
| | | label="状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="操作"> |
| | | <el-button type="primary" icon="el-icon-edit" circle></el-button> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop=""--> |
| | | <!-- label="操作">--> |
| | | <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button>--> |
| | | <!-- </el-table-column>--> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | |
| | | activeNames: ['1'], |
| | | valueLeft: '0', |
| | | valueRight: '0', |
| | | licenseDay: '已过期', |
| | | licenseDayI: 100, |
| | | valueSystem: false, |
| | | tableDataRgv: [], |
| | | tableDataDev: [], |
| | | energyGatheringRing: [], |
| | | tableDataLeft: [], |
| | | tableDataRight: [] |
| | | tableDataRight: [], |
| | | 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}, |
| | | ], |
| | | }, |
| | | created(){ |
| | | this.init(); |
| | | this.devpPos1.reverse() |
| | | this.devpPos3.reverse() |
| | | }, |
| | | watch: { |
| | | |
| | |
| | | this.getTableDataLeft() |
| | | this.getTableDataRight() |
| | | this.getValueSystem() |
| | | this.getLicenseDays() |
| | | |
| | | setInterval(() => { |
| | | this.getTableDataRgv() |
| | |
| | | this.getTableDataLeft() |
| | | this.getTableDataRight() |
| | | this.getValueSystem() |
| | | this.getLicenseDays() |
| | | |
| | | }, 1000) |
| | | }, |
| | |
| | | return 'success-row'; |
| | | } |
| | | return ''; |
| | | }, |
| | | getLicenseDays(){ |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/license/getLicenseDays", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code == 200) { |
| | | if (res.data.day<0){ |
| | | that.licenseDay = "已过期"+res.data.day+"天"; |
| | | that.licenseDayI = -1; |
| | | } else { |
| | | that.licenseDay = "许可证有效期"+res.data.day+"天"; |
| | | that.licenseDayI = res.data.day; |
| | | } |
| | | }else { |
| | | that.licenseDay = "已过期"; |
| | | that.licenseDayI = -1; |
| | | } |
| | | } |
| | | }); |
| | | |
| | | }, |
| | | getValueSystem() { |
| | | let that = this; |
| | |
| | | }, |
| | | getTableDataRgv() { |
| | | let that = this; |
| | | // that.tableDataRgv = busPsto |
| | | // return |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/ring/through/rgv/position/data", |
| | | headers: { |