质量管理
This commit is contained in:
熊丽君
39
src/utils/gradualColor.js
Normal file
39
src/utils/gradualColor.js
Normal file
@ -0,0 +1,39 @@
|
||||
export const yelloColorList = [
|
||||
'#FFFDE7',
|
||||
'#FFF9C4',
|
||||
'#FFF59D',
|
||||
'#FFF176',
|
||||
'#FFEE58',
|
||||
'#FFEB3B',
|
||||
'#FDD835',
|
||||
'#FBC02D',
|
||||
'#F9A825',
|
||||
'#F57F17',
|
||||
]
|
||||
export const greenColorList = [
|
||||
'#F1F8E9',
|
||||
'#DCEDC8',
|
||||
'#C5E1A5',
|
||||
'#AED581',
|
||||
'#9CCC65',
|
||||
'#8BC34A',
|
||||
'#7CB342',
|
||||
'#689F38',
|
||||
'#558B2F',
|
||||
'#33691E',
|
||||
]
|
||||
export const blueColorList = [
|
||||
'#E3F2FD',
|
||||
'#BBDEFB',
|
||||
'#90CAF9',
|
||||
'#64B5F6',
|
||||
'#42A5F5',
|
||||
'#2196F3',
|
||||
'#1E88E5',
|
||||
'#1976D2',
|
||||
'#1565C0',
|
||||
'#0D47A1',
|
||||
]
|
||||
export const greyColorList = [
|
||||
// #FAFAFA
|
||||
]
|
||||
BIN
src/views/bigScreen/qualityManage/1.jpg
Normal file
BIN
src/views/bigScreen/qualityManage/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
382
src/views/bigScreen/qualityManage/bottom1.vue
Normal file
382
src/views/bigScreen/qualityManage/bottom1.vue
Normal file
@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="总体经营情况">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container4>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container4 from "../components/container4/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'bottom1',
|
||||
components: {
|
||||
container4,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: function (params, ticket, callback) {
|
||||
console.log(params)
|
||||
var res = params[0].name;
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '5%',
|
||||
left: '3%',
|
||||
right: '40%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
right: 'center',
|
||||
data: ['收入', '利润', '目标完成'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
itemStyle: {
|
||||
color: 'rgb(116,212,184)',
|
||||
},
|
||||
// label: {
|
||||
// show : true,
|
||||
// position : 'top',
|
||||
// formatter : "{c}",
|
||||
// textStyle : {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgb(170,202,253)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '目标完成',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
itemStyle: {
|
||||
color: 'rgb(245,217,126)'
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
// {
|
||||
// hoverAnimation: false,
|
||||
// type: 'pie',
|
||||
// radius: ['55%', '65%'],
|
||||
// center: ['75%', '50%'],
|
||||
// roseType: 'area',
|
||||
// itemStyle: {
|
||||
// borderRadius: 5,
|
||||
// color: 'rgb(245,217,126)',
|
||||
// },
|
||||
// data: [
|
||||
// { value: 30, name: '目标' },
|
||||
// ],
|
||||
// label: {
|
||||
// formatter: '{b}：{c}',
|
||||
// },
|
||||
// labelLine: {
|
||||
// showAbove: true,
|
||||
// length: -60,
|
||||
// length2: 145,
|
||||
// }
|
||||
// // label: {
|
||||
// // fontSize: 14,
|
||||
// // position: 'outer',
|
||||
// // alignTo: 'edge',
|
||||
// // margin: 10,
|
||||
// // },
|
||||
// // labelLine: {
|
||||
// // showAbove: true,
|
||||
// // }
|
||||
// },
|
||||
//进度线
|
||||
// {
|
||||
// type: "pie",
|
||||
// radius: ['55%', '65%'],
|
||||
// center: ['75%', '50%'],
|
||||
// itemStyle: {
|
||||
// borderRadius: 5,
|
||||
// color: 'rgb(245,217,126)',
|
||||
// },
|
||||
// hoverAnimation: false,
|
||||
// clockwise: false,
|
||||
// data: [
|
||||
// {
|
||||
// name: "",
|
||||
// value: 80, //进度
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
|
||||
// emphasis: {
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
// itemStyle: {
|
||||
// // color: "#5886f0"
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// //画剩余的刻度圆环
|
||||
// name: "",
|
||||
// value: 100 - 80,
|
||||
// clockwise: false,
|
||||
// itemStyle: {
|
||||
// color: "rgba(255,255,255,0)"
|
||||
// },
|
||||
// label: {
|
||||
// show: false
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
// emphasis: {
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: "rgba(255,255,255,0)"
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// label: {
|
||||
// formatter: '{b}：{c}',
|
||||
// },
|
||||
// labelLine: {
|
||||
// showAbove: true,
|
||||
// length: -60,
|
||||
// length2: 145,
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: '利润',
|
||||
type: 'pie',
|
||||
hoverAnimation: false,
|
||||
radius: ['55%', '65%'],
|
||||
center: ['75%', '50%'],
|
||||
labelLine: {
|
||||
length: 30
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}：{c}',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
alignTo: 'edge',
|
||||
margin: '10'
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: 'rgb(116,212,184)'
|
||||
},
|
||||
data: [
|
||||
{ value: 10, name: '利润' },
|
||||
{
|
||||
//画剩余的刻度圆环
|
||||
name: "",
|
||||
value: 100 - 80,
|
||||
clockwise: false,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '目标',
|
||||
type: 'pie',
|
||||
hoverAnimation: false,
|
||||
radius: ['40%', '50%'],
|
||||
center: ['75%', '50%'],
|
||||
labelLine: {
|
||||
length: 30
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}：{c}',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
alignTo: 'edge',
|
||||
margin: '10'
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: 'rgb(245,217,126)'
|
||||
},
|
||||
data: [
|
||||
{ value: 80, name: '目标' },
|
||||
{
|
||||
//画剩余的刻度圆环
|
||||
name: "",
|
||||
value: 100 - 80,
|
||||
clockwise: false,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'pie',
|
||||
hoverAnimation: false,
|
||||
radius: ['70%', '80%'],
|
||||
center: ['75%', '50%'],
|
||||
labelLine: {
|
||||
length: 30
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}：{c}',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
alignTo: 'edge',
|
||||
margin: '10'
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: 'rgb(170,202,253)'
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '收入' },
|
||||
{
|
||||
//画剩余的刻度圆环
|
||||
name: "",
|
||||
value: 60,
|
||||
clockwise: false,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
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, 'macarons');
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
348
src/views/bigScreen/qualityManage/bottom2.vue
Normal file
348
src/views/bigScreen/qualityManage/bottom2.vue
Normal file
@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="总体生产情况">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container4>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container4 from "../components/container4/index.vue";
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
import 'echarts-liquidfill'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'bottom1',
|
||||
components: {
|
||||
container4,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dateRange: [],
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: function (params, ticket, callback) {
|
||||
console.log(params)
|
||||
var res = params[0].name;
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
|
||||
}
|
||||
setTimeout(function () {
|
||||
// 仅为了模拟异步回调
|
||||
callback(ticket, res);
|
||||
}, 100)
|
||||
return 'loading...';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['交付产品', '装药量'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '35%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return Math.abs(value);//显示的数值都取绝对值
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
// data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
|
||||
data: ['2021.12', '2021.11', '2021.10', '2021.09', '2021.08'].reverse(),
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
title: {
|
||||
text: `${80}%`,
|
||||
left: "80%",
|
||||
top: "40%",
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize: 26,
|
||||
fontWeight: 'bold',
|
||||
color: "rgb(255,255,255)",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '交付产品',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 20,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
|
||||
}
|
||||
},
|
||||
data: [320, 302, 341, 374, 390],
|
||||
itemStyle: {
|
||||
color: 'rgb(115,208,183)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: function (v) { return Math.abs(v.data) }
|
||||
}
|
||||
},
|
||||
|
||||
data: [-120, -132, -101, -134, -190],
|
||||
itemStyle: {
|
||||
color: 'rgb(151,186,255)'
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'liquidFill',
|
||||
radius: '40%',
|
||||
z: 1,
|
||||
center: ['50%', '50%'],
|
||||
amplitude: 20,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#324791',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#449090',
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
},
|
||||
data: [
|
||||
0.4,
|
||||
{
|
||||
value: 0.4,
|
||||
direction: 'left',
|
||||
},
|
||||
],
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: 'transparent',
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '',
|
||||
},
|
||||
},
|
||||
outline: {
|
||||
show: true,
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
},
|
||||
borderDistance: 0,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "liquidFill", // 图表类型
|
||||
radius: "70%",
|
||||
center: ["80%", "50%"],
|
||||
data: [
|
||||
80 / 100,
|
||||
80 / 100,
|
||||
], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: "rgba(255,255,255,0)"
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false, //不显示label 用副标题代替了
|
||||
formatter: (0.5 * 100).toFixed(0) + "%",
|
||||
textStyle: {
|
||||
fontSize: 38,
|
||||
color: "black"
|
||||
}
|
||||
}
|
||||
},
|
||||
color: [ //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(82,157,240,0.1)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(104,222,219,0.5)"
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(82,157,240,0.1)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(104,222,219,0.5)"
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
},
|
||||
],
|
||||
outline: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
//进度线
|
||||
{
|
||||
type: "pie",
|
||||
center: ["80%", "50%"],
|
||||
radius: ["75%", "80%"], //进度线粗细
|
||||
hoverAnimation: false,
|
||||
clockwise: false,
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
value: 80, //进度
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 2,
|
||||
colorStops: [
|
||||
// !! 在此添加渐变过程色 !!
|
||||
{ offset: 0, color: "#68DEDB" },
|
||||
{ offset: 1, color: "#529DF0" }
|
||||
]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
// color: "#5886f0"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
//画剩余的刻度圆环
|
||||
name: "",
|
||||
value: 100 - 80,
|
||||
clockwise: false,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
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, 'macarons');
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
BIN
src/views/bigScreen/qualityManage/center.png
Normal file
BIN
src/views/bigScreen/qualityManage/center.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
180
src/views/bigScreen/qualityManage/center.vue
Normal file
180
src/views/bigScreen/qualityManage/center.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div>
|
||||
<center1>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量体系整改率</span></div>
|
||||
<div class="box"><span>98</span>%</div>
|
||||
<div style="width: 100%"><progressBar :percentage="98" /></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品合格率</span></div>
|
||||
<div class="box"><span>98</span>%</div>
|
||||
<div style="width: 100%"><progressBar :percentage="98" /></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">一般性质量问题数量</span></div>
|
||||
<div class="box" style="font-size: 18px"><span style="color: #55c5a2; margin: 0 5px">↓</span>20%</div>
|
||||
<div class="box"><i>38/40</i><span class="num2"></span></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">低层次问题数</span></div>
|
||||
<div class="box"><i>0/0</i><span class="num2"></span></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">小型产品合格率</span></div>
|
||||
<div class="box"><span>98</span>%</div>
|
||||
<div style="width: 100%"><progressBar :percentage="98" /></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">产品错/漏检率</span></div>
|
||||
<div class="box"><span>33%/0%</span></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量计划完成率</span></div>
|
||||
<div class="box"><span>80</span>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">55</span></div>
|
||||
<div style="width: 100%"><progressBar :percentage="98" /></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">质量检查完成率</span></div>
|
||||
<div class="box"><span>70</span>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">60</span></div>
|
||||
<div style="width: 100%"><progressBar :percentage="98" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</center1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import center1 from './components/center1/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import progressBar from './../components/progress/index.vue'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
center1,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.data {
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
width: 24%;
|
||||
height: 147px;
|
||||
padding: 10px;
|
||||
margin: 7px 7px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(145, 213, 254, 0.09);
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #91d5fe;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center1 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 138px;
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
right: 43%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.con_title {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
.con_title_bg1 {
|
||||
background: url('./img/left1/1.png') no-repeat;
|
||||
}
|
||||
.con_title_bg2 {
|
||||
background: url('./img/left1/2.png') no-repeat;
|
||||
}
|
||||
.con_title_bg3 {
|
||||
background: url('./img/left1/3.png') no-repeat;
|
||||
}
|
||||
.com_img {
|
||||
margin-top: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 37%;
|
||||
left: 13%;
|
||||
}
|
||||
.con_three {
|
||||
top: 70%;
|
||||
right: 16%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
239
src/views/bigScreen/qualityManage/center2.vue
Normal file
239
src/views/bigScreen/qualityManage/center2.vue
Normal file
@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div>
|
||||
<center2 title="关键参数SPC分析">
|
||||
<el-select v-model="value" slot="datePicker" size="mini" placeholder="请选择"> </el-select>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</center2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import center2 from './components/center2/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
center2,
|
||||
rocketTit,
|
||||
bigScreenTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
data: ['X管制图', 'R管制图'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
'产品实物一',
|
||||
],
|
||||
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: 0.8,
|
||||
interval: 0.2,
|
||||
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: 10,
|
||||
},
|
||||
// dataZoom: {},
|
||||
series: [
|
||||
{
|
||||
name: 'R管制图',
|
||||
type: 'line',
|
||||
barWidth: 20,
|
||||
data: [72.6, 75.9, 79.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 66.0, 62.3],
|
||||
itemStyle: {
|
||||
color: '#61DDAA',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
name: 'X管制图',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 30.0, 36.5, 42.0, 56.2],
|
||||
itemStyle: {
|
||||
color: '#7EA7FC',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.warp-scroll {
|
||||
height: 215px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.warp {
|
||||
height: 280px;
|
||||
width: 440px;
|
||||
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: 30px;
|
||||
line-height: 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
padding-left: 20px;
|
||||
margin: 5px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="centen1">
|
||||
<slot />
|
||||
<div class="centen1bg"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Centen1',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.centen1 {
|
||||
width: 762px;
|
||||
height: 312px;
|
||||
// background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
.centen1bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/qualityManage/components/center2/bg.png
Normal file
BIN
src/views/bigScreen/qualityManage/components/center2/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
100
src/views/bigScreen/qualityManage/components/center2/index.vue
Normal file
100
src/views/bigScreen/qualityManage/components/center2/index.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="center2">
|
||||
<div class="tit">
|
||||
<rocketTit>{{ title }}</rocketTit>
|
||||
<div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="snap">
|
||||
<slot name="snap"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'center2',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 762px;
|
||||
height: 312px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
padding: 16px 16px 16px 24px;
|
||||
position: relative;
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
|
||||
::v-deep .el-select {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 2px 2px 2px 22px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
src/views/bigScreen/qualityManage/components/container/index.vue
Normal file
121
src/views/bigScreen/qualityManage/components/container/index.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="container2">
|
||||
<div class="tit">
|
||||
<rocketTit>{{ title }}</rocketTit>
|
||||
<hr style="border: 0; border-bottom: 1px solid #91d5fe" />
|
||||
<div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="snap">
|
||||
<slot name="snap"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'Container2',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 538px;
|
||||
height: 586px;
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
border-bottom: 1px solid #91d5fe;
|
||||
padding: 0 5px;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #91d5fe;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #91d5fe;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/qualityManage/components/container2/bg.png
Normal file
BIN
src/views/bigScreen/qualityManage/components/container2/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="container2">
|
||||
<div class="tit">
|
||||
<rocketTit>{{ title }}</rocketTit>
|
||||
<div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="snap">
|
||||
<slot name="snap"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'Container2',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 541px;
|
||||
height: 312px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
padding: 16px 16px 16px 24px;
|
||||
position: relative;
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 2px 2px 2px 22px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/qualityManage/components/container3/bg.png
Normal file
BIN
src/views/bigScreen/qualityManage/components/container3/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="container3">
|
||||
<div class="tit">
|
||||
<rocketTit>{{ title }}</rocketTit>
|
||||
<!-- <div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="snap">
|
||||
<slot name="snap"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'container3',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1317px;
|
||||
height: 312px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
padding: 16px 16px 16px 24px;
|
||||
position: relative;
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 2px 2px 2px 22px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/qualityManage/components/container4/bg.png
Normal file
BIN
src/views/bigScreen/qualityManage/components/container4/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="container4">
|
||||
<div class="tit">
|
||||
<rocketTit>{{ title }}</rocketTit>
|
||||
<!-- <div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="snap">
|
||||
<slot name="snap"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'container4',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container4 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 536px;
|
||||
height: 360px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
position: relative;
|
||||
padding: 16px 16px 16px 24px;
|
||||
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/qualityManage/components/container5/bg.png
Normal file
BIN
src/views/bigScreen/qualityManage/components/container5/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="container5">
|
||||
<div class="tit">
|
||||
<rocketTit>{{ title }}</rocketTit>
|
||||
<!-- <div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="snap">
|
||||
<slot name="snap"></slot>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'container5',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container5 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 381px;
|
||||
height: 360px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
|
||||
.tit {
|
||||
position: relative;
|
||||
padding: 16px 16px 16px 24px;
|
||||
|
||||
.datePicker {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/qualityManage/img/center2/1.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 B |
BIN
src/views/bigScreen/qualityManage/img/center2/2.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
BIN
src/views/bigScreen/qualityManage/img/center2/3.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
BIN
src/views/bigScreen/qualityManage/img/center2/4.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 B |
BIN
src/views/bigScreen/qualityManage/img/center2/5.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 539 B |
BIN
src/views/bigScreen/qualityManage/img/center2/6.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 B |
BIN
src/views/bigScreen/qualityManage/img/center2/7.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
BIN
src/views/bigScreen/qualityManage/img/center2/8.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/center2/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 B |
BIN
src/views/bigScreen/qualityManage/img/left1/1.jpg
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
src/views/bigScreen/qualityManage/img/left1/1.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
BIN
src/views/bigScreen/qualityManage/img/left1/2.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 B |
BIN
src/views/bigScreen/qualityManage/img/left1/3.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
BIN
src/views/bigScreen/qualityManage/img/left1/icon.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 447 B |
BIN
src/views/bigScreen/qualityManage/img/left1/icon1.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/views/bigScreen/qualityManage/img/left1/icon2.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/views/bigScreen/qualityManage/img/left1/icon3.png
Normal file
BIN
src/views/bigScreen/qualityManage/img/left1/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -1,18 +1,126 @@
|
||||
<template>
|
||||
<div class="qualityManage">
|
||||
质量管理
|
||||
<div class="drivingCabin">
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<div class="left3">
|
||||
<left3></left3>
|
||||
</div>
|
||||
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="center2">
|
||||
<center2></center2>
|
||||
</div>
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
<!-- <div class="right2">
|
||||
<right2></right2>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container1 from '../components/container1/index.vue'
|
||||
|
||||
import left1 from './left1.vue'
|
||||
import left2 from './left2.vue'
|
||||
import left3 from './left3.vue'
|
||||
import center1 from './center.vue'
|
||||
import center2 from './center2.vue'
|
||||
import right1 from './right1.vue'
|
||||
import right2 from './right2.vue'
|
||||
import bottom1 from './bottom1.vue'
|
||||
import bottom2 from './bottom2.vue'
|
||||
export default {
|
||||
name: 'QualityManage',
|
||||
components: {
|
||||
}
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container1,
|
||||
left1,
|
||||
left2,
|
||||
left3,
|
||||
center1,
|
||||
right1,
|
||||
right2,
|
||||
bottom1,
|
||||
bottom2,
|
||||
center2,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drivingCabin {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// background-image: url("../img/bg.png");
|
||||
background-size: cover;
|
||||
.bg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 485px;
|
||||
background-image: url('../img/bg-1.png');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.left1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 24px;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
top: 325px;
|
||||
left: 24px;
|
||||
}
|
||||
.left3 {
|
||||
position: absolute;
|
||||
top: 650px;
|
||||
left: 24px;
|
||||
}
|
||||
.center1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 578px;
|
||||
}
|
||||
.center2 {
|
||||
position: absolute;
|
||||
top: 650px;
|
||||
left: 578px;
|
||||
}
|
||||
|
||||
.right1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 24px;
|
||||
}
|
||||
.right2 {
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
right: 24px;
|
||||
}
|
||||
.bottom1 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 24px;
|
||||
}
|
||||
.bottom2 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 24px;
|
||||
}
|
||||
</style>
|
||||
437
src/views/bigScreen/qualityManage/left1.vue
Normal file
437
src/views/bigScreen/qualityManage/left1.vue
Normal file
@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="质量计划">
|
||||
<div slot="datePicker">
|
||||
<bigScreenTabs v-model="index" :titleArr="['全厂', '部门']"></bigScreenTabs>
|
||||
</div>
|
||||
<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
|
||||
<div style="height: 100%; width: 100%" ref="chart2" v-else></div>
|
||||
</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 {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,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
chart: null,
|
||||
chart2: null,
|
||||
data: [
|
||||
{ value: 154, name: '类别一' },
|
||||
{ value: 775, name: '类别二' },
|
||||
{ value: 679, name: '类别三' },
|
||||
{ value: 679, name: '类别四' },
|
||||
{ value: 679, name: '类别五' },
|
||||
{ value: 679, name: '类别六' },
|
||||
{ value: 679, name: '类别七' },
|
||||
{ value: 679, name: '类别八' },
|
||||
],
|
||||
colorList,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
if (newVal == 0) {
|
||||
this.chart2.dispose()
|
||||
this.chart2 = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
} else {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart2()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.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: [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: '#9AF0D5', // 0%处的颜色为红色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#61DDAA', // 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: {
|
||||
color: '#7EA7FC',
|
||||
},
|
||||
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]
|
||||
// }
|
||||
|
||||
// ]
|
||||
})
|
||||
},
|
||||
initChart2() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart2.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],
|
||||
},
|
||||
{
|
||||
name: '目标',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
},
|
||||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
423
src/views/bigScreen/qualityManage/left2.vue
Normal file
423
src/views/bigScreen/qualityManage/left2.vue
Normal file
@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3 title="质量计划">
|
||||
<div class="wrap">
|
||||
<el-row class="content1" style="height: 100%">
|
||||
<el-col :span="8" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||
</el-col>
|
||||
<el-col :span="16" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container3 from './components/container3/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
bigScreenTabs,
|
||||
rocketTit,
|
||||
container3,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
testData: [
|
||||
{ name: '运行策划控制', height: '部门3', weight: 51.6 },
|
||||
{ name: '产品服务要求', height: '部门4', weight: 59 },
|
||||
{ name: '产品、服务设计开发', height: '部门4', weight: 49.2 },
|
||||
{ name: '外部提供的过程、产品和服务控制', height: '部门5', weight: 63 },
|
||||
{ name: '生产服务提供', height: '部门6', weight: 53.6 },
|
||||
{ name: '产品、服务设计开发', height: '部门7', weight: 59 },
|
||||
{ name: '产品服务要求', height: '部门1', weight: 47.6 },
|
||||
{ name: '生产服务提供', height: '部门2', weight: 69.8 },
|
||||
],
|
||||
index: 0,
|
||||
colorList,
|
||||
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '能昌',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '葛岚福',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
const data = [
|
||||
[
|
||||
['部门1', 77, 17096869, '运行策划控制'],
|
||||
['部门2', 77.4, 27662440, '运行策划控制'],
|
||||
['部门3', 68, 1154605773, '运行策划控制'],
|
||||
['部门4', 74.7, 10582082, '运行策划控制'],
|
||||
['部门5', 75, 4986705, '运行策划控制'],
|
||||
['部门6', 77.1, 56943299, '运行策划控制'],
|
||||
['部门7', 75.4, 78958237, '运行策划控制'],
|
||||
['部门8', 78.1, 254830, '运行策划控制'],
|
||||
],
|
||||
[
|
||||
['部门1', 45, 23968973, '产品服务要求'],
|
||||
['部门2', 88, 35939927, '产品服务要求'],
|
||||
['部门3', 76.9, 1376048943, '产品服务要求'],
|
||||
['部门4', 78.5, 11389562, '产品服务要求'],
|
||||
['部门5', 80.8, 5503457, '产品服务要求'],
|
||||
['部门6', 81.9, 64395345, '产品服务要求'],
|
||||
['部门7', 81.1, 80688545, '产品服务要求'],
|
||||
['部门8', 82.8, 329425, '产品服务要求'],
|
||||
],
|
||||
[
|
||||
['部门1', 81.8, 23968973, '产品、服务设计开发'],
|
||||
['部门2', 81.7, 35939927, '产品、服务设计开发'],
|
||||
['部门3', 76.9, 1376048943, '产品、服务设计开发'],
|
||||
['部门4', 56, 11389562, '产品、服务设计开发'],
|
||||
['部门5', 75, 5503457, '产品、服务设计开发'],
|
||||
['部门6', 67, 64395345, '产品、服务设计开发'],
|
||||
['部门7', 79, 80688545, '产品、服务设计开发'],
|
||||
['部门8', 88, 329425, '产品、服务设计开发'],
|
||||
],
|
||||
[
|
||||
['部门1', 68, 23968973, '外部提供的过程、产品和服务控制'],
|
||||
['部门2', 78, 35939927, '外部提供的过程、产品和服务控制'],
|
||||
['部门3', 76.9, 1376048943, '外部提供的过程、产品和服务控制'],
|
||||
['部门4', 78.5, 11389562, '外部提供的过程、产品和服务控制'],
|
||||
['部门5', 45, 5503457, '外部提供的过程、产品和服务控制'],
|
||||
['部门6', 81.9, 64395345, '外部提供的过程、产品和服务控制'],
|
||||
['部门7', 84, 80688545, '外部提供的过程、产品和服务控制'],
|
||||
['部门8', 69, 329425, '外部提供的过程、产品和服务控制'],
|
||||
],
|
||||
[
|
||||
['部门1', 85, 23968973, '生产服务提供'],
|
||||
['部门2', 81.7, 35939927, '生产服务提供'],
|
||||
['部门3', 70, 1376048943, '生产服务提供'],
|
||||
['部门4', 78, 11389562, '生产服务提供'],
|
||||
['部门5', 67, 5503457, '生产服务提供'],
|
||||
['部门6', 45, 64395345, '生产服务提供'],
|
||||
['部门7', 65, 80688545, '生产服务提供'],
|
||||
['部门8', 56, 329425, '生产服务提供'],
|
||||
],
|
||||
]
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
right: '10%',
|
||||
top: '3%',
|
||||
data: [
|
||||
'运行策划控制',
|
||||
'产品服务要求',
|
||||
'产品、服务设计开发',
|
||||
'外部提供的过程、产品和服务控制',
|
||||
'生产服务提供',
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
left: '8%',
|
||||
top: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// splitLine: {
|
||||
// lineStyle: {
|
||||
// type: 'dashed',
|
||||
// },
|
||||
// },
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
// yAxis: {
|
||||
// splitLine: {
|
||||
// lineStyle: {
|
||||
// type: 'dashed',
|
||||
// },
|
||||
// },
|
||||
// scale: true,
|
||||
// },
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '运行策划控制',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize: 8,
|
||||
|
||||
itemStyle: {
|
||||
color: '#FF667F',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '产品服务要求',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#9CEB00',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '产品、服务设计开发',
|
||||
data: data[2],
|
||||
type: 'scatter',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#9966FF',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '外部提供的过程、产品和服务控制',
|
||||
data: data[3],
|
||||
type: 'scatter',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#4E00EB',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initLine() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
orient: 'vertical',
|
||||
// left: 'right',
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '内审',
|
||||
type: 'pie',
|
||||
radius: ['60%', '80%'],
|
||||
center: ['30%', '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: 301, name: '内审5' },
|
||||
],
|
||||
color: blueColorList,
|
||||
},
|
||||
{
|
||||
name: '外审',
|
||||
type: 'pie',
|
||||
radius: ['35%', '55%'],
|
||||
center: ['30%', '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: ['30%', '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,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp-scroll {
|
||||
height: 215px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
60
src/views/bigScreen/qualityManage/left3.vue
Normal file
60
src/views/bigScreen/qualityManage/left3.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="视频检验系统实况">
|
||||
<div class="box">
|
||||
<div class="_img">
|
||||
<img src="./1.jpg" alt="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<p style="opacity: 0.8">实况信息</p>
|
||||
<p style="opacity: 0.5; color: #91d5fe; font-size: 14px">正在进行XXXX作业建议正在进行XXXX作业建议</p>
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container2 from './components/container2/index.vue'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left3',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container2,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
display: flex;
|
||||
padding: 0 10px 0 0;
|
||||
._img {
|
||||
width: 310px;
|
||||
height: 229px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
background-color: rgba(145, 213, 254, 0.15);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
874
src/views/bigScreen/qualityManage/right1.vue
Normal file
874
src/views/bigScreen/qualityManage/right1.vue
Normal 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>
|
||||
BIN
src/views/bigScreen/qualityManage/right2-1.png
Normal file
BIN
src/views/bigScreen/qualityManage/right2-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/views/bigScreen/qualityManage/right2-2.png
Normal file
BIN
src/views/bigScreen/qualityManage/right2-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
282
src/views/bigScreen/qualityManage/right2.vue
Normal file
282
src/views/bigScreen/qualityManage/right2.vue
Normal 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>
|
||||
Reference in New Issue
Block a user