Newer
Older
KaiFengPC / src / views / spongePerformance / OutputPerformance / SewageTreatment.vue
@鲁yixuan 鲁yixuan on 6 Jun 7 KB update
  1. <template>
  2. <div class="publicContainer">
  3. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  4. <el-form-item label="统计年份" prop="date">
  5. <el-date-picker
  6. type="year"
  7. v-model="queryParams.date"
  8. value-format="YYYY"
  9. placeholder="请选择统计年份"
  10. style="width: 100%"
  11. ></el-date-picker>
  12. </el-form-item>
  13.  
  14. <el-form-item>
  15. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  16. <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
  17. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  18. </el-form-item>
  19. </el-form>
  20.  
  21. <!-- 表格 -->
  22. <el-table :data="dataList" v-loading="loading" stripe :max-height="580">
  23. <el-table-column type="index" width="55" label="序号" />
  24. <el-table-column label="统计年份" prop="q" />
  25. <el-table-column label="日期" prop="w" />
  26. <el-table-column label="进水BOD平均浓度(mg/L)">
  27. <el-table-column prop="monthPlan1" label="西区污水处理厂" />
  28. <el-table-column prop="monthPlan2" label="东区污水处理厂" />
  29. <el-table-column prop="monthPlan3" label="马家河污水厂" />
  30. </el-table-column>
  31. <el-table-column label="均值" prop="p" />
  32. <el-table-column label="年度绩效指标" prop="a" />
  33. <el-table-column label="评价结论" prop="a" />
  34. <el-table-column label="操作" width="240">
  35. <template #default="scope">
  36. <el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">查看</el-button>
  37. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row, 'view')">修改</el-button>
  38. <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row, 'view')">删除</el-button>
  39. </template>
  40. </el-table-column>
  41. </el-table>
  42. <!-- 分页 -->
  43. <pagination
  44. v-show="total > 0"
  45. :total="total"
  46. v-model:page="queryParams.pageNum"
  47. v-model:limit="queryParams.pageSize"
  48. @pagination="getList"
  49. />
  50. <!-- 新增弹窗 -->
  51. <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
  52. <el-form ref="roleRef" :model="form" :rules="rules" label-width="130px" :disabled="multiple">
  53. <el-row :gutter="20">
  54. <el-col :span="12">
  55. <el-form-item label="统计年份:" prop="w">
  56. <el-date-picker
  57. type="year"
  58. v-model="queryParams.date"
  59. value-format="YYYY"
  60. placeholder="请选择统计年份"
  61. style="width: 100%"
  62. ></el-date-picker>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="12">
  66. <el-form-item label="日期:" prop="w">
  67. <el-date-picker
  68. type="month"
  69. v-model="queryParams.date"
  70. value-format="YYYY-MM"
  71. placeholder="请选择日期"
  72. style="width: 100%"
  73. ></el-date-picker>
  74. </el-form-item>
  75. </el-col>
  76. </el-row>
  77.  
  78. <el-row :gutter="20">
  79. <el-col :span="12">
  80. <el-form-item label="西区污水处理厂:" prop="lon">
  81. <el-input-number v-model="form.lon" placeholder="请输入西区污水处理厂" style="width: 100%" controls-position="right" />
  82. </el-form-item>
  83. </el-col>
  84. <el-col :span="12">
  85. <el-form-item label="东区污水处理厂:" prop="lat">
  86. <el-input-number v-model="form.lat" placeholder="请输入东区污水处理厂" style="width: 100%" controls-position="right" />
  87. </el-form-item>
  88. </el-col>
  89. </el-row>
  90.  
  91. <el-row :gutter="20">
  92. <el-col :span="12">
  93. <el-form-item label="马家河污水厂:" prop="lon">
  94. <el-input-number v-model="form.lon" placeholder="请输入马家河污水厂" style="width: 100%" controls-position="right" />
  95. </el-form-item>
  96. </el-col>
  97. <el-col :span="12">
  98. <el-form-item label="均值:" prop="lat">
  99. <el-input-number v-model="form.lat" placeholder="请输入均值" style="width: 100%" controls-position="right" />
  100. </el-form-item>
  101. </el-col>
  102. </el-row>
  103.  
  104. <el-row :gutter="20">
  105. <el-col :span="12">
  106. <el-form-item label="年度绩效指标" prop="date">
  107. <el-input type="textarea" v-model="form.lon" placeholder="请输入年度绩效指标" style="width: 100%" />
  108. </el-form-item>
  109. </el-col>
  110. <el-col :span="12">
  111. <el-form-item label="评价结论" prop="date">
  112. <el-input type="textarea" v-model="form.lon" placeholder="请输入评价结论标" style="width: 100%" />
  113. </el-form-item>
  114. </el-col>
  115. </el-row>
  116. </el-form>
  117. <template #footer>
  118. <div class="dialog-footer">
  119. <el-button type="primary" @click="submitForm">确 定</el-button>
  120. <el-button @click="cancel">取 消</el-button>
  121. </div>
  122. </template>
  123. </el-dialog>
  124. </div>
  125. </template>
  126. <script setup name="WaterSupplyWaterPlants">
  127. const { proxy } = getCurrentInstance();
  128. const open = ref(false);
  129. const multiple = ref(false);
  130. const showSearch = ref(true);
  131. const Xcfrequency = ref([
  132. {
  133. value: 'tian',
  134. label: '天',
  135. },
  136. {
  137. value: 'zhou',
  138. label: '周',
  139. },
  140. ]);
  141. const loading = ref(true);
  142. const total = ref(0);
  143. const title = ref('');
  144. const dataList = ref([]);
  145. const AllData = reactive({
  146. id: '',
  147. form: {},
  148. queryParams: {
  149. pageNum: 1,
  150. pageSize: 10,
  151. caseType: 1,
  152. handleStatus: '',
  153. searchContent: '',
  154. },
  155. rules: {
  156. id: [{ required: true, message: '请输入', trigger: 'blur' }],
  157. eventDescription: [{ required: true, message: '请输入', trigger: 'blur' }],
  158. },
  159. });
  160. const { queryParams, form, rules } = toRefs(AllData);
  161. //搜索
  162. function handleQuery() {
  163. getList();
  164. }
  165. //重置
  166. function resetQuery() {
  167. proxy.resetForm('queryRef');
  168. handleQuery();
  169. }
  170. // 新增
  171. function handleAdd() {
  172. title.value = '新增水厂供水';
  173. open.value = true;
  174. form.value = {};
  175. multiple.value = false;
  176. form.value.fileTag = Xcfrequency.value[0].value;
  177. }
  178. // 新增中取消事件
  179. function cancel() {
  180. open.value = false;
  181. proxy.resetForm('roleRef');
  182. }
  183.  
  184. // 巡查频率下拉框点击事件
  185. function changeStation(value) {
  186. // console.log(value, 'value');
  187. }
  188.  
  189. //查看详情操作
  190. function handleDetail(row) {
  191. open.value = true;
  192. title.value = '查看水厂供水';
  193. multiple.value = true;
  194. form.value = row;
  195. }
  196. // 修改按钮操作
  197. function handleUpdate(row) {
  198. open.value = true;
  199. title.value = '修改水厂供水';
  200. multiple.value = false;
  201. form.value = { ...row };
  202. }
  203.  
  204. /** 查询列表 */
  205. const getList = async () => {
  206. // loading.value = true;
  207. loading.value = false;
  208. };
  209.  
  210. onMounted(() => {
  211. getList();
  212. });
  213. </script>
  214. <style scoped lang="scss">
  215. .dituclass {
  216. width: 100%;
  217. height: 300px;
  218. // background: red;
  219. margin-bottom: 10px;
  220. border: 1px solid #004565;
  221. }
  222. </style>