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