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 0000000..7d653d9 Binary files /dev/null and b/src/assets/images/fanInfo/shrink.png differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 3bc876d..ce78d3c 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -18,13 +18,15 @@ body { background-color: #f5f5f5; } -.allLoading.el-loading-mask.is-fullscreen{ - .el-loading-spinner{ - .circular{ + +.allLoading.el-loading-mask.is-fullscreen { + .el-loading-spinner { + .circular { width: 75px; height: 75px; } - .el-loading-text{ + + .el-loading-text { font-size: 26px; letter-spacing: 2px; } @@ -312,6 +314,145 @@ body, } } +.full-screen-dialog { + width: 2175px !important; + //width: 100% !important; + //height: 100% !important; + height: 1300px !important; + margin: 520px auto 0 auto !important; + background: rgba(6, 34, 71, 0.8) !important; +} +.alarm-tunnel{ + + .el-tag { + font-size: 36px; + height: 60px; + padding: 0 20px; + border-radius: 10px; + } + .detail { + font-size: 50px; + color: #FFFFFF; + + > 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) => {