- <template>
- <div class="water-analysis-page">
- <div class="top">
- <el-form label-width="auto" :rules="stationInfoRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
- <el-form-item
- :label="i.label"
- :style="{ width: i.prop == 'fileList1' ? '93%' : '45%' }"
- :prop="i.prop"
- v-for="i in stationInfoForm"
- :key="i.prop"
- :disabled="typeList.type == 1 || typeList.type == 2"
- >
- <el-input v-model="FormList.lonLat" id="lonLat" v-if="i.prop == 'lonLat'" @click="clickMap(2)" :placeholder="i.placeholder">
- </el-input>
- <el-select
- style="width: 100%"
- clearable
- v-model="FormList.plcStationType"
- class="m-2"
- v-else-if="i.prop == 'plcStationType'"
- :placeholder="i.placeholder"
- id="plcStationType"
- >
- <el-option v-for="dict in plc_station_type" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- <el-radio-group v-model="FormList.status" class="ml-4" v-else-if="i.prop == 'status'" id="status">
- <el-radio style="margin-top: -5px" label="1" size="large">启用</el-radio>
- <el-radio style="margin-top: -5px" label="0" size="large">停用</el-radio>
- </el-radio-group>
- <el-input
- v-else
- v-model="FormList[i.prop]"
- :placeholder="i.placeholder"
- :disabled="i.prop == 'stationCode' && typeList.type == 2"
- :type="i.prop == 'remark' ? 'textarea' : ''"
- :id="FormList[i.prop]"
- >
- <template #append v-if="i.prop == 'budget'"> 万元 </template>
- </el-input>
- </el-form-item>
- <el-form-item label="创建时间:" v-if="typeList.type == 1">
- <el-date-picker
- v-model="FormList.createTime"
- type="date"
- placeholder="创建时间"
- value-format="YYYY-MM-DD HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- <el-form-item label="更新时间:" v-if="typeList.type == 1">
- <el-date-picker
- v-model="FormList.updateTime"
- type="date"
- placeholder="更新时间"
- style="width: 100%"
- value-format="YYYY-MM-DD HH:mm:ss"
- />
- </el-form-item>
- <el-form-item label="建筑面积(亩):" prop="buildArea" style="width: 45%">
- <el-input-number :min="0" v-model="FormList.buildArea" placeholder="请输入建筑面积" clearable style="width: 100%" />
- </el-form-item>
- <el-form-item label="建设年份:" prop="constructionYear" style="width: 45%">
- <el-input v-model="FormList.constructionYear" placeholder="请输入建设年份" clearable />
- </el-form-item>
- <el-form-item label="设计流量(立方/小时):" prop="designFlow" style="width: 45%">
- <el-input-number :min="0" v-model="FormList.designFlow" placeholder="请输入" clearable style="width: 100%" />
- </el-form-item>
- <el-form-item label="设备数量:" prop="deviceCount" style="width: 45%">
- <el-input-number :min="0" v-model="FormList.deviceCount" placeholder="请输入" clearable style="width: 100%" />
- </el-form-item>
- <el-form-item label="关联摄像头:" prop="cameraInfoIds" style="width: 100%">
- <el-select placeholder="请输入" v-model="FormList.cameraInfoIds" clearable filterable multiple style="width: 100%">
- <el-option v-for="item in cameraList" :key="item.id" :label="item.name" :value="item.id" />
- </el-select>
- </el-form-item>
- <el-form-item label="介绍:" style="width: 100%" prop="introduce">
- <el-input
- placeholder="请输入"
- v-model="FormList.introduce"
- :autosize="{ minRows: 3 }"
- type="textarea"
- clearable
- style="width: 100%"
- />
- </el-form-item>
-
- <el-form-item label="图片:" style="width: 100%">
- <ImageFileUpload :limit="3" :saveFileArr="FormList.fileSaveRequestList" :listType="'picture-card'" />
- </el-form-item>
- </el-form>
- </div>
- <el-dialog
- v-model="isMap"
- title="地图选取位置(可搜索可直接点击获取)"
- :modal-append-to-body="false"
- :close-on-click-modal="false"
- width="800px"
- >
- <MapPosition v-if="isMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="isMap = false">确 定</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
- <script setup>
- import { pagecameraResource } from '@/api/cameraResource/cameraResource';
- import { projectInfoAdd, projectInfoEdit } from '@/api/scada/stationInfo';
- import MapPosition from '@/components/Map/index.vue';
- import bus from '@/utils/mitt';
- import { stationInfoRules } from '@/utils/rules';
- import { stationInfoForm } from '@/utils/form';
- import { ElMessage, ElMessageBox } from 'element-plus';
- import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
-
- const { proxy } = getCurrentInstance();
- const { plc_station_type } = proxy.useDict('plc_station_type');
- const { typeList } = defineProps(['typeList']);
- const emits = defineEmits();
- defineExpose({ submit, closed, resetFiled });
- let FormList = ref({ projectNo: '', fileSaveRequestList: [], status: '1' });
- const fileList1 = ref([]);
- const cameraList = ref([]);
- function submit() {
- proxy.$refs.ruleForm.validate(valid => {
- if (valid) {
- if (typeList.type == 4) {
- projectInfoAdd(FormList.value).then(({ code }) => {
- if (code == 200) {
- proxy.$modal.msgSuccess('新增成功');
- emits('onModalClose');
- }
- });
- } else {
- projectInfoEdit(FormList.value).then(({ code }) => {
- if (code == 200) {
- proxy.$modal.msgSuccess('修改成功');
- emits('onModalClose');
- }
- });
- }
- }
- });
- }
-
- // 获取位置
- function getAddress(val) {
- FormList.value.lonLat = val.lonLat.join(',');
- }
- function resetFiled() {
- proxy.$refs.ruleForm.resetFields();
- FormList.value.fileSaveRequestList = [];
- fileList1.value = [];
- }
- function closed() {
- emits('onModalClose');
- }
- const isMap = ref(false);
- function clickMap(v) {
- isMap.value = true;
- }
- function handleExceed(uploadFile) {
- return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
- () => window.open(file.url),
- () => false
- );
- }
- function beforeRemove(file) {
- return true;
- }
-
- /** 查询摄像头基础信息列表 */
- function getList() {
- let param = {
- pageNum: 1,
- pageSize: 9999,
- };
- pagecameraResource(param).then(response => {
- cameraList.value = response.data;
- console.log('cameraList.value', cameraList.value);
- });
- }
-
- onMounted(() => {
- FormList.value = typeList;
- bus.on('mapPointClickSix', ({ lat, lng, address = '武汉市xx' }) => {
- FormList.value.lonLat = lng + ',' + lat;
- isMap.value = false;
- });
- getList();
- });
- </script>
- <style lang="scss" scoped>
- .water-analysis-page {
- padding: 10px;
- }
- </style>