|
@@ -0,0 +1,452 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
|
|
+<head>
|
|
|
+ <th:block th:include="include :: header('DTP处方登记概览')" />
|
|
|
+ <th:block th:include="include :: layout-latest-css" />
|
|
|
+ <th:block th:include="include :: ztree-css" />
|
|
|
+ <script th:src="@{/health/js/echarts.min.js}"></script>
|
|
|
+ <style>
|
|
|
+ #chart-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="gray-bg">
|
|
|
+
|
|
|
+ <div class="ui-layout-center">
|
|
|
+ <div class="ant-card-head">
|
|
|
+ <div class="ant-card-head-wrapper">
|
|
|
+ <div class="ant-card-head-title">
|
|
|
+ <div class="index_title-2CoZR">
|
|
|
+ <h1>DTP处方登记概览</h1>
|
|
|
+ <button onclick="" class="ant-btn-primary">导出订单</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="container-div">
|
|
|
+ <form id="report-form">
|
|
|
+ <input type="text" class="" hidden="true" value="" name="id">
|
|
|
+ <div class="ChartAndTable_chart-and-table-3ib6R">
|
|
|
+ <div class="ant-radio-group ant-radio-group-outline">
|
|
|
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
|
|
|
+ <span class="ant-radio-button ant-radio-button-checked">
|
|
|
+ <input type="radio" class="ant-radio-button-input" value="1" checked="">
|
|
|
+ <span class="ant-radio-button-inner">
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span>订单量模式</span>
|
|
|
+ </label>
|
|
|
+ <label class="ant-radio-button-wrapper">
|
|
|
+ <span class="ant-radio-button">
|
|
|
+ <input type="radio" class="ant-radio-button-input" value="2">
|
|
|
+ <span class="ant-radio-button-inner">
|
|
|
+
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span>百分比模式</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="ant-radio-group ant-radio-group-outline">
|
|
|
+ <label class="ant-radio-button-wrapper2">
|
|
|
+ <span class="ant-radio-button ant-radio-button-checked">
|
|
|
+ <input type="radio" class="ant-radio-button-input" value="7" checked="">
|
|
|
+ <span class="ant-radio-button-inner"></span>
|
|
|
+ </span><span>本周</span></label>
|
|
|
+ <label class="ant-radio-button-wrapper2">
|
|
|
+ <span class="ant-radio-button">
|
|
|
+ <input type="radio" class="ant-radio-button-input" value="30">
|
|
|
+ <span class="ant-radio-button-inner">
|
|
|
+
|
|
|
+ </span></span><span>本月</span></label>
|
|
|
+ <label class="ant-radio-button-wrapper2">
|
|
|
+ <span class="ant-radio-button">
|
|
|
+ <input type="radio" class="ant-radio-button-input" value="60">
|
|
|
+ <span class="ant-radio-button-inner">
|
|
|
+
|
|
|
+ </span></span><span>上月</span></label>
|
|
|
+ <label class="ant-radio-button-wrapper2">
|
|
|
+ <span class="ant-radio-button">
|
|
|
+ <input type="radio" class="ant-radio-button-input" value="365">
|
|
|
+ <span class="ant-radio-button-inner">
|
|
|
+
|
|
|
+ </span></span>
|
|
|
+ <span>本年</span>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label>订单日期 </label>
|
|
|
+ <input type="text" class="styled-input time-input" id="startTime" placeholder="开始时间" name="beginTime"/>
|
|
|
+ <span>-</span>
|
|
|
+ <input type="text" class="styled-input time-input" id="endTime" placeholder="结束时间" name="endTime"/>
|
|
|
+ <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
|
|
+ <a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i class="fa fa-refresh"></i> 重置</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <div id="chart-container"></div>
|
|
|
+ <div class="col-sm-12 select-table table-striped">
|
|
|
+ <table id="bootstrap-table"></table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+<th:block th:include="include :: footer" />
|
|
|
+<th:block th:include="include :: layout-latest-js" />
|
|
|
+<th:block th:include="include :: ztree-js" />
|
|
|
+<script th:inline="javascript">
|
|
|
+ var prefix = ctx + "dtp/report";
|
|
|
+ var names=[];
|
|
|
+ var Xnames=[];
|
|
|
+ var submitted=[];
|
|
|
+ var unsubmitted=[];
|
|
|
+ var retData=[];
|
|
|
+
|
|
|
+ // 初始化 ECharts 图表
|
|
|
+ var myChart = echarts.init(document.getElementById('chart-container'));
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: 'DTP 处方登记概览',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ var submitted = retData[params[0].dataIndex].completedCount;
|
|
|
+ var unsubmitted = retData[params[0].dataIndex].pendingCount;
|
|
|
+ return '<p>' + params[0].name + '</p><p>已提交:' + submitted + ' 单 | 未提交:' + unsubmitted + ' 单</p>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['已提交', '未提交']
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: names,
|
|
|
+
|
|
|
+ name: '店铺名称', // X 轴的显示说明
|
|
|
+ nameLocation: 'end', // 名称的位置,可选值有 'start', 'middle', 'end'
|
|
|
+ nameGap: 30, // 名称与轴线之间的距离
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: 'black'
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (value, index) {
|
|
|
+ // 获取对应的数据点
|
|
|
+ var data = option.series[0].data[index];
|
|
|
+ // 判断 y 轴数值是否超过 250
|
|
|
+ if (data > 100) {
|
|
|
+ return `{red|${value}}`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ red: {
|
|
|
+ color: 'red'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '订单量', // Y 轴的显示说明
|
|
|
+ nameLocation: 'end', // 名称的位置,可选值有 'start', 'middle', 'end'
|
|
|
+ nameGap: 30, // 名称与轴线之间的距离
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: 'black'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data:Xnames,
|
|
|
+ type: 'bar',
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'rgba(180, 180, 180, 0.2)'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: function(params) {
|
|
|
+ // 根据 y 轴数值设置颜色
|
|
|
+ if (params.value > 100) {
|
|
|
+ return 'red';
|
|
|
+ } else {
|
|
|
+ return 'blue'; // 默认颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 使用刚指定的配置项和数据显示图表。
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ $(function() {
|
|
|
+ var panehHidden = false;
|
|
|
+ if ($(this).width() < 1590) {
|
|
|
+ panehHidden = true;
|
|
|
+ }
|
|
|
+ $('body').layout({ initClosed: panehHidden, west__size: 185, resizeWithWindow: false });
|
|
|
+ // 回到顶部绑定
|
|
|
+ if ($.fn.toTop !== undefined) {
|
|
|
+ var opt = {
|
|
|
+ win:$('.ui-layout-center'),
|
|
|
+ doc:$('.ui-layout-center')
|
|
|
+ };
|
|
|
+ $('#scroll-up').toTop(opt);
|
|
|
+ }
|
|
|
+ queryUserList();
|
|
|
+ });
|
|
|
+
|
|
|
+ function queryUserList() {
|
|
|
+ var options = {
|
|
|
+ url: prefix + "/list",
|
|
|
+ viewUrl: prefix + "/view/{id}",
|
|
|
+ exportUrl: prefix + "/export",
|
|
|
+ importUrl: prefix + "/importData",
|
|
|
+ importTemplateUrl: prefix + "/importTemplate",
|
|
|
+ sortName: "createTime",
|
|
|
+ sortOrder: "desc",
|
|
|
+ modalName: "DTP处方登记概览",
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ field: "id",
|
|
|
+ title: "id",
|
|
|
+ //hidden:false
|
|
|
+ visible: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "chain",
|
|
|
+ title: "连锁店",
|
|
|
+ align: "center",
|
|
|
+ sortable: true,
|
|
|
+ formatter: function(value, row, index) {
|
|
|
+ if (row.id) {
|
|
|
+ // 假设 row.id 是你要传递的 ID 参数
|
|
|
+ return '<a href="javascript:void(0)" onclick="detail(\'' + row.id + '\')">' + value + '</a>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "orderCount",
|
|
|
+ title: "订单量",
|
|
|
+ align: "center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "pendingCount",
|
|
|
+ title: "待完成订单数量",
|
|
|
+ align: "center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "completedCount",
|
|
|
+ title: "已完成订单数量",
|
|
|
+ align: "center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "completionRate",
|
|
|
+ title: "订单完成率(%)",
|
|
|
+ align: "center"
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ $.table.init(options);
|
|
|
+ }
|
|
|
+
|
|
|
+ /*门店列表-详细*/
|
|
|
+ function detail(id) {
|
|
|
+ debugger
|
|
|
+ $.ajax({
|
|
|
+ type : "GET",
|
|
|
+ async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
|
|
|
+ url : prefix + "/viewDetail/"+id, //请求发送到TestServlet处
|
|
|
+ data : {},
|
|
|
+ dataType : "json", //返回数据形式为json
|
|
|
+ success : function(result) {
|
|
|
+ debugger
|
|
|
+
|
|
|
+ //请求成功时执行该函数内容,result即为服务器返回的json对象
|
|
|
+ names=[];
|
|
|
+ Xnames=[];
|
|
|
+ unsubmitted=[];
|
|
|
+ submitted=[];
|
|
|
+ retData=[];
|
|
|
+ myChart = echarts.init(document.getElementById('chart-container'))
|
|
|
+ if (result.data.length>0) {
|
|
|
+ retData=result.data;
|
|
|
+ for(var i=0;i<retData.length;i++){
|
|
|
+ names.push(retData[i].chain); //挨个取出类别并填入类别数组
|
|
|
+ Xnames.push(retData[i].orderCount);
|
|
|
+ unsubmitted.push(retData[i].pendingCount);
|
|
|
+ submitted.push(retData[i].completedCount);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var updatedOption = {
|
|
|
+ xAxis: {
|
|
|
+ data: names
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: Xnames
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 使用新的数据更新图表
|
|
|
+ myChart.setOption(updatedOption);
|
|
|
+ $("#id").val(id);
|
|
|
+ queryUserList();
|
|
|
+ },
|
|
|
+ error : function(errorMsg) {
|
|
|
+ //请求失败时执行该函数
|
|
|
+ alert("图表请求数据失败!");
|
|
|
+ myChart.hideLoading();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 自定义重置-表单重置/隐藏框/树节点选择色/搜索 */
|
|
|
+ function resetPre() {
|
|
|
+ resetDate();
|
|
|
+ $("#report-form")[0].reset();
|
|
|
+ $("#deptId").val("");
|
|
|
+ $("#parentId").val("");
|
|
|
+ $(".curSelectedNode").removeClass("curSelectedNode");
|
|
|
+ $.table.search();
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ type : "POST",
|
|
|
+ async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
|
|
|
+ url : prefix + "/listReport", //请求发送到TestServlet处
|
|
|
+ data : {},
|
|
|
+ dataType : "json", //返回数据形式为json
|
|
|
+ success : function(result) {
|
|
|
+ debugger
|
|
|
+ //请求成功时执行该函数内容,result即为服务器返回的json对象
|
|
|
+
|
|
|
+ if (result.data.length>0) {
|
|
|
+ retData=result.data;
|
|
|
+ for(var i=0;i<retData.length;i++){
|
|
|
+ names.push(retData[i].chain); //挨个取出类别并填入类别数组
|
|
|
+ Xnames.push(retData[i].orderCount);
|
|
|
+ unsubmitted.push(retData[i].pendingCount);
|
|
|
+ submitted.push(retData[i].completedCount);
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ error : function(errorMsg) {
|
|
|
+ //请求失败时执行该函数
|
|
|
+ alert("图表请求数据失败!");
|
|
|
+ myChart.hideLoading();
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .ant-btn-primary {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #1890ff;
|
|
|
+ border-color: #1890ff;
|
|
|
+ text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
|
|
+ box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-radio-button-wrapper {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ height: 32px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0 15px;
|
|
|
+ color: rgba(0,0,0,.65);
|
|
|
+ line-height: 30px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-top-width: 1.02px;
|
|
|
+ border-left: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color .3s,background .3s,border-color .3s;
|
|
|
+ }
|
|
|
+ .ant-radio-button-wrapper2 {
|
|
|
+ text-align: right;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ height: 32px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0 15px;
|
|
|
+ color: rgba(0,0,0,.65);
|
|
|
+ line-height: 30px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-top-width: 1.02px;
|
|
|
+ border-left: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color .3s,background .3s,border-color .3s;
|
|
|
+ }
|
|
|
+ .ant-card-head {
|
|
|
+ min-height: 48px;
|
|
|
+ margin-bottom: -1px;
|
|
|
+ padding: 0 24px;
|
|
|
+ color: rgba(0,0,0,.85);
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ background: transparent;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ border-radius: 2px 2px 0 0;
|
|
|
+ zoom: 1;
|
|
|
+ }
|
|
|
+ .ant-card-head-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .ant-card-head-title {
|
|
|
+ display: inline-block;
|
|
|
+ flex: 1;
|
|
|
+ padding: 16px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .index_title-2CoZR {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-left: 14px;
|
|
|
+ border-left: 4px solid #e8514b;
|
|
|
+ }
|
|
|
+ .ChartAndTable_chart-and-table-3ib6R{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .ant-radio-group {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ color: rgba(0,0,0,.65);
|
|
|
+ font-size: 14px;
|
|
|
+ font-variant: tabular-nums;
|
|
|
+ line-height: 1.5;
|
|
|
+ list-style: none;
|
|
|
+ font-feature-settings: "tnum";
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .ant-radio-button-wrapper>.ant-radio-button {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|