diff --git a/mes/src/main/java/com/wangziyang/mes/digitization/controller/PlanDataController.java b/mes/src/main/java/com/wangziyang/mes/digitization/controller/PlanDataController.java
index cec1d9e..5a22799 100644
--- a/mes/src/main/java/com/wangziyang/mes/digitization/controller/PlanDataController.java
+++ b/mes/src/main/java/com/wangziyang/mes/digitization/controller/PlanDataController.java
@@ -30,7 +30,7 @@ public class PlanDataController extends BaseController {
@ApiOperation("工单计划数字化看板")
@GetMapping("/plan-ui")
public String welcomeUI(Model model) {
- return "digitization/plandg";
+ return "digitization/planDemo";
}
diff --git a/mes/src/main/resources/static/css/planDemo.css b/mes/src/main/resources/static/css/planDemo.css
new file mode 100644
index 0000000..126f358
--- /dev/null
+++ b/mes/src/main/resources/static/css/planDemo.css
@@ -0,0 +1,200 @@
+@charset "utf-8";
+/* CSS Document */
+*{
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box}
+*,body{padding:0px; margin:0px;color: #222;font-family: "微软雅黑";}
+@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
+body{ background:#000d4a url(../image/digitization.jpg) center top; background-size:cover;color:#666;font-size: .1rem;}
+li{ list-style-type:none;}
+table{}
+i{ margin:0px; padding:0px; text-indent:0px;}
+img{ border:none; max-width: 100%;}
+a{ text-decoration:none; color:#399bff;}
+a.active,a:focus{ outline:none!important; text-decoration:none;}
+ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
+a:hover{ color:#06c; text-decoration: none!important}
+
+
+.clearfix:after, .clearfix:before {
+ display: table;
+ content: " "
+}
+ .clearfix:after {
+ clear: both
+}
+.pulll_left{float:left;}
+.pulll_right{float:right;}
+/*谷哥滚动条样式*/
+
+ ::-webkit-scrollbar {width:5px;height:5px;position:absolute}
+ ::-webkit-scrollbar-thumb {background-color:#5bc0de}
+ ::-webkit-scrollbar-track {background-color:#ddd}
+
+/***/
+.canvas{position: absolute; width:100%; left: 0; top: 0; height: 99%; z-index: 1;}
+
+.allnav{height: calc(100% - 30px);}
+.loading{position:fixed; left:0; top:0; font-size:18px; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
+.loadbox{position:absolute; width:160px;height:150px; color: #aaa; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
+.loadbox img{ margin:10px auto; display:block; width:40px;}
+
+.copyright{ background:rgba(19,31,64,.32); border: 1px solid rgba(255,255,255,.05); line-height:.5rem; text-align: center; padding-right: 15px; bottom: 0; color:rgba(255,255,255,.7); font-size: .16rem; }
+
+.head{ height:1.05rem; background: url(../image/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative; z-index: 100;}
+.head h1{ color:#fff; text-align: center; font-size: .4rem; line-height:.8rem;}
+.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem}
+.weather{ position:absolute; right:.3rem; top:0; line-height: .75rem;}
+.weather img{ width:.37rem; display: inline-block; vertical-align: middle;}
+.weather span{color:rgba(255,255,255,.7); font-size: .18rem; padding-right: .1rem;}
+.mainbox{ padding:.1rem .1rem 0rem .1rem;}
+.mainbox>ul{}
+.mainbox>ul>li{ float: left; padding: 0 .1rem}
+
+.mainbox>ul>li{ width: 30%}
+.mainbox>ul>li:nth-child(2){ width: 40%;padding: 0}
+
+.boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .2rem .4rem .15rem; background: rgba(255,255,255,.04) url(../image/line.png); background-size: 100% auto; position: relative; margin-bottom: .15rem; z-index: 10;}
+.boxall:before,
+.boxall:after{ position:absolute; width: .1rem; height: .1rem; content: ""; border-top: 2px solid #02a6b5; top: 0;}
+.boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
+.boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
+.alltitle{ font-size:.2rem; color:#fff; text-align: center; line-height: .5rem;}
+
+.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
+.boxfoot:before,
+.boxfoot:after{ position:absolute; width: .1rem; height: .1rem; content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}
+
+.bar{background:rgba(101,132,226,.1); padding: .15rem;}
+.barbox li,.barbox2 li{ width:50%; text-align: center; position: relative; z-index: 100;}
+.barbox:before,
+.barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
+.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
+.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }
+
+.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}
+
+.barbox{ border: 1px solid rgba(25,186,139,.17); position: relative;}
+.barbox li{ font-size: .7rem; color: #ffeb7b; padding: .05rem 0; font-family:electronicFont; font-weight: bold;}
+.barbox2 li{ font-size: .19rem; color:rgba(255,255,255,.7); padding-top: .1rem;}
+
+.map{ position:relative; height: 7.2rem; z-index: 9;}
+.map4{ width: 200%; height:7rem; position: relative; left: -50%; top: 4%; margin-top: .2rem; z-index: 5;}
+.map1,.map2,.map3{ position:absolute; opacity: .5}
+.map1{ width:6.43rem; z-index: 2;top:.45rem; left: .7rem; animation: myfirst2 15s infinite linear;}
+.map2{ width:5.66rem; top:.85rem; left:1.2rem; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
+.map3{ width:5.18rem; top:1.07rem; left: 1.4rem; z-index: 1;}
+
+
+
+
+
+.tabs { text-align: center; padding: .1rem 0 0 0;}
+.tabs a {
+ position: relative;
+ display: inline-block;
+ margin-left: 1px;
+ padding:.05rem .2rem;
+ color: #898989;
+ transition: all .3s ease-out 0s;
+ font-size: 14px;
+}
+.tabs li{ display:inline-block;}
+.tabs a:after {
+ position: absolute;
+ width: 1px;
+ height: 10px;
+ background-color: rgba(255,255,255,.1);
+ content: '';
+ margin-left:0; right:-1px; margin-top: 7px;
+
+
+}
+.tabs li a.active {border: 1px solid rgba(25,186,139,.17); background: rgba(255,255,255,.05); color:#fff;}
+
+.tit02{ text-align:center; margin: .1rem 0; position: relative}
+.tit02 span{border: 1px solid rgba(25,186,139,.17); letter-spacing: 2px; padding: .01rem .2rem; background: rgba(255,255,255,.05); font-size: .18rem; color: #49bcf7;}
+.tit02:before,.tit02:after{ position:absolute; width:26%; height: 1px;background: rgba(25,186,139,.2); content: ""; top: .12rem;}
+.tit02:after{ right:0;}
+.tit02:before{ left:0;}
+
+.wrap{ height:2.54rem; overflow: hidden;}
+.wrap li{ line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
+.wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }
+.sy{ float:left; width: 33%; height:95%; margin-top: .25rem;}
+
+
+.adduser{ height:1.5rem; overflow: hidden;}
+.adduser li{height:.5rem;}
+.adduser img{ width: .40rem; border-radius: .5rem; margin-right: .1rem; display: inline-block; vertical-align: middle;}
+.adduser span{ line-height:.5rem; font-size: .18rem;color: rgba(255,255,255,.6); }
+
+.sycm ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
+.sycm li{ float: left; width: 33.33%; text-align: center; position: relative}
+.sycm li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
+.sycm li:last-child:before{ width: 0;}
+
+.sycm li h2{ font-size:.3rem; color: #c5ccff;}
+.sycm li span{ font-size:.18rem; color: #fff; opacity: .5;}
+
+@keyframes myfirst2
+{
+from {transform: rotate(0deg);}
+to {transform: rotate(359deg);}
+}
+
+@keyframes myfirst
+{
+from {transform: rotate(0deg);}
+to {transform: rotate(-359deg);}
+}
+
+
+/*Plugin CSS*/
+.str_wrap {
+ overflow:hidden;
+ width:100%;
+ position:relative;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ user-select: none;
+ white-space:nowrap;
+}
+
+
+.str_move {
+ white-space:nowrap;
+ position:absolute;
+ top:0;
+ left:0;
+ cursor:move;
+}
+.str_move_clone {
+ display:inline-block;
+ vertical-align:top;
+ position:absolute;
+ left:100%;
+ top:0;
+}
+.str_vertical .str_move_clone {
+ left:0;
+ top:100%;
+}
+.str_down .str_move_clone {
+ left:0;
+ bottom:100%;
+}
+.str_vertical .str_move,
+.str_down .str_move {
+ white-space:normal;
+ width:100%;
+}
+.str_static .str_move,
+.no_drag .str_move,
+.noStop .str_move{
+ cursor:inherit;
+}
+.str_wrap img {
+ max-width:none !important;
+}
diff --git a/mes/src/main/resources/static/font/DS-DIGIT.TTF b/mes/src/main/resources/static/font/DS-DIGIT.TTF
new file mode 100644
index 0000000..65642f9
Binary files /dev/null and b/mes/src/main/resources/static/font/DS-DIGIT.TTF differ
diff --git a/mes/src/main/resources/static/image/bg.jpg b/mes/src/main/resources/static/image/bg.jpg
deleted file mode 100644
index d5870f5..0000000
Binary files a/mes/src/main/resources/static/image/bg.jpg and /dev/null differ
diff --git a/mes/src/main/resources/static/image/digitization.jpg b/mes/src/main/resources/static/image/digitization.jpg
new file mode 100644
index 0000000..80b13bb
Binary files /dev/null and b/mes/src/main/resources/static/image/digitization.jpg differ
diff --git a/mes/src/main/resources/static/image/head_bg.png b/mes/src/main/resources/static/image/head_bg.png
new file mode 100644
index 0000000..a2e45f6
Binary files /dev/null and b/mes/src/main/resources/static/image/head_bg.png differ
diff --git a/mes/src/main/resources/static/image/hk.png b/mes/src/main/resources/static/image/hk.png
index 5e51539..3ea2bd3 100644
Binary files a/mes/src/main/resources/static/image/hk.png and b/mes/src/main/resources/static/image/hk.png differ
diff --git a/mes/src/main/resources/static/image/line.png b/mes/src/main/resources/static/image/line.png
new file mode 100644
index 0000000..05db7f8
Binary files /dev/null and b/mes/src/main/resources/static/image/line.png differ
diff --git a/mes/src/main/resources/static/js/mes/digitization/area_echarts.js b/mes/src/main/resources/static/js/mes/digitization/area_echarts.js
new file mode 100644
index 0000000..787979b
--- /dev/null
+++ b/mes/src/main/resources/static/js/mes/digitization/area_echarts.js
@@ -0,0 +1,303 @@
+// 基于准备好的dom，初始化echarts实例
+var myChart = echarts.init(document.getElementById('map_1'));
+var geoCoordMap = {
+ '上海': [121.4648,31.2891],
+ '东莞': [113.8953,22.901],
+ '东营': [118.7073,37.5513],
+ '中山': [113.4229,22.478],
+ '临汾': [111.4783,36.1615],
+ '临沂': [118.3118,35.2936],
+ '丹东': [124.541,40.4242],
+ '丽水': [119.5642,28.1854],
+ '乌鲁木齐': [87.9236,43.5883],
+ '佛山': [112.8955,23.1097],
+ '保定': [115.0488,39.0948],
+ '兰州': [103.5901,36.3043],
+ '包头': [110.3467,41.4899],
+ '北京': [116.4551,40.2539],
+ '北海': [109.314,21.6211],
+ '南京': [118.8062,31.9208],
+ '南宁': [108.479,23.1152],
+ '南昌': [116.0046,28.6633],
+ '南通': [121.1023,32.1625],
+ '厦门': [118.1689,24.6478],
+ '台州': [121.1353,28.6688],
+ '合肥': [117.29,32.0581],
+ '呼和浩特': [111.4124,40.4901],
+ '咸阳': [108.4131,34.8706],
+ '哈尔滨': [127.9688,45.368],
+ '唐山': [118.4766,39.6826],
+ '嘉兴': [120.9155,30.6354],
+ '大同': [113.7854,39.8035],
+ '大连': [122.2229,39.4409],
+ '天津': [117.4219,39.4189],
+ '太原': [112.3352,37.9413],
+ '威海': [121.9482,37.1393],
+ '宁波': [121.5967,29.6466],
+ '宝鸡': [107.1826,34.3433],
+ '宿迁': [118.5535,33.7775],
+ '常州': [119.4543,31.5582],
+ '广州': [113.5107,23.2196],
+ '廊坊': [116.521,39.0509],
+ '延安': [109.1052,36.4252],
+ '张家口': [115.1477,40.8527],
+ '徐州': [117.5208,34.3268],
+ '德州': [116.6858,37.2107],
+ '惠州': [114.6204,23.1647],
+ '成都': [103.9526,30.7617],
+ '扬州': [119.4653,32.8162],
+ '承德': [117.5757,41.4075],
+ '拉萨': [91.1865,30.1465],
+ '无锡': [120.3442,31.5527],
+ '日照': [119.2786,35.5023],
+ '昆明': [102.9199,25.4663],
+ '杭州': [119.5313,29.8773],
+ '枣庄': [117.323,34.8926],
+ '柳州': [109.3799,24.9774],
+ '株洲': [113.5327,27.0319],
+ '武汉': [114.3896,30.6628],
+ '汕头': [117.1692,23.3405],
+ '江门': [112.6318,22.1484],
+ '沈阳': [123.1238,42.1216],
+ '沧州': [116.8286,38.2104],
+ '河源': [114.917,23.9722],
+ '泉州': [118.3228,25.1147],
+ '泰安': [117.0264,36.0516],
+ '泰州': [120.0586,32.5525],
+ '济南': [117.1582,36.8701],
+ '济宁': [116.8286,35.3375],
+ '海口': [110.3893,19.8516],
+ '淄博': [118.0371,36.6064],
+ '淮安': [118.927,33.4039],
+ '深圳': [114.5435,22.5439],
+ '清远': [112.9175,24.3292],
+ '温州': [120.498,27.8119],
+ '渭南': [109.7864,35.0299],
+ '湖州': [119.8608,30.7782],
+ '湘潭': [112.5439,27.7075],
+ '滨州': [117.8174,37.4963],
+ '潍坊': [119.0918,36.524],
+ '烟台': [120.7397,37.5128],
+ '玉溪': [101.9312,23.8898],
+ '珠海': [113.7305,22.1155],
+ '盐城': [120.2234,33.5577],
+ '盘锦': [121.9482,41.0449],
+ '石家庄': [114.4995,38.1006],
+ '福州': [119.4543,25.9222],
+ '秦皇岛': [119.2126,40.0232],
+ '绍兴': [120.564,29.7565],
+ '聊城': [115.9167,36.4032],
+ '肇庆': [112.1265,23.5822],
+ '舟山': [122.2559,30.2234],
+ '苏州': [120.6519,31.3989],
+ '莱芜': [117.6526,36.2714],
+ '菏泽': [115.6201,35.2057],
+ '营口': [122.4316,40.4297],
+ '葫芦岛': [120.1575,40.578],
+ '衡水': [115.8838,37.7161],
+ '衢州': [118.6853,28.8666],
+ '西宁': [101.4038,36.8207],
+ '西安': [109.1162,34.2004],
+ '贵阳': [106.6992,26.7682],
+ '连云港': [119.1248,34.552],
+ '邢台': [114.8071,37.2821],
+ '邯郸': [114.4775,36.535],
+ '郑州': [113.4668,34.6234],
+ '鄂尔多斯': [108.9734,39.2487],
+ '重庆': [107.7539,30.1904],
+ '金华': [120.0037,29.1028],
+ '铜川': [109.0393,35.1947],
+ '银川': [106.3586,38.1775],
+ '镇江': [119.4763,31.9702],
+ '长春': [125.8154,44.2584],
+ '长沙': [113.0823,28.2568],
+ '长治': [112.8625,36.4746],
+ '阳泉': [113.4778,38.0951],
+ '青岛': [120.4651,36.3373],
+ '韶关': [113.7964,24.7028]
+};
+
+var BJData = [
+ [{name:'北京'}, {name:'上海',value:95}],
+ [{name:'北京'}, {name:'广州',value:90}],
+ [{name:'北京'}, {name:'大连',value:80}],
+ [{name:'北京'}, {name:'南宁',value:70}],
+ [{name:'北京'}, {name:'南昌',value:60}],
+ [{name:'北京'}, {name:'拉萨',value:50}],
+ [{name:'北京'}, {name:'长春',value:40}],
+ [{name:'北京'}, {name:'包头',value:30}],
+ [{name:'北京'}, {name:'重庆',value:20}],
+ [{name:'北京'}, {name:'常州',value:10}]
+];
+
+var SHData = [
+ [{name:'上海'},{name:'包头',value:95}],
+ [{name:'上海'},{name:'昆明',value:90}],
+ [{name:'上海'},{name:'广州',value:80}],
+ [{name:'上海'},{name:'郑州',value:70}],
+ [{name:'上海'},{name:'长春',value:60}],
+ [{name:'上海'},{name:'重庆',value:50}],
+ [{name:'上海'},{name:'长沙',value:40}],
+ [{name:'上海'},{name:'北京',value:30}],
+ [{name:'上海'},{name:'丹东',value:20}],
+ [{name:'上海'},{name:'大连',value:10}]
+];
+
+var GZData = [
+ [{name:'广州'},{name:'福州',value:95}],
+ [{name:'广州'},{name:'太原',value:90}],
+ [{name:'广州'},{name:'长春',value:80}],
+ [{name:'广州'},{name:'重庆',value:70}],
+ [{name:'广州'},{name:'西安',value:60}],
+ [{name:'广州'},{name:'成都',value:50}],
+ [{name:'广州'},{name:'常州',value:40}],
+ [{name:'广州'},{name:'北京',value:30}],
+ [{name:'广州'},{name:'北海',value:20}],
+ [{name:'广州'},{name:'海口',value:10}]
+];
+
+var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
+
+var convertData = function (data) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var dataItem = data[i];
+ var fromCoord = geoCoordMap[dataItem[0].name];
+ var toCoord = geoCoordMap[dataItem[1].name];
+ if (fromCoord && toCoord) {
+ res.push([{
+ coord: fromCoord
+ }, {
+ coord: toCoord
+ }]);
+ }
+ }
+ return res;
+};
+
+var color = ['#a6c84c', '#ffa022', '#46bee9'];
+var series = [];
+[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
+ series.push({
+ name: item[0] + ' Top10',
+ type: 'lines',
+ zlevel: 1,
+ effect: {
+ show: true,
+ period: 6,
+ trailLength: 0.7,
+ color: '#fff',
+ symbolSize: 3
+ },
+ lineStyle: {
+ normal: {
+ color: color[i],
+ width: 0,
+ curveness: 0.2
+ }
+ },
+ data: convertData(item[1])
+ },
+ {
+ name: item[0] + ' Top10',
+ type: 'lines',
+ zlevel: 2,
+ effect: {
+ show: true,
+ period: 6,
+ trailLength: 0,
+ symbol: planePath,
+ symbolSize: 15
+ },
+ lineStyle: {
+ normal: {
+ color: color[i],
+ width: 1,
+ opacity: 0.4,
+ curveness: 0.2
+ }
+ },
+ data: convertData(item[1])
+ },
+ {
+ name: item[0] + ' Top10',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ zlevel: 2,
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'right',
+ formatter: '{b}'
+ }
+ },
+ symbolSize: function (val) {
+ return val[2] / 8;
+ },
+ itemStyle: {
+ normal: {
+ color: color[i]
+ }
+ },
+ data: item[1].map(function (dataItem) {
+ return {
+ name: dataItem[1].name,
+ value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+ };
+ })
+ });
+});
+
+option = {
+ backgroundColor: '#404a59',
+ title : {
+ text: '模拟迁徙',
+ subtext: '数据纯属虚构',
+ left: 'center',
+ textStyle : {
+ color: '#fff'
+ }
+ },
+ tooltip : {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ top: 'bottom',
+ left: 'right',
+ data:['北京 Top10', '上海 Top10', '广州 Top10'],
+ textStyle: {
+ color: '#fff'
+ },
+ selectedMode: 'single'
+ },
+ geo: {
+ map: 'china',
+ label: {
+ emphasis: {
+ show: false
+ }
+ },
+ roam: true,
+ itemStyle: {
+ normal: {
+ areaColor: '#323c48',
+ borderColor: '#404a59'
+ },
+ emphasis: {
+ areaColor: '#2a333d'
+ }
+ }
+ },
+ series: series
+};
+
+myChart.setOption(option);
+window.addEventListener("resize", function () {
+ myChart.resize();
+});
+
+
diff --git a/mes/src/main/resources/static/js/mes/digitization/js.js b/mes/src/main/resources/static/js/mes/digitization/js.js
new file mode 100644
index 0000000..0839236
--- /dev/null
+++ b/mes/src/main/resources/static/js/mes/digitization/js.js
@@ -0,0 +1,850 @@
+$(function () {
+ var color=['#F35331','#2499F8','#3DF098','#33B734'];
+ //订单完成情况螺旋图
+ var yearPlanData=[];
+ var yearOrderData=[];
+ var differenceData=[];
+ var visibityData=[];
+ var xAxisData=[];
+
+ for(var i=0;i<12;i++)
+ {
+ yearPlanData.push(Math.round(Math.random()*900)+100);
+ yearOrderData.push(Math.round(Math.random()*yearPlanData[i]));
+ differenceData.push(yearPlanData[i]-yearOrderData[i]);
+ visibityData.push(yearOrderData[i]);
+ xAxisData.push((i+1).toString()+"月");
+ }
+ orderStatus();
+ echarts_2();
+ echarts_4();
+ echarts_31();
+ echarts_32();
+ echarts_33();
+ echarts_5();
+ echarts_6();
+
+ function orderStatus() {
+
+ orderStatus= echarts.init(document.getElementById('orderStatus'));
+ orderStatus_option={
+ title :{show:false},
+ tooltip : {
+ trigger: 'axis',
+ formatter: function (params){
+ return params[0].name + '
'
+ + params[0].seriesName + ' : ' + params[0].value + '
'
+ + params[1].seriesName + ' : ' + params[1].value + '
'
+ +'完成率：'
+ + (params[0].value > 0 ? (params[1].value/params[0].value*100).toFixed(2)+'%' : '-')
+ + '
'
+ },
+ textStyle: {
+ color: '#FFF',
+ fontSize:24
+ }
+ },
+ toolbox: {show:false},
+ legend:{
+ top: 'top',
+ textStyle: {
+ color: '#B7E2FF',
+ fontSize:24,
+ fontFamily:'微软雅黑'
+ },
+ data:['计划生产','已接订单']
+ },
+ xAxis: {
+ data: xAxisData,
+ axisLabel: {
+ textStyle: {
+ color: '#B7E1FF',
+ fontSize:24
+ }
+ },
+ axisLine:{
+ lineStyle:{
+ color:'#09F'
+ }
+ },
+ axisTick:{
+ lineStyle:{
+ color:'#09F'
+ }
+ }
+ },
+ yAxis: {
+ inverse: false,
+ splitArea: {show: false},
+ axisLine: {show: false},
+ axisTick: {show: false},
+ axisLabel: {
+ textStyle: {
+ color: '#B7E1FF',
+ fontSize:24,
+ fontFamily:'Arial',
+ }
+ },
+ splitLine :{
+ lineStyle:{
+ color:'#09F'
+ }
+ }
+ },
+ grid: {
+ left: 100
+ },
+ series : [{
+ name:'计划生产',
+ type:'line',
+ smooth :true,
+ symbol: 'circle',
+ symbolSize: 10,
+ showAllSymbol : true,
+ color:color[1],
+ data:yearPlanData
+ },
+ {
+ name:'已接订单',
+ type:'line',
+ smooth :true,
+ symbol: 'circle',
+ symbolSize: 10,
+ showAllSymbol : true,
+ color:'#F90',
+ itemStyle:{
+ normal:{
+ lineStyle: {
+ width:2
+ }
+ }
+ },
+ data:yearOrderData
+ },
+ {
+ name:'不可见',
+ type:'bar',
+ stack: '1',
+ barWidth: 1,
+ itemStyle:{
+ normal:{
+ color:'rgba(0,0,0,0)'
+ },
+ emphasis:{
+ color:'rgba(0,0,0,0)'
+ }
+ },
+ data:visibityData
+ },
+ {
+ name:'变化',
+ type:'bar',
+ stack: '1',
+ barWidth: 1,
+ color:'#B7E1FF',
+ data:differenceData
+ }
+ ]
+ }
+ orderStatus.setOption(orderStatus_option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_2() {
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('echart2'));
+
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {type: 'shadow'}
+ },
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '4%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
+ },
+
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [
+ {
+
+ type: 'bar',
+ data: [1500, 1200, 600, 200, 300, 300, 900],
+ barWidth: '35%', //柱子宽度
+ // barGap: 1, //柱子之间间距
+ itemStyle: {
+ normal: {
+ color: '#27d08a',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
+ }
+
+ ]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_5() {
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('echart5'));
+
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
+ },
+
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [{
+ type: 'bar',
+ data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
+ barWidth: '35%', //柱子宽度
+ // barGap: 1, //柱子之间间距
+ itemStyle: {
+ normal: {
+ color: '#2f89cf',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
+ }
+ ]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_4() {
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('echart4'));
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#dddc6b'
+ }
+ }
+ },
+ legend: {
+ top: '0%',
+ data: ['安卓', 'IOS'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ grid: {
+ left: '10',
+ top: '30',
+ right: '10',
+ bottom: '10',
+ containLabel: true
+ },
+
+ xAxis: [{
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.2)'
+ }
+
+ },
+
+ data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
+
+ }, {
+
+ axisPointer: {show: false},
+ axisLine: {show: false},
+ position: 'bottom',
+ offset: 20,
+
+
+ }],
+
+ yAxis: [{
+ type: 'value',
+ axisTick: {show: false},
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ }
+ }],
+ series: [
+ {
+ name: '安卓',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+
+ normal: {
+ color: '#0184d5',
+ width: 2
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(1, 132, 213, 0.4)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(1, 132, 213, 0.1)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#0184d5',
+ borderColor: 'rgba(221, 220, 107, .1)',
+ borderWidth: 12
+ }
+ },
+ data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
+
+ },
+ {
+ name: 'IOS',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+
+ normal: {
+ color: '#00d887',
+ width: 2
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 216, 135, 0.4)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(0, 216, 135, 0.1)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#00d887',
+ borderColor: 'rgba(221, 220, 107, .1)',
+ borderWidth: 12
+ }
+ },
+ data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]
+
+ },
+
+ ]
+
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_6() {
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('echart6'));
+
+ var dataStyle = {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ //shadowBlur: 40,
+ //shadowColor: 'rgba(40, 40, 40, 1)',
+ }
+ };
+ var placeHolderStyle = {
+ normal: {
+ color: 'rgba(255,255,255,.05)',
+ label: {show: false,},
+ labelLine: {show: false}
+ },
+ emphasis: {
+ color: 'rgba(0,0,0,0)'
+ }
+ };
+ option = {
+ color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
+ tooltip: {
+ show: true,
+ formatter: "{a} : {c} "
+ },
+ legend: {
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 12,
+ bottom: '3%',
+
+ data: ['浙江', '上海', '广东', '北京', '深圳'],
+ textStyle: {
+ color: 'rgba(255,255,255,.6)',
+ }
+ },
+
+ series: [
+ {
+ name: '浙江',
+ type: 'pie',
+ clockWise: false,
+ center: ['50%', '42%'],
+ radius: ['59%', '70%'],
+ itemStyle: dataStyle,
+ hoverAnimation: false,
+ data: [{
+ value: 80,
+ name: '01'
+ }, {
+ value: 20,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '上海',
+ type: 'pie',
+ clockWise: false,
+ center: ['50%', '42%'],
+ radius: ['49%', '60%'],
+ itemStyle: dataStyle,
+ hoverAnimation: false,
+ data: [{
+ value: 70,
+ name: '02'
+ }, {
+ value: 30,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '广东',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['39%', '50%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 65,
+ name: '03'
+ }, {
+ value: 35,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '北京',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['29%', '40%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 60,
+ name: '04'
+ }, {
+ value: 40,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '深圳',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['20%', '30%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 50,
+ name: '05'
+ }, {
+ value: 50,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_31() {
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('fb1'));
+ option = {
+
+ title: [{
+ text: '年龄分布',
+ left: 'center',
+ textStyle: {
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a}
{b}: {c} ({d}%)",
+ position: function (p) { //其中p为当前鼠标的位置
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '年龄分布',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 1, name: '0岁以下'},
+ {value: 4, name: '20-29岁'},
+ {value: 2, name: '30-39岁'},
+ {value: 2, name: '40-49岁'},
+ {value: 1, name: '50岁以上'},
+ ]
+ }
+ ]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_32() {
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('fb2'));
+ option = {
+
+ title: [{
+ text: '职业分布',
+ left: 'center',
+ textStyle: {
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a}
{b}: {c} ({d}%)",
+ position: function (p) { //其中p为当前鼠标的位置
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['电子商务', '教育', 'IT/互联网', '金融', '学生', '其他'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '年龄分布',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 5, name: '电子商务'},
+ {value: 1, name: '教育'},
+ {value: 6, name: 'IT/互联网'},
+ {value: 2, name: '金融'},
+ {value: 1, name: '学生'},
+ {value: 1, name: '其他'},
+ ]
+ }
+ ]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_33() {
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('fb3'));
+ option = {
+ title: [{
+ text: '兴趣分布',
+ left: 'center',
+ textStyle: {
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a}
{b}: {c} ({d}%)",
+ position: function (p) { //其中p为当前鼠标的位置
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['汽车', '旅游', '财经', '教育', '软件', '其他'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '兴趣分布',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 2, name: '汽车'},
+ {value: 3, name: '旅游'},
+ {value: 1, name: '财经'},
+ {value: 4, name: '教育'},
+ {value: 8, name: '软件'},
+ {value: 1, name: '其他'},
+ ]
+ }
+ ]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/mes/src/main/resources/static/picture/jt.png b/mes/src/main/resources/static/picture/jt.png
new file mode 100644
index 0000000..1eb5cb0
Binary files /dev/null and b/mes/src/main/resources/static/picture/jt.png differ
diff --git a/mes/src/main/resources/static/picture/lbx.png b/mes/src/main/resources/static/picture/lbx.png
new file mode 100644
index 0000000..cefb215
Binary files /dev/null and b/mes/src/main/resources/static/picture/lbx.png differ
diff --git a/mes/src/main/resources/static/picture/loading.gif b/mes/src/main/resources/static/picture/loading.gif
new file mode 100644
index 0000000..db3a483
Binary files /dev/null and b/mes/src/main/resources/static/picture/loading.gif differ
diff --git a/mes/src/main/resources/static/picture/map.png b/mes/src/main/resources/static/picture/map.png
new file mode 100644
index 0000000..2138288
Binary files /dev/null and b/mes/src/main/resources/static/picture/map.png differ
diff --git a/mes/src/main/resources/static/picture/weather.png b/mes/src/main/resources/static/picture/weather.png
new file mode 100644
index 0000000..6c0e0ee
Binary files /dev/null and b/mes/src/main/resources/static/picture/weather.png differ
diff --git a/mes/src/main/resources/templates/digitization/planDemo.ftl b/mes/src/main/resources/templates/digitization/planDemo.ftl
new file mode 100644
index 0000000..7d7f8f8
--- /dev/null
+++ b/mes/src/main/resources/templates/digitization/planDemo.ftl
@@ -0,0 +1,124 @@
+
+
+
+
+ index
+
+
+
+
+
+
+
+
+
+
+
页面加载中...
+
+
大数据可视化展板通用模板
+
+
+
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+ -
+
+
+
+
+
+
+
+ +
+