2022-11-16 update

1. 调整excel.vue  tree.vue 页面效果
2. 调整曲线拟合图表展示大数据量时的效果
3. 调整表格显示时, 不固定表头的问题

src/components/excel.vue

@@ -12,8 +12,10 @@ const props = withDefaults(defineProps<{
 	checkIds: () => []
 })
 const excelCheckIds = ref<string[]>([])
+const currentId = ref('')
 const emits = defineEmits(['excelChange', 'checkChange'])
 const funExcelChange = (obj: any) => {
+	currentId.value = obj.id
 	emits('excelChange', obj)
 }
 watch(() => props.checkIds, (newVal, oldVal) => {  //监听外部checkIds 赋值当前全选
@@ -24,19 +26,19 @@ const funCheckChange = (checkArr) => {
 }
 </script>
 <template>
-	<div class="overflow-auto shadow rounded-[6px] shadow-blue-500 p-[6px]"
+	<div class="overflow-auto shadow rounded-[6px] shadow-blue-500 pl-[6px] pt-[6px] pb-[6px]"
 		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
 		<el-empty v-if="!props.data.length" description="暂无数据" />
 		<el-checkbox-group size="small" v-model="excelCheckIds" v-if="props.showCheckbox" @change="funCheckChange">
-			<el-checkbox size="small" :label="item.id" v-for="item in props.data" :key="item.name">
+			<el-checkbox :class="{'bg-[rgb(236,245,255)]': currentId === item.id}" size="small" class="!mr-0" :label="item.id" v-for="item in props.data" :key="item.name">
 				<span class="mb-[6px] cursor-pointer text-[12px] leading-[10px] inline-flex items-end"
-					@click.self.stop="funExcelChange(item)"><el-icon class="mr-[4px]"><Document /></el-icon>{{ item.name }}</span>
+					@click.stop="funExcelChange(item)"><el-icon class="mr-[4px]"><Document /></el-icon>{{ item.name }}</span>
 			</el-checkbox>
 		</el-checkbox-group>
 		<div v-else>
 			<div
-				class="ml-[6px] pl-[8px] text-[#606266] cursor-pointer leading-[10px] inline-flex justify-center items-center h-[24px] text-[12px]"
-				v-for="item in props.data" :key="item.name" @click="funExcelChange(item)"><el-icon class="mr-[4px]"><Document /></el-icon>{{ item.name }}</div>
+				class="text-[#606266] pl-[8px] w-[96%] cursor-pointer leading-[10px] inline-flex items-center h-[24px] text-[12px]"
+				v-for="item in props.data" :key="item.name" :class="{'bg-[rgb(236,245,255)]': currentId === item.id}" @click="funExcelChange(item)"><el-icon class="mr-[4px]"><Document /></el-icon>{{ item.name }}</div>
 		</div>
 	</div>
 </template>

src/components/tree.vue

@@ -1,17 +1,18 @@
 <template>
 	<div class="shadow rounded-[6px] shadow-blue-500" :style="{
 		height:
-			typeof props.height === 'string' ? props.height : props.height + 'px',
+			typeof props.height === 'string' ? props.height : props.height + 'px', 
+		overflowY: 'hidden'
 	}">
 		<el-input class="pb-[10px]" v-model="filterText" placeholder="输入关键字过滤" @input="funfilterChange" />
-		<el-tree ref="treeRef" icon="" :data="props.data" :show-checkbox="props.showCheckbox" default-expand-all node-key="id"
+		<el-tree ref="treeRef" :style="{height: `calc(${props.height} - 46px)`, overflow: 'auto'}" icon="" :data="props.data" :show-checkbox="props.showCheckbox" default-expand-all node-key="id"
 			highlight-current :props="defaultProps" :current-node-key="''" @check="funCheckChange"
 			:expand-on-click-node="false" @node-click="funCurrentChange" :filter-node-method="funTreeFilter">
 			<template #default="{ node, data }">
 				<p v-if="node.level == 1" class="flex justify-between items-center text-[12px]"
 					:class="[props.showCheckbox ? 'w-[84%]' : 'w-[90%]']">
 					<span>{{ node.label }}</span>
-					<el-icon @click.stop="emits('refresh')">
+					<el-icon title="刷新" @click.stop="emits('refresh')">
 						<RefreshRight />
 					</el-icon>
 				</p>
@@ -19,7 +20,7 @@
 					style="margin-right: 30px">
 					<span class="el-dropdown-link text-[12px] flex items-center">
 						<el-icon class="mr-[4px]">
-							<Folder v-if="!node.expanded" />
+							<Folder v-if="!node.expanded || (node.isLeaf && !node.isCurrent)" />
 							<FolderOpened v-else />
 						</el-icon>
 						{{ node.label }}

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

@@ -95,7 +95,7 @@ export default {
             : "rgba(255,255,255,0.5)",
         //工具箱
         toolbox: {
-          show: false,
+          show: true,
           x: "right",
           position: [10, 10],
           backgroundColor:
@@ -145,12 +145,15 @@ export default {
           },
         },
         brush: {
+          brushLink: 'all',
+          yAxisIndex: 'all',
+          xAxisIndex: 'all',
           transformable: true,
           throttleType: "debounce",
           throttleDelay: 600,
-          removeOnClick: false,
+          removeOnClick: true,
           brushType: "polygon",
-          brushMode: "multiple",
+          brushMode: "single",
           brushStyle: {
             borderWidth: 1,
             color: "rgba(255,36,36,0.2)",
@@ -237,6 +240,7 @@ export default {
           position: 'right',
           min: 0,
         }],
+        animation: false,
         //数据-data是最终要显示的数据
         series: that.seriesData,
       };
@@ -279,6 +283,7 @@ export default {
     // });
   },
   updated() {
+    console.log('update')
     let myChart = echarts.init(document.getElementById(this.id));
     myChart.dispose();
     this.$nextTick(() => {

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

@@ -7,7 +7,7 @@ const queryForm = reactive({
 	maxp: 2500,
 	minp: 0,
 	dimension: 10,  //拟合维度
-	mode: 1   //拟合方式
+	mode: 0   //拟合方式
 })
 /**导出 */
 const emits = defineEmits(['submit'])
@@ -38,8 +38,8 @@ const funSubmit = async () => {
 			</el-form-item>
 			<el-form-item label="拟合方式">
 				<el-select v-model="queryForm.mode" class="w-[120px]">
-					<el-option key="0" value="0" label="单台拟合"></el-option>
-					<el-option key="1" value="1" label="合并拟合"></el-option>
+					<el-option :value="0" label="单台拟合"></el-option>
+					<el-option :value="1" label="合并拟合"></el-option>
 				</el-select>
 			</el-form-item>
 			<el-form-item>

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup name="table">
+import { computed, ref } from 'vue';
+
 const props = withDefaults(defineProps<{
   height?: string | number,
   data: any,
@@ -18,9 +20,14 @@ const emits = defineEmits(['export'])
 const funExport = () => {
   emits('export')
 }
+const tableRef = ref('')
+const tableHeight =  computed(() => {
+  console.log(tableRef.value.offsetHeight)
+  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 42 : 661
+})
 </script>
 <template>
-  <div class=""
+  <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>
@@ -28,7 +35,8 @@ const funExport = () => {
     </div>
     <el-table border :data="props.data"
       size="small" v-loading="props.loading"
-      :style="{ width: '100%', height: 'calc(100% - 42px)', 'overflow': 'auto' }">
+      :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>

src/pages/dataFilter/combine/index.vue

@@ -35,6 +35,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 	if (obj.type === 'process') {
 		res = await request.get('/power/process/show', {params: { id: obj.id }})
 	} else if (obj.type === 'fitting') {
+		activeTab.value = '2'
 		res = await request.get('/power/fitting/show', {params: { id: obj.id }})
 		chartResponse = await request.get('/power/fitting/curve', {params: { id: obj.id }})
 	}
@@ -52,6 +53,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 		chartRes = chartResponse.data
 		seriesData.value = [
 			{
+				id: 1,
 				name: "实际功率",
 				type: "line",
 				symbol: "line", //设定为实心点
@@ -69,6 +71,7 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 				xAxisIndex: 0,
 			},
 			{
+				id: 2,
 				name: "保证功率",
 				type: "line",
 				symbol: "line", //设定为实心点
@@ -86,23 +89,57 @@ const funExcelChange = async (obj: any) => { //点击excel项时
 				xAxisIndex: 0,
 			},
 			{
-				name: "无用点",
-				type: "effectScatter",
-				showEffectOn: "emphasis",
-				symbolSize: 5,
-				data: chartRes.scatterls,
+				id: 3,
+        type: 'scatter',
+				name: '无用点',
+        data: chartRes.scatterls,
+        // dimensions: ['x', 'y'],
+        symbolSize: 5,
+				encode:{
+					x: [0],
+					y: [1]
+				},
+        large: true,
+        largeThreshold: 500,
 				xAxisIndex: 0,
 				yAxisIndex: 0,
-			},
+      },
+			// {
+			// 	name: "无用点",
+			// 	type: "effectScatter",
+			// 	showEffectOn: "emphasis",
+			// 	symbolSize: 5,
+			// 	data: chartRes.scatterls,
+			// 	xAxisIndex: 0,
+			// 	yAxisIndex: 0,
+			// },
 			{
-				name: "有用点",
-				type: "effectScatter",
-				showEffectOn: "emphasis",
-				symbolSize: 5,
-				data: chartRes.scatterhs,
+				id: 4,
+        type: 'scatter',
+				name: '有用点',
+        data: chartRes.scatterhs,
+        // dimensions: ['x', 'y'],
+        symbolSize: 5,
+				encode:{
+					x: [0],
+					y: [1]
+				},
+        large: true,
+        largeThreshold: 500,
 				xAxisIndex: 0,
 				yAxisIndex: 0,
-			},
+      },
+
+			// {
+			// 	name: "有用点",
+			// 	type: "effectScatter",
+			// 	showEffectOn: "emphasis",
+			// 	symbolSize: 5,
+			// 	data: chartRes.scatterhs,
+			// 	animationThreshold: 500,
+			// 	xAxisIndex: 0,
+			// 	yAxisIndex: 0,
+			// },
 			{
 				name: "Cp值",
 				type: "line",
@@ -238,6 +275,9 @@ const funSubmit = async (query) => {
 /**chart Data */
 const xAxisData = ref([])
 const seriesData = ref([])
+const funChartSelect = (selected) => {
+	console.log(selected)
+}
 /**tab  */
 const activeTab = ref('1')
 /**created */
@@ -267,12 +307,12 @@ funGetProcessTree()
 						</el-tab-pane>
 						<el-tab-pane label="图表展示" name="2" v-if="excelType === 'fitting'">
 						</el-tab-pane>
-						<table-cop v-if="activeTab === '1'" :data="tableData" :loading="tableLoading" :column="tableColumn"
+						<table-cop v-show="activeTab === '1'" :data="tableData" :loading="tableLoading" :column="tableColumn"
 							:height="tableHeight" :tableId="tableShowId" :tableName="tableName"></table-cop>
-						<div v-else :style="{ height: tableHeight + 'px' }" class="p-[10px]">
+						<div v-show="activeTab === '2'" :style="{ height: typeof tableHeight === 'string' ? tableHeight: tableHeight + 'px' }" class="p-[10px]">
 							<CurrentScatterChart width="100%" height="100%" chartTitle="风速功率曲线图" :xAxisData="xAxisData"
 								:yAxisData="{ splitLine: { show: false } }" :seriesData="seriesData" :showLegend="true"
-								:brushSelected="false" />
+								:brushSelected="true" @getSelected="funChartSelect" />
 						</div>
 					</el-tabs>
 				</div>

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup name="table">
+import {ref, computed} from 'vue'
 const props = withDefaults(defineProps<{
   height?: string | number,
   data: any,
@@ -18,9 +19,14 @@ const emits = defineEmits(['export'])
 const funExport = () => {
   emits('export')
 }
+const tableRef = ref('')
+const tableHeight =  computed(() => {
+  console.log(tableRef.value.offsetHeight)
+  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 42 : 661
+})
 </script>
 <template>
-  <div class="p-[10px] shadow rounded-[6px] shadow-blue-500"
+  <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]">
       <h3>{{props.tableName}}</h3>
@@ -28,7 +34,8 @@ const funExport = () => {
     </div>
     <el-table border :data="props.data"
       size="small" v-loading="props.loading"
-      :style="{ width: '100%', height: 'calc(100% - 42px)', 'overflow': 'auto' }">
+      :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>

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup name="table">
+import {ref, computed} from 'vue'
 const props = withDefaults(defineProps<{
   height?: string | number,
   data: any,
@@ -18,9 +19,14 @@ const emits = defineEmits(['export'])
 const funExport = () => {
   emits('export')
 }
+const tableRef = ref('')
+const tableHeight =  computed(() => {
+  console.log(tableRef.value.offsetHeight)
+  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 42 : 661
+})
 </script>
 <template>
-  <div class="p-[10px] shadow rounded-[6px] shadow-blue-500"
+  <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]">
       <h3>{{props.tableName}}</h3>
@@ -28,7 +34,8 @@ const funExport = () => {
     </div>
     <el-table border :data="props.data"
       size="small" v-loading="props.loading"
-      :style="{ width: '100%', height: 'calc(100% - 42px)', 'overflow': 'auto' }">
+      :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>