<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-04-16 15:22:46
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-09-19 10:23:52
|
* @FilePath: /CPSnew/smart-web/src/views/home/widgets/components/mdcDeviceStatus.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<el-card shadow="hover" header="设备运行时长排名" style="height: 100%;" class="running">
|
<div class="running-icon">
|
<el-icon @click="refreshBtn"><RefreshLeft /></el-icon>
|
<el-icon @click="showSearch"><Filter /></el-icon>
|
</div>
|
<div class="no-list">设备运行时长{{timeLevel}}小时内前{{top}}名</div>
|
<div :id="'running'" style="height:160px;"></div>
|
|
<div class="advance-box" v-show="isSearch">
|
<div class="advance-header">筛选
|
<el-icon @click="isSearch = false"><Close /></el-icon>
|
</div>
|
<div class="advance-content">
|
<div>
|
<div>
|
<div class="advance-title">选择工位</div>
|
<el-tree-select
|
multiple
|
show-checkbox
|
default-expand-all
|
size="small"
|
@change = "parentIdChange"
|
v-model="search.workStationIdList"
|
clearable
|
node-key="id"
|
placeholder="上级菜单"
|
ref="parentTree"
|
:data="parentData"
|
:props="{ label: 'title' }"
|
style="width:80%;"
|
:default-checked-keys="selectedIds"
|
:render-after-expand="false" />
|
</div>
|
<div>
|
<div class="advance-title">选择需要排名的时间</div>
|
<el-select v-model="search.timeLevel" size="small" style="width:80%;">
|
<template #prefix><span style="margin-right: 6px;color: #409eff;">近N小时</span></template>
|
<el-option v-for="item in timeLevelList" :key="item.value" :label="item.label" :value="item.value"/>
|
</el-select>
|
</div>
|
<div>
|
<div class="advance-title">选择设备排名</div>
|
<el-select v-model="search.top" size="small" style="width:80%;">
|
<template #prefix><span style="margin-right: 6px;color: #409eff;" placeholder="所有">设备TOP</span></template>
|
<el-option v-for="item in topList" :key="item.value" :label="item.label" :value="item.value"/>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<div style="width: 100%;text-align: right;margin-right: 12px;margin-top: 12px;">
|
<el-button type="primary" @click="serchSubmit">筛选</el-button>
|
</div>
|
</div>
|
</el-card>
|
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
title: "设备运行时长排名",
|
icon: "el-icon-data-line",
|
description: "快速查看设备运行时长排名",
|
data() {
|
return {
|
selectedIds: [],
|
parentData: {},
|
list: [],
|
timeLevelList: [],
|
topList: [],
|
search: {
|
workStationIdList: [],
|
timeLevel: "",
|
top: ""
|
},
|
isSearch: false,
|
timeLevel: "24",
|
top: "5",
|
apiResource: {
|
workStationIdList: []
|
},
|
cardData: {},
|
option: {
|
grid: {
|
top: '0',
|
bottom: '0',
|
containLabel: true
|
},
|
yAxis: {
|
type: 'category',
|
data: [],
|
axisLine: {
|
show: false // 隐藏y轴轴线
|
},
|
axisTick: {
|
show: false // 隐藏y轴刻度线
|
},
|
splitLine: {
|
show: false // 隐藏y轴网格线
|
}
|
},
|
xAxis: {
|
type: 'value',
|
axisLabel: {
|
show: false // 隐藏x轴数据标签
|
}
|
},
|
series: [
|
{
|
data: [],
|
type: 'bar',
|
label: {
|
show: true, // 显示标签
|
position: 'right', // 标签位置设置为柱子的右侧
|
formatter: function(params) {
|
// 返回数据值和您想要添加的字符串的组合
|
return params.value + 'h'; // 例如，返回 '3.96 文字'
|
}
|
},
|
itemStyle: {
|
color: '#5CBF7D'
|
}
|
}
|
]
|
},
|
}
|
},
|
components: {...ElementPlusIconsVue},
|
mounted() {
|
this.getList();
|
this.getParentData();
|
var arr = [];
|
for(var i=1;i<=30;i++) {
|
this.timeLevelList.push({value:i,label:i});
|
this.topList.push({value:i,label:i});
|
}
|
},
|
methods: {
|
refreshBtn() {
|
this.getList();
|
},
|
showSearch() {
|
this.search.timeLevel = this.timeLevel;
|
this.search.top = this.top;
|
this.isSearch = true;
|
},
|
serchSubmit() {
|
this.apiResource = this.search;
|
this.getRunData();
|
},
|
setCurrentKey(v) {
|
if (this.firstWorkKey) return
|
if (v.isWorkstation) {
|
this.firstWorkKey = v.id
|
}
|
},
|
formatData(data, current) {
|
let newData = []
|
if (!current) {
|
newData = data.filter(item => item.parentId == 0).map(v => {
|
//if (!v.isWorkstation) v.disabled = true
|
v.children = this.formatData(data, v).sort((a, b) => {
|
return b.sort - a.sort
|
})
|
this.setCurrentKey(v)
|
return v
|
})
|
} else {
|
let res = data.filter(v => v.parentId == current.id)
|
res = res.map(item => {
|
//if (!item.isWorkstation) item.disabled = true
|
item.children = this.formatData(data, item).sort((a, b) => {
|
return b.sort - a.sort
|
})
|
this.setCurrentKey(item)
|
return item
|
})
|
return res
|
}
|
return newData
|
},
|
getParentData() {
|
this.$HTTP.post('/api/blade-cps/group/groupWorkstation/type', {
|
groupCategory: 1,
|
groupType: "group_workstation"
|
}).then(({ code, data }) => {
|
if (code === 200) {
|
this.data = this.formatData(data)
|
this.$nextTick(() => {
|
this.parentData = this.data;
|
})
|
}
|
})
|
},
|
parentIdChange(val) {
|
// var $parentId = this.$refs.parentTree.getCurrentNode().title;
|
// this.formAddMenu.$parentId = $parentId;
|
},
|
getList() {
|
this.cardData = this.$CONFIG.DEFAULT_GRID.data;
|
this.cardData.forEach(item=> {
|
if(item.cardKey == "mdcRunning") {
|
if(item.apiResource == "") return;
|
this.apiResource = JSON.parse(item.apiResource);
|
this.selectedIds = this.apiResource.workStationIdList;
|
this.search.workStationIdList = this.apiResource.workStationIdList;
|
this.timeLevel = this.apiResource.timeLevel;
|
this.top = this.apiResource.top;
|
if(this.apiResource.workStationIdList.length > 0) {
|
this.getRunData();
|
}
|
}
|
})
|
},
|
getRunData() {
|
this.$HTTP.post(`/api/blade-visual/status/running-top`,this.apiResource).then(res=> {
|
if(res.code == 200) {
|
this.isSearch = false;
|
var recordDom = document.getElementById('running');
|
if(res.data.categories.length == 0) return;
|
this.option.yAxis.data = res.data.categories;
|
this.option.series[0].data = res.data.series[0].data;
|
console.log(this.option.series.data,res.data.series[0].data,2)
|
var myChart = echarts.init(recordDom);
|
myChart.setOption(this.option);
|
}
|
})
|
},
|
goPage(item) {
|
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.running /deep/ .el-card__body {
|
padding: 12px 12px 12px;
|
}
|
.running {
|
position: relative;
|
}
|
.running-icon {
|
position: absolute;
|
right: 0;
|
top: 15px;
|
}
|
.running-icon i {
|
font-size: 16px;
|
cursor: pointer;
|
margin-right: 15px;
|
}
|
.no-list {
|
display: flex;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 14px;
|
color: #666;
|
align-items: center;
|
}
|
.advance-box{
|
width: 330px;
|
height: 100%;
|
padding: 15px 16px;
|
border-radius: 2px;
|
box-sizing: border-box;
|
border: 1px solid #ebeef5;
|
position: absolute;
|
right: 0;
|
top: 0;
|
background-color: #fff;
|
}
|
.advance-header {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-weight: 700;
|
font-size: 16px;
|
color: #333;
|
}
|
.advance-header i {
|
cursor: pointer;
|
}
|
.advance-content {
|
height: calc(100% - 54px);
|
overflow: auto;
|
}
|
.advance-title {
|
margin: 20px 0 12px;
|
font-weight: 400;
|
font-size: 14px;
|
color: #666;
|
}
|
</style>
|
