质量管理

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

View File

@ -0,0 +1,874 @@
<template>
<div>
<container2 title="质量问题">
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '月度']"></bigScreenTabs>
<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
<div style="height: 100%; width: 100%" ref="chart1" v-else></div>
</container2>
<container2 title="质量检查分析" style="margin-top: 10px">
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['总厂', '部门']"></bigScreenTabs>
<div style="height: 100%; width: 100%" ref="chart2" v-if="index2 == 0"></div>
<div style="height: 100%; width: 100%" ref="chart22" v-else></div>
</container2>
<container2 title="质量案例/检查明细" style="margin-top: 10px">
<bigScreenTabs slot="datePicker" v-model="index3" :titleArr="['案例', '明细']"></bigScreenTabs>
<el-row style="padding: 15px 30px" v-if="index3 == 0">
<el-col :span="24" style="margin-bottom: 1px">
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
<el-col style="text-align: center" :span="4">序号</el-col>
<el-col style="text-align: center" :span="8">部门</el-col>
<el-col style="text-align: center" :span="12">作业内容</el-col>
</el-row>
</el-col>
<vue-seamless-scroll
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
>
<ul class="item">
<li v-for="item in scrollList" :key="item.id">
<el-row style="font-size: 14px">
<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</el-row>
<el-row style="padding: 15px 30px" v-if="index3 == 1">
<!-- <el-col :span="24" style="margin-bottom: 1px">
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
<el-col style="text-align: center" :span="4">序号</el-col>
<el-col style="text-align: center" :span="8">部门</el-col>
<el-col style="text-align: center" :span="12">作业内容(明细)</el-col>
</el-row>
</el-col>
<vue-seamless-scroll
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
>
<ul class="item">
<li v-for="item in scrollList" :key="item.id">
<el-row style="font-size: 14px">
<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll> -->
</el-row>
</container2>
</div>
</template>
<script>
import rocketTit from '../components/rocketTit/index.vue'
import container2 from './components/container2/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import progressBar from '@/views/bigScreen/components/progress/index.vue'
import colorList from '@/utils/colorPalette'
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
import vueSeamlessScroll from 'vue-seamless-scroll'
// import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
// mixins: [resize],
name: 'left1',
components: {
rocketTit,
container2,
bigScreenTabs,
progressBar,
vueSeamlessScroll,
},
data() {
return {
index: 0,
index2: 0,
index3: 0,
colorList,
chart: null,
chart1: null,
chart2: null,
chart22: null,
listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [
{
id: 1,
name: '部门一',
txt: '高压作业',
},
{
id: 2,
name: '部门二',
txt: '易燃作业',
},
{
id: 3,
name: '部门三',
txt: '易燃作业',
},
{
id: 4,
name: '部门四',
txt: '易燃作业',
},
{
id: 5,
name: '部门五',
txt: '易燃作业',
},
],
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
})
},
watch: {
index(newVal, oldVal) {
if (newVal == 0) {
this.chart1.dispose()
this.chart1 = null
this.$nextTick(() => {
this.initChart()
})
} else {
this.chart.dispose()
this.chart = null
this.$nextTick(() => {
this.initChart1()
})
}
},
index2(newVal, oldVal) {
if (newVal == 0) {
this.chart22.dispose()
this.chart22 = null
this.$nextTick(() => {
this.initLine()
})
} else {
this.chart2.dispose()
this.chart2 = null
this.$nextTick(() => {
this.initChart22()
})
}
},
},
beforeDestroy() {},
methods: {
// 右上切换前
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.setOptions()
},
setOptions() {
let data = [
{
name: '部门',
children: [
{
name: '部门1',
children: [
{
name: '部门11',
value: 1,
},
{
name: '部门22',
value: 2,
},
],
},
],
},
{
name: '型号',
children: [
{
name: '型号1',
children: [
{
name: '型号11',
value: 1,
},
{
name: '型号22',
value: 2,
},
],
},
],
},
{
name: '类型',
children: [
{
name: '类型1',
children: [
{
name: '类型11',
value: 1,
},
{
name: '类型22',
value: 2,
},
],
},
],
},
]
this.chart.setOption({
// series: {
// type: 'sunburst',
// center: ['45%', '50%'],
// radius: [15, '80%'],
// data: data,
// },
tooltip: {
trigger: 'item',
},
legend: {
top: '5%',
right: '5%',
orient: 'vertical',
y: 'center',
// left: 'right',
textStyle: {
color: '#fff', //legend字体颜色
},
},
series: [
{
name: '型号',
type: 'pie',
center: ['35%', '50%'],
radius: ['60%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '型号1' },
{ value: 735, name: '型号2' },
{ value: 580, name: '型号3' },
{ value: 484, name: '型号4' },
{ value: 301, name: '型号5' },
],
color: blueColorList,
},
{
name: '类别',
type: 'pie',
radius: ['35%', '55%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '类别1' },
{ value: 735, name: '类别2' },
{ value: 580, name: '类别3' },
{ value: 484, name: '类别4' },
{ value: 300, name: '类别5' },
],
color: greenColorList,
},
{
name: '部门',
type: 'pie',
radius: ['10%', '30%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '部门1' },
{ value: 735, name: '部门2' },
{ value: 580, name: '部门3' },
{ value: 484, name: '部门4' },
{ value: 300, name: '部门5' },
],
color: yelloColorList,
},
],
})
},
// 右上切换后
initChart1() {
this.chart1 = echarts.init(this.$refs.chart1)
this.setOptions1()
},
setOptions1() {
this.chart1.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['类别一', '类别二', '类别三'],
textStyle: {
color: '#fff', //legend字体颜色
},
},
grid: {
left: 20,
right: 20,
top: 30,
bottom: 50,
containLabel: true,
},
dataZoom: {
type: 'slider',
// start: 0,
// end: 50,
textStyle: {
color: '#fff',
},
},
xAxis: [
{
type: 'category',
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
name: '个',
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
},
],
series: [
{
name: '类别三',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#F7DC87',
},
barWidth: 30,
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: '类别二',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#55C5A2',
},
barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '类别一',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#5B8FF9',
},
barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410],
},
],
})
},
initLine() {
this.chart2 = echarts.init(this.$refs.chart2)
this.setOptions2()
},
setOptions2() {
this.chart2.setOption({
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: 100,
// 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: [75.6, 82.2, 26.4, 28.7, 70.7, 50.7, 60.7, 70.7, 80.7, 48.7, 18.8],
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#F49220', // 0%处的颜色为红色
},
{
offset: 1,
color: '#F6D97E', // 100%处的颜色为蓝
},
],
},
},
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
smooth: false,
data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
itemStyle: {
color: '#55C5A2',
},
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]
// }
// ]
})
},
initChart22() {
this.chart22 = echarts.init(this.$refs.chart22)
this.setOptions22()
},
setOptions22() {
this.chart22.setOption({
tooltip: {
trigger: 'axis',
formatter: '{a1}<br/>{b1}{c1}',
},
// legend: {
// // data: ['收入', '实际', '目标'],
// textStyle: {
// color: '#fff', //legend字体颜色
// },
// // selectedMode: false,
// },
grid: {
containLabel: true,
left: 20,
right: 10,
top: 30,
bottom: 50,
},
xAxis: {
data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
dataZoom: {
type: 'slider',
start: 0,
end: 50,
},
color: ['#ccc', 'red'],
yAxis: [
{
name: '个',
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
series: [
{
name: '收入',
type: 'bar',
z: '-1',
barGap: '-75%',
barWidth: 30,
itemStyle: {
color: 'rgba(85, 197, 162, .3)',
},
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
},
{
name: '实际',
type: 'bar',
barWidth: 15,
position: [0, 0],
itemStyle: {
color: 'rgba(90, 216, 166, 0.85)',
},
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#F49220', // 0%处的颜色为红色
},
{
offset: 1,
color: '#F6D97E', // 100%处的颜色为蓝
},
],
},
},
},
{
name: '目标',
type: 'scatter',
symbol: 'rect',
symbolSize: [30, 4],
symbolOffset: [3, 0],
position: [0, 0],
itemStyle: {
color: '#F6D97E',
},
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
},
],
})
},
},
}
</script>
<style lang="scss" scoped>
.warp-scroll {
height: 172px;
width: 100%;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
li {
display: block;
height: 42px;
line-height: 42px;
background: #2a437d;
opacity: 0.6;
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
margin-bottom: 1px;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
}
.wrap {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.box {
padding: 0 0 5px 15px;
display: flex;
align-items: center;
.num {
font-size: 24px;
font-weight: 600;
margin: 0 10px;
}
}
}
.content1 {
// height: 200px;
height: 100%;
.chart1 {
margin: 0 auto;
width: 100%;
height: 192px;
background: transparent;
}
}
.num {
font-size: 30px;
font-family: Roboto-BlackItalic, Roboto;
font-weight: normal;
color: #91d5fe;
vertical-align: sub;
// margin-right: 3px;
}
.content2 {
padding: 20px;
flex: 1;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
.chart2 {
height: 100%;
}
.tit {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 22px;
position: relative;
padding-left: 15px;
}
.tit::after {
content: '';
display: block;
position: absolute;
top: 3px;
left: 0px;
width: 4px;
height: 16px;
background: #00ffff;
}
}
</style>