forked from xxhjsb/hbt-prevention-ui
198 lines
4.2 KiB
Vue
198 lines
4.2 KiB
Vue
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
import template from "./home.component.html"
|
|
@Component({
|
|
template,
|
|
components:{
|
|
},
|
|
})
|
|
export default class HomeComponent extends Vue {
|
|
// 数据直接定义
|
|
// 所有可用
|
|
public datas = [
|
|
////////////////////////////////////////
|
|
[
|
|
{ name: '运行', value: 11 },
|
|
{ name: '停产', value: 13 },
|
|
{ name: '检修', value: 8 },
|
|
],
|
|
// ////////////////////////////////////////
|
|
[
|
|
{ name: '特殊', value: 13 },
|
|
{ name: '一级', value: 11 },
|
|
{ name: '二级', value: 8 },
|
|
]];
|
|
// 饼图
|
|
public pieChart:any;
|
|
// 柱图
|
|
public barChart:any
|
|
|
|
// 组件渲染完成
|
|
mounted(){
|
|
window.addEventListener("resize",this.resize)
|
|
}
|
|
beforeDestory(){
|
|
window.removeEventListener("resize",this.resize)
|
|
}
|
|
|
|
public buildPieOption(){
|
|
return {
|
|
title:[{
|
|
show:true,
|
|
text:this.datas[0].reduce((total,cur)=>{
|
|
return total+cur.value
|
|
},0),
|
|
textAlign:"center",
|
|
textStyle:{
|
|
fontSize:24
|
|
},
|
|
subtextStyle:{
|
|
fontSize:14
|
|
},
|
|
subtext:"生产装备（套）",
|
|
left:"20%",
|
|
top:"40%"
|
|
},{
|
|
show:true,
|
|
text:this.datas[1].reduce((total,cur)=>{
|
|
return total+cur.value
|
|
},0),
|
|
textAlign:"center",
|
|
subtext:"动火作业（处）",
|
|
textStyle:{
|
|
fontSize:24
|
|
},
|
|
subtextStyle:{
|
|
fontSize:14
|
|
},
|
|
left:"70%",
|
|
top:"40%"
|
|
}],
|
|
color:["#409EFF","#BFCBD9","#E6A23C","#A67AFF","#409EFF","#F56C6C"],
|
|
legend:[{
|
|
right:"53%",
|
|
itemWidth:14,
|
|
top:"center",
|
|
data:this.datas[0],
|
|
orient:"vertical"
|
|
},{
|
|
right:"0%",
|
|
top:"center",
|
|
itemWidth:14,
|
|
data:this.datas[1],
|
|
orient:"vertical"
|
|
}],
|
|
series:this.datas.map((data,idx)=>{
|
|
const left = idx * (100 / this.datas.length);
|
|
return {
|
|
type: 'pie',
|
|
radius: ["45%", "60%"],
|
|
center:["40%","50%"],
|
|
top: 'center',
|
|
height: '100%',
|
|
left: left+'%',
|
|
width: "50%",
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 3
|
|
},
|
|
label: {
|
|
alignTo: 'none',
|
|
formatter: '{b}\u00A0\u00A0\u00A0{c}',
|
|
lineHeight: 100,
|
|
},
|
|
labelLine: {
|
|
length: 15,
|
|
length2: 25,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
data: data
|
|
};
|
|
})
|
|
}
|
|
}
|
|
|
|
public buildBarOption(){
|
|
return {
|
|
tooltip:{
|
|
|
|
},
|
|
color:["#68C23A","#409EFF","#E6A23C","#F56C6C"],
|
|
grid:{
|
|
left:24,
|
|
right:24,
|
|
bottom:24,
|
|
containLabel:true
|
|
},
|
|
legend:{
|
|
top:25,
|
|
left:"center",
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name:"单位：个",
|
|
splitLine:{
|
|
lineStyle:{
|
|
type:"dashed"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: { show: false },
|
|
data: ['部门1', '部门2', '部门3', '部门4', '部门5']
|
|
}
|
|
],
|
|
series:[{
|
|
name:"低风险",
|
|
type: 'bar',
|
|
barWidth:40,
|
|
data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
|
|
},{
|
|
name:"一般风险",
|
|
type: 'bar',
|
|
barWidth:40,
|
|
data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
|
|
},{
|
|
name:"较高风险",
|
|
type: 'bar',
|
|
barWidth:40,
|
|
data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
|
|
},{
|
|
name:"高风险",
|
|
type: 'bar',
|
|
barWidth:40,
|
|
data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
|
|
}]
|
|
}
|
|
}
|
|
|
|
public getChart(charts,isBar?){
|
|
if(!isBar){
|
|
this.pieChart = charts
|
|
}else{
|
|
this.barChart = charts
|
|
}
|
|
}
|
|
public resize(){
|
|
if(this.pieChart){
|
|
this.pieChart.resize()
|
|
}
|
|
if(this.barChart){
|
|
this.barChart.resize()
|
|
}
|
|
}
|
|
|
|
|
|
// 计算属性 === computed
|
|
get ValueA(){
|
|
return 1
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped src="./home.component.scss"></style>
|
|
|