Newer
Older
KaiFengPC / src / views / floodSys / scada / stationInfo / tableDalgo.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. <template>
  2. <div class="water-analysis-page">
  3. <div class="top">
  4. <el-form label-width="auto" :rules="stationInfoRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
  5. <el-form-item
  6. :label="i.label"
  7. :style="{ width: i.prop == 'fileList1' ? '93%' : '45%' }"
  8. :prop="i.prop"
  9. v-for="i in stationInfoForm"
  10. :key="i.prop"
  11. :disabled="typeList.type == 1 || typeList.type == 2"
  12. >
  13. <el-input v-model="FormList.lonLat" id="lonLat" v-if="i.prop == 'lonLat'" @click="clickMap(2)" :placeholder="i.placeholder">
  14. </el-input>
  15. <el-select
  16. style="width: 100%"
  17. clearable
  18. v-model="FormList.plcStationType"
  19. class="m-2"
  20. v-else-if="i.prop == 'plcStationType'"
  21. :placeholder="i.placeholder"
  22. id="plcStationType"
  23. >
  24. <el-option v-for="dict in plc_station_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  25. </el-select>
  26. <el-radio-group v-model="FormList.status" class="ml-4" v-else-if="i.prop == 'status'" id="status">
  27. <el-radio style="margin-top: -5px" label="1" size="large">启用</el-radio>
  28. <el-radio style="margin-top: -5px" label="0" size="large">停用</el-radio>
  29. </el-radio-group>
  30. <el-input
  31. v-else
  32. v-model="FormList[i.prop]"
  33. :placeholder="i.placeholder"
  34. :disabled="i.prop == 'stationCode' && typeList.type == 2"
  35. :type="i.prop == 'remark' ? 'textarea' : ''"
  36. :id="FormList[i.prop]"
  37. >
  38. <template #append v-if="i.prop == 'budget'"> 万元 </template>
  39. </el-input>
  40. </el-form-item>
  41. <el-form-item label="创建时间:" v-if="typeList.type == 1">
  42. <el-date-picker
  43. v-model="FormList.createTime"
  44. type="date"
  45. placeholder="创建时间"
  46. value-format="YYYY-MM-DD HH:mm:ss"
  47. style="width: 100%"
  48. />
  49. </el-form-item>
  50. <el-form-item label="更新时间:" v-if="typeList.type == 1">
  51. <el-date-picker
  52. v-model="FormList.updateTime"
  53. type="date"
  54. placeholder="更新时间"
  55. style="width: 100%"
  56. value-format="YYYY-MM-DD HH:mm:ss"
  57. />
  58. </el-form-item>
  59. <el-form-item label="建筑面积(亩):" prop="buildArea" style="width: 45%">
  60. <el-input-number :min="0" v-model="FormList.buildArea" placeholder="请输入建筑面积" clearable style="width: 100%" />
  61. </el-form-item>
  62. <el-form-item label="建设年份:" prop="constructionYear" style="width: 45%">
  63. <el-input v-model="FormList.constructionYear" placeholder="请输入建设年份" clearable />
  64. </el-form-item>
  65. <el-form-item label="设计流量(立方/小时):" prop="designFlow" style="width: 45%">
  66. <el-input-number :min="0" v-model="FormList.designFlow" placeholder="请输入" clearable style="width: 100%" />
  67. </el-form-item>
  68. <el-form-item label="设备数量:" prop="deviceCount" style="width: 45%">
  69. <el-input-number :min="0" v-model="FormList.deviceCount" placeholder="请输入" clearable style="width: 100%" />
  70. </el-form-item>
  71. <el-form-item label="关联摄像头:" prop="cameraInfoIds" style="width: 100%">
  72. <el-select placeholder="请输入" v-model="FormList.cameraInfoIds" clearable filterable multiple style="width: 100%">
  73. <el-option v-for="item in cameraList" :key="item.id" :label="item.name" :value="item.id" />
  74. </el-select>
  75. </el-form-item>
  76. <el-form-item label="介绍:" style="width: 100%" prop="introduce">
  77. <el-input
  78. placeholder="请输入"
  79. v-model="FormList.introduce"
  80. :autosize="{ minRows: 3 }"
  81. type="textarea"
  82. clearable
  83. style="width: 100%"
  84. />
  85. </el-form-item>
  86.  
  87. <el-form-item label="图片:" style="width: 100%">
  88. <ImageFileUpload :limit="3" :saveFileArr="FormList.fileSaveRequestList" :listType="'picture-card'" />
  89. </el-form-item>
  90. </el-form>
  91. </div>
  92. <el-dialog
  93. v-model="isMap"
  94. title="地图选取位置(可搜索可直接点击获取)"
  95. :modal-append-to-body="false"
  96. :close-on-click-modal="false"
  97. width="800px"
  98. >
  99. <MapPosition v-if="isMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
  100. <template #footer>
  101. <div class="dialog-footer">
  102. <el-button type="primary" @click="isMap = false">确 定</el-button>
  103. </div>
  104. </template>
  105. </el-dialog>
  106. </div>
  107. </template>
  108. <script setup>
  109. import { pagecameraResource } from '@/api/cameraResource/cameraResource';
  110. import { projectInfoAdd, projectInfoEdit } from '@/api/scada/stationInfo';
  111. import MapPosition from '@/components/Map/index.vue';
  112. import bus from '@/utils/mitt';
  113. import { stationInfoRules } from '@/utils/rules';
  114. import { stationInfoForm } from '@/utils/form';
  115. import { ElMessage, ElMessageBox } from 'element-plus';
  116. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  117.  
  118. const { proxy } = getCurrentInstance();
  119. const { plc_station_type } = proxy.useDict('plc_station_type');
  120. const { typeList } = defineProps(['typeList']);
  121. const emits = defineEmits();
  122. defineExpose({ submit, closed, resetFiled });
  123. let FormList = ref({ projectNo: '', fileSaveRequestList: [], status: '1' });
  124. const fileList1 = ref([]);
  125. const cameraList = ref([]);
  126. function submit() {
  127. proxy.$refs.ruleForm.validate(valid => {
  128. if (valid) {
  129. if (typeList.type == 4) {
  130. projectInfoAdd(FormList.value).then(({ code }) => {
  131. if (code == 200) {
  132. proxy.$modal.msgSuccess('新增成功');
  133. emits('onModalClose');
  134. }
  135. });
  136. } else {
  137. projectInfoEdit(FormList.value).then(({ code }) => {
  138. if (code == 200) {
  139. proxy.$modal.msgSuccess('修改成功');
  140. emits('onModalClose');
  141. }
  142. });
  143. }
  144. }
  145. });
  146. }
  147.  
  148. // 获取位置
  149. function getAddress(val) {
  150. FormList.value.lonLat = val.lonLat.join(',');
  151. }
  152. function resetFiled() {
  153. proxy.$refs.ruleForm.resetFields();
  154. FormList.value.fileSaveRequestList = [];
  155. fileList1.value = [];
  156. }
  157. function closed() {
  158. emits('onModalClose');
  159. }
  160. const isMap = ref(false);
  161. function clickMap(v) {
  162. isMap.value = true;
  163. }
  164. function handleExceed(uploadFile) {
  165. return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
  166. () => window.open(file.url),
  167. () => false
  168. );
  169. }
  170. function beforeRemove(file) {
  171. return true;
  172. }
  173.  
  174. /** 查询摄像头基础信息列表 */
  175. function getList() {
  176. let param = {
  177. pageNum: 1,
  178. pageSize: 9999,
  179. };
  180. pagecameraResource(param).then(response => {
  181. cameraList.value = response.data;
  182. console.log('cameraList.value', cameraList.value);
  183. });
  184. }
  185.  
  186. onMounted(() => {
  187. FormList.value = typeList;
  188. bus.on('mapPointClickSix', ({ lat, lng, address = '武汉市xx' }) => {
  189. FormList.value.lonLat = lng + ',' + lat;
  190. isMap.value = false;
  191. });
  192. getList();
  193. });
  194. </script>
  195. <style lang="scss" scoped>
  196. .water-analysis-page {
  197. padding: 10px;
  198. }
  199. </style>