推弯样式
This commit is contained in:
@@ -0,0 +1,686 @@
|
|||||||
|
<template>
|
||||||
|
<section class="bg">
|
||||||
|
<t-header title="海亮铜管件智能车间推弯生产看板">
|
||||||
|
<p class="p1" @click="toJump">海亮铜管件智能车间直盘管下料看板</p>
|
||||||
|
</t-header>
|
||||||
|
<div class="container">
|
||||||
|
<div class="fir_wrap">
|
||||||
|
<div class="item_wrap_l">
|
||||||
|
<div class="item_tip item_tip_l">
|
||||||
|
<div class="item_tip_left">盘管下料</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content item_content_1">
|
||||||
|
<div class="item_wrap_l item_wrap_flex">
|
||||||
|
<div class="item_td_box">
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">计划生产</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">已生产</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_box item_td_box_1">
|
||||||
|
<div class="echart_zpg_wrap_1">
|
||||||
|
<div id="echart_zpg_1" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sec_wrap">
|
||||||
|
<div class="left_wrap">
|
||||||
|
<div class="item_wrap_l">
|
||||||
|
<div class="item_tip">
|
||||||
|
<div class="item_tip_left">设备报警信息</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content item_content_2">
|
||||||
|
<div class="alarm_box_l"></div>
|
||||||
|
<div class="alarm_box_r">
|
||||||
|
<vue-seamless-scroll class="scroll_wrap" :data="scollList1" :class-option="defaultOption1">
|
||||||
|
<ul class="scroll-ul_1">
|
||||||
|
<li v-for="(e, i) in scollList1" :key="i">
|
||||||
|
<div class="scroll-ul_1_div">{{e.time}}</div>
|
||||||
|
<div class="scroll-ul_1_div">{{e.p}}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</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 id="echart_zpg_5" style="width: 100%; height: 100%"></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 item_content_3">
|
||||||
|
<div class="scroll_wrap">
|
||||||
|
<ul class="scroll_tab">
|
||||||
|
<li>序号</li>
|
||||||
|
<li>工单号</li>
|
||||||
|
<li>物料</li>
|
||||||
|
<li>规格</li>
|
||||||
|
<li>数量</li>
|
||||||
|
<li>已生产</li>
|
||||||
|
<li>单位</li>
|
||||||
|
<li>机台</li>
|
||||||
|
<li>归属订单</li>
|
||||||
|
<li>状态</li>
|
||||||
|
<li>计划开始</li>
|
||||||
|
<li>开始时间</li>
|
||||||
|
<li>结束时间</li>
|
||||||
|
</ul>
|
||||||
|
<div class="scroll_container">
|
||||||
|
<vue-seamless-scroll :data="scollList2" :class-option="defaultOption2">
|
||||||
|
<ul class="scroll-ul_2">
|
||||||
|
<li v-for="(e, i) in scollList2" :key="i">
|
||||||
|
<div class="scroll-ul_2_div">{{i + 1}}</div>
|
||||||
|
<div class="scroll-ul_2_div">{{e.data1}}</div>
|
||||||
|
<div class="scroll-ul_2_div">盘管双斜</div>
|
||||||
|
<div class="scroll-ul_2_div">规格1</div>
|
||||||
|
<div class="scroll-ul_2_div">15000</div>
|
||||||
|
<div class="scroll-ul_2_div">15010</div>
|
||||||
|
<div class="scroll-ul_2_div">个</div>
|
||||||
|
<div class="scroll-ul_2_div">盘管双斜1</div>
|
||||||
|
<div class="scroll-ul_2_div">{{e.data1}}</div>
|
||||||
|
<div class="scroll-ul_2_div scroll_status_wrap"><span :style="{'background-color': ['#33CCCC', '#EAAD24', '#0E90FD', '#c9c9c9'][Number(e.device_status)]}"></span>已完成</div>
|
||||||
|
<div class="scroll-ul_2_div">08:00:00</div>
|
||||||
|
<div class="scroll-ul_2_div">08:00:00</div>
|
||||||
|
<div class="scroll-ul_2_div">08:00:00</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section class="bottom"></section>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import THeader from '@components/header.vue'
|
||||||
|
export default {
|
||||||
|
name: 'TuiWan',
|
||||||
|
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'}],
|
||||||
|
echartData1: [{data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}],
|
||||||
|
scollList2: [{data1: 'GD00001', device_status: '0'}, {data1: 'GD00001', device_status: '1'}, {data1: 'GD00001', device_status: '2'}, {data1: 'GD00001', device_status: '3'}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
defaultOption1 () {
|
||||||
|
return {
|
||||||
|
step: 0.4, // 数值越大速度滚动越快
|
||||||
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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: 6, // 开始无缝滚动的数据量 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()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toJump () {
|
||||||
|
this.$router.push('/TuiWan')
|
||||||
|
},
|
||||||
|
setEchart1 () {
|
||||||
|
// let value = Number(this.objL1.finish_rate)
|
||||||
|
let value = 50
|
||||||
|
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 option1 = JSON.parse(JSON.stringify(option))
|
||||||
|
let option2 = JSON.parse(JSON.stringify(option))
|
||||||
|
let option3 = JSON.parse(JSON.stringify(option))
|
||||||
|
let option4 = JSON.parse(JSON.stringify(option))
|
||||||
|
option1.title[0].text = '{a|' + '10' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
option2.title[0].text = '{a|' + '20' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
option3.title[0].text = '{a|' + '30' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
option4.title[0].text = '{a|' + '40' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
let echart1 = document.getElementById('echart_zpg_1')
|
||||||
|
let echart2 = document.getElementById('echart_zpg_2')
|
||||||
|
let echart3 = document.getElementById('echart_zpg_3')
|
||||||
|
let echart4 = document.getElementById('echart_zpg_4')
|
||||||
|
if (this.myCharts1 !== '') {
|
||||||
|
this.myCharts1.dispose()
|
||||||
|
}
|
||||||
|
if (this.myCharts2 !== '') {
|
||||||
|
this.myCharts2.dispose()
|
||||||
|
}
|
||||||
|
if (this.myCharts3 !== '') {
|
||||||
|
this.myCharts3.dispose()
|
||||||
|
}
|
||||||
|
if (this.myCharts4 !== '') {
|
||||||
|
this.myCharts4.dispose()
|
||||||
|
}
|
||||||
|
if (echart1 !== null) {
|
||||||
|
this.myCharts1 = this.$echarts.init(echart1)
|
||||||
|
this.myCharts1.setOption(option1)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts1.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (echart2 !== null) {
|
||||||
|
this.myCharts2 = this.$echarts.init(echart2)
|
||||||
|
this.myCharts2.setOption(option2)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts2.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (echart3 !== null) {
|
||||||
|
this.myCharts3 = this.$echarts.init(echart3)
|
||||||
|
this.myCharts3.setOption(option3)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts3.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (echart4 !== null) {
|
||||||
|
this.myCharts4 = this.$echarts.init(echart4)
|
||||||
|
this.myCharts4.setOption(option4)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts4.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEchart2 () {
|
||||||
|
let data1 = []
|
||||||
|
let data2 = []
|
||||||
|
let data3 = []
|
||||||
|
let data4 = []
|
||||||
|
let device = []
|
||||||
|
this.echartData1.map(e => {
|
||||||
|
data1.push(e.data1)
|
||||||
|
data2.push(e.data2)
|
||||||
|
data3.push(e.data3)
|
||||||
|
data4.push(e.data4)
|
||||||
|
device.push(e.device)
|
||||||
|
})
|
||||||
|
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'}}, {name: '关机', itemStyle: {color: '#c9c9c9'}}]
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '关机',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#c9c9c9',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(148,145,145,0.25)',
|
||||||
|
opacity: 0.25
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('echart_zpg_5')
|
||||||
|
if (this.myCharts5 !== '') {
|
||||||
|
this.myCharts5.dispose()
|
||||||
|
}
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts5 = this.$echarts.init(echart)
|
||||||
|
this.myCharts5.setOption(option)
|
||||||
|
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
|
||||||
|
.fir_wrap
|
||||||
|
_wh(100%, 25%)
|
||||||
|
.sec_wrap
|
||||||
|
_wh(100%, 35%)
|
||||||
|
clear both
|
||||||
|
.bottom_wrap
|
||||||
|
_wh(100%, calc(40% - .3rem))
|
||||||
|
margin-top .3rem
|
||||||
|
.left_wrap
|
||||||
|
float left
|
||||||
|
width 49%
|
||||||
|
.right_wrap
|
||||||
|
float right
|
||||||
|
width 49%
|
||||||
|
.item_wrap
|
||||||
|
_wh(100%, 50%)
|
||||||
|
.item_wrap_l
|
||||||
|
_wh(100%, 100%)
|
||||||
|
.item_wrap_flex
|
||||||
|
_fj(flex-start)
|
||||||
|
.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_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
|
||||||
|
width auto
|
||||||
|
_fj()
|
||||||
|
.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-left .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(80%, 80%)
|
||||||
|
.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
|
||||||
|
margin-left .2rem
|
||||||
|
.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)
|
||||||
|
&::after
|
||||||
|
content ''
|
||||||
|
_wh(3px, 100%)
|
||||||
|
position absolute
|
||||||
|
z-index 102
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
background rgba(244,247,38,.55)
|
||||||
|
box-shadow 0px 0px 5px 3px rgba(244,247,38,.34)
|
||||||
|
.scroll_wrap
|
||||||
|
_wh(100%, 100%)
|
||||||
|
background-image linear-gradient(180deg, rgba(55,141,186,0.00) 0%, rgba(40,183,235,0.10) 100%)
|
||||||
|
overflow hidden
|
||||||
|
.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
|
||||||
|
.item_content_3
|
||||||
|
height: calc(100% - 0.38rem)
|
||||||
|
padding 0
|
||||||
|
margin-top .06rem
|
||||||
|
border 0.01rem solid rgba(8,205,248,0.3)
|
||||||
|
.scroll_tab
|
||||||
|
_wh(100%, .4rem)
|
||||||
|
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||||||
|
li
|
||||||
|
float left
|
||||||
|
width 8%
|
||||||
|
_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(1)
|
||||||
|
width 4%
|
||||||
|
.scroll_container
|
||||||
|
width 100%
|
||||||
|
height calc(100% - .4rem)
|
||||||
|
overflow hidden
|
||||||
|
.scroll-ul_2
|
||||||
|
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_2_div
|
||||||
|
float left
|
||||||
|
_wh(8%, .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(1)
|
||||||
|
width 4%
|
||||||
|
.scroll_status_wrap
|
||||||
|
position relative
|
||||||
|
span
|
||||||
|
position absolute
|
||||||
|
left 25%
|
||||||
|
_wh(7px, 7px)
|
||||||
|
border-radius 50%
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopSc
|
|||||||
const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
|
const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
|
||||||
|
|
||||||
const ZhiPanGuan = r => require.ensure([], () => r(require('@page/management/ZhiPanGuan')), 'ZhiPanGuan')
|
const ZhiPanGuan = r => require.ensure([], () => r(require('@page/management/ZhiPanGuan')), 'ZhiPanGuan')
|
||||||
|
const TuiWan = r => require.ensure([], () => r(require('@page/management/TuiWan')), 'TuiWan')
|
||||||
|
|
||||||
Vue.use(Router)
|
Vue.use(Router)
|
||||||
|
|
||||||
@@ -26,6 +27,10 @@ export default new Router({
|
|||||||
path: '/ZhiPanGuan',
|
path: '/ZhiPanGuan',
|
||||||
component: ZhiPanGuan
|
component: ZhiPanGuan
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/TuiWan',
|
||||||
|
component: TuiWan
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/MonitoringScreen',
|
path: '/MonitoringScreen',
|
||||||
component: MonitoringScreen
|
component: MonitoringScreen
|
||||||
|
|||||||
Reference in New Issue
Block a user