hb_sis_zhfx/src/views/Decision/Decision3Db.vue

<template>
	<div class="decision-page-3">
		<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="value1" @change="ChangZhanChange(value1)" multiple placeholder="请选择"
							popper-class="select">
							<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="value2" @change="XiangMuChange(value2)" multiple placeholder="请选择"
							popper-class="select">
							<el-option v-for="item in XiangMu" :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-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>
			<div class="actions mg-b-8">
				<button class="btn green">风场</button>
				<button class="btn">项目</button>
				<button class="btn">集电线路</button>
			</div>
		</div>
		<!-- 列表 -->
		<div class="info">
			<div class="mg-b-16">
				<div class="project-table">
					<Table :data="tableData"></Table>
				</div>
			</div>
			<!-- 风资源列表 -->
			<div class="direction-info mg-b-16">
				<table class="com-table">
					<tbody>
						<tr>
							<td v-for="(col, i) of tableData.column" :key="i">
								<div v-if="i == 0">22</div>
								<div v-if="i == 1">风资源</div>
								<div v-if="i != 0 && i != 1">
									<div class="direction-title">3.123</div>
									<div class="direction-chart">
										<DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
										<div class="legend mg-t-16">
											<span class="dot"></span>
											<span>静风频率为2</span>
										</div>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 日功率曲线 -->
			<div>
				<toolbar-panel :title="'日功率曲线'">
					<template v-slot:tools>
						<div class="tools">
							<div class="tool-block">
								<div class="legend bg-green"></div>
								<div class="legend-text">理论功率</div>
							</div>
							<div class="tool-block">
								<div class="legend bg-orange"></div>
								<div class="legend-text">预测功率4小时</div>
							</div>
						</div>
					</template>
					<double-line-chart :height="'200px'" />
					<normal-line-chart :height="'200px'" />
				</toolbar-panel>
			</div>
		</div>
	</div>

</template>

<script>
	import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
	import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
	import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
	import Table from "../../components/coms/table/table.vue";
	export default {
		components: {
			Table,
			SvgIcon,
			DirectionRadarChart,
			ToolbarPanel,
			DoubleLineChart,
			NormalLineChart
		},
		data() {
			return {
				tableData: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "项目",
							field: "name",
							is_num: false,
							is_light: false,
						},
						{
							name: "项目",
							field: "lqf",
							is_num: false,
							is_light: false,
						},
						{
							name: "项目",
							field: "yggl",
							is_num: false,
							is_light: false,
						},
						{
							name: "项目",
							field: "yyy",
							is_num: false,
							is_light: false,
						},
						{
							name: "项目",
							field: "pcspp",
							is_num: false,
							is_light: false,
						},
					],
					data: [{
						index: 1,
						name: "MG01-01",
						lqf: "0.1000",
						yggl: "0.1000",
						yyy: "0.10",
						pcspp: "0.1000",
						u1: "0.1000",
						u2: "0.1000",
						v1: "0.1000",
						v2: "0.1000",
						w1: "0.1000",
						w2: "0.1000",
						zca: "0.1000",
						zcb: "0.1000",
						clx: "0.1000",
						clx1: "0.1000",
						clx2: "0.1000",
						jc: "0.1000",
						hh: "0.1000",
						hj: "0.1000",
						is_light: false,
					}, ],
				},
				options: [{
						value: "选项1",
						label: "黄金糕",
					},
					{
						value: "选项2",
						label: "双皮奶",
					},
					{
						value: "选项3",
						label: "蚵仔煎",
					},
					{
						value: "选项4",
						label: "龙须面",
					},
					{
						value: "选项5",
						label: "北京烤鸭",
					},
				],
				value1: [],
				value2: [],
				value3: [],
				value4: "",
				value5: "",
			};
		},
		created() {
			
		},
		methods:{
			ChangZhanVal() {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL : "http://10.155.32.4:9001/",
					subUrl: "benchmarking/wplist",
					success(res) {
						that.ChangZhan = res.data;
					}
				});
			},
			ChangZhanChange(val) {
				this.value1 = val;
				this.value2 = [];
				this.value3 = [];
				this.AjaxCommon();
				this.XiangMuVal(val);
				this.clearDb();
			},
			XiangMuVal(val) {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL : "http://10.155.32.4:9001/",
					subUrl: "benchmarking/projectList",
					data: {
						wpids: val
					},
					success(res) {
						that.XiangMu = res.data;
					}
				});
			},
			XiangMuChange(val) {
				this.value2 = val;
				this.value3 = [];
				this.AjaxCommon();
				this.XianLuVal(val);
				this.clearDb();
			},
		}
	};
</script>

<style lang="less">
	.decision-page-3 {
		.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;
					}
				}
			}
		}

		.info {
			overflow: auto;
			height: calc(100vh - 150px);
		}

		.project-table {
			overflow: auto;

			.com-table {
				tbody {
					padding-right: 0px;
				}

				th,
				td {
					color: #b2bdc0;

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

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

		.direction-info {
			.com-table {
				tbody {
					padding-right: 0px;
				}

				th,
				td {
					color: #b2bdc0;
					padding: 0;

					&:nth-child(1) {
						width: 32px;
						background-color: fade(#536268, 20);
					}

					&:nth-child(2) {
						width: 183px;
						background-color: fade(#536268, 40);
					}

					.direction-title {
						background-color: fade(#536268, 20);
						font-size: @fontsize-s;
						line-height: 2.963vh;
					}

					.direction-chart {
						padding-top: 48px;

						.legend {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 32px;
							margin-bottom: 16px;

							.dot {
								width: 7px;
								height: 7px;
								background: @green;
								display: inline-block;
								margin-right: 8px;
							}
						}
					}
				}
			}
		}
	}
</style>