新增点击 限电详情

src/views/warn/xdgl.vue

@@ -1,229 +1,393 @@
 <template>
-  <div class="knowledge-2">
+	<div class="knowledge-2">
-    <div class="query mg-b-8">
+		<div class="query mg-b-8">
-      <div class="query-items">
+			<div class="query-items">
-        <div class="query-item">
+				<div class="query-item">
-          <div class="lable">场站：</div>
+					<div class="lable">场站：</div>
-          <div class="search-input">
+					<div class="search-input">
-            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
+						<el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
-              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
-            </el-select>
+						</el-select>
-          </div>
+					</div>
-        </div>
+				</div>
-        <div class="query-item">
+				<div class="query-item">
-          <div class="query-item">
+					<div class="query-item">
-            <div class="lable">开始日期：</div>
+						<div class="lable">开始日期：</div>
-            <div class="search-input">
+						<div class="search-input">
-              <el-date-picker v-model="value1" @change="BeginChange(value1)" type="date" value-format="YYYY-MM-DD"
+							<el-date-picker v-model="value1" @change="BeginChange(value1)" type="date"
-                placeholder="选择日期" popper-class="date-select">
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
+							</el-date-picker>
-            </div>
+						</div>
-          </div>
+					</div>
-          <div class="query-item">
+					<div class="query-item">
-            <div class="lable">结束日期：</div>
+						<div class="lable">结束日期：</div>
-            <div class="search-input">
+						<div class="search-input">
-              <el-date-picker v-model="value2" @change="EndChange(value2)" type="date" value-format="YYYY-MM-DD"
+							<el-date-picker v-model="value2" @change="EndChange(value2)" type="date"
-                placeholder="选择日期" popper-class="date-select">
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
+							</el-date-picker>
-              <div class="unit svg-icon svg-icon-gray">
+							<div class="unit svg-icon svg-icon-gray">
-                <svg-icon :svgid="''" />
+								<svg-icon :svgid="''" />
-              </div>
+							</div>
-            </div>
+						</div>
-          </div>
+					</div>
-        </div>
+				</div>
-      </div>
+			</div>
-      <div class="query-actions" style="margin-right: 1500px">
+			<div class="query-actions" style="margin-right: 1500px">
-        <button class="btn green" @click="onClickSearch">查询</button>
+				<button class="btn green" @click="onClickSearch">查询</button>
-      </div>
+			</div>
-    </div>
+		</div>
-    <div>
+		<div>
-      <ComTable :data="tableData" height="85vh"></ComTable>
+			<ComTable :data="tableData" height="85vh"></ComTable>
-    </div>
+		</div>
-  </div>
+		<el-dialog title="限电事件" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
+			:close-on-click-modal="false">
+			<table class="com-table tabLog">
+				<tr>
+					<td class="light"> 限电原因：</td>
+					<td>{{main.description}}</td>
+					<td class="light"> 限电类型：</td>
+					<td>{{main.stopTypeId}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电指令：</td>
+					<td>{{main.brownoutsdirective}}</td>
+					<td class="light"> 当时风速(m/s)：</td>
+					<td>{{main.windspeed}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电负荷(MW)：</td>
+					<td>{{main.limitload}}</td>
+					<td class="light"> 当时负荷(MW)：</td>
+					<td>{{main.thisload}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电时刻：</td>
+					<td>{{new Date(main.stoptime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+					<td class="light"> 恢复时刻：</td>
+					<td>{{new Date(main.starttime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电损失电量(KWh)：</td>
+					<td colspan="3">{{main.losspower}}</td>
+				</tr>
+			</table>
+			<div class="header">
+				<span class="herder-info">
+					限电事件记录
+				</span>
+			</div>
+			<ComTable :data="tableList" height="40vh"></ComTable>
+		</el-dialog>
+	</div>
 </template>
 
 <script>
-import ComTable from "@com/coms/table/table.vue";
+	import ComTable from "@com/coms/table/table.vue";
 
-export default {
+	export default {
-  components: { ComTable },
+		components: {
-  data () {
+			ComTable
-    return {
+		},
-      value1: "",
+		data() {
-      value2: "",
+			const that = this;
-      wpId: "",
+			return {
-      wpArray: [],
+				value1: "",
-      tableData: {
+				value2: "",
-        column: [
+				wpId: "",
-          {
+				wpArray: [],
-            name: "编号",
+				dialogVisible: false,
-            field: "id",
+				main:[],
-             width: "50px",
+				tableList:{
-            is_num: true,
+					column: [{
-            is_light: false,
+							name: "编号",
-          },
+							field: "index",
-          {
+							width: "50px",
-            name: "限电时刻",
+							is_num: true,
-            field: "stopTime",
+							is_light: false,
-              width: "150px",
+						},
-            is_num: false,
+						{
-            is_light: false,
+							name: "风机",
-          },
+							field: "windturbineid",
-          {
+							is_num: false,
-            name: "恢复时刻",
+							is_light: false,
-            field: "startTime",
+						},
-             width: "150px",
+						{
-            is_num: false,
+							name: "限电时刻",
-            is_light: false,
+							field: "stopTime",
-          },
+							is_num: false,
-          {
+							is_light: false,
-            name: "停机类型",
+						},
-            field: "stopTypeId",
+						{
-             width: "150px",
+							name: "恢复时刻",
-            is_num: false,
+							field: "startTime",
-            is_light: false,
+							width: "150px",
-          },
+							is_num: false,
-          {
+							is_light: false,
-            name: "限电时间",
+						},
-            field: "stopHours",
+						{
-             width: "150px",
+							name: "停机小时数",
-            is_num: false,
+							field: "stophours",
-            is_light: false,
+							width: "150px",
-          },
+							is_num: false,
-          {
+							is_light: false,
-            name: "损失电量(kWh)",
+						},
-            field: "lossPower",
+						{
-             width: "150px",
+							name: "损失电量(KWh)",
-            is_num: false,
+							field: "losspower",
-            is_light: false,
+							width: "150px",
-          },
+							is_num: false,
-          {
+							is_light: false,
-            name: "限电原因",
+						},
-            field: "description",
+					],
-             width: "200px",
+					data: [],
-            is_num: false,
+				},
-            is_light: false,
+				tableData: {
-          },
+					column: [{
-          {
+							name: "编号",
-            name: "关联风机",
+							field: "index",
-            field: "wts",
+							width: "50px",
-            is_num: false,
+							is_num: true,
-            is_light: false,
+							is_light: false,
-          },
+						},
-        ],
+						{
-        data: [],
+							name: "限电时刻",
-      },
+							field: "stopTime",
-    };
+							width: "150px",
-  },
+							is_num: false,
-  created () {
+							is_light: false,
-    // this.requestSafeList();
+						},
-    this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
+						{
-    this.value2 = this.getTime(2);
+							name: "恢复时刻",
-    this.getWp();
+							field: "startTime",
-    this.requestSafeList();
+							width: "150px",
-  },
+							is_num: false,
-  methods: {
+							is_light: false,
-    getTime (val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+						},
-      var date = new Date();
+						{
-      var year = date.getFullYear(),
+							name: "停机类型",
-        month = date.getMonth() + 1,
+							field: "stopTypeId",
-        day = date.getDate();
+							width: "150px",
-      month >= 1 && month <= 9 ? (month = '0' + month) : '';
+							is_num: false,
-      day >= 0 && day <= 9 ? (day = '0' + day) : '';
+							is_light: false,
-      var begin = year + '-' + month + '-01';
+						},
-      var end = year + '-' + month + '-' + day;
+						{
-      if (val == 1) {
+							name: "限电时间",
-        return begin;
+							field: "stopHours",
-      } else if (val == 2) {
+							width: "150px",
-        return end;
+							is_num: false,
-      }
+							is_light: false,
-    },
+						},
-    // 获取风场
+						{
-    getWp (reGetWp) {
+							name: "损失电量(kWh)",
-      let that = this;
+							field: "lossPower",
-      that.API.requestData({
+							width: "150px",
-        baseURL: "http://10.155.32.4:9001",
+							is_num: false,
-        subUrl: "benchmarking/wplist",
+							is_light: false,
-        success (res) {
+						},
-          that.wpArray = res.data;
+						{
-          that.wpId = res.data[0].id;
+							name: "限电原因",
-          that.wpName = res.data[0].wpId;
+							field: "description",
-          // that.getWt(that.wpId, reGetWp);
+							width: "200px",
-        }
+							is_num: false,
-      });
+							is_light: false,
-    },
+						},
+						{
+							name: "关联风机",
+							field: "wts",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "操作",
+							field: "cz",
+							width: "50px",
+							is_num: false,
+							is_light: false,
+							template: function() {
+								return "<a class='action'>详情</a>";
+							},
+							click: function(event, data) {
+								that.API.requestData({
+									method: "POST",
+									subUrl: "/brownouts/getBrownouts",
+									data: {
+										mainId: data.id
+									},
+									success(res) {
+										if (res.code == 200) {
+											console.log(res)
+											that.main = res.data.main;
+											
+											that.tableList.data = [];
+											if (res.data.list.length) {
+												let data = res.data.list;
+												for (var i = 0; i < data.length; i++) {
+													let obj = {
+														index: i + 1,
+														windturbineid:data[i].windturbineid,
+														stopTime: new Date(data[i].stoptime).formatDate("yyyy-MM-dd hh:mm:ss"),
+														startTime: new Date(data[i].starttime).formatDate("yyyy-MM-dd hh:mm:ss"),
+														stophours: data[i].stophours,
+														losspower: data[i].losspower
+													};
+													that.tableList.data.push(obj);
+													that.dialogVisible = true;
+												}
+											}
+										}
+									},
+								});
+							}
+						}
+					],
+					data: [],
+				},
+			};
+		},
+		created() {
+			// this.requestSafeList();
+			this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
+			this.value2 = this.getTime(2);
+			this.getWp();
+			this.requestSafeList();
+		},
+		methods: {
+			getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+				var date = new Date();
+				var year = date.getFullYear(),
+					month = date.getMonth() + 1,
+					day = date.getDate();
+				month >= 1 && month <= 9 ? (month = '0' + month) : '';
+				day >= 0 && day <= 9 ? (day = '0' + day) : '';
+				var begin = year + '-' + month + '-01';
+				var end = year + '-' + month + '-' + day;
+				if (val == 1) {
+					return begin;
+				} else if (val == 2) {
+					return end;
+				}
+			},
+			// 获取风场
+			getWp(reGetWp) {
+				let that = this;
+				that.API.requestData({
+					baseURL: "http://10.155.32.4:9001",
+					subUrl: "benchmarking/wplist",
+					success(res) {
+						that.wpArray = res.data;
+						that.wpId = res.data[0].id;
+						that.wpName = res.data[0].wpId;
+						// that.getWt(that.wpId, reGetWp);
+					}
+				});
+			},
 
 
-    BeginChange (vl) {
+			BeginChange(vl) {
-      this.value1 = vl;
+				this.value1 = vl;
-    },
+			},
-    EndChange (vl) {
+			EndChange(vl) {
-      this.value2 = vl;
+				this.value2 = vl;
-    },
+			},
-    typeChange (vl) {
+			typeChange(vl) {
-      this.type = vl;
+				this.type = vl;
-    },
+			},
-    // 搜索按钮
+			// 搜索按钮
-    onClickSearch () {
+			onClickSearch() {
-      this.requestSafeList();
+				this.requestSafeList();
-    },
+			},
-    // 获取限电事间
+			// 获取限电事间
-    requestSafeList () {
+			requestSafeList() {
-      let that = this;
+				let that = this;
 
-      let data = {
+				let data = {
-        tablepar: {
+					tablepar: {
-          pageNum: 1,
+						pageNum: 1,
-          pageSize: 1000,
+						pageSize: 1000,
-        },
+					},
-        beginDate: that.value1,
+					beginDate: that.value1,
-        endDate: that.value2,
+					endDate: that.value2,
-        wpId: that.wpId,
+					wpId: that.wpId,
-      };
+				};
 
-
+				this.API.requestData({
-
+					method: "POST",
-      this.API.requestData({
+					subUrl: "/brownouts/getBrownoutsList",
-        method: "POST",
+					data,
-        subUrl: "/brownouts/getBrownoutsList",
+					success(res) {
-        data,
+						if (res.code == 200) {
-        success (res) {
+							that.tableData.data = [];
-          if (res.code == 200) {
+							if (res.data.list.length) {
-            that.tableData.data = [];
+								let data = res.data.list;
-            if (res.data.list.length) {
+								for (var i = 0; i < data.length; i++) {
-              let data = res.data.list;
+									let obj = {
-              for (var i = 0; i < data.length; i++) {
+										index: i + 1,
-                let obj = {
+										id: data[i].id,
-                  id: i + 1,
+										stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-                  stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
+										startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-                  startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
+										stopTypeId: data[i].stopTypeId,
-                  stopTypeId: data[i].stopTypeId,
+										stopHours: data[i].stopHours,
-                  stopHours: data[i].stopHours,
+										lossPower: data[i].lossPower,
-                  lossPower: data[i].lossPower,
+										description: data[i].description,
-                  description: data[i].description,
+										wts: data[i].wts,
-                  wts: data[i].wts,
+									};
-                };
+									that.tableData.data.push(obj);
-                that.tableData.data.push(obj);
+								}
-              }
+							}
-            }
+						}
-          }
+					},
-        },
+				});
-      });
+			},
-    },
+		},
-  },
+	};
-};
 </script>
 
 <style lang="less" scope>
-@titleGray: #9ca5a8;
+	@titleGray: #9ca5a8;
-@rowGray: #606769;
+	@rowGray: #606769;
-@darkBack: #536268;
+	@darkBack: #536268;
-.knowledge-2 {
+
-  .el-select {
+	.knowledge-2 {
-    width: 200px;
+		.el-select {
-  }
+			width: 200px;
-  .el-input {
+		}
-    width: 200px;
+
-  }
+		.el-input {
-}
+			width: 200px;
+		}
+
+		.action {
+			text-decoration: underline;
+			color: @green;
+			cursor: pointer;
+		}
+
+		.com-table.tabLog {
+			tr {
+				height: 40px;
+			}
+
+			.light {
+				width: 10.5rem;
+				color: #05bb4c;
+			}
+		}
+		.header {
+			display: flex;
+			width: 100%;
+			height: 40px;
+			line-height: 40px;
+			background: fade(@gray, 60);
+			color: @white;
+		
+			.herder-info {
+				flex: 1 0 25%;
+				font-size: @fontsize-s;
+				padding-left: 1rem;
+				&:last-child {
+					flex: 1 0 50%;
+				}
+			}
+		}
+	}
 </style>