2024/11/14
This commit is contained in:
daddyhuu
parent
8f23b2b2ac
commit
10242e87fc
18
src/App.vue
18
src/App.vue
|
|
@ -3,7 +3,11 @@
|
||||||
|
|
||||||
<!-- 路由出口 -->
|
<!-- 路由出口 -->
|
||||||
<!-- 路由匹配组建将渲染到这里 -->
|
<!-- 路由匹配组建将渲染到这里 -->
|
||||||
<router-view> </router-view>
|
<!-- <router-view> </router-view>-->
|
||||||
|
<keep-alive exclude="test" include="">
|
||||||
|
<router-view />
|
||||||
|
</keep-alive>
|
||||||
|
<!-- <router-view v-if="!$route.meta.keepAlive" />-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -14,6 +18,12 @@
|
||||||
// import http from './utils/request'//导入接口？？
|
// import http from './utils/request'//导入接口？？
|
||||||
// import {getData} from './api'
|
// import {getData} from './api'
|
||||||
|
|
||||||
|
// import DevicePixelRatio from './libs/rem'
|
||||||
|
// export default{
|
||||||
|
// created(){
|
||||||
|
// new DevicePixelRatio().init()
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -29,7 +39,11 @@
|
||||||
background-color: rgba(2, 167, 240, 0.729411764705882);
|
background-color: rgba(2, 167, 240, 0.729411764705882);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.text{
|
||||||
|
color:rgba(2, 167, 240, 0.729411764705882);
|
||||||
|
cursor: pointer;
|
||||||
|
/* 将鼠标样式设为手型 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
BIN
src/assets/card.png
Normal file
BIN
src/assets/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 420 B After Width: | Height: | Size: 36 KiB |
BIN
src/assets/数据显示old.png
Normal file
BIN
src/assets/数据显示old.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
19
src/components/Children.vue
Normal file
19
src/components/Children.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
父组件传过来的消息是：{{myMsg}}
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Children",
|
||||||
|
components: {},
|
||||||
|
props:['msg'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
myMsg:this.msg
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,38 +1,44 @@
|
||||||
<!-- 侧导航栏 -->
|
<!-- 侧导航栏 -->
|
||||||
<template>
|
<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
|
<el-menu
|
||||||
default-active="1-4-1"
|
:default-active="$route.path"
|
||||||
class="el-menu-vertical-demo"
|
class="el-menu-vertical-demo"
|
||||||
@open="handleOpen"
|
:router="true"
|
||||||
@close="handleClose"
|
|
||||||
:collapse="isCollapse"
|
:collapse="isCollapse"
|
||||||
background-color="#000000"
|
background-color="#000000"
|
||||||
text-color="#fff"
|
text-color="#fff"
|
||||||
active-text-color="#ffd04b"
|
active-text-color="#ffd04b"
|
||||||
style="height:1200px">
|
style="height:1200px">
|
||||||
<!-- style="height:auto" -->
|
<!-- style="height:auto" -->
|
||||||
<!-- <img src="/image/Logo.png" width="100%" > -->
|
<!-- :default-active="$route.path"使得在没有点击左侧导航栏时，也能根据路由转变转化颜色 -->
|
||||||
<!-- <img src="/image/Logo.png" /> -->
|
|
||||||
<div style="display=flex;">
|
<div style="display=flex;">
|
||||||
<!-- <img src="../assets/Logo.png" width="12%" style="display:inline-block;padding-right: 3px;" align="absmiddle"> -->
|
<!-- <img src_old="../assets/Logo.png" width="12%" style="display:inline-block;padding-right: 3px;" align="absmiddle"> -->
|
||||||
<img src="../assets/数据显示.png" width="12%" style="display:inline-block;padding-left: 1px;padding-right: 5px;" align="absmiddle">
|
<img src="../assets/数据显示.png" width="20px" style="display:inline-block;padding-left: 1px;padding-right: 5px;" align="absmiddle">
|
||||||
<!-- align="absmiddle"让图像和文字一样高 -->
|
<!-- align="absmiddle"让图像和文字一样高 -->
|
||||||
<h3 style="display:inline-block;" @click = "bigscreen">资本市场系统性风险平台</h3>
|
<h3 style="display:inline-block;" @click = "bigscreen">{{ isCollapse ? '' : '资本市场系统性风险平台'}}</h3>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
</div>
|
</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.name' :index='item.name'>
|
<el-menu-item @click='clickMenu(item)' v-for="item in nochildren" :key='item.path' :index='item.path'>
|
||||||
<!-- : 是v-bind: -->
|
<!-- : 是v-bind: -->
|
||||||
<i :class="`el-icon-${item.icon}`"></i> <!-- 图标，官网可选 -->
|
<i :class="`el-icon-${item.icon}`"></i> <!-- 图标，官网可选 -->
|
||||||
<span slot="title">{{ item.label }}</span>
|
<span slot="title">{{ item.label }}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
|
||||||
<!-- 有子菜单 -->
|
<!-- 有子菜单 -->
|
||||||
<el-submenu v-for="item in hasChildren" :key='item.label' :index='item.label'><!-- index都是为了确保唯一性 -->
|
<el-submenu v-for="item in hasChildren" :key='item.path' :index='item.path'><!-- index都是为了确保唯一性 -->
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<i :class="`el-icon-${item.icon}`"></i>
|
<i :class="`el-icon-${item.icon}`"></i>
|
||||||
<span slot="title">{{ item.label }}</span>
|
<span slot="title">{{ item.label }}</span>
|
||||||
|
|
@ -40,27 +46,39 @@
|
||||||
<el-menu-item-group v-for='subItem in item.children' :key='subItem.path'>
|
<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 @click='clickMenu(subItem)' :index="subItem.path" style="padding-left: 70px;">{{subItem.label}}</el-menu-item>
|
||||||
</el-menu-item-group>
|
</el-menu-item-group>
|
||||||
|
|
||||||
</el-submenu>
|
</el-submenu>
|
||||||
|
|
||||||
|
|
||||||
</el-menu>
|
</el-menu>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isCollapse: false, //不折叠
|
// isCollapse:false,
|
||||||
menuData: [
|
menuData: [
|
||||||
|
// {
|
||||||
|
// path: "/",
|
||||||
|
// name: "home",
|
||||||
|
// label: "首页",
|
||||||
|
// icon: "s-home",
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/systematic_risk",//2-1
|
||||||
name: "home",
|
name: "systematic_risk",
|
||||||
label: "首页",
|
label: "系统性风险分析",
|
||||||
icon: "s-home",
|
icon: 's-marketing'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/market_entities",//1
|
path: "/market_entities",//1
|
||||||
|
|
@ -68,32 +86,29 @@ export default {
|
||||||
label: "市场主体分析",
|
label: "市场主体分析",
|
||||||
icon: "s-flag",
|
icon: "s-flag",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
//2
|
//2
|
||||||
label: "市场风险分析",
|
|
||||||
icon: "s-marketing",
|
|
||||||
|
|
||||||
children:[
|
|
||||||
{
|
|
||||||
path: "/systematic_risk",//2-1
|
|
||||||
name: "systematic_risk",
|
|
||||||
label: "系统性风险分析",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/individual_risk",//2-2
|
|
||||||
name: "individual_risk",
|
|
||||||
label: "个体风险分析",
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/influential_entities",//3
|
path: "/influential_entities",//3
|
||||||
name: "influential_entities",
|
name: "influential_entities",
|
||||||
label: "高影响主体分析",
|
label: "高影响主体分析",
|
||||||
icon: "star-off",
|
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
|
// path: "/warning",//4
|
||||||
label: "预警服务",
|
label: "预警服务",
|
||||||
|
|
@ -118,24 +133,6 @@ export default {
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/health",//5
|
|
||||||
name: "health",
|
|
||||||
label: "健康指数",
|
|
||||||
icon: "umbrella",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/pressure",//6
|
|
||||||
name: "pressure",
|
|
||||||
label: "压力测试",
|
|
||||||
icon: "s-help",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/quotation",//7
|
|
||||||
name: "quotation",
|
|
||||||
label: "行情分析",
|
|
||||||
icon: "s-data",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// path: "/event",//8
|
// path: "/event",//8
|
||||||
|
|
@ -153,24 +150,47 @@ export default {
|
||||||
label: "事件图谱",
|
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: {
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
bigscreen(){//点击标题跳转大屏
|
bigscreen(){//点击标题跳转大屏
|
||||||
this.$router.push('/bigscreen');
|
this.$router.push('/bigscreen');
|
||||||
},
|
},
|
||||||
handleOpen(key, keyPath) {
|
|
||||||
console.log(key, keyPath);
|
|
||||||
},
|
|
||||||
handleClose(key, keyPath) {
|
|
||||||
console.log(key, keyPath);
|
|
||||||
},
|
|
||||||
//点击菜单
|
//点击菜单
|
||||||
clickMenu(item){
|
clickMenu(item){
|
||||||
// 当页面的路由this.$route.path 与 跳转的路由item.path 不一致才允许跳转
|
// 当页面的路由this.$route.path 与 跳转的路由item.path 不一致才允许跳转
|
||||||
if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {//$route是当前路径的路由
|
if (this.$route.path !== item.path && !(this.$route.path === '/market_entities' && (item.path === '/'))) {//$route是当前路径的路由
|
||||||
this.$router.push(item.path)//$router是整个的router实例
|
this.$router.push(item.path)//$router是整个的router实例
|
||||||
}
|
}
|
||||||
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
|
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
|
||||||
|
|
@ -178,12 +198,17 @@ export default {
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
hasChildren() {//有子菜单才需要用
|
hasChildren() {//有子菜单才需要用
|
||||||
return this.menuData.filter((item) => item.children);
|
return this.menuData.filter((item) => item.children);
|
||||||
},
|
},
|
||||||
nochildren() {
|
nochildren() {
|
||||||
return this.menuData.filter((item) => !item.children);
|
return this.menuData.filter((item) => !item.children);
|
||||||
},
|
},
|
||||||
|
isCollapse(){
|
||||||
|
return this.$store.state.tab.isCollapse
|
||||||
|
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -240,4 +265,5 @@ export default {
|
||||||
color:#fff;
|
color:#fff;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
<el-tag v-for="(item,index) in tags"
|
<el-tag v-for="(item,index) in tags"
|
||||||
:key="item.path"
|
:key="item.path"
|
||||||
:closable="item.name!=='home'"
|
:closable="true"
|
||||||
:effect="$route.name === item.name ? 'dark' : 'plain'"
|
:effect="$route.name === item.name ? 'dark' : 'plain'"
|
||||||
@click="changeMenu(item)"
|
@click="changeMenu(item)"
|
||||||
@close="handledClose(item,index)"
|
@close="handledClose(item,index)"
|
||||||
|
|
@ -37,10 +37,10 @@
|
||||||
<div class="r-content">
|
<div class="r-content">
|
||||||
<!--练习的弹出框 -->
|
<!--练习的弹出框 -->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
title="提示"
|
title="修改个人信息"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
width="30%">
|
width="30%">
|
||||||
<span>这是一段信息</span>
|
<span></span>
|
||||||
<span slot="footer" class="dialog-footer">
|
<span slot="footer" class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||||
|
|
@ -51,18 +51,22 @@
|
||||||
<el-dropdown>
|
<el-dropdown>
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
<el-button icon=el-icon-s-custom circle> </el-button> <!--登录图表按钮-->
|
<el-button icon=el-icon-s-custom circle> </el-button> <!--登录图表按钮-->
|
||||||
<span class="text">用户信息</span>
|
<span class="text">请登录</span>
|
||||||
<i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
|
<i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item>
|
<!-- <el-dropdown-item>-->
|
||||||
<!-- 点击后改变弹出框生效情况 -->
|
<!-- <!– 点击后改变弹出框生效情况 –>-->
|
||||||
<el-button type="text" @click="dialogVisible = true">注册</el-button>
|
<!-- <el-button style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
|
||||||
</el-dropdown-item>
|
<!-- </el-dropdown-item>-->
|
||||||
|
|
||||||
|
<!-- <el-dropdown-item>-->
|
||||||
|
<!-- <el-button style='width: 150px;' @click = "logout">登出</el-button>-->
|
||||||
|
<!-- </el-dropdown-item>-->
|
||||||
|
|
||||||
<el-dropdown-item>
|
<el-dropdown-item>
|
||||||
<el-button type="text" @click="dialogVisible = true">登录</el-button>
|
<el-button style='width: 150px;' @click="login">登录</el-button>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
|
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
|
|
@ -75,6 +79,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState,mapMutations} from 'vuex'
|
import {mapState,mapMutations} from 'vuex'
|
||||||
|
import http from "@/utils/request";
|
||||||
export default {
|
export default {
|
||||||
name: "CommonTag",
|
name: "CommonTag",
|
||||||
data(){
|
data(){
|
||||||
|
|
@ -87,8 +92,16 @@ import {mapState,mapMutations} from 'vuex'
|
||||||
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
|
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
|
||||||
tags: state => state.tab.tabsList
|
tags: state => state.tab.tabsList
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
login(){
|
||||||
|
this.$router.push('/login')
|
||||||
|
},
|
||||||
|
logout(){
|
||||||
|
this.$store.commit('logout')
|
||||||
|
},
|
||||||
|
|
||||||
//调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
|
//调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
|
||||||
...mapMutations(['closeTag']),
|
...mapMutations(['closeTag']),
|
||||||
//点击tag跳转的功能
|
//点击tag跳转的功能
|
||||||
|
|
@ -103,12 +116,48 @@ import {mapState,mapMutations} from 'vuex'
|
||||||
// this.$store.commit('closeTag')
|
// this.$store.commit('closeTag')
|
||||||
// 方法2,调用store中的Mutations
|
// 方法2,调用store中的Mutations
|
||||||
this.closeTag(item)
|
this.closeTag(item)
|
||||||
const length=this.tags.length-1
|
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');
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
227
src/components/CommonHeaderAdmin.vue
Normal file
227
src/components/CommonHeaderAdmin.vue
Normal file
|
|
@ -0,0 +1,227 @@
|
||||||
|
<!-- 上导航栏 -->
|
||||||
|
<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>-->
|
||||||
|
<!-- <!– 点击后改变弹出框生效情况 –>-->
|
||||||
|
<!-- <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/components/CommonHeaderUser.vue
Normal file
225
src/components/CommonHeaderUser.vue
Normal file
|
|
@ -0,0 +1,225 @@
|
||||||
|
<!-- 上导航栏 -->
|
||||||
|
<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>-->
|
||||||
|
<!-- <!– 点击后改变弹出框生效情况 –>-->
|
||||||
|
<!-- <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>
|
||||||
13
src/components/EmphasizedText.vue
Normal file
13
src/components/EmphasizedText.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
$END$
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "EmphasizedText"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
189
src/components/QiPao.vue
Normal file
189
src/components/QiPao.vue
Normal file
|
|
@ -0,0 +1,189 @@
|
||||||
|
<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>
|
||||||
315
src/components/dimensionComponent.vue
Normal file
315
src/components/dimensionComponent.vue
Normal file
|
|
@ -0,0 +1,315 @@
|
||||||
|
<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/components/echarts/AreaChart.vue
Normal file
124
src/components/echarts/AreaChart.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<!-- 直方图和折线图的结合图 -->
|
||||||
|
<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/components/echarts/DifferentialChart.vue
Normal file
104
src/components/echarts/DifferentialChart.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
<!-- 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/components/echarts/DynamicLine.vue
Normal file
155
src/components/echarts/DynamicLine.vue
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
<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>
|
||||||
|
|
@ -1,13 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 半圆饼图-Half Doughnut Chart -->
|
<!-- 半圆饼图-Half Doughnut Chart -->
|
||||||
<div id="banyuan" style="width: 800px; height: 400px;padding-left:250px"></div>
|
<!-- 用于预警服务-异常检测的三个数据 -->
|
||||||
|
<div ref="echarts" style="width: 800px; height: 400px;padding-left:250px"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
export default {
|
export default {
|
||||||
mounted() {
|
props:{myHalfData:{
|
||||||
var myChart = echarts.init(document.getElementById("banyuan"));
|
type:Array,
|
||||||
|
|
||||||
|
}},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
myData:this.myHalfData
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch:{
|
||||||
|
myHalfData(){
|
||||||
|
this.initCharts()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
initCharts(){
|
||||||
|
var myChart = echarts.init(this.$refs.echarts)
|
||||||
var option = {
|
var option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
|
|
@ -46,32 +64,32 @@ export default {
|
||||||
return param.name + " (" + param.percent * 2 + "%)";
|
return param.name + " (" + param.percent * 2 + "%)";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: [
|
// data: [
|
||||||
{ value: 300, name: "股价波动异常" },
|
// { value: 300, name: "股价波动异常" },
|
||||||
{ value: 350, name: "高频交易" },
|
// { value: 350, name: "高频交易" },
|
||||||
{ value: 200, name: "资产泡沫" },
|
// { value: 200, name: "资产泡沫" },
|
||||||
{ value: 120, name: "事件风险波及" },
|
// { value: 120, name: "事件风险波及" },
|
||||||
{ value: 110, name: "风险事件时长" },
|
// { value: 110, name: "风险事件时长" },
|
||||||
{ value: 280, name: "事件热度异常" },
|
// { value: 280, name: "事件热度异常" },
|
||||||
{
|
// {
|
||||||
// make an record to fill the bottom 50%
|
// // make an record to fill the bottom 50%
|
||||||
value: 300+350+200+120+110+280,
|
// value: 300+350+200+120+110+280,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
// stop the chart from rendering this piece
|
// color: "none",
|
||||||
color: "none",
|
// },
|
||||||
decal: {
|
// },
|
||||||
symbol: "none",
|
// ],
|
||||||
},
|
data: this.myHalfData
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.initCharts()
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
130
src/components/echarts/Histogram.vue
Normal file
130
src/components/echarts/Histogram.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<!-- 直方图和折线图的结合图 -->
|
||||||
|
<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>
|
||||||
208
src/components/halfYear.vue
Normal file
208
src/components/halfYear.vue
Normal file
|
|
@ -0,0 +1,208 @@
|
||||||
|
<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>
|
||||||
|
|
||||||
265
src/components/old.vue
Normal file
265
src/components/old.vue
Normal file
|
|
@ -0,0 +1,265 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div ref="whole risk" style="width: 1200px; height: 350px;margin-left: 0px;margin-top: 0px;"></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 {
|
||||||
|
prevDayRisk:'',
|
||||||
|
yesterdayRisk:'',
|
||||||
|
todayRisk:'',
|
||||||
|
tomorrowRisk:'',
|
||||||
|
warningRisk:'',
|
||||||
|
riskData:[],
|
||||||
|
markLine: [],
|
||||||
|
markPoint: [],
|
||||||
|
markArea:[],
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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]
|
||||||
|
// 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
|
||||||
|
var myChart = echarts.init(this.$refs["whole risk"])
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: '系统性风险指数',
|
||||||
|
left:'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
|
||||||
|
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',
|
||||||
|
lineStyle:{
|
||||||
|
color:'black'
|
||||||
|
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
yAxis: this.markLine[0]
|
||||||
|
}, {
|
||||||
|
yAxis:this.markLine[1]
|
||||||
|
},
|
||||||
|
|
||||||
|
// {
|
||||||
|
// yAxis: 200
|
||||||
|
// }, {
|
||||||
|
// yAxis: 300
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
markArea:{
|
||||||
|
label: { // 分界线上的文字标签
|
||||||
|
position: 'end',
|
||||||
|
formatter: '预测值'
|
||||||
|
},
|
||||||
|
data:[[{
|
||||||
|
xAxis:'Tue'},
|
||||||
|
{
|
||||||
|
xAxis:'Thu'},
|
||||||
|
]]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
.chart-div {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -46,7 +46,8 @@
|
||||||
v-model="text"
|
v-model="text"
|
||||||
:size="size"
|
:size="size"
|
||||||
:readonly="!canEdit"
|
:readonly="!canEdit"
|
||||||
:disabled="disabled">
|
:disabled="disabled"
|
||||||
|
size="mini">
|
||||||
<i slot="prefix" class="el-input__icon el-icon-date"></i>
|
<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>
|
<i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
|
||||||
</el-input>
|
</el-input>
|
||||||
|
|
@ -388,6 +389,8 @@ export default {
|
||||||
<style>
|
<style>
|
||||||
.el-quarter-picker {
|
.el-quarter-picker {
|
||||||
width: 220px;
|
width: 220px;
|
||||||
|
/* display:flex; */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<!--目前数据没有详细到市区，所以两点改动：1 chinaMapHidden注释掉了点击事件，2 echarts里的数据切换改为接口固定数据-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="echartsGroup">
|
<div class="echartsGroup">
|
||||||
|
|
@ -14,6 +15,9 @@ import * as echarts from "echarts"
|
||||||
import 'echarts/map/js/china.js' // 核心文件
|
import 'echarts/map/js/china.js' // 核心文件
|
||||||
// require('echarts/theme/macarons')
|
// require('echarts/theme/macarons')
|
||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
newMapData:[]
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
mapData: [//自己做的模拟数据 后续根据业务展示
|
mapData: [//自己做的模拟数据 后续根据业务展示
|
||||||
|
|
@ -32,7 +36,6 @@ export default {
|
||||||
{name: '陕西',value:12},
|
{name: '陕西',value:12},
|
||||||
{name: '辽宁',value:88},
|
{name: '辽宁',value:88},
|
||||||
{name: '云南',value:23},
|
{name: '云南',value:23},
|
||||||
|
|
||||||
],
|
],
|
||||||
provData:[
|
provData:[
|
||||||
{name:'深圳市',value:99},
|
{name:'深圳市',value:99},
|
||||||
|
|
@ -82,6 +85,12 @@ export default {
|
||||||
options:null, //echarts 存数据
|
options:null, //echarts 存数据
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch:{
|
||||||
|
newMapData(newValue){
|
||||||
|
console.log(1)
|
||||||
|
this.chinaMaprsult('china',newValue)
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.clickRoute= this.clickRoute;
|
window.clickRoute= this.clickRoute;
|
||||||
|
|
||||||
|
|
@ -95,24 +104,24 @@ export default {
|
||||||
// 中国地图点击省份 显示当前省份的详细的地区。
|
// 中国地图点击省份 显示当前省份的详细的地区。
|
||||||
chinaMapHidden(chinaMap) {//（调用）
|
chinaMapHidden(chinaMap) {//（调用）
|
||||||
console.log("chinaMapHidden调用成功")
|
console.log("chinaMapHidden调用成功")
|
||||||
let that = this
|
// let that = this
|
||||||
chinaMap.off('click')//这里解决多次触发点击事件 但是还会执行2次 引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
|
// chinaMap.off('click')//这里解决多次触发点击事件 但是还会执行2次 引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
|
||||||
chinaMap.on('click',async function(params){
|
// chinaMap.on('click',async function(params){
|
||||||
if (params.name in that.provinces) {
|
// if (params.name in that.provinces) {
|
||||||
var tmp=that.provinces[params.name]
|
// var tmp=that.provinces[params.name]
|
||||||
let s = await import('echarts/map/js/province/'+tmp+'.js')
|
// let s = await import('echarts/map/js/province/'+tmp+'.js')
|
||||||
console.log(s)
|
// console.log(s)
|
||||||
if (s){
|
// if (s){
|
||||||
// chinaMap.clear
|
// // chinaMap.clear
|
||||||
let tmpData=[
|
// let tmpData=[
|
||||||
{name:'深圳市',value:99},
|
// {name:'深圳市',value:99},
|
||||||
{name:'深圳市',value:1005},
|
// {name:'深圳市',value:1005},
|
||||||
{name:'佛山市',value: 55564}
|
// {name:'佛山市',value: 55564}
|
||||||
]
|
// ]
|
||||||
that.chinaMaprsult(params.name,tmpData)
|
// that.chinaMaprsult(params.name,tmpData)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
},
|
},
|
||||||
// 渲染地图
|
// 渲染地图
|
||||||
chinaMaprsult(name=null,tmpData){
|
chinaMaprsult(name=null,tmpData){
|
||||||
|
|
@ -140,13 +149,13 @@ export default {
|
||||||
realtime: false,
|
realtime: false,
|
||||||
calculable: true,
|
calculable: true,
|
||||||
inRange: {
|
inRange: {
|
||||||
color: [ 'lightyellow', 'red']
|
color: [ 'lightgreen', 'yellow']
|
||||||
}},
|
}},
|
||||||
tooltip: { // 鼠标移到图里面的浮动提示框
|
tooltip: { // 鼠标移到图里面的浮动提示框
|
||||||
trigger: 'item', //数据项图形触发
|
trigger: 'item', //数据项图形触发
|
||||||
// triggerOn: 'click', //这里根据业务需要给点击事件做跳转,所以不能做悬浮了,如果做悬浮 点击不了文字跳转
|
// triggerOn: 'click', //这里根据业务需要给点击事件做跳转,所以不能做悬浮了,如果做悬浮 点击不了文字跳转
|
||||||
formatter:
|
formatter:
|
||||||
'产业数量: {c0}<br />'
|
'风险数量: {c0}<br />'
|
||||||
// function(params){
|
// function(params){
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
// let dat=params.data
|
// let dat=params.data
|
||||||
|
|
@ -217,7 +226,9 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
dataset:{
|
dataset:{
|
||||||
source: name=='china'?this.mapData:tmpData
|
//老的逻辑，为了根据点击切换市区数据
|
||||||
|
// source: name==='china'?this.mapData:tmpData
|
||||||
|
source:tmpData
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
152
src/components/riskIndexComponent.vue
Normal file
152
src/components/riskIndexComponent.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
<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/components/systemRiskComponent.vue
Normal file
389
src/components/systemRiskComponent.vue
Normal file
|
|
@ -0,0 +1,389 @@
|
||||||
|
<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/components/systemRiskFuture.vue
Normal file
112
src/components/systemRiskFuture.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
<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>
|
||||||
58
src/libs/rem.js
Normal file
58
src/libs/rem.js
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
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;
|
||||||
|
|
@ -18,7 +18,7 @@ Vue.use(ElementUI);//全局引入
|
||||||
// 5以上的echarts不用引入，4要引入
|
// 5以上的echarts不用引入，4要引入
|
||||||
// import * as echarts from 'echarts'
|
// import * as echarts from 'echarts'
|
||||||
|
|
||||||
import echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
Vue.prototype.$echarts = echarts;
|
Vue.prototype.$echarts = echarts;
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1970,7 +1970,7 @@
|
||||||
img = evaluatedImgs.mouseOver;
|
img = evaluatedImgs.mouseOver;
|
||||||
}
|
}
|
||||||
|
|
||||||
// $('#' + $ax.repeater.applySuffixToElementId(elementId, '_img')).attr('src', img);
|
// $('#' + $ax.repeater.applySuffixToElementId(elementId, '_img')).attr('src_old', img);
|
||||||
$jobj($ax.GetImageIdFromShape(elementId)).attr('src', img);
|
$jobj($ax.GetImageIdFromShape(elementId)).attr('src', img);
|
||||||
|
|
||||||
//Set up overrides
|
//Set up overrides
|
||||||
|
|
|
||||||
|
|
@ -105,7 +105,7 @@ $axure.internal(function($ax) {
|
||||||
var getSmallPolygon = function(r0, r1, info) {
|
var getSmallPolygon = function(r0, r1, info) {
|
||||||
var points = [];
|
var points = [];
|
||||||
|
|
||||||
// NOTE: currently I make the assumption that if horizontal/vertical connecting lines from the src hit the target
|
// NOTE: currently I make the assumption that if horizontal/vertical connecting lines from the src_old hit the target
|
||||||
// Meaning if horizontal, rlr and lrl are true, and if vertical, tbt and bab are true.
|
// Meaning if horizontal, rlr and lrl are true, and if vertical, tbt and bab are true.
|
||||||
|
|
||||||
var r0Left = r0.Left();
|
var r0Left = r0.Left();
|
||||||
|
|
|
||||||
|
|
@ -227,7 +227,7 @@
|
||||||
// var imageInfo = viewId ? $ax.pageData.viewIdToBackgroundImageInfo && $ax.pageData.viewIdToBackgroundImageInfo[viewId] : $ax.pageData.defaultBackgroundImageInfo;
|
// var imageInfo = viewId ? $ax.pageData.viewIdToBackgroundImageInfo && $ax.pageData.viewIdToBackgroundImageInfo[viewId] : $ax.pageData.defaultBackgroundImageInfo;
|
||||||
// if(imageInfo && imageInfo.path) {
|
// if(imageInfo && imageInfo.path) {
|
||||||
// if($('#bg_img').length == 0) $('body').append('<img id="bg_img"/>');
|
// if($('#bg_img').length == 0) $('body').append('<img id="bg_img"/>');
|
||||||
// $('#bg_img').attr('src', imageInfo.path).css('position', 'fixed').css('z-index', '-10000');
|
// $('#bg_img').attr('src_old', imageInfo.path).css('position', 'fixed').css('z-index', '-10000');
|
||||||
// _resizeIEBackground();
|
// _resizeIEBackground();
|
||||||
// } else $('#bg_img').remove();
|
// } else $('#bg_img').remove();
|
||||||
// };
|
// };
|
||||||
|
|
@ -281,7 +281,7 @@
|
||||||
// var _fixAllPngs = function() {
|
// var _fixAllPngs = function() {
|
||||||
// if(!(/MSIE ((5\.5)|6)/.test(window.navigator.userAgent) && window.navigator.platform == "Win32")) return;
|
// if(!(/MSIE ((5\.5)|6)/.test(window.navigator.userAgent) && window.navigator.platform == "Win32")) return;
|
||||||
|
|
||||||
// $('img[src$=".png"]').each(function() {
|
// $('img[src_old$=".png"]').each(function() {
|
||||||
// if(!this.complete) {
|
// if(!this.complete) {
|
||||||
// this.onload = function() { $axure.utils.fixPng(this); };
|
// this.onload = function() { $axure.utils.fixPng(this); };
|
||||||
// } else {
|
// } else {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
$ax.move = _move;
|
$ax.move = _move;
|
||||||
|
|
||||||
var widgetMoveInfo = {};
|
var widgetMoveInfo = {};
|
||||||
//register and return move info, also create container for rootlayer if needed
|
//user and return move info, also create container for rootlayer if needed
|
||||||
$ax.move.PrepareForMove = function (id, x, y, to, options, jobj, rootLayer, skipContainerForRootLayer) {
|
$ax.move.PrepareForMove = function (id, x, y, to, options, jobj, rootLayer, skipContainerForRootLayer) {
|
||||||
var fixedInfo = jobj ? {} : $ax.dynamicPanelManager.getFixedInfo(id);
|
var fixedInfo = jobj ? {} : $ax.dynamicPanelManager.getFixedInfo(id);
|
||||||
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
//todo currently this always save the info, which is not needed for compound vector children and maybe some other cases
|
//todo currently this always save the info, which is not needed for compound vector children and maybe some other cases
|
||||||
//let's optimize it later, only register if registerid is valid..
|
//let's optimize it later, only user if registerid is valid..
|
||||||
widgetMoveInfo[id] = {
|
widgetMoveInfo[id] = {
|
||||||
x: leftChanges === undefined ? horzX : leftChanges,
|
x: leftChanges === undefined ? horzX : leftChanges,
|
||||||
y: topChanges === undefined ? vertY : topChanges,
|
y: topChanges === undefined ? vertY : topChanges,
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
var object = $obj(id);
|
var object = $obj(id);
|
||||||
if(object && $ax.public.fn.IsLayer(object.type)) {
|
if(object && $ax.public.fn.IsLayer(object.type)) {
|
||||||
var childrenIds = $ax.public.fn.getLayerChildrenDeep(id, true);
|
var childrenIds = $ax.public.fn.getLayerChildrenDeep(id, true);
|
||||||
//don't push container when register moveinfo for child
|
//don't push container when user moveinfo for child
|
||||||
if(!skipOnMoveEvent) {
|
if(!skipOnMoveEvent) {
|
||||||
for(var i = 0; i < childrenIds.length; i++) $ax.move.PrepareForMove(childrenIds[i], x, y, to, options, null, moveInfo.rootLayer, true);
|
for(var i = 0; i < childrenIds.length; i++) $ax.move.PrepareForMove(childrenIds[i], x, y, to, options, null, moveInfo.rootLayer, true);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ const GLOBAL_VAR_CHECKSUM = 'CSUM';
|
||||||
};
|
};
|
||||||
|
|
||||||
$axure.utils.loadJS = function(url) {
|
$axure.utils.loadJS = function(url) {
|
||||||
$('head').append('<script text="text/javascript" language="JavaScript" src="' + url + '"></script>');
|
$('head').append('<script text="text/javascript" language="JavaScript" src_old="' + url + '"></script>');
|
||||||
};
|
};
|
||||||
|
|
||||||
$axure.utils.curry = function(fn) {
|
$axure.utils.curry = function(fn) {
|
||||||
|
|
|
||||||
|
|
@ -1055,10 +1055,10 @@ var toolBarOnly = true;
|
||||||
// // $('#interfaceControlFrameContainer').css('margin-left', '-' + $('#logoImage').width() / 2 + 'px');
|
// // $('#interfaceControlFrameContainer').css('margin-left', '-' + $('#logoImage').width() / 2 + 'px');
|
||||||
// // //$axure.player.resizeContent();
|
// // //$axure.player.resizeContent();
|
||||||
// //};
|
// //};
|
||||||
// image.src = $axure.document.configuration.logoImagePath;
|
// image.src_old = $axure.document.configuration.logoImagePath;
|
||||||
|
|
||||||
// $('#interfaceControlFrameLogoImageContainer').html('<img id="logoImage" src="" />');
|
// $('#interfaceControlFrameLogoImageContainer').html('<img id="logoImage" src_old="" />');
|
||||||
// $('#logoImage').attr('src', $axure.document.configuration.logoImagePath);//.on('load', function () { $axure.player.resizeContent(); });
|
// $('#logoImage').attr('src_old', $axure.document.configuration.logoImagePath);//.on('load', function () { $axure.player.resizeContent(); });
|
||||||
//} else $('#interfaceControlFrameLogoImageContainer').hide();
|
//} else $('#interfaceControlFrameLogoImageContainer').hide();
|
||||||
|
|
||||||
//if ($axure.document.configuration.logoImageCaption) {
|
//if ($axure.document.configuration.logoImageCaption) {
|
||||||
|
|
@ -1486,7 +1486,7 @@ var toolBarOnly = true;
|
||||||
/******* DEBUG: Allows for debugging/viewing feedback9.js in browser inspect mode ******/
|
/******* DEBUG: Allows for debugging/viewing feedback9.js in browser inspect mode ******/
|
||||||
//var hdr = document.createElement('script');
|
//var hdr = document.createElement('script');
|
||||||
//hdr.type = "text/javascript"
|
//hdr.type = "text/javascript"
|
||||||
//hdr.src = '/Scripts/plugins/feedback/feedback9.js';
|
//hdr.src_old = '/Scripts/plugins/feedback/feedback9.js';
|
||||||
//document.head.appendChild(hdr);
|
//document.head.appendChild(hdr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,25 +8,31 @@ import VueRouter from 'vue-router'
|
||||||
|
|
||||||
import Main from '../views/Main.vue'
|
import Main from '../views/Main.vue'
|
||||||
import Home from '../views/Home.vue'
|
import Home from '../views/Home.vue'
|
||||||
import register from '@/register/index'
|
import register from '@/user/register'
|
||||||
import login2 from '@/views/login'
|
import test from "@/views/test";
|
||||||
import 市场主体分析 from '../views/市场主体分析.vue'
|
import 市场主体分析 from '../views/市场主体分析.vue'
|
||||||
import 系统性风险分析 from '../views/系统性风险分析.vue'
|
import 系统性风险分析 from '../views/系统性风险分析.vue'
|
||||||
|
import systemRiskV2 from "@/components/systemRiskComponent";
|
||||||
import 个体风险分析 from '../views/个体风险分析.vue'
|
import 个体风险分析 from '../views/个体风险分析.vue'
|
||||||
import login from "@/views/index";
|
import login from "@/user/login";
|
||||||
import 高影响力主体分析 from '../views/高影响力主体分析.vue'
|
import 高影响力主体分析 from '../views/高影响力主体分析.vue'
|
||||||
import 预警服务 from '../views/预警服务.vue'
|
import 预警服务 from '../views/预警服务.vue'
|
||||||
import 风险预警 from '../views/风险预警.vue'
|
import 风险预警 from '../views/风险预警.vue'
|
||||||
import 异常检测 from '../views/异常检测.vue'
|
import 异常检测 from '../views/异常检测.vue'
|
||||||
|
import warn from '@/views/404'
|
||||||
import 健康指数 from '../views/健康指数.vue'
|
import 健康指数 from '../views/健康指数.vue'
|
||||||
import 压力测试 from '../views/压力测试.vue'
|
import 压力测试 from '../views/压力测试.vue'
|
||||||
import 行情分析 from '../views/行情分析.vue'
|
import 行情分析 from '../views/行情分析.vue'
|
||||||
import 事件分析 from '../views/事件分析.vue'
|
import 事件分析 from '../views/事件分析.vue'
|
||||||
import 事件图谱 from '../views/事件图谱.vue'
|
import 事件图谱 from '../views/事件图谱.vue'
|
||||||
import graphViewV4 from "@/views/graphViewV4";
|
import graphViewV4 from "@/views/graphViewV4";
|
||||||
|
import 风险传导 from "@/views/风险传导"
|
||||||
import 大屏 from '../bigscreen/大屏.vue'
|
import 大屏 from '../bigscreen/大屏.vue'
|
||||||
import user from "@/store/user";
|
import UserManagement from '../views/UserManagement.vue'
|
||||||
|
|
||||||
|
import SSE from "@/views/SSE";
|
||||||
|
// import tab from "@/store/tab";
|
||||||
|
|
||||||
|
|
||||||
// 解决重复点击页面报NavigationDuplicated: Avoided redundant navigation to current locat
|
// 解决重复点击页面报NavigationDuplicated: Avoided redundant navigation to current locat
|
||||||
const originalPush = VueRouter.prototype.push
|
const originalPush = VueRouter.prototype.push
|
||||||
|
|
@ -51,49 +57,105 @@ const routes = [
|
||||||
|
|
||||||
{ path:'/',
|
{ path:'/',
|
||||||
component:Main,
|
component:Main,
|
||||||
redirect:'home',//当地址是/时就重定向到home
|
redirect:'systematic_risk',//当地址是/时就重定向到market_entities
|
||||||
// meta : { //加一个自定义obj
|
meta : { //加一个自定义obj
|
||||||
// requireAuth:true //这个参数 true 代表需要登录才能进入A
|
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||||
// },
|
},
|
||||||
children:[
|
children:[
|
||||||
//子路由
|
//子路由
|
||||||
{path:'/home', name:'home',component:Home},//首页
|
{path:'/home', name:'home',component:Home},//首页
|
||||||
{path:'/market_entities',name:'market_entities',component:市场主体分析,
|
{path:'/market_entities',name:'market_entities',component:市场主体分析,
|
||||||
// meta : { //加一个自定义obj
|
meta : { //加一个自定义obj
|
||||||
// requireAuth:true //这个参数 true 代表需要登录才能进入A
|
keepAlive:true,
|
||||||
// }
|
requireAuth:true
|
||||||
|
}
|
||||||
},//1
|
},//1
|
||||||
{path:'/systematic_risk',name:'systematic_risk', component:系统性风险分析},//2-1
|
{path:'/systematic_risk',name:'systematic_risk', component:系统性风险分析, meta : { //加一个自定义obj
|
||||||
{path:'/individual_risk',name:'individual_risk', component:个体风险分析},//2-2
|
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||||
|
},},//2-1
|
||||||
|
|
||||||
{path:'/influential_entities', name:'influential_entities', component:高影响力主体分析},//3
|
// {path:'/systemriskV2',name:'systemriskV2', component:systemRiskV2, meta : { //加一个自定义obj
|
||||||
|
// requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||||
|
// },},//2-1
|
||||||
|
|
||||||
{path:'/warning', name:'warning', component:预警服务},//4-1
|
{path:'/individual_risk',name:'individual_risk', component:个体风险分析, meta : { //加一个自定义obj
|
||||||
{path:'/risk_warning', name:'risk_warning', component:风险预警},//4-1
|
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||||
{path:'/abnormal_detection', name:'abnormal_detection', component:异常检测},//4-2
|
},},//2-2
|
||||||
{path:'/health', name:'health', component:健康指数},//5
|
|
||||||
|
{path:'/influential_entities', name:'influential_entities', component:高影响力主体分析, meta : { //加一个自定义obj
|
||||||
|
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||||
|
},},//3
|
||||||
|
|
||||||
|
{path:'/warning', name:'warning', component:预警服务,
|
||||||
|
meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},//4-1
|
||||||
|
|
||||||
|
{path:'/risk_warning', name:'risk_warning', component:风险预警,
|
||||||
|
meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},//4-1
|
||||||
|
{path:'/abnormal_detection', name:'abnormal_detection', component:异常检测,
|
||||||
|
meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},//4-2
|
||||||
|
{path:'/health', name:'health', component:健康指数, meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},//5
|
||||||
|
{path:'/diffus', name:'diffus', props: true, // 启用路由参数作为组件属性传递
|
||||||
|
component:风险传导, meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},
|
||||||
{path:'/pressure', name:'pressure', component:压力测试, meta : { //加一个自定义obj
|
{path:'/pressure', name:'pressure', component:压力测试, meta : { //加一个自定义obj
|
||||||
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
requireAuth:true //这个参数 true 代表需要登录才能进入A
|
||||||
}},//6
|
}},//6
|
||||||
{path:'/quotation', name:'quotation', component:行情分析},//7
|
{path:'/quotation', name:'quotation', component:行情分析, meta : { //加一个自定义obj
|
||||||
{path:'/event_analysis', name:'event_analysis', component:事件分析},//8-1
|
keepAlive:true,
|
||||||
{path:'/event_graph', name:'event_graph', component:事件图谱},//8-2
|
requireAuth:true
|
||||||
{path:'/knowladgeGraph', name:'knowladgeGraph', component:graphViewV4},
|
}},//7
|
||||||
|
{path:'/event_analysis', name:'event_analysis', component:事件分析,
|
||||||
|
meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},//8-1
|
||||||
|
{path:'/event_graph', name:'event_graph', component:事件图谱,
|
||||||
|
meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},//8-2
|
||||||
|
{path:'/knowladgeGraph', name:'knowladgeGraph', component:graphViewV4,meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},
|
||||||
|
|
||||||
|
// 用户管理
|
||||||
|
{path:'/UserManagement',name :'UserManagement',component: UserManagement, meta : { //加一个自定义obj
|
||||||
|
keepAlive:true,
|
||||||
|
requireAuth:true
|
||||||
|
}},
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
// 登录
|
||||||
{path:'/login',name :'login',component: login},
|
{path:'/login',name :'login',component: login},
|
||||||
// {path:'/login2',name :'login2',component: login2},
|
// {path:'/login2',name :'login2',component: login2},
|
||||||
|
|
||||||
|
// 注册
|
||||||
{path:'/register',name :'register',component: register},
|
{path:'/register',name :'register',component: register},
|
||||||
|
|
||||||
|
|
||||||
//大屏
|
//大屏
|
||||||
{
|
{path:'/bigscreen',name :'bigscreen',component: 大屏,},
|
||||||
path:'/bigscreen',
|
{path:'/test',name :'test',component: test,},
|
||||||
component: 大屏,
|
{path:'/sse',name :'sse',component: SSE,},
|
||||||
}
|
{path:'/systemrisk',name :'systemrisk',component: systemRiskV2,}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -109,9 +171,17 @@ export const isLogin=false;
|
||||||
|
|
||||||
//路由守卫
|
//路由守卫
|
||||||
router.beforeEach(async(to,from,next) => {
|
router.beforeEach(async(to,from,next) => {
|
||||||
console.log(to.name)
|
const allowedRoutes = ['/systematic_risk', '/market_entities','/individual_risk','/influential_entities'
|
||||||
|
,'/warning','/risk_warning','/abnormal_detection','/health','/diffus','/pressure','/quotation','/event_analysis',
|
||||||
|
'/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/test','/sse','/systemrisk'];
|
||||||
|
const name=sessionStorage.getItem('user')
|
||||||
|
// if (allowedRoutes.includes(to.path)) {
|
||||||
|
// next();
|
||||||
|
// } else {
|
||||||
|
// next('/'); // 重定向到首页或其他允许的路由
|
||||||
|
// }
|
||||||
if (to.meta.requireAuth){//需要认证
|
if (to.meta.requireAuth){//需要认证
|
||||||
if (user.state.isLogin || !user.state.isLogin && (to.name==='/register' || to.name==='/login')){
|
if (name || !name && (to.name==='/user' || to.name==='/login')){
|
||||||
next()
|
next()
|
||||||
}else {
|
}else {
|
||||||
next('/login')
|
next('/login')
|
||||||
|
|
@ -125,49 +195,4 @@ router.beforeEach(async(to,from,next) => {
|
||||||
next()
|
next()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// //next() :是否通过
|
|
||||||
// // 参数 ：无 通过
|
|
||||||
// // false 不通过
|
|
||||||
// // 具体地址 跳转到指定的地址
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// /*
|
|
||||||
// 验证登录
|
|
||||||
// 有些路由是需要登录的，判断登录状态
|
|
||||||
// 1，没有登录：跳转到登录页
|
|
||||||
// 2，登录，直接进入
|
|
||||||
// 有些路由不需要登录，直接进入；
|
|
||||||
// ps:是否需要登录 --meta
|
|
||||||
// */
|
|
||||||
// const token = sessionStorage.getItem('token');
|
|
||||||
// const isLogin = !!token;
|
|
||||||
// console.log(isLogin)
|
|
||||||
// // 考虑到token非法？ 进入路由的时候，需要向后端发送token，验证是否合法
|
|
||||||
// // const data = function () {
|
|
||||||
// // http.get('/login')
|
|
||||||
// // return 'sucess'
|
|
||||||
// // };
|
|
||||||
// // Store.commit('chageUserInfo',data.data);
|
|
||||||
//
|
|
||||||
// console.log(to.name);
|
|
||||||
// if(isLogin){ //已经登录的 直接通过
|
|
||||||
// // if(data.error===400){
|
|
||||||
// // next({name:'home'});
|
|
||||||
// // localStorage.removeItem('token');
|
|
||||||
// // return;
|
|
||||||
// // }
|
|
||||||
// if(to.name === '/login'){
|
|
||||||
// next({name:'/home'});
|
|
||||||
// }else{
|
|
||||||
// next();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// if(!isLogin && to.name !== '/login'){ //未登录，去的也不是登录页
|
|
||||||
// next({name:'/login'});
|
|
||||||
// }
|
|
||||||
// else{
|
|
||||||
// next()
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// })
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,79 @@
|
||||||
|
// import user from "@/store/user";
|
||||||
|
|
||||||
export default{
|
export default{
|
||||||
state:{
|
state:{
|
||||||
tabsList:[
|
tabsList:[
|
||||||
{
|
// {
|
||||||
path: "/",
|
// path: "/",
|
||||||
name: "home",
|
// name: "home",
|
||||||
label: "首页",
|
// label: "首页",
|
||||||
icon: "s-home",
|
// icon: "s-home",
|
||||||
url: "Home/Home",
|
// url: "Home/Home",
|
||||||
},
|
// },
|
||||||
|
],//tags(位于上导航栏)
|
||||||
|
cachedList:[],
|
||||||
|
//用户
|
||||||
|
isAdmin:'',
|
||||||
|
userId : '',
|
||||||
|
isLogin:false,
|
||||||
|
token:'',
|
||||||
|
isCollapse:false,
|
||||||
|
|
||||||
]//tags(位于上导航栏)
|
|
||||||
},
|
},
|
||||||
mutations:{//mutations往往接收两个数据，第二个才是我们想要的数据
|
mutations:{//mutations往往接收两个数据，第二个才是我们想要的数据
|
||||||
|
collapseMenu(state){
|
||||||
|
state.isCollapse= !state.isCollapse
|
||||||
|
|
||||||
|
},
|
||||||
// 更新导航栏tag标签
|
// 更新导航栏tag标签
|
||||||
selectMenu(state,val){
|
selectMenu(state,val){
|
||||||
// console.log(val , 'val')
|
// console.log(val , 'val')
|
||||||
if(val.name!=='home'){
|
// if(val.name!=='home'){
|
||||||
const index = state.tabsList.findIndex(item => item.name===val.name)//index是判断是否在tabsList里面，在就显示索引，不在就显示-1
|
const index = state.tabsList.findIndex(item => item.name===val.name)//index是判断是否在tabsList里面，在就显示索引，不在就显示-1
|
||||||
|
const length = state.tabsList.length
|
||||||
|
// console.log(state.tabsList)
|
||||||
|
// console.log(length)
|
||||||
|
|
||||||
//如果不存在
|
//如果不存在
|
||||||
if(index===-1){
|
if(index===-1){
|
||||||
state.tabsList.push(val)//列表添加
|
state.tabsList.push(val)//列表添加
|
||||||
|
state.cachedList.push(val.name)//列表添加
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// 删除指定的tag数据
|
// 删除指定的tag数据
|
||||||
closeTag(state,item){
|
closeTag(state,item){
|
||||||
// console.log(item,'item')//后面参数，优化打印查看，类似于更换数据名
|
// console.log(item,'item')//后面参数，优化打印查看，类似于更换数据名
|
||||||
const index=state.tabsList.findIndex(val => val.name===item.name)
|
const index=state.tabsList.findIndex(val => val.name===item.name)
|
||||||
state.tabsList.splice(index,1)//删除index（一个）
|
state.tabsList.splice(index,1)//删除index（一个）
|
||||||
|
state.cachedList.splice(index,1)//列表添加
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
login(state,user){
|
||||||
|
state.isLogin=true
|
||||||
|
sessionStorage.setItem('token',user.token)
|
||||||
|
sessionStorage.setItem('user',user.name)
|
||||||
|
// 管理员字段
|
||||||
|
sessionStorage.setItem('stats',user.stats)
|
||||||
|
// console.log('login:'+state.isLogin)
|
||||||
|
// console.log('token:u'+user.token)
|
||||||
|
},
|
||||||
|
// 关闭会话（页面），session会自动清除？
|
||||||
|
logout(state){
|
||||||
|
state.isLogin=false
|
||||||
|
state.name=''
|
||||||
|
sessionStorage.clear()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
getUserState(state) {
|
||||||
|
return state.isLogin;
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
import Vue from 'vue'
|
|
||||||
import Vuex from 'vuex'
|
|
||||||
Vue.use(Vuex)
|
|
||||||
//这个理论来说
|
|
||||||
const user = new Vuex.Store({
|
|
||||||
state:{
|
|
||||||
userId : '',
|
|
||||||
isLogin:'',
|
|
||||||
token:''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default user
|
|
||||||
|
|
@ -8,22 +8,24 @@
|
||||||
|
|
||||||
<el-form-item prop="userName">
|
<el-form-item prop="userName">
|
||||||
<span class="svg-container">
|
<span class="svg-container">
|
||||||
<svg-icon icon-class="user" />
|
<!-- <svg-icon icon-class="user" />-->
|
||||||
</span>
|
</span>
|
||||||
<el-input
|
<el-input
|
||||||
ref="userName"
|
ref="userName"
|
||||||
v-model="loginForm.userName"
|
v-model="loginForm.userName"
|
||||||
placeholder="邮箱"
|
placeholder="账号"
|
||||||
name="userName"
|
name="userName"
|
||||||
type="text"
|
type="text"
|
||||||
tabindex="1"
|
tabindex="1"
|
||||||
auto-complete="on"
|
auto-complete="on"
|
||||||
|
@keyup.enter.native="handleLogin"
|
||||||
|
@submit.native.prevent
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<span class="svg-container">
|
<span class="svg-container">
|
||||||
<svg-icon icon-class="password" />
|
<!-- <svg-icon icon-class="password" />-->
|
||||||
</span>
|
</span>
|
||||||
<el-input
|
<el-input
|
||||||
:key="passwordType"
|
:key="passwordType"
|
||||||
|
|
@ -37,23 +39,21 @@
|
||||||
@keyup.enter.native="handleLogin"
|
@keyup.enter.native="handleLogin"
|
||||||
/>
|
/>
|
||||||
<span class="show-pwd" @click="showPwd">
|
<span class="show-pwd" @click="showPwd">
|
||||||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
<!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />-->
|
||||||
</span>
|
</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
|
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
|
||||||
<!-- <p class="tips">-->
|
<!-- <p class="tips">-->
|
||||||
<!-- <a href="/register" type="primary" @click="toRegister">还没有帐号？立即注册</a>-->
|
<!-- <a href="/user" type="primary" @click="toRegister">还没有帐号？立即注册</a>-->
|
||||||
<!-- </p>-->
|
<!-- </p>-->
|
||||||
<router-link to="/register" >还没有帐号？立即注册</router-link>
|
<router-link to="/register" style="color: white">还没有帐号？立即注册</router-link>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
import http from "@/utils/request";
|
import http from "@/utils/request";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'login',
|
name: 'login',
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -63,12 +63,13 @@ export default {
|
||||||
password: ''
|
password: ''
|
||||||
},
|
},
|
||||||
loginRules: {
|
loginRules: {
|
||||||
userName: [{ type: 'email', required: true, trigger: 'blur', message: '请输入邮箱' }],
|
userName: [{ type: 'email', required: true, trigger: 'blur', message: '请输入账号' }],
|
||||||
password: [{
|
password: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '创建密码',
|
message: '输入密码',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/, message: '密码必须同时包含数字与字母,且长度为 6-15位' }]
|
}]
|
||||||
|
// { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/, message: '密码必须同时包含数字与字母,且长度为 6-15位' }]
|
||||||
},
|
},
|
||||||
loading: false,
|
loading: false,
|
||||||
passwordType: 'password',
|
passwordType: 'password',
|
||||||
|
|
@ -85,7 +86,7 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toRegister(){
|
toRegister(){
|
||||||
this.$router.push('/register')
|
this.$router.push('/user')
|
||||||
},
|
},
|
||||||
showPwd() {
|
showPwd() {
|
||||||
if (this.passwordType === 'password') {
|
if (this.passwordType === 'password') {
|
||||||
|
|
@ -99,24 +100,60 @@ export default {
|
||||||
},
|
},
|
||||||
handleLogin() {
|
handleLogin() {
|
||||||
this.$refs.loginForm.validate(valid => {
|
this.$refs.loginForm.validate(valid => {
|
||||||
if (valid) {
|
|
||||||
this.loading = true
|
this.loading = true
|
||||||
http.get('/users/token_get/',{params:{
|
//-www-form-urlencoded的格式可以有多种方式，详见axios文档
|
||||||
username:this.username
|
const params = new URLSearchParams();
|
||||||
}})
|
params.append('username', this.loginForm.userName);
|
||||||
|
params.append('password', this.loginForm.password);
|
||||||
|
http.post('/users/login/', params)
|
||||||
|
// axios({
|
||||||
|
// method: 'post',
|
||||||
|
// url: 'http://61.240.140.173:8000/users/login/',
|
||||||
|
// // url:'/api/users/login/',
|
||||||
|
// headers: {
|
||||||
|
// 'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
// },
|
||||||
|
// data: {
|
||||||
|
// username:this.loginForm.userName,
|
||||||
|
// password:this.loginForm.password
|
||||||
|
// }
|
||||||
|
.then((res)=>{
|
||||||
|
if (res.data.message===1){
|
||||||
|
this.loading = false
|
||||||
|
// if (res.data.data)
|
||||||
|
let user={token:res.data.data,name:this.loginForm.userName,stats:res.data.stats}
|
||||||
|
this.$store.commit('login',user)
|
||||||
|
this.$router.push('/systematic_risk')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.$message({
|
||||||
|
showClose: true,
|
||||||
|
message: res.data.data,
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch((error)=>{
|
||||||
|
console.log(error)
|
||||||
|
this.loading = false
|
||||||
|
alert('登陆失败')
|
||||||
|
})
|
||||||
// this.$store.dispatch('login', this.loginForm).then(() => {
|
// this.$store.dispatch('login', this.loginForm).then(() => {
|
||||||
// this.$router.push({ path: this.redirect || '/' })
|
// this.$router.push({ path: this.redirect || '/' })
|
||||||
// this.loading = false
|
// this.loading = false
|
||||||
// }).catch(() => {
|
// }).catch(() => {
|
||||||
// this.loading = false
|
// this.loading = false
|
||||||
// })
|
// }
|
||||||
} else {
|
|
||||||
console.log('error submit!!')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isLogin(){
|
||||||
|
return this.$store.state.isLogin
|
||||||
}
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -172,6 +209,15 @@ $bg:#2d3a4b;
|
||||||
$dark_gray:#889aa4;
|
$dark_gray:#889aa4;
|
||||||
$light_gray:#eee;
|
$light_gray:#eee;
|
||||||
|
|
||||||
|
.router-link-active {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -30,7 +30,25 @@
|
||||||
<el-input v-model="ruleForm.account" />
|
<el-input v-model="ruleForm.account" />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="真实姓名" prop="name">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input v-model="ruleForm.name" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="电话" prop="tele">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input v-model="ruleForm.tele" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="单位" prop="unit">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input v-model="ruleForm.unit" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item> <el-form-item label="职位" prop="position">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input v-model="ruleForm.position" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="邮箱" prop="email">
|
<el-form-item label="邮箱" prop="email">
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-input
|
<el-input
|
||||||
|
|
@ -57,6 +75,15 @@
|
||||||
/>
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="邀请码" prop="invite">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.invite"
|
||||||
|
maxlength="8"
|
||||||
|
placeholder="请联系管理员获取邀请码"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="密码" prop="pwd">
|
<el-form-item label="密码" prop="pwd">
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-input v-model="ruleForm.pwd" type="password" />
|
<el-input v-model="ruleForm.pwd" type="password" />
|
||||||
|
|
@ -83,7 +110,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import { getEmailCode, register } from '@/api/register'
|
// import { getEmailCode, user } from '@/api/user'
|
||||||
// import { encrypt } from '@/utils/rsaEncrypt'
|
// import { encrypt } from '@/utils/rsaEncrypt'
|
||||||
import http from "@/utils/request";
|
import http from "@/utils/request";
|
||||||
|
|
||||||
|
|
@ -91,15 +118,20 @@ export default {
|
||||||
name: 'register',
|
name: 'register',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
statusMsg: '',
|
statusMsg: '',
|
||||||
error: '',
|
error: '',
|
||||||
isDisable: false,
|
isDisable: false,
|
||||||
codeLoading: false,
|
codeLoading: false,
|
||||||
ruleForm: {
|
ruleForm: {
|
||||||
name:'',
|
name:'',
|
||||||
|
unit:'',
|
||||||
|
position:'',
|
||||||
|
tele:'',
|
||||||
account:'',
|
account:'',
|
||||||
email: '',
|
email: '',
|
||||||
code: '',
|
code: '',
|
||||||
|
invite:'',
|
||||||
pwd: '',
|
pwd: '',
|
||||||
cpwd: ''
|
cpwd: ''
|
||||||
},
|
},
|
||||||
|
|
@ -107,9 +139,10 @@ export default {
|
||||||
name: [{
|
name: [{
|
||||||
required: true,
|
required: true,
|
||||||
type: 'string',
|
type: 'string',
|
||||||
message: '请输入姓名',
|
message: '真实姓名',
|
||||||
trigger: 'blur'
|
trigger: 'blur',
|
||||||
}],
|
},{pattern:/^[\u4e00-\u9fa5]{2,4}$/,message:'请输入正确姓名'}
|
||||||
|
],
|
||||||
account: [{
|
account: [{
|
||||||
required: true,
|
required: true,
|
||||||
type: 'string',
|
type: 'string',
|
||||||
|
|
@ -121,13 +154,21 @@ export default {
|
||||||
type: 'email',
|
type: 'email',
|
||||||
message: '请输入邮箱',
|
message: '请输入邮箱',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}],
|
},
|
||||||
|
{pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.(com|cn|net)$/,message:'请输入正确邮箱'}
|
||||||
|
],
|
||||||
code: [{
|
code: [{
|
||||||
required: true,
|
required: true,
|
||||||
type: 'string',
|
type: 'string',
|
||||||
message: '请输入验证码',
|
message: '请输入验证码',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}],
|
}],
|
||||||
|
invite: [{
|
||||||
|
required: true,
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入邀请码',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
pwd: [{
|
pwd: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '创建密码',
|
message: '创建密码',
|
||||||
|
|
@ -169,7 +210,7 @@ export default {
|
||||||
if (!emailPass) {
|
if (!emailPass) {
|
||||||
self.codeLoading = true
|
self.codeLoading = true
|
||||||
self.statusMsg = '验证码已发送...'
|
self.statusMsg = '验证码已发送...'
|
||||||
http.get('/users/send',{params:{
|
http.get('/users/send/',{params:{
|
||||||
email:self.ruleForm.email
|
email:self.ruleForm.email
|
||||||
}}).then((res)=>{
|
}}).then((res)=>{
|
||||||
let count = 60
|
let count = 60
|
||||||
|
|
@ -190,7 +231,7 @@ export default {
|
||||||
this.isDisable = false
|
this.isDisable = false
|
||||||
this.statusMsg = ''
|
this.statusMsg = ''
|
||||||
this.codeLoading = false
|
this.codeLoading = false
|
||||||
console.log(err.response.data.message)
|
console.log(err)
|
||||||
})
|
})
|
||||||
|
|
||||||
// getEmailCode(self.ruleForm.email).then(res => {
|
// getEmailCode(self.ruleForm.email).then(res => {
|
||||||
|
|
@ -215,19 +256,46 @@ export default {
|
||||||
// //这里删除源码的加密
|
// //这里删除源码的加密
|
||||||
// password: this.ruleForm.pwd
|
// password: this.ruleForm.pwd
|
||||||
// }
|
// }
|
||||||
http.get('/users/register',{
|
const params = new URLSearchParams();
|
||||||
params:{
|
params.append('username', this.ruleForm.account);
|
||||||
username:this.ruleForm.account,
|
params.append('password', this.ruleForm.pwd);
|
||||||
email:this.ruleForm.email,
|
params.append('email', this.ruleForm.email);
|
||||||
password:this.ruleForm.pwd,
|
params.append('security_code', this.ruleForm.code);
|
||||||
security_code:this.ruleForm.code
|
params.append('invite_code', this.ruleForm.invite);
|
||||||
|
params.append('realname', this.ruleForm.name);
|
||||||
|
params.append('telephone', this.ruleForm.tele);
|
||||||
|
params.append('unit', this.ruleForm.unit);
|
||||||
|
params.append('position', this.ruleForm.position);
|
||||||
|
|
||||||
|
// http.post('/users/register/',{
|
||||||
|
// params:{
|
||||||
|
// username:this.ruleForm.account,
|
||||||
|
// email:this.ruleForm.email,
|
||||||
|
// password:this.ruleForm.pwd,
|
||||||
|
// security_code:this.ruleForm.code,
|
||||||
|
// invite_code:this.ruleForm.invite,
|
||||||
|
// realname:this.ruleForm.name,
|
||||||
|
// telephone:this.ruleForm.tele,
|
||||||
|
// unit:this.ruleForm.unit,
|
||||||
|
// position:this.ruleForm.position
|
||||||
|
// }
|
||||||
|
http.post('/users/register/',params).then((res)=>{
|
||||||
|
if (res.data.message===1){
|
||||||
|
this.$message({
|
||||||
|
showClose: true,
|
||||||
|
message: res.data.data,
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
// 跳转回登录
|
||||||
|
this.$router.push('/login')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
alert(res.data.data)
|
||||||
}
|
}
|
||||||
}).then((res)=>{
|
|
||||||
alert(res.data)
|
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
alert(error)
|
alert(error)
|
||||||
})
|
})
|
||||||
// register(user).then(res => {
|
// user(user).then(res => {
|
||||||
// console.log(res)
|
// console.log(res)
|
||||||
// this.$message({
|
// this.$message({
|
||||||
// showClose: true,
|
// showClose: true,
|
||||||
|
|
@ -241,6 +309,13 @@ export default {
|
||||||
// console.log(err.response.data.message)
|
// console.log(err.response.data.message)
|
||||||
// })
|
// })
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
this.$message({
|
||||||
|
showClose: true,
|
||||||
|
message:'请检查信息是否正确',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
2
src/utils/EventBus.js
Normal file
2
src/utils/EventBus.js
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
export default new Vue()
|
||||||
8
src/utils/javaRequest.js
Normal file
8
src/utils/javaRequest.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const javaReq=axios.create({
|
||||||
|
// baseURL:'http://61.240.140.173:8088/',//java的地址前缀
|
||||||
|
baseURL:'/api/',//后端的地址前缀
|
||||||
|
})
|
||||||
|
|
||||||
|
export default javaReq
|
||||||
|
|
@ -5,12 +5,30 @@ import axios from 'axios'
|
||||||
const http = axios.create({
|
const http = axios.create({
|
||||||
//通用请求
|
//通用请求
|
||||||
baseURL:'http://61.240.140.173:8000/',//后端的地址前缀
|
baseURL:'http://61.240.140.173:8000/',//后端的地址前缀
|
||||||
// baseURL:'/proxy_url',//后端的地址前缀
|
// baseURL:'/api/',//后端的地址前缀
|
||||||
// baseURL:'/api/',//mock前缀
|
// withCredentials:truenpm run serve
|
||||||
// async:true,
|
// async:true,
|
||||||
// timeout:'10000',//10s 超时时间
|
// timeout:'10000',//10s 超时时间
|
||||||
|
// headers:{token:sessionStorage.getItem('token')?sessionStorage.getItem('token'):'null'}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
http.interceptors.request.use(
|
||||||
|
function(config) {
|
||||||
|
// 在请求发送之前，为 headers 添加 token
|
||||||
|
const token =sessionStorage.getItem('token')?sessionStorage.getItem('token'):'null';
|
||||||
|
const name =sessionStorage.getItem('user')?sessionStorage.getItem('user'):'null';
|
||||||
|
|
||||||
|
config.headers['token'] = token
|
||||||
|
// config.headers['user_name']=name
|
||||||
|
|
||||||
|
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
function(error) {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// // 添加请求拦截器
|
// // 添加请求拦截器
|
||||||
// http.interceptors.request.use(function (config) {
|
// http.interceptors.request.use(function (config) {
|
||||||
|
|
@ -32,3 +50,4 @@ const http = axios.create({
|
||||||
|
|
||||||
|
|
||||||
export default http//将实例对外暴露
|
export default http//将实例对外暴露
|
||||||
|
|
||||||
|
|
|
||||||
18
src/views/404.vue
Normal file
18
src/views/404.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>404 - Page Not Found</h1>
|
||||||
|
<p>The page you are looking for does not exist.</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'NotFound'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
color: #ffce2a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,7 +7,8 @@
|
||||||
|
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header>
|
<el-header>
|
||||||
<common-header />
|
<common-header-user v-if="!state"/>
|
||||||
|
<common-header-admin v-if="state"/>
|
||||||
</el-header>
|
</el-header>
|
||||||
|
|
||||||
<el-main>
|
<el-main>
|
||||||
|
|
@ -15,7 +16,9 @@
|
||||||
<!-- 路由匹配组建将渲染到这里 -->
|
<!-- 路由匹配组建将渲染到这里 -->
|
||||||
<!-- 将每个页面提供边距(封套) -->
|
<!-- 将每个页面提供边距(封套) -->
|
||||||
<div class='wrapper'>
|
<div class='wrapper'>
|
||||||
<router-view> </router-view>
|
<keep-alive :include="cachedList" >
|
||||||
|
<router-view :key="$route.fullPath"/>
|
||||||
|
</keep-alive>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-main>
|
</el-main>
|
||||||
|
|
@ -26,14 +29,16 @@
|
||||||
<script>
|
<script>
|
||||||
import CommonAside from "../components/CommonAside.vue";
|
import CommonAside from "../components/CommonAside.vue";
|
||||||
import CommonHeader from "../components/CommonHeader.vue";
|
import CommonHeader from "../components/CommonHeader.vue";
|
||||||
import user from "@/store/user";
|
import CommonHeaderAdmin from "@/components/CommonHeaderAdmin";
|
||||||
let isLogin=false
|
import CommonHeaderUser from "@/components/CommonHeaderUser";
|
||||||
|
import {mapState} from "vuex";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
//
|
//
|
||||||
// beforeRouteEnter(to ,from,next){
|
// beforeRouteEnter(to ,from,next){
|
||||||
// console.log(to.name)
|
// console.log(to.name)
|
||||||
// if (to.meta.requireAuth){//需要认证
|
// if (to.meta.requireAuth){//需要认证
|
||||||
// if (user.state.isLogin || !user.state.isLogin && (to.name==='/register' ||to.name==='/login')){
|
// if (user.state.isLogin || !user.state.isLogin && (to.name==='/user' ||to.name==='/login')){
|
||||||
// next()
|
// next()
|
||||||
// }else {
|
// }else {
|
||||||
// next('/login')
|
// next('/login')
|
||||||
|
|
@ -52,7 +57,7 @@ export default {
|
||||||
|
|
||||||
// beforeRouteEnter(to ,from,next){
|
// beforeRouteEnter(to ,from,next){
|
||||||
// console.log(to.name)
|
// console.log(to.name)
|
||||||
// if (to.name==='/register' || to.name==='/login'){
|
// if (to.name==='/user' || to.name==='/login'){
|
||||||
// next()
|
// next()
|
||||||
// }
|
// }
|
||||||
// else if (isLogin){
|
// else if (isLogin){
|
||||||
|
|
@ -64,12 +69,51 @@ export default {
|
||||||
//
|
//
|
||||||
// },
|
// },
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
user:''
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
computed:{
|
||||||
|
// state(){
|
||||||
|
// return this.$store.state.isLogin
|
||||||
|
//
|
||||||
|
// },
|
||||||
|
...mapState(['isLogin']),
|
||||||
|
// state(){
|
||||||
|
// return this.$store.getters.getUserState || sessionStorage.getItem('stats')!==null
|
||||||
|
// }
|
||||||
|
|
||||||
|
//接收缓存列表cached
|
||||||
|
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
|
||||||
|
cached: state => state.tab.cachedList
|
||||||
|
}),
|
||||||
|
cachedList(){
|
||||||
|
// console.log('main接收到的cachedList' ,this.cached)
|
||||||
|
return this.cached
|
||||||
|
},
|
||||||
|
|
||||||
|
state(){
|
||||||
|
return sessionStorage.getItem('stats') === '1'
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
// state(newValue){
|
||||||
|
// console.log(1)
|
||||||
|
// console.log(newValue)
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
console.log(this.state)
|
||||||
|
},
|
||||||
|
|
||||||
//引入组件
|
//引入组件
|
||||||
components: {
|
components: {
|
||||||
CommonAside,
|
CommonAside,
|
||||||
|
CommonHeaderUser,
|
||||||
|
CommonHeaderAdmin,
|
||||||
CommonHeader,
|
CommonHeader,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<el-card style='height: 750px;margin-bottom: 10px;' :body-style={padding:0}>
|
<el-card style='height: 750px;margin-bottom: 10px;' :body-style={padding:0}>
|
||||||
<!-- height:400px -->
|
<!-- height:400px -->
|
||||||
<!-- 1、上标 -->
|
<!-- 1、上标 -->
|
||||||
<span class="superscript" style="width: 20px; height: 40px;">系统风险分析</span>
|
<span class="superscript" style="width: 20px; height: 40px;">系统性影响指标分析</span>
|
||||||
<!-- 2、产品搜索栏 -->
|
<!-- 2、产品搜索栏 -->
|
||||||
|
|
||||||
<div class="form">
|
<div class="form">
|
||||||
|
|
@ -29,6 +29,15 @@
|
||||||
<!-- <el-checkbox v-model="other">其他</el-checkbox>-->
|
<!-- <el-checkbox v-model="other">其他</el-checkbox>-->
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="地区" prop="地区">
|
||||||
|
<el-select size="mini" v-model="formInline1.region" multiple clearable>
|
||||||
|
<el-option v-for='(val,key) in region' :prop="key" :label="val" :value="val" :key="key"/>
|
||||||
|
|
||||||
|
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="开始时间" prop="开始时间">
|
<el-form-item label="开始时间" prop="开始时间">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="formInline1.start_date"
|
v-model="formInline1.start_date"
|
||||||
|
|
@ -71,6 +80,7 @@
|
||||||
:cell-style="{padding:'0px'}"
|
:cell-style="{padding:'0px'}"
|
||||||
header-row-class-name="active_header"
|
header-row-class-name="active_header"
|
||||||
header-cell-class-name="active_header"
|
header-cell-class-name="active_header"
|
||||||
|
height="370"
|
||||||
cell-class-name="content_center">
|
cell-class-name="content_center">
|
||||||
<!-- header-row-class-name 表头行 加classname -->
|
<!-- header-row-class-name 表头行 加classname -->
|
||||||
<!-- cell-class-name 单元格加名字 -->
|
<!-- cell-class-name 单元格加名字 -->
|
||||||
|
|
@ -84,6 +94,10 @@
|
||||||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||||||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<el-card style='height: 170px; margin: 5px 5px 2px 5px;background-color: rgba(200, 200, 200, 0.812);'>
|
||||||
|
<span v-html="info" ></span>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<!-- 风险价值动态变化 -->
|
<!-- 风险价值动态变化 -->
|
||||||
|
|
@ -125,6 +139,7 @@
|
||||||
:cell-style="{padding:'0px'}"
|
:cell-style="{padding:'0px'}"
|
||||||
header-row-class-name="active_header"
|
header-row-class-name="active_header"
|
||||||
header-cell-class-name="active_header"
|
header-cell-class-name="active_header"
|
||||||
|
height="370"
|
||||||
cell-class-name="content_center">
|
cell-class-name="content_center">
|
||||||
<!-- header-row-class-name 表头行 加classname -->
|
<!-- header-row-class-name 表头行 加classname -->
|
||||||
<!-- cell-class-name 单元格加名字 -->
|
<!-- cell-class-name 单元格加名字 -->
|
||||||
|
|
@ -153,6 +168,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
import qs from 'qs'
|
||||||
import * as echarts from "echarts"
|
import * as echarts from "echarts"
|
||||||
import http from '../utils/request'
|
import http from '../utils/request'
|
||||||
import addline from "../components/addline.vue";
|
import addline from "../components/addline.vue";
|
||||||
|
|
@ -163,6 +180,44 @@
|
||||||
// },
|
// },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
region:
|
||||||
|
[
|
||||||
|
'全部',
|
||||||
|
'北京市',
|
||||||
|
'天津市',
|
||||||
|
'河北省',
|
||||||
|
'山西省',
|
||||||
|
'内蒙古自治区',
|
||||||
|
'辽宁省',
|
||||||
|
'吉林省',
|
||||||
|
'黑龙江省',
|
||||||
|
'上海市',
|
||||||
|
'江苏省',
|
||||||
|
'浙江省',
|
||||||
|
'安徽省',
|
||||||
|
'福建省',
|
||||||
|
'江西省',
|
||||||
|
'山东省',
|
||||||
|
'河南省',
|
||||||
|
'湖北省',
|
||||||
|
'湖南省',
|
||||||
|
'广东省',
|
||||||
|
'广西壮族自治区',
|
||||||
|
'海南省',
|
||||||
|
'重庆市',
|
||||||
|
'四川省',
|
||||||
|
'贵州省',
|
||||||
|
'云南省',
|
||||||
|
'西藏自治区',
|
||||||
|
'陕西省',
|
||||||
|
'甘肃省',
|
||||||
|
'青海省',
|
||||||
|
'宁夏回族自治区',
|
||||||
|
'新疆维吾尔自治区',
|
||||||
|
'台湾省',
|
||||||
|
'香港特别行政区',
|
||||||
|
'澳门特别行政区'
|
||||||
|
],
|
||||||
cp:{},
|
cp:{},
|
||||||
dat:{},
|
dat:{},
|
||||||
ra:[],
|
ra:[],
|
||||||
|
|
@ -178,6 +233,7 @@
|
||||||
industry:[],
|
industry:[],
|
||||||
start_date:'',
|
start_date:'',
|
||||||
end_date:'',
|
end_date:'',
|
||||||
|
region:[]
|
||||||
},
|
},
|
||||||
// 表单2-个体风险分析
|
// 表单2-个体风险分析
|
||||||
formInline2: {
|
formInline2: {
|
||||||
|
|
@ -249,7 +305,8 @@ formInline2: {
|
||||||
name:'华夏商行',
|
name:'华夏商行',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
//【线形图数据】
|
// 解释说明
|
||||||
|
info:"·第一个指标：β系数，表示公司i(或金融机构)与整体回报（损失）之间的相关性，同时它也是影响公司i(或金融机构)陷入危机时对整体的风险溢出大小的要素之一。按照该指标进行排名时，排名靠前的公司(或金融机构)，如浙商银行、紫金银行、民生银行等，说明其与整体之间的联动性比较强，对系统风险的贡献排名比较靠前。<br/>·第二个指标：条件风险价值，表示当i公司(或金融机构)处于极端困境情况时，系统整体的最大可能损失。<br/>·第三个指标，风险价值(机构处于极端困境情况时)，表示由于某种市场因素如股票价格、汇率或者利率等突然发生变化时，某项金融产品头寸或者资产组合在特定置信水平及持有期条件下所可能遭受的最大损失。按照该指标进行排名时，排名靠前的公司(或金融机构)，说明其风险较高，风险防控能力还需要加强。该指标对于公司i(或金融机构)自身的风险监控尤为重要，风险较高时很容易成为系统性危机的诱因。<br/>·第四个指标，风险价值(机构处于常态时)，表示该机构处于常态时，某项金融产品头寸或者资产组合在特定置信水平及持有期条件下所可能遭受的最大损失。<br/>·第五个指标：溢出风险价值，可以直观的反映公司i(或金融机构)的风险事件对整体的风险溢出值，衡量了公司i(或金融机构)对系统风险的贡献程度。按照该指标进行排名时，排名靠前的公司(或金融机构)，说明其对系统造成的影响(系统溢出效应)将更加明显，监管部门需要尤为关注。"
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -257,12 +314,12 @@ formInline2: {
|
||||||
mounted(){},
|
mounted(){},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// 清空功能
|
// 清空功能
|
||||||
resetForm(formInline) {
|
resetForm(formInline) {
|
||||||
this.$refs[formInline].resetFields();
|
this.$refs[formInline].resetFields();
|
||||||
console.log(this.formInline)
|
this.formInline1= {}
|
||||||
|
console.log(this.formInline1)
|
||||||
console.log('正在清空')
|
console.log('正在清空')
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
@ -270,15 +327,25 @@ formInline2: {
|
||||||
onSubmit1_query() {//确定
|
onSubmit1_query() {//确定
|
||||||
console.log("系统风险分析查询")
|
console.log("系统风险分析查询")
|
||||||
console.log(this.formInline1.market)
|
console.log(this.formInline1.market)
|
||||||
console.log(this.formInline1.industry)
|
if(this.formInline1.region.includes('全部') && this.formInline1.region.length!==1 ){
|
||||||
|
|
||||||
|
this.$message.warning('请重新选择')
|
||||||
|
}
|
||||||
|
else {
|
||||||
http.get(
|
http.get(
|
||||||
"/risk/risk_set",
|
"/risk/risk_set/",
|
||||||
{params:{
|
{params:{
|
||||||
name1: this.formInline1.industry,//行业
|
industry: this.formInline1.industry,//行业
|
||||||
name2: this.formInline1.market,//市场
|
market: this.formInline1.market,//市场
|
||||||
start_date:this.formInline1.start_date,
|
start_date:this.formInline1.start_date,
|
||||||
end_date:this.formInline1.end_date,
|
end_date:this.formInline1.end_date,
|
||||||
}}).then(response => {
|
region:this.formInline1.region
|
||||||
|
},
|
||||||
|
// 防止带中括号
|
||||||
|
paramsSerializer:params => {
|
||||||
|
return qs.stringify(params,{indices:false})
|
||||||
|
}
|
||||||
|
}).then(response => {
|
||||||
this.tableData_1_1= response.data.data['covar_table']
|
this.tableData_1_1= response.data.data['covar_table']
|
||||||
this.tableData_1_2= response.data.data['ra']
|
this.tableData_1_2= response.data.data['ra']
|
||||||
this.dat=response.data.data['data']
|
this.dat=response.data.data['data']
|
||||||
|
|
@ -645,13 +712,15 @@ formInline2: {
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 查看格兰杰因果关系网络
|
// 查看格兰杰因果关系网络
|
||||||
onSubmit_grayish(){
|
onSubmit_grayish(){
|
||||||
console.log("查看格兰杰因果关系网络")
|
console.log("查看格兰杰因果关系网络")
|
||||||
http.get(
|
http.get(
|
||||||
"/risk/risk_net",).then(response => {
|
"/risk/risk_net/",).then(response => {
|
||||||
let links= response.data.data['links']
|
let links= response.data.data['links']
|
||||||
let nodes=response.data.data['nodes']
|
let nodes=response.data.data['nodes']
|
||||||
const graph=echarts.init(this.$refs.echarts_5)
|
const graph=echarts.init(this.$refs.echarts_5)
|
||||||
|
|
@ -703,7 +772,7 @@ formInline2: {
|
||||||
onSubmit2_query() {
|
onSubmit2_query() {
|
||||||
console.log("个体风险分析")
|
console.log("个体风险分析")
|
||||||
http.get(
|
http.get(
|
||||||
"/risk/risk_individual",
|
"/risk/risk_individual/",
|
||||||
{params:{
|
{params:{
|
||||||
name1: this.formInline.industry,//行业
|
name1: this.formInline.industry,//行业
|
||||||
name2: this.formInline.market,//省or市场
|
name2: this.formInline.market,//省or市场
|
||||||
|
|
@ -764,26 +833,43 @@ formInline2: {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 调整表头间隔、设置表头下方边框颜色
|
||||||
|
|
||||||
|
|
||||||
|
.table{
|
||||||
|
// 和选项框隔开
|
||||||
|
// margin:10px;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0px 5px 2px 5px;//返回表格添加间隙 上 右
|
||||||
|
|
||||||
|
|
||||||
// 调整表头间隔、设置表头下方边框颜色
|
// 调整表头间隔、设置表头下方边框颜色
|
||||||
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||||||
border-bottom: 1px solid rgba(224, 223, 223, 0.771) !important;
|
// border-bottom: 1px solid #333333 !important;
|
||||||
padding: 8px 0 !important;//这个页面表头大，可以调整一下间距
|
padding: 1px 1px 1px 1px;
|
||||||
min-width: 0 !important;
|
|
||||||
}
|
|
||||||
.el-table .el-table__cell {
|
|
||||||
padding: 12px 0;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
}
|
||||||
|
// 去除表格cell间隔
|
||||||
|
.el-table .el-table__cell {
|
||||||
|
padding: 0px 0;
|
||||||
|
min-width: 0;
|
||||||
|
// border-color:#333333;
|
||||||
|
|
||||||
}
|
}
|
||||||
/deep/ .active_header{//表头
|
/deep/ .active_header{//表头
|
||||||
color: #110101;
|
color: #110101;
|
||||||
font-size: 9px;
|
font-size: 13px;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
|
// border-color:#333333;
|
||||||
|
|
||||||
// height: 1px;
|
// height: 1px;
|
||||||
}
|
}
|
||||||
/deep/ .content_center{//表的内容
|
/deep/ .content_center{//表的内容
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
font-size: 10px;
|
font-size: 13px;
|
||||||
|
// border-color:#333333;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.kala_text {
|
.kala_text {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
|
||||||
40
src/views/SSE.vue
Normal file
40
src/views/SSE.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>SSE数据：</h1>
|
||||||
|
<ul>
|
||||||
|
<li v-for="message in messages" :key="message.id">{{ message.data }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SSE.vue",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
message:''
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
longConnect(){
|
||||||
|
const eventSource=new EventSource('http://61.240.140.173:9999/sse?message="fine"')
|
||||||
|
eventSource.onmessage=function (event){
|
||||||
|
const result= event.data;
|
||||||
|
console.log('receive:',result)
|
||||||
|
}
|
||||||
|
eventSource.addEventListener('message', (event) => {
|
||||||
|
this.messages.push({ id: Date.now(), data: event.data });
|
||||||
|
console.log( event.data)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.longConnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
594
src/views/UserManagement.vue
Normal file
594
src/views/UserManagement.vue
Normal file
|
|
@ -0,0 +1,594 @@
|
||||||
|
<!-- 用户管理 -->
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-row>
|
||||||
|
<el-tabs type="border-card">
|
||||||
|
<el-tab-pane label="邀请码">
|
||||||
|
<div class="form">
|
||||||
|
|
||||||
|
<!-- inline="true"表单域在一行 -->
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <el-form-item label="搜索用户名">-->
|
||||||
|
<!-- <el-input v-model="formInline.name" size="mini" placeholder="" ></el-input>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
|
||||||
|
<el-form-item style="margin-left: 10px;">
|
||||||
|
<el-button @click="onSubmit" >查看所有用户</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <el-form-item>-->
|
||||||
|
<!-- <el-button v-if="permissions=='管理员'" type="warning" plain @click="onSubmit" icon="el-icon-postcard" size="mini" >点击生成邀请码</el-button>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
|
||||||
|
<el-form-item >
|
||||||
|
<el-button type="primary" plain style="margin-right: 10px;margin-left: 10px;" size="mini" icon="el-icon-plus" @click="addInviteCode">点击添加邀请码</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table v-if="permissions=='管理员'" class='table' :data="tableData" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
|
border
|
||||||
|
height="100%"
|
||||||
|
:row-style="{height:'36px'}"
|
||||||
|
:cell-style="{padding:'0px'}"
|
||||||
|
header-row-class-name="active_header"
|
||||||
|
header-cell-class-name="active_header"
|
||||||
|
cell-class-name="content_center">
|
||||||
|
|
||||||
|
<el-table-column v-for='(val,key) in tableLabel' :prop="key" :label="val" /><!--插槽里面没有东西就可以用单标签 -->
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="scale"
|
||||||
|
label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
|
||||||
|
<!-- <el-button v-if="scope.row.权限=='管理员'" v-on:click="detail(scope.row)" size="mini" type="primary">生成邀请码</el-button> -->
|
||||||
|
<el-button v-on:click="modify(scope.row)" size="mini" >修改</el-button>
|
||||||
|
<el-button v-on:click="delete(scope.row)" size="mini" >删除</el-button>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-button style='width: 150px;' @click="queryInviteCode">邀请码管理</el-button>
|
||||||
|
<el-dialog title="邀请码使用情况" :visible.sync="dialogVisible" width="100%">
|
||||||
|
<el-table
|
||||||
|
:data="inviteCodeData"
|
||||||
|
stripe
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="code"
|
||||||
|
label="邀请码"
|
||||||
|
width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="ctime"
|
||||||
|
label="生成时间"
|
||||||
|
width="300">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="tuser"
|
||||||
|
label="使用者"
|
||||||
|
width="100">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
label="是否使用"
|
||||||
|
width="100">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="utime"
|
||||||
|
label="使用时间"
|
||||||
|
width="300">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog title="用户列表" :visible.sync="usertDataVisible" width="100%">
|
||||||
|
<el-table
|
||||||
|
:data="usertData"
|
||||||
|
stripe
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="realname"
|
||||||
|
label="姓名"
|
||||||
|
width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="username"
|
||||||
|
label="用户名"
|
||||||
|
width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="telephone"
|
||||||
|
label="电话"
|
||||||
|
width="300">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="email"
|
||||||
|
label="邮箱"
|
||||||
|
width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="unit"
|
||||||
|
label="单位"
|
||||||
|
width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="position"
|
||||||
|
label="职位"
|
||||||
|
width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
label="是否为管理员（1为管理员）"
|
||||||
|
width="80">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog title="当前生成的邀请码" :visible.sync="inviteCodeVisible" width="100%">
|
||||||
|
{{inviteCode}}
|
||||||
|
</el-dialog>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="用户活动" height="500px">
|
||||||
|
<el-form :inline="true">
|
||||||
|
|
||||||
|
<el-form-item >
|
||||||
|
<el-input v-model="name" placeholder="请输入用户名" size="mini" @keyup.enter.native="activity(name,start,end)" @submit.native.prevent></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="开始时间" prop="开始时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="start"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini"
|
||||||
|
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="结束时间" prop="结束时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="end"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini"
|
||||||
|
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item >
|
||||||
|
<el-button type="primary" plain style="margin-right: 10px;margin-left: 10px;" @click="activity(name,start,end)">查看</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!--用户表-->
|
||||||
|
<el-table class='table' :data="activityData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
|
border
|
||||||
|
height="100%"
|
||||||
|
:row-style="{height:'36px'}"
|
||||||
|
:cell-style="{padding:'0px'}"
|
||||||
|
header-row-class-name="active_header"
|
||||||
|
header-cell-class-name="active_header"
|
||||||
|
cell-class-name="content_center">
|
||||||
|
|
||||||
|
<el-table-column v-for='(val,key) in activityLabel' :prop="key" :label="val" /><!--插槽里面没有东西就可以用单标签 -->
|
||||||
|
|
||||||
|
<!-- <el-table-column-->
|
||||||
|
<!-- prop="scale"-->
|
||||||
|
<!-- label="操作">-->
|
||||||
|
<!-- <template slot-scope="scope">-->
|
||||||
|
|
||||||
|
<!-- <!– <el-button v-if="scope.row.权限=='管理员'" v-on:click="detail(scope.row)" size="mini" type="primary">生成邀请码</el-button> –>-->
|
||||||
|
<!-- <el-button v-on:click="modify(scope.row)" size="mini" >修改</el-button>-->
|
||||||
|
<!-- <el-button v-on:click="delete(scope.row)" size="mini" >删除</el-button>-->
|
||||||
|
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- </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="activityData.length">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="访问模块" height="500px">
|
||||||
|
<el-form :inline="true">
|
||||||
|
|
||||||
|
<el-form-item label="开始时间" prop="开始时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="moduleStart"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini"
|
||||||
|
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="结束时间" prop="结束时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="moduleEnd"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini"
|
||||||
|
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item >
|
||||||
|
<el-button type="primary" plain style="margin-right: 10px;margin-left: 10px;" @click="moduleAct(moduleStart,moduleEnd)">查看</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<div id="module" ref="module" style="width:100%;height:300px;"></div>
|
||||||
|
<div id="time" ref="time" style="width:100%;height:300px;"></div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
</el-tabs>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import http from "@/utils/request";
|
||||||
|
import * as echarts from "echarts"
|
||||||
|
import {Loading} from "element-ui";
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
moduleStart:'',
|
||||||
|
moduleEnd:'',
|
||||||
|
start:'',
|
||||||
|
end:'',
|
||||||
|
currentPage: 1, // 当前页码
|
||||||
|
total: 20, // 总条数
|
||||||
|
pageSize: 10, // 每页的数据条数
|
||||||
|
name:'',
|
||||||
|
activityData:[],
|
||||||
|
usertData:'',
|
||||||
|
usertDataVisible:false,
|
||||||
|
inviteCode:'',
|
||||||
|
inviteCodeData:[],
|
||||||
|
dialogVisible:false,
|
||||||
|
inviteCodeVisible:false,
|
||||||
|
formInline:{
|
||||||
|
name:''
|
||||||
|
},
|
||||||
|
// 当前用户
|
||||||
|
// permissions:'管理员',
|
||||||
|
permissions:'普通用户',
|
||||||
|
|
||||||
|
activityLabel:{
|
||||||
|
用户名:'用户名',
|
||||||
|
IP:'IP',
|
||||||
|
访问模块:'访问模块',
|
||||||
|
关键词:'关键词',
|
||||||
|
时间:'时间',
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
tableLabel: {
|
||||||
|
用户名: '用户名',
|
||||||
|
姓名: '姓名',
|
||||||
|
电话: '电话',
|
||||||
|
邮箱: '邮箱',
|
||||||
|
单位:'单位',
|
||||||
|
职位:'职位',
|
||||||
|
权限:'权限',
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
tableData:[
|
||||||
|
{
|
||||||
|
用户名: 'user1',
|
||||||
|
权限:'管理员',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
用户名: 'test1',
|
||||||
|
权限:'普通用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
用户名: 'test2',
|
||||||
|
权限:'普通用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
用户名: 'test3',
|
||||||
|
权限:'普通用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
用户名: 'user2',
|
||||||
|
权限:'管理员',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
用户名: 'test4',
|
||||||
|
权限:'普通用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
用户名: 'test5',
|
||||||
|
权限:'普通用户',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
activityData(){
|
||||||
|
console.log(this.activityData.length)
|
||||||
|
this.total= this.activityData.length
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
handleSizeChange(val) {
|
||||||
|
console.log(`每页 ${val} 条`);
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
},
|
||||||
|
//当前页改变时触发 跳转其他页
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`);
|
||||||
|
this.currentPage = val;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
activity(name,start,end){
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
params.append('username', name);
|
||||||
|
params.append('stime',start);
|
||||||
|
params.append('etime',end);
|
||||||
|
// if (start!=='' && end!==''){
|
||||||
|
// ''
|
||||||
|
// }
|
||||||
|
let options={
|
||||||
|
text:'请稍等'
|
||||||
|
}
|
||||||
|
let loadingInstance = Loading.service(options);
|
||||||
|
http.post('/users/user_act/',params).then((res)=>{
|
||||||
|
this.activityData=res.data
|
||||||
|
loadingInstance.close()
|
||||||
|
}).finally(()=>
|
||||||
|
loadingInstance.close()
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
moduleAct(moduleStart,moduleEnd){
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
params.append('stime',moduleStart)
|
||||||
|
params.append('etime',moduleEnd)
|
||||||
|
let options={
|
||||||
|
text:'请稍等'
|
||||||
|
}
|
||||||
|
let loadingInstance = Loading.service(options);
|
||||||
|
http.post('/users/model_act/',params).then((res)=>{
|
||||||
|
let data=[]
|
||||||
|
for (let i in res.data){
|
||||||
|
let tmp={}
|
||||||
|
tmp['name']=res.data[i]['访问模块']
|
||||||
|
tmp['value']=res.data[i]['次数']
|
||||||
|
data.push(tmp)
|
||||||
|
}
|
||||||
|
// let chartDom = document.getElementById('module');
|
||||||
|
let myChart = echarts.init(this.$refs.module)
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '5%',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
// {
|
||||||
|
// name: '访问来源',
|
||||||
|
// type: 'pie',
|
||||||
|
// radius: ['50%', '70%'],
|
||||||
|
// avoidLabelOverlap: false,
|
||||||
|
// label: {
|
||||||
|
// show: false,
|
||||||
|
// position: 'center'
|
||||||
|
// },
|
||||||
|
// emphasis: {
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// fontSize: '30',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// show: false
|
||||||
|
// },
|
||||||
|
// data: data
|
||||||
|
// }
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 40,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// console.log(option)
|
||||||
|
myChart.setOption(option)
|
||||||
|
console.log(myChart.getOption())
|
||||||
|
|
||||||
|
})
|
||||||
|
http.post('/users/time_act/',params).then((res)=>{
|
||||||
|
|
||||||
|
let data=[]
|
||||||
|
let time=[]
|
||||||
|
for (let i in res.data){
|
||||||
|
time.push(res.data[i]['访问模块'])
|
||||||
|
data.push(res.data[i]['访问量'])
|
||||||
|
}
|
||||||
|
// let chartDom = document.getElementById('time');
|
||||||
|
|
||||||
|
let myChart = echarts.init(this.$refs.time);
|
||||||
|
let option = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: data
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: time,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// console.log(option)
|
||||||
|
myChart.setOption(option);
|
||||||
|
console.log(myChart.getOption())
|
||||||
|
})
|
||||||
|
loadingInstance.close()
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
queryInviteCode(){
|
||||||
|
http.get('/users/invite_all/').then((res)=>{
|
||||||
|
this.inviteCodeData=res.data
|
||||||
|
this.dialogVisible=true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
addInviteCode(){
|
||||||
|
http.get('/users/invite/').then((res)=>{
|
||||||
|
|
||||||
|
this.inviteCode=res.data
|
||||||
|
this.inviteCodeVisible=true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onSubmit(){
|
||||||
|
http.post('/users/all_users/').then((res)=>{
|
||||||
|
this.usertData=res.data
|
||||||
|
this.usertDataVisible=true
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
modify(){},
|
||||||
|
delete(){},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
.form1{//2、产品搜索栏
|
||||||
|
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;//左右贴边
|
||||||
|
margin:0px;
|
||||||
|
// height: 40px;
|
||||||
|
padding-left: 5px;
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.form{//搜索栏
|
||||||
|
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;//左右贴边
|
||||||
|
// margin-top:5px;
|
||||||
|
// height: 40px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table{
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 5px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
// /deep/ .el-table {
|
||||||
|
// width: 98.5% !important;
|
||||||
|
// }
|
||||||
|
// /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||||||
|
// border-bottom: 1px solid rgba(224, 223, 223, 0.771) !important;
|
||||||
|
// padding: 0px 0 !important;
|
||||||
|
// min-width: 0 !important;
|
||||||
|
// }
|
||||||
|
// .el-table .el-table__cell {
|
||||||
|
// padding: 20px 0;
|
||||||
|
// min-width: 0;
|
||||||
|
// }
|
||||||
|
/deep/ .active_header{//表头
|
||||||
|
color: #333333;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center !important;
|
||||||
|
// height: 1px;
|
||||||
|
}
|
||||||
|
/deep/ .content_center{//表的内容
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.grayish_btn{//浅灰色按钮
|
||||||
|
color: #fff;//文字颜色
|
||||||
|
background-color: #aaaaaa;//背景颜色
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs--card {
|
||||||
|
height: calc(100vh - 110px);
|
||||||
|
/* overflow-y: auto; */
|
||||||
|
}
|
||||||
|
.el-tab-pane {
|
||||||
|
height: calc(100vh - 110px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,146 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="backcont">
|
|
||||||
<div class="meituan-contentr">
|
|
||||||
<div class="login-cont ">
|
|
||||||
<div class="meituan-title">登录</div>
|
|
||||||
|
|
||||||
<div class="meituan-user">
|
|
||||||
<p>账号</p>
|
|
||||||
<el-input v-model='account' class="inptflex" placeholder="请输入账号" clearable />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="meituan-user">
|
|
||||||
<p>密码</p>
|
|
||||||
<el-input v-model='password' class="inptflex" placeholder="请输入密码" clearable />
|
|
||||||
</div>
|
|
||||||
<!-- 登录和注册的按钮切换 -->
|
|
||||||
<div class="reg-view" @click="regi= regi=='登录'? '注册':'登录'"><p>{{regi}}</p></div>
|
|
||||||
<!-- 登录或注册按钮提交 -->
|
|
||||||
<el-button v-if="regi=='注册'" @click="signin" type="primary" class="meituan-btn">登录</el-button>
|
|
||||||
<el-button v-else @click="register" type="primary" class="meituan-btn">注册</el-button>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { reactive,toRefs } from 'vue';
|
|
||||||
|
|
||||||
import http from "axios"
|
|
||||||
|
|
||||||
export default{
|
|
||||||
setup(){
|
|
||||||
const user =reactive({
|
|
||||||
account:'',
|
|
||||||
password:'',
|
|
||||||
regi:'注册'
|
|
||||||
})
|
|
||||||
//登录
|
|
||||||
|
|
||||||
const signin=()=>{
|
|
||||||
console.log(user.account,user.password)
|
|
||||||
http({
|
|
||||||
url:'/sign',
|
|
||||||
method:'post'
|
|
||||||
}).then((res)=>{
|
|
||||||
alert('请求成功!');
|
|
||||||
let username=user.account;
|
|
||||||
let password=user.password;
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//注册
|
|
||||||
const register=()=>{
|
|
||||||
console.log(user.account,user.password)}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return{...toRefs(user),signin,register}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
#backcont {
|
|
||||||
background-image: url(../assets/background.jpg);
|
|
||||||
background-attachment : fixed;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
-webkit-background-size: cover;
|
|
||||||
moz-background-size: cover;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meituan-contentr {
|
|
||||||
position : absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate( -50%,-50%);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.login-cont {
|
|
||||||
width: 500px;
|
|
||||||
height: 300px;
|
|
||||||
background: rgba(255, 255, 255, 0.795);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meituan-title {
|
|
||||||
text-align: center;
|
|
||||||
color:#0000009b;
|
|
||||||
font-size: 30px;
|
|
||||||
padding-top: 15px;
|
|
||||||
font-family : Arial,Helvetica,sans-serif;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.meituan-user {
|
|
||||||
width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-top: 30px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items : center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meituan-user p {
|
|
||||||
width: 50px;
|
|
||||||
color: #000000;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inptflex {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reg-view {
|
|
||||||
width: 400px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-top: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.reg-view p {
|
|
||||||
cursor: ·pointer;
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meituan-btn {
|
|
||||||
width: 200px;
|
|
||||||
display: flex;
|
|
||||||
align-items : center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 10px auto 0 auto;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
198
src/views/test.vue
Normal file
198
src/views/test.vue
Normal file
|
|
@ -0,0 +1,198 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- <script type="module" src_old="https://unpkg.com/@splinetool/viewer@1.1.9/build/spline-viewer.js"></script>-->
|
||||||
|
<!-- <spline-viewer url="https://prod.spline.design/EV4wkoOZwj4KpemL/scene.splinecode"></spline-viewer>-->
|
||||||
|
|
||||||
|
<div ref="graph" style="width:1150px; height: 330px"></div>
|
||||||
|
<!-- <el-card style=" height:600px;width: 31%;" :body-style={padding:0} overflow:hidden >-->
|
||||||
|
<!-- <div style="display:flex;">-->
|
||||||
|
<!-- <el-divider direction="vertical" class="sublabel"></el-divider>-->
|
||||||
|
<!-- <span class='title'>预警提示</span>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <vue-seamless-scroll :data="listData" class="warp">-->
|
||||||
|
<!-- <ul class="item">-->
|
||||||
|
<!-- <li v-for="(item, index) in listData" :key="index">-->
|
||||||
|
<!-- <span class="title" v-text="item.title"></span>-->
|
||||||
|
<!-- <span class="date" v-text="item.date">检测大</span>-->
|
||||||
|
<!-- <span class="t" v-text="item.t"></span>-->
|
||||||
|
<!-- </li>-->
|
||||||
|
<!-- </ul>-->
|
||||||
|
<!-- </vue-seamless-scroll>-->
|
||||||
|
<!-- </el-card>-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import http from "@/utils/request";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
name: 'Example01Basic',
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
listData: [{
|
||||||
|
'title': '无缝滚动第一行无缝滚动第一行',
|
||||||
|
'date': '2017-12-16',
|
||||||
|
't':'ss'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第二行无缝滚动第二行',
|
||||||
|
'date': '2017-12-16',
|
||||||
|
't':'qq'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第三行无缝滚动第三行',
|
||||||
|
'date': '2017-12-16'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第四行无缝滚动第四行',
|
||||||
|
'date': '2017-12-16'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第五行无缝滚动第五行',
|
||||||
|
'date': '2017-12-16'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第六行无缝滚动第六行',
|
||||||
|
'date': '2017-12-16'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第七行无缝滚动第七行',
|
||||||
|
'date': '2017-12-16'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第八行无缝滚动第八行',
|
||||||
|
'date': '2017-12-16'
|
||||||
|
}, {
|
||||||
|
'title': '无缝滚动第九行无缝滚动第九行',
|
||||||
|
'date': '2017-12-16'
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
// console.log('start')
|
||||||
|
// http.get('http://61.240.140.173:8000/graph/get_similarity_history/?company_id=91510100201958223R').then((res)=>{
|
||||||
|
// console.log(res.data.data)
|
||||||
|
// })
|
||||||
|
// this.loadFunc().then((v)=>{
|
||||||
|
// console.log(v)
|
||||||
|
// })
|
||||||
|
// console.log('end')
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
init(){
|
||||||
|
const boxplotData =[100,200,560,222,456]
|
||||||
|
let echart = echarts.init(this.$refs.graph)
|
||||||
|
let option = {
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: '折线图堆叠'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: [
|
||||||
|
// 第一个grid用于折线图
|
||||||
|
{
|
||||||
|
left: '0%', // 或其他适合的百分比，留出左侧空间
|
||||||
|
right: '95%', // 为右侧箱型图预留空间
|
||||||
|
height: '80%', // 调整高度，按需设定
|
||||||
|
},
|
||||||
|
// 第二个grid用于箱型图，紧挨着第一个grid的右侧
|
||||||
|
{
|
||||||
|
left: '5%', // 紧接上一个grid右侧开始
|
||||||
|
right: '0%', // 保持一定右侧边距
|
||||||
|
|
||||||
|
height: '80%', // 调整高度，与第一个grid一致
|
||||||
|
},
|
||||||
|
],
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
position: 'bottom',
|
||||||
|
gridIndex: 0,
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
},{
|
||||||
|
type: 'category',
|
||||||
|
data: ['1','2','3'], // 可以为空，因为我们不直接在x轴上显示数据
|
||||||
|
gridIndex: 1,
|
||||||
|
// show: false, // 可选，隐藏这个x轴的标签和轴线
|
||||||
|
position: 'bottom',
|
||||||
|
},],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
|
||||||
|
gridIndex: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
show:false,
|
||||||
|
gridIndex: 1
|
||||||
|
}],
|
||||||
|
series: [
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '直接访问',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '搜索引擎',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'boxplot',
|
||||||
|
data:[{value: boxplotData,} ],
|
||||||
|
// 确保箱型图显示在折线图之后
|
||||||
|
// zlevel: 3,
|
||||||
|
// 箱型图的x轴数据应对应未来一个月的日期，由于这些日期没有具体值，我们使用null，ECharts会自动处理
|
||||||
|
xAxisIndex: 1, // 确保使用同一个x轴
|
||||||
|
yAxisIndex: 1, // 确保使用同一个x轴
|
||||||
|
// ... 箱型图其他配置，如颜色、样式等
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
echart.setOption(option)
|
||||||
|
},
|
||||||
|
loadFunc(){
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
setTimeout( resolve,3000,'success')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.warp {
|
||||||
|
height: 270px;
|
||||||
|
width: 360px;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
li,
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
1065
src/views/事件分析.vue
1065
src/views/事件分析.vue
File diff suppressed because it is too large
Load Diff
|
|
@ -1,25 +1,932 @@
|
||||||
<!-- 事件分析-事件图谱 -->
|
<!-- 事件分析-事件图谱 -->
|
||||||
|
<!-- 11.6合并版 -->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
事件分析-事件图谱
|
<!-- 关系图/知识图谱：笛卡尔坐标系上的 Graph -->
|
||||||
|
<div class="two">
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<!-- inline="true"表单域在一行 -->
|
||||||
|
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
||||||
|
<el-form-item label="公司名称">
|
||||||
|
<el-input v-model="formInline1.company" placeholder="公司名称：" size="mini"></el-input>
|
||||||
|
<!-- 搜索联想-->
|
||||||
|
<!-- <el-autocomplete-->
|
||||||
|
<!-- class="inline-input"-->
|
||||||
|
<!-- v-model="formInline1.company"-->
|
||||||
|
<!-- :fetch-suggestions="querySearch"-->
|
||||||
|
<!-- placeholder="公司名称"-->
|
||||||
|
<!-- size="mini"-->
|
||||||
|
<!-- ></el-autocomplete>-->
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="事件类型">
|
||||||
|
<el-select v-model="formInline1.event_type" placeholder="事件类型：" size="mini">
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始时间">
|
||||||
|
<el-date-picker v-model="formInline1.start_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="结束时间">
|
||||||
|
<el-date-picker v-model="formInline1.end_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button class="grayish_btn" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item>-->
|
||||||
|
<!-- <el-button class="grayish_btn" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
<el-card :body-style={padding:0} style='height: 510px;'>
|
||||||
|
<!-- 1、上标 -->
|
||||||
|
<span class="superscript" style="width: 20px; height: 40px;">事件图谱</span>
|
||||||
|
<div>
|
||||||
|
<div ref="echarts_1" style="height: 500px"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 2、产品搜索栏 -->
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<el-dialog :visible.sync="dialogVisible" width="100%" >
|
||||||
|
<!-- 详细信息 -->
|
||||||
|
<el-card style=" height:100%;margin-bottom:10px ; " :body-style={padding:0} >
|
||||||
|
<div style="display:flex;">
|
||||||
|
<el-divider direction="vertical" class="sublabel"></el-divider>
|
||||||
|
<span class='title'>事件详情</span>
|
||||||
|
</div>
|
||||||
|
<el-table :data="detailData"
|
||||||
|
style="width: 100%"
|
||||||
|
:header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
|
border
|
||||||
|
: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"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
width="500"
|
||||||
|
prop="事件名称"
|
||||||
|
label="事件名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
width="300"
|
||||||
|
prop="法人代表"
|
||||||
|
label="法人代表">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
width="200"
|
||||||
|
prop="事件日期"
|
||||||
|
label="事件日期">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
width="50"
|
||||||
|
prop="分歧度"
|
||||||
|
label="分歧度">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
width="80"
|
||||||
|
prop="等级"
|
||||||
|
label="风险等级">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
</el-card>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script >
|
||||||
|
import qs from 'qs'
|
||||||
|
// import { getData } from "../api";
|
||||||
|
import * as echarts from "echarts"
|
||||||
|
import http from '../utils/request'
|
||||||
|
import {Loading} from "element-ui";
|
||||||
export default {
|
export default {
|
||||||
|
name:'event_graph',
|
||||||
components:{
|
components:{
|
||||||
|
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
dialogVisible:false,
|
||||||
|
detailData:[],
|
||||||
|
tableData:[],
|
||||||
|
// 【接收数据】
|
||||||
|
sentiment:[],
|
||||||
|
clout:[],
|
||||||
|
targetId:'',
|
||||||
|
formInline1: {
|
||||||
|
company: '',
|
||||||
|
event_type: '',
|
||||||
|
start_date:'',
|
||||||
|
end_date:'',
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 【选择框】
|
||||||
|
options:[
|
||||||
|
{
|
||||||
|
value: '',
|
||||||
|
label: '全部'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '股权增持',
|
||||||
|
label: '股权增持'
|
||||||
|
}, {
|
||||||
|
value: '股东减持',
|
||||||
|
label: '股东减持'
|
||||||
|
}, {
|
||||||
|
value: '股权质押',
|
||||||
|
label: '股权质押'
|
||||||
|
}, {
|
||||||
|
value: '其他',
|
||||||
|
label: '其他'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '重大财产损失',
|
||||||
|
label: '重大财产损失'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '重大安全事故',
|
||||||
|
label: '重大安全事故'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '股权冻结',
|
||||||
|
label: '股权冻结'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '高层死亡',
|
||||||
|
label: '高层死亡'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '破产清算',
|
||||||
|
label: '破产清算'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '重大对外赔付',
|
||||||
|
label: '重大对外赔付'
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
,
|
||||||
|
|
||||||
|
option_detail_company: [{
|
||||||
|
value: '公司1',
|
||||||
|
label: '公司1'
|
||||||
|
}, {
|
||||||
|
value: '公司2',
|
||||||
|
label: '公司2'
|
||||||
|
}],
|
||||||
|
option_detail_time: [{
|
||||||
|
value: '一天内',
|
||||||
|
label: '一天内'
|
||||||
|
}, {
|
||||||
|
value: '近三天',
|
||||||
|
label: '近三天'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
value: '一周内',
|
||||||
|
label: '一周内'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
value: '一个月内',
|
||||||
|
label: '一个月内'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
value: '一年内',
|
||||||
|
label: '一年内'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
option_prediction: [
|
||||||
|
{
|
||||||
|
value: '一小时内',
|
||||||
|
label: '一小时内'
|
||||||
|
}, {
|
||||||
|
value: '三小时内',
|
||||||
|
label: '三小时内'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
value: '六小时内',
|
||||||
|
label: '六小时内'
|
||||||
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
value: '一天内',
|
||||||
|
label: '一天内'
|
||||||
|
}, {
|
||||||
|
value: '近三天',
|
||||||
|
label: '近三天'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
value: '一周内',
|
||||||
|
label: '一周内'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
value: '一个月内',
|
||||||
|
label: '一个月内'
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
value: '一年内',
|
||||||
|
label: '一年内'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 【知识图谱】
|
||||||
|
old_data:[
|
||||||
|
{事件标题:"XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/1/4",},
|
||||||
|
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"积极",
|
||||||
|
事件热度:"30",
|
||||||
|
时间:"2022/1/4",},
|
||||||
|
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"消极",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/1/4",},
|
||||||
|
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"消极",
|
||||||
|
事件热度:"30",
|
||||||
|
时间:"2022/1/4",},
|
||||||
|
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"30",
|
||||||
|
时间:"2022/1/4",},
|
||||||
|
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"积极",
|
||||||
|
事件热度:"30",
|
||||||
|
时间:"2022/3/8",},
|
||||||
|
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/10",},
|
||||||
|
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||||||
|
情感倾向:"消极",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/10",},
|
||||||
|
{ 事件标题: 8,
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"30",
|
||||||
|
时间:"2022/3/10",},
|
||||||
|
{ 事件标题: 9,
|
||||||
|
情感倾向:"消极",
|
||||||
|
事件热度:"30",
|
||||||
|
时间:"2022/3/14",},
|
||||||
|
{ 事件标题: 10,
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/14",},
|
||||||
|
{ 事件标题:11,
|
||||||
|
情感倾向:"积极",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/18",},
|
||||||
|
{ 事件标题: 12,
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/18",},
|
||||||
|
{ 事件标题: 13,
|
||||||
|
情感倾向:"积极",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/18",},
|
||||||
|
{ 事件标题: 14,
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/18",},
|
||||||
|
{ 事件标题: 15,
|
||||||
|
情感倾向:"消极",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/30",},
|
||||||
|
{ 事件标题: 16,
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/26",},
|
||||||
|
{ 事件标题: 17,
|
||||||
|
情感倾向:"消极",
|
||||||
|
事件热度:"30",
|
||||||
|
时间:"2022/3/26",},
|
||||||
|
{ 事件标题: 18,
|
||||||
|
情感倾向:"中性",
|
||||||
|
事件热度:"45",
|
||||||
|
时间:"2022/3/26",},],
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 图数据
|
||||||
|
// 查看详情-card2-事件热度分析
|
||||||
|
circularData1: [
|
||||||
|
{ value: 735, name: '积极' },
|
||||||
|
{ value: 735, name: '消极' }
|
||||||
|
// { value: 580, name: 'Email' },
|
||||||
|
// { value: 484, name: 'Union Ads' },
|
||||||
|
// { value: 300, name: 'Video Ads' }
|
||||||
|
],
|
||||||
|
circularData2: [
|
||||||
|
{ value: 4445, name: '积极' },
|
||||||
|
{ value: 735, name: '消极' }
|
||||||
|
// { value: 580, name: 'Email' },
|
||||||
|
// { value: 484, name: 'Union Ads' },
|
||||||
|
// { value: 300, name: 'Video Ads' }
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted(){
|
||||||
|
//关系图
|
||||||
|
//基于准备好的dom，初始化echarts实例
|
||||||
|
// var ROOT_PATH = 'https://echarts.apache.org/examples';
|
||||||
|
// console.log(this.old_data.情感倾向)
|
||||||
|
const echarts1 = echarts.init(this.$refs.echarts_1)
|
||||||
|
var legends = ['消极', '中性', '积极'];
|
||||||
|
var colors=[ "#D9001B","#009DD9","#90F204"]
|
||||||
|
const markLineList=[] //垂直线
|
||||||
|
const timeList=[]//存不重复的时间
|
||||||
|
const nor_time=[]//存所有的时间
|
||||||
|
const nodeid=[]
|
||||||
|
const new_data=[]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var count=0
|
||||||
|
for(let {时间: time} of this.old_data){
|
||||||
|
nor_time.push(time)
|
||||||
|
// 返回值等于-1 说明数组timeList中不存在time,则存入
|
||||||
|
if(timeList.indexOf(time)==-1 ){
|
||||||
|
timeList.push(time)
|
||||||
|
nodeid.push(count)
|
||||||
|
markLineList.push({xAxis: count})
|
||||||
|
count=count+1
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
timeList.sort(function (a, b) {
|
||||||
|
return a - b; //a - b < 0: 代表后一个比前一个大，就是升序
|
||||||
|
})
|
||||||
|
|
||||||
|
const x_y=[]
|
||||||
|
// console.log(timeList.length)
|
||||||
|
for (var i = 0; i < timeList.length; i++) {
|
||||||
|
|
||||||
|
var x=i
|
||||||
|
var y=1//初始为1让坐标轴暴露更明显
|
||||||
|
for (var item of nor_time){
|
||||||
|
if(item===timeList[i] ){
|
||||||
|
y+=1
|
||||||
|
x_y.push([x,y])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// console.log(x_y)
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < this.old_data.length; i++) {
|
||||||
|
var index=legends.indexOf(this.old_data[i].情感倾向)
|
||||||
|
|
||||||
|
new_data.push({
|
||||||
|
id:i,
|
||||||
|
name:this.old_data[i].事件标题,
|
||||||
|
// label注释掉，tooltip才会正常显示
|
||||||
|
// label: {
|
||||||
|
//
|
||||||
|
// show: true,
|
||||||
|
// position: "bottom",
|
||||||
|
// fontSize: 13,
|
||||||
|
// width:2,
|
||||||
|
// overflow:'break',
|
||||||
|
// formatter:'{b}:',
|
||||||
|
// // data:legends[index],
|
||||||
|
// // color: "rgb(0, 0, 0)",
|
||||||
|
// },
|
||||||
|
// color: colors[index],
|
||||||
|
symbolSize:this.old_data[i].事件热度,
|
||||||
|
// symbolSize:20,
|
||||||
|
value: x_y[i],
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowBlur: 2,
|
||||||
|
shadowColor: '#999999',
|
||||||
|
color: colors[index],
|
||||||
|
},
|
||||||
|
tooltip:{show:true,
|
||||||
|
trigger:'axis',
|
||||||
|
triggeron:'mousemove',
|
||||||
|
formatter:'event'
|
||||||
|
},
|
||||||
|
|
||||||
|
})}
|
||||||
|
|
||||||
|
|
||||||
|
// console.log(new_data)
|
||||||
|
const option = {
|
||||||
|
// 右上角存图
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
// title: {
|
||||||
|
// text: '笛卡尔坐标系上的 Graph'
|
||||||
|
// },
|
||||||
|
xAxis:[ {
|
||||||
|
// type : 'category',
|
||||||
|
// boundaryGap : false,
|
||||||
|
data : timeList
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: {
|
||||||
|
show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||||
|
// type : 'category',//注释后，数轴0开始，不然点会遮住坐标轴
|
||||||
|
// boundaryGap : false,//位于点还是位于区域
|
||||||
|
// data: ['a','b','c','d']
|
||||||
},
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['消极', '中性', '积极'], //图例的数据
|
||||||
|
top: "15%", //图例的位置
|
||||||
|
icon:"circle", //图例的形状
|
||||||
|
x: 'right', //图例在右侧
|
||||||
|
orient: 'vertical', //图例纵向排布 horizontal为横向排布
|
||||||
|
textStyle: { //图例字体的颜色
|
||||||
|
color: "#ffffff"
|
||||||
|
}},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'graph',
|
||||||
|
// layout: 'none',
|
||||||
|
coordinateSystem: 'cartesian2d',
|
||||||
|
|
||||||
|
// 垂直线
|
||||||
|
markLine: {
|
||||||
|
symbol: ['none', 'none'],
|
||||||
|
label: { show: false },
|
||||||
|
data: markLineList,
|
||||||
|
lineStyle: {//标注线样式
|
||||||
|
type: 'dashed',//虚线
|
||||||
|
color: '#999999',//标注线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// label: {
|
||||||
|
//
|
||||||
|
// show: true,
|
||||||
|
// position: "bottom",
|
||||||
|
// fontSize: 13,
|
||||||
|
// width:5,
|
||||||
|
// overflow:'truncate',
|
||||||
|
// formatter:'{b}:',
|
||||||
|
// // data:legends[index],
|
||||||
|
// // color: "rgb(0, 0, 0)",
|
||||||
|
// },
|
||||||
|
// 边两段的类型和大小
|
||||||
|
edgeSymbol: ['circle', 'circle'],
|
||||||
|
edgeSymbolSize: [4,4],
|
||||||
|
//
|
||||||
|
data:new_data,
|
||||||
|
//显示节点备注
|
||||||
|
// itemStyle : {
|
||||||
|
// normal: {label : {show: true}},
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#000'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// 边
|
||||||
|
links: [
|
||||||
|
{source: 0, target: 5},
|
||||||
|
{source: 5, target: 6},
|
||||||
|
{source: 1, target: 7},
|
||||||
|
{source: 2, target: 8},
|
||||||
|
{source: 3, target: 13},
|
||||||
|
{source: 8, target: 9},
|
||||||
|
],
|
||||||
|
lineStyle: {//关系线样式
|
||||||
|
type: 'solid',//实线
|
||||||
|
color: "rgb(0, 0, 0,80%)",//标注线颜色
|
||||||
|
width: "2",
|
||||||
|
},
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
echarts1.setOption(option)
|
||||||
|
console.log(echarts1.getOption())
|
||||||
|
echarts1.on('click',function (params){
|
||||||
|
// console.log(params.name)
|
||||||
|
})
|
||||||
|
// this.tableData=JSON.parse(sessionStorage.getItem('eventData'))
|
||||||
|
if (this.tableData.length!==0)
|
||||||
|
this.changeChart()
|
||||||
|
// let target=JSON.parse(sessionStorage.getItem('target'))
|
||||||
|
// this.formInline1.company=target[0]
|
||||||
|
// this.formInline1.event_type=target[1]
|
||||||
|
// this.formInline1.start_date=target[2]
|
||||||
|
// this.formInline1.end_date=target[3]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
methods:{
|
methods:{
|
||||||
|
|
||||||
|
test(){
|
||||||
|
console.log('test')
|
||||||
},
|
},
|
||||||
|
// 调整表格列宽
|
||||||
|
calculateColumnWidth(prop) {
|
||||||
|
const text = String(this.tableData[0][prop]); // 使用第一行的数据作为示例
|
||||||
|
const calculatedWidth = text.length;
|
||||||
|
console.log('console.log(calculatedWidth):',calculatedWidth)
|
||||||
|
if(calculatedWidth>10 && calculatedWidth<=50){
|
||||||
|
const baseWidth= 20 + calculatedWidth * 0.3
|
||||||
|
return `${baseWidth}px`;
|
||||||
|
}
|
||||||
|
if(calculatedWidth>50){
|
||||||
|
const baseWidth= 20 + calculatedWidth * 0.5
|
||||||
|
return `${baseWidth}px`;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return "20px";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//新闻联想搜索
|
||||||
|
querySearch(queryString, cb) {
|
||||||
|
// console.log(queryString)
|
||||||
|
// console.log(cb)
|
||||||
|
http.get(
|
||||||
|
"/search/search_news/?name=?"+queryString,
|
||||||
|
|
||||||
|
// paramsSerializer: params => {
|
||||||
|
// return qs.stringify(params, { indices: false })
|
||||||
|
).then(response => {
|
||||||
|
// console.log(response.data)
|
||||||
|
// console.log(cb)
|
||||||
|
let result=response.data
|
||||||
|
let re=[]
|
||||||
|
for (let i of result){
|
||||||
|
re.push({"value":i})
|
||||||
|
}
|
||||||
|
cb(re)
|
||||||
|
})},
|
||||||
|
// 1、表
|
||||||
|
onSubmit1(){//事件分析
|
||||||
|
this.tableData.length=0
|
||||||
|
let options={
|
||||||
|
text:'请稍等'
|
||||||
|
}
|
||||||
|
let loadingInstance = Loading.service(options);
|
||||||
|
http.get(
|
||||||
|
"/event2/event_analyse/",
|
||||||
|
{params:{
|
||||||
|
name: this.formInline1.company,
|
||||||
|
event_type:this.formInline1.event_type,
|
||||||
|
start:this.formInline1.start_date,
|
||||||
|
end:this.formInline1.end_date,
|
||||||
|
need:1
|
||||||
|
}}).then(response => {
|
||||||
|
this.tableData = response.data.data.data
|
||||||
|
let links= response.data.data.edges
|
||||||
|
let intLink=[]
|
||||||
|
// for (let i in links){
|
||||||
|
// intLink.push({source:parseInt(links[i]['source']),target:parseInt(links[i]['target'])})
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
for (let i in links){
|
||||||
|
intLink.push({source:this.tableData.find(function(obj) {
|
||||||
|
return obj.order === parseInt(links[i]['source'])}).title,
|
||||||
|
target:this.tableData.find(function(obj) {
|
||||||
|
return obj.order === parseInt(links[i]['target'])}).title
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
console.log(intLink)
|
||||||
|
this.changeChart(intLink)
|
||||||
|
})
|
||||||
|
loadingInstance.close()
|
||||||
|
},
|
||||||
|
changeChart(links){
|
||||||
|
// console.log(this.tableData)
|
||||||
|
//关系图
|
||||||
|
//基于准备好的dom，初始化echarts实例
|
||||||
|
// var ROOT_PATH = 'https://echarts.apache.org/examples';
|
||||||
|
const echarts1 = echarts.init(this.$refs.echarts_1)
|
||||||
|
const markLineList=[] //垂直线
|
||||||
|
const timeList=[]//存不重复的时间
|
||||||
|
const nor_time=[]//存所有的时间
|
||||||
|
const nodeid=[]
|
||||||
|
const new_data=[]
|
||||||
|
var count=0
|
||||||
|
for(let {publish_time: time} of this.tableData){
|
||||||
|
// console.log(time)
|
||||||
|
nor_time.push(time)
|
||||||
|
// 返回值等于-1 说明数组timeList中不存在time,则存入
|
||||||
|
if(timeList.indexOf(time)===-1 ){
|
||||||
|
timeList.push(time)
|
||||||
|
nodeid.push(count)
|
||||||
|
markLineList.push({xAxis: count})
|
||||||
|
count=count+1
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// console.log(timeList)
|
||||||
|
timeList.sort(function (a, b) {
|
||||||
|
if( a.split(' ')[0]<b.split(' ')[0] || a.split(' ')[0]===b.split(' ')[0] && a.split(' ')[1]<b.split(' ')[1])
|
||||||
|
return -1; //a - b < 0: 代表后一个比前一个大，就是升序
|
||||||
|
else if ( a.split(' ')[0]>b.split(' ')[0] || a.split(' ')[0]===b.split(' ')[0] && a.split(' ')[1]>b.split(' ')[1])
|
||||||
|
return 1
|
||||||
|
else return 0
|
||||||
|
})
|
||||||
|
// console.log(timeList)
|
||||||
|
let tmp=[]
|
||||||
|
// 仅显示部分新闻
|
||||||
|
if (this.tableData.length>20) {
|
||||||
|
var p = 20 / this.tableData.length
|
||||||
|
this.$notify.info({
|
||||||
|
title: '提示',
|
||||||
|
message: '事件图谱仅显示部分数据'
|
||||||
|
});
|
||||||
|
for (let i = 0; i < this.tableData.length; i++) {
|
||||||
|
// let index=legends.indexOf(this.old_data[i].情感倾向)
|
||||||
|
let y = Math.floor(Math.random() * 10 ) + 1 //随机散列开
|
||||||
|
if (Math.random() < p) {
|
||||||
|
let x = timeList.indexOf(this.tableData[i].publish_time)
|
||||||
|
while (tmp.find(value => value === [x, y]))
|
||||||
|
y=Math.floor(Math.random() * 10 ) + 1 //随机散列开
|
||||||
|
tmp.push([x, y])
|
||||||
|
// console.log(x, y)
|
||||||
|
new_data.push({
|
||||||
|
id: parseInt(this.tableData[i].order),
|
||||||
|
name: this.tableData[i].title, //根据name连边
|
||||||
|
// name: this.tableData[i].title,
|
||||||
|
// label: {
|
||||||
|
// normal: {
|
||||||
|
// show: true,
|
||||||
|
// position: "bottom",
|
||||||
|
// textStyle: {
|
||||||
|
// fontSize: 8
|
||||||
|
// },},
|
||||||
|
//
|
||||||
|
// // data:legends[index],
|
||||||
|
// color: "rgb(0, 0, 0)",
|
||||||
|
// },
|
||||||
|
// color: colors[index],
|
||||||
|
symbolSize: this.tableData[i].clout * 30,
|
||||||
|
// symbolSize:20,
|
||||||
|
value: [x, y],
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowBlur: 2,
|
||||||
|
shadowColor: '#999999',
|
||||||
|
color: 'green',
|
||||||
|
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
triggeron: 'mousemove',
|
||||||
|
formatter: 'event'
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
for (let i = 0; i < this.tableData.length; i++) {
|
||||||
|
// let index=legends.indexOf(this.old_data[i].情感倾向)
|
||||||
|
let y = Math.floor(Math.random() * 10) + 1
|
||||||
|
let x = timeList.indexOf(this.tableData[i].publish_time)
|
||||||
|
while (tmp.find(value => value === [x, y]))
|
||||||
|
y=Math.floor(Math.random() * 10) + 1
|
||||||
|
tmp.push([x, y])
|
||||||
|
console.log(x, y)
|
||||||
|
new_data.push({
|
||||||
|
id: parseInt(this.tableData[i].order),
|
||||||
|
name: this.tableData[i].title, //根据name连边
|
||||||
|
// label: {
|
||||||
|
// normal: {
|
||||||
|
// show: true,
|
||||||
|
// position: "bottom",
|
||||||
|
// textStyle: {
|
||||||
|
// fontSize: 8
|
||||||
|
// },},
|
||||||
|
//
|
||||||
|
// // data:legends[index],
|
||||||
|
// color: "rgb(0, 0, 0)",
|
||||||
|
// },
|
||||||
|
// color: colors[index],
|
||||||
|
symbolSize: this.tableData[i].clout * 30,
|
||||||
|
// symbolSize:20,
|
||||||
|
value: [x, y],
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowBlur: 2,
|
||||||
|
shadowColor: '#999999',
|
||||||
|
color: 'green',
|
||||||
|
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
triggeron: 'mousemove',
|
||||||
|
formatter: 'event'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const option = {
|
||||||
|
// 右上角存图
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// title: {
|
||||||
|
// text: '笛卡尔坐标系上的 Graph'
|
||||||
|
// },
|
||||||
|
xAxis:[ {
|
||||||
|
// type : 'category',
|
||||||
|
// boundaryGap : false,
|
||||||
|
data : timeList
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: {
|
||||||
|
show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||||
|
// type : 'category',//注释后，数轴0开始，不然点会遮住坐标轴
|
||||||
|
// boundaryGap : false,//位于点还是位于区域
|
||||||
|
// data: ['a','b','c','d']
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['消极', '中性', '积极'], //图例的数据
|
||||||
|
top: "15%", //图例的位置
|
||||||
|
icon:"circle", //图例的形状
|
||||||
|
x: 'right', //图例在右侧
|
||||||
|
orient: 'vertical', //图例纵向排布 horizontal为横向排布
|
||||||
|
textStyle: { //图例字体的颜色
|
||||||
|
color: "#ffffff"
|
||||||
|
}},
|
||||||
|
// legend: {
|
||||||
|
// normal: {
|
||||||
|
// data: ['消极', '中性', '积极'],
|
||||||
|
// show: true,}
|
||||||
|
// },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'graph',
|
||||||
|
// layout: 'none',
|
||||||
|
coordinateSystem: 'cartesian2d',
|
||||||
|
|
||||||
|
// 垂直线
|
||||||
|
markLine: {
|
||||||
|
symbol: ['none', 'none'],
|
||||||
|
label: { show: false },
|
||||||
|
data: markLineList,
|
||||||
|
lineStyle: {//标注线样式
|
||||||
|
|
||||||
|
type: 'dashed',//虚线
|
||||||
|
color: '#999999',//标注线颜色
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// 边两段的类型和大小
|
||||||
|
edgeSymbol: ['circle', 'circle'],
|
||||||
|
edgeSymbolSize: [4,4],
|
||||||
|
//
|
||||||
|
data:new_data,
|
||||||
|
|
||||||
|
//显示节点备注
|
||||||
|
// itemStyle : {
|
||||||
|
// normal: {label : {show: true}},
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#000'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// 边
|
||||||
|
links: links,
|
||||||
|
|
||||||
|
// [
|
||||||
|
// {source: 0, target: 5},
|
||||||
|
// {source: 5, target: 6},
|
||||||
|
// {source: 1, target: 7},
|
||||||
|
// {source: 2, target: 8},
|
||||||
|
// {source: 3, target: 13},
|
||||||
|
// {source: 8, target: 9},
|
||||||
|
// ],
|
||||||
|
lineStyle: {//关系线样式
|
||||||
|
type: 'solid',//实线
|
||||||
|
color: "rgb(0, 0, 0,80%)",//标注线颜色
|
||||||
|
width: "2",
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
echarts1.setOption(option)
|
||||||
|
console.log(echarts1.getOption())
|
||||||
|
// 点击事件弹窗
|
||||||
|
echarts1.on('click',(parms)=>{
|
||||||
|
console.log(parms)
|
||||||
|
http.get('/event2/event_graph/',
|
||||||
|
{params:{
|
||||||
|
id:parms.data.id
|
||||||
|
}}
|
||||||
|
).then((res)=>{
|
||||||
|
console.log(res.data)
|
||||||
|
this.detailData.length=0
|
||||||
|
this.detailData.push(res.data)
|
||||||
|
this.dialogVisible=true
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
open(){
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 执行echarts方法
|
||||||
|
// this.initEcharts1()
|
||||||
|
this.initEcharts2()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='less' scoped>
|
<style lang="less" scoped>
|
||||||
|
// 调整表头间隔、设置表头下方边框颜色
|
||||||
|
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: 1px solid rgba(224, 223, 223, 0.771) !important;
|
||||||
|
padding: 0px 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
.el-table .el-table__cell {
|
||||||
|
padding: 12px 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
/deep/ .active_header{//表头
|
||||||
|
color: #333333;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center !important;
|
||||||
|
// height: 1px;
|
||||||
|
}
|
||||||
|
/deep/ .content_center{//表的内容
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.one{
|
||||||
|
.form{//产品搜索栏
|
||||||
|
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;//左右贴边
|
||||||
|
margin-top:5px;
|
||||||
|
// height: 40px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding: 0px 20px 2px 20px;//返回表格添加间隙 上 右
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
color:rgba(2, 167, 240, 0.729411764705882);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.two{
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
// 详情页
|
||||||
|
.flex-charts{//并列图
|
||||||
|
// margin-top:20px;
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
// padding:20px;
|
||||||
|
}
|
||||||
|
.grayish_btn{//浅灰色按钮
|
||||||
|
color: #fff;//文字颜色
|
||||||
|
background-color: #aaaaaa;//背景颜色
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
<!-- 第一栏"健康指数"的表格 -->
|
<!-- 第一栏"健康指数"的表格 -->
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<el-table :data="tableData_1"
|
<el-table :data="tableData_1" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||||||
border
|
border
|
||||||
height="250"
|
height="250"
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
|
|
@ -159,7 +159,7 @@
|
||||||
<!-- 2、对比 -->
|
<!-- 2、对比 -->
|
||||||
<el-tab-pane label="对比">
|
<el-tab-pane label="对比">
|
||||||
<!-- 2-1-雷达图对比 -->
|
<!-- 2-1-雷达图对比 -->
|
||||||
<el-card style=" height:770px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
<el-card style=" height:850px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||||||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px">雷达图对比</div>
|
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px">雷达图对比</div>
|
||||||
|
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
|
|
@ -180,7 +180,7 @@
|
||||||
:fetch-suggestions="querySearch"
|
:fetch-suggestions="querySearch"
|
||||||
placeholder="公司名称"
|
placeholder="公司名称"
|
||||||
></el-autocomplete>
|
></el-autocomplete>
|
||||||
<el-form-item label="时间 " style=" margin-right: 40px;">
|
<el-form-item label="时间 " style=" margin-right: 40px;margin-left: 40px;">
|
||||||
<quter-component label="开始时间" v-model="formInline2.quarter_year" placeholder="选择季度" />
|
<quter-component label="开始时间" v-model="formInline2.quarter_year" placeholder="选择季度" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -193,17 +193,17 @@
|
||||||
|
|
||||||
<!-- 雷达图 -->
|
<!-- 雷达图 -->
|
||||||
<div class='radar' >
|
<div class='radar' >
|
||||||
<div class="quarter_change">
|
<!-- <div class="quarter_change">-->
|
||||||
<i class="el-icon-arrow-left" border style="font-size: 50px;color:#7f7f7f"></i>
|
<!-- <i class="el-icon-arrow-left" border style="font-size: 50px;color:#7f7f7f"></i>-->
|
||||||
<div>上一季度</div>
|
<!-- <div>上一季度</div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
|
|
||||||
<div ref="echarts_1" style="height:500px;width:500px"></div>
|
<div ref="echarts_1" style="height:500px;width:500px"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- "对比"表格 -->
|
<!-- "对比"表格 -->
|
||||||
<div class="table" style="padding:20px">
|
<div class="table" style="padding:20px">
|
||||||
<el-table :data="tableData_2_1"
|
<el-table :data="tableData_2_1" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||||||
border
|
border
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'3px'}"
|
:cell-style="{padding:'3px'}"
|
||||||
|
|
@ -289,7 +289,7 @@
|
||||||
</el-card>
|
</el-card>
|
||||||
<!-- "对比-交叉对比-行业"表格 -->
|
<!-- "对比-交叉对比-行业"表格 -->
|
||||||
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--返回表格添加间隙 上 右 -->
|
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--返回表格添加间隙 上 右 -->
|
||||||
<el-table :data="tableData_2_2"
|
<el-table :data="tableData_2_2" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||||||
border
|
border
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'3px'}"
|
:cell-style="{padding:'3px'}"
|
||||||
|
|
@ -335,7 +335,7 @@
|
||||||
|
|
||||||
<!-- "对比-交叉对比-地域"表格 -->
|
<!-- "对比-交叉对比-地域"表格 -->
|
||||||
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--返回表格添加间隙 上 右 -->
|
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--返回表格添加间隙 上 右 -->
|
||||||
<el-table :data="tableData_2_3"
|
<el-table :data="tableData_2_3" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||||||
border
|
border
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'3px'}"
|
:cell-style="{padding:'3px'}"
|
||||||
|
|
@ -359,7 +359,7 @@
|
||||||
<el-tab-pane label="我的管理">
|
<el-tab-pane label="我的管理">
|
||||||
<!-- 第三栏"我的管理"的表格 -->
|
<!-- 第三栏"我的管理"的表格 -->
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<el-table :data="tableData_3"
|
<el-table :data="tableData_3" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||||||
|
|
||||||
|
|
||||||
border
|
border
|
||||||
|
|
@ -398,6 +398,7 @@ import quterComponent from "@/components/quterComponent";
|
||||||
import * as echarts from "echarts"
|
import * as echarts from "echarts"
|
||||||
import http from '../utils/request'
|
import http from '../utils/request'
|
||||||
export default {
|
export default {
|
||||||
|
name:'health',
|
||||||
components:{
|
components:{
|
||||||
quterComponent
|
quterComponent
|
||||||
},
|
},
|
||||||
|
|
@ -513,9 +514,9 @@ tableLabel_long: {
|
||||||
// [table-data]
|
// [table-data]
|
||||||
// 第1栏"健康指数"表格
|
// 第1栏"健康指数"表格
|
||||||
tableData_1: [
|
tableData_1: [
|
||||||
{ name: '中国银行',
|
// { name: '中国银行',
|
||||||
index: 1,
|
// index: 1,
|
||||||
level: "中等",},
|
// level: "中等",},
|
||||||
],
|
],
|
||||||
// 第2栏"对比"表格
|
// 第2栏"对比"表格
|
||||||
tableData_2_1: [
|
tableData_2_1: [
|
||||||
|
|
@ -621,7 +622,7 @@ tableLabel_long: {
|
||||||
},
|
},
|
||||||
|
|
||||||
onSubmit6(){
|
onSubmit6(){
|
||||||
if (this.tableData_2_1){
|
if (this.tableData_2_1 || this.formInline2.radarData1 ||this.formInline2.radarData2){
|
||||||
this.formInline2.radarData1.length=0
|
this.formInline2.radarData1.length=0
|
||||||
this.formInline2.radarData2.length=0
|
this.formInline2.radarData2.length=0
|
||||||
this.tableData_2_1.length=0
|
this.tableData_2_1.length=0
|
||||||
|
|
@ -661,6 +662,8 @@ tableLabel_long: {
|
||||||
this.formInline2.tableData2.name=this.formInline2.company2
|
this.formInline2.tableData2.name=this.formInline2.company2
|
||||||
for (let i in response.data.data)
|
for (let i in response.data.data)
|
||||||
if (i !=='健康指数' && i !=='等级' && typeof response.data.data[i]==='number') this.formInline2.radarData2.push(response.data.data[i])
|
if (i !=='健康指数' && i !=='等级' && typeof response.data.data[i]==='number') this.formInline2.radarData2.push(response.data.data[i])
|
||||||
|
console.log(this.formInline2.radarData2)
|
||||||
|
console.log(this.formInline2.radarData1)
|
||||||
const echarts1 = echarts.init(this.$refs.echarts_1)
|
const echarts1 = echarts.init(this.$refs.echarts_1)
|
||||||
|
|
||||||
this.tableData_2_1.push( this.formInline2.tableData2)
|
this.tableData_2_1.push( this.formInline2.tableData2)
|
||||||
|
|
@ -897,7 +900,7 @@ tableLabel_long: {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: '2011年第一季度',
|
text: this.formInline1.quarter_year.slice(0,4)+'年第'+this.formInline1.quarter_year.slice(6,)+'季度',
|
||||||
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||||||
y:"bottom",
|
y:"bottom",
|
||||||
padding:[ 0,10,10,10],
|
padding:[ 0,10,10,10],
|
||||||
|
|
@ -986,7 +989,7 @@ tableLabel_long: {
|
||||||
}
|
}
|
||||||
/deep/ .active_header{//表头
|
/deep/ .active_header{//表头
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-size: 9px;
|
font-size: 13px;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
border-color:#333333;
|
border-color:#333333;
|
||||||
|
|
||||||
|
|
@ -994,7 +997,7 @@ tableLabel_long: {
|
||||||
}
|
}
|
||||||
/deep/ .content_center{//表的内容
|
/deep/ .content_center{//表的内容
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
font-size: 10px;
|
font-size: 13px;
|
||||||
border-color:#333333;
|
border-color:#333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1019,5 +1022,9 @@ tableLabel_long: {
|
||||||
display:flex;
|
display:flex;
|
||||||
justify-content:center;
|
justify-content:center;
|
||||||
}
|
}
|
||||||
|
.grayish_btn{//浅灰色按钮
|
||||||
|
color: #fff;//文字颜色
|
||||||
|
background-color: #aaaaaa;//背景颜色
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -35,6 +35,7 @@
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from "echarts"
|
import * as echarts from "echarts"
|
||||||
export default {
|
export default {
|
||||||
|
name:'pressure',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
|
|
@ -77,6 +78,11 @@
|
||||||
// end_date:'',
|
// end_date:'',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isLogin(){
|
||||||
|
return this.$store.state.isLogin
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<graph-view-v4></graph-view-v4>
|
<graph-view-v4></graph-view-v4>
|
||||||
<!-- <div class="form">-->
|
<!-- <div class="form">-->
|
||||||
<!-- <!– inline="true"表单域在一行 –>-->
|
<!-- <!– inline="true"表单域在一行 –>-->
|
||||||
|
|
@ -56,6 +57,7 @@
|
||||||
import graphViewV4 from "@/views/graphViewV4";
|
import graphViewV4 from "@/views/graphViewV4";
|
||||||
import http from '../utils/request'
|
import http from '../utils/request'
|
||||||
export default {
|
export default {
|
||||||
|
name:'market_entities',
|
||||||
//引入组件
|
//引入组件
|
||||||
components: {
|
components: {
|
||||||
graphViewV4
|
graphViewV4
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,228 +1,202 @@
|
||||||
<!-- 系统风险分析，原市场分析拆分、新增、11.6合并-->
|
<!-- 系统风险分析，原市场分析拆分、新增、11.6合并-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 图谱，之前的在risk -->
|
|
||||||
<div class="one">
|
<div class="one">
|
||||||
<el-card style='height: 550px;margin-bottom: 10px;' :body-style={padding:0}>
|
<!-- 卡片化的标签页 -->
|
||||||
|
|
||||||
|
|
||||||
|
<el-card style='height: 440px;margin-bottom:10px;' :body-style={padding:0}>
|
||||||
<!-- height:400px -->
|
<!-- height:400px -->
|
||||||
<!-- 1、上标 -->
|
<!-- 1、上标 -->
|
||||||
<span class="superscript" style="width: 20px; height: 40px;">系统风险分析</span>
|
<span class="superscript" style="width: 20px; height: 40px;">资本市场系统性风险指数监测
|
||||||
<!-- 2、产品搜索栏 -->
|
</span>
|
||||||
|
|
||||||
<div class="form">
|
<!-- 添加折线图 -->
|
||||||
<!-- inline="true"表单域在一行 -->
|
|
||||||
<el-form :inline="true" class="demo-form-inline" :model="formInline1" ref="formInline1">
|
|
||||||
<el-form-item label="市场" prop="市场">
|
|
||||||
<el-select size="mini" v-model="formInline1.market">
|
|
||||||
<el-option label="股票" value="股票"></el-option>
|
|
||||||
<el-option label="基金" value="基金"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="行业" prop="行业">
|
<component :is="compName" :zoom="datazoom" @datazoom="changeComp" ></component>
|
||||||
<el-select size="mini" v-model="formInline1.industry">
|
<!-- <system-risk-component/>-->
|
||||||
<el-option label="行业1" value="行业1"></el-option>
|
|
||||||
<el-option label="行业2" value="行业2"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开始时间" prop="开始时间">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="formInline1.start_date"
|
|
||||||
type="date"
|
|
||||||
placeholder="年/月/日"
|
|
||||||
size="mini">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="结束时间" prop="结束时间">
|
</el-card>
|
||||||
<el-date-picker
|
|
||||||
v-model="formInline1.end_date"
|
|
||||||
type="date"
|
|
||||||
placeholder="年/月/日"
|
|
||||||
size="mini">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button class="grayish_btn" @click="onSubmit2" size="mini">查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
</el-form>
|
<el-card style="height: 550px;margin-top: 10px" :body-style={padding:0}>
|
||||||
</div>
|
<span class="superscript" style="width: 20px; height: 20px;">维度时序</span>
|
||||||
|
<dimension-component :zoom="datazoom"/>
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="18">
|
|
||||||
|
|
||||||
图谱待定
|
|
||||||
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :span="6">
|
|
||||||
<div style="margin-right: 10px;">
|
|
||||||
<!-- 表 -->
|
|
||||||
<el-table class='table' :data="tableData1"
|
|
||||||
:header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)',marginright:'20px'}"
|
|
||||||
header-row-class-name="active_header"
|
|
||||||
header-cell-class-name="active_header"
|
|
||||||
cell-class-name="content_center"
|
|
||||||
|
|
||||||
:row-style="{height:'28px',marginright:'20px'}"
|
|
||||||
:cell-style="{padding:'0px',marginright:'20px'}"
|
|
||||||
style="margin-right:20px;">
|
|
||||||
<!-- border -->
|
|
||||||
<el-table-column
|
|
||||||
prop="value_label"
|
|
||||||
label="行情风险评估"
|
|
||||||
width='200px'>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="value"
|
|
||||||
label="评估值"
|
|
||||||
width='100px'
|
|
||||||
>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</el-col>
|
</el-card>
|
||||||
</el-row>
|
<el-card style='height: 600px;margin-top: 10px;' :body-style={padding:0}>
|
||||||
|
<!-- height:400px -->
|
||||||
|
<!-- 1、上标 -->
|
||||||
|
<span class="superscript" style="width: 20px; height: 40px;">系统性影响指标分析</span>
|
||||||
|
|
||||||
|
<!-- 3、tab -->
|
||||||
|
<el-tabs type="border-card" style='margin: 20px 20px 0 20px;' @tab-click="handleClick">
|
||||||
|
|
||||||
|
<!-- 收益率传染 -->
|
||||||
|
<el-tab-pane label="个体风险状态" :lazy='true'>
|
||||||
|
<market-risk-component :zoom="datazoom" :title="'个体风险状态'"/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<!-- 延迟渲染 lazy true-->
|
||||||
|
<!-- 波动传染 -->
|
||||||
|
<el-tab-pane label="风险关联与溢出" :lazy='true'>
|
||||||
|
<market-risk-component :zoom="datazoom" :title="'风险关联与溢出'"/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="市场系统结构" :lazy='true'>
|
||||||
|
<market-risk-component :zoom="datazoom" :title="'市场系统结构'"/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="市场波动和趋势" :lazy='true'>
|
||||||
|
<market-risk-component :zoom="datazoom" :title="'市场波动和趋势'"/>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<!-- <div class="warning-component">-->
|
||||||
|
<!-- <div class="warning-dates">-->
|
||||||
|
<!-- <div class="date-item">前日：<span>{{ prevDayIndex }}</span></div>-->
|
||||||
|
<!-- <div class="date-item">昨日：<span>{{ yesterdayIndex }}</span></div>-->
|
||||||
|
<!-- <div class="date-item">今日：<span>{{ todayIndex }}</span></div>-->
|
||||||
|
<!-- <div class="date-item">明日：<span>{{ tomorrowIndex }}</span></div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card style="height: 450px;margin-top: 10px" :body-style={padding:0}>
|
||||||
|
<span class="superscript" style="width: 20px; height: 20px;">宏观经济指标</span>
|
||||||
|
<system-risk-future/>
|
||||||
|
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
|
<!-- <market-risk-component/>-->
|
||||||
|
<!-- <MarketRisk/>-->
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<MarketRisk/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MarketRisk from "/src/views/MarketRisk.vue";
|
import systemRiskComponent from '@/components/systemRiskComponent';
|
||||||
|
import marketRiskComponent from "@/components/riskIndexComponent";
|
||||||
export default {
|
import dimensionComponent from "@/components/dimensionComponent";
|
||||||
|
import systemRiskFuture from "@/components/systemRiskFuture";
|
||||||
|
export default {
|
||||||
|
name:'systematic_risk',
|
||||||
components:{
|
components:{
|
||||||
MarketRisk,
|
systemRiskFuture,
|
||||||
},
|
dimensionComponent,
|
||||||
|
systemRiskComponent,
|
||||||
|
marketRiskComponent
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
// 【整合接收数据】
|
datazoom:[],
|
||||||
formInline1: {
|
compName:'systemRiskComponent',
|
||||||
market:'',
|
prevDayIndex:'',
|
||||||
industry:'',
|
yesterdayIndex:'',
|
||||||
start_date:'',
|
todayIndex:'',
|
||||||
end_date:'',
|
tomorrowIndex:'',
|
||||||
},
|
state:'个体风险状态'
|
||||||
formInline2: {
|
|
||||||
market:'',
|
|
||||||
industry:'',
|
|
||||||
start_date:'',
|
|
||||||
end_date:'',
|
|
||||||
},
|
|
||||||
// 【表格】
|
|
||||||
tableData1: [
|
|
||||||
{
|
|
||||||
value_label:'采矿业',
|
|
||||||
value:0.25
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value_label:'文化、体育和娱乐业',
|
|
||||||
value:0.18
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value_label:'制造业',
|
|
||||||
value:0.17
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value_label:'租赁和商务服务业',
|
|
||||||
value:0.17
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value_label:'交通运输、仓储和邮政业',
|
|
||||||
value:0.14
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value_label:'软件和信息技术服务业',
|
|
||||||
value:0.14
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value_label:'环境和公共设施管理业',
|
|
||||||
value:0.14
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value_label:'综合评估',
|
|
||||||
value:"良好"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tableData2: [
|
|
||||||
{
|
|
||||||
异常关联类型: '股价波动异常',
|
|
||||||
涉及股票: '股票1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
异常关联类型: '高频交易',
|
|
||||||
涉及股票: '股票1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
异常关联类型: '资产泡沫',
|
|
||||||
涉及股票: '股票1',
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
tableLabel: {
|
|
||||||
编号: '编号',
|
|
||||||
异常关联类型: '异常关联类型',
|
|
||||||
涉及股票: '涉及股票',
|
|
||||||
监测时间: '监测时间',
|
|
||||||
股票价格: '股票价格',
|
|
||||||
交易数量: '交易数量',
|
|
||||||
风险等级: '风险等级',
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
onSubmit1(){},
|
changeComp(mesg){
|
||||||
onSubmit2(){},
|
this.datazoom=mesg
|
||||||
detail(row){}
|
console.log(mesg)
|
||||||
|
},
|
||||||
|
// handleClick(tab, event) {
|
||||||
|
// this.state=tab.label
|
||||||
|
// }
|
||||||
|
changeState(){
|
||||||
|
let lis=['个体风险状态','风险关联与溢出','市场系统结构','市场波动和趋势']
|
||||||
|
this.state=lis.indexOf(this.state)+1>3? '个体风险状态':lis[lis.indexOf(this.state)+1]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.form{//产品搜索栏
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
display:flex;
|
.text {
|
||||||
justify-content:space-between;//左右贴边
|
|
||||||
margin-top:10px;
|
|
||||||
// height: 40px;
|
|
||||||
padding-left: 20px;
|
|
||||||
|
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
//background-color: rgb(255, 255, 255);
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
.grayish_btn{//浅灰色按钮
|
|
||||||
color: #fff;//文字颜色
|
.arrow path {
|
||||||
background-color: #aaaaaa;//背景颜色
|
fill: rgb(19, 19, 19);
|
||||||
}
|
}
|
||||||
// 调整表头间隔、设置表头下方边框颜色
|
|
||||||
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
.button:hover .arrow {
|
||||||
border-bottom: 1px solid rgba(224, 223, 223, 0.771) !important;
|
animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||||
padding: 8px 0 !important;//这个页面表头大，可以调整一下间距
|
|
||||||
min-width: 0 !important;
|
|
||||||
}
|
}
|
||||||
.el-table .el-table__cell {
|
|
||||||
padding: 12px 0;
|
@keyframes slide-in-left {
|
||||||
min-width: 0;
|
0% {
|
||||||
|
transform: translateX(-8px);
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
/deep/ .active_header{//表头
|
|
||||||
color: #110101;
|
100% {
|
||||||
text-align: center !important;
|
transform: translateX(0px);
|
||||||
// height: 1px;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
/deep/ .content_center{//表的内容
|
}
|
||||||
text-align: center !important;
|
|
||||||
|
.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>
|
</style>
|
||||||
|
|
|
||||||
303
src/views/系统性风险分析old.vue
Normal file
303
src/views/系统性风险分析old.vue
Normal file
|
|
@ -0,0 +1,303 @@
|
||||||
|
<!-- 系统风险分析，原市场分析拆分、新增、11.6合并-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 图谱，之前的在risk -->
|
||||||
|
<div class="one">
|
||||||
|
<!-- 卡片化的标签页 -->
|
||||||
|
<el-tabs type="border-card">
|
||||||
|
<!-- 【1】股市 -->
|
||||||
|
<el-tab-pane label="股市">
|
||||||
|
<el-card style='height: 420px;margin-bottom:10px;' :body-style={padding:0}>
|
||||||
|
<!-- height:400px -->
|
||||||
|
<!-- 1、上标 -->
|
||||||
|
<span class="superscript" style="width: 20px; height: 40px;">股票市场系统性风险分析</span>
|
||||||
|
<!-- 2、产品搜索栏 -->
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<!-- inline="true"表单域在一行 -->
|
||||||
|
<el-form :inline="true" class="demo-form-inline" :model="formInline1" ref="formInline1">
|
||||||
|
|
||||||
|
<el-form-item label="开始时间" prop="开始时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formInline1.start_date"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="结束时间" prop="结束时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formInline1.end_date"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button class="grayish_btn" @click="onSubmit1" size="mini" >查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 添加折线图 -->
|
||||||
|
<DynamicLine/>
|
||||||
|
<!-- <half-doughnut :key='1' :myHalfData="myHalfData1"></half-doughnut> -->
|
||||||
|
</el-card>
|
||||||
|
<MarketRisk/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<!-- 【2】债市 -->
|
||||||
|
<el-tab-pane label="债市">
|
||||||
|
<el-card style='height: 420px;margin-bottom: 10px;' :body-style={padding:0}>
|
||||||
|
<!-- height:400px -->
|
||||||
|
<!-- 1、上标 -->
|
||||||
|
<span class="superscript" style="width: 20px; height: 40px;">债市异常检测</span>
|
||||||
|
<!-- 2、产品搜索栏 -->
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<!-- inline="true"表单域在一行 -->
|
||||||
|
<el-form :inline="true" class="demo-form-inline" :model="formInline2" ref="formInline2">
|
||||||
|
<el-form-item label="开始时间" prop="开始时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formInline2.start_date"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="结束时间" prop="结束时间">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formInline2.end_date"
|
||||||
|
type="date"
|
||||||
|
placeholder="年/月/日"
|
||||||
|
size="mini">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button class="grayish_btn" @click="onSubmit2" size="mini">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 添加折线图 -->
|
||||||
|
<DynamicLine/>
|
||||||
|
<!-- <half-doughnut :key='1' :myHalfData="myHalfData1"></half-doughnut> -->
|
||||||
|
</el-card>
|
||||||
|
<MarketRisk/>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<!-- 【3】期货 -->
|
||||||
|
<el-tab-pane label="期货">
|
||||||
|
<el-card style='height: 800px;margin-bottom: 10px;' :body-style={padding:0}>
|
||||||
|
<!-- height:400px -->
|
||||||
|
<!-- 1、上标 -->
|
||||||
|
<span class="superscript" style="width: 20px; height: 40px;">期货市场分析</span>
|
||||||
|
<!-- 添加关系图谱 -->
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="18">
|
||||||
|
<div style="margin:20px">
|
||||||
|
<!-- 图谱待定 -->
|
||||||
|
<QiPao></QiPao>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div style="margin-right: 10px;">
|
||||||
|
<!-- 表 -->
|
||||||
|
<el-table class='table' :data="tableData1"
|
||||||
|
|
||||||
|
:header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)',marginright:'20px'}"
|
||||||
|
header-row-class-name="active_header"
|
||||||
|
header-cell-class-name="active_header"
|
||||||
|
cell-class-name="content_center"
|
||||||
|
|
||||||
|
:row-style="{height:'28px',marginright:'20px'}"
|
||||||
|
:cell-style="{padding:'0px',marginright:'20px'}"
|
||||||
|
style="margin-right:20px;">
|
||||||
|
<!-- border -->
|
||||||
|
<el-table-column
|
||||||
|
prop="value_label"
|
||||||
|
label="行情风险评估"
|
||||||
|
width='200px'>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="value"
|
||||||
|
label="评估值"
|
||||||
|
width='100px'
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
<MarketRisk/>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import MarketRisk from "/Desktop/研究生/项目/金融项目/code/finacial11.7/finacial/src_old/views/MarketRisk.vue";
|
||||||
|
import DynamicLine from "@/components/echarts/DynamicLine.vue";
|
||||||
|
import QiPao from "@/components/QiPao";
|
||||||
|
export default {
|
||||||
|
name:'systemRisk',
|
||||||
|
components:{
|
||||||
|
MarketRisk,
|
||||||
|
DynamicLine,
|
||||||
|
QiPao,
|
||||||
|
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 【整合接收数据】
|
||||||
|
formInline1: {
|
||||||
|
market:'',
|
||||||
|
industry:'',
|
||||||
|
start_date:'',
|
||||||
|
end_date:'',
|
||||||
|
},
|
||||||
|
formInline2: {
|
||||||
|
market:'',
|
||||||
|
industry:'',
|
||||||
|
start_date:'',
|
||||||
|
end_date:'',
|
||||||
|
},
|
||||||
|
// 【表格】
|
||||||
|
tableData1: [
|
||||||
|
{
|
||||||
|
value_label:'沪银主连',
|
||||||
|
value:0.25
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value_label:'沪铝主连',
|
||||||
|
value:0.18
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value_label:'氧化铝主连',
|
||||||
|
value:0.17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value_label:'苹果主连',
|
||||||
|
value:0.17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value_label:'沪金主连',
|
||||||
|
value:0.14
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value_label:'国际铜主连',
|
||||||
|
value:0.14
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value_label:'合成橡胶主连',
|
||||||
|
value:0.14
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value_label:'综合评估',
|
||||||
|
value:"良好"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData2: [
|
||||||
|
{
|
||||||
|
异常关联类型: '股价波动异常',
|
||||||
|
涉及股票: '股票1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
异常关联类型: '高频交易',
|
||||||
|
涉及股票: '股票1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
异常关联类型: '资产泡沫',
|
||||||
|
涉及股票: '股票1',
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
tableLabel: {
|
||||||
|
编号: '编号',
|
||||||
|
异常关联类型: '异常关联类型',
|
||||||
|
涉及股票: '涉及股票',
|
||||||
|
监测时间: '监测时间',
|
||||||
|
股票价格: '股票价格',
|
||||||
|
交易数量: '交易数量',
|
||||||
|
风险等级: '风险等级',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
onSubmit1(){},
|
||||||
|
onSubmit2(){},
|
||||||
|
detail(row){}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/ .form{//产品搜索栏
|
||||||
|
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;//左右贴边
|
||||||
|
margin-top:10px;
|
||||||
|
// height: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 0px !important;
|
||||||
|
padding-bottom: 0px !important;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.grayish_btn{//浅灰色按钮
|
||||||
|
color: #fff;//文字颜色
|
||||||
|
background-color: #aaaaaa;//背景颜色
|
||||||
|
}
|
||||||
|
// 调整表头间隔、设置表头下方边框颜色
|
||||||
|
.table{
|
||||||
|
// 和选项框隔开
|
||||||
|
// margin:10px;
|
||||||
|
// font-size: 12px;
|
||||||
|
padding: 0px 5px 2px 5px;//返回表格添加间隙 上 右
|
||||||
|
|
||||||
|
|
||||||
|
// 调整表头间隔、设置表头下方边框颜色
|
||||||
|
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||||||
|
// border-bottom: 1px solid #333333 !important;
|
||||||
|
padding: 1px 1px 1px 1px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
// 去除表格cell间隔
|
||||||
|
.el-table .el-table__cell {
|
||||||
|
padding: 0px 0;
|
||||||
|
min-width: 0;
|
||||||
|
// border-color:#333333;
|
||||||
|
|
||||||
|
}
|
||||||
|
/deep/ .active_header{//表头
|
||||||
|
color: #333333;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center !important;
|
||||||
|
// border-color:#333333;
|
||||||
|
|
||||||
|
// height: 1px;
|
||||||
|
}
|
||||||
|
/deep/ .content_center{//表的内容
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 13px;
|
||||||
|
// border-color:#333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--板块表格 -->
|
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--板块表格 -->
|
||||||
<el-table :data="tableData_sector"
|
<el-table :data="tableData_sector" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
border
|
border
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'3px'}"
|
:cell-style="{padding:'3px'}"
|
||||||
|
|
@ -117,7 +117,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<div class="table" style=" padding: 20px 10px 2px 0px;"> <!-- 股票表格 -->
|
<div class="table" style=" padding: 20px 10px 2px 0px;"> <!-- 股票表格 -->
|
||||||
<el-table :data="tableData_stock"
|
<el-table :data="tableData_stock" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
border
|
border
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'3px'}"
|
:cell-style="{padding:'3px'}"
|
||||||
|
|
@ -170,7 +170,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--基金表格 -->
|
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--基金表格 -->
|
||||||
<el-table :data="tableData_fund"
|
<el-table :data="tableData_fund" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
border
|
border
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'3px'}"
|
:cell-style="{padding:'3px'}"
|
||||||
|
|
@ -208,7 +208,7 @@
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|
||||||
<div class="table" style=" padding: 20px 10px 2px 0px;"><!-- 我的管理的表格 -->
|
<div class="table" style=" padding: 20px 10px 2px 0px;"><!-- 我的管理的表格 -->
|
||||||
<el-table :data="tableData_management"
|
<el-table :data="tableData_management" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
border
|
border
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'3px'}"
|
:cell-style="{padding:'3px'}"
|
||||||
|
|
@ -267,6 +267,7 @@
|
||||||
import * as echarts from "echarts"
|
import * as echarts from "echarts"
|
||||||
import http from '../utils/request'
|
import http from '../utils/request'
|
||||||
export default {
|
export default {
|
||||||
|
name:'quotation',
|
||||||
//引入组件
|
//引入组件
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
|
|
@ -482,7 +483,7 @@ export default {
|
||||||
onSubmit2(){//板块
|
onSubmit2(){//板块
|
||||||
console.log("板块查询")
|
console.log("板块查询")
|
||||||
http.get(
|
http.get(
|
||||||
"/price/bkall",
|
"/price/bkall/",
|
||||||
{params:{
|
{params:{
|
||||||
com_name: this.formInline2.sector,
|
com_name: this.formInline2.sector,
|
||||||
// start_date:this.formInline.start_date,
|
// start_date:this.formInline.start_date,
|
||||||
|
|
@ -499,7 +500,7 @@ export default {
|
||||||
console.log("股票查询")
|
console.log("股票查询")
|
||||||
console.log(this.formInline3_1)
|
console.log(this.formInline3_1)
|
||||||
http.get(
|
http.get(
|
||||||
"/price/stock",
|
"/price/stock/",
|
||||||
{params:{
|
{params:{
|
||||||
com_name: this.formInline3_1.stock,
|
com_name: this.formInline3_1.stock,
|
||||||
start_date:this.formInline3_1.start_date,
|
start_date:this.formInline3_1.start_date,
|
||||||
|
|
@ -517,7 +518,7 @@ export default {
|
||||||
console.log("基金查询")
|
console.log("基金查询")
|
||||||
console.log(this.formInline3_2)
|
console.log(this.formInline3_2)
|
||||||
http.get(
|
http.get(
|
||||||
"/price/fund",
|
"/price/fund/",
|
||||||
{params:{
|
{params:{
|
||||||
com_name: this.formInline3_2.fund,
|
com_name: this.formInline3_2.fund,
|
||||||
start_date:this.formInline3_2.start_date,
|
start_date:this.formInline3_2.start_date,
|
||||||
|
|
@ -984,4 +985,8 @@ export default {
|
||||||
justify-content:space-between;
|
justify-content:space-between;
|
||||||
// padding:20px;
|
// padding:20px;
|
||||||
}
|
}
|
||||||
|
.grayish_btn{//浅灰色按钮
|
||||||
|
color: #fff;//文字颜色
|
||||||
|
background-color: #aaaaaa;//背景颜色
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
1304
src/views/预警服务.vue
1304
src/views/预警服务.vue
File diff suppressed because it is too large
Load Diff
1090
src/views/预警服务old.vue
Normal file
1090
src/views/预警服务old.vue
Normal file
File diff suppressed because it is too large
Load Diff
1260
src/views/风险传导.vue
Normal file
1260
src/views/风险传导.vue
Normal file
File diff suppressed because it is too large
Load Diff
|
|
@ -7,11 +7,11 @@
|
||||||
<!-- inline="true"表单域在一行 -->
|
<!-- inline="true"表单域在一行 -->
|
||||||
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
||||||
|
|
||||||
<el-form-item label="预警市场">
|
<!-- <el-form-item label="预警市场">-->
|
||||||
<el-select v-model="formInline1.market" placeholder="预警市场：" size="mini">
|
<!-- <el-select v-model="formInline1.market" placeholder="预警市场：" size="mini">-->
|
||||||
<el-option v-for="item in options_market" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
<!-- <el-option v-for="item in options_market" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
||||||
</el-select>
|
<!-- </el-select>-->
|
||||||
</el-form-item>
|
<!-- </el-form-item>-->
|
||||||
<el-form-item label="开始时间">
|
<el-form-item label="开始时间">
|
||||||
<el-date-picker v-model="formInline1.start_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
<el-date-picker v-model="formInline1.start_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<el-date-picker v-model="formInline1.end_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
<el-date-picker v-model="formInline1.end_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>
|
<el-button class="grayish_btn" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,35 +28,29 @@
|
||||||
<!-- 3、内容 -->
|
<!-- 3、内容 -->
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="15">
|
<el-col :span="15">
|
||||||
<el-card style=" height:700px;">
|
<el-card style=" height:800px;">
|
||||||
<!-- 标题&按钮 -->
|
<!-- 标题&按钮 -->
|
||||||
<div style="display: flex;justify-content: space-between;">
|
<div style="display: flex;justify-content: space-between;">
|
||||||
<span style="font-size: 18px;font-weight: bold;">各省份风险情况</span>
|
<span style="font-size: 18px;font-weight: bold;">各省份风险情况（默认近半年数据）</span>
|
||||||
<div>
|
<!-- <div>-->
|
||||||
<el-button type="primary" style="margin-right: 10px;" size="mini">高风险地区</el-button>
|
<!-- <el-button class="grayish_btn" style="margin-right: 10px;" size="mini">高风险地区</el-button>-->
|
||||||
<el-button type="primary" size="mini">风险率攀升</el-button>
|
<!-- <el-button class="grayish_btn" size="mini">风险率攀升</el-button>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
<!-- 地图 -->
|
<!-- 地图 -->
|
||||||
<!-- <el-card style=" height:500px;"> -->
|
<!-- <el-card style=" height:500px;"> -->
|
||||||
<region />
|
<region :new-map-data="mapData"/>
|
||||||
<!-- </el-card> -->
|
<!-- </el-card> -->
|
||||||
<!-- 表 -->
|
<!-- 表 -->
|
||||||
<el-table class='table' :data="tableData1" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
<el-table class='table' :data="tableData1" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
border
|
border
|
||||||
|
height="300"
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'0px'}"
|
:cell-style="{padding:'0px'}"
|
||||||
header-row-class-name="active_header"
|
header-row-class-name="active_header"
|
||||||
header-cell-class-name="active_header"
|
header-cell-class-name="active_header"
|
||||||
cell-class-name="content_center">
|
cell-class-name="content_center">
|
||||||
<!-- header-row-class-name 表头行 加classname -->
|
|
||||||
<!-- cell-class-name 单元格加名字 -->
|
|
||||||
<!-- border有边框 -->
|
|
||||||
<!-- stripe
|
|
||||||
height="90%"
|
|
||||||
:data="tableData"
|
|
||||||
style="width: 80%; margin-top:10px; margin-bottom:10px;" -->
|
|
||||||
<el-table-column v-for='(val,key) in tableLabel1' :prop="key" :label="val" show-overflow-tooltip /><!--插槽里面没有东西就可以用单标签 -->
|
<el-table-column v-for='(val,key) in tableLabel1' :prop="key" :label="val" show-overflow-tooltip /><!--插槽里面没有东西就可以用单标签 -->
|
||||||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||||||
|
|
||||||
|
|
@ -77,18 +71,18 @@
|
||||||
<!-- inline="true"表单域在一行 -->
|
<!-- inline="true"表单域在一行 -->
|
||||||
<el-form :inline="true" :model="formInline2" class="demo-form-inline">
|
<el-form :inline="true" :model="formInline2" class="demo-form-inline">
|
||||||
|
|
||||||
<el-form-item label="行业">
|
<el-form-item label="交易所">
|
||||||
<el-select v-model="formInline2.industry" placeholder="选择行业" size="mini">
|
<el-select v-model="formInline2.industry" placeholder="选择交易所" size="mini">
|
||||||
<el-option v-for="item in options_industry" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
<el-option v-for="item in options_industry" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>
|
<el-button class="grayish_btn" @click="indusRisk" icon="el-icon-search" size="mini">查询</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<!-- <el-card style=" height:200px;"> -->
|
<!-- <el-card style=" height:200px;"> -->
|
||||||
<div ref="echarts_2" style="height:320px;width:660px">
|
<div ref="echarts_2" style="height:320px;width:1000px">
|
||||||
</div>
|
</div>
|
||||||
<!-- </el-card> -->
|
<!-- </el-card> -->
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
@ -96,49 +90,51 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="9">
|
<el-col :span="9">
|
||||||
<el-card style=" height:1100px;">
|
<el-card style=" height:1200px;">
|
||||||
<span style="font-size: 18px;font-weight: bold;">个体风险预警</span>
|
<span style="font-size: 18px;font-weight: bold;">个体风险预警</span>
|
||||||
<div class="form_small">
|
<div class="form_small">
|
||||||
<!-- inline="true"表单域在一行 -->
|
<!-- inline="true"表单域在一行 -->
|
||||||
<el-form :inline="true" :model="formInline3" class="demo-form-inline">
|
<el-form :inline="true" :model="formInline3" class="demo-form-inline">
|
||||||
|
|
||||||
<el-form-item label="行业">
|
<el-form-item label="交易所">
|
||||||
<el-select v-model="formInline3.industry" placeholder="选择行业" size="mini">
|
<el-select v-model="formInline3.industry" placeholder="选择交易所" size="mini">
|
||||||
<el-option v-for="item in options_industry" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
<el-option v-for="item in options_industry" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>
|
<el-button class="grayish_btn" @click="individualRisk" icon="el-icon-search" size="mini">查询</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div >
|
<!-- <div >-->
|
||||||
<span>日</span>
|
<!-- <span>日</span>-->
|
||||||
<span>周</span>
|
<!-- <span>周</span>-->
|
||||||
<span>月</span>
|
<!-- <span>月</span>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div>
|
<div>
|
||||||
本月风险率 12% 相较上月 上升 2%
|
预警次数
|
||||||
</div>
|
</div>
|
||||||
<el-row :gutter="12">
|
<el-row :gutter="12">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card style="background-color: #ec808d;">
|
<el-card style="background-color: #c43434cc;">
|
||||||
<div> 严重</div>
|
<!-- <div class="button" @click="alert('here')"> 严重</div>-->
|
||||||
|
<el-button type="text" class="button" @click="choseType('严重')">严重</el-button>
|
||||||
108
|
{{ critical }}
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8" >
|
<el-col :span="8" >
|
||||||
<el-card style="background-color: #facd91;">
|
<el-card style="background-color: #f1c049;">
|
||||||
<div> 中等</div>
|
<!-- <div> 中等</div>-->
|
||||||
218
|
<el-button type="text" class="button" @click="choseType('中等')">中等</el-button>
|
||||||
|
{{ mid }}
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8" >
|
<el-col :span="8" >
|
||||||
<el-card style="background-color: #caf982;">
|
<el-card style="background-color: #4dca8e;">
|
||||||
<div>健康指数</div>
|
<!-- <div>轻微</div>-->
|
||||||
99
|
<el-button type="text" class="button" @click="choseType('轻微')">轻微</el-button>
|
||||||
|
{{ good }}
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
@ -157,6 +153,7 @@
|
||||||
:cell-style="{padding:'0px'}"
|
:cell-style="{padding:'0px'}"
|
||||||
header-row-class-name="active_header"
|
header-row-class-name="active_header"
|
||||||
header-cell-class-name="active_header"
|
header-cell-class-name="active_header"
|
||||||
|
height="400"
|
||||||
cell-class-name="content_center">
|
cell-class-name="content_center">
|
||||||
<!-- header-row-class-name 表头行 加classname -->
|
<!-- header-row-class-name 表头行 加classname -->
|
||||||
<!-- cell-class-name 单元格加名字 -->
|
<!-- cell-class-name 单元格加名字 -->
|
||||||
|
|
@ -211,9 +208,9 @@
|
||||||
width="80%">
|
width="80%">
|
||||||
<el-table class='table' :data="tableData_detail_2" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
<el-table class='table' :data="tableData_detail_2" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||||||
border
|
border
|
||||||
|
fit="true"
|
||||||
:row-style="{height:'28px'}"
|
:row-style="{height:'28px'}"
|
||||||
:cell-style="{padding:'0px'}"
|
:cell-style="{padding:'0px'}" style="width: 100%"
|
||||||
header-row-class-name="active_header"
|
header-row-class-name="active_header"
|
||||||
header-cell-class-name="active_header"
|
header-cell-class-name="active_header"
|
||||||
cell-class-name="content_center">
|
cell-class-name="content_center">
|
||||||
|
|
@ -227,6 +224,14 @@
|
||||||
<el-table-column v-for='(val,key) in tableLabel_detail_2' :prop="key" :label="val" show-overflow-tooltip /><!--插槽里面没有东西就可以用单标签 -->
|
<el-table-column v-for='(val,key) in tableLabel_detail_2' :prop="key" :label="val" show-overflow-tooltip /><!--插槽里面没有东西就可以用单标签 -->
|
||||||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="scale"
|
||||||
|
label="点击查看新闻源">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<!-- <span class="text" v-on:click="detail2(scope.row)">查看详情</span>-->
|
||||||
|
<el-button icon="el-icon-s-promotion" @click="copy(scope.row.url)"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -237,14 +242,23 @@ import * as echarts from "echarts"
|
||||||
import region from "../components/region.vue";
|
import region from "../components/region.vue";
|
||||||
import http from '../utils/request'
|
import http from '../utils/request'
|
||||||
export default {
|
export default {
|
||||||
|
name:'risk_warning',
|
||||||
//引入组件
|
//引入组件
|
||||||
components: {
|
components: {
|
||||||
region
|
region
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
type:'',
|
||||||
|
change:true,
|
||||||
|
mapData:'',
|
||||||
|
pieData:[],
|
||||||
|
critical:'',
|
||||||
|
mid:'',
|
||||||
|
good:'',
|
||||||
// 【整合接收数据】（3个）
|
// 【整合接收数据】（3个）
|
||||||
// 1-"风险预警"
|
// 1-"风险预警"
|
||||||
|
|
||||||
formInline1: {
|
formInline1: {
|
||||||
market: '',
|
market: '',
|
||||||
start_date:'',
|
start_date:'',
|
||||||
|
|
@ -277,7 +291,7 @@ components: {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
options_industry:[{
|
options_industry:[{
|
||||||
value: '全部',
|
value: '',
|
||||||
label: '全部'
|
label: '全部'
|
||||||
}, {
|
}, {
|
||||||
value: '深圳证券交易所',
|
value: '深圳证券交易所',
|
||||||
|
|
@ -285,14 +299,15 @@ components: {
|
||||||
}, {
|
}, {
|
||||||
value: '上海证券交易所',
|
value: '上海证券交易所',
|
||||||
label: '上海证券交易所'
|
label: '上海证券交易所'
|
||||||
}, {
|
|
||||||
value: '北京证券交易所',
|
|
||||||
label: '北京证券交易所'
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// value: '北交所',
|
||||||
|
// label: '北京证券交易所'
|
||||||
|
// },
|
||||||
],
|
],
|
||||||
|
|
||||||
options_exchange:[{
|
options_exchange:[{
|
||||||
value: '全部',
|
value: '',
|
||||||
label: '全部'
|
label: '全部'
|
||||||
}, {
|
}, {
|
||||||
value: '深圳证券交易所',
|
value: '深圳证券交易所',
|
||||||
|
|
@ -307,18 +322,19 @@ components: {
|
||||||
|
|
||||||
// 【表格,不包括详情页】
|
// 【表格,不包括详情页】
|
||||||
tableLabel1: {
|
tableLabel1: {
|
||||||
num: '事件序号',
|
// num: '事件序号',
|
||||||
province: '省份',
|
province: '省份',
|
||||||
total_risks: '严重风险总量',
|
counts: '严重风险总量',
|
||||||
warning_time: '预警时刻',
|
early_warning_time: '最新预警时刻',
|
||||||
warning_average:'预警平均值',
|
warning_score:'预警平均值',
|
||||||
YOY:'严重风险总量同比',
|
increase:'风险同比增加',
|
||||||
},
|
},
|
||||||
|
origiData:[],//用于筛选时保存数据
|
||||||
tableLabel2:{
|
tableLabel2:{
|
||||||
order: '排名',
|
// order: '排名',
|
||||||
code: '股票代码',
|
code: '股票代码',
|
||||||
name: '企业名称',
|
name: '企业名称',
|
||||||
warning: '预警值',
|
warning_type: '风险水平',
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -364,34 +380,35 @@ YOY:'+10',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
tableData2: [{
|
tableData2: [
|
||||||
order: '1',
|
// {
|
||||||
code: '688001.SH',
|
// order: '1',
|
||||||
name: '华兴源创',
|
// code: '688001.SH',
|
||||||
warning: 80,
|
// name: '华兴源创',
|
||||||
|
// warning: 80,
|
||||||
},
|
//
|
||||||
{
|
// },
|
||||||
order: '2',
|
// {
|
||||||
code: '688001.SH',
|
// order: '2',
|
||||||
name: '华兴源创',
|
// code: '688001.SH',
|
||||||
warning: 75,
|
// name: '华兴源创',
|
||||||
|
// warning: 75,
|
||||||
},
|
//
|
||||||
{
|
// },
|
||||||
order: '3',
|
// {
|
||||||
code: '688001.SH',
|
// order: '3',
|
||||||
name: '华兴源创',
|
// code: '688001.SH',
|
||||||
warning: 75,
|
// name: '华兴源创',
|
||||||
|
// warning: 75,
|
||||||
},
|
//
|
||||||
{
|
// },
|
||||||
order: '4',
|
// {
|
||||||
code: '688001.SH',
|
// order: '4',
|
||||||
name: '华兴源创',
|
// code: '688001.SH',
|
||||||
warning: 75,
|
// name: '华兴源创',
|
||||||
|
// warning: 75,
|
||||||
},
|
//
|
||||||
|
// },
|
||||||
],
|
],
|
||||||
// 【详情页】
|
// 【详情页】
|
||||||
// 详情页是否打开的判断标签
|
// 详情页是否打开的判断标签
|
||||||
|
|
@ -403,42 +420,181 @@ warning: 75,
|
||||||
|
|
||||||
// 区域
|
// 区域
|
||||||
tableLabel_detail_1:{
|
tableLabel_detail_1:{
|
||||||
主体代码:'主体代码',
|
code:'主体代码',
|
||||||
主体类型:'主体类型',
|
name:'名称',
|
||||||
省份:'省份',
|
province:'省份',
|
||||||
行业:'行业',
|
// 行业:'行业',
|
||||||
当前预警时刻:'当前预警时刻',
|
early_warning_time:'当前预警时刻',
|
||||||
历史预警时刻:'历史预警时刻',
|
// exchange:'交易所',
|
||||||
预警值:'预警值',
|
risk_type:'风险类型',
|
||||||
预警值同比:'预警值同比',
|
warning_type:'风险等级',
|
||||||
预警类型:'预警类型',
|
warning_score:'风险值',
|
||||||
风险等级:'风险等级',
|
last_time:'上次预警时刻',
|
||||||
影响力等级:'影响力等级',
|
increase:'同比',
|
||||||
健康等级:'健康等级',
|
|
||||||
},
|
},
|
||||||
// 个体
|
// 个体
|
||||||
tableLabel_detail_2:{
|
tableLabel_detail_2:{
|
||||||
主体代码:'主体代码',
|
code:'主体代码',
|
||||||
主体类型:'主体类型',
|
name:'名称',
|
||||||
省份:'省份',
|
province:'省份',
|
||||||
行业:'行业',
|
// 行业:'行业',
|
||||||
当前预警时刻:'当前预警时刻',
|
early_warning_time:'当前预警时刻',
|
||||||
历史预警时刻:'历史预警时刻',
|
exchange:'交易所',
|
||||||
预警值:'预警值',
|
risk_type:'风险类型',
|
||||||
预警值同比:'预警值同比',
|
warning_type:'风险水平',
|
||||||
预警类型:'预警类型',
|
warning_score:'风险概率',
|
||||||
风险类型:'风险类型',
|
url:'相关链接'
|
||||||
风险等级:'风险等级',
|
|
||||||
影响力等级:'影响力等级',
|
|
||||||
健康等级:'健康等级',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
const echarts1 = echarts.init(this.$refs.echarts_1)
|
this.initMapData()
|
||||||
const echarts2 = echarts.init(this.$refs.echarts_2)
|
this.individualRisk()
|
||||||
|
this.indusRisk()
|
||||||
|
// const echarts2 = echarts.init(this.$refs.echarts_2)
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// const option_2 = {
|
||||||
|
// // 右上角存图
|
||||||
|
// toolbox: {
|
||||||
|
// feature: {
|
||||||
|
// saveAsImage: {}
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
//
|
||||||
|
// grid: {
|
||||||
|
// left: '20%',//离左边远一点
|
||||||
|
// right: '4%',
|
||||||
|
// // bottom: '10%',
|
||||||
|
// top:'8%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
|
||||||
|
// // containLabel: true
|
||||||
|
// },
|
||||||
|
// xAxis: {
|
||||||
|
// type: 'value',
|
||||||
|
// // boundaryGap: [0, 0.01]
|
||||||
|
// },
|
||||||
|
// yAxis: {
|
||||||
|
// type: 'category',
|
||||||
|
// data: ['房地产业', '信息传输、软件和信息技术服务业', '水利、环境和公共设施管理业', '制造业', '建筑业','综合','批发和零售业','电力、热力、燃气及水生产和供应业','租赁和商务服务业','交通运输、仓储和邮政业','卫生和社会工作','文化、体育和娱乐业','采矿业','住宿和餐饮业','科学研究和技术服务业','教育','农、林、牧、渔业','居民服务、修理和其他服务业']
|
||||||
|
//
|
||||||
|
// // },
|
||||||
|
// },
|
||||||
|
// series: [
|
||||||
|
// {
|
||||||
|
// // color:'#6d7d87',
|
||||||
|
// type: 'bar',
|
||||||
|
// data: [18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,19325, 23438, 31000, 121594, 134141, 681807,]
|
||||||
|
// },
|
||||||
|
// // {
|
||||||
|
// // name: '2012',
|
||||||
|
// // type: 'bar',
|
||||||
|
// // data: [19325, 23438, 31000, 121594,19325, 23438, 31000, 121594, 134141, 681807, 134141, 681807,18203, 23489, 29034, 104970, 131744, 630230,]
|
||||||
|
// // }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// echarts2.setOption(option_2)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
copy(url){
|
||||||
|
|
||||||
|
let oInput = document.createElement('input');
|
||||||
|
oInput.value = url;
|
||||||
|
document.body.appendChild(oInput);
|
||||||
|
oInput.select(); // 选择对象;
|
||||||
|
console.log(oInput.value)
|
||||||
|
document.execCommand("Copy"); // 执行浏览器复制命令
|
||||||
|
this.$message({
|
||||||
|
message: '复制成功',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
oInput.remove()
|
||||||
|
window.open(url, "_blank");
|
||||||
|
},
|
||||||
|
choseType(type){
|
||||||
|
if( this.change ||this.type!==type)//初始状态 或选择了新的类型
|
||||||
|
{
|
||||||
|
this.tableData2=this.origiData
|
||||||
|
this.tableData2=this.tableData2.filter(item=>item.warning_type===type)
|
||||||
|
this.type=type
|
||||||
|
this.change=!this.change
|
||||||
|
}
|
||||||
|
else if(!this.change)
|
||||||
|
{
|
||||||
|
this.tableData2=this.origiData
|
||||||
|
this.change=!this.change
|
||||||
|
}
|
||||||
|
// for(let i in this.tableData2){
|
||||||
|
// if (i.warning_type!==type)
|
||||||
|
// this.tableData2.
|
||||||
|
},
|
||||||
|
initMapData(){
|
||||||
|
http.get('/warning/region_all_risk/',{params:{
|
||||||
|
// 不传时间默认最近半年
|
||||||
|
}}).then((res)=>{
|
||||||
|
this.mapData=res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
onSubmit1() {
|
||||||
|
http.get('/warning/warning_rank/',{params:{
|
||||||
|
// exchange:this.exchange
|
||||||
|
market:this.formInline1.market,
|
||||||
|
start:this.formInline1.start_date,
|
||||||
|
end:this.formInline1.end_date,
|
||||||
|
}}).then((res)=>{
|
||||||
|
this.tableData2=res.data
|
||||||
|
this.origiData=res.data
|
||||||
|
|
||||||
|
})
|
||||||
|
http.get('/warning/region_rank/',{params:{
|
||||||
|
// exchange:this.exchange
|
||||||
|
market:this.formInline1.market,
|
||||||
|
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
|
||||||
|
})
|
||||||
|
http.get('/warning/region_all_risk/',{params:{
|
||||||
|
// 不传时间默认最近半年
|
||||||
|
start:this.formInline1.start_date,
|
||||||
|
end:this.formInline1.end_date,
|
||||||
|
}}).then((res)=>{
|
||||||
|
this.mapData=res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
individualRisk() {
|
||||||
|
const echarts1 = echarts.init(this.$refs.echarts_1)
|
||||||
|
http.get('/warning/individual_rank/', {
|
||||||
|
params: {
|
||||||
|
// exchange:this.exchange
|
||||||
|
exchange: this.formInline3.industry,
|
||||||
|
start:this.formInline1.start_date,
|
||||||
|
end:this.formInline1.end_date,
|
||||||
|
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
this.pieData.length=0
|
||||||
|
this.critical = res.data['指数']['严重']
|
||||||
|
this.mid = res.data['指数']['中等']
|
||||||
|
this.good = res.data['指数']['轻微']
|
||||||
|
let tmp=res.data['环形图']
|
||||||
|
for(let key in tmp)
|
||||||
|
{
|
||||||
|
let arr={}
|
||||||
|
arr['name']=key
|
||||||
|
arr['value']=tmp[key]
|
||||||
|
this.pieData.push(arr)
|
||||||
|
}
|
||||||
|
|
||||||
|
echarts1.clear()
|
||||||
const option_1={
|
const option_1={
|
||||||
// 右上角存图
|
// 右上角存图
|
||||||
toolbox: {
|
toolbox: {
|
||||||
|
|
@ -478,58 +634,52 @@ warning: 75,
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
data: [
|
data: this.pieData
|
||||||
{ value: 40, name: '重大声誉风险' },
|
// [
|
||||||
{ value: 38, name: '流动风险' },
|
// { value: 40, name: '重大声誉风险' },
|
||||||
{ value: 32, name: '获现风险' },
|
// { value: 38, name: '流动风险' },
|
||||||
{ value: 30, name: '市场风险' },
|
// { value: 32, name: '获现风险' },
|
||||||
{ value: 28, name: '经营风险' },
|
// { value: 30, name: '市场风险' },
|
||||||
{ value: 26, name: '信用风险' },
|
// { value: 28, name: '经营风险' },
|
||||||
{ value: 22, name: '资产负债风险' }
|
// { value: 26, name: '信用风险' },
|
||||||
]
|
// { value: 22, name: '资产负债风险' }
|
||||||
|
// ]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
echarts1.setOption(option_1,true)
|
||||||
|
})
|
||||||
|
http.get('/warning/warning_rank/',{params:{
|
||||||
|
// exchange:this.exchange
|
||||||
|
exchange: this.formInline3.industry,
|
||||||
|
start:this.formInline1.start_date,
|
||||||
|
end:this.formInline1.end_date,
|
||||||
|
}}).then((res)=>{
|
||||||
|
this.tableData2=res.data
|
||||||
|
this.origiData=res.data
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
indusRisk() {
|
||||||
|
const echarts2 = echarts.init(this.$refs.echarts_2)
|
||||||
|
http.get('/warning/indus_rank/', {
|
||||||
|
params: {
|
||||||
|
// exchange:this.exchange
|
||||||
|
exchange: this.formInline2.industry,
|
||||||
|
start:this.formInline1.start_date,
|
||||||
|
end:this.formInline1.end_date,
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
|
||||||
|
let xData=[],yData=[]
|
||||||
|
let tmp=res.data
|
||||||
|
for(let key in tmp)
|
||||||
|
{
|
||||||
|
xData.push(tmp[key])
|
||||||
|
yData.push(key)
|
||||||
|
}
|
||||||
|
|
||||||
// const option_2= {
|
|
||||||
// yAxis: {
|
|
||||||
// data: ['房地产业', '信息传输、软件和信息技术服务业', '水利、环境和公共设施管理业', '制造业', '建筑业','综合','批发和零售业','电力、热力、燃气及水生产和供应业','租赁和商务服务业','交通运输、仓储和邮政业','卫生和社会工作','文化、体育和娱乐业','采矿业','住宿和餐饮业','科学研究和技术服务业','教育','农、林、牧、渔业','居民服务、修理和其他服务业']
|
|
||||||
|
|
||||||
// },
|
|
||||||
// xAxis: {},
|
|
||||||
// series: [
|
|
||||||
// {
|
|
||||||
// type: 'bar',
|
|
||||||
// data: [
|
|
||||||
// 10,
|
|
||||||
// 22,
|
|
||||||
// 28,
|
|
||||||
// {
|
|
||||||
// value: 43,
|
|
||||||
// // // 设置单个柱子的样式
|
|
||||||
// // itemStyle: {
|
|
||||||
// // color: '#91cc75',
|
|
||||||
// // shadowColor: '#91cc75',
|
|
||||||
// // borderType: 'dashed',
|
|
||||||
// // opacity: 0.5
|
|
||||||
// // }
|
|
||||||
// },
|
|
||||||
// 49,
|
|
||||||
// 45,
|
|
||||||
// 66,84,
|
|
||||||
// 46,45,88,45,64,11,21,45,87,88
|
|
||||||
// ],
|
|
||||||
// // itemStyle: {
|
|
||||||
// // barBorderRadius: 5,
|
|
||||||
// // borderWidth: 1,
|
|
||||||
// // borderType: 'solid',
|
|
||||||
// // borderColor: '#73c0de',
|
|
||||||
// // shadowColor: '#5470c6',
|
|
||||||
// // shadowBlur: 3
|
|
||||||
// // }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
const option_2 = {
|
const option_2 = {
|
||||||
// 右上角存图
|
// 右上角存图
|
||||||
toolbox: {
|
toolbox: {
|
||||||
|
|
@ -551,7 +701,7 @@ warning: 75,
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['房地产业', '信息传输、软件和信息技术服务业', '水利、环境和公共设施管理业', '制造业', '建筑业','综合','批发和零售业','电力、热力、燃气及水生产和供应业','租赁和商务服务业','交通运输、仓储和邮政业','卫生和社会工作','文化、体育和娱乐业','采矿业','住宿和餐饮业','科学研究和技术服务业','教育','农、林、牧、渔业','居民服务、修理和其他服务业']
|
data: yData
|
||||||
|
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
|
|
@ -559,7 +709,7 @@ warning: 75,
|
||||||
{
|
{
|
||||||
// color:'#6d7d87',
|
// color:'#6d7d87',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,19325, 23438, 31000, 121594, 134141, 681807,]
|
data: xData
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// name: '2012',
|
// name: '2012',
|
||||||
|
|
@ -570,20 +720,44 @@ warning: 75,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
echarts1.setOption(option_1),
|
|
||||||
echarts2.setOption(option_2)
|
echarts2.setOption(option_2)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
regionRisk() {
|
||||||
onSubmit1() {
|
http.get('/warning/region_rank/', {
|
||||||
console.log('submit!');
|
params: {
|
||||||
|
// exchange:this.exchange
|
||||||
|
exchange: this.formInline3.industry,
|
||||||
|
start:this.formInline1.start_date,
|
||||||
|
end:this.formInline1.end_date,
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
this.pieData.length = 0
|
||||||
|
let data = eval(unescape(res.data.replace(/\\u/g, '%u')))
|
||||||
|
this.critical = data['指数']['严重']
|
||||||
|
this.mid = data['指数']['中等']
|
||||||
|
this.good = data['指数']['轻微']
|
||||||
|
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// 详情页1
|
// 详情页1
|
||||||
detail1(row){
|
detail1(row){
|
||||||
console.log("查看详情-各省份风险情况")
|
// console.log("查看详情-各省份风险情况")
|
||||||
|
http.get('/warning/region_rank_detail/', {
|
||||||
|
params: {
|
||||||
|
// exchange:this.exchange
|
||||||
|
region: row.province,
|
||||||
|
// start:this.formInline1.start_date,
|
||||||
|
// end:this.formInline1.end_date,
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
// this.tableData_detail_1 = eval(unescape(res.data.replace(/\\u/g, '%u')))
|
||||||
|
this.tableData_detail_1=res.data
|
||||||
|
})
|
||||||
console.log(row)//返回这一行所有的内容
|
console.log(row)//返回这一行所有的内容
|
||||||
this.detailsdialog_1 = true//打开弹窗
|
this.detailsdialog_1 = true//打开弹窗
|
||||||
|
|
||||||
|
|
||||||
// http.get(
|
// http.get(
|
||||||
// "/",
|
// "/",
|
||||||
// {params:{
|
// {params:{
|
||||||
|
|
@ -604,8 +778,15 @@ warning: 75,
|
||||||
detail2(row){
|
detail2(row){
|
||||||
console.log("查看详情-个体风险预警")
|
console.log("查看详情-个体风险预警")
|
||||||
console.log(row)//返回这一行所有的内容
|
console.log(row)//返回这一行所有的内容
|
||||||
|
// console.log(this.tableData2)
|
||||||
|
this.tableData_detail_2=Array(row)
|
||||||
|
// for(let i in this.tableData2)
|
||||||
|
// {
|
||||||
|
//
|
||||||
|
// if (this.tableData2[i]['name']===row['name'] && this.tableData2[i]['early_warning_time']===row['early_warning_time'])
|
||||||
|
// this.tableData_detail_2=this.tableData2[i]
|
||||||
|
// }
|
||||||
this.detailsdialog_2 = true//打开弹窗
|
this.detailsdialog_2 = true//打开弹窗
|
||||||
|
|
||||||
// http.get(
|
// http.get(
|
||||||
// "/",
|
// "/",
|
||||||
// {params:{
|
// {params:{
|
||||||
|
|
@ -626,6 +807,22 @@ warning: 75,
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
//div按钮
|
||||||
|
.button{
|
||||||
|
.hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background-color: #003e80;
|
||||||
|
}
|
||||||
|
display: block;
|
||||||
|
//background-color: #007bff;
|
||||||
|
color: #000000;
|
||||||
|
//padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
// 地图布局，与下方表格的距离
|
// 地图布局，与下方表格的距离
|
||||||
/deep/ .echartsGroup[data-v-02ef51f8] {
|
/deep/ .echartsGroup[data-v-02ef51f8] {
|
||||||
// width: 500px;
|
// width: 500px;
|
||||||
|
|
@ -671,7 +868,7 @@ warning: 75,
|
||||||
}
|
}
|
||||||
/deep/ .active_header{//表头
|
/deep/ .active_header{//表头
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-size: 9px;
|
font-size: 13px;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
// border-color:#333333;
|
// border-color:#333333;
|
||||||
|
|
||||||
|
|
@ -679,12 +876,16 @@ warning: 75,
|
||||||
}
|
}
|
||||||
/deep/ .content_center{//表的内容
|
/deep/ .content_center{//表的内容
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
font-size: 10px;
|
font-size: 13px;
|
||||||
// border-color:#333333;
|
// border-color:#333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.text{
|
.text{
|
||||||
color:rgba(2, 167, 240, 0.729411764705882);
|
color:rgba(2, 167, 240, 0.729411764705882);
|
||||||
}
|
}
|
||||||
|
.grayish_btn{//浅灰色按钮
|
||||||
|
color: #fff;//文字颜色
|
||||||
|
background-color: #aaaaaa;//背景颜色
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
1477
src/views/高影响力主体分析old.vue
Normal file
1477
src/views/高影响力主体分析old.vue
Normal file
File diff suppressed because it is too large
Load Diff
51
src_old/App.vue
Normal file
51
src_old/App.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<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
Normal file
BIN
src_old/assets/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src_old/assets/background.jpg
Normal file
BIN
src_old/assets/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src_old/assets/card.png
Normal file
BIN
src_old/assets/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src_old/assets/r-c.png
Normal file
BIN
src_old/assets/r-c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
22
src_old/assets/svg/card.svg
Normal file
22
src_old/assets/svg/card.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?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
Normal file
BIN
src_old/assets/数据显示old.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
85
src_old/bigscreen/大屏.vue
Normal file
85
src_old/bigscreen/大屏.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
<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 style="flex: 0 1 50%">
|
||||||
|
<dv-border-box-8 style="width: 100%; height: 360px"></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>
|
||||||
|
<dv-border-box-12 style="width: 100%; height: 180px">
|
||||||
|
<div style="color:white;padding:10px 10px;">区域分析</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
62
src_old/bigscreen/大屏10-27.vue
Normal file
62
src_old/bigscreen/大屏10-27.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!-- -->
|
||||||
|
<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
Normal file
269
src_old/components/CommonAside.vue
Normal file
|
|
@ -0,0 +1,269 @@
|
||||||
|
<!-- 侧导航栏 -->
|
||||||
|
<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
Normal file
210
src_old/components/CommonHeader.vue
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
<!-- 上导航栏 -->
|
||||||
|
<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>-->
|
||||||
|
<!-- <!– 点击后改变弹出框生效情况 –>-->
|
||||||
|
<!-- <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
Normal file
227
src_old/components/CommonHeaderAdmin.vue
Normal file
|
|
@ -0,0 +1,227 @@
|
||||||
|
<!-- 上导航栏 -->
|
||||||
|
<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>-->
|
||||||
|
<!-- <!– 点击后改变弹出框生效情况 –>-->
|
||||||
|
<!-- <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
Normal file
225
src_old/components/CommonHeaderUser.vue
Normal file
|
|
@ -0,0 +1,225 @@
|
||||||
|
<!-- 上导航栏 -->
|
||||||
|
<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>-->
|
||||||
|
<!-- <!– 点击后改变弹出框生效情况 –>-->
|
||||||
|
<!-- <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
Normal file
189
src_old/components/QiPao.vue
Normal file
|
|
@ -0,0 +1,189 @@
|
||||||
|
<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
Normal file
154
src_old/components/addline.vue
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
<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
Normal file
315
src_old/components/dimensionComponent.vue
Normal file
|
|
@ -0,0 +1,315 @@
|
||||||
|
<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
Normal file
124
src_old/components/echarts/AreaChart.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<!-- 直方图和折线图的结合图 -->
|
||||||
|
<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
Normal file
104
src_old/components/echarts/DifferentialChart.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
<!-- 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
Normal file
155
src_old/components/echarts/DynamicLine.vue
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
<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
Normal file
98
src_old/components/echarts/HalfDoughnut.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
<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
Normal file
130
src_old/components/echarts/Histogram.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<!-- 直方图和折线图的结合图 -->
|
||||||
|
<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
Normal file
103
src_old/components/echarts/ZhiFang(1).vue
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<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
Normal file
208
src_old/components/halfYear.vue
Normal file
|
|
@ -0,0 +1,208 @@
|
||||||
|
<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
Normal file
213
src_old/components/industryComponent.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
||||||
|
<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
Normal file
74
src_old/components/pagination.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!-- 分页 -->
|
||||||
|
<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
Normal file
396
src_old/components/quterComponent.vue
Normal file
|
|
@ -0,0 +1,396 @@
|
||||||
|
<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
Normal file
348
src_old/components/region.vue
Normal file
|
|
@ -0,0 +1,348 @@
|
||||||
|
<!--目前数据没有详细到市区，所以两点改动：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
Normal file
152
src_old/components/riskIndexComponent.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
<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
Normal file
389
src_old/components/systemRiskComponent.vue
Normal file
|
|
@ -0,0 +1,389 @@
|
||||||
|
<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
Normal file
112
src_old/components/systemRiskFuture.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
<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
Normal file
54
src_old/config/drag.js
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
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
Normal file
58
src_old/libs/rem.js
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
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
Normal file
37
src_old/main.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
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
Normal file
171
src_old/plugins/debug/debug.js
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
// 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
Normal file
265
src_old/plugins/debug/styles/debug.css
Normal file
|
|
@ -0,0 +1,265 @@
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user