运行监测：实时统计页面+统计明细表页面开发对接

src/api/device/index.ts

@@ -79,9 +79,11 @@ export default {
   tree: {
     getList: (params: object) => get('/product/device_tree/list', params),
     add: (params: object) => post('/product/device_tree/info/add', params),
-    edit: (params: object) => post('/product/device_tree/info/edit', params),
+    edit: (params: object) => put('/product/device_tree/info/edit', params),
     detail: (params: object) => get('/product/device_tree/info/detail', params),
     delete: (params: object) => del('/product/device_tree/info/del', params),
+    statistic: (params: object) => get('/envirotronics/device_tree/statistic', params),
+    record: (params: object) => get('/envirotronics/device_tree/record', params),
   },
   device: {
     getList: (params: object) => get('/product/device/bind_list', params),

src/views/heating/monitor/realTimeStatistics/index.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="system-dic-container" style="background: #fff">
+    <LrLayout width="260px">
+      <template #left>
+        <div class="zl-tree-search">
+          <div class="flex zl-tree-search__filter">
+            <el-input v-model.trim="searchVal" placeholder="搜索">
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+                <!-- <i class="iconfont icon-search" /> -->
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="zl-tree-search-scroll">
+          <el-scrollbar ref="zlTreeSearchScroll" height="100%" v-loading="treeLoading">
+            <el-tree
+              ref="zlTreeSearchRef"
+              v-if="!treeLoading"
+              :data="treeData"
+              :props="{
+                children: 'children',
+                label: 'name'
+              }"
+              :filter-node-method="filterNode"
+              :default-expand-all="true"
+              :node-key="'id'"
+              highlight-current
+              @node-click="nodeClick">
+              <template #default="{ node, data }">
+                <div class="custom-tree-node">
+                  <span class="tree-label">
+                    <i class="iconfont icon-wenjianjia icon-wjj mr8" />{{ node.label }}
+                  </span>
+                  <!-- <span class="tree-options" >
+                    <slot name="operate" :data="data">
+                      <el-dropdown @command="command => operateCmd(command, data)">
+                        <el-icon>
+                          <More></More>
+                        </el-icon>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item command="add">
+                              <el-icon>
+                                <Plus></Plus>
+                              </el-icon>
+                            </el-dropdown-item>
+                            <el-dropdown-item command="edit">
+                              <el-icon>
+                                <Edit></Edit>
+                              </el-icon>
+                            </el-dropdown-item>
+                            <el-dropdown-item command="delete">
+                              <el-icon>
+                                <Delete></Delete>
+                              </el-icon>
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </slot>
+                  </span> -->
+                </div>
+              </template>
+            </el-tree>
+          </el-scrollbar>
+        </div>
+      </template>
+      <template #right>
+        <!-- max-height="30vh" -->
+        <el-table :data="tableData.data" v-loading="tableData.loading" style="width: 100%; padding: 12px" >
+          <el-table-column :label="item.name + `${item.unit ? `(${item.unit})` : ''}`" :prop="item.key" v-for="(item, index) in tableData
+          .columns" :key="index" :show-overflow-tooltip="true" />
+        </el-table>
+
+        <div  style="text-align: center;padding: 28px;" v-if="(tableData.data.length)">暂无数据</div>
+      </template>
+    </LrLayout>
+
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import api from '/@/api/device';
+import LrLayout from '/@/components/lrLayout/index.vue'
+import { Fold, Expand, More, Plus, Edit, Delete, Search } from '@element-plus/icons-vue'
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  id: number;
+  name: string;
+  deviceType: string;
+  status: number;
+  desc: string;
+  createBy: string;
+}
+interface TableDataState {
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+      columns: Array<any>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      name: string;
+      status: string;
+    };
+  };
+  treeData: any[]
+  deviceList: any[]
+  treeLoading: boolean
+  tabName: string
+  searchVal: string
+  treeDetail: any
+  unitData: any
+  ruleForm: any
+}
+
+export default defineComponent({
+  name: 'realTimeStatistics',
+  components: { LrLayout, Fold, Expand, More, Plus, Edit, Delete, Search },
+  setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const addOrUpdateRef = ref();
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        columns: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          status: '',
+          name: ''
+        },
+      },
+      treeData: [],
+      treeLoading: false,
+      tabName: '1',
+      searchVal: '',
+      treeDetail: {},
+      deviceList: [],
+			unitData: [
+				{ label: '秒', value: 1 },
+				{ label: '分', value: 2 },
+				{ label: '时', value: 3 },
+				{ label: '天', value: 4 },
+			],
+      ruleForm: {
+        duration: '',
+        timeUnit: '',
+        template: 'default',
+        category: 'default'
+      }
+    });
+    
+    // const { tree_types, tree_category } = proxy.useDict('tree_types', 'tree_category');
+    // 初始化表格数据
+    const initTableData = () => {
+      getTreeList();
+
+      nodeClick({ infoId:  1 })
+    };
+    const getTreeList = () => {
+      state.treeLoading = true;
+      api.tree.getList({}).then((res: any) => {
+        state.treeData = res.list;
+      }).finally(() => (state.treeLoading = false));
+    }
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    const nodeClick = (data: any) => {
+      api.tree.statistic({ infoId: data.infoId })
+        .then((res: any) => {
+          state.tableData.columns = []
+          state.tableData.data = []
+          if (res.name) {
+            let header = res.header || []
+            let list = res.list || []
+            state.tableData.columns = header
+            state.tableData.data = list.map((item: any) => {
+              return {
+                time: item.time,
+                ...item.data
+              }
+            })
+            state.tableData.columns.unshift({ name: '时间', key: 'time' })
+          }
+          // state.treeDetail = res.data || {}
+        })
+    }
+    const onSaveTime = () => {
+      if (!state.treeDetail.id) {
+        ElMessage.warning('请选择节点树')
+        return
+      }
+      //修改
+      api.tree.edit({
+        ...state.treeDetail,
+        template: state.ruleForm.template,
+        category: state.ruleForm.category,
+        deviceKey: state.ruleForm.deviceKey,
+      }).then(() => {
+        ElMessage.success('修改成功');
+      });
+    }
+
+    const operateCmd = (type: string, data: any) => {
+      switch(type) {
+        case 'add':
+          addOrUpdateRef.value.openDialog(type, data)
+          break
+        case 'edit':
+          addOrUpdateRef.value.openDialog(type, data)
+          break
+        case 'delete':
+          ElMessageBox.confirm('是否删除该设备树', '提示', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+            .then(() => {
+              api.tree.delete({ id: data.infoId }).then(() => {
+                ElMessage.success('删除成功');
+                getTreeList();
+              });
+            })
+            .catch(() => { });
+          break
+      }
+    }
+    return {
+      addOrUpdateRef,
+      queryRef,
+      resetQuery,
+      handleSelectionChange,
+      operateCmd,
+      getTreeList,
+      nodeClick,
+      ...toRefs(state),
+      onSaveTime
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.zl-tree-search {
+  margin: 0 12px 0 0;
+  background-color: #fff;
+  border-radius: 4px;
+  &__filter {
+    padding: 4px 10px;
+    border-bottom: 1px solid #EAEAEA;
+  }
+}
+.zl-tree-search__filter :deep .el-input__wrapper {
+  box-shadow: none;
+}
+
+.custom-tree-node {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  &:hover {
+    .tree-options {
+      display: block;
+    }
+  }
+}
+:deep(.column-right) {
+  padding: 0;
+  background-color: transparent;
+}
+.icon-wjj {
+  font-size: 12px;
+  color: #C4C6CF;
+}
+
+table {
+  width: 100%;
+	border-collapse: collapse;
+	text-indent: initial;
+	border-spacing: 2px;
+}
+tbody {
+	box-sizing: border-box;
+	display: table-row-group;
+	vertical-align: middle;
+	border-color: inherit;
+}
+
+tr {
+	display: table-row;
+	vertical-align: inherit;
+	border-color: inherit;
+}
+.ant-descriptions-view {
+	width: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+}
+.ant-descriptions-view {
+	border: 1px solid #e8e8e8;
+}
+.ant-descriptions-view table {
+	width: 100%;
+	table-layout: fixed;
+}
+.ant-descriptions-view > table {
+	table-layout: auto;
+}
+.ant-descriptions-row {
+	border-bottom: 1px solid #e8e8e8;
+}
+.ant-descriptions-item-label {
+	color: rgba(0, 0, 0, 0.85);
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 1.5;
+}
+.ant-descriptions-item-label {
+	padding: 16px;
+	border-right: 1px solid #e8e8e8;
+}
+.ant-descriptions-item-label {
+	background-color: #fafafa;
+}
+.ant-descriptions-item-content {
+	padding: 16px;
+	border-right: 1px solid #e8e8e8;
+	display: table-cell;
+	color: rgba(0, 0, 0, 0.65);
+	font-size: 14px;
+	line-height: 1.5;
+}
+</style>

src/views/heating/monitor/statisticsDetail/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="区域" prop="area" style="width: 200px;">
+            <el-select v-model="tableData.param.area" placeholder="区域" clearable size="default" style="width: 200px">
+            </el-select>
+          </el-form-item>
+          <el-form-item label="管道序号" prop="name" style="width: 200px;">
+            <el-select v-model="tableData.param.name" placeholder="管道序号" clearable size="default" style="width: 200px">
+            </el-select>
+          </el-form-item>
+          <el-form-item label="输送单位" prop="company" style="width: 200px;">
+            <el-select v-model="tableData.param.company" placeholder="输送单位" clearable size="default" style="width: 200px">
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="dateRange">
+            <el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="类型" prop="types" style="width: 200px;">
+            <el-select v-model="tableData.param.types" filterable clearable placeholder="请选择类型" style="width: 200px">
+              <el-option v-for="dict in tree_types_2" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="typeList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
+        <el-table-column label="管道" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="区域名称" prop="area" :show-overflow-tooltip="true"/>
+        <el-table-column label="用量（m³）" prop="value" :show-overflow-tooltip="true" />
+        <el-table-column label="输送单位" prop="company" :show-overflow-tooltip="true" />
+        <el-table-column label="类型" prop="types" :show-overflow-tooltip="true"/>
+        <el-table-column label="输送时间" prop="datetime" align="center" width="180" ></el-table-column>
+      </el-table>
+      <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import api from '/@/api/device';
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+  id: number;
+  name: string;
+  key: string;
+  status: number;
+  desc: string;
+  createBy: string;
+}
+interface TableDataState {
+  ids: number[];
+  tableData: {
+    data: Array<TableDataRow>;
+    total: number;
+    loading: boolean;
+    param: {
+      pageNum: number;
+      pageSize: number;
+      name: string;
+      area: string;
+      company: string;
+      types: string;
+      dateRange: string[];
+    };
+  };
+}
+
+export default defineComponent({
+  name: 'deviceInstance',
+  setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const queryRef = ref();
+    const state = reactive<TableDataState>({
+      ids: [],
+      tableData: {
+        data: [],
+        total: 0,
+        loading: false,
+        param: {
+          pageNum: 1,
+          pageSize: 10,
+          name: '',
+          area: '',
+          company: '',
+          types: '',
+          dateRange: [],
+        },
+      },
+    });
+    const { tree_types_2 } = proxy.useDict('tree_types_2');
+    // 初始化表格数据
+    const initTableData = () => {
+      typeList();
+    };
+    const typeList = () => {
+      state.tableData.loading = true;
+      api.tree.record(state.tableData.param).then((res: any) => {
+        console.log(res);
+        state.tableData.data = res.list;
+        state.tableData.total = res.total;
+      }).finally(() => (state.tableData.loading = false));
+    };
+
+    // 页面加载时
+    onMounted(() => {
+      initTableData();
+    });
+    /** 重置按钮操作 */
+    const resetQuery = (formEl: FormInstance | undefined) => {
+      if (!formEl) return;
+      formEl.resetFields();
+      typeList();
+    };
+    // 多选框选中数据
+    const handleSelectionChange = (selection: TableDataRow[]) => {
+      state.ids = selection.map((item) => item.id);
+    };
+    const onActionStatus = (item: TableDataRow[]) => {
+      if (item.status == 0) {
+        api.instance.devdeploy({ id: item.id }).then((res: any) => {
+          typeList();
+          ElMessage.success(res.message || '操作成功');
+        });
+      } else {
+        api.instance.devundeploy({ id: item.id }).then((res: any) => {
+          typeList();
+          ElMessage.success(res.message || '操作成功');
+        });
+      }
+    }
+    return {
+      queryRef,
+      onActionStatus,
+      typeList,
+      resetQuery,
+      handleSelectionChange,
+      tree_types_2,
+      ...toRefs(state),
+    };
+  },
+});
+</script>

