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