Newer
Older
KaiFengPC / src / views / spongePerformance / ManagingPerformance / projectCompletionStatus / index.vue
@zhangdeliang zhangdeliang on 23 May 13 KB 初始化项目
  1. <template>
  2. <div
  3. class="water-analysis-page"
  4. v-loading="loading"
  5. element-loading-text="数据加载中..."
  6. element-loading-background="rgba(122, 122, 122, 0.8)"
  7. >
  8. <div class="top" v-if="!isComponent">
  9. <!-- <div class="icon" v-if="result">
  10. <div class="tittle">2023年项目开工情况</div>
  11. <div class="tittle">项目开工情况1</div>
  12. <div>
  13. <echart v-if="echartsif" :data="top" ref="topRef" @select-echart="data => selectEchart('opend', data)"></echart>
  14. </div>
  15. <div>
  16. <echart v-if="echartsif" :data="center" ref="centerRef" @select-echart="data => selectEchart('completed', data)"></echart>
  17. </div>
  18. <div>
  19. <echart v-if="echartsif" :data="foot" ref="bottomRef" @select-echart="data => selectEchart('realyCompleted', data)"></echart>
  20. </div>
  21. </div> -->
  22. <!-- 图例 -->
  23. <div class="tuli">
  24. <div v-for="i in tuliList1" :key="i" class="tuli_img" v-if="tuliType == 'opend'">
  25. <img :src="i.icon" alt="" />
  26. <div>{{ i.label }}</div>
  27. </div>
  28. <div v-for="i in tuliList2" :key="i" class="tuli_img" v-if="tuliType == 'completed'">
  29. <img :src="i.icon" alt="" />
  30. <div>{{ i.label }}</div>
  31. </div>
  32. <div v-for="i in tuliList3" :key="i" class="tuli_img" v-if="tuliType == 'realyCompleted'">
  33. <img :src="i.icon" alt="" />
  34. <div>{{ i.label }}</div>
  35. </div>
  36. </div>
  37. <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>
  38. </div>
  39. <div class="content" style="width: 800px">
  40. <el-table ref="tableModal" :data="tableData" max-height="300" v-loading="tableLoading" @row-click="clickModal" highlight-current-row>
  41. <el-table-column label="序号" type="index" width="55" />
  42. <el-table-column label="考核年份" prop="year" />
  43. <el-table-column label="项目完工数" prop="projectCompleteNumber" />
  44. <el-table-column label="计划投资金额" prop="targetProjectCompleteSpongeInvest" />
  45. <el-table-column label="项目目标完工数" prop="targetProjectCompleteNumber" />
  46. <el-table-column label="完成投资金额" prop="projectCompleteSpongeInvest" />
  47. <el-table-column label="达标情况" prop="isStandard">
  48. <template #default="{ row }">
  49. {{ row.isStandard === '1' ? '达标' : '未达标' }}
  50. </template>
  51. </el-table-column>
  52. </el-table>
  53. </div>
  54. <el-dialog v-model="visible" title="项目合理性" :close-on-click-modal="false" width="85%" :before-close="close">
  55. <rationality :id="approveId" v-if="approveId" />
  56. </el-dialog>
  57.  
  58. <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
  59. <div class="titleTop">
  60. <el-tabs class="PopupWaterloggingtabs">
  61. <el-tab-pane label="工程详细信息">
  62. <div class="allContent">
  63. <div>项目名称:{{ pipePopupdata.projectName }}</div>
  64. <div>项目编号:{{ pipePopupdata.projectNo }}</div>
  65. <div>建设类别 :{{ findText('build_category', pipePopupdata.buildCategory) }}</div>
  66. <div>项目完工时间 :{{ pipePopupdata.projectTime }}</div>
  67. <div>项目位置 :{{ pipePopupdata.projectLocation }}</div>
  68. </div>
  69. </el-tab-pane>
  70. </el-tabs>
  71. </div>
  72. <div class="closePopup">
  73. <el-icon :size="18" @click="closePopup"><Close /></el-icon>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script setup>
  79. import echart from './echart.vue';
  80. import { ElMessage } from 'element-plus';
  81. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  82. import { top, center, foot } from './index';
  83. import rationality from './rationality/index.vue';
  84. import { selectProjectEcharts, projectCompleteStatusByYear } from '@/api/spongePerformance/projectCompletionStatus';
  85. const { proxy } = getCurrentInstance();
  86. let isComponent = ref(0);
  87. const loading = ref(true);
  88. const floodPointList = ref([]);
  89. const pipePopupShow = ref(false);
  90. const { build_category } = proxy.useDict('build_category');
  91. const dicts = {
  92. build_category,
  93. };
  94. const findText = (prop, type) => {
  95. console.log(prop, type, 9);
  96. const item = dicts[prop].value.find(it => it.value === type);
  97. return item?.label || '';
  98. };
  99. const pipePopupdata = ref([]);
  100. let visible = ref(false);
  101. const echartsif = ref(false);
  102. const tuliType = ref('opend');
  103. const tableData = ref([]);
  104. const tableModal = ref(null);
  105. const resultList = ref([]);
  106. const tableLoading = ref(false);
  107. let tuliList1 = ref([
  108. { label: '已完工', id: 1, icon: '/images/2.1.jpg' },
  109. { label: '未完工', id: 0, icon: '/images/2.2.jpg' },
  110. ]);
  111. let tuliList2 = ref([
  112. { label: '开工', id: 1, icon: '/images/2.1.jpg' },
  113. { label: '已完工', id: 0, icon: '/images/2.2.jpg' },
  114. ]);
  115. let tuliList3 = ref([
  116. { label: '计划完成投资', id: 1, icon: '/images/2.1.jpg' },
  117. { label: '实际完成投资', id: 0, icon: '/images/2.2.jpg' },
  118. ]);
  119. let result = null;
  120. const approveId = ref('1704040731365404674');
  121.  
  122. async function selectProjectEchartsM() {
  123. let { data } = await selectProjectEcharts();
  124. console.log('data', data);
  125. result = data;
  126. top.value.xdata = data.opend.map(item => item.year);
  127. top.value.data = data.opend.map(item => item.oneCount);
  128. console.log('top.value', top.value);
  129. center.value.xdata = data.realyCompleted.map(item => item.year);
  130. center.value.data = data.realyCompleted.map(item => item.oneCount);
  131. center.value.data1 = data.completed.map(item => item.oneCount);
  132. center.value.namme1 = '应完成项目';
  133. foot.value.xdata = data.realyCompleted.map(item => item.year);
  134. foot.value.data = data.realyCompleted.map(item => item.oneCount);
  135. loading.value = false;
  136. // echartsif.value = true;
  137. }
  138. const draw = (data, queryType) => {
  139. console.log(data, 6666667372323);
  140. // if(data[0].id){
  141. //proxy.$refs.mapRef.clear();
  142. approveId.value = '';
  143. if (!data?.length) return;
  144. setTimeout(() => {
  145. let mapData = [];
  146. if (data) {
  147. mapData = data
  148. .filter(item => item.projectLocation)
  149. .map(item => {
  150. if (item.projectLocation) {
  151. item.geometrys = `POINT(${item.projectLocation.split(',').join(' ')})`;
  152. console.log('item.geometrys', item.geometrys);
  153. }
  154. });
  155. }
  156. }, 100);
  157. // }
  158. // else{
  159. // ElMessage({
  160. // message: '该项目未进行只能审查',
  161. // type: 'warning',
  162. // })
  163. // }
  164. };
  165.  
  166. const toCenterByGeoJson = geojson => {
  167. let coords = turf.getCoords(geojson.features[0].geometry).flat();
  168. let flag = geojson.features.length == 1 && coords.length == 2;
  169. if (!!geojson.features.length && !flag) {
  170. newfiberMap.getMap().camera.flyTo({
  171. destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2))),
  172. });
  173. } else {
  174. newfiberMap.setCenter({
  175. roll: 0.01658908985506884,
  176. pitch: -87.24924906709752,
  177. heading: 5.026928271138224,
  178. lng: coords[0],
  179. lat: coords[1],
  180. height: 943.5996932813425,
  181. });
  182. }
  183. };
  184.  
  185. const selectEchart = (queryType, data) => {
  186. tuliType.value = queryType;
  187. console.log(queryType, data, 7777);
  188. proxy.$refs.topRef.restSelect();
  189. proxy.$refs.centerRef.restSelect();
  190. proxy.$refs.bottomRef.restSelect();
  191. data.callback && data.callback();
  192. const info = result[queryType] || [];
  193. const item = info.find(it => it.year === data.name);
  194. draw(item?.simpleProjectInfoList || [], queryType);
  195. };
  196. // 项目完成情况数据获取
  197. async function getData() {
  198. tableLoading.value = true;
  199. let res = await projectCompleteStatusByYear();
  200. if (res && res.code == 200) {
  201. tableLoading.value = false;
  202. tableData.value = res.data;
  203. console.log(tableData.value, ' tableData.value');
  204. tableModal.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
  205. resultList.value = tableData.value[0].resultList;
  206. addProjectLayer(tableData.value[0].projectInfoList, 'projectLayer');
  207. // let moduleGeojson = getFeatureGeojson(tableData.value[0].partitionList);
  208. // let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson);
  209. // let modulelabelGeojson = getGeojsonCenter(moduleGeojson);
  210. // //gis渲染内涝区域
  211. // addModuleLayer(moduleGeojson, 'moduleFlood', '#95f204');
  212. // addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary');
  213. // addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff');
  214. }
  215. tableLoading.value = false;
  216. }
  217. const closePopup = () => {
  218. pipePopupShow.value = false;
  219. };
  220. //表格点击
  221. function clickModal(row) {
  222. console.log('rowrowrowrow', row);
  223. floodPointList.value = [];
  224. floodPointList.value = row.projectInfoList;
  225. // gis渲染点位
  226. addProjectLayer(floodPointList.value, 'projectLayer');
  227. }
  228. //地图添加工程
  229. const addProjectLayer = (data, layerName) => {
  230. if (newfiberMapbox.map.getLayer('projectLayer')) {
  231. newfiberMapbox.map.removeLayer('projectLayer');
  232. newfiberMapbox.map.removeLayer('projectLayerlabel');
  233. newfiberMapbox.map.removeSource('projectLayer');
  234. newfiberMapbox.map.removeSource('projectLayerlabel');
  235. }
  236. let features = [];
  237. data.forEach(element => {
  238. if (!element.projectLocation) {
  239. return;
  240. } else {
  241. element.color = '#cee3b8';
  242. let lonlat = element.projectLocation.split(',');
  243. let projectPoint = turf.point([Number(lonlat[0]), Number(lonlat[1])], element);
  244. features.push(projectPoint);
  245. }
  246. });
  247. let projectGeojson = turf.featureCollection(features);
  248. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: projectGeojson });
  249. !!!newfiberMapbox.map.getLayer(layerName) &&
  250. newfiberMapbox.map.addLayer({
  251. id: layerName,
  252. type: 'circle',
  253. source: layerName,
  254. paint: {
  255. 'circle-color': ['get', 'color'],
  256. 'circle-radius': 7,
  257. },
  258. });
  259. !!!newfiberMapbox.map.getSource(layerName + 'label') &&
  260. newfiberMapbox.map.addSource(layerName + 'label', { type: 'geojson', data: projectGeojson });
  261. !!!newfiberMapbox.map.getLayer(layerName + 'label') &&
  262. newfiberMapbox.map.addLayer({
  263. id: layerName + 'label',
  264. type: 'symbol',
  265. source: layerName + 'label',
  266. paint: {
  267. 'text-color': '#ffffff',
  268. },
  269. layout: {
  270. 'text-allow-overlap': false,
  271. 'text-field': '{projectName}',
  272. 'text-font': ['KlokanTech Noto Sans Regular'],
  273. 'text-size': 16,
  274. 'text-line-height': 3,
  275. 'text-anchor': 'bottom',
  276. 'text-max-width': 50,
  277. 'text-offset': [0, -1],
  278. },
  279. });
  280. };
  281. onMounted(() => {
  282. getData();
  283. selectProjectEchartsM();
  284. setTimeout(() => {
  285. newfiberMapbox.map.on('click', e => {
  286. let clickfeature = newfiberMapbox.map
  287. .queryRenderedFeatures([
  288. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  289. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  290. ])
  291. .filter(i => i.layer.id == 'projectLayer');
  292. console.log('clickfeature', '点击事件', clickfeature);
  293. if (!clickfeature.length) return;
  294. pipePopupShow.value = true;
  295. pipePopupdata.value = clickfeature[0].properties;
  296. console.log(dicts.build_category, 'dicts');
  297. });
  298. }, 5000);
  299. });
  300. onBeforeUnmount(() => {
  301. if (!!!newfiberMapbox) return;
  302. !!newfiberMapbox.map.getLayer('projectLayer') && newfiberMapbox.map.removeLayer('projectLayer');
  303. !!newfiberMapbox.map.getSource('projectLayer') && newfiberMapbox.map.removeSource('projectLayer');
  304. !!newfiberMapbox.map.getLayer('projectLayerlabel') && newfiberMapbox.map.removeLayer('projectLayerlabel');
  305. !!newfiberMapbox.map.getSource('projectLayerlabel') && newfiberMapbox.map.removeSource('projectLayerlabel');
  306. });
  307. </script>
  308. <style lang="scss" scoped>
  309. @import '@/assets/styles/variables.module.scss';
  310. #map {
  311. width: 100%;
  312. height: 100%;
  313. }
  314. .form {
  315. left: 10px;
  316. top: 10px;
  317. z-index: 111;
  318. position: absolute;
  319. width: 20%;
  320. }
  321. .top {
  322. position: relative;
  323. height: 86vh;
  324. }
  325. .icon {
  326. right: 0;
  327. top: 0;
  328. z-index: 111;
  329. position: absolute;
  330. width: 25%;
  331. div {
  332. margin: 10px 0;
  333. }
  334. }
  335. .tuli {
  336. left: 20px;
  337. bottom: 40px;
  338. z-index: 111;
  339. position: absolute;
  340. padding: 15px;
  341. background: $mainColor1;
  342. display: flex;
  343. align-items: center;
  344. color: #fff;
  345. div {
  346. margin-right: 10px;
  347. }
  348. .tuli_img {
  349. display: flex;
  350. align-items: center;
  351. img {
  352. margin-right: 10px;
  353. }
  354. }
  355. }
  356. .tittle {
  357. font-size: 16px;
  358. font-weight: bold;
  359. width: 200px;
  360. height: 40px;
  361. line-height: 40px;
  362. text-align: center;
  363. margin: 5px 0;
  364. color: #fff;
  365. }
  366. .tittle1 {
  367. background: transparent;
  368. }
  369. .water-analysis-page {
  370. padding: 20px;
  371. overflow-y: hidden;
  372. }
  373. .content {
  374. width: 500px;
  375. background: $mainBg;
  376. border-radius: 8px;
  377. position: absolute;
  378. top: 20px;
  379. right: 20px;
  380. z-index: 90;
  381. padding: 15px;
  382. overflow: auto;
  383. .chartHeight {
  384. width: 100%;
  385. height: 240px !important;
  386. }
  387. }
  388. #PopupWaterlogging {
  389. position: fixed;
  390. left: 52%;
  391. top: 50%;
  392. transform: translate(-50%, -50%);
  393. width: 500px;
  394. height: 210px;
  395. background: #021534;
  396. border: 1px solid #114f89;
  397. z-index: 2000;
  398. display: flex;
  399. .allContent {
  400. width: 425px;
  401. height: 300px;
  402. display: flex;
  403. flex-direction: column;
  404. }
  405. #chartPopupRain {
  406. width: 425px;
  407. height: 200px;
  408. }
  409. .titleTop {
  410. width: 95%;
  411. display: flex;
  412. padding-top: 8px;
  413. margin-left: 20px;
  414. }
  415. .closePopup {
  416. width: 5%;
  417. margin: 15px;
  418.  
  419. cursor: pointer;
  420. }
  421. .PopupWaterloggingtabs {
  422. width: 100%;
  423. }
  424. }
  425. </style>