| | |
| | | datetime: "datetime", |
| | | }, |
| | | tableData: [], |
| | | tableHeight: 'calc(100vh - 300px)', |
| | | tableHeight: 'calc(100vh - 350px)', |
| | | DataVisible: false, |
| | | tableHeadData: [], |
| | | items: {}, |
| | |
| | | this.tableHeight = 'calc(100vh - 630px)'; |
| | | this.$refs.dataTable.doLayout() |
| | | } else { |
| | | this.tableHeight = 'calc(100vh - 310px)'; |
| | | this.tableHeight = 'calc(100vh - 350px)'; |
| | | this.$refs.dataTable.doLayout() |
| | | } |
| | | }, |
| | |
| | | <style lang="scss" scoped> |
| | | //固定列高度 |
| | | /deep/ .el-table__fixed { |
| | | height: calc(100vh - 370px) !important; |
| | | height: calc(100vh - 365px) !important; |
| | | } |
| | | |
| | | // 滚动条样式修改 |
| | |
| | | handler(newval, oldval) { |
| | | if (newval) { |
| | | const series = newval.map((data, index) => ({ |
| | | name: index === 0 ? "总量" : "新增", |
| | | type: "line", |
| | | name: index === 0 ? '总量' : '新增', |
| | | type: 'line', |
| | | smooth: true, |
| | | stack: "Total", |
| | | stack: index === 0 ? 'Total' : 'total2', // 根据 index 区分总量和新增的堆叠情况 |
| | | label: { |
| | | show: true, |
| | | position: "top", |
| | | textStyle: { |
| | | fontSize: 14 // 调整字体大小 |
| | | fontSize: 14 |
| | | } |
| | | }, |
| | | data: data.map(value => ({value})) |
| | |
| | | } |
| | | } |
| | | }, |
| | | chartName:{ |
| | | handler(newval,oldval){ |
| | | if(newval){ |
| | | chartName: { |
| | | handler(newval, oldval) { |
| | | if (newval) { |
| | | this.chartOptions.title.text = newval + "数据统计" |
| | | } |
| | | }, |
| | | immediate:true, |
| | | deep:true |
| | | immediate: true, |
| | | deep: true |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | |
| | | <script> |
| | | import 'echarts' |
| | | import 'echarts/lib/chart/pie' |
| | | import 'echarts/lib/chart/bar' // 导入柱状图组件 |
| | | import 'echarts/lib/component/tooltip' |
| | | import 'echarts/lib/component/legend' |
| | | export default { |
| | | name: "pieChart", |
| | | name: "polarBarChart", |
| | | props:{ |
| | | pieData:{ |
| | | type:Array, |
| | |
| | | chartName:{ |
| | | type:String, |
| | | default: "" |
| | | }, |
| | | monthData:{ |
| | | type:Array, |
| | | default: () => ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
| | | } |
| | | }, |
| | | watch:{ |
| | | pieData:{ |
| | | immediate:true, |
| | | handler(newval,oldval){ |
| | | handler(newval, oldval){ |
| | | if (newval) { |
| | | // console.log(newval) |
| | | const series=[ |
| | | const series = [ |
| | | { |
| | | name: '', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | avoidLabelOverlap:false, |
| | | label: { |
| | | formatter: '{b}\n{d}%', |
| | | fontSize:14 |
| | | type: 'bar', |
| | | name: '新增', |
| | | data: newval[1], |
| | | coordinateSystem: 'polar', |
| | | stack: 'a', |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | itemStyle: { |
| | | color: function(params) { |
| | | // 根据具体需求设置颜色 |
| | | const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9']; |
| | | return colorList[params.dataIndex % colorList.length]; |
| | | } |
| | | color: '#91cc75' // 新增的颜色 |
| | | } |
| | | }, |
| | | { |
| | | type: 'bar', |
| | | name: '总量', |
| | | data: newval[0], |
| | | coordinateSystem: 'polar', |
| | | stack: 'a', |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data:newval[0].map((value, index) => { |
| | | return { |
| | | value: value, |
| | | name: this.getMonthName(index), |
| | | newValue: newval[1][index] |
| | | }; |
| | | }), |
| | | itemStyle: { |
| | | color: '#5470c6' // 总量的颜色 |
| | | } |
| | | } |
| | | ] |
| | | ]; |
| | | this.chartOptions.series = series; |
| | | } |
| | | } |
| | | }, |
| | | chartName:{ |
| | | handler(newval,oldval){ |
| | | handler(newval, oldval){ |
| | | if(newval){ |
| | | this.chartOptions.title.text = newval + "数据统计" |
| | | } |
| | | }, |
| | | immediate:true, |
| | | deep:true |
| | | immediate:true |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | chartOptions: { |
| | | title: { |
| | | text: '供应商主数据统计', |
| | | left: 'center' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: function (params) { |
| | | let result = ''; |
| | | if (params.componentType === 'series') { |
| | | result += params.name + '<br/>'; |
| | | result += '新增:' + params.data.newValue + '<br/>'; |
| | | result += '总量:' + params.data.value + '<br/>'; |
| | | result += '百分比:' + params.percent + '%'; |
| | | } |
| | | return result; |
| | | } |
| | | text: '', |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | right: 10, |
| | | top: 'middle', |
| | | data: ['总量', '新增'], |
| | | }, |
| | | polar: {}, |
| | | angleAxis: { |
| | | type: 'category', |
| | | data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] |
| | | }, |
| | | radiusAxis: {}, |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | series: [] |
| | | }, |
| | | } |
| | | } |
| | | }, |
| | | methods:{ |
| | | getMonthName(index){ |
| | | const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; |
| | | return monthNames[index]; |
| | | } |
| | | created(){ |
| | | this.chartOptions.color = ['#5470c6', '#91cc75', '#fac858', '#ca8622', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4']; |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | #chart { |
| | | width: 90%; |
| | | width: 97%; |
| | | height: 530px; |
| | | } |
| | | |
| | | </style> |
| | |
| | | <el-button type="text" |
| | | size="small" |
| | | icon="el-icon-refresh" |
| | | :style="{color: scope.row.suspensionState === 1 ? '#67C23A' : '#F56C6C'}" |
| | | v-if="permissionList.state" |
| | | @click.stop="handleDoState(scope.row,scope.index)">{{scope.row.suspensionState===1?'激活':'挂起'}} |
| | | @click.stop="handleDoState(scope.row, scope.index)"> |
| | | {{ scope.row.suspensionState === 1 ? '激活' : '挂起' }} |
| | | </el-button> |
| | | <el-button type="text" |
| | | size="small" |