2022-12-03 update

1. 增加rateAnalysis的 第三个图 dialog模式下 刷选并弹框table功能
2. 增加lineAnalysis 点击区域划分后 弹框dialog 并展示table功能
3. 增加lineChart组件 brush功能

src/pages/dataAnalysis/lineAnalysis/index.vue

@@ -203,6 +203,9 @@ const funChartSelect = async (batch) => {
 }
 const funChartArea = () => {
 	if (seriesData.value?.length) {
+		// 获取数据后 展示dialog table 数据
+		wtDialog.value = true
+		wtData.value = []
 		if (!isChartArea.value) {
 			// 请求一下
 			seriesData.value[0] = {
@@ -332,47 +335,40 @@ onActivated(() => {
 </script>
 <template>
   <div class="bg-white py-[10px] px-[10px]">
-    <el-dialog draggable v-model="wtDialog" title="风机功率点位">
-      <el-tabs v-model="wtTab">
-        <el-tab-pane label="数据" name="table">
-          <el-table :data="wtData" row-key="id" :max-height="550">
-            <el-table-column property="wtId" align="center" label="风机" />
-            <el-table-column
-              property="time"
-              sortable
-              :width="160"
-              align="center"
-              label="时间"
-            />
-            <el-table-column
-              property="speed"
-              sortable
-              align="center"
-              label="风速(m/s)"
-            />
-            <el-table-column
-              property="power"
-              sortable
-              align="center"
-              label="功率(kw)"
-            />
-            <el-table-column
-              property="rr"
-              sortable
-              align="center"
-              label="转速"
-            />
-            <el-table-column
-              property="filter"
-              sortable
-              align="center"
-              label="是否有用点"
-            />
-          </el-table>
-        </el-tab-pane>
-        <el-tab-pane label="故障" name="problem" disabled> </el-tab-pane>
-        <el-tab-pane label="预警" name="warning" disabled> </el-tab-pane>
-      </el-tabs>
+    <el-dialog draggable v-model="wtDialog" title="曲线偏差率">
+			<el-table :data="wtData" row-key="id" :max-height="550">
+				<el-table-column property="wtId" align="center" label="风机" />
+				<el-table-column
+					property="speed"
+					sortable
+					align="center"
+					label="3~5m"
+				/>
+				<el-table-column
+					property="power"
+					sortable
+					align="center"
+					label="5~10m"
+				/>
+				<el-table-column
+					property="rr"
+					sortable
+					align="center"
+					label="10~12m"
+				/>
+				<el-table-column
+					property="filter"
+					sortable
+					align="center"
+					label="12~25m"
+				/>
+				<el-table-column
+					property="filter"
+					sortable
+					align="center"
+					label="3~25m"
+				/>
+			</el-table>
     </el-dialog>
     <div
       class="

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

@@ -5,6 +5,7 @@ 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 emits = defineEmits(['getSelected'])
 const props = defineProps({
 	xAxis: {
 		type: Object,
@@ -42,6 +43,11 @@ const props = defineProps({
 		type: String,
 		required: false
 	},
+	brush: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 })
 
 /**定义option */
@@ -64,6 +70,23 @@ const option = computed({
 			},
 			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,
 				axisPointer: {
@@ -78,6 +101,7 @@ const option = computed({
 				itemWidth: 6,
 			},
 			grid: {
+				top: 80,
 				left: 40,
 				right: 40,
 				bottom: 40,
@@ -109,12 +133,42 @@ watch(() => option, (newVal, oldVal) => {
 		echartIns.setOption(toRaw(newVal.value))
 	}
 }, { deep: true })
+const funBrushChange = (flag) => {
+	const echartIns = toRaw(chartIns.value)
+		console.log(echartIns)
+	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(() => {
 	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()
 	})

src/pages/dataAnalysis/rateAnalysis/index.vue

@@ -299,6 +299,55 @@ const lineDataSet = ref([
 		source: []
 	}
 ])
+const funChartSelect = async (batch) => {
+	console.log(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
+					})
+				}
+			}
+		}
+	}
+}
 /**scatter chart */
 const scatterxData = ref([
 	{
@@ -343,6 +392,10 @@ const scatterSeries = ref(
 				}
 			]
 )
+/**dialog 数据 */
+const wtDialog = ref(false)
+const wtData = ref([])
+const wtTab = ref('table')
 /**dialog */
 const dialog = ref(false)
 const actChartName = ref('')
@@ -388,7 +441,7 @@ const funActCop = (obj, type) => {
 	}
 	dialog.value = true
 	nextTick(() => {
-		actCopList.value = [{...obj, id: 0}]
+		actCopList.value = [{...obj, id: 0, isBrush: type === 'lineChartCop' ? true :false}]
 	})
 }
 const funDiaSubmit = async () => {
@@ -423,6 +476,7 @@ const funDiaSubmit = async () => {
 					if(actChartName.value==='chartCop1'){
 						actCopList.value.push({
 							id: chartId,
+							isBrush: false,
 							title: chart.wt,
 							subtext: '风速风向玫瑰图',
 							xAxis: {
@@ -452,6 +506,7 @@ const funDiaSubmit = async () => {
 					if(actChartName.value === 'chartCop2'){
 						actCopList.value.push({
 							id: chartId,
+							isBrush: false,
 							title: chart.wt,
 							subtext: '风速风向频次玫瑰图',
 							xAxis: {
@@ -490,6 +545,7 @@ const funDiaSubmit = async () => {
 					if(actChartName.value === 'lineChartCop'){
 						actCopList.value.push({
 							id: chartId,
+							isBrush: false,
 							title: chart.wtId,
 							subtext: '对风偏差分析图',
 							xAxis: {
@@ -588,6 +644,26 @@ onActivated(() => {
 	<div class="bg-white py-[10px] px-[10px] relative s-rateAnalysis">
 		<!-- <search-cop class="mb-[20px]  shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
 		</search-cop> -->
+		<el-dialog v-model="wtDialog" draggable title="风机功率点位">
+			<el-tabs v-model="wtTab">
+				<el-tab-pane label="数据" name="table">
+					<el-table :data="wtData" row-key="id" :max-height="550">
+						<el-table-column property="wtId" align="center" label="风机" />
+						<el-table-column property="time" sortable :width="160" align="center" label="时间" />
+						<el-table-column property="speed" sortable align="center" label="风速(m/s)" />
+						<el-table-column property="power" sortable align="center" label="功率(kw)" />
+						<el-table-column property="rr" sortable align="center" label="转速" />
+						<el-table-column property="filter" sortable align="center" label="是否有用点" />
+					</el-table>
+				</el-tab-pane>
+				<el-tab-pane label="故障" name="problem" disabled>
+
+				</el-tab-pane>
+				<el-tab-pane label="预警" name="warning" disabled>
+
+				</el-tab-pane>
+			</el-tabs>
+		</el-dialog>
 		<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">
@@ -602,7 +678,7 @@ onActivated(() => {
 			<div class="flex flex-wrap justify-center items-center h-[600px] overflow-y-auto overflow-x-hidden">
 				<component :is="actCop" :width="actCopList.length > 1 ? '50%' : '100%'" height="600px" v-for="item in actCopList"
 					:key="item.id" :xAxis="item.xAxis" :subtext="item.subtext" :title="item.title" :isRadar="item.isRadar"
-					:series="item.series" :yAxis="item.yAxis" :dataset="item.dataset"></component>
+					:series="item.series" :yAxis="item.yAxis" :dataset="item.dataset" :brush="item.isBrush" @getSelected="funChartSelect"></component>
 			</div>
 		</el-dialog>
 		<div class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[10px] pb-[10px]">
@@ -630,7 +706,7 @@ onActivated(() => {
 								:title="item.title" :isRadar="item.isRadar" :series="item.series">
 							</chart-cop>
 						</div>
-						<div class="mr-[10px] w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500">
+						<div class="mr-[10px] w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500" v-if="!!lineSeries.length">
 							<el-icon class="mr-[10px] mt-[10px] cursor-pointer" size="18"
 								@click="funActCop({ xAxis: linexAxis, yAxis: lineyAxis, series: lineSeries, dataset: lineDataSet }, 'lineChartCop')">
 								<ZoomIn />
@@ -638,7 +714,7 @@ onActivated(() => {
 							<line-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis" :yAxis="lineyAxis"
 								:series="lineSeries" subtext="对风偏差分析图" :dataset="lineDataSet"></line-chart-cop>
 						</div>
-						<div class="w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500">
+						<div class="w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500" v-if="!!lineSeries.length">
 							<el-icon class="mr-[10px] mt-[10px] cursor-pointer" size="18"
 								@click="funActCop({ xAxis: scatterxData, yAxis: scatteryData, series: scatterSeries }, 'scatterSingleChartCop')">
 								<ZoomIn />