新建agriculture目录
This commit is contained in:
GongDragon
parent
d2e2063463
commit
3e2da23427
337
public/static/3d-force-graph/test.json
Normal file
337
public/static/3d-force-graph/test.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}
|
||||
]
|
||||
}
|
||||
BIN
src/agriculture/assets/1st.png
Normal file
BIN
src/agriculture/assets/1st.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/agriculture/assets/2st.png
Normal file
BIN
src/agriculture/assets/2st.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1009 B |
BIN
src/agriculture/assets/3st.png
Normal file
BIN
src/agriculture/assets/3st.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 820 B |
BIN
src/agriculture/assets/4st.png
Normal file
BIN
src/agriculture/assets/4st.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
BIN
src/agriculture/assets/5st.png
Normal file
BIN
src/agriculture/assets/5st.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/agriculture/assets/6st.png
Normal file
BIN
src/agriculture/assets/6st.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/agriculture/assets/7st.png
Normal file
BIN
src/agriculture/assets/7st.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/agriculture/assets/box.png
Normal file
BIN
src/agriculture/assets/box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
1
src/agriculture/assets/china.json
Normal file
1
src/agriculture/assets/china.json
Normal file
File diff suppressed because one or more lines are too long
BIN
src/agriculture/assets/icon.png
Normal file
BIN
src/agriculture/assets/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/agriculture/assets/logo.png
Normal file
BIN
src/agriculture/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/agriculture/assets/map.jpg
Normal file
BIN
src/agriculture/assets/map.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/agriculture/assets/mapCenterPoint.png
Normal file
BIN
src/agriculture/assets/mapCenterPoint.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/agriculture/assets/mapPoint.png
Normal file
BIN
src/agriculture/assets/mapPoint.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/agriculture/assets/pageBg.png
Normal file
BIN
src/agriculture/assets/pageBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
52
src/agriculture/components/CapsuleChart.vue
Normal file
52
src/agriculture/components/CapsuleChart.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<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>
|
||||
105
src/agriculture/components/LineChart.vue
Normal file
105
src/agriculture/components/LineChart.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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>
|
||||
99
src/agriculture/components/Map.vue
Normal file
99
src/agriculture/components/Map.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<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>
|
||||
93
src/agriculture/components/RadarChart.vue
Normal file
93
src/agriculture/components/RadarChart.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<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>
|
||||
322
src/agriculture/components/dimensionComponent.vue
Normal file
322
src/agriculture/components/dimensionComponent.vue
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
<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>
|
||||
156
src/agriculture/components/riskIndexComponent.vue
Normal file
156
src/agriculture/components/riskIndexComponent.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<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>
|
||||
168
src/agriculture/components/riskIndexComponent1.vue
Normal file
168
src/agriculture/components/riskIndexComponent1.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<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>
|
||||
368
src/agriculture/components/systemRiskComponent.vue
Normal file
368
src/agriculture/components/systemRiskComponent.vue
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
<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>
|
||||
43326
src/agriculture/data/dimension.json
Normal file
43326
src/agriculture/data/dimension.json
Normal file
File diff suppressed because it is too large
Load Diff
16
src/agriculture/data/hangyeyujing.json
Normal file
16
src/agriculture/data/hangyeyujing.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"信息传输、软件和信息技术服务业-电信、广播电视和卫星传输服务": 3,
|
||||
"制造业-农副食品加工业": 1,
|
||||
"制造业-医药制造业": 6,
|
||||
"制造业-汽车制造业": 2,
|
||||
"制造业-纺织服装、服饰业": 1,
|
||||
"制造业-计算机、通信和其他电子设备制造业": 2,
|
||||
"制造业-酒、饮料和精制茶制造业": 1,
|
||||
"制造业-金属制品业": 1,
|
||||
"制造业-非金属矿物制品业": 1,
|
||||
"房地产业-房地产业": 1,
|
||||
"批发和零售业-批发业": 2,
|
||||
"采矿业-有色金属矿采选业": 1,
|
||||
"金融业-货币金融服务": 12,
|
||||
"金融业-资本市场服务": 3
|
||||
}
|
||||
5102
src/agriculture/data/hongguanfenxi.json
Normal file
5102
src/agriculture/data/hongguanfenxi.json
Normal file
File diff suppressed because it is too large
Load Diff
1067
src/agriculture/data/lunbo.json
Normal file
1067
src/agriculture/data/lunbo.json
Normal file
File diff suppressed because it is too large
Load Diff
7
src/agriculture/data/stockRisk.json
Normal file
7
src/agriculture/data/stockRisk.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"低风险": 1100,
|
||||
"中风险": 1184,
|
||||
"高风险": 1254,
|
||||
"综合风险水平": 396.2488397196951,
|
||||
"time": "2023_3"
|
||||
}
|
||||
7350
src/agriculture/data/tabs-bodong.json
Normal file
7350
src/agriculture/data/tabs-bodong.json
Normal file
File diff suppressed because it is too large
Load Diff
12255
src/agriculture/data/tabs-geti.json
Normal file
12255
src/agriculture/data/tabs-geti.json
Normal file
File diff suppressed because it is too large
Load Diff
12225
src/agriculture/data/tabs-guanlian.json
Normal file
12225
src/agriculture/data/tabs-guanlian.json
Normal file
File diff suppressed because it is too large
Load Diff
168
src/agriculture/data/tabs-shichang.json
Normal file
168
src/agriculture/data/tabs-shichang.json
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
{
|
||||
"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
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
819
src/agriculture/index.vue
Normal file
819
src/agriculture/index.vue
Normal file
|
|
@ -0,0 +1,819 @@
|
|||
<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>
|
||||
819
src/agriculture/index0.vue
Normal file
819
src/agriculture/index0.vue
Normal file
|
|
@ -0,0 +1,819 @@
|
|||
<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>
|
||||
1184
src/agriculture/index1.vue
Normal file
1184
src/agriculture/index1.vue
Normal file
File diff suppressed because it is too large
Load Diff
923
src/agriculture/index2.vue
Normal file
923
src/agriculture/index2.vue
Normal file
|
|
@ -0,0 +1,923 @@
|
|||
<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>
|
||||
|
|
@ -33,6 +33,7 @@ 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 UserManagement from '../views/UserManagement.vue'
|
||||
|
||||
|
|
@ -164,6 +165,7 @@ const routes = [
|
|||
{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:'/test',name :'test',component: test,},
|
||||
{path:'/sse',name :'sse',component: SSE,},
|
||||
|
|
@ -183,9 +185,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','/bigscreen1','/bigscreen2','/widerscreen',,'/widerscreen2','/widerscreen1','/widerscreen0','/test','/sse','/systemrisk'];
|
||||
const allowedRoutes = ['/login','/register','/agriculture'];
|
||||
const name=sessionStorage.getItem('user')
|
||||
// if (allowedRoutes.includes(to.path)) {
|
||||
// next();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user