From 1e1e70da5288f47d8770ba2e7f22f3362e5b577c Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 08 十二月 2023 17:16:35 +0800
Subject: [PATCH] 1、全局修改密码弹窗中的新密码校验长度与数据字典password_length设置保持一致 2、报警分析页面优化过快点击多次表格行时图表内容出现数据残留以及加载图表应设置加载中动画，若不设置用户在查询时短时间内不清楚有无数据 3、车间看板以及设备监控页面设备详情弹窗右上角增加关闭按钮、设备详情弹窗透明度加深、设备详情弹窗图表表盘指针对比色加强、调整设备详情弹窗中描述列表子项标题对齐方式由左对齐改为右对齐，锁定运行数据描述列表子项数值宽度，超出部分隐藏出现省略号，悬浮出现气泡卡片 4、设备利用率、设备开动率、班次利用率页面表格前三列增加表头，依次为公司、车间、工段以及表格有关时间值调整为若小时或分钟为0则不显示 5、设备综合效率分析页面表格数据默认每页最多显示10条改为20条 6、设备加工工件报表页面完成布局及功能实现
---
src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue | 337 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 267 insertions(+), 70 deletions(-)
diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
index e923eb5..dfbbc21 100644
--- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
+++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
@@ -19,47 +19,67 @@
</div>
<div id="DeviceList">
<div class="openRateTrendDg">
- <div id="Efficiency" class="container" style="margin-top: 20px;">
- <div class="table2">
- <table class="dataContent table" border="1" cellspacing="0" cellpadding="0"
- style="white-space: nowrap;text-align: left;">
- <thead>
- <tr class="thead fixed equipname">
- <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">鎶ヨ鍙�
- </th>
- <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">
- 鍑虹幇娆℃暟
- </th>
- <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">
- 鍚堣鎸佺画鏃堕棿锛堢锛�
- </th>
- <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">
- 鎶ヨ淇℃伅
- </th>
- <!--<template v-for="(tableHead, index) in tableHeads">-->
- <!--<th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>-->
- <!--</template>-->
- </tr>
- </thead>
- <tbody>
- <tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">
- <td class="tdgu kaitou">{{item.alarmCode}}</td>
- <td class="tdgu1 kaitou">{{item.count}}</td>
- <td class="tdgu2 kaitou">{{item.timeCount}}</td>
- <td class="tdgu3 kaitou">{{item.alarmContent}}</td>
- <!--<template v-for="(tableHead, index) in item.dataList">-->
- <!--<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>-->
- <!--</template>-->
- </tr>
- </tbody>
- </table>
- </div>
+ <!--<div id="Efficiency" class="container">-->
+ <!--<div class="table2">-->
+ <!--<table class="dataContent table" border="1" cellspacing="0" cellpadding="0"-->
+ <!--style="white-space: nowrap;text-align: left;">-->
+ <!--<thead>-->
+ <!--<tr class="thead fixed equipname">-->
+ <!--<th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">鎶ヨ鍙�-->
+ <!--</th>-->
+ <!--<th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">-->
+ <!--鍑虹幇娆℃暟-->
+ <!--</th>-->
+ <!--<th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">-->
+ <!--鍚堣鎸佺画鏃堕棿-->
+ <!--</th>-->
+ <!--<th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">-->
+ <!--鎶ヨ淇℃伅-->
+ <!--</th>-->
+ <!--<!–<template v-for="(tableHead, index) in tableHeads">–>-->
+ <!--<!–<th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>–>-->
+ <!--<!–</template>–>-->
+ <!--</tr>-->
+ <!--</thead>-->
+ <!--<tbody>-->
+ <!--<tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">-->
+ <!--<td class="tdgu kaitou">{{item.alarmCode}}</td>-->
+ <!--<td class="tdgu1 kaitou">{{item.count}}</td>-->
+ <!--<td class="tdgu2 kaitou">{{getFormattedTime(item.timeCount)}}-->
+ <!--<!–<td class="tdgu2 kaitou">{{item.timeCount}}</td>–>-->
+ <!--<td class="tdgu3 kaitou">{{item.alarmContent}}</td>-->
+ <!--<!–<template v-for="(tableHead, index) in item.dataList">–>-->
+ <!--<!–<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>–>-->
+ <!--<!–</template>–>-->
+ <!--</tr>-->
+ <!--</tbody>-->
+ <!--</table>-->
+ <!--</div>-->
+ <!--</div>-->
+ <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:168}"
+ :customRow="customRow"
+ rowKey="alarmCode"
+ >
+ <span slot="timeCount" slot-scope="text">{{getFormattedTime(text)}}</span>
+ <!--<a-table-->
+ <!--slot="expandedRowRender"-->
+ <!--slot-scope="row"-->
+ <!--:columns="innerColumns"-->
+ <!--:data-source="row.innerDataList"-->
+ <!--:pagination="false"-->
+ <!--rowKey="equipmentId"-->
+ <!-->-->
+ <!--<span slot="duration" slot-scope="text">{{getFormattedTime(text)}}</span>-->
+ <!--</a-table>-->
+ </a-table>
+ </div>
+
+ <a-spin :spinning="spinning">
+ <div style="width: 100%;height: 100%;display: flex;">
+ <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
+ <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
</div>
- </div>
- <div style="width: 100%;height: 60%;display: flex;">
- <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
- <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
- </div>
+ </a-spin>
</div>
</div>
</div>
@@ -75,6 +95,33 @@
JeecgListMixin
} from '@/mixins/JeecgListMixin'
+ const columns = [
+ { title: '鎶ヨ鍙�', dataIndex: 'alarmCode', key: 'alarmCode', align: 'center' },
+ { title: '鍑虹幇娆℃暟', dataIndex: 'count', key: 'count', align: 'center' },
+ {
+ title: '鍚堣鎸佺画鏃堕棿',
+ dataIndex: 'timeCount',
+ key: 'timeCount',
+ scopedSlots: { customRender: 'timeCount' },
+ align: 'center'
+ },
+ { title: '鎶ヨ淇℃伅', dataIndex: 'alarmContent', key: 'alarmContent', align: 'center' }
+ ]
+
+ const innerColumns = [
+ { title: '璁惧缂栧彿', dataIndex: 'equipmentId', key: 'equipmentId', align: 'center' },
+ { title: '璁惧鍚嶇О', dataIndex: 'equipmentName', key: 'equipmentName', align: 'center' },
+ { title: '鎶ヨ鏃堕棿', dataIndex: 'alarmTime', key: 'alarmTime', align: 'center' },
+ { title: '缁撴潫鏃堕棿', dataIndex: 'endTime', key: 'endTime', align: 'center' },
+ {
+ title: '鎸佺画鏃堕棿',
+ dataIndex: 'duration',
+ key: 'duration',
+ scopedSlots: { customRender: 'duration' },
+ align: 'center'
+ }
+ ]
+
export default {
// mixins: [JeecgListMixin],
name: 'alarmAnalysisMain',
@@ -84,6 +131,7 @@
dataSource: [],
/* table鍔犺浇鐘舵�� */
loading: false,
+ spinning:false,
typeTree: '',
typeParent: 1,
typeEquipment: 1,
@@ -114,7 +162,9 @@
tableHeads: [],
pieDate: [0],
XData: [0],
- YData: [0]
+ YData: [0],
+ columns,
+ innerColumns
}
},
props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -182,23 +232,21 @@
},
TableDraw(key, val) {
let that = this
+ that.spinning=true
that.queryParam.alarmCode = val.alarmCode
console.log(this.queryParam)
- that.pieDate = []
- that.XData = []
- that.YData = []
- getAction(that.url.alarmTrend, that.queryParam).then(res => {
+ getAction(that.url.alarmTrend, that.queryParam)
+ .then(res => {
if (res.success) {
- for (var i = 0; i < res.result.equipmentCountList.length; i++) {
- that.pieDate.push({
- name: res.result.equipmentCountList[i].key,
- value: res.result.equipmentCountList[i].count
- })
- }
- for (var j = 0; j < res.result.dateCountList.length; j++) {
- that.XData.push(res.result.dateCountList[j].key)
- that.YData.push(res.result.dateCountList[j].count)
- }
+ that.pieDate=res.result.equipmentCountList.map(item=>{
+ return {
+ name:item.key,
+ value:item.count
+ }
+ })
+ that.XData=res.result.dateCountList.map(item=>item.key)
+ that.YData=res.result.dateCountList.map(item=>item.count)
+
// this.tableHeads = res.result.dates
// this.dataList = res.result
// this.draw()
@@ -210,6 +258,9 @@
that.drawWrin()
}
})
+ .finally(()=>{
+ that.spinning=false
+ })
console.log(this.YData)
},
@@ -343,6 +394,31 @@
if (res.success) {
// this.tableHeads = res.result.dates
this.dataList = res.result
+ this.dataList[0].innerDataList=[
+ {
+ equipmentId: '11234',
+ equipmentName: '绔嬩綋鏈哄簥',
+ alarmTime: 20,
+ endTime: 20,
+ duration: 123
+ },
+ {
+ equipmentId: '4213',
+ equipmentName: '鍗у鏈哄簥',
+ alarmTime: 312,
+ endTime: 31,
+ duration: 421
+ }
+ ]
+ this.dataList[1].innerDataList=[
+ {
+ equipmentId: '4213',
+ equipmentName: '鍗у鏈哄簥',
+ alarmTime: 312,
+ endTime: 31,
+ duration: 421
+ }
+ ]
// this.draw()
// this.checkSameData(this.dataList)
// this.checkSameData1(this.dataList)
@@ -359,7 +435,10 @@
title: {
text: '鍚勮澶囧嚭鐜版鎶ヨ鐨勬瘮渚�',
x: 'center',
- y: 'bottom'
+ y: 'bottom',
+ textStyle: {
+ color: '#4FAEDC'
+ }
},
tooltip: {
trigger: 'item',
@@ -371,14 +450,18 @@
radius: '60%',
itemStyle: {
normal: {
- /*color: function (params) {
- var colorList = ['#4169E1', '#A8A8A8'];
- return colorList[params.dataIndex]
- },*/
+ color: function(params) {
+ var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
+ return colorList[params.dataIndex]
+ },
label: {
show: true,
- position: 'top',
- formatter: '{b}\n{c}'
+ // position: 'top',
+ formatter: '{b}\n{c}',
+ color: function(params) {
+ var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
+ return colorList[params.dataIndex]
+ }
}
}
},
@@ -392,7 +475,10 @@
title: {
text: '姣忓ぉ鍑虹幇姝ゆ姤璀︾殑鏁伴噺璧板娍',
x: 'center',
- y: 'bottom'
+ y: 'bottom',
+ textStyle: {
+ color: '#4FAEDC'
+ }
},
tooltip: {
trigger: 'axis'
@@ -405,13 +491,29 @@
data: this.XData
/*axisLabel :{
interval:0
- }*/
+ }*/,
+ axisLine: {
+ //x杞寸嚎鐨勯鑹蹭互鍙婂搴�
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: '#4FAEDC'
+ }
+ }
}
],
yAxis: [
{
type: 'value',
- name: '娆℃暟'
+ name: '娆℃暟',
+ axisLine: {
+ //x杞寸嚎鐨勯鑹蹭互鍙婂搴�
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: '#4FAEDC'
+ }
+ }
}
],
series: [
@@ -423,12 +525,92 @@
data: [
{ type: 'max', name: '鏈�澶у��' },
{ type: 'min', name: '鏈�灏忓��' }
- ]
+ ],
+ label: {
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#2EC7C9'
+ }
}
}
]
}
equipmentWarningLine.setOption(equipmentWarningLineOption, true)
+ },
+
+ /**
+ * 鏍煎紡鍖栨椂闂�
+ * @param seconds 绉掓暟
+ * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓�
+ */
+ getFormattedTime(seconds) {
+ var hours = Math.floor(seconds / 3600)
+ var minutes = Math.floor((seconds % 3600) / 60)
+ var secs = seconds % 60
+
+ if (hours === 0) {
+ if (minutes === 0 ) {
+ return secs === 0 ? 0 : `${secs}绉抈
+ } else {
+ if(secs=== 0 ){
+ return `${minutes}鍒哷
+ }
+ return `${minutes}鍒� ${secs}绉抈
+ }
+ } else {
+ if (minutes === 0 && secs === 0) {
+ return `${hours}灏忔椂`
+ } else if (minutes !== 0 && secs === 0) {
+ return `${hours}灏忔椂 ${minutes}鍒哷
+ }
+ }
+ return `${hours}灏忔椂 ${minutes}鍒� ${secs}绉抈
+ },
+
+ /**
+ * 鑷畾涔夎〃鏍艰瑙﹀彂
+ * @param record 褰撳墠琛屼俊鎭�
+ * @param index 褰撳墠琛屼笅鏍�
+ * @returns {{on: {click: on.click}}} 杩斿洖瀵硅薄
+ */
+ customRow(record, index) {
+ return {
+ on: {
+ click: (event) => {
+ // 濡傛灉鐐瑰嚮鐨勪笉鏄睍寮�鍥炬爣鍖哄煙鍒欐覆鏌撳浘琛紝鐩稿弽鍒欑浉褰撲簬鐐瑰嚮灞曞紑鍥炬爣
+ if(event.target.className !== 'ant-table-row-expand-icon-cell'){
+ this.TableDraw(index, record)
+ }else{
+ if(event.target.children && event.target.children.length>0) event.target.children[0].click()
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * 鑷畾涔夊睍寮�琛ㄦ牸鍥炬爣
+ * @param props 鍥炬爣灞炴��
+ * @returns {null} 鑻ヤ富琛ㄦ暟鎹笅鏃犳暟鎹垯涓嶆樉绀哄浘鏍�
+ */
+ expandIcon(props){
+ console.log('props',props)
+ if (props.record.innerDataList&&props.record.innerDataList.length>0){
+ if (props.expanded) {
+ return <a style="margin-right:0px;color:#999" onClick={e=> {
+ props.onExpand(props.record, e);
+ }}><a-icon type="minus" /></a>
+ } else{
+ return <a style="margin-right:0px;color:#999" onClick={e => {
+ props.onExpand(props.record, e);
+ }}><a-icon type="plus"/></a>
+ }
+ }else{
+ return null
+ }
}
}
}
@@ -591,28 +773,28 @@
@media screen and (min-width: 1920px) {
#Efficiency {
- height: 337px !important;
+ height: 258px !important;
overflow: scroll;
}
}
@media screen and (min-width: 1680px) and (max-width: 1920px) {
#Efficiency {
- height: 337px !important;
+ height: 258px !important;
overflow: scroll;
}
}
@media screen and (min-width: 1400px) and (max-width: 1680px) {
#Efficiency {
- height: 190px !important;
+ height: 160px !important;
overflow: scroll;
}
}
@media screen and (min-width: 1280px) and (max-width: 1400px) {
#Efficiency {
- height: 90px !important;
+ height: 60px !important;
overflow: scroll;
}
}
@@ -646,4 +828,19 @@
.efficiency_list #DeviceList {
height: 90% !important;
}
+
+ /deep/ .ant-table-body .ant-table-row td {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ cursor: pointer;
+ }
+
+ /deep/ .ant-spin-nested-loading{
+ height: 55%;
+ }
+
+ /deep/ .ant-spin-container{
+ height: 100%;
+ }
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3