src/views/systemManagement/companyList/components/companyDataDialog.vue

@@ -46,13 +46,20 @@
             </el-form-item>
           </el-form>
           <el-upload
+            ref="upload"
             class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
+            accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
+            :action="upUrl"
+            :headers="upheaders"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload"
           >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <img
+              v-if="imageUrl"
+              :src="imageUrl"
+              class="avatar"
+              @error="setDefaultImage"
+            />
             <div v-else class="avatar-uploader-icon">
               <div>点击上传企业封面图片</div>
             </div>
@@ -183,15 +190,15 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="企业地址">
+            <el-input v-model="form.companyAddress"></el-input>
+          </el-form-item>
           <el-form-item label="经度">
             <el-input v-model="form.longitude"></el-input>
           </el-form-item>
           <el-form-item label="纬度">
             <el-input v-model="form.latitude"></el-input>
           </el-form-item>
-          <el-form-item label="企业地址">
-            <el-input v-model="form.companyAddress"></el-input>
-          </el-form-item>
         </el-form>
       </div>
       <!-- 管辖区信息表单 -->
@@ -238,6 +245,7 @@ import {
   postCompanyList,
   putCompanyList,
 } from "@/api/systemManagement";
+import defaultImage from "@/assets/companyFile/defaultimage.png";
 export default {
   name: "CompanyDataDialog",
   data() {
@@ -283,6 +291,10 @@ export default {
         belongingArea: "",
       },
       imageUrl: "",
+      upUrl:`http://172.18.113.50:8080/zhapi/safety/system/enterpriseList`, // 图片上传地址
+      upheaders: {
+        Authorization: localStorage.getItem('AuthorizationToken')
+      }
     };
   },
   created() {
@@ -300,6 +312,7 @@ export default {
       } else if (num === 3) {
         this.dialogTitle = "编辑";
         console.log("item", item);
+        this.imageUrl = item.picUrl;
         this.form = Object.assign(this.form, item);
       }
     },
@@ -397,9 +410,19 @@ export default {
       }
       this.$emit("back");
     },
+    handleAvatarSuccess(res, file) {
+      console.log('resimg',res);
+      console.log('fileimg',file);
+        // this.imageUrl = URL.createObjectURL(file.raw);
+        this.$message.success('上传成功')
+      },
     closeForm() {
       this.visible = false;
-    }
+    },
+    setDefaultImage(e) {
+      // 加载失败默认图片
+      e.target.src = defaultImage;
+    },
   },
 };
 </script>
