gongdragon/financial-bigscreen
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

2024/11/14

Browse Source
This commit is contained in:
daddyhuu 2024-11-14 15:30:11 +08:00
parent 10242e87fc
commit 5756d8c971
232 changed files with 1758 additions and 51011 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
ModuleHeader.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<div class="module-box">
<div style="flex:0 1 25%">
<dv-border-box-13 style="width:100%;height:200px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
<!-- <Chart /> -->
<div style="display: flex;justify-content: center;align-items: center;">
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
<dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
</div>
<div style="display: flex;justify-content: center;align-items: center;">
<span style="padding-right: 50px;">节点类型总数</span>
<span style="padding-left: 50px;">边类型总数</span>
</div>
</dv-border-box-13>
<dv-border-box-13 style="width:100%;height:400px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
<RadarChart/>
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
</dv-border-box-13>
</div>
<div style="flex:0 1 50%">
<dv-border-box-1 style="width:100%;height:600px;">
<!-- 图谱 -->
<iframe src="/static/3d-force-graph/index.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
</dv-border-box-1>
</div>
<div style="flex:0 1 25%">
<dv-border-box-13 style="width:100%;height:200px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">图谱统计</h3>
<div style="display: flex;justify-content: center;align-items: center;">
<dv-decoration-9 style="width:123px;height:123px;margin-right:30px;" dur=5><h2 style="color: rgba(255,215,0);">606041</h2></dv-decoration-9>
<dv-decoration-9 style="width:123px;height:123px;margin-left: 30px;" dur=5><h2 style="color: rgba(255,215,0);">1694475</h2></dv-decoration-9>
</div>
<div style="display: flex;justify-content: center;align-items: center;">
<span style="padding-right: 60px;">节点总数</span>
<span style="padding-left: 55px;">边总数</span>
</div>
<!-- <dv-capsule-chart :config="config" style="width:100%;height:300px" /> -->
</dv-border-box-13>
<dv-border-box-13 style="width:100%;height:400px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
<Map />
</dv-border-box-13>
</div>
</div>
</template>
<script>
import Map from './Map.vue'
import RadarChart from './RadarChart.vue'
export default {
components:{
Map,
RadarChart
},
data(){
return {
config:{
data: [
{
name: '南阳',
value: 167
},
{
name: '周口',
value: 67
},
{
name: '漯河',
value: 123
},
{
name: '郑州',
value: 55
},
{
name: '西峡',
value: 98
}
],
colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
unit: '单位',
showValue: true
},
config2:{
data: [66, 45],
shape: 'roundRect'
},
config3:{
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 71
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
},
{
name: '信阳',
value: 35
},
{
name: '漯河',
value: 15
}
],
img: [
require('../assets/img/1st.png'),
require('../assets/img/2st.png'),
require('../assets/img/3st.png'),
require('../assets/img/4st.png'),
require('../assets/img/5st.png'),
require('../assets/img/6st.png'),
require('../assets/img/7st.png'),
]
},
config4:{
centerPoint: [0.48, 0.35],
points: [
{
position: [0.52, 0.235],
text: '新乡'
},
{
position: [0.43, 0.29],
text: '焦作'
},
{
position: [0.59, 0.35],
text: '开封'
},
{
position: [0.53, 0.47],
text: '许昌'
},
{
position: [0.45, 0.54],
text: '平顶山'
},
{
position: [0.36, 0.38],
text: '洛阳'
},
{
position: [0.62, 0.55],
text: '周口'
},
{
position: [0.56, 0.56],
text: '漯河'
},
{
position: [0.37, 0.66],
text: '南阳'
},
{
position: [0.55, 0.81],
text: '信阳'
},
{
position: [0.55, 0.67],
text: '驻马店'
},
{
position: [0.37, 0.29],
text: '济源'
},
{
position: [0.20, 0.36],
text: '三门峡'
},
{
position: [0.76, 0.41],
text: '商丘'
},
{
position: [0.59, 0.18],
text: '鹤壁'
},
{
position: [0.68, 0.17],
text: '濮阳'
},
{
position: [0.59, 0.10],
text: '安阳'
}
],
bgImgUrl: require('../assets/img/map.jpg'),
centerPointImg: {
url: require('../assets/img/mapCenterPoint.png')
},
pointsImg: {
url: require('../assets/img/mapPoint.png')
}
}
}
}
}
</script>

42
package-lock.json generated
View File

@ -29,8 +29,11 @@
"mockjs": "^1.1.0",
"node-sass": "^9.0.0",
"sass-loader": "^13.3.2",
"v-contextmenu": "^2.9.2",
"vue": "^2.6.14",
"vue-contextmenu": "^1.5.11",
"vue-router": "^3.6.5",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.6.2"
},
"devDependencies": {
@ -4152,9 +4155,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001518",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz",
"integrity": "sha512-rup09/e3I0BKjncL+FesTayKtPrdwKhUufQFd3riFw1hHg8JmIFoInYfB102cFcY/pPgGmdyl/iy+jgiDi2vdA=="
"version": "1.0.30001591",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz",
"integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ=="
},
"node_modules/case-sensitive-paths-webpack-plugin": {
"version": "2.4.0",
@ -4516,6 +4519,11 @@
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true
},
"node_modules/comutils": {
"version": "1.1.19",
"resolved": "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz",
"integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@ -12400,6 +12408,18 @@
"uuid": "dist/bin/uuid"
}
},
"node_modules/v-contextmenu": {
"version": "2.9.2",
"resolved": "https://registry.npmmirror.com/v-contextmenu/-/v-contextmenu-2.9.2.tgz",
"integrity": "sha512-zCp1IG9UIJ1PQlccZ73RH68svvFUydXfndJlWDv9WvBlwbtWfIy5jUFpwBjwWXhqe7TvVi50xP99foeL3YJtOg==",
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"peerDependencies": {
"vue": "^2.5.0"
}
},
"node_modules/v8-compile-cache": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@ -12433,6 +12453,14 @@
"csstype": "^3.1.0"
}
},
"node_modules/vue-contextmenu": {
"version": "1.5.11",
"resolved": "https://registry.npmmirror.com/vue-contextmenu/-/vue-contextmenu-1.5.11.tgz",
"integrity": "sha512-H9CdXqiVMRJsUX+ah9k2olywZUiJ+sq6EkCGkLza+DFx0PChIJzZPlsVNPOMgcFInYkigh+QRw2S4Bu7nUXGlA==",
"dependencies": {
"vue": "^2.6.9"
}
},
"node_modules/vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@ -12629,6 +12657,14 @@
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
"integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
},
"node_modules/vue-seamless-scroll": {
"version": "1.1.23",
"resolved": "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
"integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
"dependencies": {
"comutils": "^1.1.9"
}
},
"node_modules/vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

3
package.json
View File

@ -29,8 +29,11 @@
"mockjs": "^1.1.0",
"node-sass": "^9.0.0",
"sass-loader": "^13.3.2",
"v-contextmenu": "^2.9.2",
"vue": "^2.6.14",
"vue-contextmenu": "^1.5.11",
"vue-router": "^3.6.5",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.6.2"
},
"devDependencies": {

BIN
public/2.6.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/Logo.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

3
public/index.html
View File

@ -5,8 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <link rel="icon" href="Logo.ico"> -->
<link rel="icon" href="数据显示.ico">
<link rel="icon" href="Logo.ico">
<title>资本市场系统性风险平台</title>
</head>
<body>
<noscript>

5
public/static/3d-force-graph/3d-force-graph.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

29
public/static/3d-force-graph/index-shiny.html Normal file
View File

@ -0,0 +1,29 @@
<head>
<style> body { margin: 0; } </style>
<script src="3d-force-graph.min.js"></script>
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
</head>
<body>
<div id="3d-graph"></div>
<!-- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script> -->
<script src="../../../node_modules/three/build/three.module.js"></script>
<script type="module">
import { UnrealBloomPass } from '../../../node_modules/three/examples/jsm/postprocessing/UnrealBloomPass.js';
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.backgroundColor('#000003')
.jsonUrl('../datasets/miserables.json')
.nodeLabel('id')
.nodeAutoColorBy('group');
const bloomPass = new UnrealBloomPass();
bloomPass.strength = 4;
bloomPass.radius = 1;
bloomPass.threshold = 0;
Graph.postProcessingComposer().addPass(bloomPass);
</script>
</body>

28
public/static/3d-force-graph/index.html Normal file
View File

@ -0,0 +1,28 @@
<head>
<style> body { margin: 0; } </style>
<script src="3d-force-graph.min.js"></script>
<!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>
<body>
<div id="3d-graph"></div>
<script>
// Random tree
const N = 200;
const gData = {
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
};
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.graphData(gData);
</script>
</body>

BIN
src/assets/Logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

69
src/assets/css/index.css Normal file
View File

@ -0,0 +1,69 @@
/* 先删除默认的内外边距 */
* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 62.5%; /* 设置过根节点的文字大小后，所有子节点的文字大小全部相对于根节点计算，html为10px */
}
body, input, button, a, textarea, select {
margin: 0;
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
font-size: 1.4rem;
line-height: 1.5;
color: #333;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
a {
text-decoration: none;
}
a:hover, a:focus {
text-decoration: none;
}
a:hover {
filter: alpha(opacity=90);
opacity: .9;
}
/* 文本对齐 */
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.tl {
text-align: left;
}
/* 主体 */
.content {
color: #ddd;
/*background: #000;*/
width: 100%;
height:100vh;
}
.bg {
padding:0;
background:url('../img/pageBg.png') no-repeat center center;
/* background-size:cover; */
}
.module-box {
display:flex;
justify-self: space-between;
margin:10px;
}
.d-flex {
display:flex;
}

BIN
src/assets/img/1st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/img/2st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1009 B

BIN
src/assets/img/3st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 820 B

BIN
src/assets/img/4st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1014 B

BIN
src/assets/img/5st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/img/6st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/img/7st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/img/map.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
src/assets/img/mapCenterPoint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/img/mapPoint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/img/pageBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

1
src/assets/json/china.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/r-c.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 79 KiB

BIN
src/assets/数据显示old.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 420 B

52
src/bigscreen/CapsuleChart.vue Normal file
View 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>

70
src/bigscreen/Chart.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div ref="chart" style="width: 100%;height:200px;"></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);
// 指定图表的配置项和数据
var option = {
color:'#f60', //系列柱颜色
tooltip: {},
// legend: {
// data: ['销量']
// },
xAxis: {
data: ['1月', '2月', '3月', '裤子', '高跟鞋', '袜子'],
axisLine:{
lineStyle:{
color:'#fff'
}
}
},
yAxis: {
axisLine:{
lineStyle:{
color:'#fff'
}
}
},
series: [
{
name: '销量',
type: 'bar',
data:this.items || [10,20,30,40,50,60,70]
}
],
grid:{
left:'5%',
right:'5%',
top:'10%',
bottom:'5%',
containLabel:true
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
initWebsocket(){
this.initChart();
}
}
}
</script>

105
src/bigscreen/LineChart.vue Normal file
View 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>

104
src/bigscreen/Map.vue Normal file
View File

@ -0,0 +1,104 @@
<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:[109.781327, 39.608266,20]
},
{
name:'张家口',
value:[114.87, 40.82,5]
},
{
name:'珠海',
value:[113.52, 22.3,15]
},
{
name:'武汉',
value:[114.31, 30.52,30]
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
}
}
</script>

224
src/bigscreen/ModuleHeader.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<div class="module-box">
<div style="flex:0 1 25%">
<dv-border-box-13 style="width:100%;height:200px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
<!-- <Chart /> -->
<div style="display: flex;justify-content: center;align-items: center;">
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
<dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
</div>
<div style="display: flex;justify-content: center;align-items: center;">
<span style="padding-right: 50px;">节点类型总数</span>
<span style="padding-left: 50px;">边类型总数</span>
</div>
</dv-border-box-13>
<dv-border-box-13 style="width:100%;height:400px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
<RadarChart/>
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
</dv-border-box-13>
</div>
<div style="flex:0 1 50%">
<dv-border-box-1 style="width:100%;height:600px;">
<!-- 图谱 -->
<iframe src="/static/3d-force-graph/index.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
</dv-border-box-1>
</div>
<div style="flex:0 1 25%">
<dv-border-box-13 style="width:100%;height:200px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">图谱统计</h3>
<div style="display: flex;justify-content: center;align-items: center;">
<dv-decoration-9 style="width:123px;height:123px;margin-right:30px;" dur=5><h2 style="color: rgba(255,215,0);">606041</h2></dv-decoration-9>
<dv-decoration-9 style="width:123px;height:123px;margin-left: 30px;" dur=5><h2 style="color: rgba(255,215,0);">1694475</h2></dv-decoration-9>
</div>
<div style="display: flex;justify-content: center;align-items: center;">
<span style="padding-right: 60px;">节点总数</span>
<span style="padding-left: 55px;">边总数</span>
</div>
<!-- <dv-capsule-chart :config="config" style="width:100%;height:300px" /> -->
</dv-border-box-13>
<dv-border-box-13 style="width:100%;height:400px;">
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
<!-- <dv-conical-column-chart :config="config3" style="width:100%;height:300px;" /> -->
<Map />
</dv-border-box-13>
</div>
</div>
</template>
<script>
import Map from './Map.vue'
import RadarChart from './RadarChart.vue'
export default {
components:{
Map,
RadarChart
},
data(){
return {
config:{
data: [
{
name: '南阳',
value: 167
},
{
name: '周口',
value: 67
},
{
name: '漯河',
value: 123
},
{
name: '郑州',
value: 55
},
{
name: '西峡',
value: 98
}
],
colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
unit: '单位',
showValue: true
},
config2:{
data: [66, 45],
shape: 'roundRect'
},
config3:{
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 71
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
},
{
name: '信阳',
value: 35
},
{
name: '漯河',
value: 15
}
],
img: [
require('../assets/img/1st.png'),
require('../assets/img/2st.png'),
require('../assets/img/3st.png'),
require('../assets/img/4st.png'),
require('../assets/img/5st.png'),
require('../assets/img/6st.png'),
require('../assets/img/7st.png'),
]
},
config4:{
centerPoint: [0.48, 0.35],
points: [
{
position: [0.52, 0.235],
text: '新乡'
},
{
position: [0.43, 0.29],
text: '焦作'
},
{
position: [0.59, 0.35],
text: '开封'
},
{
position: [0.53, 0.47],
text: '许昌'
},
{
position: [0.45, 0.54],
text: '平顶山'
},
{
position: [0.36, 0.38],
text: '洛阳'
},
{
position: [0.62, 0.55],
text: '周口'
},
{
position: [0.56, 0.56],
text: '漯河'
},
{
position: [0.37, 0.66],
text: '南阳'
},
{
position: [0.55, 0.81],
text: '信阳'
},
{
position: [0.55, 0.67],
text: '驻马店'
},
{
position: [0.37, 0.29],
text: '济源'
},
{
position: [0.20, 0.36],
text: '三门峡'
},
{
position: [0.76, 0.41],
text: '商丘'
},
{
position: [0.59, 0.18],
text: '鹤壁'
},
{
position: [0.68, 0.17],
text: '濮阳'
},
{
position: [0.59, 0.10],
text: '安阳'
}
],
bgImgUrl: require('../assets/img/map.jpg'),
centerPointImg: {
url: require('../assets/img/mapCenterPoint.png')
},
pointsImg: {
url: require('../assets/img/mapPoint.png')
}
}
}
}
}
</script>

156
src/bigscreen/ModuleMain.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<!-- 一行二等分 -->
<div class="module-box">
<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 :colorsChart="['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']"/> -->
<!-- <CapsuleChart :dataChart="items"/> -->
<div style="display: flex;justify-content: center;align-items: center;">
<dv-scroll-board :config="config1" 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>
<!-- <CapsuleChart :dataChart="items"/> -->
<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="config2" style="width:95%;height:220px;" />
</div>
</dv-border-box-13>
</div>
</div>
</template>
<script>
import CapsuleChart from './CapsuleChart.vue';
import LineChart from './LineChart.vue'
export default {
components:{
CapsuleChart,
LineChart
},
data(){
return {
// 表格设置
config1 : {
header: ['主体代码&nbsp', '行业', '&nbsp&nbsp&nbsp&nbsp&nbsp预警时刻','&nbsp&nbsp&nbsp风险水平','风险类型&nbsp'],
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'],
},
config2 :
{
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
},
]
}
}
}
</script>

32
src/bigscreen/ModuleTitle.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<!-- 标题 一行三等分 -->
<div class="module-box">
<div style="flex:0 1 30%">
<dv-decoration-10 style="height:5px;" />
</div>
<div style="flex:0 1 40%">
<div class="d-flex">
<dv-decoration-8 style="height:50px;flex:1;" />
<h2>大规模泛金融知识图谱系统</h2>
<!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
<dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
</div>
</div>
<div style="flex:0 1 30%">
<dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
</div>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>

103
src/bigscreen/RadarChart.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div ref="chart" style="width: 100%;height:340px;"></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 = {
title: {
text: ''
},
tooltip: {},
legend: {
data: ['第一标准', '第二标准','第三标准'],
x:"center",
y:'bottom',
textStyle:{
color:"#fff"
}
},
color: ['#4c95d9', '#f6731b', '#8cd43f'],
radar: {
name:{
textStyle: {
//设置颜色
color:'#fff'
}
},
indicator: [
{ name: 'test1', max: 6500},
{ name: 'test2', max: 16000},
{ name: 'test3', max: 30000},
{ name: 'test4', max: 38000},
{ name: 'test5', max: 52000},
{ name: 'test6', max: 25000}
],
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 : [2400, 10000, 28000, 35000, 50000, 19000],
name : '第一标准'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '第二标准'
},
{
value : [6000, 14000, 18000, 21000, 32000, 11000],
name : '第三标准'
}
]
}]
};
myChart.setOption(option);
},
initWebsocket(){
this.initChart();
}
}
}
</script>

81
src/bigscreen/ScaleBox.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div
class="ScaleBox"
ref="ScaleBox"
:style="{
width: width + 'px',
height: height + 'px',
}"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: "ScaleBox",
props: {},
data() {
return {
scale: 0,
width: 1920,
height: 1080,
};
},
mounted() {
this.setScale();
window.addEventListener("resize", this.debounce(this.setScale));
},
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);
};
},
},
};
</script>
<style lang="scss">
#ScaleBox {
--scale: 1;
}
.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);
}
</style>

0
src_old/bigscreen/大屏.vue → src/bigscreen/大屏-9.27.vue
View File

115
src/bigscreen/大屏.vue
View File

@ -1,85 +1,38 @@
<template>
<div id="home">
<dv-full-screen-container>
<!--一行两等份-->
<div class="head">大规模泛金融知识图谱系统</div>
<div class="module-box">
<div style="flex: 0 1 25%">
<dv-border-box-12 style="width: 100%; height: 180px">
<div style="color:white;padding:10px 10px;">类型统计</div>
</dv-border-box-12>
<dv-border-box-12 style="width: 100%; height: 180px">
<div style="color:white;padding:10px 10px;">健康指数</div>
</dv-border-box-12>
</div>
<div class="content bg">
<!-- <dv-full-screen-container> -->
<scale-box>
<ModuleTitle />
<ModuleHeader />
<ModuleMain />
<div style="flex: 0 1 50%">
<dv-border-box-8 style="width: 100%; height: 360px"></dv-border-box-8>
</div>
</scale-box>
<!-- </dv-full-screen-container> -->
<div style="flex: 0 1 25%">
<dv-border-box-12 style="width: 100%; height: 180px">
<div style="color:white;padding:10px 10px;">图谱统计</div>
</dv-border-box-12>
<dv-border-box-12 style="width: 100%; height: 180px">
<div style="color:white;padding:10px 10px;">区域分析</div>
</dv-border-box-12>
</div>
</div>
</div>
</template>
<script>
import ModuleTitle from './ModuleTitle.vue'
import ModuleHeader from './ModuleHeader.vue'
import ModuleMain from './ModuleMain.vue'
import ScaleBox from './ScaleBox.vue'
<div class="module-box">
<div style="flex: 0 1 25%">
<dv-border-box-12 style="width: 100%; height: 180px;">
<div style="color:white;padding:10px 10px;">当前事件统计</div>
</dv-border-box-12>
</div>
<div style="flex: 0 1 50%">
<dv-border-box-8 style="width: 100%; height: 180px;">
<div style="color:white;padding:10px 10px;">行业风险价值曲线图</div>
</dv-border-box-8>
</div>
<div style="flex: 0 1 25%">
<dv-border-box-12 style="width: 100%; height: 180px;">
<div style="color:white;padding:10px 10px;">行业价值评估</div>
</dv-border-box-12>
</div>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped>
.head{
color: aliceblue;
text-align:center;
padding-top:12px;
font-size: 18px;
}
#home {
width: 100%;
height: 100%;
background: url("../assets/background.jpg") center center no-repeat;
background-size: 100% 100%;
position: absolute; /*/绝对定位 */
}
.module-box {
display: flex;
justify-self: space-between;
margin: 1px;
padding-left:15px;
}
</style>
export default {
name: 'HomeView',
components:{
ModuleTitle,
ModuleHeader,
ModuleMain,
ScaleBox,// 大屏根据显示器尺寸大小自适应
}
}
</script>
<style scoped>
@import '../assets/css/index.css';
</style>

62
src/bigscreen/大屏10-27.vue
View File

@ -1,62 +0,0 @@
<!-- -->
<template>
<div id="home">
<!-- 全屏容器dv-full-screen-container -->
<dv-full-screen-container>
<!-- 边框dv-border-box -->
<div style="flex:0 1 50%;padding-bottom: 10px;"> <!-- flex-grow | flex-shrink | flex-basis */没懂 -->
<dv-border-box-7 style="width: 100%;height:60px;">
<div style="color: aliceblue;text-align: center;padding: 10px;">大规模泛金融知识图谱系统"</div>
<dv-decoration-10 style="width:100%;height:5px;" />
</dv-border-box-7>
</div>
<div style="flex:0 1 50%"> <!-- flex-grow | flex-shrink | flex-basis */没懂 -->
<dv-border-box-7 style="width: 100%;height: 200px;">
<region/>
</dv-border-box-7>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
import region from "../components/region.vue";
export default {
components: {
region
},
data () {
return {
}
},
mounted(){
},
methods:{
},
}
</script>
<style lang="less" scoped>
#home {
width: 100%;
height: 100vh;
background: url("../assets/background.jpg") center center no-repeat;
background-size: 100% 100%;
position:absolute;/*/绝对定位 */
}
</style>

25
src/components/EmphasizedText.vue
View File

