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

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