系统名称修改
This commit is contained in:
parent
0c93b0686f
commit
400aedb4b6
@ -1,121 +1,93 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row
|
||||
:gutter="10"
|
||||
class="firstrow"
|
||||
>
|
||||
<el-row :gutter="10" class="firstrow">
|
||||
<!-- 设备概览-->
|
||||
<el-col
|
||||
:span="16"
|
||||
class="eqinfo"
|
||||
>
|
||||
<el-col
|
||||
:span="8"
|
||||
class="total"
|
||||
>
|
||||
<img src="" />
|
||||
<span class="title">总设备（台）</span>
|
||||
<br />
|
||||
<span class="vlaue">{{eqNumTotal}}</span>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
class="run"
|
||||
>
|
||||
<span class="title">运行中设备（台）</span>
|
||||
<br />
|
||||
<span class="vlaue">{{eqNumRunning}}</span>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
class="notrun"
|
||||
>
|
||||
<span class="title">停运设备（台）</span>
|
||||
<br />
|
||||
<span class="vlaue">{{eqNumOff}}</span>
|
||||
</el-col>
|
||||
<el-col :span="16" class="eqinfo">
|
||||
<el-col :span="8" class="total">
|
||||
<img src=""/>
|
||||
<span class="title">总设备（台）</span>
|
||||
<br/>
|
||||
<span class="vlaue">{{eqNumTotal}}</span>
|
||||
</el-col>
|
||||
<el-col :span="8" class="run">
|
||||
<span class="title">运行中设备（台）</span>
|
||||
<br/>
|
||||
<span class="vlaue">{{eqNumRunning}}</span>
|
||||
</el-col>
|
||||
<el-col :span="8" class="notrun">
|
||||
<span class="title">停运设备（台）</span>
|
||||
<br/>
|
||||
<span class="vlaue">{{eqNumOff}}</span>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<!-- 欢迎-->
|
||||
<el-col
|
||||
:span="8"
|
||||
class="welcome"
|
||||
>
|
||||
<el-col
|
||||
:span="24"
|
||||
class="title"
|
||||
>
|
||||
<el-col :span="8" class="welcome">
|
||||
<el-col :span="24" class="title">
|
||||
<span class="title1">欢迎登录</span>
|
||||
<br />
|
||||
<span class="vlaue">设备预测性维护系统</span>
|
||||
<br/>
|
||||
<span class="vlaue">设备健康管理系统</span>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
:gutter="20"
|
||||
class="secendrow"
|
||||
>
|
||||
<el-col
|
||||
:span="24"
|
||||
class="chart1"
|
||||
>
|
||||
<el-card class="chart1">
|
||||
<div
|
||||
class="echarts-body"
|
||||
ref="patrolChart"
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="20" class="secendrow">
|
||||
<el-col :span="16" class="chart1">
|
||||
<div class="echarts-body" ref="averageRunningTimeEcharts">
|
||||
{{ initAverageRunningTimeEcharts() }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="mytask">
|
||||
<div class="mytasktitle">
|
||||
<span style="font-weight: bold;font-size: 18px">我的待办</span>
|
||||
<span style="float: right;cursor: pointer;" @click="goMyTask">更多</span>
|
||||
</div>
|
||||
<el-table :data="taskList" :border="false" class="taskTable">
|
||||
<el-table-column label="流程名称" align="center" prop="processName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="任务名称" align="center" prop="taskName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="发起人" align="center" prop="starter" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="任务时间" align="center" prop="createTime" width="180" :show-overflow-tooltip="true" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
:gutter="20"
|
||||
class="thirdrow"
|
||||
>
|
||||
<el-col
|
||||
:span="8"
|
||||
class="chart2"
|
||||
>
|
||||
<el-card class="chart2">
|
||||
<div
|
||||
class="echarts-body"
|
||||
ref="classChart"
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="20" class="thirdrow">
|
||||
<el-col :span="16" class="chart2">
|
||||
<div class="echarts-body" ref="shutdownRateEcharts">
|
||||
{{ initShutdownRateEcharts() }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
class="chart2"
|
||||
>
|
||||
<el-card class="chart2">
|
||||
<div
|
||||
class="echarts-body"
|
||||
ref="locationChart"
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
class="chart2"
|
||||
>
|
||||
<el-card class="chart2">
|
||||
<div
|
||||
class="echarts-body"
|
||||
ref="fileChart"
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-col :span="8" class="notice">
|
||||
<div class="noticetitle">
|
||||
<span style="font-weight: bold;font-size: 18px">公告信息</span>
|
||||
</div>
|
||||
<el-table :data="noticeList" :show-header="false">
|
||||
<el-table-column
|
||||
label="公告标题"
|
||||
align="center"
|
||||
prop="noticeTitle"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="公告类型" align="center" prop="noticeType" width="100">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { queryEqNum, loadChartsData } from "@/api/index";
|
||||
import * as echarts from 'echarts';
|
||||
import { listMytask } from "@/api/flowable/mytask";
|
||||
import { listNotice } from "@/api/system/notice";
|
||||
import { queryEqNum , loadChartsData} from "@/api/index";
|
||||
export default {
|
||||
name: "Index",
|
||||
dicts: ["sys_notice_type"],
|
||||
dicts: ['sys_notice_type'],
|
||||
data() {
|
||||
return {
|
||||
//设备总数
|
||||
@ -124,273 +96,284 @@ export default {
|
||||
eqNumRunning: 0,
|
||||
//停运设备数
|
||||
eqNumOff: 0,
|
||||
//待办任务列表数据
|
||||
taskList: [],
|
||||
taskTotal: 0,
|
||||
taskQueryParams:{
|
||||
pageNum: 1,
|
||||
pageSize: 6
|
||||
},
|
||||
noticeList: [],
|
||||
noticeTotal: 0,
|
||||
noticeQueryParams:{
|
||||
pageNum: 1,
|
||||
pageSize: 7
|
||||
},
|
||||
//日平均能运行时长
|
||||
averageRunningTimeEchart:{},
|
||||
shutdownRateEchart:{}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTaskList();
|
||||
this.getEqInfo();
|
||||
this.getNoticeList();
|
||||
this.getChartsData();
|
||||
},
|
||||
methods: {
|
||||
getEqInfo() {
|
||||
queryEqNum().then((response) => {
|
||||
getTaskList(){
|
||||
listMytask(this.taskQueryParams).then(response => {
|
||||
this.taskList = response.rows;
|
||||
this.taskTotal = response.total;
|
||||
});
|
||||
},
|
||||
getNoticeList(){
|
||||
listNotice(this.noticeQueryParams).then(response => {
|
||||
this.noticeList = response.rows;
|
||||
this.noticeTotal = response.total;
|
||||
});
|
||||
},
|
||||
getEqInfo(){
|
||||
queryEqNum().then(response => {
|
||||
this.eqNumTotal = response.data.total;
|
||||
this.eqNumRunning = response.data.run;
|
||||
this.eqNumOff = response.data.notRun;
|
||||
});
|
||||
},
|
||||
getChartsData() {
|
||||
loadChartsData().then((response) => {
|
||||
this.initPatrolChart(
|
||||
response.data.monthList,
|
||||
response.data.dailyList,
|
||||
response.data.meterReadingList,
|
||||
response.data.professionalList
|
||||
);
|
||||
this.initClassChart(response.data.classList);
|
||||
this.initLocationChart(response.data.locationList);
|
||||
this.initFileChart(response.data.fileList);
|
||||
goMyTask(){
|
||||
this.$router.push({
|
||||
path: '/flowable/flowmanage/mytask/index',
|
||||
});
|
||||
},
|
||||
initPatrolChart(monthList, dailyList, meterReadingList, professionalList) {
|
||||
monthList = monthList.map((month) => month + "月");
|
||||
let chart = echarts.init(this.$refs.patrolChart);
|
||||
let option = {
|
||||
title: {
|
||||
text: "近三月点巡检记录统计",
|
||||
left: "center",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
data: ["日常巡检", "抄表巡检", "专业巡检"],
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
initAverageRunningTimeEcharts(){
|
||||
let p = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
p.then(() => {
|
||||
this.averageRunningTimeEchart = echarts.init(this.$refs.averageRunningTimeEcharts)
|
||||
let option = {
|
||||
title:{
|
||||
text:"设备日平均运行时长"
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: { show: false },
|
||||
data: monthList,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick:{show:false},
|
||||
axisLabel:{interval: 0}
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
//设置边距
|
||||
grid:{
|
||||
top: '18%',
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "日常巡检",
|
||||
type: "bar",
|
||||
data: dailyList,
|
||||
},
|
||||
{
|
||||
name: "抄表巡检",
|
||||
type: "bar",
|
||||
data: meterReadingList,
|
||||
},
|
||||
{
|
||||
name: "专业巡检",
|
||||
type: "bar",
|
||||
data: professionalList,
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
initClassChart(data) {
|
||||
let chart = echarts.init(this.$refs.classChart);
|
||||
let option = {
|
||||
title: {
|
||||
text: "设备分类统计",
|
||||
left: "center",
|
||||
},
|
||||
label: { formatter: " {b}：{d}%" },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "设备分类",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
yAxis: {
|
||||
name: '（min）',
|
||||
type: 'value',
|
||||
show: true,
|
||||
axisLine:{show:false},//不显示竖线
|
||||
splitLine:{
|
||||
lineStyle: {
|
||||
type:'dashed'//虚线
|
||||
},
|
||||
},
|
||||
show:true
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
},
|
||||
initLocationChart(data) {
|
||||
let chart = echarts.init(this.$refs.locationChart);
|
||||
let option = {
|
||||
title: {
|
||||
text: "设备分布统计",
|
||||
left: "center",
|
||||
},
|
||||
label: { formatter: " {b}：{d}%" },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "设备分布",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: data,
|
||||
emphasis: {
|
||||
series: [
|
||||
{
|
||||
// data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
color: '#3E7BFA'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.averageRunningTimeEchart.setOption(option);
|
||||
})
|
||||
},
|
||||
initFileChart(data) {
|
||||
let chart = echarts.init(this.$refs.fileChart);
|
||||
let option = {
|
||||
title: {
|
||||
text: "档案分类统计",
|
||||
left: "center",
|
||||
},
|
||||
label: { formatter: " {b}：{d}%" },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "档案分类",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: data,
|
||||
emphasis: {
|
||||
initShutdownRateEcharts(){
|
||||
let p = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
p.then(() => {
|
||||
this.shutdownRateEchart = echarts.init(this.$refs.shutdownRateEcharts);
|
||||
let option = {
|
||||
title:{
|
||||
text:"设备停机率"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick:{show:false},
|
||||
axisLabel:{interval: 0}
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
//设置边距
|
||||
grid:{
|
||||
top: '18%',
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
name: '（%）',
|
||||
type: 'value',
|
||||
show: true,
|
||||
axisLine:{show:false},//不显示竖线
|
||||
splitLine:{
|
||||
lineStyle: {
|
||||
type:'dashed'//虚线
|
||||
},
|
||||
show:true
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// data: [82, 93, 90, 93, 29, 33, 13],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
color: '#3E7BFA'
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(62,123,250,0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255,255,255,0.3)'
|
||||
}
|
||||
])
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
this.shutdownRateEchart.setOption(option);
|
||||
})
|
||||
},
|
||||
},
|
||||
getChartsData(){
|
||||
loadChartsData().then(response => {
|
||||
//设备日运行时长
|
||||
let option1 = {
|
||||
xAxis: {
|
||||
data: response.data.dateList
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: response.data.runTimeList
|
||||
}
|
||||
]
|
||||
}
|
||||
this.averageRunningTimeEchart.setOption(option1);
|
||||
|
||||
let option2 = {
|
||||
xAxis: {
|
||||
data: response.data.dateList
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: response.data.shutdownRateList
|
||||
}
|
||||
]
|
||||
}
|
||||
this.shutdownRateEchart.setOption(option2);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
.firstrow {
|
||||
.firstrow{
|
||||
height: 172px;
|
||||
.eqinfo {
|
||||
.eqinfo{
|
||||
height: 100%;
|
||||
.total {
|
||||
.total{
|
||||
height: 100%;
|
||||
background: url(../assets/images/index/total.png) center no-repeat;
|
||||
background-size: 95% 100%;
|
||||
.title {
|
||||
.title{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
.vlaue {
|
||||
.vlaue{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #3e7bfa;
|
||||
color: #3E7BFA;
|
||||
left: 70px;
|
||||
top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.run {
|
||||
.run{
|
||||
height: 100%;
|
||||
background: url(../assets/images/index/run.png) center no-repeat;
|
||||
background-size: 95% 100%;
|
||||
.title {
|
||||
.title{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
.vlaue {
|
||||
.vlaue{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #06c270;
|
||||
color: #06C270;
|
||||
left: 80px;
|
||||
top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.notrun {
|
||||
.notrun{
|
||||
height: 100%;
|
||||
background: url(../assets/images/index/notRun.png) center no-repeat;
|
||||
background-size: 95% 100%;
|
||||
.title {
|
||||
.title{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
.vlaue {
|
||||
.vlaue{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #ff8800;
|
||||
color: #FF8800;
|
||||
left: 70px;
|
||||
top: 60px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.welcome {
|
||||
.welcome{
|
||||
height: 100%;
|
||||
.title {
|
||||
.title{
|
||||
height: 100%;
|
||||
background: url(../assets/images/index/welcome.png) center no-repeat;
|
||||
background-size: 100% 130%;
|
||||
.title1 {
|
||||
background-size: 100% 130%;
|
||||
.title1{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
color: #FFFFFF;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
.vlaue {
|
||||
.vlaue{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
color: #FFFFFF;
|
||||
left: -40px;
|
||||
top: 60px;
|
||||
position: relative;
|
||||
@ -399,41 +382,35 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.secendrow {
|
||||
.secendrow{
|
||||
height: 383px;
|
||||
margin-top: 20px;
|
||||
.chart1 {
|
||||
.chart1{
|
||||
height: 100%;
|
||||
.echarts-body {
|
||||
.echarts-body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mytask {
|
||||
.mytasktitle {
|
||||
.mytask{
|
||||
.mytasktitle{
|
||||
height: 35px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.thirdrow {
|
||||
.thirdrow{
|
||||
height: 383px;
|
||||
margin-top: 20px;
|
||||
.chart2 {
|
||||
.chart2{
|
||||
height: 100%;
|
||||
.echarts-body {
|
||||
.echarts-body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.el-card__body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user