Skip to content

M
mancheng_code
Commit 06568c36 by heshihao
Options

feat: 修改满城企业画像详情界面

parent 5b8b032a
Showing with 4262 additions and 546 deletions
src/views/details/enterprise.vue
<template>
<div class="main">
<div class="header">
<div class="epName">
{{ info.name }}
<span>{{ info.status }}</span>
<span class="collect-span" v-if="info.collect == 1" @click="changeCollect">
<img src="~@/assets/images/atlas/icon-collection-select.png" alt="" />
已收藏
</span>
<span class="normal-span" v-if="info.collect == 2" @click="changeCollect">
<img src="~@/assets/images/atlas/icon-collection.png" alt="" />
收 藏
</span>
<span class="goBack" @click="$router.go(-1)">返回</span>
</div>
<div class="zizhi">
<span v-if="info.isfive">{{ info.isfive }}</span>
<span v-if="info.quoted_enterprise">{{ info.quoted_enterprise }}</span>
<span v-if="info.chain_master">{{ info.chain_master }}</span>
<span v-if="info.unicorn">{{ info.unicorn }}</span>
<span v-if="info.high_new">{{ info.high_new }}</span>
<span v-if="info.dengl">{{ info.dengl }}</span>
<span v-if="info.scale">{{ info.scale }}</span>
<span v-if="info.zjtg">{{ info.zjtg }}</span>
<span v-if="info.tbe">{{ info.tbe }}</span>
<span v-if="info.tbe_sjmy">{{ info.tbe_sjmy }}</span>
<span v-if="info.zjtg_gjjxjr">{{ info.zjtg_gjjxjr }}</span>
<span v-if="info.zjtg_sjxjr">{{ info.zjtg_sjxjr }}</span>
<span v-if="info.fianacing">{{ info.fianacing }}</span>
<span v-if="info.patent">{{ info.patent }}</span>
</div>
<ul class="epClassify">
<li>
<p>所在地区：</p>
<p>{{ info.location }}</p>
</li>
<li>
<p>联系电话：</p>
<p>{{ info.telephone }}</p>
</li>
<li>
<p>邮箱：</p>
<p>{{ info.email }}</p>
</li>
<li>
<p>官网：</p>
<p class="max-200">
<a v-if="info.web_site.includes('http')" :href="info.web_site" target="_blank">{{ info.web_site }}</a>
<span v-else @click="$copy(info.web_site)">{{ info.web_site }}</span>
</p>
</li>
</ul>
</div>
<div class="main_body">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="工商信息" name="businessInformation">
<div class="header_title">基本注册信息</div>
<div class="table_one">
<table border="1" padding="0" v-if="Object.keys(info).length > 0">
<tr>
<td>法定代表人</td>
<td>{{ info.legal }}</td>
<td>统一社会信用代码</td>
<td>{{ info.social_code }}</td>
<td>注册资本</td>
<td>{{ info.capital }}</td>
</tr>
<tr>
<td>成立日期</td>
<td>{{ info.build_date }}</td>
<td>企业（机构）类型</td>
<td>{{ info.entype }}</td>
<td>纳税人识别号</td>
<td>{{ info.tax_code }}</td>
</tr>
<tr>
<td>参保人数</td>
<td>{{ info.bao }}</td>
<td>工商注册号</td>
<td>{{ info.register_code }}</td>
<td>所属行业</td>
<td>{{ info.industry }}</td>
</tr>
<tr>
<td>登记机关</td>
<td>
{{ info.register_org }}
</td>
<td>经营范围</td>
<td colspan="4" class="detail">
{{ info.business_scope }}
</td>
</tr>
<tr>
<td>注册地址</td>
<td>
{{ info.address }}
<p class="show_map" v-if="info.jwd.lat != '-'" @click="showMap = true">
查看地图 >
</p>
</td>
<td>企业介绍</td>
<td colspan="4" class="detail">
{{ info.info }}
</td>
</tr>
</table>
</div>
<div class="height_box"></div>
<el-dialog title="注册地址" :visible.sync="showMap">
<div class="map_box">
<baidu-map
v-if="showMap == true"
class="bm-view"
:center="info.jwd"
:zoom="11"
ak="j343ekSOoi2qcVRq14WKPNGYfzyS2hWo"
:scroll-wheel-zoom="true"
>
<bm-marker :position="info.jwd" :icon="{ url: iconPng, size: { width: 36, height: 41 } }"> </bm-marker>
</baidu-map>
<div class="header-top">
<div style="display: flex;">
<div class="header-top-title">{{ info.name }}</div>
<div class="header-top-status">{{ info.status }}</div>
<div class="header-top-estate">制造业-电气机械和器材制造业</div>
<div class="header-top-collect">
<div
style="display: flex;align-items: center;"
class="collect-div"
v-if="info.collect == 1"
@click="changeCollect"
>
<img
style="height: 16px;width: 16px;margin-right: 6px;"
src="~@/assets/images/atlas/icon-collection-select.png"
alt=""
/>
<div>已关注</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="showMap = false">
关闭
</el-button>
<div
class="normal-div"
style="display: flex;align-items: center;"
v-if="info.collect == 2"
@click="changeCollect"
>
<img
style="height: 16px;width: 16px;margin-right: 6px;"
src="~@/assets/images/atlas/icon-collection.png"
alt=""
/>
<div>关注</div>
</div>
</el-dialog>
</el-tab-pane>
<el-tab-pane label="经营状况" name="operatingConditions">
<div class="header_title">行政许可</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>决定文书/许可编号</td>
<td>决定文书/许可证名称</td>
<td>有效期自</td>
<td>有效期至</td>
<td>许可机关</td>
<td>许可内容</td>
<td>来源</td>
</tr>
<tr style="height: 48px;" v-if="loading1 == true" v-loading="loading1"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label1" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.licence_no }}</td>
<td>{{ item.licence_name }}</td>
<td>{{ item.from_date }}</td>
<td>{{ item.end_date }}</td>
<td>{{ item.license_org }}</td>
<td>{{ item.licence_content }}</td>
<td>{{ item.source }}</td>
</tr>
<tr v-if="select2_info_label1.length == 0 && loading1 == false">
<td colspan="8" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<div class="header_title">行政处罚</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>决定文书编号</td>
<td>处置日期</td>
<td>处置单位</td>
<td>违法详情</td>
<td>处置结果</td>
<td>来源</td>
</tr>
<tr style="height: 48px;" v-if="loading7 == true" v-loading="loading7"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label7" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.punish_no }}</td>
<td>{{ item.pub_date }}</td>
<td>{{ item.punish_org }}</td>
<td>{{ item.punish_reason }}</td>
<td>{{ item.punish_content }}</td>
<td>{{ item.sources }}</td>
</tr>
<tr v-if="select2_info_label7.length == 0 && loading7 == false">
<td colspan="7" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<div class="header_title">资质证书</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>发证时间</td>
<td>证书类别</td>
<td>证书号</td>
<td>截止时间</td>
</tr>
<tr style="height: 48px;" v-if="loading8 == true" v-loading="loading8"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label8" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.start_date }}</td>
<td>{{ item.type }}</td>
<td>{{ item.cert_no }}</td>
<td>{{ item.end_date }}</td>
</tr>
<tr v-if="select2_info_label8.length == 0 && loading8 == false">
<td colspan="5" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<div class="header_title">税务信用</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>评价年度</td>
<td>纳税人识别号</td>
<td>纳税信用等级</td>
<td>单位评价</td>
</tr>
<tr style="height: 48px;" v-if="loading2 == true" v-loading="loading2"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label2" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.year }}</td>
<td>{{ item.id_number }}</td>
<td>{{ item.grade }}</td>
<td>{{ item.eval_department }}</td>
</tr>
<tr v-if="select2_info_label2.length == 0 && loading2 == false">
<td colspan="5" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<div class="header_title">进出口信用</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>注册海关</td>
<td>经营类别</td>
<td>注册日期</td>
<td>行业类别</td>
</tr>
<tr style="height: 48px;" v-if="loading3 == true" v-loading="loading3"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label3" :key="index">
<td>{{ index + 1 }}序号</td>
<td>{{ item.customs_registered_address }}</td>
<td>{{ item.management_category }}</td>
<td>{{ item.record_date }}</td>
<td>{{ item.industry_category }}</td>
</tr>
<tr v-if="select2_info_label3.length == 0 && loading3 == false">
<td colspan="5" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<div class="header_title">供应商</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>商家名称</td>
<td>采购占比</td>
<td>采购金额（万元）</td>
<td>报告期/公开时间</td>
<td>数据来源</td>
<td>关联关系</td>
</tr>
<tr style="height: 48px;" v-if="loading4 == true" v-loading="loading4"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label4" :key="index">
<td>{{ index }}</td>
<td>{{ item.supplier_name }}</td>
<td>{{ item.ratio }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.pub_date }}</td>
<td>{{ item.sources }}</td>
<td>{{ item.relation }}</td>
</tr>
<tr v-if="select2_info_label4.length == 0 && loading4 == false">
<td colspan="7" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<div class="header_title">客户</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>客户名称</td>
<td>销售占比</td>
<td>销售金额（万元）</td>
<td>报告期/公开时间</td>
<td>数据来源</td>
<td>关联关系</td>
</tr>
<tr style="height: 48px;" v-if="loading5 == true" v-loading="loading5"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label5" :key="index">
<td>{{ index }}</td>
<td>{{ item.client_name }}</td>
<td>{{ item.ratio }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.pub_date }}</td>
<td>{{ item.sources }}</td>
<td>{{ item.relation }}</td>
</tr>
<tr v-if="select2_info_label5.length == 0 && loading5 == false">
<td colspan="7" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<div class="height_box"></div>
</el-tab-pane>
<el-tab-pane label="企业风险" name="enterpriseRisk">
<div class="header_title">股权出质</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>登记编号</td>
<td>出质人</td>
<td>标的企业</td>
<td>质权人</td>
<td>出质股权数额</td>
<td>登记日期</td>
<td>状态</td>
</tr>
<tr style="height: 48px;" v-if="loading6 == true" v-loading="loading6"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label6" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.reg_number }}</td>
<td>{{ item.pledgor }}</td>
<td>{{ item.target_company }}</td>
<td>{{ item.pledgee }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.pub_date }}</td>
<td>{{ item.status }}</td>
</tr>
<tr v-if="select2_info_label6.length == 0 && loading6 == false">
<td colspan="8" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
<!-- <div class="header_title">合作风险</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>供应商纠纷</td>
<td>起诉供应商</td>
<td>被供应商起诉</td>
<td>警示</td>
<td>起诉客户</td>
<td>被客户起诉</td>
</tr>
<tr
class="row_item"
v-for="(item, index) in select3_info.label1"
:key="index"
>
<td>{{ index + 1 }}</td>
<td>{{ item.person1 }}</td>
<td>{{ item.jion_company }}</td>
<td>{{ item.person2 }}</td>
<td>{{ item.number }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.status }}</td>
</tr>
</table>
</div>
<div>
<div class="goBack" @click="$router.go(-1)">
<img
style="width: 14px;height: 14px;margin-top: -4px;"
src="~@/assets/images/public/icon-wrapper.png"
alt=""
/>
返回
</div>
<div class="header_title">债务/债权</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>债务信息</td>
<td>债权信息</td>
<td>历史债务/债权</td>
<td>关联方债务/债权</td>
</tr>
<tr
class="row_item"
v-for="(item, index) in select3_info.label1"
:key="index"
>
<td>{{ index + 1 }}</td>
<td>{{ item.person1 }}</td>
<td>{{ item.person2 }}</td>
<td>{{ item.method }}</td>
<td>{{ item.amount }}</td>
</tr>
</table>
</div> -->
<div class="height_box"></div>
</el-tab-pane>
<el-tab-pane label="知识产权" name="intellectualProperty">
<div class="header_title">专利信息</div>
<div class="table">
<table border="1" padding="0">
<tr class="row_header">
<td>序号</td>
<td>发明名称</td>
<td>发明类型</td>
<td>状态</td>
<td>申请号</td>
<td>申请日</td>
<td>公开（公告）号</td>
<td>发明人</td>
</tr>
<tr style="height: 48px;" v-if="loading9 == true" v-loading="loading9"></tr>
<tr class="row_item" v-for="(item, index) in select2_info_label9" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.type }}</td>
<td>{{ item.status }}</td>
<td>{{ item.apply_number }}</td>
<td>{{ item.apply_date }}</td>
<td>{{ item.pub_number }}</td>
<td>{{ item.inventor }}</td>
</tr>
<tr v-if="select2_info_label9.length == 0 && loading9 == false">
<td colspan="8" style="text-align: center;">暂无数据</td>
</tr>
</table>
</div>
</div>
<div class="header-aptitude">
<div class="aptitude-green aptitude-item">高新技术企业</div>
<div class="aptitude-blue aptitude-item">民营企业</div>
<div class="aptitude-sky-blue aptitude-item">2023年中国新经济独角兽企业</div>
</div>
<div class="header-info">
<div class="header-info-position none-left">
<div class="left">所在地区：</div>
<div class="right">{{ info.location }}</div>
</div>
<div class="header-info-position">
<div class="left">联系电话：</div>
<div class="right">{{ info.telephone }}</div>
</div>
<div class="header-info-position">
<div class="left">邮箱：</div>
<div class="right">{{ info.email }}</div>
</div>
<div class="header-info-position none-right">
<div class="left">官网：</div>
<a
class="right"
v-if="info.web_site && info.web_site.includes('http')"
:href="info.web_site"
target="_blank"
>{{ info.web_site }}</a
>
<div class="right" v-else @click="$copy(info.web_site)">{{ info.web_site }}</div>
</div>
</div>
<div class="header-bottom">
<div class="header-bottom-left">
<div style="display: flex; height: 20px;align-items: center;">
<div class="header-bottom-left-name">产业布局：</div>
<div class="header-bottom-left-content">工业机器人</div>
<div class="header-bottom-left-content">|</div>
<div class="header-bottom-left-content">煤炭</div>
</div>
<div class="height_box"></div>
</el-tab-pane>
<el-tab-pane label="供应链图谱" name="atlas">
<div class="atlas">
<RelationGraph
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
style="width: 100%; height: 100%"
/>
<div style="display: flex;height: 20px;align-items: center;margin-top: 20px;">
<div class="header-bottom-left-name">技术领域：</div>
<div class="header-bottom-left-content">煤矿机械</div>
<div class="header-bottom-left-content">|</div>
<div class="header-bottom-left-content">两架一组端头支架</div>
</div>
</el-tab-pane>
<el-tab-pane label="供应链地图" name="map">
<div class="map">
<div class="chart-box" ref="chartMap"></div>
<div style="display: flex;height: 20px;align-items: center;margin-top: 20px;">
<div class="header-bottom-left-name">产品与服务：</div>
<div class="header-bottom-left-content">环保设备</div>
<div class="header-bottom-left-content">|</div>
<div class="header-bottom-left-content">通用机械</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="header-bottom-center">
<div class="mark">780</div>
<div class="text" style="margin-left: 76px;">综合评分</div>
</div>
<!-- <div class="header-bottom-right">
<div class="mark">9</div>
<div class="text" style="margin-left: 66px;">招商匹配度</div>
</div> -->
</div>
</div>
<div class="main_body scroll-none" ref="tabContainerRef" @scroll="onScroll">
<div class="tab-bar">
<template>
<span
v-for="item in tabTitleList"
:key="item.key"
:class="['tab-title', item.key == activeName ? 'active' : '']"
@click="handleTabClick(item.key)"
>
{{ item.label }}
</span>
</template>
</div>
<div class="tab-container">
<template v-if="activeName == 'comprehensiveAbilityEvaluation'">
<ComprehensiveAbilityEvaluation ref="ComprehensiveAbilityEvaluationRef">
<div class="anchor-box">
<div class="anchor-box-top">
<div>综合能力评价</div>
<div
:class="[
'anchor-box-item',
activeName == 'comprehensiveAbilityEvaluation' && scrollTop < 230 ? 'active' : '',
]"
@click="handleAnchorClick(1)"
>
综合能力分析
</div>
<div
:class="[
'anchor-box-item',
activeName == 'comprehensiveAbilityEvaluation' && scrollTop >= 230 ? 'active' : '',
]"
@click="handleAnchorClick(2)"
>
分项指标分析
</div>
<div class="left-line">
<div
:class="[
'left-line1',
activeName == 'comprehensiveAbilityEvaluation' && scrollTop < 230 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line2',
activeName == 'comprehensiveAbilityEvaluation' && scrollTop >= 230 ? 'active' : '',
]"
></div>
</div>
</div>
<div class="anchor-box-bottom" @click="handleBackTop">
<img src="~@/assets/images/public/icon-backtop.png" alt="" />
返回顶部
</div>
</div>
</ComprehensiveAbilityEvaluation>
</template>
<template v-else-if="activeName == 'basicInformation'">
<BasicInformation>
<div class="anchor-box">
<div class="anchor-box-top">
<div>基本信息</div>
<div
:class="['anchor-box-item', activeName == 'basicInformation' && scrollTop < 230 ? 'active' : '']"
@click="handleAnchorClick(1)"
>
工商信息
</div>
<div
:class="[
'anchor-box-item',
activeName == 'basicInformation' && scrollTop >= 230 && scrollTop < 660 ? 'active' : '',
]"
@click="handleAnchorClick(2)"
>
股东信息
</div>
<div
:class="[
'anchor-box-item',
activeName == 'basicInformation' && scrollTop >= 660 && scrollTop < 1260 ? 'active' : '',
]"
@click="handleAnchorClick(3)"
>
主要人员
</div>
<div
:class="[
'anchor-box-item',
activeName == 'basicInformation' && scrollTop >= 1260 && scrollTop < 1860 ? 'active' : '',
]"
@click="handleAnchorClick(4)"
>
分支结构
</div>
<div
:class="[
'anchor-box-item',
activeName == 'basicInformation' && scrollTop >= 1860 && scrollTop < 2460 ? 'active' : '',
]"
@click="handleAnchorClick(5)"
>
对外投资
</div>
<div
:class="[
'anchor-box-item',
activeName == 'basicInformation' && scrollTop >= 2460 && scrollTop < 3060 ? 'active' : '',
]"
@click="handleAnchorClick(6)"
>
融资情况
</div>
<div
:class="[
'anchor-box-item',
activeName == 'basicInformation' && scrollTop >= 3060 && scrollTop < 3460 ? 'active' : '',
]"
@click="handleAnchorClick(7)"
>
变更记录
</div>
<div
:class="['anchor-box-item', activeName == 'basicInformation' && scrollTop >= 3460 ? 'active' : '']"
@click="handleAnchorClick(8)"
>
财务情况
</div>
<div class="left-line">
<div
:class="['left-line1', activeName == 'basicInformation' && scrollTop < 230 ? 'active' : '']"
></div>
<div
:class="[
'left-line2',
activeName == 'basicInformation' && scrollTop >= 230 && scrollTop < 660 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line3',
activeName == 'basicInformation' && scrollTop >= 660 && scrollTop < 1260 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line4',
activeName == 'basicInformation' && scrollTop >= 1260 && scrollTop < 1860 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line5',
activeName == 'basicInformation' && scrollTop >= 1860 && scrollTop < 2460 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line6',
activeName == 'basicInformation' && scrollTop >= 2460 && scrollTop < 3060 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line7',
activeName == 'basicInformation' && scrollTop >= 3060 && scrollTop < 3460 ? 'active' : '',
]"
></div>
<div
:class="['left-line8', activeName == 'basicInformation' && scrollTop >= 3460 ? 'active' : '']"
></div>
</div>
</div>
<div class="anchor-box-bottom" @click="handleBackTop">
<img src="~@/assets/images/public/icon-backtop.png" alt="" />
返回顶部
</div>
</div>
</BasicInformation>
</template>
<template v-else-if="activeName == 'businessInformation'">
<BusinessInformation>
<div class="anchor-box">
<div class="anchor-box-top">
<div>经营信息</div>
<div
:class="['anchor-box-item', activeName == 'businessInformation' && scrollTop < 400 ? 'active' : '']"
@click="handleAnchorClick(1)"
>
客户
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
@click="handleAnchorClick(2)"
>
供应商
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 900 && scrollTop < 1500 ? 'active' : '',
]"
@click="handleAnchorClick(3)"
>
招聘信息
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 1500 && scrollTop < 2100 ? 'active' : '',
]"
@click="handleAnchorClick(4)"
>
招投标信息
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 2100 && scrollTop < 2700 ? 'active' : '',
]"
@click="handleAnchorClick(5)"
>
资质证书
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 2700 && scrollTop < 3300 ? 'active' : '',
]"
@click="handleAnchorClick(6)"
>
行政许可
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 3300 && scrollTop < 3900 ? 'active' : '',
]"
@click="handleAnchorClick(7)"
>
税务信用
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 3900 && scrollTop < 4500 ? 'active' : '',
]"
@click="handleAnchorClick(8)"
>
上榜榜单
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 4500 && scrollTop < 5100 ? 'active' : '',
]"
@click="handleAnchorClick(9)"
>
微博
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 5100 && scrollTop < 5700 ? 'active' : '',
]"
@click="handleAnchorClick(10)"
>
微信公众号
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessInformation' && scrollTop >= 5700 && scrollTop < 6300 ? 'active' : '',
]"
@click="handleAnchorClick(11)"
>
抖音/快手
</div>
<div class="left-line">
<div
:class="['left-line1', activeName == 'businessInformation' && scrollTop < 400 ? 'active' : '']"
></div>
<div
:class="[
'left-line2',
activeName == 'businessInformation' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line3',
activeName == 'businessInformation' && scrollTop >= 900 && scrollTop < 1500 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line4',
activeName == 'businessInformation' && scrollTop >= 1500 && scrollTop < 2100 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line5',
activeName == 'businessInformation' && scrollTop >= 2100 && scrollTop < 2700 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line6',
activeName == 'businessInformation' && scrollTop >= 2700 && scrollTop < 3300 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line7',
activeName == 'businessInformation' && scrollTop >= 3300 && scrollTop < 3900 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line8',
activeName == 'businessInformation' && scrollTop >= 3900 && scrollTop < 4500 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line9',
activeName == 'businessInformation' && scrollTop >= 4500 && scrollTop < 5100 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line10',
activeName == 'businessInformation' && scrollTop >= 5100 && scrollTop < 5700 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line11',
activeName == 'businessInformation' && scrollTop >= 5700 && scrollTop < 6300 ? 'active' : '',
]"
></div>
</div>
</div>
<div class="anchor-box-bottom" @click="handleBackTop">
<img src="~@/assets/images/public/icon-backtop.png" alt="" />
返回顶部
</div>
</div>
</BusinessInformation>
</template>
<template v-else-if="activeName == 'judicialRisk'">
<JudicialRisk>
<div class="anchor-box">
<div class="anchor-box-top">
<div>司法风险</div>
<div
:class="['anchor-box-item', activeName == 'judicialRisk' && scrollTop < 400 ? 'active' : '']"
@click="handleAnchorClick(1)"
>
法律诉讼
</div>
<div
:class="[
'anchor-box-item',
activeName == 'judicialRisk' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
@click="handleAnchorClick(2)"
>
被执行人
</div>
<div
:class="[
'anchor-box-item',
activeName == 'judicialRisk' && scrollTop >= 900 && scrollTop < 1500 ? 'active' : '',
]"
@click="handleAnchorClick(3)"
>
限制高消费
</div>
<div
:class="[
'anchor-box-item',
activeName == 'judicialRisk' && scrollTop >= 1500 && scrollTop < 2100 ? 'active' : '',
]"
@click="handleAnchorClick(4)"
>
终本案件
</div>
<div
:class="[
'anchor-box-item',
activeName == 'judicialRisk' && scrollTop >= 2100 && scrollTop < 2700 ? 'active' : '',
]"
@click="handleAnchorClick(5)"
>
立案信息
</div>
<div
:class="[
'anchor-box-item',
activeName == 'judicialRisk' && scrollTop >= 2700 && scrollTop < 3300 ? 'active' : '',
]"
@click="handleAnchorClick(6)"
>
开庭公告
</div>
<div
:class="[
'anchor-box-item',
activeName == 'judicialRisk' && scrollTop >= 3300 && scrollTop < 3900 ? 'active' : '',
]"
@click="handleAnchorClick(7)"
>
法院公告
</div>
<div
:class="['anchor-box-item', activeName == 'judicialRisk' && scrollTop >= 3900 ? 'active' : '']"
@click="handleAnchorClick(8)"
>
破产重组
</div>
<div class="left-line">
<div :class="['left-line1', activeName == 'judicialRisk' && scrollTop < 400 ? 'active' : '']"></div>
<div
:class="[
'left-line2',
activeName == 'judicialRisk' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line3',
activeName == 'judicialRisk' && scrollTop >= 900 && scrollTop < 1500 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line4',
activeName == 'judicialRisk' && scrollTop >= 1500 && scrollTop < 2100 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line5',
activeName == 'judicialRisk' && scrollTop >= 2100 && scrollTop < 2700 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line6',
activeName == 'judicialRisk' && scrollTop >= 2700 && scrollTop < 3300 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line7',
activeName == 'judicialRisk' && scrollTop >= 3300 && scrollTop < 3900 ? 'active' : '',
]"
></div>
<div :class="['left-line8', activeName == 'judicialRisk' && scrollTop >= 3900 ? 'active' : '']"></div>
</div>
</div>
<div class="anchor-box-bottom" @click="handleBackTop">
<img src="~@/assets/images/public/icon-backtop.png" alt="" />
返回顶部
</div>
</div>
</JudicialRisk>
</template>
<template v-else-if="activeName == 'businessRisk'">
<BusinessRisk>
<div class="anchor-box">
<div class="anchor-box-top">
<div>经营风险</div>
<div
:class="['anchor-box-item', activeName == 'businessRisk' && scrollTop < 400 ? 'active' : '']"
@click="handleAnchorClick(1)"
>
经营异常
</div>
<div
:class="[
'anchor-box-item',
activeName == 'businessRisk' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
@click="handleAnchorClick(2)"
>
行政处罚
</div>
<div
:class="['anchor-box-item', activeName == 'businessRisk' && scrollTop >= 900 ? 'active' : '']"
@click="handleAnchorClick(3)"
>
股权质押
</div>
<div class="left-line">
<div :class="['left-line1', activeName == 'businessRisk' && scrollTop < 400 ? 'active' : '']"></div>
<div
:class="[
'left-line2',
activeName == 'businessRisk' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
></div>
<div :class="['left-line3', activeName == 'businessRisk' && scrollTop >= 900 ? 'active' : '']"></div>
</div>
</div>
<div class="anchor-box-bottom" @click="handleBackTop">
<img src="~@/assets/images/public/icon-backtop.png" alt="" />
返回顶部
</div>
</div>
</BusinessRisk>
</template>
<template v-else-if="activeName == 'intellectualProperty'">
<IntellectualProperty>
<div class="anchor-box">
<div class="anchor-box-top">
<div>知识产权</div>
<div
:class="['anchor-box-item', activeName == 'intellectualProperty' && scrollTop < 400 ? 'active' : '']"
@click="handleAnchorClick(1)"
>
专利信息
</div>
<div
:class="[
'anchor-box-item',
activeName == 'intellectualProperty' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
@click="handleAnchorClick(2)"
>
商标信息
</div>
<div
:class="[
'anchor-box-item',
activeName == 'intellectualProperty' && scrollTop >= 900 && scrollTop < 1500 ? 'active' : '',
]"
@click="handleAnchorClick(3)"
>
软件著作权
</div>
<div
:class="[
'anchor-box-item',
activeName == 'intellectualProperty' && scrollTop >= 1500 && scrollTop < 2100 ? 'active' : '',
]"
@click="handleAnchorClick(4)"
>
作品著作权
</div>
<div
:class="[
'anchor-box-item',
activeName == 'intellectualProperty' && scrollTop >= 2100 ? 'active' : '',
]"
@click="handleAnchorClick(5)"
>
备案网站
</div>
<div class="left-line">
<div
:class="['left-line1', activeName == 'intellectualProperty' && scrollTop < 400 ? 'active' : '']"
></div>
<div
:class="[
'left-line2',
activeName == 'intellectualProperty' && scrollTop >= 400 && scrollTop < 900 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line3',
activeName == 'intellectualProperty' && scrollTop >= 900 && scrollTop < 1500 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line4',
activeName == 'intellectualProperty' && scrollTop >= 1500 && scrollTop < 2100 ? 'active' : '',
]"
></div>
<div
:class="['left-line5', activeName == 'intellectualProperty' && scrollTop >= 2100 ? 'active' : '']"
></div>
</div>
</div>
<div class="anchor-box-bottom" @click="handleBackTop">
<img src="~@/assets/images/public/icon-backtop.png" alt="" />
返回顶部
</div>
</div>
</IntellectualProperty>
</template>
<template v-else-if="activeName == 'developmentTrendAnalysis'">
<DevelopmentTrendAnalysis ref="DevelopmentTrendAnalysisRef">
<div class="anchor-box">
<div class="anchor-box-top">
<div>发展趋势分析</div>
<div
:class="[
'anchor-box-item',
activeName == 'developmentTrendAnalysis' && scrollTop < 600 ? 'active' : '',
]"
@click="handleAnchorClick(1)"
>
创新能力
</div>
<div
:class="[
'anchor-box-item',
activeName == 'developmentTrendAnalysis' && scrollTop >= 600 && scrollTop < 1400 ? 'active' : '',
]"
@click="handleAnchorClick(2)"
>
投融资
</div>
<div
:class="[
'anchor-box-item',
activeName == 'developmentTrendAnalysis' && scrollTop >= 1400 ? 'active' : '',
]"
@click="handleAnchorClick(3)"
>
盈利能力
</div>
<div class="left-line">
<div
:class="['left-line1', activeName == 'developmentTrendAnalysis' && scrollTop < 600 ? 'active' : '']"
></div>
<div
:class="[
'left-line2',
activeName == 'developmentTrendAnalysis' && scrollTop >= 600 && scrollTop < 1400 ? 'active' : '',
]"
></div>
<div
:class="[
'left-line3',
activeName == 'developmentTrendAnalysis' && scrollTop >= 1400 ? 'active' : '',
]"
></div>
</div>
</div>
<div class="anchor-box-bottom" @click="handleBackTop">
<img src="~@/assets/images/public/icon-backtop.png" alt="" />
返回顶部
</div>
</div>
</DevelopmentTrendAnalysis>
</template>
</div>
</div>
</div>
</template>
<script>
import china from "@map/china";
import API from "@/api/details";
import iconPng from "@images/public/icon-location.png";
import RelationGraph from "relation-graph";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import ComprehensiveAbilityEvaluation from "./enterpriseModules/ComprehensiveAbilityEvaluation.vue";
import BasicInformation from "./enterpriseModules/BasicInformation.vue";
import DevelopmentTrendAnalysis from "./enterpriseModules/DevelopmentTrendAnalysis.vue";
import BusinessInformation from "./enterpriseModules/BusinessInformation.vue";
import JudicialRisk from "./enterpriseModules/JudicialRisk.vue";
import IntellectualProperty from "./enterpriseModules/IntellectualProperty.vue";
import BusinessRisk from "./enterpriseModules/BusinessRisk.vue";
export default {
data() {
return {
activeName: "businessInformation",
activeName: "comprehensiveAbilityEvaluation",
ComprehensiveAbilityEvaluationRef: null, //综合能力评价组件ref
DevelopmentTrendAnalysisRef: null, //发展趋势分析组件ref
activeMenu: "",
type: "",
tabContainerRef: "",
// 图谱
graphOptions: {
backgrounImage: "",
......@@ -515,11 +863,49 @@ export default {
loading9: true,
chartMap: null,
init: false,
tabTitleList: [
{
label: "综合能力评价",
key: "comprehensiveAbilityEvaluation",
},
{
label: "基本信息",
key: "basicInformation",
},
{
label: "经营信息",
key: "businessInformation",
},
{
label: "司法风险",
key: "judicialRisk",
},
{
label: "经营风险",
key: "businessRisk",
},
{
label: "知识产权",
key: "intellectualProperty",
},
{
label: "发展趋势分析",
key: "developmentTrendAnalysis",
},
],
scrollTop: 0,
};
},
components: {
RelationGraph,
BaiduMap,
ComprehensiveAbilityEvaluation,
BasicInformation,
DevelopmentTrendAnalysis,
BusinessInformation,
JudicialRisk,
IntellectualProperty,
BusinessRisk,
},
mounted() {
this.id = this.$route.params.id;
......@@ -531,13 +917,110 @@ export default {
// this.showSeeksGraph();
},
methods: {
onScroll(event) {
this.scrollTop = event.target.scrollTop;
},
handleBackTop() {
this.$nextTick(() => {
this.$refs.tabContainerRef.scrollTop = 0;
});
},
handleAnchorClick(e) {
if (this.activeName == "comprehensiveAbilityEvaluation") {
if (e == 1) {
this.$refs.tabContainerRef.scrollTop = 0;
} else if (e == 2) {
this.$refs.tabContainerRef.scrollTop = 230 * (e - 1);
}
} else if (this.activeName == "basicInformation") {
if (e == 1) {
this.$refs.tabContainerRef.scrollTop = 0;
} else if (e == 2) {
this.$refs.tabContainerRef.scrollTop = 230;
} else if (e == 3) {
this.$refs.tabContainerRef.scrollTop = 800;
} else {
this.$refs.tabContainerRef.scrollTop = (e - 3) * 600 + 800;
}
} else if (this.activeName == "developmentTrendAnalysis") {
if (e == 1) {
this.$refs.tabContainerRef.scrollTop = 0;
} else if (e == 2) {
this.$refs.tabContainerRef.scrollTop = 600;
} else {
this.$refs.tabContainerRef.scrollTop = 1400;
}
} else if (this.activeName == "businessRisk") {
if (e == 1) {
this.$refs.tabContainerRef.scrollTop = 0;
} else if (e == 2) {
this.$refs.tabContainerRef.scrollTop = 400;
} else {
this.$refs.tabContainerRef.scrollTop = 900;
}
} else if (this.activeName == "intellectualProperty") {
if (e == 1) {
this.$refs.tabContainerRef.scrollTop = 0;
} else if (e == 2) {
this.$refs.tabContainerRef.scrollTop = 400;
} else if (e == 3) {
this.$refs.tabContainerRef.scrollTop = 900;
} else if (e == 4) {
this.$refs.tabContainerRef.scrollTop = 1500;
} else {
this.$refs.tabContainerRef.scrollTop = 2100;
}
} else if (this.activeName == "judicialRisk") {
if (e == 1) {
this.$refs.tabContainerRef.scrollTop = 0;
} else if (e == 2) {
this.$refs.tabContainerRef.scrollTop = 400;
} else if (e == 3) {
this.$refs.tabContainerRef.scrollTop = 900;
} else {
this.$refs.tabContainerRef.scrollTop = (e - 3) * 600 + 1100;
}
} else {
if (e == 1) {
this.$refs.tabContainerRef.scrollTop = 0;
} else if (e == 2) {
this.$refs.tabContainerRef.scrollTop = 400;
} else if (e == 3) {
this.$refs.tabContainerRef.scrollTop = 1100;
} else {
this.$refs.tabContainerRef.scrollTop = (e - 3) * 600 + 1100;
}
}
},
handleTabClick(key) {
if (this.activeName != key) {
//销毁echarts实例
if (this.activeName == "comprehensiveAbilityEvaluation") {
this.$refs.ComprehensiveAbilityEvaluationRef.disposeEnterpriseEvaluation();
} else if (this.activeName == "developmentTrendAnalysis") {
this.$refs.DevelopmentTrendAnalysisRef.disposeDevelopmentTrendAnalysis();
}
this.activeName = key;
if (key == "comprehensiveAbilityEvaluation") {
this.$nextTick(() => {
this.$refs.ComprehensiveAbilityEvaluationRef.initEcharts();
});
} else if (key == "developmentTrendAnalysis") {
this.$nextTick(() => {
this.$refs.DevelopmentTrendAnalysisRef.initDevelopmentTrendAnalysis();
});
}
this.$nextTick(() => {
this.$refs.tabContainerRef.scrollTop = 0;
});
}
},
async changeCollect() {
let res = await API.EnterpriseCollect({
id: this.info.id,
collect: Number(this.info.collect),
choice: Number(this.info.choice),
});
console.log(res);
if (res.code == 0) {
this.info.collect = res.collect;
this.info = this.info;
......@@ -589,8 +1072,8 @@ export default {
if (res.success == 0 && res.data.code != 0) {
} else {
this.info = res;
this.getFindZero(this.info.name);
this.getMap(this.info.name);
// this.getFindZero(this.info.name);
// this.getMap(this.info.name);
this.GetEnterpriseLicence(id, "enterprise");
this.GetEnterpriseTaxInfo(id, "enterprise");
this.GetEnterpriseInoutInfo(id, "enterprise");
......@@ -606,7 +1089,6 @@ export default {
// 行政许可
async GetEnterpriseLicence(id, type) {
let res = await API.GetEnterpriseLicence(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label1 = [];
} else {
......@@ -617,7 +1099,6 @@ export default {
// 税务信用
async GetEnterpriseTaxInfo(id, type) {
let res = await API.GetEnterpriseTaxInfo(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label2 = [];
} else {
......@@ -628,7 +1109,6 @@ export default {
// 进出口信用
async GetEnterpriseInoutInfo(id, type) {
let res = await API.GetEnterpriseInoutInfo(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label3 = [];
} else {
......@@ -639,7 +1119,6 @@ export default {
// 供应商
async GetEnterpriseSupplier(id, type) {
let res = await API.GetEnterpriseSupplier(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label4 = [];
} else {
......@@ -650,7 +1129,6 @@ export default {
// 客户
async GetEnterpriseClient(id, type) {
let res = await API.GetEnterpriseClient(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label5 = [];
} else {
......@@ -661,7 +1139,6 @@ export default {
// 股权出质
async GetEnterpriseEquity(id, type) {
let res = await API.GetEnterpriseEquity(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label6 = [];
} else {
......@@ -672,7 +1149,6 @@ export default {
// 行政处罚
async GetEnterprisePunish(id, type) {
let res = await API.GetEnterprisePunish(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label7 = [];
} else {
......@@ -683,7 +1159,6 @@ export default {
// 资质证书
async GetEnterpriseCertificate(id, type) {
let res = await API.GetEnterpriseCertificate(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label8 = [];
} else {
......@@ -694,7 +1169,6 @@ export default {
// 专利信息
async GetEnterprisePatent(id, type) {
let res = await API.GetEnterprisePatent(id, type);
console.log(res);
if (res.success == 0 && res.data.code != 0) {
this.select2_info_label9 = [];
} else {
......@@ -713,7 +1187,6 @@ export default {
let res = await API.Map({
company_name,
});
// console.log(res);
this.mapData = res;
this.upDataChart();
},
......@@ -723,7 +1196,6 @@ export default {
// item.data = item;
// return item;
// });
console.log(__graph_json_data);
seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
seeksRelationGraph.refresh();
......@@ -733,15 +1205,12 @@ export default {
if (!nodeObject.data.isClick) {
nodeObject.data.isClick = 1;
} else if (nodeObject.data.isClick == 1) {
console.log("点击过了");
return false;
}
console.log(nodeObject);
let res = await API.FindNext({
category: nodeObject.data.category,
name: nodeObject.data.real_name,
});
console.log(res);
const seeksRelationGraph = this.$refs.seeksRelationGraph;
seeksRelationGraph.appendJsonData(res, (seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
......@@ -964,40 +1433,7 @@ export default {
},
],
};
// let options2 = {
// series: [
// {
// data: [
// [
// {
// coord: ["116.2", "39.56"],
// name: "北京",
// },
// {
// coord: ["30.29", "50.28"],
// name: "乌克兰征兵集合点",
// },
// ],
// ],
// },
// {
// data: [
// {
// name: "北京",
// value: ["116.2", "39.56"],
// },
// ],
// },
// {
// data: [
// {
// name: "乌克兰征兵集合点",
// value: ["30.29", "50.28"],
// },
// ],
// },
// ],
// };
this.chartMap.setOption(options);
},
},
......@@ -1026,13 +1462,407 @@ export default {
.header {
box-sizing: border-box;
width: 100%;
height: 260px;
background: url("~@images/public/bg-company.png") no-repeat center;
padding: 0 210px;
height: 360px;
background: url("~@images/public/bg-qyhx.png") no-repeat center;
padding: 0 260px;
.header-top {
display: flex;
justify-content: space-between;
.header-top-title {
margin-top: 20px;
height: 50px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 40px;
color: #ffffff;
text-align: left;
margin-right: 20px;
}
.header-top-status {
margin-top: 26px;
padding: 7px 20px;
border-radius: 7px;
opacity: 0.9;
font-family: Microsoft YaHei, Microsoft YaHei;
height: 32px;
font-weight: bold;
font-size: 14px;
color: #ffffff;
background: rgba(252, 170, 11, 0.8);
margin-right: 20px;
box-sizing: border-box;
}
.header-top-estate {
padding: 7px 20px;
height: 32px;
margin-top: 26px;
font-weight: 400;
font-size: 14px;
color: #ffffff;
text-align: left;
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
margin-right: 20px;
box-sizing: border-box;
}
.header-top-collect {
margin-top: 26px;
padding: 6px 20px;
background: rgba(255, 255, 255, 0.4);
border-radius: 8px;
height: 32px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #ffffff;
box-sizing: border-box;
}
.goBack {
height: 32px;
box-sizing: border-box;
margin-top: 20px;
background: #ffffff;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
border-radius: 2px 2px 2px 2px;
border: 1px solid #ffffff;
padding: 5px 10px;
font-family: Microsoft YaHei, Microsoft YaHei;
color: #1a202c;
text-align: center;
font-style: normal;
font-size: 14px;
&:hover {
cursor: pointer;
}
}
}
.header-aptitude {
display: flex;
margin-top: 20px;
.aptitude-item {
padding: 6px 20px;
height: 30px;
box-sizing: border-box;
border-radius: 8px 8px 8px 8px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #ffffff;
margin-right: 10px;
}
.aptitude-green {
background: rgba(0, 208, 151, 0.7);
}
.aptitude-blue {
background: rgba(0, 117, 255, 0.6);
}
.aptitude-sky-blue {
background: rgba(0, 196, 208, 0.6);
}
}
.header-info {
display: flex;
margin-top: 20px;
.header-info-position {
height: 40px;
display: flex;
align-items: center;
padding-right: 20px;
margin-left: 20px;
border-right: 1px solid rgba(255, 255, 255, 0.6);
.left {
font-weight: 400;
font-size: 18px;
color: #ffffff;
opacity: 0.6;
margin-right: 13px;
}
.right {
font-size: 18px;
color: #ffffff;
}
}
.header-info-position.none-left {
margin-left: 0;
}
.header-info-position.none-right {
border-right: none;
}
}
.header-bottom {
display: flex;
margin-top: 10px;
height: 140px;
.header-bottom-left {
width: 878px;
height: 140px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px 10px 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.6);
margin-right: 30px;
padding: 20px 30px;
box-sizing: border-box;
.header-bottom-left-name {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #ffffff;
opacity: 0.6;
margin-left: 10px;
}
.header-bottom-left-content {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #ffffff;
margin-right: 16px;
}
}
.header-bottom-center {
width: 230px;
height: 140px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px 10px 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.6);
margin-right: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.header-bottom-right {
width: 230px;
height: 140px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px 10px 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.6);
margin-right: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.mark {
margin-top: 18px;
font-family: Helvetica Neue, Helvetica Neue;
font-weight: bold;
font-size: 50px;
font-style: normal;
text-align: center;
height: 76px;
line-height: 76px;
width: 84px;
color: transparent; /* 文本颜色设为透明 */
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 30%,
rgba(255, 150, 91, 1)
); /* 渐变从红色到蓝色 */
-webkit-background-clip: text;
background-clip: text;
}
.text {
font-family: Microsoft YaHei, Microsoft YaHei;
font-size: 20px;
font-weight: bold;
color: #ffffff;
text-shadow: 0px 2px 2px #001d4a;
width: 100%;
height: 30px;
}
}
}
.main_body {
height: calc(100% - 360px);
overflow-y: scroll;
width: 100%;
height: calc(100% - 260px);
background: #ebebeb;
.tab-bar {
height: 68px;
background: #ffffff;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
display: flex;
box-sizing: border-box;
padding-left: 260px;
align-items: center;
position: sticky;
z-index: 99;
top: 0;
.tab-title {
font-family: Microsoft YaHei, Microsoft YaHei;
height: 24px;
// width: 120px;
font-weight: 400;
font-size: 16px;
color: #999999;
line-height: 24px;
text-align: center;
font-style: normal;
position: relative;
margin-right: 60px;
&.active {
font-weight: bold;
color: #333333;
&::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(177deg, #5398ff 0%, #3563e9 93%, #3563e9 100%);
border-radius: 3px 3px 3px 3px;
}
}
&:hover {
cursor: pointer;
}
}
}
.tab-container {
margin-top: 20px;
padding-left: 260px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
.anchor-box {
margin-left: 20px;
.anchor-box-top {
position: relative;
left: 0;
top: 0;
width: 170px;
// height: 100%;
border-radius: 10px 10px 10px 10px;
padding: 40px 30px 20px 30px;
box-sizing: border-box;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
font-size: 18px;
background: #ffffff;
box-sizing: border-box;
div {
margin-bottom: 25px;
width: 108px;
text-align: center;
}
.anchor-box-item {
font-weight: 400;
font-size: 16px;
color: #666666;
cursor: pointer;
}
.anchor-box-item.active {
color: #0054df;
font-weight: bold;
}
.left-line {
width: 8px;
height: calc(100% - 130px);
position: absolute;
left: 14px;
top: 80px;
background: #f5f5f5;
div {
width: 100%;
height: 30px;
transition: all 0.5s;
background: #f5f5f5;
margin-bottom: 20px;
}
.left-line1.active {
background: #0054df;
}
.left-line2.active {
background: #0054df;
}
.left-line3.active {
background: #0054df;
}
.left-line4.active {
background: #0054df;
}
.left-line5.active {
background: #0054df;
}
.left-line6.active {
background: #0054df;
}
.left-line7.active {
background: #0054df;
}
.left-line8.active {
background: #0054df;
}
.left-line9.active {
background: #0054df;
}
.left-line10.active {
background: #0054df;
}
.left-line11.active {
background: #0054df;
}
.left-line12.active {
background: #0054df;
}
}
}
.anchor-box-bottom {
cursor: pointer;
width: 170px;
height: 70px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
justify-content: center;
display: flex;
align-items: center;
margin-top: 10px;
}
}
.base-box1,
.base-box2 {
width: 1210px;
background: #ffffff;
border-radius: 10px;
//height: 100%;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 20px;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
/deep/ .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
min-width: 140px;
}
}
}
}
}
.map_box {
......@@ -1093,16 +1923,6 @@ export default {
top: -2px;
}
}
.goBack {
margin-top: 7px;
float: right;
width: 100px;
height: 38px;
line-height: 38px;
background: #5889dc;
font-weight: 400;
opacity: 1;
}
}
.show_map {
cursor: pointer;
......@@ -1305,9 +2125,6 @@ table {
box-shadow: 0px 0px 10px #2f48c8;
}
.main .header {
padding: 0 210px;
}
.height_box {
height: 30px;
}
......@@ -1321,42 +2138,6 @@ table {
text-decoration: none;
}
}
// @media screen and (min-width: 1366px) and (max-width: 1600px) {
// .main .header {
// padding: 0 20px;
// }
// /deep/ .el-tabs .el-tabs__content {
// padding: 0px 200px 30px;
// }
// }
// @media only screen and (width: 1366px) {
// .main .header {
// padding: 0 20px;
// }
// /deep/ .el-tabs .el-tabs__content {
// padding: 0px 200px 30px;
// }
// }
// @media screen and (max-width: 1200px) {
// .main .header {
// padding: 0 20px;
// }
// .epClassify li p {
// font-size: 16px;
// }
// .epClassify li p:last-child {
// font-size: 18px;
// }
// .epClassify li {
// padding: 0 30px;
// }
// /deep/ .el-tabs__nav-scroll {
// padding-left: 30px;
// }
// /deep/ .el-tabs .el-tabs__content {
// padding: 0 30px 30px;
// }
// }
/deep/ .el-loading-mask {
right: 1px;
bottom: 1px;
......
src/views/details/enterpriseModules/BasicInformation.vue 0 → 100644
<!--
* @FileDescription: 基本信息
-->
<template>
<div style="display: flex; flex-wrap: wrap">
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>工商信息</div>
</div>
<el-descriptions style="margin-top: 20px;" :title="null" :column="3" border>
<el-descriptions-item>
<template slot="label">
统一社会信用代码
</template>
90298340820348
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
企业名称
</template>
似的减肥开始觉得很烦考试的开发环境公司
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
法定代表人
</template>
XXX
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
登记状态
</template>
在盈
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
成立日期
</template>
2002-09-09
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
注册资本
</template>
1293193.9万元
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
实缴资本
</template>
1293193.9万元
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
企业规模
</template>
大型企业
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
组织机构代码
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
工商注册号
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
企业类型
</template>
民营企业
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所属行业
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所属地区
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
经营期限
</template>
民营企业
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
人员规模
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
参保人数
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
登记机关
</template>
民营企业
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
英文名
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
曾用名
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
注册地址
</template>
似的疯狂圣诞快乐飞机上独领风骚的减肥路上的咖啡机上的弗兰克势均力敌发极乐世界富兰克林三等奖
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
经营范围
</template>
129319344
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
联系方式
</template>
129319344
</el-descriptions-item>
</el-descriptions>
</div>
<div style="position: sticky;top: 88px;"><slot></slot></div>
<div class="base-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>股东信息</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="榜单名称"> </el-table-column>
<el-table-column align="center" prop="address" label="榜单类型"> </el-table-column>
<el-table-column align="center" prop="address" label="来源"> </el-table-column>
<el-table-column align="center" prop="address" label="榜内位置"> </el-table-column>
<el-table-column align="center" prop="address" label="榜内名称"> </el-table-column>
<el-table-column align="center" prop="address" label="发布年份"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>主要人员</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="姓名"> </el-table-column>
<el-table-column align="center" prop="address" label="职位"> </el-table-column>
<el-table-column align="center" prop="address" label="持股比例"> </el-table-column>
<el-table-column align="center" prop="address" label="最终收益股份"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>分支结构</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="企业名称"> </el-table-column>
<el-table-column align="center" prop="address" label="负责人"> </el-table-column>
<el-table-column align="center" prop="address" label="地区"> </el-table-column>
<el-table-column align="center" prop="address" label="成立日期"> </el-table-column>
<el-table-column align="center" prop="address" label="状态"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>对外投资</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="被投资企业名称"> </el-table-column>
<el-table-column align="center" prop="address" label="状态"> </el-table-column>
<el-table-column align="center" prop="address" label="成立日期"> </el-table-column>
<el-table-column align="center" prop="address" label="持股比例"> </el-table-column>
<el-table-column align="center" prop="address" label="认缴出资额/持股数"> </el-table-column>
<el-table-column align="center" prop="address" label="所属地区"> </el-table-column>
<el-table-column align="center" prop="address" label="所属行业"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>融资情况</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="披露日期"> </el-table-column>
<el-table-column align="center" prop="address" label="交易金额"> </el-table-column>
<el-table-column align="center" prop="address" label="融资轮次"> </el-table-column>
<el-table-column align="center" prop="address" label="投资方"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>变更记录</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="变更日期"> </el-table-column>
<el-table-column align="center" prop="address" label="变更项目"> </el-table-column>
<el-table-column align="center" prop="address" label="变更前"> </el-table-column>
<el-table-column align="center" prop="address" label="变更后"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>财务情况</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" prop="name" label="年份"> </el-table-column>
<el-table-column align="center" prop="name" label="总资产"> </el-table-column>
<el-table-column align="center" prop="address" label="净资产"> </el-table-column>
<el-table-column align="center" prop="address" label="营业收入"> </el-table-column>
<el-table-column align="center" prop="address" label="利润总额"> </el-table-column>
<el-table-column align="center" prop="address" label="净利润"> </el-table-column>
<el-table-column align="center" prop="address" label="负债总额"> </el-table-column>
<el-table-column align="center" prop="address" label="销售总额"> </el-table-column>
<el-table-column align="center" prop="address" label="纳税总额"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage1: 1,
total1: 21,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
methods: {
handleCurrentChange1(e) {
console.log(e, "变化");
},
},
};
</script>
<style scoped lang="less">
.base-box1,
.base-box2 {
width: 1210px;
background: #ffffff;
border-radius: 10px;
//height: 100%;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 20px;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
/deep/ .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
min-width: 140px;
}
}
</style>
src/views/details/enterpriseModules/BusinessInformation.vue 0 → 100644
<!--
* @FileDescription: 经营信息
-->
<template>
<div style="display: flex;flex-wrap: wrap;">
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>客户</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="客户名称"> </el-table-column>
<el-table-column align="center" prop="address" label="销售占比"> </el-table-column>
<el-table-column align="center" prop="address" label="销售金额(元)"> </el-table-column>
<el-table-column align="center" prop="address" label="报告期/公开时间"> </el-table-column>
<el-table-column align="center" prop="address" label="数据来源"> </el-table-column>
<el-table-column align="center" prop="address" label="关联关系"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div style="position: sticky;top: 88px;"><slot></slot></div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>供应商</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="商家名称"> </el-table-column>
<el-table-column align="center" prop="address" label="采购占比"> </el-table-column>
<el-table-column align="center" prop="address" label="采购金额(元)"> </el-table-column>
<el-table-column align="center" prop="address" label="报告期/公开时间"> </el-table-column>
<el-table-column align="center" prop="address" label="数据来源"> </el-table-column>
<el-table-column align="center" prop="address" label="关联关系"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>招聘信息</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="发布日期"> </el-table-column>
<el-table-column align="center" prop="address" label="招聘职位"> </el-table-column>
<el-table-column align="center" prop="address" label="月薪"> </el-table-column>
<el-table-column align="center" prop="address" label="学历"> </el-table-column>
<el-table-column align="center" prop="address" label="经验"> </el-table-column>
<el-table-column align="center" prop="address" label="办公地点"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>招投标信息</div>
</div>
<div style="display: flex;margin:20px 0">
<div style="margin-right: 10px;padding: 4px 8px; background: #e7f1fa;color: #598be0; ">全部</div>
<div style="margin-right: 10px;padding: 4px 8px; background: #f7f7f7;">中标方3999</div>
<div style="margin-right: 10px;padding: 4px 8px; background: #f7f7f7;">投标方4000</div>
<div style="margin-right: 10px;padding: 4px 8px; background: #f7f7f7;">招采方3</div>
<div style="padding: 4px 8px; background: #f7f7f7;">被提及354</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="项目名称"> </el-table-column>
<el-table-column align="center" prop="address" label="发布日期"> </el-table-column>
<el-table-column align="center" prop="address" label="企业角色"> </el-table-column>
<el-table-column align="center" prop="address" label="招采单位"> </el-table-column>
<el-table-column align="center" prop="address" label="中标单位"> </el-table-column>
<el-table-column align="center" prop="address" label="中标金额"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>资质证书</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="发证时间"> </el-table-column>
<el-table-column align="center" prop="address" label="证书类别"> </el-table-column>
<el-table-column align="center" prop="address" label="证书号"> </el-table-column>
<el-table-column align="center" prop="address" label="截止时间"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>行政许可</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="决定文书/许可编号"> </el-table-column>
<el-table-column align="center" prop="address" label="决定文书/许可证名称"> </el-table-column>
<el-table-column align="center" prop="address" label="有效期自"> </el-table-column>
<el-table-column align="center" prop="address" label="有效期至"> </el-table-column>
<el-table-column align="center" prop="address" label="许可机关"> </el-table-column>
<el-table-column align="center" prop="address" label="许可内容"> </el-table-column>
<el-table-column align="center" prop="address" label="来源"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>税务信用</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="评价年度"> </el-table-column>
<el-table-column align="center" prop="address" label="纳税人识别号"> </el-table-column>
<el-table-column align="center" prop="address" label="纳税信用等级"> </el-table-column>
<el-table-column align="center" prop="address" label="单位评价"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>上榜榜单</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="榜单名称"> </el-table-column>
<el-table-column align="center" prop="address" label="榜单类型"> </el-table-column>
<el-table-column align="center" prop="address" label="来源"> </el-table-column>
<el-table-column align="center" prop="address" label="榜内位置"> </el-table-column>
<el-table-column align="center" prop="address" label="榜内名称"> </el-table-column>
<el-table-column align="center" prop="address" label="发布年份"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>微博</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="头像"> </el-table-column>
<el-table-column align="center" prop="address" label="微博昵称"> </el-table-column>
<el-table-column align="center" prop="address" label="简介"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>微信公众号</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="头像"> </el-table-column>
<el-table-column align="center" prop="address" label="微信公众号"> </el-table-column>
<el-table-column align="center" prop="address" label="微信号"> </el-table-column>
<el-table-column align="center" prop="address" label="二维码"> </el-table-column>
<el-table-column align="center" prop="address" label="简介"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>抖音/快手</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="抖音名称/快手名称"> </el-table-column>
<el-table-column align="center" prop="address" label="抖音号/快手号"> </el-table-column>
<el-table-column align="center" prop="address" label="简介"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage1: 1,
total1: 21,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
methods: {
handleCurrentChange1(e) {
console.log(e, "变化");
},
},
};
</script>
<style scoped lang="less">
.base-box1,
.base-box2 {
width: 1210px;
background: #ffffff;
border-radius: 10px;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 20px;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
}
</style>
src/views/details/enterpriseModules/BusinessRisk.vue 0 → 100644
<!--
* @FileDescription: 经营风险
-->
<template>
<div style="display: flex;flex-wrap: wrap">
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>经营异常</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="列入日期"> </el-table-column>
<el-table-column align="center" prop="address" label="做出决定机关(列入)"> </el-table-column>
<el-table-column align="center" prop="address" label="列入经营异常名录原因"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div style="position: sticky;top: 88px;"><slot /></div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>行政处罚</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name1" label="决定书文号"> </el-table-column>
<el-table-column align="center" prop="address" label="违法事实"> </el-table-column>
<el-table-column align="center" prop="address" label="处罚结果"> </el-table-column>
<el-table-column align="center" prop="address" label="处罚金额"> </el-table-column>
<el-table-column align="center" prop="address" label="处罚单位"> </el-table-column>
<el-table-column align="center" prop="address" label="处罚日期"> </el-table-column>
<el-table-column align="center" prop="address" label="原文"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>股权质押</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="质押人"> </el-table-column>
<el-table-column align="center" prop="address" label="质押人参股企业"> </el-table-column>
<el-table-column align="center" prop="address" label="质押权人"> </el-table-column>
<el-table-column align="center" prop="address" label="质押股份总数(股)"> </el-table-column>
<el-table-column align="center" prop="address" label="质押股份市值(元)"> </el-table-column>
<el-table-column align="center" prop="address" label="状态"> </el-table-column>
<el-table-column align="center" prop="address" label="公告日期"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage1: 1,
total1: 21,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
methods: {
handleCurrentChange1() {},
},
};
</script>
<style scoped lang="less">
.base-box1,
.base-box2 {
width: 1210px;
background: #ffffff;
border-radius: 10px;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 20px;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
}
</style>
src/views/details/enterpriseModules/ComprehensiveAbilityEvaluation.vue 0 → 100644
<!--
* @FileDescription: 综合能力评价
-->
<template>
<div style="display: flex; flex-wrap: wrap">
<div class="box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>综合能力分析</div>
</div>
<div class="echarts-box">
<div class="echarts-box1-left">
<div ref="evaluationRef" style="height: 100%; width: 100%"></div>
<div class="echarts-text-box">
<div class="echarts-text">企业综合评价:</div>
<div class="echarts-value">780</div>
</div>
</div>
<!-- <div class="echarts-box1-right">
<div ref="degreeRef" style="height: 100%; width: 100%"></div>
<div class="echarts-text-box">
<div class="echarts-text">企业招商匹配度:</div>
<div class="echarts-value" style="color: #ff0000">9</div>
</div>
</div> -->
</div>
</div>
<div style="position: sticky; top: 88px">
<slot></slot>
</div>
<div class="box2">
<div class="box2-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>分项指标分析</div>
</div>
<div class="echarts-box">
<div class="echarts-box1-left">
<div ref="analyzeRef" style="height: 100%; width: 100%"></div>
</div>
<div class="echarts-box1-right">
<div style="height: 100%; width: 590px; margin-left: 20px">
<div class="instructions" style="margin-top: 65px">
由企业纳税、就业、规模、行业资质等组成，体现企业从自身的发展质量和发展潜能等综合能力
</div>
<div class="instructions" style="margin-top: 30px">
由知识产权、科创认证等组成，重点体现企业系统性完成与创新有关各项活动的能力
</div>
<div class="instructions" style="margin-top: 20px">
由对外投资、企业融资、企业招聘等构成，主要体现企业为扩展规模而采取的人财物等方面相关行为和能力
</div>
<div class="instructions" style="margin-top: 15px">
由企业上榜、数字化转型(网站、微博、微信公众号、抖音、快手等)、市场拓展等组成，主要体现企业社会影响、转型发展的经营能力和和未来上升潜力
</div>
<div class="instructions" style="margin-top: 15px">
由工商风险、司法风险、经营风险等构成，主要体现企业对可能导致其不能实现业务目标的因素的控制能力
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
const dataList = [
{ name: "企业发展质量", value: 50 },
{ name: "风险控制能力", value: 84 },
{ name: "企业经营能力", value: 83 },
{ name: "投资扩张能力", value: 80 },
{ name: "科技创新能力", value: 61 },
];
export default {
data() {
return {
evaluationRef: null, //企业综合评价ref
evaluationInstance: null, //企业综合评价实例
evaluationOptions: {
backgroundColor: "#fff",
radar: {
axisName: {
fontSize: 12,
color: "#333",
},
indicator: dataList.map((x, i) => {
return {
name: `${x.name}`,
color: "#1D2129",
};
}),
},
series: [
{
type: "radar",
symbolSize: 0, // 标记的大小
itemStyle: {
color: "#1DB440",
},
areaStyle: {
color: "#d0ecd3",
},
data: [
{
value: dataList.map((x) => x.value),
name: "",
},
],
},
],
},
degreeRef: null, //企业招商匹配度ref
degreeInstance: null, //企业招商匹配度实例
degreeOptions: {
series: [
{
name: "test speed",
type: "gauge",
radius: "95%",
max: 10,
axisLine: {
lineStyle: {
width: 30,
color: [
[0.3, "#2d5cf6"],
[0.6, "#eebc47"],
[1, "#ea3323"],
],
},
},
pointer: {
itemStyle: {
color: "auto",
},
},
splitLine: {
distance: -30,
length: 30,
lineStyle: {
color: "#fff",
width: 4,
},
},
// splitLine: {
// show: false, // 关闭刻度间的分割线，使其看起来无缝隙
// },
axisTick: {
distance: 0,
length: 8,
lineStyle: {
color: "#fff",
width: 2,
},
},
axisLabel: {
color: "auto",
distance: 40,
fontSize: 16,
},
detail: {
fontSize: 20,
offsetCenter: [0, "70%"],
valueAnimation: true,
color: "auto",
// show: false,
},
data: [
{
value: 9,
name: "指标说明",
},
],
},
],
},
analyzeRef: null, //分项指标分析ref
analyzeInstance: null, //分项指标分析实例
analyzeOptions: {
title: {
text: "World Population",
show: false,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
show: false,
},
grid: {
left: "0%",
right: "3%",
bottom: "0%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
bottom: 10,
splitLine: {
lineStyle: {
type: "dashed",
},
},
},
yAxis: {
axisTick: {
show: false,
},
axisLine: {
show: true, // 默认为 true，如果需要显示轴线才需要设置
lineStyle: {
color: "#e4e6e9", // 这里设置为红色，你可以替换为你想要的任意颜色值
},
},
axisLabel: {
textStyle: {
color: "#1D2129", // 将此处颜色值替换为你希望的文字颜色，例如 '#333333' 表示深灰色
},
// 其他轴标签配置，例如 formatter、fontSize 等
},
type: "category",
data: ["风险控制能力", "企业经营能力", "投资扩张能力", "科技创新能力", "企业发展质量"],
},
series: [
{
name: "能力指标",
type: "bar",
data: [20, 40, 80, 100, 70],
barWidth: 20,
itemStyle: {
color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 1, color: "rgba(182, 204, 255, 1)" },
{ offset: 0, color: "rgba(22, 93, 255, 1)" },
]),
barBorderRadius: [0, 20, 20, 0],
},
label: {
show: true,
position: "right",
color: "#165DFF",
offset: [10, 0],
fontSize: 16,
},
},
],
},
};
},
mounted() {
this.$nextTick(() => {
this.initEcharts();
});
},
methods: {
initEcharts() {
this.evaluationInstance = this.$echarts.init(this.$refs.evaluationRef);
this.evaluationInstance.setOption(this.evaluationOptions);
// this.degreeInstance = this.$echarts.init(this.$refs.degreeRef);
// this.degreeInstance.setOption(this.degreeOptions);
this.analyzeInstance = this.$echarts.init(this.$refs.analyzeRef);
this.analyzeInstance.setOption(this.analyzeOptions);
},
disposeEnterpriseEvaluation() {
this.evaluationInstance.dispose();
// this.degreeInstance.dispose();
this.analyzeInstance.dispose();
},
},
};
</script>
<style scoped lang="less">
.box1 {
width: 1210px;
height: 460px;
background: #ffffff;
border-radius: 10px;
padding: 40px 30px;
box-sizing: border-box;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
.echarts-box {
width: 1000px;
height: 320px;
margin-left: 65px;
margin-top: 20px;
display: flex;
justify-content: space-between;
.echarts-box1-left,
.echarts-box1-right {
width: 100%;
height: 100%;
.echarts-text-box {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
.echarts-text {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #171b1e;
margin-right: 10px;
}
.echarts-value {
font-weight: bold;
font-size: 20px;
color: #1db440;
}
}
}
}
}
.box2 {
margin-top: 20px;
width: 1210px;
height: 486px;
background: #ffffff;
border-radius: 10px;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 40px;
.box2-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
.echarts-box {
width: 1000px;
height: 310px;
margin-left: 65px;
margin-top: 20px;
display: flex;
justify-content: space-between;
.echarts-box1-left,
.echarts-box1-right {
width: 50%;
height: 100%;
.instructions {
max-width: 590px;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #717579;
}
}
}
}
.anchor-box {
position: sticky;
top: 88px;
margin-left: 20px;
.anchor-box-top {
position: relative;
left: 0;
top: 0;
width: 170px;
// height: 100%;
border-radius: 10px 10px 10px 10px;
padding: 40px 30px 20px 30px;
box-sizing: border-box;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
font-size: 18px;
background: #ffffff;
box-sizing: border-box;
div {
margin-bottom: 25px;
width: 108px;
text-align: center;
}
.anchor-box-item {
font-weight: 400;
font-size: 16px;
color: #666666;
cursor: pointer;
}
.anchor-box-item.active {
color: #0054df;
font-weight: bold;
}
.left-line {
width: 8px;
height: calc(100% - 130px);
position: absolute;
left: 14px;
top: 80px;
background: #f5f5f5;
div {
width: 100%;
height: 30px;
transition: all 0.5s;
background: #f5f5f5;
margin-bottom: 20px;
}
.left-line1.active {
background: #0054df;
}
.left-line2.active {
background: #0054df;
}
.left-line3.active {
background: #0054df;
}
.left-line4.active {
background: #0054df;
}
.left-line5.active {
background: #0054df;
}
.left-line6.active {
background: #0054df;
}
.left-line7.active {
background: #0054df;
}
.left-line8.active {
background: #0054df;
}
.left-line9.active {
background: #0054df;
}
.left-line10.active {
background: #0054df;
}
.left-line11.active {
background: #0054df;
}
.left-line12.active {
background: #0054df;
}
}
}
.anchor-box-bottom {
cursor: pointer;
width: 170px;
height: 70px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
justify-content: center;
display: flex;
align-items: center;
margin-top: 10px;
}
}
</style>
src/views/details/enterpriseModules/DevelopmentTrendAnalysis.vue 0 → 100644
<!--
* @FileDescription: 发展趋势分析
-->
<template>
<div style="display: flex;flex-wrap: wrap">
<div class="develop-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>创新能力</div>
</div>
<div class="develop-echarts1">
<div class="echarts-title">知识产权数量变化</div>
<div class="develop-echarts-box">
<div ref="quantityChangeRef" style="height: 100%;width: 100%;" />
</div>
</div>
<div class="develop-echarts2">
<div class="echarts-title">知识产权数量占比变化</div>
<div class="develop-echarts-box">
<div ref="proportionChangeRef" style="height: 100%;width: 100%;" />
</div>
</div>
</div>
<div style="position: sticky;top: 88px;"><slot></slot></div>
<div class="develop-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>投融资</div>
</div>
<div class="four-echarts">
<div class="four-echarts-item">
<div class="four-echarts-item-title">
投资地区分布
</div>
<div style="height: calc(100% - 44px);width: 100%;display: flex;flex-wrap: nowrap;">
<div ref="regionalDistributionMapRef" style="width: 60%;height: 100%;"></div>
<div ref="regionalDistributionBarRef" style="width: 40%;height: 100%;"></div>
</div>
</div>
<div class="four-echarts-item">
<div class="four-echarts-item-title">
投资行业分布
</div>
<div ref="industryDistributionRef" style="height: calc(100% - 44px);width: 100%;"></div>
</div>
<div class="four-echarts-item">
<div class="four-echarts-item-title">
投资时间分布
</div>
<div ref="timeDistributionRef" style="height: calc(100% - 44px);width: 100%;"></div>
</div>
<div class="four-echarts-item">
<div class="four-echarts-item-title">
融资时间分布
</div>
<div ref="financingTimeDistributionRef" style="height: calc(100% - 44px);width: 100%;"></div>
</div>
</div>
</div>
<div class="develop-box2">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>盈利能力</div>
</div>
<div class="profitability-box">
<div class="profitability-box-title">盈利能力</div>
<div ref="profitabilityRef" style="width: 1130px;height: 230px;"></div>
</div>
</div>
</div>
</template>
<script>
const ydata = [
{
name: "房地产业",
value: 18,
},
{
name: "制造业",
value: 18,
},
{
name: "金融业",
value: 18,
},
{
name: "卫生和社会工作",
value: 18,
},
{
name: "租赁和商务服务业",
value: 18,
},
{
name: "批发和零售业",
value: 18,
},
{
name: "科学研究和技术服务业",
value: 18,
},
];
const color = ["#ef8432", "#2d5cf6", "#5dc6c7", "#eebc47", "#6a32c9", "#4f8ff2", "#c733d2"];
import china from "@map/china";
export default {
data() {
return {
quantityChangeRef: null, //知识产权数量变化ref
quantityChangeInstance: null, //知识产权数量变化实例
quantityChangeOptions: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
data: ["专利", "专利(同比)", "商标", "商标(同比)", "软著", "软著(同比)"],
},
grid: {
top: "15%",
left: "2%",
right: "0%",
bottom: "0%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisPointer: {
type: "shadow",
},
},
],
yAxis: [
{
type: "value",
name: "专利数量(件)",
min: 0,
interval: 50,
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "同比(%)",
min: 0,
interval: 5,
axisLabel: {
formatter: "{value}%",
},
},
],
series: [
{
name: "专利",
type: "bar",
tooltip: {
valueFormatter: function(value) {
return value + " ml";
},
},
itemStyle: {
color: "#377edb", // 这里设置为红色，你可以根据需要设置为其他颜色
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
},
{
name: "专利(同比)",
type: "line",
showSymbol: false,
smooth: true,
yAxisIndex: 1,
itemStyle: {
color: "#377edb", // 这里设置为红色，你可以根据需要设置为其他颜色
},
tooltip: {
valueFormatter: function(value) {
return value + " °C";
},
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
},
{
name: "商标",
type: "bar",
itemStyle: {
color: "#eaa944", // 这里设置为红色，你可以根据需要设置为其他颜色
},
tooltip: {
valueFormatter: function(value) {
return value + " ml";
},
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: "商标(同比)",
type: "line",
yAxisIndex: 1,
showSymbol: false,
smooth: true,
itemStyle: {
color: "#eaa944", // 这里设置为红色，你可以根据需要设置为其他颜色
},
tooltip: {
valueFormatter: function(value) {
return value;
},
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 8, 32],
},
{
name: "软著",
type: "bar",
tooltip: {
valueFormatter: function(value) {
return value + " ml";
},
},
itemStyle: {
color: "#a7a7a7", // 这里设置为红色，你可以根据需要设置为其他颜色
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
},
{
name: "软著(同比)",
type: "line",
showSymbol: false,
smooth: true,
yAxisIndex: 1,
itemStyle: {
color: "#a7a7a7", // 这里设置为红色，你可以根据需要设置为其他颜色
},
tooltip: {
valueFormatter: function(value) {
return value + " °C";
},
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
},
],
},
proportionChangeRef: null, //数量占比变化ref
proportionChangeInstance: null, //数量占比变化实例
proportionChangeOptions: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
show: true,
},
grid: {
top: "15%",
left: "2%",
right: "0%",
bottom: "0%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value} %",
},
},
],
series: [
{
name: "专利",
type: "bar",
stack: "Ad",
itemStyle: {
color: "#377edb",
},
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "商标",
type: "bar",
stack: "Ad",
itemStyle: {
color: "#eaa944",
},
emphasis: {
focus: "series",
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "软件著作权",
type: "bar",
stack: "Ad",
itemStyle: {
color: "#a7a7a7",
},
emphasis: {
focus: "series",
},
data: [150, 232, 201, 154, 190, 330, 410],
},
],
},
regionalDistributionBarRef: null, //投资地区分布柱状图
regionalDistributionBarInstance: null, //投资地区分布柱状图实例
regionalDistributionBarOptions: {
title: {
text: "World Population",
show: false,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
show: false,
},
grid: {
left: "0%",
right: "3%",
bottom: "0%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
bottom: 10,
splitLine: {
lineStyle: {
type: "dashed",
},
},
},
yAxis: {
axisTick: {
show: false,
},
axisLine: {
show: true, // 默认为 true，如果需要显示轴线才需要设置
lineStyle: {
color: "#e4e6e9", // 这里设置为红色，你可以替换为你想要的任意颜色值
},
},
axisLabel: {
textStyle: {
color: "#1D2129", // 将此处颜色值替换为你希望的文字颜色，例如 '#333333' 表示深灰色
},
// 其他轴标签配置，例如 formatter、fontSize 等
},
type: "category",
data: ["江苏", "上海", "四川", "北京", "福建", "天津", "山东"],
},
series: [
{
name: "能力指标",
type: "bar",
data: [18, 5, 3, 2, 2, 1, 1],
barWidth: 20,
itemStyle: {
color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 1, color: "rgba(182, 204, 255, 1)" },
{ offset: 0, color: "rgba(22, 93, 255, 1)" },
]),
barBorderRadius: [0, 20, 20, 0],
},
label: {
show: true,
position: "right",
color: "#165DFF",
offset: [0, 0],
fontSize: 14,
},
},
],
},
regionalDistributionMapRef: null, //投资地区分布热力图
regionalDistributionMapInstance: null, //投资地区分布热力图
regionalDistributionMapOptions: {
color: ["#05C3F9"],
tooltip: {
trigger: "item",
position: "bottom",
formatter: function(params) {
return `${params.name}: ${params.value ? params.value : 0}`;
},
},
visualMap: {
type: "continuous",
show: true,
min: 0,
max: 18,
left: "2%",
top: "bottom",
calculable: true,
// color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
inRange: {
color: ["#ed8380", "#b2261a"], // 蓝绿
},
orient: "horizontal",
},
geo: {
type: "map",
map: "china",
// label: {
// show: true,
// color: "#333",
// },
roam: false,
itemStyle: {
areaColor: "#f3f3f3",
borderColor: "#e4e4e4",
},
emphasis: {
itemStyle: {
color: "#ef8784",
borderColor: "#e4e4e4",
},
},
select: {
itemStyle: {
color: "#ef8784",
},
label: {
show: true,
color: "#333",
},
},
top: "8%",
bottom: "2%",
zoom: 0.8,
scaleLimit: {
min: 0.5,
max: 3,
},
},
series: [
{
type: "map",
mapType: "china",
geoIndex: 0,
selectable: false,
scaleLimit: {
min: 0.5,
max: 3,
},
animation: false,
layoutCenter: ["50%", "50%"],
layoutSize: "100%",
data: [
{ name: "江苏", value: 18 },
{ name: "上海", value: 5 },
{ name: "四川", value: 3 },
{ name: "北京", value: 2 },
{ name: "福建", value: 2 },
{ name: "天津", value: 1 },
{ name: "山东", value: 1 },
],
},
{
type: "effectScatter",
coordinateSystem: "geo",
colorBy: "data",
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: "render",
rippleEffect: {
color: "#05C3F9",
brushType: "stroke",
},
label: {
show: false,
formatter: "{b}",
position: "right",
color: "#05C3F9",
fontSize: 16,
},
itemStyle: {
color: "#05C3F9",
shadowBlur: 10,
shadowColor: "#05C3F9",
},
select: {
itemStyle: {
color: "#05C3F9",
},
label: {
show: true,
color: "#05C3F9",
},
},
emphasis: {
label: {
show: true,
color: "#05C3F9",
},
itemStyle: {
color: "#05C3F9",
shadowBlur: 10,
shadowColor: " #05C3F9",
},
},
selectedMode: "single",
zlevel: 1,
},
],
},
industryDistributionRef: null, //投资行业分布ref
industryDistributionInstance: null, //投资行业分布实例
industryDistributionOptions: {
backgroundColor: "rgba(255,255,255,1)",
color: color,
tooltip: {
trigger: "item",
},
legend: {
show: false,
},
grid: {
containLabel: true,
left: "50%",
},
series: [
{
type: "pie",
clockwise: false, // 饼图的扇区是否是顺时针排布
minAngle: 2, // 最小的扇区角度（0 ~ 360）
radius: ["50%", "70%"],
center: ["50%", "50%"],
avoidLabelOverlap: true,
label: {
fontSize: 16,
fontWeight: "bold",
normal: {
show: true,
position: "outside",
formatter: "{b}: {d}%",
color: "inherit",
// rich: {
// text: {
// color: "#666",
// fontSize: 14,
// align: "center",
// verticalAlign: "middle",
// padding: 8,
// },
// value: {
// color: "#8693F3",
// fontSize: 24,
// align: "center",
// verticalAlign: "middle",
// },
// },
},
emphasis: {
show: true,
textStyle: {
fontSize: 24,
},
},
},
padAngle: 0,
data: ydata,
},
],
},
timeDistributionRef: null, //投资时间分布ref
timeDistributionInstance: null, //投资时间分布实例
timeDistributionOptions: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["2018", "2019", "2020", "2021", "2022", "2023", "2024"],
axisTick: {
show: false,
alignWithLabel: true,
},
axisLine: {
show: true,
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
],
series: [
{
name: "投资时间",
type: "bar",
barWidth: "20",
data: [20, 52, 200, 334, 390, 330, 220],
itemStyle: {
borderRadius: [100, 100, 0, 0],
},
},
],
},
financingTimeDistributionRef: null, //融资时间ref
financingTimeDistributionInstance: null, //融资时间ref
financingTimeDistributionOptions: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["2018", "2019", "2020", "2021", "2022", "2023", "2024"],
axisTick: {
show: false,
alignWithLabel: true,
},
axisLine: {
show: true,
},
},
],
yAxis: [
{
name: "万元",
type: "value",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
],
series: [
{
name: "融资时间",
type: "bar",
barWidth: "20",
data: [20, 52, 200, 334, 390, 330, 220],
itemStyle: {
borderRadius: [100, 100, 0, 0],
color: "#ef8c3a",
},
},
],
},
profitabilityRef: null, //盈利能力
profitabilityInstance: null, //盈利能力
profitabilityOptions: {
tooltip: {
trigger: "axis",
},
legend: {
data: ["营业收入(同比)", "利润总额(同比)", "资产总额(同比)"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["2019", "2020", "2021", "2022", "2023", "2024"],
axisTick: {
show: false, // 关闭x轴刻度线
},
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}%", // 在每个y轴刻度标签后面添加百分号
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
},
series: [
{
name: "营业收入(同比)",
type: "line",
stack: "Total",
data: [10, 16, 18, 40, 76, 45],
itemStyle: {
color: "#4589de",
},
smooth: true,
},
{
name: "利润总额(同比)",
type: "line",
stack: "Total",
data: [43, 65, 23, 43, 52, 11],
itemStyle: {
color: "#dba746",
},
smooth: true,
},
{
name: "资产总额(同比)",
type: "line",
stack: "Total",
data: [44, 76, 89, 24, 15, 76],
itemStyle: {
color: "#b6b6b6",
},
smooth: true,
},
],
},
};
},
methods: {
/**
* 初始化发展趋势分析 */
initDevelopmentTrendAnalysis() {
this.$nextTick(() => {
this.quantityChangeInstance = this.$echarts.init(this.$refs.quantityChangeRef);
this.quantityChangeInstance.setOption(this.quantityChangeOptions);
this.proportionChangeInstance = this.$echarts.init(this.$refs.proportionChangeRef);
this.proportionChangeInstance.setOption(this.proportionChangeOptions);
//
this.initMap();
// 投资地区柱状图
this.regionalDistributionBarInstance = this.$echarts.init(this.$refs.regionalDistributionBarRef);
this.regionalDistributionBarInstance.setOption(this.regionalDistributionBarOptions);
// 行业分布
this.industryDistributionInstance = this.$echarts.init(this.$refs.industryDistributionRef);
this.industryDistributionInstance.setOption(this.industryDistributionOptions);
// 投资时间分布
this.timeDistributionInstance = this.$echarts.init(this.$refs.timeDistributionRef);
this.timeDistributionInstance.setOption(this.timeDistributionOptions);
// 融资时间分布
this.financingTimeDistributionInstance = this.$echarts.init(this.$refs.financingTimeDistributionRef);
this.financingTimeDistributionInstance.setOption(this.financingTimeDistributionOptions);
// 盈利能力
this.profitabilityInstance = this.$echarts.init(this.$refs.profitabilityRef);
this.profitabilityInstance.setOption(this.profitabilityOptions);
});
},
initMap() {
this.regionalDistributionMapInstance = this.$echarts.init(this.$refs.regionalDistributionMapRef);
this.$echarts.registerMap("china", china);
this.regionalDistributionMapInstance.setOption(this.regionalDistributionMapOptions);
},
/**
*销毁发展趋势分析 */
disposeDevelopmentTrendAnalysis() {
this.quantityChangeInstance.dispose();
this.proportionChangeInstance.dispose();
this.industryDistributionInstance.dispose();
this.timeDistributionInstance.dispose();
this.financingTimeDistributionInstance.dispose();
this.regionalDistributionBarInstance.dispose();
this.regionalDistributionMapInstance.dispose();
this.profitabilityInstance.dispose();
},
},
};
</script>
<style scoped lang="less">
.develop-box1,
.develop-box2 {
width: 1210px;
background: #ffffff;
border-radius: 10px;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 20px;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
.develop-echarts1,
.develop-echarts2 {
margin-top: 20px;
width: 1150px;
height: 330px;
box-sizing: border-box;
border-radius: 10px 10px 10px 10px;
border: 1px solid #e5e5e5;
margin-bottom: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
.echarts-title {
height: 20px;
margin: 24px 0;
font-weight: bold;
font-size: 16px;
color: #1a202c;
}
.develop-echarts-box {
width: 1113px;
height: 232px;
}
}
.four-echarts {
width: 1150px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.four-echarts-item {
margin-top: 20px;
width: 565px;
height: 360px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #e5e5e5;
.four-echarts-item-title {
font-weight: bold;
font-size: 16px;
color: #1a202c;
height: 20px;
margin-top: 20px;
margin-left: 235px;
}
}
}
.profitability-box {
width: 1150px;
height: 331px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #e5e5e5;
margin-top: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
.profitability-box-title {
margin: 20px 0;
font-weight: bold;
font-size: 16px;
color: #1a202c;
height: 20px;
}
}
}
</style>
src/views/details/enterpriseModules/IntellectualProperty.vue 0 → 100644
<!--
* @FileDescription: 知识产权
-->
<template>
<div style="display: flex;flex-wrap: wrap;">
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>专利信息</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="发明名称"> </el-table-column>
<el-table-column align="center" prop="address" label="专利类型"> </el-table-column>
<el-table-column align="center" prop="address" label="法律状态"> </el-table-column>
<el-table-column align="center" prop="address" label="申请号"> </el-table-column>
<el-table-column align="center" prop="address" label="申请日期"> </el-table-column>
<el-table-column align="center" prop="address" label="公开(公告)号"> </el-table-column>
<el-table-column align="center" prop="address" label="公开(公告)日期"> </el-table-column>
<el-table-column align="center" prop="address" label="发明人"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div style="position: sticky;top: 88px;"><slot /></div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>商标信息</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="商标"> </el-table-column>
<el-table-column align="center" prop="address" label="商标名称"> </el-table-column>
<el-table-column align="center" prop="address" label="注册号"> </el-table-column>
<el-table-column align="center" prop="address" label="国际分类"> </el-table-column>
<el-table-column align="center" prop="address" label="申请日期"> </el-table-column>
<el-table-column align="center" prop="address" label="注册公告日期"> </el-table-column>
<el-table-column align="center" prop="address" label="商标状态"> </el-table-column>
<el-table-column align="center" prop="address" label="操作"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>软件著作权</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="软件全称"> </el-table-column>
<el-table-column align="center" prop="address" label="软件简称"> </el-table-column>
<el-table-column align="center" prop="address" label="版本号"> </el-table-column>
<el-table-column align="center" prop="address" label="登记号"> </el-table-column>
<el-table-column align="center" prop="address" label="开发完成日期"> </el-table-column>
<el-table-column align="center" prop="address" label="首次发布日期"> </el-table-column>
<el-table-column align="center" prop="address" label="登记日期"> </el-table-column>
<el-table-column align="center" prop="address" label="权利取得方式"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>作品著作权</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="作品名称"> </el-table-column>
<el-table-column align="center" prop="address" label="作品类别"> </el-table-column>
<el-table-column align="center" prop="address" label="首次发表日期"> </el-table-column>
<el-table-column align="center" prop="address" label="创作完成日期"> </el-table-column>
<el-table-column align="center" prop="address" label="登记号"> </el-table-column>
<el-table-column align="center" prop="address" label="登记日期"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>备案网站</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="网站名称"> </el-table-column>
<el-table-column align="center" prop="address" label="网址"> </el-table-column>
<el-table-column align="center" prop="address" label="域名"> </el-table-column>
<el-table-column align="center" prop="address" label="网站备案/许可证号"> </el-table-column>
<el-table-column align="center" prop="address" label="审核日期"> </el-table-column>
<el-table-column align="center" prop="address" label="公安备案"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage1: 1,
total1: 21,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
methods: {
handleCurrentChange1() {},
},
};
</script>
<style scoped lang="less">
.base-box1,
.base-box2 {
width: 1210px;
background: #ffffff;
border-radius: 10px;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 20px;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
}
</style>
src/views/details/enterpriseModules/JudicialRisk.vue 0 → 100644
<!--
* @FileDescription: 司法风险
-->
<template>
<div style="display: flex;flex-wrap:wrap">
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>法律诉讼</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="案件名称"> </el-table-column>
<el-table-column align="center" prop="address" label="案件身份"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="案件金额(元)"> </el-table-column>
<el-table-column align="center" prop="address" label="最新案件进程"> </el-table-column>
<el-table-column align="center" prop="address" label="法院"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div style="position: sticky;top: 88px;"><slot /></div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>被执行人</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="name" label="立案日期"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="身份证号码/组织机构代码"> </el-table-column>
<el-table-column align="center" prop="address" label="执行标的"> </el-table-column>
<el-table-column align="center" prop="address" label="执行法院"> </el-table-column>
<el-table-column align="center" prop="address" label="操作"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>限制高消费</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="限消令对象"> </el-table-column>
<el-table-column align="center" prop="address" label="关联对象"> </el-table-column>
<el-table-column align="center" prop="address" label="申请人"> </el-table-column>
<el-table-column align="center" prop="address" label="涉案金额"> </el-table-column>
<el-table-column align="center" prop="address" label="执行法院"> </el-table-column>
<el-table-column align="center" prop="address" label="立案日期"> </el-table-column>
<el-table-column align="center" prop="address" label="发布日期"> </el-table-column>
<el-table-column align="center" prop="address" label="原文"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>终本案件</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="被执行人"> </el-table-column>
<el-table-column align="center" prop="address" label="疑似申请执行人"> </el-table-column>
<el-table-column align="center" prop="address" label="未履行金额(元)"> </el-table-column>
<el-table-column align="center" prop="address" label="执行标的(元)"> </el-table-column>
<el-table-column align="center" prop="address" label="执行法院"> </el-table-column>
<el-table-column align="center" prop="address" label="立案日期"> </el-table-column>
<el-table-column align="center" prop="address" label="终本日期"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>立案信息</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="案由"> </el-table-column>
<el-table-column align="center" prop="address" label="当事人"> </el-table-column>
<el-table-column align="center" prop="address" label="法院"> </el-table-column>
<el-table-column align="center" prop="address" label="立案日期"> </el-table-column>
<el-table-column align="center" prop="address" label="终本日期"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>开庭公告</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="案由"> </el-table-column>
<el-table-column align="center" prop="address" label="当事人"> </el-table-column>
<el-table-column align="center" prop="address" label="法院"> </el-table-column>
<el-table-column align="center" prop="address" label="开庭日期"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>法院公告</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="案由"> </el-table-column>
<el-table-column align="center" prop="address" label="当事人"> </el-table-column>
<el-table-column align="center" prop="address" label="公告类型"> </el-table-column>
<el-table-column align="center" prop="address" label="公告人"> </el-table-column>
<el-table-column align="center" prop="address" label="刊登日期"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
<div class="base-box1">
<div class="box-title">
<div class="left-circle"></div>
<div class="left-circle1"></div>
<div>破产重组</div>
</div>
<el-table :header-cell-style="{ background: '#F2F3F5' }" :data="tableData" style="width: 100%;margin-top: 20px;">
<el-table-column align="center" type="index" label="序号"> </el-table-column>
<el-table-column align="center" prop="address" label="案号"> </el-table-column>
<el-table-column align="center" prop="address" label="案件类型"> </el-table-column>
<el-table-column align="center" prop="address" label="经办法院"> </el-table-column>
<el-table-column align="center" prop="address" label="公开日期"> </el-table-column>
<el-table-column align="center" prop="address" label="内容"> </el-table-column>
</el-table>
<div style="margin-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination
background
layout="total, prev, pager, next"
:total="total1"
@current-change="handleCurrentChange1"
:current-page.sync="currentPage1"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage1: 1,
total1: 21,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
methods: {
handleCurrentChange1() {},
},
};
</script>
<style scoped lang="less">
.base-box1,
.base-box2 {
width: 1210px;
background: #ffffff;
border-radius: 10px;
padding: 40px 30px;
box-sizing: border-box;
margin-bottom: 20px;
.box-title {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #1a202c;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 9;
.left-circle {
width: 16px;
height: 16px;
background: #c6d1f6;
margin-right: 8px;
border-radius: 50%;
}
.left-circle1 {
width: 8px;
height: 8px;
background: #3563e9;
border-radius: 50%;
position: absolute;
margin-left: 4px;
}
}
}
</style>
src/views/login/login.vue
......@@ -98,10 +98,10 @@
<div class="submit" @click="codeLogin">
登录
</div>
<div class="other">
<!-- <div class="other">
<span>其他方式登录</span>
<img @click="wxLogin" src="~@images/login2/icon-wechat.png" alt="" />
</div>
</div> -->
</div>
<div class="login-input" v-if="bind == false && manage == false && activeName1 == 'inside'">
<div class="input_father">
......
vue.config.js
......@@ -29,9 +29,9 @@ module.exports = {
"^/api": {
target: "https://mancheng.industrychain.online",
changeOrigin: true,
// pathRewrite: {
// "/api": "",
// },
pathRewrite: {
"/api": "",
},
// logLevel: 'debug'
},
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment