Newer
Older
KaiFengPC / src / views / floodSys / scada / deviceInfo / index.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <div class="water-analysis-page">
  3. <div class="top">
  4. <el-form ref="ruleForm" inline :model="tableData" v-show="showSearch">
  5. <el-form-item v-for="i in queryClouns" :label="i.label" :prop="i.prop">
  6. <el-select
  7. style="width: 100%"
  8. clearable
  9. v-model="tableData.stationCode"
  10. v-if="i.prop == 'stationName'"
  11. :placeholder="i.placeholder"
  12. @change="stationNameChangea"
  13. >
  14. <el-option v-for="dict in typeList.stationName_type" :key="dict.id" :label="dict.stationName" :value="dict.stationCode" />
  15. </el-select>
  16. <el-select
  17. style="width: 100%"
  18. clearable
  19. v-model="tableData.areaCode"
  20. v-else-if="i.prop == 'areaName'"
  21. :placeholder="i.placeholder"
  22. >
  23. <el-option v-for="dict in typeList.areaName_type" :key="dict.id" :label="dict.areaName" :value="dict.areaCode" />
  24. </el-select>
  25. <el-select
  26. style="width: 100%"
  27. clearable
  28. v-model="tableData.status"
  29. class="m-2"
  30. v-else-if="i.prop == 'status'"
  31. :placeholder="i.placeholder"
  32. >
  33. <el-option v-for="dict in status_source" :key="dict.value" :label="dict.label" :value="dict.value" />
  34. </el-select>
  35. <el-input v-else style="width: 240px" clearable v-model="tableData[i.prop]" :placeholder="i.placeholder"></el-input>
  36. </el-form-item>
  37. <el-form-item>
  38. <el-button type="primary" icon="Search" @click="searchForm"> 查询</el-button>
  39. <el-button icon="Refresh" @click="resectClcik"> 重置</el-button>
  40. </el-form-item>
  41. </el-form>
  42. <el-row :gutter="10" class="mb8">
  43. <el-col :span="1.5">
  44. <el-button type="primary" plain icon="Plus" @click="onCheck(4)">新增</el-button>
  45. </el-col>
  46. <right-toolbar v-model:showSearch="showSearch" @queryTable="searchForm"></right-toolbar>
  47. </el-row>
  48. </div>
  49. <todoDon ref="todoDonRef" :typeListList="typeList"></todoDon>
  50. <el-dialog v-model="visible" title="PLC设备信息新增" :modal-append-to-body="false" :close-on-click-modal="false" width="51%">
  51. <tableDalgo :key="isFlag" ref="tableDalgoRef" :typeList="typeList" @onModalClose="onModalClose"></tableDalgo>
  52. <template #footer>
  53. <div class="dialog-footer">
  54. <el-button @click="open2" type="primary">保 存</el-button>
  55. <el-button @click="visible = false">关闭</el-button>
  56. </div>
  57. </template>
  58. </el-dialog>
  59. </div>
  60. </template>
  61. <script setup>
  62. import { stationInfolist, areaInfolist } from '@/api/scada/areaInfo';
  63. import tableDalgo from './tableDalgo.vue';
  64. import todoDon from './todoDon.vue';
  65. import { status_source } from '@/utils/form';
  66. const todoDonRef = ref(null);
  67. const ruleForm = ref(null);
  68. let typeList = ref({});
  69. const tableDalgoRef = ref();
  70. const showSearch = ref(true);
  71. let visible = ref(false);
  72. let isFlag = ref(1);
  73. const queryClouns = [
  74. { label: '站点名称:', prop: 'stationName', placeholder: '请选择站点名称' },
  75. { label: '区域名称', prop: 'areaName', placeholder: '请输入区域名称' },
  76. {
  77. label: '设备名称:',
  78. prop: 'deviceName',
  79. placeholder: '设备名称',
  80. },
  81. {
  82. label: '状态:',
  83. prop: 'status',
  84. placeholder: '请选择状态',
  85. },
  86. ];
  87. //动态组件
  88. let dataForm = reactive({
  89. tableData: {
  90. pageNum: 1,
  91. pageSize: 10,
  92. stationCode: null,
  93. status: null,
  94. areaCode: null,
  95. deviceName: null,
  96. },
  97. tableDateTwo: '',
  98. tableLoading: true,
  99. });
  100. let { tableData } = toRefs(dataForm);
  101. //获取列表数据
  102. //搜索
  103. const searchForm = () => {
  104. todoDonRef.value.search(tableData.value);
  105. };
  106. //重置
  107. const resectClcik = () => {
  108. tableData.value = {};
  109. ruleForm.value.resetFields();
  110. todoDonRef.value.search(tableData.value);
  111. };
  112. // 新增
  113. const onCheck = ty => {
  114. visible.value = true;
  115. typeList.value.type = ty;
  116. nextTick(() => {
  117. tableDalgoRef.value.resetFiled();
  118. });
  119. };
  120. //保存
  121. function open2() {
  122. tableDalgoRef.value.submit();
  123. }
  124. function onModalClose() {
  125. visible.value = false;
  126. todoDonRef.value.search(tableData.value);
  127. }
  128. const stationInfolistM = async () => {
  129. let { data } = await stationInfolist();
  130. typeList.value.stationName_type = data;
  131. };
  132. const areaInfolistM = async p => {
  133. let { data } = await areaInfolist(p);
  134. typeList.value.areaName_type = data;
  135. };
  136. function stationNameChangea(v) {
  137. tableData.value.areaCode = '';
  138. areaInfolistM({ stationCode: v });
  139. }
  140. onMounted(() => {
  141. stationInfolistM();
  142. areaInfolistM();
  143. searchForm();
  144. });
  145. </script>
  146. <style lang="scss" scoped>
  147. .water-analysis-page {
  148. padding: 20px;
  149. overflow-y: hidden;
  150. }
  151. </style>