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":"开发环境"}
\ No newline at end of file
{"apiUrl":"https://api.sycdev.com","baseUrl":"https://slm.sycdev.com","domain":"sycdev.com","name":"测试环境"}
\ No newline at end of file
dashboard.html
View file @ 16c359b4
......@@ -126,7 +126,7 @@
<script src="./js/jquery-1.10.2.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./utils/request.js"></script>
<script src="./utils/request_browserify.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="./js/moment.js"></script>
<!-- -->
......
dashboard/index.html
View file @ 16c359b4
<!DOCTYPE html>
<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>
<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">
<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) {
<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 {
height: calc(100% - 220px);
width: 100%;
......@@ -23,243 +22,391 @@
}
} */
</style>
</head>
</style>
</head>
<body>
<div class="z-contentBox">
<div class="z-contentBoxLeft">
<div class="g-search">
<input class="g-search-input" type="text" onblur="searchGroupTree(event)" placeholder="请输入分组名称">
<i></i>
<body>
<div class="z-contentBox">
<div class="z-contentBoxLeft">
<div class="g-search">
<input
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 class="tree nicescroll-slideBar">
<ul id="treeDemo" class="ztree"></ul>
<div class="z-contentBoxRight">
<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 class="z-contentBoxRight">
<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>
</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>
<div class="addDashboardContent nicescroll-add" id="addDashboardContent" 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="addDashboardName"
/>
</div>
</div>
<div class="layui-form-item clearfix" style="margin-bottom: 0; position: relative">
<div class="g-left position" style="padding: 9px 15px"><i class="g-star">*</i>位置：</div>
<div class="layui-form g-left" lay-filter="myDiv">
<ul class="list">
<li class="title">
<input
id="citySel"
class="citySel"
placeholder="请选择位置"
type="text"
readonly
value=""
id="menuBtn"
href="#"
onclick="showMenu(); return false;"
/>
</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
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>
<div class="addDashboardContent nicescroll-add" id="addDashboardContent" 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="addDashboardName">
</div>
</div>
<div class="layui-form-item clearfix" style="margin-bottom: 0;position: relative;">
<div class="g-left position" style="padding: 9px 15px;"><i class="g-star">*</i>位置：</div>
<div class="layui-form g-left" lay-filter="myDiv">
<ul class="list">
<li class="title"><input id="citySel" class="citySel" placeholder="请选择位置" type="text" readonly
value="" id="menuBtn" href="#" onclick="showMenu(); return false;" /></li>
</ul>
</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 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>
</div>
<!-- 属性表单div -->
<form class="layui-form z-attribute" action="" id="attribute" style="display: none;" lay-filter="attribute">
<div class="layui-form-item form-block">
<label class="layui-form-label"><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="attrName">
<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 form-block clearfix" style="margin-bottom: 0;position: relative;">
<label class="layui-form-label"><i class="g-star">*</i>位置：</label>
<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 -->
<form class="layui-form z-attribute" action="" id="attribute" style="display: none" lay-filter="attribute">
<div class="layui-form-item form-block">
<label class="layui-form-label"><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="attrName"
/>
</div>
</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 class="layui-form-item form-block clearfix" style="margin-bottom: 0; position: relative">
<label class="layui-form-label"><i class="g-star">*</i>位置：</label>
<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 class="layui-form-item safe">
<label class="layui-form-label">安全策略：</label>
<div class="layui-input-block clearfix safeDiv">
<div class="g-left intro" id="copeConfigureFrom"><i></i><span>从其他仪表板复制配置</span></div>
<div class="g-left intro" id="copeConfigureTo"><i></i><span>将配置复制给其他仪表板</span></div>
<div class="layui-form-item safe">
<label class="layui-form-label">安全策略：</label>
<div class="layui-input-block clearfix safeDiv">
<div class="g-left intro" id="copeConfigureFrom"><i></i><span>从其他仪表板复制配置</span></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">
<label class="layui-form-label"><i class="g-star">*</i>访问权限：</label>
<div class="layui-input-block">
<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="private" title="私有" lay-filter="policyRadio">
<div class="layui-form-item" id="layui-form-margin9">
<label class="layui-form-label"><i class="g-star">*</i>访问权限：</label>
<div class="layui-input-block">
<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="private" title="私有" lay-filter="policyRadio" />
</div>
</div>
</div>
<div class="layui-form-item" style="display: none;margin-bottom: 9px;" id="z-selectDept">
<label class="layui-form-label"></label>
<div class="layui-input-block">
<input type="text" placeholder="请点击选择" autocomplete="off" class="layui-input" readonly
style="cursor: pointer;" id="z-selectDeptInp">
<i></i>
<div class="layui-form-item" style="display: none; margin-bottom: 9px" id="z-selectDept">
<label class="layui-form-label"></label>
<div class="layui-input-block">
<input
type="text"
placeholder="请点击选择"
autocomplete="off"
class="layui-input"
readonly
style="cursor: pointer"
id="z-selectDeptInp"
/>
<i></i>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述：</label>
<div class="layui-input-block">
<textarea placeholder="请输入描述" class="layui-textarea" id="attribute-describeVal"></textarea>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述：</label>
<div class="layui-input-block">
<textarea placeholder="请输入描述" class="layui-textarea" id="attribute-describeVal"></textarea>
</div>
</div>
</div>
<!-- <div class="layui-form-item">
<!-- <div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div> -->
</form>
<div class="copeConfigureForm" style="display:none;">
<div class="copeConfigureForm-search">
<input id="cope-search-input" class="g-search-input" type="text" placeholder="请输入分组、仪表板名称">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
onclick="searchFromTree(event)">搜索</button>
</div>
<div class="z-contentBoxLeft treeDemoCopeFromScroll" style="height: 470px;width: 474px;">
<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>
</form>
<div class="copeConfigureForm" style="display: none">
<div class="copeConfigureForm-search">
<input id="cope-search-input" class="g-search-input" type="text" placeholder="请输入分组、仪表板名称" />
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="searchFromTree(event)">
搜索
</button>
</div>
<div class="z-contentBoxLeft treeDemoCopeFromScroll" style="height: 470px; width: 474px">
<ul id="treeDemoCopeFrom" class="ztree"></ul>
</div>
</div>
</div>
<div class="z-selectDeptInp" style="display:none;">
<div class="treeSelectShow treeSelectShowScroll clearfix">
<ul class="clearfix g-left" id="viewTpl">
</ul>
<ul class="clearfix g-left" id="viewTpl2">
</ul>
<ul class="clearfix g-left" id="viewTpl3">
</ul>
<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 class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">部门</li>
<li>职位</li>
<li>人员</li>
</ul>
<div class="layui-tab-content z-contentBoxLeft">
<div class="layui-tab-item copeConfigureTo layui-show">
<div class="layui-tab-item-inpbox">
<input type="text" onblur="searchDept(event)" id="input-Dept" autocomplete="off"
placeholder="搜索部门名称">
<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 class="layui-tab-item">
<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 class="z-selectDeptInp" style="display: none">
<div class="treeSelectShow treeSelectShowScroll clearfix">
<ul class="clearfix g-left" id="viewTpl"></ul>
<ul class="clearfix g-left" id="viewTpl2"></ul>
<ul class="clearfix g-left" id="viewTpl3"></ul>
</div>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">部门</li>
<li>职位</li>
<li>人员</li>
</ul>
<div class="layui-tab-content z-contentBoxLeft">
<div class="layui-tab-item copeConfigureTo layui-show">
<div class="layui-tab-item-inpbox">
<input
type="text"
onblur="searchDept(event)"
id="input-Dept"
autocomplete="off"
placeholder="搜索部门名称"
/>
<i class="icon iconfont iconsousuo"></i>
</div>
<div style="overflow: auto; height: 230px">
<ul id="treeDept" class="ztree" style="width: 98%"></ul>
</div>
</div>
<ul class="rank rankScroll" id="rankSelect">
<!-- <li class="clearfix">
<div class="layui-tab-item">
<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>
<i class="g-right"></i>
</li>
......@@ -275,21 +422,27 @@
<span class="g-left">销售主管4</span>
<i class="g-right"></i>
</li> -->
</ul>
</div>
<div class="layui-tab-item treeDemoDeptOrpeo" style="width: 486px;position: relative;">
<div class="g-line-right"></div>
<div class="g-line-heng"></div>
<div class="clearfix">
<ul id="treeDemoDeptOrpeo" class="ztree g-left" style="width: 224px;height: 251px;"></ul>
<div class="g-left selectPeopleBox">
<div class="layui-tab-item-inpbox">
<input type="text" onblur="searchName(event)" id="input-user" autocomplete="off"
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">
</ul>
</div>
<div class="layui-tab-item treeDemoDeptOrpeo" style="width: 486px; position: relative">
<div class="g-line-right"></div>
<div class="g-line-heng"></div>
<div class="clearfix">
<ul id="treeDemoDeptOrpeo" class="ztree g-left" style="width: 224px; height: 251px"></ul>
<div class="g-left selectPeopleBox">
<div class="layui-tab-item-inpbox">
<input
type="text"
onblur="searchName(event)"
id="input-user"
autocomplete="off"
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>
<span class="g-left">李白1</span>
</li>
......@@ -305,77 +458,96 @@
<i class="g-left"></i>
<span class="g-left">李白4</span>
</li> -->
</ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="rMenu" class="checkPer" data-permission="bi_configuration_view" onmouseenter="handelEnter(event)" onmouseleave="handleLeave(event)" >
<ul>
<!-- <li id="m_add" onclick="addTreeNode();">添加子分组</li>
<div
id="rMenu"
class="checkPer"
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_del" onclick="removeTreeNode();">删除分组</li> -->
<li id="m_add_btn" class="checkPer" data-permission="bi_configuration_group_add">
<div id="m_add">添加子分组</div>
</li>
<li id="m_check_btn" class="checkPer" data-permission="bi_configuration_group_edit">
<div id="m_check"> 编辑分组</div>
</li>
<li id="m_del_btn" class="checkPer" data-permission="bi_configuration_group_delete">
<div id="m_del" onclick="removeTreeNode();">删除分组</div>
</li>
</ul>
</div>
<script id="demoTpl" type="text/html">
{{# layui.each(d, function(index, item){ }}
<li id="m_add_btn" class="checkPer" data-permission="bi_configuration_group_add">
<div id="m_add">添加子分组</div>
</li>
<li id="m_check_btn" class="checkPer" data-permission="bi_configuration_group_edit">
<div id="m_check">编辑分组</div>
</li>
<li id="m_del_btn" class="checkPer" data-permission="bi_configuration_group_delete">
<div id="m_del" onclick="removeTreeNode();">删除分组</div>
</li>
</ul>
</div>
<script id="demoTpl" type="text/html">
{{# layui.each(d, function(index, item){ }}
<li class="g-left">
<span>{{ item }}</span>
<i data-id="{{index}}"></i>
</li>
{{# }); }}
</script>
<script id="jobArrTpl" type="text/html">
{{# layui.each(d, function(index, item){ }}
{{# }); }}
</script>
<script id="jobArrTpl" type="text/html">
{{# layui.each(d, function(index, item){ }}
<li class="g-left">
<span>{{ item }}</span>
<i data-id="{{index}}"></i>
</li>
{{# }); }}
</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/dayjs@1.8.21/dayjs.min.js"></script>
<script src="./utils/request.js"></script>
<script src="./utils/common.js"></script>
<script src="./libs/layui/layui.all.js"></script>
<script src="./utils/pagination.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>
<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/dayjs@1.8.21/dayjs.min.js"></script>
<script src="./libs/layui/layui.all.js"></script>
<script src="../utils/request_browserify.js"></script>
<script src="./utils/common.js"></script>
<script src="./utils/pagination.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.excheck.min.js"></script> -->
<script src="./libs/nicescroll/jquery.nicescroll.js"></script>
<script src="./js/common.js"></script>
<script src="./js/index.js"></script>
<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">编辑</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="release">发布</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-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-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>
\ No newline at end of file
<script src="./libs/nicescroll/jquery.nicescroll.js"></script>
<script src="./js/common.js"></script>
<script src="./js/index.js"></script>
<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"
>编辑</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="release"
>发布</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-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-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) {
var time = delay || 1000
var timer
return function () {
var th = this
var args = arguments
if (timer) {
clearTimeout(timer)
function debounce(fn, delay) {
var time = delay || 1000
var timer
return function () {
var th = this
var args = arguments
if (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) {
var last
var timer
var time = interval || 2000
return function () {
var th = this
var args = arguments
var now = +new Date()
if (last && now - last < time) {
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(th, args)
}, time)
} else {
last = now
fn.apply(th, args)
function throttle(fn, interval) {
var last
var timer
var time = interval || 2000
return function () {
var th = this
var args = arguments
var now = +new Date()
if (last && now - last < time) {
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(th, args)
}, time)
} else {
last = now
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 @@
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>BI系统</title>
<script src="./js/watcher.js"></script>
<script>
// 离开页面保存功能代码(移动至此处)
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
</script>
<script src="./js/domainSetting.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2431045_hbwl3x53oep.css">
<link rel="stylesheet" href="./styles/date.css">
<link rel="stylesheet" href="./layui/css/layui.css">
......@@ -256,11 +248,11 @@
onchange="getFlag(this[selectedIndex].value)" placeholder="请选择">
<option value=">">></option>
<option value="=">=</option>
<option value="<">
<< /option>
<option value="&lt;">
&lt;</option>
<option value=">=">>=</option>
<option value="<=">
<=< /option>
<option value="&lt;=">
&lt;=</option>
</select>
</div>
<div class="form-item">
......@@ -519,7 +511,7 @@
<!-- 引入axiox -->
<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 type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/dropdown.js"></script>
......@@ -2347,11 +2339,6 @@
canvasWrap.addEventListener('drop', async function (event) {
$("#saveBtnTips").show()
// $(".details").show()
if (window.location.host.indexOf('127.0.0') === -1) {
// 测试 && 开发：sycdev.com
// 正式： shengyc.com
document.domain = 'shengyc.com' || '';
}
buttonid = ''
// leg初始化之后没拖动一个元素下来就+1,此值会一直++, 防止元素名称重复
......
js/data.js
View file @ 16c359b4
......@@ -9,12 +9,6 @@ var fd = null
var appId = '' //appId
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)
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) {
$('#chart-list').css('display', 'block')
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",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
{
"name": "bi",
"version": "1.0.0",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack -p --progress --mode production --config webpack.config.js",
"bd": "npm run set-d && gulp && node ./config/zip.js && npm run scp-d",
"bt": "npm run set-t && gulp && node ./config/zip.js && npm run scp-t",
"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
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: 'https://slmapi.shengyc.com', // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 900000 // request timeout
// 开发环境： 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 = 'https://slm.shengyc.com/#/login'
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
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)
}
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
*/
/**
* 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
/**
* 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('网络异常');
if (response.response === undefined) {
// Message({
// message: '网络异常',
// type: 'error',
// duration: 3 * 1000
// })
appTips.errorMsg('网络异常')
return Promise.reject('error')
}
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)
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('对不起，您未登陆 或 页面已过期，请重新登陆！');
appTips.errorMsg('对不起，您未登陆 或 页面已过期，请重新登陆！')
return Promise.reject('error')
}
return Promise.reject('error')
}
if (response.response.status === 403) {
// Message({
// message: '对不起，您没有该权限，请联系管理员！',
// type: 'error',
// duration: 3 * 1000
// })
appTips.errorMsg('对不起，您没有该权限，请联系管理员！');
if (response.response.status === 403) {
// Message({
// message: '对不起，您没有该权限，请联系管理员！',
// type: 'error',
// duration: 3 * 1000
// })
appTips.errorMsg('对不起，您没有该权限，请联系管理员！')
return Promise.reject('error')
}
} else {
if (response.response.status !== 200) {
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: '对不起，程序错误，请联系管理员',
// message: error.message,
// 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
// Message({
// message: error.message,
// type: 'error',
// duration: 5 * 1000
// })
appTips.errorMsg(error.message);
return Promise.reject(error)
}
)
\ No newline at end of file
)
// 兼容本文件通过browserify编译之后无法获取到request的问题
if (!window.request) {
window.request = request
}
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攻城狮
* @description: 文件描述
* @description: 本地run的webpack配置
* @Date: 2021-08-19 17:10:54
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-08-31 11:26:03
* @LastEditTime: 2021-09-14 19:14:30
*/
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: {
......@@ -36,63 +23,6 @@ module.exports = {
// 打包后的文件名
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,
......@@ -106,165 +36,3 @@ module.exports = {
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 @@
* @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 16:00:23
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 18:49:07
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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' || '';
}
<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>
<script>
// 获取url参数
function getParams(key, str) {
    var result = {};
    var paramStr = ''
    let params
    if (str) {
        paramStr = str.split('?')[1]
        if (paramStr) {
            params = paramStr.split('&');
            params.forEach(item => {
                result[item.split('=')[0]] = unescape(item.split('=')[1])
            })
        }
    } else {
        paramStr = encodeURI(window.document.location.search);
        if (paramStr) {
            paramStr = paramStr.substring(1);
            params = paramStr.split('&');
            for (var p = 0; p < params.length; p++) {
                result[params[p].split('=')[0]] = unescape(params[p].split('=')[1]);
            }
        }
    }
    return result[key];
}
</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">
html,
body {
overflow: hidden;
}
function getParams(key, str) {
var result = {}
var paramStr = ''
let params
if (str) {
paramStr = str.split('?')[1]
if (paramStr) {
params = paramStr.split('&')
params.forEach(item => {
result[item.split('=')[0]] = unescape(item.split('=')[1])
})
}
} else {
paramStr = encodeURI(window.document.location.search)
if (paramStr) {
paramStr = paramStr.substring(1)
params = paramStr.split('&')
for (var p = 0; p < params.length; p++) {
result[params[p].split('=')[0]] = unescape(params[p].split('=')[1])
}
}
}
return result[key]
}
</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" />
.layui-form-checkbox i {
border-left: -1px;
}
<style type="text/css">
html,
body {
overflow: hidden;
}
.layui-form-checkbox {
margin-right: 0px;
}
.layui-form-checkbox i {
border-left: -1px;
}
.layui-form-radio {
margin: 0;
}
.layui-form-checkbox {
margin-right: 0px;
}
button[colorpicker-events="clear"] {
display: none;
}
.layui-form-radio {
margin: 0;
}
.echarts_attribute {
background: #F9F9F9;
padding: 10px 20px;
width: calc(100% - 20px);
button[colorpicker-events='clear'] {
display: none;
}
}
.echarts_attribute {
background: #f9f9f9;
padding: 10px 20px;
width: calc(100% - 20px);
}
.padding-style {
padding: 0 10px;
}
.padding-style {
padding: 0 10px;
}
.padding-style .layui-form-radio {
width: 40%;
}
.padding-style .layui-form-radio {
width: 40%;
}
.padding-style1 .layui-form-radio {
width: 25%;
}
.padding-style1 .layui-form-radio {
width: 25%;
}
.layui-form-radio {
margin: 0;
}
.layui-form-radio {
margin: 0;
}
.echarts_left {
width: 100%;
}
.echarts_left {
width: 100%;
}
.input-max {
display: inline-block;
/* margin:0 50px; */
width: 45%;
}
</style>
.input-max {
display: inline-block;
/* margin:0 50px; */
width: 45%;
}
</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="echartText">图表配置</div>
<div class="echarts_attribute">
<div>仪表盘量程</div>
<form class="layui-form">
<div class="padding-style">
<input lay-filter="axisOriginal" type="radio" name="sex" value="1" title="按原值划分">
<input lay-filter="axisPercentage" type="radio" name="sex" value="2" 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 class="padding-style">
<div class="showLin inpText">最小值：</div>
<div class="showLin inpBox">
<input id="min" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<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="echartText">图表配置</div>
<div class="echarts_attribute">
<div>仪表盘量程</div>
<form class="layui-form">
<div class="padding-style">
<input
lay-filter="axisOriginal"
type="radio"
name="sex"
value="1"
title="按原值划分"
/>
<input
lay-filter="axisPercentage"
type="radio"
name="sex"
value="2"
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 class="showLin inpText">区间：</div>
<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 class="padding-style">
<div class="showLin inpText">最小值：</div>
<div class="showLin inpBox">
<input
id="min"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="showLin inpText">区间：</div>
<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 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 class="padding-style" style="padding: 10px 0">
<div class="slideBar">
<div class="slideBox"></div>
</div>
</div>
</div>
<div class="padding-style" style="padding: 10px 0;">
<div class="slideBar">
<div class="slideBox"></div>
<div class="axisType" style="margin-top: 5px; margin-bottom: 10px">
<div class="inpText padding-style">
<div class="input-max">
<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 class="axisType" style="margin-top:5px;margin-bottom:10px">
<div class="inpText padding-style">
<div class="padding-style">
<div class="input-max">
<div class="showLin">最小值</div>
<div class="showLin axisMin">0</div>
<div class="showLin inpText">分割段数：</div>
<div class="showLin inpBox">
<input
id="split"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div class="input-max">
<div class="showLin">最大值</div>
<div class="showLin axisMax">100</div>
<div class="showLin inpText">刻度数：</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 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 class="padding-style">
<div class="input-max">
<div class="showLin inpText">分割段数：</div>
<div class="showLin inpBox">
<input id="split" 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>
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked />
</div>
<div class="input-max">
<div class="showLin inpText">刻度数：</div>
<div class="showLin inpBox">
<input id="scale" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<!-- </div> -->
<div>
<div class="xColor showLin">颜色:</div>
<div
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 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>
</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>
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked>
</div>
<!-- </div> -->
<div>
<div class="xColor showLin">颜色:</div>
<div 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">
<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="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 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 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 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 class="showLin fgBlock fg17"></div>
<div class="showLin fgBlock fg18"></div>
<div class="showLin fgBlock fg19"></div>
<div class="showLin fgBlock fg110"></div>
<div>配色方案</div>
<form class="layui-form padding-style">
<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 class="showLin fgBlock fg17"></div>
<div class="showLin fgBlock fg18"></div>
<div class="showLin fgBlock fg19"></div>
<div class="showLin fgBlock fg110"></div>
</div>
</div>
</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 class="showLin fgBlock fg27"></div>
<div class="showLin fgBlock fg28"></div>
<div class="showLin fgBlock fg29"></div>
<div class="showLin fgBlock fg210"></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 class="showLin fgBlock fg27"></div>
<div class="showLin fgBlock fg28"></div>
<div class="showLin fgBlock fg29"></div>
<div class="showLin fgBlock fg210"></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 class="showLin fgBlock fg37"></div>
<div class="showLin fgBlock fg38"></div>
<div class="showLin fgBlock fg39"></div>
<div class="showLin fgBlock fg310"></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 class="showLin fgBlock fg37"></div>
<div class="showLin fgBlock fg38"></div>
<div class="showLin fgBlock fg39"></div>
<div class="showLin fgBlock fg310"></div>
</div>
</div>
</div>
<!-- <div>
<!-- <div>
<div class="showLin fgBox">风格四：</div>
<div id="style4" class="showLin fgBoxChild">
<div class="showLin fgBlock fg41"></div>
......@@ -312,54 +413,56 @@
<div class="showLin fgBlock fg410"></div>
</div>
</div> -->
</form>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script>
<script>
var echartsType = 'dashboard'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}">
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></div>
</script>
<script src="../js/color.js"></script>
<script src="./仪表盘.js"></script>
<script src="../js/varEcharts.js"></script>
<script>
document.onkeydown = function (e) {
if(e.keyCode == 90){
window.parent.goback()
}else if(e.keyCode == 89){
window.parent.backgo()
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script>
<script>
var echartsType = 'dashboard'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}"
/>
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></div>
</script>
<script src="../js/color.js"></script>
<script src="./仪表盘.js"></script>
<script src="../js/varEcharts.js"></script>
<script>
document.onkeydown = function (e) {
if (e.keyCode == 90) {
window.parent.goback()
} else if (e.keyCode == 89) {
window.parent.backgo()
}
}
}
function colorclick(){
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// $($('.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>`)
// $($('.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>
\ No newline at end of file
function colorclick() {
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// $($('.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>`)
// $($('.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>
仪表盘/仪表盘变量.html
View file @ 16c359b4
......@@ -2,123 +2,128 @@
* @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 16:00:33
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:04:33
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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"/>
<link rel="stylesheet" href="../css/仪表盘.css" type="text/css">
<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" />
<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{
margin:0;
}
button[colorpicker-events="clear"]{
display: none;
}
</style>
<body>
<div class="BarChart">
<div class="Barchart_conter clearfix">
<div class="BarChart_left left">
<div class="BarChart_var clearfix">
<div class="left var_left">
<div style="margin-top:12px;margin-bottom:14px;font-size:14px">数据</div>
<div>
<form class="layui-form formBox">
<div class="showLin">数据关联：</div>
<div class="showLin" style="width: 400px;margin-left: 20px;" >
<select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<!-- <option value="统计数据">统计数据</option> -->
<option value="业务数据">业务数据</option>
</select>
</div>
</form>
<form class="layui-form formBox" lay-filter="form-data" style="padding-top: 0; display: none;" 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>
<style type="text/css">
.layui-form-checkbox i {
border-left: -1px;
}
.layui-form-checkbox {
margin-right: 0px;
}
.layui-form-radio {
margin: 0;
}
button[colorpicker-events='clear'] {
display: none;
}
</style>
<body>
<div class="BarChart">
<div class="Barchart_conter clearfix">
<div class="BarChart_left left">
<div class="BarChart_var clearfix">
<div class="left var_left">
<div style="margin-top: 12px; margin-bottom: 14px; font-size: 14px">数据</div>
<div>
<form class="layui-form formBox">
<div class="showLin">数据关联：</div>
<div class="showLin" style="width: 400px; margin-left: 20px">
<select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<!-- <option value="统计数据">统计数据</option> -->
<option value="业务数据">业务数据</option>
</select>
</div>
</form>
<form
class="layui-form formBox"
lay-filter="form-data"
style="padding-top: 0; display: none"
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> -->
</select>
</div>
</form>
</div>
<div id="varTitle" class="varTitle">指针角度/度量</div>
<div class="table formBox">
<table class="layui-hide" id="demo" lay-filter="demo"></table>
</select>
</div>
</form>
</div>
<div id="varTitle" class="varTitle">指针角度/度量</div>
<div class="table formBox">
<table class="layui-hide" id="demo" lay-filter="demo"></table>
</div>
</div>
</div>
<div class="right var_right">
<div class="right var_right"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/html" id="valueAxis">
<!-- 取值 -->
<div class="selectAxis">
<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){ }}
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
{{# } }}
{{# } }}
</select>
</div>
</script>
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request.js"></script>
<!-- <script src="../js/echarts.js"></script>
<script type="text/html" id="valueAxis">
<!-- 取值 -->
<div class="selectAxis">
<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){ }}
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
{{# } }} {{# } }}
</select>
</div>
</script>
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request_browserify.js"></script>
<!-- <script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script> -->
<script>
var echartsType = 'dashboard'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}">
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></div>
</script>
<script src="../js/color.js"></script>
<script src="./仪表盘.js"></script>
<script src="../js/varEcharts.js"></script>
</body>
</html>
\ No newline at end of file
<script>
var echartsType = 'dashboard'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}"
/>
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></div>
</script>
<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 @@
* @Description: 这是折线图页面（组件）
* @Date: 2021-03-02 16:27:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 17:35:31
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:04:36
-->
<!DOCTYPE html>
<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>
<meta charset="UTF-8">
<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-checkbox {
margin-right: 0px;
}
.layui-form-radio {
margin: 0;
}
.layui-form-radio {
margin: 0;
}
button[colorpicker-events="clear"] {
display: none;
}
button[colorpicker-events='clear'] {
display: none;
}
html,
head,
body {
height: 100%;
font-size: 13px;
color: #333333;
}
html,
head,
body {
height: 100%;
font-size: 13px;
color: #333333;
}
.echarts_left {
width: 100%;
}
.echarts_left {
width: 100%;
}
.axios_mar1 {
/* width: 23%; */
padding: 0 0 0 10px;
}
.axios_mar1 {
/* width: 23%; */
padding: 0 0 0 10px;
}
.axios_mar2 .layui-form-radio {
width: 30%;
}
.axios_mar2 .layui-form-radio {
width: 30%;
}
.axios_mar3 .layui-form-radio {
width: 20%;
}
</style>
.axios_mar3 .layui-form-radio {
width: 20%;
}
</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="355" 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>
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked>
<div class="showLin titleText">显示主标题</div>
</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">
<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="355"
name="false"
onclick="iconBoxFun(event,'iconBox1')"
id="iconBox1"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</div>
</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>
<form class="layui-form formBox">
<div>
<input id="titleShow" lay-filter="titleShow" type="checkbox" checked />
<div class="showLin titleText">显示主标题</div>
</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 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="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 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="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
id="test2"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></div>
<div class="echarts_jt">
<div class="echartText">坐标轴
<div num="579" name="false" onclick="iconBoxFun(event,'iconBox2')" id="iconBox2" class="iconBox1"><i class="layui-icon layui-icon-up"></i>
</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 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="xSize showLin axios_mar1">字号</div>
<div class="xselect sizeInputBox showLin">
<input id="xSize" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<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>
<div class="xColor showLin">颜色</div>
<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>
</form>
</div>
<div class="echarts_jt">
<div class="echartText">
坐标轴
<div
num="579"
name="false"
onclick="iconBoxFun(event,'iconBox2')"
id="iconBox2"
class="iconBox1"
>
<i class="layui-icon layui-icon-up"></i>
</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>
<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 class="showLin axios_mar1 inputBox">
<input id="yName1" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<div class="xSize showLin axios_mar1">字号</div>
<div class="xselect sizeInputBox showLin">
<input
id="xSize"
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 class="xColor showLin">颜色</div>
<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 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">
<input id="yUnite1" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
<input
id="yName1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div class="axios_mar1 axios_mar">
<div class="showLin">最大值</div>
<div class="showLin" style="width:90px">
<input id="yMax1" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
<div class="axios_mar1">
<input
id="YunitShow1"
lay-filter="YunitShow1"
type="checkbox"
checked
/>
<div class="showLin axisText">显示轴单位</div>
</div>
<div class="showLin unit">最小值</div>
<div class="showLin" style="width:90px">
<input id="yMin1" type="text" name="title" required
lay-verify="required" autocomplete="off" class="layui-input">
<div>
<div class="showLin axios_mar1 inputBox">
<input
id="yUnite1"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<input id="yshow1" lay-filter="yshow1" type="checkbox" checked>
<div class="showLin">自适应</div>
</div>
<div class="axios_mar1">
<div class="axios_mar">轴样式</div>
<div class="axios_mar1" style="margin-top:10px">字体</div>
<div class="echartsTile1 echartsTile axios_mar1">
<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 class="axios_mar1 axios_mar">
<div class="showLin">最大值</div>
<div class="showLin" style="width: 90px">
<input
id="yMax1"
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="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 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 class="axios_mar1">
<div class="axios_mar">轴样式</div>
<div class="axios_mar1" style="margin-top: 10px">字体</div>
<div class="echartsTile1 echartsTile axios_mar1">
<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 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> -->
</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> -->
</form>
</div>
<form class="layui-form formBox">
<div>
<div class="showLin">上边距</div>
<div class="showLin topMar">
<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 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 class="axios_mar">
<div class="showLin">下边距</div>
<div class="showLin topMar">
<input id="bottomMar" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<form class="layui-form formBox">
<div>
<div class="showLin">上边距</div>
<div class="showLin topMar">
<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 class="showLin">右边距</div>
<div class="showLin topMar">
<input id="rightMar" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<div class="axios_mar">
<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 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>
</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">
</form>
</div>
</form>
<div class="echarts_jt">
<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 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">
<div>
<input id="legendShow" lay-filter="legendShow" type="checkbox" checked>
<div class="showLin">显示图例</div>
</div>
<div class="axios_mar1 axios_mar">
<div class="axios_mar3">
<input lay-filter="rightLegend" type="radio" 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="顶部">
<form class="layui-form formBox" style="max-height: 160px; overflow: auto">
<div class="auxiliary_box"></div>
</form>
<div class="echarts_jt">
<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>
<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 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">
<form class="layui-form formBox">
<div>
<input id="legendShow" lay-filter="legendShow" type="checkbox" checked />
<div class="showLin">显示图例</div>
</div>
<div class="xColor showLin">颜色</div>
<div id="test3" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
</div>
</div>
</form>
</div>
<div class="axios_mar1 axios_mar">
<div class="axios_mar3">
<input
lay-filter="rightLegend"
type="radio"
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 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 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 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>
<form class="layui-form formBox">
<div>样式</div>
<div class="axios_mar axios_mar1">
<input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked>
<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 class="echarts_jt">
<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 class="axios_mar">
<div class="xSize showLin axios_mar1">字号:</div>
<div class="xselect sizeInputBox showLin">
<input id="LabelSize" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<form class="layui-form formBox">
<div>样式</div>
<div class="axios_mar axios_mar1">
<input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked />
<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 class="xColor showLin">颜色:</div>
<div id="test4" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
</div>
</form>
</div>
<div class="echarts_jt">
<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>
</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 class="axios_mar">
<div class="xSize showLin axios_mar1">字号:</div>
<div class="xselect sizeInputBox showLin">
<input
id="LabelSize"
type="text"
name="title"
required
lay-verify="required"
autocomplete="off"
class="layui-input"
/>
</div>
<div class="xColor showLin">颜色:</div>
<div
id="test4"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></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>
</form>
</div>
<div class="echarts_jt">
<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>
</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>
<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 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>
</form>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request.js"></script>
<!-- <script src="../js/color.js"></script> -->
<script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script>
<script>
var echartsType = 'line'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}">
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></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>
</div>
</script>
<script type="text/html" id="selectAxis">
<!-- 轴选择 -->
<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){ }} <option
value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.moreAxisArr[i]}}</option>
{{# } }}
{{# } }}
</select>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./折线图.js"></script>
<script src="../js/varEcharts.js"></script>
<script src="../js/guide.js"></script>
<script>
document.onkeydown = function (e) {
if(e.keyCode == 90){
window.parent.goback()
}else if(e.keyCode == 89){
window.parent.backgo()
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request_browserify.js"></script>
<!-- <script src="../js/color.js"></script> -->
<script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script>
<script>
var echartsType = 'line'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}"
/>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></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>
</div>
</script>
<script type="text/html" id="selectAxis">
<!-- 轴选择 -->
<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){ }}
<option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.moreAxisArr[i]}}</option>
{{# } }} {{# } }}
</select>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./折线图.js"></script>
<script src="../js/varEcharts.js"></script>
<script src="../js/guide.js"></script>
<script>
document.onkeydown = function (e) {
if (e.keyCode == 90) {
window.parent.goback()
} else if (e.keyCode == 89) {
window.parent.backgo()
}
}
}
function colorclick(){
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// console.log($('.bodycolorcover',parent.document))
// $($('.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>`)
// $($('.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>
\ No newline at end of file
function colorclick() {
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// console.log($('.bodycolorcover',parent.document))
// $($('.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>`)
// $($('.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>
折线图/折线图.js
View file @ 16c359b4
......@@ -2,8 +2,8 @@
* @Description: 这是***页面（组件）
* @Date: 2021-03-04 18:52:19
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-06 17:35:11
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:08:34
*/
var layer = layui.layer;
var form = layui.form;
......@@ -814,7 +814,7 @@ function LineinitEchart(data,name,type){
var dom = ''
for(let i=0;i<YAxisesArr.length;i++){
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>
<div class="yBox yBox${yBox} deleteYBox" style="position:relative" name="${yBox}">
......
折线图/折线图变量.html
View file @ 16c359b4
......@@ -2,193 +2,217 @@
* @Description: 这是折线图页面（组件）
* @Date: 2021-03-02 16:27:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 16:01:14
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:04:39
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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{
margin:0;
}
button[colorpicker-events="clear"]{
display: none;
}
html,head,body{
height: 100%;;
}
.layui-form-select dl dd.layui-this{
background-color: #a4ccf5 !important;
}
</style>
<body>
<div class="BarChart">
<div class="Barchart_conter clearfix">
<div class="BarChart_left left">
<div class="BarChart_var clearfix">
<div class="left var_left">
<div style="margin-top:12px;margin-bottom:14px;font-size:14px">数据</div>
<div>
<form class="layui-form formBox">
<div style="margin-bottom:10px;font-size:14px">数据关联：</div>
<div class="showLin" style="margin-left:20px;width:400px;height: 32px;">
<select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<!-- <option value="统计数据">统计数据</option> -->
<option value="业务数据">业务数据</option>
</select>
</div>
</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 class="showLin" style="margin-left:20px;width:400px;height: 32px;">
<select lay-filter="chart-data" name="city" id="chart-table" lay-verify="required">
<!-- <option value="实时数据">实时数据</option>
<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;
}
.layui-form-checkbox {
margin-right: 0px;
}
.layui-form-radio {
margin: 0;
}
button[colorpicker-events='clear'] {
display: none;
}
html,
head,
body {
height: 100%;
}
.layui-form-select dl dd.layui-this {
background-color: #a4ccf5 !important;
}
</style>
<body>
<div class="BarChart">
<div class="Barchart_conter clearfix">
<div class="BarChart_left left">
<div class="BarChart_var clearfix">
<div class="left var_left">
<div style="margin-top: 12px; margin-bottom: 14px; font-size: 14px">数据</div>
<div>
<form class="layui-form formBox">
<div style="margin-bottom: 10px; font-size: 14px">数据关联：</div>
<div class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<!-- <option value="统计数据">统计数据</option> -->
<option value="业务数据">业务数据</option>
</select>
</div>
</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 class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<select
lay-filter="chart-data"
name="city"
id="chart-table"
lay-verify="required"
>
<!-- <option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<option value="业务数据">业务数据</option> -->
</select>
</div>
</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>
新增
</select>
</div>
</form>
</div>
</div>
<div class="varTitle">横轴/维度</div>
<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>
</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 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 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">
</div>
<div class="varTitle">横轴/维度</div>
<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>
</div>
</form>
</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"
></select>
</div>
</form>
</div>
<div class="ax-table" id="ax-table" >
<div class="table formBox1">
<table class="layui-hide" id="table-demo" lay-filter="table-demo"></table>
<div class="ax-table" id="ax-table">
<div class="table formBox1">
<table class="layui-hide" id="table-demo" lay-filter="table-demo"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request.js"></script>
<!-- <script src="../js/color.js"></script> -->
<script src="../js/dropdown.js"></script>
<!-- <script src="../js/echarts.js"></script> -->
<!-- <script???? src="../js/ecStat.js"></script????> -->
<script>
var echartsType = 'line'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}">
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}" class="colorBlock1 colorBlock2"></div>
<!-- <div lay-event="delete" class="DataDelete">
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request_browserify.js"></script>
<!-- <script src="../js/color.js"></script> -->
<script src="../js/dropdown.js"></script>
<!-- <script src="../js/echarts.js"></script> -->
<!-- <script???? src="../js/ecStat.js"></script????> -->
<script>
var echartsType = 'line'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}"
/>
</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>
</div> -->
{{# if(d.NO === 1){ }}
{{# if(d.NO === 1){ }}
<span></span>
{{# }else{ }}
{{# }else{ }}
<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>
</div>
{{# } }}
</script>
<script type="text/html" id="selectAxis">
<!-- 轴选择 -->
<div class="selectAxis">
{{# } }}
</script>
<script type="text/html" id="selectAxis">
<!-- 轴选择 -->
<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){ }}
<option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.moreAxisArr[i]}}</option>
{{# } }}
{{# } }}
{{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# if(d.moreAxisArr[i] == d.moreAxis){ }}
<option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.moreAxisArr[i]}}</option>
{{# } }} {{# } }}
</select>
</div>
</script>
<script type="text/html" id="valueAxis">
<!-- 取值 -->
<div class="selectAxis">
<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){ }}
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
{{# } }}
{{# } }}
</select>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./折线图.js"></script>
<script src="../js/varEcharts.js"></script>
<script src="../js/guide.js"></script>
<script src="../js/guide.js"></script>
</body>
</html>
\ No newline at end of file
</div>
</script>
<script type="text/html" id="valueAxis">
<!-- 取值 -->
<div class="selectAxis">
<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){ }}
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
{{# } }} {{# } }}
</select>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./折线图.js"></script>
<script src="../js/varEcharts.js"></script>
<script src="../js/guide.js"></script>
<script src="../js/guide.js"></script>
</body>
</html>
柱形图/柱形图.html
View file @ 16c359b4
......@@ -2,211 +2,232 @@
* @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 17:54:13
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:04:41
-->
<!DOCTYPE html>
<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>
<meta charset="UTF-8">
<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-checkbox {
margin-right: 0px;
}
.layui-form-radio {
margin: 0;
}
.layui-form-radio {
margin: 0;
}
button[colorpicker-events='clear'] {
display: none;
}
button[colorpicker-events="clear"] {
display: none;
}
html,
head,
body {
height: 100%;
font-size: 13px;
color: #333333;
}
html,
head,
body {
height: 100%;
font-size: 13px;
color: #333333;
.axios_mar1 {
/* width: 23%; */
padding: 0 0 0 10px;
}
}
.axios_mar2 .layui-form-radio {
width: 30%;
}
.axios_mar1 {
/* width: 23%; */
padding: 0 0 0 10px;
}
.axios_mar3 .layui-form-radio {
width: 20%;
}
</style>
.axios_mar2 .layui-form-radio {
width: 30%;
}
.axios_mar3 .layui-form-radio {
width: 20%;
}
</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">
<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="651" name="false" onclick="iconBoxFun(event,'iconBox2')" id="iconBox2" class="iconBox"><i class="layui-icon layui-icon-up"></i>
<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="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>
</select>
<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="xSize showLin axios_mar1">字号</div>
<div class="xselect sizeInputBox showLin">
<input id="xSize" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<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="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 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="inputBox axios_mar1">
<input id="yUnite" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<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="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 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 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>
<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>
<input id="yshow" lay-filter="yshow" type="checkbox" checked>
<div class="showLin">自适应</div>
</div>
<div class="axios_mar1">
<div class=" axios_mar">轴样式</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="axios_mar1" style="margin-top:10px">字体</div>
<div class="echartsTile1 echartsTile axios_mar1">
<select id="YAxiosFontFamily" lay-filter="YAxiosFontFamily" name="city"
lay-verify="required">
<div class="echarts_attribute">
<div class="echarts_jt">
<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>
</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>
......@@ -215,245 +236,489 @@
<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 class="xSize showLin axios_mar1">字号</div>
<div class="xselect sizeInputBox showLin">
<input
id="xSize"
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 class="showLin">颜色</div>
<div id="test1" class=" colorBlock colorBlock1 showLin" style="margin-right: 40px;" onclick="colorclick()"></div>
<div class="axios_mar1">
<div class="axios_mar">轴样式</div>
<input id="yshowLine" lay-filter="yshowLine" type="checkbox" checked>
<div class="showLin">分割线</div>
<div class="axios_mar1" style="margin-top: 10px">字体</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>
</form>
</div>
</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>
<form class="layui-form formBox">
<div>
<div class="showLin">上边距</div>
<div class="showLin topMar">
<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 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 class="axios_mar">
<div class="showLin">左边距</div>
<div class="showLin topMar">
<input id="letfMar" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<form class="layui-form formBox">
<div>
<div class="showLin">上边距</div>
<div class="showLin topMar">
<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 class="showLin">右边距</div>
<div class="showLin topMar">
<input id="rightMar" type="text" name="title" required lay-verify="required"
autocomplete="off" class="layui-input">
<div class="axios_mar">
<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 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>
</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">
</form>
</div>
</form>
<div class="echarts_jt">
<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 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">
<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 class="layui-form formBox" style="max-height: 160px; overflow: auto">
<div class="auxiliary_box"></div>
</form>
</div>
<div class="echarts_jt">
<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>
<form class="layui-form formBox">
<div>样式</div>
<div class="axios_mar1 axios_mar">
<input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked>
<div class="showLin">显示数值</div>
</div>
<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 class="echarts_jt">
<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>
<div class="xColor showLin">颜色</div>
<div id="test4" class="colorBlock colorBlock1 showLin" onclick="colorclick()"></div>
</div>
</form>
</div>
<form class="layui-form formBox">
<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="echartText">配色方案
<div num="93" name="false" onclick="iconBoxFun(event,'iconBox6')" id="iconBox6" class="iconBox"><i class="layui-icon layui-icon-up"></i>
<div class="echarts_jt">
<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>
<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>
<form class="layui-form formBox">
<div>样式</div>
<div class="axios_mar1 axios_mar">
<input id="LabelShow" lay-filter="LabelShow" type="checkbox" checked />
<div class="showLin">显示数值</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 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>
<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 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 class="xColor showLin">颜色</div>
<div
id="test4"
class="colorBlock colorBlock1 showLin"
onclick="colorclick()"
></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>
</form>
</div>
<div class="echarts_jt">
<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>
</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>
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<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>
var echartsType = 'bar'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}">
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></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>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./柱形图.js" aysnc="aysnc"></script>
<script src="../js/varEcharts.js" aysnc="aysnc"></script>
<script src="../js/guide.js" aysnc="aysnc"></script>
<script>
document.onkeydown = function (e) {
if(e.keyCode == 90){
window.parent.goback()
}else if(e.keyCode == 89){
window.parent.backgo()
}
}
function colorclick(){
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// $($('.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>`)
// $($('.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>
\ No newline at end of file
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../utils/request_browserify.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script>
<script>
var echartsType = 'bar'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}"
/>
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}"></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>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./柱形图.js" aysnc="aysnc"></script>
<script src="../js/varEcharts.js" aysnc="aysnc"></script>
<script src="../js/guide.js" aysnc="aysnc"></script>
<script>
document.onkeydown = function (e) {
if (e.keyCode == 90) {
window.parent.goback()
} else if (e.keyCode == 89) {
window.parent.backgo()
}
}
function colorclick() {
// for(let i1 =0;i1<$('.bodycolorcover',parent.document).length;i1++){
// $($('.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>`)
// $($('.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>
柱形图/柱形图变量.html
View file @ 16c359b4
......@@ -2,191 +2,214 @@
* @Description: 这是***页面（组件）
* @Date: 2021-03-02 16:27:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 15:38:55
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:04:44
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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{
margin:0;
}
button[colorpicker-events="clear"]{
display: none;
}
html,head,body{
height: 100%;;
}
</style>
<body>
<div class="BarChart">
<div class="Barchart_conter clearfix">
<div class="BarChart_left left">
<div class="BarChart_var clearfix">
<div class="left var_left">
<div style="margin-top:12px;margin-bottom:14px;font-size:14px">数据</div>
<div>
<form class="layui-form formBox">
<div style="margin-bottom:10px;font-size:14px">数据关联：</div>
<div class="showLin" style="margin-left:20px;width:400px;height: 32px;">
<select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<!-- <option value="统计数据">统计数据</option> -->
<option value="业务数据">业务数据</option>
</select>
</div>
</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 class="showLin" style="margin-left:20px;width:400px;height: 32px;">
<select lay-filter="chart-data" name="city" id="chart-table" lay-verify="required">
<!-- <option value="实时数据">实时数据</option>
<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;
}
.layui-form-checkbox {
margin-right: 0px;
}
.layui-form-radio {
margin: 0;
}
button[colorpicker-events='clear'] {
display: none;
}
html,
head,
body {
height: 100%;
}
</style>
<body>
<div class="BarChart">
<div class="Barchart_conter clearfix">
<div class="BarChart_left left">
<div class="BarChart_var clearfix">
<div class="left var_left">
<div style="margin-top: 12px; margin-bottom: 14px; font-size: 14px">数据</div>
<div>
<form class="layui-form formBox">
<div style="margin-bottom: 10px; font-size: 14px">数据关联：</div>
<div class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<select lay-filter="data" name="city" id="data-relate" lay-verify="required">
<option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<!-- <option value="统计数据">统计数据</option> -->
<option value="业务数据">业务数据</option>
</select>
</div>
</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 class="showLin" style="margin-left: 20px; width: 400px; height: 32px">
<select
lay-filter="chart-data"
name="city"
id="chart-table"
lay-verify="required"
>
<!-- <option value="实时数据">实时数据</option>
<option value="历史数据">历史数据</option>
<option value="业务数据">业务数据</option> -->
</select>
</div>
</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>
新增
</select>
</div>
</form>
</div>
</div>
<div class="varTitle">横轴/维度</div>
<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 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 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">
</div>
<div class="varTitle">横轴/维度</div>
<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}
</select>
</div>
</form>
</div>
</form>
</div>
<div class="ax-table" id="ax-table" >
<div class="table formBox1">
<table class="layui-hide" id="table-demo" lay-filter="table-demo"></table>
<div class="ax-table" id="ax-table">
<div class="table formBox1">
<table class="layui-hide" id="table-demo" lay-filter="table-demo"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/moment.js" aysnc="aysnc"></script>
<script src="../js/jquery-1.10.2.min.js" aysnc="aysnc"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js" aysnc="aysnc"></script>
<script src="../utils/request.js" aysnc="aysnc"></script>
<script src="../js/dropdown.js" aysnc="aysnc"></script>
<!-- <script src="../js/echarts.js" aysnc="aysnc"></script>
<script src="../js/moment.js" aysnc="aysnc"></script>
<script src="../js/jquery-1.10.2.min.js" aysnc="aysnc"></script>
<!-- 引入axiox -->
<script src="https://unpkg.com/axios/dist/axios.min.js" aysnc="aysnc"></script>
<script src="../utils/request_browserify.js" aysnc="aysnc"></script>
<script src="../js/dropdown.js" aysnc="aysnc"></script>
<!-- <script src="../js/echarts.js" aysnc="aysnc"></script>
<script src="../js/ecStat.js" aysnc="aysnc"></script> -->
<script>
var echartsType = 'bar'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}">
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}" class="colorBlock1 colorBlock2"></div>
<!-- <div lay-event="delete" class="DataDelete">
<script>
var echartsType = 'bar'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}"
/>
<div class="varSelectBox">...</div>
</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>
</div> -->
{{# if(d.NO === 1){ }}
{{# if(d.NO === 1){ }}
<span></span>
{{# }else{ }}
{{# }else{ }}
<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>
</div>
{{# } }}
</script>
<script type="text/html" id="selectAxis">
<!-- 轴选择 -->
<div class="selectAxis">
{{# } }}
</script>
<script type="text/html" id="selectAxis">
<!-- 轴选择 -->
<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){ }}
<option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.moreAxisArr[i]}}</option>
{{# } }}
{{# } }}
{{# for(let i=0;i<d.moreAxisArr.length;i++){ }} {{# if(d.moreAxisArr[i] == d.moreAxis){ }}
<option value="{{i}}" selected>{{d.moreAxisArr[i]}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.moreAxisArr[i]}}</option>
{{# } }} {{# } }}
</select>
</div>
</script>
<script type="text/html" id="valueAxis">
<!-- 取值 -->
<div class="selectAxis">
<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){ }}
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
{{# } }}
{{# } }}
</select>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./柱形图.js" aysnc="aysnc"></script>
<script src="../js/varEcharts.js" aysnc="aysnc"></script>
<script src="../js/guide.js" aysnc="aysnc"></script>
</body>
</html>
\ No newline at end of file
</div>
</script>
<script type="text/html" id="valueAxis">
<!-- 取值 -->
<div class="selectAxis">
<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){ }}
<option value="{{i}}" selected>{{d.valueAxisArr[i].name}}</option>
{{# }else{ }}
<option value="{{i}}">{{d.valueAxisArr[i].name}}</option>
{{# } }} {{# } }}
</select>
</div>
</script>
<script src="../js/color.js"></script>
<script src="./柱形图.js" aysnc="aysnc"></script>
<script src="../js/varEcharts.js" aysnc="aysnc"></script>
<script src="../js/guide.js" aysnc="aysnc"></script>
</body>
</html>
饼图/饼图.html
View file @ 16c359b4
......@@ -2,86 +2,279 @@
* @Description: 这是饼图页面（组件）
* @Date: 2021-03-02 16:27:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 16:55:30
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 18:50:21
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<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"/>
<link rel="stylesheet" href="../css/饼图.css">
<link rel="stylesheet" href="../layui/css/layui.css" />
<link rel="stylesheet" href="../css/柱形图.css" type="text/css" />
<link rel="stylesheet" href="../css/饼图.css" />
<style type="text/css">
.layui-form-checkbox i{
border-left:-1px;
}
.layui-form-checkbox{
margin-right:0px;
}
.layui-form-radio{
margin:0;
width: 26%;
}
button[colorpicker-events="clear"]{
display: none;
}
html,head,body{
height: 100%;
font-size: 13px;
color: #333333;
}
.echarts_left{
margin-left: 0;
width: 100%;
}
/* .BarChart{
<style type="text/css">
.layui-form-checkbox i {
border-left: -1px;
}
.layui-form-checkbox {
margin-right: 0px;
}
.layui-form-radio {
margin: 0;
width: 26%;
}
button[colorpicker-events='clear'] {
display: none;
}
html,
head,
body {
height: 100%;
font-size: 13px;
color: #333333;
}
.echarts_left {
margin-left: 0;
width: 100%;
}
/* .BarChart{
width: 100%;
} */
.sex .layui-form-radio{
width: 20%;
}
</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_attribute">
<div class="echarts_jt">
<div class="echartText">
图表配置
<div num="345" 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>
<input style="width:14px;height:14px" id="titleShow" type="checkbox" checked>
<div class="showLin titleText">显示主标题</div>
.sex .layui-form-radio {
width: 20%;
}
</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_attribute">
<div class="echarts_jt">
<div class="echartText">
图表配置
<div
num="345"
name="false"
onclick="iconBoxFun(event,'iconBox1')"
id="iconBox1"
class="iconBox"
>
<i class="layui-icon layui-icon-up"></i>
</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">
<form class="layui-form formBox">
<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>
<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="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>
......@@ -90,252 +283,216 @@
<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="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="xColor showLin">颜色</div>
<div id="test2" class="colorBlock colorBlock1 showLin"></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="showLin" style="margin-left:50px">加粗</div>
<div class="showLin" id="titleWeight" style="cursor:pointer;">
<i class="layui-icon layui-icon-fonts-strong"></i>
<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>
<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="右对齐">
<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 class="bg">
<div class="xColor showLin">背景</div>
<div id="test5" class="colorBlock colorBlock1 showLin"></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>
</div>
</form>
</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>
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script>
<script>
var echartsType = 'pie'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}">
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}" class="colorBlock1"></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>
</div>
</script>
<!-- <script src="../js/color.js"></script> -->
<script src="../js/color.js"></script>
<script src="./饼图.js"></script>
<script src="../js/varEcharts.js"></script>
<script>
document.onkeydown = function (e) {
if(e.keyCode == 90){
window.parent.goback()
}else if(e.keyCode == 89){
window.parent.backgo()
}
}
// 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'
// }
<script src="../js/moment.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/ecStat.js"></script>
<script>
var echartsType = 'pie'
</script>
<script type="text/html" id="titleTpl">
<!-- 变量配置 -->
<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}}"
/>
<div class="varSelectBox">...</div>
</div>
</script>
<script type="text/html" id="titleColor">
<!-- 颜色选择器 -->
<div id="color{{d.NO}}" class="colorBlock1"></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>
</div>
</script>
<!-- <script src="../js/color.js"></script> -->
<script src="../js/color.js"></script>
<script src="./饼图.js"></script>
<script src="../js/varEcharts.js"></script>
<script>
document.onkeydown = function (e) {
if (e.keyCode == 90) {
window.parent.goback()
} else if (e.keyCode == 89) {
window.parent.backgo()
}
}
// 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>`)
// $($('.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>
\ No newline at end of file
// $($('.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>
</html>
饼图/饼图变量.html
View file @ 16c359b4
......@@ -2,8 +2,8 @@
* @Description: 这是***页面（组件）
* @Date: 2021-04-02 15:30:32
* @Author: Tao
* @LastEditors: Tao
* @LastEditTime: 2021-04-02 15:59:52
* @LastEditors: 莫靓仔
* @LastEditTime: 2021-09-14 19:04:46
-->
<!--
* @Description: 这是饼图页面（组件）
......@@ -19,14 +19,7 @@
<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>
<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">
......@@ -155,7 +148,7 @@
<script src="../js/jquery-1.10.2.min.js"></script>
<!-- 引入axiox -->
<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/ecStat.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