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>
|
|||
|
|
|