@@ -463,7 +486,7 @@ export default {
     /* 表单内容浮动布局，多行多列表单 */
     width: 900px !important;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     flex-wrap: wrap;
     .el-form-item {
       /* 表单域名跟input浮动布局 */
@@ -502,6 +525,10 @@ export default {
     display: flex;
     .avatar-uploader {
       margin-left: 8%;
+      img {
+        width: 220px;
+        height: 220px;
+      }
     }
     .avatar-uploader .el-upload {
       border: 1px dashed #d9d9d9;
@@ -534,7 +561,7 @@ export default {
       display: block;
     }
     .el-form.commerceMessage_form {
-      /* 表单内容浮动布局，多行多列表单 */
+      /* 表单内容flex布局，多行多列表单 */
       width: 600px !important;
     }
   }
@@ -586,18 +613,25 @@ export default {
   }
   .el-form.company_position_form {
     .el-form-item {
-      width: 30%;
+      width: 31%;
+      margin-left: 15px;
+      .el-form-item__content {
+        .el-input__inner {
+          width: 170px;
+        }
+      }
     }
   }
   .el-form.jurisdiction_form {
+    margin-left: 15px;
     .el-form-item {
-      width: 30%;
+      width: 33%;
       .el-form-item__label {
-        width: 70%;
+        width: 50%;
       }
       .el-form-item__content {
         .el-input__inner {
-          width: 150px;
+          width: 170px;
         }
       }
     }

src/views/systemManagement/companyList/index.vue

@@ -13,7 +13,6 @@
           <!-- 顶部搜索区域 -->
           <div class="top">
             <div class="top_search">
-              <span>关键词:</span>
               <el-input
                 class="top_search_input"
                 placeholder="输入企业名称搜索"
@@ -32,24 +31,30 @@
           <div class="center">
             <ul>
               <li v-for="item in company_data" :key="item.id">
-                <img :src="item.picUrl" alt="" />
+                <img :src="item.picUrl" alt="" @error="setDefaultImage" />
                 <span class="company_name"> {{ item.companyName }} </span>
                 <div class="company_label">
                   <div
-                    class="company_label_data"
+                    :class="{
+                      shewei: val == '剧毒' || val == '易制毒',
+                      zhongdian: val == '消防重点' || val == '所管消防',
+                      zhibao: val == '放射源' || val == '易制爆',
+                      zhian: val == '治安重点' || val == '创安单位',
+                    }"
                     v-for="(val, index) in item.companyTypes"
                     :key="index"
                   >
                     {{ val }}
                   </div>
                 </div>
-                <span class="company_unit"> {{ item.companyAddress }}</span>
+                <span class="company_unit"
+                  ><i class="el-icon-location"></i>
+                  {{ item.companyAddress }}</span
+                >
                 <!-- 遮罩层 -->
                 <div class="image_mask">
                   <div class="btn">
-                    <button class="check" @click="jump()">
+                    <button class="check" @click="jump()">查看档案</button>
-                      查看档案
-                    </button>
                     <button class="change" @click="openDialog(3, item)">
                       编辑
                     </button>
@@ -86,6 +91,7 @@ import CompanyDataDialog from "./components/companyDataDialog";
 import ClearDialog from "./components/clearDialog";
 import { getCompanyList } from "@/api/systemManagement";
 import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
+import defaultImage from "@/assets/companyFile/defaultimage.png";
 export default {
   name: "companyList",
   components: {
@@ -160,8 +166,12 @@ export default {
       this.getData();
     },
     jump() {
-      this.$router.push('/home/archives') 
+      this.$router.push("/home/archives");
-    }
+    },
+    setDefaultImage(e) {
+      // 加载失败默认图片
+      e.target.src = defaultImage;
+    },
   },
 };
 </script>
@@ -197,18 +207,13 @@ export default {
       display: flex;
       justify-content: space-between;
       .top_search {
+        margin-left: 2vw;
         display: flex;
         width: 40%;
         height: 40px;
-        span {
-          width: 15%;
-          line-height: 40px;
-          text-align: center;
-          color: #fff;
-        }
         .top_search_input ::v-deep {
           /* 查询框 */
-          width: 75%;
+          width: 60%;
           .el-input__inner {
             border-radius: 4px 0px 0px 4px;
             background: #3c4b4a;
@@ -268,22 +273,18 @@ export default {
         flex-wrap: wrap;
         padding-left: 0px;
         li {
-          display: flex;
-          justify-content: center;
-          align-items: center;
           margin-left: 2.5%;
           position: relative;
           list-style: none;
-          width: 30%;
+          width: 25.6vw;
-          height: 47%;
+          height: 31vh;
           background: #1b3736;
           border: 1px solid #fff;
-          box-sizing: border-box;
           img {
-            margin-left: 0.5%;
+            margin-left: 0.3vw;
-            margin-top: 0.6%;
+            margin-top: 0.5vh;
-            width: 99%;
+            width: 25vw;
-            height: 98%;
+            height: 30vh;
           }
           /* 公司图片相关信息区域 */
           .company_name {
@@ -301,15 +302,63 @@ export default {
             z-index: 2;
             left: 10px;
             bottom: 35px;
-            .company_label_data {
+            .shewei {
-              text-align: center;
+              height: 26px;
-              line-height: 30px;
+              line-height: 26px;
-              padding: 0px 5px 0px 5px;
+              width: auto;
-              height: 30px;
+              background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
-              color: #34e1b3;
+              padding: 0 5px;
-              background: url("~@/assets/companyFile/btn04.png") no-repeat !important;
+              font-size: 14px;
-              background-size: 100% 100% !important;
+              color: #b5ebff;
-              margin-right: 5px;
+              letter-spacing: 0.44px;
+              font-weight: 400;
+              background-size: 100% 100%;
+              margin-right: 10px;
+            }
+
+            .zhongdian {
+              height: 26px;
+              line-height: 26px;
+              width: auto;
+              background: url("~@/assets/companyFile/编组 11222221.png")
+                no-repeat;
+              padding: 0 5px;
+              font-size: 14px;
+              color: #e3deff;
+              letter-spacing: 0.44px;
+              font-weight: 400;
+              background-size: 100% 100%;
+              margin-right: 10px;
+            }
+
+            .zhibao {
+              height: 26px;
+              line-height: 26px;
+              width: auto;
+              background: url("~@/assets/companyFile/编组 11991备份 10.png")
+                no-repeat;
+              padding: 0 5px;
+              font-size: 14px;
+              color: #e3deff;
+              letter-spacing: 0.44px;
+              font-weight: 400;
+              background-size: 100% 100%;
+              margin-right: 10px;
+            }
+
+            .zhian {
+              height: 26px;
+              line-height: 26px;
+              width: auto;
+              background: url("~@/assets/companyFile/编组 11991备份 21.png")
+                no-repeat;
+              padding: 0 5px;
+              font-size: 14px;
+              color: #e3deff;
+              letter-spacing: 0.44px;
+              font-weight: 400;
+              background-size: 100% 100%;
+              margin-right: 10px;
             }
           }
           .company_unit {
@@ -377,7 +426,16 @@ export default {
           opacity: 1;
           cursor: default;
         }
-        li:hover .company_label_data {
+        li:hover .shewei {
+          opacity: 0;
+        }
+        li:hover .zhongdian {
+          opacity: 0;
+        }
+        li:hover .zhibao {
+          opacity: 0;
+        }
+        li:hover .zhian {
           opacity: 0;
         }
         li:hover span {

src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue

@@ -18,7 +18,7 @@
           :disabled="disabled"
         >
           <el-form-item label="企业名称" prop="companyName">
-            <el-select v-model="form.companyName" placeholder="请选择企业">
+            <el-select ref="companySelect" v-model="form.companyName" placeholder="请选择企业">
               <el-option
                 v-for="item in form.company"
                 :key="item.id"
@@ -34,9 +34,9 @@
           <el-form-item label="设备IP" prop="deviceIp">
             <el-input v-model="form.deviceIp"></el-input>
           </el-form-item>
-          <el-form-item label="设备大类" prop="deviceParentType">
+          <el-form-item label="设备大类" prop="deviceVideoParentType">
             <el-select
-              v-model="form.deviceParentType"
+              v-model="form.deviceVideoParentType"
               placeholder="请选择设备大类"
             >
               <el-option
@@ -102,11 +102,11 @@
           :rules="rules"
           :disabled="disabled"
         >
-          <el-form-item label="设备经度">
+          <el-form-item label="设备经度" prop="longitude">
-            <el-input v-model="form.longitude" prop="longitude"></el-input>
+            <el-input v-model="form.longitude" ></el-input>
           </el-form-item>
-          <el-form-item label="设备纬度">
+          <el-form-item label="设备纬度" prop="latitude">
-            <el-input v-model="form.latitude" prop="latitude"></el-input>
+            <el-input v-model="form.latitude"></el-input>
           </el-form-item>
           <el-form-item label="U3D经度">
             <el-input v-model="form.u3dLongitude"></el-input>
@@ -162,7 +162,12 @@
       </div>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="saveFormData('equipmentForm','videoForm','addressForm','otherForm')">保 存</el-button>
+      <el-button
+        @click="
+          saveFormData('equipmentForm', 'videoForm', 'addressForm', 'otherForm')
+        "
+        >保 存</el-button
+      >
       <el-button>取 消</el-button>
     </div>
   </el-dialog>
@@ -230,7 +235,7 @@ export default {
         deviceIp: [
           { required: true, message: "请填写设备ip", trigger: "blur" },
         ],
-        deviceParentType: [
+        deviceVideoParentType: [
           { required: true, message: "请选择设备大类", trigger: "change" },
         ],
         deviceVideoSubType: [
@@ -288,50 +293,48 @@ export default {
       } else if (num === "5") {
         this.dialogTitle = "详情";
         this.form = row;
-        this.disabled = true
+        this.disabled = true;
       }
     },
-    saveFormData: debounce(function (formName1,formName2,formName3) {
+    saveFormData: debounce(function (formName1, formName2, formName3) {
       this.$refs[formName1].validate((valid1) => {
-        console.log('valid1',valid1);
         if (valid1) {
-          this.$message.warning("请填入必填项");
-        } else {
-          return false;
-        }
-      }); // 设备基础必填验证
           this.$refs[formName2].validate((valid2) => {
-        console.log('valid2',valid2);
             if (valid2) {
-          this.$message.warning("请填入必填项");
-        } else {
-          return false;
-        }
-      }); // 视频通道信息必填验证
               this.$refs[formName3].validate((valid3) => {
-        console.log('valid3',valid3);
                 if (valid3) {
-          this.$message.warning("请填入必填项");
-        } else {
-          return false;
-        }
-      }); // 视频通道信息必填验证
                   delete this.form.company;
                   delete this.form.video_type;
                   delete this.form.perception_type;
                   delete this.form.orientation_types;
+                  this.form.companyId = this.$refs.companySelect.selected.value // 企业对应id
                   const params = this.form;
                   console.log("this.form", this.form);
                   if (this.dialogTitle === "新建") {
-        addVideoList(params).then((res) => {
+                    addVideoList(params)
-          console.log("res78", res);
+                      .then((res) => {
-          if (res.code === 200) {
                           this.visible = false;
+                          this.$message({
+                            message: res.msg,
+                            type: "success",
+                          });
+                      })
+                      .catch((err) => {
+                        console.log(err); //代码错误、请求失败捕获
+                      });
+                  }
                 } else {
-            this.$message.warning("新建失败");
+                  this.$message.warning("请填入必填项");
                 }
-        });
+              }); // 视频通道信息必填验证
+            } else {
+              this.$message.warning("请填入必填项");
+            }
+          }); // 视频通道信息必填验证
+        } else {
+          this.$message.warning("请填入必填项");
         }
+      }); // 设备基础必填验证
     }, 300),
   },
 };