登录、管理等

package.json

@@ -7,8 +7,10 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^1.3.4",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
+    "js-cookie": "^3.0.1",
     "vue": "^2.7.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
@@ -19,22 +21,11 @@
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "babel-plugin-component": "^1.1.1",
-<<<<<<< HEAD
+
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "less-loader": "^11.1.0",
     "svg-sprite-loader": "^6.0.11",
-=======
-<<<<<<< HEAD
-    "sass": "^1.32.7",
-    "sass-loader": "^12.0.0",
-=======
-    "less-loader": "^11.1.0",
-    "sass": "^1.32.7",
-    "sass-loader": "^12.0.0",
-    "svg-sprite-loader": "^6.0.11",
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
     "vue-template-compiler": "^2.6.14"
   }
 }

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
@@ -9,10 +9,13 @@
   margin: 0;
   padding: 0;
 }
-html,body {
+
+html,
+body {
   width: 100%;
   height: 100%;
 }
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -23,4 +26,12 @@ html,body {
   height: 100%;
 }
 
+.el-scrollbar .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+// 上面隐藏横向滚动条会导致下拉框底部遮盖问题
+.el-select-dropdown .el-scrollbar {
+  padding-bottom: 17px;
+}
 </style>

src/api/user.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function login(data) {
+  return request({
+    url: '',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(token) {
+  return request({
+    url: '',
+    method: 'get',
+    params: { token }
+  })
+}
+
+export function logout() {
+  return request({
+    url: '',
+    method: 'post'
+  })
+}

src/components/Checkbox/index.vue

@@ -7,14 +7,9 @@
   
 <script>
 export default {
-    name: 'Checkbox',
-    data() {
-        return {
-            total: 0
-        }
-    },
-    methods: {
-    }
+props:[
+    'total'
+]
 }
 
 </script>

src/components/Hamburger/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div @click="toggleClick">
     <svg
       :class="{'is-active':isActive}"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
+      width="64px"
+      height="64px"
     >
       <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>
@@ -18,6 +18,7 @@ export default {
   name: 'Hamburger',
   props: {
     isActive: {
+      type:Boolean,
       default: false
     }
   },
@@ -31,7 +32,7 @@ export default {
 
 <style lang="less" scoped>
 .hamburger {
-  /* display: inline-block; */
+  display: inline-block;
   vertical-align: middle;
   width: 30px;
   height: 30px;

src/components/Identify/index.vue

@@ -0,0 +1,147 @@
+
+<template>
+    <div class="s-canvas">
+        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
+    </div>
+</template>
+  
+<script>
+export default {
+    name: "SIdentify",
+    props: {
+        identifyCode: {
+            type: String,
+            default: '1234'
+        },
+        fontSizeMin: {
+            type: Number,
+            default: 25
+        },
+        fontSizeMax: {
+            type: Number,
+            default: 30
+        },
+        backgroundColorMin: {
+            type: Number,
+            default: 255
+        },
+        backgroundColorMax: {
+            type: Number,
+            default: 255
+        },
+        colorMin: {
+            type: Number,
+            default: 0
+        },
+        colorMax: {
+            type: Number,
+            default: 160
+        },
+        lineColorMin: {
+            type: Number,
+            default: 100
+        }, lineColorMax: {
+            type: Number,
+            default: 255
+        },
+        dotColorMin: {
+            type: Number,
+            default: 0
+        },
+        dotColorMax: {
+            type: Number,
+            default: 255
+        },
+        contentWidth: {
+            type: Number,
+            default: 100
+        },
+        contentHeight: {
+            type: Number,
+            default: 31
+        }
+    },
+    methods: {
+        // 生成一个随机数
+        randomNum(min, max) {
+            return Math.floor(Math.random() * (max - min) + min)
+        },
+        // 生成一个随机的颜色
+        randomColor(min, max) {
+            let r = this.randomNum(min, max)
+            let g = this.randomNum(min, max)
+            let b = this.randomNum(min, max)
+            return 'rgb(' + r + ',' + g + ',' + b + ')'
+        },
+        drawPic() {
+            let canvas = document.getElementById('s-canvas')
+            let ctx = canvas.getContext('2d')
+            ctx.textBaseline = 'bottom'
+            // 绘制背景
+            ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
+            ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
+            // 绘制文字
+            for (let i = 0; i < this.identifyCode.length; i++) {
+                this.drawText(ctx, this.identifyCode[i], i)
+            }
+            this.drawLine(ctx)
+            this.drawDot(ctx)
+        },
+        drawText(ctx, txt, i) {
+            ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
+            ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
+            let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
+            let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
+            var deg = this.randomNum(-45, 45)
+            // 修改坐标原点和旋转角度
+            ctx.translate(x, y)
+            ctx.rotate(deg * Math.PI / 180)
+            ctx.fillText(txt, 0, 0)
+            // 恢复坐标原点和旋转角度
+            ctx.rotate(-deg * Math.PI / 180)
+            ctx.translate(-x, -y)
+        },
+        drawLine(ctx) {
+            // 绘制干扰线
+            for (let i = 0; i < 5; i++) {
+                ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
+                ctx.beginPath()
+                ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
+                ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
+                ctx.stroke()
+            }
+        },
+        drawDot(ctx) {
+            // 绘制干扰点
+            for (let i = 0; i < 80; i++) {
+                ctx.fillStyle = this.randomColor(0, 255)
+                ctx.beginPath()
+                ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
+                ctx.fill()
+            }
+        }
+    },
+    watch: {
+        identifyCode() {
+            this.drawPic()
+        }
+    },
+    mounted() {
+        this.drawPic()
+    }
+}
+</script>
+  
+<style scoped>
+.s-canvas {
+    height: 38px;
+
+}
+
+.s-canvas canvas {
+    margin-top: 1px;
+    margin-left: 8px;
+}
+</style>
+  
+  

src/components/home/MainFrame.vue

@@ -1,17 +1,6 @@
 <template>
   <div class="mainFrame">
     <el-container>
-<<<<<<< HEAD
-=======
-<<<<<<< HEAD
-      <el-header>Header</el-header>
-      <el-container>
-        <el-aside >Aside</el-aside>
-        <el-container>
-          <el-main>
-            <router-view />
-=======
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
       <el-header>
         <navbar></navbar>
       </el-header>
@@ -22,10 +11,6 @@
         <el-container>
           <el-main>
             <test></test>
-<<<<<<< HEAD
-=======
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
           </el-main>
         </el-container>
       </el-container>
@@ -34,7 +19,6 @@
 </template>
 
 <script>
-<<<<<<< HEAD
 import navbar from '@/layout/Navbar'
 import sidebar from '@/layout/Sidebar'
 import userManagement from '@/views/userManagement/index'
@@ -48,41 +32,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
-=======
-<<<<<<< HEAD
-export default {
-  data() {
-    return {}
-=======
-import navbar from '@/layout/Navbar'
-import sidebar from '@/layout/Sidebar'
-import userManagement from '@/views/userManagement/index'
-import permissionManagement from '@/views/permissionManagement/index'
-import test from '@/views/systemManagement/index'
-export default {
-  components: { navbar, sidebar,userManagement,permissionManagement,test },
-  methods: {
-    toggleSideBar() {
 
-    },
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
-  }
-}
-</script>
-
-<<<<<<< HEAD
-<style scoped>
-=======
-<style lang="less" scoped>
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
 .mainFrame {
   width: 100%;
   height: 100%;
 }
-<<<<<<< HEAD
-=======
-<<<<<<< HEAD
+
 .el-container {
   height: 100%;
 }
@@ -96,19 +51,22 @@ export default {
   background-color: #D3DCE6;
   color: #333;
   height: 100%;
-=======
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
+}
 
 .el-container {
   height: 100%;
 }
+.el-container {
+  height: 100%;
+  overflow: hidden;
+}
 
 .el-header {
   left: 0px;
   top: 0px;
   height: 64px !important;
   line-height: 20px;
-  background-color: rgba(10, 35, 55, 1);
+  background-color: #3a8ee6;
   text-align: center;
   box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.15);
 }
@@ -116,16 +74,19 @@ export default {
 .el-aside {
   left: 0px;
   top: 63px;
+
   width: 200px !important;
   line-height: 20px;
   background-color: rgba(32, 55, 73, 1);
   color: rgba(16, 16, 16, 1);
   font-size: 14px;
   text-align: center;
-<<<<<<< HEAD
-=======
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
+  line-height: 20px;
+  width: 200px !important;
+  background-color: #3a8ee6;
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: center;
 }
 
 .el-main {
@@ -133,11 +94,5 @@ export default {
   color: #333;
   height: 100%;
 }
-<<<<<<< HEAD
-=======
-<<<<<<< HEAD
 
-=======
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
 </style>

src/layout/Navbar.vue

@@ -1,10 +1,9 @@
 <template>
   <div>
     <div class="left-menu">
-      <hamburger class="hamburger-container" 
-        @toggleClick="toggleSideBar" />
+      <hamburger class="hamburger-container" :is-active="opened" @toggleClick="toggleSideBar" />
       <div>
-        <img class="img" src="@/assets/logo.png" alt="">
+        <el-image class="img" :src="src" alt=""></el-image>
       </div>
       <div class="title">
         <div class="tit">智慧运营管理中心</div>
@@ -16,9 +15,9 @@
       </el-select>
     </div>
     <div class="right-menu">
-      <img class="phone" src="@/assets/logo.png" alt="">
-      <img class="help" src="@/assets/logo.png" alt="">
-      <img class="notification" src="@/assets/logo.png" alt="" @click="notify">
+      <el-image class="phone" :src="src" alt=""></el-image>
+      <el-image class="help" :src="src" alt=""></el-image>
+      <el-image class="notification" :src="src" alt="" ></el-image>
       <div class="avatar"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
       <div class="info">
         <i class="el-icon-user"></i>
@@ -29,23 +28,27 @@
 </template>
 
 <script>
-import hamburger from '@/components/Hamburger/'
+import hamburger from '@/components/Hamburger/index'
 export default {
   components: { hamburger },
   name: "Navbar",
   data() {
     return {
+      value:'test',
       options: {
 
       },
+      opened:true,
       name: "test",
+      src:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
       circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
       isCollapse: true
     }
   },
-  methods: {
-    notify() {
 
+  methods: {
+    toggleSideBar(){
+      
     }
   }
 }
@@ -60,9 +63,9 @@ export default {
 
   .hamburger-container {
     position: absolute;
-    line-height: 60px;
+    line-height: 64px;
     left: 0;
-    height: 60px;
+    width:64px;
     float: left;
     cursor: pointer;
     transition: background .3s;
@@ -136,9 +139,9 @@ export default {
     text-align: center;
 
     /deep/.el-input__inner {
-      background-color: rgba(67, 86, 102, 1);
+      background-color: #045bb8;
       color: rgba(226, 229, 231, 1);
-      border: 1px solid rgba(67, 86, 102, 1);
+      border: 1px solid #3a8ee6;
     }
   }
 }

src/layout/sidebar/Sidebar.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <el-menu background-color="#3a8ee6" text-color="rgba(255, 255, 255, 1)" active-text-color="#ffd04b" 
+    :collapse="isCollapse" :collapse-transition="false" router mode="vertical" :unique-opened="true" >
+    <sidebarItem></sidebarItem>
+    </el-menu>
+  </div>
+</template>
+  
+<script>
+import sidebarItem from './sidebarItem'
+export default {
+  components:{
+    sidebarItem
+  },
+  name: "sidebar",
+  data() {
+    return {
+      isCollapse:false,
+    }
+  },
+
+}
+</script>
+  
+<style lang="less" scoped>
+.el-menu {
+  border: 0;
+}
+
+/deep/.el-submenu__icon-arrow {
+  display: none;
+}
+</style>
+  

src/layout/sidebar/sidebarItem.vue

@@ -0,0 +1,156 @@
+<template>
+    <div>
+        <div v-for="(menu, index) in menus" :key="index">
+        <el-submenu :index="String(index)" v-if="menu.submenus != null">
+            <template slot="title">
+                <icon :icon-class="menu.icon"></icon>
+                <span>{{ menu.name }}</span>
+            </template>
+            <el-menu-item-group v-for="(submenu, index2) in menu.submenus" :key="index2">
+                <el-menu-item :index="submenu.path">
+                    <span>{{ submenu.name }}</span>
+                </el-menu-item>
+            </el-menu-item-group>
+        </el-submenu>
+        <el-menu-item v-if="menu.submenus == null" :key="menu.path" :index="menu.path">
+            <icon :icon-class="menu.icon"></icon>
+            <span slot="title">
+                {{ menu.name }}
+            </span>
+        </el-menu-item>
+    </div>
+</div>
+</template>
+<script>
+import icon from '@/components/SvgIcon/index'
+export default {
+    components: {
+        icon
+    },
+    data() {
+        return {
+            menus: [
+                {
+                    icon: '',
+                    name: '用户管理',
+                    path: '/',
+                    submenus: [
+                        {
+                            name: '人员管理',
+                            path: '/'
+                        },
+                        {
+                            name: '组织管理',
+                            path: '/'
+                        }
+                    ]
+                },
+                {
+                    icon: '',
+                    name: '角色管理',
+                    path: '/'
+                },
+                {
+                    icon: '',
+                    name: '权限管理',
+                    path: '/'
+                },
+                {
+                    icon: '',
+                    name: '系统配置',
+                    path: '/',
+                    submenus: [
+                        {
+                            name: '策略配置',
+                            path: '/'
+                        },
+                        {
+                            name: '消息配置',
+                            path: '/'
+                        },
+                        {
+                            name: '信息配置',
+                            path: '/'
+                        },
+                        {
+                            name: '指标配置',
+                            path: '/'
+                        }
+                    ]
+                },
+                {
+                    icon: '',
+                    name: '设备管理',
+                    path: '/',
+                    submenus: [
+                        {
+                            name: '设备配置',
+                            path: '/'
+                        },
+                        {
+                            name: '设备告警',
+                            path: '/'
+                        }
+                    ]
+                },
+                {
+                    icon: '',
+                    name: '数据管理',
+                    path: '/',
+                    submenus: [
+                        {
+                            name: '报表配置',
+                            path: '/'
+                        },
+                        {
+                            name: '报告配置',
+                            path: '/'
+                        },
+                        {
+                            name: '基础信息',
+                            path: '/'
+                        }
+                    ]
+                },
+                {
+                    icon: '',
+                    name: '服务管理',
+                    path: '/',
+                    submenus: [
+                        {
+                            name: '全部服务',
+                            path: '/'
+                        },
+                        {
+                            name: '已安装服务',
+                            path: '/'
+                        },
+                        {
+                            name: '未安装服务',
+                            path: '/'
+                        },
+                    ]
+                },
+                {
+                    icon: '',
+                    name: '安全管理',
+                    path: '/',
+                    submenus: [
+                        {
+                            name: '日志监控',
+                            path: '/'
+                        },
+                        {
+                            name: '系统监控',
+                            path: '/'
+                        },
+                    ]
+                }
+            ]
+        }
+    },
+    methods: {
+
+    }
+}
+</script>

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import axios from 'axios'
 
 Vue.config.productionTip = false
 
@@ -9,16 +10,21 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import locale from 'element-ui/lib/locale/lang/zh-CN'
 
-<<<<<<< HEAD
 import '@/icons'
 
-=======
-<<<<<<< HEAD
-=======
+
+import '@/icons'
+
+Vue.use(ElementUI, { locale });
+
 import '@/icons'
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
+//拖拽注册
+import './utils/directive'
+
+
 Vue.use(ElementUI, { locale });
+Vue.prototype.axios = axios;
+
 
 new Vue({
   router,

src/router/index.js

@@ -1,19 +1,22 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: HomeView
+    redirect: '/home',
   },
   {
     path: '/login',
     name: 'login',
-    component: () => import(/* webpackChunkName: "about" */ '../views/LoginView.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/login/index.vue')
+  },
+  {
+    path: '/home',
+    name: 'home',
+    component: () => import(/* webpackChunkName: "about" */ '../views/HomeView.vue'),
   }
 ]
 

src/store/getter.js

@@ -0,0 +1,7 @@
+const getters = {
+    token: state => state.user.token,
+    avatar: state => state.user.avatar,
+    name: state => state.user.name,
+    roles: state => state.user.roles
+  }
+  export default getters

src/store/index.js

@@ -1,17 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import getters from './getter'
+import user from './modules/user'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  getters: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
   modules: {
+    getters,
+    modules:{
+      user
+    }
   }
 })

src/store/modules/user.js

@@ -0,0 +1,43 @@
+import { login } from '@/api/user'
+import { setToken } from '@/utils/auth'
+
+const user = {
+    state: {
+        token: '',
+        name: '',
+        avatar: '',
+        role: []
+    },
+    mutations: {
+        SET_TOKEN: (state, token) => {
+            state.token = token;
+        },
+        SET_NAME: (state, name) => {
+            state.name = name;
+        },
+        SET_AVATAR: (state, avatar) => {
+            state.avatar = avatar;
+        },
+        SET_ROLES: (state, roles) => {
+            state.roles = roles;
+        }
+    },
+    actions: {
+        //登陆
+        login({ commit }, userInfo) {
+            const { username, password } = userInfo;
+            return new Promise((resolve, reject) => {
+                login({ username: username.trim(), password: password }).then(response => {
+                    const { data } = response;
+                    commit('SET_TOKEN', data.token);
+                    setToken(data.token);
+                    resolve(data);
+                }).catch(error => {
+                    console.log('登陆失败');
+                    reject(error);
+                })
+            })
+        },
+    }
+}
+export default user

src/utils/auth.js

@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/directive.js

@@ -0,0 +1,76 @@
+//directive.js文件,用于详情对话框可移动
+
+import Vue from 'vue'
+
+// v-dialogDrag: 弹窗拖拽
+Vue.directive('dialogDrag', {
+  bind(el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cursor = 'move'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})
+
+// v-dialogDragWidth: 弹窗宽度拖大 拖小
+Vue.directive('dialogDragWidth', {
+  bind(el, binding, vnode, oldVnode) {
+    const dragDom = binding.value.$el.querySelector('.el-dialog')
+
+    el.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - el.offsetLeft
+
+      document.onmousemove = function (e) {
+        e.preventDefault() // 移动时禁用默认事件
+
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        dragDom.style.width = `${l}px`
+      }
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})

src/utils/request.js

@@ -0,0 +1,85 @@
+import axios from 'axios'
+import { MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+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
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (store.getters.token) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['X-Token'] = getToken()
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+  */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code !== 20000) {
+      Message({
+        message: res.message || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+        // to re-login
+        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+          confirmButtonText: 'Re-Login',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
+        })
+      }
+      return Promise.reject(new Error(res.message || 'Error'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/HomeView.vue

@@ -10,15 +10,7 @@ import MainFrame from "@/components/home/MainFrame.vue";
 export default {
   name: 'HomeView',
   components: {
-<<<<<<< HEAD
     MainFrame
-=======
-<<<<<<< HEAD
-    MainFrame
-=======
-    MainFrame,
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
   }
 }
 </script>
@@ -27,5 +19,7 @@ export default {
 .home {
   width: 100%;
   height: 100%;
+  overflow: hidden;
+
 }
 </style>

src/views/dataManagement/basicInfo/accessedSystem.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <div style="width: 100%; height: 20px;margin-top: 10px;">
+            <p class="info">底层接入系统</p>
+        </div>
+        <el-upload action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="item.imageUrl" alt="">
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            item: {
+                imageUrl: '',
+            },
+            allImageUrl: [],
+        }
+    },
+    methods: {
+        handleRemove(file, fileList) {
+            let removeUrl = file.respone.data.url;
+            this.allImageUrl = this.allImageUrl.filter(item => item != removeUrl);
+        },
+        handlePictureCardPreview(file) {
+            this.item.imageUrl = file.url;
+            this.dialogVisible = true;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.info {
+    position: absolute;
+    left: 50px;
+    font-size: 20px;
+}
+
+/deep/.el-upload--picture-card {
+    width: 300px;
+    height: 200px;
+    border: 1px solid #c0ccda;
+    margin-right: 1300px;
+    margin-top: 20px;
+}
+
+/deep/.el-upload--picture-card i {
+    display: flex;
+    padding-right: 20px;
+    font-size: 50px;
+    padding: 75px 120px;
+}
+</style>

src/views/dataManagement/basicInfo/buildingInfo.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="index" width="50" label="序号">
+            </el-table-column>
+            <el-table-column prop="buildingName" label="楼宇名称">
+            </el-table-column>
+            <el-table-column prop="contact_person" label="联系人">
+            </el-table-column>
+            <el-table-column prop="contact_phone" label="联系方式">
+            </el-table-column>
+            <el-table-column prop="operation" label="操作">
+                <template slot-scope="scope">
+                    <el-button v-show="scope.row.buildingName == null ? false : true" size="mini" type="text">查看</el-button>
+                    <el-button v-show="scope.row.buildingName == null ? false : true" size="mini" type="text">编辑</el-button>
+                    <el-button v-show="scope.row.buildingName == null ? false : true" size="mini" type="text">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <page class="page"></page>
+    </div>
+</template>
+
+<script>
+import page from '@/components/pagination/index'
+export default {
+    components: { page },
+    data() {
+        return {
+            tableData: [{
+                buildingName: 'A',
+                contact_person: '张三',
+                contact_phone: '12345678901',
+            }, {
+                buildingName: 'B',
+                contact_person: '张三',
+                contact_phone: '12345678901',
+            }, {
+                buildingName: 'C',
+                contact_person: '张三',
+                contact_phone: '12345678901',
+            },],
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+<style lang="less" scoped>
+.el-table{
+    width: 95% !important;
+    margin-top: 20px;
+    margin-left: 2.5%;
+    margin-right: 2.5%;
+}
+.page{
+    position: relative;
+    margin-top: 20px;
+}
+</style>

src/views/dataManagement/basicInfo/corporationInfo.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="content">
+        <el-form :model="form" label-position="left" label-width="80px">
+            <el-form-item style="width: 350px;" :model="form.manageUnit" label="管理单位：">
+                <el-input v-model="manageUnit" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.hostUnit" label="托管单位：">
+                <el-input v-model="hostUnit" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.profile" label="公司简介：">
+                <el-input v-model="profile" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.contact_person" label="联 系 人：">
+                <el-input v-model="contact_person" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.contact_num" label="联系方式：">
+                <el-input v-model="contact_num"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.imageUpload" label="上传图片：">
+                <el-upload action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
+                    :on-remove="handleRemove">
+                    <i class="el-icon-plus"></i>
+                </el-upload>
+                <el-dialog :visible.sync="dialogVisible">
+                    <img width="100%" :src="item.imageUrl" alt="">
+                </el-dialog>
+            </el-form-item>
+        </el-form>
+        <div class="bottom">
+            <el-button>重置</el-button>
+            <el-button>提交</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible:false,
+            item:{
+                imageUrl:'',
+            },
+            allImageUrl:[],
+            hostUnit: '',
+            profile: '',
+            contact_person: '',
+            contact_num: '',
+            hostUnit: '',
+            form: {
+
+            },
+            action: ''//上传地址
+        }
+    },
+
+    methods: {
+        handleRemove(file, fileList) {
+            let removeUrl = file.respone.data.url;
+            this.allImageUrl = this.allImageUrl.filter(item => item != removeUrl);
+        },
+        handlePictureCardPreview(file) {
+            this.item.imageUrl = file.url;
+            this.dialogVisible = true;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.el-form {
+    margin-left: 100px;
+
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+    }
+
+    /deep/.el-form-item__label {
+        padding: 0;
+    }
+
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+.el-button--text {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+}
+
+.el-button {
+    height: 30px;
+    width: 100px;
+    margin-top: 20px;
+    margin-inline: 40px;
+    padding: 5px;
+}
+
+/deep/.el-upload--picture-card {
+    width: 70px;
+    height: 70px;
+    border: 1px solid #c0ccda;
+}
+
+/deep/.el-upload--picture-card i {
+    display: flex;
+    padding: 20px;
+}
+
+.bottom {
+    position: absolute;
+    left: 700px;
+    top: 700px;
+}
+</style>

src/views/dataManagement/basicInfo/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <el-button>公司基本信息</el-button>
+            <el-button>楼宇基本信息</el-button>
+            <el-button>底层系统信息</el-button>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script>
+import test from './accessedSystem'
+export default {
+    components:{test},
+    data() {
+        return {}
+    }
+}
+</script>
+<style lang="less" scoped>
+.container{
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    top: 140px;
+    height: 800px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+.header {
+    text-align: left;
+    padding: 15px;
+    font-size: 25px;
+    margin-left: 15px;
+
+    .el-button {
+        border-radius: 50px;
+    }
+}
+</style>

src/views/dataManagement/index.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div class="el-tab">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="报表配置" name="tableConfig"></el-tab-pane>
+                <el-tab-pane label="报告配置" name="reportConfig"></el-tab-pane>
+                <el-tab-pane label="基础信息" name="basicInfo"></el-tab-pane>
+            </el-tabs>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script >
+import test from './reportConfig'
+export default {
+    components: { test },
+    data() {
+        return {
+            activeName: 'basicInfo',
+        }
+    },
+    methods: {
+
+    }
+};
+</script>
+<style lang="less" scoped>
+.el-tab {
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    top: 77px;
+    height: 51px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    /deep/.el-tabs__nav {
+        left: 25px;
+    }
+
+    /deep/.el-tabs__nav-wrap::after {
+        height: 0;
+    }
+}
+</style>

src/views/dataManagement/reportConfig.vue

@@ -0,0 +1,240 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <el-form label-width="120px">
+                <div style="display: flex; padding:10px;">
+                    <el-form-item :model="form.templateList" label="报表模板名称：">
+                        <el-input ref="search" v-model="input" suffix-icon="el-icon-search" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item :model="form.templateForm" label="报表模板格式：">
+                        <el-select placeholder="全部">
+                            <el-option label=""></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :model="form.reportType" label="报告类型：">
+                        <el-select placeholder="报告">
+                            <el-option label=""></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-button style="padding: 5px;width: 80px;margin-left: 160px;margin-right: 20px;">重置</el-button>
+                    <el-button style="padding: 5px;width: 80px; background-color: #409EFF;color: #FFF;">查询</el-button>
+                </div>
+            </el-form>
+        </div>
+        <div class="content">
+            <div>
+                <p class="info">模板列表</p>
+                <el-button class="new_button">添加模板</el-button>
+            </div>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column prop="templateName" label="模板名称">
+                </el-table-column>
+                <el-table-column prop="templateForm" label="模板格式">
+                </el-table-column>
+                <el-table-column prop="createUser" label="创建用户">
+                </el-table-column>
+                <el-table-column prop="createTime" label="创建时间">
+                </el-table-column>
+                <el-table-column prop="alterTime" label="修改时间">
+                </el-table-column>
+                <el-table-column prop="operation" label="操作">
+                    <template slot-scope="scope">
+                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
+                            type="text">查看</el-button>
+                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
+                            type="text">编辑</el-button>
+                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="bottom">
+            <div>
+                <checkbox class="checkbox" :total="total"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+                <el-button class="disabled" type="text">批量激活</el-button>
+                <el-button class="export" type="text">导出数据</el-button>
+            </div>
+            <page class="page"></page>
+        </div>
+    </div>
+</template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+export default {
+    components: { checkbox, page },
+    data() {
+        return {
+            total: 0,
+            input: '',
+            show: true,
+            form: {
+            },
+            tableData: [
+                {
+                    templateName: '模板1',
+                    templateForm: 'txt',
+                    createUser: 'test',
+                    createTime: '2023-01-01 00:00',
+                    alterTime: '2023-01-01 00:00',
+                },
+                {
+                    templateName: '模板1',
+                    templateForm: 'txt',
+                    createUser: 'test',
+                    createTime: '2023-01-01 00:00',
+                    alterTime: '2023-01-01 00:00',
+                },
+                {
+                    templateName: '模板1',
+                    templateForm: 'txt',
+                    createUser: 'test',
+                    createTime: '2023-01-01 00:00',
+                    alterTime: '2023-01-01 00:00',
+                },
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.search.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: absolute;
+    left: 218px;
+    top: 150px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .header {
+        margin: 2.5%;
+        height: 60px;
+        background-color: rgb(221, 220, 219);
+
+        .el-form-item {
+            margin-bottom:0 !important;
+            margin-right: 60px !important;
+            /deep/.el-form-item {
+                margin-right: 50px;
+                margin-bottom: 0;
+            }
+            /deep/.el-form-item__content {
+                margin-left: 120px;
+            }
+        }
+    }
+
+    .content {
+        width: 95%;
+        position: absolute;
+        margin-left: 2.5%;
+        margin-right: 2.5%;
+
+        .info {
+            text-align: left;
+            padding: 10px;
+            font-size: 25px;
+        }
+
+        .new_button {
+            padding: 5px;
+            width: 80px;
+            position: relative;
+            left: 760px;
+            background-color: #409EFF;
+            color: #FFF;
+        }
+
+        .el-table {
+            margin-top: 10px;
+        }
+
+        .el-select {
+            width: 80px;
+            margin-right: 20px;
+        }
+    }
+
+    .bottom {
+        position: absolute;
+        top: 700px;
+        left: 50px;
+        height: 50px;
+        width: 95%;
+        line-height: 20px;
+        background-color: rgba(255, 255, 255, 1);
+        text-align: center;
+
+        .checkbox {
+            position: absolute;
+            left: 29px;
+            top: 15px;
+            font-size: 14px;
+        }
+
+        .check-cancel {
+            position: absolute;
+            // line-height: 20px;
+            font-size: 14px;
+            text-align: center;
+            left: 140px;
+            top: 10px;
+        }
+
+        .bottom_button {
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
+
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .disabled {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .export {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+        }
+    }
+}
+</style>

src/views/dataManagement/statementConfig.vue

@@ -0,0 +1,237 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <el-form label-width="120px">
+                <div style="display: flex; padding:10px;">
+                    <el-form-item :model="form.templateList" label="报表模板名称：">
+                        <el-input ref="search" v-model="input" suffix-icon="el-icon-search" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item :model="form.templateForm" label="报表模板格式：">
+                        <el-select placeholder="全部">
+                            <el-option label=""></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-button style="padding: 5px;width: 80px;margin-left: 560px;margin-right: 20px;">重置</el-button>
+                    <el-button style="padding: 5px;width: 80px; background-color: #409EFF;color: #FFF;">查询</el-button>
+                </div>
+            </el-form>
+        </div>
+        <div class="content">
+            <div>
+                <p class="info">模板列表</p>
+                <el-button class="new_button">添加模板</el-button>
+            </div>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column prop="templateName" label="模板名称">
+                </el-table-column>
+                <el-table-column prop="templateForm" label="模板格式">
+                </el-table-column>
+                <el-table-column prop="createUser" label="创建用户">
+                </el-table-column>
+                <el-table-column prop="createTime" label="创建时间">
+                </el-table-column>
+                <el-table-column prop="alterTime" label="修改时间">
+                </el-table-column>
+                <el-table-column prop="operation" label="操作">
+                    <template slot-scope="scope">
+                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
+                            type="text">查看</el-button>
+                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
+                            type="text">编辑</el-button>
+                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="bottom">
+            <div>
+                <checkbox class="checkbox" :total="total"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+                <el-button class="disabled" type="text">批量激活</el-button>
+                <el-button class="export" type="text">导出数据</el-button>
+            </div>
+            <page class="page"></page>
+        </div>
+    </div>
+</template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+export default {
+    components: { checkbox, page },
+    data() {
+        return {
+            total: 0,
+            input: '',
+            show: true,
+            form: {
+            },
+            tableData: [
+                {
+                    templateName: '模板1',
+                    templateForm: 'txt',
+                    createUser: 'test',
+                    createTime: '2023-01-01 00:00',
+                    alterTime: '2023-01-01 00:00',
+                },
+                {
+                    templateName: '模板1',
+                    templateForm: 'txt',
+                    createUser: 'test',
+                    createTime: '2023-01-01 00:00',
+                    alterTime: '2023-01-01 00:00',
+                },
+                {
+                    templateName: '模板1',
+                    templateForm: 'txt',
+                    createUser: 'test',
+                    createTime: '2023-01-01 00:00',
+                    alterTime: '2023-01-01 00:00',
+                },
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.search.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: absolute;
+    left: 218px;
+    top: 150px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .header {
+        margin: 2.5%;
+        height: 60px;
+        background-color: rgb(221, 220, 219);
+
+        .el-form-item {
+            margin-bottom: 0 !important;
+            margin-right: 60px !important;
+
+            /deep/.el-form-item {
+                margin-right: 50px;
+                margin-bottom: 0;
+            }
+
+            /deep/.el-form-item__content {
+                margin-left: 120px;
+            }
+        }
+    }
+
+    .content {
+        width: 95%;
+        position: absolute;
+        margin-left: 2.5%;
+        margin-right: 2.5%;
+
+        .info {
+            text-align: left;
+            padding: 10px;
+            font-size: 25px;
+        }
+
+        .new_button {
+            padding: 5px;
+            width: 80px;
+            position: relative;
+            left: 760px;
+            background-color: #409EFF;
+            color: #FFF;
+        }
+
+        .el-table {
+            margin-top: 10px;
+        }
+
+        .el-select {
+            width: 80px;
+            margin-right: 20px;
+        }
+    }
+
+    .bottom {
+        position: absolute;
+        top: 700px;
+        left: 50px;
+        height: 50px;
+        width: 95%;
+        line-height: 20px;
+        background-color: rgba(255, 255, 255, 1);
+        text-align: center;
+
+        .checkbox {
+            position: absolute;
+            left: 29px;
+            top: 15px;
+            font-size: 14px;
+        }
+
+        .check-cancel {
+            position: absolute;
+            // line-height: 20px;
+            font-size: 14px;
+            text-align: center;
+            left: 140px;
+            top: 10px;
+        }
+
+        .bottom_button {
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
+
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .disabled {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .export {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+        }
+    }
+}
+</style>

src/views/deviceManagement/deviceConfig.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="告警类别" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button @click="newDeviceType()"><i class="el-icon-s-order"></i>新建设备类别</el-button>
+        </div>
+        <div class="right-pane">
+            <div style="margin:20px 1100px 20px 0 ;">
+                <div style="display: flex;">
+                    <el-button @click="addDevice()">添加设备</el-button>
+                    <el-button style="margin-left:20px" @click="dataImport()">批量导入</el-button>
+                </div>
+                <el-input class="search" v-model="filter" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
+            </div>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column type="index" width="50" label="序号">
+                </el-table-column>
+                <el-table-column prop="deviceName" label="设备名称">
+                </el-table-column>
+                <el-table-column prop="deviceID" label="设备ID">
+                </el-table-column>
+                <el-table-column prop="deviceUse" label="设备用途">
+                </el-table-column>
+                <el-table-column prop="devicePosition" label="设备位置">
+                </el-table-column>
+                <el-table-column prop="deviceLife" label="设备使用年限">
+                </el-table-column>
+                <el-table-column prop="company" label="设备单位">
+                </el-table-column>
+                <el-table-column prop="deviceRespon" label="设备责任人">
+                </el-table-column>
+                <el-table-column prop="operation" label="操作">
+                    <template slot-scope="scope">
+                        <el-button v-show="scope.row.deviceID == null ? false : true" size="mini" type="text"
+                            @click="deviceEdit()">编辑</el-button>
+                        <el-button v-show="scope.row.deviceID == null ? false : true" size="mini" type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="bottom">
+            <div>
+                <checkbox class="checkbox"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancelChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+            </div>
+            <page></page>
+        </div>
+        <!--弹窗-->
+        <NewDeviceType ref="newDevice"></NewDeviceType>
+        <addDevice ref="addDevice"></addDevice>
+        <dataImport ref="dataImport"></dataImport>
+        <deviceEdit ref="deviceEdit"></deviceEdit>
+    </div>
+</template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+import NewDeviceType from './messageDailog/newDeviceType'
+import dataImport from './messageDailog/dataImport'
+import addDevice from './messageDailog/addDevice'
+import deviceEdit from './messageDailog/deviceEdit'
+export default {
+    components: { checkbox, page, NewDeviceType, dataImport, addDevice, deviceEdit },
+    data() {
+        return {
+            filterText: '',
+            filter: '',
+            form: {
+                typeName: ''
+            },
+            data: [{
+                label: '楼层',
+                children: [
+                    {
+                        label: 'A设备'
+                    }, {
+                        label: 'B设备'
+                    }
+                ]
+            },
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            tableData: [{
+                deviceName: '摄像头',
+                deviceID: 'SXT-001',
+                deviceUse: '监控摄像头',
+                devicePosition: '1层101',
+                deviceLife: '3年6个月',
+                company: '北京电信规划院',
+                deviceRespon: '张三',
+            }, {
+
+            }, {
+
+            }],
+            multipleSelection: [],
+            show: true
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+        newDeviceType() {
+            this.$refs.newDevice.dialogVisible = true;
+        },
+        dataImport() {
+            this.$refs.dataImport.dialogVisible = true;
+        },
+        addDevice() {
+            this.$refs.addDevice.dialogVisible = true;
+        },
+        deviceEdit() {
+            this.$refs.deviceEdit.dialogVisible = true;
+        },
+        handleSelectionChange() {
+            //
+        },
+        handleNodeClick() {
+            //
+        },
+        cancelChecked() {
+            //
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.container {
+    position: absolute;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    height: -webkit-fill-available;
+    margin-bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .el-button {
+            position: absolute;
+            left: 35px;
+            bottom: 40px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+    }
+
+
+    .bottom {
+        position: absolute;
+        left: 330px;
+        right: 16px;
+        bottom: 20px;
+        height: 50px;
+        line-height: 20px;
+        background-color: rgba(255, 255, 255, 1);
+        text-align: center;
+
+        .checkbox {
+            position: absolute;
+            left: 29px;
+            top: 15px;
+            font-size: 14px;
+        }
+
+        .check-cancel {
+            position: absolute;
+            // line-height: 20px;
+            font-size: 14px;
+            text-align: center;
+            left: 140px;
+            top: 10px;
+        }
+
+        .bottom_button {
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
+
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+        }
+    }
+
+    .el-form {
+        margin: 30px 0 0 0;
+
+        .el-form-item {
+            margin-inline: 20px;
+            margin-bottom: 0;
+        }
+
+        /deep/.el-form-item__label {
+            padding: 0;
+        }
+
+        /deep/.el-form-item__content {
+            display: flex;
+        }
+
+        /deep/.el-input__inner {
+            width: 300px;
+        }
+    }
+
+    /deep/.el-dialog {
+        height: 30vh;
+    }
+
+    /deep/.el-dialog__title {
+        margin-right: 330px;
+    }
+
+    /deep/.el-dialog__headerbtn {
+        font-size: 25px;
+    }
+
+    /deep/.el-dialog__body {
+        padding: 0;
+    }
+
+}
+
+.search {
+    position: absolute;
+    width: 300px;
+    top: 20px;
+    right: 20px;
+}
+</style>

src/views/deviceManagement/deviceWarning.vue

@@ -0,0 +1,215 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="告警类别" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button><i class="el-icon-s-order"></i>新建告警类别</el-button>
+        </div>
+        <div class="right-pane">
+            <div style="margin:20px 1100px 20px 0 ;">
+                <el-input class="search" v-model="input" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
+            </div>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column type="index" width="50" label="序号">
+                </el-table-column>
+                <el-table-column prop="deviceType" label="设备类别">
+                </el-table-column>
+                <el-table-column prop="devicewarningType" label="涵盖设备警告类别">
+                </el-table-column>
+                <el-table-column prop="Respon" label="责任人">
+                </el-table-column>
+                <el-table-column prop="operation" label="操作">
+                    <el-button size="mini" type="text">查看</el-button>
+                    <el-button size="mini" type="text">编辑</el-button>
+                    <el-button size="mini" type="text">删除</el-button>
+                </el-table-column>
+            </el-table>
+            <div class="bottom">
+                <div>
+                    <checkbox class="checkbox"></checkbox>
+                    <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+                </div>
+                <div class="bottom_button" v-show="show">
+                    <el-button class="delete" type="text">批量删除</el-button>
+                </div>
+                <page class="page"></page>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+export default {
+    components: { checkbox, page },
+    data() {
+        return {
+            filterText: '',
+            input: '',
+            data: [{
+                label: '紧急告警',
+                children: [
+                ]
+            }, {
+                label: '重要告警'
+            }, {
+                label: '一般告警'
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            tableData: [{
+                deviceType: '摄像头',
+                devicewarningType: '[设备离线][设备xxx]',
+                Respon: '张三',
+            }, {
+                deviceType: '摄像头',
+                devicewarningType: '[设备离线][设备xxx]',
+                Respon: '张三',
+            }, {
+                deviceType: '摄像头',
+                devicewarningType: '[设备离线][设备xxx]',
+                Respon: '张三',
+            }],
+            multipleSelection: [],
+            show: true
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        cancleChecked() {
+            //
+        },
+        handleClick() {
+            //
+        },
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+        handleNodeClick(){
+            //
+        },
+        handleSelectionChange(){
+            //
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.container {
+    position: absolute;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    //height: 800px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .el-button {
+            position: absolute;
+            left: 35px;
+            bottom: 40px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+
+        .el-table{
+            top:60px;
+        }
+    }
+}
+
+.bottom {
+    position: absolute;
+    top: 700px;
+    height: 50px;
+    width: 1340px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+
+    .checkbox {
+        position: absolute;
+        left: 29px;
+        top: 15px;
+        font-size: 14px;
+    }
+
+    .check-cancel {
+        position: absolute;
+        // line-height: 20px;
+        font-size: 14px;
+        text-align: center;
+        left: 140px;
+        top: 10px;
+    }
+
+    .bottom_button {
+        position: absolute;
+        left: 200px;
+        margin-top: 15px;
+
+        .delete {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+
+        .disabled {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+
+        .export {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+    }
+}
+
+.search {
+    position: absolute;
+    width: 300px;
+    top: 20px;
+    right: 20px;
+}
+</style>

src/views/deviceManagement/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="el-tab">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="设备配置" name="deviceConfig"></el-tab-pane>
+                <el-tab-pane label="设备告警" name="deviceWarning"></el-tab-pane>
+            </el-tabs>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script >
+import test from './deviceConfig'
+export default {
+    components: { test },
+    data() {
+        return {
+            activeName: 'deviceConfig',
+        }
+    },
+    methods: {
+        handleClick() {
+            //
+        },
+    }
+};
+</script>
+<style lang="less" scoped>
+.el-tab {
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    top: 77px;
+    height: 51px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    /deep/.el-tabs__nav {
+        left: 25px;
+    }
+
+    /deep/.el-tabs__nav-wrap::after {
+        height: 0;
+    }
+}
+</style>

src/views/deviceManagement/messageDailog/addDevice.vue

@@ -0,0 +1,167 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="添加设备" :visible.sync="dialogVisible" width="25%" center>
+            <el-divider></el-divider>
+            <div class="container">
+                <div class="leftpane">
+                    <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                        @node-click="handleNodeClick">
+                    </el-tree>
+                </div>
+                <div class="rightpane">
+                    <el-input class="search" v-model="filter" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
+                    <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                        :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
+                        style="width: 100%" @selection-change="handleSelectionChange">
+                        <el-table-column type="selection" width="50">
+                        </el-table-column>
+                        <el-table-column prop="deviceID" label="设备ID">
+                        </el-table-column>
+                        <el-table-column prop="devicePosition" label="设备位置">
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary">确认</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            filter: '',
+            data: [{
+                label: '设备种类',
+                children: [
+                    {
+                        label: '摄像头'
+                    },
+                    {
+                        label: '门禁设备'
+                    },
+                    {
+                        label: '水浸设备'
+                    },
+                    {
+                        label: '电表设备'
+                    },
+                    {
+                        label: '其他设备'
+                    }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            tableData: [{
+                deviceID: '111',
+                devicePosition: '1F-101'
+            }, {
+                deviceID: '112',
+                devicePosition: '1F-101'
+            }, {
+                deviceID: '113',
+                devicePosition: '1F-101'
+            }]
+        }
+    },
+    methods: {
+        handleNodeClick() {
+
+        },
+        handleSelectionChange() {
+
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.container {
+    height: 450px;
+    width: 95%;
+    margin-left: 2.5%;
+    border: 0.5px solid rgb(247, 245, 243);
+    margin-top: 20px;
+    display: flex;
+
+    .leftpane {
+        width: 150px;
+
+        .el-tree {
+            height: 450px;
+            background-color: rgb(247, 245, 243);
+        }
+    }
+
+    .rightpane {
+        .search {
+            width: 250px;
+            margin-left: 60px;
+
+            /deep/.el-input__inner {
+                height: 35px;
+            }
+        }
+
+        .el-table {
+            margin-top: 20px;
+            width: 95% !important;
+            margin-left: 5%;
+        }
+    }
+}
+
+/deep/.el-dialog {
+    height: 600px !important;
+}
+
+.el-select {
+    width: 280px;
+}
+
+
+
+/deep/.el-dialog {
+    height: 30vh;
+}
+
+/deep/.el-dialog__title {
+    margin-right: 330px;
+}
+
+/deep/.el-dialog__headerbtn {
+    font-size: 25px;
+}
+
+/deep/.el-dialog__body {
+    padding: 0;
+}
+
+/deep/.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 95%;
+    margin: 0;
+    margin-left: 2.5%;
+}
+
+/deep/.el-dialog__footer {
+    margin-top: -20px;
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    margin: 30px;
+    padding: 5px;
+}
+</style>

src/views/deviceManagement/messageDailog/dataImport.vue

@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="批量导入数据" :visible.sync="dialogVisible" width="25%" center>
+            <el-divider></el-divider>
+            <el-timeline>
+                <el-timeline-item>下载 Excel 模板
+                    <el-button
+                        style="width: 200px;height: 30px;text-align: center;margin:0px; margin-top: 10px;padding: 5px;"
+                        type="text">点击下载《A设备导入模板》</el-button>
+                </el-timeline-item>
+                <el-timeline-item>编辑 Excel 模板</el-timeline-item>
+                <el-timeline-item>上传已编辑好的 Excel 模板</el-timeline-item>
+            </el-timeline>
+            <div slot="footer" class="dialog-footer">
+                <el-input v-model="input" placeholder="文件名称"></el-input>
+                <el-upload :action="action">
+                    <el-button type="primary">选择文件</el-button>
+                </el-upload>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            input: '',
+            action: '',
+            steps: [{
+                content: '下载 Excel 模板',
+            }, {
+                content: '编辑 Excel 模板',
+            }, {
+                content: '上传已编辑好的 Excel 模板'
+            }]
+        }
+    },
+    methods: {
+
+    }
+
+}
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+    height: 500px !important;
+}
+
+/deep/.el-dialog {
+    height: 30vh;
+}
+
+/deep/.el-dialog__title {
+    margin-right: 330px;
+}
+
+/deep/.el-dialog__headerbtn {
+    font-size: 25px;
+}
+
+/deep/.el-dialog__body {
+    padding: 0;
+}
+
+/deep/.el-dialog__footer {
+    margin-top: -40px;
+}
+
+.el-timeline {
+    margin: 40px 0 0 80px;
+    list-style: none;
+    font-size: 18px;
+
+    .el-timeline-item {
+        position: relative;
+        padding-bottom: 80px;
+    }
+
+    /deep/.el-timeline-item__content {
+        display: grid;
+    }
+}
+
+/deep/.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 95%;
+    margin: 0;
+    margin-left: 2.5%;
+}
+
+.dialog-footer {
+    display: flex;
+    margin-left: 10px;
+
+    /deep/.el-input {
+        height: 40px;
+        width: 300px;
+        margin-right: 10px;
+    }
+
+    /deep/.el-button {
+        margin: 0;
+        height: 40px;
+        width: 100px;
+    }
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    margin: 30px;
+    padding: 5px;
+}
+</style>

src/views/deviceManagement/messageDailog/deviceEdit.vue

@@ -0,0 +1,189 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="设备编辑" :visible.sync="dialogVisible" width="25%" center>
+            <el-divider></el-divider>
+            <div style="height: 470px;">
+                <el-scrollbar style="height: 100%;">
+                    <el-form ref="form" :model="form" label-position="left" label-width="75px">
+                        <el-form-item label="设备名称：" prop="name">
+                            <el-input v-model="form.name"></el-input>
+                        </el-form-item>
+                        <el-form-item label="设备ID：" prop="id">
+                            <el-input v-model="form.id"></el-input>
+                        </el-form-item>
+                        <el-form-item label="设备类别：" prop="type">
+                            <el-select v-model="form.type" placeholder="请选择">
+                                <el-option value="test"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="设备用途：" prop="use">
+                            <el-select v-model="form.use" placeholder="请选择">
+                                <el-option value="test"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="设备位置：" prop="position">
+                            <el-select v-model="form.position" placeholder="请选择">
+                                <el-option value="test"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label-width="105px" label="设备使用年限：" prop="life">
+                            <el-input class="life" v-model="form.life"></el-input>
+                        </el-form-item>
+                        <el-form-item label-width="90px" label="设备责任人：" prop="person">
+                            <el-input class="person" v-model="form.person"></el-input>
+                        </el-form-item>
+                        <el-form-item label="公司名称：" prop="corpor_name">
+                            <el-select v-model="form.corpor_name" placeholder="请选择">
+                                <el-option value="test"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="部门名称：" prop="depart_name">
+                            <el-select v-model="form.depart_name" placeholder="请选择">
+                                <el-option value="test"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label-width="45px" label="备注：" prop="note">
+                            <el-input class="note" type="textarea" :rows="2" v-model="form.note"></el-input>
+                        </el-form-item>
+                        <el-form-item label-width="45px" style="width: 370px;" :model="form.attachment" label="附件："
+                            prop="attachment">
+                            <el-upload class="attachment" drag :action="action" multiple>
+                                <i class="el-icon-upload"></i>
+                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                                <div class="el-upload__tip" slot="tip" style="display: flex;">请上传大小不小于 <p
+                                        style="color: crimson;">5MB</p>，格式为 <P style="color: crimson;">png/jpd/jpeg</P>的文件
+                                </div>
+                            </el-upload>
+                        </el-form-item>
+                    </el-form>
+                </el-scrollbar>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary">下一个</el-button>
+                <el-button @click="resetForm('form')">重置</el-button>
+                <el-button type="primary" @click="submitForm('form')">确认</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                name: '',
+                id: '',
+                type: '',
+                use: '',
+                position: '',
+                life: '',
+                person: '',
+                corpor_name: '',
+                depart_name: '',
+                note: '',
+                attachment: ''
+            },
+            action: ''
+        }
+    },
+    methods: {
+        handleNodeClick() {
+
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //
+                }
+            })
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+    height: 600px !important;
+}
+
+.el-form {
+    .el-form-item {
+        margin: 20px 0 0 40px;
+        width: 400px;
+
+        /deep/.el-form-item__label {
+            padding: 0;
+            font-size: 15px;
+        }
+
+        /deep/.el-input__inner {
+            width: 300px;
+            height: 30px;
+        }
+
+        .life {
+            /deep/.el-input__inner {
+                width: 270px !important;
+            }
+        }
+
+        .person {
+            /deep/.el-input__inner {
+                width: 285px !important;
+            }
+        }
+
+        .note {
+            /deep/.el-input__inner {
+                width: 330px !important;
+            }
+        }
+    }
+}
+
+.dialog-footer {
+    display: flex;
+}
+
+
+/deep/.el-dialog {
+    height: 30vh;
+}
+
+/deep/.el-dialog__title {
+    margin-right: 330px;
+}
+
+/deep/.el-dialog__headerbtn {
+    font-size: 25px;
+}
+
+/deep/.el-dialog__body {
+    padding: 0;
+}
+
+/deep/.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 95%;
+    margin: 0;
+    margin-left: 2.5%;
+}
+
+/deep/.el-dialog__footer {
+    margin-top: -20px;
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    margin: 30px;
+    padding: 5px;
+}
+</style>

src/views/deviceManagement/messageDailog/newDeviceType.vue

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="新建设备类别" :visible.sync="dialogVisible" width="25%" center>
+            <el-divider></el-divider>
+            <el-form :model="form" label-position="left" label-width="80px">
+                <el-form-item :model="form.typeName" label="类别名称：">
+                    <el-select v-model="value" placeholder="请输入">
+                        <el-option value="test"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="addType">确认</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            dialogVisible: false,
+            form: {
+                typeName: '',
+            },
+        }
+    },
+    methods: {
+        addType() {
+
+        },
+    }
+
+}
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+    height: 350px !important;
+}
+
+.el-select {
+    width: 280px;
+}
+
+.el-form {
+    margin: 40px 0 0 20px;
+
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+    }
+
+    /deep/.el-form-item__label {
+        padding: 0;
+    }
+
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+
+/deep/.el-dialog {
+    height: 30vh;
+}
+
+/deep/.el-dialog__title {
+    margin-right: 330px;
+}
+
+/deep/.el-dialog__headerbtn {
+    font-size: 25px;
+}
+
+/deep/.el-dialog__body {
+    padding: 0;
+}
+
+/deep/.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 95%;
+    margin: 0;
+    margin-left: 2.5%;
+}
+
+/deep/.el-dialog__footer {
+    margin-top: 80px;
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    margin: 30px;
+    padding: 5px;
+}
+</style>

src/views/groupManagement/forms/corporationdetailEdit.vue

@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <p class="info">企业详情</p>
+        <img class="img" src="" alt="">
+        <div class="form">
+            <el-form :model="form" label-position="left" label-width="130px">
+                <el-form-item :model="form.fullName" label="公司全称：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.abbreviateName" label="公司简称：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.parentCorporation" label="上级公司：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.sccide" label="统一社会信用代码：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.registeredAddress" label="注册地址：">
+                    <el-select style="width:160px">
+                        <el-option label=""></el-option>
+                    </el-select><span><el-input style="margin-left: 10px; width: 230px;"
+                            placeholder="test"></el-input></span>
+                </el-form-item>
+                <el-form-item :model="form.businessAddress" label="经营地址：">
+                    <el-select style="width:160px">
+                        <el-option label=""></el-option>
+                    </el-select><span><el-input style="margin-left: 10px; width: 230px;"
+                            placeholder="test"></el-input></span>
+                </el-form-item>
+                <el-form-item :model="form.legalName" label="法人姓名：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.copporationCode" label="公司编码：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.complementCount" label="编制人数：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.staffCount" label="在岗人数：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div>
+            <el-button>删除</el-button>
+            <el-button style="background-color: rgb(131, 208, 243);">编辑</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            }
+        }
+    },
+    methods: {
+
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.info {
+    text-align: left;
+    padding: 20px;
+    font-size: 25px;
+}
+
+.img {
+    width: 1300px;
+    height: 150px;
+}
+
+.form {
+    margin-left: 350px;
+
+    .el-form {
+        //margin: 40px 0 0 0;
+
+        .el-form-item {
+            padding-top: 10px;
+            margin-inline: 20px;
+            margin-bottom: 0;
+        }
+
+        /deep/.el-form-item__label {
+            padding: 0;
+            text-align: left;
+        }
+
+        /deep/.el-form-item__content {
+            display: flex;
+            width: 400px;
+        }
+    }
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    padding: 5px;
+    margin: 10px;
+}
+</style>

src/views/groupManagement/forms/corporationdetailStore.vue

@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <p class="info">企业详情</p>
+        <img class="img" src="" alt="">
+        <div class="form">
+            <el-form :model="form" label-position="left" label-width="130px">
+                <el-form-item :model="form.fullName" label="公司全称：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.abbreviateName" label="公司简称：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.parentCorporation" label="上级公司：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.sccide" label="统一社会信用代码：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.registeredAddress" label="注册地址：">
+                    <el-select style="width:160px">
+                        <el-option label=""></el-option>
+                    </el-select><span><el-input style="margin-left: 10px; width: 230px;"
+                            placeholder="test"></el-input></span>
+                </el-form-item>
+                <el-form-item :model="form.businessAddress" label="经营地址：">
+                    <el-select style="width:160px">
+                        <el-option label=""></el-option>
+                    </el-select><span><el-input style="margin-left: 10px; width: 230px;"
+                            placeholder="test"></el-input></span>
+                </el-form-item>
+                <el-form-item :model="form.legalName" label="法人姓名：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.copporationCode" label="公司编码：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.complementCount" label="编制人数：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.staffCount" label="在岗人数：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div>
+            <el-button>重置</el-button>
+            <el-button style="background-color: rgb(131, 208, 243);">保存</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            }
+        }
+    },
+    methods: {
+
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.info {
+    text-align: left;
+    padding: 20px;
+    font-size: 25px;
+}
+
+.img {
+    width: 1300px;
+    height: 150px;
+}
+
+.form {
+    margin-left: 350px;
+
+    .el-form {
+        //margin: 40px 0 0 0;
+
+        .el-form-item {
+            padding-top: 10px;
+            margin-inline: 20px;
+            margin-bottom: 0;
+        }
+
+        /deep/.el-form-item__label {
+            padding: 0;
+            text-align: left;
+        }
+
+        /deep/.el-form-item__content {
+            display: flex;
+            width: 400px;
+        }
+    }
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    padding: 5px;
+    margin: 10px;
+}
+</style>

src/views/groupManagement/forms/departmentdetailEdit.vue

@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <p class="info">部门详情</p>
+        <img class="img" src="" alt=""><el-button class="alter">更换</el-button>
+        <div class="form">
+            <el-form :model="form" label-position="left" label-width="130px">
+                <el-form-item :model="form.fullName" label="部门级别：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.abbreviateName" label="上级部门：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.parentCorporation" label="部门负责人：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.sccide" label="部门接口人：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.registeredAddress" label="排重名：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.businessAddress" label="在岗人数：">
+                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="100"></el-input-number>
+                </el-form-item>
+                <el-form-item :model="form.legalName" label="自由员工：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.copporationCode" label="协作员工：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.complementCount" label="第三方员工：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.staffCount" label="部门职责：">
+                    <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200"
+                        show-word-limit></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div>
+            <el-button>删除</el-button>
+            <el-button style="background-color: rgb(131, 208, 243);">编辑</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            },
+            num: 100,
+            textarea:''
+        }
+    },
+    methods: {
+        handleChange() {
+            //
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.info {
+    text-align: left;
+    padding: 20px;
+    font-size: 25px;
+}
+
+.img {
+    width: 1300px;
+    height: 150px;
+}
+
+.alter{
+    position: absolute;
+    right:30px;
+    top: 155px;
+    background-color:rgb(131, 208, 243);
+}
+.form {
+    margin-left: 350px;
+
+    .el-form {
+        //margin: 40px 0 0 0;
+
+        .el-form-item {
+            padding-top: 10px;
+            margin-inline: 20px;
+            margin-bottom: 0;
+        }
+
+        /deep/.el-form-item__label {
+            padding: 0;
+            text-align: left;
+        }
+
+        /deep/.el-form-item__content {
+            display: flex;
+            width: 400px;
+        }
+    }
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    padding: 5px;
+    margin: 10px;
+}
+</style>

src/views/groupManagement/index.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button><i class="el-icon-s-order"></i>添加公司</el-button>
+        </div>
+        <div class="right-pane">
+            <test></test>
+        </div>
+    </div>
+</template>
+
+<script>
+import test from './forms/departmentdetailEdit.vue'
+export default {
+    components: { test },
+    data() {
+        return {
+            filterText: '',
+            data: [{
+                label: '中讯邮电咨询设计院',
+                children: [{
+                    label: '北京电信规划设计院',
+                    children: [{
+                        label: '天津办事处'
+                    }]
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        handleNodeClick() {
+            //
+        },
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: fixed;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    height: -webkit-fill-available;
+    margin-bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .el-button {
+            position: absolute;
+            left: 35px;
+            bottom: 40px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+    }
+}
+</style>

src/views/groupManagement/messageDialog/corporationAdd.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="info">
+        <el-tabs>
+            <el-tab-pane style="height: 40px; padding: 10px; text-align: left; margin-left:10px; font-size: 16px;">添加公司
+                <span><i class="el-icon-close" @click="close"></i></span>
+            </el-tab-pane>
+        </el-tabs>
+        <div style="display: flex;">
+            <img class="img" src="" alt=""><span><el-button style="width: 60px; margin-left: -160px;
+            margin-top: 60px; background-color:rgb(131, 208, 243);">更换</el-button></span>
+        </div>
+        <div class="form">
+            <el-form :model="form" label-position="left" label-width="130px">
+                <el-form-item :model="form.fullName" label="公司全称：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.abbreviateName" label="公司简称：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.parentCorporation" label="上级公司：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.sccide" label="统一社会信用代码：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.registeredAddress" label="注册地址：">
+                    <el-select style="width:160px">
+                        <el-option label=""></el-option>
+                    </el-select><span><el-input style="margin-left: 10px; width: 230px;"
+                            placeholder="test"></el-input></span>
+                </el-form-item>
+                <el-form-item :model="form.businessAddress" label="经营地址：">
+                    <el-select style="width:160px">
+                        <el-option label=""></el-option>
+                    </el-select><span><el-input style="margin-left: 10px; width: 230px;"
+                            placeholder="test"></el-input></span>
+                </el-form-item>
+                <el-form-item :model="form.legalName" label="法人姓名：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.copporationCode" label="公司编码：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.complementCount" label="编制人数：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.staffCount" label="在岗人数：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div style="margin-top: 30px;">
+            <el-button style="background-color:rgb(131, 208, 243);">下一个</el-button>
+            <el-button>重置</el-button>
+            <el-button style="background-color:rgb(131, 208, 243);">更新</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            },
+        }
+    },
+    methods: {
+        close() {
+
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.info {
+    margin-top: 10px;
+    margin-left: 300px;
+    left: 350px;
+    width: 600px;
+    height: 750px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .img {
+        margin: 15px 50px 0 50px;
+        width: 500px;
+        height: 80px;
+    }
+
+
+    .el-icon-close {
+        margin-left: 480px;
+    }
+
+    /deep/.el-tabs__header {
+        height: 0;
+        margin-bottom: 0;
+    }
+
+
+    .form {
+        //margin-left: 350px;
+
+        .el-form {
+            //margin: 40px 0 0 0;
+
+            .el-form-item {
+                padding-top: 10px;
+                margin-inline: 20px;
+                margin-bottom: 0;
+            }
+
+            /deep/.el-form-item__label {
+                padding: 0;
+                text-align: left;
+            }
+
+            /deep/.el-form-item__content {
+                display: flex;
+                width: 400px;
+            }
+        }
+    }
+
+    .el-button {
+        width: 100px;
+        height: 30px;
+        padding: 5px;
+        margin: 10px;
+    }
+}
+</style>

src/views/groupManagement/messageDialog/departmentNew.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="info">
+        <el-tabs>
+            <el-tab-pane style="height: 40px; padding: 10px; text-align: left; margin-left:10px; font-size: 16px;">新建部门
+                <span><i class="el-icon-close" @click="close"></i></span>
+            </el-tab-pane>
+        </el-tabs>
+        <div style="display: flex;">
+            <img class="img" src="" alt=""><span><el-button style="width: 60px; margin-left: -160px;
+            margin-top: 60px; background-color:rgb(131, 208, 243);">更换</el-button></span>
+        </div>
+        <div class="form">
+            <el-form :model="form" label-position="left" label-width="130px">
+                <el-form-item :model="form.fullName" label="部门级别：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.abbreviateName" label="上级部门：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.registeredAddress" label="部门名称：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.registeredAddress" label="排重名：">
+                    <el-input placeholder="test" type="text"></el-input>
+                </el-form-item>
+                <el-form-item :model="form.parentCorporation" label="部门负责人：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.sccide" label="部门接口人：">
+                    <el-select style="width:400px">
+                        <el-option label=""></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :model="form.businessAddress" label="在岗人数：">
+                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="100"></el-input-number>
+                </el-form-item>
+                <el-form-item :model="form.staffCount" label="部门职责：">
+                    <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200"
+                        show-word-limit></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div style="margin-top: 30px;">
+            <el-button style="background-color:rgb(131, 208, 243);">下一个</el-button>
+            <el-button>重置</el-button>
+            <el-button style="background-color:rgb(131, 208, 243);">更新</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            },
+            num: 100,
+            textarea:''
+        }
+    },
+    methods: {
+        close() {
+
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.info {
+    margin-top: 10px;
+    margin-left: 300px;
+    left: 350px;
+    width: 600px;
+    height: 750px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .img {
+        margin: 15px 50px 0 50px;
+        width: 500px;
+        height: 80px;
+    }
+
+
+    .el-icon-close {
+        margin-left: 480px;
+    }
+
+    /deep/.el-tabs__header {
+        height: 0;
+        margin-bottom: 0;
+    }
+
+
+    .form {
+        .el-form {
+
+            .el-form-item {
+                padding-top: 10px;
+                margin-inline: 20px;
+                margin-bottom: 0;
+            }
+
+            /deep/.el-form-item__label {
+                padding: 0;
+                text-align: left;
+            }
+
+            /deep/.el-form-item__content {
+                display: flex;
+                width: 400px;
+            }
+        }
+    }
+
+    .el-button {
+        width: 100px;
+        height: 30px;
+        padding: 5px;
+        margin: 10px;
+    }
+}
+</style>

src/views/groupManagement/messageDialog/update.vue

@@ -0,0 +1,22 @@
+<template>
+    <el-dialog :visible.sync="centerDialogVisible" width="30%" center style="display: flex;">
+        <div>/////</div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="centerDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="centerDialogVisible = false">确 认</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            centerDialogVisible: false
+        };
+    }
+};
+</script>
+
+<script lang="less" scoped>
+</script>

src/views/groupManagement/tables/corporationOverview.vue

@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <p class="info">公司总览</p>
+        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50">
+            </el-table-column>
+            <el-table-column prop="corporation_name" label="公司名称">
+            </el-table-column>
+            <el-table-column prop="Sccode" label="社会信用代码">
+            </el-table-column>
+            <el-table-column prop="legal_person" label="公司法人">
+            </el-table-column>
+            <el-table-column prop="contact_person" label="联系人">
+            </el-table-column>
+            <el-table-column prop="contact_phone" label="联系电话">
+            </el-table-column>
+            <el-table-column prop="operation" label="操作">
+                <el-button size="mini" type="text">查看</el-button>
+                <el-button size="mini" type="text">编辑</el-button>
+                <el-button size="mini" type="text">删除</el-button>
+            </el-table-column>
+        </el-table>
+        <div class="bottom">
+            <div>
+                <checkbox class="checkbox"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+            </div>
+            <page class="page"></page>
+        </div>
+    </div>
+</template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+export default {
+    components: { checkbox, page },
+    data() {
+        return {
+            tableData: [{
+                corporation_name: '中讯邮电咨询设计院有限公司',
+                Sccode: '4032',
+                legal_person: '张三',
+                contact_person: '张三',
+                contact_phone: '12345678901',
+            }, {
+                corporation_name: '北京电信规划院有限公司',
+                Sccode: '9416',
+                legal_person: '李四',
+                contact_person: '李四',
+                contact_phone: '12345678901',
+            }, {
+                corporation_name: '北京电信规划院有限公司',
+                Sccode: '9416',
+                legal_person: '李四',
+                contact_person: '李四',
+                contact_phone: '12345678901',
+            }],
+            multipleSelection: [],
+            show: true
+        }
+    },
+    methods: {
+        cancleChecked() {
+            //
+        },
+        handleClick() {
+            //
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.info {
+    text-align: left;
+    padding: 0px;
+    font-size: 25px;
+}
+
+.bottom {
+    position: relative;
+    left: 20px;
+    top: 420px;
+    height: 50px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+
+    .checkbox {
+        position: absolute;
+        left: 29px;
+        top: 15px;
+        font-size: 14px;
+    }
+
+    .check-cancel {
+        position: absolute;
+        // line-height: 20px;
+        font-size: 14px;
+        text-align: center;
+        left: 140px;
+        top: 10px;
+    }
+
+    .bottom_button {
+        position: absolute;
+        left: 200px;
+        top: 7px;
+
+        .delete {
+            width: 95px;
+            height: 30px;
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+
+        .disabled {
+            width: 95px;
+            height: 30px;
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+
+        .el-dropdown {
+            margin-left: 15px;
+
+            /deep/.el-button--primary {
+                height: 30px;
+                //background-color: rgba(255, 255, 255, 1);
+            }
+        }
+    }
+
+    .page {
+        position: absolute;
+        top: -10px;
+        right: 30px;
+    }
+}
+</style>

src/views/login/index.vue

@@ -0,0 +1,274 @@
+<template>
+    <div class="login-container">
+        <div class="title-container">
+            <h3 class="title">{{ title }}</h3>
+        </div>
+        <div class="content">
+            <el-tabs :stretch="true">
+                <el-tab-pane label="账户登录">
+                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
+                        label-position="left">
+                        <el-form-item prop="username">
+                            <el-input class="username" ref="username" type="text" placeholder="账户/邮件账户" clearable
+                                v-model="loginForm.username"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="password">
+                            <el-input class="password" ref="password" placeholder="请输入密码" clearable
+                                v-model="loginForm.password" show-password></el-input>
+                        </el-form-item>
+                        <el-form-item class="vertification">
+                            <el-input style="width: 140px;display: flex;" placeholder="请输入验证码"
+                                v-model="loginForm.vertification"></el-input>
+                            <identify :identifyCode="identifyCode" style="width: 90px; height: 40px;"></identify>
+                            <el-button style="margin-left: 20px; width:50px;font-size: 14px;" type="text"
+                                @click="refreshCode">看不清？</el-button>
+                        </el-form-item>
+                        <el-form-item style="margin-top:30px;">
+                            <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登 录</el-button>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-checkbox style="display: block; float: left;" v-model="remeber">记住密码</el-checkbox>
+                            <a style="margin-left: 150px;" href="">忘记密码？</a>
+                        </el-form-item>
+                    </el-form>
+                </el-tab-pane>
+                <el-tab-pane label="手机登陆">
+                    <el-form ref="loginForm2" :model="loginForm2" :rules="loginRules2" class="login-form" autocomplete="on">
+                        <el-form-item prop="phone">
+                            <el-input class="phone" placeholder="请输入手机号码" clearable v-model="loginForm2.phone"></el-input>
+                        </el-form-item>
+                        <el-form-item class="vertification">
+                            <el-input style="width: 160px;display: flex;" placeholder="请输入验证码"
+                                v-model="loginForm2.vertification"></el-input>
+                            <el-button class="phone_vertification" type="primary" @click="getVetifiedCode">获取验证码</el-button>
+                        </el-form-item>
+                        <el-form-item style="margin-top:60px">
+                            <el-button :loading="loading" type="primary" @click.native.prevent="phoneHandleLogin">登
+                                录</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+
+<script>
+import { validUsername } from '@/utils/validate';
+import identify from '@/components/Identify/index'
+export default {
+    components: { identify },
+    data() {
+        const validateUsername = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('用户名不能为空！'));
+            } else if (!validUsername(value)) {
+                callback(new Error('请输入正确的用户名！'));
+            } else {
+                callback();
+            }
+        };
+        const validatePassword = (rule, value, callback) => {
+            if (value.length < 6) {
+                callback(new Error('密码长度不少于6位！'));
+            } else {
+                callback();
+            }
+        };
+        const validatePhone = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('手机号不能为空！'));
+            } else if (!/^1\d{10}$/.test(value)) {
+                callback(new Error('手机号格式错误！'));
+            } else {
+                callback();
+            }
+        };
+        return {
+            title: '智慧运营管理中心',
+            loginForm: {
+                username: 'admin',
+                password: '123456',
+                vertification: '',
+            },
+            loginForm2: {
+                phone: '',
+                vertification: ''
+            },
+            loginRules: {
+                username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+                password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+            },
+            loginRules2: {
+                phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
+
+            },
+            remeber: true,
+            loading: false,
+            identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
+            identifyCode: '',
+            //redirect: undefined
+        }
+    },
+    // watch: {
+    //     $route: {
+    //         handler: function (route) {
+    //             const query = route.query;
+    //             if (query) {
+    //                 this.redirect = query.redirect;
+    //             }
+    //         },
+    //         immediate: true
+    //     }
+    // },
+    methods: {
+        handleLogin() {
+            if (this.loginForm.vertification.toLowerCase() != this.identifyCode.toLowerCase()) {
+                this.$message.error('请输入正确的验证码!');
+                this.refreshCode();
+            } else {
+                this.$refs.loginForm.validate(valid => {
+                    if (valid) {
+                        this.loading = true;
+                        this.$store.dispatch('user/login', this.loginForm).then(() => {
+                            this.$router.push({ path: '/home' });
+                            this.loading = false;
+                        }).catch(() => {
+                            this.loading = false;
+                        })
+                    } else {
+                        return false;
+                    }
+                })
+            }
+        },
+        refreshCode() {
+            this.identifyCode = '';
+            this.makeCode(4);
+        },
+        makeCode(l) {
+            for (let i = 0; i < l; i++) {
+                this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
+            }
+        },
+        randomNum(min, max) {
+            return Math.floor(Math.random() * (max - min) + min);
+        },
+        getVetifiedCode(){
+            
+        }
+    },
+    mounted() {
+        if (this.loginForm.username === '') {
+            this.$refs.username.focus();
+        } else if (this.loginForm.password === '') {
+            this.$refs.password.focus();
+        };
+
+        //初始化验证码
+        this.identifyCode = '';
+        this.makeCode(4);
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.login-container {
+    height: 100%;
+    width: 100%;
+    background-size: 100% 100%;
+    position: fixed;
+    overflow: hidden;
+    background-image: url("../../assets/images/background@2x.png")
+}
+
+.title-container {
+    position: relative;
+
+    .title {
+        font-size: 48px;
+        float: left;
+        margin-top: 150px;
+        margin-left: 400px;
+        text-align: center;
+        font-weight: bold;
+        letter-spacing: 20px;
+        color: #000000;
+    }
+}
+
+.content {
+    position: absolute;
+    top: 250px;
+    height: 400px;
+    right: 300px;
+    width: 400px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    box-shadow: 2px 2px lightgrey;
+
+    .el-form-item {
+        width: 300px;
+        margin-left: 50px;
+    }
+
+    /deep/.el-tabs__content {
+        margin-top: 40px;
+    }
+}
+
+.username {
+    /deep/.el-input__inner {
+        background: url('./images/username@2x.png') no-repeat 15px center;
+        background-size: 20px;
+        padding: 0 50px;
+    }
+}
+
+.password {
+    /deep/.el-input__inner {
+        background: url('./images/password@2x.png') no-repeat 15px center;
+        background-size: 20px;
+        padding: 0 50px;
+    }
+}
+
+.phone {
+    /deep/.el-input__inner {
+        background: url('./images/shouji@3x.png') no-repeat 15px center;
+        background-size: 20px;
+        padding: 0 50px;
+    }
+}
+
+.vertification {
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+.phone_vertification {
+    width: 130px !important;
+    font-size: 18px;
+    height: 40px;
+    margin-left: 10px;
+    padding: 5px;
+}
+
+.el-button {
+    width: 300px;
+    font-size: 18px;
+}
+
+.el-checkbox {
+    display: flex;
+}
+
+/deep/.el-tabs__item {
+    font-size: 20px;
+}
+
+/deep/.el-tabs__nav-wrap {
+    padding: 15px 10px 0 10px;
+}
+</style>

src/views/permissionManagement/decisiongroup/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="container">
         <div class="header">
             <el-button>权限详情</el-button>
             <el-button>成员列表</el-button>
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import test from './permissionDetail'
+import test from './rolemembersList'
 export default {
     components: { test },
     data() {
@@ -18,11 +18,14 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.container{
+
+}
 .header {
     text-align: left;
     padding: 15px;
     font-size: 25px;
-
+    margin-top: 40px;
     .el-button {
         border-radius: 50px;
     }

src/views/permissionManagement/decisiongroup/rolemembersList.vue

@@ -101,65 +101,53 @@ export default {
     padding: 0;
 }
 .bottom {
-    position: relative;
-    left: 20px;
-    top: 420px;
-    height: 50px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-
-    .checkbox {
-        position: absolute;
-        left: 29px;
-        top: 15px;
-        font-size: 14px;
-    }
-
-    .check-cancel {
         position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
+        top: 700px;
+        //left: 330px;
+        height: 50px;
+        width: 87%;
+        line-height: 20px;
+        background-color: rgba(255, 255, 255, 1);
         text-align: center;
-        left: 140px;
-        top: 10px;
-    }
-
-    .bottom_button {
-        position: absolute;
-        left: 200px;
-        top: 7px;
 
-        .delete {
-            width: 95px;
-            height: 30px;
+        .checkbox {
+            position: absolute;
+            left: 29px;
+            top: 15px;
             font-size: 14px;
-            text-align: center;
-            padding: 1px;
         }
 
-        .disabled {
-            width: 95px;
-            height: 30px;
+        .check-cancel {
+            position: absolute;
+            // line-height: 20px;
             font-size: 14px;
             text-align: center;
-            padding: 1px;
+            left: 140px;
+            top: 10px;
         }
 
-        .el-dropdown {
-            margin-left: 15px;
+        .bottom_button {
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
 
-            /deep/.el-button--primary {
-                height: 30px;
-                //background-color: rgba(255, 255, 255, 1);
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
             }
-        }
-    }
 
-    .page {
-        position: absolute;
-        top: -10px;
-        right: 30px;
+            .disabled {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .export {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+        }
     }
-}
 </style>

src/views/permissionManagement/index.vue

@@ -5,58 +5,23 @@
                 <el-tab-pane label="角色管理" name="role"></el-tab-pane>
             </el-tabs>
         </div>
-        <div class="container">
-            <div class="left-pane">
-                <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
-                <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
-                    :filter-node-method="filterNode" @node-click="handleNodeClick">
-                </el-tree>
-                <el-button><i class="el-icon-s-order"></i>新建角色</el-button>
-            </div>
-            <div class="right-pane">
-                <test></test>
-            </div>
-        </div>
+        <test></test>
     </div>
 </template>
 
 <script >
-import test from './messageDialog/roleUpdate'
+import test from './roleOverview'
 export default {
-    components: { test },
+    components:{test},
     data() {
         return {
             activeName: 'role',
-            filterText: '',
-            data: [{
-                label: '决策组',
-                children: [{
-                    label: '决策组',
-                }, {
-                    label: '管理员组'
-                }, {
-                    label: '普通用户组'
-                }]
-            }],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
-            }
-        }
-    },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
         }
     },
     methods: {
         handleClick() {
             //
         },
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        }
     }
 };
 </script>
@@ -81,46 +46,4 @@ export default {
     }
 }
 
-.container {
-    position: absolute;
-    left: 218px;
-    top: 140px;
-    right: 16px;
-    //height: 800px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
-
-    .left-pane {
-        width: 300px;
-        padding: 15px;
-
-        .el-tree {
-            height: 700px;
-            margin-top: 15px;
-            background-color: rgb(247, 245, 243);
-        }
-
-        .el-button {
-            position: absolute;
-            left: 35px;
-            bottom: 40px;
-            width: 250px;
-            background-color: rgb(131, 208, 243);
-            text-align: center;
-            font-size: 16px;
-        }
-    }
-
-    .right-pane {
-        width: 1340px;
-        position: absolute;
-        margin-left: 330px;
-        top: 0;
-        margin-right: 20px;
-    }
-}
 </style>

src/views/permissionManagement/roleOverview.vue

@@ -1,34 +1,43 @@
 <template>
-    <div>
-        <p class="info">角色总览</p>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-            @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="50">
-            </el-table-column>
-            <el-table-column prop="rolename" label="角色名称">
-            </el-table-column>
-            <el-table-column prop="role_desc" label="角色描述">
-            </el-table-column>
-            <el-table-column prop="role_members" label="角色成员">
-            </el-table-column>
-            <el-table-column prop="associated_ORN" label="关联组织">
-            </el-table-column>
-            <el-table-column prop="operation" label="操作">
-                <el-button size="mini" type="text">查看</el-button>
-                <el-button size="mini" type="text">编辑</el-button>
-                <el-button size="mini" type="text">删除</el-button>
-            </el-table-column>
-        </el-table>
-        <div class="bottom">
-            <div>
-                <checkbox class="checkbox"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
-                <el-button class="delete" type="text">批量删除</el-button>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button><i class="el-icon-s-order"></i>新建角色</el-button>
+        </div>
+        <div class="right-pane">
+            <p class="info">角色总览</p>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column prop="rolename" label="角色名称">
+                </el-table-column>
+                <el-table-column prop="role_desc" label="角色描述">
+                </el-table-column>
+                <el-table-column prop="role_members" label="角色成员">
+                </el-table-column>
+                <el-table-column prop="associated_ORN" label="关联组织">
+                </el-table-column>
+                <el-table-column prop="operation" label="操作">
+                    <el-button size="mini" type="text">查看</el-button>
+                    <el-button size="mini" type="text">编辑</el-button>
+                    <el-button size="mini" type="text">删除</el-button>
+                </el-table-column>
+            </el-table>
+            <div class="bottom">
+                <div>
+                    <checkbox class="checkbox"></checkbox>
+                    <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+                </div>
+                <div class="bottom_button" v-show="show">
+                    <el-button class="delete" type="text">批量删除</el-button>
+                </div>
+                <page class="page"></page>
             </div>
-            <page class="page"></page>
         </div>
     </div>
 </template>
@@ -40,6 +49,21 @@ export default {
     components: { checkbox, page },
     data() {
         return {
+            filterText: '',
+            data: [{
+                label: '决策组',
+                children: [{
+                    label: '决策组',
+                }, {
+                    label: '管理员组'
+                }, {
+                    label: '普通用户组'
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
             tableData: [{
                 rolename: '决策组',
                 role_desc: '描述',
@@ -60,6 +84,12 @@ export default {
             show: true
         }
     },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+
     methods: {
         cancleChecked() {
             //
@@ -71,72 +101,103 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.info {
-    text-align: left;
-    padding: 20px;
-    font-size: 25px;
-}
-
-.bottom {
-    position: relative;
-    left: 20px;
-    top: 420px;
-    height: 50px;
+.container {
+    position: absolute;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    //height: 800px;
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
     text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 
-    .checkbox {
-        position: absolute;
-        left: 29px;
-        top: 15px;
-        font-size: 14px;
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .el-button {
+            position: absolute;
+            left: 35px;
+            bottom: 40px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+        }
     }
 
-    .check-cancel {
+    .right-pane {
+        width: 1340px;
         position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
-        text-align: center;
-        left: 140px;
-        top: 10px;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
     }
+}
+
+.info {
+    text-align: left;
+    padding: 20px;
+    font-size: 25px;
+}
 
-    .bottom_button {
+.bottom {
         position: absolute;
-        left: 200px;
-        top: 7px;
+        top: 700px;
+        //left: 330px;
+        height: 50px;
+        width: 1340px;
+        line-height: 20px;
+        background-color: rgba(255, 255, 255, 1);
+        text-align: center;
 
-        .delete {
-            width: 95px;
-            height: 30px;
+        .checkbox {
+            position: absolute;
+            left: 29px;
+            top: 15px;
             font-size: 14px;
-            text-align: center;
-            padding: 1px;
         }
 
-        .disabled {
-            width: 95px;
-            height: 30px;
+        .check-cancel {
+            position: absolute;
+            // line-height: 20px;
             font-size: 14px;
             text-align: center;
-            padding: 1px;
+            left: 140px;
+            top: 10px;
         }
 
-        .el-dropdown {
-            margin-left: 15px;
+        .bottom_button {
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
 
-            /deep/.el-button--primary {
-                height: 30px;
-                //background-color: rgba(255, 255, 255, 1);
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
             }
-        }
-    }
 
-    .page {
-        position: absolute;
-        top: -10px;
-        right: 30px;
+            .disabled {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .export {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+        }
     }
-}
 </style>

src/views/securityManagement/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div class="el-tab">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="日志监控" name="logMonitor"></el-tab-pane>
+                <el-tab-pane label="系统监控" name="systemMonitor"></el-tab-pane>
+            </el-tabs>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script >
+import test from './systemMonitor/index'
+export default {
+    components:{test},
+    data() {
+        return {
+            activeName: 'logMonitor',
+        }
+    },
+    methods: {
+        handleClick() {
+            //
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.el-tab {
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    top: 77px;
+    height: 51px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    /deep/.el-tabs__nav {
+        left: 25px;
+    }
+
+    /deep/.el-tabs__nav-wrap::after {
+        height: 0;
+    }
+}
+
+</style>

src/views/securityManagement/logMonitor.vue

@@ -0,0 +1,251 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <el-form label-width="120px" v-model="form">
+                <div style="display: flex; padding:10px;">
+                    <el-form-item v-model="form.templateList" label="系统模块名称：">
+                        <el-input v-model="input" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item :model="form.templateForm" label="人员姓名：">
+                        <el-input v-model="input"></el-input>
+                    </el-form-item>
+                    <el-form-item :model="form.templateForm" label="操作类型：">
+                        <el-select v-model="value" placeholder="全部">
+                            <el-option value=""></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :model="form.templateForm" label="操作状态：">
+                        <el-select v-model="value" placeholder="全部">
+                            <el-option value=""></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :model="form.templateForm" label="时间范围：">
+                        <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期"
+                            end-placeholder="结束日期" :default-time="['12:00:00']">
+                        </el-date-picker>
+                    </el-form-item>
+                </div>
+                <el-button style="padding: 5px;width: 80px;position: relative;left: 700px;">重置</el-button>
+                <el-button
+                    style="padding: 5px;width: 80px;position: relative;left: 700px;background-color: #409EFF;color: #FFF;">查询</el-button>
+            </el-form>
+        </div>
+        <div class="content">
+            <div>
+                <el-button class="new_button">导出</el-button>
+            </div>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column prop="logID" label="日志编号">
+                </el-table-column>
+                <el-table-column prop="systemTemplate" label="系统模块">
+                </el-table-column>
+                <el-table-column prop="operationType" label="操作类型">
+                </el-table-column>
+                <el-table-column prop="requestType" label="请求方式">
+                </el-table-column>
+                <el-table-column prop="operationPerson" label="操作人员">
+                </el-table-column>
+                <el-table-column prop="operationAddress" label="操作地址">
+                </el-table-column>
+                <el-table-column prop="operationAddress_desc" label="操作地点">
+                </el-table-column>
+                <el-table-column prop="operationStatus" label="操作状态">
+                    <template slot-scope="scope">
+                        <el-tag style="width: 60px; height: 30px;"
+                            :type="scope.row.operationStatus == 'true' ? 'success' : 'danger' ">
+                            {{ scope.row.operationStatus == 'true' ? '成功' : '失败' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="operationTime" label="操作时间">
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="bottom">
+            <div>
+                <checkbox class="checkbox" :total="total"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+                <el-button class="disabled" type="text">批量激活</el-button>
+                <el-button class="export" type="text">导出数据</el-button>
+            </div>
+            <page class="page"></page>
+        </div>
+    </div>
+</template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+export default {
+    components: { checkbox, page },
+    data() {
+        return {
+            total: 0,
+            input: '',
+            show: true,
+            value1: '',
+            form: {
+            },
+            tableData: [
+                {
+                    logID: '176',
+                    systemTemplate: '用户登录',
+                    operationType: '新增',
+                    requestType: 'post',
+                    operationPerson: '管理员',
+                    operationAddress: '11.11.11.11',
+                    operationAddress_desc: '内网IP',
+                    operationStatus: 'true',
+                    operationTime: '2023-01-01 00:00'
+                },
+                {
+                    logID: '176',
+                    systemTemplate: '用户登录',
+                    operationType: '新增',
+                    requestType: 'post',
+                    operationPerson: '管理员',
+                    operationAddress: '11.11.11.11',
+                    operationAddress_desc: '内网IP',
+                    operationStatus: 'true',
+                    operationTime: '2023-01-01 00:00'
+                },
+                {
+                    logID: '176',
+                    systemTemplate: '用户登录',
+                    operationType: '新增',
+                    requestType: 'post',
+                    operationPerson: '管理员',
+                    operationAddress: '11.11.11.11',
+                    operationAddress_desc: '内网IP',
+                    operationStatus: 'false',
+                    operationTime: '2023-01-01 00:00'
+                },
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.search.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: absolute;
+    left: 218px;
+    top: 150px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .header {
+        margin: 2%;
+        height: 100px;
+        background-color: rgb(221, 220, 219);
+
+        .el-form-item {
+            margin-bottom: 0 !important;
+        }
+    }
+
+    .content {
+        width: 95%;
+        position: absolute;
+        margin-left: 2.5%;
+        margin-right: 2.5%;
+
+        .new_button {
+            padding: 5px;
+            width: 80px;
+            position: relative;
+            right: 760px;
+            background-color: #409EFF;
+            color: #FFF;
+        }
+
+        .el-table {
+            margin-top: 10px;
+        }
+
+        .el-select {
+            width: 80px;
+            margin-right: 20px;
+        }
+    }
+
+    .bottom {
+        position: absolute;
+        top: 700px;
+        left: 50px;
+        height: 50px;
+        width: 95%;
+        line-height: 20px;
+        background-color: rgba(255, 255, 255, 1);
+        text-align: center;
+
+        .checkbox {
+            position: absolute;
+            left: 29px;
+            top: 15px;
+            font-size: 14px;
+        }
+
+        .check-cancel {
+            position: absolute;
+            // line-height: 20px;
+            font-size: 14px;
+            text-align: center;
+            left: 140px;
+            top: 10px;
+        }
+
+        .bottom_button {
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
+
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .disabled {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+
+            .export {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
+        }
+    }
+}
+</style>

src/views/securityManagement/messageDialog/alterTask.vue

@@ -0,0 +1,236 @@
+<template>
+    <div>
+        <el-dialog v-dialog-drag class="dialog" title="修改任务内容" :visible.sync="dialogVisible" width="25%">
+            <el-divider></el-divider>
+            <el-form ref="form" :model="form" label-position="left" label-width="75px">
+                <el-form-item label="任务名称：" prop="name">
+                    <el-input v-model="form.taskName"></el-input>
+                </el-form-item>
+                <el-form-item label="任务组名：" prop="groupName">
+                    <el-input v-model="form.taskGroupName"></el-input>
+                </el-form-item>
+                <el-form-item label="调用方法：" prop="method">
+                    <div style="display: flex;">
+                        <el-tooltip effect="light" content="提示信息" placement="top-start">
+                            <i class="el-icon-question" style="padding: 13px 5px 0 0;"></i>
+                        </el-tooltip>
+                        <el-input class="method" v-model="form.method"></el-input>
+                    </div>
+                </el-form-item>
+                <el-form-item label-width="90px" label="cron表达式：" prop="cron_expression">
+                    <el-input class="cron_xepression" v-model="form.cron_expression"></el-input>
+                </el-form-item>
+                <el-button type="text" style="margin:0px 0 0 330px;" @click="innerVisible = true">生成表达式</el-button>
+            </el-form>
+            <div slot="footer">
+                <el-button @click="resetForm('form')">重置</el-button>
+                <el-button type="primary" @click="submitForm('form')">确认</el-button>
+            </div>
+            <el-dialog v-dialog-drag class="innerDialog" title="cron 表达式生成器" :visible.sync="innerVisible" width="30%"
+                append-to-body>
+                <el-divider></el-divider>
+                <div style="width: 95%; margin:20px 0 0 2.5%;">
+                    <el-tabs v-model="activeName" type="border-card">
+                        <el-tab-pane label="秒"></el-tab-pane>
+                        <el-tab-pane label="分钟" name="min">
+                            <el-form ref="innerForm1" :model="innerForm1">
+                                <el-form-item>
+                                    <el-radio-group v-model="radio">
+                                        <el-radio :label="1">秒，允许的通配符[,...*/]</el-radio>
+                                        <el-radio :label="2">
+                                            周期从
+                                            <span slot="num1"><el-input-number v-model="num1" :min="1"
+                                                    :max="59"></el-input-number></span>
+                                            <span>至</span>
+                                            <span slot="num2"><el-input-number v-model="num2" :min="1"
+                                                    :max="59"></el-input-number></span>
+                                            <span>秒</span>
+                                        </el-radio>
+                                        <el-radio :label="3">
+                                            从
+                                            <span slot="num1"><el-input-number v-model="num1" :min="1"
+                                                    :max="59"></el-input-number></span>
+                                            <span>秒开始，每</span>
+                                            <span slot="num2"><el-input-number v-model="num2" :min="1"
+                                                    :max="59"></el-input-number></span>
+                                            <span>秒执行一次</span>
+                                        </el-radio>
+                                        <el-radio :label="4">
+                                            指定 <span>
+                                                <el-select v-model="value" placeholder="请选择">
+                                                    <el-option value="">
+
+                                                    </el-option>
+                                                </el-select>
+                                            </span>
+                                        </el-radio>
+                                    </el-radio-group>
+                                </el-form-item>
+                            </el-form>
+                        </el-tab-pane>
+                        <el-tab-pane label="小时"></el-tab-pane>
+                        <el-tab-pane label="日"></el-tab-pane>
+                        <el-tab-pane label="周"></el-tab-pane>
+                        <el-tab-pane label="月"></el-tab-pane>
+                        <el-tab-pane label="年"></el-tab-pane>
+                    </el-tabs>
+                </div>
+                <el-form ref="innerForm2" :model="innerForm2">
+                </el-form>
+                <div>
+                    <el-scrollbar style="height: 100%;">
+                        <el-form ref="innerForm3" :model="innerForm3">
+                        </el-form>
+                    </el-scrollbar>
+                </div>
+                <div slot="footer">
+                    <el-button @click="resetForm('form')">重置</el-button>
+                    <el-button @click="innerVisible = false">取消</el-button>
+                    <el-button type="primary" @click="submitForm('form')">确认</el-button>
+                </div>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            innerVisible: false,
+            activeName: 'min',
+            radio: 2,
+            num1: 1,
+            num2: 1,
+            form: {
+                name: '',
+                groupName: '',
+                method: '',
+                cron_expression: ''
+            },
+            innerForm1: {
+
+            },
+            innerForm2: {
+
+            },
+            innerForm3: {
+
+            }
+        }
+    },
+    methods: {
+        handleNodeClick() {
+
+        },
+        cronExpression() {
+            this.$refs.cron_expression.dialogVisible = true;
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    //
+                }
+            })
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+    height: 500px !important;
+}
+
+.el-radio {
+    margin-top: 20px;
+}
+
+.el-input-number {
+
+    // width: 100px !important;
+    // height: 30px !important;
+    /deep/.el-input__inner {
+        width: 180px !important;
+        height: 40px !important;
+    }
+}
+
+/deep/.el-tabs__content {
+    height: 200px;
+    padding: 0;
+}
+
+.el-form {
+    .el-form-item {
+        margin: 20px 0 0 40px;
+        width: 400px;
+
+        /deep/.el-form-item__label {
+            padding: 0;
+            font-size: 15px;
+        }
+
+        /deep/.el-input__inner {
+            width: 300px;
+            height: 30px;
+        }
+
+        .method {
+            /deep/.el-input__inner {
+                width: 281px !important;
+            }
+        }
+
+        .cron_xepression {
+            /deep/.el-input__inner {
+                width: 285px !important;
+            }
+        }
+
+    }
+}
+
+
+
+/deep/.el-dialog {
+    height: 30vh;
+}
+
+/deep/.el-dialog__title {
+    margin-right: 330px;
+}
+
+/deep/.el-dialog__headerbtn {
+    font-size: 25px;
+}
+
+/deep/.el-dialog__body {
+    padding: 0;
+}
+
+/deep/.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 95%;
+    margin: 0;
+    margin-left: 2.5%;
+}
+
+/deep/.el-dialog__footer {
+    margin-top: 60px;
+    text-align: center;
+}
+
+.el-button {
+    width: 100px;
+    height: 30px;
+    text-align: center;
+    margin: 30px;
+    padding: 5px;
+}
+</style>

src/views/securityManagement/systemMonitor/encryptionMethod.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <el-form label-width="120px" :inline="true">
+            <el-form-item :model="form.templateList" label="传输加密方法：">
+                <el-select v-model="value" placeholder="请选择">
+                    <el-option value="SSL"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :model="form.templateForm" label="数据加密方法：">
+                <el-select v-model="value" placeholder="请选择">
+                    <el-option value="MD5"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+            },
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.el-form{
+    float: left;
+    margin: 40px;
+}
+.el-form-item{
+    margin-bottom: 0;
+    margin-right: 100px;
+}
+.el-select {
+    width: 400px;
+    margin-right: 20px;
+
+    /deep/.el-input__inner{
+        background-color: aliceblue;
+    }
+}
+</style>

src/views/securityManagement/systemMonitor/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <el-button>定时任务</el-button>
+            <el-button>加密方法</el-button>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script>
+import test from './periodicTask'
+export default {
+    components:{test},
+    data() {
+        return {}
+    }
+}
+</script>
+<style lang="less" scoped>
+.container{
+    position: absolute;
+    left: 218px;
+    top: 150px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+}
+.header {
+    text-align: left;
+    padding: 15px;
+    font-size: 25px;
+    margin-left: 15px;
+
+    .el-button {
+        border-radius: 50px;
+    }
+}
+</style>

src/views/securityManagement/systemMonitor/periodicTask.vue

@@ -0,0 +1,213 @@
+<template>
+    <div>
+        <div class="header">
+            <el-form label-width="120px">
+                <div style="display: flex; padding:10px;">
+                    <el-form-item label="任务名称：">
+                        <el-input v-model="form.taskName" placeholder="请输入"></el-input>
+                    </el-form-item>
+                    <el-form-item label="任务组名：">
+                        <el-select v-model="form.taskGroupName" placeholder="全部">
+                            <el-option value="" label=""></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="任务状态：">
+                        <el-select v-model="form.taskStatus" placeholder="全部">
+                            <el-option value="" label=""></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-button style="padding: 5px;width: 80px; height: 30px; margin: 6px 20px 0 600px;">重置</el-button>
+                    <el-button
+                        style="padding: 5px;width: 80px;height: 30px; margin-top:6px; background-color: #409EFF;color: #FFF;">查询</el-button>
+                </div>
+            </el-form>
+        </div>
+        <div class="content">
+            <div style="margin: 10px; float: left;">
+                <el-button
+                    style="padding: 5px;width: 80px;position: relative;background-color: #409EFF;color: #FFF;">新增</el-button>
+                <el-button style="padding: 5px;width: 80px;position: relative;background-color: #409EFF;color: #FFF;"
+                    @click="alterTask()">修改</el-button>
+                <el-button
+                    style="padding: 5px;width: 80px;position: relative;background-color: #409EFF;color: #FFF;">导出</el-button>
+                <el-button
+                    style="padding: 5px;width: 80px;position: relative;background-color: #409EFF;color: #FFF;">日志</el-button>
+                <el-button style="padding: 5px;width: 80px;position: relative;background-color: #FFF;">删除</el-button>
+            </div>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column prop="taskID" label="任务编号">
+                </el-table-column>
+                <el-table-column prop="taskName" label="任务名称">
+                </el-table-column>
+                <el-table-column prop="taskGroupName" label="任务组名">
+                </el-table-column>
+                <el-table-column prop="taskString" label="使用目标字符串">
+                </el-table-column>
+                <el-table-column prop="cron" label="cron 执行表达式">
+                </el-table-column>
+                <el-table-column prop="status" label="状态">
+                    <template slot-scope="scope">
+                        <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="operation" label="操作">
+                    <template slot-scope="scope">
+                        <el-button v-show="scope.row.taskID == null ? false : true" size="mini" type="text">查看</el-button>
+                        <el-button v-show="scope.row.taskID == null ? false : true" size="mini" type="text">编辑</el-button>
+                        <el-button v-show="scope.row.taskID == null ? false : true" size="mini" type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="bottom">
+            <div>
+                <checkbox class="checkbox" :total="total"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button type="text">批量删除</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button type="text">批量激活</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button type="text">导出数据</el-button>
+            </div>
+            <page></page>
+        </div>
+        <alterTask ref="altertask"></alterTask>
+    </div>
+</template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+import alterTask from '../messageDialog/alterTask'
+export default {
+    components: { checkbox, page, alterTask },
+    data() {
+        return {
+            total: 0,
+            input: '',
+            show: true,
+            form: {
+                taskName: '',
+                taskGroupName: '',
+                taskStatus: ''
+            },
+            tableData: [
+                {
+                    taskID: '1',
+                    taskName: '采集视频云平台',
+                    taskGroupName: '系统',
+                    taskString: 'xxx.xxx.xxx.xxx',
+                    cron: '001***?',
+                    status: 'true'
+                },
+                {
+                    taskID: '1',
+                    taskName: '采集视频云平台',
+                    taskGroupName: '系统',
+                    taskString: 'xxx.xxx.xxx.xxx',
+                    cron: '001***?',
+                    status: 'true'
+                },
+                {
+                    taskID: '1',
+                    taskName: '采集视频云平台',
+                    taskGroupName: '系统',
+                    taskString: 'xxx.xxx.xxx.xxx',
+                    cron: '001***?',
+                    status: 'false'
+                },
+            ],
+        }
+    },
+
+    methods: {
+        handleSelectionChange() {
+
+        },
+        cancleChecked() {
+
+        },
+        alterTask() {
+            this.$refs.altertask.dialogVisible = true;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.header {
+    margin: 0 2.5%;
+    height: 60px;
+    background-color: rgb(221, 220, 219);
+
+    .el-form-item {
+        margin-bottom: 0 !important;
+        margin-right: 60px !important;
+
+        /deep/.el-form-item {
+            margin-right: 50px;
+            margin-bottom: 0;
+        }
+
+        /deep/.el-form-item__content {
+            margin-left: 120px;
+        }
+    }
+}
+
+.content {
+    width: 95%;
+    position: absolute;
+    margin-left: 2.5%;
+    margin-right: 2.5%;
+
+}
+
+.el-table {
+    margin-top: 10px;
+}
+
+.el-select {
+    width: 80px;
+    margin-right: 20px;
+}
+
+
+.bottom {
+    position: absolute;
+    left: 30px;
+    right: 16px;
+    bottom: 20px;
+    height: 50px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    display: flex;
+    text-align: center;
+
+    .checkbox {
+        position: absolute;
+        left: 29px;
+        top: 15px;
+        font-size: 14px;
+    }
+
+    .check-cancel {
+        position: absolute;
+        // line-height: 20px;
+        font-size: 14px;
+        text-align: center;
+        left: 140px;
+        top: 10px;
+    }
+
+    .bottom_button {
+        margin: 5px 0 0 200px;
+    }
+}
+</style>

src/views/servicesManagement/allServices.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="content">
+        <el-input class="search" v-model="input" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
+        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" :show-header="false"
+            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 95%"
+            @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50">
+            </el-table-column>
+            <el-table-column prop="photo">
+                <template slot-scope="scope">
+                    <el-image :src="scope.row.photo" style="width: 40px; height: 40px;"
+                        :preview-src-list="[scope.row.photo]"></el-image>
+                </template>
+            </el-table-column>
+            <el-table-column prop="introduction">
+                <template slot-scope="scope">
+                    <el-descriptions :title="scope.row.name">
+                        <el-descriptions-item label="功能简介">{{ scope.row.introduction }}</el-descriptions-item>
+                    </el-descriptions>
+                </template>
+            </el-table-column>
+            <el-table-column prop="updatetime">
+                <template slot-scope="scope">
+                    <el-form label-position="right" label-width="100px" v-model="form">
+                        <el-form-item label="版本号：">
+                            <el-select v-model="form.version">
+                                <el-option value="v1.0"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="更新时间：">
+                            <span style="margin-right: 110px;">{{ scope.row.updatetime }}</span>
+                        </el-form-item>
+                    </el-form>
+                </template>
+            </el-table-column>
+            <el-table-column prop="operation">
+                <template slot-scope="scope">
+                    <el-button style="width: 80px; height: 40px;"
+                        :type="scope.row.status == '1' ? 'primary' : scope.row.status == '2' ? 'info' : 'danger'">
+                        {{ scope.row.status == '1' ? '安装' : scope.row.status == '2' ? '未配置' : '卸载' }}
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="bottom">
+            <div>
+                <checkbox class="checkbox" :total="total"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+                <el-button class="disabled" type="text">批量激活</el-button>
+                <el-button class="export" type="text">导出数据</el-button>
+            </div>
+            <page class="page"></page>
+        </div>
+    </div>
+</template>
+
+<script >
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+export default {
+    components: { checkbox, page },
+    data() {
+        return {
+            input: '',
+            show: true,
+            form:{},
+            tableData: [
+                {
+                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                    updatetime: '2023-01-01 00:00',
+                    name: '海康威视软件包',
+                    introduction: 'xxxxxxxxxxxxx',
+                    status: '1'
+                },
+                {
+                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                    updatetime: '2023-01-01 00:00',
+                    name: '海康威视软件包',
+                    introduction: 'xxxxxxxxxxxxx',
+                    status: '2'
+                },
+                {
+                    photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                    updatetime: '2023-01-01 00:00',
+                    name: '海康威视软件包',
+                    introduction: 'xxxxxxxxxxxxx',
+                    status: '3'
+                },
+            ]
+        }
+    },
+    methods: {
+    }
+};
+</script>
+<style lang="less" scoped>
+.content {
+    top: 150px;
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    height: -webkit-fill-available;
+    margin-bottom: 20px;
+    background-color: #ffffff;
+}
+
+.el-table {
+        top: 100px;
+        margin-left: 2.5%;
+    }
+
+.el-form-item {
+    margin-bottom: 0 !important;
+}
+
+/deep/.el-form-item__label {
+    padding: 0;
+}
+
+/deep/.el-form-item__content {
+    margin-right: 8px;
+}
+
+.bottom {
+    position: relative;
+    top: 50%;
+    left: 2.5%;
+    height: 50px;
+    width: 95%;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+
+    .checkbox {
+        position: absolute;
+        left: 29px;
+        top: 15px;
+        font-size: 14px;
+    }
+
+    .check-cancel {
+        position: absolute;
+        // line-height: 20px;
+        font-size: 14px;
+        text-align: center;
+        left: 140px;
+        top: 10px;
+    }
+
+    .bottom_button {
+        position: absolute;
+        left: 200px;
+        margin-top: 15px;
+
+        .delete {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+
+        .disabled {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+
+        .export {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
+        }
+    }
+}
+
+.search {
+    position: absolute;
+    width: 300px;
+    top: 20px;
+    right: 2.5%;
+}
+</style>

src/views/servicesManagement/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <div class="el-tab">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="全部服务" name="allServices"></el-tab-pane>
+                <el-tab-pane label="已安装服务" name="install"></el-tab-pane>
+                <el-tab-pane label="未安装服务" name="uninstall"></el-tab-pane>
+            </el-tabs>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script >
+import test from './allServices'
+export default {
+    components:{test},
+    data() {
+        return {
+            activeName: 'allServices',
+        }
+    },
+    methods: {
+        handleClick() {
+            //
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.el-tab {
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    top: 77px;
+    height: 51px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    /deep/.el-tabs__nav {
+        left: 25px;
+    }
+
+    /deep/.el-tabs__nav-wrap::after {
+        height: 0;
+    }
+}
+
+</style>

src/views/systemManagement/index.vue

@@ -12,13 +12,13 @@
     </div>
 </template>
 
-<script >
-import test from '@/views/systemManagement/infoConfiguration/infoConfigure'
+<script>
+import test from './messageConfiguration/commonMessage'
 export default {
-    components:{test},
-    data(){
-        return{
-            activeName: 'information',  
+    components: { test },
+    data() {
+        return {
+            activeName: 'information',
         }
     },
     methods: {
@@ -48,5 +48,4 @@ export default {
         height: 0;
     }
 }
-
 </style>

src/views/systemManagement/indexConfiguration/index.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <el-button>智能看板</el-button>
+            <el-button>智享生活</el-button>
+            <el-button>智慧办公</el-button>
+            <el-button>数智双碳</el-button>
+            <el-button>智慧安防</el-button>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script>
+import test from './smartBoard'
+export default {
+    components:{test},
+    data() {
+        return {}
+    }
+}
+</script>
+<style lang="less" scoped>
+.container{
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    top: 140px;
+    height: 800px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+.header {
+    text-align: left;
+    padding: 15px;
+    font-size: 25px;
+    margin-left: 15px;
+
+    .el-button {
+        border-radius: 50px;
+    }
+}
+</style>

src/views/systemManagement/indexConfiguration/smartBoard.vue

@@ -0,0 +1,239 @@
+<template>
+    <div class="sub-container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+        </div>
+        <div class="right-pane">
+            <div>
+                <p class="info">指标列表</p>
+                <el-button class="new_button">新建</el-button>
+            </div>
+            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" 
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50">
+                </el-table-column>
+                <el-table-column prop="indexName" label="指标名称">
+                </el-table-column>
+                <el-table-column prop="indexUnit" label="指标单位">
+                </el-table-column>
+                <el-table-column prop="defaultValue" label="默认值">
+                </el-table-column>
+                <el-table-column prop="calculateRules" label="计算规则">
+                </el-table-column>
+                <el-table-column prop="operation" label="操作">
+                    <el-select>
+                        <el-option></el-option>
+                    </el-select>
+                    <el-button size="mini" type="text">删除</el-button>
+                </el-table-column>
+            </el-table>
+            <div class="bottom">
+                <div>
+                    <checkbox class="checkbox" :total="total"></checkbox>
+                    <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+                </div>
+                <div class="bottom_button" v-show="show">
+                    <el-button class="delete" type="text">批量删除</el-button>
+                </div>
+                <page class="page"></page>
+            </div>
+        </div>
+    </div>
+</div></template>
+
+<script>
+import checkbox from '@/components/Checkbox/index'
+import page from '@/components/pagination/index'
+export default {
+    components: { checkbox, page },
+    data() {
+        return {
+            total: 0,
+            filterText: '',
+            data:[
+            {
+                label: '人员画像',
+                children: [{
+                    label: '人员态势',
+                }, {
+                    label: '餐厅消费态势'
+                }, {
+                    label: '商超消费态势'
+                }]
+            },
+            {
+                label: '能源画像',
+                children: [{
+                    label: '用电态势',
+                }, {
+                    label: '用水态势'
+                }, {
+                    label: '用热态势'
+                }]
+            }
+            ],
+            tableData: [
+            {
+                indexName: '进入大楼人数',
+                indexUnit: '人数/时间',
+                defaultValue: '1000',
+                calculateRules: '测试中。。。',
+                operation: '',
+            },
+            {
+                indexName: '进入大楼人数',
+                indexUnit: '人数/时间',
+                defaultValue: '实时',
+                calculateRules: '测试中。。。',
+                operation: '',
+            },
+            {
+                indexName: '进入大楼人数',
+                indexUnit: '人数/时间',
+                defaultValue: '1000',
+                calculateRules: '测试中。。。',
+                operation: '',
+            }
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.sub-container {
+    position: fixed;
+    left: 218px;
+    top: 220px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 0 15px 0 15px;
+
+        .el-tree {
+            height: 650px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+
+        .info {
+            text-align: left;
+            padding: 10px;
+            font-size: 25px;
+        }
+
+        .new_button {
+            padding: 5px;
+            width: 80px;
+            position: relative;
+            left: 600px;
+        }
+
+        .el-table {
+            margin-top: 10px;
+        }
+        .el-select{
+            width: 80px;
+            margin-right: 20px;
+        }
+
+        .bottom {
+            position: absolute;
+            top:650px;
+            height: 50px;
+            width: 1340px;
+            line-height: 20px;
+            background-color: rgba(255, 255, 255, 1);
+            text-align: center;
+
+            .checkbox {
+                position: absolute;
+                left: 29px;
+                top: 15px;
+                font-size: 14px;
+            }
+
+            .check-cancel {
+                position: absolute;
+                // line-height: 20px;
+                font-size: 14px;
+                text-align: center;
+                left: 140px;
+                top: 10px;
+            }
+
+            .bottom_button {
+                position: absolute;
+                left: 200px;
+                top: 7px;
+
+                .delete {
+                    width: 95px;
+                    height: 30px;
+                    font-size: 14px;
+                    text-align: center;
+                    padding: 1px;
+                }
+
+                .disabled {
+                    width: 95px;
+                    height: 30px;
+                    font-size: 14px;
+                    text-align: center;
+                    padding: 1px;
+                }
+
+                .el-dropdown {
+                    margin-left: 15px;
+
+                    /deep/.el-button--primary {
+                        height: 30px;
+                        //background-color: rgba(255, 255, 255, 1);
+                    }
+                }
+            }
+
+            .page {
+                position: absolute;
+                top: -10px;
+                right: 30px;
+            }
+        }
+    }
+}
+</style>

src/views/systemManagement/infoConfiguration/floorInfo.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <div style="width: 100%; height: 100px;margin-top: 10px;">
+            <el-tag>{{ label }}</el-tag>
+            <el-button type="text">历史记录</el-button>
+        </div>
+        <div style="height: 600px;width: 100%; margin-top: 10px;">
+            <el-image style="height: 100%;" :src="testUrl" :fit="contain" :preview-src-list="srcList"></el-image>
+        </div>
+        <el-button>删除</el-button>
+        <el-button>更新</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            label: "1F",
+            testUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+            srcList: [
+                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+            ],
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.el-tag {
+    position: absolute;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 25px;
+    color: #000;
+    top: 20px;
+    left: 20px;
+
+}
+
+.el-button--text {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+}
+
+.el-button {
+    height: 30px;
+    width: 100px;
+    margin-top: 20px;
+    margin-inline: 40px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/infoConfiguration/index.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
+        </div>
+        <div class="right-pane">
+            <test></test>
+        </div>
+    </div>
+</template>
+
+<script>
+import test from './floorInfo'
+export default {
+    components:{test},
+    data() {
+        return {
+            filterText: '',
+            data: [{
+                label: '楼层地图信息配置',
+                children: [{
+                    label: '1F',
+                }, {
+                    label: '20F'
+                }, {
+                    label: 'B1'
+                }]
+            },
+            {
+                label: '安保人员信息',
+                children: [{
+                    label: '前台人员排班信息',
+                }, {
+                    label: '安防人员排班信息'
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: fixed;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    bottom:20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .newInfo_button {
+            position: absolute;
+            left: -5px;
+            bottom: 50px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+            
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+    }
+}
+.el-tag {
+    position: absolute;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 25px;
+    color: #000;
+    top: 20px;
+    left: 20px;
+
+}
+
+.el-button--text {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+}
+
+.el-button {
+    height: 30px;
+    width: 100px;
+    margin-top: 20px;
+    margin-inline: 40px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/infoConfiguration/securitystaffInfo.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <div style="width: 100%; height: 100px;margin-top: 10px;">
+            <el-tag>{{ label }}</el-tag>
+            <el-button style="margin:70px 1180px 0 0 ">新建</el-button>
+            <el-button type="text">历史记录</el-button>
+        </div>
+        <div style="height: 600px;width: 100%; margin-top: 10px;">
+            <el-table border :data="tableData" tooltip-effect="dark" 
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%">
+                <el-table-column type="index" width="50" label="序号">
+                </el-table-column>
+                <el-table-column prop="name" label="姓名">
+                </el-table-column>
+                <el-table-column prop="job_number" label="工号">
+                </el-table-column>
+                <el-table-column prop="phone_number" label="联系方式">
+                </el-table-column>
+                <el-table-column prop="territory" label="负责区域">
+                </el-table-column>
+                <el-table-column prop="photo" label="照片">
+                    <template slot-scope="scope">
+                        <el-image :src="scope.row.photo" style="width: 40px; height: 40px;" :preview-src-list="[scope.row.photo]"></el-image>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="status" label="状态">
+                </el-table-column>
+                <el-table-column prop="EODInfo" label="值班信息">
+                </el-table-column>
+            </el-table>
+        </div>
+        <el-button>删除</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            label: "前台人员信息",
+            tableData:[{
+                name:'张三',
+                job_number:'01111',
+                phone_number:'12345678901',
+                territory:'九层前台',
+                photo:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                status:'正常'
+            },
+            {
+                name:'张三',
+                job_number:'01111',
+                phone_number:'12345678901',
+                territory:'九层前台',
+                photo:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                status:'休假'
+            },
+            {
+                name:'张三',
+                job_number:'01111',
+                phone_number:'12345678901',
+                territory:'九层前台',
+                photo:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                status:'正常'
+            }
+            ]
+
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+
+.el-tag {
+    position: absolute;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 25px;
+    color: #000;
+    top: 20px;
+    left: 20px;
+
+}
+
+.el-button--text {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+}
+
+.el-button {
+    height: 30px;
+    width: 100px;
+    margin-top: 20px;
+    margin-inline: 40px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/messageConfiguration/commonMessage.vue

@@ -0,0 +1,231 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
+        </div>
+        <div class="right-pane">
+            <el-form :model="form" label-position="left" label-width="80px">
+                <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
+                    <el-checkbox label="短信" v-model="checked"></el-checkbox>
+                    <el-checkbox label="邮件"></el-checkbox>
+                    <el-checkbox label="钉钉"></el-checkbox>
+                    <el-checkbox label="站内通知"></el-checkbox>
+                </el-form-item>
+                <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
+                    <el-checkbox label="全体"></el-checkbox>
+                    <el-checkbox label="运管管理员"></el-checkbox>
+                    <div style="display: flex; margin-left: 30px;">
+                        <el-checkbox style="margin-right: 10px;" v-model="checked1"></el-checkbox><span>
+                            <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
+                            </el-cascader>
+                        </span>
+                    </div>
+                </el-form-item>
+                <el-form-item style="width: 350px;" :model="form.sendtiming" label="发送时间：">
+                    <el-radio v-model="radio" label="1" style="margin-top:13px">定时</el-radio>
+                    <span>
+                        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
+                        </el-date-picker>
+                    </span>
+                </el-form-item>
+                <el-form-item style="width: 350px;">
+                    <el-radio v-model="radio" label="2">立刻</el-radio>
+                </el-form-item>
+                <div style="margin-top:30px">
+                    <el-tag>年度报告通知模板</el-tag>
+                    <el-form-item style="width: 350px;" :model="form.title" label="标题：">
+                        <el-input v-model="title" placeholder=""></el-input>
+                    </el-form-item>
+                    <el-form-item style="width: 500px;" :model="form.content" label="内容：">
+                        <el-input v-model="content" placeholder="请输入内容"></el-input>
+                    </el-form-item>
+                    <el-form-item style="width: 500px;" :model="form.messagePreview" label="消息预览：">
+                        <el-input v-model="messagePreview"></el-input>
+                    </el-form-item>
+                </div>
+            </el-form>
+            <div class="bottom">
+                <el-button>编辑</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: true,
+            checked1: true,
+            radio: '1',
+            value1: '',
+            filterText: '',
+            title:'',
+            content:'',
+            messagePreview:'',
+            data: [{
+                label: '普通消息',
+                children: [{
+                    label: '年度报告通知',
+                }, {
+                    label: '报表导出通知'
+                }, {
+                    label: '系统更新通知'
+                }]
+            },
+            {
+                label: '提醒消息',
+                children: [{
+                    label: '资产年限提醒',
+                }, {
+                    label: '人员画像提醒',
+                }, {
+                    label: '备餐提醒',
+                }]
+            }],
+            options:[
+                {
+                    value:'角色',
+                    label:'角色',
+                    children:[{
+                        children:[
+                            {
+
+                            }
+                        ]
+                    }]
+                },
+                {
+                    value:'公司',
+                    label:'公司',
+                    children:[{
+                        value:'中讯设计院',
+                        label:'中讯设计院',
+                        children:[{
+                            value:'北京电信规划设计院',
+                            label:'北京电信规划设计院',
+                        }]
+                    }
+                    ]
+                }
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            form: {
+
+            },
+            input: ''
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: fixed;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .newInfo_button {
+            position: absolute;
+            left: -5px;
+            bottom: 50px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+
+        .el-form {
+            .el-form-item {
+                padding-top: 20px;
+                margin-inline: 20px;
+                margin-bottom: 0;
+            }
+
+            /deep/.el-form-item__label {
+                padding: 0;
+            }
+
+            /deep/.el-form-item__content {
+                display: flex;
+            }
+        }
+    }
+}
+
+.el-tag {
+    position: absolute;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 18px;
+    color: #000;
+    top: 230px;
+   left: 10px;
+
+}
+
+.el-button--text {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+}
+
+.el-button {
+    height: 30px;
+    width: 100px;
+    margin-top: 20px;
+    margin-inline: 40px;
+    padding: 5px;
+}
+
+.bottom {
+    position: absolute;
+    left: 450px;
+    top: 700px;
+}
+</style>

src/views/systemManagement/messageConfiguration/messageCreate.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
+        </div>
+        <div class="right-pane">
+            <el-tag>新建消息模块</el-tag>
+            <el-form :model="form" label-position="left" label-width="80px">
+                <el-form-item style="width: 350px;" :model="form.template_name" label="模块名称：">
+                    <el-input v-model="input"></el-input>
+                </el-form-item>
+                <el-form-item style="width: 350px;" :model="form.template_superior" label="模块上级：">
+                    <el-select>
+                        <el-option label="普通消息"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
+                    <el-checkbox label="短信" v-model="checked"></el-checkbox>
+                    <el-checkbox label="邮件"></el-checkbox>
+                    <el-checkbox label="钉钉"></el-checkbox>
+                    <el-checkbox label="站内通知"></el-checkbox>
+                </el-form-item>
+                <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
+                    <el-checkbox label="全体" v-model="checked2"></el-checkbox>
+                    <el-checkbox label="运管管理员"></el-checkbox>
+                    <div style="display: flex; margin-left: 30px;">
+                        <el-checkbox style="margin-right: 10px;"></el-checkbox><span>
+                            <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
+                            </el-cascader>
+                        </span>
+                    </div>
+                </el-form-item>
+                <el-form-item style="width: 350px;" :model="form.sendtiming" label="发送时间：">
+                    <el-radio v-model="radio" label="1" style="margin-top:13px">定时</el-radio>
+                    <span>
+                        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
+                        </el-date-picker>
+                    </span>
+                </el-form-item>
+                <el-form-item style="width: 350px;">
+                    <el-radio v-model="radio" label="2">立刻</el-radio>
+                </el-form-item>
+            </el-form>
+            <div class="bottom">
+                <el-button>下一个</el-button>
+                <el-button>重置</el-button>
+                <el-button>确认</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: true,
+            checked2: true,
+            radio: '1',
+            value1: '',
+            filterText: '',
+            data: [{
+                label: '普通消息',
+                children: [{
+                    label: '年度报告通知',
+                }, {
+                    label: '报表导出通知'
+                }, {
+                    label: '系统更新通知'
+                }]
+            },
+            {
+                label: '提醒消息',
+                children: [{
+                    label: '资产年限提醒',
+                }, {
+                    label: '人员画像提醒',
+                }, {
+                    label: '备餐提醒',
+                }]
+            }],
+             options:[
+                {
+                    value:'角色',
+                    label:'角色',
+                    children:[{
+                        children:[
+                            {
+
+                            }
+                        ]
+                    }]
+                },
+                {
+                    value:'公司',
+                    label:'公司',
+                    children:[{
+                        value:'中讯设计院',
+                        label:'中讯设计院',
+                        children:[{
+                            value:'北京电信规划设计院',
+                            label:'北京电信规划设计院',
+                        }]
+                    }
+                    ]
+                }
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            form: {
+
+            },
+            input: ''
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: fixed;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .newInfo_button {
+            position: absolute;
+            left: -5px;
+            bottom: 50px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+
+        .el-form {
+            margin: 80px 0 0 0;
+
+            .el-form-item {
+                padding-top: 20px;
+                margin-inline: 20px;
+                margin-bottom: 0;
+            }
+
+            /deep/.el-form-item__label {
+                padding: 0;
+            }
+
+            /deep/.el-form-item__content {
+                display: flex;
+            }
+        }
+    }
+}
+
+.el-tag {
+    position: absolute;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 25px;
+    color: #000;
+    top: 20px;
+    left: 20px;
+
+}
+
+.el-button--text {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+}
+
+.el-button {
+    height: 30px;
+    width: 100px;
+    margin-top: 20px;
+    margin-inline: 40px;
+    padding: 5px;
+}
+.bottom{
+    position: absolute;
+    left:450px;
+    top:700px;
+}
+</style>

src/views/systemManagement/messageConfiguration/messageRemind.vue

@@ -0,0 +1,195 @@
+<template>
+    <div class="container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+            <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
+        </div>
+        <div class="right-pane">
+            <el-form :model="form" label-position="left" label-width="80px">
+                <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
+                    <el-checkbox label="短信" v-model="checked"></el-checkbox>
+                    <el-checkbox label="邮件"></el-checkbox>
+                    <el-checkbox label="钉钉"></el-checkbox>
+                    <el-checkbox label="站内通知"></el-checkbox>
+                </el-form-item>
+                <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
+                    <div style="display: flex; margin-right:30px;">
+                        <el-checkbox label="指定用户：" v-model="checked2"></el-checkbox><span>
+                            <el-select style="width: 80px;">
+                                <el-option label="张三"></el-option>
+                            </el-select>
+                        </span>
+                    </div>
+                    <el-checkbox label="操作账户"></el-checkbox>
+                    <el-checkbox label="管理员"></el-checkbox>
+                </el-form-item>
+                <el-tag style="margin:20px 1160px 0 0">资产年限通知模板</el-tag>
+                <el-form-item style="width: 350px;" :model="form.title" label="标题：">
+                    <el-input v-model="title" placeholder="资产名称/年限提醒"></el-input>
+                </el-form-item>
+                <el-form-item style="width: 500px;" :model="form.content" label="内容：">
+                    <el-input v-model="content" placeholder="请输入内容"></el-input>
+                </el-form-item>
+                <el-form-item style="width: 500px;" :model="form.messagePreview" label="消息预览：">
+                    <el-input v-model="messagePreview"></el-input>
+                </el-form-item>
+            </el-form>
+            <div class="bottom">
+                <el-button>更新</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: true,
+            checked2: true,
+            radio: '1',
+            value1: '',
+            filterText: '',
+            title:'',
+            content:'',
+            messagePreview:'',
+            data: [{
+                label: '普通消息',
+                children: [{
+                    label: '年度报告通知',
+                }, {
+                    label: '报表导出通知'
+                }, {
+                    label: '系统更新通知'
+                }]
+            },
+            {
+                label: '提醒消息',
+                children: [{
+                    label: '资产年限提醒',
+                }, {
+                    label: '人员画像提醒',
+                }, {
+                    label: '备餐提醒',
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            form: {
+
+            },
+            input: ''
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    position: fixed;
+    left: 218px;
+    top: 140px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 15px;
+
+        .el-tree {
+            height: 700px;
+            margin-top: 15px;
+            background-color: rgb(247, 245, 243);
+        }
+
+        .newInfo_button {
+            position: absolute;
+            left: -5px;
+            bottom: 50px;
+            width: 250px;
+            background-color: rgb(131, 208, 243);
+            text-align: center;
+            font-size: 16px;
+
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+
+        .el-form {
+
+            .el-form-item {
+                padding-top: 20px;
+                margin-inline: 20px;
+                margin-bottom: 0;
+            }
+
+            /deep/.el-form-item__label {
+                padding: 0;
+            }
+
+            /deep/.el-form-item__content {
+                display: flex;
+            }
+        }
+    }
+}
+
+.el-tag {
+    position: relative;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 18px;
+    color: #000;
+    top: 20px;
+    left: 20px;
+
+}
+
+.el-button--text {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+}
+
+.el-button {
+    height: 30px;
+    width: 100px;
+    margin-top: 20px;
+    margin-inline: 40px;
+    padding: 5px;
+}
+
+.bottom {
+    position: absolute;
+    left: 450px;
+    top: 700px;
+}
+</style>

src/views/systemManagement/messageDialog/annualreportEdit.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="form">
+        <div class="header">
+            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">编辑年度报告通知</p><span><i
+                    class="el-icon-close"></i></span>
+        </div>
+        <el-form :model="form" label-position="left" label-width="80px">
+            <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
+                <el-checkbox label="短信" v-model="checked"></el-checkbox>
+                <el-checkbox label="邮件"></el-checkbox>
+                <el-checkbox label="钉钉"></el-checkbox>
+                <el-checkbox label="站内通知"></el-checkbox>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
+                <el-checkbox label="全体"></el-checkbox>
+                <el-checkbox label="运管管理员"></el-checkbox>
+                <div style="display: flex; margin-left: 30px;">
+                    <el-checkbox style="margin-right: 10px;" v-model="checked1"></el-checkbox><span>
+                        <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
+                        </el-cascader>
+                    </span>
+                </div>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.title" label="标题：">
+                <el-input v-model="title" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.content" label="内容：">
+                <el-input v-model="content" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.template" label="模板：">
+                <el-select style="width: 600px;">
+                    <el-option label="模板一"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <div style="background-color: darkgray; height: 100px;width: 400px; margin-top: -10px;"></div>
+            </el-form-item>
+        </el-form>
+        <el-button>下一个</el-button>
+        <el-button>移除</el-button>
+        <el-button>确认</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: true,
+            checked1: true,
+            title: '',
+            content: '',
+            form: {
+
+            },
+            options:[
+                {
+                    value:'角色',
+                    label:'角色',
+                    children:[{
+                        children:[
+                            {
+
+                            }
+                        ]
+                    }]
+                },
+                {
+                    value:'公司',
+                    label:'公司',
+                    children:[{
+                        value:'中讯设计院',
+                        label:'中讯设计院',
+                        children:[{
+                            value:'北京电信规划设计院',
+                            label:'北京电信规划设计院',
+                        }]
+                    }
+                    ]
+                }
+            ],
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.form {
+    position: absolute;
+    left: 500px;
+    width: 650px;
+    top: 200px;
+    height: 700px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+.el-form {
+    margin: 40px 0 0 0;
+
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+    }
+
+    /deep/.el-form-item__label {
+        padding: 0;
+    }
+
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+.header {
+    position: absolute;
+    top: 0;
+    width: 650px;
+    height: 40px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .el-icon-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+
+.el-button {
+    width: 80px;
+    height: 30px;
+    text-align: center;
+    margin: 20px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/messageDialog/floorHistoryrecord.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="form">
+        <div class="header">
+            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">历史记录</p><span><i
+                    class="el-icon-close"></i></span>
+        </div>
+        <el-tag>{{ label }}</el-tag>
+        <div class="content">
+            <div style="display: flex; color:#c5c4c4; padding: 10px;">
+                <p style="margin-left: 20px;">{{ time }}</p><span><p style="margin-left: 250px;">上传账户：{{ uploadAccount }}</p></span>
+            </div>
+             <el-image :fit="fill" :src="testUrl" :preview-src-list="srcList">
+            </el-image>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            label: "1F",
+            time:'2022年9月8日 18：00',
+            uploadAccount:'test',
+            testUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+            srcList: [
+                'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+            ]
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.form {
+    position: absolute;
+    left: 500px;
+    width: 586px;
+    top: 200px;
+    height: 700px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+
+.header {
+    position: absolute;
+    top: 0;
+    width: 586px;
+    height: 40px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .el-icon-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+.el-tag {
+    position: absolute;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 25px;
+    color: #000;
+    top: 50px;
+    left: 20px;
+}
+
+.content{
+    margin-top: 82px;
+    .el-image{
+        padding: 0 20px;
+    }
+}
+</style>

src/views/systemManagement/messageDialog/messageNotification.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="form">
+        <div class="header">
+            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">新建/更新提醒消息通知</p><span><i
+                    class="el-icon-close"></i></span>
+        </div>
+        <el-form :model="form" label-position="left" label-width="80px">
+            <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
+                <el-checkbox label="短信" v-model="checked"></el-checkbox>
+                <el-checkbox label="邮件"></el-checkbox>
+                <el-checkbox label="钉钉"></el-checkbox>
+                <el-checkbox label="站内通知"></el-checkbox>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
+                <div style="display: flex; margin-right:30px;">
+                    <el-checkbox label="指定用户：" v-model="checked2"></el-checkbox><span>
+                        <el-select style="width: 80px;">
+                            <el-option label="张三"></el-option>
+                        </el-select>
+                    </span>
+                </div>
+                <el-checkbox label="操作账户"></el-checkbox>
+                <el-checkbox label="管理员"></el-checkbox>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.title" label="标题：">
+                <el-input  v-model="title" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.content" label="内容：">
+                <el-input v-model="content" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.template" label="模板：">
+                    <el-select style="width: 600px;">
+                        <el-option label="模板一"></el-option>
+                    </el-select>
+            </el-form-item>
+            <el-form-item>
+                <div style="background-color: darkgray; height: 100px;width: 400px; margin-top: -10px;"></div>
+            </el-form-item>
+        </el-form>
+        <el-button>下一个</el-button>
+        <el-button>移除</el-button>
+        <el-button>确认</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: true,
+            checked2:true,
+            title:'',
+            content:'',
+            form: {
+
+            },
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.form {
+    position: absolute;
+    left: 500px;
+    width: 586px;
+    top: 200px;
+    height: 700px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+.el-form {
+    margin: 40px 0 0 0;
+
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+    }
+
+    /deep/.el-form-item__label {
+        padding: 0;
+    }
+
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+.header {
+    position: absolute;
+    top: 0;
+    width: 586px;
+    height: 40px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .el-icon-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+
+.el-button {
+    width: 80px;
+    height: 30px;
+    text-align: center;
+    margin: 20px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/messageDialog/newIndex.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="form">
+        <div class="header">
+            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">新建指标</p><span><i
+                    class="el-icon-close"></i></span>
+        </div>
+        <el-form :model="form" label-position="left" label-width="80px">
+            <el-form-item style="width: 350px;" :model="form.indexname" label="指标名称：">
+              <el-input ></el-input>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.indexdepartment" label="指标单位：">
+                <el-input ></el-input>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.defaultvalue" label="默认值：">
+                <el-input ></el-input>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.enableposition" label="启用位置：">
+                <el-select multiple placeholder="请选择">
+                    <el-option label=""></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.calculaterules" label="计算规则：">
+                <el-input placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.remarks" label="备注：">
+                <el-input placeholder="请输入内容"></el-input>
+            </el-form-item>
+        </el-form>
+        <el-button>重置</el-button>
+        <el-button>确认</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            },
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.form {
+    position: absolute;
+    left: 500px;
+    width: 586px;
+    top: 200px;
+    height: 700px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+.el-form {
+    margin: 40px 0 0 0;
+
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+    }
+
+    /deep/.el-form-item__label {
+        padding: 0;
+    }
+
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+.header {
+    position: absolute;
+    top: 0;
+    width: 586px;
+    height: 40px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .el-icon-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+
+.el-button {
+    width: 80px;
+    height: 30px;
+    text-align: center;
+    margin: 20px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/messageDialog/newfloorConfig.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="form">
+        <div class="header">
+            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">新建楼层配置</p><span><i
+                    class="el-icon-close"></i></span>
+        </div>
+        <el-form :model="form" label-position="left" label-width="80px">
+            <el-form-item style="width: 350px;" :model="form.username" label="楼层位置：">
+                <el-select>
+                    <el-option label="请选择楼层位置"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.password" label="楼层用途：">
+                <el-select>
+                    <el-option label="请选择用途"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.name" label="备注：">
+                <el-input placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.phone" label="附件：">
+                <el-upload drag action="" multiple>
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__tip" slot="tip">上传大小不小于5MB，格式为png/jpd/jpeg的文件</div>
+                </el-upload>
+            </el-form-item>
+        </el-form>
+        <el-button>下一个</el-button>
+        <el-button>重置</el-button>
+        <el-button>确认</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            },
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.form {
+    position: absolute;
+    left: 500px;
+    width: 586px;
+    top: 200px;
+    height: 700px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+.el-form {
+    margin: 40px 0 0 0;
+
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+    }
+
+    /deep/.el-form-item__label {
+        padding: 0;
+    }
+
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+.header {
+    position: absolute;
+    top: 0;
+    width: 586px;
+    height: 40px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .el-icon-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+
+.el-button {
+    width: 80px;
+    height: 30px;
+    text-align: center;
+    margin: 20px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/messageDialog/newpersonConfig.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="form">
+        <div class="header">
+            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">新建楼层配置</p><span><i
+                    class="el-icon-close"></i></span>
+        </div>
+        <el-form :model="form" label-position="left" label-width="80px">
+            <el-form-item style="width: 350px;" :model="form.username" label="人员类别：">
+                <el-select placeholder="请选择人员类别">
+                    <el-option></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.password" label="职责范围：">
+                <el-select placeholder="请输入职责范围">
+                    <el-option></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="width: 350px;" :model="form.name" label="备注：">
+                <el-select multiple placeholder="请选择">
+                    <el-option label=""></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="width: 500px;" :model="form.phone" label="备注：">
+                <el-input placeholder="请输入内容"></el-input>
+            </el-form-item>
+        </el-form>
+        <el-button>下一个</el-button>
+        <el-button>重置</el-button>
+        <el-button>确认</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+
+            },
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.form {
+    position: absolute;
+    left: 500px;
+    width: 586px;
+    top: 200px;
+    height: 700px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+.el-form {
+    margin: 40px 0 0 0;
+
+    .el-form-item {
+        padding-top: 20px;
+        margin-inline: 20px;
+        margin-bottom: 0;
+    }
+
+    /deep/.el-form-item__label {
+        padding: 0;
+    }
+
+    /deep/.el-form-item__content {
+        display: flex;
+    }
+}
+
+.header {
+    position: absolute;
+    top: 0;
+    width: 586px;
+    height: 40px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .el-icon-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+
+.el-button {
+    width: 80px;
+    height: 30px;
+    text-align: center;
+    margin: 20px;
+    padding: 5px;
+}
+</style>

src/views/systemManagement/messageDialog/personHistoryrecord.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="form">
+        <div class="header">
+            <p style="text-align: left;margin-top: 10px;margin-left: 20px;">历史记录</p><span><i
+                    class="el-icon-close"></i></span>
+        </div>
+        <el-tag>{{ label }}</el-tag>
+        <div class="content">
+            <div style="display: flex; color:#c5c4c4; padding: 10px;">
+                <p style="margin-left: 20px;">{{ time }}</p>
+            </div>
+            <el-table border :data="tableData" tooltip-effect="dark" 
+                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%">
+                <el-table-column type="index" width="50" label="序号">
+                </el-table-column>
+                <el-table-column prop="name" label="姓名">
+                </el-table-column>
+                <el-table-column prop="job_number" label="工号">
+                </el-table-column>
+                <el-table-column prop="phone_number" label="联系方式">
+                </el-table-column>
+                <el-table-column prop="territory" label="负责区域">
+                </el-table-column>
+                <el-table-column prop="photo" label="照片">
+                    <template slot-scope="scope">
+                        <el-image :src="scope.row.photo" style="width: 40px; height: 40px;" :preview-src-list="[scope.row.photo]"></el-image>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="status" label="状态">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            label: "前台人员",
+            time: '2022年9月8日 18：00',
+            tableData:[{
+                name:'张三',
+                job_number:'01111',
+                phone_number:'12345678901',
+                territory:'九层前台',
+                photo:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                status:'正常'
+            },
+            {
+                name:'张三',
+                job_number:'01111',
+                phone_number:'12345678901',
+                territory:'九层前台',
+                photo:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                status:'休假'
+            },
+            {
+                name:'张三',
+                job_number:'01111',
+                phone_number:'12345678901',
+                territory:'九层前台',
+                photo:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+                status:'正常'
+            }
+            ]
+        }
+    }
+
+}
+</script>
+<style lang="less" scoped>
+.form {
+    position: absolute;
+    left: 500px;
+    width: 700px;
+    top: 200px;
+    height: 700px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+
+.header {
+    position: absolute;
+    top: 0;
+    width: 700px;
+    height: 40px;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .el-icon-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+}
+
+.el-tag {
+    position: absolute;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 25px;
+    color: #000;
+    top: 50px;
+    left: 20px;
+}
+
+.content {
+    margin-top: 82px;
+    .el-table{
+        width: 90% !important;
+        margin-left:5%;
+    }
+}
+</style>

src/views/systemManagement/strategyConfiguration/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <el-button>智慧会议</el-button>
+            <el-button>智慧能源</el-button>
+            <el-button>智慧安防</el-button>
+        </div>
+        <test></test>
+    </div>
+</template>
+
+<script>
+import test from './smartMeeting'
+export default {
+    components:{test},
+    data() {
+        return {}
+    }
+}
+</script>
+<style lang="less" scoped>
+.container{
+    position: absolute;
+    left: 218px;
+    right: 16px;
+    top: 140px;
+    height: 800px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+}
+.header {
+    text-align: left;
+    padding: 15px;
+    font-size: 25px;
+    margin-left: 15px;
+
+    .el-button {
+        border-radius: 50px;
+    }
+}
+</style>

src/views/systemManagement/strategyConfiguration/smartMeeting.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="sub-container">
+        <div class="left-pane">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
+            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
+                :filter-node-method="filterNode" @node-click="handleNodeClick">
+            </el-tree>
+        </div>
+        <div class="right-pane">
+            <div>
+                <p class="info">选择设备</p>
+            </div>
+            <div style="display: flex; margin-left: 20px;">
+                <div>
+                    <el-tree :data="data1" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id" @node-click="handleNodeClick">
+                    </el-tree>
+                    <el-tree :data="data2" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id" @node-click="handleNodeClick">
+                    </el-tree>
+                </div>
+                <div style="margin-left: 200px">
+                    <el-tree :data="data3" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id" @node-click="handleNodeClick">
+                    </el-tree>
+                    <el-tree :data="data4" :props="defaultProps" show-checkbox node-key="id" @node-click="handleNodeClick">
+                    </el-tree>
+                </div>
+            </div>
+        </div>
+    </div>
+</div></template>
+
+<script>
+export default {
+    data() {
+        return {
+            total: 0,
+            filterText: '',
+            data: [
+                {
+                    label: '3F',
+                    children: [{
+                        label: '301会议室',
+                    }, {
+                        label: '302会议室'
+                    }, {
+                        label: '303会议室'
+                    }]
+                },
+                {
+                    label: '4F',
+                    children: [{
+                        label: '401会议室',
+                    }, {
+                        label: '402会议室'
+                    }, {
+                        label: '403会议室'
+                    }]
+                }
+            ],
+            data1:[{
+                id:1,
+                label:'闸机系统-人脸门禁设备',
+                children:[{
+
+                }]
+            }],
+            data2:[{
+                id:1,
+                label:'能源系统-灯光控制设备',
+                children:[{
+                    
+                }]
+            }],
+            data3:[{
+                id:1,
+                label:'能源系统-空调控制设备',
+                children:[{
+                    
+                }]
+            }],
+            data4:[{
+                label:'能源系统-灯光控制设备',
+                children:[{
+                    
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.sub-container {
+    position: fixed;
+    left: 218px;
+    top: 220px;
+    right: 16px;
+    bottom: 20px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    text-align: center;
+    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+    .left-pane {
+        width: 300px;
+        padding: 0 15px 0 15px;
+
+        .el-tree {
+            height: 650px;
+            margin: 15px;
+            background-color: rgb(247, 245, 243)
+        }
+    }
+
+    .right-pane {
+        width: 1340px;
+        position: absolute;
+        margin-left: 330px;
+        top: 0;
+        margin-right: 20px;
+
+        .info {
+            text-align: left;
+            padding: 10px;
+            font-size: 25px;
+        }
+    }
+}
+</style>

src/views/userManagement/index.vue

@@ -2,29 +2,31 @@
     <div>
         <div class="el-tab">
             <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="person">
+                    <personManagement></personManagement>
+                </el-tab-pane>
+                <el-tab-pane label="组织管理" name="group">
+                    <groupManagement></groupManagement>
+                </el-tab-pane>
             </el-tabs>
         </div>
-        <groupManagement></groupManagement>
     </div>
 </template>
 
 <script >
-import groupManagement from './groupManagement/index';
+import groupManagement from '../groupManagement/index';
 import personManagement from './personManagement/index';
-
 export default {
     name: 'userManagement',
     components: { personManagement,groupManagement },
     data() {
         return {
-            activeName: 'first'
+            activeName: 'person',
         }
     },
     methods:{
-        handleClick(){
-            //
+        handleClick(tab){
+           
         }
     }
 };

src/views/userManagement/personManagement/index.vue

@@ -1,64 +1,67 @@
 <template>
     <div class="container">
         <div class="header">
-            <el-button class="onlineUser">
+            <el-button class="onlineUser" @click="activeShow()">
                 <i class="el-icon-user-solid"></i>在用账户
             </el-button>
-            <el-button class="disableUser">
+            <el-button class="disableUser" @click="deactiveShow()">
                 <i class="el-icon-user"></i>停用账户
             </el-button>
             <div class="searchBox">
-                <el-input placeholder="用户名；手机；单位" suffix-icon="el-icon-search"></el-input>
+                <el-input v-model="input" placeholder="用户名；手机；单位" suffix-icon="el-icon-search"></el-input>
             </div>
-            <el-button class="addUser" @click="addUser">
+            <el-button class="addUser">
                 <i class="el-icon-user"></i>添加用户
             </el-button>
         </div>
-        <div class="active-userTable">
-            <activeuser></activeuser>
+        <div class="showTable">
+            <activeuser v-show="show"></activeuser>
+            <deactiveuser v-show="show1"></deactiveuser>
         </div>
     </div>
 </template>
 
 <script>
 import activeuser from './tables/activeUser'
+import deactiveuser from './tables/deactiveUser'
 import table3 from './tables/table3'
 import userinfo from './messageDialog/userInfo'
 
 
 export default {
     name: "personManagement",
-    components: { activeuser, table3, userinfo ,},
+    components: { activeuser, deactiveuser, table3, userinfo, },
     data() {
         return {
-            activeName: 'first',
+            input: '',
             tabledata: [],
+            show: true,
+            show1: false,
             total: 0,
             currentPage: 1
         };
     },
     methods: {
-        handleSizeChange(val) {
-            console.log(`每页 ${val} 条`);
+        activeShow() {
+            this.show = true;
+            this.show1 = false;
         },
-        handleCurrentChange(val) {
-            console.log(`当前页: ${val}`);
+        deactiveShow() {
+            this.show = false;
+            this.show1 = true;
         },
-        addUser(){
-            
-        }
     }
 };
 </script>
 
 <style lang="less" scoped>
-
 .container {
-    position: absolute;
+    position: fixed;
     left: 218px;
     top: 140px;
     right: 16px;
-    //height: 800px;
+    height: -webkit-fill-available;
+    margin-bottom: 20px;
     line-height: 20px;
     background-color: rgba(255, 255, 255, 1);
     color: rgba(16, 16, 16, 1);
@@ -89,7 +92,7 @@ export default {
         }
 
         .disableUser {
-           position: absolute;
+            position: absolute;
             top: 15px;
             left: 135px;
             bottom: 4px;
@@ -134,9 +137,8 @@ export default {
         }
     }
 
-    .active-userTable {
+    .showTable {
         padding: 10px 16px 0 20px;
-        height: 700px;
         //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
     }
 }

src/views/userManagement/personManagement/tables/activeUser.vue

@@ -1,7 +1,8 @@
 <template>
     <div>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
-            :cell-style="{ textAlign: 'center' }" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
+            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
+            @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50">
             </el-table-column>
             <el-table-column prop="username" label="用户名">
@@ -31,19 +32,17 @@
         </el-table>
         <div class="bottom">
             <div>
-                <checkbox class="checkbox"></checkbox>
+                <checkbox class="checkbox" :total="total"></checkbox>
                 <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
             </div>
             <div class="bottom_button" v-show="show">
-                <el-button class="delete">批量删除</el-button>
-                <el-button class="disabled">批量禁用</el-button>
-                <el-dropdown type="primary" @click="handleClick">导出数据
-                    <i class="el-icon-arrow-down el-icon--right"></i>
-                    <el-dropdown-menu slot="dropdown">
-                    </el-dropdown-menu>
-                </el-dropdown>
+                <el-button class="delete" type="text">批量删除</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button class="disabled" type="text">批量激活</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button class="export" type="text">导出数据</el-button>
             </div>
-            <page class="page"></page>
+            <page></page>
         </div>
     </div>
 </template>
@@ -93,14 +92,14 @@ export default {
                 status: false
             },],
             multipleSelection: [],
-            show:true
+            show: true
         }
     },
     methods: {
-        cancleChecked(){
+        cancleChecked() {
             //
         },
-        handleClick(){
+        handleClick() {
             //
         }
     }
@@ -115,7 +114,7 @@ export default {
 }
 
 .bottom {
-   position: absolute;
+    position: absolute;
     left: 20px;
     right: 16px;
     bottom: 20px;
@@ -143,38 +142,25 @@ export default {
     .bottom_button {
         position: absolute;
         left: 200px;
-        top: 7px;
+        margin-top: 15px;
 
         .delete {
-            width: 95px;
-            height: 30px;
             font-size: 14px;
             text-align: center;
             padding: 1px;
         }
 
         .disabled {
-            width: 95px;
-            height: 30px;
             font-size: 14px;
             text-align: center;
             padding: 1px;
         }
 
-        .el-dropdown {
-            margin-left: 15px;
-
-            /deep/.el-button--primary {
-                height: 30px;
-                //background-color: rgba(255, 255, 255, 1);
-            }
+        .export {
+            font-size: 14px;
+            text-align: center;
+            padding: 1px;
         }
     }
-
-    .page {
-        position: absolute;
-        top: -10px;
-        right: 30px;
-    }
 }
 </style>

src/views/userManagement/personManagement/tables/deactiveUser.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
+        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
             :cell-style="{ textAlign: 'center' }" style="width: 100%" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50">
             </el-table-column>
@@ -31,19 +31,15 @@
         </el-table>
         <div class="bottom">
             <div>
-                <checkbox class="checkbox"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text">取消</el-button>
+                <checkbox class="checkbox" :total="total"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
             </div>
-            <div class="bottom_button">
-                <el-button class="delete">批量删除</el-button>
-                <el-button class="disabled">批量激活</el-button>
-                <el-dropdown type="primary" @click="handleClick">导出数据
-                    <i class="el-icon-arrow-down el-icon--right"></i>
-                    <el-dropdown-menu slot="dropdown">
-                    </el-dropdown-menu>
-                </el-dropdown>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+                <el-button class="disabled" type="text">批量激活</el-button>
+                <el-button class="export" type="text">导出数据</el-button>
             </div>
-            <page class="page"> </page>
+            <page></page>
         </div>
     </div>
 </template>
@@ -55,6 +51,7 @@ export default {
     components: { checkbox, page },
     data() {
         return {
+            total:0,
             tableData: [{
                 username: 'admin',
                 phone: '12345678901',
@@ -92,7 +89,8 @@ export default {
                 registed_time: '2022-08-09  19:00',
                 status: false
             },],
-            multipleSelection: []
+            multipleSelection: [],
+            show:true
         }
     },
     methods: {
@@ -135,40 +133,27 @@ export default {
     }
 
     .bottom_button {
-        position: absolute;
-        left: 200px;
-        top: 7px;
-
-        .delete {
-            width: 95px;
-            height: 30px;
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
 
-        .disabled {
-            width: 95px;
-            height: 30px;
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
 
-        .el-dropdown {
-            margin-left: 15px;
+            .disabled {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
 
-            /deep/.el-button--primary {
-                height: 30px;
-                //background-color: rgba(255, 255, 255, 1);
+            .export {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
             }
         }
-    }
-
-    .page {
-        position: absolute;
-        top: -10px;
-        right: 30px;
-    }
 }
 </style>

vue.config.js

@@ -1,17 +1,8 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-<<<<<<< HEAD
-
-  transpileDependencies: true
-})
-=======
-<<<<<<< HEAD
   transpileDependencies: true
 })
-=======
-  transpileDependencies: true,
-})
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860
+
 
 const path = require('path')
 module.exports = {
@@ -36,8 +27,4 @@ module.exports = {
           .loader('file-loader')
   }
 }
-<<<<<<< HEAD
-=======
 
->>>>>>> 6d4aae2 (用户管理、组织管理、权限管理更新)
->>>>>>> af4e4aeb3d79f496002276d9d2650a78a030e860