Merge branch 'main' of http://124.70.43.205:3000/xufenqi/PowerAnalysis into main

components.d.ts

@@ -85,6 +85,7 @@ declare module '@vue/runtime-core' {
     SimpleLineChart: typeof import('./src/components/chart/line/simple-line-chart.vue')['default']
     SingleBarChart: typeof import('./src/components/chart/bar/single-bar-chart.vue')['default']
     StrightLineChart: typeof import('./src/components/chart/line/stright-line-chart.vue')['default']
+    SubmitBtn: typeof import('./src/components/SubmitBtn.vue')['default']
     Table3: typeof import('./src/components/warningCom/table3.vue')['default']
     TableLineChart: typeof import('./src/components/chart/line/table-line-chart.vue')['default']
     Tags: typeof import('./src/components/Tags.vue')['default']

src/api/axios.js

@@ -1,12 +1,12 @@
 import axios from 'axios';
 import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
 import { nextTick } from "vue";
-import config from './config';
+import {baseURL, socketURL} from './config';
 import JSONBIG from 'json-bigint';
 // 配置新建一个 axios 实例
 var loading = null;
 const service = axios.create({
-    baseURL: config.baseURL,
+    baseURL: baseURL,
     timeout: 2000000,
     headers: { 'Content-Type': 'application/json' },
     transformResponse: [
@@ -87,4 +87,8 @@ service.interceptors.response.use(
 );
 
 // 导出 axios 实例
-export default service;
+export default service;
+export {
+    baseURL,
+    socketURL
+}

src/api/config.js

@@ -3,4 +3,6 @@ const config = {
     socketURL: 'ws://192.168.10.4:9002'
 }
 
-export default config;
+export default config;
+export const baseURL = config.baseURL
+export const socketURL = config.socketURL

src/components/SubmitBtn.vue

@@ -0,0 +1,12 @@
+<script setup name="SubmitBtn">
+const props = defineProps({
+	desc: {
+		type: String,
+		default: ''
+	}
+})
+</script>
+<template>
+	<!-- <div class="h-[24px] flex justify-center items-center text-white bg-[rgba(0,70,199,0.5)] px-[15px] cursor-pointer text-[14px] rounded-[13px]">{{props.desc}}</div> -->
+	<el-button size="small" type="primary">{{props.desc}}</el-button>
+</template>

src/data/areaData.json

@@ -0,0 +1,10 @@
+{
+    "msg": "成功",
+    "code": 200,
+    "data": {
+	"pcl5": 0.65,
+	"pcl10": 0.65,
+	"pcl12": 0.65,
+	"pcl25": 0.65
+     }   
+}

src/data/flower.json

@@ -0,0 +1,33 @@
+{
+	"msg": "成功",
+	"code": 200,
+	"data": [{
+		"count": [
+			[13, 8, 10, 13, 21, 41, 105, 129, 138, 102, 50, 11, 20, 14, 22, 16],
+			[16, 20, 10, 7, 6, 16, 126, 720, 1062, 262, 46, 10, 5, 12, 8, 7],
+			[0, 0, 0, 0, 0, 4, 30, 390, 448, 88, 4, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 9, 69, 99, 19, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 1, 1, 30, 31, 4, 1, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 2, 7, 11, 2, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+		],
+		"wt": "NG01_01",
+		"roses": [
+			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+			[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+		]
+	}]
+}

src/pages/curveDeviation/rateAnalysis/chartTheme.json

@@ -0,0 +1,393 @@
+
+{
+	"color": [
+			"#3fb1e3",
+			"#6be6c1",
+			"#626c91",
+			"#a0a7e6",
+			"#c4ebad",
+			"#96dee8"
+	],
+	"backgroundColor": "rgba(252,252,252,0)",
+	"textStyle": {},
+	"title": {
+			"textStyle": {
+					"color": "#B3B3B3"
+			},
+			"subtextStyle": {
+					"color": "#B3B3B3"
+			}
+	},
+	"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": "#b3b3b386"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#b3b3b386"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#b3b3b386"
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#b3b3b386"
+							]
+					}
+			},
+			"splitArea": {
+					"show": false,
+					"areaStyle": {
+							"color": [
+									"rgba(250,250,250,0.05)",
+									"rgba(200,200,200,0.02)"
+							]
+					}
+			}
+	},
+	"valueAxis": {
+			"axisLine": {
+					"show": true,
+					"lineStyle": {
+							"color": "#b3b3b386"
+					}
+			},
+			"axisTick": {
+					"show": false,
+					"lineStyle": {
+							"color": "#b3b3b386"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#b3b3b386",
+					"fontSize": 10
+			},
+			"splitLine": {
+					"show": true,
+					"lineStyle": {
+							"color": [
+									"#b3b3b386"
+							]
+					}
+			},
+			"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"
+					}
+			}
+	}
+}

src/pages/curveDeviation/rateAnalysis/components/chart.vue

@@ -1,5 +1,6 @@
-<script lang="ts" setup>
+<script setup>
 import util from "@tools/util";
+import chartTheme from './../chartTheme.json'
 import { ref, toRaw, computed, onMounted, watch } from 'vue';
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId
@@ -31,6 +32,11 @@ const props = defineProps({
 	subtext: {
 		type: String,
 		required: false
+	},
+	isRadar: {  //是否显示雷达图
+		type: Boolean,
+		required: false,
+		default: false
 	}
 })
 
@@ -41,23 +47,33 @@ const option = computed({
 			title: {
 				text: props.title || '',
 				subtext: props.subtext || '',
-				textStyle: {
-					fontSize: util.vh(16),
-					color: "#000",
-				},
 				top: 10,
-				left: 30
+				left: 30,
 			},
 			angleAxis: props.xAxis || {},
 			radiusAxis: {},
+			radar: props.isRadar?  [  //雷达图设定区域
+				{
+					indicator: props.xAxis.data || [],
+					center: ['60%','50%'],
+					radius: '70%',
+					splitLine: {
+						show: false,
+					},
+					splitArea: {
+						show: false
+					}
+				},
+			]: {},
 			polar: {
 				radius: '70%',
 				center: ['60%','50%']
 			},
 			tooltip: {
 				formatter: (params) => {
-					return `${params.seriesName}m<br/>${params.value>1? '频次：'+ params.value: ''}`
-				}
+					return params.componentSubType==='radar'? `${params.name}` : `${params.seriesName}m<br/>${params.value>1? '频次：'+ params.value: ''}`
+				},
+				confine: true
 			},
 			series: props.series || [],
 			legend: {
@@ -78,18 +94,19 @@ const option = computed({
 })
 watch(() => option, (newVal, oldVal) => {
 	if (chartIns.value) {
-		console.log(newVal)
 		const echartIns = toRaw(chartIns.value)
-		echartIns.setOption(newVal)
+		echartIns.setOption(newVal.value)
 	}
 }, { deep: true })
 
 onMounted(() => {
-	const echartIns =	echarts.init(document.getElementById(chartId)) 
+	echarts.registerTheme('chartTheme', chartTheme)
+	const echartIns =	echarts.init(document.getElementById(chartId),'chartTheme') 
 	chartIns.value = echartIns
-	console.log(JSON.stringify(option.value))
 	echartIns.setOption(option.value)
-	console.log(echartIns)
+	window.addEventListener('resize', () => {
+		echartIns.resize()
+	})
 })
 </script>
 <template>

src/pages/curveDeviation/rateAnalysis/components/lineChart.vue

@@ -0,0 +1,126 @@
+<script setup>
+import util from "@tools/util";
+import chartTheme from './../chartTheme.json'
+import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import * as echarts from 'echarts'
+const chartId = 'chart-' + util.newGUID(); //chartId
+const chartIns = ref(null)  //chart 实例
+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
+	},
+})
+
+/**定义option */
+const option = computed({
+	get() {
+		return {
+			color:[
+				"#FF8700",
+				"#0098d980",
+				"#626c91",
+				"#a0a7e6",
+				"#c4ebad",
+				"#96dee8"
+			],
+			title: {
+				text: props.title || '',
+				subtext: props.subtext || '',
+				top: 10,
+				left: 30,
+			},
+			xAxis: props.xAxis || {},
+			yAxis: props.yAxis || {},
+			tooltip: {
+				confine: true,
+				axisPointer: {
+            type: "cross",
+          },
+			},
+			dataset: props.dataset || [],
+			series: props.series || [],
+			legend: {
+				right: "120",
+				top: "5",
+				itemWidth: 6,
+			},
+			grid: {
+				top: 42,
+				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) {
+		console.log(newVal)
+		const echartIns = toRaw(chartIns.value)
+		echartIns.setOption(toRaw(newVal.value))
+	}
+}, { deep: true })
+
+onMounted(() => {
+	echarts.registerTheme('chartTheme', chartTheme)
+	const echartIns =	echarts.init(document.getElementById(chartId),'chartTheme') 
+	chartIns.value = echartIns
+	echartIns.setOption(option.value)
+	window.addEventListener('resize', () => {
+		echartIns.resize()
+	})
+})
+</script>
+<template>
+	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
+</template>

src/pages/curveDeviation/rateAnalysis/components/scatterSingleChart.vue

@@ -0,0 +1,117 @@
+<script setup name="scatterSingleChart">
+import util from "@tools/util";
+import chartTheme from './../chartTheme.json'
+import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import * as echarts from 'echarts'
+const chartId = 'chart-' + util.newGUID(); //chartId
+const chartIns = ref(null)  //chart 实例
+const props = defineProps({
+	xAxis: {
+		type: Array,
+		required: true,
+		default: () => ([])
+	},
+	yAxis: {
+		type: Array,
+		required: true,
+		default: () => ([])
+	},
+	series: {
+		type: Array,
+		required: false,
+		default: () => ([])
+	},
+	height: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+	width: {
+		type: String,
+		required: false,
+		default: '500px'
+	},
+})
+
+/**定义option */
+const option = computed({
+	get() {
+		return {
+			tooltip: {
+				position: 'top',
+				formatter: function (params) {
+					return (
+						params.value[2] +
+						' commits in ' +
+						params.value[0] +
+						' of ' +
+						params.value[1]
+					);
+				}
+			},
+			grid: {
+				top: 20,
+				left: 2,
+				bottom: 10,
+				right: 20,
+				containLabel: true
+			},
+			xAxis: props.xAxis || [],
+			//  {
+			// 	type: 'category',
+			// 	data: props.xAxis || [],
+			// 	boundaryGap: false,
+			// 	splitLine: {
+			// 		show: true
+			// 	},
+			// 	axisLine: {
+			// 		show: false
+			// 	}
+			// },
+			yAxis: props.yAxis || [],
+			// {
+			// 	type: 'category',
+			// 	data: props.yAxis,
+			// 	axisLine: {
+			// 		show: false
+			// 	}
+			// },
+			series: props.series || [] 
+			// [
+			// 	{
+			// 		name: 'Punch Card',
+			// 		type: 'scatter',
+			// 		symbolSize: function (val) {
+			// 			return val[2] * 2;
+			// 		},
+			// 		data: props.data,
+			// 		animationDelay: function (idx) {
+			// 			return idx * 5;
+			// 		}
+			// 	}
+			// ]
+		}
+	},
+	set(val) { }
+})
+watch(() => option, (newVal, oldVal) => {
+	if (chartIns.value) {
+		console.log(newVal)
+		const echartIns = toRaw(chartIns.value)
+		echartIns.setOption(toRaw(newVal.value))
+	}
+}, { deep: true })
+
+onMounted(() => {
+	echarts.registerTheme('chartTheme', chartTheme)
+	const echartIns = echarts.init(document.getElementById(chartId), 'chartTheme')
+	chartIns.value = echartIns
+	echartIns.setOption(option.value)
+	window.addEventListener('resize', () => {
+		echartIns.resize()
+	})
+})
+</script>
+<template>
+	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
+</template>

src/pages/curveDeviation/rateAnalysis/components/search.vue

@@ -1,4 +1,5 @@
-<script lang="ts" setup name="search">
+<script setup name="search">
+import SubmitBtn from '@com/SubmitBtn.vue'
 import { onMounted, reactive, ref } from 'vue'
 
 const queryForm = reactive({
@@ -11,16 +12,17 @@ const funSubmit = async () => {
 }
 </script>
 <template>
-	<div class="overflow-x-auto pl-[10px] pt-[10px]">
+	<div class="pl-[20px] flex items-center h-[80px] relative">
+		<div class="absolute top-[-7px] left-[20px] text-[#B3B3B3] text-[14px]">操作面板</div>
 		<el-form class="whitespace-nowrap" :inline="true" :model="queryForm">
-			<el-form-item label="合并方式">
-				<el-select v-model="queryForm.mode" class="w-[150px]">
+			<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>
-				<el-button type="primary" v-prevdbclick:5000="funSubmit">执行</el-button>
+			<el-form-item class="!mb-0">
+				<submit-btn v-prevdbclick:5000="funSubmit" desc="执行"></submit-btn>
 			</el-form-item>
 		</el-form>
 	</div>

src/pages/dataFilter/chartTheme.json

@@ -0,0 +1,398 @@
+
+{
+	"color": [
+			"#1C99FF",
+			"#FF8700",
+			"#e6b600d9",
+			"#0098d9",
+			"#3D54BE",
+			"#005eaa",
+			"#cda819",
+			"#32a487"
+	],
+	"textStyle": {},
+	"title": {
+			"textStyle": {
+					"color": "#333333"
+			},
+			"subtextStyle": {
+					"color": "#aaaaaa"
+			}
+	},
+	"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"
+			}
+	},
+	"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": "#333"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#333"
+			},
+			"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": "#B3B3B3"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#B3B3B3"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#B3B3B3"
+			},
+			"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": "#333"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#333"
+			},
+			"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": "#333"
+					}
+			},
+			"axisTick": {
+					"show": true,
+					"lineStyle": {
+							"color": "#333"
+					}
+			},
+			"axisLabel": {
+					"show": true,
+					"color": "#333"
+			},
+			"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"
+					}
+			},
+			"textStyle": {
+				"color": "#B3B3B3"
+			}
+	},
+	"legend": {
+			"textStyle": {
+					"color": "#B3B3B3"
+			}
+	},
+	"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": "#333333"
+			}
+	},
+	"markPoint": {
+			"label": {
+					"color": "#eeeeee"
+			},
+			"emphasis": {
+					"label": {
+							"color": "#eeeeee"
+					}
+			}
+	}
+}

