diff --git a/src/api/largeScreen.js b/src/api/largeScreen.js index 8677be3..3da056b 100644 --- a/src/api/largeScreen.js +++ b/src/api/largeScreen.js @@ -22,24 +22,39 @@ export const getTunnelBySiteId = (siteId) => { }) } // 传感器echarts数据 -export const getEchartsInfo = (equipmentId,type) => { +export const getEchartsInfo = (id,time,type) => { return request({ - url: `/tunnel/large/screen/echarts/sensor/${equipmentId}/${type}`, - method: 'get' + url: '/tunnel/large/screen/echarts/sensor', + method: 'get', + params: { + id: id, + time: time, + type: type + } }) } // 有害气体echarts数据 -export const getBadGasEchartsInfo = (tunnelId,type) => { +export const getBadGasEchartsInfo = (id,time,type) => { return request({ - url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}/${type}`, - method: 'get' + url: '/tunnel/large/screen/echarts/gas/sensor/', + method: 'get', + params: { + id: id, + time: time, + type: type + } }) } //电流监控数据 -export const getFanEchartsInfo = (equipmentId,type) => { +export const getFanEchartsInfo = (id,time,type) => { return request({ - url: `/tunnel/large/screen/echarts/current/${equipmentId}/${type}`, - method: 'get' + url: '/tunnel/large/screen/echarts/current', + method: 'get', + params: { + id: id, + time: time, + type: type + } }) } //风机频率修改 diff --git a/src/assets/images/topAndDown/title-bg.png b/src/assets/images/topAndDown/title-bg.png new file mode 100644 index 0000000..9046aae Binary files /dev/null and b/src/assets/images/topAndDown/title-bg.png differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 80aeee4..96c0ac8 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -46,12 +46,23 @@ body, .tunnel-title { width: 1718px; height: 146px; + line-height: 130px; z-index: 2; position: absolute; top: 0; left: 50%; margin-left: -859px; - background-image: url("../images/topAndDown/sp_tb.png"); + background-image: url("../images/topAndDown/title-bg.png"); + font-size: 55px; + text-align: center; + + > span { + letter-spacing: 5px; + font-weight: bold; + background-image: -webkit-linear-gradient(top, #FFFFFF, #56bcda, #0BE9FA); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } } .box-top { @@ -316,6 +327,7 @@ body, height: 1200px; //width: 1300px; } + #containerWindDirection { flex: 1; height: 1160px; @@ -395,6 +407,37 @@ body, position: absolute; top: 47px; right: 119px; + display: flex; + + .choose-time { + 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 { diff --git a/src/components/chooseMonth/index.vue b/src/components/chooseMonth/index.vue new file mode 100644 index 0000000..eb78122 --- /dev/null +++ b/src/components/chooseMonth/index.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/components/chooseTime/index.vue b/src/components/chooseTime/index.vue new file mode 100644 index 0000000..a0d44db --- /dev/null +++ b/src/components/chooseTime/index.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue index 8e03332..d9d92e4 100644 --- a/src/components/content/airInfo/AirInfo.vue +++ b/src/components/content/airInfo/AirInfo.vue @@ -33,6 +33,8 @@
+ + props.airData, (now) => { windSpeed.value = 0 } }, {deep: true}); - -const getChartInfo = (equipmentId, type = 'day') => { +const daySelect = (val) => { + dayValue.value = val + getChartInfo(openDialogId.value, 'day',val) +} +const monthSelect = (val) => { + monthValue.value = val + getChartInfo(openDialogId.value, 'month',val) +} +const getChartInfo = (equipmentId, type = 'day',time='') => { isWindSpeedVisited.value = true showSpeedLoading.value = true - getEchartsInfo(equipmentId, type).then(res => { + getEchartsInfo(equipmentId,time, type).then(res => { if (res?.code === 1000) { showSpeedLoading.value = false nextTick(() => { @@ -124,15 +137,20 @@ const handleOpenChart = (id, type) => { getChartInfo(id, 'day') } } - -const timeSelect = (index) => { - if (index === 0) { - getChartInfo(openDialogId.value, 'years') - } else if (index === 1) { - getChartInfo(openDialogId.value, 'month') - } else if (index === 2) { - getChartInfo(openDialogId.value, 'day') +const changeDate = (index) => { + switch (index) { + case 0: + return 'years' + case 1: + return 'month' + case 2: + return 'day' } +} +const timeSelect = (index) => { + dayValue.value = '' + monthValue.value = '' + getChartInfo(openDialogId.value, changeDate(index)) }; const changeData = (item) => { @@ -148,8 +166,6 @@ const changeData = (item) => { } const changeIcon = (type) => { switch (type) { - case "dust": - return 'dust-icon.png'; case "oxygen": return 'o2-icon.png'; case "temperature": @@ -163,7 +179,7 @@ const getAirInfo = (now) => { let airObj = {} let airArr = [] now?.map(item => { - if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") { + if (item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") { airObj = changeData(item) airArr.push(airObj) } else if (item.equipmentType === "windSpeed") { diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue index 20bee1c..fb5812a 100644 --- a/src/components/content/badGasInfo/BadGasInfo.vue +++ b/src/components/content/badGasInfo/BadGasInfo.vue @@ -34,6 +34,8 @@
+ + { - if (index === 0) { - getBadGasChartInfo('years') - } else if (index === 1) { - getBadGasChartInfo('month') - } else if (index === 2) { - getBadGasChartInfo('day') +const daySelect = (val) => { + dayValue.value = val + getBadGasChartInfo('day', val) +} +const monthSelect = (val) => { + monthValue.value = val + getBadGasChartInfo('month', val) +} +const changeDate = (index) => { + switch (index) { + case 0: + return 'years' + case 1: + return 'month' + case 2: + return 'day' } +} +const timeSelect = (index) => { + dayValue.value = '' + monthValue.value = '' + getBadGasChartInfo(changeDate(index)) }; const getBadGasInfo = (now) => { if (now === null) return; @@ -114,6 +133,7 @@ const getBadGasInfo = (now) => { let windPressureArr = []; now?.map((item) => { if ( + item.equipmentType === "dust" || item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || @@ -137,11 +157,11 @@ const changeData = (item) => { unit: item.unit, }; }; -const getBadGasChartInfo = (type) => { +const getBadGasChartInfo = (type, time = '') => { isBadGasVisited.value = true showLoading.value = true let id = props.tunnelId - getBadGasEchartsInfo(id, type).then(res => { + getBadGasEchartsInfo(id, time, type).then(res => { if (res?.code === 1000) { showLoading.value = false nextTick(() => { @@ -232,33 +252,6 @@ const initChart = (type, values) => { //X轴 xAxis: { type: "category", - // data: [ - // "00:00", - // "01:00", - // "02:00", - // "03:00", - // "04:00", - // "05:00", - // "06:00", - // "07:00", - // "08:00", - // "09:00", - // "10:00", - // "11:00", - // "12:00", - // "13:00", - // "14:00", - // "15:00", - // "16:00", - // "17:00", - // "18:00", - // "19:00", - // "20:00", - // "21:00", - // "22:00", - // "23:00", - // "24:00", - // ], data: type, axisLabel: { textStyle: { @@ -280,6 +273,19 @@ const initChart = (type, values) => { //配置项 series: [ { + name: "粉尘", + // data: [ + // 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, + // 69, 25, 31, 49, 81, 63, + // ], + data: values.dustValues, + type: "line", + smooth: true, + symbolSize: 24, + lineStyle: { + width: 5, + }, + },{ name: "二氧化碳", // data: [ // 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, @@ -399,7 +405,7 @@ const initChart = (type, values) => { //height: calc(621px - 45px - 22px); display: flex; flex-wrap: wrap; - justify-content: space-around; + justify-content: flex-start; padding: 16px 0 0 10px; } } diff --git a/src/components/content/badGasInfo/childComps/GasInfoItem.vue b/src/components/content/badGasInfo/childComps/GasInfoItem.vue index 6693c76..73c3aba 100644 --- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue +++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue @@ -122,11 +122,14 @@ function setPoint() { #gas-info-item { width: 231px; text-align: center; + margin-right: 26px; + &:nth-child(3n){ + margin-right: 0; + } //旋转定位阈值位于的刻度 .point { width: 200px; height: 200px; - position: relative; } //用伪元素标记阈值 diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index 69d57b5..289b471 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -5,70 +5,60 @@
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
+
-
-
{{ changeNum(item) }}号风机
-
-
-
-
-
- 状态:{{ item.breakdown ? '故障' : '运行' }} +
+
+
+ 状态:{{ item.breakdown ? '故障' : '运行' }} +
+
+
+ 启动
-
-
- 启动 -
-
- 停止 -
+
+ 停止
-
-
- - 自动 - 手动 - -
-
-
- 给定频率 - - - - - - - - - - - -
- - - -
- +
+
+
+ + 自动 + 手动 + +
+
+ 给定频率 + + + + + + + + + + +
@@ -107,6 +97,8 @@
+ + props.list, (now) => { }) handleOnMounted() }, {deep: true}); -const timeSelect = (index) => { - if (index === 0) { - getFanInfo(openEquipmentId.value, 'years') - } else if (index === 1) { - getFanInfo(openEquipmentId.value, 'month') - } else if (index === 2) { - getFanInfo(openEquipmentId.value, 'day') +const daySelect = (val) => { + console.log('daySelect') + dayValue.value = val + getFanInfo(openEquipmentId.value, 'day',val) +} +const monthSelect = (val) => { + monthValue.value = val + getFanInfo(openEquipmentId.value, 'month',val) +} +const changeDate = (index) => { + switch (index) { + case 0: + return 'years' + case 1: + return 'month' + case 2: + return 'day' } +} +const timeSelect = (index) => { + dayValue.value = '' + monthValue.value = '' + getFanInfo(openEquipmentId.value, changeDate(index)) }; const packageData = (item, type, flag) => { let number = 0 @@ -238,49 +249,67 @@ const packageData = (item, type, flag) => { } //启动/停止 const editOperate = (item, type) => { - ElMessageBox.confirm(`是否${type}该风机?`, '系统提示', { + ElMessageBox.confirm(`确认${type}${changeNum(item)}号风机吗?`, '系统提示', { type: 'warning', closeOnClickModal: false }).then(() => { const data = packageData(item, item.running) editFrequencyOperationSwitch(data).then(res => { - console.log('修改风机启动', res) if (res.code === 1000) { ElMessage.success(res.msg) } else { ElMessage.error(res.msg) } }) - }) + }).catch(() => { + item.running = !item.running + }); } const changeFrequency = (item) => { - console.log('修改频率') - const data = packageData(item, item.frequencySetting, true) - editFrequency(data).then(res => { - console.log('修改风机频率', res) - if (res.code === 1000) { - ElMessage.success(res.msg) - } else { - ElMessage.warning(res.msg) - } - }) + ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的频率为${item.frequencySetting}Hz吗?`, '系统提示', { + type: 'warning', + closeOnClickModal: false + }).then(() => { + const data = packageData(item, item.frequencySetting, true) + editFrequency(data).then(res => { + if (res.code === 1000) { + ElMessage.success(res.msg) + } else { + ElMessage.warning(res.msg) + } + }) + }).catch(() => { + // item.running=!item.running + }); } const changeModel = (item) => { - const data = packageData(item, item.autoMode) - editFrequencyModelSwitch(data).then(res => { - console.log('修改自动模式', res) - if (res.code === 1000) { - ElMessage.success(res.msg) - } else { - ElMessage.warning(res.msg) - } - }) + let flag + if (item.autoMode) { + flag = '自动' + } else { + flag = '手动' + } + ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的模式为${flag}模式吗?`, '系统提示', { + type: 'warning', + closeOnClickModal: false + }).then(() => { + const data = packageData(item, item.autoMode) + editFrequencyModelSwitch(data).then(res => { + if (res.code === 1000) { + ElMessage.success(res.msg) + } else { + ElMessage.warning(res.msg) + } + }) + }).catch(() => { + item.autoMode = !item.autoMode + }); } -const getFanInfo = (equipmentId, type = 'day') => { +const getFanInfo = (equipmentId, type = 'day', time = '') => { isVisited.value = true showLoading.value = true - getFanEchartsInfo(equipmentId, type).then(res => { + getFanEchartsInfo(equipmentId, time, type).then(res => { if (res?.code === 1000) { showLoading.value = false nextTick(() => { @@ -290,6 +319,7 @@ const getFanInfo = (equipmentId, type = 'day') => { }) } const handleOpenChart = (item) => { + selectTimeButton.value = 2 openEquipmentId.value = item.equipmentId getFanInfo(item.equipmentId, 'day') if (item.equipmentId === 22) { @@ -330,7 +360,6 @@ const getImage = (type) => { } } const changeNum = (item) => { - console.log('1号变频器') switch (item.equipmentId) { case 22: return '一'; @@ -450,7 +479,7 @@ const handleOnMounted = () => { }, data: [ { - value: socketData.value[i].frequencySetting, + value: socketData.value[i].frequencyFeedback, fontSize: 2100, detail: { valueAnimation: true, @@ -543,7 +572,7 @@ const initChart = (type, valueA, valueB, valueC) => { }, dataZoom: [{ type: 'inside', - }, + }, { type: 'slider', top: 1050, @@ -809,173 +838,157 @@ input[type="number"] { } .option-nav { - //display: flex; - //flex-direction: column; width: 70%; + display: flex; + align-items: center; - > div:first-child { - margin-top: 48px; + .state { + flex: 1; display: flex; - align-items: center; + flex-direction: column; + justify-content: center; + font-size: 28px; + color: #38cafb; + line-height: 35px; + gap: 40px; - .state { - flex: 1; + .stopColor { + background-color: red !important; + } + + .blue-state { display: flex; - flex-direction: column; - justify-content: center; - font-size: 28px; - color: #38cafb; - line-height: 35px; - gap: 40px; + align-items: center; + height: 45px; + margin-right: 15px; + color: #fff; + background-color: #3eab3f; + padding-left: 10px; + border-radius: 8px; + margin-left: -5px; - .stopColor { - background-color: red !important; + .state-icon { + width: 28px; + height: 28px; + background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important; + margin-right: 10px; } - .blue-state { - display: flex; - align-items: center; - height: 45px; - margin-right: 15px; - color: #fff; - background-color: #3eab3f; - padding-left: 10px; - border-radius: 8px; - margin-left: -5px; - - .state-icon { - width: 28px; - height: 28px; - background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important; - margin-right: 10px; - } - - .fan-state { - color: #FFFFFF; - } - } - - - .switch { - display: flex; - width: 165px; - height: 45px; - border-radius: 22px; - border: 2px solid #0f82af; - overflow: hidden; - font-weight: bold; - color: #127399; - line-height: 40px; - - & > div { - flex: 1; - text-align: center; - cursor: pointer; - } + .fan-state { + color: #FFFFFF; } } - .power { - flex: 1.3; + + .switch { display: flex; - flex-direction: column; - justify-content: center; - //padding: 0 20px; - font-size: 28px; - color: #38cafb; - line-height: 37px; - gap: 40px; + width: 165px; + height: 45px; + border-radius: 22px; + border: 2px solid #0f82af; + overflow: hidden; + font-weight: bold; + color: #127399; + line-height: 40px; - .check-box { - display: flex; - align-items: center; - justify-content: center; - //margin-left: 20px; - } - - .edit-power { - margin-top: 10px; - display: flex; - flex-direction: column; - - .changeMargin { - - } - - > div:first-child { - display: flex; - - > span:first-child { - white-space: pre; - margin-right: 14px; - } - - :deep(.is-focus) { - .el-input__inner { - font-weight: normal !important; - color: #fff !important; - } - } - - :deep(.el-input__wrapper) { - width: 160px; - height: 44px; - background-color: transparent; - box-shadow: none; - border: 1px solid #38CAFB; - transform: none; - transition: none; - margin-right: 10px; - - .el-input__inner { - height: 44px; - font-size: 30px; - font-weight: bold; - color: #38CAFB; - } - - - .el-input__suffix-inner { - font-size: 30px; - color: #38CAFB; - line-height: 40px; - font-weight: bold; - } - } - - } - - - //.units { - // position: relative; - //} - // - //.units::after { - // content: "Hz"; - // position: absolute; - // right: 6px; - // top: 50%; - // transform: translateY(-50%); - // font-size: 28px; - // color: #38cafb; - // line-height: 37px; - //} - // - //input { - // width: 130px; - // height: 44px; - // border: 2px solid #0f82af; - // background: transparent; - // margin-left: 14px; - // outline: none; - // font-size: 28px; - // font-weight: bold; - // color: #38cafb; - // line-height: 37px; - //} + & > div { + flex: 1; + text-align: center; + cursor: pointer; } } } + + .power { + flex: 1.3; + display: flex; + flex-direction: column; + justify-content: center; + //padding: 0 20px; + font-size: 28px; + color: #38cafb; + line-height: 37px; + gap: 40px; + + .check-box { + display: flex; + align-items: center; + justify-content: center; + //margin-left: 20px; + } + + .edit-power { + margin-top: 10px; + display: flex; + //flex-direction: column; + > span:first-child { + white-space: pre; + margin-right: 14px; + } + + :deep(.is-focus) { + .el-input__inner { + font-weight: normal !important; + color: #fff !important; + } + } + + :deep(.el-input__wrapper) { + width: 160px; + height: 44px; + background-color: transparent; + box-shadow: none; + border: 1px solid #38CAFB; + transform: none; + transition: none; + margin-right: 10px; + + .el-input__inner { + height: 44px; + font-size: 30px; + font-weight: bold; + color: #38CAFB; + } + + + .el-input__suffix-inner { + font-size: 30px; + color: #38CAFB; + line-height: 40px; + font-weight: bold; + } + } + + //.units { + // position: relative; + //} + // + //.units::after { + // content: "Hz"; + // position: absolute; + // right: 6px; + // top: 50%; + // transform: translateY(-50%); + // font-size: 28px; + // color: #38cafb; + // line-height: 37px; + //} + // + //input { + // width: 130px; + // height: 44px; + // border: 2px solid #0f82af; + // background: transparent; + // margin-left: 14px; + // outline: none; + // font-size: 28px; + // font-weight: bold; + // color: #38cafb; + // line-height: 37px; + //} + } + + } } } diff --git a/src/components/content/windPressure/WindPressureList.vue b/src/components/content/windPressure/WindPressureList.vue index 0cf3646..2b300a0 100644 --- a/src/components/content/windPressure/WindPressureList.vue +++ b/src/components/content/windPressure/WindPressureList.vue @@ -23,6 +23,8 @@
+ + props.list, (now) => { watch(() => props.winData, (now) => { getScreenInfo(now.windPressureSensorList) }, {deep: true}); - -const getWindInfo = (equipmentId, type = 'day') => { +const daySelect = (val) => { + dayValue.value = val + getWindInfo(windSortId.value, 'day', val) +} +const monthSelect = (val) => { + monthValue.value = val + getWindInfo(windSortId.value, 'month', val) +} +const getWindInfo = (equipmentId, type = 'day', time = '') => { isVisited.value = true showLoading.value = true - getEchartsInfo(equipmentId, type).then(res => { + getEchartsInfo(equipmentId, time, type).then(res => { if (res?.code === 1000) { showLoading.value = false nextTick(() => { @@ -88,14 +101,20 @@ const handleOpenChart = (item) => { windSort.value = item.equipmentName windSortId.value = item.equipmentId } -const timeSelect = (index) => { - if (index === 0) { - getWindInfo(windSortId.value, 'years') - } else if (index === 1) { - getWindInfo(windSortId.value, 'month') - } else if (index === 2) { - getWindInfo(windSortId.value, 'day') +const changeDate = (index) => { + switch (index) { + case 0: + return 'years' + case 1: + return 'month' + case 2: + return 'day' } +} +const timeSelect = (index) => { + dayValue.value = '' + monthValue.value = '' + getWindInfo(windSortId.value, changeDate(index)) }; const getScreenInfo = (now) => { let windPressureObj = {} diff --git a/src/components/timeRangeBtn/index.vue b/src/components/timeRangeBtn/index.vue index 2984499..4c07544 100644 --- a/src/components/timeRangeBtn/index.vue +++ b/src/components/timeRangeBtn/index.vue @@ -30,7 +30,6 @@ const props = defineProps({ }, }); const emit = defineEmits(["update:modelValue", "select"]); - const selectButton = ref(props.modelValue); const select = (index) => { diff --git a/src/components/tunnelTitle/index.vue b/src/components/tunnelTitle/index.vue new file mode 100644 index 0000000..1abf7b0 --- /dev/null +++ b/src/components/tunnelTitle/index.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/router/index.js b/src/router/index.js index 816999e..6f0a0f0 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,6 +23,15 @@ const routes = [ breadcrumb: true }, }, + { + path: '/:tunnelId/:siteId', + name: 'changeSitePreview', + component: () => import('@/views/tunnel/index.vue'), + meta: { + title: '站点预览', + breadcrumb: true + }, + }, { path: '/:tunnelId', name: 'previewTunnel', @@ -51,7 +60,7 @@ const routes = [ } }, { - path: '/site/:userId(\\d+)', + path: '/site/:userId(\\d+)/:siteId(\\d+)', name: 'site', component: () => import('@/views/site/index.vue'), meta: { diff --git a/src/views/device-manage/index.vue b/src/views/device-manage/index.vue index 0673fd8..7fa55fe 100644 --- a/src/views/device-manage/index.vue +++ b/src/views/device-manage/index.vue @@ -8,7 +8,7 @@
{{ tunnelName }}
-
+
@@ -49,25 +49,34 @@ :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }" :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData"> + + + - +