@ -1,13 +1,32 @@
<template>
$END$
<div class="emphasized-text">
<el-tag type="success" effect="dark">{{ emphasizedText }}</el-tag>
</div>
</template>
<script>
export default {
name: "EmphasizedText"
}
name: 'EmphasizedText',
props: {
emphasizedText: {
type: String,
required: true
}
}
};
</script>
<style scoped>
.emphasized-text {
font-size: 1.2em;
margin: 10px 0;
}
.el-tag {
background-color: #409eff !important;
color: #fff !important;
border-radius: 5px;
padding: 5px 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>

5
src/components/systemRiskComponent.vue
View File

@ -276,12 +276,15 @@ props:{
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,

5
src/utils/request.js
View File

@ -4,8 +4,8 @@ import axios from 'axios'
//
const http = axios.create({
//通用请求
baseURL:'http://61.240.140.173:8000/',//后端的地址前缀
// baseURL:'/api/',//后端的地址前缀
// baseURL:'http://61.240.140.173:8000/',//后端的地址前缀
baseURL:'/api/',//后端的地址前缀
// withCredentials:truenpm run serve
// async:true,
// timeout:'10000',//10s 超时时间
@ -13,6 +13,7 @@ const http = axios.create({
})
http.interceptors.request.use(
function(config) {
// 在请求发送之前，为 headers 添加 token

2
src/views/UserManagement.vue
View File

@ -203,7 +203,6 @@
<div class="block" style="margin-top:15px;">
<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="activityData.length">
@ -262,6 +261,7 @@ export default {
},
data () {
return {
moduleStart:'',
moduleEnd:'',
start:'',

307
src/views/graphViewV4.vue
View File

@ -30,7 +30,7 @@
<!-- 关联实体弹窗-->
<el-dialog title="关联实体信息" :visible.sync="relationDialog" width="70%" >
<el-table :data="relationData" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
<el-table :data="relationData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
border
stripe
style="width: 100%"> <!-- style="width: 40%" height="215" -->
@ -55,12 +55,45 @@
width="80">
</el-table-column>
</el-table>
<!-- 分页-->
<div class="block" style="margin-top:15px;">
<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="relationData.length">
</el-pagination>
</div>
<div class="flex-charts">
<div ref="relationChart" style="height:300px;width:1000px; border: 1px solid #e0e0e0;margin:20px"></div>
</div>
</el-dialog>
<!-- 邻居统计弹窗-->
<el-dialog title="关联实体信息" :visible.sync="neighborDialog" width="70%" >
<!-- <emphasized-text :emphasized-text="'邻居数' numNeighbors"></emphasized-text>-->
<div>
<p >邻居总数：{{numNeighbors}}</p>
<p >边总数：{{numEdge}}</p>
<span>类型统计：</span>
<span v-for="label in neighborLabel" :key="index">
{{ label }}
</span>
</div>
<div ref="neighborChart" style="height:300px;width:1000px; border: 1px solid #e0e0e0;margin:20px"></div>
</el-dialog>
<div class="graph" ref="graph" id="graph" ></div>
<!-- <div id="hovertip" position: absolute; ></div>-->
<!-- <div id="timebrush_div" style="z-index: 999;position: absolute;margin-top: -35px;width:100%;bottom: 20px" class="test1"></div>-->
@ -284,6 +317,7 @@ import euler from "cytoscape-euler"
import expandCollapse from "cytoscape-expand-collapse"
import * as d3 from "d3"
import BubbleSets from "cytoscape-bubblesets";
import EmphasizedText from '../components/EmphasizedText.vue';
// cytoscape.use(euler)
// cytoscape.use(expandCollapse)
// cytoscape.use(cxtmenu)
@ -291,6 +325,9 @@ export default {
name: "graphViewV4",
data() {
return {
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 10, // 每页的数据条数
svg:null,
parentSide:null,
timebrustStart:null,
@ -303,17 +340,22 @@ export default {
{color: '#6f7ad3', percentage: 100}
],
percentage:0,
neighborDialog:false,
relationData:[],
relationDialog:false,
checkAllEdges: false,
checkAllNodes: false,
checkedCities: ['上海', '北京'],
edgeData:[],
edges:[' 股东', ' 流通股东', ' 股权质押', ' 股权赎回', ' 发行', ' 法律顾问', ' 财务审计', ' 战略合作', ' 竞争', ' 业务链', ' 监管', ' 成员', ' 保荐承销', ' 担保', ' 法人代表', ' 客户', ' 高管', ' 购买', ' 属于', ' 投资', ' 委托管理', ' 管理', ' 原材料', ' 补充', ' 注册', ' 设立', ' 交易', ' 经营', ' 毕业', ' 位于', ' 同学', ' 亲属', ' 同乡', ' 好友', ' 出生', ' 工作', ' 任职', ' 合作'],
edgesTypes: [' 股东', ' 流通股东', ' 股权质押', ' 股权赎回', ' 发行', ' 法律顾问', ' 财务审计', ' 战略合作', ' 竞争', ' 业务链', ' 监管', ' 成员', ' 保荐承销', ' 担保', ' 法人代表', ' 客户', ' 高管', ' 购买', ' 属于', ' 投资', ' 委托管理', ' 管理', ' 原材料', ' 补充', ' 注册', ' 设立', ' 交易', ' 经营', ' 毕业', ' 位于', ' 同学', ' 亲属', ' 同乡', ' 好友', ' 出生', ' 工作', ' 任职', ' 合作'],
checkedEdges:[],
nodes:[ ' 上市公司', ' 上市公司-实体企业', ' 上市公司-金融机构', ' 上市公司-金融机构-银行', ' 上市公司-金融机构-证券', ' 上市公司-金融机构-保险', ' 上市公司-金融机构-信托', ' 上市公司-金融机构-基金', ' 上市公司-金融机构-基金-公募基金', ' 上市公司-金融机构-基金-私募基金', ' 上市公司-金融机构-其他金融机构', ' 非上市公司其他公司', ' 非上市公司-实体企业', ' 非上市公司-金融机构', ' 非上市公司-金融机构-银行', ' 非上市公司-金融机构-证券', ' 非上市公司-金融机构-保险', ' 非上市公司-金融机构-信托', ' 非上市公司-金融机构-基金', ' 非上市公司-金融机构-基金-公募基金', ' 非上市公司-金融机构-基金-私募基金', ' 非上市公司-金融机构-其他金融机构', ' 非上市公司其他公司', ' 人物-普通人物', ' 人物-基金经理', ' 人物-投资经理', ' 机构-国务院国有资产监督管理委员会', ' 监管机构-银保监会', ' 监管机构-证监会', ' 监管机构-人民银行', ' 监管机构-食药监局', ' 监管机构-网信', ' 监管机构-工信', ' 监管机构-行业协会', ' 交易所', ' 板块', ' 地点-国家', '地点-省', '地点-县/区', ' 地点-市', ' 行业-门类', ' 行业-大类', ' 行业-中类', ' 产品-一般产品', ' 产品-服务产品', ' 产品-金融产品-股票', ' 产品-金融产品-债券', ' 产品-金融产品-基金', ' 产品-金融产品-基金--公募', ' 产品-金融产品-基金--私募', ' 产品-金融产品-基金--REITS', ' 产品-金融产品-信托', ' 产品-金融产品-其他', ' 学校', '时间','事件-股东减持','事件-股东增持','事件-重大安全事故','事件-重大对外赔付',' 事件-重大资产损失','事件-高层死亡',' 事件-股权质押',' 事件-股权冻结','事件-破产清算','报道媒体',' 未知'],
nodeTypes:[ ' 上市公司', ' 上市公司-实体企业', ' 上市公司-金融机构', ' 上市公司-金融机构-银行', ' 上市公司-金融机构-证券', ' 上市公司-金融机构-保险', ' 上市公司-金融机构-信托', ' 上市公司-金融机构-基金', ' 上市公司-金融机构-基金-公募基金', ' 上市公司-金融机构-基金-私募基金', ' 上市公司-金融机构-其他金融机构', ' 非上市公司其他公司', ' 非上市公司-实体企业', ' 非上市公司-金融机构', ' 非上市公司-金融机构-银行', ' 非上市公司-金融机构-证券', ' 非上市公司-金融机构-保险', ' 非上市公司-金融机构-信托', ' 非上市公司-金融机构-基金', ' 非上市公司-金融机构-基金-公募基金', ' 非上市公司-金融机构-基金-私募基金', ' 非上市公司-金融机构-其他金融机构', ' 非上市公司其他公司', ' 人物-普通人物', ' 人物-基金经理', ' 人物-投资经理', ' 机构-国务院国有资产监督管理委员会', ' 监管机构-银保监会', ' 监管机构-证监会', ' 监管机构-人民银行', ' 监管机构-食药监局', ' 监管机构-网信', ' 监管机构-工信', ' 监管机构-行业协会', ' 交易所', ' 板块', ' 地点-国家', '地点-省', '地点-县/区', ' 地点-市', ' 行业-门类', ' 行业-大类', ' 行业-中类', ' 产品-一般产品', ' 产品-服务产品', ' 产品-金融产品-股票', ' 产品-金融产品-债券', ' 产品-金融产品-基金', ' 产品-金融产品-基金--公募', ' 产品-金融产品-基金--私募', ' 产品-金融产品-基金--REITS', ' 产品-金融产品-信托', ' 产品-金融产品-其他', ' 学校', '时间','事件-股东减持','事件-股东增持','事件-重大安全事故','事件-重大对外赔付',' 事件-重大资产损失','事件-高层死亡',' 事件-股权质押',' 事件-股权冻结','事件-破产清算','报道媒体',' 未知'],
checkedNodes:[],
numEdge:0,
neighborLabel:0,
numNeighbors:0,
edgeIndeterminate: true,
nodeIndeterminate: true,
shetuan_paths:[],
@ -332,6 +374,8 @@ export default {
startID:null,
endID:null,
hideClickCount:{},
nodeClickCount:{},
x:null,
brush:null,
search_memory:[],
@ -345,7 +389,20 @@ export default {
type :[{'value': '板块', 'label': '板块'}, {'value': '行业-门类', 'label': '行业-门类'}, {'value': '行业-大类', 'label': '行业-大类'}, {'value': '地点-市', 'label': '地点-市'}, {'value': '地点-国家', 'label': '地点-国家'}, {'value': '上市公司-金融机构-其他金融机构', 'label': '上市公司-金融机构-其他金融机构'}, {'value': '上市公司-金融机构-证券', 'label': '上市公司-金融机构-证券'}, {'value': '上市公司-金融机构-银行', 'label': '上市公司-金融机构-银行'}, {'value': '上市公司-实体企业', 'label': '上市公司-实体企业'}, {'value': '上市公司-金融机构-保险', 'label': '上市公司-金融机构-保险'}, {'value': '上市公司-金融机构-基金-私募基金', 'label': '上市公司-金融机构-基金-私募基金'}, {'value': '上市公司-金融机构-基金-公募基金', 'label': '上市公司-金融机构-基金-公募基金'}, {'value': '上市公司-金融机构-信托', 'label': '上市公司-金融机构-信托'}, {'value': '交易所', 'label': '交易所'}, {'value': '人物-基金经理', 'label': '人物-基金经理'}, {'value': '人物-普通人物', 'label': '人物-普通人物'}, {'value': '产品-金融产品-债券', 'label': '产品-金融产品-债券'}, {'value': '产品-金融产品-基金--私募', 'label': '产品-金融产品-基金--私募'}, {'value': '产品-金融产品-基金--公募', 'label': '产品-金融产品-基金--公募'}, {'value': '产品-金融产品-基金—REITS', 'label': '产品-金融产品-基金—REITS'}, {'value': '产品-金融产品-股票', 'label': '产品-金融产品-股票'}, {'value': '地点-省', 'label': '地点-省'}, {'value': '监管机构-银保监会（局）', 'label': '监管机构-银保监会（局）'}, {'value': '监管机构-人民银行（分行）', 'label': '监管机构-人民银行（分行）'}, {'value': '监管机构-行业协会', 'label': '监管机构-行业协会'}, {'value': '监管机构-证监会（局）', 'label': '监管机构-证监会（局）'}, {'value': '学校', 'label': '学校'}, {'value': '非上市公司-金融机构-证券', 'label': '非上市公司-金融机构-证券'}, {'value': '非上市公司-金融机构-银行', 'label': '非上市公司-金融机构-银行'}, {'value': '非上市公司-实体企业', 'label': '非上市公司-实体企业'}, {'value': '非上市公司-金融机构-保险', 'label': '非上市公司-金融机构-保险'}, {'value': '非上市公司-金融机构-其他金融机构', 'label': '非上市公司-金融机构-其他金融机构'}, {'value': '非上市公司-金融机构-基金-公募基金', 'label': '非上市公司-金融机构-基金-公募基金'}, {'value': '非上市公司-金融机构-信托', 'label': '非上市公司-金融机构-信托'}, {'value': '地点-县/区', 'label': '地点-县/区'}, {'value': '非上市公司其他公司', 'label': '非上市公司其他公司'}, {'value': '未知', 'label': '未知'}, {'value': '组织机构', 'label': '组织机构'}, {'value': '产品-金融产品-其他', 'label': '产品-金融产品-其他'}, {'value': '时间', 'label': '时间'}, {'value': '事件-股东减持', 'label': '事件-股东减持'}, {'value': '事件-股东增持', 'label': '事件-股东增持'}, {'value': '报道媒体', 'label': '报道媒体'}, {'value': '事件-重大安全事故', 'label': '事件-重大安全事故'}, {'value': '事件-重大对外赔付', 'label': '事件-重大对外赔付'}, {'value': '事件-重大资产损失', 'label': '事件-重大资产损失'}, {'value': '事件-高层死亡', 'label': '事件-高层死亡'}, {'value': '事件-股权质押', 'label': '事件-股权质押'}, {'value': '事件-股权冻结', 'label': '事件-股权冻结'}, {'value': '事件-破产清算', 'label': '事件-破产清算'}]
}
},
components: {
EmphasizedText
},
methods: {
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.currentPage = val;
},
clearAll(){
this.$cy.elements().remove()
@ -647,6 +704,7 @@ export default {
http.get('/graph/expand/?name=' + name_str + '&label=' + input_label).then((res)=>{
let get_data=res.data
this.edgeData.push(...get_data.data['edges'])
this.$cy.add(get_data.data['nodes'])
this.$cy.add(get_data.data['edges'])
@ -770,6 +828,7 @@ export default {
//console.log(get_data)
// console.log(mindate, maxdate)
let tmp=response.data.data
this.edgeData.push(...tmp['edges'])
that.$cy.add(tmp['nodes'])
that.$cy.add(tmp['edges'])
@ -1297,10 +1356,15 @@ export default {
series:seriesData
}
option && myChart.setOption(option);
console.log(option)
})
},
entity_relationship(id){
this.$message({
showClose: true,
message: '请稍等',
type: 'info'
})
http.get('/graph/get_current_similarity/?company_id=' + id,
).then((response) => {
this.relationData.length=0
@ -1326,7 +1390,7 @@ export default {
seriesData.push({name:name[i],type:'line',data:tmp})
}
this.relationData= response.data.data
console.log(seriesData)
// console.log(seriesData)
this.relationChart(name,seriesData,time)
// this.relationDialog = true
})
@ -1341,6 +1405,201 @@ export default {
},
generateMonthlyIntervals(startDate, endDate) {
const intervals = [];
let currentDate = new Date(startDate);
while (currentDate <= endDate) {
intervals.push({
date: new Date(currentDate)
});
// 移动到下一个月的第一天
currentDate.setMonth(currentDate.getMonth() + 1);
currentDate.setDate(1); // 确保是每个月的第一天
}
// console.log(intervals,startDate)
return intervals;
},
countNeighborsOverTime(edges, node, timeIntervals) {
let totalNeigh=new Set()
let numEdges=0
let neighborCounts = timeIntervals.map(interval => ({
date: interval.date,
sourceCount: 0,
targetCount: 0,
// totalCount: 0,
sourceNeighbors: new Set(),
targetNeighbors: new Set()
}));
console.log(timeIntervals)
edges.forEach(edge => {
if (edge['data'].source === node || edge['data'].target === node) {
numEdges++
for (let i = 0; i < timeIntervals.length; i++) {
if (!totalNeigh.has(edge['data'].source) )
totalNeigh.add(edge['data'].source)
if (!totalNeigh.has(edge['data'].target) )
totalNeigh.add(edge['data'].target)
const interval = timeIntervals[i];
if (interval.date >= new Date(edge['data']['开始日期']) && interval.date <= new Date(edge['data']['结束日期'])) {
const { date, sourceNeighbors, targetNeighbors } = neighborCounts[i];
if (edge['data'].source === node) {
if (!sourceNeighbors.has(edge['data'].target)) {
sourceNeighbors.add(edge['data'].target);
neighborCounts[i].sourceCount++;
}
}
if (edge['data'].target === node) {
if (!targetNeighbors.has(edge['data'].source)) {
targetNeighbors.add(edge['data'].source);
neighborCounts[i].targetCount++;
}
}
neighborCounts[i].totalCount = sourceNeighbors.size + targetNeighbors.size;
}
}
}
})
// 将 Set 转换为数组，以便于后续处理
let start = 0;
let end = neighborCounts.length - 1;
neighborCounts.forEach(count => {
count.sourceNeighbors = Array.from(count.sourceNeighbors);
count.targetNeighbors = Array.from(count.targetNeighbors);
});
// 找到第一个不为零的元素
while (start < neighborCounts.length && (neighborCounts[start].sourceCount === 0 && neighborCounts[start].targetCount === 0)) {
start++;
}
// 找到最后一个不为零的元素
while (end >= 0 && (neighborCounts[end].sourceCount === 0 && neighborCounts[end].targetCount === 0)) {
end--;
}
// 截取从第一个不为零的元素到最后一个不为零的元素
if (start > end) {
return [[],numEdges,totalNeigh.size-1]; // 如果没有不为零的元素，返回空数组
}
else
{
const sourceNeighbors = [];
const targetNeighbors = [];
const total=[];
const dates = [];
neighborCounts=neighborCounts.slice(start, end + 1)
neighborCounts.forEach(item => {
dates.push(item.date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'short' }));
sourceNeighbors.push(item.sourceCount);
targetNeighbors.push(item.targetCount);
total.push(item.sourceCount+item.targetCount)
});
return [[dates,sourceNeighbors,targetNeighbors,total],numEdges,totalNeigh.size-1];
}
},
analyse_neigh( id){
// 获取该节点的所有邻居
const neighborhood = this.$cy.$('#' + id).neighborhood();
// console.log(neighborhood)
// 遍历邻居集合，收集邻居节点的信息
const neighborsInfo = new Set();
neighborhood.forEach(neighbor => {
if (neighbor.isNode()) { // 确保我们只处理节点，而不是边
const neighborData = neighbor.data('label').split('-');
if (neighborData.length>0){
const lastLabel=neighborData[neighborData.length-1]
// 收集你需要的邻居节点的数据
if(!neighborsInfo.has(lastLabel) )
neighborsInfo.add(lastLabel)
}
}
});
let minDate= this.edgeData[0]['data']['开始日期']
let maxDate= this.edgeData[0]['data']['结束日期']
this.edgeData.forEach(edge=>{
if (edge['data']['开始日期']!=='未知' && edge['data']['开始日期']<minDate)
minDate=edge['data']['开始日期']
if (edge['data']['开始日期']!=='未知' && edge['data']['结束日期']>maxDate)
maxDate=edge['data']['结束日期']
})
minDate=minDate==='未知'? this.mindate: minDate
maxDate=maxDate==='未知'? this.maxdate: maxDate
console.log(this.edgeData.length)
const timeIntervals = this.generateMonthlyIntervals(new Date(minDate), new Date(maxDate));
const neighborCounts= this.countNeighborsOverTime(this.edgeData, id, timeIntervals);
this.numEdge=neighborCounts[1]
this.neighborLabel=neighborsInfo
this.numNeighbors=neighborCounts[2]
// console.log({'detail':neighborCounts[0],'numEdge':neighborCounts[1],'label':neighborsInfo,'numNighbors':neighborCounts[2]})
this.initNeighborChart(neighborCounts[0])
this.neighborDialog=true
},
initNeighborChart(neighborCounts){
console.log(neighborCounts)
this.$nextTick(()=>{
let myChart = this.$echarts.init(this.$refs.neighborChart);
let option= {
title: {
text: '邻居节点数量'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['入度邻居', '出度邻居','总计']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: neighborCounts[0]
},
yAxis: {
type: 'value'
},
series: [
{
name: '入度邻居',
type: 'line',
// stack: 'Total',
data: neighborCounts[1]
},
{
name: '出度邻居',
type: 'line',
// stack: 'Total',
data: neighborCounts[2]
},
{
name: '总计',
type: 'line',
// stack: 'Total',
data: neighborCounts[3]
}
]
}
option && myChart.setOption(option);
})
},
xianshi_neigh(id){
this.$cy.$('#'+id).neighborhood().show();
// cy.nodes().filter(function( element, i ){return element.data('id') == id}).neighborhood().nodes().show();
@ -1460,7 +1719,9 @@ export default {
// name:content
// }
).then((response) => {
let graphData = response.data
this.edgeData=graphData.edges
let that = this
if (!cytoscape().cxtmenu) {
cytoscape.use(cxtmenu)
@ -1973,24 +2234,48 @@ export default {
},
{
fillColor: '#33a3dc', // optional: custom background color for item
content: '<span style="font-size: 7px">显示邻居</span>', // html/text content to be displayed in the menu
content: '<span style="font-size: 7px">邻居统计</span>', // html/text content to be displayed in the menu
// content: '显示邻居',
contentStyle: {}, // css key:value pairs to set the command's css in js if you want
select: (ele) =>this.xianshi_neigh(ele.id()),
select: (ele) =>this.analyse_neigh(ele.id()),
enabled: true, // whether the command is selectable
},
{
fillColor: '#73b9a2', // optional: custom background color for item
content: '<span style="font-size: 7px">隐藏邻居</span>', // html/text content to be displayed in the menu
content: '<span style="font-size: 7px">隐藏/显示邻居</span>', // html/text content to be displayed in the menu
contentStyle: {}, // css key:value pairs to set the command's css in js if you want
select: (ele) => this.yincang_neigh(ele.id()),
select: (ele) => {
if (!this.hideClickCount[ele.id]) {
this.hideClickCount[ele.id] = 0;
}
if (this.hideClickCount[ele.id]%2===0)
this.yincang_neigh(ele.id())
else
this.xianshi_neigh(ele.id())
this.hideClickCount[ele.id]++
},
enabled: true, // whether the command is selectable
},
{
fillColor: '#f7acbc', // optional: custom background color for item
content: '<span style="font-size: 7px">高亮邻居</span>', // html/text content to be displayed in the menu
// contentStyle: {}, // css key:value pairs to set the command's css in js if you want
select: (ele) => this.lightOn([ele.id()]),
select: (ele) => {
if (!this.nodeClickCount[ele.id]) {
this.nodeClickCount[ele.id] = 0;
}
if (this.nodeClickCount[ele.id]%2===0)
this.lightOn([ele.id()])
else
this.lightOff()
this.nodeClickCount[ele.id]++
},
enabled: true, // whether the command is selectable
},
{
@ -2374,7 +2659,11 @@ export default {
</script>
<style lang="less" scoped>
//.fontClass{
// font-family: "微软雅黑";
// color: #02A7F0;
//
//},
.info{
position: fixed;
//margin-top: -35px;

48
src/views/健康指数.vue
View File

@ -627,31 +627,34 @@ tableLabel_long: {
this.formInline2.radarData2.length=0
this.tableData_2_1.length=0
}
http.get(
const request1= http.get(
"/health/health_search/",
{params:{
name: this.formInline2.company1,//公司名
date: this.formInline2.quarter_year,//时间（年份+季度）
}}).then(response => {
this.formInline2.tableData1= response.data.data
if (this.formInline2.tableData1['等级']===1)
this.formInline2.tableData1.level='严重'
else if (this.formInline2.tableData1['等级']===2)
this.formInline2.tableData1.level='中等'
else
this.formInline2.tableData1.level='良好'
this.formInline2.tableData1.name=this.formInline2.company1
this.tableData_2_1.push( this.formInline2.tableData1)
for (let i in response.data.data){
if (i !=='健康指数' && i !=='等级' && typeof response.data.data[i]==='number') this.formInline2.radarData1.push(response.data.data[i])}
},
http.get(
"/health/health_search/",
}})
const request2=http.get("/health/health_search/",
{params:{
name: this.formInline2.company2,//公司名
date: this.formInline2.quarter_year,//时间（年份+季度）
}}).then(response => {
this.formInline2.tableData2= response.data.data
}})
Promise.all([request1,request2]).then((res)=>{
const response1=res[0]
const response2=res[1]
this.formInline2.tableData1= response1.data.data
if (this.formInline2.tableData1['等级']===1)
this.formInline2.tableData1.level='严重'
else if (this.formInline2.tableData1['等级']===2)
this.formInline2.tableData1.level='中等'
else
this.formInline2.tableData1.level='良好'
this.formInline2.tableData1.name=this.formInline2.company1
this.tableData_2_1.push( this.formInline2.tableData1)
for (let i in response1.data.data){
if (i !=='健康指数' && i !=='等级' && typeof response1.data.data[i]==='number') this.formInline2.radarData1.push(response1.data.data[i])}
this.formInline2.tableData2= response2.data.data
if (this.formInline2.tableData2['等级']===1)
this.formInline2.tableData2.level='严重'
else if (this.formInline2.tableData2['等级']===2)
@ -660,14 +663,14 @@ tableLabel_long: {
this.formInline2.tableData2.level='良好'
// console.log(response)
this.formInline2.tableData2.name=this.formInline2.company2
for (let i in response.data.data)
if (i !=='健康指数' && i !=='等级' && typeof response.data.data[i]==='number') this.formInline2.radarData2.push(response.data.data[i])
for (let i in response2.data.data)
if (i !=='健康指数' && i !=='等级' && typeof response2.data.data[i]==='number') this.formInline2.radarData2.push(response2.data.data[i])
console.log(this.formInline2.radarData2)
console.log(this.formInline2.radarData1)
const echarts1 = echarts.init(this.$refs.echarts_1)
this.tableData_2_1.push( this.formInline2.tableData2)
console.log(this.tableData_2_1)
}).then(()=>{
const echarts1 = echarts.init(this.$refs.echarts_1)
const option1 = {
// 右上角存图
toolbox: {
@ -716,7 +719,6 @@ tableLabel_long: {
};
echarts1.setOption(option1)
})
)
},

17
src/views/风险预警.vue
View File

@ -300,10 +300,10 @@ components: {
value: '上海证券交易所',
label: '上海证券交易所'
},
// {
// value: '北交所',
// label: '北京证券交易所'
// },
{
value: '北交所',
label: '北京证券交易所'
},
],
options_exchange:[{
@ -431,6 +431,7 @@ tableData2: [
warning_score:'风险值',
last_time:'上次预警时刻',
increase:'同比',
counts:'预警次数'
},
// 个体
@ -559,8 +560,8 @@ tableData2: [
start:this.formInline1.start_date,
end:this.formInline1.end_date,
}}).then((res)=>{
this.tableData1 = eval(unescape(res.data.replace(/\\u/g, '%u')))
// this.tableData1=res.data
// this.tableData1 = eval(unescape(res.data.replace(/\\u/g, '%u')))
this.tableData1=res.data
})
http.get('/warning/region_all_risk/',{params:{
// 不传时间默认最近半年
@ -776,8 +777,8 @@ tableData2: [
},
// 详情页2
detail2(row){
console.log("查看详情-个体风险预警")
console.log(row)//返回这一行所有的内容
// console.log("查看详情-个体风险预警")
// console.log(row)//返回这一行所有的内容
// console.log(this.tableData2)
this.tableData_detail_2=Array(row)
// for(let i in this.tableData2)

64
src/views/高影响力主体分析.vue
View File

@ -127,14 +127,14 @@
<div class="table" style="width: 100%; float: left; overflow: hidden">
<el-table :data="tableData" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
border
height="250"
height="350"
:row-style="{height:'28px'}"
:cell-style="{padding:'0px'}"
header-row-class-name="active_header"
header-cell-class-name="active_header"
cell-class-name="content_center"
style="width: 98%"> <!-- style="width: 40%" height="215" -->
<el-table-column v-for='(val,key) in tableLabel' :prop="key" :label="val" :key="key"/><!--插槽里面没有东西就可以用单标签 -->
<el-table-column v-for='(val,key) in tableLabel' :prop="key" :label="val" :key="key" sortable/><!--插槽里面没有东西就可以用单标签 -->
<el-table-column
prop="scale"
label="操作">
@ -166,33 +166,33 @@
label="主体名称"
width="120">
</el-table-column>
<el-table-column label="市场结构">
<el-table-column
prop="DC"
label="度中心性"
width="120">
</el-table-column>
<el-table-column
prop="BC"
label="介数中心性"
width="120">
</el-table-column>
<el-table-column
prop="CC"
label="接近中心性"
width="120">
</el-table-column>
<el-table-column
prop="weighted-PR"
label="加权PageRank"
width="120">
</el-table-column>
<el-table-column
prop="SLC"
label="局部中心性"
width="120">
</el-table-column>
</el-table-column>
<!-- <el-table-column label="市场结构">-->
<!-- <el-table-column-->
<!-- prop="DC"-->
<!-- label="度中心性"-->
<!-- width="120">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="BC"-->
<!-- label="介数中心性"-->
<!-- width="120">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="CC"-->
<!-- label="接近中心性"-->
<!-- width="120">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="weighted-PR"-->
<!-- label="加权PageRank"-->
<!-- width="120">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="SLC"-->
<!-- label="局部中心性"-->
<!-- width="120">-->
<!-- </el-table-column>-->
<!-- </el-table-column>-->
<el-table-column label="个体规模">
<el-table-column
prop="region"
@ -640,9 +640,15 @@ import {Loading} from "element-ui";
],
tableLabel: {
comp_name: '主体名称',
BC:'介数中心性',
DC:'度中心性',
CC:'接近中心性',
weighted_PR:'加权PageRank',
SLC:'局部中心性',
Total_score: '影响力综合分数',
grade: '影响等级',
spread_ability:'传播能力'
},
historyData:[],
timeLis:[],

51
src_old/App.vue
View File

@ -1,51 +0,0 @@
<template>
<div>
<!-- 路由出口 -->
<!-- 路由匹配组建将渲染到这里 -->
<!-- <router-view> </router-view>-->
<keep-alive exclude="test" include="">
<router-view />
</keep-alive>
<!-- <router-view v-if="!$route.meta.keepAlive" />-->
</div>
</template>
<script>
// import http from './utils/request'//导入接口？？
// import {getData} from './api'
// import DevicePixelRatio from './libs/rem'
// export default{
// created(){
// new DevicePixelRatio().init()
// }
// }
</script>
<style lang="less">//消除固定样式
html,body,h3{
margin: 0;
padding: 0;
}
.superscript{ // 1、上标
font-size: 13px;
padding:10px;
color:#fff;
background-color: rgba(2, 167, 240, 0.729411764705882);
}
.text{
color:rgba(2, 167, 240, 0.729411764705882);
cursor: pointer;
/* 将鼠标样式设为手型 */
}
</style>

BIN
src_old/assets/Logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src_old/assets/background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src_old/assets/card.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src_old/assets/r-c.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 79 KiB

22
src_old/assets/svg/card.svg
View File

@ -1,22 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="259px" height="170px" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask fill="white" id="clip336">
<path d="M 251 0 L 31.3118811881188 0 L 2 31.9661016949153 L 2 163.305084745763 L 251 163.305084745763 L 251 0 Z " fill-rule="evenodd" />
</mask>
<filter x="201px" y="107px" width="259px" height="170px" filterUnits="userSpaceOnUse" id="filter337">
<feOffset dx="3" dy="3" in="SourceAlpha" result="shadowOffsetInner" />
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner" result="shadowGaussian" />
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.349019607843137 0 " in="shadowComposite" />
</filter>
<g id="widget338">
<path d="M 251 0 L 31.3118811881188 0 L 2 31.9661016949153 L 2 163.305084745763 L 251 163.305084745763 L 251 0 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 201 107 )" />
<path d="M 251 0 L 31.3118811881188 0 L 2 31.9661016949153 L 2 163.305084745763 L 251 163.305084745763 L 251 0 Z " stroke-width="2" stroke="#555555" fill="none" transform="matrix(1 0 0 1 201 107 )" mask="url(#clip336)" />
</g>
</defs>
<g transform="matrix(1 0 0 1 -201 -107 )">
<use xlink:href="#widget338" filter="url(#filter337)" />
<use xlink:href="#widget338" />
</g>
</svg>

BIN
src_old/assets/数据显示old.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 420 B

62
src_old/bigscreen/大屏10-27.vue
View File

@ -1,62 +0,0 @@
<!-- -->
<template>
<div id="home">
<!-- 全屏容器dv-full-screen-container -->
<dv-full-screen-container>
<!-- 边框dv-border-box -->
<div style="flex:0 1 50%;padding-bottom: 10px;"> <!-- flex-grow | flex-shrink | flex-basis */没懂 -->
<dv-border-box-7 style="width: 100%;height:60px;">
<div style="color: aliceblue;text-align: center;padding: 10px;">大规模泛金融知识图谱系统"</div>
<dv-decoration-10 style="width:100%;height:5px;" />
</dv-border-box-7>
</div>
<div style="flex:0 1 50%"> <!-- flex-grow | flex-shrink | flex-basis */没懂 -->
<dv-border-box-7 style="width: 100%;height: 200px;">
<region/>
</dv-border-box-7>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
import region from "../components/region.vue";
export default {
components: {
region
},
data () {
return {
}
},
mounted(){
},
methods:{
},
}
</script>
<style lang="less" scoped>
#home {
width: 100%;
height: 100vh;
background: url("../assets/background.jpg") center center no-repeat;
background-size: 100% 100%;
position:absolute;/*/绝对定位 */
}
</style>

269
src_old/components/CommonAside.vue
View File

@ -1,269 +0,0 @@
<!-- 侧导航栏 -->
<template>
<div style="display=flex;">
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
:router="true"
:collapse="isCollapse"
background-color="#000000"
text-color="#fff"
active-text-color="#ffd04b"
style="height:1200px">
<!-- style="height:auto" -->
<!-- :default-active="$route.path"使得在没有点击左侧导航栏时，也能根据路由转变转化颜色 -->
<div style="display=flex;">
<!-- <img src="../assets/Logo.png" width="12%" style="display:inline-block;padding-right: 3px;" align="absmiddle"> -->
<img src="../assets/数据显示.png" width="20px" style="display:inline-block;padding-left: 1px;padding-right: 5px;" align="absmiddle">
<!-- align="absmiddle"让图像和文字一样高 -->
<h3 style="display:inline-block;" @click = "bigscreen">{{ isCollapse ? '' : '资本市场系统性风险平台'}}</h3>
<!-- -->
</div>
<!-- <el-button @click="handleMenu" icon="el-icon-menu" size="mini">bibibi</el-button> -->
<!-- 循环遍历所有的单导航栏 -->
<!-- 没有子菜单 --> <!-- index都是为了确保唯一性,但最好设置为path，有利于根据路由跳转页面 -->
<el-menu-item @click='clickMenu(item)' v-for="item in nochildren" :key='item.path' :index='item.path'>
<!-- : 是v-bind: -->
<i :class="`el-icon-${item.icon}`"></i> <!-- 图标，官网可选 -->
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<!-- 有子菜单 -->
<el-submenu v-for="item in hasChildren" :key='item.path' :index='item.path'><!-- index都是为了确保唯一性 -->
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.label }}</span>
</template>
<el-menu-item-group v-for='subItem in item.children' :key='subItem.path'>
<el-menu-item @click='clickMenu(subItem)' :index="subItem.path" style="padding-left: 70px;">{{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
// isCollapse:false,
menuData: [
// {
// path: "/",
// name: "home",
// label: "首页",
// icon: "s-home",
// },
{
path: "/systematic_risk",//2-1
name: "systematic_risk",
label: "系统性风险分析",
icon: 's-marketing'
},
{
path: "/market_entities",//1
name: "market_entities",
label: "市场主体分析",
icon: "s-flag",
},
//2
{
path: "/influential_entities",//3
name: "influential_entities",
label: "高影响主体分析",
icon: "star-off",
},
{
path: "/individual_risk",//2-2
name: "individual_risk",
label: "个体风险分析",
icon: 'lightning'
},
{
path: "/diffus",//5
name: "diffus",
label: "风险传导",
icon: "aim",
},
{
// path: "/warning",//4
label: "预警服务",
icon: "bell",
children:[
{
path: "/warning",//4-1
name: "warning",
label: "预警服务",
},
{
path: "/risk_warning",//4-1
name: "risk_warning",
label: "风险预警",
},
{
path: "/abnormal_detection",//4-2
name: "abnormal_detection",
label: "异常检测",
},
],
},
{
// path: "/event",//8
label: "事件分析",
icon: "document",
children:[
{
path: "/event_analysis",//2
name: "event_analysis",
label: "事件分析",
},
{
path: "/event_graph",//2
name: "event_graph",
label: "事件图谱",
},]
},
{
path: "/health",//5
name: "health",
label: "健康指数",
icon: "umbrella",
},
{
path: "/quotation",//7
name: "quotation",
label: "行情分析",
icon: "s-data",
},
{
path: "/pressure",//6
name: "pressure",
label: "压力测试",
icon: "s-help",
},
],
};
},
methods: {
bigscreen(){//点击标题跳转大屏
this.$router.push('/bigscreen');
},
//点击菜单
clickMenu(item){
// 当页面的路由this.$route.path 与 跳转的路由item.path 不一致才允许跳转
if (this.$route.path !== item.path && !(this.$route.path === '/market_entities' && (item.path === '/'))) {//$route是当前路径的路由
this.$router.push(item.path)//$router是整个的router实例
}
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
},
},
computed: {
hasChildren() {//有子菜单才需要用
return this.menuData.filter((item) => item.children);
},
nochildren() {
return this.menuData.filter((item) => !item.children);
},
isCollapse(){
return this.$store.state.tab.isCollapse
},
},
};
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {//背景？？
width: 220px;
min-height: 300px;
}
.el-menu-item, .el-submenu__title {//导航选项间隔
height: 40px;//导航选项之间
line-height: 45px;//导航上边距
}
.el-dropdown-menu__item, .el-menu-item {//导航字体大小
font-size: 13px;
}
.el-menu{
height:100vh;//背景布满
h3{
// color: #fff;
// text-align: center;
// line-height: normal;
// font-size: 13px;
font-family: 'Arial Normal', 'Arial', sans-serif;
font-weight: bold;//字体加粗
font-size: 16px;
color: #fff;
text-align: center;
line-height: 4;
}
}
/deep/ .el-menu-item-group__title { // 有孩子的标题
padding: 0px 0 0px 0px;//去掉距离
line-height: normal;
font-size: 12px;
color: #909399;
}
/deep/ .el-submenu__title {
font-size: 13px;
height: 40px!important;
line-height: 50px!important;
}
/deep/ .el-submenu__icon-arrow {
position: absolute;
top: 70%;//和文字调整一致
color:#fff;
}
</style>

210
src_old/components/CommonHeader.vue
View File

@ -1,210 +0,0 @@
<!-- 上导航栏 -->
<template>
<div class="header-container">
<div class="l-content">
<!-- tag -->
<div class="tags" >
<el-tag v-for="(item,index) in tags"
:key="item.path"
:closable="true"
:effect="$route.name === item.name ? 'dark' : 'plain'"
@click="changeMenu(item)"
@close="handledClose(item,index)"
style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
{{ item.label }}
</el-tag>
</div>
<!--
<el-breadcrumb separator="">
<el-breadcrumb-item :to="{ path: '/' }">
<el-button size="small" >首页</el-button>
</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">
<el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
</el-button>
</a></el-breadcrumb-item>
</el-breadcrumb> -->
<!-- <span class="text">首页</span> -->
</div>
<!-- 用户信息 登录注册 -->
<div class="r-content">
<!--练习的弹出框 -->
<el-dialog
title="修改个人信息"
:visible.sync="dialogVisible"
width="30%">
<span></span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- 右侧登录页面设计 -->
<el-dropdown>
<span class="el-dropdown-link">
<el-button icon=el-icon-s-custom circle> </el-button> <!--登录图表按钮-->
<span class="text">请登录</span>
<i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item>-->
<!-- &lt;!&ndash; 点击后改变弹出框生效情况 &ndash;&gt;-->
<!-- <el-button style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item>-->
<!-- <el-button style='width: 150px;' @click = "logout">登出</el-button>-->
<!-- </el-dropdown-item>-->
<el-dropdown-item>
<el-button style='width: 150px;' @click="login">登录</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import http from "@/utils/request";
export default {
name: "CommonTag",
data(){
return{
dialogVisible:false,//用户登录页面
};
},
computed: {
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
tags: state => state.tab.tabsList
})
},
methods:{
login(){
this.$router.push('/login')
},
logout(){
this.$store.commit('logout')
},
//调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
...mapMutations(['closeTag']),
//点击tag跳转的功能
changeMenu(item){
// console.log(item)
this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
},
//点击tag x删除
handledClose(item,index){ //index是获取的索引
//点击tag删除 tabsList里面的数据
// 方法1
// this.$store.commit('closeTag')
// 方法2,调用store中的Mutations
this.closeTag(item)
const length=this.tags.length
// console.log("tags长度：",this.tags.length)
// console.log( this.$router)
//删除之后的跳转逻辑
//一）当前页与删除页不同（item.name和当前展示路由不一致），直接删除路由列表里面的对于name，就不能再打开，没有人性化调整的必要
if(item.name!== this.$route.name){
return
}
//二）当前页=删除页——删除的是最后一页(页面转到路由列表中的前一个)
if(index===length){
if(length===0){
item={
path: "/market_entities",
name: "market_entities",
label: "市场主体分析",
}
this.$router.push(item)
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
}
else{
this.$router.push({
name:this.tags[index-1].name
})
}
}
//三）当前页=删除页——删除的是中间一页(跳转后一个，因为已经删除了，跳转的还是后面那个)
else{
this.$router.push({
name:this.tags[index].name
})
}
},
// 跳转用户管理
UserManagement(){//点击标题跳转大屏
this.$router.push('/UserManagement');
},
}
};
</script>
<style lang="less" scoped>
.header-container{
padding: 0 30px;
background-color: #33333325;
height: 60px;
display: flex;//相邻的两个内容一行显示
justify-content: space-between;
.text{
color:rgba(0, 0, 0, 0.719);
font-size: 13px;
margin-left: 5px;//左间距
margin-bottom: 10px;//下间距
}
.l-content{
display: flex;
justify-content: space-between;
align-items: end; // 中间
}
.r-content{
margin-top: 5px;//下间距
align-items: top; // 中间
.el-button.is-circle {
border-radius: 100%;
padding: 3px;//边框和内部距离
}
.el-button {//按钮边框
background: #ffffff00;
border: 1px solid #00040e;
color: #000104;
font-size: 16px;
border-radius: 20px;
}
}
}
</style>

227
src_old/components/CommonHeaderAdmin.vue
View File

@ -1,227 +0,0 @@
<!-- 上导航栏 -->
<template>
<div class="header-container">
<div class="l-content">
<el-button @click="handleMenu" :icon=" icon" size="medium" style="padding: 5px;width: 30px;height: 60px;background-color:transparent;"></el-button>
<!-- tag -->
<div class="tags" >
<el-tag v-for="(item,index) in tags"
:key="item.path"
:closable="true"
:effect="$route.name === item.name ? 'dark' : 'plain'"
@click="changeMenu(item)"
@close="handledClose(item,index)"
style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
{{ item.label }}
</el-tag>
</div>
<!--
<el-breadcrumb separator="">
<el-breadcrumb-item :to="{ path: '/' }">
<el-button size="small" >首页</el-button>
</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">
<el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
</el-button>
</a></el-breadcrumb-item>
</el-breadcrumb> -->
<!-- <span class="text">首页</span> -->
</div>
<!-- 用户信息 登录注册 -->
<div class="r-content">
<!--练习的弹出框 -->
<el-dialog
title="修改个人信息"
:visible.sync="dialogVisible"
width="30%">
<span></span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- 右侧登录页面设计 -->
<el-dropdown>
<span class="el-dropdown-link">
<el-button icon=el-icon-s-custom circle> </el-button> <!--登录图表按钮-->
<span class="text">用户信息</span>
<i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item>-->
<!-- &lt;!&ndash; 点击后改变弹出框生效情况 &ndash;&gt;-->
<!-- <el-button style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
<!-- </el-dropdown-item>-->
<el-dropdown-item>
<el-button style='width: 150px;' @click = "UserManagement">用户管理</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button style='width: 150px;' @click="logout">退出登录</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import http from "@/utils/request";
export default {
name: "CommonTag",
data(){
return{
dialogVisible:false,//用户登录页面
// 折叠按钮
icon:"el-icon-arrow-left",
};
},
computed: {
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
tags: state => state.tab.tabsList
})
},
methods:{
// 折叠方法
handleMenu(){
this.$store.commit('collapseMenu')
this.icon = this.icon === 'el-icon-arrow-left' ? 'el-icon-arrow-right' : 'el-icon-arrow-left';
},
logout(){
this.$store.commit('logout')
this.$notify.info({
title: '注意',
message: '已退出'
})
this.$router.push('/login')
location.reload();
},
//调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
...mapMutations(['closeTag']),
//点击tag跳转的功能
changeMenu(item){
// console.log(item)
this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
},
//点击tag x删除
handledClose(item,index){ //index是获取的索引
//点击tag删除 tabsList里面的数据
// 方法1
// this.$store.commit('closeTag')
// 方法2,调用store中的Mutations
this.closeTag(item)
const length=this.tags.length
// console.log("tags长度：",this.tags.length)
// console.log( this.$router)
//删除之后的跳转逻辑
//一）当前页与删除页不同（item.name和当前展示路由不一致），直接删除路由列表里面的对于name，就不能再打开，没有人性化调整的必要
if(item.name!== this.$route.name){
return
}
//二）当前页=删除页——删除的是最后一页(页面转到路由列表中的前一个)
if(index===length){
if(length===0){
item={
path: "/market_entities",
name: "market_entities",
label: "市场主体分析",
}
this.$router.push(item)
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
}
else{
this.$router.push({
name:this.tags[index-1].name
})
}
}
//三）当前页=删除页——删除的是中间一页(跳转后一个，因为已经删除了，跳转的还是后面那个)
else{
this.$router.push({
name:this.tags[index].name
})
}
},
// 跳转用户管理
UserManagement(){//点击标题跳转大屏
this.$router.push('/UserManagement');
},
}
};
</script>
<style lang="less" scoped>
.header-container{
// padding: 0 30px;
padding: 0 0px;
background-color: #33333325;
height: 60px;
display: flex;//相邻的两个内容一行显示
justify-content: space-between;
.text{
color:rgba(0, 0, 0, 0.719);
font-size: 13px;
margin-left: 5px;//左间距
margin-bottom: 10px;//下间距
}
.l-content{
display: flex;
justify-content: space-between;
align-items: end; // 中间
}
.r-content{
margin-top: 5px;//下间距
align-items: top; // 中间
.el-button.is-circle {
border-radius: 100%;
padding: 3px;//边框和内部距离
}
.el-button {//按钮边框
background: #ffffff00;
border: 1px solid #00040e;
color: #000104;
font-size: 16px;
border-radius: 20px;
}
}
}
</style>

225
src_old/components/CommonHeaderUser.vue
View File

@ -1,225 +0,0 @@
<!-- 上导航栏 -->
<template>
<div class="header-container">
<div class="l-content">
<el-button @click="handleMenu" :icon=" icon" size="medium" style="padding: 5px;width: 30px;height: 60px;background-color:transparent;"></el-button>
<!-- tag -->
<div class="tags" >
<el-tag v-for="(item,index) in tags"
:key="item.path"
:closable="true"
:effect="$route.name === item.name ? 'dark' : 'plain'"
@click="changeMenu(item)"
@close="handledClose(item,index)"
style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
{{ item.label }}
</el-tag>
</div>
<!--
<el-breadcrumb separator="">
<el-breadcrumb-item :to="{ path: '/' }">
<el-button size="small" >首页</el-button>
</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">
<el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
</el-button>
</a></el-breadcrumb-item>
</el-breadcrumb> -->
<!-- <span class="text">首页</span> -->
</div>
<!-- 用户信息 登录注册 -->
<div class="r-content">
<!--练习的弹出框 -->
<el-dialog
title="修改个人信息"
:visible.sync="dialogVisible"
width="30%">
<span></span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- 右侧登录页面设计 -->
<el-dropdown>
<span class="el-dropdown-link">
<el-button icon=el-icon-s-custom circle> </el-button> <!--登录图表按钮-->
<span class="text">用户信息</span>
<i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item>-->
<!-- &lt;!&ndash; 点击后改变弹出框生效情况 &ndash;&gt;-->
<!-- <el-button style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item> -->
<!-- <el-button style='width: 150px;' @click = "UserManagement">用户管理</el-button>-->
<!-- </el-dropdown-item>-->
<el-dropdown-item>
<el-button style='width: 150px;' @click="logout">退出登录</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import http from "@/utils/request";
export default {
name: "CommonTag",
data(){
return{
dialogVisible:false,//用户登录页面
// 折叠按钮
icon:"el-icon-arrow-left",
};
},
computed: {
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
tags: state => state.tab.tabsList
})
},
methods:{
// 折叠方法
handleMenu(){
this.$store.commit('collapseMenu')
this.icon = this.icon === 'el-icon-arrow-left' ? 'el-icon-arrow-right' : 'el-icon-arrow-left';
},
logout(){
this.$store.commit('logout')
this.$notify.info({
title: '注意',
message: '已退出'
})
this.$router.push('/login')
location.reload();
},
//调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
...mapMutations(['closeTag']),
//点击tag跳转的功能
changeMenu(item){
// console.log(item)
this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
},
//点击tag x删除
handledClose(item,index){ //index是获取的索引
//点击tag删除 tabsList里面的数据
// 方法1
// this.$store.commit('closeTag')
// 方法2,调用store中的Mutations
this.closeTag(item)
const length=this.tags.length
// console.log("tags长度：",this.tags.length)
// console.log( this.$router)
//删除之后的跳转逻辑
//一）当前页与删除页不同（item.name和当前展示路由不一致），直接删除路由列表里面的对于name，就不能再打开，没有人性化调整的必要
if(item.name!== this.$route.name){
return
}
//二）当前页=删除页——删除的是最后一页(页面转到路由列表中的前一个)
if(index===length){
if(length===0){
item={
path: "/market_entities",
name: "market_entities",
label: "市场主体分析",
}
this.$router.push(item)
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
}
else{
this.$router.push({
name:this.tags[index-1].name
})
}
}
//三）当前页=删除页——删除的是中间一页(跳转后一个，因为已经删除了，跳转的还是后面那个)
else{
this.$router.push({
name:this.tags[index].name
})
}
},
// 跳转用户管理
UserManagement(){//点击标题跳转大屏
this.$router.push('/UserManagement');
},
}
};
</script>
<style lang="less" scoped>
.header-container{
padding: 0 30px;
background-color: #33333325;
height: 60px;
display: flex;//相邻的两个内容一行显示
justify-content: space-between;
.text{
color:rgba(0, 0, 0, 0.719);
font-size: 13px;
margin-left: 5px;//左间距
margin-bottom: 10px;//下间距
}
.l-content{
display: flex;
justify-content: space-between;
align-items: end; // 中间
}
.r-content{
margin-top: 5px;//下间距
align-items: top; // 中间
.el-button.is-circle {
border-radius: 100%;
padding: 3px;//边框和内部距离
}
.el-button {//按钮边框
background: #ffffff00;
border: 1px solid #00040e;
color: #000104;
font-size: 16px;
border-radius: 20px;
}
}
}
</style>

189
src_old/components/QiPao.vue
View File

@ -1,189 +0,0 @@
<template>
<div ref="QiPao" style="width: 1000px; height: 800px"></div>
</template>
<script>
import * as echarts from "echarts";
import * as d3 from 'd3';
export default {
data() {
return {
option: {},
colorList: ['#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
};
},
mounted() {
let that = this
let seriesData = [
{
depth: 0,
id: 'option',
index: 0,
value: 0
},
{
depth: 1,
id: 'option.大连商品交易所',
index: 1,
value: 1
},
{
depth: 1,
id: 'option.上海期货交易所',
index: 2,
value: 1
},
{
depth: 1,
id: 'option.郑州商品交易所',
index: 3,
value: 2
},
{
depth: 0,
id: 'option.广州期货交易所',
index: 4,
value: 1
},
{
depth: 1,
id: 'option.上海国际能源交易中心',
index: 5,
value: 1
},
];
let displayRoot = stratify1();
function stratify1() {
return d3
.stratify()
.parentId(function (d) {
return d.id.substring(0, d.id.lastIndexOf('.'));
})(seriesData)
.sum(function (d) {
return d.value || 0;
})
.sort(function (a, b) {
return b.value - a.value;
});
}
function overallLayout(params, api) {
let context = params.context;
d3
.pack()
.size([api.getWidth() - 2, api.getHeight() - 2])
.padding(0)(displayRoot);
context.nodes = {};
displayRoot.descendants().forEach(function (node) {
context.nodes[node.id] = node;
});
}
function renderItem(params, api) {
let context = params.context;
let idx = params.dataIndex;
// Only do that layout once in each time `setOption` called.
// 每次调用“setOption”时，只能进行一次布局。
if (!context.layout) {
context.layout = true;
overallLayout(params, api);
}
let nodePath = api.value('id');
let nodeName = nodePath
.slice(nodePath.lastIndexOf('.') + 1)
.split(/(?=[A-Z][^A-Z])/g)
.join('')
let node = context.nodes[nodePath];
if (node.id === 'option') {
node.r = 0
}
if (!node) {
// Reder nothing.
return;
}
let z2 = api.value('depth') * 2;
return {
type: 'circle',
shape: {
cx: node.x,
cy: node.y,
r: node.r
},
// transition: ['shape'],
z2: z2,
textContent: {
type: 'text',
style: {
// transition: isLeaf ? 'fontSize' : null,
text: nodeName,
fill: '#fff',
fontFamily: 'Arial',
width: node.r,
overflow: 'truncate',
fontSize: 13
},
emphasis: {
style: {
overflow: null,
fontSize: Math.max(node.r / 3, 12)
}
}
},
textConfig: {
position: 'inside'
},
style: {
fill: that.colorList[idx % that.colorList.length]
},
emphasis: {
style: {
fontFamily: 'Arial',
fontSize: 6,
shadowBlur: 20,
shadowOffsetX: 3,
shadowOffsetY: 5,
shadowColor: 'rgba(0,0,0,0.3)'
}
}
};
}
this.option = {
dataset: {
source: seriesData
},
tooltip: {},
hoverLayerThreshold: Infinity,
series: [{
type: 'custom',
colorBy: 'data',
renderItem: renderItem,
progressive: 0,
coordinateSystem: 'none',
encode: {
tooltip: 'value',
itemName: 'id'
},
}]
}
this.initEcharts()
},
methods: {
initEcharts() {
let myChart = echarts.init(this.$refs.QiPao)
myChart.setOption(this.option)
}
},
};
</script>
<style>
</style>

154
src_old/components/addline.vue
View File

@ -1,154 +0,0 @@
<template>
<div>
<div class="form">
<!-- inline="true"表单域在一行 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="公司名称">
<el-input v-model="formInline.company_str" placeholder="公司名称：" size="mini"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" icon="el-icon-search" size="mini">查询</el-button>
</el-form-item>
</el-form>
</div>
<div id='echarts' ref="echarts_1" style="height:300px;width:600px;margin-left: 200px;"></div>
</div>
</template>
<script>
import * as echarts from "echarts"
export default {
data() {
return {
// 新数据
x:['2000/6/5','2000/6/6','2000/6/7','2000/6/8','2000/6/9','2000/6/10','2000/6/11','2000/6/12','2000/6/13','2000/6/14','2000/6/15','2000/6/16','2000/6/17','2000/6/18','2000/6/19','2000/6/20','2000/6/21','2000/6/22','2000/6/23','2000/6/24','2000/6/25','2000/6/26','2000/6/27','2000/6/28','2000/6/29','2000/6/30','2000/7/1','2000/7/2','2000/7/3','2000/7/4','2000/7/5','2000/7/6','2000/7/7','2000/7/8','2000/7/9','2000/7/10','2000/7/11','2000/7/12','2000/7/13','2000/7/14','2000/7/15','2000/7/16','2000/7/17','2000/7/18','2000/7/19','2000/7/20','2000/7/21','2000/7/22','2000/7/23','2000/7/24'],
y1:[200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
y2:[319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
y3:[329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
y4:[284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
formInline: {
company_str: '',
},
legend_1:['银行'],
series_1:[{
name: '银行',
type: 'line',
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
}],
option_1 : {
title: [{
x :'center',
y:'bottom',
text: '各行业风险价值（机构处于极端困难情况时）的时序变化'
},
],
tooltip: {
trigger: 'axis'
},
legend: {data:
this.series_1
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.x,//其中的一个数据
},
yAxis: {
type: 'value'
},
series: [{
name: '银行',
type: 'line',
// stack: 'Total',
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
}],
},
linedata_1:[
{
name: '银行',
type: 'line',
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
},
{
name: '北京银行',
type: 'line',
data: [319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
},
{
name: '中国银行',
type: 'line',
data: [329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
},
{
name: 'Direct',
type: 'line',
data: [284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
},
{
name: 'Search Engine',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
],
}
},
mounted(){
// 风险价值动态变化
this.onSubmit()
},
methods: {
onSubmit() {
if (this.formInline.company_str!==''){
console.log(this.formInline.company_str)
let tmp=this.linedata_1.find(item => item.name === this.formInline.company_str) //es6
this.option_1.series.push(tmp)
console.log(this.option_1.series)
}
let echarts1 = echarts.init(this.$refs.echarts_1)
echarts1.setOption(this.option_1)
},
}
};
</script>
<style lang="less" scoped>
// 第一层
</style>

315
src_old/components/dimensionComponent.vue
View File

@ -1,315 +0,0 @@
<template>
<div>
<div ref="dimension" style="width: 1200px; height: 450px;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";
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 () {
http.get('/risk/dimension/').then((res)=>{
this.date=res.data.date
this.individualRisk=res.data.individual
this.structureRisk=res.data.structure
this.spillRisk=res.data.spill
this.volatilityRisk=res.data.volatility
this.detail=res.data.detail
this.markArea=res.data.markarea
this.prevDayDim=res.data.detail[this.state][0]
this.yesterdayDim=res.data.detail[this.state][1]
this.todayDim=res.data.detail[this.state][2]
this.tomorrowDim=res.data.detail[this.state][3]
this.initChart()
}
)
},
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:{
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',
},
// grid:{
// show:true,
// backgroundColor:'#eee'
// },
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.date
},
legend: {
top:30,
data: ['个体风险状态', '风险关联与溢出', '市场系统结构', '市场波动和趋势']
},
yAxis: {
scale: true,
splitLine: {
show: false
}
},
toolbox: {
right: 80,
feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
dataView: {
show: true,
title: '查看数据',
},
restore: {},
saveAsImage: {}
}
},
//以下是时间轴
dataZoom: [{
//也应该是动态的
start:80,
end:100
}, {
type: 'inside'
}],
//以上是时间轴
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>

124
src_old/components/echarts/AreaChart.vue
View File

@ -1,124 +0,0 @@
<!-- 直方图和折线图的结合图 -->
<template>
<div ref="AreaChart" style="height:300px;width:1000px; border: 1px solid #e0e0e0;margin:20px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props:['myHalfData'],
data () {
return {
myData:this.myHalfData
}
},
mounted() {
const echarts2 = echarts.init(this.$refs.AreaChart)
const option_2={
// 右上角存图
toolbox: {
feature: {
saveAsImage: {}
}
},
title: {
text: '事件热度分析'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['渠道1', '渠道2', '渠道3']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['0', '1', '2', '3', '4', '5', '6'],
name: '天'
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '渠道1',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '渠道2',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '渠道3',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1200]
}
]
}
echarts2.setOption(option_2)
},
};
</script>
<style>
</style>

104
src_old/components/echarts/DifferentialChart.vue
View File

@ -1,104 +0,0 @@
<!-- line chart动态数据变化趋势图 -->
<template>
<div>
<el-empty description="暂无数据" v-show="!show"></el-empty>
<div ref="lines" style="width: 800px; height: 300px;padding-left:250px" v-show="show"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
props:{
datelis:[],
asset:[],
held_num:[],
},
data() {
return {
show:false
};
},
watch:{
datelis(){
//不为空字符串列表
console.log(this.held_num)
if (this.asset.findIndex((value) => value!=='' )!== -1 || this.held_num.findIndex((value) => value!=='')!== -1) {
console.log(1)
this.show = true
this.initChart()
}
}
},
mounted() {
},
methods: {
initChart(){
var myChart = echarts.init(this.$refs.lines);
// 绘制图表
var option = {
title: {
text: "资产和持股规模",
left: "center",
textStyle: {
fontSize: 17,
lineHeight: 10,
},
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["资产","持股"],
padding:[25,0,0,0],
//orient: 'vertical',
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: this.datelis,
},
yAxis: {
type: "value",
},
series: [
{
name: "资产",
type: "line",
stack: "Total",
data: this.asset,
},
{
name: "持股",
type: "line",
stack: "Total",
data: this.held_num,
// [4500, 5000, 5020, 4900, 4300, 6000, 6600,6200,7000,5500,4900,6100,
// 6700,7050,8000,9000,11000,12000,8600,8200,9500
// ],
},
],
}
myChart.setOption(option);
}
},
};
</script>
<style>
</style>

155
src_old/components/echarts/DynamicLine.vue
View File

@ -1,155 +0,0 @@
<template>
<div ref="changetrend" style="width: 800px; height: 320px;margin-left: 100px;margin-top: 0px;"></div>
</template>
<script>
import * as echarts from "echarts";
import http from "@/utils/request";
export default {
data() {
return {
time:[],
riskData:[],
len:Number,
};
},
mounted() {
http.get('/warning/get_warning_count/?need=1').then((res)=>{
for (let i in res.data) {
this.time.push(res.data[i]["time"].replace('_','-'))
this.riskData.push(res.data[i]["综合风险水平"])
}
this.len=this.time.length
let selectedTime=this.time.slice(0,40)
let selectedRisk=this.riskData.slice(0,40)
var myChart = echarts.init(this.$refs.changetrend);
// 绘制图表
// function randomData() {
// now = new Date(+now + oneDay);
// value = value + Math.random() * 21 - 10;
// return {
// name: now.toString(),
// value: [
// [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
// Math.round(value),
// ],
// };
// }
// let data = [];
// let now = new Date(1997, 9, 3);
// let oneDay = 24 * 3600 * 1000;
// let value = Math.random() * 1000;
// for (var i = 0; i < 1000; i++) {
// data.push(randomData());
// }
// console.log(data)
var option = {
title: {
text: "系统性风险整体变化趋势",
left:'center',
textStyle: {//主标题文本样式
fontSize: 15,
color:'#696969',
},
padding:[ 5,0,5,0],//[5,10] | [ 5,6, 7, 8] ,标题内边距[上，x，下，x]
},
grid: {
left: '20%',//离左边远一点
right: '4%',
// bottom: '10%',
top:'5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
// containLabel: true
},
tooltip: {
trigger: "axis",
// formatter:
// function (params) {
// params = params[0];
// var date = new Date(params.name);
// return (
// date.getDate() +
// "/" +
// (date.getMonth() + 1) +
// "/" +
// date.getFullYear() +
// " : " +
// params.value[1]
// );
// },
axisPointer: {
animation: false,
},
},
xAxis: {
type: "category",
splitLine: {
show: false,
},
data:selectedTime
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
splitLine: {
show: false,
},
},
series: [
{
name: "综合风险",
type: "line",
showSymbol: true,
data: selectedRisk
// data,
},
],
};
myChart.setOption(option);
var that=this
let i =0
setInterval(function () {
// for (var i = 0; i < 5; i++) {
// data.shift();
// data.push(randomData());
// }
if (i===that.time.length-50)
i=0
selectedRisk=that.riskData.slice(i,50+i)
selectedTime=that.time.slice(i,50+i)
i++
myChart.setOption({
series: [
{
name: "综合风险",
type: "line",
showSymbol: true,
data: selectedRisk,
},
],
xAxis: {
type: "category",
splitLine: {
show: false,
},
data:selectedTime
},
});
}, 1500);
})
},
methods: {
},
};
</script>
<style>
</style>

98
src_old/components/echarts/HalfDoughnut.vue
View File

@ -1,98 +0,0 @@
<template>
<!-- 半圆饼图-Half Doughnut Chart -->
<!-- 用于预警服务-异常检测的三个数据 -->
<div ref="echarts" style="width: 800px; height: 400px;padding-left:250px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props:{myHalfData:{
type:Array,
}},
data () {
return {
myData:this.myHalfData
}
},
watch:{
myHalfData(){
this.initCharts()
}
},
methods:{
initCharts(){
var myChart = echarts.init(this.$refs.echarts)
var option = {
tooltip: {
trigger: "item",
},
title: {
text: "异常类型占比",
left: "center",
textStyle: {
fontSize: 17,
lineHeight: 85,
},
},
grid: {
left: '3%',
right: '4%',
bottom: '0%',
top: '0%',
},
legend: {
top: "15%",
left: "center",
},
series: [
{
name: "proportion of abnormal risk",
type: "pie",
radius: ["40%", "80%"],
center: ["50%", "70%"],
// adjust the start angle
startAngle: 180,
label: {
show: true,
formatter(param) {
// correct the percentage
return param.name + " (" + param.percent * 2 + "%)";
},
},
// data: [
// { value: 300, name: "股价波动异常" },
// { value: 350, name: "高频交易" },
// { value: 200, name: "资产泡沫" },
// { value: 120, name: "事件风险波及" },
// { value: 110, name: "风险事件时长" },
// { value: 280, name: "事件热度异常" },
// {
// // make an record to fill the bottom 50%
// value: 300+350+200+120+110+280,
// itemStyle: {
// color: "none",
// },
// },
// ],
data: this.myHalfData
},
],
};
myChart.setOption(option);
}
},
mounted() {
this.initCharts()
},
};
</script>
<style>
</style>

130
src_old/components/echarts/Histogram.vue
View File

@ -1,130 +0,0 @@
<!-- 直方图和折线图的结合图 -->
<template>
<div id="zhifang" style="width: 85%; height: 400px;margin-left: 100px;"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {
xData:[],
yData: [],
legend:String,
title:String,
},
data(){
return{
x:this.xData,
y:this.yData,
}
},
watch:{
xData(newV){
console.log(newV)
this.initGraph()
console.log(this.legend)
}
},
methods:{
initGraph()
{
var myChart = echarts.init(document.getElementById("zhifang"));
var option = {
title: {
text: this.title,
left: "center",
textStyle: {
fontSize: 17,
lineHeight: 30,
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
grid: {
right: "20%",
},
legend: {
data: this.legend,
padding: [70, 0, 0, 100],
orient: 'vertical',
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
show: false
},
axisLabel: {
// interval: 0,
rotate: 30
},
data: this.xData
},
],
yAxis: [
{
type: "value",
name: this.legend,
position: "right",
alignTicks: true,
axisLine: {
show: true,
},
axisLabel: {
formatter: "{value}",
textStyle: {
color: 'blue'
}
},
},
// {
// type: "value",
// name: "收盘价",
// position: "left",
// alignTicks: true,
// axisLine: {
// show: true,
// },
// axisLabel: {
// formatter: "{value}元",
// textStyle: {
// color: 'green'
// }
// },
// },
],
series: [
{
name: this.legend,
type: "line",
smooth:true,
markPoint: {
symbol: 'circle', // 设置拐点小圆点
// symbolSize:8, // 设置拐点小圆点大小
},
data: this.yData
},
// {
// name: "收盘价",
// type: "line",
// yAxisIndex: 1,
// data: [
// 10, 25, 30, 19, 12, 16, 26, 23, 20, 17, 21, 15,
// ],
// },
],
};
myChart.setOption(option);
}
},
};
</script>
<style>
</style>

103
src_old/components/echarts/ZhiFang(1).vue
View File

@ -1,103 +0,0 @@
<template>
<div id="zhifang" style="width: 85%; height: 400px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
var myChart = echarts.init(document.getElementById("zhifang"));
var option = {
title:{
text: "交易量/频次及股票变换趋势",
left: "center",
textStyle: {
fontSize: 17,
lineHeight: 30,
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
grid: {
right: "20%",
},
legend: {
data: ["交易量","收盘价"],
padding:[70,0,0,100],
orient: 'vertical',
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
show:false
},
axisLabel:{
interval:0,
rotate:30
},
data: ['2021-1-1', '2021-1-2', '2021-1-3', '2021-1-4', '2021-1-5', '2021-1-6', '2021-1-7', '2021-1-8', '2021-1-9', '2021-1-10', '2021-1-11', '2021-1-12'],
},
],
yAxis: [
{
type: "value",
name: "交易量",
position: "right",
alignTicks: true,
axisLine: {
show: true,
},
axisLabel: {
formatter: "{value}支",
textStyle:{
color:'blue'
}
},
},
{
type: "value",
name: "收盘价",
position: "left",
alignTicks: true,
axisLine: {
show: true,
},
axisLabel: {
formatter: "{value}元",
textStyle:{
color:'green'
}
},
},
],
series: [
{
name: "交易量",
type: "bar",
data: [
100, 120, 80, 230, 150,90, 170, 162, 250, 110, 60, 200,
],
},
{
name: "收盘价",
type: "line",
yAxisIndex: 1,
data: [
10, 25, 30, 19, 12, 16, 26, 23, 20, 17, 21, 15,
],
},
],
};
myChart.setOption(option);
},
};
</script>
<style>
</style>

208
src_old/components/halfYear.vue
View File

@ -1,208 +0,0 @@
<template>
<div class="el-quarter-picker">
<el-popover v-model="visible" placement="bottom-start" transition="el-zoom-in-top" trigger="click">
<div class="content">
<p>
<button type="button" aria-label="前一年" class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" @click="prev" />
<span role="button" class="span-year">{{ year }}年</span>
<button type="button" aria-label="后一年" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right" @click="next" />
</p>
<div class="choose-item">
<button :class="classStyle1" :disabled="disabled1" @click="selectHalfYear('上半年')">上半年</button>
<button :class="classStyle2" :disabled="disabled2" @click="selectHalfYear('下半年')">下半年</button>
</div>
</div>
<el-input slot="reference" v-model="text" :placeholder="'选择半年'" size="small" @change="iptchange">
<i slot="prefix" class="el-input__icon el-icon-date" />
</el-input>
</el-popover>
</div>
</template>
<script>
export default {
name: 'HalfYearPicker',
model: {
prop: 'value',
event: 'change'
},
props: ['value', 'disabledTime', 'indexkey'], // disabledTime 格式为 YYYY-MM
data() {
return {
visible: false,
text: '',
year: new Date().getFullYear(),
nowmonth: new Date().getMonth(),
nowyear: new Date().getFullYear(),
emit_value: [],
clickyear: '',
clickmonth: '',
disabled1: false, // 禁止，开始时间之前
disabled2: false // 禁止，开始时间之前
}
},
computed: {
classStyle1: function() {
return {
today: (this.nowyear === this.year) && (this.nowmonth < 6 || this.nowmonth) === 6,
clickcell: (this.year === this.clickyear) && (this.clickmonth === '上半年'),
selectMonth: true,
'is-disabled': (this.year > this.nowyear) || this.disabled1
}
},
classStyle2: function() {
return {
today: (this.nowyear === this.year) && (this.nowmonth > 6),
clickcell: (this.year === this.clickyear) && (this.clickmonth === '下半年'),
selectMonth: true,
'is-disabled': (this.year > this.nowyear) || ((this.year === this.nowyear) && this.nowmonth < 7) || this.disabled2
}
}
},
watch: {
indexkey() {
if (this.disabledTime) {
this.aviod(this.disabledTime)
}
}
},
mounted() {
if (this.disabledTime) {
this.aviod(this.disabledTime)
}
},
methods: {
// 上一年
prev() {
this.year = this.year * 1 - 1
this.aviod(this.disabledTime)
},
// 下一年
next() {
this.year = this.year * 1 + 1
this.aviod(this.disabledTime)
},
// 点击选项事件
selectHalfYear(item) {
this.text = this.year + item
this.clickyear = this.year
this.clickmonth = item
if (item === '上半年') {
const data1 = this.year + '-01-01'
const data2 = this.year + '-06-30'
this.emit_value = [data1, data2]
} else {
const data1 = this.year + '-07-01'
const data2 = this.year + '-12-31'
this.emit_value = [data1, data2]
}
this.visible = false
this.$emit('change', this.emit_value)
},
// 自主输入判断
iptchange(val) {
if (val !== '') {
const year = val.slice(0, 4)
const text = val.slice(5, 8)
const reg = /^[0-9]{4}$/
if (reg.test(year)) {
if (text === '上半年' || text === '下半年') {
this.text = val
this.clickyear = year
this.clickmonth = text
const data1 = this.year + '-01-01'
const data2 = this.year + '-06-30'
this.emit_value = [data1, data2]
this.$emit('change', this.emit_value)
} else {
this.text = ''
}
} else {
this.text = ''
}
} else {
this.$emit('change', ['', ''])
}
},
aviod(timeA) {
const time = timeA.date
if (time) {
const year = time.slice(0, 4)
const month = time.slice(5, 7)
if (timeA.type === 2) {
if (this.year < year) {
this.disabled1 = true
this.disabled2 = true
} else if (Number(this.year) === Number(year) && Number(month) > 6) {
this.disabled1 = true
this.disabled2 = false
} else {
this.disabled1 = false
this.disabled2 = false
}
} else {
if (this.year > year) {
this.disabled1 = true
this.disabled2 = true
} else if (Number(this.year) === Number(year) && Number(month) <= 6) {
this.disabled1 = false
this.disabled2 = true
} else {
this.disabled1 = false
this.disabled2 = false
}
}
} else {
this.disabled1 = false
this.disabled2 = false
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 220px;
min-width: 220px;
p {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: solid 1px #ebeef5;
padding-bottom: 12px;
font-size: 16px;
button {
margin-top: 0;
}
}
.choose-item {
display: flex;
justify-content: space-around;
.selectMonth {
margin: 14px 10px;
font-size: 12px;
background: transparent;
}
.selectMonth:hover {
color: #409eff;
cursor: pointer;
}
.today {
color: #409eff;
font-weight: 700;
}
.clickcell {
color: #409eff;
}
.is-disabled {
color: #c0c4cc !important;
cursor: not-allowed !important;
background-color: #fff;
border-color: #ebeef5;
}
}
}
</style>

213
src_old/components/industryComponent.vue
View File

@ -1,213 +0,0 @@
<template>
<el-select v-model="industry" placeholder="选择行业" size="mini">
<el-option v-for="item in options_industry" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
name: "industryComponent",
data(){
return{
industry:'',
options_industry: [{
value: "新闻和出版业",
label: "新闻和出版业"}, {
value: "保险业",
label: "保险业"}, {
value: "铁路运输业",
label: "铁路运输业"}, {
value: "电力、热力生产和供应业",
label: "电力、热力生产和供应业"}, {
value: "专业技术服务业",
label: "专业技术服务业"}, {
value: "汽车制造业",
label: "汽车制造业"}, {
value: "零售业",
label: "零售业"}, {
value: "医药制造业",
label: "医药制造业"}, {
value: "电气机械和器材制造业",
label: "电气机械和器材制造业"}, {
value: "科技推广和应用服务业",
label: "科技推广和应用服务业"}, {
value: "金属制品业",
label: "金属制品业"}, {
value: "非金属矿物制品业",
label: "非金属矿物制品业"}, {
value: "软件和信息技术服务业",
label: "软件和信息技术服务业"}, {
value: "计算机、通信和其他电子设备制造业",
label: "计算机、通信和其他电子设备制造业"}, {
value: "化学原料和化学制品制造业",
label: "化学原料和化学制品制造业"}, {
value: "航空运输业",
label: "航空运输业"}, {
value: "石油、煤炭及其他燃料加工业",
label: "石油、煤炭及其他燃料加工业"}, {
value: "石油和天然气开采业",
label: "石油和天然气开采业"}, {
value: "电信、广播电视和卫星传输服务",
label: "电信、广播电视和卫星传输服务"}, {
value: "土木工程建筑业",
label: "土木工程建筑业"}, {
value: "互联网和相关服务",
label: "互联网和相关服务"}, {
value: "有色金属冶炼和压延加工业",
label: "有色金属冶炼和压延加工业"}, {
value: "商务服务业",
label: "商务服务业"}, {
value: "资本市场服务",
label: "资本市场服务"}, {
value: "铁路、船舶、航空航天和其他运输设备制造业",
label: "铁路、船舶、航空航天和其他运输设备制造业"}, {
value: "多式联运和运输代理业",
label: "多式联运和运输代理业"}, {
value: "装卸搬运和仓储业",
label: "装卸搬运和仓储业"}, {
value: "水的生产和供应业",
label: "水的生产和供应业"}, {
value: "批发业",
label: "批发业"}, {
value: "文教、工美、体育和娱乐用品制造业",
label: "文教、工美、体育和娱乐用品制造业"}, {
value: "房地产业",
label: "房地产业"}, {
value: "开采专业及辅助性活动",
label: "开采专业及辅助性活动"}, {
value: "通用设备制造业",
label: "通用设备制造业"}, {
value: "煤炭开采和洗选业",
label: "煤炭开采和洗选业"}, {
value: "食品制造业",
label: "食品制造业"}, {
value: "农副食品加工业",
label: "农副食品加工业"}, {
value: "有色金属矿采选业",
label: "有色金属矿采选业"}, {
value: "研究和试验发展",
label: "研究和试验发展"}, {
value: "酒、饮料和精制茶制造业",
label: "酒、饮料和精制茶制造业"}, {
value: "教育",
label: "教育"}, {
value: "专用设备制造业",
label: "专用设备制造业"}, {
value: "房屋建筑业",
label: "房屋建筑业"}, {
value: "纺织服装、服饰业",
label: "纺织服装、服饰业"}, {
value: "橡胶和塑料制品业",
label: "橡胶和塑料制品业"}, {
value: "水上运输业",
label: "水上运输业"}, {
value: "货币金融服务",
label: "货币金融服务"}, {
value: "黑色金属冶炼和压延加工业",
label: "黑色金属冶炼和压延加工业"}, {
value: "住宿业",
label: "住宿业"}, {
value: "燃气生产和供应业",
label: "燃气生产和供应业"}, {
value: "道路运输业",
label: "道路运输业"}, {
value: "生态保护和环境治理业",
label: "生态保护和环境治理业"}, {
value: "纺织业",
label: "纺织业"}, {
value: "化学纤维制造业",
label: "化学纤维制造业"}, {
value: "其他制造业",
label: "其他制造业"}, {
value: "广播、电视、电影和录音制作业",
label: "广播、电视、电影和录音制作业"}, {
value: "仪器仪表制造业",
label: "仪器仪表制造业"}, {
value: "皮革、毛皮、羽毛及其制品和制鞋业",
label: "皮革、毛皮、羽毛及其制品和制鞋业"}, {
value: "造纸和纸制品业",
label: "造纸和纸制品业"}, {
value: "印刷和记录媒介复制业",
label: "印刷和记录媒介复制业"}, {
value: "餐饮业",
label: "餐饮业"}, {
value: "公共设施管理业",
label: "公共设施管理业"}, {
value: "其他金融业",
label: "其他金融业"}, {
value: "土地管理业",
label: "土地管理业"}, {
value: "林业",
label: "林业"}, {
value: "农业",
label: "农业"}, {
value: "废弃资源综合利用业",
label: "废弃资源综合利用业"}, {
value: "畜牧业",
label: "畜牧业"}, {
value: "文化艺术业",
label: "文化艺术业"}, {
value: "建筑装饰、装修和其他建筑业",
label: "建筑装饰、装修和其他建筑业"}, {
value: "黑色金属矿采选业",
label: "黑色金属矿采选业"}, {
value: "其他采矿业",
label: "其他采矿业"}, {
value: "机动车、电子产品和日用产品修理业",
label: "机动车、电子产品和日用产品修理业"}, {
value: "家具制造业",
label: "家具制造业"}, {
value: "建筑安装业",
label: "建筑安装业"}, {
value: "其他服务业",
label: "其他服务业"}, {
value: "社会工作",
label: "社会工作"}, {
value: "渔业",
label: "渔业"}, {
value: "体育",
label: "体育"}, {
value: "居民服务业",
label: "居民服务业"}, {
value: "邮政业",
label: "邮政业"}, {
value: "金属制品、机械和设备修理业",
label: "金属制品、机械和设备修理业"}, {
value: "卫生",
label: "卫生"}, {
value: "木材加工和木、竹、藤、棕、草制品业",
label: "木材加工和木、竹、藤、棕、草制品业"}, {
value: "农、林、牧、渔专业及辅助性活动",
label: "农、林、牧、渔专业及辅助性活动"}, {
value: "非金属矿采选业",
label: "非金属矿采选业"}, {
value: "租赁业",
label: "租赁业"}, {
value: "水利管理业",
label: "水利管理业"},
],
}
},
props: {
value: {
type: String,
default: ''
},
},
model: {
prop: 'value',
event: 'change'
},
watch:{
value(newValue){
this.industry=newValue
}
}
}
</script>
<style scoped>
</style>

74
src_old/components/pagination.vue
View File

@ -1,74 +0,0 @@
<!-- 分页 -->
<template>
<div class="pagination">
<el-button type="button" @click="jumpFirstPage" size="mini">首页</el-button>
<!-- layout="total, prev, pager, next, jumper" -->
<!-- layout="prev, next"就只显示上一页、下一页 -->
<el-pagination
background prev-text="上一页" next-text="下一页"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size=page_size
layout="prev, next"
:total="total"
style="display: inline-block;padding-left: 0px;">
</el-pagination>
<el-button type="button" @click="jumpLastPage" size="mini">尾页</el-button>
</div>
</template>
<script>
export default {
// 接收外部数据
props:{
total:{
type:Number,
default:100
},
page_size:{
type:Number,
default:10
},
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
// 将页码传给父组件
this.$emit('CurrentChange',val)
},
// 添加首页、尾页跳转方法
jumpFirstPage () {
this.$refs.pagination.handleCurrentChange(1);
this.$emit('handleCurrentChange', 1);
},
jumpLastPage () {
let font = this.$refs.pagination
let cpage = Math.ceil(font.total / font.pageSize);
font.handleCurrentChange(cpage);
},
},
data() {
return {
currentPage: 5,
};
}
}
</script>
<style lang="less" scoped>
.pagination{
display:flex;
justify-content:center;//左右贴边
padding: 40px;
}
</style>

396
src_old/components/quterComponent.vue
View File

@ -1,396 +0,0 @@
<template>
<div class="el-quarter-picker">
<el-popover
v-model="visible"
:disabled="!canPopover"
:tabindex="null"
placement="bottom-start"
transition="el-zoom-in-top"
trigger="click">
<div class="el-date-picker">
<div class="el-picker-panel__body">
<div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px">
<button
type="button"
@click="clickLast"
aria-label="前一年"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
<span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span>
<button
type="button"
@click="clickNext"
aria-label="后一年"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
</div>
<div class="el-picker-panel__content" style="margin:0px; width:100%">
<table class="el-month-table" style="">
<tbody>
<tr v-for="line in lineCount" :key="line">
<td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }">
<div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<el-input
slot="reference"
@change="changeText"
@mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave"
:placeholder="placeholder"
v-model="text"
:size="size"
:readonly="!canEdit"
:disabled="disabled"
size="mini">
<i slot="prefix" class="el-input__icon el-icon-date"></i>
<i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
</el-input>
</el-popover>
</div>
</template>
<script>
export default {
name: 'ElQuarterPicker',
props: {
placeholder: {
type: String,
default: ''
},
size: {
type: String,
default: ''
},
readonly: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: true
},
editable: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
format: {
type: String,
default: 'yyyy年第Q季度'
},
valueFormat: {
type: String,
default: 'yyyy-qq'
},
value: {
type: String,
default: ''
}
},
model: {
prop: 'value',
event: 'change'
},
watch: {
value(val) {
// console.log('change-------', val)
this.changeValue(val)
},
readonly(val) {
this.canEdit = !val && this.editable
this.canPopover = !this.disabled && !val
},
editable(val) {
this.canEdit = !this.readonly && val
},
disabled(val) {
this.canPopover = !val && !this.readonly
}
},
data() {
return {
visible: false,
showClear: false, // 控制清空按钮展示
canEdit: true, // 是否可编辑
canPopover: true, // 选择器弹出是否可用
text: '', // 文本框值
viewType: 1, // 视图类型，1季度，2年度
viewYear: 0, // 当前年份
viewList: [], // 数据列表
lineCount: 0, // 数据行数
title: '', // 选择器标题
data: [0, 0] // 当前选择年度-季度
}
},
mounted() {
// console.log('mounted--------', this.value)
this.changeValue(this.value)
// 设置文本框是否可编辑
this.canEdit = !this.readonly && this.editable
this.canPopover = !this.disabled && !this.readonly
// 监听按键(上下左右键可以切换季度)
document.onkeydown = (event) => {
if (this.visible) {
const data = [this.data[0], this.data[1]]
if (data[0] < 1 || data[1] < 1) {
// 以当前季度为标准
const curDate = new Date()
data[0] = curDate.getFullYear()
data[1] = parseInt(curDate.getMonth() / 3) + 1
}
if (event.code === 'ArrowLeft') {
// 上一个季度
if (data[1] === 1) {
data[0] = data[0] - 1
data[1] = 4
} else {
data[1] = data[1] - 1
}
} else if (event.code === 'ArrowRight') {
// 下一个季度
if (data[1] === 4) {
data[0] = data[0] + 1
data[1] = 1
} else {
data[1] = data[1] + 1
}
} else if (event.code === 'ArrowUp') {
// 上一年季度
data[0] = data[0] - 1
} else if (event.code === 'ArrowDown') {
// 下一年季度
data[0] = data[0] + 1
} else {
return
}
// 超过年限的不处理
if (data[0] < 1000 || data[0] > 9999) {
return
}
this.data = data
this.viewType = 1
this.viewYear = data[0]
this.$emit('change', this.formatTo(data, this.valueFormat))
}
}
},
destroyed() {
document.onkeydown = null
},
methods: {
// 季度文本变更
changeText() {
if (this.checkFormat(this.format, this.text)) {
// 设置值
this.formatFrom(this.text, this.format)
this.$emit('change', this.formatTo(this.data, this.valueFormat))
} else {
// 输入了无效的格式，还原回原来的值
if (this.data[0] < 1 || this.data[1] < 1) {
this.text = ''
} else {
this.text = this.formatTo(this.data, this.format)
}
}
this.visible = false
},
// 鼠标进入
mouseEnter() {
if (!this.disabled && !this.readonly && this.clearable && this.text !== '') {
this.showClear = true
}
},
// 鼠标离开
mouseLeave() {
if (!this.disabled && this.clearable) {
this.showClear = false
}
},
// 清除季度
clear() {
this.showClear = false
this.visible = false
this.$emit('change', '')
},
// 季度值变更
changeValue(val) {
this.viewType = 1
if (val) {
// 反向格式化
this.formatFrom(val, this.valueFormat)
this.text = this.formatTo(this.data, this.format)
this.viewYear = this.data[0]
} else {
this.text = ''
this.data = [0, 0]
this.viewYear = new Date().getFullYear()
}
this.initView()
},
// 初始化视图数据
initView() {
const list = []
const curDate = new Date()
const curYear = curDate.getFullYear()
const curQuarter = parseInt(curDate.getMonth() / 3) + 1
if (this.viewType === 1) {
let index = 0
for (const i of '一二三四') {
index++
const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false }
if (this.viewYear === curYear && index === curQuarter) {
item.current = true
} else if (this.viewYear === this.data[0] && index === this.data[1]) {
item.active = true
}
list.push(item)
}
this.title = this.viewYear + ' 年'
} else {
const start = parseInt(this.viewYear / 10) * 10
this.viewYear = start
for (let i = 0; i < 10; i++) {
const year = start + i
const item = { label: year + '', year: year, current: false, active: false }
if (year === curYear) {
item.current = true
} else if (year === this.data[0]) {
item.active = true
}
list.push(item)
}
this.title = start + ' 年 - ' + (start + 9) + ' 年'
}
this.viewList = list
this.lineCount = parseInt(list.length / 4)
if (list.length % 4 > 0) {
this.lineCount++
}
},
// 校验季度格式是否正确
checkFormat(pattern, val) {
// 格式转成正则表达式
let text = ''
for (const char of pattern) {
const dict = '\\^$.+?*[]{}!'
if (dict.indexOf(char) === -1) {
text += char
} else {
text += '\\' + char
}
}
text = text.replace('yyyy', '[1-9]\\d{3}')
text = text.replace('qq', '0[1-4]')
text = text.replace('q', '[1-4]')
text = text.replace('Q', '[一二三四]')
text = '^' + text + '$'
const patt = new RegExp(text)
return patt.test(val)
},
// 格式化季度到指定格式
formatTo(data, pattern) {
let text = pattern.replace('yyyy', '' + data[0])
text = text.replace('qq', '0' + data[1])
text = text.replace('q', '' + data[1])
text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1))
return text
},
// 以指定格式解析季度
formatFrom(str, pattern) {
const year = this.findText(str, pattern, 'yyyy')
const quarter = this.findText(str, pattern, ['qq', 'q', 'Q'])
this.data = [year, quarter]
},
// 查找文本数值
findText(str, pattern, find) {
if (find instanceof Array) {
for (const f of find) {
const val = this.findText(str, pattern, f)
if (val !== -1) {
return val
}
}
return -1
}
const index = pattern.indexOf(find)
if (index === -1) {
return index
}
const val = str.substr(index, find.length)
if (find === 'Q') {
return '一二三四'.indexOf(val) + 1
} else {
return parseInt(val)
}
},
// 年份点击
clickYear() {
if (this.viewType !== 1) {
return
}
// 切换年度选择器
this.viewType = 2
this.initView()
},
// 季度选择
clickItem(item) {
// console.log('select--------', item)
if (this.viewType === 1) {
// 选择季度
this.$emit('change', this.formatTo([item.year, item.quarter], this.valueFormat))
this.visible = false
} else {
// 选择年度
this.viewType = 1
this.viewYear = item.year
this.initView()
}
},
// 上一年
clickLast() {
if (this.viewYear > 1000) {
if (this.viewType === 1) {
this.viewYear--
this.initView()
} else {
this.viewYear = this.viewYear - 10
this.initView()
}
}
},
// 下一年
clickNext() {
if (this.viewYear < 9999) {
if (this.viewType === 1) {
this.viewYear++
this.initView()
} else {
this.viewYear = this.viewYear + 10
this.initView()
}
}
}
}
}
</script>
<style>
.el-quarter-picker {
width: 220px;
/* display:flex; */
display: inline-block;
margin-right: 5px;
}
</style>

348
src_old/components/region.vue
View File

@ -1,348 +0,0 @@
<!--目前数据没有详细到市区，所以两点改动：1 chinaMapHidden注释掉了点击事件，2 echarts里的数据切换改为接口固定数据-->
<template>
<div>
<div class="echartsGroup">
<!-- 返回中国地图 -->
<div class="button" v-show="isReturnChina" @click="returnChinaFn()">返回中国地图</div>
<!-- echarts 图表 -->
<div ref="china_map" style="height: 450px;width:800px"></div>
</div>
</div>
</template>
<script>
import tmpJson from 'echarts/map/json/china.json'
import * as echarts from "echarts"
import 'echarts/map/js/china.js' // 核心文件
// require('echarts/theme/macarons')
export default {
props: {
newMapData:[]
},
data() {
return {
mapData: [//自己做的模拟数据 后续根据业务展示
{name: '湖北',value:88},
{name: '广东',value:11024},
{name: '上海',value:5},
{name: '山东',value:15},
{name: '湖南',value:14},
{name: '重庆',value:0},
{name: '四川',value:65},
{name: '新疆',value:36},
{name: '黑龙江',value:12},
{name: '西藏',value:68},
{name: '青海',value:31},
{name: '内蒙古',value:28},
{name: '陕西',value:12},
{name: '辽宁',value:88},
{name: '云南',value:23},
],
provData:[
{name:'深圳市',value:99},
{name:'深圳市',value:1005},
{name:'佛山市',value: 55564}
],
guangdong:[ //省份公司的数据
{name: '深圳市',value:23,children:['福田','南山','龙华']},
],
provinces:{ //数据
台湾: 'taiwan',
河北: 'hebei',
山西: 'shanxi',
辽宁: 'liaoning',
吉林: 'jilin',
黑龙江: 'heilongjiang',
江苏: 'jiangsu',
浙江: 'zhejiang',
安徽: 'anhui',
福建: 'fujian',
江西: 'jiangxi',
山东: 'shandong',
河南: 'henan',
湖北: 'hubei',
湖南: 'hunan',
广东: 'guangdong',
海南: 'hainan',
四川: 'sichuan',
贵州: 'guizhou',
云南: 'yunnan',
陕西: 'shanxi1',
甘肃: 'gansu',
青海: 'qinghai',
新疆: 'xinjiang',
广西: 'guangxi',
内蒙古: 'neimenggu',
宁夏: 'ningxia',
西藏: 'xizang',
北京: 'beijing',
天津: 'tianjin',
上海: 'shanghai',
重庆: 'chongqing',
香港: 'xianggang',
澳门: 'aomen'
},
isReturnChina:true, //是否显示返回中国地图
options:null, //echarts 存数据
};
},
watch:{
newMapData(newValue){
console.log(1)
this.chinaMaprsult('china',newValue)
}
},
mounted() {
window.clickRoute= this.clickRoute;
// this.$nextTick(_=>{
// this.chinaMaprsult('china')
// console.log("mounted调用成功")
// })
this.chinaMaprsult('china',null)
},
methods: {
// 中国地图点击省份 显示当前省份的详细的地区。
chinaMapHidden(chinaMap) {//（调用）
console.log("chinaMapHidden调用成功")
// let that = this
// chinaMap.off('click')//这里解决多次触发点击事件 但是还会执行2次 引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
// chinaMap.on('click',async function(params){
// if (params.name in that.provinces) {
// var tmp=that.provinces[params.name]
// let s = await import('echarts/map/js/province/'+tmp+'.js')
// console.log(s)
// if (s){
// // chinaMap.clear
// let tmpData=[
// {name:'深圳市',value:99},
// {name:'深圳市',value:1005},
// {name:'佛山市',value: 55564}
// ]
// that.chinaMaprsult(params.name,tmpData)
// }
// }
// })
},
// 渲染地图
chinaMaprsult(name=null,tmpData){
console.log("chinaMaprsult调用成功")
let _this = this;
// console.log(name)
name=='china'?this.isReturnChina=false:this.isReturnChina=true; //省份地图就显示返回按钮
let chinaMap = echarts.init(this.$refs.china_map) //获取dom元素，初始化
// let tmpJson=import('echarts/map/json/china.json')
console.log(tmpJson)
echarts.registerMap('china',tmpJson)
var data=this.data
this.options = {
// tooltip: { // 鼠标移到图里面的浮动提示框
// formatter:function (params) {
// return params.name
// }
// },
visualMap: //图例
{
min: 800,
max: 3000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: [ 'lightgreen', 'yellow']
}},
tooltip: { // 鼠标移到图里面的浮动提示框
trigger: 'item', //数据项图形触发
// triggerOn: 'click', //这里根据业务需要给点击事件做跳转,所以不能做悬浮了,如果做悬浮 点击不了文字跳转
formatter:
'风险数量: {c0}<br />'
// function(params){
// console.log(params)
// let dat=params.data
// return params.data
//
// }
// function(params) {
// var name = params.name
// var toolipData = []
// _this.provinceData.forEach(item=>{
// if(name == item.name){
// toolipData = item.children
// }
// })
// var htmlStr = ''
// toolipData.forEach(item=>{
// htmlStr += `<li class="list-li" name="${item}"><div οnclick="clickRoute()" >${item}</div></li>`
// })
// console.log(toolipData)
// console.log(params.name)
// return `<div class="list-wrap"><div class="list-title">${name}</div><ul class="list-ul">${htmlStr}</ul></div>`
// },
},
geo: {
map: name , // 拿到对应的地图
roam: false,
nameProperty:'NAME',
label: { // 页面初始化加载的文字
normal: {
show: true,
textStyle: {
color: "#ccc", // 页面初始化的地图文字颜色
fontSize:10// // 页面初始化的地图文字大小
},
},
// formatter:'{b}: {@score}{c}'
},
itemStyle: { //设置样式
// normal:
// {
// borderWidth: .5, //区域边框宽度
// borderColor: 'rgba(119, 156, 255, 1)',
// areaColor: {
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0,
// color: '#073684' // 0% 处的颜色
// }, {
// offset: 1,
// color: '#061E3D' // 100% 处的颜色
// }],
// },
// },
// emphasis: { // 移入背景颜色
// // areaColor: '#ff00ff',
// areaColor: '#F9D92E',
// show: true,
// textStyle: {
// color: '#000',
// fontSize: "12px"
// }
// },
},
},
dataset:{
//老的逻辑，为了根据点击切换市区数据
// source: name==='china'?this.mapData:tmpData
source:tmpData
},
series: [
{
type: "map",
geoIndex: 0,
itemStyle: {//地图区域的多边形 图形样式
normal: {//是图形在默认状态下的样式
label: {
show: true,//是否显示标签
textStyle: {
color: "black"
}
}
},
zoom: 5, //地图缩放比例,默认为1
emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label: { show: true }
}
},
label: {
normal: {
show: true, //显示省份标签
textStyle:{color:"#696969"},//省份标签字体颜色
},
emphasis: {
show: true,
textStyle: {
}
}
},
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'fill',
scale:0
},
showEffectOn: 'render',
label: {
lineHeight: 30,
normal: {
show: true,
color: '#081727',
position: 'inside',
padding:[5,0,0,0],
verticalAlign: 'middle',
formatter: function(para) {
return '{cnNum|' + para.data.value[2] + '}'
// return para.data.value[2]
},
rich: {
cnNum: {
fontSize: 16,
color: '#081727',
lineHeight:28,
}
}
},
},
symbol: 'roundRect',
// symbolRotate: 20,
symbolSize: [40,28],
data: [],
zlevel: 1,
}
],
}
chinaMap.setOption(this.options)
console.log(chinaMap.getOption())
console.log(echarts.getMap('china'))
this.chinaMapHidden(chinaMap)
},
// 返回中国地图（调用）
returnChinaFn(){
console.log("returnChinaFn调用成功")
this.chinaMaprsult('china');
},
// 点击跳转页面
clickRoute(){
console.log("clickRoute调用成功")
alert("点击了,做其他操作!")
// this.$router.push('/')
},
}
}
</script>
<style scoped>
.echartsGroup{
width: 500px;
height: 500px;
position:relative;
}
.echartsGroup .button{
width:100px;
height:40px;
line-height:40px;
text-align:center;
border:1px solid #ccc;
border-radius: 10px;
cursor: pointer;
position:absolute;
top:10px;
left:10px;
z-index:99;
}
.list-ul{
list-style: none;
}
.list-li{
pointer-events: all;
cursor: pointer;
}
</style>

152
src_old/components/riskIndexComponent.vue
View File

@ -1,152 +0,0 @@
<template>
<div>
<div ref="index" style="width: 1200px; height: 400px;margin-left: 0px;margin-top: 0px;"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import http from "@/utils/request";
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() {
var that=this
http.get('/risk/index/?table='+this.title).then((res)=>{
that.date=res.data.date
that.result=res.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)
})
},
methods:{
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'
},
grid:{
show:true,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
backgroundColor:'#eee'
},
legend: {
top:30,
data: nameLis
}
,
tooltip: {
trigger: 'axis'
},
xAxis: {
data: this.date
},
yAxis: {
scale:true,
splitLine: {
show: false
}
},
toolbox: {
right: 120,
feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
dataView:{
show:true,
title: '查看数据',
},
restore: {},
saveAsImage: {}
}
},
//以下是时间轴
dataZoom: [{
//也应该是动态的
startValue: '2022-07-01'
}, {
type: 'inside'
}],
//以上是时间轴
series: series,
}
myChart.setOption(option);
myChart.dispatchAction({
type: 'dataZoom',
batch: [{
// 第一个 dataZoom 组件
start: this.datazoom[0],
end: this.datazoom[1]
}]
})
}
},
}
</script>
<style scoped>
</style>

