光伏告警【已完成】

src/views/warn/gfgj.vue

@@ -1,325 +1,220 @@
 <template>
-  <div>
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">光伏：</div>
-          <div class="search-input">
-            <el-select
-              v-model="stationId"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-              @change="
-                (stationId) => {
-                  Windturbines();
-                }
-              "
-            >
-              <el-option
-                v-for="item in ChangZhan"
-                :key="item.id"
-                :value="item.id"
-                :label="item.stationName"
-              ></el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">机组：</div>
-          <div class="search-input">
-            <el-select
-              v-model="wtId"
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in windturbines"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              ></el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">描述：</div>
-          <div class="search-input">
-            <el-input v-model="alarmDesc" placeholder="报警描述"></el-input>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">等级：</div>
-          <div class="search-input">
-            <el-select
-              v-model="level"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in levelArray"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              />
-            </el-select>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="startDate"
-              type="datetime"
-              placeholder="开始日期"
-              popper-class="date-select"
-              value-format="YYYY-MM-DD HH:mm:ss"
-            ></el-date-picker>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="endDate"
-              type="datetime"
-              placeholder="开始日期"
-              popper-class="date-select"
-              value-format="YYYY-MM-DD HH:mm:ss"
-            ></el-date-picker>
-          </div>
-        </div>
-        <div class="query-actions">
-          <button class="btn green" @click="getTable()">查询</button>
-          <button class="btn green" @click="exportExcel()">导出</button>
-        </div>
-      </div>
-    </div>
-    <div class="table-box">
-      <div class="title">SCADA报警</div>
-      <ComTable
-        ref="curRef"
-        :data="tableData"
-        :pageSize="20"
-        @onPagging="onChangePage"
-        @sizeChange="sizeChange"
-        @pageClick="pageClick"
-        height="68vh"
-        v-loading="tableLoading"
-        element-loading-text="拼命加载中.."
-        element-loading-background="rgba(0, 0, 0, 0.8)"
-      ></ComTable>
-    </div>
-  </div>
+	<div>
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">光伏：</div>
+					<div class="search-input">
+						<el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change=" (wpId) => { Windturbines(); } ">
+							<el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name"></el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">机组：</div>
+					<div class="search-input">
+						<el-select v-model="wtId" placeholder="请选择" popper-class="select">
+							<el-option v-for="item in windturbines" :key="item.id" :label="item.name" :value="item.id">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+				  <div class="lable">描述：</div>
+				  <div class="search-input">
+				    <el-input v-model="alarmDesc" placeholder="报警描述"></el-input>
+				  </div>
+				</div>
+				<div class="query-item">
+					<div class="lable">开始日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="startDate" type="datetime" placeholder="开始日期"
+							popper-class="date-select" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">结束日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="endDate" type="datetime" placeholder="开始日期" popper-class="date-select"
+							value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+					</div>
+				</div>
+				<div class="query-actions">
+					<button class="btn green" @click="getTable()">查询</button>
+					<button class="btn green" @click="exportExcel()">导出</button>
+				</div>
+			</div>
+		</div>
+		<div class="table-box">
+			<div class="title">光伏告警</div>
+			<ComTable ref="curRef" :data="tableData" :pageSize="20" @onPagging="onChangePage" @sizeChange="sizeChange"
+				@pageClick="pageClick" height="68vh" v-loading="tableLoading" element-loading-text="拼命加载中.."
+				element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
+		</div>
+	</div>
 </template>
 <script>
-import ComTable from "@/components/coms/table/table.vue";
+	import ComTable from "@/components/coms/table/table.vue";
 
