兼容若依

src/api/job.js

@@ -73,7 +73,14 @@ export function add(data) {
         data
     })
 }
-
+// 编辑
+export function update(data) {
+    return request({
+        url: '/device/jobinfo/update',
+        method: 'post',
+        data
+    })
+}
 
 /* 调度日志 */
 export function joblogList(data) {

src/api/system/dict/data.js

@@ -20,7 +20,7 @@ export function getData(dictCode) {
 // 根据字典类型查询字典数据信息
 export function getDicts(dictType) {
   return request({
-    url: '/api/dict/data/type/' + dictType,
+    url: '/api/dict/' + dictType,
     method: 'get'
   })
 }

src/components/RightToolbar/index.vue

+<template>
+  <div class="top-right-btn" :style="style">
+    <el-row>
+      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
+        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
+          <el-button size="mini" circle icon="el-icon-menu" />
+          <el-dropdown-menu slot="dropdown">
+            <template v-for="item in columns">
+              <el-dropdown-item :key="item.key">
+                <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+              </el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-tooltip>
+    </el-row>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-transfer
+        :titles="['显示', '隐藏']"
+        v-model="value"
+        :data="columns"
+        @change="dataChange"
+      ></el-transfer>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "RightToolbar",
+  data() {
+    return {
+      // 显隐数据
+      value: [],
+      // 弹出层标题
+      title: "显示/隐藏",
+      // 是否显示弹出层
+      open: false,
+    };
+  },
+  props: {
+    /* 是否显示检索条件 */
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    /* 显隐列信息 */
+    columns: {
+      type: Array,
+    },
+    /* 是否显示检索图标 */
+    search: {
+      type: Boolean,
+      default: true,
+    },
+    /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+    showColumnsType: {
+      type: String,
+      default: "checkbox",
+    },
+    /* 右外边距 */
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+  },
+  computed: {
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.marginRight = `${this.gutter / 2}px`;
+      }
+      return ret;
+    }
+  },
+  created() {
+    if (this.showColumnsType == 'transfer') {
+      // 显隐列初始默认隐藏列
+      for (let item in this.columns) {
+        if (this.columns[item].visible === false) {
+          this.value.push(parseInt(item));
+        }
+      }
+    }
+  },
+  methods: {
+    // 搜索
+    toggleSearch() {
+      this.$emit("update:showSearch", !this.showSearch);
+    },
+    // 刷新
+    refresh() {
+      this.$emit("queryTable");
+    },
+    // 右侧列表元素变化
+    dataChange(data) {
+      for (let item in this.columns) {
+        const key = this.columns[item].key;
+        this.columns[item].visible = !data.includes(key);
+      }
+    },
+    // 打开显隐列dialog
+    showColumn() {
+      this.open = true;
+    },
+    // 勾选
+    checkboxChange(event, label) {
+      this.columns.filter(item => item.label == label)[0].visible = event;
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-transfer__button {
+  border-radius: 50%;
+  padding: 12px;
+  display: block;
+  margin-left: 0px;
+}
+::v-deep .el-transfer__button:first-child {
+  margin-bottom: 10px;
+}
+</style>

src/directive/dialog/drag.js

+/**
+* v-dialogDrag 弹窗拖拽
+* Copyright (c) 2019 ruoyi
+*/
+
+export default {
+  bind(el, binding, vnode, oldVnode) {
+    const value = binding.value
+    if (value == false) return
+    // 获取拖拽内容头部
+    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);
+    dragDom.style.position = 'absolute';
+    dragDom.style.marginTop = 0;
+    let width = dragDom.style.width;
+    if (width.includes('%')) {
+      width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
+    } else {
+      width = +width.replace(/\px/g, '');
+    }
+    dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
+    // 鼠标按下事件
+    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;
+
+        let finallyL = l + styL
+        let finallyT = t + styT
+
+        // 移动当前元素
+        dragDom.style.left = `${finallyL}px`;
+        dragDom.style.top = `${finallyT}px`;
+
+      };
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    }
+  }
+};
\ No newline at end of file

src/directive/dialog/dragHeight.js

