金豪看板
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.

1268 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
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>年度生产</div>
  274. <div>年度发车</div>
  275. </div>
  276. <div id="div1-C2">
  277. <div id="mothPlan"></div>
  278. <div id="motnSales"></div>
  279. <div id="lastMothPlan"></div>
  280. <div id="lastMothSales"></div>
  281. <div id="yearProduct"></div>
  282. <div id="yearSales"></div>
  283. </div>
  284. <div id="div1-C3">
  285. <div>台</div>
  286. <div>台</div>
  287. <div>台</div>
  288. <div>台</div>
  289. <div>台</div>
  290. <div>台</div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. @*</div>*@
  298. </li>
  299. <li class="LineLi" style="width:50%">
  300. <div class="rightMain_bottom">
  301. <div class="rightMain_bottomIn">
  302. @*<h3> 插件车间生产加工数据</h3>*@
  303. <div class="biaoge biaoge_list" id="marqueelist2"
  304. style="width: 100%; ">
  305. <div class="biaoge_listIn CustDiv1">
  306. <ul class="ul_title">
  307. <li>序号</li>
  308. <li>生产编号</li>
  309. <li>产品名称</li>
  310. <li>用户单位</li>
  311. <li>客户交货期</li>
  312. <li>生产状态</li>
  313. <li>进度</li>
  314. </ul>
  315. <div class="ul_list" id="marqueeCust2">
  316. <div class="ul_listIn ul_listInCust" id="marqueeCustCH2">
  317. </div>
  318. </div>
  319. </div>
  320. </div>
  321. <span class="border_bg_leftTop"></span>
  322. <span class="border_bg_rightTop"></span>
  323. <span class="border_bg_leftBottom"></span>
  324. <span class="border_bg_rightBottom"></span>
  325. </div>
  326. </div>
  327. </li>
  328. @*<li class="LineLi">
  329. <div class="rightMain_bottom">
  330. <div class="rightMain_bottomIn">
  331. <h3> 组装车间生产加工数据</h3>
  332. <div class="biaoge biaoge_list" id="marqueelist3"
  333. style="width: 100%; ">
  334. <div class="biaoge_listIn CustDiv1">
  335. <ul class="ul_title">
  336. <li>生产订单</li>
  337. <li>产品名称</li>
  338. <li>计划量</li>
  339. <li>完成量</li>
  340. <li>计划完工日期</li>
  341. <li>生产进度</li>
  342. </ul>
  343. <div class="ul_list" id="marqueeCust3">
  344. <div class="ul_listIn" id="marqueeCustCH3">
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. <span class="border_bg_leftTop"></span>
  350. <span class="border_bg_rightTop"></span>
  351. <span class="border_bg_leftBottom"></span>
  352. <span class="border_bg_rightBottom"></span>
  353. </div>
  354. </div>
  355. </li>*@
  356. </ul>
  357. </div>
  358. </div>
  359. <div class="leftMain_bottom">
  360. <div class="leftMain_bottomIn">
  361. <ul>
  362. <li class="LineLi">
  363. <div class="rightMain_bottom">
  364. <div class="rightMain_bottomIn">
  365. @*<h3> IPQC检验合格率</h3>*@
  366. <div id="echart1_1" style="width:calc(100% );height:calc(100% - 0.1rem)">
  367. <div id="div3">
  368. <div id="div3-C1">
  369. <div id="div3-C1-C1">
  370. </div>
  371. <div id="div3-C1-C2">
  372. <span>完成数量</span>
  373. <span id="div3-C1-C2-div1"></span>
  374. <span>计划完成数量</span>
  375. <span id="div3-C1-C2-div2"></span>
  376. </div>
  377. <div id="div3pie" style="width:600px;height:200px">
  378. </div>
  379. </div>
  380. <div id="div3-C2">
  381. <div id="div3-C2-C1">
  382. </div>
  383. <div id="div3-C2-C2">
  384. <span>完成数量</span>
  385. <span id="div3-C2-C2-div1"></span>
  386. <span>计划完成数量</span>
  387. <span id="div3-C2-C2-div2"></span>
  388. </div>
  389. <div id="div3-C2-C3">
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. <span class="border_bg_leftTop"></span>
  395. <span class="border_bg_rightTop"></span>
  396. <span class="border_bg_leftBottom"></span>
  397. <span class="border_bg_rightBottom"></span>
  398. </div>
  399. </div>
  400. </li>
  401. <li class="LineLi">
  402. <div class="rightMain_bottom">
  403. <div class="rightMain_bottomIn">
  404. <h3 style=" text-align: center;
  405. width: 97%;
  406. font-size:25px;
  407. background-color:#6495ED;">
  408. 月完工车辆统计
  409. </h3>
  410. <div class="biaoge biaoge_list" id="div4"
  411. style="width: 100%; ">
  412. @*<div class="biaoge_listIn CustDiv2">
  413. <div class="ul_list" id="RCVUNINView">
  414. <div class="ul_listIn" id="RCVUNIN">
  415. </div>
  416. </div>
  417. </div>*@
  418. </div>
  419. <span class="border_bg_leftTop"></span>
  420. <span class="border_bg_rightTop"></span>
  421. <span class="border_bg_leftBottom"></span>
  422. <span class="border_bg_rightBottom"></span>
  423. </div>
  424. </div>
  425. </li>
  426. </ul>
  427. </div>
  428. </div>
  429. @*</div>*@
  430. <div style="clear: both"></div>
  431. </div>
  432. <script>
  433. var DataF = 30;// 300;//单位秒 //刷新数据时间
  434. var _BarWidth = "25%";
  435. var _barBorderRadius_M = 2;
  436. var myChart4 = echarts.init(document.getElementById('div4'));
  437. var myChartArea3 = echarts.init(document.getElementById('div3pie'));
  438. GetArea3();
  439. $(function () {
  440. getTime();
  441. GetDataZong();
  442. //刷新数据
  443. timer = setInterval(function () {
  444. GetDataZong();
  445. }, DataF * 1000);
  446. });
  447. function getTime() {
  448. var days = new Array("日", "一", "二", "三", "四", "五", "六");
  449. var currentDT = new Date();
  450. var y, m, date, day, hs, ms, ss, theDateStr;
  451. y = currentDT.getFullYear(); //四位整数表示的年份
  452. m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
  453. date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
  454. day = currentDT.getDay(); //星期
  455. hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
  456. ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
  457. ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
  458. theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
  459. //填充到组件中
  460. $("#TopNameTime").text(theDateStr);
  461. // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
  462. window.setTimeout(getTime, 1000);
  463. }
  464. function GetDataZong() {
  465. //echart1_1();
  466. GetArea1();
  467. GetArea2('marqueeCustCH2', 1);
  468. GetArea4();
  469. //GetZhiXing_MO("marqueeCustCH1", "30");
  470. //GetZhiXing_MO("marqueeCustCH2", "60");
  471. //GetZhiXing_MO("marqueeCustCH3", "90");
  472. //GetZhiXing_RCVUnInWare();
  473. // SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
  474. // SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动
  475. // SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动
  476. //SetIfGo("RCVUNINView", "RCVUNIN", "marqueelist4");//判断是否需要滚动
  477. }
  478. function SetIfGo(DivID, DivCHID, listID) {
  479. var ListDIV = $("#" + listID)[0].clientHeight;
  480. var H_marqueediv = $("#" + DivCHID)[0];
  481. //var H_marquee= H_marqueediv.clientHeight;
  482. var H_marqueeView = $("#" + DivID)[0].clientHeight;
  483. if ((ListDIV - 40) > H_marqueeView) {
  484. if (!$("#" + DivID).hasClass("animationNone")) {
  485. $("#" + DivID).addClass("animationNone");
  486. }
  487. if (!$("#" + DivCHID).hasClass("animationNone")) {
  488. $("#" + DivCHID).addClass("animationNone");
  489. }
  490. }
  491. else {
  492. if ($("#" + DivID).hasClass("animationNone")) {
  493. $("#" + DivID).removeClass("animationNone");
  494. }
  495. if ($("#" + DivCHID).hasClass("animationNone")) {
  496. $("#" + DivCHID).removeClass("animationNone");
  497. }
  498. }
  499. }
  500. //function echart1_1() {
  501. // // 基于准备好的dom,初始化echarts实例
  502. // var myChart = echarts.init(document.getElementById('echart1_1'));
  503. // var MonthArray = new Array();
  504. // var MonthPercent = new Array();
  505. // var MonthPercent_BZ = new Array();
  506. // $.ajax({
  507. // url: "/SRM/WatchPanel/GetZhiXing_OQC?XX=XX&" + Math.random(),
  508. // dataType: "json",
  509. // async: false,
  510. // success: function (data) {
  511. // if (data != false && data != null && data.length > 0) {
  512. // for (var i = 0; i < data.length; i++) {
  513. // MonthArray.push(data[i].月份);
  514. // MonthPercent.push(data[i].PercentNum);
  515. // MonthPercent_BZ.push(99.5);
  516. // }
  517. // //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
  518. // var colors = ['#9c90e7', '#4ff494', '#f2c290', '#FFD700', '#f3aaf5', '#fcfb68']
  519. // var colors2 = ['#6A5ACD', '#3D9140', '#ED9121', '#DAA569', '#A066D3', '#E3CF57'];
  520. // option = {
  521. // color: colors,
  522. // tooltip: {
  523. // trigger: 'axis',
  524. // axisPointer: { type: 'shadow' },
  525. // formatter: function (params) {
  526. // var showHtm = "";
  527. // showHtm = params[0].name + "月:" + '<br>' +
  528. // params[0].seriesName + ':' + params[0].data + "%" + '<br>' +
  529. // params[2].seriesName + ':' + params[2].data + "%";
  530. // return showHtm;
  531. // }
  532. // },
  533. // grid: {
  534. // "top": "15",
  535. // "right": "20",
  536. // "bottom": "20",
  537. // "left": "40",
  538. // },
  539. // legend: {
  540. // show: false,
  541. // },
  542. // "xAxis": [
  543. // {
  544. // data: MonthArray,
  545. // axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.9)", } },
  546. // axisTick: { show: true, },
  547. // axisLabel: {
  548. // textStyle: {
  549. // show: true,
  550. // //fontSize: 9,
  551. // color: "rgba(255,255,255,.9)",
  552. // },
  553. // },
  554. // },
  555. // ],
  556. // "yAxis": [
  557. // {
  558. // max: 100,
  559. // "type": "value",
  560. // axisTick: {
  561. // show: true,
  562. // lineStyle: {
  563. // show: true,
  564. // color: "rgba(255,255,255,.9)",
  565. // },
  566. // },
  567. // splitLine: { show: false, },
  568. // axisLine: {
  569. // show: true,
  570. // lineStyle: {
  571. // show: true,
  572. // //fontSize: 9,
  573. // color: "rgba(255,255,255,.9)",
  574. // },
  575. // },
  576. // axisLabel: {
  577. // show: true,
  578. // color: "rgba(255,255,255,.9)"
  579. // },
  580. // axisLine: {
  581. // show: true,
  582. // lineStyle: {
  583. // show: true,
  584. // color: "rgba(255,255,255,.9)",
  585. // },
  586. // },
  587. // }
  588. // ],
  589. // "series": [
  590. // {
  591. // "name": "合格率",
  592. // "type": "bar",
  593. // "data": MonthPercent,
  594. // barWidth: _BarWidth,
  595. // "itemStyle": {
  596. // "normal": {
  597. // barBorderRadius: _barBorderRadius_M,
  598. // //color: function (params)
  599. // //{
  600. // // return colors[params.dataIndex];
  601. // //},
  602. // color: function (params) {
  603. // return new echarts.graphic.LinearGradient(
  604. // 0,
  605. // 0,
  606. // 0,
  607. // 1,
  608. // [
  609. // { offset: 0, color: colors[params.dataIndex] },
  610. // { offset: 1, color: colors2[params.dataIndex] }
  611. // ]
  612. // )
  613. // },
  614. // barBorderRadius: [3, 3, 3, 3],
  615. // }
  616. // },
  617. // animation: false,
  618. // barGap: '-100%',
  619. // barCategoryGap: '40%',
  620. // label: {
  621. // show: true,
  622. // formatter: '{c}%',
  623. // },
  624. // }
  625. // ,
  626. // {
  627. // "name": "合格率",
  628. // "type": "line",
  629. // "data": MonthPercent,
  630. // barWidth: _BarWidth,
  631. // "itemStyle": {
  632. // "normal": {
  633. // color: "#96aef1",
  634. // }
  635. // },
  636. // label: {
  637. // show: false,
  638. // //position: 'outside',
  639. // formatter: '{c}%',
  640. // },
  641. // }
  642. // ,
  643. // {
  644. // "name": "标准值",
  645. // "type": "line",
  646. // "data": MonthPercent_BZ,
  647. // "itemStyle": {
  648. // "normal": {
  649. // }
  650. // },
  651. // label: {
  652. // show: false,
  653. // //position: 'outside',
  654. // formatter: '{c}%',
  655. // }
  656. // },
  657. // ]
  658. // };
  659. // myChart.setOption(option);
  660. // }
  661. // else {
  662. // return null;
  663. // }
  664. // },
  665. // error: function (aa) {
  666. // return null;
  667. // }
  668. // });
  669. //}
  670. //区域一
  671. function GetArea1() {
  672. $.ajax({
  673. url: "/SRM/WatchPanel/GetAreal1",
  674. dataType: "json",
  675. async: false,
  676. success: function (data) {
  677. if (data != false && data != null) {
  678. //月度生产 月度发车 上月实际生产 月度实际发车 上月完成数量 上上月完成数量
  679. $("#mothPlan").html(data[0].月度生产);
  680. $("#motnSales").html(data[0].月度发车);
  681. $("#lastMothSales").html(data[0].上月度发车);
  682. $("#yearSales").html(data[0].年度发车);
  683. } else {
  684. $("#" + marqueeID).html("");
  685. }
  686. },
  687. error: function (aa) {
  688. }
  689. });
  690. }
  691. function GetArea3() {
  692. // 基于准备好的dom,初始化echarts实例
  693. //var MonthArray = new Array();
  694. //var MonthPercent = new Array();
  695. //var MonthPercent_BZ = new Array();
  696. $.ajax({
  697. url: "/SRM/WatchPanel/GetOutput?XX=XX&" + Math.random(),
  698. dataType: "json",
  699. async: false,
  700. success: function (data) {
  701. console.log(data);
  702. if (data != false && data != null && data.length > 0) {
  703. var value = 0;
  704. var value1 = 0;
  705. var value2 = 0;
  706. var value3 = 0;
  707. var value4 = 0;
  708. var value5 = 0;
  709. var value6 = 0;
  710. var value7 = 0;
  711. for (var i = 0; i < data.length; i++) {
  712. value = data[i].上月度生产;//前月改本月
  713. value1 = data[i].上月完成;
  714. value2 = data[i].前月度生产;
  715. value3 = data[i].前月完成;
  716. value4 = data[i].上月比;
  717. value5 = data[i].前月比;
  718. value6 = data[0].上月;
  719. value7 = data[0].前月;
  720. }
  721. $("#div3-C1-C1").html(value7 + "月完成率");
  722. $("#div3-C2-C1").html(value6 + "月完成率");
  723. $("#div3-C1-C2-div1").html(value3);
  724. $("#lastMothPlan").html(value3);
  725. $("#yearProduct").html(data[0].年度生产);
  726. $("#div3-C1-C2-div2").html(value2);
  727. $("#div3-C2-C2-div1").html(value1);
  728. $("#div3-C2-C2-div2").html(value);
  729. //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
  730. var data = [value5, value5, value5];
  731. var option3 = {
  732. title: [
  733. {
  734. text: value7 + '月完成率',
  735. x: '22%',
  736. y: '90%',
  737. textStyle: {
  738. fontSize: 14,
  739. fontWeight: '100',
  740. color: '#5dc3ea',
  741. lineHeight: 16,
  742. textAlign: 'center',
  743. },
  744. },
  745. {
  746. text: value6 + '月完成率',
  747. x: '76%',
  748. y: '90%',
  749. textStyle: {
  750. fontSize: 14,
  751. fontWeight: '100',
  752. color: '#5dc3ea',
  753. lineHeight: 16,
  754. textAlign: 'center',
  755. },
  756. },
  757. ],
  758. series: [
  759. {
  760. type: 'liquidFill',
  761. radius: '85%',
  762. center: ['30%', '48%'],
  763. color: [
  764. {
  765. type: 'linear',
  766. x: 0,
  767. y: 0,
  768. x2: 0,
  769. y2: 1,
  770. colorStops: [
  771. {
  772. offset: 0,
  773. color: '#446bf5',
  774. },
  775. {
  776. offset: 1,
  777. color: '#0000FF',
  778. },
  779. ],
  780. globalCoord: false,
  781. },
  782. ],
  783. data: [value5, value5, value5], // data个数代表波浪数
  784. backgroundStyle: {
  785. borderWidth: 1,
  786. color: 'RGBA(51, 66, 127, 0.7)',
  787. },
  788. label: {
  789. normal: {
  790. textStyle: {
  791. fontSize: 14,
  792. color: '#fff',
  793. },
  794. },
  795. },
  796. outline: {
  797. // show: false
  798. borderDistance: 0,
  799. itemStyle: {
  800. borderWidth: 6,
  801. borderColor: '#0000FF',
  802. },
  803. },
  804. },
  805. { //第二个球的填充
  806. type: 'liquidFill',
  807. radius: '85%',
  808. center: ['84%', '45%'],
  809. color: [
  810. {
  811. type: 'linear',
  812. x: 0,
  813. y: 0,
  814. x2: 0,
  815. y2: 1,
  816. colorStops: [
  817. {
  818. offset: 0,
  819. color: '#2aa1e3',
  820. },
  821. {
  822. offset: 1,
  823. color: '#08bbc9',
  824. },
  825. ],
  826. globalCoord: false,
  827. },
  828. ],
  829. data: [value4, value4, value4], // data个数代表波浪数
  830. backgroundStyle: {
  831. borderWidth: 1,
  832. color: 'RGBA(51, 66, 127, 0.7)',
  833. },
  834. label: {
  835. normal: {
  836. textStyle: {
  837. fontSize: 28,
  838. color: '#fff',
  839. },
  840. },
  841. },
  842. outline: {
  843. // show: false
  844. borderDistance: 0,
  845. itemStyle: {
  846. borderWidth: 6,
  847. borderColor: '#08bbc9',
  848. },
  849. },
  850. },
  851. ],
  852. };
  853. myChartArea3.setOption(option3);
  854. }
  855. else {
  856. return null;
  857. }
  858. },
  859. error: function (aa) {
  860. return null;
  861. }
  862. });
  863. }
  864. //function GetArea3() {
  865. // // 基于准备好的dom,初始化echarts实例
  866. // //var MonthArray = new Array();
  867. // //var MonthPercent = new Array();
  868. // //var MonthPercent_BZ = new Array();
  869. // $.ajax({
  870. // url: "/SRM/WatchPanel/GetOutput?XX=XX&" + Math.random(),
  871. // dataType: "json",
  872. // async: false,
  873. // success: function (data) {
  874. // if (data != false && data != null && data.length > 0) {
  875. // var value = 0;
  876. // var value1 = 0;
  877. // var value2 = 0;
  878. // var value3 = 0;
  879. // var value4 = 0;
  880. // var value5 = 0;
  881. // for (var i = 0; i < data.length; i++) {
  882. // value = data[i].生产1;
  883. // value1 = data[i].计划1;
  884. // value2 = data[i].生产2;
  885. // value3 = data[i].计划2;
  886. // value4 = data[i].月份1;
  887. // value5 = data[i].月份2;
  888. // };
  889. // let option3 = {
  890. // series: [
  891. // {
  892. // name: value4+'月计划量',
  893. // type:'pie',
  894. // data: [
  895. // { value: value, name: '完成率' },
  896. // { value: value1, name: '计划完成率' }
  897. // ],
  898. // label: {
  899. // formatter: '1023010'
  900. // },
  901. // emphasis: {
  902. // label: {
  903. // show: true,
  904. // fontSize: '20',
  905. // fontWeight: 'bold'
  906. // }
  907. // }
  908. // }
  909. // ]
  910. // };
  911. // myChartArea3.setOption(option3);
  912. // }
  913. // else {
  914. // return null;
  915. // }
  916. // },
  917. // error: function (aa) {
  918. // return null;
  919. // }
  920. // });
  921. //}
  922. //区域四
  923. function GetArea4() {
  924. // 基于准备好的dom,初始化echarts实例
  925. var MonthArray = new Array();
  926. var MonthNum = new Array();
  927. var MonthPercent_BZ = new Array();
  928. $.ajax({
  929. url: "/SRM/WatchPanel/monthOutput?XX=XX&" + Math.random(),
  930. dataType: "json",
  931. async: false,
  932. success: function (data) {
  933. if (data != false && data != null && data.length > 0) {
  934. console.log(data);
  935. for (var i = 0; i < data.length; i++) {
  936. //console.log(i);
  937. MonthArray.push(data[i].Mont);
  938. MonthNum.push(data[i].num);
  939. }
  940. //console.log(MonthArray);
  941. //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
  942. let option4 = {
  943. xAxis: {
  944. type: 'category',
  945. name: '日期',
  946. namelocation: 'end',
  947. nameTextStyle: {
  948. color: "rgba(28, 231, 224, 1)"
  949. },
  950. axisLine: {
  951. lineStyle: {
  952. color: "rgba(28, 231, 224, 1)" // 设置X轴颜色为红色
  953. }
  954. },
  955. data: MonthArray
  956. },
  957. yAxis: {
  958. type: 'value',
  959. name: '完成量',
  960. namelocation: 'top',
  961. nameTextStyle: {
  962. color: "rgba(28, 231, 224, 1)"
  963. },
  964. axisLine: {
  965. lineStyle: {
  966. color: "rgba(28, 231, 224, 1)" // 设置X轴颜色为红色
  967. }
  968. },
  969. max: 20
  970. },
  971. series: [{
  972. data: MonthNum,
  973. type: 'line',
  974. lineStyle: {
  975. color: 'skyblue',
  976. width: 3 // 设置线条宽度为2
  977. },
  978. areaStyle: {
  979. color: 'rgba(240, 240, 240, 0.3)' // 设置曲线下部区域为30%透明度的白灰色
  980. },
  981. markPoint: {
  982. data: [
  983. { type: 'max', name: '最大值' },
  984. { type: 'min', name: '最小值' }
  985. ]
  986. },
  987. itemStyle: {
  988. color: 'skyblue'
  989. },
  990. animation: true // 开启动画效果
  991. }]
  992. };
  993. myChart4.setOption(option4);
  994. }
  995. else {
  996. return null;
  997. }
  998. },
  999. error: function (aa) {
  1000. return null;
  1001. }
  1002. });
  1003. }
  1004. function GetZhiXing_MO(marqueeID, ItemNumber) {
  1005. $.ajax({
  1006. url: "/SRM/WatchPanel/GetZhiXing_MO?ItemNumber=" + ItemNumber + "&" + Math.random(),
  1007. dataType: "json",
  1008. async: false,
  1009. success: function (data) {
  1010. if (data != false && data != null && data.length > 0) {
  1011. //生产订单 产品名称 计划数量 完成数量 计划完工日期 生产进度
  1012. var html = "";
  1013. for (var i = 0; i < data.length; i++) {
  1014. html += ' <ul class="ul_con"> ';
  1015. if (ItemNumber == "30")
  1016. html += ' <li >' + data[i].AB面 + '</li> ';
  1017. html += ' <li >' + data[i].生产订单 + '</li> <li >' + data[i].产品名称 + '</li>';
  1018. html += ' <li >' + data[i].计划数量 + '</li> <li >' + data[i].完成数量 + '</li>';
  1019. html += ' <li >' + data[i].计划完工日期 + '</li> <li >' + data[i].生产进度 + '</li> </ul> ';
  1020. }
  1021. html += "</ul>";
  1022. $("#" + marqueeID).html(html);
  1023. } else {
  1024. $("#" + marqueeID).html("");
  1025. }
  1026. },
  1027. error: function (aa) {
  1028. }
  1029. });
  1030. }
  1031. function GetArea2(marqueeID, ItemNumber) {
  1032. $.ajax({
  1033. url: "/SRM/WatchPanel/GetProductProgress?ItemNumber=" + ItemNumber + "&" + Math.random(),
  1034. dataType: "json",
  1035. async: false,
  1036. success: function (data) {
  1037. if (data != false && data != null) {
  1038. var html = "";
  1039. for (var i = 0; i < data.length; i++) {
  1040. html += '<ul class="ul_con">';
  1041. html += '<li>' + data[i].序号 + '</li>';
  1042. html += '<li>' + data[i].销售车辆号 + '</li><li>' + data[i].产品名称 + '</li><li>' + data[i].用户单位 + '</li>';
  1043. html += '<li>' + data[i].客户交货期 + '</li><li>' + data[i].生产状态 + '</li>';
  1044. html += '<li>' + data[i].进度 + '</li></ul>';
  1045. }
  1046. $(".ul_listInCust").css("animation-duration", data.length * 1.3 + "s");
  1047. $("#" + marqueeID).html(html);
  1048. // Set background color of odd-indexed ul elements to black
  1049. $("#" + marqueeID + " ul:nth-child(odd)").css("background-color", "rgba(0, 1, 0, 0.1)");
  1050. } else {
  1051. $("#" + marqueeID).html("");
  1052. }
  1053. },
  1054. error: function (aa) {
  1055. // Handle error
  1056. }
  1057. });
  1058. }
  1059. function GetZhiXing_RCVUnInWare() {
  1060. $.ajax({
  1061. url: "/SRM/WatchPanel/GetZhiXing_RCVUnInWare?XX=XX&" + Math.random(),
  1062. dataType: "json",
  1063. async: false,
  1064. success: function (data) {
  1065. if (data != false && data != null && data.length > 0) {
  1066. var html = "";
  1067. for (var i = 0; i < data.length; i++) {
  1068. html += ' <ul class="ul_con"> <li >' + data[i].LOTNO + '</li> <li >' +
  1069. data[i].送货单号 + '</li>';
  1070. html += ' <li >' + data[i].采购订单号 + '</li> <li >' + data[i].物料编码 + '</li>';
  1071. html += ' <li >' + data[i].物料名称 + '</li> <li >' + data[i].数量 + '</li> ';
  1072. html += ' <li >' + data[i].检验人 + '</li> </ul> ';
  1073. }
  1074. html += "</ul>";
  1075. $("#RCVUNIN").html(html);
  1076. }
  1077. else {
  1078. $("#RCVUNIN").html("");
  1079. }
  1080. },
  1081. error: function (aa) {
  1082. }
  1083. });
  1084. }
  1085. </script>
  1086. </body>
  1087. </html>