1578 lines
43 KiB
Vue
1578 lines
43 KiB
Vue
<template>
|
||
<div class="n_container">
|
||
<div class="n_header">
|
||
<h1>据控制中心</h1>
|
||
</div>
|
||
<div class="n_body_container">
|
||
<div class="n_body_container_wraper">
|
||
<div class="box1">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">包装</div>
|
||
</div>
|
||
<div class="item_content_3">
|
||
<div class="right_1_up">
|
||
<div class="item_title">包装</div>
|
||
<div class="right_1_up_left">
|
||
<div class="echart_d3_wrap">
|
||
<div id="two_echart_01" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right_1_up_right">
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日计划生产：</p>
|
||
<p class="right_1_up_p2">{{num1}}<span>吨</span></p>
|
||
</div>
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日实际生产：</p>
|
||
<p class="right_1_up_p2">{{num2}}<span>吨</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">成品</div>
|
||
</div>
|
||
<div class="item_content_3 item_content_3__h3">
|
||
<div class="right_1_up">
|
||
<div class="item_title">成品</div>
|
||
<div class="right_1_up_left" style="backgroundImage: none;">
|
||
<div class="echart_d3_wrap">
|
||
<div id="two_echart_02" style="width: 130%; height: 130%; top: -12px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right_1_up_right right_1_up_right__h3">
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日库存数量：</p>
|
||
<p class="right_1_up_p2">{{num3}}<span>万块</span></p>
|
||
</div>
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日入库数量：</p>
|
||
<p class="right_1_up_p2">{{num4}}<span>万块</span></p>
|
||
</div>
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日出库数量：</p>
|
||
<p class="right_1_up_p2">{{num5}}<span>万块</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box2">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">当日包装生产</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="two_echart_03" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">当日成品进出存</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="two_echart_04" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box2">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">本周包装生产</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="two_echart_05" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">本周成品进出存</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="two_echart_06" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tooltip_wrap right_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
|
||
<div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'">
|
||
<div class="tooltip_page pointer" @click="toJumpPage(1)">1</div>
|
||
<div class="tooltip_page pointer" @click="toJumpPage(2)">2</div>
|
||
<div class="tooltip_page pointer" @click="toJumpPage(3)">3</div>
|
||
<div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
|
||
<div class="tooltip_page pointer" @click="toJumpPage(5)">5</div>
|
||
<div class="tooltip_page current_page pointer" @click="toJumpPage(6)">6</div>
|
||
</div>
|
||
<div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '<<' : '>>'"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { processProduction } from '@js/getData0'
|
||
export default {
|
||
name: 'two',
|
||
data () {
|
||
return {
|
||
expand: false,
|
||
num1: 0,
|
||
num2: 0,
|
||
num3: 0,
|
||
num4: 0,
|
||
num5: 0,
|
||
val3: 0,
|
||
val4: 0,
|
||
val5: 0,
|
||
finishRate1: 0,
|
||
echartData03: [{data1: '5', data2: '15', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
|
||
echartData04: [{data1: '15', data2: '15', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
|
||
echartData05: [{data1: '19', data2: '10', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
|
||
echartData06: [{data1: '30', data2: '15', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
|
||
myCharts01: '',
|
||
myCharts02: '',
|
||
myCharts03: '',
|
||
myCharts04: '',
|
||
myCharts05: '',
|
||
myCharts06: ''
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initData()
|
||
// this.setEchart01()
|
||
// this.setEchart02()
|
||
// this.setEchart03()
|
||
// this.setEchart04()
|
||
// this.setEchart05()
|
||
// this.setEchart06()
|
||
},
|
||
methods: {
|
||
expandTooltip () {
|
||
this.expand = !this.expand
|
||
},
|
||
toJumpPage (type) {
|
||
switch (type) {
|
||
case 1:
|
||
this.$router.push('/homepagetwo')
|
||
break
|
||
case 2:
|
||
this.$router.push('/hnlktwo')
|
||
break
|
||
case 3:
|
||
this.$router.push('/takeshapetwo')
|
||
break
|
||
case 4:
|
||
this.$router.push('/firedrytwo')
|
||
break
|
||
case 5:
|
||
this.$router.push('/sortpacktwo')
|
||
break
|
||
case 6:
|
||
break
|
||
}
|
||
},
|
||
async initData () {
|
||
let res = await processProduction()
|
||
this.resData = res.result
|
||
this.num1 = res.result.BZ.bz_plan_day
|
||
this.num2 = res.result.BZ.bz_real_day
|
||
this.num3 = res.result.KC.inventory_qty
|
||
this.num4 = res.result.KC.in_qty
|
||
this.num5 = res.result.KC.out_qty
|
||
this.val3 = res.result.KC.inv_productivity
|
||
this.val4 = res.result.KC.in_productivity
|
||
this.val5 = res.result.KC.out_productivity
|
||
this.finishRate1 = res.result.BZ.bz_productivity
|
||
this.finishRate2 = res.result.KC.kc_productivity
|
||
this.echartData03 = res.result.BZ.BZDayList
|
||
this.echartData05 = res.result.BZ.BZWeekList
|
||
this.echartData04 = res.result.KC.KCDayList
|
||
this.echartData06 = res.result.KC.KCWeekList
|
||
console.log(this.echartData06, '222222')
|
||
this.setEchart01()
|
||
this.setEchart02()
|
||
this.setEchart03()
|
||
this.setEchart04()
|
||
this.setEchart06()
|
||
this.setEchart05()
|
||
},
|
||
setEchart01 () {
|
||
let value = Number(this.finishRate1)
|
||
let title = '%'
|
||
let text = '完成率'
|
||
let option = {
|
||
title: [
|
||
{
|
||
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
|
||
x: 'center',
|
||
y: 'center',
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
fontSize: 26,
|
||
color: '#00D9FF',
|
||
fontFamily: 'SourceHanSansCN',
|
||
foontWeight: '700'
|
||
},
|
||
b: {
|
||
fontSize: 16,
|
||
color: '#ffffff',
|
||
fontFamily: 'SourceHanSansCN',
|
||
foontWeight: '700',
|
||
padding: [10, 0, 0, 3]
|
||
},
|
||
c: {
|
||
color: '#FFFFFF',
|
||
fontSize: 13,
|
||
fontWeight: '700',
|
||
fontFamily: 'SourceHanSansCN',
|
||
padding: [10, 0, 0, 0]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
],
|
||
polar: {
|
||
radius: ['75%', '83%'],
|
||
center: ['50%', '50%']
|
||
},
|
||
angleAxis: {
|
||
max: 100,
|
||
show: false
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
show: true,
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
series: [
|
||
{name: '',
|
||
type: 'bar',
|
||
roundCap: true,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: '#0a2543'
|
||
},
|
||
data: [value],
|
||
coordinateSystem: 'polar',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#00dfff'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('two_echart_01')
|
||
// if (this.myCharts01 !== '') {
|
||
// this.myCharts01.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts01 = this.$echarts.init(echart)
|
||
this.myCharts01.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts01.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart02 () {
|
||
var color = ['#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc', '#7049f0', '#e2bb0e', '#B68845']
|
||
var dataStyle = {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
shadowBlur: 40,
|
||
borderWidth: 10,
|
||
shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
|
||
}
|
||
}
|
||
var placeHolderStyle = {
|
||
normal: {
|
||
color: '#393d50',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
emphasis: {
|
||
color: '#393d50'
|
||
}
|
||
}
|
||
let option = {
|
||
// backgroundColor: '#142058',
|
||
title: {
|
||
text: '库存数',
|
||
x: 'center',
|
||
y: 'center',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 14,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
show: true,
|
||
formatter: '{b} : <br/>{d}%',
|
||
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
||
padding: [8, 10], // 内边距
|
||
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
// legend: {
|
||
// orient: 'horizontal',
|
||
// icon: 'circle',
|
||
// position: 'top',
|
||
// top: '0',
|
||
// itemGap: 12,
|
||
// data: ['入库数', '出库数', '库存数', '04', '05', '06'],
|
||
// textStyle: {
|
||
// color: '#fff',
|
||
// }
|
||
// },
|
||
series: [
|
||
{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: [55, 65],
|
||
center: ['50%', '50%'],
|
||
itemStyle: dataStyle,
|
||
hoverAnimation: false,
|
||
startAngle: 90,
|
||
label: {
|
||
borderRadius: '10'
|
||
},
|
||
data: [
|
||
{
|
||
value: this.val4,
|
||
name: '入库数',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: color[4]
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: color[5]
|
||
}
|
||
])
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: (100 - this.val4),
|
||
name: '',
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
itemStyle: placeHolderStyle
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: 'Line 2',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: [45, 55],
|
||
center: ['50%', '50%'],
|
||
itemStyle: dataStyle,
|
||
hoverAnimation: false,
|
||
startAngle: 90,
|
||
data: [
|
||
{
|
||
value: this.val5,
|
||
name: '出库数',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: color[2]
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: color[3]
|
||
}
|
||
])
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: (100 - this.val5),
|
||
name: '',
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
itemStyle: placeHolderStyle
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: 'Line 3',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: [35, 45],
|
||
center: ['50%', '50%'],
|
||
itemStyle: dataStyle,
|
||
hoverAnimation: false,
|
||
startAngle: 90,
|
||
data: [
|
||
{
|
||
value: this.val3,
|
||
name: '库存数',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: color[6]
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: color[7]
|
||
}
|
||
])
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: (100 - this.val3),
|
||
name: '',
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
itemStyle: placeHolderStyle
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('two_echart_02')
|
||
// if (this.myCharts02 !== '') {
|
||
// this.myCharts02.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts02 = this.$echarts.init(echart)
|
||
this.myCharts02.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts02.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart03 () {
|
||
let data1 = []
|
||
let data2 = []
|
||
let device = []
|
||
this.echartData03.map(e => {
|
||
data1.push(e.qualified_qty)
|
||
data2.push(e.unqualified_qty)
|
||
device.push(e.material_code)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
data: device
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '不合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data2
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('two_echart_03')
|
||
// if (this.myCharts03 !== '') {
|
||
// this.myCharts03.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts03 = this.$echarts.init(echart)
|
||
this.myCharts03.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts03.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart04 () {
|
||
let data1 = []
|
||
let data2 = []
|
||
let data3 = []
|
||
let device = []
|
||
this.echartData04.map(e => {
|
||
data1.push(e.region_in_qty)
|
||
data2.push(e.region_out_qty)
|
||
data3.push(e.inventory_qty)
|
||
device.push(e.material_code)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '入库数量', itemStyle: {color: '#33CCCC'}}, {name: '出库数量', itemStyle: {color: '#EAAD24'}}, {name: '库存数量', itemStyle: {color: '#0E90FD'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
data: device
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '入库数量',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '出库数量',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data2
|
||
},
|
||
{
|
||
name: '库存数量',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 0.1
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data3
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('two_echart_04')
|
||
// if (this.myCharts04 !== '') {
|
||
// this.myCharts04.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts04 = this.$echarts.init(echart)
|
||
this.myCharts04.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts04.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart05 () {
|
||
let data1 = []
|
||
let data2 = []
|
||
let device = []
|
||
this.echartData05.map(e => {
|
||
data1.push(e.qualified_qty)
|
||
data2.push(e.unqualified_qty)
|
||
device.push(e.material_code)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
data: device
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '不合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data2
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('two_echart_05')
|
||
// if (this.myCharts05 !== '') {
|
||
// this.myCharts05.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts05 = this.$echarts.init(echart)
|
||
this.myCharts05.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts05.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart06 () {
|
||
let data1 = []
|
||
let data2 = []
|
||
let data3 = []
|
||
let device = []
|
||
this.echartData06.map(e => {
|
||
data1.push(e.region_in_qty)
|
||
data2.push(e.region_out_qty)
|
||
data3.push(e.inventory_qty)
|
||
device.push(e.material_code)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '入库数量', itemStyle: {color: '#33CCCC'}}, {name: '出库数量', itemStyle: {color: '#EAAD24'}}, {name: '库存数量', itemStyle: {color: '#0E90FD'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
data: device
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '入库数量',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '出库数量',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data2
|
||
},
|
||
{
|
||
name: '库存数量',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 0.1
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data3
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('two_echart_06')
|
||
// if (this.myCharts06 !== '') {
|
||
// this.myCharts06.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts06 = this.$echarts.init(echart)
|
||
this.myCharts06.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts06.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart10 () {
|
||
let total = [100, 200, 120, 133, 80, 155, 250]
|
||
let names = [10, 20, 30, 40, 50, 60, 70]
|
||
let max = 0
|
||
// this.chartData2.map(el => {
|
||
// total.push(el.err_times)
|
||
// names.push(el.device_name)
|
||
// max = Math.max(max, Number(el.err_times))
|
||
// })
|
||
let option = {
|
||
dataZoom: [
|
||
{
|
||
show: false, // 为true滚动条出现
|
||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
startValue: 0, // 从头开始。
|
||
endValue: 9 // end百分比显示范围，endValue具体显示几个数值
|
||
}
|
||
],
|
||
grid: {
|
||
top: 30,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
borderColor: '#ffffff',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 18,
|
||
lineHeight: 18
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#8FABBF ',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8FABBF ',
|
||
rotate: 50
|
||
},
|
||
data: names
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#909399'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#909399'
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF',
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
max: max
|
||
},
|
||
series: [
|
||
{
|
||
name: '产量',
|
||
type: 'bar',
|
||
barWidth: 38,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
// color: '#67c23a',
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 0.1
|
||
}
|
||
]),
|
||
borderWidth: 0
|
||
}
|
||
},
|
||
// data: [100, 51, 90, 41, 91, 61, 51]
|
||
data: total
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d10')
|
||
this.myCharts10 = this.$echarts.init(echart)
|
||
this.myCharts10.setOption(option)
|
||
// this.autoMove(option, 3)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts10.resize()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@css/mixin'
|
||
.n_container
|
||
_wh(100%, 100%)
|
||
.n_header
|
||
_wh(100%, 84px)
|
||
_bis('../../../images/top_right.png', auto,,left,,)
|
||
line-height 84px
|
||
h1
|
||
_font(32px, 56px, #fff,,left)
|
||
letter-spacing 6px
|
||
font-family "阿里妈妈数黑体" !important
|
||
padding-left 3px
|
||
.n_body_container
|
||
_wh(100%, calc(100% - 84px))
|
||
padding 40px 54px 0 0
|
||
.n_body_container_wraper
|
||
_wh(100%, 100%)
|
||
padding-left 8px
|
||
.box1
|
||
// _wh(100%, 20%)
|
||
width 100%
|
||
height 212px
|
||
_fj()
|
||
flex-direction row
|
||
margin-bottom 1%
|
||
.box2
|
||
clear both
|
||
_wh(100%, calc(48% - 106px))
|
||
_fj()
|
||
flex-direction row
|
||
+.box2
|
||
margin-top 1%
|
||
.item_title
|
||
_font(46px, 1, #fff,,,)
|
||
.bg
|
||
_wh(100%, 100%)
|
||
overflow hidden
|
||
.container
|
||
_wh(100%, calc(100% - 1.38rem))
|
||
padding .3rem .2509rem 0
|
||
overflow hidden
|
||
clear both
|
||
.bottom
|
||
_wh(100%, .38rem)
|
||
background center bottom / 19.06rem 100% url(../../..//images/screen1/bottom.png) no-repeat
|
||
.left_wrap
|
||
float left
|
||
_wh(4.0756rem, 100%)
|
||
.center_wrap
|
||
float left
|
||
_wh(9.96rem, 100%)
|
||
margin-left .2936rem
|
||
padding .4rem .16rem
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_2.png) no-repeat
|
||
.right_wrap
|
||
float right
|
||
_wh(4.0273rem, 100%)
|
||
.item_wrap
|
||
_wh(calc(50% - 8px), 100%)
|
||
.item_tip
|
||
clear both
|
||
_wh(100%, 32px)
|
||
line-height 32px
|
||
background center center / 100% 100% url(../../..//images/screen1/title_bg_2.png) no-repeat
|
||
.item_tip_2
|
||
background center center / 100% 100% url(../../..//images/screen1/title_bg_2.png) no-repeat
|
||
.item_tip_left
|
||
float left
|
||
_wh(60%, 100%)
|
||
font-family "SourceHanSansCN"
|
||
_font(18px, inherit, #fff, 700, left)
|
||
letter-spacing 2px
|
||
text-shadow 0 0 9px #159AFF
|
||
padding-left 40px
|
||
.item_tip_right
|
||
float right
|
||
_wh(39%, 100%)
|
||
line-height inherit
|
||
text-align right
|
||
padding-right .09rem
|
||
span
|
||
_font(.14rem, inherit, #FFCB00, lighter,)
|
||
.span1
|
||
font-size .12rem
|
||
color #84B0DA
|
||
.item_content
|
||
// _wh(100%, calc(100% - .32rem))
|
||
padding .17rem .17rem .24rem .17rem
|
||
background-color #011834
|
||
.item_content_1
|
||
_wh(100%, 100%)
|
||
_fj(space-around)
|
||
padding .17rem 0 .24rem
|
||
.item_content_1_inner
|
||
_wh(1.2rem, 100%)
|
||
background-color #011834
|
||
.item_content_1_inner_1
|
||
_wh(100%, .37rem)
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .37rem, #78B1DE, 700, center)
|
||
letter-spacing .02rem
|
||
background center center / 100% 100% url(../../..//images/screen1/item_1.png) no-repeat
|
||
.item_content_1_inner_2
|
||
_wh(100%, calc((100% - .37rem) / 3))
|
||
overflow hidden
|
||
_fj(space-evenly)
|
||
flex-direction column
|
||
padding-top .06rem
|
||
.item_content_1_inner_2_bg
|
||
background center bottom / 1.02rem .03rem url(../../..//images/screen1/line_1.png) no-repeat
|
||
.item_content_1_inner_2_p1
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .18rem, #fff, 700, center)
|
||
letter-spacing .0188rem
|
||
.item_content_1_inner_2_p2
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .14rem, #84B0DA, 700, center)
|
||
letter-spacing .02rem
|
||
.item_wrap_2
|
||
_wh(100%, calc((100% - .4rem) / 2))
|
||
.item_wrap_3
|
||
margin-top .4rem
|
||
.item_content_2
|
||
_wh(100%, calc(100% - .32rem))
|
||
margin-top .06rem
|
||
border .01rem solid rgba(8,205,248,0.3)
|
||
.scroll_wrap
|
||
_wh(100%, 100%)
|
||
.scroll_tab_1
|
||
_wh(100%, .4rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
li
|
||
float left
|
||
width 12%
|
||
_font(.14rem,.4rem,#78B1DE,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
box-sizing border-box
|
||
&:nth-child(8)
|
||
width 16%
|
||
.scroll_tab_2 li
|
||
width 17%
|
||
&:first-child
|
||
width 15%
|
||
.scroll_container_1
|
||
width 100%
|
||
height calc(100% - .4rem)
|
||
overflow hidden
|
||
.scroll-ul_1
|
||
li
|
||
_wh(100%, .44rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
&:nth-child(even)
|
||
background rgba(1,24,52,0.60)
|
||
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
|
||
.scroll-ul_1_div
|
||
float left
|
||
_wh(12%, .44rem)
|
||
_fj(center)
|
||
_font(.14rem, .44rem, #fff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
&:nth-child(8)
|
||
width 16%
|
||
.scroll-ul_2 li .scroll-ul_1_div
|
||
width 17%
|
||
&:first-child
|
||
width 15%
|
||
.progress_line_wrap
|
||
position relative
|
||
_wh(1.35rem, .03rem)
|
||
background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
|
||
.progress_dot_wrap
|
||
position absolute
|
||
_wh(100%, .15rem)
|
||
top -.06rem
|
||
left -.05rem
|
||
.progress_dot
|
||
position absolute
|
||
top 0
|
||
left 0
|
||
_wh(.15rem, .15rem)
|
||
background center center / 100% 100% url(../../..//images/screen1/dot_1.png) no-repeat
|
||
.item_content_3
|
||
_wh(100%, 100%)
|
||
height calc(100% - 32px)
|
||
padding 20px 30px
|
||
_fj(center)
|
||
.item_content_3__h3
|
||
padding 10px 30px
|
||
.right_1_up
|
||
clear both
|
||
_wh(100%, 100%)
|
||
_fj(row)
|
||
// background center bottom / 100% .03rem url(../../..//images/screen1/line_2.png) no-repeat
|
||
.right_1_up_left
|
||
_wh(140px, 140px)
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_3.png) no-repeat
|
||
_fj(row, center)
|
||
margin-right 150px
|
||
.echart_d3_wrap
|
||
_wh(82%, 82%)
|
||
margin 0 auto
|
||
.right_1_up_right
|
||
_wh(48%, 100%)
|
||
.right_1_up_right_item
|
||
_wh(100%, 60px)
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_4.png) no-repeat
|
||
_fj(row)
|
||
+.right_1_up_right_item
|
||
margin-top 20px
|
||
.right_1_up_right__h3
|
||
.right_1_up_right_item
|
||
height 40px
|
||
.right_1_up_p1
|
||
font-family "SourceHanSansCN"
|
||
_font(22px, 60px, #78B1DE, 700, center)
|
||
margin-left 24px
|
||
.right_1_up_p2
|
||
font-family "SourceHanSansCN"
|
||
_font(24px, 60px, $yellow, 700, center)
|
||
margin-right 20px
|
||
span
|
||
_font(18px, 60px, #fff, 700, center)
|
||
padding-left 6px
|
||
.right_1_down
|
||
_wh(100%, calc(100% - 1.6rem))
|
||
padding .05rem .3rem 0
|
||
.right_1_down_inner_1
|
||
_wh(100%, .28rem)
|
||
overflow hidden
|
||
_fj()
|
||
div
|
||
&:nth-child(1)
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .28rem, #84B0DA, 700,)
|
||
letter-spacing .0171rem
|
||
&:nth-child(2)
|
||
font-family "SourceHanSansCN"
|
||
_font(.16rem, .28rem, #fff, 700, right)
|
||
letter-spacing .02rem
|
||
.right_1_down_inner_2
|
||
_wh(100%, .1811rem)
|
||
background-color rgba(0,213,255,0.20)
|
||
_fj()
|
||
div
|
||
height .0805rem
|
||
&:nth-child(1)
|
||
background-color #07E083
|
||
&:nth-child(2)
|
||
background-color #B68845
|
||
.right_1_down_inner_3
|
||
_wh(100%, .3rem)
|
||
margin-top .1rem
|
||
_fj()
|
||
.right_1_down_inner_3_i
|
||
_wh(1.83rem, .3rem)
|
||
_fj()
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_5.png) no-repeat
|
||
.right_1_down_inner_3_l
|
||
_wh(50%, 100%)
|
||
overflow hidden
|
||
clear both
|
||
span
|
||
display block
|
||
float left
|
||
&:nth-child(1)
|
||
_wh(.0725rem, .3rem)
|
||
margin-left .15rem
|
||
_fj()
|
||
overflow hidden
|
||
i
|
||
display block
|
||
_wh(.0725rem, .0725rem)
|
||
border-radius 100%
|
||
&:nth-child(2)
|
||
_wh(calc(100% - 0.2825rem), .3rem)
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .3rem, #fff,400,)
|
||
margin-left .06rem
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
.right_1_down_inner_3_r
|
||
_wh(50%, 100%)
|
||
line-height .3rem
|
||
overflow hidden
|
||
text-align right
|
||
span
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .3rem, #fff,700,)
|
||
&:nth-child(1)
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .3rem, #00D5FF,700,)
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
.item_content_4
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding .1rem 0 .2rem
|
||
overflow hidden
|
||
.scroll-ul_2
|
||
li
|
||
_wh(100%, .4rem)
|
||
clear both
|
||
margin-bottom .1rem
|
||
&:nth-child(-n+3)
|
||
background center center / 100% 100% url(../../..//images/screen1/item_6.png) no-repeat
|
||
&:nth-child(n+4)
|
||
background center center / 100% 100% url(../../..//images/screen1/item_7.png) no-repeat
|
||
&:nth-child(1) .scroll-ul_2_div_1
|
||
background center center / .24rem .27rem url(../../..//images/screen1/top_1.png) no-repeat
|
||
&:nth-child(2) .scroll-ul_2_div_1
|
||
background center center / .24rem .27rem url(../../..//images/screen1/top_2.png) no-repeat
|
||
&:nth-child(3) .scroll-ul_2_div_1
|
||
background center center / .24rem .27rem url(../../..//images/screen1/top_3.png) no-repeat
|
||
.scroll-ul_2_div_1
|
||
float left
|
||
_wh(.6rem, 100%)
|
||
_font(.16rem, .4rem, #fff, 700, center)
|
||
.scroll-ul_2_div_2
|
||
float left
|
||
_wh(calc(60% - .6rem), 100%)
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .4rem, #fff, 700,)
|
||
padding-left .1rem
|
||
letter-spacing .02rem
|
||
.scroll-ul_2_div_3
|
||
float right
|
||
_wh(30%, 100%)
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .4rem, #fff, 700, right)
|
||
padding-right .2rem
|
||
span
|
||
&:nth-child(1)
|
||
font-size .18rem
|
||
letter-spacing: .0125rem
|
||
.item_content_5
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding-top .3rem
|
||
clear both
|
||
.item_5_l
|
||
float left
|
||
_wh(50%, 100%)
|
||
.item_5_r
|
||
float right
|
||
_wh(50%, 100%)
|
||
_fj()
|
||
flex-direction column
|
||
.item_5_l_1
|
||
_wh(100%, 60%)
|
||
background right center / .02rem 100% url(../../..//images/screen1/line_3.png) no-repeat
|
||
.item_5_l_2
|
||
_wh(100%, 40%)
|
||
_fj()
|
||
flex-direction column
|
||
// .right_1_down_inner_3_i
|
||
// &:nth-child(1), &:nth-child(2)
|
||
// margin-bottom 5%
|
||
.color1
|
||
background-color #07E083
|
||
.color2
|
||
background-color #B68845
|
||
.swiper_wrap
|
||
clear both
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding .17rem 0 .24rem
|
||
overflow hidden
|
||
.swiper_wrap_con
|
||
_wh(100%, 100%)
|
||
.swiper_item
|
||
position relative
|
||
left 0
|
||
float left
|
||
_wh(100%, 100%)
|
||
_fj(space-around)
|
||
.p1
|
||
position absolute
|
||
display block
|
||
cursor pointer
|
||
left .2509rem
|
||
top .22rem
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .30rem, #fff, 700,)
|
||
letter-spacing .01rem
|
||
</style>
|