远程管控

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store/index'
 import VConsole from 'vconsole';
-import { vant } from './utils/vant.config';
+import Vant from 'vant';
 import 'vant/es/toast/style';//无法自动按需引入这两个的样式，需要手动引入
 import 'vant/es/notify/style';
 import 'vant/es/dialog/style';
@@ -13,5 +13,4 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 const app = createApp(App)
-vant(app)
-app.use(store).use(router).mount('#app')
+app.use(Vant).use(store).use(router).mount('#app')

src/utils/api.js

@@ -4,5 +4,11 @@ export default {
     loginByPwd: (params) => service.post("/app/login", params),
     getUserInfo: (params) => service.get("/app/user/userInfo",{ params: params }),
     //首页信息
-    homedata:(params) => service.get("/app/home/homedata", params)
+    homedata:(params) => service.get("/app/home/homedata", params),
+    //空调设备控制分页
+    airconditioner: (params) => service.get("/app/airconditioner/page",{ params: params }),
+    //电表控制分页
+    getElec: (params) => service.get("/app/relay/control/page",{ params: params }),
+    //一键开闸关闸
+    elecControl: (params) => service.post("/app/relay/control/command",params),
 }

src/views/home.vue

@@ -350,10 +350,12 @@ export default {
 <style lang="scss" scoped>
 .page_info {
   position: relative;
-  height: calc(
-    100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 60px
-  );
-  .info_bg {
+  height: calc( 100vh - 40px);
+  overflow: auto;
+  // height: calc(
+  //   100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 60px
+  // );
+  .info_bg{
     width: 100%;
     height: 102px;
     background: #5c8fff;

src/views/remoteControl.vue

@@ -35,13 +35,27 @@
       <van-dropdown-menu active-color="#1989fa">
         <van-dropdown-item
           v-model="deviceType"
-          @change="handelChange('deviceType', deviceType)"
+          @change="
+            handelChange(
+              'deviceType',
+              'deviceTypeTitle',
+              'deviceTypeList',
+              deviceType
+            )
+          "
           :title="deviceTypeTitle"
           :options="deviceTypeList"
         />
         <van-dropdown-item
           v-model="deviceStatus"
-          @change="handelChange('deviceStatus', deviceStatus)"
+          @change="
+            handelChange(
+              'deviceStatus',
+              'deviceStatusTitle',
+              'deviceStatusList',
+              deviceStatus
+            )
+          "
           :title="deviceStatusTitle"
           :options="deviceStatusList"
         />
@@ -68,30 +82,64 @@
             @load="onLoad"
           >
             <div v-for="item in list" :key="item.id" class="list_item">
-              <div
-                class="reduce_type"
-                :style="{
-                  'background-color': `${
-                    deviceStatus_filter(item.deviceStatus)['color']
-                  }`,
-                }"
-              >
-                <span>{{
-                  `${deviceStatus_filter(item.deviceStatus)["label"]}`
-                }}</span>
-              </div>
-              <span class="header">{{ item.name }}</span>
-              <span 
-                >空间信息：{{ item.position }}</span
-              >
-              <span>设备编号：{{ item.deviceNo }}</span>
-              <span>实时读数：{{ item.realReaders }}</span>
-              <span>所属租户：{{ item.rentNum }}</span>
-              <div class="list_btn">
-                <van-button plain type="primary" size="small">{{
-                  `${deviceStatus_filter(item.deviceStatus)["btn"]}`
-                }}</van-button>
-              </div>
+              <template v-if="deviceType == 'AirConditioner'">
+                <div
+                  class="reduce_type"
+                  :style="{
+                    'background-color': `${
+                      deviceStatus_filter(item.attributeList[2].value)['color']
+                    }`,
+                  }"
+                >
+                  <span>{{
+                    `${
+                      deviceStatus_filter(item.attributeList[2].value)["label"]
+                    }`
+                  }}</span>
+                </div>
+                <span class="header">{{ item.airConditionerName }}</span>
+                <span
+                  >空间信息：{{ item.installSite }}{{ item.roomNumbers }}</span
+                >
+                <span>设备编号：{{ item.airConditionerNo }}</span>
+                <span v-if="item.attributeList"
+                  >实时读数：{{ item.attributeList[5].value }}</span
+                >
+                <!-- <span>所属租户：{{ item.rentNum }}</span> -->
+                <div class="list_btn" v-if="item.attributeList">
+                  <van-button plain type="primary" size="small">{{
+                    item.attributeList[3].value == 1 ? "开启" : "关闭"
+                  }}</van-button>
+                </div>
+              </template>
+              <template v-if="deviceType == 'Ammeter'">
+                <div
+                  class="reduce_type"
+                  :style="{
+                    'background-color': `${
+                      deviceStatus_filter(item.status)['color']
+                    }`,
+                  }"
+                >
+                  <span>{{
+                    `${deviceStatus_filter(item.status)["label"]}`
+                  }}</span>
+                </div>
+                <span class="header">{{ item.controlName }}</span>
+                <span>空间信息：{{ item.installSite }}</span>
+                <!-- <span>设备编号：{{ item.deviceId }}</span>
+                <span>实时读数：{{ item.status }}</span> -->
+                <!-- <span>所属租户：{{ item.rentNum }}</span> -->
+                <div class="list_btn">
+                  <van-button
+                    plain
+                    type="primary"
+                    size="small"
+                    @click="elecControl(item.id,item.status)"
+                    >{{ item.status == 1 ? "关闭" : "开启" }}</van-button
+                  >
+                </div>
+              </template>
             </div>
           </van-list>
         </van-pull-refresh>
@@ -100,8 +148,10 @@
   </div>
 </template>
 <script>
+import api from "../utils/api";
 import { isEmpty } from "@/utils/index.js";
 import VCountUp from "./CountUp";
+import { Notify, Dialog, showConfirmDialog } from "vant";
 export default {
   components: {
     "v-count-up": VCountUp,
@@ -110,37 +160,91 @@ export default {
     return {
       loading: false,
       name: "电商园四期-B座",
-      deviceType: "",
+      deviceType: "AirConditioner",
       deviceStatus: "",
-      deviceTypeTitle: "设备类型",
+      deviceTypeTitle: "空调",
       deviceStatusTitle: "设备状态",
       deviceTypeList: [
-        { text: "空调", value: 1 },
-        { text: "水表", value: 2 },
-        { text: "电表", value: 3 },
+        { text: "空调", value: "AirConditioner" },
+        { text: "水表", value: "WaterMeter" },
+        { text: "电表", value: "Ammeter" },
       ],
       deviceStatusList: [
         { text: "连接中", value: 1 },
-        { text: "断连中", value: 2 },
+        { text: "断连中", value: 0 },
       ],
       total: 3,
-      list: [
-        {
-          name: "B座13楼女卫生间电表",
-          deviceStatus:1,
-          position: "电商园四期-B座-13层",
-          deviceNo: "A32445",
-          realReaders: "281kwh",
-          rentNum: 50,
-        },
-      ],
+      list: [],
       loading: false,
       refreshing: false,
       finished: false,
     };
   },
-
+  created() {
+    this.getAircond();
+  },
   methods: {
+    elecControl(id,state) {
+      console.log(id,state)
+      Dialog.confirm({
+        title: "标题",
+        message:
+          "确定执行该操作？",
+      })
+        .then(() => {
+          api.elecControl({keyword:'setRelay',deviceId:id,param:state?'1':'0'}).then(res=>{
+            console.log(res)
+            if(res.code==0){
+              this.getElec();
+            }
+          })
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    getElec() {
+      api
+        .getElec({
+          page: 1,
+          limit: 10,
+          status:this.deviceStatus,
+          controlCategory: "CommonLighting",
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.total = res.data.total;
+            this.list = res.data.list;
+            // for(let i=0;i<res.data.list.length;i++){
+            //   if(res.data.list[i].attributeList&&res.data.list[i].attributeList.length!=0){
+            //     this.list.push(res.data.list[i])
+            //   }
+            // }
+          }
+        });
+    },
+    getAircond() {
+      api
+        .airconditioner({
+          page: 1,
+          limit: 10,
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.total = res.data.total;
+            this.list = [];
+            for (let i = 0; i < res.data.list.length; i++) {
+              if (
+                res.data.list[i].attributeList &&
+                res.data.list[i].attributeList.length != 0
+              ) {
+                this.list.push(res.data.list[i]);
+              }
+            }
+          }
+          console.log(this.list);
+        });
+    },
     deviceStatus_filter(val) {
       if (isEmpty(val)) {
         return {};
@@ -152,7 +256,7 @@ export default {
           btn: "断闸",
         };
       }
-      if (val == 2) {
+      if (val == 0) {
         return {
           label: "断连中",
           color: "#FA5555",
@@ -188,20 +292,14 @@ export default {
       this.onLoad();
     },
     // change事件可以拿到的是value
-    handelChange(type, val) {
-      console.log(type, val);
-      if (type == "lackType") {
-        // 这里打印出来的值就是我们想要的text
-        this.lackTypeTitle = this.lackTypeList.filter(
-          (item) => item.value === val
-        )[0].text;
-      }
-      if (type == "lackStatus") {
-        // 这里打印出来的值就是我们想要的text
-        this.lackStatusTitle = this.lackStatusList.filter(
-          (item) => item.value === val
-        )[0].text;
-      }
+    handelChange(type, lackTypeTitle, lackTypeList, val) {
+      this[type] = val;
+      if (this.deviceType == "Ammeter") this.getElec();
+      if (this.deviceType == "AirConditioner") this.getAircond();
+      // 显示中文名字
+      this[lackTypeTitle] = this[lackTypeList].filter(
+        (item) => item.value === val
+      )[0].text;
     },
     onClickLeft() {},
   },