1091 lines
39 KiB
Vue
1091 lines
39 KiB
Vue
<!-- 预警服务主页面 -->
|
||
<template>
|
||
<div>
|
||
<div class="one">
|
||
<el-card style='height: 360px;' :body-style={padding:0}>
|
||
<!-- height:400px -->
|
||
<!-- 1、上标 -->
|
||
<span class="superscript" style="width: 20px; height: 40px;">整体风险概括</span>
|
||
<!-- 2、卡片x3 -->
|
||
<div class="tirCard">
|
||
<!-- 股票市场 -->
|
||
<div class="my-element" style="width: 380px; height: 250px;">
|
||
<h4 style="padding-left: 50px;">股票市场</h4>
|
||
<div class="tirCircle">
|
||
<div class="circle_low">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">{{ stockLow }}</div>
|
||
</div>
|
||
<div class="circle_mid">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">{{ stockMid }}</div>
|
||
</div>
|
||
<div class="circle_high">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">{{ stockHigh }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="tirText">
|
||
<span>低风险</span>
|
||
<span>中风险</span>
|
||
<span>高风险</span>
|
||
</div>
|
||
|
||
<div>
|
||
<h5 style="display: flex;justify-content:center">综合风险水平 95</h5>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- 债券市场 -->
|
||
<div class="my-element" style="width: 380px; height: 250px;">
|
||
<h4 style="padding-left: 50px;">债券市场</h4>
|
||
<div class="tirCircle">
|
||
<div class="circle_low">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">1862</div>
|
||
</div>
|
||
<div class="circle_mid">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">441</div>
|
||
</div>
|
||
<div class="circle_high">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">87</div>
|
||
</div>
|
||
</div>
|
||
<div class="tirText">
|
||
<span>低风险</span>
|
||
<span>中风险</span>
|
||
<span>高风险</span>
|
||
</div>
|
||
<div>
|
||
<h5 style="display: flex;justify-content:center">综合风险水平 95</h5>
|
||
</div>
|
||
</div>
|
||
<!-- 期货市场 -->
|
||
<div class="my-element" style="width: 380px; height: 250px;">
|
||
<h4 style="padding-left: 50px;">期货市场</h4>
|
||
<div class="tirCircle">
|
||
<div class="circle_low">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">1862</div>
|
||
</div>
|
||
<div class="circle_mid">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">441</div>
|
||
</div>
|
||
<div class="circle_high">
|
||
<div style="display: flex;justify-content:center;margin-top: 25px;">87</div>
|
||
</div>
|
||
</div>
|
||
<div class="tirText">
|
||
<span>低风险</span>
|
||
<span>中风险</span>
|
||
<span>高风险</span>
|
||
</div>
|
||
<div>
|
||
<h5 style="display: flex;justify-content:center">综合风险水平 95</h5>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 3、总结语句 -->
|
||
<span style="margin: 10px;padding-left:20px;padding-right:20px;display: inline-block;">
|
||
   中国资本市场主要由股票市场、债券市场和期货市场组成，
|
||
其中股票市场份额占比为 50%，
|
||
债券市场份额占比为 30%、
|
||
期货市场份额占比为20%，
|
||
整体市场风险水平评估为 89，属于 低风险</span>
|
||
|
||
<!--   == 普通的英文半角空格
|
||
  == ==   == no-break space （普通的英文半角空格但不换行）
|
||
　 == 中文全角空格 （一个中文宽度）
|
||
  ==   == en空格 （半个中文宽度）
|
||
  ==   == em空格 （一个中文宽度）
|
||
  == 四分之一em空格 （四分之一中文宽度） -->
