当前位置：首页 > news >正文

头门港大屏

news 来源：原创 2024/5/19 23:32:55

事件流程：

弹窗事件（open-modal）

代码样例:

window.parent.postMessage(JSON.stringify({eventName:'open-modal',eventParams:{title:'${obj.enterprise_name}',type:'screen',content:'4808752165291008?fieldId=&filterId=4808901114381312&value=${obj.id}&skip=1',area: ['840px', '620px'],closeBefore: true,}}),'*')
/**
*title:弹窗标题
*type:弹窗类型：1.screen（大屏） 2.iframe（普通网址如表单） 3.video（视频弹窗）
*content：链接地址：1、screen（大屏code?fieldId=***&filterId=筛选器id&筛选内容&skip=1）2、iframe（http://221.12.100.58:29000/form-making-frontend/detail/表单编码?etpk=id&di=主键id&dp=2）3. 视频code
*area：弹窗尺寸，[宽，高]，注：需要添加单位
*closeBefore:在弹出之前是否关闭其他已打开的窗体
*offset: 位置, 例如 ['100px', '200px'] 翻译：举例 top 为 100px, left 为 200px 的位置弹出窗体，默认居中
*/

地图事件配置位置，事件内容可参考重大危险源，筛选器id可通过新建一个大屏跳转设置配置，然后预览在url里边极客拿到

地图事件：

/**
*切换地图code： eventName：changeCode ，eventParams：{code:xxx}
* 切换中心点eventName：changeCenter，eventParams：{x:11111111,y:111111}
*企业相关：eventName:changePoint,eventParams:{enterprise_id:xxxxxxxx}
*改变面板位置：{eventName:'changePaneLocation',eventParams:{leftScreen:{style:{top:0,left:0},state:true|false}}}翻译：leftScreen:左侧面板位置，rightScreen：右侧位置，state：开关，控制阴影
*/

大屏

注意：css文件地址：<link rel="stylesheet" href="http://221.12.100.58:29000/publicApi/public.css">每个自定义大屏都需要在全局外部js里引入，服务器路径（头门港42）：/data/nginx/icip-nginx/html/publicjs/development/test，其他园区用需要拷贝整个文件夹

列表：

<div class="box base-background">
<div class="box-content">
<div class="event-response-table">
<div class="head">
<div class="row">
<div style="width:10%" >序号</div>
<div style="width:30%" >公司名称</div>
<div style="width:30%" >危化品名称</div>
<div style="width:30%">操作</div>
</div>
</div>
<div class="body">
{{each data}}
<div class="row">
<div style="width:10%" >{{$index+1}}</div>
<div style="width:30%" >{{ $value[0] }}</div>
<div style="width:30%" >{{ $value[1] }}</div>
<div style="width:30%"><img style="width:20px;height:13px;" src="/imgs/1655175828455.png"/></div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
注意：需要在样式tab里把操作按钮隐藏，标题不需要展示的话也需要隐藏掉

卡片

效果：

代码：

<div class="customCard">
<div class="customCon">
<img src="/imgs/1654933266216.png" alt="" srcset="" class="customConLeft">
<div class="customConRight">
<div class="content">重点监管工艺数量</div>
<div class="title">{{data[0][0]}}

</div>
</div>
</div>
</div>