Newer
Older
urbanLifeline_YanAn / src / views / oneMap / floodPrevention / PipeDetail.vue
@zhangqy zhangqy on 3 Oct 6 KB first commit
  1. <template>
  2. <!-- 管网监测点详情 -->
  3. <div class="pipeMonitorDetail">
  4. <el-tabs v-model="tabActive" @tab-change="changeTab">
  5. <el-tab-pane label="管网剖面" name="1"></el-tab-pane>
  6. <el-tab-pane label="监测数据" name="2"></el-tab-pane>
  7. </el-tabs>
  8. <div class="content">
  9. <!-- 管网剖面 -->
  10. <div class="pipePou flex" v-if="tabActive == 1">
  11. <div class="leftP">
  12. <!-- 井深 -->
  13. <div class="part partJ">井深:5.8米</div>
  14.  
  15. <!-- 水高度 -->
  16. <img src="@/assets/images/fhpl/pipeW.png" alt="" class="water" style="height: 80px" />
  17. <div class="part partW">水深:3.5米</div>
  18.  
  19. <!-- 瞬时流量 -->
  20. <div class="part partL" style="width: 180px">瞬时流量:0.06m³/s</div>
  21.  
  22. <!-- 设备 -->
  23. <img src="@/assets/images/fhpl/equip.png" alt="" class="equipA" />
  24. </div>
  25. <div class="rightP">
  26. <div class="title">基本信息</div>
  27. <div class="part flex">
  28. <div class="biaoti">所在位置:</div>
  29. <div class="cont">东关大街与长青路交叉口</div>
  30. </div>
  31. <div class="part flex">
  32. <div class="biaoti">管网流向:</div>
  33. <div class="cont">由南到北</div>
  34. </div>
  35. <div class="part flex">
  36. <div class="biaoti">井盖材质:</div>
  37. <div class="cont">铸铁</div>
  38. </div>
  39. <div class="part flex">
  40. <div class="biaoti">管径:</div>
  41. <div class="cont">800mm</div>
  42. </div>
  43. <div class="part flex">
  44. <div class="biaoti">安装高度:</div>
  45. <div class="cont">4.80米</div>
  46. </div>
  47. <div class="part flex">
  48. <div class="biaoti">井深:</div>
  49. <div class="cont">5.80米</div>
  50. </div>
  51.  
  52. <div class="title" style="margin-top: 50px">实时数据</div>
  53. <div class="part flex">
  54. <div class="biaoti">水深:</div>
  55. <div class="cont">5.50米</div>
  56. </div>
  57. <div class="part flex">
  58. <div class="biaoti">温度:</div>
  59. <div class="cont">30.8℃</div>
  60. </div>
  61. <div class="part flex">
  62. <div class="biaoti">瞬时流量:</div>
  63. <div class="cont">0.06m³/s</div>
  64. </div>
  65. <div class="part flex">
  66. <div class="biaoti">SS:</div>
  67. <div class="cont">38.6mg/L</div>
  68. </div>
  69. </div>
  70. </div>
  71. <!-- 监测数据 -->
  72. <div class="pipeMonitor" v-if="tabActive == 2">
  73. <div class="selectToolList">
  74. <el-date-picker
  75. v-model="pipeTime"
  76. type="daterange"
  77. start-placeholder="开始时间"
  78. end-placeholder="结束时间"
  79. style="width: 240px"
  80. />
  81. <el-button type="primary" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
  82. </div>
  83. <div id="monitorPipe"></div>
  84. </div>
  85. </div>
  86. </div>
  87. </template>
  88.  
  89. <script setup>
  90. import chartOption from '@/views/oneMap/Echarts/pieChart_1.js';
  91. import * as echarts from 'echarts';
  92.  
  93. const { proxy } = getCurrentInstance();
  94. const tabActive = ref('1');
  95. const pipeTime = ref([proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
  96.  
  97. // tab切换
  98. function changeTab(val) {
  99. if (val == 2) {
  100. setTimeout(() => {
  101. initPipeChart();
  102. });
  103. }
  104. }
  105. // 监测数据日期搜索
  106. function changePipeDate() {
  107. initPipeChart();
  108. }
  109.  
  110. //管网监测趋势图
  111. let pipeChart = null;
  112. const initPipeChart = () => {
  113. pipeChart && pipeChart.dispose();
  114. pipeChart = echarts.init(document.getElementById('monitorPipe'));
  115. chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水位(m)';
  116. chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
  117. chartOption.floodOneMapPipeSupervise.legend.data = ['水位', '雨量'];
  118. chartOption.floodOneMapPipeSupervise.series[0].name = '水位';
  119. chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
  120. chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
  121. chartOption.floodOneMapPipeSupervise.series[1].barWidth = '10';
  122. chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = true; //翻转
  123. chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
  124. pipeChart.clear();
  125. pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
  126. };
  127.  
  128. onMounted(() => {});
  129. </script>
  130.  
  131. <style lang="scss" scoped>
  132. // prettier-ignore
  133. .pipeMonitorDetail {
  134. width: 100%;
  135. .content {
  136. height: 600PX;
  137. .pipePou{
  138. .leftP{
  139. width:530PX;
  140. height: 570PX;
  141. background: url('@/assets/images/fhpl/pipe.gif') no-repeat;
  142. background-size:100% 100%;
  143. position:relative;
  144. .water{
  145. position:absolute;
  146. bottom:50PX;
  147. left:0px;
  148. z-index: 10;
  149. width:530PX;
  150. height: 128PX;
  151. }
  152. .part{
  153. background: #0874EF;
  154. border-radius: 12px;
  155. width:110px;
  156. height: 26px;
  157. line-height: 26px;
  158. font-family: Source Han Sans CN;
  159. font-weight: 400;
  160. font-size: 16px;
  161. color: #FFFFFF;
  162. text-align: center
  163. }
  164. .partW{
  165. position:absolute;
  166. bottom:190PX;
  167. left:60px;
  168. z-index: 10;
  169. }
  170. .partJ{
  171. position:absolute;
  172. top:175PX;
  173. right:105px;
  174. z-index: 10;
  175. }
  176. .partL{
  177. position:absolute;
  178. bottom:190PX;
  179. right:20px;
  180. z-index: 10;
  181. }
  182. .equipA{
  183. position:absolute;
  184. bottom:60PX;
  185. left:30px;
  186. z-index: 15;
  187. width:470PX;
  188. height: 339PX;
  189. }
  190. }
  191. .rightP{
  192. margin-left:30px;
  193. color: #fff;
  194. .title{
  195. border-left:5px solid #67BCFA;
  196. padding-left:8px;
  197. font-size: 16px;
  198. font-weight: 600;
  199. margin-top:20px;
  200. }
  201. .part{
  202. margin:15px 0px 10px 10px;
  203. color: #C8DBE0;
  204. font-size: 15px;
  205. .biaoti{
  206. width:100px;
  207. }
  208. }
  209. }
  210. }
  211. #monitorPipe {
  212. width: 100%;
  213. height: 520px;
  214. margin-top: 10px;
  215. }
  216. }
  217. }
  218. </style>