52 changed files with 2427 additions and 421 deletions
|
After Width: | Height: | Size: 1013 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 700 B |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 512 B |
|
After Width: | Height: | Size: 959 B |
|
After Width: | Height: | Size: 472 B |
|
After Width: | Height: | Size: 600 B |
|
After Width: | Height: | Size: 559 B |
|
After Width: | Height: | Size: 322 B |
|
After Width: | Height: | Size: 261 B |
|
After Width: | Height: | Size: 555 B |
|
After Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 660 B |
|
After Width: | Height: | Size: 876 B |
|
After Width: | Height: | Size: 248 B |
|
After Width: | Height: | Size: 222 B |
@ -1,136 +1,313 @@ |
|||
<template> |
|||
<div class="descriptions-table"> |
|||
<el-descriptions class="margin-top" :column="2" border :content-style="rowCenter" :label-style="labelRowCenter"> |
|||
<el-descriptions-item :label="item.label" v-for="(item, index) in descrData" :key="(item, index)"> |
|||
{{ item.val }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="更新时间" span="2"> |
|||
{{ updateTime }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="经营范围" span="2"> |
|||
{{ businessScope }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<div class="descriptions-table"> |
|||
<div class="title-wrap"> |
|||
<div class="letf"> |
|||
<span>{{ firstName }}</span> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="top"> |
|||
<h2 class="name">{{ enterpriseObj.enterpriseName }}</h2> |
|||
<span class="status">存续</span> |
|||
</div> |
|||
<p class="code"> |
|||
统一社会信用代码：{{ enterpriseObj.unifiedSocialCreditCode }} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<!-- 重要提示 --> |
|||
<div class="tips"> |
|||
<div class="tips-title">重要提示：</div> |
|||
<div class="tips-content"> |
|||
本平台信用信息来源于基本信息、信用承诺、资质信息、人员信息、业绩信息和其他信息等由企事业单位自行申报，其真实性、有效性由企事业单位负责，企事业单位对所填报的信息客任负责，不得含有虚假或违规内容。 |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-wrap"> |
|||
<div class="table-title"> |
|||
<span> |
|||
基本信息 |
|||
</span> |
|||
</div> |
|||
<el-descriptions |
|||
class="margin-top" |
|||
:column="2" |
|||
border |
|||
:content-style="rowCenter" |
|||
:label-style="labelRowCenter" |
|||
> |
|||
<el-descriptions-item |
|||
:label="item.label" |
|||
v-for="(item, index) in descrData" |
|||
:key="(item, index)" |
|||
> |
|||
{{ item.val }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="更新时间" span="2"> |
|||
{{ updateTime }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="经营范围" span="2"> |
|||
{{ businessScope }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { enterpriseInfo } from "@/api/enterpriseInformation" |
|||
import { getGuangDong } from "@/api/creditStatistics" |
|||
import { enterpriseInfo } from "@/api/enterpriseInformation"; |
|||
import { getGuangDong } from "@/api/creditStatistics"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
rowCenter: { |
|||
'borderColor': '#DADCE3' |
|||
}, |
|||
labelRowCenter: { |
|||
'borderColor': '#DADCE3' |
|||
}, |
|||
enterpriseId: "", |
|||
enterpriseObj: {}, |
|||
descrData: [{ |
|||
label: "企业名称", |
|||
code: "enterpriseName", |
|||
val: "" |
|||
}, { |
|||
label: "投资组成", |
|||
code: "investmentComposition", |
|||
val: "" |
|||
}, { |
|||
label: "法定代表人", |
|||
code: "legalRepresentative", |
|||
val: "" |
|||
}, { |
|||
label: "成立日期", |
|||
code: "establishmentDate", |
|||
val: "" |
|||
}, { |
|||
label: "统一社会信用代码", |
|||
code: "unifiedSocialCreditCode", |
|||
val: "" |
|||
}, { |
|||
label: "登记机关", |
|||
code: "creditCodeIssuingAuthority", |
|||
val: "" |
|||
}, { |
|||
label: "注册地区", |
|||
code: "adcd", |
|||
val: "" |
|||
}, { |
|||
label: "注册地址", |
|||
code: "registeredAddress", |
|||
val: "" |
|||
}, { |
|||
label: "注册资本（万元）", |
|||
code: "registeredCapital", |
|||
val: "" |
|||
}, { |
|||
label: "实缴注册资本（万元）", |
|||
code: "paidRegisteredCapital", |
|||
val: "" |
|||
},], |
|||
updateTime: "", |
|||
businessScope: "", |
|||
areaList:[] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.enterpriseId = this.$route.query.enterpriseId |
|||
this.getArea() |
|||
}, |
|||
methods: { |
|||
getDetail() { |
|||
enterpriseInfo(this.enterpriseId).then(res => { |
|||
this.enterpriseObj = res.data.data |
|||
for (let key in this.enterpriseObj) { |
|||
this.descrData.forEach(item => { |
|||
if (key == item.code&&item.code=='adcd') { |
|||
item.val = this.getadcd(this.enterpriseObj[key]) || "-" |
|||
}else if (key == item.code) { |
|||
item.val = this.enterpriseObj[key] || "-" |
|||
} |
|||
}) |
|||
} |
|||
this.updateTime = this.enterpriseObj.updateTime || "-" |
|||
this.businessScope = this.enterpriseObj.businessScope || "-" |
|||
}) |
|||
data() { |
|||
return { |
|||
rowCenter: { |
|||
borderColor: "#DADCE3" |
|||
}, |
|||
labelRowCenter: { |
|||
borderColor: "#DADCE3" |
|||
}, |
|||
enterpriseId: "", |
|||
enterpriseObj: {}, |
|||
firstName: "", |
|||
descrData: [ |
|||
// { |
|||
// label: "企业名称", |
|||
// code: "enterpriseName", |
|||
// val: "" |
|||
// }, |
|||
{ |
|||
label: "投资组成", |
|||
code: "investmentComposition", |
|||
val: "" |
|||
}, |
|||
getArea() { |
|||
getGuangDong().then(res => { |
|||
this.areaList = res.data.data |
|||
this.getDetail() |
|||
}) |
|||
{ |
|||
label: "法定代表人", |
|||
code: "legalRepresentative", |
|||
val: "" |
|||
}, |
|||
getadcd(row) { |
|||
let adcdText = "" |
|||
let adcdCode = row.slice(0, 4) + "00" |
|||
this.areaList.forEach(item => { |
|||
if (item.xzqhdm == adcdCode) { |
|||
adcdText = item.name |
|||
} |
|||
}) |
|||
if (adcdText == "") { |
|||
adcdText = "省外" |
|||
} |
|||
return adcdText |
|||
{ |
|||
label: "成立日期", |
|||
code: "establishmentDate", |
|||
val: "" |
|||
}, |
|||
// { |
|||
// label: "统一社会信用代码", |
|||
// code: "unifiedSocialCreditCode", |
|||
// val: "" |
|||
// }, |
|||
{ |
|||
label: "登记机关", |
|||
code: "creditCodeIssuingAuthority", |
|||
val: "" |
|||
}, |
|||
{ |
|||
label: "注册地区", |
|||
code: "adcd", |
|||
val: "" |
|||
}, |
|||
{ |
|||
label: "注册地址", |
|||
code: "registeredAddress", |
|||
val: "" |
|||
}, |
|||
{ |
|||
label: "注册资本（万元）", |
|||
code: "registeredCapital", |
|||
val: "" |
|||
}, |
|||
{ |
|||
label: "实缴注册资本（万元）", |
|||
code: "paidRegisteredCapital", |
|||
val: "" |
|||
} |
|||
], |
|||
updateTime: "", |
|||
businessScope: "", |
|||
areaList: [] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.enterpriseId = this.$route.query.enterpriseId; |
|||
this.getArea(); |
|||
}, |
|||
methods: { |
|||
getDetail() { |
|||
enterpriseInfo(this.enterpriseId).then(res => { |
|||
this.enterpriseObj = res.data.data; |
|||
this.firstName = this.enterpriseObj.enterpriseName.trim().split("")[0]; |
|||
for (let key in this.enterpriseObj) { |
|||
this.descrData.forEach(item => { |
|||
if (key == item.code && item.code == "adcd") { |
|||
item.val = this.getadcd(this.enterpriseObj[key]) || "-"; |
|||
} else if (key == item.code) { |
|||
item.val = this.enterpriseObj[key] || "-"; |
|||
} |
|||
}); |
|||
} |
|||
this.updateTime = this.enterpriseObj.updateTime || "-"; |
|||
this.businessScope = this.enterpriseObj.businessScope || "-"; |
|||
}); |
|||
}, |
|||
getArea() { |
|||
getGuangDong().then(res => { |
|||
this.areaList = res.data.data; |
|||
this.getDetail(); |
|||
}); |
|||
}, |
|||
getadcd(row) { |
|||
let adcdText = ""; |
|||
let adcdCode = row.slice(0, 4) + "00"; |
|||
this.areaList.forEach(item => { |
|||
if (item.xzqhdm == adcdCode) { |
|||
adcdText = item.name; |
|||
} |
|||
}); |
|||
if (adcdText == "") { |
|||
adcdText = "省外"; |
|||
} |
|||
return adcdText; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.descriptions-table { |
|||
/deep/.el-descriptions { |
|||
.el-descriptions-item__cell { |
|||
padding: 11px 10px; |
|||
font-size: 16px; |
|||
padding: 20px; |
|||
background-color: #ffffff; |
|||
border-radius: 8px; |
|||
.title-wrap { |
|||
display: flex; |
|||
|
|||
.letf { |
|||
margin-right: 20px; |
|||
span { |
|||
display: block; |
|||
width: 70px; |
|||
height: 70px; |
|||
background: #f4faff; |
|||
border-radius: 8px; |
|||
border: 1px solid rgba(0, 94, 183, 0.3); |
|||
text-align: center; |
|||
line-height: 70px; |
|||
|
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 600; |
|||
font-size: 34px; |
|||
color: #005eb7; |
|||
font-style: normal; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
padding: 10px 0; |
|||
.top { |
|||
display: flex; |
|||
h2 { |
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 600; |
|||
font-size: 24px; |
|||
color: #333333; |
|||
line-height: 24px; |
|||
text-align: left; |
|||
font-style: normal; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.status { |
|||
margin-left: 10px; |
|||
width: 40px; |
|||
height: 24px; |
|||
background: #f3fff9; |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(0, 197, 96, 0.5); |
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #00c560; |
|||
text-align: center; |
|||
line-height: 24px; |
|||
font-style: normal; |
|||
} |
|||
} |
|||
|
|||
.code { |
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #666666; |
|||
line-height: 14px; |
|||
text-align: left; |
|||
font-style: normal; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tips { |
|||
margin-top: 20px; |
|||
padding: 20px; |
|||
background: #f8fbfe; |
|||
border: 1px solid #eff5fb; |
|||
|
|||
.tips-title { |
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
color: #005eb7; |
|||
line-height: 16px; |
|||
text-align: left; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.tips-content { |
|||
margin-top: 10px; |
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #666666; |
|||
line-height: 20px; |
|||
text-align: left; |
|||
font-style: normal; |
|||
} |
|||
} |
|||
.table-wrap { |
|||
margin-top: 20px; |
|||
|
|||
.table-title { |
|||
height: 47px; |
|||
line-height: 47px; |
|||
background-color: #f6f6f6; |
|||
|
|||
span { |
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
font-style: normal; |
|||
|
|||
.el-descriptions-item__label { |
|||
background: #EBF4FE; |
|||
width: 240px; |
|||
font-weight: 600; |
|||
color: #005EB7; |
|||
padding-left: 21px; |
|||
&::before { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: 3px; |
|||
height: 16px; |
|||
background: #005eb7; |
|||
margin-right: 10px; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/.el-descriptions { |
|||
.el-descriptions-item__cell { |
|||
padding: 11px 10px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.el-descriptions-item__label { |
|||
background: #ebf4fe; |
|||
width: 240px; |
|||
font-weight: 600; |
|||
color: #005eb7; |
|||
padding-left: 21px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
</style> |
|||
|
|||
@ -0,0 +1,367 @@ |
|||
<template> |
|||
<div class="basic-detail"> |
|||
<div class="basic-header"> |
|||
<div class="header-wrap"> |
|||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> |
|||
<el-breadcrumb-item :to="{ path: '/enterpriseInformation' }" |
|||
>人员信息</el-breadcrumb-item |
|||
> |
|||
<el-breadcrumb-item>人员信息详情</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
</div> |
|||
<div class="basic-main"> |
|||
<div class="main-wrap"> |
|||
<div class="table-wrap"> |
|||
<div class="table-title"> |
|||
<span> |
|||
基本信息 |
|||
</span> |
|||
</div> |
|||
<el-descriptions |
|||
class="margin-top" |
|||
:column="2" |
|||
border |
|||
:content-style="rowCenter" |
|||
:label-style="labelRowCenter" |
|||
> |
|||
<!-- <el-descriptions-item |
|||
:label="item.label" |
|||
v-for="(item, index) in descrData" |
|||
:key="(item, index)" |
|||
> |
|||
{{ item.val }} |
|||
</el-descriptions-item> --> |
|||
<el-descriptions-item label="姓名"> |
|||
1 |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="性别"> |
|||
2 |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="聘用单位" :span="2"> |
|||
3 |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="职称"> |
|||
4 |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="职务"> |
|||
5 |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="职称专业"> |
|||
6 |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="从业开始年份"> |
|||
7 |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</div> |
|||
|
|||
<div class="table-wrap"> |
|||
<div class="table-title"> |
|||
<span> |
|||
执业资格信息或岗位信息 |
|||
</span> |
|||
</div> |
|||
<el-table :data="dataList" style="width: 100%"> |
|||
<el-table-column |
|||
prop="enterpriseName" |
|||
label="资格名称/岗位名称" |
|||
width="150" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qualificationCategory" |
|||
label="证书编号/资格证书编号" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="professionalCategory" |
|||
label="注册证号" |
|||
width="130" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="level" |
|||
label="注册类型及专业" |
|||
width="130" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="certificateNo" |
|||
label="证书专业" |
|||
width="130" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="issuedBy" |
|||
label="有效期至/批准目期" |
|||
width="150" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="issuanceDate" |
|||
label="核发单位" |
|||
width="150" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="validityPeriod" |
|||
label="备注" |
|||
width="120" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<div class="table-wrap"> |
|||
<div class="table-title"> |
|||
<span> |
|||
工作单位 |
|||
</span> |
|||
</div> |
|||
<el-table :data="dataList" style="width: 100%"> |
|||
<el-table-column |
|||
prop="enterpriseName" |
|||
label="单位名称" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qualificationCategory" |
|||
label="开始时间" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="professionalCategory" |
|||
label="离职时间" |
|||
align="center" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { creditList } from "@/api/enterpriseInformation"; |
|||
import descriptionsEnterpriseTable from "./components/descriptionsEnterpriseTable"; |
|||
import qualificationTable from "./components/qualificationTable"; |
|||
import personalTable from "./components/personalTable"; |
|||
import proAchievementTable from "./components/proAchievementTable"; |
|||
import projectAwardTable from "./components/projectAwardTable"; |
|||
import realTimeCredit from "./components/realTimeCredit"; |
|||
import actionList from "./components/actionList"; |
|||
import { enterpriseInfo } from "../../api/enterpriseInformation"; |
|||
export default { |
|||
components: { |
|||
descriptionsEnterpriseTable, |
|||
qualificationTable, |
|||
personalTable, |
|||
proAchievementTable, |
|||
projectAwardTable, |
|||
realTimeCredit, |
|||
actionList |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: "qualification" |
|||
}; |
|||
}, |
|||
created() {}, |
|||
mounted() {}, |
|||
methods: {} |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.basic-detail { |
|||
.basic-header { |
|||
height: 40px; |
|||
background: #ebf4fe; |
|||
|
|||
.header-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/.el-breadcrumb { |
|||
margin-top: 10px; |
|||
|
|||
.el-breadcrumb__item { |
|||
.el-breadcrumb__inner { |
|||
font-size: 16px; |
|||
color: #005eb7 !important; |
|||
} |
|||
|
|||
.el-breadcrumb__separator { |
|||
font-size: 16px; |
|||
color: #005eb7 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.basic-main { |
|||
background: linear-gradient(180deg, #005eb7 0%, #edf7ff 60% #edf7ff 100%); |
|||
padding: 20px 0; |
|||
|
|||
.main-wrap { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
// background: #ffffff; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
|
|||
.tabs-wrap { |
|||
// padding: 20px; |
|||
background-color: #ffffff; |
|||
border-radius: 8px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/deep/.tabs { |
|||
.el-tabs__header { |
|||
// border-bottom-color: #c8dff8; |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.el-tabs__nav-wrap { |
|||
// height: 50px; |
|||
// padding-left: 5px; |
|||
|
|||
.el-tabs__nav { |
|||
width: 100%; |
|||
display: flex; |
|||
} |
|||
|
|||
.el-tabs__item { |
|||
flex: 1; |
|||
height: 50px; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
padding-top: 5px; |
|||
text-align: center; |
|||
// margin-top: 5px; |
|||
// margin-left: 1px; |
|||
// padding-left: 20px; |
|||
// padding-right: 20px; |
|||
// margin-right: 18px; |
|||
} |
|||
} |
|||
|
|||
.el-tabs__item.is-active { |
|||
// padding-left: 35px; |
|||
// padding-right: 35px; |
|||
color: #005eb7; |
|||
border-right-color: #dadce3; |
|||
border-left-color: #dadce3; |
|||
border-top-color: #dadce3; |
|||
// border-bottom: 0px solid red; |
|||
// border-radius: 8px 8px 0px 0px; |
|||
} |
|||
|
|||
.el-tabs__content { |
|||
padding: 0px; |
|||
} |
|||
|
|||
.tab-label { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
/deep/.el-tabs--border-card { |
|||
border: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.descriptions-wrap { |
|||
padding: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-wrap { |
|||
margin-bottom: 20px; |
|||
padding: 20px; |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
|
|||
.table-title { |
|||
height: 47px; |
|||
line-height: 47px; |
|||
background-color: #f6f6f6; |
|||
|
|||
span { |
|||
font-family: PingFangSC, PingFang SC; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
font-style: normal; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: 3px; |
|||
height: 16px; |
|||
background: #005eb7; |
|||
margin-right: 10px; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/.el-descriptions { |
|||
.el-descriptions-item__cell { |
|||
padding: 11px 10px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.el-descriptions-item__label { |
|||
background: #ebf4fe; |
|||
width: 240px; |
|||
font-weight: 600; |
|||
color: #005eb7; |
|||
padding-left: 21px; |
|||
} |
|||
} |
|||
/deep/.el-descriptions { |
|||
.el-descriptions-item__cell { |
|||
padding: 11px 10px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.el-descriptions-item__label { |
|||
background: #ebf4fe; |
|||
width: 240px; |
|||
font-weight: 600; |
|||
color: #005eb7; |
|||
padding-left: 21px; |
|||
} |
|||
} |
|||
|
|||
/deep/.el-table th.el-table__cell { |
|||
background-color: #ebf4fe !important; |
|||
|
|||
.cell { |
|||
color: #005eb7; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<div class="statistics-left"> |
|||
<div class="s-box"> |
|||
<div class="sb-header"> |
|||
<el-divider content-position="center">企业类型统计</el-divider> |
|||
</div> |
|||
<div class="sb-content" id="pie-chart"></div> |
|||
</div> |
|||
|
|||
<div class="s-box bar-box"> |
|||
<div class="sb-header"> |
|||
<el-divider content-position="center">企业信用分数统计图</el-divider> |
|||
</div> |
|||
<div class="sb-content" id="bar-chart"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
}; |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.initPieChart() |
|||
this.initBarChart() |
|||
}, |
|||
methods: { |
|||
initPieChart() { |
|||
var chartDom = document.getElementById('pie-chart'); |
|||
var myChart = echarts.init(chartDom); |
|||
var option; |
|||
|
|||
option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: '80%', |
|||
data: [ |
|||
{ value: 1048, name: 'Search Engine' }, |
|||
{ value: 735, name: 'Direct' }, |
|||
{ value: 580, name: 'Email' }, |
|||
{ value: 484, name: 'Union Ads' }, |
|||
{ value: 300, name: 'Video Ads' } |
|||
], |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
|
|||
}, |
|||
|
|||
initBarChart() { |
|||
var chartDom = document.getElementById('bar-chart'); |
|||
var myChart = echarts.init(chartDom); |
|||
var option; |
|||
|
|||
option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '2%', |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: 'Direct', |
|||
type: 'bar', |
|||
barWidth: '60%', |
|||
data: [10, 52, 200, 334, 390, 330, 220], |
|||
itemStyle: { |
|||
color: '#7c9cd6' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
|
|||
|
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.statistics-left { |
|||
padding: 20px; |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
.s-box { |
|||
.sb-header { |
|||
margin-bottom: 33px; |
|||
/deep/ .el-divider { |
|||
margin: 14px 0; |
|||
& > .el-divider__text { |
|||
width: 170px; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
.sb-content { |
|||
width: 100%; |
|||
height: 150px; |
|||
} |
|||
&.bar-box { |
|||
margin-top: 45px; |
|||
.sb-header { |
|||
margin-bottom: 33px; |
|||
/deep/ .el-divider { |
|||
& > .el-divider__text { |
|||
width: 230px; |
|||
} |
|||
} |
|||
} |
|||
#bar-chart { |
|||
width: 100%; |
|||
height: 220px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,273 @@ |
|||
<template> |
|||
<div class="statistics-right"> |
|||
<div class="s-box"> |
|||
<div class="sb-header"> |
|||
<el-divider content-position="center">企业区域分布统计</el-divider> |
|||
</div> |
|||
<div class="sb-content" id="map-chart"></div> |
|||
<div id="pie-echart"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
}; |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.initPieChart() |
|||
this.initMapChart() |
|||
}, |
|||
methods: { |
|||
initPieChart() { |
|||
var chartDom = document.getElementById('pie-echart'); |
|||
var myChart = echarts.init(chartDom); |
|||
var option; |
|||
|
|||
option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: ['50%', '80%'], |
|||
data: [ |
|||
{ value: 1048, name: 'Search Engine' }, |
|||
{ value: 735, name: 'Direct' }, |
|||
{ value: 580, name: 'Email' }, |
|||
{ value: 484, name: 'Union Ads' }, |
|||
{ value: 300, name: 'Video Ads' } |
|||
], |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
|
|||
}, |
|||
|
|||
async initMapChart() { |
|||
var chartDom = document.getElementById('map-chart') |
|||
var myChart = echarts.init(chartDom); |
|||
// **异步加载本地 China.json** |
|||
const guangdongJson = await fetch("/static/map/guangdong.json").then(res => res.json()) |
|||
console.log("1111111111111111111111") |
|||
console.log(guangdongJson) |
|||
echarts.registerMap("guangdong", guangdongJson); |
|||
let cityData = [ |
|||
{ name: "广州", value: 1200 }, |
|||
{ name: "深圳", value: 1800 }, |
|||
{ name: "东莞", value: 900 }, |
|||
{ name: "珠海", value: 500 }, |
|||
{ name: "汕头", value: 700 }, |
|||
// 其他城市数据... |
|||
]; |
|||
var option = { |
|||
tooltip: { |
|||
trigger: "item", |
|||
formatter: function (params) { |
|||
return `${params.name} <br> 企业数量: ${params.value || 0}`; |
|||
}, |
|||
}, |
|||
visualMap: { |
|||
show: false, // 隐藏图例 |
|||
min: 0, |
|||
max: 2000, |
|||
inRange: { |
|||
color: ["#D2E9FF", "#3B82F6"], // 渐变蓝色 |
|||
}, |
|||
}, |
|||
geo: [ |
|||
{ |
|||
map: 'guangdong', |
|||
aspectScale: 0.9, |
|||
roam: false, // 是否允许缩放 |
|||
zoom: 1.2, // 默认显示级别 |
|||
layoutSize: '95%', |
|||
layoutCenter: ['43%', '50%'], |
|||
label: { |
|||
show: true, |
|||
color: "#fff", |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
areaColor: { |
|||
type: 'linear-gradient', |
|||
x: 0, |
|||
y: 400, |
|||
x2: 0, |
|||
y2: 0, |
|||
colorStops: [{ |
|||
offset: 0, |
|||
color: 'rgba(37,108,190,0.3)' // 0% 处的颜色 |
|||
}, { |
|||
offset: 1, |
|||
color: 'rgba(15,169,195,0.3)' // 50% 处的颜色 |
|||
}], |
|||
global: true // 缺省为 false |
|||
}, |
|||
borderColor: '#4ecee6', |
|||
borderWidth: 1 |
|||
}, |
|||
emphasis: { |
|||
areaColor: { |
|||
type: 'linear-gradient', |
|||
x: 0, |
|||
y: 300, |
|||
x2: 0, |
|||
y2: 0, |
|||
colorStops: [{ |
|||
offset: 0, |
|||
color: 'rgba(37,108,190,1)' // 0% 处的颜色 |
|||
}, { |
|||
offset: 1, |
|||
color: 'rgba(15,169,195,1)' // 50% 处的颜色 |
|||
}], |
|||
global: true // 缺省为 false |
|||
} |
|||
} |
|||
}, |
|||
emphasis: { |
|||
itemStyle: { |
|||
areaColor: '#0160AD' |
|||
}, |
|||
label: { |
|||
show: true, |
|||
color: '#red', |
|||
fontWeight: "bold", |
|||
} |
|||
}, |
|||
zlevel: 3 |
|||
}, |
|||
{ |
|||
map: 'guangdong', |
|||
aspectScale: 0.9, |
|||
roam: false, // 是否允许缩放 |
|||
zoom: 1.2, // 默认显示级别 |
|||
layoutSize: '95%', |
|||
layoutCenter: ['43%', '50%'], |
|||
itemStyle: { |
|||
normal: { |
|||
borderColor: 'rgba(192,245,249,.6)', |
|||
borderWidth: 2, |
|||
shadowColor: '#2C99F6', |
|||
shadowOffsetY: 0, |
|||
shadowBlur: 120, |
|||
areaColor: 'rgba(29,85,139,.2)' |
|||
} |
|||
}, |
|||
zlevel: 2, |
|||
silent: true |
|||
}, |
|||
{ |
|||
map: 'guangdong', |
|||
aspectScale: 0.9, |
|||
roam: false, // 是否允许缩放 |
|||
zoom: 1.2, // 默认显示级别 |
|||
layoutSize: '95%', |
|||
layoutCenter: ['43%', '51.5%'], |
|||
itemStyle: { |
|||
// areaColor: '#005DDC', |
|||
areaColor: 'rgba(0,27,95,0.4)', |
|||
borderColor: '#004db5', |
|||
borderWidth: 1 |
|||
}, |
|||
zlevel: 1, |
|||
silent: true |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
geoIndex: 0, |
|||
// coordinateSystem: 'geo', |
|||
showLegendSymbol: true, |
|||
type: 'map', |
|||
roam: true, |
|||
label: { |
|||
normal: { |
|||
show: WebTransportDatagramDuplexStream, |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
emphasis: { |
|||
show: false, |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
itemStyle: { |
|||
normal: { |
|||
borderColor: '#2ab8ff', |
|||
borderWidth: 1.5, |
|||
areaColor: '#12235c' |
|||
}, |
|||
emphasis: { |
|||
areaColor: '#2AB8FF', |
|||
borderWidth: 0, |
|||
color: 'red' |
|||
} |
|||
}, |
|||
map: 'guangdong', // 使用 |
|||
data: cityData |
|||
// data: this.difficultData //热力图数据 不同区域 不同的底色 |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
window.addEventListener("resize", () => myChart.resize()); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.statistics-right { |
|||
padding: 20px; |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
.s-box { |
|||
position: relative; |
|||
/deep/ .el-divider { |
|||
margin: 14px 0; |
|||
& > .el-divider__text { |
|||
width: 210px; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
} |
|||
#map-chart { |
|||
width: 100%; |
|||
height: 450px; |
|||
} |
|||
#pie-echart { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 150px; |
|||
height: 150px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue