增加报警配置列表,修改路由

package.json

@@ -22,6 +22,7 @@
     "escape-string-regexp": "^2.0.0",
     "execa": "^3.2.0",
     "isexe": "^2.0.0",
+    "json-bigint": "D:\\Gyee_Work_Project\\MyGit\\wisdom_water_ui_zs\\ZhangShan_VueProject>\"C:\\Program Files\\nodejs\\\\node.exe\"  \"C:\\Program Files\\nodejs\\\\node_modules\\npm\\bin\\npm-cli.js\" config get save-prefix \r\n^1.0.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "mimic-fn": "^3.0.0",
@@ -37,7 +38,8 @@
     "vue-runtime-helpers": "^1.1.2",
     "vuex": "^3.0.1",
     "wrappy": "^1.0.2",
-    "yallist": "^4.0.0"
+    "yallist": "^4.0.0",
+    "xlsx": "^0.15.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.3",

src/api/request.js

@@ -0,0 +1,37 @@
+import axios from 'axios';
+import JSONbig from 'json-bigint';
+
+const service = axios.create({
+   // crossDomain: true,
+   // baseURL: process.env.VUE_APP_BASE_URL,
+    timeout: 5000,
+    transformResponse: [function (data) {
+        return JSONbig.parse(data);
+    }],
+});
+
+service.interceptors.request.use(
+    config => {
+        return config;
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+service.interceptors.response.use(
+    response => {
+        if (response.status === 200) {
+            return response.data;
+        } else {
+            Promise.reject();
+        }
+    },
+    error => {
+        console.log(error);
+        return Promise.reject();
+    }
+);
+
+export default service;

src/api/requestAPI.js

@@ -0,0 +1,117 @@
+import request from './request';
+import Axios from 'axios';
+import JSONbig from 'json-bigint';
+
+//const URL = '/api/';
+const URL =process.env.VUE_APP_BASE_URL || '/wisdom-water/';
+//******************************用户接口************************************//
+export const loginRequest = objData => {
+    return Axios.post(URL + "sys/login", objData);
+};
+export const registerUserRequest = objData => {
+    return Axios.post(URL + "user/register", objData);
+};
+export const editUserRequest = objData => {
+    return Axios.post(URL + "user/edit", objData);
+};
+
+export const getAllUserRequest = objData => {
+    return Axios.post(URL + "user/get", objData, {
+        headers: {
+            'content-type': 'application/json',
+            'token': objData.token
+        }
+    });
+
+};
+export const resetUserRequest = objData => {
+
+    return Axios.post(URL + "/user/reset", objData, {
+        headers: {
+            'content-type': 'application/json',
+            'token': objData.token
+        }
+    });
+};
+
+
+//******************************end****************************************//
+
+
+//******************************公用接口************************************//
+
+//根据场站编号，风机型号获取AI测点
+export const fetchAIPointList = (stationId, modelId) => {
+    return request({
+        url: URL + 'info/testing_point_ai',
+        method: 'get',
+        params: {
+            stationId: stationId,
+            modelId: modelId
+        }
+    });
+};
+//根据场站编号，风机型号获取DI测点
+export const fetchDIPointList = (stationId, modelId) => {
+    return request({
+        url: URL + 'info/testing_point_di',
+        method: 'get',
+        params: {
+            stationId: stationId,
+            modelId: modelId
+        }
+    });
+};
+//根据场站编号，获取电气DI测点
+export const fetchElectricDIPointList = (stationId) => {
+    return request({
+        url: URL + 'info/electrical_point_di',
+        method: 'get',
+        params: {
+            stationId: stationId
+        }
+    });
+};
+//根据电气测点，获取测点信息
+export const fetchElectricDIPointByPointId = (pointId) => {
+    return request({
+        url: URL + 'info/electrical_point_di/byId',
+        method: 'get',
+        params: {
+            pointId: pointId
+        }
+    });
+};
+
+
+//******************************end****************************************//
+
+
+//******************************自定义报警API************************************//
+export const alert_rule_fetchTableData = query => {
+    let data =
+        request({
+            url: URL + 'rule/list',
+            method: 'get',
+            params: query,
+            headers: {
+                'content-type': 'application/json',
+                'token': localStorage.getItem('token')
+            },
+            timeout: 3000,
+        });
+    return data;
+};
+
+
+export const alert_rule_postSave = form => {
+    return Axios.post(URL + "alertrule2/save", form, {
+        headers: {
+            'content-type': 'application/json',
+            'token': sessionStorage.getItem('token')
+        }
+    })
+};
+
+
+//******************************end*******************************************//

src/main.js

@@ -14,8 +14,9 @@ import 'element-ui/lib/theme-chalk/index.css'
 import './assets/css/base.css' //基础样式
 import './assets/less/nav.less' //导航样式
 
-import Api from './api/api' //导入api接口
-import Axios from './request/http' //导入axios请求
+// import Api from './api/api' //导入api接口
+// import Axios from './request/http' //导入axios请求
+import axios from "axios"
 Vue.use(ElementUI)
 
 
@@ -25,8 +26,8 @@ import './assets/css/1113798iconfont.css'
 import './assets/css/1331132iconfont.css'
 
 
-Vue.prototype.$api = Api //在vue上挂载api
-Vue.prototype.$axios = Axios
+//Vue.prototype.$api = Api //在vue上挂载api
+Vue.prototype.$axios = axios
 Vue.prototype.$config = Config //配置信息
 console.log('NODE_ENV:', process.env.NODE_ENV)
 Vue.config.productionTip = false

src/router/index.js

@@ -3,30 +3,28 @@ import VueRouter from "vue-router";
 import Home from "../views/Home.vue";
 Vue.use(VueRouter);
 
-const routes = [
-      //登录
-      {
-        path: "/login",
-        name: "login",
-        component: r => require.ensure([], () => r(require("../views/login/Login.vue")), "Login"),
+const routes = [{
+        path: "/", //默认路由
+        redirect: "/login",
         hidden: true,
         meta: {
-            title: "登录",
+            title: "默认路由",
             keepAlive: false,
             level: 0
         }
     },
+    //登录
     {
-        path: "/", //默认路由
-        redirect: "/login",
+        path: "/login",
+        name: "login",
+        component: r => require.ensure([], () => r(require("../views/login/Login.vue")), "Login"),
         hidden: true,
         meta: {
-            title: "默认路由",
+            title: "登录",
             keepAlive: false,
             level: 0
         }
-    },
-    {
+    }, {
         path: "*", //输错路由回首页
         redirect: "/404",
         hidden: true,
@@ -36,7 +34,6 @@ const routes = [
             level: 0 //判断是否缓存 0为不缓存 1为缓存 2为详情页
         }
     },
-  
     //404
     {
         path: "/404",
@@ -50,131 +47,83 @@ const routes = [
         }
     },
     {
-        path: "/home",
-        name: "home",
+        path: "/alarmList",
+        name: "alarmList",
         component: Home,
-        redirect: '/summarys/index',
-        hidden: true,
+        redirect: '/alarmList',
+        hidden: false,
         meta: {
-            title: "首页",
+            title: "报警信息",
             keepAlive: false,
             level: 0
-        }
-    },
-    {
-        path: '/Viewer',
-        component: () => import('../views/xDesigner/viewer.vue'),
-        hidden: true,
+        },
+        children: [{
+            path: "/goods/goodsList",
+            component: () => import("../views/goods/goodsList.vue"),
+            name: "goodsList",
+            hidden: false,
+            meta: {
+                title: "报警列表",
+                keepAlive: false,
+                level: 0
+            }
+        }, ]
     },
-
     {
-        path: "/home",
+        path: "/config",
+        name: "config",
         component: Home,
-        iconCls: "fa el-icon-s-data",
+     
         hidden: false,
         meta: {
-            title: "监视",
+            title: "配置功能",
             keepAlive: false,
             level: 0
         },
         children: [{
-                path: "/summarys/index",
-                component: () => import("../views/summarys/index.vue"),
-                name: "summarys",
+                path: "/config/rule/list",
+                component: () => import("../views/rule/list.vue"),
+                name: "ruleList",
                 hidden: false,
                 meta: {
-                    title: "框架简介",
+                    title: "报警配置",
                     keepAlive: false,
                     level: 0
                 }
             },
-        ]
-    },
-    {
-        path: "/home",
-        component: Home,
-        iconCls: "fa el-icon-s-data",
-        hidden: false,
-        meta: {
-            title: "列表详情",
-            keepAlive: false,
-            level: 0
-        },
-        children: [{
-                path: "/goods/goodsList",
+            {
+                path: "/config/pointList",
                 component: () => import("../views/goods/goodsList.vue"),
-                name: "goodsList",
+                name: "testPointList",
                 hidden: false,
                 meta: {
-                    title: "列表",
+                    title: "测点配置",
                     keepAlive: false,
                     level: 0
                 }
             },
             {
-                path: "/goods/goodsList/goodsDetail",
-                component: () => import("../views/goods/goodsDetail.vue"),
-                name: "goodsDetail",
-                hidden: true,
+                path: "/config/userList",
+                component: () => import("../views/goods/goodsList.vue"),
+                name: "testPointList",
+                hidden: false,
                 meta: {
-                    title: "详情",
-                    parentPath: "/goods/goodsList",
-                    parentTitle: "商品列表",
+                    title: "用户管理",
                     keepAlive: false,
                     level: 0
                 }
-            }
+            },
         ]
     },
+
+
+    //监视容器路由
     {
-        path: "/home",
-        component: Home,
-        iconCls: "fa el-icon-s-data",
-        hidden: false,
-        meta: {
-            title: "上传导入",
-            keepAlive: false,
-            level: 0
-        },
-        children: [{
-            path: "/upload/index",
-            component: () => import("../views/upload/index.vue"),
-            name: "upload",
-            hidden: false,
-            meta: {
-                title: "自定义上传导入",
-                keepAlive: false,
-                level: 0
-            }
-        }]
-    },
-    {
-        path: "/home",
-        component: Home,
-        iconCls: "fa el-icon-s-data",
-        hidden: false,
-        meta: {
-            title: "表单校验",
-            keepAlive: false,
-            level: 0
-        },
-        children: [{
-            path: "/formValidation/index",
-            component: () => import("../views/formValidation/index.vue"),
-            name: "formValidation",
-            hidden: false,
-            meta: {
-                title: "校验动态下拉",
-                keepAlive: false,
-                level: 0
-            }
-        }]
-    },
-    {
-        path: '/AppDesign',
-        component: () => import('../views/xDesigner/AppDesign.vue'),
+        path: '/Viewer',
+        component: () => import('../views/xDesigner/viewer.vue'),
         hidden: true,
     },
+
     {
         hidden: true,
         path: '/XDesigner',
@@ -186,6 +135,12 @@ const routes = [
         },
         component: () => import("../views/xDesigner/xdesigner.vue")
     },
+
+    {
+        path: '/AppDesign',
+        component: () => import('../views/xDesigner/AppDesign.vue'),
+        hidden: true,
+    },
 ]
 
 const router = new VueRouter({

src/views/Home.vue

@@ -27,6 +27,7 @@
               </label>
             </el-submenu>
           </el-submenu>
+          
           <!-- $router.options.routes到时候可以从后台动态获取菜单 -->
           <template v-for="(item, index) in $router.options.routes">
             <template>
@@ -57,9 +58,7 @@
               >{{ item.meta.title }}</el-menu-item>
             </template>
           </template>
-          <router-link target="_blank" to="/AppDesign">
-            <div class="el-submenu__title zt" style="color:#fff;">组态</div>
-          </router-link>
+        
         </el-menu>
       </el-aside>
       <el-main class="main-container">

src/views/login/Login.vue

@@ -1,77 +1,37 @@
 <template>
-  <section class="wrapper">
-   
-    <div class="login-wrapper">
-      <div class="text-center">
-      <h1>漳山智慧水务系统</h1>
-      </div>
-      <el-tabs v-model="activeName"
-               @tab-click="tabHandle()">
-        <!-- <el-tab-pane label="账号密码登录"
-                     name="first"> -->
-        <el-form v-model="accountForm"
-                 class="mar-t-30">
-          <div class="mar-b-30 form-item">
-            <label class="icon-box">
-              <i class="iconfont icon-f-user"></i>
-            </label>
-            <el-input v-model="accountForm.account"
-                      placeholder="输入账号"
-                      clearable></el-input>
-          </div>
-          <div class="mar-b-30 form-item form-item-code">
-            <label class="icon-box">
-              <i class="iconfont icon-f-password"></i>
-            </label>
-            <el-input v-model="accountForm.password"
-                      type="password"
-                      @keyup.enter.native="accountLoginHandle"
-                      placeholder="密码"
-                      clearable></el-input>
-            <router-link to="/forgotPassword"
-                         style="display: none">忘记密码</router-link>
-          </div>
-          <div class="mar-b-15 text-center">
-            <el-button @click="accountLoginHandle()"
-                       :loading="accountLoadingBtn"
-                       type="primary"
-                       style="width: 100%">登录</el-button>
-          </div>
-        </el-form>
-      </el-tabs>
+  <div class="login-wrap">
+    <div class="ms-login">
+      <div class="ms-title">漳山智慧水务系统</div>
+      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
+        <el-form-item prop="username">
+          <el-input v-model="param.username" placeholder="用户名">
+            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            type="password"
+            placeholder="密码"
+            v-model="param.password"
+            @keyup.enter.native="submitForm()"
+          >
+            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
+          </el-input>
+        </el-form-item>
+        <div class="login-btn">
+          <el-button type="primary" @click="submitForm()">登录</el-button>
+        </div>
+      </el-form>
     </div>
-  </section>
+  </div>
 </template>
 
 <script>
+import { loginRequest } from "../../api/requestAPI";
+import axios from "axios";
 export default {
   name: "login",
-  data () {
-    //验证新密码
-    let validatePass = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("密码不能为空"))
-      } else if (value.length < 6) {
-        callback(new Error("请输入6-20位密码"))
-      } else {
-        if (this.editPasswordForm.editPassword2 !== "") {
-          this.$refs.editPasswordForm.validateField("editPassword2")
-        }
-        callback()
-      }
-    }
-    //验证再次输入密码
-    let validatePass2 = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("再次输入密码不能为空"))
-      } else if (value.length < 6) {
-        callback(new Error("请输入6-20位密码"))
-      } else if (value !== this.editPasswordForm.editPassword) {
-        callback(new Error("两次输入密码不一致!"))
-      } else {
-        callback()
-      }
-    }
+  data() {
     return {
       SUCCESS_CODE: 1, //请求成功的值
       SSXT: "ssxt", //系统名称
@@ -80,197 +40,116 @@ export default {
       userPassword: "", //密码
       accountLoadingBtn: false, //账号密码登录按钮loading
       codeLoadingBtn: false, //短信验证按钮loading
-      accountForm: {
-        //账号表单
-        account: "admin",
-        password: "111111"
-      }
-    }
-  },
-  mounted() {
-	var canvas = document.getElementById('canvas')
-	var context = canvas.getContext('2d')
-	var W = window.innerWidth
-	var H = window.innerHeight
-	canvas.width = W
-	canvas.height = H
-	var fontSize = 18
-	var colunms = Math.floor(W/fontSize)
-	var drops = []
-	for(var i = 0; i<colunms; i++){
-		drops.push(0)
-	}
-	var str = 'javascript html5 canvas'
-	
-	// function draw(canvas,context,W,H,fontSize,colunms,str,drops){
-		
-	// }
-	// function randColor (){
-	// 	var r = Math.floor(Math.random() * 256)
-	// 	var g = Math.floor(Math.random() * 256)
-	// 	var b = Math.floor(Math.random() * 256)
-	// 	return "rgb(" + r + "," + g + "," + b + ")"
-	// }
-	// draw()
-	setInterval(()=>{
-		context.fillStyle = 'rgba(0,0,0,0.05)'
-		context.fillRect(0,0,W,H)
-		context.font = '0' + fontSize + 'px 微软雅黑'
-		context.fillStyle = '#00cc33'
-		for(var i = 0; i<colunms; i++){
-			var index = Math.floor(Math.random() * str.length)
-			var x = i * fontSize
-			var y = drops[i] * fontSize
-			context.fillText(str[index],x,y)
-			if(y >= canvas.height && Math.random() > 0.99){
-				drops[i] = 0
-			}else{
-				drops[i]++
-			}
-		}
-	},30)
+
+      param: {
+        username: "",
+        password: "",
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+      publicKey: "",
+    };
   },
-  created () {
+  mounted() {},
+  created() {
     //针对点击浏览器的回退按钮时，若回退到的当前页面是登录页面，则清空localStorage的数据
     //window.location.href.indexOf('login') !=-1
-    if (this.$route.path === '/login') {
-      localStorage.removeItem('token')
-      localStorage.removeItem('userInfo')
-      localStorage.removeItem('functions')
+    if (this.$route.path === "/login") {
+      localStorage.removeItem("token");
+      localStorage.removeItem("ms_username");
+      localStorage.removeItem("ms_chinesename");
+      localStorage.removeItem("ms_id");
     }
   },
   methods: {
-    //账号密码登录
-    accountLoginHandle () {
-      //登录成功
-      this.$message({
-        type: "success",
-        message: '登录成功'
-      })
-      //跳转到首页
-      this.$router.push("/summarys/index")
-      return false
-	  
-	  
-      //验证账号密码
-      if (this.accountForm.account === "" || this.accountForm.password === "") {
-        this.$message({
-          type: "error",
-          message: "账号或者密码不能为空"
-        })
-        return false
-      } else {
-        //如果本地有token，则先清除token再登录
-        if (localStorage.token) {
-          localStorage.removeItem("token")
-        }
-        //请求登录参数
-        let params = {
-          account: this.accountForm.account, //账号
-          password: this.accountForm.password, //密码
+    submitForm() {
+      this.$refs.login.validate((valid) => {
+        if (valid) {
+          let requestData = {
+            data: {
+              username: this.param.username,
+              password: this.param.password,
+            },
+          };
+
+          new Promise((resolve, reject) => {
+           resolve(loginRequest(requestData))
+          })
+            .then((res) => {
+              if (res.data.status == 20000) {
+                localStorage.setItem("ms_username", res.data.data.userName);
+                localStorage.setItem(
+                  "ms_chinesename",
+                  res.data.data.chineseName
+                );
+                localStorage.setItem("ms_id", res.data.data.id);
+                localStorage.setItem("token", res.data.token);
+
+                this.$message.success("登陆成功");
+
+                this.$router.push("/goods/goodsList");
+              } else {
+                this.$message.error("登陆失败,用户名或密码错误");
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        } else {
+          this.$message.error("请输入账号和密码");
+          console.log("error submit!!");
+          return false;
         }
-        this.successFunc(params) //执行验证通过函数
-      }
+      });
     },
-    //验证通过函数
-    successFunc (params) {
-      this.accountLoadingBtn = true //账号登录按钮loading
-      //请求登录接口
-      this.$api.systemModule.login(params)
-        .then(res => {
-          if (res.data.retcode === this.SUCCESS_CODE) {
-            const token = res.data.data.phSessionToken //获取token
-            localStorage.setItem("token", token) //把token存储到localStorage
-            let params = {
-              phSessionToken: token
-            }
-            //校验
-            this.$api.systemModule.userValidator(params)
-              .then(res => {
-                if (res.data.retcode === this.SUCCESS_CODE) {
-                  let data = res.data.data
-                  //如果他是为空的话，传给vuex store就是为假，反之则为真，所以为空的时候就取反
-                  this.$store.dispatch("commitToken", token)
-                  //存在localStorage
-                  localStorage.setItem("userInfo", JSON.stringify(data))
-                  let params = {
-                    phSessionToken: token
-                  }
-                  this.queryUserAllInfo(params)
-                }
-              })
-              .catch(err => {
-                console.log(err)
-              })
-          } else if (res.data.retcode === 201) {
-            this.accountLoadingBtn = false
-            this.$message({
-              type: "error",
-              message: res.data.retmsg
-            })
-            //如果首次登录系统，重置密码
-            this.editPasswordWrapper = true
-          } else {
-            this.$message({
-              type: "error",
-              message: res.data.retmsg
-            })
-            this.accountLoadingBtn = false //账号登录按钮loading
-          }
-        })
-        .catch(err => {
-          console.log(err)
-          this.accountLoadingBtn = false //账号登录按钮loading
-        })
-    }
-  }
-}
+  },
+};
 </script>
+
 <style scoped>
-#canvas{
-	background: #111;
-	z-index: 1;
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-}
-.wrapper {
-  min-height: 100%;
-  width: 100%;
-  background-color: #e9e9e9;
-  overflow: hidden;
-}
-.login-wrapper {
+.login-wrap {
   position: relative;
-  width: 400px;
-  max-width: 100%;
-  padding: 160px 35px 0;
-  margin: 0 auto;
-  overflow: hidden;
-  z-index: 2;
-}
-.form-wrapper {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 100;
   width: 100%;
   height: 100%;
-  z-index: 100;
-  background: rgba(0, 0, 0, 0.8);
+  background-image: url(../../assets/images/login-bg.jpg);
+  background-size: 100%;
 }
-.form-container {
+.ms-title {
+  width: 100%;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.ms-login {
   position: absolute;
   left: 50%;
   top: 50%;
-  z-index: 100;
-  transform: translate(-50%, -50%);
-  padding: 10px 30px 20px;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  box-sizing: border-box;
+  width: 350px;
+  margin: -190px 0 0 -175px;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.3);
+  overflow: hidden;
+}
+.ms-content {
+  padding: 30px 30px;
+}
+.login-btn {
+  text-align: center;
+}
+.login-btn button {
+  width: 100%;
+  height: 36px;
+  margin-bottom: 10px;
+}
+.login-tips {
+  font-size: 12px;
+  line-height: 30px;
+  color: #fff;
 }
-</style>
+</style>

src/views/rule/edit_form.vue

@@ -0,0 +1,845 @@
+<template>
+  <!-- 编辑弹出框 -->
+  <el-dialog
+    :visible="visible"
+    width="1100px"
+    :before-close="dialogBeforeClose"
+    @open="dialogOpenHandle"
+    @close="dialogCloseHandle"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-position="top"
+      label-width="200px"
+      :disabled="dialogStatus == 2"
+    >
+      <el-row type="flex" justify="space-between" align="middle" :gutter="10">
+        <el-col :span="15">
+          <el-form-item prop="name">
+            <el-tag slot="label">规则名称</el-tag>
+            <el-input v-model="form.name" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="9" style="display:flex;justify-content:space-between;align-items:center">
+          <el-form-item prop="category">
+            <el-tag slot="label">报警类别</el-tag>
+            <el-select v-model="form.category" class="select-mini">
+              <el-option key="1" label="风机" value="1" />
+              <el-option key="2" label="电气" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="rank">
+            <el-tag slot="label">报警级别</el-tag>
+            <el-select v-model="form.rank" class="select-mini">
+              <el-option key="1" label="低" value="1" />
+              <el-option key="2" label="中低" value="2" />
+              <el-option key="3" label="中" value="3" />
+              <el-option key="4" label="中高" value="4" />
+              <el-option key="5" label="高" value="5" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="enabled">
+            <el-tag slot="label">是否启用</el-tag>
+            <el-switch
+              v-model="form.enabled"
+              active-value="1"
+              inactive-value="0"
+              active-color="#13ce66"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="6">
+          <el-form-item prop="station">
+            <el-tag slot="label">风场</el-tag>
+            <el-select v-model="form.station" style="width:100%">
+              <el-option
+                v-for="item in stationList"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="modelId" v-show="isWindturbine">
+            <el-tag slot="label">风机类型</el-tag>
+            <el-select v-model="form.modelId" style="width:100%">
+              <el-option v-for="item in modelList" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="relatedParts" v-show="isWindturbine">
+            <el-tag slot="label">所属部件</el-tag>
+            <el-select v-model="form.relatedParts" style="width:100%">
+              <el-option
+                v-for="i in relatePartList"
+                :key="i.partCode"
+                :value="i.partCode"
+                :label="i.name"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item prop="expression">
+            <el-tag slot="label">表达式</el-tag>
+            <el-input
+              type="textarea"
+              rows="12"
+              v-model="form.expression"
+              :value="form.expression"
+              id="expressionInput"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-tabs type="border-card">
+            <el-tab-pane label="AI测点">
+              <el-input v-model="AIPointSearch" @input="AIInputChange">
+                <el-button slot="append" icon="el-icon-search" />
+              </el-input>
+              <el-table
+                size="mini"
+                fit
+                :show-header="false"
+                :highlight-current-row="true"
+                :stripe="false"
+                :border="false"
+                height="200"
+                :data="AIPointList"
+                @row-dblclick="tbAI_DBClickHandle"
+              >
+                <el-table-column prop="uniformCode" />
+                <el-table-column prop="name" />
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="DI测点">
+              <el-input v-model="DIPointSearch" @input="DIInputChange">
+                <el-button slot="append" icon="el-icon-search" />
+              </el-input>
+              <el-table
+                size="mini"
+                fit
+                :show-header="false"
+                :highlight-current-row="true"
+                :stripe="false"
+                :border="false"
+                height="200"
+                :data="DIPointList"
+                @row-dblclick="tbDI_DBClickHandle"
+              >
+                <el-table-column prop="uniformCode" />
+                <el-table-column prop="name" />
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="函数">
+              <el-table
+                size="mini"
+                fit
+                :show-header="false"
+                :highlight-current-row="true"
+                :stripe="false"
+                :border="false"
+                height="230"
+                :data="func"
+                @row-dblclick="tabFuncRowClickHandle"
+              >
+                <el-table-column min-width="60%">
+                  <template slot-scope="scope">
+                    <el-popover trigger="hover" placement="bottom">
+                      <p>描述：{{ scope.row.describe }}</p>
+                      <p>参数：{{ scope.row.param }}</p>
+                      <div slot="reference">
+                        <span size="medium" transition="fade-in-linear">{{ scope.row.lab }}</span>
+                      </div>
+                    </el-popover>
+                  </template>
+                </el-table-column>
+                <el-table-column min-width="40%">
+                  <template slot-scope="scope">
+                    <el-popover trigger="hover" placement="bottom">
+                      <p>描述：{{ scope.row.describe }}</p>
+                      <p>参数：{{ scope.row.param }}</p>
+                      <div slot="reference">
+                        <span size="medium" transition="fade-in-linear">{{ scope.row.name }}</span>
+                      </div>
+                    </el-popover>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="运算符">
+              <el-button-group>
+                <el-button
+                  v-for="item in operator"
+                  :key="item"
+                  plain
+                  type="primary"
+                  @click="btnOperatorClickHandle(item)"
+                  style="width:60px;margin:8px;height:40px"
+                >{{item}}</el-button>
+              </el-button-group>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item prop="description">
+          <el-tag slot="label">规则描述</el-tag>
+          <el-input type="textarea" rows="2" v-model="form.description" />
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="btnCancelClickHandle">取 消</el-button>
+      <el-button type="primary" @click="submit">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import {
+  fetchAIPointList,
+  fetchDIPointList,
+  alert_rule_postSave,
+} from "../../api/requestAPI";
+import axios from "axios";
+export default {
+  data() {
+    return {
+      visible: this.isVisible,
+      isWindturbine: true,
+      form: {
+        id: "",
+        name: "",
+        description: "",
+        expression: "111111",
+        tag: "",
+        rank: "",
+        enabled: "1", // 1可用-0禁用
+        modelId: "",
+        ednaValue: "",
+        category: "",
+        range: "",
+        station: "",
+        windturbine: "",
+        line: "",
+        project: "",
+        electrical: "",
+        taskstart: "",
+        relatedParts: "",
+        userName: "",
+      },
+      stationList: [],
+      modelList: [],
+      s_modelList: [
+        { station: "MHS_FDC", model_list: ["UP77", "UP105"] },
+        { station: "SBQ_FDC", model_list: ["UP82", "UP97", "UP105"] },
+        { station: "NSS_FDC", model_list: ["UP82"] },
+        { station: "XS_FDC", model_list: ["UP97", "UP105"] },
+        { station: "QS_FDC", model_list: ["CCWE-1500"] },
+      ],
+      relatePartList: [],
+      AIDataSource: [],
+      DIDataSource: [],
+      AIPointList: [],
+      DIPointList: [],
+      AIPointSearch: "",
+      DIPointSearch: "",
+      func: [
+        {
+          lab: "MR",
+          name: "移动极差",
+          param: "测点名，时间（秒）",
+          describe: "是指两个或多个连续样本值中最大值与最小值之差",
+          scene: "测点的移动极差超限报警",
+        },
+        {
+          lab: "MAR",
+          name: "均值极差",
+          param: "测点名，时间（秒）",
+          describe: "",
+          scene: "测点的均值极差计算",
+        },
+        {
+          lab: "RiseExceed",
+          name: "上升趋势",
+          param: "测点名，时间（秒），阈值",
+          describe: "取测点在给定的时间范围内数据上升的量是否超过阈值",
+          scene: "测点值的上升速度过快等",
+        },
+        {
+          lab: "Sustain",
+          name: "持续时间",
+          param: "表达式，时间（秒）",
+          describe:
+            "判定状态（表达式成立）持续的时间是否超过给定的时间判断状态持续的时间",
+          scene: "",
+        },
+        {
+          lab: "LastUpdateTime",
+          name: "最近数据时间",
+          param: "测点名",
+          describe: "",
+          scene: "判定离线，状态持续时间等",
+        },
+        {
+          lab: "abs",
+          name: "取绝对值",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "acos",
+          name: "反余弦",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "asin",
+          name: "反正弦",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "atan",
+          name: "反正切",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "atan2",
+          name: "xy坐标转为极坐标",
+          param: "x,y",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "ceiling",
+          name: "向上取整",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "cos",
+          name: "余弦",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "cosh",
+          name: "双曲线余弦",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "exp",
+          name: "欧拉数 e 的 double 次幂的值",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "floor",
+          name: "向下取整",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "log",
+          name: "自然对数",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "log10",
+          name: "底数为 10 的对数",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "max",
+          name: "比较最大值",
+          param: "double a, double b",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "min",
+          name: "比较最小值",
+          param: "double a, double b",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "pow",
+          name: "返回第一个参数的第二个参数次幂的值",
+          param: "double a, double b",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "round",
+          name: "返回最接近参数的 long,或int",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "sign",
+          name: "负数返回-1.0,整数返回1.0,0返回0.0",
+          param: "float f/double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "sin",
+          name: "三角正弦值",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "sinh",
+          name: "双曲线正弦",
+          param: "double x",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "sqrt",
+          name: "正平方根",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "tan",
+          name: "正切",
+          param: "double a",
+          describe: "",
+          scene: "",
+        },
+        {
+          lab: "tanh",
+          name: "双曲线余弦",
+          param: "double x",
+          describe: "",
+          scene: "",
+        },
+        { lab: "PI", name: "圆周率", param: "", describe: "", scene: "" },
+        { lab: "E", name: "自然对数", param: "", describe: "", scene: "" },
+      ],
+      operator: [
+        "+",
+        "-",
+        "*",
+        "/",
+        "(",
+        ")",
+        ">",
+        ">=",
+        "<",
+        "<=",
+        "==",
+        "!=",
+        "&&",
+        "||",
+        "!",
+        "%",
+        "true",
+        "false",
+        ".",
+      ],
+      rules: {
+        name: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
+        category: [
+          { required: true, message: "请选择报警类别", trigger: "change" },
+        ],
+        rank: [
+          { required: true, message: "请选择报警级别", trigger: "change" },
+        ],
+        station: [{ required: true, message: "请选择风场", trigger: "change" }],
+        expression: [
+          { required: true, message: "表达式不能为空", trigger: "change" },
+        ],
+      },
+    };
+  },
+  props: {
+    isVisible: Boolean,
+    dialogStatus: Number, //窗口状态：0-新增；1-修改；2-查看
+    rowData: Object,
+  },
+  watch: {
+    isVisible(val) {
+      this.visible = val;
+    },
+    rowData(val) {
+      this.form = JSON.parse(JSON.stringify(val));
+    },
+    "form.station": {
+      handler(val) {
+        if (this.form.category !== undefined && val !== undefined) {
+          if (this.form.category === "1") {
+            // 风机
+            if (this.form.modelId !== undefined) {
+              this.queryWindturbine_AI_DI_Point(val, this.form.modelId);
+            }
+          } else if (this.form.category === "2") {
+            // 电气
+            this.queryElectrical_AI_DI_Point(val);
+          }
+        }
+        // 场站变更 - 加载设备类型
+        if (val !== undefined) {
+          let sel_station = this.s_modelList.filter(function (item) {
+            return item.station == val;
+          });
+          if (sel_station.length > 0)
+            this.modelList = sel_station[0].model_list;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    "form.category": {
+      handler(val) {
+        if (val !== undefined) {
+          if (val === "1") {
+            // 风机
+            if (
+              this.form.station !== undefined &&
+              this.form.modelId !== undefined
+            ) {
+              this.queryWindturbine_AI_DI_Point(
+                this.form.station,
+                this.form.modelId
+              );
+            }
+          } else if (val === "2") {
+            // 电气
+            if (this.form.station !== undefined) {
+              this.queryElectrical_AI_DI_Point(this.form.station);
+            }
+          }
+        }
+        // 报警类别变更
+        if (this.form.category === "1") {
+          this.isWindturbine = true;
+        } else if (this.form.category === "2") {
+          this.isWindturbine = false;
+          this.form.modelId = "";
+          this.form.relatedParts = "";
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    "form.modelId": {
+      handler(val) {
+        if (this.form.station !== undefined && val !== undefined) {
+          this.queryWindturbine_AI_DI_Point(this.form.station, val);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    // 点击取消事件
+    btnCancelClickHandle() {
+      this.visible = false;
+      this.$emit("cbFunc", this.visible);
+    },
+    // 窗口关闭前的回调
+    dialogBeforeClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+          this.visible = false;
+          this.$emit("cbFunc", this.visible);
+        })
+        .catch((_) => {});
+    },
+    // 查询风场AI、DI测点
+    queryWindturbine_AI_DI_Point(station, modelId) {
+      // 获取AI测点
+      fetchAIPointList(station, modelId).then((res) => {
+        res.sort(function (a, b) {
+          if (a.uniformCode < b.uniformCode) {
+            return -1;
+          }
+          if (a.uniformCode > b.uniformCode) {
+            return 1;
+          }
+          return 0;
+        });
+
+        this.AIPointList = res;
+        this.AIDataSource = res;
+      });
+      // 获取DI测点
+      fetchDIPointList(station, modelId).then((res) => {
+        res.sort(function (a, b) {
+          if (a.uniformCode < b.uniformCode) {
+            return -1;
+          }
+          if (a.uniformCode > b.uniformCode) {
+            return 1;
+          }
+          return 0;
+        });
+
+        this.DIPointList = res;
+        this.DIDataSource = res;
+      });
+    },
+
+    // 函数点击事件
+    tabFuncRowClickHandle(row) {
+      let _row = this.deepClone(row);
+      let elInput = document.getElementById("expressionInput");
+      let startPos = elInput.selectionStart; //第0个字符到选中的字符
+      let endPos = elInput.selectionEnd; //选中字符到末尾字符
+      if (startPos === undefined || endPos === undefined) return;
+      let txt = elInput.value;
+      let func;
+      if (
+        row.lab === "MR" ||
+        row.lab === "MAR" ||
+        row.lab === "RiseExceed" ||
+        row.lab === "Sustain" ||
+        row.lab === "LastUpdateTime"
+      ) {
+        func = row.lab + "()";
+      } else if (row.lab === "PI" || row.lab === "E") {
+        func = "Math." + row.lab;
+      } else {
+        func = "Math." + row.lab + "()";
+      }
+      // 将插值添加到选中光标位置
+      let result = txt.substring(0, startPos) + func + txt.substring(endPos);
+      elInput.value = result;
+      // 重新定义光标位置
+      elInput.focus();
+      if (row.lab === "PI" || row.lab === "E") {
+        elInput.selectionStart = startPos + func.length;
+        elInput.selectionEnd = startPos + func.length;
+      } else {
+        elInput.selectionStart = startPos + func.length - 1;
+        elInput.selectionEnd = startPos + func.length - 1;
+      }
+      this.form.expression = result; // 赋值给表单中的的字段
+    },
+    // 运算符点击事件
+    btnOperatorClickHandle(row) {
+      this.elInputSplit(row);
+    },
+    //提交表单
+    submit() {
+      this.form.expression = document.getElementById("expressionInput").value;
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          let loginUser = sessionStorage.getItem("ms_username");
+          this.form.userName = loginUser;
+
+          this.$confirm("确认关闭？")
+            .then(() => {
+              switch (this.dialogStatus) {
+                //窗口状态：0-新增；1-修改；2-查看
+                case 0:
+                  custombj_postSave(this.form)
+                    .then((response) => {
+                      if (response.data.success) {
+                        this.$message.success("保存成功");
+                        // 关闭窗口
+                        this.visible = false;
+                        this.$emit("cbFunc", this.visible);
+                      } else if (
+                        response.data.status != null &&
+                        response.data.status == 521
+                      ) {
+                        this.$message.error("登陆过期");
+                        this.$router.push("/login");
+                        return;
+                      } else {
+                        this.$message.error(response.data.msg);
+                      }
+                    })
+                    .catch((err) => {
+                      console.log(err);
+                    });
+                  break;
+                case 1:
+                  custombj_postSave(this.form)
+                    .then((response) => {
+                      if (response.data.success) {
+                        this.$message.success("保存成功");
+                        // 关闭窗口
+                        this.visible = false;
+                        this.$emit("cbFunc", this.visible);
+                      } else if (
+                        response.data.status != null &&
+                        response.data.status == 521
+                      ) {
+                        this.$message.error("登陆过期");
+                        this.$router.push("/login");
+                        return;
+                      } else {
+                        this.$message.error(response.data.msg);
+                      }
+                    })
+                    .catch((err) => {
+                      console.log(err);
+                    });
+                  break;
+                default:
+                  // 关闭窗口
+                  this.visible = false;
+                  this.$emit("cbFunc", this.visible);
+                  break;
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        }
+      });
+    },
+    // 窗口打开事件 - 做重置表单操作
+    dialogOpenHandle() {
+      // 重置表单
+      if (this.dialogStatus === 0) {
+        this.isWindturbine = true;
+        (this.AIDataSource = []),
+          (this.DIDataSource = []),
+          (this.AIPointList = []),
+          (this.DIPointList = []),
+          (this.AIPointSearch = ""),
+          (this.DIPointSearch = ""),
+          (this.form = { enabled: "1" });
+        if (this.$refs["form"] != undefined) {
+          this.$refs["form"].resetFields();
+        }
+      } else {
+        this.AIPointSearch = "";
+        this.DIPointSearch = "";
+        if (this.form.category === "1") {
+          this.isWindturbine = true;
+        } else if (this.form.category === "2") {
+          this.isWindturbine = false;
+        }
+      }
+
+      // 获取关联部件
+      fetchRelatePart().then((res) => {
+        this.relatePartList = res;
+      });
+    },
+    // 窗口关闭事件 - 做重置表单操作
+    dialogCloseHandle() {
+      // 重置表单
+      if (this.dialogStatus === 0) {
+        this.isWindturbine = true;
+        (this.AIDataSource = []),
+          (this.DIDataSource = []),
+          (this.AIPointList = []),
+          (this.DIPointList = []),
+          (this.AIPointSearch = ""),
+          (this.DIPointSearch = ""),
+          (this.form = { enabled: "1" });
+        if (this.$refs["form"] != undefined) {
+          this.$refs["form"].resetFields();
+        }
+      } else {
+        this.AIPointSearch = "";
+        this.DIPointSearch = "";
+        if (this.form.category === "1") {
+          this.isWindturbine = true;
+        } else if (this.form.category === "2") {
+          this.isWindturbine = false;
+        }
+      }
+    },
+    // AI测点模糊查询
+    AIInputChange() {
+      this.AIPointList = this.AIDataSource.filter((i) => {
+        return i.name.indexOf(this.AIPointSearch) != -1;
+      });
+    },
+    // DI测点模糊查询
+    DIInputChange() {
+      this.DIPointList = this.DIDataSource.filter((i) => {
+        return i.name.indexOf(this.DIPointSearch) != -1;
+      });
+    },
+    tbAI_DBClickHandle(row) {
+      this.elInputSplit(row.uniformCode);
+    },
+    tbDI_DBClickHandle(row) {
+      this.elInputSplit(row.uniformCode);
+    },
+    deepClone(obj) {
+      let _obj = JSON.stringify(obj),
+        objClone = JSON.parse(_obj);
+      return objClone;
+    },
+    // 表达式字符串拼接
+    elInputSplit(val) {
+      let elInput = document.getElementById("expressionInput");
+      let startPos = elInput.selectionStart;
+      let endPos = elInput.selectionEnd;
+      if (startPos === undefined || endPos === undefined) return;
+      let txt = elInput.value;
+      let txtSplit = val;
+      let result =
+        txt.substring(0, startPos) + txtSplit + txt.substring(endPos);
+      elInput.value = result;
+      elInput.focus();
+      elInput.selectionStart = startPos + txtSplit.length;
+      elInput.selectionEnd = startPos + txtSplit.length;
+      // this.form.expression = result;
+    },
+  },
+};
+</script>
+<style>
+.col-box {
+  display: flex;
+  flex-direction: column;
+}
+.select-mini {
+  width: 120px;
+}
+.el-tabs__content {
+  padding: 0 !important;
+}
+.el-tabs--border-card {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.border {
+  border: solid red 1px;
+}
+.el-table--mini td {
+  padding: 3px 0;
+}
+.el-button-group .el-button--primary {
+  border: none;
+}
+.el-form--label-top .el-form-item__label {
+  padding: 0;
+}
+</style>

src/views/rule/list.vue

@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <div class="crumbs">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>
+          <i class="el-icon-lx-cascades"></i>自定义报警
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="container">
+      <el-row type="flex" justify="space-between">
+        <div class="handle-box" style="margin-bottom:10px">
+          <el-button
+            type="primary"
+            icon="el-icon-lx-add"
+            class="handle-edit mr10"
+            @click="handleInsert"
+          >新增记录</el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            class="handle-refresh mr10"
+            @click="btnRefreshClickHandle"
+          >刷新</el-button>
+          <span>
+            <span class="handle-waring" style="margin:0 10px">{{total}}</span>条配置规则
+          </span>
+        </div>
+        <div style="display:flex;flex-direction:row;margin-bottom:10px">
+          <el-input placeholder="请输入名称" v-model="query.name" class="mr10" clearable></el-input>
+          <el-button
+            icon="el-icon-search"
+            type="primary"
+            size="mini"
+            width="100"
+            @click="btnTableQueryClickHandle"
+          >搜索</el-button>
+        </div>
+      </el-row>
+      <el-table
+        :data="tableData"
+        border
+        class="table"
+        ref="multipleTable"
+        header-cell-name="table-header"
+        :highlight-current-row="true"
+      >
+         <el-table-column label="名称" align="left" prop="name" min-width="50" />
+          <el-table-column label="描述" align="left" prop="description" />
+        <el-table-column label="表达式" align="left" prop="expression" />
+        <el-table-column label="级别" align="center" prop="rank" min-width="20">
+          <template slot-scope="scope">
+             <span>{{scope.row.rank | rankConvert}}</span>
+            </template>
+        </el-table-column><el-table-column label="工艺环节" align="center" prop="parts" min-width="30">
+          <template slot-scope="scope">
+            <span>{{scope.row.part | partConvert}}</span>
+          </template>
+        </el-table-column>
+          <el-table-column label="是否启用" align="center" prop="enabled" min-width="20">
+          <template slot-scope="scope">{{scope.row.enabled | enabledConvert}}</template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              plain
+              round
+              size="mini"
+              icon="el-icon-lx-edit"
+              @click="handleEditClick(scope.$index, scope.row)"
+            >编辑</el-button>
+            <!-- <el-button type="primary" plain round size="mini" icon="el-icon-search" @click="handleViewClick(scope.$index, scope.row)">查看</el-button> -->
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          background
+          layout="total, prev, pager, next"
+          :current-page="query.pagenum"
+          :page-size="query.pagesize"
+          :total="total"
+          @current-change="handlePageChange"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 编辑弹窗 -->
+    <edit_form
+      :isVisible="editVisible"
+      :dialogStatus="dialogStatus"
+      :rowData="rowData"
+      @cbFunc="cbFunc"
+    />
+  </div>
+</template>
+<script>
+import axios from "axios";
+import { alert_rule_fetchTableData } from "../../api/requestAPI";
+import edit_form from "./edit_form";
+
+const tHeader = [
+  "id",
+  "规则名称",
+  "报警类别（1：风气；2：电气）",
+  "报警级别（1：低；2：中低；3：中；4：中高；5：高）",
+  "是否启用（0：停用；1：启用）",
+  "风场",
+  "风机类型",
+  "所属部件",
+  "表达式",
+  "规则描述",
+];
+export default {
+  name: "basetable3",
+  components: {
+    edit_form,
+  },
+  data() {
+    return {
+      editVisible: false,
+      dialogStatus: 0, //窗口状态：0-新增；1-修改；2-查看
+      query: {
+        pagenum: 1,
+        pagesize: 20,
+        name: "",
+      },
+      tableData: [],
+      total: 0,
+      rowData: {
+        name: "",
+        description: "",
+        expression: "",
+        rank: "",
+        part: "",
+        enabled: 1,
+      },
+      exportShow: false,
+      thead: {
+        id: "id",
+        规则名称: "name",
+        "报警类别（1：风气；2：电气）": "category",
+        "报警级别（1：低；2：中低；3：中；4：中高；5：高）": "rank",
+        "是否启用（0：停用；1：启用）": "enabled",        
+        所属部件: "parts",
+        表达式: "expression",
+        规则描述: "description",
+      },
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      //获取列表数据
+      alert_rule_fetchTableData(this.query)
+        .then((res) => {
+          if (res.status == 5000 || res.status == 5001) {
+            this.$message.error("未登录或登录失效");
+            this.$router.push("/login");
+            return;
+          } else if (res.status == 5002) {
+            this.$message.error(res.msg);
+          } else {
+            this.tableData = res.data.dataList;
+            this.total = res.data.total;
+            console.log(res.data)
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          this.$message.error("与服务器断开连接");
+        });
+    },
+    // 点击新增
+    handleInsert() {
+      this.dialogStatus = 0;
+      this.rowData = {};
+      this.editVisible = true;
+    },
+    // 编辑事件
+    handleEditClick(index, row) {
+      this.dialogStatus = 1;
+      this.rowData = row;
+
+      this.editVisible = true;
+    },
+
+    // 条件查询表格数据
+    btnTableQueryClickHandle() {
+      this.getData();
+    },
+    // 分页导航
+    handlePageChange(val) {
+      this.$set(this.query, "pagenum", val);
+      this.getData();
+    },
+    // 列表刷新
+    btnRefreshClickHandle() {
+      this.query = {
+        pagenum: 1,
+        pagesize: 20,
+        name: "",
+      };
+      this.getData();
+    },
+    // 接收窗体返回
+    cbFunc(val) {
+      this.editVisible = val;
+      this.getData();
+    },
+ 
+
+  },
+  filters: {
+    // 级别
+    rankConvert(val) {
+      if (val === 1) {
+        return "低";
+      } else if (val === 2) {
+        return "中低";
+      } else if (val === 3) {
+        return "中";
+      } else if (val === 4) {
+        return "中高";
+      } else if (val === 5) {
+        return "高";
+      }
+    },
+  
+    // 状态
+    enabledConvert(val) {
+      if (val === false) {
+        return "停用";
+      } else if (val === true) {
+        return "启用";
+      }
+    },
+    // 关联部件
+    partConvert(val) {
+      switch (val) {
+        case "pretreatment":
+          return "预处理";
+          break;
+        case "drying":
+          return "干燥";
+          break;
+        case "evaporation":
+          return "蒸发";
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.mr10 {
+  margin-right: 10px;
+}
+.el-button + .el-button {
+  margin-left: 10px;
+}
+</style>

vue.config.js

@@ -1,71 +1,15 @@
-const webpack = require("webpack");
-const path = require("path");
-const CompressionWebpackPlugin = require("compression-webpack-plugin");
-
-let env = process.env.NODE_ENV;
 module.exports = {
-	// 如果是hash模式
-	publicPath: env !== "development" ? "./" : "/",
-	
-	// 如果是history模式
-	// publicPath: env !== "development" ? "/" : "/",
-
-	// 静态资源目录 (js, css, img, fonts)
-	assetsDir: "assets",
-
-	//关键点在这  原来的 Compiler 换成了 runtimeCompiler
-	runtimeCompiler: true,
-
-	//设置打包之后是否打包.map文件
-	productionSourceMap: env !== "development" ? false : true,
-
-	// 输出文件目录
-	outputDir: "dist",
-	// 让样式找到源
-	css: {
-		sourceMap: true
-	},
-	devServer: {
-		port: 8083,
-		host: "0.0.0.0",
-		hot: true,
-		open: false,
-		disableHostCheck: true,
-		proxy: {
-			"/api": {
-				target: "127.0.0.1", //对应跨域的接口
-				changeOrigin: true,
-				ws: false,
-				pathRewrite: {
-					"^/api": ""
-				}
-			},
-			'/restfull': {
-                target: "http://192.168.0.238:8033",//"http://172.168.1.8:8075", // 报警服务
-                changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
-                pathRewrite: {  // 路径重写，
-                    '^/restfull': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
-                }
-            },
-		}
-	},
-
-	chainWebpack: config => {
-		config.resolve.alias.set("@", path.resolve(__dirname, "./src"));
-	},
-
-	configureWebpack: config => {
-		if (env !== "development") {
-			// 配置打包 压缩js
-			config.plugins.push(
-				new CompressionWebpackPlugin({
-					algorithm: "gzip",
-					test: /\.js$|\.html$|.\css/, //匹配文件名
-					threshold: 10240, //对超过10k的数据压缩
-					deleteOriginalAssets: false, //不删除源文件
-					minRatio: 0.8
-				})
-			);
-		}
-	}
-};
+    publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
+    devServer: {
+      proxy: {
+        "/wisdom-water": {
+          ws:false,
+          target: "http://localhost:8033", // 本地请求后端真正的地址，只有本地开发时才会做代理，上线不执行这段代码
+          changeOrigin: true,
+          pathRewrite: { // 路径重写
+            "^/wisdom-water": "/"
+          }
+        }
+      }
+    }
+  };