sis_zhfx/src/views/Decision/Decision4Czzl.vue

<template>
	<div class="decision-page-4">
		<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="value4" @change="BeginChange(value4)" 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="value5" @change="EndChange(value5)" 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="mg-b-16">
			<div class="project-table">
				<Table :data="tableData"></Table>
			</div>
		</div>

		<el-dialog :title="'操作：' + tabsTit" v-model="dialogVisible" width="20%" top="10vh" custom-class="modal"
			:close-on-click-modal="false">
			<div class="health-day-info">
				<div class="body">
					<div class="left">
						<table class="table-form">
							<tr>
								<td class="white">风机</td>
								<td class="white">时间</td>
							</tr>
							<tr v-for="item in tabs">
								<td class="white">{{item.wtid}}</td>
								<td class="white">{{item.time.substr(0, 10)}}</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 点击哪个显示哪个的操作记录 -->
	</div>
</template>

<script>
	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
	import Panel from "../../components/coms/panel/panel.vue";
	import Table from "../../components/coms/table/table.vue";
	export default {
		components: {
			Panel,
			Table,
			SvgIcon
		},
		data() {
			let that = this;
			return {
				tableData: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "值际",
							field: "nameOfDuty",
							is_num: false,
							is_light: false,
						},
						{
							name: "启动",
							field: "startCount",
							is_num: false,
							is_light: false,
							param: 1,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						},
						{
							name: "停机",
							field: "stopCount",
							is_num: false,
							is_light: false,
							param: 2,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						},
						{
							name: "复位",
							field: "resetCount",
							is_num: false,
							is_light: false,
							param: 3,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						},
						{
							name: "维护",
							field: "maintainCount",
							is_num: false,
							is_light: false,
							param: 4,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						},
						{
							name: "取消维护",
							field: "unmaintainCount",
							is_num: false,
							is_light: false,
							param: 5,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						},
						{
							name: "挂牌检修",
							field: "gpmaintainCount",
							is_num: false,
							is_light: true,
							param: 6,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						},
						{
							name: "故障维修",
							field: "gpfaultCount",
							is_num: false,
							is_light: false,
							param: 7,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						}, {
							name: "场内受累检修",
							field: "gponsiteinvolvementMaintainCount",
							is_num: false,
							is_light: false,
							param: 8,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						}, {
							name: "场内受累故障",
							field: "gponsiteinvolvementFaultCount",
							is_num: false,
							is_light: false,
							param: 9,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						}, {
							name: "场外受累电网",
							field: "gpoffsiteaffectedgridCount",
							is_num: false,
							is_light: false,
							param: 10,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						}, {
							name: "场外受累天气",
							field: "gpweatherOutsideCount",
							is_num: false,
							is_light: false,
							param: 11,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						}, {
							name: "取消挂牌",
							field: "ungpCount",
							is_num: false,
							is_light: false,
							param: 12,
							click: function(event, data) {
								that.ajaxClick(data.nameOfDuty, this.param)
							}
						}
					],
					data: []
				},
				value4: "",
				value5: "",
				dialogVisible: false,
				tabs: [],
				tabsTit: "",
				tabsArr: ['启动', '停机', '复位', '维护', '取消维护', '挂牌检修', '故障维修', '场内受累检修', '场内受累故障', '场外受累电网', '场外受累天气', '取消挂牌'],
			};
		},
		created() {
			this.value4 = this.getTime(1);
			this.value5 = this.getTime(2);
			this.AjaxCommon();
		},
		methods: {
			BeginChange(val) {
				this.value4 = val;
				this.AjaxCommon();
			},
			EndChange(val) {
				this.value5 = val;
				this.AjaxCommon();
			},
			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;
				}
			},
			AjaxCommon() {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/zjlist",
					data: {
						beginDate: that.value4,
						endDate: that.value5,
					},
					success(res) {
						var data = [];
						res.data.forEach((item, index) => {
							data.push({
								index: index + 1,
								nameOfDuty: item.nameOfDuty,
								startCount: item.startCount,
								stopCount: item.stopCount,
								resetCount: item.resetCount,
								maintainCount: item.maintainCount,
								unmaintainCount: item.unmaintainCount,
								gpmaintainCount: item.gpmaintainCount,
								gpfaultCount: item.gpfaultCount,
								gponsiteinvolvementMaintainCount: item.gponsiteinvolvementMaintainCount,
								gponsiteinvolvementFaultCount: item.gponsiteinvolvementFaultCount,
								gpoffsiteaffectedgridCount: item.gpoffsiteaffectedgridCount,
								gpweatherOutsideCount: item.gpweatherOutsideCount,
								ungpCount: item.ungpCount,
								is_light: false
							})
						})
						that.tableData.data = data;
					}
				});
			},
			ajaxClick(dutyname, direct) {
				var that = this;
				that.tabsTit = that.tabsArr[direct - 1];
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/zjdrill",
					data: {
						beginDate: that.value4,
						endDate: that.value5,
						dutyname: dutyname,
						direct: direct,
					},
					success(res) {
						if(res.data.length){
							that.tabs = res.data;
						}else{
							that.tabs=[{wtid:'暂无数据',time:'暂无数据'}];
						}
						that.dialogVisible = true;
					}
				});
			}
		}
	};
</script>

<style lang="less">
	.decision-page-4 {
		.com-panel {
			.panel-title {
				color: @gray-l;
			}

			.tools {
				display: flex;

				.tool-block {
					display: flex;
					align-items: center;
					margin-left: 0.741vh;

					.legend {
						flex: auto;
						width: 0.741vh;
						height: 0.741vh;
						margin-right: 0.741vh;

						&.long {
							width: 2.963vh;
							height: 0.37vh;
						}
					}

					.legend-text {
						color: @gray-l;
						font-size: @fontsize-s;
					}
				}
			}
		}

		.project-table {
			overflow: auto;
			height: 90vh;

			tbody {
				// height: 100vh;
			}

			th,
			td {
				color: #b2bdc0;

				&:nth-child(1) {
					width: 50px;
				}

				&:nth-child(2) {
					width: 50px;
				}
			}
		}

		.action {
			text-decoration: underline;
			color: @green;
			cursor: pointer;
		}

		.health-day-info .left {
			max-height: 75vh;
			overflow: auto;
		}
		
	}
</style>