Skip to content

B
bi
Commit 16c4b648 authored by 莫坚培's avatar 莫坚培
Browse files
Options

fix: 增加token配置

parent 54ff996f
Hide whitespace changes
Inline Side-by-side
Showing with 1104 additions and 725 deletions
dashboard.html
View file @ 16c4b648
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <title>看板列表</title>
<title>看板列表</title> <script src="./js/tokenSetting.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2431045_hbwl3x53oep.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_2431045_hbwl3x53oep.css" />
<link rel="stylesheet" href="./styles/date.css"> <link rel="stylesheet" href="./styles/date.css" />
<link rel="stylesheet" href="./layui/css/layui.css"> <link rel="stylesheet" href="./layui/css/layui.css" />
<link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css"> <link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" href="./styles/iconfont/iconfont.css"> <link rel="stylesheet" href="./styles/iconfont/iconfont.css" />
<link rel="stylesheet" href="./styles/common.css"> <link rel="stylesheet" href="./styles/common.css" />
<link rel="stylesheet" href="./styles/popup.css"> <link rel="stylesheet" href="./styles/popup.css" />
<link rel="stylesheet" href="./styles/index.css" type="text/css"> <link rel="stylesheet" href="./styles/index.css" type="text/css" />
<link rel="stylesheet" href="./styles/dashboard.css"> <link rel="stylesheet" href="./styles/dashboard.css" />
</head>
</head>
<body>
<body> <div class="dashboard">
<div class="dashboard"> <div class="d-left" id="d-left">
<div class="d-left" id="d-left"> <div
class="d-left-fold"
<div class="d-left-fold" id="d-left-fold" onclick="toggleRight(event)" onmouseover="hoverRightImg(event)" onmouseleave="recoverRightImg(event)" > id="d-left-fold"
<img src="./imgs/icon_close_nor.png" alt=""> onclick="toggleRight(event)"
</div> onmouseover="hoverRightImg(event)"
<div class="d-left-conent" id="d-left-conent"> onmouseleave="recoverRightImg(event)"
<div id="d-left-wrap-search" class="d-left-wrap-search"> >
<input type="text" class="bi-input" autocomplete="off" style="margin-right: 10px" placeholder="请输入分组名称、看板名称"></input> <img src="./imgs/icon_close_nor.png" alt="" />
<button class="bi-btn btn-primary" onclick="searchBoardTree(event)">搜 索</button> </div>
</div> <div class="d-left-conent" id="d-left-conent">
<div class="r-tree"> <div id="d-left-wrap-search" class="d-left-wrap-search">
<ul id="dashboardtree" class="ztree"></ul> <input
type="text"
class="bi-input"
autocomplete="off"
style="margin-right: 10px"
placeholder="请输入分组名称、看板名称"
/>
<button class="bi-btn btn-primary" onclick="searchBoardTree(event)">搜 索</button>
</div>
<div class="r-tree">
<ul id="dashboardtree" class="ztree"></ul>
</div>
</div>
</div>
<div class="d-right" onmousewheel="wheelZoom(event)">
<div class="right-wrap" id="right-wrap" onclick="clickBlank(event)">
<!-- 预览元素 -->
</div>
<div class="d-zoom">
<input
type="text"
autocomplete="off"
id="zoom-input"
value="100%"
onfocus="focusZoom(event)"
onblur="blurZoom(event)"
/>
</div>
</div>
</div> </div>
</div>
</div>
<div class="d-right" onmousewheel="wheelZoom(event)">
<div class="right-wrap" id="right-wrap" onclick="clickBlank(event)">
<!-- 预览元素 -->
</div>
<div class="d-zoom" > <!-- 弹窗部分 -->
<input type="text" autocomplete="off" id="zoom-input" value="100%" onfocus="focusZoom(event)" onblur="blurZoom(event)" /> <div class="popup" id="popup">
</div> <div class="popup-wrap">
<div class="popup-head">
</div> <span>趋势曲线</span>
</div> <i class="iconfont iconguanbi1 popup-close" onclick="dblClose(event)"></i>
</div>
<div class="popup-body">
<!-- 弹窗部分 --> <div class="popup-search">
<div class="popup" id="popup"> <!-- <div>
<div class="popup-wrap">
<div class="popup-head">
<span>趋势曲线</span>
<i class="iconfont iconguanbi1 popup-close" onclick="dblClose(event)"></i>
</div>
<div class="popup-body">
<div class="popup-search">
<!-- <div>
<div class="pop-select-wrap"> <div class="pop-select-wrap">
<div class="layui-input-inline divmagin"> <div class="layui-input-inline divmagin">
<i class="icon iconfont iconriqixuanze"></i> <i class="icon iconfont iconriqixuanze"></i>
...@@ -68,285 +83,284 @@ ...@@ -68,285 +83,284 @@
</div> </div>
</div> --> </div> -->
<div class="r-date-group popup-search-picker"> <div class="r-date-group popup-search-picker">
<div class="bi-datePicker date-wrap"> <div class="bi-datePicker date-wrap">
<input type="text" name="startTime" id="searchStartPicker" class="startPicker" autocomplete="off" <input
placeholder="请选择"> type="text"
</div> name="startTime"
<div class="bi-datePicker date-wrap"> id="searchStartPicker"
<input type="text" name="endTime" id="searchEndPicker" class="endPicker" autocomplete="off" class="startPicker"
placeholder="请选择"> autocomplete="off"
placeholder="请选择"
/>
</div>
<div class="bi-datePicker date-wrap">
<input
type="text"
name="endTime"
id="searchEndPicker"
class="endPicker"
autocomplete="off"
placeholder="请选择"
/>
</div>
</div>
<div>
<button
type="button"
class="popup-btn popup-confirm"
style="margin-right: 10px"
onclick="searchvarible()"
>
搜索
</button>
<button
type="button"
class="popup-btn popup-isplain"
style="margin-right: 10px"
onclick="changePop(event)"
>
切换数据表
</button>
</div>
</div>
<!-- 图表展示部分 -->
<div class="data-chart" id="data-chart"></div>
<!-- 表格部分 -->
<div class="popup-table data-table" id="data-table">
<!-- 表格 -->
<div>
<div class="bi-table">
<div class="bi-table-header-wrap">
<table cellspacing="0" cellpadding="0" border="0" class="bi-table__header">
<thead>
<tr>
<th rowspan="1" colspan="1" class="table-checkbox">序号</th>
<th rowspan="1" colspan="1" style="text-align: center">时间</th>
<th rowspan="1" colspan="1" style="text-align: center">数值</th>
</tr>
</thead>
</table>
</div>
<div class="bi-table-body-wrap">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
<tbody id="popup-tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
<div>
<button type="button" class="popup-btn popup-confirm" style="margin-right: 10px"
onclick="searchvarible()">搜索</button>
<button type="button" class="popup-btn popup-isplain" style="margin-right: 10px"
onclick="changePop(event)">切换数据表</button>
</div>
</div>
<!-- 图表展示部分 -->
<div class="data-chart" id="data-chart">
</div> </div>
<!-- 表格部分 --> </body>
<div class="popup-table data-table" id="data-table">
<!-- 表格 --> <script src="./js/jquery-1.10.2.min.js"></script>
<div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="bi-table"> <script src="./utils/request_browserify.js"></script>
<div class="bi-table-header-wrap"> <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0" class="bi-table__header"> <script src="./js/moment.js"></script>
<thead> <!-- -->
<tr> <script type="text/javascript" src="./js/dropdown.js"></script>
<th rowspan="1" colspan="1" class="table-checkbox">序号</th> <script src="./js/echarts.js"></script>
<th rowspan="1" colspan="1" style="text-align: center;"> <script src="./js/ecStat.js"></script>
时间 <script src="./js/jquery-1.10.2.min.js"></script>
</th> <script src="./饼图/饼图Echarts.js"></script>
<th rowspan="1" colspan="1" style="text-align: center;"> <script src="./仪表盘/仪表盘Echarts.js"></script>
数值 <script src="./柱形图/柱形图Echarts.js"></script>
</th> <script src="./折线图/折线图Echarts.js"></script>
</tr> <!-- 此处引入日期时间组件 -->
</thead> <script src="./js/jquery-datePicker.min.js"></script>
</table> <script src="./js/num.js"></script>
</div> <script type="text/javascript" src="./layui//layui.all.js"></script>
<div class="bi-table-body-wrap">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body"> <script type="text/javascript" src="./js/echartsJson.js"></script>
<tbody id="popup-tbody"> <!-- 引入树组件 -->
<script type="text/javascript" src="./zTree_v3/js/jquery.ztree.all.min.js"></script>
</tbody> <script src="./js/dashboard.js"></script>
</table> <script>
</div> function clickBlank(e) {
</div> if (e.target.id === 'right-wrap') {
</div> let items = document.querySelectorAll('#right-wrap ul')
</div> let icons = document.querySelectorAll('.input-suffix-inner i')
</div> items.forEach(item => {
</div> item.style.display = 'none'
</div> })
</body> icons.forEach(item => {
item.classList.remove('is-reverse')
<script src="./js/jquery-1.10.2.min.js"></script> })
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./utils/request_browserify.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="./js/moment.js"></script>
<!-- -->
<script type="text/javascript" src="./js/dropdown.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/ecStat.js"></script>
<script src="./js/jquery-1.10.2.min.js"></script>
<script src="./饼图/饼图Echarts.js"></script>
<script src="./仪表盘/仪表盘Echarts.js"></script>
<script src="./柱形图/柱形图Echarts.js"></script>
<script src="./折线图/折线图Echarts.js"></script>
<!-- 此处引入日期时间组件 -->
<script src="./js/jquery-datePicker.min.js"></script>
<script src="./js/num.js"></script>
<script type="text/javascript" src="./layui//layui.all.js"></script>
<script type="text/javascript" src="./js/echartsJson.js"></script>
<!-- 引入树组件 -->
<script type="text/javascript" src="./zTree_v3/js/jquery.ztree.all.min.js"></script>
<script src="./js/dashboard.js"></script>
<script>
function clickBlank(e) {
if (e.target.id === 'right-wrap') {
let items = document.querySelectorAll('#right-wrap ul')
let icons = document.querySelectorAll('.input-suffix-inner i')
items.forEach(item => {
item.style.display = 'none'
})
icons.forEach(item => {
item.classList.remove('is-reverse')
})
}
}
// 获取树信息
function getDashboardTree() {
// let appid = getUrlParam('appId')
// if (appid && appid != '') {
// appId = appid
// token = getUrlParam('token')
// }
request.get(`/bi/${appId}/panel-tree`).then(res => {
if (res.data.data) {
boardData = res.data.data
boardData.forEach((item, index) => {
if (item.nodeType != 'panel') {
item.icon = "./styles/iconTool/icon_file.png"
} else {
item.icon = "./styles/iconTool/icon_monitor_nor.png"
}
})
$.fn.zTree.init($("#dashboardtree"), boardSetting, boardData);
let zTree = $.fn.zTree.getZTreeObj("dashboardtree");
let node1 = zTree.getNodes()[0];
zTree.expandAll(true)
let node2 = ''
if (node1.children) {
let children = node1.children
for (let i = 0; i < children.length; i++) {
if (children[i].nodeType == 'panel') {
node2 = children[i]
break
} }
}
} // 获取树信息
function getDashboardTree() {
if (node2 != "") { request.get(`/bi/${appId}/panel-tree`).then(res => {
zTree.selectNode(node2); if (res.data.data) {
nodeCLick('', '', node2) boardData = res.data.data
} boardData.forEach((item, index) => {
if (item.nodeType != 'panel') {
item.icon = './styles/iconTool/icon_file.png'
} else {
item.icon = './styles/iconTool/icon_monitor_nor.png'
}
})
$.fn.zTree.init($('#dashboardtree'), boardSetting, boardData)
let zTree = $.fn.zTree.getZTreeObj('dashboardtree')
let node1 = zTree.getNodes()[0]
zTree.expandAll(true)
let node2 = ''
if (node1.children) {
let children = node1.children
for (let i = 0; i < children.length; i++) {
if (children[i].nodeType == 'panel') {
node2 = children[i]
break
}
}
if (node2 != '') {
zTree.selectNode(node2)
nodeCLick('', '', node2)
}
}
let id = getParams('panelId', window.location.href)
if (id) {
let postData = {
appId,
panelId: id
}
let node3 = zTree.getNodeByParam('id', id)
zTree.selectNode(node3)
request
.get(`/bi/${appId}/panel-tree/children-panel`, {
params: postData
})
.then(res => {
if (res.data.code !== 0) {
app.msg(res.data.msg)
return
}
if (res.data.data.configDetails) {
Controls = JSON.parse(res.data.data.configDetails)
} else {
$('#right-wrap').empty()
app.msg('无数据')
return
}
Controls = JSON.parse(res.data.data.configDetails)
Common = {
Name: Controls.Name,
Position: Controls.Position,
BackSetting: Controls.BackSetting,
BackColor: Controls.BackColor,
BackImg: Controls.BackImg,
Permision: Controls.Permision,
Description: Controls.Description
}
initCanvas()
})
}
}
})
}
function getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg) //匹配目标参数
if (r != null) return unescape(r[2])
return null //返回参数值
} }
let id = getParams('panelId', window.location.href) function searchBoardTree(e) {
if (id) { let postData = {
let postData = { appId,
appId, name: e.target.parentElement.firstElementChild.value
panelId: id,
}
let node3 = zTree.getNodeByParam('id',id)
zTree.selectNode(node3);
request.get(`/bi/${appId}/panel-tree/children-panel`, {
params: postData
}).then(res => {
if (res.data.code !== 0) {
app.msg(res.data.msg)
return
} }
request.get(`/bi/${appId}/panel-tree/search`, { params: postData }).then(res => {
if (res.data.data) {
boardData = res.data.data
boardData.forEach((item, index) => {
if (item.nodeType != 'panel') {
item.icon = './styles/iconTool/icon_file.png'
} else {
item.icon = './styles/iconTool/icon_monitor_nor.png'
}
})
$.fn.zTree.init($('#dashboardtree'), boardSetting, boardData)
var zTree = $.fn.zTree.getZTreeObj('dashboardtree')
zTree.expandAll(true)
}
// $.fn.zTree.init($("#dashboardtree"), boardSetting, boardData);
})
}
function searchJumpTree(e) {
let postData = {
appId,
name: e.target.parentElement.firstElementChild.value
}
request.get(`/bi/${appId}/panel-tree/search`, { params: postData }).then(res => {
boardData = res.data.data
$.fn.zTree.init($('#dashboardtree'), boardSetting, boardData)
})
}
if (res.data.data.configDetails) { function hoverRightImg(e) {
Controls = JSON.parse(res.data.data.configDetails) let img = document.querySelector('#d-left-fold img')
if (index % 2 === 0) {
img.src = './imgs/icon_close_pre.png'
} else { } else {
$("#right-wrap").empty() img.src = './imgs/icon_open_pre.png'
app.msg('无数据')
return
}
Controls = JSON.parse(res.data.data.configDetails)
Common = {
Name: Controls.Name,
Position: Controls.Position,
BackSetting: Controls.BackSetting,
BackColor: Controls.BackColor,
BackImg: Controls.BackImg,
Permision: Controls.Permision,
Description: Controls.Description
} }
initCanvas()
})
} }
}
}) function recoverRightImg(e) {
} let img = document.querySelector('#d-left-fold img')
if (index % 2 === 0) {
function getUrlParam(name) { img.src = './imgs/icon_close_nor.png'
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 } else {
var r = window.location.search.substr(1).match(reg); //匹配目标参数 img.src = './imgs/icon_open_nor.png'
if (r != null) return unescape(r[2]); return null; //返回参数值 }
} }
function searchBoardTree(e) { function toggleRight(e) {
let postData = { let left = document.getElementById('d-left')
appId, let fold = document.getElementById('d-left-fold')
name: e.target.parentElement.firstElementChild.value let img = document.querySelector('#d-left-fold img')
} let conent = document.getElementById('d-left-conent')
request.get(`/bi/${appId}/panel-tree/search`, { params: postData }).then(res => { if (index % 2 === 0) {
if (res.data.data) { // fold.style.transform = "rotate(180deg)"
boardData = res.data.data img.src = './imgs/icon_close_nor.png'
boardData.forEach((item, index) => { fold.style.left = '0px'
if (item.nodeType != 'panel') { left.style.width = 0
item.icon = "./styles/iconTool/icon_file.png" left.style.minWidth = 0
left.style.marginLeft = '-50px'
left.style.background = ' rgba(0, 0, 0, 0)'
// if()
conent.style.display = 'none'
// fold.style.display = 'none'
index++
} else {
// fold.style.transform = "rotate(0deg)"
img.src = './imgs/icon_open_nor.png'
fold.style.left = '320px'
left.style.width = '320px'
left.style.minWidth = '320px'
left.style.marginLeft = '0px'
conent.style.display = 'block'
left.style.background = '#fff'
index++
}
}
} else { $(document).ready(function () {
item.icon = "./styles/iconTool/icon_monitor_nor.png" // var Controls = {}
}
getDashboardTree()
}) })
$.fn.zTree.init($("#dashboardtree"), boardSetting, boardData); </script>
var zTree = $.fn.zTree.getZTreeObj("dashboardtree"); </html>
zTree.expandAll(true)
}
// $.fn.zTree.init($("#dashboardtree"), boardSetting, boardData);
})
}
function searchJumpTree(e) {
let postData = {
appId,
name: e.target.parentElement.firstElementChild.value
}
request.get(`/bi/${appId}/panel-tree/search`, { params: postData }).then(res => {
boardData = res.data.data
$.fn.zTree.init($("#dashboardtree"), boardSetting, boardData);
})
}
function hoverRightImg(e) {
let img = document.querySelector('#d-left-fold img')
if (index % 2 === 0) {
img.src = "./imgs/icon_close_pre.png"
} else {
img.src = "./imgs/icon_open_pre.png"
}
}
function recoverRightImg(e) {
let img = document.querySelector('#d-left-fold img')
if (index % 2 === 0) {
img.src = "./imgs/icon_close_nor.png"
} else {
img.src = "./imgs/icon_open_nor.png"
}
}
function toggleRight(e) {
let left = document.getElementById('d-left')
let fold = document.getElementById('d-left-fold')
let img = document.querySelector('#d-left-fold img')
let conent = document.getElementById('d-left-conent')
if (index % 2 === 0) {
// fold.style.transform = "rotate(180deg)"
img.src = "./imgs/icon_close_nor.png"
fold.style.left = '0px'
left.style.width = 0
left.style.minWidth = 0
left.style.marginLeft = '-50px'
left.style.background = ' rgba(0, 0, 0, 0)'
// if()
conent.style.display = 'none'
// fold.style.display = 'none'
index++
} else {
// fold.style.transform = "rotate(0deg)"
img.src = "./imgs/icon_open_nor.png"
fold.style.left = '320px'
left.style.width = '320px'
left.style.minWidth = '320px'
left.style.marginLeft = '0px'
conent.style.display = 'block'
left.style.background = '#fff'
index++
}
}
$(document).ready(function () {
// var Controls = {}
getDashboardTree()
})
</script>
</html>
\ No newline at end of file
dashboard/index.html
View file @ 16c4b648
...@@ -6,23 +6,13 @@ ...@@ -6,23 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<title>仪表盘配置</title> <title>仪表盘配置</title>
<script src="../js/tokenSetting.js"></script>
<link rel="stylesheet" href="./global.css" /> <link rel="stylesheet" href="./global.css" />
<link rel="stylesheet" href="./libs/layui/css/layui.css" /> <link rel="stylesheet" href="./libs/layui/css/layui.css" />
<link rel="stylesheet" href="./styles/iconfont/iconfont.css" /> <link rel="stylesheet" href="./styles/iconfont/iconfont.css" />
<link rel="stylesheet" href="./libs/zTree_v3/css/zTreeStyle/zTreeStyle.css" /> <link rel="stylesheet" href="./libs/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" href="./pagination.css" /> <link rel="stylesheet" href="./pagination.css" />
<link rel="stylesheet" href="./index.css" /> <link rel="stylesheet" href="./index.css" />
<style type="text/css">
/* @media screen and (max-width: 1100px) {
.z-contentBoxRight-table {
height: calc(100% - 220px);
width: 100%;
}
} */
</style>
</head> </head>
<body> <body>
......
dashboard/js/index.js
View file @ 16c4b648
...@@ -903,8 +903,7 @@ async function getToken() { ...@@ -903,8 +903,7 @@ async function getToken() {
password: 123456, password: 123456,
} }
// 获取url值 // 获取url值
let token = getParams('token', window.location.href) let token = getParams('token', window.location.href) || window.devToken
token = token ? token : 'cca20c8c-507b-43e0-8ca6-3571ae779698'
// 设置token,可删除 // 设置token,可删除
localStorage.setItem("token", token) localStorage.setItem("token", token)
appId = getParams('appId', window.location.href) appId = getParams('appId', window.location.href)
......
index.html
View file @ 16c4b648
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<title>BI系统</title> <title>BI系统</title>
<script src="./js/watcher.js"></script> <script src="./js/watcher.js"></script>
<script src="./js/domainSetting.js"></script> <script src="./js/domainSetting.js"></script>
<script src="./js/tokenSetting.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2431045_hbwl3x53oep.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_2431045_hbwl3x53oep.css">
<link rel="stylesheet" href="./styles/date.css"> <link rel="stylesheet" href="./styles/date.css">
<link rel="stylesheet" href="./layui/css/layui.css"> <link rel="stylesheet" href="./layui/css/layui.css">
......
js/dashboard.js
View file @ 16c4b648
...@@ -11,9 +11,7 @@ appId = getParams('appId', window.location.href) ...@@ -11,9 +11,7 @@ appId = getParams('appId', window.location.href)
// 测试 appId：APPDJLB_e39O token bff914c01c484e25b403b0bdbb7dfc22 // 测试 appId：APPDJLB_e39O token bff914c01c484e25b403b0bdbb7dfc22
appId = appId ? appId : 'TEST123_o582' appId = appId ? appId : 'TEST123_o582'
var token = '' var token = getParams('token', window.location.href) || window.devToken
token = getParams('token', window.location.href)
token = token ? token : 'cca20c8c-507b-43e0-8ca6-3571ae779698'
localStorage.setItem("token", token) localStorage.setItem("token", token)
var zoomValue = 100 var zoomValue = 100
var getHistory = {} var getHistory = {}
......
js/data.js
View file @ 16c4b648
...@@ -20,9 +20,7 @@ function goToBi(event) { ...@@ -20,9 +20,7 @@ function goToBi(event) {
appId = appId ? appId : 'TEST123_o582' appId = appId ? appId : 'TEST123_o582'
// 颜色选择器的个数 // 颜色选择器的个数
// var colordiv // var colordiv
var token = '' var token = getParams('token', window.location.href) || window.devToken
token = getParams('token', window.location.href)
token = token ? token : 'cca20c8c-507b-43e0-8ca6-3571ae779698'
localStorage.setItem("token", token) localStorage.setItem("token", token)
var tenantId = '' var tenantId = ''
......
js/domainSetting.js
View file @ 16c4b648
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @description: 设置domain * @description: 设置domain
* @Date: 2021-09-02 15:36:23 * @Date: 2021-09-02 15:36:23
* @LastEditors: 莫靓仔 * @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-02 16:37:03 * @LastEditTime: 2021-09-16 18:44:31
*/ */
if (window.location.host.indexOf('shengyc.com') > -1) { if (window.location.host.indexOf('shengyc.com') > -1) {
document.domain = 'shengyc.com' document.domain = 'shengyc.com'
......
js/tokenSetting.js 0 → 100644
View file @ 16c4b648
/*
* @Author: 莫靓仔
* @description: 文件描述
* @Date: 2021-09-16 18:33:55
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-16 18:33:55
*/
window.devToken = 'cca20c8c-507b-43e0-8ca6-3571ae779698'
\ No newline at end of file
preview.html
View file @ 16c4b648
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>预览</title> <title>预览</title>
<link rel="stylesheet" href="./styles/index.css" type="text/css"> <script src="./js/tokenSetting.js"></script>
<link rel="stylesheet" href="./styles/common.css" type="text/css"> <link rel="stylesheet" href="./styles/index.css" type="text/css" />
<link rel="stylesheet" href="./styles/preview.css" type="text/css"> <link rel="stylesheet" href="./styles/common.css" type="text/css" />
<link rel="stylesheet" href="./styles/iconfont/iconfont.css"> <link rel="stylesheet" href="./styles/preview.css" type="text/css" />
<style type="text/css"> <link rel="stylesheet" href="./styles/iconfont/iconfont.css" />
/* .preview-page input{ </head>
padding:0 15px; <body>
} */ <div class="preview-page">
<div class="page-title">
</style> 预览看板
<div
</head> onclick="olclick()"
<body> style="
<div class="preview-page"> background: #f5f8fb;
<div class="page-title"> border: 1px solid #e4e8ed;
预览看板 display: inline-block;
<div onclick='olclick()' style="background:#F5F8FB;border:1px solid #E4E8ED;display:inline-block;width: 75px;height: 25px;line-height:23px;cursor:pointer;position:relative;text-align: center;"> width: 75px;
<span class='viewpass'>100%</span> height: 25px;
<ol class='select-pass'> line-height: 23px;
<!-- <li name='100%' class='selected' onclick='olloclick(this,event)'>100%</li> cursor: pointer;
position: relative;
text-align: center;
"
>
<span class="viewpass">100%</span>
<ol class="select-pass">
<!-- <li name='100%' class='selected' onclick='olloclick(this,event)'>100%</li>
<li name= '75%' onclick='olloclick(this,event)'>75%</li> <li name= '75%' onclick='olloclick(this,event)'>75%</li>
<li name = '50%' onclick='olloclick(this,event)'>50%</li> <li name = '50%' onclick='olloclick(this,event)'>50%</li>
<li name = '25%' onclick='olloclick(this,event)'>25%</li> --> <li name = '25%' onclick='olloclick(this,event)'>25%</li> -->
<li name ='200%' onclick='olloclick(this,event)'>200%</li> <li name="200%" onclick="olloclick(this,event)">200%</li>
<li name ='175%' onclick='olloclick(this,event)'>175%</li> <li name="175%" onclick="olloclick(this,event)">175%</li>
<li name ='150%' onclick='olloclick(this,event)'>150%</li> <li name="150%" onclick="olloclick(this,event)">150%</li>
<li name ='125%' onclick='olloclick(this,event)'>125%</li> <li name="125%" onclick="olloclick(this,event)">125%</li>
<li name ='100%' onclick='olloclick(this,event)'>100%</li> <li name="100%" onclick="olloclick(this,event)">100%</li>
<li name = '75%' onclick='olloclick(this,event)'>75%</li> <li name="75%" onclick="olloclick(this,event)">75%</li>
<li name = '50%' onclick='olloclick(this,event)'>50%</li> <li name="50%" onclick="olloclick(this,event)">50%</li>
<li name = '25%' onclick='olloclick(this,event)'>25%</li> <li name="25%" onclick="olloclick(this,event)">25%</li>
<li name = '10%' onclick='olloclick(this,event)'>10%</li> <li name="10%" onclick="olloclick(this,event)">10%</li>
</ol> </ol>
</div> </div>
<button onclick="javascript:history.back(-1);">编辑看板</button> <button onclick="javascript:history.back(-1);">编辑看板</button>
</div> </div>
<div class="preview-canvas" > <div class="preview-canvas">
<div class="page-wrap" id="page-wrap" > <div class="page-wrap" id="page-wrap">
<!-- 预览元素 --> <!-- 预览元素 -->
</div>
</div>
</div> </div>
</div> </body>
</div>
</body>
</html> </html>
<script type="text/javascript" src="./js/dropdown.js"></script> <script type="text/javascript" src="./js/dropdown.js"></script>
...@@ -61,369 +68,698 @@ ...@@ -61,369 +68,698 @@
<script type="text/javascript" src="./js/echartsJson.js"></script> <script type="text/javascript" src="./js/echartsJson.js"></script>
<script> <script>
var Controls = JSON.parse(localStorage.Controls) var Controls = JSON.parse(localStorage.Controls)
let Common = JSON.parse(localStorage.CommonCanvas) let Common = JSON.parse(localStorage.CommonCanvas)
let password = JSON.parse(localStorage.percentage) let password = JSON.parse(localStorage.percentage)
var viewpass = [1] var viewpass = [1]
window.addEventListener("load", initCanvas, false); window.addEventListener('load', initCanvas, false)
olloclick = function (a, event) { olloclick = function (a, event) {
$('#coverol').hide() $('#coverol').hide()
$(a).siblings('li').removeClass('selected') $(a).siblings('li').removeClass('selected')
$(a).attr('class', 'selected') $(a).attr('class', 'selected')
$('.viewpass')[0].innerText = $(a).attr('name') $('.viewpass')[0].innerText = $(a).attr('name')
viewpass.push((parseInt($(a).attr('name')) / 100)) viewpass.push(parseInt($(a).attr('name')) / 100)
if (viewpass.length > 2) { if (viewpass.length > 2) {
viewpass.shift() viewpass.shift()
} }
Common.WrapWidth = $(a).attr('name') Common.WrapWidth = $(a).attr('name')
Controls.WrapWidth = $(a).attr('name') Controls.WrapWidth = $(a).attr('name')
// Controls.ControlList.forEach((item) => { // Controls.ControlList.forEach((item) => {
// item.PropertyList.Width = item.PropertyList.Width * (parseInt($(a).attr('name')) / 100) // item.PropertyList.Width = item.PropertyList.Width * (parseInt($(a).attr('name')) / 100)
// item.PropertyList.Height = item.PropertyList.Height * (parseInt($(a).attr('name')) / 100) // item.PropertyList.Height = item.PropertyList.Height * (parseInt($(a).attr('name')) / 100)
// }) // })
$('#page-wrap').empty() $('#page-wrap').empty()
initCanvas('init') initCanvas('init')
setTimeout(()=>{ setTimeout(() => {
PieChartDataFun() PieChartDataFun()
DashChartDataFun() DashChartDataFun()
BarChartDataFun() BarChartDataFun()
LineChartDataFun() LineChartDataFun()
},20) }, 20)
localStorage.setItem("Controls", JSON.stringify(Controls)) localStorage.setItem('Controls', JSON.stringify(Controls))
localStorage.setItem("CommonCanvas", JSON.stringify(Common)) localStorage.setItem('CommonCanvas', JSON.stringify(Common))
}
} olclick = function () {
olclick = function () { $('#coverol').toggle()
$('#coverol').toggle() $('.select-pass').toggle()
$('.select-pass').toggle()
// if (viewpass.length > 1) { // if (viewpass.length > 1) {
// Controls.ControlList.forEach((item) => { // Controls.ControlList.forEach((item) => {
// item.PropertyList.Width = item.PropertyList.Width / (parseFloat(viewpass[viewpass.length - 1])) // item.PropertyList.Width = item.PropertyList.Width / (parseFloat(viewpass[viewpass.length - 1]))
// item.PropertyList.Height = item.PropertyList.Height / (parseFloat(viewpass[viewpass.length - 1])) // item.PropertyList.Height = item.PropertyList.Height / (parseFloat(viewpass[viewpass.length - 1]))
// }) // })
// viewpass.shift() // viewpass.shift()
// } // }
localStorage.setItem("percentage", JSON.stringify($('.viewpass').text())) localStorage.setItem('percentage', JSON.stringify($('.viewpass').text()))
Common.WrapWidth = $('.viewpass').text() Common.WrapWidth = $('.viewpass').text()
// $(wrap).css({ // $(wrap).css({
// width: Common.WrapWidth, // width: Common.WrapWidth,
// height: Common.WrapWidth // height: Common.WrapWidth
// }) // })
if (parseInt(Common.WrapWidth) >= 100) { if (parseInt(Common.WrapWidth) >= 100) {
$('#page-wrap').css({ $('#page-wrap').css({
'transform-origin': '0% 0%', 'transform-origin': '0% 0%',
'transform': `scale(${parseInt(Common.WrapWidth) * 0.01})` transform: `scale(${parseInt(Common.WrapWidth) * 0.01})`
}) })
} else { } else {
$('#page-wrap').css({ $('#page-wrap').css({
'transform-origin': 'unset', 'transform-origin': 'unset',
'transform': `scale(${parseInt(Common.WrapWidth) * 0.01})` transform: `scale(${parseInt(Common.WrapWidth) * 0.01})`
}) })
} }
}
function initCanvas (a) {
if (!Controls.ControlList) {
return
} }
function initCanvas(a) {
let html = '' if (!Controls.ControlList) {
let wrap = document.getElementById('page-wrap') return
Controls.ControlList.forEach((item, index) => { }
index = item.PropertyList.ZIndex
if (item.ControlType === 'solidrectangle') { //矩形样式 let html = ''
html += `<div class="commonModule" draggable="false" data-id="${index}" let wrap = document.getElementById('page-wrap')
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;transform: rotate(${item.PropertyList.Rotate}deg); Controls.ControlList.forEach((item, index) => {
border-style: ${item.PropertyList.Style}; border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px;border-radius: ${item.PropertyList.BorderRadius}px; index = item.PropertyList.ZIndex
${item.PropertyList.BackSetting !== 'img' ? `background-color: ${item.PropertyList.BackColor}`: '' };box-shadow: ${item.PropertyList.BoxShadow}; height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex}; if (item.ControlType === 'solidrectangle') {
//矩形样式
html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;transform: rotate(${item.PropertyList.Rotate}deg);
border-style: ${item.PropertyList.Style}; border-color: ${item.PropertyList.BorderColor}; border-width: ${
item.PropertyList.BorderWidth
}px;border-radius: ${item.PropertyList.BorderRadius}px;
${
item.PropertyList.BackSetting !== 'img' ? `background-color: ${item.PropertyList.BackColor}` : ''
};box-shadow: ${item.PropertyList.BoxShadow}; height: ${item.PropertyList.Height}px;z-index: ${
item.PropertyList.ZIndex
};
opacity: ${Number(item.PropertyList.Opacity) / 100};"> opacity: ${Number(item.PropertyList.Opacity) / 100};">
<div class="moduleShape" style="${item.PropertyList.BackSetting === 'img' ? `background-image:url(${item.PropertyList.BackImg});background-size:100% 100%;background-repeat: no-repeat;`: '' }"></div> <div class="moduleShape" style="${
item.PropertyList.BackSetting === 'img'
? `background-image:url(${item.PropertyList.BackImg});background-size:100% 100%;background-repeat: no-repeat;`
: ''
}"></div>
</div>` </div>`
} else if (item.ControlType === 'titleCom') { // 标题样式 } else if (item.ControlType === 'titleCom') {
html += `<div class="commonModule" draggable="false" data-id="${index}" // 标题样式
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;transform: rotate(${item.PropertyList.Rotate}deg); html += `<div class="commonModule" draggable="false" data-id="${index}"
border-style: ${item.PropertyList.Style}; border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px;border-radius: ${item.PropertyList.BorderRadius}px; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
${item.PropertyList.BackSetting !== 'img' ? `background-color: ${item.PropertyList.BackColor}`: '' };box-shadow: ${item.PropertyList.BoxShadow}; height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex}; item.PropertyList.Width
}px;transform: rotate(${item.PropertyList.Rotate}deg);
border-style: ${item.PropertyList.Style}; border-color: ${item.PropertyList.BorderColor}; border-width: ${
item.PropertyList.BorderWidth
}px;border-radius: ${item.PropertyList.BorderRadius}px;
${
item.PropertyList.BackSetting !== 'img' ? `background-color: ${item.PropertyList.BackColor}` : ''
};box-shadow: ${item.PropertyList.BoxShadow}; height: ${item.PropertyList.Height}px;z-index: ${
item.PropertyList.ZIndex
};
opacity: ${Number(item.PropertyList.Opacity) / 100};"> opacity: ${Number(item.PropertyList.Opacity) / 100};">
<div class="moduleShape" style="${item.PropertyList.BackSetting === 'img' ? `background-image:url(${item.PropertyList.BackImg});background-size:100% 100%;background-repeat: no-repeat;`: '' }"></div> <div class="moduleShape" style="${
item.PropertyList.BackSetting === 'img'
? `background-image:url(${item.PropertyList.BackImg});background-size:100% 100%;background-repeat: no-repeat;`
: ''
}"></div>
</div> </div>
` `
} else if (item.ControlType === 'line') { //直线样式 } else if (item.ControlType === 'line') {
html += `<div class="commonModule" draggable="false" data-id="${index}" //直线样式
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px; z-index: ${item.PropertyList.ZIndex}; html += `<div class="commonModule" draggable="false" data-id="${index}"
border-top-style: ${item.PropertyList.Style}; border-top-color: ${item.PropertyList.BorderColor}; border-top-width: ${item.PropertyList.BorderWidth}px; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px; z-index: ${item.PropertyList.ZIndex};
border-top-style: ${item.PropertyList.Style}; border-top-color: ${
item.PropertyList.BorderColor
}; border-top-width: ${item.PropertyList.BorderWidth}px;
opacity: ${Number(item.PropertyList.Opacity) / 100};"> opacity: ${Number(item.PropertyList.Opacity) / 100};">
<div class="moduleShape"> <div class="moduleShape">
</div> </div>
</div> </div>
` `
} else if (item.ControlType === 'staticimage' || item.ControlType === 'image') { //静态图片和动态图片 } else if (item.ControlType === 'staticimage' || item.ControlType === 'image') {
html += `<div class="commonModule" draggable="false" data-id="${index}" //静态图片和动态图片
style="transform: rotate(${item.PropertyList.Rotate}deg);left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px; html += `<div class="commonModule" draggable="false" data-id="${index}"
height: ${item.PropertyList.Height}px; border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px; style="transform: rotate(${item.PropertyList.Rotate}deg);left: ${item.PropertyList.Left}px;top: ${
z-index: ${item.PropertyList.ZIndex};border-radius: ${item.PropertyList.BorderRadius}px;opacity: ${Number(item.PropertyList.Opacity) / 100};"> item.PropertyList.Top
}px; width: ${item.PropertyList.Width}px;
height: ${item.PropertyList.Height}px; border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
}; border-width: ${item.PropertyList.BorderWidth}px;
z-index: ${item.PropertyList.ZIndex};border-radius: ${item.PropertyList.BorderRadius}px;opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div class="img-div" style="box-shadow: ${item.PropertyList.BoxShadow};" > <div class="img-div" style="box-shadow: ${item.PropertyList.BoxShadow};" >
<img class="moduleShape" src="${item.PropertyList.Img}" style="position: relative; vertical-align: top; z-index: ${item.PropertyList.ZIndex - 1 };border-radius: ${item.PropertyList.BorderRadius}px;" alt="图片" /> <img class="moduleShape" src="${
item.PropertyList.Img
}" style="position: relative; vertical-align: top; z-index: ${
item.PropertyList.ZIndex - 1
};border-radius: ${item.PropertyList.BorderRadius}px;" alt="图片" />
</div> </div>
</div> </div>
` `
} else if (item.ControlType === 'datatextblock') { //数值显示 } else if (item.ControlType === 'datatextblock') {
let align = '' //数值显示
if (item.PropertyList.JustifyContent === 'flex-start') { let align = ''
align = 'left' if (item.PropertyList.JustifyContent === 'flex-start') {
} else if (item.PropertyList.JustifyContent === 'center') { align = 'left'
align = 'center' } else if (item.PropertyList.JustifyContent === 'center') {
} else if (item.PropertyList.JustifyContent === 'flex-end') { align = 'center'
align = 'right' } else if (item.PropertyList.JustifyContent === 'flex-end') {
} align = 'right'
html += `<div class="commonModule" draggable="false" data-id="${index}" }
style="background-color: ${item.PropertyList.BackColor};left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;border-radius: ${item.PropertyList.BorderRadius}px; html += `<div class="commonModule" draggable="false" data-id="${index}"
height: ${item.PropertyList.Height}px;box-shadow: ${item.PropertyList.BoxShadow};z-index: ${item.PropertyList.ZIndex};opacity: ${Number(item.PropertyList.Opacity) / 100}; style="background-color: ${item.PropertyList.BackColor};left: ${item.PropertyList.Left}px;top: ${
border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px; transform: rotate(${item.PropertyList.Rotate}deg); item.PropertyList.Top
font-family: ${item.PropertyList.FontFamily};color: ${item.PropertyList.Color}; font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; }px; width: ${item.PropertyList.Width}px;border-radius: ${item.PropertyList.BorderRadius}px;
display: flex;justify-content: ${item.PropertyList.JustifyContent};text-align:${align}; align-items: ${item.PropertyList.AlignItems};" height: ${item.PropertyList.Height}px;box-shadow: ${item.PropertyList.BoxShadow};z-index: ${
item.PropertyList.ZIndex
};opacity: ${Number(item.PropertyList.Opacity) / 100};
border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor}; border-width: ${
item.PropertyList.BorderWidth
}px; transform: rotate(${item.PropertyList.Rotate}deg);
font-family: ${item.PropertyList.FontFamily};color: ${item.PropertyList.Color}; font-weight: ${
item.PropertyList.FontWeight
};text-decoration: ${item.PropertyList.TextDecoration};
display: flex;justify-content: ${item.PropertyList.JustifyContent};text-align:${align}; align-items: ${
item.PropertyList.AlignItems
};"
> >
<span style="font-family: ${item.PropertyList.FontFamily};font-size: ${item.PropertyList.FontSize}px" > <span style="font-family: ${item.PropertyList.FontFamily};font-size: ${item.PropertyList.FontSize}px" >
数值显示 数值显示
</span> </span>
</div> </div>
` `
} else if (item.ControlType === 'statictextblock') { //静态文本 } else if (item.ControlType === 'statictextblock') {
let align = '' //静态文本
if (item.PropertyList.JustifyContent === 'flex-start') { let align = ''
align = 'left' if (item.PropertyList.JustifyContent === 'flex-start') {
} else if (item.PropertyList.JustifyContent === 'center') { align = 'left'
align = 'center' } else if (item.PropertyList.JustifyContent === 'center') {
} else if (item.PropertyList.JustifyContent === 'flex-end') { align = 'center'
align = 'right' } else if (item.PropertyList.JustifyContent === 'flex-end') {
} align = 'right'
html += `<div class="commonModule" draggable="false" data-id="${index}" }
html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px;
z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);"> z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);">
<div class="moduleShape common-input" contenteditable="true" style=" height: ${item.PropertyList.Height}px;width: ${item.PropertyList.Width}px;padding:0;background-color: ${item.PropertyList.BackColor};border-radius:${item.PropertyList.BorderRadius}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px;font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; <div class="moduleShape common-input" contenteditable="true" style=" height: ${
item.PropertyList.Height
}px;width: ${item.PropertyList.Width}px;padding:0;background-color: ${
item.PropertyList.BackColor
};border-radius:${item.PropertyList.BorderRadius}px;border-style: ${
item.PropertyList.Style
};border-color: ${item.PropertyList.BorderColor}; border-width: ${
item.PropertyList.BorderWidth
}px;font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration};
font-weight: ${item.PropertyList.FontWeight};opacity: ${Number(item.PropertyList.Opacity) / 100}; font-weight: ${item.PropertyList.FontWeight};opacity: ${Number(item.PropertyList.Opacity) / 100};
box-shadow: ${item.PropertyList.BoxShadow};color: ${item.PropertyList.Color};font-size: ${item.PropertyList.FontSize}px; box-shadow: ${item.PropertyList.BoxShadow};color: ${item.PropertyList.Color};font-size: ${
font-family: ${item.PropertyList.FontFamily};position:absolute;top:0px;text-align:${item.PropertyList.TextAlign}; item.PropertyList.FontSize
display: flex;justify-content: ${item.PropertyList.JustifyContent};align-items: ${item.PropertyList.AlignItems};text-align:${align};left:0px" }px;
font-family: ${item.PropertyList.FontFamily};position:absolute;top:0px;text-align:${
item.PropertyList.TextAlign
};
display: flex;justify-content: ${item.PropertyList.JustifyContent};align-items: ${
item.PropertyList.AlignItems
};text-align:${align};left:0px"
> >
<span>${item.PropertyList.Text}</span> <span>${item.PropertyList.Text}</span>
</div> </div>
</div> </div>
` `
} else if(item.ControlType === 'dynamictext') { //动态文本 } else if (item.ControlType === 'dynamictext') {
let align = '' //动态文本
if (item.PropertyList.JustifyContent === 'flex-start') { let align = ''
align = 'left' if (item.PropertyList.JustifyContent === 'flex-start') {
} else if (item.PropertyList.JustifyContent === 'center') { align = 'left'
align = 'center' } else if (item.PropertyList.JustifyContent === 'center') {
} else if (item.PropertyList.JustifyContent === 'flex-end') { align = 'center'
align = 'right' } else if (item.PropertyList.JustifyContent === 'flex-end') {
} align = 'right'
html += `<div class="commonModule" draggable="false" data-id="${index}" }
html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;
height: ${item.PropertyList.Height}px;transform: rotate(${item.PropertyList.Rotate}deg);z-index: ${item.PropertyList.ZIndex};" height: ${item.PropertyList.Height}px;transform: rotate(${item.PropertyList.Rotate}deg);z-index: ${
item.PropertyList.ZIndex
};"
> >
<div class="moduleShape common-input" contenteditable="true" style="height: ${item.PropertyList.Height}px;width: ${item.PropertyList.Width}px;padding:0;background-color: ${item.PropertyList.BackColor};border-radius:${item.PropertyList.BorderRadius}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px;font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; <div class="moduleShape common-input" contenteditable="true" style="height: ${
text-align:${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};opacity: ${Number(item.PropertyList.Opacity) / 100}; item.PropertyList.Height
box-shadow: ${item.PropertyList.BoxShadow};color: ${item.PropertyList.Color};font-size: ${item.PropertyList.FontSize}px; }px;width: ${item.PropertyList.Width}px;padding:0;background-color: ${
item.PropertyList.BackColor
};border-radius:${item.PropertyList.BorderRadius}px;border-style: ${
item.PropertyList.Style
};border-color: ${item.PropertyList.BorderColor}; border-width: ${
item.PropertyList.BorderWidth
}px;font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration};
text-align:${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};opacity: ${
Number(item.PropertyList.Opacity) / 100
};
box-shadow: ${item.PropertyList.BoxShadow};color: ${item.PropertyList.Color};font-size: ${
item.PropertyList.FontSize
}px;
font-family: ${item.PropertyList.FontFamily};position:absolute;top:0px;display: flex; font-family: ${item.PropertyList.FontFamily};position:absolute;top:0px;display: flex;
justify-content: ${item.PropertyList.JustifyContent};align-items: ${item.PropertyList.AlignItems};text-align:${align}; left:0px"> justify-content: ${item.PropertyList.JustifyContent};align-items: ${
item.PropertyList.AlignItems
};text-align:${align}; left:0px">
<span>${item.PropertyList.Text}</span> <span>${item.PropertyList.Text}</span>
</div> </div>
</div> </div>
` `
} else if (item.ControlType === 'solidellipse') { //圆形 } else if (item.ControlType === 'solidellipse') {
html += `<div class="commonModule" draggable="false" data-id="${index}" //圆形
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;border-radius: 50%; html += `<div class="commonModule" draggable="false" data-id="${index}"
border-style: ${item.PropertyList.Style}; border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
${item.PropertyList.BackSetting !== 'img' ? `background-color: ${item.PropertyList.BackColor}`: '' };box-shadow: ${item.PropertyList.BoxShadow}; height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex}; item.PropertyList.Width
}px;border-radius: 50%;
border-style: ${item.PropertyList.Style}; border-color: ${item.PropertyList.BorderColor}; border-width: ${
item.PropertyList.BorderWidth
}px;
${
item.PropertyList.BackSetting !== 'img' ? `background-color: ${item.PropertyList.BackColor}` : ''
};box-shadow: ${item.PropertyList.BoxShadow}; height: ${item.PropertyList.Height}px;z-index: ${
item.PropertyList.ZIndex
};
opacity: ${Number(item.PropertyList.Opacity) / 100};transform: rotate(${item.PropertyList.Rotate}deg);"> opacity: ${Number(item.PropertyList.Opacity) / 100};transform: rotate(${item.PropertyList.Rotate}deg);">
<div class="moduleShape" style="${item.PropertyList.BackSetting === 'img' ? `background-image:url(${item.PropertyList.BackImg});background-size:100% 100%;background-repeat: no-repeat;`: '' } border-radius: 50%;"></div> <div class="moduleShape" style="${
item.PropertyList.BackSetting === 'img'
? `background-image:url(${item.PropertyList.BackImg});background-size:100% 100%;background-repeat: no-repeat;`
: ''
} border-radius: 50%;"></div>
</div> </div>
` `
} else if (item.ControlType === 'ellipselamp') { //圆形状态灯 } else if (item.ControlType === 'ellipselamp') {
html += `<div class="commonModule" draggable="false" data-id="${index}" //圆形状态灯
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;border-radius: 50%; html += `<div class="commonModule" draggable="false" data-id="${index}"
height: ${item.PropertyList.Height}px;box-shadow: ${item.PropertyList.BoxShadow};z-index: ${item.PropertyList.ZIndex};background-color: #DDDDDD; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;border-radius: 50%;
height: ${item.PropertyList.Height}px;box-shadow: ${item.PropertyList.BoxShadow};z-index: ${
item.PropertyList.ZIndex
};background-color: #DDDDDD;
opacity: ${Number(item.PropertyList.Opacity) / 100};"> opacity: ${Number(item.PropertyList.Opacity) / 100};">
<div class="moduleShape"> <div class="moduleShape">
</div> </div>
</div> </div>
` `
} else if (item.ControlType === 'commonlamp') { //矩形状态灯 } else if (item.ControlType === 'commonlamp') {
html += `<div class="commonModule" draggable="false" data-id="${index}" //矩形状态灯
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;border-radius: ${item.PropertyList.BorderRadius}px; html += `<div class="commonModule" draggable="false" data-id="${index}"
height: ${item.PropertyList.Height}px;box-shadow: ${item.PropertyList.BoxShadow};z-index: ${item.PropertyList.ZIndex};background-color: #DDDDDD; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;border-radius: ${item.PropertyList.BorderRadius}px;
height: ${item.PropertyList.Height}px;box-shadow: ${item.PropertyList.BoxShadow};z-index: ${
item.PropertyList.ZIndex
};background-color: #DDDDDD;
opacity: ${Number(item.PropertyList.Opacity) / 100};"> opacity: ${Number(item.PropertyList.Opacity) / 100};">
<div class="moduleShape"> <div class="moduleShape">
</div> </div>
</div> </div>
` `
} else if (item.ControlType === 'cornerbutton') { //控制按钮 } else if (item.ControlType === 'cornerbutton') {
html += `<div class="commonModule div-btn" draggable="false" data-id="${index}" //控制按钮
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px;color: ${item.PropertyList.Color}; width: ${item.PropertyList.Width}px;line-height: ${item.PropertyList.Height - (item.PropertyList.BorderWidth * 2)}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};background: ${item.PropertyList.BackColor}; text-align: ${item.PropertyList.TextAlign}; border-radius: ${item.PropertyList.BorderRadius}px; opacity: ${Number(item.PropertyList.Opacity) / 100};"> html += `<div class="commonModule div-btn" draggable="false" data-id="${index}"
<div class="moduleShape common-input" contenteditable="true" style="font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px;color: ${
font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};box-shadow: ${item.PropertyList.BoxShadow};" > item.PropertyList.Color
}; width: ${item.PropertyList.Width}px;line-height: ${
item.PropertyList.Height - item.PropertyList.BorderWidth * 2
}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};background: ${item.PropertyList.BackColor}; text-align: ${
item.PropertyList.TextAlign
}; border-radius: ${item.PropertyList.BorderRadius}px; opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div class="moduleShape common-input" contenteditable="true" style="font-weight: ${
item.PropertyList.FontWeight
};text-decoration: ${item.PropertyList.TextDecoration};
font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};box-shadow: ${
item.PropertyList.BoxShadow
};" >
<span>${item.PropertyList.Text}</span> <span>${item.PropertyList.Text}</span>
</div> </div>
</div>` </div>`
} else if (item.ControlType === 'rwtextbox') { //读写框 } else if (item.ControlType === 'rwtextbox') {
html += `<div class="commonModule div-text" draggable="false" data-id="${index}" //读写框
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};"> html += `<div class="commonModule div-text" draggable="false" data-id="${index}"
<input class="moduleShape common-input" contenteditable="true" style="width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;padding:0;background-color: ${item.PropertyList.BackColor};border-radius:${item.PropertyList.BorderRadius}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor}; border-width: ${item.PropertyList.BorderWidth}px;font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
text-align:${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};line-height: ${item.PropertyList.Height}px;opacity: ${Number(item.PropertyList.Opacity) / 100};box-shadow: ${item.PropertyList.BoxShadow};color: ${item.PropertyList.Color};font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};position:absolute;top:0px;left:0px" value='${item.PropertyList.Text}'> item.PropertyList.Width
}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};">
<input class="moduleShape common-input" contenteditable="true" style="width: ${
item.PropertyList.Width
}px;height: ${item.PropertyList.Height}px;padding:0;background-color: ${
item.PropertyList.BackColor
};border-radius:${item.PropertyList.BorderRadius}px;border-style: ${
item.PropertyList.Style
};border-color: ${item.PropertyList.BorderColor}; border-width: ${
item.PropertyList.BorderWidth
}px;font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration};
text-align:${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};line-height: ${
item.PropertyList.Height
}px;opacity: ${Number(item.PropertyList.Opacity) / 100};box-shadow: ${
item.PropertyList.BoxShadow
};color: ${item.PropertyList.Color};font-size: ${item.PropertyList.FontSize}px;font-family: ${
item.PropertyList.FontFamily
};position:absolute;top:0px;left:0px" value='${item.PropertyList.Text}'>
</input> </input>
</div>` </div>`
} else if (item.ControlType === 'jumplink') { //跳转链接 } else if (item.ControlType === 'jumplink') {
html += `<div class="commonModule div-text" draggable="false" data-id="${index}" //跳转链接
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px;color: ${item.PropertyList.Color}; width: ${item.PropertyList.Width}px;line-height: ${item.PropertyList.Height}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};background: ${item.PropertyList.BackColor}; opacity: ${Number(item.PropertyList.Opacity) / 100};"> html += `<div class="commonModule div-text" draggable="false" data-id="${index}"
<div class="moduleShape common-input flexLayout" style="font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px;color: ${
item.PropertyList.Color
}; width: ${item.PropertyList.Width}px;line-height: ${item.PropertyList.Height}px;height: ${
item.PropertyList.Height
}px;z-index: ${item.PropertyList.ZIndex};background: ${item.PropertyList.BackColor}; opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div class="moduleShape common-input flexLayout" style="font-weight: ${
item.PropertyList.FontWeight
};text-decoration: ${item.PropertyList.TextDecoration};
font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" > font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" >
<span>跳转链接 ></span> <span>跳转链接 ></span>
</div> </div>
</div>` </div>`
} else if (item.ControlType === 'textsearch') { //文本查询 } else if (item.ControlType === 'textsearch') {
let dropList = TextSearchList.map(d => { //文本查询
return `<li class="dropdown-item ${d.value === item.PropertyList.Value ? 'selected' : ''}" data-value="${d.value}" >${d.value}</li>` let dropList = TextSearchList.map(d => {
}).join('') return `<li class="dropdown-item ${
html += `<div class="commonModule" draggable="false" data-id="${index}" d.value === item.PropertyList.Value ? 'selected' : ''
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;line-height: ${item.PropertyList.Height - (item.PropertyList.BorderWidth * 2)}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex}; text-align: ${item.PropertyList.TextAlign}; opacity: ${Number(item.PropertyList.Opacity) / 100};"> }" data-value="${d.value}" >${d.value}</li>`
}).join('')
html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;line-height: ${item.PropertyList.Height - item.PropertyList.BorderWidth * 2}px;height: ${
item.PropertyList.Height
}px;z-index: ${item.PropertyList.ZIndex}; text-align: ${item.PropertyList.TextAlign}; opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div style="width: 100%;height:100%;display: flex"> <div style="width: 100%;height:100%;display: flex">
<div class="global-select" style="height:100%; margin-right: 10px;" > <div class="global-select" style="height:100%; margin-right: 10px;" >
<div class="global-input"style="height:100%;position:relative"> <div class="global-input"style="height:100%;position:relative">
<input type="text" class="search-input input-inner" value="${item.PropertyList.Value}" readonly="readonly" autocomplete="off" <input type="text" class="search-input input-inner" value="${
style="width: 100%;left:0px;text-align: ${item.PropertyList.TextAlign};position:absolute;top:0;height:100%;box-shadow: ${item.PropertyList.BoxShadow}; item.PropertyList.Value
color: ${item.PropertyList.Color};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style}; }" readonly="readonly" autocomplete="off"
border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign}; style="width: 100%;left:0px;text-align: ${
font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px; item.PropertyList.TextAlign
font-family: ${item.PropertyList.FontFamily};background: ${item.PropertyList.BackColor}" placeholder="请选择" ></input> };position:absolute;top:0;height:100%;box-shadow: ${item.PropertyList.BoxShadow};
color: ${item.PropertyList.Color};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${
item.PropertyList.Style
};
border-color: ${item.PropertyList.BorderColor};border-radius: ${
item.PropertyList.BorderRadius
}px;text-align: ${item.PropertyList.TextAlign};
font-weight: ${item.PropertyList.FontWeight};text-decoration: ${
item.PropertyList.TextDecoration
}; font-size: ${item.PropertyList.FontSize}px;
font-family: ${item.PropertyList.FontFamily};background: ${
item.PropertyList.BackColor
}" placeholder="请选择" ></input>
<span class="input-suffix"> <span class="input-suffix">
<span class="input-suffix-inner" > <span class="input-suffix-inner" >
<i class="iconfont iconxialajiantou"></i> <i class="iconfont iconxialajiantou"></i>
</span> </span>
</span> </span>
</div> </div>
<ul class="select-dropdown" onmousedown="selectValue(event, ${index}, 'Value')" style="width: ${item.PropertyList.Width}px;text-align: ${item.PropertyList.TextAlign}" > <ul class="select-dropdown" onmousedown="selectValue(event, ${index}, 'Value')" style="width: ${
item.PropertyList.Width
}px;text-align: ${item.PropertyList.TextAlign}" >
${dropList} ${dropList}
</ul> </ul>
</div> </div>
<input class="search-input" style="box-shadow: ${item.PropertyList.BoxShadow}; text-align: ${item.PropertyList.TextAlign};height: 100%; <input class="search-input" style="box-shadow: ${item.PropertyList.BoxShadow}; text-align: ${
color: ${item.PropertyList.Color};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style}; item.PropertyList.TextAlign
border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign}; };height: 100%;
font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px; color: ${item.PropertyList.Color};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${
font-family: ${item.PropertyList.FontFamily};background: ${item.PropertyList.BackColor}" placeholder="${item.PropertyList.Placeholder}" item.PropertyList.Style
value="${item.PropertyList.Text}" ${item.Disabled ? 'disabled' : '' } onblur="changeText(event, ${index}, 'Text')" /> };
border-color: ${item.PropertyList.BorderColor};border-radius: ${
item.PropertyList.BorderRadius
}px;text-align: ${item.PropertyList.TextAlign};
font-weight: ${item.PropertyList.FontWeight};text-decoration: ${
item.PropertyList.TextDecoration
}; font-size: ${item.PropertyList.FontSize}px;
font-family: ${item.PropertyList.FontFamily};background: ${item.PropertyList.BackColor}" placeholder="${
item.PropertyList.Placeholder
}"
value="${item.PropertyList.Text}" ${
item.Disabled ? 'disabled' : ''
} onblur="changeText(event, ${index}, 'Text')" />
</div> </div>
</div>` </div>`
} else if (item.ControlType === 'associatedatetimepicker') { //日期时间 } else if (item.ControlType === 'associatedatetimepicker') {
html += `<div class="commonModule" draggable="false" data-id="${index}" //日期时间
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;transform: rotate(${item.PropertyList.Rotate}deg); html += `<div class="commonModule" draggable="false" data-id="${index}"
line-height: ${item.PropertyList.Height - (item.PropertyList.BorderWidth * 2)}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex}; style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;transform: rotate(${item.PropertyList.Rotate}deg);
line-height: ${item.PropertyList.Height - item.PropertyList.BorderWidth * 2}px;height: ${
item.PropertyList.Height
}px;z-index: ${item.PropertyList.ZIndex};
background: ${item.PropertyList.BackColor};opacity: ${Number(item.PropertyList.Opacity) / 100};"> background: ${item.PropertyList.BackColor};opacity: ${Number(item.PropertyList.Opacity) / 100};">
<div class="r-date-group" style="height: 100%;font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};color: ${item.PropertyList.Color};font-weight: ${item.PropertyList.FontWeight};" > <div class="r-date-group" style="height: 100%;font-size: ${item.PropertyList.FontSize}px;font-family: ${
item.PropertyList.FontFamily
};color: ${item.PropertyList.Color};font-weight: ${item.PropertyList.FontWeight};" >
<div class="bi-datePicker date-wrap" > <div class="bi-datePicker date-wrap" >
<input type="text" readonly="readonly" style="background: ${item.PropertyList.BackColor};color: ${item.PropertyList.Color};box-shadow: ${item.PropertyList.BoxShadow};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-decoration: ${item.PropertyList.TextDecoration}; text-align: ${item.PropertyList.TextAlign}; " autocomplete="off" value="${item.StartTime}" placeholder="请选择"> <input type="text" readonly="readonly" style="background: ${item.PropertyList.BackColor};color: ${
item.PropertyList.Color
};box-shadow: ${item.PropertyList.BoxShadow};border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};border-radius: ${item.PropertyList.BorderRadius}px;text-decoration: ${
item.PropertyList.TextDecoration
}; text-align: ${item.PropertyList.TextAlign}; " autocomplete="off" value="${
item.StartTime
}" placeholder="请选择">
</div> </div>
<div class="bi-datePicker date-wrap" > <div class="bi-datePicker date-wrap" >
<input type="text" readonly="readonly" style="background: ${item.PropertyList.BackColor};color: ${item.PropertyList.Color};box-shadow: ${item.PropertyList.BoxShadow};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-decoration: ${item.PropertyList.TextDecoration}; text-align: ${item.PropertyList.TextAlign}; " autocomplete="off" value="${item.EndTime}" placeholder="请选择"> <input type="text" readonly="readonly" style="background: ${item.PropertyList.BackColor};color: ${
item.PropertyList.Color
};box-shadow: ${item.PropertyList.BoxShadow};border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};border-radius: ${item.PropertyList.BorderRadius}px;text-decoration: ${
item.PropertyList.TextDecoration
}; text-align: ${item.PropertyList.TextAlign}; " autocomplete="off" value="${
item.EndTime
}" placeholder="请选择">
</div> </div>
</div> </div>
</div>` </div>`
} else if (item.ControlType === 'datasearch') { //数值查询 } else if (item.ControlType === 'datasearch') {
let emptys = ['为空', '不为空'] //数值查询
let equals = ['等于','不等于','大于等于','小于等于'] let emptys = ['为空', '不为空']
let dropList = DataSearchList.map(d => { let equals = ['等于', '不等于', '大于等于', '小于等于']
return `<li class="dropdown-item ${d.name === item.PropertyList.Value ? 'selected' : ''}" data-value="${d.value}" >${d.name}</li>` let dropList = DataSearchList.map(d => {
}).join('') return `<li class="dropdown-item ${
html += `<div class="commonModule" draggable="false" data-id="${index}" d.name === item.PropertyList.Value ? 'selected' : ''
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;transform: rotate(${item.PropertyList.Rotate}deg);height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex}; }" data-value="${d.value}" >${d.name}</li>`
background: ${item.PropertyList.BackColor}; text-align: ${item.PropertyList.TextAlign}; opacity: ${Number(item.PropertyList.Opacity) / 100};"> }).join('')
<div style="width:100%;height:100%;display: flex; line-height: ${item.PropertyList.Height - (item.PropertyList.BorderWidth * 2)}px;"> html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;transform: rotate(${item.PropertyList.Rotate}deg);height: ${item.PropertyList.Height}px;z-index: ${
item.PropertyList.ZIndex
};
background: ${item.PropertyList.BackColor}; text-align: ${item.PropertyList.TextAlign}; opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div style="width:100%;height:100%;display: flex; line-height: ${
item.PropertyList.Height - item.PropertyList.BorderWidth * 2
}px;">
<div class="global-select" style="height:100%; margin-right: 10px; flex: 2" > <div class="global-select" style="height:100%; margin-right: 10px; flex: 2" >
<div class="global-input" style="height:100%;position:relative;"> <div class="global-input" style="height:100%;position:relative;">
<input type="text" class="search-input input-inner" value="${item.PropertyList.Value}" readonly="readonly" autocomplete="off" <input type="text" class="search-input input-inner" value="${
style="left:0px;text-align: ${item.PropertyList.TextAlign};width:100%;color: ${item.PropertyList.Color};position:absolute;top:0px;box-shadow: ${item.PropertyList.BoxShadow};height: 100%;border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" placeholder="请选择" ></input> item.PropertyList.Value
}" readonly="readonly" autocomplete="off"
style="left:0px;text-align: ${item.PropertyList.TextAlign};width:100%;color: ${
item.PropertyList.Color
};position:absolute;top:0px;box-shadow: ${item.PropertyList.BoxShadow};height: 100%;border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${
item.PropertyList.TextAlign
};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${
item.PropertyList.TextDecoration
}; font-size: ${item.PropertyList.FontSize}px;font-family: ${
item.PropertyList.FontFamily
};" placeholder="请选择" ></input>
<span class="input-suffix" > <span class="input-suffix" >
<span class="input-suffix-inner" > <span class="input-suffix-inner" >
<i class="iconfont iconxialajiantou" ></i> <i class="iconfont iconxialajiantou" ></i>
</span> </span>
</span> </span>
</div> </div>
<ul class="select-dropdown" onmousedown="selectValue(event, ${index}, 'Value')" style="width: ${item.PropertyList.Width}px;" > <ul class="select-dropdown" onmousedown="selectValue(event, ${index}, 'Value')" style="width: ${
item.PropertyList.Width
}px;" >
${dropList} ${dropList}
</ul> </ul>
</div> </div>
<input class="search-input" ${emptys.includes(item.PropertyList.Value) ? 'disabled': ''} style="color: ${item.PropertyList.Color};flex: 1;box-shadow: ${item.PropertyList.BoxShadow};height: 100%;border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" placeholder="${item.PropertyList.Placeholder}" <input class="search-input" ${emptys.includes(item.PropertyList.Value) ? 'disabled' : ''} style="color: ${
item.PropertyList.Color
};flex: 1;box-shadow: ${item.PropertyList.BoxShadow};height: 100%;border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${
item.PropertyList.TextAlign
};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${
item.PropertyList.TextDecoration
}; font-size: ${item.PropertyList.FontSize}px;font-family: ${
item.PropertyList.FontFamily
};" placeholder="${item.PropertyList.Placeholder}"
value="${item.PropertyList.Num1}" /> value="${item.PropertyList.Num1}" />
<div class="short" style="position:relative;line-height:0;"><span style="position:absolute;top:0px;bottom:0px;margin:auto;width:3px;display:inline-block;height:2px;right:2px;">-</span></div> <div class="short" style="position:relative;line-height:0;"><span style="position:absolute;top:0px;bottom:0px;margin:auto;width:3px;display:inline-block;height:2px;right:2px;">-</span></div>
<input class="search-input" ${emptys.includes(item.PropertyList.Value) || equals.includes(item.PropertyList.Value) ? 'disabled': ''} style="color: ${item.PropertyList.Color};flex: 1;box-shadow: ${item.PropertyList.BoxShadow};height: 100%;border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" placeholder="${item.PropertyList.Placeholder}" <input class="search-input" ${
emptys.includes(item.PropertyList.Value) || equals.includes(item.PropertyList.Value) ? 'disabled' : ''
} style="color: ${item.PropertyList.Color};flex: 1;box-shadow: ${
item.PropertyList.BoxShadow
};height: 100%;border-width: ${item.PropertyList.BorderWidth}px;border-style: ${
item.PropertyList.Style
};border-color: ${item.PropertyList.BorderColor};border-radius: ${
item.PropertyList.BorderRadius
}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${
item.PropertyList.FontWeight
};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${
item.PropertyList.FontSize
}px;font-family: ${item.PropertyList.FontFamily};" placeholder="${item.PropertyList.Placeholder}"
value="${item.PropertyList.Num2}" /> value="${item.PropertyList.Num2}" />
</div> </div>
</div>` </div>`
} else if (item.ControlType === 'dropsearch') { //下拉查询 } else if (item.ControlType === 'dropsearch') {
let filterList = [] //下拉查询
item.PropertyList.datasetValue = item.PropertyList.datasetValue ? item.PropertyList.datasetValue : 'eq' let filterList = []
let dropList = DropSearchList.map(d => { item.PropertyList.datasetValue = item.PropertyList.datasetValue ? item.PropertyList.datasetValue : 'eq'
return `<li class="dropdown-item ${d.name === item.PropertyList.Value ? 'selected' : ''}" data-value="${d.value}" >${d.name}</li>` let dropList = DropSearchList.map(d => {
}).join('') return `<li class="dropdown-item ${
filterList = item.dropList.map(d => { d.name === item.PropertyList.Value ? 'selected' : ''
return `<li class="dropdown-item ${item.ChoiceList.includes(d.value) ? 'selected' : ''}" >${d.name}</li>` }" data-value="${d.value}" >${d.name}</li>`
}).join('') }).join('')
var dataList = item.ChoiceList.map(d => { filterList = item.dropList
return `<span class="tag" ><span >${d}</span><i onmousedown="delChoice(event, ${index})" class="iconfont iconguanbi2"></i></span>` .map(d => {
}).join('') return `<li class="dropdown-item ${item.ChoiceList.includes(d.value) ? 'selected' : ''}" >${
let leftHtml = `` d.name
if (item.EchartList.length <= 1) { }</li>`
leftHtml = ` })
.join('')
var dataList = item.ChoiceList.map(d => {
return `<span class="tag" ><span >${d}</span><i onmousedown="delChoice(event, ${index})" class="iconfont iconguanbi2"></i></span>`
}).join('')
let leftHtml = ``
if (item.EchartList.length <= 1) {
leftHtml = `
<div class="global-select" style="height: 100%; flex: 1.1" > <div class="global-select" style="height: 100%; flex: 1.1" >
<div class="select__tags"> <div class="select__tags">
<span> <span>
${dataList} ${dataList}
</span> </span>
<input type="text" style="background: ${item.PropertyList.BackColor};color: ${item.PropertyList.Color}; min-width: 38px; width: calc(100% - 5px)" placeholder="${item.ChoiceList.length === 0 ? '请选择' : ''}" ${item.Disabled ? 'disabled' : '' } class="${item.Disabled ? 'is-forbid' : '' }" onmousedown="toggleItem(event, ${index}, 'filter')" onInput="textInput(event, ${index})" ></input> <input type="text" style="background: ${item.PropertyList.BackColor};color: ${
item.PropertyList.Color
}; min-width: 38px; width: calc(100% - 5px)" placeholder="${
item.ChoiceList.length === 0 ? '请选择' : ''
}" ${item.Disabled ? 'disabled' : ''} class="${
item.Disabled ? 'is-forbid' : ''
}" onmousedown="toggleItem(event, ${index}, 'filter')" onInput="textInput(event, ${index})" ></input>
</div> </div>
<div class="global-input ${item.Disabled ? 'is-triger' : '' }" onmousedown="toggleItem(event, ${index}, 'resetDrop')" style="height:100%" > <div class="global-input ${
<input type="text" ${item.Disabled ? 'disabled' : '' } class="input-inner ${item.Disabled ? 'is-forbid' : '' } " value="${item.PropertyList.CheckedValue}" autocomplete="off" readonly="readonly")" item.Disabled ? 'is-triger' : ''
style="position:absolute;top:0; background: ${item.PropertyList.BackColor};box-shadow: ${item.PropertyList.BoxShadow};height: 100%;color: ${item.PropertyList.Color};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" ></input> }" onmousedown="toggleItem(event, ${index}, 'resetDrop')" style="height:100%" >
<span class="input-suffix ${item.Disabled ? 'is-forbid' : '' } "> <input type="text" ${item.Disabled ? 'disabled' : ''} class="input-inner ${
item.Disabled ? 'is-forbid' : ''
} " value="${item.PropertyList.CheckedValue}" autocomplete="off" readonly="readonly")"
style="position:absolute;top:0; background: ${item.PropertyList.BackColor};box-shadow: ${
item.PropertyList.BoxShadow
};height: 100%;color: ${item.PropertyList.Color};border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${
item.PropertyList.TextAlign
};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${
item.PropertyList.TextDecoration
}; font-size: ${item.PropertyList.FontSize}px;font-family: ${
item.PropertyList.FontFamily
};" ></input>
<span class="input-suffix ${item.Disabled ? 'is-forbid' : ''} ">
<span class="input-suffix-inner"> <span class="input-suffix-inner">
<i class="iconfont iconxialajiantou"></i> <i class="iconfont iconxialajiantou"></i>
</span> </span>
</div> </div>
<ul class="select-dropdown" id="child-drop${index}" onmousedown="addSelectChoice(event, ${index}, 'CheckedValue')" style="width: ${item.PropertyList.Width/2}px;" > <ul class="select-dropdown" id="child-drop${index}" onmousedown="addSelectChoice(event, ${index}, 'CheckedValue')" style="width: ${
item.PropertyList.Width / 2
}px;" >
${filterList} ${filterList}
</ul> </ul>
</div>` </div>`
} else { } else {
leftHtml = ` leftHtml = `
<div class="global-select" style="height: 100%; flex: 1.1" > <div class="global-select" style="height: 100%; flex: 1.1" >
<input ${item.Disabled ? 'disabled' : '' } class="search-input ${item.Disabled ? 'is-forbid' : '' }" value="${item.ChoiceList[0] ? item.ChoiceList[0] : ''}" onblur="getSelectValue(event, ${index})" style="position: absolute;top: 0px; background: ${item.PropertyList.BackColor};box-shadow: ${item.PropertyList.BoxShadow};height: 100%;color: ${item.PropertyList.Color};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};"" ></input> <input ${item.Disabled ? 'disabled' : ''} class="search-input ${
item.Disabled ? 'is-forbid' : ''
}" value="${
item.ChoiceList[0] ? item.ChoiceList[0] : ''
}" onblur="getSelectValue(event, ${index})" style="position: absolute;top: 0px; background: ${
item.PropertyList.BackColor
};box-shadow: ${item.PropertyList.BoxShadow};height: 100%;color: ${
item.PropertyList.Color
};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${
item.PropertyList.Style
};border-color: ${item.PropertyList.BorderColor};border-radius: ${
item.PropertyList.BorderRadius
}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${
item.PropertyList.FontWeight
};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${
item.PropertyList.FontSize
}px;font-family: ${item.PropertyList.FontFamily};"" ></input>
</div> </div>
` `
} }
html += `<div class="commonModule" draggable="false" data-id="${index}" html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;transform: rotate(${item.PropertyList.Rotate}deg); style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
line-height: ${item.PropertyList.Height - (item.PropertyList.BorderWidth * 2)}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex}; item.PropertyList.Width
background: ${item.PropertyList.BackColor}; text-align: ${item.PropertyList.TextAlign}; opacity: ${Number(item.PropertyList.Opacity) / 100};"> }px;transform: rotate(${item.PropertyList.Rotate}deg);
line-height: ${item.PropertyList.Height - item.PropertyList.BorderWidth * 2}px;height: ${
item.PropertyList.Height
}px;z-index: ${item.PropertyList.ZIndex};
background: ${item.PropertyList.BackColor}; text-align: ${item.PropertyList.TextAlign}; opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div style="width:100%; height:100%; display: flex" > <div style="width:100%; height:100%; display: flex" >
<div class="global-select" style="height:100%; flex: 0.9; margin-right: 10px" > <div class="global-select" style="height:100%; flex: 0.9; margin-right: 10px" >
<div class="global-input" style="height:100%;"> <div class="global-input" style="height:100%;">
<input type="text" value="${item.PropertyList.Value}" readonly="readonly" autocomplete="off" <input type="text" value="${item.PropertyList.Value}" readonly="readonly" autocomplete="off"
style="position:absolute;top:0px; background: ${item.PropertyList.BackColor};box-shadow: ${item.PropertyList.BoxShadow};height: 100%;color: ${item.PropertyList.Color};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${item.PropertyList.TextAlign};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" placeholder="请选择" class="input-inner" ></input> style="position:absolute;top:0px; background: ${item.PropertyList.BackColor};box-shadow: ${
item.PropertyList.BoxShadow
};height: 100%;color: ${item.PropertyList.Color};border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};border-radius: ${item.PropertyList.BorderRadius}px;text-align: ${
item.PropertyList.TextAlign
};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${
item.PropertyList.TextDecoration
}; font-size: ${item.PropertyList.FontSize}px;font-family: ${
item.PropertyList.FontFamily
};" placeholder="请选择" class="input-inner" ></input>
<span class="input-suffix"> <span class="input-suffix">
<span class="input-suffix-inner"> <span class="input-suffix-inner">
<i class="iconfont iconxialajiantou"></i> <i class="iconfont iconxialajiantou"></i>
</span> </span>
</span> </span>
</div> </div>
<ul class="select-dropdown" onmousedown="selectValue(event, ${index}, 'Value')" style="width: ${item.PropertyList.Width/2}px;" > <ul class="select-dropdown" onmousedown="selectValue(event, ${index}, 'Value')" style="width: ${
item.PropertyList.Width / 2
}px;" >
${dropList} ${dropList}
</ul> </ul>
</div> </div>
...@@ -431,144 +767,179 @@ olclick = function () { ...@@ -431,144 +767,179 @@ olclick = function () {
</div> </div>
</div> </div>
</div>` </div>`
} else if (item.ControlType === 'searchbutton') { //查询按钮 } else if (item.ControlType === 'searchbutton') {
html += `<div class="commonModule div-btn" draggable="false" data-id="${index}" //查询按钮
style="box-shadow: ${item.PropertyList.BoxShadow};left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;line-height: ${item.PropertyList.Height - (item.PropertyList.BorderWidth * 2)}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};background: ${item.PropertyList.BackColor}; text-align: ${item.PropertyList.TextAlign}; border-radius: ${item.PropertyList.BorderRadius}px; opacity: ${Number(item.PropertyList.Opacity) / 100};"> html += `<div class="commonModule div-btn" draggable="false" data-id="${index}"
<div class="moduleShape common-input" contenteditable="true" style="color: ${item.PropertyList.Color};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; style="box-shadow: ${item.PropertyList.BoxShadow};left: ${item.PropertyList.Left}px;top: ${
item.PropertyList.Top
}px; width: ${item.PropertyList.Width}px;line-height: ${
item.PropertyList.Height - item.PropertyList.BorderWidth * 2
}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};background: ${item.PropertyList.BackColor}; text-align: ${
item.PropertyList.TextAlign
}; border-radius: ${item.PropertyList.BorderRadius}px; opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div class="moduleShape common-input" contenteditable="true" style="color: ${
item.PropertyList.Color
};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration};
font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" > font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" >
<span>${item.PropertyList.Text}</span> <span>${item.PropertyList.Text}</span>
</div> </div>
</div>` </div>`
} else if (item.ControlType === 'resetbutton') { //重置按钮 } else if (item.ControlType === 'resetbutton') {
html += `<div class="commonModule div-btn" draggable="false" data-id="${index}" //重置按钮
style="box-shadow: ${item.PropertyList.BoxShadow};left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;line-height: ${item.PropertyList.Height - (item.PropertyList.BorderWidth * 2)}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};border-width: ${item.PropertyList.BorderWidth}px;border-style: ${item.PropertyList.Style};border-color: ${item.PropertyList.BorderColor};background: ${item.PropertyList.BackColor}; text-align: ${item.PropertyList.TextAlign}; border-radius: ${item.PropertyList.BorderRadius}px; opacity: ${Number(item.PropertyList.Opacity) / 100};"> html += `<div class="commonModule div-btn" draggable="false" data-id="${index}"
<div class="moduleShape common-input" contenteditable="true" style="color: ${item.PropertyList.Color};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration}; style="box-shadow: ${item.PropertyList.BoxShadow};left: ${item.PropertyList.Left}px;top: ${
item.PropertyList.Top
}px; width: ${item.PropertyList.Width}px;line-height: ${
item.PropertyList.Height - item.PropertyList.BorderWidth * 2
}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};border-width: ${
item.PropertyList.BorderWidth
}px;border-style: ${item.PropertyList.Style};border-color: ${
item.PropertyList.BorderColor
};background: ${item.PropertyList.BackColor}; text-align: ${
item.PropertyList.TextAlign
}; border-radius: ${item.PropertyList.BorderRadius}px; opacity: ${
Number(item.PropertyList.Opacity) / 100
};">
<div class="moduleShape common-input" contenteditable="true" style="color: ${
item.PropertyList.Color
};font-weight: ${item.PropertyList.FontWeight};text-decoration: ${item.PropertyList.TextDecoration};
font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" > font-size: ${item.PropertyList.FontSize}px;font-family: ${item.PropertyList.FontFamily};" >
<span>${item.PropertyList.Text}</span> <span>${item.PropertyList.Text}</span>
</div> </div>
</div>` </div>`
} else if(item.ControlType === 'piechart'){ //饼图 } else if (item.ControlType === 'piechart') {
html += `<div class="commonModule" draggable="false" data-id="${index}" //饼图
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);"> html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${
item.PropertyList.Rotate
}deg);">
<div id="${item.Name}" style="width:100%;height:100%"></div> <div id="${item.Name}" style="width:100%;height:100%"></div>
</div> </div>
<div class="commonModule" draggable="false" data-id="${index}" <div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex-1};"> style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${
item.PropertyList.Width
}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex - 1};">
<div id="${item.Name}pie" style="width:100%;height:100%"></div> <div id="${item.Name}pie" style="width:100%;height:100%"></div>
</div>` </div>`
} else if(item.ControlType === 'dashboardchart'){ } else if (item.ControlType === 'dashboardchart') {
html += `<div class="commonModule" draggable="false" data-id="${index}" html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);"> style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);">
<div id="${item.Name}" style="width:100%;height:100%"></div> <div id="${item.Name}" style="width:100%;height:100%"></div>
</div>` </div>`
} else if(item.ControlType === 'barchart'){ } else if (item.ControlType === 'barchart') {
html += `<div class="commonModule" draggable="false" data-id="${index}" html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);"> style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);">
<div id="${item.Name}" style="width:100%;height:100%"></div> <div id="${item.Name}" style="width:100%;height:100%"></div>
</div>` </div>`
} else if(item.ControlType === 'linechart'){ } else if (item.ControlType === 'linechart') {
html += `<div class="commonModule" draggable="false" data-id="${index}" html += `<div class="commonModule" draggable="false" data-id="${index}"
style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);"> style="left: ${item.PropertyList.Left}px;top: ${item.PropertyList.Top}px; width: ${item.PropertyList.Width}px;height: ${item.PropertyList.Height}px;z-index: ${item.PropertyList.ZIndex};transform: rotate(${item.PropertyList.Rotate}deg);">
<div id="${item.Name}" style="width:100%;height:100%"></div> <div id="${item.Name}" style="width:100%;height:100%"></div>
</div>` </div>`
}
})
wrap.innerHTML = html
if (Common.BackSetting !== 'color') {
wrap.style.backgroundImage = `url(${Common.BackImg})`
wrap.style.backgroundRepeat = `norepear`
wrap.style.backgroundSize = `100% 100%`
} else {
wrap.style.backgroundColor = Common.BackColor
wrap.style.backgroundImage = ''
}
// $(wrap).css({
// width: Common.WrapWidth,
// height: Common.WrapWidth
// })
if (parseInt(Common.WrapWidth) >= 100) {
$(wrap).css({
'transform-origin': '0% 0%',
transform: `scale(${parseInt(Common.WrapWidth) * 0.01})`
})
} else {
$(wrap).css({
'transform-origin': 'unset',
transform: `scale(${parseInt(Common.WrapWidth) * 0.01})`
})
} }
$('.el-input').click(function (e) {
e.stopPropagation()
let inputLeft = $(this).offset().left //输入框的left
}) let inputTop = $(this).offset().top + 20 //输入框的top
wrap.innerHTML = html let inputHeight = $(this).outerHeight() //输入框的高度
if (Common.BackSetting !== 'color') { let inputWidth = $(this).outerWidth() //输入框宽度
wrap.style.backgroundImage = `url(${Common.BackImg})`
wrap.style.backgroundRepeat = `norepear`
wrap.style.backgroundSize = `100% 100%`
} else {
wrap.style.backgroundColor = Common.BackColor
wrap.style.backgroundImage = ''
}
// $(wrap).css({
// width: Common.WrapWidth,
// height: Common.WrapWidth
// })
if (parseInt(Common.WrapWidth) >= 100) {
$(wrap).css({
'transform-origin': '0% 0%',
'transform': `scale(${parseInt(Common.WrapWidth) * 0.01})`
})
} else {
$(wrap).css({
'transform-origin': 'unset',
'transform': `scale(${parseInt(Common.WrapWidth) * 0.01})`
})
}
$(".el-input").click(function (e){
e.stopPropagation();
let inputLeft = $(this).offset().left;//输入框的left
let inputTop = $(this).offset().top + 20;//输入框的top
let inputHeight = $(this).outerHeight();//输入框的高度
let inputWidth = $(this).outerWidth();//输入框宽度
//判断是否存在下拉框select-drop-down //判断是否存在下拉框select-drop-down
if(!$(".select-drop-down").length){ if (!$('.select-drop-down').length) {
//不存在新增 //不存在新增
$("body").append(`<div class="select-drop-down" style="left: ${inputLeft}px;top: ${inputTop + inputHeight-10}px;width: ${inputWidth}px;"><ul class="drop-down-list"></ul></div>`); $('body').append(
}else{ `<div class="select-drop-down" style="left: ${inputLeft}px;top: ${
inputTop + inputHeight - 10
}px;width: ${inputWidth}px;"><ul class="drop-down-list"></ul></div>`
)
} else {
//存在则清空旧内容 //存在则清空旧内容
$(".select-drop-down").css({"display":"block","left": inputLeft+"px","top": inputTop + inputHeight -10 +"px", "width": inputWidth+"px"}) $('.select-drop-down').css({
$(".drop-down-list>li").remove() display: 'block',
left: inputLeft + 'px',
top: inputTop + inputHeight - 10 + 'px',
width: inputWidth + 'px'
})
$('.drop-down-list>li').remove()
} }
// getList(1).then(res=>{ // getList(1).then(res=>{
// let data = res.data; // let data = res.data;
for (let i=1;i<=40;i++){ for (let i = 1; i <= 40; i++) {
$(".drop-down-list").append(`<li>${i*10+'%'}</li>`) $('.drop-down-list').append(`<li>${i * 10 + '%'}</li>`)
} }
// }).then(()=>{ // }).then(()=>{
// dropDownLoad(); // dropDownLoad();
// }) // })
}) })
if(a !== 'init'){ if (a !== 'init') {
$('.selected').removeClass('selected') $('.selected').removeClass('selected')
for(let i=0;i<$('.select-pass').find('li').length;i++){ for (let i = 0; i < $('.select-pass').find('li').length; i++) {
if($($('.select-pass').find('li')[i]).attr('name') == password){ if ($($('.select-pass').find('li')[i]).attr('name') == password) {
$($('.select-pass').find('li')[i]).attr('class', 'selected') $($('.select-pass').find('li')[i]).attr('class', 'selected')
} }
} }
// Controls.ControlList.forEach((item) => {
// item.PropertyList.Width = item.PropertyList.Width / (parseInt(password) / 100)
// item.PropertyList.Height = item.PropertyList.Height / (parseInt(password) / 100)
// })
$('.viewpass')[0].innerText = password
//注释Zoom
if (parseInt($('.viewpass')[0].innerText) >= 100) {
$(wrap).css({
'transform-origin': '0% 0%',
'transform': `scale(${(parseInt($('.viewpass')[0].innerText) * 0.01)})`
})
} else {
$(wrap).css({
'transform-origin': 'unset',
'transform': `scale(${(parseInt($('.viewpass')[0].innerText) * 0.01)})`
})
}
}
// wrap.style.background = Common.BackColor
}
setTimeout(()=>{
PieChartDataFun()
DashChartDataFun()
BarChartDataFun()
LineChartDataFun()
},20)
// Controls.ControlList.forEach((item) => {
// item.PropertyList.Width = item.PropertyList.Width / (parseInt(password) / 100)
// item.PropertyList.Height = item.PropertyList.Height / (parseInt(password) / 100)
// })
$('.viewpass')[0].innerText = password
//注释Zoom
if (parseInt($('.viewpass')[0].innerText) >= 100) {
$(wrap).css({
'transform-origin': '0% 0%',
transform: `scale(${parseInt($('.viewpass')[0].innerText) * 0.01})`
})
} else {
$(wrap).css({
'transform-origin': 'unset',
transform: `scale(${parseInt($('.viewpass')[0].innerText) * 0.01})`
})
}
}
// wrap.style.background = Common.BackColor
}
setTimeout(() => {
PieChartDataFun()
DashChartDataFun()
BarChartDataFun()
LineChartDataFun()
}, 20)
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment