新增点击 限电详情

src/views/warn/xdgl.vue

@@ -1,229 +1,393 @@
 <template>
-  <div class="knowledge-2">
-    <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">
-              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="query-item">
-            <div class="lable">开始日期：</div>
-            <div class="search-input">
-              <el-date-picker v-model="value1" @change="BeginChange(value1)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-            </div>
-          </div>
-          <div class="query-item">
-            <div class="lable">结束日期：</div>
-            <div class="search-input">
-              <el-date-picker v-model="value2" @change="EndChange(value2)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-              <div class="unit svg-icon svg-icon-gray">
-                <svg-icon :svgid="''" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="query-actions" style="margin-right: 1500px">
-        <button class="btn green" @click="onClickSearch">查询</button>
-      </div>
-    </div>
-    <div>
-      <ComTable :data="tableData" height="85vh"></ComTable>
-    </div>
-  </div>
+	<div class="knowledge-2">
+		<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">
+							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="query-item">
+						<div class="lable">开始日期：</div>
+						<div class="search-input">
+							<el-date-picker v-model="value1" @change="BeginChange(value1)" type="date"
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+							</el-date-picker>
+						</div>
+					</div>
+					<div class="query-item">
+						<div class="lable">结束日期：</div>
+						<div class="search-input">
+							<el-date-picker v-model="value2" @change="EndChange(value2)" type="date"
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+							</el-date-picker>
+							<div class="unit svg-icon svg-icon-gray">
+								<svg-icon :svgid="''" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="query-actions" style="margin-right: 1500px">
+				<button class="btn green" @click="onClickSearch">查询</button>
+			</div>
+		</div>
+		<div>
+			<ComTable :data="tableData" height="85vh"></ComTable>
+		</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 {
-  components: { ComTable },
-  data () {
-    return {
-      value1: "",
-      value2: "",
-      wpId: "",
-      wpArray: [],
-      tableData: {
-        column: [
-          {
-            name: "编号",
-            field: "id",
-             width: "50px",
-            is_num: true,
-            is_light: false,
-          },
-          {
-            name: "限电时刻",
-            field: "stopTime",
-              width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "恢复时刻",
-            field: "startTime",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "停机类型",
-            field: "stopTypeId",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "限电时间",
-            field: "stopHours",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "损失电量(kWh)",
-            field: "lossPower",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "限电原因",
-            field: "description",
-             width: "200px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "关联风机",
-            field: "wts",
-            is_num: false,
-            is_light: false,
-          },
-        ],
-        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);
-        }
-      });
-    },
+	export default {
+		components: {
+			ComTable
+		},
+		data() {
+			const that = this;
+			return {
+				value1: "",
+				value2: "",
+				wpId: "",
+				wpArray: [],
+				dialogVisible: false,
+				main:[],
+				tableList:{
+					column: [{
+							name: "编号",
+							field: "index",
+							width: "50px",
+							is_num: true,
+							is_light: false,
+						},
+						{
+							name: "风机",
+							field: "windturbineid",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电时刻",
+							field: "stopTime",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "恢复时刻",
+							field: "startTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "停机小时数",
+							field: "stophours",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "损失电量(KWh)",
+							field: "losspower",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+					],
+					data: [],
+				},
+				tableData: {
+					column: [{
+							name: "编号",
+							field: "index",
+							width: "50px",
+							is_num: true,
+							is_light: false,
+						},
+						{
+							name: "限电时刻",
+							field: "stopTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "恢复时刻",
+							field: "startTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "停机类型",
+							field: "stopTypeId",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电时间",
+							field: "stopHours",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "损失电量(kWh)",
+							field: "lossPower",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电原因",
+							field: "description",
+							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) {
-      this.value1 = vl;
-    },
-    EndChange (vl) {
-      this.value2 = vl;
-    },
-    typeChange (vl) {
-      this.type = vl;
-    },
-    // 搜索按钮
-    onClickSearch () {
-      this.requestSafeList();
-    },
-    // 获取限电事间
-    requestSafeList () {
-      let that = this;
+			BeginChange(vl) {
+				this.value1 = vl;
+			},
+			EndChange(vl) {
+				this.value2 = vl;
+			},
+			typeChange(vl) {
+				this.type = vl;
+			},
+			// 搜索按钮
+			onClickSearch() {
+				this.requestSafeList();
+			},
+			// 获取限电事间
+			requestSafeList() {
+				let that = this;
 
-      let data = {
-        tablepar: {
-          pageNum: 1,
-          pageSize: 1000,
-        },
-        beginDate: that.value1,
-        endDate: that.value2,
-        wpId: that.wpId,
-      };
+				let data = {
+					tablepar: {
+						pageNum: 1,
+						pageSize: 1000,
+					},
+					beginDate: that.value1,
+					endDate: that.value2,
+					wpId: that.wpId,
+				};
 
-
-
-      this.API.requestData({
-        method: "POST",
-        subUrl: "/brownouts/getBrownoutsList",
-        data,
-        success (res) {
-          if (res.code == 200) {
-            that.tableData.data = [];
-            if (res.data.list.length) {
-              let data = res.data.list;
-              for (var i = 0; i < data.length; i++) {
-                let obj = {
-                  id: i + 1,
-                  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"),
-                  stopTypeId: data[i].stopTypeId,
-                  stopHours: data[i].stopHours,
-                  lossPower: data[i].lossPower,
-                  description: data[i].description,
-                  wts: data[i].wts,
-                };
-                that.tableData.data.push(obj);
-              }
-            }
-          }
-        },
-      });
-    },
-  },
-};
+				this.API.requestData({
+					method: "POST",
+					subUrl: "/brownouts/getBrownoutsList",
+					data,
+					success(res) {
+						if (res.code == 200) {
+							that.tableData.data = [];
+							if (res.data.list.length) {
+								let data = res.data.list;
+								for (var i = 0; i < data.length; i++) {
+									let obj = {
+										index: i + 1,
+										id: data[i].id,
+										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"),
+										stopTypeId: data[i].stopTypeId,
+										stopHours: data[i].stopHours,
+										lossPower: data[i].lossPower,
+										description: data[i].description,
+										wts: data[i].wts,
+									};
+									that.tableData.data.push(obj);
+								}
+							}
+						}
+					},
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="less" scope>
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.knowledge-2 {
-  .el-select {
-    width: 200px;
-  }
-  .el-input {
-    width: 200px;
-  }
-}
+	@titleGray: #9ca5a8;
+	@rowGray: #606769;
+	@darkBack: #536268;
+
+	.knowledge-2 {
+		.el-select {
+			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>