- <template>
- <div
- class="water-analysis-page"
- v-loading="loading"
- element-loading-text="数据加载中..."
- element-loading-background="rgba(122, 122, 122, 0.8)"
- >
- <div class="top" v-if="!isComponent">
- <!-- <div class="icon" v-if="result">
- <div class="tittle">2023年项目开工情况</div>
- <div class="tittle">项目开工情况1</div>
- <div>
- <echart v-if="echartsif" :data="top" ref="topRef" @select-echart="data => selectEchart('opend', data)"></echart>
- </div>
- <div>
- <echart v-if="echartsif" :data="center" ref="centerRef" @select-echart="data => selectEchart('completed', data)"></echart>
- </div>
- <div>
- <echart v-if="echartsif" :data="foot" ref="bottomRef" @select-echart="data => selectEchart('realyCompleted', data)"></echart>
- </div>
- </div> -->
- <!-- 图例 -->
- <div class="tuli">
- <div v-for="i in tuliList1" :key="i" class="tuli_img" v-if="tuliType == 'opend'">
- <img :src="i.icon" alt="" />
- <div>{{ i.label }}</div>
- </div>
- <div v-for="i in tuliList2" :key="i" class="tuli_img" v-if="tuliType == 'completed'">
- <img :src="i.icon" alt="" />
- <div>{{ i.label }}</div>
- </div>
- <div v-for="i in tuliList3" :key="i" class="tuli_img" v-if="tuliType == 'realyCompleted'">
- <img :src="i.icon" alt="" />
- <div>{{ i.label }}</div>
- </div>
- </div>
- <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>
- </div>
- <div class="content" style="width: 800px">
- <el-table ref="tableModal" :data="tableData" max-height="300" v-loading="tableLoading" @row-click="clickModal" highlight-current-row>
- <el-table-column label="序号" type="index" width="55" />
- <el-table-column label="考核年份" prop="year" />
- <el-table-column label="项目完工数" prop="projectCompleteNumber" />
- <el-table-column label="计划投资金额" prop="targetProjectCompleteSpongeInvest" />
- <el-table-column label="项目目标完工数" prop="targetProjectCompleteNumber" />
- <el-table-column label="完成投资金额" prop="projectCompleteSpongeInvest" />
- <el-table-column label="达标情况" prop="isStandard">
- <template #default="{ row }">
- {{ row.isStandard === '1' ? '达标' : '未达标' }}
- </template>
- </el-table-column>
- </el-table>
- </div>
- <el-dialog v-model="visible" title="项目合理性" :close-on-click-modal="false" width="85%" :before-close="close">
- <rationality :id="approveId" v-if="approveId" />
- </el-dialog>
-
- <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
- <div class="titleTop">
- <el-tabs class="PopupWaterloggingtabs">
- <el-tab-pane label="工程详细信息">
- <div class="allContent">
- <div>项目名称:{{ pipePopupdata.projectName }}</div>
- <div>项目编号:{{ pipePopupdata.projectNo }}</div>
- <div>建设类别 :{{ findText('build_category', pipePopupdata.buildCategory) }}</div>
- <div>项目完工时间 :{{ pipePopupdata.projectTime }}</div>
- <div>项目位置 :{{ pipePopupdata.projectLocation }}</div>
- </div>
- </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 echart from './echart.vue';
- import { ElMessage } from 'element-plus';
- import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
- import { top, center, foot } from './index';
- import rationality from './rationality/index.vue';
- import { selectProjectEcharts, projectCompleteStatusByYear } from '@/api/spongePerformance/projectCompletionStatus';
- const { proxy } = getCurrentInstance();
- let isComponent = ref(0);
- const loading = ref(true);
- const floodPointList = ref([]);
- const pipePopupShow = ref(false);
- const { build_category } = proxy.useDict('build_category');
- const dicts = {
- build_category,
- };
- const findText = (prop, type) => {
- console.log(prop, type, 9);
- const item = dicts[prop].value.find(it => it.value === type);
- return item?.label || '';
- };
- const pipePopupdata = ref([]);
- let visible = ref(false);
- const echartsif = ref(false);
- const tuliType = ref('opend');
- const tableData = ref([]);
- const tableModal = ref(null);
- const resultList = ref([]);
- const tableLoading = ref(false);
- let tuliList1 = ref([
- { label: '已完工', id: 1, icon: '/images/2.1.jpg' },
- { label: '未完工', id: 0, icon: '/images/2.2.jpg' },
- ]);
- let tuliList2 = ref([
- { label: '开工', id: 1, icon: '/images/2.1.jpg' },
- { label: '已完工', id: 0, icon: '/images/2.2.jpg' },
- ]);
- let tuliList3 = ref([
- { label: '计划完成投资', id: 1, icon: '/images/2.1.jpg' },
- { label: '实际完成投资', id: 0, icon: '/images/2.2.jpg' },
- ]);
- let result = null;
- const approveId = ref('1704040731365404674');
-
- async function selectProjectEchartsM() {
- let { data } = await selectProjectEcharts();
- console.log('data', data);
- result = data;
- top.value.xdata = data.opend.map(item => item.year);
- top.value.data = data.opend.map(item => item.oneCount);
- console.log('top.value', top.value);
- center.value.xdata = data.realyCompleted.map(item => item.year);
- center.value.data = data.realyCompleted.map(item => item.oneCount);
- center.value.data1 = data.completed.map(item => item.oneCount);
- center.value.namme1 = '应完成项目';
- foot.value.xdata = data.realyCompleted.map(item => item.year);
- foot.value.data = data.realyCompleted.map(item => item.oneCount);
- loading.value = false;
- // echartsif.value = true;
- }
- const draw = (data, queryType) => {
- console.log(data, 6666667372323);
- // if(data[0].id){
- //proxy.$refs.mapRef.clear();
- approveId.value = '';
- if (!data?.length) return;
- setTimeout(() => {
- let mapData = [];
- if (data) {
- mapData = data
- .filter(item => item.projectLocation)
- .map(item => {
- if (item.projectLocation) {
- item.geometrys = `POINT(${item.projectLocation.split(',').join(' ')})`;
- console.log('item.geometrys', item.geometrys);
- }
- });
- }
- }, 100);
- // }
- // else{
- // ElMessage({
- // message: '该项目未进行只能审查',
- // type: 'warning',
- // })
- // }
- };
-
- const toCenterByGeoJson = geojson => {
- let coords = turf.getCoords(geojson.features[0].geometry).flat();
- let flag = geojson.features.length == 1 && coords.length == 2;
- if (!!geojson.features.length && !flag) {
- newfiberMap.getMap().camera.flyTo({
- destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2))),
- });
- } else {
- newfiberMap.setCenter({
- roll: 0.01658908985506884,
- pitch: -87.24924906709752,
- heading: 5.026928271138224,
- lng: coords[0],
- lat: coords[1],
- height: 943.5996932813425,
- });
- }
- };
-
- const selectEchart = (queryType, data) => {
- tuliType.value = queryType;
- console.log(queryType, data, 7777);
- proxy.$refs.topRef.restSelect();
- proxy.$refs.centerRef.restSelect();
- proxy.$refs.bottomRef.restSelect();
- data.callback && data.callback();
- const info = result[queryType] || [];
- const item = info.find(it => it.year === data.name);
- draw(item?.simpleProjectInfoList || [], queryType);
- };
- // 项目完成情况数据获取
- async function getData() {
- tableLoading.value = true;
- let res = await projectCompleteStatusByYear();
- if (res && res.code == 200) {
- tableLoading.value = false;
- tableData.value = res.data;
- console.log(tableData.value, ' tableData.value');
- tableModal.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
- resultList.value = tableData.value[0].resultList;
- addProjectLayer(tableData.value[0].projectInfoList, 'projectLayer');
- // let moduleGeojson = getFeatureGeojson(tableData.value[0].partitionList);
- // let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson);
- // let modulelabelGeojson = getGeojsonCenter(moduleGeojson);
- // //gis渲染内涝区域
- // addModuleLayer(moduleGeojson, 'moduleFlood', '#95f204');
- // addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary');
- // addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff');
- }
- tableLoading.value = false;
- }
- const closePopup = () => {
- pipePopupShow.value = false;
- };
- //表格点击
- function clickModal(row) {
- console.log('rowrowrowrow', row);
- floodPointList.value = [];
- floodPointList.value = row.projectInfoList;
- // gis渲染点位
- addProjectLayer(floodPointList.value, 'projectLayer');
- }
- //地图添加工程
- const addProjectLayer = (data, layerName) => {
- if (newfiberMapbox.map.getLayer('projectLayer')) {
- newfiberMapbox.map.removeLayer('projectLayer');
- newfiberMapbox.map.removeLayer('projectLayerlabel');
- newfiberMapbox.map.removeSource('projectLayer');
- newfiberMapbox.map.removeSource('projectLayerlabel');
- }
- let features = [];
- data.forEach(element => {
- if (!element.projectLocation) {
- return;
- } else {
- element.color = '#cee3b8';
- let lonlat = element.projectLocation.split(',');
- let projectPoint = turf.point([Number(lonlat[0]), Number(lonlat[1])], element);
- features.push(projectPoint);
- }
- });
- let projectGeojson = turf.featureCollection(features);
- !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: projectGeojson });
- !!!newfiberMapbox.map.getLayer(layerName) &&
- newfiberMapbox.map.addLayer({
- id: layerName,
- type: 'circle',
- source: layerName,
- paint: {
- 'circle-color': ['get', 'color'],
- 'circle-radius': 7,
- },
- });
- !!!newfiberMapbox.map.getSource(layerName + 'label') &&
- newfiberMapbox.map.addSource(layerName + 'label', { type: 'geojson', data: projectGeojson });
- !!!newfiberMapbox.map.getLayer(layerName + 'label') &&
- newfiberMapbox.map.addLayer({
- id: layerName + 'label',
- type: 'symbol',
- source: layerName + 'label',
- paint: {
- 'text-color': '#ffffff',
- },
- layout: {
- 'text-allow-overlap': false,
- 'text-field': '{projectName}',
- 'text-font': ['KlokanTech Noto Sans Regular'],
- 'text-size': 16,
- 'text-line-height': 3,
- 'text-anchor': 'bottom',
- 'text-max-width': 50,
- 'text-offset': [0, -1],
- },
- });
- };
- onMounted(() => {
- getData();
- selectProjectEchartsM();
- setTimeout(() => {
- newfiberMapbox.map.on('click', e => {
- let clickfeature = newfiberMapbox.map
- .queryRenderedFeatures([
- [e.point.x - 10 / 2, e.point.y - 10 / 2],
- [e.point.x + 10 / 2, e.point.y + 10 / 2],
- ])
- .filter(i => i.layer.id == 'projectLayer');
- console.log('clickfeature', '点击事件', clickfeature);
- if (!clickfeature.length) return;
- pipePopupShow.value = true;
- pipePopupdata.value = clickfeature[0].properties;
- console.log(dicts.build_category, 'dicts');
- });
- }, 5000);
- });
- onBeforeUnmount(() => {
- if (!!!newfiberMapbox) return;
- !!newfiberMapbox.map.getLayer('projectLayer') && newfiberMapbox.map.removeLayer('projectLayer');
- !!newfiberMapbox.map.getSource('projectLayer') && newfiberMapbox.map.removeSource('projectLayer');
- !!newfiberMapbox.map.getLayer('projectLayerlabel') && newfiberMapbox.map.removeLayer('projectLayerlabel');
- !!newfiberMapbox.map.getSource('projectLayerlabel') && newfiberMapbox.map.removeSource('projectLayerlabel');
- });
- </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: 25%;
- div {
- margin: 10px 0;
- }
- }
- .tuli {
- left: 20px;
- bottom: 40px;
- z-index: 111;
- position: absolute;
- padding: 15px;
- background: $mainColor1;
- display: flex;
- align-items: center;
- color: #fff;
- div {
- margin-right: 10px;
- }
- .tuli_img {
- display: flex;
- align-items: center;
- img {
- margin-right: 10px;
- }
- }
- }
- .tittle {
- font-size: 16px;
- font-weight: bold;
- width: 200px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- margin: 5px 0;
- color: #fff;
- }
- .tittle1 {
- background: transparent;
- }
- .water-analysis-page {
- padding: 20px;
- overflow-y: hidden;
- }
- .content {
- width: 500px;
- background: $mainBg;
- border-radius: 8px;
- position: absolute;
- top: 20px;
- right: 20px;
- z-index: 90;
- padding: 15px;
- overflow: auto;
- .chartHeight {
- width: 100%;
- height: 240px !important;
- }
- }
- #PopupWaterlogging {
- position: fixed;
- left: 52%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 500px;
- height: 210px;
- background: #021534;
- border: 1px solid #114f89;
- z-index: 2000;
- display: flex;
- .allContent {
- width: 425px;
- height: 300px;
- display: flex;
- flex-direction: column;
- }
- #chartPopupRain {
- width: 425px;
- height: 200px;
- }
- .titleTop {
- width: 95%;
- display: flex;
- padding-top: 8px;
- margin-left: 20px;
- }
- .closePopup {
- width: 5%;
- margin: 15px;
-
- cursor: pointer;
- }
- .PopupWaterloggingtabs {
- width: 100%;
- }
- }
- </style>