|
|
@@ -0,0 +1,405 @@
|
|
|
+<template>
|
|
|
+ <div class="alarm-body">
|
|
|
+ <div class="search-form">
|
|
|
+ <div class="select-form">
|
|
|
+ <div class="select-item">
|
|
|
+ 报警类型：
|
|
|
+ <el-select
|
|
|
+ size="mini"
|
|
|
+ v-model="alarmType"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="alarmTypeChanged"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in alarmOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.code"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-item" v-if="alarmType == 'booststation'">
|
|
|
+ 升压站：
|
|
|
+ <el-select
|
|
|
+ size="mini"
|
|
|
+ v-model="sub"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="subChanged"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in subOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-item" v-if="alarmType == 'windturbine'">
|
|
|
+ 场站：
|
|
|
+ <el-select
|
|
|
+ size="mini"
|
|
|
+ v-model="station"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="stationChanged"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in wpOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-item" v-if="alarmType == 'windturbine'">
|
|
|
+ 设备：
|
|
|
+ <el-select
|
|
|
+ size="mini"
|
|
|
+ v-model="wind"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="windChanged"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in wtOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-item">
|
|
|
+ 描述：
|
|
|
+ <el-input size="mini" v-model="description" placeholder="请输入">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="select-item">
|
|
|
+ 开始日期：
|
|
|
+ <el-date-picker
|
|
|
+ v-model="begin"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="选择日期"
|
|
|
+ size="mini"
|
|
|
+ popper-class="date-select"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="select-item">
|
|
|
+ 结束日期：
|
|
|
+ <el-date-picker
|
|
|
+ v-model="end"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="选择日期"
|
|
|
+ size="mini"
|
|
|
+ popper-class="date-select"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btns">
|
|
|
+ <el-button round size="mini" class="buttons" @click="getTableData"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-list">
|
|
|
+ <div class="line">
|
|
|
+ <div class="left-content"><span>报警列表</span></div>
|
|
|
+ <div class="right-content"></div>
|
|
|
+ </div>
|
|
|
+ <div class="economicTable">
|
|
|
+ <el-table
|
|
|
+ ref="table"
|
|
|
+ :data="alarmData"
|
|
|
+ height="calc(100% - 35px)"
|
|
|
+ style="width: 100%"
|
|
|
+ fit
|
|
|
+ v-loading="loading"
|
|
|
+ element-loading-text="加载中..."
|
|
|
+ element-loading-background="rgba(4, 12, 11, 0.8)"
|
|
|
+ empty-text=" "
|
|
|
+ stripe
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in alarmType == 'windturbine'
|
|
|
+ ? tableHeader
|
|
|
+ : tableHeader1"
|
|
|
+ :key="index"
|
|
|
+ sortable
|
|
|
+ :prop="item.code"
|
|
|
+ :label="item.title"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="page.currentPage"
|
|
|
+ :page-size="page.pagesize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="page.total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getWpList, getSubList } from "@/api/economic/index";
|
|
|
+import { getApiequipmentListByWp } from "@/api/monthlyPerformanceAnalysis.js";
|
|
|
+import { GetTableData } from "@/api/zhbj/index.js";
|
|
|
+import dayjs from "dayjs";
|
|
|
+export default {
|
|
|
+ name: "commonAlarm",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ station: "",
|
|
|
+ wpOptions: [],
|
|
|
+ wind: "",
|
|
|
+ wtOptions: [],
|
|
|
+ sub: "",
|
|
|
+ subOptions: [],
|
|
|
+ alarmType: "windturbine",
|
|
|
+ alarmOptions: [
|
|
|
+ {
|
|
|
+ code: "booststation",
|
|
|
+ name: "升压站报警",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: "windturbine",
|
|
|
+ name: "设备报警",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ booststation: "",
|
|
|
+ booststationOptions: [],
|
|
|
+ description: "",
|
|
|
+ begin: dayjs().format("YYYY-MM-DD"),
|
|
|
+ end: dayjs().add(1, "day").format("YYYY-MM-DD"),
|
|
|
+ alarmData: [],
|
|
|
+ loading: false,
|
|
|
+ tableHeader: [
|
|
|
+ { title: "时间", code: "ts" },
|
|
|
+ { title: "场站名称", code: "stationname" },
|
|
|
+ { title: "设备名称", code: "devicename" },
|
|
|
+ { title: "报警描述显示", code: "description" },
|
|
|
+ { title: "是否确认", code: "confirmed" },
|
|
|
+ ],
|
|
|
+ tableHeader1: [
|
|
|
+ { title: "时间", code: "ts" },
|
|
|
+ { title: "报警描述显示", code: "description" },
|
|
|
+ { title: "是否确认", code: "confirmed" },
|
|
|
+ ],
|
|
|
+ page: {
|
|
|
+ pagesize: 20,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.GetWpOptions();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ GetWpOptions() {
|
|
|
+ getWpList({ type: 0 }).then(({ data }) => {
|
|
|
+ if (data && data.data.length) {
|
|
|
+ this.wpOptions = data.data;
|
|
|
+ this.station = data.data[0].id;
|
|
|
+ this.GetWtOptions();
|
|
|
+ this.getTableData();
|
|
|
+ } else {
|
|
|
+ this.wpOptions = [];
|
|
|
+ this.station = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ GetWtOptions() {
|
|
|
+ getApiequipmentListByWp({ wpid: this.station }).then(({ data }) => {
|
|
|
+ if (data && data.data.length) {
|
|
|
+ this.wtOptions = data.data;
|
|
|
+ } else {
|
|
|
+ this.wtOptions = [];
|
|
|
+ this.wind = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ GetSubOptions() {
|
|
|
+ getSubList({ type: 0 }).then(({ data }) => {
|
|
|
+ if (data && data.data.length) {
|
|
|
+ this.subOptions = data.data;
|
|
|
+ this.sub = this.subOptions[0].id;
|
|
|
+ this.getTableData();
|
|
|
+ } else {
|
|
|
+ this.subOptions = [];
|
|
|
+ this.sub = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getTableData() {
|
|
|
+ this.loading = true;
|
|
|
+ let params = {};
|
|
|
+ if (this.alarmType == "windturbine") {
|
|
|
+ params = {
|
|
|
+ begin: this.begin,
|
|
|
+ end: this.end,
|
|
|
+ alarmType: this.alarmType,
|
|
|
+ stationid: this.station,
|
|
|
+ deviceid: this.wind,
|
|
|
+ description: this.description,
|
|
|
+ pageNum: this.page.currentPage - 1,
|
|
|
+ pageSize: this.page.pagesize,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ params = {
|
|
|
+ begin: this.begin,
|
|
|
+ end: this.end,
|
|
|
+ alarmType: this.alarmType,
|
|
|
+ stationid: this.sub,
|
|
|
+ description: this.description,
|
|
|
+ pageNum: this.page.currentPage - 1,
|
|
|
+ pageSize: this.page.pagesize,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ GetTableData(params).then(({ data }) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (data.ls.length) {
|
|
|
+ this.alarmData = data.ls.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ confirmed: item.confirmed ? "是" : "否",
|
|
|
+ ts: dayjs(item.ts).format("YYYY-MM-DD HH:mm:ss"),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.page.total = data.total;
|
|
|
+ } else {
|
|
|
+ this.alarmData = [];
|
|
|
+ this.page.total = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ alarmTypeChanged(val) {
|
|
|
+ this.alarmType = val;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ if (val == "windturbine") {
|
|
|
+ this.GetWpOptions();
|
|
|
+ } else {
|
|
|
+ this.GetSubOptions();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ subChanged(val) {
|
|
|
+ this.sub = val;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ stationChanged(val) {
|
|
|
+ this.station = val;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.GetWtOptions();
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ windChanged(val) {
|
|
|
+ this.wind = val;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page.currentPage = val;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+.alarm-body {
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px 20px 20px 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .search-form {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b3b3b3;
|
|
|
+
|
|
|
+ .select-form {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .select-item {
|
|
|
+ margin-right: 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btns {
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ .buttons {
|
|
|
+ background-color: rgba(5, 187, 76, 0.2);
|
|
|
+ border: 1px solid #3b6c53;
|
|
|
+ color: #b3b3b3;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background-color: rgba(5, 187, 76, 0.5);
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .alarm-list {
|
|
|
+ margin-top: 15px;
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .left-content {
|
|
|
+ width: 242px;
|
|
|
+ height: 41px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: url("~@/assets/imgs/title_left_bg.png");
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-content {
|
|
|
+ position: relative;
|
|
|
+ width: 212px;
|
|
|
+ height: 28px;
|
|
|
+ margin-top: 13px;
|
|
|
+ background: url("~@/assets/imgs/title_right_bg.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .economicTable {
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ .el-pagination {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep {
|
|
|
+ input::placeholder {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
baiyanting