alertGuardian-JinNeng/src/pages/baseData/fan_components/custom.vue

<template>
  <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-lx-down"
        class="handle-edit mr10"
        @click="export2Excel"
      >
        批量导出</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-lx-down"
        class="handle-edit mr10"
        @click="outExe"
      >
        模板下载</el-button
      >
      <el-upload
        class="handle-edit mr10"
        style="display: inline"
        action="/sharding/alertrule2/import"
        :headers="token"
        :show-file-list="false"
        :on-success="handleSuccess"
        :on-progress="handleProgress"
        :on-error="handleError"
      >
        <el-button
          type="primary"
          icon="el-icon-lx-top"
          @click="exportShow = true"
        >
          批量导入</el-button
        >
      </el-upload>
    </div>
    <div style="display: flex; flex-direction: row; margin-bottom: 10px">
      <el-select
        v-if="!isStation"
        v-model="query.category"
        class="mr10"
        style="width: 150px"
        popper-class="select"
      >
        <el-option
          key="windturbine"
          label="风机"
          value="windturbine"
        ></el-option>
        <el-option key="inverter" label="逆变器" value="inverter"></el-option>
        <el-option
          key="booststation"
          label="升压站"
          value="booststation"
        ></el-option>
      </el-select>
      <el-select
        v-if="!isStation"
        v-model="query.station"
        clearable
        filterable
        class="mr10"
        style="width: 150px"
        placeholder="全部场站"
        popper-class="select"
        @change="changeStation()"
      >
        <el-option
          v-for="item in stationList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        v-model="query.modelId"
        clearable
        filterable
        class="mr10"
        style="width: 150px"
        placeholder="全部机型"
        popper-class="select"
      >
        <el-option
          v-for="item in state.modelList"
          :key="item"
          :value="item"
          :label="item"
        ></el-option>
      </el-select>
      <el-select
        v-model="query.rank"
        clearable
        filterable
        class="mr10"
        style="width: 150px"
        placeholder="全部级别"
        popper-class="select"
      >
        <el-option
          v-for="item in state.rankList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-input
        placeholder="请输入名称"
        v-model="query.name"
        style="width: 150px"
        class="mr10"
        clearable
      ></el-input>
      <el-button icon="el-icon-search" type="primary" @click="getData"
        >搜索</el-button
      >
    </div>
  </el-row>
  <el-table
    :data="state.tableData"
    border
    class="table"
    header-cell-name="table-header"
    :highlight-current-row="true"
  >
    <el-table-column label="编码" align="center" prop="id" min-width="50" />
    <el-table-column
      label="场站"
      align="center"
      prop="stationName"
      min-width="50"
    />
    <el-table-column
      label="机型"
      align="center"
      prop="modelId"
      min-width="50"
    />
    <el-table-column label="名称" align="left" prop="name" min-width="50" />
    <el-table-column label="表达式" align="left" prop="expression" />
    <el-table-column label="级别" align="center" prop="rank" min-width="20">
      <template #default="scope">{{ rankConvert(scope.row.rank) }}</template>
    </el-table-column>
    <el-table-column label="类型" align="center" prop="category" min-width="20">
      <template #default="scope">{{
        categoryConvert(scope.row.category)
      }}</template>
    </el-table-column>
    <el-table-column label="描述" align="left" prop="description" />
    <el-table-column
      label="是否启用"
      align="center"
      prop="enabled"
      min-width="20"
    >
      <template #default="scope">
        {{ scope.row.enabled ? "启用" : "未启用" }}
      </template>
    </el-table-column>
    <el-table-column
      label="所属部件"
      align="center"
      prop="relatedPartsName"
      min-width="30"
    />
    <el-table-column label="操作" align="center" width="100">
      <template #default="scope">
        <el-button
          type="primary"
          plain
          round
          size="mini"
          icon="el-icon-lx-edit"
          :disabled="notEdit || scope.row.range == 1"
          @click="handleEditClick(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"
      hide-on-single-page
      :current-page="query.pagenum"
      :page-size="query.pagesize"
      :total="total"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
  <customcomponents
    @close="dialogclose"
    :isVisible="state.visible"
    :form="state.form"
  />
