加入echart
parent
76829b559c
commit
348f47d86d
|
@ -1,68 +0,0 @@
|
||||||
package com.wangziyang.mes.company.client;
|
|
||||||
|
|
||||||
import io.swagger.annotations.Api;
|
|
||||||
import io.swagger.annotations.ApiImplicitParam;
|
|
||||||
import io.swagger.annotations.ApiImplicitParams;
|
|
||||||
import io.swagger.annotations.ApiOperation;
|
|
||||||
import org.slf4j.Logger;
|
|
||||||
import org.slf4j.LoggerFactory;
|
|
||||||
import org.springframework.stereotype.Controller;
|
|
||||||
import org.springframework.ui.Model;
|
|
||||||
import org.springframework.web.bind.annotation.GetMapping;
|
|
||||||
import org.springframework.web.bind.annotation.RequestMapping;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 公司
|
|
||||||
*
|
|
||||||
* @author SongPeng
|
|
||||||
* @date 2019/9/27 16:05
|
|
||||||
*/
|
|
||||||
@Api(tags = "公司")
|
|
||||||
@RequestMapping("/client/company")
|
|
||||||
@Controller("clientCompanyController")
|
|
||||||
public class CompanyController {
|
|
||||||
|
|
||||||
Logger log = LoggerFactory.getLogger(CompanyController.class);
|
|
||||||
|
|
||||||
@ApiOperation("公司首页")
|
|
||||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
|
||||||
@GetMapping({"", "/index-ui"})
|
|
||||||
public String indexUI(Model model) {
|
|
||||||
return "client/company/index";
|
|
||||||
}
|
|
||||||
|
|
||||||
@ApiOperation("公司关于页")
|
|
||||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
|
||||||
@GetMapping("/about-ui")
|
|
||||||
public String aboutUI(Model model) {
|
|
||||||
return "client/company/about";
|
|
||||||
}
|
|
||||||
|
|
||||||
@ApiOperation("公司案例页")
|
|
||||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
|
||||||
@GetMapping("/case-ui")
|
|
||||||
public String caseUI(Model model) {
|
|
||||||
return "client/company/case";
|
|
||||||
}
|
|
||||||
|
|
||||||
@ApiOperation("公司新闻动态页")
|
|
||||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
|
||||||
@GetMapping("/news-ui")
|
|
||||||
public String newsUI(Model model) {
|
|
||||||
return "client/company/news";
|
|
||||||
}
|
|
||||||
|
|
||||||
@ApiOperation("公司新闻动态详情页")
|
|
||||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
|
||||||
@GetMapping("/news/detail-ui")
|
|
||||||
public String newsDetailUI(Model model) {
|
|
||||||
return "client/company/newsDetail";
|
|
||||||
}
|
|
||||||
|
|
||||||
@ApiOperation("公司产品页")
|
|
||||||
@ApiImplicitParams({@ApiImplicitParam(name ="model", value = "模型", defaultValue = "模型")})
|
|
||||||
@GetMapping("/product-ui")
|
|
||||||
public String productUI(Model model) {
|
|
||||||
return "client/company/product";
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -0,0 +1,37 @@
|
||||||
|
package com.wangziyang.mes.digitization.controller;
|
||||||
|
|
||||||
|
import com.wangziyang.mes.common.BaseController;
|
||||||
|
import io.swagger.annotations.ApiOperation;
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.ui.Model;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 系统登录
|
||||||
|
*
|
||||||
|
* @author SongPeng
|
||||||
|
* @date 2019/9/27 16:05
|
||||||
|
*/
|
||||||
|
@RequestMapping("/digitization/plan")
|
||||||
|
@Controller("PlanDataController")
|
||||||
|
public class PlanDataController extends BaseController {
|
||||||
|
|
||||||
|
Logger logger = LoggerFactory.getLogger(PlanDataController.class);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 工单计划数字化看板
|
||||||
|
*
|
||||||
|
* @param model 视图对象
|
||||||
|
* @return 工单计划数字化看板界面
|
||||||
|
*/
|
||||||
|
@ApiOperation("工单计划数字化看板")
|
||||||
|
@GetMapping("/plan-ui")
|
||||||
|
public String welcomeUI(Model model) {
|
||||||
|
return "digitization/plandg";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 6.3 MiB |
|
@ -0,0 +1,198 @@
|
||||||
|
(function (root, factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['exports', 'echarts'], factory);
|
||||||
|
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||||
|
// CommonJS
|
||||||
|
factory(exports, require('echarts'));
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory({}, root.echarts);
|
||||||
|
}
|
||||||
|
}(this, function (exports, echarts) {
|
||||||
|
var log = function (msg) {
|
||||||
|
if (typeof console !== 'undefined') {
|
||||||
|
console && console.error && console.error(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!echarts) {
|
||||||
|
log('ECharts is not Loaded');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var colorPalette = [
|
||||||
|
'#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
|
||||||
|
'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
|
||||||
|
'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
|
||||||
|
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
var theme = {
|
||||||
|
color: colorPalette,
|
||||||
|
|
||||||
|
title: {
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#008acd'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
visualMap: {
|
||||||
|
itemWidth: 15,
|
||||||
|
color: ['#5ab1ef','#e0ffff']
|
||||||
|
},
|
||||||
|
|
||||||
|
toolbox: {
|
||||||
|
iconStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: colorPalette[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
backgroundColor: 'rgba(50,50,50,0.5)',
|
||||||
|
axisPointer : {
|
||||||
|
type : 'line',
|
||||||
|
lineStyle : {
|
||||||
|
color: '#008acd'
|
||||||
|
},
|
||||||
|
crossStyle: {
|
||||||
|
color: '#008acd'
|
||||||
|
},
|
||||||
|
shadowStyle : {
|
||||||
|
color: 'rgba(200,200,200,0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
dataZoom: {
|
||||||
|
dataBackgroundColor: '#efefff',
|
||||||
|
fillerColor: 'rgba(182,162,222,0.2)',
|
||||||
|
handleColor: '#008acd'
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: {
|
||||||
|
borderColor: '#eee'
|
||||||
|
},
|
||||||
|
|
||||||
|
categoryAxis: {
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#008acd'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#eee']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
valueAxis: {
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#008acd'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitArea : {
|
||||||
|
show : true,
|
||||||
|
areaStyle : {
|
||||||
|
color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#eee']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
timeline : {
|
||||||
|
lineStyle : {
|
||||||
|
color : '#008acd'
|
||||||
|
},
|
||||||
|
controlStyle : {
|
||||||
|
normal : { color : '#008acd'},
|
||||||
|
emphasis : { color : '#008acd'}
|
||||||
|
},
|
||||||
|
symbol : 'emptyCircle',
|
||||||
|
symbolSize : 3
|
||||||
|
},
|
||||||
|
|
||||||
|
line: {
|
||||||
|
smooth : true,
|
||||||
|
symbol: 'emptyCircle',
|
||||||
|
symbolSize: 3
|
||||||
|
},
|
||||||
|
|
||||||
|
candlestick: {
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#d87a80',
|
||||||
|
color0: '#2ec7c9',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#d87a80',
|
||||||
|
color0: '#2ec7c9'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
scatter: {
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 4
|
||||||
|
},
|
||||||
|
|
||||||
|
map: {
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#d87a80'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#eee',
|
||||||
|
areaColor: '#ddd'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#fe994e'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
graph: {
|
||||||
|
color: colorPalette
|
||||||
|
},
|
||||||
|
|
||||||
|
gauge : {
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
|
||||||
|
width: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
splitNumber: 10,
|
||||||
|
length :15,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length :22,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pointer : {
|
||||||
|
width : 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
echarts.registerTheme('macarons', theme);
|
||||||
|
}));
|
|
@ -13,7 +13,7 @@
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
.splayUi-container {
|
.splayUi-container {
|
||||||
background-image: url(../image/hk.png);
|
background-image: url(/image/hk.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 670px;
|
height: 670px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,122 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html style="background-color: #04080b;">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>404</title>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="format-detection" content="telephone=no">
|
||||||
|
<#include "${request.contextPath}/common/common.ftl">
|
||||||
|
<!-- 引入 ECharts 文件 -->
|
||||||
|
<script src="${request.contextPath}/lib/echarts/echarts.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
.splayUi-container {
|
||||||
|
background-image: url(/image/plan.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
height: 694px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div style="width:100%;">
|
||||||
|
|
||||||
|
<div class="splayUi-container">
|
||||||
|
<div class="layui-row">
|
||||||
|
<div class="layui-col-xs6">
|
||||||
|
<div id="planColumnar" style="width: 600px;height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6">
|
||||||
|
<div id="planBin" style="width: 600px;height:400px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// 基于准备好的dom,初始化echarts实例
|
||||||
|
planColumnarChart = echarts.init(document.getElementById('planColumnar'));
|
||||||
|
planBinChart = echarts.init(document.getElementById('planBin'));
|
||||||
|
// 指定图表的配置项和数据
|
||||||
|
planColumnarOption = {
|
||||||
|
title: {
|
||||||
|
text: '计划产量',
|
||||||
|
textStyle:{
|
||||||
|
color:"#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
legend: {
|
||||||
|
data: ['销量']
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ["待生产订单总数", "已完成总数"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [100, 200]
|
||||||
|
}],
|
||||||
|
textStyle : {
|
||||||
|
color:"#fff"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//饼图
|
||||||
|
planBinoption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 10,
|
||||||
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||||
|
},
|
||||||
|
textStyle : {
|
||||||
|
color:"#fff"
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['50%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: '30',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{value: 335, name: '直接访问'},
|
||||||
|
{value: 310, name: '邮件营销'},
|
||||||
|
{value: 234, name: '联盟广告'},
|
||||||
|
{value: 135, name: '视频广告'},
|
||||||
|
{value: 1548, name: '搜索引擎'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
planColumnarChart.setOption(planColumnarOption);
|
||||||
|
planBinChart.setOption(planBinoption);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue