alertGuardian-JinNeng/src/pages/alarmConfig/bj_windturbine/windturbine.vue

<template>
  <el-card>
    <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/warning2/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.alarmType"
          class="mr10"
          style="width: 150px"
          popper-class="select"
          @change="categorychanged"
        >
          <el-option key="2" label="升压站" value="booststation"></el-option>
          <el-option key="1" label="风机" value="windturbine"></el-option>
          <el-option key="3" label="光伏" value="inverter"></el-option>
        </el-select>
        <el-select
          v-model="query.wpId"
          clearable
          class="mr10"
          style="width: 150px"
          :placeholder="
            query.alarmType == 'windturbine' ? '全部场站' : '全部升压站'
          "
          popper-class="select"
          @change="changeStation"
        >
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :value="item.id"
            :label="item.aname"
          ></el-option>
        </el-select>
        <el-select
          v-if="query.alarmType == 'windturbine'"
          v-model="query.modelId"
          clearable
          class="mr10"
          style="width: 150px"
          placeholder="全部机型"
          popper-class="select"
        >
          <el-option
            v-for="item in modelList"
            :key="item.id"
            :value="item.id"
            :label="item.aname"
          ></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" :highlight-current-row="true" border>
      <el-table-column
        v-for="item in query.alarmType == 'windturbine'
          ? state.tableHeader
          : state.tableHeader1"
        :key="item.code"
        :label="item.title"
        align="center"
        :prop="item.code"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span v-if="item.code == 'rank'">
            {{ rankConvert(scope.row.rank) }}
          </span>
          <span v-else-if="item.code == 'alarmType'">
            {{ alarmTypeConvert(scope.row.alarmType) }}
          </span>
          <span v-else-if="item.code == 'deviceType'">
            {{ alarmTypeConvert(scope.row.deviceType) }}
          </span>
          <span v-else-if="item.code == 'enable'">
            {{ enabledConvert(scope.row.enable) }}
          </span>
          <span v-else-if="item.code == 'characteristic'">
            {{ charactConvert(scope.row.characteristic) }}
          </span>
          <span v-else>
            {{ scope.row[item.code] }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="序列号" align="center" prop="id" />
      <el-table-column label="统一编码" align="center" prop="uniformCode">
        <template #default="scope">{{
          // ednaValueConvert(scope.row.ednaValue)
          scope.row.uniformCode
        }}</template>
      </el-table-column>
      <el-table-column
        label="名称"
        align="left"
        prop="chineseText"
        width="180"
      />
      <el-table-column label="停机类型" align="center" prop="characteristic" />
      <el-table-column label="设备型号" align="center" prop="modelId" />
      <el-table-column label="报警类型" align="center" prop="warningTypeId" />
      <el-table-column label="故障编码" align="center" prop="faultCode" />
      <el-table-column label="报警级别" align="center" prop="levelId">
        <template #default="scope">{{
          levelIdConvert(scope.row.levelId)
        }}</template>
      </el-table-column>
      <el-table-column
        label="报警分类"
        align="center"
        prop="warningClassIfyId"
        min-width="50"
      >
        <template #default="scope">{{
          warningClassIfyIdConvert(scope.row.warningClassIfyId)
        }}</template>
      </el-table-column>
      <el-table-column
        label="是否可以复位"
        align="center"
        prop="isreset"
        min-width="50"
      >
        <template #default="scope">{{
          isresetConvert(scope.row.isreset)
        }}</template>
      </el-table-column>
      <el-table-column
        label="是否启用"
        align="center"
        prop="display"
        min-width="50"
      >
        <template #default="scope">{{
          scope.row.enabled == 1 ? "是" : "否"
        }}</template>
      </el-table-column>
      <el-table-column
        label="关联部件"
        align="center"
        prop="relatedParts"
        min-width="50"
      >
        <template #default="scope">
          <span>{{ relatePartConvert(scope.row.relatedParts) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button
            type="primary"
            plain
            round
            size="mini"
            icon="el-icon-lx-edit"
            @click="handleEditClick(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>
    <windturbinecomponents
      @close="dialogclose"
      :isVisible="state.visible"
      :form="state.form"
    />
  </el-card>
</template>
<script setup>
import {
  windturbinebj_fetchTableData,
  getStationinfo,
  fetchRelatePartAndAlarmType,
  fetchModel,
} from "/@/api/api.js";
import { outExportExcel } from "/@/utils/exportExcel"; //引入文件
import {
  ref,
  onMounted,
  provide,
  computed,
  reactive,
  watch,
  nextTick,
} from "vue";
import { useStore } from "vuex";
import { ElMessageBox, ElMessage } from "element-plus";
import windturbinecomponents from "./windturbine_components.vue";
const token = { token: sessionStorage.getItem("token") };
const store = useStore();
onMounted(() => {
  getequipmentmodel_list();
});
const query = reactive({
  pagenum: 1,
  pagesize: 10,
  wpId: "",
  modelId: "",
  name: "",
  alarmType: "windturbine",
});
const state = reactive({
  tableData: [],
  modelList: [],
  modelListAll: {}, //型号所有列表
  visible: false,
  form: {},
  tableHeader: [
    { title: "编码", code: "id" },
    { title: "场站", code: "stationName", width: "100" },
    // { title: "设备", code: "deviceId", width: "100" },
    { title: "机型", code: "modelId" },
    { title: "部件", code: "components" },
    { title: "报警描述", code: "description", width: "150" },
    { title: "设备部件", code: "componentsName" },
    { title: "级别", code: "rankName" },
    { title: "特性", code: "characteristic" },
    { title: "设备类型", code: "deviceType" },
    { title: "报警类型", code: "alarmType" },
    { title: "报警类别", code: "triggerType" },
    { title: "是否启用", code: "enable" },
    { title: "是否可复位", code: "resetTableName" },
  ],
  tableHeader1: [
    { title: "编码", code: "id" },
    { title: "升压站", code: "stationName" },
    { title: "规则名称", code: "name" },
    { title: "表达式", code: "expression" },
    { title: "描述", code: "description" },
    { title: "级别", code: "rank" },
    { title: "类型", code: "alarmType" },
    { title: "是否启用", code: "enable" },
  ],
});
// 机型
const getequipmentmodel_list = async () => {
  const { data } = await fetchModel();
  state.modelListAll = data;
};
// 场站列表/升压站列表
const stationList = computed(() => {
  if (query.alarmType == "windturbine") {
    return store.state.stationListAll;
  } else {
    return store.state.booststationList;
  }
});
watch(
  () => stationList,
  (val, old) => {
    val.value.length &&
      nextTick(async () => {
        query.wpId = val.value[0]?.id;
        await getData();
      });
  },
  {
    deep: true,
    immediate: true,
  }
);
//型号列表
const modelList = computed(() => {
  if (query.wpId == "") {
    return [];
  } else {
    return state.modelListAll[query.wpId];
  }
});
const isStation = computed(() => store.getters.isStation);

let total = ref(0);
const getData = async () => {
  const { data: res } = await windturbinebj_fetchTableData(query);
  res.records.forEach((ele) => {
    ele.rankName = getRankName(ele.rank);
    ele.resetTableName = ele.resetTable ? "是" : "否";
  });
  state.tableData = res.records;
  total.value = res.total;
};

const getRankName = (rank) => {
  if (rank === 1) {
    return "低级";
  } else if (rank === 2) {
    return "低中级";
  } else if (rank === 3) {
    return "中级";
  } else if (rank === 4) {
    return "中高级";
  } else if (rank === 5) {
    return "高极";
  }
};
//changeStation
const changeStation = async () => {
  query.modelId = "";
  getData();
};
const dialogclose = () => {
  state.visible = false;
  getData();
};

const handleInsert = () => {
  state.visible = true;
};
const handleEditClick = (row) => {
  let obj = Object.assign({}, row);
  obj && (obj.manufacturerCode = "");
  state.form = obj;
  state.visible = true;
};

// 分页导航
const handlePageChange = (val) => {
  query.pagenum = val;
  getData();
};

const tableHeader = [
  "id",
  "报警级别（ZC_BJ：运转正常；YJ_BJ：运转状态超出标准范围；GZ_BJ：非正常停止运转；WH_BJ：停机维护；XD_BJ：限电/计划停机）",
  "制造商（HFYG_CS：合肥阳光电源有限公司；AMS_CS：艾默生；NRJD_CS：国电南瑞吉电新能源；MGSK_CS：美国赛康；LHDL_CS：联合动力；SYHC_CS：沈阳华创）",
  "名称",
  "上一级节点",
  "是否有子节点",
  "序列号",
  "类别 ：正常停机，正常启动，快速停机，紧急停机",
  "设备型号",
  "全部默认为1",
  "统一编码",
  "是否展示（0：是；1：否）",
  "报警分类（bj：变桨；bpq：变频器；clx：齿轮箱；fdj：发电机；hh：滑环；jcjr：机舱加热；lq：冷却；ph：偏航；rh：润滑；yy：液压；zz：主轴；other：其它；kz：控制；yl：叶轮；jc：机舱；xb：箱变；dw：电网；td：塔底；fsy：风速仪）",
  "消缺规定时间",
  "是否可以复位（0：是；1：否）",
  "报警类型编号",
  "故障编码",
  "关联部件",
];

const tableKey = [
  "id",
  "levelId",
  "manufacturerCode",
  "chineseText",
  "parentId",
  "isleaf",
  "sequenceNumber",
  "characteristic",
  "modelId",
  "codeName",
  "ednaValue",
  "display",
  "warningClassIfyId",
  "standardTime",
  "isreset",
  "warningTypeId",
  "faultCode",
  "relatedParts",
];
// 批量导出
const export2Excel = async () => {
  let { name, wpId, modelId } = query;
  const res = await windturbinebj_fetchTableData({
    pagenum: 1,
    pagesize: 999999,
    name,
    wpId,
    modelId,
  });

  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 alarmTypeConvert = (val) => {
  if (val === "windturbine") {
    return "设备";
  } else if (val === "booststation") {
    return "升压站";
  }
};
// 状态
const enabledConvert = (val) => {
  if (val === false) {
    return "停用";
  } else if (val === true) {
    return "启用";
  }
};

// 特征
const charactConvert = (val) => {
  switch (val) {
    case "ZC_BJ":
      return "运转正常";
      break;
    case "YJ_BJ":
      return "运转状态超出标准范围";
      break;
    case "GZ_BJ":
      return "非正常停止运转";
      break;
    case "WH_BJ":
      return "停机维护";
      break;
    case "XD_BJ":
      return "限电/计划停机";
      break;
    default:
      return;
  }
};
// 报警分类
const warningClassIfyIdConvert = (val) => {
  switch (val) {
    case "bj":
      return "变桨";
      break;
    case "bpq":
      return "变频器";
      break;
    case "clx":
      return "齿轮箱";
      break;
    case "fdj":
      return "发电机";
      break;
    case "hh":
      return "滑环";
      break;
    case "jcjr":
      return "机舱加热";
      break;
    case "lq":
      return "冷却";
      break;
    case "ph":
      return "偏航";
      break;
    case "rh":
      return "润滑";
      break;
    case "yy":
      return "液压";
      break;
    case "zz":
      return "主轴";
      break;
    case "other":
      return "其它";
      break;
    case "kz":
      return "控制";
      break;
    case "yl":
      return "叶轮";
      break;
    case "jc":
      return "机舱";
      break;
    case "xb":
      return "箱变";
      break;
    case "dw":
      return "电网";
      break;
    case "td":
      return "塔底";
      break;
    case "fsy":
      return "风速仪";
      break;
  }
};
// 是否可以复位
const isresetConvert = (val) => {
  switch (val) {
    case 0:
      return "是";
      break;
    case 1:
      return "否";
      break;
  }
};

// 统一编码
const ednaValueConvert = (val) => {
  if (val === 0) {
    return "";
  } else if (val < 100 && val > 0) {
    return "DI0" + val;
  } else if (val >= 100) {
    return "DI" + val;
  }
};
// 关联部件
const relatePartConvert = (val) => {
  switch (val) {
    case "YP":
      return "叶片";
      break;
    case "LG":
      return "轮毂";
      break;
    case "TZ":
      return "塔架";
      break;
    case "JC":
      return "机舱";
      break;
    case "KZXT":
      return "控制系统";
      break;
    case "BJXT":
      return "变桨系统";
      break;
    case "PHXT":
      return "偏航系统";
      break;
    case "CLX":
      return "齿轮箱";
      break;
    case "FDJ":
      return "发电机";
      return;
    case "BPQ":
      return "变频器";
      return;
    case "YYXT":
      return "液压系统";
      break;
    case "FZXT":
      return "辅助系统";
      break;
    case "CFXT":
      return "测风系统";
      break;
    case "DWXT":
      return "电网系统";
      break;
    case "TDG":
      return "塔底柜";
      break;
    case "CDL":
      return "传动链";
      break;
    case "QT":
      return "其他";
      break;
    default:
      break;
  }
};
</script>
<style scoped>
.mr10 {
  margin-right: 10px;
}

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