williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

质量管理

Browse Source
This commit is contained in:
熊丽君
2021-12-10 19:19:57 +08:00
parent 3559204535
commit 2c509f3c1c
43 changed files with 4049 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
src/views/bigScreen/qualityManage/right2.vue Normal file
View File

@ -0,0 +1,282 @@
<template>
<div>
<container5 title="危险作业厂所压减情况">
<el-row style="height: 80%; display: flex; align-items: center">
<el-col :span="12">
<div class="right1_bg right1_bg1">
<div><span class="num">4 / 6</span></div>
<div style="font-size: 14px">现有/原有</div>
<div class="txt">三人以上危险作业场所</div>
</div>
</el-col>
<el-col :span="12">
<div class="right1_bg right1_bg2">
<div><span class="num">2 / 7</span></div>
<div style="font-size: 14px">现有/原有</div>
<div class="txt">十人以上危险作业场所</div>
</div>
</el-col>
</el-row>
</container5>
</div>
</template>
<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container5 from './components/container5/index.vue'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
mixins: [resize],
name: 'right2',
components: {
scalseBox,
bigScreenHead,
rocketTit,
container5,
},
data() {
return {
dateRange: [],
chart: null,
option: {
legend: {
data: ['利润', '利润预测', '利润目标完成率'],
textStyle: {
color: '#fff',
},
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: [
'2021-01',
'2021-02',
'2021-03',
'2021-04',
'2021-05',
'2021-06',
'2021-07',
'2021-08',
'2021-09',
'2021-10',
'2021-11',
'2021-12',
],
axisPointer: {
type: 'shadow',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
type: 'value',
name: '万元',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
grid: {
containLabel: true,
width: '99%',
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {},
series: [
{
name: '利润',
type: 'bar',
barWidth: 20,
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
itemStyle: {
color: 'rgb(118,196,166)',
},
},
{
name: '利润预测',
type: 'bar',
barWidth: 20,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#B5D3FE', // 0%处的颜色为红色
},
{
offset: 1,
color: '#7EA7FC', // 100%处的颜色为蓝
},
],
},
},
},
{
name: '利润目标完成率',
type: 'line',
yAxisIndex: 1,
smooth: false,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
itemStyle: {
normal: {
color: '#F6D97E',
},
},
symbol: 'none',
},
],
// yAxis: {
// type: 'value',
// splitLine: {
// show: false//不显示网格线
// },
// splitArea: {
// show: false//不显示网格区域
// },
// axisLine: {
// lineStyle: {
// color: 'rgb(255, 255, 255)'
// },
// }
// },
// series: [
// {
// name: '利润',
// type: 'bar',
// data: [
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// ]
// },
// {
// name: '利润预测',
// type: 'bar',
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
// },
// {
// name: '利润目标完成率',
// type: 'line',
// yAxisIndex: 1,
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
// }
// ]
},
}
},
mounted() {
this.$nextTick(() => {
// this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
},
},
}
</script>
<style lang="scss" scoped>
.right1_bg {
position: relative;
width: 147px;
height: 113px;
background-size: cover;
text-align: center;
padding: 0 0 10px 0;
margin: 20px auto 0 auto;
font-size: 14px;
.num {
font-size: 35px;
font-family: Roboto-Black, Roboto;
font-weight: 900;
line-height: 35px;
margin-right: 3px;
vertical-align: middle;
}
.txt {
position: absolute;
bottom: -30px;
}
}
.right1_bg1 {
background-image: url(./right2-1.png);
.num {
color: #1098ff;
}
}
.right1_bg2 {
background-image: url(./right2-2.png);
.num {
color: #f6d97e;
}
}
</style>