fd_dwgz_zhyw_nx/src/views/IntegratedAlarm/deviceConfig/components/custom.vue

<template>
  <el-row type="flex" justify="space-between">
    <div class="handle-box" style="margin-bottom: 10px">
      <el-button class="buttons" size="mini" round @click="handleInsert">
        新增记录
      </el-button>
      <el-button class="buttons" size="mini" round @click="export2Excel">
        批量导出</el-button
      >
      <el-button class="buttons" size="mini" round @click="outExe">
        模板下载</el-button
      >
      <el-upload
        style="display: inline; margin-left: 10px"
        action="/sharding/alertrule2/import"
        :headers="token"
        :show-file-list="false"
        :on-success="handleSuccess"
        :on-progress="handleProgress"
        :on-error="handleError"
      >
        <el-button class="buttons" size="mini" round @click="exportShow = true">
          批量导入</el-button
        >
      </el-upload>
    </div>
    <div style="display: flex; flex-direction: row; margin-bottom: 10px">
      <el-select
        v-model="query.category"
        size="mini"
        style="width: 150px"
        popper-class="select"
        @change="handleCategoryChange"
      >
        <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-model="query.station"
        clearable
        filterable
        size="mini"
        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
        size="mini"
        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
        size="mini"
        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; margin-right: 10px"
        size="mini"
        clearable
      ></el-input>
      <el-button
        icon="el-icon-search"
        class="buttons"
        round
        size="mini"
        @click="getData"
        >搜索</el-button
      >
    </div>
  </el-row>
  <div class="custom-table">
    <el-table
      :data="state.tableData"
      stripe
      height="calc(100% - 45px)"
      style="width: 100%"
    >
      <el-table-column label="编码" align="center" prop="id" 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"
        width="80"
      >
        <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="80">
        <template #default="scope">
          <el-button
            style="color: #05bb4c"
            type="text"
            icon="el-icon-lx-edit"
            :disabled="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
        layout="total, sizes, prev, pager, next"
        :page-sizes="[19, 50, 100, 200, 500]"
        @size-change="
          (value) => {
            query.pageSize = value;
            query.pageNum = 1;
            getData();
          }
        "
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        :total="total"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
  <customcomponents
    @close="dialogclose"
    :isVisible="state.visible"
    :form="state.form"
  />
</template>
<script setup>
import { custombj_fetchTableData, getWtModel } from "@/api/zhbj/index.js";
import { outExportExcel } from "@/tools/excel/exportExcel.js"; //引入文件
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";
const token = { token: sessionStorage.getItem("token") };
const store = useStore();
const stationList = computed(() =>
  query.category == "windturbine"
    ? store.state.stationListAll.filter((item) => item.windType == -1)
    : store.state.stationListAll.filter((item) => item.windType == -2)
);
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: 19,
  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 lang="less">
.custom-table {
  height: calc(100% - 40px);
}
.buttons {
  background-color: rgba(5, 187, 76, 0.2);
  border: 1px solid #3b6c53;
  color: #b3b3b3;
  font-size: 14px;
  &:hover {
    background-color: rgba(5, 187, 76, 0.5);
    color: #ffffff;
  }
}
.el-select ::v-deep {
  margin-right: 10px;
}
.el-button + .el-button {
  margin-left: 10px;
}
.pagination {
  padding-top: 10px;
}
</style>