质量管理添加flv.js
This commit is contained in:
熊丽君
@ -23,6 +23,7 @@
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
ref="seamlessScroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
@ -31,8 +32,8 @@
|
||||
<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-col style="text-align: center" :span="8">{{ item.className }}</el-col>
|
||||
<el-col style="text-align: center" :span="12">{{ item.faultRevelation }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -102,39 +103,14 @@ export default {
|
||||
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: '易燃作业',
|
||||
},
|
||||
],
|
||||
scrollList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
@ -171,76 +147,36 @@ export default {
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
// 获取滚动列表数据
|
||||
getData() {
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getHxQualityCasePic',
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
this.scrollList = data
|
||||
this.$refs.seamlessScroll.reset()
|
||||
})
|
||||
},
|
||||
// 右上切换前
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getQualityProblem',
|
||||
method: 'get',
|
||||
params: {
|
||||
type: '1',
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions(data.list)
|
||||
})
|
||||
},
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
setOptions(resData) {
|
||||
resData.map((item, index) => {
|
||||
item.value.map(i => {
|
||||
i.value = i.TOTAL
|
||||
})
|
||||
})
|
||||
this.chart.setOption({
|
||||
// series: {
|
||||
// type: 'sunburst',
|
||||
// center: ['45%', '50%'],
|
||||
// radius: [15, '80%'],
|
||||
// data: data,
|
||||
// },
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
@ -256,7 +192,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '型号',
|
||||
name: resData[0].dimension,
|
||||
type: 'pie',
|
||||
center: ['35%', '50%'],
|
||||
radius: ['60%', '80%'],
|
||||
@ -275,17 +211,18 @@ export default {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '型号1' },
|
||||
{ value: 735, name: '型号2' },
|
||||
{ value: 580, name: '型号3' },
|
||||
{ value: 484, name: '型号4' },
|
||||
{ value: 301, name: '型号5' },
|
||||
],
|
||||
data: resData[0].value,
|
||||
// [
|
||||
// { value: 1048, name: '型号1' },
|
||||
// { value: 735, name: '型号2' },
|
||||
// { value: 580, name: '型号3' },
|
||||
// { value: 484, name: '型号4' },
|
||||
// { value: 301, name: '型号5' },
|
||||
// ],
|
||||
color: blueColorList,
|
||||
},
|
||||
{
|
||||
name: '类别',
|
||||
name: resData[1].dimension,
|
||||
type: 'pie',
|
||||
radius: ['35%', '55%'],
|
||||
center: ['35%', '50%'],
|
||||
@ -304,17 +241,18 @@ export default {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '类别1' },
|
||||
{ value: 735, name: '类别2' },
|
||||
{ value: 580, name: '类别3' },
|
||||
{ value: 484, name: '类别4' },
|
||||
{ value: 300, name: '类别5' },
|
||||
],
|
||||
data: resData[1].value,
|
||||
// [
|
||||
// { value: 1048, name: '类别1' },
|
||||
// { value: 735, name: '类别2' },
|
||||
// { value: 580, name: '类别3' },
|
||||
// { value: 484, name: '类别4' },
|
||||
// { value: 300, name: '类别5' },
|
||||
// ],
|
||||
color: greenColorList,
|
||||
},
|
||||
{
|
||||
name: '部门',
|
||||
name: resData[2].dimension,
|
||||
type: 'pie',
|
||||
radius: ['10%', '30%'],
|
||||
center: ['35%', '50%'],
|
||||
@ -333,13 +271,14 @@ export default {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '部门1' },
|
||||
{ value: 735, name: '部门2' },
|
||||
{ value: 580, name: '部门3' },
|
||||
{ value: 484, name: '部门4' },
|
||||
{ value: 300, name: '部门5' },
|
||||
],
|
||||
data: resData[2].value,
|
||||
// [
|
||||
// { value: 1048, name: '部门1' },
|
||||
// { value: 735, name: '部门2' },
|
||||
// { value: 580, name: '部门3' },
|
||||
// { value: 484, name: '部门4' },
|
||||
// { value: 300, name: '部门5' },
|
||||
// ],
|
||||
color: yelloColorList,
|
||||
},
|
||||
],
|
||||
@ -347,10 +286,44 @@ export default {
|
||||
},
|
||||
// 右上切换后
|
||||
initChart1() {
|
||||
this.chart1 = echarts.init(this.$refs.chart1)
|
||||
this.setOptions1()
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getQualityProblem',
|
||||
method: 'get',
|
||||
params: {
|
||||
type: '2',
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart1 = echarts.init(this.$refs.chart1)
|
||||
this.setOptions1(data)
|
||||
})
|
||||
},
|
||||
setOptions1() {
|
||||
setOptions1(resData) {
|
||||
let titData = resData.allName
|
||||
delete resData.allName
|
||||
let titList = []
|
||||
let valList = []
|
||||
for (let index = 0; index < titData.length; index++) {
|
||||
valList.push([])
|
||||
}
|
||||
let newData = {}
|
||||
for (let i = 0; i < resData.list.length; i++) {
|
||||
const item = resData.list[i]
|
||||
for (const key in item) {
|
||||
newData[key] = item[key]
|
||||
}
|
||||
}
|
||||
for (const key in newData) {
|
||||
if (Object.hasOwnProperty.call(newData, key)) {
|
||||
const item = newData[key]
|
||||
titList.push(key)
|
||||
for (let i = 0; i < item.length; i++) {
|
||||
const ele = item[i]
|
||||
let index = titData.findIndex(e => e == ele.name)
|
||||
valList[index][titList.length - 1] = ele.COMPLETED
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.chart1.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -359,7 +332,7 @@ export default {
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['类别一', '类别二', '类别三'],
|
||||
data: titData,
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
@ -373,16 +346,17 @@ export default {
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
// start: 0,
|
||||
// end: 50,
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titList.length, 5),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
color: colorList,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
data: titList,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -415,55 +389,49 @@ export default {
|
||||
},
|
||||
],
|
||||
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],
|
||||
},
|
||||
...valList.map((e, index) => {
|
||||
return {
|
||||
name: titData[index],
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: e,
|
||||
}
|
||||
}),
|
||||
],
|
||||
})
|
||||
},
|
||||
|
||||
initLine() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getHxQualityInspect',
|
||||
method: 'get',
|
||||
params: {
|
||||
type: '1',
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2(data.factory)
|
||||
})
|
||||
},
|
||||
setOptions2() {
|
||||
setOptions2(resData) {
|
||||
let month = []
|
||||
let cate = [] // 率
|
||||
let completed = [] // 完成
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
const item = resData[i]
|
||||
month.push(item.month)
|
||||
cate.push(item.CATE)
|
||||
completed.push(item.COMPLETED)
|
||||
}
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['数量', '完成率'],
|
||||
textStyle: {
|
||||
@ -479,20 +447,7 @@ export default {
|
||||
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',
|
||||
],
|
||||
data: month,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
@ -559,7 +514,7 @@ export default {
|
||||
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],
|
||||
data: completed,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
@ -585,7 +540,7 @@ export default {
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
|
||||
data: cate,
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
@ -632,14 +587,34 @@ export default {
|
||||
})
|
||||
},
|
||||
initChart22() {
|
||||
this.chart22 = echarts.init(this.$refs.chart22)
|
||||
this.setOptions22()
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getHxQualityInspect',
|
||||
method: 'get',
|
||||
params: {
|
||||
type: '2',
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart22 = echarts.init(this.$refs.chart22)
|
||||
this.setOptions22(data.dept)
|
||||
})
|
||||
},
|
||||
setOptions22() {
|
||||
setOptions22(resData) {
|
||||
console.log(resData)
|
||||
let deptName = []
|
||||
let cate = [] // 率
|
||||
let completed = [] // 完成
|
||||
let total = [] // 总
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
const item = resData[i]
|
||||
deptName.push(item.dept_name)
|
||||
cate.push(item.CATE)
|
||||
completed.push(item.COMPLETED)
|
||||
total.push(item.TOTAL)
|
||||
}
|
||||
this.chart22.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
// legend: {
|
||||
// // data: ['收入', '实际', '目标'],
|
||||
@ -656,7 +631,7 @@ export default {
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
|
||||
data: deptName,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -720,7 +695,7 @@ export default {
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
data: total,
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
@ -730,7 +705,7 @@ export default {
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||
data: completed,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
@ -761,7 +736,8 @@ export default {
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||||
yAxisIndex: 1,
|
||||
data: cate,
|
||||
},
|
||||
],
|
||||
})
|
||||
@ -791,8 +767,8 @@ export default {
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: #2a437d;
|
||||
opacity: 0.6;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
// opacity: 0.6;
|
||||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
margin-bottom: 1px;
|
||||
img {
|
||||
|
||||
Reference in New Issue
Block a user