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)" clearable 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 multiple-limit="5"
							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 class="query-actions">
					<button class="btn" @click="reset">重置</button>
				</div>
			</div>
			<div class="actions mg-b-8">
				<button class="btn" :class="TypeClass==0?'green':''" @click="TypeClick(0)">日风电机对比</button>
				<button class="btn" :class="TypeClass==1?'green':''" @click="TypeClick(1)">月风电机对比</button>
				<button class="btn" :class="TypeClass==2?'green':''" @click="TypeClick(2)">年风电机对比</button>
			</div>
		</div>
		<!-- 列表 -->
		<toolbar-panel title="单机横向对比" :showLine="false"></toolbar-panel>
		<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">{{listName[i - 2]}}</div>
									<div class="direction-chart" :class="(i-2) < fzyData.length?'':'hide'">
										<normal-radar-chart :width="'70%'" :height="'232px'" :value="fzyData[i-2]" />
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- 日功率曲线 -->
			<div>
				<toolbar-panel :title="'日功率曲线'">
					<template v-slot:tools>
						<div class="tools">
							<div class="tool-block" v-for="(item , index) in listName">
								<div class="legend" :class="'bg-'+(index + 1)"></div>
								<div class="legend-text">{{item}}</div>
							</div>
						</div>
					</template>
					<double-line-chart :height="'200px'" :list="list" />
				</toolbar-panel>
			</div>
		</div>
	</div>

</template>

<script>
	import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
	import NormalRadarChart from "../../components/chart/radar/normal-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,
			ToolbarPanel,
			DoubleLineChart,
			NormalRadarChart
		},
		data() {
			return {
				tableData: {
					column: [{
							name: "",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "项目",
							field: "name",
							is_num: false,
							is_light: false,
						},
						{
							name: "",
							field: "data1",
							is_num: false,
							is_light: false,
						},
						{
							name: "",
							field: "data2",
							is_num: false,
							is_light: false,
						},
						{
							name: "",
							field: "data3",
							is_num: false,
							is_light: false,
						},
						{
							name: "",
							field: "data4",
							is_num: false,
							is_light: false,
						}, {
							name: "",
							field: "data5",
							is_num: false,
							is_light: false,
						}
					],
					data: [],
				},
				ChangZhan: [], //场站
				XiangMu: [], //项目
				value1: [],
				value2: [],
				value4: "",
				fzyData: [],
				list: [{value: [{text: "",value: 0,}]}],
				listName: [],
				TypeClass:0,
				ajaxArr:['daydjhxdbtop','monthdjhxdbtop','yeardjhxdbtop'],
				ajaxName:'daydjhxdbtop'
			};
		},
		created() {
			this.ChangZhanVal();
			this.value4 = this.getTime(1);
			this.AjaxCommon();
		},
		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.AjaxCommon();
				this.XiangMuVal(val);
			},
			XiangMuVal(val) {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/wtList",
					data: {
						wpid: val
					},
					success(res) {
						that.XiangMu = res.data;
					}
				});
			},
			XiangMuChange(val) {
				var that = this;
				that.value2 = val;
				that.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/"+that.ajaxName,
					data: {
						wpid: that.value1,
						wtids: that.value2,
						date: that.value4,
						target: '',
						sort: ''
					},
					success(res) {
						var data = res.data,
							data2 = [],
							chart = [],
							fzy = [],
							fzyArr = [],
							jfpl = [],
							jfplArr = [];
						let thisItem = [];
						jfpl = data.pop(); //静风频率
						fzy = data.pop(); //风资源
						if(fzy['1'] == null){
							that.BASE.showMsg({
								msg:'此风机无数据',
								type:'success'
							});
							return false;
						}
						data.forEach((ele, index) => {
							for (let key in ele) {
								if (key !== "name") {
									thisItem.push(ele[key])
								}
							}
						})

						var count = thisItem.length / data.length;

						data.forEach((item, index) => {
							data2.push({
								index: index + 1,
								name: item.name,
								data1: thisItem[index * count],
								data2: count >= 2 ? thisItem[index * count + 1] : [],
								data3: count >= 3 ? thisItem[index * count + 2] : [],
								data4: count >= 4 ? thisItem[index * count + 3] : [],
								data5: count >= 5 ? thisItem[index * count + 4] : [],
								is_light: false
							})
						})

						Object.keys(fzy).map((key) => {
							fzyArr.push(fzy[key])
						})
						Object.keys(jfpl).map((key) => {
							jfplArr.push(jfpl[key])
						})
						fzyArr.pop();
						var jfplName = jfplArr.pop();
						var indicator = ["北", "北北西", "北西", "西北西", "西", "西南西", "南西", "南南西", "南", "南南东", "东南", "东南东",
							"东", "东北东", "北东", "北北东"
						];

						var fzyDataArr = [];
						fzyArr.forEach((item, index) => {
							var arr = [];
							item.forEach((e, i) => {
								arr.push(e.value)
							});
							fzyDataArr.push([{
								indicator: indicator,
								data: [{
									value: arr
								}],
								name: jfplArr[index]
							}])
						});
						that.fzyData = fzyDataArr;
						that.tableData.data = data2;
					}
				});
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "benchmarking/djhxdbbottom",
					data: {
						wpid: that.value1,
						wtids: that.value2,
						date: that.value4
					},
					success(res) {
						var data = res.data;

						var arrName = [],
							arrKey = [],
							arrData = [],
							tempArray = [];
						data.forEach(ele => {
							for (let key in ele) {
								if (key !== "name") {
									arrKey.push(key)
									arrData.push(ele[key])
								} else {
									arrName.push(ele[key])
								}
							}
						});
						that.listName = arrName;
						for (var i = 0; i < arrKey.length - 1; i++) { //冒泡排序
							for (var j = 0; j < arrKey.length - 1 - i; j++) {
								if (parseInt(arrKey[j]) > parseInt(arrKey[j + 1])) {
									var temp = arrKey[j];
									arrKey[j] = arrKey[j + 1];
									arrKey[j + 1] = temp;
									var temp2 = arrData[j];
									arrData[j] = arrData[j + 1];
									arrData[j + 1] = temp2;
								}
							}
						}
						for (var i = 0; i < data.length; i++) {
							var arr = [];
							arrData.forEach((e, index) => {
								if ((index * data.length + i) < arrData.length) {
									arr.push({
										text: arrKey[index * data.length + i],
										value: arrData[index * data.length + i],
									})
								}
							})
							tempArray.push({
								title: arrName[i],
								value: arr
							})
						}
						that.list = tempArray
					}

				});
			},
			reset() { //重置
				this.value1 = [];
				this.value2 = [];
				this.value4 = this.getTime(1);
				this.AjaxCommon();
			},
			TypeClick(val) {
				this.TypeClass = val;
				// 重置状态start
				this.value1 = [];
				this.value2 = [];
				this.value4 = this.getTime(1);
				this.ajaxName=this.ajaxArr[val];
				this.AjaxCommon();
				// 重置状态end
			},
		}
	};
</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;
							}
						}
					}
				}
			}
		}
	}

	.hide {
		opacity: 0;
	}

	.bg-1 {
		background: #05bb4c
	}

	.bg-2 {
		background: #f8de5b
	}

	.bg-3 {
		background: #4b55ae
	}

	.bg-4 {
		background: #fa8c16
	}

	.bg-5 {
		background: #1DA0D7
	}
</style>