1162 lines
45 KiB
Vue
1162 lines
45 KiB
Vue
|
<!-- 预警服务-异常检测 -->
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<!-- 卡片化的标签页 -->
|
|||
|
|
<el-tabs type="border-card">
|
|||
|
|
<!-- 【1】股市 -->
|
|||
|
|
<el-tab-pane label="股市">
|
|||
|
|
<el-card style='height: 1050px;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="formInline2">
|
|||
|
|
|
|||
|
|
<!-- <el-form-item label="行业" prop="行业">-->
|
|||
|
|
<!-- <el-select size="mini" v-model="formInline1.industry">-->
|
|||
|
|
<!-- <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-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>
|
|||
|
|
<!-- 添加半圆饼图 -->
|
|||
|
|
<half-doughnut :key='1' :myHalfData="myHalfData1"></half-doughnut>
|
|||
|
|
<!-- <half-doughnut/ :prop=""> -->
|
|||
|
|
<!-- 表格 -->
|
|||
|
|
<div class="table">
|
|||
|
|
<el-table :data="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
|||
|
|
border
|
|||
|
|
height="500"
|
|||
|
|
:row-style="{height:'30px'}"
|
|||
|
|
:cell-style="{padding:'5px'}"
|
|||
|
|
header-row-class-name="active_header"
|
|||
|
|
header-cell-class-name="active_header"
|
|||
|
|
cell-class-name="content_center"
|
|||
|
|
style="width: 100px"> <!-- style="width: 40%" height="215" -->
|
|||
|
|
<template v-for="(val,key) in tableLabel1">
|
|||
|
|
<!-- You should not mix 'v-for' with 'v-if'-->
|
|||
|
|
<!-- 条件渲染-->
|
|||
|
|
<el-table-column :prop="key" :key='key'
|
|||
|
|
:label='typeof val === "object" ? val.label : val'
|
|||
|
|
:filters=filterText
|
|||
|
|
:filter-method="filterTag"
|
|||
|
|
v-if=' val.special'
|
|||
|
|
/>
|
|||
|
|
<el-table-column :prop="key" :key='key'
|
|||
|
|
:label='typeof val === "object" ? val.label : val'
|
|||
|
|
|
|||
|
|
v-if=' !val.special'
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<!--插槽里面没有东西就可以用单标签 -->
|
|||
|
|
<el-table-column
|
|||
|
|
prop="scale"
|
|||
|
|
label="操作">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<!-- <span class="text" v-on:click="detail(scope.row,this.formInline1.start_date)">查看详情</span>-->
|
|||
|
|
<span class="text" v-on:click="testDeatil(scope.row)">查看详情</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 分页-->
|
|||
|
|
<div class="block" style="margin-top:15px;">
|
|||
|
|
<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|||
|
|
:current-page="currentPage"
|
|||
|
|
|
|||
|
|
:page-size="10"
|
|||
|
|
layout="total, prev, pager, next, jumper"
|
|||
|
|
:total="tableData1.length">
|
|||
|
|
</el-pagination>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<!-- 【2】债市 -->
|
|||
|
|
<el-tab-pane label="债市">
|
|||
|
|
<el-card style='height: 1050px;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-select size="mini" v-model="formInline2.industry">-->
|
|||
|
|
<!-- <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="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>
|
|||
|
|
<!-- 添加半圆饼图 -->
|
|||
|
|
<half-doughnut :key='2' :myHalfData="myHalfData3"></half-doughnut>
|
|||
|
|
<!-- 表格 -->
|
|||
|
|
<div class="table">
|
|||
|
|
<el-table :data="tableData2.slice((currentPage-1)*pageSize,currentPage*pageSize)" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
|||
|
|
border
|
|||
|
|
height="500"
|
|||
|
|
:row-style="{height:'30px'}"
|
|||
|
|
:cell-style="{padding:'5px'}"
|
|||
|
|
header-row-class-name="active_header"
|
|||
|
|
header-cell-class-name="active_header"
|
|||
|
|
cell-class-name="content_center"
|
|||
|
|
style="width: 100px"> <!-- style="width: 40%" height="215" -->
|
|||
|
|
<template v-for="(val,key) in tableLabel2">
|
|||
|
|
<!-- You should not mix 'v-for' with 'v-if'-->
|
|||
|
|
<!-- 条件渲染-->
|
|||
|
|
<el-table-column :prop="key" :key='key'
|
|||
|
|
:label='typeof val === "object" ? val.label : val'
|
|||
|
|
:filters=filterText
|
|||
|
|
:filter-method="filterTag"
|
|||
|
|
v-if=' val.special'
|
|||
|
|
/>
|
|||
|
|
<el-table-column :prop="key" :key='key'
|
|||
|
|
:label='typeof val === "object" ? val.label : val'
|
|||
|
|
|
|||
|
|
v-if=' !val.special'
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="scale"
|
|||
|
|
label="操作">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span class="text" v-on:click="detail(scope.row,formInline2.start_date)">查看详情</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|||
|
|
:current-page="currentPage"
|
|||
|
|
|
|||
|
|
:page-size="10"
|
|||
|
|
layout="total, prev, pager, next, jumper"
|
|||
|
|
:total="tableData2.length">
|
|||
|
|
</el-pagination>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<!-- 【3】期货 -->
|
|||
|
|
<el-tab-pane label="期货">
|
|||
|
|
<el-card style='height: 1050px;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="formInline3" ref="formInline3">
|
|||
|
|
<!-- <el-form-item label="商品种类" prop="商品种类">-->
|
|||
|
|
|
|||
|
|
<!-- <el-select v-model="formInline3.industry" placeholder="选择商品" size="mini">-->
|
|||
|
|
<!-- <el-option v-for="item in futureOption" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
|||
|
|
<!-- </el-select>-->
|
|||
|
|
|
|||
|
|
<!-- </el-form-item>-->
|
|||
|
|
<el-form-item label="开始时间" prop="开始时间">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="formInline3.start_date"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="年/月/日"
|
|||
|
|
size="mini">
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="结束时间" prop="结束时间">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="formInline3.end_date"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="年/月/日"
|
|||
|
|
size="mini">
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button class="grayish_btn" @click="onSubmit3" size="mini">查询</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<!-- 添加半圆饼图 -->
|
|||
|
|
<half-doughnut :key='3' :myHalfData="myHalfData2"></half-doughnut>
|
|||
|
|
<!-- 表格 -->
|
|||
|
|
<div class="table">
|
|||
|
|
<el-table :data="tableData3.slice((currentPage-1)*pageSize,currentPage*pageSize)" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
|||
|
|
border
|
|||
|
|
height="500"
|
|||
|
|
:row-style="{height:'30px'}"
|
|||
|
|
:cell-style="{padding:'5px'}"
|
|||
|
|
header-row-class-name="active_header"
|
|||
|
|
header-cell-class-name="active_header"
|
|||
|
|
cell-class-name="content_center"
|
|||
|
|
style="width: 100px"> <!-- style="width: 40%" height="215" -->
|
|||
|
|
<template v-for="(val,key) in tableLabel3 ">
|
|||
|
|
<!-- You should not mix 'v-for' with 'v-if'-->
|
|||
|
|
<!-- 条件渲染-->
|
|||
|
|
<el-table-column :prop="key" :key='key'
|
|||
|
|
:label='typeof val === "object" ? val.label : val'
|
|||
|
|
:filters=filterText
|
|||
|
|
:filter-method="filterTag"
|
|||
|
|
v-if=' val.special'
|
|||
|
|
/>
|
|||
|
|
<el-table-column :prop="key" :key='key'
|
|||
|
|
:label='typeof val === "object" ? val.label : val'
|
|||
|
|
|
|||
|
|
v-if=' !val.special'
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<!--插槽里面没有东西就可以用单标签 -->
|
|||
|
|
<el-table-column
|
|||
|
|
prop="scale"
|
|||
|
|
label="操作">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span class="text" v-on:click="detail(scope.row,formInline3.start_date)">查看详情</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|||
|
|
:current-page="currentPage"
|
|||
|
|
|
|||
|
|
:page-size="10"
|
|||
|
|
layout="total, prev, pager, next, jumper"
|
|||
|
|
:total="tableData3.length">
|
|||
|
|
</el-pagination>
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<!-- #1弹窗：股价波动异常、高频交易 -->
|
|||
|
|
<el-dialog :visible.sync="detailsdialog1" width="100%" @open="open()" >
|
|||
|
|
<!-- 详细信息 -->
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<Histogram :x-data="xData" :y-data="yData" :legend="legend" :title="titleText"/>
|
|||
|
|
<!-- <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>
|
|||
|
|
<!-- #2弹窗：资产泡沫 -->
|
|||
|
|
<el-dialog :visible.sync="detailsdialog2" width="100%" @open="open()" >
|
|||
|
|
<!-- 详细信息 -->
|
|||
|
|
<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>
|
|||
|
|
<div style="height:100px;margin-left: 20px;">图谱</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"
|
|||
|
|
height="215" >
|
|||
|
|
<el-table-column v-for='(val,key) in tableLabel_detail_1_2' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_detail_1_2)">
|
|||
|
|
|
|||
|
|
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-table>
|
|||
|
|
<DifferentialChart/>
|
|||
|
|
<!-- <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="detailsdialog3" width="100%" @open="open()" >
|
|||
|
|
<!-- 详细信息 -->
|
|||
|
|
<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>
|
|||
|
|
<div style="height:100px;margin-left: 20px;">图谱</div>
|
|||
|
|
<el-table class='detail_table'
|
|||
|
|
:data="tableData_detail_1_3"
|
|||
|
|
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_1_3' :prop="key" :label="val" show-overflow-tooltip :min-width="calculateColumnWidth(key,tableData_detail_1_3)">
|
|||
|
|
|
|||
|
|
</el-table-column><!--插槽里面没有东西就可以用单标签 -->
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<AreaChart :key='1' :myAreaChart="myAreaChart1"></AreaChart>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- <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>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import HalfDoughnut from "../components/echarts/HalfDoughnut.vue";
|
|||
|
|
import DifferentialChart from "@/components/echarts/DifferentialChart.vue";
|
|||
|
|
import Histogram from "@/components/echarts/Histogram.vue";
|
|||
|
|
import AreaChart from "@/components/echarts/AreaChart.vue";
|
|||
|
|
import http from "@/utils/request";
|
|||
|
|
import {Loading} from "element-ui";
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
|
|||
|
|
components:{
|
|||
|
|
HalfDoughnut,
|
|||
|
|
DifferentialChart,
|
|||
|
|
Histogram,
|
|||
|
|
AreaChart,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
currentPage: 1, // 当前页码
|
|||
|
|
total: 20, // 总条数
|
|||
|
|
pageSize: 10, // 每页的数据条数
|
|||
|
|
filterText:[],
|
|||
|
|
titleText:'',
|
|||
|
|
legend:'',
|
|||
|
|
xData:[],
|
|||
|
|
yData:[],
|
|||
|
|
//记录当前所选的市场
|
|||
|
|
selectedIndustry:'',
|
|||
|
|
// 期货
|
|||
|
|
futureOption:[{'value': 'NIZL.SHF', 'label': '沪镍'}, {'value': 'RRZL.DCE', 'label': '粳米'}, {'value': 'LHZL.DCE', 'label': '生猪'}, {'value': 'CSZL.DCE', 'label': '玉米淀粉'}, {'value': 'RBZL.SHF', 'label': '螺纹钢'}, {'value': 'APZL.CZC', 'label': '苹果'}, {'value': 'CFZL.CZC', 'label': '棉花'}, {'value': 'BZL.DCE', 'label': '豆二'}, {'value': 'URZL.CZC', 'label': '尿素'}, {'value': 'AUZL.SHF', 'label': '沪金'}, {'value': 'BCZL.SHF', 'label': '国际铜'}, {'value': 'PBZL.SHF', 'label': '沪铅'}, {'value': 'AZL.DCE', 'label': '豆一'}, {'value': 'SPZL.SHF', 'label': '纸浆'}, {'value': 'LZL.DCE', 'label': '塑料'}, {'value': 'SFZL.CZC', 'label': '硅铁'}, {'value': 'BUZL.SHF', 'label': '沥青'}, {'value': 'TAZL.CZC', 'label': 'PTA'}, {'value': 'HCZL.SHF', 'label': '热卷'}, {'value': 'SRZL.CZC', 'label': '白糖'}, {'value': 'CJZL.CZC', 'label': '红枣'}, {'value': 'SAZL.CZC', 'label': '纯碱'}, {'value': 'WRZL.SHF', 'label': '线材'}, {'value': 'CZL.DCE', 'label': '玉米'}, {'value': 'ZNZL.SHF', 'label': '沪锌'}, {'value': 'EBZL.DCE', 'label': '苯乙烯'}, {'value': 'RSZL.CZC', 'label': '菜籽'}, {'value': 'FBZL.DCE', 'label': '纤维板'}, {'value': 'MAZL.CZC', 'label': '甲醇'}, {'value': 'PPZL.DCE', 'label': '聚丙烯'}, {'value': 'IZL.DCE', 'label': '铁矿石'}, {'value': 'PZL.DCE', 'label': '棕榈油'}, {'value': 'FGZL.CZC', 'label': '玻璃'}, {'value': 'RUZL.SHF', 'label': '橡胶'}, {'value': 'AGZL.SHF', 'label': '沪银'}, {'value': 'SNZL.SHF', 'label': '沪锡'}, {'value': 'FUZL.SHF', 'label': '燃油'}, {'value': 'PGZL.DCE', 'label': 'LPG'}, {'value': 'PFZL.CZC', 'label': '短纤'}, {'value': 'SCZL.SHF', 'label': '原油'}, {'value': 'EGZL.DCE', 'label': '乙二醇'}, {'value': 'JMZL.DCE', 'label': '焦煤'}, {'value': 'MZL.DCE', 'label': '豆粕'}, {'value': 'NRZL.SHF', 'label': '20号胶'}, {'value': 'VZL.DCE', 'label': 'PVC'}, {'value': 'YZL.DCE', 'label': '豆油'}, {'value': 'JDZL.DCE', 'label': '鸡蛋'}, {'value': 'AOZL.SHF', 'label': '氧化铝'}, {'value': 'SSZL.SHF', 'label': '不锈钢'}, {'value': 'RMZL.CZC', 'label': '菜粕'}, {'value': 'CYZL.CZC', 'label': '棉纱'}, {'value': 'LUZL.SHF', 'label': '低硫燃油'}, {'value': 'OIZL.CZC', 'label': '菜油'}, {'value': 'JZL.DCE', 'label': '焦炭'}, {'value': 'ALZL.SHF', 'label': '沪铝'}, {'value': 'CUZL.SHF', 'label': '沪铜'}, {'value': 'SMZL.CZC', 'label': '锰硅'}, {'value': 'PKZL.CZC', 'label': '花生'}],
|
|||
|
|
// 判断是否弹窗打开
|
|||
|
|
// 判断是否弹窗打开
|
|||
|
|
detailsdialog1:false,
|
|||
|
|
detailsdialog2:false,
|
|||
|
|
detailsdialog3:false,
|
|||
|
|
// detailsdialog4:false,
|
|||
|
|
|
|||
|
|
// 【图表数据】
|
|||
|
|
//半圆图
|
|||
|
|
myHalfData1: [
|
|||
|
|
// { 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",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
myHalfData3:[],
|
|||
|
|
myHalfData2:[
|
|||
|
|
// { value: 300, name: "股价波动异常" },
|
|||
|
|
// { value: 350, name: "高频交易" },
|
|||
|
|
// { value: 200, name: "资产泡沫" },
|
|||
|
|
// {
|
|||
|
|
// // make an record to fill the bottom 50%
|
|||
|
|
// value: 300+350+200,
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // stop the chart from rendering this piece
|
|||
|
|
// color: "none",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
// 面积图
|
|||
|
|
myAreaChart1:[],
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 【整合接收数据】
|
|||
|
|
formInline1: {
|
|||
|
|
industry:'',
|
|||
|
|
start_date:'',
|
|||
|
|
end_date:'',
|
|||
|
|
},
|
|||
|
|
formInline2: {
|
|||
|
|
industry:'',
|
|||
|
|
start_date:'',
|
|||
|
|
end_date:'',
|
|||
|
|
},
|
|||
|
|
formInline3: {
|
|||
|
|
industry:'',
|
|||
|
|
start_date:'',
|
|||
|
|
end_date:'',
|
|||
|
|
},
|
|||
|
|
// 【表格】
|
|||
|
|
tableData1: [
|
|||
|
|
{
|
|||
|
|
异常关联类型: '股价波动异常',
|
|||
|
|
涉及股票: '股票1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
异常关联类型: '高频交易',
|
|||
|
|
涉及股票: '股票1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
异常关联类型: '资产泡沫',
|
|||
|
|
涉及股票: '股票1',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
tableData2: [
|
|||
|
|
{
|
|||
|
|
异常关联类型: '股价波动异常',
|
|||
|
|
涉及股票: '债券1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
异常关联类型: '高频交易',
|
|||
|
|
涉及股票: '债券2',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
异常关联类型: '资产泡沫',
|
|||
|
|
涉及股票: '债券3',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
tableData3: [
|
|||
|
|
{
|
|||
|
|
异常关联类型: '股价波动异常',
|
|||
|
|
涉及商品: '玉米',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
异常关联类型: '高频交易',
|
|||
|
|
涉及商品: '大豆',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
异常关联类型: '资产泡沫',
|
|||
|
|
涉及商品: '棕榈油',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
tableLabel1: {
|
|||
|
|
编码: '编号',
|
|||
|
|
异常关联类型: {label:'异常关联类型' ,
|
|||
|
|
special:true
|
|||
|
|
},
|
|||
|
|
名称: '涉及股票',
|
|||
|
|
监测时间: '监测时间',
|
|||
|
|
股票价格: '股票价格',
|
|||
|
|
交易数量: '交易数量',
|
|||
|
|
风险等级: '风险等级',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
tableLabel2: {
|
|||
|
|
编码: '编号',
|
|||
|
|
异常关联类型: {label:'异常关联类型' ,
|
|||
|
|
special:true
|
|||
|
|
},
|
|||
|
|
名称: '涉及主体',
|
|||
|
|
监测时间: '监测时间',
|
|||
|
|
股票价格: '债券价格',
|
|||
|
|
交易数量: '交易数量',
|
|||
|
|
风险等级: '风险等级',
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
tableLabel3: {
|
|||
|
|
编码: '编号',
|
|||
|
|
异常关联类型: {label:'异常关联类型' ,
|
|||
|
|
special:true
|
|||
|
|
},
|
|||
|
|
涉及商品: '涉及商品',
|
|||
|
|
合约名称: '合约名称',
|
|||
|
|
监测时间: '监测时间',
|
|||
|
|
股票价格: '股票价格',
|
|||
|
|
交易数量: '交易数量',
|
|||
|
|
风险等级: '风险等级',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
tableLabel_detail_1_1:
|
|||
|
|
{
|
|||
|
|
编号: '编号',
|
|||
|
|
异常主体:'异常主体',
|
|||
|
|
关联对象:'关联对象',
|
|||
|
|
异常关联类型:'异常关联类型',
|
|||
|
|
关联相似度:'关联相似度',
|
|||
|
|
涉及事件详情:'涉及事件详情',
|
|||
|
|
高影响力主体分析:'高影响力主体分析',
|
|||
|
|
风险等级:'风险等级',
|
|||
|
|
},
|
|||
|
|
tableData_detail_1_1:[
|
|||
|
|
{
|
|||
|
|
编号: '',
|
|||
|
|
异常主体:'股票1',
|
|||
|
|
关联对象:'股票2',
|
|||
|
|
异常关联类型:'高频交易',
|
|||
|
|
关联相似度:'关联相似度',
|
|||
|
|
涉及事件详情:'事件分析',
|
|||
|
|
高影响力主体分析:'高影响力主体分析',
|
|||
|
|
风险等级:'',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
tableLabel_detail_1_2:
|
|||
|
|
{
|
|||
|
|
编号: '编号',
|
|||
|
|
异常主体:'异常主体',
|
|||
|
|
关联对象:'关联对象',
|
|||
|
|
异常关联类型:'异常关联类型',
|
|||
|
|
关联相似度:'关联相似度',
|
|||
|
|
涉及事件详情:'涉及事件详情',
|
|||
|
|
高影响力主体分析:'高影响力主体分析',
|
|||
|
|
风险等级:'风险等级',
|
|||
|
|
},
|
|||
|
|
tableData_detail_1_2:[
|
|||
|
|
{
|
|||
|
|
编号: '',
|
|||
|
|
异常主体:'股票1',
|
|||
|
|
关联对象:'股票2',
|
|||
|
|
异常关联类型:'高频交易',
|
|||
|
|
关联相似度:'关联相似度',
|
|||
|
|
涉及事件详情:'事件分析',
|
|||
|
|
高影响力主体分析:'高影响力主体分析',
|
|||
|
|
风险等级:'',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
tableLabel_detail_1_3:
|
|||
|
|
{
|
|||
|
|
编号: '编号',
|
|||
|
|
异常主体:'异常主体',
|
|||
|
|
关联对象:'关联对象',
|
|||
|
|
异常关联类型:'异常关联类型',
|
|||
|
|
关联相似度:'关联相似度',
|
|||
|
|
涉及事件详情:'涉及事件详情',
|
|||
|
|
高影响力主体分析:'高影响力主体分析',
|
|||
|
|
风险等级:'风险等级',
|
|||
|
|
},
|
|||
|
|
tableData_detail_1_3:[
|
|||
|
|
{
|
|||
|
|
编号: '',
|
|||
|
|
异常主体:'股票1',
|
|||
|
|
关联对象:'股票2',
|
|||
|
|
异常关联类型:'高频交易',
|
|||
|
|
关联相似度:'关联相似度',
|
|||
|
|
涉及事件详情:'事件分析',
|
|||
|
|
高影响力主体分析:'高影响力主体分析',
|
|||
|
|
风险等级:'',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
|
|||
|
|
handleSizeChange(val) {
|
|||
|
|
console.log(`每页 ${val} 条`);
|
|||
|
|
this.currentPage = 1;
|
|||
|
|
this.pageSize = val;
|
|||
|
|
},
|
|||
|
|
//当前页改变时触发 跳转其他页
|
|||
|
|
handleCurrentChange(val) {
|
|||
|
|
console.log(`当前页: ${val}`);
|
|||
|
|
this.currentPage = val;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
filterTag(value, row) {
|
|||
|
|
return row.异常关联类型 === value;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onSubmit1(){
|
|||
|
|
// console.log(this.formInline1.start_date,this.formInline1.end_date)
|
|||
|
|
console.log()
|
|||
|
|
if (String(this.formInline1.start_date)===String(this.formInline1.end_date)){
|
|||
|
|
this.$message({
|
|||
|
|
showClose: true,
|
|||
|
|
message: '请重新选择时间',
|
|||
|
|
type: 'warning'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
let options={
|
|||
|
|
text:'请稍等'
|
|||
|
|
}
|
|||
|
|
let loadingInstance = Loading.service(options);
|
|||
|
|
this.selectedIndustry = 'stock'
|
|||
|
|
if (this.myHalfData1.length !== 0)
|
|||
|
|
this.myHalfData1.length = 0
|
|||
|
|
this.currentPage=1
|
|||
|
|
http.get('/anomaly/all_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
sc: 'stock',
|
|||
|
|
indus: this.formInline1.industry,
|
|||
|
|
sdate: this.formInline1.start_date,
|
|||
|
|
edate: this.formInline1.end_date
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
// console.log(res.data.date)
|
|||
|
|
// this.$notify.info({
|
|||
|
|
// title: '提示',
|
|||
|
|
// message: '仅显示部分结果'
|
|||
|
|
// });
|
|||
|
|
let total = 0
|
|||
|
|
for (let i in res.data.date) {
|
|||
|
|
if (res.data.date[i]!==0){
|
|||
|
|
total += Number(res.data.date[i])
|
|||
|
|
|
|||
|
|
this.myHalfData1.push({value: Number(res.data.date[i]), name: i})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (total!==0){
|
|||
|
|
this.myHalfData1.push({
|
|||
|
|
value: total,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "none",
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
http.get('/anomaly/item_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
sc: 'stock',
|
|||
|
|
indus: this.formInline1.industry,
|
|||
|
|
sdate: this.formInline1.start_date,
|
|||
|
|
edate: this.formInline1.end_date
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.filterText=[]
|
|||
|
|
this.tableData1 = res.data.data
|
|||
|
|
const unique = Array.from(new Set(this.tableData1.map(item => item.异常关联类型)));
|
|||
|
|
console.log(unique)
|
|||
|
|
for (let i in unique)
|
|||
|
|
{
|
|||
|
|
let tmp={ text: unique[i], value: unique[i] }
|
|||
|
|
if ( !this.filterText.some(item => JSON.stringify(item) === JSON.stringify(tmp)))
|
|||
|
|
this.filterText.push(tmp)
|
|||
|
|
}
|
|||
|
|
console.log(this.filterText)
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
loadingInstance.close()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onSubmit2(){
|
|||
|
|
if (String(this.formInline2.start_date)===String(this.formInline2.end_date)){
|
|||
|
|
this.$message({
|
|||
|
|
showClose: true,
|
|||
|
|
message: '请重新选择时间',
|
|||
|
|
type: 'warning'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
let options={
|
|||
|
|
text:'请稍等'
|
|||
|
|
}
|
|||
|
|
this.currentPage=1
|
|||
|
|
let loadingInstance = Loading.service(options);
|
|||
|
|
this.selectedIndustry = 'bond'
|
|||
|
|
if (this.myHalfData3.length !== 0)
|
|||
|
|
this.myHalfData3.length = 0
|
|||
|
|
http.get('/anomaly/all_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
sc: 'bond',
|
|||
|
|
indus: this.formInline2.industry,
|
|||
|
|
sdate: this.formInline2.start_date,
|
|||
|
|
edate: this.formInline2.end_date
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
// this.$notify.info({
|
|||
|
|
// title: '提示',
|
|||
|
|
// message: '仅显示部分结果'
|
|||
|
|
// });
|
|||
|
|
console.log(res.data.date)
|
|||
|
|
let total = 0
|
|||
|
|
for (let i in res.data.date) {
|
|||
|
|
if (res.data.date[i]!==0){
|
|||
|
|
total += Number(res.data.date[i])
|
|||
|
|
this.myHalfData3.push({value: Number(res.data.date[i]), name: i})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (total!==0){
|
|||
|
|
this.myHalfData3.push({
|
|||
|
|
value: total,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "none",
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
http.get('/anomaly/item_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
sc: 'bond',
|
|||
|
|
indus: this.formInline2.industry,
|
|||
|
|
sdate: this.formInline2.start_date,
|
|||
|
|
edate: this.formInline2.end_date
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.filterText=[]
|
|||
|
|
this.tableData2 = res.data.data
|
|||
|
|
const unique = Array.from(new Set(this.tableData2.map(item => item.异常关联类型)));
|
|||
|
|
console.log(unique)
|
|||
|
|
for (let i in unique)
|
|||
|
|
{
|
|||
|
|
let tmp={ text: unique[i], value: unique[i] }
|
|||
|
|
if ( !this.filterText.some(item => JSON.stringify(item) === JSON.stringify(tmp)))
|
|||
|
|
this.filterText.push(tmp)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
loadingInstance.close()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onSubmit3(){
|
|||
|
|
if (String(this.formInline3.start_date)===String(this.formInline3.end_date)){
|
|||
|
|
this.$message({
|
|||
|
|
showClose: true,
|
|||
|
|
message: '请重新选择时间',
|
|||
|
|
type: 'warning'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.currentPage=1
|
|||
|
|
let options={
|
|||
|
|
text:'请稍等'
|
|||
|
|
}
|
|||
|
|
let loadingInstance = Loading.service(options);
|
|||
|
|
this.selectedIndustry = 'future'
|
|||
|
|
if (this.myHalfData2.length !== 0)
|
|||
|
|
this.myHalfData2.length = 0
|
|||
|
|
http.get('/anomaly/all_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
sc: 'future',
|
|||
|
|
indus: this.formInline3.industry,
|
|||
|
|
sdate: this.formInline3.start_date,
|
|||
|
|
edate: this.formInline3.end_date
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
// this.$notify.info({
|
|||
|
|
// title: '提示',
|
|||
|
|
// message: '仅显示部分结果'
|
|||
|
|
// });
|
|||
|
|
console.log(res.data.date)
|
|||
|
|
let total = 0
|
|||
|
|
for (let i in res.data.date) {
|
|||
|
|
if (res.data.date[i]!==0){
|
|||
|
|
total += Number(res.data.date[i])
|
|||
|
|
this.myHalfData2.push({value: Number(res.data.date[i]), name: i})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (total!==0){
|
|||
|
|
|
|||
|
|
this.myHalfData2.push({
|
|||
|
|
value: total,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "none",
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
http.get('/anomaly/item_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
sc: 'future',
|
|||
|
|
indus: this.formInline3.industry,
|
|||
|
|
sdate: this.formInline3.start_date,
|
|||
|
|
edate: this.formInline3.end_date
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.filterText=[]
|
|||
|
|
this.tableData3 = res.data.data
|
|||
|
|
const unique = Array.from(new Set(this.tableData3.map(item => item.异常关联类型)));
|
|||
|
|
console.log(unique)
|
|||
|
|
for (let i in unique)
|
|||
|
|
{
|
|||
|
|
let tmp={ text: unique[i], value: unique[i] }
|
|||
|
|
if ( !this.filterText.some(item => JSON.stringify(item) === JSON.stringify(tmp)))
|
|||
|
|
this.filterText.push(tmp)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
loadingInstance.close()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 调整表格列宽
|
|||
|
|
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`;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//股
|
|||
|
|
testDeatil(row){
|
|||
|
|
let that=this
|
|||
|
|
if(row.异常关联类型==='价格波动异常'||row.异常关联类型==='高频交易异常' ||row.异常关联类型==='资产泡沫异常') {
|
|||
|
|
this.detailsdialog1 = true//打开弹窗
|
|||
|
|
http.get('/anomaly/sc_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
date: this.formInline1.start_date,
|
|||
|
|
sc: that.selectedIndustry,
|
|||
|
|
id: row.名称,
|
|||
|
|
type: row.异常关联类型
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
let name=res.data.name!==''?res.data.name:row.名称
|
|||
|
|
let y = []
|
|||
|
|
let x = []
|
|||
|
|
if (row.异常关联类型 === '价格波动异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
|
|||
|
|
y.push(res.data.data[i].价格波动异常值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
this.legend = '价格波动'
|
|||
|
|
this.titleText = name+'价格波动情况'
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '高频交易异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
y.push(res.data.data[i].高频交易值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
this.legend = '交易量波动'
|
|||
|
|
this.titleText = name+'交易量变化情况'
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '资产泡沫异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
y.push(res.data.data[i].资产泡沫值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
this.legend = '资产泡沫值'
|
|||
|
|
this.titleText = name+'资产泡沫'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.xData = x.reverse()
|
|||
|
|
this.yData = y.reverse()
|
|||
|
|
// this.lineData['yData']=y
|
|||
|
|
// console.log(this.lineData)
|
|||
|
|
})
|
|||
|
|
http.get('/anomaly/anomaly_event/', {
|
|||
|
|
params: {
|
|||
|
|
time: this.formInline1.start_date,
|
|||
|
|
market: that.selectedIndustry,
|
|||
|
|
subject: row.名称,
|
|||
|
|
type: row.异常关联类型
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
console.log(res.data)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (row.异常关联类型==='资产泡沫') {
|
|||
|
|
this.detailsdialog2 = true//打开弹窗
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型==='事件风险波及'||row.异常关联类型==='风险事件时长'||row.异常关联类型==='事件热度异常') {
|
|||
|
|
this.detailsdialog3 = true//打开弹窗
|
|||
|
|
}
|
|||
|
|
// console.log(row)
|
|||
|
|
// http.get('/anomaly/anomaly_relevant_analyse/', {
|
|||
|
|
// params: {
|
|||
|
|
// subject: row.名称,
|
|||
|
|
// time: row.监测时间,
|
|||
|
|
// market: this.selectedIndustry,
|
|||
|
|
// type: row.异常关联类型
|
|||
|
|
// }
|
|||
|
|
// }).then((res) => {
|
|||
|
|
// console.log(res.data)
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
detail(row,date) {
|
|||
|
|
|
|||
|
|
let that = this
|
|||
|
|
if (this.selectedIndustry !== 'future') {
|
|||
|
|
if (row.异常关联类型 === '价格波动异常' || row.异常关联类型 === '高频交易异常' || row.异常关联类型 === '资产泡沫异常') {
|
|||
|
|
this.detailsdialog1 = true//打开弹窗
|
|||
|
|
http.get('/anomaly/sc_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
date: date,
|
|||
|
|
sc: that.selectedIndustry,
|
|||
|
|
id: row.名称,
|
|||
|
|
type: row.异常关联类型
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
let name=res.data.name!==''?res.data.name:row.名称
|
|||
|
|
console.log(name)
|
|||
|
|
let y = []
|
|||
|
|
let x = []
|
|||
|
|
if (row.异常关联类型 === '价格波动异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
y.push(res.data.data[i].价格波动异常值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
this.legend = '价格波动'
|
|||
|
|
this.titleText = name+'价格波动情况'
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '高频交易异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
y.push(res.data.data[i].高频交易值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
this.legend = '交易量波动'
|
|||
|
|
this.titleText = name+'交易量变化情况'
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '资产泡沫异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
y.push(res.data.data[i].资产泡沫值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
this.legend = '资产泡沫值'
|
|||
|
|
this.titleText = name+'资产泡沫'
|
|||
|
|
}
|
|||
|
|
this.xData = x.reverse()
|
|||
|
|
this.yData = y.reverse()
|
|||
|
|
// this.lineData['yData']=y
|
|||
|
|
// console.log(this.lineData)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '资产泡沫') {
|
|||
|
|
this.detailsdialog2 = true//打开弹窗
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '事件风险波及' || row.异常关联类型 === '风险事件时长' || row.异常关联类型 === '事件热度异常') {
|
|||
|
|
this.detailsdialog3 = true//打开弹窗
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (row.异常关联类型 === '价格波动异常' || row.异常关联类型 === '高频交易异常') {
|
|||
|
|
this.detailsdialog1 = true//打开弹窗
|
|||
|
|
http.get('/anomaly/sc_anomaly/', {
|
|||
|
|
params: {
|
|||
|
|
sc: 'future',
|
|||
|
|
date: date,
|
|||
|
|
id: row.合约名称,
|
|||
|
|
type: row.异常关联类型
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
let y = []
|
|||
|
|
let x = []
|
|||
|
|
if (row.异常关联类型 === '价格波动异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
y.push(res.data.data[i].价格波动异常值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
}
|
|||
|
|
this.legend = '价格波动率'
|
|||
|
|
if (row.异常关联类型 === '高频交易异常')
|
|||
|
|
for (let i in res.data.data) {
|
|||
|
|
y.push(res.data.data[i].高频交易值)
|
|||
|
|
x.push(res.data.data[i].监测时间)
|
|||
|
|
}
|
|||
|
|
this.legend = '交易量波动'
|
|||
|
|
this.xData = x.reverse()
|
|||
|
|
this.yData = y.reverse()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '资产泡沫') {
|
|||
|
|
this.detailsdialog2 = true//打开弹窗
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (row.异常关联类型 === '事件风险波及' || row.异常关联类型 === '风险事件时长' || row.异常关联类型 === '事件热度异常') {
|
|||
|
|
this.detailsdialog3 = true//打开弹窗
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//关联实体
|
|||
|
|
// http.get('/anomaly/anomaly_relevant_analyse/', {
|
|||
|
|
// params: {
|
|||
|
|
// subject: row.合约名称,
|
|||
|
|
// monitoring_time: row.监测时间,
|
|||
|
|
// market: this.selectedIndustry,
|
|||
|
|
// type: row.异常关联类型
|
|||
|
|
// }
|
|||
|
|
// }).then((res) => {
|
|||
|
|
// console.log(res.data)
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 打开弹窗图像
|
|||
|
|
open(){
|
|||
|
|
// this.$nextTick(() => {
|
|||
|
|
// // 执行echarts方法
|
|||
|
|
// this.initEcharts()
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang='less' scoped>
|
|||
|
|
.form{//产品搜索栏
|
|||
|
|
|
|||
|
|
display:flex;
|
|||
|
|
justify-content:space-between;//左右贴边
|
|||
|
|
margin-top:10px;
|
|||
|
|
// height: 40px;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.grayish_btn{//浅灰色按钮
|
|||
|
|
color: #fff;//文字颜色
|
|||
|
|
background-color: #aaaaaa;//背景颜色
|
|||
|
|
}
|
|||
|
|
// 调整表头间隔、设置表头下方边框颜色
|
|||
|
|
.table{
|
|||
|
|
padding: 0px 20px 2px 20px;//返回表格添加间隙 上 右
|
|||
|
|
// font-size: 12px;
|
|||
|
|
// color: #606266;
|
|||
|
|
|
|||
|
|
// 调整表头间隔、设置表头下方边框颜色
|
|||
|
|
.text{
|
|||
|
|
color:rgba(2, 167, 240, 0.729411764705882);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
.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
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|