feat: 变电站

src/components/index/IndexAsideStatic.vue

@@ -193,9 +193,9 @@ export default {
 		});
 	},
 	created(){
-		this.icons.sort(()=>{
-			return (0.5-Math.random())
-		})
+		// this.icons.sort(()=>{
+		// 	return (0.5-Math.random())
+		// })
 	},
 	methods: {
 		collapse() {

src/router/router-static.js

@@ -1,104 +1,114 @@
-import Vue from 'vue';
+import Vue from "vue";
 //配置路由
-import VueRouter from 'vue-router'
+import VueRouter from "vue-router";
 Vue.use(VueRouter);
 //1.创建组件
-import Index from '@/views/index'
-import Home from '@/views/home'
-import Board from '@/views/board'
-import Login from '@/views/login'
-import NotFound from '@/views/404'
-import UpdatePassword from '@/views/update-password'
-import pay from '@/views/pay'
-import register from '@/views/register'
-import center from '@/views/center'
-	import qiye from '@/views/modules/qiye/list'
-	import rainfalldata from '@/views/modules/rainfalldata/list'
-	import rainfalldataforecast from '@/views/modules/rainfalldataforecast/list'
-	import syslog from '@/views/modules/syslog/list'
-
+import Index from "@/views/index";
+import Home from "@/views/home";
+import Board from "@/views/board";
+import Login from "@/views/login";
+import NotFound from "@/views/404";
+import UpdatePassword from "@/views/update-password";
+import pay from "@/views/pay";
+import register from "@/views/register";
+import center from "@/views/center";
+import qiye from "@/views/modules/qiye/list";
+import rainfalldata from "@/views/modules/rainfalldata/list";
+import rainfalldataforecast from "@/views/modules/rainfalldataforecast/list";
+import syslog from "@/views/modules/syslog/list";
+import Station from "@/views/modules/station/list";
 
 //2.配置路由   注意：名字
-export const routes = [{
-	path: '/',
-	name: '系统首页',
-	component: Index,
-	children: [{
-		// 这里不设置值，是把main作为默认页面
-		path: '/',
-		name: '系统首页',
-		component: Home,
-		meta: {icon:'', title:'center', affix: true}
-	}, {
-		path: '/updatePassword',
-		name: '修改密码',
-		component: UpdatePassword,
-		meta: {icon:'', title:'updatePassword'}
-	}, {
-		path: '/pay',
-		name: '支付',
-		component: pay,
-		meta: {icon:'', title:'pay'}
-	}, {
-		path: '/center',
-		name: '个人信息',
-		component: center,
-		meta: {icon:'', title:'center'}
-	}
-	,{
-		path: '/qiye',
-		name: '变电站',
-		component: qiye
-	}
-	,{
-		path: '/rainfalldata',
-		name: '电采暖负荷数据',
-		component: rainfalldata
-	}
-	,{
-		path: '/rainfalldataforecast',
-		name: '电采暖负荷预测',
-		component: rainfalldataforecast
-	}
-	,{
-		path: '/syslog',
-		name: '系统日志',
-		component: syslog
-	}
-	]
-	},
-	{
-		path: '/login',
-		name: 'login',
-		component: Login,
-		meta: {icon:'', title:'login'}
-	},
-	{
-		path: '/board',
-		name: 'board',
-		component: Board,
-		meta: {icon:'', title:'board'}
-	},
-	{
-		path: '/register',
-		name: 'register',
-		component: register,
-		meta: {icon:'', title:'register'}
-	},
-	{
-		path: '*',
-		component: NotFound
-	}
-]
+export const routes = [
+  {
+    path: "/",
+    name: "系统首页",
+    component: Index,
+    children: [
+      {
+        // 这里不设置值，是把main作为默认页面
+        path: "/",
+        name: "系统首页",
+        component: Home,
+        meta: { icon: "", title: "center", affix: true },
+      },
+      {
+        path: "/station",
+        name: "变电站",
+        component: Station,
+      },
+      {
+        path: "/updatePassword",
+        name: "修改密码",
+        component: UpdatePassword,
+        meta: { icon: "", title: "updatePassword" },
+      },
+      {
+        path: "/pay",
+        name: "支付",
+        component: pay,
+        meta: { icon: "", title: "pay" },
+      },
+      {
+        path: "/center",
+        name: "个人信息",
+        component: center,
+        meta: { icon: "", title: "center" },
+      },
+      {
+        path: "/qiye",
+        name: "变电站",
+        component: qiye,
+      },
+      {
+        path: "/rainfalldata",
+        name: "电采暖负荷数据",
+        component: rainfalldata,
+      },
+      {
+        path: "/rainfalldataforecast",
+        name: "电采暖负荷预测",
+        component: rainfalldataforecast,
+      },
+      {
+        path: "/syslog",
+        name: "系统日志",
+        component: syslog,
+      },
+    ],
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: Login,
+    meta: { icon: "", title: "login" },
+  },
+  {
+    path: "/board",
+    name: "board",
+    component: Board,
+    meta: { icon: "", title: "board" },
+  },
+  {
+    path: "/register",
+    name: "register",
+    component: register,
+    meta: { icon: "", title: "register" },
+  },
+  {
+    path: "*",
+    component: NotFound,
+  },
+];
 //3.实例化VueRouter  注意：名字
 const router = new VueRouter({
-	mode: 'hash',
-	/*hash模式改为history*/
-	routes // （缩写）相当于 routes: routes
-})
-const originalPush = VueRouter.prototype.push
+  mode: "hash",
+  /*hash模式改为history*/
+  routes, // （缩写）相当于 routes: routes
+});
+const originalPush = VueRouter.prototype.push;
 //修改原型对象中的push方法
 VueRouter.prototype.push = function push(location) {
-	return originalPush.call(this, location).catch(err => err)
-}
+  return originalPush.call(this, location).catch((err) => err);
+};
 export default router;

