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 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 () => {
	const res = await request.get("/power/fitting/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
	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.windturbine + "\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
		}
	}
}
const funTimeArea = async () => {
	if(seriesData.value?.length){
		//获取数据
		const res = await request.get('/power/fitting/time',{params: {ids: excelCheckIds.value.join(',')}})
		console.log(res)
		if(res.code===200){
			barxAxis.data = []
			barSeries.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: [],
			},{
				name: "不运行",
				type: "bar",
				stack: 'a',
				data: [],
			}]
			for(const wtObj of res.data){
				barxAxis.data.push(wtObj.wtId)
				for(const timeKey in wtObj.time){
					barSeries.value[timeKey].data.push((wtObj.time[timeKey]/60).toFixed(0))
				}
			}
			tmDialog.value = true
		}
	}
}
/**dialog 数据 */
const wtDialog = ref(false)
const wtData = ref([])
/**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: "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: [],
},{
	name: "不运行",
	type: "bar",
	stack: 'a',
	data: [],
}])
/**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="时间占比">
			<bar-chart-cop height="700px" width="100%" :xAxis="barxAxis" :yAxis="baryAxis" :series="barSeries"></bar-chart-cop>
		</el-dialog>
    <el-dialog draggable v-model="wtDialog" title="曲线偏差率">
			<el-table :data="wtData" row-key="id" :max-height="550">
				<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-[#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>
        </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-[106px] top-[6px] z-10"
              desc="区域划分"
              @click="funChartArea"
            ></SubmitBtn>
						<SubmitBtn
              class="absolute right-[16px] top-[6px] z-10"
              desc="时间占比"
              @click="funTimeArea"
            ></SubmitBtn>
            <div
              :style="{
                height:
                  typeof tableHeight === 'string'
                    ? tableHeight
                    : tableHeight + 'px',
              }"
              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>