Newer
Older
KaiFengPC / src / views / sponeScreen / evaluationKH / heiChouShuiTi.vue
@zhangdeliang zhangdeliang on 24 Dec 13 KB update
  1. <template>
  2. <div class="chanChuJiXiao">
  3. <div class="partTitleHM">
  4. 产出绩效
  5. <div class="tabs flex">
  6. <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
  7. {{ item.name }}
  8. </div>
  9. </div>
  10. </div>
  11. <div class="ListBoxBody">
  12. <div class="content">
  13. <div class="target flex flex-j-left flex-align-center">
  14. <div class="titles titlesmb">
  15. <div class="mbs">目标</div>
  16. </div>
  17. <div class="valsText">{{ quotaInfo.improveGoals }}</div>
  18. </div>
  19. <div class="measures flex flex-j-left flex-align-center">
  20. <div class="titles titlecs">
  21. <div class="mbs">措施</div>
  22. </div>
  23. <div class="valsText">{{ quotaInfo.reformMethod }}</div>
  24. </div>
  25.  
  26. <el-table ref="table" :data="tableData" height="120" v-if="curTab == 1">
  27. <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
  28. <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
  29. </el-table>
  30.  
  31. <el-table ref="table" :data="tableData" height="120" v-if="curTab == 2">
  32. <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
  33. <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
  34. </el-table>
  35.  
  36. <el-table ref="table" :data="tableData" height="120" v-if="curTab == 3">
  37. <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
  38. <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
  39. </el-table>
  40.  
  41. <div class="achievements flex flex-j-left flex-align-center">
  42. <div class="titles titlecg">
  43. <div class="mbs">成果</div>
  44. </div>
  45. <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
  46. {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
  47. </div>
  48. <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button>
  49. </div>
  50. <div class="bottom flex-v">
  51. <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
  52. </div>
  53. </div>
  54. </div>
  55.  
  56. <!-- 地图水体点击弹窗 -->
  57. <el-dialog v-model="dialogShow" :title="ExamineYearA + blackWaterNameA + '水质监测详情'" append-to-body width="900px">
  58. <div class="hcstDialog">
  59. <div class="part">
  60. <div class="title">透明度(cm)</div>
  61. <ChartBar3D :echartData="echartData1" class="chart" :key="refresh1"></ChartBar3D>
  62. </div>
  63. <div class="part">
  64. <div class="title">氨氮(mg/L)</div>
  65. <ChartBar3D :key="refresh2" :echartData="echartData2" class="chart"></ChartBar3D>
  66. </div>
  67. <div class="part">
  68. <div class="title">溶解氧(mg/L)</div>
  69. <ChartBar3D :key="refresh3" :echartData="echartData3" class="chart"></ChartBar3D>
  70. </div>
  71. <div class="part">
  72. <div class="title">氧化还原电位(mV)</div>
  73. <ChartBar3D :echartData="echartData4" class="chart" :key="refresh4"></ChartBar3D>
  74. </div>
  75. </div>
  76. </el-dialog>
  77. </div>
  78. </template>
  79. <script setup>
  80. import bus from '@/bus';
  81. import { blackWaterInfoList, queryYearStatistic } from '@/api/spongePerformance/prevention';
  82. import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
  83. import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
  84. import kaifengShengHuoWS from '@/assets/geojson/kaifeng/kaifengShengHuoWS.json'; //生活污水
  85. import kaifengBOD from '@/assets/geojson/kaifeng/kaifengBOD.json'; //进水BOD
  86. import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
  87. import tuLi72X from '@/assets/newImgs/tuLi72X.png';
  88. import riverList from './riverHupo.js';
  89.  
  90. const { proxy } = getCurrentInstance();
  91. const dialogShow = ref(false);
  92. const ExamineYearA = ref('');
  93. const blackWaterCodeA = ref('');
  94. const blackWaterNameA = ref('');
  95. const refresh1 = ref(1);
  96. const refresh2 = ref(1);
  97. const refresh3 = ref(1);
  98. const refresh4 = ref(1);
  99. const echartData1 = ref({
  100. // xAxis: ['3月', '4月', '9月', '11月'],
  101. // seriesData: [126, 162, 119, 86, 113],
  102. });
  103. const echartData2 = ref({
  104. // xAxis: ['3月', '4月', '9月', '11月'],
  105. // seriesData: [0.8, 0.35, 1.12, 0.9, 0.98],
  106. });
  107. const echartData3 = ref({
  108. // xAxis: ['3月', '4月', '9月', '11月'],
  109. // seriesData: [5.4, 13, 9.2, 10.4, 8.9],
  110. });
  111. const echartData4 = ref({
  112. // xAxis: ['3月', '4月', '9月', '11月'],
  113. // seriesData: [126, 162, 119, 86, 113],
  114. });
  115. const tabs = ref([
  116. { id: 1, name: '河湖水质' },
  117. { id: 2, name: '生活污水' },
  118. { id: 3, name: '进水BOD' },
  119. ]);
  120. const curTab = ref(1);
  121.  
  122. const quotaInfo = ref({}); //改造措施数据
  123. const tableData = ref([]);
  124. const type = ref('hcst');
  125. const currentYear = ref(2023);
  126.  
  127. // 获取佐证材料
  128. function getZzcl() {
  129. bus.emit('getZzclData', curTab.value);
  130. }
  131.  
  132. const tabClick = item => {
  133. curTab.value = item.id;
  134. bus.emit('removeKHLayer'); //清除图层
  135. if (curTab.value == 1) {
  136. type.value = 'hcst';
  137. addOdorousWaterBodies(); //河湖水质图层
  138. setTimeout(() => {
  139. newfiberMapbox.map.easeTo({
  140. center: [114.365, 34.803],
  141. zoom: 11.9,
  142. });
  143. }, 500);
  144. } else if (curTab.value == 2) {
  145. type.value = 'shwssjl';
  146. // 生活污水收集率
  147. newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengShengHuoWS', kaifengShengHuoWS, tuLi72X, 20, 1.3, 5); //图层名、图层geojson,图标,标注每行多少个字,行间距
  148. setTimeout(() => {
  149. newfiberMapbox.map.easeTo({
  150. center: [114.365, 34.763],
  151. zoom: 11.6,
  152. });
  153. }, 500);
  154. } else {
  155. type.value = 'cqjsbod';
  156. // 进水BOD
  157. newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengBOD', kaifengBOD, tuLi72X, 20, 1.3, 5); //图层名、图层geojson,图标,标注每行多少个字,行间距
  158. setTimeout(() => {
  159. newfiberMapbox.map.easeTo({
  160. center: [114.365, 34.763],
  161. zoom: 11.6,
  162. });
  163. }, 500);
  164. }
  165. getjb();
  166. getkhzn();
  167. };
  168.  
  169. // 产出绩效公共指标信息
  170. async function getjb() {
  171. let res = await quotaCommomInfoList({
  172. quotaCode: type.value,
  173. year: currentYear.value,
  174. });
  175. if (res && res.code == 200) {
  176. let data = res.data;
  177. quotaInfo.value = data && data.length ? data[0] : {};
  178. quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split(';') : [];
  179. }
  180. }
  181. // 产出绩效公共指标信息
  182. async function getkhzn() {
  183. let res = await hmyztQuotaDataList({
  184. quotaType: type.value,
  185. year: currentYear.value,
  186. });
  187. if (res && res.code == 200) {
  188. tableData.value = res.data;
  189. }
  190. }
  191.  
  192. //地图渲染河湖水质
  193. const addOdorousWaterBodies = async () => {
  194. let params = {
  195. examineYear: currentYear.value,
  196. };
  197. let res = await blackWaterInfoList(params);
  198. if (res && res.code == 200) {
  199. let datas = res.data;
  200. let black_odor = [],
  201. black_odor_label = [];
  202. //河湖水质,新增一些其他的湖泊
  203. datas = datas.concat(riverList);
  204. datas.forEach(item => {
  205. item.isExamine = 1; //全部都治理完毕
  206. item.fillcolor = item.isExamine == 1 ? '#B673FF' : '#d9001b';
  207. let waterLine = turf.feature(Terraformer.WKT.parse(item.geometrys), item);
  208. let waterLabel = turf.center(waterLine, {
  209. properties: item,
  210. });
  211. black_odor.push(waterLine);
  212. black_odor_label.push(waterLabel);
  213. });
  214. let waterLineGeojson = turf.featureCollection(black_odor);
  215. let waterLabelGeojson = turf.featureCollection(black_odor_label);
  216. if (!newfiberMapbox.map.getLayer('waterLine')) {
  217. newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson });
  218. newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson });
  219. newfiberMapbox.map.addLayer({
  220. id: 'waterLine',
  221. type: 'line',
  222. source: 'waterLine',
  223. paint: {
  224. 'line-color': ['get', 'fillcolor'],
  225. 'line-width': 5,
  226. },
  227. });
  228.  
  229. newfiberMapbox.map.addLayer({
  230. id: 'waterLabel',
  231. type: 'symbol',
  232. source: 'waterLabel',
  233. layout: {
  234. 'text-field': ['get', 'blackWaterName'],
  235. 'text-font': ['KlokanTech Noto Sans Regular'],
  236. 'text-size': 16,
  237. 'text-offset': [0, 2],
  238. },
  239. paint: {
  240. 'text-halo-color': 'rgba(238, 251, 255,1)',
  241. 'text-color': ['get', 'fillcolor'],
  242. 'icon-opacity': 1,
  243. 'text-halo-width': 1,
  244. },
  245. });
  246. } else {
  247. newfiberMapbox.map.getSource('waterLine').setData(waterLineGeojson);
  248. newfiberMapbox.map.getSource('waterLabel').setData(waterLabelGeojson);
  249. }
  250.  
  251. //newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies');
  252. }
  253. };
  254.  
  255. // 点击河湖水质查看监测指标详情
  256. const queryYearStatist = async () => {
  257. let params = {
  258. blackWaterCode: blackWaterCodeA.value,
  259. sampleDate: ExamineYearA.value,
  260. };
  261. const res = await queryYearStatistic(params);
  262. refresh1.value++;
  263. refresh2.value++;
  264. refresh3.value++;
  265. refresh4.value++;
  266. echartData1.value.xAxis = res.data.datelist;
  267. echartData1.value.seriesData = res.data.tralist;
  268. echartData2.value.xAxis = res.data.datelist;
  269. echartData2.value.seriesData = res.data.nh3nlist;
  270. echartData3.value.xAxis = res.data.datelist;
  271. echartData3.value.seriesData = res.data.dolist;
  272. echartData4.value.xAxis = res.data.datelist;
  273. echartData4.value.seriesData = res.data.orplist;
  274. // console.log(echartData1.value, '123');
  275. };
  276.  
  277. onMounted(() => {
  278. // 切换年份
  279. bus.on('changeYearKH', e => {
  280. currentYear.value = e;
  281. getjb();
  282. getkhzn();
  283. setTimeout(() => {
  284. // 地图河湖水质点击查看监测数据详情
  285. newfiberMapbox.map.on('click', 'waterLine', 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 == 'odorousWaterBodies' || i.layer.id == 'waterLine');
  292. .filter(i => i.layer.id == 'waterLine');
  293. dialogShow.value = true;
  294. blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
  295. blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
  296.  
  297. queryYearStatist();
  298. console.log('clickfeature', '点击事件11', clickfeature);
  299. // emits('clicksWaterBodies', clickfeature[0].properties);
  300. });
  301. }, 5000);
  302. });
  303. });
  304. onBeforeUnmount(() => {
  305. bus.off('changeYearKH');
  306. });
  307. </script>
  308. <style lang="scss">
  309. .hcstDialog {
  310. display: flex;
  311. flex-wrap: wrap;
  312. .part {
  313. width: 48%;
  314. margin-right: 2%;
  315. .title {
  316. font-size: 18px;
  317. font-weight: bold;
  318. color: #fff;
  319. }
  320. .chart {
  321. height: 300px !important;
  322. }
  323. }
  324. }
  325. .chanChuJiXiao {
  326. width: 460px;
  327.  
  328. .ListBoxBody {
  329. background: rgba(8, 75, 125, 1);
  330. padding: 10px;
  331. margin-top: -3px;
  332. .content {
  333. height: 100%;
  334.  
  335. .target,
  336. .measures,
  337. .achievements {
  338. background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
  339. border-radius: 3px;
  340. width: 100%;
  341. height: 40px;
  342. padding: 0 10px;
  343.  
  344. .titles {
  345. width: 50px;
  346. font-size: 16px;
  347. color: #ffffff;
  348. position: relative;
  349. height: 20px;
  350. margin-top: 15px;
  351.  
  352. .mbs {
  353. position: absolute;
  354. top: -10px;
  355. left: 5px;
  356. }
  357. }
  358.  
  359. .titlesmb {
  360. background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
  361. }
  362.  
  363. .titlecs {
  364. background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
  365. }
  366.  
  367. .titlecg {
  368. background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
  369. }
  370. }
  371.  
  372. .measures {
  373. margin-top: 5px;
  374. }
  375.  
  376. .valsText {
  377. color: #58d6ff;
  378. margin-left: 10px;
  379. font-size: 14px;
  380. overflow: hidden;
  381. text-overflow: ellipsis;
  382. white-space: nowrap;
  383. }
  384. .achievements {
  385. font-family: Source Han Sans CN;
  386. font-size: 18px;
  387.  
  388. margin-top: 10px !important;
  389.  
  390. .vals {
  391. color: #00fe00 !important;
  392. margin-left: 20px;
  393. }
  394. .colors1 {
  395. color: #00fe00;
  396. }
  397. .colors2 {
  398. color: #ff5e66;
  399. }
  400. }
  401.  
  402. .bottom {
  403. width: 100%;
  404. height: 50px;
  405. background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
  406. color: #58d6ff;
  407. font-size: 14px;
  408. padding: 5px;
  409. overflow-y: scroll;
  410. justify-content: flex-start;
  411. display: flex;
  412. }
  413. }
  414. }
  415.  
  416. .tabs {
  417. float: right;
  418. margin: 8px 40px 0px 0px;
  419. .tabItem {
  420. width: 78px;
  421. height: 24px;
  422. line-height: 24px;
  423. background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
  424. background-size: 100% 100%;
  425. margin-left: 10px;
  426. font-size: 14px;
  427. color: #ffffff;
  428. text-align: center;
  429. cursor: pointer;
  430.  
  431. &:first-of-type {
  432. margin-left: 0;
  433. }
  434.  
  435. &.active {
  436. background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
  437. background-size: 100% 100%;
  438. }
  439. }
  440. }
  441. }
  442. .jcxx {
  443. width: 450px;
  444. height: 360px;
  445. color: #ffffff;
  446. .hcmsg {
  447. font-size: 14px;
  448. line-height: 20px;
  449. }
  450. .img_box {
  451. margin-top: 10px;
  452. width: 100%;
  453. height: 160px;
  454. overflow-y: scroll;
  455. flex-wrap: wrap;
  456. .img {
  457. width: 100px;
  458. height: 100px;
  459. }
  460. }
  461. }
  462. </style>