提交: 设备详情 添加 设备关联场景列表

src/api/iot/project_new.js

@@ -241,3 +241,12 @@ export function projectSelectDeviceList(query) {
     params: query
   });
 }
+
+// 查询 设备关联场景 列表
+export function deviceSceneList(query) {
+  return request({
+    url: "/iot/scene/listWithDev",
+    method: "get",
+    params: query
+  });
+}

src/views/iot/device/profile/details.vue

@@ -56,6 +56,15 @@
             ></device-log>
           </div>
         </el-tab-pane>
+
+        <el-tab-pane label="场景" name="scene">
+          <div class="tabs-body">
+            <e-device-scene
+              v-if="activeName === 'scene'"
+              :sourceId="infoData.deviceId"
+            />
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -68,6 +77,7 @@ import DeviceLog from "@/views/profile/DeviceDetailsView/deviceLog";
 import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
 import { iotWebSocketBaseUrl } from "@/config/env";
 import TriggerWrap from "@/views/profile/DeviceTrigger/index";
+import EDeviceScene from '@/views/profile/EDeviceScene/indexView'
 export default {
   name: "DetailsWrap",
   props: ["sourceId"],
@@ -76,7 +86,8 @@ export default {
     ChildDevice,
     DeviceLog,
     DeviceRunStartsWrap,
-    TriggerWrap
+    TriggerWrap,
+    EDeviceScene
   },
   data() {
     return {

src/views/profile/DeviceDetailsView/index.vue

@@ -98,6 +98,14 @@
             ></device-log>
           </div>
         </el-tab-pane>
+        <el-tab-pane label="场景" name="scene">
+          <div class="tabs-body">
+            <e-device-scene
+              v-if="activeName === 'scene'"
+              :sourceId="infoData.deviceId"
+            />
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -111,6 +119,7 @@ import TriggerWrap from "@/views/profile/DeviceTrigger/index";
 import DeviceSelect from "./deviceSelectNav";
 import ModelOat from "./modelOat";
 import ChildDevice from "./childDevice";
+import EDeviceScene from '@/views/profile/EDeviceScene/indexView'
 export default {
   name: "DetailsWrap",
   props: ["sourceId", "isTenant", 'isPersonal'],
@@ -122,6 +131,7 @@ export default {
     DeviceSelect,
     ModelOat,
     ChildDevice,
+    EDeviceScene
   },
   data() {
     return {

src/views/profile/EDeviceScene/indexView.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="e-device-scene">
+    <el-form
+      v-model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="场景名称" prop="sceneName">
+        <el-input
+          v-model="queryParams.sceneName"
+          placeholder="请输入场景名称"
+          clearable
+          size="small"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="tableLoading" :data="tableList">
+      <el-table-column
+        type="index"
+        label="序号"
+        align="center"
+        :index="
+          (e) => {
+            return e + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
+          }
+        "
+        width="80px"
+      ></el-table-column>
+
+      <el-table-column
+        label="场景名称"
+        align="left"
+        prop="sceneName"
+      >
+        <template slot-scope="scope">
+          <span class="lay-table-textarea" :title="scope.row.sceneName">
+            {{ scope.row.sceneName }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="场景编码"
+        align="left"
+        prop="sceneCode"
+      >
+        <template slot-scope="scope">
+          <span class="lay-table-textarea" :title="scope.row.sceneCode">
+            {{ scope.row.sceneCode }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="场景模式"
+        align="left"
+        width="120"
+        prop="relation"
+      >
+        <template slot-scope="scope">
+          <span class="lay-table-textarea" :title="scope.row.relation">
+            {{ scope.row.relation }}
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" align="center" width="150" prop="runStatus">
+        <template slot-scope="scope">
+          <span class="lay-table-textarea">
+            {{ scope.row.runStatus == "0" ? "启用" : "停止" }}
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        width="160px"
+        prop="createTime"
+      >
+        <template slot-scope="scope">
+          <span class="lay-table-textarea">
+            {{ scope.row.createTime }}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getTableList"
+    />
+  </div>
+</template>
+<script>
+import { deviceSceneList } from "@/api/iot/project_new";
+export default {
+  name: "EDeviceScene",
+  props: {
+    sourceId: {
+      type: [Number, String],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      tableLoading: false,
+      tableList: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderByColumn: "createTime",
+        isAsc: "desc",
+        sceneName: "",
+      },
+    };
+  },
+  watch: {
+    sourceId() {
+      // this.getTableList();
+    },
+  },
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    // 查询 表格 数据
+    getTableList() {
+      this.tableLoading = true;
+      this.tableList = [];
+      deviceSceneList(
+        Object.assign(this.queryParams, {
+          deviceId: this.sourceId,
+        })
+      ).then((res) => {
+        this.tableList = res.rows;
+        this.tableLoading = false;
+        console.log(res.rows, this.tableList)
+        this.total = res.total;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getTableList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.sceneName = '';
+      this.handleQuery();
+    },
+  },
+};
+</script>
+<style lang="scss" >
+.e-device-scene {
+  width: 100%; 
+  height: 100%;
+  .pagination-container {
+    height: 35px;
+  }
+}
+</style>