<template>
|
<div class="mod-config market-wrap">
|
<basic-container class="market-box">
|
<div class="market-box-inside">
|
<div class="company-top">
|
<div class="company-block">
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{ total.total }}</h1>
|
<h2>市场主体总数</h2>
|
</div>
|
</div>
|
<div class="company-bottom-block">
|
<div class="company-bottom-block-inside"><h1>个体: {{ total.geti }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>公民: {{ total.gongmin }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>经营者: {{ total.faren }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>其它: {{ total.qita }}</h1></div>
|
</div>
|
</div>
|
<div class="botton-second">
|
<div class="wel-bottom-block">
|
<div class="wel-bottom-title">
|
热点企业
|
</div>
|
<div class="daiban-main">
|
<div class="daiban-block" v-for="(item,index) in qiyeData" :key="index">
|
<img class="daibanIcon" src="../../../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<!-- <h1>{{ item.subjectName }}</h1>-->
|
<tooltip-over
|
:content="item.subjectName"
|
ref="tooitipredianqiyeBox"
|
class="tooltip-box">
|
</tooltip-over>
|
</div>
|
<div class="daiban-right">
|
<h1>违法总条数：{{ item.lawNum }}</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--<div class="wel-bottom-block">
|
<div class="wel-bottom-title">
|
违法排名
|
</div>
|
<div class="daiban-main">
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>企业名称</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>违法总条数：123</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>企业名称</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>违法总条数：123</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>企业名称</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>违法总条数：123</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daiban-block">
|
<img class="daibanIcon" src="../../../../src/assets/lawImg/daibanIcon.png" alt="">
|
<div class="daiban-content-box">
|
<div class="daiban-left">
|
<h1>企业名称</h1>
|
</div>
|
<div class="daiban-right">
|
<h1>违法总条数：123</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
<!--<div class="company-block">
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{ add.total }}</h1>
|
<h2>新增数量</h2>
|
</div>
|
</div>
|
<div class="company-bottom-block">
|
<div class="company-bottom-block-inside"><h1>公民:{{ add.gongmin }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>法人:{{ add.faren }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>其它:{{ add.qita }}</h1></div>
|
</div>
|
</div>
|
<div class="company-block">
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{ capital.total }}</h1>
|
<h2>注册资本</h2>
|
</div>
|
</div>
|
<div class="company-bottom-block">
|
<div class="company-bottom-block-inside"><h1>公民:{{ capital.gongmin }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>法人:{{ capital.faren }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>其它:{{ capital.qita }}</h1></div>
|
</div>
|
</div>
|
<div class="company-block">
|
<div class="wel-top-block">
|
<div class="wel-block-left">
|
<img src="../../../../src/assets/lawImg/welIndexIcon1.png" alt="">
|
</div>
|
<div class="wel-block-right">
|
<h1>{{ trade.total }}</h1>
|
<h2>涉及行业</h2>
|
</div>
|
</div>
|
<div class="company-bottom-block">
|
<div class="company-bottom-block-inside"><h1>占比最多:{{ trade.most }}</h1></div>
|
<div class="company-bottom-block-inside"><h1>占比最少:{{ trade.least }}</h1></div>
|
</div>
|
</div>-->
|
</div>
|
<div class="company-bottom">
|
<div class="botton-third">
|
<div class="law-search-box">
|
<el-row :gutter="20">
|
<el-col :span="7">
|
<el-input clearable v-model.trim="searchForm.name" @input="searchHadleBtn" suffix-icon="el-icon-search"
|
placeholder="市场主体名称"></el-input>
|
</el-col>
|
<el-col :span="7">
|
<el-select clearable @change="selectedIndustry" placeholder="请选择主体类型" style="width: 100%"
|
v-model="searchForm.subjectType">
|
<el-option
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
v-for="item in typeList">
|
</el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="7">
|
<el-date-picker
|
@change="searchHandlePicker"
|
placeholder="选择成立日期"
|
style="width: 100%"
|
type="date"
|
v-model="searchForm.establishTime">
|
</el-date-picker>
|
</el-col>
|
|
</el-row>
|
</div>
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form-item>
|
<el-button round @click="addOrUpdateHandle()" icon="el-icon-plus" type="primary"
|
v-if="permissions.market_company_add">新增
|
</el-button>
|
<!-- <el-button round icon="el-icon-bottom" type="primary">导入数据</el-button>-->
|
</el-form-item>
|
</el-form>
|
<div class="avue-crud">
|
<el-table
|
ref="table"
|
:height="tableHeight"
|
:data="dataList"
|
border
|
v-loading="dataListLoading">
|
<el-table-column
|
type="index"
|
width="40"
|
align="center"
|
header-align="center">
|
</el-table-column>
|
|
<el-table-column
|
label="市场主体名称"
|
prop="subjectName"
|
min-width="200"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
label="类型"
|
prop="subjectType"
|
min-width="100"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
label="证件号"
|
prop="idCard"
|
min-width="160"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<!-- <el-table-column
|
label="注册资金(万)"
|
prop="registeredCapital"
|
min-width="18%"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
label="法定代表人"
|
prop="legalPerson"
|
min-width="16%"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
label="成立时间"
|
prop="setupDate"
|
min-width="20%"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column> -->
|
<el-table-column
|
label="地址"
|
prop="address"
|
min-width="200"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
label="经营范围"
|
prop="businessScope"
|
min-width="100"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
align="left"
|
header-align="center"
|
label="联系电话"
|
prop="phone"
|
min-width="130"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
label="违法总数"
|
prop="lawNum"
|
min-width="90"
|
align="left"
|
header-align="center"
|
show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
fixed="right"
|
min-width="100"
|
align="right"
|
header-align="center">
|
<template slot-scope="scope">
|
<el-button @click="addOrUpdateHandle(scope.row.id)" type="text" size="small"><img
|
src="../../../assets/lawImg/edtiorNew.png" alt="" v-if="permissions.market_company_edit">
|
</el-button>
|
<el-button @click="deleteHandle(scope.row.id)" type="text" size="small"><img
|
src="../../../assets/lawImg/delateNew.png" alt="" v-if="permissions.market_company_del">
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="avue-crud__pagination">
|
<el-pagination
|
:current-page="pageIndex"
|
:page-size="pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="totalPage"
|
@current-change="currentChangeHandle"
|
@size-change="sizeChangeHandle"
|
background
|
layout="total, sizes, prev, pager, next, jumper">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 弹窗, 新增 / 修改 -->
|
<table-form @refreshDataList="getDataList" ref="addOrUpdate" v-if="addOrUpdateVisible"></table-form>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import {fetchList, delObj, getAllNums, getHotPoint} from '@/api/company'
|
import {remote} from "@/api/admin/dict"
|
import TableForm from './company-form'
|
import {mapGetters} from 'vuex'
|
import tooltipOver from "../../../components/tooltipOver/tooltipOver";
|
|
export default {
|
data() {
|
return {
|
tableHeight: 500,
|
dataForm: {
|
key: ''
|
},
|
searchForm: {
|
name: '',
|
subjectType: '',
|
establishTime: ''
|
},
|
industryList: [],//经营范围
|
typeList: [],
|
dataList: [],
|
pageIndex: 1,
|
pageSize: 10,
|
totalPage: 0,
|
dataListLoading: false,
|
addOrUpdateVisible: false,
|
total: {}, //市场主体总数
|
add: {}, //新增数量
|
capital: {}, //注册资本
|
trade: {}, //涉及行业
|
qiyeData: [], //热点企业
|
}
|
},
|
components: {
|
TableForm,
|
tooltipOver
|
},
|
created() {
|
this.getDataList()
|
this.getAllNums()
|
this.getHotPoint()
|
|
// remote('industry').then(res => {
|
// this.industryList = res.data.data
|
// })
|
remote('market_type').then(res => {
|
this.typeList = res.data.data
|
})
|
this.tableHeight = window.innerHeight - 300
|
},
|
computed: {
|
...mapGetters(['permissions'])
|
},
|
methods: {
|
getAllNums() { //市场主体顶部四个方块数据接口
|
getAllNums().then(res => {
|
if(res.data.data != null) {
|
this.total = res.data.data.total
|
this.add = res.data.data.add
|
this.capital = res.data.data.capital
|
this.trade = res.data.data.trade
|
}
|
}).catch(e => {
|
|
})
|
},
|
getHotPoint() { //市场主体热点企业查询接口
|
getHotPoint({rows: 10}).then(res => {
|
this.qiyeData = res.data.data
|
}).catch(e => {
|
|
})
|
},
|
searchHadleBtn() { //搜索市场主体
|
this.getDataList()
|
},
|
selectedIndustry() { //搜索经营范围
|
this.getDataList()
|
},
|
searchHandlePicker() { //搜索成立日期
|
this.getDataList()
|
},
|
// 获取数据列表
|
getDataList() {
|
this.dataListLoading = true;
|
fetchList(Object.assign({
|
current: this.pageIndex,
|
size: this.pageSize
|
}, this.searchForm)).then(response => {
|
this.dataListLoading = false
|
this.dataList = response.data.data.records
|
this.totalPage = response.data.data.total
|
this.$nextTick(() => {
|
this.$refs.table.doLayout()
|
})
|
}).catch(() => {
|
this.dataListLoading = false
|
})
|
|
},
|
// 每页数
|
sizeChangeHandle(val) {
|
this.pageSize = val
|
this.pageIndex = 1
|
this.getDataList()
|
},
|
// 当前页
|
currentChangeHandle(val) {
|
this.pageIndex = val
|
this.getDataList()
|
},
|
// 新增 / 修改
|
addOrUpdateHandle(id) {
|
this.addOrUpdateVisible = true
|
this.$nextTick(() => {
|
this.$refs.addOrUpdate.init(id)
|
})
|
},
|
// 删除
|
deleteHandle(id) {
|
this.$confirm('是否确认删除本条数据？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(function () {
|
return delObj(id)
|
}).then(data => {
|
this.$message.success('删除成功')
|
this.getDataList()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.market-box {
|
padding:0;
|
.el-card {
|
background: transparent;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3{
|
margin:0;
|
}
|
::v-deep {
|
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
|
margin-bottom: 10px;
|
}
|
|
.el-input--small .el-input__inner {
|
border-radius: 20px;
|
}
|
.el-card__body{
|
padding-top: 0;
|
height: 98%;
|
}
|
.el-card{
|
height: 100%;
|
}
|
}
|
.market-wrap{
|
height: 100%;
|
.market-box{
|
height: 100%;
|
}
|
}
|
.market-box-inside{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
}
|
.law-search-box {
|
margin-bottom: 5px;
|
}
|
|
.company-top {
|
padding: 0 0 15px 0;
|
box-sizing: border-box;
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: column;
|
.company-block {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 380px;
|
height: 130px;
|
background: #ffffff;
|
border-radius: 15px;
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
|
margin: 0 10px;
|
|
&:first-child {
|
margin-left: 0px;
|
}
|
|
&:last-child {
|
margin-right: 0px;
|
}
|
}
|
|
.wel-top-block {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.wel-block-left {
|
width: 80px;
|
height: 80px;
|
margin-right: 10px;
|
|
img {
|
width: 100%;
|
}
|
}
|
|
.wel-block-right {
|
display: flex;
|
flex-direction: column;
|
|
h1 {
|
font-size: 28px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #111111;
|
}
|
|
h2 {
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #111111;
|
}
|
}
|
}
|
|
.company-bottom-block {
|
display: flex;
|
padding: 0 30px;
|
|
.company-bottom-block-inside {
|
flex: 1;
|
|
h1 {
|
font-size: 14px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #111111;
|
}
|
}
|
}
|
}
|
|
.company-bottom {
|
width: calc(100% - 400px);
|
display: flex;
|
}
|
|
.wel-bottom-block {
|
width: 380px;
|
/*height: calc(50% - 7.5px);*/
|
height: calc(100%);
|
margin-top: 15px;
|
background: #ffffff;
|
border-radius: 15px;
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
.wel-bottom-title {
|
position: absolute;
|
left: 30px;
|
top: 0;
|
width: 218px;
|
height: 50px;
|
background: url("../../../../src/assets/lawImg/welIndexTitle-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
text-align: center;
|
font-size: 16px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 42px;
|
}
|
}
|
|
.daiban-main {
|
width: 100%;
|
height: calc(100% - 80px);
|
overflow-y: auto;
|
display: flex;
|
flex-direction: column;
|
margin-top: 70px;
|
padding: 0 20px;
|
box-sizing: border-box;
|
|
.daiban-block {
|
width: 100%;
|
display: flex;
|
padding: 8px 0;
|
|
.daibanIcon {
|
width: 18px;
|
height: 18px;
|
margin-right: 12px;
|
}
|
|
.daiban-content-box {
|
display: flex;
|
justify-content: space-between;
|
width: calc(100% - 18px - 12px);
|
|
.daiban-left {
|
flex: 1;
|
margin-right: 10px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
|
h1 {
|
font-size: 14px;
|
background: #ffffff;
|
border-radius: 40px;
|
}
|
}
|
|
.daiban-right {
|
flex: 1;
|
|
h1 {
|
font-size: 14px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
}
|
}
|
}
|
}
|
}
|
|
.botton-second {
|
margin-right: 20px;
|
height: calc(100% - 130px);
|
}
|
|
.botton-third {
|
width: 100%;
|
border-radius: 15px;
|
background: #fff;
|
padding: 15px 20px 10px 20px;
|
box-sizing: border-box;
|
}
|
|
</style>
|
