惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
小众软件
小众软件
Y
Y Combinator Blog
S
SegmentFault 最新的问题
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享
人人都是产品经理
人人都是产品经理
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
L
LangChain Blog
Martin Fowler
Martin Fowler
美团技术团队
B
Blog RSS Feed
GbyAI
GbyAI
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
大猫的无限游戏
大猫的无限游戏
博客园 - 司徒正美
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
The Blog of Author Tim Ferriss
Microsoft Azure Blog
Microsoft Azure Blog
腾讯CDC
Hugging Face - Blog
Hugging Face - Blog
D
Docker
G
Google Developers Blog

Dr34m's Blog

I Expect You To Die(我希望你死) 1,2,3 完整中文攻略 Linux换国内源 && docker安装 && 换加速镜像 Vue3 + Element-Plus 极简速查 随笔 pyinstaller打包的程序执行报错Failed to extract xxxx decompression resulted in return code -1 taoSync排除项简易教程 apscheduler的cron配置项 如何在绿联NAS中使用TaoSync同步我的文件到各个网盘 GB28181抓包记录 JS计算字节大小,把字节转换为KB/MB/GB/TB等 在Python中使用onvif管理摄像头,包括设备发现,获取RTSP地址,获取设备信息,截图,云台控制与缩放,设置时间 编写bat脚本实现对vue项目构建并压缩 内网穿透工具frp快速使用 CentOS 7.9 安装基础开发环境jdk redis nacos nginx mysql Pyinstaller 逆向 VUE实现复制与粘贴_获取剪切板内容 Electron + xterm.js + node-pty + vue 实现本地终端 child_process exec 中文乱码 Windows&Linux 解决方法 yum 更新 gcc CentOS安装并使用conda 将fluid主题博客的静态资源由第三方改为本地存储 一个上手即用的通用公众号/小程序/h5/app框架 python批量转化doc到docx SpringBoot单元测试注入空指针 TensorFlow 预测出现NaN的一种可能以及解决方法 随笔 python归一化数据 windows下python安装sasl遇到的问题及解决 将对象List中的某个字段放到新的List中[转载] Python http.server 本地服务支持跨域
h5实现一种自动滚动的告警列表
Dr3@m · 2020-11-12 · via Dr34m's Blog
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
var wrnList = [
{ "id": 1, "deviceType": "3", "content": "pressure过高", "createTime": "2020-10-20 13:34:05", "areaName": "某某区1"},
{ "id": 2, "deviceType": "4", "content": "tds过低", "createTime": "2020-10-20 13:04:44", "areaName": "某某区2"},
{ "id": 3, "deviceType": "4", "content": "tds过低", "createTime": "2020-10-20 13:04:44", "areaName": "某某区3"},
{ "id": 4, "deviceType": "4", "content": "tds过低", "createTime": "2020-10-20 13:04:44", "areaName": "某某区4"},
{ "id": 5, "deviceType": "3", "content": "pressure过高", "createTime": "2020-10-20 13:04:05", "areaName": "某某区5"},
{ "id": 6, "deviceType": "3", "content": "pressure过低", "createTime": "2020-10-20 12:34:05", "areaName": "某某区6"}];
var timer = 0;
mouseLeave();

// 翻滚
function autoScroll() {
var dom = $("#wrnList");
dom.css('margin-top', '-56px');
dom.addClass('anim');
// 第三行变第二行
var child3 = $(".child_3");
// child3.removeClass('child_3');
// child3.addClass('child_2');
child3.css('padding', '0 40px');
child3.css('opacity', '0.6');
child3.css('height', '46px');
child3.css('width', 'calc(302px - 80px)');
child3.css('background-image', "url('./img/wrn/small.png')");
child3.css('background-size', '302px auto');
child3.addClass('anim');
// 第四行变第三行
var child4 = $(".child_4");
// child4.removeClass('child_4');
// child4.addClass('child_3');
child4.css('padding', '0 50px');
child4.css('opacity', '1');
child4.css('height', '58px');
child4.css('width', 'calc(416px - 100px)');
child4.css('background-image', "url('./img/wrn/big.png')");
child4.css('background-size', '416px auto');
child4.addClass('anim');
// 第五行变第四行
var child5 = $(".child_5");
child5.css('opacity', '0.6');
child5.addClass('anim');
// 第二行变第一行
var child2 = $(".child_2");
child2.css('opacity', '0.3');
child2.addClass('anim');
var that = this;
setTimeout(function () {
that.wrnList.push(that.wrnList[0]);
that.wrnList.shift();
that.insertWrn();
dom.css('margin-top', '0px');
dom.removeClass('anim');
child3.removeClass('anim');
child4.removeClass('anim');
child5.removeClass('anim');
child2.removeClass('anim');
}, 400);
}

// 插数据方法
function insertWrn() {
var hl = '';
var wrnType = '';
for (var i in wrnList) {
if (i > 6) {
break;
}
if (wrnList[i].deviceType == 4 || wrnList[i].deviceType == 5) {
wrnType = '用水报警';
} else if (wrnList[i].deviceType == 2 || wrnList[i].deviceType == 3 || wrnList[i].deviceType == 7) {
wrnType = '管网报警';
} else if (wrnList[i].deviceType == 6) {
wrnType = '用电报警';
} else if (wrnList[i].deviceType == 1) {
wrnType = '空气报警';
} else {
wrnType = '未知报警';
}
hl += `<div class="wrnItem child_${parseInt(i) + 1}"><div class="wrnItemTime">${wrnList[i].areaName} ${wrnList[i].content} ${wrnType} ${wrnList[i].createTime}</div></div>`;
}
$("#wrnList").html(hl);
}

// 告警列表点击事件
function clickList(event) {
var itemId = wrnList[2].id;
var e = event || window.event;
var winWidth = window.innerWidth;
// console.log("winWidth", winWidth);
let x = e.clientX;
let y = e.clientY;
// console.log("x", x);
// console.log("y", y);
let right_margin = winWidth - x;
let top_margin = y;
// console.log("right_margin",right_margin);
// console.log("top_margin",top_margin);
if (top_margin <= 285 && top_margin >= 256) {
if (right_margin >= 153 && right_margin <= 223) {
// console.log("发起工单");
// addWorkOrder(itemId);
alert("发起工单" + itemId);
} else if (right_margin > 223 && right_margin <= 394) {
// console.log("忽略");
// ignoreWarning(itemId);
alert("误报" + itemId);
}
}
// console.log("i", i);
// console.log("itemId", itemId);

}

// 鼠标移入
function mouseEnter() {
// console.log("mouseEnter");
if (timer != 0) {
clearInterval(timer);
}
var child = $(".child_3");
child.css('padding-bottom', '34px');
child.css('background-image', "url('./img/wrn/big_on.png')");
}

// 鼠标离开
function mouseLeave() {
insertWrn();
if (wrnList.length > 3) {
timer = setInterval(autoScroll, 1800);
}
}