- <template>
- <!-- 断面监测弹窗 -->
- <div class="dmPopup" 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="tabChangeList">
- <div
- :class="['tabChange', allData.currentIndex === item.index ? 'active' : '']"
- v-for="item in allData.tabList"
- :key="item.index"
- @click="tabChangeClick(item.index)"
- >
- {{ item.name }}
- </div>
- </div>
- <div class="dividerLine"></div>
- <div class="basicInfo" v-if="allData.currentIndex == 1">
- <div class="basicContent">
- <img :src="getImageUrl('tiaoxuchi.png', 'newImgs/paishuiImgs')" />
- <div class="contentName">
- <div class="contentKey" v-for="(val, key, index) in allData.dataList">{{ key }}</div>
- </div>
- <div class="contentInfo">
- <div class="contentValue" v-for="(val, key, index) in allData.dataList">{{ val }}</div>
- </div>
- </div>
- </div>
- <div class="trend" v-if="allData.currentIndex == 2">
- <el-date-picker
- v-model="allData.dataTime1"
- type="datetimerange"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- format="YYYY-MM-DD HH:mm:ss"
- date-format="YYYY/MM/DD ddd"
- time-format="A hh:mm:ss"
- size="small"
- style="width: 340px; margin-left: 10px"
- />
- <div id="chartPopupDM" style="height: 200px"></div>
- <el-table :data="tableData" stripe style="margin: 10px; width: 95%; cursor: pointer" max-height="200;">
- <el-table-column prop="code" label="时间" width="100" />
- <el-table-column prop="size" label="监测水位" width="140" />
- <el-table-column prop="qdCode" label="警戒水位" width="140" />
- <el-table-column prop="zdCode" label="常水位" width="140" />
- <el-table-column prop="qdElevation" label="超设防水位" />
- </el-table>
- </div>
- </div>
- </template>
-
- <script setup name="commonDMPopup">
- 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,
- currentIndex: 1,
- dataTime1: null,
- popupType: '',
- tabList: [
- {
- index: 1,
- name: '基础信息',
- },
- {
- index: 2,
- name: '数据监测',
- },
- ],
- dataList: {},
- });
- const tableData = ref([
- {
- code: '2023-08-24 21:25:00',
- size: 0.024,
- qdCode: 0.023,
- zdCode: 0.48,
- qdElevation: 0.055,
- },
- {
- code: '2023-08-24 21:20:00',
- size: 0.024,
- qdCode: 0.023,
- zdCode: 0.48,
- qdElevation: 0.055,
- },
- {
- code: '2023-08-24 21:15:00',
- size: 0.024,
- qdCode: 0.023,
- zdCode: 0.48,
- qdElevation: 0.055,
- },
- ]);
- const tabChangeClick = value => {
- allData.currentIndex = value;
- if (allData.currentIndex == 2) {
- nextTick(() => {
- initEchartsPopup();
- });
- }
- };
- const closePopup = () => {
- allData.popupShow = false;
- };
- // 积水点势折线图
- let chartPopupDM = null;
- const initEchartsPopup = () => {
- if (!!chartPopupDM) chartPopupDM.dispose();
- chartPopupDM = echarts.init(document.getElementById('chartPopupDM'));
- chartPopupDM.clear();
- chartPopupDM.setOption(chartOption.popupTrendZS);
- };
-
- onMounted(() => {
- bus.on('closeCommonPopup', closeCommonPopup => {
- allData.popupShow = closeCommonPopup;
- });
- bus.on('popupDuanMianData', data => {
- allData.popupShow = data.popupShow;
- allData.dataList = data.popupInfo;
- allData.currentIndex == 1;
- });
- });
- onBeforeUnmount(() => {
- bus.off('popupDuanMianData');
- bus.off('closeCommonPopup');
- });
- </script>
- <style lang="scss">
- @import '@/assets/styles/variables.module.scss';
- .dmPopup {
- width: 550px;
- height: 350px;
- position: absolute;
- top: 10%;
- left: 25%;
- background: #00314e;
- border: 1px solid #094065;
- z-index: 115;
- .title {
- margin-top: 20px;
- 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%);
- }
-
- .tabChangeList {
- display: flex;
- align-items: center;
- width: 300px;
- margin-left: 150px;
- justify-content: space-around;
- .tabChange {
- height: 22px;
- font-family: PingFang SC;
- margin: 10px;
- font-size: 13px;
- font-weight: 400;
- line-height: 22px;
- text-align: center;
- cursor: pointer;
- &:hover {
- color: #00d1ff;
- }
- }
- .active {
- color: #00d1ff;
- }
- }
-
- .basicContent {
- display: flex;
- align-items: center;
- .contentName {
- margin-left: 50px;
- .contentKey {
- margin: 3px;
- height: 20px;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: #00d1ff;
- }
- }
- .contentValue {
- margin: 3px 3px 3px 15px;
- height: 20px;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: #00d1ff;
- }
- }
- .trend {
- height: 220px;
- overflow: auto;
- }
- }
- </style>