From 5663c9338f7ff0986c5e99b2178ef57371a5c606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com> Date: Sat, 9 Dec 2023 01:04:10 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E9=9A=A7=E9=81=93?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/index.scss | 53 +++++++++++++++++++++++++--------- src/views/tunnel/index.vue | 55 ++++++++++++++++++++++++++++++------ 2 files changed, 86 insertions(+), 22 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index c091ca8..e49f287 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -42,8 +42,9 @@ html, body, #app, .el-container, .el-aside, .el-main { width: 60px; height: 60px; } - .select-active{ - color: #11EAF2!important; + + .select-active { + color: #11EAF2 !important; } } } @@ -163,7 +164,34 @@ html, body, #app, .el-container, .el-aside, .el-main { margin-left: -925px; background-image: url('../images/topAndDown/sp_dbbj.png'); + .el-carousel__mask { + display: none; + } + + .el-carousel { + width: 1250px; + height: 146px; + padding-top: 35px; + + .el-carousel__container { + width: 1250px; + + .el-carousel__arrow--left { + display: none; + } + + .el-carousel__arrow--right { + display: none; + } + } + + .el-carousel__indicators { + display: none; + } + } + .arrow { + cursor: pointer; margin: 50px 0 0 263px; width: 46px; height: 54px; @@ -172,32 +200,31 @@ html, body, #app, .el-container, .el-aside, .el-main { .btn { width: 100%; - display: flex; - align-items: center; - justify-content: space-around; margin-top: 14px; font-size: 26px; color: #9FC3CD; + .el-carousel__item { + left: 19%; + } + > div { display: flex; justify-content: center; + padding-top: 5px; + width: 158px; + height: 50px; + background-image: url('../images/topAndDown/sp_icon_sdqhx.png'); } - > div:nth-child(2) { + .is-active { + margin-top: -5px; color: #FFFFFF; padding-top: 7px; width: 201px; height: 62px; background-image: url('../images/topAndDown/sp_icon_sdqhd.png'); } - - > div:first-child, > div:last-child { - padding-top: 5px; - width: 158px; - height: 50px; - background-image: url('../images/topAndDown/sp_icon_sdqhx.png'); - } } .right { diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue index b8dba13..671308e 100644 --- a/src/views/tunnel/index.vue +++ b/src/views/tunnel/index.vue @@ -50,15 +50,20 @@
+
-
-
-
一号隧道
-
二号隧道
-
三号隧道
-
-
+
+ +
+ + {{ item.name }} + +
+ +
+ + @@ -76,13 +81,37 @@ import {useAuthStore} from '@/store/userstore.js' const authStore = useAuthStore() const router = useRouter() -const selectIndex=ref(1) +const selectIndex = ref(1) const drawerLeft = ref(true) const drawerRight = ref(true) const currentSite = ref('松江站') const currentUser = ref('admin') const currentDate = ref(dateFormat()) - +const tunnelBtn=ref() +const tunnelList = ref([ + { + value: 0, + name: '一号隧道' + }, { + value: 1, + name: '二号隧道' + }, { + value: 2, + name: '三号隧道' + }, { + value: 3, + name: '四号隧道' + }, { + value: 4, + name: '五号隧道' + }, { + value: 5, + name: '六号隧道' + }, { + value: 6, + name: '七号隧道' + }, +]) const manageSelect = () => { // getInfo(); }; @@ -96,6 +125,14 @@ const handleLogout = () => { authStore.userLogout() router.push('/login') } +const previousBtn = () => { + tunnelBtn.value.prev() +} +const nextBtn = () => { + tunnelBtn.value.next(); + // tunnelList.value.push(tunnelList.value.shift()) + // console.log('tunnelList.value', tunnelList.value) +} diff --git a/src/components/content/badGasInfo/childComps/GasInfoItem.vue b/src/components/content/badGasInfo/childComps/GasInfoItem.vue new file mode 100644 index 0000000..5d2ff3c --- /dev/null +++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index 20b8966..29c2151 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -121,60 +121,110 @@ const option = { series: [ { type: "gauge", - progress: { - show: true, - width: 15, - lineStyle: { - color: "yellow", - }, - }, - axisLine: { - lineStyle: { - width: 5, - }, - }, - axisTick: { - show: false, - }, - splitLine: { - length: 15, - lineStyle: { - width: 1, - color: "#099", - }, - }, - axisLabel: { - show: false, - distance: 25, - color: "#999", - fontSize: 20, - }, + startAngle: -120, + endAngle: -420, pointer: { show: false, }, - anchor: { - show: false, - showAbove: true, - size: 0, + progress: { + show: true, + overlap: false, + roundCap: true, + clip: false, itemStyle: { borderWidth: 10, + borderColor: { + type: "linear", + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { + offset: 0, + color: "#4BB10E", // 0% 处的颜色 + }, + { + offset: 0.25, + color: "#B1AD0E", // 100% 处的颜色 + }, + { + offset: 0.75, + color: "#B1880E", // 100% 处的颜色 + }, + { + offset: 1, + color: "#D77E01", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + color: { + type: "linear", + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { + offset: 0, + color: "#4BB10E", // 0% 处的颜色 + }, + { + offset: 0.25, + color: "#B1AD0E", // 100% 处的颜色 + }, + { + offset: 0.75, + color: "#B1880E", // 100% 处的颜色 + }, + { + offset: 1, + color: "#D77E01", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + borderWidth: 10, }, }, - title: { - show: true, + max: 1000, + splitLine: { + show: false, }, - detail: { - valueAnimation: true, - fontSize: 40, - offsetCenter: [0, "0%"], - formatter: "{value}Hz", - color: "white", + axisTick: { + show: true, + splitNumber: 1, + length: 10, + }, + axisLabel: { + show: false, }, data: [ { - value: 10, + value: 50, + fontSize: 2100, + detail: { + valueAnimation: true, + offsetCenter: ["0%", "0%"], + fontSize: 40, + color: "white", + }, }, ], + axisLine: { + lineStyle: { + width: 3, + color: [[1, "#155F7C"]], + }, + }, + detail: { + width: 100, + height: 14, + fontSize: 26, + color: "inherit", + formatter: "{value}", + }, }, ], }; @@ -182,60 +232,110 @@ const option2 = { series: [ { type: "gauge", - progress: { - show: true, - width: 15, - lineStyle: { - color: "yellow", - }, - }, - axisLine: { - lineStyle: { - width: 5, - }, - }, - axisTick: { - show: false, - }, - splitLine: { - length: 15, - lineStyle: { - width: 1, - color: "#099", - }, - }, - axisLabel: { - show: false, - distance: 25, - color: "#999", - fontSize: 20, - }, + startAngle: -120, + endAngle: -420, pointer: { show: false, }, - anchor: { - show: false, - showAbove: true, - size: 0, + progress: { + show: true, + overlap: false, + roundCap: true, + clip: false, itemStyle: { borderWidth: 10, + borderColor: { + type: "linear", + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { + offset: 0, + color: "#4BB10E", // 0% 处的颜色 + }, + { + offset: 0.25, + color: "#B1AD0E", // 100% 处的颜色 + }, + { + offset: 0.75, + color: "#B1880E", // 100% 处的颜色 + }, + { + offset: 1, + color: "#D77E01", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + color: { + type: "linear", + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { + offset: 0, + color: "#4BB10E", // 0% 处的颜色 + }, + { + offset: 0.25, + color: "#B1AD0E", // 100% 处的颜色 + }, + { + offset: 0.75, + color: "#B1880E", // 100% 处的颜色 + }, + { + offset: 1, + color: "#D77E01", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + borderWidth: 10, }, }, - title: { - show: true, + max: 1000, + splitLine: { + show: false, }, - detail: { - valueAnimation: true, - fontSize: 40, - offsetCenter: [0, "0%"], - formatter: "{value}Hz", - color: "white", + axisTick: { + show: true, + splitNumber: 1, + length: 10, + }, + axisLabel: { + show: false, }, data: [ { - value: 10, + value: 500, + fontSize: 2100, + detail: { + valueAnimation: true, + offsetCenter: ["0%", "0%"], + fontSize: 40, + color: "white", + }, }, ], + axisLine: { + lineStyle: { + width: 3, + color: [[1, "#155F7C"]], + }, + }, + detail: { + width: 100, + height: 14, + fontSize: 26, + color: "inherit", + formatter: "{value}", + }, }, ], }; @@ -288,7 +388,9 @@ let isSAuto2 = ref("false"); height: 24px; border: 2px solid #38cafb; border-radius: 50%; - text-align: center; + display: flex; + align-items: center; + justify-content: center; } ::v-deep .el-radio__label { font-size: 28px; @@ -332,6 +434,19 @@ let isSAuto2 = ref("false"); height: 100%; width: 30%; margin: 0px 0px 0px 10px; + position: relative; + } + .echart::after { + content: "Hz"; + font-size: 24px; + font-family: MicrosoftYaHei, MicrosoftYaHei; + font-weight: bold; + color: #ffffff; + line-height: 31px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, 60%); } .fan-name { width: 39px; diff --git a/src/components/content/windPressure/WindPressureList.vue b/src/components/content/windPressure/WindPressureList.vue index 4f36e83..62bb015 100644 --- a/src/components/content/windPressure/WindPressureList.vue +++ b/src/components/content/windPressure/WindPressureList.vue @@ -9,7 +9,8 @@