src/views/iot/device-tree/tree/index.vue

@@ -1,161 +1,159 @@
 <template>
-  <div class="system-dic-container">
-    <el-card shadow="hover">
-      <LrLayout width="260px">
-        <template #left>
-          <div class="zl-tree-search">
-            <div class="flex zl-tree-search__filter">
-              <el-input v-model.trim="searchVal" placeholder="搜索">
-                <template #prefix>
-                  <el-icon><Search /></el-icon>
-                  <!-- <i class="iconfont icon-search" /> -->
-                </template>
-              </el-input>
-            </div>
+  <div class="system-dic-container" style="background: #fff">
+    <LrLayout width="260px">
+      <template #left>
+        <div class="zl-tree-search">
+          <div class="flex zl-tree-search__filter">
+            <el-input v-model.trim="searchVal" placeholder="搜索">
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+                <!-- <i class="iconfont icon-search" /> -->
+              </template>
+            </el-input>
           </div>
-          <div class="zl-tree-search-scroll">
-            <el-scrollbar ref="zlTreeSearchScroll" height="100%" v-loading="treeLoading">
-              <el-tree
-                ref="zlTreeSearchRef"
-                v-if="!treeLoading"
-                :data="treeData"
-                :props="{
-                  children: 'children',
-                  label: 'name'
-                }"
-                :filter-node-method="filterNode"
-                :default-expand-all="true"
-                :node-key="'id'"
-                highlight-current
-                @node-click="nodeClick">
-                <template #default="{ node, data }">
-                  <div class="custom-tree-node">
-                    <span class="tree-label">
-                      <i class="iconfont icon-wenjianjia icon-wjj mr8" />{{ node.label }}
-                    </span>
-                    <span class="tree-options" >
-                      <slot name="operate" :data="data">
-                        <el-dropdown @command="command => operateCmd(command, data)">
-                          <el-icon>
-                            <More></More>
-                          </el-icon>
-                          <template #dropdown>
-                            <el-dropdown-menu>
-                              <el-dropdown-item command="add">
-                                <el-icon>
-                                  <Plus></Plus>
-                                </el-icon>
-                              </el-dropdown-item>
-                              <el-dropdown-item command="edit">
-                                <el-icon>
-                                  <Edit></Edit>
-                                </el-icon>
-                              </el-dropdown-item>
-                              <el-dropdown-item command="delete">
-                                <el-icon>
-                                  <Delete></Delete>
-                                </el-icon>
-                              </el-dropdown-item>
-                            </el-dropdown-menu>
-                          </template>
-                        </el-dropdown>
-                      </slot>
-                    </span>
-                  </div>
-                </template>
-              </el-tree>
-            </el-scrollbar>
-          </div>
-        </template>
-        <template #right>
-          <!--  @tab-click="handleClick" -->
-          <el-tabs v-model="tabName">
-            <el-tab-pane label="设备树信息" name="1">
-              <table>
-                <tbody>
-                  <tr class="ant-descriptions-row">
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">名称</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.name }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">地址</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.address }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">经度</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.lng }}</td>
-                  </tr>
-                  <tr class="ant-descriptions-row">
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">纬度</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.lat }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">联系人</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.contact }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">联系电话</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.phone }}</td>
-                  </tr> 
-                  <tr class="ant-descriptions-row">
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">服务周期：开始日期</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.startDate }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">服务周期：截止日期</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.endDate }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">图片</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.image }}</td>
-                  </tr>
-                  <tr class="ant-descriptions-row">
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">设备标识</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.deviceKey }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">设备所属区域</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.area }}</td>
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">所属公司</th>
-                    <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.company }}</td>
-                  </tr>
-                  <tr class="ant-descriptions-row">
-                    <th class="ant-descriptions-item-label ant-descriptions-item-colon">类型</th>
-                    <td class="ant-descriptions-item-content" colspan="5">{{ treeDetail.types }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </el-tab-pane>
-            <el-tab-pane label="时间周期" name="2">
-			        <el-form :model="ruleForm" ref="formRef" size="default" label-width="80px">
-                <!-- <el-form-item label="时间窗口" prop="duration">
-                  <div class="flex">
-                    <el-input v-model="ruleForm.duration" placeholder="请输入" class="w-35" />
-                    <el-select v-model="ruleForm.timeUnit" placeholder="请选择单位">
-                      <el-option v-for="item in unitData" :key="item.value" :label="item.label" :value="item.value" />
-                    </el-select>
-                  </div>
-                </el-form-item> -->
-                <el-form-item label="类型" prop="template">
-                  <el-select v-model="ruleForm.template" filterable clearable placeholder="请选择类型" class="w-35">
-                    <el-option v-for="dict in tree_types" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="分类" prop="category">
-                  <el-select v-model="ruleForm.category" filterable clearable placeholder="请选择分类" class="w-35">
-                    <el-option v-for="dict in tree_category" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
+        </div>
+        <div class="zl-tree-search-scroll">
+          <el-scrollbar ref="zlTreeSearchScroll" height="100%" v-loading="treeLoading">
+            <el-tree
+              ref="zlTreeSearchRef"
+              v-if="!treeLoading"
+              :data="treeData"
+              :props="{
+                children: 'children',
+                label: 'name'
+              }"
+              :filter-node-method="filterNode"
+              :default-expand-all="true"
+              :node-key="'id'"
+              highlight-current
+              @node-click="nodeClick">
+              <template #default="{ node, data }">
+                <div class="custom-tree-node">
+                  <span class="tree-label">
+                    <i class="iconfont icon-wenjianjia icon-wjj mr8" />{{ node.label }}
+                  </span>
+                  <span class="tree-options" >
+                    <slot name="operate" :data="data">
+                      <el-dropdown @command="command => operateCmd(command, data)">
+                        <el-icon>
+                          <More></More>
+                        </el-icon>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item command="add">
+                              <el-icon>
+                                <Plus></Plus>
+                              </el-icon>
+                            </el-dropdown-item>
+                            <el-dropdown-item command="edit">
+                              <el-icon>
+                                <Edit></Edit>
+                              </el-icon>
+                            </el-dropdown-item>
+                            <el-dropdown-item command="delete">
+                              <el-icon>
+                                <Delete></Delete>
+                              </el-icon>
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </slot>
+                  </span>
+                </div>
+              </template>
+            </el-tree>
+          </el-scrollbar>
+        </div>
+      </template>
+      <template #right>
+        <!--  @tab-click="handleClick" -->
+        <el-tabs v-model="tabName">
+          <el-tab-pane label="设备树信息" name="1">
+            <table>
+              <tbody>
+                <tr class="ant-descriptions-row">
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">名称</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.name }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">地址</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.address }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">经度</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.lng }}</td>
+                </tr>
+                <tr class="ant-descriptions-row">
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">纬度</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.lat }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">联系人</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.contact }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">联系电话</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.phone }}</td>
+                </tr> 
+                <tr class="ant-descriptions-row">
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">服务周期：开始日期</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.startDate }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">服务周期：截止日期</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.endDate }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">图片</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.image }}</td>
+                </tr>
+                <tr class="ant-descriptions-row">
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">设备标识</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.deviceKey }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">设备所属区域</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.area }}</td>
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">所属公司</th>
+                  <td class="ant-descriptions-item-content" colspan="1">{{ treeDetail.company }}</td>
+                </tr>
+                <tr class="ant-descriptions-row">
+                  <th class="ant-descriptions-item-label ant-descriptions-item-colon">类型</th>
+                  <td class="ant-descriptions-item-content" colspan="5">{{ treeDetail.types }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </el-tab-pane>
+          <el-tab-pane label="时间周期" name="2">
+            <el-form :model="ruleForm" ref="formRef" size="default" label-width="80px">
+              <!-- <el-form-item label="时间窗口" prop="duration">
+                <div class="flex">
+                  <el-input v-model="ruleForm.duration" placeholder="请输入" class="w-35" />
+                  <el-select v-model="ruleForm.timeUnit" placeholder="请选择单位">
+                    <el-option v-for="item in unitData" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
-                </el-form-item>
-                <el-form-item label=" " prop="category">
-                  <el-button type="primary" @click="onSaveTime">保存</el-button>
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-            <el-tab-pane label="绑定实际设备" name="3">
-              <el-form-item label="选择设备" prop="deviceKey">
-                <el-select v-model="ruleForm.deviceKey" filterable placeholder="请选择设备">
-                  <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id">
-                    <span style="float: left">{{ item.name }}</span>
-                    <!-- <span style="float: right; font-size: 13px">{{ item.key }}</span> -->
-                  </el-option>
+                </div>
+              </el-form-item> -->
+              <el-form-item label="类型" prop="template">
+                <el-select v-model="ruleForm.template" filterable clearable placeholder="请选择类型" class="w-35">
+                  <el-option v-for="dict in tree_types" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="分类" prop="category">
+                <el-select v-model="ruleForm.category" filterable clearable placeholder="请选择分类" class="w-35">
+                  <el-option v-for="dict in tree_category" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label=" " prop="category">
                 <el-button type="primary" @click="onSaveTime">保存</el-button>
               </el-form-item>
-            </el-tab-pane>
-          </el-tabs>
-        </template>
-      </LrLayout>
+            </el-form>
+          </el-tab-pane>
+          <el-tab-pane label="绑定实际设备" name="3">
+            <el-form-item label="选择设备" prop="deviceKey">
+              <el-select v-model="ruleForm.deviceKey" filterable placeholder="请选择设备">
+                <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id">
+                  <span style="float: left">{{ item.name }}</span>
+                  <!-- <span style="float: right; font-size: 13px">{{ item.key }}</span> -->
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label=" " prop="category">
+              <el-button type="primary" @click="onSaveTime">保存</el-button>
+            </el-form-item>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </LrLayout>
 
-      <AddOrUpdate ref="addOrUpdateRef" @finish="getTreeList"/>
-    </el-card>
+    <AddOrUpdate ref="addOrUpdateRef" @finish="getTreeList"/>
   </div>
 </template>