Browse Source

'浆距角分析'

蒋珅 1 year ago
parent
commit
3e2f7aeedc

+ 4 - 4
src/api/config.js

@@ -9,10 +9,10 @@
 const config = {
     // baseURL: 'http://120.46.148.180:9002',
     // socketURL: 'ws://120.46.148.180:9002'
-    // baseURL: 'http://192.168.1.67:9002',
-    // socketURL: 'ws://192.168.1.67:9002'
-    baseURL: 'http://192.168.10.7:9002',
-    socketURL: 'ws://192.168.10.7:9002'
+    baseURL: 'http://192.168.1.67:9002',
+    socketURL: 'ws://192.168.1.67:9002'
+    // baseURL: 'http://192.168.10.7:9002',
+    // socketURL: 'ws://192.168.10.7:9002'
 }
 
 export default config;

+ 397 - 0
src/pages/dataAnalysis/bladeAnalysis/components/barChart.json

@@ -0,0 +1,397 @@
+
+{
+	"color": [
+			"#db60c8",
+			"#c12e34",
+			"#e6b600d9",
+			"#0098d9",
+			"#465a83",
+			"#005eaa",
+			"#cda819",
+			"#32a487"
+	],
+	"backgroundColor": "rgba(0,0,0,0)",
+	"textStyle": {},
+	"title": {
+			"textStyle": {
+					"color": "#000"
+			},
+			"subtextStyle": {
+					"color": "#000"
+			}
+	},
+	"line": {
+			"itemStyle": {
+					"borderWidth": 1
+			},
+			"lineStyle": {
+					"width": 2
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"radar": {
+			"itemStyle": {
+					"borderWidth": 1
+			},
+			"lineStyle": {
+					"width": 2
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"bar": {
+			"itemStyle": {
+					"barBorderWidth": 0,
+					"barBorderColor": "#ccc"
+			},
+			"barMaxWidth": 50
+	},
+	"pie": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"scatter": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"boxplot": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"parallel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"sankey": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"funnel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"gauge": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"candlestick": {
+			"itemStyle": {
+					"color": "#c12e34",
+					"color0": "#2b821d",
+					"borderColor": "#c12e34",
+					"borderColor0": "#2b821d",
+					"borderWidth": 1
+			}
+	},
+	"graph": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			},
+			"lineStyle": {
+					"width": 1,
+					"color": "#aaaaaa"
+			},
+			"symbolSize": 4,
+			"symbol": "emptyCircle",
+			"smooth": false,
+			"color": [
+					"#c12e34",
+					"#e6b600",
+					"#0098d9",
+					"#50ec39",
+					"#005eaa",
+					"#339ca8",
+					"#cda819",
+					"#32a487"
+			],
+			"label": {
+					"color": "#eeeeee"
+			}
+	},
+	"map": {
+			"itemStyle": {
+					"areaColor": "#ddd",
+					"borderColor": "#eee",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#c12e34"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "#e6b600",
+							"borderColor": "#ddd",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#c12e34"
+					}
+			}
+	},
+	"geo": {
+			"itemStyle": {
+					"areaColor": "#ddd",
+					"borderColor": "#eee",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#c12e34"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "#e6b600",
+							"borderColor": "#ddd",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#c12e34"
+					}
+			}
+	},
+	"categoryAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": false,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"valueAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"logAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"timeAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#ccc"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.3)",
+									"rgba(200,200,200,0.3)"
+							]
+					}
+			}
+	},
+	"toolbox": {
+			"iconStyle": {
+					"borderColor": "#06467c"
+			},
+			"emphasis": {
+					"iconStyle": {
+							"borderColor": "#4187c2"
+					}
+			}
+	},
+	"legend": {
+			"textStyle": {
+					"color": "#838383"
+			}
+	},
+	"tooltip": {
+			"axisPointer": {
+					"lineStyle": {
+							"color": "#cccccc",
+							"width": 1
+					},
+					"crossStyle": {
+							"color": "#cccccc",
+							"width": 1
+					}
+			}
+	},
+	"timeline": {
+			"lineStyle": {
+					"color": "#005eaa",
+					"width": 1
+			},
+			"itemStyle": {
+					"color": "#005eaa",
+					"borderWidth": 1
+			},
+			"controlStyle": {
+					"color": "#005eaa",
+					"borderColor": "#005eaa",
+					"borderWidth": 0.5
+			},
+			"checkpointStyle": {
+					"color": "#005eaa",
+					"borderColor": "#316bc2"
+			},
+			"label": {
+					"color": "#005eaa"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"color": "#005eaa"
+					},
+					"controlStyle": {
+							"color": "#005eaa",
+							"borderColor": "#005eaa",
+							"borderWidth": 0.5
+					},
+					"label": {
+							"color": "#005eaa"
+					}
+			}
+	},
+	"visualMap": {
+			"color": [
+					"#1790cf",
+					"#a2d4e6"
+			]
+	},
+	"dataZoom": {
+			"backgroundColor": "rgba(47,69,84,0)",
+			"dataBackgroundColor": "rgba(47,69,84,0.3)",
+			"fillerColor": "rgba(167,183,204,0.4)",
+			"handleColor": "#a7b7cc",
+			"handleSize": "100%",
+			"textStyle": {
+					"color": "#838383B3B3B3"
+			}
+	},
+	"markPoint": {
+			"label": {
+					"color": "#eeeeee"
+			},
+			"emphasis": {
+					"label": {
+							"color": "#eeeeee"
+					}
+			}
+	}
+}

