订单管理修改 订单详情修改 监控室列表和播放功能

pages/sys/workbench/monitor/TreeNode.vue

@@ -0,0 +1,89 @@
+<template>
+  <view>
+    <view v-if="node.children && node.children.length" class="tree-title" @click="toggle">
+      <text>{{ expanded ? '▼' : '▶' }} {{ node.title }}</text>
+    </view>
+
+    <view v-else class="list-card" @click="goToPlay(node)">
+      <view class="item-row">
+        <image src="/static/ic_monitor.webp" class="item-img" />
+        <view class="item-c">
+          <text>设备编号：{{ node.code }}</text>
+          <text>设备描述：{{ node.label }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view v-show="expanded" class="children-box">
+      <TreeNode v-for="child in node.children" :key="child.code || child.id" :node="child" />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "TreeNode",
+  props: {
+    node: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      expanded: false
+    };
+  },
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+    },
+    goToPlay(item) {
+      const detailItemStr = encodeURIComponent(JSON.stringify(item.data));
+      uni.navigateTo({
+        url: `/pages/sys/workbench/monitor/monitorplay?detailItem=${detailItemStr}`
+      });
+    }
+  },
+  components: {
+    TreeNode: () => import("./TreeNode.vue") // 递归组件自己导入自己
+  }
+};
+</script>
+
+<style scoped>
+.tree-title {
+  padding: 20rpx 30rpx;
+  background: #eaeaea;
+  border-radius: 8rpx;
+  margin: 10rpx 20rpx;
+  font-weight: bold;
+  user-select: none;
+}
+.children-box {
+  padding-left: 30rpx;
+}
+.list-card {
+  background: #fff;
+  border-radius: 12rpx;
+  margin: 25rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+  padding: 30rpx;
+}
+.item-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.item-c {
+  display: flex;
+  height: 80rpx;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.item-img {
+  width: 80rpx;
+  height: 80rpx;
+  margin-right: 20rpx;
+}
+</style>