-export default {
-  components: { ComTable },
-  data() {
-    let that = this;
-    return {
-      ChangZhan: [],
-      stationId: "XS_FDC",
-      windturbines: [],
-      wtId: "",
-      alarmDesc: "",
-      levelArray: [
-        {
-          id: "",
-          name: "请选择",
-        },
-        {
-          id: "1",
-          name: "一级",
-        },
-        {
-          id: "2",
-          name: "二级",
-        },
-        {
-          id: "3",
-          name: "三级",
-        },
-        {
-          id: "4",
-          name: "四级",
-        },
-        {
-          id: "5",
-          name: "五级",
-        },
-      ],
-      level: "",
-      partsMap: {},
-      startDate: "",
-      endDate: "",
-      tableLoading: true,
-      pageIndex: 1,
-      pageSize: 20,
-      tableData: {
-        column: [
-          {
-            name: "场站",
-            field: "stationName",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-            id: "id",
-          },
-          {
-            name: "机组",
-            field: "windturbineName",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-            id: "id",
-          },
+	export default {
+		components: {
+			ComTable
+		},
+		data() {
+			let that = this;
+			return {
+				waitAjax:true,//等待执行完了再加载table
+				ChangZhan: [],
+				wpId: "",
+				wtId: "",
+				windturbines: [],
+				alarmDesc: "",
+				startDate: "",
+				endDate: "",
+				tableLoading: true,
+				pageIndex: 1,
+				pageSize: 20,
+				tableData: {
+					column: [{
+							name: "场站",
+							field: "stationName",
+							is_num: false,
+							is_light: false,
+							id: "id",
+						},
+						{
+							name: "机组",
+							field: "windturbineName",
+							is_num: false,
+							is_light: false,
+							id: "id",
+						},
 
-          {
-            name: "报警时间",
-            field: "alertTime",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-            id: "id",
-          },
-          {
-            name: "报警描述",
-            field: "alertText",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-            id: "id",
-          },
-          {
-            name: "报警类别",
-            field: "category2",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-            id: "id",
-            template: function (row) {
-              return that.partsMap[row];
-            },
-          },
-          {
-            name: "报警等级",
-            field: "messageType",
-            is_num: false,
-            is_light: false,
-            sortable: true,
-            id: "id",
-          },
-        ],
-        data: [],
-        currentPageTotal: 0,
-      },
-    };
-  },
-  created() {
-    this.ChangZhanVal();
-    this.Windturbines();
-    let end = new Date();
-    let start = new Date(end.getTime() - 1 * 24 * 60 * 60 * 1000);
-    this.endDate = end.formatDate("yyyy-MM-dd hh:mm:ss");
-    this.startDate = start.formatDate("yyyy-MM-dd hh:mm:ss");
-    this.getTable();
-  },
-  methods: {
-    // 场站
-    ChangZhanVal() {
-      var that = this;
-      that.API.requestData({
-        method: "GET",
-        baseURL: "http://192.168.1.14:8075/alarm/history/page?category1=GF&starttime=2021-11-10%2009:57:57&pagenum=1&pagesize=20&endtime=2021-11-11%2009:57:57&stationid=HZJ_GDC&category2=&keyword=&windturbineid=",
-        // subUrl: "thing/station",
-        success(res) {
-			console.log(res)
-          that.ChangZhan = res.data;
-          that.stationId = res.data[0].id;
-        },
-      });
-    },
-    Windturbines() {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windturbineAjax",
-        data: { wpId: that.stationId },
-        success(res) {
-          that.windturbines = res.data;
-          // that.wtId = res.data[0].id;
-          that.windturbines.unshift({ id: "", name: "请选择" });
-          that.wtId = "";
-        },
-      });
-    },
-    getTable() {
-      let that = this;
-      this.tableLoading = true;
-      this.API.requestData({
-        timeout: 30000,
-        method: "GET",
-        baseURL: "http://192.168.1.18:8075/",
-        subUrl: "alarm/history/page",
-        data: {
-          category1: "windturbine",
-          stationid: this.stationId,
-          starttime: this.startDate,
-          endtime: this.endDate,
-          keyword: this.alarmDesc,
-          windturbineid: this.wtId,
-          pagenum: this.pageIndex,
-          pagesize: this.pageSize,
-        },
-        success(res) {
-          if (res.data) {
-            that.tableData.data = res.data.records;
-            that.tableData.total = res.data.total;
-          } else {
-            that.tableData.data = [];
-            that.tableData.total = 0;
-          }
-          that.tableLoading = false;
-        },
-      });
-    },
-    onChangePage(params) {
-      this.pageIndex = params.pageIndex;
-      this.pageSize = params.pageSize;
-      this.getTable();
-      console.log("页码切换:", params);
-    },
-
-    sizeChange(res) {
-      console.log("每页数量:", res);
-    },
-
-    pageClick(res) {
-      console.log("页码:", res);
-    },
-
-    exportExcel() {
-      let excelData = this.BASE.deepCopy(this.tableData);
-      excelData.data.forEach((ele) => {
-        ele["category2"] = this.partsMap[ele["category2"]];
-      });
-      this.BASE.exportExcel(excelData, "SCADA报警");
-    },
-  },
-};
+						{
+							name: "报警时间",
+							field: "alertTime",
+							is_num: false,
+							is_light: false,
+							id: "id",
+						},
+						{
+							name: "报警描述",
+							field: "alertText",
+							is_num: false,
+							is_light: false,
+							id: "id",
+						},
+						{
+							name: "报警类别",
+							field: "category2",
+							is_num: false,
+							is_light: false,
+							id: "id",
+						},
+						{
+							name: "报警等级",
+							field: "messageType",
+							is_num: false,
+							is_light: false,
+							sortable: true,
+							id: "id",
+						},
+					],
+					data: [],
+					currentPageTotal: 0,
+				},
+			};
+		},
+		created() {
+			let end = new Date();
+			let start = new Date(end.getTime() - 1 * 24 * 60 * 60 * 1000);
+			this.endDate = end.formatDate("yyyy-MM-dd hh:mm:ss");
+			this.startDate = start.formatDate("yyyy-MM-dd hh:mm:ss");
+			this.ChangZhanVal();
+		},
+		methods: {
+			// 场站
+			ChangZhanVal() {
+				var that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL: "http://10.155.32.4:9001/benchmarking/wpgflist",
+					success(res) {
+						that.ChangZhan = res.data;
+						that.wpId = res.data[0].id;
+						that.Windturbines(that.wpId)
+						if(that.waitAjax){
+							that.getTable();
+							that.waitAjax=false;
+						}
+					},
+				});
+			},
+			Windturbines(wpId) {
+				let that = this;
+				that.API.requestData({
+					method: "GET",
+					baseURL: "http://10.155.32.4:8082/",
+					subUrl: "powercompare/windturbineAjax",
+					data: {
+						wpId: wpId
+					},
+					success(res) {
+						that.windturbines = res.data;
+						that.windturbines.unshift({
+							id: "",
+							name: "请选择"
+						});
+					},
+				});
+			},
+			getTable() {
+				let that = this;
+				this.tableLoading = true;
+				this.API.requestData({
+					timeout: 30000,
+					method: "GET",
+					baseURL: "http://192.168.1.18:8075/",
+					subUrl: "alarm/history/page",
+					data: {
+						category1: "windturbine",
+						stationid: this.wpId,
+						starttime: this.startDate,
+						endtime: this.endDate,
+						keyword: this.alarmDesc,
+						windturbineid: this.wtId,
+						pagenum: this.pageIndex,
+						pagesize: this.pageSize,
+					},
+					success(res) {
+						if (res.data) {
+							that.tableData.data = res.data.records;
+							that.tableData.total = res.data.total;
+							console.log(that.tableData)
+						} else {
+							that.tableData.data = [];
+							that.tableData.total = 0;
+						}
+						that.tableLoading = false;
+					},
+				});
+			},
+			onChangePage(params) {
+				this.pageIndex = params.pageIndex;
+				this.pageSize = params.pageSize;
+				this.getTable();
+			},
+			exportExcel() {
+				let excelData = this.BASE.deepCopy(this.tableData);
+				this.BASE.exportExcel(excelData, "光伏告警");
+			},
+		},
+	};
 </script>
 <style lang="less">
-.title {
-  background: rgba(255, 255, 255, 0.1);
-  margin-bottom: 8px;
-  padding: 1vh;
-}
-</style>
+	.title {
+		background: rgba(255, 255, 255, 0.1);
+		margin-bottom: 8px;
+		padding: 1vh;
+	}
+</style>