<template> <!-- 湖泊监测站详情弹窗 --> <div class="shuiweiModals"> <div class="hpjcz"> <n-tabs type="bar" v-model:value="value" @update:value="changeTab" animated> <n-tab-pane name="基本信息" tab="基本信息"> <div class="contLeft"> <!-- <div class="title">站点基本信息</div> --> <div class="part"> <n-space> <div class="infoContent flexs"> <div class="infoName">经度:</div> <div class="infoData">{{ datas.LGTD }}</div> </div> <div class="infoContent flexs"> <div class="infoName">纬度:</div> <div class="infoData">{{ datas.LTTD }}</div> </div> </n-space> <n-space> <div class="infoContent flexs"> <div class="infoName">测站编码:</div> <div class="infoData">{{ datas.STCD || '--' }}</div> </div> <div class="infoContent flexs"> <div class="infoName">测站类型:</div> <div class="infoData">泵站</div> </div> </n-space> <n-space> <div class="infoContent flexs"> <div class="infoName">控制水位(米):</div> <div class="infoData">{{ datas.FRZ || '--' }}</div> </div> </n-space> </div> </div> <div class="conttable"> <n-data-table class="gqtables" :columns="columnsJ" :max-height="280" style="margin-top: 10px" striped :data="tableDataJ" :loading="tableLoadingJ" :bordered="false" :row-key="(row) => row.id" @row-click="handleRowClick" /> </div> <SHOne v-if="value == '基本信息'" /> </n-tab-pane> <n-tab-pane name="视频监控" tab="视频监控"> <VideoNow v-if="hkvideo" /> </n-tab-pane> </n-tabs> </div> </div> </template> <script> import VideoNow from './Bzhk.vue'; import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue'; import { formatDate } from '@/utils/util'; import { lyInfoStationDetail, lyInfoSwlljcData, pumplistdata } from '@/services'; import * as echarts from 'echarts'; import moment from 'moment'; export default { name: 'shuiweiModals', components: { VideoNow, }, props: { valueModalbz: Object, }, setup(props) { const allData = reactive({ hkvideo: false, value: '基本信息', tabactives: '1', yinziValue: 'q', datas: [], datetime: '', columnsJ: [ { title: '序号', key: 'key', render: (_, index) => { return `${index + 1}`; }, }, { title: '监测时间', key: 'TM', width: '200', render(row) { return row.TM || '--'; }, }, { title: '抽排量', key: 'PMPQ', render(row) { return row.PMPQ || '--'; }, }, { title: '开机台数', key: 'OMCN', render(row) { return row.OMCN || '--'; }, }, { title: '起排水位', key: 'WRZ', render(row) { return row.WRZ || '--'; }, }, { title: '预排水位', key: 'GRZ', render(row) { return row.GRZ || '--'; }, }, ], tableDataJ: [], detailVal: {}, }); //分页 const paginationReactive = reactive({ page: 1, pageSize: 10, showSizePicker: true, pageSizes: [10, 20, 50], showQuickJumper: true, pageCount: 0, itemCount: 0, prefix: () => { return '共 ' + paginationReactive.itemCount + ' 项'; }, onChange: (page) => { paginationReactive.page = page; // getTableList(); }, onPageSizeChange: (pageSize) => { paginationReactive.pageSize = pageSize; paginationReactive.page = 1; // getTableList(); }, }); // 流域内流量监测 let echartHxhsw = null; const echartCount = () => { echartHxhsw = echarts.init(document.getElementById('echartSw')); echartHxhsw.clear(); echartHxhsw.setOption(allData.liuliangOption); }; const changeTab = (val, code) => { if (val == '基本信息') { allData.tabactives = 1; } else { allData.tabactives = 2; } }; // 加载基本信息数据 const getBaseData = async () => { let params = { currentPage: 1, pageSize: 99, searchFilters: [], paramMap: { stCode: props.valueModalbz.STCD, datatime: allData.datetime, }, }; let res = await pumplistdata(params); if (res) { allData.tableDataJ = res; console.log(allData.tableDataJ, 'res'); } }; onMounted(() => { allData.datas = props.valueModalbz; if (props.valueModalbz.name.includes('后湖')) { allData.hkvideo = true; } allData.datetime = moment().format('YYYY-MM-DD'); if (allData.datetime) { getBaseData(); } }); onBeforeUnmount(() => { if (!!echartHxhsw) echartHxhsw.dispose(); }); return { ...toRefs(allData), pagination: paginationReactive, getBaseData, changeTab, }; }, }; </script> <style lang="less" scoped> .shuiweiModals { color: #b4c9e0; height: 475px; .title { font-size: 18px; font-weight: bold; } .hpjcz { // display: flex; margin: 10px 0px; .contLeft { width: 100%; height: 50%; .part { margin-top: 10px; .detail { width: 100%; display: flex; font-size: 14px; background: rgba(1, 27, 46, 0.6); p { height: 34px; line-height: 34px; width: 100%; } p:nth-of-type(1) { width: 35%; text-align: center; } p:nth-of-type(2) { flex: 1; text-align: left; } } .detail:nth-of-type(odd) { background: rgba(1, 27, 46, 0.3); } } } .conttable { width: 100%; flex: 1; } } } .flexs { display: flex; } .infoContent { width: 250px; } .conttable { margin-top: 20px; .gqtables { ::v-deep .n-data-table-thead .n-data-table-tr .n-data-table-th { text-align: center; } ::v-deep .n-data-table-tr .n-data-table-td { text-align: center; } } } </style>