Skip to content

D
dsk-operate-sys-cscec
Commit a7cf7202 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent b55c8799
Hide whitespace changes
Inline Side-by-side
Showing with 1681 additions and 0 deletions
dsk-operate-ui/src/views/supplier/supplierOverview/index.vue 0 → 100644
View file @ a7cf7202
<template>
<div class="overview">
<div class="search-supplier m-16">
<div class="title_wrap">
<div class="enterprise_title">
供应商风险动态
</div>
</div>
<div class="evalist">
<div>
<div class="eva1">供应商风险总数</div>
<div class="eva2">1200</div>
<div class="eva3">近一月<span>新增+374</span></div>
<div class="eva4">昨日<span>减少-21</span></div>
</div>
<div>
<div class="eva1">司法诉讼</div>
<div class="eva2">200</div>
<div class="eva3">近一月<span>新增+374</span></div>
<div class="eva4">昨日<span>减少-21</span></div>
</div>
<div>
<div class="eva1">经营预警</div>
<div class="eva2">400</div>
<div class="eva3">近一月<span>新增+374</span></div>
<div class="eva4">昨日<span>减少-21</span></div>
</div>
<div>
<div class="eva1">行政处罚</div>
<div class="eva2">400</div>
<div class="eva3">近一月<span>新增+374</span></div>
<div class="eva4">昨日<span>减少-21</span></div>
</div>
<div>
<div class="eva1">不良行为</div>
<div class="eva2">400</div>
<div class="eva3">近一月<span>新增+374</span></div>
<div class="eva4">昨日<span>减少-21</span></div>
</div>
<div>
<div class="eva1">涉诉限用/禁用</div>
<div class="eva2">400</div>
<div class="eva3">近一月<span>新增+374</span></div>
<div class="eva4">昨日<span>减少-21</span></div>
</div>
</div>
</div>
<div class="content1 m-16">
<div class="cont-left">
<div class="title_wrap">
<div class="cont_title">
风险类型分布
<div class="select">
<el-select v-model="value1" filterable class="form-content-width same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
</el-select>
<custom-time-select :timeList="timeList" v-model="time" :class="[`select-adaptive-${inputID}`]" timeValue=""
placeholder="动态时间" @handle-search="iptAdaptive(inputID,'','changeSelect')" />
</div>
</div>
</div>
<div class="charts-div">
<div id="fb-echarts" style="height: 300px;"></div>
<div style="margin: 0 16px">
<el-table
:data="fxList"
height="241"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="风险类型" prop="type"></el-table-column>
<el-table-column label="供应商数量" prop="number"></el-table-column>
</el-table>
</div>
</div>
</div>
<div class="cont-right">
<div class="title_wrap">
<div class="cont_title">
风险类型趋势
<div class="select">
<el-select v-model="value2" filterable class="form-content-width same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
</el-select>
<!--<el-select v-model="value3" filterable class="form-content-width same-select-com" placeholder="展示方式" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>-->
<!--<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />-->
<!--</el-select>-->
</div>
</div>
</div>
<div class="charts-div">
<div id="wz-echarts" style="height: 300px;"></div>
<div style="margin: 0 16px">
<el-table
:data="fxqsList"
height="241"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="年月" prop="date"></el-table-column>
<el-table-column label="司法诉讼" prop="number1"></el-table-column>
<el-table-column label="经营预警" prop="number2"></el-table-column>
<el-table-column label="行政处罚" prop="number3"></el-table-column>
<el-table-column label="不良行为" prop="number4"></el-table-column>
<el-table-column label="涉诉限用/禁用" prop="number5"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<div class="content2 m-16">
<div class="title_wrap">
<div class="cont_title">
供应商风险列表
<div class="select">
<el-select v-model="value4" filterable class="form-content-width same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
</el-select>
<custom-time-select :timeList="timeList" v-model="time1" :class="[`select-adaptive-${inputID}`]" timeValue=""
placeholder="动态时间" @handle-search="iptAdaptive(inputID,'','changeSelect')" />
</div>
</div>
</div>
<div class="table-item" style="padding: 16px;">
<el-table
element-loading-text="Loading"
maxHeight="840"
:data="tableData"
row-key="id"
default-expand-all
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left" fixed="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="供应商名称" min-width="350" prop="name"></el-table-column>
<el-table-column label="风险总数" prop="fxsl"></el-table-column>
<el-table-column label="司法风险" prop="sffx"></el-table-column>
<el-table-column label="经营预警" prop="jyyj"></el-table-column>
<el-table-column label="行政处罚" prop="xzcf"></el-table-column>
<el-table-column label="不良行为" prop="blxw"></el-table-column>
<el-table-column label="涉诉限用/禁用" prop="ss"></el-table-column>
</el-table>
</div>
</div>
<div class="content3 m-16">
<div class="title_wrap">
<div class="enterprise_title">
供应商基本情况
</div>
</div>
<div class="evalist">
<div>
<div class="eva1">供应商总数</div>
<div class="eva2">1200</div>
</div>
<div>
<div class="eva1">专业分包</div>
<div class="eva2">200</div>
</div>
<div>
<div class="eva1">机械施工</div>
<div class="eva2">300</div>
</div>
<div>
<div class="eva1">物资设备</div>
<div class="eva2">400</div>
</div>
<div>
<div class="eva1">劳务分包企业</div>
<div class="eva2">200</div>
</div>
<div>
<div class="eva1">劳务分包队伍</div>
<div class="eva2">100</div>
</div>
</div>
</div>
<div class="content4 m-16">
<div class="cont-left">
<div class="title_wrap">
<div class="cont_title">
供应商地区分布分布
<div class="select">
<el-select v-model="value5" filterable class="form-content-width same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
</div>
<div class="charts-div">
<div id="dqfb-echarts" style="height: 350px;"></div>
<div style="margin: 0 16px">
<el-table
:data="viewData"
height="192"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="地区" prop="name"></el-table-column>
<el-table-column label="供应商数量" prop="quantity"></el-table-column>
<el-table-column label="履约金额（亿）" prop="money"></el-table-column>
</el-table>
</div>
</div>
</div>
<div class="cont-right">
<div class="title_wrap">
<div class="cont_title">
供应商准入/淘汰趋势
</div>
</div>
<div class="charts-div">
<div id="qs-echarts" style="height: 350px;"></div>
<div style="margin: 0 16px">
<el-table
:data="qsList"
height="192"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="年月日" prop="date"></el-table-column>
<el-table-column label="准入供应商" prop="number1"></el-table-column>
<el-table-column label="淘汰供应商" prop="number2"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<div class="content5 m-16">
<div class="cont-left">
<div class="title_wrap">
<div class="cont_title">
供应商行业分布
</div>
</div>
<div class="charts-div">
<div id="hyfb-echarts" style="height: 350px;"></div>
<div style="margin: 0 16px">
<el-table
:data="hyfbList"
height="192"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="行业" prop="name"></el-table-column>
<el-table-column label="供应商数量" width="130" prop="number"></el-table-column>
<el-table-column label="履约金额（亿）" width="130" prop="money"></el-table-column>
</el-table>
</div>
</div>
</div>
<div class="cont-right">
<div class="title_wrap">
<div class="cont_title">
供应商股份评级
<div class="select">
<el-select v-model="value6" filterable class="form-content-width same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
</div>
<div class="charts-div">
<div id="gfpj-echarts" style="height: 350px;"></div>
<div style="margin: 0 16px">
<el-table
:data="gfpjList"
height="192"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="股份评级" prop="type"></el-table-column>
<el-table-column label="供应商数量" prop="number"></el-table-column>
<el-table-column label="履约金额（亿）" prop="money"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<div class="content6 m-16">
<div class="cont-left">
<div class="title_wrap">
<div class="cont_title">
供应商中标次数排名
</div>
</div>
<div class="charts-div">
<div id="zbcs-echarts" style="height: 350px;"></div>
<div style="margin: 0 16px">
<el-table
:data="wzData"
height="192"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="供应商名称" prop="name"></el-table-column>
<el-table-column label="投标次数" width="130" prop="money"></el-table-column>
<el-table-column label="中标次数" width="130" prop="score"></el-table-column>
</el-table>
</div>
</div>
</div>
<div class="cont-right">
<div class="title_wrap">
<div class="cont_title">
供应商履约金额分布统计
<div class="select">
<el-select v-model="value7" filterable class="form-content-width same-select-com" placeholder="供应商类型" :class="[`select-adaptive-${inputID1}`]" :popper-append-to-body='false'>
<el-option v-for="(item, index) in gyslxList" :key="index" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
</div>
<div class="charts-div">
<div id="jefb-echarts" style="height: 350px;"></div>
<div style="margin: 0 16px">
<el-table
:data="jefbList"
height="192"
border
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="履约金额范围" prop="type"></el-table-column>
<el-table-column label="供应商数量" prop="number"></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import '@/assets/styles/public.scss'
import '@/assets/styles/supplierlist.scss'
import mixin from '@/views/detail/party-a/mixins/mixin'
import CustomTimeSelect from '../../component/CustomTimeSelect'
import { v4 } from "uuid"
import * as echarts from 'echarts'
import '@/assets/lib/china.js'
export default {
name: 'overview',
mixins: [mixin],
components:{CustomTimeSelect},
data(){
return{
wzData:[
{
name:'北京宏盛兴达装饰设计有限责任公司',
money:'772',
score:'118'
},
{
name:'重庆宏力嘉商贸有限公司',
money:'245',
score:'114'
},
{
name:'都江堰市宏发节能砖厂',
money:'832',
score:'102'
},
{
name:'重庆展鹏门业有限公司',
money:'132',
score:'92'
},
{
name:'海南奥利格新型建',
money:'132',
score:'82'
},
{
name:'莱晟达(烟台)环保材料科',
money:'132',
score:'78'
},
{
name:'中建蓉成建材成都有限公司',
money:'132',
score:'72'
},
{
name:'北京京首建混凝土搅拌站有限公司',
money:'132',
score:'62'
},
{
name:'重庆越尚建材有限公司',
money:'83',
score:'11'
},
{
name:'北京京首建混凝土搅拌站有限公司',
money:'684',
score:'25'
},
],
timeList: ['昨天','近三天', '近七天', '近半月', '自定义'],
time:'',
time1:'',
inputID: this.getUid(),
inputID1:this.getUid(),
gyslxList:[
{
label:'劳务分包',
value:'劳务分包'
},
{
label:'专业分包',
value:'专业分包'
},
{
label:'专业服务',
value:'专业服务'
},
{
label:'设备',
value:'设备'
},
{
label:'租赁',
value:'租赁'
},
{
label:'物资',
value:'物资'
},
],
value1:'',
value2:'',
value3:'',
value4:'',
value5:'',
value6:'',
value7:'',
zkfsList:[
{
label:'按天展示',
value:'按天展示'
},
{
label:'按周展示',
value:'按周展示'
},
{
label:'按月展示',
value:'按月展示'
},
{
label:'按年展示',
value:'按年展示'
},
],
fxList:[
{
type:'司法诉讼',
number:'1200'
},
{
type:'经营预警',
number:'500'
},
{
type:'行政处罚',
number:'300'
},
{
type:'不良行为',
number:'200'
},
{
type:'涉诉限用/禁用',
number:'100'
},
],
lxList:[
{
type:'司法诉讼',
number:'1200',
date:'1月',
},
{
type:'经营预警',
number:'500',
date:'2月',
},
{
type:'行政处罚',
number:'300',
date:'3月',
},
{
type:'不良行为',
number:'200',
date:'4月',
},
{
type:'涉诉限用/禁用',
number:'100',
date:'5月',
},
],
tableData:[
{
name:'中国石油化工股份有限公司',
fxsl:'27',
sffx:'85',
jyyj:'77',
xzcf:'77',
blxw:'75',
ss:'43',
},
{
name:'中国石油天然气股份有限公司',
fxsl:'27',
sffx:'85',
jyyj:'77',
xzcf:'77',
blxw:'75',
ss:'43',
},
{
name:'中国建筑股份有限公司',
fxsl:'27',
sffx:'85',
jyyj:'77',
xzcf:'77',
blxw:'75',
ss:'43',
},
],
fxqsList:[
{
date:'1月',
number1:'87',
number2:'5',
number3:'3',
number4:'12',
number5:'9',
},
{
date:'2月',
number1:'47',
number2:'5',
number3:'3',
number4:'12',
number5:'9',
},
{
date:'3月',
number1:'67',
number2:'5',
number3:'3',
number4:'5',
number5:'2',
},
{
date:'4月',
number1:'37',
number2:'6',
number3:'14',
number4:'4',
number5:'9',
},
{
date:'5月',
number1:'67',
number2:'46',
number3:'3',
number4:'8',
number5:'17',
},
{
date:'6月',
number1:'47',
number2:'16',
number3:'3',
number4:'12',
number5:'2',
},
{
date:'7月',
number1:'37',
number2:'11',
number3:'6',
number4:'8',
number5:'19',
},
{
date:'8月',
number1:'48',
number2:'26',
number3:'9',
number4:'7',
number5:'23',
},
{
date:'9月',
number1:'47',
number2:'16',
number3:'7',
number4:'12',
number5:'9',
},
{
date:'10月',
number1:'75',
number2:'56',
number3:'4',
number4:'12',
number5:'11',
},
{
date:'11月',
number1:'23',
number2:'6',
number3:'13',
number4:'12',
number5:'16',
},
{
date:'12月',
number1:'67',
number2:'46',
number3:'26',
number4:'12',
number5:'9',
},
],
viewData:[
{
name:'河南省',
quantity:'1230',
money:12.00,
},
{
name:'北京',
quantity:'2230',
money:20.90,
},
{
name:'四川省',
quantity:'230',
money:4.00,
},
{
name:'河北省',
quantity:'130',
money:4.00,
},
{
name:'广东省',
quantity:'1000',
money:10.00,
},
{
name:'重庆',
quantity:'100',
money:10.00,
},
{
name:'江苏省',
quantity:'200',
money:10.00,
},
{
name:'青海省',
quantity:'1230',
money:12.00,
},
{
name:'甘肃省',
quantity:'2230',
money:20.90,
},
{
name:'云南省',
quantity:'230',
money:4.00,
},
],
qsList:[
{
date:'1月',
number1:'87',
number2:'26'
},
{
date:'2月',
number1:'47',
number2:'16'
},
{
date:'3月',
number1:'67',
number2:'26'
},
{
date:'4月',
number1:'37',
number2:'12'
},
{
date:'5月',
number1:'67',
number2:'46'
},
{
date:'6月',
number1:'47',
number2:'16'
},
{
date:'7月',
number1:'37',
number2:'11'
},
{
date:'8月',
number1:'48',
number2:'26'
},
{
date:'9月',
number1:'47',
number2:'16'
},
{
date:'10月',
number1:'75',
number2:'56'
},
{
date:'11月',
number1:'23',
number2:'6'
},
{
date:'12月',
number1:'67',
number2:'46'
},
],
hyfbList:[
{
name:'批发和零售业',
number:'832',
money:'102'
},
{
name:'房屋建筑业',
number:'772',
money:'118'
},
{
name:'制造业',
number:'345',
money:'114'
},
{
name:'交通运输',
number:'342',
money:'92'
},
{
name:'农、林、牧、渔',
number:'232',
money:'82'
},
{
name:'供应商行业名称六',
number:'132',
money:'78'
},
{
name:'供应商行业名称七',
number:'132',
money:'72'
},
{
name:'供应商行业名称八',
number:'132',
money:'62'
},
{
name:'供应商行业名称九',
number:'83',
money:'11'
},
{
name:'供应商行业名称十',
number:'84',
money:'25'
},
],
gfpjList:[
{
type:'物资优质',
number:'23',
money:'12.00'
},
{
type:'专业分包优质',
number:'33',
money:'22.00'
},
{
type:'设备优质',
number:'43',
money:'12.00'
},
{
type:'专业服务优质',
number:'8',
money:'11.00'
},
{
type:'劳务优质',
number:'12',
money:'27.00'
},
],
jefbList:[
{
type:'100万以下',
number:'23'
},
{
type:'100万~500万',
number:'34'
},
{
type:'500万-1000万',
number:'45'
},
{
type:'1000万-5000万',
number:'21'
},
{
type:'5000万~1亿',
number:'5'
},
],
}
},
created() {
this.$nextTick(()=>{
this.initChart(this.fxList)
this.initChart1(this.fxqsList)
this.initChart3()
this.initChart4(this.qsList)
this.initChart5(this.hyfbList)
this.initChart6(this.gfpjList)
this.initChart7(this.wzData)
this.initChart8(this.jefbList)
// this.initChart1(this.wzData)
// this.initChart2(this.wzData)
// this.initChart3(this.wzData)
// this.initChart4(this.wzData)
// this.initChart5(this.wzData)
})
},
methods:{
getUid() {
return v4();
},
changeSelect(){
},
initChart(data) {
var list=[];
for(var i=0;i<data.length;i++){
var obj={};
obj.name=data[i].type;
obj.value=data[i].number;
list.push(obj)
}
let myChart = echarts.init(document.getElementById("fb-echarts"))
let option = {
tooltip: {
trigger: 'item',
},
legend: {
show:false,
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: list,
},
color:['#FF3C3C', '#0081FF', '#12C0C7','#0CBC6D','#FFAB44'],
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: list,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart1(data) {
let myChart = echarts.init(document.getElementById("wz-echarts"))
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 0
},
data: data.map(item => item.date),
},
yAxis: {
type: 'value',
},
grid: {
top:30,
left:50,
right:40,
bottom:60,
},
color:['#0081FF', '#0CBC6D', '#FF3C3C', '#FFAB44', '#12C0C7'],
series: [
{
name: '司法诉讼',
type: 'line',
symbolSize:0,
data: data.map(item => item.number1)
},
{
name: '经营预警',
type: 'line',
symbolSize:0,
data: data.map(item => item.number2)
},
{
name: '行政处罚',
type: 'line',
symbolSize:0,
data: data.map(item => item.number3)
},
{
name: '不良行为',
type: 'line',
symbolSize:0,
data: data.map(item => item.number4)
},
{
name: '涉诉限用/禁用',
type: 'line',
symbolSize:0,
data: data.map(item => item.number5)
},
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
//中国地图
initChart3(){
let myChart = echarts.init(document.getElementById("dqfb-echarts"))
// 指定图表的配置项和数据
// 绘制图表
let data =[]
this.viewData.length>0&&this.viewData.map(item=>{
data.push({value:Number(item.quantity),name:item.name,money:item.money})
})
let option = {
tooltip: {
trigger: 'item',
show: true,
formatter: function(params) {
console.log(params)
return `<span style="color:rgba(35, 35, 35, 1);font-size:14px;">${params.name}</span><br>
<span style="color:#3D3D3D;font-size:12px;">供应商数量</span><span style="color:#3D3D3D;font-size:12px;font-weight:700;"> ${params.value}</span><br>
<span style="color:#3D3D3D;font-size:12px;">履约金额（亿）</span><span style="color:#3D3D3D;font-size:12px;font-weight:700;"> ${params.data.money}</span><br>
`
}
},
// 左侧小导航图标
visualMap: {
show: false,
x: 'left',
y: 'center',
min: 0,
max: 830000,
color: ['#D1E6FF']
},
selectedMode: 'single',
series: [{
name: '地图',
type: 'map',
mapType: 'china',
roam: false,
zoom: 1.2,
label: {
normal: {
show: false, // 省份名称
},
},
itemStyle: {
normal: { // 未选中状态
// areaColor: 'red', // 南沙诸岛背景颜色
borderColor: '#FFFFFF',
label: {
show: true// 显示名称
}
},
emphasis: { // 也是选中样式
areaColor: '#0081FF',
}
},
data: data
}]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart4(data) {
let myChart = echarts.init(document.getElementById("qs-echarts"))
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 0
},
data: data.map(item => item.date),
},
yAxis: {
type: 'value',
},
grid: {
top:30,
left:50,
right:40,
bottom:60,
},
color:['#FF3C3C', '#0081FF'],
series: [
{
name: '淘汰供应商',
type: 'line',
symbolSize:0,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(255, 60, 60, 0.2)'
}, {
offset: 1, color: 'rgba(255, 60, 60, 0)'
} ],
global: false
}
},
data: data.map(item => item.number2)
},
{
name: '准入供应商',
type: 'line',
symbolSize:0,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 129, 255, 0.2)'
}, {
offset: 1, color: 'rgba(0, 129, 255, 0)'
} ],
global: false
}
},
data: data.map(item => item.number1)
},
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart5(data) {
let myChart = echarts.init(document.getElementById("hyfb-echarts"))
let option = {
// 坐标轴
grid: {
top: "10%",
left: "4%",
right: "3%",
bottom: "4%",
containLabel: true, //是否包含坐标轴的文字
},
// 鼠标hover出现的提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: '#FFFFFF',
borderWidth: 0,
textStyle: {
color: '#232323',
fontSize: 14,
},
},
xAxis: [
//x轴数据设置
{
type: "value",
},
],
yAxis: [
{
type: "category",
data: data.map(item => item.name),
axisTick: { show: false },
inverse:true,
axisLine:{
// color: '#DCDFE6',
lineStyle: {
color: '#DCDFE6',//左边线的颜色
},
},
axisLabel:{
textStyle:{
color: '#232323cc'
}
}
},
],
series: [
{
name: '供应商数量',
data: data.map(item => item.number),
type: "bar",
barWidth: 12,
barGap: 0.5,
itemStyle: {
color: '#0081FF',
}
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart6(data) {
var list=[];
for(var i=0;i<data.length;i++){
var obj={};
obj.name=data[i].type;
obj.value=data[i].number;
list.push(obj)
}
let myChart = echarts.init(document.getElementById("gfpj-echarts"))
let option = {
tooltip: {
trigger: 'item',
},
legend: {
show:false,
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: list,
},
color:['#FF3C3C', '#0081FF', '#12C0C7','#0CBC6D','#FFAB44'],
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: list,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart7(data) {
let myChart = echarts.init(document.getElementById("zbcs-echarts"))
let option = {
// 坐标轴
grid: {
top: "10%",
left: "4%",
right: "3%",
bottom: "4%",
containLabel: true, //是否包含坐标轴的文字
},
// 鼠标hover出现的提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: '#FFFFFF',
borderWidth: 0,
textStyle: {
color: '#232323',
fontSize: 14,
},
},
xAxis: [
//x轴数据设置
{
type: "value",
},
],
yAxis: [
{
type: "category",
data: data.map(item => item.name),
axisTick: { show: false },
axisLine:{
// color: '#DCDFE6',
lineStyle: {
color: '#DCDFE6',//左边线的颜色
},
},
axisLabel:{
textStyle:{
color: '#232323cc'
}
}
},
],
series: [
{
name: '履约加权得分',
data: data.map(item => item.score),
type: "bar",
barWidth: 12,
barGap: 0.5,
itemStyle: {
color: '#0081FF',
}
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart8(data) {
var list=[];
for(var i=0;i<data.length;i++){
var obj={};
obj.name=data[i].type;
obj.value=data[i].number;
list.push(obj)
}
let myChart = echarts.init(document.getElementById("jefb-echarts"))
let option = {
tooltip: {
trigger: 'item',
},
legend: {
show:false,
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: list,
},
color:['#FF3C3C', '#0081FF', '#12C0C7','#0CBC6D','#FFAB44'],
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: list,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
iptAdaptive(uid, multiple = false, name) {
multiple ? this.multipleAdaptiveHandle(uid, name) : this.iptAdaptiveHandle(uid, name);
},
//单选
async iptAdaptiveHandle(uid, name) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.handleSearch(name);
} catch (error) {
}
},
async multipleAdaptiveHandle(){
},
}
}
</script>
<style lang="scss" scoped>
.overview{
.enterprise_title{
position: relative;
}
.select{
position: absolute;
right: 0;
top:-10px;
display: flex;
}
.custom-time-select1 {
width: 110px !important;
::v-deep .el-input__inner{
border: 0;
&::placeholder {
color: rgba(35, 35, 35, 0.8) !important;
}
}
}
.evalist{
background: #fff;
display: flex;
padding: 12px 10px;
justify-content: space-around;
>div{
margin: 0 6px;
border: 1px solid #DCDFE6;
height: 136px;
width: calc(16.66% - 12px);
text-align: center;
border-radius: 4px;
.eva1{
font-size: 16px;
font-weight: 500;
}
.eva2{
padding-top: 8px;
padding-bottom: 10px;
font-size: 24px;
}
.eva3{
color: rgba(35, 35, 35, 0.6);
font-size: 14px;
line-height: 22px;
span{
color: #FF3C3C;
margin-left: 8px;
}
}
.eva4{
color: rgba(35, 35, 35, 0.6);
font-size: 14px;
line-height: 22px;
span{
color: #0CBC6D;
margin-left: 8px;
}
}
}
}
.content3{
.evalist{
>div{
height: 76px;
.eva1{
padding-top: 10px;
}
.eva2{
padding-top: 6px;
padding-bottom: 0;
font-size: 24px;
}
}
}
}
.content1,.content4,.content5,.content6{
display: flex;
height: 612px;
.cont-left{
width: 49.5%;
background: #ffffff;
margin-right: 1%;
}
.cont-right{
width: 49.5%;
background: #ffffff;
}
}
::v-deep .el-select{
color: rgba(35, 35, 35, 0.8);
.el-input__inner{
border: 0;
&::placeholder {
color: rgba(35, 35, 35, 0.8) !important;
}
}
}
.form-content-width{
width: 116px;
}
.cont_title{
padding-left: 8px;
font-size: 16px;
height: 16px;
line-height: 16px;
font-weight: 700;
color: #232323;
position: relative;
}
.content2{
background: #ffffff;
}
::v-deep .el-table--border .el-table__cell {
padding: 8px 0;
}
::v-deep .custom-time-select1{
.options-block{
/*<!--left: -30px;-->*/
right:0;
}
.picker-block{
.el-picker-panel.el-date-range-picker.el-popper{
left: -680px !important;
top:144px !important;
}
}
}
}
.m-b16{
margin-bottom: 16px;
}
.m-16{
margin: 16px;
}
.yj-supplier{
background: #ffffff;
.yj-main{
display: flex;
height: 512px;
overflow: hidden;
margin-top: 16px;
.yj-title{
color: #232323;
font-size: 14px;
line-height: 24px;
margin-bottom: 8px;
font-weight: 600;
span{
color: #FF3C3C;
}
}
.yi-cont{
width: 48%;
margin: 0 1%;
}
.yj-list{
border-radius: 4px 4px 4px 4px;
border: 1px solid #DCDFE6;
overflow-y: auto;
height: 448px;
padding: 12px 8px;
font-size: 14px;
color: #232323;
line-height: 22px;
.time{
font-size: 12px;
color: rgba(35,35,35,0.6);
margin-top: 8px;
}
}
::v-deep .el-timeline{
.el-timeline-item{
margin-bottom: 8px;
padding-bottom: 0;
}
.el-timeline-item__wrapper{
padding-left:16px;
}
.el-timeline-item__tail{
top: 12px;
height: calc(100% - 18px);
}
.el-timeline-item__node{
background-color:#ffffff;
border: 2px solid #FF3C3C;
}
.el-timeline-item__node--normal{
left: 1px;
width: 8px;
height: 8px;
top: 2px;
}
.el-timeline-item:last-child .el-timeline-item__tail{
display: block;
}
}
}
}
.charts-supplier{
background: #ffffff;
.charts-main {
display: flex;
flex-wrap: wrap;
overflow: hidden;
padding-top:16px;
.charts-cont{
width: 48%;
margin: 0 1%;
margin-bottom: 24px;
.charts-title{
font-size: 14px;
color: #232323;
line-height: 24px;
margin-bottom: 8px;
font-weight: 600;
}
}
.charts-div{
height: 560px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #DCDFE6;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment