Newer
Older
KaiFengPC / src / views / dataAnalysis / rtuSiteInfo / monitorList.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. <template>
  2. <!-- 监测项列表 -->
  3. <div>
  4. <el-row :gutter="10" class="mb8">
  5. <el-col :span="1.5">
  6. <el-button type="primary" plain icon="Plus" @click="handleAddMonitor">新增</el-button>
  7. </el-col>
  8. </el-row>
  9. <el-table v-loading="monitorLoading" :data="monitorList" border :max-height="500">
  10. <el-table-column label="序号" type="index" width="55" />
  11. <el-table-column label="站点编号" prop="stCode" width="120" />
  12. <el-table-column label="站点名称" prop="stName" show-overflow-tooltip />
  13. <el-table-column label="监测项名称" prop="monitorName" show-overflow-tooltip />
  14. <el-table-column label="监测项编号" prop="monitorCode" width="110" />
  15. <el-table-column label="监测范围" width="110">
  16. <template #default="scope">
  17. <span>{{ scope.row.minValue }}--{{ scope.row.maxValue }}</span>
  18. </template>
  19. </el-table-column>
  20. <el-table-column label="异常值" prop="exceptionValue" width="90" />
  21. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  22. <template #default="scope">
  23. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dataAnalysis:rtuSiteInfo:edit']">
  24. 修改
  25. </el-button>
  26. <el-button link type="warning" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['dataAnalysis:rtuSiteInfo:remove']">
  27. 删除
  28. </el-button>
  29. </template>
  30. </el-table-column>
  31. </el-table>
  32.  
  33. <pagination
  34. v-show="monitorTotal > 0"
  35. :total="monitorTotal"
  36. v-model:page="queryParams.pageNum"
  37. v-model:limit="queryParams.pageSize"
  38. @pagination="getList"
  39. />
  40. <!-- 添加或修改RTU站点对话框 -->
  41. <el-dialog :title="title" v-model="dialogShow" width="900px" append-to-body>
  42. <el-form ref="rtuSiteMonitorInfoRef" :model="form" :rules="rules" label-width="150px">
  43. <el-row>
  44. <el-col :span="12">
  45. <el-form-item label="监测对象类型" prop="monitorCode">
  46. <el-select v-model="form.monitorCode" placeholder="请选择" filterable style="width: 100%">
  47. <el-option
  48. v-for="dict in monitorCodeList"
  49. :key="dict.monitorCode"
  50. :label="dict.monitorName"
  51. :value="dict.monitorCode"
  52. ></el-option>
  53. </el-select>
  54. </el-form-item>
  55. </el-col>
  56.  
  57. <el-col :span="12">
  58. <el-form-item label="最小值" prop="minValue">
  59. <el-input v-model="form.minValue" placeholder="请输入最小值" />
  60. </el-form-item>
  61. </el-col>
  62. <el-col :span="12">
  63. <el-form-item label="最大值" prop="maxValue"> <el-input v-model="form.maxValue" placeholder="请输入最大值" /> </el-form-item
  64. ></el-col>
  65. <el-col :span="12">
  66. <el-form-item label="异常值" prop="exceptionValue">
  67. <el-input v-model="form.exceptionValue" placeholder="请输入异常值" />
  68. </el-form-item>
  69. </el-col>
  70. <el-col :span="24">
  71. <el-form-item label="备注" prop="remark">
  72. <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
  73. </el-form-item>
  74. </el-col>
  75. </el-row>
  76. </el-form>
  77. <template #footer>
  78. <div class="dialog-footer">
  79. <el-button type="info" @click="cancel">取 消</el-button>
  80. <el-button type="primary" @click="submitForm">确 定</el-button>
  81. </div>
  82. </template>
  83. </el-dialog>
  84. </div>
  85. </template>
  86. <script setup>
  87. import {
  88. pageRtuSiteMonitor,
  89. getRtuSiteMonitor,
  90. addRtuSiteMonitor,
  91. updateRtuSiteMonitor,
  92. delRtuSiteMonitor,
  93. } from '@/api/dataAnalysis/rtuSiteMonitor';
  94. import { listRtuMonitorProperty } from '@/api/dataAnalysis/rtuMonitorProperty';
  95. import { findDictObj } from '@/utils/ruoyi.js';
  96. const { proxy } = getCurrentInstance();
  97. const loading = ref(false);
  98. const dialogShow = ref(false);
  99. const title = ref('');
  100. const monitorLoading = ref(false);
  101. const monitorCodeList = ref([]); //监测因子列表
  102. const monitorList = ref([]); //站点配置的监测项列表
  103. const monitorTotal = ref(0);
  104. const data = reactive({
  105. form: {
  106. monitorCode: null,
  107. minValue: '',
  108. maxValue: '',
  109. exceptionValue: '',
  110. remark: null,
  111. },
  112. rules: {
  113. siteType: [{ required: true, message: '站点类型不能为空', trigger: 'change' }],
  114. monitorTargetType: [{ required: true, message: '监测对象类型不能为空', trigger: 'change' }],
  115. buildType: [{ required: true, message: '建设方式不能为空', trigger: 'change' }],
  116. stName: [{ required: true, message: '站点不能为空', trigger: 'blur' }],
  117. stCode: [{ required: true, message: '站点编号不能为空', trigger: 'blur' }],
  118. },
  119. queryParams: {
  120. pageNum: 1,
  121. pageSize: 10,
  122. },
  123. });
  124. const { queryParams, form, rules, monitorQueryParams } = toRefs(data);
  125. const props = defineProps({
  126. //刷新标志
  127. refresh: {
  128. type: [String, Number],
  129. default: 1,
  130. },
  131. //行数据
  132. row: {
  133. type: Object,
  134. default: {},
  135. },
  136. });
  137. watch(
  138. () => props.refresh,
  139. () => {
  140. queryParams.value = {
  141. pageNum: 1,
  142. pageSize: 10,
  143. };
  144. getList();
  145. getListRtuMonitorProperty();
  146. },
  147. {
  148. deep: true,
  149. immediate: true,
  150. }
  151. );
  152. function getList() {
  153. queryParams.value.stCode = props.row.stCode;
  154. loading.value = true;
  155. pageRtuSiteMonitor(queryParams.value).then(res => {
  156. monitorList.value = res.data;
  157. monitorTotal.value = res.total;
  158. monitorLoading.value = false;
  159. });
  160. }
  161.  
  162. //获取监测项
  163. function getListRtuMonitorProperty() {
  164. listRtuMonitorProperty().then(res => {
  165. monitorCodeList.value = res.data;
  166. });
  167. }
  168.  
  169. function handleAddMonitor() {
  170. proxy.resetForm('formRef'); //清空表单
  171. dialogShow.value = true;
  172. title.value = '新增监测项';
  173. }
  174.  
  175. // 取消按钮
  176. function cancel() {
  177. dialogShow.value = false;
  178. }
  179. /** 修改按钮操作 */
  180. function handleUpdate(row) {
  181. const _id = row.id || ids.value;
  182. getRtuSiteMonitor(_id).then(response => {
  183. form.value = response.data;
  184. dialogShow.value = true;
  185. title.value = '修改监测项';
  186. });
  187. }
  188.  
  189. /** 提交按钮 */
  190. function submitForm() {
  191. proxy.$refs['rtuSiteMonitorInfoRef'].validate(valid => {
  192. if (valid) {
  193. form.value.stCode = props.row.stCode;
  194. form.value.monitorValue = findDictObj(form.value.monitorCode, 'code', monitorCodeList.value).name;
  195. if (form.value.id != null) {
  196. updateRtuSiteMonitor(form.value).then(response => {
  197. proxy.$modal.msgSuccess('修改成功');
  198. dialogShow.value = false;
  199. getList();
  200. });
  201. } else {
  202. addRtuSiteMonitor(form.value).then(response => {
  203. proxy.$modal.msgSuccess('新增成功');
  204. dialogShow.value = false;
  205. getList();
  206. });
  207. }
  208. }
  209. });
  210. }
  211.  
  212. /** 删除按钮操作 */
  213. function handleDelete(row) {
  214. const _ids = row.id || ids.value;
  215. proxy.$modal
  216. .confirm('是否确认删除?')
  217. .then(function () {
  218. return delRtuSiteMonitor(_ids);
  219. })
  220. .then(() => {
  221. getList();
  222. proxy.$modal.msgSuccess('删除成功');
  223. })
  224. .catch(() => {});
  225. }
  226. </script>