<template>
|
<div class="content">
|
<!-- <el-row :gutter="10">
|
<el-col :span="12">
|
<el-row :gutter="10">
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/qbgd.png"></img>
|
<span>全部工单</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">20<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/gdc.png"></img>
|
<span>工单池</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">2<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/gdc.png"></img>
|
<span>待响应工单</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">1<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="12">
|
<el-row :gutter="10">
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/jxzgd.png"></img>
|
<span>进行中工单</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">3<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/gdc.png"></img>
|
<span>事件池</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">{{eventInfo.pool}}<span class="font-12">个</span> </div>
|
<div>
|
<img v-if="eventInfo.poolLastNum>=0" class='arrow' src="@/assets/images/index/top.png"></img>
|
<img v-if="eventInfo.poolLastNum<0" class='arrow' src="@/assets/images/index/down.png"></img>
|
环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/dxy.png"></img>
|
<span>进行中事件</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">{{eventInfo.wait}}<span class="font-12">个</span> </div>
|
<div>
|
<img v-if="eventInfo.waitLastNum>=0" class='arrow' src="@/assets/images/index/top.png"></img>
|
<img v-if="eventInfo.waitLastNum<0" class='arrow' src="@/assets/images/index/down.png"></img>
|
环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="10" style="margin-top: 10px">
|
<el-col :span="12">
|
<el-row :gutter="10">
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/wtc.png"></img>
|
<span>问题池</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">0<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/dxy.png"></img>
|
<span>待响应问题</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">0<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/gdc.png"></img>
|
<span>变更工单</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">0<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="12">
|
<el-row :gutter="10">
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/dxy.png"></img>
|
<span>待响应变更</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">0<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/fbgd.png"></img>
|
<span>发布工单</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">2<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="flex bg-fff box flex-between">
|
<div class="flex f-c f-col">
|
<img class="icon" src="@/assets/images/index/dxy.png"></img>
|
<span>待响应发布</span>
|
</div>
|
<div class="flex f-e f-col">
|
<div class="font-28">5<span class="font-12">个</span> </div>
|
<div><img class='arrow' src="@/assets/images/index/top.png"></img> 环比上周</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="12">
|
<XMGZD></XMGZD>
|
</el-col>
|
<el-col :span="12">
|
<XYZC></XYZC>
|
</el-col>
|
</el-row>
|
<el-card class="box-card">
|
|
<span style="font-weight: 600;font-size: 20px">工单统计</span>
|
|
<el-row :gutter="10">
|
<el-col :span="6">
|
<SJDJ></SJDJ>
|
</el-col>
|
<el-col :span="6">
|
<GDLX></GDLX>
|
</el-col>
|
<el-col :span="6">
|
<SJGDZB></SJGDZB>
|
</el-col>
|
<el-col :span="6">
|
<progressMY></progressMY>
|
</el-col>
|
</el-row>
|
|
</el-card>-->
|
</div>
|
</template>
|
|
<script>
|
// 创建Context
|
import {formattedDate} from "@/utils/DateFormatter";
|
import * as dash from '@/api/dashboard/dash'
|
// import * as createEvent from "@/api/eventManage/createEvent";
|
const ComponentContext = require.context('./components', false, /\.vue$/i);
|
let res_components = {};
|
// 生成待待注册组件集合
|
ComponentContext.keys().forEach((componentFilePath) => {
|
let comp = ComponentContext(componentFilePath);
|
res_components[componentFilePath.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default;
|
});
|
export default {
|
name: 'Dashboard',
|
components: {...res_components},
|
data() {
|
return {
|
eventInfo:{}
|
};
|
},
|
created() {
|
// this.getEventInfo()
|
|
},
|
methods: {
|
// 获取事件数据
|
getEventInfo(){
|
dash.getEventInfo().then(res => {
|
if (res) {
|
this.eventInfo = res
|
}
|
})
|
}
|
}
|
|
};
|
</script>
|
<style lang="scss" scoped>
|
.content{
|
padding:10px
|
}
|
.box{
|
border-radius: 10px;
|
padding: 20px 0;
|
align-items: flex-end;
|
}
|
.flex{
|
display: flex;
|
}
|
.flex-between{
|
justify-content: space-around;
|
}
|
.f-col{
|
flex-direction: column;
|
}
|
.f-c{
|
align-items: center;
|
}
|
.f-e{
|
align-items: flex-end;
|
}
|
.f-s{
|
align-items: flex-start;
|
}
|
.c-1{
|
color: #11AD6F;
|
}
|
.c-f{
|
color: #FF4B4B;
|
}
|
.font-28{
|
font-size: 28px;
|
}
|
.font-12{
|
font-size: 12px;
|
}
|
.icon{
|
width: 30px;
|
height: 30px;
|
margin-bottom: 10px;
|
}
|
.arrow{
|
width: 12px;
|
height: 12px;
|
}
|
.box-card {
|
margin-top: 10px;
|
width: 100%;
|
border-radius: 10px;
|
border: none;
|
.card-title-right {
|
display: flex;
|
align-items: center;
|
align-self: flex-end;
|
float: right;
|
}
|
}
|
</style>
|