389
src_old/components/systemRiskComponent.vue
View File

@ -1,389 +0,0 @@
<template>
<div>
<div style="display: flex;">
<div ref="whole risk" style=" float: left;width: 1200px; height: 350px;margin-left: 15px;margin-top: 0px;margin-right: 0px"></div>
<div ref="future" style=" float: left; width: 50px; height: 350px;margin-left: -127px;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";
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() {
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)
},
methods:{
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'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
axisLabel:{
fontSize:5
},
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
scale:true,
splitLine: {
show: false
}
},
toolbox: {
right: 120,
feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
dataView:{
show:true,
title: '查看数据',
},
restore: {},
saveAsImage: {}
}
},
//以下是时间轴
dataZoom: [{
//也应该是动态的
startValue: '2022-07-01'
}, {
type: 'inside'
}],
//以上是时间轴
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'
},
// {
// gt: 100,
// lte: 150,
// color: '#ff9933'
// },
// {
// gt: 150,
// lte: 200,
// color: '#cc0033'
// },
// {
// gt: 200,
// lte: 300,
// color: '#660099'
// },
// {
// gt: 300,
// color: '#7e0023'
// }
],
outOfRange: {
color: '#fa0744'
}
},
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:'black'
},
data: [{
yAxis: this.markLine[0]
}, {
yAxis:this.markLine[1]
},
// {
// yAxis: 200
// }, {
// yAxis: 300
// }
]
},
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,
// gridIndex: 1
},
series: {
type: 'boxplot',
boxWidth : [2, 10],
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
}
});
});
// that.$emit("datazoom",[params.start,params.end])
});
// myChart.dispatchAction({
// type: 'dataZoom',
// batch: [{
// // 第一个 dataZoom 组件
// start: this.datazoom[0],
// end: this.datazoom[1]
// }]
// })
}
},
}
</script>
<style scoped>
.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>

