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

<script setup name="prepare">
import searchCop from './components/search.vue'
import excelCop from '@/components/excel.vue'
import treeCop from '@/components/tree.vue'
import tableCop from './components/table.vue'
import SubmitBtn from '@/components/SubmitBtn.vue'
import { ref, nextTick, onActivated, onMounted, reactive } from 'vue'
import request from '@/api/axios.js'
import { ElMessage } from 'element-plus'
import util from "@tools/util";
import CurrentScatterChart from './components/current-scatter-chart.vue'
// import dotRes from '@/data/dot.json'
// import tableRes from '@/data/table.json'
// import areaDataRes from '@/data/areaData.json'
/**配置参数 */
const treeHeight = ref((window.innerHeight - 210) / 2 + 'px') //tree高度
const excelHeight = ref((window.innerHeight - 210) / 2 + 'px') //excel高度
const tableHeight = ref(window.innerHeight - 254 + 'px')
/**excel 开始 */
const excelCheckboxShow = ref(false)
const excelType = ref('')
const excelCheckIds = ref([])
const excelList = ref([])
const funExcelChange = async (obj) => { //点击excel项时
	activeTab.value = '1'
	isChartArea.value = false
	tableShowId.value = obj.id
	tableName.value = obj.name
	excelType.value = obj.type // 接收excel的type 用于控制右侧tab展示

	let res = null
	let chartRes = {
		scatterhs: [[]],
		scatterls: [[]],
		sjgl: [[]],
		llgl: [[]],
		cpz: [[]]
	}
	let poiRes = null
	let chartResponse = null
	tableLoading.value = true
	if (obj.type === 'process') {
		res = await request.get('/power/process/show', { params: { id: obj.id } })
	} else if (obj.type === 'fitting') {
		activeTab.value = '2'
		res = await request.get('/power/fitting/show', { params: { id: obj.id } })
		// res = tableRes
		// chartResponse = dotRes
		chartResponse = await request.get('/power/fitting/curve', { params: { id: obj.id, p: 1 } })
		poiRes = await request.get('/power/fitting/curve/ratio', {params: {id: obj.id}})
		// poiRes = areaDataRes
	}
	tableColumn.value = res.data.title.map(o => {
		return {
			prop: o.key,
			width: o.des==='时间'? 100: 80,
			label: o.des,
		}
	})
	tableData.value = res.data.data
	tableLoading.value = false

	// markDot 
	if(poiRes && poiRes.code=== 200){
		markDot.pcl5 = poiRes.data.pcl5
		markDot.pcl10 = poiRes.data.pcl10
		markDot.pcl12 = poiRes.data.pcl12
		markDot.pcl25 = poiRes.data.pcl25
	}

	if (chartResponse && chartResponse.code === 200) {
		chartRes = chartResponse.data
		avgObj.title = chartRes.obj.path.substring(chartRes.obj.path.indexOf(chartRes.obj.station + '_') + (chartRes.obj.station + '_').length).split('_')[0];
		avgObj.cpavg = Number(chartRes.obj.cpavg).toFixed(2)
		avgObj.frequency = Number(chartRes.obj.frequency).toFixed(2)
		avgObj.pcratio = Number(chartRes.obj.pcratio).toFixed(2)
		dataSet.value = JSON.stringify([
			{
				source: chartRes.wyd
				// source: chartRes.scatterls
			},
			{
				source: chartRes.yyd
				// source: chartRes.scatterhs
			}
		])
		const color = ["#1C99FF", "#FF8700", "#3D54BE", "#fa8c16", "#1DA0D7", "#DD5044"]
		seriesData.value = [
			{
				name: "拟合功率",
				type: "line",
				symbol: "line", //设定为实心点
				symbolSize: 0, //设定实心点的大小
				smooth: true, //这个是把线变成曲线
				data: chartRes.sjgl,
				xAxisIndex: 0,
			},
			{
				name: "保证功率",
				type: "line",
				symbol: "line", //设定为实心点
				symbolSize: 0, //设定实心点的大小
				smooth: true, //这个是把线变成曲线
				data: chartRes.llgl,
				xAxisIndex: 0,
			},
			{
				type: 'effectScatter',
				showEffectOn: "emphasis",
				rippleEffect: {
					scale: 1
				},
				name: '无用点',
				symbolSize: (data) => {
					return data.s ? data.s > 10 ? 10 : data.s : 4
				},
				datasetIndex: 0,
				encode: {
					x: 'x',
					y: 'y'
				},
				xAxisIndex: 0,
				yAxisIndex: 0,
			},
			{
				type: 'effectScatter',
				showEffectOn: "emphasis",
				rippleEffect: {
					scale: 1
				},
				name: '有用点',
				symbolSize: (data) => {
					return data.s ? data.s > 10 ? 10 : data.s : 4
				},
				datasetIndex: 1,
				encode: {
					x: 'x',
					y: 'y'
				},
				xAxisIndex: 0,
				yAxisIndex: 0,
			},
			{
				name: "Cp值",
				type: "line",
				symbol: "line", //设定为实心点
				symbolSize: 0, //设定实心点的大小
				smooth: true, //这个是把线变成曲线
				data: chartRes.cpz,
				xAxisIndex: 0,
				yAxisIndex: 1,
			},
		]
	}
}
const funExcelCheckChange = ({ checkArr, data }) => {   //bug 
	excelCheckIds.value = checkArr
}
/**excel fitData */
const excelFitList = ref([])
/**prepare tree 开始 */
const treeData = ref([])
const actTreeNode = ref(null) //当前激活的treeNode
const funRepeatMap = (arr, type='prepare') => {
	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 && type === 'process'){ //判断当且仅有process获取tree时 赋值
					actTreeNode.value = o
				}
			}
		}
		return {
			...o,
			children: o.children ? funRepeatMap(o.children, type) : []
		}
	})
}
const funGetTree = async () => {
	const res = await request.get("/power/process/tree")
	treeData.value = funRepeatMap(res.data)
	excelList.value = []
}
const funCurrentChange = ({ current, currentNode }) => {
	excelCheckboxShow.value = true
	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 = []
	}
}
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
}

