Alarm Interface

// real-time alarm

<div>

<Button type="primary" @click="addRow" style="position:fixed;top:100px;z-index:100">插入信息按钮</Button>

</div>

<span

:title="+stationCode ? initform.cd_station[stationCode] : ''"

style="display:inline-block;max-width:160px;vertical-align: middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"

>{{+stationCode ? initform.cd_station[stationCode] : ''}}</span>

Today, the total number of alarms: {{alarmNum_list.Num}}

</Button>

<Tag color="volcano" v-show="alarm_bottom_show">未处理数：{{alarmNum_list.unhandleNum}}</Tag>

<Tag color="volcano" v-show="alarm_bottom_show">已处理数：{{alarmNum_list.handleNum}}</Tag>

<Tag color="volcano" v-show="alarm_bottom_show">影响打印：{{alarmNum_list.affectNum}}</Tag>

<Tag color = "volcano" v-show = "alarm_bottom_show"> does not affect printing: {{alarmNum_list.unaffectNum}} </ Tag>

</div>

<i class="ivu-icon ivu-icon-ios-archive" style="font-size:26px;"></i>查询

</Tooltip>

</div>

v-bind:class="[(selStatus.name !=0 || selType.name !=0 || selStation.name !=0) ? 'color_blue' : '', 'ivu-icon', 'ivu-icon-ios-funnel']"

style="font-size:26px;"

> </ I> Filter

</span>

</Tooltip>

<transition-group name="fade">

<div

style="position:absolute;left:-300px;background:rgb(248, 248, 249);z-index: 1001;"

v-show="showModel"

:key="1"

<a href="#" class="filter_title" style="background: #2d8cf0;"></a>状态

</p>

<Tag

v-for="item in alarmStatusList"

type="dot"

:key="item.name"

@click.native="tagClick(item,'status')"

:color="isCurrentTag(item,'status') ? 'success' : 'default'"

>{{item.title}}</Tag>

</div>

<a href="#" class="filter_title" style="background: #f00;"></a>站点

</p>

<Tag

v-for="item in stationList"

type="dot"

:key="item.name"

@click.native="tagClick(item,'station')"

:color="isCurrentTag(item,'station') ? 'success' : 'default'"

>{{item.title}}</Tag>

</div>

<a href="#" class="filter_title" style="background: #19be6b;"></a>类型

</p>

<Tag

v-for="item in alarmTypeList"

type="dot"

:key="item.name"

@click.native="tagClick(item,'type')"

:color="isCurrentTag(item,'type') ? 'success' : 'default'"

<icon

type="md-flag"

v-show="initform.cd_EffectPrint[item.name]==1"

title = "affect print Report"

></icon>

</Tag>

</div>

<div>

</div>

</Card>

</div>

</transition-group>

</div>

<Input

placeholder = "by Keyword Search"

v-model="selVlpn"

style="width: 180px;margin-right:5px;margin-top:4px;"

@on-search="vlpnSearch"

</div>

<span>{{item.title}}</span>

</Radio>

</RadioGroup>

</div>

<transition-group appear v-show="hasData" class="conv-detail">

<Col

:xs="12"

:sm="8"

:md="6"

:lg="4"

v-for="(item,index) in alarmList"

:key="index"

style="min-width:300px;max-width:500px;"

<span

@click="handleClick(item)"

: Description = "item.IUSTA"

style="float:left;max-width:180px;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"

> {{}} Item.IUSTA </ span>

<Poptip

v-show="item.AlarmDeal=='01' && initform.cd_EffectPrint[item.AlarmType]"

placement="bottom"

confirm

title = "Are you sure you send a regulatory directive mandating IPC stop check?"

@on-ok="stopCheck(item)"

style="float:right;"

</Poptip>

</p>

<Row>

<span

:style="setVLPNColor(item.VLPNColor)"

:title="item.VLPN"

@click.stop="vlpnClick(item.VLPN)"

>{{item.VLPN}}</span>

</Col>

<span

