设备保护

src/views/ems/site/sbbh/AddDevice.vue

@@ -0,0 +1,584 @@
+<template>
+  <el-dialog
+    v-loading="loading"
+    width="90%"
+    :visible.sync="dialogTableVisible"
+    class="ems-dialog"
+    title="保护方案"
+    :close-on-click-modal="false"
+    :show-close="false"
+  >
+    <el-form
+      v-loading="loading > 0"
+      ref="addTempForm"
+      :model="formData"
+      :rules="rules"
+      size="medium"
+      label-width="140px"
+    >
+      <el-form-item label="站点" prop="siteId">
+        <el-select
+          v-model="formData.siteId"
+          placeholder="请选择"
+          :style="{ width: '50%' }"
+          @change="changeType"
+        >
+          <el-option
+            :label="item.siteName"
+            :value="item.siteId"
+            v-for="(item, index) in siteList"
+            :key="index + 'siteOptions'"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备保护名称" prop="faultName">
+        <el-input
+          v-model="formData.faultName"
+          placeholder="请输入"
+          clearable
+          :style="{ width: '50%' }"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="是否告警" prop="isAlert">
+        <el-checkbox
+          v-model="formData.isAlert"
+          :true-label="1"
+          :false-label="0"
+        ></el-checkbox>
+      </el-form-item>
+      <el-form-item label="告警等级" prop="faultLevel">
+        <el-radio-group v-model="formData.faultLevel" :style="{ width: '50%' }">
+          <el-radio :label="1">等级1</el-radio>
+          <el-radio :label="2">等级2</el-radio>
+          <el-radio :label="3">等级3</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <div class="items-container">
+        <div class="item-title">
+          保护前提:
+          <div style="display: inline-block; margin-left: 20px">
+            延时：<el-input
+              v-model="formData.faultDelaySeconds"
+              placeholder="请输入"
+              clearable
+              :style="{ width: '200px', display: 'inline-block' }"
+            >
+            </el-input>
+          </div>
+        </div>
+        <div>
+          <el-button
+            @click.native.prevent="addRow('protectionSettings')"
+            block
+            type="primary"
+            size="mini"
+            style="margin-bottom: 20px"
+          >
+            新增保护前提
+          </el-button>
+        </div>
+        <div class="item-content">
+          <div class="time-lists-container">
+            <div class="time-lists time-lists-title">
+              <div>设备类型</div>
+              <div>点位</div>
+              <div>故障值比较符号</div>
+              <div>故障值</div>
+              <div>释放值比较符号</div>
+              <div>释放值</div>
+              <div>关系</div>
+              <div>操作</div>
+            </div>
+            <div
+              class="time-lists"
+              v-for="(item, index) in protectionSettings"
+              :key="'protectionSettings' + index"
+            >
+              <div>
+                <el-select
+                  v-model="item.deviceCategory"
+                  placeholder="请选择设备类型"
+                >
+                  <el-option
+                    v-for="(value, key) in deviceCategoryList"
+                    :key="key + 'deviceCategoryList'"
+                    :label="value.name"
+                    :value="value.code"
+                  ></el-option>
+                </el-select>
+              </div>
+              <div>
+                <el-autocomplete
+                  v-model="item.point"
+                  placeholder="请输入点位"
+                  clearable
+                  :fetch-suggestions="
+                    (q, c) =>
+                      querySearchAsync(q, c, index, 'protectionSettings')
+                  "
+                  @select="(v) => handleSelect(v, index, 'protectionSettings')"
+                ></el-autocomplete>
+              </div>
+
+              <div>
+                <el-select v-model="item.faultOperator" placeholder="请选择">
+                  <el-option
+                    v-for="(value, key) in comparisonOperatorOptions"
+                    :key="key + 'faultOperator'"
+                    :label="key"
+                    :value="value"
+                  ></el-option>
+                </el-select>
+              </div>
+              <div>
+                <el-input placeholder="请输入故障值" v-model="item.faultValue">
+                </el-input>
+              </div>
+              <div>
+                <el-select v-model="item.releaseOperator" placeholder="请选择">
+                  <el-option
+                    v-for="(value, key) in comparisonOperatorOptions"
+                    :key="key + 'releaseOperator'"
+                    :label="key"
+                    :value="value"
+                  ></el-option>
+                </el-select>
+              </div>
+              <div>
+                <el-input
+                  placeholder="请输入释放值"
+                  v-model="item.releaseValue"
+                >
+                </el-input>
+              </div>
+              <div>
+                <el-select v-model="item.relation" placeholder="请选择">
+                  <el-option
+                    v-for="(value, key) in relationWithPoint"
+                    :key="key + 'relation'"
+                    :label="key"
+                    :value="value"
+                  ></el-option>
+                </el-select>
+              </div>
+              <div>
+                <el-button
+                  @click.native.prevent="deleteRow(index)"
+                  type="warning"
+                  size="mini"
+                >
+                  删除
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="items-container">
+        <div class="item-title">
+          保护方案:
+          <div style="display: inline-block; margin-left: 20px">
+            延时：<el-input
+              v-model="formData.faultDelaySeconds"
+              placeholder="请输入"
+              clearable
+              :style="{ width: '200px', display: 'inline-block' }"
+            >
+            </el-input>
+          </div>
+        </div>
+        <div>
+          <el-button
+            @click.native.prevent="addRow('protectionPlan')"
+            block
+            type="primary"
+            size="mini"
+            style="margin-bottom: 20px"
+          >
+            新增保护方案
+          </el-button>
+        </div>
+        <div class="item-content">
+          <div class="time-lists-container">
+            <div class="time-lists time-lists-title">
+              <div>设备类型</div>
+              <div>点位</div>
+              <div>故障值比较符号</div>
+              <div>故障值</div>
+              <div>操作</div>
+            </div>
+            <div
+              class="time-lists"
+              v-for="(item, index) in protectionPlan"
+              :key="'protectionPlan' + index"
+            >
+              <div>
+                <el-select
+                  v-model="item.deviceCategory"
+                  placeholder="请选择设备类型"
+                >
+                  <el-option
+                    v-for="(value, key) in deviceCategoryList"
+                    :key="key + 'deviceCategoryList'"
+                    :label="value.name"
+                    :value="value.code"
+                  ></el-option>
+                </el-select>
+              </div>
+              <div>
+                <el-autocomplete
+                  v-model="item.point"
+                  placeholder="请输入点位"
+                  clearable
+                  :fetch-suggestions="
+                    (q, c) => querySearchAsync(q, c, index, 'protectionPlan')
+                  "
+                  @select="(v) => handleSelect(v, index, 'protectionPlan')"
+                ></el-autocomplete>
+              </div>
+
+              <div>=</div>
+              <div>
+                <el-input placeholder="请输入故障值" v-model="item.value">
+                </el-input>
+              </div>
+              <div>
+                <el-button
+                  @click.native.prevent="deleteRow(index)"
+                  type="warning"
+                  size="mini"
+                >
+                  删除
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="saveDialog">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { mapState } from "vuex";
+import { getAllSites } from "@/api/ems/zddt";
+import { validText } from "@/utils/validate";
+import {
+  getDeviceDetailInfo,
+  updateDevice,
+  addDevice,
+  getParentDeviceId,
+} from "@/api/ems/site";
+import { getAllDeviceCategory, pointFuzzyQuery } from "@/api/ems/search";
+export default {
+  props: {
+    mode: {
+      type: String,
+      default: "add",
+    },
+    id: {
+      type: String | Number,
+      required: false,
+    },
+  },
+  data() {
+    const validateText = (rule, value, callback) => {
+      if (value !== "" && !validText(value)) {
+        callback(new Error("只能输入中文、英文、数字和特殊字符!"));
+      } else {
+        callback();
+      }
+    };
+    const validateDeviceId = (rule, value, callback) => {
+      if (value !== "" && !/^[a-zA-Z0-9]+$/.test(value)) {
+        callback(new Error("只能输入英文和数字!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      loading: 0,
+      protectionSettings: [],
+      protectionPlan: [],
+      dialogTableVisible: false,
+      siteList: [], //站点列表  从接口获取数据
+      formData: {
+        id: "", //设备唯一标识
+        siteId: "", //站点ID
+        faultName: "", //设备保护名称
+        isAlert: 0, //是否告警
+        faultLevel: 1, //告警等级
+        faultDelaySeconds: "", //故障延时
+        releaseDelaySeconds: "", //释放延时
+      },
+      rules: {
+        siteId: [
+          {
+            required: true,
+            message: "请选择站点",
+            trigger: ["blur", "change"],
+          },
+        ],
+        faultName: [
+          { required: true, message: "请输入设备保护名称", trigger: "blur" },
+        ],
+        isAlert: [
+          { required: true, message: "请选择是否告警", trigger: "blur" },
+        ],
+        description: [
+          { required: true, message: "请输入设备描述", trigger: "blur" },
+          { validator: validateText, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      communicationStatusOptions: (state) =>
+        state?.ems?.communicationStatusOptions || {},
+      deviceTypeOptions: (state) => state?.ems?.deviceTypeOptions || {},
+      comparisonOperatorOptions: (state) =>
+        state?.ems?.comparisonOperatorOptions || {},
+      relationWithPoint: (state) => state?.ems?.relationWithPoint || {},
+    }),
+  },
+  watch: {
+    dialogTableVisible: {
+      handler(newVal) {
+        //打开弹窗
+        if (newVal) {
+          this.getZdList();
+          this.getDeviceCategoryList();
+        }
+      },
+      immediate: true,
+    },
+    id: {
+      handler(newVal) {
+        if ((newVal || newVal === 0) && this.mode !== "add") {
+          this.loading += 1;
+          // getDeviceDetailInfo(newVal)
+          //   .then((response) => {
+          //     this.formData = JSON.parse(JSON.stringify(response?.data || {}));
+          //     if (
+          //       this.dccDeviceCategoryList.includes(
+          //         this.formData.deviceCategory
+          //       )
+          //     ) {
+          //       this.getParentDeviceList(true);
+          //     }
+          //   })
+          //   .finally(() => {
+          //     this.loading -= 1;
+          //   });
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    // 新增设备保护前提、设备保护方案
+    addRow(type) {
+      if (type === "protectionSettings") {
+        this.protectionSettings.push({
+          deviceCategory: "",
+          point: "",
+          faultValue: "",
+          releaseValue: "",
+          faultOperator: "",
+          releaseOperator: "",
+          relation: "",
+        });
+      } else {
+        this.protectionPlan.push({
+          deviceCategory: "",
+          point: "",
+          value: "",
+        });
+      }
+    },
+    // 删除设备保护前提、设备保护方案
+    deleteRow(index, type) {
+      this[type].splice(index, 1);
+    },
+
+    // 设备保护前提、设备保护方案点位选择
+    querySearchAsync(query, cb, index, type) {
+      console.log("查询数据", query, index);
+      if (!this.formData.siteId || !this[type][index].deviceCategory) {
+        this.$message({
+          type: "warning",
+          message: "请先选择站点和设备",
+        });
+        return cb([]);
+      }
+      pointFuzzyQuery({
+        siteIds: [this.formData.siteId],
+        deviceCategory: this[type][index].deviceCategory,
+        pointName: query,
+      }).then((response) => {
+        const data = response?.data || [];
+        cb(
+          data.map((item) => {
+            return { name: item, value: item };
+          })
+        );
+      });
+    },
+    handleSelect(data, index, type) {
+      console.log("点位选择", data, "index=", index);
+      this[type][index].point = data.value;
+    },
+
+    // 切换站点
+    changeType() {
+      console.log("切换站点");
+      this.protectionSettings.forEach((item) => (item.point = ""));
+      this.protectionPlan.forEach((item) => (item.point = ""));
+    },
+    //获取站点列表
+    getZdList() {
+      this.loading += 1;
+      getAllSites()
+        .then((response) => {
+          this.siteList = response?.data || [];
+        })
+        .finally(() => {
+          this.loading -= 1;
+        });
+    },
+    // 获取设备类别
+    getDeviceCategoryList() {
+      this.loading += 1;
+      getAllDeviceCategory()
+        .then((response) => {
+          this.deviceCategoryList = response?.data || [];
+        })
+        .finally(() => {
+          this.loading -= 1;
+        });
+    },
+    saveDialog() {
+      this.$refs.addTempForm.validate((valid) => {
+        if (!valid) return;
+        this.loading += 1;
+        const {
+          id = "", //设备唯一标识
+          siteId = "", //站点ID
+          faultName = "", //设备保护名称
+          isAlert = 0, //是否告警
+          faultLevel = 1, //告警等级
+          faultDelaySeconds = "", //故障延时
+          releaseDelaySeconds = "", //释放延时
+        } = this.formData;
+        if (this.mode === "add") {
+          addDevice({
+            siteId,
+            faultName,
+            isAlert,
+            faultLevel,
+            faultDelaySeconds,
+            releaseDelaySeconds,
+            protectionSettings,
+            protectionPlan,
+          })
+            .then((response) => {
+              if (response.code === 200) {
+                //新增成功
+                // 关闭弹窗 更新表格
+                this.$emit("update");
+                this.closeDialog();
+              }
+            })
+            .finally(() => {
+              this.loading -= 1;
+            });
+        } else {
+          updateDevice({
+            id,
+            siteId,
+            faultName,
+            isAlert,
+            faultLevel,
+            faultDelaySeconds,
+            releaseDelaySeconds,
+            protectionSettings,
+            protectionPlan,
+          })
+            .then((response) => {
+              if (response.code === 200) {
+                //新增成功
+                // 关闭弹窗 更新表格
+                this.$emit("update");
+                this.closeDialog();
+              }
+            })
+            .finally(() => {
+              this.loading -= 1;
+            });
+        }
+      });
+    },
+    closeDialog() {
+      this.$emit("clear");
+      // 清空所有数据
+      this.formData = {
+        id: "", //设备唯一标识
+        siteId: "", //站点ID
+        faultName: "", //设备保护名称
+        isAlert: 0, //是否告警
+        faultLevel: 1, //告警等级
+        faultDelaySeconds: "", //故障延时
+        releaseDelaySeconds: "", //释放延时
+      };
+      this.$refs.addTempForm.resetFields();
+      this.dialogTableVisible = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.items-container {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  .item-title {
+    line-height: 16px;
+    padding: 10px 0;
+    color: #000;
+  }
+}
+.time-lists-container {
+  width: 100%;
+  border: 1px solid #eee;
+  .time-lists {
+    &:not(:last-child) {
+      border-bottom: 1px solid #eee;
+    }
+    display: flex;
+    & > div {
+      width: 16%;
+      box-sizing: border-box;
+      text-align: center;
+      padding: 10px 15px;
+      &:not(:last-child) {
+        width: 28%;
+        border-right: 1px solid #eee;
+      }
+      .el-date-editor.el-input,
+      .el-date-editor.el-input__inner {
+        width: 100%;
+      }
+    }
+  }
+  .time-lists-title {
+    color: #000;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 20px;
+  }
+}
+</style>

src/views/ems/site/sbbh/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div
+    class="ems-dashboard-editor-container"
+    style="background-color: #ffffff"
+    v-loading="loading"
+  >
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="站点选择">
+        <el-select
+          v-model="siteId"
+          placeholder="请选择换电站名称"
+          :loading="searchLoading"
+          loading-text="正在加载数据"
+          @change="onSearch"
+          clearable
+        >
+          <el-option
+            :label="item.siteName"
+            :value="item.siteId"
+            v-for="(item, index) in siteList"
+            :key="index + 'zdxeSelect'"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <!--        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>-->
+        <!--        <el-button @click="onReset" native-type="button">重置</el-button>-->
+      </el-form-item>
+    </el-form>
+    <el-button type="primary" @click="addDevice" native-type="button"
+      >新增设备</el-button
+    >
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="600px"
+      style="width: 100%; margin-top: 25px"
+    >
+      <el-table-column prop="siteId" label="站点ID"> </el-table-column>
+      <el-table-column prop="siteName" label="站点名称"> </el-table-column>
+      <!-- <el-table-column
+        prop=""
+        label=""
+      > 
+      </el-table-column>-->
+      <el-table-column fixed="right" label="操作" width="260">
+        <template slot-scope="scope">
+          <el-button @click="editDevice(scope.row)" type="warning" size="mini">
+            编辑
+          </el-button>
+          <el-button type="danger" @click="deleteDevice(scope.row)" size="mini">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="tableData.length > 0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalSize"
+      style="margin-top: 15px; text-align: center"
+    >
+    </el-pagination>
+    <add-device
+      ref="addDevice"
+      :mode="mode"
+      :id="editDeviceId"
+      @update="getData"
+      @clear="clearEditDeviceData"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  getDeviceInfoList,
+  getDeviceDetailInfo,
+  deleteService,
+} from "@/api/ems/site";
+import { getAllSites } from "@/api/ems/zddt";
+import { formatNumber } from "@/filters/ems";
+import AddDevice from "./AddDevice.vue";
+export default {
+  name: "SBBH",
+  components: { AddDevice },
+  data() {
+    return {
+      loading: false,
+      searchLoading: false,
+      mode: "", //新增、编辑设备
+      editDeviceId: "", //编辑设备id
+      siteId: "",
+      siteList: [],
+      tableData: [],
+      pageSize: 10, //分页栏当前每个数据总数
+      pageNum: 1, //分页栏当前页数
+      totalSize: 0, //table表格数据总数
+      dialogTableVisible: false,
+    };
+  },
+  methods: {
+    // 查看设备电位表格
+    pointDetail(row) {
+      this.$refs.pointTable.showTable(row);
+    },
+    clearEditDeviceData() {
+      this.mode = "";
+      this.editDeviceId = "";
+    },
+    //  新增设备 展示弹窗
+    addDevice() {
+      this.mode = "add";
+      this.$refs.addDevice.dialogTableVisible = true;
+    },
+    // 编辑设备
+    editDevice(row) {
+      this.mode = "edit";
+      this.editDeviceId = row.id;
+      this.$refs.addDevice.dialogTableVisible = true;
+    },
+    //删除设备
+    deleteDevice(row) {
+      this.$confirm(`确认要设备保护${row.deviceName}吗?`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        showClose: false,
+        closeOnClickModal: false,
+        type: "warning",
+        beforeClose: (action, instance, done) => {
+          if (action === "confirm") {
+            instance.confirmButtonLoading = true;
+            deleteService(row.id)
+              .then((response) => {
+                response.code === 200 && done();
+              })
+              .finally(() => {
+                instance.confirmButtonLoading = false;
+              });
+          } else {
+            done();
+          }
+        },
+      })
+        .then(() => {
+          //只有在废弃成功的情况下会走到这里
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+          this.getData();
+          //调用接口 更新表格数据
+        })
+        .catch(() => {
+          //取消关机
+        });
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(() => {
+        this.getData();
+      });
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val;
+      this.$nextTick(() => {
+        this.getData();
+      });
+    },
+    // 搜索
+    onSearch() {
+      this.pageNum = 1; //每次搜索从1开始搜索
+      this.getData();
+    },
+    // 重置
+    onReset() {
+      this.siteId = "";
+      this.pageNum = 1; //每次搜索从1开始搜索
+      this.getData();
+    },
+    // 获取数据
+    getData() {
+      this.loading = true;
+      const { siteId, pageNum, pageSize } = this;
+      getDeviceInfoList({ siteId, pageNum, pageSize })
+        .then((response) => {
+          this.tableData = response?.rows || [];
+          this.totalSize = response?.total || 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    //获取站点列表
+    getZdList() {
+      this.searchLoading = true;
+      return getAllSites()
+        .then((response) => {
+          this.siteList = response?.data || [];
+          if (this.siteList.length > 0) this.siteId = this.siteList[0].siteId;
+        })
+        .finally(() => {
+          this.searchLoading = false;
+        });
+    },
+  },
+  mounted() {
+    this.loading = true;
+    this.siteId = "";
+    this.pageNum = 1; //每次搜索从1开始搜索
+    this.getZdList().then(() => {
+      this.getData();
+    });
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>