编辑弹框样式修改 gengdidi

gassafety-web/src/components/PopWindow/regulatorBox.vue

@@ -4,35 +4,77 @@
     :visible.sync="dialogVisible"
     width="80%"
     :before-close="handleClose">
+    <el-row>
       <el-form ref="form" :model="form" :rules="rules" label-width="135px">
+        <el-row>
+          <el-col :span="22">
             <el-form-item label="所属管道" prop="pipeCode">
               <el-select v-model="form.pipeCode" placeholder="请选择所属管道">
                 <el-option
                   v-for="item in pipeList"
                   :key="item.pipeCode"
                   :label="item.pipeName"
-            :value="item.pipeCode">
+                  :value="item.pipeCode"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="11">
             <el-form-item label="设备名称" prop="deviceName">
               <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="11">
+            <el-form-item label="设备型号" prop="deviceModel">
+              <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-col :span="11">
           <el-form-item label="所在地址" prop="deviceAddr">
             <el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
           </el-form-item>
-      <el-form-item label="设备型号" prop="deviceModel">
-        <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
+        </el-col>
+
+        <el-col :span="11">
+          <el-form-item label="物联网编号" prop="iotNo">
+            <el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
           </el-form-item>
-      <el-form-item label="经度" prop="longitude">
-        <el-input v-model="form.longitude" placeholder="请输入经度" />
+        </el-col>
+
+        <el-col :span="22">
+          <el-form-item label="经纬度坐标" prop="">
+            <el-card class="box-card">
+              <div v-text="`[[${form.longitude},${form.latitude}]]`"></div>
+            </el-card>
           </el-form-item>
+        </el-col>
+
+        <!-- <el-col>
           <el-form-item label="纬度" prop="latitude">
             <el-input v-model="form.latitude" placeholder="请输入纬度" />
           </el-form-item>
-      <el-form-item label="物联网编号" prop="iotNo">
-        <el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
+        </el-col> -->
+
+        <el-col :span="11">
+          <el-form-item label="联系人" prop="linkman">
+            <el-input v-model="form.linkman" placeholder="请输入联系人" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="11">
+          <el-form-item label="联系电话" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入联系电话" />
           </el-form-item>
+        </el-col>
+
+        <el-col>
           <el-form-item label="设备图片上传" prop="iconUrl">
             <MyFileUpload
               listType="picture-card"
@@ -40,25 +82,35 @@
               @remove="listRemove"
               :fileArr="fileArr"
             />
+            <el-input v-show="false" disabled v-model="form.iconUrl"></el-input>
           </el-form-item>
-      <el-form-item label="联系人" prop="linkman">
-        <el-input v-model="form.linkman" placeholder="请输入联系人" />
-      </el-form-item>
-      <el-form-item label="电话" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入电话" />
-      </el-form-item>
+        </el-col>
+
+        <el-col>
           <el-form-item label="安装时间" prop="installationTime">
-        <el-date-picker clearable size="small"
+            <el-date-picker
+              clearable
+              size="small"
               v-model="form.installationTime"
-                        type="datetime"
+              type="date"
               value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择安装时间">
+              placeholder="选择安装时间"
+            >
             </el-date-picker>
           </el-form-item>
+        </el-col>
+
+        <el-col :span="22">
           <el-form-item label="备注" prop="remarks">
-        <el-input v-model="form.remarks" placeholder="请输入备注" />
+            <el-input
+              type="textarea"
+              v-model="form.remarks"
+              placeholder="请输入备注"
+            />
           </el-form-item>
+        </el-col>
       </el-form>
+    </el-row>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -84,14 +136,44 @@
         },
         dialogVisible : false,
         fileList: [],
-        // 表单校验
-        rules: {
-        },
         map : null,
         obj : null,
         gaoMap : null,
         fileArr: [],
