|
|
@@ -9,7 +9,7 @@
|
|
|
请选择园区
|
|
|
</van-cell>
|
|
|
<van-dropdown-menu>
|
|
|
- <van-dropdown-item v-model="value1" :options="option1" />
|
|
|
+ <van-dropdown-item v-model="selectedAreaId" :options="areaList" @change="areaChange"/>
|
|
|
</van-dropdown-menu>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
@@ -18,7 +18,7 @@
|
|
|
请选择楼栋号
|
|
|
</van-cell>
|
|
|
<van-dropdown-menu>
|
|
|
- <van-dropdown-item v-model="value1" :options="option2" />
|
|
|
+ <van-dropdown-item v-model="selectedBuildingId" :options="buildingList" @change="buildingChange"/>
|
|
|
</van-dropdown-menu>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
@@ -27,47 +27,152 @@
|
|
|
请选择房间号
|
|
|
</van-cell>
|
|
|
<van-dropdown-menu>
|
|
|
- <van-dropdown-item v-model="value1" :options="option3" />
|
|
|
+ <van-dropdown-item v-model="selectedRoomId" :options="roomList" @change="roomChange"/>
|
|
|
</van-dropdown-menu>
|
|
|
</van-cell-group>
|
|
|
<div class="fyy-button">
|
|
|
- <van-button type="primary">查询</van-button>
|
|
|
- <p>剩余电量：8</p>
|
|
|
+ <van-button type="primary" @click="queryPower(selectedRoomId)">查询</van-button>
|
|
|
+ <p>
|
|
|
+ 剩余电量：<span v-html="remainingPower" class="power"></span>
|
|
|
+ <span v-if="remainingPower!=null">度</span>
|
|
|
+
|
|
|
+ 当前状态：<span v-html="stateText"></span>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="fyyfooter">
|
|
|
- <router-link to="/Pay">
|
|
|
- <van-button type="bigred">充值</van-button>
|
|
|
- </router-link>
|
|
|
+ <van-button type="bigred" @click="recharge()">充值</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
+import remoteApi from '@/api/remoteApi'
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- value1: 0,
|
|
|
- value2: "a",
|
|
|
- option1: [
|
|
|
- { text: "东校区", value: 0 },
|
|
|
- { text: "西校区", value: 1 },
|
|
|
- { text: "北校区", value: 2 }
|
|
|
- ],
|
|
|
- option2: [
|
|
|
- { text: "1号楼", value: 0 },
|
|
|
- { text: "2号楼", value: 1 },
|
|
|
- { text: "3号楼", value: 2 }
|
|
|
- ],
|
|
|
- option3: [
|
|
|
- { text: "501", value: 0 },
|
|
|
- { text: "502", value: 1 },
|
|
|
- { text: "503", value: 2 }
|
|
|
- ]
|
|
|
+ remainingPower: null,
|
|
|
+ state:null,
|
|
|
+ selectedAreaId: null,
|
|
|
+ selectedBuildingId: null,
|
|
|
+ selectedRoomId: null,
|
|
|
+ areaList: [],
|
|
|
+ buildingList: [],
|
|
|
+ roomList: []
|
|
|
};
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ stateText (){
|
|
|
+ if(this.state==null){
|
|
|
+ return "未知";
|
|
|
+ }
|
|
|
+ else if(this.state==1){
|
|
|
+ return "断电";
|
|
|
+ }
|
|
|
+ else if(this.state==0){
|
|
|
+ return "通电";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted (){
|
|
|
+ var self = this
|
|
|
+
|
|
|
+ remoteApi.queryRoomList(1,null).then((resp)=>{
|
|
|
+ console.log(resp);
|
|
|
+
|
|
|
+ if(resp.result){
|
|
|
+
|
|
|
+ self.areaList = resp.data.map((e)=>{
|
|
|
+ return {
|
|
|
+ value : e.id,
|
|
|
+ text : e.name
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ areaChange (value) {
|
|
|
+ var self = this
|
|
|
+
|
|
|
+ remoteApi.queryRoomList(2,value).then((resp)=>{
|
|
|
+ console.log(resp);
|
|
|
+
|
|
|
+ if(resp.result){
|
|
|
+ self.buildingList = resp.data.map((e)=>{
|
|
|
+ return {
|
|
|
+ value : e.id,
|
|
|
+ text : e.name
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ queryPower (roomId) {
|
|
|
+ var self = this
|
|
|
+
|
|
|
+ self.$toast.loading({
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ loadingType: 'spinner',
|
|
|
+ duration: 10000
|
|
|
+ });
|
|
|
+
|
|
|
+ remoteApi.queryPower(roomId).then((resp)=>{
|
|
|
+ console.log(resp);
|
|
|
+
|
|
|
+ self.$toast.clear();
|
|
|
+
|
|
|
+ if(resp.result){
|
|
|
+ self.$toast.success('查询成功!')
|
|
|
+
|
|
|
+ self.remainingPower = resp.data.remain
|
|
|
+ self.state = resp.data.state
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ self.$toast.fail(resp.message)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ buildingChange (value) {
|
|
|
+ var self = this
|
|
|
+
|
|
|
+ remoteApi.queryRoomList(3,value).then((resp)=>{
|
|
|
+ console.log(resp);
|
|
|
+
|
|
|
+ if(resp.result){
|
|
|
+ self.roomList = resp.data.map((e)=>{
|
|
|
+ return {
|
|
|
+ value : e.id,
|
|
|
+ text : e.name
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ roomChange (roomId) {
|
|
|
+ this.queryPower(roomId);
|
|
|
+ },
|
|
|
+ recharge (){
|
|
|
+ if(this.selectedRoomId == null) {
|
|
|
+ this.$toast.fail("请先选择房间!");
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$router.push({
|
|
|
+ path : '/Pay',
|
|
|
+ query: {
|
|
|
+ areaId : this.selectedAreaId,
|
|
|
+ buildingId: this.selectedBuildingId,
|
|
|
+ roomId : this.selectedRoomId
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style scoped>
|
|
|
+.power{
|
|
|
+ font-size:150%;
|
|
|
+}
|
|
|
</style>
|
