From 8c610945469c4a4a0b0ff2b868e87f25fe01792d Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 18 六月 2025 14:01:46 +0800
Subject: [PATCH] 1、设备日志页面列表及状态横向分布图新增故障状态颜色区分以及增加故障日志列表页签 2、设备日志页面历史记录弹窗中状态横向分布图新增故障状态颜色区分
---
src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue | 321 ++++++++++++++++++++--------------------------------
1 files changed, 125 insertions(+), 196 deletions(-)
diff --git a/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue b/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue
index 44f7cef..a5682c5 100644
--- a/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue
+++ b/src/views/mdc/base/modules/DeviceLog/WorkHistoryModel.vue
@@ -1,166 +1,167 @@
<template>
<div ref="workHistory">
- <a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal" :visible="visible"
- @cancel="handleCancel" cancelText="鍏抽棴" :footer="null">
- <div>
- <div class="his_params">
- <a-form layout="inline">
- <a-form-item label="璁惧缂栧彿">
- <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="true" v-model="queryParams.equipmentId"></a-input>
- </a-form-item>
- <a-form-item label="璁惧鍚嶇О">
- <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="true" v-model="queryParams.equipmentName"></a-input>
- </a-form-item>
- <a-form-item label="鏃ユ湡">
- <a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange" format='YYYY-MM-DD'/>
- </a-form-item>
- <a-button type="primary" @click="queryCharts" icon="search">鏌ヨ</a-button>
- </a-form>
- </div>
- <div style="width: 100%;border: none;" align="center">
- <table cellpadding="0" cellspacing="0" width="100%">
- <tr>
- <td>
- <table width="100%">
- <tr style="word-break: keep-all;">
- <td width="100%" height="100%">
- <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0" style="border-collapse:separate; border-spacing:10px;">
- <tr v-for="info in listInfo" >
- <td align="left">{{info.date}}</td>
- <td style="word-break: keep-all;" align="left">
- <div
- style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative">
- <div class="mdcLogShowOne"
- :style='{display: "inline-block",width:item.dateProportion, height: "100%"}'
- v-for="item in info.value.normal">
+ <a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal"
+ :visible="visible"
+ @cancel="handleCancel" cancelText="鍏抽棴" :footer="null">
+ <div>
+ <div class="his_params">
+ <a-form layout="inline">
+ <a-form-item label="璁惧缂栧彿">
+ <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="true" v-model="queryParams.equipmentId"></a-input>
+ </a-form-item>
+ <a-form-item label="璁惧鍚嶇О">
+ <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="true" v-model="queryParams.equipmentName"></a-input>
+ </a-form-item>
+ <a-form-item label="鏃ユ湡">
+ <a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange"
+ format='YYYY-MM-DD'/>
+ </a-form-item>
+ <a-button type="primary" @click="queryCharts" icon="search">鏌ヨ</a-button>
+ </a-form>
+ </div>
+ <div style="width: 100%;border: none;" align="center">
+ <table cellpadding="0" cellspacing="0" width="100%">
+ <tr>
+ <td>
+ <table width="100%">
+ <tr style="word-break: keep-all;">
+ <td width="100%" height="100%">
+ <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0"
+ style="border-collapse:separate; border-spacing:10px;">
+ <tr v-for="info in listInfo">
+ <td align="left">{{info.date}}</td>
+ <td style="word-break: keep-all;" align="left">
+ <div
+ style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative">
+ <div class="mdcLogShowOne"
+ :style='{display: "inline-block",width:item.dateProportion, height: "100%"}'
+ v-for="item in info.value.normal">
<span v-if="item.status == 0"
:style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span>
- <span v-if="item.status == 1"
- :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
- <span v-if="item.status == 2"
- :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
- <span v-if="item.status == 3"
- :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span>
- <span v-if="item.status == 23"
- :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span>
- </div>
- <div style="z-index: 999;"
- :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
- v-for="item in info.value.waring">
+ <span v-if="item.status == 1"
+ :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
+ <span v-if="item.status == 2"
+ :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
+ <span v-if="item.status == 3"
+ :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span>
+ <span v-if="item.status == 23"
+ :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span>
+ </div>
+ <div style="z-index: 999;"
+ :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
+ v-for="item in info.value.waring">
<span
:style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span>
+ </div>
+ <div style="z-index: 1000;"
+ :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}'
+ v-for="item in info.value.fault">
+ <span
+ :style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span>
+ </div>
</div>
- </div>
- </td>
- </tr>
- <tr>
- <td align="right">0</td>
- <td width="95%">
- <table width="100%;" cellpadding="0" cellspacing="0">
- <tr align="right" style="word-break: keep-all;">
- <td>02:00</td>
- <td>04:00</td>
- <td>06:00</td>
- <td>08:00</td>
- <td>10:00</td>
- <td>12:00</td>
- <td>14:00</td>
- <td>16:00</td>
- <td>18:00</td>
- <td>20:00</td>
- <td>22:00</td>
- <td>24:00</td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- </tr>
+ </td>
+ </tr>
+ <tr>
+ <td align="right">0</td>
+ <td width="95%">
+ <table width="100%;" cellpadding="0" cellspacing="0">
+ <tr align="right" style="word-break: keep-all;">
+ <td>02:00</td>
+ <td>04:00</td>
+ <td>06:00</td>
+ <td>08:00</td>
+ <td>10:00</td>
+ <td>12:00</td>
+ <td>14:00</td>
+ <td>16:00</td>
+ <td>18:00</td>
+ <td>20:00</td>
+ <td>22:00</td>
+ <td>24:00</td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
- </table>
+ </table>
+ </div>
</div>
- </div>
- </a-modal>
+ </a-modal>
</div>
</template>
<script>
import moment from 'moment'
- import * as echarts from 'echarts'
- import {
- getAction,
- postAction
- } from '@/api/manage'
- import {
- duplicateCheck
- } from '@/api/api'
+ import { getAction } from '@/api/manage'
export default {
name: 'WorkHistoryModel',
- components: {},
- props: { waring:[],},
data() {
return {
title: '',
listInfo: [],
dates: [],
- node: {},
-
- stratOpen: false,
- endOpen: false,
visible: false,
- show: false,
queryParams: {},
url: {
logCharts: '/mdc/mdcEquipmentRunningSection/logCharts'
}
}
},
- mounted() {
- },
methods: {
- disabledDate(current){
- return current && current > moment().subtract('days', 1);
+ disabledDate(current) {
+ return current && current > moment().subtract('days', 1)
},
queryCharts() {
let _this = this
- getAction(this.url.logCharts, this.queryParams).then((res) => {
- if (res.success) {
- for (let i = 0; i < res.result.length; i++) {
- let tmp = res.result[i].value
- // console.log(tmp)
- if (tmp) {
- if (tmp.normal) {
- for (let k = 0; k < tmp.normal.length; k++) {
- tmp.normal[k].dateProportion = tmp.normal[k].duration / 86400 * 100 + '%'
- // let leftTmp = (moment(tmp.normal[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
- // tmp.normal[i].left = leftTmp / 86400 * 100 + '%'
+ this.listInfo = []
+ getAction(this.url.logCharts, this.queryParams)
+ .then((res) => {
+ if (res.success) {
+ for (let i = 0; i < res.result.length; i++) {
+ let tmp = res.result[i].value
+ if (tmp) {
+ if (tmp.normal) {
+ for (let k = 0; k < tmp.normal.length; k++) {
+ tmp.normal[k].dateProportion = tmp.normal[k].duration / 86400 * 100 + '%'
+ }
+ } else {
+ tmp.normal = []
}
- } else {
- tmp.normal = []
- }
- if (tmp.waring) {
- // console.log("娴嬭瘯鍒ゆ柇")
- for (let j = 0; j < tmp.waring.length; j++) {
- tmp.waring[j].dateProportion = tmp.waring[j].duration / 86400 * 100 + '%'
- let leftTmp = (moment(tmp.waring[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
- tmp.waring[j].left = leftTmp / 86400 * 100 + '%'
+ if (tmp.waring) {
+ for (let j = 0; j < tmp.waring.length; j++) {
+ tmp.waring[j].dateProportion = tmp.waring[j].duration / 86400 * 100 + '%'
+ let leftTmp = (moment(tmp.waring[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
+ tmp.waring[j].left = leftTmp / 86400 * 100 + '%'
+ }
+ } else {
+ tmp.waring = []
}
- } else {
- tmp.waring = []
+ if (tmp.fault) {
+ for (let j = 0; j < tmp.fault.length; j++) {
+ tmp.fault[j].dateProportion = tmp.fault[j].duration / 86400 * 100 + '%'
+ let leftTmp = (moment(tmp.fault[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
+ tmp.fault[j].left = leftTmp / 86400 * 100 + '%'
+ }
+ } else {
+ tmp.fault = []
+ }
}
- } else {
- res.result[i].value = { normal: [], waring: [] }
+ else {
+ res.result[i].value = { normal: [], waring: [], fault: [] }
+ }
}
+ _this.listInfo = res.result
}
- _this.listInfo = res.result
- }
- })
+ })
},
dateParamChange(v1, v2) {
this.queryParams.startTime = v2[0]
@@ -169,7 +170,6 @@
add(node) {
let _this = this
this.visible = true
- this.node = node
this.queryParams = {
equipmentId: node.equipmentId,
equipmentName: node.equipmentName
@@ -183,79 +183,8 @@
},
handleCancel() {
this.visible = false
- },
- close() {
- this.visible = false
- this.show = false
}
}
}
</script>
-<style scoped lang="less">
- .full-modal {
- .ant-modal {
- max-width: 100%;
- top: 0;
- padding-bottom: 0;
- margin: 0;
- }
- .ant-modal-content {
- display: flex;
- flex-direction: column;
- height: calc(100vh);
- }
- .ant-modal-body {
- flex: 1;
- }
- }
- /deep/ .ant-modal{
- /*background-color: #000;*/
- /*color: #fff;*/
- }
- /deep/ .ant-modal-header{
- /*background-color: #000;*/
- }
- /deep/ .ant-modal-title{
- /*color: #fff;*/
- }
- /deep/ .ant-modal-close{
- color: #1191b0;
- font-size: 24px;
- }
- /deep/ .ant-modal-content{
- /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/
- /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/
- /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
- /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
- /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
- /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
- /*background-color: #000;*/
- /*color: #fff;*/
- position: relative;
- }
- /deep/ .ant-modal-header{
- /*border-bottom: none!important;*/
- }
- /deep/ .ant-form-item-label label{
- /*color: #fff;*/
- }
- /*.ant-btn {*/
- /*padding: 0 10px;*/
- /*margin-left: 3px;*/
- /*}*/
-
- /*.ant-form-item-control {*/
- /*line-height: 0px;*/
- /*}*/
-
- /*!** 涓昏〃鍗曡闂磋窛 *!*/
- /*.ant-form .ant-form-item {*/
- /*margin-bottom: 10px;*/
- /*}*/
-
- /*!** Tab椤甸潰琛岄棿璺� *!*/
- /*.ant-tabs-content .ant-form-item {*/
- /*margin-bottom: 0px;*/
- /*}*/
-</style>
--
Gitblit v1.9.3