fix:能量报警放到首页,回转窑报表调整
This commit is contained in:
parent
984dc6d7b7
commit
7a7ad8c9ce
|
@ -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);
|
||||
|
||||
// 将StackPanel添加到GUI系统中
|
||||
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>
|
|
@ -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)
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue