数据面板增加客服组件

package.json

@@ -55,6 +55,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-draggable-directive": "^1.0.2",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

src/main.js

@@ -1,67 +1,77 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-import Element from 'element-ui'
+import Element from "element-ui";
-import './assets/styles/element-variables.scss'
+import "./assets/styles/element-variables.scss";
 
-import '@/assets/styles/index.scss' // global css
+import "@/assets/styles/index.scss"; // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
-import App from './App'
+import App from "./App";
-import store from './store'
+import store from "./store";
-import router from './router'
+import router from "./router";
-import directive from './directive' // directive
+import directive from "./directive"; // directive
-import plugins from './plugins' // plugins
+import plugins from "./plugins"; // plugins
-import { download } from '@/utils/request'
+import { download } from "@/utils/request";
 
-import './assets/icons' // icon
+import "./assets/icons"; // icon
-import './permission' // permission control
+import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  handleTree,
+} from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
+
+import draggable from "vue-draggable-directive";
+Vue.use(draggable);
 
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
+Vue.prototype.getDicts = getDicts;
-Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.getConfigKey = getConfigKey;
-Vue.prototype.parseTime = parseTime
+Vue.prototype.parseTime = parseTime;
-Vue.prototype.resetForm = resetForm
+Vue.prototype.resetForm = resetForm;
-Vue.prototype.addDateRange = addDateRange
+Vue.prototype.addDateRange = addDateRange;
-Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabel = selectDictLabel;
-Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.selectDictLabels = selectDictLabels;
-Vue.prototype.download = download
+Vue.prototype.download = download;
-Vue.prototype.handleTree = handleTree
+Vue.prototype.handleTree = handleTree;
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
+Vue.component("DictTag", DictTag);
-Vue.component('Pagination', Pagination)
+Vue.component("Pagination", Pagination);
-Vue.component('RightToolbar', RightToolbar)
+Vue.component("RightToolbar", RightToolbar);
-Vue.component('Editor', Editor)
+Vue.component("Editor", Editor);
-Vue.component('FileUpload', FileUpload)
+Vue.component("FileUpload", FileUpload);
-Vue.component('ImageUpload', ImageUpload)
+Vue.component("ImageUpload", ImageUpload);
-Vue.component('ImagePreview', ImagePreview)
+Vue.component("ImagePreview", ImagePreview);
 
-Vue.use(directive)
+Vue.use(directive);
-Vue.use(plugins)
+Vue.use(plugins);
-Vue.use(VueMeta)
+Vue.use(VueMeta);
-DictData.install()
+DictData.install();
 
 /**
  * If you don't want to use mock-server
@@ -73,14 +83,14 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
+  size: Cookies.get("size") || "medium", // set element-ui default size
-})
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
+  render: (h) => h(App),
-})
+});

src/views/index.vue

@@ -114,6 +114,7 @@
         </el-col>
       </el-row>
     </div>
+    <div class="service" v-draggable="{ x: true, y: true }" />
   </div>
 </template>
 
@@ -142,9 +143,7 @@ export default {
     };
   },
   mounted() {
-    // this.$nextTick(() => {
     this.initChart()
-    // })
   },
   methods: {
     initChart() {
@@ -186,6 +185,17 @@ export default {
 .home {
   background-color: #f8f9fd;
 
+  .service {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    bottom: 40px;
+    right: 40px;
+    background-color: #fff;
+    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+  }
+
   &>.title {
     color: rgba(22, 132, 252, 1);
     font-size: 14px;