清洗
This commit is contained in:
@@ -14,6 +14,7 @@
|
||||
"axios": "^0.18.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"echarts": "^5.3.2",
|
||||
"echarts-liquidfill": "^3.0.6",
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"vue": "^2.5.2",
|
||||
|
||||
885
src/pages/management/Chengpin.vue
Normal file
885
src/pages/management/Chengpin.vue
Normal file
@@ -0,0 +1,885 @@
|
||||
<template>
|
||||
<section class="bg">
|
||||
<t-header title="海亮铜管件智能车间-成品仓储">
|
||||
<p class="p1" @click="toJump">海亮铜管件智能车间直盘管下料看板</p>
|
||||
</t-header>
|
||||
<div class="container">
|
||||
<div class="t_wrap">
|
||||
<div class="c_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当前库存</div>
|
||||
</div>
|
||||
<div class="item_content item_content_1">
|
||||
<div class="item_td_box_l">
|
||||
<div class="item_td_box">
|
||||
<div class="item_td_inner">
|
||||
<div class="item_td_txt1">当前库存</div>
|
||||
<div class="item_td_txt2">1000<span>万个</span></div>
|
||||
</div>
|
||||
<div class="item_td_inner">
|
||||
<div class="item_td_txt1">剩余空位</div>
|
||||
<div class="item_td_txt2">100<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_td_box_r">
|
||||
<div class="echart_zpg_wrap_1">
|
||||
<div id="echart_d1" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">库存趋势</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div id="echart_d2" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">出入库趋势</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div id="echart_d3" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top_wrap">
|
||||
<div class="left_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当天入库情况</div>
|
||||
</div>
|
||||
<div class="item_content item_content_1">
|
||||
<div class="item_td_box_l2">
|
||||
<div class="item_td_box">
|
||||
<div class="item_td_inner2">
|
||||
<div class="item_td_txt1">入库数</div>
|
||||
<div class="item_td_txt2">100<span>万个</span></div>
|
||||
</div>
|
||||
<div class="item_td_inner2">
|
||||
<div class="item_td_txt1">客户数</div>
|
||||
<div class="item_td_txt2">3<span>个</span></div>
|
||||
</div>
|
||||
<div class="item_td_inner2">
|
||||
<div class="item_td_txt1">托盘数</div>
|
||||
<div class="item_td_txt2">10<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_td_box_r2">
|
||||
<div id="echart_d4" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当天出库情况</div>
|
||||
</div>
|
||||
<div class="item_content item_content_1">
|
||||
<div class="item_td_box_l2">
|
||||
<div class="item_td_box">
|
||||
<div class="item_td_inner2">
|
||||
<div class="item_td_txt1">出库数</div>
|
||||
<div class="item_td_txt2">100<span>万个</span></div>
|
||||
</div>
|
||||
<div class="item_td_inner2">
|
||||
<div class="item_td_txt1">客户数</div>
|
||||
<div class="item_td_txt2">3<span>个</span></div>
|
||||
</div>
|
||||
<div class="item_td_inner2">
|
||||
<div class="item_td_txt1">托盘数</div>
|
||||
<div class="item_td_txt2">10<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_td_box_r2">
|
||||
<div id="echart_d5" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_wrap">
|
||||
<div class="item_wrap_l">
|
||||
<div class="item_tip item_tip_l">
|
||||
<div class="item_tip_left">库存列表</div>
|
||||
</div>
|
||||
<div class="item_content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="bottom"></section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
import 'echarts-liquidfill'
|
||||
export default {
|
||||
name: 'Chengpin',
|
||||
components: {
|
||||
THeader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
myCharts1: '',
|
||||
myCharts2: '',
|
||||
myCharts3: '',
|
||||
myCharts4: '',
|
||||
myCharts5: '',
|
||||
scollList1: [{time: '2020-1-1', p: '故障故障故障故障故障1'}, {time: '2020-1-1', p: '故障故障故障故障故障2'}, {time: '2020-1-1', p: '故障故障故障故障故障3'}, {time: '2020-1-1', p: '故障故障故障故障故障4'}, {time: '2020-1-1', p: '故障故障故障故障故障5'}, {time: '2020-1-1', p: '故障故障故障故障故障6'}],
|
||||
arrL2: [{date: '2020-1-1', elbow_qty: '1', comprehensive_qty: '2'}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption1 () {
|
||||
return {
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
this.setEchart3()
|
||||
this.setEchart4()
|
||||
this.setEchart5()
|
||||
},
|
||||
methods: {
|
||||
toJump () {
|
||||
this.$router.push('/ZhiPanGuan')
|
||||
},
|
||||
setEchart1 () {
|
||||
// let value = 0.6104
|
||||
// let option = {
|
||||
// series: [
|
||||
// {
|
||||
// name: '水球图',
|
||||
// type: 'liquidFill',
|
||||
// radius: '80%',
|
||||
// center: ['50%', '55%'],
|
||||
// waveAnimation: 10, // 动画时长
|
||||
// amplitude: 20, // 振幅
|
||||
// data: [0.3],
|
||||
// color: 'rgba(68, 197, 253,1)',
|
||||
// label: {
|
||||
// normal: {
|
||||
// color: '#44C5FD',
|
||||
// textStyle: {
|
||||
// fontSize: 18,
|
||||
// fontWeight: 'normal'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// outline: {
|
||||
// show: true,
|
||||
// borderDistance: 5,
|
||||
// itemStyle: {
|
||||
// borderColor: 'rgba(68, 197, 253,1)',
|
||||
// borderWidth: 2
|
||||
// }
|
||||
// },
|
||||
// backgroundStyle: {
|
||||
// color: 'rgba(68, 197, 253,.3)'
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
let option2 = {
|
||||
center: ['45%', '60%'],
|
||||
series: [
|
||||
{
|
||||
name: '目前完成量',
|
||||
type: 'liquidFill',
|
||||
radius: '75%',
|
||||
center: ['50%', '50%'],
|
||||
data: [0.5],
|
||||
color: 'rgba(67,209,100,1)',
|
||||
itemStyle: {
|
||||
color: 'rgba(67,209,100,1)'
|
||||
// opacity: 0.6,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
insideColor: 'transparent',
|
||||
textStyle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
show: true,
|
||||
borderDistance: 5,
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(67,209,100,1)',
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: '#bae6c5'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d1')
|
||||
this.myCharts1 = this.$echarts.init(echart)
|
||||
this.myCharts1.setOption(option2)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts1.resize()
|
||||
})
|
||||
},
|
||||
setEchart2 () {
|
||||
let date = ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7']
|
||||
let qty = [100, 80, 90, 160, 130, 166, 130]
|
||||
// this.arrL3.map(el => {
|
||||
// date.push(el.date)
|
||||
// qty.push(el.real_qty)
|
||||
// })
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 25,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: false, // 为true滚动条出现
|
||||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 9 // end百分比显示范围，endValue具体显示几个数值
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
// align: 'center'
|
||||
},
|
||||
rotate: 50
|
||||
},
|
||||
data: date
|
||||
},
|
||||
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: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#33CCCC',
|
||||
width: 2.4
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(38,191,191,0.50)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(31,89,89,0.00)'
|
||||
}
|
||||
], false)
|
||||
}
|
||||
},
|
||||
data: qty
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d2')
|
||||
if (this.myCharts2 !== '') {
|
||||
this.myCharts2.dispose()
|
||||
}
|
||||
if (echart !== null) {
|
||||
this.myCharts2 = this.$echarts.init(echart)
|
||||
this.myCharts2.setOption(option)
|
||||
// this.autoMove(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts2.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
setEchart3 () {
|
||||
let date = ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7']
|
||||
let qty = [100, 80, 90, 160, 130, 166, 130]
|
||||
let qty2 = [110, 140, 120, 100, 120, 116, 190]
|
||||
// this.arrL3.map(el => {
|
||||
// date.push(el.date)
|
||||
// qty.push(el.real_qty)
|
||||
// })
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 25,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: ['今日', '明日']
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: false, // 为true滚动条出现
|
||||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 9 // end百分比显示范围，endValue具体显示几个数值
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
// align: 'center'
|
||||
},
|
||||
rotate: 50
|
||||
},
|
||||
data: date
|
||||
},
|
||||
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: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
color: '#0E90FD',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#0E90FD',
|
||||
width: 2.4
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(38,191,191,0.50)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(31,89,89,0.00)'
|
||||
}
|
||||
], false)
|
||||
}
|
||||
},
|
||||
data: qty
|
||||
},
|
||||
{
|
||||
name: '明日',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
color: '#F4A03F',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#F4A03F',
|
||||
width: 2.4
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(138,11,191,0.50)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(131,39,200,0.00)'
|
||||
}
|
||||
], false)
|
||||
}
|
||||
},
|
||||
data: qty2
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d3')
|
||||
if (this.myCharts3 !== '') {
|
||||
this.myCharts3.dispose()
|
||||
}
|
||||
if (echart !== null) {
|
||||
this.myCharts3 = this.$echarts.init(echart)
|
||||
this.myCharts3.setOption(option)
|
||||
// this.autoMove(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts3.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
setEchart4 () {
|
||||
let total = [100, 200, 120, 133, 80, 155, 250]
|
||||
let names = [1, 2, 3, 4, 5, 6, 7]
|
||||
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
|
||||
},
|
||||
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: [
|
||||
{
|
||||
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_d4')
|
||||
this.myCharts4 = this.$echarts.init(echart)
|
||||
this.myCharts4.setOption(option)
|
||||
// this.autoMove(option, 3)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts4.resize()
|
||||
})
|
||||
},
|
||||
setEchart5 () {
|
||||
let total = [100, 200, 120, 133, 80, 155, 250]
|
||||
let names = [1, 2, 3, 4, 5, 6, 7]
|
||||
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
|
||||
},
|
||||
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: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 38,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
// color: '#67c23a',
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#F4A03F',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
// color: 'rgba(96,112,128,0.10)',
|
||||
color: 'rgba(255,255,255,0.50)',
|
||||
opacity: 0.5
|
||||
}
|
||||
]),
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
// data: [100, 51, 90, 41, 91, 61, 51]
|
||||
data: total
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d5')
|
||||
this.myCharts5 = this.$echarts.init(echart)
|
||||
this.myCharts5.setOption(option)
|
||||
// this.autoMove(option, 3)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts5.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.bg
|
||||
_wh(100%, 100%)
|
||||
overflow hidden
|
||||
.p1
|
||||
position absolute
|
||||
display block
|
||||
cursor pointer
|
||||
left .2509rem
|
||||
top .22rem
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, .30rem, #fff, 700,)
|
||||
letter-spacing .01rem
|
||||
.container
|
||||
_wh(100%, calc(100% - 1.38rem))
|
||||
padding .3rem .2509rem 0
|
||||
overflow hidden
|
||||
.bottom
|
||||
_wh(100%, .38rem)
|
||||
background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
|
||||
.top_wrap
|
||||
_wh(100%, 30%)
|
||||
clear both
|
||||
.t_wrap
|
||||
_wh(100%, 30%)
|
||||
// clear both
|
||||
display flex
|
||||
justify-content: space-between
|
||||
align-items center
|
||||
.bottom_wrap
|
||||
_wh(100%, 40%)
|
||||
.c_wrap
|
||||
width 32.5%
|
||||
.left_wrap
|
||||
float left
|
||||
width 49%
|
||||
.right_wrap
|
||||
float right
|
||||
width 49%
|
||||
.item_wrap
|
||||
_wh(100%, 100%)
|
||||
.item_wrap_l
|
||||
_wh(100%, 100%)
|
||||
.item_tip
|
||||
_wh(100%, .32rem)
|
||||
line-height .32rem
|
||||
background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
|
||||
.item_tip_l
|
||||
background-image url(../../assets/images/screen1/title_bg_3.png)
|
||||
.item_tip_left
|
||||
float left
|
||||
_wh(60%, 100%)
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, inherit, #fff, 700,)
|
||||
letter-spacing .02rem
|
||||
text-shadow 0 0 .09rem #159AFF
|
||||
padding-left .38rem
|
||||
.item_content
|
||||
_wh(100%, calc(100% - .32rem))
|
||||
padding .17rem .17rem .24rem .17rem
|
||||
background-color #011834
|
||||
.item_content_1
|
||||
clear both
|
||||
.item_td_box_l
|
||||
float left
|
||||
_wh(50%, 100%)
|
||||
padding-right .5rem
|
||||
_fj()
|
||||
.item_td_box_l2
|
||||
float left
|
||||
_wh(30%, 100%)
|
||||
padding-right .2rem
|
||||
_fj()
|
||||
.item_td_box_r
|
||||
float right
|
||||
_wh(50%, 100%)
|
||||
padding-left .5rem
|
||||
_fj()
|
||||
background center left / .02rem 1.42rem url(../../assets/images/screen1/line_3.png) no-repeat
|
||||
.item_td_box_r2
|
||||
float right
|
||||
_wh(70%, 100%)
|
||||
padding-left .2rem
|
||||
_fj()
|
||||
.item_td_box
|
||||
width 50%
|
||||
.item_td_inner
|
||||
_wh(1.8rem, .7rem)
|
||||
background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
|
||||
padding .05rem
|
||||
&:nth-child(2)
|
||||
margin-top .2rem
|
||||
.item_td_inner2
|
||||
_wh(1.8rem, .7rem)
|
||||
background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
|
||||
padding .05rem
|
||||
&:nth-child(2)
|
||||
margin-top .03rem
|
||||
margin-bottom .03rem
|
||||
.item_td_txt1
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.14rem, .3rem, #78b1de,bold,center)
|
||||
.item_td_txt2
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, .3rem, #fff,bold,center)
|
||||
span
|
||||
font-size .12rem
|
||||
padding 0 .05rem
|
||||
.echart_zpg_wrap_1
|
||||
_wh(100%, 100%)
|
||||
.item_td_box_1
|
||||
_wh(1.6rem, 1.6rem)
|
||||
_fj(center, center)
|
||||
background center bottom / 100% 100% url(../../assets/images/screen1/item_3.png) no-repeat
|
||||
.item_content_2
|
||||
position relative
|
||||
padding 0
|
||||
&::after
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
content ''
|
||||
_wh(100%, 100%)
|
||||
background-image: linear-gradient(0deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px),
|
||||
linear-gradient(90deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px);
|
||||
background-size: 28px 13px
|
||||
opacity .2
|
||||
z-index 10
|
||||
.scroll-ul_1
|
||||
li
|
||||
_wh(100%, .44rem)
|
||||
.scroll-ul_1_div
|
||||
float left
|
||||
_font(.18rem, .44rem, #fff,,center)
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
&:nth-child(1)
|
||||
color #f1c76d
|
||||
margin-right .2rem
|
||||
font-size .16rem
|
||||
</style>
|
||||
567
src/pages/management/Clean.vue
Normal file
567
src/pages/management/Clean.vue
Normal file
@@ -0,0 +1,567 @@
|
||||
<template>
|
||||
<section class="bg">
|
||||
<t-header title="海亮铜管件智能车间清洗看板">
|
||||
<p class="p1" @click="toJump">海亮铜管件智能车间直盘管下料看板</p>
|
||||
</t-header>
|
||||
<div class="container">
|
||||
<div class="top_wrap">
|
||||
<div class="left_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当天清洗统计</div>
|
||||
</div>
|
||||
<div class="item_content item_content_1">
|
||||
<div class="item_td_box_l">
|
||||
<div class="item_td_box">
|
||||
<div class="item_td_inner">
|
||||
<div class="item_td_txt1">当前已清洗</div>
|
||||
<div class="item_td_txt2">1000<span>KG</span></div>
|
||||
</div>
|
||||
<div class="item_td_inner">
|
||||
<div class="item_td_txt1">清洗规格数</div>
|
||||
<div class="item_td_txt2">15<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_td_box">
|
||||
<div class="item_td_box">
|
||||
<div class="item_td_inner">
|
||||
<div class="item_td_txt1">待清洗库存</div>
|
||||
<div class="item_td_txt2">2000<span>KG</span></div>
|
||||
</div>
|
||||
<div class="item_td_inner">
|
||||
<div class="item_td_txt1">待清洗规格</div>
|
||||
<div class="item_td_txt2">12<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_td_box_r">
|
||||
<div class="echart_zpg_wrap_1">
|
||||
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备清洗统计</div>
|
||||
</div>
|
||||
<div class="item_content item_content_1">
|
||||
<div id="echart_d10" 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_1">
|
||||
<div id="echart_d2" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_wrap">
|
||||
<div class="item_wrap_l">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">储料槽信息</div>
|
||||
</div>
|
||||
<div class="item_content"></div>
|
||||
</div>
|
||||
<div class="item_wrap_l">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当天任务列表</div>
|
||||
</div>
|
||||
<div class="item_content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="bottom"></section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
export default {
|
||||
name: 'Clean',
|
||||
components: {
|
||||
THeader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
myCharts01: '',
|
||||
myCharts10: '',
|
||||
myCharts2: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption1 () {
|
||||
return {
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.setEchart01()
|
||||
this.setEchart10()
|
||||
this.setEchart2()
|
||||
},
|
||||
methods: {
|
||||
toJump () {
|
||||
this.$router.push('/ZhiPanGuan')
|
||||
},
|
||||
setEchart01 () {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['待清洗', '已清洗'],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: ['规格数', '重量']
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '待清洗',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#FFFFFF',
|
||||
position: 'left'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
color: '#F4A03F',
|
||||
data: [-120, -82]
|
||||
},
|
||||
{
|
||||
name: '已清洗',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#FFFFFF',
|
||||
position: 'inside'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
color: '#4B97ED',
|
||||
data: [320, 162]
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d01')
|
||||
this.myCharts01 = this.$echarts.init(echart)
|
||||
this.myCharts01.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts01.resize()
|
||||
})
|
||||
},
|
||||
setEchart10 () {
|
||||
// 右3
|
||||
let total = [100, 200, 120, 133, 80, 155, 250]
|
||||
let names = [1, 2, 3, 4, 5, 6, 7]
|
||||
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
|
||||
},
|
||||
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: [
|
||||
{
|
||||
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()
|
||||
})
|
||||
},
|
||||
setEchart2 () {
|
||||
let date = ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7']
|
||||
let qty = [100, 80, 90, 160, 130, 166, 130]
|
||||
// this.arrL3.map(el => {
|
||||
// date.push(el.date)
|
||||
// qty.push(el.real_qty)
|
||||
// })
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 25,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: false, // 为true滚动条出现
|
||||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 9 // end百分比显示范围，endValue具体显示几个数值
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
// align: 'center'
|
||||
},
|
||||
rotate: 50
|
||||
},
|
||||
data: date
|
||||
},
|
||||
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: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#33CCCC',
|
||||
width: 2.4
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(38,191,191,0.50)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(31,89,89,0.00)'
|
||||
}
|
||||
], false)
|
||||
}
|
||||
},
|
||||
data: qty
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d2')
|
||||
if (this.myCharts2 !== '') {
|
||||
this.myCharts2.dispose()
|
||||
}
|
||||
if (echart !== null) {
|
||||
this.myCharts2 = this.$echarts.init(echart)
|
||||
this.myCharts2.setOption(option)
|
||||
// this.autoMove(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts2.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.bg
|
||||
_wh(100%, 100%)
|
||||
overflow hidden
|
||||
.p1
|
||||
position absolute
|
||||
display block
|
||||
cursor pointer
|
||||
left .2509rem
|
||||
top .22rem
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, .30rem, #fff, 700,)
|
||||
letter-spacing .01rem
|
||||
.container
|
||||
_wh(100%, calc(100% - 1.38rem))
|
||||
padding .3rem .2509rem 0
|
||||
overflow hidden
|
||||
.bottom
|
||||
_wh(100%, .38rem)
|
||||
background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
|
||||
.top_wrap
|
||||
_wh(100%, 100%)
|
||||
clear both
|
||||
.bottom_wrap
|
||||
_wh(100%, 40%)
|
||||
.left_wrap
|
||||
float left
|
||||
width 49%
|
||||
.right_wrap
|
||||
float right
|
||||
width 49%
|
||||
.item_wrap
|
||||
_wh(100%, 33.3%)
|
||||
.item_wrap_l
|
||||
_wh(100%, 50%)
|
||||
.item_tip
|
||||
_wh(100%, .32rem)
|
||||
line-height .32rem
|
||||
background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
|
||||
.item_tip_l
|
||||
background-image url(../../assets/images/screen1/title_bg_3.png)
|
||||
.item_tip_left
|
||||
float left
|
||||
_wh(60%, 100%)
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, inherit, #fff, 700,)
|
||||
letter-spacing .02rem
|
||||
text-shadow 0 0 .09rem #159AFF
|
||||
padding-left .38rem
|
||||
.item_content
|
||||
_wh(100%, calc(100% - .32rem))
|
||||
padding .17rem .17rem .24rem .17rem
|
||||
background-color #011834
|
||||
.item_content_1
|
||||
clear both
|
||||
.item_td_box_l
|
||||
float left
|
||||
_wh(48%, 100%)
|
||||
padding-right .3rem
|
||||
_fj()
|
||||
.item_td_box_r
|
||||
float right
|
||||
_wh(52%, 100%)
|
||||
_fj()
|
||||
.item_td_box
|
||||
width 50%
|
||||
.item_td_inner
|
||||
_wh(1.8rem, .7rem)
|
||||
background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
|
||||
padding .05rem
|
||||
&:nth-child(2)
|
||||
margin-top .2rem
|
||||
.item_td_txt1
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.14rem, .3rem, #78b1de,bold,center)
|
||||
.item_td_txt2
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, .3rem, #fff,bold,center)
|
||||
span
|
||||
font-size .12rem
|
||||
padding 0 .05rem
|
||||
.echart_zpg_wrap_1
|
||||
_wh(100%, 100%)
|
||||
.item_content_2
|
||||
position relative
|
||||
padding 0
|
||||
&::after
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
content ''
|
||||
_wh(100%, 100%)
|
||||
background-image: linear-gradient(0deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px),
|
||||
linear-gradient(90deg,#f1c76d 0px,#f1c76d 1px,transparent 1px,transparent 100px);
|
||||
background-size: 28px 13px
|
||||
opacity .2
|
||||
z-index 10
|
||||
.alarm_box_l
|
||||
position absolute
|
||||
left 10%
|
||||
top 0
|
||||
z-index 100
|
||||
_wh(35%, 100%)
|
||||
background left center / 55% auto url(../../assets/images/alarm.png) no-repeat
|
||||
.alarm_box_r
|
||||
position relative
|
||||
z-index 101
|
||||
_wh(73%, 100%)
|
||||
margin-left 27%
|
||||
padding .17rem 10% .24rem 1rem
|
||||
background-color rgba(244,247,38,.34)
|
||||
overflow hidden
|
||||
&::after
|
||||
content ''
|
||||
_wh(3px, 100%)
|
||||
position absolute
|
||||
z-index 102
|
||||
top 0
|
||||
left 0
|
||||
background rgba(244,247,38,.6)
|
||||
box-shadow 0px 0px 5px 3px rgba(244,247,38,.34)
|
||||
.scroll-ul_1
|
||||
li
|
||||
_wh(100%, .44rem)
|
||||
.scroll-ul_1_div
|
||||
float left
|
||||
_font(.18rem, .44rem, #fff,,center)
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
&:nth-child(1)
|
||||
color #f1c76d
|
||||
margin-right .2rem
|
||||
font-size .16rem
|
||||
</style>
|
||||
@@ -7,6 +7,8 @@ const DeviceScreen = r => require.ensure([], () => r(require('@page/DeviceScreen
|
||||
const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopScreen')), 'WorkshopScreen')
|
||||
const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
|
||||
|
||||
const Chengpin = r => require.ensure([], () => r(require('@page/management/Chengpin')), 'Chengpin')
|
||||
const Clean = r => require.ensure([], () => r(require('@page/management/Clean')), 'Clean')
|
||||
const ZhiPanGuan = r => require.ensure([], () => r(require('@page/management/ZhiPanGuan')), 'ZhiPanGuan')
|
||||
|
||||
Vue.use(Router)
|
||||
@@ -22,6 +24,14 @@ export default new Router({
|
||||
path: '/setup',
|
||||
component: Setup
|
||||
},
|
||||
{
|
||||
path: '/Chengpin',
|
||||
component: Chengpin
|
||||
},
|
||||
{
|
||||
path: '/Clean',
|
||||
component: Clean
|
||||
},
|
||||
{
|
||||
path: '/ZhiPanGuan',
|
||||
component: ZhiPanGuan
|
||||
|
||||
@@ -2330,6 +2330,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
|
||||
readable-stream "^2.0.0"
|
||||
stream-shift "^1.0.0"
|
||||
|
||||
echarts-liquidfill@^3.0.6:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz#4ec70f3697382d0404c95fff9f3e8dd85c8377da"
|
||||
integrity sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==
|
||||
|
||||
echarts@^5.3.2:
|
||||
version "5.3.2"
|
||||
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.3.2.tgz#0a7b3be8c48a48b2e7cb1b82121df0c208d42d2c"
|
||||
|
||||
Reference in New Issue
Block a user