-        pipeList: []
+        pipeList: [],
+        rules: {
+          pipeCode: [
+            { required: true, message: "请选择所属管道", trigger: "blur" },
+            // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+          ],
+          deviceName: [
+            { required: true, message: "请输入设备名称", trigger: "blur" },
+          ],
+          deviceModel: [
+            { required: true, message: "请输入设备型号", trigger: "blur" },
+          ],
+          deviceAddr: [
+            { required: true, message: "请输入所在地址", trigger: "blur" },
+          ],
+          iotNo: [
+            { required: true, message: "请输入物联网编号", trigger: "blur" },
+          ],
+          linkman: [
+            { required: true, message: "请输入联系人", trigger: "blur" },
+          ],
+          phone: [
+            { required: true, message: "请输入联系电话", trigger: "blur" },
+          ],
+          iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
+          installationTime: [
+            {
+              // type: "date",
+              required: true,
+              message: "请选择日期",
+              trigger: "change",
+            },
+          ],
+        },
       }
     },
     components: {
@@ -124,7 +206,6 @@
                   this.remove();
                   this.map.remove(this.obj);
                   this.form.deviceId = response.data;
-                  console.log(this.gaoMap,"addgaoMap")
                   this.gaoMap.addMarker(this.gaoMap.deviceType,this.form);
                   //this.gaoMap.placeSearch.clear();
                   this.gaoMap.closeAddMarker();

gassafety-web/src/components/PopWindow/valveWell.vue

@@ -4,35 +4,76 @@
     :visible.sync="dialogVisible"
     width="80%"
     :before-close="handleClose">
+    <el-row>
       <el-form ref="form" :model="form" :rules="rules" label-width="135px">
+        <el-row>
+          <el-col :span="22">
             <el-form-item label="所属管道" prop="pipeCode">
               <el-select v-model="form.pipeCode" placeholder="请选择所属管道">
                 <el-option
                   v-for="item in pipeList"
                   :key="item.pipeCode"
                   :label="item.pipeName"
-            :value="item.pipeCode">
+                  :value="item.pipeCode"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="11">
             <el-form-item label="设备名称" prop="deviceName">
               <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
             </el-form-item>
+          </el-col>
+
+          <el-col :span="11">
+            <el-form-item label="设备型号" prop="deviceModel">
+              <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-col :span="11">
           <el-form-item label="所在地址" prop="deviceAddr">
             <el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
           </el-form-item>
-      <el-form-item label="设备型号" prop="deviceModel">
-        <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
+        </el-col>
+
+        <el-col :span="11">
+          <el-form-item label="物联网编号" prop="iotNo">
+            <el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
           </el-form-item>
-      <el-form-item label="经度" prop="longitude">
-        <el-input v-model="form.longitude" placeholder="请输入经度" />
+        </el-col>
+
+        <el-col :span="22">
+          <el-form-item label="经纬度坐标" prop="">
+            <el-card class="box-card">
+              <div v-text="`[[${form.longitude},${form.latitude}]]`"></div>
+            </el-card>
           </el-form-item>
+        </el-col>
+
+        <!-- <el-col>
           <el-form-item label="纬度" prop="latitude">
             <el-input v-model="form.latitude" placeholder="请输入纬度" />
           </el-form-item>
-      <el-form-item label="物联网编号" prop="iotNo">
-        <el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
+        </el-col> -->
+
+        <el-col :span="11">
+          <el-form-item label="联系人" prop="linkman">
+            <el-input v-model="form.linkman" placeholder="请输入联系人" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="11">
+          <el-form-item label="联系电话" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入联系电话" />
           </el-form-item>
+        </el-col>
+
+        <el-col>
           <el-form-item label="设备图片上传" prop="iconUrl">
             <MyFileUpload
               listType="picture-card"
@@ -40,25 +81,35 @@
               @remove="listRemove"
               :fileArr="fileArr"
             />
+            <el-input v-show="false" disabled v-model="form.iconUrl"></el-input>
           </el-form-item>
-      <el-form-item label="联系人" prop="linkman">
-        <el-input v-model="form.linkman" placeholder="请输入联系人" />
-      </el-form-item>
-      <el-form-item label="电话" prop="phone">
-        <el-input v-model="form.phone" placeholder="请输入电话" />
-      </el-form-item>
+        </el-col>
+
+        <el-col>
           <el-form-item label="安装时间" prop="installationTime">
-        <el-date-picker clearable size="small"
+            <el-date-picker
+              clearable
+              size="small"
               v-model="form.installationTime"
-                        type="datetime"
+              type="date"
               value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择安装时间">
+              placeholder="选择安装时间"
+            >
             </el-date-picker>
           </el-form-item>
+        </el-col>
+
+        <el-col :span="22">
           <el-form-item label="备注" prop="remarks">
-        <el-input v-model="form.remarks" placeholder="请输入备注" />
+            <el-input
+              type="textarea"
+              v-model="form.remarks"
+              placeholder="请输入备注"
+            />
           </el-form-item>
+        </el-col>
       </el-form>
+    </el-row>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -84,14 +135,44 @@
         },
         dialogVisible : false,
         fileList: [],
-        // 表单校验
-        rules: {
-        },
         map : null,
         obj : null,
         gaoMap : null,
         fileArr: [],
-        pipeList: []
+        pipeList: [],
+        rules: {
+          pipeCode: [
+            { required: true, message: "请选择所属管道", trigger: "blur" },
+            // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+          ],
+          deviceName: [
+            { required: true, message: "请输入设备名称", trigger: "blur" },
+          ],
+          deviceModel: [
+            { required: true, message: "请输入设备型号", trigger: "blur" },
+          ],
+          deviceAddr: [
+            { required: true, message: "请输入所在地址", trigger: "blur" },
+          ],
+          iotNo: [
+            { required: true, message: "请输入物联网编号", trigger: "blur" },
+          ],
+          linkman: [
+            { required: true, message: "请输入联系人", trigger: "blur" },
+          ],
+          phone: [
+            { required: true, message: "请输入联系电话", trigger: "blur" },
+          ],
+          iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
+          installationTime: [
+            {
+              // type: "date",
+              required: true,
+              message: "请选择日期",
+              trigger: "change",
+            },
+          ],
+        },
       }
     },
     components: {