+ 199 - 0
src/pages/dataAnalysis/bladeAnalysis/components/barChart.vue

@@ -0,0 +1,199 @@
+<script setup>
+import util from "@tools/util";
+import chartTheme from './barChart.json'
+import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import {useStore} from 'vuex'
+import * as echarts from 'echarts'
+const chartId = 'chart-' + util.newGUID(); //chartId
+const chartIns = ref(null)  //chart 实例
+const emits = defineEmits(['getSelected'])
+const props = defineProps({
+	xAxis: {
+		type: Object,
+		required: true,
+		default: () => ({})
+	},
+	yAxis: {
+		type: Array,
+		required: false
+	},
+	series: {
+		type: Array,
+		required: true
+	},
+	dataset: {
+		type: Array,
+		required: false,
+		default: () => ([])
+	},
+	height: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+	width: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+	title: {
+		type: String,
+		required: false
+	},
+	subtext: {
+		type: String,
+		required: false
+	},
+	brush: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
+})
+
+/**定义option */
+const option = computed({
+	get() {
+		return {
+			color:[
+				"rgb(54,90,176)",
+				"rgb(54,90,176)",
+				"#626c91",
+				"#a0a7e6",
+				"#c4ebad",
+				"#96dee8"
+			],
+			title: {
+				text: props.title || '',
+				subtext: props.subtext || '',
+				top: -6,
+				right: 360,
+			},
+			xAxis: props.xAxis || {},
+			yAxis: props.yAxis || {},
+			brush: {
+				seriesIndex: [1],
+				yAxisIndex: 0,
+				transformable: true,
+				throttleType: "debounce",
+				throttleDelay: 1000,
+				removeOnClick: true,
+				brushType: props.brush? "polygon" : false,
+				brushMode: "multiple",
+				brushStyle: {
+				borderWidth: 1,
+				borderColor: "#ff2424",
+          	},
+        },
+			toolbox:{
+				show: props.brush,
+			},
+			tooltip: {
+				confine: true,
+				trigger: "axis",
+			},
+			dataset: props.dataset || [],
+			series: props.series || [],
+			legend: {
+				right: "120",
+				top: "5",
+				itemWidth: 6,
+			},
+			grid: {
+				top: 80,
+				left: 40,
+				right: 40,
+				bottom: 40,
+			},
+			dataZoom: [
+				{
+					type: "inside", //图表下方的伸缩条
+					show: false, //是否显示
+					realtime: true, //拖动时,是否实时更新系列的视图
+					start: 0, //伸缩条开始位置(1-100),可以随时更改
+					end: 100, //伸缩条结束位置(1-100),可以随时更改
+				},
+				{
+					type: "slider", //图表下方的伸缩条
+					show: false, //是否显示
+					realtime: true, //拖动时,是否实时更新系列的视图
+					start: 0, //伸缩条开始位置(1-100),可以随时更改
+					end: 100, //伸缩条结束位置(1-100),可以随时更改
+				},
+       	   ],
+		}  
+	},
+	set(val) { }
+})
+watch(() => option, (newVal, oldVal) => {
+	if (chartIns.value) {
+		const echartIns = toRaw(chartIns.value)
+		echartIns.setOption(toRaw(newVal.value))
+	}
+}, { deep: true })
+
+watch([() => props.width, () => props.height],(newVal, oldVal) => {
+	if(chartIns.value){
+		const echartIns = toRaw(chartIns.value)
+		nextTick(() => echartIns.resize())
+	}
+})
+const store = useStore()
+const collapse = computed({
+	get(){
+		return store.state.collapse
+	},
+	set(val){}
+})
+watch(collapse, (val) => {
+	if(chartIns.value){
+		setTimeout(() => {
+			chartIns.value?.resize()
+		},300)
+	}
+})
+const funBrushChange = (flag) => {
+	const echartIns = toRaw(chartIns.value)
+	echartIns.dispatchAction({
+			type: "takeGlobalCursor",
+			// 如果想变为“可刷选状态”,必须设置。不设置则会关闭“可刷选状态”。
+			key: "brush",
+			brushOption: {
+				seriesIndex: [1],
+				yAxisIndex: 0,
+				transformable: true,
+				throttleType: "debounce",
+				throttleDelay: 1000,
+				removeOnClick: true,
+				brushType: flag? "polygon" : false,
+				brushMode: "multiple",
+				brushStyle: {
+					borderWidth: 1,
+					color: "rgba(255,36,36,0.2)",
+					borderColor: "#ff2424",
+				},
+			},
+		});
+	echartIns.off("brushSelected");
+	echartIns.on("brushSelected", (params) => {
+		emits("getSelected", params.batch || []);
+	});
+}
+watch(() => props.brush, (newVal, oldVal) => funBrushChange(newVal))
+
+onMounted(() => {
+	nextTick(() => {
+		echarts.registerTheme('chartTheme', chartTheme)
+		const echartIns =	echarts.init(document.getElementById(chartId),'chartTheme') 
+		chartIns.value = echartIns
+		echartIns.setOption(option.value)
+		funBrushChange(props.brush)
+		window.addEventListener('resize', () => {
+			echartIns.resize()
+		})
+	})
+})
+</script>
+<template>
+	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
+</template>

