Skip to content

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

feat: 迁移自动化构建流程

parent b2bb6f72
Hide whitespace changes
Inline Side-by-side
Showing with 3908 additions and 2577 deletions
README.md
View file @ 16c359b4
# visual-html <!--
可视化html页面 * @Author: 莫靓仔
* @description: 文件描述
* @Date: 2021-08-23 17:36:37
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:21:02
-->
## 本地 run 项目
```
yarn dev
```
## 切换环境
- 切换到开发环境
```
npm run set-d
```
- 切换到测试环境
```
npm run set-t
```
- 切换到预发布环境
```
npm run set-y
```
- 切换到正式环境（应该没啥用）
```
npm run set-p
```
## 发布
- 开发环境发布
```
npm run bd
```
- 测试环境发布
```
npm run bt
```
- 预发布环境发布
```
npm run by
```
## 打包
- 由于引入打包之前项目已经存在，用 webpack 配置比较坎坷，遂采用 gulp 简单打包一下，配置都在 gulpfile.js 中
- 默认生产 dist 目录，目录结构如下
```
dist
└─ bi
├─ index.html
├─ ...
```
## 压缩
- Mac 的压缩使用的是 compressing 插件，该插件支持 tar 和 gzip 格式，可以组合压缩成 Linux 系统的 tar.gz 格式。
- windows 的压缩使用 zip 格式（compressing 插件的压缩在 windows 解压之后会带一串路径在前边），公司的服务器安装了 zip 插件，可以使用 zip 格式的压缩包，压缩的过程在 config/zip.js，压缩的目录是 dist/bi。
## 关于 request 文件
- 现在项目使用的 axios 实例是由 browserify 编译 request.js 文件出来的，编译之后的文件名是 request_browserify.js
- 由于需要使用 require 引入环境配置（如果 api 地址），浏览器不支持 require 的写法，所以需要由 browserify 编译。
- 另外，问了兼容 browserify 的编译，需要在编译 request 之前加入如下代码。现已处理，无需再修改。
```
if(!window.request) {
window.request = request
}
```
## 关于本地直连服务器
请查看语雀文档
config/config.json
View file @ 16c359b4
{"apiUrl":"https://apidev.sycdev.com","baseUrl":"https://slmdev.sycdev.com","domain":"sycdev.com","name":"开发环境"} {"apiUrl":"https://api.sycdev.com","baseUrl":"https://slm.sycdev.com","domain":"sycdev.com","name":"测试环境"}
\ No newline at end of file \ No newline at end of file
dashboard.html
View file @ 16c359b4
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
<script src="./js/jquery-1.10.2.min.js"></script> <script src="./js/jquery-1.10.2.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./utils/request.js"></script> <script src="./utils/request_browserify.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="./js/moment.js"></script> <script src="./js/moment.js"></script>
<!-- --> <!-- -->
......
dashboard/index.html
View file @ 16c359b4
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<title>仪表盘配置</title>
<link rel="stylesheet" href="./global.css" />
<link rel="stylesheet" href="./libs/layui/css/layui.css" />
<head> <link rel="stylesheet" href="./styles/iconfont/iconfont.css" />
<meta charset="UTF-8"> <link rel="stylesheet" href="./libs/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="./pagination.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index.css" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <style type="text/css">
<title>仪表盘配置</title> /* @media screen and (max-width: 1100px) {
<link rel="stylesheet" href="./global.css">
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./styles/iconfont/iconfont.css">
<link rel="stylesheet" href="./libs/zTree_v3/css/zTreeStyle/zTreeStyle.css">
<link rel="stylesheet" href="./pagination.css">
<link rel="stylesheet" href="./index.css">
<style type="text/css">
/* @media screen and (max-width: 1100px) {
.z-contentBoxRight-table { .z-contentBoxRight-table {
height: calc(100% - 220px); height: calc(100% - 220px);
width: 100%; width: 100%;
...@@ -23,243 +22,391 @@ ...@@ -23,243 +22,391 @@
} }
} */ } */
</style> </style>
</head> </head>
<body> <body>
<div class="z-contentBox"> <div class="z-contentBox">
<div class="z-contentBoxLeft"> <div class="z-contentBoxLeft">
<div class="g-search"> <div class="g-search">
<input class="g-search-input" type="text" onblur="searchGroupTree(event)" placeholder="请输入分组名称"> <input
<i></i> class="g-search-input"
type="text"
onblur="searchGroupTree(event)"
placeholder="请输入分组名称"
/>
<i></i>
</div>
<div class="tree nicescroll-slideBar">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div> </div>
<div class="tree nicescroll-slideBar"> <div class="z-contentBoxRight">
<ul id="treeDemo" class="ztree"></ul> <div class="z-contentBoxRightBox">
<div class="z-contentBoxRight-top">
<ul class="clearfix">
<li class="g-left revisionTime">
<div class="layui-inline">
<label class="time">最近修改时间</label>
<div class="layui-input-inline divmagin">
<i class="icon iconfont iconriqixuanze"></i>
<input
type="text"
class="layui-input"
autocomplete="off"
id="revisionTime"
placeholder=" 开始时间 至 结束时间 "
/>
</div>
</div>
</li>
<li class="g-left clearfix">
<label class="g-left state">状态</label>
<div class="layui-form g-left statediv" lay-filter="myDiv">
<select name="" id="mySelect" lay-filter="mySelect">
<option value="" selected>全部</option>
<option value="published">已发布</option>
<option value="wait_published">未发布</option>
<option></option>
</select>
</div>
</li>
<li class="g-left">
<input
class="g-search-input crname"
type="text"
id="userName"
autocomplete="off"
placeholder="请输入名称、创建者、修改人"
/>
</li>
<li class="g-left">
<button
type="button"
id="searchBtn"
data-type="reload"
onclick="searchTableData()"
class="layui-btn layui-btn-normal layui-btn-sm search"
>
<i class="icon iconfont iconsousuo"></i>查询
</button>
</li>
<li class="g-left">
<button
type="button"
id="resetBtn"
class="layui-btn layui-btn-normal layui-btn-sm reset"
>
<i class="icon iconfont iconzhongzhi"></i>重置
</button>
</li>
<li
class="g-left checkPer"
id="addDashboardBtnLi"
data-permission="bi_configuration_dashboard_add"
>
<button
data-method="offset"
data-type="auto"
id="addDashboard"
class="layui-btn layui-btn-normal layui-btn-sm add"
>
<i class="icon iconfont iconxinzeng"></i>新增看板
</button>
</li>
<li id="batchReleaseBtn" class="g-left checkPer" data-permission="bi_configuration_release">
<button
type="button"
class="layui-btn layui-btn-normal layui-btn-sm all"
data-type="getCheckData"
id="batchRelease"
>
<i class="icon iconfont iconxinzeng"></i>批量发布
</button>
</li>
</ul>
</div>
<div id="z-contentBoxRight-table" class="z-contentBoxRight-table">
<table class="layui-hide" id="myTable" lay-filter="test"></table>
</div>
<!-- 分页 -->
<div class="popup-pagination popup-pagination1" id="popup-pagination"></div>
</div>
</div> </div>
</div> </div>
<div class="z-contentBoxRight"> <div class="addDashboardContent nicescroll-add" id="addDashboardContent" style="display: none">
<div class="z-contentBoxRightBox"> <div class="layui-form-item">
<div class="z-contentBoxRight-top"> <label class="layui-form-label name"><i class="g-star">*</i>名称：</label>
<ul class="clearfix"> <div class="layui-input-block">
<li class="g-left revisionTime"> <input
<div class="layui-inline"> type="text"
<label class="time">最近修改时间</label> maxlength="30"
<div class="layui-input-inline divmagin"> name="title"
<i class="icon iconfont iconriqixuanze"></i> required
<input type="text" class="layui-input" autocomplete="off" id="revisionTime" lay-verify="required"
placeholder=" 开始时间 至 结束时间 "> placeholder="请输入名称"
</div> autocomplete="off"
</div> class="layui-input"
</li> id="addDashboardName"
<li class="g-left clearfix"> />
<label class="g-left state">状态</label> </div>
<div class="layui-form g-left statediv" lay-filter="myDiv"> </div>
<select name="" id="mySelect" lay-filter="mySelect"> <div class="layui-form-item clearfix" style="margin-bottom: 0; position: relative">
<option value="" selected>全部</option> <div class="g-left position" style="padding: 9px 15px"><i class="g-star">*</i>位置：</div>
<option value="published">已发布</option> <div class="layui-form g-left" lay-filter="myDiv">
<option value="wait_published">未发布 <ul class="list">
<option> <li class="title">
</select> <input
</div> id="citySel"
</li> class="citySel"
<li class="g-left"> placeholder="请选择位置"
<input class="g-search-input crname" type="text" id="userName" autocomplete="off" type="text"
placeholder="请输入名称、创建者、修改人"> readonly
</li> value=""
<li class="g-left"> id="menuBtn"
<button type="button" id="searchBtn" data-type="reload" onclick="searchTableData()" href="#"
class="layui-btn layui-btn-normal layui-btn-sm search"><i onclick="showMenu(); return false;"
class="icon iconfont iconsousuo"></i>查询</button> />
</li>
<li class="g-left">
<button type="button" id="resetBtn" class="layui-btn layui-btn-normal layui-btn-sm reset"><i
class="icon iconfont iconzhongzhi"></i>重置</button>
</li>
<li class="g-left checkPer" id="addDashboardBtnLi"
data-permission="bi_configuration_dashboard_add">
<button data-method="offset" data-type="auto" id="addDashboard"
class="layui-btn layui-btn-normal layui-btn-sm add"><i
class="icon iconfont iconxinzeng "></i>新增看板</button>
</li>
<li id="batchReleaseBtn" class="g-left checkPer" data-permission="bi_configuration_release">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm all"
data-type="getCheckData" id="batchRelease"><i
class="icon iconfont iconxinzeng"></i>批量发布</button>
</li> </li>
</ul> </ul>
</div> </div>
<div id="z-contentBoxRight-table" class="z-contentBoxRight-table"> <div
<table class="layui-hide" id="myTable" lay-filter="test"></table> id="menuContent"
</div> class="menuContent z-contentBoxLeft treeDemoAddNicescroll"
<!-- 分页 --> style="
<div class="popup-pagination popup-pagination1" id="popup-pagination"> display: none;
height: 220px;
position: absolute;
border: 1px solid #eee;
margin-left: 100px;
top: 40px;
left: 0;
background: #fff;
"
>
<ul id="treeDemoAdd" class="ztree"></ul>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="addDashboardContent nicescroll-add" id="Z-addFenZU" style="display: none">
<div class="addDashboardContent nicescroll-add" id="addDashboardContent" style="display: none;"> <div class="layui-form-item">
<div class="layui-form-item"> <label class="layui-form-label name"><i class="g-star">*</i>名称：</label>
<label class="layui-form-label name"><i class="g-star">*</i>名称：</label> <div class="layui-input-block">
<div class="layui-input-block"> <input
<input type="text" maxlength="30" name="title" required lay-verify="required" placeholder="请输入名称" type="text"
autocomplete="off" class="layui-input" id="addDashboardName"> maxlength="30"
</div> name="title"
</div> required
<div class="layui-form-item clearfix" style="margin-bottom: 0;position: relative;"> lay-verify="required"
<div class="g-left position" style="padding: 9px 15px;"><i class="g-star">*</i>位置：</div> placeholder="请输入名称"
<div class="layui-form g-left" lay-filter="myDiv"> autocomplete="off"
<ul class="list"> class="layui-input"
<li class="title"><input id="citySel" class="citySel" placeholder="请选择位置" type="text" readonly id="fenzuName"
value="" id="menuBtn" href="#" onclick="showMenu(); return false;" /></li> />
</ul> </div>
</div>
<div id="menuContent" class="menuContent z-contentBoxLeft treeDemoAddNicescroll"
style="display:none;height: 220px; position: absolute;border: 1px solid #eee;margin-left: 100px;top:40px;left: 0;background: #fff;">
<ul id="treeDemoAdd" class="ztree"></ul>
</div>
</div>
</div>
<div class="addDashboardContent nicescroll-add" id="Z-addFenZU" style="display: none;">
<div class="layui-form-item">
<label class="layui-form-label name"><i class="g-star">*</i>名称：</label>
<div class="layui-input-block">
<input type="text" maxlength="30" name="title" required lay-verify="required" placeholder="请输入名称"
autocomplete="off" class="layui-input" id="fenzuName">
</div>
</div>
<div class="layui-form-item clearfix" style="margin-bottom: 0;position: relative;">
<div class="g-left position"><i class="g-star">*</i>上级分组：</div>
<div class="layui-form g-left" lay-filter="myDiv">
<ul class="list">
<li class="title"><input id="fenzuPosition" class="citySel" placeholder="请选择位置" type="text" readonly
value="" href="#" onclick="showMenuFenzu(); return false;" /></li>
</ul>
</div>
<div id="menuContentFenzu" class="menuContent z-contentBoxLeft treeDemoAddNicescroll attr-wrap"
style="display:none;height: 220px;margin-left: 100px;position: absolute;background: #fff;top: 40px;z-index: 2;border: 1px solid rgb(238, 238, 238);left: 10px;width: 310px">
<ul id="treeDemoAddFenzu" class="ztree"></ul>
</div> </div>
</div> <div class="layui-form-item clearfix" style="margin-bottom: 0; position: relative">
<div class="g-left position"><i class="g-star">*</i>上级分组：</div>
</div> <div class="layui-form g-left" lay-filter="myDiv">
<!-- 属性表单div --> <ul class="list">
<form class="layui-form z-attribute" action="" id="attribute" style="display: none;" lay-filter="attribute"> <li class="title">
<div class="layui-form-item form-block"> <input
<label class="layui-form-label"><i class="g-star">*</i>名称：</label> id="fenzuPosition"
<div class="layui-input-block"> class="citySel"
<input type="text" maxlength="30" name="title" required lay-verify="required" placeholder="请输入名称" placeholder="请选择位置"
autocomplete="off" class="layui-input" id="attrName"> type="text"
readonly
value=""
href="#"
onclick="showMenuFenzu(); return false;"
/>
</li>
</ul>
</div>
<div
id="menuContentFenzu"
class="menuContent z-contentBoxLeft treeDemoAddNicescroll attr-wrap"
style="
display: none;
height: 220px;
margin-left: 100px;
position: absolute;
background: #fff;
top: 40px;
z-index: 2;
border: 1px solid rgb(238, 238, 238);
left: 10px;
width: 310px;
"
>
<ul id="treeDemoAddFenzu" class="ztree"></ul>
</div>
</div> </div>
</div> </div>
<div class="layui-form-item form-block clearfix" style="margin-bottom: 0;position: relative;"> <!-- 属性表单div -->
<label class="layui-form-label"><i class="g-star">*</i>位置：</label> <form class="layui-form z-attribute" action="" id="attribute" style="display: none" lay-filter="attribute">
<div class="layui-form g-left" lay-filter="myDiv"> <div class="layui-form-item form-block">
<ul class="list"> <label class="layui-form-label"><i class="g-star">*</i>名称：</label>
<li class="title"> <div class="layui-input-block">
<input id="attrPosition" class="attr-pos" placeholder="请选择位置" type="text" readonly value="" <input
href="#" onclick="openTreeAttr(); return false;" /> type="text"
</li> maxlength="30"
</ul> name="title"
required
lay-verify="required"
placeholder="请输入名称"
autocomplete="off"
class="layui-input"
id="attrName"
/>
</div>
</div> </div>
<div id="attrwrap" class="menuContent z-contentBoxLeft treeDemoAddNicescroll attr-wrap" <div class="layui-form-item form-block clearfix" style="margin-bottom: 0; position: relative">
style="display:none;height: 250px;position: absolute;background: #fff;top: 40px;z-index: 2;border: 1px solid rgb(238, 238, 238);"> <label class="layui-form-label"><i class="g-star">*</i>位置：</label>
<ul id="treeAttr" class="ztree"></ul> <div class="layui-form g-left" lay-filter="myDiv">
<ul class="list">
<li class="title">
<input
id="attrPosition"
class="attr-pos"
placeholder="请选择位置"
type="text"
readonly
value=""
href="#"
onclick="openTreeAttr(); return false;"
/>
</li>
</ul>
</div>
<div
id="attrwrap"
class="menuContent z-contentBoxLeft treeDemoAddNicescroll attr-wrap"
style="
display: none;
height: 250px;
position: absolute;
background: #fff;
top: 40px;
z-index: 2;
border: 1px solid rgb(238, 238, 238);
"
>
<ul id="treeAttr" class="ztree"></ul>
</div>
</div> </div>
</div>
<div class="layui-form-item safe">
<label class="layui-form-label">安全策略：</label>
<div class="layui-form-item safe"> <div class="layui-input-block clearfix safeDiv">
<label class="layui-form-label">安全策略：</label> <div class="g-left intro" id="copeConfigureFrom"><i></i><span>从其他仪表板复制配置</span></div>
<div class="layui-input-block clearfix safeDiv"> <div class="g-left intro" id="copeConfigureTo"><i></i><span>将配置复制给其他仪表板</span></div>
<div class="g-left intro" id="copeConfigureFrom"><i></i><span>从其他仪表板复制配置</span></div> </div>
<div class="g-left intro" id="copeConfigureTo"><i></i><span>将配置复制给其他仪表板</span></div>
</div> </div>
</div> <div class="layui-form-item" id="layui-form-margin9">
<div class="layui-form-item" id="layui-form-margin9"> <label class="layui-form-label"><i class="g-star">*</i>访问权限：</label>
<label class="layui-form-label"><i class="g-star">*</i>访问权限：</label> <div class="layui-input-block">
<div class="layui-input-block"> <input type="radio" name="permission" value="public" title="公开" lay-filter="policyRadio" />
<input type="radio" name="permission" value="public" title="公开" lay-filter="policyRadio"> <input type="radio" name="permission" value="custom" title="自定义" lay-filter="policyRadio" />
<input type="radio" name="permission" value="custom" title="自定义" lay-filter="policyRadio"> <input type="radio" name="permission" value="private" title="私有" lay-filter="policyRadio" />
<input type="radio" name="permission" value="private" title="私有" lay-filter="policyRadio"> </div>
</div> </div>
</div> <div class="layui-form-item" style="display: none; margin-bottom: 9px" id="z-selectDept">
<div class="layui-form-item" style="display: none;margin-bottom: 9px;" id="z-selectDept"> <label class="layui-form-label"></label>
<label class="layui-form-label"></label> <div class="layui-input-block">
<div class="layui-input-block"> <input
<input type="text" placeholder="请点击选择" autocomplete="off" class="layui-input" readonly type="text"
style="cursor: pointer;" id="z-selectDeptInp"> placeholder="请点击选择"
<i></i> autocomplete="off"
class="layui-input"
readonly
style="cursor: pointer"
id="z-selectDeptInp"
/>
<i></i>
</div>
</div> </div>
</div> <div class="layui-form-item layui-form-text">
<div class="layui-form-item layui-form-text"> <label class="layui-form-label">描述：</label>
<label class="layui-form-label">描述：</label> <div class="layui-input-block">
<div class="layui-input-block"> <textarea placeholder="请输入描述" class="layui-textarea" id="attribute-describeVal"></textarea>
<textarea placeholder="请输入描述" class="layui-textarea" id="attribute-describeVal"></textarea> </div>
</div> </div>
</div> <!-- <div class="layui-form-item">
<!-- <div class="layui-form-item">
<div class="layui-input-block"> <div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div> </div>
</div> --> </div> -->
</form> </form>
<div class="copeConfigureForm" style="display:none;"> <div class="copeConfigureForm" style="display: none">
<div class="copeConfigureForm-search"> <div class="copeConfigureForm-search">
<input id="cope-search-input" class="g-search-input" type="text" placeholder="请输入分组、仪表板名称"> <input id="cope-search-input" class="g-search-input" type="text" placeholder="请输入分组、仪表板名称" />
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="searchFromTree(event)">
onclick="searchFromTree(event)">搜索</button> 搜索
</div> </button>
<div class="z-contentBoxLeft treeDemoCopeFromScroll" style="height: 470px;width: 474px;"> </div>
<ul id="treeDemoCopeFrom" class="ztree"></ul> <div class="z-contentBoxLeft treeDemoCopeFromScroll" style="height: 470px; width: 474px">
</div> <ul id="treeDemoCopeFrom" class="ztree"></ul>
</div> </div>
<div class="copeConfigureTo1 copeConfigureTo" style="display:none;">
<div class="copeConfigureForm-search">
<input id="copeConfigureTo1-search-input" class="g-search-input" type="text" placeholder="请输入分组、仪表板名称">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
onclick="searchToTree(event)">搜索</button>
</div>
<div class="z-contentBoxLeft treeDemoCopetoScroll" style="height: 470px;width: 474px;">
<ul id="treeDemoCopeto" class="ztree"></ul>
</div> </div>
</div> <div class="copeConfigureTo1 copeConfigureTo" style="display: none">
<div class="z-selectDeptInp" style="display:none;"> <div class="copeConfigureForm-search">
<div class="treeSelectShow treeSelectShowScroll clearfix"> <input
<ul class="clearfix g-left" id="viewTpl"> id="copeConfigureTo1-search-input"
</ul> class="g-search-input"
<ul class="clearfix g-left" id="viewTpl2"> type="text"
</ul> placeholder="请输入分组、仪表板名称"
<ul class="clearfix g-left" id="viewTpl3"> />
</ul> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="searchToTree(event)">
搜索
</button>
</div>
<div class="z-contentBoxLeft treeDemoCopetoScroll" style="height: 470px; width: 474px">
<ul id="treeDemoCopeto" class="ztree"></ul>
</div>
</div> </div>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <div class="z-selectDeptInp" style="display: none">
<ul class="layui-tab-title"> <div class="treeSelectShow treeSelectShowScroll clearfix">
<li class="layui-this">部门</li> <ul class="clearfix g-left" id="viewTpl"></ul>
<li>职位</li> <ul class="clearfix g-left" id="viewTpl2"></ul>
<li>人员</li> <ul class="clearfix g-left" id="viewTpl3"></ul>
</ul> </div>
<div class="layui-tab-content z-contentBoxLeft"> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div class="layui-tab-item copeConfigureTo layui-show"> <ul class="layui-tab-title">
<div class="layui-tab-item-inpbox"> <li class="layui-this">部门</li>
<input type="text" onblur="searchDept(event)" id="input-Dept" autocomplete="off" <li>职位</li>
placeholder="搜索部门名称"> <li>人员</li>
<i class="icon iconfont iconsousuo"></i> </ul>
</div> <div class="layui-tab-content z-contentBoxLeft">
<div style="overflow: auto;height: 230px;"> <div class="layui-tab-item copeConfigureTo layui-show">
<ul id="treeDept" class="ztree" style="width: 98%"></ul> <div class="layui-tab-item-inpbox">
</div> <input
</div> type="text"
<div class="layui-tab-item"> onblur="searchDept(event)"
<div class="layui-tab-item-inpbox"> id="input-Dept"
<input type="text" onblur="searchJob(event)" id="input-job" autocomplete="off" autocomplete="off"
placeholder="搜索职位名称"> placeholder="搜索部门名称"
<i class="icon iconfont iconsousuo"></i> />
<i class="icon iconfont iconsousuo"></i>
</div>
<div style="overflow: auto; height: 230px">
<ul id="treeDept" class="ztree" style="width: 98%"></ul>
</div>
</div> </div>
<ul class="rank rankScroll" id="rankSelect"> <div class="layui-tab-item">
<!-- <li class="clearfix"> <div class="layui-tab-item-inpbox">
<input
type="text"
onblur="searchJob(event)"
id="input-job"
autocomplete="off"
placeholder="搜索职位名称"
/>
<i class="icon iconfont iconsousuo"></i>
</div>
<ul class="rank rankScroll" id="rankSelect">
<!-- <li class="clearfix">
<span class="g-left">销售主管1</span> <span class="g-left">销售主管1</span>
<i class="g-right"></i> <i class="g-right"></i>
</li> </li>
...@@ -275,21 +422,27 @@ ...@@ -275,21 +422,27 @@
<span class="g-left">销售主管4</span> <span class="g-left">销售主管4</span>
<i class="g-right"></i> <i class="g-right"></i>
</li> --> </li> -->
</ul> </ul>
</div> </div>
<div class="layui-tab-item treeDemoDeptOrpeo" style="width: 486px;position: relative;"> <div class="layui-tab-item treeDemoDeptOrpeo" style="width: 486px; position: relative">
<div class="g-line-right"></div> <div class="g-line-right"></div>
<div class="g-line-heng"></div> <div class="g-line-heng"></div>
<div class="clearfix"> <div class="clearfix">
<ul id="treeDemoDeptOrpeo" class="ztree g-left" style="width: 224px;height: 251px;"></ul> <ul id="treeDemoDeptOrpeo" class="ztree g-left" style="width: 224px; height: 251px"></ul>
<div class="g-left selectPeopleBox"> <div class="g-left selectPeopleBox">
<div class="layui-tab-item-inpbox"> <div class="layui-tab-item-inpbox">
<input type="text" onblur="searchName(event)" id="input-user" autocomplete="off" <input
placeholder="搜索用户名称" style="width: 205px;margin: 0;"> type="text"
<i class="icon iconfont iconsousuo" style="top: 10px;left: 9px;"></i> onblur="searchName(event)"
</div> id="input-user"
<ul class="selectPeople selectPeopleScroll" id="peopleSelect"> autocomplete="off"
<!-- <li class="clearfix"> placeholder="搜索用户名称"
style="width: 205px; margin: 0"
/>
<i class="icon iconfont iconsousuo" style="top: 10px; left: 9px"></i>
</div>
<ul class="selectPeople selectPeopleScroll" id="peopleSelect">
<!-- <li class="clearfix">
<i class="g-left"></i> <i class="g-left"></i>
<span class="g-left">李白1</span> <span class="g-left">李白1</span>
</li> </li>
...@@ -305,77 +458,96 @@ ...@@ -305,77 +458,96 @@
<i class="g-left"></i> <i class="g-left"></i>
<span class="g-left">李白4</span> <span class="g-left">李白4</span>
</li> --> </li> -->
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div
<div id="rMenu" class="checkPer" data-permission="bi_configuration_view" onmouseenter="handelEnter(event)" onmouseleave="handleLeave(event)" > id="rMenu"
<ul> class="checkPer"
<!-- <li id="m_add" onclick="addTreeNode();">添加子分组</li> data-permission="bi_configuration_view"
onmouseenter="handelEnter(event)"
onmouseleave="handleLeave(event)"
>
<ul>
<!-- <li id="m_add" onclick="addTreeNode();">添加子分组</li>
<li id="m_check" onclick="checkTreeNode(true);">编辑分组</li> <li id="m_check" onclick="checkTreeNode(true);">编辑分组</li>
<li id="m_del" onclick="removeTreeNode();">删除分组</li> --> <li id="m_del" onclick="removeTreeNode();">删除分组</li> -->
<li id="m_add_btn" class="checkPer" data-permission="bi_configuration_group_add"> <li id="m_add_btn" class="checkPer" data-permission="bi_configuration_group_add">
<div id="m_add">添加子分组</div> <div id="m_add">添加子分组</div>
</li> </li>
<li id="m_check_btn" class="checkPer" data-permission="bi_configuration_group_edit"> <li id="m_check_btn" class="checkPer" data-permission="bi_configuration_group_edit">
<div id="m_check"> 编辑分组</div> <div id="m_check">编辑分组</div>
</li> </li>
<li id="m_del_btn" class="checkPer" data-permission="bi_configuration_group_delete"> <li id="m_del_btn" class="checkPer" data-permission="bi_configuration_group_delete">
<div id="m_del" onclick="removeTreeNode();">删除分组</div> <div id="m_del" onclick="removeTreeNode();">删除分组</div>
</li> </li>
</ul> </ul>
</div> </div>
<script id="demoTpl" type="text/html"> <script id="demoTpl" type="text/html">
{{# layui.each(d, function(index, item){ }} {{# layui.each(d, function(index, item){ }}
<li class="g-left"> <li class="g-left">
<span>{{ item }}</span> <span>{{ item }}</span>
<i data-id="{{index}}"></i> <i data-id="{{index}}"></i>
</li> </li>
{{# }); }} {{# }); }}
</script> </script>
<script id="jobArrTpl" type="text/html"> <script id="jobArrTpl" type="text/html">
{{# layui.each(d, function(index, item){ }} {{# layui.each(d, function(index, item){ }}
<li class="g-left"> <li class="g-left">
<span>{{ item }}</span> <span>{{ item }}</span>
<i data-id="{{index}}"></i> <i data-id="{{index}}"></i>
</li> </li>
{{# }); }} {{# }); }}
</script> </script>
<script src="./jquery-3.5.1.min.js"></script> <script src="./jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 引入axiox --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> <!-- 引入axiox -->
<script src="./utils/request.js"></script> <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="./utils/common.js"></script> <script src="./libs/layui/layui.all.js"></script>
<script src="./libs/layui/layui.all.js"></script> <script src="../utils/request_browserify.js"></script>
<script src="./utils/pagination.js"></script> <!-- 引入分组组件 --> <script src="./utils/common.js"></script>
<script src="./libs/zTree_v3/js/jquery.ztree.all.min.js"></script> <script src="./utils/pagination.js"></script>
<!-- <script src="./libs/zTree_v3/js/jquery.ztree.core.min.js"></script> <!-- 引入分组组件 -->
<script src="./libs/zTree_v3/js/jquery.ztree.all.min.js"></script>
<!-- <script src="./libs/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script src="./libs/zTree_v3/js/jquery.ztree.exedit.js"></script> <script src="./libs/zTree_v3/js/jquery.ztree.exedit.js"></script>
<script src="./libs/zTree_v3/js/jquery.ztree.excheck.min.js"></script> --> <script src="./libs/zTree_v3/js/jquery.ztree.excheck.min.js"></script> -->
<script src="./libs/nicescroll/jquery.nicescroll.js"></script> <script src="./libs/nicescroll/jquery.nicescroll.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
<script type="text/html" id="barDemo"> <script type="text/html" id="barDemo">
{{# if(d.published == "未发布"){ }}
<a class="g-bluebtn g-edit checkPer" data-permission="bi_configuration_dashboard_edit" lay-event="edit"
{{# if(d.published == "未发布"){ }} >编辑</a
<a class="g-bluebtn g-edit checkPer" data-permission="bi_configuration_dashboard_edit" lay-event="edit">编辑</a> >
<a class="g-redbtn g-del checkPer" data-permission="bi_configuration_dashboard_delete" lay-event="del">删除</a> <a class="g-redbtn g-del checkPer" data-permission="bi_configuration_dashboard_delete" lay-event="del"
<a class="g-bluebtn g-release checkPer" data-permission="bi_configuration_release" lay-event="release">发布</a> >删除</a
<a class="g-bluebtn g-attribute checkPer" data-permission="bi_configuration_attribute" lay-event="attribute">属性</a> >
{{# }if(d.published == "已发布") { }} <a class="g-bluebtn g-release checkPer" data-permission="bi_configuration_release" lay-event="release"
<a class="g-bluebtn g-edit checkPer" data-permission="bi_configuration_dashboard_edit" lay-event="edit">编辑</a> >发布</a
<a class="g-redbtn g-del checkPer" data-permission="bi_configuration_dashboard_delete" lay-event="del">删除</a> >
<a class="g-bluebtn g-release checkPer" data-permission="bi_configuration_release" lay-event="offline">下线</a> <a class="g-bluebtn g-attribute checkPer" data-permission="bi_configuration_attribute" lay-event="attribute"
<a class="g-bluebtn g-attribute checkPer" data-permission="bi_configuration_attribute" lay-event="attribute">属性</a> >属性</a
{{# } }} >
</script> {{# }if(d.published == "已发布") { }}
<a class="g-bluebtn g-edit checkPer" data-permission="bi_configuration_dashboard_edit" lay-event="edit"
>编辑</a
</body> >
<a class="g-redbtn g-del checkPer" data-permission="bi_configuration_dashboard_delete" lay-event="del"
</html> >删除</a
\ No newline at end of file >
<a class="g-bluebtn g-release checkPer" data-permission="bi_configuration_release" lay-event="offline"
>下线</a
>
<a class="g-bluebtn g-attribute checkPer" data-permission="bi_configuration_attribute" lay-event="attribute"
>属性</a
>
{{# } }}
</script>
</body>
</html>
dashboard/utils/common.js
View file @ 16c359b4
/*
* @Author: 莫靓仔
* @description: 文件描述
* @Date: 2021-09-14 17:49:54
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:03:37
*/
// 防抖 // 防抖
function debounce (fn, delay) { function debounce(fn, delay) {
var time = delay || 1000 var time = delay || 1000
var timer var timer
return function () { return function () {
var th = this var th = this
var args = arguments var args = arguments
if (timer) { if (timer) {
clearTimeout(timer) clearTimeout(timer)
}
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, time)
} }
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, time)
}
} }
// 节流 // 节流
function throttle (fn, interval) { function throttle(fn, interval) {
var last var last
var timer var timer
var time = interval || 2000 var time = interval || 2000
return function () { return function () {
var th = this var th = this
var args = arguments var args = arguments
var now = +new Date() var now = +new Date()
if (last && now - last < time) { if (last && now - last < time) {
clearTimeout(timer) clearTimeout(timer)
timer = setTimeout(function () { timer = setTimeout(function () {
last = now last = now
fn.apply(th, args) fn.apply(th, args)
}, time) }, time)
} else { } else {
last = now last = now
fn.apply(th, args) fn.apply(th, args)
}
} }
} }
}
\ No newline at end of file // 弹窗
var appTips = {
successMsg: function (message, style) {
var css = {
skin: 'layui-msg-success-style',
offset: '20px'
}
css = $.extend(css, style)
layer.msg(message, css)
},
warningMsg: function (message, style) {
var css = {
skin: 'layui-msg-warning-style',
offset: '20px'
}
css = $.extend(css, style)
layer.msg(message, css)
},
tipsMsg: function (message, style) {
var css = {
skin: 'layui-msg-tips-style',
offset: '20px'
}
css = $.extend(css, style)
layer.msg(message, css)
},
errorMsg: function (message, style) {
var css = {
skin: 'layui-msg-error-style',
offset: '20px'
}
css = $.extend(css, style)
layer.msg(message, css)
},
alert: function () {
layer.alert()
}
}
index.html
View file @ 16c359b4
...@@ -8,15 +8,7 @@ ...@@ -8,15 +8,7 @@
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>BI系统</title> <title>BI系统</title>
<script src="./js/watcher.js"></script> <script src="./js/watcher.js"></script>
<script> <script src="./js/domainSetting.js"></script>
// 离开页面保存功能代码(移动至此处)
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
</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">
...@@ -256,11 +248,11 @@ ...@@ -256,11 +248,11 @@
onchange="getFlag(this[selectedIndex].value)" placeholder="请选择"> onchange="getFlag(this[selectedIndex].value)" placeholder="请选择">
<option value=">">></option> <option value=">">></option>
<option value="=">=</option> <option value="=">=</option>
<option value="<"> <option value="&lt;">
<< /option> &lt;</option>
<option value=">=">>=</option> <option value=">=">>=</option>
<option value="<="> <option value="&lt;=">
<=< /option> &lt;=</option>
</select> </select>
</div> </div>
<div class="form-item"> <div class="form-item">
...@@ -519,7 +511,7 @@ ...@@ -519,7 +511,7 @@
<!-- 引入axiox --> <!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./utils/request.js"></script> <script src="./utils/request_browserify.js"></script>
<script src="./js/color.js"></script> <script src="./js/color.js"></script>
<script type="text/javascript" src="./js/data.js"></script> <script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/dropdown.js"></script> <script type="text/javascript" src="./js/dropdown.js"></script>
...@@ -2347,11 +2339,6 @@ ...@@ -2347,11 +2339,6 @@
canvasWrap.addEventListener('drop', async function (event) { canvasWrap.addEventListener('drop', async function (event) {
$("#saveBtnTips").show() $("#saveBtnTips").show()
// $(".details").show() // $(".details").show()
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
buttonid = '' buttonid = ''
// leg初始化之后没拖动一个元素下来就+1,此值会一直++, 防止元素名称重复 // leg初始化之后没拖动一个元素下来就+1,此值会一直++, 防止元素名称重复
......
js/data.js
View file @ 16c359b4
...@@ -9,12 +9,6 @@ var fd = null ...@@ -9,12 +9,6 @@ var fd = null
var appId = '' //appId var appId = '' //appId
appId = getParams('appId', window.location.href) appId = getParams('appId', window.location.href)
// // 离开页面保存功能代码(移动至此处)
// if (window.location.host.indexOf('127.0.0') === -1) {
// // 测试 && 开发：sycdev.com
// // 正式： shengyc.com
// // document.domain = 'shengyc.com' || '';
// }
window.addEventListener('message', goToBi, false) window.addEventListener('message', goToBi, false)
function goToBi(event) { function goToBi(event) {
......
js/domainSetting.js 0 → 100644
View file @ 16c359b4
/*
* @Author: 莫靓仔
* @description: 设置domain
* @Date: 2021-09-02 15:36:23
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-02 16:37:03
*/
if (window.location.host.indexOf('shengyc.com') > -1) {
document.domain = 'shengyc.com'
}
if (window.location.host.indexOf('sycdev.com') > -1) {
document.domain = 'sycdev.com'
}
js/rightStyle.js
View file @ 16c359b4
...@@ -29,11 +29,6 @@ function choice(type, index, refresh) { ...@@ -29,11 +29,6 @@ function choice(type, index, refresh) {
$('#chart-list').css('display', 'block') $('#chart-list').css('display', 'block')
showIframe(Controls.ControlList[index].ControlType) showIframe(Controls.ControlList[index].ControlType)
} }
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
} }
} }
......
package.json
View file @ 16c359b4
{ {
"name": "bi", "name": "bi",
"version": "1.0.0", "version": "1.0.0",
"description": "", "scripts": {
"main": "index.js", "test": "echo \"Error: no test specified\" && exit 1",
"scripts": { "dev": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1" "build": "webpack -p --progress --mode production --config webpack.config.js",
}, "bd": "npm run set-d && gulp && node ./config/zip.js && npm run scp-d",
"author": "", "bt": "npm run set-t && gulp && node ./config/zip.js && npm run scp-t",
"license": "ISC" "by": "npm run set-y && gulp && node ./config/zip.js && npm run scp-y",
} "scp-d": "cross-env NODE_ENV=develop node ./config",
"scp-t": "cross-env NODE_ENV=test node ./config",
"scp-y": "cross-env NODE_ENV=pre-release node ./config",
"zip": "node ./config/zip.js",
"set-d": "node ./config/changeConfig.js dev && npm run br",
"set-t": "node ./config/changeConfig.js test && npm run br",
"set-y": "node ./config/changeConfig.js pre && npm run br",
"set-p": "node ./config/changeConfig.js prod && npm run br",
"browserify_request": "browserify ./utils/request.js > utils/request_browserify.js",
"br": "npm run browserify_request"
},
"devDependencies": {
"css-loader": "^5.2.7",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^6.2.0",
"gulp-htmlmin": "^5.0.1",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.2",
"html-webpack-plugin": "^4.5.2",
"jquery": "^3.6.0",
"less-loader": "^4.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"@babel/core": "^7.15.0",
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/runtime": "^7.15.3",
"browserify": "^17.0.0",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"compressing": "^1.5.1",
"cross-env": "^7.0.3",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"jszip": "^3.7.1",
"scp2": "0.5.0",
"ssh2-sftp-client": "6.0.1",
"webpack-dev-server": "^3.11.2"
}
}
utils/request.js
View file @ 16c359b4
// // 配置axios // // 配置axios
let configInfo = require('../config/config.json')
const request = axios.create({ const request = axios.create({
// 开发环境： https://apidev.sycdev.com // 开发环境： https://apidev.sycdev.com
// 测试环境： https://api.sycdev.com 登录界面 https://slm.sycdev.com/#/login // 测试环境： https://api.sycdev.com 登录界面 https://slm.sycdev.com/#/login
/* 1.1 */ /* 1.1 */
// 开发环境： https://apidev-alpha.sycdev.com // 开发环境： https://apidev-alpha.sycdev.com
// 测试环境： https://api-alpha.sycdev.com 登录界面 https://slm.sycdev.com/#/login // 测试环境： https://api-alpha.sycdev.com 登录界面 https://slm.sycdev.com/#/login
// 正式环境： https://slmapi.shengyc.com 登录界面 https://slm.shengyc.com/#/login // 正式环境： https://slmapi.shengyc.com 登录界面 https://slm.shengyc.com/#/login
// 预发布:：https://apipre.sycdev.com // 预发布:：https://apipre.sycdev.com
baseURL: 'https://slmapi.shengyc.com', // url = base url + request url baseURL: configInfo.apiUrl, // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests withCredentials: true, // send cookies when cross-domain requests
timeout: 900000 // request timeout timeout: 900000 // request timeout
}) })
let url = 'https://slm.shengyc.com/#/login' let url = `${configInfo.baseUrl}/#/login`
// // request interceptor // // request interceptor
request.interceptors.request.use( request.interceptors.request.use(
config => { config => {
// do something before request is sent // do something before request is sent
// if (store.getters.token) { // if (store.getters.token) {
// // let each request carry token // // let each request carry token
// // ['X-Token'] is a custom headers key // // ['X-Token'] is a custom headers key
// // please modify it according to the actual situation // // please modify it according to the actual situation
// config.headers['X-Token'] = getToken() // config.headers['X-Token'] = getToken()
// config.headers.common['Authorization'] = 'Bearer ' + getToken() // config.headers.common['Authorization'] = 'Bearer ' + getToken()
// } // }
// startLoad() // startLoad()
if (localStorage.getItem('token')) { if (localStorage.getItem('token')) {
config.headers['X-Token'] = localStorage.getItem('token') config.headers['X-Token'] = localStorage.getItem('token')
// config.headers.common['Authorization'] = localStorage.getItem('token') // config.headers.common['Authorization'] = localStorage.getItem('token')
config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token') config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
config.headers.common['TENANT-ID'] = localStorage.getItem('tenantId') config.headers.common['TENANT-ID'] = localStorage.getItem('tenantId')
config.headers.common['VERSION'] = 'V1' config.headers.common['VERSION'] = 'V1'
return config return config
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
} }
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
) )
// response interceptor // response interceptor
request.interceptors.response.use( request.interceptors.response.use(
/** /**
* If you want to get http information such as headers or status * If you want to get http information such as headers or status
* Please return response => response * Please return response => response
*/ */
/** /**
* Determine the request status by custom code * Determine the request status by custom code
* Here is just an example * Here is just an example
* You can also judge the status by HTTP Status Code * You can also judge the status by HTTP Status Code
*/ */
response => { response => {
// response code=200 // response code=200
// const res = response.data // const res = response.data
return response return response
}, },
response => { response => {
// response code!=200 // response code!=200
if (response.response === undefined) { if (response.response === undefined) {
// Message({ // Message({
// message: '网络异常', // message: '网络异常',
// type: 'error', // type: 'error',
// duration: 3 * 1000 // duration: 3 * 1000
// }) // })
appTips.errorMsg('网络异常'); appTips.errorMsg('网络异常')
return Promise.reject('error') return Promise.reject('error')
} }
if (response.response.status === 401 || response.response.status === 403) { if (response.response.status === 401 || response.response.status === 403) {
if (response.response.status === 401) { if (response.response.status === 401) {
// Message({ // Message({
// message: '对不起，您未登陆 或 页面已过期，请重新登陆！', // message: '对不起，您未登陆 或 页面已过期，请重新登陆！',
// type: 'error', // type: 'error',
// duration: 3 * 1000 // duration: 3 * 1000
// }) // })
window.location.href(url) // window.location.href = url
appTips.errorMsg('对不起，您未登陆 或 页面已过期，请重新登陆！'); appTips.errorMsg('对不起，您未登陆 或 页面已过期，请重新登陆！')
return Promise.reject('error') return Promise.reject('error')
} }
if (response.response.status === 403) { if (response.response.status === 403) {
// Message({ // Message({
// message: '对不起，您没有该权限，请联系管理员！', // message: '对不起，您没有该权限，请联系管理员！',
// type: 'error', // type: 'error',
// duration: 3 * 1000 // duration: 3 * 1000
// }) // })
appTips.errorMsg('对不起，您没有该权限，请联系管理员！'); appTips.errorMsg('对不起，您没有该权限，请联系管理员！')
return Promise.reject('error') return Promise.reject('error')
} }
} else { } else {
if (response.response.status !== 200) { if (response.response.status !== 200) {
// Message({
// message: '对不起，程序错误，请联系管理员',
// type: 'error',
// duration: 3 * 1000
// })
appTips.errorMsg('对不起，程序错误，请联系管理员')
}
}
},
error => {
console.log('err' + error) // for debug
// Message({ // Message({
// message: '对不起，程序错误，请联系管理员', // message: error.message,
// type: 'error', // type: 'error',
// duration: 3 * 1000 // duration: 5 * 1000
// }) // })
appTips.errorMsg('对不起，程序错误，请联系管理员'); appTips.errorMsg(error.message)
} return Promise.reject(error)
} }
}, )
error => {
console.log('err' + error) // for debug // 兼容本文件通过browserify编译之后无法获取到request的问题
// Message({ if (!window.request) {
// message: error.message, window.request = request
// type: 'error', }
// duration: 5 * 1000
// })
appTips.errorMsg(error.message);
return Promise.reject(error)
}
)
\ No newline at end of file
utils/request_browserify.js 0 → 100644
View file @ 16c359b4
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
module.exports={"apiUrl":"https://api.sycdev.com","baseUrl":"https://slm.sycdev.com","domain":"sycdev.com","name":"测试环境"}
},{}],2:[function(require,module,exports){
// // 配置axios
let configInfo = require('../config/config.json')
const request = axios.create({
// 开发环境： https://apidev.sycdev.com
// 测试环境： https://api.sycdev.com 登录界面 https://slm.sycdev.com/#/login
/* 1.1 */
// 开发环境： https://apidev-alpha.sycdev.com
// 测试环境： https://api-alpha.sycdev.com 登录界面 https://slm.sycdev.com/#/login
// 正式环境： https://slmapi.shengyc.com 登录界面 https://slm.shengyc.com/#/login
// 预发布:：https://apipre.sycdev.com
baseURL: configInfo.apiUrl, // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 900000 // request timeout
})
let url = `${configInfo.baseUrl}/#/login`
// // request interceptor
request.interceptors.request.use(
config => {
// do something before request is sent
// if (store.getters.token) {
// // let each request carry token
// // ['X-Token'] is a custom headers key
// // please modify it according to the actual situation
// config.headers['X-Token'] = getToken()
// config.headers.common['Authorization'] = 'Bearer ' + getToken()
// }
// startLoad()
if (localStorage.getItem('token')) {
config.headers['X-Token'] = localStorage.getItem('token')
// config.headers.common['Authorization'] = localStorage.getItem('token')
config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
config.headers.common['TENANT-ID'] = localStorage.getItem('tenantId')
config.headers.common['VERSION'] = 'V1'
return config
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
request.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
// response code=200
// const res = response.data
return response
},
response => {
// response code!=200
if (response.response === undefined) {
// Message({
// message: '网络异常',
// type: 'error',
// duration: 3 * 1000
// })
appTips.errorMsg('网络异常')
return Promise.reject('error')
}
if (response.response.status === 401 || response.response.status === 403) {
if (response.response.status === 401) {
// Message({
// message: '对不起，您未登陆 或 页面已过期，请重新登陆！',
// type: 'error',
// duration: 3 * 1000
// })
// window.location.href = url
appTips.errorMsg('对不起，您未登陆 或 页面已过期，请重新登陆！')
return Promise.reject('error')
}
if (response.response.status === 403) {
// Message({
// message: '对不起，您没有该权限，请联系管理员！',
// type: 'error',
// duration: 3 * 1000
// })
appTips.errorMsg('对不起，您没有该权限，请联系管理员！')
return Promise.reject('error')
}
} else {
if (response.response.status !== 200) {
// Message({
// message: '对不起，程序错误，请联系管理员',
// type: 'error',
// duration: 3 * 1000
// })
appTips.errorMsg('对不起，程序错误，请联系管理员')
}
}
},
error => {
console.log('err' + error) // for debug
// Message({
// message: error.message,
// type: 'error',
// duration: 5 * 1000
// })
appTips.errorMsg(error.message)
return Promise.reject(error)
}
)
// 兼容本文件通过browserify编译之后无法获取到request的问题
if (!window.request) {
window.request = request
}
},{"../config/config.json":1}]},{},[2]);
webpack.config.js
View file @ 16c359b4
/* /*
* @Author: syc攻城狮 * @Author: syc攻城狮
* @description: 文件描述 * @description: 本地run的webpack配置
* @Date: 2021-08-19 17:10:54 * @Date: 2021-08-19 17:10:54
* @LastEditors: 莫靓仔 * @LastEditors: 莫靓仔
* @LastEditTime: 2021-08-31 11:26:03 * @LastEditTime: 2021-09-14 19:14:30
*/ */
var path = require('path') var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 用于在构建前清除dist目录中的内容
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
var minify = {
// 对html文件进行压缩
// 去掉属性的双引号
removeAttributeQuotes: true,
// 去掉注释
removeComments: true,
// 去掉空白
collapseWhitespace: true
}
module.exports = { module.exports = {
// 入口 // 入口
entry: { entry: {
...@@ -36,63 +23,6 @@ module.exports = { ...@@ -36,63 +23,6 @@ module.exports = {
// 打包后的文件名 // 打包后的文件名
filename: 'js/[name]/[name]-bundle.js' filename: 'js/[name]/[name]-bundle.js'
}, },
module: {
rules: [
{
// css文件打包
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 图片
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader?limit=8192&name=images/[hash:8].[name].[ext]']
},
{
// 字体
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader?limit=8192&name=font/[hash:8].[name].[ext]']
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
inject: 'body', //js插入的位置，true/'head'/'body'/false,
chunks: ['index'],
minify: false
}),
new HtmlWebpackPlugin({
filename: 'dashboard.html',
template: './dashboard.html',
inject: 'body', //js插入的位置，true/'head'/'body'/false,
chunks: ['dashboard'],
minify: false
}),
new HtmlWebpackPlugin({
filename: 'dashboardIndex.html',
minify: false,
template: './dashboard/index.html',
inject: 'body', //js插入的位置，true/'head'/'body'/false,
chunks: ['dashboardIndex']
}),
// 打包成单独css
new ExtractTextPlugin({
filename: 'css/[name].css'
}),
// 清除dist构建目录文件
new CleanWebpackPlugin()
// new ExtractTextPlugin({
// // filename: getPath => {
// // return getPath('css/[name].css').replace('css/js', 'css')
// // },
// filename:'css/[name].css',
// // allChunks: true
// })
],
mode: 'development', mode: 'development',
devServer: { devServer: {
open: true, open: true,
...@@ -106,165 +36,3 @@ module.exports = { ...@@ -106,165 +36,3 @@ module.exports = {
openPage: './index.html' openPage: './index.html'
} }
} }
// todo 以下网上找的配置，待测试
// var path = require('path')
// var webpack = require('webpack')
// var autoprefixer = require('autoprefixer')
// var HtmlWebpackPlugin = require('html-webpack-plugin')
// var ExtractTextPlugin = require('extract-text-webpack-plugin')
// module.exports = {
// entry: {
// //配置入口文件，有几个写几个
// index: './index.js',
// // 页面2
// dashboard: './dashboard.js',
// // 页面3
// dashboardIndex: './dashboard/index.js'
// },
// output: {
// path: path.join(__dirname, 'public'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
// publicPath: '/public/', //模板、样式、脚本、图片等资源对应的server上的路径
// filename: 'js/[name].js', //每个页面对应的主js的生成配置
// chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
// },
// devServer: {
// open: true,
// // 端口号
// port: 5501,
// // 是否压缩
// compress: true,
// // 当前目录
// contentBase: path.join(__dirname, 'dist'),
// // dev启动时候打开指定页面
// openPage: './index.html'
// },
// module: {
// rules: [
// {
// test: /\.js$/,
// loader: 'babel-loader?presets=es2015'
// },
// {
// test: /\.css$/,
// use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader'] })
// },
// {
// test: /\.less/,
// use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// use: ['css-loader', 'autoprefixer-loader', 'less-loader']
// })
// },
// {
// //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
// //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
// test: /\.html$/,
// loader: 'html-loader?attrs=img:src img:data-src'
// },
// {
// //文件加载器，处理文件静态资源
// test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: 'file-loader?name=./fonts/[name].[ext]'
// },
// {
// //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
// //如下配置，将小于8192byte(8KB)的图片转成base64码
// test: /\.(png|jpg|gif)$/,
// loader: 'url-loader?limit=8192&name=./img/[hash:5].[ext]'
// }
// ]
// },
// externals: {
// // 遇到require这些时, 不需要再编译. 适合那些常用的库, 已经在页面通过
// jquery: 'jQuery'
// },
// plugins: [
// // new webpack.ProvidePlugin({ //加载jq
// // $: ‘jquery’,
// // jQuery: ‘jquery’
// // }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'ymsj', // 将公共模块提取，生成名为`ymsj`的chunk
// chunks: 'all', //提取哪些模块共有的部分
// minChunks: 3 // 提取至少3个模块共有的部分
// }),
// new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
// // new HtmlWebpackPlugin({
// // //根据模板插入css/js等生成最终HTML
// // favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
// // filename: './view/index.html', //生成的html存放路径，相对于path
// // template: './src/view/index.html', //html模板路径
// // inject: 'body', //js插入的位置，true/’head’/’body’/false
// // hash: true, //为静态资源生成hash值
// // chunks: ['ymsj', 'index'], //需要引入的chunk，不配置就会引入所有页面的资源
// // minify: {
// // //压缩HTML文件
// // removeComments: false, //移除HTML中的注释
// // collapseWhitespace: false //删除空白符与换行符
// // }
// // }),
// // new HtmlWebpackPlugin({
// // //根据模板插入css/js等生成最终HTML
// // favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
// // filename: './view/list.html', //生成的html存放路径，相对于path
// // template: './src/view/list.html', //html模板路径
// // inject: true, //js插入的位置，true/’head’/’body’/false
// // hash: true, //为静态资源生成hash值
// // chunks: ['ymsj', 'list'], //需要引入的chunk，不配置就会引入所有页面的资源
// // minify: {
// // //压缩HTML文件
// // removeComments: true, //移除HTML中的注释
// // collapseWhitespace: false //删除空白符与换行符
// // }
// // }),
// // new HtmlWebpackPlugin({
// // //根据模板插入css/js等生成最终HTML
// // favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
// // filename: './view/article.html', //生成的html存放路径，相对于path
// // template: './src/view/article.html', //html模板路径
// // inject: true, //js插入的位置，true/'head'/'body'/false
// // hash: true, //为静态资源生成hash值
// // chunks: ['ymsj', 'article'], //需要引入的chunk，不配置就会引入所有页面的资源
// // minify: {
// // //压缩HTML文件
// // removeComments: true, //移除HTML中的注释
// // collapseWhitespace: false //删除空白符与换行符
// // }
// // }),
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: './index.html',
// inject: 'body', //js插入的位置，true/'head'/'body'/false,
// chunks: ['index']
// // minify
// }),
// new HtmlWebpackPlugin({
// filename: 'dashboard.html',
// template: './dashboard.html',
// inject: 'body', //js插入的位置，true/'head'/'body'/false,
// chunks: ['dashboard']
// // minify
// }),
// new HtmlWebpackPlugin({
// filename: 'dashboardIndex.html',
// // minify,
// template: './dashboard/index.html',
// inject: 'body', //js插入的位置，true/'head'/'body'/false,
// chunks: ['dashboardIndex']
// }),
// new webpack.BannerPlugin('白山羊案例V2.0.0 2017-9 Wginit '),
// new webpack.optimize.OccurrenceOrderPlugin(),
// new webpack.optimize.UglifyJsPlugin(),
// new webpack.HotModuleReplacementPlugin() //热加载
// ]
// // mode:'development'
// }
webpack_copy.md 0 → 100644
View file @ 16c359b4
<!--
* @Author: 莫靓仔
* @description: 文件描述
* @Date: 2021-09-14 19:13:52
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:13:52
-->
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 用于在构建前清除dist目录中的内容
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
// var minify = {
// // 对html文件进行压缩
// // 去掉属性的双引号
// removeAttributeQuotes: true,
// // 去掉注释
// removeComments: true,
// // 去掉空白
// collapseWhitespace: true
// }
module.exports = {
// 入口
entry: {
// 页面1
index: './js/main.js',
// 页面2
dashboard: './js/main.js',
// 页面3
dashboardIndex: './js/main.js'
},
// 出口
output: {
// 项目的打包文件路径
path: path.resolve(__dirname, './dist'),
// 打包后的文件名
filename: 'js/[name]/[name]-bundle.js'
},
module: {
rules: [
{
// css文件打包
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 图片
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader?limit=8192&name=images/[hash:8].[name].[ext]']
},
{
// 字体
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader?limit=8192&name=font/[hash:8].[name].[ext]']
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
inject: 'body', //js插入的位置，true/'head'/'body'/false,
chunks: ['index'],
minify: false
}),
new HtmlWebpackPlugin({
filename: 'dashboard.html',
template: './dashboard.html',
inject: 'body', //js插入的位置，true/'head'/'body'/false,
chunks: ['dashboard'],
minify: false
}),
new HtmlWebpackPlugin({
filename: 'dashboardIndex.html',
minify: false,
template: './dashboard/index.html',
inject: 'body', //js插入的位置，true/'head'/'body'/false,
chunks: ['dashboardIndex']
}),
// 打包成单独css
new ExtractTextPlugin({
filename: 'css/[name].css'
}),
// 清除dist构建目录文件
new CleanWebpackPlugin()
// new ExtractTextPlugin({
// // filename: getPath => {
// // return getPath('css/[name].css').replace('css/js', 'css')
// // },
// filename:'css/[name].css',
// // allChunks: true
// })
],
mode: 'development',
devServer: {
open: true,
// 端口号
port: 5501,
// 是否压缩
compress: true,
// 当前目录
contentBase: path.join(__dirname, './'),
// dev启动时候打开指定页面
openPage: './index.html'
}
}
// todo 以下网上找的配置，待测试
// var path = require('path')
// var webpack = require('webpack')
// var autoprefixer = require('autoprefixer')
// var HtmlWebpackPlugin = require('html-webpack-plugin')
// var ExtractTextPlugin = require('extract-text-webpack-plugin')
// module.exports = {
// entry: {
// //配置入口文件，有几个写几个
// index: './index.js',
// // 页面2
// dashboard: './dashboard.js',
// // 页面3
// dashboardIndex: './dashboard/index.js'
// },
// output: {
// path: path.join(__dirname, 'public'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
// publicPath: '/public/', //模板、样式、脚本、图片等资源对应的server上的路径
// filename: 'js/[name].js', //每个页面对应的主js的生成配置
// chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
// },
// devServer: {
// open: true,
// // 端口号
// port: 5501,
// // 是否压缩
// compress: true,
// // 当前目录
// contentBase: path.join(__dirname, 'dist'),
// // dev启动时候打开指定页面
// openPage: './index.html'
// },
// module: {
// rules: [
// {
// test: /\.js$/,
// loader: 'babel-loader?presets=es2015'
// },
// {
// test: /\.css$/,
// use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader'] })
// },
// {
// test: /\.less/,
// use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// use: ['css-loader', 'autoprefixer-loader', 'less-loader']
// })
// },
// {
// //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
// //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
// test: /\.html$/,
// loader: 'html-loader?attrs=img:src img:data-src'
// },
// {
// //文件加载器，处理文件静态资源
// test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: 'file-loader?name=./fonts/[name].[ext]'
// },
// {
// //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
// //如下配置，将小于8192byte(8KB)的图片转成base64码
// test: /\.(png|jpg|gif)$/,
// loader: 'url-loader?limit=8192&name=./img/[hash:5].[ext]'
// }
// ]
// },
// externals: {
// // 遇到require这些时, 不需要再编译. 适合那些常用的库, 已经在页面通过
// jquery: 'jQuery'
// },
// plugins: [
// // new webpack.ProvidePlugin({ //加载jq
// // $: ‘jquery’,
// // jQuery: ‘jquery’
// // }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'ymsj', // 将公共模块提取，生成名为`ymsj`的chunk
// chunks: 'all', //提取哪些模块共有的部分
// minChunks: 3 // 提取至少3个模块共有的部分
// }),
// new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
// // new HtmlWebpackPlugin({
// // //根据模板插入css/js等生成最终HTML
// // favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
// // filename: './view/index.html', //生成的html存放路径，相对于path
// // template: './src/view/index.html', //html模板路径
// // inject: 'body', //js插入的位置，true/’head’/’body’/false
// // hash: true, //为静态资源生成hash值
// // chunks: ['ymsj', 'index'], //需要引入的chunk，不配置就会引入所有页面的资源
// // minify: {
// // //压缩HTML文件
// // removeComments: false, //移除HTML中的注释
// // collapseWhitespace: false //删除空白符与换行符
// // }
// // }),
// // new HtmlWebpackPlugin({
// // //根据模板插入css/js等生成最终HTML
// // favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
// // filename: './view/list.html', //生成的html存放路径，相对于path
// // template: './src/view/list.html', //html模板路径
// // inject: true, //js插入的位置，true/’head’/’body’/false
// // hash: true, //为静态资源生成hash值
// // chunks: ['ymsj', 'list'], //需要引入的chunk，不配置就会引入所有页面的资源
// // minify: {
// // //压缩HTML文件
// // removeComments: true, //移除HTML中的注释
// // collapseWhitespace: false //删除空白符与换行符
// // }
// // }),
// // new HtmlWebpackPlugin({
// // //根据模板插入css/js等生成最终HTML
// // favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
// // filename: './view/article.html', //生成的html存放路径，相对于path
// // template: './src/view/article.html', //html模板路径
// // inject: true, //js插入的位置，true/'head'/'body'/false
// // hash: true, //为静态资源生成hash值
// // chunks: ['ymsj', 'article'], //需要引入的chunk，不配置就会引入所有页面的资源
// // minify: {
// // //压缩HTML文件
// // removeComments: true, //移除HTML中的注释
// // collapseWhitespace: false //删除空白符与换行符
// // }
// // }),
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: './index.html',
// inject: 'body', //js插入的位置，true/'head'/'body'/false,
// chunks: ['index']
// // minify
// }),
// new HtmlWebpackPlugin({
// filename: 'dashboard.html',
// template: './dashboard.html',
// inject: 'body', //js插入的位置，true/'head'/'body'/false,
// chunks: ['dashboard']
// // minify
// }),
// new HtmlWebpackPlugin({
// filename: 'dashboardIndex.html',
// // minify,
// template: './dashboard/index.html',
// inject: 'body', //js插入的位置，true/'head'/'body'/false,
// chunks: ['dashboardIndex']
// }),
// new webpack.BannerPlugin('白山羊案例V2.0.0 2017-9 Wginit '),
// new webpack.optimize.OccurrenceOrderPlugin(),
// new webpack.optimize.UglifyJsPlugin(),
// new webpack.HotModuleReplacementPlugin() //热加载
// ]
// // mode:'development'
// }
yarn.lock 0 → 100644
View file @ 16c359b4
This source diff could not be displayed because it is too large. You can view the blob instead.
仪表盘/仪表盘.html
View file @ 16c359b4
...@@ -2,302 +2,403 @@ ...@@ -2,302 +2,403 @@
* @Description: 这是***页面（组件） * @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32 * @Date: 2021-03-02 16:27:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 16:00:23 * @LastEditTime: 2021-09-14 18:49:07
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<title>Document</title> </head>
</head> <script src="../js/domainSetting.js"></script>
<script> <script>
// 离开页面保存功能代码(移动至此处)
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
// 获取url参数 // 获取url参数
function getParams(key, str) { function getParams(key, str) {
    var result = {}; var result = {}
    var paramStr = '' var paramStr = ''
    let params let params
    if (str) { if (str) {
        paramStr = str.split('?')[1] paramStr = str.split('?')[1]
        if (paramStr) { if (paramStr) {
            params = paramStr.split('&'); params = paramStr.split('&')
            params.forEach(item => { params.forEach(item => {
                result[item.split('=')[0]] = unescape(item.split('=')[1]) result[item.split('=')[0]] = unescape(item.split('=')[1])
            }) })
        } }
    } else { } else {
        paramStr = encodeURI(window.document.location.search); paramStr = encodeURI(window.document.location.search)
        if (paramStr) { if (paramStr) {
            paramStr = paramStr.substring(1); paramStr = paramStr.substring(1)
            params = paramStr.split('&'); params = paramStr.split('&')
            for (var p = 0; p < params.length; p++) { for (var p = 0; p < params.length; p++) {
                result[params[p].split('=')[0]] = unescape(params[p].split('=')[1]); result[params[p].split('=')[0]] = unescape(params[p].split('=')[1])
            } }
        } }
    } }
    return result[key]; return result[key]
} }
</script> </script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css" /> <link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
<script src="../layui/layui.all.js"></script> <script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css"> <link rel="stylesheet" href="../layui/css/layui.css" />
<link rel="stylesheet" href="../css/柱形图.css" type="text/css" /> <link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
<link rel="stylesheet" href="../css/仪表盘.css" type="text/css"> <link rel="stylesheet" href="../css/仪表盘.css" type="text/css" />
<style type="text/css">
html,
body {
overflow: hidden;
}
.layui-form-checkbox i { <style type="text/css">
border-left: -1px; html,
} body {
overflow: hidden;
}
.layui-form-checkbox { .layui-form-checkbox i {
margin-right: 0px; border-left: -1px;
} }
.layui-form-radio { .layui-form-checkbox {
margin: 0; margin-right: 0px;
} }
button[colorpicker-events="clear"] { .layui-form-radio {
display: none; margin: 0;
} }
.echarts_attribute { button[colorpicker-events='clear'] {
background: #F9F9F9; display: none;
padding: 10px 20px; }
width: calc(100% - 20px);
} .echarts_attribute {
background: #f9f9f9;
padding: 10px 20px;
width: calc(100% - 20px);
}
.padding-style { .padding-style {
padding: 0 10px; padding: 0 10px;
} }
.padding-style .layui-form-radio { .padding-style .layui-form-radio {
width: 40%; width: 40%;
} }
.padding-style1 .layui-form-radio { .padding-style1 .layui-form-radio {
width: 25%; width: 25%;
} }
.layui-form-radio { .layui-form-radio {
margin: 0; margin: 0;
} }
.echarts_left { .echarts_left {
width: 100%; width: 100%;
} }
.input-max { .input-max {
display: inline-block; display: inline-block;
/* margin:0 50px; */ /* margin:0 50px; */
width: 45%; width: 45%;
} }
</style> </style>
<body> <body>
<div class="BarChart"> <div class="BarChart">
<div class="Barchart_conter clearfix"> <div class="Barchart_conter clearfix">
<div class="BarChart_left left"> <div class="BarChart_left left">
<div class="BarChart_echarts clearfix"> <div class="BarChart_echarts clearfix">
<div class="echarts_left left"> <div class="echarts_left left">
<div class="echartText">图表配置</div> <div class="echartText">图表配置</div>
<div class="echarts_attribute"> <div class="echarts_attribute">
<div>仪表盘量程</div> <div>仪表盘量程</div>
<form class="layui-form"> <form class="layui-form">
<div class="padding-style"> <div class="padding-style">
<input lay-filter="axisOriginal" type="radio" name="sex" value="1" title="按原值划分"> <input
<input lay-filter="axisPercentage" type="radio" name="sex" value="2" title="百分比划分"> lay-filter="axisOriginal"
<div class="original showLin originalMax">上限值：</div> type="radio"
<div class="original showLin inpBox originalMax"> name="sex"
<input id="maxV" type="text" name="title" required lay-verify="required" value="1"
autocomplete="off" class="layui-input"> title="按原值划分"
</div> />
</div> <input
<div class="padding-style"> lay-filter="axisPercentage"
<div class="showLin inpText">最小值：</div> type="radio"
<div class="showLin inpBox"> name="sex"
<input id="min" type="text" name="title" required lay-verify="required" value="2"
autocomplete="off" class="layui-input"> title="百分比划分"
/>
<div class="original showLin originalMax">上限值：</div>
<div class="original showLin inpBox originalMax">
<input
id="maxV"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
<div class="showLin inpText">区间：</div> <div class="padding-style">
<div class="sectionDom showLin"> <div class="showLin inpText">最小值：</div>
<select id="sectionDom" lay-filter="sectionDom" name="city" <div class="showLin inpBox">
lay-verify="required"> <input
<option value="1">1</option> id="min"
<option value="2">2</option> type="text"
<option value="3" selected>3</option> name="title"
<option value="4">4</option> required
<option value="5">5</option> lay-verify="required"
<option value="6">6</option> autocomplete="off"
<option value="7">7</option> class="layui-input"
<option value="8">8</option> />
<option value="9">9</option> </div>
<option value="10">10</option> <div class="showLin inpText">区间：</div>
</select> <div class="sectionDom showLin">
<select
id="sectionDom"
lay-filter="sectionDom"
name="city"
lay-verify="required"
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="showLin inpText">最大值：</div>
<div class="showLin inpBox">
<input
id="max"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
<div class="showLin inpText">最大值：</div> <div class="padding-style" style="padding: 10px 0">
<div class="showLin inpBox"> <div class="slideBar">
<input id="max" type="text" name="title" required lay-verify="required" <div class="slideBox"></div>
autocomplete="off" class="layui-input"> </div>
</div> </div>
</div> <div class="axisType" style="margin-top: 5px; margin-bottom: 10px">
<div class="padding-style" style="padding: 10px 0;"> <div class="inpText padding-style">
<div class="slideBar"> <div class="input-max">
<div class="slideBox"></div> <div class="showLin">最小值</div>
<div class="showLin axisMin">0</div>
</div>
<div class="input-max">
<div class="showLin">最大值</div>
<div class="showLin axisMax">100</div>
</div>
</div>
<div
class="showLin axisDom padding-style"
style="height: 122px; overflow: auto"
></div>
</div> </div>
</div> <div class="padding-style">
<div class="axisType" style="margin-top:5px;margin-bottom:10px">
<div class="inpText padding-style">
<div class="input-max"> <div class="input-max">
<div class="showLin">最小值</div> <div class="showLin inpText">分割段数：</div>
<div class="showLin axisMin">0</div> <div class="showLin inpBox">
<input
id="split"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
<div class="input-max"> <div class="input-max">
<div class="showLin">最大值</div> <div class="showLin inpText">刻度数：</div>
<div class="showLin axisMax">100</div> <div class="showLin inpBox">
<input
id="scale"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
</div> </div>
<div class="showLin axisDom padding-style" style="height: 122px;overflow:auto;"> </form>
<!-- <div style="margin-top:10px">标题</div> -->
<form class="layui-form">
<div class="showLin">图表标题：</div>
<div class="padding-style">
<input
maxlength="15"
id="title"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
<!-- <div> -->
</div> <div class="showLin">水平对齐：</div>
<div class="padding-style"> <div class="padding-style padding-style1">
<div class="input-max"> <input
<div class="showLin inpText">分割段数：</div> lay-filter="leftTitle"
<div class="showLin inpBox"> type="radio"
<input id="split" type="text" name="title" required lay-verify="required" name="sex"
autocomplete="off" class="layui-input"> value="3"
</div> title="左对齐"
/>
<input
lay-filter="conterTitle"
type="radio"
name="sex"
value="4"
title="居中"
checked
/>
<input
lay-filter="rightTitle"
type="radio"
name="sex"
value="5"
title="右对齐"
/>
<div class="showLin">显示</div>
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked />
</div> </div>
<div class="input-max"> <!-- </div> -->
<div class="showLin inpText">刻度数：</div> <div>
<div class="showLin inpBox"> <div class="xColor showLin">颜色:</div>
<input id="scale" type="text" name="title" required lay-verify="required" <div
autocomplete="off" class="layui-input"> id="test2"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
<div class="xSize showLin" style="margin-left: 40px">字号:</div>
<div class="xselect showLin" style="margin-right: 40px">
<input
id="titleSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
<div class="xColor showLin">背景颜色:</div>
<div
id="test5"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
</div>
</form>
<div>标签</div>
<form class="layui-form padding-style">
<div class="showLin">刻度标签：</div>
<div class="xSize showLin">字号:</div>
<div class="xselect showLin">
<input
id="rangeSize1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
</div>
</form>
<!-- <div style="margin-top:10px">标题</div> -->
<form class="layui-form">
<div class="showLin">图表标题：</div>
<div class="padding-style">
<input maxlength="15" id="title" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
</div>
<!-- <div> -->
<div class="showLin">水平对齐：</div>
<div class="padding-style padding-style1">
<input lay-filter="leftTitle" type="radio" name="sex" value="3" title="左对齐">
<input lay-filter="conterTitle" type="radio" name="sex" value="4" title="居中"
checked>
<input lay-filter="rightTitle" type="radio" name="sex" value="5" title="右对齐">
<div class="showLin">显示</div> <div class="showLin">显示</div>
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked> <input id="rangeShow1" lay-filter="rangeShow1" type="checkbox" checked />
</div> </form>
<!-- </div> --> <form class="layui-form padding-style">
<div> <div class="showLin">详情标签：</div>
<div class="xColor showLin">颜色:</div> <div class="xSize showLin">字号:</div>
<div id="test2" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div> <div class="xselect showLin">
<div class="xSize showLin" style="margin-left: 40px;">字号:</div> <input
<div class="xselect showLin" style="margin-right: 40px;"> id="rangeSize2"
<input id="titleSize" type="text" name="title" required lay-verify="required" type="text"
autocomplete="off" class="layui-input"> name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
<div class="xColor showLin">背景颜色:</div> <div class="showLin">显示</div>
<div id="test5" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div> <input id="rangeShow2" lay-filter="rangeShow2" type="checkbox" checked />
</div> <div
</form> id="detail"
<div>标签</div> class="colorBlock colorBlock1 showLin"
<form class="layui-form padding-style"> style="margin-left: 20px"
onclick="colorclick()"
<div class="showLin">刻度标签：</div> ></div>
</form>
<div class="xSize showLin">字号:</div>
<div class="xselect showLin">
<input id="rangeSize1" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
</div>
<div class="showLin">显示</div>
<input id="rangeShow1" lay-filter="rangeShow1" type="checkbox" checked>
</form>
<form class="layui-form padding-style">
<div class="showLin">详情标签：</div>
<div class="xSize showLin">字号:</div>
<div class="xselect showLin">
<input id="rangeSize2" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
</div>
<div class="showLin">显示</div>
<input id="rangeShow2" lay-filter="rangeShow2" type="checkbox" checked>
<div id="detail" class="colorBlock colorBlock1 showLin" style="margin-left: 20px" onclick="colorclick()"></div>
</form>
<div>配色方案</div>
<form class="layui-form padding-style">
<div> <div>配色方案</div>
<div class="showLin fgBox">风格一：</div> <form class="layui-form padding-style">
<div id="style1" class="showLin fgBoxChild"> <div>
<div class="showLin fgBlock fg11"></div> <div class="showLin fgBox">风格一：</div>
<div class="showLin fgBlock fg12"></div> <div id="style1" class="showLin fgBoxChild">
<div class="showLin fgBlock fg13"></div> <div class="showLin fgBlock fg11"></div>
<div class="showLin fgBlock fg14"></div> <div class="showLin fgBlock fg12"></div>
<div class="showLin fgBlock fg15"></div> <div class="showLin fgBlock fg13"></div>
<div class="showLin fgBlock fg16"></div> <div class="showLin fgBlock fg14"></div>
<div class="showLin fgBlock fg17"></div> <div class="showLin fgBlock fg15"></div>
<div class="showLin fgBlock fg18"></div> <div class="showLin fgBlock fg16"></div>
<div class="showLin fgBlock fg19"></div> <div class="showLin fgBlock fg17"></div>
<div class="showLin fgBlock fg110"></div> <div class="showLin fgBlock fg18"></div>
<div class="showLin fgBlock fg19"></div>
<div class="showLin fgBlock fg110"></div>
</div>
</div> </div>
</div> <div>
<div> <div class="showLin fgBox">风格一：</div>
<div class="showLin fgBox">风格一：</div> <div id="style2" class="showLin fgBoxChild">
<div id="style2" class="showLin fgBoxChild"> <div class="showLin fgBlock fg21"></div>
<div class="showLin fgBlock fg21"></div> <div class="showLin fgBlock fg22"></div>
<div class="showLin fgBlock fg22"></div> <div class="showLin fgBlock fg23"></div>
<div class="showLin fgBlock fg23"></div> <div class="showLin fgBlock fg24"></div>
<div class="showLin fgBlock fg24"></div> <div class="showLin fgBlock fg25"></div>
<div class="showLin fgBlock fg25"></div> <div class="showLin fgBlock fg26"></div>
<div class="showLin fgBlock fg26"></div> <div class="showLin fgBlock fg27"></div>
<div class="showLin fgBlock fg27"></div> <div class="showLin fgBlock fg28"></div>
<div class="showLin fgBlock fg28"></div> <div class="showLin fgBlock fg29"></div>
<div class="showLin fgBlock fg29"></div> <div class="showLin fgBlock fg210"></div>
<div class="showLin fgBlock fg210"></div> </div>
</div> </div>
</div> <div>
<div> <div class="showLin fgBox">风格三：</div>
<div class="showLin fgBox">风格三：</div> <div id="style3" class="showLin fgBoxChild">
<div id="style3" class="showLin fgBoxChild"> <div class="showLin fgBlock fg31"></div>
<div class="showLin fgBlock fg31"></div> <div class="showLin fgBlock fg32"></div>
<div class="showLin fgBlock fg32"></div> <div class="showLin fgBlock fg33"></div>
<div class="showLin fgBlock fg33"></div> <div class="showLin fgBlock fg34"></div>
<div class="showLin fgBlock fg34"></div> <div class="showLin fgBlock fg35"></div>
<div class="showLin fgBlock fg35"></div> <div class="showLin fgBlock fg36"></div>
<div class="showLin fgBlock fg36"></div> <div class="showLin fgBlock fg37"></div>
<div class="showLin fgBlock fg37"></div> <div class="showLin fgBlock fg38"></div>
<div class="showLin fgBlock fg38"></div> <div class="showLin fgBlock fg39"></div>
<div class="showLin fgBlock fg39"></div> <div class="showLin fgBlock fg310"></div>
<div class="showLin fgBlock fg310"></div> </div>
</div> </div>
</div> <!-- <div>
<!-- <div>
<div class="showLin fgBox">风格四：</div> <div class="showLin fgBox">风格四：</div>
<div id="style4" class="showLin fgBoxChild"> <div id="style4" class="showLin fgBoxChild">
<div class="showLin fgBlock fg41"></div> <div class="showLin fgBlock fg41"></div>
...@@ -312,54 +413,56 @@ ...@@ -312,54 +413,56 @@
<div class="showLin fgBlock fg410"></div> <div class="showLin fgBlock fg410"></div>
</div> </div>
</div> --> </div> -->
</form> </form>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script src="../js/moment.js"></script>
<script src="../js/moment.js"></script> <script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script> <script src="../js/echarts.js"></script>
<script src="../js/echarts.js"></script> <script src="../js/ecStat.js"></script>
<script src="../js/ecStat.js"></script> <script>
<script> var echartsType = 'dashboard'
var echartsType = 'dashboard' </script>
</script> <script type="text/html" id="titleTpl">
<script type="text/html" id="titleTpl"> <!-- 变量配置 -->
<!-- 变量配置 --> <div style="position:absolute;top:0;left:0;width:78%;height:100%">
<div style="position:absolute;top:0;left:0;width:78%;height:100%"> <input
<input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input" value="{{d.selsectVar}}"> lay-event="var"
<div class="varSelectBox">...</div> id="varIpt"
</div> name="selsectVar"
</script> class="varSelect layui-input"
<script type="text/html" id="titleColor"> value="{{d.selsectVar}}"
<!-- 颜色选择器 --> />
<div id="color{{d.NO}}"></div> <div class="varSelectBox">...</div>
</script> </div>
<script src="../js/color.js"></script> </script>
<script src="./仪表盘.js"></script> <script type="text/html" id="titleColor">
<script src="../js/varEcharts.js"></script> <!-- 颜色选择器 -->
<script> <div id="color{{d.NO}}"></div>
document.onkeydown = function (e) { </script>
<script src="../js/color.js"></script>
if(e.keyCode == 90){ <script src="./仪表盘.js"></script>
window.parent.goback() <script src="../js/varEcharts.js"></script>
}else if(e.keyCode == 89){ <script>
window.parent.backgo() document.onkeydown = function (e) {
if (e.keyCode == 90) {
window.parent.goback()
} else if (e.keyCode == 89) {
window.parent.backgo()
}
} }
} function colorclick() {
function colorclick(){ // for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){ // $($('.bodycolorcover',parent.document)[i1]).show()
// $($('.bodycolorcover',parent.document)[i1]).show() // }
// } // $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) }
// $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) </script>
} </body>
</html>
</script>
</body>
</html>
\ No newline at end of file
仪表盘/仪表盘变量.html
View file @ 16c359b4
...@@ -2,123 +2,128 @@ ...@@ -2,123 +2,128 @@
* @Description: 这是***页面（组件） * @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32 * @Date: 2021-03-02 16:27:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 16:00:33 * @LastEditTime: 2021-09-14 19:04:33
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<script> <script src="../js/domainSetting.js"></script>
// 离开页面保存功能代码(移动至此处) <link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
if (window.location.host.indexOf('127.0.0') === -1) { <script src="../layui/layui.all.js"></script>
// 测试 && 开发：sycdev.com <link rel="stylesheet" href="../layui/css/layui.css" />
// 正式： shengyc.com <link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
document.domain = 'shengyc.com' || ''; <link rel="stylesheet" href="../css/仪表盘.css" type="text/css" />
}
</script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css"/>
<script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/柱形图.css" type="text/css"/>
<link rel="stylesheet" href="../css/仪表盘.css" type="text/css">
<style type="text/css"> <style type="text/css">
.layui-form-checkbox i{ .layui-form-checkbox i {
border-left:-1px; border-left: -1px;
} }
.layui-form-checkbox{ .layui-form-checkbox {
margin-right:0px; margin-right: 0px;
} }
.layui-form-radio{ .layui-form-radio {
margin:0; margin: 0;
} }
button[colorpicker-events="clear"]{ button[colorpicker-events='clear'] {
display: none; display: none;
} }
</style> </style>
<body> <body>
<div class="BarChart"> <div class="BarChart">
<div class="Barchart_conter clearfix"> <div class="Barchart_conter clearfix">
<div class="BarChart_left left"> <div class="BarChart_left left">
<div class="BarChart_var clearfix"> <div class="BarChart_var clearfix">
<div class="left var_left"> <div class="left var_left">
<div style="margin-top:12px;margin-bottom:14px;font-size:14px">数据</div> <div style="margin-top: 12px; margin-bottom: 14px; font-size: 14px">数据</div>
<div> <div>
<form class="layui-form formBox"> <form class="layui-form formBox">
<div class="showLin">数据关联：</div> <div class="showLin">数据关联：</div>
<div class="showLin" style="width: 400px;margin-left: 20px;" > <div class="showLin" style="width: 400px; margin-left: 20px">
<select lay-filter="data" name="city" id="data-relate" lay-verify="required"> <select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<option value="实时数据">实时数据</option> <option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option> <option value="历史数据">历史数据</option>
<!-- <option value="统计数据">统计数据</option> --> <!-- <option value="统计数据">统计数据</option> -->
<option value="业务数据">业务数据</option> <option value="业务数据">业务数据</option>
</select> </select>
</div> </div>
</form> </form>
<form class="layui-form formBox" lay-filter="form-data" style="padding-top: 0; display: none;" id="data-sheet" > <form
<div class="showLin">数据表：</div> class="layui-form formBox"
<div class="showLin" style="width: 400px;margin-left: 20px;" > lay-filter="form-data"
<select lay-filter="chart-data" name="city" id="chart-table" lay-verify="required"> style="padding-top: 0; display: none"
<!-- <option value="实时数据">实时数据</option> id="data-sheet"
>
<div class="showLin">数据表：</div>
<div class="showLin" style="width: 400px; margin-left: 20px">
<select
lay-filter="chart-data"
name="city"
id="chart-table"
lay-verify="required"
>
<!-- <option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option> <option value="历史数据">历史数据</option>
<option value="业务数据">业务数据</option> --> <option value="业务数据">业务数据</option> -->
</select> </select>
</div> </div>
</form> </form>
</div> </div>
<div id="varTitle" class="varTitle">指针角度/度量</div> <div id="varTitle" class="varTitle">指针角度/度量</div>
<div class="table formBox"> <div class="table formBox">
<table class="layui-hide" id="demo" lay-filter="demo"></table> <table class="layui-hide" id="demo" lay-filter="demo"></table>
</div>
</div> </div>
</div> <div class="right var_right"></div>
<div class="right var_right">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script type="text/html" id="valueAxis">
<script type="text/html" id="valueAxis"> <!-- 取值 -->
<!-- 取值 --> <div class="selectAxis">
<div class="selectAxis"> <select lay-event="type" class="select" value="d.rangevalue" lay-ignore>
<select lay-event="type" class="select" value="d.rangevalue" lay-ignore> {{# for(let i=0;i<d.valueAxisArr.length;i++){ }} {{# if(d.valueAxisArr[i].value == d.rangevalue){ }}
{{# for(let i=0;i<d.valueAxisArr.length;i++){ }} <option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
{{# if(d.valueAxisArr[i].value == d.rangevalue){ }} {{# }else{ }}
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option> <option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
{{# }else{ }} {{# } }} {{# } }}
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option> </select>
{{# } }} </div>
{{# } }} </script>
</select> <script src="../js/moment.js"></script>
</div> <script src="../js/jquery-1.10.2.min.js"></script>
</script> <!-- 引入axiox -->
<script src="../js/moment.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script> <script src="../utils/request_browserify.js"></script>
<!-- 引入axiox --> <!-- <script src="../js/echarts.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request.js"></script>
<!-- <script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script> --> <script src="../js/ecStat.js"></script> -->
<script> <script>
var echartsType = 'dashboard' var echartsType = 'dashboard'
</script> </script>
<script type="text/html" id="titleTpl"> <script type="text/html" id="titleTpl">
<!-- 变量配置 --> <!-- 变量配置 -->
<div style="position:absolute;top:0;left:0;width:78%;height:100%"> <div style="position:absolute;top:0;left:0;width:78%;height:100%">
<input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input" value="{{d.selsectVar}}"> <input
<div class="varSelectBox">...</div> lay-event="var"
</div> id="varIpt"
</script> name="selsectVar"
<script type="text/html" id="titleColor"> class="varSelect layui-input"
<!-- 颜色选择器 --> value="{{d.selsectVar}}"
<div id="color{{d.NO}}"></div> />
</script> <div class="varSelectBox">...</div>
<script src="../js/color.js"></script> </div>
<script src="./仪表盘.js"></script> </script>
<script src="../js/varEcharts.js"></script> <script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
</body> <div id="color{{d.NO}}"></div>
</html> </script>
\ No newline at end of file <script src="../js/color.js"></script>
<script src="./仪表盘.js"></script>
<script src="../js/varEcharts.js"></script>
</body>
</html>
折线图/折线图.html
View file @ 16c359b4
...@@ -2,475 +2,729 @@ ...@@ -2,475 +2,729 @@
* @Description: 这是折线图页面（组件） * @Description: 这是折线图页面（组件）
* @Date: 2021-03-02 16:27:32 * @Date: 2021-03-02 16:27:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 17:35:31 * @LastEditTime: 2021-09-14 19:04:36
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="../js/domainSetting.js"></script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
<script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css" />
<link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
<style type="text/css">
.layui-form-checkbox i {
border-left: -1px;
}
<head> .layui-form-checkbox {
<meta charset="UTF-8"> margin-right: 0px;
<meta name="viewport" content="width=device-width, initial-scale=1.0"> }
<title>Document</title>
</head>
<script>
// 离开页面保存功能代码(移动至此处)
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
</script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
<script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
<style type="text/css">
.layui-form-checkbox i {
border-left: -1px;
}
.layui-form-checkbox {
margin-right: 0px;
}
.layui-form-radio { .layui-form-radio {
margin: 0; margin: 0;
} }
button[colorpicker-events="clear"] { button[colorpicker-events='clear'] {
display: none; display: none;
} }
html, html,
head, head,
body { body {
height: 100%; height: 100%;
font-size: 13px; font-size: 13px;
color: #333333; color: #333333;
} }
.echarts_left { .echarts_left {
width: 100%; width: 100%;
} }
.axios_mar1 { .axios_mar1 {
/* width: 23%; */ /* width: 23%; */
padding: 0 0 0 10px; padding: 0 0 0 10px;
} }
.axios_mar2 .layui-form-radio { .axios_mar2 .layui-form-radio {
width: 30%; width: 30%;
} }
.axios_mar3 .layui-form-radio { .axios_mar3 .layui-form-radio {
width: 20%; width: 20%;
} }
</style> </style>
<body> <body>
<div class="BarChart"> <div class="BarChart">
<div class="Barchart_conter clearfix"> <div class="Barchart_conter clearfix">
<div class="BarChart_left left"> <div class="BarChart_left left">
<div class="BarChart_echarts clearfix"> <div class="BarChart_echarts clearfix">
<div class="echarts_left left"> <div class="echarts_left left">
<div class="echarts_jt"> <div class="echarts_jt">
<div class="echartText">图表配置 <div class="echartText">
<div num="355" name="false" onclick="iconBoxFun(event,'iconBox1')" id="iconBox1" class="iconBox"><i class="layui-icon layui-icon-up"></i> 图表配置
</div> <div
</div> num="355"
<form class="layui-form formBox"> name="false"
<div> onclick="iconBoxFun(event,'iconBox1')"
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked> id="iconBox1"
<div class="showLin titleText">显示主标题</div> class="iconBox"
</div> >
<div class="showLin echartsTile axios_mar1"> <i class="layui-icon layui-icon-up"></i>
<input id="title" maxlength="15" type="text" name="title" required </div>
lay-verify="required" autocomplete="off" class="layui-input">
</div> </div>
<div class="axios_mar1"> <form class="layui-form formBox">
<div style="margin-top:10px">字体</div> <div>
<div class="echartsTile"> <input id="titleShow" lay-filter="titleShow" type="checkbox" checked />
<select id="TitleFontFamily" lay-filter="TitleFontFamily" name="city" <div class="showLin titleText">显示主标题</div>
lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div> </div>
<div class="showLin echartsTile axios_mar1">
<div class="xSize showLin">字号</div> <input
<div class="xselect sizeInputBox showLin"> id="title"
<input id="titleSize" type="text" name="title" required lay-verify="required" maxlength="15"
autocomplete="off" class="layui-input"> type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
<div class="xColor showLin">颜色</div> <div class="axios_mar1">
<div style="margin-top: 10px">字体</div>
<div class="echartsTile">
<select
id="TitleFontFamily"
lay-filter="TitleFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div id="test2" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div> <div class="xSize showLin">字号</div>
<div class="xselect sizeInputBox showLin">
<input
id="titleSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色</div>
<div class="showLin" style="margin-left:50px">加粗</div> <div
<div class="showLin" id="titleWeight" style="cursor:pointer;"> id="test2"
<i class="layui-icon layui-icon-fonts-strong"></i> class="colorBlock colorBlock1 showLin"
</div> onclick="colorclick()"
</div> ></div>
<div class="axios_mar1 axios_mar2">
<div class="Titlep">水平对齐：</div>
<div class="axios_mar axios_mar1">
<input lay-filter="leftTitle" type="radio" name="sex" value="1" title="左对齐">
<input lay-filter="conterTitle" type="radio" name="sex" value="2" title="居中"
checked>
<input lay-filter="rightTitle" type="radio" name="sex" value="3" title="右对齐">
</div>
</div>
<div class="bg">
<div class="xColor showLin">背景</div>
<!-- <input type="radio" name="bg-radio" id="color" class="area-radio"></input> -->
<div id="test5" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
</div>
</form>
</div>
<div class="echarts_jt"> <div class="showLin" style="margin-left: 50px">加粗</div>
<div class="echartText">坐标轴 <div class="showLin" id="titleWeight" style="cursor: pointer">
<div num="579" name="false" onclick="iconBoxFun(event,'iconBox2')" id="iconBox2" class="iconBox1"><i class="layui-icon layui-icon-up"></i> <i class="layui-icon layui-icon-fonts-strong"></i>
</div> </div>
</div>
<form class="layui-form formBox" id="yDom" style="height: 579px;overflow:auto;">
<!-- <div style="height: 579px;overflow:auto;"> -->
<div class="echarts_attribute">
<div class="formText">X轴/度量</div>
<div class="axios_mar1" style="margin-top:10px">字体</div>
<div class="echartsTile axios_mar1">
<select id="XAxiosFontFamily" lay-filter="XAxiosFontFamily" name="city"
lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div> </div>
<div class="xSize showLin axios_mar1">字号</div> <div class="axios_mar1 axios_mar2">
<div class="xselect sizeInputBox showLin"> <div class="Titlep">水平对齐：</div>
<input id="xSize" type="text" name="title" required lay-verify="required" <div class="axios_mar axios_mar1">
autocomplete="off" class="layui-input"> <input
lay-filter="leftTitle"
type="radio"
name="sex"
value="1"
title="左对齐"
/>
<input
lay-filter="conterTitle"
type="radio"
name="sex"
value="2"
title="居中"
checked
/>
<input
lay-filter="rightTitle"
type="radio"
name="sex"
value="3"
title="右对齐"
/>
</div>
</div>
<div class="bg">
<div class="xColor showLin">背景</div>
<!-- <input type="radio" name="bg-radio" id="color" class="area-radio"></input> -->
<div
id="test5"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
</div> </div>
<div class="xColor showLin">颜色</div> </form>
<div id="test0" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div> </div>
<div class="formText formTextTop">
<div class="showLin">Y轴/维度</div> <div class="echarts_jt">
<div id="add" style="font-size:14px;color:#409EFF;float:right;margin-right:20px" <div class="echartText">
class="showLin">新增Y轴</div> 坐标轴
<div
num="579"
name="false"
onclick="iconBoxFun(event,'iconBox2')"
id="iconBox2"
class="iconBox1"
>
<i class="layui-icon layui-icon-up"></i>
</div> </div>
<div class="axios_mar1">y轴1</div> </div>
<div class="yBox yBox1 axios_mar1" name="1"> <form class="layui-form formBox" id="yDom" style="height: 579px; overflow: auto">
<div class="axios_mar1"> <!-- <div style="height: 579px;overflow:auto;"> -->
<input id="YtitleShow1" lay-filter="YtitleShow1" type="checkbox" checked> <div class="echarts_attribute">
<div class="showLin axisText">显示轴标题</div> <div class="formText">X轴/度量</div>
<div class="axios_mar1" style="margin-top: 10px">字体</div>
<div class="echartsTile axios_mar1">
<select
id="XAxiosFontFamily"
lay-filter="XAxiosFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div> </div>
<div class="showLin axios_mar1 inputBox"> <div class="xSize showLin axios_mar1">字号</div>
<input id="yName1" type="text" name="title" required lay-verify="required" <div class="xselect sizeInputBox showLin">
autocomplete="off" class="layui-input"> <input
id="xSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
<div class="axios_mar1"> <div class="xColor showLin">颜色</div>
<input id="YunitShow1" lay-filter="YunitShow1" type="checkbox" checked> <div
<div class="showLin axisText">显示轴单位</div> id="test0"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
<div class="formText formTextTop">
<div class="showLin">Y轴/维度</div>
<div
id="add"
style="
font-size: 14px;
color: #409eff;
float: right;
margin-right: 20px;
"
class="showLin"
>
新增Y轴
</div>
</div> </div>
<div> <div class="axios_mar1">y轴1</div>
<div class="yBox yBox1 axios_mar1" name="1">
<div class="axios_mar1">
<input
id="YtitleShow1"
lay-filter="YtitleShow1"
type="checkbox"
checked
/>
<div class="showLin axisText">显示轴标题</div>
</div>
<div class="showLin axios_mar1 inputBox"> <div class="showLin axios_mar1 inputBox">
<input id="yUnite1" type="text" name="title" required <input
lay-verify="required" autocomplete="off" class="layui-input"> id="yName1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
</div> <div class="axios_mar1">
<div class="axios_mar1 axios_mar"> <input
<div class="showLin">最大值</div> id="YunitShow1"
<div class="showLin" style="width:90px"> lay-filter="YunitShow1"
<input id="yMax1" type="text" name="title" required type="checkbox"
lay-verify="required" autocomplete="off" class="layui-input"> checked
/>
<div class="showLin axisText">显示轴单位</div>
</div> </div>
<div class="showLin unit">最小值</div> <div>
<div class="showLin" style="width:90px"> <div class="showLin axios_mar1 inputBox">
<input id="yMin1" type="text" name="title" required <input
lay-verify="required" autocomplete="off" class="layui-input"> id="yUnite1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
<input id="yshow1" lay-filter="yshow1" type="checkbox" checked> <div class="axios_mar1 axios_mar">
<div class="showLin">自适应</div> <div class="showLin">最大值</div>
</div> <div class="showLin" style="width: 90px">
<div class="axios_mar1"> <input
<div class="axios_mar">轴样式</div> id="yMax1"
<div class="axios_mar1" style="margin-top:10px">字体</div> type="text"
<div class="echartsTile1 echartsTile axios_mar1"> name="title"
<select id="YAxiosFontFamily1" lay-filter="YAxiosFontFamily1" required
name="city" lay-verify="required"> lay-verify="required"
<option value="思源黑体">思源黑体</option> autocomplete="off"
<option value="微软雅黑">微软雅黑</option> class="layui-input"
<option value="宋体">宋体</option> />
<option value="黑体">黑体</option> </div>
<option value="楷体">楷体</option> <div class="showLin unit">最小值</div>
<option value="仿宋">仿宋</option> <div class="showLin" style="width: 90px">
</select> <input
id="yMin1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<input id="yshow1" lay-filter="yshow1" type="checkbox" checked />
<div class="showLin">自适应</div>
</div> </div>
<div class="axios_mar axios_mar1"> <div class="axios_mar1">
<div class="xSize showLin">字号:</div> <div class="axios_mar">轴样式</div>
<div class="xselect sizeInputBox showLin"> <div class="axios_mar1" style="margin-top: 10px">字体</div>
<input id="ySize1" type="text" name="title" required <div class="echartsTile1 echartsTile axios_mar1">
lay-verify="required" autocomplete="off" class="layui-input"> <select
id="YAxiosFontFamily1"
lay-filter="YAxiosFontFamily1"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="axios_mar axios_mar1">
<div class="xSize showLin">字号:</div>
<div class="xselect sizeInputBox showLin">
<input
id="ySize1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色</div>
<div
id="Ycolor1"
class="colorBlock colorBlock1 showLin"
style="margin-right: 60px"
onclick="colorclick()"
></div>
<input
id="yshowLine1"
lay-filter="yshowLine1"
type="checkbox"
checked
/>
<div class="showLin">分割线</div>
</div> </div>
<div class="xColor showLin">颜色</div>
<div id="Ycolor1" class="colorBlock colorBlock1 showLin"
style="margin-right: 60px;" onclick="colorclick()"></div>
<input id="yshowLine1" lay-filter="yshowLine1" type="checkbox" checked>
<div class="showLin">分割线</div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- </div> -->
<!-- </div> --> </form>
</form>
</div>
<div class="echarts_jt">
<div class="echartText">坐标系
<div num="120" name="false" onclick="iconBoxFun(event,'iconBox3')" id="iconBox3" class="iconBox"><i class="layui-icon layui-icon-up"></i>
</div>
</div> </div>
<form class="layui-form formBox">
<div> <div class="echarts_jt">
<div class="showLin">上边距</div> <div class="echartText">
<div class="showLin topMar"> 坐标系
<input id="topMar" type="text" name="title" required lay-verify="required" <div
autocomplete="off" class="layui-input"> num="120"
</div> name="false"
<div class="showLin">左边距</div> onclick="iconBoxFun(event,'iconBox3')"
<div class="showLin topMar"> id="iconBox3"
<input id="letfMar" type="text" name="title" required lay-verify="required" class="iconBox"
autocomplete="off" class="layui-input"> >
<i class="layui-icon layui-icon-up"></i>
</div> </div>
</div> </div>
<div class="axios_mar"> <form class="layui-form formBox">
<div class="showLin">下边距</div> <div>
<div class="showLin topMar"> <div class="showLin">上边距</div>
<input id="bottomMar" type="text" name="title" required lay-verify="required" <div class="showLin topMar">
autocomplete="off" class="layui-input"> <input
id="topMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin">左边距</div>
<div class="showLin topMar">
<input
id="letfMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
<div class="showLin">右边距</div> <div class="axios_mar">
<div class="showLin topMar"> <div class="showLin">下边距</div>
<input id="rightMar" type="text" name="title" required lay-verify="required" <div class="showLin topMar">
autocomplete="off" class="layui-input"> <input
id="bottomMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin">右边距</div>
<div class="showLin topMar">
<input
id="rightMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
</div> </form>
</form>
</div>
<div class="echartText">
辅助线
<div id="addAuxiliary" style="font-size:14px;color:#409EFF;float:right;margin-right:20px"
class="showLin">新增辅助线</div>
</div>
<form class="layui-form formBox" style="max-height: 160px; overflow: auto;">
<div class="auxiliary_box">
</div> </div>
</form>
<div class="echarts_jt"> <div class="echartText">
<div class="echartText">图例 辅助线
<div num="222" name="false" onclick="iconBoxFun(event,'iconBox4')" id="iconBox4" class="iconBox"><i class="layui-icon layui-icon-up"></i> <div
id="addAuxiliary"
style="font-size: 14px; color: #409eff; float: right; margin-right: 20px"
class="showLin"
>
新增辅助线
</div> </div>
</div> </div>
<form class="layui-form formBox"> <form class="layui-form formBox" style="max-height: 160px; overflow: auto">
<div> <div class="auxiliary_box"></div>
<input id="legendShow" lay-filter="legendShow" type="checkbox" checked> </form>
<div class="showLin">显示图例</div>
</div> <div class="echarts_jt">
<div class="axios_mar1 axios_mar"> <div class="echartText">
<div class="axios_mar3"> 图例
<input lay-filter="rightLegend" type="radio" name="sex" value="4" title="右侧" <div
checked> num="222"
<input lay-filter="leftLegend" type="radio" name="sex" value="7" title="左侧"> name="false"
<input lay-filter="bottomLegend" type="radio" name="sex" value="5" title="底部"> onclick="iconBoxFun(event,'iconBox4')"
<input lay-filter="topLegend" type="radio" name="sex" value="6" title="顶部"> id="iconBox4"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div> </div>
<div style="margin-top:10px">字体</div>
<div class="echartsTile">
<select id="LegendFontFamily" lay-filter="LegendFontFamily" name="city"
lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div> </div>
<div class="axios_mar"> <form class="layui-form formBox">
<div class="xSize showLin">字号:</div> <div>
<div class="xselect sizeInputBox showLin"> <input id="legendShow" lay-filter="legendShow" type="checkbox" checked />
<input id="legendSize" type="text" name="title" required lay-verify="required" <div class="showLin">显示图例</div>
autocomplete="off" class="layui-input">
</div> </div>
<div class="xColor showLin">颜色</div> <div class="axios_mar1 axios_mar">
<div id="test3" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div> <div class="axios_mar3">
</div> <input
</div> lay-filter="rightLegend"
</form> type="radio"
</div> name="sex"
value="4"
title="右侧"
checked
/>
<input
lay-filter="leftLegend"
type="radio"
name="sex"
value="7"
title="左侧"
/>
<input
lay-filter="bottomLegend"
type="radio"
name="sex"
value="5"
title="底部"
/>
<input
lay-filter="topLegend"
type="radio"
name="sex"
value="6"
title="顶部"
/>
</div>
<div class="echarts_jt"> <div style="margin-top: 10px">字体</div>
<div class="echartText">数值标签 <div class="echartsTile">
<div num="184" name="false" onclick="iconBoxFun(event,'iconBox5')" id="iconBox5" class="iconBox"><i class="layui-icon layui-icon-up"></i> <select
</div> id="LegendFontFamily"
lay-filter="LegendFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="axios_mar">
<div class="xSize showLin">字号:</div>
<div class="xselect sizeInputBox showLin">
<input
id="legendSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色</div>
<div
id="test3"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
</div>
</div>
</form>
</div> </div>
<form class="layui-form formBox">
<div>样式</div> <div class="echarts_jt">
<div class="axios_mar axios_mar1"> <div class="echartText">
<input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked> 数值标签
<div class="showLin">显示数值</div> <div
<div class="echartsTile"> num="184"
<select id="TextFontFamily" lay-filter="TextFontFamily" name="city" name="false"
lay-verify="required"> onclick="iconBoxFun(event,'iconBox5')"
<option value="思源黑体">思源黑体</option> id="iconBox5"
<option value="微软雅黑">微软雅黑</option> class="iconBox"
<option value="宋体">宋体</option> >
<option value="黑体">黑体</option> <i class="layui-icon layui-icon-up"></i>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div> </div>
</div> </div>
<div class="axios_mar"> <form class="layui-form formBox">
<div class="xSize showLin axios_mar1">字号:</div> <div>样式</div>
<div class="xselect sizeInputBox showLin"> <div class="axios_mar axios_mar1">
<input id="LabelSize" type="text" name="title" required lay-verify="required" <input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked />
autocomplete="off" class="layui-input"> <div class="showLin">显示数值</div>
<div class="echartsTile">
<select
id="TextFontFamily"
lay-filter="TextFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
</div> </div>
<div class="xColor showLin">颜色:</div> <div class="axios_mar">
<div id="test4" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div> <div class="xSize showLin axios_mar1">字号:</div>
</div> <div class="xselect sizeInputBox showLin">
</form> <input
</div> id="LabelSize"
type="text"
<div class="echarts_jt"> name="title"
<div class="echartText">配色方案 required
<div num="93" name="false" onclick="iconBoxFun(event,'iconBox6')" id="iconBox6" class="iconBox"><i class="layui-icon layui-icon-up"></i> lay-verify="required"
</div> autocomplete="off"
</div> class="layui-input"
<form class="layui-form formBox"> />
<div> </div>
<div class="showLin fgBox">风格一</div> <div class="xColor showLin">颜色:</div>
<div id="style1" class="showLin fgBoxChild"> <div
<div class="showLin fgBlock fg11"></div> id="test4"
<div class="showLin fgBlock fg12"></div> class="colorBlock colorBlock1 showLin"
<div class="showLin fgBlock fg13"></div> onclick="colorclick()"
<div class="showLin fgBlock fg14"></div> ></div>
<div class="showLin fgBlock fg15"></div>
<div class="showLin fgBlock fg16"></div>
</div> </div>
<div class="showLin fgBox">风格一</div> </form>
<div id="style2" class="showLin fgBoxChild"> </div>
<div class="showLin fgBlock fg21"></div>
<div class="showLin fgBlock fg22"></div> <div class="echarts_jt">
<div class="showLin fgBlock fg23"></div> <div class="echartText">
<div class="showLin fgBlock fg24"></div> 配色方案
<div class="showLin fgBlock fg25"></div> <div
<div class="showLin fgBlock fg26"></div> num="93"
name="false"
onclick="iconBoxFun(event,'iconBox6')"
id="iconBox6"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div> </div>
</div> </div>
<div> <form class="layui-form formBox">
<div class="showLin fgBox">风格三</div> <div>
<div id="style3" class="showLin fgBoxChild"> <div class="showLin fgBox">风格一</div>
<div class="showLin fgBlock fg31"></div> <div id="style1" class="showLin fgBoxChild">
<div class="showLin fgBlock fg32"></div> <div class="showLin fgBlock fg11"></div>
<div class="showLin fgBlock fg33"></div> <div class="showLin fgBlock fg12"></div>
<div class="showLin fgBlock fg34"></div> <div class="showLin fgBlock fg13"></div>
<div class="showLin fgBlock fg35"></div> <div class="showLin fgBlock fg14"></div>
<div class="showLin fgBlock fg36"></div> <div class="showLin fgBlock fg15"></div>
<div class="showLin fgBlock fg16"></div>
</div>
<div class="showLin fgBox">风格一</div>
<div id="style2" class="showLin fgBoxChild">
<div class="showLin fgBlock fg21"></div>
<div class="showLin fgBlock fg22"></div>
<div class="showLin fgBlock fg23"></div>
<div class="showLin fgBlock fg24"></div>
<div class="showLin fgBlock fg25"></div>
<div class="showLin fgBlock fg26"></div>
</div>
</div> </div>
<div>
<div class="showLin fgBox">风格三</div>
<div id="style3" class="showLin fgBoxChild">
<div class="showLin fgBlock fg31"></div>
<div class="showLin fgBlock fg32"></div>
<div class="showLin fgBlock fg33"></div>
<div class="showLin fgBlock fg34"></div>
<div class="showLin fgBlock fg35"></div>
<div class="showLin fgBlock fg36"></div>
</div>
<div class="showLin fgBox">风格四</div> <div class="showLin fgBox">风格四</div>
<div id="style4" class="showLin fgBoxChild"> <div id="style4" class="showLin fgBoxChild">
<div class="showLin fgBlock fg41"></div> <div class="showLin fgBlock fg41"></div>
<div class="showLin fgBlock fg42"></div> <div class="showLin fgBlock fg42"></div>
<div class="showLin fgBlock fg43"></div> <div class="showLin fgBlock fg43"></div>
<div class="showLin fgBlock fg44"></div> <div class="showLin fgBlock fg44"></div>
<div class="showLin fgBlock fg45"></div> <div class="showLin fgBlock fg45"></div>
<div class="showLin fgBlock fg46"></div> <div class="showLin fgBlock fg46"></div>
</div>
</div> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script src="../js/moment.js"></script>
<script src="../js/moment.js"></script> <script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script> <!-- 引入axiox -->
<!-- 引入axiox --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="../utils/request_browserify.js"></script>
<script src="../utils/request.js"></script> <!-- <script src="../js/color.js"></script> -->
<!-- <script src="../js/color.js"></script> --> <script src="../js/echarts.js"></script>
<script src="../js/echarts.js"></script> <script src="../js/ecStat.js"></script>
<script src="../js/ecStat.js"></script> <script>
<script> var echartsType = 'line'
var echartsType = 'line' </script>
</script> <script type="text/html" id="titleTpl">
<script type="text/html" id="titleTpl"> <!-- 变量配置 -->
<!-- 变量配置 --> <div style="position:absolute;top:0;left:0;width:78%;height:100%">
<div style="position:absolute;top:0;left:0;width:78%;height:100%"> <input
<input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input" value="{{d.selsectVar}}"> lay-event="var"
</div> id="varIpt"
</script> name="selsectVar"
<script type="text/html" id="titleColor"> class="varSelect layui-input"
<!-- 颜色选择器 --> value="{{d.selsectVar}}"
<div id="color{{d.NO}}"></div> />
<div lay-event="delete" class="DataDelete"> </div>
<i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i> </script>
</div> <script type="text/html" id="titleColor">
</script> <!-- 颜色选择器 -->
<script type="text/html" id="selectAxis"> <div id="color{{d.NO}}"></div>
<!-- 轴选择 --> <div lay-event="delete" class="DataDelete">
<div class="selectAxis"> <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
<select lay-event="type" class="select" value="d.moreAxis" lay-ignore> </div>
{{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# if(d.moreAxisArr[i]==d.moreAxis){ }} <option </script>
value="{{i}}" selected>{{d.moreAxisArr[i]}}</option> <script type="text/html" id="selectAxis">
{{# }else{ }} <!-- 轴选择 -->
<option value="{{i}}">{{d.moreAxisArr[i]}}</option> <div class="selectAxis">
{{# } }} <select lay-event="type" class="select" value="d.moreAxis" lay-ignore>
{{# } }} {{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# if(d.moreAxisArr[i]==d.moreAxis){ }}
</select> <option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
</div> {{# }else{ }}
</script> <option value="{{i}}">{{d.moreAxisArr[i]}}</option>
<script src="../js/color.js"></script> {{# } }} {{# } }}
<script src="./折线图.js"></script> </select>
<script src="../js/varEcharts.js"></script> </div>
<script src="../js/guide.js"></script> </script>
<script> <script src="../js/color.js"></script>
document.onkeydown = function (e) { <script src="./折线图.js"></script>
if(e.keyCode == 90){ <script src="../js/varEcharts.js"></script>
window.parent.goback() <script src="../js/guide.js"></script>
}else if(e.keyCode == 89){ <script>
window.parent.backgo() document.onkeydown = function (e) {
if (e.keyCode == 90) {
window.parent.goback()
} else if (e.keyCode == 89) {
window.parent.backgo()
}
} }
} function colorclick() {
function colorclick(){ // for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){ // console.log($('.bodycolorcover',parent.document))
// console.log($('.bodycolorcover',parent.document)) // $($('.bodycolorcover',parent.document)[i1]).show()
// $($('.bodycolorcover',parent.document)[i1]).show() // }
// } // $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) }
// $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) </script>
</body>
} </html>
</script>
</body>
</html>
\ No newline at end of file
折线图/折线图.js
View file @ 16c359b4
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
* @Description: 这是***页面（组件） * @Description: 这是***页面（组件）
* @Date: 2021-03-04 18:52:19 * @Date: 2021-03-04 18:52:19
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-06 17:35:11 * @LastEditTime: 2021-09-14 19:08:34
*/ */
var layer = layui.layer; var layer = layui.layer;
var form = layui.form; var form = layui.form;
...@@ -814,7 +814,7 @@ function LineinitEchart(data,name,type){ ...@@ -814,7 +814,7 @@ function LineinitEchart(data,name,type){
var dom = '' var dom = ''
for(let i=0;i<YAxisesArr.length;i++){ for(let i=0;i<YAxisesArr.length;i++){
if(i != 0){ if(i != 0){
let = yBox = YAxisesArr[i].yIndex let yBox = YAxisesArr[i].yIndex
dom = dom + `<div style="margin-top:16px;" class="yBox${yBox} deleteYBox left2">y轴${yBox}</div> dom = dom + `<div style="margin-top:16px;" class="yBox${yBox} deleteYBox left2">y轴${yBox}</div>
<div class="yBox yBox${yBox} deleteYBox" style="position:relative" name="${yBox}"> <div class="yBox yBox${yBox} deleteYBox" style="position:relative" name="${yBox}">
......
折线图/折线图变量.html
View file @ 16c359b4
...@@ -2,193 +2,217 @@ ...@@ -2,193 +2,217 @@
* @Description: 这是折线图页面（组件） * @Description: 这是折线图页面（组件）
* @Date: 2021-03-02 16:27:32 * @Date: 2021-03-02 16:27:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 16:01:14 * @LastEditTime: 2021-09-14 19:04:39
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<script> <script src="../js/domainSetting.js"></script>
// 离开页面保存功能代码(移动至此处) <link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
if (window.location.host.indexOf('127.0.0') === -1) { <script src="../layui/layui.all.js"></script>
// 测试 && 开发：sycdev.com <link rel="stylesheet" href="../layui/css/layui.css" />
// 正式： shengyc.com <link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
document.domain = 'shengyc.com' || ''; <style type="text/css">
} .layui-form-checkbox i {
</script> border-left: -1px;
<link rel="stylesheet" href="../css/clearCss.css" type="text/css"/> }
<script src="../layui/layui.all.js"></script> .layui-form-checkbox {
<link rel="stylesheet" href="../layui/css/layui.css"> margin-right: 0px;
<link rel="stylesheet" href="../css/柱形图.css" type="text/css"/> }
<style type="text/css"> .layui-form-radio {
.layui-form-checkbox i{ margin: 0;
border-left:-1px; }
} button[colorpicker-events='clear'] {
.layui-form-checkbox{ display: none;
margin-right:0px; }
} html,
.layui-form-radio{ head,
margin:0; body {
} height: 100%;
button[colorpicker-events="clear"]{ }
display: none; .layui-form-select dl dd.layui-this {
} background-color: #a4ccf5 !important;
html,head,body{ }
height: 100%;; </style>
} <body>
.layui-form-select dl dd.layui-this{ <div class="BarChart">
background-color: #a4ccf5 !important; <div class="Barchart_conter clearfix">
} <div class="BarChart_left left">
</style> <div class="BarChart_var clearfix">
<body> <div class="left var_left">
<div class="BarChart"> <div style="margin-top: 12px; margin-bottom: 14px; font-size: 14px">数据</div>
<div class="Barchart_conter clearfix"> <div>
<div class="BarChart_left left"> <form class="layui-form formBox">
<div class="BarChart_var clearfix"> <div style="margin-bottom: 10px; font-size: 14px">数据关联：</div>
<div class="left var_left"> <div class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<div style="margin-top:12px;margin-bottom:14px;font-size:14px">数据</div> <select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<div> <option value="实时数据">实时数据</option>
<form class="layui-form formBox"> <option value="历史数据">历史数据</option>
<div style="margin-bottom:10px;font-size:14px">数据关联：</div> <!-- <option value="统计数据">统计数据</option> -->
<div class="showLin" style="margin-left:20px;width:400px;height: 32px;"> <option value="业务数据">业务数据</option>
<select lay-filter="data" name="city" id="data-relate" lay-verify="required"> </select>
<option value="实时数据">实时数据</option> </div>
<option value="历史数据">历史数据</option> </form>
<!-- <option value="统计数据">统计数据</option> --> <form
<option value="业务数据">业务数据</option> class="layui-form formBox"
</select> lay-filter="form-data"
</div> style="padding-top: 0; display: none"
</form> id="data-sheet"
<form class="layui-form formBox" lay-filter="form-data" style="padding-top: 0; display: none;" id="data-sheet" > >
<div style="margin-bottom:10px;font-size:14px">数据表：</div> <div style="margin-bottom: 10px; font-size: 14px">数据表：</div>
<div class="showLin" style="margin-left:20px;width:400px;height: 32px;"> <div class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<select lay-filter="chart-data" name="city" id="chart-table" lay-verify="required"> <select
<!-- <option value="实时数据">实时数据</option> lay-filter="chart-data"
name="city"
id="chart-table"
lay-verify="required"
>
<!-- <option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option> <option value="历史数据">历史数据</option>
<option value="业务数据">业务数据</option> --> <option value="业务数据">业务数据</option> -->
</select> </select>
</div> </div>
</form> </form>
</div>
<div id="varTitle" class="varTitle">纵轴/度量(3/10)</div>
<div class="table formBox1">
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<div class="newAdd">
<i class="layui-icon layui-icon-add-1" style="color:rgba(64, 158, 255, 1)"></i>
新增
</div> </div>
</div> <div id="varTitle" class="varTitle">纵轴/度量(3/10)</div>
<div class="varTitle">横轴/维度</div> <div class="table formBox1">
<div class="varType" id="axial" style="display: none;" > <table class="layui-hide" id="demo" lay-filter="demo"></table>
<form class="layui-form" lay-filter="form-dimen"> <div class="newAdd">
<div style="width:90px;height: 32px;padding-bottom:14px"> <i class="layui-icon layui-icon-add-1" style="color: rgba(64, 158, 255, 1)"></i>
<select lay-filter="data-dimen" name="city" id="data-dimen" placeholder="请选择" lay-verify="required"> 新增
<option value="时间">时间</option>
<option value="变量">变量</option>
</select>
</div>
<div id="data-content" >
</div>
</form>
</div>
<div class="varType" id="realTime" style="display: none;" >
<form class="layui-form" lay-filter="form-dateFormat">
<div style="width: 100%;height: 32px;padding-bottom:14px">
<span>数据个数：</span>最近
<div class="showLin" style="width:90px;height: 32px;margin: 0 3px">
<input type="text" name="title" required lay-verify="required" autocomplete="off" id="realtime-count-input" onblur="getrealTime(event)" class="layui-input">
</div>个数据
</div> </div>
<div class="showLin" style="margin-right:24px">时间格式</div> </div>
<div class="showLin" style="width:200px;height:32px"> <div class="varTitle">横轴/维度</div>
<select lay-filter="data-time" id="data-time" name="city" placeholder="请选择" lay-verify="required"> <div class="varType" id="axial" style="display: none">
<form class="layui-form" lay-filter="form-dimen">
<div style="width: 90px; height: 32px; padding-bottom: 14px">
<select
lay-filter="data-dimen"
name="city"
id="data-dimen"
placeholder="请选择"
lay-verify="required"
>
<option value="时间">时间</option>
<option value="变量">变量</option>
</select> </select>
</div> </div>
</form> <div id="data-content"></div>
</div> </form>
</div>
<div class="varType" id="realTime" style="display: none">
<form class="layui-form" lay-filter="form-dateFormat">
<div style="width: 100%; height: 32px; padding-bottom: 14px">
<span>数据个数：</span>最近
<div class="showLin" style="width: 90px; height: 32px; margin: 0 3px">
<input
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
id="realtime-count-input"
onblur="getrealTime(event)"
class="layui-input"
/>
</div>
个数据
</div>
<div class="showLin" style="margin-right: 24px">时间格式</div>
<div class="showLin" style="width: 200px; height: 32px">
<select
lay-filter="data-time"
id="data-time"
name="city"
placeholder="请选择"
lay-verify="required"
></select>
</div>
</form>
</div>
<div class="ax-table" id="ax-table" > <div class="ax-table" id="ax-table">
<div class="table formBox1"> <div class="table formBox1">
<table class="layui-hide" id="table-demo" lay-filter="table-demo"></table> <table class="layui-hide" id="table-demo" lay-filter="table-demo"></table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script src="../js/moment.js"></script>
<script src="../js/moment.js"></script> <script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script> <!-- 引入axiox -->
<!-- 引入axiox --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="../utils/request_browserify.js"></script>
<script src="../utils/request.js"></script> <!-- <script src="../js/color.js"></script> -->
<!-- <script src="../js/color.js"></script> --> <script src="../js/dropdown.js"></script>
<script src="../js/dropdown.js"></script> <!-- <script src="../js/echarts.js"></script> -->
<!-- <script src="../js/echarts.js"></script> --> <!-- <script???? src="../js/ecStat.js"></script????> -->
<!-- <script???? src="../js/ecStat.js"></script????> --> <script>
<script> var echartsType = 'line'
var echartsType = 'line' </script>
</script> <script type="text/html" id="titleTpl">
<script type="text/html" id="titleTpl"> <!-- 变量配置 -->
<!-- 变量配置 --> <div style="position:absolute;top:0;left:0;width:78%;height:100%">
<div style="position:absolute;top:0;left:0;width:78%;height:100%"> <input
<input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input" value="{{d.selsectVar}}"> lay-event="var"
</div> id="varIpt"
</script> name="selsectVar"
<script type="text/html" id="titleColor"> class="varSelect layui-input"
<!-- 颜色选择器 --> value="{{d.selsectVar}}"
<div id="color{{d.NO}}" class="colorBlock1 colorBlock2"></div> />
<!-- <div lay-event="delete" class="DataDelete"> </div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}" class="colorBlock1 colorBlock2"></div>
<!-- <div lay-event="delete" class="DataDelete">
<i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i> <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
</div> --> </div> -->
{{# if(d.NO === 1){ }} {{# if(d.NO === 1){ }}
<span></span> <span></span>
{{# }else{ }} {{# }else{ }}
<div lay-event="delete" class="DataDelete"> <div lay-event="delete" class="DataDelete">
<i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i> <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
</div> </div>
{{# } }} {{# } }}
</script> </script>
<script type="text/html" id="selectAxis"> <script type="text/html" id="selectAxis">
<!-- 轴选择 --> <!-- 轴选择 -->
<div class="selectAxis"> <div class="selectAxis">
<select lay-event="type" class="select" value="d.moreAxis" lay-ignore> <select lay-event="type" class="select" value="d.moreAxis" lay-ignore>
{{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# if(d.moreAxisArr[i] == d.moreAxis){ }}
{{# if(d.moreAxisArr[i] == d.moreAxis){ }} <option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
<option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option> {{# }else{ }}
{{# }else{ }} <option value="{{i}}">{{d.moreAxisArr[i]}}</option>
<option value="{{i}}">{{d.moreAxisArr[i]}}</option> {{# } }} {{# } }}
{{# } }}
{{# } }}
</select> </select>
</div> </div>
</script> </script>
<script type="text/html" id="valueAxis"> <script type="text/html" id="valueAxis">
<!-- 取值 --> <!-- 取值 -->
<div class="selectAxis"> <div class="selectAxis">
<select lay-event="type" class="select" value="d.rangevalue" lay-ignore> <select lay-event="type" class="select" value="d.rangevalue" lay-ignore>
{{# for(let i=0;i<d.valueAxisArr.length;i++){ }} {{# for(let i=0;i<d.valueAxisArr.length;i++){ }} {{# if(d.valueAxisArr[i].value == d.rangevalue){ }}
{{# if(d.valueAxisArr[i].value == d.rangevalue){ }} <option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option> {{# }else{ }}
{{# }else{ }} <option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option> {{# } }} {{# } }}
{{# } }} </select>
{{# } }} </div>
</select> </script>
</div> <script src="../js/color.js"></script>
</script> <script src="./折线图.js"></script>
<script src="../js/color.js"></script> <script src="../js/varEcharts.js"></script>
<script src="./折线图.js"></script> <script src="../js/guide.js"></script>
<script src="../js/varEcharts.js"></script> <script src="../js/guide.js"></script>
<script src="../js/guide.js"></script> </body>
<script src="../js/guide.js"></script> </html>
</body>
</html>
\ No newline at end of file
柱形图/柱形图.html
View file @ 16c359b4
...@@ -2,211 +2,232 @@ ...@@ -2,211 +2,232 @@
* @Description: 这是***页面（组件） * @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32 * @Date: 2021-03-02 16:27:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 17:54:13 * @LastEditTime: 2021-09-14 19:04:41
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="../js/domainSetting.js"></script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
<script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css" />
<link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
<style type="text/css">
.layui-form-checkbox i {
border-left: -1px;
}
<head> .layui-form-checkbox {
<meta charset="UTF-8"> margin-right: 0px;
<meta name="viewport" content="width=device-width, initial-scale=1.0"> }
<title>Document</title>
</head>
<script>
// 离开页面保存功能代码(移动至此处)
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
</script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
<script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
<style type="text/css">
.layui-form-checkbox i {
border-left: -1px;
}
.layui-form-checkbox { .layui-form-radio {
margin-right: 0px; margin: 0;
} }
.layui-form-radio { button[colorpicker-events='clear'] {
margin: 0; display: none;
} }
button[colorpicker-events="clear"] { html,
display: none; head,
} body {
height: 100%;
font-size: 13px;
color: #333333;
}
html, .axios_mar1 {
head, /* width: 23%; */
body { padding: 0 0 0 10px;
height: 100%; }
font-size: 13px;
color: #333333;
} .axios_mar2 .layui-form-radio {
width: 30%;
}
.axios_mar1 { .axios_mar3 .layui-form-radio {
/* width: 23%; */ width: 20%;
padding: 0 0 0 10px; }
} </style>
.axios_mar2 .layui-form-radio { <body>
width: 30%; <div class="BarChart">
} <div class="Barchart_conter clearfix">
<div class="BarChart_left left">
.axios_mar3 .layui-form-radio { <div class="BarChart_echarts clearfix">
width: 20%; <div class="echarts_left left">
}
</style>
<body>
<div class="BarChart">
<div class="Barchart_conter clearfix">
<div class="BarChart_left left">
<div class="BarChart_echarts clearfix">
<div class="echarts_left left">
<div class="echarts_jt">
<div class="echartText">图表配置
<div num="434" name="false" onclick="iconBoxFun(event,'iconBox1')" id="iconBox1" class="iconBox"><i class="layui-icon layui-icon-up"></i>
</div>
</div>
<form class="layui-form formBox">
<div class="barType">
<div>可视化样式</div>
<div class="axios_mar axios_mar1">
<input lay-filter="barType" type="radio" name="type" value="1" title="柱形图"
checked>
<input lay-filter="barType1" type="radio" name="type" value="2" title="堆积柱形图">
<input lay-filter="barType3" type="radio" name="type" value="3" title="条形图">
<input lay-filter="barType4" type="radio" name="type" value="4" title="堆积条形图">
</div>
</div>
<div class="showLin axios_mar">
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked>
显示主标题
</div>
<div class="showLin echartsTile axios_mar1">
<input id="title" maxlength="15" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="axios_mar1">
<div style="margin-top:10px">字体</div>
<div class="echartsTile">
<select id="TitleFontFamily" lay-filter="TitleFontFamily" name="city"
lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="xSize showLin">字号</div>
<div class="xselect sizeInputBox showLin">
<input id="titleSize" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
</div>
<div class="xColor showLin">颜色:</div>
<div id="test2" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
<div class="showLin" style="margin-left:50px">加粗</div>
<div class="showLin" id="titleWeight" style="cursor:pointer;">
<i class="layui-icon layui-icon-fonts-strong"></i>
</div>
</div>
<div class="axios_mar1 axios_mar2">
<div class="axios_mar">水平对齐</div>
<div class="axios_mar axios_mar1">
<input lay-filter="leftTitle" type="radio" name="sex" value="1" title="左对齐">
<input lay-filter="conterTitle" type="radio" name="sex" value="2" title="居中对齐"
checked>
<input lay-filter="rightTitle" type="radio" name="sex" value="3" title="右对齐">
</div>
</div>
<div class="axios_mar">
<div class="xColor showLin">背景</div>
<div id="test5" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
</div>
</form>
</div>
<div class="echarts_attribute">
<div class="echarts_jt"> <div class="echarts_jt">
<div class="echartText">坐标轴 <div class="echartText">
<div num="651" name="false" onclick="iconBoxFun(event,'iconBox2')" id="iconBox2" class="iconBox"><i class="layui-icon layui-icon-up"></i> 图表配置
<div
num="434"
name="false"
onclick="iconBoxFun(event,'iconBox1')"
id="iconBox1"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div> </div>
</div> </div>
<form class="layui-form formBox"> <form class="layui-form formBox">
<div class="xText">X轴/度量</div> <div class="barType">
<div class="axios_mar1" style="margin-top:10px">字体</div> <div>可视化样式</div>
<div class="echartsTile axios_mar1"> <div class="axios_mar axios_mar1">
<select id="XAxiosFontFamily" lay-filter="XAxiosFontFamily" name="city" <input
lay-verify="required"> lay-filter="barType"
<option value="思源黑体">思源黑体</option> type="radio"
<option value="微软雅黑">微软雅黑</option> name="type"
<option value="宋体">宋体</option> value="1"
<option value="黑体">黑体</option> title="柱形图"
<option value="楷体">楷体</option> checked
<option value="仿宋">仿宋</option> />
</select> <input
lay-filter="barType1"
type="radio"
name="type"
value="2"
title="堆积柱形图"
/>
<input
lay-filter="barType3"
type="radio"
name="type"
value="3"
title="条形图"
/>
<input
lay-filter="barType4"
type="radio"
name="type"
value="4"
title="堆积条形图"
/>
</div>
</div>
<div class="showLin axios_mar">
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked />
显示主标题
</div> </div>
<div class="xSize showLin axios_mar1">字号</div> <div class="showLin echartsTile axios_mar1">
<div class="xselect sizeInputBox showLin"> <input
<input id="xSize" type="text" name="title" required lay-verify="required" id="title"
autocomplete="off" class="layui-input"> maxlength="15"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
<div class="xColor showLin">颜色:</div>
<div id="test0" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
<div class="xText" style="margin-top:25px">y轴/维度</div>
<div class="axios_mar1" style="margin-top:10px">y轴1</div>
<div class="axios_mar1"> <div class="axios_mar1">
<div class="axios_mar1"> <div style="margin-top: 10px">字体</div>
<input id="YtitleShow1" lay-filter="YtitleShow1" type="checkbox" checked> <div class="echartsTile">
<div class="showLin axisText">显示轴标题</div> <select
</div> id="TitleFontFamily"
<div class="inputBox axios_mar1"> lay-filter="TitleFontFamily"
<input id="yName" type="text" name="title" required lay-verify="required" name="city"
autocomplete="off" class="layui-input"> lay-verify="required"
</div> >
<div class="axios_mar1"> <option value="思源黑体">思源黑体</option>
<input id="YunitShow1" lay-filter="YunitShow1" type="checkbox" checked> <option value="微软雅黑">微软雅黑</option>
<div class="showLin axisText">显示轴单位</div> <option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div> </div>
<div class="inputBox axios_mar1"> <div class="xSize showLin">字号</div>
<input id="yUnite" type="text" name="title" required lay-verify="required" <div class="xselect sizeInputBox showLin">
autocomplete="off" class="layui-input"> <input
id="titleSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div> </div>
<div class="xColor showLin">颜色:</div>
<div class="axios_mar1 axios_mar"> <div
<div class="showLin">最大值</div> id="test2"
<div class="showLin" style="width:90px"> class="colorBlock colorBlock1 showLin"
<input id="yMax" type="text" name="title" required lay-verify="required" onclick="colorclick()"
autocomplete="off" class="layui-input"> ></div>
<div class="showLin" style="margin-left: 50px">加粗</div>
<div class="showLin" id="titleWeight" style="cursor: pointer">
<i class="layui-icon layui-icon-fonts-strong"></i>
</div> </div>
<div class="showLin unit">最小值</div> </div>
<div class="showLin" style="width:90px"> <div class="axios_mar1 axios_mar2">
<input id="yMin" type="text" name="title" required lay-verify="required" <div class="axios_mar">水平对齐</div>
autocomplete="off" class="layui-input"> <div class="axios_mar axios_mar1">
<input
lay-filter="leftTitle"
type="radio"
name="sex"
value="1"
title="左对齐"
/>
<input
lay-filter="conterTitle"
type="radio"
name="sex"
value="2"
title="居中对齐"
checked
/>
<input
lay-filter="rightTitle"
type="radio"
name="sex"
value="3"
title="右对齐"
/>
</div> </div>
<input id="yshow" lay-filter="yshow" type="checkbox" checked>
<div class="showLin">自适应</div>
</div> </div>
<div class="axios_mar1"> <div class="axios_mar">
<div class=" axios_mar">轴样式</div> <div class="xColor showLin">背景</div>
<div
id="test5"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
</div>
</form>
</div>
<div class="axios_mar1" style="margin-top:10px">字体</div> <div class="echarts_attribute">
<div class="echartsTile1 echartsTile axios_mar1"> <div class="echarts_jt">
<select id="YAxiosFontFamily" lay-filter="YAxiosFontFamily" name="city" <div class="echartText">
lay-verify="required"> 坐标轴
<div
num="651"
name="false"
onclick="iconBoxFun(event,'iconBox2')"
id="iconBox2"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div>
</div>
<form class="layui-form formBox">
<div class="xText">X轴/度量</div>
<div class="axios_mar1" style="margin-top: 10px">字体</div>
<div class="echartsTile axios_mar1">
<select
id="XAxiosFontFamily"
lay-filter="XAxiosFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option> <option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option> <option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option> <option value="宋体">宋体</option>
...@@ -215,245 +236,489 @@ ...@@ -215,245 +236,489 @@
<option value="仿宋">仿宋</option> <option value="仿宋">仿宋</option>
</select> </select>
</div> </div>
<div class="axios_mar1 axios_mar"> <div class="xSize showLin axios_mar1">字号</div>
<div class="xSize showLin">字号</div> <div class="xselect sizeInputBox showLin">
<div class="xselect sizeInputBox showLin"> <input
<input id="ySize" type="text" name="title" required id="xSize"
lay-verify="required" autocomplete="off" class="layui-input"> type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色:</div>
<div
id="test0"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
<div class="xText" style="margin-top: 25px">y轴/维度</div>
<div class="axios_mar1" style="margin-top: 10px">y轴1</div>
<div class="axios_mar1">
<div class="axios_mar1">
<input
id="YtitleShow1"
lay-filter="YtitleShow1"
type="checkbox"
checked
/>
<div class="showLin axisText">显示轴标题</div>
</div>
<div class="inputBox axios_mar1">
<input
id="yName"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="axios_mar1">
<input
id="YunitShow1"
lay-filter="YunitShow1"
type="checkbox"
checked
/>
<div class="showLin axisText">显示轴单位</div>
</div>
<div class="inputBox axios_mar1">
<input
id="yUnite"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="axios_mar1 axios_mar">
<div class="showLin">最大值</div>
<div class="showLin" style="width: 90px">
<input
id="yMax"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin unit">最小值</div>
<div class="showLin" style="width: 90px">
<input
id="yMin"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<input id="yshow" lay-filter="yshow" type="checkbox" checked />
<div class="showLin">自适应</div>
</div> </div>
<div class="showLin">颜色</div> <div class="axios_mar1">
<div id="test1" class=" colorBlock colorBlock1 showLin" style="margin-right: 40px;" onclick="colorclick()"></div> <div class="axios_mar">轴样式</div>
<input id="yshowLine" lay-filter="yshowLine" type="checkbox" checked> <div class="axios_mar1" style="margin-top: 10px">字体</div>
<div class="showLin">分割线</div> <div class="echartsTile1 echartsTile axios_mar1">
<select
id="YAxiosFontFamily"
lay-filter="YAxiosFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="axios_mar1 axios_mar">
<div class="xSize showLin">字号</div>
<div class="xselect sizeInputBox showLin">
<input
id="ySize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin">颜色</div>
<div
id="test1"
class="colorBlock colorBlock1 showLin"
style="margin-right: 40px"
onclick="colorclick()"
></div>
<input
id="yshowLine"
lay-filter="yshowLine"
type="checkbox"
checked
/>
<div class="showLin">分割线</div>
</div>
</div>
</div> </div>
</div> </form>
</div> </div>
</form> <div class="echarts_jt">
</div> <div class="echartText">
<div class="echarts_jt"> 坐标系
<div class="echartText">坐标系 <div
<div num="120" name="false" onclick="iconBoxFun(event,'iconBox3')" id="iconBox3" class="iconBox"><i class="layui-icon layui-icon-up"></i> num="120"
</div> name="false"
</div> onclick="iconBoxFun(event,'iconBox3')"
<form class="layui-form formBox"> id="iconBox3"
<div> class="iconBox"
<div class="showLin">上边距</div> >
<div class="showLin topMar"> <i class="layui-icon layui-icon-up"></i>
<input id="topMar" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
</div>
<div class="showLin">下边距</div>
<div class="showLin topMar">
<input id="bottomMar" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
<div class="axios_mar"> <form class="layui-form formBox">
<div class="showLin">左边距</div> <div>
<div class="showLin topMar"> <div class="showLin">上边距</div>
<input id="letfMar" type="text" name="title" required lay-verify="required" <div class="showLin topMar">
autocomplete="off" class="layui-input"> <input
id="topMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin">下边距</div>
<div class="showLin topMar">
<input
id="bottomMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
<div class="showLin">右边距</div> <div class="axios_mar">
<div class="showLin topMar"> <div class="showLin">左边距</div>
<input id="rightMar" type="text" name="title" required lay-verify="required" <div class="showLin topMar">
autocomplete="off" class="layui-input"> <input
id="letfMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin">右边距</div>
<div class="showLin topMar">
<input
id="rightMar"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div> </div>
</div> </form>
</form>
</div>
<div class="echartText">
辅助线
<div id="addAuxiliary"
style="font-size:14px;color:#409EFF;float:right;margin-right:20px" class="showLin">
新增辅助线</div>
</div>
<form class="layui-form formBox" style="max-height: 160px; overflow: auto;">
<div class="auxiliary_box">
</div> </div>
</form>
<div class="echarts_jt"> <div class="echartText">
<div class="echartText">图例 辅助线
<div num="222" name="false" onclick="iconBoxFun(event,'iconBox4')" id="iconBox4" class="iconBox"><i class="layui-icon layui-icon-up"></i> <div
id="addAuxiliary"
style="font-size: 14px; color: #409eff; float: right; margin-right: 20px"
class="showLin"
>
新增辅助线
</div> </div>
</div> </div>
<form class="layui-form formBox"> <form class="layui-form formBox" style="max-height: 160px; overflow: auto">
<div> <div class="auxiliary_box"></div>
<input id="legendShow" lay-filter="legendShow" type="checkbox" checked>
<div class="showLin">显示图例</div>
</div>
<div class="axios_mar axios_mar1 axios_mar3">
<input lay-filter="leftLegend" type="radio" name="sex" value="7" title="左侧"
checked>
<input lay-filter="rightLegend" type="radio" name="sex" value="4" title="右侧"
checked>
<input lay-filter="bottomLegend" type="radio" name="sex" value="5" title="底部">
<input lay-filter="topLegend" type="radio" name="sex" value="6" title="顶部">
</div>
<div class="axios_mar1" style="margin-top:10px">字体</div>
<div class="echartsTile axios_mar1">
<select id="LegendFontFamily" lay-filter="LegendFontFamily" name="city"
lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="axios_mar axios_mar1">
<div class="xSize showLin">字号</div>
<div class="xselect sizeInputBox showLin">
<input id="LegendSize" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="xColor showLin">颜色</div>
<div id="test3" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
</div>
</form> </form>
</div>
<div class="echarts_jt"> <div class="echarts_jt">
<div class="echartText">数值标签 <div class="echartText">
<div num="184" name="false" onclick="iconBoxFun(event,'iconBox5')" id="iconBox5" class="iconBox"><i class="layui-icon layui-icon-up"></i> 图例
</div> <div
</div> num="222"
<form class="layui-form formBox"> name="false"
<div>样式</div> onclick="iconBoxFun(event,'iconBox4')"
<div class="axios_mar1 axios_mar"> id="iconBox4"
<input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked> class="iconBox"
<div class="showLin">显示数值</div> >
</div> <i class="layui-icon layui-icon-up"></i>
<div class="echartsTile1 echartsTile axios_mar1">
<select id="LabelFontFamily" lay-filter="LabelFontFamily" name="city"
lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="axios_mar axios_mar1">
<div class="xSize showLin">字号</div>
<div class="xselect sizeInputBox showLin">
<input id="LabelSize" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
</div> </div>
<div class="xColor showLin">颜色</div>
<div id="test4" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
</div> </div>
</form> <form class="layui-form formBox">
</div> <div>
<input id="legendShow" lay-filter="legendShow" type="checkbox" checked />
<div class="showLin">显示图例</div>
</div>
<div class="axios_mar axios_mar1 axios_mar3">
<input
lay-filter="leftLegend"
type="radio"
name="sex"
value="7"
title="左侧"
checked
/>
<input
lay-filter="rightLegend"
type="radio"
name="sex"
value="4"
title="右侧"
checked
/>
<input
lay-filter="bottomLegend"
type="radio"
name="sex"
value="5"
title="底部"
/>
<input
lay-filter="topLegend"
type="radio"
name="sex"
value="6"
title="顶部"
/>
</div>
<div class="axios_mar1" style="margin-top: 10px">字体</div>
<div class="echartsTile axios_mar1">
<select
id="LegendFontFamily"
lay-filter="LegendFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="axios_mar axios_mar1">
<div class="xSize showLin">字号</div>
<div class="xselect sizeInputBox showLin">
<input
id="LegendSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色</div>
<div
id="test3"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
</div>
</form>
</div>
<div class="echarts_jt"> <div class="echarts_jt">
<div class="echartText">配色方案 <div class="echartText">
<div num="93" name="false" onclick="iconBoxFun(event,'iconBox6')" id="iconBox6" class="iconBox"><i class="layui-icon layui-icon-up"></i> 数值标签
<div
num="184"
name="false"
onclick="iconBoxFun(event,'iconBox5')"
id="iconBox5"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div>
</div> </div>
</div> <form class="layui-form formBox">
<form class="layui-form formBox"> <div>样式</div>
<div> <div class="axios_mar1 axios_mar">
<div class="showLin fgBox">风格一</div> <input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked />
<div id="style1" class="showLin fgBoxChild"> <div class="showLin">显示数值</div>
<div class="showLin fgBlock fg11"></div>
<div class="showLin fgBlock fg12"></div>
<div class="showLin fgBlock fg13"></div>
<div class="showLin fgBlock fg14"></div>
<div class="showLin fgBlock fg15"></div>
<div class="showLin fgBlock fg16"></div>
</div> </div>
<div class="showLin fgBox">风格一</div> <div class="echartsTile1 echartsTile axios_mar1">
<div id="style2" class="showLin fgBoxChild"> <select
<div class="showLin fgBlock fg21"></div> id="LabelFontFamily"
<div class="showLin fgBlock fg22"></div> lay-filter="LabelFontFamily"
<div class="showLin fgBlock fg23"></div> name="city"
<div class="showLin fgBlock fg24"></div> lay-verify="required"
<div class="showLin fgBlock fg25"></div> >
<div class="showLin fgBlock fg26"></div> <option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div> </div>
</div> <div class="axios_mar axios_mar1">
<div> <div class="xSize showLin">字号</div>
<div class="showLin fgBox">风格三</div> <div class="xselect sizeInputBox showLin">
<div id="style3" class="showLin fgBoxChild"> <input
<div class="showLin fgBlock fg31"></div> id="LabelSize"
<div class="showLin fgBlock fg32"></div> type="text"
<div class="showLin fgBlock fg33"></div> name="title"
<div class="showLin fgBlock fg34"></div> required
<div class="showLin fgBlock fg35"></div> lay-verify="required"
<div class="showLin fgBlock fg36"></div> autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色</div>
<div
id="test4"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
</div> </div>
<div class="showLin fgBox">风格四</div> </form>
<div id="style4" class="showLin fgBoxChild"> </div>
<div class="showLin fgBlock fg41"></div>
<div class="showLin fgBlock fg42"></div> <div class="echarts_jt">
<div class="showLin fgBlock fg43"></div> <div class="echartText">
<div class="showLin fgBlock fg44"></div> 配色方案
<div class="showLin fgBlock fg45"></div> <div
<div class="showLin fgBlock fg46"></div> num="93"
name="false"
onclick="iconBoxFun(event,'iconBox6')"
id="iconBox6"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div> </div>
</div> </div>
</form> <form class="layui-form formBox">
<div>
<div class="showLin fgBox">风格一</div>
<div id="style1" class="showLin fgBoxChild">
<div class="showLin fgBlock fg11"></div>
<div class="showLin fgBlock fg12"></div>
<div class="showLin fgBlock fg13"></div>
<div class="showLin fgBlock fg14"></div>
<div class="showLin fgBlock fg15"></div>
<div class="showLin fgBlock fg16"></div>
</div>
<div class="showLin fgBox">风格一</div>
<div id="style2" class="showLin fgBoxChild">
<div class="showLin fgBlock fg21"></div>
<div class="showLin fgBlock fg22"></div>
<div class="showLin fgBlock fg23"></div>
<div class="showLin fgBlock fg24"></div>
<div class="showLin fgBlock fg25"></div>
<div class="showLin fgBlock fg26"></div>
</div>
</div>
<div>
<div class="showLin fgBox">风格三</div>
<div id="style3" class="showLin fgBoxChild">
<div class="showLin fgBlock fg31"></div>
<div class="showLin fgBlock fg32"></div>
<div class="showLin fgBlock fg33"></div>
<div class="showLin fgBlock fg34"></div>
<div class="showLin fgBlock fg35"></div>
<div class="showLin fgBlock fg36"></div>
</div>
<div class="showLin fgBox">风格四</div>
<div id="style4" class="showLin fgBoxChild">
<div class="showLin fgBlock fg41"></div>
<div class="showLin fgBlock fg42"></div>
<div class="showLin fgBlock fg43"></div>
<div class="showLin fgBlock fg44"></div>
<div class="showLin fgBlock fg45"></div>
<div class="showLin fgBlock fg46"></div>
</div>
</div>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script src="../js/moment.js"></script>
<script src="../js/moment.js"></script> <script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script> <!-- 引入axiox -->
<!-- 引入axiox --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="../utils/request_browserify.js"></script>
<script src="../utils/request.js"></script> <script src="../js/echarts.js"></script>
<script src="../js/echarts.js"></script> <script src="../js/ecStat.js"></script>
<script src="../js/ecStat.js"></script> <script>
<script> var echartsType = 'bar'
</script>
var echartsType = 'bar' <script type="text/html" id="titleTpl">
</script> <!-- 变量配置 -->
<script type="text/html" id="titleTpl"> <div style="position:absolute;top:0;left:0;width:78%;height:100%">
<!-- 变量配置 --> <input
<div style="position:absolute;top:0;left:0;width:78%;height:100%"> lay-event="var"
<input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input" value="{{d.selsectVar}}"> id="varIpt"
<div class="varSelectBox">...</div> name="selsectVar"
</div> class="varSelect layui-input"
</script> value="{{d.selsectVar}}"
<script type="text/html" id="titleColor"> />
<!-- 颜色选择器 --> <div class="varSelectBox">...</div>
<div id="color{{d.NO}}"></div> </div>
<div lay-event="delete" class="DataDelete"> </script>
<i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i> <script type="text/html" id="titleColor">
</div> <!-- 颜色选择器 -->
</script> <div id="color{{d.NO}}"></div>
<script src="../js/color.js"></script> <div lay-event="delete" class="DataDelete">
<script src="./柱形图.js" aysnc="aysnc"></script> <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
<script src="../js/varEcharts.js" aysnc="aysnc"></script> </div>
<script src="../js/guide.js" aysnc="aysnc"></script> </script>
<script> <script src="../js/color.js"></script>
document.onkeydown = function (e) { <script src="./柱形图.js" aysnc="aysnc"></script>
<script src="../js/varEcharts.js" aysnc="aysnc"></script>
if(e.keyCode == 90){ <script src="../js/guide.js" aysnc="aysnc"></script>
window.parent.goback() <script>
}else if(e.keyCode == 89){ document.onkeydown = function (e) {
window.parent.backgo() if (e.keyCode == 90) {
} window.parent.goback()
} } else if (e.keyCode == 89) {
function colorclick(){ window.parent.backgo()
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){ }
// $($('.bodycolorcover',parent.document)[i1]).show() }
// } function colorclick() {
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // $($('.bodycolorcover',parent.document)[i1]).show()
// $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // }
// $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
} // $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
</script> }
</body> </script>
</body>
</html> </html>
\ No newline at end of file
柱形图/柱形图变量.html
View file @ 16c359b4
...@@ -2,191 +2,214 @@ ...@@ -2,191 +2,214 @@
* @Description: 这是***页面（组件） * @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32 * @Date: 2021-03-02 16:27:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 15:38:55 * @LastEditTime: 2021-09-14 19:04:44
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<script> <script src="../js/domainSetting.js"></script>
// 离开页面保存功能代码(移动至此处) <link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
if (window.location.host.indexOf('127.0.0') === -1) { <script src="../layui/layui.all.js"></script>
// 测试 && 开发：sycdev.com <link rel="stylesheet" href="../layui/css/layui.css" />
// 正式： shengyc.com <link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
document.domain = 'shengyc.com' || ''; <style type="text/css">
} .layui-form-checkbox i {
</script> border-left: -1px;
<link rel="stylesheet" href="../css/clearCss.css" type="text/css"/> }
<script src="../layui/layui.all.js"></script> .layui-form-checkbox {
<link rel="stylesheet" href="../layui/css/layui.css"> margin-right: 0px;
<link rel="stylesheet" href="../css/柱形图.css" type="text/css"/> }
<style type="text/css"> .layui-form-radio {
.layui-form-checkbox i{ margin: 0;
border-left:-1px; }
} button[colorpicker-events='clear'] {
.layui-form-checkbox{ display: none;
margin-right:0px; }
} html,
.layui-form-radio{ head,
margin:0; body {
} height: 100%;
button[colorpicker-events="clear"]{ }
display: none; </style>
} <body>
html,head,body{ <div class="BarChart">
height: 100%;; <div class="Barchart_conter clearfix">
} <div class="BarChart_left left">
</style> <div class="BarChart_var clearfix">
<body> <div class="left var_left">
<div class="BarChart"> <div style="margin-top: 12px; margin-bottom: 14px; font-size: 14px">数据</div>
<div>
<div class="Barchart_conter clearfix"> <form class="layui-form formBox">
<div class="BarChart_left left"> <div style="margin-bottom: 10px; font-size: 14px">数据关联：</div>
<div class="BarChart_var clearfix"> <div class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<div class="left var_left"> <select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<div style="margin-top:12px;margin-bottom:14px;font-size:14px">数据</div> <option value="实时数据">实时数据</option>
<div> <option value="历史数据">历史数据</option>
<form class="layui-form formBox"> <!-- <option value="统计数据">统计数据</option> -->
<div style="margin-bottom:10px;font-size:14px">数据关联：</div> <option value="业务数据">业务数据</option>
<div class="showLin" style="margin-left:20px;width:400px;height: 32px;"> </select>
<select lay-filter="data" name="city" id="data-relate" lay-verify="required"> </div>
<option value="实时数据">实时数据</option> </form>
<option value="历史数据">历史数据</option> <form
<!-- <option value="统计数据">统计数据</option> --> class="layui-form formBox"
<option value="业务数据">业务数据</option> lay-filter="form-data"
</select> style="padding-top: 0; display: none"
</div> id="data-sheet"
</form> >
<form class="layui-form formBox" lay-filter="form-data" style="padding-top: 0; display: none;" id="data-sheet" > <div style="margin-bottom: 10px; font-size: 14px">数据表：</div>
<div style="margin-bottom:10px;font-size:14px">数据表：</div> <div class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<div class="showLin" style="margin-left:20px;width:400px;height: 32px;"> <select
<select lay-filter="chart-data" name="city" id="chart-table" lay-verify="required"> lay-filter="chart-data"
<!-- <option value="实时数据">实时数据</option> name="city"
id="chart-table"
lay-verify="required"
>
<!-- <option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option> <option value="历史数据">历史数据</option>
<option value="业务数据">业务数据</option> --> <option value="业务数据">业务数据</option> -->
</select> </select>
</div> </div>
</form> </form>
</div>
<div id="varTitle" class="varTitle">纵轴/度量(3/10)</div>
<div class="table formBox1">
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<div class="newAdd">
<i class="layui-icon layui-icon-add-1" style="color:rgba(64, 158, 255, 1)"></i>
新增
</div> </div>
</div> <div id="varTitle" class="varTitle">纵轴/度量(3/10)</div>
<div class="varTitle">横轴/维度</div> <div class="table formBox1">
<div class="varType" id="axial"> <table class="layui-hide" id="demo" lay-filter="demo"></table>
<form class="layui-form" lay-filter="form-dimen"> <div class="newAdd">
<div style="width:90px;height: 32px;padding-bottom:14px"> <i class="layui-icon layui-icon-add-1" style="color: rgba(64, 158, 255, 1)"></i>
<select lay-filter="data-dimen" name="city" id="data-dimen" lay-verify="required"> 新增
<option value="时间" selected>时间</option>
<option value="变量">变量</option>
</select>
</div>
<div id="data-content" >
</div>
</form>
</div>
<div class="varType" id="realTime" style="display: none;" >
<form class="layui-form" lay-filter="form-dateFormat">
<div style="width: 100%;height: 32px;padding-bottom:14px">
<span>数据个数：</span>最近
<div class="showLin" style="width:90px;height: 32px;margin: 0 3px">
<input type="text" name="title" required lay-verify="required" autocomplete="off" id="realtime-count-input" onblur="getrealTime(event)" class="layui-input">
</div>个数据
</div> </div>
<div class="showLin" style="margin-right:24px">时间格式</div> </div>
<div class="showLin" style="width:200px;height:32px"> <div class="varTitle">横轴/维度</div>
<select lay-filter="data-time" id="data-time" name="city" placeholder="请选择" lay-verify="required"> <div class="varType" id="axial">
<form class="layui-form" lay-filter="form-dimen">
<div style="width: 90px; height: 32px; padding-bottom: 14px">
<select
lay-filter="data-dimen"
name="city"
id="data-dimen"
lay-verify="required"
>
<option value="时间" selected>时间</option>
<option value="变量">变量</option>
</select>
</div>
<div id="data-content"></div>
</form>
</div>
<div class="varType" id="realTime" style="display: none">
<form class="layui-form" lay-filter="form-dateFormat">
<div style="width: 100%; height: 32px; padding-bottom: 14px">
<span>数据个数：</span>最近
<div class="showLin" style="width: 90px; height: 32px; margin: 0 3px">
<input
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
id="realtime-count-input"
onblur="getrealTime(event)"
class="layui-input"
/>
</div>
个数据
</div>
<div class="showLin" style="margin-right: 24px">时间格式</div>
<div class="showLin" style="width: 200px; height: 32px">
<select
lay-filter="data-time"
id="data-time"
name="city"
placeholder="请选择"
lay-verify="required"
>
${opts} ${opts}
</select> </select>
</div> </div>
</form> </form>
</div> </div>
<div class="ax-table" id="ax-table" > <div class="ax-table" id="ax-table">
<div class="table formBox1"> <div class="table formBox1">
<table class="layui-hide" id="table-demo" lay-filter="table-demo"></table> <table class="layui-hide" id="table-demo" lay-filter="table-demo"></table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script src="../js/moment.js" aysnc="aysnc"></script>
<script src="../js/moment.js" aysnc="aysnc"></script> <script src="../js/jquery-1.10.2.min.js" aysnc="aysnc"></script>
<script src="../js/jquery-1.10.2.min.js" aysnc="aysnc"></script> <!-- 引入axiox -->
<!-- 引入axiox --> <script src="https://unpkg.com/axios/dist/axios.min.js" aysnc="aysnc"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js" aysnc="aysnc"></script> <script src="../utils/request_browserify.js" aysnc="aysnc"></script>
<script src="../utils/request.js" aysnc="aysnc"></script> <script src="../js/dropdown.js" aysnc="aysnc"></script>
<script src="../js/dropdown.js" aysnc="aysnc"></script> <!-- <script src="../js/echarts.js" aysnc="aysnc"></script>
<!-- <script src="../js/echarts.js" aysnc="aysnc"></script>
<script src="../js/ecStat.js" aysnc="aysnc"></script> --> <script src="../js/ecStat.js" aysnc="aysnc"></script> -->
<script> <script>
var echartsType = 'bar'
var echartsType = 'bar' </script>
</script> <script type="text/html" id="titleTpl">
<script type="text/html" id="titleTpl"> <!-- 变量配置 -->
<!-- 变量配置 --> <div style="position:absolute;top:0;left:0;width:78%;height:100%">
<div style="position:absolute;top:0;left:0;width:78%;height:100%"> <input
<input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input" value="{{d.selsectVar}}"> lay-event="var"
<div class="varSelectBox">...</div> id="varIpt"
</div> name="selsectVar"
</script> class="varSelect layui-input"
<script type="text/html" id="titleColor"> value="{{d.selsectVar}}"
<!-- 颜色选择器 --> />
<div id="color{{d.NO}}" class="colorBlock1 colorBlock2"></div> <div class="varSelectBox">...</div>
<!-- <div lay-event="delete" class="DataDelete"> </div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}" class="colorBlock1 colorBlock2"></div>
<!-- <div lay-event="delete" class="DataDelete">
<i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i> <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
</div> --> </div> -->
{{# if(d.NO === 1){ }} {{# if(d.NO === 1){ }}
<span></span> <span></span>
{{# }else{ }} {{# }else{ }}
<div lay-event="delete" class="DataDelete"> <div lay-event="delete" class="DataDelete">
<i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i> <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
</div> </div>
{{# } }} {{# } }}
</script>
</script> <script type="text/html" id="selectAxis">
<script type="text/html" id="selectAxis"> <!-- 轴选择 -->
<!-- 轴选择 --> <div class="selectAxis">
<div class="selectAxis">
<select lay-event="type" class="select" value="d.moreAxis" lay-ignore> <select lay-event="type" class="select" value="d.moreAxis" lay-ignore>
{{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# if(d.moreAxisArr[i] == d.moreAxis){ }}
{{# if(d.moreAxisArr[i] == d.moreAxis){ }} <option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
<option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option> {{# }else{ }}
{{# }else{ }} <option value="{{i}}">{{d.moreAxisArr[i]}}</option>
<option value="{{i}}">{{d.moreAxisArr[i]}}</option> {{# } }} {{# } }}
{{# } }}
{{# } }}
</select> </select>
</div> </div>
</script> </script>
<script type="text/html" id="valueAxis"> <script type="text/html" id="valueAxis">
<!-- 取值 --> <!-- 取值 -->
<div class="selectAxis"> <div class="selectAxis">
<select lay-event="type" class="select" value="d.rangevalue" lay-ignore> <select lay-event="type" class="select" value="d.rangevalue" lay-ignore>
{{# for(let i=0;i<d.valueAxisArr.length;i++){ }} {{# for(let i=0;i<d.valueAxisArr.length;i++){ }} {{# if(d.valueAxisArr[i].value == d.rangevalue){ }}
{{# if(d.valueAxisArr[i].value == d.rangevalue){ }} <option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option> {{# }else{ }}
{{# }else{ }} <option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option> {{# } }} {{# } }}
{{# } }} </select>
{{# } }} </div>
</select> </script>
</div> <script src="../js/color.js"></script>
</script> <script src="./柱形图.js" aysnc="aysnc"></script>
<script src="../js/color.js"></script> <script src="../js/varEcharts.js" aysnc="aysnc"></script>
<script src="./柱形图.js" aysnc="aysnc"></script> <script src="../js/guide.js" aysnc="aysnc"></script>
<script src="../js/varEcharts.js" aysnc="aysnc"></script> </body>
<script src="../js/guide.js" aysnc="aysnc"></script> </html>
</body>
</html>
\ No newline at end of file
饼图/饼图.html
View file @ 16c359b4
...@@ -2,86 +2,279 @@ ...@@ -2,86 +2,279 @@
* @Description: 这是饼图页面（组件） * @Description: 这是饼图页面（组件）
* @Date: 2021-03-02 16:27:32 * @Date: 2021-03-02 16:27:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 16:55:30 * @LastEditTime: 2021-09-14 18:50:21
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<script> <script src="../js/domainSetting.js"></script>
// 离开页面保存功能代码(移动至此处) <link rel="stylesheet" href="../css/clearCss.css" type="text/css" />
if (window.location.host.indexOf('127.0.0') === -1) { <script src="../layui/layui.all.js"></script>
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
</script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css"/>
<script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css"> <link rel="stylesheet" href="../layui/css/layui.css" />
<link rel="stylesheet" href="../css/柱形图.css" type="text/css"/> <link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
<link rel="stylesheet" href="../css/饼图.css"> <link rel="stylesheet" href="../css/饼图.css" />
<style type="text/css"> <style type="text/css">
.layui-form-checkbox i{ .layui-form-checkbox i {
border-left:-1px; border-left: -1px;
} }
.layui-form-checkbox{ .layui-form-checkbox {
margin-right:0px; margin-right: 0px;
} }
.layui-form-radio{ .layui-form-radio {
margin:0; margin: 0;
width: 26%; width: 26%;
} }
button[colorpicker-events="clear"]{ button[colorpicker-events='clear'] {
display: none; display: none;
} }
html,head,body{ html,
height: 100%; head,
font-size: 13px; body {
color: #333333; height: 100%;
} font-size: 13px;
.echarts_left{ color: #333333;
margin-left: 0; }
width: 100%; .echarts_left {
} margin-left: 0;
/* .BarChart{ width: 100%;
}
/* .BarChart{
width: 100%; width: 100%;
} */ } */
.sex .layui-form-radio{ .sex .layui-form-radio {
width: 20%; width: 20%;
} }
</style>
</style> <body>
<body> <div class="BarChart">
<div class="BarChart"> <div class="Barchart_conter clearfix">
<div class="Barchart_conter clearfix"> <div class="BarChart_left left">
<div class="BarChart_left left"> <div class="BarChart_echarts clearfix">
<div class="BarChart_echarts clearfix"> <div class="echarts_left left">
<div class="echarts_left left"> <div class="echarts_attribute">
<div class="echarts_attribute"> <div class="echarts_jt">
<div class="echarts_jt"> <div class="echartText">
<div class="echartText"> 图表配置
图表配置 <div
<div num="345" name="false" onclick="iconBoxFun(event,'iconBox1')" id="iconBox1" class="iconBox"><i class="layui-icon layui-icon-up"></i></div> num="345"
</div> name="false"
<form class="layui-form formBox"> onclick="iconBoxFun(event,'iconBox1')"
<div> id="iconBox1"
<input style="width:14px;height:14px" id="titleShow" type="checkbox" checked> class="iconBox"
<div class="showLin titleText">显示主标题</div> >
<i class="layui-icon layui-icon-up"></i>
</div>
</div> </div>
<div class="showLin echartsTile left1"> <form class="layui-form formBox">
<input id="title" maxlength="15" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> <div>
<input
style="width: 14px; height: 14px"
id="titleShow"
type="checkbox"
checked
/>
<div class="showLin titleText">显示主标题</div>
</div>
<div class="showLin echartsTile left1">
<input
id="title"
maxlength="15"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div>
<div class="left1">字体</div>
<div class="echartsTile left1">
<select
id="TitleFontFamily"
lay-filter="TitleFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div class="xSize showLin left1">字号</div>
<div class="xselect sizeInputBox showLin">
<input
id="titleSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色</div>
<div id="test2" class="colorBlock colorBlock1 showLin"></div>
<div class="showLin" style="margin-left: 50px">加粗</div>
<div class="showLin" id="titleWeight" style="cursor: pointer">
<i class="layui-icon layui-icon-fonts-strong"></i>
</div>
</div>
<div>
<div class="Titlep left1">水平对齐</div>
<div class="left2">
<input
lay-filter="leftTitle"
type="radio"
name="sex"
value="1"
title="左对齐"
/>
<input
lay-filter="conterTitle"
type="radio"
name="sex"
value="2"
title="居中"
checked
/>
<input
lay-filter="rightTitle"
type="radio"
name="sex"
value="3"
title="右对齐"
/>
</div>
<div class="bg">
<div class="xColor showLin">背景</div>
<div id="test5" class="colorBlock colorBlock1 showLin"></div>
</div>
</div>
</form>
</div>
<div class="echarts_jt">
<div class="echartText">
饼图
<div
num="566"
name="false"
onclick="iconBoxFun(event,'iconBox2')"
id="iconBox2"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div>
</div> </div>
<div> <form class="layui-form formBox" style="line-height: 40px">
<div class="showLin">饼图外半径</div>
<div class="InRadius showLin mar_r">
<select
id="outRadius"
lay-filter="outRadius"
name="city"
lay-verify="required"
>
<option value="30%">30%</option>
<option value="40%">40%</option>
<option value="50%">50%</option>
<option value="55%" selected>55%</option>
<option value="60%">60%</option>
<option value="70%">70%</option>
<option value="80%">80%</option>
<option value="90%">90%</option>
</select>
</div>
<div class="showLin">饼图内半径</div>
<div class="InRadius showLin">
<select
id="InRadius"
lay-filter="InRadius"
name="city"
lay-verify="required"
>
<option value="0%">0%</option>
<option value="10%">10%</option>
<option value="20%">20%</option>
<option value="30%" selected>30%</option>
<option value="40%">40%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="70%">70%</option>
<option value="80%">80%</option>
<option value="90%">90%</option>
</select>
</div>
<div>
<input id="lengthShow" lay-filter="lengthShow" type="checkbox" checked />
<div class="showLin">显示引导线</div>
</div>
<div class="left1">
<div class="showLin" style="margin-right: 3px">长度一</div>
<div class="showLin lengthInpBox mar_r">
<input
id="length1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin" style="margin-right: 3px">长度二</div>
<div class="showLin lengthInpBox">
<input
id="length2"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div>
<input id="LabelShowOutter" lay-filter="LabelShowOutter" type="checkbox" />
<div class="showLin">显示在外</div>
</div>
<div class="left1">
<input
id="labelDimension"
lay-filter="labelDimension"
type="checkbox"
checked
/>
<div class="showLin mar_r2">维度</div>
<input id="labelValue" lay-filter="labelValue" type="checkbox" checked />
<div class="showLin mar_r2">数值</div>
<input id="labelPercentage" lay-filter="labelPercentage" type="checkbox" />
<div class="showLin">百分比</div>
</div>
<div class="left1">字体</div> <div class="left1">字体</div>
<div class="echartsTile left1"> <div class="echartsTile left1">
<select id="TitleFontFamily" lay-filter="TitleFontFamily" name="city" lay-verify="required"> <select
id="LabelFontFamily"
lay-filter="LabelFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option> <option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option> <option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option> <option value="宋体">宋体</option>
...@@ -90,252 +283,216 @@ ...@@ -90,252 +283,216 @@
<option value="仿宋">仿宋</option> <option value="仿宋">仿宋</option>
</select> </select>
</div> </div>
<div>
<div class="xSize showLin left1">字号</div> <div class="xSize showLin left1">字号:</div>
<div class="xselect sizeInputBox showLin"> <div class="xselect sizeInputBox showLin">
<input id="titleSize" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input"> <input
id="lengthSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin" style="margin-left: 15px">单位</div>
<div class="showLin unitIpt">
<input
id="unitIpt"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div>
<input id="legendShow" lay-filter="legendShow" type="checkbox" checked />
<div class="showLin">显示图例</div>
</div> </div>
<div class="xColor showLin">颜色</div> <div class="left1 sex">
<div id="test2" class="colorBlock colorBlock1 showLin"></div> <input
lay-filter="leftLegend"
type="radio"
name="sex"
value="7"
title="左侧"
checked
/>
<input
lay-filter="rightLegend"
type="radio"
name="sex"
value="4"
title="右侧"
checked
/>
<input
lay-filter="bottomLegend"
type="radio"
name="sex"
value="5"
title="底部"
/>
<input
lay-filter="topLegend"
type="radio"
name="sex"
value="6"
title="顶部"
/>
</div>
<div class="left1">字体</div>
<div class="echartsTile left1">
<select
id="LegendFontFamily"
lay-filter="LegendFontFamily"
name="city"
lay-verify="required"
>
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div>
<div class="xSize showLin left1">字号:</div>
<div class="xselect sizeInputBox showLin">
<input
id="LegendSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">字体颜色:</div>
<div id="test3" class="colorBlock colorBlock1 showLin"></div>
</div>
</form>
</div>
<div class="showLin" style="margin-left:50px">加粗</div> <div class="echarts_jt">
<div class="showLin" id="titleWeight" style="cursor:pointer;"> <div class="echartText">
<i class="layui-icon layui-icon-fonts-strong"></i> 配色方案
<div
num="93"
name="false"
onclick="iconBoxFun(event,'iconBox3')"
id="iconBox3"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div> </div>
</div> </div>
<div> <form class="layui-form formBox">
<div class="Titlep left1">水平对齐</div> <div>
<div class="left2"> <div class="showLin fgBox">风格一</div>
<input lay-filter="leftTitle" type="radio" name="sex" value="1" title="左对齐"> <div id="style1" class="showLin fgBoxChild">
<input lay-filter="conterTitle" type="radio" name="sex" value="2" title="居中" checked> <div class="showLin fgBlock fg11"></div>
<input lay-filter="rightTitle" type="radio" name="sex" value="3" title="右对齐"> <div class="showLin fgBlock fg12"></div>
<div class="showLin fgBlock fg13"></div>
<div class="showLin fgBlock fg14"></div>
<div class="showLin fgBlock fg15"></div>
<div class="showLin fgBlock fg16"></div>
</div>
<div class="showLin fgBox">风格一</div>
<div id="style2" class="showLin fgBoxChild">
<div class="showLin fgBlock fg21"></div>
<div class="showLin fgBlock fg22"></div>
<div class="showLin fgBlock fg23"></div>
<div class="showLin fgBlock fg24"></div>
<div class="showLin fgBlock fg25"></div>
<div class="showLin fgBlock fg26"></div>
</div>
</div> </div>
<div class="bg"> <div>
<div class="xColor showLin">背景</div> <div class="showLin fgBox">风格三</div>
<div id="test5" class="colorBlock colorBlock1 showLin"></div> <div id="style3" class="showLin fgBoxChild">
<div class="showLin fgBlock fg31"></div>
<div class="showLin fgBlock fg32"></div>
<div class="showLin fgBlock fg33"></div>
<div class="showLin fgBlock fg34"></div>
<div class="showLin fgBlock fg35"></div>
<div class="showLin fgBlock fg36"></div>
</div>
<div class="showLin fgBox">风格四</div>
<div id="style4" class="showLin fgBoxChild">
<div class="showLin fgBlock fg41"></div>
<div class="showLin fgBlock fg42"></div>
<div class="showLin fgBlock fg43"></div>
<div class="showLin fgBlock fg44"></div>
<div class="showLin fgBlock fg45"></div>
<div class="showLin fgBlock fg46"></div>
</div>
</div> </div>
</div> </form>
</div>
</form>
</div> </div>
<div class="echarts_jt">
<div class="echartText">饼图
<div num="566" name="false" onclick="iconBoxFun(event,'iconBox2')" id="iconBox2" class="iconBox"><i class="layui-icon layui-icon-up"></i></div>
</div>
<form class="layui-form formBox" style="line-height: 40px;">
<div class="showLin" >饼图外半径</div>
<div class="InRadius showLin mar_r">
<select id="outRadius" lay-filter="outRadius" name="city" lay-verify="required">
<option value="30%">30%</option>
<option value="40%">40%</option>
<option value="50%">50%</option>
<option value="55%" selected>55%</option>
<option value="60%">60%</option>
<option value="70%">70%</option>
<option value="80%">80%</option>
<option value="90%">90%</option>
</select>
</div>
<div class="showLin" >饼图内半径</div>
<div class="InRadius showLin">
<select id="InRadius" lay-filter="InRadius" name="city" lay-verify="required">
<option value="0%">0%</option>
<option value="10%">10%</option>
<option value="20%">20%</option>
<option value="30%" selected>30%</option>
<option value="40%">40%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="70%">70%</option>
<option value="80%">80%</option>
<option value="90%">90%</option>
</select>
</div>
<div>
<input id="lengthShow" lay-filter="lengthShow" type="checkbox" checked>
<div class="showLin">显示引导线</div>
</div>
<div class="left1">
<div class="showLin" style="margin-right:3px">长度一</div>
<div class="showLin lengthInpBox mar_r">
<input id="length1" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="showLin" style="margin-right:3px">长度二</div>
<div class="showLin lengthInpBox">
<input id="length2" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div>
<input id="LabelShowOutter" lay-filter="LabelShowOutter" type="checkbox">
<div class="showLin">显示在外</div>
</div>
<div class="left1">
<input id="labelDimension" lay-filter="labelDimension" type="checkbox" checked>
<div class="showLin mar_r2">维度</div>
<input id="labelValue" lay-filter="labelValue" type="checkbox" checked>
<div class="showLin mar_r2">数值</div>
<input id="labelPercentage" lay-filter="labelPercentage" type="checkbox">
<div class="showLin">百分比</div>
</div>
<div class="left1">字体</div>
<div class="echartsTile left1">
<select id="LabelFontFamily" lay-filter="LabelFontFamily" name="city" lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div>
<div class="xSize showLin left1">字号:</div>
<div class="xselect sizeInputBox showLin">
<input id="lengthSize" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="showLin" style="margin-left:15px;">单位</div>
<div class="showLin unitIpt">
<input id="unitIpt" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div>
<input id="legendShow" lay-filter="legendShow" type="checkbox" checked>
<div class="showLin">显示图例</div>
</div>
<div class="left1 sex">
<input lay-filter="leftLegend" type="radio" name="sex" value="7" title="左侧" checked>
<input lay-filter="rightLegend" type="radio" name="sex" value="4" title="右侧" checked>
<input lay-filter="bottomLegend" type="radio" name="sex" value="5" title="底部" >
<input lay-filter="topLegend" type="radio" name="sex" value="6" title="顶部">
</div>
<div class="left1">字体</div>
<div class="echartsTile left1">
<select id="LegendFontFamily" lay-filter="LegendFontFamily" name="city" lay-verify="required">
<option value="思源黑体">思源黑体</option>
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="楷体">楷体</option>
<option value="仿宋">仿宋</option>
</select>
</div>
<div>
<div class="xSize showLin left1">字号:</div>
<div class="xselect sizeInputBox showLin">
<input id="LegendSize" type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="xColor showLin" >字体颜色:</div>
<div id="test3" class="colorBlock colorBlock1 showLin" ></div>
</div>
</form>
</div>
<div class="echarts_jt">
<div class="echartText">配色方案
<div num="93" name="false" onclick="iconBoxFun(event,'iconBox3')" id="iconBox3" class="iconBox"><i class="layui-icon layui-icon-up"></i></div>
</div>
<form class="layui-form formBox">
<div>
<div class="showLin fgBox">风格一</div>
<div id="style1" class="showLin fgBoxChild">
<div class="showLin fgBlock fg11"></div>
<div class="showLin fgBlock fg12"></div>
<div class="showLin fgBlock fg13"></div>
<div class="showLin fgBlock fg14"></div>
<div class="showLin fgBlock fg15"></div>
<div class="showLin fgBlock fg16"></div>
</div>
<div class="showLin fgBox">风格一</div>
<div id="style2" class="showLin fgBoxChild">
<div class="showLin fgBlock fg21"></div>
<div class="showLin fgBlock fg22"></div>
<div class="showLin fgBlock fg23"></div>
<div class="showLin fgBlock fg24"></div>
<div class="showLin fgBlock fg25"></div>
<div class="showLin fgBlock fg26"></div>
</div>
</div>
<div>
<div class="showLin fgBox">风格三</div>
<div id="style3" class="showLin fgBoxChild">
<div class="showLin fgBlock fg31"></div>
<div class="showLin fgBlock fg32"></div>
<div class="showLin fgBlock fg33"></div>
<div class="showLin fgBlock fg34"></div>
<div class="showLin fgBlock fg35"></div>
<div class="showLin fgBlock fg36"></div>
</div>
<div class="showLin fgBox">风格四</div>
<div id="style4" class="showLin fgBoxChild">
<div class="showLin fgBlock fg41"></div>
<div class="showLin fgBlock fg42"></div>
<div class="showLin fgBlock fg43"></div>
<div class="showLin fgBlock fg44"></div>
<div class="showLin fgBlock fg45"></div>
<div class="showLin fgBlock fg46"></div>
</div>
</div>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script src="../js/moment.js"></script>
<script src="../js/moment.js"></script> <script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script> <script src="../js/echarts.js"></script>
<script src="../js/echarts.js"></script> <script src="../js/ecStat.js"></script>
<script src="../js/ecStat.js"></script>
<script>
<script> var echartsType = 'pie'
var echartsType = 'pie' </script>
</script> <script type="text/html" id="titleTpl">
<script type="text/html" id="titleTpl"> <!-- 变量配置 -->
<!-- 变量配置 --> <div style="position:absolute;top:0;left:0;width:78%;height:100%">
<div style="position:absolute;top:0;left:0;width:78%;height:100%"> <input
<input lay-event="var" id="varIpt" name="selsectVar" class="varSelect layui-input" value="{{d.selsectVar}}"> lay-event="var"
<div class="varSelectBox">...</div> id="varIpt"
</div> name="selsectVar"
</script> class="varSelect layui-input"
<script type="text/html" id="titleColor"> value="{{d.selsectVar}}"
<!-- 颜色选择器 --> />
<div id="color{{d.NO}}" class="colorBlock1"></div> <div class="varSelectBox">...</div>
<div lay-event="delete" class="DataDelete" > </div>
<i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i> </script>
</div> <script type="text/html" id="titleColor">
</script> <!-- 颜色选择器 -->
<!-- <script src="../js/color.js"></script> --> <div id="color{{d.NO}}" class="colorBlock1"></div>
<script src="../js/color.js"></script> <div lay-event="delete" class="DataDelete">
<script src="./饼图.js"></script> <i class="layui-icon layui-icon-close-fill" style="color:rgba(153, 153, 153, 1);font-size:20px"></i>
<script src="../js/varEcharts.js"></script> </div>
<script> </script>
document.onkeydown = function (e) { <!-- <script src="../js/color.js"></script> -->
<script src="../js/color.js"></script>
if(e.keyCode == 90){ <script src="./饼图.js"></script>
window.parent.goback() <script src="../js/varEcharts.js"></script>
}else if(e.keyCode == 89){ <script>
window.parent.backgo() document.onkeydown = function (e) {
} if (e.keyCode == 90) {
} window.parent.goback()
// for(let i =0;i<document.getElementsByClassName('colorBlock').length;i++){ } else if (e.keyCode == 89) {
// document.getElementsByClassName('colorBlock')[i].addEventListener("click", function(){ window.parent.backgo()
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){ }
// $('.bodycolorcover',parent.document)[i1].style.display = 'block' }
// } // for(let i =0;i<document.getElementsByClassName('colorBlock').length;i++){
// document.getElementsByClassName('colorBlock')[i].addEventListener("click", function(){
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// $('.bodycolorcover',parent.document)[i1].style.display = 'block'
// }
// $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // $($('.common-group',parent.document)[0]).append(`<div class="bodycolorcover1" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // $($('.bi-collapse-content',parent.document)[0]).append(`<div class="bodycolorcover2" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`) // $($('.bi-collapse-title',parent.document)[0]).append(`<div class="bodycolorcover3" style="display: block;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height:100%;" onclick='color1(this)'></div>`)
// }); // });
// } // }
</script>
</script> </body>
</html>
</body>
</html>
\ No newline at end of file
饼图/饼图变量.html
View file @ 16c359b4
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
* @Description: 这是***页面（组件） * @Description: 这是***页面（组件）
* @Date: 2021-04-02 15:30:32 * @Date: 2021-04-02 15:30:32
* @Author: Tao * @Author: Tao
* @LastEditors: Tao * @LastEditors: 莫靓仔
* @LastEditTime: 2021-04-02 15:59:52 * @LastEditTime: 2021-09-14 19:04:46
--> -->
<!-- <!--
* @Description: 这是饼图页面（组件） * @Description: 这是饼图页面（组件）
...@@ -19,14 +19,7 @@ ...@@ -19,14 +19,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
</head> </head>
<script> <script src="../js/domainSetting.js"></script>
// 离开页面保存功能代码(移动至此处)
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
</script>
<link rel="stylesheet" href="../css/clearCss.css" type="text/css"/> <link rel="stylesheet" href="../css/clearCss.css" type="text/css"/>
<script src="../layui/layui.all.js"></script> <script src="../layui/layui.all.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css"> <link rel="stylesheet" href="../layui/css/layui.css">
...@@ -155,7 +148,7 @@ ...@@ -155,7 +148,7 @@
<script src="../js/jquery-1.10.2.min.js"></script> <script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox --> <!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request.js"></script> <script src="../utils/request_browserify.js"></script>
<!-- <script src="../js/echarts.js"></script> <!-- <script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script> --> <script src="../js/ecStat.js"></script> -->
<script src="../js/dropdown.js"></script> <script src="../js/dropdown.js"></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