Newer
Older
KaiFengPC / src / views / floodSys / scada / pumpStationInformation / index.vue
@鲁yixuan 鲁yixuan on 5 Jun 16 KB updata
  1. <template>
  2. <!-- 泵站信息管理 -->
  3. <div class="water-analysis-page">
  4. <div class="top">
  5. <el-form ref="queryRef" inline :model="queryParams" v-show="showSearch">
  6. <el-form-item label="站点:" prop="pumpCode">
  7. <el-select clearable v-model="queryParams.pumpCode" placeholder="请选择">
  8. <el-option v-for="item in typeList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
  9. </el-select>
  10. </el-form-item>
  11. <el-form-item label="泵站类型:" prop="pumpType">
  12. <el-select clearable v-model="queryParams.pumpType" placeholder="请选择">
  13. <el-option v-for="dict in pump_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  14. </el-select>
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button type="primary" icon="Search" @click="searchForm"> 查询</el-button>
  18. <el-button icon="Refresh" @click="resectClcik"> 重置</el-button>
  19. </el-form-item>
  20. </el-form>
  21. <el-row :gutter="10" class="mb8">
  22. <el-button type="primary" plain icon="Plus" @click="addData">新增</el-button>
  23. <right-toolbar v-model:showSearch="showSearch" @queryTable="searchForm"></right-toolbar>
  24. </el-row>
  25. </div>
  26. <!-- 表格 -->
  27. <el-table :data="tableData" v-loading="tableLoading" :max-height="650">
  28. <el-table-column type="index" width="70" label="序号" />
  29. <el-table-column label="泵站编号" prop="pumpCode" />
  30. <el-table-column label="泵站名称" prop="pumpName" />
  31. <el-table-column label="泵站类型" prop="pumpType">
  32. <template #default="{ row }">
  33. <dict-tag :options="pump_type" :value="row.pumpType"></dict-tag>
  34. </template>
  35. </el-table-column>
  36. <el-table-column label="设计规模" prop="designScale">
  37. <template #default="{ row }">
  38. {{ getUnitName(row) }}
  39. </template>
  40. </el-table-column>
  41. <el-table-column label="日抽排量" prop="dayLarge" />
  42. <el-table-column label="起抽水位(m)" prop="qbWaterlevel" />
  43. <el-table-column label="停抽水位(m)" prop="tbWaterlevel" />
  44. <el-table-column label="建设时间" prop="createTime" width="160" />
  45. <el-table-column label="主管单位" prop="unitDep" />
  46. <el-table-column label="泵机数量" prop="deviceCount" />
  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="70%" :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 clearable v-model="formData.pumpType" class="m-2" placeholder="请选择" style="width: 100%">
  76. <el-option v-for="item in pump_type" :key="item.value" :label="item.label" :value="item.value" />
  77. </el-select>
  78. </el-form-item>
  79. <el-form-item label="所属:" prop="belongTo" style="width: 45%">
  80. <el-select clearable v-model="formData.belongTo" class="m-2" placeholder="请选择" style="width: 100%">
  81. <el-option v-for="item in Affiliation" :key="item.value" :label="item.label" :value="item.value" />
  82. </el-select>
  83. </el-form-item>
  84. <el-form-item label="建筑面积:" prop="buildArea" style="width: 45%">
  85. <el-input v-model="formData.buildArea" placeholder="请输入" clearable />
  86. </el-form-item>
  87. <el-form-item label="汇水分区(汇水分区):" prop="catchmentArea" style="width: 45%">
  88. <el-input v-model="formData.catchmentArea" placeholder="请输入" clearable />
  89. </el-form-item>
  90. <el-form-item label="运维公司:" prop="company" style="width: 45%">
  91. <el-input v-model="formData.company" placeholder="请输入" clearable />
  92. </el-form-item>
  93. <el-form-item label="出水管管径(csg管径):" prop="csgPipeDiameter" style="width: 45%">
  94. <el-input v-model="formData.csgPipeDiameter" placeholder="请输入" clearable />
  95. </el-form-item>
  96. <el-form-item label="设计来源:" prop="dataSource" style="width: 45%">
  97. <el-select clearable v-model="formData.dataSource" class="m-2" placeholder="请选择" style="width: 100%">
  98. <el-option v-for="item in Datasources" :key="item.value" :label="item.label" :value="item.value" />
  99. </el-select>
  100. </el-form-item>
  101. <el-form-item label="日抽排量:" prop="dayLarge" style="width: 45%">
  102. <el-input-number v-model="formData.dayLarge" placeholder="请输入" controls-position="right" style="width: 100%" clearable />
  103. </el-form-item>
  104. <el-form-item label="设计扬程:" prop="designHead" style="width: 45%">
  105. <el-input-number v-model="formData.designHead" placeholder="请输入" controls-position="right" style="width: 100%" clearable />
  106. </el-form-item>
  107. <el-form-item label="设计功率:" prop="designPower" style="width: 45%">
  108. <el-input-number
  109. v-model="formData.designPower"
  110. placeholder="请输入"
  111. controls-position="right"
  112. style="width: 100%"
  113. clearable
  114. />
  115. </el-form-item>
  116. <el-form-item :label="changelabel()" prop="designScale" style="width: 45%">
  117. <el-input-number v-model="formData.designScale" placeholder="请输入" controls-position="right" style="width: 100%" clearable>
  118. </el-input-number>
  119. </el-form-item>
  120. <el-form-item label="设计时间(sj时间):" prop="designTime" style="width: 45%">
  121. <el-input v-model="formData.designTime" placeholder="请输入" clearable />
  122. </el-form-item>
  123.  
  124. <el-form-item label="泵机数量:" prop="deviceCount" style="width: 45%">
  125. <el-input-number
  126. v-model="formData.deviceCount"
  127. placeholder="请输入"
  128. controls-position="right"
  129. style="width: 100%"
  130. clearable
  131. />
  132. </el-form-item>
  133. <el-form-item label="领导:" prop="dutyLeaderName" style="width: 45%">
  134. <el-input v-model="formData.dutyLeaderName" placeholder="请输入" clearable />
  135. </el-form-item>
  136. <el-form-item label="领导手机号:" prop="dutyLeaderPhone" style="width: 45%">
  137. <el-input v-model="formData.dutyLeaderPhone" placeholder="请输入" clearable />
  138. </el-form-item>
  139. <el-form-item label="负责人:" prop="dutyUserName" style="width: 45%">
  140. <el-input v-model="formData.dutyUserName" placeholder="请输入" clearable />
  141. </el-form-item>
  142. <el-form-item label="负责人手机号:" prop="dutyUserPhone" style="width: 45%">
  143. <el-input v-model="formData.dutyUserPhone" placeholder="请输入" clearable />
  144. </el-form-item>
  145. <el-form-item label="空间数据:" prop="geometrys" style="width: 45%">
  146. <el-input v-model="formData.geometrys" placeholder="请输入" clearable />
  147. </el-form-item>
  148. <el-form-item label="地面高程(地面gc):" prop="groundAltitude" style="width: 45%">
  149. <el-input v-model="formData.groundAltitude" placeholder="请输入" clearable />
  150. </el-form-item>
  151. <el-form-item label="所属污水处理系统:" prop="hhsxWaterCode" style="width: 45%">
  152. <el-input v-model="formData.hhsxWaterCode" placeholder="请输入" clearable />
  153. </el-form-item>
  154. <el-form-item label="jsc高程 (jsc高程):" prop="jscAltitude" style="width: 45%">
  155. <el-input v-model="formData.jscAltitude" placeholder="请输入" clearable />
  156. </el-form-item>
  157. <el-form-item label="进水管管径(jsg管径):" prop="jsgPipeDiameter" style="width: 45%">
  158. <el-input v-model="formData.jsgPipeDiameter" placeholder="请输入" clearable />
  159. </el-form-item>
  160.  
  161. <el-form-item label="抽排量(m³/h):" prop="large" style="width: 45%">
  162. <el-input-number v-model="formData.large" placeholder="请输入" controls-position="right" style="width: 100%" clearable />
  163. </el-form-item>
  164. <el-form-item label="最高水位 (zg水位):" prop="maxWaterlevel" style="width: 45%">
  165. <el-input-number
  166. v-model="formData.maxWaterlevel"
  167. placeholder="请输入"
  168. controls-position="right"
  169. style="width: 100%"
  170. clearable
  171. />
  172. </el-form-item>
  173. <el-form-item label="型号 (设计院-型号):" prop="model" style="width: 45%">
  174. <el-input v-model="formData.model" placeholder="请输入" clearable />
  175. </el-form-item>
  176. <el-form-item label="起排水位(起抽水位):" prop="qbWaterlevel" style="width: 45%">
  177. <el-input v-model="formData.qbWaterlevel" placeholder="请输入" clearable />
  178. </el-form-item>
  179. <el-form-item label="停排水位(停抽水位):" prop="tbWaterlevel" style="width: 45%">
  180. <el-input v-model="formData.tbWaterlevel" placeholder="请输入" clearable />
  181. </el-form-item>
  182. <el-form-item label="行政区(行政区):" prop="region" style="width: 45%">
  183. <el-input v-model="formData.region" placeholder="请输入" clearable />
  184. </el-form-item>
  185. <el-form-item label="主管单位:" prop="unitDep" style="width: 45%">
  186. <el-input v-model="formData.unitDep" placeholder="请输入" clearable />
  187. </el-form-item>
  188. </el-row>
  189. </el-form>
  190. <template #footer>
  191. <div class="dialog-footer">
  192. <el-button type="primary" @click="submitForm" v-show="!isDisab">保 存</el-button>
  193. <el-button @click="cancel">关闭</el-button>
  194. </div>
  195. </template>
  196. </el-dialog>
  197. </div>
  198. </div>
  199. </template>
  200.  
  201. <script setup>
  202. import { stationInfolist } from '@/api/scada/areaInfo';
  203. import { facilityPumpPage, facilityPumpAdd, facilityPumpEdit, facilityPumpDelete } from '@/api/scada/pumpStationInformation';
  204. import { getInfo } from '@/api/scada/plcPointInfo';
  205. const { proxy } = getCurrentInstance();
  206. const hiddentext = ref(false);
  207. const isDisab = ref(false);
  208. const showSearch = ref(true);
  209. const showDialog = ref(false);
  210. const tableLoading = ref(true);
  211. const total = ref(0);
  212. const tableData = ref([]);
  213. let typeList = ref([]);
  214. const dialogTitle = ref('');
  215. const { pump_type } = proxy.useDict('pump_type');
  216.  
  217. const Affiliation = ref([
  218. { label: '市', value: '1' },
  219. { label: '区', value: '2' },
  220. ]);
  221. const Datasources = ref([
  222. { label: '设计院', value: '1' },
  223. { label: '待定', value: '2' },
  224. ]);
  225.  
  226. let AllData = reactive({
  227. formData: {},
  228. queryParams: { pumpCode: '', pumpType: '', pageNum: 1, pageSize: 10 },
  229. formRules: {},
  230. });
  231. let { queryParams, formData, formRules } = toRefs(AllData);
  232. /** 表单重置 */
  233. function resetForm() {
  234. formData.value = {
  235. stCode: undefined,
  236. belongTo: undefined,
  237. dataSource: undefined,
  238. buildArea: undefined,
  239. dayLarge: undefined,
  240. designHead: undefined,
  241. };
  242. proxy.resetForm('ruleForm');
  243. }
  244. //搜索
  245. const searchForm = () => {
  246. queryParams.value.pageNum = 1;
  247. getDataList();
  248. };
  249. //重置按钮
  250. const resectClcik = () => {
  251. queryParams.value.pumpCode = '';
  252. queryParams.value.pumpType = '';
  253. getDataList();
  254. };
  255. //站点下拉框
  256. const stationInfolistM = async p => {
  257. const res = await stationInfolist();
  258. typeList.value = res.data;
  259. };
  260. //获取列表数据
  261. const getDataList = async () => {
  262. tableLoading.value = true;
  263. const res = await facilityPumpPage(queryParams.value);
  264. tableLoading.value = false;
  265. tableData.value = res.data;
  266. total.value = res.total;
  267. };
  268. //新增按钮
  269. const addData = () => {
  270. resetForm();
  271. isDisab.value = false;
  272. showDialog.value = true;
  273. hiddentext.value = false;
  274. dialogTitle.value = '新增泵站信息';
  275. };
  276. /** 取消按钮 */
  277. function cancel() {
  278. showDialog.value = false;
  279. resetForm();
  280. }
  281. /** 新增弹框 修改弹框 提交按钮 */
  282. async function submitForm() {
  283. proxy.$refs['ruleForm'].validate(valid => {
  284. if (valid) {
  285. if (formData.value.id != undefined) {
  286. facilityPumpEdit(formData.value).then(() => {
  287. proxy.$modal.msgSuccess('修改成功');
  288. showDialog.value = false;
  289. getDataList();
  290. });
  291. } else {
  292. facilityPumpAdd(formData.value).then(() => {
  293. proxy.$modal.msgSuccess('新增成功');
  294. showDialog.value = false;
  295. getDataList();
  296. });
  297. }
  298. }
  299. });
  300. }
  301.  
  302. function changelabel() {
  303. let label = '设计规模';
  304. switch (formData.value.pumpType) {
  305. case 'rain_water':
  306. label = '设计规模(m³/s)';
  307. break;
  308. case 'sewage_water':
  309. label = '设计规模(m³/s)';
  310. break;
  311. case 'drain_flooded':
  312. label = '设计规模(m³/s)';
  313. break;
  314. }
  315. return label;
  316. }
  317. //表格修改
  318. function editData(row) {
  319. dialogTitle.value = '修改泵站信息';
  320. isDisab.value = false;
  321. showDialog.value = true;
  322. hiddentext.value = true;
  323. formData.value = { ...row };
  324. formData.value.designHead = Number(row.designHead);
  325. formData.value.dayLarge = Number(row.dayLarge);
  326. formData.value.designPower = Number(row.designPower);
  327. formData.value.deviceCount = Number(row.deviceCount);
  328. formData.value.maxWaterlevel = Number(row.maxWaterlevel);
  329. formData.value.modelValue = Number(row.modelValue);
  330. formData.value.large = Number(row.large);
  331. }
  332. // 表格删除
  333. function deleteData(row) {
  334. proxy.$modal
  335. .confirm('是否确认删除?')
  336. .then(async () => {
  337. const res = await facilityPumpDelete(row.id);
  338. if (res?.code !== 200) return;
  339. proxy.$modal.msgSuccess('操作成功!');
  340. getDataList();
  341. })
  342. .catch(() => {});
  343. }
  344. //详情按钮
  345. function checkDetail(row) {
  346. dialogTitle.value = '查看泵站信息';
  347. isDisab.value = true;
  348. showDialog.value = true;
  349. formData.value = { ...row };
  350. formData.value.designHead = Number(row.designHead);
  351. formData.value.dayLarge = Number(row.dayLarge);
  352. formData.value.designPower = Number(row.designPower);
  353. formData.value.deviceCount = Number(row.deviceCount);
  354. formData.value.maxWaterlevel = Number(row.maxWaterlevel);
  355. formData.value.modelValue = Number(row.modelValue);
  356. formData.value.large = Number(row.large);
  357. // console.log(formData.value.pumpType, 'formData.value.pumpType');
  358. }
  359.  
  360. function getUnitName(row) {
  361. let unitName = '';
  362. switch (row.pumpType) {
  363. case 'rain_water':
  364. unitName = 'm³/s';
  365. break;
  366. case 'sewage_water':
  367. unitName = 'm³/s';
  368. break;
  369. case 'drain_flooded':
  370. unitName = 'm³/s';
  371. break;
  372. }
  373.  
  374. return `${row.designScale}${unitName}`;
  375. }
  376.  
  377. onMounted(() => {
  378. getDataList();
  379. stationInfolistM();
  380. });
  381. </script>
  382.  
  383. <style lang="scss" scoped>
  384. .water-analysis-page {
  385. padding: 20px;
  386. overflow-y: hidden;
  387. }
  388. </style>