Newer
Older
KaiFengPC / src / views / floodSys / scada / pumpStationInformation / index.vue
@zhangdeliang zhangdeliang 14 days ago 22 KB update
  1. <template>
  2. <!-- 泵站信息管理 -->
  3. <div class="publicContainer">
  4. <div class="top">
  5. <el-form ref="queryRef" inline :model="queryParams" v-show="showSearch">
  6. <el-form-item label="泵站名称:" prop="pumpName">
  7. <el-input clearable v-model="queryParams.pumpName" style="width: 200px"></el-input>
  8. </el-form-item>
  9. <el-form-item label="泵站类型:" prop="pumpType">
  10. <el-select clearable v-model="queryParams.pumpType" placeholder="请选择">
  11. <el-option v-for="dict in pump_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button type="primary" icon="Search" @click="searchForm"> 搜索</el-button>
  16. <el-button icon="Refresh" @click="resectClcik"> 重置</el-button>
  17. </el-form-item>
  18. </el-form>
  19. <el-row :gutter="10" class="mb8">
  20. <el-button type="primary" plain icon="Plus" @click="addData">新增</el-button>
  21. <right-toolbar v-model:showSearch="showSearch" @queryTable="searchForm"></right-toolbar>
  22. </el-row>
  23. </div>
  24. <!-- 表格 -->
  25. <el-table :data="tableData" v-loading="tableLoading" :max-height="650">
  26. <el-table-column type="index" width="70" label="序号" />
  27. <el-table-column label="泵站编号" prop="pumpCode" />
  28. <el-table-column label="泵站名称" prop="pumpName" />
  29. <el-table-column label="泵站类型" prop="pumpType">
  30. <template #default="{ row }">
  31. <dict-tag :options="pump_type" :value="row.pumpType"></dict-tag>
  32. </template>
  33. </el-table-column>
  34. <el-table-column label="设计规模(m³/s)" prop="designScaleSecond">
  35. <template #default="{ row }">
  36. {{ row.rainpump.designScaleSecond || row.sweagepump.designScaleSecond || '--' }}
  37. </template>
  38. </el-table-column>
  39. <el-table-column label="泵机台数" prop="deviceCount">
  40. <template #default="{ row }">
  41. {{ Number(row.rainpump.deviceCount) + Number(row.sweagepump.deviceCount) || '--' }}
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="泵站地址" prop="address" />
  45. <el-table-column label="联系人" prop="dutyUserName" />
  46. <el-table-column label="联系人电话" prop="dutyUserPhone" />
  47. <el-table-column label="操作" show-overflow-tooltip width="250">
  48. <template #default="{ row }">
  49. <el-button link icon="View" type="primary" @click="checkDetail(row)">详情</el-button>
  50. <el-button link icon="Edit" type="warning" @click="editData(row)">修改</el-button>
  51. <el-button link icon="Delete" type="danger" @click="deleteData(row)">删除</el-button>
  52. </template>
  53. </el-table-column>
  54. </el-table>
  55. <!-- 分页 -->
  56. <pagination
  57. v-show="total > 0"
  58. :total="total"
  59. v-model:page="queryParams.pageNum"
  60. v-model:limit="queryParams.pageSize"
  61. @pagination="getDataList"
  62. />
  63. <div class="water-analysis-page">
  64. <!-- 添加 修改 查看彈框 -->
  65. <el-dialog :title="dialogTitle" v-model="showDialog" width="65%" :close-on-click-modal="false">
  66. <el-form ref="ruleForm" :model="formData" :rules="formRules" :disabled="isDisab" label-width="180px">
  67. <el-row>
  68. <el-form-item label="泵站名称:" prop="pumpName" style="width: 45%">
  69. <el-input v-model="formData.pumpName" placeholder="请输入" clearable />
  70. </el-form-item>
  71. <el-form-item label="泵站编码:" prop="pumpCode" style="width: 45%">
  72. <el-input v-model="formData.pumpCode" placeholder="请输入" clearable :disabled="hiddentext" />
  73. </el-form-item>
  74. <el-form-item label="泵站类型:" prop="pumpType" style="width: 45%">
  75. <el-select
  76. clearable
  77. v-model="formData.pumpType"
  78. class="m-2"
  79. placeholder="请选择"
  80. style="width: 100%"
  81. @change="pumpTypechange"
  82. >
  83. <el-option v-for="item in pump_type" :key="item.value" :label="item.label" :value="item.value" />
  84. </el-select>
  85. </el-form-item>
  86. <el-form-item label="收水范围(gis):" prop="geometrys" style="width: 45%">
  87. <el-input v-model="formData.geometrys" placeholder="请输入收水范围(gis)" clearable />
  88. </el-form-item>
  89. <el-divider content-position="left" v-if="formData.pumpType == 'confluence'">雨水泵站信息</el-divider>
  90. <!-- 下拉框雨污水合建泵站-->
  91. <el-form-item label="雨水设计规模(m³/s):" prop="a" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  92. <el-input v-model="formData.rainpump.designScaleSecond" placeholder="请输入雨水设计规模(m³/s)" clearable />
  93. </el-form-item>
  94. <el-form-item label="雨水单台流量(m³/s):" prop="b" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  95. <el-input v-model="formData.rainpump.singleFlowSccond" placeholder="请输入雨水单台流量(m³/s)" clearable />
  96. </el-form-item>
  97. <el-form-item label="雨水泵机台数:" prop="c" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  98. <el-input v-model="formData.rainpump.deviceCount" placeholder="请输入雨水泵机台数" clearable />
  99. </el-form-item>
  100. <el-form-item label="雨水收水出路:" prop="collectionOut" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  101. <el-input v-model="formData.rainpump.collectionOut" placeholder="请输入雨水收水出路" clearable />
  102. </el-form-item>
  103. <el-form-item label="雨水收水范围:" prop="c" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  104. <el-input v-model="formData.rainpump.collectionRange" placeholder="请输入雨水收水范围" clearable />
  105. </el-form-item>
  106. <el-divider content-position="left" v-if="formData.pumpType == 'confluence'">污水泵站信息</el-divider>
  107. <el-form-item label="污水设计规模(m³/s):" prop="designScaleSecond" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  108. <el-input v-model="formData.sweagepump.designScaleSecond" placeholder="请输入污水设计规模(m³/s)" clearable />
  109. </el-form-item>
  110. <el-form-item label="污水单台流量(m³/s):" prop="singleFlowSccond" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  111. <el-input v-model="formData.sweagepump.singleFlowSccond" placeholder="请输入污水单台流量(m³/s)" clearable />
  112. </el-form-item>
  113. <el-form-item label="污水泵机台数:" prop="deviceCount" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  114. <el-input v-model="formData.sweagepump.deviceCount" placeholder="请输入污水泵机台数" clearable />
  115. </el-form-item>
  116. <el-form-item label="污水收水出路:" prop="collectionOut" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  117. <el-input v-model="formData.sweagepump.collectionOut" placeholder="请输入污水收水出路" clearable />
  118. </el-form-item>
  119. <el-form-item label="污水收水范围:" prop="collectionRange" style="width: 45%" v-if="formData.pumpType == 'confluence'">
  120. <el-input v-model="formData.sweagepump.collectionRange" placeholder="请输入污水收水范围" clearable />
  121. </el-form-item>
  122.  
  123. <!--雨水泵站数据 -->
  124. <el-divider content-position="left" v-if="formData.pumpType == 'rain_water'">雨水泵站信息</el-divider>
  125. <el-form-item label="设计规模(m³/s):" prop="designScaleSecond" style="width: 45%" v-if="formData.pumpType == 'rain_water'">
  126. <el-input v-model="formData.rainpump.designScaleSecond" placeholder="请输入设计规模(m³/s)" clearable />
  127. </el-form-item>
  128. <el-form-item label="单台流量(m³/s):" prop="singleFlowSccond" style="width: 45%" v-if="formData.pumpType == 'rain_water'">
  129. <el-input v-model="formData.rainpump.singleFlowSccond" placeholder="请输入单台流量(m³/s)" clearable />
  130. </el-form-item>
  131. <el-form-item label="泵机台数:" prop="deviceCount" style="width: 45%" v-if="formData.pumpType == 'rain_water'">
  132. <el-input v-model="formData.rainpump.deviceCount" placeholder="请输入泵机台数" clearable />
  133. </el-form-item>
  134. <el-form-item label="收水出路:" prop="collectionOut" style="width: 45%" v-if="formData.pumpType == 'rain_water'">
  135. <el-input v-model="formData.rainpump.collectionOut" placeholder="请输入收水出路" clearable />
  136. </el-form-item>
  137. <el-form-item label="收水范围:" prop="collectionRange" style="width: 45%" v-if="formData.pumpType == 'rain_water'">
  138. <el-input v-model="formData.rainpump.collectionRange" placeholder="请输入收水范围" clearable />
  139. </el-form-item>
  140.  
  141. <!--污水泵站数据 -->
  142. <el-divider content-position="left" v-if="formData.pumpType == 'sewage_water'">污水泵站信息</el-divider>
  143. <el-form-item label="设计规模(m³/s):" prop="designScaleSecond" style="width: 45%" v-if="formData.pumpType == 'sewage_water'">
  144. <el-input v-model="formData.sweagepump.designScaleSecond" placeholder="请输入设计规模(m³/s)" clearable />
  145. </el-form-item>
  146. <el-form-item label="单台流量(m³/s):" prop="singleFlowSccond" style="width: 45%" v-if="formData.pumpType == 'sewage_water'">
  147. <el-input v-model="formData.sweagepump.singleFlowSccond" placeholder="请输入单台流量(m³/s)" clearable />
  148. </el-form-item>
  149. <el-form-item label="泵机台数:" prop="deviceCount" style="width: 45%" v-if="formData.pumpType == 'sewage_water'">
  150. <el-input v-model="formData.sweagepump.deviceCount" placeholder="请输入泵机台数" clearable />
  151. </el-form-item>
  152. <el-form-item label="收水出路:" prop="collectionOut" style="width: 45%" v-if="formData.pumpType == 'sewage_water'">
  153. <el-input v-model="formData.sweagepump.collectionOut" placeholder="请输入收水出路" clearable />
  154. </el-form-item>
  155. <el-form-item label="收水范围:" prop="collectionRange" style="width: 45%" v-if="formData.pumpType == 'sewage_water'">
  156. <el-input v-model="formData.sweagepump.collectionRange" placeholder="请输入收水范围" clearable />
  157. </el-form-item>
  158.  
  159. <!--污水处理 -->
  160. <el-divider content-position="left" v-if="formData.pumpType == 'sewage_handle'">污水处理信息</el-divider>
  161. <el-form-item label="设计规模(m³/s):" prop="designScaleSecond" style="width: 45%" v-if="formData.pumpType == 'sewage_handle'">
  162. <el-input v-model="formData.handlepump.designScaleSecond" placeholder="请输入设计规模(m³/s)" clearable />
  163. </el-form-item>
  164. <el-form-item label="单台流量(m³/s):" prop="singleFlowSccond" style="width: 45%" v-if="formData.pumpType == 'sewage_handle'">
  165. <el-input v-model="formData.handlepump.singleFlowSccond" placeholder="请输入单台流量(m³/s)" clearable />
  166. </el-form-item>
  167. <el-form-item label="泵机台数:" prop="deviceCount" style="width: 45%" v-if="formData.pumpType == 'sewage_handle'">
  168. <el-input v-model="formData.handlepump.deviceCount" placeholder="请输入泵机台数" clearable />
  169. </el-form-item>
  170. <el-form-item label="收水出路:" prop="collectionOut" style="width: 45%" v-if="formData.pumpType == 'sewage_handle'">
  171. <el-input v-model="formData.handlepump.collectionOut" placeholder="请输入收水出路" clearable />
  172. </el-form-item>
  173. <el-form-item label="收水范围:" prop="collectionRange" style="width: 45%" v-if="formData.pumpType == 'sewage_handle'">
  174. <el-input v-model="formData.handlepump.collectionRange" placeholder="请输入收水范围" clearable />
  175. </el-form-item>
  176.  
  177. <!--临时泵 -->
  178. <el-divider content-position="left">临时泵站信息</el-divider>
  179. <el-form-item label="是否有临时泵:" prop="haveTemporary" style="width: 45%">
  180. <el-select clearable v-model="formData.haveTemporary" class="m-2" placeholder="请选择" style="width: 100%">
  181. <el-option v-for="item in pumpingData" :key="item.value" :label="item.label" :value="item.value" />
  182. </el-select>
  183. </el-form-item>
  184. <el-form-item label="设计规模(m³/s):" prop="designScaleSecond" style="width: 45%" v-if="formData.haveTemporary == '1'">
  185. <el-input v-model="formData.temporarypump.designScaleSecond" placeholder="请输入设计规模(m³/s)" clearable />
  186. </el-form-item>
  187. <el-form-item label="单台流量(m³/s):" prop="singleFlowSccond" style="width: 45%" v-if="formData.haveTemporary == '1'">
  188. <el-input v-model="formData.temporarypump.singleFlowSccond" placeholder="请输入单台流量(m³/s)" clearable />
  189. </el-form-item>
  190. <el-form-item label="泵机台数:" prop="deviceCount" style="width: 45%" v-if="formData.haveTemporary == '1'">
  191. <el-input v-model="formData.temporarypump.deviceCount" placeholder="请输入泵机台数" clearable />
  192. </el-form-item>
  193. <el-form-item label="收水出路:" prop="collectionOut" style="width: 45%" v-if="formData.haveTemporary == '1'">
  194. <el-input v-model="formData.temporarypump.collectionOut" placeholder="请输入收水出路" clearable />
  195. </el-form-item>
  196. <el-form-item label="收水范围:" prop="collectionRange" style="width: 45%" v-if="formData.haveTemporary == '1'">
  197. <el-input v-model="formData.temporarypump.collectionRange" placeholder="请输入收水范围" clearable />
  198. </el-form-item>
  199.  
  200. <!-- -->
  201. <el-divider content-position="left"></el-divider>
  202. <el-form-item label="泵站地址:" prop="address" style="width: 45%">
  203. <el-input v-model="formData.address" placeholder="请输入泵站地址" clearable />
  204. </el-form-item>
  205. <el-form-item label="经度:" prop="lon" style="width: 45%">
  206. <el-input v-model="formData.lon" placeholder="请输入经度" clearable />
  207. </el-form-item>
  208. <el-form-item label="纬度:" prop="lat" style="width: 45%">
  209. <el-input v-model="formData.lat" placeholder="请输入纬度" clearable />
  210. </el-form-item>
  211. <el-form-item label="格栅机:" prop="grilleMachine" style="width: 45%">
  212. <el-input v-model="formData.grilleMachine" placeholder="请输入格栅机" clearable />
  213. </el-form-item>
  214. <el-form-item label="开启数量:" prop="openNumber" style="width: 45%">
  215. <el-input v-model="formData.openNumber" placeholder="请输入开启数量" clearable />
  216. </el-form-item>
  217. <el-form-item label="总流量m³/s:" prop="totalFlow" style="width: 45%">
  218. <el-input v-model="formData.totalFlow" placeholder="请输入总流量m³/s" clearable />
  219. </el-form-item>
  220. <el-form-item label="管理单位:" prop="unitDep" style="width: 45%">
  221. <el-input v-model="formData.unitDep" placeholder="请输入管理单位" clearable />
  222. </el-form-item>
  223. <el-form-item label="占地面积(㎡):" prop="buildArea" style="width: 45%">
  224. <el-input v-model="formData.buildArea" placeholder="请输入占地面积(㎡)" clearable />
  225. </el-form-item>
  226. <el-form-item label="联系人:" prop="dutyUserName" style="width: 45%">
  227. <el-input v-model="formData.dutyUserName" placeholder="请输入联系人" clearable />
  228. </el-form-item>
  229. <el-form-item label="联系人电话:" prop="dutyUserPhone" style="width: 45%">
  230. <el-input v-model="formData.dutyUserPhone" placeholder="请输入联系人电话" clearable />
  231. </el-form-item>
  232. </el-row>
  233. </el-form>
  234. <template #footer>
  235. <div class="dialog-footer">
  236. <el-button type="primary" @click="submitForm" v-show="!isDisab">确定</el-button>
  237. <el-button @click="cancel">取消</el-button>
  238. </div>
  239. </template>
  240. </el-dialog>
  241. </div>
  242. </div>
  243. </template>
  244.  
  245. <script setup>
  246. import { stationInfolist } from '@/api/scada/areaInfo';
  247. import { facilityPumpPage, facilityPumpAdd, facilityPumpEdit, facilityPumpDelete } from '@/api/scada/pumpStationInformation';
  248. const { proxy } = getCurrentInstance();
  249. const hiddentext = ref(false);
  250. const isDisab = ref(false);
  251. const showSearch = ref(true);
  252. const showDialog = ref(false);
  253. const tableLoading = ref(true);
  254. const total = ref(0);
  255. const tableData = ref([]);
  256. let typeList = ref([]);
  257. const dialogTitle = ref('');
  258. const { pump_type } = proxy.useDict('pump_type');
  259. console.log(pump_type, 'pump_type');
  260. const pumpingData = ref([
  261. { label: '是', value: '1' },
  262. { label: '否', value: '0' },
  263. ]);
  264. let AllData = reactive({
  265. formData: { rainpump: {}, temporarypump: {}, sweagepump: {}, handlepump: {} },
  266. queryParams: { pumpName: '', pumpType: '', pageNum: 1, pageSize: 10 },
  267. formRules: {
  268. pumpName: [{ required: true, message: '请输入泵站名称', trigger: 'blur' }],
  269. pumpCode: [{ required: true, message: '请输入泵站编码', trigger: 'blur' }],
  270. pumpType: [{ required: true, message: '请选择泵站类型', trigger: 'blur' }],
  271. dutyUserPhone: [
  272. {
  273. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  274. message: '请输入正确的手机号码',
  275. trigger: 'blur',
  276. },
  277. ],
  278. },
  279. });
  280. let { queryParams, formData, formRules } = toRefs(AllData);
  281. /** 表单重置 */
  282. function resetForm() {
  283. formData.value = {};
  284. proxy.resetForm('ruleForm');
  285. }
  286. //搜索
  287. const searchForm = () => {
  288. queryParams.value.pageNum = 1;
  289. getDataList();
  290. };
  291. //重置按钮
  292. const resectClcik = () => {
  293. queryParams.value.pumpName = '';
  294. queryParams.value.pumpType = '';
  295. getDataList();
  296. };
  297.  
  298. //获取列表数据
  299. const getDataList = async () => {
  300. tableLoading.value = true;
  301. const res = await facilityPumpPage(queryParams.value);
  302. tableLoading.value = false;
  303. tableData.value = res.data;
  304. total.value = res.total;
  305. };
  306.  
  307. // 下拉框
  308. function pumpTypechange(val) {
  309. if (formData.value.pumpType == 'rain_water') {
  310. // formData.value.rainpump = {};
  311. formData.value.temporarypump = {};
  312. formData.value.sweagepump = {};
  313. formData.value.handlepump = {};
  314. formData.value.haveTemporary = pumpingData.value[1].value;
  315. } else if (formData.value.pumpType == 'sewage_water') {
  316. // formData.value.sweagepump = {};
  317. formData.value.temporarypump = {};
  318. formData.value.rainpump = {};
  319. formData.value.handlepump = {};
  320. formData.value.haveTemporary = pumpingData.value[1].value;
  321. } else if (formData.value.pumpType == 'sewage_handle') {
  322. // formData.value.handlepump = {};
  323. formData.value.temporarypump = {};
  324. formData.value.rainpump = {};
  325. formData.value.sweagepump = {};
  326. formData.value.haveTemporary = pumpingData.value[1].value;
  327. } else {
  328. formData.value.temporarypump = {};
  329. formData.value.handlepump = {};
  330. formData.value.rainpump = {};
  331. formData.value.haveTemporary = pumpingData.value[1].value;
  332. }
  333. }
  334.  
  335. //新增按钮
  336. const addData = () => {
  337. resetForm();
  338. isDisab.value = false;
  339. showDialog.value = true;
  340. hiddentext.value = false;
  341. dialogTitle.value = '新增泵站信息';
  342. formData.value.temporarypump = {};
  343. formData.value.rainpump = {};
  344. formData.value.sweagepump = {};
  345. formData.value.handlepump = {};
  346. formData.value.haveTemporary = pumpingData.value[1].value;
  347. formData.value.pumpType = pump_type._object.pump_type[0].value;
  348. };
  349. /** 取消按钮 */
  350. function cancel() {
  351. showDialog.value = false;
  352. resetForm();
  353. }
  354. /** 新增弹框 修改弹框 提交按钮 */
  355. async function submitForm() {
  356. proxy.$refs['ruleForm'].validate(valid => {
  357. if (valid) {
  358. if (formData.value.id != undefined) {
  359. facilityPumpEdit(formData.value).then(() => {
  360. proxy.$modal.msgSuccess('修改成功');
  361. showDialog.value = false;
  362. getDataList();
  363. });
  364. } else {
  365. formData.value.pumpType = formData.value.pumpType;
  366. if (formData.value.pumpType == 'rain_water') {
  367. formData.value.rainpump.pumpType = formData.value.pumpType;
  368. formData.value.temporarypump.pumpType = 'temporary';
  369. } else if (formData.value.pumpType == 'sewage_water') {
  370. formData.value.sweagepump.pumpType = formData.value.pumpType;
  371. formData.value.temporarypump.pumpType = 'temporary';
  372. } else if (formData.value.pumpType == 'sewage_handle') {
  373. formData.value.handlepump.pumpType = formData.value.pumpType;
  374. formData.value.temporarypump.pumpType = 'temporary';
  375. } else {
  376. formData.value.sweagepump.pumpType = formData.value.pumpType;
  377. formData.value.rainpump.pumpType = formData.value.pumpType;
  378. formData.value.temporarypump.pumpType = 'temporary';
  379. }
  380. console.log(formData.value, 'formData.value');
  381. facilityPumpAdd(formData.value).then(() => {
  382. proxy.$modal.msgSuccess('新增成功');
  383. showDialog.value = false;
  384. getDataList();
  385. });
  386. }
  387. }
  388. });
  389. }
  390.  
  391. //表格修改
  392. function editData(row) {
  393. dialogTitle.value = '修改泵站信息';
  394. isDisab.value = false;
  395. showDialog.value = true;
  396. hiddentext.value = true;
  397. formData.value = { ...row };
  398. }
  399. // 表格删除
  400. function deleteData(row) {
  401. proxy.$modal
  402. .confirm('是否确认删除?')
  403. .then(async () => {
  404. const res = await facilityPumpDelete(row.id);
  405. if (res?.code !== 200) return;
  406. proxy.$modal.msgSuccess('操作成功!');
  407. getDataList();
  408. })
  409. .catch(() => {});
  410. }
  411. //详情按钮
  412. function checkDetail(row) {
  413. dialogTitle.value = '查看泵站信息';
  414. isDisab.value = true;
  415. showDialog.value = true;
  416. formData.value = { ...row };
  417. }
  418.  
  419. onMounted(() => {
  420. getDataList();
  421. });
  422. </script>
  423.  
  424. <style lang="scss" scoped></style>