1452 lines
42 KiB
Vue
1452 lines
42 KiB
Vue
<template>
|
||
<div class="n_container">
|
||
<div class="n_header">
|
||
<div class="n_header_h1">
|
||
<h1>生产监控中心</h1>
|
||
</div>
|
||
<div class="n_header_h2" >
|
||
<h2>宁德华弘新材料科技有限公司</h2>
|
||
</div>
|
||
<v-time></v-time>
|
||
<div class="exit_btn" :style="expand ? {opacity: 1} : {opacity: 0.1}">
|
||
<div class="exit_txt" @click="$router.push('/setup')" :style="expand ? {width: '70px'} : {width: '0px'}">退出</div>
|
||
<div class="exit_arrow" v-text="!expand ? '>>' : '<<'" @click.stop="expand = !expand"></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">
|
||
<div class="w_wraper">
|
||
<div id="new_home_echart_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="new_home_echart_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 content_wraper_1">
|
||
<div class="w_wraper">
|
||
<div id="new_home_echart_3" style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="n-center_wraper">
|
||
<!-- <div class="n-center_wraper_i"></div> -->
|
||
<t-workshop></t-workshop>
|
||
</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 relative">
|
||
<div class="pie_wraper_2">
|
||
<div class="w_wraper">
|
||
<div id="new_home_echart_4" style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="pie_legend">
|
||
<div class="pie_legend_item" v-for="(e, i) in deviceRunStat.seriesData" :key="'sbyxtj' + i" :class="'pie_legend_item_bg_' + (i + 1)">
|
||
<p class="pie_legend_txt_1">{{ e.name }}</p>
|
||
<div class="pie_legend_txt_wraper">
|
||
<p class="pie_legend_txt_2">{{ e.value }}</p>
|
||
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wraper">
|
||
<div class="title_wraper">
|
||
<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>
|
||
</ul>
|
||
<div class="scroll_container_1">
|
||
<vue-seamless-scroll :data="deviceErrorRecordList" :class-option="defaultOption1">
|
||
<ul class="scroll-ul_1">
|
||
<li v-for="(e, i) in deviceErrorRecordList" :key="i">
|
||
<div class="scroll-ul_1_div">{{e.deviceCode}}</div>
|
||
<div class="scroll-ul_1_div">{{e.deviceName}}</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.errorInfo}}</div>
|
||
<div class="scroll-ul_1_div">{{e.errorTime}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</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="new_home_echart_5" style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import { screenTableData } from '@js/mork2.js'
|
||
import { screenTableData } from '@js/getData2.js'
|
||
import symbol1 from '@img/symbol_1.png'
|
||
import symbol2 from '@img/symbol_2.png'
|
||
import symbol3 from '@img/symbol_3.png'
|
||
import symbol4 from '@img/symbol_4.png'
|
||
import lineSelected from '@img/line_selected.png'
|
||
import bg1 from '@img/bg1.png'
|
||
import bg2 from '@img/bg2.png'
|
||
import bg3 from '@img/bg3.png'
|
||
import bg4 from '@img/bg4.png'
|
||
import vTime from '@components/time.vue'
|
||
import TWorkshop from './workshop'
|
||
export default {
|
||
components: {
|
||
vTime,
|
||
TWorkshop
|
||
},
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
chart1Timer: null,
|
||
chart2Timer: null,
|
||
chart3Timer: null,
|
||
chart4Timer: null,
|
||
expand: false,
|
||
deviceErrorRecordList: [], // 设备报警信息
|
||
mixingList: [], // 当日混料
|
||
historyList: [], // 历史分析
|
||
productList: [], // 当日成品
|
||
klInfoList: [], // 困料货架泥料库（吨）
|
||
deviceRunStat: {}, // 设备运行统计
|
||
deviceErrorList: [] // 30天故障Top10
|
||
}
|
||
},
|
||
computed: {
|
||
defaultOption1 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 95, // 开始无缝滚动的数据量 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._screenTableData()
|
||
this.refresh()
|
||
},
|
||
beforeDestroy () {
|
||
clearInterval(this.timer)
|
||
clearInterval(this.chart1Timer)
|
||
clearInterval(this.chart2Timer)
|
||
clearInterval(this.chart3Timer)
|
||
clearInterval(this.chart4Timer)
|
||
this.timer = null
|
||
this.chart1Timer = null
|
||
this.chart2Timer = null
|
||
this.chart3Timer = null
|
||
this.chart4Timer = null
|
||
},
|
||
destroyed () {
|
||
clearInterval(this.timer)
|
||
clearInterval(this.chart1Timer)
|
||
clearInterval(this.chart2Timer)
|
||
clearInterval(this.chart3Timer)
|
||
clearInterval(this.chart4Timer)
|
||
this.timer = null
|
||
this.chart1Timer = null
|
||
this.chart2Timer = null
|
||
this.chart3Timer = null
|
||
this.chart4Timer = null
|
||
},
|
||
methods: {
|
||
refresh () {
|
||
this.timer = setInterval(() => {
|
||
this._screenTableData()
|
||
}, this.interTime)
|
||
},
|
||
async _screenTableData () {
|
||
let res = await screenTableData()
|
||
clearInterval(this.chart1Timer)
|
||
clearInterval(this.chart2Timer)
|
||
clearInterval(this.chart3Timer)
|
||
clearInterval(this.chart4Timer)
|
||
this.chart1Timer = null
|
||
this.chart2Timer = null
|
||
this.chart3Timer = null
|
||
this.chart4Timer = null
|
||
this.deviceErrorRecordList = [...res.deviceErrorRecordList]
|
||
this.mixingList = [...res.mixingList]
|
||
this.productList = [...res.productList]
|
||
this.klInfoList = [...res.klInfoList]
|
||
let seriesData = [{value: res.deviceRunStat.runNum, name: '正常运行'}, {value: res.deviceRunStat.unProducedNum, name: '暂未生产'}, {value: res.deviceRunStat.freeNum, name: '空闲设备'}, {value: res.deviceRunStat.errorNum, name: '故障设备'}]
|
||
seriesData.map(el => {
|
||
let rate = Number(el.value) * 100 / Number(res.deviceRunStat.total)
|
||
rate = rate.toFixed(2) + '%'
|
||
this.$set(el, 'rate', rate)
|
||
})
|
||
this.deviceRunStat = res.deviceRunStat
|
||
this.deviceRunStat.seriesData = seriesData
|
||
this.historyList = [...res.historyList]
|
||
this.setEchart1()
|
||
this.setEchart2()
|
||
this.setEchart3()
|
||
this.setEchart4()
|
||
this.setEchart5()
|
||
},
|
||
setEchart1 () {
|
||
let img = {
|
||
imgSrc1: symbol1,
|
||
imgSrc2: symbol2
|
||
}
|
||
let barName = []
|
||
let barData1 = []
|
||
let barData2 = []
|
||
this.mixingList.map(el => {
|
||
barName.push(el.materialName)
|
||
barData1.push(el.planQty)
|
||
barData2.push(el.realQty)
|
||
})
|
||
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: '#8EB5E5'}}, {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: '单位：吨',
|
||
nameTextStyle: {
|
||
color: '#B5C5D4',
|
||
fontSize: 14,
|
||
fontFamily: 'SourceHanSansCN-Regular',
|
||
padding: [0, 10, 0, 10]
|
||
},
|
||
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',
|
||
barWidth: '77',
|
||
symbol: 'image://' + img.imgSrc1,
|
||
data: barData1
|
||
},
|
||
{
|
||
name: '已生产',
|
||
type: 'pictorialBar',
|
||
barWidth: '77',
|
||
barGap: '-75%',
|
||
symbol: 'image://' + img.imgSrc2,
|
||
data: barData2
|
||
}
|
||
],
|
||
dataZoom: [
|
||
{
|
||
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||
show: false, // 是否显示滑动条，不影响使用
|
||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||
startValue: 0, // 从头开始。
|
||
endValue: 4 // 展示到第几个。
|
||
}
|
||
]
|
||
}
|
||
if (document.getElementById('new_home_echart_1') == null) {
|
||
return
|
||
}
|
||
this.$echarts.dispose(document.getElementById('new_home_echart_1'))
|
||
let echart = this.$echarts.init(document.getElementById('new_home_echart_1'))
|
||
echart.setOption(option)
|
||
this.chart1Timer = setInterval(() => {
|
||
if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||
option.dataZoom[0].endValue = 4
|
||
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()
|
||
})
|
||
},
|
||
setEchart2 () {
|
||
let barName = []
|
||
let barData1 = []
|
||
let barData2 = []
|
||
let barData3 = []
|
||
this.productList.map(el => {
|
||
barName.push(el.materialName)
|
||
barData1.push(el.requiredNum)
|
||
barData2.push(el.suppressedNum)
|
||
barData3.push(el.finishedNum)
|
||
})
|
||
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: '#8EB5E5'}}, {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(142,181,229,0.2)'
|
||
},
|
||
{
|
||
offset: 0.08,
|
||
color: 'rgba(142,181,229,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(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: barData2
|
||
},
|
||
{
|
||
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: barData3
|
||
}
|
||
],
|
||
dataZoom: [
|
||
{
|
||
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||
show: false, // 是否显示滑动条，不影响使用
|
||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||
startValue: 0, // 从头开始。
|
||
endValue: 4 // 展示到第几个。
|
||
}
|
||
]
|
||
}
|
||
if (document.getElementById('new_home_echart_2') == null) {
|
||
return
|
||
}
|
||
this.$echarts.dispose(document.getElementById('new_home_echart_2'))
|
||
let echart = this.$echarts.init(document.getElementById('new_home_echart_2'))
|
||
echart.setOption(option)
|
||
this.chart2Timer = setInterval(() => {
|
||
if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||
option.dataZoom[0].endValue = 4
|
||
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 ydata = []
|
||
let xdata = []
|
||
this.klInfoList.map(el => {
|
||
ydata.push(el.materialCode)
|
||
xdata.push(el.weight)
|
||
})
|
||
let dataZoomMove = {
|
||
start: 0,
|
||
end: 3
|
||
}
|
||
let img = {
|
||
bg1: bg1,
|
||
bg2: bg2,
|
||
bg3: bg3,
|
||
bg4: bg4
|
||
}
|
||
let colorArray = []
|
||
this.klInfoList.map((e, i) => {
|
||
if (i === 0) {
|
||
colorArray.push({top: '#8C620F', bottom: '#C7B51C'})
|
||
} else if (i === 1) {
|
||
colorArray.push({top: '#3261FB', bottom: '#6BB5FB'})
|
||
} else if (i === 2) {
|
||
colorArray.push({top: '#6B4C43', bottom: '#B8A590'})
|
||
} else {
|
||
colorArray.push({top: '#537BCB', bottom: '#ADC0E6'})
|
||
}
|
||
})
|
||
let option = {
|
||
dataZoom: [
|
||
{
|
||
show: false, // 为true 滚动条出现
|
||
startValue: dataZoomMove.start,
|
||
endValue: dataZoomMove.end,
|
||
yAxisIndex: [0, 1] // 关联多个y轴
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
|
||
type: 'inside',
|
||
yAxisIndex: 0,
|
||
zoomOnMouseWheel: false, // 滚轮是否触发缩放
|
||
moveOnMouseMove: true, // 鼠标滚轮触发滚动
|
||
moveOnMouseWheel: true
|
||
}
|
||
],
|
||
grid: {
|
||
top: 13,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ydata,
|
||
inverse: true,
|
||
axisLabel: {
|
||
inside: true,
|
||
verticalAlign: 'bottom',
|
||
lineHeight: 50,
|
||
margin: 0, // 刻度标签与轴线之间的距离
|
||
formatter: function (value) {
|
||
let k = ydata.indexOf(value)
|
||
let index = k + 1
|
||
if (k === 0) {
|
||
return '{one|' + 'TOP' + index + '} {a|' + value + '}'
|
||
} else if (k === 1) {
|
||
return '{two|' + 'TOP' + index + '} {a|' + value + '}'
|
||
} else if (k === 2) {
|
||
return '{three|' + 'TOP' + index + '} {a|' + value + '}'
|
||
} else {
|
||
return '{four|' + 'TOP' + index + '} {a|' + value + '}'
|
||
}
|
||
},
|
||
rich: {
|
||
// 第一名
|
||
one: {
|
||
backgroundColor: {
|
||
image: img.bg1
|
||
},
|
||
color: '#fff',
|
||
width: 60,
|
||
height: 32,
|
||
fontSize: 16,
|
||
lineHeight: 16,
|
||
align: 'center',
|
||
fontFamily: 'YouSheBiaoTiHei'
|
||
},
|
||
// 第二名
|
||
two: {
|
||
backgroundColor: {
|
||
image: img.bg2
|
||
},
|
||
color: '#fff',
|
||
width: 60,
|
||
height: 32,
|
||
fontSize: 16,
|
||
lineHeight: 16,
|
||
align: 'center',
|
||
fontFamily: 'YouSheBiaoTiHei'
|
||
},
|
||
// 第三名
|
||
three: {
|
||
backgroundColor: {
|
||
image: img.bg3
|
||
},
|
||
color: '#fff',
|
||
width: 60,
|
||
height: 32,
|
||
fontSize: 16,
|
||
lineHeight: 16,
|
||
align: 'center',
|
||
fontFamily: 'YouSheBiaoTiHei'
|
||
},
|
||
four: {
|
||
backgroundColor: {
|
||
image: img.bg4
|
||
},
|
||
color: '#fff',
|
||
width: 60,
|
||
height: 32,
|
||
fontSize: 16,
|
||
lineHeight: 16,
|
||
align: 'center',
|
||
fontFamily: 'YouSheBiaoTiHei'
|
||
},
|
||
a: {
|
||
color: '#AEC3DC',
|
||
height: 32,
|
||
fontSize: 16,
|
||
lineHeight: 16,
|
||
padding: [0, 0, 0, 7],
|
||
fontFamily: 'SourceHanSansCN-Regular'
|
||
}
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
|
||
{
|
||
type: 'category',
|
||
data: ydata,
|
||
inverse: true,
|
||
axisLabel: {
|
||
inside: true,
|
||
verticalAlign: 'bottom',
|
||
lineHeight: 50,
|
||
margin: 2,
|
||
formatter: function (value) {
|
||
let k = ydata.indexOf(value)
|
||
let index = k
|
||
return `{a|${xdata[index]}}`
|
||
},
|
||
rich: {
|
||
a: {
|
||
height: 50,
|
||
fontSize: 20,
|
||
lineHeight: 50,
|
||
align: 'right',
|
||
fontFamily: 'YouSheBiaoTiHei',
|
||
color: '#E1F6FF'
|
||
}
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
data: xdata,
|
||
type: 'bar',
|
||
barWidth: 3,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: '#ffffff'
|
||
},
|
||
itemStyle: {
|
||
color: (params) => {
|
||
let num = colorArray.length
|
||
return {
|
||
type: 'linear',
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: colorArray[params.dataIndex % num].bottom
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArray[params.dataIndex % num].top
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: colorArray[params.dataIndex % num].bottom
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArray[params.dataIndex % num].top
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: colorArray[params.dataIndex % num].bottom
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArray[params.dataIndex % num].top
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
if (document.getElementById('new_home_echart_3') == null) {
|
||
return
|
||
}
|
||
this.$echarts.dispose(document.getElementById('new_home_echart_3'))
|
||
let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
|
||
echart.setOption(option)
|
||
const startMoveDataZoom = () => {
|
||
this.chart3Timer = setInterval(() => {
|
||
dataZoomMove.start += 1
|
||
dataZoomMove.end += 1
|
||
if (dataZoomMove.end > xdata.length - 1) {
|
||
dataZoomMove.start = 0
|
||
dataZoomMove.end = 5
|
||
}
|
||
echart.setOption({
|
||
dataZoom: [
|
||
{
|
||
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
|
||
startValue: dataZoomMove.start,
|
||
endValue: dataZoomMove.end
|
||
}
|
||
]
|
||
})
|
||
}, 2000)
|
||
}
|
||
startMoveDataZoom()
|
||
document.getElementById('new_home_echart_3').addEventListener('mouseout', () => {
|
||
if (this.chart3Timer) return
|
||
let dataZoomMoveGet = echart.getOption().dataZoom[0]
|
||
dataZoomMove.start = dataZoomMoveGet.startValue
|
||
dataZoomMove.end = dataZoomMoveGet.endValue
|
||
startMoveDataZoom()
|
||
})
|
||
document.getElementById('new_home_echart_3').addEventListener('mouseover', () => {
|
||
clearInterval(this.chart3Timer)
|
||
this.chart3Timer = undefined
|
||
})
|
||
window.addEventListener('resize', () => {
|
||
echart.resize()
|
||
})
|
||
},
|
||
setEchart4 () {
|
||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
|
||
let seriesData = this.deviceRunStat.seriesData
|
||
let total = this.deviceRunStat.total
|
||
let option = {
|
||
color: colors,
|
||
grid: {
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
title: {
|
||
text: `{a|总数}\n{b|${total}}`,
|
||
x: 'center',
|
||
y: '39%',
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
fontSize: 16,
|
||
lineHeight: 20,
|
||
color: '#A8C3E6',
|
||
fontFamily: 'SourceHanSansCN-Regular'
|
||
},
|
||
b: {
|
||
fontSize: 30,
|
||
lineHeight: 36,
|
||
color: '#DBE7F6',
|
||
fontFamily: 'YouSheBiaoTiHei'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '设备运行统计',
|
||
type: 'pie',
|
||
radius: ['61%', '69%'],
|
||
center: ['50%', '50%'],
|
||
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('new_home_echart_4') == null) {
|
||
return
|
||
}
|
||
this.$echarts.dispose(document.getElementById('new_home_echart_4'))
|
||
let echart = this.$echarts.init(document.getElementById('new_home_echart_4'))
|
||
echart.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
echart.resize()
|
||
})
|
||
},
|
||
setEchart5 () {
|
||
let img = {
|
||
imgSrc1: symbol3,
|
||
imgSrc2: symbol4,
|
||
imgSrc3: lineSelected
|
||
}
|
||
let total = 0
|
||
this.historyList.map(el => {
|
||
total = Math.max(total, Number(el.suppressedNum), Number(el.finishedNum))
|
||
})
|
||
let barName = []
|
||
let barData1 = []
|
||
let barData2 = []
|
||
let totalDate = []
|
||
this.historyList.map(el => {
|
||
barName.push(el.produceDate)
|
||
barData1.push(el.suppressedNum)
|
||
barData2.push(el.finishedNum)
|
||
})
|
||
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
|
||
},
|
||
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('new_home_echart_5') == null) {
|
||
return
|
||
}
|
||
this.$echarts.dispose(document.getElementById('new_home_echart_5'))
|
||
let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
|
||
echart.setOption(option)
|
||
let len = 0
|
||
this.chart4Timer = 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()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.n_container
|
||
position relative
|
||
width 100%
|
||
height 100%
|
||
background center / 100% 100% url('../../../images/bg.jpg') no-repeat
|
||
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
|
||
.n_header_h2
|
||
position absolute
|
||
top 30px
|
||
left 15px
|
||
height 31px
|
||
h2
|
||
font-size: 32px;
|
||
font-family: 'YouSheBiaoTiHei';
|
||
font-weight: 400;
|
||
color: transparent;
|
||
line-height: 29px;
|
||
background: linear-gradient(0deg, #B6C3D3 0%, #E3E9F2 53.3154296875%, #FEFEFE 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
.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 22%
|
||
height 100%
|
||
.n_right_wraper
|
||
width 22%
|
||
height 100%
|
||
.n-center_wraper
|
||
position relative
|
||
width 1002px
|
||
height 100%
|
||
background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
||
.n-center_wraper_i
|
||
width 100%
|
||
height 100%
|
||
background center / 100% auto url('../../../images/scene.png') no-repeat
|
||
.w_wraper
|
||
width 100%
|
||
height 100%
|
||
.item_wraper
|
||
width 100%
|
||
height calc((100% - 40px) / 3)
|
||
margin-bottom 20px
|
||
&:last-child
|
||
margin-bottom 0
|
||
.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;
|
||
.content_wraper
|
||
width 100%
|
||
height calc(100% - 42px)
|
||
padding 20px
|
||
background center / 100% 100% url('../../../images/bg-m_2.png') no-repeat
|
||
.pie_wraper_2
|
||
position absolute
|
||
top 17px
|
||
left 0
|
||
width 222px
|
||
height 222px
|
||
background center / 100% auto 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 10%
|
||
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)
|
||
width 20%
|
||
&:nth-child(2)
|
||
width 35%
|
||
&:nth-child(3)
|
||
width 20%
|
||
&:nth-child(4)
|
||
width 25%
|
||
.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 10%
|
||
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)
|
||
width 20%
|
||
&:nth-child(2)
|
||
width 35%
|
||
&:nth-child(3)
|
||
width 20%
|
||
&:nth-child(4)
|
||
width 25%
|
||
.state
|
||
display block
|
||
width 20px
|
||
height 14px
|
||
.state_name
|
||
width 100%
|
||
height 20px
|
||
.exit_btn
|
||
position: absolute;
|
||
left: 0;
|
||
top: 30px;
|
||
height 50px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.exit_txt
|
||
font-size: 20px;
|
||
line-height: 50px;
|
||
color: #e6e7e1;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
transition width .3s ease
|
||
overflow hidden
|
||
background-color: rgba(30, 182, 203, 80%);
|
||
.exit_arrow
|
||
width: 46px;
|
||
font-size: 20px;
|
||
line-height: 50px;
|
||
color: #e6e7e1;
|
||
text-align: center;
|
||
background-color: rgba(30, 182, 203, 60%);
|
||
border-top-right-radius: 30px;
|
||
border-bottom-right-radius: 30px
|
||
</style>
|