1029 lines
42 KiB
Vue
1029 lines
42 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 卡片化的标签页 -->
|
||
<el-tabs type="card">
|
||
<!-- 1、健康指数 -->
|
||
<el-tab-pane label="健康指数">
|
||
<el-card style=" height:80px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||
<div class="card_label" style=" height: 28px;width: 100%; text-align: center;">健康指数</div>
|
||
|
||
<div class="form"> <!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
||
<el-form-item label="公司名称" style=" margin-right: 40px;">
|
||
<el-autocomplete
|
||
class="inline-input"
|
||
v-model="formInline1.company"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="公司名称"
|
||
size="mini"
|
||
></el-autocomplete>
|
||
|
||
<el-input v-model="formInline1.company" placeholder="请输入公司名称" size="mini"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="日期 " style=" margin-right: 40px;">
|
||
<quter-component v-model="formInline1.quarter_year" placeholder="选择季度" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button class="grayish_btn" @click="onSubmit1" size="mini" style=" margin-right: 20px;">查询</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button class="grayish_btn" @click="onSubmit2" size="mini">清空</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 第一栏"健康指数"的表格 -->
|
||
<div class="table">
|
||
<el-table :data="tableData_1" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||
border
|
||
height="250"
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'3px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center"
|
||
style="width: 100%; border: 1px solid #7f7f7f;"> <!-- style="width: 40%" height="215" -->
|
||
<el-table-column v-for='(val,key) in tableLabel_short' :prop="key" :label="val" /><!--插槽里面没有东西就可以用单标签 -->
|
||
<el-table-column
|
||
prop="scale"
|
||
label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" v-on:click="onSubmit3" size="mini" >雷达图</el-button>
|
||
<el-button type="primary" @click="onSubmit4" size="mini" >加入对比</el-button>
|
||
<el-button type="primary" @click="onSubmit5" size="mini" >加入管理</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!-- 第一栏"健康指数"的弹窗-单雷达图 -->
|
||
<el-dialog :visible.sync="detailsdialog" width="80%" @open="open()">
|
||
<el-card style=";">
|
||
<el-card style=" height:740px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px">雷达图对比</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<!-- <div class="form"> <!– inline="true"表单域在一行 –>-->
|
||
<!-- <el-form :inline="true" :model="formInline_1" class="demo-form-inline">-->
|
||
<!-- <el-form-item label="公司:" style=" margin-right: 40px;">-->
|
||
<!-- <el-autocomplete-->
|
||
<!-- class="inline-input"-->
|
||
<!-- v-model="formInline2.company1"-->
|
||
<!-- :fetch-suggestions="querySearch"-->
|
||
<!-- placeholder="公司名称"-->
|
||
<!-- size="mini"-->
|
||
<!-- ></el-autocomplete>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item>-->
|
||
<!-- <el-button class="grayish_btn" @click="onSubmit6" size="mini" style=" margin-right: 20px;">查询</el-button>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- -->
|
||
<!-- </el-form>-->
|
||
<!-- </div>-->
|
||
<!-- 雷达图 -->
|
||
<div class='radar' >
|
||
<!-- <div class="quarter_change">-->
|
||
<!-- <i class="el-icon-arrow-left" border style="font-size: 50px;color:#7f7f7f"></i>-->
|
||
<!-- <div>上一季度</div>-->
|
||
<!-- </div>-->
|
||
|
||
<div ref="echarts_3" style="height:500px;width:500px"></div>
|
||
</div>
|
||
|
||
<!-- "雷达图"表格 -->
|
||
<div class="table" style="padding:20px">
|
||
<el-table :data="tableData_1"
|
||
border
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'3px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center"
|
||
style="width: 100%; border: 1px solid #7f7f7f"> <!-- style="width: 40%" height="215" -->
|
||
<el-table-column prop="name" label="名称"></el-table-column>
|
||
<el-table-column v-for='(val,key) in tableLabel_long' :prop="key" :label="val"><!--插槽里面没有东西就可以用单标签 -->
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
</el-card>
|
||
<!-- 历史健康指数 -->
|
||
<el-card style=" height:680px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px">历史健康指数</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="form"> <!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline_2" class="demo-form-inline">
|
||
<el-form-item label="开始时间 " style=" margin-right: 40px;">
|
||
<quter-component label="开始时间" v-model="formInline_2.start_quarter" placeholder="选择季度" />
|
||
</el-form-item>
|
||
<el-form-item label="结束时间 " style=" margin-right: 40px;">
|
||
<quter-component label="结束时间" v-model="formInline_2.end_quarter" placeholder="选择季度" />
|
||
</el-form-item>
|
||
<!-- <el-form-item label="起止时间 " style=" margin-right: 40px;">-->
|
||
<!-- <el-select v-model="formInline_2.start_quarter" placeholder="请选择开始时间" size="mini">-->
|
||
<!-- <el-option v-for="item in options_quarter_year" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
||
<!-- </el-select>-->
|
||
|
||
<!-- <el-select v-model="formInline_2.end_quarter" placeholder="请选择结束时间" size="mini">-->
|
||
<!-- <el-option v-for="item in options_quarter_year" :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="onSubmit7" size="mini" style=" margin-right: 20px;">查询</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 折线图 -->
|
||
<div class='line' >
|
||
|
||
<div ref="echarts_4" style="height:500px;width:800px"></div>
|
||
</div>
|
||
|
||
|
||
|
||
</el-card>
|
||
</el-card>
|
||
|
||
</el-dialog>
|
||
<!-- 加入对比还不知道怎么写,跳转吗 -->
|
||
<!-- 加入管理,把这一行数据存入管理tab -->
|
||
|
||
|
||
</el-tab-pane>
|
||
|
||
<!-- 2、对比 -->
|
||
<el-tab-pane label="对比">
|
||
<!-- 2-1-雷达图对比 -->
|
||
<el-card style=" height:850px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px">雷达图对比</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="form"> <!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline2" class="demo-form-inline">
|
||
<el-form-item label="公司1:" style=" margin-right: 40px;">
|
||
<el-autocomplete
|
||
class="inline-input"
|
||
v-model="formInline2.company1"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="公司名称"
|
||
></el-autocomplete>
|
||
</el-form-item>
|
||
<el-form-item label="公司2:" style=" margin-right: 40px;">
|
||
<el-autocomplete
|
||
class="inline-input"
|
||
v-model="formInline2.company2"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="公司名称"
|
||
></el-autocomplete>
|
||
<el-form-item label="时间 " style=" margin-right: 40px;margin-left: 40px;">
|
||
<quter-component label="开始时间" v-model="formInline2.quarter_year" placeholder="选择季度" />
|
||
</el-form-item>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button class="grayish_btn" @click="onSubmit6" size="mini" style=" margin-right: 20px;">查询</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 雷达图 -->
|
||
<div class='radar' >
|
||
<!-- <div class="quarter_change">-->
|
||
<!-- <i class="el-icon-arrow-left" border style="font-size: 50px;color:#7f7f7f"></i>-->
|
||
<!-- <div>上一季度</div>-->
|
||
<!-- </div>-->
|
||
|
||
<div ref="echarts_1" style="height:500px;width:500px"></div>
|
||
</div>
|
||
|
||
<!-- "对比"表格 -->
|
||
<div class="table" style="padding:20px">
|
||
<el-table :data="tableData_2_1" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||
border
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'3px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center"
|
||
style="width: 100%; border: 1px solid #7f7f7f"> <!-- style="width: 40%" height="215" -->
|
||
<el-table-column prop="name" label="名称"></el-table-column>
|
||
<el-table-column v-for='(val,key) in tableLabel_long' :prop="key" :label="val"><!--插槽里面没有东西就可以用单标签 -->
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
</el-card>
|
||
<!-- 2-2-健康指数对比 -->
|
||
<el-card style=" height:680px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px">健康指数对比</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="form"> <!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline3" class="demo-form-inline">
|
||
<!-- <el-form-item label="公司1:" style=" margin-right: 40px;">-->
|
||
<!-- <el-input v-model="formInline3.company1" placeholder="请输入公司名称" ></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
|
||
<!-- <el-form-item label="公司2:" style=" margin-right: 40px;">-->
|
||
<!-- <el-input v-model="formInline3.company2" placeholder="请输入公司名称" ></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<el-form-item label="开始时间 " style=" margin-right: 40px;">
|
||
<quter-component v-model="formInline3.start_quarter" placeholder="选择季度" />
|
||
</el-form-item>
|
||
<el-form-item label="结束时间 " style=" margin-right: 40px;">
|
||
<quter-component v-model="formInline3.end_quarter" placeholder="选择季度" />
|
||
</el-form-item>
|
||
<!-- <el-form-item label="起止时间 " style=" margin-right: 40px;">-->
|
||
<!-- <el-select v-model="formInline3.start_quarter" placeholder="请选择开始时间" size="mini">-->
|
||
<!-- <el-option v-for="item in options_quarter_year" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
|
||
<!-- </el-select>-->
|
||
|
||
<!-- <el-select v-model="formInline3.end_quarter" placeholder="请选择结束时间" size="mini">-->
|
||
<!-- <el-option v-for="item in options_quarter_year" :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="onSubmit10" size="mini" style=" margin-right: 20px;">查询</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</div>
|
||
<!-- 折线图 -->
|
||
<div class='line' >
|
||
<div ref="echarts_2" style="height:500px;width:800px"></div>
|
||
</div>
|
||
|
||
|
||
|
||
</el-card>
|
||
<!-- 2-3-交叉对比 -->
|
||
<el-card style=" height:740px; border: 1px solid #7f7f7f;" :body-style={padding:0} > <!--:body-style={padding:0}取消卡片边距，btn就能在左上角 -->
|
||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px;">交叉对比</div>
|
||
<el-tabs type="card" style='padding-top:10px;padding-left:10px;'>
|
||
<!-- 2-3-1 行业-->
|
||
<el-tab-pane label="行业">
|
||
<el-card style=" height:80px; border: 1px solid #7f7f7f;" :body-style={padding:0} >
|
||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px;">条件查询</div>
|
||
<!-- 搜索框 -->
|
||
<div class="form"> <!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline4" class="demo-form-inline">
|
||
<el-form-item label="日期 " style=" margin-right: 40px;">
|
||
<quter-component v-model="formInline4.quarter_year" placeholder="选择季度" />
|
||
</el-form-item>
|
||
<el-form-item label="行业名称 " style=" margin-right: 40px;">
|
||
<el-select v-model="formInline4.industry" placeholder="请选择行业名称" >
|
||
<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="onSubmit8" size="mini" style=" margin-right: 20px;">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
<!-- "对比-交叉对比-行业"表格 -->
|
||
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--返回表格添加间隙 上 右 -->
|
||
<el-table :data="tableData_2_2" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||
border
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'3px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center"
|
||
style="width: 100%; border: 1px solid #7f7f7f"> <!-- style="width: 40%" height="215" -->
|
||
|
||
<el-table-column prop="name" label="名称"></el-table-column>
|
||
<el-table-column v-for='(val,key) in tableLabel_long' :prop="key" :label="val" sortable><!--插槽里面没有东西就可以用单标签 -->
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
<!-- 2-3-2 地域 -->
|
||
<el-tab-pane label="地域">
|
||
<el-card style=" height:80px; border: 1px solid #7f7f7f;" :body-style={padding:0} >
|
||
<div class="card_label" style=" height: 24px;width: 100%;text-align: left; padding-left:10px;">条件查询</div>
|
||
<!-- 搜索框 -->
|
||
<div class="form"> <!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline5" class="demo-form-inline">
|
||
<el-form-item label="开始时间">
|
||
<el-date-picker v-model="formInline5.start_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="结束时间">
|
||
<el-date-picker v-model="formInline5.end_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="省份 " style=" margin-right: 40px;">
|
||
<el-select v-model="formInline5.province" placeholder="请选择省份" size="mini">
|
||
<el-option v-for="item in options_province" :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="onSubmit9" size="mini" style=" margin-right: 20px;">查询</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- "对比-交叉对比-地域"表格 -->
|
||
<div class="table" style=" padding: 20px 10px 2px 0px;"><!--返回表格添加间隙 上 右 -->
|
||
<el-table :data="tableData_2_3" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||
border
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'3px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center"
|
||
style="width: 100%; border: 1px solid #7f7f7f"> <!-- style="width: 40%" height="215" -->
|
||
|
||
<el-table-column prop="name" label="名称"></el-table-column>
|
||
<el-table-column v-for='(val,key) in tableLabel_long' :prop="key" :label="val" sortable><!--插槽里面没有东西就可以用单标签 -->
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
</el-tabs>
|
||
</el-card>
|
||
</el-tab-pane><!-- 2对比-end -->
|
||
|
||
<!-- 3、我的管理 -->
|
||
<el-tab-pane label="我的管理">
|
||
<!-- 第三栏"我的管理"的表格 -->
|
||
<div class="table">
|
||
<el-table :data="tableData_3" :header-cell-style="{background: 'rgba(242, 242, 242)'}"
|
||
|
||
|
||
border
|
||
height="250"
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'3px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center"
|
||
style="width: 100%; border: 1px solid #7f7f7f;"> <!-- style="width: 40%" height="215" -->
|
||
<el-table-column v-for='(val,key) in tableLabel_short' :prop="key" :label="val" /><!--插槽里面没有东西就可以用单标签 -->
|
||
<el-table-column
|
||
prop="scale"
|
||
label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" v-on:@click="onSubmit3" size="mini" >雷达图</el-button>
|
||
<el-button type="primary" @click="onSubmit4" size="mini" >加入对比</el-button>
|
||
<el-button type="primary" @click="onSubmit5" size="mini" >加入管理</el-button>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
</div>
|
||
|
||
|
||
</el-tab-pane>
|
||
|
||
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import quterComponent from "@/components/quterComponent";
|
||
import * as echarts from "echarts"
|
||
import http from '../utils/request'
|
||
export default {
|
||
components:{
|
||
quterComponent
|
||
},
|
||
data() {
|
||
return {
|
||
// 雷达图数据
|
||
radarData:[],
|
||
// 雷达图弹窗
|
||
detailsdialog:false,
|
||
// 【分页组件的数据】
|
||
total:10,
|
||
page_size:1,
|
||
currentPage:2,
|
||
// 【整合接收数据】
|
||
formInline1: {
|
||
// 第1栏"健康指数"
|
||
company: '',
|
||
quarter_year: '',
|
||
},
|
||
formInline2: {
|
||
// 第2栏"对比"-"雷达图对比、健康指数共用"
|
||
tableData1:[],
|
||
tableData2:[],
|
||
radarData1:[],
|
||
radarData2:[],
|
||
company1: '',
|
||
company2: '',
|
||
quarter_year: '',
|
||
},
|
||
formInline3: {
|
||
// 第2栏"对比"-"健康指数对比"
|
||
company1: '',
|
||
company2: '',
|
||
start_quarter:'',
|
||
end_quarter:'',
|
||
},
|
||
formInline4: {
|
||
// 第2栏"对比"-"交叉对比"- 行业
|
||
quarter_year:'',
|
||
end_date:'',
|
||
industry:'',//行业独有
|
||
},
|
||
formInline5: {
|
||
// 第2栏"对比"-"交叉对比"-地域共用
|
||
start_date:'',
|
||
end_date:'',
|
||
province:'',//地域独有
|
||
},
|
||
// 健康指数点击雷达图后显示弹窗
|
||
formInline_1: {
|
||
company:'',
|
||
},
|
||
formInline_2: {
|
||
start_quarter:'',
|
||
end_quarter:'',
|
||
},
|
||
// 【搜索栏】
|
||
|
||
// 第2栏"对比"-"交叉对比"搜索栏(行业)
|
||
options_industry: [
|
||
{value: "房地产业",
|
||
label: "房地产业"},
|
||
{value: "信息传输、软件和信息技术服务业",
|
||
label: "信息传输、软件和信息技术服务业"},
|
||
{value: "水利、环境和公告设施管理业",
|
||
label: "水利、环境和公告设施管理业"},
|
||
{value: "制造业",
|
||
label: "制造业"},
|
||
{value: "综合",
|
||
label: "综合"},
|
||
{value: "建筑业",
|
||
label: "建筑业"},
|
||
{value: "批发和零售业",
|
||
label: "批发和零售业"},
|
||
{value: "电力、热力、燃气及水生产和供应业",
|
||
label: "电力、热力、燃气及水生产和供应业"},
|
||
{value: "银行",
|
||
label: "银行"},
|
||
],
|
||
// 第2栏"对比"-"交叉对比"搜索栏(地域省份)
|
||
options_province:[
|
||
{value: "北京市",
|
||
label: "北京市"},
|
||
{value: "山西省",
|
||
label: "山西省"},
|
||
{value: "河北省",
|
||
label: "河北省"},
|
||
{value: "河南省",
|
||
label: "河南省"},
|
||
{value: "山东省",
|
||
label: "山东省"},
|
||
{value: "安徽省",
|
||
label: "安徽省"},
|
||
],
|
||
|
||
// 【表格】
|
||
// [table-label]
|
||
tableLabel_short: {
|
||
name: '公司名称',
|
||
level: '健康等级',
|
||
健康指数: '健康指数',
|
||
},
|
||
tableLabel_long: {
|
||
// name: '名称',
|
||
健康指数: '健康指数',
|
||
财务状态:'财务状态',
|
||
运行状态:'运行状态',
|
||
规模扩张:'规模扩张',
|
||
声誉风险:'声誉风险',
|
||
外部环境:'外部环境',
|
||
操盘模式:'操盘模式',
|
||
},
|
||
// [table-data]
|
||
// 第1栏"健康指数"表格
|
||
tableData_1: [
|
||
// { name: '中国银行',
|
||
// index: 1,
|
||
// level: "中等",},
|
||
],
|
||
// 第2栏"对比"表格
|
||
tableData_2_1: [
|
||
|
||
],
|
||
// 第2栏"对比"-"交叉对比"表格_行业
|
||
tableData_2_2: [
|
||
{ name: '中国银行',
|
||
index: 1,},
|
||
|
||
{ name: '北京银行',
|
||
index: 3,},
|
||
],
|
||
// 第2栏"对比"-"交叉对比"表格_地域
|
||
tableData_2_3: [
|
||
{ name: '中国银行',
|
||
index: 1,},
|
||
|
||
{ name: '北京银行',
|
||
index: 3,},
|
||
],
|
||
// 第3栏"我的管理"
|
||
tableData_3: [
|
||
{ name: '中国银行',
|
||
index: 1,
|
||
level: "中等",},
|
||
],
|
||
// 第1栏"健康指数"-点击“雷达图”
|
||
tableData_4: [
|
||
{ name: '中国银行',
|
||
index: 1,
|
||
level: "中等",},
|
||
],
|
||
|
||
|
||
}
|
||
},
|
||
|
||
methods:{
|
||
// 联想
|
||
querySearch(queryString, cb) {
|
||
console.log(queryString)
|
||
// console.log(cb)
|
||
http.get(
|
||
"/search/search_health/?keyword="+queryString,
|
||
|
||
// paramsSerializer: params => {
|
||
// return qs.stringify(params, { indices: false })
|
||
).then(response => {
|
||
// console.log(response.data)
|
||
// console.log(cb)
|
||
let result=response.data
|
||
let re=[]
|
||
for (let i of result){
|
||
re.push({"value":i})
|
||
}
|
||
cb(re)
|
||
})},
|
||
// 健康指数
|
||
onSubmit1(){
|
||
console.log("健康指数查询")
|
||
http.get(
|
||
"/health/health_search/",
|
||
{params:{
|
||
name: this.formInline1.company,//公司名
|
||
date: this.formInline1.quarter_year,//时间（年份+季度）
|
||
}}).then(response => {
|
||
this.tableData_1= Array(response.data.data)
|
||
if (this.tableData_1['等级']===1)
|
||
this.tableData_1[0].level='严重'
|
||
else if (this.tableData_1['等级']===2)
|
||
this.tableData_1[0].level='中等'
|
||
else
|
||
this.tableData_1[0].level='良好'
|
||
// console.log(response)
|
||
this.tableData_1[0].name=this.formInline1.company
|
||
console.log(this.tableData_1)
|
||
if (this.radarData){
|
||
this.radarData.length=0
|
||
}
|
||
for (let i in response.data.data) {
|
||
// console.log(i)
|
||
if (i !== '健康指数' && i !== '等级' && typeof response.data.data[i] === 'number') this.radarData.push(response.data.data[i])
|
||
}
|
||
// console.log(this.radarData)
|
||
})
|
||
},
|
||
//
|
||
|
||
onSubmit2(){
|
||
console.log("清空")
|
||
},
|
||
|
||
onSubmit3(){
|
||
console.log("雷达图")
|
||
this.detailsdialog = true//打开弹窗
|
||
},
|
||
onSubmit4(){
|
||
console.log("加入对比")
|
||
},
|
||
onSubmit5(){
|
||
console.log("加入管理")
|
||
},
|
||
|
||
onSubmit6(){
|
||
if (this.tableData_2_1 || this.formInline2.radarData1 ||this.formInline2.radarData2){
|
||
this.formInline2.radarData1.length=0
|
||
this.formInline2.radarData2.length=0
|
||
this.tableData_2_1.length=0
|
||
}
|
||
http.get(
|
||
"/health/health_search/",
|
||
{params:{
|
||
name: this.formInline2.company1,//公司名
|
||
date: this.formInline2.quarter_year,//时间（年份+季度）
|
||
}}).then(response => {
|
||
this.formInline2.tableData1= response.data.data
|
||
if (this.formInline2.tableData1['等级']===1)
|
||
this.formInline2.tableData1.level='严重'
|
||
else if (this.formInline2.tableData1['等级']===2)
|
||
this.formInline2.tableData1.level='中等'
|
||
else
|
||
this.formInline2.tableData1.level='良好'
|
||
this.formInline2.tableData1.name=this.formInline2.company1
|
||
this.tableData_2_1.push( this.formInline2.tableData1)
|
||
for (let i in response.data.data){
|
||
if (i !=='健康指数' && i !=='等级' && typeof response.data.data[i]==='number') this.formInline2.radarData1.push(response.data.data[i])}
|
||
},
|
||
http.get(
|
||
"/health/health_search/",
|
||
{params:{
|
||
name: this.formInline2.company2,//公司名
|
||
date: this.formInline2.quarter_year,//时间（年份+季度）
|
||
}}).then(response => {
|
||
this.formInline2.tableData2= response.data.data
|
||
if (this.formInline2.tableData2['等级']===1)
|
||
this.formInline2.tableData2.level='严重'
|
||
else if (this.formInline2.tableData2['等级']===2)
|
||
this.formInline2.tableData2.level='中等'
|
||
else
|
||
this.formInline2.tableData2.level='良好'
|
||
// console.log(response)
|
||
this.formInline2.tableData2.name=this.formInline2.company2
|
||
for (let i in response.data.data)
|
||
if (i !=='健康指数' && i !=='等级' && typeof response.data.data[i]==='number') this.formInline2.radarData2.push(response.data.data[i])
|
||
console.log(this.formInline2.radarData2)
|
||
console.log(this.formInline2.radarData1)
|
||
const echarts1 = echarts.init(this.$refs.echarts_1)
|
||
|
||
this.tableData_2_1.push( this.formInline2.tableData2)
|
||
console.log(this.tableData_2_1)
|
||
const option1 = {
|
||
// 右上角存图
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
title: {
|
||
text: this.formInline2.quarter_year,
|
||
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||
y:"bottom",
|
||
padding:[ 0,10,10,10],
|
||
|
||
},
|
||
legend: {
|
||
data: ['中国银行']
|
||
},
|
||
radar: {
|
||
// shape: 'circle',
|
||
indicator: [
|
||
{ name: '投资关系', max: 100 },
|
||
{ name: '操盘模式', max: 100 },
|
||
{ name: '财务状态', max: 100 },
|
||
{ name: '运行状态', max: 100 },
|
||
{ name: '规模扩张', max: 100 },
|
||
{ name: '声誉风险', max: 100 },
|
||
{ name: '外部环境', max: 100 }
|
||
]
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Budget vs spending',
|
||
type: 'radar',
|
||
data: [
|
||
{
|
||
value: this.formInline2.radarData1,
|
||
name: this.formInline2.company1
|
||
},
|
||
{
|
||
value: this.formInline2.radarData2,
|
||
name: this.formInline2.company2
|
||
},
|
||
]
|
||
}
|
||
]
|
||
};
|
||
echarts1.setOption(option1)
|
||
})
|
||
)
|
||
|
||
|
||
},
|
||
onSubmit10(){
|
||
let echarts1 = echarts.init(this.$refs.echarts_2)
|
||
http.get(
|
||
"/health/line_chart/",
|
||
{params:{
|
||
name1: this.formInline2.company1,//公司名
|
||
name2:this.formInline2.company2,
|
||
sdate: this.formInline3.start_quarter,//时间（年份+季度）
|
||
edate:this.formInline3.end_quarter,
|
||
}}).then(response => {
|
||
let time=response.data.data['date']
|
||
let index1=response.data.data['value1']
|
||
let index2=response.data.data['value2']
|
||
// 折线图
|
||
const option= {
|
||
// 右上角存图
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
title: {
|
||
text: '健康指数',
|
||
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: [this.formInline2.company1,this.formInline2.company2],
|
||
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||
y:"bottom",
|
||
padding:0,
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: time,
|
||
axisLabel: {
|
||
interval:0,
|
||
rotate:40}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name: this.formInline2.company1,
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: index1
|
||
},
|
||
{
|
||
name: this.formInline2.company2,
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: index2
|
||
},
|
||
]
|
||
};
|
||
echarts1.setOption(option)
|
||
})
|
||
},
|
||
onSubmit7(){
|
||
console.log("健康 历史")
|
||
http.get(
|
||
"/health/line_chart/",
|
||
{params:{
|
||
name1: this.formInline1.company,//公司名
|
||
sdate: this.formInline_2.start_quarter,//时间（年份+季度）
|
||
edate:this.formInline_2.end_quarter,
|
||
}}).then(response => {
|
||
let time=response.data.data['date']
|
||
let index=response.data.data['value1']
|
||
// 折线图
|
||
const echarts4 = echarts.init(this.$refs.echarts_4)
|
||
const option_4 = {
|
||
// 右上角存图
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
title: {
|
||
text: '健康指数',
|
||
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: [this.formInline1.company],
|
||
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||
y:"bottom",
|
||
padding:0,
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: time,
|
||
axisLabel: {
|
||
interval:0,
|
||
rotate:40}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
|
||
|
||
},
|
||
series: [
|
||
{
|
||
name: this.formInline1.company,
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: index
|
||
},
|
||
// {
|
||
// name: '北京银行',
|
||
// type: 'line',
|
||
// stack: 'Total',
|
||
// data: [220, 182, 191, 234, 290, 330, 310]
|
||
// },
|
||
|
||
]
|
||
};
|
||
echarts4.setOption(option_4)
|
||
})
|
||
|
||
|
||
},
|
||
onSubmit8(){
|
||
console.log("交叉对比-行业 查询")
|
||
http.get(
|
||
"/health/health_indus/",
|
||
{params:{
|
||
ind: this.formInline4.industry,//公司名
|
||
date: this.formInline4.quarter_year,//时间（年份+季度）
|
||
}}).then(response => {
|
||
this.tableData_2_2= Array(response.data.data)
|
||
console.log(this.tableData_2_2)})
|
||
// if (this.formInline2.tableData1['等级']===1)
|
||
// this.formInline2.tableData1.level='严重'
|
||
// else if (this.formInline2.tableData1['等级']===2)
|
||
// this.formInline2.tableData1.level='中等'
|
||
// else
|
||
// this.formInline2.tableData1.level='良好'
|
||
// this.formInline2.tableData1.name=this.formInline2.company1
|
||
// this.tableData_2_1.push( this.formInline2.tableData1)
|
||
},
|
||
onSubmit9(){
|
||
console.log("交叉对比-地域 查询")
|
||
},
|
||
|
||
// 弹窗显示echarts
|
||
initEcharts() {
|
||
// 弹窗的雷达图与折线图
|
||
// 雷达图
|
||
const echarts3 = echarts.init(this.$refs.echarts_3)
|
||
const option_3 = {
|
||
// 右上角存图
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
title: {
|
||
text: this.formInline1.quarter_year.slice(0,4)+'年第'+this.formInline1.quarter_year.slice(6,)+'季度',
|
||
x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
||
y:"bottom",
|
||
padding:[ 0,10,10,10],
|
||
|
||
},
|
||
legend: {
|
||
data: ['中国银行']
|
||
},
|
||
radar: {
|
||
// shape: 'circle',
|
||
indicator: [
|
||
{ name: '投资关系', max: 100 },
|
||
{ name: '操盘模式', max: 100 },
|
||
{ name: '财务状态', max: 100 },
|
||
{ name: '运行状态', max: 100 },
|
||
{ name: '规模扩张', max: 100 },
|
||
{ name: '声誉风险', max: 100 },
|
||
{ name: '外部环境', max: 100 }
|
||
]
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Budget vs spending',
|
||
type: 'radar',
|
||
data: [
|
||
{
|
||
value: this.radarData,
|
||
name: this.formInline1.company
|
||
},
|
||
]
|
||
}
|
||
]
|
||
};
|
||
echarts3.setOption(option_3)
|
||
},
|
||
open(){
|
||
this.$nextTick(() => {
|
||
// 执行echarts方法
|
||
this.initEcharts()
|
||
})
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
|
||
.grayish_btn{//浅灰色按钮
|
||
color: #fff;//文字颜色
|
||
background-color: #aaaaaa;//背景颜色
|
||
}
|
||
.card_label{
|
||
font-size: 13px;
|
||
// padding:10px;
|
||
color:#fff;
|
||
background-color: #7f7f7f;
|
||
}
|
||
.form{//产品搜索栏
|
||
display:flex;
|
||
justify-content:space-between;//左右贴边
|
||
margin-top:5px;
|
||
// height: 40px;
|
||
padding-left: 40px;
|
||
// padding: 30px;
|
||
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
|
||
// 雷达图
|
||
.radar{
|
||
display:flex;
|
||
justify-content:center;
|
||
margin-right: 200px;
|
||
|
||
/deep/ .quarter_change{
|
||
display:column;
|
||
justify-content:center;
|
||
margin-top: 200px;
|
||
margin-left: 0px;
|
||
margin-right: 150px;
|
||
margin-bottom: 20px;
|
||
|
||
}
|
||
}
|
||
.line{
|
||
display:flex;
|
||
justify-content:center;
|
||
}
|
||
.grayish_btn{//浅灰色按钮
|
||
color: #fff;//文字颜色
|
||
background-color: #aaaaaa;//背景颜色
|
||
}
|
||
</style>
|
||
|