Newer
Older
KaiFengPC / src / views / floodSys / assetManage / pipelinePoint.vue
@zhangdeliang zhangdeliang on 15 Oct 21 KB update
  1. <template>
  2. <!-- 管点管理 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  5. <el-form-item label="管点类型" prop="pointType">
  6. <el-select clearable v-model="queryParams.pointType" placeholder="请选择管点材质">
  7. <el-option v-for="dict in point_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  8. </el-select>
  9. </el-form-item>
  10. <el-form-item label="管点编码" prop="pointNumber">
  11. <el-input v-model="queryParams.pointNumber" placeholder="请输入管点编码" clearable @keyup.enter="handleQuery" />
  12. </el-form-item>
  13. <el-form-item label="道路名称" prop="roadName">
  14. <el-input v-model="queryParams.roadName" placeholder="请输入所在道路名称" clearable @keyup.enter="handleQuery" />
  15. </el-form-item>
  16. <el-form-item label="管点材质" prop="pointTexture">
  17. <el-input v-model="queryParams.pointTexture" placeholder="请输入管点材质" clearable @keyup.enter="handleQuery" />
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  21. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  22. </el-form-item>
  23. </el-form>
  24. <el-row :gutter="10" class="mb8">
  25. <el-col :span="1.5">
  26. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['floodMoney:pipelinePoint:add']">新增</el-button>
  27. </el-col>
  28. <!-- <el-col :span="1.5">
  29. <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['floodMoney:pipelinePoint:edit']">
  30. 修改
  31. </el-button>
  32. </el-col> -->
  33. <el-col :span="1.5">
  34. <el-button
  35. type="danger"
  36. plain
  37. icon="Delete"
  38. :disabled="multiple"
  39. @click="handleDelete"
  40. v-hasPermi="['floodMoney:pipelinePoint:remove']"
  41. >
  42. 批量删除
  43. </el-button>
  44. </el-col>
  45. <el-col :span="1.5">
  46. <el-button type="info" plain icon="Upload" @click="handleImport(1)" v-hasPermi="['floodMoney:pipelinePoint:import']">
  47. 新增导入
  48. </el-button>
  49. </el-col>
  50. <el-col :span="1.5">
  51. <el-button type="info" plain icon="Upload" @click="handleImport(2)" v-hasPermi="['floodMoney:pipelinePoint:import']">
  52. 更新导入
  53. </el-button>
  54. </el-col>
  55. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  56. </el-row>
  57.  
  58. <el-table v-loading="loading" :data="pipelinePointList" max-height="650" @selection-change="handleSelectionChange">
  59. <el-table-column type="selection" width="55" />
  60. <el-table-column label="管点类型" prop="pointType">
  61. <template #default="scope">
  62. <dict-tag :options="point_type" :value="scope.row.pointType" />
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="排水分区" prop="areaWater">
  66. <template #default="scope">
  67. <dict-tag :options="drainage_partition" :value="scope.row.areaWater" />
  68. </template>
  69. </el-table-column>
  70. <el-table-column label="管点编码" prop="pointNumber" />
  71. <el-table-column label="所在道路" prop="roadName" />
  72. <el-table-column label="权属单位" prop="ownershipUnits" />
  73. <el-table-column label="运维单位" prop="operationalUnits" />
  74. <el-table-column label="管点材质" prop="pointTexture" />
  75. <el-table-column label="地面高程(m)" prop="groundElevation" />
  76. <el-table-column label="备注" prop="remark" />
  77. <el-table-column label="操作" width="220" class-name="small-padding fixed-width">
  78. <template #default="scope">
  79. <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['floodMoney:pipelinePoint:view']">
  80. 详情
  81. </el-button>
  82. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['floodMoney:pipelinePoint:edit']">
  83. 修改
  84. </el-button>
  85. <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['floodMoney:pipelinePoint:remove']">
  86. 删除
  87. </el-button>
  88. </template>
  89. </el-table-column>
  90. </el-table>
  91. <pagination
  92. v-show="total > 0"
  93. :total="total"
  94. v-model:page="queryParams.pageNum"
  95. v-model:limit="queryParams.pageSize"
  96. @pagination="getList"
  97. />
  98.  
  99. <!-- 添加或修改管点信息对话框 -->
  100. <el-dialog :title="title" v-model="open" width="800px" append-to-body>
  101. <el-form ref="pipelinePointRef" :model="form" :rules="rules" label-width="120px" class="flex50">
  102. <el-form-item label="管点编码" prop="pointNumber">
  103. <el-input v-model="form.pointNumber" placeholder="请输入" />
  104. </el-form-item>
  105. <el-form-item label="坐标X" prop="originalX">
  106. <el-input v-model="form.originalX" placeholder="请输入" />
  107. </el-form-item>
  108. <el-form-item label="坐标Y" prop="originalY">
  109. <el-input v-model="form.originalY" placeholder="请输入" />
  110. </el-form-item>
  111. <el-form-item label="所在道路" prop="roadName">
  112. <el-input v-model="form.roadName" placeholder="请输入" />
  113. </el-form-item>
  114. <el-form-item label="权属单位" prop="ownershipUnits">
  115. <el-input v-model="form.ownershipUnits" placeholder="请输入" />
  116. </el-form-item>
  117. <el-form-item label="运维单位" prop="operationalUnits">
  118. <el-input v-model="form.operationalUnits" placeholder="请输入" />
  119. </el-form-item>
  120. <el-form-item label="管点材质" prop="pointTexture">
  121. <el-input v-model="form.pointTexture" placeholder="请输入" />
  122. </el-form-item>
  123. <el-form-item label="管点类型" prop="pointType">
  124. <el-select filterable v-model="form.pointType" placeholder="请选择" style="width: 100%">
  125. <el-option v-for="dict in point_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  126. </el-select>
  127. </el-form-item>
  128. <el-form-item label="管径(m)" prop="pipelineDiameter">
  129. <el-input-number :min="0" v-model="form.pipelineDiameter" placeholder="请输入" style="width: 100%" />
  130. </el-form-item>
  131. <el-form-item label="井深(m)" prop="bottomBuriedDepth">
  132. <el-input type="number" v-model="form.bottomBuriedDepth" placeholder="请输入" />
  133. </el-form-item>
  134. <el-form-item label="排水分区" prop="areaWater">
  135. <el-select filterable clearable v-model="form.areaWater" placeholder="请选择" style="width: 100%">
  136. <el-option v-for="dict in drainage_partition" :key="dict.value" :label="dict.label" :value="dict.value" />
  137. </el-select>
  138. </el-form-item>
  139. <el-form-item label="地面高程(m)" prop="groundElevation">
  140. <el-input type="number" v-model="form.groundElevation" placeholder="请输入" />
  141. </el-form-item>
  142. <el-form-item label="监测站点" prop="stCode">
  143. <el-select filterable v-model="form.stCode" placeholder="请选择" style="width: 100%">
  144. <el-option v-for="item in jczdList" :key="item.stCode" :label="item.label" :value="item.stCode" />
  145. </el-select>
  146. </el-form-item>
  147.  
  148. <el-col :span="24">
  149. <el-form-item label="备注" prop="remark" style="width: 98%">
  150. <el-input type="textarea" v-model="form.remark" placeholder="请输入" />
  151. </el-form-item>
  152. </el-col>
  153. </el-form>
  154. <template #footer>
  155. <div class="dialog-footer">
  156. <el-button type="primary" @click="submitForm">确 定</el-button>
  157. <el-button @click="cancel">取 消</el-button>
  158. </div>
  159. </template>
  160. </el-dialog>
  161.  
  162. <!-- 管点信息详情 -->
  163. <el-dialog title="管点信息详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
  164. <div class="dialog-form-detail flex flex-r flex-wrap">
  165. <div class="flex flex-r">
  166. <div class="detail-label flex flex-align-center">管点类型</div>
  167. <div class="detail-value flex flex-align-center">
  168. <dict-tag :options="point_type" :value="dialogFormDetail.pointType" />
  169. </div>
  170. </div>
  171. <div class="flex flex-r">
  172. <div class="detail-label flex flex-align-center">排水分区</div>
  173. <div class="detail-value flex flex-align-center">
  174. <dict-tag :options="drainage_partition" :value="dialogFormDetail.areaWater" />
  175. </div>
  176. </div>
  177. <div class="flex flex-r">
  178. <div class="detail-label flex flex-align-center">管点编码</div>
  179. <div class="detail-value flex flex-align-center">
  180. {{ dialogFormDetail.pointNumber }}
  181. </div>
  182. </div>
  183. <div class="flex flex-r">
  184. <div class="detail-label flex flex-align-center">坐标X</div>
  185. <div class="detail-value flex flex-align-center">
  186. {{ dialogFormDetail.originalX }}
  187. </div>
  188. </div>
  189. <div class="flex flex-r">
  190. <div class="detail-label flex flex-align-center">坐标Y</div>
  191. <div class="detail-value flex flex-align-center">
  192. {{ dialogFormDetail.originalY }}
  193. </div>
  194. </div>
  195. <div class="flex flex-r">
  196. <div class="detail-label flex flex-align-center">所在道路</div>
  197. <div class="detail-value flex flex-align-center">
  198. {{ dialogFormDetail.roadName }}
  199. </div>
  200. </div>
  201. <div class="flex flex-r">
  202. <div class="detail-label flex flex-align-center">权属单位</div>
  203. <div class="detail-value flex flex-align-center">
  204. {{ dialogFormDetail.ownershipUnits }}
  205. </div>
  206. </div>
  207. <div class="flex flex-r">
  208. <div class="detail-label flex flex-align-center">运维单位</div>
  209. <div class="detail-value flex flex-align-center">
  210. {{ dialogFormDetail.operationalUnits }}
  211. </div>
  212. </div>
  213. <div class="flex flex-r">
  214. <div class="detail-label flex flex-align-center">管点材质</div>
  215. <div class="detail-value flex flex-align-center">
  216. {{ dialogFormDetail.pointTexture }}
  217. </div>
  218. </div>
  219. <div class="flex flex-r">
  220. <div class="detail-label flex flex-align-center">地面高程(米)</div>
  221. <div class="detail-value flex flex-align-center">
  222. {{ dialogFormDetail.groundElevation }}
  223. </div>
  224. </div>
  225. <div class="flex flex-r">
  226. <div class="detail-label flex flex-align-center">备注</div>
  227. <div class="detail-value flex flex-align-center">
  228. {{ dialogFormDetail.remark }}
  229. </div>
  230. </div>
  231. <div class="flex flex-r">
  232. <div class="detail-label flex flex-align-center"></div>
  233. <div class="detail-value flex flex-align-center">
  234. {{ dialogFormDetail.geometrys }}
  235. </div>
  236. </div>
  237. </div>
  238. <template #footer>
  239. <div class="dialog-footer">
  240. <el-button @click="cancel">关 闭</el-button>
  241. </div>
  242. </template>
  243. </el-dialog>
  244.  
  245. <!-- 导入对话框 -->
  246. <el-dialog :title="upload.title" v-model="upload.open" v-if="upload.open" width="400px" append-to-body>
  247. <el-upload
  248. ref="uploadRef"
  249. :limit="1"
  250. accept=".xlsx, .xls"
  251. :headers="upload.headers"
  252. action="/"
  253. :disabled="upload.isUploading"
  254. :on-change="uploadFile"
  255. :on-progress="handleFileUploadProgress"
  256. :on-success="handleFileSuccess"
  257. :auto-upload="false"
  258. drag
  259. >
  260. <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  261. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  262. <template #tip>
  263. <div class="el-upload__tip text-center">
  264. <div class="el-upload__tip">
  265. <el-select filterable v-model="pointCategory" placeholder="请选择上传文件类型">
  266. <el-option v-for="dict in typeList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
  267. </el-select>
  268. </div>
  269. <!-- <span>仅允许导入xls、xlsx格式文件。</span> -->
  270. <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"
  271. >下载模板</el-link
  272. >
  273. </div>
  274. </template>
  275. </el-upload>
  276. <template #footer>
  277. <div class="dialog-footer">
  278. <el-button type="primary" @click="submitFileForm" :loading="btnloading">确 定</el-button>
  279. <el-button @click="upload.open = false">取 消</el-button>
  280. </div>
  281. </template>
  282. </el-dialog>
  283. </div>
  284. </template>
  285.  
  286. <script setup name="PipelinePoint">
  287. import {
  288. pagepipelinePoint,
  289. getpipelinePoint,
  290. delpipelinePoint,
  291. addpipelinePoint,
  292. updatepipelinePoint,
  293. getstatistic,
  294. getTypeimport,
  295. getTypeimportupdate,
  296. } from '@/api/drainagePipeline/pipelinePoint';
  297. import { getConfigKey } from '@/api/system/config';
  298. import { ElMessage } from 'element-plus';
  299. import { rtuSiteInfolist } from '@/api/cameraResource/siteCameraRelation';
  300. import { getToken } from '@/utils/auth';
  301.  
  302. const { proxy } = getCurrentInstance();
  303.  
  304. const { point_type, drainage_partition } = proxy.useDict('point_type', 'drainage_partition');
  305. const pipelinePointList = ref([]);
  306. const open = ref(false);
  307. const loading = ref(true);
  308. const btnloading = ref(false);
  309. const showSearch = ref(true);
  310. const ids = ref([]);
  311. const single = ref(true);
  312. const multiple = ref(true);
  313. const total = ref(0);
  314. const title = ref('');
  315. const detailOpen = ref(false);
  316. const statisticdic = ref([]);
  317. const pointCategory = ref('');
  318. const Getfile = ref('');
  319. const selecttype = ref('');
  320. const jczdList = ref([]);
  321. const typeList = ref([
  322. { label: '检查井', value: 'CheckWell' },
  323. { label: '雨水篦子', value: 'RainGrates' },
  324. ]);
  325.  
  326. /*** 导入参数 */
  327. const upload = reactive({
  328. // 是否显示弹出层(用户导入)
  329. open: false,
  330. // 弹出层标题(用户导入)
  331. title: '',
  332. // 是否禁用上传
  333. isUploading: false,
  334. // 是否更新已经存在的用户数据
  335. updateSupport: 0,
  336. // 设置上传的请求头部
  337. headers: { Authorization: 'Bearer ' + getToken() },
  338. // 上传的地址
  339. // url: import.meta.env.VITE_APP_BASE_API + "/drainage/pipelinePoint/import",
  340. });
  341.  
  342. const data = reactive({
  343. form: {},
  344. queryParams: {
  345. pageNum: 1,
  346. pageSize: 10,
  347. pointType: null,
  348. pointNumber: null,
  349. originalX: null,
  350. originalY: null,
  351. roadName: null,
  352. ownershipUnits: null,
  353. operationalUnits: null,
  354. pointTexture: null,
  355. groundElevation: null,
  356. // status: null,
  357. geometrys: null,
  358. },
  359. rules: {
  360. pointType: [{ required: true, message: '管点类型不能为空', trigger: 'blur' }],
  361. pointNumber: [{ required: true, message: '管点编码不能为空', trigger: 'blur' }],
  362. originalX: [{ required: true, message: '坐标X不能为空', trigger: 'blur' }],
  363. originalY: [{ required: true, message: '坐标Y不能为空', trigger: 'blur' }],
  364. // roadName: [{ required: true, message: '所在道路/河道不能为空', trigger: 'blur' }],
  365. // ownershipUnits: [{ required: true, message: '权属单位不能为空', trigger: 'blur' }],
  366. // operationalUnits: [{ required: true, message: '运维单位不能为空', trigger: 'blur' }],
  367. pointTexture: [{ required: true, message: '管点材质不能为空', trigger: 'blur' }],
  368. groundElevation: [{ required: true, message: '地面高程不能为空', trigger: 'blur' }],
  369. },
  370. dialogFormDetail: {}, //详情弹框数据
  371. });
  372.  
  373. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  374.  
  375. /** 搜索管点信息列表 */
  376. function getList() {
  377. loading.value = true;
  378. pagepipelinePoint(queryParams.value).then(response => {
  379. pipelinePointList.value = response.data;
  380. total.value = response.total;
  381. loading.value = false;
  382. });
  383. }
  384.  
  385. // 取消按钮
  386. function cancel() {
  387. detailOpen.value = false;
  388. open.value = false;
  389. reset();
  390. }
  391.  
  392. // 表单重置
  393. function reset() {
  394. form.value = {
  395. id: null,
  396. pointType: null,
  397. areaWater: null,
  398. pointNumber: null,
  399. originalX: null,
  400. originalY: null,
  401. roadName: null,
  402. ownershipUnits: null,
  403. operationalUnits: null,
  404. pointTexture: null,
  405. groundElevation: null,
  406. remark: null,
  407. // status: null,
  408. delFlag: null,
  409. createBy: null,
  410. createTime: null,
  411. updateBy: null,
  412. updateTime: null,
  413. geometrys: null,
  414. };
  415. proxy.resetForm('pipelinePointRef');
  416. }
  417.  
  418. /** 搜索按钮操作 */
  419. function handleQuery() {
  420. queryParams.value.pageNum = 1;
  421. getList();
  422. }
  423.  
  424. /** 重置按钮操作 */
  425. function resetQuery() {
  426. proxy.resetForm('queryRef');
  427. handleQuery();
  428. }
  429.  
  430. // 多选框选中数据
  431. function handleSelectionChange(selection) {
  432. ids.value = selection.map(item => item.id);
  433. single.value = selection.length != 1;
  434. multiple.value = !selection.length;
  435. }
  436.  
  437. /** 新增按钮操作 */
  438. function handleAdd() {
  439. reset();
  440. open.value = true;
  441. title.value = '添加管点信息';
  442. }
  443.  
  444. /** 修改按钮操作 */
  445. function handleUpdate(row) {
  446. reset();
  447. const _id = row.id || ids.value;
  448. getpipelinePoint(_id).then(response => {
  449. form.value = response.data;
  450. open.value = true;
  451. title.value = '修改管点信息';
  452. });
  453. }
  454.  
  455. /** 提交按钮 */
  456. function submitForm() {
  457. proxy.$refs['pipelinePointRef'].validate(valid => {
  458. if (valid) {
  459. if (form.value.id != null) {
  460. updatepipelinePoint(form.value).then(response => {
  461. proxy.$modal.msgSuccess('修改成功');
  462. open.value = false;
  463. getList();
  464. });
  465. } else {
  466. addpipelinePoint(form.value).then(response => {
  467. proxy.$modal.msgSuccess('新增成功');
  468. open.value = false;
  469. getList();
  470. });
  471. }
  472. }
  473. });
  474. }
  475.  
  476. /** 删除按钮操作 */
  477. function handleDelete(row) {
  478. const _ids = row.id || ids.value;
  479. proxy.$modal
  480. .confirm('是否确认删除该数据项?')
  481. .then(function () {
  482. return delpipelinePoint(_ids);
  483. })
  484. .then(() => {
  485. getList();
  486. proxy.$modal.msgSuccess('删除成功');
  487. })
  488. .catch(() => {});
  489. }
  490.  
  491. /** 导出按钮操作 */
  492. function handleExport() {
  493. proxy.download(
  494. 'floodMoney/pipelinePoint/export',
  495. {
  496. ...queryParams.value,
  497. },
  498. `pipelinePoint_${new Date().getTime()}.xlsx`
  499. );
  500. }
  501.  
  502. /** 导入按钮操作 */
  503. function handleImport(type) {
  504. selecttype.value = type;
  505. upload.title = '信息导入';
  506. upload.open = true;
  507. }
  508. /** 下载模板操作 */
  509. function importTemplate() {
  510. getConfigKeyM();
  511. // proxy.download(
  512. // "system/user/importTemplate",
  513. // {},
  514. // `user_template_${new Date().getTime()}.xlsx`
  515. // );
  516. }
  517. /**文件上传中处理 */
  518. const handleFileUploadProgress = (event, file, fileList) => {
  519. upload.isUploading = true;
  520. };
  521. /** 文件上传成功处理 */
  522. const handleFileSuccess = (response, file, fileList) => {
  523. upload.open = false;
  524. upload.isUploading = false;
  525. proxy.$refs['uploadRef'].handleRemove(file);
  526. proxy.$alert(
  527. "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>',
  528. '导入结果',
  529. { dangerouslyUseHTMLString: true }
  530. );
  531. getList();
  532. };
  533.  
  534. /** 提交上传文件 */
  535. function submitFileForm() {
  536. if (pointCategory.value) {
  537. ElMessage('正在导入数据请等待');
  538. btnloading.value = true;
  539.  
  540. const _file = Getfile.value.raw;
  541. var formData = new FormData();
  542. formData.append('file', _file);
  543. formData.append('pointCategory', pointCategory.value);
  544.  
  545. let url = '';
  546. if (selecttype.value == 1) {
  547. url = getTypeimport;
  548. } else {
  549. url = getTypeimportupdate;
  550. }
  551.  
  552. url(formData)
  553. .then(res => {
  554. upload.open = false;
  555. pointCategory.value = '';
  556. Getfile.value = '';
  557. ElMessage('操作成功');
  558. getList();
  559. })
  560. .catch(err => {
  561. // throw err
  562. ElMessage.error(err);
  563. });
  564. } else {
  565. ElMessage.error('请选择你上传文件对应的类型!');
  566. }
  567. // proxy.$refs["uploadRef"].submit();
  568. }
  569.  
  570. function uploadFile(file) {
  571. pointCategory.value = '';
  572. Getfile.value = '';
  573. Getfile.value = file;
  574. }
  575.  
  576. //查看详情操作
  577. function handleDetail(row) {
  578. detailOpen.value = true;
  579. dialogFormDetail.value = row;
  580. }
  581.  
  582. // 获取管点材质
  583. function Getstatisticdic() {
  584. getstatistic().then(res => {
  585. statisticdic.value = res.data;
  586. });
  587. }
  588. async function getConfigKeyM() {
  589. let { data } = await getConfigKey('pipepoint.import.template.url');
  590. const iframe = document.createElement('iframe'); // 创建一个HTML 元素
  591. iframe.style.display = 'none'; // 隐藏iframe 防止影响页面
  592. iframe.style.height = 0; // 高度设置0 防止影响页面
  593. iframe.src = data; // 下载链接
  594. document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求 // 5分钟之后删除
  595. setTimeout(() => {
  596. iframe.remove();
  597. }, 5 * 60 * 1000);
  598. }
  599.  
  600. function getList2() {
  601. jczdList.value = [];
  602. let params = {
  603. monitorTargetType: '',
  604. monitorTargetTypeList: 'pipeline,drain_outlet',
  605. };
  606. rtuSiteInfolist(params).then(response => {
  607. response.data.map(item => {
  608. jczdList.value.push({
  609. value: item.id,
  610. label: item.stName,
  611. stCode: item.stCode,
  612. });
  613. // console.log(jczdList.value, 'jczdList.value');
  614. });
  615. });
  616. }
  617.  
  618. getList();
  619. Getstatisticdic();
  620. getList2();
  621. </script>
  622.  
  623. <style lang="scss" scoped>
  624. .el-upload__tip {
  625. padding: 10px 0;
  626. }
  627. </style>