系统监控 -- 添加cron表达式组件；获取监控设备列表

package-lock.json

@@ -15,6 +15,8 @@
         "js-cookie": "^3.0.1",
         "qs": "^6.11.1",
         "unplugin-vue-components": "^0.24.1",
+        "vab-cron": "^1.0.6",
+        "vcrontab": "^0.3.5",
         "vue": "^2.7.14",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
@@ -11593,6 +11595,15 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vab-cron": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/vab-cron/-/vab-cron-1.0.6.tgz",
+      "integrity": "sha512-qF50g1D6BSJT/WRLP/8yqR6+yT/wnyLJtCOIIbdoReyExZgsagK+xUXv1LJGIZwViAY+FtfXIKWk2GpBNERByg==",
+      "dependencies": {
+        "element-ui": "^2.4.11",
+        "vue": "^2.5.17"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -11612,6 +11623,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vcrontab": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/vcrontab/-/vcrontab-0.3.5.tgz",
+      "integrity": "sha512-RMNrDFhsO68BEtdUwtKgtPAvaQIlXmAJ9MrqFLgWBedhlolLclm3kBwlQx4lpN8DlnascCkVcBiGDr+XXQqTpQ==",
+      "dependencies": {
+        "element-ui": "^2.4.11",
+        "vue": "^2.5.17"
+      }
+    },
     "node_modules/vue": {
       "version": "2.7.14",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz",
@@ -21421,6 +21441,15 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true
     },