|
||
</el-card>
|
||
</div>
|
||
|
||
<div class="two">
|
||
<el-card style='height: 800px;margin-top:5px' :body-style={padding:0} >
|
||
<!-- height:400px -->
|
||
<!-- 1、上标 -->
|
||
<span class="superscript" style="width: 20px; height: 40px;">预警服务</span>
|
||
<!-- 2、搜索栏 -->
|
||
<div class="form">
|
||
<el-form :inline="true" class="demo-form-inline" :model="formInline1" ref="formInline">
|
||
<el-form-item label="预警市场">
|
||
<el-select v-model="formInline1.market" size="mini">
|
||
<el-option label="股票" value="stock"></el-option>
|
||
<el-option label="债券" value="bond"></el-option>
|
||
<el-option label="期货" value="future"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button class="grayish_btn" @click="onSubmit1" size="mini">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- 3、内容 -->
|
||
<div class="one_twins_card">
|
||
<!-- 一左 -->
|
||
<el-card style=" height:600px;width: 68%;" :body-style={padding:0}> <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||
<!--(1)风险预警 -->
|
||
<div style="display:flex;justify-content:space-between;">
|
||
<div style="display:flex;padding-bottom: 10px;">
|
||
<el-divider direction="vertical" class="sublabel"></el-divider>
|
||
<span class='title' >风险预警</span>
|
||
</div>
|
||
<div style="display:flex;">
|
||
<span class="text" v-on:click="statistics1()">查看风险统计</span>
|
||
<span class="text" v-on:click="detail2()">查看全部详情</span>
|
||
</div>
|
||
</div>
|
||
<el-table class='table' :data="tableData_main_1" :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"
|
||
height="215"
|
||
>
|
||
<el-table-column v-for='(val,key) in tableLabel_main_1' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_main_1)">
|
||
|
||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
</el-table>
|
||
<!--(2)异常预警 -->
|
||
<div style="display:flex;justify-content:space-between;">
|
||
<div style="display:flex;padding-bottom: 10px;">
|
||
<el-divider direction="vertical" class="sublabel"></el-divider>
|
||
<span class='title' >异常预警</span>
|
||
</div>
|
||
<div style="display:flex;">
|
||
<span class="text" v-on:click="statistics3()">查看异常统计</span>
|
||
<span class="text" v-on:click="detail3()">查看全部详情</span>
|
||
</div>
|
||
</div>
|
||
<!-- v-if动态选择表类型-->
|
||
<el-table class='table' :data="tableData_main_2" :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"
|
||
v-if="formInline1.market==='stock'"
|
||
height="215" >
|
||
<el-table-column v-for='(val,key) in tableLabel1' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_main_2)">
|
||
|
||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
</el-table>
|
||
<el-table class='table' :data="tableData_main_2" :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"
|
||
v-if="formInline1.market==='bond'"
|
||
height="215" >
|
||
<el-table-column v-for='(val,key) in tableLabel2' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_main_2)">
|
||
|
||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
</el-table>
|
||
<el-table class='table' :data="tableData_main_2" :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"
|
||
v-if="formInline1.market==='future'"
|
||
height="215" >
|
||
<el-table-column v-for='(val,key) in tableLabel3' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_main_2)">
|
||
|
||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
</el-table>
|
||
|
||
|
||
</el-card>
|
||
|
||
<!-- 一右 -->
|
||
<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>
|
||
|
||
|
||
|
||
<!-- <div style="padding: 5px;">【{{warning_type1}}】2023/6/29 16:00股票1监测到风险流动风险<span class="text_detail" v-on:click="detail1(warning_type1)">[查看详情]</span></div>-->
|
||
<!-- <div style="padding: 5px;">【{{warning_type1}}】2023/6/2916:00股票1检测到风险流动风险<span class="text_detail" v-on:click="detail1(warning_type1)">[查看详情]</span></div>-->
|
||
<!-- <div style="padding: 5px;">【{{warning_type1}}】2023/6/29 16:00股票1检测到风险流动风险<span class="text_detail" v-on:click="detail1(warning_type1)">[查看详情]</span></div>-->
|
||
<!-- <div style="padding: 5px;">【{{warning_type1}}】2023/6/29 16:00股票1检测到风险流动风险<span class="text_detail" v-on:click="detail1(warning_type1)">[查看详情]</span></div>-->
|
||
<!-- <div style="padding: 5px;">【{{warning_type2}}】2023/6/29 16:00股票1检测到异常股价波动异常<span class="text_detail" v-on:click="detail1(warning_type2)">[查看详情]</span></div>-->
|
||
<!-- <div style="padding: 5px;">【{{warning_type2}}】2023/6/2916:00股票1检测到异常股价波动异常<span class="text_detail" v-on:click="detail1(warning_type2)">[查看详情]</span></div>-->
|
||
<!-- <div style="padding: 5px;">【{{warning_type2}}】2023/6/2916:00股票1检测到异常股价波动异常<span class="text_detail" v-on:click="detail1(warning_type2)">[查看详情]</span></div>-->
|
||
<!-- <div style="padding: 5px;">【{{warning_type2}}】2023/6/29 16:00股票1检测到异常股价波动异常<span class="text_detail" v-on:click="detail1(warning_type2)">[查看详情]</span></div>-->
|
||
|
||
<vue-seamless-scroll :data="contentList" class="wrap" >
|
||
<!-- <div v-for="(val,key) in contentList" :key="key" style="padding: 5px;">【{{warning_type2}}】{{val.time}},{{val.entity}}检测到{{val.type}}<span class="text_detail" v-on:click="detail1(warning_type2)">[查看详情]</span></div>-->
|
||
<ul class="item">
|
||
<li v-for="(item, index) in contentList" :key="index">
|
||
<span class="time" v-text="item.time"></span>
|
||
<span class="entity" v-text="item.entity"></span>
|
||
<span class="type" v-text="item.type"></span>
|
||
<!-- <span class="text_detail" v-on:click="detail1(warning_type2)">[查看详情]</span>-->
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
<!-- <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>
|
||
</el-card>
|
||
|
||
<!-- #1跳转-风险预警-查看风险统计 -->
|
||
<!-- 待完成 -->
|
||
<!-- #3跳转-异常预警-查看异常统计 -->
|
||
<!-- 待完成 -->
|
||
|
||
<!-- #1弹窗-风险预警-查看单条信息详情 -->
|
||
<el-dialog :visible.sync="detailsdialog1" width="100%" @open="open()" >
|
||
<!-- 详细信息 -->
|
||
<el-card style=" height:100% ;margin-bottom:10px ; " :body-style={padding:0} >
|
||
<span class="superscript" style="width: 20px; height: 40px;">预警详情-风险个体</span>
|
||
<el-table class='detail_table' :data="tableData_detail_1_1" :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"
|
||
height="215" >
|
||
<el-table-column v-for='(val,key) in tableLabel_detail_1' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_detail_1_1)">
|
||
|
||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
</el-table>
|
||
<div>
|
||
<el-table class='detail_table'
|
||
:data="tableData_detail_1_2"
|
||
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
|
||
prop="name"
|
||
label="公司名称"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column label="风险水平">
|
||
<el-table-column
|
||
prop="财务杠杆"
|
||
label="财务杠杆"
|
||
sortable
|
||
width="70">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="经营杠杆"
|
||
label="经营杠杆"
|
||
sortable
|
||
width="70">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="综合杠杆"
|
||
label="综合杠杆"
|
||
sortable
|
||
width="70">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="流动比率"
|
||
label="流动比率"
|
||
sortable
|
||
width="70">
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column label="（一）流动风险">
|
||
<el-table-column
|
||
prop="速动比率"
|
||
label="速动比率"
|
||
sortable
|
||
width="70">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="应收账款周转天数(天)"
|
||
label="应收账款周转天数（天）"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="流动风险综合指数"
|
||
label="流动风险综合指数"
|
||
width="120"
|
||
sortable>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="（二）市场风险">
|
||
<el-table-column
|
||
prop="在险价值"
|
||
label="在险价值"
|
||
sortable
|
||
width="120">
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="（三）经营风险">
|
||
<el-table-column
|
||
prop="资产收益率标准差"
|
||
label="资产收益率标准差"
|
||
sortable
|
||
width="120">
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="（四）信用风险">
|
||
<el-table-column
|
||
prop="资产负债率"
|
||
label="资产负债率"
|
||
sortable
|
||
width="100">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="投资盈利率"
|
||
label="投资盈利率"
|
||
sortable
|
||
width="100">
|
||
</el-table-column>
|
||
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="声誉风险综合指数"
|
||
label="声誉风险"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="政策风险综合指数"
|
||
label="政策风险"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="法律风险综合指数"
|
||
label="法律风险"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="操作风险综合指数"
|
||
label="操作风险"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="综合风险等级"
|
||
label="综合风险等级"
|
||
width="100">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-card>
|
||
</el-dialog>
|
||
<!-- #2弹窗-异常预警-查看单条信息详情 -->
|
||
<el-dialog :visible.sync="detailsdialog2" width="100%" @open="open()" >
|
||
<!-- 详细信息 -->
|
||
<el-card style=" height:100%;margin-bottom:10px ; " :body-style={padding:0} >
|
||
<span class="superscript" style="width: 20px; height: 40px;">预警详情-风险个体</span>
|
||
<el-table class='detail_table' :data="tableData_detail_2_1" :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"
|
||
height="215" >
|
||
<el-table-column v-for='(val,key) in tableLabel_detail_2_1' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_detail_1_1)">
|
||
|
||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
</el-table>
|
||
<div style="display:flex;">
|
||
<el-divider direction="vertical" class="sublabel"></el-divider>
|
||
<span class='title'>异常关联分析</span>
|
||
</div>
|
||
<div style="height:300px;margin-left: 20px;">图谱</div>
|
||
<el-table class='detail_table'
|
||
:data="tableData_detail_2_2"
|
||
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"
|
||
height="215" >
|
||
<el-table-column v-for='(val,key) in tableLabel_detail_2_2' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_detail_1_1)">
|
||
|
||
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
||
|
||
|
||
</el-table>
|
||
<Histogram/>
|
||
<span style="display:block;text-indent:2em;line-height: 25px;margin: 10px;">
|
||
股票1在2021-01-01至2021-02-01时间段内，在2021-1-8内达到股价峰值，为26元/每股，比该公司该段时间内平均股价（9元/每股），上涨15元，涨幅188.8%。在股价过高的情况下可能会导致风险增加、股票泡沫、不良收购等多种导致经济不稳定的风险因素的增加，在2021-01-09达到交易量峰值，为231支，比该公司该段时间内平均交易量（121股），上涨110股，涨幅为90.9%。在交易量过高的情况下可能会在一定程度上可能对市场稳定性、公平竞争和投资者信心造成负面影响。
|
||
|
||
</span>
|
||
|
||
|
||
|
||
</el-card>
|
||
</el-dialog>
|
||
<!-- #3弹窗-风险预警-查看全部详情 -->
|
||
<el-dialog :visible.sync="detailsdialog_all_1" width="100%" @open="open()" >
|
||
<!-- 详细信息 -->
|
||
<el-card style=" height:300px;margin-bottom:10px ; " :body-style={padding:0} >
|
||
<span class="superscript" style="width: 20px; height: 40px;">风险预警详情</span>
|
||
</el-card>
|
||
</el-dialog>
|
||
<!-- #4弹窗-异常预警-查看异常统计 -->
|
||
<el-dialog :visible.sync="detailsdialog_all_2" width="100%" @open="open()" >
|
||
<!-- 详细信息 -->
|
||
<el-card style=" height:300px;margin-bottom:10px ; " :body-style={padding:0} >
|
||
<span class="superscript" style="width: 20px; height: 40px;">all-2</span>
|
||
</el-card>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Histogram from "@/components/echarts/Histogram.vue";
|
||
import http from "@/utils/request";
|
||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||
export default {
|
||
components:{
|
||
Histogram,
|
||
vueSeamlessScroll,
|
||
},
|
||
data () {
|
||
return {
|
||
stockLow:1862,
|
||
stockMid:442,
|
||
stockHigh:87,
|
||
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'
|
||
}],
|
||
defaultOption:{
|
||
step: 0.1, // 数值越大速度滚动越快
|
||
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 0, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
},
|
||
contentList:[],
|
||
// 整合收据进行接收
|
||
formInline1:{
|
||
market:'stock'
|
||
},
|
||
// 表格数据
|
||
tableData_main_1:[
|
||
{
|
||
序号:1,
|
||
主体名称:'股票1',
|
||
主体代码:'688001.SH',
|
||
主体类型:'股票',
|
||
行业:'计算机',
|
||
当前预警时刻:'2023/6/29 16:00',
|
||
预警类型:'严重',
|
||
风险类型:'流动风险',
|
||
},
|
||
{
|
||
序号:2,
|
||
主体名称:'股票2',
|
||
主体代码:'688002.SH',
|
||
主体类型:'股票',
|
||
行业:'计算机',
|
||
当前预警时刻:'2023/6/29 16:00',
|
||
预警类型:'严重',
|
||
风险类型:'市场风险',
|
||
},
|
||
],
|
||
tableLabel_main_1: {
|
||
序号: '序号',
|
||
主体名称: '主体名称',
|
||
主体代码: '主体代码',
|
||
主体类型: '主体类型',
|
||
行业:'行业',
|
||
当前预警时刻:'当前预警时刻',
|
||
预警类型:'预警类型',
|
||
风险类型:'风险类型',
|
||
|
||
},
|
||
|
||
tableData_main_2:[
|
||
{
|
||
序号:1,
|
||
主体名称:'股票1',
|
||
主体代码:'688001.SH',
|
||
主体类型:'股票',
|
||
行业:'计算机',
|
||
当前预警时刻:'2023/6/29 16:00',
|
||
预警类型:'严重',
|
||
风险类型:'流动风险',
|
||
},
|
||
{
|
||
序号:2,
|
||
主体名称:'股票2',
|
||
主体代码:'688002.SH',
|
||
主体类型:'股票',
|
||
行业:'计算机',
|
||
当前预警时刻:'2023/6/29 16:00',
|
||
预警类型:'严重',
|
||
风险类型:'市场风险',
|
||
},
|
||
],
|
||
tableLabel_main_2: {
|
||
编码: '序号',
|
||
// 名称: '主体名称',
|
||
名称: '主体代码',
|
||
// 主体类型: '主体类型',
|
||
// 行业:'行业',
|
||
监测时间:'当前预警时刻',
|
||
异常水平:'异常水平',
|
||
异常关联类型:'风险类型',
|
||
},
|
||
|
||
//三个表
|
||
tableLabel1: {
|
||
编码: '编号',
|
||
异常关联类型: '异常关联类型',
|
||
名称: '涉及股票',
|
||
监测时间: '监测时间',
|
||
股票价格: '股票价格',
|
||
交易数量: '交易数量',
|
||
风险等级: '风险等级',
|
||
},
|
||
tableLabel2: {
|
||
编码: '编号',
|
||
异常关联类型: '异常关联类型',
|
||
名称: '涉及主体',
|
||
监测时间: '监测时间',
|
||
股票价格: '债券价格',
|
||
交易数量: '交易数量',
|
||
风险等级: '风险等级',
|
||
},
|
||
tableLabel3: {
|
||
编码: '编号',
|
||
异常关联类型: '异常关联类型',
|
||
涉及商品: '涉及商品',
|
||
合约名称: '合约名称',
|
||
监测时间: '监测时间',
|
||
股票价格: '股票价格',
|
||
交易数量: '交易数量',
|
||
风险等级: '风险等级',
|
||
|
||
},
|
||
tableData_detail_1_1:[
|
||
{
|
||
序号: 1,
|
||
主体名称: '股票1',
|
||
主体类型: '股票',
|
||
省份:'北京',
|
||
行业:'计算机',
|
||
历史预警时刻:'2023/6/21 16:00',
|
||
当前预警时刻:'2023/6/29 10:00',
|
||
预警值:80,
|
||
预警值同比:'+1',
|
||
预警类型:'严重',
|
||
风险类型:'流动风险',
|
||
风险等级:8,
|
||
影响力等级:'高',
|
||
健康等级:'危险',
|
||
|
||
},
|
||
|
||
],
|
||
tableLabel_detail_1:
|
||
{
|
||
序号: '序号',
|
||
主体名称: '主体名称',
|
||
主体类型: '主体类型',
|
||
省份:'省份',
|
||
行业:'行业',
|
||
历史预警时刻:'历史预警时刻',
|
||
当前预警时刻:'当前预警时刻',
|
||
预警值:'预警值',
|
||
预警值同比:'预警值同比',
|
||
预警类型:'预警类型',
|
||
风险类型:'风险类型',
|
||
风险等级:'风险等级',
|
||
影响力等级:'影响力等级',
|
||
健康等级:'健康等级',
|
||
|
||
},
|
||
tableData_detail_1_2: [
|
||
{
|
||
name:'秦农商行',
|
||
},
|
||
{
|
||
name:'华夏商行',
|
||
},
|
||
],
|
||
tableData_detail_2_1:[
|
||
{
|
||
序号: 1,
|
||
主体名称: '股票1',
|
||
主体类型: '股票',
|
||
省份:'北京',
|
||
行业:'计算机',
|
||
历史预警时刻:'2023/6/21 16:00',
|
||
当前预警时刻:'2023/6/29 10:00',
|
||
预警值:80,
|
||
预警值同比:'+1',
|
||
预警类型:'严重',
|
||
风险类型:'流动风险',
|
||
风险等级:8,
|
||
影响力等级:'高',
|
||
健康等级:'危险',
|
||
|
||
},
|
||
|
||
],
|
||
tableLabel_detail_2_1:
|
||
{
|
||
序号: '序号',
|
||
主体名称: '主体名称',
|
||
主体类型: '主体类型',
|
||
省份:'省份',
|
||
行业:'行业',
|
||
历史预警时刻:'历史预警时刻',
|
||
当前预警时刻:'当前预警时刻',
|
||
预警值:'预警值',
|
||
预警值同比:'预警值同比',
|
||
预警类型:'预警类型',
|
||
风险类型:'风险类型',
|
||
风险等级:'风险等级',
|
||
影响力等级:'影响力等级',
|
||
健康等级:'健康等级',
|
||
|
||
},
|
||
tableLabel_detail_2_2:
|
||
{
|
||
编号: '编号',
|
||
异常主体:'异常主体',
|
||
关联对象:'关联对象',
|
||
异常关联类型:'异常关联类型',
|
||
关联相似度:'关联相似度',
|
||
涉及事件详情:'涉及事件详情',
|
||
高影响力主体分析:'高影响力主体分析',
|
||
风险等级:'风险等级',
|
||
},
|
||
tableData_detail_2_2:[
|
||
{
|
||
编号: '',
|
||
异常主体:'股票1',
|
||
关联对象:'股票2',
|
||
异常关联类型:'高频交易',
|
||
关联相似度:'关联相似度',
|
||
涉及事件详情:'事件分析',
|
||
高影响力主体分析:'高影响力主体分析',
|
||
风险等级:'',
|
||
},
|
||
|
||
],
|
||
|
||
|
||
// 判断是否弹窗打开
|
||
detailsdialog1:false,
|
||
detailsdialog2:false,
|
||
detailsdialog_all_1:false,
|
||
detailsdialog_all_2:false,
|
||
|
||
//预警类型
|
||
warning_type1:'风险预警',
|
||
warning_type2:'异常预警',
|
||
|
||
|
||
}
|
||
|
||
},
|
||
mounted(){
|
||
let that=this
|
||
http.get('/warning/get_warning_count/').then((res)=> {
|
||
this.stockLow=res.data["低风险"]
|
||
this.stockMid=res.data["中风险"]
|
||
this.stockHigh=res.data["高风险"]
|
||
})
|
||
this.contentList.length=0
|
||
http.get('/anomaly/item_anomaly/',{params:{
|
||
sc:this.formInline1.market,
|
||
}}).then((res)=>{
|
||
|
||
for (let i in res.data.data){
|
||
let tmp={}
|
||
if (that.formInline1.market!=='future')
|
||
{tmp['time']=res.data.data[i].监测时间
|
||
tmp['entity']=res.data.data[i].名称
|
||
tmp['type']=res.data.data[i].异常关联类型}
|
||
else {
|
||
tmp['time']=res.data.data[i].监测时间
|
||
tmp['entity']=res.data.data[i].涉及商品
|
||
tmp['type']=res.data.data[i].异常关联类型
|
||
}
|
||
this.contentList.push(tmp)
|
||
}
|
||
console.log(this.contentList)
|
||
console.log(this.listData)
|
||
})
|
||
},
|
||
methods:{
|
||
// 调整表格列宽
|
||
calculateColumnWidth(prop,data) {
|
||
const text = String(data[0][prop]); // 使用第一行的数据作为示例
|
||
const calculatedWidth = text.length;
|
||
// console.log('console.log(calculatedWidth):',calculatedWidth)
|
||
if(calculatedWidth>10 && calculatedWidth<=50){
|
||
const baseWidth= 20 + calculatedWidth * 0.5
|
||
return `${baseWidth}px`;
|
||
}
|
||
if(calculatedWidth<=10){
|
||
const baseWidth= 15
|
||
return `${baseWidth}px`;
|
||
}
|
||
else{
|
||
const baseWidth= 20 + calculatedWidth * 0.5
|
||
return `${baseWidth}px`;
|
||
}
|
||
},
|
||
|
||
|
||
onSubmit1(){
|
||
http.get('/anomaly/item_anomaly/',{params:{
|
||
sc:this.formInline1.market,
|
||
}}).then((res)=>{
|
||
this.tableData_main_2=res.data.data
|
||
})
|
||
// http.get('/warning/warning_rank/',{params:{
|
||
// market: this.formInline1.market,
|
||
// }}).then((res)=>{
|
||
// this.tableData_main_2=res.data.data
|
||
// })
|
||
},
|
||
// 1、风险/异常单条数据查看详情
|
||
detail1(warning_type){
|
||
if(warning_type==='风险预警'){
|
||
this.detailsdialog1 = true//打开弹窗
|
||
}
|
||
if (warning_type==='异常预警') {
|
||
this.detailsdialog2 = true//打开弹窗
|
||
|
||
}
|
||
|
||
},
|
||
// 2、风险预警-查看全部详情
|
||
detail2(){
|
||
this.detailsdialog_all_1 = true//打开弹窗
|
||
},
|
||
// 4、异常预警-查看全部详情
|
||
detail3(){
|
||
this.detailsdialog_all_2 = true//打开弹窗
|
||
},
|
||
|
||
// 1、风险预警-查看风险统计
|
||
statistics1(){
|
||
// this.detailsdialog1 = true//打开弹窗
|
||
// 修改成页面跳转
|
||
},
|
||
// 2、异常预警-查看异常统计
|
||
statistics3(){
|
||
// this.detailsdialog3 = true//打开弹窗
|
||
},
|
||
|
||
// 打开弹窗图像
|
||
open(){
|
||
// this.$nextTick(() => {
|
||
// // 执行echarts方法
|
||
// this.initEcharts()
|
||
// })
|
||
},
|
||
|
||
},
|
||
watch:{
|
||
'formInline1.market': {
|
||
handler() {
|
||
this.contentList.length = 0
|
||
http.get('/anomaly/item_anomaly/', {
|
||
params: {
|
||
sc: this.formInline1.market,
|
||
}
|
||
}).then((res) => {
|
||
for (let i in res.data.data) {
|
||
let tmp = {}
|
||
tmp.time = res.data.data[i].监测时间
|
||
tmp.entity = res.data.data[i].名称
|
||
tmp.type = res.data.data[i].异常关联类型
|
||
this.contentList.push(tmp)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.wrap {
|
||
height: 270px;
|
||
width: 550px;
|
||
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;
|
||
//}
|
||
span {
|
||
display: inline-block;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
display: flex;
|
||
width: 550px;
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
justify-content: space-between;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
.form{//产品搜索栏
|
||
display:flex;
|
||
justify-content:space-between;//左右贴边
|
||
margin-top:5px;
|
||
margin-bottom:0px;
|
||
// height: 40px;
|
||
margin-left: 50px;
|
||
padding: 0px;
|
||
.el-form-item {
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
|
||
.my-element {
|
||
background-image: url('~@/assets/card.png');
|
||
// width:100%; //大小设置为100%
|
||
// height:100%; //大小设置为100%
|
||
// position:fixed;
|
||
background-size:100% 100%;
|
||
margin-left: 20px;
|
||
margin-right: 20px;
|
||
margin-top: 20px;
|
||
|
||
|
||
|
||
}
|
||
.tirCard {
|
||
display:flex;
|
||
justify-content:space-between;
|
||
}
|
||
.tirCircle{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
margin-left: 20px;
|
||
margin-right: 30px;
|
||
.circle_low {
|
||
background: #dffbee;
|
||
border: 0.7em solid #4dca8e;
|
||
border-radius: 50%;
|
||
// box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
|
||
height: 5em;
|
||
width: 5em;
|
||
// margin-left: 20px;
|
||
}
|
||
.circle_mid {
|
||
background: #fdf6e5;
|
||
border: 0.7em solid #f1c049;
|
||
border-radius: 50%;
|
||
// box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
|
||
height: 5em;
|
||
width: 5em;
|
||
|
||
}
|
||
.circle_high {
|
||
background: #fce0ee;
|
||
border: 0.7em solid #c43434cc;
|
||
border-radius: 50%;
|
||
// box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
|
||
height: 5em;
|
||
width: 5em;
|
||
// margin-right: 20px;
|
||
}
|
||
}
|
||
.tirText{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
margin-left: 45px;
|
||
margin-right: 60px;
|
||
}
|
||
|
||
|
||
.one_twins_card{
|
||
margin-top:0px;
|
||
margin-bottom:10px;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
display:flex;
|
||
justify-content:space-between;//左右贴边
|
||
.el-card {
|
||
width:49.5%;
|
||
}
|
||
.el-col-2 {
|
||
width: 2%;
|
||
|
||
}
|
||
}
|
||
.sublabel{ // 小标签标识
|
||
// font-size: 13px;
|
||
// padding:2px;
|
||
margin-top:10px;
|
||
background-color: rgba(2, 167, 240, 0.5);
|
||
width: 5px;
|
||
height: 35px;
|
||
|
||
|
||
}
|
||
.title{
|
||
padding-left: 4px;
|
||
margin-top:15px;
|
||
font-weight: bold;//字体加粗
|
||
display:flex;
|
||
justify-content:flex-start
|
||
}
|
||
/deep/ .text{
|
||
color:rgba(2, 167, 240, 0.729411764705882);
|
||
margin-top:15px;
|
||
padding: 10px;
|
||
padding-bottom: 5px;
|
||
display:flex;
|
||
// justify-content:right;
|
||
}
|
||
/deep/ .text_detail{
|
||
color:rgba(2, 167, 240, 0.729411764705882);
|
||
// justify-content:right;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.table{
|
||
font-size: 12px;
|
||
margin: 2px 10px 2px 10px;//返回表格添加间隙 上 右
|
||
// padding-right:10px;
|
||
}
|
||
.detail_table{
|
||
margin-top: 15px;
|
||
margin-left: 10px;
|
||
margin-right: 0px;
|
||
/deep/ .el-table {
|
||
width: 98.5% !important;
|
||
}
|
||
}
|
||
// 右侧空只能这样调整，左侧必须用margin
|
||
/deep/ .el-table {
|
||
width: 97.5% !important;
|
||
// margin-right: 10px;
|
||
}
|
||
|
||
// 调整表头间隔、设置表头下方边框颜色
|
||
/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;
|
||
}
|
||
|
||
|
||
|
||
.grayish_btn{//浅灰色按钮
|
||
color: #fff;//文字颜色
|
||
background-color: #aaaaaa;//背景颜色
|
||
}
|
||
</style>
|