v-bind:class="[(item.AlarmDeal=='01' || item.IsAlarm=='0') ? 'color_red' : 'color_blue']"

> {{Item.AlarmDeal == '01'? initform.cd_state [item.AlarmDeal] initform.cd_isAlarm [item.IsAlarm]}} </ span>

</Col>

</div>

</Row>

<Row>

<div class="cart_row">{{item.AlarmTime | dataFormat("yyyy-MM-dd hh:mm:ss") }}</div>

</Row>

<Row>

<div class="cart_row">{{initform.cd_alarmType[item.AlarmType] || ''}}</div>

</Row>

<Row>

<p class="record_div" style="line-height:20px;">{{item.AlarmRecord}}</p>

</div>

</Row>

</div>

</Card>

</div>

</Col>

</transition-group>

<Div> Loading </ div>

</Spin>

</Col>

<Modal

class="model_div"

v-model="editModel"

: Title = "(AlarmForm.AlarmType (initform.cd_alarmType [AlarmForm.AlarmType] || ''): '?') + '- alarm'"

<FormItem label = "frame number:"> {{AlarmForm.VIN}} </ FormItem>

<FormItem label = "reception number:"> {{AlarmForm.InspectionNum}} </ FormItem>

<FormItem label = "Site Name:"> {{AlarmForm.IUSTA}} </ FormItem>

<FormItem label = "Alarm Content:"> {{AlarmForm.AlarmRecord}} </ FormItem>

<FormItem

v-show="AlarmForm.AlarmDeal=='02'"

label = "Processing time:"

>{{AlarmForm.HandleTime | dataFormat("yyyy-MM-dd hh:mm:ss")}}</FormItem>

<FormItem

label = "Are the police:"

v-show="AlarmForm.AlarmDeal=='02'"

> {{Initform.cd_isAlarm [AlarmForm.IsAlarm]}} </ FormItem>

<Input

v-model="AlarmForm.Remark"

type="textarea"

:autosize="{minRows: 2,maxRows: 4}"

placeholder = "Notes ..."

></Input>

</FormItem>

</Form>

</div>

</Modal>

</Row>

</div>

</template>

import { getCDData } from "@/modules/exhaust/utils/utils";

import { objDeepCopy } from "@/utils/tools";

import config from "@/../public/config/config";

const socket = require("socket.io-client")(config.socket_conf);