+    "vab-cron": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/vab-cron/-/vab-cron-1.0.6.tgz",
+      "integrity": "sha512-qF50g1D6BSJT/WRLP/8yqR6+yT/wnyLJtCOIIbdoReyExZgsagK+xUXv1LJGIZwViAY+FtfXIKWk2GpBNERByg==",
+      "requires": {
+        "element-ui": "^2.4.11",
+        "vue": "^2.5.17"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -21437,6 +21466,15 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
+    "vcrontab": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/vcrontab/-/vcrontab-0.3.5.tgz",
+      "integrity": "sha512-RMNrDFhsO68BEtdUwtKgtPAvaQIlXmAJ9MrqFLgWBedhlolLclm3kBwlQx4lpN8DlnascCkVcBiGDr+XXQqTpQ==",
+      "requires": {
+        "element-ui": "^2.4.11",
+        "vue": "^2.5.17"
+      }
+    },
     "vue": {
       "version": "2.7.14",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz",

package.json

@@ -14,6 +14,8 @@
     "js-cookie": "^3.0.1",
     "qs": "^6.11.1",
     "unplugin-vue-components": "^0.24.1",
+    "vab-cron": "^1.0.6",
+    "vcrontab": "^0.3.5",
     "vue": "^2.7.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/api/security/systemMonitor.js

@@ -0,0 +1,24 @@
+import { get, post } from "@/utils/requestMethod";
+
+/**
+ * 获取定时任务列表
+ * @param {*} page
+ * @param {*} page_size
+ * @param {*} name
+ * @param {*} group
+ * @param {*} status
+ * @returns
+ */
+const getTaskList = (
+  page,
+  page_size = 10,
+  name = "",
+  group = 1,
+  status = 0
+) => {
+  return get(
+    `/system_monitoring/job_list?page=${page}&page_size=${page_size}&group=${group}&name=${name}&status=${status}`
+  );
+};
+
+export { getTaskList };

src/views/securityManagement/messageDialog/alterTask.vue

@@ -5,20 +5,16 @@
       class="dialog"
       title="修改任务内容"
       :visible.sync="dialogVisible"
-      width="470px"
+      width="480px"
+      height="400px"
+      left
     >
       <el-divider></el-divider>
-      <el-form
-        ref="form"
-        :model="form"
-        label-position="left"
-        label-width="75px"
-      >
-        <el-form-item label="任务名称：" prop="name">
+      <el-form ref="form" label-position="left" label-width="75px">
+        <el-form-item label="任务名称：">
           <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-form-item label="任务组名：">
           <el-select v-model="form.groupName" placeholder="请输入任务组名">
             <el-option
               v-for="item in taskGroupOptions"
@@ -28,7 +24,7 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="调用方法：" prop="method">
+        <el-form-item label="调用方法：">
           <div style="display: flex">
             <el-tooltip effect="light" content="提示信息" placement="top-start">
               <i class="el-icon-question" style="padding: 13px 5px 0 0"></i>
@@ -36,11 +32,7 @@
             <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-form-item label-width="100px" label="cron表达式：">
           <el-input
             class="cron_xepression"
             v-model="form.cron_expression"
@@ -49,12 +41,14 @@
         <el-button
           type="text"
           style="margin: 0px 0 0 330px; color: #2ea8e6"
-          @click="innerVisible = true"
+          @click="showDialog"
           >生成表达式</el-button
         >
       </el-form>
       <div slot="footer">
-        <el-button @click="resetForm('form')">重置</el-button>
+        <el-button style="background: #2ea8e6" @click="resetForm('form')"
+          >重置</el-button
+        >
         <el-button
           style="background: #2ea8e6"
           type="primary"
@@ -66,86 +60,17 @@
         v-dialog-drag
         class="innerDialog"
         title="cron 表达式生成器"
-        :visible.sync="innerVisible"
-        width="600px"
+        :visible.sync="showCron"
+        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 placeholder="请选择">
-                          <el-option> </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 style="width: 100%; height: 100%; overflow-y: auto">
+          <vabCron
+            @hide="showCron = false"
+            @fill="crontabFill"
+            :expression="expression"
+          ></vabCron>
         </div>
       </el-dialog>
     </el-dialog>
@@ -153,47 +78,72 @@
 </template>
 
 <script>
+import vabCron from "vab-cron";
 export default {
+  components: { vabCron },
   data() {
     return {
+      expression: "",
       dialogVisible: false,
-      innerVisible: false,
+      showCron: false,
       activeName: "min",
       radio: 2,
       num1: 1,
       num2: 1,
       form: {
         name: "",
-        groupName: "",
+        groupName: 0,
         method: "",
         cron_expression: "",
+        assignValue: "",
+        minitesValue: 1,
       },
       innerForm1: {},
       innerForm2: {},
       innerForm3: {},
+      minitesOptions: [],
+      secondsOptions: [],
+      hoursOptions: [],
       taskGroupOptions: [
         {
-          value: "0",
+          value: 0,
           label: "全部",
         },
         {
-          value: "1",
+          value: 1,
           label: "系统",
         },
-        {
-          value: "2",
-          label: "默认",
-        },
       ],
     };
   },
+  mounted() {
+    this.initData();
+  },
   methods: {
+    crontabFill(value) {
+      this.form.cron_expression = value;
+      this.showCron = false;
+    },
+    showDialog() {
+      this.expression = this.form.cron_expression;
+      this.showCron = true;
+    },
+    initData() {
+      this.minitesOptions = [];
+      for (let i = 1; i < 60; i++) {
+        this.minitesOptions.push({
+          value: i,
+          label: i < 10 ? "0" + i : i,
+        });
+      }
+    },
     handleNodeClick() {},
     cronExpression() {
       this.$refs.cron_expression.dialogVisible = true;
     },
     resetForm(formName) {
-      this.$refs[formName].resetFields();
+      this.form.cron_expression = "";
+      this.form.groupName = 0;
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
@@ -207,7 +157,7 @@ export default {
 </script>
 <style lang="less" scoped>
 /deep/.el-dialog {
-  height: 500px !important;
+  // height: 480px !important;
 }
 
 .el-radio {
@@ -251,17 +201,15 @@ export default {
 
     .cron_xepression {
       /deep/.el-input__inner {
-        width: 285px !important;
+        width: 275px !important;
       }
     }
   }
 }
 
-/deep/.el-dialog {
-  height: 30vh;
-}
-
 /deep/.el-dialog__header {
+  padding-bottom: 0;
+  color: #333333;
   text-align: left;
 }
 
@@ -286,7 +234,6 @@ export default {
 }
 
 /deep/.el-dialog__footer {
-  margin-top: 60px;
   text-align: center;
 }
 
@@ -297,12 +244,12 @@ export default {
   margin: 30px;
   padding: 5px;
   &:nth-child(1) {
-    background: #b3b3b3;
+    background: #2ea8e6;
     color: #fff;
   }
   &:nth-child(2) {
     color: #fff;
-    background: #b3b3b3;
+    background: #2ea8e6;
   }
   &:nth-child(3) {
     background: #2ea8e6;

src/views/securityManagement/systemMonitor/periodicTask.vue

@@ -46,7 +46,7 @@
     <div class="content">
       <div class="content-inner">
         <el-button class="blue-btn" @click="addEvent">新增</el-button>
-        <el-button class="blue-btn" @click="batchActivate">批量激活</el-button>
+        <el-button class="blue-btn" @click="modifyEvent">修改</el-button>
         <el-button class="delete-btn" @click="batchDelete">批量删除</el-button>
       </div>
       <el-table
@@ -64,7 +64,7 @@
         <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 prop="taskDescription" label="任务描述">
         </el-table-column>
         <el-table-column prop="cron" label="cron 执行表达式"> </el-table-column>
         <el-table-column prop="status" label="状态">
@@ -114,6 +114,7 @@ import checkbox from "@/components/Checkbox/index";
 import page from "@/components/pagination/index";
 import alterTask from "../messageDialog/alterTask";
 import publicFunc from "@/utils/publicFunc";
+import { getTaskList } from "@/api/security/systemMonitor";
 export default {
   components: { checkbox, page, alterTask },
   data() {
@@ -122,8 +123,8 @@ export default {
       show: true,
       form: {
         taskName: "",
-        taskGroupName: "0",
-        taskStatus: "0",
+        taskGroupName: 0,
+        taskStatus: 2,
       },
       tableData: [
         {
@@ -131,7 +132,7 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "系统",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "true",
         },
@@ -140,7 +141,7 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "默认",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "true",
         },
@@ -149,7 +150,7 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "系统",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "false",
         },
@@ -158,7 +159,7 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "系统",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "false",
         },
@@ -167,7 +168,7 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "系统",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "false",
         },
@@ -176,7 +177,7 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "系统",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "false",
         },
@@ -185,7 +186,7 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "系统",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "false",
         },
@@ -194,38 +195,34 @@ export default {
           taskID: "1",
           taskName: "采集视频云平台",
           taskGroupName: "系统",
-          taskString: "xxx.xxx.xxx.xxx",
+          taskDescription: "xxx.xxx.xxx.xxx",
           cron: "001***?",
           status: "false",
         },
       ],
       taskStatusOptions: [
         {
-          value: "0",
+          value: 2,
           label: "不限",
         },
         {
-          value: "1",
-          label: "开启",
+          value: 1,
+          label: "暂停",
         },
         {
-          value: "2",
-          label: "关闭",
+          value: 0,
+          label: "正常",
         },
       ],
       taskGroupOptions: [
         {
-          value: "0",
+          value: 0,
           label: "不限",
         },
         {
-          value: "1",
+          value: 1,
           label: "系统",
         },
-        {
-          value: "2",
-          label: "默认",
-        },
       ],
       multipleSelection: [],
       currentPageSize: 10,
@@ -260,6 +257,9 @@ export default {
     },
     alterTask() {
       this.$refs.altertask.dialogVisible = true;
+      this.$refs.altertask.name = ""
+      this.$refs.altertask.groupName=""
+      this.$refs.altertask.cron_expression=""
     },
     resetEvent() {
       // this.form.
@@ -268,7 +268,31 @@ export default {
       console.log(this.form);
       this.getTableData(1);
     },
-    getTableData(val) {},
+    getTableData(val) {
+      this.tableData = [];
+      getTaskList(
+        val,
+        this.currentPageSize,
+        this.form.taskName,
+        this.form.taskGroupName,
+        this.form.taskStatus
+      ).then((res) => {
+        if (res.data.code === 0) {
+          let data = res.data.data.data;
+          this.paginationData.total = data.total;
+          this.tableData = data.list.map((v) => {
+            return {
+              taskID: v.id,
+              taskName: v.name,
+              taskGroupName: v.groupType === 1 ? "系统" : "默认",
+              taskDescription: v.description,
+              cron: v.cronExpression,
+              status: v.status === 0 ? true : false,
+            };
+          });
+        }
+      });
+    },
     handleSizeChange() {},
     deleteEvent(data) {
       this.tableData = this.tableData.filter((v) => {
@@ -276,7 +300,7 @@ export default {
       });
     },
     addEvent() {},
-    batchActivate() {},
+    modifyEvent() {},
     batchDelete() {},
   },
 };