303 lines
9.0 KiB
Vue
303 lines
9.0 KiB
Vue
<!-- 系统风险分析，原市场分析拆分、新增、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 "/src/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>
|
||
|