From ec1962db7f138734b3d7eb7ac760b529c648bfb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com>
Date: Sun, 26 Feb 2023 21:36:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=98=E5=8C=96:=201.?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=8F=B0;=202.=E4=BF=AE=E5=A4=8D=E6=B6=88=E6=81=AF=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83bug;=203.=E4=BF=AE=E5=A4=8D=E7=94=A8=E6=88=B7=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=AF=86=E7=A0=81bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dvadmin/system/views/message_center.py    |   6 +-
 backend/dvadmin/system/views/user.py          |   4 +-
 web/package.json                              |   1 +
 .../dashboard/workbench/components/about.vue  |  32 +
 .../dashboard/workbench/components/index.js   |  13 +
 .../dashboard/workbench/components/time.vue   |  58 ++
 .../dashboard/workbench/components/ver.vue    |  44 ++
 .../workbench/components/welcome.vue          | 113 ++++
 web/src/views/dashboard/workbench/index.vue   | 623 ++++++++++--------
 9 files changed, 613 insertions(+), 281 deletions(-)
 create mode 100644 web/src/views/dashboard/workbench/components/about.vue
 create mode 100644 web/src/views/dashboard/workbench/components/index.js
 create mode 100644 web/src/views/dashboard/workbench/components/time.vue
 create mode 100644 web/src/views/dashboard/workbench/components/ver.vue
 create mode 100644 web/src/views/dashboard/workbench/components/welcome.vue

diff --git a/backend/dvadmin/system/views/message_center.py b/backend/dvadmin/system/views/message_center.py
index 072db85..fbc23ce 100644
--- a/backend/dvadmin/system/views/message_center.py
+++ b/backend/dvadmin/system/views/message_center.py
@@ -121,12 +121,12 @@ class MessageCenterCreateSerializer(CustomModelSerializer):
         users = initial_data.get('target_user', [])
         if target_type in [1]:  # 按角色
             target_role = initial_data.get('target_role',[])
-            users = Users.objects.exclude(is_deleted=True).filter(role__id__in=target_role).values_list('id', flat=True)
+            users = Users.objects.filter(role__id__in=target_role).values_list('id', flat=True)
         if target_type in [2]:  # 按部门
             target_dept = initial_data.get('target_dept',[])
-            users = Users.objects.exclude(is_deleted=True).filter(dept__id__in=target_dept).values_list('id', flat=True)
+            users = Users.objects.filter(dept__id__in=target_dept).values_list('id', flat=True)
         if target_type in [3]:  # 系统通知
