From 5aadbec9ce692e7742baa1b0a7738826adc83e77 Mon Sep 17 00:00:00 2001
From: 23688nl <329261568@qq.com>
Date: Wed, 22 Dec 2021 09:44:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/alarm/tenantAlarm.js                  |   8 +-
 src/api/app.js                                |  16 +-
 src/api/iot/device.js                         |  11 +-
 src/api/iot/model.js                          |   8 +
 src/api/personal/alarm.js                     |   4 +-
 src/api/personal/device.js                    |   8 +-
 src/api/system/home.js                        |   2 +-
 src/api/system/user.js                        |   2 +-
 src/api/tenant/device.js                      |   6 +-
 src/api/tenant/project.js                     |  12 +-
 src/api/tenant/projectUser.js                 |   8 +-
 .../components/bigscLocation/indexV_2.vue     |   4 +-
 src/views/bigScreen/v1/index.vue              |  12 +-
 src/views/bigScreen/v1/profile/mapWrap.vue    |   4 +-
 src/views/bigScreen/v2/index.vue              |  12 +-
 src/views/bigScreen/v2/profile/mapWrap.vue    |   4 +-
 src/views/index.vue                           |   4 +-
 src/views/iot/circuitBreaker/index.vue        | 937 ++++++++++++++++++
 src/views/iot/model/index.vue                 |  21 +-
 src/views/personal/circuitBreaker/index.vue   | 802 +++++++++++++++
 .../personal/device/profile/childDevice.vue   |   4 +-
 .../DeviceDetailsView/deviceSelectNav.vue     | 433 ++++++++
 src/views/profile/DeviceDetailsView/index.vue | 868 ++++++++++++++++
 src/views/profile/DeviceDetailsView/info.vue  | 467 +++++++++
 .../DeviceDetailsView/stateManagement.vue     |  38 +
 src/views/profile/DeviceRunStarts/index.vue   |   5 +
 src/views/tenant/circuitBreaker/index.vue     | 802 +++++++++++++++
 27 files changed, 4442 insertions(+), 60 deletions(-)
 create mode 100644 src/views/iot/circuitBreaker/index.vue
 create mode 100644 src/views/personal/circuitBreaker/index.vue
 create mode 100644 src/views/profile/DeviceDetailsView/deviceSelectNav.vue
 create mode 100644 src/views/profile/DeviceDetailsView/index.vue
 create mode 100644 src/views/profile/DeviceDetailsView/info.vue
 create mode 100644 src/views/profile/DeviceDetailsView/stateManagement.vue
 create mode 100644 src/views/tenant/circuitBreaker/index.vue

