|
@@ -2,76 +2,286 @@ const $ = require('jquery');
|
|
require("../css/reset.less")
|
|
require("../css/reset.less")
|
|
require("../css/console.less")
|
|
require("../css/console.less")
|
|
require("../images/logo.png")
|
|
require("../images/logo.png")
|
|
|
|
+
|
|
// import 'zrender/lib/svg/svg';
|
|
// import 'zrender/lib/svg/svg';
|
|
const echarts = require('echarts');
|
|
const echarts = require('echarts');
|
|
-console.log(echarts)
|
|
|
|
-$(function(){
|
|
|
|
- // var myChart = echarts.init(document.getElementById('echarts'));
|
|
|
|
- var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
- // 绘制图表
|
|
|
|
- let app = {}
|
|
|
|
- let option = {
|
|
|
|
- title: {
|
|
|
|
- text: '饼图程序调用高亮示例',
|
|
|
|
- left: 'center'
|
|
|
|
- },
|
|
|
|
- tooltip: {
|
|
|
|
- trigger: 'item',
|
|
|
|
- formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
|
- },
|
|
|
|
- legend: {
|
|
|
|
- orient: 'vertical',
|
|
|
|
- left: 'left',
|
|
|
|
- data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
|
|
- },
|
|
|
|
- series: [
|
|
|
|
- {
|
|
|
|
- name: '访问来源',
|
|
|
|
- type: 'pie',
|
|
|
|
- radius: '55%',
|
|
|
|
- center: ['50%', '60%'],
|
|
|
|
- data: [
|
|
|
|
- {value: 335, name: '直接访问'},
|
|
|
|
- {value: 310, name: '邮件营销'},
|
|
|
|
- {value: 234, name: '联盟广告'},
|
|
|
|
- {value: 135, name: '视频广告'},
|
|
|
|
- {value: 1548, name: '搜索引擎'}
|
|
|
|
- ],
|
|
|
|
- emphasis: {
|
|
|
|
- itemStyle: {
|
|
|
|
- shadowBlur: 10,
|
|
|
|
- shadowOffsetX: 0,
|
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- app.currentIndex = -1;
|
|
|
|
|
|
+const {post,setCookie,delCookie} = require('../js/utils.js');
|
|
|
|
|
|
- setInterval(function () {
|
|
|
|
- var dataLen = option.series[0].data.length;
|
|
|
|
- // 取消之前高亮的图形
|
|
|
|
- myChart.dispatchAction({
|
|
|
|
- type: 'downplay',
|
|
|
|
- seriesIndex: 0,
|
|
|
|
- dataIndex: app.currentIndex
|
|
|
|
- });
|
|
|
|
- app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|
|
|
- // 高亮当前图形
|
|
|
|
- myChart.dispatchAction({
|
|
|
|
- type: 'highlight',
|
|
|
|
- seriesIndex: 0,
|
|
|
|
- dataIndex: app.currentIndex
|
|
|
|
- });
|
|
|
|
- // 显示 tooltip
|
|
|
|
- myChart.dispatchAction({
|
|
|
|
- type: 'showTip',
|
|
|
|
- seriesIndex: 0,
|
|
|
|
- dataIndex: app.currentIndex
|
|
|
|
- });
|
|
|
|
- }, 1000);
|
|
|
|
- myChart.setOption(option);
|
|
|
|
|
|
+$(function(){
|
|
|
|
+ var mySwiper = new Swiper('.swiper-container',{
|
|
|
|
+ // autoplay : 500,//可选选项,自动滑动
|
|
|
|
+ loop : true,//可选选项,开启循环
|
|
|
|
+ slidesPerView : 3,
|
|
|
|
+ })
|
|
|
|
+ initConsole()
|
|
|
|
+ barChart()
|
|
|
|
+ barChartPay()
|
|
|
|
+ emptyCircle()
|
|
})
|
|
})
|
|
-
|
|
|
|
|
|
+//控制台数
|
|
|
|
+function initConsole(){
|
|
|
|
+ let url = {
|
|
|
|
+ '本月病历数':require("../images/icon6.png"),
|
|
|
|
+ '本月不合格病历-机器':require("../images/icon7.png"),
|
|
|
|
+ '本月质控数-机器':require("../images/icon10.png"),
|
|
|
|
+ '本月甲级病历-机器':require("../images/icon8.png"),
|
|
|
|
+ '本月乙级病历-机器':require("../images/icon9.png")
|
|
|
|
+ }
|
|
|
|
+ post('/console/mrStatistics',{
|
|
|
|
+ // "endDate": "string",
|
|
|
|
+ // "hospitalId": "string",
|
|
|
|
+ // "limitCount": 0,
|
|
|
|
+ // "startDate": "string",
|
|
|
|
+ "type": 1//1月2年
|
|
|
|
+ }).then((res)=>{
|
|
|
|
+ let data = res.data;
|
|
|
|
+ if(data.code == 0){
|
|
|
|
+ let result = data.data
|
|
|
|
+ for(let i in result){
|
|
|
|
+ let dom = ''
|
|
|
|
+ if(i.indexOf("人工")==-1){
|
|
|
|
+ dom = `
|
|
|
|
+ <li class="partLi">
|
|
|
|
+ <div class="partIn">
|
|
|
|
+ <p class="top">${i.split("-")[0]}</p>
|
|
|
|
+ <p class="btm clearfix">
|
|
|
|
+ <img src="${url[i]}" alt="">
|
|
|
|
+ <span>${result[i]}</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+ `
|
|
|
|
+ }
|
|
|
|
+ $(".partAll").append(dom)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+//柱状图
|
|
|
|
+function barChart(){
|
|
|
|
+ var myChart = echarts.init(document.getElementById('barChart'));
|
|
|
|
+ option = {
|
|
|
|
+ color: ['#3398DB'],
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
|
|
|
+ type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '3%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '3%',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
|
+ axisTick: {
|
|
|
|
+ alignWithLabel: true
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {//x轴刻度
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: 'blue'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisLine: {//x轴
|
|
|
|
+ lineStyle:{
|
|
|
|
+ color:'red'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ yAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ axisLine: {//y轴
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {//y轴刻度
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: 'red'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ splitLine:{//分割线
|
|
|
|
+ lineStyle:{
|
|
|
|
+ color:'red'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+ title:[{
|
|
|
|
+ text: '医院运行指标',
|
|
|
|
+ top: 20,
|
|
|
|
+ left: 20,
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 14,
|
|
|
|
+ color:'#666666',
|
|
|
|
+ fontWeight: 400
|
|
|
|
+ }
|
|
|
|
+ }],
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '直接访问',
|
|
|
|
+ type: 'bar',
|
|
|
|
+ barWidth: '30%',
|
|
|
|
+ data: [10, 52, 200, 334, 390, 330, 220]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+ myChart.setOption(option);
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+//柱状图
|
|
|
|
+function barChartPay(){
|
|
|
|
+ var myChart = echarts.init(document.getElementById('barChartPay'));
|
|
|
|
+ option = {
|
|
|
|
+ color: ['#3398DB'],
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
|
|
|
+ type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '3%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '3%',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
|
+ axisTick: {
|
|
|
|
+ alignWithLabel: true
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {//x轴刻度
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: 'blue'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisLine: {//x轴
|
|
|
|
+ lineStyle:{
|
|
|
|
+ color:'red'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ yAxis: [
|
|
|
|
+ {
|
|
|
|
+ type: 'value',
|
|
|
|
+ axisLine: {//y轴
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {//y轴刻度
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: 'red'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ splitLine:{//分割线
|
|
|
|
+ lineStyle:{
|
|
|
|
+ color:'red'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+ title:[{
|
|
|
|
+ text: '医院运行指标',
|
|
|
|
+ top: 20,
|
|
|
|
+ left: 20,
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 14,
|
|
|
|
+ color:'#666666',
|
|
|
|
+ fontWeight: 400
|
|
|
|
+ }
|
|
|
|
+ }],
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '直接访问',
|
|
|
|
+ type: 'bar',
|
|
|
|
+ barWidth: '30%',
|
|
|
|
+ data: [10, 52, 200, 334, 390, 330, 220]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+ myChart.setOption(option);
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+//空心饼图
|
|
|
|
+function emptyCircle(){
|
|
|
|
+ var myChart = echarts.init(document.getElementById('emptyCircle'));
|
|
|
|
+ option = {
|
|
|
|
+ color:['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'],
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'item',
|
|
|
|
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
|
+ },
|
|
|
|
+ // legend: {
|
|
|
|
+ // orient: 'vertical',
|
|
|
|
+ // left: 10,
|
|
|
|
+ // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
|
|
+ // },
|
|
|
|
+ title: [{
|
|
|
|
+ text: '总病\n例数',
|
|
|
|
+ subtext:"1000",
|
|
|
|
+ top: 'center',
|
|
|
|
+ left: 'center',
|
|
|
|
+ textStyle: {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ subtextStyle:{
|
|
|
|
+ color:'red',
|
|
|
|
+ fontSize:'14px'
|
|
|
|
+ }
|
|
|
|
+ }],
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '访问来源',
|
|
|
|
+ type: 'pie',
|
|
|
|
+ radius: ['50%', '70%'],
|
|
|
|
+ avoidLabelOverlap: false,
|
|
|
|
+ label: {
|
|
|
|
+ show: false,
|
|
|
|
+ position: 'center'
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ borderColor: '#fff',
|
|
|
|
+ borderWidth: 2
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ labelLine:{
|
|
|
|
+ show:false
|
|
|
|
+ },
|
|
|
|
+ emphasis: {//圆盘中心
|
|
|
|
+ label: {
|
|
|
|
+ show: false,
|
|
|
|
+ fontSize: '30',
|
|
|
|
+ fontWeight: 'bold'
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ labelLine: {
|
|
|
|
+ show: true
|
|
|
|
+ },
|
|
|
|
+ data: [
|
|
|
|
+ {value: 335, name: '直接访问'},
|
|
|
|
+ {value: 310, name: '邮件营销'},
|
|
|
|
+ {value: 234, name: '联盟广告'},
|
|
|
|
+ {value: 135, name: '视频广告'},
|
|
|
|
+ {value: 1548, name: '搜索引擎'}
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+ myChart.setOption(option);
|
|
|
|
+}
|