+ 29 - 0
src/pages/dataAnalysis/bladeAnalysis/components/search.vue

@@ -0,0 +1,29 @@
+<script setup name="search">
+import SubmitBtn from '@com/SubmitBtn.vue'
+import { onMounted, reactive, ref } from 'vue'
+
+const queryForm = reactive({
+	mode: 0
+})
+/**执行 */
+const emits = defineEmits(['submit'])
+const funSubmit = async () => {
+	emits('submit', queryForm)
+}
+</script>
+<template>
+	<div class="pl-[20px] flex items-center h-[80px] relative">
+		<div class="absolute top-[-7px] left-[20px] text-[#838383] text-[14px]">操作面板</div>
+		<el-form class="whitespace-nowrap" :inline="true" :model="queryForm">
+			<el-form-item label="合并方式" class="!mb-0">
+				<el-select v-model="queryForm.mode">
+					<el-option :value="0" label="多表单台"></el-option>
+					<el-option :value="1" label="单表多台"></el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item class="!mb-0">
+				<submit-btn v-prevdbclick:5000="funSubmit" desc="执行"></submit-btn>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>

+ 588 - 2
src/pages/dataAnalysis/bladeAnalysis/index.vue

@@ -1,3 +1,589 @@
+<script setup name="rateAnalysis">
+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 { 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([])
+const excelCheckboxShow = ref(false)
+/** 额定功率 */
+const powerproduction = ref("")
+//点击excel项时
+const funExcelChange = async (obj) => { 
+	console.log('ha',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
+	funSubmit()
+}
+/**tree 开始 */
+const treeCopRef = ref()  //treeCop ref
+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})
+		if(treeCopRef.value){
+			treeCopRef.value.setCheckedKeys([actTreeNode.value.id])
+			excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
+			funSubmit()
+		}
+			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 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()
+}
+
+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 = []
+	}
+}
+/**chart */
+let chartId = 1
+const powerproductionNum = ref(0)
+const avgSpeed = ref('')
+const avgMrxs = ref('')
+const windName = ref('')
+/**submit */
+const funSubmit = async () => {
+	// if (!excelCheckIds.value.length) {
+	// 	ElMessage.error('请勾选要执行的项')
+	// 	return false
+	// }
+	wtData.value = []
+	const tempRes = await request.get('/blade/angle', {
+		params: {
+			ids: excelCheckIds.value.join(','),
+		}
+	})
+	if (tempRes.code === 200) {
+        console.log('123',tempRes);
+		const xAxisData = [],xAxisData1 = [], barData1 = [], lineData1 = []
+		let avgSpeedSum = 0, avgMrxsSum = 1
+
+		const chart = tempRes.data
+		if(chart.bw){
+
+		
+            chart.bw.forEach((ele)=>{
+                xAxisData.push(ele.time)
+                barData1.push(ele.value)
+				// lineData1.push(chart.tj.value)
+                avgSpeedSum += ele.value
+            })
+             chart.tj.forEach((ele)=>{
+				//  ele.value.toFixed(2)
+				//  let newArr = arr.map(num => num.toFixed(2));
+                xAxisData1.push(ele.time)
+                // barData1.push(ele.value)
+				lineData1.push(ele.value)
+				// lineData1.value.toFixed(2)
+                avgMrxsSum += ele.value
+            })
+
+			// xAxisData.push(chart.bw[value])
+            // xAxisData1.push(chart.tj[value])
+			// if (chart.bw) {
+				// barData1.push(chart.bw.value)
+				// lineData1.push(chart.tj.value)
+				// avgSpeedSum += chart.currentData.avgspeed
+				// avgMrxsSum += chart.currentData.mrxs
+			// }
+			
+			avgSpeed.value = (avgSpeedSum / barData1.length).toFixed(2)+'度'
+			avgMrxs.value = (avgMrxsSum / lineData1.length).toFixed(2)+'度'
+			console.log('12',avgMrxs.value);
+			windName.value = chart.wtId
+			barxAxis.data = xAxisData
+			linexAxis.data = xAxisData1
+			barSeries[0].data = barData1
+			chartId++
+			lineSeries[0].data = lineData1
+			chartId++
+		}
+	}
+}
+/**lineChart */
+const linexAxis = reactive({
+	type: 'category',
+	name: '时间',
+	data: [],
+	splitLine: {
+		show: false
+	},
+	axisTick: {
+		show: true
+	},
+	axisLine: {
+		onZero: false
+	}
+})
+const lineyAxis = reactive({
+		type: 'value',
+		name: '角度',
+		splitLine: {
+		show: false
+	},
+	axisTick: {
+		show: true
+	},
+	axisLine: {
+		onZero: false
+	}
+})
+const lineSeries = reactive([{
+	name: "停机",
+	type: "line",
+	data: [],
+	symbol: "line", //设定为实心点
+	symbolSize: 0, //设定实心点的大小
+	markLine: {
+		symbol: 'none',
+		label: {
+			show: true,
+		},
+		lineStyle: {
+			color: '#F72C5B'
+		},
+		data: []
+	}
+} 
+])
+// 圈选散点触发函数
+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
+					})
+				}
+			}
+		}
+	}
+}
+/**barChart */
+const barxAxis = reactive({
+	type: 'category',
+	name: '时间',
+	data: [],
+	splitLine: {
+		show: false
+	},
+	axisTick: {
+		show: true
+	},
+	axisLine: {
+		onZero: false
+	}
+})
+const baryAxis = reactive({
+		type: 'value',
+		name: '角度',
+		splitLine: {
+		show: false
+	},
+	axisTick: {
+		show: true
+	},
+	axisLine: {
+		onZero: false
+	}
+})
+const barSeries = reactive([{
+	name: "并网",
+	type: "line",
+	symbol: "line", //设定为实心点
+	symbolSize: 0, //设定实心点的大小
+	data: [],
+	markLine: {
+		symbol: 'none',
+		label: {
+			show: true,
+		},
+		lineStyle: {
+			color: '#F72C5B'
+		},
+		data: []
+	},
+}])
+/**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 'barChartCop':
+			actChartName.value = 'barChartCop'
+			obj.actCop = shallowRef(barChartCop)
+			actDiaTitle.value = '风速'
+			break
+		case 'lineChartCop':
+			actChartName.value = 'lineChartCop'
+			obj.actCop = shallowRef(barChartCop)
+			actDiaTitle.value = '毛容量系数'
+			break
+		// case 'CurrentScatterChartCop':
+		// 	actChartName.value = 'CurrentScatterChartCop'
+		// 	obj.actCop = shallowRef(CurrentScatte		// console.log(res)rChartCop)
+		// 	actDiaTitle.value = '静态偏航对风分析图'
+		// 	break
+	}
+	obj.isBrush = false
+	obj.id = chartId
+	chartId ++
+	dialog.value = true
+	actCopListBak.value = []
+	nextTick(() => {
+		actCopList.value = [obj]
+	})
+}
+// const funDiaSubmit = async () => {
+// 	let url = ''
+// 	switch(actChartName.value){
+// 		case 'barChartCop':
+// 			url = '/wind/avg/speed'
+// 			break
+// 		case 'lineChartCop':
+// 			url = '/wind/avg/speed'
+// 			break
+// 		// case 'CurrentScatterChartCop':
+// 		// 	url = '' //暂无接口
+// 		// 	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){
+// 					chart.currentData.sort((a,b) => {
+// 						return new Date(a.time).getTime() - new Date(b.time).getTime()
+// 					})
+// 					chart.preData.sort((a,b) => {
+// 						return new Date(a.time).getTime() - new Date(b.time).getTime()
+// 					})
+// 					const xAxisData = [], barData1 = [], barData2 = [], lineData1 = [], lineData2 = []
+// 					let avgSpeedSum = 0, avgMrxsSum = 0
+// 					let avgSpeedDesc = '', avgMrxsDesc = ''
+// 					for(const current of chart.currentData){
+// 						xAxisData.push(current.time)
+// 						barData1.push(current.avgspeed)
+// 						avgSpeedSum += current.avgspeed
+// 						avgMrxsSum += current.mrxs
+// 						lineData1.push((current.mrxs*100).toFixed(2))
+// 					}
+// 					for(const current of chart.preData){
+// 						barData2.push(current.avgspeed)
+// 						lineData2.push((current.mrxs*100).toFixed(2))
+// 					}
+// 					avgSpeedDesc = (avgSpeedSum / barData1.length).toFixed(2)+' m/s'
+// 					avgMrxsDesc = (avgMrxsSum / lineData1.length * 100).toFixed(2)+' %'
+// 					if(actChartName.value==='barChartCop'){
+// 						actCopList.value.push({
+// 							id: chartId,
+// 							isBrush: false,
+// 							actCop: shallowRef(barChartCop),
+// 							// title: chart.windturbine,
+// 							subtext: `${chart.wtId} 平均角度 ${avgSpeedDesc}`,
+// 							xAxis: {
+// 								...barxAxis,
+// 								data: xAxisData
+// 							},
+// 							yAxis: baryAxis,
+// 							series: [{
+// 								...barSeries[0],
+// 								data: barData1
+// 							}]
+// 						})
+// 						chartId++
+// 					}
+// 					if(actChartName.value === 'lineChartCop'){
+// 						actCopList.value.push({
+// 							id: chartId,
+// 							isBrush: false,
+// 							actCop: shallowRef(barChartCop),
+// 							// title: chart.windturbine,
+// 							subtext: `${chart.wtId} 平均角度 ${avgMrxsDesc}`,
+// 							xAxis: {
+// 								...linexAxis,
+// 								data: xAxisData
+// 							},
+// 							yAxis: lineyAxis,
+// 							series: [{
+// 								...lineSeries[0],
+// 								data: lineData1
+// 							}]
+
+// 						})
+// 						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'
+	})
+	// funSubmit()
+})
+onActivated(() => {
+	funGetTree()
+})
+</script>
 <template>
-    sfagag
-</template>
+	<div class="bg-white py-[10px] px-[10px] relative s-dialog-body">
+		<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" :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"  :height="treeHeight"
+						@currentChange="funCurrentChange" @refresh="funGetTree">
+					</tree-cop>
+				</el-col>
+				<el-col :span="3">
+					<excel-cop   :data="excelList" :height="excelHeight"
+						@excelChange="funExcelChange" ></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-[100%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500">
+							<!-- <el-icon class="mr-[10px] mt-[10px] cursor-pointer" size="18"
+								@click="funActCop({xAxis:barxAxis, yAxis:baryAxis, series: barSeries}, 'barChartCop')">
+								<ZoomIn />
+							</el-icon> -->
+							<!-- <bar-chart-cop width="100%" height="100%" :subtext="`月平均风速`" :xAxis="barxAxis" :yAxis="baryAxis" :series="barSeries"></bar-chart-cop> -->
+							<!-- </el-icon> -->
+							<bar-chart-cop width="100%" height="100%" :subtext="`平均角度 ${avgSpeed}`"  :xAxis="barxAxis" :yAxis="baryAxis" :series="barSeries"></bar-chart-cop>
+						</div>
+						<div class="w-[100%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500">
+							<!-- <el-icon class="mr-[10px] mt-[10px] cursor-pointer" size="18"
+								@click="funActCop({xAxis:linexAxis, yAxis:lineyAxis, series: lineSeries}, 'lineChartCop')">
+								<ZoomIn />
+
+							</el-icon> -->
+							<!-- <bar-chart-cop width="100%" height="100%" :subtext="`毛容量系数`" :xAxis="linexAxis" :yAxis="lineyAxis" :series="lineSeries"></bar-chart-cop> -->
+							<!-- </el-icon> -->
+							<bar-chart-cop width="100%" height="100%" :subtext="`平均角度 ${avgMrxs=='Infinity度'?0:avgMrxs}`" :xAxis="linexAxis" :yAxis="lineyAxis" :series="lineSeries"></bar-chart-cop>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+</template>
+<style scoped>
+.s-dialog-body /deep/ .el-dialog__body{
+	padding: 0px 20px;
+}
+</style>

+ 393 - 0
src/pages/dataAnalysis/bladeAnalysis/rateAnalysis.json

@@ -0,0 +1,393 @@
+
+{
+	"color": [
+			"#3fb1e3",
+			"#6be6c1",
+			"#626c91",
+			"#a0a7e6",
+			"#c4ebad",
+			"#96dee8"
+	],
+	"backgroundColor": "rgba(252,252,252,0)",
+	"textStyle": {},
+	"title": {
+			"textStyle": {
+					"color": "#000"
+			},
+			"subtextStyle": {
+					"color": "#000"
+			}
+	},
+	"line": {
+			"itemStyle": {
+					"borderWidth": "2"
+			},
+			"lineStyle": {
+					"width": "2"
+			},
+			"symbolSize": "8",
+			"symbol": "emptyCircle",
+			"smooth": true
+	},
+	"radar": {
+			"itemStyle": {
+					"borderWidth": "2"
+			},
+			"lineStyle": {
+					"width": "3"
+			},
+			"symbolSize": "8",
+			"symbol": "emptyCircle",
+			"smooth": false
+	},
+	"bar": {
+			"itemStyle": {
+					"barBorderWidth": 0,
+					"barBorderColor": "#ccc"
+			}
+	},
+	"pie": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"scatter": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"boxplot": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"parallel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"sankey": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"funnel": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"gauge": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			}
+	},
+	"candlestick": {
+			"itemStyle": {
+					"color": "#e6a0d2",
+					"color0": "transparent",
+					"borderColor": "#e6a0d2",
+					"borderColor0": "#3fb1e3",
+					"borderWidth": "2"
+			}
+	},
+	"graph": {
+			"itemStyle": {
+					"borderWidth": 0,
+					"borderColor": "#ccc"
+			},
+			"lineStyle": {
+					"width": "1",
+					"color": "#cccccc"
+			},
+			"symbolSize": "8",
+			"symbol": "emptyCircle",
+			"smooth": false,
+			"color": [
+					"#3fb1e3",
+					"#6be6c1",
+					"#626c91",
+					"#a0a7e6",
+					"#c4ebad",
+					"#96dee8"
+			],
+			"label": {
+					"color": "#ffffff"
+			}
+	},
+	"map": {
+			"itemStyle": {
+					"areaColor": "#eeeeee",
+					"borderColor": "#aaaaaa",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#ffffff"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "rgba(63,177,227,0.25)",
+							"borderColor": "#3fb1e3",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#3fb1e3"
+					}
+			}
+	},
+	"geo": {
+			"itemStyle": {
+					"areaColor": "#eeeeee",
+					"borderColor": "#aaaaaa",
+					"borderWidth": 0.5
+			},
+			"label": {
+					"color": "#ffffff"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"areaColor": "rgba(63,177,227,0.25)",
+							"borderColor": "#3fb1e3",
+							"borderWidth": 1
+					},
+					"label": {
+							"color": "#3fb1e3"
+					}
+			}
+	},
+	"categoryAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#838383"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"valueAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#838383"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#838383",
+					"fontSize": 10
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#838383"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"logAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#cccccc"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#999999"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#eeeeee"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"timeAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#cccccc"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#999999"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#eeeeee"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"toolbox": {
+			"iconStyle": {
+					"borderColor": "#999999"
+			},
+			"emphasis": {
+					"iconStyle": {
+							"borderColor": "#666666"
+					}
+			}
+	},
+	"legend": {
+			"textStyle": {
+					"color": "#999999"
+			}
+	},
+	"tooltip": {
+			"axisPointer": {
+					"lineStyle": {
+							"color": "#cccccc",
+							"width": 1
+					},
+					"crossStyle": {
+							"color": "#cccccc",
+							"width": 1
+					}
+			}
+	},
+	"timeline": {
+			"lineStyle": {
+					"color": "#626c91",
+					"width": 1
+			},
+			"itemStyle": {
+					"color": "#626c91",
+					"borderWidth": 1
+			},
+			"controlStyle": {
+					"color": "#626c91",
+					"borderColor": "#626c91",
+					"borderWidth": 0.5
+			},
+			"checkpointStyle": {
+					"color": "#3fb1e3",
+					"borderColor": "#3fb1e3"
+			},
+			"label": {
+					"color": "#626c91"
+			},
+			"emphasis": {
+					"itemStyle": {
+							"color": "#626c91"
+					},
+					"controlStyle": {
+							"color": "#626c91",
+							"borderColor": "#626c91",
+							"borderWidth": 0.5
+					},
+					"label": {
+							"color": "#626c91"
+					}
+			}
+	},
+	"visualMap": {
+			"color": [
+					"#2a99c9",
+					"#afe8ff"
+			]
+	},
+	"dataZoom": {
+			"backgroundColor": "rgba(255,255,255,0)",
+			"dataBackgroundColor": "rgba(222,222,222,1)",
+			"fillerColor": "rgba(114,230,212,0.25)",
+			"handleColor": "#cccccc",
+			"handleSize": "100%",
+			"textStyle": {
+					"color": "#999999"
+			}
+	},
+	"markPoint": {
+			"label": {
+					"color": "#ffffff"
+			},
+			"emphasis": {
+					"label": {
+							"color": "#ffffff"
+					}
+			}
+	}
+}

+ 30 - 4
src/pages/report/index.vue

@@ -185,7 +185,29 @@
       <el-table-column prop="windturbine" align="center" label="风机编号" />
     </el-table>
     <h3 style="font-weight: bolder; font-size: 18px; color: black">
-      4、停机时间
+      4、浆距角分析
+    </h3>
+    <p class="ml-7">
+      容量系数是风机发电量能力的指标,数值越低,说明发电效率越低
+    </p>
+    <el-table
+      :data="blade"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px"
+    >
+      <el-table-column
+        prop="section"
+        align="center"
+        label="浆距角"
+        width="180"
+      />
+      <!-- <el-table-column prop="name" label="偏差率" /> -->
+      <el-table-column prop="wtidcount" align="center" label="风机数量" />
+      <el-table-column prop="windturbine" align="center" label="风机编号" />
+    </el-table>
+    <h3 style="font-weight: bolder; font-size: 18px; color: black">
+      5、停机时间
     </h3>
     <p class="ml-7">
       小风速下停机时间越长反应出低风速风机切入不及时,暴风天气不停机反应出风机切出不及时
@@ -253,6 +275,8 @@ import { ref, onMounted, reactive } from "vue";
 
 const curve = ref([]);
 const mrlxs = ref([]);
+const blade = ref([]);
+
 const staticwind = ref([]);
 const stoptime = ref([]);
 const nbdata = ref({});
@@ -325,12 +349,13 @@ const handleReport = async (index, row) => {
     ele.module = "偏差率负值";
   });
   }
-//   res.data.info.stoptime.forEach((ele)=>{
-//       ele.remark=ele.remark/60
-//   })
+  // res.data.info.blade.forEach((ele)=>{
+  //     ele.remark="浆距角"
+  // })
   
   curve.value = res.data.info.curve;
   mrlxs.value = res.data.info.mrlxs;
+  blade.value=res.data.info.blade;
   staticwind.value = res.data.info.staticwind;
   stoptime.value = res.data.info.stoptime;
   eltime.value = res.data.time;
@@ -364,6 +389,7 @@ const handleClose = (() => {
 const reset = (() =>{
   curve.value = [];
   mrlxs.value = [];
+  blade.value = [];
   staticwind.value = [];
   stoptime.value = [];
   eltime.value = '';