hb_sis_zhfx/src/views/Decision/Decision4.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>
		<toolbar-panel title="值际对标" :showLine="false"></toolbar-panel>
		<div class="mg-b-16">
			<div class="project-table">
				<Table :data="tableData"></Table>
			</div>
		</div>
	</div>
</template>

<script>
	import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
	import Panel from "../../components/coms/panel/panel.vue";
	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
	import Table from "../../components/coms/table/table.vue";
	export default {
		components: {
			Panel,
			Table,
			SvgIcon,
			MultipleBarChart,
			ToolbarPanel
		},
		data() {
			return {
				tableData: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "值际",
							width:"200px",
							field: "dutyname",
							is_num: false,
							is_light: false,
						},
						{
							name: "理论发电量",
							field: "theoreticalgeneratity",
							is_num: false,
							is_light: false,
						},
						{
							name: "实际发电量",
							field: "generatity",
							is_num: false,
							is_light: false,
						},
						{
							name: "故障损失",
							field: "faultloss",
							is_num: false,
							is_light: false,
						},
						{
							name: "维护损失",
							field: "mainloss",
							is_num: false,
							is_light: false,
						},
						{
							name: "性能损失",
							field: "performanceloss",
							is_num: false,
							is_light: false,
						},
						{
							name: "限电损失",
							field: "rationingloss",
							is_num: false,
							is_light: false,
						},
						{
							name: "受累损失",
							field: "involvesloss",
							is_num: false,
							is_light: false,
						}
					],
					data: []
				},
				value4: "",
				value5: "",
			};
		},
		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/zjwxssl",
					data: {
						beginDate: that.value4,
						endDate: that.value5,
					},
					success(res) {
						var data = [];
						
						res.data.forEach((item, index) => {
							data.push({
								index: index + 1,
								dutyname: item.dutyname,
								theoreticalgeneratity: item.theoreticalgeneratity,
								generatity: item.generatity,
								faultloss: item.faultloss,
								mainloss: item.mainloss,
								performanceloss: item.performanceloss,
								rationingloss: item.rationingloss,
								involvesloss: item.involvesloss,
								is_light: false
							})
						})
						that.tableData.data = data;
					}
				});
			},
		}
	};
</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;
				}
			}
		}
	}
</style>