export default {

data() {

return {

userInfo:. this $ store.getters.getUserInfo, // login user information

stationCode: 0,

alarm_bottom_show: false,

hasData: true,

height: 0,

editModel: false,

showmodel: false,

selVlpn: "",

selStatus: {title: "all", name: "3"}, // check alarm status

selType: {title: "all", name: "0"}, // selected alarm type

selStation: {title: "whole", name: "0"}, // selected sites

alarmlist []

Alarm form: {}

selectData: {}, // currently selected node

hasDisabled: false, // processed is not clickable

alarmStatusList: [

{ title: "全部", name: "0" },

{Title: "unprocessed", name: "1"},

{Title: "processed", name: "2"},

{Title: "Effect of Print", name: "3"},

{Title: "does not affect printing", name: "4"}

alarmTypeList: [{ title: "全部", name: "0" }],

stationList: [{ title: "全部", name: "0" }],

initform: {

cd_state: { "01": "unprocessed", "02": "processed"},

cd_isAlarm: { "0": "Alarm", "1": "no alarm"},

cd_EffectPrint: {}

alarmNum_list: {},

dataCount: 0,

pageSize: 30,

pageIndex: 1 // default to the first page of the current

};

computed: {

showCommand() {

return function(item){

var limitStopTime=this.$config.limitStopTime || 10*60*1000;

return new Date( this.$options.filters.dataFormat(item.AlarmTime,"yyyy-MM-dd hh:mm:ss")).getTime()+limitStopTime>new Date().getTime();

}

components: {},

methods: {

vlpnClick(vlpn) {

this.$router.push({

params: {

searchValue: vlpn

}

});

stopCheck(item) {

if(!item.StationCode) return;

const keys=`fwd/ljfw/alarm${item.StationCode}`;

const SceneCode=item.SceneCode;

const value={ID:item.InspectionNum,CODE:0,INFO:item.AlarmRecord};

// Push

socket.emit(keys,`${SceneCode}#${JSON.stringify(value)}`);

filterIcon() {

this.showModel = this.showModel;

filterSearch(s) {

this.pageSize = 30;

this.pageIndex = 1; // this is the first page of the default

this.alarmList = [];

this.loadData();

if (s) this.showModel = !this.showModel;

setVLPNColor(VLPNColor) {

if (!this.$config.vlpn_c[VLPNColor]) return "";

const vlpn_c = this.$config.vlpn_c[VLPNColor];

return `display: inline-block;

margin: -2 auto;

border-radius: 6px;

border-style: double;

text-align: center;

padding: 0px 2px;

line-height:20px;

background: ${vlpn_c.Background};

color:${vlpn_c.TextColor};

border-color:${vlpn_c.BorderColor};

font-size: 8pt;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap`;

submit (isAlarm) {

const _this = this;

if (isAlarm == 0 || isAlarm == 1) {

this.AlarmForm.AlarmDeal = "02";

this.AlarmForm.IsAlarm = isAlarm;

}

const param = {

ID: this.AlarmForm.ID,

alarmDeal: this.AlarmForm.AlarmDeal,

isAlarm: this.AlarmForm.IsAlarm,

remark: this.AlarmForm.Remark,

handle: this.$store.state.user.userInfo.userName,

handleTime: new Date()

};

const url = "api/SaveAlarmData";

this.saveInfo(url, param).then(function(res) {

if (res.state) {

// after the assignment has been processed and the processing time people

if (_this.AlarmForm.AlarmDeal) {

_this.AlarmForm.Handle = param.handle;

_this.AlarmForm.HandleTime = param.handleTime;

}

// modify the original template view

let hasData = _this.alarmList.find(t => t.ID == _this.AlarmForm.ID);

if (hasData) {

hasData.AlarmDeal = _this.AlarmForm.AlarmDeal;

hasData.IsAlarm = _this.AlarmForm.IsAlarm;

hasData.Remark = _this.AlarmForm.Remark;

hasData.Handle = _this.AlarmForm.Handle;

hasData.HandleTime = _this.AlarmForm.HandleTime;

}

// if (_this.initform.cd_EffectPrint [hasData.AlarmType] == 1) // only reduce the impact of printing reports

if (isAlarm == 0 || isAlarm == 1) _this. store.commit $ ( 'editUnProcessAlarm', - 1);

_this.editModel = false;

} else {

. _This $ Message.error ( "save failed!");

}

});

HistorySearch() {

this.$router.push({ name: "hj_alarm_search" });

vlpnSearch(value) {

this.alarmList = [];

this.selVlpn = value;

this.loadData();

closeModel() {

this.editModel = false;

loadCDData() {

const _this = this;

getCDData(this, [

{

tableName: "CD_AlarmType",

columns: "CodeValue,CodeName,EffectInspectionPrint",

where: "where IsAvailable=1 order by EffectInspectionPrint desc"

{

tableName: "CD_FuelType",

columns: "CodeValue,CodeName",

where: "where IsAvailable=1"

{

tableName: "CD_City",

columns: "CodeValue,CodeName",

where: "where IsAvailable=1"

{

tableName: "StationInfo",

columns: "StationCode as CodeValue,StationName as CodeName",

where: ""

}

]).then(function(res) {

if (res.state) {

const CD_Name = [

"cd_alarmType",

"cd_fuelType",

"cd_city",

"cd_station"

];

res.data.map((items, index) => {

_this.initform[CD_Name[index]] = {};

items.forEach(item => {

_this.initform[CD_Name[index]][item.CodeValue] = item.CodeName;

});

if (CD_Name[index] == "cd_alarmType") {

items.forEach(item => {

_this.initform.cd_EffectPrint[item.CodeValue] =

item.EffectInspectionPrint;

_this.alarmTypeList.push({

title: item.CodeName,

});

}

if (CD_Name[index] == "cd_station") {

items.forEach(item => {

_this.stationList.push({

title: item.CodeName,

});

}

});

}

});

loadData() {

const _this = this;

const param = {

areaCode:this.userInfo.areaCode,

dpid_admin:this.userInfo.dpid_admin,

selStation: this.selStation.name,

selStatus: this.selStatus.name,

selType: this.selType.name,

selVlpn: this.selVlpn,

pageIndex: this.pageIndex,

pageSize: this.pageSize,

alarmTime: this.$options.filters.dataFormat(

new Date(),

"yyyy-MM-dd 00:00:00"

)

};

let url = "api/getAlarmData";

this.saveInfo(url, param).then(function(res) {

if (res.state) {

if (res.data.alarmList.length == 0) _this.hasData = false;

else _this.hasData = true;

if (res.data.alarmList.length > 0)

_this.alarmlist = _this.alarmlist.concat (res.data.alarmlist);

if (res.data.dataCount.length > 0)

_this.dataCount = res.data.dataCount[0].Num;

if (res.data.alarm_count.length > 0)

_this.alarmNum_list = res.data.alarm_count[0];

// assign the current inspection station

_this.stationCode = _this.selStation.name;

} else {

. _This $ Message.error ( "Query failed!");

}

});

// request package

saveInfo(url, param) {

const _this = this;

return new Promise(function(resolve, reject) {

_this.$SkyForm

.fxPost(url, param)

.then(res => {

resolve(res);

})

.catch(err => {

reject(err);

. _This $ Message.error ( "Operation failed!");

});

handleClick(item) {

item.IsAlarm = item.IsAlarm + ""; // modified string type

if (item.AlarmDeal == "02") this.hasDisabled = true;

else this.hasDisabled = false;

this.selectData = item;

this.AlarmForm = { ...item };

this.editModel = true;

addRow(data) {

if(this.userInfo.dpid_admin!=0 && this.userInfo.areaCode !=''){

if(data.AreaCode !=this.userInfo.areaCode) return;

this.alarmList.unshift(data);

}

addClass (Alert type, Alarm Deal) {

if (AlarmDeal == "02") return "alarmA";

if (this.initform.cd_EffectPrint[AlarmType]) return "alarmB";

else return "alarmC";

setHeight() {},

scrollFn() {

let isLoading = false;

// bottom when loaded once from 200px

let bottomOfWindow =

document.querySelector(".conv-detail").offsetHeight -

document.querySelector(".conv-detail-main").scrollTop -

window.innerHeight <=

100;

const c_offsetHeight =

document.querySelector(".conv-detail").offsetHeight > 0;

if (bottomOfWindow && isLoading == false && c_offsetHeight) {

if (this.pageIndex * this.pageSize > this.dataCount) {

this.$Notice.info({

title: `` The current is the last page

});

return true;

}

this.$Notice.info({

title: `Loading of $ {this.pageIndex + 1} p '

});

isLoading = true;

this.pageIndex++;

this.loadData();

}

throttle(func, wait, mustRun) {

// simple throttle function

was timeout,

startTime = new Date();

return function() {

var context = this,

args = arguments,

curTime = new Date ();

clearTimeout(timeout);

// If you reach the specified time interval trigger, trigger handler

if (curTime - startTime >= mustRun) {

func.apply(context, args);

startTime = curTime;

// did not reach the trigger interval, to reset the timer

} else {

timeout = setTimeout(func, wait);

}

};

isCurrentTag(item, type) {

if (type == "status") {

if (item.name == this.selStatus.name) return true;

return false;

} else if (type == "type") {

if (item.name == this.selType.name) return true;

return false;

} else if (type == "station") {

if (item.name == this.selStation.name) return true;

return false;

}

tagClick(item, type) {

if (type == "status") this.selStatus = { ...item };

else if (type == "type") this.selType = { ...item };

else if (type == "station") this.selStation = { ...item };

subscribeSocket() {

// Subscribe socket

const _this = this;

this.saveInfo("api/alarmSubscribe").then(function(res) {

if (res.state) {

socket.on("fwd/ljfw/alarm", msg => {

_this.addRow(JSON.parse(msg));

});

}

});

created() {

this.loadCDData();

mounted() {

this.loadData();

this.subscribeSocket();

window.addEventListener("resize", this.setHeight);

this.setHeight();

document

.querySelector(".conv-detail-main")

.addEventListener("scroll", this.throttle(this.scrollFn, 1000, 1500));

}

};

</script>

/ * Loading style * /

.demo-spin-icon-load {

animation: ani-demo-spin 1s linear infinite;

}

@keyframes ani-demo-spin {

from {

transform: rotate(0deg);

}

50% {

transform: rotate(180deg);

}

to {

transform: rotate(360deg);

}

.demo-spin-col {

width: 100%;

height: 30px;

position: relative;

}

.ivu-spin-fix{

background-color: transparent;

}

.v-enter,

.v-leave-to {

opacity: 0;

transform: translateY(-80px);

}

.v-enter-active,

.v-leave-active {

transition: all 1s ease;

}

/ * Add admission effects * /

/* .v-move {

transition: all 2s ease;

} */

.v-leave-active {

position: absolute;

}

/ * Understand * after three tricks to remember /

.fade-enter,

.fade-leave-to {

opacity: 0;

}

.fade-enter-to,

.fade-leave {

opacity: 1;

}

.fade-enter-active,

.fade-leave-active {

transition: all 3s;

}

.alarmA /deep/ .ivu-card-head {

border-top: 3px solid #b7b7b7;

}

.alarmB /deep/ .ivu-card-head {

border-top: 3px solid #ed4014;

}

.alarmC /deep/ .ivu-card-head {

border-top: 3px solid #ff9900;

}

.filter_title {

width: 10px;

height: 10px;

background: #2d8cf0;

margin: 0 4px;

display: inline-block;

border-radius: 5px;

}

.color_blue {

color: #5353ff;

}

.color_red {

color: #f00;

}

.color_green {

color: #568000d9;

}

.color_yellow {

color: #a0a011;

}

.cart-content {

height: 160px;

overflow: auto;

}

</style>

/ * Message notification bar * /

{.conv-notified

position: relative;

height: 50px;

line-height: 50px;

padding: 0 40px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

border-bottom: 1px solid #e6e5e6;

background: #fff;

}

.conv-notified .btn-bell {

float: right;

cursor: pointer;

margin-right: 15px;

margin-top: 12px;

line-height: 30px;

}

.conv-detail-main {

position: absolute;

top: 50px;

bottom: 0px;

left: 8px;

right: 8px;

overflow: auto;

background: #f3f3f3;

}

.conv-detail-main /deep/ .ivu-form-item-label {

color: #a0a0a0;

}

.conv-detail-main /deep/ .ivu-card-head {

border-bottom: none;

padding: 2px 15px;

}

.conv-detail-main /deep/ .ivu-card-head p,

.ivu-card-head-inner {

line-height: 34px;

height: 34px;

}

.conv-detail-main /deep/ .ivu-card-body {

padding: 4px 10px;

}

.conv-detail-main /deep/ .ivu-form-item {

margin-bottom: 0px;

}

.conv-detail-main /deep/ .ivu-form-item-label {

font-size: 12px;

padding: 6px 12px 6px 0;

}

.conv-detail-main /deep/ .ivu-form-item-content {

font-size: 12px;

line-height: 24px;

}

.conv-detail {

display: block;

overflow: hidden;

}

.model_div /deep/ .ivu-form-item {

margin-bottom: 4px;

}

.model_div /deep/ .ivu-form-item-error-tip {

padding-top: 0;

}

.record_div {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

}

.cart_row {

font-size: 12px;

line-height: 24px;

}

</style>

Guess you like