162 lines
3.7 KiB
Vue
162 lines
3.7 KiB
Vue
<!--中国牵头标准信息统计-->
|
||
<template>
|
||
<div class="panel-box full-box">
|
||
<div class="panel-title">
|
||
<img src="../../.././../assets/screenNew/icon_title.png" alt="">
|
||
<span>中国牵头标准信息统计</span>
|
||
</div>
|
||
<div class="panel-content">
|
||
<div class="echarts-box " id="LeadingStandardChart"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { GetLeadingStandardData } from '@/screenApi/api'
|
||
import { createBarChart } from '../util/BarOptions'
|
||
|
||
|
||
export default {
|
||
name: 'LeadingStandardChart',
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
getData() {
|
||
GetLeadingStandardData().then((res) => {
|
||
if (res.success) {
|
||
let result = res.result || {}
|
||
// this.dataSource = res.result.records || res.result
|
||
// this.operateData(this.dataSource)
|
||
this.$nextTick(() => {
|
||
this.initChart(result)
|
||
})
|
||
} else if (res.code === 510) {
|
||
this.$message.warning(res.message)
|
||
}
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 初始化图表
|
||
* @param result = {data: [数组数据]， xAxis : [], projectName: [所有的项目信息] }
|
||
*/
|
||
initChart(result) {
|
||
let xData = result.xAxis
|
||
let yData = result.data
|
||
let projectName = result.projectName || []
|
||
let option = {
|
||
legend: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
formatter: params => {
|
||
// 获取xAxis data中的数据
|
||
let dataStr = ''
|
||
params.forEach((seriesItem) => {
|
||
let toolIndex = seriesItem.dataIndex
|
||
let mapData = (projectName[toolIndex] || []).slice(0, 10)
|
||
dataStr += ` <div style="margin: 0 8px;"><span style="color:#333">${seriesItem.name}</span></div>`
|
||
mapData.forEach(item => {
|
||
dataStr += `<div style="margin: 0 8px;"><span style="color:#666;white-space: pre-wrap; word-break: break-all">${item}</span></div>`
|
||
})
|
||
})
|
||
return dataStr
|
||
},
|
||
extraCssText:'max-width:500px;'
|
||
},
|
||
grid: {
|
||
left: '0',
|
||
top : '20'
|
||
},
|
||
xAxis: {
|
||
data: xData
|
||
},
|
||
series: [
|
||
{
|
||
name:'项目详情',
|
||
type: 'bar',
|
||
barMaxWidth:20,
|
||
itemStyle:{
|
||
borderRadius:[4,4,0,0]
|
||
},
|
||
data: yData
|
||
}
|
||
]
|
||
}
|
||
createBarChart('LeadingStandardChart', option)
|
||
},
|
||
},
|
||
created() {
|
||
this.getData()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
|
||
/deep/ .ant-table-body > table{
|
||
color: #050525;
|
||
}
|
||
// 表格样式的修改
|
||
/deep/ .ant-table-thead tr > th {
|
||
font-weight: bold;
|
||
background: transparent;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
/deep/ .ant-table-tbody tr > td {
|
||
padding: 10px 8px!important;
|
||
.name-div-inner{
|
||
min-height: 84px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
div{
|
||
width: 100%;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/deep/.ant-empty-description{
|
||
color: #050525;
|
||
}
|
||
|
||
// 高度必须固定否则没有办法出滚动条
|
||
.iso-full-table.full-box{
|
||
//height: 810px;
|
||
padding-top: 0;
|
||
.panel-content{
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
::v-deep .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child{
|
||
border-right-color: #e8e8e8;
|
||
}
|
||
.iso-table{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.table-text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
/*表格滚动条*/
|
||
/deep/.ant-table-body {
|
||
overflow-x: auto!important;
|
||
overflow-y: auto!important;
|
||
}
|
||
/deep/ .ant-table-header{
|
||
overflow: hidden!important;
|
||
height: 55px;
|
||
}
|
||
|
||
</style> |