修改ui
This commit is contained in:
		
							
								
								
									
										8
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										8
									
								
								.env.dev
									
									
									
									
									
								
							| @@ -1,8 +1,8 @@ | ||||
| ### | ||||
|  # @Author: zhp | ||||
|  # @Date: 2024-04-28 13:42:51 | ||||
|  # @LastEditTime: 2024-06-24 16:57:53 | ||||
|  # @LastEditors: DY | ||||
|  # @LastEditTime: 2024-07-25 14:11:43 | ||||
|  # @LastEditors: zhp | ||||
|  # @Description: | ||||
| ### | ||||
| # 开发环境配置 | ||||
| @@ -13,7 +13,7 @@ VUE_APP_TITLE = 发电玻璃智能管控平台 | ||||
|  | ||||
| # 芋道管理系统/开发环境 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.70:30307' | ||||
| VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | ||||
| # VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | ||||
| # 闫阳 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.81:48080' | ||||
| # 徐 | ||||
| @@ -21,7 +21,7 @@ VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | ||||
| # 郭 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.61:48080' | ||||
| # sara | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.63:48080' | ||||
| VUE_APP_BASE_API = 'http://192.168.1.63:8080' | ||||
| # 张一丁 | ||||
| # VUE_APP_BASE_API = 'http://192.168.4.139:48080' | ||||
| # 蔡 | ||||
|   | ||||
| @@ -1,14 +1,14 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-07-11 13:56:19 | ||||
|  * @LastEditTime: 2024-07-22 16:15:21 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="padding: 0 15px;" @click="toggleClick"> | ||||
|     <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" | ||||
|       width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' "> | ||||
|       width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255,.65)' : '' "> | ||||
|       <path | ||||
|         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> | ||||
|     </svg> | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| <template> | ||||
|   <div ref="navbar" class="navbar" | ||||
|     :style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''"> | ||||
|     :style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35);margin-left:20px' : 'margin-left:20px'"> | ||||
|     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" | ||||
|       @toggleClick="toggleSideBar" /> | ||||
|  | ||||
|   | ||||
| @@ -9,13 +9,9 @@ function __resizeHandler(entries) { | ||||
|           : entry.contentBoxSize; | ||||
|         this.chart_mixin_chartInstance.resize({ | ||||
|           // width: | ||||
|           //   contentBoxSize.inlineSize < this.MIN_WIDTH | ||||
|           //     ? this.MIN_WIDTH | ||||
|           //     : contentBoxSize.inlineSize, | ||||
|         // width: | ||||
|         //   entry.contentRect.width < this.MIN_WIDTH | ||||
|         //     ? this.MIN_WIDTH | ||||
|         //     : entry.contentRect.width, | ||||
|           // contentBoxSize.inlineSize < this.MIN_WIDTH | ||||
|           //   ? this.MIN_WIDTH | ||||
|           //   : contentBoxSize.inlineSize, | ||||
|           height: contentBoxSize.blockSize, | ||||
|         }); | ||||
|     } else { | ||||
|   | ||||
| @@ -551,15 +551,15 @@ function getFactoryTargetValueA(targetList, factoryId) { | ||||
|  */ | ||||
| function initA() { | ||||
|   const t_ = { | ||||
|     current: Array(7).fill(0), | ||||
|     previous: Array(7).fill(0), | ||||
|     current: Array(2).fill(0), | ||||
|     previous: Array(2).fill(0), | ||||
|   }; | ||||
|   // 芯片OEE | ||||
|   // 转化效率 | ||||
|   // 标准组件良率 | ||||
|   const stdRate = { | ||||
|     ...deepClone(t_), | ||||
|     target: Array(7).fill(0), | ||||
|     target: Array(2).fill(0), | ||||
|   }; | ||||
|   // 芯片良率 | ||||
|   const transformRate = deepClone(stdRate); | ||||
| @@ -579,8 +579,8 @@ function initA() { | ||||
|  */ | ||||
| function init() { | ||||
|   const t_ = { | ||||
|     current: Array(7).fill(0), | ||||
|     previous: Array(7).fill(0), | ||||
|     current: Array(2).fill(0), | ||||
|     previous: Array(2).fill(0), | ||||
|   }; | ||||
|   // 芯片投入 | ||||
|   const chipInvest = deepClone(t_); | ||||
| @@ -589,7 +589,7 @@ function init() { | ||||
|   // 芯片产出 | ||||
|   const chipOutput = { | ||||
|     ...deepClone(t_), | ||||
|     target: Array(7).fill(0), | ||||
|     target: Array(2).fill(0), | ||||
|   }; | ||||
|   // 标准组件产出 | ||||
|   const stdOutput = deepClone(chipOutput); | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-10 15:17:28 | ||||
|  * @LastEditTime: 2024-07-19 15:18:00 | ||||
|  * @LastEditTime: 2024-07-23 17:03:42 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -27,7 +27,7 @@ export default { | ||||
|   props: { | ||||
|     noScroll: { | ||||
|       type: Boolean, | ||||
|       default: false, | ||||
|       default: true, | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
| @@ -51,7 +51,7 @@ export default { | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar { | ||||
|   width: 80%; | ||||
|   width: 8px; | ||||
|   height: 8px; | ||||
| } | ||||
|  | ||||
|   | ||||
| @@ -79,7 +79,7 @@ export default { | ||||
|               // console.log(item.color, color); | ||||
|               res += | ||||
|                 "<br/>" + | ||||
|                 `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`; | ||||
|             } | ||||
|   | ||||
| @@ -1,3 +1,10 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-07-24 10:29:26 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|     filename: ChartContainer.vue | ||||
|     author: liubin | ||||
| @@ -19,7 +26,7 @@ export default { | ||||
|   props: { | ||||
|     noScroll: { | ||||
|       type: Boolean, | ||||
|       default: false, | ||||
|       default: true, | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|   | ||||
| @@ -154,14 +154,15 @@ export default { | ||||
| } | ||||
|  | ||||
| .page-title { | ||||
|   flex: 1 1 auto; | ||||
|   flex: 1; | ||||
|   font-size: 40px; | ||||
|   line-height: 70px; | ||||
|   justify-content: center; | ||||
|   letter-spacing: 5px; | ||||
|   font-family: 优设标题黑; | ||||
|   color: #6db6ff; | ||||
|   text-align: center; | ||||
|   user-select: none; | ||||
|   background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat; | ||||
|   background: url(../../../assets/images/homeindex/page-title-two.png) center no-repeat; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-09 15:07:50 | ||||
|  * @LastEditTime: 2024-07-09 15:41:38 | ||||
|  * @LastEditTime: 2024-07-22 13:41:40 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -80,6 +80,7 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
| @@ -87,29 +88,29 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|   border-right: .13vw solid; | ||||
|     // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     //   #024798 20%, | ||||
|     //   transparent 90%) 1; | ||||
|     border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|     box-sizing: border-box; | ||||
|     backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       position: absolute; | ||||
|       display: inline-block; | ||||
|       height: 92%; | ||||
|       width: 0.13vw; | ||||
|       border-radius: 2px; | ||||
|       top: 0%; | ||||
|       left: 0; | ||||
|       background: radial-gradient(circle at center, | ||||
|           #1481fd 2%, | ||||
|           #024798 90%, | ||||
|           transparent); | ||||
|       z-index: 1; | ||||
|     } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
| @@ -120,7 +121,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%); | ||||
|     background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -74,6 +74,7 @@ export default { | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
|  | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
| @@ -81,10 +82,12 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   border-right: .13vw solid; | ||||
|   // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|   //   #024798 20%, | ||||
|   //   transparent 90%) 1; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|   box-sizing: border-box; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
| @@ -92,16 +95,14 @@ export default { | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     width: 0.13vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     background: radial-gradient(circle at center, | ||||
|         #1481fd 2%, | ||||
|         #024798 90%, | ||||
|         transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
| @@ -114,7 +115,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     right: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-09 15:15:00 | ||||
|  * @LastEditTime: 2024-07-19 16:11:37 | ||||
|  * @LastEditTime: 2024-07-22 13:42:08 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -81,10 +81,12 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 5%, | ||||
|         #024798 10%, | ||||
|         transparent 90%) 1; | ||||
| border-right: .13vw solid; | ||||
|   // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|   //   #024798 20%, | ||||
|   //   transparent 90%) 1; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|   box-sizing: border-box; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
| @@ -92,16 +94,14 @@ export default { | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     width: 0.13vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 5%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     left: 0; | ||||
|     background: radial-gradient(circle at center, | ||||
|         #1481fd 2%, | ||||
|         #024798 90%, | ||||
|         transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
| @@ -114,7 +114,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     left: 10%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%); | ||||
|     background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -82,29 +82,29 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 5%, | ||||
|     #024798 10%, | ||||
|     transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|   border-right: .13vw solid; | ||||
|     // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     //   #024798 20%, | ||||
|     //   transparent 90%) 1; | ||||
|     border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|     box-sizing: border-box; | ||||
|     backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       position: absolute; | ||||
|       display: inline-block; | ||||
|       height: 92%; | ||||
|       width: 0.13vw; | ||||
|       border-radius: 2px; | ||||
|       top: 0%; | ||||
|       left: 0; | ||||
|       background: radial-gradient(circle at center, | ||||
|           #1481fd 2%, | ||||
|           #024798 90%, | ||||
|           transparent); | ||||
|       z-index: 1; | ||||
|     } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
| @@ -115,7 +115,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     right: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-23 15:49:14 | ||||
|  * @LastEditTime: 2024-07-19 16:08:27 | ||||
|  * @LastEditTime: 2024-07-22 14:05:00 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -80,7 +80,7 @@ export default { | ||||
|               // console.log(item.color, color); | ||||
|               res += | ||||
|                 "<br/>" + | ||||
|                 `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`; | ||||
|             } | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:43:51 | ||||
|  * @LastEditTime: 2024-07-19 16:11:59 | ||||
|  * @LastEditTime: 2024-07-22 13:36:30 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -81,28 +81,28 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|   border-right: .13vw solid; | ||||
|     // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     //   #024798 20%, | ||||
|     //   transparent 90%) 1; | ||||
|     border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|     box-sizing: border-box; | ||||
|     backdrop-filter: blur(4px); | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       position: absolute; | ||||
|       display: inline-block; | ||||
|       height: 92%; | ||||
|       width: 0.13vw; | ||||
|       border-radius: 2px; | ||||
|       top: 0%; | ||||
|       left: 0; | ||||
|       background: radial-gradient(circle at center, | ||||
|           #1481fd 2%, | ||||
|           #024798 90%, | ||||
|           transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|       z-index: 1; | ||||
|     } | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
| @@ -112,7 +112,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     left: 7%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%); | ||||
|     background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -82,10 +82,12 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     #024798 20%, | ||||
|     transparent 90%) 1; | ||||
|   border-right: .13vw solid; | ||||
|   // padding-right: .2vw; | ||||
|   box-sizing: border-box;  // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|   //   #024798 20%, | ||||
|   //   transparent 90%) 1; | ||||
|   border-image: linear-gradient(to bottom,transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
| @@ -93,14 +95,14 @@ export default { | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     width: 0.13vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       #1481fd 2%, | ||||
|       #024798 90%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
| @@ -115,7 +117,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     right: 1%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:48:37 | ||||
|  * @LastEditTime: 2024-07-19 16:14:07 | ||||
|  * @LastEditTime: 2024-07-22 13:37:48 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -108,38 +108,40 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|           #024798 20%, | ||||
|           transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|   border-right: .13vw solid; | ||||
|     // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     //   #024798 20%, | ||||
|     //   transparent 90%) 1; | ||||
|     border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|     box-sizing: border-box; | ||||
|     backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       position: absolute; | ||||
|       display: inline-block; | ||||
|       height: 92%; | ||||
|       width: 0.13vw; | ||||
|       border-radius: 2px; | ||||
|       top: 0%; | ||||
|       left: 0; | ||||
|       background: radial-gradient(circle at center, | ||||
|           #1481fd 2%, | ||||
|           #024798 90%, | ||||
|           transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|       z-index: 1; | ||||
|     } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 60%; | ||||
|     width: 95%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 6%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, #024798, transparent); | ||||
|     background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -177,6 +177,11 @@ function getTemplate(period, dataList, than) { | ||||
|   const year = new Date().getFullYear(); | ||||
|   if (period === '日' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year - 1}年${yesterday}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -186,14 +191,15 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${dayBeYes}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -203,14 +209,15 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year-1}年本周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -220,14 +227,15 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `上周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -237,14 +245,15 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${month}月目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year-1}年${month}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -254,31 +263,33 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${month}目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${lastMonth}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${month}月`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${month}目标`, | ||||
|         name: `${month}月目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${lastMonth}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year}目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year - 1}年`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -288,11 +299,7 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year}目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } | ||||
|   return items | ||||
|   | ||||
| @@ -168,23 +168,29 @@ function getTemplate(period, dataList,than) { | ||||
|   const year = new Date().getFullYear(); | ||||
|   if (period === '日' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2].splice(0,2) : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year - 1}年${yesterday}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|         data: dataList ? dataList[0].splice(0, 2) : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         data: dataList ? dataList[1].splice(0, 2) : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${dayBeYes}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -194,16 +200,17 @@ function getTemplate(period, dataList,than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年本周`, | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year - 1}年本周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -211,14 +218,15 @@ function getTemplate(period, dataList,than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `上周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -228,16 +236,17 @@ function getTemplate(period, dataList,than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年${month}月`, | ||||
|         name: `${month}月目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year - 1}年${month}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -245,31 +254,34 @@ function getTemplate(period, dataList,than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${month}目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${lastMonth}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|         name: `${month}月目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${month}月`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|       { | ||||
|         name: `${month}目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|         name: `${lastMonth}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } else { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year}目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year - 1}年`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
| @@ -279,11 +291,7 @@ function getTemplate(period, dataList,than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${year}目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|  | ||||
|     ]; | ||||
|   } | ||||
|   return items | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 13:22:43 | ||||
|  * @LastEditTime: 2024-07-19 16:10:10 | ||||
|  * @LastEditTime: 2024-07-23 15:52:25 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -56,7 +56,7 @@ export default { | ||||
|       actualOptions: null, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "5%", | ||||
|           left: "6%", | ||||
|           right: "0%", | ||||
|           bottom: "3%", | ||||
|           top: "15%", | ||||
| @@ -81,13 +81,13 @@ export default { | ||||
|               res += | ||||
|                 "<br/>" + | ||||
|                 `${params[i].seriesType === "line" | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span> | ||||
|                 <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span> | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span> | ||||
|                 <span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>` | ||||
|                   : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>` | ||||
|                 }` + | ||||
|                 `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`; | ||||
|               `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
| @@ -118,6 +118,7 @@ export default { | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -139,6 +140,41 @@ export default { | ||||
|           }, | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "", // "2024年目标值", | ||||
|             type: "line", | ||||
|             lineStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             // areaStyle: { | ||||
|             //   color: { | ||||
|             //     type: "linear", | ||||
|             //     x: 0, | ||||
|             //     y: 0, | ||||
|             //     x2: 0, | ||||
|             //     y2: 1, | ||||
|             //     colorStops: [ | ||||
|             //       { | ||||
|             //         offset: 0, | ||||
|             //         color: "#f3c000", // 0% 处的颜色 | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 0.55, | ||||
|             //         color: "#f3c00033", | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 1, | ||||
|             //         color: "transparent", // 100% 处的颜色 | ||||
|             //       }, | ||||
|             //     ], | ||||
|             //     global: false, // 缺省为 false | ||||
|             //   }, | ||||
|             // }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
| @@ -205,42 +241,7 @@ export default { | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[1].data, | ||||
|           }, | ||||
|           { | ||||
|             name: "", // "2024年目标值", | ||||
|             type: "line", | ||||
|             lineStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             // areaStyle: { | ||||
|             //   color: { | ||||
|             //     type: "linear", | ||||
|             //     x: 0, | ||||
|             //     y: 0, | ||||
|             //     x2: 0, | ||||
|             //     y2: 1, | ||||
|             //     colorStops: [ | ||||
|             //       { | ||||
|             //         offset: 0, | ||||
|             //         color: "#f3c000", // 0% 处的颜色 | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 0.55, | ||||
|             //         color: "#f3c00033", | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 1, | ||||
|             //         color: "transparent", // 100% 处的颜色 | ||||
|             //       }, | ||||
|             //     ], | ||||
|             //     global: false, // 缺省为 false | ||||
|             //   }, | ||||
|             // }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|           } | ||||
|         ], | ||||
|       }, | ||||
|     }; | ||||
| @@ -366,34 +367,34 @@ export default { | ||||
|      .legend-item:nth-child(1) { | ||||
|        margin-left: 1vw; | ||||
|      } | ||||
|  .legend-item:nth-child(1):before { | ||||
|    // width: 12px; | ||||
|    // height: 2px; | ||||
|    width: 1vw; | ||||
|    height: 0.1064vw; | ||||
|    background-color: #f3c000; | ||||
|    position: absolute; | ||||
|    top: 50%; | ||||
|    // left: -16px; | ||||
|    left: -1.3vw; | ||||
|    transform: translateY(-50%); | ||||
|  } | ||||
|     .legend-item:nth-child(1):before { | ||||
|       // width: 12px; | ||||
|       // height: 2px; | ||||
|       width: 1vw; | ||||
|       height: 0.1064vw; | ||||
|       background-color: #f3c000; | ||||
|       position: absolute; | ||||
|       top: 50%; | ||||
|       // left: -16px; | ||||
|       left: -1.2vw; | ||||
|       transform: translateY(-50%); | ||||
|     } | ||||
|  | ||||
|  .legend-item:nth-child(1):after { | ||||
|    background-color: #f3c000; | ||||
|    content: ""; | ||||
|    display: inline-block; | ||||
|    position: absolute; | ||||
|    // width: 6px; | ||||
|    // height: 6px; | ||||
|    width: 0.3191vw; | ||||
|    height: 0.3191vw; | ||||
|    border-radius: 100%; | ||||
|    top: 50%; | ||||
|    left: -1.13vw; | ||||
|    // left: -16px; | ||||
|    transform: translateY(-50%) translateX(50%); | ||||
|  } | ||||
|     .legend-item:nth-child(1):after { | ||||
|       background-color: #f3c000; | ||||
|       content: ""; | ||||
|       display: inline-block; | ||||
|       position: absolute; | ||||
|       // width: 6px; | ||||
|       // height: 6px; | ||||
|       width: 0.4vw; | ||||
|       height: 0.4vw; | ||||
|       border-radius: 100%; | ||||
|       top: 50%; | ||||
|       left: -1.1vw; | ||||
|       // left: -16px; | ||||
|       transform: translateY(-50%) translateX(50%); | ||||
|     } | ||||
|   .legend-item:nth-child(2):before { | ||||
|     background-color: #12f7f1; | ||||
|   } | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-23 15:50:44 | ||||
|  * @LastEditTime: 2024-07-19 16:10:19 | ||||
|  * @LastEditTime: 2024-07-23 15:52:09 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -56,7 +56,7 @@ export default { | ||||
|       actualOptions: null, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "5%", | ||||
|           left: "6%", | ||||
|           right: "0%", | ||||
|           bottom: "3%", | ||||
|           top: "15%", | ||||
| @@ -81,13 +81,13 @@ export default { | ||||
|               res += | ||||
|                 "<br/>" + | ||||
|                 `${params[i].seriesType === "line" | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span> | ||||
|                 <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span> | ||||
|                   ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span> | ||||
|                 <span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>` | ||||
|                 : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> | ||||
|                   : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>` | ||||
|                 }` + | ||||
|                 `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`; | ||||
|               `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
| @@ -118,6 +118,7 @@ export default { | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -139,6 +140,41 @@ export default { | ||||
|           }, | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "", // "2024年目标值", | ||||
|             type: "line", | ||||
|             lineStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             // areaStyle: { | ||||
|             //   color: { | ||||
|             //     type: "linear", | ||||
|             //     x: 0, | ||||
|             //     y: 0, | ||||
|             //     x2: 0, | ||||
|             //     y2: 1, | ||||
|             //     colorStops: [ | ||||
|             //       { | ||||
|             //         offset: 0, | ||||
|             //         color: "#f3c000", // 0% 处的颜色 | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 0.55, | ||||
|             //         color: "#f3c00033", | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 1, | ||||
|             //         color: "transparent", // 100% 处的颜色 | ||||
|             //       }, | ||||
|             //     ], | ||||
|             //     global: false, // 缺省为 false | ||||
|             //   }, | ||||
|             // }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
| @@ -206,41 +242,7 @@ export default { | ||||
|             }, | ||||
|             data: [], // this.series[1].data, | ||||
|           }, | ||||
|           { | ||||
|             name: "", // "2024年目标值", | ||||
|             type: "line", | ||||
|             lineStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             // areaStyle: { | ||||
|             //   color: { | ||||
|             //     type: "linear", | ||||
|             //     x: 0, | ||||
|             //     y: 0, | ||||
|             //     x2: 0, | ||||
|             //     y2: 1, | ||||
|             //     colorStops: [ | ||||
|             //       { | ||||
|             //         offset: 0, | ||||
|             //         color: "#f3c000", // 0% 处的颜色 | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 0.55, | ||||
|             //         color: "#f3c00033", | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 1, | ||||
|             //         color: "transparent", // 100% 处的颜色 | ||||
|             //       }, | ||||
|             //     ], | ||||
|             //     global: false, // 缺省为 false | ||||
|             //   }, | ||||
|             // }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|  | ||||
|         ], | ||||
|       }, | ||||
|     }; | ||||
| @@ -372,33 +374,33 @@ export default { | ||||
|   .legend-item:nth-child(3):before { | ||||
|     background-color: #58adfa; | ||||
|   } | ||||
|  .legend-item:nth-child(1):before { | ||||
|    // width: 12px; | ||||
|    // height: 2px; | ||||
|    width: 1vw; | ||||
|    height: 0.1064vw; | ||||
|    background-color: #f3c000; | ||||
|    position: absolute; | ||||
|    top: 50%; | ||||
|    // left: -16px; | ||||
|    left: -1.3vw; | ||||
|    transform: translateY(-50%); | ||||
|  } | ||||
|     .legend-item:nth-child(1):before { | ||||
|       // width: 12px; | ||||
|       // height: 2px; | ||||
|       width: 1vw; | ||||
|       height: 0.1064vw; | ||||
|       background-color: #f3c000; | ||||
|       position: absolute; | ||||
|       top: 50%; | ||||
|       // left: -16px; | ||||
|       left: -1.2vw; | ||||
|       transform: translateY(-50%); | ||||
|     } | ||||
|  | ||||
|  .legend-item:nth-child(1):after { | ||||
|    background-color: #f3c000; | ||||
|    content: ""; | ||||
|    display: inline-block; | ||||
|    position: absolute; | ||||
|    // width: 6px; | ||||
|    // height: 6px; | ||||
|    width: 0.3191vw; | ||||
|    height: 0.3191vw; | ||||
|    border-radius: 100%; | ||||
|    top: 50%; | ||||
|    left: -1.13vw; | ||||
|    // left: -16px; | ||||
|    transform: translateY(-50%) translateX(50%); | ||||
|  } | ||||
|     .legend-item:nth-child(1):after { | ||||
|       background-color: #f3c000; | ||||
|       content: ""; | ||||
|       display: inline-block; | ||||
|       position: absolute; | ||||
|       // width: 6px; | ||||
|       // height: 6px; | ||||
|       width: 0.4vw; | ||||
|       height: 0.4vw; | ||||
|       border-radius: 100%; | ||||
|       top: 50%; | ||||
|       left: -1.1vw; | ||||
|       // left: -16px; | ||||
|       transform: translateY(-50%) translateX(50%); | ||||
|     } | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -152,10 +152,14 @@ export default { | ||||
|           年: `${year}良率`, | ||||
|         }[this.period]; | ||||
|       console.log(vt[0]); | ||||
|       let titleSize = this.fontSize(0.35) | ||||
|       let subtitleSize = this.fontSize(0.14) | ||||
|       const t = getOptions({ | ||||
|         // single, | ||||
|         color: this.color == 1 ? "#4CF0E8" : "#1065ff", | ||||
|         titleValue, | ||||
|         titleSize, | ||||
|         subtitleSize, | ||||
|         subtitle, | ||||
|         yesterday, | ||||
|         currentName: items[0].label, | ||||
| @@ -261,6 +265,12 @@ export default { | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|   fontSize(res){ | ||||
|     let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||||
|     if (!clientWidth) return; | ||||
|     let fontSize = 100 * (clientWidth / 1920); | ||||
|     return res * fontSize; | ||||
|   }, | ||||
|     formatNumber(num) { | ||||
|       console.log(num); | ||||
|       // 判断是否为整数 | ||||
| @@ -290,9 +300,9 @@ export default { | ||||
|     // justify-content: center; | ||||
|     gap: 3px; | ||||
|     backdrop-filter: blur(24px); | ||||
|   .cities { | ||||
|     height: 40px; | ||||
|   } | ||||
|   // .cities { | ||||
|   //   // height: 40px; | ||||
|   // } | ||||
|  | ||||
|     .chart { | ||||
|       // margin-left: 5%; | ||||
| @@ -300,12 +310,12 @@ export default { | ||||
|       flex: 1 1 auto; | ||||
|       padding: 0 20%; | ||||
|       /* margin: 10%; */ | ||||
|       height: 16vh; | ||||
|       height: 0; | ||||
|       /* min-width: 300px; */ | ||||
|       align-self: stretch; | ||||
|     } | ||||
|   .legend { | ||||
|     height: 80px; | ||||
|     // height: 80px; | ||||
|     display: flex; | ||||
|     color: #fff; | ||||
|     justify-content: flex-end; | ||||
|   | ||||
| @@ -73,7 +73,7 @@ export default { | ||||
|   &:before { | ||||
|     content: attr(data-title); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     color:rgba(223,241,254,.8); | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     font-size: 12px; | ||||
| @@ -82,7 +82,7 @@ export default { | ||||
|   &:after { | ||||
|     content: attr(data-rate); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     color: rgba(223, 241, 254, .8); | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     right: 0; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-27 09:12:54 | ||||
|  * @LastEditTime: 2024-07-09 15:02:46 | ||||
|  * @LastEditTime: 2024-07-22 17:03:48 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -60,6 +60,8 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
|  | ||||
| .progress-bar { | ||||
|   height: 10px; | ||||
|   background-color: #002f6b; | ||||
| @@ -70,7 +72,7 @@ export default { | ||||
|   &:before { | ||||
|     content: attr(data-title); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     color: rgba(223, 241, 254, .8); | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     font-size: 12px; | ||||
| @@ -79,7 +81,7 @@ export default { | ||||
|   &:after { | ||||
|     content: attr(data-rate); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     color: rgba(223, 241, 254, .8); | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     right: 0; | ||||
|   | ||||
| @@ -1,6 +1,8 @@ | ||||
|  export default ({ | ||||
|   titleValue, | ||||
|   subtitle, | ||||
|   titleSize, | ||||
|   subtitleSize, | ||||
|   previousSum, | ||||
|   currentSum, | ||||
|   targetSum, | ||||
| @@ -26,14 +28,15 @@ | ||||
|     left: "48%", | ||||
|     top: "middle", | ||||
|     textAlign: "center", | ||||
|     textVerticalAlign:'auto', | ||||
|     textStyle: { | ||||
|       fontWeight: 600, | ||||
|       fontSize: 36, | ||||
|        color: "rgba(223,241,254,.8)", | ||||
|       fontWeight: 400, | ||||
|       fontSize: titleSize, | ||||
|        color: "rgba(223,241,254,1)", | ||||
|     }, | ||||
|     subtext: `\u2002${yesterday + '日良率'}\u2002`, | ||||
|     subtextStyle: { | ||||
|       fontSize: 16, | ||||
|       fontSize: subtitleSize, | ||||
|       fontWeight: 100, | ||||
|       color: "rgba(255,255,255,.7)", | ||||
|       align: "right", | ||||
| @@ -44,8 +47,8 @@ | ||||
|     { | ||||
|       type: "pie", | ||||
|       name: "当前良率", | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["50%", "52%"], | ||||
|        radius: ["80%", "92%"], | ||||
|        center: ["50%", "50%"], | ||||
|       emptyCircleStyle: { | ||||
|         color: "#003982", | ||||
|       }, | ||||
| @@ -53,8 +56,8 @@ | ||||
|     // 数据 series | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["50%", "52%"], | ||||
|       radius: ["80%", "92%"], | ||||
|       center: ["50%", "50%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
| @@ -118,8 +121,8 @@ | ||||
|     // 数据 series2 - 2023累计 | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["55%", "70%"], | ||||
|       center: ["50%", "52%"], | ||||
|       radius: ["70%", "80%"], | ||||
|       center: ["50%", "50%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
|   | ||||
| @@ -28,7 +28,7 @@ | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/bipvProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| // import Energy from "./components/Energy.vue"; | ||||
|   | ||||
| @@ -28,7 +28,7 @@ | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/bipvProdMonitor"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| // import Energy from "./components/Energy.vue"; | ||||
|   | ||||
| @@ -56,7 +56,7 @@ export default { | ||||
|         color: ["#FFD160", "#2760FF", "#12FFF5"], | ||||
|         grid: { | ||||
|           left: "9%", | ||||
|           right: "3%", | ||||
|           right: "0%", | ||||
|           bottom: "15%", | ||||
|           top: "15%", | ||||
|         }, | ||||
| @@ -76,7 +76,7 @@ export default { | ||||
|               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||
|               // console.log(item.color, color); | ||||
|               res += | ||||
|                 `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` + | ||||
|                 `<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value  : 0}</span>`; | ||||
|             } | ||||
| @@ -143,7 +143,7 @@ export default { | ||||
|             }, | ||||
|             splitLine: { | ||||
|               lineStyle: { | ||||
|                 color: "#4561AE", | ||||
|                 color: "rgba(69,97,174,.4)", | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-30 08:58:39 | ||||
|  * @LastEditTime: 2024-07-18 16:48:10 | ||||
|  * @LastEditTime: 2024-07-25 09:54:21 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -56,11 +56,11 @@ export default { | ||||
|       actualOptions: null, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "8%", | ||||
|           right: "0%", | ||||
|           bottom: "3%", | ||||
|           left: "10%", | ||||
|           right: "3%", | ||||
|           bottom: "10%", | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|           // containLabel: true, | ||||
|         }, | ||||
|         // tooltip: { | ||||
|         //   trigger: "axis", | ||||
| @@ -106,7 +106,7 @@ export default { | ||||
|               // console.log(item.color, color); | ||||
|               res += | ||||
|                 "<br/>" + | ||||
|                 `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`; | ||||
|             } | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-30 09:00:01 | ||||
|  * @LastEditTime: 2024-05-30 09:50:02 | ||||
|  * @LastEditTime: 2024-07-24 10:31:52 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -19,7 +19,7 @@ export default { | ||||
|   props: { | ||||
|     noScroll: { | ||||
|       type: Boolean, | ||||
|       default: false, | ||||
|       default: true, | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|   | ||||
| @@ -105,7 +105,7 @@ export default { | ||||
|             }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || "" | ||||
|               }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || "" | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:1.2em' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || "" | ||||
|               }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || "" | ||||
|               }</span>`, | ||||
| @@ -117,8 +117,8 @@ export default { | ||||
|                 ? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%" | ||||
|                 : "0%" | ||||
|               }</span> | ||||
|             <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;"> | ||||
|             <svg xmlns="http://www.w3.org/200/svg" height="20" width="20"> | ||||
|             <div style="display:inline-block;height:20px;vertical-align:top;margin-top:3px;"> | ||||
|             <svg xmlns="http://www.w3.org/200/svg" height="18" width="18"> | ||||
|               <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/> | ||||
|               <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress | ||||
|                 ? this.prodOrder[i].productionProgress.toFixed(2) *100 * | ||||
| @@ -156,7 +156,6 @@ export default { | ||||
|           flex: 1; | ||||
|           display: flex; | ||||
|           flex-direction: column; | ||||
|  | ||||
|           // gap: 6px; | ||||
|           .chart-title { | ||||
|             margin-top: 5px; | ||||
| @@ -189,8 +188,9 @@ export default { | ||||
|               height: 1px; // display: inline-block; | ||||
|               border: 1px solid; | ||||
|               // display: inline-block; | ||||
|               border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2; | ||||
|               backdrop-filter: blur(3px); | ||||
|               // border-image: linear-gradient(to right, transparent 5%, rgba(95, 190, 249, 1) 20%, transparent 90%, )1; | ||||
|               border-image: linear-gradient(to right, transparent 10%, rgba(95, 190, 249, 1 )30%, transparent 90%,)1; | ||||
|               // backdrop-filter: blur(3px); | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|   | ||||
| @@ -28,8 +28,8 @@ | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|                 msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -38,8 +38,8 @@ | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|                 msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
| @@ -61,8 +61,8 @@ | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|                 msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -71,8 +71,8 @@ | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|                 msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
| @@ -94,8 +94,8 @@ | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|                 msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -104,8 +104,8 @@ | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|                 msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
| @@ -124,8 +124,8 @@ | ||||
|         </div> | ||||
|         <!-- <span class="line"></span> --> | ||||
|       </div> | ||||
|       <barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart" | ||||
|         style="height: 0;flex:1"> | ||||
|       <barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData" | ||||
|         ref="barChart" style="height: 0;flex:1"> | ||||
|       </barChartBase> | ||||
|     </div> | ||||
|   </div> | ||||
| @@ -222,7 +222,7 @@ export default { | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   .chart{ | ||||
|     flex: 1; | ||||
|     flex: 1.3; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     position: relative; | ||||
| @@ -360,7 +360,7 @@ export default { | ||||
|         } | ||||
|  | ||||
|         .fto-box { | ||||
|           flex: 1; | ||||
|           flex: .5; | ||||
|  | ||||
|           .type::before { | ||||
|             content: ""; | ||||
| @@ -379,15 +379,15 @@ export default { | ||||
|         } | ||||
|  | ||||
|         .std-box { | ||||
|           flex: 1.3; | ||||
|           flex: .6; | ||||
|         } | ||||
|  | ||||
|         .chip-box { | ||||
|           flex: 1.3; | ||||
|           flex: .6; | ||||
|         } | ||||
|  | ||||
|         .bipv-box { | ||||
|           flex: 1.3; | ||||
|           flex: .6; | ||||
|         } | ||||
|  | ||||
|         .std-box, | ||||
|   | ||||
							
								
								
									
										421
									
								
								src/views/copilot/factoryData/components/bipvProdMonitor.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										421
									
								
								src/views/copilot/factoryData/components/bipvProdMonitor.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,421 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-25 10:10:07 | ||||
|  * @LastEditTime: 2024-07-25 10:44:01 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div class="prod-monitor"> | ||||
|  | ||||
|     <div class="data"> | ||||
|       <div class="fto-box"> | ||||
|         <div class="icon"> | ||||
|           <img src="./../assets/images/fto.png" alt="" style="width: 2.1875vw; height: 2.2875vw" /> | ||||
|         </div> | ||||
|         <div class="middle-box"> | ||||
|           <span class="type">玻璃类型</span> | ||||
|           <span class="type-name">FTO</span> | ||||
|         </div> | ||||
|         <div class="right-box"> | ||||
|           <span class="type">投入数量</span> | ||||
|           <span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="std-box"> | ||||
|         <div class="icon"> | ||||
|           <img src="./../assets/images/std.png" alt="" style="width: 2.1875vw; height: 2.1875vw" /> | ||||
|         </div> | ||||
|         <div class="middle-box"> | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">玻璃类型</span> | ||||
|               <span class="type-name">标准组件</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|               msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="right-box"> | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|               msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
|               <span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="chip-box"> | ||||
|         <div class="icon"> | ||||
|           <img src="./../assets/images/chip.png" alt="" style="width: 2.1875vw; height: 2.1875vw" /> | ||||
|         </div> | ||||
|         <div class="middle-box"> | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">玻璃类型</span> | ||||
|               <span class="type-name">芯片</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|               msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="right-box"> | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|               msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
|               <span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="bipv-box" v-if="companyId != 0"> | ||||
|         <div class="icon"> | ||||
|           <img src="./../assets/images/bipv.png" alt="" style="width: 2.1875vw; height: 2.1875vw" /> | ||||
|         </div> | ||||
|         <div class="middle-box"> | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">玻璃类型</span> | ||||
|               <span class="type-name">BIPV</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|               msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="right-box"> | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|               msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
|               <span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="chart"> | ||||
|       <div class="chart-title"> | ||||
|         <span class="title">生产情况</span> | ||||
|         <div class="button-than" style="position: absolute;right: 3%;"> | ||||
|           <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than" | ||||
|             @click="() => $emit('update:than', i)" /> | ||||
|         </div> | ||||
|         <!-- <span class="line"></span> --> | ||||
|       </div> | ||||
|       <barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData" | ||||
|         ref="barChart" style="height: 0;flex:1"> | ||||
|       </barChartBase> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
| <script> | ||||
| import { number } from 'echarts'; | ||||
| import barChartBase from './ChipOee' | ||||
| import CopilotButton from "./button.vue" | ||||
| export default { | ||||
|   name: "ProdMonitor", | ||||
|   components: { | ||||
|     barChartBase, | ||||
|     CopilotButton | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       bipvVis:false, | ||||
|       msgObj: { | ||||
|         stand: {}, | ||||
|         chip: {}, | ||||
|         bipv: {}, | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: Number, | ||||
|       default: 1, | ||||
|     }, | ||||
|     companyId: { | ||||
|       type: Number, | ||||
|       default:0 | ||||
|     }, | ||||
|     than: { | ||||
|       type: String, | ||||
|     }, | ||||
|     than: { | ||||
|       type: String, | ||||
|       default: '同比', | ||||
|     }, | ||||
|     prodOutPut: { | ||||
|       type: Array, | ||||
|       default: [], | ||||
|     }, | ||||
|     prodFto: { | ||||
|       type: Array, | ||||
|       default: [], | ||||
|     }, | ||||
|     factoryData: { | ||||
|       type: Object, | ||||
|       default: {}, | ||||
|     }, | ||||
|     showBipv: { | ||||
|       type: Boolean, | ||||
|       default:true, | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     prodOutPut() { | ||||
|       this.makeData(); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.makeData(); | ||||
|     this.$nextTick(() => { | ||||
|       let button = document.getElementsByClassName('button-than') | ||||
|       button[0].children[0].style.borderRadius = '4px 0 0 4px' | ||||
|       button[0].children[1].style.borderRadius = '0px 4px 4px 0' | ||||
|     }) | ||||
|   }, | ||||
|   methods: { | ||||
|     makeData() { | ||||
|       this.msgObj.chip = {}; | ||||
|       this.msgObj.stand = {}; | ||||
|       this.msgObj.bipv = {}; | ||||
|       if (this.prodOutPut.length > 0) { | ||||
|         this.prodOutPut.map((item) => { | ||||
|           if (item.glassType === 0) { | ||||
|             this.msgObj.chip = item; | ||||
|           } else if (item.glassType === 1) { | ||||
|             this.msgObj.stand = item; | ||||
|           } else if (item.glassType === 2) { | ||||
|             this.msgObj.bipv = item; | ||||
|           } | ||||
|         }); | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
| <style lang="scss" scoped> | ||||
| .prod-monitor { | ||||
|   height: 100%; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   .chart{ | ||||
|     flex: 1; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     position: relative; | ||||
|     // gap: 6px; | ||||
|     .chart-title{ | ||||
|       margin-top: 5px; | ||||
|       // flex: 1; | ||||
|       // gap: 6px; | ||||
|       height: 1.5vw; | ||||
|       width: 100%; | ||||
|       display: flex; | ||||
|       align-items: center; | ||||
|       // flex-direction: column; | ||||
|       // flex-wrap: nowrap; | ||||
|       // justify-content: end | ||||
|       // margin-top: 10px; | ||||
|       .title{ | ||||
|         // flex: 1; | ||||
|          font-weight: 400; | ||||
|           font-size: 24px; | ||||
|           // width: 5vw; | ||||
|           color: #FFFFFF; | ||||
|           line-height: 24px; | ||||
|           // text-align: left; | ||||
|           font-style: normal; | ||||
|           display: inline-block; | ||||
|       } | ||||
|       // .line{ | ||||
|       //   flex: 1; | ||||
|       //   // width: 80%; | ||||
|       //   height: 1px;        // display: inline-block; | ||||
|       //   border: 1px solid; | ||||
|       //   // display: inline-block; | ||||
|       //   border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2; | ||||
|       //   backdrop-filter: blur(3px); | ||||
|       // } | ||||
|     } | ||||
|   } | ||||
|   .data{ | ||||
|       flex: 1; | ||||
|       display: flex; | ||||
|         gap: 6px; | ||||
|         flex-direction: column; | ||||
|       .fto-box, | ||||
|         .std-box, | ||||
|         .chip-box, | ||||
|         .bipv-box { | ||||
|           box-shadow: inset 0 0 12px 2px #fff3; | ||||
|           border-radius: 4px; | ||||
|           display: flex; | ||||
|           align-items: center; | ||||
|  | ||||
|           .icon { | ||||
|             flex: 1; | ||||
|             text-align: center; | ||||
|           } | ||||
|  | ||||
|           .middle-box { | ||||
|             flex: 2.086; | ||||
|             position: relative; | ||||
|           } | ||||
|  | ||||
|           .right-box { | ||||
|             flex: 2.424; | ||||
|             position: relative; | ||||
|           } | ||||
|  | ||||
|           .type { | ||||
|             display: inline-block; | ||||
|             font-size: 0.9375vw; | ||||
|             color: #6db6ff; | ||||
|             position: relative; | ||||
|             text-align: right; | ||||
|             padding-right: 0.417vw; | ||||
|             letter-spacing: 2px; | ||||
|             width: 6.25vw; | ||||
|           } | ||||
|  | ||||
|           .type1 { | ||||
|             display: inline-block; | ||||
|             font-size: 0.9375vw; | ||||
|             color: #6db6ff; | ||||
|             position: relative; | ||||
|             text-align: right; | ||||
|             padding-right: 0.6vw; | ||||
|             width: 6.25vw; | ||||
|             padding-left: 1.6vw; | ||||
|             text-align: justify; | ||||
|             text-align-last: justify; | ||||
|           } | ||||
|  | ||||
|           .type-name { | ||||
|             font-size: 1.042vw; | ||||
|             color: #fff; | ||||
|             position: relative; | ||||
|             text-align: left; | ||||
|             padding-left: 0.573vw; | ||||
|           } | ||||
|  | ||||
|           .type-name::before { | ||||
|             content: ""; | ||||
|             display: inline-block; | ||||
|             width: 1px; | ||||
|             height: 1.042vw; | ||||
|             border: 1px solid; | ||||
|             border-image: linear-gradient(180deg, | ||||
|                 rgba(0, 176, 243, 0), | ||||
|                 rgba(31, 143, 255, 1)) 2 2; | ||||
|             position: absolute; | ||||
|             left: 0; | ||||
|             top: 4px; | ||||
|           } | ||||
|  | ||||
|           .num { | ||||
|             font-size: 1.042vw; | ||||
|             color: #fff; | ||||
|             position: relative; | ||||
|             text-align: left; | ||||
|             padding-left: 0.573vw; | ||||
|           } | ||||
|  | ||||
|           .num::before { | ||||
|             content: ""; | ||||
|             display: inline-block; | ||||
|             width: 1px; | ||||
|             height: 1.042vw; | ||||
|             border: 1px solid; | ||||
|             border-image: linear-gradient(180deg, | ||||
|                 rgba(0, 176, 243, 0), | ||||
|                 rgba(31, 143, 255, 1)) 2 2; | ||||
|             position: absolute; | ||||
|             left: 0; | ||||
|             top: 4px; | ||||
|           } | ||||
|         } | ||||
|  | ||||
|         .fto-box { | ||||
|           flex: 1; | ||||
|  | ||||
|           .type::before { | ||||
|             content: ""; | ||||
|             display: inline-block; | ||||
|             width: 1px; | ||||
|             height: 1.6146vw; | ||||
|             border: 1px solid; | ||||
|             border-image: linear-gradient(135deg, | ||||
|                 rgba(0, 176, 243, 0), | ||||
|                 rgba(31, 143, 255, 1), | ||||
|                 rgba(31, 143, 255, 0)) 2 2; | ||||
|             position: absolute; | ||||
|             left: 0; | ||||
|             top: -2px; | ||||
|           } | ||||
|         } | ||||
|  | ||||
|         .std-box { | ||||
|           flex: 1; | ||||
|         } | ||||
|  | ||||
|         .chip-box { | ||||
|           flex: 1; | ||||
|         } | ||||
|  | ||||
|         .bipv-box { | ||||
|           flex: 1; | ||||
|         } | ||||
|  | ||||
|         .std-box, | ||||
|         .chip-box, | ||||
|         .bipv-box { | ||||
|           .separate::before { | ||||
|             content: ""; | ||||
|             display: inline-block; | ||||
|             width: 1px; | ||||
|             height: 3.125vw; | ||||
|             border: 1px solid; | ||||
|             border-image: linear-gradient(135deg, | ||||
|                 rgba(0, 176, 243, 0), | ||||
|                 rgba(31, 143, 255, 1), | ||||
|                 rgba(31, 143, 255, 0)) 2 2; | ||||
|             position: absolute; | ||||
|             left: 0; | ||||
|             top: -2px; | ||||
|           } | ||||
|         } | ||||
|   } | ||||
|  | ||||
| } | ||||
| </style> | ||||
| @@ -1,16 +1,10 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:36:07 | ||||
|  * @LastEditTime: 2024-07-19 16:16:02 | ||||
|  * @LastEditTime: 2024-07-24 13:39:01 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 10:44:09 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="copilot-container"> | ||||
| @@ -89,27 +83,29 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71; | ||||
|   backdrop-filter: blur(4px); | ||||
|   border-right: .13vw solid; | ||||
|     // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     //   #024798 20%, | ||||
|     //   transparent 90%) 1; | ||||
|     border-image:radial-gradient(circle at center, | ||||
|         #1481fd 2%, | ||||
|         #024798 95%, | ||||
|         transparent)1; | ||||
|     box-sizing: border-box; | ||||
|     backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 96%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       position: absolute; | ||||
|       display: inline-block; | ||||
|       height: 92%; | ||||
|       width: 0.13vw; | ||||
|       border-radius: 2px; | ||||
|       top: 0%; | ||||
|       left: 0; | ||||
|       background: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%); | ||||
|       z-index: 1; | ||||
|     } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
| @@ -120,7 +116,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     right: 4%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%); | ||||
|     background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
| @@ -141,7 +137,7 @@ export default { | ||||
|   } | ||||
|  | ||||
|   .container-body { | ||||
|     padding: 12px; | ||||
|     padding: 20px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     flex: 1; | ||||
|   | ||||
| @@ -87,24 +87,29 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71; | ||||
|   backdrop-filter: blur(4px); | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 96%; | ||||
|       width: 0.11415vw; | ||||
|   border-right: .13vw solid; | ||||
|     // border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     //   #024798 20%, | ||||
|     //   transparent 90%) 1; | ||||
|     border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1; | ||||
|     box-sizing: border-box; | ||||
|     backdrop-filter: blur(4px); | ||||
|  | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       position: absolute; | ||||
|       display: inline-block; | ||||
|       height: 92%; | ||||
|       width: 0.13vw; | ||||
|       border-radius: 2px; | ||||
|       top: 0%; | ||||
|       left: 0; | ||||
|       background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|           #1481fd 2%, | ||||
|           #024798 95%, | ||||
|           transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|       z-index: 1; | ||||
|     } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
| @@ -115,7 +120,7 @@ export default { | ||||
|     border-radius: 2px; | ||||
|     left: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%); | ||||
|     background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
| @@ -136,7 +141,7 @@ export default { | ||||
|   } | ||||
|  | ||||
|   .container-body { | ||||
|     padding: 12px; | ||||
|     padding: 20px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     flex: 1; | ||||
|   | ||||
| @@ -28,7 +28,7 @@ | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/bipvProdMonitor"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| // import Energy from "./components/Energy.vue"; | ||||
|   | ||||
| @@ -29,7 +29,7 @@ import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
|  | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/prodMonitor"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| // import Energy from "./components/Energy.vue"; | ||||
|   | ||||
| @@ -28,7 +28,7 @@ | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/bipvProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| // import Energy from "./components/Energy.vue"; | ||||
|   | ||||
| @@ -28,7 +28,7 @@ | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/bipvProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| // import Energy from "./components/Energy.vue"; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-21 13:24:03 | ||||
|  * @LastEditTime: 2024-06-05 09:43:30 | ||||
|  * @LastEditTime: 2024-07-25 10:52:35 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -38,7 +38,7 @@ | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| // import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/bipvProdMonitor.vue"; | ||||
| import Store from "./components/Store.vue"; | ||||
| import Energy from "./components/Energy.vue"; | ||||
| import Order from "./components/Order.vue"; | ||||
|   | ||||
| @@ -29,7 +29,7 @@ import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
|  | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import ProdMonitor from "./components/bipvProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| // import Energy from "./components/Energy.vue"; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-20 13:32:59 | ||||
|  * @LastEditTime: 2024-07-19 16:05:46 | ||||
|  * @LastEditTime: 2024-07-22 14:41:37 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|   | ||||
| @@ -32,7 +32,7 @@ export default ({ | ||||
|     textStyle: { | ||||
|       fontWeight: 400, | ||||
|       fontSize: titleSize, | ||||
|       color: "rgba(223,241,254,.8)", | ||||
|       color: "rgba(223,241,254,1)", | ||||
|     }, | ||||
|     subtext: `\u2002${subtitle}\u2002`, | ||||
|     subtextStyle: { | ||||
| @@ -47,7 +47,7 @@ export default ({ | ||||
|     { | ||||
|       type: "pie", | ||||
|       name: "当前目标", | ||||
|       radius: ["74%", "86%"], | ||||
|       radius: ["73%", "85%"], | ||||
|       center: ["50%", "48%"], | ||||
|       emptyCircleStyle: { | ||||
|         color: "#042c5f33", | ||||
| @@ -56,7 +56,7 @@ export default ({ | ||||
|     // 数据 series | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["74%", "86%"], | ||||
|       radius: ["73%", "85%"], | ||||
|       center: ["50%", "48%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
| @@ -121,7 +121,7 @@ export default ({ | ||||
|     // 数据 series2 - 2023累计 | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["61%", "74%"], | ||||
|       radius: ["60%", "73%"], | ||||
|       center: ["50%", "48%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|   | ||||
| @@ -1,16 +1,10 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-07-18 16:37:41 | ||||
|  * @LastEditTime: 2024-07-23 16:36:18 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|     filename: ChipYield.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-11 10:46:47 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <chart-container class="chip-yield-chart" :noScroll="true"> | ||||
| @@ -70,7 +64,7 @@ export default { | ||||
|           top: "40%", | ||||
|           textAlign: "center", | ||||
|           textStyle: { | ||||
|             fontWeight: 600, | ||||
|             fontWeight: 400, | ||||
|             fontSize: 32, | ||||
|             color: "#fffd", | ||||
|           }, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-06-27 16:30:58 | ||||
|  * @LastEditTime: 2024-07-23 17:03:50 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-07-19 15:25:37 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|     filename: right-chart-base | ||||
|     author: liubin | ||||
| @@ -82,8 +75,8 @@ export default { | ||||
|               res += | ||||
|                 "<br/>" + | ||||
|               `${params[i].seriesType === "line" | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span> | ||||
|                 <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span> | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:3.05%;'></span> | ||||
|                 <span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:39.4%;left:4.6%;'></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>` | ||||
|                 : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` | ||||
|   | ||||
| @@ -67,15 +67,15 @@ export default { | ||||
|       return [ | ||||
|         { | ||||
|           name: `${new Date().getFullYear()}年目标值`, | ||||
|           data: stdOutput.target, | ||||
|           data: stdOutput.target.splice(0,2), | ||||
|         }, | ||||
|         { | ||||
|           name: `${new Date().getFullYear() - 1}年`, | ||||
|           data: stdOutput.previous, | ||||
|           data: stdOutput.previous.splice(0, 2), | ||||
|         }, | ||||
|         { | ||||
|           name: `${new Date().getFullYear()}年`, | ||||
|           data: stdOutput.current, | ||||
|           data: stdOutput.current.splice(0, 2), | ||||
|         }, | ||||
|       ]; | ||||
|     }, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-07-17 08:55:15 | ||||
|  * @LastEditTime: 2024-07-23 09:45:26 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2024-07-16 18:41:27 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-07-23 09:45:30 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   | ||||
| @@ -1,93 +1,206 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-04-29 16:10:36 | ||||
|  * @LastEditTime: 2024-07-25 14:07:51 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: 400px; flex-grow: 1;"> | ||||
|       <search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <div class="content"> | ||||
|         <!-- v-for 遍历父级div--> | ||||
|         <div class="main" :span="12" v-for="(item,index) in  chartData" :key="index"> | ||||
|           <line-chart :data="item" ref="lineChart" style="height: 600px;width: 100%" /> | ||||
|         </div> | ||||
|       </div> | ||||
|       <!-- <el-row :gutter="24"> | ||||
|         <el-col> | ||||
|         </el-col> | ||||
|       </el-row> --> | ||||
|     </div> | ||||
|     <div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 32px)"> | ||||
|     <ButtonNav v-show="false" :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" | ||||
|       style="margin-top: -10px"> | ||||
|     </ButtonNav> | ||||
|     <div class="app-container" style="height: auto; flex-grow: 1;"> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item v-if="facType === 0" label="工厂名称" prop="factorys"> | ||||
|           <el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable> | ||||
|             <el-option v-for="item in dhgfactoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-else label="工厂名称" prop="factorys"> | ||||
|           <el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable> | ||||
|             <el-option v-for="item in tyjxfactoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="时间维度" prop="date"> | ||||
|           <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择" @change="clearTime"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至" | ||||
|             start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           至 | ||||
|           <el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           <!-- <span v-if="start && end" style="margin-left: 10px"> | ||||
|             {{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | ||||
|           </span> --> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime"> | ||||
|           <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM" | ||||
|             range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <!-- <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <!-- <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item> | ||||
|           <el-button type="primary" size="small" @click="getDataList">查询</el-button> | ||||
|           <el-divider direction="vertical"></el-divider> | ||||
|           <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> | ||||
|           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button> | ||||
|           <el-button type="success" size="small" plain @click="addFactory">新增</el-button> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|       <!-- <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> --> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size" :table-data="tableData"> | ||||
|         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" | ||||
|           :method-list="tableBtn" @clickBtn="handleClick" /> | ||||
|       </base-table> | ||||
|       <pagination :limit.sync="listQuery.size" :page.sync="listQuery.current" :total="listQuery.total" | ||||
|         @pagination="getDataList" /> | ||||
|       <detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :ftype="facType" | ||||
|         @destroy="detailOrUpdateVisible = false" /> | ||||
|       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :ftype="facType" @refreshDataList="getDataList" | ||||
|         @destroy="addOrUpdateVisible = false" /> | ||||
|  | ||||
|     </div> | ||||
|  | ||||
|     <!-- 用户导入对话框 --> | ||||
|  | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| 			:total="listQuery.total" | ||||
| 			@pagination="getDataList" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| import { getStockPage } from '@/api/wareHouse'; | ||||
| import { parseTime } from '@/utils/ruoyi'; | ||||
| import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget, importToTarget, importDiTarget } from '@/api/produceData'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| // import ButtonNav from '@/components/ButtonNav' | ||||
| import basicPage from '@/mixins/basic-page' | ||||
| // import detailOrUpdate from './detail-or-updata'; | ||||
| // import addOrUpdate from './add-or-updata'; | ||||
| import { factoryList, dhgfactoryList, tyjxfactoryList } from "@/utils/constants"; | ||||
| import { getBaseHeader } from "@/utils/request"; | ||||
|  | ||||
|  | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart }, | ||||
| 	data() { | ||||
|   // components: { ButtonNav, detailOrUpdate, addOrUpdate }, | ||||
|   mixins: [basicPage], | ||||
|   data() { | ||||
|     return { | ||||
|       chartData:[], | ||||
|       factoryList, | ||||
|       dhgfactoryList, | ||||
|       tyjxfactoryList, | ||||
|       currentMenu: '碲化镉工厂', | ||||
|       fileList: [], | ||||
|       start: undefined, | ||||
|       end: undefined, | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factory:undefined, | ||||
|         size: 10, | ||||
|         current: 1, | ||||
|         factorys: null, | ||||
|         total: 0, | ||||
|         date: 3, | ||||
|         beginTime: undefined, | ||||
|         endTime: undefined, | ||||
|         reportTime: [] | ||||
|       }, | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       detailOrUpdateVisible: false, | ||||
|       addOrUpdateVisible: false, | ||||
|       date1: undefined, | ||||
|       date2: undefined, | ||||
|       // 用户导入参数 | ||||
|       upload: { | ||||
|         // 是否显示弹出层(用户导入) | ||||
|         open: false, | ||||
|         // 弹出层标题(用户导入) | ||||
|         title: "导入", | ||||
|         // 是否禁用上传 | ||||
|         isUploading: false, | ||||
|         // 是否更新已经存在的用户数据 | ||||
|         // updateSupport: 0, | ||||
|         // 设置上传的请求头部 | ||||
|         headers: getBaseHeader(), | ||||
|         // 上传的地址 | ||||
|         url: process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel' | ||||
|       }, | ||||
|       tableBtn: [ | ||||
|         { | ||||
|           type: 'detail', | ||||
|           btnName: '详情', | ||||
|         }, | ||||
|         { | ||||
|           type: 'edit', | ||||
|           btnName: '修改', | ||||
|         }, | ||||
|         { | ||||
|           type: 'delete', | ||||
|           btnName: '删除', | ||||
|         } | ||||
|       ].filter((v) => v), | ||||
|       typeList: [ | ||||
|         { | ||||
|           name: '芯片', | ||||
|           id: 0, | ||||
|         }, | ||||
|         { | ||||
|           name: '标准组件', | ||||
|           id: 1, | ||||
|         }, | ||||
|         { | ||||
|           name: 'BIPV产品', | ||||
|           id: 2, | ||||
|         }, | ||||
|       ], | ||||
|       urlOptions: { | ||||
|         // getDataListURL: getGlassPage, | ||||
|         // exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       mainFormConfig: [ | ||||
|       	{ | ||||
|         { | ||||
|           type: 'select', | ||||
|           label: '工厂名称', | ||||
|           placeholder: '请选择工厂名称', | ||||
|           param: 'factory', | ||||
|           selectOptions: [ | ||||
|             { | ||||
|               id: 0, | ||||
|               name: '瑞昌中建材光电材料有限公司' | ||||
|             }, | ||||
|             { | ||||
|               id: 1, | ||||
|               name: '邯郸中建材光电材料有限公司' | ||||
|             }, | ||||
|             { | ||||
|               id: 2, | ||||
|               name: '中建材株洲光电材料有限公司' | ||||
|             }, | ||||
|             { | ||||
|               id: 3, | ||||
|               name: '佳木斯中建材光电材料有限公司' | ||||
|             }, | ||||
|             { | ||||
|               id: 4, | ||||
|               name: '成都中建材光电材料有限公司' | ||||
|             }, | ||||
|             { | ||||
|               id: 5, | ||||
|               name: '凯盛光伏材料有限公司' | ||||
|             }, | ||||
|             { | ||||
|               id: 6, | ||||
|               name: '蚌埠兴科玻璃有限公司' | ||||
|             }, | ||||
|           ], | ||||
|           clearable:true, | ||||
|           label: '工单', | ||||
|           placeholder: '请选择工单', | ||||
|           param: 'workOrderId', | ||||
|           selectOptions: [], | ||||
|         }, | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
| @@ -108,21 +221,21 @@ export default { | ||||
|         // 	], | ||||
|         // 	index: 2, | ||||
|         // 	extraOptions: [ | ||||
|         // { | ||||
|         //   // parent: 'dateFilterType', | ||||
|         //   // 时间段选择 | ||||
|         //   type: 'datePicker', | ||||
|         //   label: '时间段', | ||||
|         //   // dateType: 'datetimerange', | ||||
|         //   dateType: 'datetimerange', | ||||
|         //   format: 'yyyy-MM-dd HH:mm:ss', | ||||
|         //   valueFormat: 'yyyy-MM-ddTHH:mm:ss', | ||||
|         //   rangeSeparator: '-', | ||||
|         //   rangeSeparator: '-', | ||||
|         //   startPlaceholder: '开始时间', | ||||
|         //   endPlaceholder: '结束时间', | ||||
|         //   param: 'recordTime', | ||||
|         // }, | ||||
|         { | ||||
|           // parent: 'dateFilterType', | ||||
|           // 时间段选择 | ||||
|           type: 'datePicker', | ||||
|           label: '时间段', | ||||
|           // dateType: 'datetimerange', | ||||
|           dateType: 'datetimerange', | ||||
|           format: 'yyyy-MM-dd HH:mm:ss', | ||||
|           valueFormat: 'yyyy-MM-ddTHH:mm:ss', | ||||
|           rangeSeparator: '-', | ||||
|           rangeSeparator: '-', | ||||
|           startPlaceholder: '开始时间', | ||||
|           endPlaceholder: '结束时间', | ||||
|           param: 'recordTime', | ||||
|         }, | ||||
|         // 		{ | ||||
|         // 			parent: 'dateFilterType', | ||||
|         // 			// 日期选择 | ||||
| @@ -137,13 +250,13 @@ export default { | ||||
|         // 	], | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           type: 'button', | ||||
|           btnName: '查询', | ||||
|           name: 'search', | ||||
|           color: 'primary', | ||||
|         }, | ||||
|          { | ||||
|           type:'separate' | ||||
|         { | ||||
|           type: 'separate' | ||||
|         }, | ||||
|         // { | ||||
|         //   type: this.$auth.hasPermi( | ||||
| @@ -153,238 +266,417 @@ export default { | ||||
|         //     : '', | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           type: 'button', | ||||
|           btnName: '导出', | ||||
|           name: 'export', | ||||
|           plain: true, | ||||
|           color: 'primary', | ||||
|           color: 'warning', | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '仓库管理', | ||||
|           label: '成本管理', | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|           value: 1, | ||||
|           label: '日' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           value: 2, | ||||
|           label: '周' | ||||
|         }, | ||||
|         { | ||||
|           value: 3, | ||||
|           label: '月' | ||||
|         }, | ||||
|         { | ||||
|           value: 4, | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         } | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'factory', | ||||
|           label: '工厂名称', | ||||
|           filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val] | ||||
|           filter: (val) => factoryList[val], | ||||
|           minWidth: 200, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'glassType', | ||||
|           label: '玻璃类型', | ||||
|           filter: (val) => ['玻璃芯片', '标准组件', 'BIPV'][val] | ||||
|           prop: 'targetTime', | ||||
|           label: '目标时间', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'productSpecification', | ||||
|           label: '产品规格', | ||||
|           prop: 'updateTime', | ||||
|           label: '提交时间', | ||||
|           filter: parseTime, | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'stockNumber', | ||||
|           label: '库存数量', | ||||
|           prop: 'ftoInput', | ||||
|           label: 'FTO投入量(片)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'specificationProportion', | ||||
|           label: '规格占比', | ||||
|           prop: 'chipYield', | ||||
|           label: '芯片产量(片)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipAveragePower', | ||||
|           label: '芯片平均功率(W)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipYieldRate', | ||||
|           label: '芯片良率(%)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipTotalPower', | ||||
|           label: '芯片总功率(KW)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipCssMarriageRate', | ||||
|           label: 'CSS稼动率(%)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipOee', | ||||
|           label: '芯片段OEE(%)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipCapacityUtilizationRate', | ||||
|           label: '芯片产能利用率(%)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipAnnualAverageProduction', | ||||
|           label: '芯片人均产量(片/人)', | ||||
|           minWidth: 180, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'chipBom', | ||||
|           label: '芯片BOM', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|       ], | ||||
|       timeSelect:'month', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       // timeSelect:'month', | ||||
|       // startTimeStamp:null, //开始时间 | ||||
|       // endTimeStamp:null, //结束时间 | ||||
|       // date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       // reportTime: '', | ||||
|       // startTimeStamp: '', | ||||
|       // endTimeStamp: '', | ||||
|       tableData: [], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     console.log(this.$refs.lineChart) | ||||
|     // this.getCurrentYearFirst() | ||||
|     this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     buttonClick() { | ||||
|       facType: 0 | ||||
|       // proLineList: [], | ||||
|       // all: {} | ||||
|     }; | ||||
|   }, | ||||
|   computed: { | ||||
|     weekNum() { | ||||
|       return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|     }, | ||||
|     changeTime(val) { | ||||
|       if (val) { | ||||
|   }, | ||||
|   watch: { | ||||
|     facType(value) { | ||||
|       if (value === 0) { | ||||
|         this.$set(this.tableProps, 3, { | ||||
|           prop: 'ftoInput', | ||||
|           label: 'FTO投入量(片)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }) | ||||
|         this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel' | ||||
|       } else { | ||||
|         this.listQuery.reportTime = [] | ||||
|         this.$set(this.tableProps, 3, { | ||||
|           prop: 'molybdenumElectrodeInput', | ||||
|           label: '钼电极投入量(片)', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }) | ||||
|         this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel' | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     const currentMonth = new Date() | ||||
|     this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')] | ||||
|     this.changeTime() | ||||
|   }, | ||||
|   methods: { | ||||
|     clearTime() { | ||||
|       this.listQuery.beginTime = undefined | ||||
|       this.listQuery.endTime = undefined | ||||
|       this.listQuery.reportTime = [] | ||||
|       this.start = undefined | ||||
|       this.end = undefined | ||||
|     }, | ||||
|     handleImport() { | ||||
|       this.upload.title = "生产目标导入"; | ||||
|       this.upload.open = true; | ||||
|       this.fileList = [] | ||||
|     }, | ||||
|     // 文件上传中处理 | ||||
|     handleFileUploadProgress(event, file, fileList) { | ||||
|       this.upload.isUploading = true; | ||||
|     }, | ||||
|     // 文件上传成功处理 | ||||
|     handleFileSuccess(response, file, fileList) { | ||||
|       if (response.code !== 0) { | ||||
|         this.$modal.msgError(response.msg) | ||||
|         return; | ||||
|       } | ||||
|       this.upload.open = false; | ||||
|       this.upload.isUploading = false; | ||||
|       this.$refs.upload.clearFiles(); | ||||
|       this.$message.success('导入成功!') | ||||
|       this.getDataList() | ||||
|     }, | ||||
|     // 提交上传文件 | ||||
|     submitFileForm() { | ||||
|       this.$refs.upload.submit(); | ||||
|     }, | ||||
|     addFactory() { | ||||
|       this.addOrUpdateVisible = true; | ||||
|       this.$nextTick(() => { | ||||
|         this.$refs.addOrUpdate.init(); | ||||
|       }); | ||||
|     }, | ||||
|     changeFactory($event) { | ||||
|       this.currentMenu = $event | ||||
|       this.facType = this.currentMenu === '碲化镉工厂' ? 0 : 1 | ||||
|       this.getDataList() | ||||
|     }, | ||||
|     handleClick(val) { | ||||
|       if (val.type === "edit") { | ||||
|         this.addOrUpdateVisible = true; | ||||
|         // this.addOrEditTitle = "编辑"; | ||||
|         this.$nextTick(() => { | ||||
|           this.$refs.addOrUpdate.init(val.data.id); | ||||
|         }); | ||||
|       } else if (val.type === "delete") { | ||||
|         this.deleteHandle(val.data.id, val.data.factory, val.data._pageIndex) | ||||
|       } else { | ||||
|         this.otherMethods(val) | ||||
|       } | ||||
|     }, | ||||
|     async getDict() { | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|     // 删除 | ||||
|     deleteHandle(id, name, index) { | ||||
|       this.$confirm('是否确认删除工厂名称为' + factoryList[name] + '的数据项?', "系统提示", { | ||||
|         confirmButtonText: "确定", | ||||
|         cancelButtonText: "取消", | ||||
|         type: "warning", | ||||
|       }) | ||||
|         .then(() => { | ||||
|           delTarget(id).then(({ data }) => { | ||||
|             this.$message({ | ||||
|               message: "操作成功", | ||||
|               type: "success", | ||||
|               duration: 1500, | ||||
|               onClose: () => { | ||||
|                 this.getDataList(); | ||||
|               }, | ||||
|             }); | ||||
|           }); | ||||
|         }) | ||||
|         .catch(() => { }); | ||||
|     }, | ||||
|     otherMethods(val) { | ||||
|       this.detailOrUpdateVisible = true; | ||||
|       this.addOrEditTitle = "详情"; | ||||
|       this.$nextTick(() => { | ||||
|         this.$refs.detailOrUpdate.init(val.data.id); | ||||
|       }); | ||||
|     }, | ||||
|     getYear(e) { | ||||
|       if (this.end && Number(this.end) - Number(this.start) > 10) { | ||||
|         this.$message({ | ||||
|           message: '年份起止时间不能超过十年', | ||||
|           type: 'warning' | ||||
|         }); | ||||
|         this.start = undefined | ||||
|         this.end = undefined | ||||
|         // console.log(); | ||||
|       } else { | ||||
|         if (Number(this.end) < Number(this.start)) { | ||||
|           this.$message({ | ||||
|             message: '结束年份不能小于开始年份', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.start = undefined | ||||
|           this.end = undefined | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(this.start) | ||||
|           this.listQuery.endTime = Number(this.end) | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|       if (!this.start && !this.end) { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     changeTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4)) | ||||
|         const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4)) | ||||
|         if (years * 12 + months > 24) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过24个月', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | ||||
|           this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | ||||
|         } | ||||
|       } else { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|       } | ||||
|     }, | ||||
|     onValueChange(picker, k) { // 选中近k周后触发的操作 | ||||
|       if (this.start && this.end) { | ||||
|         this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000); | ||||
|         if (numDays > 168) { | ||||
|           console.log(numDays) | ||||
|           this.$message({ | ||||
|             message: '周范围不能超过24周', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW')) | ||||
|           this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW')) | ||||
|         } | ||||
|       } | ||||
|       if (!this.start && !this.end) { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|       } | ||||
|     }, | ||||
|     changeDayTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0]) | ||||
|         if (numDays > 30) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过30天', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | ||||
|           this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | ||||
|         } | ||||
|       } else { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|       } | ||||
|     }, | ||||
|     async getDataList() { | ||||
|       getStockPage(this.listQuery).then((res) => { | ||||
|         this.tableData = res.data.list | ||||
|         let arr = res.data.list.map((ele) => { | ||||
|           return { | ||||
|             factory: ele.factory === 0 ? '瑞昌中建材光电材料有限公司' : ele.factory === 1 ? '邯郸中建材光电材料有限公司' : ele.factory === 2 ? '中建材株洲光电材料有限公司' : ele.factory === 3 ? '佳木斯中建材光电材料有限公司' : ele.factory === 4 ? '成都中建材光电材料有限公司' : ele.factory === 5 ? '凯盛光伏材料有限公司' : '蚌埠兴科玻璃有限公司', | ||||
|             name: ele.glassType === 0 ? '玻璃芯片' : ele.glassType === 1 ? '标准组件' : 'BIPV', | ||||
|             num: ele.stockNumber | ||||
|       if (this.currentMenu === '碲化镉工厂') { | ||||
|         await prodTargetDiPage(this.listQuery).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.tableData = res.data.records | ||||
|             this.listQuery.total = res.data.total | ||||
|           } | ||||
|         }) | ||||
|         this.checkSameData(arr) | ||||
|         this, this.$nextTick(() => [ | ||||
|           this.$refs.lineChart.initChart() | ||||
|         ]) | ||||
|       }) | ||||
|     }, | ||||
|     checkSameData(data) { | ||||
|       let dataInfo = {} | ||||
|       data.forEach((item, index) => { | ||||
|         let { factory } = item; | ||||
|         if (!dataInfo[factory]) { | ||||
|           dataInfo[factory] = { | ||||
|             factory, | ||||
|             child: [] | ||||
|       } else { | ||||
|         await prodTargetToPage(this.listQuery).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.tableData = res.data.records | ||||
|             this.tableData.forEach(item => { | ||||
|               const year = item.targetYear ? item.targetYear + '年' : '' | ||||
|               const month = item.targetMonth ? item.targetMonth + '月' : '' | ||||
|               item.tagertTime = year + month | ||||
|             }) | ||||
|             this.listQuery.total = res.data.total | ||||
|           } | ||||
|         } | ||||
|         dataInfo[factory].child.push(item) | ||||
|       }) | ||||
|       this.chartData = Object.values(dataInfo); // list 转换成功的数据 | ||||
|       // console.log(this.chartData[0]) | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     buttonClick(val) { | ||||
|       this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
|       switch (val.btnName) { | ||||
|         case 'search': | ||||
|           this.listQuery.current = 1; | ||||
|           this.listQuery.size = 10; | ||||
|           this.getDataList(); | ||||
|           break; | ||||
|         case 'export': | ||||
|           this.handleExport(); | ||||
|           break; | ||||
|         default: | ||||
|           console.log(val); | ||||
|       } | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       return time | ||||
|     }, | ||||
| 		changeTime(val) { | ||||
|       if (val) { | ||||
|         this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|         // console.log(this.listQuery.reportTime); | ||||
|         this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|         console.log(this.listQuery.reportTime); | ||||
| 			} else { | ||||
| 					this.listQuery.reportTime = [] | ||||
| 			} | ||||
| 		}, | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
|       // this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
|       console.log(val) | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1 | ||||
|           this.listQuery.pageSize = 10 | ||||
|           this.listQuery.factory = val.factory ? val.factory : undefined | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     /** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
|       const queryParams = this.listQuery; | ||||
|       queryParams.current = 1 | ||||
|       queryParams.size = 999 | ||||
|       if (this.facType === 0) { | ||||
|         this.$modal.confirm('是否确认导出所有数据项?').then(() => { | ||||
|           this.exportLoading = true; | ||||
|           return exportDiTargetExcel(queryParams); | ||||
|         }).then(response => { | ||||
|           this.$download.excel(response, '碲化镉工厂生产目标数据.xls'); | ||||
|           this.exportLoading = false; | ||||
|         }).catch(() => { }); | ||||
|       } else { | ||||
|         this.$modal.confirm('是否确认导出所有数据项?').then(() => { | ||||
|           this.exportLoading = true; | ||||
|           return exportToTargetExcel(queryParams); | ||||
|         }).then(response => { | ||||
|           this.$download.excel(response, '铜铟镓硒工厂生产目标数据.xls'); | ||||
|           this.exportLoading = false; | ||||
|         }).catch(() => { }); | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| <style> | ||||
| /* .blueTip { */ | ||||
| 	/* padding-bottom: 10px; */ | ||||
| /* padding-bottom: 10px; */ | ||||
| /* } */ | ||||
| /* .blueTi */ | ||||
| .blueTip::before{ | ||||
| .blueTip .el-date-editor .el-range__icon { | ||||
|   font-size: 16px; | ||||
|   color: #0b58ff; | ||||
| } | ||||
|  | ||||
| .blueTip .el-input__prefix .el-icon-date { | ||||
|   font-size: 16px; | ||||
|   color: #0b58ff; | ||||
| } | ||||
|  | ||||
| .blueTip .el-input__prefix .el-icon-time { | ||||
|   font-size: 16px; | ||||
|   color: #0b58ff; | ||||
| } | ||||
|  | ||||
| .blueTip::before { | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
| @@ -394,26 +686,13 @@ export default { | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
|  | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   margin: 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 134px); | ||||
|   overflow: auto; | ||||
| } | ||||
|  .content { | ||||
|    display: flex; | ||||
|    /* grid-template-columns: 1fr 1fr 1fr; */ | ||||
|    gap: 20px; | ||||
|    flex-wrap: wrap; | ||||
|  } | ||||
|  | ||||
|  .main { | ||||
|    width: calc((100% - 46px)/2); | ||||
|    /* border: 1px solid #D0D0D0; */ | ||||
|    height: 400px; | ||||
|    /* background-color: #FFFFFF; */ | ||||
|    position: relative; | ||||
|  } | ||||
| </style> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user