Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / yuliangjiance.vue
@zhangqy zhangqy on 29 Nov 5 KB first commit
  1. <template>
  2. <div id="yuliangjiance">
  3. <div class="topdate">
  4. <!-- 日期和时间选择: -->
  5. <DateSelect
  6. style="width: 320px"
  7. v-model:dateTime="dateTimearr"
  8. :format="'YYYY-MM-DD HH:mm'"
  9. :valueFormat="'YYYY-MM-DD HH:mm'"
  10. @change="changeTime"
  11. />
  12. </div>
  13. <div class="toptable">
  14. <div class="nametitle">降雨统计信息</div>
  15. <div style="display: flex; flex-wrap: wrap">
  16. <div class="tablebox">
  17. <div class="label">降雨开始时间到结束时间</div>
  18. <div class="value">
  19. {{ parseTime(dateTimearr[0], '{y}-{m}-{d} {h}:{i}') }}
  20. {{ parseTime(dateTimearr[1], '{y}-{m}-{d} {h}:{i}') }}
  21. </div>
  22. </div>
  23. <div class="tablebox two">
  24. <div class="labeltwo">累计降雨量</div>
  25. <div class="valuetwo">{{ getDetail.rainTotal }}</div>
  26. </div>
  27. <div class="tablebox two">
  28. <div class="labeltwo">降雨时长</div>
  29. <div class="valuetwo">{{ getDetail.rainHour }}</div>
  30. </div>
  31. <div class="tablebox two">
  32. <div class="labeltwo">最大小时雨强</div>
  33. <div class="valuetwo">{{ getDetail.maxRain }}</div>
  34. </div>
  35. <div class="tablebox two">
  36. <div class="labeltwo">最大小时雨强时间</div>
  37. <div class="valuetwo">{{ getDetail.maxRainTime }}</div>
  38. </div>
  39. </div>
  40. </div>
  41. <el-divider />
  42. <div class="bottomecharts">
  43. <div class="nametitle">降雨过程线</div>
  44. <!-- <div class="posiechart">
  45. <span v-if="dateTimearr">
  46. {{ parseTime(dateTimearr[0], '{y}-{m}-{d} {h}:{i}') }}
  47. {{ parseTime(dateTimearr[1], '{y}-{m}-{d} {h}:{i}') }}
  48. </span>
  49. {{ echartstitle }} 雨量
  50. </div> -->
  51. <div class="echartbody" v-if="showecharts">
  52. <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh"></RainfallEcharts>
  53. </div>
  54. </div>
  55. </div>
  56. </template>
  57.  
  58. <script setup name="yuliangjiance">
  59. import RainfallEcharts from '@/views/pictureOnMap/page/components/DialogTabs/component/RainfallEcharts.vue';
  60. const { proxy } = getCurrentInstance();
  61.  
  62. import { GettHourDataechart, getRainDetail } from '@/api/MonitorAssetsOnMap';
  63.  
  64. const props = defineProps({
  65. // 数据id
  66. dataID: {
  67. type: String,
  68. },
  69. dataCode: {
  70. type: String,
  71. },
  72. // 默认打开tabs的key
  73. RefreshName: {
  74. type: String,
  75. },
  76. tabsType: {
  77. type: String,
  78. },
  79. typeName: {
  80. type: String,
  81. },
  82. });
  83.  
  84. const echartstitle = ref('');
  85. const getDetail = ref({});
  86. const showecharts = ref(false);
  87. const dateTimearr = ref([proxy.moment().format('YYYY-MM-DD 00:00'), proxy.moment().format('YYYY-MM-DD HH:mm')]);
  88. const chartData2 = ref({
  89. // xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  90. // yAxis: [28.5, 43.8, 68.3, 78.5, 116.6, 149.6, 188.8, 171.2, 90.3, 61, 47.7, 22.7],
  91. // yAxis2: [7, 9, 10, 9, 11, 10, 12, 12, 10, 9, 8, 6],
  92. xAxis: [],
  93. yAxis: [],
  94. yAxis2: [],
  95. refresh: 1,
  96. });
  97.  
  98. // 获得头部详情
  99. function getList() {
  100. let data = {
  101. stCode: props.dataID,
  102. };
  103. if (dateTimearr.value) {
  104. data.start = dateTimearr.value[0];
  105. data.end = dateTimearr.value[1];
  106. } else {
  107. data.start = null;
  108. data.end = null;
  109. }
  110.  
  111. getRainDetail(data).then(response => {
  112. getDetail.value = response.data;
  113. });
  114. }
  115.  
  116. function changeTime() {
  117. getList();
  118. Getecharts();
  119. }
  120.  
  121. // 获取降雨过程线echart
  122. function Getecharts() {
  123. chartData2.value = {
  124. xAxis: [],
  125. yAxis: [],
  126. yAxis2: [],
  127. };
  128. chartData2.value.refresh = Math.random();
  129.  
  130. let data = {
  131. stCode: props.dataID,
  132. };
  133. if (dateTimearr.value) {
  134. data.start = dateTimearr.value[0];
  135. data.end = dateTimearr.value[1];
  136. } else {
  137. data.start = null;
  138. data.end = null;
  139. }
  140.  
  141. GettHourDataechart(data).then(res => {
  142. console.log(res);
  143.  
  144. chartData2.value = {
  145. xAxis: res.data.date,
  146. yAxis: res.data.rainData,
  147. yAxis2: res.data.totalRainData,
  148. };
  149.  
  150. chartData2.value.refresh = Math.random();
  151. });
  152. }
  153.  
  154. onMounted(() => {
  155. changeTime();
  156. console.log('chartInfo2', props, chartData2.value);
  157. setTimeout(() => {
  158. showecharts.value = true;
  159. chartData2.value.refresh = Math.random();
  160. }, 100);
  161. });
  162. </script>
  163.  
  164. <style lang="scss" scoped>
  165. @import '@/assets/styles/mapcss.scss';
  166.  
  167. #yuliangjiance {
  168. width: 100%;
  169. height: 100%;
  170. color: #ccefff;
  171.  
  172. .topdate {
  173. height: 32px;
  174. padding: 0 10px;
  175. text-align: right;
  176. }
  177.  
  178. .toptable {
  179. height: 100px;
  180. padding: 0 30px;
  181. color: #fff;
  182.  
  183. .tablebox {
  184. width: 100%;
  185. display: flex;
  186. margin-bottom: 4px;
  187. // justify-content: space-between;
  188.  
  189. .label,
  190. .value {
  191. width: 50%;
  192. text-align: left;
  193. }
  194.  
  195. .labeltwo {
  196. width: 40%;
  197. }
  198. .valuetwo {
  199. width: 60%;
  200. }
  201. }
  202.  
  203. .two {
  204. width: 50%;
  205. }
  206. }
  207.  
  208. .nametitle {
  209. height: 30px;
  210. text-align: center;
  211. font-weight: bold;
  212. font-size: 16px;
  213. padding: 0 10px;
  214. color: #fff;
  215. }
  216.  
  217. .bottomecharts {
  218. position: relative;
  219. height: calc(100% - 182px);
  220.  
  221. .posiechart {
  222. position: absolute;
  223. left: 50px;
  224. width: 100%;
  225. }
  226.  
  227. .echartbody {
  228. width: 100%;
  229. height: calc(100% - 30px);
  230. }
  231. }
  232. }
  233. </style>