Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / commonPopupDM.vue
@zhangdeliang zhangdeliang on 23 May 5 KB 初始化项目
  1. <template>
  2. <!-- 断面监测弹窗 -->
  3. <div class="dmPopup" v-show="allData.popupShow">
  4. <div class="title">
  5. <div class="titleName">{{ allData.dataList['名称'] }}</div>
  6. <div class="closePopup">
  7. <el-icon :size="18" @click="closePopup"><Close /></el-icon>
  8. </div>
  9. </div>
  10. <div class="tabChangeList">
  11. <div
  12. :class="['tabChange', allData.currentIndex === item.index ? 'active' : '']"
  13. v-for="item in allData.tabList"
  14. :key="item.index"
  15. @click="tabChangeClick(item.index)"
  16. >
  17. {{ item.name }}
  18. </div>
  19. </div>
  20. <div class="dividerLine"></div>
  21. <div class="basicInfo" v-if="allData.currentIndex == 1">
  22. <div class="basicContent">
  23. <img :src="getImageUrl('tiaoxuchi.png', 'newImgs/paishuiImgs')" />
  24. <div class="contentName">
  25. <div class="contentKey" v-for="(val, key, index) in allData.dataList">{{ key }}</div>
  26. </div>
  27. <div class="contentInfo">
  28. <div class="contentValue" v-for="(val, key, index) in allData.dataList">{{ val }}</div>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="trend" v-if="allData.currentIndex == 2">
  33. <el-date-picker
  34. v-model="allData.dataTime1"
  35. type="datetimerange"
  36. start-placeholder="开始时间"
  37. end-placeholder="结束时间"
  38. format="YYYY-MM-DD HH:mm:ss"
  39. date-format="YYYY/MM/DD ddd"
  40. time-format="A hh:mm:ss"
  41. size="small"
  42. style="width: 340px; margin-left: 10px"
  43. />
  44. <div id="chartPopupDM" style="height: 200px"></div>
  45. <el-table :data="tableData" stripe style="margin: 10px; width: 95%; cursor: pointer" max-height="200;">
  46. <el-table-column prop="code" label="时间" width="100" />
  47. <el-table-column prop="size" label="监测水位" width="140" />
  48. <el-table-column prop="qdCode" label="警戒水位" width="140" />
  49. <el-table-column prop="zdCode" label="常水位" width="140" />
  50. <el-table-column prop="qdElevation" label="超设防水位" />
  51. </el-table>
  52. </div>
  53. </div>
  54. </template>
  55.  
  56. <script setup name="commonDMPopup">
  57. import bus from '@/bus';
  58. import { nextTick } from 'vue';
  59. import chartOption from '@/components/Echarts/pieChart_1.js';
  60. import * as echarts from 'echarts';
  61. const allData = reactive({
  62. popupShow: false,
  63. currentIndex: 1,
  64. dataTime1: null,
  65. popupType: '',
  66. tabList: [
  67. {
  68. index: 1,
  69. name: '基础信息',
  70. },
  71. {
  72. index: 2,
  73. name: '数据监测',
  74. },
  75. ],
  76. dataList: {},
  77. });
  78. const tableData = ref([
  79. {
  80. code: '2023-08-24 21:25:00',
  81. size: 0.024,
  82. qdCode: 0.023,
  83. zdCode: 0.48,
  84. qdElevation: 0.055,
  85. },
  86. {
  87. code: '2023-08-24 21:20:00',
  88. size: 0.024,
  89. qdCode: 0.023,
  90. zdCode: 0.48,
  91. qdElevation: 0.055,
  92. },
  93. {
  94. code: '2023-08-24 21:15:00',
  95. size: 0.024,
  96. qdCode: 0.023,
  97. zdCode: 0.48,
  98. qdElevation: 0.055,
  99. },
  100. ]);
  101. const tabChangeClick = value => {
  102. allData.currentIndex = value;
  103. if (allData.currentIndex == 2) {
  104. nextTick(() => {
  105. initEchartsPopup();
  106. });
  107. }
  108. };
  109. const closePopup = () => {
  110. allData.popupShow = false;
  111. };
  112. // 积水点势折线图
  113. let chartPopupDM = null;
  114. const initEchartsPopup = () => {
  115. if (!!chartPopupDM) chartPopupDM.dispose();
  116. chartPopupDM = echarts.init(document.getElementById('chartPopupDM'));
  117. chartPopupDM.clear();
  118. chartPopupDM.setOption(chartOption.popupTrendZS);
  119. };
  120.  
  121. onMounted(() => {
  122. bus.on('closeCommonPopup', closeCommonPopup => {
  123. allData.popupShow = closeCommonPopup;
  124. });
  125. bus.on('popupDuanMianData', data => {
  126. allData.popupShow = data.popupShow;
  127. allData.dataList = data.popupInfo;
  128. allData.currentIndex == 1;
  129. });
  130. });
  131. onBeforeUnmount(() => {
  132. bus.off('popupDuanMianData');
  133. bus.off('closeCommonPopup');
  134. });
  135. </script>
  136. <style lang="scss">
  137. @import '@/assets/styles/variables.module.scss';
  138. .dmPopup {
  139. width: 550px;
  140. height: 350px;
  141. position: absolute;
  142. top: 10%;
  143. left: 25%;
  144. background: #00314e;
  145. border: 1px solid #094065;
  146. z-index: 115;
  147. .title {
  148. margin-top: 20px;
  149. display: flex;
  150. align-items: center;
  151. justify-content: space-between;
  152. .titleName {
  153. display: flex;
  154. align-items: center;
  155. height: 22px;
  156. font-size: 16px;
  157. font-family: PingFang SC;
  158. font-weight: 400;
  159. color: #ccf1ff;
  160. line-height: 22px;
  161. &:before {
  162. display: block;
  163. content: '';
  164. width: 3px;
  165. height: 16px;
  166. background: #00d1ff;
  167. margin-right: 10px;
  168. }
  169. }
  170. .closePopup {
  171. margin-right: 20px;
  172. height: 22px;
  173. cursor: pointer;
  174. }
  175. }
  176. .dividerLine {
  177. height: 2px;
  178. border: 1px;
  179. margin: 0px 0 10px 0px;
  180. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  181. }
  182.  
  183. .tabChangeList {
  184. display: flex;
  185. align-items: center;
  186. width: 300px;
  187. margin-left: 150px;
  188. justify-content: space-around;
  189. .tabChange {
  190. height: 22px;
  191. font-family: PingFang SC;
  192. margin: 10px;
  193. font-size: 13px;
  194. font-weight: 400;
  195. line-height: 22px;
  196. text-align: center;
  197. cursor: pointer;
  198. &:hover {
  199. color: #00d1ff;
  200. }
  201. }
  202. .active {
  203. color: #00d1ff;
  204. }
  205. }
  206.  
  207. .basicContent {
  208. display: flex;
  209. align-items: center;
  210. .contentName {
  211. margin-left: 50px;
  212. .contentKey {
  213. margin: 3px;
  214. height: 20px;
  215. font-size: 14px;
  216. font-weight: 400;
  217. line-height: 20px;
  218. color: #00d1ff;
  219. }
  220. }
  221. .contentValue {
  222. margin: 3px 3px 3px 15px;
  223. height: 20px;
  224. font-size: 14px;
  225. font-weight: 400;
  226. line-height: 20px;
  227. color: #00d1ff;
  228. }
  229. }
  230. .trend {
  231. height: 220px;
  232. overflow: auto;
  233. }
  234. }
  235. </style>