891 lines
26 KiB
Vue
891 lines
26 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 1、上标 -->
|
||
<span class="superscript" style="width: 20px; height: 40px;">风险预警</span>
|
||
<!-- 2、产品搜索栏 -->
|
||
<div class="form">
|
||
<!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
||
|
||
<!-- <el-form-item label="预警市场">-->
|
||
<!-- <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-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>
|
||
</div>
|
||
|
||
<!-- 3、内容 -->
|
||
<el-row :gutter="20">
|
||
<el-col :span="15">
|
||
<el-card style=" height:800px;">
|
||
<!-- 标题&按钮 -->
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<span style="font-size: 18px;font-weight: bold;">各省份风险情况（默认近半年数据）</span>
|
||
<!-- <div>-->
|
||
<!-- <el-button class="grayish_btn" style="margin-right: 10px;" size="mini">高风险地区</el-button>-->
|
||
<!-- <el-button class="grayish_btn" size="mini">风险率攀升</el-button>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
<!-- 地图 -->
|
||
<!-- <el-card style=" height:500px;"> -->
|
||
<region :new-map-data="mapData"/>
|
||
<!-- </el-card> -->
|
||
<!-- 表 -->
|
||
<el-table class='table' :data="tableData1" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||
border
|
||
height="300"
|
||
: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 v-for='(val,key) in tableLabel1' :prop="key" :label="val" show-overflow-tooltip /><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
|
||
<el-table-column
|
||
prop="scale"
|
||
label="操作">
|
||
<template slot-scope="scope">
|
||
<span class="text" v-on:click="detail1(scope.row)">查看详情</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<el-card style=" height:400px;">
|
||
<span style="font-size: 18px;font-weight: bold;">行业预警排行</span>
|
||
<!-- 2、产品搜索栏 -->
|
||
<div class="form_small">
|
||
<!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline2" class="demo-form-inline">
|
||
|
||
<el-form-item label="交易所">
|
||
<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-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button class="grayish_btn" @click="indusRisk" icon="el-icon-search" size="mini">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- <el-card style=" height:200px;"> -->
|
||
<div ref="echarts_2" style="height:320px;width:1000px">
|
||
</div>
|
||
<!-- </el-card> -->
|
||
</el-card>
|
||
|
||
</el-col>
|
||
|
||
<el-col :span="9">
|
||
<el-card style=" height:1200px;">
|
||
<span style="font-size: 18px;font-weight: bold;">个体风险预警</span>
|
||
<div class="form_small">
|
||
<!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline3" class="demo-form-inline">
|
||
|
||
<el-form-item label="交易所">
|
||
<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-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button class="grayish_btn" @click="individualRisk" icon="el-icon-search" size="mini">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- <div >-->
|
||
<!-- <span>日</span>-->
|
||
<!-- <span>周</span>-->
|
||
<!-- <span>月</span>-->
|
||
<!-- </div>-->
|
||
<div>
|
||
预警次数
|
||
</div>
|
||
<el-row :gutter="12">
|
||
<el-col :span="8">
|
||
<el-card style="background-color: #c43434cc;">
|
||
<!-- <div class="button" @click="alert('here')"> 严重</div>-->
|
||
<el-button type="text" class="button" @click="choseType('严重')">严重</el-button>
|
||
{{ critical }}
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8" >
|
||
<el-card style="background-color: #f1c049;">
|
||
<!-- <div> 中等</div>-->
|
||
<el-button type="text" class="button" @click="choseType('中等')">中等</el-button>
|
||
{{ mid }}
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8" >
|
||
<el-card style="background-color: #4dca8e;">
|
||
<!-- <div>轻微</div>-->
|
||
<el-button type="text" class="button" @click="choseType('轻微')">轻微</el-button>
|
||
{{ good }}
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-card style=" height:400px;">
|
||
<!-- 去掉图像外围的框，鼠标悬停标题变大，尽量不被外框遮挡 -->
|
||
<div ref="echarts_1" style="height:300px;width:390px; "></div>
|
||
|
||
|
||
</el-card>
|
||
<!-- 表 -->
|
||
<el-table class='table' :data="tableData2" :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"
|
||
height="400"
|
||
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 tableLabel2' :prop="key" :label="val" 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>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 详情页1 -->
|
||
<el-dialog
|
||
:visible.sync="detailsdialog_1"
|
||
width="80%">
|
||
<el-table class='table' :data="tableData_detail_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">
|
||
<!-- 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 tableLabel_detail_1' :prop="key" :label="val" show-overflow-tooltip /><!--插槽里面没有东西就可以用单标签 -->
|
||
<!-- show-overflow-tooltip可以省略展示较多的文字内容 -->
|
||
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
<!-- 详情页2 -->
|
||
<el-dialog
|
||
:visible.sync="detailsdialog_2"
|
||
width="80%">
|
||
<el-table class='table' :data="tableData_detail_2" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||
border
|
||
fit="true"
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'0px'}" style="width: 100%"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
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 tableLabel_detail_2' :prop="key" :label="val" 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-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts"
|
||
import region from "../components/region.vue";
|
||
import http from '../utils/request'
|
||
export default {
|
||
//引入组件
|
||
components: {
|
||
region
|
||
},
|
||
data() {
|
||
return {
|
||
type:'',
|
||
change:true,
|
||
mapData:'',
|
||
pieData:[],
|
||
critical:'',
|
||
mid:'',
|
||
good:'',
|
||
// 【整合接收数据】（3个）
|
||
// 1-"风险预警"
|
||
|
||
formInline1: {
|
||
market: '',
|
||
start_date:'',
|
||
end_date:'',
|
||
},
|
||
// 小1-"行业预警排行"
|
||
formInline2: {
|
||
industry:'',
|
||
},
|
||
// 小2-"个体风险预警"
|
||
formInline3: {
|
||
industry:'',
|
||
},
|
||
|
||
// 【搜索栏】
|
||
// 第1栏"风险预警"(预警市场)
|
||
|
||
options_market: [{
|
||
value: '股票',
|
||
label: '股票'
|
||
}, {
|
||
value: '债券',
|
||
label: '债券'
|
||
}, {
|
||
value: '期货',
|
||
label: '期货'
|
||
}, {
|
||
value: '全部',
|
||
label: '全部'
|
||
}
|
||
],
|
||
options_industry:[{
|
||
value: '',
|
||
label: '全部'
|
||
}, {
|
||
value: '深圳证券交易所',
|
||
label: '深圳证券交易所'
|
||
}, {
|
||
value: '上海证券交易所',
|
||
label: '上海证券交易所'
|
||
},
|
||
// {
|
||
// value: '北交所',
|
||
// label: '北京证券交易所'
|
||
// },
|
||
],
|
||
|
||
options_exchange:[{
|
||
value: '',
|
||
label: '全部'
|
||
}, {
|
||
value: '深圳证券交易所',
|
||
label: '深圳证券交易所'
|
||
}, {
|
||
value: '上海证券交易所',
|
||
label: '上海证券交易所'
|
||
}, {
|
||
value: '北京证券交易所',
|
||
label: '北京证券交易所'
|
||
}],
|
||
|
||
// 【表格,不包括详情页】
|
||
tableLabel1: {
|
||
// num: '事件序号',
|
||
province: '省份',
|
||
counts: '严重风险总量',
|
||
early_warning_time: '最新预警时刻',
|
||
warning_score:'预警平均值',
|
||
increase:'风险同比增加',
|
||
},
|
||
origiData:[],//用于筛选时保存数据
|
||
tableLabel2:{
|
||
// order: '排名',
|
||
code: '股票代码',
|
||
name: '企业名称',
|
||
warning_type: '风险水平',
|
||
|
||
},
|
||
|
||
tableData1: [{
|
||
num: '1',
|
||
province: '北京',
|
||
total_risks: 21,
|
||
warning_time: '2023/6/29 16:00',
|
||
warning_average:80,
|
||
YOY:'+10',
|
||
},
|
||
{
|
||
num: '2',
|
||
province: '河北',
|
||
total_risks: 21,
|
||
warning_time: '2023/6/29 16:00',
|
||
warning_average:80,
|
||
YOY:'+10',
|
||
},
|
||
{
|
||
num: '3',
|
||
province: '山西',
|
||
total_risks: 21,
|
||
warning_time: '2023/6/29 16:00',
|
||
warning_average:80,
|
||
YOY:'+10',
|
||
},
|
||
{
|
||
num: '4',
|
||
province: '山东',
|
||
total_risks: 21,
|
||
warning_time: '2023/6/29 16:00',
|
||
warning_average:80,
|
||
YOY:'+10',
|
||
},
|
||
{
|
||
num: '5',
|
||
province: '黑龙江',
|
||
total_risks: 21,
|
||
warning_time: '2023/6/29 16:00',
|
||
warning_average:80,
|
||
YOY:'+10',
|
||
},
|
||
],
|
||
|
||
tableData2: [
|
||
// {
|
||
// order: '1',
|
||
// code: '688001.SH',
|
||
// name: '华兴源创',
|
||
// warning: 80,
|
||
//
|
||
// },
|
||
// {
|
||
// order: '2',
|
||
// code: '688001.SH',
|
||
// name: '华兴源创',
|
||
// warning: 75,
|
||
//
|
||
// },
|
||
// {
|
||
// order: '3',
|
||
// code: '688001.SH',
|
||
// name: '华兴源创',
|
||
// warning: 75,
|
||
//
|
||
// },
|
||
// {
|
||
// order: '4',
|
||
// code: '688001.SH',
|
||
// name: '华兴源创',
|
||
// warning: 75,
|
||
//
|
||
// },
|
||
],
|
||
// 【详情页】
|
||
// 详情页是否打开的判断标签
|
||
detailsdialog_1: false,
|
||
detailsdialog_2: false,
|
||
|
||
tableData_detail_1:[{}],
|
||
tableData_detail_2:[{}],
|
||
|
||
// 区域
|
||
tableLabel_detail_1:{
|
||
code:'主体代码',
|
||
name:'名称',
|
||
province:'省份',
|
||
// 行业:'行业',
|
||
early_warning_time:'当前预警时刻',
|
||
// exchange:'交易所',
|
||
risk_type:'风险类型',
|
||
warning_type:'风险等级',
|
||
warning_score:'风险值',
|
||
last_time:'上次预警时刻',
|
||
increase:'同比',
|
||
|
||
},
|
||
// 个体
|
||
tableLabel_detail_2:{
|
||
code:'主体代码',
|
||
name:'名称',
|
||
province:'省份',
|
||
// 行业:'行业',
|
||
early_warning_time:'当前预警时刻',
|
||
exchange:'交易所',
|
||
risk_type:'风险类型',
|
||
warning_type:'风险水平',
|
||
warning_score:'风险概率',
|
||
url:'相关链接'
|
||
},
|
||
|
||
}
|
||
},
|
||
mounted(){
|
||
this.initMapData()
|
||
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={
|
||
// 右上角存图
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['30%', '65%'],//调整饼图内圆和外圆大小
|
||
center:['50%','65%'],//调整饼在画布上的距离，此时偏下
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 40,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: true
|
||
},
|
||
data: this.pieData
|
||
// [
|
||
// { value: 40, name: '重大声誉风险' },
|
||
// { value: 38, name: '流动风险' },
|
||
// { value: 32, name: '获现风险' },
|
||
// { value: 30, name: '市场风险' },
|
||
// { value: 28, 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 = {
|
||
// 右上角存图
|
||
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: yData
|
||
|
||
// },
|
||
},
|
||
series: [
|
||
{
|
||
// color:'#6d7d87',
|
||
type: 'bar',
|
||
data: xData
|
||
},
|
||
// {
|
||
// 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)
|
||
})
|
||
},
|
||
regionRisk() {
|
||
http.get('/warning/region_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
|
||
let data = eval(unescape(res.data.replace(/\\u/g, '%u')))
|
||
this.critical = data['指数']['严重']
|
||
this.mid = data['指数']['中等']
|
||
this.good = data['指数']['轻微']
|
||
|
||
})
|
||
},
|
||
// 详情页1
|
||
detail1(row){
|
||
// 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)//返回这一行所有的内容
|
||
this.detailsdialog_1 = true//打开弹窗
|
||
|
||
|
||
// http.get(
|
||
// "/",
|
||
// {params:{
|
||
// id: row.order,//新闻id 是吗？
|
||
|
||
// }}).then(response => {
|
||
// this.detailData_table1 = response.data//待修改
|
||
// this.detail_content=response.data.content
|
||
|
||
// console.log(response.data)
|
||
|
||
|
||
// })
|
||
|
||
|
||
},
|
||
// 详情页2
|
||
detail2(row){
|
||
console.log("查看详情-个体风险预警")
|
||
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//打开弹窗
|
||
// http.get(
|
||
// "/",
|
||
// {params:{
|
||
// id: row.order,//新闻id 是吗？
|
||
|
||
// }}).then(response => {
|
||
// this.detailData_table1 = response.data//待修改
|
||
// this.detail_content=response.data.content
|
||
|
||
// console.log(response.data)
|
||
|
||
|
||
// })
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<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] {
|
||
// width: 500px;
|
||
height: 460px;
|
||
// position: relative;
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 0px;
|
||
}
|
||
.form{//产品搜索栏
|
||
// display:flex;
|
||
// justify-content:space-between;//左右贴边
|
||
margin-top:5px;
|
||
// // height: 40px;
|
||
padding-left: 10px;
|
||
margin-bottom: 10px;
|
||
// padding: 0px;
|
||
|
||
}
|
||
.form_small{
|
||
margin-top:5px;
|
||
// // height: 40px;
|
||
padding-left: 10px;
|
||
}
|
||
.table{
|
||
// 和选项框隔开
|
||
margin-top:10px;
|
||
font-size: 12px;
|
||
|
||
|
||
// 调整表头间隔、设置表头下方边框颜色
|
||
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||
// border-bottom: 1px solid #333333 !important;
|
||
padding: 1px 0;
|
||
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;
|
||
}
|
||
}
|
||
.text{
|
||
color:rgba(2, 167, 240, 0.729411764705882);
|
||
}
|
||
.grayish_btn{//浅灰色按钮
|
||
color: #fff;//文字颜色
|
||
background-color: #aaaaaa;//背景颜色
|
||
}
|
||
|
||
</style>
|