+ :modal="false" id="fanDialog">
+
@@ -126,6 +136,9 @@ import {
getFanEchartsInfo
} from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus";
+import elementResizeDetectorMaker from "element-resize-detector";
+import CsvExportor from "csv-exportor";
+import {getNowFormatDate} from "@/utils/date.js";
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
@@ -161,8 +174,13 @@ const stateB = ref(false)
const stateC = ref(false)
const isVisited = ref(false)
const showLoading = ref(false)
+const isFullScreen = ref(false);
+let dataZoomTop = reactive('87%')
+let chartData = reactive([])
const fanIndex = ref('')
const openEquipmentId = ref(0)
+const clickMonth = ref('')
+const clickDay = ref('')
let myEcharts = reactive({});
watch(() => props.loading, (now) => {
props.loading = now
@@ -203,11 +221,55 @@ watch(() => props.list, (now) => {
})
handleOnMounted()
}, {deep: true});
+
+//导出csv
+const handleExport = () => {
+ const header = ['时间', 'A相电流(A)', 'B相电流(A)', 'C相电流(A)'];
+ let newArray = []
+ chartData.dates.forEach((item, index) => {
+ let obj = {
+ dates: chartData.dates[index],
+ currentsA: chartData.currentsA[index],
+ currentsB: chartData.currentsB[index],
+ currentsC: chartData.currentsC[index]
+ }
+ newArray.push(obj)
+ })
+ let time = ''
+ if (selectTimeButton.value === 1) {
+ if (clickMonth.value) {
+ const index = clickMonth.value.lastIndexOf("\-");
+ time = clickMonth.value.substring(0, index)
+ } else {
+ time = getNowFormatDate(false)
+ }
+ } else if (selectTimeButton.value === 2) {
+ if (clickDay.value) {
+ time = clickDay.value
+ } else {
+ time = getNowFormatDate(true)
+ }
+ } else if (selectTimeButton.value === 0) {
+ time = new Date().getFullYear() + '年'
+ }
+ const name = fanIndex.value + '号风机电流监控数据-' + time
+ CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
const daySelect = (val) => {
- getFanInfo(openEquipmentId.value, 'day', val)
+ clickDay.value = val
+ if (isFullScreen.value) {
+ getFanInfo(openEquipmentId.value, 'day', val)
+ } else {
+ getFanInfo(openEquipmentId.value, 'day', val, true)
+ }
}
const monthSelect = (val) => {
- getFanInfo(openEquipmentId.value, 'month', val)
+ clickMonth.value = val
+ if (isFullScreen.value) {
+ getFanInfo(openEquipmentId.value, 'month', val)
+ } else {
+ getFanInfo(openEquipmentId.value, 'month', val, true)
+ }
}
const changeDate = (index) => {
switch (index) {
@@ -220,8 +282,42 @@ const changeDate = (index) => {
}
}
const timeSelect = (index) => {
- getFanInfo(openEquipmentId.value, changeDate(index))
-};
+ if (isFullScreen.value) {
+ getFanInfo(openEquipmentId.value, changeDate(index))
+ } else {
+ getFanInfo(openEquipmentId.value, changeDate(index), '', true)
+ }
+}
+//放大弹窗
+const handleFullScreen = () => {
+ const titleName = document.getElementsByClassName('el-dialog__title')[0]
+ const fan = document.getElementById('fanDialog')
+ const fanChart = document.getElementById('containerFan')
+ const erd = elementResizeDetectorMaker();
+ fan.classList.remove('shrink-screen-dialog')
+ titleName.style.fontSize = '70px'
+ erd.listenTo(document.getElementById('fanDialog'), (element) => {
+ fanChart.style.height = (element.offsetHeight - 120) + 'px'
+ myEcharts.resize();
+ });
+ nextTick(() => {
+ isFullScreen.value = false
+ initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, '93%')
+ })
+}
+const shrinkScreen = () => {
+ const fan = document.getElementById('fanDialog')
+ const fanChart = document.getElementById('containerFan')
+ const titleName = document.getElementsByClassName('el-dialog__title')[0]
+ titleName.style.fontSize = '50px'
+ fan.classList.add('shrink-screen-dialog')
+ fanChart.style.height = '1200px'
+ myEcharts.resize();
+ nextTick(() => {
+ isFullScreen.value = true
+ initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, dataZoomTop)
+ })
+}
const packageData = (item, type, flag) => {
let number = 0
if (item.equipmentType === "frequency1") {
@@ -302,14 +398,39 @@ const changeModel = (item) => {
item.autoMode = !item.autoMode
});
}
-const getFanInfo = (equipmentId, type = 'day', time = '') => {
- isVisited.value = true
+const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
showLoading.value = true
+ nextTick(() => {
+ if (flag) {
+ const fan = document.getElementById('fanDialog')
+ fan.classList.remove('shrink-screen-dialog')
+ if (!isFullScreen.value) {
+ const titleName = document.getElementsByClassName('el-dialog__title')[0]
+ titleName.style.fontSize = '70px'
+ }
+ }
+ })
getFanEchartsInfo(equipmentId, time, type).then(res => {
if (res?.code === 1000) {
showLoading.value = false
+ chartData = res.data
nextTick(() => {
- initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC)
+ if (flag) {
+ const fanChart = document.getElementById('containerFan')
+ const erd = elementResizeDetectorMaker();
+ erd.listenTo(document.getElementById('fanDialog'), (element) => {
+ fanChart.style.height = element.offsetHeight - 120 + 'px'
+ myEcharts.resize();
+ });
+ if (!isFullScreen.value) {
+ initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, '93%')
+ }
+ } else {
+ shrinkScreen()
+ // const fan = document.getElementById('fanDialog')
+ // fan.classList.add('shrink-screen-dialog')
+ // initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
+ }
})
}
})
@@ -323,10 +444,14 @@ const handleOpenChart = (item) => {
chooseDayRef.value.clearData()
}
})
+ clickMonth.value=''
+ clickDay.value=''
+ isVisited.value = true
selectTimeButton.value = 2
openEquipmentId.value = item.equipmentId
- getFanInfo(item.equipmentId, 'day')
- if (item.equipmentId === 22) {
+ isFullScreen.value = false
+ getFanInfo(item.equipmentId, 'day', '', true)
+ if (item.equipmentType === "frequency1") {
fanIndex.value = '一'
} else {
fanIndex.value = '二'
@@ -338,7 +463,7 @@ const getTransData = (data) => {
data?.map(item => {
tranObj = {
equipmentId: item.equipmentId,
- max: 800,
+ max: 600,
valueA: item.phaseCurrentA,
pointA: item.phaseCurrentAThreshold,
valueB: item.phaseCurrentB,
@@ -357,10 +482,10 @@ const getTransData = (data) => {
}
const changeNum = (item) => {
- switch (item.equipmentName) {
- case '1号变频器':
+ switch (item.equipmentType) {
+ case "frequency1":
return '一';
- case '2号变频器':
+ case "frequency2":
return '二';
}
}
@@ -388,7 +513,6 @@ const getBasicData = (data) => {
}
const handleOnMounted = () => {
- // console.log('socketData.value[i]',socketData.value)
const chart = document.getElementsByClassName('echart');
for (let i = 0; i < chart.length; i++) {
Echarts_info1 = echarts.init(chart[i]);
@@ -530,7 +654,7 @@ const changeStateText = (breakdown, running) => {
/**
* 初始化echarts实例方法
*/
-const initChart = (type, valueA, valueB, valueC) => {
+const initChart = (type, valueA, valueB, valueC, top) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerFan'));
//5.传入数据
@@ -575,21 +699,12 @@ const initChart = (type, valueA, valueB, valueC) => {
return res
},
},
- toolbox: {
- show: false,
- right: 10,
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- }
- }
- },
dataZoom: [{
type: 'inside',
},
{
type: 'slider',
- top: 1050,
+ top: top,
height: 100,
textStyle: {
fontSize: 45,
@@ -665,6 +780,11 @@ const initChart = (type, valueA, valueB, valueC) => {
