diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue index fcd40c6..f13d25a 100644 --- a/src/views/oneMap/components/ZHHM_JCFX.vue +++ b/src/views/oneMap/components/ZHHM_JCFX.vue @@ -325,22 +325,26 @@ }); } }; +const DataList = ref(''); // 日历点击获取相应日期 const getChangeDate = date => { console.log(date); // 模拟假数据，演示用 if (date == '2024-08-07') { // 大雨 + DataList.value = '2024-08-07'; getDataFX('1'); } else { // 中雨 + DataList.value = '2024-08-03'; getDataFX('0'); } }; // 内涝积水分析、项目分析、关键管网分析数据获取 function getDataFX(val) { // 内涝积水分析 - selectWaterlogging({ value: val }).then(res => { + console.log(val, 'valvalval'); + selectWaterlogging({ value: val, date: DataList.value }).then(res => { let datas = res.data; chartData1.value.xAxis = datas.time; chartData1.value.yAxis = datas.jiangyuliang; //降雨量 diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue index fcd40c6..f13d25a 100644 --- a/src/views/oneMap/components/ZHHM_JCFX.vue +++ b/src/views/oneMap/components/ZHHM_JCFX.vue @@ -325,22 +325,26 @@ }); } }; +const DataList = ref(''); // 日历点击获取相应日期 const getChangeDate = date => { console.log(date); // 模拟假数据，演示用 if (date == '2024-08-07') { // 大雨 + DataList.value = '2024-08-07'; getDataFX('1'); } else { // 中雨 + DataList.value = '2024-08-03'; getDataFX('0'); } }; // 内涝积水分析、项目分析、关键管网分析数据获取 function getDataFX(val) { // 内涝积水分析 - selectWaterlogging({ value: val }).then(res => { + console.log(val, 'valvalval'); + selectWaterlogging({ value: val, date: DataList.value }).then(res => { let datas = res.data; chartData1.value.xAxis = datas.time; chartData1.value.yAxis = datas.jiangyuliang; //降雨量 diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue index 6339e7a..cc06524 100644 --- a/src/views/oneMap/floodPrevention/FholRightBox.vue +++ b/src/views/oneMap/floodPrevention/FholRightBox.vue @@ -47,8 +47,48 @@
-
-
+
+
+
泵站联系人：周晓峰
+
电话：1306035468
+
+
+ {{ item.name }} +
+
+
+
+
+
+
+
当日抽排量
+
878.9m³
+
+
+
70%
+
+
+
+
+
累计抽排量
+
108.9
+
万m³
+
+
+
+
前水池水位
+
8.9
+
m
+
+
+
+
@@ -57,6 +97,7 @@
{{ item.name }}
+
视频
@@ -104,6 +145,15 @@ import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png'; import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png'; import PipeDetail from './PipeDetail.vue'; +const bzList = ref([ + { name: '工况', value: 1 }, + { name: '视频', value: 2 }, +]); + +const bzname = ref('工况'); +function bzclick(val) { + bzname.value = val.name; +} const listData = ref([ { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' }, @@ -285,21 +335,137 @@ height: calc(100% - 50px); width: 435px; margin: 3px auto; + // background: #0066e5; .StationMc { width: 435px; height: 50%; - background: url('@/assets/images/fhpl/bzyxjk.png') no-repeat; - background-size: 100% 100%; + // background: yellow; + .bzxq { + margin-top: 5px; + color: #c6c6c6; + height: 25px; + font-family: Source Han Sans CN; + align-items: center; + .switch { + position: relative; + left: 40px; + top: 5px; + width: 150px; + height: 25px; + // background: red; + .head-item { + width: 70px; + margin-left: 5px; + padding: 2px 3px; + background: #00344f; + height: 23px; + text-align: center; + cursor: pointer; + position: relative; + top: -3px; + } + .activedright { + border: 1px solid #2cfce9; + color: #e4f5ff; + background: #166f84; + } + } + } + + .drcpl { + width: 360px; + height: 22px; + background: #155a89; + border-radius: 11px; + color: #fff; + margin-top: 15px; + .percent { + position: relative; + height: 100%; + background: linear-gradient(90deg, #0066e5, #00b6ff); + border-radius: 11px; + .round { + position: absolute; + left: 4px; + top: 3px; + width: 16px; + height: 16px; + background: #02fff0; + border-radius: 50%; + } + .text { + position: absolute; + left: 36px; + top: 3px; + } + .value { + position: absolute; + right: 10px; + top: 4px; + } + } + } + .percentVal { + margin-top: 15px; + color: #fff; + font-size: 18px; + font-weight: 400; + color: #ffffff; + margin-left: 30px; + } + .info { + color: #fff; + height: 40px; + background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%); + border-radius: 2px; + border: 1px solid #74dde1; + padding: 0 20px; + margin-top: 20px; + line-height: 40px; + // background: red; + > div { + .circle { + width: 7px; + height: 7px; + border-radius: 50%; + margin-right: 5px; + } + .value { + font-size: 18px; + margin-left: 5px; + margin-right: 3px; + } + &:nth-of-type(1) { + .circle { + background-color: rgba(58, 255, 248, 1); + position: relative; + top: 16px; + } + .value { + color: rgba(58, 255, 248, 1); + } + } + &:nth-of-type(2) { + .circle { + background-color: rgba(24, 232, 122, 1); + position: relative; + top: 16px; + } + .value { + color: rgba(24, 232, 122, 1); + } + } + } + } } .StationList { // width: 435px; height: 50%; - // background: blue; - + // background: black; .item { padding-left: 5px; - margin-top: 15px; + margin-top: 25px; margin-left: 48px; &:first-of-type { margin-left: 0; @@ -321,6 +487,12 @@ } } } + .bzsp { + margin: 5px auto; + width: 430px; + height: 100%; + // background: red; + } } } .DischargeMonitor { diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue index fcd40c6..f13d25a 100644 --- a/src/views/oneMap/components/ZHHM_JCFX.vue +++ b/src/views/oneMap/components/ZHHM_JCFX.vue @@ -325,22 +325,26 @@ }); } }; +const DataList = ref(''); // 日历点击获取相应日期 const getChangeDate = date => { console.log(date); // 模拟假数据，演示用 if (date == '2024-08-07') { // 大雨 + DataList.value = '2024-08-07'; getDataFX('1'); } else { // 中雨 + DataList.value = '2024-08-03'; getDataFX('0'); } }; // 内涝积水分析、项目分析、关键管网分析数据获取 function getDataFX(val) { // 内涝积水分析 - selectWaterlogging({ value: val }).then(res => { + console.log(val, 'valvalval'); + selectWaterlogging({ value: val, date: DataList.value }).then(res => { let datas = res.data; chartData1.value.xAxis = datas.time; chartData1.value.yAxis = datas.jiangyuliang; //降雨量 diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue index 6339e7a..cc06524 100644 --- a/src/views/oneMap/floodPrevention/FholRightBox.vue +++ b/src/views/oneMap/floodPrevention/FholRightBox.vue @@ -47,8 +47,48 @@
-
-
+
+
+
泵站联系人：周晓峰
+
电话：1306035468
+
+
+ {{ item.name }} +
+
+
+
+
+
+
+
当日抽排量
+
878.9m³
+
+
+
70%
+
+
+
+
+
累计抽排量
+
108.9
+
万m³
+
+
+
+
前水池水位
+
8.9
+
m
+
+
+
+
@@ -57,6 +97,7 @@
{{ item.name }}
+
视频
@@ -104,6 +145,15 @@ import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png'; import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png'; import PipeDetail from './PipeDetail.vue'; +const bzList = ref([ + { name: '工况', value: 1 }, + { name: '视频', value: 2 }, +]); + +const bzname = ref('工况'); +function bzclick(val) { + bzname.value = val.name; +} const listData = ref([ { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' }, @@ -285,21 +335,137 @@ height: calc(100% - 50px); width: 435px; margin: 3px auto; + // background: #0066e5; .StationMc { width: 435px; height: 50%; - background: url('@/assets/images/fhpl/bzyxjk.png') no-repeat; - background-size: 100% 100%; + // background: yellow; + .bzxq { + margin-top: 5px; + color: #c6c6c6; + height: 25px; + font-family: Source Han Sans CN; + align-items: center; + .switch { + position: relative; + left: 40px; + top: 5px; + width: 150px; + height: 25px; + // background: red; + .head-item { + width: 70px; + margin-left: 5px; + padding: 2px 3px; + background: #00344f; + height: 23px; + text-align: center; + cursor: pointer; + position: relative; + top: -3px; + } + .activedright { + border: 1px solid #2cfce9; + color: #e4f5ff; + background: #166f84; + } + } + } + + .drcpl { + width: 360px; + height: 22px; + background: #155a89; + border-radius: 11px; + color: #fff; + margin-top: 15px; + .percent { + position: relative; + height: 100%; + background: linear-gradient(90deg, #0066e5, #00b6ff); + border-radius: 11px; + .round { + position: absolute; + left: 4px; + top: 3px; + width: 16px; + height: 16px; + background: #02fff0; + border-radius: 50%; + } + .text { + position: absolute; + left: 36px; + top: 3px; + } + .value { + position: absolute; + right: 10px; + top: 4px; + } + } + } + .percentVal { + margin-top: 15px; + color: #fff; + font-size: 18px; + font-weight: 400; + color: #ffffff; + margin-left: 30px; + } + .info { + color: #fff; + height: 40px; + background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%); + border-radius: 2px; + border: 1px solid #74dde1; + padding: 0 20px; + margin-top: 20px; + line-height: 40px; + // background: red; + > div { + .circle { + width: 7px; + height: 7px; + border-radius: 50%; + margin-right: 5px; + } + .value { + font-size: 18px; + margin-left: 5px; + margin-right: 3px; + } + &:nth-of-type(1) { + .circle { + background-color: rgba(58, 255, 248, 1); + position: relative; + top: 16px; + } + .value { + color: rgba(58, 255, 248, 1); + } + } + &:nth-of-type(2) { + .circle { + background-color: rgba(24, 232, 122, 1); + position: relative; + top: 16px; + } + .value { + color: rgba(24, 232, 122, 1); + } + } + } + } } .StationList { // width: 435px; height: 50%; - // background: blue; - + // background: black; .item { padding-left: 5px; - margin-top: 15px; + margin-top: 25px; margin-left: 48px; &:first-of-type { margin-left: 0; @@ -321,6 +487,12 @@ } } } + .bzsp { + margin: 5px auto; + width: 430px; + height: 100%; + // background: red; + } } } .DischargeMonitor { diff --git a/vite.config.js b/vite.config.js index afb2c95..ea2e86d 100644 --- a/vite.config.js +++ b/vite.config.js @@ -7,8 +7,8 @@ const Timestamp = new Date().getTime(); //随机时间戳 // const targetUrl = 'http://192.168.48.145:13000'; //张鸿志 -// const targetUrl = 'http://192.168.16.105:13000'; //张亚辉 -const targetUrl = 'https://server2.wh-nf.cn:8088/prod-api'; //线上 +const targetUrl = 'http://192.168.16.105:13000'; //张亚辉 +// const targetUrl = 'https://server2.wh-nf.cn:8088/prod-api'; //线上 // https://vitejs.dev/config/ export default defineConfig(({ mode, command }) => {