1483 lines
41 KiB
Vue
1483 lines
41 KiB
Vue
|
<template>
|
||
|
|
<div class="n_container">
|
||
|
|
<div class="n_header">
|
||
|
|
<div class="n_header_h1">
|
||
|
|
<h1>车间物流监控</h1>
|
||
|
|
</div>
|
||
|
|
<v-time></v-time>
|
||
|
|
<div class="n_header_info">
|
||
|
|
<div class="exit_btn iconfont" @click.stop="$router.push('/setup')"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="left_bg"></div>
|
||
|
|
<div class="right_bg"></div>
|
||
|
|
<div class="button_bg"></div>
|
||
|
|
<div class="n_body_container">
|
||
|
|
<div class="n_left_wraper">
|
||
|
|
<div class="w_wraper">
|
||
|
|
<div class="item_wraper">
|
||
|
|
<div class="title_wraper">
|
||
|
|
<p>原料库存</p>
|
||
|
|
</div>
|
||
|
|
<div class="content_wraper content_wraper_2">
|
||
|
|
<div class="pie_wraper">
|
||
|
|
<div id="home_1" style="width: 100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item_wraper">
|
||
|
|
<div class="title_wraper">
|
||
|
|
<p>当日出入</p>
|
||
|
|
</div>
|
||
|
|
<div class="content_wraper">
|
||
|
|
<div class="w_wraper">
|
||
|
|
<div id="home_2" style="width: 100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item_wraper">
|
||
|
|
<div class="title_wraper">
|
||
|
|
<p>历史分析</p>
|
||
|
|
</div>
|
||
|
|
<div class="content_wraper">
|
||
|
|
<div class="w_wraper">
|
||
|
|
<div id="home_3" style="width: 100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="n-center_wraper">
|
||
|
|
<div class="w_wraper">
|
||
|
|
<div class="item_wraper item_wraper_1">
|
||
|
|
<div class="title_wraper title_wraper_1">
|
||
|
|
<p>设备监控</p>
|
||
|
|
</div>
|
||
|
|
<div class="content_wraper content_wraper_3">
|
||
|
|
<div class="agv_wrap">
|
||
|
|
<div class="agv_item" v-for="(e , i) in agvList" :key="'agv' + i">
|
||
|
|
<div class="agv_left">
|
||
|
|
<div class="agv_img"></div>
|
||
|
|
<p class="p1">{{ e.device_name }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_info">
|
||
|
|
<div class="agv_txt">
|
||
|
|
<p class="p2">任务号</p>
|
||
|
|
<p class="p3">{{ e.task_code }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_txt">
|
||
|
|
<p class="p2">电量</p>
|
||
|
|
<p class="p3">{{ e.battery_level }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_txt">
|
||
|
|
<p class="p2">状态</p>
|
||
|
|
<p class="p3">{{ e.status }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_txt">
|
||
|
|
<p class="p2">提示信息</p>
|
||
|
|
<p class="p3">{{ e.message }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="agv_wrap rgv_wrap">
|
||
|
|
<div class="agv_item rgv_item" v-for="(e , i) in rgvList" :key="'rgv' + i">
|
||
|
|
<div class="agv_left rgv_left">
|
||
|
|
<div class="agv_img rgv_img"></div>
|
||
|
|
<p class="p1">{{ e.device_name }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="rgv_info">
|
||
|
|
<div class="agv_txt rgv_txt">
|
||
|
|
<p class="p2">当前位置</p>
|
||
|
|
<p class="p3">{{ e.current_loc }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_txt rgv_txt">
|
||
|
|
<p class="p2">目标位置
|
||
|
|
</p>
|
||
|
|
<p class="p3">{{ e.target_loc }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_txt rgv_txt">
|
||
|
|
<p class="p2">电量</p>
|
||
|
|
<p class="p3">{{ e.battery_level }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_txt rgv_txt">
|
||
|
|
<p class="p2">状态</p>
|
||
|
|
<p class="p3">{{ e.status }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="agv_txt rgv_txt">
|
||
|
|
<p class="p2">提示信息</p>
|
||
|
|
<p class="p3">{{ e.message }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item_wraper">
|
||
|
|
<div class="title_wraper title_wraper_1">
|
||
|
|
<p>当日搬运任务</p>
|
||
|
|
</div>
|
||
|
|
<div class="content_wraper" style="padding: 0">
|
||
|
|
<div class="scroll_wrap">
|
||
|
|
<ul class="scroll_tab_1">
|
||
|
|
<li>创建时间</li>
|
||
|
|
<li>设备</li>
|
||
|
|
<li>起点位置</li>
|
||
|
|
<li>终点位置</li>
|
||
|
|
<li>物料号</li>
|
||
|
|
<li>物料名称</li>
|
||
|
|
<li>数量</li>
|
||
|
|
<li>重量</li>
|
||
|
|
<li>任务状态</li>
|
||
|
|
</ul>
|
||
|
|
<div class="scroll_container_1">
|
||
|
|
<vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
|
||
|
|
<ul class="scroll-ul_1">
|
||
|
|
<li v-for="(e, i) in taskList" :key="i">
|
||
|
|
<div class="scroll-ul_1_div">{{e.create_time}}</div>
|
||
|
|
<div class="scroll-ul_1_div">{{e.carno}}</div>
|
||
|
|
<!-- <div class="scroll-ul_1_div">
|
||
|
|
<span class="state" :class="'state_' + e.status"></span>
|
||
|
|
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
|
||
|
|
</div> -->
|
||
|
|
<div class="scroll-ul_1_div">{{e.start_point_code}}</div>
|
||
|
|
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
||
|
|
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
||
|
|
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
||
|
|
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
||
|
|
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
||
|
|
<div class="scroll-ul_1_div">{{e.task_status}}</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</vue-seamless-scroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="n_right_wraper">
|
||
|
|
<div class="w_wraper">
|
||
|
|
<div class="item_wraper">
|
||
|
|
<div class="title_wraper">
|
||
|
|
<p>当日生产统计</p>
|
||
|
|
</div>
|
||
|
|
<div class="content_wraper">
|
||
|
|
<div class="w_wraper">
|
||
|
|
<div id="home_4" style="width: 100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item_wraper item_wraper_1">
|
||
|
|
<div class="title_wraper">
|
||
|
|
<p>当日车间上下料</p>
|
||
|
|
</div>
|
||
|
|
<div class="content_wraper">
|
||
|
|
<div class="w_wraper">
|
||
|
|
<div id="home_5" style="width: 100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import { inventoryAnalysis, inventoryIOAnalysis, historyInventoryIOAnalysis, todayProduceStatistic, todayLoadingAndUnloadingStatistics, todayTask, agvInfo, rgvInfo } from '@js/mork2.js'
|
||
|
|
import { inventoryAnalysis, inventoryIOAnalysis, historyInventoryIOAnalysis, todayProduceStatistic, todayLoadingAndUnloadingStatistics, todayTask, agvInfo, rgvInfo } from '@js/getData2.js'
|
||
|
|
import symbol3 from '@img/symbol_3.png'
|
||
|
|
import symbol4 from '@img/symbol_4.png'
|
||
|
|
import lineSelected from '@img/line_selected.png'
|
||
|
|
import vTime from '@components/time.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
vTime
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
interTime: this.$store.getters.setTime,
|
||
|
|
timer: null,
|
||
|
|
chart1Timer: null,
|
||
|
|
chart2Timer: null,
|
||
|
|
chart3Timer: null,
|
||
|
|
chart5Timer: null,
|
||
|
|
materList: [], // 原料库存
|
||
|
|
curList: [], // 当日出入
|
||
|
|
historyList: [], // 历史分析
|
||
|
|
statisList: [], // 当日生产统计
|
||
|
|
loadList: [], // 当日车间上下料
|
||
|
|
taskList: [], // 当日搬运任务
|
||
|
|
agvList: [],
|
||
|
|
rgvList: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
this.refresh()
|
||
|
|
},
|
||
|
|
beforeDestroy () {
|
||
|
|
clearInterval(this.timer)
|
||
|
|
clearInterval(this.chart1Timer)
|
||
|
|
clearInterval(this.chart2Timer)
|
||
|
|
clearInterval(this.chart3Timer)
|
||
|
|
clearInterval(this.chart5Timer)
|
||
|
|
this.timer = null
|
||
|
|
this.chart1Timer = null
|
||
|
|
this.chart2Timer = null
|
||
|
|
this.chart3Timer = null
|
||
|
|
this.chart5Timer = null
|
||
|
|
},
|
||
|
|
destroyed () {
|
||
|
|
clearInterval(this.timer)
|
||
|
|
clearInterval(this.chart1Timer)
|
||
|
|
clearInterval(this.chart2Timer)
|
||
|
|
clearInterval(this.chart3Timer)
|
||
|
|
clearInterval(this.chart5Timer)
|
||
|
|
this.timer = null
|
||
|
|
this.chart1Timer = null
|
||
|
|
this.chart2Timer = null
|
||
|
|
this.chart3Timer = null
|
||
|
|
this.chart5Timer = null
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
refresh () {
|
||
|
|
this._inventoryAnalysis()
|
||
|
|
this._inventoryIOAnalysis()
|
||
|
|
this._historyInventoryIOAnalysis()
|
||
|
|
this._todayProduceStatistic()
|
||
|
|
this._todayLoadingAndUnloadingStatistics()
|
||
|
|
this._todayTask()
|
||
|
|
this._agvInfo()
|
||
|
|
this._rgvInfo()
|
||
|
|
this.timer = setInterval(() => {
|
||
|
|
this._inventoryAnalysis()
|
||
|
|
this._inventoryIOAnalysis()
|
||
|
|
this._historyInventoryIOAnalysis()
|
||
|
|
this._todayProduceStatistic()
|
||
|
|
this._todayLoadingAndUnloadingStatistics()
|
||
|
|
this._todayTask()
|
||
|
|
this._agvInfo()
|
||
|
|
this._rgvInfo()
|
||
|
|
}, this.interTime)
|
||
|
|
},
|
||
|
|
async _inventoryAnalysis () {
|
||
|
|
let res = await inventoryAnalysis()
|
||
|
|
if (res.length) {
|
||
|
|
clearInterval(this.chart1Timer)
|
||
|
|
this.chart1Timer = null
|
||
|
|
this.materList = [...res]
|
||
|
|
this.setEchart1()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async _inventoryIOAnalysis () {
|
||
|
|
let res = await inventoryIOAnalysis()
|
||
|
|
if (res.length) {
|
||
|
|
clearInterval(this.chart2Timer)
|
||
|
|
this.chart2Timer = null
|
||
|
|
this.curList = [...res]
|
||
|
|
this.setEchart2()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async _historyInventoryIOAnalysis () {
|
||
|
|
let res = await historyInventoryIOAnalysis()
|
||
|
|
if (res.length) {
|
||
|
|
clearInterval(this.chart3Timer)
|
||
|
|
this.chart3Timer = null
|
||
|
|
this.historyList = [...res]
|
||
|
|
this.setEchart3()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async _todayProduceStatistic () {
|
||
|
|
let res = await todayProduceStatistic()
|
||
|
|
if (res.length) {
|
||
|
|
this.statisList = [...res]
|
||
|
|
this.setEchart4()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async _todayLoadingAndUnloadingStatistics () {
|
||
|
|
let res = await todayLoadingAndUnloadingStatistics()
|
||
|
|
if (res.length) {
|
||
|
|
clearInterval(this.chart5Timer)
|
||
|
|
this.chart5Timer = null
|
||
|
|
this.loadList = [...res]
|
||
|
|
this.setEchart5()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setEchart1 () {
|
||
|
|
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb']
|
||
|
|
let seriesData = []
|
||
|
|
let seriesName = []
|
||
|
|
this.materList.map((e, i) => {
|
||
|
|
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
|
||
|
|
seriesName.push({name: e.material_name})
|
||
|
|
})
|
||
|
|
let total = 0
|
||
|
|
this.materList.map(e => {
|
||
|
|
total = total + Number(e.total_material_qty)
|
||
|
|
}, 0)
|
||
|
|
let option = {
|
||
|
|
color: colors,
|
||
|
|
grid: {
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
x: '23.5%',
|
||
|
|
y: '39%',
|
||
|
|
width: '200',
|
||
|
|
height: '70',
|
||
|
|
text: '总数',
|
||
|
|
subtext: total,
|
||
|
|
textAlign: 'center',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
lineHeight: 20,
|
||
|
|
color: '#A8C3E6',
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
||
|
|
},
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 30,
|
||
|
|
lineHeight: 36,
|
||
|
|
color: '#DBE7F6',
|
||
|
|
fontFamily: 'YouSheBiaoTiHei'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
type: 'scroll',
|
||
|
|
orient: 'vertical',
|
||
|
|
left: '55%',
|
||
|
|
top: 30,
|
||
|
|
bottom: 20,
|
||
|
|
itemGap: 18,
|
||
|
|
icon: 'rect',
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
data: seriesName,
|
||
|
|
formatter: (name) => {
|
||
|
|
let qty
|
||
|
|
let percentage
|
||
|
|
for (let i = 0; i < seriesData.length; i++) {
|
||
|
|
if (seriesData[i].name === name) {
|
||
|
|
qty = seriesData[i].value
|
||
|
|
percentage = seriesData[i].percentage
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var arr = [
|
||
|
|
'{a|' + name + '}\n',
|
||
|
|
'{b|' + qty + '}',
|
||
|
|
'{c|' + percentage + '}'
|
||
|
|
]
|
||
|
|
return arr.join(' ')
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
fontSize: 12,
|
||
|
|
lineHeight: 20,
|
||
|
|
padding: [20, 0, 0, 0],
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
||
|
|
wordWrap: 'break-word',
|
||
|
|
color: '#9BB9DD',
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
b: {
|
||
|
|
fontSize: 20,
|
||
|
|
lineHeight: 20,
|
||
|
|
padding: [10, 0, 0, -10],
|
||
|
|
color: '#DFECFB',
|
||
|
|
fontFamily: 'YouSheBiaoTiHei',
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
c: {
|
||
|
|
align: 'right',
|
||
|
|
fontSize: 16,
|
||
|
|
lineHeight: 20,
|
||
|
|
padding: [10, 0, 0, 0],
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
||
|
|
color: '#9BB9DD'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
pageTextStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: 'RGBA(86, 114, 157, 0.9)'
|
||
|
|
},
|
||
|
|
// pageButtonPosition: 'start',
|
||
|
|
pageButtonItemGap: 0,
|
||
|
|
pageIconSize: 0
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '库存量监控',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['61%', '69%'],
|
||
|
|
center: ['24.5%', '49%'],
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
borderColor: 'RGBA(27, 58, 98, .5)',
|
||
|
|
borderWidth: 2
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
selectedMode: 'single',
|
||
|
|
selectedOffset: 20,
|
||
|
|
data: seriesData
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
if (document.getElementById('home_1') == null) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$echarts.dispose(document.getElementById('home_1'))
|
||
|
|
let echart = this.$echarts.init(document.getElementById('home_1'))
|
||
|
|
echart.setOption(option)
|
||
|
|
let bu = 0
|
||
|
|
this.chart1Timer = setInterval(() => {
|
||
|
|
if (bu > seriesData.length - 1) {
|
||
|
|
bu = 0
|
||
|
|
}
|
||
|
|
echart.dispatchAction({
|
||
|
|
type: 'legendScroll',
|
||
|
|
seriesIndex: 0,
|
||
|
|
scrollDataIndex: bu
|
||
|
|
})
|
||
|
|
bu++
|
||
|
|
}, 2000)
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
echart.resize()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
setEchart2 () {
|
||
|
|
let barName = []
|
||
|
|
let barData1 = []
|
||
|
|
let barData2 = []
|
||
|
|
this.curList.map(el => {
|
||
|
|
barName.push(el.material_name)
|
||
|
|
barData1.push(el.total_instorage_qty)
|
||
|
|
barData2.push(el.total_outstorage_qty)
|
||
|
|
})
|
||
|
|
let option = {
|
||
|
|
grid: {
|
||
|
|
top: 55,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
icon: 'rect',
|
||
|
|
top: '0',
|
||
|
|
right: '0',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9BB9DD',
|
||
|
|
fontSize: 16,
|
||
|
|
lineHeight: 16
|
||
|
|
},
|
||
|
|
itemGap: 30,
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#3C5787'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
color: '#7591B2',
|
||
|
|
fontSize: 12,
|
||
|
|
lineHeight: 12,
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
||
|
|
margin: 10,
|
||
|
|
formatter: (value) => {
|
||
|
|
let str = ''
|
||
|
|
let num = 10
|
||
|
|
let valLength = value.length
|
||
|
|
let rowNum = Math.ceil(valLength / num)
|
||
|
|
if (rowNum > 1) {
|
||
|
|
for (let i = 0; i < rowNum; i++) {
|
||
|
|
let temp = ''
|
||
|
|
let start = i * num
|
||
|
|
let end = start + num
|
||
|
|
if (i === rowNum - 1) {
|
||
|
|
temp = value.substring(start, end)
|
||
|
|
} else {
|
||
|
|
temp = value.substring(start, end) + '\n'
|
||
|
|
}
|
||
|
|
str += temp
|
||
|
|
}
|
||
|
|
return str
|
||
|
|
} else {
|
||
|
|
return value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: barName
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
// name: '单位：块',
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitNumber: 4,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#B5C5D4',
|
||
|
|
fontSize: 16,
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: [4, 3],
|
||
|
|
color: '#455C86'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '入库',
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: '10',
|
||
|
|
itemStyle: {
|
||
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(103,212,112,0.2)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 0.08,
|
||
|
|
color: 'rgba(103,212,112,0.9)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(255,255,255,0.9)'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
data: barData1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '出库',
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: '10',
|
||
|
|
itemStyle: {
|
||
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(25,128,234,0.2)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 0.08,
|
||
|
|
color: 'rgba(25,128,234,0.9)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(255,255,255,0.9)'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
data: barData2
|
||
|
|
}
|
||
|
|
],
|
||
|
|
dataZoom: [
|
||
|
|
{
|
||
|
|
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||
|
|
show: false, // 是否显示滑动条，不影响使用
|
||
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||
|
|
startValue: 0, // 从头开始。
|
||
|
|
endValue: 3 // 展示到第几个。
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
if (document.getElementById('home_2') == null) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$echarts.dispose(document.getElementById('home_2'))
|
||
|
|
let echart = this.$echarts.init(document.getElementById('home_2'))
|
||
|
|
echart.setOption(option)
|
||
|
|
this.chart2Timer = setInterval(() => {
|
||
|
|
if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||
|
|
option.dataZoom[0].endValue = 3
|
||
|
|
option.dataZoom[0].startValue = 0
|
||
|
|
} else {
|
||
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||
|
|
}
|
||
|
|
echart.setOption(option)
|
||
|
|
}, 2000)
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
echart.resize()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
setEchart3 () {
|
||
|
|
let img = {
|
||
|
|
imgSrc1: symbol3,
|
||
|
|
imgSrc2: symbol4,
|
||
|
|
imgSrc3: lineSelected
|
||
|
|
}
|
||
|
|
let total = 0
|
||
|
|
this.historyList.map(el => {
|
||
|
|
total = Math.max(total, Number(el.total_instorage_qty), Number(el.total_outstorage_qty))
|
||
|
|
})
|
||
|
|
let barName = []
|
||
|
|
let barData1 = []
|
||
|
|
let barData2 = []
|
||
|
|
let totalDate = []
|
||
|
|
this.historyList.map(el => {
|
||
|
|
barName.push(el.data)
|
||
|
|
barData1.push(el.total_instorage_qty)
|
||
|
|
barData2.push(el.total_outstorage_qty)
|
||
|
|
})
|
||
|
|
let option = {
|
||
|
|
grid: {
|
||
|
|
top: 55,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
showContent: false,
|
||
|
|
axisPointer: {
|
||
|
|
type: 'line',
|
||
|
|
lineStyle: {
|
||
|
|
type: 'solid',
|
||
|
|
width: '2',
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(254,254,254,0)'
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(254,254,254,0)'
|
||
|
|
}],
|
||
|
|
global: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
icon: 'rect',
|
||
|
|
top: '0',
|
||
|
|
right: '0',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9BB9DD',
|
||
|
|
fontSize: 16,
|
||
|
|
lineHeight: 16
|
||
|
|
},
|
||
|
|
itemGap: 30,
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#3C5787'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
// rotate: 45,
|
||
|
|
color: '#7591B2',
|
||
|
|
fontSize: 12,
|
||
|
|
lineHeight: 12,
|
||
|
|
// align: 'right',
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
||
|
|
margin: 10,
|
||
|
|
formatter: (value) => {
|
||
|
|
let str = ''
|
||
|
|
let num = 5
|
||
|
|
let valLength = value.length
|
||
|
|
let rowNum = Math.ceil(valLength / num)
|
||
|
|
if (rowNum > 1) {
|
||
|
|
for (let i = 0; i < rowNum; i++) {
|
||
|
|
let temp = ''
|
||
|
|
let start = i * num
|
||
|
|
let end = start + num
|
||
|
|
if (i === rowNum - 1) {
|
||
|
|
temp = value.substring(start, end)
|
||
|
|
} else {
|
||
|
|
temp = value.substring(start, end) + '\n'
|
||
|
|
}
|
||
|
|
str += temp
|
||
|
|
}
|
||
|
|
return str
|
||
|
|
} else {
|
||
|
|
return value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: barName
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
// name: '单位：块',
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitNumber: 4,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#B5C5D4',
|
||
|
|
fontSize: 16,
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: [4, 3],
|
||
|
|
color: '#455C86'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
max: total
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '入库',
|
||
|
|
type: 'line',
|
||
|
|
symbol: 'image://' + img.imgSrc1,
|
||
|
|
symbolSize: [10, 10],
|
||
|
|
legendHoverLink: true,
|
||
|
|
showSymbol: false,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#67D470',
|
||
|
|
lineStyle: {
|
||
|
|
color: '#67D470',
|
||
|
|
width: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(103,212,112,0.1)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(103,212,112,0.74)'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
data: barData1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '出库',
|
||
|
|
type: 'line',
|
||
|
|
symbol: 'image://' + img.imgSrc2,
|
||
|
|
symbolSize: [10, 10],
|
||
|
|
legendHoverLink: true,
|
||
|
|
showSymbol: false,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#58A2E3',
|
||
|
|
lineStyle: {
|
||
|
|
color: '#58A2E3',
|
||
|
|
width: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(45,144,255,0)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: 'rgba(45,144,255,0.85)'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
data: barData2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '阴影',
|
||
|
|
type: 'pictorialBar',
|
||
|
|
barWidth: '38px',
|
||
|
|
symbol: 'image://' + img.imgSrc3,
|
||
|
|
data: totalDate,
|
||
|
|
z: -1
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
if (document.getElementById('home_3') == null) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$echarts.dispose(document.getElementById('home_3'))
|
||
|
|
let echart = this.$echarts.init(document.getElementById('home_3'))
|
||
|
|
echart.setOption(option)
|
||
|
|
let len = 0
|
||
|
|
this.chart3Timer = setInterval(() => {
|
||
|
|
if (len === barName.length) {
|
||
|
|
len = 0
|
||
|
|
}
|
||
|
|
totalDate[len] = total
|
||
|
|
echart.setOption({
|
||
|
|
series: [{
|
||
|
|
data: barData1
|
||
|
|
}, {
|
||
|
|
data: barData2
|
||
|
|
}, {
|
||
|
|
data: totalDate
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
echart.dispatchAction({
|
||
|
|
type: 'showTip',
|
||
|
|
seriesIndex: 0,
|
||
|
|
dataIndex: len
|
||
|
|
})
|
||
|
|
totalDate = []
|
||
|
|
len++
|
||
|
|
}, 2000)
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
echart.resize()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
setEchart4 () {
|
||
|
|
let xAxisData = []
|
||
|
|
let seriesData = []
|
||
|
|
let colors = ['#1980EA', '#67D470', '#EF5252']
|
||
|
|
this.statisList.map(el => {
|
||
|
|
xAxisData.push(el.region_name)
|
||
|
|
seriesData.push(el.count)
|
||
|
|
})
|
||
|
|
let option = {
|
||
|
|
grid: {
|
||
|
|
top: 34,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#3C5787'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
color: '#7591B2',
|
||
|
|
fontSize: 16,
|
||
|
|
lineHeight: 16,
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
||
|
|
margin: 10
|
||
|
|
},
|
||
|
|
data: xAxisData
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
name: '产量:托',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
padding: [0, 0, 0, 0]
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitNumber: 4,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#B5C5D4',
|
||
|
|
fontSize: 16,
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: [4, 3],
|
||
|
|
color: '#455C86'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '产量',
|
||
|
|
type: 'pictorialBar',
|
||
|
|
symbolRepeat: 'fixed',
|
||
|
|
symbolMargin: 2,
|
||
|
|
symbol: 'rect',
|
||
|
|
symbolClip: true,
|
||
|
|
symbolSize: [19, 4],
|
||
|
|
symbolPosition: 'center',
|
||
|
|
itemStyle: {
|
||
|
|
color: (params) => {
|
||
|
|
return colors[params.dataIndex]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: seriesData
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
if (document.getElementById('home_4') == null) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$echarts.dispose(document.getElementById('home_4'))
|
||
|
|
let echart = this.$echarts.init(document.getElementById('home_4'))
|
||
|
|
echart.setOption(option)
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
echart.resize()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
setEchart5 () {
|
||
|
|
let attaData1 = []
|
||
|
|
let attaData2 = []
|
||
|
|
let ydata = []
|
||
|
|
this.loadList.map(el => {
|
||
|
|
ydata.push(el.region_name)
|
||
|
|
attaData1.push(el.material_loading_count)
|
||
|
|
attaData2.push(el.material_unloading_count)
|
||
|
|
})
|
||
|
|
let option = {
|
||
|
|
grid: {
|
||
|
|
top: 55,
|
||
|
|
left: 0,
|
||
|
|
right: 15,
|
||
|
|
bottom: 0,
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
icon: 'rect',
|
||
|
|
top: '0',
|
||
|
|
right: '0',
|
||
|
|
textStyle: {
|
||
|
|
color: '#9BB9DD',
|
||
|
|
fontSize: 16,
|
||
|
|
lineHeight: 16
|
||
|
|
},
|
||
|
|
itemGap: 30,
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
data: [{name: '上料', itemStyle: {color: '#A68615'}}, {name: '下料', itemStyle: {color: '#4E8BFB'}}]
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'category',
|
||
|
|
inverse: true,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#3C5787'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0,
|
||
|
|
color: '#7591B2',
|
||
|
|
fontSize: 12,
|
||
|
|
lineHeight: 12,
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
||
|
|
margin: 10
|
||
|
|
},
|
||
|
|
data: ydata
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'value',
|
||
|
|
// name: '单位:托',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
padding: [0, 0, 0, 0]
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitNumber: 4,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#B5C5D4',
|
||
|
|
fontSize: 16,
|
||
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
type: [4, 3],
|
||
|
|
color: '#455C86'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '上料',
|
||
|
|
type: 'bar',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'right',
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#F5F5F5',
|
||
|
|
formatter: '{c}托'
|
||
|
|
},
|
||
|
|
barWidth: '12',
|
||
|
|
itemStyle: {
|
||
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#8C620F'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#C7B51C'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
data: attaData1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '下料',
|
||
|
|
type: 'bar',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'right',
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#F5F5F5',
|
||
|
|
formatter: '{c}托'
|
||
|
|
},
|
||
|
|
barWidth: '12',
|
||
|
|
itemStyle: {
|
||
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#3261FB'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#6BB4FB'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
data: attaData2
|
||
|
|
}
|
||
|
|
],
|
||
|
|
dataZoom: [
|
||
|
|
{
|
||
|
|
yAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||
|
|
show: false, // 是否显示滑动条，不影响使用
|
||
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||
|
|
startValue: 0, // 从头开始。
|
||
|
|
endValue: 7 // 展示到第几个。
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
if (document.getElementById('home_5') == null) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$echarts.dispose(document.getElementById('home_5'))
|
||
|
|
let echart = this.$echarts.init(document.getElementById('home_5'))
|
||
|
|
echart.setOption(option)
|
||
|
|
this.chart5Timer = setInterval(() => {
|
||
|
|
if (option.dataZoom[0].endValue >= ydata.length - 1) {
|
||
|
|
option.dataZoom[0].endValue = 7
|
||
|
|
option.dataZoom[0].startValue = 0
|
||
|
|
} else {
|
||
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||
|
|
}
|
||
|
|
echart.setOption(option)
|
||
|
|
}, 2000)
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
echart.resize()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
async _todayTask () {
|
||
|
|
let res = await todayTask()
|
||
|
|
if (res.length) {
|
||
|
|
this.taskList = [...res]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async _agvInfo () {
|
||
|
|
let res = await agvInfo()
|
||
|
|
if (res.length) {
|
||
|
|
this.agvList = [...res]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async _rgvInfo () {
|
||
|
|
let res = await rgvInfo()
|
||
|
|
if (res.length) {
|
||
|
|
this.rgvList = [...res]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.n_header_info
|
||
|
|
position absolute
|
||
|
|
left 15px
|
||
|
|
top 29px
|
||
|
|
height 28px
|
||
|
|
display flex
|
||
|
|
.exit_btn
|
||
|
|
height 28px
|
||
|
|
width 28px
|
||
|
|
line-height 28px
|
||
|
|
font-size 20px
|
||
|
|
color #aecaf5
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 50%;
|
||
|
|
.n_container
|
||
|
|
position relative
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
overflow hidden
|
||
|
|
.n_header
|
||
|
|
position absolute
|
||
|
|
left 0
|
||
|
|
top 0
|
||
|
|
width 100%
|
||
|
|
height 181px
|
||
|
|
background center / 100% url('../../../images/header_bg.png') no-repeat
|
||
|
|
.n_header_h1
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding-top 26px
|
||
|
|
h1
|
||
|
|
font-size: 60px;
|
||
|
|
font-family: 'YouSheBiaoTiHei';
|
||
|
|
font-weight: 400;
|
||
|
|
color: transparent;
|
||
|
|
line-height: 44px;
|
||
|
|
opacity: 0.89;
|
||
|
|
letter-spacing 10px
|
||
|
|
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
||
|
|
filter: drop-shadow(#092F6D 1px 4px 1px);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
text-align center
|
||
|
|
.left_bg
|
||
|
|
position absolute
|
||
|
|
left 0
|
||
|
|
top 111px
|
||
|
|
width 34px
|
||
|
|
height 839px
|
||
|
|
background center / 100% url('../../../images/bg-left.png') no-repeat
|
||
|
|
.right_bg
|
||
|
|
position absolute
|
||
|
|
right 0
|
||
|
|
top 111px
|
||
|
|
width 34px
|
||
|
|
height 839px
|
||
|
|
background center / 100% url('../../../images/bg-right.png') no-repeat
|
||
|
|
.button_bg
|
||
|
|
position absolute
|
||
|
|
left 0
|
||
|
|
bottom 0
|
||
|
|
width 100%
|
||
|
|
height 40px
|
||
|
|
background center / 100% url('../../../images/bg-button.png') no-repeat
|
||
|
|
.n_body_container
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
padding 125px 30px 50px 30px
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.n_left_wraper
|
||
|
|
width 24%
|
||
|
|
height 100%
|
||
|
|
.n_right_wraper
|
||
|
|
width 24%
|
||
|
|
height 100%
|
||
|
|
.n-center_wraper
|
||
|
|
width 50%
|
||
|
|
height 100%
|
||
|
|
.w_wraper
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
.item_wraper
|
||
|
|
width 100%
|
||
|
|
height calc((100% - 40px) / 3)
|
||
|
|
margin-bottom 20px
|
||
|
|
&:last-child
|
||
|
|
margin-bottom 0
|
||
|
|
.item_wraper_1
|
||
|
|
height calc((200% - 20px) / 3)
|
||
|
|
.title_wraper
|
||
|
|
width 100%
|
||
|
|
height 42px
|
||
|
|
background center / 100% 100% url('../../../images/bg-title_2.png') no-repeat
|
||
|
|
padding 6px 44px
|
||
|
|
p
|
||
|
|
font-size 24px
|
||
|
|
font-family: 'YouSheBiaoTiHei';
|
||
|
|
font-weight: 400;
|
||
|
|
color: transparent;
|
||
|
|
line-height 24px
|
||
|
|
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
.title_wraper_1
|
||
|
|
background-image url('../../../images/bg-title_1.png')
|
||
|
|
.content_wraper
|
||
|
|
width 100%
|
||
|
|
height calc(100% - 42px)
|
||
|
|
padding 20px
|
||
|
|
background center / 100% 100% url('../../../images/bg-m_2.png') no-repeat
|
||
|
|
.content_wraper_2
|
||
|
|
padding 0
|
||
|
|
.content_wraper_3
|
||
|
|
background-image url('../../../images/bg-center.png')
|
||
|
|
.pie_wraper
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
padding 2px 0 0 2px
|
||
|
|
background left center / 222px 222px url('../../../images/pie-bg_2.png') no-repeat
|
||
|
|
.pie_legend
|
||
|
|
width calc(100% - 200px)
|
||
|
|
height 100%
|
||
|
|
margin-left 200px
|
||
|
|
display flex
|
||
|
|
flex-direction row
|
||
|
|
justify-content space-between
|
||
|
|
align-items center
|
||
|
|
flex-wrap: wrap
|
||
|
|
.pie_legend_item
|
||
|
|
width 50%
|
||
|
|
padding 0 0px 2px 20px
|
||
|
|
.pie_legend_item_bg_1
|
||
|
|
background top left / 18px auto url('../../../images/fk_1.png') no-repeat
|
||
|
|
.pie_legend_item_bg_2
|
||
|
|
background top left / 18px auto url('../../../images/fk_2.png') no-repeat
|
||
|
|
.pie_legend_item_bg_3
|
||
|
|
background top left / 18px auto url('../../../images/fk_3.png') no-repeat
|
||
|
|
.pie_legend_item_bg_4
|
||
|
|
background top left / 18px auto url('../../../images/fk_5.png') no-repeat
|
||
|
|
.pie_legend_txt_1
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 16px
|
||
|
|
font-family: 'SourceHanSansCN-Regular';
|
||
|
|
color: #9BB9DD;
|
||
|
|
margin-bottom 8px
|
||
|
|
.pie_legend_txt_wraper
|
||
|
|
width 100%
|
||
|
|
.pie_legend_txt_2
|
||
|
|
font-size 20px
|
||
|
|
line-height: 20px
|
||
|
|
font-family: 'YouSheBiaoTiHei'
|
||
|
|
color: transparent;
|
||
|
|
background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
|
||
|
|
filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
margin-bottom 8px
|
||
|
|
.pie_legend_txt_3
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 16px
|
||
|
|
font-family: 'SourceHanSansCN-Regular';
|
||
|
|
color: #9BB9DD;
|
||
|
|
opacity: 0.5;
|
||
|
|
.content_wraper_1
|
||
|
|
padding-bottom: 0
|
||
|
|
.echart_wraper
|
||
|
|
height calc(100% + 21px)
|
||
|
|
.scroll_wrap
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
padding 20px 20px 5px 20px
|
||
|
|
.scroll_tab_1
|
||
|
|
width 100%
|
||
|
|
height 38px
|
||
|
|
background left center / auto 100% url('../../../images/table-bg_1.png') no-repeat
|
||
|
|
li
|
||
|
|
float left
|
||
|
|
width 9%
|
||
|
|
font-size 16px;
|
||
|
|
line-height 38px
|
||
|
|
color #AFBED8
|
||
|
|
text-align center
|
||
|
|
font-family: 'SourceHanSansCN-Regular';
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
word-wrap break-word
|
||
|
|
word-break break-all
|
||
|
|
white-space nowrap
|
||
|
|
padding 0 5px
|
||
|
|
overflow hidden
|
||
|
|
box-sizing border-box
|
||
|
|
&:nth-child(1), &:nth-child(2)
|
||
|
|
width 18.5%
|
||
|
|
.state
|
||
|
|
display block
|
||
|
|
width 20px
|
||
|
|
height 14px
|
||
|
|
.state_name
|
||
|
|
width calc(100% - 20px)
|
||
|
|
.scroll_container_1
|
||
|
|
width 100%
|
||
|
|
height calc(100% - 38px)
|
||
|
|
overflow hidden
|
||
|
|
.scroll-ul_1
|
||
|
|
li
|
||
|
|
width 100%
|
||
|
|
height 40px
|
||
|
|
border-bottom 1px solid rgba(122,159,224,0.17)
|
||
|
|
&:nth-child(even)
|
||
|
|
background rgba(31,46,73,0.7)
|
||
|
|
&:nth-child(odd)
|
||
|
|
background rgba(31,46,73,0.55)
|
||
|
|
.scroll-ul_1_div
|
||
|
|
float left
|
||
|
|
width 9%
|
||
|
|
height 39px
|
||
|
|
display flex
|
||
|
|
flex-direction row
|
||
|
|
justify-content center
|
||
|
|
align-items center
|
||
|
|
flex-wrap nowrap
|
||
|
|
font-size 16px
|
||
|
|
line-height 16px
|
||
|
|
color #B2BBD7
|
||
|
|
text-align center
|
||
|
|
font-family: 'SourceHanSansCN-Regular';
|
||
|
|
font-style: italic;
|
||
|
|
word-wrap break-word
|
||
|
|
word-break break-all
|
||
|
|
// white-space nowrap
|
||
|
|
padding 0 5px
|
||
|
|
overflow hidden
|
||
|
|
&:nth-child(1), &:nth-child(2)
|
||
|
|
width 18.5%
|
||
|
|
.state
|
||
|
|
display block
|
||
|
|
width 20px
|
||
|
|
height 14px
|
||
|
|
.state_name
|
||
|
|
width 100%
|
||
|
|
height 20px
|
||
|
|
.agv_wrap
|
||
|
|
display flex
|
||
|
|
justify-content space-between
|
||
|
|
width 100%
|
||
|
|
height 40%
|
||
|
|
padding-bottom 20px
|
||
|
|
.rgv_wrap
|
||
|
|
height 60%
|
||
|
|
padding-bottom 0
|
||
|
|
.agv_item
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
width 32%
|
||
|
|
padding 0 10px
|
||
|
|
border 1px solid #3AA2F2
|
||
|
|
border-radius 4px
|
||
|
|
box-shadow inset 0px 0px 3px 3px rgba(58, 162, 242, 40%)
|
||
|
|
.rgv_item
|
||
|
|
display: block
|
||
|
|
width 24%
|
||
|
|
.agv_left
|
||
|
|
width 33%
|
||
|
|
height 100%
|
||
|
|
padding-bottom 16px
|
||
|
|
.rgv_left
|
||
|
|
width 100%
|
||
|
|
height 20%
|
||
|
|
padding 0
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.agv_img
|
||
|
|
height calc(100% - 60px)
|
||
|
|
background center center / 80% auto url('../../../images/agv.png') no-repeat
|
||
|
|
margin-bottom 30px
|
||
|
|
.agv_info
|
||
|
|
width 64%
|
||
|
|
.p1
|
||
|
|
height 30px
|
||
|
|
font-size: 18px;
|
||
|
|
line-height 30px
|
||
|
|
font-family: 'YouSheBiaoTiHei'
|
||
|
|
color: #78B1DE;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
text-align: center;
|
||
|
|
.agv_txt
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
height 25%
|
||
|
|
background bottom center / 100% 3px url('../../../images/screen1/line_1.png') no-repeat
|
||
|
|
padding 0 10px
|
||
|
|
&:last-child
|
||
|
|
background none
|
||
|
|
.p2
|
||
|
|
font-size: 14px;
|
||
|
|
color: #84B0DA;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 700;
|
||
|
|
.p3
|
||
|
|
font-size: 16px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 700;
|
||
|
|
.rgv_img
|
||
|
|
width 50%
|
||
|
|
height 100%
|
||
|
|
background center center / 80% auto url('../../../images/rgv.png') no-repeat
|
||
|
|
margin-bottom 0
|
||
|
|
.rgv_info
|
||
|
|
height 80%
|
||
|
|
.rgv_txt
|
||
|
|
height 20%
|
||
|
|
</style>
|