xuhaoyun 1 year ago
commit 39665e9256

@ -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"

@ -0,0 +1,10 @@
// 系统管理模块接口
import request from '@/utils/request'
// 企业名单查询
export function getCompanyList(params) {
return request({
url: '/safety/system/enterpriseList',
method: 'get',
params
})
}

@ -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>

@ -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>

@ -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>
Loading…
Cancel
Save