|
@@ -0,0 +1,252 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <title>Api Analysis</title>
|
|
|
+ <!-- 引入刚刚下载的 ECharts 文件 -->
|
|
|
+ <!-- 引入 layui.css -->
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
|
|
|
+ <!-- 引入 layui.js -->
|
|
|
+ <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
|
|
|
+ <script src="https://maplemei.gitee.io/xm-select/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background-color: #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ div {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+ <div id="condition" style=" margin-bottom: 10px; padding: 20px 20px 8px 10px; margin-top: 10px;"
|
|
|
+ class="layui-form-item">
|
|
|
+
|
|
|
+ <form class="layui-form" action="" lay-filter="info">
|
|
|
+ <div class="layui-row">
|
|
|
+ <div class="layui-col-xs3">
|
|
|
+ <div class="grid-demo grid-demo-bg1">
|
|
|
+ <button type="submit" class="layui-btn layui-btn-radius" lay-submit=""
|
|
|
+ lay-filter="search">查询账单</button>
|
|
|
+ <div class="layui-inline">
|
|
|
+
|
|
|
+ <label class="layui-form-label">日期选择:</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+
|
|
|
+ <input type="text" name="date" id="date" autocomplete="off" class="layui-input">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-col-xs3">
|
|
|
+ <div class="grid-demo">
|
|
|
+
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div id="ResourceGroup"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-col-xs3">
|
|
|
+ <div class="grid-demo grid-demo-bg1">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div id="MeterCategory"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-col-xs3">
|
|
|
+ <div class="grid-demo">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div id="ConsumedService"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
|
|
+ <div id="regionChart" style="width: 100%;height:400px;margin-bottom: 20px;"></div>
|
|
|
+ <div id="minChart" style="width: 100%;height:400px;margin-bottom: 20px;"></div>
|
|
|
+ <script>
|
|
|
+ layui.use(['jquery', 'form', 'laydate'], function () {
|
|
|
+ var laydate = layui.laydate;
|
|
|
+ var form = layui.form;
|
|
|
+ var layer = layui.layer;
|
|
|
+ var date = new Date();
|
|
|
+ //年月范围
|
|
|
+ laydate.render({
|
|
|
+ elem: '#date', type: 'month', range: true, format: 'yyyy/MM', max: "date"
|
|
|
+ });
|
|
|
+ //如果需要使用原始保单提交方式(刷新整个页面)
|
|
|
+ //请注释掉下方 监听表单的 代码
|
|
|
+ form.on('submit(search)', function (data) {
|
|
|
+ //打印表单数据
|
|
|
+ alert(JSON.stringify(data.field))
|
|
|
+ // layer.alert("提交成功;如果需要使用原始保单提交方式,请注释掉本段代码", {
|
|
|
+ // title: '提示'
|
|
|
+ // });
|
|
|
+ //ajax操作等
|
|
|
+ // some code
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: "https://rc.teammodel.cn/bill/report",
|
|
|
+ data: data.field,
|
|
|
+ type: "post",
|
|
|
+ dataType: "json",
|
|
|
+ headers: { 'Content-Type': 'application/json;charset=utf-8' }, //接口json格式
|
|
|
+ success: function (data) {
|
|
|
+ console.log(data);
|
|
|
+ layer.alert(JSON.stringify(data), {
|
|
|
+ title: data
|
|
|
+ });
|
|
|
+ },
|
|
|
+ error: function (data) {
|
|
|
+ layer.alert(JSON.stringify(data), {
|
|
|
+ title: data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ {
|
|
|
+ var options_ResourceGroup = {
|
|
|
+ el: '#ResourceGroup',
|
|
|
+ name: 'ResourceGroup',//表单的name属性
|
|
|
+ // layVerify: 'required',//必填项
|
|
|
+ //layVerType: 'tips',//提示类型 同layui
|
|
|
+ //tips: '你喜欢什么水果呢?傻瓜教程',
|
|
|
+ toolbar: {//工具条,全选,清空,反选,自定义
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
+ 'ALL',
|
|
|
+ 'CLEAR',
|
|
|
+ 'REVERSE'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ //initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
|
|
|
+ //language: 'zn',//语言包
|
|
|
+ //filterable: true,//搜索功能
|
|
|
+ //autoRow: true,//选项过多,自动换行
|
|
|
+ // repeat: true,//是否支持重复选择
|
|
|
+ //max: 2,//最多选择2个
|
|
|
+ // template({ item, sels, name, value }){
|
|
|
+ // //template:自定义下拉框的模板
|
|
|
+ // return item.name + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
|
|
|
+ // },
|
|
|
+ };
|
|
|
+ var ResourceGroupData = xmSelect.render(options_ResourceGroup)
|
|
|
+ setTimeout(function () {
|
|
|
+ //假设data是ajax 异步获取的
|
|
|
+ var data = [
|
|
|
+ //selected属性可以初始化下拉框
|
|
|
+ //{name: '水果', value:'shuiguo',selected:true, disabled: true},
|
|
|
+ { name: '水果', value: 'shuiguo', disabled: true },
|
|
|
+ { name: '蔬菜', value: 'shucai' },
|
|
|
+ { name: '桌子', value: 'zhuozi' },
|
|
|
+ { name: '北京', value: 'beijing' },
|
|
|
+ ];
|
|
|
+ //模拟通过ajax 获取json数据,异步更新多选下拉框的值
|
|
|
+ ResourceGroupData.update({ data: data })
|
|
|
+ }, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ {
|
|
|
+ var options_MeterCategory = {
|
|
|
+ el: '#MeterCategory',
|
|
|
+ name: 'MeterCategory',//表单的name属性
|
|
|
+ // layVerify: 'required',//必填项
|
|
|
+ // layVerType: 'tips',//提示类型 同layui
|
|
|
+ tips: '你喜欢什么水果呢?傻瓜教程',
|
|
|
+ toolbar: {//工具条,全选,清空,反选,自定义
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
+ 'ALL',
|
|
|
+ 'CLEAR',
|
|
|
+ 'REVERSE'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ //initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
|
|
|
+ //language: 'zn',//语言包
|
|
|
+ //filterable: true,//搜索功能
|
|
|
+ //autoRow: true,//选项过多,自动换行
|
|
|
+ // repeat: true,//是否支持重复选择
|
|
|
+ //max: 2,//最多选择2个
|
|
|
+ // template({ item, sels, name, value }){
|
|
|
+ // //template:自定义下拉框的模板
|
|
|
+ // return item.name + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
|
|
|
+ // },
|
|
|
+ };
|
|
|
+ var MeterCategoryData = xmSelect.render(options_MeterCategory)
|
|
|
+ setTimeout(function () {
|
|
|
+ //假设data是ajax 异步获取的
|
|
|
+ var data = [
|
|
|
+ //selected属性可以初始化下拉框
|
|
|
+ //{name: '水果', value:'shuiguo',selected:true, disabled: true},
|
|
|
+ { name: '水果', value: 'shuiguo', disabled: true },
|
|
|
+ { name: '蔬菜', value: 'shucai' },
|
|
|
+ { name: '桌子', value: 'zhuozi' },
|
|
|
+ { name: '北京', value: 'beijing' },
|
|
|
+ ];
|
|
|
+ //模拟通过ajax 获取json数据,异步更新多选下拉框的值
|
|
|
+ MeterCategoryData.update({ data: data })
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ {
|
|
|
+ var options_ConsumedService = {
|
|
|
+ el: '#ConsumedService',
|
|
|
+ name: 'ConsumedService',//表单的name属性
|
|
|
+ // layVerify: 'required',//必填项
|
|
|
+ //layVerType: 'tips',//提示类型 同layui
|
|
|
+ // tips: '你喜欢什么水果呢?傻瓜教程',
|
|
|
+ toolbar: {//工具条,全选,清空,反选,自定义
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
+ 'ALL',
|
|
|
+ 'CLEAR',
|
|
|
+ 'REVERSE'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ //initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
|
|
|
+ //language: 'zn',//语言包
|
|
|
+ //filterable: true,//搜索功能
|
|
|
+ //autoRow: true,//选项过多,自动换行
|
|
|
+ // repeat: true,//是否支持重复选择
|
|
|
+ //max: 2,//最多选择2个
|
|
|
+ // template({ item, sels, name, value }){
|
|
|
+ // //template:自定义下拉框的模板
|
|
|
+ // return item.name + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
|
|
|
+ // },
|
|
|
+ };
|
|
|
+ var ConsumedServiceData = xmSelect.render(options_ConsumedService)
|
|
|
+ setTimeout(function () {
|
|
|
+ //假设data是ajax 异步获取的
|
|
|
+ var data = [
|
|
|
+ //selected属性可以初始化下拉框
|
|
|
+ //{name: '水果', value:'shuiguo',selected:true, disabled: true},
|
|
|
+ { name: '水果', value: 'shuiguo', disabled: true },
|
|
|
+ { name: '蔬菜', value: 'shucai' },
|
|
|
+ { name: '桌子', value: 'zhuozi' },
|
|
|
+ { name: '北京', value: 'beijing' },
|
|
|
+ ];
|
|
|
+ //模拟通过ajax 获取json数据,异步更新多选下拉框的值
|
|
|
+ ConsumedServiceData.update({ data: data })
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|