|
@@ -1,452 +0,0 @@
|
|
|
-<!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>
|