112
src_old/components/systemRiskFuture.vue
View File

@ -1,112 +0,0 @@
<template>
<div>
<el-carousel :interval="5000" arrow="always" height="380px" :autoplay="false" indicator-position="outside" style="margin-top: 9px">
<el-carousel-item v-for="item in 8" :key="item">
<!-- <h3 class="medium">{{ item }}</h3>-->
<!-- <el-button type="mini" icon="el-icon-arrow-left" circle style="margin: 3px" @click="sendMessage"> </el-button>-->
<div ref="chartContainer" style="width:1150px; height: 330px;margin: 1px"></div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import * as echarts from "echarts";
import http from "@/utils/request";
export default {
name: "systemRiskFuture",
data(){
return{
date:[],
rate:[],
macro:[],
montary:[],
income:[],
investment:[],
loan:[],
lever:[],
other:[],
whole:[],
title:['利率','宏观指标','货币','收入和融资','银行理财','信贷','整体杠杆','其他']
}
},
mounted() {
this.initGraph()
},
methods:{
sendMessage(){
this.$emit('transmit', 'systemRiskComponent')
},
initGraph(){
http.get('/risk/future_risk/').then((res)=>{
this.date=res.data.date
this.rate=res.data.rate
this.macro=res.data.macro
this.montary=res.data.montary
this.income=res.data.income
this.investment=res.data.investment
this.loan=res.data.loan
this.lever=res.data.lever
this.other=res.data.other
this.whole.push(this.rate)
this.whole.push(this.macro)
this.whole.push(this.montary)
this.whole.push(this.income)
this.whole.push(this.investment)
this.whole.push(this.loan)
this.whole.push(this.lever)
this.whole.push(this.other)
}).then(()=>{
for(let i = 0; i < 8; i++) {
let echart = echarts.init(this.$refs.chartContainer[i])
const option = {
title:{text:this.title[i],
left:'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
top:30,
},
xAxis: {
type: 'category',
data: this.date
},
yAxis: {
type: 'value'
},
series: this.whole[i]
};
echart.setOption(option)
}}
)
},
}
}
</script>
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #d3dce6;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>

