雨情监测

src/components/Title/weatherTitle.vue

@@ -91,17 +91,17 @@ const devicesImg = {
 .content-box span:nth-child(1) {
   display: inline-block;
   position: absolute;
-  width: 50px;
+  // width: 50px;
   height: 50px;
-  top: -5px;
-  left: 0px;
+  // top: -5px;
+  // left: 0px;
   cursor: pointer;
 }
 
 .dro {
   position: absolute;
-  right: 10px;
-  top: 0;
+  right: 20px;
+  top: 16px;
 }
 </style>
 <style lang="less">

src/views/hydrology/leftPage.vue

@@ -6,13 +6,15 @@
   }"> -->
   <div class="xtjc-left-side">
     <!-- 雨情监测 -->
-    <weatherTitle
-  /></div>
+    <!-- <weatherTitle -->
+     <rainCondition />
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import weatherTitle from './components/rainCondition.vue';
+import rainCondition from '../weatherHome/components/rainCondition.vue';
 import { useDebounceFn } from '@vueuse/core';
 import eventBus from '/@/utils/eventBus';
 let transformNum = ref(0.8)

src/views/weatherHome/components/rainCondition.vue

@@ -1,25 +1,17 @@
 <template>
   <div class="main">
     <div class="main_in">
-      <weatherTitle
-        :title="'雨情信息'"
-        :isSelect="true"
-        :keywords="keywords"
-        fnName="rainConditionBus"
-        refreshName="rainRefreshName"
-        :selectList="[
+      <weatherTitle :title="'雨情信息'" :isSelect="true" :keywords="keywords" fnName="rainConditionBus"
+        refreshName="rainRefreshName" :selectList="[
           { name: '今日', value: 0 },
           { name: '昨日', value: 'yesterday' },
-          // { name: '近3小时', value: 3 },
-          // { name: '近6小时', value: 6 },
-          // { name: '近12小时', value: 12 },
-          // { name: '近24小时', value: 24 },
-          // { name: '近48小时', value: 48 },
-        ]"
-      />
+        ]" />
       <div class="height-1">
         <div class="main-title">
-          <div> 累积降雨量统计 </div>
+          <div>
+            <img src="/src/assets/newDp/img25.png">
+            累积降雨量统计
+          </div>
         </div>
         <div v-show="isSwitch">
           <div class="chart-box">
@@ -71,13 +63,10 @@
                   </a-popover>
                 </div>
                 <div style="width: 60%">
-                  <div
-                    :style="{
-                      width: (item.rain / rainData.activeRainWidth) * 100 + '%',
-                      background: `linear-gradient(-90deg, ${rainData.activeRainColor}, ${rainData.activeRainColorRgba})`,
-                    }"
-                    class="columnar"
-                  ></div>
+                  <div :style="{
+                    width: (item.rain / rainData.activeRainWidth) * 100 + '%',
+                    background: `linear-gradient(-90deg, ${rainData.activeRainColor}, ${rainData.activeRainColorRgba})`,
+                  }" class="columnar"></div>
                 </div>
                 <div style="width: 16%; text-align: center"> {{ item.rain }}mm </div>
               </div>
@@ -88,15 +77,11 @@
           </div>
         </div>
         <div class="main-title">
-          <div> 分区降雨量统计 </div>
+          <div> <img src="/src/assets/newDp/img25.png">分区降雨量统计 </div>
         </div>
         <div v-show="isSwitch2">
-          <rpList
-            :maxBox="rainData.activeRainmax"
-            :dataObj="rainData.rain.arel_rain"
-            @subIsSwitch="tabSwitch2"
-            @activeRainfallData="activeRainfallData"
-          />
+          <rpList :maxBox="rainData.activeRainmax" :dataObj="rainData.rain.arel_rain" @subIsSwitch="tabSwitch2"
+            @activeRainfallData="activeRainfallData" />
         </div>
         <div v-show="!isSwitch2">
           <div class="qx-table qx-table2">
@@ -115,7 +100,9 @@
                   </a-popover>
                 </div>
                 <div style="width: 56%">
-                  <div :style="{ width: ((item.rain / rainData.rainfallMax) * 100?(item.rain / rainData.rainfallMax) * 100:0) + '%' }" class="columnar columnar-color"></div>
+                  <div
+                    :style="{ width: ((item.rain / rainData.rainfallMax) * 100 ? (item.rain / rainData.rainfallMax) * 100 : 0) + '%' }"
+                    class="columnar columnar-color"></div>
                 </div>
                 <div style="width: 20%; text-align: center">
                   <span v-if="item.rain != 0">{{ item.rain }}mm</span>
