加入echart

mes/src/main/java/com/wangziyang/mes/company/client/CompanyController.java

@@ -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";
-    }
-}

mes/src/main/java/com/wangziyang/mes/digitization/controller/PlanDataController.java

@@ -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";
+    }
+
+
+}

mes/src/main/resources/static/lib/echarts/macarons.js

@@ -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);
+}));

mes/src/main/resources/templates/admin/welcome.ftl

@@ -13,7 +13,7 @@
 </head>
 <style>
     .splayUi-container {
-        background-image: url(../image/hk.png);
+        background-image: url(/image/hk.png);
         background-size: cover;
         height: 670px;
     }

mes/src/main/resources/templates/digitization/plandg.ftl

@@ -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>