- <template>
- <div class="water-analysis-page">
- <div class="top">
- <div class="top" v-if="!isComponent">
- <div class="icon">
- <!-- <div class="tittle">地表水水体年度考核统计表</div> -->
- <todoDon ref="todoDonRef" :params="tableData" @searchClick="searchClick" @clicksurfaceWater="clicksurfaceWater"></todoDon>
- </div>
- <div class="tuli">
- <div style="margin: 10px; font-size: 18px">图例</div>
- <div v-for="i in tuliList" class="tuli_img">
- <img :src="i.icon" alt="" />
- <div>{{ i.label }}</div>
- </div>
- </div>
- <!-- gis地图 -->
- <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" class="surfaceWatermaps"></MapBox>
- </div>
- <detial v-else-if="isComponent == 1" @searchClick="searchClick" :paramsData="params"></detial>
- </div>
- <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
- <div class="titleTop">
- <el-tabs class="PopupWaterloggingtabs">
- <el-tab-pane label="当前地表水本年度水质监测情况">
- <el-table
- ref="tableModal"
- :data="tableData2"
- max-height="230"
- v-loading="tableLoading"
- @row-click="clickModal"
- highlight-current-row
- ><el-table-column label="考核水体" prop="riverName" />
- <el-table-column label="采样时间" prop="sampleTime" width="150" />
- <el-table-column label="溶解氧mg/L" prop="DOX" />
- <el-table-column label="高猛酸盐指数mg/L" prop="BOD" />
- <el-table-column label="氨氮mg/L" prop="NH3N" />
- <el-table-column label="总磷mg/L" prop="TP1" />
- <el-table-column label="水质类别" prop="waterQualityName" />
- <el-table-column label="目标水质类别" prop="targetWaterQualityName" />
- </el-table>
- </el-tab-pane>
- </el-tabs>
- </div>
- <div class="closePopup">
- <el-icon :size="18" @click="closePopup"><Close /></el-icon>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- import detial from './detial/index';
- import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
- import todoDon from './todoDon.vue';
- import { waterQualitySampleInfopaging } from '@/api/spongePerformance/surfaceWater';
- const { proxy } = getCurrentInstance();
- const pipePopupShow = ref(false);
- const todoDonRef = ref(null);
- const tableData2 = ref([]);
- let isComponent = ref(0);
- let tuliList = ref([
- { label: '不达标', id: 0, icon: '/images/1.1.jpg' },
- { label: '达标', id: 1, icon: '/images/1.2.jpg' },
- ]);
- const closePopup = () => {
- pipePopupShow.value = false;
- };
- //动态组件
- let dataForm = reactive({
- tableData: { itemDataType: 'NLFZBZ' },
- tableDateTwo: '',
- tableLoading: true,
- });
- let { tableData } = toRefs(dataForm);
- const params = ref({});
- function searchClick(row) {
- params.value = row;
- isComponent.value = row.type;
- }
- /** 搜索地表水本年度水质监测情况 */
- const getDataList = async val => {
- let params = {
- pageNum: 1,
- pageSize: 999,
- riverId: val.riverId,
- sampleYear: val.examineYear,
- };
- const res = await waterQualitySampleInfopaging(params);
- pipePopupShow.value = true;
- tableData2.value = [];
- tableData2.value = res.data.records;
- console.log(tableData2.value, 999999999);
- };
-
- const clicksurfaceWater = row => {
- pipePopupShow.value = true;
- getDataList(row);
- };
- onMounted(() => {});
- </script>
- <style lang="scss" scoped>
- @import '@/assets/styles/variables.module.scss';
- #map {
- width: 100%;
- height: 100%;
- }
- .form {
- left: 10px;
- top: 10px;
- z-index: 111;
- position: absolute;
- width: 20%;
- }
- .top {
- position: relative;
- height: 86vh;
- }
- .icon {
- right: 0;
- top: 0;
- z-index: 111;
- position: absolute;
- width: 70%;
- }
- .tuli {
- left: 20px;
- bottom: 30px;
- z-index: 111;
- position: absolute;
- padding: 10px;
- background: $mainColor1;
- // display: flex;
- align-items: center;
- text-align: center;
- color: #fff;
-
- .tuli_img {
- display: flex;
- align-items: center;
- margin-top: 8px;
- img {
- margin-right: 10px;
- width: 25px;
- }
- }
- }
- .tittle {
- font-size: 16px;
- font-weight: bold;
- width: 200px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- margin: 5px 0;
- color: #fff;
- }
-
- .water-analysis-page {
- padding: 20px;
- overflow-y: hidden;
- }
- #PopupWaterlogging {
- position: fixed;
- left: 52%;
- top: 45%;
- transform: translate(-50%, -50%);
- width: 650px;
- height: 310px;
- background: #021534;
- border: 1px solid #114f89;
- z-index: 2000;
- display: flex;
-
- .titleTop {
- width: 90%;
- display: flex;
- padding-top: 8px;
- margin-left: 20px;
- }
- .closePopup {
- width: 5%;
- margin: 15px;
- cursor: pointer;
- }
- .PopupWaterloggingtabs {
- width: 100%;
- }
- }
- .l7-popup-tip {
- display: none !important;
- }
- .l7-popup .l7-popup-content {
- padding: 0px;
- background: rgba(3, 59, 79, 0) !important;
- }
- .l7-popup-content {
- padding: 0px;
- background: rgba(3, 59, 79, 0) !important;
- }
- .l7-popup .l7-popup-content .l7-popup-close-button {
- display: none !important;
- }
- </style>