54
src_old/config/drag.js
View File

@ -1,54 +0,0 @@
import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一：指令的名称，定义时指令前面不需要写v-
//2.参数二：是一个对象，该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag = Vue.directive('drag', {
//1.指令绑定到元素上回立刻执行bind函数，只执行一次
//2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
//3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
bind: function (el) {
el.style.cursor = "move"; //鼠标样式变move样式
},
//inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
inserted: function (el) {
el.onmousedown = function (e) {
var distX = e.pageX - el.offsetLeft;
var distY = e.pageY - el.offsetTop;
console.log("元素本身的高：" + el.clientHeight + ",元素本身的宽：" + el.clientWidth)
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};//解决快速拖动滞后问题
document.onmousemove = function (e) {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - distX;
let top = e.clientY - distY;
if (left <= 0) {
left = 5; //设置成5是为了不离边缘太近
} else if (left > document.documentElement.clientWidth - el.clientWidth) {
//document.documentElement.clientWidth 屏幕的可视宽度
left = document.documentElement.clientWidth - el.clientWidth - 5
}
if (top <= 0) {
top = 5;
} else if (top > document.documentElement.clientHeight - el.clientHeight) {
top = document.documentElement.clientHeight - el.clientHeight - 5
}
el.style.left = left + 'px';
el.style.top = top + 'px';
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
}
}
},
//当VNode更新的时候会执行updated，可以触发多次
updated: function (el) {}
})
export default drag;

