智能居家接口对接，阈值回显有问题

4 months ago · 95f3d9dabe
1 changed files with 109 additions and 22 deletions
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -5,32 +5,38 @@
      <div class="div-ul">
        <div class="div-li">
          <div>
-            <span>温度：</span>22.2℃
+            <span>温度：</span>{{ deviceInfo.temperature || '-' }}℃
          </div>
-          <div> <span>湿度：</span>50%
+          <div> <span>湿度：</span>{{ deviceInfo.humidity || '-' }}%
          </div>
        </div>
        <!--   ON：开启 OFF：关闭 -->
        <div class="div-li">
          <div>
-            <span>CO：</span>5PPM
+            <span>CO：</span>{{ deviceInfo.co || '-' }}PPM
          </div>
          <div>
            <span>预警：</span>
-            <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949">
+            <el-switch active-value="1" inactive-value="0" v-model="deviceInfo.warning" active-color="#13ce66"
+              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div>
-      <div class="div-tips"><span>阈值设定：</span>30 <i class="el-icon-edit"
+      <div class="div-tips"><span>阈值设定：</span>{{ getThreshold() }} <i class="el-icon-edit"
          style="color: rgb(64, 158, 255);margin-left: 4px;cursor: pointer;" @click="handleSettings"></i></div>
    </div>
    <!-- 添加或修改公告对话框 -->
    <el-dialog title="阈值设定" :visible.sync="open" width="780px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-
-        <el-form-item label="阈值" prop="noticeTitle">
-          <el-input v-model="form.noticeTitle" placeholder="请输入阈值" />
+        <el-form-item label="温度" prop="temperature">
+          <el-input v-model="form.temperature" placeholder="请输入温度" />
+        </el-form-item>
+        <el-form-item label="湿度" prop="humidity">
+          <el-input v-model="form.humidity" placeholder="请输入湿度" />
+        </el-form-item>
+        <el-form-item label="CO" prop="co">
+          <el-input v-model="form.co" placeholder="请输入CO" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
@ -42,45 +48,125 @@
 </template>

 <script>
-import {  updateNotice } from "@/api/system/notice";
+import { queryProjectInfoByKey, deviceList, attributes, sendAttribute, sendCommand } from "@/api/school";
 export default {
  name: "Index",
  data() {
    return {
+      deviceId: "", // 设备id 
+      deviceInfo: {
+        temperature: 0, // 温度
+        threshold: 0, // 阈值
+      },
      open: false,
      value2: false,
+      loading: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
-        noticeTitle: [
-          { required: true, message: "公告标题不能为空", trigger: "blur" }
+        temperature: [
+          { required: true, message: "温度不能为空", trigger: "blur" }
+        ],
+        humidity: [
+          { required: true, message: "湿度不能为空", trigger: "blur" }
+        ],
+        co: [
+          { required: true, message: "CO不能为空", trigger: "blur" }
        ],
-        noticeType: [
-          { required: true, message: "公告类型不能为空", trigger: "change" }
-        ]
      },
      // 版本号
      version: "3.8.9",
    };
  },
+  created() {
+    this.getqueryProjectInfoByKey() // 根据项目key查找项目id
+  },
  methods: {
    // 阈值设定弹窗
    handleSettings() {
      this.open = true;
      this.form = {
-        noticeTitle: "30",
+        temperature: this.deviceInfo.temperature1, // 温度
+        humidity: this.deviceInfo.humidity1, // 湿度
+        co: this.deviceInfo.co1, // CO
      };
      // this.$message.success('');
    },
-    /** 提交按钮 */
-    submitForm: function() {
+
+    // 根据项目key查找项目id
+    getqueryProjectInfoByKey() {
+      this.loading = true;
+      queryProjectInfoByKey({
+        projectKey: "qKStHKKt"
+      }).then(res => {
+        this.getDeviceList(res.data.id) // 根据项目id查找设备列表
+      });
+    },
+    // 根据项目id查找设备列表
+    getDeviceList(_id) {
+      deviceList({
+        projectId: _id
+      }).then(res => {
+        const w2Device = res.rows.find(device => device.deviceName === "S1");
+        this.deviceId = w2Device.id;
+        this.getAttributes(this.deviceId); // 根据设备id查找设备信息
+      })
+    },
+
+    // 根据设备id查找设备信息
+    getAttributes(_id) {
+      attributes({
+        deviceId: _id,
+      }).then(res => {
+        this.loading = false;
+        // 获取温度和阈值信息，并赋值给deviceInfo
+        let deviceAttributesList = res.data.deviceAttributesList
+        // 温度、温度阈值
+        let temperature = deviceAttributesList.find(row => row.id === 447247444691968)?.attributeValue;
+        let temperature1 = deviceAttributesList.find(row => row.id === 447247458859777)?.attributeValue;
+        // 湿度、湿度阈值
+        let humidity = deviceAttributesList.find(row => row.id === 447247449387520)?.attributeValue;
+        let humidity1 = deviceAttributesList.find(row => row.id === 447247458859778)?.attributeValue;
+        // CO、CO阈值
+        let co = deviceAttributesList.find(row => row.id === 447247453780224)?.attributeValue;
+        let co1 = deviceAttributesList.find(row => row.id === 447247458859779)?.attributeValue;
+
+        // 预警
+        let warning = deviceAttributesList.find(row => row.id === 447247458859776)?.attributeValue;
+
+        this.deviceInfo = {
+          temperature: temperature, // 温度
+          temperature1: temperature1, // 温度
+          humidity: humidity, // 湿度
+          humidity1: humidity1, // 湿度
+          co: co, // CO
+          co1: co1, // CO
+          warning: warning || 0, // 预警
+        }
+
+      });
+    },
+    getThreshold() {
+      return `温度：${this.deviceInfo.temperature1 || '-'}℃ 湿度：${this.deviceInfo.humidity1 || '-'}% CO：${this.deviceInfo.co1 || '-'}PPM`;
+    },
+    /** 下发属性 */
+    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
-          updateNotice(this.form).then(response => {
+          let attributeParams = {
+            temperature: this.form.temperature, // 温度
+            humidity: this.form.humidity, // 湿度
+            co: this.form.co, // CO
+          }
+          sendAttribute({
+            "attributeParams": JSON.stringify(attributeParams), // 阈值JSON字符串
+            "deviceId": this.deviceId // 设备id
+          }).then(response => {
+            this.getAttributes(this.deviceId); // 根据设备id查找设备信息
            this.$modal.msgSuccess("操作成功");
            this.open = false;
-              this.getList();
+
          });
        }
      });
@ -91,6 +177,7 @@ export default {

 <style scoped lang="scss">
 .div-box {
+  transform: scale(1.4);
  width: 500px;
  box-sizing: border-box;
  padding: 16px;