| | |
| | | <!-- |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-04-16 15:22:46 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-06-21 10:53:10 |
| | | * @LastEditors: 李喆(开发组) lzhe@yxqiche.com |
| | | * @LastEditTime: 2025-03-14 15:07:08 |
| | | * @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 |
| | | --> |
| | |
| | | default-expand-all |
| | | size="small" |
| | | @change = "parentIdChange" |
| | | v-model="search.workStationIdList" |
| | | clearable |
| | | v-model="search.workStationIdList" |
| | | clearable |
| | | node-key="id" |
| | | placeholder="上级菜单" |
| | | placeholder="上级菜单" |
| | | ref="parentTree" |
| | | :data="parentData" |
| | | :props="{ label: 'title' }" |
| | | style="width:80%;" |
| | | :data="parentData" |
| | | :props="{ label: 'title' }" |
| | | style="width:80%;" |
| | | :default-checked-keys="selectedIds" |
| | | :render-after-expand="false" /> |
| | | </div> |
| | |
| | | import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
| | | let icons = [] |
| | | for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
| | | icons.push(key) |
| | | icons.push(key) |
| | | } |
| | | export default { |
| | | title: "设备运行时长排名", |
| | |
| | | workStationIdList: [] |
| | | }, |
| | | cardData: {}, |
| | | option: { |
| | | option: { |
| | | grid: { |
| | | top: '0', |
| | | bottom: '0', |
| | | containLabel: true |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: [], |
| | | axisLine: { |
| | | show: false // 隐藏y轴轴线 |
| | | }, |
| | | axisTick: { |
| | | show: false // 隐藏y轴刻度线 |
| | | yAxis: { |
| | | type: 'category', |
| | | data: [], |
| | | axisLine: { |
| | | show: false // 隐藏y轴轴线 |
| | | }, |
| | | splitLine: { |
| | | show: false // 隐藏y轴网格线 |
| | | axisTick: { |
| | | show: false // 隐藏y轴刻度线 |
| | | }, |
| | | splitLine: { |
| | | show: false // 隐藏y轴网格线 |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'value', |
| | | axisLabel: { |
| | | show: false // 隐藏x轴数据标签 |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [3.96, 3.95, 3.93, 3.91, 3.91, 3.9, 3.85], |
| | | type: 'bar', |
| | | label: { |
| | | show: true, // 显示标签 |
| | | position: 'right', // 标签位置设置为柱子的右侧 |
| | | formatter: function(params) { |
| | | // 返回数据值和您想要添加的字符串的组合 |
| | | return params.value + 'h'; // 例如,返回 '3.96 文字' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | 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' |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | } |
| | | }, |
| | |
| | | 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}); |
| | |
| | | this.getList(); |
| | | }, |
| | | showSearch() { |
| | | this.search.timeLevel = this.timeLevel; |
| | | this.search.top = this.top; |
| | | this.isSearch = true; |
| | | }, |
| | | serchSubmit() { |
| | |
| | | } |
| | | return newData |
| | | }, |
| | | extractLastLevelIds(items, result = []) { //递归获取children最后一级的id的数组 |
| | | items.forEach(item => { |
| | | // 如果当前项有id属性且没有children或children为空数组 |
| | | if (item.id && (!item.children || item.children.length === 0)) { |
| | | result.push(item.id); |
| | | } |
| | | // 如果当前项有children属性且是数组,则递归调用collectIds |
| | | if (Array.isArray(item.children)) { |
| | | this.extractLastLevelIds(item.children, result); |
| | | } |
| | | }); |
| | | // 返回收集到的id数组 |
| | | return result; |
| | | }, |
| | | getParentData() { |
| | | this.$HTTP.post('/api/blade-cps/group/groupWorkstation/type', { |
| | | this.$HTTP.post('/api/smis/group/groupWorkstation/type', { |
| | | groupCategory: 1, |
| | | groupType: "group_workstation" |
| | | }).then(({ code, data }) => { |
| | |
| | | this.data = this.formatData(data) |
| | | this.$nextTick(() => { |
| | | this.parentData = this.data; |
| | | var ids = this.extractLastLevelIds(this.parentData); |
| | | this.selectedIds = ids; |
| | | this.search.workStationIdList = ids; |
| | | this.search.top = 5; //24小时内前5名 |
| | | this.search.timeLevel = 24; //24小时内前5名 |
| | | this.getRunData(); |
| | | }) |
| | | } |
| | | }) |
| | |
| | | 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(); |
| | | } |
| | | //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=> { |
| | | this.$HTTP.post(`/api/blade-visual/status/running-top`,this.search).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.data = res.data.series; |
| | | this.option.series[0].data = res.data.series[0].data; |
| | | var myChart = echarts.init(recordDom); |
| | | myChart.setOption(this.option); |
| | | } |
| | | }) |
| | | }, |
| | | goPage(item) { |
| | | |
| | | } |
| | | goPage(item) {} |
| | | } |
| | | } |
| | | </script> |
| | |
| | | } |
| | | .no-list { |
| | | display: flex; |
| | | justify-content: center; |
| | | justify-content: center; |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #666; |