</template>
<script setup>
import { custombj_fetchTableData, getWtModel } from "/@/api/api.js";
import { outExportExcel } from "/@/utils/exportExcel"; //引入文件
import { ref, onMounted, provide, computed, reactive, watch } from "vue";
import { useStore } from "vuex";
import { ElMessageBox, ElMessage } from "element-plus";
import customcomponents from "./custom_components.vue";
import { common } from "/@/composables/common";
const { notEdit } = common();
const token = { token: sessionStorage.getItem("token") };
const store = useStore();
const stationList = computed(() => store.state.stationList);
const isStation = computed(() => store.getters.isStation);
const state = reactive({
  tableData: [],
  modelList: [],
  rankList: [
    {
      id: 1,
      name: "低级",
    },
    {
      id: 2,
      name: "低中",
    },
    {
      id: 3,
      name: "中级",
    },
    {
      id: 4,
      name: "中高级",
    },
    {
      id: 5,
      name: "高级",
    },
  ],
  visible: false,
  form: {},
});
const query = reactive({
  pageNum: 1,
  pageSize: 10,
  name: "",
  station: "",
  rank: "",
  modelId: "",
  category: "windturbine",
});
let total = ref(0);
onMounted(() => {
  getData();
  getequipmentmodel_list();
});
const dialogclose = () => {
  state.visible = false;
  getData();
};
const getData = async () => {
  const { data } = await custombj_fetchTableData(query);
  state.tableData = data.records;
  total.value = data.total;
};
const handleEditClick = (row) => {
  let obj = Object.assign({}, row);
  state.form = obj;
  state.visible = true;
};
const handleInsert = () => {
  state.visible = true;
};

//changeStation
const changeStation = async () => {
  query.modelId = "";
  await getequipmentmodel_list();
};
// 机型
const getequipmentmodel_list = async () => {
  const { data } = await getWtModel(query.station);
  state.modelList = data;
};
// 分页导航
const handlePageChange = (val) => {
  query.pagenum = val;
  getData();
};
const tableHeader = [
  "id",
  "规则名称",
  "报警类别（1：风气；2：升压站）",
  "报警级别（1：低级；2：低中级；3：中级；4：中高级；5：高级）",
  "是否启用（0：停用；1：启用）",
  "风场",
  "风机类型",
  "所属部件",
  "表达式",
  "规则描述",
];

const tableKey = [
  "id",
  "name",
  "category",
  "rank",
  "enabled",
  "station",
  "modelId",
  "relatedParts",
  "expressionShow",
  "descriptionShow",
];
// 批量导出
const export2Excel = async () => {
  let { name, station, rank, modelId, category } = query;
  const res = await custombj_fetchTableData({
    pageNum: 1,
    pageSize: 999999,
    name,
    station,
    rank,
    modelId,
    category,
  });

  ElMessage.success(`导出成功!`);
  outExportExcel(tableHeader, tableKey, res.records, "自定义预警配置导出excel");
};
// 模板下载
const outExe = () => {
  const data = [];
  ElMessage.success(`导出成功!`);
  outExportExcel(tableHeader, tableKey, data, "自定义报警模板");
};
// 批量导入
const handleSuccess = (response, file, fileList) => {
  ElMessage.success("导入成功!");
  getData();
};
const handleProgress = (response, file, fileList) => {};
const handleError = (response, file, fileList) => {
  ElMessage.success("导入失败!");
};
const 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 "高级";
  }
};
// 类型
const categoryConvert = (val) => {
  if (val === "windturbine") {
    return "风机";
  } else if (val === "inverter") {
    return "逆变器";
  } else if (val === "booststation") {
    return "升压站";
  }
};
</script>
<style scoped>
.mr10 {
  margin-right: 10px;
}

.el-button + .el-button {
  margin-left: 10px;
}
</style>