- <template>
- <!-- 断面监测弹窗 -->
- <div class="waterLeverEchart" v-show="allData.popupShow">
- <div class="title">
- <div class="titleName">{{ allData.dataList['名称'] }}</div>
- <div class="closePopup">
- <el-icon :size="18" @click="closePopup"><Close /></el-icon>
- </div>
- </div>
- <div class="dividerLine"></div>
- <div id="chartWaterLevel" style="height: 200px"></div>
- </div>
- </template>
-
- <script setup name="waterLeverEchart">
- import bus from '@/bus';
- import { nextTick } from 'vue';
- import chartOption from '@/components/Echarts/pieChart_1.js';
- import * as echarts from 'echarts';
- const allData = reactive({
- popupShow: false,
- dataList: {},
- });
-
- const closePopup = () => {
- allData.popupShow = false;
- };
- // 积水点势折线图
- let chartPopupWaterLevel = null;
- const initEchartsWater = () => {
- if (!!chartPopupWaterLevel) chartPopupWaterLevel.dispose();
- chartPopupWaterLevel = echarts.init(document.getElementById('chartWaterLevel'));
- chartPopupWaterLevel.clear();
- chartPopupWaterLevel.setOption(chartOption.floodOneMapWaterLevel);
- };
-
- onMounted(() => {
- bus.on('closeCommonPopup', closeCommonPopup => {
- allData.popupShow = closeCommonPopup;
- });
- bus.on('popupDuanMianData', data => {
- console.log(data);
- allData.popupShow = data.popupShow;
- let newName = `${data.popupInfo['名称'].split('断')[0]}沿程水位`;
- allData.dataList = data.popupInfo;
- allData.dataList['名称'] = newName;
- nextTick(() => {
- initEchartsWater();
- });
- });
- });
- onBeforeUnmount(() => {
- bus.off('popupDuanMianData');
- bus.off('closeCommonPopup');
- });
- </script>
- <style lang="scss">
- .waterLeverEchart {
- width: 850px;
- height: 250px;
- position: absolute;
- bottom: 8%;
- left: 16%;
- background: #00314e;
- border: 1px solid #094065;
- z-index: 115;
- .title {
- margin-top: 10px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .titleName {
- display: flex;
- align-items: center;
- height: 22px;
- font-size: 16px;
- font-family: PingFang SC;
- font-weight: 400;
- color: #ccf1ff;
- line-height: 22px;
- &:before {
- display: block;
- content: '';
- width: 3px;
- height: 16px;
- background: #00d1ff;
- margin-right: 10px;
- }
- }
- .closePopup {
- margin-right: 20px;
- height: 22px;
- cursor: pointer;
- }
- }
- .dividerLine {
- height: 2px;
- border: 1px;
- margin: 0px 0 10px 0px;
- background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
- }
- }
- </style>