fix:能量报警放到首页,回转窑报表调整

This commit is contained in:
shijing 2023-09-08 17:09:09 +08:00
parent 984dc6d7b7
commit 7a7ad8c9ce
5 changed files with 570 additions and 165 deletions

View File

@ -123,7 +123,6 @@
<div class="chart" id="chart6"></div>
</div>
</div>
<div class="socketDom">XXXXXXXX超过预设值请及时处理</div>
</div>
</template>
<script>
@ -151,6 +150,7 @@ export default {
initialRadius: 18,
initialTarget: null,
scene: null,
myui: null,
is_mainviewpoint: false,
resizeTimeout: null,
engine: null,
@ -212,9 +212,8 @@ export default {
year_start:0,
end_time:'',
start_time:'',
xAxisData:['一月', '二月', '三月', '四月', '五月', '六月'],
xAxisData:[],
arrMonth:[],
legendData:['电石渣','原料磨','煤磨','回转窑','水泥磨','水泥包装'],
chart1Option: {},
chart2Option: {},
chart3Option: {},
@ -228,7 +227,7 @@ export default {
seriesData4:[0,0,0,0,0,0],
seriesData5:[0,0,0,0,0,0],
seriesData6:[0,0,0,0,0,0],
path:"ws://49.232.14.174:2226/ws/room/?token=",
path:"ws://49.232.14.174:2226/ws/my/?token=",
ws:null,
}
},
@ -287,17 +286,24 @@ export default {
}
},
methods: {
// Class
bindClass(type){
let classInfo = { socketDom: true, redColor: false,
orangeColor:false, yellowColor:false, blueColor:true }
if(type==''){
classInfo.redColor = true
}
return classInfo
},
init() {
var that = this
// console.log(tool.cookie.get("TOKEN"))
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// debugger;
this.ws = new WebSocket(this.path+tool.cookie.get("TOKEN"))
//
this.ws.onopen = ()=> {
// debugger;
// console.log("socket");
setTimeout(()=>{
that.ws.send(JSON.stringify({'type': 'event'}))
@ -309,7 +315,7 @@ export default {
let data = JSON.parse(msg.data)
console.log(data)
if(data.type=='event'){
that.bindClass();
}if(data.type=='ticket'){
}if(data.type=='remaind'){
@ -328,7 +334,6 @@ export default {
},
getMessage(msg) {
debugger;
console.log(msg);
},
close() {
@ -375,8 +380,6 @@ export default {
that.seriesData2=seriesData2;
that.seriesData3=seriesData3;
that.seriesData3_2=seriesData3_2;
debugger;
that.initCharts();
})
},
@ -572,7 +575,6 @@ export default {
if (option == null) {
option = Object.assign({}, this.basicOption)
}
// debugger;
setTimeout(() => {
try {
@ -686,6 +688,7 @@ export default {
// GUI
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
that.myui = advancedTexture;
//
const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
//
@ -696,10 +699,14 @@ export default {
advancedTexture.addControl(control_main);
// function myFunction(){ alert("Yes, this work!"); };
// let guiTexture = new BABYLON_GUI.Image("img", "img/alarm_bg.png", {width:50,height:50,x:10,y:10}, myFunction);
// guiTexture.width = "80px"
// guiTexture.height = "30px";
// advancedTexture.addControl(guiTexture);
// let img_gui = new BABYLON_GUI.Image("img", "img/alarm_bg.png", {width:50,height:50,x:10,y:10}, advancedTexture,myFunction);
// img_gui.width = "80px"
// img_gui.height = "30px";
// img_gui.onPointerClickObservable.add(function(){
// })
// advancedTexture.addControl(img_gui);
var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
button_main.width = "80px"
button_main.height = "30px";
@ -740,6 +747,8 @@ export default {
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
debugger;
console.log(scene)
for (let key in that.sectionNames) {
var value = that.sectionNames[key];
@ -763,7 +772,6 @@ export default {
rect1.linkWithMesh(mesh);
rect1.linkOffsetY = -30;
console.log(rect1)
rect1.onPointerDownObservable.add(() => {
var mesh = rect1.linkedMesh;
if (camera.target != mesh.position) {
@ -786,26 +794,50 @@ export default {
// StackPanel
const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
data_view.width = '100px'; // StackPanel
data_view.bottom = rect1.bottom + 50 + 'px';
data_view.background = 'darkblue'
data_view.width = '208px'; // StackPanel
// data_view.background = 'darkblue'
data_view.alpha = 0.8
data_view.cornerRadius = 4;
//
const textLines = ["电耗: 123", "产量: 123"];
for (let i = 0; i < textLines.length; i++) {
let textLine = textLines[i];
// new BABYLON_GUI.GUITextarea(id, options, guimanager, append)
const textA = new BABYLON_GUI.TextBlock();
textA.height = "20px"
textA.color = "white"
textA.text = textLine;
const data_view_rect1=new BABYLON_GUI.Rectangle('data_view_rect1');
data_view_rect1.height = '40px'
data_view_rect1.width = '150px';
data_view_rect1.paddingTop = '4px';
data_view_rect1.cornerRadius = 10;
data_view_rect1.background = 'darkblue';
data_view_rect1.fontWeight = 'bold';
data_view_rect1.fontSize = '14px';
data_view_rect1.thickness = 0;
// data_view_rect1.alpha=0.8
data_view.addControl(data_view_rect1)
const textA = new BABYLON_GUI.TextBlock();
textA.height = "20px";
textA.color = "white";
textA.text = "单位产品电耗: 123";
data_view_rect1.addControl(textA);
const data_view_rect2=new BABYLON_GUI.Rectangle('data_view_rect2');
data_view_rect2.height = '40px'
data_view_rect2.width = '150px'
data_view_rect2.paddingTop = '4px';
data_view_rect2.cornerRadius = 10;
data_view_rect2.paddingBottom = '4px';
data_view_rect2.background = 'darkblue';
data_view_rect2.fontWeight = 'bold';
data_view_rect2.fontSize = '14px';
data_view_rect2.thickness = 0;
data_view_rect2.shadowColor = 'rgba(255,255,255,.5)'
data_view.addControl(data_view_rect2)
const textB = new BABYLON_GUI.TextBlock();
textB.height = "20px";
textB.color = "white";
textB.text = "产品产量: 123";
// text.fontSize = textLines[i].fontSize;
data_view.addControl(textA);
}
data_view_rect2.addControl(textB);
// StackPanelGUI
advancedTexture.addControl(data_view);
data_view.linkWithMesh(mesh);
data_view.linkOffsetY = -80;
data_view.linkOffsetY = -100;
}
}
engine.hideLoadingUI()
@ -878,6 +910,7 @@ export default {
scene.render();
});
this.engine = engine;
this.scene = scene;
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
@ -903,6 +936,8 @@ export default {
//
element.classList.remove('animate__fadeIn');
});
const sectionUI = this.myui.getControlByName(val+'_rect')
sectionUI.onPointerDownObservable.notifyObservers();
},
},
@ -973,31 +1008,23 @@ header {
justify-content: center;
font-size: 30px;
}
.left_main,
.right_main {
.left_main,.right_main {
z-index: 10;
position: absolute;
top: 40px;
width: 20%;
}
.right_main {
right: 0;
}
.left_other,
.right_other {
.left_other,.right_other {
position: absolute;
top: 240px;
width: 20%;
}
.right_other {
right: 0
}
.panel {
padding: 4px 8px;
overflow: auto;
@ -1009,7 +1036,6 @@ header {
border: 1px solid transparent;
margin: 6px 6px;
}
.panel_title {
height: 30px;
margin-bottom: 4px;
@ -1017,19 +1043,17 @@ header {
font-weight: bold;
color: #fff;
}
.panel_item {
color: #fff;
padding: 6px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335));
}
.panel_label {
font-size: 16px;
margin-bottom: 6px;
}
.pannel_number{
position: relative;
position: relative;
}
.panel_value {
padding-left: 1em;
@ -1037,7 +1061,6 @@ header {
font-weight: bold;
text-align: right;
}
.panel_unit {
right: 5px;
color: #aebfe9;
@ -1045,12 +1068,10 @@ header {
text-align: right;
position: absolute;
}
.chart {
width: 100%;
height: 220px;
}
.dropdown {
/* top: 20%;
font-size: 18px;
@ -1087,7 +1108,6 @@ header {
line-height: 3.7vw;
margin: 0 0.1vw 0.1vw 0.1vw;
}
.dropdown-item:hover,
.dropdown-item.active {
/* background-color: #ddd; */
@ -1103,17 +1123,5 @@ header {
background: url(./../../../public/img/menu_active.png) no-repeat;
background-size: 100%;
}
.socketDom{
position: absolute;
top: 10vh;
left: 50%;
font-size: 16px;
transform: translateX(-50%);
z-index: 101;
color: #ffffff;
background: rgba(11, 101, 140, 0.451);
padding: 10px 20px;
border-radius: 5px;
border: 1px solid #99fffe;
}
</style>

View File

@ -43,8 +43,8 @@
<th>运转率</th>
<th>成本</th>
<th colspan="6">质量</th>
<th colspan="12">单位产品标煤耗</th>
<th colspan="7">产品单位电耗</th>
<th colspan="7">单位产品标煤耗</th>
<th colspan="12">产品单位电耗</th>
<th rowspan="2">得分</th>
</tr>
<tr>
@ -58,11 +58,7 @@
<th>水分%</th>
<th>立升重%</th>
<th>f-CaO%</th>
<th>高温风机kgce/t</th>
<th>篦冷机一室风机电机kgce/t</th>
<th>篦冷机三室风机电机kgce/t</th>
<th>篦冷机二室风机电机kgce/t</th>
<th>窑头排风机主电机kgce/t</th>
<th>当期值kgce/t</th>
<th>目标值kgce/t</th>
<th>当期与目标差值kgce/t</th>
@ -70,7 +66,12 @@
<th>当期与环期差值kgce/t</th>
<th>环比增长率%</th>
<th>同比增长率%</th>
<th>高温风机kW·h/t</th>
<th>篦冷机一室风机kW·h/t</th>
<th>篦冷机三室风机kW·h/t</th>
<th>篦冷机二室风机kW·h/t</th>
<th>窑头排风机kW·h/t</th>
<th>当期值kW·h/t</th>
<th>目标值kW·h/t</th>
<th>当期与目标差值kW·h/t</th>
@ -172,17 +173,11 @@
arr[9]=item.入窑生料_水分_rate_pass!=null?item.入窑生料_水分_rate_pass:'/';
arr[10]=item.熟料_立升重_rate_pass!=null?item.熟料_立升重_rate_pass:'/';
arr[11]=item.熟料_fCaO_rate_pass!=null?item.熟料_fCaO_rate_pass:'/';
//
arr[12]=item.高温风机_consume_unit!=null?item.高温风机_consume_unit:'/';
arr[13]=item.篦冷机一室风机_consume_unit!=null?item.篦冷机一室风机_consume_unit:'/';
arr[14]=item.篦冷机三室风机_consume_unit!=null?item.篦冷机三室风机_consume_unit:'/';
arr[15]=item.篦冷机二室风机_consume_unit!=null?item.篦冷机二室风机_consume_unit:'/';
arr[16]=item.窑头排风机_consume_unit!=null?item.窑头排风机_consume_unit:'/';
//
arr[17]=item.elec_consume_unit//KW·h/t
arr[18]=item.celec_consume_unit;//KW·h/t//
arr[19]=item.celec_consume_unit;//KW·h/t
arr[12]=item.elec_consume_unit//KW·h/t
arr[13]=item.celec_consume_unit;//KW·h/t//
arr[14]=item.celec_consume_unit;//KW·h/t
let ind_pre = 0,huanbi = 0;
if(item.month_s==1){
ind_pre = 12;
@ -191,11 +186,17 @@
ind_pre=ind-1;
huanbi = wrapArr[ind_pre]?wrapArr[ind_pre].elec_consume_unit?wrapArr[ind_pre].elec_consume_unit:'/':'/'
}
arr[20]=huanbi;//KW·h/t
arr[21]=item.celec_consume_unit;//KW·h/t
arr[22]=item.celec_consume_unit;//%
arr[23]=item.celec_consume_unit;//%
arr[15]=huanbi;//KW·h/t
arr[16]=item.celec_consume_unit;//KW·h/t
arr[17]=item.celec_consume_unit;//%
arr[18]=item.celec_consume_unit;//%
//
//
arr[19]=item.高温风机_consume_unit!=null?item.高温风机_consume_unit:'/';
arr[20]=item.篦冷机一室风机_consume_unit!=null?item.篦冷机一室风机_consume_unit:'/';
arr[21]=item.篦冷机三室风机_consume_unit!=null?item.篦冷机三室风机_consume_unit:'/';
arr[22]=item.篦冷机二室风机_consume_unit!=null?item.篦冷机二室风机_consume_unit:'/';
arr[23]=item.窑头排风机_consume_unit!=null?item.窑头排风机_consume_unit:'/';
arr[24]=item.elec_consume_unit//KW·h/t
arr[25]=item.celec_consume_unit;//KW·h/t//
arr[26]=item.celec_consume_unit;//KW·h/t

View File

@ -102,6 +102,19 @@
关闭
</el-button>
</template>
<div class="left-panel">
<el-button
type="primary"
@click="exportExcel()"
:loading = "exportLoading"
>导出xlsx
</el-button>
<el-button
type="primary"
@click="handlePrint"
>打印
</el-button>
</div>
<el-main class="nopadding">
<div ref="print" id="myReport" class="printContainer">
<div style="margin-right: 20px;text-align: center;font-size: 16px;font-weight: bold;margin-bottom: 20px;">
@ -109,20 +122,23 @@
<span v-if="sflogItem.team_name">{{ sflogItem.team_name }}</span>
交接班记录
</div>
<h3 style="text-align: center;display: flex;justify-content: space-around;">
<span>2023.06.21</span>
<span>白班</span>
<span>甲班</span>
</h3>
<table border="1" width="1000" cellspacing="0" :key="timeStamp" id="myTable">
<tbody>
<tr>
<td class="numCell">日期</td>
<td class="numCell" v-if="sflogItem.end_time">{{sflogItem.end_time.slice(0,10)}}</td>
<td class="numCell">班次</td>
<td class="numCell">{{ sflogItem.shift_name }}</td>
<td class="numCell">班组</td>
<td class="numCell"><span v-if="sflogItem.team_name">{{ sflogItem.team_name }}</span></td>
</tr>
<tr>
<td class="numCell">产量t</td>
<td class="numCell">{{value1}}</td>
<td class="numCell">{{reportItem.total_production}}</td>
<td class="numCell">单位产品分布电耗KW·h/t</td>
<td class="numCell">{{value3}}</td>
<td class="numCell">{{reportItem.elec_consume_unit}}</td>
<td class="numCell">单位成本/</td>
<td class="numCell">{{value5}}</td>
<td class="numCell">{{reportItem.production_cost_unit}}</td>
</tr>
<tr>
<td class="numCell">生产情况记录</td>
@ -181,6 +197,7 @@
options:[],
optionsShift:[],
limitedExport:false,
reportItem:{},
};
},
mounted(){
@ -210,6 +227,22 @@
rowClick(row) {
this.sflogId = row.id;
this.sflogItem = row;
this.getSflogItem(row.id);
console.log(row)
},
getSflogItem(id){
let that =this;
let obj = {};
obj.type = 'sflog';
obj.sflog = id;
that.$API.enm.enstat.req({type:'sflog',sflog:id,page:0}).then(res=>{
// debugger;
if(res.length>0){
that.reportItem = res[0];
}
console.log(res[0])
})
},
//
sflog_edit(row) {

View File

@ -2,29 +2,42 @@
<el-container>
<el-header>
<div class="left-panel">
<el-input
v-model="query.search"
placeholder="名称"
clearable
style="margin-right: 5px;"
></el-input>
<el-button
<el-date-picker
v-model="timeRange"
type="datetimerange"
range-separator="至"
start-placeholder="发生时间始"
end-placeholder="发生时间止"
style="margin-right:10px"
value-format="YYYY-MM-DD HH:mm:ss"
@change="handleQuery"
clearable
/>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
<div class="right-panel">
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
@click="eventSetting"
>提醒配置
</el-button>
</div>
</el-header>
<el-main class="nopadding">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
:params="query"
:data="tableData"
fit
stripe
@resetQuery="resetQuery"
>
<el-table-column type="index" width="50"/>
<el-table-column label="所属部门" prop="deptName" show-overflow-tooltip>
<el-table-column label="所属部门" prop="deptName" show-overflow-tooltip>
</el-table-column>
<el-table-column label="所属工段" prop="mgroupName">
</el-table-column>
@ -36,108 +49,346 @@
</el-table-column>
<el-table-column label="发生类型" prop="buy_date">
</el-table-column>
<el-table-column label="状态">
<!-- <template #default="scope">
<el-tag v-if="scope.row.state===10" type="success">
{{ state_[scope.row.state] }}
</el-tag>
<el-tag v-else-if="scope.row.state===20" type="warning">
{{ state_[scope.row.state] }}
</el-tag>
<el-tag v-else-if="scope.row.state===30">
{{ state_[scope.row.state] }}
</el-tag>
<el-tag v-else type="danger">
{{ state_[scope.row.state] }}
</el-tag>
</template> -->
<el-table-column label="处理超时">
<template #default="scope">
<el-tag v-if="scope.row.is_timeout" type="warning"></el-tag>
<el-tag v-else type="success" effect="plain"></el-tag>
</template>
</el-table-column>
<el-table-column label="是否处理" show-overflow-tooltip>
<template #default="scope">{{ scope.row.parameter }}</template>
<el-table-column label="状态">
</el-table-column>
<el-table-column label="处理人">
<template #default="scope">{{ scope.row.keeper_name }}</template>
</el-table-column>
<el-table-column label="备注" show-overflow-tooltip prop="memo">
</el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="100px">
<el-table-column label="操作" fixed="right" align="center" width="120px">
<template #default="scope">
<el-link
type="primary"
@click="table_handle(scope.row)"
v-auth="'equipment.update'"
>
处理
>处理
</el-link>
<el-divider direction="vertical"></el-divider>
<el-link
type="danger"
@click="table_del(scope.row)"
v-auth="'equipment.delete'"
>
删除
>删除
</el-link>
</template>
</el-table-column>
</scTable>
</el-main>
<el-drawer :size="'50%'" v-model="showLimited" title="事件处理" :close-on-click-modal="false">
<el-card header="事件信息">
<el-form :model="eventItem" label-width="100px">
<el-row>
<el-col :span='12'>
<el-form-item label="所属部门:">{{ eventItem.deptName }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="所属工段:">{{ eventItem.mgroupName }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="所在班组:">{{ eventItem.teamName }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="所在班次:">{{ eventItem.shiftName }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="发生时间:">{{ eventItem.production_date }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="发生类型:">{{ eventItem.buy_date }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="状态:">{{ eventItem.buy_date }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="处理人:">{{ eventItem.buy_date }}</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="备注:">{{ eventItem.buy_date }}</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card v-if="eventItem.handle_user" style="margin-top: 8px">
<el-descriptions title="事件处理" :border="true">
<el-descriptions-item label="事件标记"
>{{ mark_options2[eventItem.mark] }}
</el-descriptions-item>
<el-descriptions-item label="处理人">
<span v-if="eventItem.handle_user"></span>{{ eventItem.handle_user_name }}
</el-descriptions-item>
<el-descriptions-item label="处理时间">
{{ eventItem.handle_time }}
</el-descriptions-item>
<el-descriptions-item label="处理描述" column="3">
{{ eventItem.handle_desc }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card header="事件处理" v-else style="margin-top: 8px">
<el-form :model="form" label-width="150px">
<el-row>
<el-col :span='12'>
<el-form-item label="事件标记">
<el-select v-model="form.mark" style="width: 100%">
<el-option
v-for="item in mark_options"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="mode==='show'"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span='12'>
<el-form-item label="处理描述">
<el-input
v-model="form.handle_desc"
clearable
type="textarea"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="width: 50%;text-align: center;">
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-card>
<el-card header="事件推送情况" style="margin-top: 8px">
<scTable
ref="table"
:data="remindData"
row-key="id"
fit
stripe
hidePagination
hideRefresh
hideDo
>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="事件种类" width="200">
<template #default="scope">
<el-tag
v-for="item in scope.row.event_.cates_"
:key="item.id"
type="warning"
>{{ item.name }}</el-tag
>
</template>
</el-table-column>
<el-table-column label="事件处理状态" prop="can_handle">
<template #default="scope">
<el-span v-if="scope.row.handle_user == null">未处理</el-span>
<el-span v-else>已处理</el-span>
</template>
</el-table-column>
<el-table-column
label="警报信息"
prop="event_.voice_msg"
width="200"
></el-table-column>
<el-table-column
label="接收人"
prop="recipient_.name"
></el-table-column>
<el-table-column label="是否可处理" prop="can_handle">
<template #default="scope">
<el-span v-if="scope.row.can_handle"></el-span>
<el-span v-else></el-span>
</template>
</el-table-column>
<el-table-column label="是否已读" prop="is_read">
<template #default="scope">
<el-span v-if="scope.row.is_read" color="green">已读</el-span>
<el-span v-else>未读</el-span>
</template>
</el-table-column>
<el-table-column
label="发送时间"
prop="create_time"
></el-table-column>
</scTable>
</el-card>
</el-drawer>
<el-dialog
title="提醒配置"
width="50%"
v-model="visible"
:append-to-body="true"
>
<el-form
:model="cateItem"
label-width="100px"
>
<el-form-item label="告警间隔">
<el-input-number
v-model="cateItem.unhandled_push_interval"
:min="0"
style="width: 90%;"
controls-position="right"
></el-input-number>
<span>毫秒</span>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="visible = false"> </el-button>
<el-button type="primary" :loading="isSaveing" @click="submitSetting"
> </el-button>
</template>
</el-dialog>
</el-container>
</template>
<script>
import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
export default {
name: "rparty",
name: "event",
components: {
CircleCheckFilled,
CircleCloseFilled
},
data() {
return {
apiObj: this.$API.em.equipment.list,
query: {
page:1,
page_size:20,
type:10
},
visible:false,
selection: [],
state_: {
10: '完好',
20: '限用',
30: '在修',
40: '禁用',
},
dLoading: false,
showLimited:false,
defaultTime: ['00:00:00', '23:59:59'],
timeRange: [],
apiObj: this.$API.ecm.event.list,
query: {
cates__code__in:'consume_exceed'
},
cateItem:{},
eventItem:{},
eventID:'',
mark_options2: {
10: "正常",
20: "误报",
},
form:{
mark:10,
handle_desc:''
},
mark_options: [
{ id: 10, name: "正常" },
{ id: 20, name: "误报" },
],
remindData:[],
};
},
created() {
this.getSetting();
},
mounted(){},
methods: {
getSetting(){
this.$API.ecm.event_cate.list.req({ page: 0 }).then((res) => {
let that = this;
res.filter((item) => {
if(item.code=='consume_exceed'){
that.cateItem = item;
// that.query.cates = item.id;
}
})
}).catch((err) => {
this.$message.warning(err);
});
},
//
eventSetting(){
this.visible = true;
},
//
submitSetting(){
let that = this;
if(that.cateItem.unhandled_push_interval!==null&&that.cateItem.unhandled_push_interval!==undefined){
that.visible = true;
this.$API.ecm.event_cate.update.req(that.cateItem.id,that.cateItem).then(res=>{
debugger;
that.visible = false;
that.isSaveing = false;
that.$message.success("操作成功");
})
}
},
//
table_handle(row) {
this.visible = true;
this.eventID = row.id;
this.showLimited = true;
this.$nextTick(() => {
this.$refs.handleDialog.open("edit").setData(row);
});
},
//
table_del(row) {
this.$confirm( `确定删除该事件吗?`,"提示",{type: "warning"}).then(() => {
this.$API.vm.visit.delete.req(row.id).then((res) => {
this.$message.success("删除成功");
this.$refs.table.refresh();
return res;
}).catch((err) => {
this.$message.warning(err);
});
})
},
//
table_show(row) {
this.visible = true;
},
//
async table_del(row) {
this.$API.em.equipment.delete
.req(row.id)
.then((res) => {
this.$message.success("删除成功");
return res;
})
.catch((err) => {
return err;
});
},
//
handleSaveSuccess(data, mode) {
this.$refs.table.refresh();
this.eventID = row.id;
this.dialog.handle = true;
this.$nextTick(() => {
this.$refs.handleDialog.open("show").setData(row);
});
},
//
handleQuery() {
this.$refs.table.queryData(this.query)
},
if(this.timeRange){
this.query.start_create = this.timeRange[0]
this.query.end_create = this.timeRange[1]
}else{
this.query.end_create = null
this.query.start_create = null
}
if(this.query.cates){
}else{
this.query.cates = null
}
this.$refs.table.queryData(this.query);
},
onSubmit() {
this.$API.ecm.event.handle.req(this.eventItem.id, this.params).then((res) => {
this.$emit("success");
this.$message.success("操作成功");
return res;
});
},
//
resetQuery() {
this.query = {};
},
exportList() {
this.dLoading = true;
this.$API.ecm.event.export_excel
.req(this.query)
.then(res=>{
window.open(res.path, "_blank");
this.dLoading = false;
}).catch(e=>{this.dLoading = false;})
}
},
};
</script>

View File

@ -3,6 +3,7 @@
<div class="widgets-content">
<div class="widgets" ref="widgets">
<div class="widgets-wrapper">
<!-- <div :class="bindClass()">XXXXXXXX超过预设值请及时处理</div> -->
<el-row :gutter="6" style="padding: 10px;">
<el-col>
<el-card header="产量及完成度" style="border-radius: 5px;box-shadow: none;">
@ -167,13 +168,24 @@
</div>
</el-card>
</el-col>
<el-col>
<el-card header="报警" style="border-radius: 5px;box-shadow: none;">
<div class="itemsWrap" style="margin-bottom:10px;margin-left:10px">
<el-badge :value="warningNum" :max="99" class="item">
<div class="items" style="margin:0">
<div class="item-number">能耗超标报警</div>
</div>
</el-badge>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
@ -184,6 +196,7 @@
month_s:'',
yearData:[],
monthData:[],
warningNum:0,
}
},
mounted() {
@ -196,12 +209,76 @@
that.month_s = month;
that.getYearData();
that.getMonthData();
that.getWraningNum();
// this.showTime();
// setInterval(()=>{
// this.showTime()
// },1000)
},
methods: {
// Class
bindClass(type){
let classInfo = { socketDom: true, redColor: false,
orangeColor:false, yellowColor:false, blueColor:true }
if(type==''){
classInfo.redColor = true
}
return classInfo
},
init() {
var that = this
// console.log(tool.cookie.get("TOKEN"))
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
this.ws = new WebSocket(this.path+tool.cookie.get("TOKEN"))
//
this.ws.onopen = ()=> {
// console.log("socket");
setTimeout(()=>{
that.ws.send(JSON.stringify({'type': 'event'}))
},500)
}
//
this.ws.onmessage = (msg)=>{
let data = JSON.parse(msg.data)
console.log(data)
that.getWraningNum();
// if(data.type=='event'){
// that.bindClass();
// }if(data.type=='ticket'){
// }if(data.type=='remaind'){
// }
};
// error
this.ws.onerror = function(error) {
console.log('ws断开,尝试重连')
setTimeout(()=>{
this.ws = null;
this.init()
}, 5000)
}
}
},
getMessage(msg) {
console.log(msg);
},
close() {
if (this.ws) {
this.ws.close();
this.ws = null;
console.log("socket已经关闭");
}
},
getWraningNum(){
let that = this;
that.$API.ecm.event.list.req({cates__code__in:'consume_exceed',is_handled:0,page:1}).then((res) => {
that.warningNum = res.count;
})
},
getYearData(){
let that = this;
let obj = {};
@ -275,4 +352,39 @@
text-align: left;
line-height: 12px;
}
.socketDom{
position: absolute;
top: 10vh;
left: 50%;
font-size: 20px;
font-weight:bold;
transform: translateX(-50%);
z-index: 101;
color: #ffffff;
border: 1px solid #99fffe;
background: rgba(11, 101, 140, 0.451);
padding: 10px 20px;
border-radius: 5px;
}
.redColor{
color: red;
border: 1px solid red;
background: rgba(255, 0, 0, 0.2);
}
.orangeColor{
color: orange;
border: 1px solid orange;
background: rgba(255,165,0,.2);
}
.yellowColor{
color: yellow;
background: rgba(255,255,0,.2);
border: 1px solid yellow;
}
.blueColor{
color: #2378f7;
background: rgb(35, 120, 247,.2);
border: 1px solid #2378f7;
}
</style>