1100 lines
35 KiB
Vue
1100 lines
35 KiB
Vue
<template>
|
||
<section>
|
||
<t-header title="武汉新锐设备管理看板"></t-header>
|
||
<div class="goods_shelves">
|
||
<div class="yard-wrap">
|
||
<div class="content_left">
|
||
<div class="item_wrap item_wrap_3">
|
||
<div class="tip_item">
|
||
<p>每日开机时长</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="echart_wrap">
|
||
<div id="echart_d2" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap item_wrap_1">
|
||
<div class="tip_item">
|
||
<p>设备运行状态</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="grid_wrap">
|
||
<ul class="scroll_tab_1">
|
||
<li>事业部</li>
|
||
<li>正常(台)</li>
|
||
<li>故障(台)</li>
|
||
<li>委外(台)</li>
|
||
<li>保养(台)</li>
|
||
</ul>
|
||
<div class="scroll_container_1">
|
||
<vue-seamless-scroll :data="gridArr1" :class-option="defaultOption1">
|
||
<ul class="content-block-scroll-ul_1">
|
||
<li v-for="(e, i) in gridArr1" :key="i">
|
||
<div class="scroll-ul_1_div">{{e.dept_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.normal_num}}</div>
|
||
<div class="scroll-ul_1_div">{{e.fault_num}}</div>
|
||
<div class="scroll-ul_1_div">{{e.out_num}}</div>
|
||
<div class="scroll-ul_1_div">{{e.main_num}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap item_wrap_1">
|
||
<div class="tip_item">
|
||
<p>设备年保养计划状态</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="grid_wrap">
|
||
<ul class="scroll_tab_1 scroll_tab_2">
|
||
<li>事业部</li>
|
||
<li>计划数(台)</li>
|
||
<li>已保养(台)</li>
|
||
<li>在保养(台)</li>
|
||
<li>未保养(台)</li>
|
||
<li>完成率(%)</li>
|
||
</ul>
|
||
<div class="scroll_container_1">
|
||
<vue-seamless-scroll :data="gridArr2" :class-option="defaultOption2">
|
||
<ul class="content-block-scroll-ul_1 content-block-scroll-ul_2">
|
||
<li v-for="(e, i) in gridArr2" :key="i">
|
||
<div class="scroll-ul_1_div">{{e.dept_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.need_num}}</div>
|
||
<div class="scroll-ul_1_div">{{e.end_num}}</div>
|
||
<div class="scroll-ul_1_div">{{e.begin_num}}</div>
|
||
<div class="scroll-ul_1_div">{{e.not_num}}</div>
|
||
<!-- <div class="scroll-ul_1_div">{{e.confirm_rate}}</div> -->
|
||
<div class="scroll-ul_1_div">
|
||
<div class="progress_line_wrap">
|
||
<div class="progress_dot_wrap">
|
||
<div class="progress_dot" :style="{'left': Number(e.confirm_rate) + '%'}"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_center">
|
||
<div class="center_wrap">
|
||
<div class="item_wrap item_wrap_3 item_wrap_5">
|
||
<div class="tip_item">
|
||
<p>设备数量</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="echart_wrap echart_wrap_1">
|
||
<div class="echart_wrap_2">
|
||
<div class="echart_wrap_l">
|
||
<div class="echart_wrap_l_l">
|
||
<div class="num_items">
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">总设备台数</p>
|
||
<p class="right_1_up_p2">{{num1}}</p>
|
||
</div>
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">在用台数</p>
|
||
<p class="right_1_up_p2">{{num2}}</p>
|
||
</div>
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">总故障台数</p>
|
||
<p class="right_1_up_p2">{{num3}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="echart_wrap_l_wrap">
|
||
<div id="echart_d4" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="echart_wrap_r">
|
||
<div class="right_1_down_inner_3_i" v-for="(e, i) in echartArr3" :key="i">
|
||
<div class="right_1_down_inner_3_l">
|
||
<span><i :style="{'background-color': e.color}"></i></span>
|
||
<span>{{e.dept_name}}</span>
|
||
</div>
|
||
<div class="right_1_down_inner_3_r">
|
||
<span>{{e.device_num}}</span>
|
||
<span>台</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap item_wrap_2">
|
||
<div class="tip_item">
|
||
<p>当日任务列表</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="grid_wrap grid_wrap_1">
|
||
<ul class="scroll_tab_1 scroll_tab_5">
|
||
<li>报修时间</li>
|
||
<li>设备名称</li>
|
||
<li>自编号</li>
|
||
<li>故障描述</li>
|
||
<li>使用部门</li>
|
||
<li>状态</li>
|
||
<li>维保人</li>
|
||
</ul>
|
||
<div class="scroll_container_1">
|
||
<vue-seamless-scroll :data="gridArr5" :class-option="defaultOption5">
|
||
<ul class="content-block-scroll-ul_1 content-block-scroll-ul_5">
|
||
<li v-for="(e, i) in gridArr5" :key="i">
|
||
<div class="scroll-ul_1_div">{{e.input_time}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.extend_code}}</div>
|
||
<div class="scroll-ul_1_div">{{e.fault_desc}}</div>
|
||
<div class="scroll-ul_1_div">{{e.dept_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.invstatus}}</div>
|
||
<div class="scroll-ul_1_div">{{e.user_name}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap item_wrap_2">
|
||
<div class="tip_item">
|
||
<p>年保养计划监控</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="grid_wrap grid_wrap_1">
|
||
<ul class="scroll_tab_1 scroll_tab_3">
|
||
<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_1">
|
||
<vue-seamless-scroll :data="gridArr3" :class-option="defaultOption3">
|
||
<ul class="content-block-scroll-ul_1 content-block-scroll-ul_3">
|
||
<li v-for="(e, i) in gridArr3" :key="i">
|
||
<div class="scroll-ul_1_div">{{e.dept_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_code}}</div>
|
||
<div class="scroll-ul_1_div">{{e.num}}</div>
|
||
<div class="scroll-ul_1_div">{{e.plan_time}}</div>
|
||
<div class="scroll-ul_1_div">{{e.maint_object}}</div>
|
||
<div class="scroll-ul_1_div">{{e.impl_time}}</div>
|
||
<div class="scroll-ul_1_div">{{e.main_time}}</div>
|
||
<div class="scroll-ul_1_div">{{e.putoff_time}}</div>
|
||
<div class="scroll-ul_1_div">{{e.remark}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_left">
|
||
<div class="item_wrap item_wrap_3">
|
||
<div class="tip_item">
|
||
<p>年故障类别TOP10</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="echart_wrap">
|
||
<div id="echart_d3" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap item_wrap_4">
|
||
<div class="tip_item">
|
||
<p>近30天班组情况</p>
|
||
<div class="tip_item_bg1"></div>
|
||
</div>
|
||
<div class="grid_wrap">
|
||
<ul class="scroll_tab_1 scroll_tab_4">
|
||
<li>班组</li>
|
||
<li>MTBF(h)</li>
|
||
<li>MTTR(h)</li>
|
||
<li>平均OEE(%)</li>
|
||
<li>总维修时间(h)</li>
|
||
</ul>
|
||
<div class="scroll_container_1">
|
||
<vue-seamless-scroll :data="gridArr4" :class-option="defaultOption4">
|
||
<ul class="content-block-scroll-ul_1 content-block-scroll-ul_4">
|
||
<li v-for="(e, i) in gridArr4" :key="i">
|
||
<div class="scroll-ul_1_div">{{e.group_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_mtbf}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_mttr}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_oee}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_time}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import THeader from '@components/header.vue'
|
||
import {getDeviceTime, getDeviceNumber, getDeviceFault, getDeviceRunStatus, getDeviceYearStatus, getDeviceYearMainPlan, getDeviceGroupStatus, getTodayTask} from '@js/getData2.js'
|
||
export default {
|
||
name: 'DeviceManage',
|
||
components: {
|
||
THeader
|
||
},
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
myCharts1: '',
|
||
myCharts2: '',
|
||
myCharts3: '',
|
||
echartArr1: [],
|
||
echartArr2: [],
|
||
echartArr3: [],
|
||
num1: '',
|
||
num2: '',
|
||
num3: '',
|
||
gridArr1: [],
|
||
gridArr2: [],
|
||
gridArr3: [],
|
||
gridArr4: [],
|
||
gridArr5: []
|
||
}
|
||
},
|
||
computed: {
|
||
defaultOption1 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 4, // 开始无缝滚动的数据量 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: 4, // 开始无缝滚动的数据量 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)
|
||
}
|
||
},
|
||
defaultOption3 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 1, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
},
|
||
defaultOption4 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 10, // 开始无缝滚动的数据量 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)
|
||
}
|
||
},
|
||
defaultOption5 () {
|
||
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)
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this._getDeviceTime()
|
||
this._getDeviceFault()
|
||
this._getDeviceNumber()
|
||
this._getDeviceRunStatus()
|
||
this._getDeviceYearStatus()
|
||
this._getDeviceYearMainPlan()
|
||
this._getDeviceGroupStatus()
|
||
this._getTodayTask()
|
||
this.refresh()
|
||
},
|
||
beforeDestroy () {
|
||
window.clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
refresh () {
|
||
this.timer = setInterval(() => {
|
||
this._getDeviceTime()
|
||
this._getDeviceFault()
|
||
this._getDeviceNumber()
|
||
this._getDeviceRunStatus()
|
||
this._getDeviceYearStatus()
|
||
this._getDeviceYearMainPlan()
|
||
this._getDeviceGroupStatus()
|
||
this._getTodayTask()
|
||
}, this.interTime)
|
||
},
|
||
/** 每日开机时长 */
|
||
async _getDeviceTime () {
|
||
let res = await getDeviceTime()
|
||
if (res.code === '1') {
|
||
this.echartArr1 = [...res.srb.device_time_arr]
|
||
this.setEchart1()
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
setEchart1 () {
|
||
let option = {
|
||
grid: {
|
||
top: 60,
|
||
left: 0,
|
||
right: 58,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: '10%',
|
||
right: '10%',
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: 12,
|
||
lineHeight: 16,
|
||
padding: [0, 0, 0, 0]
|
||
},
|
||
itemGap: 10,
|
||
itemWidth: 14,
|
||
itemHeight: 5,
|
||
data: ['棒料事业部', '矿用合金事业部', '型材事业部', '混合料厂', '武汉运营保障部', '精密零件事业部']
|
||
},
|
||
// dataZoom: [
|
||
// {
|
||
// show: false, // 为true滚动条出现
|
||
// type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
// startValue: 0, // 从头开始。
|
||
// endValue: 5 // end百分比显示范围，endValue具体显示几个数值
|
||
// }
|
||
// ],
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 13
|
||
},
|
||
rotate: -45
|
||
},
|
||
data: this.echartArr1.map((it) => it.device_date)
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '棒料事业部',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: '#0E90FD'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 0.1
|
||
}
|
||
], false)
|
||
}
|
||
},
|
||
data: this.echartArr1.map((it) => it.dept_name_bl)
|
||
},
|
||
{
|
||
name: '矿用合金事业部',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: '#33CCCC'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(38,191,191,0.50)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.00)'
|
||
}
|
||
], false)
|
||
}
|
||
},
|
||
data: this.echartArr1.map((it) => it.dept_name_ky)
|
||
},
|
||
{
|
||
name: '型材事业部',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: '#B68845'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
], false)
|
||
}
|
||
},
|
||
data: this.echartArr1.map((it) => it.dept_name_xc)
|
||
},
|
||
{
|
||
name: '混合料厂',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: 'rgba(155, 155, 226, 0.8)'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(155, 155, 226, 0.8)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(155, 155, 226, 0)'
|
||
}
|
||
], false)
|
||
}
|
||
},
|
||
data: this.echartArr1.map((it) => it.dept_name_hh)
|
||
},
|
||
{
|
||
name: '武汉运营保障部',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: '#6de82d'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#6de82d',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#d9ff7d',
|
||
opacity: 1
|
||
}
|
||
], false)
|
||
}
|
||
},
|
||
data: this.echartArr1.map((it) => it.dept_name_wh)
|
||
},
|
||
{
|
||
name: '精密零件事业部',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: 'rgba(217, 31, 44, 1)'
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#D91F2C'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#FFFFFF'
|
||
}
|
||
], false)
|
||
}
|
||
},
|
||
data: this.echartArr1.map((it) => it.dept_name_jm)
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d2')
|
||
this.myCharts1 = this.$echarts.init(echart)
|
||
this.myCharts1.setOption(option)
|
||
// this.autoMove(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts1.resize()
|
||
})
|
||
},
|
||
/** 年故障类别TOP10 */
|
||
async _getDeviceFault () {
|
||
let res = await getDeviceFault()
|
||
if (res.code === '1') {
|
||
let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
|
||
res.srb.device_fault_arr.map((e, i) => {
|
||
this.$set(e, 'color', colors[i])
|
||
})
|
||
this.echartArr2 = [...res.srb.device_fault_arr]
|
||
this.setEchart2()
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
setEchart2 () {
|
||
let max = 0
|
||
this.echartArr2.map(el => {
|
||
if (Number(el.device_fault_num) >= Number(max)) {
|
||
max = Number(el.device_fault_num)
|
||
}
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 0,
|
||
left: 0,
|
||
right: 25,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
// dataZoom: [
|
||
// {
|
||
// show: false, // 为true滚动条出现
|
||
// type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
// startValue: 0, // 从头开始。
|
||
// endValue: 5 // end百分比显示范围，endValue具体显示几个数值
|
||
// }
|
||
// ],
|
||
xAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
max: max,
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
// align: 'center'
|
||
}
|
||
},
|
||
formatter: '{value}'
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
inverse: true,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
data: this.echartArr2.map((it) => it.device_fault_type)
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
barWidth: '16',
|
||
zlevel: 1,
|
||
label: {
|
||
show: true,
|
||
position: 'right', // 位置
|
||
color: '#A7D6F4',
|
||
fontSize: 14,
|
||
distance: 15, // 距离
|
||
formatter: '{c}' // 这里是数据展示的时候显示的数据
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: '#2DB796'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#6BBBA8'
|
||
}
|
||
], false)
|
||
}
|
||
},
|
||
data: this.echartArr2.map((it) => it.device_fault_num)
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d3')
|
||
this.myCharts2 = this.$echarts.init(echart)
|
||
this.myCharts2.setOption(option)
|
||
// this.autoMove(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts2.resize()
|
||
})
|
||
},
|
||
/** 设备数量 */
|
||
async _getDeviceNumber () {
|
||
let res = await getDeviceNumber()
|
||
if (res.code === '1') {
|
||
this.num1 = res.srb.device_all_num
|
||
this.num2 = res.srb.device_use_num
|
||
this.num3 = res.srb.device_request_num
|
||
let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
|
||
res.srb.device_all_arr.map((e, i) => {
|
||
this.$set(e, 'color', colors[i])
|
||
})
|
||
this.echartArr3 = [...res.srb.device_all_arr]
|
||
this.setEchart3()
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
setEchart3 () {
|
||
let arr = []
|
||
this.echartArr3.map(el => {
|
||
arr.push({name: el.dept_name, value: parseFloat(el.device_num), itemStyle: {color: el.color}})
|
||
})
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
name: '区域',
|
||
type: 'pie',
|
||
radius: ['75%', '100%'],
|
||
center: ['50%', '50%'],
|
||
roseType: 'radius',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: arr
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d4')
|
||
if (this.myCharts3 !== '') {
|
||
this.myCharts3.dispose()
|
||
}
|
||
if (echart !== null) {
|
||
this.myCharts3 = this.$echarts.init(echart)
|
||
this.myCharts3.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts3.resize()
|
||
})
|
||
}
|
||
},
|
||
/** 设备运行状态 */
|
||
async _getDeviceRunStatus () {
|
||
let res = await getDeviceRunStatus()
|
||
if (res.code === '1') {
|
||
this.gridArr1 = [...res.srb.device_run_arr]
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 设备年计划保养状态 */
|
||
async _getDeviceYearStatus () {
|
||
let res = await getDeviceYearStatus()
|
||
if (res.code === '1') {
|
||
this.gridArr2 = [...res.srb.device_year_arr]
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 年保养计划监控 */
|
||
async _getDeviceYearMainPlan () {
|
||
let res = await getDeviceYearMainPlan()
|
||
if (res.code === '1') {
|
||
this.gridArr3 = [...res.srb.device_year_arr]
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 近30天班组情况 */
|
||
async _getDeviceGroupStatus () {
|
||
let res = await getDeviceGroupStatus()
|
||
if (res.code === '1') {
|
||
this.gridArr4 = [...res.srb.device_group_arr]
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 当日任务列表 */
|
||
async _getTodayTask () {
|
||
let res = await getTodayTask()
|
||
if (res.code === '1') {
|
||
this.gridArr5 = [...res.srb.device_group_arr]
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@css/mixin'
|
||
.goods_shelves
|
||
_wh(100%, calc(100% - .75rem))
|
||
padding .3rem .3rem .4rem .3rem
|
||
_bis('../assets/images/item_2.png', 100%, auto, center, bottom)
|
||
.yard-wrap
|
||
_wh(100%, 100%)
|
||
clear both
|
||
.content_left
|
||
float left
|
||
_wh(24%, 100%)
|
||
border-top .03rem solid #0092df
|
||
background linear-gradient(rgba(15, 44, 84, 0.6) 0%, rgb(0, 24, 57) 100%)
|
||
overflow hidden
|
||
.content_center
|
||
float left
|
||
_wh(calc(52% - .4rem), 100%)
|
||
margin 0 .2rem
|
||
padding .32rem .2rem .2rem .2rem
|
||
overflow hidden
|
||
_bis('../assets/images/item_1.png', 100%, 100%)
|
||
.center_wrap
|
||
_wh(100%, 100%)
|
||
.item_wrap
|
||
_wh(100%, 45%)
|
||
.item_wrap_1
|
||
height 30%
|
||
.item_wrap_2
|
||
height calc(33% - .125rem)
|
||
margin-top .125rem
|
||
.item_wrap_3
|
||
height 40%
|
||
.item_wrap_5
|
||
height 34%
|
||
.item_wrap_4
|
||
height 60%
|
||
.tip_item
|
||
position relative
|
||
height .42rem
|
||
padding 0 .2rem
|
||
background linear-gradient(0deg, rgb(15, 44, 84) 0%, rgb(0, 8, 50) 100%)
|
||
p
|
||
display inline-block
|
||
_font(.18rem, .40rem, #fff)
|
||
border-bottom .02rem solid #53cdf9
|
||
.tip_item_bg1
|
||
position absolute
|
||
bottom -0.01rem
|
||
left .2rem
|
||
_wh(.06rem, .06rem)
|
||
background-color #53cdf9
|
||
transform rotate(45deg)
|
||
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
||
.echart_wrap
|
||
_wh(100%, calc(100% - .5rem))
|
||
padding .2rem
|
||
.echart_wrap_1
|
||
padding-bottom 0
|
||
.echart_wrap_2
|
||
_wh(100%, 100%)
|
||
_fj()
|
||
.grid_wrap
|
||
_wh(calc(100% - .4rem), calc(100% - .7rem))
|
||
margin .08rem .2rem .2rem .2rem
|
||
border .01rem solid rgba(8,205,248,0.3)
|
||
overflow hidden
|
||
.grid_wrap_1
|
||
margin-left 0
|
||
margin-right 0
|
||
margin-bottom 0
|
||
width 100%
|
||
height calc(100% - .5rem)
|
||
.scroll_tab_1
|
||
_wh(100%, .4rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
li
|
||
float left
|
||
width 17%
|
||
_font(.12rem,.4rem,#78B1DE,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .04rem
|
||
overflow hidden
|
||
box-sizing border-box
|
||
&:nth-child(1)
|
||
width 32%
|
||
.scroll_container_1
|
||
overflow hidden
|
||
.scroll_tab_2 li
|
||
width 15% !important
|
||
.scroll_tab_2 li:nth-child(1)
|
||
width 25% !important
|
||
.scroll_tab_3 li
|
||
width 10% !important
|
||
.scroll_tab_3 li:nth-child(1)
|
||
width 10% !important
|
||
.scroll_tab_4 li
|
||
&:nth-child(1)
|
||
width 30% !important
|
||
&:nth-child(2), &:nth-child(3)
|
||
width 15% !important
|
||
&:nth-child(4), &:nth-child(5)
|
||
width 20% !important
|
||
.scroll_tab_5 li
|
||
&:nth-child(1), &:nth-child(2), &:nth-child(4), &:nth-child(5)
|
||
width 18% !important
|
||
&:nth-child(6)
|
||
width 8% !important
|
||
&:nth-child(3), &:nth-child(7)
|
||
width 10% !important
|
||
.content-block-scroll-ul_1
|
||
li
|
||
_wh(100%, .44rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
&:nth-child(even)
|
||
background rgba(1,24,52,0.60)
|
||
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
|
||
&:last-child
|
||
border-bottom none
|
||
.content-block-scroll-ul_1
|
||
li
|
||
.scroll-ul_1_div
|
||
float left
|
||
_wh(17%, .44rem)
|
||
_fj(center)
|
||
_font(.12rem, .44rem, #fff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .04rem
|
||
overflow hidden
|
||
&:nth-child(1)
|
||
width 32%
|
||
.progress_line_wrap
|
||
position relative
|
||
_wh(1.35rem, .03rem)
|
||
background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
|
||
.progress_dot_wrap
|
||
position absolute
|
||
_wh(100%, .15rem)
|
||
top -.06rem
|
||
left -.05rem
|
||
.progress_dot
|
||
position absolute
|
||
top 0
|
||
left 0
|
||
_wh(.15rem, .15rem)
|
||
background center center / 100% 100% url(../assets/images/dot_1.png) no-repeat
|
||
.content-block-scroll-ul_2 li .scroll-ul_1_div
|
||
width 15% !important
|
||
.content-block-scroll-ul_2 li .scroll-ul_1_div:nth-child(1)
|
||
width 25% !important
|
||
.content-block-scroll-ul_3 li .scroll-ul_1_div
|
||
width 10% !important
|
||
.content-block-scroll-ul_3 li .scroll-ul_1_div:nth-child(1)
|
||
width 10% !important
|
||
.content-block-scroll-ul_4 li .scroll-ul_1_div
|
||
&:nth-child(1)
|
||
width 30% !important
|
||
&:nth-child(2), &:nth-child(3)
|
||
width 15% !important
|
||
&:nth-child(4), &:nth-child(5)
|
||
width 20% !important
|
||
.content-block-scroll-ul_5 li .scroll-ul_1_div
|
||
&:nth-child(1), &:nth-child(2), &:nth-child(4), &:nth-child(5)
|
||
width 18% !important
|
||
&:nth-child(6)
|
||
width 8% !important
|
||
&:nth-child(3), &:nth-child(7)
|
||
width 10% !important
|
||
.num_items
|
||
_wh(100%, 100%)
|
||
_fj(space-evenly)
|
||
flex-direction: column
|
||
.right_1_up_right_item
|
||
_wh(100%, 31%)
|
||
background center bottom / 100% 100% url(../assets/images/item_3.png) no-repeat
|
||
_fj(space-evenly)
|
||
flex-direction column
|
||
margin-bottom 3.5%
|
||
&:last-child
|
||
margin-bottom 0
|
||
.right_1_up_p1
|
||
display flex
|
||
align-items center
|
||
height 50%
|
||
_font(.2rem, 1, #78B1DE, 700, center)
|
||
.right_1_up_p2
|
||
display flex
|
||
align-items center
|
||
height 50%
|
||
_font(.22rem, 1, #fff, 700, center)
|
||
.echart_wrap_l
|
||
_fj()
|
||
_wh(70%, 100%)
|
||
padding-right .4rem
|
||
background right center / .02rem 100% url(../assets/images/item_4.png) no-repeat
|
||
.echart_wrap_l_l
|
||
_wh(50%, 100%)
|
||
padding-right .4rem
|
||
.echart_wrap_l_wrap
|
||
_wh(50%, 100%)
|
||
.echart_wrap_r
|
||
_wh(30%, 100%)
|
||
padding-left .2rem
|
||
_fj(,flex-start)
|
||
flex-direction column
|
||
.right_1_down_inner_3_i
|
||
_wh(100%, .39rem)
|
||
_fj()
|
||
background center bottom / 100% 100% url(../assets/images/item_5.png) no-repeat
|
||
.right_1_down_inner_3_l
|
||
_wh(60%, 100%)
|
||
overflow hidden
|
||
clear both
|
||
span
|
||
display block
|
||
float left
|
||
&:nth-child(1)
|
||
_wh(.0725rem, .39rem)
|
||
margin-left .15rem
|
||
_fj()
|
||
overflow hidden
|
||
i
|
||
display block
|
||
_wh(.0725rem, .0725rem)
|
||
border-radius 100%
|
||
&:nth-child(2)
|
||
_wh(calc(100% - 0.2825rem), .39rem)
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .39rem, #fff,400,)
|
||
margin-left .06rem
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
.right_1_down_inner_3_r
|
||
_wh(40%, 100%)
|
||
line-height .39rem
|
||
overflow hidden
|
||
text-align right
|
||
span
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .39rem, #fff,700,)
|
||
&:nth-child(1)
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .39rem, #00D5FF,700,)
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
</style>
|