Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / waterLeverAlongRiner.vue
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. <template>
  2. <!-- 断面监测弹窗 -->
  3. <div class="waterLeverEchart" 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="dividerLine"></div>
  11. <div id="chartWaterLevel" style="height: 200px"></div>
  12. </div>
  13. </template>
  14.  
  15. <script setup name="waterLeverEchart">
  16. import bus from '@/bus';
  17. import { nextTick } from 'vue';
  18. import chartOption from '@/components/Echarts/pieChart_1.js';
  19. import * as echarts from 'echarts';
  20. const allData = reactive({
  21. popupShow: false,
  22. dataList: {},
  23. });
  24.  
  25. const closePopup = () => {
  26. allData.popupShow = false;
  27. };
  28. // 积水点势折线图
  29. let chartPopupWaterLevel = null;
  30. const initEchartsWater = () => {
  31. if (!!chartPopupWaterLevel) chartPopupWaterLevel.dispose();
  32. chartPopupWaterLevel = echarts.init(document.getElementById('chartWaterLevel'));
  33. chartPopupWaterLevel.clear();
  34. chartPopupWaterLevel.setOption(chartOption.floodOneMapWaterLevel);
  35. };
  36.  
  37. onMounted(() => {
  38. bus.on('closeCommonPopup', closeCommonPopup => {
  39. allData.popupShow = closeCommonPopup;
  40. });
  41. bus.on('popupDuanMianData', data => {
  42. console.log(data);
  43. allData.popupShow = data.popupShow;
  44. let newName = `${data.popupInfo['名称'].split('断')[0]}沿程水位`;
  45. allData.dataList = data.popupInfo;
  46. allData.dataList['名称'] = newName;
  47. nextTick(() => {
  48. initEchartsWater();
  49. });
  50. });
  51. });
  52. onBeforeUnmount(() => {
  53. bus.off('popupDuanMianData');
  54. bus.off('closeCommonPopup');
  55. });
  56. </script>
  57. <style lang="scss">
  58. .waterLeverEchart {
  59. width: 850px;
  60. height: 250px;
  61. position: absolute;
  62. bottom: 8%;
  63. left: 16%;
  64. background: #00314e;
  65. border: 1px solid #094065;
  66. z-index: 115;
  67. .title {
  68. margin-top: 10px;
  69. display: flex;
  70. align-items: center;
  71. justify-content: space-between;
  72. .titleName {
  73. display: flex;
  74. align-items: center;
  75. height: 22px;
  76. font-size: 16px;
  77. font-family: PingFang SC;
  78. font-weight: 400;
  79. color: #ccf1ff;
  80. line-height: 22px;
  81. &:before {
  82. display: block;
  83. content: '';
  84. width: 3px;
  85. height: 16px;
  86. background: #00d1ff;
  87. margin-right: 10px;
  88. }
  89. }
  90. .closePopup {
  91. margin-right: 20px;
  92. height: 22px;
  93. cursor: pointer;
  94. }
  95. }
  96. .dividerLine {
  97. height: 2px;
  98. border: 1px;
  99. margin: 0px 0 10px 0px;
  100. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  101. }
  102. }
  103. </style>