2021-11-29

src/assets/images/alarm/u5665.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="50px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1 -120 )">
+    <path d="M 181 120  C 181 120  185 120.5  185 120.5  C 185 120.5  201 145  201 145  C 201 145  185 169.5  185 169.5  C 185 169.5  181 170  181 170  C 181 170  3 170  3 170  C 1.88 170  1 169.12  1 168  C 1 168  1 122  1 122  C 1 120.88  1.88 120  3 120  C 3 120  181 120  181 120  Z " fill-rule="nonzero" fill="#9ea7b4" stroke="none" />
+  </g>
+</svg>

src/components/erp/ProductionDonut.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-11 14:54:18
- * @LastEditTime: 2021-11-26 17:40:54
+ * @LastEditTime: 2021-11-29 18:21:20
  * @LastEditors: Please set LastEditors
  * @Description: 生产情况的环形图
  * @FilePath: \hyyfClient\src\components\erp\ProductionDonut.vue
@@ -44,7 +44,7 @@ export default {
       let options = {
         title: {
           text: this.stockName,
-          x: 47,
+          x: 35,
           y: 175,
         },
         grid: {
@@ -72,7 +72,7 @@ export default {
         graphic: [
           {
             type: "text",
-            left: "12%",
+            left: "9%",
             top: "38%",
             style: {
               text: (parseFloat(this.stockQuantity) * 100).toFixed(2) + "%",

src/router/ChildrenRouters.js

@@ -234,6 +234,16 @@ const childrenRouters = [
       parentName: '违规报警'
     }
   },
+  {
+    path: '/alarmSet',
+    name: 'AlarmSet',
+    component: () => import('../views/Alarm/AlarmSet.vue'),
+    meta: {
+      title: '报警阈值设置',
+      permission: 'alarmSet',
+      parentName: '违规报警'
+    }
+  },
 
   /**
    *

src/views/Alarm/AlarmSet.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 15:06:41
+ * @LastEditTime: 2021-11-29 18:19:28
+ * @LastEditors: Please set LastEditors
+ * @Description: 报警阈值设置
+ * @FilePath: \hyyfClient\src\views\Alarm\AlarmSet.vue
+-->
+<template>
+  <div class="alarm-set">
+    <div class="top-blank">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+    <div class="regular-set">
+      <div class="title">
+        <set-title :title="titles[0]"></set-title>
+      </div>
+      <div class="regular-left"></div>
+      <div class="right">
+        <regular-form></regular-form>
+      </div>
+    </div>
+    <div class="regular-set">
+      <div class="title">
+        <set-title :title="titles[1]"></set-title>
+      </div>
+      <div class="regular-left"></div>
+      <div class="right">
+        <alarm-form></alarm-form>
+        <alarm-table></alarm-table>
+        <div class="submit-btn">
+          <el-button type="primary">提交</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import SetTitle from "./alarm-set/SetTitle.vue";
+import RegularForm from "./alarm-set/RegularForm.vue";
+import AlarmForm from "./alarm-set/AlarmForm.vue";
+import AlarmTable from "./alarm-set/alarm-table.vue";
+
+export default {
+  components: {
+    SetTitle,
+    RegularForm,
+    AlarmForm,
+    AlarmTable,
+  },
+  data() {
+    return {
+      titles: ["常规设置", "报警设置"],
+    };
+  },
+};
+</script>
+<style scoped>
+.top-blank {
+  height: 40px;
+  /* background-color: red; */
+  display: flex;
+}
+.left {
+  width: 239px;
+  height: 100%;
+  border-right: 1px solid #ccc;
+}
+.right {
+  width: calc(100% - 239px);
+  height: 100%;
+  background-color: #fff;
+  padding: 60px 200px 60px 80px;
+}
+/** 常规设置 */
+.regular-set {
+  /* height: 400px; */
+  display: flex;
+  position: relative;
+}
+.title {
+  width: 260px;
+  position: absolute;
+}
+.regular-left {
+  width: 239px;
+  border-right: 1px solid #ccc;
+}
+.submit-btn {
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/Alarm/alarm-set/AlarmForm.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 16:41:38
+ * @LastEditTime: 2021-11-29 17:23:48
+ * @LastEditors: Please set LastEditors
+ * @Description: 报警设置的 各个报警号码
+ * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\AlarmForm.vue
+-->
+<template>
+  <div class="alarm-form">
+    <el-form
+      :model="alalrForm"
+      ref="alalrForm"
+      label-width="140px"
+      class="demo-dynamic"
+    >
+      <!-- 一级报警 -->
+      <el-form-item prop="first" label="一级报警：">
+        <el-input
+          v-model="alalrForm.first"
+          style="width: 200px"
+          disabled
+        ></el-input>
+      </el-form-item>
+
+      <!-- 二级报警 -->
+      <el-form-item prop="second" label="二级报警：">
+        <el-input v-model="alalrForm.second" style="width: 200px" disabled>
+        </el-input>
+      </el-form-item>
+      <div class="rows">
+        <el-form-item
+          v-for="(domain, index) in alalrForm.secondPhones"
+          label="接收号码："
+          :key="domain.key"
+          :prop="'secondPhones.' + index + '.value'"
+        >
+          <el-input v-model="domain.value" style="width: 200px"></el-input>
+        </el-form-item>
+        <div class="add-btn">
+          <el-button @click.prevent="addPhones('secondPhones')">新增</el-button>
+        </div>
+      </div>
+
+      <!-- 三级报警 -->
+      <el-form-item prop="third" label="三级报警：">
+        <el-input
+          v-model="alalrForm.third"
+          style="width: 200px"
+          disabled
+        ></el-input>
+      </el-form-item>
+      <div class="rows">
+        <el-form-item
+          v-for="(domain, index) in alalrForm.thirdPhones"
+          label="接收号码："
+          :key="domain.key"
+          :prop="'domains.' + index + '.value'"
+        >
+          <el-input v-model="domain.value" style="width: 200px"></el-input>
+        </el-form-item>
+        <div class="add-btn">
+          <el-button @click.prevent="addPhones('thirdPhones')">新增</el-button>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      alalrForm: {
+        secondPhones: [
+          {
+            phone: "",
+            key: new Date(),
+          },
+        ],
+        thirdPhones: [
+          {
+            phone: "",
+            key: new Date(),
+          },
+        ],
+        first: "平台消息",
+        second: "短信通知",
+        third: "电话通知",
+      },
+    };
+  },
+  methods: {
+    addPhones(value) {
+      this.alalrForm[value].push({
+        phone: "",
+        key: Date.now(),
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.rows {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 90px;
+}
+.add-btn {
+  padding-left: 20px;
+}
+</style>

src/views/Alarm/alarm-set/RegularForm.vue

@@ -0,0 +1,92 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 15:55:20
+ * @LastEditTime: 2021-11-29 16:49:29
+ * @LastEditors: Please set LastEditors
+ * @Description: 常规设置的每一项
+ * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\RegularForm.vue
+-->
+<template>
+  <div class="regular-form">
+    <el-form label-width="140px">
+      <div class="row">
+        <el-form-item label="高温报警阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">℃</span>
+        </el-form-item>
+        <el-form-item label="化学需氧量阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">mg/L</span>
+        </el-form-item>
+      </div>
+
+      <div class="row">
+        <el-form-item label="低温报警阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">℃</span>
+        </el-form-item>
+        <el-form-item label="氨氮量阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">mg/L</span>
+        </el-form-item>
+      </div>
+
+      <div class="row">
+        <el-form-item label="高湿度报警阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">%</span>
+        </el-form-item>
+        <el-form-item label="总磷量阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">mg/L</span>
+        </el-form-item>
+      </div>
+
+      <div class="row">
+        <el-form-item label="低湿度报警阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">%</span>
+        </el-form-item>
+        <el-form-item label="总氮量阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">mg/L</span>
+        </el-form-item>
+      </div>
+
+      <div class="row">
+        <el-form-item label="累计流量阈值：">
+          <el-input style="width: 200px"></el-input>
+          <span class="margin-left">T/HT</span>
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      regularForm: {
+        highTemp: 30,
+        lowTemp: 15,
+        highHumi: 100,
+        lowHumi: 15,
+        totalFlow: 15,
+        oxygen: 15,
+        ammonia: 15,
+        phosphorus: 15,
+        nitrogen: 15,
+      },
+    };
+  },
+};
+</script>
+<style scoped>
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+.margin-left {
+  padding-left: 20px;
+}
+</style>

src/views/Alarm/alarm-set/SetTitle.vue

@@ -0,0 +1,48 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 15:21:54
+ * @LastEditTime: 2021-11-29 15:53:33
+ * @LastEditors: Please set LastEditors
+ * @Description: 报警阈值设置 - 标题
+ * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\SetTitle.vue
+-->
+<template>
+  <div class="set-title">
+    <div class="label"></div>
+    <span>{{ title }}</span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.set-title {
+  background: url("~assets/images/alarm/u5665.svg") no-repeat;
+  background-size: 100% 100%;
+  height: 50px;
+  color: #fff;
+  font-size: 20px;
+  line-height: 48px;
+  padding-left: 30px;
+  position: relative;
+}
+.label {
+  display: inline-block;
+  background: url("~assets/images/alarm/label.svg") no-repeat;
+  background-size: 100% 100%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: calc(50% - 11px);
+}
+.set-title > span {
+  margin-left: 25px;
+}
+</style>

src/views/Alarm/alarm-set/alarm-table.vue

@@ -0,0 +1,208 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 17:27:07
+ * @LastEditTime: 2021-11-29 18:18:00
+ * @LastEditors: Please set LastEditors
+ * @Description: 报警设置的表格
+ * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\alarm-table.vue
+-->
+<template>
+  <div class="alarm-table">
+    <el-table
+      :data="tableData"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px"
+    >
+      <el-table-column prop="id" label="大项" width="180"></el-table-column>
+      <el-table-column prop="name" label="内容"></el-table-column>
+      <el-table-column prop="amount1" label="一级">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="value"
+            active-color="#13ce66"
+            inactive-color="#ccc"
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column prop="amount2" label="二级">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="value"
+            active-color="#13ce66"
+            inactive-color="#ccc"
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column prop="amount3" label="三级">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="value"
+            active-color="#13ce66"
+            inactive-color="#ccc"
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          id: "12987122",
+          name: "王小虎",
+          amount1: "234",
+          amount2: "3.2",
+          amount3: 10,
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12,
+        },
+        {
+          id: "12987124",
+          name: "王小虎",
+          amount1: "324",
+          amount2: "1.9",
+          amount3: 9,
+        },
+        {
+          id: "12987125",
+          name: "王小虎",
+          amount1: "621",
+          amount2: "2.2",
+          amount3: 17,
+        },
+        {
+          id: "12987126",
+          name: "王小虎",
+          amount1: "539",
+          amount2: "4.1",
+          amount3: 15,
+        },
+        {
+          id: "12987122",
+          name: "王小虎",
+          amount1: "234",
+          amount2: "3.2",
+          amount3: 10,
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12,
+        },
+        {
+          id: "12987124",
+          name: "王小虎",
+          amount1: "324",
+          amount2: "1.9",
+          amount3: 9,
+        },
+        {
+          id: "12987125",
+          name: "王小虎",
+          amount1: "621",
+          amount2: "2.2",
+          amount3: 17,
+        },
+        {
+          id: "12987126",
+          name: "王小虎",
+          amount1: "539",
+          amount2: "4.1",
+          amount3: 15,
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12,
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12,
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12,
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12,
+        },
+      ],
+      value: false,
+    };
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      const smallItem = {
+        rowspan: 0,
+        colspan: 0,
+      };
+      if (columnIndex === 0) {
+        if (rowIndex < 2) {
+          if (rowIndex === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1,
+            };
+          } else {
+            return smallItem;
+          }
+        } else if (rowIndex < 6) {
+          if (rowIndex === 2) {
+            return {
+              rowspan: 4,
+              colspan: 1,
+            };
+          } else {
+            return smallItem;
+          }
+        } else if (rowIndex < 11) {
+          if (rowIndex === 6) {
+            return {
+              rowspan: 5,
+              colspan: 1,
+            };
+          } else {
+            return smallItem;
+          }
+        } else {
+          if (rowIndex === 11) {
+            return {
+              rowspan: 3,
+              colspan: 1,
+            };
+          } else {
+            return smallItem;
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+<style scoped></style>

vue.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-11-28 14:36:26
+ * @LastEditTime: 2021-11-29 15:29:40
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\vue.config.js