fix: 优化monaco-editor编辑；修改我的订阅；修复运维管理仪表盘在暂无数据情况下切换导致无数据展示问题

* fix: 优化菜单跳转 * fix: 优化菜单跳转 * fix: bug#16693 * feat: task#2572 * fix: 优化物模型映射保存请求异常 * fix: 修复运维管理仪表盘在暂无数据情况下切换导致无数据展示问题 * fix: 修改订阅管理文字提示 * fix: totalFlow * fix: 修改我的订阅 * fix: 优化monaco-editor编辑
2023-07-26 10:09:06 +08:00 · 2023-07-26 10:09:06 +08:00 · 49cf7c5594
parent 143144a64e
commit 49cf7c5594
37 changed files with 777 additions and 466 deletions
--- a/package.json
+++ b/package.json
@ -25,7 +25,7 @@
    "event-source-polyfill": "^1.0.31",
    "global": "^4.4.0",
    "jetlinks-store": "^0.0.3",
-    "jetlinks-ui-components": "^1.0.26",
+    "jetlinks-ui-components": "^1.0.27",
    "js-cookie": "^3.0.1",
    "jsencrypt": "^3.3.2",
    "less": "^4.1.3",
--- a/src/App.vue
+++ b/src/App.vue
@ -1,10 +1,5 @@
 <template>
  <ConfigProvider :locale='zhCN'>
-<!--    <router-view v-slot="{ Component }">-->
-<!--      <keep-alive>-->
-<!--        <component :is="Component" />-->
-<!--      </keep-alive>-->
-<!--    </router-view>-->
    <router-view />
  </ConfigProvider>
 </template>
--- a/src/api/data-collect/collector.ts
+++ b/src/api/data-collect/collector.ts
@ -3,6 +3,9 @@ import server from '@/utils/request';
 export const queryCollector = (data: any) =>
    server.post(`/data-collect/collector/_query/no-paging?paging=false`, data);

+export const queryCollectorTree = (data: any) =>
+    server.post(`/data-collect/collector/_detail/no-paging?paging=false`, data);
+
 export const queryChannelNoPaging = () =>
    server.post(`/data-collect/channel/_query/no-paging`, {
        paging: false,
--- a/src/components/Layout/BasicLayoutPage.vue
+++ b/src/components/Layout/BasicLayoutPage.vue
@ -1,12 +1,12 @@
 <template>
    <j-pro-layout
        v-bind="layoutConf"
-        v-model:openKeys="state.openKeys"
-        v-model:collapsed="state.collapsed"
-        v-model:selectedKeys="state.selectedKeys"
+        v-model:collapsed="basicLayout.collapsed"
+        v-model:openKeys="basicLayout.openKeys"
+        :selectedKeys="basicLayout.selectedKeys"
        :headerHeight='layout.headerHeight'
-        :pure="state.pure"
-        :breadcrumb="{ routes: breadcrumb }"
+        :breadcrumb="{ routes: breadcrumbs }"
+        :pure="basicLayout.pure"
        @backClick='routerBack'
    >
        <template #breadcrumbRender="slotProps">
@ -26,7 +26,7 @@
            </div>
        </template>
      <router-view v-slot="{ Component }">
-            <component :is="Component" />
+        <component :is="components || Component" />
      </router-view>
    </j-pro-layout>
 </template>
@ -54,14 +54,14 @@ const route = useRoute();
 const menu = useMenuStore();

 const system = useSystem();
-const {configInfo,layout} = storeToRefs(system);
+const {configInfo,layout, basicLayout} = storeToRefs(system);

 const layoutConf = reactive({
    theme: DefaultSetting.layout.theme,
    siderWidth: layout.value.siderWidth,
    logo: DefaultSetting.layout.logo,
    title: DefaultSetting.layout.title,
-    menuData: [...clearMenuItem(menu.siderMenus), AccountMenu],
+    menuData: [...menu.siderMenus, AccountMenu],
    // menuData: menu.siderMenus,
    splitMenus: true,
 });
@ -72,87 +72,51 @@ watchEffect(() => {
    layoutConf.logo = configInfo.value.front?.logo || DefaultSetting.layout.logo;
 })

-const state = reactive<StateType>({
-    pure: false,
-    collapsed: false, // default value
-    openKeys: [],
-    selectedKeys: [],
-});
+const components = computed(() => {
+  const componentName = route.matched[route.matched.length - 1]?.components?.default?.name
+  if (componentName !== 'BasicLayoutPage') {
+    return route.matched[route.matched.length - 1]?.components?.default
+  }
+  return undefined
+})
+
+/**
+ * 面包屑
+ */
+const breadcrumbs = computed(() =>
+    {
+      const paths = router.currentRoute.value.matched
+
+      return paths.map((item, index) => {
+        return {
+          index,
+          isLast: index === (paths.length -1),
+          path: item.path,
+          breadcrumbName: (item.meta as any).title || '',
+        }
+      })
+    }
+);

 const routerBack = () => {
  router.go(-1)
 }

-const findRouteMeta = (code: string) => {
-  let meta = []
-  let menuItem: any = menu.menus[code]
-  while (menuItem) {
-    meta.unshift(menuItem)
-    if (menuItem.parentName) {
-      menuItem = menu.menus[menuItem.parentName]
-    } else {
-      menuItem = false
-    }
-  }
-  return meta
-}

 const jump = (item: any) => {
-  let path = history.state.back
-  if (path) {
-    // 包含query参数,清除？参数
-    if (path.includes('?')) {
-      const _path = path.split('?')[0]
-      path = _path === item.path ? path : item.path
-    } else if (path !== item.path) {
-      path = item.path
-    }
-  } else {
-    path = item.path
-  }
-
-  // jumpPage(slotProps.route.path)
-  router.push(path)
+  router.push(item.path)
 }

-const breadcrumb = computed(() =>
-  {
-    const paths = router.currentRoute.value.name as string

-    const metas = findRouteMeta(paths)
-    return metas.map((item, index) => {
-      return {
-        index,
-        isLast: index === (metas.length - 1),
-        path: item.path,
-        breadcrumbName: item.title || '',
-      };
-    })
-  }
-);

 watchEffect(() => {
  if (router.currentRoute) {
-      const paths = router.currentRoute.value.name as string
-      if (paths) {
-        const _metas = findRouteMeta(paths)
-        state.selectedKeys = _metas.map(item => item.path)
-        state.openKeys = _metas.filter((r) => r !== router.currentRoute.value.path).map(item => item.path)
+    const paths = router.currentRoute.value.matched
+    basicLayout.value.selectedKeys = paths.map(item => item.path)
+    basicLayout.value.openKeys = paths.map(item => item.path)
+    console.log(paths) //
  }
-    }
-});
-
-watchEffect(() => {
-    if (
-        route.query &&
-        'layout' in route.query &&
-        route.query.layout === 'false'
-    ) {
-        state.pure = true;
-    } else {
-        state.pure = false;
-    }
-});
+})

 const toDoc = () => window.open('http://doc.v2.jetlinks.cn/');
 </script>
--- a/src/components/Layout/BlankLayoutPage.vue
+++ b/src/components/Layout/BlankLayoutPage.vue
@ -1,11 +1,21 @@
 <template>
-  <router-view />
+  <router-view v-slot="Component">
+    <component :is="components || Component" />
+  </router-view>
 </template>

-<script>
-export default {
-  name: 'BlankLayoutPage'
-}
+<script name="BlankLayoutPage" setup>
+
+const route = useRoute()
+
+const components = computed(() => {
+  const componentName = route.matched[route.matched.length - 1]?.components?.default?.name
+  if (componentName !== 'BlankLayoutPage') {
+    return route.matched[route.matched.length - 1]?.components?.default
+  }
+  return undefined
+})
+
 </script>

 <style scoped>
--- a/src/store/menu.ts
+++ b/src/store/menu.ts
@ -1,6 +1,11 @@
 import { defineStore } from 'pinia'
 import { queryOwnThree } from '@/api/system/menu'
-import {filterAsyncRouter, filterCommunityMenus, findCodeRoute, MenuItem} from '@/utils/menu'
+import {
+  handleMenus,
+  MenuItem,
+  handleSiderMenu,
+  getAsyncRoutesMap, handleMenusMap
+} from '@/utils/menu'
 import { cloneDeep, isArray } from 'lodash-es'
 import { usePermissionStore } from './permission'
 import router from '@/router'
@ -32,14 +37,7 @@ const defaultOwnParams = [
 ]

 type MenuStateType = {
-  menus: {
-    [key: string]: {
-      buttons?: string[]
-      title: string
-      parentName: string
-      path: string
-    }
-  }
+  menus: any
  siderMenus: MenuItem[]
  params: Record<string, any>
 }
@ -96,6 +94,10 @@ export const useMenuStore = defineStore({
          name, params, query, state: { params }
        })
    },
+    handleMenusMapById(item: { code: string, path: string}) {
+      const { name, path } = item
+      this.menus[name] = {path}
+    },
    queryMenuTree(isCommunity = false): Promise<any[]> {
      return new Promise(async (res) => {
        //过滤非集成的菜单
@ -106,18 +108,12 @@ export const useMenuStore = defineStore({
          // if (!isNoCommunity) {
          //   resultData = filterCommunityMenus(resultData)
          // }
-          permission.permissions = {}
-          const { menusData, silderMenus } = filterAsyncRouter(resultData)
-
-
-          this.menus = findCodeRoute([...resultData]) // AccountMenu
-          Object.keys(this.menus).forEach((item) => {
-            const _item = this.menus[item]
-            if (_item.buttons?.length) {
-              permission.permissions[item] = _item.buttons
-            }
-          })
-
+          const components = getAsyncRoutesMap()
+          const menusData = handleMenus(cloneDeep(resultData), components)
+          permission.handlePermission(resultData)
+          const silderMenus = handleSiderMenu(cloneDeep(resultData))
+          // const { menusData, silderMenus } = filterAsyncRouter(resultData)
+          handleMenusMap(cloneDeep(menusData), this.handleMenusMapById)
          menusData.push({
            path: '/',
            redirect: menusData[0]?.path,
@ -125,6 +121,7 @@ export const useMenuStore = defineStore({
              hideInMenu: true
            }
          })
+          // console.log(menusData)
          // menusData.push(AccountMenu)
          this.siderMenus = silderMenus.filter((item: { name: string }) => ![USER_CENTER_MENU_CODE, NotificationRecordCode, NotificationSubscriptionCode].includes(item.name))
          res(menusData)
--- a/src/store/permission.ts
+++ b/src/store/permission.ts
@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import {handleAuthMenu} from "@/utils/menu";

 export const usePermissionStore = defineStore({
  id: 'permission',
@ -39,5 +40,17 @@ export const usePermissionStore = defineStore({
        return false
      }
    }
+  },
+  actions: {
+    setPermission(code: string, buttons: string[]) {
+      this.permissions[code] = buttons
+    },
+    cleanPermission() {
+      this.permissions = {}
+    },
+    handlePermission(data: any) {
+      this.cleanPermission()
+      handleAuthMenu(data, this.setPermission)
+    }
  }
 })
--- a/src/store/system.ts
+++ b/src/store/system.ts
@ -13,6 +13,12 @@ type SystemStateType = {
        siderWidth: string | number | undefined; // 左侧菜单栏宽度
        headerHeight: string | number | undefined; // 头部高度
        collapsedWidth: string | number | undefined;
+    },
+    basicLayout: {
+        selectedKeys: string[],
+        openKeys: string[],
+        collapsed: boolean
+        pure: boolean
    }
 }

@ -25,6 +31,12 @@ export const useSystem = defineStore('system', {
            siderWidth: 208, // 左侧菜单栏宽度
            headerHeight: 60, // 头部高度
            collapsedWidth: 48,
+        },
+        basicLayout: {
+            selectedKeys: [],
+            openKeys: [],
+            collapsed: false,
+            pure: false
        }
    }),
    actions: {
--- a/src/utils/menu.ts
+++ b/src/utils/menu.ts
@ -1,6 +1,6 @@
-import { cloneDeep } from 'lodash-es'
 import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
 import { isNoCommunity } from '@/utils/utils'
+import Iframe from '../views/iframe/index.vue'

 const pagesComponent = import.meta.glob('../views/**/*.vue');

@ -155,185 +155,363 @@ const extraRouteObj = {
  }
 };

+//
+// const resolveComponent = (name: any) => {
+//   const importPage = pagesComponent[`../views/${name}/index.vue`];
+//   console.log(importPage)
+//   if (!importPage) {
+//     return undefined
+//   } else {
+//     const res = () => importPage()
+//     return res
+//   }
+//   //@ts-ignore
+// }
+//
+// const findChildrenRoute = (code: string, url: string, routes: any[] = []): MenuItem[] => {
+//   if (extraRouteObj[code]) {
+//     const extraRoutes = extraRouteObj[code].children.map((route: MenuItem) => {
+//       return {
+//         url: `${url}/${route.code}`,
+//         code: `${code}/${route.code}`,
+//         name: route.name,
+//         isShow: false
+//       }
+//     })
+//     return [...routes, ...extraRoutes]
+//   }
+//   return routes
+// }
+//
+// const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
+//   const detailComponent = resolveComponent(`${code}/Detail`)
+//   if (detailComponent) {
+//     return {
+//       url: `${url}/detail/:id`,
+//       code: `${code}/Detail`,
+//       component: detailComponent,
+//       name: '详情信息',
+//       isShow: false
+//     }
+//   }
+//   return null
+// }
+//
+// const findDetailRoutes = (routes: any[]): any[] => {
+//   const newRoutes: any[] = []
+//   routes.forEach((route: any) => {
+//     newRoutes.push(route)
+//     const detail = findDetailRouteItem(route.code, route.url)
+//     if (detail) {
+//       newRoutes.push(detail)
+//     }
+//   })
+//   return newRoutes
+// }
+//
+// const filterMenus = ['device/DashBoard']
+// export const filterCommunityMenus = (menuData: any[]) => {
+//   return menuData.filter(item => {
+//     if (item.children) {
+//       item.children = filterCommunityMenus(item.children)
+//     }
+//     return !filterMenus.includes(item.code)
+//   })
+// }
+//
+// export const findCodeRoute = (asyncRouterMap: any[]) => {
+//   const routeMeta = {}
+//
+//   function getDetail(code: string, url: string) {
+//     const detail = findDetailRouteItem(code, url)
+//     if (!detail) return
+//
+//     routeMeta[(detail as MenuItem).code] = {
+//       path: detail.url,
+//       title: detail.name,
+//       parentName: code,
+//       buttons: detail.buttons?.map((b: any) => b.id) || []
+//     }
+//   }
+//
+//   function findChildren(data: any[], code: string = '') {
+//     data.forEach(route => {
+//       routeMeta[route.code] = {
+//         path: route.url || route.path,
+//         title: route.meta?.title || route.name,
+//         parentName: code,
+//         buttons: route.buttons?.map((b: any) => b.id) || []
+//       }
+//       const otherRoutes = extraRouteObj[route.code]
+//
+//       if (otherRoutes) {
+//         otherRoutes.children.map((item: any) => {
+//           const _code = `${route.code}/${item.code}`
+//           const url = `${route.url}/${item.code}`
+//           routeMeta[_code] = {
+//             path: `${route.url}/${item.code}`,
+//             title: item.name,
+//             parentName: route.code,
+//             buttons: item.buttons?.map((b: any) => b.id) || []
+//           }
+//           getDetail(_code, url)
+//         })
+//       }
+//       const _code = route.appId ? `/${route.appId}${route.url}` : route.code
+//       if (!route.appId) {
+//         getDetail(_code, route.url)
+//       } else {
+//         routeMeta[_code] = {
+//           path: `/${route.appId}${route.url}`,
+//           title: route.name,
+//           parentName: code,
+//           buttons: []
+//         }
+//       }
+//       if (route.children) {
+//         findChildren(route.children, _code)
+//       }
+//     })
+//   }
+//
+//   findChildren(asyncRouterMap)
+//
+//   return routeMeta
+// }
+//
+// export function filterAsyncRouter(asyncRouterMap: any, parentCode = '', level = 1): { menusData: any, silderMenus: any } {
+//   const _asyncRouterMap = cloneDeep(asyncRouterMap)
+//   const menusData: any[] = []
+//   const silderMenus: any[] = []
+//   _asyncRouterMap.forEach((route: any) => {
+//     const hasAppId = route.appId
+//     const _route: any = {
+//       path:  hasAppId ? `/${route.appId}${route.url}` : `${route.url}`,
+//       name: hasAppId ? `/${route.appId}${route.url}` : route.code,
+//       url: hasAppId ? `/${route.appId}${route.url}` : route.url,
+//       meta: {
+//         icon: route.icon,
+//         title: route.name,
+//         hideInMenu: route.isShow === false,
+//         buttons: route.buttons?.map((b: any) => b.id) || [],
+//         isApp: hasAppId,
+//       },
+//     }
+//
+//     const silder = { ..._route }
+//     // 查看是否有隐藏子路由
+//     route.children = findChildrenRoute(route.code, route.url, route.children)
+//     route.children = findDetailRoutes(route.children)
+//     if (route.children && route.children.length) {
+//       // TODO 查看是否具有详情页
+//       const { menusData: _menusData, silderMenus: _silderMenus } = filterAsyncRouter(route.children, `${parentCode}/${route.code}`, level + 1)
+//       _route.children = _menusData
+//       silder.children = _silderMenus
+//       const showChildren = _route.children.some((r: any) => !r.meta.hideInMenu)
+//
+//       if (showChildren && _route.children.length) {
+//         _route.component = level === 1 ? BasicLayoutPage : BlankLayoutPage
+//         _route.redirect = _route.children[0].url
+//       } else {
+//         const myComponent = resolveComponent(route.code)
+//         // _route.component = myComponent ? myComponent : BlankLayoutPage;
+//         if (!!myComponent) {
+//           _route.component = myComponent;
+//           _route.children.map((r: any) => menusData.push(r))
+//           delete _route.children
+//         } else {
+//           _route.component = BlankLayoutPage
+//         }
+//       }
+//     } else {
+//       if (hasAppId) {
+//         _route.component = route.component || resolveComponent('iframe')
+//       } else {
+//         _route.component = route.component || resolveComponent(route.code) || BlankLayoutPage
+//       }
+//     }
+//     menusData.push(_route)
+//     silderMenus.push(silder)
+//   })
+//   return {
+//     menusData,
+//     silderMenus,
+//   }
+// }

-const resolveComponent = (name: any) => {
-  const importPage = pagesComponent[`../views/${name}/index.vue`];
-  if (!importPage) {
+import { shallowRef } from 'vue'
+
+type Buttons = Array<{ id: string }>
+
+const hasAppID = (item: { appId?: string, url?: string }): { isApp: boolean, appUrl: string } => {
+  return {
+    isApp: !!item.appId,
+    appUrl: `/${item.appId}${item.url}`
+  }
+}
+
+const handleButtons = (buttons?: Buttons) => {
+  return buttons?.map((b) => b.id) || []
+}
+
+const handleMeta = (item: MenuItem, isApp: boolean) => {
+  return {
+    icon: item.icon,
+    title: item.name,
+    hideInMenu: item.isShow === false,
+    buttons: handleButtons(item.buttons),
+    isApp
+  }
+}
+
+const findComponents = (code: string, level: number, isApp: boolean, components: any) => {
+  const myComponents = components[code]
+  if (level === 1) { // BasicLayoutPage
+    return myComponents ? () => myComponents() : BasicLayoutPage
+  } else if (level === 2) { // BlankLayoutPage or components
+    return myComponents ? () => myComponents() : BlankLayoutPage
+  } else if (isApp){ // iframe
+    return () => Iframe
+  } else if(myComponents) { // components
+    return () => myComponents()
+  }
+  // return components['demo'] // 开发测试用
  return undefined
-  } else {
-    const res = () => importPage()
-    return res
-  }
-  //@ts-ignore
 }

-const findChildrenRoute = (code: string, url: string, routes: any[] = []): MenuItem[] => {
-  if (extraRouteObj[code]) {
-    const extraRoutes = extraRouteObj[code].children.map((route: MenuItem) => {
-      return {
-        url: `${url}/${route.code}`,
-        code: `${code}/${route.code}`,
-        name: route.name,
+const hasExtraChildren = (item: MenuItem, extraMenus: any ) => {
+  const extraItem = extraMenus[item.code]
+  if (extraItem) {
+    return extraItem.children.map(e => ({
+      ...e,
+      url: `${item.url}${e.url}`,
      isShow: false
+    }))
  }
-    })
-    return [...routes, ...extraRoutes]
-  }
-  return routes
+
+  return undefined
 }

-const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
-  const detailComponent = resolveComponent(`${code}/Detail`)
+export const getAsyncRoutesMap = () => {
+  const modules = {}
+  Object.keys(pagesComponent).forEach(item => {
+    const code = item.replace('../views/', '').replace('/index.vue', '')
+    modules[code] = pagesComponent[item]
+  })
+  return modules
+}
+
+const findDetailRouteItem = (item: any, components: any) => {
+  const { code, url } = item
+  const detailComponent = components[`${item.code}/Detail`]
  if (detailComponent) {
-    return {
+    return [{
      url: `${url}/detail/:id`,
      code: `${code}/Detail`,
      component: detailComponent,
      name: '详情信息',
      isShow: false
+    }]
  }
-  }
-  return null
+  return []
 }

-const findDetailRoutes = (routes: any[]): any[] => {
-  const newRoutes: any[] = []
-  routes.forEach((route: any) => {
-    newRoutes.push(route)
-    const detail = findDetailRouteItem(route.code, route.url)
-    if (detail) {
-      newRoutes.push(detail)
-    }
-  })
-  return newRoutes
-}
-
-const filterMenus = ['device/DashBoard']
-export const filterCommunityMenus = (menuData: any[]) => {
-  return menuData.filter(item => {
-    if (item.children) {
-      item.children = filterCommunityMenus(item.children)
-    }
-    return !filterMenus.includes(item.code)
-  })
-}
-
-export const findCodeRoute = (asyncRouterMap: any[]) => {
-  const routeMeta = {}
-
-  function getDetail(code: string, url: string) {
-    const detail = findDetailRouteItem(code, url)
-    if (!detail) return
-
-    routeMeta[(detail as MenuItem).code] = {
-      path: detail.url,
-      title: detail.name,
-      parentName: code,
-      buttons: detail.buttons?.map((b: any) => b.id) || []
-    }
+export const handleMenus = (menuData: any[], components: any, level: number = 1) => {
+  if (menuData && menuData.length) {
+    return menuData.map(item => {
+      const { isApp, appUrl } = hasAppID(item) // 是否为第三方程序
+      const meta = handleMeta(item, isApp)
+      const route: any = {
+        path: isApp ? appUrl : `${item.url}`,
+        name: isApp ? appUrl : item.code,
+        url: isApp ? appUrl : item.url,
+        meta: meta,
+        children: item.children
      }

-  function findChildren(data: any[], code: string = '') {
-    data.forEach(route => {
-      routeMeta[route.code] = {
-        path: route.url || route.path,
-        title: route.meta?.title || route.name,
-        parentName: code,
-        buttons: route.buttons?.map((b: any) => b.id) || []
-      }
-      const otherRoutes = extraRouteObj[route.code]
+      route.component = findComponents(item.code, level, isApp, components)
+      const extraRoute = hasExtraChildren(item, extraRouteObj)
+      const detail_components = findDetailRouteItem(item, components)

-      if (otherRoutes) {
-        otherRoutes.children.map((item: any) => {
-          const _code = `${route.code}/${item.code}`
-          const url = `${route.url}/${item.code}`
-          routeMeta[_code] = {
-            path: `${route.url}/${item.code}`,
-            title: item.name,
-            parentName: route.code,
-            buttons: item.buttons?.map((b: any) => b.id) || []
-          }
-          getDetail(_code, url)
-        })
-      }
-      const _code = route.appId ? `/${route.appId}${route.url}` : route.code
-      if (!route.appId) {
-        getDetail(_code, route.url)
-      } else {
-        routeMeta[_code] = {
-          path: `/${route.appId}${route.url}`,
-          title: route.name,
-          parentName: code,
-          buttons: []
-        }
-      }
-      if (route.children) {
-        findChildren(route.children, _code)
-      }
-    })
+
+      if (extraRoute && !isApp) { // 包含额外的子路由
+        route.children = route.children ? [...route.children, ...extraRoute] : extraRoute
      }

-  findChildren(asyncRouterMap)
-
-  return routeMeta
-}
-
-export function filterAsyncRouter(asyncRouterMap: any, parentCode = '', level = 1): { menusData: any, silderMenus: any } {
-  const _asyncRouterMap = cloneDeep(asyncRouterMap)
-  const menusData: any[] = []
-  const silderMenus: any[] = []
-  _asyncRouterMap.forEach((route: any) => {
-    const hasAppId = route.appId
-    const _route: any = {
-      path:  hasAppId ? `/${route.appId}${route.url}` : `${route.url}`,
-      name: hasAppId ? `/${route.appId}${route.url}` : route.code,
-      url: hasAppId ? `/${route.appId}${route.url}` : route.url,
-      meta: {
-        icon: route.icon,
-        title: route.name,
-        hideInMenu: route.isShow === false,
-        buttons: route.buttons?.map((b: any) => b.id) || [],
-        isApp: hasAppId,
-      },
+      if (detail_components.length) {
+        route.children = route.children ? route.children.concat(detail_components) : detail_components
      }

-    const silder = { ..._route }
-    // 查看是否有隐藏子路由
-    route.children = findChildrenRoute(route.code, route.url, route.children)
-    route.children = findDetailRoutes(route.children)
      if (route.children && route.children.length) {
-      // TODO 查看是否具有详情页
-      const { menusData: _menusData, silderMenus: _silderMenus } = filterAsyncRouter(route.children, `${parentCode}/${route.code}`, level + 1)
-      _route.children = _menusData
-      silder.children = _silderMenus
-      const showChildren = _route.children.some((r: any) => !r.meta.hideInMenu)
+        route.children = handleMenus(route.children, components, level + 1)
+      }

-      if (showChildren && _route.children.length) {
-        _route.component = level === 1 ? BasicLayoutPage : BlankLayoutPage
-        _route.redirect = _route.children[0].url
-      } else {
-        const myComponent = resolveComponent(route.code)
-        // _route.component = myComponent ? myComponent : BlankLayoutPage;
-        if (!!myComponent) {
-          _route.component = myComponent;
-          _route.children.map((r: any) => menusData.push(r))
-          delete _route.children
-        } else {
-          _route.component = BlankLayoutPage
+      const showChildren = route.children?.filter(r => !r.meta?.hideInMenu) || []
+
+      if (route.children && route.children.length && showChildren.length) {
+        route.redirect = showChildren[0].path
+      }
+
+      return route
+    })
+  }
+
+  return []
+}
+
+export const handleMenusMap = (menuData: any[], cb: (data: any) => void) => {
+  if (menuData && menuData.length) {
+    menuData.forEach(item => {
+      cb(item)
+      if (item.children) {
+        handleMenusMap(item.children, cb)
+      }
+    })
+  }
+}
+
+const hideInMenu = (code: string) => {
+  return ['account-center', 'message-subscribe'].includes(code)
+}
+
+export const handleSiderMenu = (menuData: any[]) => {
+  if (menuData && menuData.length) {
+    return menuData.map(item => {
+      const { isApp, appUrl } = hasAppID(item) // 是否为第三方程序
+      const meta = handleMeta(item, isApp)
+      const route: any = {
+        path: isApp ? appUrl : `${item.url}`,
+        name: isApp ? appUrl : item.code,
+        url: isApp ? appUrl : item.url,
+        meta: meta,
+        children: item.children
+      }
+
+      if (route.children && route.children.length) {
+        route.children = handleSiderMenu(route.children)
+      }
+
+      route.meta.hideInMenu = hideInMenu(item.code)
+
+      return route
+    })
+  }
+  return []
+}
+
+
+export const handleAuthMenu = (menuData: any[], cb: (code: any, buttons: any[]) => void) => {
+  if (menuData && menuData.length) {
+    return menuData.forEach(item => {
+      const { code, buttons, children} = item
+
+      if (buttons) {
+        cb(code, buttons.map(a => a.id))
+      }
+
+      if (children) {
+        handleAuthMenu(children, cb)
      }
-      }
-    } else {
-      if (hasAppId) {
-        _route.component = route.component || resolveComponent('iframe')
-      } else {
-        _route.component = route.component || resolveComponent(route.code) || BlankLayoutPage
-      }
-    }
-    menusData.push(_route)
-    silderMenus.push(silder)
    })
-  return {
-    menusData,
-    silderMenus,
  }
 }
--- a/src/views/DataCollect/Collector/Tree/Save/index.vue
+++ b/src/views/DataCollect/Collector/Tree/Save/index.vue
@ -54,13 +54,13 @@
                />
            </j-form-item>
            <j-form-item
-                :name="['circuitBreaker', 'type']"
+                :name="['configuration', 'inheritBreakerSpec', 'type']"
                :rules="LeftTreeRules.type"
-                label="故障处理"
+                label="点位熔断处理"
            >
                <j-card-select
                    :showImage="false"
-                    v-model:value="formData.circuitBreaker.type"
+                    v-model:value="formData.configuration.inheritBreakerSpec.type"
                    :options="[
                        { label: '降频', value: 'LowerFrequency' },
                        { label: '断开', value: 'Break' },
@ -70,7 +70,7 @@
                />
            </j-form-item>
            <p style="color: #616161">
-                {{ getTypeTooltip(formData.circuitBreaker.type) }}
+                {{ getTypeTooltip(formData.configuration.inheritBreakerSpec.type) }}
            </p>
            <j-form-item
                label="双字高低位切换"
@ -158,6 +158,7 @@
 import { save, update } from '@/api/data-collect/collector';
 import { LeftTreeRules } from '../../data';
 import type { FormInstance } from 'ant-design-vue';
+import {cloneDeep} from "lodash-es";

 const loading = ref(false);
 const visibleEndian = ref(false);
@ -214,9 +215,13 @@ const formData = ref({
        endian: 'BIG',
        endianIn: 'BIG',
        requsetTimeout: 2000,
+        inheritBreakerSpec: {
+          type: 'LowerFrequency',
+        }
    },
    circuitBreaker: {
-        type: 'LowerFrequency',
+        // type: 'LowerFrequency',
+      type: 'Ignore'
    },
    description: '',
 });
@ -243,19 +248,21 @@ const handleOk = async () => {
    }
 };

-const getTypeTooltip = (value: string) =>
-    value === 'LowerFrequency'
-        ? '连续20次采集异常后，降低采集频率至设定频率的1/10，故障处理后，采集频率将恢复至设定频率。'
-        : value === 'Break'
-        ? '连续10分钟异常，停止采集数据进入断开状态，设备重新启用后恢复采集状态。'
-        : '忽略异常，保持原采集频率超时时间为5s。';
+const getTypeTooltip = (value: string) => {
+  switch (value) {
+    case 'LowerFrequency': return '连续20次采集异常后，降低采集频率至设定频率的1/10，故障处理后，采集频率将恢复至设定频率。';
+    // case 'Break': return '连续10分钟异常，停止采集数据进入断开状态，设备重新启用后恢复采集状态。'
+    case 'Break': return '连续20次采集异常后，降低采集频率至设定频率的1/10，10分钟内未排除故障，将停止采集。'
+    default: return '忽略异常，保持设定采集频率。';
+  }
+}

 const handleCancel = () => {
    emit('change', false);
 };

 const changeCardSelectType = (value: Array<string>) => {
-    formData.value.circuitBreaker.type = value[0];
+  formData.value.configuration.inheritBreakerSpec.type = value[0];
 };
 const changeCardSelectEndian = (value: Array<string>) => {
    formData.value.configuration.endian = value[0];
@ -281,7 +288,19 @@ watch(
 watch(
    () => props.data,
    (value) => {
-        if (value.id) formData.value = value;
+        if (value.id) {
+          let copyValue = cloneDeep(value)
+          if (!copyValue?.configuration?.inheritBreakerSpec) {
+            copyValue.configuration = {
+              ...copyValue.configuration,
+              inheritBreakerSpec: {
+                type: value.circuitBreaker.type
+              }
+            }
+            copyValue.circuitBreaker.type = 'Ignore'
+          }
+          formData.value = copyValue
+        };
    },
    { immediate: true, deep: true },
 );
--- a/src/views/DataCollect/Collector/Tree/index.vue
+++ b/src/views/DataCollect/Collector/Tree/index.vue
@ -39,8 +39,16 @@
                    <j-tag
                        class="tree-left-tag"
                        v-if="data.id !== '*'"
-                        :color="colorMap.get(data?.runningState?.value)"
-                        >{{ data?.runningState?.text }}</j-tag
+                        :color="
+                          data?.uniformState?.value === 'normal' || data?.state?.value === 'disabled' ?
+                          colorMap.get(data?.runningState?.value) :
+                          colorMap.get(data?.uniformState?.value)
+                        "
+                        >{{
+                        data?.uniformState?.value === 'normal' || data?.state?.value === 'disabled' ?
+                            data?.runningState?.text :
+                            data?.uniformState?.text
+                      }}</j-tag
                    >
                    <j-tag
                        class="tree-left-tag2"
@ -117,7 +125,7 @@

 <script setup lang="ts" name="TreePage">
 import {
-    queryCollector,
+    queryCollectorTree,
    queryChannelNoPaging,
    update,
    remove,
@ -245,7 +253,7 @@ const handleSearch = async (value: any) => {
        !!value && (params.value = value);
    }
    spinning.value = true;
-    const res: any = await queryCollector(params.value);
+    const res: any = await queryCollectorTree(params.value);
    if (res.status === 200) {
        if (clickSearch) {
            defualtDataSource.value = res.result;
--- a/src/views/DataCollect/Collector/data.ts
+++ b/src/views/DataCollect/Collector/data.ts
@ -1,7 +1,9 @@
 export const colorMap = new Map();
 colorMap.set('running', 'success');
 colorMap.set('partialError', 'warning');
+colorMap.set('partError', 'warning'); // 部分错误
 colorMap.set('failed', 'error');
+colorMap.set('allError', 'error'); // 全部错误
 colorMap.set('stopped', 'default');
 colorMap.set('processing', '#cccccc');
 colorMap.set('enabled', 'processing');
--- a/src/views/account/Center/components/EditInfo/index.vue
+++ b/src/views/account/Center/components/EditInfo/index.vue
@ -6,6 +6,8 @@
        width="770px"
        @cancel="emits('close')"
        :confirmLoading="loading"
+        :zIndex="1100"
+        :maskClosable='false'
    >
        <j-form :model="form" layout="vertical" ref="formRef">
            <j-row :gutter="24">
@ -66,7 +68,7 @@
                        :rules="[
                            {
                                pattern: /^1[3456789]\d{9}$/,
-                                message: '请输入正确手机号',
+                                message: '请输入正确的手机号',
                            },
                        ]"
                    >
--- a/src/views/account/Center/components/Subscribe/components/Bind.vue
+++ b/src/views/account/Center/components/Subscribe/components/Bind.vue
@ -1,5 +1,5 @@
 <template>
-    <j-modal :width="'900px'" visible @cancel="emit('close')" :zIndex="1100">
+    <j-modal :maskClosable='false' :width="'900px'" visible @cancel="emit('close')" :zIndex="1100">
        <template v-if="getType === 'notifier-weixin'">
            <j-spin :spinning="loading">
                <div class="code" style="height: 450px">
--- a/src/views/account/Center/components/Subscribe/components/Card.vue
+++ b/src/views/account/Center/components/Subscribe/components/Card.vue
@ -28,11 +28,14 @@
                    <template v-else>
                        <Detail
                            @unsubscribe="onUnSubscribe"
-                            @save="onSave"
-                            v-if="current?.channelProvider !== 'inside-mail' && popoverVisible"
+                            v-if="
+                                current?.channelProvider !== 'inside-mail' &&
+                                popoverVisible
+                            "
                            :current="current"
-                            :data="props.data"
-                            @close="popoverVisible = false"
+                            :data="data"
+                            @bindChange="onChange('bind')"
+                            @infoChange="onChange('info')"
                        />
                        <PermissionButton
                            v-else
@ -51,12 +54,28 @@
                {{ current?.name }}
            </j-ellipsis>
        </div>
+        <EditInfo
+            v-if="editInfoVisible"
+            :data="user.userInfos"
+            @close="editInfoVisible = false"
+            @save="onSave"
+        />
+        <Bind
+            @close="visible = false"
+            v-if="visible"
+            :data="data"
+            :current="current"
+            @save="onBindSave"
+        />
    </div>
 </template>

 <script lang="ts" setup>
 import { getImage } from '@/utils/comm';
 import Detail from './Detail.vue';
+import { useUserInfo } from '@/store/userInfo';
+import EditInfo from '../../EditInfo/index.vue';
+import Bind from './Bind.vue';

 const iconMap = new Map();
 iconMap.set('notifier-dingTalk', getImage('/notice-rule/dingtalk.png'));
@ -81,19 +100,44 @@ const props = defineProps({
    },
    notifyChannels: {
        type: Array,
-        default: () => []
-    }
+        default: () => [],
+    },
 });
+const user = useUserInfo();
 const popoverVisible = ref<boolean>(false);

+const editInfoVisible = ref<boolean>(false);
+const visible = ref<boolean>(false);
+
+const onChange = (type: 'bind' | 'info') => {
+    if(type === 'bind'){
+        editInfoVisible.value = true
+    } else {
+        visible.value = true
+    }
+}
+
+const onSave = () => {
+    editInfoVisible.value = false;
+    user.getUserInfo();
+    emit('save', props.current);
+    popoverVisible.value = false;
+};
+
+const onBindSave = () => {
+    visible.value = false
+    emit('save', props.current);
+    popoverVisible.value = false;
+}
+
 const onUnSubscribe = (dt: any) => {
    emit('unsubscribe', dt);
-    popoverVisible.value = false
+    popoverVisible.value = false;
 };

 const onCheckChange = (dt: any) => {
-    emit('save', dt)
-    popoverVisible.value = false
+    emit('save', dt);
+    popoverVisible.value = false;
 };
 </script>

--- a/src/views/account/Center/components/Subscribe/components/Detail.vue
+++ b/src/views/account/Center/components/Subscribe/components/Detail.vue
@ -21,29 +21,14 @@
            >
        </div>
    </div>
-    <EditInfo
-        v-if="editInfoVisible"
-        :data="user.userInfos"
-        @close="editInfoVisible = false"
-        @save="onSave"
-    />
-    <Bind
-        @close="visible = false"
-        v-if="visible"
-        :data="props.data"
-        :current="current"
-        @save="onBindSave"
-    />
 </template>

 <script lang="ts" setup>
 import { getIsBindThird } from '@/api/account/notificationSubscription';
 import { useUserInfo } from '@/store/userInfo';
-import EditInfo from '../../EditInfo/index.vue';
-import Bind from './Bind.vue';

 const user = useUserInfo();
-const emit = defineEmits(['save', 'unsubscribe', 'close']);
+const emit = defineEmits(['infoChange', 'unsubscribe', 'bindChange']);
 const info = ref<any>(null);
 const props = defineProps({
    data: {
@ -58,39 +43,23 @@ const props = defineProps({
    },
 });

-const editInfoVisible = ref<boolean>(false);
-const visible = ref<boolean>(false);
-
 const getType = computed(() => {
    return props.current?.channelProvider;
 });

 const onBind = () => {
    if (
-        ['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
+        !['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
            props.current?.channelProvider,
        )
    ) {
-        editInfoVisible.value = true;
+        emit('infoChange')
    } else {
-        visible.value = true
+        emit('bindChange')
    }
    
 };

-const onSave = () => {
-    editInfoVisible.value = false;
-    user.getUserInfo();
-    emit('save', props.current);
-    emit('close')
-};
-
-const onBindSave = () => {
-    visible.value = false
-    emit('save', props.current);
-    emit('close')
-}
-
 const handleSearch = async () => {
    if (
        !['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
@ -114,16 +83,6 @@ onMounted(() => {
    handleSearch()
 })

-// watch(
-//     () => props.current,
-//     () => {
-//         handleSearch();
-//     },
-//     {
-//         immediate: true,
-//         deep: true,
-//     },
-// );
 </script>

 <style lang="less" scoped>
--- a/src/views/account/Center/components/Subscribe/components/Unsubscribe.vue
+++ b/src/views/account/Center/components/Subscribe/components/Unsubscribe.vue
@ -1,5 +1,5 @@
 <template>
-    <j-modal :width="'384px'" visible @cancel="emit('close')" :footer="null">
+    <j-modal :maskClosable='false' :width="'384px'" visible @cancel="emit('close')" :footer="null">
        <template v-if="getType === 'notifier-dingTalk'">
            <div class="tip">请先绑定钉钉账号</div>
        </template>
--- a/src/views/device/Instance/Detail/MetadataMap/index.vue
+++ b/src/views/device/Instance/Detail/MetadataMap/index.vue
@ -358,7 +358,7 @@ onMounted(() => {
 });

 onUnmounted(() => {
-    if (_delTag.value) {
+    if (_delTag.value && dataSourceCache.value) {
        // 保存数据
        const arr = dataSourceCache.value.filter((i: any) => i?.original).map((item: any) => {
            return {
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@ -277,7 +277,7 @@ const initPage = async (newId: any) => {
 }

 onBeforeRouteUpdate((to: any) => {
-  if (to.params?.id!==instanceStore.current.id) {
+  if (to.params?.id!==instanceStore.current.id && to.name === 'device/Instance/Detail') {
    initPage(to.params?.id)
  }
 })
--- a/src/views/device/Product/Detail/MetadataMap/index.vue
+++ b/src/views/device/Product/Detail/MetadataMap/index.vue
@ -354,7 +354,7 @@ onMounted(() => {
 });

 onUnmounted(() => {
-    if (_delTag.value) {
+    if (_delTag.value && dataSourceCache.value.length) {
        // 保存数据
        const arr = dataSourceCache.value.filter((i: any) => i?.plugin).map((item: any) => {
            return {
--- a/src/views/device/Product/Save/index.vue
+++ b/src/views/device/Product/Save/index.vue
@ -164,7 +164,7 @@ const deviceList = ref([
        label: '网关子设备',
        value: 'childrenDevice',
        iconUrl: getImage('/device-type-2.png'),
-        tooltip: '作为网关的子设备，有网关代理连接到物联网平台',
+        tooltip: '作为网关的子设备，由网关代理连接到物联网平台',
    },
    {
        label: '网关设备',
--- a/src/views/device/components/InklingDevice/index.vue
+++ b/src/views/device/components/InklingDevice/index.vue
@ -20,8 +20,12 @@
        <j-scrollbar v-if='deviceList.length'>
          <j-spin :spinning='deviceSpinning'>
            <div class='device-list-items'>
+              <template v-for='item in deviceList'>
+                <template v-if='disabledKeys.includes(item.id)'>
+                  <j-tooltip
+                      title='该设备已绑定平台设备'
+                  >
                    <div
-                v-for='item in deviceList'
                        :class='{
                          "device-list-item": true,
                          "active": checkKeys.includes(item.id),
@ -29,21 +33,45 @@
                        }'
                        @click='() => deviceClick(item.id, item)'
                    >
-                <template v-if='disabledKeys.includes(item.id)'>
-                  <j-tooltip
-                    title='该设备已绑定平台设备'
-                  >
-                      <span class='item-title'>{{ item.id }}</span>
+                      <div class='item-title'>
+                        <span class="title-name no-tooltip">
+                            {{item.name}}
+                        </span>
+                        <span class="title-id">
+                          ({{ item.id }})
+                        </span>
+                      </div>
+                    </div>
                  </j-tooltip>
                </template>
-                <span v-else class='item-title'>
-                  {{ item.id }}
+                <div
+                    v-else
+                    :class='{
+                      "device-list-item": true,
+                      "active": checkKeys.includes(item.id),
+                      "disabled": disabledKeys.includes(item.id)
+                    }'
+                    @click='() => deviceClick(item.id, item)'
+                >
+
+                  <div class='item-title'>
+                    <span class="title-name">
+                      <j-ellipsis>
+                        {{item.name}}
+                      </j-ellipsis>
                    </span>
+                    <span class="title-id">
+                      <j-ellipsis>
+                        ({{ item.id }})
+                      </j-ellipsis>
+                    </span>
+                  </div>
                  <a-icon
                      v-if='checkKeys.includes(item.id)'
                      type='CheckOutlined'
                  />
                </div>
+              </template>
            </div>
          </j-spin>
        </j-scrollbar>
@ -278,7 +306,31 @@ onMounted(() => {
      justify-content: space-between;

      > .item-title {
+        display: flex;
+        min-width: 0;
+        flex-grow: 1;
+        gap: 8px;
+
+        .title-name {
+          max-width: 70%;
+        }
+
+        .no-tooltip {
+          overflow: hidden;
+          vertical-align: bottom;
+          cursor: pointer;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+          max-height: 380px;
+          -webkit-line-clamp: 1;
+          text-overflow: ellipsis;
+        }
+
+        .title-id {
          flex: 1 1 auto;
+          color: #a3a3a3;
+        }
      }

      &:hover {
@ -288,6 +340,10 @@ onMounted(() => {
      &.active {
        background-color: rgba(153, 153, 153, 0.06);
        color: @primary-color;
+        .title-id {
+          color: @primary-color;
+          opacity: .8;
+        }
      }

      &.disabled {
--- a/src/views/device/components/Metadata/Base/Base.vue
+++ b/src/views/device/components/Metadata/Base/Base.vue
@ -192,7 +192,7 @@ import type {
    ProductItem,
 } from '@/views/device/Product/typings';
 import type { PropType } from 'vue';
-import { onBeforeRouteLeave } from 'vue-router'
+import {useRouter, onBeforeRouteUpdate} from 'vue-router'
 import { useMetadata, useOperateLimits } from './hooks';
 import {TypeStringMap, useColumns} from './columns';
 import { levelMap, sourceMap, expandsType, limitsMap } from './utils';
@ -211,6 +211,8 @@ import { Modal } from 'jetlinks-ui-components'
 import {EventEmitter} from "@/utils/utils";
 import {watch} from "vue";
 import {cloneDeep} from "lodash";
+import {useSystem} from "store/system";
+import {storeToRefs} from "pinia";

 const props = defineProps({
    target: {
@ -229,6 +231,10 @@ const props = defineProps({

 const _target = inject<'device' | 'product'>('_metadataType', props.target);

+const system = useSystem();
+const {basicLayout} = storeToRefs(system);
+const router = useRouter()
+
 const { data: metadata, noEdit, productNoEdit } = useMetadata(_target, props.type);
 const { hasOperate } = useOperateLimits(_target);

@ -337,28 +343,11 @@ const handleAddClick = async (_data?: any, index?: number) => {

  const newObject = _data || getDataByType()

-  
-
-  // const data = [...dataSource.value];
-  //
-  // if (index !== undefined) {
-  //   //  校验
-  //   const _data = await tableRef.value.getData()
-  //   console.log(_data)
-  //   if (_data) {
-  //     data.splice(index + 1, 0, newObject);
-  //   }
-  // } else {
-  //     data.push(newObject);
-  // }
-  // dataSource.value = data
  const _addData = await tableRef.value.addItem(newObject, index)
  if (_addData.length === 1) {
    showLastDelete.value = true
  }
  showSave.value = true
-  // const _index = index !== undefined ? index + 1 : 0
-  // tableRef.value?.addItemAll?.(_index)
 };

 const copyItem = (record: any, index: number) => {
@ -452,16 +441,24 @@ const tabsChange = inject('tabsChange')

 const parentTabsChange = (next?: Function) => {
  if (editStatus.value) {
-    Modal.confirm({
+    const modal = Modal.confirm({
      content: '页面改动数据未保存',
      okText: '保存',
      cancelText: '不保存',
      zIndex: 1400,
+      closable: true,
      onOk: () => {
        handleSaveClick(next as Function)
      },
-      onCancel: () => {
+      onCancel: (e: any) => {
+        if (!e.triggerCancel) { // 取消按钮
+          modal.destroy();
          (next as Function)?.()
+        } else {// 右上角取消按钮
+          const paths = router.currentRoute.value.matched
+          // basicLayout.value.selectedKeys = paths.map(item => item.path)
+          basicLayout.value.openKeys = paths.map(item => item.path)
+        }
      }
    })
  } else {
@ -479,7 +476,7 @@ watch(() => metadata.value, () => {
  dataSource.value = metadata.value
 }, { immediate: true })

-onBeforeRouteLeave((to, from, next) => {
+onBeforeRouteUpdate((to, from, next) => {
  parentTabsChange(next as Function)
 })

--- a/src/views/device/components/Metadata/Base/columns.tsx
+++ b/src/views/device/components/Metadata/Base/columns.tsx
@ -302,22 +302,22 @@ export const useColumns = (type?: MetadataType, target?: 'device' | 'product', n
      title: '输入参数',
      dataIndex: 'inputs',
      width: 120,
-      form: {
-        required: true,
-        rules: [{
-          callback(rule:any,value: any, dataSource: any[]) {
-            const field = rule.field.split('.')
-            const fieldIndex = Number(field[1])
-
-            const values = dataSource.find((item, index) => index === fieldIndex)
-
-            return validatorConfig({
-              type: 'object',
-              properties: values.inputs
-            }, true)
-          }
-        }]
-      },
+      // form: {
+      //   required: true,
+      //   rules: [{
+      //     callback(rule:any,value: any, dataSource: any[]) {
+      //       const field = rule.field.split('.')
+      //       const fieldIndex = Number(field[1])
+      //
+      //       const values = dataSource.find((item, index) => index === fieldIndex)
+      //
+      //       return validatorConfig({
+      //         type: 'object',
+      //         properties: values.inputs
+      //       }, true)
+      //     }
+      //   }]
+      // },
      control(newValue, oldValue) {
        if (newValue && !oldValue) {
          return true
--- a/src/views/iot-card/CardManagement/index.vue
+++ b/src/views/iot-card/CardManagement/index.vue
@ -193,11 +193,11 @@
                                <div class="progress-text">
                                    <div>
                                        {{
-                                            (
+                                            slotProps.totalFlow ? (
                                                 (slotProps.usedFlow /
                                                    slotProps.totalFlow) *
                                                100
-                                            ).toFixed(2)
+                                            ).toFixed(2) : '0.00'
                                        }}
                                        %
                                    </div>
@ -209,9 +209,9 @@
                                    :strokeColor="'#ADC6FF'"
                                    :showInfo="false"
                                    :percent="
-                                        (slotProps.usedFlow /
+                                        slotProps.totalFlow ? (slotProps.usedFlow /
                                            slotProps.totalFlow) *
-                                        100
+                                        100 : 0
                                    "
                                />
                            </div>
--- a/src/views/link/DashBoard/components/Cpu.vue
+++ b/src/views/link/DashBoard/components/Cpu.vue
@ -139,6 +139,7 @@ const getCPUEcharts = async (val: any) => {
        const _cpuOptions = {};
        const _cpuXAxis = new Set();
        if (res.result?.length) {
+          isEmpty.value = false;
          // 根据服务节点来筛选数据
          // const filterArray = props.isNoCommunity ? res.result.filter((item : any) => item.data?.clusterNodeId === props.serviceId) : res.result
          const filterArray = res.result
--- a/src/views/link/DashBoard/components/Jvm.vue
+++ b/src/views/link/DashBoard/components/Jvm.vue
@ -103,6 +103,7 @@ const getJVMEcharts = async (val: any) => {
        const _jvmOptions = {};
        const _jvmXAxis = new Set();
        if (res.result?.length) {
+          isEmpty.value = false;
          // const filterArray =  props.isNoCommunity ? res.result.filter((item : any) => item.data?.clusterNodeId === props.serviceId) : res.result
          const filterArray =  res.result
          filterArray.forEach((item: any) => {
--- a/src/views/link/DashBoard/components/Network.vue
+++ b/src/views/link/DashBoard/components/Network.vue
@ -114,6 +114,7 @@ const getNetworkEcharts = async (val: any) => {
        const _networkOptions = {};
        const _networkXAxis = new Set();
        if (resp.result.length) {
+          isEmpty.value = false;
          const filterArray = resp.result
          // const filterArray = resp.result.filter((item : any) => item.data?.clusterNodeId === props.serviceId)
          filterArray.forEach((item: any) => {
--- a/src/views/link/DashBoard/components/echarts.vue
+++ b/src/views/link/DashBoard/components/echarts.vue
@ -44,7 +44,7 @@ watch(() => props.options, () => {
      echartsRender()
    })
  }
-}, { deep: true })
+}, { immediate: true, deep: true })

 </script>

--- a/src/views/system/NoticeRule/components/Auth/index.vue
+++ b/src/views/system/NoticeRule/components/Auth/index.vue
@ -6,6 +6,10 @@
        @cancel="emit('close')"
        @ok="onSave"
    >
+        <div class="alert">
+            <AIcon type="InfoCircleOutlined" />
+            通过角色控制【{{ name }}】的所有的通知方式可被哪些用户订阅。
+        </div>
        <Role v-model="_selectedRowKeys" :gridColumn="2" />
    </j-modal>
 </template>
@ -20,6 +24,10 @@ const props = defineProps({
        type: Array as PropType<string[]>,
        default: () => [],
    },
+    name: {
+        type: String,
+        default: ''
+    }
 });

 const _selectedRowKeys = ref<string[]>([]);
@ -32,3 +40,14 @@ const onSave = () => {
    emit('save', _selectedRowKeys.value);
 };
 </script>
+
+<style lang="less" scoped>
+.alert {
+    height: 40px;
+    padding: 0 20px 0 10px;
+    margin-bottom: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+</style>
--- a/src/views/system/NoticeRule/components/Item/index.vue
+++ b/src/views/system/NoticeRule/components/Item/index.vue
@ -22,7 +22,7 @@
                        <template #title>
                            <span v-if="!update">暂无权限，请联系管理员</span>
                            <div v-else>
-                                用于配制外层权限<br />未配置外层权限将执行通知方式中配置的权限<br />配置外层权限后将覆盖所有通知方式中配置的权限
+                                通过角色控制【{{ data.name }}】的所有的通知方式可被哪些用户订阅。
                            </div>
                        </template>
                        <j-button
@ -129,6 +129,7 @@
        @save="onSave"
        :loading="loading"
        :provider="provider"
+        :name="data.name"
    />
    <Detail
        :data="current"
@ -140,6 +141,7 @@
        :data="data?.grant?.role?.idList"
        @close="authVisible = false"
        @save="onAuthSave"
+        :name="data.name"
    />
 </template>

@ -345,6 +347,9 @@ const onSwitchChange = (e: boolean) => {
    let _checked: boolean = e ? _value?.open : _value?.close;
    if (_checked) {
        onAction(e);
+    } else {
+        if (e) {
+            onAction(e);
        } else {
            Modal.confirm({
                title: e
@ -390,6 +395,7 @@ const onSwitchChange = (e: boolean) => {
                onCancel() {},
            });
        }
+    }
 };

 const onSave = (_data: any) => {
@ -489,7 +495,7 @@ const onSave = (_data: any) => {

        .box-item-add {
            cursor: pointer;
-            background-color: #F7F8FA;
+            background-color: #f7f8fa;
            width: 54px;
            height: 54px;
            display: flex;
--- a/src/views/system/NoticeRule/components/Role/index.vue
+++ b/src/views/system/NoticeRule/components/Role/index.vue
@ -70,7 +70,7 @@
                </j-alert>
            </div>
        </template>
-        <j-scrollbar height="400px">
+        <j-scrollbar :height="gridColumn <= 2 ? '320px' : '250px'">
            <j-pro-table
                ref="tableRef"
                :columns="columns"
--- a/src/views/system/NoticeRule/components/Save/components/NotifyConfig.vue
+++ b/src/views/system/NoticeRule/components/Save/components/NotifyConfig.vue
@ -20,7 +20,7 @@
        <AIcon type="InfoCircleOutlined" />
        钉钉群机器人类型的配置在当前页面将被过滤
    </div>
-    <div style="height: 400px; overflow-y: auto">
+    <div style="max-height: 400px; overflow-y: auto">
        <JProTable
            :columns="columns"
            :request="query"
--- a/src/views/system/NoticeRule/components/Save/components/NotifyTemplate.vue
+++ b/src/views/system/NoticeRule/components/Save/components/NotifyTemplate.vue
@ -19,7 +19,7 @@
        <AIcon type="InfoCircleOutlined" />
        已规定固定收信人的模板在当前页面将被过滤
    </div>
-    <div style="height: 400px; overflow-y: auto">
+    <div style="max-height: 400px; overflow-y: auto">
        <JProTable
            :columns="columns"
            :request="(e) => handleData(e)"
--- a/src/views/system/NoticeRule/components/Save/components/NotifyWay.vue
+++ b/src/views/system/NoticeRule/components/Save/components/NotifyWay.vue
@ -69,10 +69,12 @@ onMounted(() => {
                    iconUrl: iconMap.get(item.id),
                };
            });
+            emit('update:value', options.value?.[0]?.value);
+            emit('update:name', options.value?.[0]?.label);
+            emit('change', {label: options.value?.[0]?.label, value: options.value?.[0]?.value});
        }
        loading.value = false;
    });
-    notifyType.value = props.value;
 });
 </script>

--- a/src/views/system/NoticeRule/components/Save/index.vue
+++ b/src/views/system/NoticeRule/components/Save/index.vue
@ -11,11 +11,12 @@
                <j-step v-for="(item, index) in stepList" :key="item">
                    <template #title>
                        {{ item
-                        }}<j-tooltip
-                            v-if="index === 4"
-                            >
+                        }}<j-tooltip v-if="index === 4">
                            <template #title>
-                                <span>内层权限配置<br />外层权限已配置的情况下，将取外层权限与当前页面分配权限的交集，向对应角色发送通知。<br />外层权限未配置的情况下，将按此处配置的权限发送通知。</span>
+                                <span>
+                                    通过角色控制【{{ name }}】下的【{{ showName }}通知】可被哪些用户订阅。<br />
+                                    注意：当前配置会被外层【{{ name }}】中的权限控制覆盖。
+                                </span>
                            </template>
                            <AIcon type="QuestionCircleOutlined"
                        /></j-tooltip>
@ -32,6 +33,7 @@
            <template v-if="current === 0">
                <NotifyWay
                    :value="formModel.channelProvider"
+                    v-model:name="showName"
                    @change="onWayChange"
                />
            </template>
@ -161,6 +163,10 @@ const props = defineProps({
        type: String,
        default: '',
    },
+    name: {
+        type: String,
+        default: '',
+    },
 });

 const stepList = [
@ -190,14 +196,15 @@ const formModel = reactive<{
 });
 const variableRef = ref();
 const formRef = ref();
+const showName = ref<string>('钉钉')

 const _getType = computed(() => {
-    if(['notifier-dingTalk'].includes(props.data?.channelProvider)) {
-        return ['user', 'tag']
+    if (['notifier-dingTalk'].includes(props.data?.channelProvider)) {
+        return ['user', 'tag'];
    } else {
-        return ['user', 'org', 'tag']
+        return ['user', 'org', 'tag'];
    }
-})
+});

 const _variableDefinitions = computed(() => {
    return variable.value.filter((item: any) => {
--- a/yarn.lock
+++ b/yarn.lock
@ -3738,7 +3738,7 @@ jetlinks-store@^0.0.3:
  resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz"
  integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q==

-jetlinks-ui-components@^1.0.23, jetlinks-ui-components@^1.0.26:
+jetlinks-ui-components@^1.0.23:
  version "1.0.26"
  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.26.tgz#26896c578396b09d49649ac87c3943491af3a9ae"
  integrity sha512-HkLk52C6pDKe/Ca9O4w34h1/PrC7GdBUheiicPOX2V/Lc49N+WzI9wmrCd82XBm8MocPM4gAOJxNaTxY20EO9w==
@ -3753,6 +3753,21 @@ jetlinks-ui-components@^1.0.23, jetlinks-ui-components@^1.0.26:
    sortablejs "^1.15.0"
    vuedraggable "^4.1.0"

+jetlinks-ui-components@^1.0.27:
+  version "1.0.27"
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.27.tgz#c2e62ebf26d9465aed5489fdde37297738d57f2b"
+  integrity sha512-IVWCPfC5awTIIMQ5t6V5KTHLjfENj0owb6HsHxqRLrHebz7FaDng6oNfebvn17P+gHGVwwMemTCF7b8PpWFiwg==
+  dependencies:
+    "@vueuse/core" "^9.12.0"
+    "@vueuse/router" "^9.13.0"
+    ant-design-vue "^3.2.15"
+    colorpicker-v3 "^2.10.2"
+    jetlinks-ui-components "^1.0.23"
+    lodash-es "^4.17.21"
+    monaco-editor "^0.40.0"
+    sortablejs "^1.15.0"
+    vuedraggable "^4.1.0"
+
 js-cookie@^3.0.1:
  version "3.0.1"
  resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz"