Newer
Older
DH_Apicture / src / views / pictureOnMap / page / MonitoringAnalysis / tab_components / ydfx.vue
@zhangqy zhangqy on 3 Dec 16 KB 优化
  1. <template>
  2. <div id="ydfx">
  3. <!-- 公用部分,所有弹窗都要的分区查询,由于类型较多,不封装,通过复制代码公用 -->
  4. <div class="JCFX_Com_SearchBox">
  5. <el-form :model="Search_form" label-width="auto" :inline="true">
  6. <el-form-item :label="TypeID == 'sewage' ? '污水系统' : '汇水分区'">
  7. <el-select
  8. v-model="Search_form.oneID"
  9. style="width: 160px"
  10. @change="OneChange()"
  11. >
  12. <el-option
  13. v-for="item in AllData.oneOptions"
  14. :key="item.id"
  15. :label="item.name"
  16. :value="item.id"
  17. />
  18. </el-select>
  19. </el-form-item>
  20. <el-form-item :label="TypeID == 'sewage' ? '污水片区' : '汇水片区'">
  21. <el-select
  22. v-model="Search_form.twoID"
  23. style="width: 160px"
  24. @change="TwoChange()"
  25. >
  26. <el-option
  27. v-for="item in AllData.twoOptions"
  28. :key="item.id"
  29. :label="item.name"
  30. :value="item.id"
  31. />
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item :label="TypeID == 'sewage' ? '污水干管' : '雨水干管'">
  35. <el-select
  36. v-model="Search_form.threeID"
  37. style="width: 160px"
  38. @change="ThreeChange()"
  39. >
  40. <el-option
  41. v-for="item in AllData.threeOptions"
  42. :key="item.id"
  43. :label="item.name"
  44. :value="item.id"
  45. />
  46. </el-select>
  47. </el-form-item>
  48. <el-form-item label="排水单元">
  49. <el-select v-model="Search_form.fourID" style="width: 160px">
  50. <el-option
  51. v-for="item in AllData.fourOptions"
  52. :key="item.id"
  53. :label="item.name"
  54. :value="item.id"
  55. />
  56. </el-select>
  57. </el-form-item>
  58. <el-form-item label="井编号">
  59. <el-input v-model="Search_form.JBH" style="width: 160px" clearable />
  60. </el-form-item>
  61. <!-- <el-form-item label="复勘状态">
  62. <el-select v-model="Search_form.FKID" style="width: 160px">
  63. <el-option
  64. v-for="item in AllData.FKOptions"
  65. :key="item.id"
  66. :label="item.name"
  67. :value="item.id"
  68. />
  69. </el-select>
  70. </el-form-item> -->
  71. <el-form-item label="位置关键字">
  72. <el-input v-model="Search_form.GJZ" style="width: 240px" clearable />
  73. </el-form-item>
  74. <el-form-item>
  75. <el-button color="#0B9BFF" :icon="Search" @click="getTableData">搜索</el-button>
  76. </el-form-item>
  77. </el-form>
  78. </div>
  79. <!-- 业务部分 -->
  80. <div class="JCFX_Com_Body">
  81. <el-table
  82. class="JCFX_Com_Table"
  83. :data="AllData.tableData"
  84. height="100%"
  85. style="width: 100%"
  86. stripe
  87. v-loading="AllData.TBloading"
  88. element-loading-text="加载中..."
  89. element-loading-background="rgba(0, 0, 0, 0.8)"
  90. >
  91. <el-table-column type="index" label="序号" width="60" />
  92. <!-- <el-table-column
  93. prop="dataName"
  94. label="检查井号"
  95. width="100"
  96. show-overflow-tooltip
  97. /> -->
  98. <el-table-column prop="stCode" label="监测编号" width="100" show-overflow-tooltip
  99. ><template #default="scope">
  100. {{ scope.row.stCode ? scope.row.stCode : "-" }}
  101. </template>
  102. </el-table-column>
  103. <el-table-column prop="address" label="监测位置" width="180">
  104. <template #default="scope">
  105. <div class="color_blue" @click="ClickZBQJ2(scope.row)">
  106. {{ scope.row.address }}
  107. </div>
  108. </template>
  109. </el-table-column>
  110. <el-table-column prop="tt" label="监测日期" width="140">
  111. <template #default="scope">
  112. {{ scope.row.tt ? scope.row.tt : "-" }}
  113. </template>
  114. </el-table-column>
  115. <el-table-column prop="problemAnalysis" label="问题分析">
  116. <template #default="scope">
  117. {{ scope.row.problemAnalysis ? scope.row.problemAnalysis : "-" }}
  118. </template>
  119. </el-table-column>
  120. <el-table-column prop="duration" label="持续时长" width="100">
  121. <template #default="scope">
  122. {{ scope.row.duration ? scope.row.duration : "-" }}
  123. </template>
  124. </el-table-column>
  125. <el-table-column prop="watchName" label="所属分区" width="120">
  126. <template #default="scope">
  127. {{ scope.row.watchName ? scope.row.watchName : "-" }}
  128. </template>
  129. </el-table-column>
  130. <el-table-column label="操作" width="100">
  131. <template #default="scope">
  132. <el-button type="primary" link @click="rowIgnore(scope.row)">详情</el-button>
  133. </template>
  134. </el-table-column>
  135. </el-table>
  136. <div class="paginationBox">
  137. <el-pagination
  138. layout="total, sizes, prev, pager, next, jumper"
  139. :page-size="Search_form.query.size"
  140. :total="Search_form.query.total"
  141. @size-change="handleSizeChange"
  142. @current-change="handleCurrentChange"
  143. />
  144. </div>
  145. </div>
  146. </div>
  147. </template>
  148.  
  149. <script setup name="ydfx">
  150. import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
  151. import usepartitionStore from "@/store/modules/partition";
  152. import { listPipelineDefectRisk } from "@/api/MonitoringAnalysis";
  153. const useStore = usepartitionStore();
  154. import { Search } from "@element-plus/icons-vue";
  155. import bus from "@/bus";
  156. const props = defineProps({
  157. //污水/雨水
  158. TypeID: {
  159. type: [String],
  160. default: "sewage",
  161. },
  162. //当前父页面选择的层级数据
  163. FenQuData: {
  164. type: Array,
  165. },
  166. //点击echarts图形对应的数据名称
  167. lastFQName: {
  168. type: String,
  169. },
  170. // 时间
  171. TimerData: {
  172. type: Array,
  173. },
  174. });
  175. const Search_form = reactive({
  176. oneID: "",
  177. twoID: "",
  178. threeID: "",
  179. fourID: "",
  180. FKID: "",
  181. JBH: "",
  182. GJZ: "",
  183. query: {
  184. current: 1,
  185. size: 10,
  186. total: 0,
  187. },
  188. });
  189. const AllData = reactive({
  190. oneOptions: [{ name: "全部", shortName: "全部", id: "" }],
  191. twoOptions: [{ name: "全部", shortName: "全部", id: "" }],
  192. threeOptions: [{ name: "全部", shortName: "全部", id: "" }],
  193. fourOptions: [{ name: "全部", shortName: "全部", id: "" }],
  194. FKOptions: [
  195. { name: "全部", id: "" },
  196. { name: "已复勘", id: "true" },
  197. { name: "未复勘", id: "false" },
  198. ],
  199. tableData: [],
  200. TBloading: false,
  201. });
  202. const handleSizeChange = (val) => {
  203. Search_form.query.size = val;
  204. console.log(Search_form.query);
  205. getTableData();
  206. };
  207. const handleCurrentChange = (val) => {
  208. Search_form.query.current = val;
  209. console.log(Search_form.query);
  210. getTableData();
  211. };
  212. // 一级下拉框选择
  213. const OneChange = () => {
  214. console.log(Search_form.oneID);
  215. // 通过id获取到下一级数据
  216. AllData.twoOptions = [{ name: "全部", shortName: "全部", id: "" }];
  217. Search_form.twoID = "";
  218. AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
  219. Search_form.threeID = "";
  220. AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  221. Search_form.fourID = "";
  222. AllData.oneOptions.forEach((element) => {
  223. if (element.id == Search_form.oneID) {
  224. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  225. }
  226. });
  227. };
  228. // 二级下拉框选择
  229. const TwoChange = () => {
  230. console.log(Search_form.twoID);
  231. //通过id获取到下一级数据
  232. AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
  233. Search_form.threeID = "";
  234. AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  235. Search_form.fourID = "";
  236. AllData.twoOptions.forEach((element) => {
  237. if (element.id == Search_form.twoID) {
  238. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  239. }
  240. });
  241. };
  242. // 三级下拉框选择
  243. const ThreeChange = () => {
  244. console.log(Search_form.threeID);
  245. //通过id获取到下一级数据
  246. AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  247. Search_form.fourID = "";
  248. AllData.threeOptions.forEach((element) => {
  249. if (element.id == Search_form.threeID) {
  250. AllData.fourOptions = AllData.fourOptions.concat(element.childList);
  251. }
  252. });
  253. };
  254. // 获取数据
  255. const getTableData = () => {
  256. AllData.TBloading = true;
  257. AllData.tableData = [];
  258. listPipelineDefectRisk({
  259. regionType: props.TypeID, //分区类型(sewage:污水 || rain:雨水)
  260. analysisType: "risk", //分析类型:(defect:本地缺陷 || risk:风险分析)
  261. queryType: props.TypeID == "sewage" ? "siltRisk" : "sewageInject", //查询类型:(slope:坡度 || big_cover_small:大管套小管 || mix:混接 || sewageQualityAbnormal:水质异常 || outerWaterInject:外水注入 || siltRisk:淤堵风险 || fullPipe:满管 || overFlow:溢流风险 || groundwaterInflow:地下水渗入 || sewageInject:污水注入)
  262. startTime: props.TimerData[0],
  263. endTime: props.TimerData[1],
  264. oneGradeId: Search_form.oneID, //一级分区id
  265. twoGradeId: Search_form.twoID, //二级分区id
  266. threeGradeId: Search_form.threeID, //三级分区id
  267. fourGradeId: Search_form.fourID, //四级分区id
  268. pageNum: Search_form.query.current,
  269. pageSize: Search_form.query.size,
  270. pointNumber: Search_form.JBH, //井编号
  271. resurveyFlag: Search_form.FKID, //复勘状态
  272. location: Search_form.GJZ, //位置关键字
  273. }).then(
  274. (res) => {
  275. AllData.TBloading = false;
  276. if (res && res.code == 200) {
  277. AllData.tableData = res.data.dataSiteRelationVoList;
  278. Search_form.query.total = res.total;
  279. }
  280. },
  281. (err) => {
  282. AllData.TBloading = false;
  283. // 失败
  284. }
  285. );
  286. };
  287.  
  288. const rowIgnore = (item) => {
  289. item.RefName = props.TypeID == "sewage" ? "ydfxfxJCFX" : "wszrfxJCFX";
  290. item.daterange = [item.tt + " 00:00:00", item.tt + " 23:59:59"];
  291. item.GWDADataNow = true; //管网风险
  292. bus.emit("DynamicBus", item);
  293. // localStorage.setItem("JCFXDialogTimer", item.tt);
  294. };
  295. // 打开周边全景
  296. const ClickZBQJ2 = (item) => {
  297. item.RefName = "zhoubianjiejing";
  298. item.NoPromise = true;
  299. item.Getmenuarr = [
  300. {
  301. menuName: "周边全景",
  302. moduleName: "zhoubianjiejing",
  303. pointName: "",
  304. pointType: "",
  305. show: true,
  306. },
  307. {
  308. menuName: "管网档案",
  309. moduleName: "guanwangpoumian",
  310. pointName: "",
  311. pointType: "",
  312. show: true,
  313. },
  314. ];
  315. item.comIDs = ["zhoubianjiejing", "guanwangpoumian"];
  316. item.GWDADataNow = true; //管网风险
  317. bus.emit("DynamicBus", item);
  318. };
  319. onMounted(() => {
  320. // 下拉框赋值
  321. nextTick(() => {
  322. // 一级菜单选项赋值
  323. let Data = props.TypeID == "sewage" ? useStore.sewageData : useStore.rainData;
  324. AllData.oneOptions = AllData.oneOptions.concat(Data);
  325. // 根据外层点击的层级赋值
  326. console.log(props.FenQuData);
  327. console.log(props.lastFQName);
  328. // 通过判断父级FenQuData选择了几层数据,确定lastFQName对应的层级,FenQuData有一条非空数据:lastFQName对应一级...
  329. let CengJi = 0;
  330. props.FenQuData.forEach((element) => {
  331. if (element.abbreviation != "") CengJi++;
  332. });
  333. // 根据层级的数量来动态判断默认选中下拉框
  334. if (CengJi == 2) {
  335. // 赋值一级
  336. Search_form.oneID = Number(props.FenQuData[1].id);
  337. // 二级下拉框数据赋值
  338. AllData.oneOptions.forEach((element) => {
  339. if (element.id == Search_form.oneID) {
  340. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  341. }
  342. });
  343. // 二级下拉框选中以及给三级下拉框赋值
  344. AllData.twoOptions.forEach((element) => {
  345. if (element.shortName == props.lastFQName) {
  346. Search_form.twoID = element.id;
  347. //给三级下拉框赋值
  348. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  349. }
  350. });
  351. } else if (CengJi == 3) {
  352. // 赋值一级
  353. Search_form.oneID = Number(props.FenQuData[1].id);
  354. // 赋值二级
  355. Search_form.twoID = Number(props.FenQuData[2].id);
  356. // 二级下拉框数据赋值
  357. AllData.oneOptions.forEach((element) => {
  358. if (element.id == Search_form.oneID) {
  359. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  360. }
  361. });
  362. // 二级下拉框选中以及给三级下拉框赋值
  363. AllData.twoOptions.forEach((element) => {
  364. if (element.id == Search_form.twoID) {
  365. Search_form.twoID = element.id;
  366. //给三级下拉框赋值
  367. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  368. }
  369. });
  370. //三级下拉框选中以及给四级下拉框赋值
  371. AllData.threeOptions.forEach((element) => {
  372. if (element.shortName == props.lastFQName) {
  373. Search_form.threeID = element.id;
  374. //给三级下拉框赋值
  375. AllData.fourOptions = AllData.fourOptions.concat(element.childList);
  376. }
  377. });
  378. } else if (CengJi == 4) {
  379. // 赋值一级
  380. Search_form.oneID = Number(props.FenQuData[1].id);
  381. // 赋值二级
  382. Search_form.twoID = Number(props.FenQuData[2].id);
  383. // 赋值三级
  384. Search_form.threeID = Number(props.FenQuData[3].id);
  385. // 二级下拉框数据赋值
  386. AllData.oneOptions.forEach((element) => {
  387. if (element.id == Search_form.oneID) {
  388. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  389. }
  390. });
  391. // 二级下拉框选中以及给三级下拉框赋值
  392. AllData.twoOptions.forEach((element) => {
  393. if (element.id == Search_form.twoID) {
  394. Search_form.twoID = element.id;
  395. //给三级下拉框赋值
  396. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  397. }
  398. });
  399. //三级下拉框选中以及给四级下拉框赋值
  400. AllData.threeOptions.forEach((element) => {
  401. if (element.id == Search_form.threeID) {
  402. Search_form.threeID = element.id;
  403. //给三级下拉框赋值
  404. AllData.fourOptions = AllData.fourOptions.concat(element.childList);
  405. }
  406. });
  407. //四级下拉框选中
  408. AllData.fourOptions.forEach((element) => {
  409. if (element.shortName == props.lastFQName) {
  410. Search_form.fourID = element.id;
  411. }
  412. });
  413. } else {
  414. // CengJi =1
  415. AllData.oneOptions.forEach((element) => {
  416. if (element.shortName == props.lastFQName) {
  417. Search_form.oneID = element.id;
  418. //给二级下拉框赋值
  419. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  420. }
  421. });
  422. }
  423. getTableData();
  424. });
  425. });
  426. </script>
  427.  
  428. <style lang="scss" scoped>
  429. #ydfx {
  430. width: 100%;
  431. height: 100%;
  432.  
  433. :deep(.JCFX_Com_SearchBox) {
  434. height: 110px;
  435. width: 100%;
  436. .el-form-item__label {
  437. font-family: Source Han Sans CN;
  438. font-weight: bold;
  439. font-size: 14px;
  440. color: #ccdfff;
  441. }
  442. .el-input__wrapper {
  443. background: #0d2359;
  444. border-radius: 6px;
  445. border: 1px solid #0b9bff;
  446. box-shadow: none;
  447.  
  448. .el-input__inner {
  449. color: #8fbffe;
  450. }
  451. }
  452. .el-select {
  453. background: #0d2359;
  454. }
  455. }
  456. .JCFX_Com_Body {
  457. width: 100%;
  458. height: calc(100% - 165px);
  459.  
  460. :deep(.JCFX_Com_Table) {
  461. &.el-table {
  462. font-family: Source Han Sans CN;
  463. background: none;
  464. width: 100%;
  465. height: calc(100% - 50px);
  466. }
  467. .el-table__inner-wrapper::before {
  468. height: 0;
  469. }
  470. tr {
  471. background: #ffffff00;
  472. }
  473. td.el-table__cell,
  474. th.el-table__cell.is-leaf {
  475. border-color: #ffffff00;
  476. color: #ccdfff;
  477. font-weight: lighter !important;
  478. }
  479. &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  480. background: #0d2359;
  481. }
  482. .el-table__header-wrapper th {
  483. background: #153990 !important;
  484. }
  485.  
  486. th {
  487. color: #ffffff !important;
  488. font-size: 14px;
  489. }
  490.  
  491. &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  492. background: rgba(13, 57, 139, 0.7);
  493. }
  494.  
  495. .color_aqua {
  496. color: #00fcff;
  497. }
  498.  
  499. .color_blue {
  500. color: #2cb7ff;
  501. font-size: 14px;
  502. font-weight: 100 !important;
  503. cursor: pointer;
  504. }
  505. }
  506. }
  507. // 分页样式
  508. .paginationBox {
  509. padding-top: 15px;
  510. text-align: right;
  511. display: flex;
  512. justify-content: flex-end;
  513. flex-direction: row;
  514. flex-wrap: nowrap;
  515. font-family: Source Han Sans CN;
  516. }
  517. }
  518. </style>