Newer
Older
DH_Apicture / src / views / pictureOnMap / page / MonitoringAnalysis / tab_components / dxssr.vue
@zhangqy zhangqy on 3 Dec 16 KB 时间优化
  1. <template>
  2. <div id="dxssr">
  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="dxssr">
  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.  
  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. TimerData: {
  173. type: Array,
  174. },
  175. });
  176. const Search_form = reactive({
  177. oneID: "",
  178. twoID: "",
  179. threeID: "",
  180. fourID: "",
  181. FKID: "",
  182. JBH: "",
  183. GJZ: "",
  184. query: {
  185. current: 1,
  186. size: 10,
  187. total: 0,
  188. },
  189. });
  190. const AllData = reactive({
  191. oneOptions: [{ name: "全部", shortName: "全部", id: "" }],
  192. twoOptions: [{ name: "全部", shortName: "全部", id: "" }],
  193. threeOptions: [{ name: "全部", shortName: "全部", id: "" }],
  194. fourOptions: [{ name: "全部", shortName: "全部", id: "" }],
  195. FKOptions: [
  196. { name: "全部", id: "" },
  197. { name: "已复勘", id: "true" },
  198. { name: "未复勘", id: "false" },
  199. ],
  200. tableData: [],
  201. TBloading: false,
  202. });
  203. const handleSizeChange = (val) => {
  204. Search_form.query.size = val;
  205. console.log(Search_form.query);
  206. getTableData();
  207. };
  208. const handleCurrentChange = (val) => {
  209. Search_form.query.current = val;
  210. console.log(Search_form.query);
  211. getTableData();
  212. };
  213. // 一级下拉框选择
  214. const OneChange = () => {
  215. console.log(Search_form.oneID);
  216. // 通过id获取到下一级数据
  217. AllData.twoOptions = [{ name: "全部", shortName: "全部", id: "" }];
  218. Search_form.twoID = "";
  219. AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
  220. Search_form.threeID = "";
  221. AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  222. Search_form.fourID = "";
  223. AllData.oneOptions.forEach((element) => {
  224. if (element.id == Search_form.oneID) {
  225. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  226. }
  227. });
  228. };
  229. // 二级下拉框选择
  230. const TwoChange = () => {
  231. console.log(Search_form.twoID);
  232. //通过id获取到下一级数据
  233. AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
  234. Search_form.threeID = "";
  235. AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  236. Search_form.fourID = "";
  237. AllData.twoOptions.forEach((element) => {
  238. if (element.id == Search_form.twoID) {
  239. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  240. }
  241. });
  242. };
  243. // 三级下拉框选择
  244. const ThreeChange = () => {
  245. console.log(Search_form.threeID);
  246. //通过id获取到下一级数据
  247. AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  248. Search_form.fourID = "";
  249. AllData.threeOptions.forEach((element) => {
  250. if (element.id == Search_form.threeID) {
  251. AllData.fourOptions = AllData.fourOptions.concat(element.childList);
  252. }
  253. });
  254. };
  255. // 获取数据
  256. const getTableData = () => {
  257. AllData.TBloading = true;
  258. AllData.tableData = [];
  259. listPipelineDefectRisk({
  260. regionType: props.TypeID, //分区类型(sewage:污水 || rain:雨水)
  261. analysisType: "risk", //分析类型:(defect:本地缺陷 || risk:风险分析)
  262. queryType: "groundwaterInflow", //查询类型:(slope:坡度 || big_cover_small:大管套小管 || mix:混接 || sewageQualityAbnormal:水质异常 || outerWaterInject:外水注入 || siltRisk:淤堵风险 || fullPipe:满管 || overFlow:溢流风险 || groundwaterInflow:地下水渗入 || sewageInject:污水注入)
  263. startTime: props.TimerData[0],
  264. endTime: props.TimerData[1],
  265. oneGradeId: Search_form.oneID, //一级分区id
  266. twoGradeId: Search_form.twoID, //二级分区id
  267. threeGradeId: Search_form.threeID, //三级分区id
  268. fourGradeId: Search_form.fourID, //四级分区id
  269. pageNum: Search_form.query.current,
  270. pageSize: Search_form.query.size,
  271. pointNumber: Search_form.JBH, //井编号
  272. resurveyFlag: Search_form.FKID, //复勘状态
  273. location: Search_form.GJZ, //位置关键字
  274. }).then(
  275. (res) => {
  276. AllData.TBloading = false;
  277. if (res && res.code == 200) {
  278. AllData.tableData = res.data.dataSiteRelationVoList;
  279. Search_form.query.total = res.total;
  280. }
  281. },
  282. (err) => {
  283. AllData.TBloading = false;
  284. // 失败
  285. }
  286. );
  287. };
  288.  
  289. const rowIgnore = (item) => {
  290. item.RefName = "dxssrfxJCFX";
  291. item.daterange = [item.tt + " 00:00:00", item.tt + " 23:59:59"];
  292. item.GWDADataNow = true; //管网风险
  293. bus.emit("DynamicBus", item);
  294. // localStorage.setItem("JCFXDialogTimer", item.tt);
  295. };
  296.  
  297. // 打开周边全景
  298. const ClickZBQJ2 = (item) => {
  299. item.RefName = "zhoubianjiejing";
  300. item.NoPromise = true;
  301. item.Getmenuarr = [
  302. {
  303. menuName: "周边全景",
  304. moduleName: "zhoubianjiejing",
  305. pointName: "",
  306. pointType: "",
  307. show: true,
  308. },
  309. {
  310. menuName: "管网档案",
  311. moduleName: "guanwangpoumian",
  312. pointName: "",
  313. pointType: "",
  314. show: true,
  315. },
  316. ];
  317. item.comIDs = ["zhoubianjiejing", "guanwangpoumian"];
  318. item.GWDADataNow = true; //管网风险
  319. bus.emit("DynamicBus", item);
  320. };
  321. onMounted(() => {
  322. // 下拉框赋值
  323. nextTick(() => {
  324. // 一级菜单选项赋值
  325. let Data = props.TypeID == "sewage" ? useStore.sewageData : useStore.rainData;
  326. AllData.oneOptions = AllData.oneOptions.concat(Data);
  327. // 根据外层点击的层级赋值
  328. console.log(props.FenQuData);
  329. console.log(props.lastFQName);
  330. // 通过判断父级FenQuData选择了几层数据,确定lastFQName对应的层级,FenQuData有一条非空数据:lastFQName对应一级...
  331. let CengJi = 0;
  332. props.FenQuData.forEach((element) => {
  333. if (element.abbreviation != "") CengJi++;
  334. });
  335. // 根据层级的数量来动态判断默认选中下拉框
  336. if (CengJi == 2) {
  337. // 赋值一级
  338. Search_form.oneID = Number(props.FenQuData[1].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.shortName == props.lastFQName) {
  348. Search_form.twoID = element.id;
  349. //给三级下拉框赋值
  350. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  351. }
  352. });
  353. } else if (CengJi == 3) {
  354. // 赋值一级
  355. Search_form.oneID = Number(props.FenQuData[1].id);
  356. // 赋值二级
  357. Search_form.twoID = Number(props.FenQuData[2].id);
  358. // 二级下拉框数据赋值
  359. AllData.oneOptions.forEach((element) => {
  360. if (element.id == Search_form.oneID) {
  361. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  362. }
  363. });
  364. // 二级下拉框选中以及给三级下拉框赋值
  365. AllData.twoOptions.forEach((element) => {
  366. if (element.id == Search_form.twoID) {
  367. Search_form.twoID = element.id;
  368. //给三级下拉框赋值
  369. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  370. }
  371. });
  372. //三级下拉框选中以及给四级下拉框赋值
  373. AllData.threeOptions.forEach((element) => {
  374. if (element.shortName == props.lastFQName) {
  375. Search_form.threeID = element.id;
  376. //给三级下拉框赋值
  377. AllData.fourOptions = AllData.fourOptions.concat(element.childList);
  378. }
  379. });
  380. } else if (CengJi == 4) {
  381. // 赋值一级
  382. Search_form.oneID = Number(props.FenQuData[1].id);
  383. // 赋值二级
  384. Search_form.twoID = Number(props.FenQuData[2].id);
  385. // 赋值三级
  386. Search_form.threeID = Number(props.FenQuData[3].id);
  387. // 二级下拉框数据赋值
  388. AllData.oneOptions.forEach((element) => {
  389. if (element.id == Search_form.oneID) {
  390. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  391. }
  392. });
  393. // 二级下拉框选中以及给三级下拉框赋值
  394. AllData.twoOptions.forEach((element) => {
  395. if (element.id == Search_form.twoID) {
  396. Search_form.twoID = element.id;
  397. //给三级下拉框赋值
  398. AllData.threeOptions = AllData.threeOptions.concat(element.childList);
  399. }
  400. });
  401. //三级下拉框选中以及给四级下拉框赋值
  402. AllData.threeOptions.forEach((element) => {
  403. if (element.id == Search_form.threeID) {
  404. Search_form.threeID = element.id;
  405. //给三级下拉框赋值
  406. AllData.fourOptions = AllData.fourOptions.concat(element.childList);
  407. }
  408. });
  409. //四级下拉框选中
  410. AllData.fourOptions.forEach((element) => {
  411. if (element.shortName == props.lastFQName) {
  412. Search_form.fourID = element.id;
  413. }
  414. });
  415. } else {
  416. // CengJi =1
  417. AllData.oneOptions.forEach((element) => {
  418. if (element.shortName == props.lastFQName) {
  419. Search_form.oneID = element.id;
  420. //给二级下拉框赋值
  421. AllData.twoOptions = AllData.twoOptions.concat(element.childList);
  422. }
  423. });
  424. }
  425. getTableData();
  426. });
  427. });
  428. </script>
  429.  
  430. <style lang="scss" scoped>
  431. #dxssr {
  432. width: 100%;
  433. height: 100%;
  434.  
  435. :deep(.JCFX_Com_SearchBox) {
  436. height: 110px;
  437. width: 100%;
  438. .el-form-item__label {
  439. font-family: Source Han Sans CN;
  440. font-weight: bold;
  441. font-size: 14px;
  442. color: #ccdfff;
  443. }
  444. .el-input__wrapper {
  445. background: #0d2359;
  446. border-radius: 6px;
  447. border: 1px solid #0b9bff;
  448. box-shadow: none;
  449.  
  450. .el-input__inner {
  451. color: #8fbffe;
  452. }
  453. }
  454. .el-select {
  455. background: #0d2359;
  456. }
  457. }
  458. .JCFX_Com_Body {
  459. width: 100%;
  460. height: calc(100% - 165px);
  461.  
  462. :deep(.JCFX_Com_Table) {
  463. &.el-table {
  464. font-family: Source Han Sans CN;
  465. background: none;
  466. width: 100%;
  467. height: calc(100% - 50px);
  468. }
  469. .el-table__inner-wrapper::before {
  470. height: 0;
  471. }
  472. tr {
  473. background: #ffffff00;
  474. }
  475. td.el-table__cell,
  476. th.el-table__cell.is-leaf {
  477. border-color: #ffffff00;
  478. color: #ccdfff;
  479. font-weight: lighter !important;
  480. }
  481. &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  482. background: #0d2359;
  483. }
  484. .el-table__header-wrapper th {
  485. background: #153990 !important;
  486. }
  487.  
  488. th {
  489. color: #ffffff !important;
  490. font-size: 14px;
  491. }
  492.  
  493. &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  494. background: rgba(13, 57, 139, 0.7);
  495. }
  496.  
  497. .color_aqua {
  498. color: #00fcff;
  499. }
  500.  
  501. .color_blue {
  502. color: #2cb7ff;
  503. font-size: 14px;
  504. font-weight: 100 !important;
  505. cursor: pointer;
  506. }
  507. }
  508. }
  509. // 分页样式
  510. .paginationBox {
  511. padding-top: 15px;
  512. text-align: right;
  513. display: flex;
  514. justify-content: flex-end;
  515. flex-direction: row;
  516. flex-wrap: nowrap;
  517. font-family: Source Han Sans CN;
  518. }
  519. }
  520. </style>