+/**
+ * v-dialogDragWidth 可拖动弹窗高度（右下角）
+ * Copyright (c) 2019 ruoyi
+ */
+
+export default {
+  bind(el) {
+    const dragDom = el.querySelector('.el-dialog');
+    const lineEl = document.createElement('div');
+    lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
+    lineEl.addEventListener('mousedown',
+      function(e) {
+        // 鼠标按下，计算当前元素距离可视区的距离
+        const disX = e.clientX - el.offsetLeft;
+        const disY = e.clientY - el.offsetTop;
+        // 当前宽度 高度
+        const curWidth = dragDom.offsetWidth;
+        const curHeight = dragDom.offsetHeight;
+        document.onmousemove = function(e) {
+          e.preventDefault(); // 移动时禁用默认事件
+          // 通过事件委托，计算移动的距离
+          const xl = e.clientX - disX;
+          const yl = e.clientY - disY
+          dragDom.style.width = `${curWidth + xl}px`;
+          dragDom.style.height = `${curHeight + yl}px`;
+        };
+        document.onmouseup = function(e) {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+      }, false);
+    dragDom.appendChild(lineEl);
+  }
+}

src/directive/dialog/dragWidth.js

+/**
+ * v-dialogDragWidth 可拖动弹窗宽度（右侧边）
+ * Copyright (c) 2019 ruoyi
+ */
+
+export default {
+  bind(el) {
+    const dragDom = el.querySelector('.el-dialog');
+    const lineEl = document.createElement('div');
+    lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';
+    lineEl.addEventListener('mousedown',
+      function (e) {
+        // 鼠标按下，计算当前元素距离可视区的距离
+        const disX = e.clientX - el.offsetLeft;
+        // 当前宽度
+        const curWidth = dragDom.offsetWidth;
+        document.onmousemove = function (e) {
+          e.preventDefault(); // 移动时禁用默认事件
+          // 通过事件委托，计算移动的距离
+          const l = e.clientX - disX;
+          dragDom.style.width = `${curWidth + l}px`;
+        };
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+      }, false);
+    dragDom.appendChild(lineEl);
+  }
+}

src/directive/index.js

+import hasRole from './permission/hasRole'
+import hasPermi from './permission/hasPermi'
+import dialogDrag from './dialog/drag'
+import dialogDragWidth from './dialog/dragWidth'
+import dialogDragHeight from './dialog/dragHeight'
+// import clipboard from './module/clipboard'
+
+const install = function(Vue) {
+  Vue.directive('hasRole', hasRole)
+  Vue.directive('hasPermi', hasPermi)
+  // Vue.directive('clipboard', clipboard)
+  Vue.directive('dialogDrag', dialogDrag)
+  Vue.directive('dialogDragWidth', dialogDragWidth)
+  Vue.directive('dialogDragHeight', dialogDragHeight)
+}
+
+if (window.Vue) {
+  window['hasRole'] = hasRole
+  window['hasPermi'] = hasPermi
+  Vue.use(install); // eslint-disable-line
+}
+
+export default install

src/directive/module/clipboard.js

+/**
+* v-clipboard 文字复制剪贴
+* Copyright (c) 2021 ruoyi
+*/
+
+import Clipboard from 'clipboard'
+export default {
+  bind(el, binding, vnode) {
+    switch (binding.arg) {
+      case 'success':
+        el._vClipBoard_success = binding.value;
+        break;
+      case 'error':
+        el._vClipBoard_error = binding.value;
+        break;
+      default: {
+        const clipboard = new Clipboard(el, {
+          text: () => binding.value,
+          action: () => binding.arg === 'cut' ? 'cut' : 'copy'
+        });
+        clipboard.on('success', e => {
+          const callback = el._vClipBoard_success;
+          callback && callback(e);
+        });
+        clipboard.on('error', e => {
+          const callback = el._vClipBoard_error;
+          callback && callback(e);
+        });
+        el._vClipBoard = clipboard;
+      }
+    }
+  },
+  update(el, binding) {
+    if (binding.arg === 'success') {
+      el._vClipBoard_success = binding.value;
+    } else if (binding.arg === 'error') {
+      el._vClipBoard_error = binding.value;
+    } else {
+      el._vClipBoard.text = function () { return binding.value; };
+      el._vClipBoard.action = () => binding.arg === 'cut' ? 'cut' : 'copy';
+    }
+  },
+  unbind(el, binding) {
+    if (!el._vClipboard) return
+    if (binding.arg === 'success') {
+      delete el._vClipBoard_success;
+    } else if (binding.arg === 'error') {
+      delete el._vClipBoard_error;
+    } else {
+      el._vClipBoard.destroy();
+      delete el._vClipBoard;
+    }
+  }
+}

src/directive/permission/hasPermi.js

+ /**
+ * v-hasPermi 操作权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+
+import store from '@/store'
+
+export default {
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const all_permission = "*:*:*";
+    const permissions = store.getters && store.getters.permissions
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionFlag = value
+
+      const hasPermissions = permissions.some(permission => {
+        return all_permission === permission || permissionFlag.includes(permission)
+      })
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`)
+    }
+  }
+}

src/directive/permission/hasRole.js

+ /**
+ * v-hasRole 角色权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+
+import store from '@/store'
+
+export default {
+  inserted(el, binding, vnode) {
+    const { value } = binding
+    const super_admin = "admin";
+    const roles = store.getters && store.getters.roles
+
+    if (value && value instanceof Array && value.length > 0) {
+      const roleFlag = value
+
+      const hasRole = roles.some(role => {
+        return super_admin === role || roleFlag.includes(role)
+      })
+
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置角色权限标签值"`)
+    }
+  }
+}

src/main.js

@@ -12,8 +12,10 @@ import '@/permission' // permission control
 import performLoader from '@/utils/global_main_loader.js'
 import WS from '@/utils/websocket'
 import { getDicts } from "@/api/system/dict/data";
+import directive from './directive' // directive
 // 字典标签组件
 import DictTag from '@/components/DictTag'
+import RightToolbar from '@/components/RightToolbar'
  
 // 字典数据组件
 import DictData from '@/components/DictData'
@@ -22,7 +24,9 @@ Vue.use(ElementUI, { locale })
 performLoader(Vue) // 所有的第三方插件性质的东西都放到这里面了
 Vue.config.productionTip = false
 Vue.prototype.getDicts = getDicts
+Vue.component('RightToolbar', RightToolbar)
 Vue.component('DictTag', DictTag)
+Vue.use(directive)
 DictData.install()
 function dispatchWithPromise(path) {
   return new Promise(resolve => {

src/router/index.js

@@ -176,39 +176,40 @@ export const constantRoutes = [
       },
     ]
   },
-  {
-    path: '/history',
-    component: Layout,
-    redirect: '/history/leakyCableStatus',
-    name: 'History',
-    meta: { title: '历史数据', icon: 'history' },
-    children: [
   // {
-      //   path: 'leakyCableStatus',
-      //   name: 'leakyCableStatus',
-      //   component: () => import('@/views/history/leakyCableStatus/index.vue'),
-      //   meta: { title: '漏缆监测历史状态' }
+  //   path: '/history',
+  //   component: Layout,
+  //   redirect: '/history/leakyCableStatus',
+  //   name: 'History',
+  //   meta: { title: '历史数据', icon: 'history' },
+  //   children: [
+  //     // {
+  //     //   path: 'leakyCableStatus',
+  //     //   name: 'leakyCableStatus',
+  //     //   component: () => import('@/views/history/leakyCableStatus/index.vue'),
+  //     //   meta: { title: '漏缆监测历史状态' }
+  //     // },
+  //     {
+  //       path: 'leakyCableRepair',
+  //       name: 'leakyCableRepair',
+  //       component: () => import('@/views/history/leakyCableRepair/index.vue'),
+  //       meta: { title: '漏缆监测维修历史' }
   //     },
-      {
-        path: 'leakyCableRepair',
-        name: 'leakyCableRepair',
-        component: () => import('@/views/history/leakyCableRepair/index.vue'),
-        meta: { title: '漏缆监测维修历史' }
-      },
+  //     // {
+  //     //   path: 'deviceLinkStatus',
+  //     //   name: 'deviceLinkStatus',
+  //     //   component: () => import('@/views/history/deviceLinkStatus/index.vue'),
+  //     //   meta: { title: '设备连接历史状态' }
+  //     // },
   //     {
-      //   path: 'deviceLinkStatus',
-      //   name: 'deviceLinkStatus',
-      //   component: () => import('@/views/history/deviceLinkStatus/index.vue'),
-      //   meta: { title: '设备连接历史状态' }
+  //       path: 'deviceLinkRepair',
+  //       name: 'deviceLinkRepair',
+  //       component: () => import('@/views/history/deviceLinkRepair/index.vue'),
+  //       meta: { title: '设备连接维修历史' }
+  //     }
+  //   ]
   // }, 
   {
-        path: 'deviceLinkRepair',
-        name: 'deviceLinkRepair',
-        component: () => import('@/views/history/deviceLinkRepair/index.vue'),
-        meta: { title: '设备连接维修历史' }
-      }
-    ]
-  }, {
     path: '/backup',
     component: Layout,
     redirect: '/dashboard',

src/utils/websocket.js

@@ -8,7 +8,9 @@ export default function socket(handlerOptions) {
     onopen,
     // socketUrl
   } = handlerOptions
-  let socketUrl = 'ws://8.142.143.40:8885/websocket/1'
+  let socketUrl = 'ws://101.126.159.207:8087/device/websocket/1'
+  
+  // let socketUrl = 'ws://127.0.0.1:8087/device/websocket/1'
   let websocket
   if ("WebSocket" in window) {
     websocket = new WebSocket(socketUrl)

src/views/jobgroup/jobinfo/index.vue

@@ -226,7 +226,7 @@
           label="固定速度"
           class="both"
         >
-          <!-- scheduleConf 固定速度的值 -->
+          <!-- scheduleConf 固定速度的值  cronGen_display-->
           <!-- schedule_conf_FIX_RATE 还有个这个 -->
           <el-input
             placeholder="请输入 （ Second ）"
@@ -241,8 +241,34 @@
         >
           <!-- scheduleConf 固定速度的值 -->
           <!-- schedule_conf_FIX_RATE 还有个这个 -->
-          <el-input placeholder="请输入 CRON" v-model="addFrom.scheduleConf">
+          <el-popover
+            placement="bottom"
+            width="448"
+            trigger="manual"
+            v-model="visible"
+          >
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="秒" name="1">用户管理</el-tab-pane>
+              <el-tab-pane label="分钟" name="2">配置管理</el-tab-pane>
+              <el-tab-pane label="小时" name="3">角色管理</el-tab-pane>
+              <el-tab-pane label="日" name="4">定时任务补偿</el-tab-pane>
+              <el-tab-pane label="月" name="5">配置管理</el-tab-pane>
+              <el-tab-pane label="周" name="6">角色管理</el-tab-pane>
+              <el-tab-pane label="年" name="7">定时任务补偿</el-tab-pane>
+            </el-tabs>
+            <el-input
+              slot="reference"
+              placeholder="请输入 CRON"
+              v-model="addFrom.scheduleConf"
+            >
+              <i
+                slot="suffix"
+                style="cursor: pointer"
+                @click="visible = !visible"
+                class="el-input__icon el-icon-date"
+              ></i>
             </el-input>
+          </el-popover>
         </el-form-item>
         <div class="mini-title">任务配置</div>
 
@@ -337,9 +363,7 @@
           </el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleTriggerJobinfo"
-            >确定</el-button
-          >
+          <el-button type="primary" @click="handleAdd">确定</el-button>
           <el-button @click="handleClose()">取消</el-button>
         </el-form-item>
       </el-form>
@@ -357,11 +381,13 @@ import {
   start,
   stop,
   remove,
+  add,
 } from "@/api/job.js";
 import { successAlert, warningAlert } from "@/utils/alert";
 export default {
   data() {
     return {
+      visible: false,
       scheduleType: [
         {
           value: "NONE",
@@ -515,6 +541,19 @@ export default {
     this.handleJobGroupList();
   },
   methods: {
+    async handleAdd() {
+      console.log(this.addFrom);
+      let data = {
+        ...this.addFrom,
+      };
+      const params = new URLSearchParams(data).toString();
+      let res = await add(params);
+      if (res.code == 200) {
+        successAlert("操作成功");
+        this.addDialogVisible = false;
+        this.handleJobinfoList();
+      }
+    },
     handleRemove() {
       let data = {
         id: this.manageFrom.id,

vue.config.js

@@ -7,10 +7,13 @@ function resolve(dir) {
 }
 
 const name = defaultSettings.title || '漏缆故障定位监测系统' // page title
-const port = process.env.port || process.env.npm_config_port || 8886 // dev port
-// const href = 'http://101.126.159.207'
+const port = process.env.port || process.env.npm_config_port || 8890 // dev port
+const href = 'http://101.126.159.207'
 // const href = 'http://192.168.0.118'
-const href = 'http://127.0.0.1'
+// const href = 'http://127.0.0.1'
+// const href = 'http://192.168.0.122'
+
+
 
 const rewriteDefaultConfig = {
   changeOrigin: true,