设备保护

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>