- <template>
- <!-- 黑臭水体消除比例 -->
- <div class="water-analysis-page">
- <div class="icon">
- <todoDon ref="todoDonRef" :params="tableData" @searchClick="searchClick" @clicksWaterBodies="clicksWaterBodies"></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`"></MapBox>
- </div>
- </template>
- <script setup>
- import { blackOdorpaging, blackOdorpagingriverInfo } from '@/api/spongePerformance/surfaceWater';
- import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
- import todoDon from './todoDon.vue';
- import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
- const { proxy } = getCurrentInstance();
- const todoDonRef = ref(null);
- const pipePopupShow = ref(false);
- const popsdata = 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 tableData2 = ref([]);
- //动态组件
- 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,
- };
- const res = await blackOdorpaging(params);
- pipePopupShow.value = true;
- tableData2.value = [];
- tableData2.value = res.data.records;
- };
- /** 搜索黑臭照片列表 */
- const getDatariverInfo = async val => {
- let params = {
- riverName: val,
- };
- const res = await blackOdorpagingriverInfo(params);
- if (res && res.code == 200) {
- popsdata.value = res.data[0];
- }
- };
-
- const clicksWaterBodies = row => {
- let ids = '';
- if (row.riverId) {
- ids = row.riverId;
- } else {
- ids = row.id;
- }
- getDataList(ids);
- getDatariverInfo(row.riverName);
- };
- onMounted(() => {});
- </script>
- <style lang="scss">
- .hcstDialog {
- display: flex;
- flex-wrap: wrap;
- .part {
- width: 48%;
- margin-right: 2%;
- .title {
- font-size: 18px;
- font-weight: bold;
- color: #fff;
- }
- .chart {
- height: 300px !important;
- }
- }
- }
- @import '@/assets/styles/variables.module.scss';
-
- .water-analysis-page {
- padding: 20px;
- height: 100%;
- position: relative;
- #map {
- width: 100%;
- height: 100%;
- }
- .form {
- left: 10px;
- top: 10px;
- z-index: 111;
- position: absolute;
- width: 20%;
- }
- .icon {
- right: 0;
- top: 0;
- z-index: 111;
- position: absolute;
- width: 800px;
- }
- .tuli {
- left: 20px;
- bottom: 30px;
- padding: 10px;
- z-index: 111;
- position: absolute;
- background: $mainColor1;
- flex-wrap: wrap;
- align-items: center;
- text-align: center;
- color: #fff;
- .tuli_img {
- display: flex;
- align-items: center;
- margin-top: 8px;
- img {
- margin-right: 10px;
- width: 25px;
- }
- }
- }
- }
- </style>