中间3D初版；左侧第一板块初版开发
This commit is contained in:
GongDragon
parent
0efd65d8fc
commit
d96d3a1025
|
|
@ -7,22 +7,74 @@
|
|||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
<div style="position: absolute; top: 5px; right: 5px;">
|
||||
<button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
|
||||
暂停旋转
|
||||
</button>
|
||||
</div>
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
const distance = 500;
|
||||
let isRotationActive = true;
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 200;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
// const N = 300;
|
||||
// const gData = {
|
||||
// nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/7) })),
|
||||
// links: [...Array(N).keys()]
|
||||
// .filter(id => id)
|
||||
// .map(id => ({
|
||||
// source: id,
|
||||
// target: Math.round(Math.random() * (id-1))
|
||||
// }))
|
||||
// };
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData);
|
||||
// .graphData(gData)
|
||||
.jsonUrl('./miserables.json')
|
||||
.nodeAutoColorBy('group')
|
||||
// .nodeLabel('id')
|
||||
// .linkDirectionalParticles("value")
|
||||
// .linkDirectionalParticleWidth(2)
|
||||
// .linkDirectionalParticleSpeed(d => d.value * 0.001)
|
||||
// .linkWidth(2)
|
||||
.nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
|
||||
const sprite = new SpriteText(node.id);
|
||||
sprite.material.depthWrite = false; // make sprite background transparent
|
||||
sprite.color = node.color;// node.color
|
||||
sprite.textHeight = 8;
|
||||
return sprite;
|
||||
})
|
||||
.linkDirectionalArrowLength(3)// 让边带上箭头
|
||||
.linkDirectionalArrowRelPos(1)// 设置箭头位置
|
||||
.cameraPosition({ z: distance })
|
||||
|
||||
// Spread nodes a little wider
|
||||
// Graph.d3Force('charge').strength(-120);
|
||||
|
||||
// camera orbit
|
||||
let angle = 0;
|
||||
let time = setInterval(() => {
|
||||
if (isRotationActive) {
|
||||
Graph.cameraPosition({
|
||||
x: distance * Math.sin(angle),
|
||||
y: 0,
|
||||
z: distance * Math.cos(angle),
|
||||
});
|
||||
angle += Math.PI / 300;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
document.getElementById('rotationToggle').addEventListener('click', event => {
|
||||
if(isRotationActive){
|
||||
isRotationActive = !isRotationActive
|
||||
}else{
|
||||
isRotationActive = !isRotationActive
|
||||
}
|
||||
event.target.innerHTML = `${(isRotationActive ? '暂停' : '重置')} 旋转`;
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
28
public/static/3d-force-graph/index0.html
Normal file
28
public/static/3d-force-graph/index0.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="3d-force-graph.min.js"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 1500;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
95
public/static/3d-force-graph/index1.html
Normal file
95
public/static/3d-force-graph/index1.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="3d-force-graph.min.js"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
<div style="position: absolute; top: 5px; right: 5px;">
|
||||
<button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
|
||||
暂停旋转
|
||||
</button>
|
||||
</div>
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
const distance = 2500;
|
||||
let isRotationActive = true;
|
||||
|
||||
// Random tree
|
||||
const N = 1500;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/300) })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData)
|
||||
// .jsonUrl('./miserables.json')
|
||||
.nodeAutoColorBy('group')
|
||||
.nodeLabel('id')
|
||||
.linkDirectionalParticles(4)
|
||||
.linkDirectionalParticleWidth(2)
|
||||
.linkDirectionalParticleSpeed(d => 4 * 0.001)// d.value
|
||||
.linkWidth(2)
|
||||
// .nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
|
||||
// const sprite = new SpriteText(node.id);
|
||||
// sprite.material.depthWrite = false; // make sprite background transparent
|
||||
// sprite.color = node.color;// node.color
|
||||
// sprite.textHeight = 8;
|
||||
// return sprite;
|
||||
// })
|
||||
// .linkDirectionalArrowLength(3)// 让边带上箭头
|
||||
// .linkDirectionalArrowRelPos(1)// 设置箭头位置
|
||||
.onNodeClick(node => {
|
||||
// Aim at node from outside it
|
||||
const distance = 2400;
|
||||
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
|
||||
|
||||
const newPos = node.x || node.y || node.z
|
||||
? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
|
||||
: { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)
|
||||
|
||||
Graph.cameraPosition(
|
||||
newPos, // new position
|
||||
node, // lookAt ({ x, y, z })
|
||||
3000 // ms transition duration
|
||||
)
|
||||
})
|
||||
.cameraPosition({ z: distance })
|
||||
|
||||
// Spread nodes a little wider
|
||||
// Graph.d3Force('charge').strength(-120);
|
||||
|
||||
// camera orbit
|
||||
let angle = 0;
|
||||
let time = setInterval(() => {
|
||||
if (isRotationActive) {
|
||||
Graph.cameraPosition({
|
||||
x: distance * Math.sin(angle),
|
||||
y: 0,
|
||||
z: distance * Math.cos(angle),
|
||||
});
|
||||
angle += Math.PI / 400;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
document.getElementById('rotationToggle').addEventListener('click', event => {
|
||||
if(isRotationActive){
|
||||
isRotationActive = !isRotationActive
|
||||
}else{
|
||||
isRotationActive = !isRotationActive
|
||||
}
|
||||
event.target.innerHTML = `${(isRotationActive ? '暂停' : '重置')} 旋转`;
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
337
public/static/3d-force-graph/miserables.json
Normal file
337
public/static/3d-force-graph/miserables.json
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
{
|
||||
"nodes": [
|
||||
{"id": "Myriel", "group": 1},
|
||||
{"id": "Napoleon", "group": 1},
|
||||
{"id": "Mlle.Baptistine", "group": 1},
|
||||
{"id": "Mme.Magloire", "group": 1},
|
||||
{"id": "CountessdeLo", "group": 1},
|
||||
{"id": "Geborand", "group": 1},
|
||||
{"id": "Champtercier", "group": 1},
|
||||
{"id": "Cravatte", "group": 1},
|
||||
{"id": "Count", "group": 1},
|
||||
{"id": "OldMan", "group": 1},
|
||||
{"id": "Labarre", "group": 2},
|
||||
{"id": "Valjean", "group": 2},
|
||||
{"id": "Marguerite", "group": 3},
|
||||
{"id": "Mme.deR", "group": 2},
|
||||
{"id": "Isabeau", "group": 2},
|
||||
{"id": "Gervais", "group": 2},
|
||||
{"id": "Tholomyes", "group": 3},
|
||||
{"id": "Listolier", "group": 3},
|
||||
{"id": "Fameuil", "group": 3},
|
||||
{"id": "Blacheville", "group": 3},
|
||||
{"id": "Favourite", "group": 3},
|
||||
{"id": "Dahlia", "group": 3},
|
||||
{"id": "Zephine", "group": 3},
|
||||
{"id": "Fantine", "group": 3},
|
||||
{"id": "Mme.Thenardier", "group": 4},
|
||||
{"id": "Thenardier", "group": 4},
|
||||
{"id": "Cosette", "group": 5},
|
||||
{"id": "Javert", "group": 4},
|
||||
{"id": "Fauchelevent", "group": 0},
|
||||
{"id": "Bamatabois", "group": 2},
|
||||
{"id": "Perpetue", "group": 3},
|
||||
{"id": "Simplice", "group": 2},
|
||||
{"id": "Scaufflaire", "group": 2},
|
||||
{"id": "Woman1", "group": 2},
|
||||
{"id": "Judge", "group": 2},
|
||||
{"id": "Champmathieu", "group": 2},
|
||||
{"id": "Brevet", "group": 2},
|
||||
{"id": "Chenildieu", "group": 2},
|
||||
{"id": "Cochepaille", "group": 2},
|
||||
{"id": "Pontmercy", "group": 4},
|
||||
{"id": "Boulatruelle", "group": 6},
|
||||
{"id": "Eponine", "group": 4},
|
||||
{"id": "Anzelma", "group": 4},
|
||||
{"id": "Woman2", "group": 5},
|
||||
{"id": "MotherInnocent", "group": 0},
|
||||
{"id": "Gribier", "group": 0},
|
||||
{"id": "Jondrette", "group": 7},
|
||||
{"id": "Mme.Burgon", "group": 7},
|
||||
{"id": "Gavroche", "group": 8},
|
||||
{"id": "Gillenormand", "group": 5},
|
||||
{"id": "Magnon", "group": 5},
|
||||
{"id": "Mlle.Gillenormand", "group": 5},
|
||||
{"id": "Mme.Pontmercy", "group": 5},
|
||||
{"id": "Mlle.Vaubois", "group": 5},
|
||||
{"id": "Lt.Gillenormand", "group": 5},
|
||||
{"id": "Marius", "group": 8},
|
||||
{"id": "BaronessT", "group": 5},
|
||||
{"id": "Mabeuf", "group": 8},
|
||||
{"id": "Enjolras", "group": 8},
|
||||
{"id": "Combeferre", "group": 8},
|
||||
{"id": "Prouvaire", "group": 8},
|
||||
{"id": "Feuilly", "group": 8},
|
||||
{"id": "Courfeyrac", "group": 8},
|
||||
{"id": "Bahorel", "group": 8},
|
||||
{"id": "Bossuet", "group": 8},
|
||||
{"id": "Joly", "group": 8},
|
||||
{"id": "Grantaire", "group": 8},
|
||||
{"id": "MotherPlutarch", "group": 9},
|
||||
{"id": "Gueulemer", "group": 4},
|
||||
{"id": "Babet", "group": 4},
|
||||
{"id": "Claquesous", "group": 4},
|
||||
{"id": "Montparnasse", "group": 4},
|
||||
{"id": "Toussaint", "group": 5},
|
||||
{"id": "Child1", "group": 10},
|
||||
{"id": "Child2", "group": 10},
|
||||
{"id": "Brujon", "group": 4},
|
||||
{"id": "Mme.Hucheloup", "group": 8}
|
||||
],
|
||||
"links": [
|
||||
{"source": "Napoleon", "target": "Myriel", "value": 1},
|
||||
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
|
||||
{"source": "Mme.Magloire", "target": "Myriel", "value": 10},
|
||||
{"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
|
||||
{"source": "CountessdeLo", "target": "Myriel", "value": 1},
|
||||
{"source": "Geborand", "target": "Myriel", "value": 1},
|
||||
{"source": "Champtercier", "target": "Myriel", "value": 1},
|
||||
{"source": "Cravatte", "target": "Myriel", "value": 1},
|
||||
{"source": "Count", "target": "Myriel", "value": 2},
|
||||
{"source": "OldMan", "target": "Myriel", "value": 1},
|
||||
{"source": "Valjean", "target": "Labarre", "value": 1},
|
||||
{"source": "Valjean", "target": "Mme.Magloire", "value": 3},
|
||||
{"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
|
||||
{"source": "Valjean", "target": "Myriel", "value": 5},
|
||||
{"source": "Marguerite", "target": "Valjean", "value": 1},
|
||||
{"source": "Mme.deR", "target": "Valjean", "value": 1},
|
||||
{"source": "Isabeau", "target": "Valjean", "value": 1},
|
||||
{"source": "Gervais", "target": "Valjean", "value": 1},
|
||||
{"source": "Listolier", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Fameuil", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Fameuil", "target": "Listolier", "value": 4},
|
||||
{"source": "Blacheville", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Blacheville", "target": "Listolier", "value": 4},
|
||||
{"source": "Blacheville", "target": "Fameuil", "value": 4},
|
||||
{"source": "Favourite", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Favourite", "target": "Listolier", "value": 3},
|
||||
{"source": "Favourite", "target": "Fameuil", "value": 3},
|
||||
{"source": "Favourite", "target": "Blacheville", "value": 4},
|
||||
{"source": "Dahlia", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Dahlia", "target": "Listolier", "value": 3},
|
||||
{"source": "Dahlia", "target": "Fameuil", "value": 3},
|
||||
{"source": "Dahlia", "target": "Blacheville", "value": 3},
|
||||
{"source": "Dahlia", "target": "Favourite", "value": 5},
|
||||
{"source": "Zephine", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Zephine", "target": "Listolier", "value": 3},
|
||||
{"source": "Zephine", "target": "Fameuil", "value": 3},
|
||||
{"source": "Zephine", "target": "Blacheville", "value": 3},
|
||||
{"source": "Zephine", "target": "Favourite", "value": 4},
|
||||
{"source": "Zephine", "target": "Dahlia", "value": 4},
|
||||
{"source": "Fantine", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Fantine", "target": "Listolier", "value": 3},
|
||||
{"source": "Fantine", "target": "Fameuil", "value": 3},
|
||||
{"source": "Fantine", "target": "Blacheville", "value": 3},
|
||||
{"source": "Fantine", "target": "Favourite", "value": 4},
|
||||
{"source": "Fantine", "target": "Dahlia", "value": 4},
|
||||
{"source": "Fantine", "target": "Zephine", "value": 4},
|
||||
{"source": "Fantine", "target": "Marguerite", "value": 2},
|
||||
{"source": "Fantine", "target": "Valjean", "value": 9},
|
||||
{"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
|
||||
{"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
|
||||
{"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
|
||||
{"source": "Thenardier", "target": "Fantine", "value": 1},
|
||||
{"source": "Thenardier", "target": "Valjean", "value": 12},
|
||||
{"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
|
||||
{"source": "Cosette", "target": "Valjean", "value": 31},
|
||||
{"source": "Cosette", "target": "Tholomyes", "value": 1},
|
||||
{"source": "Cosette", "target": "Thenardier", "value": 1},
|
||||
{"source": "Javert", "target": "Valjean", "value": 17},
|
||||
{"source": "Javert", "target": "Fantine", "value": 5},
|
||||
{"source": "Javert", "target": "Thenardier", "value": 5},
|
||||
{"source": "Javert", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Javert", "target": "Cosette", "value": 1},
|
||||
{"source": "Fauchelevent", "target": "Valjean", "value": 8},
|
||||
{"source": "Fauchelevent", "target": "Javert", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Fantine", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Javert", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Valjean", "value": 2},
|
||||
{"source": "Perpetue", "target": "Fantine", "value": 1},
|
||||
{"source": "Simplice", "target": "Perpetue", "value": 2},
|
||||
{"source": "Simplice", "target": "Valjean", "value": 3},
|
||||
{"source": "Simplice", "target": "Fantine", "value": 2},
|
||||
{"source": "Simplice", "target": "Javert", "value": 1},
|
||||
{"source": "Scaufflaire", "target": "Valjean", "value": 1},
|
||||
{"source": "Woman1", "target": "Valjean", "value": 2},
|
||||
{"source": "Woman1", "target": "Javert", "value": 1},
|
||||
{"source": "Judge", "target": "Valjean", "value": 3},
|
||||
{"source": "Judge", "target": "Bamatabois", "value": 2},
|
||||
{"source": "Champmathieu", "target": "Valjean", "value": 3},
|
||||
{"source": "Champmathieu", "target": "Judge", "value": 3},
|
||||
{"source": "Champmathieu", "target": "Bamatabois", "value": 2},
|
||||
{"source": "Brevet", "target": "Judge", "value": 2},
|
||||
{"source": "Brevet", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Brevet", "target": "Valjean", "value": 2},
|
||||
{"source": "Brevet", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Chenildieu", "target": "Judge", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Brevet", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Valjean", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Cochepaille", "target": "Judge", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Brevet", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Chenildieu", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Valjean", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Pontmercy", "target": "Thenardier", "value": 1},
|
||||
{"source": "Boulatruelle", "target": "Thenardier", "value": 1},
|
||||
{"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
|
||||
{"source": "Eponine", "target": "Thenardier", "value": 3},
|
||||
{"source": "Anzelma", "target": "Eponine", "value": 2},
|
||||
{"source": "Anzelma", "target": "Thenardier", "value": 2},
|
||||
{"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Woman2", "target": "Valjean", "value": 3},
|
||||
{"source": "Woman2", "target": "Cosette", "value": 1},
|
||||
{"source": "Woman2", "target": "Javert", "value": 1},
|
||||
{"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
|
||||
{"source": "MotherInnocent", "target": "Valjean", "value": 1},
|
||||
{"source": "Gribier", "target": "Fauchelevent", "value": 2},
|
||||
{"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
|
||||
{"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
|
||||
{"source": "Gavroche", "target": "Thenardier", "value": 1},
|
||||
{"source": "Gavroche", "target": "Javert", "value": 1},
|
||||
{"source": "Gavroche", "target": "Valjean", "value": 1},
|
||||
{"source": "Gillenormand", "target": "Cosette", "value": 3},
|
||||
{"source": "Gillenormand", "target": "Valjean", "value": 2},
|
||||
{"source": "Magnon", "target": "Gillenormand", "value": 1},
|
||||
{"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
|
||||
{"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
|
||||
{"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
|
||||
{"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
|
||||
{"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
|
||||
{"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
|
||||
{"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
|
||||
{"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
|
||||
{"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
|
||||
{"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
|
||||
{"source": "Marius", "target": "Gillenormand", "value": 12},
|
||||
{"source": "Marius", "target": "Pontmercy", "value": 1},
|
||||
{"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
|
||||
{"source": "Marius", "target": "Cosette", "value": 21},
|
||||
{"source": "Marius", "target": "Valjean", "value": 19},
|
||||
{"source": "Marius", "target": "Tholomyes", "value": 1},
|
||||
{"source": "Marius", "target": "Thenardier", "value": 2},
|
||||
{"source": "Marius", "target": "Eponine", "value": 5},
|
||||
{"source": "Marius", "target": "Gavroche", "value": 4},
|
||||
{"source": "BaronessT", "target": "Gillenormand", "value": 1},
|
||||
{"source": "BaronessT", "target": "Marius", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Marius", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Eponine", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Gavroche", "value": 1},
|
||||
{"source": "Enjolras", "target": "Marius", "value": 7},
|
||||
{"source": "Enjolras", "target": "Gavroche", "value": 7},
|
||||
{"source": "Enjolras", "target": "Javert", "value": 6},
|
||||
{"source": "Enjolras", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Enjolras", "target": "Valjean", "value": 4},
|
||||
{"source": "Combeferre", "target": "Enjolras", "value": 15},
|
||||
{"source": "Combeferre", "target": "Marius", "value": 5},
|
||||
{"source": "Combeferre", "target": "Gavroche", "value": 6},
|
||||
{"source": "Combeferre", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Prouvaire", "target": "Gavroche", "value": 1},
|
||||
{"source": "Prouvaire", "target": "Enjolras", "value": 4},
|
||||
{"source": "Prouvaire", "target": "Combeferre", "value": 2},
|
||||
{"source": "Feuilly", "target": "Gavroche", "value": 2},
|
||||
{"source": "Feuilly", "target": "Enjolras", "value": 6},
|
||||
{"source": "Feuilly", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Feuilly", "target": "Combeferre", "value": 5},
|
||||
{"source": "Feuilly", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Feuilly", "target": "Marius", "value": 1},
|
||||
{"source": "Courfeyrac", "target": "Marius", "value": 9},
|
||||
{"source": "Courfeyrac", "target": "Enjolras", "value": 17},
|
||||
{"source": "Courfeyrac", "target": "Combeferre", "value": 13},
|
||||
{"source": "Courfeyrac", "target": "Gavroche", "value": 7},
|
||||
{"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Courfeyrac", "target": "Eponine", "value": 1},
|
||||
{"source": "Courfeyrac", "target": "Feuilly", "value": 6},
|
||||
{"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
|
||||
{"source": "Bahorel", "target": "Combeferre", "value": 5},
|
||||
{"source": "Bahorel", "target": "Gavroche", "value": 5},
|
||||
{"source": "Bahorel", "target": "Courfeyrac", "value": 6},
|
||||
{"source": "Bahorel", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Bahorel", "target": "Enjolras", "value": 4},
|
||||
{"source": "Bahorel", "target": "Feuilly", "value": 3},
|
||||
{"source": "Bahorel", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Bahorel", "target": "Marius", "value": 1},
|
||||
{"source": "Bossuet", "target": "Marius", "value": 5},
|
||||
{"source": "Bossuet", "target": "Courfeyrac", "value": 12},
|
||||
{"source": "Bossuet", "target": "Gavroche", "value": 5},
|
||||
{"source": "Bossuet", "target": "Bahorel", "value": 4},
|
||||
{"source": "Bossuet", "target": "Enjolras", "value": 10},
|
||||
{"source": "Bossuet", "target": "Feuilly", "value": 6},
|
||||
{"source": "Bossuet", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Bossuet", "target": "Combeferre", "value": 9},
|
||||
{"source": "Bossuet", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Bossuet", "target": "Valjean", "value": 1},
|
||||
{"source": "Joly", "target": "Bahorel", "value": 5},
|
||||
{"source": "Joly", "target": "Bossuet", "value": 7},
|
||||
{"source": "Joly", "target": "Gavroche", "value": 3},
|
||||
{"source": "Joly", "target": "Courfeyrac", "value": 5},
|
||||
{"source": "Joly", "target": "Enjolras", "value": 5},
|
||||
{"source": "Joly", "target": "Feuilly", "value": 5},
|
||||
{"source": "Joly", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Joly", "target": "Combeferre", "value": 5},
|
||||
{"source": "Joly", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Joly", "target": "Marius", "value": 2},
|
||||
{"source": "Grantaire", "target": "Bossuet", "value": 3},
|
||||
{"source": "Grantaire", "target": "Enjolras", "value": 3},
|
||||
{"source": "Grantaire", "target": "Combeferre", "value": 1},
|
||||
{"source": "Grantaire", "target": "Courfeyrac", "value": 2},
|
||||
{"source": "Grantaire", "target": "Joly", "value": 2},
|
||||
{"source": "Grantaire", "target": "Gavroche", "value": 1},
|
||||
{"source": "Grantaire", "target": "Bahorel", "value": 1},
|
||||
{"source": "Grantaire", "target": "Feuilly", "value": 1},
|
||||
{"source": "Grantaire", "target": "Prouvaire", "value": 1},
|
||||
{"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
|
||||
{"source": "Gueulemer", "target": "Thenardier", "value": 5},
|
||||
{"source": "Gueulemer", "target": "Valjean", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Javert", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Gavroche", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Eponine", "value": 1},
|
||||
{"source": "Babet", "target": "Thenardier", "value": 6},
|
||||
{"source": "Babet", "target": "Gueulemer", "value": 6},
|
||||
{"source": "Babet", "target": "Valjean", "value": 1},
|
||||
{"source": "Babet", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Babet", "target": "Javert", "value": 2},
|
||||
{"source": "Babet", "target": "Gavroche", "value": 1},
|
||||
{"source": "Babet", "target": "Eponine", "value": 1},
|
||||
{"source": "Claquesous", "target": "Thenardier", "value": 4},
|
||||
{"source": "Claquesous", "target": "Babet", "value": 4},
|
||||
{"source": "Claquesous", "target": "Gueulemer", "value": 4},
|
||||
{"source": "Claquesous", "target": "Valjean", "value": 1},
|
||||
{"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Claquesous", "target": "Javert", "value": 1},
|
||||
{"source": "Claquesous", "target": "Eponine", "value": 1},
|
||||
{"source": "Claquesous", "target": "Enjolras", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Javert", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Babet", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Gueulemer", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Claquesous", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Valjean", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Gavroche", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Eponine", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Thenardier", "value": 1},
|
||||
{"source": "Toussaint", "target": "Cosette", "value": 2},
|
||||
{"source": "Toussaint", "target": "Javert", "value": 1},
|
||||
{"source": "Toussaint", "target": "Valjean", "value": 1},
|
||||
{"source": "Child1", "target": "Gavroche", "value": 2},
|
||||
{"source": "Child2", "target": "Gavroche", "value": 2},
|
||||
{"source": "Child2", "target": "Child1", "value": 3},
|
||||
{"source": "Brujon", "target": "Babet", "value": 3},
|
||||
{"source": "Brujon", "target": "Gueulemer", "value": 3},
|
||||
{"source": "Brujon", "target": "Thenardier", "value": 3},
|
||||
{"source": "Brujon", "target": "Gavroche", "value": 1},
|
||||
{"source": "Brujon", "target": "Eponine", "value": 1},
|
||||
{"source": "Brujon", "target": "Claquesous", "value": 1},
|
||||
{"source": "Brujon", "target": "Montparnasse", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
|
||||
]
|
||||
}
|
||||
|
|
@ -29,6 +29,8 @@ import graphViewV4 from "@/views/graphViewV4";
|
|||
import 风险传导 from "@/views/风险传导"
|
||||
import 大屏 from '../bigscreen/大屏.vue'
|
||||
import widerscreen from '../widerscreen/index.vue'
|
||||
import widerscreen1 from '../widerscreen/index1.vue'
|
||||
import widerscreen0 from '../widerscreen/index0.vue'
|
||||
import UserManagement from '../views/UserManagement.vue'
|
||||
|
||||
import SSE from "@/views/SSE";
|
||||
|
|
@ -154,7 +156,9 @@ const routes = [
|
|||
|
||||
//大屏
|
||||
{path:'/bigscreen',name :'bigscreen',component: 大屏,},
|
||||
{path:'/widerscreen',name :'widerscreen',component: widerscreen,},
|
||||
{path:'/widerscreen',name :'widerscreen',component: widerscreen},
|
||||
{path:'/widerscreen1',name :'widerscreen1',component: widerscreen1},
|
||||
{path:'/widerscreen0',name :'widerscreen0',component: widerscreen0},
|
||||
{path:'/test',name :'test',component: test,},
|
||||
{path:'/sse',name :'sse',component: SSE,},
|
||||
{path:'/systemrisk',name :'systemrisk',component: systemRiskV2,}
|
||||
|
|
@ -175,7 +179,7 @@ export const isLogin=false;
|
|||
router.beforeEach(async(to,from,next) => {
|
||||
const allowedRoutes = ['/systematic_risk', '/market_entities','/individual_risk','/influential_entities'
|
||||
,'/warning','/risk_warning','/abnormal_detection','/health','/diffus','/pressure','/quotation','/event_analysis',
|
||||
'/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/widerscreen','/test','/sse','/systemrisk'];
|
||||
'/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/widerscreen','/widerscreen1','/widerscreen0','/test','/sse','/systemrisk'];
|
||||
const name=sessionStorage.getItem('user')
|
||||
// if (allowedRoutes.includes(to.path)) {
|
||||
// next();
|
||||
|
|
|
|||
|
|
@ -53,7 +53,6 @@
|
|||
<span style="padding-left: 50px;">边类型总数</span>
|
||||
</div>
|
||||
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<div style="flex:0 1 34%">
|
||||
|
|
@ -67,8 +66,6 @@
|
|||
<span style="padding-right: 50px;">节点类型总数</span>
|
||||
<span style="padding-left: 50px;">边类型总数</span>
|
||||
</div>
|
||||
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<div style="flex:0 1 33%">
|
||||
|
|
@ -92,7 +89,6 @@
|
|||
<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%">
|
||||
|
|
@ -106,7 +102,6 @@
|
|||
<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>
|
||||
|
|
@ -115,23 +110,26 @@
|
|||
<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>
|
||||
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
|
||||
<Map />
|
||||
<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>
|
||||
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
|
||||
<Map />
|
||||
<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>
|
||||
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
|
||||
<Map />
|
||||
<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>
|
||||
|
|
@ -190,12 +188,10 @@
|
|||
<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>
|
||||
|
|
@ -215,9 +211,7 @@
|
|||
<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>
|
||||
<!-- <CapsuleChart :dataChart="items"/> -->
|
||||
<LineChart />
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
|
|
@ -320,23 +314,26 @@
|
|||
<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>
|
||||
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
|
||||
<Map />
|
||||
<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>
|
||||
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
|
||||
<Map />
|
||||
<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>
|
||||
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
|
||||
<Map />
|
||||
<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>
|
||||
|
|
@ -659,7 +656,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.setScale();
|
||||
window.removeEventListener("resize")
|
||||
window.removeEventListener("resize",this.debounce(this.setScale))
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
818
src/widerscreen/index0.vue
Normal file
818
src/widerscreen/index0.vue
Normal file
|
|
@ -0,0 +1,818 @@
|
|||
<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/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>
|
||||
1109
src/widerscreen/index1.vue
Normal file
1109
src/widerscreen/index1.vue
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user