58
src_old/libs/rem.js
View File

@ -1,58 +0,0 @@
class DevicePixelRatio {
constructor() {
// this.flag = false;
}
// 获取系统类型
_getSystem() {
// let flag = false;
var agent = navigator.userAgent.toLowerCase();
// var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
// if(isMac) {
// return false;
// }
// 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
if (agent.indexOf('windows') >= 0) {
return true;
}
}
// 获取页面缩放比例
// _getDevicePixelRatio() {
// let t = this;
// }
// 监听方法兼容写法
_addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
// 校正浏览器缩放比例
_correct() {
let t = this;
// 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
document.getElementsByTagName('body')[0].style.zoom = 1.2 / window.devicePixelRatio;
// 修改这个代码可以调整显示大小：参考代码是1/……style.zoom = 1.2 / window.devicePixelRatio; 参考链接：https://blog.csdn.net/qq_39548550/article/details/127664450
}
// 监听页面缩放
_watch() {
let t = this;
t._addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize
// 重新校正
t._correct()
})
}
// 初始化页面比例
init() {
let t = this;
if (t._getSystem()) { // 判断设备，目前只在windows系统下校正浏览器缩放比例
// 初始化页面校正浏览器缩放比例
t._correct();
// 开启监听页面缩放
t._watch();
}
}
}
export default DevicePixelRatio;

37
src_old/main.js
View File

@ -1,37 +0,0 @@
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';//全局引入
// import {Row,Button} from 'element-ui';//按需引入
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import store from './store'
// import axios from 'axios'
import drag from '@/config/drag';//弹窗可以拖拽
Vue.config.productionTip = false
Vue.use(ElementUI);//全局引入
// axios.defaults.baseURL = 'http://61.240.140.173:8000/proxy_url'
// Vue.use(Row)//按需引入
// Vue.use(Button)//按需引入
// 5以上的echarts不用引入，4要引入
// import * as echarts from 'echarts'
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')

171
src_old/plugins/debug/debug.js
View File

@ -1,171 +0,0 @@
// use this to isolate the scope
(function () {
if(!$axure.document.configuration.showConsole) { return; }
$(document).ready(function () {
$axure.player.createPluginHost({
id: 'debugHost',
context: 'inspect',
title: 'Console',
gid: 3
});
generateDebug();
$('#variablesClearLink').click(clearvars_click);
$('#traceClear').click(cleartrace_click);
$('#traceToggle').click(stoptrace_click);
$('#traceStart').click(starttrace_click);
$('#traceClear').hide();
$('#traceToggle').hide();
$('#closeConsole').click(close);
var currentStack= [];
var finishedStack = [];
$axure.messageCenter.addMessageListener(function (message, data) {
if(message == 'axCompositeEventMessage') {
for(var i = 0; i < data.length; i++) {
processMessages(data[i].message, data[i].data);
}
} else processMessages(message, data);
});
var processMessages = function(message, data) {
if(message == 'globalVariableValues') {
$('#variablesDiv').empty();
for(var key in data) {
var value = data[key] == '' ? '(blank)' : data[key];
$('#variablesDiv').append('<div class="variableList"><div class="variableName">' + key + '</div><div class="variableValue">' + value + '</div></div>');
}
} else if(message == 'axEvent') {
var addToStack = "<div class='axEventBlock'>";
addToStack += "<div class='axEventContainer'>";
addToStack += " <div class='axTime'>" + new Date().toLocaleTimeString() + "</div>";
addToStack += " <div class='axEvent'>" + data.event.description + ": </div>";
addToStack += " <div class='axLabel'>" + data.label + " (" + data.type + ")</div>";
addToStack += "</div>";
currentStack.push(addToStack);
} else if (message == 'axEventComplete') {
currentStack[currentStack.length - 1] += "</div>";
finishedStack.push(currentStack.pop());
if(currentStack.length == 0) {
$('#traceEmptyState').hide();
$('#traceClear').show();
$('#traceToggle').show();
for(var i = finishedStack.length - 1; i >= 0; i--) {
if($('#traceDiv').children().length > 99) $('#traceDiv').children().last().remove();
$('#traceDiv').prepend(finishedStack[i]);
}
finishedStack = [];
}
} else if (message == 'axCase') {
//var addToStack = "<div class='axCaseContainer' style='background-color: #" + data.color + "'>";
var addToStack = "<div class='axCaseContainer'>";
addToStack += " <div class='axCaseItem'>" + data.item + "</div>";
if (data.description) { addToStack += " <div class='axCaseDescription' title='" + data.description + "'>" + data.description + "</div>" };
addToStack += "</div>";
currentStack[currentStack.length - 1] += addToStack;
} else if (message == 'axAction') {
var addToStack = "<div class='axActionContainer'>";
addToStack += " <div class='axActionItem'>" + data.name + "</div>";
//addToStack += " <div class='axActionItem'>" + data.item + "</div>";
//if (data.description) { addToStack += " <div class='axActionDescription' title='" + data.description + "'>" + data.description + "</div>" };
addToStack += "</div>";
currentStack[currentStack.length - 1] += addToStack;
} else if (message == 'axInfo') {
var addToStack = "<div class='axInfoContainer'>";
addToStack += " <div class='axInfoItem'>" + data.item + "</div>";
if (data.description) { addToStack += " <div class='axInfoDescription' title='" + data.longDescription + "'>" + data.description + "</div>" };
addToStack += "</div>";
currentStack[currentStack.length - 1] += addToStack;
}
}
// bind to the page load
$axure.page.bind('load.debug', function () {
var traceStr = $axure.player.getHashStringVar(TRACE_VAR_NAME);
if (traceStr.length > 0) $axure.messageCenter.setState("isTracing", true);
else $axure.messageCenter.setState("isTracing", false);
$axure.messageCenter.postMessage('getGlobalVariables', '');
return false;
});
function clearvars_click(event) {
$axure.messageCenter.postMessage('resetGlobalVariables', '');
}
function close() {
$axure.player.pluginClose("debugHost");
}
function cleartrace_click(event) {
$('#traceDiv').html('');
}
function starttrace_click(event) {
$axure.messageCenter.setState("isTracing", true);
//$('#traceDiv').html('');
$('#traceEmptyState').hide();
$('#traceClear').show();
$('#traceToggle').text('Stop Trace');
$('#traceToggle').off("click");
$('#traceToggle').click(stoptrace_click);
$('#traceToggle').show();
console.log("starting trace");
$axure.player.setVarInCurrentUrlHash(TRACE_VAR_NAME, 1);
}
function stoptrace_click(event) {
$axure.messageCenter.setState("isTracing", false);
$('#traceDiv').prepend('<div class="tracePausedNotification">Trace Paused<div>');
$('#traceToggle').text('Restart Trace');
$('#traceToggle').off("click");
$('#traceToggle').click(starttrace_click);
console.log("stopping trace");
$axure.player.deleteVarFromCurrentUrlHash(TRACE_VAR_NAME);
}
});
function generateDebug() {
var pageNotesUi = "<div id='debugHeader'>";
pageNotesUi += "<div id='debugToolbar'>";
pageNotesUi += "<div id='consoleTitle' class='pluginNameHeader'>Console</div>";
pageNotesUi += "</div>";
pageNotesUi += "</div>";
pageNotesUi += "<div id='variablesContainer' style='max-height:300px; overflow-y:auto'>";
pageNotesUi += "<div id='variablesTitle' class='sectionTitle'>Variables</div>";
pageNotesUi += "<a id='variablesClearLink' class='traceOption'>Reset Variables</a>";
pageNotesUi += "<div id='variablesDiv'></div></div>";
pageNotesUi += "<div id='traceContainer'>";
pageNotesUi += "<div id='traceHeader'>";
pageNotesUi += "<span class='sectionTitle'>Trace</span><a id='traceClear' class='traceOption'>Clear Trace</a><a id='traceToggle' class='traceOption'>Stop Trace</a>";
pageNotesUi += "</div>";
pageNotesUi += "</div>";
pageNotesUi += "<div id='debugScrollContainer'>";
pageNotesUi += "<div id='debugContainer'>";
pageNotesUi += "<div id='traceEmptyState'>";
pageNotesUi += "<div class='startInstructions'>Click the button below to start recording interactions as you click through the prototype.</div>";
pageNotesUi += "<div id='traceStart' class='startButton'>Start Trace</div>";
pageNotesUi += "</div>";
pageNotesUi += "<div id='traceDiv'></div></div>";
pageNotesUi += "</div></div>";
$('#debugHost').html(pageNotesUi);
$('#traceEmptyState').show();
}
})();

265
src_old/plugins/debug/styles/debug.css
View File

@ -1,265 +0,0 @@
#debugHost {
display: flex;
flex-direction: column;
font-size: 13px;
color: #4a4a4a;
height: 100%;
}
#debugHostBtn {
order: 4;
}
#debugHostBtn a {
background: url('images/console_panel_on.svg') no-repeat center center, linear-gradient(transparent, transparent);
}
#debugHostBtn a.selected, #debugHostBtn a.selected:hover {
background: url('images/console_panel_off.svg') no-repeat center center, linear-gradient(transparent, transparent);
}
#debugToolbar {
margin-left: 8px;
}
#variablesClearLink {
display: inline-block;
margin-bottom: 15px;
}
#variablesClearLink:hover {
color: #0a6cd6;
}
#traceClearLink {
display: inline-block;
margin-bottom: 15px;
}
#traceClearLink:hover {
color: #0a6cd6;
}
#debugScrollContainer
{
overflow: auto;
width: 100%;
-webkit-overflow-scrolling: touch;
flex: 1;
}
#debugContainer {
padding: 10px 0px 10px 0px;
}
#consoleTitle {
clear: right;
margin: 12px 0px;
}
.variableName
{
font-weight: bold;
}
.variableDiv
{
margin-bottom: 20px;
line-height: 16px;
}
#variablesDiv
{
clear: right;
}
#variablesContainer {
border-bottom: solid 1px #e7e7e7;
padding: 0px 10px 12px 10px;
}
#traceContainer {
margin-bottom: 5px;
padding: 15px 10px 0px 10px;
}
#variablesTitle {
margin-bottom: 9px;
}
.sectionTitle {
font-size: 11px;
color: #2c2c2c;
display: inline-block;
}
.debugToolbarButton
{
font-size: 1em;
color: #069;
}
.axEventBlock {
display: inline-block;
width: 100%;
margin: 5px 0px 5px 0px;
line-height: 21px;
border-bottom: solid 5px #e7e7e7;
}
.axEventContainer {
background-color: #e7e7e7;
padding: 0px 10px 0px 10px;
}
.axTime {
margin: 0px 0px 0px 5px;
font-size: 10px;
color: #575757;
display: inline-block;
float: right;
}
.axLabel {
display: inline-block;
}
.axEvent {
margin: 0px 0px 2px 0px;
font-size: 15px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
}
.axCaseContainer, .axActionContainer, .axInfoContainer {
justify-content: space-between;
padding: 0px 10px 0px 10px;
}
.axCaseContainer {
border-top: solid 2px #e7e7e7;
/*background-color: #47b6b5;*/
background-color: #e7e7e7;
/*color: #ffffff;*/
}
.axActionContainer {
border-top: solid 3px #e7e7e7;
}
.axInfoContainer {
border-top: solid 1px #e7e7e7;
}
.axCaseItem, .axActionItem, .axInfoItem {
overflow: hidden;
text-overflow: ellipsis;
}
.axCaseItem {
font-size: 15px;
font-weight: bold;
}
.axActionItem {
font-weight: bold;
}
.axInfoItem {
color: #8c8c8c;
}
.axCaseDescription {
flex: 5 0 33%;
margin-left: 10px;
text-align: right;
}
/*.axActionDescription, .axInfoDescription {
flex: 5 0 33%;
margin-left: 10px;
text-align: right;
}*/
.axCaseDescription, .axActionDescription {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.axInfoDescription, .axActionDescription {
color: #8c8c8c;
font-size: 11px;
}
.variableName {
width: 55%;
line-height: 0.92;
text-align: left;
color: #0891b3;
display: inline-block;
word-wrap: break-word;
vertical-align: top;
}
.variableValue {
width: 45%;
line-height: 0.92;
text-align: right;
color: #373d48;
display: inline-block;
word-wrap: break-word;
}
.traceEvent {
border-bottom: solid 1px #e7e7e7;
}
.tracePausedNotification {
height: 25px;
/*background-color: #e7e7e7;*/
border-radius: 5px;
line-height: 25px;
margin: 5px 10px;
text-align: center
}
#traceEmptyState.emptyStateContainer {
margin-top: 0px;
}
.variableList{
width: 100%;
margin-bottom: 4px;
}
.traceOption {
margin-left: 11px;
height: 16px;
float: right;
font-size: 12px;
font-style: italic;
line-height: 1.45;
text-align: right;
color: #8c8c8c;
text-decoration: underline;
display: inline-block;
}
.startInstructions {
margin: auto;
width: 179px;
font-size: 11px;
text-align: center;
color: #666666;
}
.startButton {
margin: auto;
margin-top: 10px;
width: 181px;
height: 24px;
border-radius: 2px;
border: solid 1px #008fe0;
text-align: center;
line-height: 24px;
color: #008fe0;
cursor: pointer;
}
.debugLinksContainer {
text-align: right;
}

3
src_old/plugins/debug/styles/images/console_panel_off.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#008DCB" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

3
src_old/plugins/debug/styles/images/console_panel_on.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#6D6D6D" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

474
src_old/plugins/page_notes/page_notes.js
View File

@ -1,474 +0,0 @@
// use this to isolate the scope
(function () {
// No notes shown specified by generation config
if (!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar && !$axure.document.configuration.showAnnotations) { return; }
$(window.document).ready(function () {
// Load right panel for Page Notes
if ($axure.document.configuration.showPageNotes || $axure.document.configuration.showAnnotationsSidebar) {
$axure.player.createPluginHost({
id: 'pageNotesHost',
context: 'inspect',
title: 'Documentation',
gid: 2,
});
}
// Load footnotes on widgets
if ($axure.document.configuration.showAnnotations) {
$('#overflowMenuContainer').prepend('<div id="showNotesOption" class="showOption" style="order: 3"><div class="overflowOptionCheckbox"></div>Show Note Markers</div>');
}
createNotesOverlay();
generatePageNotes();
if ($axure.player.isMobileMode()) {
$('#showNotesOption').hide();
} else {
$('#showNotesOption').click(footnotes_click);
$('#showNotesOption').find('.overflowOptionCheckbox').addClass('selected');
}
function populateNotes(pageForNotes) {
var hasNotes = false;
if ($axure.document.configuration.showPageNotes) {
var pageNoteUi = '';
function populatePageNotes(pageOrMaster) {
//populate the page notes
var notes = pageOrMaster.notes;
if (notes && !$.isEmptyObject(notes)) {
pageNoteUi += "<div class='notesPageNameHeader'>" + pageOrMaster.pageName + "</div>";
var showNames = $axure.document.configuration.showPageNoteNames;
for(var noteName in notes) {
pageNoteUi += "<div class='pageNoteContainer'>";
if(showNames) {
pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
}
pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
pageNoteUi += "</div>";
//$('#pageNotesContent').append(pageNoteUi);
hasNotes = true;
}
}
}
populatePageNotes(pageForNotes);
if (pageForNotes.masterNotes) {
for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
populatePageNotes(pageForNotes.masterNotes[i]);
}
}
if (pageNoteUi.length > 0) {
pageNoteUi += "<div class='lineDivider'></div>";
var pageNotesHeader = "<div id='pageNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Page Notes</div>";
$('#pageNotesContent').append(pageNotesHeader + pageNoteUi);
}
}
if ($axure.document.configuration.showAnnotationsSidebar) {
var widgetNoteUi = '';
//var widgetNotes = pageForNotes.widgetNotes;
function populateWidgetNotes(widgetNotes){
if (widgetNotes) {
for (var i = 0; i < widgetNotes.length; i++) {
var widgetNote = widgetNotes[i];
widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
for (var widgetNoteName in widgetNote) {
if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
//widgetNoteUi += "<div class='nondottedDivider'></div>";
}
}
widgetNoteUi += "</div>";
//widgetNoteUi += "<div class='nondottedDivider'></div>";
//$('#pageNotesContent').append(widgetNoteUi);
hasNotes = true;
}
}
}
populateWidgetNotes(pageForNotes.widgetNotes);
if (pageForNotes.masterNotes) {
for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
populateWidgetNotes(pageForNotes.masterNotes[i].widgetNotes);
}
}
if (widgetNoteUi.length > 0) {
var widgetNotesHeader = "<div id='widgetNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Widget Notes</div>";
$('#pageNotesContent').append(widgetNotesHeader + widgetNoteUi);
//$('.widgetNoteContainer').children(':last-child').remove();
//$('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
$('.widgetNoteContainer').click(function () {
var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
$('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
if (!wasSelected) $(this).addClass('widgetNoteContainerSelected');
var dimStr = $('.currentAdaptiveView').attr('data-dim');
var h = dimStr ? dimStr.split('x')[1] : '0';
var $leftPanel = $('.leftPanel:visible');
var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
var $rightPanel = $('.rightPanel:visible');
var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
var viewDimensions = {
h: h != '0' ? h : '',
scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
height: $('.rightPanel').height(),
panelWidthOffset: leftPanelOffset + rightPanelOffset
};
$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: this.getAttribute('data-id'), value: !wasSelected, view: viewDimensions});
});
}
//if (pageForNotes.masterNotes) {
// for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
// var master = pageForNotes.masterNotes[i];
// hasNotes = populateNotes(master) || hasNotes;
// }
//}
}
return hasNotes;
}
// bind to the page load
$axure.page.bind('load.page_notes', function () {
closeAllDialogs();
var hasNotes = false;
$('#pageNotesContent').html("");
hasNotes = populateNotes($axure.page);
if(hasNotes) $('#pageNotesEmptyState').hide();
else $('#pageNotesEmptyState').show();
//If footnotes enabled for this prototype...
if ($axure.player.isMobileMode()) {
$axure.messageCenter.postMessage('annotationToggle', false);
} else if($axure.document.configuration.showAnnotations == true) {
//If the fn var is defined and set to 0, hide footnotes
//else if hide-footnotes button selected, hide them
var fnVal = $axure.player.getHashStringVar(FOOTNOTES_VAR_NAME);
if(fnVal.length > 0 && fnVal == 0) {
$('#showNotesOption').find('.overflowOptionCheckbox').removeClass('selected');
$axure.messageCenter.postMessage('annotationToggle', false);
} else if(!$('#showNotesOption').find('.overflowOptionCheckbox').hasClass('selected')) {
//If the footnotes button isn't selected, hide them on this loaded page
$axure.messageCenter.postMessage('annotationToggle', false);
}
}
// Get multiple click call if not removing beforehand
$('#notesOverlay').off('click');
$('#notesOverlay').on('click', '.closeNotesDialog', function () {
var ownerId = $(this).attr("data-ownerid");
_toggleAnnDialog(ownerId);
});
$axure.player.updatePlugins();
return false;
});
$axure.messageCenter.addMessageListener(function (message, data) {
//var messageData = { id: elementId, x: event.pageX, y: event.pageY }
if (message == 'toggleAnnDialog') {
_toggleAnnDialog(data.id, data.x, data.y, data.page);
}
});
});
function linkify(text) {
var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(urlRegex, function (url, b, c) {
var url2 = (c == 'www.') ? 'http://' + url : url;
return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
});
}
function getWidgetNotesHtml(ownerId, page) {
var pageForNotes = page || $axure.page;
var widgetNoteUi = '';
widgetNoteUi += "<div data-ownerid='" + ownerId + "' class='closeNotesDialog'></div>";
widgetNoteUi += "<div class='notesDialogScroll'>";
function getNotesForPage(widgetNotes) {
for (var i = 0; i < widgetNotes.length; i++) {
var widgetNote = widgetNotes[i];
if (widgetNote["ownerId"] == ownerId) {
widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
for (var widgetNoteName in widgetNote) {
if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
}
}
widgetNoteUi += "</div>";
}
}
}
getNotesForPage(pageForNotes.widgetNotes);
if (pageForNotes.masterNotes) {
for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
getNotesForPage(pageForNotes.masterNotes[i].widgetNotes);
}
}
widgetNoteUi += "</div>";
widgetNoteUi += "<div class='resizeNotesDialog'></div>";
return widgetNoteUi;
}
var maxZIndex = 1;
var dialogs = {};
var _toggleAnnDialog = function (id, srcLeft, srcTop, page) {
if(dialogs[id]) {
var $dialog = dialogs[id];
// reset the dialog
dialogs[id] = undefined;
$dialog.find('.notesDialogScroll').getNiceScroll().remove();
$dialog.remove();
return;
}
var bufferH = 10;
var bufferV = 10;
var blnLeft = false;
var blnAbove = false;
var mfPos = $('#mainPanelContainer').position();
var viewablePanelLeftMargin = parseInt($('#mainPanelContainer').css('margin-left'));
var sourceTop = srcTop + mfPos.top;
var sourceLeft = srcLeft + viewablePanelLeftMargin;
var width = 300;
var height = 300;
if(sourceLeft > width + bufferH) {
blnLeft = true;
}
if(sourceTop > height + bufferV) {
blnAbove = true;
}
var top = 0;
var left = 0;
if(blnAbove) top = sourceTop - height - 20;
else top = sourceTop + 10;
if(blnLeft) left = sourceLeft - width - 4;
else left = sourceLeft - 6;
//need to set the zindex
maxZIndex = maxZIndex + 1;
var $dialog = $('<div class="notesDialog"></div>')
.appendTo('#notesOverlay')
.html(getWidgetNotesHtml(id, page));
$dialog.css({ 'left': left, 'top': top, 'z-index': maxZIndex });
$dialog.find('.notesDialogScroll').niceScroll({ cursorcolor: "#8c8c8c", cursorborder: "0px solid #fff" });
$dialog.find('.notesDialogScroll').on($axure.eventNames.mouseDownName, function(event) {
event.stopPropagation();
});
$dialog.find('.closeNotesDialog').on($axure.eventNames.mouseDownName, function (event) {
event.stopPropagation();
});
$dialog.on($axure.eventNames.mouseDownName, startDialogMove);
var startMouseX;
var startMouseY;
var startDialogX;
var startDialogY;
function startDialogMove() {
startMouseX = window.event.pageX;
startMouseY = window.event.pageY;
var position = $dialog.position();
startDialogX = position.left;
startDialogY = position.top;
$dialog.addClass('active');
$('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
$(document).bind($axure.eventNames.mouseMoveName, doDialogMove).bind($axure.eventNames.mouseUpName, endDialogMove);
$dialog.find('.notesDialogScroll').getNiceScroll().hide();
}
function doDialogMove() {
var currentX = window.event.pageX;
var currentY = window.event.pageY;
$dialog.css({ 'left': startDialogX + currentX - startMouseX, 'top': startDialogY + currentY - startMouseY });
}
function endDialogMove() {
$('div.splitterMask').remove();
$dialog.removeClass('active');
$(document).unbind($axure.eventNames.mouseMoveName, doDialogMove).unbind($axure.eventNames.mouseUpName, endDialogMove);
$dialog.find('.notesDialogScroll').getNiceScroll().resize();
$dialog.find('.notesDialogScroll').getNiceScroll().show();
}
$dialog.find('.resizeNotesDialog').on($axure.eventNames.mouseDownName, startDialogResize);
var startDialogW;
var startDialogH;
function startDialogResize() {
event.stopPropagation();
startMouseX = window.event.pageX;
startMouseY = window.event.pageY;
startDialogW = Number($dialog.css('width').replace('px',''));
startDialogH = Number($dialog.css('height').replace('px', ''));
$dialog.addClass('active');
$('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
$(document).bind($axure.eventNames.mouseMoveName, doDialogResize).bind($axure.eventNames.mouseUpName, endDialogResize);
$dialog.find('.notesDialogScroll').getNiceScroll().hide();
}
function doDialogResize() {
var currentX = window.event.pageX;
var currentY = window.event.pageY;
var newWidth = Math.max(200, startDialogW + currentX - startMouseX);
var newHeight = Math.max(200, startDialogH + currentY - startMouseY);
$dialog.css({ 'width': newWidth, 'height': newHeight });
}
function endDialogResize() {
$('div.splitterMask').remove();
$dialog.removeClass('active');
$(document).unbind($axure.eventNames.mouseMoveName, doDialogResize).unbind($axure.eventNames.mouseUpName, endDialogResize);
$dialog.find('.notesDialogScroll').getNiceScroll().resize();
$dialog.find('.notesDialogScroll').getNiceScroll().show();
}
dialogs[id] = $dialog;
// scroll ... just for IE
//window.scrollTo(scrollX, scrollY);
};
$(document).on('sidebarCollapse', function (event, data) {
clearSelection();
});
$(document).on('pluginShown', function (event, data) {
if(data != 2) {
clearSelection();
}
});
function clearSelection() {
var selectedNote = $('#pageNotesContainer').find('.widgetNoteContainerSelected');
if(selectedNote.length > 0) {
selectedNote.removeClass('widgetNoteContainerSelected');
//var dimStr = $('.currentAdaptiveView').attr('data-dim');
//var h = dimStr ? dimStr.split('x')[1] : '0';
//var $leftPanel = $('.leftPanel:visible');
//var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
//var $rightPanel = $('.rightPanel:visible');
//var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
//var viewDimensions = {
// h: h != '0' ? h : '',
// scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
// scrollLeft: $('#clipFrameScroll').scrollLeft(),
// scrollTop: $('#clipFrameScroll').scrollTop(),
// height: $('.rightPanel').height(),
// panelWidthOffset: leftPanelOffset + rightPanelOffset
//};
//$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false, view: viewDimensions });
$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false });
//$axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
}
}
function closeAllDialogs() {
for (var id in dialogs) {
var $dialog = dialogs[id];
if ($dialog !== undefined) _toggleAnnDialog(id);
}
}
$axure.player.toggleFootnotes = function(val) {
var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
if (scaleCheckDiv.hasClass('selected')) {
if (!val) $('#showNotesOption').click();
} else {
if (val) $('#showNotesOption').click();
}
}
function footnotes_click(event) {
var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
if (scaleCheckDiv.hasClass('selected')) {
closeAllDialogs();
scaleCheckDiv.removeClass('selected');
$axure.messageCenter.postMessage('annotationToggle', false);
//Add 'fn' hash string var so that footnotes stay hidden across reloads
$axure.player.setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
} else {
scaleCheckDiv.addClass('selected');
$axure.messageCenter.postMessage('annotationToggle', true);
//Delete 'fn' hash string var if it exists since default is visible
$axure.player.deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
}
}
function createNotesOverlay() {
var $targetPanel = $('#clippingBounds');
if (!$('#notesOverlay').length) {
var notesOverlay = document.createElement('div');
notesOverlay.setAttribute('id', 'notesOverlay');
$targetPanel.prepend(notesOverlay);
$(notesOverlay).append('&nbsp;');
}
}
function generatePageNotes() {
var pageNotesUi = "<div id='pageNotesHeader'>";
pageNotesUi += "<div id='pageNotesToolbar' style='height: 12px;'>";
pageNotesUi += "</div>";
pageNotesUi += "</div>";
pageNotesUi += "<div id='pageNotesScrollContainer'>";
pageNotesUi += "<div id='pageNotesContainer'>";
pageNotesUi += "<div id='pageNotesEmptyState' class='emptyStateContainer'><div class='emptyStateTitle'>No notes for this page.</div><div class='emptyStateContent'>Notes added in Axure RP will appear here.</div><div class='dottedDivider'></div></div>";
pageNotesUi += "<span id='pageNotesContent'></span>";
pageNotesUi += "</div></div>";
$('#pageNotesHost').html(pageNotesUi);
if(!$axure.document.configuration.showAnnotations) {
$('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
}
}
})();