@@ -168,14 +155,14 @@ function echarts1() {
     title: [
       {
         text: rainData.rain.rain_st_num, //主标题
-        left: '38%', //标题的位置 默认是left，其余还有center、right属性
+        left: 'center', //标题的位置 默认是left，其余还有center、right属性
         top: '30%',
         textStyle: {
-          color: '#287EFF',
           fontSize: 34,
-          fontWeight: 'normal',
-          fontFamily: 'AgencyFB',
+          fontWeight: '400',
+          color: '#fff'
         },
+        
       },
       {
         subtext: '降雨站点', //副标题
@@ -183,7 +170,7 @@ function echarts1() {
         left: '30%', //标题的位置 默认是left，其余还有center、right属性
         top: '40%',
         subtextStyle: {
-          color: '#85C4ED',
+          color: '#fff',
           fontSize: 14,
           fontWeight: 'normal',
           textAlign: 'center',
@@ -199,7 +186,7 @@ function echarts1() {
       {
         name: '累积降雨量统计图',
         type: 'pie',
-        radius: ['80%', '90%'],
+        radius: ['70%', '90%'],
         label: {
           show: false,
           position: 'center',
@@ -211,6 +198,9 @@ function echarts1() {
             color: '#fff',
           },
         },
+        itemStyle: {
+          borderRadius: 6
+        },
         data: [
           {
             value: rainData.rain.cum_rain.r_light.length,
@@ -382,120 +372,149 @@ onMounted(async () => {
   margin-top: 10px;
   box-sizing: border-box;
   padding: 2px;
-  border-radius: 0px 30px 0px 30px;
-  background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
+  //border-radius: 0px 30px 0px 30px;
+  //background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
 }
+
 .main_in {
   width: 100%;
   height: 100%;
   border-radius: 0px 30px 0px 30px;
-  background: rgba(6, 37, 70, 0.9);
+  //background: rgba(6, 37, 70, 0.9);
 }
+
 .main-title {
   display: flex;
   justify-content: space-between;
   padding: 6px 20px;
-  color: #dffeff;
+  font-weight: bold;
   font-size: 16px;
-  background: linear-gradient(90deg, rgba(40, 126, 255, 0.16) 0%, rgba(40, 126, 255, 0) 100%);
-  margin-left: 8px;
+  color: #FFBB29;
+
+  img {
+    display: inline-block;
+  }
 }
+
 .chart-box {
   margin: 0 10px;
   display: flex;
-  & > div:nth-child(1) {
+
+  &>div:nth-child(1) {
     width: 160px;
     height: 160px;
     margin-top: 10px;
   }
 }
+
 .rainfall-data {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
   margin-left: 10px;
-  & > div {
+
+  &>div {
     cursor: pointer;
     width: 50%;
     margin-top: 6px;
+
     div:nth-child(1) {
       border-left: 2px solid #00aaff;
       padding-left: 6px;
       font-size: 14px;
-      color: rgba(255, 255, 255, 0.6);
+      color: #fff;
     }
+
     div:nth-child(2) {
       border-left: 2px solid rgba(0, 170, 255, 0.3);
       padding-left: 6px;
-      font-size: 20px;
+      font-size: 18px;
       color: #fff;
+      line-height: 20px;
+
       span {
         font-size: 12px;
       }
     }
   }
-  & > div:nth-child(2) {
+
+  &>div:nth-child(2) {
     div:nth-child(1) {
       border-left: 2px solid #4fff2f;
     }
+
     div:nth-child(2) {
       border-left: 2px solid rgba(79, 255, 47, 0.3);
     }
   }
-  & > div:nth-child(3) {
+
+  &>div:nth-child(3) {
     div:nth-child(1) {
       border-left: 2px solid #ff9900;
     }
+
     div:nth-child(2) {
       border-left: 2px solid rgba(255, 153, 0, 0.3);
     }
   }
-  & > div:nth-child(4) {
+
+  &>div:nth-child(4) {
     div:nth-child(1) {
       border-left: 2px solid #00eaff;
     }
+
     div:nth-child(2) {
       border-left: 2px solid rgba(0, 234, 255, 0.3);
     }
   }
-  & > div:nth-child(5) {
+
+  &>div:nth-child(5) {
     div:nth-child(1) {
       border-left: 2px solid #a556e2;
     }
+
     div:nth-child(2) {
       border-left: 2px solid rgba(165, 86, 226, 0.3);
     }
   }
-  & > div:nth-child(6) {
+
+  &>div:nth-child(6) {
     div:nth-child(1) {
       border-left: 2px solid #f2ff00;
     }
+
     div:nth-child(2) {
       border-left: 2px solid rgba(242, 255, 0, 0.3);
     }
   }
 }
+
 // 表格数据
 
 .qx-table {
   height: 172px;
   padding-left: 20px;
+
   .qx-table-top {
     display: flex;
   }
+
   .qx-title {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.87);
     font-weight: 500;
     margin: 6px 0;
+
     span:nth-child(2) {
       margin-left: 10px;
     }
   }
+
   .qx-table-box {
     height: 150px;
     overflow: scroll;
-    & > div {
+
+    &>div {
       cursor: pointer;
       width: 100%;
       line-height: 33px;
@@ -507,14 +526,16 @@ onMounted(async () => {
       margin-top: 2px;
       padding-left: 14px;
       flex-wrap: wrap;
+
       // height: 20px;
       // border-image: linear-gradient(261deg, rgba(40, 165, 255, 0.9) 20%, rgba(100, 255, 255, 0) 40%, rgba(40, 126, 255, 0) 66%, #28a5ff 89%) 1;
-      & > div:nth-child(1) {
+      &>div:nth-child(1) {
         // padding-left: 10px;
         text-align: left !important;
         // height: 20px !important;
       }
-      & > div:nth-child(2) {
+
+      &>div:nth-child(2) {
         border: 1px solid #0097ae;
         height: 11px;
         // width: 100%;
@@ -523,25 +544,31 @@ onMounted(async () => {
         top: 10px;
       }
     }
-    & > div:nth-child(2n) {
+
+    &>div:nth-child(2n) {
       background-color: rgba(0, 170, 255, 0.08);
     }
-    & > div:hover {
+
+    &>div:hover {
       background: rgba(0, 238, 255, 0.15);
       color: #00d8f0;
     }
-    & > div:hover {
+
+    &>div:hover {
       padding-left: 10px;
       border-left: 4px solid #00eeff;
     }
+
     // .columnar {
     //   border: 1px solid #00eeff;
     // }
   }
+
   .deviceBack {
     -webkit-transform: rotateY(180deg);
     padding-left: 10px;
   }
+
   .columnar {
     border-radius: 4px;
     opacity: 1;
@@ -551,18 +578,22 @@ onMounted(async () => {
     position: relative;
     top: 0px;
   }
+
   .columnar-color {
     background: linear-gradient(90deg, #0097ae 0%, #06c7ed 100%);
     position: relative;
     top: 0px;
   }
 }
+
 .qx-table2 {
   height: 205px;
+
   .qx-table-box {
     height: 144x;
   }
 }
+
 .height-1 {
   // height: 53vh;
   // height: 580px;

src/views/weatherHome/components/rpList.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="rainfall-partition">
     <div v-for="(value, key) in dataObj" class="rp-list" @click="upSwitch(key, value)">
-      <div class="rp-title"> {{ key }} </div>
+      <div class="rp-title">
+        <div>
+          {{ key }}
+        </div>
+        <div><span v-if="value.rain * 1 !== 0">{{ value.rain }}mm</span><span v-else>暂无降雨</span></div>
+      </div>
       <div class="rp-box">
         <div>
-          <progressBar
-            :width="(value.rain / maxBox) * 100?(value.rain / maxBox) * 100:0"
-            :iconType="3"
+          <progressBar :width="(value.rain / maxBox) * 100 ? (value.rain / maxBox) * 100 : 0" :iconType="3"
             :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
-            :backgroundColorInner="'linear-gradient(270deg, #06C7ED 0%, rgba(55,145,255,0.76) 100%)'"
-          />
+            :backgroundColorInner="'linear-gradient(270deg, #06C7ED 0%, rgba(55,145,255,0.76) 100%)'" />
         </div>
-        <div
-          ><span v-if="value.rain*1 !== 0">{{ value.rain }}mm</span><span v-else>暂无降雨</span></div
-        >
+
       </div>
     </div>
   </div>
@@ -45,22 +45,30 @@ const props = defineProps({
   margin: 0 10px;
   padding-bottom: 5px
 }
+
 .rp-list {
   margin-top: 7px;
   cursor: pointer;
 }
+
 .rp-title {
   color: rgba(255, 255, 255, 0.87);
   font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
 }
+
 .rp-box {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-left: 10px;
+  color: #fff;
   div:nth-child(1) {
-    width: 280px;
+    width: 310px;
   }
+
   div:nth-child(2) {
     margin-top: -8px;
     color: #ffffff;