智能看板自定义常用功能

package-lock.json

@@ -21,6 +21,7 @@
       },
       "devDependencies": {
         "@antfu/eslint-config": "^0.34.1",
+        "@iconify-json/icon-park": "^1.1.10",
         "@iconify-json/icon-park-outline": "^1.1.9",
         "@vitejs/plugin-legacy": "^3.0.1",
         "@vitejs/plugin-vue2": "^2.1.0",
@@ -706,6 +707,15 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@iconify-json/icon-park": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/icon-park/-/icon-park-1.1.10.tgz",
+      "integrity": "sha512-jxEvEPtO7GbkZtdTB82eq6s7RV4wk8Ofo3mKXdJVazMUtME5GGwNrKDug3rNzv0axXU0sDMuaaBz5Pgp56IyXQ==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/icon-park-outline": {
       "version": "1.1.10",
       "resolved": "https://registry.npmmirror.com/@iconify-json/icon-park-outline/-/icon-park-outline-1.1.10.tgz",
@@ -6786,6 +6796,15 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@iconify-json/icon-park": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmmirror.com/@iconify-json/icon-park/-/icon-park-1.1.10.tgz",
+      "integrity": "sha512-jxEvEPtO7GbkZtdTB82eq6s7RV4wk8Ofo3mKXdJVazMUtME5GGwNrKDug3rNzv0axXU0sDMuaaBz5Pgp56IyXQ==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/icon-park-outline": {
       "version": "1.1.10",
       "resolved": "https://registry.npmmirror.com/@iconify-json/icon-park-outline/-/icon-park-outline-1.1.10.tgz",

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "animate.css": "^4.1.1",
     "ant-design-vue": "^1.7.8",
-    "axios": "^1.2.6", 
+    "axios": "^1.2.6",
     "echarts": "^5.4.1",
     "echarts-liquidfill": "^3.1.0",
     "moment": "^2.29.4",
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.1",
+    "@iconify-json/icon-park": "^1.1.10",
     "@iconify-json/icon-park-outline": "^1.1.9",
     "@vitejs/plugin-legacy": "^3.0.1",
     "@vitejs/plugin-vue2": "^2.1.0",

src/components/dashboard/Dashboard.vue

@@ -6,7 +6,7 @@
         <div class="dashboard-popFunc">
           <IocCard title="常用功能">
             <template #title-extra>
-              <a-button type="link" style="color: #C6C8CC;font-size: 12px">
+              <a-button type="link" style="color: #C6C8CC;font-size: 12px" @click="openFuncManage">
                 功能管理
                 <a-icon type="right"></a-icon>
               </a-button>
@@ -37,21 +37,27 @@
         </div>
       </a-col>
     </a-row>
+
+
+    <FunctionManage :visible.sync="showFuncManage"></FunctionManage>
+
   </div>
 </template>
 
 <script>
 import IocCard from "@/components/common/card.vue";
-import IocFunction from "@/components/dashboard/Function.vue";
+import IocFunction from "@/components/dashboard/commonFuncManage/function.vue";
 import DataSituation from "@/components/dashboard/more/space/DataSituation.vue";
-import DashboardMessageCard from "@/components/dashboard/DashboardMessageCard.vue";
-import DashboardPortrait from "@/components/dashboard/dashboardPortrait.vue";
+import DashboardMessageCard from "@/components/dashboard/message/dashboardMessageCard.vue";
+import DashboardPortrait from "@/components/dashboard/portrait/dashboardPortrait.vue";
 import DashboardMore from "@/components/dashboard/more/dashboardMore.vue";
+import FunctionManage from "@/components/dashboard/commonFuncManage/functionManage.vue";
 
 
 export default {
   data() {
     return {
+      showFuncManage: false,
       commonMenu: [{},{},{},{},{},{},{},{}]
     }
   },
@@ -62,11 +68,14 @@ export default {
     DashboardMessageCard,
     DashboardPortrait,
     DashboardMore,
+    FunctionManage,
   },
   created() {
   },
   methods: {
-
+    openFuncManage() {
+      this.showFuncManage = true;
+    }
   }
 }
 </script>

src/components/dashboard/Function.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="function-btn" :style="functionBtnStyle">
-    <div class="function-icon">
-      <a-avatar class="function-avatar" shape="square" size="large" :src="icon"></a-avatar>
-    </div>
-    <div class="function-title">{{ title }}</div>
-    <div class="function-btn-remove" v-if="type===-1">
-      减
-    </div>
-    <div class="function-btn-add" v-if="type===1">
-      加
-    </div>
-
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      functionBtnStyle: {
-        backgroundImage: '',
-      }
-    }
-  },
-  props: {
-    type: Number,
-    title: String,
-    icon: String,
-  },
-  mounted() {
-
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.function-btn {
-  width: 95%;
-  height: 70px;
-  margin: 1% 2%;
-  border-radius: 8px;
-  line-height: 30px;
-  position: relative;
-  cursor: pointer;
-  .function-icon {
-    margin-left: 10%;
-    margin-top: 10px;
-    display: inline-block;
-    .function-avatar {
-      width: 50px;
-      height: 50px;
-    }
-  }
-  .function-title {
-    display: inline-block;
-    margin-top: 20px;
-    margin-left: 5%;
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: 1px;
-  }
-  .function-btn-remove {
-    position: absolute;
-    top: -15px;
-    left: -10px;
-  }
-  .function-btn-add {
-    position: absolute;
-    top: -15px;
-    right: -10px;
-  }
-}
-.function-btn:hover {
-  background-color: #F2F9FF;
-}
-</style>

src/components/dashboard/commonFuncManage/function.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="function-btn" :style="functionBtnStyle">
+    <div class="function-icon">
+      <a-avatar class="function-avatar" shape="square" size="large" :src="icon"></a-avatar>
+    </div>
+    <div class="function-title">{{ title }}</div>
+    <div class="function-btn-opr" v-if="type==-1" @click="minusFunction?minusFunction(title, isSSO):()=>{}">
+      <span class="anticon" >
+        <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#cd2a2a" stroke="#cd2a2a" stroke-width="4" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </span>
+    </div>
+    <div class="function-btn-opr" v-if="type==1" @click="plusFunction?plusFunction(title, isSSO):()=>{}">
+       <span class="anticon" >
+         <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#2ea8e6" stroke="#2ea8e6" stroke-width="4" stroke-linejoin="round"/><path d="M24 16V32" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+       </span>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      functionBtnStyle: {
+        backgroundColor: '',
+      }
+    }
+  },
+  props: {
+    type: Number,
+    title: String,
+    icon: String,
+    isSSO: Boolean,
+    plusFunction: Function,
+    minusFunction: Function,
+  },
+  mounted() {
+    if (this.type==-1) {
+      this.functionBtnStyle.backgroundColor = '#f2f2f2';
+      this.functionBtnStyle.cursor = 'default';
+    } else if (this.type==1) {
+      this.functionBtnStyle.backgroundColor = '#f7fcff';
+      this.functionBtnStyle.cursor = 'default';
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.function-btn {
+  width: 95%;
+  height: 70px;
+  margin: 1% 2%;
+  border-radius: 8px;
+  line-height: 30px;
+  position: relative;
+  cursor: pointer;
+  .function-icon {
+    margin-left: 10%;
+    margin-top: 10px;
+    display: inline-block;
+    .function-avatar {
+      width: 50px;
+      height: 50px;
+    }
+  }
+  .function-title {
+    display: inline-block;
+    margin-top: 20px;
+    margin-left: 5%;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 1px;
+  }
+  .function-btn-opr {
+    position: absolute;
+    top: -8px;
+    right: -5px;
+    cursor: pointer;
+  }
+}
+.function-btn:hover {
+  background-color: #F2F9FF;
+}
+</style>

src/components/dashboard/commonFuncManage/functionManage.vue

@@ -0,0 +1,331 @@
+<script>
+import Function from "@/components/dashboard/commonFuncManage/function.vue";
+
+export default {
+  data() {
+    return {
+      commonFunctions: [
+        {
+          name: '智慧餐厅',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },
+        {
+          name: '智慧餐厅2',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },{
+          name: '智慧餐厅3',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },{
+          name: '智慧餐厅4',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },{
+          name: '智慧餐厅5',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },{
+          name: '智慧餐厅6',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },{
+          name: '智慧餐厅7',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },{
+          name: '智慧餐厅8',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },
+      ],
+      functions: [
+        {
+          name: '智慧停车',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },
+        {
+          name: '智慧停车2',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },
+        {
+          name: '智慧停车3',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },
+        {
+          name: '智慧停车4',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },
+        {
+          name: '智慧停车5',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          type: 'route'
+        },
+      ],
+      ssoList: [
+        {
+          name: '系统1',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          isSSO: true,
+          type: 'url'
+        },{
+          name: '系统2',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          isSSO: true,
+          type: 'url'
+        },{
+          name: '系统3',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          isSSO: true,
+          type: 'url'
+        },{
+          name: '系统4',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          isSSO: true,
+          type: 'url'
+        },{
+          name: '系统5',
+          icon: '@/assets/images/function/iocRestaurant.png',
+          url: '',
+          isSSO: true,
+          type: 'url'
+        },
+      ],
+      show: false,
+    }
+  },
+  props: {
+    visible: Boolean,
+  },
+  components: {
+    Function
+  },
+  watch: {
+    "show": function (val) {
+      this.toggleVisible(val)
+    },
+    "visible": function (val) {
+      this.show = val
+    }
+  },
+  emits: ['update:visible'],
+  setup(props, context) {
+    const methods = {
+      toggleVisible(flag) {
+        context.emit('update:visible', flag)
+      },
+    }
+    return methods
+  },
+  mounted() {
+    this.show = this.visible;
+  },
+  methods: {
+    handleOk() {
+      this.show = false;
+    },
+    handleCancel() {
+      this.show = false
+    },
+    plusFunction(item, isSSO) {
+      if (!item || item == '') {
+        return;
+      }
+      if (this.commonFunctions.length>=8) {
+        this.$message.warning('功能位已满，请先移除功能后重试')
+        return;
+      }
+      let obj;
+      let index = this.functions.findIndex(i=>i.name==item)
+      if (!index || index>=0) {
+        index = this.ssoList.findIndex(i=>i.name==item)
+        if (index && index>=0) {
+          obj = this.ssoList[index];
+          this.ssoList.splice(index, 1)
+        }
+      } else {
+        obj = this.functions[index];
+        this.functions.splice(index, 1)
+      }
+      if (obj) {
+        this.commonFunctions.push(obj)
+      }
+    },
+    minusFunction(item, isSSO) {
+      if (!item || item == '') {
+        return;
+      }
+      let obj;
+      let index = this.commonFunctions.findIndex(i=>i.name==item)
+      if (index && index>=0) {
+        obj = this.commonFunctions[index]
+        this.commonFunctions.splice(index, 1)
+      }
+      if (isSSO) {
+        this.ssoList.push(obj)
+      } else {
+        this.functions.push(obj)
+      }
+    },
+  }
+}
+</script>
+
+<template>
+  <a-modal class="dashboard-funcManage"
+           :visible="show"
+           :width="1020"
+           @ok="handleOk"
+           @cancel="handleCancel"
+  >
+    <template #footer>
+      <a-button size="small" class="footer-btn" key="back" @click="handleCancel">
+        取消
+      </a-button>
+      <a-button size="small" class="footer-btn" key="submit" type="primary" @click="handleOk">
+        确定
+      </a-button>
+    </template>
+
+
+    <div class="funcManage-custom">
+      <div class="funcManage-title">自定义快捷入口</div>
+      <div class="funcManage-body">
+        <a-row :gutter="16">
+          <transition-group name="common-function">
+            <a-col :span="6" v-for="(item,index) in commonFunctions" :key="item.name" style="margin-bottom: 12px">
+              <Function :minus-function="minusFunction" :title="item.name" :type="-1" :icon="require('@/assets/images/function/iocRestaurant.png')"></Function>
+            </a-col>
+          </transition-group>
+        </a-row>
+      </div>
+    </div>
+
+    <div style="max-height: 400px;overflow-y: auto">
+      <div class="funcManage-function">
+        <div class="funcManage-title funcManage-title-border">运营管理中心</div>
+        <div class="funcManage-body">
+          <a-row :gutter="16">
+            <transition-group name="common-function">
+              <a-col :span="6" v-for="(item,index) in functions" :key="item.name" style="margin-bottom: 12px">
+                <Function :plus-function="plusFunction" :title="item.name" :type="1"></Function>
+              </a-col>
+            </transition-group>
+          </a-row>
+        </div>
+      </div>
+
+      <div class="funcManage-sso">
+        <div class="funcManage-title funcManage-title-border">单点登录</div>
+        <div class="funcManage-body">
+          <a-row :gutter="16">
+            <transition-group name="common-function">
+              <a-col :span="6" v-for="(item, index) in ssoList" :key="item.name" style="margin-bottom: 12px">
+                <Function :plus-function="plusFunction" :title="item.name" :type="1"></Function>
+              </a-col>
+            </transition-group>
+          </a-row>
+        </div>
+      </div>
+    </div>
+
+
+  </a-modal>
+</template>
+
+<style lang="less">
+.dashboard-funcManage {
+  .footer-btn {
+    width: 80px;
+    height: 30px;
+    border-radius: 5px;
+    font-size: 16px;
+  }
+
+  .ant-btn {
+    margin: 0 10px !important;
+  }
+
+  .funcManage-body {
+    margin: 10px;
+    height: auto;
+    min-height: 200px;
+    border: 1px solid #E3E4E6;
+    padding: 2% 3%;
+  }
+
+  .funcManage-custom {
+    .funcManage-body {
+
+    }
+  }
+
+  .funcManage-function {
+    margin-top: 15px;
+    margin-bottom: 8px;
+
+    .funcManage-body {
+
+    }
+  }
+
+  .funcManage-sso {
+    margin-top: 15px;
+    margin-bottom: 8px;
+
+    .funcManage-body {
+
+    }
+  }
+
+  .funcManage-title {
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  .funcManage-title-border {
+    padding-left: 5px;
+    border-left: 3px solid #2EA8E6;
+
+  }
+}
+
+.common-function-move, /* 对移动中的元素应用的过渡 */
+.common-function-enter-active,
+.common-function-leave-active {
+  transition: all 0.5s ease;
+}
+
+.common-function-enter-from,
+.common-function-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.common-function-leave-active {
+  position: absolute;
+}
+
+</style>