3
src_old/plugins/page_notes/styles/images/notes_panel_off.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill="#008DCB" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 340 B

3
src_old/plugins/page_notes/styles/images/notes_panel_on.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path fill="#6D6D6D" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 340 B

209
src_old/plugins/page_notes/styles/page_notes.css
View File

@ -1,209 +0,0 @@
#pageNotesHost {
display: flex;
flex-direction: column;
height: 100%;
}
#pageNotesHostBtn {
order: 2;
}
#pageNotesHostBtn a {
background: url('images/notes_panel_on.svg') no-repeat center center,linear-gradient(transparent, transparent);
}
#pageNotesHostBtn a.selected, #pageNotesHostBtn a.selected:hover {
background: url('images/notes_panel_off.svg') no-repeat center center,linear-gradient(transparent, transparent);
}
#pageNotesScrollContainer {
overflow: auto;
width: 100%;
flex: 1;
-webkit-overflow-scrolling: touch;
}
#pageNotesContent {
overflow: visible;
}
.pageNoteContainer {
padding: 0px 12px 8px 12px;
}
.mobileMode .pageNoteContainer {
padding: 0px 16px 8px 17px;
}
.pageNoteName {
font-size: 13px;
font-weight: bold;
color: #2c2c2c;
margin: 15px 0px 5px 0px;
white-space: nowrap;
}
.pageNote {
font-size: 13px;
color: #2a2e38;
line-height: 1.67;
word-wrap: break-word;
}
.pageNote ul {
list-style: disc;
padding: 0px 0px 0px 40px;
}
.pageNote ul ul{
list-style: circle;
}
.pageNote ul ul ul{
list-style: square;
}
.pageNote ul ul ul ul {
list-style: disc;
}
.pageNote ul ul ul ul ul {
list-style: circle;
}
.pageNote ul ul ul ul ul ul {
list-style: square;
}
.widgetNoteContainer {
padding: 12px;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
cursor: pointer;
}
.mobileMode .widgetNoteContainer {
padding: 12px 16px 12px 17px;
}
.widgetNoteContainerSelected {
background-color: white;
border-bottom: 1px solid #c2c2c2;
border-top: 1px solid #c2c2c2;
}
.widgetNoteFootnote {
display: inline-block;
padding-top: 1px;
background-color: #fff849;
font-size: 11px;
font-weight: bold;
line-height: 16px;
margin-right: 8px;
padding: 0px 5px;
color: #000;
}
div.annnoteline {
display: inline-block;
width: 9px;
height: 1px;
border-bottom: 1px solid white;
margin-top: 1px;
}
.widgetNoteLabel {
font-size: 13px;
font-weight: 600;
color: #58167d;
margin-top: 4px;
float: right;
}
.noteLink {
text-decoration: inherit;
color: inherit;
}
.noteLink:hover {
background-color: white;
}
.notesSectionHeader {
margin: 0px 8px 0px 12px;
}
.notesPageNameHeader {
margin: 8px 8px 15px 12px;
}
.mobileMode .notesPageNameHeader {
margin: 18px 14px 5px 16px;
}
#notesOverlay {
width: 0;
height: 0;
position: absolute;
overflow: visible;
z-index: 1;
}
div.closeNotesDialog {
position: absolute;
top: 6px;
right: 6px;
width: 11px;
height: 10px;
object-fit: contain;
background: url(../../../resources/images/close_x.svg) no-repeat center center, linear-gradient(transparent, transparent);
margin-left: auto;
cursor: pointer;
}
div.resizeNotesDialog {
position: absolute;
bottom: 2px;
right: 2px;
width: 11px;
height: 10px;
object-fit: contain;
background: url(../../../resources/images/resize.svg) no-repeat center center, linear-gradient(transparent, transparent);
margin-left: auto;
cursor: nwse-resize;
}
div.notesDialog {
position: absolute;
padding: 16px 3px 10px 3px;
background-color: #efefef;
width: 300px;
height: 300px;
line-height: normal;
border: #8F949A solid 1px;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
cursor: move;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
div.notesDialog.active {
user-select: none;
}
div.notesDialog .widgetNoteContainer {
cursor: auto;
padding: 2px 26px 16px 14px;
}
div.notesDialogScroll {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
cursor: auto;
}
.mobileMode .pageNoteName, .mobileMode #pageNotesToolbar, .mobileMode .dottedDivider {
display: none;
}

479
src_old/plugins/recordplay/recordplay.js
View File

@ -1,479 +0,0 @@
// use this to isolate the scope
(function() {
if(!$axure.document.configuration.showRecordPlay) { return; }
$(window.document).ready(function() {
$axure.player.createPluginHost({
id: 'recordPlayHost',
context: 'interface',
title: 'Recording'
});
_generateRecordPlay();
$('#recordButton').click(_recordClick);
$('#playButton').click(_playClick);
$('#stopButton').click(_stopClick);
$('#deleteButton').click(_deleteClick);
// bind to the page load
$axure.page.bind('load.page_notes', function() {
$.ajax({
type: "POST",
url: '/RecordController/ListRecordings',
success: function(response) {
$('#recordNameHeader').html("");
$('#recordPlayContent').html("");
//populate the notes
axRecordingList = [];
if(!eventList) {
recordingIndex = 0;
eventList = [];
recordingStartTime = 0;
bulkEventElement = "";
lastBulkEvent = {};
}
for(var idx in response.recordingList) {
getOneRecording(response.recordingList[idx]);
}
return false;
},
// dataType: 'json'
});
});
});
var nameMatcher = new RegExp("^axRecording[0-9]{4}$", "i");
var indexMatcher = new RegExp("[0-9]{4}$", "i");
var convertFromJson = function(oneRecording) {
if(nameMatcher.exec(oneRecording.recordingName)) {
var myArray = indexMatcher.exec(oneRecording.recordingName);
var currIdx = parseInt(myArray);
if(recordingIndex < currIdx) {
recordingIndex = currIdx;
}
}
for(var idx in oneRecording.eventList) {
var thisEvent = oneRecording.eventList[idx];
thisEvent.eventInfo = {};
thisEvent.eventInfo.srcElement = thisEvent.elementID;
// TODO: check that this is correct.
if(isBulkMouse(thisEvent.eventType)) {
thisEvent.eventInfo.mousePositions = [];
thisEvent.eventInfo.mousePositions = thisEvent.mousePositions;
thisEvent.timeStamp = thisEvent.mousePositions[0].timeStamp;
}
if(isSingleMouse(thisEvent.eventType)) {
thisEvent.eventInfo.cursor = {};
thisEvent.eventInfo.cursor = thisEvent.cursor;
}
if(thisEvent.eventType === 'OnDrag') {
thisEvent.eventInfo.dragInfo = {};
thisEvent.eventInfo.dragInfo = thisEvent.dragInfo;
thisEvent.timeStamp = thisEvent.dragInfo.startTime;
}
}
return oneRecording;
};
var getOneRecording = function(recordingItem) {
$.ajax({
type: "POST",
url: '/RecordController/GetRecording',
data: { 'recordingId': recordingItem.recordingId },
success: function(response) {
axRecordingList[axRecordingList.length] = convertFromJson(response);
var axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
axRecordingContainer.append(_formAxRecordingBranch(response));
_attachEventTriggers(response);
}, // dataType: 'json'
});
};
var axRecordingList;
var eventList;
var recordingIndex;
var recordingStartTime;
var recordingId;
var recordingName;
var leadingZeros = function(number, digits) { // because this thing doesn't have string.format (or does it?)
var recurseLeadingZeros = function(number, digitsLeft) {
if(digitsLeft > 0) {
return recurseLeadingZeros("0" + number, digitsLeft - 1);
} else {
return number;
}
};
return recurseLeadingZeros(number, digits - String(number).length);
};
var generateRecordingName = function() {
return "axRecording" + leadingZeros(recordingIndex, 4);
};
var isSingleMouse = function(eventType) {
return (eventType === 'OnClick' ||
eventType === 'OnMouseUp' ||
eventType === 'OnMouseDown' ||
eventType === 'OnMouseOver' ||
eventType === 'OnKeyUp' ||
eventType === 'OnSelectedChange' ||
eventType === 'OnSelect' ||
eventType === 'OnUnselect' ||
eventType === 'OnTextChange' ||
eventType === 'OnMouseOut');
};
var isBulkMouse = function(eventType) {
return (eventType === 'OnMouseHover' ||
eventType === 'OnMouseMove');
};
var bulkEventElement;
var lastBulkEvent;
$axure.messageCenter.addMessageListener(function(message, eventData) {
var lastEvent, lastBulkData;
if(message === 'logEvent') {
if(bulkEventElement !== eventData.elementID) {
lastBulkEvent = {};
bulkEventElement = eventData.elementID;
}
if(isBulkMouse(eventData.eventType)) {
lastEvent = lastBulkEvent[eventData.eventType];
if(lastEvent) {
// this is the second or third or whatever onmousemove in a row
lastBulkData = lastEvent.eventInfo.mousePositions;
lastBulkData[lastBulkData.length] = {
cursor: eventData.eventInfo.cursor,
timeStamp: eventData.timeStamp
};
} else {
eventData.eventInfo.mousePositions = [];
eventData.eventInfo.mousePositions[0] = {
cursor: eventData.eventInfo.cursor,
timeStamp: eventData.timeStamp
};
eventList[eventList.length] = eventData;
lastBulkEvent[eventData.eventType] = eventData;
}
} else {
var z = true;
}
if(isSingleMouse(eventData.eventType) ) {
eventList[eventList.length] = eventData;
lastBulkEvent = {};
bulkEventElement = eventData.elementID;
}
if(eventData.eventType === 'OnDrag') {
lastEvent = lastBulkEvent[eventData.eventType];
if (lastEvent) {
// this is the second or third or whatever onmousemove in a row
lastBulkData = lastEvent.eventInfo.mousePositions;
lastBulkData[lastBulkData.length] = {
dragInfo: eventData.eventInfo.dragInfo,
timeStamp: eventData.timeStamp
};
} else {
eventData.eventInfo.mousePositions = [];
eventData.eventInfo.mousePositions[0] = {
dragInfo: eventData.eventInfo.dragInfo,
timeStamp: eventData.timeStamp
};
eventList[eventList.length] = eventData;
lastBulkEvent[eventData.eventType] = eventData;
}
}
// if(eventData.eventType === 'OnKeyUp') {
// transmissionFields.eventInfo = eventData.eventInfo;
// $.ajax({
// type: "POST",
// url: '/RecordController/LogMouseClick',
// data: transmissionFields,
// });
// }
}
});
var _recordClick = function(event) {
$('#recordButton').addClass('recordPlayButtonSelected');
recordingIndex++;
// $axure.recording.startRecord();
recordingStartTime = new Date().getTime();
$.ajax({
type: "POST",
url: '/RecordController/CreateRecording',
data: {
'recordingName': generateRecordingName(),
timeStamp: recordingStartTime
},
success: function(response) {
recordingId = response.recordingId;
recordingName = response.recordingName;
$axure.messageCenter.postMessage('startRecording', {'recordingId' : recordingId, 'recordingName': recordingName});
},
// dataType: 'json'
});
};
var _playClick = function(event) {
$('#playButton').addClass('recordPlayButtonSelected');
};
var _stopClick = function(event) {
var axRecording, axObjectDictionary, axRecordingContainer, transmissionFields;
$('#sitemapLinksContainer').toggle();
if($('#recordButton').is('.recordPlayButtonSelected')) {
$('#recordButton').removeClass('recordPlayButtonSelected');
// $axure.recording.stopRecord();
axRecording = {
'recordingId' : recordingId,
'recordingName': recordingName,
'eventList': eventList
};
axRecordingList[axRecordingList.length] = axRecording;
axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
axRecordingContainer.append(_formAxRecordingBranch(axRecording));
_attachEventTriggers(axRecording);
lastBulkEvent = {};
var recordingStepList = [];
for(var eventListIdx in eventList) {
var eventListItem = eventList[eventListIdx];
if(eventListItem.eventType === 'OnDrag') {
var lastDrag = eventListItem.eventInfo.mousePositions[eventListItem.eventInfo.mousePositions.length - 1].dragInfo;
eventListItem.eventInfo.dragInfo.currentX = lastDrag.currentX;
eventListItem.eventInfo.dragInfo.currentY = lastDrag.currentY;
eventListItem.eventInfo.dragInfo.currentTime = lastDrag.currentTime;
eventListItem.eventInfo.dragInfo.xDelta = eventListItem.eventInfo.dragInfo.currentX - eventListItem.eventInfo.dragInfo.lastX;
eventListItem.eventInfo.dragInfo.yDelta = eventListItem.eventInfo.dragInfo.currentY - eventListItem.eventInfo.dragInfo.lastY;
transmissionFields = {};
transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['dragInfo']);
transmissionFields.recordingId = recordingId;
}
if(isSingleMouse(eventListItem.eventType)) {
transmissionFields = {};
transmissionFields = tackItOn(transmissionFields, eventListItem, ['timeStamp', 'eventType', 'elementID', 'path']);
transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['cursor']);
transmissionFields.recordingId = recordingId;
}
if(isBulkMouse(eventListItem.eventType)) {
transmissionFields = {};
transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['mousePositions']);
transmissionFields.recordingId = recordingId;
}
recordingStepList[recordingStepList.length] = transmissionFields;
}
eventList = [];
$axure.messageCenter.postMessage('stopRecording', axObjectDictionary);
var jsonText = {
'recordingName': recordingName,
'recordingId': recordingId,
recordingStart: new Date().getTime(),
recordingEnd: recordingStartTime,
'eventList': recordingStepList
};
$.ajax({
type: "POST",
url: '/RecordController/StopRecording',
data: { 'jsonText': JSON.stringify(jsonText) }
});
}
if($('#playButton').is('.recordPlayButtonSelected')) {
$('#playButton').removeClass('recordPlayButtonSelected');
}
};
var _deleteClick = function(event) {
$.ajax({
type: "POST",
url: '/RecordController/DeleteRecordings',
success: function(response) {
var x = true;
}, // dataType: 'json'
});
};
var tackItOn = function(destination, source, fields) {
for(var idx in fields) {
destination[fields[idx]] = source[fields[idx]];
}
return destination;
};
var makeFirstLetterLower = function(eventName) {
return eventName.substr(0, 1).toLowerCase() + eventName.substr(1);
};
var _attachEventTriggers = function(axRecording) {
for(var eventIdx in axRecording.eventList) {
var eventObject = axRecording.eventList[eventIdx];
var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
currentEvent = eventID;
$('#' + eventID).click(_triggerEvent(axRecording['recordingId'], eventObject.timeStamp));
// $('#' + eventID).click(event.trigger);
}
};
var _formAxRecordingBranch = function(axRecording) {
var eventObject, eventID, RDOID;
var recordPlayUi = '<ul class="recordingTree">';
recordPlayUi += "<li class='recordingNode recordingExpandableNode'>";
recordPlayUi += '<div class="recordingContainer" style="margin-left:15px">';
recordPlayUi += '<a class="recordingPlusMinusLink"><span class="recordingMinus"></span></a>';
recordPlayUi += '<a class="recordingPageLink" nodeurl="home.html">';
recordPlayUi += '<span class="recordingPageIcon"></span>';
recordPlayUi += '<span class="recordingPageName">' + axRecording['recordingName'] + '</span>';
recordPlayUi += '</a>';
recordPlayUi += '<ul>';
for(eventID in axRecording.eventList) {
eventObject = axRecording.eventList[eventID];
recordPlayUi += '<li class="recordingNode recordingLeafNode">';
recordPlayUi += '<div class="recordingEventContainer" style="margin-left:44px">';
var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
recordPlayUi += '<a id="' + eventID + '" class="sitemapPageLink">';
recordPlayUi += 'Event ID: ' + eventID + '<br/>';
recordPlayUi += '<span class="sitemapPageIcon"></span>';
recordPlayUi += '<span class="sitemapPageName">';
recordPlayUi += 'elementID: ' + eventObject.elementID + '<br/>';
recordPlayUi += 'eventType: ' + eventObject.eventType + '<br/>';
// recordPlayUi += 'cursor: ' + eventObject.eventInfo.cursor.x + ',' + eventObject.eventInfo.cursor.y + '<br/>';
for(RDOID in eventObject.path) {
recordPlayUi += '/' + eventObject.path[RDOID];
}
recordPlayUi += '<br/>';
recordPlayUi += '</span>';
recordPlayUi += '</a>';
recordPlayUi += '</div>';
recordPlayUi += '</li>';
}
recordPlayUi += '</ul>';
recordPlayUi += '</div>';
recordPlayUi += "</li>";
recordPlayUi += "</ul>";
return recordPlayUi;
};
var currentEvent = '';
var _triggerEvent = function(axRecording, timeStamp) {
// $axure.messageCenter.postMessage('triggerEvent', false);
for(var axRecordingIdx in axRecordingList) {
if(axRecordingList[axRecordingIdx].recordingId === axRecording) {
for(var eventIdx in axRecordingList[axRecordingIdx].eventList) {
if(axRecordingList[axRecordingIdx].eventList[eventIdx].timeStamp === timeStamp) {
var thisEvent = axRecordingList[axRecordingIdx].eventList[eventIdx];
// thisEvent.trigger();
var thisEventInfo, lowerEventType;
lowerEventType = thisEvent.eventType.toLowerCase();
if(lowerEventType === 'onclick' || lowerEventType === 'onmousein') {
thisEventInfo = {};
thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['cursor', 'timeStamp', 'srcElement']);
if(thisEvent.eventInfo.inputType) {
thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['inputType', 'inputValue']);
}
} else {
thisEventInfo = thisEvent.eventInfo;
}
var thisParameters = {
'element': thisEvent.elementID,
'eventInfo': thisEventInfo,
// 'axEventObject': thisEvent.eventObject,
'eventType': thisEvent.eventType
};
return function() {
$axure.messageCenter.postMessage('playEvent', thisParameters);
};
}
}
}
}
};
var _generateRecordPlay = function() {
var recordPlayUi = "<div id='recordPlayContainer'>";
recordPlayUi += "<div id='recordPlayToolbar'>";
recordPlayUi += "<div style='height:30px;'>";
recordPlayUi += "<a id='recordButton' title='Start a Recording' class='recordPlayButton'></a>";
recordPlayUi += "<a id='playButton' title='Play Back a Recording' class='recordPlayButton'></a>";
recordPlayUi += "<a id='stopButton' title='Stop' class='recordPlayButton'></a>";
recordPlayUi += "<a id='deleteButton' title='Delete All Recordings' class='recordPlayButton'></a>";
recordPlayUi += "</div>";
recordPlayUi += "<div id='recordingContainer'><li class='recordingNode recordingRootNode'></li></div>";
recordPlayUi += "</div>";
$('#recordPlayHost').html(recordPlayUi);
};
})();

90
src_old/plugins/recordplay/styles/recordplay.css
View File

@ -1,90 +0,0 @@
#recordPlayHost {
font-size: 12px;
color:#333;
height: 100%;
}
#recordPlayContainer
{
overflow: auto;
width: 100%;
height: 100%;
padding: 10px 10px 10px 10px;
}
#recordPlayToolbar
{
margin: 5px 5px 5px 5px;
height: 22px;
}
#recordPlayToolbar .recordPlayButton
{
float: left;
width: 22px;
height: 22px;
border: 1px solid transparent;
}
#recordPlayToolbar .recordPlayButton:hover
{
border: 1px solid rgb(0,157,217);
background-color : rgb(166,221,242);
}
#recordPlayToolbar .recordPlayButton:active
{
border: 1px solid rgb(0,157,217);
background-color : rgb(204,235,248);
}
#recordPlayToolbar .recordPlayButtonSelected {
border: 1px solid rgb(0,157,217);
background-color : rgb(204,235,248);
}
/* removed images */
/*#recordButton {
background: url('../../sitemap/styles/images/233_hyperlink_16.png') no-repeat center center;
}
#playButton {
background: url('../../sitemap/styles/images/225_responsive_16.png') no-repeat center center;
}
#stopButton {
background: url('../../sitemap/styles/images/228_togglenotes_16.png') no-repeat center center;
}
#deleteButton {
background: url('../../sitemap/styles/images/231_event_16.png') no-repeat center center;
}*/
#recordNameHeader
{
/* yeah??*/
font-size: 13px;
font-weight: bold;
height: 23px;
white-space: nowrap;
}
#recordPlayContent
{
/* yeah??*/
overflow: visible;
}
.recordPlayName
{
font-size: 12px;
margin-bottom: 5px;
text-decoration: underline;
white-space: nowrap;
}
.recordPlay
{
margin-bottom: 10px;
}

562
src_old/plugins/sitemap/sitemap.js
View File

