| | |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-04-16 15:22:46 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-06-21 01:45:18 |
| | | * @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="refreshBtn"><RefreshLeft /></el-icon> |
| | | <el-icon @click="showSearch"><Filter /></el-icon> |
| | | </div> |
| | | <div class="no-list">设备运行时长{{timeLevel}}小时内前{{top}}名</div> |
| | |
| | | :data="parentData" |
| | | :props="{ label: 'title' }" |
| | | style="width:80%;" |
| | | :default-checked-keys="selectedIds" |
| | | :render-after-expand="false" /> |
| | | </div> |
| | | <div> |
| | |
| | | description: "快速查看设备运行时长排名", |
| | | data() { |
| | | return { |
| | | selectedIds: [], |
| | | parentData: {}, |
| | | list: [], |
| | | timeLevelList: [], |
| | |
| | | top: "" |
| | | }, |
| | | isSearch: false, |
| | | timeLevel: "", |
| | | top: "", |
| | | timeLevel: "24", |
| | | top: "5", |
| | | apiResource: { |
| | | workStationIdList: [] |
| | | }, |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [3.96, 3.95, 3.93, 3.91, 3.91, 3.9, 3.85], |
| | | data: [], |
| | | type: 'bar', |
| | | label: { |
| | | show: true, // 显示标签 |
| | |
| | | // 返回数据值和您想要添加的字符串的组合 |
| | | return params.value + 'h'; // 例如,返回 '3.96 文字' |
| | | } |
| | | } |
| | | }, |
| | | itemStyle: { |
| | | color: '#5CBF7D' |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | refreshBtn() { |
| | | this.getList(); |
| | | }, |
| | | showSearch() { |
| | | this.search.timeLevel = this.timeLevel; |
| | | this.search.top = this.top; |
| | |
| | | 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 }) => { |
| | |
| | | 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) { |
| | |
| | | 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); |
| | | } |