<template>
|
<div class="statistics-of-equipments-page-compontent-a">
|
<!-- 设备数量 -->
|
<div class="top-header">
|
<div class="num-block">
|
<span class="icon iconfont icon-equipment"></span>
|
<span class="text">设备总数：{{totals.ALL_Count}}</span>
|
</div>
|
<div class="num-block">
|
<span class="icon iconfont icon-equipment"></span>
|
<span class="text">正常：{{totals.Normal_Count}}</span>
|
</div>
|
<div class="num-block">
|
<span class="icon iconfont icon-equipment"></span>
|
<span class="text">异常：{{totals.Abnormal_Count}}</span>
|
</div>
|
<div class="num-block">
|
<span class="icon iconfont icon-equipment"></span>
|
<span class="text">运行中：{{totals.NoFree_Count}}</span>
|
</div>
|
<div class="num-block">
|
<span class="icon iconfont icon-equipment"></span>
|
<span class="text">空闲中：{{totals.Free_Count}}</span>
|
</div>
|
</div>
|
<!-- 设备故障统计 -->
|
<div class="eqp-fault-statistics">
|
<div class="top-header">
|
<span class="title">设备故障统计</span>
|
<div class="query-form-box" @click.stop="">
|
<span class="form-label">日期：</span>
|
<el-date-picker v-model="formDateRange" size="small" class="default-form-width" value-format="YYYY-MM-DD" type="daterange" />
|
</div>
|
</div>
|
<div class="flex-view">
|
<div class="chart-view" :id="chartid"></div>
|
<div class="list-view">
|
<el-scrollbar>
|
<div class="list-item" v-for="(item,index) in totalList" :key="'total-'+index">
|
<div class="serial-numberr-view">
|
<div class="number-circle" :class="[index<3?'important':'']"><div>{{index+1}}</div></div>
|
</div>
|
<div class="name-view auto-wrap">{{item.Name}}</div>
|
<div class="count-view">{{item.Count}}</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</div>
|
</div>
|
<!-- ********* -->
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import { markRaw } from 'vue'
|
export default {
|
name:'statisticsOfEquipmentsPageCompontentA',
|
props:{
|
totals:{
|
type:Object,
|
default:function(){
|
return {}
|
}
|
}
|
},
|
data(){
|
return {
|
formDateRange:[],
|
totalList:[],
|
dateRangeList:[],
|
chartid:'',
|
chart:null,
|
defaultOption:{
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend:{
|
show:true
|
},
|
grid: {
|
left: 30,
|
right: 50,
|
bottom: 70
|
},
|
xAxis: {
|
data: []
|
},
|
yAxis: {},
|
dataZoom: [
|
{
|
startValue: '2014-06-01',
|
type: 'slider'
|
}
|
],
|
series: []
|
}
|
}
|
},
|
created() {
|
this.chartid = 'chart-'+new Date().getTime();
|
this.setDefaultDateRange();
|
},
|
beforeDestroy() {
|
this.destoryChart()
|
},
|
methods:{
|
setDefaultDateRange(){
|
let _date = this.$utils.project.dayjs();
|
let _tempArr = [_date.format('YYYY-MM-DD')]
|
_date = _date.subtract(1, 'month').add(1, 'day')
|
_tempArr.unshift(_date.format('YYYY-MM-DD'))
|
this.formDateRange = _tempArr;
|
},
|
createChart(){
|
if (!this.chart) {
|
this.chart = markRaw(echarts.init(window.document.getElementById(this.chartid)))
|
}
|
},
|
getChartData(needloading=true,callback){
|
if (needloading) {
|
this.$loading();
|
}
|
let params = {};
|
if (this.formDateRange && this.formDateRange[0] && this.formDateRange[1]) {
|
params.StartTime = this.formDateRange[0] + ' 00:00:00'
|
params.EndTime = this.formDateRange[1] + ' 23:59:59'
|
Promise.all([
|
this.$api.get('GetAllFaultStatistics',params,{block:'warning'}),
|
this.$api.get('GetFaultStatistics',params,{block:'warning'})
|
]).then((response)=>{
|
this.parseTotalList(response[0] || [])
|
this.dateRangeList = response[1] || []
|
this.createChart();
|
this.drawChart();
|
if (needloading) {
|
this.$loading().close();
|
}
|
callback && callback(true)
|
}).catch(()=>{
|
if (needloading) {
|
this.$loading().close();
|
}
|
callback && callback(false)
|
})
|
} else {
|
if (needloading) {
|
this.$loading().close();
|
}
|
this.$alert('请确认日期区间！','系统提示')
|
callback && callback(false);
|
}
|
},
|
parseTotalList(arr){
|
let newArr = [];
|
arr.forEach((item)=>{
|
let _flag = false;
|
for (let i=0;i<newArr.length;i++) {
|
if (item.Count>newArr[i].Count) {
|
newArr.splice(i,0,item);
|
_flag = true;
|
break;
|
}
|
}
|
if (!_flag) {
|
newArr.push(item)
|
}
|
})
|
this.totalList = newArr;
|
},
|
drawChart(){
|
if (this.dateRangeList.length<=0) return false;
|
let opt = JSON.parse(JSON.stringify(this.defaultOption))
|
let seriesArr = [];
|
opt.dataZoom[0].startValue = this.$utils.project.parseTimeStr(this.dateRangeList[0].Time,'YYYY-MM-DD')
|
this.dateRangeList[0].data.forEach((curentItem)=>{
|
seriesArr.push({name:curentItem.Name,type:'line',data:[],smooth: true})
|
})
|
for (let i=0;i<this.dateRangeList.length;i++) {
|
opt.xAxis.data.push(this.$utils.project.parseTimeStr(this.dateRangeList[i].Time,'YYYY-MM-DD'))
|
for (let j=0;j<this.dateRangeList[i].data.length;j++) {
|
seriesArr[j].data.push(this.dateRangeList[i].data[j].Count)
|
}
|
}
|
opt.series = seriesArr;
|
this.chart.setOption(opt)
|
},
|
destoryChart(){
|
try{
|
this.chart.dispose();
|
window.document.getElementById(this.chartid).innerHTML = '';
|
this.chart = null;
|
}catch(e){
|
//TODO handle the exception
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.statistics-of-equipments-page-compontent-a{
|
&>.top-header{
|
display: flex;
|
padding: 24px 0;
|
.num-block{
|
flex-grow: 1;
|
width: 100px;
|
font-size: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.icon{
|
margin-right: 10px;
|
font-size: 2em;
|
color: #1296db;
|
}
|
}
|
}
|
.eqp-fault-statistics{
|
padding: 0 24px 24px 24px;
|
height: 300px;
|
display: flex;
|
flex-direction: column;
|
&>.top-header{
|
display: flex;
|
align-items: center;
|
position: relative;
|
flex-shrink: 0;
|
.title{
|
font-family: 'Microsoft Tai Le Bold';
|
font-size: 16px;
|
font-weight: 700;
|
line-height: 32px;
|
}
|
.query-form-box{
|
position: absolute;
|
top:0;
|
right: 0;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
z-index: 2;
|
.eqp-type-select{
|
margin-right: 16px;
|
}
|
}
|
}
|
.flex-view{
|
display: flex;
|
flex: 1;
|
&>*{
|
flex-shrink: 0;
|
box-sizing: border-box;
|
height: 100%;
|
}
|
.chart-view{
|
width: 70%;
|
}
|
.list-view{
|
width: 30%;
|
padding-top: 24px;
|
.list-item{
|
display: flex;
|
padding-bottom: 12px;
|
.serial-numberr-view{
|
width: 36px;
|
flex-shrink: 0;
|
padding-top: 2px;
|
.number-circle{
|
height: 20px;
|
min-width: 20px;
|
border-radius: 10px;
|
color: rgba(0, 0, 0, 0.65);
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #F0F2F5;
|
&.important{
|
background-color: #314659;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.name-view,.count-view{
|
color: rgba(0, 0, 0, 0.65);
|
line-height: 20px;
|
}
|
.name-view{
|
flex: 1;
|
}
|
.count-view{
|
width: 80px;
|
flex-shrink: 0;
|
padding-left: 8px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