@ -1,562 +0,0 @@
var currentNodeUrl = '';
var allNodeUrls = [];
var openNextPage = $axure.player.openNextPage = function () {
var index = allNodeUrls.indexOf(currentNodeUrl) + 1;
if(index >= allNodeUrls.length) return;
var nextNodeUrl = allNodeUrls[index];
currentNodeUrl = nextNodeUrl;
$('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
};
var openPreviousPage = $axure.player.openPreviousPage = function () {
var index = allNodeUrls.indexOf(currentNodeUrl) - 1;
if(index < 0) return;
var nextNodeUrl = allNodeUrls[index];
currentNodeUrl = nextNodeUrl;
$('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
};
// use this to isolate the scope
(function() {
var SHOW_HIDE_ANIMATION_DURATION = 0;
var HIGHLIGHT_INTERACTIVE_VAR_NAME = 'hi';
var currentPageLoc = '';
var currentPlayerLoc = '';
var currentPageHashString = '';
$(window.document).ready(function() {
$axure.player.createPluginHost({
id: 'sitemapHost',
context: 'project',
title: 'Project Pages',
gid: 1,
});
$(window.document).bind('keyup', function (e) {
if (e.target.localName == "textarea" || e.target.localName == "input" || event.target.isContentEditable) return;
switch(e.which) {
case 188:
openPreviousPage();
break;
case 190:
openNextPage();
break;
default: return; // exit this handler for other keys
}
});
generateSitemap();
var pageCount = $('.sitemapPageLink').length;
$('.leftArrow').click(openPreviousPage);
$('.rightArrow').click(openNextPage);
$('.sitemapPlusMinusLink').click(collapse_click);
$('.sitemapPageLink').parent().mousedown(node_click);
$('#interfaceAdaptiveViewsListContainer').hide();
$('#projectOptionsShowHotspots').click(showHotspots_click);
$('#searchIcon').click(searchBoxClose_click);
$('#searchDiv').click(searchBoxExpand_click);
$('#searchBox').keyup(search_input_keyup);
// bind to the page load
$axure.page.bind('load.sitemap', function() {
currentPageLoc = $axure.page.location.split("#")[0];
var decodedPageLoc = decodeURI(currentPageLoc);
currentNodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/') ? decodedPageLoc.lastIndexOf('/') + 1 : 0);
currentPlayerLoc = $(location).attr('href').split("#")[0].split("?")[0];
currentPageHashString = '#p=' + currentNodeUrl.substr(0, currentNodeUrl.lastIndexOf('.'));
$axure.player.setVarInCurrentUrlHash(PAGE_ID_NAME, $axure.player.getPageIdByUrl(currentNodeUrl));
$axure.player.setVarInCurrentUrlHash(PAGE_URL_NAME, currentNodeUrl.substring(0, currentNodeUrl.lastIndexOf('.html')));
$('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
var $currentNode = $('.sitemapPageLink[nodeUrl="' + currentNodeUrl + '"]');
$currentNode.parent().parent().addClass('sitemapHighlight');
var pageName = $axure.page.pageName;
$('.pageNameHeader').html(pageName);
if ($currentNode.length > 0 && pageCount > 1) {
var currentNode = $currentNode[0];
var currentNum = $('.sitemapPageLink').index(currentNode) + 1;
$('.pageCountHeader').html('(' + currentNum + ' of ' + pageCount + ')');
} else $('.pageCountHeader').html('');
//If highlight var is present and set to 1 or else if
//sitemap highlight button is selected then highlight interactive elements
var hiVal = $axure.player.getHashStringVar(HIGHLIGHT_INTERACTIVE_VAR_NAME);
if(hiVal.length > 0 && hiVal == 1) {
$('#showHotspotsOption').find('.overflowOptionCheckbox').addClass('selected');
if ($('#projectOptionsHotspotsCheckbox').length > 0) $('#projectOptionsHotspotsCheckbox').addClass('selected');
$axure.messageCenter.postMessage('highlightInteractive', true);
} else if ($('#showHotspotsOption').find('.overflowOptionCheckbox').hasClass('selected')) {
$axure.messageCenter.postMessage('highlightInteractive', true);
}
generateAdaptiveViews(false);
if (MOBILE_DEVICE) generateAdaptiveViews(true);
$axure.player.suspendRefreshViewPort = true;
//Set the current view if it is defined in the hash string
//If the view is invalid, set it to 'auto' in the string
//ELSE set the view based on the currently selected view in the toolbar menu
var viewStr = $axure.player.getHashStringVar(ADAPTIVE_VIEW_VAR_NAME);
if(viewStr.length > 0) {
var $view = $('.adaptiveViewOption[val="' + viewStr + '"]');
if($view.length > 0) $view.click();
else $('.adaptiveViewOption[val="auto"]').click();
} else if($('.selectedRadioButton').length > 0) {
var $viewOption = $('.selectedRadioButton').parents('.adaptiveViewOption');
$viewOption.click();
}
updateAdaptiveViewHeader();
function setDefaultScaleForDevice() {
if(MOBILE_DEVICE && $axure.player.isMobileMode()) {
$('.projectOptionsScaleRow[val="0"]').click();
} else {
$('.vpScaleOption[val="0"]').click();
}
}
var scaleStr = $axure.player.getHashStringVar(SCALE_VAR_NAME);
if(scaleStr.length > 0) {
var $scale = $('.vpScaleOption[val="' + scaleStr + '"]');
if($scale.length > 0) $scale.click();
else setDefaultScaleForDevice();
} else {
setDefaultScaleForDevice();
}
var rotateStr = $axure.player.getHashStringVar(ROT_VAR_NAME);
if(rotateStr.length > 0) {
$('#vpRotate').prop('checked', true);
}
$axure.player.suspendRefreshViewPort = false;
if (!$axure.player.isViewOverridden()) $axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
$axure.player.refreshViewPort();
$axure.messageCenter.postMessage('finishInit');
showMainPanel();
return false;
});
var $vpContainer = $('#interfaceScaleListContainer');
var scaleOptions = '<div class="vpScaleOption" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Default Scale</div>';
scaleOptions += '<div class="vpScaleOption" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Width</div>';
scaleOptions += '<div class="vpScaleOption" val="2"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Fit</div>';
$(scaleOptions).appendTo($vpContainer);
$('#overflowMenuContainer').append('<div id="showHotspotsOption" class="showOption" style="order: 1"><div class="overflowOptionCheckbox"></div>Show Hotspots</div>');
$('#overflowMenuContainer').append($vpContainer);
$vpContainer.show();
$('#showHotspotsOption').click(showHotspots_click);
$('.vpScaleOption').click(vpScaleOption_click);
$('.vpScaleOption').mouseup(function (event) {
event.stopPropagation();
});
if (MOBILE_DEVICE) {
var scaleOptions = '<div class="projectOptionsScaleRow" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to fit width</div>';
scaleOptions += '<div class="projectOptionsScaleRow" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Original size (100%)</div>';
scaleOptions += '<div class="projectOptionsScaleRow" val="2" style="border-bottom: solid 1px #c7c7c7"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Fit all to screen</div>';
$(scaleOptions).appendTo($('#projectOptionsScaleContainer'));
$('.projectOptionsScaleRow').click(vpScaleOption_click);
}
$('#searchBox').focusin(function() {
if($(this).is('.searchBoxHint')) {
$(this).val('');
$(this).removeClass('searchBoxHint');
}
}).focusout(function() {
if($(this).val() == '') {
$(this).addClass('searchBoxHint');
}
});
$('#searchBox').focusout();
});
var _formatViewDimension = function(dim) {
if(dim == 0) return 'any';
if(dim.toString().includes('.')) return dim.toFixed(2);
return dim;
};
function generateAdaptiveViews(forProjectOptions) {
var $container = forProjectOptions ? $('#projectOptionsAdaptiveViewsContainer') : $('#interfaceAdaptiveViewsListContainer');
var $viewSelect = forProjectOptions ? $('#projectOptionsViewSelect') : $('#viewSelect');
var adaptiveViewOptionClass = forProjectOptions ? 'projectOptionsAdaptiveViewRow' : 'adaptiveViewOption';
var currentViewClass = forProjectOptions ? '' : 'currentAdaptiveView';
$container.empty();
$viewSelect.empty();
//Fill out adaptive view container with prototype's defined adaptive views, as well as the default, and Auto
var viewsList = '<div class="' + adaptiveViewOptionClass + '" val="auto"><div class="adapViewRadioButton selectedRadioButton"><div class="selectedRadioButtonFill"></div></div>Adaptive</div>';
var viewSelect = '<option value="auto">Adaptive</option>';
if (typeof $axure.page.defaultAdaptiveView.name != 'undefined') {
//If the name is a blank string, make the view name the width if non-zero, else 'any'
var defaultView = $axure.page.defaultAdaptiveView;
var defaultViewName = defaultView.name;
var widthString = _formatViewDimension(defaultView.size.width);
var heightString = _formatViewDimension(defaultView.size.height);
var viewString = defaultViewName + ' (' + widthString + ' x ' + heightString + ')';
viewsList += '<div class="' + adaptiveViewOptionClass + ' ' + currentViewClass + '" val="default"data-dim="' + defaultView.size.width + 'x' + defaultView.size.height + '">' +
'<div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' + viewString + '</div>';
viewSelect += '<option value="default">' + viewString + '</option>';
}
var useViews = $axure.document.configuration.useViews;
var hasViews = false;
if(useViews) {
for(var viewIndex = 0; viewIndex < $axure.page.adaptiveViews.length; viewIndex++) {
var currView = $axure.page.adaptiveViews[viewIndex];
var widthString = _formatViewDimension(currView.size.width);
var heightString = _formatViewDimension(currView.size.height);
var viewString = currView.name + ' (' + widthString + ' x ' + heightString + ')';
viewsList += '<div class="' + adaptiveViewOptionClass +
((forProjectOptions && (viewIndex == $axure.page.adaptiveViews.length - 1)) ? '" style="border-bottom: solid 1px #c7c7c7; margin-bottom: 15px;' : '') +
'" val="' +
currView.id +
'" data-dim="' +
currView.size.width +
'x' +
currView.size.height +
'"><div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' +
viewString +
'</div>';
viewSelect += '<option value="' + currView.id + '">' + viewString + '</option>';
hasViews = true;
}
}
$container.append(viewsList);
$viewSelect.append(viewSelect);
if (!hasViews) {
if (forProjectOptions) {
$('#projectOptionsAdaptiveViewsHeader').hide();
$('#projectOptionsAdaptiveViewsContainer').hide();
} else $('#interfaceAdaptiveViewsContainer').hide();
} else {
if (forProjectOptions) {
$('#projectOptionsAdaptiveViewsHeader').show();
$('#projectOptionsAdaptiveViewsContainer').show();
} else $('#interfaceAdaptiveViewsContainer').show();
}
$(('.' + adaptiveViewOptionClass)).click(adaptiveViewOption_click);
if (!forProjectOptions) {
$(('.' + adaptiveViewOptionClass)).mouseup(function (event) {
event.stopPropagation();
});
}
}
function collapse_click(event) {
if($(this).children('.sitemapPlus').length > 0) {
expand_click($(this));
} else {
$(this)
.children('.sitemapMinus').removeClass('sitemapMinus').addClass('sitemapPlus').end()
.closest('li').children('ul').hide(SHOW_HIDE_ANIMATION_DURATION);
}
event.stopPropagation();
}
function expand_click($this) {
$this
.children('.sitemapPlus').removeClass('sitemapPlus').addClass('sitemapMinus').end()
.closest('li').children('ul').show(SHOW_HIDE_ANIMATION_DURATION);
}
function searchBoxExpand_click(event) {
if (!$('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
$('#searchIcon').addClass('sitemapToolbarButtonSelected')
$('#searchBox').width(0);
$('#searchBox').show();
$('#searchBox').animate({ width: '95%' }, { duration: 200, complete: function () { $('#searchBox').focus(); } });
}
}
function searchBoxClose_click(event) {
if ($('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
$('#searchBox').animate({ width: '0%' }, { duration: 200,
complete: function () {
$('#searchBox').hide();
$('#searchIcon').removeClass('sitemapToolbarButtonSelected')
}});
$('#searchBox').val('');
$('#searchBox').keyup();
}
}
function node_click(event) {
hideMainPanel();
$('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
$(this).parent().addClass('sitemapHighlight');
$axure.page.navigate($(this).children('.sitemapPageLink')[0].getAttribute('nodeUrl'), true);
}
function hideMainPanel() {
$('#mainPanel').css('opacity', '0');
$('#clippingBounds').css('opacity', '0');
}
function showMainPanel() {
$('#mainPanel').animate({ opacity: 1 }, 10);
$('#clippingBounds').animate({ opacity: 1 }, 10);
}
$axure.messageCenter.addMessageListener(function(message, data) {
if(message == 'adaptiveViewChange') {
$('.adaptiveViewOption').removeClass('currentAdaptiveView');
if(data.viewId) {$('.adaptiveViewOption[val="' + data.viewId + '"]').addClass('currentAdaptiveView');}
else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
//when we set adaptive view through user event, we want to update the checkmark on sitemap
if(data.forceSwitchTo) {
$('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
$('.adapViewRadioButton').removeClass('selectedRadioButton');
$('div[val="' + data.forceSwitchTo + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
$('div[val="' + data.forceSwitchTo + '"]').find('.selectedRadioButtonFill').show();
}
updateAdaptiveViewHeader();
$axure.player.refreshViewPort();
} else if(message == 'previousPage') {
openPreviousPage();
} else if(message == 'nextPage') {
openNextPage();
}
});
$axure.player.toggleHotspots = function (val) {
var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
if ($(overflowMenuCheckbox).hasClass('selected')) {
if (!val) $('#showHotspotsOption').click();
} else {
if (val) $('#showHotspotsOption').click();
}
}
function showHotspots_click(event) {
var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
var projOptionsCheckbox = $('#projectOptionsHotspotsCheckbox');
if ($(overflowMenuCheckbox).hasClass('selected')) {
overflowMenuCheckbox.removeClass('selected');
if (projOptionsCheckbox.length > 0 ) projOptionsCheckbox.removeClass('selected');
$axure.messageCenter.postMessage('highlightInteractive', false);
//Delete 'hi' hash string var if it exists since default is unselected
$axure.player.deleteVarFromCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME);
} else {
overflowMenuCheckbox.addClass('selected');
if (projOptionsCheckbox.length > 0) projOptionsCheckbox.addClass('selected');
$axure.messageCenter.postMessage('highlightInteractive', true);
//Add 'hi' hash string var so that stay highlighted across reloads
$axure.player.setVarInCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME, 1);
}
}
function adaptiveViewOption_click(event) {
var currVal = $(this).attr('val');
$('.adaptiveViewOption').removeClass('currentAdaptiveView');
if(currVal) {$('.adaptiveViewOption[val="' + currVal + '"]').addClass('currentAdaptiveView');}
else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
$('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
$('.adapViewRadioButton').removeClass('selectedRadioButton');
$('div[val="' + currVal + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
$('div[val="' + currVal + '"]').find('.selectedRadioButtonFill').show();
selectAdaptiveView(currVal);
$axure.player.closePopup();
updateAdaptiveViewHeader();
}
var selectAdaptiveView = $axure.player.selectAdaptiveView = function(currVal) {
if (currVal == 'auto') {
$axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
$axure.player.deleteVarFromCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME);
} else {
currentPageLoc = $axure.page.location.split("#")[0];
var decodedPageLoc = decodeURI(currentPageLoc);
var nodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/')
? decodedPageLoc.lastIndexOf('/') + 1
: 0);
var adaptiveData = {
src: nodeUrl
};
adaptiveData.view = currVal;
$axure.messageCenter.postMessage('switchAdaptiveView', adaptiveData);
$axure.player.setVarInCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME, currVal);
}
}
$axure.player.updateAdaptiveViewHeader = updateAdaptiveViewHeader = function () {
var hasDefinedDim = true;
var dimensionlessViewStr = '(any x any)';
var viewString = $('.adaptiveViewOption.currentAdaptiveView').text();
if (viewString != null && viewString.indexOf(dimensionlessViewStr) >= 0) hasDefinedDim = false;
if (!hasDefinedDim) {
var viewName = viewString.substring(0, viewString.lastIndexOf(' ('));
var widthString = $('#mainPanelContainer').width();
viewString = viewName + ' (' + widthString + ' x any)';
}
$('.adaptiveViewHeader').html(viewString);
}
$axure.player.selectScaleOption = function (scaleVal) {
var $scale = $('.vpScaleOption[val="' + scaleVal + '"]');
if ($scale.length > 0) $scale.click();
}
function vpScaleOption_click(event) {
var scaleCheckDiv = $(this).find('.scaleRadioButton');
var scaleVal = $(this).attr('val');
if (scaleCheckDiv.hasClass('selectedRadioButton')) return false;
var $selectedScaleOption = $('.vpScaleOption[val="' + scaleVal + '"], .projectOptionsScaleRow[val="' + scaleVal + '"]');
var $allScaleOptions = $('.vpScaleOption, .projectOptionsScaleRow');
$allScaleOptions.find('.scaleRadioButton').removeClass('selectedRadioButton');
$allScaleOptions.find('.selectedRadioButtonFill').hide();
$selectedScaleOption.find('.scaleRadioButton').addClass('selectedRadioButton');
$selectedScaleOption.find('.selectedRadioButtonFill').show();
if (scaleVal == '0') {
$axure.player.deleteVarFromCurrentUrlHash(SCALE_VAR_NAME);
} else if (typeof scaleVal !== 'undefined') {
$axure.player.setVarInCurrentUrlHash(SCALE_VAR_NAME, scaleVal);
}
$axure.player.refreshViewPort();
}
function search_input_keyup(event) {
var searchVal = $(this).val().toLowerCase();
//If empty search field, show all nodes, else grey+hide all nodes and
//ungrey+unhide all matching nodes, as well as unhide their parent nodes
if(searchVal == '') {
$('.sitemapPageName').removeClass('sitemapGreyedName');
$('.sitemapNode').show();
} else {
$('.sitemapNode').hide();
$('.sitemapPageName').addClass('sitemapGreyedName').each(function() {
var nodeName = $(this).text().toLowerCase();
if(nodeName.indexOf(searchVal) != -1) {
$(this).removeClass('sitemapGreyedName').parents('.sitemapNode:first').show().parents('.sitemapExpandableNode').show();
}
});
}
}
function generateSitemap() {
var treeUl = "<div id='sitemapHeader'' class='sitemapHeader'>";
treeUl += "<div id='sitemapToolbar' class='sitemapToolbar'>";
treeUl += '<div id="searchDiv"><span id="searchIcon" class="sitemapToolbarButton"></span><input id="searchBox" type="text"/></div>';
treeUl += "<div class='leftArrow sitemapToolbarButton'></div>";
treeUl += "<div class='rightArrow sitemapToolbarButton'></div>";
treeUl += "</div>";
treeUl += "</div>";
///////////////////
var sitemapTitle = $axure.player.getProjectName();
if (!sitemapTitle) sitemapTitle = "Pages";
treeUl += "<div class='sitemapPluginNameHeader pluginNameHeader'>" + sitemapTitle + "</div>";
treeUl += "<div id='sitemapTreeContainer'>";
treeUl += "<ul class='sitemapTree' style='clear:both;'>";
var rootNodes = $axure.document.sitemap.rootNodes;
for(var i = 0; i < rootNodes.length; i++) {
treeUl += generateNode(rootNodes[i], 0);
}
treeUl += "</ul></div>";
if (!MOBILE_DEVICE) {
treeUl += "<div id='changePageInstructions' class='pageSwapInstructions'>Use ";
treeUl += '<span class="backKeys"></span>';
treeUl += " and ";
treeUl += '<span class="forwardKeys"></span>';
treeUl += " keys<br>to move between pages";
treeUl += "</div>";
}
$('#sitemapHost').html(treeUl);
}
function generateNode(node, level) {
var hasChildren = (node.children && node.children.length > 0);
var margin, returnVal;
if(hasChildren) {
margin = (9 + level * 17);
returnVal = "<li class='sitemapNode sitemapExpandableNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'><a class='sitemapPlusMinusLink'><span class='sitemapMinus'></span></a>";
} else {
margin = (19 + level * 17);
returnVal = "<li class='sitemapNode sitemapLeafNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'>";
}
var isFolder = node.type == "Folder";
if(!isFolder) {
returnVal += "<a class='sitemapPageLink' nodeUrl='" + node.url + "'>";
allNodeUrls.push(node.url);
}
returnVal += "<span class='sitemapPageIcon";
if(node.type == "Flow"){ returnVal += " sitemapFlowIcon";}
if(isFolder) { returnVal += " sitemapFolderIcon"; }
returnVal += "'></span><span class='sitemapPageName'>";
returnVal += $('<div/>').text(node.pageName).html();
returnVal += "</span>";
if(!isFolder) returnVal += "</a>";
returnVal += "</div></div>";
if(hasChildren) {
returnVal += "<ul>";
for(var i = 0; i < node.children.length; i++) {
var child = node.children[i];
returnVal += generateNode(child, level + 1);
}
returnVal += "</ul>";
}
returnVal += "</li>";
return returnVal;
}
})();

7
src_old/plugins/sitemap/styles/images/back_keys.svg
View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd">
<rect width="18" height="18" x="1" y="1" stroke="#E1E0E0" stroke-width="2" rx="4"/>
<rect width="19" height="19" x=".5" y=".5" stroke="#979797" rx="4"/>
<path fill="#666" d="M9 5V4L4.448 6.5v1L9 9.5v-1C6.733 7.513 5.567 7.013 5.5 7c.069-.017 1.235-.683 3.5-2zM5.292 14.262a.675.675 0 0 1 .195-.477.676.676 0 0 1 .225-.147.753.753 0 0 1 .288-.054c.12 0 .227.022.321.066a.641.641 0 0 1 .234.183.827.827 0 0 1 .141.27c.032.102.048.213.048.333 0 .18-.026.367-.078.561a2.996 2.996 0 0 1-.222.576 3.439 3.439 0 0 1-.84 1.053l-.18-.174a.222.222 0 0 1-.078-.168c0-.052.028-.106.084-.162.04-.044.091-.103.153-.177s.125-.159.189-.255.123-.202.177-.318c.054-.116.093-.24.117-.372h-.078a.709.709 0 0 1-.282-.054.647.647 0 0 1-.219-.153.698.698 0 0 1-.144-.234.834.834 0 0 1-.051-.297z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 940 B

14
src_old/plugins/sitemap/styles/images/closed_item.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>open item copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Tree-item" transform="translate(-6.000000, -9.000000)" fill="#8C8C8C">
<g id="closed-item" transform="translate(5.062500, 9.000000)">
<polygon id="Rectangle-13" transform="translate(3.500000, 4.000000) rotate(-90.000000) translate(-3.500000, -4.000000) " points="0 1.6 7 1.6 3.5 6.4"></polygon>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 820 B

15
src_old/plugins/sitemap/styles/images/flow.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13" height="13" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="flow" sketch:type="MSArtboardGroup">
<rect id="Rectangle-38" fill="#62666b" sketch:type="MSShapeGroup" x="1" y="10" width="3" height="3"/>
<rect id="Rectangle-38-Copy" fill="#62666b" sketch:type="MSShapeGroup" x="9" y="10" width="3" height="3"/>
<path d="M6.90806226,0.277785818 C8.60537484,1.36088413 12,3.52708074 12,3.52708074 L6.47274687,7 L1,3.52708074 L6.47274687,0 C6.47274687,0 6.76295713,0.185190545 6.90806226,0.277785818 Z" id="Shape" fill="#62666b" sketch:type="MSShapeGroup"/>
<path d="M7.33917705,2.07093789 C8.05945137,2.55245016 9.5,3.51547471 9.5,3.51547471 L6.48513465,5.5 L3.5,3.51547471 L6.48513465,1.5 C6.48513465,1.5 7.05449625,1.88062526 7.33917705,2.07093789 Z" id="Shape-Copy-3" fill="#ffffff" sketch:type="MSShapeGroup"/>
<path d="M2.45,9 L10.55,9 L11,9 L11,8 L10.55,8 L2.45,8 L2,8 L2,9 L2.45,9 L2.45,9 Z" id="Shape" fill="#62666b" sketch:type="MSShapeGroup"/>
<path d="M7,7.66666667 L7,6.33333333 L7,6 L6,6 L6,6.33333333 L6,7.66666667 L6,8 L7,8 L7,7.66666667 L7,7.66666667 Z" id="Shape" fill="#62666b" sketch:type="MSShapeGroup"/>
<path d="M3,10.6666667 L3,9.33333333 L3,9 L2,9 L2,9.33333333 L2,10.6666667 L2,11 L3,11 L3,10.6666667 L3,10.6666667 Z" id="Shape-Copy" fill="#62666b" sketch:type="MSShapeGroup"/>
<path d="M11,10.6666667 L11,9.33333333 L11,9 L10,9 L10,9.33333333 L10,10.6666667 L10,11 L11,11 L11,10.6666667 L11,10.6666667 Z" id="Shape-Copy-2" fill="#62666b" sketch:type="MSShapeGroup"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

6
src_old/plugins/sitemap/styles/images/folder_closed_blue.svg
View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<g fill="#138CDE" fill-rule="evenodd">
<path d="M2 4.061h11v8.485H2z"/>
<path d="M2 3h4.583v3.182H2z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 224 B

10
src_old/plugins/sitemap/styles/images/forward_keys.svg
View File

@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd">
<rect width="18" height="18" x="1" y="1" stroke="#E1E0E0" stroke-width="2" rx="4"/>
<rect width="19" height="19" x=".5" y=".5" stroke="#979797" rx="4"/>
<path fill="#666" d="M4.448 8.5v1L9 7V6L4.448 4v1c2.267.987 3.433 1.487 3.5 1.5-.069.017-1.235.683-3.5 2z"/>
<text fill="#666" font-family="Lato-Regular, Lato" font-size="12">
<tspan x="4.728" y="16">.</tspan>
</text>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 563 B

3
src_old/plugins/sitemap/styles/images/left_arrow.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="11" viewBox="0 0 6 11">
<path fill="#6D6D6D" fill-rule="evenodd" d="M5.5 11L0 5.5 5.5 0v2L2 5.5 5.5 9z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 175 B

12
src_old/plugins/sitemap/styles/images/open_item.svg
View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="10px" viewBox="0 0 9 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>open item</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="open-item" fill="#8C8C8C">
<polygon id="Rectangle-13" points="0 0 9 0 4.5 6"></polygon>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 577 B

6
src_old/plugins/sitemap/styles/images/page_lt_grey.svg
View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11">
<g fill="none" fill-rule="evenodd" stroke="#979797">
<path d="M.5.5h8v10h-8z"/>
<path stroke-linecap="square" d="M2.5 7.5h4M2.5 3.5h4M2.5 5.5h4"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 265 B

3
src_old/plugins/sitemap/styles/images/right_arrow.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="11" viewBox="0 0 6 11">
<path fill="#6D6D6D" fill-rule="evenodd" d="M.5 11L6 5.5.5 0v2L4 5.5.5 9z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 170 B

6
src_old/plugins/sitemap/styles/images/search_off.svg
View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
<g fill="none" fill-rule="evenodd" stroke="#018DCC" transform="translate(1 1)">
<path stroke-linecap="square" d="M6.5 6.5l2.791 2.865"/>
<circle cx="3.5" cy="3.5" r="3.5"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 293 B

6
src_old/plugins/sitemap/styles/images/search_on.svg
View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
<g fill="none" fill-rule="evenodd" stroke="#535353" transform="translate(1 1)">
<path stroke-linecap="square" d="M6.5 6.5l2.791 2.865"/>
<circle cx="3.5" cy="3.5" r="3.5"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 293 B

Some files were not shown because too many files have changed in this diff Show More