<template>
|
<div class="item">
|
<div class="item-t">{{props.data.name}}</div>
|
<div class="item-c">
|
<div class="warning-num">
|
<div class="title">报警数量</div>
|
<div class="num">{{props.data.warnNum}}</div>
|
</div>
|
<div class="warning-charts" ref="lineChartRef"></div>
|
<div class="type-charts" ref="pieChartRef"></div>
|
<div class="gongdan">
|
<div class="title">待处理工单数量</div>
|
<div class="num">{{ props.data.orderNum }}</div>
|
</div>
|
<div class="status">
|
<div class="status-item">
|
<div class="status1">
|
<div class="title">巡检进度</div>
|
<div class="btn btn-org" v-if="props.data.xunjian.status === 0">待保养</div>
|
<div class="btn btn-parmity" v-else-if="props.data.xunjian.status === 1">进行中</div>
|
<div class="btn btn-success" v-else>已完成</div>
|
</div>
|
<div class="status2">
|
<div class="title">上次巡检时间</div>
|
<div class="time">{{props.data.xunjian.time}}</div>
|
</div>
|
</div>
|
<div class="status-item">
|
<div class="status1">
|
<div class="title">保养进度</div>
|
<div class="btn btn-org" v-if="props.data.baoyang.status === 0">待保养</div>
|
<div class="btn btn-parmity" v-else-if="props.data.baoyang.status === 1">进行中</div>
|
<div class="btn btn-success" v-else>已完成</div>
|
</div>
|
<div class="status2">
|
<div class="title">上次保养时间</div>
|
<div class="time">{{props.data.baoyang.time}}</div>
|
</div>
|
</div>
|
<div class="status-item">
|
<div class="status1">
|
<div class="title">维修进度</div>
|
<div class="btn btn-org" v-if="props.data.weixiu.status === 0">待保养</div>
|
<div class="btn btn-parmity" v-else-if="props.data.weixiu.status === 1">进行中</div>
|
<div class="btn btn-success" v-else>已完成</div>
|
</div>
|
<div class="status2">
|
<div class="title">上次维修时间</div>
|
<div class="time">{{ props.data.weixiu.time }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
<script setup>
|
import {ref, onMounted} from "vue";
|
import * as echarts from 'echarts/core';
|
import { GridComponent, TitleComponent } from 'echarts/components';
|
import { LineChart, PieChart } from 'echarts/charts';
|
import { UniversalTransition } from 'echarts/features';
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
echarts.use([GridComponent, TitleComponent, LineChart, PieChart, CanvasRenderer, UniversalTransition]);
|
|
|
const props = defineProps({
|
data: {
|
type: Object,
|
default: () => {}
|
}
|
})
|
|
const lineChartRef = ref()
|
const pieChartRef = ref()
|
let lineCharts = null;
|
let pieCharts = null;
|
|
const initLineCharts = () => {
|
if(lineChartRef.value) {
|
lineCharts = echarts.init(lineChartRef.value);
|
const option = {
|
title: {
|
text:'历史报警数量统计',
|
textStyle:{
|
color: '#FFF'
|
}
|
},
|
grid: {
|
top: 40,
|
bottom: 40,
|
left: 40
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: props.data.historyData.xdata,
|
axisLabel: {
|
color: '#fff',
|
fontSize: '0.8rem',
|
rotate: 30,
|
},
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
color: '#fff',
|
fontSize: '0.8rem',
|
}
|
},
|
tooltip: {
|
show: true
|
},
|
series: [
|
{
|
data: props.data.historyData.sdata,
|
type: 'line',
|
smooth: true,
|
areaStyle: {}
|
}
|
]
|
};
|
lineCharts.setOption(option)
|
}
|
}
|
|
const initPieCharts = () => {
|
if(pieChartRef.value) {
|
pieCharts = echarts.init(pieChartRef.value);
|
const option = {
|
title: {
|
text: '报警类型占比',
|
textStyle:{
|
color: '#FFF'
|
}
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: '60%',
|
data: props.data.warnData,
|
}
|
]
|
};
|
pieCharts.setOption(option)
|
}
|
}
|
|
onMounted(() => {
|
initLineCharts()
|
initPieCharts()
|
})
|
</script>
|
|
|
<style scoped lang="scss">
|
.item{
|
width: 100%;
|
height: 100%;
|
background: url("@/assets/images_lc/H_100_bg.png") no-repeat;
|
background-size: 100% 100%;
|
.item-t{
|
background: url("@/assets/images_lc/title_font.png") no-repeat;
|
padding-left: 12%;
|
color: #fff;
|
font-size: 1.2rem;
|
}
|
.item-c{
|
height: 96%;
|
padding: 1rem;
|
.warning-num,
|
.gongdan{
|
height: 5%;
|
display: flex;
|
justify-content: space-between;
|
color: #fff;
|
font-size: 1.5rem;
|
padding: 0 0 0.5rem 0;
|
.num{
|
width: 30%;
|
}
|
}
|
.warning-charts{
|
height: 30%;
|
}
|
.type-charts{
|
height: 30%;
|
}
|
.status{
|
height: 30%;
|
padding-top: 0.5rem;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
color: #fff;
|
&-item{
|
height: 30%;
|
}
|
.status1{
|
display: flex;
|
align-items: center;
|
font-size: 1.2rem;
|
.title{
|
width: 30%;
|
text-align: right;
|
margin-right: 6rem;
|
}
|
.btn{
|
width: 7rem;
|
height: 2.3rem;
|
text-align: center;
|
line-height: 2.2rem;
|
border-radius: 0.2rem;
|
}
|
.btn-parmity{
|
background: #1775E3;
|
box-shadow: 0 0 10px 0 #1775E3;
|
}
|
.btn-org{
|
background: #E37617;
|
box-shadow: 0 0 10px 0 #E37617;
|
}
|
.btn-success{
|
background: #17E39B;
|
box-shadow: 0 0 10px 0 #17E39B;
|
}
|
}
|
.status2{
|
margin-top: 0.5rem;
|
display: flex;
|
.title{
|
width: 30%;
|
text-align: right;
|
margin-right: 6rem;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
