gaoshp
2024-11-05 e2fdfe540eaf160dc7d063c60667041edcc64e86
src/views/home/widgets/components/mdcRunning.vue
@@ -2,15 +2,15 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-21 09:50:32
 * @LastEditTime: 2024-10-23 16:13:47
 * @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><RefreshLeft /></el-icon>
         <el-icon @click="isSearch = true"><Filter /></el-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>
@@ -37,6 +37,7 @@
                      :data="parentData"
                      :props="{ label: 'title' }"
                      style="width:80%;"
                     :default-checked-keys="selectedIds"
                     :render-after-expand="false" />
               </div>
               <div>
@@ -76,6 +77,7 @@
      description: "快速查看设备运行时长排名",
      data() {
         return {
            selectedIds: [],
            parentData: {},
            list: [],
            timeLevelList: [],
@@ -119,7 +121,7 @@
               },  
               series: [  
                  {  
                  data: [3.96, 3.95, 3.93, 3.91, 3.91, 3.9, 3.85],
                  data: [],
                  type: 'bar',  
                  label: {  
                     show: true, // 显示标签  
@@ -128,7 +130,10 @@
                     // 返回数据值和您想要添加的字符串的组合  
                     return params.value + 'h'; // 例如,返回 '3.96 文字'  
                     }  
                  }
                  },
                  itemStyle: {
                     color: '#5CBF7D'
                  }
                  }  
               ]  
               },
@@ -145,8 +150,17 @@
         }
      },
      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
@@ -180,7 +194,7 @@
            return newData
         },
         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 }) => {
@@ -202,6 +216,8 @@
               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) {
@@ -213,10 +229,11 @@
         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.data = res.data.series;
                  this.option.series[0].data = res.data.series[0].data;
                  var myChart = echarts.init(recordDom);
                  myChart.setOption(this.option);
               }