/**process tree 开始 */
const processTreeData = ref([])
const funGetProcessTree = async (flag = true) => { //flag控制是否获取tree的第一项 true为可获取
	actTreeNode.value = null
	const res = await request.get("/power/fitting/tree")
	excelFitList.value = []
	processTreeData.value = funRepeatMap(res.data, flag? 'process' : 'prepare') //flag控制对actTreeNode赋值
	if(actTreeNode.value){
		funProcessCurrentChange({current: actTreeNode.value, currentNode: null})
		const child = actTreeNode.value.childs[0]
		const obj = {
			id: child.id,
			interval: child.interval,
			path: child.path,
			prepareid: child.prepareid,
			station: child.station,
			time: child.time,
			type: child.type,
			windturbine: child.windturbine,
			name: child.path.substring(child.path.indexOf(child.station + '_') + (child.station + '_').length)
		}
		funExcelChange(obj)
	}
}
const funProcessCurrentChange = ({ current, currentNode }) => {
	if (current.childs) {
		excelFitList.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 {
		excelFitList.value = []
	}
}

/**table 开始 */
const tableShowId = ref('')
const tableColumn = ref([])
const tableLoading = ref(false)
const tableName = ref('')
const tableData = ref([])
/**table 结束 */
/**search 开始 */
const funSubmit = async (query) => {
	if (!excelCheckIds.value.length) {
		ElMessage.error('请勾选要预处理的项')
		return false
	}
	const params = {
		...query,
		ids: excelCheckIds.value.join(',')
	}
	const res = await request.get('/power/fitting/data', { params: params })
	if (res.code === 200) {
		ElMessage.success(res.msg)
		funGetProcessTree(false) //阻止获取tree第一项数据及图表
		const excelInfo = res.data

		/**拟合完成后 显示右侧图表及数据 */
		funExcelChange({
			id: excelInfo.id,
			name: excelInfo.path.substring(excelInfo.path.indexOf(excelInfo.station + '_') + (excelInfo.station + '_').length),
			type: 'fitting'
		})
	}
}
/**chart Data */
const avgObj = reactive({ //平均cpz等
	title: '',
	cpavg: '',
	frequency: '',
	pcratio: ''
})
const markDot = reactive({ //3-5 point点等
	pcl5: null,
	pcl10: null,
	pcl12: null,
	pcl25: null
})
const xAxisData = ref([])
const chartRef = ref() //chart 的ref
const seriesData = ref([])
const isChartArea = ref(false) // 用来控制图表是否区域划分
const dataSet = ref('')
const funChartSelect = async (batch) => {
	const wDataArr = []
	const yDataArr = []
	let scatterls = []
	let scatterhs = []
	let dataSetObj = []
	wtData.value = []
	if (batch?.length && dataSet.value) {
		scatterls = batch[0].selected[2].dataIndex
		scatterhs = batch[0].selected[3].dataIndex
		if (scatterls?.length || scatterhs?.length) {
			dataSetObj = JSON.parse(dataSet.value)
			if (scatterls?.length) {
				for (const scatterIndex of scatterls) {
					wDataArr.push(dataSetObj[0].source[scatterIndex].k)
				}
			}
			if (scatterhs?.length) {
				for (const scatterIndex of scatterhs) {
					yDataArr.push(dataSetObj[1].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
					})
				}
			}
		}
	}
}
const funChartArea = () => {
	if (seriesData.value?.length) {
		if (!isChartArea.value) {
			// 请求一下
			seriesData.value[0] = {
					...seriesData.value[0],
					markLine: {
						symbol: 'none',
						label: {
							show: false
						},
						lineStyle: {
							color: 'rgba(96,174,255, 1)'
						},
						data: [
							{
								xAxis: 3,
								valueIndex: 0,
							},
							{
								xAxis: 5,
								valueIndex: 0
							},
							{
								xAxis: 10,
								valueIndex: 0
							},
							{
								xAxis: 12,
								valueIndex: 0
							},
							{
								xAxis: 25,
								valueIndex: 0
							},
						]
					},
					markArea: {
						label: {
							fontSize: util.vh(12),
						},
						itemStyle: {
							color: 'rgba(236,245,255, 0)'
						},
						emphasis: {
							itemStyle: {
								color: 'rgba(96,174,255, 0.5)'
							}
						},
						data: [
							[
								{
									name: `3~5m 偏差率: ${markDot.pcl5}%`,
									xAxis: 3,
								},
								{
									xAxis: 5,
								}
							],
							[
								{
									name: `5~10m 偏差率: ${markDot.pcl10}%`,
									xAxis: 5,
								},
								{
									xAxis: 10,
								}
							],
							[
								{
									name: `10~12m 偏差率: ${markDot.pcl12}%`,
									xAxis: 10,
								},
								{
									xAxis: 12,
								}
							],
							[
								{
									name: `12~25m 偏差率: ${markDot.pcl25}%`,
									xAxis: 12,
								},
								{
									xAxis: 25,
								}
							],
						]
					},
				}
			isChartArea.value = true
		} else {
			seriesData.value[0] = {
					...seriesData.value[0],
					markLine: null,
					markArea: null,
				}
			isChartArea.value = false
		}
	}
}
/**dialog 数据 */
const wtDialog = ref(false)
const wtData = ref([])
const wtTab = ref('table')
/**tab  */
const activeTab = ref('1')
/**created */
// funGetTree()
// funGetProcessTree()
/**mounted */
onMounted(() => {
	tableHeight.value = window.innerHeight - 254 + 'px'
	excelHeight.value =(window.innerHeight - 210) / 2 + 'px'
	treeHeight.value = (window.innerHeight - 210) / 2 + 'px'
	window.addEventListener('resize', () => {
		tableHeight.value = window.innerHeight - 254 + 'px'
		excelHeight.value = (window.innerHeight - 210) / 2 + 'px'
		treeHeight.value = (window.innerHeight - 210) / 2  + 'px'
	})
	/**test */
	// funExcelChange({
	// 	id: 1,
	// 	name: 'excel',
	// 	type: 'fitting',
	// })
})
/**activated */
onActivated(() => {
	funGetTree()
	funGetProcessTree()
})
</script>
<template>
	<div class="bg-white py-[10px] px-[10px]">
		<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>
		<div class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[20px] pb-[10px]">
			<div class="text-[14px] absolute top-[-7px] text-[#B3B3B3] left-[20px]">数据展示</div>
			<el-row :gutter="10">
				<el-col :span="5">
					<tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true" :height="treeHeight"
						@currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
					<tree-cop class="mt-[10px]" :data="processTreeData" :height="treeHeight"
						@currentChange="funProcessCurrentChange" @refresh="funGetProcessTree"></tree-cop>
				</el-col>
				<el-col :span="3">
					<excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList" :height="excelHeight"
						@excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
					<excel-cop class="mt-[10px]" :data="excelFitList" :height="excelHeight" @excelChange="funExcelChange">
					</excel-cop>
				</el-col>
				<el-col :span="16">
					<div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
						<SubmitBtn class="absolute right-[16px] top-[6px] z-10" desc="区域划分" v-if="activeTab === '2' && excelType === 'fitting'" @click="funChartArea"></SubmitBtn>
						<el-tabs v-model="activeTab">
							<el-tab-pane label="表格数据" name="1">
							</el-tab-pane>
							<el-tab-pane label="图表展示" name="2" v-if="excelType === 'fitting'">
							</el-tab-pane>
							<table-cop v-show="activeTab === '1'" :data="tableData" :loading="tableLoading" :column="tableColumn"
								:height="tableHeight" :tableId="tableShowId" :tableName="tableName"></table-cop>
							<div v-show="activeTab === '2'"
								:style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
								class="p-[10px]">
								<CurrentScatterChart ref="chartRef" width="100%" height="calc( 100% - 20px )" :chartTitle="avgObj.title+ '&nbsp;&nbsp;' +'平均Cp值：'+avgObj.cpavg+'； 静风频率：'+avgObj.frequency+'%； 曲线偏差率：'+avgObj.pcratio+'%'"
									:xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }" :seriesData="seriesData"
									:showLegend="true" :brushSelected="!isChartArea" :dataSet="dataSet" @getSelected="funChartSelect" />
							</div>
						</el-tabs>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>