Newer
Older
KaiFengPC / src / views / floodSys / repair / waterPoints.vue
@zhangdeliang zhangdeliang on 23 May 19 KB 初始化项目
  1. <template>
  2. <!-- 排水防涝子系统 长效运维 易涝点治理-->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  6. <el-form-item label="易涝点名称" prop="name">
  7. <el-input v-model="queryParams.name" placeholder="请输入" clearable @keyup.enter="handleQuery" />
  8. </el-form-item>
  9. <el-form-item label="易涝点类型" prop="waterlogging">
  10. <el-select v-model="queryParams.waterlogging" placeholder="请选择" clearable>
  11. <el-option v-for="item in waterlogging_type" :key="item.value" :label="item.label" :value="item.value" />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="风险级别" prop="riskLevel">
  15. <el-select v-model="queryParams.riskLevel" placeholder="请选择" clearable>
  16. <el-option v-for="item in levelType" :key="item.value" :label="item.label" :value="item.value" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="是否安装视频监控" prop="isCameraInstall">
  20. <el-select v-model="queryParams.isCameraInstall" placeholder="请选择" clearable>
  21. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="积水原因选择" prop="originType">
  25. <el-select v-model="queryParams.originType" placeholder="请选择" clearable>
  26. <el-option v-for="item in waterlogging_origin" :key="item.value" :label="item.label" :value="item.value" />
  27. </el-select>
  28. </el-form-item>
  29. <el-form-item label="是否专人值守" prop="isPersonDuty">
  30. <el-select v-model="queryParams.isPersonDuty" placeholder="请选择" clearable>
  31. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label="是否实施工程治理" prop="isProjectAdminister">
  35. <el-select v-model="queryParams.isProjectAdminister" placeholder="请选择" clearable>
  36. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item>
  40. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  41. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  42. </el-form-item>
  43. </el-form>
  44. <!-- 按钮区域 -->
  45. <el-row :gutter="10" class="mb8">
  46. <el-col :span="1.5">
  47. <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
  48. </el-col>
  49. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  50. </el-row>
  51. <!-- 表格 -->
  52. <el-table v-loading="tableLoading" :data="tableData" max-height="650">
  53. <el-table-column label="易涝点名称" prop="name" width="200" />
  54. <el-table-column label="积水原因" prop="originType" width="200">
  55. <template #default="scope">
  56. <dict-tag :options="waterlogging_origin" :value="scope.row.originType" />
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="风险级别" prop="riskLevel">
  60. <template #default="scope">
  61. <dict-tag :options="levelType" :value="scope.row.riskLevel" />
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="易涝点位置" prop="address" width="300" />
  65. <el-table-column label="易涝点经度" prop="longitude" width="100" />
  66. <el-table-column label="易涝点纬度" prop="latitude" width="100" />
  67. <el-table-column label="行政辖区" prop="jurisdiction" width="200" />
  68. <el-table-column label="所属街道" prop="belongsStreet" width="200" />
  69. <el-table-column label="是否为易涝点专项行动方案工程整治点位" prop="isEngineeringRenovation" width="200">
  70. <template #default="scope">
  71. <dict-tag :options="flowType" :value="scope.row.isEngineeringRenovation" />
  72. </template>
  73. </el-table-column>
  74. <el-table-column label="是否为易涝点整治专项行动方案点位" prop="isPlanRectification" width="200">
  75. <template #default="scope">
  76. <dict-tag :options="flowType" :value="scope.row.isPlanRectification" />
  77. </template>
  78. </el-table-column>
  79. <el-table-column label="视频监控等设备安装情况" prop="isCameraInstall" width="150">
  80. <template #default="scope">
  81. <dict-tag :options="flowType" :value="scope.row.isCameraInstall" />
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="本年度发生积水次数" prop="yearHappenCount" width="120" />
  85. <el-table-column label="联系人" prop="contactsPerson" width="100" />
  86. <el-table-column label="联系手机号" prop="telephone" width="100" />
  87. <el-table-column label="操作" width="220" fixed="right">
  88. <template #default="scope">
  89. <el-button type="warning" link icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
  90. <el-button type="danger" link icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
  91. <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)">详情</el-button>
  92. </template>
  93. </el-table-column>
  94. </el-table>
  95. <!-- 分页 -->
  96. <pagination
  97. v-show="total > 0"
  98. :total="total"
  99. v-model:page="queryParams.pageNum"
  100. v-model:limit="queryParams.pageSize"
  101. @pagination="getDataList"
  102. />
  103. <!-- 内涝治理点详情 -->
  104. <el-dialog title="内涝治理点详情" v-model="dialogDetail" width="1000px" append-to-body>
  105. <WaterPointDetail v-if="dialogDetail" :detailObj="detailObj"></WaterPointDetail>
  106. </el-dialog>
  107. <!-- 易涝点新增修改弹窗 -->
  108. <el-dialog :title="dialogTitle" v-model="dialogAdd" width="1200px" append-to-body>
  109. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="280px" class="publicForm flex50">
  110. <el-form-item label="易涝点名称" prop="name">
  111. <el-input v-model="formData.name" placeholder="请输入" />
  112. </el-form-item>
  113. <el-form-item label="易涝点类型" prop="waterlogging">
  114. <el-select v-model="formData.waterlogging" placeholder="请选择" clearable>
  115. <el-option v-for="item in waterlogging_type" :key="item.value" :label="item.label" :value="item.value" />
  116. </el-select>
  117. </el-form-item>
  118. <el-form-item label="行政辖区" prop="jurisdiction">
  119. <el-input v-model="formData.jurisdiction" placeholder="请输入" />
  120. </el-form-item>
  121. <el-form-item label="所属街道" prop="belongsStreet">
  122. <el-input v-model="formData.belongsStreet" placeholder="请输入" />
  123. </el-form-item>
  124. <el-form-item label="易涝点位置" prop="address">
  125. <el-input v-model="formData.address" controls-position="right" placeholder="请输入">
  126. <template #append>
  127. <el-button type="primary" @click="showMap = true">获取经纬度</el-button>
  128. </template>
  129. </el-input>
  130. </el-form-item>
  131. <el-form-item label="联系人" prop="contactsPerson">
  132. <el-input v-model="formData.contactsPerson" placeholder="请输入" />
  133. </el-form-item>
  134. <el-form-item label="联系人手机号" prop="telephone">
  135. <el-input v-model="formData.telephone" placeholder="请输入" maxlength="11" />
  136. </el-form-item>
  137. <el-form-item label="积水原因" prop="originType">
  138. <el-select v-model="formData.originType" placeholder="请选择" clearable>
  139. <el-option v-for="item in waterlogging_origin" :key="item.value" :label="item.label" :value="item.value" />
  140. </el-select>
  141. </el-form-item>
  142. <el-form-item label="风险级别" prop="riskLevel">
  143. <el-select v-model="formData.riskLevel" placeholder="请选择" clearable>
  144. <el-option v-for="item in levelType" :key="item.value" :label="item.label" :value="item.value" />
  145. </el-select>
  146. </el-form-item>
  147. <el-form-item label="是否为易涝点专项行动方案工程整治点位" prop="isEngineeringRenovation">
  148. <el-select v-model="formData.isEngineeringRenovation" placeholder="请选择" clearable>
  149. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  150. </el-select>
  151. </el-form-item>
  152. <el-form-item label="是否为易涝点专项行动方案整治点位" prop="isPlanRectification">
  153. <el-select v-model="formData.isPlanRectification" placeholder="请选择" clearable>
  154. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  155. </el-select>
  156. </el-form-item>
  157. <el-form-item label="是否提前清掏疏浚" prop="isClearDredg">
  158. <el-select v-model="formData.isClearDredg" placeholder="请选择" clearable>
  159. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  160. </el-select>
  161. </el-form-item>
  162. <el-form-item label="是否消除点位" prop="isEliminate">
  163. <el-select v-model="formData.isEliminate" placeholder="请选择" clearable>
  164. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  165. </el-select>
  166. </el-form-item>
  167. <el-form-item label="是否专人值守" prop="isPersonDuty">
  168. <el-select v-model="formData.isPersonDuty" placeholder="请选择" clearable>
  169. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  170. </el-select>
  171. </el-form-item>
  172. <el-form-item label="是否实施工程治理" prop="isProjectAdminister">
  173. <el-select v-model="formData.isProjectAdminister" placeholder="请选择" clearable @change="clearChange">
  174. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  175. </el-select>
  176. </el-form-item>
  177. <el-form-item label="工程项目选择项" prop="projectInfoIds">
  178. <el-select v-model="formData.projectInfoIds" placeholder="请选择" clearable :disabled="formData.isProjectAdminister == 0">
  179. <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" />
  180. </el-select>
  181. </el-form-item>
  182. <el-form-item label="是否提前备置排涝设备" prop="isStandbyEquipment">
  183. <el-select v-model="formData.isStandbyEquipment" placeholder="请选择" clearable @change="clearChange1">
  184. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  185. </el-select>
  186. </el-form-item>
  187. <el-form-item label="内涝积水电监测站" prop="stCodes">
  188. <el-select v-model="formData.stCodes" placeholder="请选择" clearable :disabled="formData.isStandbyEquipment == 0">
  189. <el-option v-for="item in stCodesList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
  190. </el-select>
  191. </el-form-item>
  192. <el-form-item label="是否安装视频监控" prop="isCameraInstall">
  193. <el-select v-model="formData.isCameraInstall" placeholder="请选择" @change="clearChange2">
  194. <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
  195. </el-select>
  196. </el-form-item>
  197. <el-form-item label="视频监控点选择项" prop="cameraInfoIndexList" v-if="formData.isCameraInstall == 2">
  198. <el-select v-model="formData.cameraInfoIndexList" placeholder="请选择" clearable filterable multiple>
  199. <el-option v-for="item in cameraList" :key="item.indexCode" :label="item.name" :value="item.indexCode" />
  200. </el-select>
  201. </el-form-item>
  202. <el-form-item label="本年度发生积水次数" prop="yearHappenCount">
  203. <el-input v-model="formData.yearHappenCount" placeholder="请输入" />
  204. </el-form-item>
  205. <el-form-item label="本年度积水最大深度(mm)" prop="yearMaxDepth">
  206. <el-input-number v-model="formData.yearMaxDepth" placeholder="请输入" style="width: 100%" controls-position="right" />
  207. </el-form-item>
  208. <el-form-item label="本年度积水最大深度退水时长(h)" prop="yearMaxHour">
  209. <el-input v-model="formData.yearMaxHour" placeholder="请输入" />
  210. </el-form-item>
  211. </el-form>
  212. <template #footer>
  213. <div class="dialog-footer">
  214. <el-button type="info" @click="dialogAdd = false">取 消</el-button>
  215. <el-button type="primary" @click="submitForm">确 定</el-button>
  216. </div>
  217. </template>
  218. </el-dialog>
  219. <!-- 地图选取位置 -->
  220. <el-dialog title="地图选取位置(可搜索可直接点击获取)" v-model="showMap" width="800px" append-to-body>
  221. <MapPosition v-if="showMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
  222. <template #footer>
  223. <div class="dialog-footer">
  224. <el-button type="primary" @click="showMap = false">确 定</el-button>
  225. </div>
  226. </template>
  227. </el-dialog>
  228. </div>
  229. </template>
  230.  
  231. <script setup name="易涝点治理">
  232. import { waterPointPage, waterPointEdit, waterPointAdd, waterPointDetail, waterPointDelete } from '@/api/floodSys/repair';
  233. import { pagecameraResource } from '@/api/cameraResource/cameraResource';
  234. import { getProjectInfoNewPage } from '@/api/project/projectInformationNew';
  235. // import { pagertuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
  236. import { rtuSiteInfolist } from '@/api/cameraResource/siteCameraRelation';
  237. import WaterPointDetail from './waterPointDetail.vue'; //详情
  238. import MapPosition from '@/components/Map/index.vue'; //获取地图点位信息
  239.  
  240. const { proxy } = getCurrentInstance();
  241.  
  242. const tableData = ref([]);
  243. const tableLoading = ref(true);
  244. const total = ref(0);
  245. const dialogDetail = ref(false);
  246. const showSearch = ref(true);
  247. const dialogTitle = ref('');
  248. const dialogAdd = ref(false);
  249. const showMap = ref(false);
  250. const detailObj = ref({});
  251. const stCodesList = ref([]);
  252. const projectList = ref([]);
  253. const cameraList = ref([]);
  254.  
  255. const allData = reactive({
  256. queryParams: {
  257. pageNum: 1,
  258. pageSize: 10,
  259. riskLevel: '',
  260. name: '',
  261. waterlogging: '',
  262. originType: '',
  263. isProjectAdminister: '',
  264. isPersonDuty: '',
  265. isCameraInstall: '',
  266. },
  267. formData: {
  268. address: '',
  269. longitude: '',
  270. latitude: '',
  271. name: '',
  272. belongsStreet: '',
  273. cameraIndexs: '',
  274. contactsPerson: '',
  275. isCameraInstall: '',
  276. isClearDredg: '',
  277. isEliminate: '',
  278. isEngineeringRenovation: '',
  279. isPersonDuty: '',
  280. isPlanRectification: '',
  281. isProjectAdminister: '',
  282. isStandbyEquipment: '',
  283. originType: '',
  284. jurisdiction: '',
  285. riskLevel: '',
  286. telephone: '',
  287. waterlogging: '',
  288. yearHappenCount: '',
  289. yearMaxDepth: '',
  290. yearMaxHour: '',
  291. },
  292. rulesForm: {
  293. name: [{ required: true, message: '请输入', trigger: 'blur' }],
  294. isCameraInstall: [{ required: true, message: '请选择', trigger: 'change' }],
  295. isClearDredg: [{ required: true, message: '请选择', trigger: 'change' }],
  296. isEliminate: [{ required: true, message: '请选择', trigger: 'change' }],
  297. isEngineeringRenovation: [{ required: true, message: '请选择', trigger: 'change' }],
  298. isPersonDuty: [{ required: true, message: '请选择', trigger: 'change' }],
  299. isPlanRectification: [{ required: true, message: '请选择', trigger: 'change' }],
  300. isProjectAdminister: [{ required: true, message: '请选择', trigger: 'change' }],
  301. isStandbyEquipment: [{ required: true, message: '请选择', trigger: 'change' }],
  302. originType: [{ required: true, message: '请选择', trigger: 'change' }],
  303. waterlogging: [{ required: true, message: '请选择', trigger: 'change' }],
  304. telephone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  305. },
  306. });
  307. const { queryParams, formData, rulesForm } = toRefs(allData);
  308. const { waterlogging_type } = proxy.useDict('waterlogging_type'); //易涝点类型 字典数据
  309. const { waterlogging_origin } = proxy.useDict('waterlogging_origin'); // 易涝点原因 字典数据
  310.  
  311. const levelType = ref([
  312. { label: 'I级', value: 'one' },
  313. { label: 'II级', value: 'two' },
  314. { label: 'III级', value: 'three' },
  315. ]);
  316. const flowType = ref([
  317. { label: '是', value: 2 },
  318. { label: '否', value: 0 },
  319. ]);
  320.  
  321. /** 获取查询数据列表 */
  322. function getDataList() {
  323. tableLoading.value = true;
  324. waterPointPage(queryParams.value).then(response => {
  325. tableData.value = response.data;
  326. total.value = response.total;
  327. tableLoading.value = false;
  328. });
  329. }
  330.  
  331. /** 搜索按钮操作 */
  332. function handleQuery() {
  333. queryParams.value.pageNum = 1;
  334. getDataList();
  335. }
  336. /** 重置按钮操作 */
  337. function resetQuery() {
  338. proxy.resetForm('queryRef');
  339. handleQuery();
  340. }
  341. // 新增
  342. function handleAdd() {
  343. proxy.resetForm('formRef'); //清空表单
  344. dialogTitle.value = '新增易涝积水点';
  345. dialogAdd.value = true;
  346. }
  347. // 修改
  348. function handleEdit(row) {
  349. const postId = row.id;
  350. waterPointDetail(postId).then(response => {
  351. dialogAdd.value = true;
  352. dialogTitle.value = '修改易涝积水点';
  353. nextTick(() => {
  354. formData.value = response.data;
  355. });
  356. });
  357. }
  358. /** 提交按钮 */
  359. function submitForm() {
  360. proxy.$refs['formRef'].validate(valid => {
  361. if (valid) {
  362. if (formData.value.isCameraInstall == 0) formData.value.cameraInfoIndexList = [];
  363. if (dialogTitle.value == '修改易涝积水点') {
  364. waterPointEdit(formData.value).then(response => {
  365. proxy.$modal.msgSuccess('修改成功');
  366. dialogAdd.value = false;
  367. getDataList();
  368. });
  369. } else {
  370. waterPointAdd(formData.value).then(response => {
  371. proxy.$modal.msgSuccess('新增成功');
  372. dialogAdd.value = false;
  373. getDataList();
  374. });
  375. }
  376. }
  377. });
  378. }
  379. // 删除
  380. function handleDelete(row) {
  381. const postIds = row.id;
  382. proxy.$modal
  383. .confirm('是否确认删除该数据项?')
  384. .then(function () {
  385. return waterPointDelete(postIds);
  386. })
  387. .then(() => {
  388. getDataList();
  389. proxy.$modal.msgSuccess('删除成功');
  390. })
  391. .catch(() => {});
  392. }
  393. // 获取位置
  394. function getAddress(val) {
  395. formData.value.address = val.caseAddress;
  396. formData.value.longitude = val.lonLat[0];
  397. formData.value.latitude = val.lonLat[1];
  398. }
  399. /** 详情按钮操作 */
  400. function handleDetail(row) {
  401. waterPointDetail(row.id).then(response => {
  402. detailObj.value = response.data;
  403. dialogDetail.value = true;
  404. });
  405. }
  406.  
  407. /** 查询RTU站点列表 */
  408. function getList() {
  409. let param = {
  410. monitorTargetType: 'waterlogging',
  411. };
  412. rtuSiteInfolist(param).then(response => {
  413. stCodesList.value = response.data;
  414. });
  415. }
  416.  
  417. function getList2() {
  418. let param = {
  419. pageNum: 1,
  420. pageSize: 9999,
  421. };
  422. getProjectInfoNewPage(param).then(response => {
  423. projectList.value = response.data;
  424. });
  425. }
  426.  
  427. function getList3() {
  428. let param = {
  429. pageNum: 1,
  430. pageSize: 9999,
  431. };
  432. pagecameraResource(param).then(response => {
  433. cameraList.value = response.data;
  434. });
  435. }
  436.  
  437. function clearChange() {
  438. if (formData.value.isProjectAdminister == 0) {
  439. formData.value.projectInfoIds = '';
  440. }
  441. }
  442.  
  443. function clearChange1() {
  444. if (formData.value.isStandbyEquipment == 0) {
  445. formData.value.stCodes = '';
  446. }
  447. }
  448.  
  449. function clearChange2() {
  450. if (formData.value.isCameraInstall == 0) {
  451. formData.value.cameraInfoIndexList = [];
  452. }
  453. }
  454.  
  455. onMounted(() => {
  456. getDataList();
  457. getList();
  458. getList2();
  459. getList3();
  460. });
  461. </script>