802 lines
32 KiB
Vue
802 lines
32 KiB
Vue
<template>
|
|
<!-- 监控统计 -->
|
|
<vue-scroll style="height: 100%">
|
|
<div class="realTimeData_info flex">
|
|
<div class="abnormalPperation">
|
|
<div class="head">
|
|
<!-- 司机异常操作 -->
|
|
{{ $t('message.towerCrane.abnormalOperationOfDriver') }}
|
|
</div>
|
|
<el-select v-model="devSn" style="margin-right: 10px;width: 180px" clearable size="medium" :placeholder="$t('message.towerCrane.equipmentSelection')">
|
|
<el-option
|
|
v-for="item in devList"
|
|
:key="item.id"
|
|
:label="item.devName"
|
|
:value="item.devSn">
|
|
</el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
style="width: 220px"
|
|
size="medium"
|
|
v-model="value1"
|
|
type="daterange"
|
|
range-separator="-"
|
|
:start-placeholder="$t('message.towerCrane.startDate')"
|
|
:end-placeholder="$t('message.towerCrane.endDate')">
|
|
</el-date-picker>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 10px;color: #409EFF;border-color: #409EFF;"
|
|
@click="query1"
|
|
>
|
|
<!-- 查询 -->
|
|
{{ $t('message.towerCrane.query') }}
|
|
</el-button>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 10px;color: #409EFF;border-color: #409EFF;"
|
|
@click="refresh1"
|
|
>
|
|
<!-- 刷新 -->
|
|
{{ $t('message.towerCrane.refresh') }}
|
|
</el-button>
|
|
<div class="radarChartBox">
|
|
<div class="radarChart" ref="echart1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="equipmentAlarm">
|
|
<div style="display:flex;justify-content: space-between;margin-bottom: 10px;">
|
|
<div class="head">
|
|
<!-- 设备告警 -->
|
|
{{ $t('message.towerCrane.equipmentAlarm') }}
|
|
</div>
|
|
<div>
|
|
<el-date-picker
|
|
class="serarch_picker"
|
|
style="width: 220px !important;"
|
|
size="medium"
|
|
v-model="value2"
|
|
type="daterange"
|
|
range-separator="-"
|
|
:start-placeholder="$t('message.towerCrane.startDate')"
|
|
:end-placeholder="$t('message.towerCrane.endDate')">
|
|
</el-date-picker>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
|
|
|
|
@click="query2"
|
|
>
|
|
<!-- 查询 -->
|
|
{{ $t('message.towerCrane.query') }}
|
|
</el-button>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
|
|
@click="refresh2"
|
|
>
|
|
<!-- 刷新 -->
|
|
{{ $t('message.towerCrane.refresh') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="icon" :class="styleType == 3 ? 'icon2' : ''">
|
|
<div class="icon_item" v-for="(item,index) in colorList" :key="index">
|
|
<div v-if="index == 0 || index == 2" class="titleColor"></div>
|
|
<div v-if="index == 1 || index == 2" class="titleColor2"></div>
|
|
<div class="colorTitle">{{item.title}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="radarChartBox">
|
|
<div class="echart2" ref="echart2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="equipmentAlarmRecord">
|
|
<div style="display:flex;justify-content: space-between;margin-bottom: 10px;">
|
|
<div class="head">
|
|
<!-- 设备运行数据 -->
|
|
{{ $t('message.towerCrane.equipmentOperationData') }}
|
|
</div>
|
|
<div class="search-box">
|
|
<el-date-picker
|
|
class="serarch_picker"
|
|
size="medium"
|
|
v-model="value3"
|
|
type="daterange"
|
|
range-separator="-"
|
|
:start-placeholder="$t('message.towerCrane.startDate')"
|
|
:end-placeholder="$t('message.towerCrane.endDate')">
|
|
</el-date-picker>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
|
|
@click="query3"
|
|
>
|
|
<!-- 查询 -->
|
|
{{ $t('message.towerCrane.query') }}
|
|
</el-button>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
|
|
@click="refresh3"
|
|
>
|
|
<!-- 刷新 -->
|
|
{{ $t('message.towerCrane.refresh') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="radarChartBox">
|
|
<div class="echart3" ref="echart3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="workingHoursRecord">
|
|
<div style="display:flex;justify-content: space-between;margin-bottom: 10px;">
|
|
<div class="head">
|
|
<!-- 设备工作时长吊次记录 -->
|
|
{{ $t('message.towerCrane.liftingTimesRecord') }}
|
|
</div>
|
|
<div>
|
|
<el-date-picker
|
|
class="serarch_picker"
|
|
size="medium"
|
|
v-model="value4"
|
|
type="daterange"
|
|
range-separator="-"
|
|
:start-placeholder="$t('message.towerCrane.startDate')"
|
|
:end-placeholder="$t('message.towerCrane.endDate')">
|
|
</el-date-picker>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
|
|
@click="query4"
|
|
>
|
|
<!-- 查询 -->
|
|
{{ $t('message.towerCrane.query') }}
|
|
</el-button>
|
|
<el-button
|
|
size="medium"
|
|
style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
|
|
@click="refresh4"
|
|
>
|
|
<!-- 刷新 -->
|
|
{{ $t('message.towerCrane.refresh') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="radarChartBox">
|
|
<div class="echart4" ref="echart4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- //查看当前设备基本信息 -->
|
|
</vue-scroll>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4';;
|
|
import {
|
|
getTowerListApi,
|
|
selectDriverTowerAbnormalCountApi,//查询司机异常操作产生的报警数
|
|
selectTowerAlarmCountApi,//统计塔吊设备指定时间段内报警、预警、故障次数
|
|
selectTowerLoadAndMileageApi,//统计塔吊的吊重和吊程
|
|
selectTowerWorkCycleCountApi,//统计塔吊的吊次和工作时长
|
|
} from "@/assets/js/api/towerCrane"
|
|
export default {
|
|
props:['sn'],
|
|
data() {
|
|
return{
|
|
styleType:'',
|
|
chart1:Object,
|
|
option1:{},
|
|
value1:'',
|
|
dataList1:[],//司机异常操作
|
|
chart2:Object,
|
|
option2:{},
|
|
value2:'',
|
|
devNameList:[],//设备名称
|
|
warningNumList:[],//预警次数
|
|
alarmNumList:[],//报警次数
|
|
faultNumList:[],//故障次数
|
|
chart3:Object,
|
|
option3:{},
|
|
value3:'',
|
|
devNameList2:[],//设备名称
|
|
totalLoadingList:[],//吊重
|
|
totalWorkMileageList:[],//吊程
|
|
chart4:Object,
|
|
option4:{},
|
|
value4:[],
|
|
devList:[],
|
|
cycleNumList:[],//吊次
|
|
timeNumList:[],//时长
|
|
devNameList3:[],//设备名称
|
|
maxNum:'',
|
|
colorList:[
|
|
{
|
|
title:this.$t('message.towerCrane.numberOfEarlyWarning'), // 预警次数
|
|
color:"#FFC267"
|
|
},
|
|
{
|
|
title:this.$t('message.towerCrane.numberOfAlarms'), // 报警次数
|
|
color:"#FE6565"
|
|
},
|
|
],
|
|
projectSn:'',
|
|
devSn:"",
|
|
}
|
|
},
|
|
computed:{
|
|
transformTimestamp(){
|
|
return function(timestamp){
|
|
if(timestamp){
|
|
let a = new Date(timestamp).getTime();
|
|
const date = new Date(a);
|
|
const Y = date.getFullYear() + '-';
|
|
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
|
const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
|
|
const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
|
|
const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
|
|
const s = date.getSeconds() ; // 秒
|
|
const dateString = Y + M + D + h + m + s + '0';
|
|
return dateString;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created(){
|
|
this.styleType = this.$store.state.userInfo.styleType;
|
|
this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
|
|
// this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl;
|
|
this.selectDriverTowerAbnormalCount()
|
|
this.selectTowerAlarmCount()
|
|
this.selectTowerLoadAndMileage()
|
|
this.selectTowerWorkCycleCount()
|
|
this.queryDev()
|
|
},
|
|
mounted(){
|
|
|
|
},
|
|
methods:{
|
|
queryDev(){
|
|
getTowerListApi({projectSn: this.projectSn}).then(res=>{
|
|
// console.log(res)
|
|
if(res.code == 200 && res.result){
|
|
this.devList = res.result
|
|
}
|
|
})
|
|
},
|
|
refresh1(){
|
|
this.value1 = []
|
|
this.devSn = ''
|
|
this.selectDriverTowerAbnormalCount()
|
|
},
|
|
refresh2(){
|
|
this.value2 = []
|
|
this.selectTowerAlarmCount()
|
|
},
|
|
refresh3(){
|
|
this.value3 = []
|
|
this.selectTowerLoadAndMileage()
|
|
},
|
|
refresh4(){
|
|
this.value4 = []
|
|
this.selectTowerWorkCycleCount()
|
|
},
|
|
//雷达图
|
|
query1(){
|
|
this.selectDriverTowerAbnormalCount()
|
|
},
|
|
query2(){
|
|
this.selectTowerAlarmCount()
|
|
},
|
|
query3(){
|
|
this.selectTowerLoadAndMileage()
|
|
},
|
|
query4(){
|
|
this.selectTowerWorkCycleCount()
|
|
},
|
|
//雷达图
|
|
selectDriverTowerAbnormalCount(){
|
|
selectDriverTowerAbnormalCountApi(
|
|
{
|
|
projectSn:this.projectSn,
|
|
devSn: this.devSn,
|
|
startTime:this.value1?this.transformTimestamp(this.value1[0]):"",
|
|
endTime:this.value1?this.transformTimestamp(this.value1[1]):""
|
|
}
|
|
).then(res=>{
|
|
if(res.code == 200){
|
|
this.dataList1 = []
|
|
// let collision = res.result.multiAlarmNum//碰撞
|
|
// let limit = res.result.maxRangeAlarmNum + res.result.minRangeAlarmNum//限位
|
|
let limit = res.result.limitAlarmNum//限位
|
|
// res.result.momentAlarmNum//力矩
|
|
// res.result.obliguityAlarmNum//倾角
|
|
// res.result.environmentAlarm//限行
|
|
let rotation = res.result.negAngleAlarmNum + res.result.posAngleAlarmNum//回转
|
|
this.dataList1.push(limit)//限位
|
|
this.dataList1.push(res.result.obliguityAlarmNum)//倾角
|
|
this.dataList1.push(res.result.momentAlarmNum)//力矩
|
|
this.dataList1.push(res.result.environmentAlarmNum)//限行
|
|
this.dataList1.push(rotation)//回转
|
|
this.dataList1.push(res.result.multiAlarmNum)//碰撞
|
|
let maxArr = []
|
|
maxArr.push(limit)//限位
|
|
maxArr.push(res.result.obliguityAlarmNum)//倾角
|
|
maxArr.push(res.result.momentAlarmNum)//力矩
|
|
maxArr.push(res.result.environmentAlarmNum)//限行
|
|
maxArr.push(rotation)//回转
|
|
maxArr.push(res.result.multiAlarmNum)//碰撞
|
|
this.maxNum = maxArr.sort(this.compare)[maxArr.length-1]
|
|
console.log(res.result);
|
|
console.log(this.dataList1);
|
|
this.createdEchart1();
|
|
}
|
|
})
|
|
},
|
|
createdEchart1(){
|
|
// 图表数据显示异常修复
|
|
let chart1 = echarts.init(this.$refs['echart1']);
|
|
this.chart1 = chart1;
|
|
chart1.clear();
|
|
this.option1 = {
|
|
radar: {
|
|
// shape: 'circle',
|
|
indicator: [
|
|
{ name: this.$t('message.towerCrane.limit'), max: this.maxNum+12}, // 限位
|
|
{ name: this.$t('message.towerCrane.dipAngle'), max: this.maxNum+12}, // 倾角
|
|
{ name: this.$t('message.towerCrane.moment'), max: this.maxNum+12}, // 力矩
|
|
{ name: this.$t('message.towerCrane.restrictedArea'),max: this.maxNum+12}, // 限行区
|
|
{ name: this.$t('message.towerCrane.rotation'), max: this.maxNum+12}, // 回转
|
|
{ name: this.$t('message.towerCrane.antiCollisionTwo'), max: this.maxNum+12} // 防碰撞
|
|
],
|
|
splitLine: { // // 网格线
|
|
lineStyle: {
|
|
width : 1,
|
|
},
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [{
|
|
type: 'radar',
|
|
data: [
|
|
{
|
|
value: this.dataList1,
|
|
name: this.$t('message.towerCrane.abnormalOperation') // 异常操作
|
|
},
|
|
],
|
|
color: "#5181F6",
|
|
areaStyle: {
|
|
normal: {
|
|
color: '#92B0F9' // 选择区域颜色
|
|
}
|
|
},
|
|
}]
|
|
};
|
|
chart1.setOption(this.option1);
|
|
},
|
|
//预警,报警,违章统计图
|
|
selectTowerAlarmCount(){
|
|
selectTowerAlarmCountApi({
|
|
projectSn: this.projectSn,
|
|
startTime:this.value2?this.transformTimestamp(this.value2[0]):"",
|
|
endTime:this.value2?this.transformTimestamp(this.value2[1]):""
|
|
}).then(res=>{
|
|
if(res.code == 200){
|
|
this.devNameList = []//设备名称
|
|
this.warningNumList = []//预警次数
|
|
this.alarmNumList = []//报警次数
|
|
this.faultNumList = [] //故障次数
|
|
res.result.forEach((item)=>{
|
|
this.devNameList.push(item.devName)//设备名称
|
|
this.warningNumList.push(item.warningNum)//预警次数
|
|
this.alarmNumList.push(item.alarmNum)//报警次数
|
|
this.faultNumList.push(item.faultNum)
|
|
})
|
|
this.createdEchart2();
|
|
console.log(res.result);
|
|
}
|
|
})
|
|
},
|
|
createdEchart2() {
|
|
let chart2 = echarts.init(this.$refs['echart2']);
|
|
this.chart2 = chart2;
|
|
chart2.clear();
|
|
this.option2 = {
|
|
grid:{
|
|
top:"30px",
|
|
left:"40px",
|
|
right:"15px",
|
|
bottom:"30px"
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.devNameList,
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: 'value',
|
|
splitLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "solid"
|
|
}
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
},
|
|
|
|
|
|
},{
|
|
type: 'value',
|
|
}
|
|
],
|
|
legend: {
|
|
data: [this.$t('message.towerCrane.numberOfFailures')], // 故障次数
|
|
bottom: "92%",
|
|
left:"35%"
|
|
},
|
|
series: [
|
|
{
|
|
name: this.$t('message.towerCrane.numberOfEarlyWarning'), // 预警次数
|
|
data: this.warningNumList,
|
|
type: 'bar',
|
|
stack: this.$t('message.towerCrane.stack'),//堆叠柱状图在此设置成统一名称即可
|
|
color: '#FFC267'
|
|
},
|
|
{
|
|
name: this.$t('message.towerCrane.numberOfAlarms'), // 报警次数
|
|
data: this.alarmNumList,
|
|
type: 'bar',
|
|
stack: this.$t('message.towerCrane.stack'),//堆叠柱状图在此设置成统一名称即可
|
|
color: '#FE6565'
|
|
},
|
|
{
|
|
name: this.$t('message.towerCrane.numberOfFailures'), // 故障次数
|
|
type: 'line',
|
|
data: this.faultNumList
|
|
}
|
|
]
|
|
}
|
|
chart2.setOption(this.option2);
|
|
},
|
|
//吊重吊程
|
|
selectTowerLoadAndMileage(){
|
|
selectTowerLoadAndMileageApi({
|
|
projectSn: this.projectSn,
|
|
startTime:this.value3?this.transformTimestamp(this.value3[0]):"",
|
|
endTime:this.value3?this.transformTimestamp(this.value3[1]):""
|
|
}).then(res=>{
|
|
if(res.code == 200){
|
|
this.devNameList2 = []//设备名称
|
|
this.totalLoadingList = []//吊重
|
|
this.totalWorkMileageList = []//吊程
|
|
res.result.forEach((item)=>{
|
|
this.devNameList2.push(item.devName)//设备名称
|
|
this.totalLoadingList.push(item.totalLoading)//吊重
|
|
this.totalWorkMileageList.push(item.totalWorkMileage)//吊程
|
|
})
|
|
this.createdEchart3();
|
|
console.log(res.result);
|
|
}
|
|
})
|
|
},
|
|
createdEchart3(){
|
|
let chart3 = echarts.init(this.$refs['echart3']);
|
|
this.chart3 = chart3;
|
|
chart3.clear();
|
|
this.option3 = {
|
|
grid:{
|
|
top:"30px",
|
|
left:"80px",
|
|
right:"15px",
|
|
bottom:"30px"
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: [this.$t('message.towerCrane.liftingWeight'), this.$t('message.towerCrane.lift')], // ['吊重', '吊程']
|
|
bottom: "95%",
|
|
left:"5%"
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.devNameList2,
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "solid"
|
|
}
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: this.$t('message.towerCrane.liftingWeight'), // 吊重
|
|
data: this.totalLoadingList,
|
|
type: 'bar',
|
|
color: '#5181F6'
|
|
},
|
|
{
|
|
name: this.$t('message.towerCrane.lift'), // 吊程
|
|
type: 'line',
|
|
data: this.totalWorkMileageList
|
|
}
|
|
]
|
|
}
|
|
chart3.setOption(this.option3);
|
|
},
|
|
selectTowerWorkCycleCount(){
|
|
selectTowerWorkCycleCountApi({
|
|
projectSn: this.projectSn,
|
|
startTime:this.value4?this.transformTimestamp(this.value4[0]):"",
|
|
endTime:this.value4?this.transformTimestamp(this.value4[1]):""
|
|
}).then(res=>{
|
|
if(res.code == 200){
|
|
this.devNameList3 = []//设备名称
|
|
this.cycleNumList = []//吊次
|
|
this.timeNumList = []//时长
|
|
res.result.forEach((item)=>{
|
|
this.devNameList3.push(item.devName)//设备名称
|
|
this.cycleNumList.push(item.cycleNum)//吊次
|
|
this.timeNumList.push(item.timeNum)//时长
|
|
})
|
|
this.createdEchart4();
|
|
console.log(res.result);
|
|
}
|
|
})
|
|
},
|
|
createdEchart4(){
|
|
let chart4 = echarts.init(this.$refs['echart4']);
|
|
this.chart4 = chart4;
|
|
chart4.clear();
|
|
this.option4 = {
|
|
grid:{
|
|
top:"30px",
|
|
left:"40px",
|
|
right:"15px",
|
|
bottom:"30px"
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: [this.$t('message.towerCrane.workingHours'), this.$t('message.towerCrane.liftingTimes')], // ['工作时长(分钟)', '吊次']
|
|
bottom: "95%",
|
|
left:"5%"
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.devNameList3,
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "dashed"
|
|
}
|
|
},
|
|
axisTick:{
|
|
show: false
|
|
},
|
|
axisLine:{
|
|
lineStyle:{
|
|
color: "#2B364D",
|
|
type: "solid"
|
|
}
|
|
},
|
|
axisLabel:{
|
|
color: '#7F8694'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: this.$t('message.towerCrane.workingHours'), // 工作时长(分钟)
|
|
data: this.timeNumList,
|
|
type: 'bar',
|
|
color: '#5181F6'
|
|
},
|
|
{
|
|
name: this.$t('message.towerCrane.liftingTimes'), // 吊次
|
|
type: 'line',
|
|
data: this.cycleNumList
|
|
}
|
|
]
|
|
}
|
|
chart4.setOption(this.option4);
|
|
},
|
|
compare (x, y) {//比较函数
|
|
if (x < y) {
|
|
return -1;
|
|
} else if (x > y) {
|
|
return 1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
*{
|
|
box-sizing: border-box;
|
|
margin: 0px;
|
|
// padding: 0px;
|
|
}
|
|
.realTimeData_info {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
// height: calc(100% - 150px);
|
|
// margin-top: 12px;
|
|
box-sizing: border-box;
|
|
.abnormalPperation{
|
|
padding: 20px;
|
|
width: 47%;
|
|
height: 383px;
|
|
background: #fff;
|
|
margin-right: 12px;
|
|
margin-bottom: 12px;
|
|
box-sizing: border-box;
|
|
.radarChartBox{
|
|
.radarChart{
|
|
width: 400px;
|
|
height: 250px;
|
|
margin: 50px auto;
|
|
}
|
|
}
|
|
}
|
|
.equipmentAlarm{
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
width: 50%;
|
|
height: 383px;
|
|
background: #fff;
|
|
.icon{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-left: 60px;
|
|
transform: translate(-664px, 20px);
|
|
.icon_item{
|
|
display: inline-block;
|
|
margin-right: 20px;
|
|
.titleColor{
|
|
width: 10px;
|
|
height: 10px;
|
|
display: inline-block;
|
|
background: #FFC267;
|
|
}
|
|
.titleColor2{
|
|
width: 10px;
|
|
height: 10px;
|
|
display: inline-block;
|
|
background: #FE6565;
|
|
}
|
|
.colorTitle{
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
.icon2{
|
|
transform: translate(-537px, 20px);
|
|
}
|
|
|
|
.echart2{
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
}
|
|
.equipmentAlarmRecord{
|
|
padding: 20px;
|
|
width: 47%;
|
|
height: 466px;
|
|
background: #fff;
|
|
margin-right: 12px;
|
|
margin-bottom: 12px;
|
|
box-sizing: border-box;
|
|
.echart3{
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
}
|
|
.workingHoursRecord{
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
width: 50%;
|
|
height: 466px;
|
|
background: #fff;
|
|
.echart4{
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
}
|
|
.head{
|
|
margin-right: 30px;
|
|
display: inline-block;
|
|
height: 15px;
|
|
color: #262D48;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
padding-left: 10px;
|
|
border-left: 2px #5181F6 solid;
|
|
}
|
|
}
|
|
|
|
</style>
|