src/pages/dataFilter/combine/components/current-scatter-chart.vue

@@ -6,7 +6,7 @@
 import util from "@tools/util";
 import partten from "@tools/partten";
 import * as echarts from "echarts";
-import chartTheme from './chartTheme.json'
+import chartTheme from './../../chartTheme.json'
 
 export default {
   name: 'currentScatterChart',
@@ -89,40 +89,34 @@ export default {
         //标题
         title: {
           text: that.chartTitle,
+          right: 440,
+          top: 4,
           textStyle: {
-            fontSize: util.vh(16),
-            color: that.theme === "dark" ? "#fff" : "#000",
+            fontSize: 14,
+            color: that.theme === "dark" ? partten.getColor("grayl") : "#000",
           },
         },
-        backgroundColor:
-          that.theme === "dark"
-            ? "rgba(0,0,0,0.4)"
-            : "rgba(255,255,255,0.5)",
+        // backgroundColor:
+        //   that.theme === "dark"
+        //     ? "rgba(0,0,0,0.4)"
+        //     : "rgba(255,255,255,0.5)",
         //工具箱
         toolbox: {
           show: true,
           x: "right",
-          position: [0, 0],
-          backgroundColor:
-            that.theme === "dark"
-              ? "rgba(0,0,0,0.4)"
-              : "rgba(255,255,255,0.5)",
-          borderColor:
-            that.theme === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+          position: [10, 10],
+          // backgroundColor:'rgba(0,0,0,0.4)',
+          borderColor: partten.getColor("gray"),
           textStyle: {
             fontSize: util.vh(16),
-            color: that.theme === "dark" ? "#fff" : "#000",
+            color: "#fff",
           },
           iconStyle: {
-            borderColor:
-              that.theme === "dark" ? "#fff" : "#000",
+            borderColor:"#fff",
           },
           emphasis: {
             iconStyle: {
-              borderColor:
-                that.theme === "dark" ? "#fff" : "#000",
+              borderColor: "#fff",
             },
           },
         },
@@ -131,17 +125,11 @@ export default {
           axisPointer: {
             type: "cross",
           },
-          backgroundColor:
-            that.theme === "dark"
-              ? "rgba(0,0,0,0.4)"
-              : "rgba(255,255,255,0.5)",
-          borderColor:
-            that.theme === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             fontSize: util.vh(16),
-            color: that.theme === "dark" ? "#fff" : "#000",
+            color: "#fff",
           },
           formatter(params) {
             return params.value?.x
@@ -160,7 +148,6 @@ export default {
           brushMode: "multiple",
           brushStyle: {
             borderWidth: 1,
-            color: "rgba(255,36,36,0.2)",
             borderColor: "#ff2424",
           },
         },
@@ -187,7 +174,7 @@ export default {
         //图例-每一条数据的名字
         legend: {
           show: that.showLegend,
-          data: [ "实际功率", "保证功率","无用点", "有用点", "Cp值"],
+          data: [ "拟合功率", "保证功率","无用点", "有用点", "Cp值"],
           right: "120",
           top: "5",
           // icon: "circle",
@@ -203,9 +190,10 @@ export default {
                 : "#000",
             fontSize: 12,
           },
+          
         },
         grid: {
-          top: 42,
+          top: 48,
           left: 40,
           right: 40,
           bottom: 24,
@@ -221,7 +209,6 @@ export default {
             interval: 1,
             axisLabel: {
               formatter: "{value}",
-              fontSize: util.vh(14),
             },
             splitLine: {
               show: false,
@@ -238,7 +225,7 @@ export default {
         yAxis: [{
           splitLine: { show: false },
           position: 'left',
-          min: 0
+          min: 0,
         }, {
           splitLine: { show: false },
           position: 'right',

src/pages/dataFilter/combine/components/search.vue

@@ -1,5 +1,6 @@
-<script lang="ts" setup name="search">
+<script setup name="search">
 import { reactive, ref } from 'vue'
+import SubmitBtn from '@com/SubmitBtn.vue'
 
 const queryForm = reactive({
 	maxs: 25,
@@ -17,33 +18,35 @@ const funSubmit = async () => {
 /**created */
 </script>
 <template>
-	<div class="overflow-x-auto pl-[10px] pt-[10px]">
+	<div class="pl-[20px] flex items-center h-[80px] relative">
+		<div class="absolute top-[-7px] left-[20px] text-[#B3B3B3] text-[14px]">操作面板</div>
 		<el-form class="" :inline="true" :model="queryForm">
-			<el-form-item label="最大风速">
-				<el-input-number v-model="queryForm.maxs" :max="30"></el-input-number>
+			<el-form-item label="最大风速" class="!mb-0">
+				<el-input-number v-model="queryForm.maxs" size="small" :max="30"></el-input-number>
 			</el-form-item>
-			<el-form-item label="最小风速">
-				<el-input-number v-model="queryForm.mins" :min="0"></el-input-number>
+			<el-form-item label="最小风速" class="!mb-0">
+				<el-input-number v-model="queryForm.mins" size="small" :min="0"></el-input-number>
 			</el-form-item>
-			<el-form-item label="最大功率">
-				<el-input-number v-model="queryForm.maxp"></el-input-number>
+			<el-form-item label="最大功率" class="!mb-0">
+				<el-input-number v-model="queryForm.maxp" size="small"></el-input-number>
 			</el-form-item>
-			<el-form-item label="最小功率">
-				<el-input-number v-model="queryForm.minp" :min="0"></el-input-number>
+			<el-form-item label="最小功率" class="!mb-0">
+				<el-input-number v-model="queryForm.minp" size="small" :min="0"></el-input-number>
 			</el-form-item>
-			<el-form-item label="多项式">
+			<el-form-item label="多项式" class="!mb-0">
 				<el-select v-model="queryForm.dimension" class="w-[80px]">
 					<el-option v-for="item in 30" :key="item" :value="item" :label="item"></el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="拟合方式">
+			<el-form-item label="拟合方式" class="!mb-0">
 				<el-select v-model="queryForm.mode" class="w-[120px]">
 					<el-option :value="0" label="单台拟合"></el-option>
 					<el-option :value="1" label="合并拟合"></el-option>
+					<el-option :value="2" label="同名拟合"></el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" @click="funSubmit">曲线拟合</el-button>
+			<el-form-item class="!mb-0">
+				<submit-btn @click="funSubmit" desc="曲线拟合"></submit-btn>
 			</el-form-item>
 		</el-form>
 	</div>

src/pages/dataFilter/combine/components/table.vue

@@ -1,20 +1,31 @@
-<script lang="ts" setup name="table">
+<script setup name="table">
 import { computed, ref } from 'vue';
 
-const props = withDefaults(defineProps<{
-  height?: string | number,
-  data: any,
-  column: any,
-  tableId: string,
-  tableName: string,
-  loading?: boolean
-}>(), {
-  height: '800px',
-  data: [],
-  column: [],
-  tableName: '',
-  tableId: '',
-  loading: false
+const props = defineProps({
+  height: {
+    type: String,
+    default: '800px'
+  },
+  data: {
+    type: Array,
+    default: () => ([]),
+  },
+  column: {
+    type: Array,
+    default: () => ([]),
+  },
+  tableName: {
+    type: String,
+    default: '',
+  },
+  tableId: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  }
 })
 const emits = defineEmits(['export'])
 const funExport = () => {
@@ -22,21 +33,20 @@ const funExport = () => {
 }
 const tableRef = ref('')
 const tableHeight =  computed(() => {
-  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 661
+  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 739
 })
 </script>
 <template>
   <div ref="tableRef" class=""
     :style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
-    <div class="flex justify-between items-center pb-[10px] border-b-[1px]">
-      <h3>{{props.tableName}}</h3>
-      <!-- <el-button type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
+    <div class="flex justify-between items-center pb-[10px]">
+      <h3>{{ props.tableName }}</h3>
+      <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
     </div>
-    <el-table border :data="props.data"
-      size="small" v-loading="props.loading"
-      :max-height="tableHeight"
-      :style="{ width: '100%'}">
-      <el-table-column align="center" show-overflow-tooltip v-for="item in props.column" :prop="item.prop" :label="item.label" sortable resizable :min-width="item.width? item.width : 80" />
+    <el-table stripe :data="props.data" size="small" v-loading="props.loading" :max-height="tableHeight"
+      :style="{ width: '100%' }">
+      <el-table-column align="center" show-overflow-tooltip v-for="item in props.column" :prop="item.prop"
+        :label="item.label" sortable resizable :min-width="item.width ? item.width : 80" />
     </el-table>
   </div>
 </template>

src/pages/dataFilter/combine/index.vue

@@ -1,23 +1,27 @@
-<script lang="ts" setup name="prepare">
+<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 { ref, nextTick, onActivated } from '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 = '40vh' //tree高度
-const excelHeight = '40vh' //excel高度
-const tableHeight = '75vh'
+const treeHeight = ref('40vh') //tree高度
+const excelHeight = ref('40vh') //excel高度
+const tableHeight = ref('75vh')
 /**excel 开始 */
 const excelCheckboxShow = ref(false)
 const excelType = ref('')
-const excelCheckIds = ref<string[]>([])
-const excelList = ref<{ id: string, name: string }[]>([])
-const funExcelChange = async (obj: any) => { //点击excel项时
+const excelCheckIds = ref([])
+const excelList = ref([])
+const funExcelChange = async (obj) => { //点击excel项时
 	activeTab.value = '1'
 	isChartArea.value = false
 	tableShowId.value = obj.id
@@ -32,6 +36,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 		llgl: [[]],
 		cpz: [[]]
 	}
+	let poiRes = null
 	let chartResponse = null
 	tableLoading.value = true
 	if (obj.type === 'process') {
@@ -39,20 +44,35 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 	} 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) {
+	if (chartResponse && chartResponse.code === 200) {
 		chartRes = chartResponse.data
+		avgObj.cpavg = chartRes.obj.cpavg?.toFixed(2)
+		avgObj.frequency = chartRes.obj.frequency?.toFixed(2)
+		avgObj.pcratio = chartRes.obj.pcratio?.toFixed(2)
 		dataSet.value = JSON.stringify([
 			{
 				source: chartRes.wyd
@@ -63,9 +83,10 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 				// source: chartRes.scatterhs
 			}
 		])
-		seriesData.value = <any>[
+		const color = ["#1C99FF", "#FF8700", "#3D54BE", "#fa8c16", "#1DA0D7", "#DD5044"]
+		seriesData.value = [
 			{
-				name: "实际功率",
+				name: "拟合功率",
 				type: "line",
 				symbol: "line", //设定为实心点
 				symbolSize: 0, //设定实心点的大小
@@ -85,6 +106,9 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 			{
 				type: 'effectScatter',
 				showEffectOn: "emphasis",
+				rippleEffect: {
+					scale: 1
+				},
 				name: '无用点',
 				symbolSize: (data) => {
 					return data.s ? data.s > 10 ? 10 : data.s : 4
@@ -94,19 +118,20 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 					x: 'x',
 					y: 'y'
 				},
-				animation: false,
 				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,
-				animation: false,
 				encode: {
 					x: 'x',
 					y: 'y'
@@ -131,10 +156,10 @@ const funExcelCheckChange = ({ checkArr, data }) => {   //bug
 	excelCheckIds.value = checkArr
 }
 /**excel fitData */
-const excelFitList = ref<{ id: string, name: string }[]>([])
+const excelFitList = ref([])
 /**prepare tree 开始 */
 const treeData = ref([])
-const funRepeatMap = (arr: any) => {
+const funRepeatMap = (arr) => {
 	return arr.map(o => {
 		if (o.children) {
 			const findIndex = o.children.findIndex(p => !!p.type)
@@ -246,9 +271,20 @@ const funSubmit = async (query) => {
 	}
 }
 /**chart Data */
+const avgObj = reactive({ //平均cpz等
+	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<any>([])
+const seriesData = ref([])
 const isChartArea = ref(false) // 用来控制图表是否区域划分
 const dataSet = ref('')
 const funChartSelect = async (batch) => {
@@ -309,6 +345,7 @@ const funChartSelect = async (batch) => {
 const funChartArea = () => {
 	if (seriesData.value?.length) {
 		if (!isChartArea.value) {
+			// 请求一下
 			seriesData.value[0] = {
 					...seriesData.value[0],
 					markLine: {
@@ -357,7 +394,7 @@ const funChartArea = () => {
 						data: [
 							[
 								{
-									name: '3~5m/s',
+									name: `3~5m 偏差率: ${markDot.pcl5}`,
 									xAxis: 3,
 								},
 								{
@@ -366,7 +403,7 @@ const funChartArea = () => {
 							],
 							[
 								{
-									name: '5~10m/s',
+									name: `5~10m 偏差率: ${markDot.pcl10}`,
 									xAxis: 5,
 								},
 								{
@@ -375,7 +412,7 @@ const funChartArea = () => {
 							],
 							[
 								{
-									name: '10~12m/s',
+									name: `10~12m 偏差率: ${markDot.pcl12}`,
 									xAxis: 10,
 								},
 								{
@@ -384,7 +421,7 @@ const funChartArea = () => {
 							],
 							[
 								{
-									name: '12~25m/s',
+									name: `12~25m 偏差率: ${markDot.pcl25}`,
 									xAxis: 12,
 								},
 								{
@@ -392,14 +429,14 @@ const funChartArea = () => {
 								}
 							],
 						]
-					}
+					},
 				}
 			isChartArea.value = true
 		} else {
 			seriesData.value[0] = {
 					...seriesData.value[0],
 					markLine: null,
-					markArea: null
+					markArea: null,
 				}
 			isChartArea.value = false
 		}
@@ -414,6 +451,23 @@ 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()
@@ -421,8 +475,9 @@ onActivated(() => {
 })
 </script>
 <template>
-	<div class="bg-white pb-[10px]">
-		<search-cop @submit="funSubmit"></search-cop>
+	<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" title="风机功率点位">
 			<el-tabs v-model="wtTab">
 				<el-tab-pane label="数据" name="table">
@@ -443,39 +498,42 @@ onActivated(() => {
 				</el-tab-pane>
 			</el-tabs>
 		</el-dialog>
-		<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">
-					<el-button class="absolute right-[16px] top-[4px] z-10" type="primary"
-						v-if="activeTab === '2' && excelType === 'fitting'" @click="funChartArea">区域划分</el-button>
-					<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="100%" chartTitle="风速功率曲线图" :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 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="'平均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>

src/pages/dataFilter/prepare/components/search.vue

@@ -1,6 +1,7 @@
-<script lang="ts" setup name="search">
+<script setup name="search">
 import { onMounted, reactive, ref } from 'vue'
 import request from '@/api/axios.js'
+import SubmitBtn from '@com/SubmitBtn.vue'
 
 const queryForm = reactive({
 	station: '',
@@ -19,7 +20,7 @@ const funGetStation = async () => {
 		funGetWind(queryForm.station)
 	}
 }
-const funStationChange = (stationId?: string) => {
+const funStationChange = (stationId) => {
 	if (stationId) {
 		funGetWind(stationId)
 	} else {
@@ -27,8 +28,8 @@ const funStationChange = (stationId?: string) => {
 	}
 }
 /**风机 */
-const windList = ref<{id:string, name: string}[]>([])
-const funGetWind = async (stationId: string) => {
+const windList = ref([])
+const funGetWind = async (stationId) => {
 	const res = await request.get("/base/windturbine", {params: { stationId }})
 	windList.value = res.data
 	queryForm.wtIds = res.data.map(o => o.id)
@@ -60,25 +61,26 @@ const funSubmit = async () => {
 funGetStation()
 </script>
 <template>
-	<div class="overflow-x-auto pl-[10px] pt-[10px]">
+	<div class="pl-[20px] flex items-center h-[80px] relative">
+		<div class="absolute top-[-7px] left-[20px] text-[#B3B3B3] text-[14px]">操作面板</div>
 		<el-form class="whitespace-nowrap" :inline="true" :model="queryForm">
-			<el-form-item label="场站">
+			<el-form-item label="场站" class="!mb-0">
 				<el-select v-model="queryForm.station" class="w-[150px]" @change="funStationChange">
 					<el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="风机">
-				<el-select multiple class="w-[150px]" clearable v-model="queryForm.wtIds" collapse-tags>
+			<el-form-item label="风机" class="!mb-0">
+				<el-select multiple clearable class="w-[150px]" v-model="queryForm.wtIds" collapse-tags>
 					<el-option v-for="item in windList" :key="item.id" :label="item.name" :value="item.id"></el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="开始时间">
-				<el-date-picker class="!w-[150px]" type="date" v-model="queryForm.st"></el-date-picker>
+			<el-form-item label="开始时间" class="!mb-0">
+				<el-date-picker type="date" class="!w-[150px]" v-model="queryForm.st"></el-date-picker>
 			</el-form-item>
-			<el-form-item label="结束时间">
-				<el-date-picker class="!w-[150px]" type="date" v-model="queryForm.et"></el-date-picker>
+			<el-form-item label="结束时间" class="!mb-0">
+				<el-date-picker type="date" class="!w-[150px]" v-model="queryForm.et"></el-date-picker>
 			</el-form-item>
-			<el-form-item label="等间隔">
+			<el-form-item label="等间隔" class="!mb-0 h-[40px]">
 				<el-radio-group v-model="queryForm.interval">
 					<el-radio :label="1">一秒钟</el-radio>
 					<el-radio :label="2">一分钟</el-radio>
@@ -86,8 +88,8 @@ funGetStation()
 					<el-radio :label="4">十五分钟</el-radio>
 				</el-radio-group>
 			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" v-prevdbclick:5000="funSubmit">执行</el-button>
+			<el-form-item class="!mb-0">
+				<submit-btn v-prevdbclick:5000="funSubmit" desc="执行"></submit-btn>
 			</el-form-item>
 		</el-form>
 	</div>

src/pages/dataFilter/prepare/components/table.vue

@@ -1,19 +1,30 @@
-<script lang="ts" setup name="table">
+<script setup name="table">
 import {ref, computed} from 'vue'
-const props = withDefaults(defineProps<{
-  height?: string | number,
-  data: any,
-  column: any,
-  tableId: string,
-  tableName: string,
-  loading?: boolean
-}>(), {
-  height: '800px',
-  data: [],
-  column: [],
-  tableName: '',
-  tableId: '',
-  loading: false
+const props = defineProps({
+  height: {
+    type: String,
+    default: '800px'
+  },
+  data: {
+    type: Array,
+    default: () => ([]),
+  },
+  column: {
+    type: Array,
+    default: () => ([]),
+  },
+  tableName: {
+    type: String,
+    default: '',
+  },
+  tableId: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  }
 })
 const emits = defineEmits(['export'])
 const funExport = () => {
@@ -21,17 +32,18 @@ const funExport = () => {
 }
 const tableRef = ref('')
 const tableHeight =  computed(() => {
-  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 661
+  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 739
 })
 </script>
 <template>
   <div ref="tableRef" class="p-[10px] shadow rounded-[6px] shadow-blue-500"
     :style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
-    <div class="flex justify-between items-center pb-[10px] border-b-[1px]">
+    <div class="flex justify-between items-center pb-[10px]">
       <h3>{{props.tableName}}</h3>
-      <!-- <el-button type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
+      <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
     </div>
-    <el-table border :data="props.data"
+    <el-table :data="props.data"
+      stripe
       size="small" v-loading="props.loading"
       :max-height="tableHeight"
       :style="{ width: '100%'}">

src/pages/dataFilter/prepare/index.vue

@@ -1,19 +1,19 @@
-<script lang="ts" setup name="prepare">
+<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 { ElMessage } from 'element-plus';
 import { onMounted, ref, onActivated } from 'vue'
-import request from "@/api/axios.js"
-import config from '@/api/config.js'
+import request from '@/api/axios.js'
+import {baseURL, socketURL} from '@/api/axios.js'
 /**配置参数 */
-const treeHeight = '81vh' //tree高度
-const excelHeight = '81vh' //excel高度
-const tableHeight = '81vh'
+const treeHeight = ref('81vh') //tree高度
+const excelHeight = ref('81vh') //excel高度
+const tableHeight = ref('81vh')
 /**excel 开始 */
-const excelList = ref<{ id: string, name: string }[]>([])
-const funExcelChange = async (obj: any) => { //点击excel项时
+const excelList = ref([])
+const funExcelChange = async (obj) => { //点击excel项时
 	tableShowId.value = obj.id
 	tableName.value = obj.name
 	tableLoading.value = true
@@ -22,6 +22,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 		return {
 			prop: o.key,
 			label: o.des,
+			width: o.des==='时间'? 100: 80,
 		}
 	})
 	tableData.value = res.data.data
@@ -29,7 +30,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 }
 /**tree 开始 */
 const treeData = ref([])
-const funRepeatMap = (arr: any) => {
+const funRepeatMap = (arr) => {
 	return arr.map(o => {
 		if (o.children) {
 			const findIndex = o.children.findIndex(p => !!p.type)
@@ -75,14 +76,14 @@ const tableLoading = ref(false)
 const tableData = ref([])
 const funExport = async () => {
 	const a = document.createElement('a')
-	a.href = config.baseURL + '/power/prepare/download?id=' + tableShowId.value
+	a.href = baseURL + '/power/prepare/download?id=' + tableShowId.value
 	a.download = ''
 	a.click()
 }
 /**submit */
 const progress = ref(0)
 const funWebSocket = () => {
-	const webSocket = new WebSocket(`${config.socketURL}/ws/powerfitting/admin`)
+	const webSocket = new WebSocket(`${socketURL}/ws/powerfitting/admin`)
 	webSocket.onerror = () => setTimeout(() => { funWebSocket() }, 2000)
 
 	webSocket.onmessage = (event) => {
@@ -107,30 +108,46 @@ const funSubmit = async (params) => {
 /**created */
 funGetTree()
 funWebSocket()
+/**mounted */
+onMounted(() => {
+	tableHeight.value = window.innerHeight - 200 + 'px'
+	excelHeight.value = window.innerHeight - 200 + 'px'
+	treeHeight.value = window.innerHeight - 200 + 'px'
+	window.addEventListener('resize', () => {
+		tableHeight.value = window.innerHeight - 200 + 'px'
+		excelHeight.value = window.innerHeight - 200 + 'px'
+		treeHeight.value = window.innerHeight - 200 + 'px'
+	})
+})
 /**activated */
 onActivated(() => {
 	funGetTree()
 })
 </script>
 <template>
-	<div class="bg-white pb-[10px] relative">
-		<search-cop @submit="funSubmit"></search-cop>
-		<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>
-					<table-cop :data="tableData" :column="tableColumn" :loading="tableLoading" :height="tableHeight"
-						:tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
-				</div>
-			</el-col>
-		</el-row>
-		<el-progress :percentage="progress" class="!absolute top-0 right-0 left-0" :indeterminate="false" color="rgb(19,206,102)"
-			:stroke-width="4" :show-text="false" />
+	<div class="bg-white py-[10px] px-[10px] relative">
+		<search-cop class="mb-[20px] shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
+		</search-cop>
+		<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" :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>
+						<table-cop class="" :data="tableData" :column="tableColumn" :loading="tableLoading"
+							:height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+
+		<el-progress :percentage="progress" v-if="progress" class="!absolute top-0 right-0 left-0" :indeterminate="false"
+			color="rgb(19,206,102)" :stroke-width="4" :show-text="false" />
 	</div>
 </template>

src/pages/dataFilter/process/components/search.vue

@@ -1,7 +1,6 @@
-<script lang="ts" setup name="search">
+<script setup name="search">
 import { reactive, ref } from 'vue'
-import request from '@/api/axios.js'
-import { ElMessage } from 'element-plus';
+import SubmitBtn from '@com/SubmitBtn.vue'
 
 const queryForm = reactive({
 	maxs: 25,
@@ -13,7 +12,7 @@ const queryForm = reactive({
 	isbw: true,
 	istj: true,
 	isglpc: true,
-	isqfh: false,
+	// isqfh: false,
 	qfhdj: 2
 })
 /**导出 */
@@ -24,31 +23,28 @@ const funSubmit = async () => {
 /**created */
 </script>
 <template>
-	<div class="overflow-x-auto pl-[10px] pt-[10px]">
+	<div class="pl-[20px] flex items-center h-[80px] relative">
+		<div class="absolute top-[-7px] left-[20px] text-[#B3B3B3] text-[14px]">操作面板</div>
 		<el-form class="" :inline="true" :model="queryForm">
-			<el-form-item label="最大风速">
-				<el-input-number v-model="queryForm.maxs" :max="30"></el-input-number>
+			<el-form-item label="最大风速" class="!mb-0">
+				<el-input-number v-model="queryForm.maxs" class="!w-[130px]" :max="30"></el-input-number>
 			</el-form-item>
-			<el-form-item label="最小风速">
-				<el-input-number v-model="queryForm.mins" :min="0"></el-input-number>
+			<el-form-item label="最小风速" class="!mb-0">
+				<el-input-number v-model="queryForm.mins" class="!w-[130px]" :min="0"></el-input-number>
 			</el-form-item>
-			<el-form-item label="最大功率">
-				<el-input-number v-model="queryForm.maxp"></el-input-number>
+			<el-form-item label="最大功率" class="!mb-0">
+				<el-input-number v-model="queryForm.maxp" class="!w-[130px]"></el-input-number>
 			</el-form-item>
-			<el-form-item label="最小功率">
-				<el-input-number v-model="queryForm.minp" :min="0"></el-input-number>
+			<el-form-item label="最小功率" class="!mb-0">
+				<el-input-number v-model="queryForm.minp" class="!w-[130px]" :min="0"></el-input-number>
 			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" @click="funSubmit">数据预处理</el-button>
-			</el-form-item>
-			<div class="block">
-				<el-form-item label="筛选条件：">
+				<el-form-item label="筛选条件：" class="!mb-0">
 					<el-checkbox v-model="queryForm.isfbw">非并网</el-checkbox>
 					<el-checkbox v-model="queryForm.isfhl">非合理值</el-checkbox>
 					<el-checkbox v-model="queryForm.isbw">并网后10分钟</el-checkbox>
 					<el-checkbox v-model="queryForm.istj">停机前10分钟</el-checkbox>
 					<el-checkbox v-model="queryForm.isglpc">功率曲线偏差</el-checkbox>
-					<el-checkbox v-model="queryForm.isqfh">欠符合等级</el-checkbox>
+					<!-- <el-checkbox v-model="queryForm.isqfh">欠符合等级</el-checkbox> -->
 					<el-select class="ml-10px w-[80px]" v-model="queryForm.qfhdj">
 						<el-option :value="1" label="1"></el-option>
 						<el-option :value="2" label="2"></el-option>
@@ -57,7 +53,9 @@ const funSubmit = async () => {
 						<el-option :value="5" label="5"></el-option>
 					</el-select>
 				</el-form-item>
-			</div>
+				<el-form-item class="!mb-0">
+				<submit-btn @click="funSubmit" desc="预处理"></submit-btn>
+			</el-form-item>
 		</el-form>
 	</div>
 </template>

src/pages/dataFilter/process/components/table.vue

@@ -1,19 +1,30 @@
-<script lang="ts" setup name="table">
+<script setup name="table">
 import {ref, computed} from 'vue'
-const props = withDefaults(defineProps<{
-  height?: string | number,
-  data: any,
-  column: any,
-  tableId: string,
-  tableName: string,
-  loading?: boolean
-}>(), {
-  height: '800px',
-  data: [],
-  column: [],
-  tableName: '',
-  tableId: '',
-  loading: false
+const props = defineProps({
+  height: {
+    type: String,
+    default: '800px'
+  },
+  data: {
+    type: Array,
+    default: () => ([]),
+  },
+  column: {
+    type: Array,
+    default: () => ([]),
+  },
+  tableName: {
+    type: String,
+    default: '',
+  },
+  tableId: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  }
 })
 const emits = defineEmits(['export'])
 const funExport = () => {
@@ -21,17 +32,18 @@ const funExport = () => {
 }
 const tableRef = ref('')
 const tableHeight =  computed(() => {
-  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 661
+  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 700
 })
 </script>
 <template>
   <div ref="tableRef" class="p-[10px] shadow rounded-[6px] shadow-blue-500"
     :style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
-    <div class="flex justify-between items-center pb-[10px] border-b-[1px]">
+    <div class="flex justify-between items-center pb-[10px]">
       <h3>{{props.tableName}}</h3>
-      <!-- <el-button type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
+      <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
     </div>
-    <el-table border :data="props.data"
+    <el-table :data="props.data"
+      stripe
       size="small" v-loading="props.loading"
       :max-height="tableHeight"
       :style="{ width: '100%'}">

src/pages/dataFilter/process/index.vue

@@ -1,21 +1,21 @@
-<script lang="ts" setup name="prepare">
+<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 { ref,onActivated } from 'vue'
+import { ref,onActivated, onMounted } from 'vue'
 import request from '@/api/axios.js'
-import config from '@/api/config.js'
+import {baseURL} from '@/api/axios.js'
 import { ElMessage } from 'element-plus'
 /**配置参数 */
-const treeHeight = '37.3vh' //tree高度
-const excelHeight = '75.6vh' //excel高度
-const tableHeight = '75.6vh'
+const treeHeight = ref('40vh') //tree高度
+const excelHeight = ref('81vh') //excel高度
+const tableHeight = ref('81vh')
 /**excel 开始 */
 const excelCheckboxShow = ref(false)
-const excelCheckIds = ref<string[]>([])
-const excelList = ref<{ id: string, name: string }[]>([])
-const funExcelChange = async (obj: any) => { //点击excel项时
+const excelCheckIds = ref([])
+const excelList = ref([])
+const funExcelChange = async (obj) => { //点击excel项时
 	tableShowId.value = obj.id
 	tableName.value = obj.name
 	let res = null
@@ -29,6 +29,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 		return {
 			prop: o.key,
 			label: o.des,
+			width: o.des==='时间'? 100: 80,
 		}
 	})
 	tableData.value = res.data.data
@@ -39,7 +40,7 @@ const funExcelCheckChange = ({ checkArr, data }) => {   //bug
 }
 /**prepare tree 开始 */
 const treeData = ref([])
-const funRepeatMap = (arr: any) => {
+const funRepeatMap = (arr) => {
 	return arr.map(o => {
 		if (o.children) {
 			const findIndex = o.children.findIndex(p => !!p.type)
@@ -128,7 +129,7 @@ const tableName = ref('')
 const tableData = ref([])
 const funExport = async () => {
 	const a = document.createElement('a')
-	a.href = config.baseURL + '/power/process/download?id=' + tableShowId.value
+	a.href = baseURL + '/power/process/download?id=' + tableShowId.value
 	a.download = ''
 	a.click()
 }
@@ -152,6 +153,17 @@ const funSubmit = async (query) => {
 /**created */
 funGetTree()
 funGetProcessTree()
+/**mounted */
+onMounted(() => {
+	tableHeight.value = window.innerHeight - 200 + 'px'
+	excelHeight.value = window.innerHeight - 200 + 'px'
+	treeHeight.value = (window.innerHeight - 210) / 2 + 'px'
+	window.addEventListener('resize', () => {
+		tableHeight.value = window.innerHeight - 200 + 'px'
+		excelHeight.value = window.innerHeight - 200 + 'px'
+		treeHeight.value = (window.innerHeight - 210) / 2  + 'px'
+	})
+})
 /**activated */
 onActivated(() => {
 	funGetTree()
@@ -159,25 +171,29 @@ onActivated(() => {
 })
 </script>
 <template>
-	<div class="bg-white pb-[10px]">
-		<search-cop @submit="funSubmit"></search-cop>
-		<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>
-			</el-col>
-			<el-col :span="16">
-				<div>
-					<table-cop :data="tableData" :loading="tableLoading" :column="tableColumn" :height="tableHeight"
-						:tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
-				</div>
-			</el-col>
-		</el-row>
+	<div class="bg-white py-[10px] px-[10px]">
+		<search-cop class="mb-[20px]  shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
+		</search-cop>
+		<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>
+				</el-col>
+				<el-col :span="16">
+					<div>
+						<table-cop class="" :data="tableData" :loading="tableLoading" :column="tableColumn"
+							:height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
 	</div>
 </template>