<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>接口监控</title>
		
		<script type="text/javascript">
			var initlized = false;
			
			var pageVue = null;
			function loadJsCss(callback) {
				var jscss_urls = 
				[
					{
						id: "css1",
						type: "css",
						url: "//at.alicdn.com/t/font_2374495_13ltsxm2eor.css"
					}, 
					{
						id: "js9",
						type: "js",
						url: "//cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"
					},
				];
				window.top.initJsCss(document, jscss_urls, callback);
			}
			
			function initVue() {
				new BasicsVue({
					el: "#vbody",
					
					data: {
						title:"接口监控",
					},
					
					created() {
						
					},
					
					mounted() {
						this.initData();
						this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
							hideLoading();
						});
					},
					
					methods:{
						initData() {
							var myChart = echarts.init(document.getElementById("echarts"));
							var myChart2 = echarts.init(document.getElementById("echarts2"));
							
							//接口调用次数,d2
							var option = {
							  title: {
								text: '接口调用统计',
								subtext: '次数'
							  },
							  tooltip: {
								trigger: 'axis'
							  },
							  legend: {
								data: ['Rainfall', 'Evaporation']
							  },
							  toolbox: {
								show: true,
								feature: {
								  //dataView: { show: true, readOnly: false },
								  magicType: { show: true, type: ['line', 'bar'] },
								  restore: { show: true },
								  //saveAsImage: { show: true }
								}
							  },
							  calculable: true,
							  xAxis: [
								{
								  type: 'category',
								  // prettier-ignore
								  data: ['产品分类', 'SKU', '医院', '辖区', '架构', '订单', '发货', '预留单']
								}
							  ],
							  yAxis: [
								{
								  type: 'value'
								}
							  ],
							  series: [
								{
								  name: '',
								  type: 'bar',
								  data: [
									70, 53, 251, 76, 135, 162, 32, 20
								  ],
								  markPoint: {
									data: [
									  { type: 'max', name: 'Max' },
									  { type: 'min', name: 'Min' }
									]
								  },
								  markLine: {
									data: [{ type: 'average', name: 'Avg' }]
								  }
								},
								{
								  name: '',
								  type: 'bar',
								  data: [
									170, 243, 200, 96, 155, 172, 62, 80
								  ],
								  markPoint: {
									data: [
									  { name: 'Max', value: 135, xAxis: 7, yAxis: 183 },
									  { name: 'Min', value: 7, xAxis: 11, yAxis: 3 }
									]
								  },
								  markLine: {
									data: [{ type: 'average', name: 'Avg' }]
								  }
								}
							  ]
							};
							
							myChart.setOption(option);
							
							//折线图
							var option2 = {
							  title: {
								text: ''
							  },
							  tooltip: {
								trigger: 'axis'
							  },
							  legend: {
								data: ['产品分类', 'SKU', '医院', '辖区', '架构', '订单', '发货', '预留单']
							  },
							  grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							  },
							  toolbox: {
								feature: {
								  //saveAsImage: {}
								}
							  },
							  xAxis: {
								type: 'category',
								boundaryGap: false,
								data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
							  },
							  yAxis: {
								type: 'value'
							  },
							  series: [
								{
								  name: '产品分类',
								  type: 'line',
								  stack: 'Total',
								  data: [120, 132, 101, 134, 90, 230, 210]
								},
								{
								  name: 'SKU',
								  type: 'line',
								  stack: 'Total',
								  data: [220, 182, 191, 234, 290, 330, 310]
								},
								{
								  name: '医院',
								  type: 'line',
								  stack: 'Total',
								  data: [150, 232, 201, 154, 190, 330, 410]
								},
								{
								  name: '辖区',
								  type: 'line',
								  stack: 'Total',
								  data: [320, 332, 301, 334, 390, 330, 320]
								},
								{
								  name: 'æž¶æž„',
								  type: 'line',
								  stack: 'Total',
								  data: [820, 932, 901, 934, 1290, 1330, 1320]
								},
								{
								  name: '订单',
								  type: 'line',
								  stack: 'Total',
								  data: [180, 262, 261, 144, 290, 430, 510]
								},
								{
								  name: '发货',
								  type: 'line',
								  stack: 'Total',
								  data: [220, 332, 501, 634, 490, 230, 520]
								},
								{
								  name: '预留单',
								  type: 'line',
								  stack: 'Total',
								  data: [620, 832, 601, 934, 1290, 1130, 1220]
								}
							  ]
							};
							
							myChart2.setOption(option2);
						},
					}
				});
			}
		
			loadJsCss(function() {
				initVue();
			});
		</script>
		
		<style>
			[v-cloak] {
				display: none !important;
			}
			
			.d3 {
				display: inline-block;
				height: 422px;
				text-align: center;
				width: 41.5%;
				border: solid 1px;
				margin: 2px;
				margin-left: 3px;
			}
			  
			.d1 {
				width: 99.5%;
				height: 150px;
				line-height: 90px;
				border: solid 1px;
				margin: 0px 2px;
				float: left;
			}
			  
			.d2 {
				display: inline-block;
				height: 208px;
				width: 750px;
				text-align: center;
				border: solid 1px;
				margin: 2px;
				margin-top: 0;
			}
			
			.d4 {
				display: inline-block;
				height: 208px;
				width: 750px;
				text-align: center;
				border: solid 1px;
				margin: 3px;
				margin-bottom: 0;
			}
			  
			.d8 {
				text-align: center;
				height: 30px;
			}
			  
			.d9 {
				display: inline-block;
				height: 200px;
				margin-left: 80px;
			}
		</style>
	</head>
	
	<body style="margin: 0px;">
		<div v-cloak id="vbody">
			<div id="page_root">
				<div class="topbar">
					<span>{{title}}</span>
				</div>
				
				<div class="d1">
					<div class="d9">
						<div class="d8">产品分类</div>
						<div class="d8"><i class="iconfont icon-productclassification" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">25/10240</div>
					</div>
					<div class="d9">
						<div class="d8">SKU</div>
						<div class="d8"><i class="iconfont icon-product" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">12/10240</div>
					</div>
					<div class="d9">
						<div class="d8">医院</div>
						<div class="d8"><i class="iconfont icon-customermanagement" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">36/7143</div>
					</div>
					<div class="d9">
						<div class="d8">辖区</div>
						<div class="d8"><i class="el-icon-c-scale-to-original" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">26/8938</div>
					</div>
					<div class="d9">
						<div class="d8">æž¶æž„</div>
						<div class="d8"><i class="iconfont icon-salesstructure" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">21/7856</div>
					</div>
					<div class="d9">
						<div class="d8">订单</div>
						<div class="d8"><i class="iconfont icon-auditmanagement" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">27/8592</div>
					</div>
					<div class="d9">
						<div class="d8">发货</div>
						<div class="d8"><i class="el-icon-c-scale-to-original" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">24/4589</div>
					</div>
					<div class="d9">
						<div class="d8">预留单</div>
						<div class="d8"><i class="el-icon-c-scale-to-original" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div>
						<div class="d8">32/8692</div>
					</div>
				</div>
				
				<div style="display: inline-block; width: 750px;">
					<div class="d4"></div>
					<div id="echarts" class="d2" style="width: 750px; height: 208px;"></div>
				</div>
				
				<div class="d3">
					<div style="width: 544px; height: 200px;">
						<div style="width: 544px; height: 100px;">
					</div>
					<div id="echarts2" class="" style="width: 544px; height: 222px;"></div>
				</div>
			</div>
		</div>			
		
		<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
			<div class="spinner">
				<div class="cube1"></div>
				<div class="cube2"></div>
			</div>
		</div>
	</body>
</html>