From ab678cb27fa373c0e8353dc6db3be059f8d1bd5d Mon Sep 17 00:00:00 2001 From: odjbin <1042039504@qq.com> Date: Mon, 11 Mar 2024 23:47:49 +0800 Subject: [PATCH] =?UTF-8?q?feat=20:=20=E6=96=B0=E5=A2=9Eecharts=E5=85=A8?= =?UTF-8?q?=E5=B1=8F=E6=A8=A1=E5=BC=8F=E5=8F=8A=E8=AE=BE=E5=A4=87=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=9C=80=E5=A4=A7/=E5=B0=8F=E8=8C=83=E5=9B=B4?= =?UTF-8?q?=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/assets/images/fanInfo/shrink.png | Bin 0 -> 2017 bytes src/assets/styles/index.scss | 163 +++++++++++++++++- src/components/content/airInfo/AirInfo.vue | 8 +- .../badGasInfo/childComps/GasInfoItem.vue | 2 +- src/components/content/fanInfo/FanInfo.vue | 111 +++++++++++- src/views/device-manage/index.vue | 26 ++- src/views/tunnel/index.vue | 71 +++----- 8 files changed, 314 insertions(+), 68 deletions(-) create mode 100644 src/assets/images/fanInfo/shrink.png diff --git a/package.json b/package.json index 6ee804c..dfd79b5 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "axios": "^1.4.0", "echarts": "^5.4.2", "element-plus": "^2.3.5", + "element-resize-detector": "^1.2.4", "js-cookie": "^3.0.5", "nprogress": "^0.2.0", "pinia": "^2.0.35", diff --git a/src/assets/images/fanInfo/shrink.png b/src/assets/images/fanInfo/shrink.png new file mode 100644 index 0000000000000000000000000000000000000000..7d653d99a266550e48b13efe2f5c04120885efa7 GIT binary patch literal 2017 zcmcJQ`#;ltAICpmW1G|3<=Ev=4$+O<;jTF!nsGT!c4=fx*UBM>qPW~yky&oG+`@&+ zjM$};^I1}wIh0*$B2t-fX~-!xh31mm^*`L#5AXNuhu8D*c>nTxyxvU0ad$;I4LJaS zqNj(e-=5O`8YFyg_c@(@x+hSApF0jT3~4O_fGF{FbtWdATD|F0rIx7jr2OnuPE3|w zMesOo#s2ys6=DT8xVpoi!cbDl8?L}k5Yda3be!HvT&{HV{?$Ku{?^FsLA7GFhzr%O zrjtYtcb%KC)UI-DYV+G#%JXNbLlz6MXNPQ`Q-{`4yLz9IdsCxVLCo7n*832gd9)2c zVFlV%)NL-LMPu6&);CgMHo)={XMS}XegQ;(zzT$$iZftrGL7A_rpbeu|j;K{lA@)m{3FFJjC|m4oC+h1hne09c3&AmHf#?F*qQQ6~Upri5QjKInU%iH5 zP)>C8WQQ-wzr42(YgitVAlY5J&MQ0Kdl=`VMtyYi_gKgT#odH2qSHSY10<21vR+vK65jve&7TZJwiZapCc5yi(oG zQeS1%!+^>a@Ag_i!!HooO=Aawidp086?MdQ+^pnPz2>=)pZK8&9T8#X0gQvOP>Fp@ zS(f0wN#ICZktTLA_sFC~wza`LtUHdD>%xT!P)2?Ab7`-*-h z`0b6!LD<1xh9&U(_>J2W%CjnI)e5W?DTMR4YC$!eV=AVBhdN0FlZb*XImp86N?#~L zU%G55*WHr&5-3oOaJQlYn%iYKYkny6f%gz!bQpv?N*oFeyFvr{Mac=ZvpdTW`YX5Y zOZkB8u$Ul*JCqrAxsP5uKr1^3Z+6x{Gxqx1Q&xyL>&JKNjF>D3BYONPqUt$M&1BEf zObwc?-uh*_3y2*@7AMwG&Q8oskOoxI!$V;?pjOVqF=TMm=gbI6oLwO&OLjbe>3=a-lvET)~=E@du!FW=Y77xx18L*8JI_#HL^0vTgLCL2Oh89GZ{6`CvBrq!n zAx1>I0EeOpI$cl90oT@v2wenko?KBK4=PCKTXSKQ1hWyM?ca80P?1*2zvY=B3(coJ zPCf|e%J`4oh}Tl$FicT|pNDAt-x-RyNm)v=p>8WTlXWH|pG1E|P0={44ubUTbpwws zXSnTS4KmcPh(3&*5UIaGlZug3Ig<9aQm4FIaL$|j>_b!h=R@B|=-s%@)2AkzCS<50 zrVZm=-P?;l2;h8Gmq;IBTa+wWqD{8q-)8MJ5Z5Tj(Z)E3*-Fk@qO%0I_Z^q z%d|C?uR9IAG7J6~_hluf=x(RL(zV2je^!^fGky5fo^5;SvM4ve!o%(yIvL-aNH9G}5F z(0MYy`+eX#_^cS2Rj1ZdQuHY03gL26y>K>c1THv~y8ALoZVGDp+`H5Nom7dP=TN;7y8)&e|7*Aq)n5;*ZX-PI9{X1*jgBYR_*V# z2#8TZGLeZu&Z6DRNSkKtQw!=*Sg10 div { + color: #f5f5f5; + margin-bottom: 10px; + } + } + .el-dialog { + position: relative; + display: flex; + flex-direction: column; + height: 1400px; + border: 2px solid #0f82af; + background: rgba(6, 34, 71, 0.8); + border-radius: 20px; + padding: 47px 30px; + box-sizing: border-box; + margin: 520px auto 0 auto; + + .el-dialog__header { + padding: 0 0 28px 0; + //display: none; + .el-dialog__title { + font-size: 50px; + font-weight: bold; + color: #d6f1fa; + } + + .el-dialog__headerbtn { + right: 22px; + + .el-dialog__close { + color: #05feff; + font-size: 73px; + } + } + + } + + .el-dialog__body { + padding: 0; + } + } + + .left-top-icon { + position: absolute; + top: -3px; + left: -3px; + width: 41px; + height: 41px; + background-image: url(@/assets/images/badGasInfo/sp_jz.png); + } + + .right-top-icon { + position: absolute; + top: -3px; + right: -3px; + width: 41px; + height: 41px; + background-image: url(@/assets/images/badGasInfo/sp_jz.png); + transform: rotate(90deg); + } + + .time-select { + position: absolute; + top: 47px; + right: 119px; + display: flex; + + .choose-day { + margin-right: 40px; + + .el-date-editor { + width: 370px; + height: 92px; + } + + .el-input__wrapper { + height: 92px; + background-color: transparent; + border-radius: 10px; + border: 2px solid #0F82AF; + box-shadow: none; + //padding: 18px 24px; + .el-input__prefix, .el-input__suffix { + .el-icon { + font-size: 40px; + color: #FFFFFF; + } + } + + .el-input__inner { + height: 80px; + font-size: 40px; + color: #FFFFFF; + } + } + } + } + + .left-bottom-icon { + position: absolute; + bottom: -3px; + left: -3px; + width: 41px; + height: 41px; + background-image: url(@/assets/images/badGasInfo/sp_jz.png); + transform: rotate(-90deg); + } + + .right-bottom-icon { + position: absolute; + bottom: -3px; + right: -3px; + width: 41px; + height: 41px; + background-image: url(@/assets/images/badGasInfo/sp_jz.png); + transform: rotate(180deg); + } + +} //弹窗样式 .digital-tunnel { .chat-dialog { @@ -324,7 +465,11 @@ body, } #containerFan { + //width: 100%; + //height: 100%; flex: 1; + //height: calc(100vh - 100px); + //height: 100vh; height: 1200px; //width: 1300px; } @@ -364,13 +509,17 @@ body, position: relative; display: flex; flex-direction: column; - height: 1300px; + width: 100%; + height: 100%; + //height: 1300px; border: 2px solid #0f82af; - background: rgba(6, 34, 71, 0.78); + //background: rgba(6, 34, 71, 0.78); + background: rgba(6, 34, 71, 0.95); border-radius: 20px; padding: 47px 30px; box-sizing: border-box; - margin: 520px auto 0 auto; + //margin: 520px auto 0 auto; + margin: 0; .el-dialog__header { padding: 0 0 28px 0; diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue index 735d14a..1225da4 100644 --- a/src/components/content/airInfo/AirInfo.vue +++ b/src/components/content/airInfo/AirInfo.vue @@ -5,11 +5,11 @@
-
风速{{ windSpeed }}m/s
+
风速{{ windSpeed }} {{ windSpeedUnit }}
-
风向{{ windDirection }} °
+
风向{{ windDirection }} {{ windDirectionUnit }}
{ windSpeedType.value = item.equipmentType windSpeedId.value = item.equipmentId windSpeed.value = item.value + windSpeedUnit.value = item.unit } else if (item.equipmentType === "windDirection") { windDirectionSpeedType.value = item.equipmentType windDirectionSpeedId.value = item.equipmentId windDirection.value = item.value + windDirectionUnit.value = item.unit } }) if (airArr.length !== 0) { diff --git a/src/components/content/badGasInfo/childComps/GasInfoItem.vue b/src/components/content/badGasInfo/childComps/GasInfoItem.vue index 73c3aba..30e1cf5 100644 --- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue +++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue @@ -79,7 +79,7 @@ const option = { color: `${ params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#FFCE23" }`, - formatter: "Vo{value}%", + formatter: `{value}${params.gasInfo.unit}`, }, }, ], diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index da19ef8..bb085a6 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -13,8 +13,8 @@
{{ changeNum(item) }}号风机
- -
+ +
状态：{{ changeStateText(item.breakdown, item.running) }}
@@ -86,7 +86,7 @@
+ :modal="false" id="fanDialog">
@@ -105,6 +105,10 @@ v-model="selectTimeButton" @select="timeSelect" /> + + + +
@@ -126,6 +130,7 @@ import { getFanEchartsInfo } from "@/api/largeScreen"; import {ElMessage, ElMessageBox} from "element-plus"; +import elementResizeDetectorMaker from "element-resize-detector"; const timeList = ref(["年", "月", "日"]); const selectTimeButton = ref(2); @@ -136,6 +141,7 @@ const props = defineProps({ transducerData: Array, loading: Number, }); +const isFullScreen = ref(false); const chooseDayRef = ref(); const chooseMonthRef = ref(); const socketData = ref() @@ -161,8 +167,11 @@ const stateB = ref(false) const stateC = ref(false) const isVisited = ref(false) const showLoading = ref(false) +let chartData = reactive([]) const fanIndex = ref('') const openEquipmentId = ref(0) +let dataZoomTop = reactive('87%') +const screenHeight = ref(0) let myEcharts = reactive({}); watch(() => props.loading, (now) => { props.loading = now @@ -220,8 +229,51 @@ const changeDate = (index) => { } } const timeSelect = (index) => { - getFanInfo(openEquipmentId.value, changeDate(index)) + // console.log('document.getElementById', document.getElementById('containerFan')) + // console.log('screenHeight', screenHeight.value) + // console.log('myEcharts',myEcharts) + // + // const fanChart = document.getElementById('containerFan') + // nextTick(() => { + // if (screenHeight.value !== 0) { + // fanChart.style.height = screenHeight.value + 'px' + // myEcharts.resize(); + // } + // fullScreen() + getFanInfo(openEquipmentId.value, changeDate(index), '',true) + // }) }; +//放大弹窗 +const fullScreen = () => { + const titleName = document.getElementsByClassName('el-dialog__title')[0] + const fan = document.getElementById('fanDialog') + const fanChart = document.getElementById('containerFan') + const erd = elementResizeDetectorMaker(); + fan.classList.remove('full-screen-dialog') + titleName.style.fontSize = '70px' + erd.listenTo(document.getElementById('fanDialog'), (element) => { + screenHeight.value = element.offsetHeight - 100 + fanChart.style.height = (element.offsetHeight - 100) + '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('full-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,19 +354,46 @@ const changeModel = (item) => { item.autoMode = !item.autoMode }); } -const getFanInfo = (equipmentId, type = 'day', time = '') => { +const getFanInfo = (equipmentId, type = 'day', time = '', flag) => { isVisited.value = true showLoading.value = true + // const fanChart = document.getElementById('containerFan') getFanEchartsInfo(equipmentId, time, type).then(res => { if (res?.code === 1000) { showLoading.value = false + chartData = res.data + // if (flag) { + // console.log('document.getElementById', fanChart) + // console.log('myEcharts', myEcharts) + // if (screenHeight.value !== 0) { + // console.log('screenHeight', screenHeight.value) + // fanChart.style.height = screenHeight.value + 'px' + // myEcharts.resize(); + // } + // } nextTick(() => { - initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC) + initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop) }) } }) } const handleOpenChart = (item) => { + // const titleName = document.getElementsByClassName('el-dialog__title')[0] + // console.log('titleName',titleName) + // const fan = document.getElementById('fanDialog') + const fanChart = document.getElementById('containerFan') + const erd = elementResizeDetectorMaker(); + // titleName.style.fontSize = '70px' + // erd.listenTo(document.getElementById('fanDialog'), (element) => { + // console.log('element.offsetHeight ',element.offsetHeight ) + // // screenHeight.value = element.offsetHeight - 100 + // // fanChart.style.height = (element.offsetHeight - 100) + 'px' + // // myEcharts.resize(); + // }); + // nextTick(() => { + // isFullScreen.value = false + // initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, '93%') + // }) nextTick(() => { if (chooseMonthRef.value) { chooseMonthRef.value.clearData() @@ -322,6 +401,7 @@ const handleOpenChart = (item) => { if (chooseDayRef.value) { chooseDayRef.value.clearData() } + // fullScreen() }) selectTimeButton.value = 2 openEquipmentId.value = item.equipmentId @@ -388,7 +468,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 +609,8 @@ const changeStateText = (breakdown, running) => { /** * 初始化echarts实例方法 */ -const initChart = (type, valueA, valueB, valueC) => { +const initChart = (type, valueA, valueB, valueC, top) => { + console.log('initChart---',top) //3.初始化container容器 myEcharts = echarts.init(document.getElementById('containerFan')); //5.传入数据 @@ -568,6 +648,7 @@ const initChart = (type, valueA, valueB, valueC) => { formatter: (params) => { let res = `
${params[0].name}
` + '
' for (let i = 0; i < params.length; i++) { + // console.log('params[i]', params[i]) res += `
${params[i].seriesName}: ${params[i].value}
`; @@ -589,7 +670,7 @@ const initChart = (type, valueA, valueB, valueC) => { }, { type: 'slider', - top: 1050, + top: top, height: 100, textStyle: { fontSize: 45, @@ -664,6 +745,18 @@ const initChart = (type, valueA, valueB, valueC) => {