1185 lines
39 KiB
Vue
1185 lines
39 KiB
Vue
|
<template>
|
|||
|
|
<!-- 真实实时数据宽屏 -->
|
|||
|
|
<div class="container bg ScaleBox" ref="ScaleBox"
|
|||
|
|
:style="{
|
|||
|
|
width: width + 'px',
|
|||
|
|
height: height + 'px',
|
|||
|
|
}">
|
|||
|
|
<div class="header" style="padding-top: 20px;">
|
|||
|
|
<div class="header-left" style="padding-left: 180px; display: flex;">
|
|||
|
|
<img class="logo" src="./assets/logo.png" style="width: 331px;height: 60px;padding-left: 60px;">
|
|||
|
|
</div>
|
|||
|
|
<div class="header-title" style="display:flex;justify-self: space-between;margin:10px;">
|
|||
|
|
<div style="flex:0 1 25%">
|
|||
|
|
<dv-decoration-10 style="height:5px;" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="flex:0 1 50%">
|
|||
|
|
<div class="d-flex">
|
|||
|
|
<dv-decoration-8 style="height:50px;flex:1;" />
|
|||
|
|
<h2 style="width: 260px;font-size: 17px;" @click="$router.push('/login');">资本市场系统风险监测与预警平台</h2>
|
|||
|
|
<!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
|
|||
|
|
<dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="flex:0 1 25%">
|
|||
|
|
<dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-right">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="main">
|
|||
|
|
<!-- 第一块 -->
|
|||
|
|
<div class="box">
|
|||
|
|
<div class="box-header" style="">
|
|||
|
|
<span style=""></span>
|
|||
|
|
预警监测
|
|||
|
|
</div>
|
|||
|
|
<div class=" box-body">
|
|||
|
|
<!-- 第一行 -->
|
|||
|
|
<div class="charts-row" style="">
|
|||
|
|
<div style="flex:0 1 33.33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">股票市场</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;margin-top: 50px;">
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">1100</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">1184</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">1254</h1></dv-decoration-9>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;text-align: center;margin-top: 40px;">
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">低风险</span>
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">中风险</span>
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">高风险</span>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33.33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">债券市场</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;margin-top: 50px;">
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">1862</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">441</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">87</h1></dv-decoration-9>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;text-align: center;margin-top: 40px;">
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">低风险</span>
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">中风险</span>
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">高风险</span>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33.33%">
|
|||
|
|
<!-- 饼图 -->
|
|||
|
|
<!-- <dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">个体风险预警</h3>
|
|||
|
|
<div ref="echarts_1" style="height:80%;width:100%; "></div>
|
|||
|
|
</dv-border-box-13> -->
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">期货市场</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;margin-top: 50px;">
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">2035</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">766</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right: 30px;" dur=5><h1 style="color: rgba(255,215,0);">145</h1></dv-decoration-9>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;text-align: center;margin-top: 40px;">
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">低风险</span>
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">中风险</span>
|
|||
|
|
<span style="width:120px;height:120px;margin-right:30px;">高风险</span>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二行 -->
|
|||
|
|
<div class="charts-row" style="">
|
|||
|
|
<div style="flex:0 1 33.33%" v-for="item in 3" :key="item">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
|
|||
|
|
<div ref="chartContainer" style="width:100%; height: 100%;margin: 1px"></div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div style="flex:0 1 34%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
|
|||
|
|
<div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
|
|||
|
|
<div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第三行 -->
|
|||
|
|
<div class="charts-row" style="">
|
|||
|
|
<div style="flex:0 1 33.33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">预警提示</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-scroll-board :config="config22" style="width:95%;height:220px;" />
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33.33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;padding-top: 10px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
|||
|
|
<div ref="echarts_3" style="height:80%;width:100%"></div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33.33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">行业预警排行</h3>
|
|||
|
|
<div ref="echarts_2" style="height:90%;width:100%"></div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="box-footer">
|
|||
|
|
<span style=""></span>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
<!-- 第二块 -->
|
|||
|
|
<div class="box">
|
|||
|
|
<div class="box-header" style="">
|
|||
|
|
<span style=""></span>
|
|||
|
|
市场主体概况
|
|||
|
|
</div>
|
|||
|
|
<div class="box-body">
|
|||
|
|
<!-- 第一行 一列 课程概览 -->
|
|||
|
|
<div class="charts-row">
|
|||
|
|
<div style="flex:0 1 25%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:200px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
|
|||
|
|
<!-- <Chart /> -->
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<span style="padding-right: 50px;">节点类型总数</span>
|
|||
|
|
<span style="padding-left: 50px;">边类型总数</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
<RadarChart/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="flex:0 1 50%">
|
|||
|
|
<dv-border-box-1 style="width:100%;height:600px;">
|
|||
|
|
<!-- 图谱 -->
|
|||
|
|
<iframe src="/static/3d-force-graph/index1.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
|
|||
|
|
</dv-border-box-1>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="flex:0 1 25%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:200px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">图谱统计</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-decoration-9 style="width:123px;height:123px;margin-right:30px;" dur=5><h2 style="color: rgba(255,215,0);">606041</h2></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:123px;height:123px;margin-left: 30px;" dur=5><h2 style="color: rgba(255,215,0);">1694475</h2></dv-decoration-9>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<span style="padding-right: 60px;">节点总数</span>
|
|||
|
|
<span style="padding-left: 55px;">边总数</span>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
|
|||
|
|
<dv-border-box-13 style="width:100%;height:400px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
|
|||
|
|
<Map />
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二行 -->
|
|||
|
|
<div class="charts-row" style="">
|
|||
|
|
<div style="flex:0 1 25%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">舆情预警</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-scroll-board :config="config11" style="width:95%;height:220px;justify-content: center;align-items: center" />
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="flex:0 1 50%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">系统性风险指数</h3>
|
|||
|
|
<LineChart />
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="flex:0 1 25%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
|
|||
|
|
<!-- <CapsuleChart :dataChart="items"/> -->
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-scroll-board :config="config22" style="width:95%;height:220px;" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="box-footer">
|
|||
|
|
<span style=""></span>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
<!-- 第三块 -->
|
|||
|
|
<div class="box">
|
|||
|
|
<div class="box-header" style="">
|
|||
|
|
<span style=""></span>
|
|||
|
|
系统性风险分析
|
|||
|
|
</div>
|
|||
|
|
<div class=" box-body">
|
|||
|
|
<!-- 第一行 -->
|
|||
|
|
<div class="charts-row" style="">
|
|||
|
|
<div style="flex:0 1 100%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
|
|||
|
|
<!-- 维度时序 -->
|
|||
|
|
<dimension-component :zoom="datazoom" ref="dimension"/>
|
|||
|
|
<!-- 系统性风险指数 -->
|
|||
|
|
<!-- <systemRiskComponent :zoom="datazoom" @datazoom="changeComp" ref="systemRisk"></systemRiskComponent> -->
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div style="flex:0 1 34%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<span style="padding-right: 50px;">节点类型总数</span>
|
|||
|
|
<span style="padding-left: 50px;">边类型总数</span>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
|
|||
|
|
<dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<span style="padding-right: 50px;">节点类型总数</span>
|
|||
|
|
<span style="padding-left: 50px;">边类型总数</span>
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二行 -->
|
|||
|
|
<div class="charts-row" style="">
|
|||
|
|
<div style="flex:0 1 100%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;padding-top: 4px">
|
|||
|
|
<!-- <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3> -->
|
|||
|
|
<el-tabs type="border-card" style='height: 90%;' @tab-click="handleClick">
|
|||
|
|
<!-- 收益率传染 -->
|
|||
|
|
<el-tab-pane label="个体风险状态" :lazy='true' style="height: 100%;">
|
|||
|
|
<market-risk-component :zoom="datazoom" :title="'个体风险状态'" ref="marketRisk"/>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<!-- 波动传染 -->
|
|||
|
|
<el-tab-pane label="风险关联与溢出" :lazy='true' style="height: 100%;">
|
|||
|
|
<market-risk-component1 :zoom="datazoom" :title="'风险关联与溢出'" ref="marketRisk"/>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="市场系统结构" :lazy='true' style="height: 100%;">
|
|||
|
|
<market-risk-component1 :zoom="datazoom" :title="'市场系统结构'" ref="marketRisk"/>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="市场波动和趋势" :lazy='true' style="height: 100%;">
|
|||
|
|
<market-risk-component1 :zoom="datazoom" :title="'市场波动和趋势'" ref="marketRisk"/>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<!-- <market-risk-component :zoom="datazoom" :title="'个体风险状态'"/> -->
|
|||
|
|
<!-- <dimension-component :zoom="datazoom"/> -->
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div style="flex:0 1 34%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
|||
|
|
<RadarChart/>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
|||
|
|
<RadarChart/>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第三行 -->
|
|||
|
|
<div class="charts-row" style="">
|
|||
|
|
<div style="flex:0 1 33.33%" v-for="item in 3" :key="item">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
|
|||
|
|
<div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div style="flex:0 1 34%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-scroll-board :config="config22" style="width:95%;height:220px;" />
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:0 1 33%">
|
|||
|
|
<dv-border-box-13 style="width:100%;height:300px;">
|
|||
|
|
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
|
|||
|
|
<div style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<dv-scroll-board :config="config22" style="width:95%;height:220px;" />
|
|||
|
|
</div>
|
|||
|
|
</dv-border-box-13>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="box-footer">
|
|||
|
|
<span style=""></span>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// @ is an alias to /src
|
|||
|
|
import Map from './components/Map.vue'
|
|||
|
|
import RadarChart from './components/RadarChart.vue'
|
|||
|
|
import CapsuleChart from './components/CapsuleChart.vue';
|
|||
|
|
import LineChart from './components/LineChart.vue'
|
|||
|
|
import http from "@/utils/request";
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
import { color } from 'd3';
|
|||
|
|
import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图
|
|||
|
|
import dimensionComponent from "./components/dimensionComponent";
|
|||
|
|
import marketRiskComponent from "./components/riskIndexComponent";
|
|||
|
|
import marketRiskComponent1 from "./components/riskIndexComponent1";
|
|||
|
|
export default {
|
|||
|
|
name: 'App',
|
|||
|
|
components: {
|
|||
|
|
Map,
|
|||
|
|
RadarChart,
|
|||
|
|
CapsuleChart,
|
|||
|
|
LineChart,
|
|||
|
|
systemRiskComponent,
|
|||
|
|
dimensionComponent,
|
|||
|
|
marketRiskComponent,
|
|||
|
|
marketRiskComponent1
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
compName:'systemRiskComponent',
|
|||
|
|
datazoom:[],
|
|||
|
|
scale: 0,
|
|||
|
|
width: 5760,
|
|||
|
|
height: 1080,
|
|||
|
|
config:{
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
name: '南阳',
|
|||
|
|
value: 167
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '周口',
|
|||
|
|
value: 67
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '漯河',
|
|||
|
|
value: 123
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '郑州',
|
|||
|
|
value: 55
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '西峡',
|
|||
|
|
value: 98
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
|
|||
|
|
unit: '单位',
|
|||
|
|
showValue: true
|
|||
|
|
},
|
|||
|
|
config2:{
|
|||
|
|
data: [66, 45],
|
|||
|
|
shape: 'roundRect'
|
|||
|
|
},
|
|||
|
|
config3:{
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
name: '周口',
|
|||
|
|
value: 55
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '南阳',
|
|||
|
|
value: 120
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '西峡',
|
|||
|
|
value: 71
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '驻马店',
|
|||
|
|
value: 66
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '新乡',
|
|||
|
|
value: 80
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '信阳',
|
|||
|
|
value: 35
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '漯河',
|
|||
|
|
value: 15
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
img: [
|
|||
|
|
require('./assets/1st.png'),
|
|||
|
|
require('./assets/2st.png'),
|
|||
|
|
require('./assets/3st.png'),
|
|||
|
|
require('./assets/4st.png'),
|
|||
|
|
require('./assets/5st.png'),
|
|||
|
|
require('./assets/6st.png'),
|
|||
|
|
require('./assets/7st.png'),
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
config4:{
|
|||
|
|
centerPoint: [0.48, 0.35],
|
|||
|
|
points: [
|
|||
|
|
{
|
|||
|
|
position: [0.52, 0.235],
|
|||
|
|
text: '新乡'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.43, 0.29],
|
|||
|
|
text: '焦作'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.59, 0.35],
|
|||
|
|
text: '开封'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.53, 0.47],
|
|||
|
|
text: '许昌'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.45, 0.54],
|
|||
|
|
text: '平顶山'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.36, 0.38],
|
|||
|
|
text: '洛阳'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.62, 0.55],
|
|||
|
|
text: '周口'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.56, 0.56],
|
|||
|
|
text: '漯河'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.37, 0.66],
|
|||
|
|
text: '南阳'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.55, 0.81],
|
|||
|
|
text: '信阳'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.55, 0.67],
|
|||
|
|
text: '驻马店'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.37, 0.29],
|
|||
|
|
text: '济源'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.20, 0.36],
|
|||
|
|
text: '三门峡'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.76, 0.41],
|
|||
|
|
text: '商丘'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.59, 0.18],
|
|||
|
|
text: '鹤壁'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.68, 0.17],
|
|||
|
|
text: '濮阳'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
position: [0.59, 0.10],
|
|||
|
|
text: '安阳'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
bgImgUrl: require('./assets/map.jpg'),
|
|||
|
|
centerPointImg: {
|
|||
|
|
url: require('./assets/mapCenterPoint.png')
|
|||
|
|
},
|
|||
|
|
pointsImg: {
|
|||
|
|
url: require('./assets/mapPoint.png')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 表格设置
|
|||
|
|
config11 : {
|
|||
|
|
header: ['主体代码 ', '行业', '   预警时刻','  风险水平','风险类型 '],
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
主体代码:'688001.SH',
|
|||
|
|
行业:'计算机',
|
|||
|
|
预警时刻:'2023/6/29 16:00',
|
|||
|
|
风险水平:'严重',
|
|||
|
|
风险类型:'流动风险',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
主体代码:'688002.SH',
|
|||
|
|
行业:'计算机',
|
|||
|
|
当前预警时刻:'2023/6/29 16:00',
|
|||
|
|
预警类型:'严重',
|
|||
|
|
风险类型:'市场风险',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
主体代码:'688002.SH',
|
|||
|
|
行业:'计算机',
|
|||
|
|
当前预警时刻:'2023/6/29 16:00',
|
|||
|
|
预警类型:'严重',
|
|||
|
|
风险类型:'市场风险',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
主体代码:'688002.SH',
|
|||
|
|
行业:'计算机',
|
|||
|
|
当前预警时刻:'2023/6/29 16:00',
|
|||
|
|
预警类型:'严重',
|
|||
|
|
风险类型:'市场风险',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
主体代码:'688002.SH',
|
|||
|
|
行业:'计算机',
|
|||
|
|
当前预警时刻:'2023/6/29 16:00',
|
|||
|
|
预警类型:'严重',
|
|||
|
|
风险类型:'市场风险',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
|
|||
|
|
evenRowBGC:'#0A2732',
|
|||
|
|
oddRowBGC:'0A2732',
|
|||
|
|
headerBGC:'rgba(61,89,171,0.5)',
|
|||
|
|
align: ['right'],
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
config22 :
|
|||
|
|
{
|
|||
|
|
data: [
|
|||
|
|
['教育', 7],
|
|||
|
|
['金融业', 1],
|
|||
|
|
['房地产业', 2],
|
|||
|
|
['制造业', 3],
|
|||
|
|
['房地产业', 4],
|
|||
|
|
['批发和零售业', 5],
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
evenRowBGC:'#0A2732',
|
|||
|
|
oddRowBGC:'0A2732',
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
items:[
|
|||
|
|
{
|
|||
|
|
name: '股权质押',
|
|||
|
|
value: 683
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '转让股价',
|
|||
|
|
value: 234
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '股份增持',
|
|||
|
|
value: 240
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '债券发行',
|
|||
|
|
value: 523
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '高管变动',
|
|||
|
|
value: 345
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '产品发布',
|
|||
|
|
value: 320
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '破产',
|
|||
|
|
value: 280
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '业绩下滑',
|
|||
|
|
value: 271
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
date:[],
|
|||
|
|
rate:[],
|
|||
|
|
macro:[],
|
|||
|
|
montary:[],
|
|||
|
|
income:[],
|
|||
|
|
investment:[],
|
|||
|
|
loan:[],
|
|||
|
|
lever:[],
|
|||
|
|
other:[],
|
|||
|
|
whole:[],
|
|||
|
|
title:['利率','货币','收入和融资','信贷','宏观指标','银行理财','整体杠杆','其他']
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getScale() {
|
|||
|
|
// 固定好16：9的宽高比，计算出最合适的缩放比
|
|||
|
|
const { width, height } = this;
|
|||
|
|
const wh = window.innerHeight / height;
|
|||
|
|
const ww = window.innerWidth / width;
|
|||
|
|
console.log(ww < wh ? ww : wh);
|
|||
|
|
return ww < wh ? ww : wh;
|
|||
|
|
},
|
|||
|
|
setScale() {
|
|||
|
|
// 获取到缩放比例，设置它
|
|||
|
|
this.scale = this.getScale();
|
|||
|
|
if (this.$refs.ScaleBox) {
|
|||
|
|
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
debounce(fn, delay) {
|
|||
|
|
const delays = delay || 500;
|
|||
|
|
let timer;
|
|||
|
|
return function () {
|
|||
|
|
const th = this;
|
|||
|
|
const args = arguments;
|
|||
|
|
if (timer) {
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
}
|
|||
|
|
timer = setTimeout(function () {
|
|||
|
|
timer = null;
|
|||
|
|
fn.apply(th, args);
|
|||
|
|
}, delays);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
changeComp(mesg){
|
|||
|
|
this.datazoom=mesg
|
|||
|
|
console.log(mesg)
|
|||
|
|
},
|
|||
|
|
// handleClick(){
|
|||
|
|
// console.log('jinru');
|
|||
|
|
// this.$refs.marketRisk.getData()
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 大屏自适应部分
|
|||
|
|
this.setScale();
|
|||
|
|
window.removeEventListener("resize",this.debounce(this.setScale))
|
|||
|
|
window.addEventListener("resize", this.debounce(this.setScale));
|
|||
|
|
|
|||
|
|
// 自动登录
|
|||
|
|
const params = new URLSearchParams();
|
|||
|
|
params.append('username', 'gongdragon');
|
|||
|
|
params.append('password', 'gwl123');
|
|||
|
|
http.post('/users/login/', params)
|
|||
|
|
.then((res)=>{
|
|||
|
|
if (res.data.message===1){
|
|||
|
|
this.loading = false
|
|||
|
|
let user={token:res.data.data,name:'gongdragon',stats:res.data.stats}
|
|||
|
|
this.$store.commit('login',user)
|
|||
|
|
} else {
|
|||
|
|
this.$message({
|
|||
|
|
showClose: true,
|
|||
|
|
message: res.data.data,
|
|||
|
|
type: 'warning'
|
|||
|
|
});
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
}).then(()=>{
|
|||
|
|
// 获取股票风险 圆圈类饼图部分
|
|||
|
|
http.get('/warning/get_warning_count/').then((res)=> {
|
|||
|
|
// console.log('get_warning_count',res);
|
|||
|
|
|
|||
|
|
// this.stockLow=res.data["低风险"]
|
|||
|
|
// this.stockMid=res.data["中风险"]
|
|||
|
|
// this.stockHigh=res.data["高风险"]
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 宏观分析折线图
|
|||
|
|
http.get('/risk/future_risk/').then((res)=>{
|
|||
|
|
this.date=res.data.date
|
|||
|
|
this.rate=res.data.rate
|
|||
|
|
this.macro=res.data.macro
|
|||
|
|
this.montary=res.data.montary
|
|||
|
|
this.income=res.data.income
|
|||
|
|
this.investment=res.data.investment
|
|||
|
|
this.loan=res.data.loan
|
|||
|
|
this.lever=res.data.lever
|
|||
|
|
this.other=res.data.other
|
|||
|
|
this.whole.push(this.rate)
|
|||
|
|
this.whole.push(this.montary)
|
|||
|
|
this.whole.push(this.income)
|
|||
|
|
|
|||
|
|
// this.whole.push(this.loan)
|
|||
|
|
this.whole.push(this.macro)
|
|||
|
|
this.whole.push(this.investment)
|
|||
|
|
this.whole.push(this.lever)
|
|||
|
|
this.whole.push(this.other)
|
|||
|
|
}).then(()=>{
|
|||
|
|
for(let i = 0; i < 6; i++) {
|
|||
|
|
// let chartContainer = 'chartContainer' + i
|
|||
|
|
let echart = echarts.init(this.$refs.chartContainer[i])
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
title:{
|
|||
|
|
text:this.title[i],
|
|||
|
|
textStyle:{
|
|||
|
|
color:'#fff'
|
|||
|
|
},
|
|||
|
|
left:'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top:30,
|
|||
|
|
textStyle:{
|
|||
|
|
color:'#fff'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: this.date,
|
|||
|
|
axisLabel: {//x轴文字的配置
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {//x轴文字的配置
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid:{
|
|||
|
|
containLabel:true
|
|||
|
|
},
|
|||
|
|
series: this.whole[i]
|
|||
|
|
};
|
|||
|
|
echart.setOption(option)
|
|||
|
|
}}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 轮播图
|
|||
|
|
http.get('/anomaly/item_anomaly/',{params:{
|
|||
|
|
sc:'stock',
|
|||
|
|
}}).then((res)=>{
|
|||
|
|
// console.log(res.data.data);
|
|||
|
|
const formatData = res.data.data.map(item => {
|
|||
|
|
return [item.监测时间,item.名称,item.异常关联类型]
|
|||
|
|
})
|
|||
|
|
const config22 = {
|
|||
|
|
header: ['监测时间', '名称', '异常关联类型'],
|
|||
|
|
data: formatData,
|
|||
|
|
// headerBGC:'black',
|
|||
|
|
evenRowBGC:'#0A2732',
|
|||
|
|
oddRowBGC:'0A2732',
|
|||
|
|
}
|
|||
|
|
// console.log('formatData',formatData);
|
|||
|
|
this.config22 = config22
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 健康指数 雷达图
|
|||
|
|
http.get(
|
|||
|
|
"/health/health_search/",
|
|||
|
|
{params:{
|
|||
|
|
name: '上海纳尔实业股份有限公司',//公司名
|
|||
|
|
date: '2024-01',//时间（年份+季度）
|
|||
|
|
}}).then(response => {
|
|||
|
|
console.log('Response',response);
|
|||
|
|
|
|||
|
|
// let radarDatas// 存放所有数据项
|
|||
|
|
// radarDatas = response.data.data.map(item => {
|
|||
|
|
// // 单个数据项 转化为echarts格式
|
|||
|
|
// let radarData = [item.投资关系,item.操盘模式,item.财务状态,item.运行状态,item.规模扩张,item.声誉风险,item.外部环境]
|
|||
|
|
// return radarData
|
|||
|
|
// })
|
|||
|
|
// console.log('radarDatas',radarDatas)
|
|||
|
|
let radarData = []
|
|||
|
|
for (let i in response.data.data) {
|
|||
|
|
if (i !== '健康指数' && i !== '等级' && typeof response.data.data[i] === 'number') radarData.push(response.data.data[i])
|
|||
|
|
}
|
|||
|
|
const echarts3 = echarts.init(this.$refs.echarts_3)
|
|||
|
|
const option_3 = {
|
|||
|
|
title: {
|
|||
|
|
text: '纳尔实业公司 2024-1季度',
|
|||
|
|
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
|||
|
|
bottom:"-12",
|
|||
|
|
padding:[ 0,10,10,10],
|
|||
|
|
textStyle:{
|
|||
|
|
color:'#fff',
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['中国银行']
|
|||
|
|
},
|
|||
|
|
radar: {
|
|||
|
|
// shape: 'circle',
|
|||
|
|
indicator: [
|
|||
|
|
{ name: '投资关系', max: 100, color:'#fff'},
|
|||
|
|
{ name: '操盘模式', max: 100, color:'#fff' },
|
|||
|
|
{ name: '财务状态', max: 100, color:'#fff' },
|
|||
|
|
{ name: '运行状态', max: 100, color:'#fff' },
|
|||
|
|
{ name: '规模扩张', max: 100, color:'#fff' },
|
|||
|
|
{ name: '声誉风险', max: 100, color:'#fff' },
|
|||
|
|
{ name: '外部环境', max: 100, color:'#fff' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Budget vs spending',
|
|||
|
|
type: 'radar',
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: radarData,
|
|||
|
|
name: '上海纳尔实业股份有限公司'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
echarts3.setOption(option_3)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 行业预警排行
|
|||
|
|
const echarts2 = echarts.init(this.$refs.echarts_2)
|
|||
|
|
http.get('/warning/indus_rank/', {
|
|||
|
|
params: {
|
|||
|
|
// exchange:this.exchange
|
|||
|
|
exchange: '',
|
|||
|
|
start:'',
|
|||
|
|
end:'',
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
|
|||
|
|
let xData=[],yData=[]
|
|||
|
|
let tmp=res.data
|
|||
|
|
for(let key in tmp)
|
|||
|
|
{
|
|||
|
|
if(key.length < 16){
|
|||
|
|
xData.push(tmp[key])
|
|||
|
|
yData.push(key)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const option_2 = {
|
|||
|
|
grid: {
|
|||
|
|
left: '34%',//离左边远一点
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '15%',
|
|||
|
|
top:'5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine:{
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: yData,
|
|||
|
|
axisLine:{
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
// color:'#6d7d87',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: xData
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
echarts2.setOption(option_2)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// // 饼图 个体风险预警
|
|||
|
|
// const echarts1 = echarts.init(this.$refs.echarts_1)
|
|||
|
|
// http.get('/warning/individual_rank/', {
|
|||
|
|
// params: {
|
|||
|
|
// exchange: '',
|
|||
|
|
// start:'',
|
|||
|
|
// end:'',
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
// }).then((res) => {
|
|||
|
|
// let pieData = []
|
|||
|
|
// // this.critical = res.data['指数']['严重']
|
|||
|
|
// // this.mid = res.data['指数']['中等']
|
|||
|
|
// // this.good = res.data['指数']['轻微']
|
|||
|
|
// let tmp=res.data['环形图']
|
|||
|
|
// for(let key in tmp)
|
|||
|
|
// {
|
|||
|
|
// let arr={}
|
|||
|
|
// arr['name']=key
|
|||
|
|
// arr['value']=tmp[key]
|
|||
|
|
// pieData.push(arr)
|
|||
|
|
// }
|
|||
|
|
// echarts1.clear()
|
|||
|
|
// const option_1={
|
|||
|
|
// tooltip: {
|
|||
|
|
// trigger: 'item'
|
|||
|
|
// },
|
|||
|
|
// legend: {
|
|||
|
|
// top: '2%',
|
|||
|
|
// left: 'center',
|
|||
|
|
// textStyle:{
|
|||
|
|
// color: '#fff'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// // name: 'Access From',
|
|||
|
|
// type: 'pie',
|
|||
|
|
// radius: ['30%', '65%'],//调整饼图内圆和外圆大小
|
|||
|
|
// center:['50%','65%'],//调整饼在画布上的距离，此时偏下
|
|||
|
|
// avoidLabelOverlap: false,
|
|||
|
|
// itemStyle: {
|
|||
|
|
// borderRadius: 5,
|
|||
|
|
// borderColor: '#fff',
|
|||
|
|
// borderWidth: 2
|
|||
|
|
// },
|
|||
|
|
// label: {
|
|||
|
|
// show: true
|
|||
|
|
// },
|
|||
|
|
// emphasis: {
|
|||
|
|
// label: {
|
|||
|
|
// show: true,
|
|||
|
|
// fontSize: 40,
|
|||
|
|
// fontWeight: 'bold'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// labelLine: {
|
|||
|
|
// show: true
|
|||
|
|
// },
|
|||
|
|
// data: pieData
|
|||
|
|
// }
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
// echarts1.setOption(option_1,true)
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
// 系统性风险
|
|||
|
|
// this.$refs.systemRisk.getData()
|
|||
|
|
|
|||
|
|
// 第三屏上
|
|||
|
|
this.$refs.dimension.getData()
|
|||
|
|
// 第三屏中间
|
|||
|
|
this.$refs.marketRisk.getData()
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body,
|
|||
|
|
input,
|
|||
|
|
button,
|
|||
|
|
a,
|
|||
|
|
textarea,
|
|||
|
|
select {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul li {
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
// 大屏自适应
|
|||
|
|
.ScaleBox {
|
|||
|
|
position: absolute;
|
|||
|
|
transform: scale(var(--scale)) translate(-50%, -50%);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
transform-origin: 0 0;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transition: 0.3s;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
.bg {
|
|||
|
|
padding:0;
|
|||
|
|
background:url('./assets/pageBg.png') center center;
|
|||
|
|
/* background-size:cover; */
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
color: aliceblue;
|
|||
|
|
// width: 5760px;
|
|||
|
|
// height: 1080px;
|
|||
|
|
// background-color: #18478F;
|
|||
|
|
|
|||
|
|
>.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-evenly;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100px; //
|
|||
|
|
|
|||
|
|
|
|||
|
|
.header-left,
|
|||
|
|
.header-right {
|
|||
|
|
flex: 0 1 20%;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
border: none;
|
|||
|
|
transform: skewX(45deg);
|
|||
|
|
width: 180px;
|
|||
|
|
height: 50px;
|
|||
|
|
margin-left: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-button--primary {
|
|||
|
|
background-color: rgba(0, 102, 172, 0.4);
|
|||
|
|
border-color: #0066AC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-button--primary:focus {
|
|||
|
|
background-color: #BDA158;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-title {
|
|||
|
|
flex: 0 1 32%
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.main {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 980px; //
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-evenly;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
flex: 0 1 32%;
|
|||
|
|
height: 940px; //
|
|||
|
|
// background-color: #0C2B61;
|
|||
|
|
|
|||
|
|
.box-header {
|
|||
|
|
// background-color: #18478F;
|
|||
|
|
text-align: center;
|
|||
|
|
height: 40px; //
|
|||
|
|
line-height: 40px;
|
|||
|
|
border: 1px solid rgb(40, 110, 216);
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
float: left;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
// border-top: 30px solid #1596ca;
|
|||
|
|
// border-right: 30px solid transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-body {
|
|||
|
|
height: 850px; //
|
|||
|
|
|
|||
|
|
.charts-row {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.chart-container {
|
|||
|
|
width: 50%;
|
|||
|
|
padding-right: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-title {
|
|||
|
|
text-align: left;
|
|||
|
|
height: 10%; //
|
|||
|
|
padding-top: 8px;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 15px;
|
|||
|
|
height: 15px;
|
|||
|
|
padding-left: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart {
|
|||
|
|
height: 90%; //
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.el-tabs__content{
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
.el-tabs--border-card{
|
|||
|
|
background-color: transparent !important;
|
|||
|
|
border: transparent !important;
|
|||
|
|
}
|
|||
|
|
.el-tabs__header{
|
|||
|
|
background-color: transparent !important;
|
|||
|
|
border-bottom: transparent !important;
|
|||
|
|
}
|
|||
|
|
.el-tabs__item.is-active{
|
|||
|
|
background-color: transparent !important;
|
|||
|
|
border-right-color: transparent !important;
|
|||
|
|
border-left-color: transparent !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-footer {
|
|||
|
|
height: 30px;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-bottom: 25px solid #1596ca;
|
|||
|
|
border-left: 25px solid transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|