diff --git a/backend/pom.xml b/backend/pom.xml
index 177a028f21..ddea2788d4 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -347,6 +347,10 @@
                     <groupId>log4j</groupId>
                     <artifactId>log4j</artifactId>
                 </exclusion>
+                <exclusion>
+                    <groupId>org.objenesis</groupId>
+                    <artifactId>objenesis</artifactId>
+                </exclusion>
             </exclusions>
             <scope>provided</scope>
         </dependency>
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelShare.java b/backend/src/main/java/io/dataease/base/domain/PanelShare.java
index 5d45eca63a..ddcd4e8e73 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelShare.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelShare.java
@@ -13,5 +13,7 @@ public class PanelShare implements Serializable {
 
     private Long createTime;
 
+    private Integer type;
+
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelShareExample.java b/backend/src/main/java/io/dataease/base/domain/PanelShareExample.java
index 887d2f1d8c..bafd89b447 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelShareExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelShareExample.java
@@ -353,6 +353,66 @@ public class PanelShareExample {
             addCriterion("create_time not between", value1, value2, "createTime");
             return (Criteria) this;
         }
+
+        public Criteria andTypeIsNull() {
+            addCriterion("`type` is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeIsNotNull() {
+            addCriterion("`type` is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeEqualTo(Integer value) {
+            addCriterion("`type` =", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeNotEqualTo(Integer value) {
+            addCriterion("`type` <>", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeGreaterThan(Integer value) {
+            addCriterion("`type` >", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeGreaterThanOrEqualTo(Integer value) {
+            addCriterion("`type` >=", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeLessThan(Integer value) {
+            addCriterion("`type` <", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeLessThanOrEqualTo(Integer value) {
+            addCriterion("`type` <=", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeIn(List<Integer> values) {
+            addCriterion("`type` in", values, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeNotIn(List<Integer> values) {
+            addCriterion("`type` not in", values, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeBetween(Integer value1, Integer value2) {
+            addCriterion("`type` between", value1, value2, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeNotBetween(Integer value1, Integer value2) {
+            addCriterion("`type` not between", value1, value2, "type");
+            return (Criteria) this;
+        }
     }
 
     public static class Criteria extends GeneratedCriteria {
diff --git a/backend/src/main/java/io/dataease/base/mapper/PanelShareMapper.xml b/backend/src/main/java/io/dataease/base/mapper/PanelShareMapper.xml
index 7c4d62bdcc..8dd5204b5d 100644
--- a/backend/src/main/java/io/dataease/base/mapper/PanelShareMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelShareMapper.xml
@@ -6,6 +6,7 @@
     <result column="panel_group_id" jdbcType="VARCHAR" property="panelGroupId" />
     <result column="user_id" jdbcType="BIGINT" property="userId" />
     <result column="create_time" jdbcType="BIGINT" property="createTime" />
+    <result column="type" jdbcType="INTEGER" property="type" />
   </resultMap>
   <sql id="Example_Where_Clause">
     <where>
@@ -66,7 +67,7 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    share_id, panel_group_id, user_id, create_time
+    share_id, panel_group_id, user_id, create_time, `type`
   </sql>
   <select id="selectByExample" parameterType="io.dataease.base.domain.PanelShareExample" resultMap="BaseResultMap">
     select
@@ -100,9 +101,9 @@
   </delete>
   <insert id="insert" parameterType="io.dataease.base.domain.PanelShare">
     insert into panel_share (share_id, panel_group_id, user_id, 
-      create_time)
+      create_time, `type`)
     values (#{shareId,jdbcType=BIGINT}, #{panelGroupId,jdbcType=VARCHAR}, #{userId,jdbcType=BIGINT}, 
-      #{createTime,jdbcType=BIGINT})
+      #{createTime,jdbcType=BIGINT}, #{type,jdbcType=INTEGER})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelShare">
     insert into panel_share
@@ -119,6 +120,9 @@
       <if test="createTime != null">
         create_time,
       </if>
+      <if test="type != null">
+        `type`,
+      </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="shareId != null">
@@ -133,6 +137,9 @@
       <if test="createTime != null">
         #{createTime,jdbcType=BIGINT},
       </if>
+      <if test="type != null">
+        #{type,jdbcType=INTEGER},
+      </if>
     </trim>
   </insert>
   <select id="countByExample" parameterType="io.dataease.base.domain.PanelShareExample" resultType="java.lang.Long">
@@ -156,6 +163,9 @@
       <if test="record.createTime != null">
         create_time = #{record.createTime,jdbcType=BIGINT},
       </if>
+      <if test="record.type != null">
+        `type` = #{record.type,jdbcType=INTEGER},
+      </if>
     </set>
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
@@ -166,7 +176,8 @@
     set share_id = #{record.shareId,jdbcType=BIGINT},
       panel_group_id = #{record.panelGroupId,jdbcType=VARCHAR},
       user_id = #{record.userId,jdbcType=BIGINT},
-      create_time = #{record.createTime,jdbcType=BIGINT}
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      `type` = #{record.type,jdbcType=INTEGER}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -183,6 +194,9 @@
       <if test="createTime != null">
         create_time = #{createTime,jdbcType=BIGINT},
       </if>
+      <if test="type != null">
+        `type` = #{type,jdbcType=INTEGER},
+      </if>
     </set>
     where share_id = #{shareId,jdbcType=BIGINT}
   </update>
@@ -190,7 +204,8 @@
     update panel_share
     set panel_group_id = #{panelGroupId,jdbcType=VARCHAR},
       user_id = #{userId,jdbcType=BIGINT},
-      create_time = #{createTime,jdbcType=BIGINT}
+      create_time = #{createTime,jdbcType=BIGINT},
+      `type` = #{type,jdbcType=INTEGER}
     where share_id = #{shareId,jdbcType=BIGINT}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.java
index 784e6317f1..0c648ca388 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.java
@@ -11,4 +11,6 @@ public interface ExtPanelShareMapper {
     int batchInsert(List<PanelShare> shares);
 
     List<PanelShareDto> query(GridExample example);
+
+    List<PanelShare> queryWithResource(GridExample example);
 }
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.xml
index 6da4ef665b..960476a319 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.xml
@@ -32,6 +32,18 @@
 
     </select>
 
+    <select id="queryWithResource" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="io.dataease.base.mapper.PanelShareMapper.BaseResultMap">
+        select from panel_share
+        <if test="_parameter != null">
+            <include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
+        </if>
+        <if test="orderByClause != null">
+            order by ${orderByClause}
+        </if>
+
+
+    </select>
+
 
 
 
diff --git a/backend/src/main/java/io/dataease/controller/panel/api/ShareApi.java b/backend/src/main/java/io/dataease/controller/panel/api/ShareApi.java
index f12e247fd6..14cc345578 100644
--- a/backend/src/main/java/io/dataease/controller/panel/api/ShareApi.java
+++ b/backend/src/main/java/io/dataease/controller/panel/api/ShareApi.java
@@ -1,5 +1,6 @@
 package io.dataease.controller.panel.api;
 
+import io.dataease.base.domain.PanelShare;
 import io.dataease.controller.request.panel.PanelShareRequest;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.dto.panel.PanelShareDto;
@@ -25,5 +26,10 @@ public interface ShareApi {
     @PostMapping("/treeList")
     List<PanelShareDto> treeList(BaseGridRequest request);
 
+
+    @ApiOperation("根据资源查询分享")
+    @PostMapping("/queryWithResourceId")
+    List<PanelShare> queryWithResourceId(BaseGridRequest request);
+
     
 }
diff --git a/backend/src/main/java/io/dataease/controller/panel/server/ShareServer.java b/backend/src/main/java/io/dataease/controller/panel/server/ShareServer.java
index 99fcad3163..82845e111b 100644
--- a/backend/src/main/java/io/dataease/controller/panel/server/ShareServer.java
+++ b/backend/src/main/java/io/dataease/controller/panel/server/ShareServer.java
@@ -1,15 +1,19 @@
 package io.dataease.controller.panel.server;
 
+import io.dataease.base.domain.PanelShare;
 import io.dataease.controller.panel.api.ShareApi;
 import io.dataease.controller.request.panel.PanelShareRequest;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.dto.panel.PanelShareDto;
 import io.dataease.service.panel.ShareService;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RestController;
 
 import javax.annotation.Resource;
 import java.util.List;
 
+@RestController
 public class ShareServer implements ShareApi {
 
     @Resource
@@ -23,4 +27,10 @@ public class ShareServer implements ShareApi {
     public List<PanelShareDto> treeList(@RequestBody BaseGridRequest request) {
         return shareService.queryTree(request);
     }
+
+
+    @Override
+    public List<PanelShare> queryWithResourceId(@RequestBody BaseGridRequest request) {
+        return shareService.queryWithResource(request);
+    }
 }
diff --git a/backend/src/main/java/io/dataease/service/panel/ShareService.java b/backend/src/main/java/io/dataease/service/panel/ShareService.java
index 0d90204ced..b6502eaf20 100644
--- a/backend/src/main/java/io/dataease/service/panel/ShareService.java
+++ b/backend/src/main/java/io/dataease/service/panel/ShareService.java
@@ -90,5 +90,10 @@ public class ShareService {
         return map.entrySet().stream().map(entry -> PanelShareDto.builder().name(entry.getKey()).children(entry.getValue()).build()).collect(Collectors.toList());
     }
 
+    public List<PanelShare> queryWithResource(BaseGridRequest request){
+        GridExample example = request.convertExample();
+        return extPanelShareMapper.queryWithResource(example);
+    }
+
 
 }
diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
index 82cdf1f357..8b7d88331d 100644
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -58,6 +58,8 @@ spring.cache.ehcache.config=classpath:/ehcache/ehcache.xml
 logging.level.org.springframework.web=trace
 logging.level.org.springframework.boot.web=trace
 spring.mvc.log-request-details=true
+pagehelper.PageRowBounds=true
+
 
 
 
diff --git a/backend/src/main/resources/db/migration/V12__panel_table.sql b/backend/src/main/resources/db/migration/V12__panel_table.sql
index 0a4fea5f3c..d724b5609e 100644
--- a/backend/src/main/resources/db/migration/V12__panel_table.sql
+++ b/backend/src/main/resources/db/migration/V12__panel_table.sql
@@ -88,9 +88,12 @@ CREATE TABLE `panel_share` (
   `panel_group_id` varchar(50) DEFAULT NULL COMMENT '仪表板ID',
   `user_id` bigint(20) DEFAULT NULL COMMENT '用户ID',
   `create_time` bigint(13) DEFAULT NULL COMMENT '创建日期',
+  `type` int(8) DEFAULT NULL COMMENT '类型',
   PRIMARY KEY (`share_id`) USING BTREE,
   UNIQUE KEY `UK_share_user_id` (`user_id`) USING BTREE,
-  UNIQUE KEY `UK_share_panel_group_id` (`panel_group_id`) USING BTREE
+  UNIQUE KEY `UK_share_panel_group_id` (`panel_group_id`) USING BTREE,
+  UNIQUE KEY `UK_share_type` (`type`) USING BTREE
+
 ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='仪表板分享';
 
 
diff --git a/frontend/src/components/vue-drag-resize-rotate/index.vue b/frontend/src/components/vue-drag-resize-rotate/index.vue
index 16686fc84e..108e9acfd6 100644
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -600,10 +600,10 @@ export default {
   },
 
   methods: {
-    removeView(){
+    removeView() {
       debugger
-      console.log(this.viewId);
-      this.$emit('removeView',this.viewId)
+      console.log(this.viewId)
+      this.$emit('removeView', this.viewId)
     },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 7326ce4c68..22ce2e0eed 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -8,15 +8,13 @@ import i18n from './lang' // internationalization
 import App from './App'
 import store from './store'
 import router from './router'
-
+import message from './utils/message'
 import '@/icons' // icon
 import '@/permission' // permission control
 import api from '@/api/index.js'
 import filter from '@/filter/filter'
 import directives from './directive'
 
-import './styles/vdrr/common-temp.scss'
-
 import vdrr from './components/vue-drag-resize-rotate'
 Vue.component('vdrr', vdrr)
 
@@ -27,7 +25,7 @@ import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 
 import UmyUi from 'umy-ui'
-import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
+
 Vue.use(UmyUi)
 
 /**
@@ -55,6 +53,7 @@ Vue.use(Fit2CloudUI, {
 })
 Vue.use(filter)
 Vue.use(directives)
+Vue.use(message)
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/frontend/src/store/modules/panel.js b/frontend/src/store/modules/panel.js
index d90be32b5a..5f10d361a9 100644
--- a/frontend/src/store/modules/panel.js
+++ b/frontend/src/store/modules/panel.js
@@ -2,8 +2,8 @@
 const getDefaultState = () => {
   return {
     panelName: '',
-    panelInfo:{
-      name:''
+    panelInfo: {
+      name: ''
     }
   }
 }
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index c8f6acbde9..eadcbd344f 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -6,6 +6,8 @@
 @import './sidebar.scss';
 @import './topbar.scss';
 @import "~fit2cloud-ui/src/styles/index.scss";
+@import './vdrr/common-temp.scss';
+@import '~umy-ui/lib/theme-chalk/index.css';// 引入样式
 
 // @import '../metersphere/common/css/index.css';
 
@@ -69,3 +71,42 @@ div:focus {
 .app-container {
   padding: 20px;
 }
+
+.de-dialog {
+    width: 30% !important;
+
+    .el-dialog__header{
+        background-color: #f4f4f5;
+        padding: 10px 20px !important;
+    }
+    .el-dialog__body{
+        padding: 1px 20px !important;
+
+    }
+}
+
+.de-search-header {
+    .el-tabs__header{
+        display: none !important;;
+    }
+}
+
+.de-input{
+    margin-bottom: 14px;
+    margin-top: 10px;
+    .el-input{
+        .el-input__inner {
+            line-height: 30px !important;
+            height: 30px !important;
+            border-right: none;
+
+        }
+    }
+    .el-input__inner:focus{
+        border-color: #E6E6E6 !important;
+    }
+    .el-input-group__append {
+        background-color: #ffffff;
+    }
+
+}
diff --git a/frontend/src/utils/request.js b/frontend/src/utils/request.js
index 7232afaea8..b48224cdc3 100644
--- a/frontend/src/utils/request.js
+++ b/frontend/src/utils/request.js
@@ -14,7 +14,7 @@ const RefreshTokenKey = Config.RefreshTokenKey
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 10000 // request timeout
 })
 
 // request interceptor
diff --git a/frontend/src/views/panel/GrantAuth/dept/index.vue b/frontend/src/views/panel/GrantAuth/dept/index.vue
new file mode 100644
index 0000000000..f2d652491c
--- /dev/null
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="my_table">
+    <el-table
+      ref="table"
+      :data="data"
+      lazy
+      :show-header="true"
+      :load="loadExpandDatas"
+      style="width: 100%"
+      :row-style="{height: '35px'}"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      row-key="deptId"
+    >
+      <el-table-column label="所有组织" prop="name" />
+      <el-table-column type="selection" fixd />
+      <!-- <el-table-column label="分享给" prop="deptId" width="80" fixed="right">
+        <template slot-scope="scope">
+          <el-checkbox :v-model="scope.row.deptId===0" />
+        </template>
+      </el-table-column> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getDeptTree, loadTable } from '@/api/system/dept'
+import { formatCondition } from '@/utils/index'
+export default {
+  name: 'GrantDept',
+  props: {
+    resourceId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      data: [],
+      defaultCondition: {
+        field: 'pid',
+        operator: 'eq',
+        value: 0
+      }
+    //   maps: new Map()
+    }
+  },
+  created() {
+    this.search()
+  },
+  methods: {
+    // 加载下一级子节点数据
+    loadExpandDatas(row, treeNode, resolve) {
+      getDeptTree(row.deptId).then(res => {
+        let data = res.data
+        data = data.map(obj => {
+          if (obj.subCount > 0) {
+            obj.hasChildren = true
+          }
+          return obj
+        })
+        // this.maps.set(row.deptId, { row, treeNode, resolve })
+        resolve && resolve(data)
+      })
+    },
+    // 加载表格数据
+    search(condition) {
+      // this.setTableAttr()
+      this.data = []
+      let param = {}
+      if (condition && condition.quick) {
+        const con = this.quick_condition(condition)
+        param = formatCondition(con)
+      } else {
+        param = { conditions: [this.defaultCondition] }
+      }
+
+      // param.conditions.push(this.defaultCondition)
+      loadTable(param).then(res => {
+        let data = res.data
+        data = data.map(obj => {
+          if (obj.subCount > 0) {
+            obj.hasChildren = true
+          }
+          return obj
+        })
+
+        if (condition && condition.quick) {
+          data = this.buildTree(data)
+          // this.setTableAttr(true)
+        }
+        this.data = data
+      })
+    },
+
+    buildTree(arrs) {
+      const idMapping = arrs.reduce((acc, el, i) => {
+        acc[el.deptId] = i
+        return acc
+      }, {})
+      const roots = []
+      arrs.forEach(el => {
+        // 判断根节点
+        if (el.pid === null || el.pid === 0) {
+          roots.push(el)
+          return
+        }
+        // 用映射表找到父元素
+        const parentEl = arrs[idMapping[el.pid]]
+        // 把当前元素添加到父元素的`children`数组中
+        parentEl.children = [...(parentEl.children || []), el]
+      })
+      return roots
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.my_table >>> .el-table__row>td{
+  /* 去除表格线 */
+  border: none;
+  padding: 0 0;
+}
+.my_table >>> .el-table th.is-leaf {
+  /* 去除上边框 */
+    border: none;
+}
+.my_table >>> .el-table::before{
+  /* 去除下边框 */
+  height: 0;
+}
+</style>
diff --git a/frontend/src/views/panel/GrantAuth/index.vue b/frontend/src/views/panel/GrantAuth/index.vue
index 8fbbaade4c..3c6f310b6e 100644
--- a/frontend/src/views/panel/GrantAuth/index.vue
+++ b/frontend/src/views/panel/GrantAuth/index.vue
@@ -1,14 +1,28 @@
 <template>
-  <el-tabs v-model="activeName" @tab-click="handleClick">
-    <el-tab-pane label="部门" name="first">部门</el-tab-pane>
-    <el-tab-pane label="角色" name="second">角色</el-tab-pane>
-    <el-tab-pane label="用户" name="third">用户</el-tab-pane>
-  </el-tabs>
+  <div>
+    <el-button v-show="!showSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showSearchWidget" />
+    <div v-show="showSearchInput" class="de-input">
+      <el-input v-model="key">
+        <el-button slot="append" icon="el-icon-close" @click="closeSearchWidget" />
+      </el-input>
+    </div>
+
+    <el-tabs v-model="activeName" :class="{'de-search-header': showSearchInput}" @tab-click="handleClick">
+      <el-tab-pane :lazy="true" class="de-tab" label="部门" name="1"><grant-dept :resource-id="resourceId" /></el-tab-pane>
+      <el-tab-pane :lazy="true" class="de-tab" label="角色" name="2"><grant-role :resource-id="resourceId" /></el-tab-pane>
+      <el-tab-pane :lazy="true" class="de-tab" label="用户" name="3"><grant-user :resource-id="resourceId" /></el-tab-pane>
+    </el-tabs>
+  </div>
+
 </template>
 
 <script>
+import GrantDept from './dept'
+import GrantRole from './role'
+import GrantUser from './user'
 export default {
   name: 'GrantAuth',
+  components: { GrantDept, GrantRole, GrantUser },
   props: {
     resourceId: {
       type: String,
@@ -17,14 +31,47 @@ export default {
   },
   data() {
     return {
-      activeName: 'second'
+      activeName: '1',
+      showSearchInput: false,
+      key: null
     }
   },
 
   methods: {
     handleClick(tab, event) {
       console.log(tab, event)
+    },
+    showSearchWidget() {
+      this.showSearchInput = true
+    },
+    closeSearchWidget() {
+      this.showSearchInput = false
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.de-tab {
+    border:1px solid #E6E6E6;
+    min-height:200px !important;
+    max-height:300px !important;
+    overflow:auto;
+}
+.de-icon {
+    position: absolute;
+    right: 20px;
+    top: 50px;
+    z-index: 99;
+}
+.el-input-group__append{
+    background-color: #ffffff;
+}
+.el-input__inner{
+    border-right: none;
+}
+
+// ::-webkit-scrollbar {
+
+// }
+</style>
diff --git a/frontend/src/views/panel/GrantAuth/role/index.vue b/frontend/src/views/panel/GrantAuth/role/index.vue
new file mode 100644
index 0000000000..8785b10702
--- /dev/null
+++ b/frontend/src/views/panel/GrantAuth/role/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="my_table">
+    <el-table
+      ref="table"
+      :data="data"
+      :show-header="true"
+      style="width: 100%"
+      :row-style="{height: '35px'}"
+      @filter-change="filterChange"
+    >
+      <el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" />
+      <el-table-column type="selection" fixd />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { roleGrid } from '@/api/system/role'
+import { formatCondition } from '@/utils/index'
+export default {
+  name: 'GrantRole',
+  props: {
+    resourceId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      data: [],
+      defaultHeadName: '全部',
+      columnLabel: null,
+      filter_options: [{ text: '未分享角色', value: 0 }, { text: '已分享角色', value: 1 }],
+      fieldName: 'name'
+    }
+  },
+  created() {
+    this.initColumnLabel()
+    this.search()
+  },
+  methods: {
+    initColumnLabel() {
+      this.columnLabel = this.defaultHeadName
+    },
+
+    search(condition) {
+      const temp = formatCondition(condition)
+      const param = temp || {}
+      roleGrid(1, 0, param).then(response => {
+        const data = response.data
+        // this.total = data.itemCount
+        this.data = data.listObject
+      })
+    },
+    filterHandler(value, row, column) {
+      // const property = column['property']
+      // return row[property] === value
+      return row['code'] === 'admin'
+    },
+
+    filterChange(obj) {
+      const arr = obj[this.fieldName]
+      if (arr.length === 0) {
+        this.initColumnLabel()
+        return
+      }
+      this.columnLabel = this.filter_options[arr[0]].text
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+.my_table >>> .el-table__row>td{
+  /* 去除表格线 */
+  border: none;
+  padding: 0 0;
+}
+.my_table >>> .el-table th.is-leaf {
+  /* 去除上边框 */
+    border: none;
+}
+.my_table >>> .el-table::before{
+  /* 去除下边框 */
+  height: 0;
+}
+</style>
diff --git a/frontend/src/views/panel/GrantAuth/user/index.vue b/frontend/src/views/panel/GrantAuth/user/index.vue
new file mode 100644
index 0000000000..f36929d659
--- /dev/null
+++ b/frontend/src/views/panel/GrantAuth/user/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="my_table">
+    <el-table
+      ref="table"
+      :data="data"
+      :show-header="true"
+      style="width: 100%"
+      :row-style="{height: '35px'}"
+      @filter-change="filterChange"
+    >
+      <el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" />
+      <el-table-column type="selection" fixd />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { userLists } from '@/api/system/user'
+import { formatCondition } from '@/utils/index'
+export default {
+  name: 'GrantUser',
+  props: {
+    resourceId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      data: [],
+      defaultHeadName: '全部',
+      columnLabel: null,
+      filter_options: [{ text: '未分享人员', value: 0 }, { text: '已分享人员', value: 1 }],
+      fieldName: 'nickName'
+    }
+  },
+  created() {
+    this.initColumnLabel()
+    this.search()
+  },
+  methods: {
+    initColumnLabel() {
+      this.columnLabel = this.defaultHeadName
+    },
+    search(condition) {
+      const temp = formatCondition(condition)
+      const param = temp || {}
+      userLists(1, 0, param).then(response => {
+        const data = response.data
+        // this.total = data.itemCount
+        this.data = data.listObject
+      })
+    },
+    filterHandler(value, row, column) {
+      // const property = column['property']
+      // return row[property] === value
+      return row['code'] === 'admin'
+    },
+
+    filterChange(obj) {
+      const arr = obj[this.fieldName]
+      if (arr.length === 0) {
+        this.initColumnLabel()
+        return
+      }
+      this.columnLabel = this.filter_options[arr[0]].text
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+.my_table >>> .el-table__row>td{
+  /* 去除表格线 */
+  border: none;
+  padding: 0 0;
+}
+.my_table >>> .el-table th.is-leaf {
+  /* 去除上边框 */
+    border: none;
+}
+.my_table >>> .el-table::before{
+  /* 去除下边框 */
+  height: 0;
+}
+</style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 9c0a958ae5..f1770358c8 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -114,8 +114,7 @@
         :title="authTitle"
         :visible.sync="authVisible"
         :show-close="false"
-        width="30%"
-        custom-class="authDialog"
+        custom-class="de-dialog"
         :before-close="handleClose"
       >
         <grant-auth :resource-id="authResourceId" />
@@ -484,10 +483,11 @@ export default {
     },
     share(data) {
       this.authResourceId = data.id
-      this.authTitle = '把仪表板[' + data.label + ']分享给'
+      this.authTitle = '把[' + data.label + ']分享给'
       this.authVisible = true
     },
     handleClose(done) {
+      this.authResourceId = null
       this.handleClose = false
     }
   }
@@ -540,8 +540,4 @@ export default {
     line-height: 26px;
   }
 
-  /* .el-dialog authDialog >>> div {
-    padding: 5px !important;
-    padding-bottom:5px !important;
-  } */
 </style>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 8295a524de..f2eca67623 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -34,7 +34,7 @@
       <el-col class="panel-design">
         <!--TODO 仪表盘设计公共设置区域-->
         <el-row class="panel-design-head">
-          <span style="float: left;line-height: 40px; color: gray">名称：{{panelInfo.name}}</span>
+          <span style="float: left;line-height: 40px; color: gray">名称：{{ panelInfo.name }}</span>
           <span style="float: right;line-height: 40px;">
             <el-button size="mini">
               背景图