-            users = Users.objects.exclude(is_deleted=True).values_list('id', flat=True)
+            users = Users.objects.values_list('id', flat=True)
         targetuser_data = []
         for user in users:
             targetuser_data.append({
diff --git a/backend/dvadmin/system/views/user.py b/backend/dvadmin/system/views/user.py
index 046c2b6..dcc4d80 100644
--- a/backend/dvadmin/system/views/user.py
+++ b/backend/dvadmin/system/views/user.py
@@ -219,10 +219,12 @@ class ExportUserProfileSerializer(CustomModelSerializer):
 
 
 class UserProfileImportSerializer(CustomModelSerializer):
+    password = serializers.CharField(required=True, max_length=50, error_messages={"required": "登录密码不能为空"})
+
     def save(self, **kwargs):
         data = super().save(**kwargs)
         password = hashlib.new(
-            "md5", str(self.initial_data.get("password", "")).encode(encoding="UTF-8")
+            "md5", str(self.initial_data.get("password", "admin123456")).encode(encoding="UTF-8")
         ).hexdigest()
         data.set_password(password)
         data.save()
diff --git a/web/package.json b/web/package.json
index b835106..dc88cd4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -42,6 +42,7 @@
     "sortablejs": "^1.10.1",
     "ua-parser-js": "^0.7.20",
     "vue": "2.7.14",
+    "vue-grid-layout": "^2.4.0",
     "vue-i18n": "^8.15.1",
     "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.6.5",
diff --git a/web/src/views/dashboard/workbench/components/about.vue b/web/src/views/dashboard/workbench/components/about.vue
new file mode 100644
index 0000000..e8571d8
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/about.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-card  shadow="hover" header="关于项目" class="item-background">
+    <p>高性能 / 精致 / 优雅。基于Vue2 + Element-UI 的中后台前端解决方案，如果喜欢就点个星星支持一下。</p>
+    <p>
+      <a href='https://liqianglog.gitee.io/django-vue-admin' target="_blank">
+        <img src='https://liqianglog.gitee.io/django-vue-admin/badge/star.svg?theme=dark' alt='star' style="vertical-align: middle">
+      </a>
+    </p>
+  </el-card>
+</template>
+
+<script>
+export default {
+  title: '关于项目',
+  icon: 'el-icon-setting',
+  description: '点个星星支持一下',
+  height: 20,
+  width: 8,
+  minH: 20,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.item-background p {
+  color: #999;
+}
+</style>
diff --git a/web/src/views/dashboard/workbench/components/index.js b/web/src/views/dashboard/workbench/components/index.js
new file mode 100644
index 0000000..4d5867f
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/index.js
@@ -0,0 +1,13 @@
+import { markRaw } from 'vue'
+
+const resultComps = {}
+const requireComponent = require.context(
+  './', // 在当前目录下查找
+  false, // 不遍历子文件夹
+  /\.vue$/ // 正则匹配 以 .vue结尾的文件
+)
+requireComponent.keys().forEach(fileName => {
+  const comp = requireComponent(fileName)
+  resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
+})
+export default markRaw(resultComps)
diff --git a/web/src/views/dashboard/workbench/components/time.vue b/web/src/views/dashboard/workbench/components/time.vue
new file mode 100644
index 0000000..d9ae761
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/time.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-card shadow="hover" header="时钟" class="item-background">
+    <div class="time">
+      <h2>{{ time }}</h2>
+      <p>{{ day }}</p>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+
+export default {
+  title: '时钟',
+  icon: 'el-icon-alarm-clock',
+  description: '演示部件效果',
+  height: 17,
+  minH: 17,
+  width: 8,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {
+      time: '',
+      day: ''
+    }
+  },
+  mounted () {
+    this.showTime()
+    setInterval(() => {
+      this.showTime()
+    }, 1000)
+  },
+  methods: {
+    showTime () {
+      this.time = dayjs().format('hh:mm:ss')
+      this.day = dayjs().format('YYYY年MM月DD日')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.item-background {
+  background: linear-gradient(to right, #8E54E9, #4776E6);
+  color: #fff;
+}
+
+.time h2 {
+  font-size: 40px;
+}
+
+.time p {
+  font-size: 14px;
+  margin-top: 10px;
+  opacity: 0.7;
+}
+</style>
diff --git a/web/src/views/dashboard/workbench/components/ver.vue b/web/src/views/dashboard/workbench/components/ver.vue
new file mode 100644
index 0000000..841a2ee
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/ver.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-card shadow="hover" header="版本信息">
+    <div style="height: 70px;text-align: center;">
+      <h2 style="margin-top: 5px;">Dvadmin</h2>
+      <p style="margin-top: 5px;">最新版本 {{ ver }}</p>
+    </div>
+    <div style="margin-top: 5px;">
+      <el-button type="primary" plain round @click="golog">更新日志</el-button>
+      <el-button type="primary" plain round @click="gogit">gitee</el-button>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  title: '版本信息',
+  icon: 'el-icon-monitor',
+  description: '当前项目版本信息',
+  height: 22,
+  width: 8,
+  minH: 22,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {
+      ver: 'loading...'
+    }
+  },
+  mounted () {
+    this.getVer()
+  },
+  methods: {
+    async getVer () {
+      this.ver = 'v2.0.9'
+    },
+    golog () {
+      window.open('https://gitee.com/liqianglog/django-vue-admin/releases')
+    },
+    gogit () {
+      window.open('https://gitee.com/liqianglog/django-vue-admin')
+    }
+  }
+}
+</script>
diff --git a/web/src/views/dashboard/workbench/components/welcome.vue b/web/src/views/dashboard/workbench/components/welcome.vue
new file mode 100644
index 0000000..87229fb
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/welcome.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-card shadow="hover" header="欢迎">
+    <div class="welcome">
+      <div class="logo">
+        <img src="/image/django-vue-admin.png">
+        <h2>欢迎体验 Dvadmin</h2>
+      </div>
+      <div class="tips">
+        <div class="tips-item">
+          <div class="tips-item-icon">
+            <i class="el-icon-menu"></i>
+          </div>
+          <div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
+        </div>
+        <div class="tips-item">
+          <div class="tips-item-icon">
+            <i class="el-icon-star-on"></i>
+          </div>
+          <div class="tips-item-message">热爱Python和Vue,打造一个低代码开源平台，并且持续着。</div>
+        </div>
+        <div class="tips-item">
+          <div class="tips-item-icon">
+            <i class="el-icon-milk-tea"></i>
+          </div>
+          <div class="tips-item-message">项目目的：让前端和后端工作更快乐</div>
+        </div>
+      </div>
+      <div class="actions">
+        <el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  title: '欢迎',
+  icon: 'el-icon-present',
+  description: '项目特色以及文档链接',
+  height: 50,
+  minH: 50,
+  width: 8,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {}
+  },
+  methods: {
+    godoc () {
+      window.open('https://www.django-vue-admin.com/')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.welcome {
+}
+
+.welcome .logo {
+  text-align: center;
+}
+
+.welcome .logo img {
+  vertical-align: bottom;
+  width: 100px;
+  height: 100px;
+  margin-bottom: 20px;
+}
+
+.welcome .logo h2 {
+  font-size: 30px;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tips {
+  margin-top: 20px;
+  padding: 0 40px;
+}
+
+.tips-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7.5px 0;
+}
+
+.tips-item-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 18px;
+  margin-right: 20px;
+  color: var(--el-color-primary);
+  background: rgba(180, 180, 180, 0.1);
+}
+
+.tips-item-message {
+  flex: 1;
+  font-size: 14px;
+}
+
+.actions {
+  text-align: center;
+  margin: 40px 0 20px 0;
+}
+</style>
diff --git a/web/src/views/dashboard/workbench/index.vue b/web/src/views/dashboard/workbench/index.vue
index 9c15a8d..88e7227 100644
--- a/web/src/views/dashboard/workbench/index.vue
+++ b/web/src/views/dashboard/workbench/index.vue
@@ -1,313 +1,382 @@
 <template>
   <d2-container>
-    <div class="page-header">
-
-      <el-avatar src="https://q1.qlogo.cn/g?b=qq&amp;nk=190848757&amp;s=640" class="user-avatar">
-
-      </el-avatar>
-      <div class="title">
-        <h1>早安, DVAdmin, 开始您一天的工作吧！</h1>
-        <span> 今日晴，20℃ - 32℃！ </span>
+    <div class="component-header">
+      <div class="set-btn-class">
+        <el-button v-if="customizing" type="primary" icon="el-icon-check" round @click="save">完成</el-button>
+        <el-button v-else type="primary" icon="el-icon-edit" round @click="custom">自定义</el-button>
+      </div>
+      <div v-if="customizing" class="all-component-class">
+        <el-card style="margin-bottom: 20px">
+          <div slot="header">
+            <i class="el-icon-circle-plus"></i>
+            <span>添加部件</span>
+            <el-button-group style="float: right">
+              <el-button type="primary" size="mini" @click="backDefaul()">恢复默认</el-button>
+              <el-button type="danger" size="mini" @click="close()">关闭</el-button>
+            </el-button-group>
+          </div>
+          <div class="widgets-list">
+            <div v-if="myCompsList.length<=0" class="widgets-list-nodata">
+              <el-empty description="没有部件啦" :image-size="60"></el-empty>
+            </div>
+            <div v-for="item in myCompsList" :key="item.title" class="widgets-list-item" @drag="onDrag($event,item)"
+                 @dragend="onDragend($event,item)" draggable="true"
+                 unselectable="on">
+              <el-card style="width: 300px">
+                <div slot="header">
+                  <i :class="item.icon"></i>
+                  <span> {{ item.title }}</span>
+                  <el-button type="primary" style="float: right;" size="mini" @click="push(item)">添加</el-button>
+                </div>
+                <div class="item-info">
+                  <p>{{ item.description }}</p>
+                </div>
+              </el-card>
+            </div>
+          </div>
+        </el-card>
       </div>
     </div>
-
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>友情链接</span>
-
-            <el-button style="float: right; padding: 3px 0" type="text">
-              <el-link href="https://bbs.django-vue-admin.com" target="_blank" type="primary">更多</el-link>
-            </el-button>
-          </div>
-          <el-row>
-              <el-col :span="8" v-for="({name,imageUrl,slogan,link},index) in projects" :key="index">
-              <el-card shadow="hover" style="padding: 0">
-                <div class="project-detail">
-                  <div>
-                    <a :href="link" target="_blank">
-                      <img :src="imageUrl" alt="">
-                      <span v-text="name" class="name"></span>
-                    </a>
-                  </div>
-                  <div v-text="slogan" class="slogan" :title="slogan"></div>
-                </div>
-
-              </el-card>
-              </el-col>
-          </el-row>
-        </el-card>
-
-      </el-col>
-
-      <el-col :span="12">
-        <div class="grid-content bg-purple">
-
-          <el-card class="box-card" >
-            <div slot="header" class="clearfix">
-              <span>快捷导航</span>
-            </div>
-            <el-row>
-              <el-col :span="8" v-for="({name,icon,route,color},index) of navigators" :key="index" style="padding: 0">
-                <el-card shadow="hover">
-                  <div  style="display: flex;align-items: center;flex-direction: column;cursor: pointer" @click="()=>{gotoRoute(route)}">
-                    <d2-icon-svg :name="icon" style="width: 25px;height: 25px;" :style="{fill:color}"/>
-                    <div style="text-align: center;font-size: 12px;margin-top: 20px" v-text="name"></div>
-                  </div>
-                </el-card>
-              </el-col>
-            </el-row>
-          </el-card>
-
-          <el-card class="box-card"  style="margin-top: 25px">
-            <div class="work">
-              <d2-icon-svg name="work" style="margin-left: 50%;transform: translateX(-50%);height: 216px"/>
-            </div>
-          </el-card>
+    <div class="widgets" ref="widgets">
+      <div :class="['widgets-wrapper',customizing?'widgets-wrapper-bg':'']">
+        <div v-if="nowCompsList.length<=0" class="no-widgets">
+          <el-empty image="img/no-widgets.svg" description="没有部件啦" :image-size="280"></el-empty>
         </div>
-      </el-col>
-    </el-row>
+        <grid-layout
+          ref="gridlayout"
+          :layout.sync="layout"
+          :col-num="24"
+          :row-height="1"
+          :is-draggable="customizing"
+          :vertical-compact="false"
+          :use-css-transforms="true"
+          :autoSize="true"
+        >
+          <grid-item v-for="(item, index) in layout"
+                     :static="item.static"
+                     :x="item.x"
+                     :y="item.y"
+                     :w="item.w"
+                     :h="item.h"
+                     :i="item.i"
+                     :key="index"
+                     :isResizable="customizing"
 
+          >
+            <div  v-if="customizing" class="customize-overlay">
+              <el-button class="close" type="danger" plain icon="el-icon-close" size="small"
+                         @click="remove(index)"></el-button>
+              <label>
+                <i :class="allComps[item.element].icon"></i>
+                {{ allComps[item.element].title }}</label>
+            </div>
+            <component :class="customizing?'set-component-bg':''"  :is="allComps[item.element]"></component>
+          </grid-item>
+        </grid-layout>
+      </div>
+    </div>
   </d2-container>
 </template>
 
 <script>
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { PieChart } from 'echarts/charts'
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  PieChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent
-])
+import draggable from 'vuedraggable'
+import allComps from './components'
+import util from '@/libs/util'
+import VueGridLayout from 'vue-grid-layout'
+import XEUtils from 'xe-utils'
+const mouseXY = { x: null, y: null }
+const DragPos = { x: 0, y: 0, w: 1, h: 1, i: null }
 export default {
-  name: 'workbench',
+  components: {
+    draggable,
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem
+  },
   data () {
     return {
-      projects: [
-        {
-          name: '官方文档',
-          imageUrl: '/image/django-vue-admin.png',
-          slogan: 'Django-Vue-Admin 是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。',
-          link: 'http://django-vue-admin.com'
-        },
-        {
-          name: '官方论坛',
-          imageUrl: '/image/django-vue-admin.png',
-          slogan: 'Django-Vue-Admin 官方论坛',
-          link: 'http://bbs.django-vue-admin.com'
-        },
-        {
-          name: 'D2admin',
-          imageUrl: '/image/d2-pub.png',
-          slogan: 'D2Admin (opens new window)是一个完全 开源免费 的企业中后台产品前端集成方案，使用最新的前端技术栈，' +
-            '小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统快速开发。',
-          link: 'https://d2.pub/zh'
-        },
-        {
-          name: 'SimpleUi',
-          imageUrl: '/image/simple-ui.png',
-          slogan: '一个基于Django Admin的现代化主题。',
-          link: 'https://simpleui.72wo.com/'
-        },
-        {
-          name: '若依',
-          imageUrl: '/image/ruoyi.png',
-          slogan: '基于SpringBoot、Shiro、Mybatis的权限后台管理系统。',
-          link: 'http://ruoyi.vip/'
-        },
-        {
-          name: 'Gin-Vue-Admin',
-          imageUrl: '/image/gin-vue-admin.png',
-          slogan: '使用gin+vue进行极速开发的全栈后台管理系统。',
-          link: 'https://www.gin-vue-admin.com/'
-        },
-        {
-          name: 'DCM',
-          imageUrl: '/image/django-comment-migrate.png',
-          slogan: '这是一个Django model注释迁移的app',
-          link: 'https://github.com/starryrbs/django-comment-migrate'
-        },
-        {
-          name: 'Jetbrains',
-          imageUrl: '/image/jetbrains.jpeg',
-          slogan: '我们构建我们的软件，让您可以享受构建自己的软件的乐趣',
-          link: 'https://www.jetbrains.com/'
-        },
-        {
-          name: 'Django',
-          imageUrl: '/image/django.png',
-          slogan: '有期限的完美主义者的网络框架。',
-          link: 'https://github.com/django/django'
-        }
-      ],
-      navigators: [
-        {
-          name: '控制台',
-          icon: 'home',
-          route: {
-            name: 'index'
-          },
-          color: 'rgb(31, 218, 202);'
-        },
-        {
-          name: '部门管理',
-          icon: 'department',
-          route: {
-            name: 'dept'
-          },
-          color: 'rgb(225, 133, 37);'
-        },
-        {
-          name: '角色管理',
-          icon: 'role',
-          route: {
-            name: 'role'
-          },
-          color: 'rgb(191, 12, 44);'
-        },
-        {
-          name: '菜单管理',
-          icon: 'menu',
-          route: {
-            name: 'menu'
-          },
-          color: 'rgb(63, 178, 127);'
-        },
-        {
-          name: '用户管理',
-          icon: 'user',
-          route: {
-            name: 'user'
-          },
-          color: 'rgb(191, 12, 44);'
-        },
-        {
-          name: '日志管理',
-          icon: 'log',
-          route: {
-            name: 'operationLog'
-          },
-          color: 'rgb(0, 216, 255);'
-        }
-      ],
-      chartData: {
-        columns: ['日期', '销售额'],
-        rows: [
-          { 日期: '1月1日', 销售额: 123 },
-          { 日期: '1月2日', 销售额: 1223 },
-          { 日期: '1月3日', 销售额: 2123 },
-          { 日期: '1月4日', 销售额: 4123 },
-          { 日期: '1月5日', 销售额: 3123 },
-          { 日期: '1月6日', 销售额: 7123 }
+      customizing: false,
+      allComps: allComps,
+      selectLayout: [],
+      defaultGrid: {
+        // 默认分栏数量和宽度 例如 [24] [18,6] [8,8,8] [6,12,6]
+        layout: [12, 6, 6],
+        // 小组件分布，com取值:views/home/components 文件名
+        copmsList: [
+          ['welcome'],
+          ['about', 'ver'],
+          ['time', 'progress']
         ]
+      },
+      defaultLayout: [],
+      layout: [
+        // { x: 0, y: 0, w: 2, h: 2, i: '0', element: 'welcome' },
+        // { x: 2, y: 0, w: 2, h: 4, i: '1', element: 'about' },
+        // { x: 4, y: 0, w: 2, h: 5, i: '2', element: 'time' },
+        // { x: 6, y: 0, w: 2, h: 3, i: '3', element: 'progress' }
+      ]
+    }
+  },
+  created () {
+    this.layout = JSON.parse(util.cookies.get('grid-layout') || JSON.stringify(this.defaultLayout))
+  },
+  mounted () {
+    document.addEventListener('dragover', function (e) {
+      mouseXY.x = e.clientX
+      mouseXY.y = e.clientY
+    }, false)
+    this.$emit('on-mounted')
+  },
+  computed: {
+    allCompsList () {
+      var allCompsList = []
+      for (var key in this.allComps) {
+        allCompsList.push({
+          key: key,
+          title: allComps[key].title,
+          icon: allComps[key].icon,
+          height: allComps[key].height,
+          width: allComps[key].width,
+          maxH: allComps[key].maxH || Infinity,
+          maxW: allComps[key].maxW || Infinity,
+          isResizable: allComps[key].isResizable || null,
+          description: allComps[key].description
+        })
       }
+      return allCompsList
+    },
+    myCompsList () {
+      return this.allCompsList
+    },
+    nowCompsList () {
+      return this.allCompsList
     }
   },
   methods: {
-    gotoRoute (route) {
-      this.$router.push(route)
+    // 开启自定义
+    custom () {
+      this.customizing = true
+      const oldWidth = this.$refs.widgets.offsetWidth
+      this.$nextTick(() => {
+        const scale = this.$refs.widgets.offsetWidth / oldWidth
+        this.$refs.widgets.style.setProperty('transform', `scale(${scale})`)
+      })
+    },
+    // 设置布局
+    setLayout (layout) {
+      // 暂定
+    },
+    getLayoutElementNumber (elementName) {
+      // var index = 0
+      // this.layout.map(res => {
+      //   if (elementName === res.element) {
+      //     index += 1
+      //   }
+      // })
+      // return index + 1
+      return elementName + this.layout.length
+    },
+    // 追加
+    push (item) {
+      console.log(1, item)
+      this.layout.push({
+        x: 6,
+        y: 0,
+        w: item.width,
+        h: item.height,
+        isResizable: item.isResizable || null,
+        i: this.getLayoutElementNumber(item.key),
+        element: item.key
+      })
+    },
+    // 删除组件
+    remove (index) {
+      this.layout.splice(index, 1)
+    },
+    // 保存
+    save () {
+      console.log(this.layout)
+      this.customizing = false
+      this.$refs.widgets.style.removeProperty('transform')
+      util.cookies.set('grid-layout', this.layout)
+    },
+    // 恢复默认
+    backDefaul () {
+      this.customizing = false
+      this.$refs.widgets.style.removeProperty('transform')
+      this.layout = JSON.parse(JSON.stringify(this.defaultLayout))
+      util.cookies.remove('grid-layout')
+    },
+    // 关闭
+    close () {
+      this.customizing = false
+      this.$refs.widgets.style.removeProperty('transform')
+    },
+    // 拖拽事件
+    onDrag (e, item) {
+      const { key, width, height } = item
+      const parentRect = this.$refs.widgets.getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      const cloneLayout = XEUtils.clone(this.layout, true)
+      if (mouseInGrid === true && (cloneLayout.findIndex(item => item.i === this.getLayoutElementNumber(key)) === -1)) {
+        // this.layout.push({
+        //   x: (this.layout.length * 2) % (this.colNum || 12),
+        //   y: this.layout.length + (this.colNum || 12), // puts it at the bottom
+        //   w: width,
+        //   h: height,
+        //   i: this.getLayoutElementNumber(key),
+        //   element: key
+        // })
+      }
+      const index = this.layout.findIndex(item => item.i === this.getLayoutElementNumber(key))
+      if (index !== -1) {
+        try {
+          this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = 'none'
+        } catch {
+        }
+        const el = this.$refs.gridlayout.$children[index]
+        el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }
+        const new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
+        if (mouseInGrid === true) {
+          this.$refs.gridlayout.dragEvent('dragstart', this.getLayoutElementNumber(key), new_pos.x, new_pos.y, 1, 1)
+          DragPos.i = String(index)
+          DragPos.x = this.layout[index].x
+          DragPos.y = this.layout[index].y
+        }
+        if (mouseInGrid === false) {
+          this.$refs.gridlayout.dragEvent('dragend', this.getLayoutElementNumber(key), new_pos.x, new_pos.y, 1, 1)
+          this.layout = this.layout.filter(obj => obj.i !== this.getLayoutElementNumber(key))
+        }
+      }
+    },
+    onDragend (e, item) {
+      const { key, width, height } = item
+      const parentRect = this.$refs.widgets.getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true) {
+        this.layout.push({
+          x: DragPos.x,
+          y: DragPos.y,
+          w: width,
+          h: height,
+          i: this.getLayoutElementNumber(key),
+          element: key
+        })
+        this.$refs.gridlayout.dragEvent('dragend', this.getLayoutElementNumber(key), DragPos.x, DragPos.y, 1, 1)
+        this.layout = this.layout.filter(obj => obj.i !== this.getLayoutElementNumber(key))
+        // UNCOMMENT below if you want to add a grid-item
+        /*
+        this.layout.push({
+            x: DragPos.x,
+            y: DragPos.y,
+            w: 1,
+            h: 1,
+            i: DragPos.i,
+        });
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+        try {
+            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+        } catch {
+        }
+        */
+      }
     }
   }
 }
 </script>
-
 <style scoped lang="scss">
+.component-header {
+  background-color: #FFFFFF;
+  position: sticky;
+  top: -20px;
+  z-index: 99;
 
-  $userAvatarLength: 72px;
+  .set-btn-class {
+    float: right;
+    z-index: 99;
+    margin-bottom: 10px;
+  }
 
-  .page-header{
-    box-sizing: border-box;
-    padding: 16px;
-    .user-avatar{
-        width: $userAvatarLength;
-        height: $userAvatarLength;
-        line-height: $userAvatarLength;
-      display: inline-block;
-    }
+  .all-component-class {
+    clear: right;
 
-    .title{
-      display: inline-block;
-      padding: 0 0 0 15px;
-      position: relative;
-      top: -5px;
+    .widgets-list {
+      display: flex;
+      justify-content: space-between;
+      overflow-x: scroll;
+      padding-bottom: 10px;
 
-      h1{
-        font-size: 1.125rem;
-        font-weight: 500;
-        line-height: 1.75rem;
+      .widgets-list-item {
+        margin-right: 10px;
       }
-      span{
-        font-size: 14px;
-        color: rgba(0,0,0,.45);
+
+      .widgets-list-item:last-child {
+        margin-right: 0px;
       }
     }
+  }
+}
 
-  }
+.widgets-wrapper-bg {
+  background: rgba(180, 180, 180, .2);
+  min-height: 500px;
+}
 
-  .project-detail{
-    color: rgba(0,0,0,.45);
-    height: 65px;
-     img {
-       width: 25px;
-       height: 25px;
-     }
-    .name{
-      margin-left: 1rem;
-      font-size: 1rem;
-      line-height: 2rem;
-      height: 2rem;
-      display: inline-block;
-      color: rgba(0,0,0,.85);
-      position: relative;
-      top: -5px;
-    }
-    .slogan{
-      font-size: 12px;
-      padding: 5px 0;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      white-space:nowrap;
-    }
-    .team{
-      font-size: 14px;
-    }
-  }
+.widgets-wrapper .sortable-ghost {
+  opacity: 0.5;
+}
 
-  .activity{
-    padding: 0;
-    .activity-avatar{
-      width: 40px;
-      height: 40px;
-      line-height: 40px;
-    }
-    .activity-detail{
-      padding: 10px;
-      line-height: 15px;
-      font-size: 14px;
-      color: rgba(0,0,0,.85);
-    }
-  }
-  .chart {
-    height: 408px;
-  }
+.set-component-bg{
+  background:rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0,0,0,.5);
+}
 
-  .el-divider--horizontal{
-    margin: 4px 0;
-    background: 0 0;
-    border-top: 1px solid #e8eaec;
+.customize-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 5px;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: move;
+}
+
+.customize-overlay label {
+  background: #409EFF;
+  color: #fff;
+  height: 40px;
+  padding: 0 30px;
+  border-radius: 40px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: move;
+}
+
+.customize-overlay label i {
+  margin-right: 15px;
+  font-size: 24px;
+}
+
+.customize-overlay .close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.customize-overlay .close:focus, .customize-overlay .close:hover {
+  background: #76B1F9;
+}
 
-  }
-  .el-card, .el-message {
-    border-radius: 0;
-  }
 </style>