设备管理综合查询
This commit is contained in:
BIN
src/assets/images/bg5.png
Normal file
BIN
src/assets/images/bg5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
src/assets/images/item_1.png
Normal file
BIN
src/assets/images/item_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/item_2.png
Normal file
BIN
src/assets/images/item_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/images/item_3.png
Normal file
BIN
src/assets/images/item_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/images/item_4.png
Normal file
BIN
src/assets/images/item_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 871 B |
BIN
src/assets/images/item_5.png
Normal file
BIN
src/assets/images/item_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
738
src/pages/DeviceManage.vue
Normal file
738
src/pages/DeviceManage.vue
Normal file
@@ -0,0 +1,738 @@
|
||||
<template>
|
||||
<section>
|
||||
<t-header title="设备管理综合查询"></t-header>
|
||||
<div class="goods_shelves">
|
||||
<div class="yard-wrap">
|
||||
<div class="content_left">
|
||||
<div class="item_wrap item_wrap_3">
|
||||
<div class="tip_item">
|
||||
<p>每日开机时长</p>
|
||||
<div class="tip_item_bg1"></div>
|
||||
</div>
|
||||
<div class="echart_wrap">
|
||||
<div id="echart_d2" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap item_wrap_1">
|
||||
<div class="tip_item">
|
||||
<p>设备运行状态</p>
|
||||
<div class="tip_item_bg1"></div>
|
||||
</div>
|
||||
<div class="grid_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>事业部</li>
|
||||
<li>正常台数</li>
|
||||
<li>故障台数</li>
|
||||
<li>委外台数</li>
|
||||
<li>保养台数</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||||
<ul class="content-block-scroll-ul_1">
|
||||
<li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
|
||||
<div>{{e.id}}</div>
|
||||
<div>{{e.material_code}}</div>
|
||||
<div>{{e.pcsn}}</div>
|
||||
<div>{{e.workorder_qty}}</div>
|
||||
<div>{{e.product_qty}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap item_wrap_1">
|
||||
<div class="tip_item">
|
||||
<p>设备年计划保养状态</p>
|
||||
<div class="tip_item_bg1"></div>
|
||||
</div>
|
||||
<div class="grid_wrap">
|
||||
<ul class="scroll_tab_1 scroll_tab_2">
|
||||
<li>事业部</li>
|
||||
<li>需保养台数</li>
|
||||
<li>已保养台数</li>
|
||||
<li>在保养台数</li>
|
||||
<li>未保养台数</li>
|
||||
<li>完成率(%)</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="array1" :class-option="defaultOption2">
|
||||
<ul class="content-block-scroll-ul_1 content-block-scroll-ul_2">
|
||||
<li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
|
||||
<div>{{e.id}}</div>
|
||||
<div>{{e.material_code}}</div>
|
||||
<div>{{e.pcsn}}</div>
|
||||
<div>{{e.workorder_qty}}</div>
|
||||
<div>{{e.product_qty}}</div>
|
||||
<div>{{e.ee}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_center">
|
||||
<div class="center_wrap">
|
||||
<div class="item_wrap item_wrap_3">
|
||||
<div class="tip_item">
|
||||
<p>设备数量</p>
|
||||
<div class="tip_item_bg1"></div>
|
||||
</div>
|
||||
<div class="echart_wrap echart_wrap_1">
|
||||
<div class="echart_wrap_2">
|
||||
<div class="echart_wrap_l">
|
||||
<div class="num_items">
|
||||
<div class="right_1_up_right_item">
|
||||
<p class="right_1_up_p1">总设备台数</p>
|
||||
<p class="right_1_up_p2">100<span></span></p>
|
||||
</div>
|
||||
<div class="right_1_up_right_item">
|
||||
<p class="right_1_up_p1">在用台数</p>
|
||||
<p class="right_1_up_p2">100<span></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echart_wrap_l_wrap">
|
||||
<div id="echart_d4" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echart_wrap_r">
|
||||
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1" :key="i">
|
||||
<div class="right_1_down_inner_3_l">
|
||||
<span><i :style="{'background-color': e.color}"></i></span>
|
||||
<span>{{e.material_spec}}</span>
|
||||
</div>
|
||||
<div class="right_1_down_inner_3_r">
|
||||
<span>{{e.real_qty}}</span>
|
||||
<span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap item_wrap_2">
|
||||
<div class="tip_item">
|
||||
<p>年保养计划监控</p>
|
||||
<div class="tip_item_bg1"></div>
|
||||
</div>
|
||||
<div class="grid_wrap grid_wrap_1">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>事业部</li>
|
||||
<li>正常台数</li>
|
||||
<li>故障台数</li>
|
||||
<li>委外台数</li>
|
||||
<li>保养台数</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||||
<ul class="content-block-scroll-ul_1">
|
||||
<li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
|
||||
<div>{{e.id}}</div>
|
||||
<div>{{e.material_code}}</div>
|
||||
<div>{{e.pcsn}}</div>
|
||||
<div>{{e.workorder_qty}}</div>
|
||||
<div>{{e.product_qty}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_left">
|
||||
<div class="item_wrap item_wrap_3">
|
||||
<div class="tip_item">
|
||||
<p>年故障类别TOP10</p>
|
||||
<div class="tip_item_bg1"></div>
|
||||
</div>
|
||||
<div class="echart_wrap">
|
||||
<div id="echart_d3" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap item_wrap_4">
|
||||
<div class="tip_item">
|
||||
<p>近30天班组情况</p>
|
||||
<div class="tip_item_bg1"></div>
|
||||
</div>
|
||||
<div class="grid_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>事业部</li>
|
||||
<li>正常台数</li>
|
||||
<li>故障台数</li>
|
||||
<li>委外台数</li>
|
||||
<li>保养台数</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||||
<ul class="content-block-scroll-ul_1">
|
||||
<li v-for="(e, i) in array1" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
|
||||
<div>{{e.id}}</div>
|
||||
<div>{{e.material_code}}</div>
|
||||
<div>{{e.pcsn}}</div>
|
||||
<div>{{e.workorder_qty}}</div>
|
||||
<div>{{e.product_qty}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
export default {
|
||||
name: 'DeviceManage',
|
||||
components: {
|
||||
THeader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
myCharts1: '',
|
||||
myCharts2: '',
|
||||
myCharts3: '',
|
||||
array1: [{id: '1dfk;kf;'}, {id: '1dfk;kf;'}, {id: '1dfk;kf;'}],
|
||||
colors: ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94'],
|
||||
arrR1: [{material_spec: 'aa', real_qty: '10', color: '#E0CA07'}, {material_spec: 'bb', real_qty: '20', color: '#007744'}, {material_spec: 'cc', real_qty: '30', color: '#C0C0C0'}, {material_spec: 'dd', real_qty: '40', color: '#B68845'}, {material_spec: 'ee', real_qty: '50', color: '#07E083'}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption1 () {
|
||||
return {
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 8, // 开始无缝滚动的数据量 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)
|
||||
}
|
||||
},
|
||||
defaultOption2 () {
|
||||
return {
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 8, // 开始无缝滚动的数据量 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()
|
||||
},
|
||||
methods: {
|
||||
setEchart1 () {
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 25,
|
||||
right: 25,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 16,
|
||||
lineHeight: 20
|
||||
},
|
||||
itemGap: 20,
|
||||
itemHeight: 8,
|
||||
data: ['a', 'b', 'c']
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// show: false, // 为true滚动条出现
|
||||
// type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||||
// startValue: 0, // 从头开始。
|
||||
// endValue: 5 // 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: ['2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1', '2022/8/1']
|
||||
},
|
||||
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: 'a',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#0E90FD',
|
||||
width: 2.4
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
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
|
||||
}
|
||||
], false)
|
||||
}
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
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: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'c',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#B68845',
|
||||
width: 2.4
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
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
|
||||
}
|
||||
], false)
|
||||
}
|
||||
},
|
||||
data: [120, 180, 91, 134, 190, 130, 310]
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d2')
|
||||
this.myCharts1 = this.$echarts.init(echart)
|
||||
this.myCharts1.setOption(option)
|
||||
// this.autoMove(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts1.resize()
|
||||
})
|
||||
},
|
||||
setEchart2 () {
|
||||
let option = {
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 25,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// show: false, // 为true滚动条出现
|
||||
// type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||||
// startValue: 0, // 从头开始。
|
||||
// endValue: 5 // end百分比显示范围，endValue具体显示几个数值
|
||||
// }
|
||||
// ],
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 250,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
// align: 'center'
|
||||
}
|
||||
},
|
||||
formatter: '{value}'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
data: ['aa', 'bb']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: '30',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right', // 位置
|
||||
color: '#A7D6F4',
|
||||
fontSize: 14,
|
||||
distance: 15, // 距离
|
||||
formatter: '{c}' // 这里是数据展示的时候显示的数据
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#33CCCC'
|
||||
}
|
||||
},
|
||||
data: ['120', '30']
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d3')
|
||||
this.myCharts2 = this.$echarts.init(echart)
|
||||
this.myCharts2.setOption(option)
|
||||
// this.autoMove(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts2.resize()
|
||||
})
|
||||
},
|
||||
setEchart3 () {
|
||||
let arr = []
|
||||
this.arrR1.map(el => {
|
||||
arr.push({name: el.material_spec, value: parseFloat(el.real_qty), itemStyle: {color: el.color}})
|
||||
})
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '区域',
|
||||
type: 'pie',
|
||||
radius: ['70%', '95%'],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'radius',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: arr
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d4')
|
||||
if (this.myCharts3 !== '') {
|
||||
this.myCharts3.dispose()
|
||||
}
|
||||
if (echart !== null) {
|
||||
this.myCharts3 = this.$echarts.init(echart)
|
||||
this.myCharts3.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts3.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.goods_shelves
|
||||
_wh(100%, calc(100% - .75rem))
|
||||
padding .3rem .3rem .4rem .3rem
|
||||
_bis('../assets/images/item_2.png', 100%, auto, center, bottom)
|
||||
.yard-wrap
|
||||
_wh(100%, 100%)
|
||||
clear both
|
||||
.content_left
|
||||
float left
|
||||
_wh(28%, 100%)
|
||||
border-top .03rem solid #0092df
|
||||
background linear-gradient(rgba(15, 44, 84, 0.6) 0%, rgb(0, 24, 57) 100%)
|
||||
overflow hidden
|
||||
.content_center
|
||||
float left
|
||||
_wh(calc(44% - .4rem), 100%)
|
||||
margin 0 .2rem
|
||||
padding .32rem .2rem .2rem .2rem
|
||||
overflow hidden
|
||||
_bis('../assets/images/item_1.png', 100%, 100%)
|
||||
.center_wrap
|
||||
_wh(100%, 100%)
|
||||
.item_wrap
|
||||
_wh(100%, 45%)
|
||||
.item_wrap_1
|
||||
height 30%
|
||||
.item_wrap_2
|
||||
height calc(60% - .25rem)
|
||||
margin-top .25rem
|
||||
.item_wrap_3
|
||||
height 40%
|
||||
.item_wrap_4
|
||||
height 60%
|
||||
.tip_item
|
||||
position relative
|
||||
height .42rem
|
||||
padding 0 .2rem
|
||||
background linear-gradient(0deg, rgb(15, 44, 84) 0%, rgb(0, 8, 50) 100%)
|
||||
p
|
||||
display inline-block
|
||||
_font(.18rem, .25rem, #fff)
|
||||
border-bottom .01rem solid #53cdf9
|
||||
padding-top .06rem
|
||||
.tip_item_bg1
|
||||
position absolute
|
||||
bottom 0.08rem
|
||||
left .2rem
|
||||
_wh(.05rem, .05rem)
|
||||
background-color #53cdf9
|
||||
transform rotate(45deg)
|
||||
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
||||
.echart_wrap
|
||||
_wh(100%, calc(100% - .5rem))
|
||||
padding .2rem
|
||||
.echart_wrap_1
|
||||
padding-bottom 0
|
||||
.echart_wrap_2
|
||||
_wh(100%, 100%)
|
||||
_fj()
|
||||
.grid_wrap
|
||||
_wh(calc(100% - .4rem), calc(100% - .7rem))
|
||||
margin .08rem .2rem .2rem .2rem
|
||||
border .01rem solid rgba(8,205,248,0.3)
|
||||
.grid_wrap_1
|
||||
margin-left 0
|
||||
margin-right 0
|
||||
width 100%
|
||||
.scroll_tab_1
|
||||
_wh(100%, .4rem)
|
||||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||||
li
|
||||
float left
|
||||
width 20%
|
||||
_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
|
||||
.scroll_tab_2 li
|
||||
width calc(100% / 6)
|
||||
.content-block-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)
|
||||
&:last-child
|
||||
border-bottom none
|
||||
.content-block-scroll-ul_1
|
||||
li
|
||||
div
|
||||
float left
|
||||
_wh(20%, .44rem)
|
||||
_fj(center)
|
||||
_font(.14rem, .44rem, #fff,,center)
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
white-space nowrap
|
||||
padding 0 .02rem
|
||||
overflow hidden
|
||||
.content-block-scroll-ul_2 li div
|
||||
width calc(100% / 6)
|
||||
.num_items
|
||||
_wh(100%, .6rem)
|
||||
_fj()
|
||||
.right_1_up_right_item
|
||||
_wh(1.7rem, .6rem)
|
||||
background center bottom / 100% 100% url(../assets/images/item_3.png) no-repeat
|
||||
_fj(space-evenly)
|
||||
flex-direction column
|
||||
&:nth-child(2)
|
||||
margin-left .2rem
|
||||
.right_1_up_p1
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.14rem, .14rem, #78B1DE, 700, center)
|
||||
.right_1_up_p2
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, .18rem, #fff, 700, center)
|
||||
span
|
||||
_font(.12rem, .18rem, #fff, 700, center)
|
||||
padding-left .1rem
|
||||
.echart_wrap_l
|
||||
_wh(60%, 100%)
|
||||
padding-right .4rem
|
||||
background right center / .02rem 100% url(../assets/images/item_4.png) no-repeat
|
||||
.echart_wrap_l_wrap
|
||||
_wh(100%, calc(100% - .6rem))
|
||||
padding-top .2rem
|
||||
.echart_wrap_r
|
||||
_wh(40%, 100%)
|
||||
padding-left .2rem
|
||||
_fj(,flex-start)
|
||||
flex-direction column
|
||||
.right_1_down_inner_3_i
|
||||
_wh(100%, .4rem)
|
||||
_fj()
|
||||
background center bottom / 100% 100% url(../assets/images/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, .4rem)
|
||||
margin-left .15rem
|
||||
_fj()
|
||||
overflow hidden
|
||||
i
|
||||
display block
|
||||
_wh(.0725rem, .0725rem)
|
||||
border-radius 100%
|
||||
&:nth-child(2)
|
||||
_wh(calc(100% - 0.2825rem), .4rem)
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.14rem, .4rem, #fff,400,)
|
||||
margin-left .06rem
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
.right_1_down_inner_3_r
|
||||
_wh(50%, 100%)
|
||||
line-height .4rem
|
||||
overflow hidden
|
||||
text-align right
|
||||
span
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.14rem, .4rem, #fff,700,)
|
||||
&:nth-child(1)
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, .4rem, #00D5FF,700,)
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@ import Router from 'vue-router'
|
||||
const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
|
||||
const TaskScreen = r => require.ensure([], () => r(require('@page/TaskScreen')), 'TaskScreen')
|
||||
const WorkStep = r => require.ensure([], () => r(require('@page/WorkStep')), 'WorkStep')
|
||||
const DeviceManage = r => require.ensure([], () => r(require('@page/DeviceManage')), 'DeviceManage')
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@@ -25,6 +26,10 @@ export default new Router({
|
||||
{
|
||||
path: '/workstep',
|
||||
component: WorkStep
|
||||
},
|
||||
{
|
||||
path: '/DeviceManage',
|
||||
component: DeviceManage
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user