diff --git a/src/api/alarm/tenantAlarm.js b/src/api/alarm/tenantAlarm.js
index 179b8ce3..1d169c06 100644
--- a/src/api/alarm/tenantAlarm.js
+++ b/src/api/alarm/tenantAlarm.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询报警记录列表
 export function listRecord(query) {
     return request({
-        url: '/tenant/record/list',
+        url: '/iot/record/list',
         method: 'get',
         params: query
     })
@@ -12,7 +12,7 @@ export function listRecord(query) {
 // 查询报警记录详细
 export function getRecord(recordId) {
     return request({
-        url: '/tenant/record/' + recordId,
+        url: '/iot/record/' + recordId,
         method: 'get'
     })
 }
@@ -29,7 +29,7 @@ export function updateRecord(data) {
 // 删除报警记录
 export function delRecord(recordId) {
     return request({
-        url: '/tenant/record/' + recordId,
+        url: '/iot/record/' + recordId,
         method: 'delete'
     })
 }
@@ -37,7 +37,7 @@ export function delRecord(recordId) {
 // 导出报警记录
 export function exportRecord(query) {
     return request({
-        url: '/tenant/record/export',
+        url: '/iot/record/export',
         method: 'get',
         params: query
     })
diff --git a/src/api/app.js b/src/api/app.js
index c191ce4d..ba91961f 100644
--- a/src/api/app.js
+++ b/src/api/app.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 获取路由
 export const getDevcieApp = () => {
   return request({
-    url: '/app/tenant/appInfo',
+    url: '/app/common/appInfo',
     method: 'get'
   })
 }
@@ -11,7 +11,7 @@ export const getDevcieApp = () => {
 // 我的设备列表
 export const getDeviceList = (query) => {
   return request({
-    url: '/iot/device/my/list',
+    url: '/iot/device/list',
     method: 'get',
     params: query
   })
@@ -20,7 +20,7 @@ export const getDeviceList = (query) => {
 // app 警告分析
 export const getWarningAnalysis = (query) => {
   return request({
-    url: '/app/tenant/index/warning-analysis',
+    url: '/app/index/warning-analysis',
     method: 'get',
     params: query
   })
@@ -29,7 +29,7 @@ export const getWarningAnalysis = (query) => {
 // 首页数据
 export function homeCount(query) {
   return request({
-    url: '/app/tenant/index',
+    url: '/app/index',
     method: 'get',
     params: query
   })
@@ -38,7 +38,7 @@ export function homeCount(query) {
 // app 项目设备
 export function appProjectDeviceList(query) {
   return request({
-    url: '/app/tenant/device/table',
+    url: '/app/device/table',
     method: 'get',
     params: query
   })
@@ -47,7 +47,7 @@ export function appProjectDeviceList(query) {
 // app 项目列表
 export function appProjectList(query) {
   return request({
-    url: '/app/tenant/project/list',
+    url: '/app/project/list',
     method: 'get',
     params: query
   })
@@ -56,7 +56,7 @@ export function appProjectList(query) {
 // app 告警列表
 export function appAlarmRecordList(query) {
   return request({
-    url: '/app/tenant/alarm/table',
+    url: '/app/alarm/table',
     method: 'get',
     params: query
   })
@@ -65,7 +65,7 @@ export function appAlarmRecordList(query) {
 // app 模型统计
 export function appDeviceStatistics(query) {
   return request({
-    url: '/app/tenant/index/device-statistics',
+    url: '/app/index/device-statistics',
     method: 'get',
     params: query
   })
diff --git a/src/api/iot/device.js b/src/api/iot/device.js
index e766b982..4f2036fa 100644
--- a/src/api/iot/device.js
+++ b/src/api/iot/device.js
@@ -12,7 +12,7 @@ export function listDevice(query) {
 // 查询设备列表
 export function myListDevice(query) {
   return request({
-    url: "/iot/device/my/list",
+    url: "/iot/device/list",
     method: "get",
     params: query
   });
@@ -106,3 +106,12 @@ export function resetPssword(data) {
     data: data
   });
 }
+
+// 开关控制
+export function setSwitchControl(data) {
+  return request({
+    url: "/iot/dev/opt/down",
+    method: "post",
+    data: data
+  });
+}
diff --git a/src/api/iot/model.js b/src/api/iot/model.js
index 7f05b6e9..0eb63872 100644
--- a/src/api/iot/model.js
+++ b/src/api/iot/model.js
@@ -60,3 +60,11 @@ export function listProductList(query) {
     params: query
   });
 }
+
+// 协议类型
+export function listModelType() {
+  return request({
+    url: "/iot/model/type-list",
+    method: "get"
+  });
+}
diff --git a/src/api/personal/alarm.js b/src/api/personal/alarm.js
index b06969ed..bebdc358 100644
--- a/src/api/personal/alarm.js
+++ b/src/api/personal/alarm.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询报警记录列表
 export function listRecord(query) {
     return request({
-        url: '/personal/record/list',
+        url: '/iot/record/list',
         method: 'get',
         params: query
     })
@@ -12,7 +12,7 @@ export function listRecord(query) {
 // 导出报警记录
 export function exportRecord(query) {
     return request({
-        url: '/personal/record/export',
+        url: '/iot/record/export',
         method: 'get',
         params: query
     })
diff --git a/src/api/personal/device.js b/src/api/personal/device.js
index a651bf0e..a7a4cea7 100644
--- a/src/api/personal/device.js
+++ b/src/api/personal/device.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询项目租户关系详细
 export function getOneselfInfo(deviceKey) {
   return request({
-      url: '/personal/device/' + deviceKey,
+      url: '/iot/device/' + deviceKey,
       method: 'get'
   })
 }
@@ -11,7 +11,7 @@ export function getOneselfInfo(deviceKey) {
 // 查询设备列表
 export function listDevice(query) {
   return request({
-    url: "/personal/device/list",
+    url: "/iot/device/list",
     method: "get",
     params: query
   });
@@ -19,7 +19,7 @@ export function listDevice(query) {
 // 查询设备详细
 export function getDevice(deviceId) {
   return request({
-    url: "/personal/device/" + deviceId,
+    url: "/iot/device/" + deviceId,
     method: "get"
   });
 }
@@ -27,7 +27,7 @@ export function getDevice(deviceId) {
 // 导出设备
 export function exportDevice(query) {
   return request({
-    url: "/personal/device/export",
+    url: "/iot/device/export",
     method: "get",
     params: query
   });
diff --git a/src/api/system/home.js b/src/api/system/home.js
index e96a8797..9f09dcb1 100644
--- a/src/api/system/home.js
+++ b/src/api/system/home.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 首页数据
 export function homeCount(query) {
   return request({
-    url: '/app/tenant/index',
+    url: '/app/index',
     method: 'get',
     params: query
   })
diff --git a/src/api/system/user.js b/src/api/system/user.js
index d6fa63d5..a519c37b 100644
--- a/src/api/system/user.js
+++ b/src/api/system/user.js
@@ -148,7 +148,7 @@ export function roleOptionselectList(tenantId) {
 // 查询工单处理人列表
 export function gdListUser(query) {
   return request({
-    url: '/app/tenant/maintenance/maintenance-user',
+    url: '/app/maintenance/maintenance-user',
     method: 'get',
     params: query
   })
diff --git a/src/api/tenant/device.js b/src/api/tenant/device.js
index 56da5f72..7490aa10 100644
--- a/src/api/tenant/device.js
+++ b/src/api/tenant/device.js
@@ -3,7 +3,7 @@ import request from "@/utils/request";
 // 查询设备列表
 export function listDevice(query) {
   return request({
-    url: "/tenant/device/list",
+    url: "/iot/device/list",
     method: "get",
     params: query
   });
@@ -11,7 +11,7 @@ export function listDevice(query) {
 // 查询设备详细
 export function getDevice(deviceId) {
   return request({
-    url: "/tenant/device/" + deviceId,
+    url: "/iot/device/" + deviceId,
     method: "get"
   });
 }
@@ -19,7 +19,7 @@ export function getDevice(deviceId) {
 // 导出设备
 export function exportDevice(query) {
   return request({
-    url: "/tenant/device/export",
+    url: "/iot/device/export",
     method: "get",
     params: query
   });
diff --git a/src/api/tenant/project.js b/src/api/tenant/project.js
index 29f89b61..aa86fe51 100644
--- a/src/api/tenant/project.js
+++ b/src/api/tenant/project.js
@@ -3,7 +3,7 @@ import request from "@/utils/request";
 // 查询项目列表
 export function listProject(query) {
   return request({
-    url: "/tenant/project/list",
+    url: "/iot/project/list",
     method: "get",
     params: query
   });
@@ -29,7 +29,7 @@ export function exportProject(query) {
 // 根据项目ID查询项目下所有设备
 export function listDeviceByProjectId(projectId) {
   return request({
-    url: "/tenant/space_device/device/" + projectId,
+    url: "/iot/space_device/device/" + projectId,
     method: "get"
   });
 }
@@ -37,7 +37,7 @@ export function listDeviceByProjectId(projectId) {
 // 查询项目空间列表
 export function listSpace(query) {
   return request({
-    url: "/tenant/space/list",
+    url: "/iot/space/list",
     method: "get",
     params: query
   });
@@ -46,7 +46,7 @@ export function listSpace(query) {
 // 查询项目空间详细
 export function getSpace(spaceId) {
   return request({
-    url: "/tenant/space/" + spaceId,
+    url: "/iot/space/" + spaceId,
     method: "get"
   });
 }
@@ -55,7 +55,7 @@ export function getSpace(spaceId) {
 // 获取项目空间下拉树列表
 export function listSpaceTree(query) {
   return request({
-    url: "/tenant/space/tree-list",
+    url: "/iot/space/tree-list",
     method: "get",
     params: query
   });
@@ -64,7 +64,7 @@ export function listSpaceTree(query) {
 // 查询空间设备列表
 export function listSpace_device(query) {
   return request({
-      url: '/tenant/space_device/list',
+      url: '/iot/space_device/list',
       method: 'get',
       params: query
   })
diff --git a/src/api/tenant/projectUser.js b/src/api/tenant/projectUser.js
index a01ac885..e014f0aa 100644
--- a/src/api/tenant/projectUser.js
+++ b/src/api/tenant/projectUser.js
@@ -3,7 +3,7 @@ import request from "@/utils/request";
 // 查询项目列表
 export function listProjectUser(query) {
   return request({
-    url: "/tenant/project_user/list",
+    url: "/iot/project_user/list",
     method: "get",
     params: query
   });
@@ -12,7 +12,7 @@ export function listProjectUser(query) {
 // 查询没有被绑定的用户
 export function listProjectNotUsed(query) {
   return request({
-    url: "/tenant/project_user/not-used",
+    url: "/iot/project_user/not-used",
     method: "get",
     params: query
   });
@@ -30,7 +30,7 @@ export function addProjectUser(data) {
 // 删除项目用户
 export function delProjectUser(projectId, userIds) {
   return request({
-    url: "/tenant/project_user/" + projectId +  '/' + userIds,
+    url: "/iot/project_user/" + projectId +  '/' + userIds,
     method: "delete"
   });
 }
@@ -38,7 +38,7 @@ export function delProjectUser(projectId, userIds) {
 // 导出项目用户列表
 export function exportProjectUser(query) {
   return request({
-    url: "/tenant/project_user/export",
+    url: "/iot/project_user/export",
     method: "get",
     params: query
   });
diff --git a/src/components/Amap/components/bigscLocation/indexV_2.vue b/src/components/Amap/components/bigscLocation/indexV_2.vue
index 70a02548..22928b8c 100644
--- a/src/components/Amap/components/bigscLocation/indexV_2.vue
+++ b/src/components/Amap/components/bigscLocation/indexV_2.vue
@@ -154,7 +154,7 @@ export default {
               this.projectList[i].projectLat
             ],
             // map: this.aMap,
-            icon: this.projectList[i].projectOverview['unProcessed']　> 0 ? markerAlarmIcon : markerIcon,
+            icon: this.projectList[i].tenantIndexVo['unProcessed']　> 0 ? markerAlarmIcon : markerIcon,
             offset: new AMap.Pixel(-13, -30)
           });
           var content = [];
@@ -173,7 +173,7 @@ export default {
                   </marquee>
                 </div>
                 <div class="info-item"><span class="info-lable">报警总数：</span>
-                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${this.projectList[i].projectOverview?.unProcessed}</span></div>
+                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${this.projectList[i].tenantIndexVo?.unProcessed}</span></div>
                 <div class="alarm-icon-block">
                   <img class="alarm-icon" src="${infoAlarmIcon}"/>
                 </div>
diff --git a/src/views/bigScreen/v1/index.vue b/src/views/bigScreen/v1/index.vue
index 2cfb9a8f..888ba359 100644
--- a/src/views/bigScreen/v1/index.vue
+++ b/src/views/bigScreen/v1/index.vue
@@ -187,11 +187,13 @@ export default {
     },
     // 查询项目列表
     getProjectList() {
-      appProjectList({
-        regionalismId: this.regionalismId
-      }).then(response => {
-        this.projectList = response.data;
-      });
+      if (this.$store.getters.userType !== 'PERSONAL') {
+         appProjectList({
+          regionalismId: this.regionalismId
+        }).then(response => {
+          this.projectList = response.data;
+        });
+      }
     },
     // 查询警情信息
     homeCount() {
diff --git a/src/views/bigScreen/v1/profile/mapWrap.vue b/src/views/bigScreen/v1/profile/mapWrap.vue
index 5b1481fd..678f8af2 100644
--- a/src/views/bigScreen/v1/profile/mapWrap.vue
+++ b/src/views/bigScreen/v1/profile/mapWrap.vue
@@ -59,7 +59,7 @@ export default {
         {
           guid: "3",
           label: "在线设备",
-          valueKeys: "onlineDeviceTotal",
+          valueKeys: "onlineTotal",
           image: imgs,
           routerKeys: "device"
         },
@@ -120,7 +120,7 @@ export default {
             routerPath = "/device_oneself/device_oneself";
           }
           break;
-        case "onlineDeviceTotal":
+        case "onlineTotal":
           routerPath = "/device/device";
           if (this.$store.getters.userType === "TENANT") {
             routerPath = "/device_tenant/device_tenant";
diff --git a/src/views/bigScreen/v2/index.vue b/src/views/bigScreen/v2/index.vue
index 5bbf0083..9086d0ee 100644
--- a/src/views/bigScreen/v2/index.vue
+++ b/src/views/bigScreen/v2/index.vue
@@ -187,11 +187,13 @@ export default {
     },
     // 查询项目列表
     getProjectList() {
-      appProjectList({
-        regionalismId: this.regionalismId
-      }).then(response => {
-        this.projectList = response.data;
-      });
+      if (this.$store.getters.userType !== 'PERSONAL') {
+         appProjectList({
+          regionalismId: this.regionalismId
+        }).then(response => {
+          this.projectList = response.data;
+        });
+      }
     },
     // 查询警情信息
     homeCount() {
diff --git a/src/views/bigScreen/v2/profile/mapWrap.vue b/src/views/bigScreen/v2/profile/mapWrap.vue
index 3040ffa4..0da923bd 100644
--- a/src/views/bigScreen/v2/profile/mapWrap.vue
+++ b/src/views/bigScreen/v2/profile/mapWrap.vue
@@ -73,7 +73,7 @@ export default {
         {
           guid: "3",
           label: "在线设备",
-          valueKeys: "onlineDeviceTotal",
+          valueKeys: "onlineTotal",
           image: imgs,
           routerKeys: "device",
           color: '#00FF06'
@@ -137,7 +137,7 @@ export default {
             routerPath = "/device_oneself/device_oneself";
           }
           break;
-        case "onlineDeviceTotal":
+        case "onlineTotal":
           routerPath = "/device/device";
           if (this.$store.getters.userType === "TENANT") {
             routerPath = "/device_tenant/device_tenant";
diff --git a/src/views/index.vue b/src/views/index.vue
index e00de71e..cefa50e3 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -335,11 +335,11 @@ export default {
     getCount() {
       homeCount().then(response => {
           this.tempObject = {
-              onlineCount: response.data.onlineDeviceTotal,
+              onlineCount: response.data.onlineTotal,
               activeCount: response.data.activeCount,
               deviceCount: response.data.deviceTotal,
               modelCount: response.data.projectTotal,
-              offlineCount: (response.data.deviceTotal - response.data.onlineDeviceTotal) || 0
+              offlineCount: (response.data.deviceTotal - response.data.onlineTotal) || 0
           }
           this.alarmCount = {
             processCount: response.data.processed,
diff --git a/src/views/iot/circuitBreaker/index.vue b/src/views/iot/circuitBreaker/index.vue
new file mode 100644
index 00000000..ce7e8ed3
--- /dev/null
+++ b/src/views/iot/circuitBreaker/index.vue
@@ -0,0 +1,937 @@
+<template>
+  <div class="app-container iot-device">
+    <component :is="componectVal" :sourceId="sourceId"></component>
+    <div v-show="componectVal === ''">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+        <!-- <el-form-item label="所属型号" prop="modelId">
+          <el-select v-model="queryParams.modelId"  placeholder="所属型号" clearable size="small" @change="handleQuery">
+            <el-option
+              :label="doct.modelName"
+              v-for="doct in queryModelOpt"
+              :key="doct.modelId"
+              :value="doct.modelId"
+            />
+          </el-select>
+        </el-form-item>-->
+
+        <el-form-item label="型号名称" prop="modelName">
+          <el-input
+            v-model="queryParams.modelName"
+            placeholder="请输入型号名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备名称" prop="deviceName">
+          <el-input
+            v-model="queryParams.deviceName"
+            placeholder="请输入设备名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="设备状态" prop="deviceState">
+          <el-select
+            v-model="queryParams.deviceState"
+            placeholder="请选择设备状态"
+            @change="handleQuery"
+            clearable
+            size="small"
+          >
+            <el-option
+              :label="keys"
+              v-for="(keys, vals) in deviceStatusOpt"
+              :key="vals"
+              :value="vals"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item label="设备类型" prop="deviceType">
+          <el-select
+            v-model="queryParams.deviceType"
+            placeholder="请选择设备类型"
+            @change="handleQuery"
+            clearable
+            size="small"
+          >
+            <el-option
+              :label="keys"
+              :value="vals"
+              v-for="(keys, vals) in deviceTypeList"
+              :key="vals"
+            />
+          </el-select>
+        </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-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['iot:device:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+          >导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table
+        v-loading="loading"
+        :data="deviceList"
+        :default-sort="{prop: 'createTime', order: 'descending'}"
+        @sort-change="sortChange"
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="indexFormatter"
+          width="80px"
+        ></el-table-column>
+        <el-table-column label="设备名称" align="left" prop="deviceName" />
+        <el-table-column label="所属型号" align="left" prop="modelName" />
+        <el-table-column label="设备key" align="left" prop="deviceKey" />
+        <el-table-column label="设备类型" align="left" width="120px" prop="deviceTypeName" />
+        <!-- <el-table-column label="父设备" align="left" prop="parentName" /> -->
+        <el-table-column label="设备状态" align="center" width="120" prop="deviceState">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="scope.row.deviceState === 'ONLINE'">在线</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</el-tag>
+            <el-tag type="info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          sortable="custom"
+          width="160px"
+          prop="createTime"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          width="200px"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-search"
+              @click="handleDetails(scope.row)"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['iot:device:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['iot:device:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 添加或修改设备对话框 -->
+    <el-dialog
+      class="eldialog-wrap"
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="所属型号：" prop="modelId">
+          <el-input
+            v-model="form.modelName"
+            placeholder="点击选择型号"
+            @focus="openModelTableSelectDialog()"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备类型：" prop="deviceType">
+          <el-select
+            disabled
+            v-model="form.deviceType"
+            style="width: 100%;"
+            placeholder="请选择设备类型"
+            clearable
+          >
+            <el-option
+              :label="keys"
+              :value="vals"
+              v-for="(keys, vals) in deviceTypeList"
+              :key="vals"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="父设备：" prop="parentId" v-if="form.deviceType === 'MINIATURE_BREAKER'">
+          <el-input
+            v-model="form.parentName"
+            placeholder="点击选择父设备"
+            @focus="openTableSelectDialog()"
+          />
+        </el-form-item>
+
+        <el-form-item label="线路类型：" prop="lineType" v-if="form.deviceType === 'MINIATURE_BREAKER'">
+          <el-select v-model="form.lineType" style="width: 100%;" placeholder="请选择线路类型" clearable>
+            <el-option :label="keys" :value="vals" v-for="(keys, vals) in lineTypeOpt" :key="vals" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="设备名称：" prop="deviceName">
+          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
+        </el-form-item>
+
+        <el-form-item label="设备KEY：" prop="deviceKey">
+          <el-input v-model="form.deviceKey" placeholder="请输入设备KEY" />
+        </el-form-item>
+
+        <el-form-item label="参数设置：">
+          <span style="color: red; font-size: 12px;">*注意：锁定即参数不可修改；未锁则可以修改。</span>
+          <div class="form-params-wrap">
+            <param-wrap ref="paramWrap" typeKeys v-if="open"></param-wrap>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
+        <el-button size="mini" @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="选择"
+      :visible.sync="selectTableShow"
+      width="75%"
+      top="10vh"
+      class="select-table-dialog"
+      :close-on-click-modal="false"
+    >
+      <select-table-wrap
+        v-if="selectTableShow"
+        :tableOption="tableSelectOption.tableOpt"
+        :queryOption="tableSelectOption.queryOpt"
+        :tableList="tableSelectOption.tableList"
+        @parentGetList="childGetList($event)"
+        :otherOption="tableSelectOption.otherOption"
+        @returnEvent="returnEvent($event)"
+      />
+
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="primary" @click="resuleClick">确 定</el-button>
+        <el-button size="mini" @click="() =>{selectTableShow = false}">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <div class="to-home-wrap2-circuit" @click="toTableClick" v-show="componectVal !== ''">
+      <el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  listDevice,
+  getDevice,
+  delDevice,
+  addDevice,
+  updateDevice,
+  exportDevice,
+  listDeviceTypeList
+} from "@/api/iot/device";
+import { listModel, getModel } from "@/api/iot/model";
+import SelectTableWrap from "@/components/SelectTable/index";
+import DetailsWrap from "@/views/profile/DeviceDetailsView/index";
+import ParamWrap from "@/components/ParamWrap/deviceParam";
+const deviceStatusOpt = {
+  ONLINE: "在线",
+  OFFLINE: "离线",
+  OUTLINE: "脱线",
+  UNACTIVE: "未激活"
+};
+const lineTypeOpt = {
+  MAIN: "总路",
+  BRANCH: "支路"
+};
+
+export default {
+  name: "circuitBreaker",
+  components: {
+    SelectTableWrap,
+    DetailsWrap,
+    ParamWrap
+  },
+  data() {
+    return {
+      deviceStatusOpt,
+      lineTypeOpt,
+      sourceId: "",
+      componectVal: "",
+      selectTableShow: false,
+      tableSelectOption: {},
+      selectResult: {},
+      queryModelOpt: [],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        modelId: null,
+        parentId: null,
+        deviceName: null,
+        deviceState: null,
+        deviceType: null,
+        modelName: null,
+        orderByColumn: "createTime",
+        isAsc: "desc",
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        modelId: [
+          { required: true, message: "所属型号不能为空", trigger: "blur" }
+        ],
+        deviceType: [
+          { required: true, message: "设备类型不能为空", trigger: "blur" }
+        ],
+        parentId: [
+          { required: true, message: "父设备不能为空", trigger: "blur" }
+        ],
+        deviceName: [
+          { required: true, message: "设备名称不能为空", trigger: "blur" }
+        ],
+        lineType: [
+          { required: true, message: "线路类型不能为空", trigger: "blur" }
+        ],
+        deviceKey: [
+          {
+            required: true,
+            validator: this.chenking_deviceKey,
+            trigger: "blur"
+          }
+        ]
+      },
+      deviceTypeList: {}
+    };
+  },
+  created() {
+    this.getDeviceTypeList();
+    this.initGetModelList();
+    this.getList();
+  },
+  methods: {
+    sortChange(column) {
+      const sort = {
+        isAsc: column.order === "descending" ? "desc" : "asc",
+        orderByColumn: column.prop
+      };
+      this.queryParams = Object.assign(this.queryParams, sort);
+      this.handleQuery();
+    },
+    indexFormatter(val) {
+      return (
+        val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+      );
+    },
+    handleDetails(row) {
+      this.sourceId = row.deviceId;
+      this.componectVal = "DetailsWrap";
+    },
+    // 跳转详情页
+    toTableClick() {
+      this.componectVal = "";
+    },
+    // 打开厂商选择窗口 ——表格
+    openModelTableSelectDialog() {
+      this.selectResult = {};
+      this.tableSelectOption = {
+        otherOption: {
+          tableType: "model"
+        },
+        queryOpt: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            protocolType: "",
+            modelName: "",
+            deviceType: 'GATEWAY_CONTROLLER'
+          },
+          page: {
+            pageSize: 10,
+            pageNum: 1,
+            total: 0
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "型号名称",
+              clearable: true,
+              label: "型号名称",
+              type: "input",
+              key: "modelName",
+              size: "small",
+              value: ""
+            },
+            {
+              style: "",
+              placeholder: "协议类型",
+              clearable: true,
+              label: "协议类型",
+              type: "select",
+              key: "protocolType",
+              size: "small",
+              value: "",
+              options: [
+                {
+                  key: "IOTOS",
+                  label: "iot平台",
+                  value: "IOTOS"
+                },
+                {
+                  key: "ONENET",
+                  label: "ONENET",
+                  value: "ONENET"
+                }
+              ],
+              optionKey: {
+                key: "key",
+                label: "label",
+                value: "value"
+              }
+            }
+          ]
+        },
+        tableOpt: {
+          loading: false,
+          rowKey: "deviceId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "厂商名称",
+              type: "",
+              prop: "vendorName",
+              align: "left",
+              width: "200",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "型号名称",
+              type: "",
+              prop: "modelName",
+              align: "left",
+              width: "200",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备类型",
+              type: "",
+              prop: "deviceTypeName",
+              align: "left",
+              width: "120",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "产品PK",
+              type: "",
+              prop: "prodKey",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "产品密钥",
+              type: "",
+              prop: "prodSecret",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            }
+          ],
+          tableList: {
+            type: Array
+          }
+        },
+        tableList: []
+      };
+      this.selectTableShow = true;
+    },
+    // 打开设备选择窗口 ——表格
+    openTableSelectDialog() {
+      this.selectResult = {};
+      this.tableSelectOption = {
+        otherOption: {
+          tableType: "device"
+        },
+        queryOpt: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            deviceName: "",
+            modelId: "",
+            parentId: 0,
+            deviceType: "GATEWAY_CONTROLLER"
+          },
+          page: {
+            pageSize: 10,
+            pageNum: 1,
+            total: 0
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "设备名称",
+              clearable: true,
+              label: "设备名称",
+              type: "input",
+              key: "deviceName",
+              size: "small",
+              value: ""
+            }
+          ]
+        },
+        tableOpt: {
+          loading: false,
+          rowKey: "deviceId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "所属型号",
+              type: "",
+              prop: "modelName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备名称",
+              type: "",
+              prop: "deviceName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备Key",
+              type: "",
+              prop: "deviceKey",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "创建时间",
+              type: "time",
+              prop: "createTime",
+              align: "center",
+              width: "160",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            }
+          ],
+          tableList: {
+            type: Array
+          }
+        },
+        tableList: []
+      };
+      this.selectTableShow = true;
+    },
+    // 查询回调
+    childGetList(data) {
+      if (data.otherOption.tableType === "device") {
+        this.deviceChildList(data);
+      } else if (data.otherOption.tableType === "model") {
+        this.modelChildList(data);
+      }
+    },
+    initGetModelList() {
+      listModel({
+        pageNum: 1,
+        pageSize: 99999
+      }).then(response => {
+        this.queryModelOpt = response.rows;
+      });
+    },
+    modelChildList(data) {
+      listModel(Object.assign(data.page, data.param, { selected: 1 })).then(
+        response => {
+          this.tableSelectOption.tableList = response.rows;
+          this.tableSelectOption.queryOpt.page.total = Number(response.total);
+        }
+      );
+    },
+    deviceChildList(data) {
+      listDevice(Object.assign(data.page, data.param, { selected: 1 })).then(
+        response => {
+          this.tableSelectOption.tableList = response.rows;
+          this.tableSelectOption.queryOpt.page.total = Number(response.total);
+        }
+      );
+    },
+    // 根据 型号id 获取 型号详情
+    getModelInfoById(modelId) {
+      getModel(modelId).then(res => {
+        this.$refs.paramWrap.setList(res.data.paramList || []);
+      });
+    },
+    // 点击或者双击数据回调
+    returnEvent(data) {
+      if (data.type === "dblclick") {
+        if (data.otherOption.tableType === "device") {
+          this.form.parentId = data.value.deviceId;
+          this.form.parentName = data.value.deviceName;
+        } else if (data.otherOption.tableType === "model") {
+          this.getModelInfoById(data.value.modelId);
+          this.form.modelId = data.value.modelId;
+          this.form.modelName = data.value.modelName;
+          this.form.deviceType = data.value.deviceType;
+          this.form.prodKey = data.value.prodKey;
+          this.deviceTypeChange(this.form.deviceType);
+        }
+        this.selectTableShow = false;
+      } else if (data.type === "click") {
+        this.selectResult = {};
+        if (data.otherOption.tableType === "device") {
+          this.selectResult.parentId = data.value.deviceId;
+          this.selectResult.parentName = data.value.deviceName;
+        } else if (data.otherOption.tableType === "model") {
+          this.selectResult.modelId = data.value.modelId;
+          this.selectResult.modelName = data.value.modelName;
+          this.selectResult.deviceType = data.value.deviceType;
+          // this.selectResult.paramList = data.value.paramList;
+          this.selectResult.prodKey = data.value.prodKey;
+        }
+        this.selectResult.tableType = data.otherOption.tableType;
+      }
+    },
+    // 点击确定按钮
+    resuleClick() {
+      if (this.selectResult.tableType === "device") {
+        this.form.parentId = this.selectResult.parentId;
+        this.form.parentName = this.selectResult.parentName;
+      } else if (this.selectResult.tableType === "model") {
+        this.form.modelId = this.selectResult.modelId;
+        this.form.prodKey = this.selectResult.prodKey;
+        this.form.modelName = this.selectResult.modelName;
+        this.form.deviceType = this.selectResult.deviceType;
+        this.deviceTypeChange(this.form.deviceType);
+        this.getModelInfoById(this.selectResult.modelId);
+        // this.$refs.paramWrap.setList(this.selectResult.paramList || []);
+      }
+      this.selectTableShow = false;
+    },
+    deviceTypeChange(val) {
+      if (val !== "MINIATURE_BREAKER") {
+        this.form.parentId = 0;
+        this.form.parentName = "";
+      } else if (!val) {
+        this.form.parentId = "";
+        this.form.parentName = "";
+      }
+    },
+    // 查询设备类型列表
+    getDeviceTypeList() {
+      listDeviceTypeList().then(response => {
+        this.deviceTypeList = response.data;
+      });
+    },
+    /** 查询设备列表 */
+    getList() {
+      this.loading = true;
+      listDevice(Object.assign(this.queryParams , {
+        deviceType: 'GATEWAY_CONTROLLER'
+      })).then(response => {
+        this.deviceList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        modelId: null,
+        modelName: "",
+        parentName: "",
+        parentId: null,
+        deviceName: null,
+        deviceType: null,
+        paramList: [],
+        deviceKey: "",
+        lineType: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加设备";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const deviceId = row.deviceId || this.ids;
+      const _this = this;
+      getDevice(deviceId).then(response => {
+        _this.form = response.data;
+        _this.open = true;
+        _this.title = "修改设备";
+        setTimeout(() => {
+          _this.$refs.paramWrap.setList(response.data.paramList || []);
+        }, 100);
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.form.paramList = this.$refs.paramWrap.getResult();
+          this.form.lineType =
+            this.form.deviceType === "MINIATURE_BREAKER"
+              ? this.form.lineType
+              : undefined;
+          if (this.form.deviceId != null) {
+            updateDevice(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDevice(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const deviceIds = row.deviceId || this.ids;
+      this.$confirm("是否删除该选项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(function() {
+          return delDevice(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有设备数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(function() {
+          return exportDevice(queryParams);
+        })
+        .then(response => {
+          this.download(response.msg);
+        });
+    },
+    chenking_deviceKey(rule, value, callback) {
+      const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
+      if (this.form.deviceKey && !isExp.test(this.form.deviceKey)) {
+        callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
+      } else {
+        callback();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.iot-device {
+  .eldialog-wrap {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-dialog__body {
+      padding: 0px;
+    }
+    .el-form {
+      padding: 20px;
+      padding-right: 40px;
+    }
+    .el-dialog__footer {
+      height: 60px;
+      border-top: 1px solid #747373;
+      text-align: right;
+      width: 100%;
+      padding: 0px;
+      padding-top: 15px;
+      .el-button + .el-button {
+        margin-right: 10px;
+      }
+      .el-button {
+        padding-top: 8px;
+      }
+    }
+    .form-params-wrap {
+      height: 100%;
+      width: calc(100% + 110px);
+      position: relative;
+      top: 15px;
+      left: -90px;
+      max-height: 250px;
+      overflow: auto;
+      padding: 10px;
+      border: 1px solid #009688;
+      border-radius: 5px;
+    }
+  }
+  .to-home-wrap2-circuit {
+    width: 100px;
+    height: 30px;
+    position: absolute;
+    right: 30px;
+    top: 170px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    color: #656363;
+    font-size: 20px;
+    cursor: default;
+    .el-button--medium.is-circle {
+      width: 25px;
+      height: 20px;
+      padding: 0;
+      background: #f26a6a;
+      color: #fff;
+      font-size: 16px;
+      border-radius: 5px;
+      height: 30px;
+      width: 100%;
+      font-size: 14px;
+    }
+  }
+  .to-home-wrap2-circuit:hover {
+    color: #1890ff;
+    font-size: 30px;
+  }
+}
+.form-params-wrap::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+.form-params-wrap::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px #c4c4c4;
+  background: #dededea6;
+}
+.form-params-wrap::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+</style>
diff --git a/src/views/iot/model/index.vue b/src/views/iot/model/index.vue
index e303e7ac..ea77ecdd 100644
--- a/src/views/iot/model/index.vue
+++ b/src/views/iot/model/index.vue
@@ -155,7 +155,9 @@
         </el-form-item>
 
         <el-form-item label="产品PK：" prop="prodKey">
+          <el-input v-if="form.protocolType === 'OFFICIAL'" placeholder="请填写产品PK" v-model="form.prodKey" ></el-input>
           <el-input
+            v-else
             v-model="form.prodKey"
             placeholder="点击选择产品"
             @focus="openProductTableSelectDialog()"
@@ -231,7 +233,8 @@ import {
   addModel,
   updateModel,
   exportModel,
-  listProductList
+  listProductList,
+  listModelType
 } from "@/api/iot/model";
 import { listVendor } from "@/api/iot/vendor";
 import { listDeviceTypeList } from "@/api/iot/device";
@@ -243,10 +246,10 @@ const deviceStartsOpt = {
   1: "启用"
 };
 
-const protocolTypeOpt = {
-  IOTOS: "iot平台",
-  ONENET: "ONENET"
-};
+// const protocolTypeOpt = {
+//   IOTOS: "iot平台",
+//   ONENET: "ONENET"
+// };
 export default {
   name: "Model",
   components: {
@@ -255,7 +258,7 @@ export default {
   },
   data() {
     return {
-      protocolTypeOpt,
+      protocolTypeOpt: [],
       selectTableShow: false,
       tableSelectOption: {},
       selectResult: {},
@@ -312,10 +315,16 @@ export default {
     };
   },
   created() {
+    this.getModelTypeList();
     this.getDeviceTypeList();
     this.getList();
   },
   methods: {
+    getModelTypeList() {
+      listModelType().then(res => {
+        this.protocolTypeOpt = res.data
+      })
+    },
     sortChange(column) {
       const sort = {
         isAsc: column.order === "descending" ? "desc" : "asc",
diff --git a/src/views/personal/circuitBreaker/index.vue b/src/views/personal/circuitBreaker/index.vue
new file mode 100644
index 00000000..157d270a
--- /dev/null
+++ b/src/views/personal/circuitBreaker/index.vue
@@ -0,0 +1,802 @@
+<template>
+  <div class="app-container iot-device">
+    <component :is="componectVal" :sourceId="sourceId"></component>
+    <div v-show="componectVal === ''">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+
+        <el-form-item label="型号名称" prop="modelName">
+          <el-input
+            v-model="queryParams.modelName"
+            placeholder="请输入型号名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备名称" prop="deviceName">
+          <el-input
+            v-model="queryParams.deviceName"
+            placeholder="请输入设备名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="设备状态" prop="deviceState">
+          <el-select
+            v-model="queryParams.deviceState"
+            placeholder="请选择设备状态"
+            @change="handleQuery"
+            clearable
+            size="small"
+          >
+            <el-option
+              :label="keys"
+              v-for="(keys, vals) in deviceStatusOpt"
+              :key="vals"
+              :value="vals"
+            />
+          </el-select>
+        </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-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['iot:device:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+          >导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table
+        v-loading="loading"
+        :data="deviceList"
+        :default-sort="{prop: 'createTime', order: 'descending'}"
+        @sort-change="sortChange"
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="indexFormatter"
+          width="80px"
+        ></el-table-column>
+        <el-table-column label="设备名称" align="left" prop="deviceName" />
+        <el-table-column label="所属型号" align="left" prop="modelName" />
+        <el-table-column label="设备key" align="left" prop="deviceKey" />
+        <el-table-column label="设备类型" align="left" width="120px" prop="deviceTypeName" />
+        <el-table-column label="设备状态" align="center" width="120" prop="deviceState">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="scope.row.deviceState === 'ONLINE'">在线</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</el-tag>
+            <el-tag type="info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          sortable="custom"
+          width="160px"
+          prop="createTime"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          width="200px"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-search"
+              @click="handleDetails(scope.row)"
+            >详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <div class="to-home-wrap2-circuit" @click="toTableClick" v-show="componectVal !== ''">
+      <el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  listDevice,
+  getDevice,
+  delDevice,
+  addDevice,
+  updateDevice,
+  exportDevice,
+  listDeviceTypeList
+} from "@/api/iot/device";
+import { listModel, getModel } from "@/api/iot/model";
+import SelectTableWrap from "@/components/SelectTable/index";
+import DetailsWrap from "@/views/profile/DeviceDetailsView/index";
+import ParamWrap from "@/components/ParamWrap/deviceParam";
+const deviceStatusOpt = {
+  ONLINE: "在线",
+  OFFLINE: "离线",
+  OUTLINE: "脱线",
+  UNACTIVE: "未激活"
+};
+const lineTypeOpt = {
+  MAIN: "总路",
+  BRANCH: "支路"
+};
+
+export default {
+  name: "circuitBreaker",
+  components: {
+    SelectTableWrap,
+    DetailsWrap,
+    ParamWrap
+  },
+  data() {
+    return {
+      deviceStatusOpt,
+      lineTypeOpt,
+      sourceId: "",
+      componectVal: "",
+      selectTableShow: false,
+      tableSelectOption: {},
+      selectResult: {},
+      queryModelOpt: [],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        modelId: null,
+        parentId: null,
+        deviceName: null,
+        deviceState: null,
+        deviceType: null,
+        modelName: null,
+        orderByColumn: "createTime",
+        isAsc: "desc",
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        modelId: [
+          { required: true, message: "所属型号不能为空", trigger: "blur" }
+        ],
+        deviceType: [
+          { required: true, message: "设备类型不能为空", trigger: "blur" }
+        ],
+        parentId: [
+          { required: true, message: "父设备不能为空", trigger: "blur" }
+        ],
+        deviceName: [
+          { required: true, message: "设备名称不能为空", trigger: "blur" }
+        ],
+        lineType: [
+          { required: true, message: "线路类型不能为空", trigger: "blur" }
+        ],
+        deviceKey: [
+          {
+            required: true,
+            validator: this.chenking_deviceKey,
+            trigger: "blur"
+          }
+        ]
+      },
+      deviceTypeList: {}
+    };
+  },
+  created() {
+    this.getDeviceTypeList();
+    this.initGetModelList();
+    this.getList();
+  },
+  methods: {
+    sortChange(column) {
+      const sort = {
+        isAsc: column.order === "descending" ? "desc" : "asc",
+        orderByColumn: column.prop
+      };
+      this.queryParams = Object.assign(this.queryParams, sort);
+      this.handleQuery();
+    },
+    indexFormatter(val) {
+      return (
+        val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+      );
+    },
+    handleDetails(row) {
+      this.sourceId = row.deviceId;
+      this.componectVal = "DetailsWrap";
+    },
+    // 跳转详情页
+    toTableClick() {
+      this.componectVal = "";
+    },
+    // 打开厂商选择窗口 ——表格
+    openModelTableSelectDialog() {
+      this.selectResult = {};
+      this.tableSelectOption = {
+        otherOption: {
+          tableType: "model"
+        },
+        queryOpt: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            protocolType: "",
+            modelName: ""
+          },
+          page: {
+            pageSize: 10,
+            pageNum: 1,
+            total: 0
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "型号名称",
+              clearable: true,
+              label: "型号名称",
+              type: "input",
+              key: "modelName",
+              size: "small",
+              value: ""
+            },
+            {
+              style: "",
+              placeholder: "协议类型",
+              clearable: true,
+              label: "协议类型",
+              type: "select",
+              key: "protocolType",
+              size: "small",
+              value: "",
+              options: [
+                {
+                  key: "IOTOS",
+                  label: "iot平台",
+                  value: "IOTOS"
+                },
+                {
+                  key: "ONENET",
+                  label: "ONENET",
+                  value: "ONENET"
+                }
+              ],
+              optionKey: {
+                key: "key",
+                label: "label",
+                value: "value"
+              }
+            }
+          ]
+        },
+        tableOpt: {
+          loading: false,
+          rowKey: "deviceId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "厂商名称",
+              type: "",
+              prop: "vendorName",
+              align: "left",
+              width: "200",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "型号名称",
+              type: "",
+              prop: "modelName",
+              align: "left",
+              width: "200",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备类型",
+              type: "",
+              prop: "deviceTypeName",
+              align: "left",
+              width: "120",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "产品PK",
+              type: "",
+              prop: "prodKey",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "产品密钥",
+              type: "",
+              prop: "prodSecret",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            }
+          ],
+          tableList: {
+            type: Array
+          }
+        },
+        tableList: []
+      };
+      this.selectTableShow = true;
+    },
+    // 打开设备选择窗口 ——表格
+    openTableSelectDialog() {
+      this.selectResult = {};
+      this.tableSelectOption = {
+        otherOption: {
+          tableType: "device"
+        },
+        queryOpt: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            deviceName: "",
+            modelId: "",
+            parentId: 0,
+            deviceType: "GATEWAY_CONTROLLER"
+          },
+          page: {
+            pageSize: 10,
+            pageNum: 1,
+            total: 0
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "设备名称",
+              clearable: true,
+              label: "设备名称",
+              type: "input",
+              key: "deviceName",
+              size: "small",
+              value: ""
+            }
+          ]
+        },
+        tableOpt: {
+          loading: false,
+          rowKey: "deviceId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "所属型号",
+              type: "",
+              prop: "modelName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备名称",
+              type: "",
+              prop: "deviceName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备Key",
+              type: "",
+              prop: "deviceKey",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "创建时间",
+              type: "time",
+              prop: "createTime",
+              align: "center",
+              width: "160",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            }
+          ],
+          tableList: {
+            type: Array
+          }
+        },
+        tableList: []
+      };
+      this.selectTableShow = true;
+    },
+    // 查询回调
+    childGetList(data) {
+      if (data.otherOption.tableType === "device") {
+        this.deviceChildList(data);
+      } else if (data.otherOption.tableType === "model") {
+        this.modelChildList(data);
+      }
+    },
+    initGetModelList() {
+      listModel({
+        pageNum: 1,
+        pageSize: 99999
+      }).then(response => {
+        this.queryModelOpt = response.rows;
+      });
+    },
+    modelChildList(data) {
+      listModel(Object.assign(data.page, data.param, { selected: 1 })).then(
+        response => {
+          this.tableSelectOption.tableList = response.rows;
+          this.tableSelectOption.queryOpt.page.total = Number(response.total);
+        }
+      );
+    },
+    deviceChildList(data) {
+      listDevice(Object.assign(data.page, data.param, { selected: 1 })).then(
+        response => {
+          this.tableSelectOption.tableList = response.rows;
+          this.tableSelectOption.queryOpt.page.total = Number(response.total);
+        }
+      );
+    },
+    // 根据 型号id 获取 型号详情
+    getModelInfoById(modelId) {
+      getModel(modelId).then(res => {
+        this.$refs.paramWrap.setList(res.data.paramList || []);
+      });
+    },
+    // 点击或者双击数据回调
+    returnEvent(data) {
+      if (data.type === "dblclick") {
+        if (data.otherOption.tableType === "device") {
+          this.form.parentId = data.value.deviceId;
+          this.form.parentName = data.value.deviceName;
+        } else if (data.otherOption.tableType === "model") {
+          this.getModelInfoById(data.value.modelId);
+          this.form.modelId = data.value.modelId;
+          this.form.modelName = data.value.modelName;
+          this.form.deviceType = data.value.deviceType;
+          this.form.prodKey = data.value.prodKey;
+          this.deviceTypeChange(this.form.deviceType);
+        }
+        this.selectTableShow = false;
+      } else if (data.type === "click") {
+        this.selectResult = {};
+        if (data.otherOption.tableType === "device") {
+          this.selectResult.parentId = data.value.deviceId;
+          this.selectResult.parentName = data.value.deviceName;
+        } else if (data.otherOption.tableType === "model") {
+          this.selectResult.modelId = data.value.modelId;
+          this.selectResult.modelName = data.value.modelName;
+          this.selectResult.deviceType = data.value.deviceType;
+          // this.selectResult.paramList = data.value.paramList;
+          this.selectResult.prodKey = data.value.prodKey;
+        }
+        this.selectResult.tableType = data.otherOption.tableType;
+      }
+    },
+    // 点击确定按钮
+    resuleClick() {
+      if (this.selectResult.tableType === "device") {
+        this.form.parentId = this.selectResult.parentId;
+        this.form.parentName = this.selectResult.parentName;
+      } else if (this.selectResult.tableType === "model") {
+        this.form.modelId = this.selectResult.modelId;
+        this.form.prodKey = this.selectResult.prodKey;
+        this.form.modelName = this.selectResult.modelName;
+        this.form.deviceType = this.selectResult.deviceType;
+        this.deviceTypeChange(this.form.deviceType);
+        this.getModelInfoById(this.selectResult.modelId);
+        // this.$refs.paramWrap.setList(this.selectResult.paramList || []);
+      }
+      this.selectTableShow = false;
+    },
+    deviceTypeChange(val) {
+      if (val !== "MINIATURE_BREAKER") {
+        this.form.parentId = 0;
+        this.form.parentName = "";
+      } else if (!val) {
+        this.form.parentId = "";
+        this.form.parentName = "";
+      }
+    },
+    // 查询设备类型列表
+    getDeviceTypeList() {
+      listDeviceTypeList().then(response => {
+        this.deviceTypeList = response.data;
+      });
+    },
+    /** 查询设备列表 */
+    getList() {
+      this.loading = true;
+      listDevice(Object.assign(this.queryParams , {
+        deviceType: 'GATEWAY_CONTROLLER'
+      })).then(response => {
+        this.deviceList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        modelId: null,
+        modelName: "",
+        parentName: "",
+        parentId: null,
+        deviceName: null,
+        deviceType: null,
+        paramList: [],
+        deviceKey: "",
+        lineType: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加设备";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const deviceId = row.deviceId || this.ids;
+      const _this = this;
+      getDevice(deviceId).then(response => {
+        _this.form = response.data;
+        _this.open = true;
+        _this.title = "修改设备";
+        setTimeout(() => {
+          _this.$refs.paramWrap.setList(response.data.paramList || []);
+        }, 100);
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.form.paramList = this.$refs.paramWrap.getResult();
+          this.form.lineType =
+            this.form.deviceType === "MINIATURE_BREAKER"
+              ? this.form.lineType
+              : undefined;
+          if (this.form.deviceId != null) {
+            updateDevice(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDevice(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const deviceIds = row.deviceId || this.ids;
+      this.$confirm("是否删除该选项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(function() {
+          return delDevice(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有设备数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(function() {
+          return exportDevice(queryParams);
+        })
+        .then(response => {
+          this.download(response.msg);
+        });
+    },
+    chenking_deviceKey(rule, value, callback) {
+      const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
+      if (this.form.deviceKey && !isExp.test(this.form.deviceKey)) {
+        callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
+      } else {
+        callback();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.iot-device {
+  .eldialog-wrap {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-dialog__body {
+      padding: 0px;
+    }
+    .el-form {
+      padding: 20px;
+      padding-right: 40px;
+    }
+    .el-dialog__footer {
+      height: 60px;
+      border-top: 1px solid #747373;
+      text-align: right;
+      width: 100%;
+      padding: 0px;
+      padding-top: 15px;
+      .el-button + .el-button {
+        margin-right: 10px;
+      }
+      .el-button {
+        padding-top: 8px;
+      }
+    }
+    .form-params-wrap {
+      height: 100%;
+      width: calc(100% + 110px);
+      position: relative;
+      top: 15px;
+      left: -90px;
+      max-height: 250px;
+      overflow: auto;
+      padding: 10px;
+      border: 1px solid #009688;
+      border-radius: 5px;
+    }
+  }
+  .to-home-wrap2-circuit {
+    width: 100px;
+    height: 30px;
+    position: absolute;
+    right: 30px;
+    top: 170px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    color: #656363;
+    font-size: 20px;
+    cursor: default;
+    .el-button--medium.is-circle {
+      width: 25px;
+      height: 20px;
+      padding: 0;
+      background: #f26a6a;
+      color: #fff;
+      font-size: 16px;
+      border-radius: 5px;
+      height: 30px;
+      width: 100%;
+      font-size: 14px;
+    }
+  }
+  .to-home-wrap2-circuit:hover {
+    color: #1890ff;
+    font-size: 30px;
+  }
+}
+.form-params-wrap::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+.form-params-wrap::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px #c4c4c4;
+  background: #dededea6;
+}
+.form-params-wrap::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+</style>
diff --git a/src/views/personal/device/profile/childDevice.vue b/src/views/personal/device/profile/childDevice.vue
index 4d318af9..203a388f 100644
--- a/src/views/personal/device/profile/childDevice.vue
+++ b/src/views/personal/device/profile/childDevice.vue
@@ -67,7 +67,7 @@
 </template>
 <script>
 import {
-  listOneselfDevide
+  listDevice
 } from "@/api/personal/device";
 import { listDeviceTypeList } from "@/api/tenant/device";
 const lineTypeOpt = {
@@ -128,7 +128,7 @@ export default {
     getList() {
       this.loading = true;
       this.queryParams.parentId = this.sourceId;
-      listOneselfDevide(this.queryParams).then(response => {
+      listDevice(this.queryParams).then(response => {
         this.deviceList = response.rows;
         this.total = response.total;
         this.loading = false;
diff --git a/src/views/profile/DeviceDetailsView/deviceSelectNav.vue b/src/views/profile/DeviceDetailsView/deviceSelectNav.vue
new file mode 100644
index 00000000..52529b42
--- /dev/null
+++ b/src/views/profile/DeviceDetailsView/deviceSelectNav.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="device-select-nav">
+    <el-card
+      :body-style="{ padding: '0px', width: '220px' }"
+      :style="
+        deviceInfo.deviceId === checkobxDeviceId
+          ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
+          : ' margin: 5px; width: 220px; flex-shrink: 0;'
+      "
+    >
+      <div class="nav-p-dev">
+        <!-- <el-radio
+          v-model="checkobxDeviceId"
+          style="margin-right: 10px"
+          :label="deviceInfo.deviceId"
+        >
+          {{
+            deviceInfo.deviceId === checkobxDeviceId ? "已选择" : "未选择"
+          }}</el-radio
+        > -->
+        <div
+          style="
+            height: 25px;
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+          "
+        >
+          <i
+            v-if="deviceInfo.deviceId === checkobxDeviceId"
+            class="el-icon-success"
+            style="
+              font-size: 25px;
+              color: #1890ff;
+              position: relative;
+              top: 5px;
+              z-index: 100;
+              right: 8px;
+            "
+          ></i>
+        </div>
+        <div class="dev-info">
+          <span class="dev-info-title" :title="deviceInfo.deviceName">{{
+            deviceInfo.deviceName
+          }}</span>
+          <div class="dev-info-state">
+            <el-tag type="success" v-if="deviceInfo.deviceState === 'ONLINE'"
+              >在线</el-tag
+            >
+            <el-tag
+              type="danger"
+              v-else-if="deviceInfo.deviceState === 'OFFLINE'"
+              >离线</el-tag
+            >
+            <el-tag
+              type="danger"
+              v-else-if="deviceInfo.deviceState === 'OUTLINE'"
+              >脱线</el-tag
+            >
+            <el-tag
+              type="info"
+              v-else-if="deviceInfo.deviceState === 'UNACTIVE'"
+              >未激活</el-tag
+            >
+            <el-button
+              type="primary"
+              size="mini"
+              @click="viewDeviceChange(deviceInfo.deviceId)"
+              >查看</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card
+      :body-style="{ padding: '0px', width: '220px' }"
+      :style="
+        item.deviceId === checkobxDeviceId
+          ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
+          : ' margin: 5px; width: 220px; flex-shrink: 0;'
+      "
+      v-for="item in childDeviceList"
+      :key="item.deviceId"
+    >
+      <div class="nav-c-dev">
+        <!-- <el-radio
+          v-model="checkobxDeviceId"
+          :label="item.deviceId"
+          style="margin-right: 10px"
+        >
+          {{ item.deviceId === checkobxDeviceId ? "已选择" : "未选择" }}
+        </el-radio> -->
+        <div
+          style="
+            height: 25px;
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+          "
+        >
+          <i
+            v-if="item.deviceId === checkobxDeviceId"
+            class="el-icon-success"
+            style="
+              font-size: 25px;
+              color: #1890ff;
+              position: relative;
+              top: 5px;
+              z-index: 100;
+              right: 8px;
+            "
+          ></i>
+        </div>
+        <div class="dev-info">
+          <span class="dev-info-title" :title="item.deviceName">{{
+            item.deviceName
+          }}</span>
+          <div class="dev-info-state">
+            <el-switch
+              size="mini"
+              v-model="item.switch"
+              active-text="开启"
+              disabled
+              inactive-text="关闭"
+              active-value="1"
+              inactive-value="0"
+              active-color="#13ce66"
+              inactive-color="#dcdfe6"
+              class="switch-wrap"
+            >
+            </el-switch>
+            <el-button
+              size="mini"
+              v-if="item.switch === '1'"
+              @click="submitChildStatus('false', item)"
+              type="success"
+              :disabled="item.deviceId !== checkobxDeviceId"
+              >关闭</el-button
+            >
+            <el-button
+              size="mini"
+              v-else-if="item.switch === '0'"
+              @click="submitChildStatus('true', item)"
+              type="danger"
+              :disabled="item.deviceId !== checkobxDeviceId"
+              >开启</el-button
+            >
+
+            <el-button
+              type="primary"
+              size="mini"
+              @click="viewDeviceChange(item.deviceId)"
+              >查看</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { listDevice, setSwitchControl } from "@/api/iot/device";
+import { iotWebSocketBaseUrl } from "@/config/env";
+export default {
+  name: "DeviceSelectNav",
+  props: {
+    deviceInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    wsDeviceInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      checkobxDeviceId: "",
+      childDeviceList: [],
+      stompClient: null,
+      socket_flag: true,
+      setTimeOut_flag: null,
+      // wsDeviceInfo: null?
+    };
+  },
+  created() {
+    this.checkobxDeviceId = this.deviceInfo.deviceId || null;
+  },
+  watch: {
+    wsDeviceInfo: {
+      handler: function () {
+        if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
+          // 更换设备 开启ws
+          this.connection();
+        }
+      },
+      deep: true,
+    },
+    deviceInfo: {
+      handler: function () {
+        this.checkobxDeviceId = this.deviceInfo.deviceId || null;
+        this.getList();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    // ws 获取子设备 状态
+    connection() {
+      if (this.stompClient) {
+        return;
+      }
+      if (!this.wsDeviceInfo) {
+        return;
+      }
+      if (!iotWebSocketBaseUrl) {
+        return;
+      }
+      let headers = {
+        clientid: this.wsDeviceInfo.wsClientId,
+        username: this.wsDeviceInfo.wsUsername,
+        sign: this.wsDeviceInfo.wsSign,
+      };
+      console.log("connection:--");
+      this.stompClient = new WebSocket(
+        `${iotWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`
+      );
+      this.stompClient.onopen = this.socket_open;
+      this.stompClient.onmessage = this.socket_onmsg;
+      this.stompClient.onclose = this.socket_onclose;
+    },
+    socket_open(evt) {
+      console.log("ws-open:", evt);
+    },
+    socket_onmsg(evt) {
+      this.handlerWsMsgData(JSON.parse(evt.data))
+    },
+    handlerWsMsgData(evt) {
+      console.log('msg:', evt)
+      for(let i =0; i < this.childDeviceList.length; i++) {
+        if (this.childDeviceList[i]['deviceKey'] === evt['devId']) {
+          this.childDeviceList[i]['switch'] = evt['params']['switch'].toString();
+          this.$forceUpdate()
+          break;
+        }
+      }
+    },
+    socket_onclose(e) {
+      console.log("socket_onclose:--", e, this.stompClient);
+      this.stompClient = null;
+      if (this.socket_flag) {
+        this.socket_flag = false;
+        let this_ = this;
+        this_.setTimeOut_flag = setTimeout(function () {
+          this_.socket_flag = true;
+          this_.connection();
+        }, 10000);
+      }
+    },
+    // 销毁事件
+    closeWebscoket() {
+      if (this.stompClient) {
+        this.stompClient.close();
+      }
+      this.socket_flag = false;
+      this.stompClient = null;
+      clearTimeout(this.setTimeOut_flag);
+    },
+    // 点击子设备 线路开关
+    submitChildStatus(type, row) {
+      this.$prompt("请输入登录密码", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /^[a-z A-z 0-9 $.]+/,
+        inputErrorMessage: "登录密码不能为空",
+      }).then(({ value }) => {
+        let params = {
+          data: {
+            params: {
+              switch: type === "true" ? 1 : 0,
+            },
+          },
+          deviceId: row.deviceId,
+          verifyKey: value,
+        };
+        console.log(params);
+        setSwitchControl(params).then((res) => {
+          console.log(res);
+          this.msgSuccess("修改成功");
+        });
+      });
+    },
+    // 勾选设备
+    viewDeviceChange(id) {
+      if (this.checkobxDeviceId !== id) {
+        this.checkobxDeviceId = id;
+        // 销毁当前ws
+        this.closeWebscoket();
+        if (this.deviceInfo.deviceId !== id) {
+          // 更换设备 开启ws
+          // this.connection()
+          // let resArr = this.childDeviceList.filter((item) => {
+          //   return item.deviceId === id
+          // })
+          // this.wsDeviceInfo = resArr.shift()
+          // this.connection()
+        }
+        this.$emit("changeEvent", { val: id });
+      }
+    },
+    /** 查询设备列表 */
+    getList() {
+      listDevice({
+        parentId: this.deviceInfo.deviceId,
+      }).then((response) => {
+        this.childDeviceList = response.rows;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.device-select-nav {
+  height: 130px;
+  width: 100%;
+  display: flex;
+  overflow-y: auto;
+  background-color: #e4eaf3;
+  .nav-p-dev {
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    // padding-top: 10px;
+    flex-shrink: 0;
+    .dev-info {
+      padding: 10px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      width: 100%;
+      .dev-info-title {
+        display: block;
+        width: 100%;
+        text-overflow: ellipsis;
+        height: 30px;
+        font-size: 18px;
+        line-height: 30px;
+        white-space: nowrap;
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .dev-info-state {
+        width: 100%;
+        height: 50px;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        justify-content: space-between;
+      }
+    }
+  }
+  .nav-c-dev {
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    // padding-top: 10px;
+    flex-shrink: 0;
+    .dev-info {
+      padding: 10px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      width: 100%;
+      .dev-info-title {
+        display: block;
+        width: 100%;
+        text-overflow: ellipsis;
+        height: 30px;
+        font-size: 18px;
+        line-height: 30px;
+        white-space: nowrap;
+        display: inline-block;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .dev-info-state {
+        width: 100%;
+        height: 50px;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+.device-select-nav::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+.device-select-nav::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  // box-shadow: inset 0 0 5px #c4c4c4;
+  background: #929292a6;
+}
+.device-select-nav::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  // -webkit-box-shadow:
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+</style>
diff --git a/src/views/profile/DeviceDetailsView/index.vue b/src/views/profile/DeviceDetailsView/index.vue
new file mode 100644
index 00000000..42cd6d73
--- /dev/null
+++ b/src/views/profile/DeviceDetailsView/index.vue
@@ -0,0 +1,868 @@
+<template>
+  <div class="iot-circuit-breaker-details-warp">
+     <device-select v-if="pInfo" :deviceInfo="pInfo" :wsDeviceInfo="infoData" @changeEvent="viewDeviceChange($event)"></device-select>
+    <div class="info-tabs-circuit">
+      <div class="breadcrumb-wrap" v-show="breadcrumbList.length > 1">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+            <span @click="deviceClick(item, index)" :class="item.deviceId === deviceId ? 'breadcrumb-span show-wrap' : 'breadcrumb-span'">{{item.deviceName}}</span>
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <el-tabs
+        v-model="activeName"
+        :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
+        type="border-card"
+      >
+        <el-tab-pane label="运行状态" name="runingState">
+          <div class="tabs-body protocol-wrap">
+            <state-management
+              v-if="devudeRunState"
+              :deviceInfo="infoData"
+            ></state-management>
+          </div>
+        </el-tab-pane>
+
+         <el-tab-pane label="设备信息" name="info">
+          <div class="tabs-body">
+            <info-wrap :infoData="infoData" @updateInfo="updateInfo($event)" />
+          </div>
+        </el-tab-pane>
+         <el-tab-pane label="触发器" name="trigger">
+          <div class="tabs-body protocol-wrap">
+            <trigger-wrap :sourceId="infoData.deviceId" :deviceInfo="infoData"></trigger-wrap>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+import { getDevice } from "@/api/iot/device";
+import InfoWrap from "./info";
+import StateManagement from "./stateManagement";
+import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
+import TriggerWrap from "@/views/profile/DeviceTrigger/index";
+import DeviceSelect from './deviceSelectNav'
+export default {
+  name: "DetailsWrap",
+  props: ["sourceId"],
+  components: {
+    InfoWrap,
+    StateManagement,
+    DeviceRunStartsWrap,
+    TriggerWrap,
+    DeviceSelect
+  },
+  data() {
+    return {
+      infoData: {},
+      pInfo: {},
+      activeName: "runingState",
+      breadcrumbList: [],
+      tempType: "bs",
+      deviceId: "",
+      devudeRunState: false
+    };
+  },
+  created() {
+    this.deviceId = this.sourceId;
+    this.deviceInfo();
+  },
+  methods: {
+    viewDeviceChange(row) {
+      this.deviceId = row.val;
+      this.deviceInfo(row.val === this.pInfo.deviceId ? null : 'children')
+      this.devudeRunState = false;
+    },
+    // 设备详情
+    deviceInfo(type) {
+      getDevice(this.deviceId).then(response => {
+        if (!type) {
+          this.pInfo = response.data;
+        }
+        this.infoData = response.data;
+        this.devudeRunState = true;
+      });
+    },
+    toNewDevice(data) {
+      this.tempType = "children";
+      this.deviceId = data.deviceId;
+      this.devudeRunState = false;
+      this.deviceInfo();
+      this.activeName = "runingState";
+    },
+    updateInfo(...data) {
+      this.deviceInfo();
+    }
+  }
+};
+</script>
+<style lang="scss">
+.iot-circuit-breaker-details-warp {
+  .breadcrumb-wrap {
+    position: absolute;
+    top: 15px;
+    z-index: 10;
+    left: 20px;
+    width: 90%;
+    overflow: hidden;
+    .breadcrumb-span:hover {
+      color: #1890ff;
+      cursor: default;
+    }
+    .show-wrap {
+      color: #1890ff;
+    }
+  }
+  .product-release-dialog {
+    .title-i {
+      font-size: 20px;
+      color: #9c9a9a;
+      line-height: 18px;
+    }
+    .i-color {
+      color: rgb(0, 193, 222);
+    }
+    .el-dialog__header {
+      border-bottom: 1px solid rgb(116, 115, 115);
+    }
+    .top-tigs {
+      background: #fbfbfc;
+      border: 1px solid #ecedee;
+      padding: 20px;
+      margin-bottom: 25px;
+      color: #999;
+    }
+    .form-bottom-prod-details {
+      margin-top: 40px;
+      height: 10px;
+      border-top: 1px solid rgb(116, 115, 115);
+      text-align: right;
+      width: 100%;
+      padding-top: 15px;
+      width: calc(100% + 20px);
+      .el-button {
+        margin-right: 10px;
+        margin-left: 0px;
+      }
+    }
+    .bottom-div {
+      height: 70px;
+      font-size: 12px;
+      border: 1px solid #ecedee;
+      margin: -1px;
+    }
+    .one-div {
+      width: 15%;
+      float: left;
+      border-right: 1px solid #ecedee;
+      height: 30px;
+      line-height: 30px;
+      /* padding-left: 10px; */
+      text-align: center;
+      font-size: 18px;
+
+      height: 70px;
+      line-height: 76px;
+      text-align: center;
+      font-size: 18px;
+    }
+    .two-div {
+      width: calc(100% - 36%);
+      float: left;
+      padding: 22px 10px 10px 10px;
+      font-size: 12px;
+    }
+    .there-div {
+      width: 10%;
+      float: left;
+      padding-top: 28px;
+    }
+    .four-div {
+      width: 5%;
+      float: left;
+      padding-top: 28px;
+    }
+  }
+  .heard {
+    padding: 20px 40px 0;
+    background-color: #fff;
+    height: 112px;
+    padding: 0px;
+  }
+  .info-title {
+    margin-top: 0px;
+    margin-bottom: 16px;
+    line-height: 29px;
+    overflow: hidden;
+    height: 30px;
+    .title {
+      float: left;
+      font-size: 20px;
+      margin: 0 8px 0 0;
+      line-height: 28px;
+    }
+    .el-button--small,
+    .el-button--small.is-round {
+      padding: 8px 15px;
+      float: right;
+    }
+  }
+  .info-icon {
+    margin-top: -70px;
+    float: left;
+    width: 101px;
+    border: 1px dotted rgb(205, 203, 203);
+    height: 101px;
+    .image {
+      width: 100px;
+      height: 100px;
+    }
+  }
+  .info-des {
+    font-size: 14px;
+    width: 100%;
+    float: left;
+    .info-row {
+      overflow: hidden;
+      display: block;
+      text-overflow: ellipsis;
+      line-height: 20px;
+      white-space: nowrap;
+      .label {
+        color: #aaa;
+      }
+      .centent {
+        color: #999;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .info-tabs-circuit {
+    position: relative;
+    box-sizing: border-box;
+    .el-tabs__content {
+      height: calc(100vh - 341px);
+      overflow: auto;
+    }
+    .el-tabs__header {
+      background-color: #fff;
+      position: relative;
+      //   top: -10px;
+      .el-tabs__nav-wrap {
+        margin-left: 0px;
+        .el-tabs__item {
+          font-size: 16px;
+        }
+      }
+    }
+    .el-tabs__nav-scroll {
+      height: 65px;
+      padding-top: 25px;
+      padding-left: 15px;
+      background: #e4eaf3;
+    }
+    .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+      background: #fff;
+      color: #333;
+      border: 0;
+    }
+    .el-tabs--border-card > .el-tabs__header .el-tabs__item {
+      // border-color: red;
+      color: #909399;
+      background: #d3deec;
+      border-radius: 8px 8px 0 0;
+      border-bottom: 0;
+      margin-left: 15px;
+    }
+    .tabs-body {
+      margin-left: 0px;
+      margin-right: 0px;
+      padding: 0px;
+      overflow: hidden;
+      background-color: #fff;
+      margin-bottom: 0px;
+    }
+    .protocol-wrap {
+      .el-tabs__nav-scroll {
+        height: auto;
+        padding-top: 0;
+        padding-left: 0;
+        background: #fff;
+      }
+    }
+  }
+  .children-wrap {
+    .el-tabs__header {
+      .el-tabs__nav-scroll {
+        height: 85px;
+        .el-tabs__nav {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+  .child-table {
+    margin-top: 25px;
+    // margin-left: 20px;
+    margin-right: 0px;
+    padding: 0px;
+    overflow: hidden;
+    background-color: #fff;
+  }
+}
+.product-release-dialog {
+  .title-i {
+    font-size: 20px;
+    color: #9c9a9a;
+    line-height: 18px;
+  }
+  .i-color {
+    color: rgb(0, 193, 222);
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .top-tigs {
+    background: #fbfbfc;
+    border: 1px solid #ecedee;
+    padding: 20px;
+    margin-bottom: 25px;
+    color: #999;
+  }
+  .form-bottom-prod-details {
+    margin-top: 15px;
+    height: 30px;
+    border-top: 1px solid #747373;
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+    width: calc(100% + 20px);
+    .el-button {
+      margin-right: 10px;
+      margin-left: 0px;
+    }
+  }
+  .bottom-div {
+    height: 70px;
+    font-size: 12px;
+    border: 1px solid #ecedee;
+    margin: 0px;
+  }
+  .one-div {
+    width: 15%;
+    float: left;
+    border-right: 1px solid #ecedee;
+    height: 30px;
+    line-height: 30px;
+    /* padding-left: 10px; */
+    text-align: center;
+    font-size: 18px;
+
+    height: 70px;
+    line-height: 76px;
+    text-align: center;
+    font-size: 18px;
+  }
+  .two-div {
+    width: calc(100% - 36%);
+    float: left;
+    padding: 22px 10px 10px 10px;
+    font-size: 12px;
+  }
+  .there-div {
+    width: 10%;
+    float: left;
+    padding-top: 28px;
+  }
+  .four-div {
+    width: 5%;
+    float: left;
+    padding-top: 28px;
+  }
+}
+.product-detail-info {
+  .el-textarea {
+    width: 92%;
+  }
+  .el-input {
+    width: 92%;
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .form-buttons-div {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+  }
+  .question-button.el-button--text {
+    padding-bottom: 0px;
+    color: rgb(204, 204, 204);
+    background: 0 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 18px;
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+  .el-form-item--mini.el-form-item,
+  .el-form-item--small.el-form-item {
+    margin-bottom: 10px;
+    margin-left: 60px;
+  }
+  .el-form--label-top .el-form-item__label {
+    padding: 0 0 9px;
+    margin-top: 10px;
+  }
+  .el-form-item--mini .el-form-item__content,
+  .el-form-item--mini .el-form-item__label {
+    line-height: 17px;
+  }
+  .avue-input-number,
+  .el-cascader,
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner,
+  .el-select {
+    width: 100%;
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-right: 20px;
+  }
+  .form-buttons-div {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+  }
+}
+.product-topic-dialog {
+  .top-tips {
+    height: 150px;
+    margin: 20px;
+    margin-top: 30px;
+    margin-right: 0px;
+    border: 1px solid #00c1df;
+    padding: 10px 10px 0;
+    background: #e6f9fc;
+    display: flex;
+    border-radius: 3px;
+    padding-left: 20px;
+    padding-top: 20px;
+    margin-bottom: 0px;
+  }
+  .el-form-item__error {
+    left: 80px;
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-right: 20px;
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .el-form--label-top .el-form-item__label {
+    padding-top: 23px;
+    padding-bottom: 0px;
+  }
+  .el-form-item {
+    margin-bottom: -17px;
+    width: 90%;
+  }
+  .el-form-item--mini .el-form-item__content,
+  .el-form-item--mini .el-form-item__label {
+    padding-left: 40px;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .form-buttonx-div {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+    width: calc(100% + 20px);
+    .el-button {
+      margin-right: 10px;
+      margin-left: 0px;
+    }
+  }
+  .funType-div {
+    // margin-left: 40px;
+  }
+}
+.product-fun-dialog {
+  .insert-div {
+    width: 100%;
+    margin-bottom: 10px;
+    padding-top: 10px;
+    padding-left: 30px;
+  }
+  .el-transfer-panel {
+    // margin-left: 10px;
+    width: 225px;
+  }
+  .el-transfer__buttons {
+    padding: 0px 10px;
+  }
+  .el-textarea {
+    width: 92%;
+  }
+  .el-input {
+    width: 92%;
+  }
+  .question-button.el-button--text {
+    padding-bottom: 0px;
+    color: rgb(204, 204, 204);
+    background: 0 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 18px;
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+  .fw {
+    .el-input--mini {
+      width: 155px;
+    }
+  }
+  .el-form-item__error {
+    left: 120px;
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-right: 20px;
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .el-form--label-top .el-form-item__label {
+    padding-top: 23px;
+    padding-bottom: 0px;
+  }
+  .el-form-item {
+    margin-bottom: -17px;
+    width: 92%;
+  }
+  .el-form-item--mini .el-form-item__content,
+  .el-form-item--mini .el-form-item__label {
+    padding-left: 40px;
+  }
+  .form-buttonb-div {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+    width: calc(100% + 20px);
+    .el-button {
+      margin-right: 10px;
+      margin-left: 0px;
+    }
+  }
+  .funType-div {
+    // margin-left: 40px;
+  }
+}
+.product-custom-fun {
+  .el-textarea {
+    width: 92%;
+  }
+  .el-input {
+    width: 92%;
+  }
+  .question-button.el-button--text {
+    padding-bottom: 0px;
+    color: rgb(204, 204, 204);
+    background: 0 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 18px;
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+  .fw {
+    .el-input--mini {
+      width: 155px;
+    }
+  }
+  .el-form-item__error {
+    left: 120px;
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-right: 20px;
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .el-form--label-top .el-form-item__label {
+    padding-top: 23px;
+    padding-bottom: 0px;
+  }
+  .el-form-item {
+    margin-bottom: -17px;
+    width: 92%;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-form-item--mini .el-form-item__content,
+  .el-form-item--mini .el-form-item__label {
+    padding-left: 40px;
+  }
+  .form-buttona-div {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+    width: calc(100% + 20px);
+    .el-button {
+      margin-right: 10px;
+      margin-left: 0px;
+    }
+  }
+  .funType-div {
+    // margin-left: 40px;
+  }
+}
+.product-prop-standard-dialog {
+  .insert-div {
+    width: 100%;
+    margin-bottom: 10px;
+    padding-top: 10px;
+    padding-left: 30px;
+  }
+  .el-transfer-panel {
+    // margin-left: 10px;
+    width: 225px;
+  }
+  .el-transfer__buttons {
+    padding: 0px 10px;
+  }
+  .el-textarea {
+    width: 92%;
+  }
+  .el-input {
+    width: 92%;
+  }
+  .question-button.el-button--text {
+    padding-bottom: 0px;
+    color: rgb(204, 204, 204);
+    background: 0 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 18px;
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+  .fw {
+    .el-input--mini {
+      width: 155px;
+    }
+  }
+  .el-form-item__error {
+    left: 120px;
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-right: 20px;
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .el-form--label-top .el-form-item__label {
+    padding-top: 23px;
+    padding-bottom: 0px;
+  }
+  .el-form-item {
+    margin-bottom: -17px;
+    width: 92%;
+  }
+  .el-form-item--mini .el-form-item__content,
+  .el-form-item--mini .el-form-item__label {
+    padding-left: 40px;
+  }
+  .form-buttonb-div {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+    width: calc(100% + 20px);
+    .el-button {
+      margin-right: 10px;
+      margin-left: 0px;
+    }
+  }
+  .funType-div {
+    // margin-left: 40px;
+  }
+}
+.product-prop-custom-dialog {
+  .el-textarea {
+    width: 92%;
+  }
+  .el-input {
+    width: 92%;
+  }
+  .question-button.el-button--text {
+    padding-bottom: 0px;
+    color: rgb(204, 204, 204);
+    background: 0 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 18px;
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+  .fw {
+    .el-input--mini {
+      width: 155px;
+    }
+  }
+  .el-form-item__error {
+    left: 120px;
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-right: 20px;
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .el-form--label-top .el-form-item__label {
+    padding-top: 23px;
+    padding-bottom: 0px;
+  }
+  .el-form-item {
+    margin-bottom: -17px;
+    width: 92%;
+  }
+  .el-form-item--mini .el-form-item__content,
+  .el-form-item--mini .el-form-item__label {
+    padding-left: 40px;
+  }
+  .form-buttona-div {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    width: 100%;
+    padding-top: 15px;
+    width: calc(100% + 20px);
+    .el-button {
+      margin-right: 10px;
+      margin-left: 0px;
+    }
+  }
+  .funType-div {
+    // margin-left: 40px;
+  }
+}
+
+.model-function-dialog {
+  .el-textarea {
+    width: 92%;
+  }
+  .el-input {
+    width: 92%;
+  }
+  .question-button.el-button--text {
+    padding-bottom: 0px;
+    color: rgb(204, 204, 204);
+    background: 0 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 18px;
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+  .fw {
+    .el-input--mini {
+      width: 155px;
+    }
+  }
+  .el-form-item__error {
+    left: 120px;
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-right: 20px;
+  }
+  .el-dialog__header {
+    border-bottom: 1px solid rgb(116, 115, 115);
+  }
+  .el-form--label-top .el-form-item__label {
+    padding-top: 23px;
+    padding-bottom: 0px;
+  }
+  .el-form-item {
+    margin-bottom: -17px;
+    width: 92%;
+  }
+  .el-form-item--mini .el-form-item__content,
+  .el-form-item--mini .el-form-item__label {
+    padding-left: 40px;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .form-bottom-prod-details {
+    margin-top: 30px;
+    height: 50px;
+    border-top: 1px solid rgb(116, 115, 115);
+    text-align: right;
+    padding-top: 15px;
+    width: calc(100% + 20px);
+    .el-button {
+      margin-right: 10px;
+      margin-left: 0px;
+    }
+  }
+  .funType-div {
+    // margin-left: 40px;
+  }
+}
+.sr {
+  .el-form-item {
+    margin-bottom: -17px;
+    width: 100%;
+  }
+}
+.iot-circuit-breaker-details-warp .info-tabs-circuit .el-tabs__content::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 3px;
+}
+.iot-circuit-breaker-details-warp
+  .info-tabs-circuit
+  .el-tabs__content::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px #9e9d9d;
+  background: #ffffff;
+}
+.iot-circuit-breaker-details-warp
+  .info-tabs-circuit
+  .el-tabs__content::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+</style>
diff --git a/src/views/profile/DeviceDetailsView/info.vue b/src/views/profile/DeviceDetailsView/info.vue
new file mode 100644
index 00000000..827a0ab8
--- /dev/null
+++ b/src/views/profile/DeviceDetailsView/info.vue
@@ -0,0 +1,467 @@
+<template>
+  <div class="product-details-info">
+    <div class="group-list-info">
+      <div class="top">
+        <div class="top-label">
+          <svg-icon icon-class="A_product1" style="margin-right: 2px; height: 20px; width: 20px;" />设备信息
+          <span
+            v-if="updateState === false"
+            style="margin: 0px 15px 0 10px; font-weight: 200; font-size: 14px;"
+          >设备名称：{{infoData.deviceName}}</span>
+          <span
+            v-if="updateState === true"
+            style="margin: 0px 5px 0 10px; font-weight: 200; font-size: 14px;"
+          >设备名称：</span>
+          <el-input v-if="updateState === true" v-model="temp.deviceName" />
+          <el-button
+            v-if="updateState === false"
+            type="text"
+            @click.stop="handleUpdate(infoData)"
+          >编辑</el-button>
+          <el-button v-if="updateState === true" type="text" @click.stop="submit">确定</el-button>
+        </div>
+        <!-- <div class="top-button">
+          <el-button type="primary" @click="download" size="small">下载本地模拟器</el-button>
+        </div>-->
+      </div>
+    </div>
+    <div class="group-list-table">
+      <div class="table-row">
+        <div class="table-row-col">
+          <div class="title">设备ID</div>
+          <div class="content">
+            <span class="name">{{infoData.deviceId}}</span>
+            <el-button type="text" size="small" @click.stop="copyTexts(infoData.deviceId)">复制</el-button>
+          </div>
+        </div>
+        <div class="table-row-col">
+          <div class="title">型号</div>
+          <div class="content">
+            <span class="group-id">{{infoData.modelName}}</span>
+          </div>
+        </div>
+        <div class="table-row-col">
+          <div class="title">设备密码</div>
+          <div class="content">
+            <!-- <span v-show="!showDevicePassword" class="centent">********</span> -->
+            <span
+              class="centent secret"
+              :title="infoData.devicePassword"
+            >{{infoData.devicePassword}}</span>
+            <el-button type="text" size="small" @click.stop="upldatePassword">修改密码</el-button>
+            <!-- <el-button
+              v-show="!showDevicePassword"
+              type="text"
+              size="small"
+              @click.stop="showDevicePassword = true"
+            >显示</el-button>
+            <el-button
+              v-show="showDevicePassword"
+              type="text"
+              size="small"
+              @click.stop="copyTexts(infoData.devicePassword)"
+            >复制</el-button>
+            <el-button
+              v-show="showDevicePassword"
+              type="text"
+              size="small"
+              @click.stop="showDevicePassword = false"
+            >隐藏</el-button>-->
+          </div>
+        </div>
+      </div>
+      <div class="table-row">
+        <div class="table-row-col">
+          <div class="title">产品PK</div>
+          <div class="content">
+            <span class="name">{{infoData.prodKey}}</span>
+            <el-button type="text" size="small" @click.stop="copyTexts(infoData.prodKey)">复制</el-button>
+          </div>
+        </div>
+
+        <div class="table-row-col">
+          <div class="title">设备KEY</div>
+          <div class="content">{{infoData.deviceKey }}</div>
+        </div>
+        <div class="table-row-col">
+          <div class="title">devSecret</div>
+          <div class="content">
+            <span v-show="!showProdSecret" class="centent">********</span>
+            <span
+              v-show="showProdSecret"
+              class="centent secret"
+              :title="infoData.deviceSecret"
+            >{{infoData.deviceSecret}}</span>
+            <el-button
+              v-show="!showProdSecret"
+              type="text"
+              size="small"
+              @click.stop="showProdSecret = true"
+            >显示</el-button>
+            <el-button
+              v-show="showProdSecret"
+              type="text"
+              size="small"
+              @click.stop="copyTexts(infoData.deviceSecret)"
+            >复制</el-button>
+            <el-button
+              v-show="showProdSecret"
+              type="text"
+              size="small"
+              @click.stop="showProdSecret = false"
+            >隐藏</el-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="table-row">
+        <div class="table-row-col">
+          <div class="title">设备类型</div>
+          <div class="content">{{infoData.deviceTypeName}}</div>
+        </div>
+        <div class="table-row-col">
+          <div class="title">当前状态</div>
+          <div class="content" v-if="infoData.deviceState === 'ONLINE'">在线</div>
+          <div class="content" v-else-if="infoData.deviceState === 'OFFLINE'">离线</div>
+          <div class="content" v-else-if="infoData.deviceState === 'OUTLINE'">脱线</div>
+          <div class="content" v-else-if="infoData.deviceState === 'UNACTIVE'">未激活</div>
+        </div>
+
+        <div class="table-row-col">
+          <div class="title">创建时间</div>
+          <div class="content">{{infoData.createTime || '--'}}</div>
+        </div>
+      </div>
+
+      <div class="table-row">
+        <div class="table-row-col" style="flex: 3 1 0%;">
+          <div class="title">设备图片</div>
+          <div class="content">--</div>
+        </div>
+      </div>
+    </div>
+    <!-- 添加或修改设备对话框 -->
+    <el-dialog
+      class="eldialog-wrap"
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="设备密码：" prop="devicePassword">
+          <el-input v-model="form.devicePassword" @input="inputI" placeholder="选填--设备密码" clearable />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
+        <el-button size="mini" @click="open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { updateDevice, resetPssword } from "@/api/iot/device";
+export default {
+  name: "DeviceInfo",
+  props: ["infoData"],
+  data() {
+    const validatorNull = (rule, value, callback) => {
+      callback();
+    };
+    return {
+      updateState: false,
+      prodtreeOptions: [],
+      modelList: [],
+      showProdSecret: false,
+      showDevicePassword: false,
+      temp: {
+        deviceName: "",
+        deviceId: undefined
+      },
+      rules: {
+        devicePassword: [
+          {
+            required: false,
+            validator: this.devicePassword,
+            trigger: "blur"
+          }
+        ]
+      },
+      form: {
+        devicePassword: ""
+      },
+      title: "",
+      open: false
+    };
+  },
+  methods: {
+    devicePassword(rule, value, callback) {
+      const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
+      if (this.form.devicePassword && !isExp.test(this.form.devicePassword)) {
+        callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
+      } else {
+        callback();
+      }
+    },
+    inputI() {
+      this.$forceUpdate();
+    },
+    // 修改设备密码 弹窗打开
+    upldatePassword() {
+      this.form.devicePassword = this.infoData.devicePassword;
+      this.form.deviceId = this.infoData.deviceId;
+      this.title = `修改设备--${this.infoData.deviceName} 密码：`;
+      this.open = true;
+    },
+    // 修改设备密码 提交
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          resetPssword(this.form).then(response => {
+            this.open = false;
+            if (response.code === 200) {
+              this.msgSuccess("修改成功");
+            }
+            this.$emit("updateInfo", {
+              deviceId: this.infoData.deviceId
+            });
+          });
+        }
+      });
+    },
+    copyTexts(val) {
+      this.copeFu(val, this);
+    },
+    // 设备修改只能修改名称
+    handleUpdate(row) {
+      this.newTemp();
+      this.temp = Object.assign({}, row);
+      this.updateState = true;
+    },
+    newTemp() {
+      this.temp = {
+        deviceName: "",
+        deviceId: undefined
+      };
+    },
+    // 下载本地模拟器 -- 暂未开放
+    download() {},
+    submit() {
+      if (this.temp.deviceName && this.temp.deviceId) {
+        updateDevice(this.temp).then(response => {
+          this.updateState = false;
+          if (response.code === 200) {
+            this.msgSuccess("修改成功");
+          }
+          this.$emit("updateInfo", {
+            deviceId: this.infoData.deviceId,
+            deviceName: this.infoData.deviceName
+          });
+        });
+      } else {
+        this.msgError("设备名称不能为空！");
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.product-details-info {
+  .group-list-info {
+    .top {
+      text-align: left;
+      width: 100%;
+      float: left;
+      height: 40px;
+      .top-label {
+        float: left;
+        width: calc(100% - 200px);
+        font-size: 16px;
+        font-weight: 700;
+        color: #373d41;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .el-input--medium {
+          width: 150px;
+        }
+        .el-button--text {
+          padding: 8px 12px;
+          color: #333;
+        }
+        .el-button--text:hover {
+          background-color: #d1dbe6;
+          border-radius: 0;
+          color: #1890ff;
+        }
+      }
+      .top-button {
+        float: left;
+        text-align: right;
+        width: 200px;
+      }
+    }
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 6px;
+    flex: 1;
+    .title {
+      line-height: 30px;
+      font-size: 16px;
+      font-weight: 700;
+      color: #373d41;
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+  }
+  .group-list-table {
+    border-top: 1px solid #d4d4d4;
+    border-left: 1px solid #d4d4d4;
+    .table-row {
+      display: flex;
+      width: 100%;
+      .table-row-col {
+        display: flex;
+        flex: 1 1 0%;
+        overflow: hidden;
+        font-size: 14px;
+        .title {
+          width: 180px;
+          height: 48px;
+          color: rgb(116, 119, 122);
+          display: flex;
+          align-items: center;
+          background: rgb(250, 250, 252);
+          border-bottom: 1px solid #d4d4d4;
+          border-right: 1px solid #d4d4d4;
+          padding: 0px 12px;
+          margin-bottom: 0px;
+          font-size: 15px;
+          font-weight: 100;
+        }
+        .content {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex: 1 1 0%;
+          overflow: hidden;
+          color: #666;
+          border-bottom: 1px solid #d4d4d4;
+          border-right: 1px solid #d4d4d4;
+          padding: 0px 12px;
+          .name {
+            display: inline-block;
+            max-width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            cursor: pointer;
+            overflow: hidden;
+          }
+          .group-id {
+            margin-right: 8px;
+          }
+          .notice-item {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 6px;
+            background: #d3d5d5;
+            margin-right: 3px;
+          }
+          .n {
+            background: #0fc18a;
+          }
+          .secret {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+  .eldaialog-wrap {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-radio {
+      width: 90px;
+    }
+    .el-dialog__body {
+      padding: 0px;
+    }
+    .cus-itme.el-form-item--mini .el-form-item__content {
+      margin-left: 0px !important;
+    }
+    .select {
+      // width: 92%;
+      display: inline-block;
+      width: calc(92% - 50px);
+      display: inline-block;
+      float: left;
+      margin-right: 4px;
+      .el-input {
+        width: 100%;
+      }
+    }
+    .el-textarea {
+      width: 92%;
+      width: calc(92% - 50px);
+      width: 100%;
+    }
+    .el-input {
+      width: 92%;
+      width: calc(92% - 50px);
+      width: 100%;
+    }
+    .info {
+      width: 100%;
+      float: left;
+      margin-bottom: 15px;
+      /* margin-top: 13px; */
+      margin-left: -10px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .span {
+      width: calc(100% - 91px);
+      display: block;
+      content: "";
+      height: 1px;
+      /* width: 100%; */
+      border-top: 1px dashed #ecedee;
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      margin-left: 80px;
+      margin-top: -10px;
+    }
+    .form-buttons-div {
+      height: 45px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 10px;
+      border-top: 1px solid #747373;
+    }
+  }
+
+  .group-dialog {
+    .el-dialog__header {
+      border-bottom: 1px solid #ccc;
+    }
+    .el-dialog__body {
+      padding: 28px;
+      .el-form-item {
+        margin-bottom: 0;
+        .el-form-item__label {
+          line-height: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/profile/DeviceDetailsView/stateManagement.vue b/src/views/profile/DeviceDetailsView/stateManagement.vue
new file mode 100644
index 00000000..c92aff7d
--- /dev/null
+++ b/src/views/profile/DeviceDetailsView/stateManagement.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="state-management-container">
+    <div>
+      <device-run-starts-wrap
+        :sourceId="deviceInfo.deviceId"
+        :deviceInfo="deviceInfo"
+        :prodId="deviceInfo.prodKey"
+      ></device-run-starts-wrap>
+    </div>
+  </div>
+</template>
+<script>
+import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
+import DeviceSelect from './deviceSelectNav'
+export default {
+  name: "StateManagement",
+  components: {
+    DeviceRunStartsWrap,
+    DeviceSelect
+  },
+  props: {
+    deviceInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  created() {
+  },
+  methods: {
+  },
+};
+</script>
diff --git a/src/views/profile/DeviceRunStarts/index.vue b/src/views/profile/DeviceRunStarts/index.vue
index 7c958a57..7f34df24 100644
--- a/src/views/profile/DeviceRunStarts/index.vue
+++ b/src/views/profile/DeviceRunStarts/index.vue
@@ -163,7 +163,12 @@ export default {
       });
     },
     closeWebscoket() {
+      if (this.stompClient) {
+        this.stompClient.close();
+      }
+      this.socket_flag = false;
       this.stompClient = null;
+      clearTimeout(this.setTimeOut_flag);
     }
   },
   destroyed() {
diff --git a/src/views/tenant/circuitBreaker/index.vue b/src/views/tenant/circuitBreaker/index.vue
new file mode 100644
index 00000000..157d270a
--- /dev/null
+++ b/src/views/tenant/circuitBreaker/index.vue
@@ -0,0 +1,802 @@
+<template>
+  <div class="app-container iot-device">
+    <component :is="componectVal" :sourceId="sourceId"></component>
+    <div v-show="componectVal === ''">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+
+        <el-form-item label="型号名称" prop="modelName">
+          <el-input
+            v-model="queryParams.modelName"
+            placeholder="请输入型号名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备名称" prop="deviceName">
+          <el-input
+            v-model="queryParams.deviceName"
+            placeholder="请输入设备名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="设备状态" prop="deviceState">
+          <el-select
+            v-model="queryParams.deviceState"
+            placeholder="请选择设备状态"
+            @change="handleQuery"
+            clearable
+            size="small"
+          >
+            <el-option
+              :label="keys"
+              v-for="(keys, vals) in deviceStatusOpt"
+              :key="vals"
+              :value="vals"
+            />
+          </el-select>
+        </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-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['iot:device:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+          >导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table
+        v-loading="loading"
+        :data="deviceList"
+        :default-sort="{prop: 'createTime', order: 'descending'}"
+        @sort-change="sortChange"
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="indexFormatter"
+          width="80px"
+        ></el-table-column>
+        <el-table-column label="设备名称" align="left" prop="deviceName" />
+        <el-table-column label="所属型号" align="left" prop="modelName" />
+        <el-table-column label="设备key" align="left" prop="deviceKey" />
+        <el-table-column label="设备类型" align="left" width="120px" prop="deviceTypeName" />
+        <el-table-column label="设备状态" align="center" width="120" prop="deviceState">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="scope.row.deviceState === 'ONLINE'">在线</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</el-tag>
+            <el-tag type="info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          sortable="custom"
+          width="160px"
+          prop="createTime"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          width="200px"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-search"
+              @click="handleDetails(scope.row)"
+            >详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <div class="to-home-wrap2-circuit" @click="toTableClick" v-show="componectVal !== ''">
+      <el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  listDevice,
+  getDevice,
+  delDevice,
+  addDevice,
+  updateDevice,
+  exportDevice,
+  listDeviceTypeList
+} from "@/api/iot/device";
+import { listModel, getModel } from "@/api/iot/model";
+import SelectTableWrap from "@/components/SelectTable/index";
+import DetailsWrap from "@/views/profile/DeviceDetailsView/index";
+import ParamWrap from "@/components/ParamWrap/deviceParam";
+const deviceStatusOpt = {
+  ONLINE: "在线",
+  OFFLINE: "离线",
+  OUTLINE: "脱线",
+  UNACTIVE: "未激活"
+};
+const lineTypeOpt = {
+  MAIN: "总路",
+  BRANCH: "支路"
+};
+
+export default {
+  name: "circuitBreaker",
+  components: {
+    SelectTableWrap,
+    DetailsWrap,
+    ParamWrap
+  },
+  data() {
+    return {
+      deviceStatusOpt,
+      lineTypeOpt,
+      sourceId: "",
+      componectVal: "",
+      selectTableShow: false,
+      tableSelectOption: {},
+      selectResult: {},
+      queryModelOpt: [],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        modelId: null,
+        parentId: null,
+        deviceName: null,
+        deviceState: null,
+        deviceType: null,
+        modelName: null,
+        orderByColumn: "createTime",
+        isAsc: "desc",
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        modelId: [
+          { required: true, message: "所属型号不能为空", trigger: "blur" }
+        ],
+        deviceType: [
+          { required: true, message: "设备类型不能为空", trigger: "blur" }
+        ],
+        parentId: [
+          { required: true, message: "父设备不能为空", trigger: "blur" }
+        ],
+        deviceName: [
+          { required: true, message: "设备名称不能为空", trigger: "blur" }
+        ],
+        lineType: [
+          { required: true, message: "线路类型不能为空", trigger: "blur" }
+        ],
+        deviceKey: [
+          {
+            required: true,
+            validator: this.chenking_deviceKey,
+            trigger: "blur"
+          }
+        ]
+      },
+      deviceTypeList: {}
+    };
+  },
+  created() {
+    this.getDeviceTypeList();
+    this.initGetModelList();
+    this.getList();
+  },
+  methods: {
+    sortChange(column) {
+      const sort = {
+        isAsc: column.order === "descending" ? "desc" : "asc",
+        orderByColumn: column.prop
+      };
+      this.queryParams = Object.assign(this.queryParams, sort);
+      this.handleQuery();
+    },
+    indexFormatter(val) {
+      return (
+        val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
+      );
+    },
+    handleDetails(row) {
+      this.sourceId = row.deviceId;
+      this.componectVal = "DetailsWrap";
+    },
+    // 跳转详情页
+    toTableClick() {
+      this.componectVal = "";
+    },
+    // 打开厂商选择窗口 ——表格
+    openModelTableSelectDialog() {
+      this.selectResult = {};
+      this.tableSelectOption = {
+        otherOption: {
+          tableType: "model"
+        },
+        queryOpt: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            protocolType: "",
+            modelName: ""
+          },
+          page: {
+            pageSize: 10,
+            pageNum: 1,
+            total: 0
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "型号名称",
+              clearable: true,
+              label: "型号名称",
+              type: "input",
+              key: "modelName",
+              size: "small",
+              value: ""
+            },
+            {
+              style: "",
+              placeholder: "协议类型",
+              clearable: true,
+              label: "协议类型",
+              type: "select",
+              key: "protocolType",
+              size: "small",
+              value: "",
+              options: [
+                {
+                  key: "IOTOS",
+                  label: "iot平台",
+                  value: "IOTOS"
+                },
+                {
+                  key: "ONENET",
+                  label: "ONENET",
+                  value: "ONENET"
+                }
+              ],
+              optionKey: {
+                key: "key",
+                label: "label",
+                value: "value"
+              }
+            }
+          ]
+        },
+        tableOpt: {
+          loading: false,
+          rowKey: "deviceId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "厂商名称",
+              type: "",
+              prop: "vendorName",
+              align: "left",
+              width: "200",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "型号名称",
+              type: "",
+              prop: "modelName",
+              align: "left",
+              width: "200",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备类型",
+              type: "",
+              prop: "deviceTypeName",
+              align: "left",
+              width: "120",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "产品PK",
+              type: "",
+              prop: "prodKey",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "产品密钥",
+              type: "",
+              prop: "prodSecret",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            }
+          ],
+          tableList: {
+            type: Array
+          }
+        },
+        tableList: []
+      };
+      this.selectTableShow = true;
+    },
+    // 打开设备选择窗口 ——表格
+    openTableSelectDialog() {
+      this.selectResult = {};
+      this.tableSelectOption = {
+        otherOption: {
+          tableType: "device"
+        },
+        queryOpt: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            deviceName: "",
+            modelId: "",
+            parentId: 0,
+            deviceType: "GATEWAY_CONTROLLER"
+          },
+          page: {
+            pageSize: 10,
+            pageNum: 1,
+            total: 0
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "设备名称",
+              clearable: true,
+              label: "设备名称",
+              type: "input",
+              key: "deviceName",
+              size: "small",
+              value: ""
+            }
+          ]
+        },
+        tableOpt: {
+          loading: false,
+          rowKey: "deviceId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "所属型号",
+              type: "",
+              prop: "modelName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备名称",
+              type: "",
+              prop: "deviceName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "设备Key",
+              type: "",
+              prop: "deviceKey",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            },
+            {
+              style: "",
+              label: "创建时间",
+              type: "time",
+              prop: "createTime",
+              align: "center",
+              width: "160",
+              "show-overflow-tooltip": false,
+              tempType: "span"
+            }
+          ],
+          tableList: {
+            type: Array
+          }
+        },
+        tableList: []
+      };
+      this.selectTableShow = true;
+    },
+    // 查询回调
+    childGetList(data) {
+      if (data.otherOption.tableType === "device") {
+        this.deviceChildList(data);
+      } else if (data.otherOption.tableType === "model") {
+        this.modelChildList(data);
+      }
+    },
+    initGetModelList() {
+      listModel({
+        pageNum: 1,
+        pageSize: 99999
+      }).then(response => {
+        this.queryModelOpt = response.rows;
+      });
+    },
+    modelChildList(data) {
+      listModel(Object.assign(data.page, data.param, { selected: 1 })).then(
+        response => {
+          this.tableSelectOption.tableList = response.rows;
+          this.tableSelectOption.queryOpt.page.total = Number(response.total);
+        }
+      );
+    },
+    deviceChildList(data) {
+      listDevice(Object.assign(data.page, data.param, { selected: 1 })).then(
+        response => {
+          this.tableSelectOption.tableList = response.rows;
+          this.tableSelectOption.queryOpt.page.total = Number(response.total);
+        }
+      );
+    },
+    // 根据 型号id 获取 型号详情
+    getModelInfoById(modelId) {
+      getModel(modelId).then(res => {
+        this.$refs.paramWrap.setList(res.data.paramList || []);
+      });
+    },
+    // 点击或者双击数据回调
+    returnEvent(data) {
+      if (data.type === "dblclick") {
+        if (data.otherOption.tableType === "device") {
+          this.form.parentId = data.value.deviceId;
+          this.form.parentName = data.value.deviceName;
+        } else if (data.otherOption.tableType === "model") {
+          this.getModelInfoById(data.value.modelId);
+          this.form.modelId = data.value.modelId;
+          this.form.modelName = data.value.modelName;
+          this.form.deviceType = data.value.deviceType;
+          this.form.prodKey = data.value.prodKey;
+          this.deviceTypeChange(this.form.deviceType);
+        }
+        this.selectTableShow = false;
+      } else if (data.type === "click") {
+        this.selectResult = {};
+        if (data.otherOption.tableType === "device") {
+          this.selectResult.parentId = data.value.deviceId;
+          this.selectResult.parentName = data.value.deviceName;
+        } else if (data.otherOption.tableType === "model") {
+          this.selectResult.modelId = data.value.modelId;
+          this.selectResult.modelName = data.value.modelName;
+          this.selectResult.deviceType = data.value.deviceType;
+          // this.selectResult.paramList = data.value.paramList;
+          this.selectResult.prodKey = data.value.prodKey;
+        }
+        this.selectResult.tableType = data.otherOption.tableType;
+      }
+    },
+    // 点击确定按钮
+    resuleClick() {
+      if (this.selectResult.tableType === "device") {
+        this.form.parentId = this.selectResult.parentId;
+        this.form.parentName = this.selectResult.parentName;
+      } else if (this.selectResult.tableType === "model") {
+        this.form.modelId = this.selectResult.modelId;
+        this.form.prodKey = this.selectResult.prodKey;
+        this.form.modelName = this.selectResult.modelName;
+        this.form.deviceType = this.selectResult.deviceType;
+        this.deviceTypeChange(this.form.deviceType);
+        this.getModelInfoById(this.selectResult.modelId);
+        // this.$refs.paramWrap.setList(this.selectResult.paramList || []);
+      }
+      this.selectTableShow = false;
+    },
+    deviceTypeChange(val) {
+      if (val !== "MINIATURE_BREAKER") {
+        this.form.parentId = 0;
+        this.form.parentName = "";
+      } else if (!val) {
+        this.form.parentId = "";
+        this.form.parentName = "";
+      }
+    },
+    // 查询设备类型列表
+    getDeviceTypeList() {
+      listDeviceTypeList().then(response => {
+        this.deviceTypeList = response.data;
+      });
+    },
+    /** 查询设备列表 */
+    getList() {
+      this.loading = true;
+      listDevice(Object.assign(this.queryParams , {
+        deviceType: 'GATEWAY_CONTROLLER'
+      })).then(response => {
+        this.deviceList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        modelId: null,
+        modelName: "",
+        parentName: "",
+        parentId: null,
+        deviceName: null,
+        deviceType: null,
+        paramList: [],
+        deviceKey: "",
+        lineType: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加设备";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const deviceId = row.deviceId || this.ids;
+      const _this = this;
+      getDevice(deviceId).then(response => {
+        _this.form = response.data;
+        _this.open = true;
+        _this.title = "修改设备";
+        setTimeout(() => {
+          _this.$refs.paramWrap.setList(response.data.paramList || []);
+        }, 100);
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.form.paramList = this.$refs.paramWrap.getResult();
+          this.form.lineType =
+            this.form.deviceType === "MINIATURE_BREAKER"
+              ? this.form.lineType
+              : undefined;
+          if (this.form.deviceId != null) {
+            updateDevice(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDevice(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const deviceIds = row.deviceId || this.ids;
+      this.$confirm("是否删除该选项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(function() {
+          return delDevice(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有设备数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(function() {
+          return exportDevice(queryParams);
+        })
+        .then(response => {
+          this.download(response.msg);
+        });
+    },
+    chenking_deviceKey(rule, value, callback) {
+      const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
+      if (this.form.deviceKey && !isExp.test(this.form.deviceKey)) {
+        callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
+      } else {
+        callback();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.iot-device {
+  .eldialog-wrap {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-dialog__body {
+      padding: 0px;
+    }
+    .el-form {
+      padding: 20px;
+      padding-right: 40px;
+    }
+    .el-dialog__footer {
+      height: 60px;
+      border-top: 1px solid #747373;
+      text-align: right;
+      width: 100%;
+      padding: 0px;
+      padding-top: 15px;
+      .el-button + .el-button {
+        margin-right: 10px;
+      }
+      .el-button {
+        padding-top: 8px;
+      }
+    }
+    .form-params-wrap {
+      height: 100%;
+      width: calc(100% + 110px);
+      position: relative;
+      top: 15px;
+      left: -90px;
+      max-height: 250px;
+      overflow: auto;
+      padding: 10px;
+      border: 1px solid #009688;
+      border-radius: 5px;
+    }
+  }
+  .to-home-wrap2-circuit {
+    width: 100px;
+    height: 30px;
+    position: absolute;
+    right: 30px;
+    top: 170px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    color: #656363;
+    font-size: 20px;
+    cursor: default;
+    .el-button--medium.is-circle {
+      width: 25px;
+      height: 20px;
+      padding: 0;
+      background: #f26a6a;
+      color: #fff;
+      font-size: 16px;
+      border-radius: 5px;
+      height: 30px;
+      width: 100%;
+      font-size: 14px;
+    }
+  }
+  .to-home-wrap2-circuit:hover {
+    color: #1890ff;
+    font-size: 30px;
+  }
+}
+.form-params-wrap::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+.form-params-wrap::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px #c4c4c4;
+  background: #dededea6;
+}
+.form-params-wrap::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px #f6f6f6;
+  border-radius: 10px;
+  background: #ffffff;
+}
+</style>