325 lines
13 KiB
HTML
325 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>数据大屏 - 众产农林</title>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
||
<link href="/ud/bigscreen/bigscr.css" rel="stylesheet" type="text/css" />
|
||
<link href="/zces108/widgets.css" rel="stylesheet" type="text/css" />
|
||
<style>
|
||
@keyframes opa {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
|
||
10% {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
20% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.popup-box {
|
||
position: absolute;
|
||
z-index: 999;
|
||
transform: translateX(calc(-50%)) translateY(calc(-100% + 4px));
|
||
pointer-events: none;
|
||
transition: all 0.5s;
|
||
opacity: 0;
|
||
}
|
||
|
||
.popup-box>.box {
|
||
border: 1px solid #6d8ef4;
|
||
background: linear-gradient(344deg, #0753b2, #05254e);
|
||
border-radius: 0.5em;
|
||
padding: 0.5em;
|
||
white-space: nowrap;
|
||
color: #ffffff;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.popup-box>.line {
|
||
height: 3em;
|
||
width: 1px;
|
||
margin: auto;
|
||
border-left: 1px solid #0753b2;
|
||
}
|
||
|
||
.popup-box>.rlc {
|
||
width: 7px;
|
||
height: 7px;
|
||
background: #0753b2;
|
||
margin: auto;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
#ceContainer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.cecontrolpanel {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
bottom: 0.5em;
|
||
padding: 0.2em;
|
||
color: #000000;
|
||
}
|
||
|
||
.ceflys {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 0.5em;
|
||
padding-bottom: 2em;
|
||
}
|
||
|
||
.ceflys>div {
|
||
padding: 0.3em 1em;
|
||
background: #ffffffaa;
|
||
border: 1px solid #ffffff;
|
||
border-radius: 2em;
|
||
color: #000000;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.ceflys>div.select {
|
||
background: #ffffff;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bd04" style="perspective: 1000px;font-size:14px;background:radial-gradient(#0b2580, #08194c);">
|
||
|
||
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciybigscreen.js"></script>
|
||
<script type="text/javascript" src="/jscss/echarts.min.js"></script>
|
||
<script type="text/javascript" src="/zces108/Cesium.js"></script>
|
||
<script type="text/javascript" src="/zces108/ciyearth.min.js"></script>
|
||
<script type="text/javascript" src="/zces108/map.min.js"></script>
|
||
<script type="text/javascript" src="../../common.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
//https://www.dafont.com/theme.php?cat=302&text=0123456789 数字字体下载
|
||
//http://item.local.ciy.cn/tool/borderimage.html
|
||
//https://www.vantajs.com/ 动效
|
||
//https://www.braedin.com/Thpace/ 动效
|
||
//https://wweb.dev/resources/animated-css-background-generator/ 动效
|
||
'use strict';
|
||
var urlp;
|
||
var map;
|
||
var chtpls = {};
|
||
var Glob = { post: {}, bet: 1, fontsize: 14, banknox: 1 };
|
||
var jspre = 'b64';
|
||
ciyfn.pageload(function () {
|
||
urlp = ciyfn.urlparam();
|
||
ciyfn.big_resolution(1536, 864);
|
||
ciyfn.big_setbetsize(1536);
|
||
$5('body').css('min-height', '864px');
|
||
setTimeout(function () {
|
||
//window.scroll(0, 200);
|
||
}, 1000);
|
||
ciyfn.callfunc('init', {}, function (json) {
|
||
Glob.post.orgid = json.orgid;
|
||
Glob.myparam = {};
|
||
Glob.myparam.title = json.title;
|
||
|
||
$5('[data-title]').text(Glob.myparam.title);
|
||
|
||
|
||
//全局设置的数据，弹窗提示，然后设置到Glob.post。
|
||
//panel需要的数据，设置到chtpl.post。
|
||
showbank({ id: 1 }, true);
|
||
//showvideo({ id: 2449, name: 'xx摄像头' });
|
||
//showfarm({ id: 180, name: 'xx单位' });
|
||
|
||
});
|
||
//run或者，mqtt 接收表变化，遍历chtpls，'/orgid' db.xxx {'bplant':['db.ag_m20110_baseplant','ct.farmertype']};
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
ciyfn.big_setbetsize(1536);
|
||
for (var ipl in chtpls) {
|
||
chtpls[ipl].resize();
|
||
}
|
||
});
|
||
function setdata() { //临时
|
||
for (var ipl in chtpls) {
|
||
chtpls[ipl].setdata();
|
||
}
|
||
}
|
||
function distory() {
|
||
for (var ipl in chtpls) {
|
||
chtpls[ipl].distory();
|
||
delete chtpls[ipl];
|
||
}
|
||
}
|
||
|
||
function showvideo(mas) {
|
||
var chtname = 'video1';
|
||
chtpls[chtname] = new ciyclass.bigpanel({
|
||
name: 'panel_' + chtname
|
||
, jspath: './' + jspre + '/'
|
||
, animation: 'small'
|
||
, style: 'position: absolute;top:50px;left:50px;right:50px;bottom:50px;z-index:2010;background: url(\'/ud/bigscreen/bg/bg04.png\') repeat, radial-gradient(#0b2580, #08194c);color: #ffffff;border: 1px solid #61c9ed;border-radius: 7px;'
|
||
});
|
||
|
||
chtpls[chtname].post = { 'chtname': chtname, videoid: mas.id, img: mas.capture };
|
||
var captionhtml = `
|
||
<div style="font-family: fnt01;position:absolute;top:0;left:0;right:0;width:100%;height:auto;z-index:20;">
|
||
<img src="/ud/bigscreen/caption/01.png" style="height:6em;margin: auto;display: block;" />
|
||
<div data-title style="min-width: 25em;position:absolute;top:0;left:0;right:0;text-align:center;line-height:2em;font-size: 2em;background: linear-gradient(to bottom, #ffffff, #50c4eb 60%);background-clip: text;-webkit-background-clip: text;color: transparent;">`+ mas.name + `</div>
|
||
|
||
<div style="position:absolute;left:0;top:2.3em;right:0;pointer-events: none;animation:opa 5s infinite;">
|
||
<img src="/ud/bigscreen/orn/07.png" style="width: 15em;display: block;margin: auto;">
|
||
</div>
|
||
</div>
|
||
`;
|
||
chtpls[chtname].container.append(captionhtml);
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_c1'
|
||
, style: 'position:absolute;left:1em;right:1em;bottom:1em;top: 5em;'
|
||
});
|
||
chtpls[chtname].setbtns({ template: 'close1', hideopacity: 0.8 });
|
||
chtpls[chtname].run({});
|
||
}
|
||
function showbank(mas, bclose) {
|
||
Glob.banknox++;
|
||
var chtname = 'bank' + Glob.banknox;
|
||
chtpls[chtname] = new ciyclass.bigpanel({
|
||
name: 'panel_' + chtname
|
||
, jspath: './' + jspre + '/'
|
||
, style: 'position: absolute;z-index: ' + (Glob.banknox + 1111) + ';top:4em;left:5px;right:5px;bottom:20px;background:radial-gradient(#0b2580, #08194c);'
|
||
, animation: (bclose ? '' : 'ani1')
|
||
});
|
||
|
||
var captionhtml = `
|
||
<div style="font-family: fnt03;position:absolute;top:-4em;left:0;right:0;width:100%;height:auto;z-index:10;">
|
||
<img src="/ud/bigscreen/caption/09-og.png" style="height:3.5em;margin: auto;display: block;" />
|
||
<div data-title style="min-width: 50em;position:absolute;top:0;left:0;right:0;text-align:center;line-height:1.7em;font-size: 2em;background: linear-gradient(to bottom, #ffffff, #50c4eb 60%);background-clip: text;-webkit-background-clip: text;color: transparent;">`+ Glob.myparam.title + `</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;bottom:3px;right:3px;">
|
||
<img src="/ud/bigscreen/orn/orna01.gif" style="height:21px" />
|
||
</div>
|
||
`;
|
||
chtpls[chtname].container.append(captionhtml);
|
||
chtpls[chtname].post = { 'chtname': chtname, bankid: mas.id };
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_l1'
|
||
, style: 'position:absolute;left:0;top:0;width:33%;height:33%;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_l2'
|
||
, style: 'position:absolute;left:0;top:33%;width:33%;height:33%;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_l3'
|
||
, style: 'position:absolute;left:0;top:66%;width:50%;height:34%;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_c1'
|
||
, style: 'position:absolute;left:33%;top:0;width:34%;height:6em;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_c2'
|
||
, style: 'position:absolute;left:33%;top:7em;width:34%;height:calc(66% - 8em);'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_r1'
|
||
, style: 'position:absolute;left:67%;top:0;width:33%;height:33%;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_r2'
|
||
, style: 'position:absolute;left:67%;top:33%;width:33%;height:33%;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: 'bank1_r3'
|
||
, style: 'position:absolute;left:50%;top:66%;width:50%;height:34%;'
|
||
});
|
||
//chtpls[chtname].post = {'chtaaa':1};
|
||
|
||
if (!bclose)
|
||
chtpls[chtname].setbtns({ template: 'close1', hideopacity: 0, top: 'calc(2px - 2em)' });
|
||
//为每个func定义数据刷新时间。
|
||
chtpls[chtname].run({ 'bplant': 50 });//半秒为单位，统一请求数据，支持阻塞连接
|
||
}
|
||
function showfarm(mas, bclose) {
|
||
Glob.banknox++;
|
||
var chtname = 'farm1';
|
||
chtpls[chtname] = new ciyclass.bigpanel({
|
||
name: 'panel_' + chtname
|
||
, jspath: './' + jspre + '/'
|
||
, animation: 'ani1'
|
||
, style: 'position: absolute;z-index: ' + (Glob.banknox + 1111) + ';top:4em;left:0;right:0;bottom:0;perspective: 1000px;font-size:14px;background:radial-gradient(#0b2580, #08194c);'
|
||
});
|
||
|
||
var captionhtml = `
|
||
<div style="font-family: fnt01;position:absolute;top:-4em;left:0;right:0;width:100%;height:auto;z-index:10;">
|
||
<img src="/ud/bigscreen/caption/09-og.png" style="height:3.5em;margin: auto;display: block;" />
|
||
<div data-title style="min-width: 50em;position:absolute;top:0;left:0;right:0;text-align:center;line-height:1.7em;font-size: 2em;background: linear-gradient(to bottom, #ffffff, #50c4eb 60%);background-clip: text;-webkit-background-clip: text;color: transparent;">`+ Glob.myparam.title + `</div>
|
||
</div>
|
||
|
||
<div style="position:absolute;bottom:3px;right:3px;">
|
||
<img src="/ud/bigscreen/orn/orna01.gif" style="height:21px" />
|
||
</div>
|
||
`;
|
||
chtpls[chtname].container.append(captionhtml);
|
||
|
||
|
||
chtpls[chtname].post = { 'chtname': chtname, farmid: mas.id };
|
||
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_bg_cemap' // _bg_map _bg_cesium _bg_cemap
|
||
, style: 'position:absolute;left:0%;top:-4em;width:100%;height:calc(100% + 4em);'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_l1'
|
||
, style: 'position:absolute;left:0;bottom:74%;width:335px;height:25%;padding-left: 1em;overflow:hidden;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_l2'
|
||
, style: 'position:absolute;left:0;bottom:38%;width:335px;height:35%;padding-left: 1em;overflow:hidden;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_l3'
|
||
, style: 'position:absolute;left:0;bottom:1%;width:335px;height:36%;padding-left: 1em;overflow:hidden;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_c1'
|
||
, style: 'position:absolute;left:22%;top:0;width:56%;height:6em;overflow:hidden;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_r1'
|
||
, style: 'position:absolute;right:0;bottom:88%;width:335px;padding-right: 1em;overflow:hidden;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_r2'
|
||
, style: 'position:absolute;right:0;bottom:45%;width:335px;height:43%;padding-right: 1em;overflow:hidden;'
|
||
});
|
||
chtpls[chtname].addplot({
|
||
jsname: chtname + '_r3'
|
||
, style: 'position:absolute;right:0;bottom:1%;width:335px;height:43%;padding-right: 1em;overflow:hidden;'
|
||
});
|
||
if (!bclose)
|
||
chtpls[chtname].setbtns({ template: 'close1', hideopacity: 0, top: 'calc(2px - 2em)' });
|
||
chtpls[chtname].run({ 'farmdata_1': 503, 'farmdata_2': 50 });
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |