| | |
| | | <template> |
| | | <flex-layout direction="row" style="color:#ffffff"> |
| | | <el-table border size="small" :data="table.datas" height="100%"> |
| | | <div class="headrs"> |
| | | <el-table> |
| | | <el-table-column label="电池充放电数据管理 显示与隐藏查询条件" header-align="center"></el-table-column> |
| | | </el-table> |
| | | |
| | | <table class="table-head" width="100%" border="1" cellspacing="0"> |
| | | <thead> |
| | | <tr> |
| | | <th>维护区</th> |
| | | <th colspan="2" width="120px">机房站点</th> |
| | | <th>蓄电池组</th> |
| | | <th>电池测试记录</th> |
| | | <th colspan="2">电池测试记录时间段</th> |
| | | <th>放电类型</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr> |
| | | <th>维护区</th> |
| | | <th colspan="2" width="120px">机房站点</th> |
| | | <th>蓄电池组</th> |
| | | <th>电池测试记录</th> |
| | | <th colspan="2">电池测试记录时间段</th> |
| | | <th>放电类型</th> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | |
| | | <!-- <table class="table-head" width="100%" border="1" cellspacing="0"> |
| | | <thead> |
| | | <tr> |
| | | <th>维护区</th> |
| | | <th colspan="4">机房站点</th> |
| | | <th>蓄电池组</th> |
| | | <th>电池测试记录</th> |
| | | <th colspan="2">电池测试记录时间段</th> |
| | | <th>放电类型</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | <tr> |
| | | <td>全部</td> |
| | | <td align="center" width="120">全部(70)</td> |
| | | <td>准时率22</td> |
| | | <td>准时率22</td> |
| | | <td>准时度33</td> |
| | | <td>准时率</td> |
| | | <td>回来时间</td> |
| | | <td>出去时间</td> |
| | | <td>准时度</td> |
| | | <td>准时率</td> |
| | | </tr> |
| | | </tbody> |
| | | </table>--> |
| | | |
| | | <!-- 选择器 --> |
| | | <!-- <div class="selects"> |
| | | <el-select v-model="value" placeholder="维护区"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-select v-model="value" placeholder="机房站点" class="rooms"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-select v-model="value" placeholder="蓄电池组"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-select v-model="value" placeholder="电池测试记录"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <div class="block"> |
| | | <el-date-picker |
| | | v-model="valueTime" |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | ></el-date-picker> |
| | | </div> |
| | | <el-select v-model="value" placeholder="放电类型"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </div>--> |
| | | </div> |
| | | |
| | | <!-- 表单 --> |
| | | <el-table border size="small" :data="table.datas" height="80%"> |
| | | <el-table-column |
| | | v-for="header in table.headers" |
| | | :key="header.prop" |
| | |
| | | align="center" |
| | | ></el-table-column> |
| | | </el-table> |
| | | |
| | | <!-- 底部分页 --> |
| | | <div class="paginations"> |
| | | <ul> |
| | | <li>查询</li> |
| | | <li>导出</li> |
| | | <li>表格选项</li> |
| | | </ul> |
| | | <el-pagination |
| | | class="pagess" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage4" |
| | | :page-sizes="[100, 200, 300, 400]" |
| | | :page-size="100" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="400" |
| | | ></el-pagination> |
| | | </div> |
| | | </flex-layout> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | /* 底部分页 */ |
| | | currentPage1: 5, |
| | | currentPage2: 5, |
| | | currentPage3: 5, |
| | | currentPage4: 4, |
| | | /* 日期 */ |
| | | valueTime: "", |
| | | /* 选择器内容 */ |
| | | options: [ |
| | | { |
| | | value: "选项1", |
| | | label: "黄金糕" |
| | | }, |
| | | { |
| | | value: "选项2", |
| | | label: "双皮奶" |
| | | }, |
| | | { |
| | | value: "选项3", |
| | | label: "蚵仔煎" |
| | | }, |
| | | { |
| | | value: "选项4", |
| | | label: "龙须面" |
| | | }, |
| | | { |
| | | value: "选项5", |
| | | label: "北京烤鸭" |
| | | } |
| | | ], |
| | | value: "", |
| | | /* 表单 */ |
| | | table: { |
| | | headers: [ |
| | |
| | | }; |
| | | }, |
| | | created() {}, |
| | | methods: {} |
| | | methods: { |
| | | handleSizeChange(val) { |
| | | console.log(`每页 ${val} 条`); |
| | | }, |
| | | handleCurrentChange(val) { |
| | | console.log(`当前页: ${val}`); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .headrs { |
| | | border: 1px solid red; |
| | | height: 170px; |
| | | width: 100%; |
| | | position: relative; |
| | | .table-head { |
| | | color: #ffff; |
| | | border: 1px solid #ffffff; |
| | | position: absolute; |
| | | top: 28%; |
| | | |
| | | thead tr { |
| | | height: 30px; |
| | | } |
| | | |
| | | tbody tr{ |
| | | height: 30px; |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | /* .titiles { |
| | | margin-top: 4px; |
| | | margin-left: 4px; |
| | | margin-right: 4px; |
| | | padding-left: 10px; |
| | | border-radius: 6px; |
| | | font-size: 14px; |
| | | text-align: center; |
| | | background-image: linear-gradient( |
| | | rgb(62, 189, 201), |
| | | #016a95, |
| | | #00638d, |
| | | #006999, |
| | | #009ee3 |
| | | ); |
| | | line-height: 32px; |
| | | font-weight: bold; |
| | | } */ |
| | | |
| | | .selects { |
| | | height: 100%; |
| | | display: flex; |
| | | |
| | | .rooms { |
| | | flex: 2; |
| | | } |
| | | .block { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .paginations { |
| | | border: 1px solid red; |
| | | width: 100%; |
| | | position: relative; |
| | | |
| | | ul { |
| | | position: absolute; |
| | | top: 5px; |
| | | left: 26%; |
| | | } |
| | | ul li { |
| | | display: inline-block; |
| | | margin: 2px; |
| | | } |
| | | |
| | | .pagess { |
| | | margin: 0 auto; |
| | | width: 30%; |
| | | border: 1px solid blue; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | realTimeAlarmss() { |
| | | var batt = this.batt; |
| | | console.log('batt',batt); |
| | | realTimeAlarm(batt.FBSDeviceId).then(res => { |
| | | realTimeAlarm({ |
| | | dev_id:batt.FBSDeviceId |
| | | }).then(res => { |
| | | console.log('batt.FBSDeviceId',batt.FBSDeviceId); |
| | | /* let rsccc = JSON.parse(res.data.result); |
| | | console.log("rsccc", rsccc); */ |
| | | let rsccc = JSON.parse(res.data.result); |
| | | console.log("rsccc", rsccc); |
| | | /* this.inputs = rsa.data[0]; */ |
| | | /* console.log("this.inputs", this.inputs); */ |
| | | }); |
| | |
| | | ); //开启信息窗口 |
| | | }); |
| | | }); |
| | | |
| | | this.opts = { |
| | | width: 350, // 信息窗口宽度 |
| | | height: 150, // 信息窗口高度 |
| | | title: `<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">湖北省-武汉市-东西湖区-武汉源畅模拟机房 </p>`, // 信息窗口标题 |
| | | title: `<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">湖北省-武汉市-测试机房1</p>`, // 信息窗口标题* ${this.medatas.info.label} |
| | | message: "地址信息" |
| | | }; |
| | | |
| | | this.infoWindow = new BMapGL.InfoWindow( // 创建信息窗口对象 |
| | | `<div style="color: black;padding:8px" ><div >蓄电池组告警数目:50 <a href>详情>></a></div> <div style="margin-top:5px"> 蓄电池组落后数目:0   <a href>详情>><a></div> <div style="margin-top:5px">蓄电池组延时数目:0  <a href>详情>><a></div> |
| | | <div style="margin-top:5px"><a href="syncPage()">实时数据</a> 历史数据</div> <div style="margin-top:5px">地址:</div></div>` /* 湖北省武汉市武昌区和平大道472号 */, |
| | | <div style="margin-top:5px"><a href="syncPage()">实时数据</a> 历史数据</div> <div style="margin-top:5px">地址: ${ |
| | | this.medatas.address |
| | | }</div></div>` /* */, |
| | | this.opts |
| | | ); |
| | | |
| | |
| | | map_latitude: newcenterMove[0].map_latitude, |
| | | map_level: newcenterMove[0].map_level |
| | | }); |
| | | console.log("center", center); |
| | | /* console.log("center", center); */ |
| | | } |
| | | }, |
| | | { |
| | |
| | | StationName2: node.parent.data.label, |
| | | StationName5: node.data.label |
| | | }); |
| | | console.log(" room", room); |
| | | /* console.log(" room", room); */ |
| | | if (room.data.result && JSON.parse(room.data.result).code == 0) { |
| | | return this.$message.error(JSON.parse(room.data.result).msg); |
| | | } |
| | |
| | | return this.$message.error(JSON.parse(batteryList.data.result).msg); |
| | | } |
| | | const list = JSON.parse(areaRoom.data.result).data; |
| | | this.obj = list.find(item => item.StationName3 == node.data.label); |
| | | console.log("obj", this.obj); //机房坐标 |
| | | if (this.obj.longitude == 0 && this.obj.latitude == 0) { |
| | | this.obj = list.find(item => item.StationName3 == node.data.label); //机房坐标 |
| | | /* console.log("obj", this.obj); */ if ( |
| | | this.obj.longitude == 0 && |
| | | this.obj.latitude == 0 |
| | | ) { |
| | | this.$message.error("机房未定位"); |
| | | } else { |
| | | this.batteryList = JSON.parse(batteryList.data.result).data; //电池组数目 |
| | | console.log(" this.batteryList", this.batteryList); |
| | | /* console.log(" this.batteryList", this.batteryList); */ |
| | | /* 图标移动位置 */ |
| | | this.marker.setPosition( |
| | | new BMapGL.Point(this.obj.longitude, this.obj.latitude) |
| | |
| | | |
| | | //右击删除marker 菜单 |
| | | this.marker.addEventListener("rightclick", e => { |
| | | /* console.log('e...............',e) */ |
| | | const select = that.addseRoomlist.find( |
| | | item => this.batteryList[0].StationId === item.data.StationId |
| | | ); |
| | |
| | | FBSDeviceId: select.data.FBSDeviceId |
| | | }); |
| | | //右击删除标注 |
| | | console.log("deleteMarker", deleteMarker); |
| | | /* console.log("deleteMarker", deleteMarker); */ |
| | | |
| | | this.map.removeOverlay(select); |
| | | |
| | | this.initMap(); |
| | | } |
| | | this.$message({ |
| | | type: "success", |
| | |
| | | this.lng = ipRes.content.point.x; //经度 |
| | | this.lat = ipRes.content.point.y; //纬度 |
| | | this.addseRoomlist = JSON.parse(addSeachroom.data.result); |
| | | /* console.log('addseRoomlist',this.addseRoomlist) */ |
| | | // 创建地图 |
| | | this.$nextTick(() => { |
| | | this.initMap(); |
| | |
| | | |
| | | /* 添加机房接口 */ |
| | | meData() { |
| | | const that = this; |
| | | // 添加面板点击事件 |
| | | showInfoWindowTest.$on("set-home-info", function(data) { |
| | | console.log("data", data); |
| | | that.medatas = data; |
| | | console.log("that.medatas", that.medatas); |
| | | |
| | | this.$confirm("确认将武汉-东西湖区设置到该位置吗?", { |
| | | confirmButtonText: "确定", |