2023-02-20 fix

1. fix collapse导致的chart超出的问题

src/pages/dataAnalysis/agcAnalysis/components/current-scatter-chart.vue

@@ -78,11 +78,23 @@ export default {
       theme: 'light'
     };
   },
+  computed: {
+    collapse(){
+      return this.$store.state.collapse
+    }
+  },
   watch: {
     height(){
       if(this.chart){
           this.chart.resize()
       }
+    },
+    collapse(val){
+      if(this.chart){
+        setTimeout(() => {
+          this.chart.resize()
+        },300)
+      }
     }
   },
   methods: {

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

@@ -78,11 +78,23 @@ export default {
       theme: 'light'
     };
   },
+  computed: {
+    collapse(){
+      return this.$store.state.collapse
+    }
+  },
   watch: {
     height(){
       if(this.chart){
           this.chart.resize()
       }
+    },
+    collapse(val){
+      if(this.chart){
+        setTimeout(() => {
+          this.chart.resize()
+        },300)
+      }
     }
   },
   methods: {
@@ -322,6 +334,9 @@ export default {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
       this.initChart();
+      if(this.chart){
+        this.chart.resize()
+      }
     // });
   },
   updated() {

src/pages/dataAnalysis/hotAnalysis/components/current-scatter-chart.vue

@@ -78,11 +78,23 @@ export default {
       theme: 'light'
     };
   },
+  computed: {
+    collapse(){
+      return this.$store.state.collapse
+    }
+  },
   watch: {
     height(){
       if(this.chart){
           this.chart.resize()
       }
+    },
+    collapse(val){
+      if(this.chart){
+        setTimeout(() => {
+          this.chart.resize()
+        },300)
+      }
     }
   },
   methods: {

src/pages/dataAnalysis/lineAnalysis/components/current-scatter-chart.vue

@@ -78,11 +78,23 @@ export default {
       theme: 'light'
     };
   },
+  computed: {
+    collapse(){
+      return this.$store.state.collapse
+    }
+  },
   watch: {
     height(){
       if(this.chart){
           this.chart.resize()
       }
+    },
+    collapse(val){
+      if(this.chart){
+        setTimeout(() => {
+          this.chart.resize()
+        },300)
+      }
     }
   },
   methods: {

src/pages/dataAnalysis/lineAnalysis/index.vue

@@ -460,6 +460,7 @@ onActivated(() => {
                   typeof tableHeight === 'string'
                     ? tableHeight
                     : tableHeight + 'px',
+								overflow: 'hidden'
               }"
               class="p-[10px]"
             >

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

@@ -2,6 +2,7 @@
 import util from "@tools/util";
 import chartTheme from './../rateAnalysis.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import { useStore } from 'vuex';
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId
 const chartIns = ref(null)  //chart 实例
@@ -117,6 +118,21 @@ watch([() => props.width, () => props.height],(newVal, oldVal) => {
 		nextTick(() => echartIns.resize())
 	}
 })
+const store = useStore()
+const collapse = computed({
+	get(){
+		return store.state.collapse
+	},
+	set(val){}
+})
+watch(collapse, (val) => {
+	if(chartIns.value){
+		setTimeout(() => {
+			chartIns.value?.resize()
+		},300)
+	}
+})
+
 
 onMounted(() => {
 	nextTick(() => {

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

@@ -2,6 +2,7 @@
 import util from "@tools/util";
 import chartTheme from './../rateAnalysis.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import {useStore} from 'vuex'
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId
 const chartIns = ref(null)  //chart 实例
@@ -138,6 +139,20 @@ watch([() => props.width, () => props.height],(newVal, oldVal) => {
 		nextTick(() => echartIns.resize())
 	}
 })
+const store = useStore()
+const collapse = computed({
+	get(){
+		return store.state.collapse
+	},
+	set(val){}
+})
+watch(collapse, (val) => {
+	if(chartIns.value){
+		setTimeout(() => {
+			chartIns.value?.resize()
+		},300)
+	}
+})
 const funBrushChange = (flag) => {
 	const echartIns = toRaw(chartIns.value)
 	echartIns.dispatchAction({

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

@@ -2,6 +2,7 @@
 import util from "@tools/util";
 import chartTheme from './../rateAnalysis.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import {useStore } from 'vuex'
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId
 const chartIns = ref(null)  //chart 实例
@@ -122,6 +123,20 @@ watch([() => props.width, () => props.height],(newVal, oldVal) => {
 		nextTick(() => echartIns.resize())
 	}
 })
+const store = useStore()
+const collapse = computed({
+	get(){
+		return store.state.collapse
+	},
+	set(val){}
+})
+watch(collapse, (val) => {
+	if(chartIns.value){
+		setTimeout(() => {
+			chartIns.value?.resize()
+		},300)
+	}
+})
 onMounted(() => {
 	nextTick(() => {
 		echarts.registerTheme('chartTheme', chartTheme)

src/pages/dataAnalysis/tempAnalysis/components/barChart.vue

@@ -2,6 +2,7 @@
 import util from "@tools/util";
 import chartTheme from './barChart.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import {useStore} from 'vuex'
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId
 const chartIns = ref(null)  //chart 实例
@@ -137,6 +138,20 @@ watch([() => props.width, () => props.height],(newVal, oldVal) => {
 		nextTick(() => echartIns.resize())
 	}
 })
+const store = useStore()
+const collapse = computed({
+	get(){
+		return store.state.collapse
+	},
+	set(val){}
+})
+watch(collapse, (val) => {
+	if(chartIns.value){
+		setTimeout(() => {
+			chartIns.value?.resize()
+		},300)
+	}
+})
 const funBrushChange = (flag) => {
 	const echartIns = toRaw(chartIns.value)
 	echartIns.dispatchAction({

src/pages/dataAnalysis/tempAnalysis/components/current-scatter-chart.vue

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

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

@@ -2,6 +2,7 @@
 import util from "@tools/util";
 import chartTheme from './../rateAnalysis.json'
 import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
+import {useStore} from 'vuex'
 import * as echarts from 'echarts'
 const chartId = 'chart-' + util.newGUID(); //chartId
 const chartIns = ref(null)  //chart 实例
@@ -138,6 +139,20 @@ watch([() => props.width, () => props.height],(newVal, oldVal) => {
 		nextTick(() => echartIns.resize())
 	}
 })
+const store = useStore()
+const collapse = computed({
+	get(){
+		return store.state.collapse
+	},
+	set(val){}
+})
+watch(collapse, (val) => {
+	if(chartIns.value){
+		setTimeout(() => {
+			chartIns.value?.resize()
+		},300)
+	}
+})
 const funBrushChange = (flag) => {
 	const echartIns = toRaw(chartIns.value)
 	echartIns.dispatchAction({

src/pages/dataAnalysis/tempAnalysis/index.vue

@@ -3,7 +3,6 @@ import excelCop from '@/components/excel.vue'
 import treeCop from '@/components/tree.vue'
 import barChartCop from './components/barChart.vue'
 import lineChartCop from './components/lineChart.vue'
-import CurrentScatterChartCop from './components/current-scatter-chart.vue'
 import SubmitBtn from '../../../components/SubmitBtn.vue'
 // import { ElMessage } from 'element-plus';
 import { onMounted, ref, onActivated, shallowRef, reactive, nextTick } from 'vue'
@@ -110,14 +109,6 @@ const funSubmit = async () => {
 			ids: excelCheckIds.value.join(','),
 		}
 	})
-	// const lineRes = await request.get('/wind/deviation/ratio', {
-	// 	params: {
-	// 		ids: excelCheckIds.value.join(','),
-	// 		mode: 0
-	// 	}
-	// })
-	// const rosesRes = flowerRes
-	// const lineRes = lineChartRes
 	if (tempRes.code === 200) {
 		if (tempRes.data?.length) {
 			for (const chart of tempRes.data) {
@@ -159,39 +150,6 @@ const funSubmit = async () => {
 			}
 		}
 	}
-	// if(lineRes.code === 200){
-	// 	if(lineRes.data?.length){
-	// 		lineDataSet.value[0].source = lineRes.data[0].scatter.map(o => {
-	// 			return [o.x+'', o.y]
-	// 		})
-	// 		lineSeries.value = [{
-	// 			name: "对风频次",
-	// 			type: "line",
-	// 			symbol: "line", //设定为实心点
-	// 			symbolSize: 0, //设定实心点的大小
-	// 			smooth: true, //这个是把线变成曲线
-	// 			data: lineRes.data[0].count,
-	// 			yAxisIndex: 1,
-	// 		},
-	// 		{
-	// 			type: 'effectScatter',
-	// 			showEffectOn: "emphasis",
-				
-	// 			rippleEffect: {
-	// 				scale: 1
-	// 			},
-	// 			legendHoverLink: false,
-	// 			name: '数据散点',
-	// 			symbolSize: 5,
-	// 			datasetIndex: 0,
-	// 			encode: {
-	// 				x: 'x',
-	// 				y: 'y'
-	// 			},
-	// 			yAxisIndex: 0,
-	// 		}]
-	// 	}
-	// }
 }
 /**lineChart */
 const linexAxis = reactive({
@@ -524,24 +482,6 @@ onActivated(() => {
 </script>
 <template>
 	<div class="bg-white py-[10px] px-[10px] relative s-dialog-body">
-		<!-- <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">
@@ -593,22 +533,6 @@ onActivated(() => {
 							<line-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis" :yAxis="lineyAxis"
 								:series="lineSeries" :subtext="`额定功率温度分析 ${powerproduction}`" :dataset="lineDataSet"></line-chart-cop>
 						</div>
-						<!-- <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 />
-							</el-icon> -->
-							<!-- <current-scatter-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis" :yAxis="lineyAxis"
-								:series="lineSeries" subtext="风速功率-温度分析" :dataset="lineDataSet"></current-scatter-chart-cop> -->
-						<!-- </div> -->
-						<!-- <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: xAxisData, yAxis: { splitLine: { show: false } }, series: seriesData, dataSet: dataSet }, 'CurrentScatterChartCop')">
-								<ZoomIn />
-							</el-icon> -->
-							<!-- <current-scatter-chart-cop class="" height="100%" width="100%" :xAxis="linexAxis" :yAxis="lineyAxis"
-								:series="lineSeries" subtext="对风偏差分析图" :dataset="lineDataSet"></current-scatter-chart-cop> -->
-						<!-- </div> -->
 					</div>
 				</el-col>
 			</el-row>

src/pages/dataAnalysis/windAnalysis/components/barLineChart.vue

@@ -93,21 +93,10 @@ export default {
       areaData: [],
     };
   },
-  computed: {
-    legend() {
-      return this.bardata.legend;
-    },
-    end() {
-      var result = 20;
-      if (this.areaData) {
-        result = parseInt((this.pageSize / this.areaData.length) * 100);
-      }
-      return result;
-    },
-  },
   methods: {
     initChart() {
       let chart = echarts.init(this.$el);
+      this.chart = chart
       let option = {
         color: this.color,
         grid: {
@@ -341,7 +330,29 @@ export default {
       this.initChart();
     });
 	},
+  computed: {
+    collapse(){
+      return this.$store.state.collapse
+    },
+    legend() {
+      return this.bardata.legend;
+    },
+    end() {
+      var result = 20;
+      if (this.areaData) {
+        result = parseInt((this.pageSize / this.areaData.length) * 100);
+      }
+      return result;
+    },
+  },
   watch: {
+    collapse(val){
+      if(this.chart){
+        setTimeout(() => {
+          this.chart.resize()
+        },300)
+      }
+    },
     bardata(val) {
       if (val.area && val.area.length < this.pageSize) {
         this.areaData = val.area;

src/pages/lightAnalysis/glAnalysis/components/current-scatter-chart.vue

@@ -78,11 +78,23 @@ export default {
       theme: 'light'
     };
   },
+  computed: {
+    collapse(){
+      return this.$store.state.collapse
+    }
+  },
   watch: {
     height(){
       if(this.chart){
           this.chart.resize()
       }
+    },
+    collapse(val){
+      if(this.chart){
+        setTimeout(() => {
+          this.chart.resize()
+        },300)
+      }
     }
   },
   methods: {
@@ -214,7 +226,7 @@ export default {
         grid: {
           top: 58,
           left: 40,
-          right: 48,
+          right: 68,
           bottom: 24,
         },
         //x轴

src/pages/lightAnalysis/glHotAnalysis/components/current-scatter-chart.vue

@@ -78,11 +78,23 @@ export default {
       theme: 'light'
     };
   },
+  computed: {
+    collapse(){
+      return this.$store.state.collapse
+    }
+  },
   watch: {
     height(){
       if(this.chart){
           this.chart.resize()
       }
+    },
+    collapse(val){
+      if(this.chart){
+        setTimeout(() => {
+          this.chart.resize()
+        },300)
+      }
     }
   },
   methods: {