- <template>
- <!-- 典型项目分析 -->
- <div class="projectFXPage">
- <!-- 分析结果建议 -->
- <div class="suggest">
- <div class="autoCont">
- <div class="center">
- {{ rainDate }}分析:降雨起止时间
- <span v-for="(item, index) in detailDataRain.rainfallPeriods" :key="index">
- {{ item.rainStartTime }}-{{ item.rainEndTime }},
- </span>
- 累计降雨时长:{{ rainTime }},小时最大降雨量是{{ hourMaxRain }}mm, 24小时累计降雨量{{ detailDataRain.rainfallIntensity }}mm,
- 降雨等级
- <span class="green">
- {{
- detailDataRain.rainfallIntensity <= 10
- ? '小雨'
- : detailDataRain.rainfallIntensity > 10 && detailDataRain.rainfallIntensity <= 25
- ? '中雨'
- : '大雨'
- }},
- </span>
- 总收水量: {{ ((detailDataRain.rainfallIntensity * 68439.85 * 0.68) / 1000).toFixed(2) }}m³
- </div>
- <div class="cont">
- <span class="numBg">1</span>
- 项目设计降雨量为19.8mm对应的年径流总量控制率为68%;年径流污染削减率(以SS计)不低于40%;本场降雨径流总量控制率:--
- <!-- <span class="green"> 达标 </span> -->
-
- ;本场降雨污染削减率(以SS计):--
- <!-- <span class="green">达标</span> -->
- </div>
- <div class="cont">
- <span class="numBg">2</span>
- 雨水管网产流开始时间{{ detailDataRain.flowStartTime }},结束时间{{ detailDataRain.flowEndTime }},累计出口流量
- <span class="green">{{ Number(detailDataRain.totalOutFlow).toFixed(2) }}m³</span>。
- </div>
- <div class="cont">
- <span class="numBg">3</span>
- 分析建议:
- <span
- v-if="
- nameToData(station1.propertyMonitorList, '水位')[rainIndex] >= 1.1 ||
- nameToData(station5.propertyMonitorList, '水位')[rainIndex] >= 1.8
- "
- >
- 目前管网高水位运行,导致排水不畅,建议及时开启泵站,避免发生内涝风险。
- </span>
- <span v-else>暂无</span>
- </div>
- </div>
- </div>
-
- <!-- 降雨效果 -->
- <CanvasRainP :width="1600" :height="800"></CanvasRainP>
-
- <!-- 水深 -->
- <img
- src="@/assets/newImgs/pumpGY/water.png"
- alt="左"
- class="waterFlow"
- style="transform: rotateY(180deg)"
- :style="{
- height: (120 * waterHeight1) / 1.1 + 'px',
- left: '73px',
- width: '606px',
- }"
- />
- <img
- src="@/assets/newImgs/pumpGY/water.png"
- alt="右"
- class="waterFlow"
- :style="{
- height: (120 * waterHeight5) / 1.8 + 'px',
- right: '75px',
- width: '555px',
- }"
- />
-
- <!-- 实时数据 -->
- <div class="realData">
- <p style="left: 290px; bottom: 175px">最大水深: {{ waterHeight1 || '--' }}米</p>
- <p style="right: 260px; bottom: 175px">最大水深: {{ waterHeight5 || '--' }}米</p>
- </div>
-
- <!-- 监测数据 -->
- <div style="left: 120px; top: 345px" class="tipsM">
- <span>汴京路与公园路交叉口(出口)</span>
- <span :class="[waterHeight1 >= 1.1 ? 'red' : 'green']"> 最大水深: {{ waterHeight1 || '--' }} m </span>
- <span>监测时间: {{ station1.propertyMonitorXList[rainIndex] ? station1.propertyMonitorXList[rainIndex].slice(10) : '--' }} </span>
- <span>累计流量: {{ leijiLL1 || '--' }} m³</span>
- <span>管网管径: 2.4*1.1m</span>
- </div>
- <div style="left: 530px; top: 345px" class="tipsM">
- <span>汴京路与劳动路交叉口(进口)</span>
- <span :class="[nameToData(station2.propertyMonitorList, '水位')[rainIndex] >= 1.1 ? 'red' : 'green']">
- 最大水深: {{ nameToData(station2.propertyMonitorList, '水位')[rainIndex] || '--' }} m
- </span>
- <span>监测时间: {{ station2.propertyMonitorXList[rainIndex] ? station2.propertyMonitorXList[rainIndex].slice(10) : '--' }} </span>
- <span>累计流量: {{ leijiLL2 || '--' }} m³</span>
- <span>管网管径: 2.4*1.1m</span>
- </div>
-
- <div style="left: 910px; top: 345px" class="tipsM">
- <span>由于施工待安装(进口)</span>
- <span>最大水深:{{ '--' }} m</span>
- <span>监测时间: {{ '--' }}</span>
- <span>累计流量:{{ leijiLL4 || '--' }} m³</span>
- <span>管网管径: 3*1.8m</span>
- </div>
- <div style="right: 90px; top: 345px" class="tipsM">
- <span>汴京路与工农路交叉口(出口)</span>
- <span :class="[waterHeight5 >= 1.8 ? 'red' : 'green']"> 最大水深: {{ waterHeight5 || '--' }} m </span>
- <span>监测时间: {{ station5.propertyMonitorXList[rainIndex] ? station5.propertyMonitorXList[rainIndex].slice(10) : '--' }} </span>
- <span>累计流量: {{ leijiLL5 || '--' }} m³</span>
- <span>管网管径: 3*1.8m</span>
- </div>
-
- <!-- 海绵设施 -->
- <img
- src="@/assets/newImgs/pumpGY/hmSS.png"
- alt="海绵设施"
- style="left: 830px; bottom: 385px; width: 63px; height: 63px; cursor: pointer"
- @click="checkHmSS"
- class="equipM"
- />
-
- <!-- 监测设备 -->
- <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 130px; bottom: 75px" class="equipM" />
- <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左2" style="left: 540px; bottom: 75px" class="equipM" />
- <img
- src="@/assets/newImgs/pumpGY/equipL.png"
- alt="设备右1"
- style="right: 490px; bottom: 75px; transform: rotateY(180deg)"
- class="equipM"
- />
- <img
- src="@/assets/newImgs/pumpGY/equipL.png"
- alt="设备右2"
- style="right: 175px; bottom: 75px; transform: rotateY(180deg)"
- class="equipM"
- />
-
- <!-- 汽车 -->
- <img src="@/assets/newImgs/pumpGY/car1.png" alt="车1" style="bottom: 525px; width: 148px; height: 70px" class="carFX animate1" />
- <img src="@/assets/newImgs/pumpGY/car2.png" alt="车2" style="bottom: 495px; width: 134px; height: 57px" class="carFX animate2" />
- <img src="@/assets/newImgs/pumpGY/car4.png" alt="车4" style="bottom: 455px; width: 137px; height: 50px" class="carFX animate3" />
- <img src="@/assets/newImgs/pumpGY/car5.png" alt="车5" style="bottom: 425px; width: 142px; height: 51px" class="carFX animate4" />
- <img src="@/assets/newImgs/pumpGY/car3.png" alt="车3" style="bottom: 415px; width: 48px; height: 46px" class="carFX animate3" />
-
- <!-- 泵站状态 -->
- <div style="left: 5px; bottom: 185px; width: 160px" class="tipsM">
- <span>泵站状态: {{ hygpumpStatus }} </span>
- <span>开机时间: {{ hygpumpTime }}</span>
- </div>
- <div style="right: 5px; bottom: 185px; width: 160px" class="tipsM">
- <span>泵站状态: {{ dgjpumpStatus }} </span>
- <span>开机时间: {{ dgjpumpTime }}</span>
- </div>
- </div>
- </template>
-
- <script setup>
- import CanvasRainP from '@/views/sponeScreen/projectHM/canvasRainP.vue';
- import bus from '@/bus';
- import { graphicReport, calculateAreaAnnualRunoff } from '@/api/dataAnalysis/syntherticData';
- import { sitePropertyRelation } from '@/api/scada/monitor';
-
- const { proxy } = getCurrentInstance();
- const rainIndex = ref(0);
- const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
- const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
- const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
- const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
- const detailDataRain = ref({ totalOutFlow: 0, totalImportFlow: 0 });
- const rainDate = ref('');
- const rainDateTwo = ref('');
- const rainTime = ref('');
- const hourMaxRain = ref(0);
- const dgjpumpStatus = ref('');
- const dgjpumpTime = ref('');
- const hygpumpStatus = ref('');
- const hygpumpTime = ref('');
- const leijiLL1 = ref('');
- const leijiLL2 = ref('');
- const leijiLL4 = ref('');
- const leijiLL5 = ref('');
- const waterHeight1 = ref(0);
- const waterHeight5 = ref(0);
-
- // 获取实时数据
- function getRealData() {
- // 从左到右,共5个
- let params = {
- startTime: rainDate.value + ' 08:00:00',
- endTime: rainDateTwo.value + ' 08:00:00',
- stCode: '',
- };
- params.stCode = '0371000037';
- graphicReport(params).then(res => {
- if (res.data.propertyMonitorList.length > 0) {
- station1.value = res.data;
- let llData = nameToData(res.data.propertyMonitorList, '累计流量');
- leijiLL1.value = Number(llData[llData.length - 1] - llData[0]).toFixed(2);
- waterHeight1.value = nameToData(res.data.propertyMonitorList, '水位')[rainIndex.value]; //水深
- }
- });
-
- params.stCode = '0371000038';
- graphicReport(params).then(res => {
- if (res.data.propertyMonitorList.length > 0) {
- station2.value = res.data;
- let llData = nameToData(res.data.propertyMonitorList, '累计流量');
- leijiLL2.value = Number(llData[llData.length - 1] - llData[0]).toFixed(2);
- }
- });
-
- station4.value = {}; //暂未安装,无数据
-
- params.stCode = '0371000044';
- graphicReport(params).then(res => {
- if (res.data.propertyMonitorList.length > 0) {
- station5.value = res.data;
- let llData = nameToData(res.data.propertyMonitorList, '累计流量');
- leijiLL5.value = Number(llData[llData.length - 1] - llData[0]).toFixed(2);
- waterHeight5.value = nameToData(res.data.propertyMonitorList, '水位')[rainIndex.value]; //水深
- }
- });
- }
-
- // 公共方法,根据监测名称来匹配对应的数值
- function nameToData(data, name) {
- let arr = data.filter(item => item.monitorPropertyName == name);
- let lists = arr[0] ? arr[0].ylist : [];
- return lists;
- }
-
- // 海绵设施点击
- function checkHmSS() {
- bus.emit('checkSSFX', {});
- }
-
- // 降雨场次相关
- function getRainDetail() {
- // 关联雨量站是皮革厂雨量站,0371000003
- let params = {
- searchTime: rainDate.value,
- rainStCode: '0371000003',
- projectNo: 'GW06',
- };
- calculateAreaAnnualRunoff(params).then(res => {
- let datas = res.data;
- detailDataRain.value = datas || {};
- // 计算降雨总时长
- let times = 0;
- datas.rainfallPeriods &&
- datas.rainfallPeriods.map(item => {
- times += (new Date(item.rainEndTime).getTime() - new Date(item.rainStartTime).getTime()) / 1000;
- });
- let hour = Math.floor(times / 60 / 60);
- let minutes = Math.floor((times % 3600) / 60);
- rainTime.value = hour + '小时' + minutes + '分钟';
- });
-
- // 雨量站监测数据
- let params2 = {
- startTime: rainDate.value + ' 08:00:00',
- endTime: rainDateTwo.value + ' 08:00:00',
- stCode: '0371000003',
- };
- graphicReport(params2).then(res => {
- let hourData = nameToData(res.data.propertyMonitorList, '1小时时段降水量');
- hourMaxRain.value = Math.max(...hourData);
- // 最大降雨量对应的index
- rainIndex.value = nameToData(res.data.propertyMonitorList, '1小时时段降水量').findIndex(item => {
- return item == hourMaxRain.value;
- });
- });
- getRealData(); //获取某一天监测数据
- }
-
- // 获取泵站开启状态
- function getPumpStatus() {
- let params = {
- startTime: rainDate.value + ' 08:00:00',
- endTime: rainDateTwo.value + ' 08:00:00',
- stationCode: 'BZKFDJG', //东郊沟泵站
- pageSize: 9999,
- pageNum: 1,
- };
- sitePropertyRelation(params).then(res => {
- let datas = res.data || [];
- for (let item in datas) {
- if (
- item.includes('QSB-YX') == '1' ||
- item.includes('QSB-YX') == '运行' ||
- item.includes('WSB-YX') == '1' ||
- item.includes('WSB-YX') == '运行'
- ) {
- dgjpumpStatus.value = '开启';
- dgjpumpTime.value = item.tt;
- } else {
- dgjpumpStatus.value = '未开启';
- dgjpumpTime.value = '--';
- }
- }
- });
-
- let params2 = {
- startTime: rainDate.value + ' 08:00:00',
- endTime: rainDateTwo.value + ' 08:00:00',
- stationCode: 'BZKFHYG', //海洋馆泵站
- pageSize: 9999,
- pageNum: 1,
- };
- sitePropertyRelation(params2).then(res => {
- let datas = res.data || [];
- for (let item in datas) {
- if (
- item.includes('QSB-YX') == '1' ||
- item.includes('QSB-YX') == '运行' ||
- item.includes('WSB-YX') == '1' ||
- item.includes('WSB-YX') == '运行'
- ) {
- hygpumpStatus.value = '开启';
- hygpumpTime.value = item.tt;
- } else {
- hygpumpStatus.value = '未开启';
- hygpumpTime.value = '--';
- }
- }
- });
- }
-
- onMounted(() => {
- rainDate.value = localStorage.getItem('setRainDateKF');
- // 早八点到第二天早八点逻辑
- let dates = new Date(rainDate.value);
- //86400000 一天得毫秒 *1,就是当前日期减一天,如果是需要自定义几天,修改就可
- rainDateTwo.value = proxy.moment(new Date(dates.getTime() + 86400000 * 1)).format('YYYY-MM-DD');
- getRainDetail(); //获取降雨场次
- getPumpStatus(); // 获取泵站开启状态
- });
- onBeforeUnmount(() => {});
- </script>
-
- <style lang="scss">
- // prettier-ignore
- .projectFXPage {
- width: 1600PX;
- height: 800PX;
- margin-bottom:20PX;
- background: url('@/assets/newImgs/pumpGY/projectBg.jpg') no-repeat;
- background-size: 100% 100%;
- position:relative;
- .equipM{
- position: absolute;
- z-index: 30;
- width:71PX;
- height:329PX;
- }
- .carFX{
- position: absolute;
- z-index: 10;
- }
- .animate1{
- animation: carAni1 linear 10s infinite;
- @keyframes carAni1 {
- 0%{right:5%;}
- 100%{right:92%}
- }
- }
- .animate2{
- animation: carAni2 ease-in-out 8s infinite;
- @keyframes carAni2 {
- 0%{right:5%;}
- 100%{right:90%}
- }
- }
- .animate3{
- animation: carAni3 ease-in-out 8s infinite;
- @keyframes carAni3 {
- 0%{left:5%;}
- 100%{left:90%}
- }
- }
- .animate4{
- animation: carAni4 linear 10s infinite;
- @keyframes carAni4 {
- 0%{left:5%;}
- 100%{left:90%}
- }
- }
- .animate3{
- animation: carAni5 linear 20s infinite;
- @keyframes carAni5 {
- 0%{left:0%;}
- 100%{left:93%}
- }
- }
- .suggest{
- position:absolute;
- z-index: 20;
- right:155PX;
- top:-10PX;
- width:421PX;
- height:251PX;
- background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
- background-size: 100% 100%;
- font-size:14PX;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #C1E8FF;
- line-height: 24PX;
- .autoCont{
- width:401PX;
- height:231PX;
- margin:10PX 0 0 10PX;
- padding:10PX;
- overflow: auto;
- }
- .iconSug{
- cursor: pointer;
- position:absolute;
- top:20PX;
- right:20PX;
- width: 25PX;
- height: 25PX;
- svg{
- width: 25PX;
- height: 25PX;
- }
- }
- .center{
- // margin:10PX 30px 10PX 0px;
- text-align: center;
- font-size:15PX;
- color:#fff;
- }
- .cont{
- padding-bottom:5PX;
- margin-bottom:5PX;
- border-bottom: 1px dashed #6A8CAE;
- .numBg{
- width:24PX;
- height: 18PX;
- line-height: 18PX;
- display: inline-block;
- background: url('@/assets/newImgs/pumpGY/numBg.png') no-repeat;
- background-size: 100% 100%;
- text-align: center;
- color: #FFD200;
- }
- }
- span{
- font-weight: bold;
- }
- }
- .waterFlow{
- position:absolute;
- z-index: 10;
- bottom:60PX;
- }
-
- .tipsM{
- position:absolute;
- z-index: 120;
- background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
- background-size: 100% 100%;
- padding:10PX;
- color:#C1E8FF;
- font-size:16PX;
- width:230PX;
- span{
- width:100%;
- display: inline-block;
- margin-bottom:3px;
- &:nth-of-type(1){
- font-weight: bold;
- }
- }
- }
- .realData{
- color:#fff;
- p{
- position:absolute;
- z-index: 10;
- width:160PX;
- height: 26PX;
- line-height: 26PX;
- text-align: center;
- background: #004DE0;
- border-radius: 13PX;
- font-size:16PX;
- }
-
- }
-
- }
- </style>