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

<script setup name="prepare">
import excelCop from '@/components/excel.vue'
import treeCop from '@/components/tree.vue'
import barChartCop from './components/barChart.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 - 160 + 'px') //tree高度
const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
const tableHeight = ref(window.innerHeight - 160 + 'px')
/**excel 开始 */
const excelCheckboxShow = ref(false)
const excelCheckIds = ref([])
const excelList = ref([])
const funExcelChange = async (obj) => { //点击excel项时
	return false
}
const funExcelCheckChange = ({ checkArr, data }) => {   //bug 
	excelCheckIds.value = checkArr
	funSubmit()
}
/**prepare tree 开始 */
const treeData = ref([])
const treeCopRef = ref()  //treeCop ref
const actTreeNode = ref(null) //当前激活的treeNode
const funRepeatMap = (arr, type='fitting') => {
	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 === 'fitting'){ //判断当且仅有process获取tree时 赋值
					actTreeNode.value = o
				}
			}
		}
		return {
			...o,
			children: o.children ? funRepeatMap(o.children, type) : []
		}
	})
}
const funGetTree = async () => {
	actTreeNode.value = null
	const res = await request.get("/power/fitting/tree")
	treeData.value = funRepeatMap(res.data)
	excelList.value = []
	if(actTreeNode.value){
		funCurrentChange({current: actTreeNode.value, currentNode: null})
		if(treeCopRef.value){
			treeCopRef.value.setCheckedKeys([actTreeNode.value.id])
			excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
			funSubmit()
		}
	}
}
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
	funSubmit()
}

