- <template>
- <div id="shuiwuyuansu">
- <div class="boxitem" v-for="item in leftList" :key="item">
- <div class="leftbox">
- {{ item.pointTypeName }}
- </div>
- <div class="rightbox">
- <div
- class="pumpName"
- :class="p.id == getdataid ? 'actived' : ''"
- @click="pumpclick(p)"
- :title="p.name"
- v-for="p in item.data"
- :key="p"
- >
- {{ p.name }}
- </div>
- </div>
- </div>
-
- <div class="dialog" v-if="showdia">
- <div class="closedia" @click="showdia = false">x</div>
- <JichuXinxi :dataID="getdataid" :dataCode="getdataCode"></JichuXinxi>
- </div>
- </div>
- </template>
-
- <script setup name="shuiwuyuansu">
- import JichuXinxi from '@/views/pictureOnMap/page/components/DialogTabs/component/JichuXinxi.vue';
- import { getWaterRegionData, getRegionData, getReservoirData } from '@/api/MonitorAssetsOnMap';
-
- const props = defineProps({
- // 数据id
- dataID: {
- type: [String, Number],
- },
- dataCode: {
- type: String,
- },
- });
-
- const getdataCode = ref('');
- const getdataid = ref('');
- const leftList = ref([
- // {
- // pointTypeName: '泵站',
- // type: 'bengzhan',
- // data: [
- // { name: '泵站1xxxxxxxxxx', value: '1' },
- // { name: '泵站2', value: '2' },
- // { name: '泵站3', value: '3' },
- // { name: '泵站3', value: '3' },
- // { name: '泵站3', value: '3' },
- // { name: '泵站3', value: '3' },
- // ],
- // },
- ]);
-
- const showdia = ref(false);
-
- function pumpclick(item) {
- console.log('点击的每一项', item);
- showdia.value = false;
- getdataid.value = item.id;
- getdataCode.value = item.pointType;
- showdia.value = true;
- }
-
- function Getlist() {
- let params = {
- id: props.dataID,
- };
- let api = '';
- if (props.dataCode == 'region_info') {
- api = getRegionData;
- }
- if (props.dataCode == 'water_region_info') {
- api = getWaterRegionData;
- }
-
- if (props.dataCode == 'lake_info') {
- api = getReservoirData;
- }
-
- api(params).then(res => {
- console.log(res);
- leftList.value = res.data;
- });
- }
-
- onMounted(() => {
- console.log('props', props);
- Getlist();
- });
- </script>
-
- <style lang="scss" scoped>
- @import '@/assets/styles/mapcss.scss';
-
- #shuiwuyuansu {
- width: 100%;
- height: 100%;
- overflow: hidden;
- overflow-y: auto;
- padding: 0 20px;
- position: relative;
- color: #ccefff;
-
- .dialog {
- padding-top: 20px;
- position: absolute;
- width: 75%;
- height: 95%;
- right: 2%;
- bottom: 2%;
- z-index: 999;
- background: rgba(51, 95, 141, 0.9);
- border-radius: 5px;
- overflow: hidden;
-
- .closedia {
- cursor: pointer;
- position: absolute;
- right: 10px;
- top: 5px;
- }
- }
- }
- </style>