diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d872161..7c479bb 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -30,7 +30,7 @@ default: () => { return { top: 50, - left: 20, + left: 0, right: 0, bottom: 10, containLabel: true, // 是否包含坐标轴的刻度标签 @@ -53,6 +53,7 @@ // itemWidth: 12, // itemHeight: 12, // padding: [0, 0, 0, 120], + selected: {}, // 选中状态 } }, }, @@ -181,6 +182,13 @@ type: Boolean, default: false, }, + /** + * 选中状态 + */ + selected: { + type: Object, + default: () => ({}), + }, }) // 图表对象 @@ -190,7 +198,7 @@ // 监听数据变化 watch( [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => { - console.log(newName, newNums) + console.log(props.selected) refreshChart() }, { @@ -301,6 +309,11 @@ if (props.legend && props.legendData.length > 0) { option.legend!.data = props.legendData } + // 选中状态 + if (props.selected) { + console.log(props.selected, 'props.selected') + option.legend.selected = props.selected + } // x轴数据 if (props.xAxisData && props.xAxisData.length > 0) { if (Array.isArray(option.xAxis) && option.xAxis.length > 0) { diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d872161..7c479bb 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -30,7 +30,7 @@ default: () => { return { top: 50, - left: 20, + left: 0, right: 0, bottom: 10, containLabel: true, // 是否包含坐标轴的刻度标签 @@ -53,6 +53,7 @@ // itemWidth: 12, // itemHeight: 12, // padding: [0, 0, 0, 120], + selected: {}, // 选中状态 } }, }, @@ -181,6 +182,13 @@ type: Boolean, default: false, }, + /** + * 选中状态 + */ + selected: { + type: Object, + default: () => ({}), + }, }) // 图表对象 @@ -190,7 +198,7 @@ // 监听数据变化 watch( [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => { - console.log(newName, newNums) + console.log(props.selected) refreshChart() }, { @@ -301,6 +309,11 @@ if (props.legend && props.legendData.length > 0) { option.legend!.data = props.legendData } + // 选中状态 + if (props.selected) { + console.log(props.selected, 'props.selected') + option.legend.selected = props.selected + } // x轴数据 if (props.xAxisData && props.xAxisData.length > 0) { if (Array.isArray(option.xAxis) && option.xAxis.length > 0) { diff --git a/src/components/map/infoWindow.vue b/src/components/map/infoWindow.vue index a779dfb..7893e43 100644 --- a/src/components/map/infoWindow.vue +++ b/src/components/map/infoWindow.vue @@ -14,12 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info + trendRef.value.expand = true trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d872161..7c479bb 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -30,7 +30,7 @@ default: () => { return { top: 50, - left: 20, + left: 0, right: 0, bottom: 10, containLabel: true, // 是否包含坐标轴的刻度标签 @@ -53,6 +53,7 @@ // itemWidth: 12, // itemHeight: 12, // padding: [0, 0, 0, 120], + selected: {}, // 选中状态 } }, }, @@ -181,6 +182,13 @@ type: Boolean, default: false, }, + /** + * 选中状态 + */ + selected: { + type: Object, + default: () => ({}), + }, }) // 图表对象 @@ -190,7 +198,7 @@ // 监听数据变化 watch( [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => { - console.log(newName, newNums) + console.log(props.selected) refreshChart() }, { @@ -301,6 +309,11 @@ if (props.legend && props.legendData.length > 0) { option.legend!.data = props.legendData } + // 选中状态 + if (props.selected) { + console.log(props.selected, 'props.selected') + option.legend.selected = props.selected + } // x轴数据 if (props.xAxisData && props.xAxisData.length > 0) { if (Array.isArray(option.xAxis) && option.xAxis.length > 0) { diff --git a/src/components/map/infoWindow.vue b/src/components/map/infoWindow.vue index a779dfb..7893e43 100644 --- a/src/components/map/infoWindow.vue +++ b/src/components/map/infoWindow.vue @@ -14,12 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info + trendRef.value.expand = true trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/map/infoWindow2.vue b/src/components/map/infoWindow2.vue index 97735f6..e4aca59 100644 --- a/src/components/map/infoWindow2.vue +++ b/src/components/map/infoWindow2.vue @@ -14,12 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info + trendRef.value.expand = true trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d872161..7c479bb 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -30,7 +30,7 @@ default: () => { return { top: 50, - left: 20, + left: 0, right: 0, bottom: 10, containLabel: true, // 是否包含坐标轴的刻度标签 @@ -53,6 +53,7 @@ // itemWidth: 12, // itemHeight: 12, // padding: [0, 0, 0, 120], + selected: {}, // 选中状态 } }, }, @@ -181,6 +182,13 @@ type: Boolean, default: false, }, + /** + * 选中状态 + */ + selected: { + type: Object, + default: () => ({}), + }, }) // 图表对象 @@ -190,7 +198,7 @@ // 监听数据变化 watch( [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => { - console.log(newName, newNums) + console.log(props.selected) refreshChart() }, { @@ -301,6 +309,11 @@ if (props.legend && props.legendData.length > 0) { option.legend!.data = props.legendData } + // 选中状态 + if (props.selected) { + console.log(props.selected, 'props.selected') + option.legend.selected = props.selected + } // x轴数据 if (props.xAxisData && props.xAxisData.length > 0) { if (Array.isArray(option.xAxis) && option.xAxis.length > 0) { diff --git a/src/components/map/infoWindow.vue b/src/components/map/infoWindow.vue index a779dfb..7893e43 100644 --- a/src/components/map/infoWindow.vue +++ b/src/components/map/infoWindow.vue @@ -14,12 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info + trendRef.value.expand = true trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/map/infoWindow2.vue b/src/components/map/infoWindow2.vue index 97735f6..e4aca59 100644 --- a/src/components/map/infoWindow2.vue +++ b/src/components/map/infoWindow2.vue @@ -14,12 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info + trendRef.value.expand = true trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/map/infoWindowHot.vue b/src/components/map/infoWindowHot.vue index 309012c..9b69483 100644 --- a/src/components/map/infoWindowHot.vue +++ b/src/components/map/infoWindowHot.vue @@ -14,15 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info - trendRef.value.range = '' - setTimeout(() => { - trendRef.value.range = 'day' - }) + trendRef.value.expand = true + trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index d872161..7c479bb 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -30,7 +30,7 @@ default: () => { return { top: 50, - left: 20, + left: 0, right: 0, bottom: 10, containLabel: true, // 是否包含坐标轴的刻度标签 @@ -53,6 +53,7 @@ // itemWidth: 12, // itemHeight: 12, // padding: [0, 0, 0, 120], + selected: {}, // 选中状态 } }, }, @@ -181,6 +182,13 @@ type: Boolean, default: false, }, + /** + * 选中状态 + */ + selected: { + type: Object, + default: () => ({}), + }, }) // 图表对象 @@ -190,7 +198,7 @@ // 监听数据变化 watch( [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => { - console.log(newName, newNums) + console.log(props.selected) refreshChart() }, { @@ -301,6 +309,11 @@ if (props.legend && props.legendData.length > 0) { option.legend!.data = props.legendData } + // 选中状态 + if (props.selected) { + console.log(props.selected, 'props.selected') + option.legend.selected = props.selected + } // x轴数据 if (props.xAxisData && props.xAxisData.length > 0) { if (Array.isArray(option.xAxis) && option.xAxis.length > 0) { diff --git a/src/components/map/infoWindow.vue b/src/components/map/infoWindow.vue index a779dfb..7893e43 100644 --- a/src/components/map/infoWindow.vue +++ b/src/components/map/infoWindow.vue @@ -14,12 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info + trendRef.value.expand = true trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/map/infoWindow2.vue b/src/components/map/infoWindow2.vue index 97735f6..e4aca59 100644 --- a/src/components/map/infoWindow2.vue +++ b/src/components/map/infoWindow2.vue @@ -14,12 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info + trendRef.value.expand = true trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/map/infoWindowHot.vue b/src/components/map/infoWindowHot.vue index 309012c..9b69483 100644 --- a/src/components/map/infoWindowHot.vue +++ b/src/components/map/infoWindowHot.vue @@ -14,15 +14,14 @@ overlay.value = e.overlay infoWindow.value = e.infoWindow info.value = e.info - trendRef.value.range = '' - setTimeout(() => { - trendRef.value.range = 'day' - }) + trendRef.value.expand = true + trendRef.value.range = 'day' } defineExpose({ initialize }) // 关闭 const close = () => { infoWindow.value.close() + trendRef.value.expand = true } const expand = computed(() => { return trendRef.value?.expand diff --git a/src/components/map/trendChart.vue b/src/components/map/trendChart.vue index 332b462..5fbdd3d 100644 --- a/src/components/map/trendChart.vue +++ b/src/components/map/trendChart.vue @@ -25,9 +25,11 @@ }) const loading = ref(true) const range = ref('') +const flag = ref(true) // defineExpose({ range }) const yAxisData = ref([]) const xAxisData = ref([]) +const selected = ref({}) // 获取设备监测分析 const fetchDeviceAnalysis = () => { loading.value = true @@ -40,7 +42,6 @@ const data = res.data // 整理节点监测趋势数据-用电 if (data.monitorTrends?.rp.length && Number(props.deviceType) === 1) { - console.log('用电设备') xAxisData.value = data.monitorTrends?.rp?.map((item: any) => item.time) yAxisData.value = [ { @@ -55,7 +56,6 @@ } // 整理节点监测趋势数据-用热/用气 if (data.monitorTrends?.val.length && Number(props.deviceType) !== 1) { - console.log('用热设备') xAxisData.value = data.monitorTrends?.val?.map((item: any) => item.time) yAxisData.value = [ { @@ -65,14 +65,31 @@ ] } loading.value = false - console.log(yAxisData.value, 'yAxisData.value') }).catch(() => { - console.log('请求失败') xAxisData.value = [] loading.value = false }) } // 监听 监测趋势时间段 变化 重新获取数据 +watch(() => props.deviceId, (newVal) => { + if (newVal) { + range.value = 'day' + fetchDeviceAnalysis() + } + if (Number(props.deviceType) === 1) { + selected.value = { + '有功功率(MW)': true, + '无功功率(MVAr)': false, + } + } + else { + selected.value = {} + } +}, +{ + deep: true, + // immediate: true, +}) watch(() => range.value, (newVal) => { if (newVal) { fetchDeviceAnalysis() @@ -82,17 +99,20 @@ deep: true, // immediate: true, }) + const expand = ref(true) const expandChart = () => { expand.value = !expand.value if (!expand.value) { - range.value = 'year' + range.value = '' + xAxisData.value = [] + yAxisData.value = [] setTimeout(() => { range.value = 'day' }) } } -defineExpose({ range, expand }) +defineExpose({ range, expand, fetchDeviceAnalysis })