Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / component / paikouxiangqing.vue
@zhangqy zhangqy on 29 Nov 11 KB first commit
  1. <template>
  2. <div id="paikouxiangqing">
  3. <div class="dialog-detail-box">
  4. <div class="dialog-form-detail flex flex-r flex-wrap">
  5.  
  6. <div class="flex flex-r">
  7. <div class="detail-label flex flex-align-center">污水来源</div>
  8. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.sewageSource">
  9. <span class="ellipsis">{{ dialogFormDetail.sewageSource }}</span>
  10. </div>
  11. </div>
  12. <div class="flex flex-r">
  13. <div class="detail-label flex flex-align-center">溯源情况</div>
  14. <div class="detail-value flex flex-align-center" :title="dialogFormDetail.traceabilitySituation">
  15. <span class="ellipsis">{{ dialogFormDetail.traceabilitySituation }}</span>
  16. </div>
  17. </div>
  18.  
  19. <el-divider />
  20. <div class="bottombox">
  21. <div class="boxitem">
  22. <div class="boxtitle">采样监测</div>
  23. <div class="boxcontentPK">
  24. <div class="leftment">
  25. <div
  26. class="items"
  27. @click="itemclick(item)"
  28. :class="itemactived == item.id ? 'actived' : ''"
  29. v-for="item in menuList"
  30. :key="item.id"
  31. >
  32. <span :title="item.monitorTime">{{ item.monitorTime }}</span>
  33. <span class="PKshuizhi">
  34. {{ getpaikouInfo(item.waterQualityLevel,water_quality_target) }}
  35. </span>
  36. </div>
  37. </div>
  38. <div class="rightbox">
  39. <div class="item" >
  40. <div class="itemname">pH</div>
  41. <div class="itemvalue">{{ leftboxList.ph }}</div>
  42. </div>
  43. <div class="item" >
  44. <div class="itemname">氨氮(mg/L)</div>
  45. <div class="itemvalue">{{ leftboxList.nh3n }}</div>
  46. </div>
  47. <div class="item" >
  48. <div class="itemname">化学需氧量(mg/L)</div>
  49. <div class="itemvalue">{{ leftboxList.oxygen }}</div>
  50. </div>
  51. <div class="item" >
  52. <div class="itemname">总磷(mg/L)</div>
  53. <div class="itemvalue">{{ leftboxList.p }}</div>
  54. </div>
  55. <div class="item" >
  56. <div class="itemname">总氮(mg/L)</div>
  57. <div class="itemvalue">{{ leftboxList.n }}</div>
  58. </div>
  59. <div class="item" >
  60. <div class="itemname">水温(℃)</div>
  61. <div class="itemvalue">{{ leftboxList.temperature }}</div>
  62. </div>
  63. <div class="item" >
  64. <div class="itemname">BOD</div>
  65. <div class="itemvalue">{{ leftboxList.bod }}</div>
  66. </div>
  67. <div class="item" >
  68. <div class="itemname">挥发酚</div>
  69. <div class="itemvalue">{{ leftboxList.volatilePhenol }}</div>
  70. </div>
  71. <div class="item" >
  72. <div class="itemname">流量(m³/天)</div>
  73. <div class="itemvalue">{{ leftboxList.q }}</div>
  74. </div>
  75. <div class="item" >
  76. <div class="itemname">检测方式</div>
  77. <div class="itemvalue">{{ getpaikouInfo(leftboxList.detection.rujianghe) }}</div>
  78. </div>
  79. <div class="item" >
  80. <div class="itemname">备注</div>
  81. <div class="itemvalue">{{ leftboxList.remark }}</div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="boxitem">
  87. <div class="boxtitle">整治情况</div>
  88. <div class="twocontent">
  89. <div class="item item2">
  90. <div class="itemnametwo">整治时间</div>
  91. <div class="itemvaluetwo">{{ rightboxlist.regulateTime }}</div>
  92. </div>
  93. <div class="item item2">
  94. <div class="itemnametwo">整治类型</div>
  95. <div class="itemvaluetwo">{{ rightboxlist.regulateType }}</div>
  96. </div>
  97. <div class="item item2">
  98. <div class="itemnametwo">整治进展</div>
  99. <div class="itemvaluetwo">{{ getpaikouInfo(rightboxlist.regulateState,zhengzhijinzhan) }}</div>
  100. </div>
  101. <div class="item item2">
  102. <div class="itemnametwo">整治标准及措施</div>
  103. <div class="itemvaluetwo">{{ rightboxlist.regulateMeasure }}</div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </template>
  112.  
  113. <script setup name="paikouxiangqing">
  114.  
  115. const { proxy } = getCurrentInstance();
  116. import { getChineseFun } from '@/utils/ruoyi';
  117. const rujianghe = proxy.fixDict['rujianghe'];
  118. const zhengzhijinzhan = proxy.fixDict['zhengzhijinzhan'];
  119. const { lake_level, project_scale, isNumberState, ownership, pump_station_type, usage_status, gate_type ,water_quality_target} = proxy.useDict(
  120. 'lake_level',
  121. 'project_scale',
  122. 'isNumberState',
  123. 'ownership',
  124. 'pump_station_type',
  125. 'usage_status',
  126. 'gate_type',
  127. 'water_quality_target'
  128. );
  129.  
  130. const props = defineProps({
  131. // 数据id
  132. dataID: {
  133. type: String,
  134. },
  135. dataCode: {
  136. type: String,
  137. },
  138. // 默认打开tabs的key
  139. RefreshName: {
  140. type: String,
  141. },
  142. tabsType: {
  143. type: String,
  144. },
  145. typeName: {
  146. type: String,
  147. },
  148. });
  149.  
  150. import { listwaterRegionInfo,getBaseDetail,outletMonitorList,outletRegulateList } from '@/api/MonitorAssetsOnMap';
  151.  
  152.  
  153. const alllist = ref([]);
  154. function getListlast() {
  155. listwaterRegionInfo().then(response => {
  156. alllist.value = response.data;
  157. });
  158. }
  159.  
  160. const setnamobj = ref([]);
  161. const dialogFormDetail = ref([]);
  162.  
  163. const menuList = ref();
  164.  
  165. const leftboxList = ref({});
  166.  
  167. const rightboxlist = ref({});
  168.  
  169. const itemactived = ref('1');
  170.  
  171. function switchPropsName() {
  172. switch (props.typeName) {
  173. case 'hupo':
  174. setnamobj.value = [
  175. { name: '湖泊名称', value: '' },
  176. { name: '湖泊类型', value: '' },
  177. { name: '所属水系', value: '' },
  178. { name: '境内面积km²', value: '' },
  179. { name: '总面积km²', value: '' },
  180. { name: '湖泊库容(万m³)', value: '' },
  181. { name: '总库容(万m³)', value: '' },
  182. { name: '岸线长度km', value: '' },
  183. { name: '水质目标', value: '' },
  184. { name: '常水位(m)', value: '' },
  185. { name: '生态水位(m)', value: '' },
  186. { name: '控制水位(m)', value: '' },
  187. { name: '管理部门', value: '', type: '' },
  188. { name: '描述', value: '', type: 'textarea' },
  189. { name: '图片', value: '1,2', type: 'img' },
  190. ];
  191.  
  192. break;
  193. case 'bengzhan':
  194. setnamobj.value = [
  195. { name: '泵站名称', value: '' },
  196. { name: '泵站类型', value: '' },
  197. { name: '泵机个数', value: '' },
  198. { name: '设计流量(m/s)', value: '' },
  199. { name: '装机功率', value: '' },
  200. { name: '权属', value: '' },
  201. { name: '泵站状态', value: '' },
  202. { name: '建成日期', value: '' },
  203. { name: '使用年限', value: '' },
  204. { name: '维护日期', value: '' },
  205. { name: '运维单位', value: '' },
  206. { name: '管理负责人', value: '' },
  207. { name: '负责人联系方式', value: '' },
  208. { name: '泵站图片', value: '1,2', type: 'img' },
  209. ];
  210. break;
  211.  
  212. case 'shuiku':
  213. setnamobj.value = [
  214. { name: '水库名称', value: '' },
  215. { name: '水库编号', value: '' },
  216. { name: '所属水系', value: '' },
  217. { name: '水库类型', value: '' },
  218. { name: '所在(村/街道)', value: '' },
  219. { name: '集水面积(km2)', value: '' },
  220. { name: '总库容(万m³)', value: '' },
  221. { name: '调洪库容(万)', value: '' },
  222. { name: '水质目标', value: '' },
  223. { name: '常水位(m)', value: '' },
  224. { name: '生态水位(m)', value: '' },
  225. { name: '控制水位(m)', value: '' },
  226. { name: '管理部门', value: '', type: '' },
  227. { name: '描述', value: '', type: 'textarea' },
  228. { name: '图片', value: '1,2', type: 'img' },
  229. ];
  230.  
  231. break;
  232. }
  233. }
  234.  
  235. function itemclick(item) {
  236. itemactived.value = item.id;
  237. leftboxList.value=item
  238. }
  239.  
  240. // 获取排口详情
  241. function getDetailBycodeAndDataid() {
  242. let params = {
  243. dataId: props.dataID,
  244. dataCode: props.dataCode,
  245. };
  246. getBaseDetail(params).then(res => {
  247. console.log('排口详情', res);
  248. dialogFormDetail.value = res.data;
  249. });
  250. }
  251. // 获取排口监测数据
  252. function getMonitorPK() {
  253. let params = {
  254. id: props.dataID,
  255. };
  256. outletMonitorList(params).then(res => {
  257. console.log('排口监测列表详情', res);
  258. menuList.value = res.data;
  259. if(res.data?.length>0){
  260. itemactived.value=res.data[0].id
  261. leftboxList.value=res.data[0]
  262.  
  263. }
  264. });
  265. }
  266. function getRenovatePK() {
  267. let params = {
  268. outletId: props.dataID,
  269. };
  270. outletRegulateList(params).then(res => {
  271. console.log('排口整治列表详情', res);
  272. if(res.data?.length>0){
  273. rightboxlist.value=res.data[0]
  274.  
  275. }
  276. });
  277. }
  278. // 排口相关name
  279. const getpaikouInfo = (id,data) => {
  280. return getChineseFun(data, 'value', id, 'label');
  281. };
  282. onMounted(() => {
  283. getDetailBycodeAndDataid()
  284. getMonitorPK()
  285. getRenovatePK()
  286. // getListlast();
  287.  
  288. // switchPropsName();
  289. console.log('props', props);
  290. });
  291. </script>
  292.  
  293. <style lang="scss" scoped>
  294. #paikouxiangqing {
  295. width: 100%;
  296. height: 100%;
  297. color: #ccefff;
  298.  
  299. .dialog-detail-box {
  300. width: 100%;
  301. height: 100%;
  302. display: flex;
  303. padding: 0 10px;
  304. flex-wrap: wrap;
  305. overflow: hidden;
  306. overflow-y: auto;
  307. font-weight: bold;
  308.  
  309. .detail-label {
  310. font-size: 12px;
  311. text-align: left;
  312. width: 140px;
  313. background: transparent;
  314. color: #ccefff;
  315. border: none;
  316. }
  317.  
  318. .dialog-form-detail {
  319. border: none;
  320. }
  321.  
  322. .dialog-form-detail .flex-r {
  323. border: none;
  324. }
  325. }
  326. }
  327.  
  328. .width100 {
  329. width: 100% !important;
  330. }
  331. .img,
  332. .textarea {
  333. width: 100% !important;
  334. }
  335.  
  336. .bottombox {
  337. display: flex;
  338. width: 100%;
  339.  
  340. .boxitem {
  341. width: 50%;
  342.  
  343. .boxtitle {
  344. text-align: center;
  345. width: 100%;
  346. font-size: 18px;
  347. padding-bottom: 10px;
  348. color: #2faeff;
  349. }
  350.  
  351. .twocontent {
  352. height: 180px;
  353. overflow: hidden;
  354. overflow-y: auto;
  355. }
  356.  
  357. .boxcontentPK {
  358. height: 280px;
  359. display: flex;
  360. // overflow: hidden;
  361. // overflow-y: auto;
  362.  
  363. .leftment {
  364. height: 100%;
  365. width: 180px;
  366. overflow: hidden;
  367. overflow: auto;
  368. background: #304b7d;
  369. padding: 5px;
  370. box-sizing: border-box;
  371.  
  372. .items {
  373. cursor: pointer;
  374. width: 100%;
  375. // text-align: center;
  376. position: relative;
  377. margin: 12px 0 ;
  378. box-sizing: border-box;
  379.  
  380. .PKshuizhi {
  381. display: inline-block;
  382. position: absolute;
  383. right: -5px;
  384. top: -8px;
  385. padding: 5px 10px;
  386. background: red;
  387. color: #fff;
  388. border-radius: 10px;
  389. box-sizing: border-box;
  390. }
  391. &.actived {
  392. color: #2faeff;
  393. }
  394. }
  395. }
  396.  
  397. .rightbox {
  398. // width: calc(100% - 180px);
  399. flex: 1;
  400. height: 100%;
  401. overflow: auto;
  402. .item {
  403. margin-bottom: 5px;
  404. }
  405. }
  406. }
  407. }
  408.  
  409. .item {
  410. display: flex;
  411. justify-content: center;
  412. color: #ccefff;
  413.  
  414. .itemname {
  415. width: 100px;
  416. text-align: left;
  417. }
  418.  
  419. .itemvalue {
  420. width: 100px;
  421. }
  422.  
  423. .itemnametwo {
  424. width: 140px;
  425. text-align: left;
  426. }
  427.  
  428. .itemvaluetwo {
  429. width: calc(100% - 140px);
  430. }
  431. }
  432.  
  433. .item2 {
  434. min-height: 40px;
  435. }
  436. }
  437. </style>