1. 去掉面板上侧切换栏； 2. 安全管理UI界面调整

src/layout/sidebar/sidebarItem.vue

@@ -1,74 +1,82 @@
 <template>
-    <div>
-        <div v-for="(menu, index) in $store.state.menus" :key="index">
-            <el-submenu :index="String(index)" v-if="menu.submenus != null">
-                <template slot="title">
-                    <el-image :src="menu.url"></el-image>
-                    <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 class="subMenu">{{ 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">
-                <el-image :src="menu.url"></el-image>
-                <span slot="title">
-                    {{ menu.name }}
-                </span>
-            </el-menu-item>
-        </div>
+  <div>
+    <div v-for="(menu, index) in $store.state.menus" :key="index">
+      <el-submenu :index="String(index)" v-if="menu.submenus != null">
+        <template slot="title">
+          <el-image :src="menu.url"></el-image>
+          <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 class="subMenu">{{ 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"
+      >
+        <el-image :src="menu.url"></el-image>
+        <span slot="title">
+          {{ menu.name }}
+        </span>
+      </el-menu-item>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {
-
-        }
+  data() {
+    return {};
+  },
+  methods: {
+    selectMenu(menu) {
+      console.log(menu, "当前选中的菜单");
     },
-    methods: {
-
-    }
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .subMenu {
-    margin-left: 70px;
+  margin-left: 70px;
 }
 
 .el-image {
-    position: absolute;
-    display: flex;
-    overflow: hidden;
-    top: 13px;
+  position: absolute;
+  display: flex;
+  overflow: hidden;
+  top: 13px;
 
-    /deep/.el-image__inner {
-        vertical-align: middle;
-    }
+  /deep/.el-image__inner {
+    vertical-align: middle;
+  }
 }
 
 .el-menu-item {
-    padding: 0 0 0 15px !important;
-    font-size: 18px;
+  padding: 0 0 0 15px !important;
+  font-size: 18px;
 }
 
 /deep/.el-submenu__title {
-    padding: 0 0 0 15px !important;
-    font-size: 18px;
+  padding: 0 0 0 15px !important;
+  font-size: 18px;
 }
 
 /deep/.el-menu-item-group__title {
-    padding: 0;
+  padding: 0;
 }
 
-.el-menu-item-group>.span {
-    margin-left: 70px;
+.el-menu-item-group > .span {
+  margin-left: 70px;
 }
 
-/deep/.el-menu--inline> {
-    border: none;
-    text-align: left;
-}</style>
+/deep/.el-menu--inline > {
+  border: none;
+  text-align: left;
+}
+</style>

src/main.js

@@ -1,48 +1,46 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import axios from 'axios'
+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
+Vue.config.productionTip = false;
 
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-import locale from 'element-ui/lib/locale/lang/zh-CN'
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import locale from "element-ui/lib/locale/lang/zh-CN";
 Vue.use(ElementUI, { locale });
 
 //拖拽注册
-import './utils/directive'
-
+import "./utils/directive";
 
 Vue.use(ElementUI, { locale });
 Vue.prototype.axios = axios;
 
-// router.afterEach((to, from, next) => {
-//   let stateName = []; //保存 遍历已保存的name
-//   let dict = {} ;
-//   const name = to.name;
-//   const path = to.path;
-
-//   if(name){
-//     dict.name = name;
-//     dict.path = path;
-
-//     let stateRouterMenuMessage = store.state.routerMenuMessage;
-//     for(let item of stateRouterMenuMessage){
-//       stateName.push(item.name);
-//     }
-//     let isExist = stateName.indexOf(name);
-//     if(isExist){
-//       stateRouterMenuMessage.push(dict);
-//     }
-//   }
-//   next();
-// })
-
+router.afterEach((to, from, next) => {
+  let stateName = []; //保存 遍历已保存的name
+  let dict = {};
+  const name = to.name;
+  const path = to.path;
+
+  if (name) {
+    dict.name = name;
+    dict.path = path;
+
+    let stateRouterMenuMessage = store.state.routerMenuMessage;
+    for (let item of stateRouterMenuMessage) {
+      stateName.push(item.name);
+    }
+    let isExist = stateName.indexOf(name);
+    if (isExist) {
+      stateRouterMenuMessage.push(dict);
+    }
+  }
+  // next();
+});
 
 new Vue({
   router,
   store,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");

src/store/index.js

@@ -18,22 +18,26 @@ export default new Vuex.Store({
       {
         url: require('@/assets/images/userManagement@3x.png'),
         name: '用户管理',
-        path: '/home/user',
         submenus: [
           {
             name: '人员管理',
-            path: '/home/user/person'
+            path: '/home/user/person',
           },
           {
             name: '组织管理',
-            path: '/home/user/group'
+            path: '/home/user/group',
           },
         ]
       },
       {
         url: require('@/assets/images/roleManagement@3x.png'),
         name: '角色管理',
-        path: '/home/role'
+        path: '/home/role',
+      },
+      {
+        url: require('@/assets/images/permissionManagement@3x.png'),
+        name: '权限管理',
+        path: '/home/permission',
       },
       {
         url: require('@/assets/images/systemConfiguration@3x.png'),
@@ -42,19 +46,19 @@ export default new Vuex.Store({
         submenus: [
           {
             name: '策略配置',
-            path: '/home/system/strategy'
+            path: '/home/system/strategy',
           },
           {
             name: '消息配置',
-            path: '/home/system/message'
+            path: '/home/system/message',
           },
           {
             name: '信息配置',
-            path: '/home/system/info'
+            path: '/home/system/info',
           },
           {
             name: '指标配置',
-            path: '/home/system/index'
+            path: '/home/system/index',
           }
         ]
       },
@@ -65,11 +69,11 @@ export default new Vuex.Store({
         submenus: [
           {
             name: '设备配置',
-            path: '/home/device/config'
+            path: '/home/device/config',
           },
           {
             name: '设备告警',
-            path: '/home/device/warning'
+            path: '/home/device/warning',
           }
         ]
       },
@@ -80,15 +84,15 @@ export default new Vuex.Store({
         submenus: [
           {
             name: '报表配置',
-            path: '/home/data/statement'
+            path: '/home/data/statement',
           },
           {
             name: '报告配置',
-            path: '/home/data/report'
+            path: '/home/data/report',
           },
           {
             name: '基础信息',
-            path: '/home/data/basicInfo'
+            path: '/home/data/basicInfo',
           }
         ]
       },
@@ -99,15 +103,15 @@ export default new Vuex.Store({
         submenus: [
           {
             name: '全部服务',
-            path: '/home/service/all'
+            path: '/home/service/all',
           },
           {
             name: '已安装服务',
-            path: '/home/service/installed'
+            path: '/home/service/installed',
           },
           {
             name: '未安装服务',
-            path: '/home/service/uninstall'
+            path: '/home/service/uninstall',
           },
         ]
       },
@@ -118,11 +122,11 @@ export default new Vuex.Store({
         submenus: [
           {
             name: '日志监控',
-            path: '/home/security/logMonitor'
+            path: '/home/security/logMonitor',
           },
           {
             name: '系统监控',
-            path: '/home/security/systemMonitor'
+            path: '/home/security/systemMonitor',
           },
         ]
       }

src/utils/publicFunc.js

@@ -0,0 +1,14 @@
+//随机id生成
+const buildGuid = function (options) {
+  var text = "";
+  var mar = options || "default";
+  var possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (var i = 0; i < 18; i++)
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  return mar + "_" + new Date().getTime().toString() + text;
+};
+
+export default{
+    buildGuid
+}

src/views/securityManagement/index.vue

@@ -1,19 +1,70 @@
 <template>
-    <div>
-        <router-view></router-view>
-    </div>
+  <div>
+    <!-- <div class="el-tab">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="日志监控" name="logMonitor"> </el-tab-pane>
+        <el-tab-pane label="系统监控" name="systemMonitor"> </el-tab-pane>
+      </el-tabs>
+    </div> -->
+    <router-view></router-view>
+  </div>
 </template>
 
-<script >
+<script>
 export default {
-    data() {
-        return {
-
-        }
+  data() {
+    return {
+      activeName: "logMonitor",
+    };
+  },
+  watch: {
+    activeName(val) {
+      switch (val) {
+        case "logMonitor":
+            // 触发左侧菜单栏导航
+        //   this.$router.push(val);
+          break;
+        case "systemMonitor":
+        //   this.$router.push(val);
+          break;
+      }
     },
-    methods: {
-    }
+  },
+  methods: {},
 };
 </script>
 <style lang="less" scoped>
-</style>
+.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__active-bar {
+    background-color: #2ea8e6;
+  }
+
+  /deep/.el-tabs__item:hover{
+    color: #2ea8e6 !important;
+    font-weight: 500 !important;
+  }
+
+  /deep/.el-tabs__item.is-active {
+    color: #2ea8e6;
+    font-weight: 500;
+  }
+
+  /deep/.el-tabs__nav {
+    left: 25px;
+  }
+
+  /deep/.el-tabs__nav-wrap::after {
+    height: 0;
+  }
+}
+</style>

src/views/securityManagement/logMonitor.vue

@@ -1,253 +1,563 @@
 <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 class="container">
+    <div class="header">
+      <el-form label-width="120px" v-model="form">
+        <div style="display: flex; padding: 10px">
+          <el-form-item label="系统模块名称：">
+            <el-select v-model="form.moduleName" placeholder="请选择模块名称">
+              <el-option
+                v-for="item in moduleNameOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+            <!-- <el-input
+              v-model="form.moduleInput"
+              placeholder="请输入模块名称"
+            ></el-input> -->
+          </el-form-item>
+          <el-form-item label="人员姓名：">
+            <el-input
+              v-model="form.nameInput"
+              placeholder="请输入人员名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="操作类型：">
+            <el-select
+              v-model="form.operationType"
+              placeholder="请选择操作类型"
+            >
+              <el-option
+                v-for="item in operationTypeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="操作状态：">
+            <el-select
+              v-model="form.operationStatus"
+              placeholder="请选择操作状态"
+            >
+              <el-option
+                v-for="item in operationStatusOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="时间范围：">
+            <el-date-picker
+              v-model="form.timeVal"
+              type="datetimerange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['12:00:00']"
+            >
+            </el-date-picker>
+          </el-form-item>
         </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-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></page>
+        <div class="button-box">
+          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
+          <el-button class="search-btn" @click="searchEvent">查询</el-button>
         </div>
+      </el-form>
+    </div>
+    <div class="content">
+      <div class="export">
+        <el-button class="new_button" @click="exportEvent">导出</el-button>
+      </div>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        :header-cell-style="{ textAlign: 'center' }"
+        :cell-style="{ textAlign: 'center' }"
+        style="width: 100%"
+        height="350"
+        @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 style="width: 100%; height: 100%; position: absolute">
+        <!-- 逻辑bug,如果选中应该怎么办 -->
+        <el-checkbox class="checkbox" v-model="isSelected"
+          >已选{{ multipleSelection.length }}项</el-checkbox
+        >
+        <el-button
+          class="check-cancel"
+          size="mini"
+          type="text"
+          @click="cancleChecked"
+          >取消</el-button
+        >
+      </div>
+      <div class="bottom_button">
+        <el-button class="delete" type="text" @click="batchDelete"
+          >批量删除</el-button
+        >
+        <el-divider direction="vertical"></el-divider>
+        <el-button class="disabled" type="text" @click="batchActivate"
+          >批量激活</el-button
+        >
+        <el-divider direction="vertical"></el-divider>
+        <el-button class="export" type="text" @click="exportData"
+          >导出数据</el-button
+        >
+      </div>
+      <page class="page"></page>
+    </div>
+  </div>
 </template>
 
 <script>
-import checkbox from '@/components/Checkbox/index'
-import page from '@/components/pagination/index'
+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'
-            }
-        }
+  components: { checkbox, page },
+  data() {
+    return {
+      isSelected: false,
+      show: true,
+      form: {
+        moduleName: "全部",
+        nameInput: "",
+        operationType: "全部",
+        operationStatus: "2",
+        timeVal: "",
+      },
+      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",
+        },
+      ],
+      operationTypeOptions: [
+        {
+          value: "全部",
+          label: "全部",
+        },
+        {
+          value: "新增",
+          label: "新增",
+        },
+        {
+          value: "查询",
+          label: "查询",
+        },
+        {
+          value: "修改",
+          label: "修改",
+        },
+        {
+          value: "删除",
+          label: "删除",
+        },
+        {
+          value: "批量修改",
+          label: "批量修改",
+        },
+        {
+          value: "批量删除",
+          label: "批量删除",
+        },
+        {},
+      ],
+      operationStatusOptions: [
+        {
+          value: "2",
+          label: "全部",
+        },
+        {
+          value: "0",
+          label: "成功",
+        },
+        {
+          value: "1",
+          label: "失败",
+        },
+      ],
+      moduleNameOptions: [
+        {
+          value: "全部",
+          label: "全部",
+        },
+        {
+          value: "登入",
+          label: "登入",
+        },
+        {
+          value: "用户管理",
+          label: "用户管理",
+        },
+        {
+          value: "组织管理",
+          label: "组织管理",
+        },
+        {
+          value: "角色管理",
+          label: "角色管理",
+        },
+        {
+          value: "消息管理",
+          label: "消息管理",
+        },
+        {
+          value: "信息管理",
+          label: "信息管理",
+        },
+        {
+          value: "日志管理",
+          label: "日志管理",
+        },
+        {
+          value: "数据管理",
+          label: "数据管理",
+        },
+      ],
+      multipleSelection: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.search.filter(val);
     },
-    watch: {
-        filterText(val) {
-            this.$refs.search.filter(val);
-        }
+    isSelected(val) {
+      if (!val) {
+        this.$refs.multipleTable.clearSelection();
+      }
     },
-    methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        }
-    }
-}
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData() {},
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    cancleChecked() {
+      this.$refs.multipleTable.clearSelection();
+    },
+    handleSelectionChange(val) {
+      if (val.length > 0) {
+        this.isSelected = true;
+      } else {
+        this.isSelected = false;
+      }
+      this.multipleSelection = val;
+    },
+    resetEvent() {
+      this.form.moduleName = "全部";
+      this.form.nameInput = "";
+      this.form.operationType = "全部";
+      this.operationStatus = "2";
+      this.searchEvent();
+    },
+    searchEvent() {
+      console.log(this.form);
+    },
+    exportEvent() {
+      console.log("导出事件");
+    },
+    batchDelete() {},
+    batchActivate() {},
+    exportData() {},
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .container {
+  position: absolute;
+  left: 218px;
+  top: 80px;
+  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;
+  overflow-y: auto;
+  //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+  .header {
+    margin: 2%;
+    height: 100px;
+    width: 96%;
+    background-color: #fafafa;
+    border-radius: 4px;
+    .el-form-item {
+      margin-bottom: 0 !important;
+      /deep/ .el-form-item__label {
+        color: #666666;
+        font-weight: 600;
+      }
+    }
+    .button-box {
+      width: 100%;
+      height: 30px;
+      position: relative;
+      .reset-btn,
+      .search-btn {
+        height: 30px;
+        width: 80px;
+        position: absolute;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .reset-btn {
+        right: 130px;
+        background-color: #b3b3b3;
+      }
+      .search-btn {
+        right: 20px;
+        background-color: #2ea8e6;
+      }
+    }
+  }
+  .content {
+    width: 95%;
+    height: 400px;
     position: absolute;
-    left: 218px;
-    top: 77px;
-    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);
+    margin-left: 2.5%;
+    margin-right: 2.5%;
+    .export {
+      width: 100%;
+      height: 30px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      .new_button {
+        position: absolute;
+        padding: 5px;
+        width: 80px;
+        left: 10px;
+        // position: relative;
+        // right: 760px;
+        background-color: #2ea8e6;
+        color: #fff;
+      }
+    }
 
-    .header {
-        margin: 2%;
-        height: 100px;
-        background-color: rgb(221, 220, 219);
+    .el-table {
+      position: absolute;
+      top: 30px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 30px);
+      border: 1px solid #f0f2f2;
+      margin-top: 10px;
+      font-size: 0.95rem;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #b2b2b2;
+      background: rgba(255, 255, 255, 0.8);
 
-        .el-form-item {
-            margin-bottom: 0 !important;
+      /deep/th {
+        background: #f7fbff;
+      }
+      /deep/.el-checkbox {
+        color: #b2b2b2;
+        .el-checkbox__input.is-checked + .el-checkbox__label {
+          color: #2ea8e6;
         }
-    }
 
-    .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-checkbox__input.is-checked .el-checkbox__inner::after {
+          width: 70%;
+          height: 70%;
+          background: #2ea8e6;
+          border-radius: 0;
+          transform: rotate(0deg) scaleY(1);
+          position: static;
+          // border: 1px solid #8DD9FF;
         }
 
-        .el-table {
-            margin-top: 10px;
+        .el-checkbox__inner {
+          border: 1px solid #8dd9ff;
+          background: rgba(0, 170, 255, 0);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: static;
+          &::after {
+            transition: 0ms;
+          }
         }
 
-        .el-select {
-            width: 80px;
-            margin-right: 20px;
+        .el-checkbox__label {
+          padding-left: 0;
+          font-size: 15px;
+          position: absolute;
+          top: 1px;
+          left: 25px;
         }
+      }
     }
 
-    .bottom {
-        position: absolute;
-        left: 20px;
-        right: 16px;
-        bottom: 20px;
-        height: 50px;
-        line-height: 20px;
-        background-color: rgba(255, 255, 255, 1);
-        text-align: center;
+    .el-select {
+      width: 80px;
+      margin-right: 20px;
+    }
+  }
 
-        .checkbox {
-            position: absolute;
-            left: 29px;
-            top: 15px;
-            font-size: 14px;
-        }
+  .bottom {
+    position: absolute;
+    bottom: 10px;
+    left: 50px;
+    height: 50px;
+    width: 95%;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
 
-        .check-cancel {
-            position: absolute;
-            // line-height: 20px;
-            font-size: 14px;
-            text-align: center;
-            left: 140px;
-            top: 10px;
-        }
+    .checkbox {
+      position: absolute;
+      left: 29px;
+      top: 15px;
+      font-size: 14px;
+      color: #2ea8e6;
+    }
+
+    .check-cancel {
+      position: absolute;
+      // line-height: 20px;
+      font-size: 14px;
+      text-align: center;
+      left: 140px;
+      top: 10px;
+      color: #2ea8e6;
+    }
 
-        .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;
-            }
+    /deep/.el-checkbox {
+      color: #b2b2b2;
+      .el-checkbox__input.is-checked + .el-checkbox__label {
+        color: #2ea8e6;
+      }
+
+      .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        width: 70%;
+        height: 70%;
+        background: #2ea8e6;
+        border-radius: 0;
+        transform: rotate(0deg) scaleY(1);
+        position: static;
+        // border: 1px solid #8DD9FF;
+      }
+
+      .el-checkbox__inner {
+        border: 1px solid #8dd9ff;
+        background: rgba(0, 170, 255, 0);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static;
+        &::after {
+          transition: 0ms;
         }
+      }
+
+      .el-checkbox__label {
+        padding-left: 0;
+        font-size: 15px;
+        position: absolute;
+        top: 1px;
+        left: 25px;
+      }
+    }
+
+    .bottom_button {
+      position: absolute;
+      left: 200px;
+      margin-top: 15px;
+
+      .delete {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+        color: #2ea8e6;
+      }
+
+      .disabled {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+        color: #2ea8e6;
+      }
+
+      .export {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+        color: #2ea8e6;
+      }
     }
+  }
 }
-</style>
+</style>

src/views/securityManagement/messageDialog/alterTask.vue

@@ -1,237 +1,307 @@
 <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>
+  <div>
+    <el-dialog
+      v-dialog-drag
+      class="dialog"
+      title="修改任务内容"
+      :visible.sync="dialogVisible"
+      width="470px"
+    >
+      <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.name"></el-input>
+        </el-form-item>
+        <el-form-item label="任务组名：" prop="groupName">
+          <!-- <el-input v-model="form.groupName"></el-input> -->
+          <el-select v-model="form.groupName" placeholder="请输入任务组名">
+            <el-option
+              v-for="item in taskGroupOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            ></el-option>
+          </el-select>
+        </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;color:#2EA8E6;"
+          @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="600px"
+        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 placeholder="请选择">
+                          <el-option> </el-option>
+                        </el-select>
+                      </span>
+                    </el-radio>
+                  </el-radio-group>
                 </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>
+              </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,
-            value:'test',
-            form: {
-                name: '',
-                groupName: '',
-                method: '',
-                cron_expression: ''
-            },
-            innerForm1: {
-
-            },
-            innerForm2: {
-
-            },
-            innerForm3: {
-
-            }
-        }
-    },
-    methods: {
-        handleNodeClick() {
-
+  data() {
+    return {
+      dialogVisible: false,
+      innerVisible: false,
+      activeName: "min",
+      radio: 2,
+      num1: 1,
+      num2: 1,
+      form: {
+        name: "",
+        groupName: "",
+        method: "",
+        cron_expression: "",
+      },
+      innerForm1: {},
+      innerForm2: {},
+      innerForm3: {},
+      taskGroupOptions: [
+        {
+          value: "0",
+          label: "全部",
         },
-        cronExpression() {
-            this.$refs.cron_expression.dialogVisible = true;
+        {
+          value: "1",
+          label: "系统",
         },
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
+        {
+          value: "2",
+          label: "默认",
         },
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    //
-                }
-            })
+      ],
+    };
+  },
+  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;
+  height: 500px !important;
 }
 
 .el-radio {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .el-input-number {
-
-    // width: 100px !important;
-    // height: 30px !important;
-    /deep/.el-input__inner {
-        width: 180px !important;
-        height: 40px !important;
-    }
+  // width: 100px !important;
+  // height: 30px !important;
+  /deep/.el-input__inner {
+    width: 180px !important;
+    height: 40px !important;
+  }
 }
 
 /deep/.el-tabs__content {
-    height: 200px;
-    padding: 0;
+  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;
-        }
+  .el-form-item {
+    margin: 20px 0 0 40px;
+    width: 400px;
 
-        /deep/.el-input__inner {
-            width: 300px;
-            height: 30px;
-        }
+    /deep/.el-form-item__label {
+      padding: 0;
+      font-size: 15px;
+    }
 
-        .method {
-            /deep/.el-input__inner {
-                width: 281px !important;
-            }
-        }
+    /deep/.el-input__inner {
+      width: 300px;
+      height: 30px;
+    }
 
-        .cron_xepression {
-            /deep/.el-input__inner {
-                width: 285px !important;
-            }
-        }
+    .method {
+      /deep/.el-input__inner {
+        width: 281px !important;
+      }
+    }
 
+    .cron_xepression {
+      /deep/.el-input__inner {
+        width: 285px !important;
+      }
     }
+  }
 }
 
-
-
 /deep/.el-dialog {
-    height: 30vh;
+  height: 30vh;
 }
 
-/deep/.el-dialog__title {
-    margin-right: 330px;
+/deep/.el-dialog__header{
+  text-align: left;
 }
 
+// /deep/.el-dialog__title {
+//   margin-right: 330px;
+// }
+
 /deep/.el-dialog__headerbtn {
-    font-size: 25px;
+  font-size: 25px;
 }
 
 /deep/.el-dialog__body {
-    padding: 0;
+  padding: 0;
 }
 
 /deep/.el-divider--horizontal {
-    display: block;
-    height: 1px;
-    width: 95%;
-    margin: 0;
-    margin-left: 2.5%;
+  display: block;
+  height: 1px;
+  width: 95%;
+  margin: 0;
+  margin-left: 2.5%;
 }
 
 /deep/.el-dialog__footer {
-    margin-top: 60px;
-    text-align: center;
+  margin-top: 60px;
+  text-align: center;
 }
 
 .el-button {
-    width: 100px;
-    height: 30px;
-    text-align: center;
-    margin: 30px;
-    padding: 5px;
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  margin: 30px;
+  padding: 5px;
+  &:nth-child(1) {
+    background: #b3b3b3;
+    color: #fff;
+  }
+  &:nth-child(2) {
+    color: #fff;
+    background: #b3b3b3;
+  }
+  &:nth-child(3){
+    background: #2ea8e6;
+    color: #fff;
+  }
 }
 </style>

src/views/securityManagement/systemMonitor/encryptionMethod.vue

@@ -1,47 +1,81 @@
 <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>
+  <div>
+    <el-form label-width="120px" :inline="true">
+      <el-form-item label="传输加密方法：">
+        <el-select
+          v-model="form.transmissionMethodSelectVal"
+          placeholder="请选择"
+        >
+          <el-option
+            :value="item.value"
+            v-for="item in transmissionMethodOptions"
+            :key="item.value"
+            :label="item.label"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="数据加密方法：">
+        <el-select v-model="form.dataMethodSelectVal" placeholder="请选择">
+          <el-option
+            :value="item.value"
+            v-for="item in dataMethodOptions"
+            :key="item.value"
+            :label="item.label"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            form: {
-            },
-            value:'test'
-        }
-    },
-}
+  data() {
+    return {
+      form: {
+        transmissionMethodSelectVal: "0",
+        dataMethodSelectVal: "0",
+      },
+      transmissionMethodOptions: [
+        {
+          value: "0",
+          label: "全部",
+        },
+        {
+          value: "1",
+          label: "SSL",
+        },
+      ],
+      dataMethodOptions: [
+        {
+          value: "0",
+          label: "全部",
+        },
+        {
+          value: "1",
+          label: "MD5",
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.el-form{
-    float: left;
-    margin: 40px;
+.el-form {
+  float: left;
+  margin: 40px;
 }
-.el-form-item{
-    margin-bottom: 0;
-    margin-right: 100px;
+.el-form-item {
+  margin-bottom: 0;
+  margin-right: 100px;
 }
 .el-select {
-    width: 400px;
-    margin-right: 20px;
+  width: 400px;
+  margin-right: 20px;
 
-    /deep/.el-input__inner{
-        background-color: aliceblue;
-    }
+  /deep/.el-input__inner {
+    background-color: aliceblue;
+  }
 }
-</style>
+</style>

src/views/securityManagement/systemMonitor/index.vue

@@ -1,58 +1,63 @@
 <template>
-    <div class="container">
-        <div class="header">
-            <el-button @click="Show1()">定时任务</el-button>
-            <el-button @click="Show2()">加密方法</el-button>
-        </div>
-        <periodic-task v-show="show1"></periodic-task>
-        <encryption-method v-show="show2"></encryption-method>
+  <div class="container">
+    <div class="header">
+      <el-button @click="Show1()">定时任务</el-button>
+      <el-button @click="Show2()">加密方法</el-button>
     </div>
+    <periodic-task v-show="show1"></periodic-task>
+    <encryption-method v-show="show2"></encryption-method>
+  </div>
 </template>
 
 <script>
-import EncryptionMethod from './encryptionMethod'
-import periodicTask from './periodicTask'
+import EncryptionMethod from "./encryptionMethod";
+import periodicTask from "./periodicTask";
 export default {
-  components: { periodicTask,EncryptionMethod },
-    data() {
-        return {
-            show1:true,
-            show2:false
-        }
+  components: { periodicTask, EncryptionMethod },
+  data() {
+    return {
+      show1: true,
+      show2: false,
+    };
+  },
+  methods: {
+    Show1() {
+      this.show1 = true;
+      this.show2 = false;
     },
-    methods:{
-        Show1(){
-            this.show1 = true;
-            this.show2 = false;
-        },
-        Show2(){
-            this.show1 = false;
-            this.show2 = true;
-        },
-    }
-}
+    Show2() {
+      this.show1 = false;
+      this.show2 = true;
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
-.container{
-    position: absolute;
-    left: 218px;
-    top: 77px;
-    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;
+.container {
+  position: absolute;
+  left: 218px;
+  top: 80px;
+  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;
+  text-align: left;
+  padding: 15px;
+  font-size: 25px;
+  margin-left: 15px;
 
-    .el-button {
-        border-radius: 50px;
+  .el-button {
+    border-radius: 50px;
+    &:active,&:focus,
+    &:hover {
+      color: #fff;
+      background: #2ea8e6;
     }
+  }
 }
-</style>
+</style>

src/views/securityManagement/systemMonitor/periodicTask.vue

@@ -1,213 +1,491 @@
 <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="header">
+      <el-form label-width="120px">
+        <div style="display: flex; padding: 10px">
+          <el-form-item label="任务名称：">
+            <el-input
+              v-model="form.taskName"
+              placeholder="请输入任务名称"
+              style="width: 200px"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="任务组名：">
+            <el-select
+              v-model="form.taskGroupName"
+              placeholder="请输入任务组名"
+              style="width: 200px"
+            >
+              <el-option
+                v-for="item in taskGroupOptions"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="任务状态：">
+            <el-select
+              v-model="form.taskStatus"
+              placeholder="请选择任务状态"
+              style="width: 200px"
+            >
+              <el-option
+                v-for="item in taskStatusOptions"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
+          <el-button class="search-btn" @click="searchEvent">查询</el-button>
         </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>
+      </el-form>
+    </div>
+    <div class="content">
+      <div class="content-inner">
+        <el-button class="blue-btn">新增</el-button>
+        <el-button class="blue-btn" @click="alterTask()">修改</el-button>
+        <el-button class="blue-btn">导出</el-button>
+        <el-button class="blue-btn">日志</el-button>
+        <el-button class="delete-btn">删除</el-button>
+      </div>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        :header-cell-style="{ textAlign: 'center' }"
+        :cell-style="{ textAlign: 'center' }"
+        style="width: 100%"
+        height="350"
+        @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 style="width: 100%; height: 100%; position: absolute">
+        <checkbox class="checkbox" v-model="total">已选2项</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-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></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'
+import checkbox from "@/components/Checkbox/index";
+import page from "@/components/pagination/index";
+import alterTask from "../messageDialog/alterTask";
+import publicFunc from "@/utils/publicFunc";
 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() {
-
+  components: { checkbox, page, alterTask },
+  data() {
+    return {
+      total: 0,
+      input: "",
+      show: true,
+      form: {
+        taskName: "",
+        taskGroupName: "0",
+        taskStatus: "0",
+      },
+      tableData: [
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "系统",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "true",
         },
-        cancleChecked() {
-
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "默认",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "true",
         },
-        alterTask() {
-            this.$refs.altertask.dialogVisible = true;
-        }
-    }
-}
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "系统",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "false",
+        },
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "系统",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "false",
+        },
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "系统",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "false",
+        },
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "系统",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "false",
+        },
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "系统",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "false",
+        },
+        {
+          id: publicFunc.buildGuid("video"),
+          taskID: "1",
+          taskName: "采集视频云平台",
+          taskGroupName: "系统",
+          taskString: "xxx.xxx.xxx.xxx",
+          cron: "001***?",
+          status: "false",
+        },
+      ],
+      taskStatusOptions: [
+        {
+          value: "0",
+          label: "全部",
+        },
+        {
+          value: "1",
+          label: "开启",
+        },
+        {
+          value: "2",
+          label: "关闭",
+        },
+      ],
+      taskGroupOptions: [
+        {
+          value: "0",
+          label: "全部",
+        },
+        {
+          value: "1",
+          label: "系统",
+        },
+        {
+          value: "2",
+          label: "默认",
+        },
+      ],
+    };
+  },
+
+  methods: {
+    handleSelectionChange() {},
+    cancleChecked() {},
+    alterTask() {
+      this.$refs.altertask.dialogVisible = true;
+    },
+    resetEvent() {
+      // this.form.
+    },
+    searchEvent() {
+      console.log(this.form);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .header {
-    margin: 0 2.5%;
-    height: 60px;
-    background-color: rgb(221, 220, 219);
+  margin: 0 2.5%;
+  height: 60px;
+  background-color: #fafafa;
+  position: relative;
+  .reset-btn,
+  .search-btn {
+    height: 30px;
+    width: 80px;
+    position: absolute;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .reset-btn {
+    top: 10px;
+    background-color: #b3b3b3;
+    right: 130px;
+  }
+  .search-btn {
+    top: 10px;
+    background-color: #2ea8e6;
+    right: 25px;
+  }
 
-    .el-form-item {
-        margin-bottom: 0 !important;
-        margin-right: 60px !important;
+  .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 {
+      margin-right: 50px;
+      margin-bottom: 0;
+    }
 
-        /deep/.el-form-item__content {
-            margin-left: 120px;
-        }
+    /deep/.el-form-item__content {
+      margin-left: 120px;
     }
+  }
 }
 
 .content {
-    width: 95%;
+  width: 95%;
+  position: absolute;
+  margin-top: 30px;
+  margin-left: 2.5%;
+  margin-right: 2.5%;
+  height: 400px;
+  &-inner {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .blue-btn,
+    .delete-btn {
+      width: 80px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 10px;
+      color: #fff;
+      border-radius: 3px;
+    }
+    .blue-btn {
+      background-color: #2ea8e6;
+    }
+    .delete-btn {
+      background: #b3b3b3;
+    }
+  }
+
+  .el-table {
     position: absolute;
-    margin-left: 2.5%;
-    margin-right: 2.5%;
+    top: 30px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 30px);
+    border: 1px solid #f0f2f2;
+    margin-top: 10px;
+    font-size: 0.95rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #b2b2b2;
+    background: rgba(255, 255, 255, 0.8);
 
-}
+    /deep/th {
+      background: #f7fbff;
+    }
+    /deep/.el-checkbox {
+      color: #b2b2b2;
+      .el-checkbox__input.is-checked + .el-checkbox__label {
+        color: #2ea8e6;
+      }
 
-.el-table {
-    margin-top: 10px;
+      .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        width: 70%;
+        height: 70%;
+        background: #2ea8e6;
+        border-radius: 0;
+        transform: rotate(0deg) scaleY(1);
+        position: static;
+        // border: 1px solid #8DD9FF;
+      }
+
+      .el-checkbox__inner {
+        border: 1px solid #8dd9ff;
+        background: rgba(0, 170, 255, 0);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static;
+        &::after {
+          transition: 0ms;
+        }
+      }
+
+      .el-checkbox__label {
+        padding-left: 0;
+        font-size: 15px;
+        position: absolute;
+        top: 1px;
+        left: 25px;
+      }
+    }
+  }
 }
 
 .el-select {
-    width: 80px;
-    margin-right: 20px;
+  width: 80px;
+  margin-right: 20px;
 }
 
-
 .bottom {
+  position: absolute;
+  bottom: 10px;
+  left: 50px;
+  height: 50px;
+  width: 95%;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+
+  .checkbox {
     position: absolute;
-    left: 30px;
-    right: 16px;
-    bottom: 20px;
-    height: 50px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    display: flex;
+    left: 29px;
+    top: 15px;
+    font-size: 14px;
+  }
+
+  .check-cancel {
+    position: absolute;
+    // line-height: 20px;
+    font-size: 14px;
     text-align: center;
+    left: 140px;
+    top: 10px;
+  }
 
-    .checkbox {
-        position: absolute;
-        left: 29px;
-        top: 15px;
-        font-size: 14px;
+  /deep/.el-checkbox {
+    color: #b2b2b2;
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #2ea8e6;
     }
 
-    .check-cancel {
-        position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
-        text-align: center;
-        left: 140px;
-        top: 10px;
+    .el-checkbox__input.is-checked .el-checkbox__inner::after {
+      width: 70%;
+      height: 70%;
+      background: #2ea8e6;
+      border-radius: 0;
+      transform: rotate(0deg) scaleY(1);
+      position: static;
+      // border: 1px solid #8DD9FF;
+    }
+
+    .el-checkbox__inner {
+      border: 1px solid #8dd9ff;
+      background: rgba(0, 170, 255, 0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: static;
+      &::after {
+        transition: 0ms;
+      }
+    }
+
+    .el-checkbox__label {
+      padding-left: 0;
+      font-size: 15px;
+      position: absolute;
+      top: 1px;
+      left: 25px;
+    }
+  }
+
+  .bottom_button {
+    position: absolute;
+    left: 200px;
+    margin-top: 15px;
+
+    .delete {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
+      color: #2ea8e6;
+    }
+
+    .disabled {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
+      color: #2ea8e6;
     }
 
-    .bottom_button {
-        margin: 5px 0 0 200px;
+    .export {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
+      color: #2ea8e6;
     }
+  }
 }
-</style>
+</style>