diff --git a/package.json b/package.json
index 71d8a71..6f5b156 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-  
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "dev": "vue-cli-service serve"
diff --git a/src/api/systemManagement/index.js b/src/api/systemManagement/index.js
new file mode 100644
index 0000000..bf83e3c
--- /dev/null
+++ b/src/api/systemManagement/index.js
@@ -0,0 +1,10 @@
+// 系统管理模块接口
+import request from '@/utils/request'
+// 企业名单查询
+export function getCompanyList(params) {
+    return request({
+        url: '/safety/system/enterpriseList',
+        method: 'get',
+        params
+    })
+}
\ No newline at end of file
diff --git a/src/views/systemManagement/companyList/components/clearDialog.vue b/src/views/systemManagement/companyList/components/clearDialog.vue
new file mode 100644
index 0000000..686c23b
--- /dev/null
+++ b/src/views/systemManagement/companyList/components/clearDialog.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-dialog
+    class="dialog"
+    title="提示"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    <div class="text">删除后将同时清空企业的全部信息，确认继续吗？</div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="saveFormData">确 定</el-button>
+      <el-button>取 消</el-button>
+    </div></el-dialog
+  >
+</template>
+<script>
+export default {
+  name: "ClearDialog",
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 300px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    p {
+      font-size: 16px;
+      color: #fff;
+    }
+    .text {
+      width: 100%;
+      height: 180px;
+      font-size: 20px;
+      font-weight: 400;
+      text-align: center;
+      line-height: 180px;
+      color: #fff;
+    }
+  }
+  .el-button {
+    width: 70px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/companyList/components/companyDataDialog.vue b/src/views/systemManagement/companyList/components/companyDataDialog.vue
new file mode 100644
index 0000000..a7fb45e
--- /dev/null
+++ b/src/views/systemManagement/companyList/components/companyDataDialog.vue
@@ -0,0 +1,480 @@
+<!-- 新增企业或者查看企业名单 -->
+<template>
+  <el-dialog
+    class="dialog"
+    :title="dialogTitle"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="970px"
+  >
+    <div class="form_body">
+      <div class="commerceMessage">
+        <p>企业工商信息</p>
+        <!-- 为适应上传图片表单布局把企业工商表单拆分 -->
+        <div class="commerceMessage_one">
+          <el-form
+            ref="commerceMessage_form"
+            :model="commerceMessage_form"
+            class="commerceMessage_form"
+          >
+            <el-form-item label="企业名称">
+              <el-input v-model="commerceMessage_form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="统一社会信用代码">
+              <el-input v-model="commerceMessage_form.credit"></el-input>
+            </el-form-item>
+            <el-form-item label="企业性质">
+              <el-input v-model="commerceMessage_form.property"></el-input>
+            </el-form-item>
+            <el-form-item label="营业期限">
+              <el-input v-model="commerceMessage_form.time_limit"></el-input>
+            </el-form-item>
+            <el-form-item label="发照日期">
+              <el-input v-model="commerceMessage_form.publish_time"></el-input>
+            </el-form-item>
+            <el-form-item label="成立日期">
+              <el-input
+                v-model="commerceMessage_form.establish_time"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="注册资本">
+              <el-input
+                v-model="commerceMessage_form.register_capital"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="登记机关">
+              <el-input
+                v-model="commerceMessage_form.registration_authority"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="企业经营状态">
+              <el-input
+                v-model="commerceMessage_form.operating_status"
+              ></el-input>
+            </el-form-item>
+          </el-form>
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </div>
+        <!-- 为适应上传图片表单布局把企业工商表单拆分,剩余部分 -->
+        <el-form
+          ref="commerceMessage_form_two"
+          :model="commerceMessage_form_two"
+          class="commerceMessage_form_two"
+        >
+          <el-form-item label="企业登记注册地">
+            <el-input
+              v-model="commerceMessage_form_two.register_poisition"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="企业类型">
+            <el-checkbox-group v-model="commerceMessage_form_two.company_type">
+              <el-checkbox label="剧毒" name="company_type"></el-checkbox>
+              <el-checkbox label="易剧毒" name="company_type"></el-checkbox>
+              <el-checkbox label="易致爆" name="company_type"></el-checkbox>
+              <el-checkbox label="放射源" name="company_type"></el-checkbox>
+              <el-checkbox label="消防重点" name="company_type"></el-checkbox>
+              <el-checkbox label="所管消防" name="company_type"></el-checkbox>
+              <el-checkbox label="治安重点" name="company_type"></el-checkbox>
+              <el-checkbox label="创安单位" name="company_type"></el-checkbox>
+              <el-checkbox label="外资合资" name="company_type"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="企业主营范围">
+            <el-input
+              type="textarea"
+              v-model="commerceMessage_form_two.business_scope"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 企业联系人信息表单 -->
+      <div class="company_person_message">
+        <p>企业联系人信息</p>
+        <el-form
+          ref="company_person_message_form"
+          :model="company_person_message_form"
+          class="company_person_message_form"
+        >
+          <el-form-item label="安全责任人">
+            <el-input v-model="company_person_message_form.person"></el-input>
+          </el-form-item>
+          <el-form-item label="责任人电话">
+            <el-input v-model="company_person_message_form.phone"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 企业位置信息表单 -->
+      <div class="company_position">
+        <p>企业位置信息</p>
+        <el-form
+          ref="company_position_form"
+          :model="company_position_form"
+          class="company_position_form"
+        >
+          <el-form-item label="省份名称">
+            <el-select
+              v-model="company_position_form.province"
+              placeholder="请选择省份名称"
+            >
+              <el-option
+                v-for="item in company_position_form.province_name"
+                :key="item.province_code"
+                :label="item.province_name"
+                :value="item.province_code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="城市名称">
+            <el-select
+              v-model="company_position_form.city"
+              placeholder="请选择城市名称"
+            >
+              <el-option
+                v-for="item in company_position_form.city_name"
+                :key="item.city_code"
+                :label="item.city_name"
+                :value="item.city_code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="区县名称">
+            <el-select
+              v-model="company_position_form.county"
+              placeholder="请选择区县名称"
+            >
+              <el-option
+                v-for="item in company_position_form.county_name"
+                :key="item.county_code"
+                :label="item.county_name"
+                :value="item.county_code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="街道/乡镇名称">
+            <el-select
+              v-model="company_position_form.township"
+              placeholder="请选择街道/乡镇名称"
+            >
+              <el-option
+                v-for="item in company_position_form.township_name"
+                :key="item.township_code"
+                :label="item.township_name"
+                :value="item.township_code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="社区/村名称">
+            <el-select
+              v-model="company_position_form.community"
+              placeholder="请选择社区/村名称"
+            >
+              <el-option
+                v-for="item in company_position_form.community_name"
+                :key="item.community_code"
+                :label="item.community_name"
+                :value="item.community_code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="经度">
+            <el-input v-model="company_position_form.longitude"></el-input>
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input v-model="company_position_form.latitude"></el-input>
+          </el-form-item>
+          <el-form-item label="企业地址">
+            <el-input v-model="company_position_form.position"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 管辖区信息表单 -->
+      <div class="jurisdiction">
+        <el-form
+          ref="jurisdiction_form"
+          :model="jurisdiction_form"
+          class="jurisdiction_form"
+        >
+          <el-form-item label="辖区派出所编码">
+            <el-input v-model="jurisdiction_form.jurisdiction_code"></el-input>
+          </el-form-item>
+          <el-form-item label="辖区派出所名称">
+            <el-select
+              v-model="jurisdiction_form.jurisdiction"
+              placeholder="请选择辖区派出所名称"
+            >
+              <el-option
+                v-for="item in jurisdiction_form.jurisdiction_name"
+                :key="item.jurisdiction_code"
+                :label="item.jurisdiction_name"
+                :value="item.jurisdiction_code"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属片区">
+            <el-input v-model="jurisdiction_form.region"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="saveFormData">确 定</el-button>
+      <el-button>取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
+export default {
+  name: "CompanyDataDialog",
+  data() {
+    return {
+      dialogTitle: "新增",
+      visible: false,
+      // 企业工商信息上半部分
+      commerceMessage_form: {
+        name: "",
+        credit: "",
+        property: "",
+        time_limit: "",
+        publish_time: "",
+        establish_time: "",
+        register_capital: "",
+        registration_authority: "",
+        operating_status: "",
+      },
+      // 企业工商信息下半部分
+      commerceMessage_form_two: {
+        register_poisition: "",
+        company_type: [],
+        business_scope: "",
+      },
+      // 企业联系人信息表单
+      company_person_message_form: {
+        person: "",
+        phone: "",
+      },
+      // 企业位置信息表单
+      company_position_form: {
+        province: [],
+        city: [],
+        township: [],
+        community: [],
+        longitude: "",
+        latitude: "",
+        position: "",
+      },
+      jurisdiction_form: {
+        jurisdiction: [],
+        jurisdiction_code: "",
+        region: "",
+      },
+    };
+  },
+  methods: {
+    open(num) {
+      this.visible = true;
+      if(num === 1) {
+        this.dialogTitle = '新建'
+      } else if (num === 2) {
+        this.dialogTitle = '查看档案'
+      } else if (num === 3) {
+        this.dialogTitle = '编辑'
+      }
+    },
+    saveFormData: debounce(function () {
+      this.$message.success("232324234");
+    }, 300),
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 720px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    p {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+  .el-button {
+    width: 70px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+  .form_body {
+    height: 600px;
+    overflow-y: scroll;
+  }
+  .form_body::-webkit-scrollbar {
+    width: 10px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .form_body::-webkit-scrollbar-thumb {
+    width: 9px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .el-form {
+    /* 表单内容浮动布局，多行多列表单 */
+    width: 900px !important;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .el-form-item {
+      /* 表单域名跟input浮动布局 */
+      display: flex;
+      width: 50%;
+      .el-form-item__label {
+        width: 50%;
+        text-align: center;
+        color: #fff;
+      }
+      .el-form-item__content {
+        .el-input__inner {
+          width: 170px;
+          border-radius: 0px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
+        }
+      }
+    }
+  }
+  /* 为适应上传图片表单布局把企业工商表单拆分 */
+  .commerceMessage_one {
+    display: flex;
+    .avatar-uploader {
+      margin-left: 8%;
+    }
+    .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+      border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
+    .el-form.commerceMessage_form {
+      /* 表单内容浮动布局，多行多列表单 */
+      width: 600px !important;
+    }
+  }
+  /* 为适应上传图片表单布局把企业工商表单拆分,剩余样式 */
+  .el-form.commerceMessage_form_two {
+    .el-form-item {
+      width: 100%;
+      .el-form-item__label {
+        width: 15%;
+      }
+      .el-form-item__content {
+        .el-input__inner {
+          width: 650px;
+        }
+      }
+      .el-checkbox-group {
+        .el-checkbox {
+          .el-checkbox__label {
+            color: #fff;
+          }
+        }
+        .el-checkbox.is-checked {
+          background: #edf6f2;
+        }
+      }
+      .el-textarea {
+        .el-textarea__inner {
+          max-height: 80px;
+          width: 650px;
+          border-radius: 0px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+        .el-textarea__inner:focus,
+        .el-textarea__inner:hover {
+          border-color: #1b3736;
+        }
+      }
+    }
+  }
+  .el-form.company_position_form {
+    .el-form-item {
+      width: 30%;
+    }
+  }
+  .el-form.jurisdiction_form {
+    .el-form-item {
+      width: 30%;
+      .el-form-item__label {
+        width: 70%;
+      }
+      .el-form-item__content {
+        .el-input__inner {
+          width: 150px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/companyList/index.vue b/src/views/systemManagement/companyList/index.vue
index f0e721e..a69699a 100644
--- a/src/views/systemManagement/companyList/index.vue
+++ b/src/views/systemManagement/companyList/index.vue
@@ -23,22 +23,113 @@
               </div>
             </div>
             <div class="top_add_btn">
-              <el-button>新增企业</el-button>
+              <el-button @click="openDialog(1)">新增企业</el-button>
             </div>
           </div>
+          <!-- 企业图片展示区域 -->
+          <div class="center">
+            <ul>
+              <li v-for="item in company_data" :key="item.id">
+                <img :src="item.picUrl" alt="" />
+                <span class="company_name"> {{ item.companyName }} </span>
+                <div class="company_label">
+                  <div
+                    class="company_label_data"
+                    v-for="(val,index) in item.companyTypes"
+                    :key="index"
+                  >
+                    {{ val }}
+                  </div>
+                </div>
+                <span class="company_unit"> {{ item.companyAddress }}</span>
+                <!-- 遮罩层 -->
+                <div class="image_mask">
+                  <div class="btn">
+                    <button class="check" @click="openDialog(2)">
+                      查看档案
+                    </button>
+                    <button class="change" @click="openDialog(3)">编辑</button>
+                    <button class="clear" @click="openDialog(4)">删除</button>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!-- 分页区域 -->
+          <div class="footer">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :page-sizes="[6]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+            >
+            </el-pagination>
+          </div>
         </div>
       </el-card>
     </div>
+    <CompanyDataDialog ref="companyDataDialog"></CompanyDataDialog>
+    <ClearDialog ref="clearDialog"></ClearDialog>
   </div>
 </template>
 <script>
+import CompanyDataDialog from "./components/companyDataDialog";
+import ClearDialog from "./components/clearDialog";
+import { getCompanyList } from "@/api/systemManagement";
 export default {
   name: "companyList",
+  components: {
+    CompanyDataDialog,
+    ClearDialog,
+  },
   data() {
     return {
       searchCompany: "",
+      company_data: [
+        // {
+        //   value: "1",
+        //   name: "宁波镇海兴达化工有限公司",
+        //   unit: "宁波镇海兴达化工有限公司工业园",
+        // },
+        // { value: "2" },
+        // { value: "3" },
+        // { value: "4" },
+        // { value: "5" },
+        // { value: "6" },
+      ],
+      pageSize: 6,
+      pageNum: 1,
+      total: "",
     };
   },
+  created() {
+    // 获取数据
+    this.getData();
+  },
+  methods: {
+    openDialog(num) {
+      if (num === 4) {
+        // 打开删除弹窗
+        this.$refs.clearDialog.open();
+      } else {
+        console.log(num);
+        this.$refs.companyDataDialog.open(num);
+      }
+    },
+    // 请求数据
+    getData() {
+      const params = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+      };
+      getCompanyList(params).then((res) => {
+        console.log("res.data", res.data);
+        this.company_data = res.data;
+      });
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -128,6 +219,140 @@ export default {
         }
       }
     }
+    /* 公司图片展示区域 */
+    .center {
+      width: 100%;
+      height: 640px;
+      margin-top: 22px;
+      ul {
+        display: flex;
+        justify-content: space-around;
+        height: 100%;
+        flex-wrap: wrap;
+        padding-left: 0px;
+        li {
+          position: relative;
+          list-style: none;
+          width: 30%;
+          height: 45%;
+          background: #1b3736;
+          border: 1px solid #fff;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+          /* 公司图片相关信息区域 */
+          .company_name {
+            position: absolute;
+            z-index: 2;
+            color: #fff;
+            left: 10px;
+            bottom: 70px;
+          }
+          .company_label {
+            display: flex;
+            position: absolute;
+            z-index: 2;
+            left: 10px;
+            bottom: 35px;
+            .company_label_data {
+              text-align: center;
+              line-height: 30px;
+              padding: 0px 5px 0px 5px;
+              height: 30px;
+              color: #34e1b3;
+              background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              margin-right: 5px;
+            }
+          }
+          .company_unit {
+            position: absolute;
+            z-index: 2;
+            color: #fff;
+            left: 10px;
+            bottom: 10px;
+          }
+          /* 图片鼠标经过 */
+          .image_mask {
+            z-index: 3;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            bottom: 0;
+            background: rgba(101, 101, 101, 0.6);
+            color: #ffffff;
+            opacity: 0;
+            /* 图片鼠标经过按钮 */
+            .btn {
+              margin-left: 25%;
+              margin-top: 28%;
+              button {
+                height: 35px;
+                margin-right: 15px;
+                font-size: 20px;
+                color: #fff;
+                border: 1px;
+                border-radius: 0px;
+                cursor: pointer;
+              }
+              button.check {
+                background: #126a58;
+              }
+              /* 点击高亮 */
+              button.check:focus {
+                background: #29b397;
+              }
+              button.change {
+                background: rgb(7, 72, 92);
+              }
+              /* 点击高亮 */
+              button.change:focus {
+                background: rgb(19, 125, 158);
+              }
+              button.clear {
+                background: rgb(107, 14, 14);
+              }
+              /* 点击高亮 */
+              button.clear:focus {
+                background: rgb(151, 28, 28);
+              }
+            }
+          }
+        }
+        li:hover .image_mask {
+          opacity: 1;
+          cursor: default;
+        }
+      }
+    }
+    /* 底部分页展示区域 */
+    .footer {
+      .el-pagination {
+        margin-left: 75%;
+        /deep/.el-input__inner {
+          border-radius: 0px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+        /deep/.btn-prev {
+          border-radius: 0px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+        /deep/ul {
+          li {
+            background: #3c4b4a;
+            color: #fff;
+          }
+        }
+        /deep/.btn-next {
+          border-radius: 0px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+      }
+    }
   }
 }
 </style>
\ No newline at end of file