金豪看板
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1260 lines
50 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. 
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <!--更多资源: -->
  6. <meta charset="utf-8" />
  7. <meta name="description" content="" />
  8. <meta name="keywords" content="" />
  9. <meta name="viewport"
  10. content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  11. <title>执行看板</title>
  12. <!--大屏-->
  13. <link type="text/css" href="~/Content/Cust003/css/public.css" rel="stylesheet" />
  14. <link type="text/css" href="~/Content/Cust003/css/icon.css" rel="stylesheet" />
  15. <link type="text/css" href="~/Content/Cust003/css/index.css" rel="stylesheet" />
  16. <link rel="stylesheet" href="~/Content/Cust069/fonts/icomoon.css">
  17. <script src="~/Content/js/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
  18. @*<script src="~/Content/Cust003/js/jquery-1.11.0.min.js" type="text/javascript"></script>*@
  19. <script src="~/Content/Cust003/js/jquery.numscroll.js"
  20. type="text/javascript"
  21. charset="utf-8"></script>
  22. <script src="~/Content/js/echarts/echarts5.3.3.js"></script>
  23. <script src="~/Content/js/echarts4.8/echarts-liquidfill.js"></script>
  24. <style>
  25. h3 {
  26. color: #FFFFFF;
  27. text-shadow: #05d1fc 0px 1px 3px, #05d1fc 1px 0px 3px,#05d1fc 0px -1px 3px, #05d1fc -1px 0px 3px;
  28. filter: glow(color=#00FFCC,strength=3);
  29. }
  30. .rightMain_top {
  31. width: 100%;
  32. padding-bottom: 0.1rem;
  33. }
  34. .animationNone {
  35. animation: none !important;
  36. }
  37. .CustDiv1 ul li:nth-child(1), .CustDiv1 div div ul li:nth-child(1) {
  38. width: 5% !important;
  39. }
  40. .CustDiv1 ul li:nth-child(2), .CustDiv1 div div ul li:nth-child(2) {
  41. /* width: 28% !important; */
  42. }
  43. .CustDiv1 ul li:nth-child(3), .CustDiv1 div div ul li:nth-child(3) {
  44. width: 11% !important;
  45. }
  46. .CustDiv1 ul li:nth-child(4), .CustDiv1 div div ul li:nth-child(4) {
  47. width: 11% !important;
  48. }
  49. .CustDiv1 ul li:nth-child(5), .CustDiv1 div div ul li:nth-child(5) {
  50. width: 19% !important;
  51. }
  52. .CustDiv1 ul li:nth-child(6), .CustDiv1 div div ul li:nth-child(6) {
  53. width: 11% !important;
  54. }
  55. .CustDiv4 ul li:nth-child(1), .CustDiv4 div div ul li:nth-child(1) {
  56. width: 5% !important;
  57. }
  58. .CustDiv4 ul li:nth-child(2), .CustDiv4 div div ul li:nth-child(2) {
  59. width: 18% !important;
  60. }
  61. .CustDiv4 ul li:nth-child(3), .CustDiv4 div div ul li:nth-child(3) {
  62. width: 26% !important;
  63. }
  64. .CustDiv4 ul li:nth-child(4), .CustDiv4 div div ul li:nth-child(4) {
  65. width: 11% !important;
  66. }
  67. .CustDiv4 ul li:nth-child(5), .CustDiv4 div div ul li:nth-child(5) {
  68. width: 11% !important;
  69. }
  70. .CustDiv4 ul li:nth-child(6), .CustDiv4 div div ul li:nth-child(6) {
  71. width: 18% !important;
  72. }
  73. .CustDiv4 ul li:nth-child(7), .CustDiv4 div div ul li:nth-child(7) {
  74. width: 11% !important;
  75. }
  76. .CustDiv2 ul li:nth-child(1), .CustDiv2 div div ul li:nth-child(1) {
  77. width: 22% !important;
  78. }
  79. .CustDiv2 ul li:nth-child(2), .CustDiv2 div div ul li:nth-child(2) {
  80. width: 15% !important;
  81. }
  82. .CustDiv2 ul li:nth-child(3), .CustDiv2 div div ul li:nth-child(3) {
  83. width: 15% !important;
  84. }
  85. .CustDiv2 ul li:nth-child(4), .CustDiv2 div div ul li:nth-child(4) {
  86. width: 15% !important;
  87. }
  88. .CustDiv2 ul li:nth-child(5), .CustDiv2 div div ul li:nth-child(5) {
  89. width: 15% !important;
  90. }
  91. .CustDiv2 ul li:nth-child(6), .CustDiv2 div div ul li:nth-child(6) {
  92. width: 8% !important;
  93. }
  94. .CustDiv2 ul li:nth-child(7), .CustDiv2 div div ul li:nth-child(7) {
  95. width: 10% !important;
  96. }
  97. .leftMain_top, .leftMain_bottom {
  98. height: calc(46.5%);
  99. }
  100. .leftMain_topIn, .leftMain_bottomIn, .leftMain_topIn ul:nth-child(1),
  101. .leftMain_bottomIn ul:nth-child(1), .rightMain_bottom, .rightMain_bottomIn {
  102. height: 100%;
  103. }
  104. img {
  105. height: 0.2rem;
  106. width: 0.5rem;
  107. padding-top: 0.05rem;
  108. }
  109. .bg {
  110. padding-top: 0.01rem;
  111. }
  112. .title {
  113. height: 8%;
  114. text-shadow: #01db78 0px 2px 3px, #01db78 1px 0px 3px, #05d1fc 0px -2px 3px, #05d1fc -1px 0px 3px;
  115. }
  116. .TopName {
  117. vertical-align: middle;
  118. text-align: center;
  119. font-size: 30px;
  120. font-weight: 700;
  121. color: white;
  122. }
  123. .TopNameTime {
  124. vertical-align: middle;
  125. text-align: right;
  126. font-size: 10px;
  127. font-weight: 700;
  128. color: white;
  129. }
  130. /*td {
  131. box-sizing:inherit;
  132. }*/
  133. .rightMain_bottomIn .biaoge_list ul li {
  134. overflow: hidden;
  135. padding-right: 0px;
  136. }
  137. #div1 {
  138. display: flex;
  139. }
  140. #div1-C1 {
  141. font-size: 18px;
  142. margin-left: 115px;
  143. margin-top: 50px;
  144. }
  145. #div1-C1 div {
  146. margin-top: 20px;
  147. color: white;
  148. text-align: center;
  149. width: 130px;
  150. }
  151. #div1-C2 {
  152. font-size: 18px;
  153. margin-left: 15px;
  154. margin-top: 50px;
  155. }
  156. #div1-C2 div {
  157. margin-top: 23px;
  158. width: 200px;
  159. height: 20px;
  160. background-color: #0000CD;
  161. text-align: center;
  162. }
  163. #div1-C3 {
  164. font-size: 18px;
  165. margin-left: 15px;
  166. margin-top: 50px;
  167. }
  168. #div1-C3 div {
  169. margin-top: 20px;
  170. color: white;
  171. /*border-left:solid 1px #AFEEEE;
  172. border-right:solid 1px #AFEEEE;
  173. border-radius:25px;*/
  174. text-align: center;
  175. width: 30px;
  176. }
  177. #div3 {
  178. display: flex;
  179. color: white;
  180. }
  181. #div3-C1 {
  182. width: 50%;
  183. }
  184. #div3-C2 {
  185. width: 50%;
  186. }
  187. #div3-C1-C1 {
  188. text-align: center;
  189. width: 100%;
  190. font-size: 25px;
  191. background-color: #6495ED;
  192. }
  193. #div3-C1-C2 {
  194. margin-top: 10px;
  195. display: flex;
  196. }
  197. #div3-C1-C2-div1 {
  198. width: 25px;
  199. margin-left: 20px;
  200. }
  201. #div3-C1-C2-div2 {
  202. width: 25px;
  203. margin-left: 20px;
  204. }
  205. #div3-C2-C1 {
  206. text-align: center;
  207. width: 97%;
  208. font-size: 25px;
  209. background-color: #6495ED;
  210. }
  211. #div3-C2-C2 {
  212. margin-top: 10px;
  213. display: flex;
  214. }
  215. #div3-C2-C2-div1 {
  216. width: 25px;
  217. }
  218. #div3-C2-C2-div2 {
  219. width: 20px;
  220. }
  221. #div3-C1-C2 span {
  222. margin-left: 20px;
  223. text-align: center;
  224. }
  225. #div3-C2-C2 span {
  226. margin-left: 20px;
  227. text-align: center;
  228. }
  229. #div1-C2 {
  230. color: white;
  231. text-align: center;
  232. }
  233. </style>
  234. <script type="text/javascript">
  235. document.documentElement.style.fontSize =
  236. (document.documentElement.clientWidth / 768) * 100 + 'px'
  237. </script>
  238. </head>
  239. <body>
  240. <div class="bg">
  241. <table class="title">
  242. <tr>
  243. <td style="width:20%">
  244. <div class="TopNamelogo" id="TopNamelogo">
  245. <img src="~/Content/img/zhenxiang.png" border="0" class="logoclass" />
  246. @*<img src="~/Content/img/wechat.jpg" border="0" class="logoclass" />*@
  247. </div>
  248. </td>
  249. <td style="width:60%">
  250. <div class="TopName" id="TopName">生产进度看板</div>
  251. </td>
  252. <td style="width:20%">
  253. <div class="TopNameTime" id="TopNameTime"></div>
  254. </td>
  255. </tr>
  256. </table>
  257. @*<div class="title">执行看板</div>*@
  258. <div class="leftMain_top">
  259. <div class="leftMain_topIn">
  260. <ul>
  261. <li class="LineLi" style="width:50%">
  262. <div class="rightMain_bottom">
  263. <div class="rightMain_bottomIn">
  264. <div class="biaoge biaoge_list"
  265. style="width: 100%; ">
  266. <div class="biaoge_listIn CustDiv1">
  267. <div id="div1">
  268. <div id="div1-C1">
  269. <div>月度生产指标</div>
  270. <div>月度发车指标</div>
  271. <div>上月实际生产</div>
  272. <div>上月实际发车</div>
  273. </div>
  274. <div id="div1-C2">
  275. <div id="mothPlan"></div>
  276. <div id="motnSales"></div>
  277. <div id="lastMothPlan"></div>
  278. <div id="lastMothSales"></div>
  279. </div>
  280. <div id="div1-C3">
  281. <div>台</div>
  282. <div>台</div>
  283. <div>台</div>
  284. <div>台</div>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. @*</div>*@
  292. </li>
  293. <li class="LineLi" style="width:50%">
  294. <div class="rightMain_bottom">
  295. <div class="rightMain_bottomIn">
  296. @*<h3> 插件车间生产加工数据</h3>*@
  297. <div class="biaoge biaoge_list" id="marqueelist2"
  298. style="width: 100%; ">
  299. <div class="biaoge_listIn CustDiv1">
  300. <ul class="ul_title">
  301. <li>序号</li>
  302. <li>生产编号</li>
  303. <li>产品名称</li>
  304. <li>用户单位</li>
  305. <li>客户交货期</li>
  306. <li>生产状态</li>
  307. <li>进度</li>
  308. </ul>
  309. <div class="ul_list" id="marqueeCust2">
  310. <div class="ul_listIn ul_listInCust" id="marqueeCustCH2">
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. <span class="border_bg_leftTop"></span>
  316. <span class="border_bg_rightTop"></span>
  317. <span class="border_bg_leftBottom"></span>
  318. <span class="border_bg_rightBottom"></span>
  319. </div>
  320. </div>
  321. </li>
  322. @*<li class="LineLi">
  323. <div class="rightMain_bottom">
  324. <div class="rightMain_bottomIn">
  325. <h3> 组装车间生产加工数据</h3>
  326. <div class="biaoge biaoge_list" id="marqueelist3"
  327. style="width: 100%; ">
  328. <div class="biaoge_listIn CustDiv1">
  329. <ul class="ul_title">
  330. <li>生产订单</li>
  331. <li>产品名称</li>
  332. <li>计划量</li>
  333. <li>完成量</li>
  334. <li>计划完工日期</li>
  335. <li>生产进度</li>
  336. </ul>
  337. <div class="ul_list" id="marqueeCust3">
  338. <div class="ul_listIn" id="marqueeCustCH3">
  339. </div>
  340. </div>
  341. </div>
  342. </div>
  343. <span class="border_bg_leftTop"></span>
  344. <span class="border_bg_rightTop"></span>
  345. <span class="border_bg_leftBottom"></span>
  346. <span class="border_bg_rightBottom"></span>
  347. </div>
  348. </div>
  349. </li>*@
  350. </ul>
  351. </div>
  352. </div>
  353. <div class="leftMain_bottom">
  354. <div class="leftMain_bottomIn">
  355. <ul>
  356. <li class="LineLi">
  357. <div class="rightMain_bottom">
  358. <div class="rightMain_bottomIn">
  359. @*<h3> IPQC检验合格率</h3>*@
  360. <div id="echart1_1" style="width:calc(100% );height:calc(100% - 0.1rem)">
  361. <div id="div3">
  362. <div id="div3-C1">
  363. <div id="div3-C1-C1">
  364. </div>
  365. <div id="div3-C1-C2">
  366. <span>完成数量</span>
  367. <span id="div3-C1-C2-div1"></span>
  368. <span>计划完成数量</span>
  369. <span id="div3-C1-C2-div2"></span>
  370. </div>
  371. <div id="div3pie" style="width:600px;height:200px">
  372. </div>
  373. </div>
  374. <div id="div3-C2">
  375. <div id="div3-C2-C1">
  376. </div>
  377. <div id="div3-C2-C2">
  378. <span>完成数量</span>
  379. <span id="div3-C2-C2-div1"></span>
  380. <span>计划完成数量</span>
  381. <span id="div3-C2-C2-div2"></span>
  382. </div>
  383. <div id="div3-C2-C3">
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. <span class="border_bg_leftTop"></span>
  389. <span class="border_bg_rightTop"></span>
  390. <span class="border_bg_leftBottom"></span>
  391. <span class="border_bg_rightBottom"></span>
  392. </div>
  393. </div>
  394. </li>
  395. <li class="LineLi">
  396. <div class="rightMain_bottom">
  397. <div class="rightMain_bottomIn">
  398. <h3 style=" text-align: center;
  399. width: 97%;
  400. font-size:25px;
  401. background-color:#6495ED;">
  402. 月完工车辆统计
  403. </h3>
  404. <div class="biaoge biaoge_list" id="div4"
  405. style="width: 100%; ">
  406. @*<div class="biaoge_listIn CustDiv2">
  407. <div class="ul_list" id="RCVUNINView">
  408. <div class="ul_listIn" id="RCVUNIN">
  409. </div>
  410. </div>
  411. </div>*@
  412. </div>
  413. <span class="border_bg_leftTop"></span>
  414. <span class="border_bg_rightTop"></span>
  415. <span class="border_bg_leftBottom"></span>
  416. <span class="border_bg_rightBottom"></span>
  417. </div>
  418. </div>
  419. </li>
  420. </ul>
  421. </div>
  422. </div>
  423. @*</div>*@
  424. <div style="clear: both"></div>
  425. </div>
  426. <script>
  427. var DataF = 30;// 300;//单位秒 //刷新数据时间
  428. var _BarWidth = "25%";
  429. var _barBorderRadius_M = 2;
  430. var myChart4 = echarts.init(document.getElementById('div4'));
  431. var myChartArea3 = echarts.init(document.getElementById('div3pie'));
  432. GetArea3();
  433. $(function () {
  434. getTime();
  435. GetDataZong();
  436. //刷新数据
  437. timer = setInterval(function () {
  438. GetDataZong();
  439. }, DataF * 1000);
  440. });
  441. function getTime() {
  442. var days = new Array("日", "一", "二", "三", "四", "五", "六");
  443. var currentDT = new Date();
  444. var y, m, date, day, hs, ms, ss, theDateStr;
  445. y = currentDT.getFullYear(); //四位整数表示的年份
  446. m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
  447. date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
  448. day = currentDT.getDay(); //星期
  449. hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
  450. ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
  451. ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
  452. theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
  453. //填充到组件中
  454. $("#TopNameTime").text(theDateStr);
  455. // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
  456. window.setTimeout(getTime, 1000);
  457. }
  458. function GetDataZong() {
  459. //echart1_1();
  460. GetArea1();
  461. GetArea2('marqueeCustCH2', 1);
  462. GetArea4();
  463. //GetZhiXing_MO("marqueeCustCH1", "30");
  464. //GetZhiXing_MO("marqueeCustCH2", "60");
  465. //GetZhiXing_MO("marqueeCustCH3", "90");
  466. //GetZhiXing_RCVUnInWare();
  467. // SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
  468. // SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动
  469. // SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动
  470. //SetIfGo("RCVUNINView", "RCVUNIN", "marqueelist4");//判断是否需要滚动
  471. }
  472. function SetIfGo(DivID, DivCHID, listID) {
  473. var ListDIV = $("#" + listID)[0].clientHeight;
  474. var H_marqueediv = $("#" + DivCHID)[0];
  475. //var H_marquee= H_marqueediv.clientHeight;
  476. var H_marqueeView = $("#" + DivID)[0].clientHeight;
  477. if ((ListDIV - 40) > H_marqueeView) {
  478. if (!$("#" + DivID).hasClass("animationNone")) {
  479. $("#" + DivID).addClass("animationNone");
  480. }
  481. if (!$("#" + DivCHID).hasClass("animationNone")) {
  482. $("#" + DivCHID).addClass("animationNone");
  483. }
  484. }
  485. else {
  486. if ($("#" + DivID).hasClass("animationNone")) {
  487. $("#" + DivID).removeClass("animationNone");
  488. }
  489. if ($("#" + DivCHID).hasClass("animationNone")) {
  490. $("#" + DivCHID).removeClass("animationNone");
  491. }
  492. }
  493. }
  494. //function echart1_1() {
  495. // // 基于准备好的dom,初始化echarts实例
  496. // var myChart = echarts.init(document.getElementById('echart1_1'));
  497. // var MonthArray = new Array();
  498. // var MonthPercent = new Array();
  499. // var MonthPercent_BZ = new Array();
  500. // $.ajax({
  501. // url: "/SRM/WatchPanel/GetZhiXing_OQC?XX=XX&" + Math.random(),
  502. // dataType: "json",
  503. // async: false,
  504. // success: function (data) {
  505. // if (data != false && data != null && data.length > 0) {
  506. // for (var i = 0; i < data.length; i++) {
  507. // MonthArray.push(data[i].月份);
  508. // MonthPercent.push(data[i].PercentNum);
  509. // MonthPercent_BZ.push(99.5);
  510. // }
  511. // //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
  512. // var colors = ['#9c90e7', '#4ff494', '#f2c290', '#FFD700', '#f3aaf5', '#fcfb68']
  513. // var colors2 = ['#6A5ACD', '#3D9140', '#ED9121', '#DAA569', '#A066D3', '#E3CF57'];
  514. // option = {
  515. // color: colors,
  516. // tooltip: {
  517. // trigger: 'axis',
  518. // axisPointer: { type: 'shadow' },
  519. // formatter: function (params) {
  520. // var showHtm = "";
  521. // showHtm = params[0].name + "月:" + '<br>' +
  522. // params[0].seriesName + ':' + params[0].data + "%" + '<br>' +
  523. // params[2].seriesName + ':' + params[2].data + "%";
  524. // return showHtm;
  525. // }
  526. // },
  527. // grid: {
  528. // "top": "15",
  529. // "right": "20",
  530. // "bottom": "20",
  531. // "left": "40",
  532. // },
  533. // legend: {
  534. // show: false,
  535. // },
  536. // "xAxis": [
  537. // {
  538. // data: MonthArray,
  539. // axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.9)", } },
  540. // axisTick: { show: true, },
  541. // axisLabel: {
  542. // textStyle: {
  543. // show: true,
  544. // //fontSize: 9,
  545. // color: "rgba(255,255,255,.9)",
  546. // },
  547. // },
  548. // },
  549. // ],
  550. // "yAxis": [
  551. // {
  552. // max: 100,
  553. // "type": "value",
  554. // axisTick: {
  555. // show: true,
  556. // lineStyle: {
  557. // show: true,
  558. // color: "rgba(255,255,255,.9)",
  559. // },
  560. // },
  561. // splitLine: { show: false, },
  562. // axisLine: {
  563. // show: true,
  564. // lineStyle: {
  565. // show: true,
  566. // //fontSize: 9,
  567. // color: "rgba(255,255,255,.9)",
  568. // },
  569. // },
  570. // axisLabel: {
  571. // show: true,
  572. // color: "rgba(255,255,255,.9)"
  573. // },
  574. // axisLine: {
  575. // show: true,
  576. // lineStyle: {
  577. // show: true,
  578. // color: "rgba(255,255,255,.9)",
  579. // },
  580. // },
  581. // }
  582. // ],
  583. // "series": [
  584. // {
  585. // "name": "合格率",
  586. // "type": "bar",
  587. // "data": MonthPercent,
  588. // barWidth: _BarWidth,
  589. // "itemStyle": {
  590. // "normal": {
  591. // barBorderRadius: _barBorderRadius_M,
  592. // //color: function (params)
  593. // //{
  594. // // return colors[params.dataIndex];
  595. // //},
  596. // color: function (params) {
  597. // return new echarts.graphic.LinearGradient(
  598. // 0,
  599. // 0,
  600. // 0,
  601. // 1,
  602. // [
  603. // { offset: 0, color: colors[params.dataIndex] },
  604. // { offset: 1, color: colors2[params.dataIndex] }
  605. // ]
  606. // )
  607. // },
  608. // barBorderRadius: [3, 3, 3, 3],
  609. // }
  610. // },
  611. // animation: false,
  612. // barGap: '-100%',
  613. // barCategoryGap: '40%',
  614. // label: {
  615. // show: true,
  616. // formatter: '{c}%',
  617. // },
  618. // }
  619. // ,
  620. // {
  621. // "name": "合格率",
  622. // "type": "line",
  623. // "data": MonthPercent,
  624. // barWidth: _BarWidth,
  625. // "itemStyle": {
  626. // "normal": {
  627. // color: "#96aef1",
  628. // }
  629. // },
  630. // label: {
  631. // show: false,
  632. // //position: 'outside',
  633. // formatter: '{c}%',
  634. // },
  635. // }
  636. // ,
  637. // {
  638. // "name": "标准值",
  639. // "type": "line",
  640. // "data": MonthPercent_BZ,
  641. // "itemStyle": {
  642. // "normal": {
  643. // }
  644. // },
  645. // label: {
  646. // show: false,
  647. // //position: 'outside',
  648. // formatter: '{c}%',
  649. // }
  650. // },
  651. // ]
  652. // };
  653. // myChart.setOption(option);
  654. // }
  655. // else {
  656. // return null;
  657. // }
  658. // },
  659. // error: function (aa) {
  660. // return null;
  661. // }
  662. // });
  663. //}
  664. //区域一
  665. function GetArea1() {
  666. $.ajax({
  667. url: "/SRM/WatchPanel/GetAreal1",
  668. dataType: "json",
  669. async: false,
  670. success: function (data) {
  671. if (data != false && data != null) {
  672. //月度生产 月度发车 上月实际生产 月度实际发车 上月完成数量 上上月完成数量
  673. $("#mothPlan").html(data[0].月度生产);
  674. $("#motnSales").html(data[0].月度发车);
  675. $("#lastMothSales").html(data[0].上月度发车);
  676. } else {
  677. $("#" + marqueeID).html("");
  678. }
  679. },
  680. error: function (aa) {
  681. }
  682. });
  683. }
  684. function GetArea3() {
  685. // 基于准备好的dom,初始化echarts实例
  686. //var MonthArray = new Array();
  687. //var MonthPercent = new Array();
  688. //var MonthPercent_BZ = new Array();
  689. $.ajax({
  690. url: "/SRM/WatchPanel/GetOutput?XX=XX&" + Math.random(),
  691. dataType: "json",
  692. async: false,
  693. success: function (data) {
  694. console.log(data);
  695. if (data != false && data != null && data.length > 0) {
  696. var value = 0;
  697. var value1 = 0;
  698. var value2 = 0;
  699. var value3 = 0;
  700. var value4 = 0;
  701. var value5 = 0;
  702. var value6 = 0;
  703. var value7 = 0;
  704. for (var i = 0; i < data.length; i++) {
  705. value = data[i].上月度生产;
  706. value1 = data[i].上月完成;
  707. value2 = data[i].前月度生产;
  708. value3 = data[i].前月完成;
  709. value4 = data[i].上月比;
  710. value5 = data[i].前月比;
  711. value6 = data[0].前月;
  712. value7 = data[0].上月;
  713. }
  714. $("#div3-C1-C1").html(value7 + "月完成率");
  715. $("#div3-C2-C1").html(value6 + "月完成率");
  716. $("#div3-C1-C2-div1").html(value3);
  717. $("#lastMothPlan").html(value3);
  718. $("#div3-C1-C2-div2").html(value2);
  719. $("#div3-C2-C2-div1").html(value1);
  720. $("#div3-C2-C2-div2").html(value);
  721. //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
  722. var data = [value5, value5, value5];
  723. var option3 = {
  724. title: [
  725. {
  726. text: value7 + '月完成率',
  727. x: '22%',
  728. y: '90%',
  729. textStyle: {
  730. fontSize: 14,
  731. fontWeight: '100',
  732. color: '#5dc3ea',
  733. lineHeight: 16,
  734. textAlign: 'center',
  735. },
  736. },
  737. {
  738. text: value6 + '月完成率',
  739. x: '76%',
  740. y: '90%',
  741. textStyle: {
  742. fontSize: 14,
  743. fontWeight: '100',
  744. color: '#5dc3ea',
  745. lineHeight: 16,
  746. textAlign: 'center',
  747. },
  748. },
  749. ],
  750. series: [
  751. {
  752. type: 'liquidFill',
  753. radius: '85%',
  754. center: ['30%', '48%'],
  755. color: [
  756. {
  757. type: 'linear',
  758. x: 0,
  759. y: 0,
  760. x2: 0,
  761. y2: 1,
  762. colorStops: [
  763. {
  764. offset: 0,
  765. color: '#446bf5',
  766. },
  767. {
  768. offset: 1,
  769. color: '#0000FF',
  770. },
  771. ],
  772. globalCoord: false,
  773. },
  774. ],
  775. data: [value5, value5, value5], // data个数代表波浪数
  776. backgroundStyle: {
  777. borderWidth: 1,
  778. color: 'RGBA(51, 66, 127, 0.7)',
  779. },
  780. label: {
  781. normal: {
  782. textStyle: {
  783. fontSize: 14,
  784. color: '#fff',
  785. },
  786. },
  787. },
  788. outline: {
  789. // show: false
  790. borderDistance: 0,
  791. itemStyle: {
  792. borderWidth: 6,
  793. borderColor: '#0000FF',
  794. },
  795. },
  796. },
  797. { //第二个球的填充
  798. type: 'liquidFill',
  799. radius: '85%',
  800. center: ['84%', '45%'],
  801. color: [
  802. {
  803. type: 'linear',
  804. x: 0,
  805. y: 0,
  806. x2: 0,
  807. y2: 1,
  808. colorStops: [
  809. {
  810. offset: 0,
  811. color: '#2aa1e3',
  812. },
  813. {
  814. offset: 1,
  815. color: '#08bbc9',
  816. },
  817. ],
  818. globalCoord: false,
  819. },
  820. ],
  821. data: [value4, value4, value4], // data个数代表波浪数
  822. backgroundStyle: {
  823. borderWidth: 1,
  824. color: 'RGBA(51, 66, 127, 0.7)',
  825. },
  826. label: {
  827. normal: {
  828. textStyle: {
  829. fontSize: 28,
  830. color: '#fff',
  831. },
  832. },
  833. },
  834. outline: {
  835. // show: false
  836. borderDistance: 0,
  837. itemStyle: {
  838. borderWidth: 6,
  839. borderColor: '#08bbc9',
  840. },
  841. },
  842. },
  843. ],
  844. };
  845. myChartArea3.setOption(option3);
  846. }
  847. else {
  848. return null;
  849. }
  850. },
  851. error: function (aa) {
  852. return null;
  853. }
  854. });
  855. }
  856. //function GetArea3() {
  857. // // 基于准备好的dom,初始化echarts实例
  858. // //var MonthArray = new Array();
  859. // //var MonthPercent = new Array();
  860. // //var MonthPercent_BZ = new Array();
  861. // $.ajax({
  862. // url: "/SRM/WatchPanel/GetOutput?XX=XX&" + Math.random(),
  863. // dataType: "json",
  864. // async: false,
  865. // success: function (data) {
  866. // if (data != false && data != null && data.length > 0) {
  867. // var value = 0;
  868. // var value1 = 0;
  869. // var value2 = 0;
  870. // var value3 = 0;
  871. // var value4 = 0;
  872. // var value5 = 0;
  873. // for (var i = 0; i < data.length; i++) {
  874. // value = data[i].生产1;
  875. // value1 = data[i].计划1;
  876. // value2 = data[i].生产2;
  877. // value3 = data[i].计划2;
  878. // value4 = data[i].月份1;
  879. // value5 = data[i].月份2;
  880. // };
  881. // let option3 = {
  882. // series: [
  883. // {
  884. // name: value4+'月计划量',
  885. // type:'pie',
  886. // data: [
  887. // { value: value, name: '完成率' },
  888. // { value: value1, name: '计划完成率' }
  889. // ],
  890. // label: {
  891. // formatter: '1023010'
  892. // },
  893. // emphasis: {
  894. // label: {
  895. // show: true,
  896. // fontSize: '20',
  897. // fontWeight: 'bold'
  898. // }
  899. // }
  900. // }
  901. // ]
  902. // };
  903. // myChartArea3.setOption(option3);
  904. // }
  905. // else {
  906. // return null;
  907. // }
  908. // },
  909. // error: function (aa) {
  910. // return null;
  911. // }
  912. // });
  913. //}
  914. //区域四
  915. function GetArea4() {
  916. // 基于准备好的dom,初始化echarts实例
  917. var MonthArray = new Array();
  918. var MonthNum = new Array();
  919. var MonthPercent_BZ = new Array();
  920. $.ajax({
  921. url: "/SRM/WatchPanel/monthOutput?XX=XX&" + Math.random(),
  922. dataType: "json",
  923. async: false,
  924. success: function (data) {
  925. if (data != false && data != null && data.length > 0) {
  926. console.log(data);
  927. for (var i = 0; i < data.length; i++) {
  928. //console.log(i);
  929. MonthArray.push(data[i].Mont);
  930. MonthNum.push(data[i].num);
  931. }
  932. //console.log(MonthArray);
  933. //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
  934. let option4 = {
  935. xAxis: {
  936. type: 'category',
  937. name: '日期',
  938. namelocation: 'end',
  939. nameTextStyle: {
  940. color: "rgba(28, 231, 224, 1)"
  941. },
  942. axisLine: {
  943. lineStyle: {
  944. color: "rgba(28, 231, 224, 1)" // 设置X轴颜色为红色
  945. }
  946. },
  947. data: MonthArray
  948. },
  949. yAxis: {
  950. type: 'value',
  951. name: '完成量',
  952. namelocation: 'top',
  953. nameTextStyle: {
  954. color: "rgba(28, 231, 224, 1)"
  955. },
  956. axisLine: {
  957. lineStyle: {
  958. color: "rgba(28, 231, 224, 1)" // 设置X轴颜色为红色
  959. }
  960. },
  961. max: 20
  962. },
  963. series: [{
  964. data: MonthNum,
  965. type: 'line',
  966. lineStyle: {
  967. color: 'skyblue',
  968. width: 3 // 设置线条宽度为2
  969. },
  970. areaStyle: {
  971. color: 'rgba(240, 240, 240, 0.3)' // 设置曲线下部区域为30%透明度的白灰色
  972. },
  973. markPoint: {
  974. data: [
  975. { type: 'max', name: '最大值' },
  976. { type: 'min', name: '最小值' }
  977. ]
  978. },
  979. itemStyle: {
  980. color: 'skyblue'
  981. },
  982. animation: true // 开启动画效果
  983. }]
  984. };
  985. myChart4.setOption(option4);
  986. }
  987. else {
  988. return null;
  989. }
  990. },
  991. error: function (aa) {
  992. return null;
  993. }
  994. });
  995. }
  996. function GetZhiXing_MO(marqueeID, ItemNumber) {
  997. $.ajax({
  998. url: "/SRM/WatchPanel/GetZhiXing_MO?ItemNumber=" + ItemNumber + "&" + Math.random(),
  999. dataType: "json",
  1000. async: false,
  1001. success: function (data) {
  1002. if (data != false && data != null && data.length > 0) {
  1003. //生产订单 产品名称 计划数量 完成数量 计划完工日期 生产进度
  1004. var html = "";
  1005. for (var i = 0; i < data.length; i++) {
  1006. html += ' <ul class="ul_con"> ';
  1007. if (ItemNumber == "30")
  1008. html += ' <li >' + data[i].AB面 + '</li> ';
  1009. html += ' <li >' + data[i].生产订单 + '</li> <li >' + data[i].产品名称 + '</li>';
  1010. html += ' <li >' + data[i].计划数量 + '</li> <li >' + data[i].完成数量 + '</li>';
  1011. html += ' <li >' + data[i].计划完工日期 + '</li> <li >' + data[i].生产进度 + '</li> </ul> ';
  1012. }
  1013. html += "</ul>";
  1014. $("#" + marqueeID).html(html);
  1015. } else {
  1016. $("#" + marqueeID).html("");
  1017. }
  1018. },
  1019. error: function (aa) {
  1020. }
  1021. });
  1022. }
  1023. function GetArea2(marqueeID, ItemNumber) {
  1024. $.ajax({
  1025. url: "/SRM/WatchPanel/GetProductProgress?ItemNumber=" + ItemNumber + "&" + Math.random(),
  1026. dataType: "json",
  1027. async: false,
  1028. success: function (data) {
  1029. if (data != false && data != null) {
  1030. var html = "";
  1031. for (var i = 0; i < data.length; i++) {
  1032. html += '<ul class="ul_con">';
  1033. html += '<li>' + data[i].序号 + '</li>';
  1034. html += '<li>' + data[i].销售车辆号 + '</li><li>' + data[i].产品名称 + '</li><li>' + data[i].用户单位 + '</li>';
  1035. html += '<li>' + data[i].客户交货期 + '</li><li>' + data[i].生产状态 + '</li>';
  1036. html += '<li>' + data[i].进度 + '</li></ul>';
  1037. }
  1038. $(".ul_listInCust").css("animation-duration", data.length * 1.3 + "s");
  1039. $("#" + marqueeID).html(html);
  1040. // Set background color of odd-indexed ul elements to black
  1041. $("#" + marqueeID + " ul:nth-child(odd)").css("background-color", "rgba(0, 1, 0, 0.1)");
  1042. } else {
  1043. $("#" + marqueeID).html("");
  1044. }
  1045. },
  1046. error: function (aa) {
  1047. // Handle error
  1048. }
  1049. });
  1050. }
  1051. function GetZhiXing_RCVUnInWare() {
  1052. $.ajax({
  1053. url: "/SRM/WatchPanel/GetZhiXing_RCVUnInWare?XX=XX&" + Math.random(),
  1054. dataType: "json",
  1055. async: false,
  1056. success: function (data) {
  1057. if (data != false && data != null && data.length > 0) {
  1058. var html = "";
  1059. for (var i = 0; i < data.length; i++) {
  1060. html += ' <ul class="ul_con"> <li >' + data[i].LOTNO + '</li> <li >' +
  1061. data[i].送货单号 + '</li>';
  1062. html += ' <li >' + data[i].采购订单号 + '</li> <li >' + data[i].物料编码 + '</li>';
  1063. html += ' <li >' + data[i].物料名称 + '</li> <li >' + data[i].数量 + '</li> ';
  1064. html += ' <li >' + data[i].检验人 + '</li> </ul> ';
  1065. }
  1066. html += "</ul>";
  1067. $("#RCVUNIN").html(html);
  1068. }
  1069. else {
  1070. $("#RCVUNIN").html("");
  1071. }
  1072. },
  1073. error: function (aa) {
  1074. }
  1075. });
  1076. }
  1077. </script>
  1078. </body>
  1079. </html>