开发第一个模块
This commit is contained in:
GongDragon
parent
3e2da23427
commit
5eec8706a5
11
.env.development
Normal file
11
.env.development
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# 页面标题
|
||||
VUE_APP_TITLE = 智慧党建系统
|
||||
|
||||
# 开发环境配置
|
||||
ENV = 'development'
|
||||
|
||||
# 智慧党建系统/开发环境
|
||||
VUE_APP_BASE_API = '/devPrefix'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
224
ModuleHeader.vue
224
ModuleHeader.vue
|
|
@ -1,224 +0,0 @@
|
|||
<template>
|
||||
<div class="module-box">
|
||||
<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>
|
||||
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-1 style="width:100%;height:600px;">
|
||||
<!-- 图谱 -->
|
||||
<iframe src="/static/3d-force-graph/index.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-capsule-chart :config="config" style="width:100%;height:300px" /> -->
|
||||
</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>
|
||||
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
|
||||
<Map />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Map from './Map.vue'
|
||||
import RadarChart from './RadarChart.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
Map,
|
||||
RadarChart
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
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/img/1st.png'),
|
||||
require('../assets/img/2st.png'),
|
||||
require('../assets/img/3st.png'),
|
||||
require('../assets/img/4st.png'),
|
||||
require('../assets/img/5st.png'),
|
||||
require('../assets/img/6st.png'),
|
||||
require('../assets/img/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/img/map.jpg'),
|
||||
centerPointImg: {
|
||||
url: require('../assets/img/mapCenterPoint.png')
|
||||
},
|
||||
pointsImg: {
|
||||
url: require('../assets/img/mapPoint.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"cytoscape": "^3.27.0",
|
||||
|
|
@ -3206,6 +3207,11 @@
|
|||
"ajv": "^6.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/animate.css": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
|
||||
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
|
||||
},
|
||||
"node_modules/ansi-colors": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"cytoscape": "^3.27.0",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chinaMap from '@/assets/json/china.json'
|
||||
import { color } from 'd3';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
|
|
@ -20,79 +21,294 @@
|
|||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
echarts.registerMap('china', chinaMap);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
geo:{
|
||||
show:true,
|
||||
type:'map',
|
||||
map:'china',
|
||||
// label:{
|
||||
// show:true, //文字标签显示
|
||||
// color:'#fff',
|
||||
// fontSize:12
|
||||
// },
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#3352c7', //背景色
|
||||
borderColor:'#fff',
|
||||
borderWidth:1
|
||||
var chinaGeoCoordMap = {
|
||||
'黑龙江': [127.9688, 45.368],
|
||||
'内蒙古': [110.3467, 41.4899],
|
||||
"吉林": [125.8154, 44.2584],
|
||||
'北京市': [116.4551, 40.2539],
|
||||
"辽宁": [123.1238, 42.1216],
|
||||
"河北": [114.4995, 38.1006],
|
||||
"天津": [117.4219, 39.4189],
|
||||
"山西": [112.3352, 37.9413],
|
||||
"陕西": [109.1162, 34.2004],
|
||||
"甘肃": [103.5901, 36.3043],
|
||||
"宁夏": [106.3586, 38.1775],
|
||||
"青海": [101.4038, 36.8207],
|
||||
"新疆": [87.9236, 43.5883],
|
||||
"西藏": [91.11, 29.97],
|
||||
"四川": [103.9526, 30.7617],
|
||||
"重庆": [108.384366, 30.439702],
|
||||
"山东": [117.1582, 36.8701],
|
||||
"河南": [113.4668, 34.6234],
|
||||
"江苏": [118.8062, 31.9208],
|
||||
"安徽": [117.29, 32.0581],
|
||||
"湖北": [114.3896, 30.6628],
|
||||
"浙江": [119.5313, 29.8773],
|
||||
"福建": [119.4543, 25.9222],
|
||||
"江西": [116.0046, 28.6633],
|
||||
"湖南": [113.0823, 28.2568],
|
||||
"贵州": [106.6992, 26.7682],
|
||||
"云南": [102.9199, 25.4663],
|
||||
"广东": [113.12244, 23.009505],
|
||||
"广西": [108.479, 23.1152],
|
||||
"海南": [110.3893, 19.8516],
|
||||
'上海': [121.4648, 31.2891]
|
||||
};
|
||||
var chinaDatas = [
|
||||
[{
|
||||
name: '黑龙江',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '内蒙古',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '吉林',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '辽宁',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '河北',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '天津',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '山西',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '陕西',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '甘肃',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '宁夏',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '青海',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '新疆',
|
||||
value: 0
|
||||
}],[{
|
||||
name: '西藏',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '四川',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '重庆',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '山东',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '河南',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '江苏',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '安徽',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '湖北',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '浙江',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '福建',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '江西',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '湖南',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '贵州',
|
||||
value: 0
|
||||
}],[{
|
||||
name: '广西',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '海南',
|
||||
value: 0
|
||||
}], [{
|
||||
name: '上海',
|
||||
value: 1
|
||||
}]
|
||||
];
|
||||
var convertData = function(data) {
|
||||
var res = [];
|
||||
for(var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
|
||||
var toCoord = [116.4551,40.2539];
|
||||
if(fromCoord && toCoord) {
|
||||
res.push([{
|
||||
coord: fromCoord,
|
||||
value: dataItem[0].value
|
||||
}, {
|
||||
coord: toCoord,
|
||||
}]);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
var series = [];
|
||||
[['北京市', chinaDatas]].forEach(function(item, i) {
|
||||
console.log(item)
|
||||
series.push({
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 5, //图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1, //尾迹线条宽度
|
||||
opacity: 1, //尾迹线条透明度
|
||||
color:'blue',
|
||||
curveness: .3 //尾迹线条曲直度
|
||||
}
|
||||
},
|
||||
data: convertData(item[1])
|
||||
},
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 2,
|
||||
rippleEffect: { //涟漪特效
|
||||
period: 4, //动画时间，值越小速度越快
|
||||
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
||||
scale: 4 //波纹圆环最大限制，值越大波纹越大
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right', //显示位置
|
||||
offset: [5, 0], //偏移设置
|
||||
formatter: function(params){//圆环显示文字
|
||||
return params.data.name;
|
||||
},
|
||||
fontSize: 13
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: function(val) {
|
||||
return 5+ val[2] * 5; //圆环大小
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: 'yellow'
|
||||
}
|
||||
},
|
||||
data: item[1].map(function(dataItem) {
|
||||
return {
|
||||
name: dataItem[0].name,
|
||||
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
|
||||
};
|
||||
}),
|
||||
},
|
||||
//被攻击点
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 2,
|
||||
rippleEffect: {
|
||||
period: 4,
|
||||
brushType: 'stroke',
|
||||
scale: 4
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
//offset:[5, 0],
|
||||
color: '#0f0',
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: "#0f0"
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
color: "#f60"
|
||||
}
|
||||
},
|
||||
symbol: 'pin',
|
||||
symbolSize: 50,
|
||||
data: [{
|
||||
name: item[0],
|
||||
value: chinaGeoCoordMap[item[0]].concat([10]),
|
||||
}],
|
||||
}
|
||||
);
|
||||
});
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(166, 200, 76, 0.82)',
|
||||
borderColor: '#FFFFCC',
|
||||
showDelay: 0,
|
||||
hideDelay: 0,
|
||||
enterable: true,
|
||||
transitionDuration: 0,
|
||||
extraCssText: 'z-index:100',
|
||||
formatter: function(params, ticket, callback) {
|
||||
//根据业务自己拓展要显示的内容
|
||||
var res = "";
|
||||
var name = params.name;
|
||||
var value = params.value[params.seriesIndex + 1];
|
||||
res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
|
||||
return res;
|
||||
}
|
||||
},
|
||||
zoom:1.2,
|
||||
emphasis:{ //高亮状态
|
||||
label:{
|
||||
show:true, //文字标签显示
|
||||
color:'#fff',
|
||||
fontSize:14
|
||||
},
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#f60', //背景色
|
||||
borderColor:'#ccc',
|
||||
borderWidth:1
|
||||
},
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
|
||||
coordinateSystem:'geo',//该系列使用的坐标系
|
||||
rippleEffect:{ //涟漪特效相关配置。
|
||||
period:2,
|
||||
brushType:'stroke',
|
||||
scale :5,
|
||||
},
|
||||
label:{ //标签
|
||||
normal:{
|
||||
show:true,
|
||||
position:'right'
|
||||
backgroundColor:"#013954",
|
||||
// visualMap: { //图例值控制
|
||||
// min: 0,
|
||||
// max: 1,
|
||||
// calculable: true,
|
||||
// show: true,
|
||||
// color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
|
||||
// textStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
geo: {
|
||||
map: 'china',
|
||||
zoom: 1.2,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
color:'#f00'
|
||||
},
|
||||
symbol:'circle' ,//标记的图形，还可以设置图片
|
||||
symbolSize:function(val){
|
||||
return val[2]
|
||||
},
|
||||
data:[
|
||||
{
|
||||
name:'北京',
|
||||
value:[116.405285,39.904989,20]
|
||||
roam: true, //是否允许缩放
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(51, 69, 89, .5)', //地图背景色
|
||||
borderColor: '#516a89', //省市边界线00fcff 516a89
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
name:'上海',
|
||||
value:[121.472644,31.231706,20]
|
||||
},
|
||||
{
|
||||
name:'珠海',
|
||||
value:[113.52, 22.3,15]
|
||||
emphasis: {
|
||||
color: 'rgba(37, 43, 61, .5)' //悬浮背景
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
series: series
|
||||
};
|
||||
myChart.setOption(option)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,819 +0,0 @@
|
|||
<template>
|
||||
<!-- 原始3d 其余死数据-->
|
||||
<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;">大规模泛金融知识图谱系统</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>
|
||||
板块1
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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 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 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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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%">
|
||||
<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 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 class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
板块2
|
||||
</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>
|
||||
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-1 style="width:100%;height:600px;">
|
||||
<!-- 图谱 -->
|
||||
<iframe src="/static/3d-force-graph/index0.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>
|
||||
板块1
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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 33%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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'
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
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);
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setScale();
|
||||
window.removeEventListener("resize",this.debounce(this.setScale))
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
}
|
||||
}
|
||||
</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;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.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%; //
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,923 +0,0 @@
|
|||
<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">
|
||||
<!-- 第一行3块 三等分flex布局-->
|
||||
<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>
|
||||
|
||||
<!-- 中间第二块 -->
|
||||
<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>
|
||||
|
||||
<!-- 右侧第三块 -->
|
||||
<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>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<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>
|
||||
</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";
|
||||
// data
|
||||
import hongguanfenxi from "./data/hongguanfenxi.json"
|
||||
import lunbo from "./data/lunbo.json"
|
||||
import hangyeyujing from "./data/hangyeyujing.json"
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart,
|
||||
systemRiskComponent,
|
||||
dimensionComponent,
|
||||
marketRiskComponent,
|
||||
marketRiskComponent1
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
compName:'systemRiskComponent',
|
||||
datazoom:[],
|
||||
scale: 0,
|
||||
width: 5760,
|
||||
height: 1080,
|
||||
// 表格设置
|
||||
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: {
|
||||
getNearestWeekday() {
|
||||
// 获取当前日期
|
||||
const today = new Date();
|
||||
|
||||
// 获取当前日期是星期几，0 表示星期日，1 - 6 分别表示星期一到星期六
|
||||
const dayOfWeek = today.getDay();
|
||||
|
||||
if (dayOfWeek === 0) { // 如果是星期日
|
||||
// 距离最近的工作日是星期一，即日期加 1 天
|
||||
today.setDate(today.getDate() - 2 );
|
||||
} else if (dayOfWeek === 6) { // 如果是星期六
|
||||
// 距离最近的工作日是星期一，即日期加 2 天
|
||||
today.setDate(today.getDate() - 1 );
|
||||
}
|
||||
|
||||
// 获取年、月、日
|
||||
const year = today.getFullYear();
|
||||
const month = today.getMonth() + 1; // 月份从 0 开始，所以要加 1
|
||||
const date = today.getDate();
|
||||
|
||||
// 格式化日期
|
||||
return `${year}-${month}-${date}`;
|
||||
},
|
||||
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() {
|
||||
// fetch('/static/3d-force-graph/test.json') // 直接请求本地或远程 JSON 文件
|
||||
// .then(response => response.json()) // 自动解析为 JavaScript 对象
|
||||
// .then(data => {
|
||||
// console.log(data); // 使用解析后的数据
|
||||
// })
|
||||
},
|
||||
mounted() {
|
||||
// 大屏自适应部分
|
||||
this.setScale();
|
||||
window.removeEventListener("resize",this.debounce(this.setScale))
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
|
||||
// 获取股票风险 圆圈类饼图部分
|
||||
//http.get('/warning/get_warning_count/').then((res)=> {
|
||||
// 股票风险json
|
||||
//})
|
||||
|
||||
// 宏观分析 6个折线图
|
||||
// hongguanfenxi json
|
||||
this.date=hongguanfenxi.date
|
||||
this.rate=hongguanfenxi.rate
|
||||
this.macro=hongguanfenxi.macro
|
||||
this.montary=hongguanfenxi.montary
|
||||
this.income=hongguanfenxi.income
|
||||
this.investment=hongguanfenxi.investment
|
||||
this.loan=hongguanfenxi.loan
|
||||
this.lever=hongguanfenxi.lever
|
||||
this.other=hongguanfenxi.other
|
||||
this.whole.push(this.rate)
|
||||
this.whole.push(this.montary)
|
||||
this.whole.push(this.lever)
|
||||
// this.whole.push(this.loan)
|
||||
this.whole.push(this.macro)
|
||||
this.whole.push(this.income)
|
||||
this.whole.push(this.investment)
|
||||
this.whole.push(this.other)
|
||||
|
||||
for(let i = 0; i < 6; i++) {
|
||||
// let chartContainer = 'chartContainer' + i
|
||||
let echart = echarts.init(this.$refs.chartContainer[i])
|
||||
|
||||
const option1 = {
|
||||
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(option1)
|
||||
}
|
||||
|
||||
// 轮播图
|
||||
// lunbo json
|
||||
const nearestWeekday = this.getNearestWeekday()
|
||||
// console.log('nearestWeekday',nearestWeekday);
|
||||
|
||||
const formatData = lunbo.data.map(item => {
|
||||
item.监测时间 = nearestWeekday + item.监测时间.substring(10)
|
||||
return [item.监测时间,item.名称,item.异常关联类型]
|
||||
})
|
||||
const config22 = {
|
||||
header: ['监测时间', '名称', '异常关联类型'],
|
||||
data: formatData,
|
||||
// headerBGC:'black',
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
}
|
||||
// console.log('formatData',formatData);
|
||||
this.config22 = config22
|
||||
|
||||
|
||||
// 健康指数 雷达图
|
||||
let radarData = [
|
||||
{
|
||||
value : [82.44588614888224,25,54.00000000000001,58.56999999999999,20,65,5],
|
||||
name : '纳尔实业'
|
||||
},
|
||||
{
|
||||
value : [50.033,45,58.8,62.73,10,65,50],
|
||||
name : '平安保险'
|
||||
},
|
||||
{
|
||||
value : [43.064,50,53.6,64.23,10,75,50],
|
||||
name : '招商银行'
|
||||
}]
|
||||
console.log('radarData',radarData);
|
||||
const echarts3 = echarts.init(this.$refs.echarts_3)
|
||||
const option = {
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['纳尔实业', '平安保险','招商银行'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['red', 'yellow', 'blue'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
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' }
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : radarData
|
||||
}]
|
||||
};
|
||||
echarts3.setOption(option)
|
||||
|
||||
// 行业预警排行
|
||||
const echarts2 = echarts.init(this.$refs.echarts_2)
|
||||
// hangyeyujing json
|
||||
let xData=[],yData=[]
|
||||
let tmp=hangyeyujing
|
||||
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)
|
||||
|
||||
|
||||
|
||||
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>
|
||||
|
|
@ -30,11 +30,7 @@ import 风险传导 from "@/views/风险传导"
|
|||
import 大屏 from '../bigscreen/大屏.vue'
|
||||
import 大屏1 from '../bigscreen1/大屏.vue'
|
||||
import 大屏2 from '../bigscreen2/大屏.vue'
|
||||
import widerscreen from '../widerscreen/index.vue'
|
||||
import widerscreen1 from '../widerscreen/index1.vue'
|
||||
import widerscreen2 from '../widerscreen/index2.vue'
|
||||
import agriculture from '@/agriculture/index2.vue'
|
||||
import widerscreen0 from '../widerscreen/index0.vue'
|
||||
import agriculture from '@/agriculture/index.vue'
|
||||
import UserManagement from '../views/UserManagement.vue'
|
||||
|
||||
import SSE from "@/views/SSE";
|
||||
|
|
@ -63,92 +59,8 @@ const routes = [
|
|||
//主路由
|
||||
|
||||
{ path:'/',
|
||||
component:Main,
|
||||
redirect:'systematic_risk',//当地址是/时就重定向到market_entities
|
||||
meta : { //加一个自定义obj
|
||||
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||
},
|
||||
children:[
|
||||
//子路由
|
||||
{path:'/home', name:'home',component:Home},//首页
|
||||
{path:'/market_entities',name:'market_entities',component:市场主体分析,
|
||||
meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}
|
||||
},//1
|
||||
{path:'/systematic_risk',name:'systematic_risk', component:系统性风险分析, meta : { //加一个自定义obj
|
||||
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||
},},//2-1
|
||||
|
||||
// {path:'/systemriskV2',name:'systemriskV2', component:systemRiskV2, meta : { //加一个自定义obj
|
||||
// requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||
// },},//2-1
|
||||
|
||||
{path:'/individual_risk',name:'individual_risk', component:个体风险分析, meta : { //加一个自定义obj
|
||||
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||
},},//2-2
|
||||
|
||||
{path:'/influential_entities', name:'influential_entities', component:高影响力主体分析, meta : { //加一个自定义obj
|
||||
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||
},},//3
|
||||
|
||||
{path:'/warning', name:'warning', component:预警服务,
|
||||
meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},//4-1
|
||||
|
||||
{path:'/risk_warning', name:'risk_warning', component:风险预警,
|
||||
meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},//4-1
|
||||
{path:'/abnormal_detection', name:'abnormal_detection', component:异常检测,
|
||||
meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},//4-2
|
||||
{path:'/health', name:'health', component:健康指数, meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},//5
|
||||
{path:'/diffus', name:'diffus', props: true, // 启用路由参数作为组件属性传递
|
||||
component:风险传导, meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},
|
||||
{path:'/pressure', name:'pressure', component:压力测试, meta : { //加一个自定义obj
|
||||
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||
}},//6
|
||||
{path:'/quotation', name:'quotation', component:行情分析, meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},//7
|
||||
{path:'/event_analysis', name:'event_analysis', component:事件分析,
|
||||
meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},//8-1
|
||||
{path:'/event_graph', name:'event_graph', component:事件图谱,
|
||||
meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},//8-2
|
||||
{path:'/knowladgeGraph', name:'knowladgeGraph', component:graphViewV4,meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},
|
||||
|
||||
// 用户管理
|
||||
{path:'/UserManagement',name :'UserManagement',component: UserManagement, meta : { //加一个自定义obj
|
||||
keepAlive:true,
|
||||
requireAuth:true
|
||||
}},
|
||||
|
||||
|
||||
]
|
||||
|
||||
name:'agriculture',
|
||||
component:agriculture,
|
||||
},
|
||||
// 登录
|
||||
{path:'/login',name :'login',component: login},
|
||||
|
|
@ -162,11 +74,7 @@ const routes = [
|
|||
{path:'/bigscreen',name :'bigscreen',component: 大屏,},
|
||||
{path:'/bigscreen1',name :'bigscreen1',component: 大屏1,},
|
||||
{path:'/bigscreen2',name :'bigscreen2',component: 大屏2},
|
||||
{path:'/widerscreen',name :'widerscreen',component: widerscreen},
|
||||
{path:'/widerscreen1',name :'widerscreen1',component: widerscreen1},
|
||||
{path:'/widerscreen2',name :'widerscreen1',component: widerscreen2},
|
||||
{path:'/agriculture',name :'agriculture',component: agriculture},
|
||||
{path:'/widerscreen0',name :'widerscreen0',component: widerscreen0},
|
||||
// {path:'/agriculture',name :'agriculture',component: agriculture},
|
||||
{path:'/test',name :'test',component: test,},
|
||||
{path:'/sse',name :'sse',component: SSE,},
|
||||
{path:'/systemrisk',name :'systemrisk',component: systemRiskV2,}
|
||||
|
|
@ -175,6 +83,7 @@ const routes = [
|
|||
|
||||
//3.创建router实例
|
||||
const router = new VueRouter({
|
||||
mode: 'history', // 去掉url中的#
|
||||
routes
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import axios from 'axios'
|
|||
//
|
||||
const http = axios.create({
|
||||
//通用请求
|
||||
baseURL:'/proxy_url',//后端的地址前缀 本地开发直接请求后端
|
||||
baseURL:process.env.VUE_APP_BASE_API,//后端的地址前缀 本地开发直接请求后端
|
||||
// baseURL:'/api/',//后端的地址前缀 生产环境用来转发
|
||||
// withCredentials:truenpm run serve
|
||||
// async:true,
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1009 B |
Binary file not shown.
|
Before Width: | Height: | Size: 820 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1014 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 289 KiB |
|
|
@ -1,52 +0,0 @@
|
|||
<template>
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
props:{
|
||||
colorsChart:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
dataChart:{
|
||||
type:Array,
|
||||
default:()=>[
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
config:{
|
||||
data: this.dataChart,
|
||||
colors: this.colorsChart,
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:250px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "年度生产量",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14,
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 10,
|
||||
bottom: 25,
|
||||
top: "18%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width:100%;height:350px;;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chinaMap from '@/assets/json/china.json'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initChart();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
echarts.registerMap('china', chinaMap);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
geo:{
|
||||
show:true,
|
||||
type:'map',
|
||||
map:'china',
|
||||
// label:{
|
||||
// show:true, //文字标签显示
|
||||
// color:'#fff',
|
||||
// fontSize:12
|
||||
// },
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#3352c7', //背景色
|
||||
borderColor:'#fff',
|
||||
borderWidth:1
|
||||
},
|
||||
zoom:1.2,
|
||||
emphasis:{ //高亮状态
|
||||
label:{
|
||||
show:true, //文字标签显示
|
||||
color:'#fff',
|
||||
fontSize:14
|
||||
},
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#f60', //背景色
|
||||
borderColor:'#ccc',
|
||||
borderWidth:1
|
||||
},
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
|
||||
coordinateSystem:'geo',//该系列使用的坐标系
|
||||
rippleEffect:{ //涟漪特效相关配置。
|
||||
period:2,
|
||||
brushType:'stroke',
|
||||
scale :5,
|
||||
},
|
||||
label:{ //标签
|
||||
normal:{
|
||||
show:true,
|
||||
position:'right'
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
color:'#f00'
|
||||
},
|
||||
symbol:'circle' ,//标记的图形，还可以设置图片
|
||||
symbolSize:function(val){
|
||||
return val[2]
|
||||
},
|
||||
data:[
|
||||
{
|
||||
name:'北京',
|
||||
value:[116.405285,39.904989,20]
|
||||
},
|
||||
{
|
||||
name:'上海',
|
||||
value:[121.472644,31.231706,20]
|
||||
},
|
||||
{
|
||||
name:'珠海',
|
||||
value:[113.52, 22.3,15]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<template>
|
||||
<!-- 雷达图 -->
|
||||
<div>
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// 健康指数 雷达图
|
||||
const echarts3 = echarts.init(this.$refs.echarts_3)
|
||||
const option = {
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['纳尔实业', '平安保险','招商银行'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['red', 'yellow', 'blue'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
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' }
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{
|
||||
value : [57.17727272727273,40,27.6,62.900000000000006,10,75,50],
|
||||
name : '郑州银行'
|
||||
},
|
||||
{
|
||||
value : [48.81363636363636,50,44,61.56999999999999,10,75,50],
|
||||
name : '宁波银行'
|
||||
},
|
||||
{
|
||||
value : [46.2,25,38.4,58.91,10,75,50],
|
||||
name : '苏州银行'
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
echarts3.setOption(option)
|
||||
},
|
||||
methods:{
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,322 +0,0 @@
|
|||
<template>
|
||||
<div style="height: 85%;">
|
||||
<div ref="dimension" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
<!-- <div class="warning-component">
|
||||
<div class="warning-dates">
|
||||
<button class="button" @click="changeState">
|
||||
<span class="text">{{ state }}</span>
|
||||
<svg class="arrow" viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
|
||||
</button>
|
||||
<div class="date-item">前日：<span>{{ prevDayDim }}</span></div>
|
||||
<div class="date-item">昨日：<span>{{ yesterdayDim }}</span></div>
|
||||
<div class="date-item">今日：<span>{{ todayDim }}</span></div>
|
||||
<div class="date-item">明日：<span>{{ tomorrowDim }}</span></div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
import dimension from "../data/dimension.json"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// xData:[],
|
||||
// yData: [],
|
||||
// legend:String,
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
datazoom:[],
|
||||
state:'个体风险状态',
|
||||
individualRisk:[],
|
||||
structureRisk:[],
|
||||
spillRisk:[],
|
||||
volatilityRisk:[],
|
||||
markArea:[],
|
||||
date:[],
|
||||
detail:'',
|
||||
prevDayDim:'',
|
||||
yesterdayDim:'',
|
||||
todayDim:'',
|
||||
tomorrowDim:'',
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
},
|
||||
watch:{
|
||||
// prevDayDim(){
|
||||
// return this.detail[this.state][0]
|
||||
// },
|
||||
// yesterdayDim(){
|
||||
// return this.detail[this.state][1]
|
||||
// },
|
||||
// todayDim(){
|
||||
// return this.detail[this.state][2]
|
||||
// },
|
||||
// tomorrowDim(){
|
||||
// return this.detail[this.state][3]
|
||||
// },
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
|
||||
},
|
||||
state(){
|
||||
|
||||
this.prevDayDim=this.detail[this.state][0]
|
||||
this.yesterdayDim=this.detail[this.state][1]
|
||||
this.todayDim=this.detail[this.state][2]
|
||||
this.tomorrowDim=this.detail[this.state][3]
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
// dimension json
|
||||
this.date=dimension.date
|
||||
this.individualRisk=dimension.individual
|
||||
this.structureRisk=dimension.structure
|
||||
this.spillRisk=dimension.spill
|
||||
this.volatilityRisk=dimension.volatility
|
||||
this.detail=dimension.detail
|
||||
this.markArea=dimension.markarea
|
||||
this.prevDayDim=dimension.detail[this.state][0]
|
||||
this.yesterdayDim=dimension.detail[this.state][1]
|
||||
this.todayDim=dimension.detail[this.state][2]
|
||||
this.tomorrowDim=dimension.detail[this.state][3]
|
||||
this.initChart()
|
||||
|
||||
},
|
||||
changeState(){
|
||||
let lis=['个体风险状态','风险关联与溢出','市场系统结构','市场波动和趋势']
|
||||
this.state=lis.indexOf(this.state)+1>3? '个体风险状态':lis[lis.indexOf(this.state)+1]
|
||||
},
|
||||
initChart(){
|
||||
/*
|
||||
示例参考如下
|
||||
* https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
|
||||
*
|
||||
* https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
|
||||
*
|
||||
* */
|
||||
var myChart = echarts.init(this.$refs["dimension"])
|
||||
let option = {
|
||||
title: {
|
||||
text: '系统性风险指数维度分析',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top:30,
|
||||
data: ['个体风险状态', '风险关联与溢出', '市场系统结构', '市场波动和趋势'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
start:80,
|
||||
end:100,
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: [{
|
||||
name: '个体风险状态',
|
||||
type: 'line',
|
||||
smooth:0.8,
|
||||
data: this.individualRisk
|
||||
},
|
||||
{
|
||||
name: '风险关联与溢出',
|
||||
type: 'line',
|
||||
smooth:0.8,
|
||||
data: this.spillRisk
|
||||
},
|
||||
{
|
||||
name: '市场系统结构',
|
||||
type: 'line',
|
||||
smooth:0.8,
|
||||
data: this.structureRisk
|
||||
},
|
||||
{
|
||||
name: '市场波动和趋势',
|
||||
type: 'line',
|
||||
smooth:0.8,
|
||||
data: this.volatilityRisk,
|
||||
markArea:{
|
||||
label: { // 分界线上的文字标签
|
||||
// position: 'end',
|
||||
formatter: '预测值'
|
||||
},
|
||||
data:[[{
|
||||
xAxis:this.markArea[0]},
|
||||
{
|
||||
xAxis:this.markArea[1]},
|
||||
]]
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option);
|
||||
// this.$nextTick(()=>{
|
||||
// myChart.dispatchAction({
|
||||
// type: 'dataZoom',
|
||||
// batch: [{
|
||||
// // 第一个 dataZoom 组件
|
||||
// start: this.datazoom[0],
|
||||
// end: this.datazoom[1]
|
||||
// }]
|
||||
// })
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.button {
|
||||
border-radius: 7px;
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
border: 3px solid rgb(94, 255, 209);
|
||||
background-color: rgb(94, 255, 209);
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//background-color: rgb(255, 255, 255);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.arrow path {
|
||||
fill: rgb(19, 19, 19);
|
||||
}
|
||||
|
||||
.button:hover .arrow {
|
||||
animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
0% {
|
||||
transform: translateX(-8px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
.warning-component {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.warning-dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
//margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
margin: 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.warning-recent {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
import geti from "../data/tabs-geti.json"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
// tabs geti json
|
||||
that.date=geti.date
|
||||
that.result=geti.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
|
||||
*
|
||||
* https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
|
||||
*
|
||||
* */
|
||||
var myChart = echarts.init(this.$refs["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
import guanlian from "../data/tabs-guanlian.json"
|
||||
import shichang from "../data/tabs-shichang.json"
|
||||
import bodong from "../data/tabs-bodong.json"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
titleMap:{
|
||||
'风险关联与溢出':guanlian,
|
||||
'市场系统结构':shichang,
|
||||
'市场波动和趋势':bodong,
|
||||
},
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
let title = that.title
|
||||
console.log('title',title);
|
||||
console.log('titleMap',that.titleMap);
|
||||
|
||||
const data = that.titleMap[title]
|
||||
// tabs xxx json
|
||||
that.date=data.date
|
||||
that.result=data.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
|
||||
*
|
||||
* https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
|
||||
*
|
||||
* */
|
||||
var myChart = echarts.init(this.$refs["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,368 +0,0 @@
|
|||
<template>
|
||||
<div style="height: 85%;">
|
||||
<div style="display: flex;height: 100%;">
|
||||
<div ref="whole risk" style=" float: left;width: 98%; height: 100%;margin-left: 15px;margin-top: 0px;margin-right: 0px"></div>
|
||||
<div ref="future" style=" float: left; width: 2%; height: 100%;margin-left: -168px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
<!-- <div class="warning-component">
|
||||
<div class="warning-dates">
|
||||
<div class="date-item">前日：<span>{{ prevDayRisk }}</span></div>
|
||||
<div class="date-item">昨日：<span>{{ yesterdayRisk }}</span></div>
|
||||
<div class="date-item">今日：<span>{{ todayRisk }}</span></div>
|
||||
<div class="date-item">明日：<span>{{ tomorrowRisk }}</span></div>
|
||||
<div class="warning-recent">
|
||||
最近预警：<span>{{ warningRisk }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
import { color } from "d3";
|
||||
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return {
|
||||
yMax:2,
|
||||
yMin:0,
|
||||
prevDayRisk:'',
|
||||
yesterdayRisk:'',
|
||||
todayRisk:'',
|
||||
tomorrowRisk:'',
|
||||
warningRisk:'',
|
||||
riskData:[],
|
||||
markLine: [],
|
||||
markPoint: [],
|
||||
markArea:[],
|
||||
future:[],
|
||||
datazoom:[]
|
||||
}
|
||||
},
|
||||
props:{
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
},
|
||||
yMax(newVal){
|
||||
console.log(newVal)
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
http.get('/risk/whole/').then((res)=>{
|
||||
this.riskData=res.data.wholerisk
|
||||
this.markPoint=res.data.markpoint
|
||||
this.markLine=res.data.markline
|
||||
this.markArea=res.data.markarea
|
||||
this.prevDayRisk=res.data.detail[0]
|
||||
this.yesterdayRisk=res.data.detail[1]
|
||||
this.todayRisk=res.data.detail[2]
|
||||
this.tomorrowRisk=res.data.detail[3]
|
||||
this.warningRisk=res.data.detail[4]
|
||||
this.future=res.data.future
|
||||
// console.log(this.riskData,this.markLine,this.markPoint[0])
|
||||
this.initChart()
|
||||
})
|
||||
|
||||
// this.initChart(this.dat)
|
||||
},
|
||||
initChart(){
|
||||
/*
|
||||
示例参考如下
|
||||
* https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
|
||||
*
|
||||
* https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
|
||||
*
|
||||
* */
|
||||
let data=this.riskData
|
||||
const future=this.future
|
||||
var myChart = echarts.init(this.$refs["whole risk"])
|
||||
var myChartFuture= echarts.init(this.$refs["future"])
|
||||
let option = {
|
||||
title: {
|
||||
text: '系统性风险指数',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel:{
|
||||
fontSize:5,
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
data: data.map(function (item) {
|
||||
return item[0];
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30
|
||||
}],
|
||||
// 根据阈值映射不同颜色
|
||||
visualMap: {
|
||||
top: 10,
|
||||
right: 0,
|
||||
precision:2,
|
||||
pieces: [
|
||||
{
|
||||
gt: 0,
|
||||
lte: parseFloat(this.markLine[0]),
|
||||
color: '#096'
|
||||
},
|
||||
{
|
||||
gt: parseFloat(this.markLine[0]),
|
||||
lte: parseFloat(this.markLine[1]),
|
||||
color: '#ffde33'
|
||||
},
|
||||
],
|
||||
outOfRange: {
|
||||
color: '#fa0744'
|
||||
},
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: '系统性风险指数',
|
||||
type: 'line',
|
||||
data: data.map(function (item) {
|
||||
return item[1];
|
||||
}),
|
||||
//标记极端值
|
||||
markPoint:{
|
||||
symbol:'circle',
|
||||
symbolSize:10,
|
||||
data: [{
|
||||
itemStyle:{
|
||||
//标注的颜色
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'purple' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#258ddc' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
//x轴的index和y值
|
||||
coord: this.markPoint[0] // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
|
||||
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
|
||||
// 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
|
||||
// 而只能写成 [string, string, ...]
|
||||
}]
|
||||
|
||||
},
|
||||
markLine: {
|
||||
//阈值标记线 这里应该是动态的
|
||||
silent: true,
|
||||
symbol:'none',
|
||||
label:{ position:'middle',},
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
data: [{
|
||||
yAxis: this.markLine[0]
|
||||
}, {
|
||||
yAxis:this.markLine[1]
|
||||
},
|
||||
]
|
||||
},
|
||||
markArea:{
|
||||
label: { // 分界线上的文字标签
|
||||
// position: 'end',
|
||||
formatter: '预测值'
|
||||
},
|
||||
data:[[{
|
||||
xAxis:this.markArea[0]},
|
||||
{
|
||||
xAxis:this.markArea[1]
|
||||
// x:'100%'
|
||||
},
|
||||
]]
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
let opt2={
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid:
|
||||
|
||||
{backgroundColor: '#eeb0ae',
|
||||
left:'0%',
|
||||
show:true,
|
||||
zlevel:0,
|
||||
}
|
||||
,
|
||||
xAxis:
|
||||
{
|
||||
data:[{value:'未来一个月'}],
|
||||
axisLabel:{
|
||||
fontSize:5
|
||||
}
|
||||
// gridIndex: 0,
|
||||
},
|
||||
yAxis: {
|
||||
min:0.8,
|
||||
max:2,
|
||||
type: 'value',
|
||||
show:false,
|
||||
// boundaryGap: false,
|
||||
// gridIndex: 1
|
||||
},
|
||||
series: {
|
||||
type: 'boxplot',
|
||||
boxWidth : [2, 10],
|
||||
itemStyle: {
|
||||
clip: true
|
||||
},
|
||||
data:[{value: this.future,} ],
|
||||
// 确保箱型图显示在折线图之后
|
||||
// zlevel: 3,
|
||||
// 箱型图的x轴数据应对应未来一个月的日期，由于这些日期没有具体值，我们使用null，ECharts会自动处
|
||||
// ... 箱型图其他配置，如颜色、样式等
|
||||
markArea:{
|
||||
label: { // 分界线上的文字标签
|
||||
// position: 'end',
|
||||
formatter: '预测值'
|
||||
},
|
||||
itemStyle:{
|
||||
color:'yellow'
|
||||
}
|
||||
// data: [[ {
|
||||
// name: '平均值到最大值',
|
||||
// type: 'average'
|
||||
// },
|
||||
// {
|
||||
// type: 'max'
|
||||
// }]]
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return [
|
||||
// 'Experiment ' + param.name + ': ',
|
||||
'最大值: ' + future[4],
|
||||
'均值+标准差: ' + future[3],
|
||||
'中位数: ' +future[2],
|
||||
'均值-标准差: ' + future[1],
|
||||
'最小值: ' + future[0]
|
||||
].join('<br/>');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChartFuture.setOption(opt2)
|
||||
const that=this
|
||||
myChart.on('datazoom', function (params) {
|
||||
// Y轴最大值
|
||||
this.yMax = myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
|
||||
// Y轴最小值
|
||||
this.yMin = myChart.getModel().getComponent('yAxis').axis.scale._extent[0];
|
||||
|
||||
that.$nextTick(() => {
|
||||
// 设置 myChartFuture 的 y 轴值
|
||||
myChartFuture.setOption({
|
||||
yAxis: {
|
||||
min: this.yMin,
|
||||
max: this.yMax
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.warning-component {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.warning-dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
margin: 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.warning-recent {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"信息传输、软件和信息技术服务业-电信、广播电视和卫星传输服务": 3,
|
||||
"制造业-农副食品加工业": 1,
|
||||
"制造业-医药制造业": 6,
|
||||
"制造业-汽车制造业": 2,
|
||||
"制造业-纺织服装、服饰业": 1,
|
||||
"制造业-计算机、通信和其他电子设备制造业": 2,
|
||||
"制造业-酒、饮料和精制茶制造业": 1,
|
||||
"制造业-金属制品业": 1,
|
||||
"制造业-非金属矿物制品业": 1,
|
||||
"房地产业-房地产业": 1,
|
||||
"批发和零售业-批发业": 2,
|
||||
"采矿业-有色金属矿采选业": 1,
|
||||
"金融业-货币金融服务": 12,
|
||||
"金融业-资本市场服务": 3
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"低风险": 1100,
|
||||
"中风险": 1184,
|
||||
"高风险": 1254,
|
||||
"综合风险水平": 396.2488397196951,
|
||||
"time": "2023_3"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,168 +0,0 @@
|
|||
{
|
||||
"date": [
|
||||
"2015-04-01",
|
||||
"2015-07-01",
|
||||
"2015-10-01",
|
||||
"2016-01-01",
|
||||
"2016-04-01",
|
||||
"2016-07-01",
|
||||
"2016-10-01",
|
||||
"2017-01-01",
|
||||
"2017-04-01",
|
||||
"2017-07-01",
|
||||
"2017-10-01",
|
||||
"2018-01-01",
|
||||
"2018-04-01",
|
||||
"2018-07-01",
|
||||
"2018-10-01",
|
||||
"2019-01-01",
|
||||
"2019-04-01",
|
||||
"2019-07-01",
|
||||
"2019-10-01",
|
||||
"2020-01-01",
|
||||
"2020-04-01",
|
||||
"2020-07-01",
|
||||
"2020-10-01",
|
||||
"2021-01-01",
|
||||
"2021-04-01",
|
||||
"2021-07-01",
|
||||
"2021-10-01",
|
||||
"2022-01-01",
|
||||
"2022-04-01",
|
||||
"2022-07-01",
|
||||
"2022-10-01",
|
||||
"2023-01-01",
|
||||
"2023-04-01",
|
||||
"2023-07-01",
|
||||
"2023-10-01",
|
||||
"2024-01-01"
|
||||
],
|
||||
"result": [
|
||||
{
|
||||
"name": "同配性",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0.4985,
|
||||
0.2985,
|
||||
0.2319,
|
||||
0.4506,
|
||||
0.5392,
|
||||
0.6333,
|
||||
0.7169,
|
||||
0.7459,
|
||||
0.042,
|
||||
0.9029,
|
||||
0.3071,
|
||||
0.8063,
|
||||
0.2468,
|
||||
0.949,
|
||||
0.3416,
|
||||
0.0806,
|
||||
0.4001,
|
||||
0,
|
||||
0.2062,
|
||||
0.1758,
|
||||
0.4168,
|
||||
0.5231,
|
||||
0.4925,
|
||||
0.6429,
|
||||
0.2692,
|
||||
0.6903,
|
||||
0.2667,
|
||||
0.4596,
|
||||
0.1904,
|
||||
0.322,
|
||||
0.2009,
|
||||
0.396,
|
||||
0.26,
|
||||
0.2573,
|
||||
0.3491,
|
||||
0.1518
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "密度变化",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0.3902,
|
||||
0.6051,
|
||||
0.3781,
|
||||
0.5526,
|
||||
0.2318,
|
||||
0.5384,
|
||||
0.1158,
|
||||
0,
|
||||
0.2995,
|
||||
0.4364,
|
||||
0.3556,
|
||||
0.6869,
|
||||
0.3709,
|
||||
0.6738,
|
||||
0.3697,
|
||||
0.5522,
|
||||
0.3703,
|
||||
0.5199,
|
||||
0.372,
|
||||
0.5106,
|
||||
0.3853,
|
||||
0.3365,
|
||||
0.3768,
|
||||
0.3294,
|
||||
0.3586,
|
||||
0.3214,
|
||||
0.3672,
|
||||
0.4708,
|
||||
0.375,
|
||||
0.593,
|
||||
0.3759,
|
||||
0.5206,
|
||||
0.3823,
|
||||
0.4553,
|
||||
0.3963,
|
||||
0.3862
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "聚类系数",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0.372,
|
||||
0.4272,
|
||||
0.422,
|
||||
0.4679,
|
||||
0.1678,
|
||||
0.4082,
|
||||
0.2555,
|
||||
0.4204,
|
||||
0.9374,
|
||||
1,
|
||||
0.5736,
|
||||
0.36,
|
||||
0.2301,
|
||||
0.2503,
|
||||
0.1429,
|
||||
0.3658,
|
||||
0.1854,
|
||||
0.4307,
|
||||
0.4965,
|
||||
0.3533,
|
||||
0.4599,
|
||||
0.4534,
|
||||
0.4034,
|
||||
0.4552,
|
||||
0.0888,
|
||||
0.3441,
|
||||
0.2778,
|
||||
0.3663,
|
||||
0.406,
|
||||
0.4589,
|
||||
0.3206,
|
||||
0.5127,
|
||||
0.3964,
|
||||
0.6401,
|
||||
0.3115,
|
||||
0.6732
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,819 +0,0 @@
|
|||
<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;">大规模泛金融知识图谱系统</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>
|
||||
板块1
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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 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 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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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%">
|
||||
<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 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 class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
板块2
|
||||
</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>
|
||||
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-1 style="width:100%;height:600px;">
|
||||
<!-- 图谱 -->
|
||||
<iframe src="/static/3d-force-graph/index.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>
|
||||
板块1
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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 33%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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'
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
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);
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setScale();
|
||||
window.removeEventListener("resize",this.debounce(this.setScale))
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
}
|
||||
}
|
||||
</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;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.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%; //
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -1,819 +0,0 @@
|
|||
<template>
|
||||
<!-- 原始3d 其余死数据-->
|
||||
<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;">大规模泛金融知识图谱系统</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>
|
||||
板块1
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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 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 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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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%">
|
||||
<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 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 class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
板块2
|
||||
</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>
|
||||
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-1 style="width:100%;height:600px;">
|
||||
<!-- 图谱 -->
|
||||
<iframe src="/static/3d-force-graph/index0.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>
|
||||
板块1
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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 33%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</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-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<div class="charts-row" style="">
|
||||
<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 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'
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
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);
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.setScale();
|
||||
window.removeEventListener("resize",this.debounce(this.setScale))
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
}
|
||||
}
|
||||
</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;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.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%; //
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,918 +0,0 @@
|
|||
<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>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<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>
|
||||
</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";
|
||||
// data
|
||||
import hongguanfenxi from "./data/hongguanfenxi.json"
|
||||
import lunbo from "./data/lunbo.json"
|
||||
import hangyeyujing from "./data/hangyeyujing.json"
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart,
|
||||
systemRiskComponent,
|
||||
dimensionComponent,
|
||||
marketRiskComponent,
|
||||
marketRiskComponent1
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
compName:'systemRiskComponent',
|
||||
datazoom:[],
|
||||
scale: 0,
|
||||
width: 5760,
|
||||
height: 1080,
|
||||
// 表格设置
|
||||
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: {
|
||||
getNearestWeekday() {
|
||||
// 获取当前日期
|
||||
const today = new Date();
|
||||
|
||||
// 获取当前日期是星期几，0 表示星期日，1 - 6 分别表示星期一到星期六
|
||||
const dayOfWeek = today.getDay();
|
||||
|
||||
if (dayOfWeek === 0) { // 如果是星期日
|
||||
// 距离最近的工作日是星期一，即日期加 1 天
|
||||
today.setDate(today.getDate() - 2 );
|
||||
} else if (dayOfWeek === 6) { // 如果是星期六
|
||||
// 距离最近的工作日是星期一，即日期加 2 天
|
||||
today.setDate(today.getDate() - 1 );
|
||||
}
|
||||
|
||||
// 获取年、月、日
|
||||
const year = today.getFullYear();
|
||||
const month = today.getMonth() + 1; // 月份从 0 开始，所以要加 1
|
||||
const date = today.getDate();
|
||||
|
||||
// 格式化日期
|
||||
return `${year}-${month}-${date}`;
|
||||
},
|
||||
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));
|
||||
|
||||
// 获取股票风险 圆圈类饼图部分
|
||||
//http.get('/warning/get_warning_count/').then((res)=> {
|
||||
// 股票风险json
|
||||
//})
|
||||
|
||||
// 宏观分析 6个折线图
|
||||
// hongguanfenxi json
|
||||
this.date=hongguanfenxi.date
|
||||
this.rate=hongguanfenxi.rate
|
||||
this.macro=hongguanfenxi.macro
|
||||
this.montary=hongguanfenxi.montary
|
||||
this.income=hongguanfenxi.income
|
||||
this.investment=hongguanfenxi.investment
|
||||
this.loan=hongguanfenxi.loan
|
||||
this.lever=hongguanfenxi.lever
|
||||
this.other=hongguanfenxi.other
|
||||
this.whole.push(this.rate)
|
||||
this.whole.push(this.montary)
|
||||
this.whole.push(this.lever)
|
||||
// this.whole.push(this.loan)
|
||||
this.whole.push(this.macro)
|
||||
this.whole.push(this.income)
|
||||
this.whole.push(this.investment)
|
||||
this.whole.push(this.other)
|
||||
|
||||
for(let i = 0; i < 6; i++) {
|
||||
// let chartContainer = 'chartContainer' + i
|
||||
let echart = echarts.init(this.$refs.chartContainer[i])
|
||||
|
||||
const option1 = {
|
||||
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(option1)
|
||||
}
|
||||
|
||||
// 轮播图
|
||||
// lunbo json
|
||||
const nearestWeekday = this.getNearestWeekday()
|
||||
// console.log('nearestWeekday',nearestWeekday);
|
||||
|
||||
const formatData = lunbo.data.map(item => {
|
||||
item.监测时间 = nearestWeekday + item.监测时间.substring(10)
|
||||
return [item.监测时间,item.名称,item.异常关联类型]
|
||||
})
|
||||
const config22 = {
|
||||
header: ['监测时间', '名称', '异常关联类型'],
|
||||
data: formatData,
|
||||
// headerBGC:'black',
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
}
|
||||
// console.log('formatData',formatData);
|
||||
this.config22 = config22
|
||||
|
||||
|
||||
// 健康指数 雷达图
|
||||
let radarData = [
|
||||
{
|
||||
value : [82.44588614888224,25,54.00000000000001,58.56999999999999,20,65,5],
|
||||
name : '纳尔实业'
|
||||
},
|
||||
{
|
||||
value : [50.033,45,58.8,62.73,10,65,50],
|
||||
name : '平安保险'
|
||||
},
|
||||
{
|
||||
value : [43.064,50,53.6,64.23,10,75,50],
|
||||
name : '招商银行'
|
||||
}]
|
||||
console.log('radarData',radarData);
|
||||
const echarts3 = echarts.init(this.$refs.echarts_3)
|
||||
const option = {
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['纳尔实业', '平安保险','招商银行'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['red', 'yellow', 'blue'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
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' }
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : radarData
|
||||
}]
|
||||
};
|
||||
echarts3.setOption(option)
|
||||
|
||||
// 行业预警排行
|
||||
const echarts2 = echarts.init(this.$refs.echarts_2)
|
||||
// hangyeyujing json
|
||||
let xData=[],yData=[]
|
||||
let tmp=hangyeyujing
|
||||
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)
|
||||
|
||||
|
||||
|
||||
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>
|
||||
|
|
@ -5,13 +5,14 @@ module.exports = defineConfig({
|
|||
publicPath: '/',
|
||||
devServer: {
|
||||
proxy: {
|
||||
"/proxy_url": { // /proxy_url 这个用来和根路径 baseURL 进行匹配
|
||||
target: 'http://61.240.140.173:8000', // 这个是填写跨域的请求域名+端口号，也就是要请求的URL(不包含URL路径)
|
||||
changeOrigin: true, // 是否允许跨域请求，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
|
||||
pathRewrite: { // 路径重写
|
||||
'^/proxy_url': '/' // 替换target中的请求地址，原请求为 http://61.240.140.173:8000/issue/issue_analyse 实际请求为 http://61.240.140.173:8000/proxy_url/issue/issue_analyse
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://192.168.3.18:56000`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user