/**search 开始 */
const funSubmit = async () => {
	if (!excelCheckIds.value.length) {
		ElMessage.error('请勾选要执行的项')
		return false
	}
	wtData.value = []
	const params = {
		ids: excelCheckIds.value.join(',')
	}
	const res = await request.get('/power/fitting/line', { params: params })
	if (res.code === 200) {
		seriesData.value = []
		if(res.data.bzgl){
			seriesData.value.push(
				{
					name: "保证功率",
					type: "line",
					symbol: "line", //设定为实心点
					symbolSize: 0, //设定实心点的大小
					smooth: true, //这个是把线变成曲线
					data: res.data.bzgl || [],
					xAxisIndex: 0,
				},
			)
		}
		if(res.data.sjgl?.length){
			for(const wtObj of res.data.sjgl){
				seriesData.value.push(
					{
						name: wtObj.obj.windturbineId + "\n实际功率",
						type: "line",
						symbol: "line", //设定为实心点
						symbolSize: 0, //设定实心点的大小
						smooth: true, //这个是把线变成曲线
						data: wtObj.sjgl || [],
						xAxisIndex: 0,
					},
				)
				wtData.value.push(wtObj.obj)
			}
		}
	}
}
/**chart Data */
const avgObj = reactive({ //平均cpz等
	cpavg: '',
	frequency: '',
	pcratio: ''
})
const xAxisData = ref([])
const chartRef = ref() //chart 的ref
const seriesData = ref([])
const isChartArea = ref(false) // 用来控制图表是否区域划分
const dataSet = ref('')
const funChartSelect = async (batch) => {
	return false
}
const funChartArea = () => {
	if (seriesData.value?.length) {
		// 获取数据后 展示dialog table 数据
		wtDialog.value = true
		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`,
									xAxis: 3,
								},
								{
									xAxis: 5,
								}
							],
							[
								{
									name: `5~10m`,
									xAxis: 5,
								},
								{
									xAxis: 10,
								}
							],
							[
								{
									name: `10~12m`,
									xAxis: 10,
								},
								{
									xAxis: 12,
								}
							],
							[
								{
									name: `12~25m`,
									xAxis: 12,
								},
								{
									xAxis: 25,
								}
							],
						]
					},
				}
			isChartArea.value = true
		} else {
			seriesData.value[0] = {
					...seriesData.value[0],
					markLine: null,
					markArea: null,
				}
			isChartArea.value = false
		}
	}
}
/**tmdialog 数据 */
const tmDialog = ref(false)
const barxAxis = reactive({
	type: 'category',
	data: [],
	splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
})
const baryAxis = ref({
		type: 'value',
		name: '小时',
		splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
})
const barSeries = ref([{
	name: "不运行",
	type: "bar",
	stack: 'a',
	data: [],
},{
	name: "3~5m风速",
	type: "bar",
	stack: 'a',
	data: [],
},{
	name: "5~10m风速",
	type: "bar",
	stack: 'a',
	data: [],
},{
	name: "10~12m风速",
	type: "bar",
	stack: 'a',
	data: [],
},{
	name: "12~25m风速",
	type: "bar",
	stack: 'a',
	data: [],
}])
const barUnWorkSeries = ref([{
	name: "3~5m风速",
	type: "bar",
	stack: 'a',
	data: [],
},{
	name: "5~10m风速",
	type: "bar",
	stack: 'a',
	data: [],
},{
	name: "10~12m风速",
	type: "bar",
	stack: 'a',
	data: [],
},{
	name: "12~25m风速",
	type: "bar",
	stack: 'a',
	data: [],
}])
const funTimeArea = async () => {
	if(seriesData.value?.length){
		activeTab.value = '1'
		//获取数据
		const res = await request.get('/power/fitting/time',{params: {ids: excelCheckIds.value.join(',')}})
		if(res.code===200){
			barxAxis.data = []
			barSeries.value = [{
				name: "不运行",
				type: "bar",
				stack: 'a',
				data: [],
			},{
				name: "3~5m风速",
				type: "bar",
				stack: 'a',
				data: [],
			},{
				name: "5~10m风速",
				type: "bar",
				stack: 'a',
				data: [],
			},{
				name: "10~12m风速",
				type: "bar",
				stack: 'a',
				data: [],
			},{
				name: "12~25m风速",
				type: "bar",
				stack: 'a',
				data: [],
			}]
			barUnWorkSeries.value = [{
				name: "3~5m风速",
				type: "bar",
				stack: 'a',
				data: [],
			},{
				name: "5~10m风速",
				type: "bar",
				stack: 'a',
				data: [],
			},{
				name: "10~12m风速",
				type: "bar",
				stack: 'a',
				data: [],
			},{
				name: "12~25m风速",
				type: "bar",
				stack: 'a',
				data: [],
			}]
			for(const wtObj of res.data){
				barxAxis.data.push(wtObj.wtId)
				for(const timeKey in wtObj.time1){
					barSeries.value[timeKey].data.push((wtObj.time1[timeKey]/60).toFixed(0))
				}
				for(const time2Key in wtObj.time2){
					barUnWorkSeries.value[time2Key].data.push((wtObj.time2[time2Key]/60).toFixed(0))
				}
			}
			tmDialog.value = true
		}
	}
}

/**额定功率 */
const powerDialog = ref(false)
const powerxAxis = reactive({
	type: 'category',
	data: [],
	splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
})
const poweryAxis = ref({
	type: 'value',
	name: 'kW',
	max: null,
	splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
})
const countyAxis = ref({
	type: 'value',
	name: '次数',
	splitLine: {
		show: false
	},
	axisTick: {
		show: true
	}
})
const powerSeries = ref([{
	name: "平均全功率",
	type: "bar",
	data: [],
	markLine: {}
}])
const countSeries = ref([{
	name: '次数',
	type: 'bar',
	data: [],
	markLine: {}
}])
const funPower = async () => {
	if(seriesData.value?.length){
		//获取数据
		const res = await request.get('/rated/power',{params: {ids: excelCheckIds.value.join(',')}})
		if(res.code===200){
			powerxAxis.data = []
			powerSeries.value = [
				{
				name: "平均全功率",
				type: "bar",
				data: [],
				markLine: {
					symbol: 'none',
					label: {
						show: true
					},
					lineStyle: {
						color: 'rgba(96,174,255, 1)'
					},
					data: [],
				}
			}
			]
			countSeries.value = [
				{
				name: "次数",
				type: "bar",
				data: [],
				markLine: {}
				}
			]
			if(res.data.data){
				const xAxis = [], seriesArr = [], countArr = []
				for(const val of res.data.data){
					xAxis.push(val.wt)
					seriesArr.push(val.avg)
					countArr.push(val.count)
				}
				powerxAxis.data = xAxis
				countSeries.value[0].data = countArr.map(o => {
					return {
						value: o,
						// itemStyle: {
						// 	color: o < res.data.avg ? 'rgb(197,78,82)' : 'rgb(50,93,171)'
						// }
					}
				})
				powerSeries.value[0].data = seriesArr.map(o => {
					return {
						value: o,
						itemStyle: {
							color: o < res.data.avg ? 'rgb(197,78,82)' : 'rgb(50,93,171)'
						}
					}
				})
				let maxValue = Math.max(...seriesArr)
				if(res.data.power > maxValue){
					maxValue = res.data.power
				}else{
					maxValue = null
				}
				poweryAxis.value.max = maxValue
				powerSeries.value[0].markLine.data = [{
					yAxis: res.data.avg,
					name: `平均额定功率${res.data.avg}`,
					lineStyle: {
						color: 'green'
					}
				},{
					yAxis: res.data.power,
					name: `额定功率${res.data.power}`,
					lineStyle: {
						color: 'red'
					}
				}]
			}
			powerDialog.value = true
		}
	}
}
/**dialog 数据 */
const wtDialog = ref(false)
const wtData = ref([])
const activeTab = ref('1')
/**created */
// funGetTree()
// funGetProcessTree()
/**mounted */
onMounted(() => {
	tableHeight.value = window.innerHeight - 160 + 'px'
	excelHeight.value = window.innerHeight - 160 + 'px'
	treeHeight.value = window.innerHeight - 160 + 'px'
	window.addEventListener('resize', () => {
		tableHeight.value = window.innerHeight - 160 + 'px'
		excelHeight.value = window.innerHeight - 160 + 'px'
		treeHeight.value = window.innerHeight - 160 + 'px'
	})
	/**test */
	// funExcelChange({
	// 	id: 1,
	// 	name: 'excel',
	// 	type: 'fitting',
	// })
})
/**activated */
onActivated(() => {
	funGetTree()
})
</script>
<template>
  <div class="bg-white py-[10px] px-[10px] s-dialog-body">
		<el-dialog draggable width="1000px" v-model="tmDialog" title="时间占比">
			<el-tabs v-model="activeTab">
				<el-tab-pane label="运行时间" name="1">
				</el-tab-pane>
				<el-tab-pane label="不运行时间" name="2"></el-tab-pane>
				<div  v-if="activeTab === '1'">
					<bar-chart-cop height="600px" width="100%" :xAxis="barxAxis" :yAxis="baryAxis" :series="barSeries"></bar-chart-cop>
				</div>
				<div v-if="activeTab === '2'">
					<bar-chart-cop height="600px" :colors='["rgb(222,132,82)","rgb(105,188,80)","rgb(197,78,82)","rgb(129,114,181)"]' width="100%" :xAxis="barxAxis" :yAxis="baryAxis" :series="barUnWorkSeries"></bar-chart-cop>
				</div>
			</el-tabs>
		</el-dialog>
		<el-dialog draggable width="1000px" v-model="powerDialog" title="额定功率">
			<bar-chart-cop height="350px" :colors='[]' width="100%" :xAxis="powerxAxis" :yAxis="countyAxis" :series="countSeries"></bar-chart-cop>
			<bar-chart-cop height="350px" :colors='[]' width="100%" :xAxis="powerxAxis" :yAxis="poweryAxis" :series="powerSeries"></bar-chart-cop>
		</el-dialog>
    <el-dialog draggable v-model="wtDialog" title="曲线偏差率">
			<el-table :data="wtData" row-key="id" :max-height="600">
				<el-table-column property="windturbine" align="center" label="风机" />
				<el-table-column
					property="pc5ratio"
					sortable
					align="center"
					label="3~5m"
				/>
				<el-table-column
					property="pc10ratio"
					sortable
					align="center"
					label="5~10m"
				/>
				<el-table-column
					property="pc12ratio"
					sortable
					align="center"
					label="10~12m"
				/>
				<el-table-column
					property="pc25ratio"
					sortable
					align="center"
					label="12~25m"
				/>
				<el-table-column
					property="pcratio"
					sortable
					align="center"
					label="3~25m"
				/>
			</el-table>
    </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-[#838383] left-[20px]">
        数据展示
      </div>
      <el-row :gutter="10">
        <el-col :span="5">
          <tree-cop
						ref="treeCopRef" 
            :data="treeData"
            @checkChange="funTreeCheckChange"
            :show-checkbox="true"
            :height="treeHeight"
            @currentChange="funCurrentChange"
            @refresh="funGetTree"
          ></tree-cop>
        </el-col>
        <el-col :span="3">
          <excel-cop
            :checkIds="excelCheckIds"
            :showCheckbox="excelCheckboxShow"
            :data="excelList"
            :height="excelHeight"
            @excelChange="funExcelChange"
            @checkChange="funExcelCheckChange"
          ></excel-cop>
        </el-col>
        <el-col :span="16">
          <div class="px-[10px] shadow rounded-[6px] shadow-blue-500">
            <SubmitBtn
              class="absolute right-[196px] top-[6px] z-10"
              desc="区域划分"
              @click="funChartArea"
            ></SubmitBtn>
						<SubmitBtn
              class="absolute right-[106px] top-[6px] z-10"
              desc="时间占比"
              @click="funTimeArea"
            ></SubmitBtn>
						<SubmitBtn
              class="absolute right-[16px] top-[6px] z-10"
              desc="额定功率"
              @click="funPower"
            ></SubmitBtn>
            <div
              :style="{
                height:
                  typeof tableHeight === 'string'
                    ? tableHeight
                    : tableHeight + 'px',
								overflow: 'hidden'
              }"
              class="p-[10px]"
            >
              <CurrentScatterChart
                ref="chartRef"
                width="100%"
                :height="`calc( ${tableHeight} - 40px )`"
                chartTitle=""
                :xAxisData="xAxisData"
                :yAxisData="{ splitLine: { show: false } }"
                :seriesData="seriesData"
                :showLegend="true"
                :brushSelected="!isChartArea"
                :dataSet="dataSet"
                @getSelected="funChartSelect"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
.s-dialog-body /deep/ .el-dialog__body{
	padding: 0px 20px;
}
</style>