PowerAnalysis/src/pages/dataAnalysis/rateAnalysis/index.vue

<script setup name="rateAnalysis">
import excelCop from '@/components/excel.vue'
import treeCop from '@/components/tree.vue'
import chartCop from './components/chart.vue'
import lineChartCop from './components/lineChart.vue'
import SubmitBtn from '../../../components/SubmitBtn.vue'
import scatterSingleChartCop from './components/scatterSingleChart.vue'
// import { ElMessage } from 'element-plus';
import { onMounted, ref, onActivated, shallowRef, reactive, nextTick } from 'vue'
import request from '@/api/axios.js'
import tools from '@tools/htmlToPdf.js'
// import flowerRes from '@/data/flower.json'
// import lineChartRes from '@/data/lineNew.json'
/**配置参数 */
const treeHeight = ref(window.innerHeight - 150 + 'px') //tree高度
const excelHeight = ref(window.innerHeight - 150 + 'px') //excel高度
const tableHeight = ref(window.innerHeight - 150 + 'px')
/**excel 开始 */
const excelCheckIds = ref([])
const excelList = ref([])
//点击excel项时
const funExcelChange = async (obj) => { 
	excelCheckIds.value = [obj.id] //当为单选展示风机图表时
	chartExcelList.value = excelList.value.map(o=> {
		return {
			...o,
			name: o.windturbine
		}
	})  // 选中excel当前项时, excel列表赋值给dialog 下拉框
	queryForm.checkIds = excelList.value.map(o => o.id)
	checkAll.value = true
	funSubmit()
}
const funExcelCheckChange = ({ checkArr, data }) => {
	excelCheckIds.value = checkArr
}
/**tree 开始 */
const treeData = ref([])
const actTreeNode = ref(null)
const funRepeatMap = (arr) => {
	return arr.map(o => {
		if (o.children) {
			const findIndex = o.children.findIndex(p => !!p.type)
			if (findIndex !== -1) {
				o.childs = o.children
				o.children = []
				if(!actTreeNode.value){
					actTreeNode.value = o
				}
			}
		}
		return {
			...o,
			children: o.children?.length ? funRepeatMap(o.children) : []
		}
	})
}
const funGetTree = async () => {
	const res = await request.get("/power/process/tree")
	actTreeNode.value = null
	excelList.value = []
	treeData.value = funRepeatMap(res.data)
	if(actTreeNode.value){
		funCurrentChange({current: actTreeNode.value, currentNode: null})
		funExcelChange({id: actTreeNode.value.childs[0].id})
	}
}
const funTreeCheckChange = ({ current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {  //tree change  -> excel change
	funCurrentChange({ current, currentNode: '' })
	const checkIds = []
	if (checkedNodes.length) {
		for (const node of checkedNodes) {
			if (node.childs && node.childs.length) {
				for (const child of node.childs) {
					checkIds.push(child.id)
				}
			}
		}
	}
	excelCheckIds.value = checkIds
}
const funCurrentChange = ({ current, currentNode }) => {
	if (current.childs) {
		excelList.value = current.childs.map(o => {
			return {
				id: o.id,
				interval: o.interval,
				path: o.path,
				prepareid: o.prepareid,
				station: o.station,
				time: o.time,
				type: o.type,
				windturbine: o.windturbine,
				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
			}
		})
	} else {
		excelList.value = []
	}
}
/**chart */
const funText = (index) => {
	let str = ''
	switch (index) {
		case 0:
			str = '0-2.5'
			break
		case 1:
			str = '2.5-5'
			break
		case 2:
			str = '5-7.5'
			break
		case 3:
			str = '7.5-10'
			break
		case 4:
			str = '10-12.5'
			break
		case 5:
			str = '12.5-15'
			break
		case 6:
			str = '15-17.5'
			break
		case 7:
			str = '17.5-20'
			break
		case 8:
			str = '20-22.5'
			break
		case 9:
			str = '22.5-25'
			break
		case 10:
			str = '25-inf'
			break
	}
	return str
}
const chartData = ref([]) //roses的chartList
let chartId = 1
/**submit */
const funSubmit = async () => {
	const rosesRes = await request.get('/wind/roses', {
		params: {
			ids: excelCheckIds.value.join(','),
			mode: 0
		}
	})
	const lineRes = await request.get('/wind/deviation/ratio', {
		params: {
			ids: excelCheckIds.value.join(','),
			mode: 0
		}
	})
	// const rosesRes = flowerRes
	// const lineRes = lineChartRes
	if (rosesRes.code === 200) {
		if (rosesRes.data?.length) {
			// console.log(rosesRes.data)
			chartData.value = []
			for (const chart of rosesRes.data) {
				chartData.value.push({
					id: chartId,
					title: '',
					subtext: '风速风向玫瑰图',
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['N','', 'N-E','', 'E','', 'S-E','', 'S','', 'S-W','', 'W','', 'W-N',''],
						splitLine: {
							show: true
						},
					},
					isRadar: false,
					series: chart.roses?.length ?chart.roses.map((o, index) => {
						return {
							type: 'bar',
							data: o,
							coordinateSystem: 'polar',
							name: funText(index),
							stack: 'a',
							emphasis: {
								focus: 'series'
							}
						}
					}): []
				})
				chartId++
				chartData.value.push({
					id: chartId,
					title: '',
					subtext: '风速风向频次玫瑰图',
					isRadar: true,
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['N','', 'N-E','', 'E','', 'S-E','', 'S','', 'S-W','', 'W','', 'W-N',''],
						splitLine: {
							show: true
						}
					},
					series: chart.count?.length? [...chart.count.map((o,index) => {
								return {
									type: 'bar',
									data: o,
									coordinateSystem: 'polar',
									name: funText(index),
									stack: 'a',
									emphasis: {
										focus: 'series'
									}
								}
							}), {
								type: 'radar',
								// coordinateSystem: 'polar',
								tooltip: {
									trigger: 'item',
								},
								// smooth: true,
								// areaStyle: {},
								name: '对风',
								data: [{
									value: chart.radar,
								}],
							}]: []
				})
				chartId++
				scatterSeries.value[0].data = chart.frequency.data?.length? chart.frequency.data.map((item) => {
						return [item[1]+'', item[0]+'', (item[2]*15).toFixed(1)];
				}) : []
				scatterSeries.value[0].markLine.data = [{
					xAxis: `${chart.frequency.avg}`,
					name: `平均偏航：${chart.frequency.avg}度`,
				}]
			}
		}
	}
	if(lineRes.code === 200){
		if(lineRes.data?.length){
			lineDataSet.value[0].source = lineRes.data[0].scatter.map(o => {
				return [o.x+'', o.y]
			})
			lineSeries.value = [{
				name: "对风频次",
				type: "line",
				symbol: "line", //设定为实心点
				symbolSize: 0, //设定实心点的大小
				smooth: true, //这个是把线变成曲线
				data: lineRes.data[0].count,
				yAxisIndex: 1,
			},
			{
				type: 'effectScatter',
				showEffectOn: "emphasis",
				
				rippleEffect: {
					scale: 1
				},
				legendHoverLink: false,
				name: '数据散点',
				symbolSize: 5,
				datasetIndex: 0,
				encode: {
					x: 'x',
					y: 'y'
				},
				yAxisIndex: 0,
			}]
		}
	}
}
/**lineChart */
const linexAxis = ref({
	type: 'category',
	data: new Array(101).fill(-50).map((o,index) => Number((o + index).toFixed(1))),
	splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
})
const lineyAxis = ref([
	{
		type: 'value',
		name: 'm/s',
		splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
	},{
		type: 'value',
		name: '频次',
		splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
	}
])
const lineSeries = ref([])
const lineDataSet = ref([
	{
		source: []
	}
])
// 圈选散点触发函数
const funChartSelect = async (batch) => {
	const wDataArr = []
	const yDataArr = []
	let scatterls = []
	let dataSetObj = []
	wtData.value = []
	if (batch?.length && actCopList.value[0]?.dataset) {
		scatterls = batch[0].selected[1].dataIndex
		if (scatterls?.length) {
			dataSetObj = JSON.parse(actCopList.value[0].dataset)
			if (scatterls?.length) {
				for (const scatterIndex of scatterls) {
					wDataArr.push(dataSetObj[0].source[scatterIndex].k)
				}
			}
			const wtRes = await request.get('/power/fitting/filter', { params: { yk: yDataArr.join(','), wk: wDataArr.join(',') } })
			if (wtRes.code === 200) {
				let id = 1
				const tempArr = [] //用于以风机id 聚合dataArr
				if (wtRes.data?.length) {
					for (const data of wtRes.data) {
						if (tempArr.length) {
							const findIndex = tempArr.findIndex(o => o.wtId === data.wtId)
							if (findIndex !== -1) {
								if (!tempArr[findIndex].children) {
									tempArr[findIndex].children = []
								}
								tempArr[findIndex].children.push({ ...data, id: id, filter: data.filter === 0 ? '是' : '否' })
								id++
							} else {
								tempArr.push({ ...data, id: id, filter: data.filter === 0 ? '是' : '否' })
								id++
							}
						} else {
							tempArr.push({ ...data, id: id, filter: data.filter === 0 ? '是' : '否' })
							id++
						}
					}
					wtDialog.value = true
					nextTick(() => {
						wtTab.value = 'table'
						wtData.value = tempArr
					})
				}
			}
		}
	}
}
/**scatter chart */
const scatterxData = ref([
	{
		type: 'category',
		name: '度',
		data:  new Array(61).fill(-30).map((o,index) => Number((o + index))),
		boundaryGap: false,
		splitLine: {
			show: true
		},
		axisLine: {
			show: true
		}
	}
])
const scatteryData = ref([
	{
		type: 'category',
		data: [5,6,7,8,9,10],
		axisLine: {
			show: false
		},
		name: 'm/s',
		splitLine: {
			show: false
		},
	},
])
const scatterSeries = ref(
	[
				{
					name: '对风偏航',
					type: 'scatter',
					symbolSize: function (val) {
						return val[2];
					},
					data: [],
					markLine: {
							symbol: 'none',
							label: {
								show: false,
							},
							lineStyle: {
								color: '#F72C5B',
								width: '3',
							},
							data: [
								{
								// yAxis: powerproductionNum.value,
								}
							]
					},
					animationDelay: function (idx) {
						return idx * 5;
					}
				}
			]
)
/**dialog 数据 */
const wtDialog = ref(false)
const wtData = ref([])
const wtTab = ref('table')
/**dialog */
const dialog = ref(false)
const actChartName = ref('')
const actDiaTitle = ref('')
const diaPanelRef = ref()
const exportLoading = ref(false)
const actCopList = ref([
	// {
	// 	xAxis: [],
	// 	subtext: '',
	// 	title: '',
	// 	isRadar: false,
	// 	series: [],
	// 	yAxis: [],
	// 	dataset: []
	// }
])
// 作为actCopList的备份 在actCopList赋值多个时 同时赋值, 在dialog弹出时清空. 作用: 在actCopList变化时, 重新赋值原始数据
const actCopListBak = ref([]) 
const checkAll = ref(true)
const queryForm = reactive({
	checkIds: []
})
const funCheckAll = () => {
	checkAll.value = !checkAll.value
	if(checkAll.value){
		queryForm.checkIds = chartExcelList.value.map(o => o.id)
	}else{
		queryForm.checkIds = []
	}
}
const chartExcelList = ref([]) //dialog 下拉项
const funActCop = (obj, type) => {
	switch(type){
		case 'chartCop1':
			actChartName.value = 'chartCop1'
			obj.actCop = shallowRef(chartCop)
			actDiaTitle.value = '风速风向玫瑰图'
			break
		case 'chartCop2':
			actChartName.value = 'chartCop2'
			obj.actCop = shallowRef(chartCop)
			actDiaTitle.value = '风速风向频次玫瑰图'
			break
		case 'lineChartCop':
			actChartName.value = 'lineChartCop'
			obj.actCop = shallowRef(lineChartCop)
			actDiaTitle.value = '对风偏差分析图'
			break
		case 'scatterSingleChartCop':
			actChartName.value = 'scatterSingleChartCop'
			obj.actCop = shallowRef(scatterSingleChartCop)
			actDiaTitle.value = '静态偏航对风分析图'
			break
	}
	obj.isBrush = type === 'lineChartCop' ? false :false
	obj.id = chartId
	chartId ++
	dialog.value = true
	actCopListBak.value = []
	nextTick(() => {
		actCopList.value = [obj]
	})
}
const funDiaSubmit = async () => {
	let url = ''
	switch(actChartName.value){
		case 'chartCop1':
			url = '/wind/roses'
			break
		case 'chartCop2':
			url = '/wind/roses'
			break
		case 'lineChartCop':
			url = '/wind/deviation/ratio'
			break
		case 'scatterSingleChartCop':
			url = '/wind/roses'
			break
	}
	if(url){
		const res = await request.get(url, {
			params: {
				ids: queryForm.checkIds.join(','),
				mode: 0
			}
		})
		if(res.code===200){
			actCopList.value = []
			actCopListBak.value = [] //清空备份
			if(res.data?.length){
				for(const chart of res.data){
					if(actChartName.value==='chartCop1'){
						actCopList.value.push({
							id: chartId,
							isBrush: false,
							actCop: shallowRef(chartCop),
							title: chart.wt,
							subtext: '风速风向玫瑰图',
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: ['N','', 'N-E','', 'E','', 'S-E','', 'S','', 'S-W','', 'W','', 'W-N',''],
								splitLine: {
									show: true
								},
							},
							isRadar: false,
							series: chart.roses?.length ?chart.roses.map((o, index) => {
								return {
									type: 'bar',
									data: o,
									coordinateSystem: 'polar',
									name: funText(index),
									stack: 'a',
									emphasis: {
										focus: 'series'
									}
								}
							}): []
						})
						chartId++
					}
					if(actChartName.value === 'chartCop2'){
						actCopList.value.push({
							id: chartId,
							isBrush: false,
							actCop: shallowRef(chartCop),
							title: chart.wt,
							subtext: '风速风向频次玫瑰图',
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: ['N','', 'N-E','', 'E','', 'S-E','', 'S','', 'S-W','', 'W','', 'W-N',''],
								splitLine: {
									show: true
								}
							},
							isRadar: true,
							series: chart.count?.length? [...chart.count.map((o,index) => {
									return {
										type: 'bar',
										data: o,
										coordinateSystem: 'polar',
										name: funText(index),
										stack: 'a',
										emphasis: {
											focus: 'series'
										}
									}
								}), {
								type: 'radar',
								// coordinateSystem: 'polar',
								tooltip: {
									trigger: 'item'
								},
								// smooth: true,
								// areaStyle: {},
								name: '对风',
								data: [{
									value: chart.radar,
								}],
							}]: []
						})
						chartId++
					}
					if(actChartName.value === 'lineChartCop'){
						actCopList.value.push({
							id: chartId,
							isBrush: false,
							actCop: shallowRef(lineChartCop),
							title: chart.wtId,
							subtext: '对风偏差分析图',
							xAxis: linexAxis.value,
							yAxis: lineyAxis.value,
							dataset: [{
								source: chart.scatter.map(o => {
									return [o.x+'', o.y]
								})
							}],
							isRadar: false,
							series: [{
								name: "对风频次",
								type: "line",
								symbol: "line", //设定为实心点
								symbolSize: 0, //设定实心点的大小
								smooth: true, //这个是把线变成曲线
								data: chart.count,
								yAxisIndex: 1,
							},
							{
								type: 'effectScatter',
								showEffectOn: "emphasis",
								
								rippleEffect: {
									scale: 1
								},
								legendHoverLink: false,
								name: '数据散点',
								symbolSize: 5,
								datasetIndex: 0,
								encode: {
									x: 'x',
									y: 'y'
								},
								yAxisIndex: 0,
							}]

						})
						chartId++
					}
					if(actChartName.value === 'scatterSingleChartCop'){
						actCopList.value.push({
							id: chartId,
							isBrush: false,
							actCop: shallowRef(scatterSingleChartCop),
							title: chart.wt,
							subtext: '静态偏航对风分析图',
							xAxis: scatterxData.value,
							yAxis: scatteryData.value,
							isRadar: false,
							series: [
								{
									name: '对风偏航',
									type: 'scatter',
									symbolSize: function (val) {
										return val[2];
									},
									markLine: {
											symbol: 'none',
											label: {
												show: false,
											},
											lineStyle: {
												color: '#F72C5B',
												width: '3'
											},
											data: [
												{
													name: `平均偏航：${chart.frequency.avg}度`,
													xAxis: `${chart.frequency.avg}`,
												}
											]
									},
									data: chart.frequency.data?.length? chart.frequency.data.map((item) => {
											return [item[1]+'', item[0]+'', (item[2]*15).toFixed(1)];
									}) : [],
									animationDelay: function (idx) {
										return idx * 5;
									}
								}
							]
						})
						chartId++
					}
				}
				actCopListBak.value = actCopList.value
			}
		}
	}
}
const funDiaExport = () => {
	exportLoading.value = true
	tools.scrollToPDF(diaPanelRef.value, actDiaTitle.value, () => {
		exportLoading.value = false
	})
}
const funDbClick = (obj) => {
	if(actCopListBak.value.length > 1){ //判断大于1时, 才有双击放大功能
		if(actCopList.value.length === 1){
			actCopList.value = actCopListBak.value
		}else{
			actCopList.value = [obj]
		}
	}
}
/**created */
// funGetTree()
/**activated */
onMounted(() => {
	//test
	// funSubmit()
	//
	tableHeight.value = window.innerHeight - 150 + 'px'
	excelHeight.value =(window.innerHeight - 150) + 'px'
	treeHeight.value = (window.innerHeight - 150) + 'px'
	window.addEventListener('resize', () => {
		tableHeight.value = window.innerHeight - 150 + 'px'
		excelHeight.value = (window.innerHeight - 150) + 'px'
		treeHeight.value = (window.innerHeight - 150)  + 'px'
	})
})
onActivated(() => {
	funGetTree()
})
</script>
<template>
	<div class="bg-white py-[10px] px-[10px] relative s-dialog-body">
		<!-- <search-cop class="mb-[20px]  shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
		</search-cop> -->
		<el-dialog v-model="wtDialog" draggable title="风机功率点位">
			<el-tabs v-model="wtTab">
				<el-tab-pane label="数据" name="table">
					<el-table :data="wtData" row-key="id" :max-height="550">
						<el-table-column property="wtId" align="center" label="风机" />
						<el-table-column property="time" sortable :width="160" align="center" label="时间" />
						<el-table-column property="speed" sortable align="center" label="风速(m/s)" />
						<el-table-column property="power" sortable align="center" label="功率(kW)" />
						<el-table-column property="rr" sortable align="center" label="转速" />
						<el-table-column property="filter" sortable align="center" label="是否有用点" />
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="故障" name="problem" disabled>

				</el-tab-pane>
				<el-tab-pane label="预警" name="warning" disabled>

				</el-tab-pane>
			</el-tabs>
		</el-dialog>
		<el-dialog draggable width="80%" v-model="dialog" :title="actDiaTitle">
			<el-form class="whitespace-nowrap" :inline="true" :model="queryForm">
				<el-form-item label="" class="!mb-0">
					<el-select v-model="queryForm.checkIds" clearable @clear="checkAll = false" collapse-tags multiple>
						<el-option label="全选" :class="{'selected': checkAll}" @click="funCheckAll"></el-option>
						<el-option v-for="item in chartExcelList" :key="item.id" :value="item.id" :label="item.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="!mb-0">
					<submit-btn desc="查询" @click="funDiaSubmit"></submit-btn>
					<submit-btn desc="导出" @click="funDiaExport"></submit-btn>
				</el-form-item>
			</el-form>
			<div v-loading="exportLoading">
				<div ref="diaPanelRef" class="flex flex-wrap justify-center items-center h-[650px] overflow-y-auto overflow-x-hidden">
					<component :is="item.actCop" :width="actCopList.length > 1 ? '50%' : '100%'" height="100%" v-for="item in actCopList"
						:key="item.id" :xAxis="item.xAxis" :subtext="item.subtext" :isRadar="item.isRadar" :title="item.title"
						:series="item.series" :isDiaAlone="(actCopList.length === 1)" @dblclick="funDbClick(item)" :yAxis="item.yAxis" :dataset="item.dataset" :brush="item.isBrush" @getSelected="funChartSelect"></component>
				</div>
			</div>
		</el-dialog>
		<div class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[10px] pb-[10px]">
			<div class="text-[14px] absolute top-[-7px] text-[#838383] left-[20px]">数据展示</div>
			<el-row :gutter="10">
				<el-col :span="5">
					<tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="false" :height="treeHeight"
						@currentChange="funCurrentChange" @refresh="funGetTree">
					</tree-cop>
				</el-col>
				<el-col :span="3">
					<excel-cop :checkIds="excelCheckIds" :showCheckbox="false" :data="excelList" :height="excelHeight"
						@excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
				</el-col>
				<el-col :span="16">
					<div :style="{ height: tableHeight }"
						class="flex flex-wrap justify-center items-center overflow-x-hidden overflow-y-auto ">
						<div class="mb-[10px] w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500"
							v-for="(item, index) in chartData" :key="item.id" :class="{ 'mr-[10px]': index % 2 === 0 }">
							<el-icon class="mr-[10px] mt-[10px] cursor-pointer" size="18"
								@click="funActCop(item, 'chartCop' + (index + 1))">
								<ZoomIn />
							</el-icon>
							<chart-cop class="" height="100%" width="100%" :xAxis="item.xAxis" :isRadar="item.isRadar" :subtext="item.subtext"
								:title="item.title" :series="item.series">
							</chart-cop>
						</div>
						<div class="mr-[10px] w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500" v-if="!!lineSeries.length">
							<el-icon class="mr-[10px] mt-[10px] cursor-pointer" size="18"
								@click="funActCop({ xAxis: linexAxis, yAxis: lineyAxis, series: lineSeries, dataset: lineDataSet }, 'lineChartCop')">
								<ZoomIn />
							</el-icon>
							<line-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis" :yAxis="lineyAxis"
								:series="lineSeries" subtext="对风偏差分析图" :dataset="lineDataSet"></line-chart-cop>
						</div>
						<div class="w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500" v-if="!!lineSeries.length">
							<el-icon class="mr-[10px] mt-[10px] cursor-pointer" size="18"
								@click="funActCop({ xAxis: scatterxData, yAxis: scatteryData, series: scatterSeries }, 'scatterSingleChartCop')">
								<ZoomIn />
							</el-icon>
							<scatter-single-chart-cop class="" height="100%" width="100%" :xAxis="scatterxData" :yAxis="scatteryData"
								:series="scatterSeries" subtext="静态偏航对风分析图"></scatter-single-chart-cop>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<style scoped>
.s-dialog-body /deep/ .el-dialog__body{
	padding: 0px 20px;
}
</style>