src/views/modules/station/components/add-or-update-line.vue

@@ -0,0 +1,600 @@
+<template>
+  <!-- 添加或修改参数配置对话框 -->
+  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-form
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="线路名称" prop="lineName">
+        <el-input
+          v-model="ruleForm.lineName"
+          placeholder="请输入线路名称"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="导线型号" prop="conductMode">
+        <el-input
+          v-model="ruleForm.conductMode"
+          placeholder="请输入导线型号"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="主变容量" prop="mainCapacity">
+        <el-input
+          @change="ruleForm.mainCapacity = parseInt(ruleForm.mainCapacity)"
+          type="number"
+          style="width: 100%"
+          v-model="ruleForm.mainCapacity"
+          placeholder="请输入主变容量"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="负荷报警阀值" prop="alarmThreshold">
+        <el-input
+          @change="ruleForm.alarmThreshold = parseInt(ruleForm.alarmThreshold)"
+          type="number"
+          style="width: 100%"
+          v-model="ruleForm.alarmThreshold"
+          placeholder="请输入负荷报警阀值"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="ruleForm.remark"
+          type="textarea"
+          :disabled="type == 'view'"
+          placeholder="请输入备注"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="onSubmit" v-if="type != 'view'"
+          >确 定</el-button
+        >
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      type: "add", // add, edit, view
+      open: false,
+      ruleForm: {
+        id: undefined,
+        subName: "",
+        voltageLevel: undefined,
+        mainCapacity: undefined,
+        alarmThreshold: undefined,
+        remark: undefined,
+      },
+      rules: {
+        lineName: [
+          { required: true, message: "线路名称不能为空", trigger: "blur" },
+        ],
+        conductMode: [
+          { required: true, message: "导线型号不能为空", trigger: "blur" },
+        ],
+        voltageLevel: [
+          { required: true, message: "电压等级不能为空", trigger: "blur" },
+        ],
+        mainCapacity: [
+          { required: true, message: "主变容量不能为空", trigger: "blur" },
+        ],
+        alarmThreshold: [
+          { required: true, message: "负荷报警阀值不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  props: ["parent"],
+  computed: {
+    title() {
+      return this.type == "add"
+        ? "添加"
+        : this.type == "edit"
+        ? "修改"
+        : "查看";
+    },
+  },
+  methods: {
+    openDialog(id, type) {
+      this.type = type;
+      this.open = true;
+      this.resetForm();
+      if (id) this.info(id);
+    },
+    info(id) {
+      this.$http({
+        url: `line/info/${id}`,
+        method: "get",
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    resetForm() {
+      this.ruleForm = {
+        id: undefined,
+        lineName: "",
+        voltageLevel: undefined,
+        mainCapacity: undefined,
+        alarmThreshold: undefined,
+        remark: undefined,
+      };
+    },
+    // 提交
+    async onSubmit() {
+      await this.$refs["ruleForm"].validate(async (valid) => {
+        if (valid) {
+          await this.$http({
+            url: `line/${!this.ruleForm.id ? "save" : "update"}`,
+            method: "post",
+            data: this.ruleForm,
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+              });
+              this.open = false;
+              this.resetForm();
+              this.parent.search();
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 返回
+    cancel() {
+      this.open = false;
+      this.resetForm();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.addEdit-block {
+  padding: 30px;
+  background: none;
+  width: 100%;
+}
+.add-update-preview {
+  border-radius: 10px;
+  padding: 40px 25% 40px 18%;
+  background: #ffffff;
+  border-color: #eee;
+  border-width: 1px;
+  border-style: solid;
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+
+.search-box {
+  position: absolute;
+}
+
+.el-date-editor.el-input {
+  width: auto;
+}
+.add-update-preview ::v-deep .el-form-item {
+  border: 0px solid #eee;
+  padding: 0;
+  margin: 0 0 22px 0;
+  display: inline-block;
+  width: 100%;
+}
+.add-update-preview .el-form-item ::v-deep .el-form-item__label {
+  padding: 0 10px 0 0;
+  color: #6e6e6e;
+  font-weight: 500;
+  width: 180px;
+  font-size: 15px;
+  line-height: 40px;
+  text-align: right;
+}
+
+.add-update-preview .el-form-item ::v-deep .el-form-item__content {
+  margin-left: 180px;
+}
+.add-update-preview .el-form-item span.text {
+  padding: 0 10px;
+  color: #333;
+  background: none;
+  font-weight: 500;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 40px;
+  min-width: 50%;
+}
+
+.add-update-preview .el-input {
+  width: 100%;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner[readonly="readonly"] {
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number {
+  text-align: left;
+  width: 100%;
+}
+.add-update-preview .el-input-number ::v-deep .el-input__inner {
+  text-align: left;
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
+  text-align: left;
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
+  display: none;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
+  display: none;
+}
+.add-update-preview .el-select {
+  width: 100%;
+}
+.add-update-preview .el-select ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 10px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 34px;
+}
+.add-update-preview .el-date-editor {
+  width: 100%;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview
+  .el-date-editor
+  ::v-deep
+  .el-input__inner[readonly="readonly"] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .viewBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .viewBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .downBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .downBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .unBtn {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 0px;
+  margin: 0 20px 0 0;
+  outline: none;
+  color: #999;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  line-height: 40px;
+  height: 40px;
+  .iconfont {
+    margin: 0 2px;
+    color: #fff;
+    display: none;
+    font-size: 14px;
+    height: 34px;
+  }
+}
+.add-update-preview .unBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview ::v-deep .el-upload--picture-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  line-height: initial;
+  vertical-align: middle;
+}
+
+.add-update-preview ::v-deep .upload .upload-img {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload .el-icon-plus {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+.add-update-preview ::v-deep .el-upload__tip {
+  color: #666;
+  font-size: 15px;
+}
+
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-height: 150px;
+  height: auto;
+}
+.add-update-preview
+  .el-textarea
+  ::v-deep
+  .el-textarea__inner[readonly="readonly"] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  min-width: 400px;
+  height: auto;
+}
+.add-update-preview .el-form-item.btn {
+  padding: 0;
+  margin: 20px 0 0;
+  .btn1 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0356bb;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn1:hover {
+    opacity: 0.8;
+  }
+  .btn2 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #39c9ee;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 34px;
+    }
+  }
+  .btn2:hover {
+    opacity: 0.8;
+  }
+  .btn3 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #6ea0dc;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn3:hover {
+    opacity: 0.8;
+  }
+  .btn4 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #4abcff;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn4:hover {
+    opacity: 0.8;
+  }
+  .btn5 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0977fd;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn5:hover {
+    opacity: 0.8;
+  }
+}
+</style>

src/views/modules/station/components/add-or-update.vue

@@ -0,0 +1,612 @@
+<template>
+  <!-- 添加或修改参数配置对话框 -->
+  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-form
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="变电站名称" prop="subName">
+        <el-input
+          v-model="ruleForm.subName"
+          placeholder="请输入变电站名称"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="电压等级" prop="voltageLevel">
+        <el-input
+          v-model="ruleForm.voltageLevel"
+          placeholder="请输入电压等级"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="主变台数" prop="mainNum">
+        <el-input
+          @change="ruleForm.mainNum = parseInt(ruleForm.mainNum)"
+          type="number"
+          style="width: 100%"
+          v-model="ruleForm.mainNum"
+          placeholder="请输入主变台数"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="主变容量" prop="mainCapacity">
+        <el-input
+          @change="ruleForm.mainCapacity = parseInt(ruleForm.mainCapacity)"
+          type="number"
+          style="width: 100%"
+          v-model="ruleForm.mainCapacity"
+          placeholder="请输入主变容量"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="告警阈值" prop="alarmThreshold">
+        <el-input
+          @change="ruleForm.alarmThreshold = parseInt(ruleForm.alarmThreshold)"
+          type="number"
+          style="width: 100%"
+          v-model="ruleForm.alarmThreshold"
+          placeholder="请输入告警阈值"
+          :disabled="type == 'view'"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="ruleForm.remark"
+          type="textarea"
+          :disabled="type == 'view'"
+          placeholder="请输入备注"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="onSubmit" v-if="type != 'view'"
+          >确 定</el-button
+        >
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      type: "add", // add, edit, view
+      open: false,
+      ruleForm: {
+        id: undefined,
+        subName: "",
+        voltageLevel: undefined,
+        mainNum: undefined,
+        mainCapacity: undefined,
+        alarmThreshold: undefined,
+        remark: undefined,
+      },
+      rules: {
+        subName: [
+          { required: true, message: "变电站名称不能为空", trigger: "blur" },
+        ],
+        voltageLevel: [
+          { required: true, message: "电压等级不能为空", trigger: "blur" },
+        ],
+        mainNum: [
+          { required: true, message: "主变台数不能为空", trigger: "blur" },
+        ],
+        mainCapacity: [
+          { required: true, message: "主变容量不能为空", trigger: "blur" },
+        ],
+        alarmThreshold: [
+          { required: true, message: "告警阈值不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  props: ["parent"],
+  computed: {
+    title() {
+      return this.type == "add"
+        ? "添加"
+        : this.type == "edit"
+        ? "修改"
+        : "查看";
+    },
+  },
+  methods: {
+    openDialog(id, type) {
+      this.type = type;
+      this.open = true;
+      this.resetForm();
+      if (id) this.info(id);
+    },
+    info(id) {
+      this.$http({
+        url: `sub/info/${id}`,
+        method: "get",
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    resetForm() {
+      this.ruleForm = {
+        id: undefined,
+        subName: "",
+        voltageLevel: undefined,
+        mainNum: undefined,
+        mainCapacity: undefined,
+        alarmThreshold: undefined,
+        remark: undefined,
+      };
+    },
+    // 提交
+    async onSubmit() {
+      await this.$refs["ruleForm"].validate(async (valid) => {
+        if (valid) {
+          await this.$http({
+            url: `sub/${!this.ruleForm.id ? "save" : "update"}`,
+            method: "post",
+            data: this.ruleForm,
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+              });
+              this.open = false;
+              this.resetForm();
+              this.parent.search();
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 返回
+    cancel() {
+      this.open = false;
+      this.resetForm();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.addEdit-block {
+  padding: 30px;
+  background: none;
+  width: 100%;
+}
+.add-update-preview {
+  border-radius: 10px;
+  padding: 40px 25% 40px 18%;
+  background: #ffffff;
+  border-color: #eee;
+  border-width: 1px;
+  border-style: solid;
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+
+.search-box {
+  position: absolute;
+}
+
+.el-date-editor.el-input {
+  width: auto;
+}
+.add-update-preview ::v-deep .el-form-item {
+  border: 0px solid #eee;
+  padding: 0;
+  margin: 0 0 22px 0;
+  display: inline-block;
+  width: 100%;
+}
+.add-update-preview .el-form-item ::v-deep .el-form-item__label {
+  padding: 0 10px 0 0;
+  color: #6e6e6e;
+  font-weight: 500;
+  width: 180px;
+  font-size: 15px;
+  line-height: 40px;
+  text-align: right;
+}
+
+.add-update-preview .el-form-item ::v-deep .el-form-item__content {
+  margin-left: 180px;
+}
+.add-update-preview .el-form-item span.text {
+  padding: 0 10px;
+  color: #333;
+  background: none;
+  font-weight: 500;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 40px;
+  min-width: 50%;
+}
+
+.add-update-preview .el-input {
+  width: 100%;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner[readonly="readonly"] {
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number {
+  text-align: left;
+  width: 100%;
+}
+.add-update-preview .el-input-number ::v-deep .el-input__inner {
+  text-align: left;
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
+  text-align: left;
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
+  display: none;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
+  display: none;
+}
+.add-update-preview .el-select {
+  width: 100%;
+}
+.add-update-preview .el-select ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 10px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 34px;
+}
+.add-update-preview .el-date-editor {
+  width: 100%;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview
+  .el-date-editor
+  ::v-deep
+  .el-input__inner[readonly="readonly"] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .viewBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .viewBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .downBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .downBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .unBtn {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 0px;
+  margin: 0 20px 0 0;
+  outline: none;
+  color: #999;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  line-height: 40px;
+  height: 40px;
+  .iconfont {
+    margin: 0 2px;
+    color: #fff;
+    display: none;
+    font-size: 14px;
+    height: 34px;
+  }
+}
+.add-update-preview .unBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview ::v-deep .el-upload--picture-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  line-height: initial;
+  vertical-align: middle;
+}
+
+.add-update-preview ::v-deep .upload .upload-img {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload .el-icon-plus {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+.add-update-preview ::v-deep .el-upload__tip {
+  color: #666;
+  font-size: 15px;
+}
+
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-height: 150px;
+  height: auto;
+}
+.add-update-preview
+  .el-textarea
+  ::v-deep
+  .el-textarea__inner[readonly="readonly"] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  min-width: 400px;
+  height: auto;
+}
+.add-update-preview .el-form-item.btn {
+  padding: 0;
+  margin: 20px 0 0;
+  .btn1 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0356bb;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn1:hover {
+    opacity: 0.8;
+  }
+  .btn2 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #39c9ee;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 34px;
+    }
+  }
+  .btn2:hover {
+    opacity: 0.8;
+  }
+  .btn3 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #6ea0dc;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn3:hover {
+    opacity: 0.8;
+  }
+  .btn4 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #4abcff;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn4:hover {
+    opacity: 0.8;
+  }
+  .btn5 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0977fd;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn5:hover {
+    opacity: 0.8;
+  }
+}
+</style>