Compare commits
	
		
			29 Commits
		
	
	
		
			projects/l
			...
			projects/z
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| d4495e97f1 | |||
| 755fe3adab | |||
| d380907298 | |||
| 94874a9d76 | |||
| b7d65b47c8 | |||
| cc65c44cb8 | |||
| 3e13028f9f | |||
| b28816f515 | |||
| 9c1f36d460 | |||
| 67e3b08c82 | |||
| afb62375da | |||
| e93e7d530d | |||
| 86eca859aa | |||
| 1e9bfee1e7 | |||
| b4985d4018 | |||
| ea47028178 | |||
| eaf00466db | |||
| 1434eaa3ac | |||
| bc2b51d0e3 | |||
| e58c60e6f7 | |||
| 445cd9630d | |||
| e314e84b43 | |||
| 491b88f220 | |||
| d5744b4f3d | |||
| c138755a54 | |||
| d764eae48d | |||
| baffb1f6f8 | |||
| 8ecc5db385 | |||
| 77259329d9 | 
							
								
								
									
										11
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						@@ -1,7 +1,7 @@
 | 
			
		||||
###
 | 
			
		||||
 # @Author: Do not edit
 | 
			
		||||
 # @Date: 2023-08-29 09:40:39
 | 
			
		||||
 # @LastEditTime: 2024-09-10 14:43:39
 | 
			
		||||
 # @LastEditTime: 2025-03-05 16:46:35
 | 
			
		||||
 # @LastEditors: zwq
 | 
			
		||||
 # @Description:
 | 
			
		||||
###
 | 
			
		||||
@@ -13,9 +13,12 @@ VUE_APP_TITLE = 成本管理系统
 | 
			
		||||
 | 
			
		||||
# 芋道管理系统/开发环境
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
 | 
			
		||||
VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.40:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://line-sczg.kszny.picaiba.com'
 | 
			
		||||
VUE_APP_BASE_API = 'http://100.64.0.45:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://172.16.33.10:48080'
 | 
			
		||||
 | 
			
		||||
# ws地址
 | 
			
		||||
VUE_APP_WS_API = 'ws://100.64.0.45:48080'
 | 
			
		||||
 | 
			
		||||
# 路由懒加载
 | 
			
		||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 # @Author: zwq
 | 
			
		||||
 # @Date: 2024-03-27 15:49:55
 | 
			
		||||
 # @LastEditors: zwq
 | 
			
		||||
 # @LastEditTime: 2024-09-10 15:19:19
 | 
			
		||||
 # @LastEditTime: 2025-03-05 16:30:45
 | 
			
		||||
 # @Description:
 | 
			
		||||
###
 | 
			
		||||
# 生产环境配置
 | 
			
		||||
@@ -20,6 +20,9 @@ VUE_APP_BASE_API = ''
 | 
			
		||||
# PUBLIC_PATH = 'http://192.168.0.33:8888/'
 | 
			
		||||
PUBLIC_PATH = ''
 | 
			
		||||
 | 
			
		||||
# ws地址
 | 
			
		||||
VUE_APP_WS_API = 'ws://10.1.17.10:48080'
 | 
			
		||||
 | 
			
		||||
# 二级部署路径
 | 
			
		||||
VUE_APP_APP_NAME ='yudao-admin'
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										4
									
								
								.gitignore
									
									
									
									
										vendored
									
									
								
							
							
						
						@@ -20,4 +20,6 @@ selenium-debug.log
 | 
			
		||||
*.local
 | 
			
		||||
 | 
			
		||||
package-lock.json
 | 
			
		||||
echarts.js
 | 
			
		||||
echarts.js
 | 
			
		||||
sync_line_sczg_prod.bat
 | 
			
		||||
sync_line_sczg_aliyun.bat
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2024-04-18 16:53:17
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2024-09-06 14:35:13
 | 
			
		||||
 * @LastEditTime: 2025-02-17 15:47:58
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
@@ -52,3 +52,21 @@ export function exportRawCostStatisticsHisExcel(query) {
 | 
			
		||||
    responseType: 'blob'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获得成本首页 -获取首页数据
 | 
			
		||||
export function getData(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/cost-homepage/getData',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获得成本首页 -详细首页数据
 | 
			
		||||
export function getDetailData(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/cost-homepage/getDetailData',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
@@ -15,7 +15,7 @@ export function updatecostOriginRatioHis(data) {
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
// 获得原片良品率
 | 
			
		||||
// 获得原片产线良品率
 | 
			
		||||
export function getcostOriginRatioHisPage(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/cost-origin-ratio-his/page',
 | 
			
		||||
@@ -24,6 +24,15 @@ export function getcostOriginRatioHisPage(query) {
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获得原片工段良品率
 | 
			
		||||
export function getcostOriginWSRatioHisPage(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/cost-origin-ratio-his/page-ws',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 导出原片良品率 Excel
 | 
			
		||||
export function exportcostOriginRatioHisExcel(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
@@ -34,3 +43,14 @@ export function exportcostOriginRatioHisExcel(query) {
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 导出原片良品率 工段Excel
 | 
			
		||||
export function exportcostOriginWSRatioHisExcel(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/cost-origin-ratio-his/export-excel-ws',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query,
 | 
			
		||||
    responseType: 'blob'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										19
									
								
								src/api/environmental/environmentalLog.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,19 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
 | 
			
		||||
// 获得环保数据历史分页
 | 
			
		||||
export function getCostEnviHisPage(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/monitoring/cost-envi-his/page',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 获得余热发电page
 | 
			
		||||
export function yurepage(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/base/energy-quantity-day/yurepage',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										4
									
								
								src/assets/font/font.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,4 @@
 | 
			
		||||
@font-face {
 | 
			
		||||
  font-family: '站酷庆科黄油体';
 | 
			
		||||
  src: url('./站酷庆科黄油体.ttf') format('truetype');;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										
											BIN
										
									
								
								src/assets/font/站酷庆科黄油体.ttf
									
									
									
									
									
										Normal file
									
								
							
							
						
						
							
								
								
									
										22
									
								
								src/assets/icons/svg/cost.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,22 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>切片</title>
 | 
			
		||||
    <defs>
 | 
			
		||||
        <linearGradient x1="91.384997%" y1="100%" x2="25.4330364%" y2="7.84095011e-14%" id="linearGradient-1">
 | 
			
		||||
            <stop stop-color="#4BFFC8" offset="0%"></stop>
 | 
			
		||||
            <stop stop-color="#45F2EC" offset="100%"></stop>
 | 
			
		||||
        </linearGradient>
 | 
			
		||||
        <linearGradient x1="91.384997%" y1="100%" x2="25.4330364%" y2="7.84095011e-14%" id="linearGradient-2">
 | 
			
		||||
            <stop stop-color="#FFFFFF" offset="0%"></stop>
 | 
			
		||||
            <stop stop-color="#FFFFFF" offset="100%"></stop>
 | 
			
		||||
        </linearGradient>
 | 
			
		||||
    </defs>
 | 
			
		||||
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
        <g id="成本看板" transform="translate(-64.000000, -290.000000)" fill-rule="nonzero">
 | 
			
		||||
            <g id="成本" transform="translate(64.000000, 290.000000)">
 | 
			
		||||
                <rect id="矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="32" height="32"></rect>
 | 
			
		||||
                <path d="M24.8336138,7.21888656 C25.307557,7.21888656 25.7025096,7.62700427 25.6893445,8.08778234 L25.6893445,25.768495 C25.6893445,26.5452352 25.2417316,26.6505559 24.859944,26.6505559 L7.17923134,26.6505559 C6.6921231,26.6505559 6.31033556,26.2556033 6.31033556,25.7816601 L6.31033556,8.10094743 C6.31033556,7.61383919 6.70528819,7.23205165 7.17923134,7.23205165 L10.3915127,7.23205165 L10.3915127,9.00933847 C10.3915127,9.41745619 10.733805,9.75974847 11.1419227,9.75974847 L20.8709225,9.75974847 C21.2790402,9.75974847 21.6213325,9.43062128 21.6213325,9.00933847 L21.6213325,7.21888656 Z M21.3580307,13.7224398 C21.0289035,13.3933127 20.5154651,13.3933127 20.1863379,13.7224398 L14.5385153,19.3702624 L11.7738469,16.6319242 C11.4447197,16.302797 10.9312813,16.302797 10.6021541,16.6319242 C10.2730269,16.9610514 10.2730269,17.4744898 10.6021541,17.803617 L13.9460864,21.1475493 C14.2752136,21.4766764 14.788652,21.4766764 15.1177792,21.1475493 L21.3711958,14.9072977 C21.5423419,14.7361516 21.6213325,14.5386753 21.6213325,14.3148688 C21.6213325,14.0910623 21.5291768,13.893586 21.3580307,13.7224398 Z M19.896706,5.34944412 C20.1863379,5.34944412 20.4364746,5.59958078 20.4364746,5.88921271 L20.4364746,8.10094743 C20.4364746,8.39057936 20.1863379,8.64071602 19.896706,8.64071602 L12.1161392,8.64071602 L12.1161392,8.6670462 C11.8265073,8.6670462 11.5763706,8.41690953 11.5763706,8.1272776 L11.5763706,5.88921271 C11.5763706,5.59958078 11.8265073,5.34944412 12.1161392,5.34944412 L19.896706,5.34944412 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
 | 
			
		||||
            </g>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 2.7 KiB  | 
							
								
								
									
										12
									
								
								src/assets/icons/svg/costchart.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,12 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>切片</title>
 | 
			
		||||
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
        <g id="成本看板" transform="translate(-64.000000, -633.000000)" fill="#FFFFFF" fill-rule="nonzero">
 | 
			
		||||
            <g id="近期成本" transform="translate(64.000000, 633.000000)">
 | 
			
		||||
                <rect id="矩形" opacity="0" x="0" y="0" width="32" height="32"></rect>
 | 
			
		||||
                <path d="M26,23 L18.2,27.8 C17.6,28.2 17,27.8 17,27 L17,15.8 C17,15.6 17.2,15.2 17.4,15 L25.2,10.2 C25.8,9.8 26.4,10.2 26.4,11 L26.4,22.4 C26.4,22.6 26.2,23 26,23 Z M6,23 L13.8,27.8 C14.4,28.2 15,27.8 15,27 L15,15.8 C15,15.6 14.8,15.2 14.6,15 L6.8,10.2 C6.4,10 5.6,10.4 5.6,11 L5.6,22.4 C5.6,22.6 5.8,23 6,23 Z M15.8,4 L6.8,7.4 C6.4,7.6 6.4,8.2 6.8,8.4 L15.8,14 C16,14 16.2,14 16.2,14 L25.4,8.4 C25.8,8.2 25.8,7.6 25.4,7.4 L16.2,4 C16,4 16,4 15.8,4 Z" id="形状"></path>
 | 
			
		||||
            </g>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 1.1 KiB  | 
							
								
								
									
										22
									
								
								src/assets/icons/svg/energy.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,22 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="24.3417579px" height="24.000009px" viewBox="0 0 24.3417579 24.000009" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>统计</title>
 | 
			
		||||
    <defs>
 | 
			
		||||
        <linearGradient x1="99.4683184%" y1="100%" x2="20.6346149%" y2="7.84095011e-14%" id="linearGradient-1">
 | 
			
		||||
            <stop stop-color="#4BFFC8" offset="0%"></stop>
 | 
			
		||||
            <stop stop-color="#45F2EC" offset="100%"></stop>
 | 
			
		||||
        </linearGradient>
 | 
			
		||||
        <linearGradient x1="99.4683184%" y1="100%" x2="20.6346149%" y2="7.84095011e-14%" id="linearGradient-2">
 | 
			
		||||
            <stop stop-color="#FFFFFF" offset="0%"></stop>
 | 
			
		||||
            <stop stop-color="#FFFFFF" offset="100%"></stop>
 | 
			
		||||
        </linearGradient>
 | 
			
		||||
    </defs>
 | 
			
		||||
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
        <g id="成本看板" transform="translate(-1327.000000, -636.000000)" fill-rule="nonzero">
 | 
			
		||||
            <g id="统计" transform="translate(1327.000000, 636.000000)">
 | 
			
		||||
                <rect id="矩形" fill="#FFFFFF" opacity="0" x="0" y="1.29865498e-07" width="23.9999981" height="23.9999981"></rect>
 | 
			
		||||
                <path d="M21.0417425,10.2952681 L19.5753585,10.2952681 L19.5753585,5.90037875 C19.5730113,5.34644149 19.1232931,4.89862885 18.5693508,4.89863383 L13.1812421,4.89863383 L13.1812421,3.15517144 C13.1837389,2.30739523 12.8439612,1.49449588 12.2388994,0.900668572 C11.6338375,0.306841265 10.8147135,-0.0176430365 9.96713292,0.000740689882 C8.21105284,0.081169063 6.8366707,1.54239403 6.8638551,3.30010475 L6.8638551,4.89863383 L1.47574634,4.89863383 C0.921804107,4.89862885 0.472085895,5.34644149 0.46970252,5.90037875 L0.46970252,9.28073494 C0.467465023,9.54901885 0.572450222,9.80709649 0.76136025,9.99760745 C0.950270278,10.1881184 1.2074528,10.2952777 1.47574634,10.2952681 L2.03842858,10.2952681 C3.79455985,10.2680012 5.25513623,11.6398863 5.33779264,13.3942831 C5.35388802,14.2418862 5.02721285,15.0601101 4.4317847,15.6635629 C3.83635654,16.2670156 3.02257894,16.6046145 2.1748364,16.5998668 L1.47574634,16.5998668 C0.92014366,16.5998668 0.46970252,17.0502718 0.46970252,17.6058745 L0.46970252,22.9939832 C0.46970252,23.5495859 0.92014366,24 1.47574634,24 L5.85784745,24 C6.1250049,24.0011302 6.38154936,23.8955063 6.57045992,23.7065957 C6.75937048,23.5176851 6.86499438,23.2611407 6.8638551,22.9939832 L6.8638551,22.4952422 C6.8366707,20.7375314 8.21105284,19.2763065 9.96713292,19.1958781 C10.8147135,19.1774944 11.6338375,19.5019787 12.2388994,20.095806 C12.8439612,20.6896333 13.1837389,21.5025326 13.1812421,22.3503088 L13.1812421,22.9939832 C13.1801084,23.2604003 13.2851484,23.5162945 13.473135,23.7050811 C13.6611216,23.8938677 13.9165675,24 14.182987,24 L18.5693508,24 C19.1249535,24 19.5753585,23.5495859 19.5753585,22.9939832 L19.5753585,16.5998668 L21.1824131,16.5998668 C22.0301722,16.6034883 22.8435102,16.2647998 23.4381378,15.6605426 C24.0327653,15.0562855 24.3583453,14.237612 24.3411066,13.3900204 C24.2562262,11.637307 22.7962968,10.2679159 21.0417425,10.2952681 Z" id="路径" fill="url(#linearGradient-2)"></path>
 | 
			
		||||
            </g>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 3.1 KiB  | 
							
								
								
									
										12
									
								
								src/assets/icons/svg/fullScreenView.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,12 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="32px" height="32px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>编组 54</title>
 | 
			
		||||
    <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
        <g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
 | 
			
		||||
            <g id="编组-54" transform="translate(1866.000000, 36.000000)">
 | 
			
		||||
                <rect id="矩形" stroke="#69b4ff" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="32" height="32"></rect>
 | 
			
		||||
                <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#69b4ff" fill-rule="nonzero" opacity="0.79078311"></path>
 | 
			
		||||
            </g>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 4.1 KiB  | 
							
								
								
									
										12
									
								
								src/assets/icons/svg/line.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,12 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>产量</title>
 | 
			
		||||
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
        <g id="深加工看板" transform="translate(-68.000000, -297.000000)" fill="#FFFFFF" fill-rule="nonzero">
 | 
			
		||||
            <g id="产量" transform="translate(68.000000, 297.000000)">
 | 
			
		||||
                <rect id="矩形" opacity="0" x="0" y="0" width="24" height="24"></rect>
 | 
			
		||||
                <path d="M22.2162957,1 L1.78372985,1 C1.35093374,1 1,1.33440606 1,1.75168741 L1,7 L23,7 L23,1.75168741 C23,1.33486987 22.6491174,1 22.2162957,1 Z M4.00067655,5 C3.44751496,5 3,4.5525025 3,3.99928444 C3,3.44752352 3.44751496,3 4.00067655,3 C4.55245902,3 5,3.44752352 5,3.99928444 C5,4.5525025 4.55245902,5 4.00067655,5 L4.00067655,5 Z M1,22.2486389 C1,22.6651285 1.35099088,23 1.78385746,23 L22.2161681,23 C22.6499302,23 23,22.6651041 23,22.2486389 L23,17 L1,17 L1,22.2486389 Z M4.00067655,19 C4.55245902,19 5,19.4475091 5,19.9997788 C5,20.5524648 4.55245902,21 4.00067655,21 C3.44751496,21 3,20.5524648 3,19.9997788 C3,19.4475091 3.44751496,19 4.00067655,19 Z M1,15 L23,15 L23,9 L1,9 L1,15 Z M4.00067655,11 C4.55245902,11 5,11.4479977 5,12.0002082 C5,12.552939 4.55245902,13 4.00067655,13 C3.44751496,13 3,12.552939 3,12.0002082 C3,11.4479977 3.44751496,11 4.00067655,11 L4.00067655,11 Z" id="形状"></path>
 | 
			
		||||
            </g>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 1.5 KiB  | 
							
								
								
									
										10
									
								
								src/assets/icons/svg/unFullScreenView.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,10 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>编组 54备份</title>
 | 
			
		||||
    <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
        <g id="编组-54备份">
 | 
			
		||||
            <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
 | 
			
		||||
            <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#69b4ff" fill-rule="nonzero" opacity="0.79078311"></path>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 3.9 KiB  | 
							
								
								
									
										13
									
								
								src/assets/icons/svg/yanqi.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,13 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="24px" height="23.9254658px" viewBox="0 0 24 23.9254658" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>烟气</title>
 | 
			
		||||
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
        <g id="成本看板" transform="translate(-1319.000000, -293.962733)" fill-rule="nonzero">
 | 
			
		||||
            <g id="烟气" transform="translate(1319.000000, 293.962733)">
 | 
			
		||||
                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="23.9254658"></rect>
 | 
			
		||||
                <path d="M10.6744092,10.2458592 C10.6744092,10.2458592 3.76099563,15.5072464 6.34479666,19.9378882 C5.78613697,19.5917443 3.83082809,18.2071687 3.2721684,17.4456522 C1.73585426,15.5072464 1.80568673,14.1918996 2.36434642,12.8765528 C3.6213307,9.89971532 7.39228357,6.9921066 8.50960292,5.1229296 C10.3950794,2.07686335 8.85876522,-7.08336081e-14 8.85876522,-7.08336081e-14 C8.85876522,-7.08336081e-14 12.769383,1.73071946 12.9788804,4.98447204 C13.2582102,8.16899586 10.6744092,10.2458592 10.6744092,10.2458592 Z" id="路径" fill="#FFFFFF"></path>
 | 
			
		||||
                <path d="M9.55552302,-6.3573715e-14 L9.48496561,-6.3573715e-14 L9.41440819,-6.3573715e-14 L9.34385077,-6.3573715e-14 L9.27329335,-6.3573715e-14 C9.27329335,-6.3573715e-14 9.20273594,-6.3573715e-14 9.20273596,0.0693204763 L9.13217854,0.0693204763 L9.06162113,0.138640927 L8.99106371,0.207961403 L8.99106371,0.485243308 C8.99106371,0.485243308 8.99106371,0.554563785 9.06162113,0.554563785 L9.06162113,0.623884235 C10.1199823,2.35689604 9.69663786,4.36718972 7.79158769,6.65476534 C7.43880063,7.07068817 6.94489873,7.55593148 6.38043941,8.17981571 C4.96929114,9.35826373 3.6992577,10.6753527 2.99368358,11.7844803 C2.0764372,13.1015692 1.79420756,14.6266197 2.14699459,16.0130291 C2.57033907,17.8153614 4.05204476,19.4790527 6.52155425,20.8654621 C6.59211167,20.9347826 6.66266909,20.9347826 6.73322648,20.9347826 C6.80378389,20.9347826 6.87434131,20.9347826 6.94489873,20.8654621 C7.01545615,20.7961417 7.08601356,20.7961417 7.08601354,20.7268212 L7.08601354,20.6575007 L7.08601354,20.5881803 L7.08601354,20.5188598 L7.08601354,20.4495393 C7.08601354,20.3802188 7.08601354,20.3802188 7.01545615,20.3802188 L7.01545615,20.3108984 C5.60430787,18.3006047 7.01545615,16.0130291 7.9327025,14.9039015 L8.00325992,14.8345811 C8.92050629,13.656133 9.83775267,12.7549669 10.6138842,11.9231212 C11.1783435,11.3685574 11.6722454,10.8833141 12.0955899,10.3287504 C13.647853,8.45709759 14.2123123,6.72408579 13.9300827,5.06039446 C13.5772956,3.18874173 12.0955899,1.4557299 9.55552302,-6.3573715e-14 Z M9.48470738,9.26748999 C8.64336853,10.0744997 6.3074421,10.0757542 5.3258801,11.2862689 C3.92364867,12.9675392 5.42114982,16.3973307 5.7015961,17.9440994 C4.29936467,16.9353372 3.38791424,15.8593242 3.10746797,14.6488095 C2.82702169,13.5727965 3.10746797,12.3622819 3.8085837,11.2862689 L3.87869525,11.219018 C4.5096994,10.2102558 5.84181925,8.93249038 6.89349283,7.9237282 C7.52449698,7.31847086 8.01527795,6.84771519 8.3658358,6.44421029 C10.3289598,4.22493344 10.6094061,2.34191068 10.3289598,0.99689441 C11.5208565,1.87115499 12.6426417,3.01441881 12.9230879,4.49393671 C13.2035342,5.77170217 12.7127532,7.18396925 11.5208565,8.66348714 L9.48470738,9.26748999 Z M21.9281191,9.58246693 C21.6004931,7.86679721 20.3555139,6.28838107 18.1931817,4.98447205 L18.1276565,4.98447205 L18.0621313,4.98447205 L17.9966061,4.98447205 L17.9310808,4.98447205 C17.8655556,4.98447205 17.8655556,4.98447205 17.8655556,5.05309884 L17.8000304,5.05309884 L17.7345052,5.12172564 L17.66898,5.19035243 L17.66898,5.46485958 C17.66898,5.46485958 17.66898,5.53348637 17.7345052,5.53348637 L17.7345052,5.60211316 C18.6518582,7.11190253 18.2587069,8.89619902 16.6861017,10.9550027 C16.4240008,11.2981367 15.9653243,11.7785242 15.5066478,12.3275385 C14.5237695,13.3569403 13.4098408,14.5922225 12.8201138,15.6216244 C12.0993364,16.7882798 11.8372356,18.1608156 12.0993364,19.4647245 C12.4924877,21.1117675 13.7374669,22.5529301 15.8342739,23.856839 C15.8997991,23.9254658 15.9653243,23.9254658 16.0308495,23.9254658 C16.0963747,23.9254658 16.1619,23.9254658 16.2274252,23.856839 C16.2929504,23.7882123 16.3584756,23.7882123 16.3584756,23.7195855 L16.3584756,23.6509587 L16.3584756,23.5823319 L16.3584756,23.5137051 L16.3584756,23.4450783 C16.3584756,23.4450783 16.3584756,23.3764515 16.2929504,23.3764515 L16.2929504,23.3078247 C15.1790217,21.5235282 16.2929504,19.5333513 17.079253,18.5039495 L17.1447782,18.4353227 C17.9310808,17.3372941 18.6518582,16.5137726 19.3726356,15.8275047 C19.8313122,15.3471172 20.2899887,14.8667297 20.6176148,14.454969 C21.7315435,12.6020456 22.19022,11.0922563 21.9281191,9.58246693 L21.9281191,9.58246693 Z M20.5837087,13.7271478 C20.225071,14.1241412 19.7947058,14.5211345 19.2926131,14.9842934 C18.5036102,15.7121146 17.6428797,16.5061012 16.7104218,17.6309157 C15.4193261,19.086558 14.9172334,20.6083659 15.2041435,21.931677 C13.9130479,21.0715248 13.2958761,20.3327069 13.0806935,19.3402236 C12.8655109,18.3477402 13.0806935,17.3552568 13.7262413,16.3627735 L13.7979689,16.2966079 C14.3717892,15.4364556 15.4193261,13.99181 16.4235116,13.0654922 C16.9973319,12.5361677 17.4994247,12.0730088 17.7863348,11.742181 C19.5077957,9.75721431 19.8664333,8.16924091 19.6512507,6.97826087 C20.7271638,7.77224757 21.7313493,8.76473095 21.9465319,9.95571099 C22.1617145,11.2128566 21.7313493,12.4700022 20.5837087,13.7271478 Z" id="形状" fill="#FFFFFF"></path>
 | 
			
		||||
            </g>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 5.4 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/img/cold-data-board-msg1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 16 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/img/cold-data-board-msg2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 14 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/img/home-bg.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.2 MiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/img/home-progress-bg.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 936 B  | 
@@ -67,7 +67,7 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			title: '中建材智能化院',
 | 
			
		||||
			title: '中建材自贡新能源',
 | 
			
		||||
			logo: logoImg,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
 
 | 
			
		||||
@@ -4,6 +4,7 @@ import Element from 'element-ui';
 | 
			
		||||
import './assets/styles/element-variables.scss';
 | 
			
		||||
import '@/assets/styles/index.scss'; // global css
 | 
			
		||||
import '@/assets/styles/ruoyi.scss'; // ruoyi css
 | 
			
		||||
import '@/assets/font/font.css'
 | 
			
		||||
import App from './App';
 | 
			
		||||
import store from './store';
 | 
			
		||||
import router from './router';
 | 
			
		||||
@@ -34,7 +35,6 @@ import {
 | 
			
		||||
	getDictDatas,
 | 
			
		||||
	getDictDatas2,
 | 
			
		||||
} from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
import './theme/index.css'; // 自定义主题包 - code-brick-zj
 | 
			
		||||
 | 
			
		||||
// 全局方法挂载
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2022-08-24 11:19:43
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2024-04-02 09:33:29
 | 
			
		||||
 * @LastEditTime: 2025-02-21 13:18:46
 | 
			
		||||
 * @Description:
 | 
			
		||||
 */
 | 
			
		||||
export default {
 | 
			
		||||
@@ -16,7 +16,7 @@ export default {
 | 
			
		||||
      },
 | 
			
		||||
      tableData: [], //table数据
 | 
			
		||||
      listQuery: { //分页
 | 
			
		||||
        pageSize: 10,
 | 
			
		||||
        pageSize: 20,
 | 
			
		||||
        pageNo: 1,
 | 
			
		||||
        total: 1,
 | 
			
		||||
      },
 | 
			
		||||
 
 | 
			
		||||
@@ -69,6 +69,26 @@ export const constantRoutes = [
 | 
			
		||||
    component: (resolve) => require(['@/views/print/design'], resolve),
 | 
			
		||||
    hidden: true
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    path: '/allDashboard-model',
 | 
			
		||||
    component: (resolve) => require(['@/views/dashboard/allDashboard/index-model'], resolve),
 | 
			
		||||
    hidden: true
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    path: '/rawDashboard-model',
 | 
			
		||||
    component: (resolve) => require(['@/views/dashboard/rawDashboard/index-model'], resolve),
 | 
			
		||||
    hidden: true
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    path: '/deepDashboard-model',
 | 
			
		||||
    component: (resolve) => require(['@/views/dashboard/deepDashboard/index-model'], resolve),
 | 
			
		||||
    hidden: true
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    path: '/coldDashboard-model',
 | 
			
		||||
    component: (resolve) => require(['@/views/dashboard/coldDashboard/index-model'], resolve),
 | 
			
		||||
    hidden: true
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    path: "",
 | 
			
		||||
    component: Layout,
 | 
			
		||||
@@ -76,9 +96,15 @@ export const constantRoutes = [
 | 
			
		||||
    children: [
 | 
			
		||||
      {
 | 
			
		||||
        path: "index",
 | 
			
		||||
        component: (resolve) => require(["@/views/cost/raw/costMaterial/index"], resolve),
 | 
			
		||||
        component: (resolve) => require(["@/views/cost/index"], resolve),
 | 
			
		||||
        name: "首页",
 | 
			
		||||
        meta: { title: "首页", icon: "dashboard", affix: true },
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        path: "indexDetail",
 | 
			
		||||
        component: (resolve) => require(["@/views/cost/indexDetail"], resolve),
 | 
			
		||||
        name: "首页详细",
 | 
			
		||||
        meta: { title: "首页详细", icon: "dashboard"},
 | 
			
		||||
        hidden: true
 | 
			
		||||
      },
 | 
			
		||||
    ],
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										121
									
								
								src/views/Environmental/Envi-yure-log.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,121 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2024-11-13 14:01:16
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2025-02-21 14:32:08
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<div>
 | 
			
		||||
		<div class="app-container">
 | 
			
		||||
			<!-- 搜索工作栏 -->
 | 
			
		||||
			<search-bar
 | 
			
		||||
				:formConfigs="formConfig"
 | 
			
		||||
				ref="searchBarForm"
 | 
			
		||||
				@headBtnClick="buttonClick" />
 | 
			
		||||
			<!-- 列表 -->
 | 
			
		||||
			<base-table
 | 
			
		||||
				:page="listQuery.pageNo"
 | 
			
		||||
				:limit="listQuery.pageSize"
 | 
			
		||||
				:table-props="tableProps"
 | 
			
		||||
				:table-data="tableData"
 | 
			
		||||
				:max-height="tableH" />
 | 
			
		||||
			<pagination
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import basicPage from '@/mixins/basic-page';
 | 
			
		||||
import { yurepage } from '@/api/environmental/environmentalLog';
 | 
			
		||||
import { parseTime } from '@/filter/code-filter';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recordTime',
 | 
			
		||||
		label: '记录时间',
 | 
			
		||||
		filter: parseTime,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'usingQuantity',
 | 
			
		||||
		label: '发电量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(3) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	mixins: [basicPage, tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				getDataListURL: yurepage,
 | 
			
		||||
			},
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '查询',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				statisticType: 1,
 | 
			
		||||
			},
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableData: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
	created() {
 | 
			
		||||
		const end = new Date();
 | 
			
		||||
		const start = new Date();
 | 
			
		||||
		this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
		this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			this.$refs.searchBarForm.formInline.searchTime = [
 | 
			
		||||
				this.listQuery.startTime,
 | 
			
		||||
				this.listQuery.endTime,
 | 
			
		||||
			];
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.statisticType = 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
					console.log(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss"></style>
 | 
			
		||||
							
								
								
									
										131
									
								
								src/views/Environmental/Environmental-log.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,131 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2024-11-13 14:01:16
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2025-02-21 14:31:00
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<div>
 | 
			
		||||
		<div class="app-container">
 | 
			
		||||
			<!-- 搜索工作栏 -->
 | 
			
		||||
			<search-bar
 | 
			
		||||
				:formConfigs="formConfig"
 | 
			
		||||
				ref="searchBarForm"
 | 
			
		||||
				@headBtnClick="buttonClick" />
 | 
			
		||||
			<!-- 列表 -->
 | 
			
		||||
			<base-table
 | 
			
		||||
				:page="listQuery.pageNo"
 | 
			
		||||
				:limit="listQuery.pageSize"
 | 
			
		||||
				:table-props="tableProps"
 | 
			
		||||
				:table-data="tableData"
 | 
			
		||||
				:max-height="tableH" />
 | 
			
		||||
			<pagination
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import basicPage from '@/mixins/basic-page';
 | 
			
		||||
import { getCostEnviHisPage } from '@/api/environmental/environmentalLog';
 | 
			
		||||
import { parseTime } from '@/filter/code-filter';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		label: '记录时间',
 | 
			
		||||
		filter: parseTime,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'envi1',
 | 
			
		||||
		label: '二氧化硫mg/Nm3',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'envi2',
 | 
			
		||||
		label: '氮氧化物mg/Nm3',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'envi3',
 | 
			
		||||
		label: '粉尘mg/Nm3',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	mixins: [basicPage, tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				getDataListURL: getCostEnviHisPage,
 | 
			
		||||
			},
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '查询',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				statisticType: 1,
 | 
			
		||||
			},
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableData: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
	created() {
 | 
			
		||||
		const end = new Date();
 | 
			
		||||
		const start = new Date();
 | 
			
		||||
		this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
		this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			this.$refs.searchBarForm.formInline.searchTime = [
 | 
			
		||||
				this.listQuery.startTime,
 | 
			
		||||
				this.listQuery.endTime,
 | 
			
		||||
			];
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.statisticType = 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
					console.log(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss"></style>
 | 
			
		||||
@@ -57,7 +57,6 @@ const tableProps = [
 | 
			
		||||
    prop: 'createTime',
 | 
			
		||||
    label: '添加时间',
 | 
			
		||||
    filter: parseTime,
 | 
			
		||||
    minWidth: 150
 | 
			
		||||
  },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'name',
 | 
			
		||||
@@ -68,6 +67,10 @@ const tableProps = [
 | 
			
		||||
		label: '原料编码',
 | 
			
		||||
		width: 180,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'level',
 | 
			
		||||
		label: '原料等级',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'unit',
 | 
			
		||||
		label: '单位',
 | 
			
		||||
@@ -149,7 +152,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.listQuery.code = val.code;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-01 13:52:10
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2024-04-11 09:05:16
 | 
			
		||||
 * @LastEditTime: 2025-03-05 15:23:30
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -63,7 +63,7 @@
 | 
			
		||||
						style="width: 75%"
 | 
			
		||||
						v-model="dataForm.price"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入允许留存时间" />
 | 
			
		||||
						placeholder="请输入单价" />
 | 
			
		||||
					{{ unit }}
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
 
 | 
			
		||||
@@ -63,11 +63,11 @@ const tableProps = [
 | 
			
		||||
		label: '原料编码',
 | 
			
		||||
		width: 180,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '单价(元/吨)',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'price',
 | 
			
		||||
	// 	label: '单价(元/千克)',
 | 
			
		||||
	// 	align: 'right',
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'createTime',
 | 
			
		||||
		label: '生效时间',
 | 
			
		||||
@@ -152,7 +152,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.materialId = val.name;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
 
 | 
			
		||||
@@ -154,7 +154,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.listQuery.code = val.code;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
 
 | 
			
		||||
@@ -85,7 +85,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
 
 | 
			
		||||
@@ -120,7 +120,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.productionLineId = val.productionLineId;
 | 
			
		||||
					this.listQuery.productId = val.productId;
 | 
			
		||||
					this.listQuery.startTime = val.startTime;
 | 
			
		||||
 
 | 
			
		||||
@@ -162,7 +162,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.listQuery.code = val.code;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
 
 | 
			
		||||
@@ -196,7 +196,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
 
 | 
			
		||||
@@ -152,7 +152,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
 
 | 
			
		||||
@@ -309,7 +309,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.lineId = val.line ? val.line : undefined;
 | 
			
		||||
					this.listQuery.reportType = val.reportType ? val.reportType : undefined;
 | 
			
		||||
					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;
 | 
			
		||||
 
 | 
			
		||||
@@ -263,7 +263,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.proLineId = val.line ? val.line : undefined;
 | 
			
		||||
					this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
 | 
			
		||||
					this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;
 | 
			
		||||
 
 | 
			
		||||
@@ -305,7 +305,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.lineId = val.line ? val.line : undefined;
 | 
			
		||||
					this.listQuery.sectionId = val.section ? val.section : undefined;
 | 
			
		||||
					this.listQuery.reportType = val.reportType ? val.reportType : undefined;
 | 
			
		||||
 
 | 
			
		||||
@@ -321,7 +321,7 @@ export default {
 | 
			
		||||
          console.log(val.timeSlot);
 | 
			
		||||
 | 
			
		||||
					// this.listQuery.pageNo = 1;
 | 
			
		||||
          // this.listQuery.pageSize = 10;
 | 
			
		||||
          // this.listQuery.pageSize = 20;
 | 
			
		||||
          this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined
 | 
			
		||||
          this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined
 | 
			
		||||
          this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div>
 | 
			
		||||
		<div style="background: #f2f4f9; height: 40px; width: 100%">
 | 
			
		||||
		<!-- <div style="background: #f2f4f9; height: 40px; width: 100%">
 | 
			
		||||
			<ButtonNav :menus="['按日期', '按规格']" @change="currentMenu">
 | 
			
		||||
				<template v-slot:tab1>
 | 
			
		||||
					<div>按日期</div>
 | 
			
		||||
@@ -9,7 +9,7 @@
 | 
			
		||||
					<div>按规格</div>
 | 
			
		||||
				</template>
 | 
			
		||||
			</ButtonNav>
 | 
			
		||||
		</div>
 | 
			
		||||
		</div> -->
 | 
			
		||||
		<div class="app-container energyOverlimitLog">
 | 
			
		||||
			<div v-show="activeName === 'his'">
 | 
			
		||||
				<!-- 搜索工作栏 -->
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -86,32 +86,36 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'originArea',
 | 
			
		||||
		label: '原片下片面积',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'deepArea',
 | 
			
		||||
		label: '深加工下片面积',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'originPrice',
 | 
			
		||||
		label: '原片成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'deepPrice',
 | 
			
		||||
		label: '深加工成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '总成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
@@ -244,19 +248,12 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			this.formConfig2[0].startPlaceholder = '开始时间';
 | 
			
		||||
			this.formConfig2[0].endPlaceholder = '结束时间';
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
@@ -274,7 +271,7 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
@@ -334,12 +331,19 @@ export default {
 | 
			
		||||
				this.otherMethods(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		/** 导出按钮操作 */
 | 
			
		||||
		handleExport() {
 | 
			
		||||
			let exportURL, title;
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				exportURL = exportCostSumExcel;
 | 
			
		||||
        title = '总成本统计-按日期';
 | 
			
		||||
        title = '总成本统计';
 | 
			
		||||
			} else {
 | 
			
		||||
				exportURL = exportRawStatisticsRealtimeExcel;
 | 
			
		||||
        title = '总成本统计-按规格';
 | 
			
		||||
 
 | 
			
		||||
@@ -77,7 +77,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name||null;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
@@ -90,7 +90,7 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.listQuery.recTime = val.searchTime;
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
 
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -86,24 +86,27 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'energyTypeName',
 | 
			
		||||
		label: '能源类型',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '监控对象',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'meterName',
 | 
			
		||||
		label: '抄表名',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'bindObjectName',
 | 
			
		||||
	// 	label: '监控对象',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'meterName',
 | 
			
		||||
	// 	label: '抄表名',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'quantity',
 | 
			
		||||
		label: '累计使用量',
 | 
			
		||||
@@ -115,20 +118,24 @@ const tableProps = [
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'energyTypeName',
 | 
			
		||||
		label: '能源类型',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '监控对象',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'meter',
 | 
			
		||||
		label: '抄表名',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'bindObjectName',
 | 
			
		||||
	// 	label: '监控对象',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'meter',
 | 
			
		||||
	// 	label: '抄表名',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'quantity',
 | 
			
		||||
		label: '累计使用量',
 | 
			
		||||
@@ -207,13 +214,16 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -262,26 +272,18 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			this.formConfig2[1].startPlaceholder = '开始时间';
 | 
			
		||||
			this.formConfig2[1].endPlaceholder = '结束时间';
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.energyTypeId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						: null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -292,13 +294,18 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.energyTypeId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
					}
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
@@ -320,15 +327,26 @@ export default {
 | 
			
		||||
				const end = new Date();
 | 
			
		||||
				const start = new Date();
 | 
			
		||||
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
 | 
			
		||||
				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.searchBarForm2.formInline.searchTime = [
 | 
			
		||||
						this.listQuery.startTime,
 | 
			
		||||
						this.listQuery.endTime,
 | 
			
		||||
					];
 | 
			
		||||
				});
 | 
			
		||||
				this.listQuery.name = null;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			if (this.listQuery.startTime) {
 | 
			
		||||
 
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'otherCostName',
 | 
			
		||||
@@ -99,9 +102,14 @@ const tableProps = [
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '总价(元)',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'remark',
 | 
			
		||||
	// 	label: '备注',
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'otherCostName',
 | 
			
		||||
		label: '成本名称',
 | 
			
		||||
@@ -110,6 +118,7 @@ const tableProps2 = [
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '总价(元)',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
@@ -182,13 +191,16 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -237,26 +249,20 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			this.formConfig2[1].startPlaceholder = '开始时间';
 | 
			
		||||
			this.formConfig2[1].endPlaceholder = '结束时间';
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -267,13 +273,18 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
					}
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
@@ -295,15 +306,26 @@ export default {
 | 
			
		||||
				const end = new Date();
 | 
			
		||||
				const start = new Date();
 | 
			
		||||
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
 | 
			
		||||
				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.searchBarForm2.formInline.searchTime = [
 | 
			
		||||
						this.listQuery.startTime,
 | 
			
		||||
						this.listQuery.endTime,
 | 
			
		||||
					];
 | 
			
		||||
				});
 | 
			
		||||
				this.listQuery.name = null;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			getRawOthercostSunPage(this.listQuery).then((response) => {
 | 
			
		||||
 
 | 
			
		||||
@@ -65,6 +65,7 @@ const tableProps = [
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '成本金额',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
@@ -161,7 +162,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name||null;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
@@ -174,7 +175,7 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name||null;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
 
 | 
			
		||||
@@ -10,9 +10,9 @@
 | 
			
		||||
		<span>
 | 
			
		||||
			{{
 | 
			
		||||
				injectData.type == 1
 | 
			
		||||
					? `每天等价,${injectData.price}元`
 | 
			
		||||
					? `每天等价,${Number(injectData.price)}元`
 | 
			
		||||
					: injectData.type == 2
 | 
			
		||||
					? `总价${injectData.price}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
 | 
			
		||||
					? `总价${Number(injectData.price)}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
 | 
			
		||||
					: '-'
 | 
			
		||||
			}}
 | 
			
		||||
		</span>
 | 
			
		||||
 
 | 
			
		||||
@@ -52,7 +52,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -85,9 +85,12 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'productionLineName',
 | 
			
		||||
@@ -100,22 +103,27 @@ const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'innum',
 | 
			
		||||
		label: '上片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outnum',
 | 
			
		||||
		label: '下片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? val * 100 + '%' : '-'),
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'productionLineName',
 | 
			
		||||
@@ -128,15 +136,17 @@ const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'innum',
 | 
			
		||||
		label: '进片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outnum',
 | 
			
		||||
		label: '出片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? val * 100 + '%' : '-'),
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
@@ -170,13 +180,15 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -225,22 +237,15 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.productionLineId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
@@ -253,12 +258,12 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.productionLineId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
@@ -309,10 +314,20 @@ export default {
 | 
			
		||||
				this.otherMethods(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		successSubmit() {
 | 
			
		||||
			this.handleCancel();
 | 
			
		||||
			const val = this.activeName === 'his' ? '产线良品率' : 'now';
 | 
			
		||||
			this.currentMenu(val);
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		/** 导出按钮操作 */
 | 
			
		||||
		handleExport() {
 | 
			
		||||
 
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '时间',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
@@ -102,33 +105,42 @@ const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'inCount',
 | 
			
		||||
		label: '上片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outCount',
 | 
			
		||||
		label: '下片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? val * 100 + '%' : '-'),
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costSum',
 | 
			
		||||
		label: '深加工成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costPiece',
 | 
			
		||||
		label: '单片成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costArea',
 | 
			
		||||
		label: '每平米成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '产线',
 | 
			
		||||
@@ -140,30 +152,35 @@ const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'inCount',
 | 
			
		||||
		label: '上片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outCount',
 | 
			
		||||
		label: '下片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? val * 100 + '%' : '-'),
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costSum',
 | 
			
		||||
		label: '深加工成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costPiece',
 | 
			
		||||
		label: '单片成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costArea',
 | 
			
		||||
		label: '每平米成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
@@ -225,13 +242,16 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
@@ -288,26 +308,20 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			this.formConfig2[0].startPlaceholder = '开始时间';
 | 
			
		||||
			this.formConfig2[0].endPlaceholder = '结束时间';
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -318,13 +332,18 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
					}
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
@@ -346,15 +365,26 @@ export default {
 | 
			
		||||
				const end = new Date();
 | 
			
		||||
				const start = new Date();
 | 
			
		||||
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
				this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
 | 
			
		||||
				this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.searchBarForm2.formInline.searchTime = [
 | 
			
		||||
						this.listQuery.startTime,
 | 
			
		||||
						this.listQuery.endTime,
 | 
			
		||||
					];
 | 
			
		||||
				});
 | 
			
		||||
				this.listQuery.name = null;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			if (this.listQuery.startTime) {
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										527
									
								
								src/views/cost/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,527 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="home-page">
 | 
			
		||||
		<div class="date-tabs">
 | 
			
		||||
			<!-- @tab-click="handleClick" -->
 | 
			
		||||
			<el-tabs v-model="activeName" @tab-click="timedayChange" :stretch="true">
 | 
			
		||||
				<el-tab-pane
 | 
			
		||||
					:label="'\u2002\u2002日\u2002\u2002'"
 | 
			
		||||
					name="日"></el-tab-pane>
 | 
			
		||||
				<el-tab-pane
 | 
			
		||||
					:label="'\u2002\u2002周\u2002\u2002'"
 | 
			
		||||
					name="周"></el-tab-pane>
 | 
			
		||||
				<el-tab-pane
 | 
			
		||||
					:label="'\u2002\u2002月\u2002\u2002'"
 | 
			
		||||
					name="月"></el-tab-pane>
 | 
			
		||||
				<el-tab-pane
 | 
			
		||||
					:label="'\u2002\u2002年\u2002\u2002'"
 | 
			
		||||
					name="年"></el-tab-pane>
 | 
			
		||||
			</el-tabs>
 | 
			
		||||
			<div class="detail">
 | 
			
		||||
				<el-date-picker
 | 
			
		||||
					v-model="timeday"
 | 
			
		||||
					align="right"
 | 
			
		||||
					type="date"
 | 
			
		||||
					format="yyyy-MM-dd"
 | 
			
		||||
					valueFormat="yyyy-MM-dd"
 | 
			
		||||
					:clearable="false"
 | 
			
		||||
					@change="timedayChange"
 | 
			
		||||
					placeholder="选择日期"
 | 
			
		||||
					:picker-options="pickerOptions"></el-date-picker>
 | 
			
		||||
			</div>
 | 
			
		||||
			<!-- <div class="current-date">( {{ showTime }} )</div> -->
 | 
			
		||||
			<div class="current-time">
 | 
			
		||||
				<el-button
 | 
			
		||||
					size="mini"
 | 
			
		||||
					type="text"
 | 
			
		||||
					style="font-size: 24px; color: white; margin-right: 30px"
 | 
			
		||||
          :disabled="!permission"
 | 
			
		||||
					@click="goDetail">
 | 
			
		||||
					<svg-icon icon-class="list"></svg-icon>
 | 
			
		||||
					详细
 | 
			
		||||
				</el-button>
 | 
			
		||||
				<span style="display: inline-block; margin-right: 16px">
 | 
			
		||||
					{{ topTime + timeZone }}
 | 
			
		||||
				</span>
 | 
			
		||||
				<span>{{ topDate }}</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
		<el-row class="main-top" :gutter="16">
 | 
			
		||||
			<el-col :span="24" style="position: relative">
 | 
			
		||||
				<div class="title">
 | 
			
		||||
					<svg-icon icon-class="home-produce" />
 | 
			
		||||
					<span class="title-inner">生产总成本</span>
 | 
			
		||||
				</div>
 | 
			
		||||
				<el-row class="box">
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.priceS }}万元</div>
 | 
			
		||||
						<div class="unit-style">总计成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.matPriceS }}万元</div>
 | 
			
		||||
						<div class="unit-style">原料成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.energyPriceS }}万元</div>
 | 
			
		||||
						<div class="unit-style">能源成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.otherPriceS }}万元</div>
 | 
			
		||||
						<div class="unit-style">其他成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<!-- <el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.ratioS }}</div>
 | 
			
		||||
						<div class="unit-style">综合良品率/%</div>
 | 
			
		||||
					</el-col> -->
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.areaPriceS }}元</div>
 | 
			
		||||
						<div class="unit-style">综合每平米成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
				</el-row>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="24" style="position: relative">
 | 
			
		||||
				<div class="title">
 | 
			
		||||
					<svg-icon icon-class="home-produce" />
 | 
			
		||||
					<span class="title-inner">原片成本</span>
 | 
			
		||||
				</div>
 | 
			
		||||
				<el-row class="box">
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.priceO }}万元</div>
 | 
			
		||||
						<div class="unit-style">原片总成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.matPriceO }}万元</div>
 | 
			
		||||
						<div class="unit-style">原料成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.energyPriceO }}万元</div>
 | 
			
		||||
						<div class="unit-style">能源成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.otherPriceO }}万元</div>
 | 
			
		||||
						<div class="unit-style">其他成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.ratioO }}</div>
 | 
			
		||||
						<div class="unit-style">原片良品率/%</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.areaPriceO }}元</div>
 | 
			
		||||
						<div class="unit-style">原片每平米成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
				</el-row>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="24" style="position: relative">
 | 
			
		||||
				<div class="title">
 | 
			
		||||
					<svg-icon icon-class="home-produce" />
 | 
			
		||||
					<span class="title-inner">深加工成本</span>
 | 
			
		||||
				</div>
 | 
			
		||||
				<el-row class="box">
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.priceD }}万元</div>
 | 
			
		||||
						<div class="unit-style">深加工总成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.energyPriceD }}万元</div>
 | 
			
		||||
						<div class="unit-style">能源成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.otherPriceD }}万元</div>
 | 
			
		||||
						<div class="unit-style">其他成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.ratioD }}</div>
 | 
			
		||||
						<div class="unit-style">深加工良品率/%</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="4" class="num-box shadow">
 | 
			
		||||
						<div class="num-style">{{ homeData.areaPriceD }}元</div>
 | 
			
		||||
						<div class="unit-style">深加工每平米成本</div>
 | 
			
		||||
					</el-col>
 | 
			
		||||
				</el-row>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
		<el-row class="main-bottom" :gutter="16" v-if="false">
 | 
			
		||||
			<el-col :span="9">
 | 
			
		||||
				<div class="chart-wrapper">
 | 
			
		||||
					<line-chart :chart-data="lineChartData" />
 | 
			
		||||
				</div>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="7">
 | 
			
		||||
				<div class="chart-wrapper">
 | 
			
		||||
					<pie-chart />
 | 
			
		||||
				</div>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="8">
 | 
			
		||||
				<div class="chart-wrapper">
 | 
			
		||||
					<bar-chart />
 | 
			
		||||
				</div>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
		<div
 | 
			
		||||
			class="main-footer"
 | 
			
		||||
			style="
 | 
			
		||||
				color: #c7c7c7;
 | 
			
		||||
				user-select: none;
 | 
			
		||||
				font-size: 14px;
 | 
			
		||||
				letter-spacing: 1px;
 | 
			
		||||
				height: 30px;
 | 
			
		||||
				display: grid;
 | 
			
		||||
				place-content: center;
 | 
			
		||||
			">
 | 
			
		||||
			© 中建材智能自动化研究院有限公司
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
import LineChart from '../dashboard/LineChart';
 | 
			
		||||
import PieChart from '../dashboard/PieChart';
 | 
			
		||||
import BarChart from '../dashboard/BarChart';
 | 
			
		||||
import PanelGroup from '../dashboard/PanelGroup';
 | 
			
		||||
import { getData } from '@/api/cost/allCost';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
 | 
			
		||||
const lineChartData = {
 | 
			
		||||
	newVisitis: {
 | 
			
		||||
		expectedData: [100, 120, 161, 134, 105, 160, 165],
 | 
			
		||||
		actualData: [120, 82, 91, 154, 162, 140, 145],
 | 
			
		||||
	},
 | 
			
		||||
	messages: {
 | 
			
		||||
		expectedData: [200, 192, 120, 144, 160, 130, 140],
 | 
			
		||||
		actualData: [180, 160, 151, 106, 145, 150, 130],
 | 
			
		||||
	},
 | 
			
		||||
	purchases: {
 | 
			
		||||
		expectedData: [80, 100, 121, 104, 105, 90, 100],
 | 
			
		||||
		actualData: [120, 90, 100, 138, 142, 130, 130],
 | 
			
		||||
	},
 | 
			
		||||
	shoppings: {
 | 
			
		||||
		expectedData: [130, 140, 141, 142, 145, 150, 160],
 | 
			
		||||
		actualData: [120, 82, 91, 154, 162, 140, 130],
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'Home',
 | 
			
		||||
	mixins: [tableHeightMixin],
 | 
			
		||||
	components: {
 | 
			
		||||
		LineChart,
 | 
			
		||||
		PieChart,
 | 
			
		||||
		PanelGroup,
 | 
			
		||||
		BarChart,
 | 
			
		||||
	},
 | 
			
		||||
	computed: {
 | 
			
		||||
		gradientBackground() {
 | 
			
		||||
			return {
 | 
			
		||||
				'background-image':
 | 
			
		||||
					'linear-gradient(90deg, #f0f0f0 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, #f0f0f0 50%, #f0f0f0 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0))',
 | 
			
		||||
				'background-size': '100px 100px', // 调整条纹的大小
 | 
			
		||||
			};
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			activeName: '日',
 | 
			
		||||
			topDate: '',
 | 
			
		||||
			topTime: '',
 | 
			
		||||
			timeZone: '',
 | 
			
		||||
			user: '',
 | 
			
		||||
			lineChartData: lineChartData.newVisitis,
 | 
			
		||||
			homeData: {},
 | 
			
		||||
			permission: false,
 | 
			
		||||
			timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
 | 
			
		||||
			startTime:
 | 
			
		||||
				moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
 | 
			
		||||
				' 00:00:00',
 | 
			
		||||
			endTime:
 | 
			
		||||
				moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
 | 
			
		||||
				' 00:00:00',
 | 
			
		||||
 | 
			
		||||
			pickerOptions: {
 | 
			
		||||
				disabledDate(time) {
 | 
			
		||||
					return time.getTime() + 3600 * 1000 * 24 > Date.now();
 | 
			
		||||
				},
 | 
			
		||||
				shortcuts: [
 | 
			
		||||
					{
 | 
			
		||||
						text: '今天',
 | 
			
		||||
						onClick(picker) {
 | 
			
		||||
							picker.$emit('pick', new Date());
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						text: '昨天',
 | 
			
		||||
						onClick(picker) {
 | 
			
		||||
							const date = new Date();
 | 
			
		||||
							date.setTime(date.getTime() - 3600 * 1000 * 24);
 | 
			
		||||
							picker.$emit('pick', date);
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						text: '一周前',
 | 
			
		||||
						onClick(picker) {
 | 
			
		||||
							const date = new Date();
 | 
			
		||||
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
							picker.$emit('pick', date);
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.getTime();
 | 
			
		||||
		this.permission = false;
 | 
			
		||||
		this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
 | 
			
		||||
		getUserProfile().then((response) => {
 | 
			
		||||
			this.user = response.data;
 | 
			
		||||
			if (this.user.roles[0].name !== 'dashborad') {
 | 
			
		||||
				this.permission = true;
 | 
			
		||||
				this.getData();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.permission = false;
 | 
			
		||||
				this.homeData = {
 | 
			
		||||
					areaPriceD: '***',
 | 
			
		||||
					areaPriceO: '***',
 | 
			
		||||
					areaPriceS: '***',
 | 
			
		||||
					energyPriceD: '***',
 | 
			
		||||
					energyPriceO: '***',
 | 
			
		||||
					energyPriceS: '***',
 | 
			
		||||
					matPriceO: '***',
 | 
			
		||||
					matPriceS: '***',
 | 
			
		||||
					otherPriceD: '***',
 | 
			
		||||
					otherPriceO: '***',
 | 
			
		||||
					otherPriceS: '***',
 | 
			
		||||
					outD: '***',
 | 
			
		||||
					outO: '***',
 | 
			
		||||
					priceD: '***',
 | 
			
		||||
					priceO: '***',
 | 
			
		||||
					priceS: '***',
 | 
			
		||||
					ratioD: '***',
 | 
			
		||||
					ratioO: '***',
 | 
			
		||||
					ratioS: '***',
 | 
			
		||||
				};
 | 
			
		||||
			}
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	beforeDestroy() {
 | 
			
		||||
		clearInterval(this.timer);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		getData() {
 | 
			
		||||
			let listQuery = {
 | 
			
		||||
				//分页
 | 
			
		||||
				pageSize: 10,
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
				statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
 | 
			
		||||
				startTime: this.timeday + ' 00:00:00',
 | 
			
		||||
			};
 | 
			
		||||
			getData(listQuery).then((response) => {
 | 
			
		||||
				this.homeData = response.data;
 | 
			
		||||
				for (let i in this.homeData) {
 | 
			
		||||
					this.homeData[i] = Number(this.homeData[i]).toFixed(2);
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		timedayChange() {
 | 
			
		||||
			let listQuery = {
 | 
			
		||||
				//分页
 | 
			
		||||
				pageSize: 10,
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
				statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
 | 
			
		||||
				startTime: this.timeday + ' 00:00:00',
 | 
			
		||||
			};
 | 
			
		||||
			if (this.permission) {
 | 
			
		||||
				getData(listQuery).then((response) => {
 | 
			
		||||
					this.homeData = response.data;
 | 
			
		||||
					for (let i in this.homeData) {
 | 
			
		||||
						this.homeData[i] = Number(this.homeData[i]).toFixed(2);
 | 
			
		||||
					}
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// handleClick() {
 | 
			
		||||
		// 	let start = Date.parse(new Date());
 | 
			
		||||
		// 	let end = Date.parse(new Date());
 | 
			
		||||
		// 	switch (this.activeName) {
 | 
			
		||||
		// 		case '日':
 | 
			
		||||
		// 			this.showTime = moment(new Date())
 | 
			
		||||
		// 				.subtract(0, 'days')
 | 
			
		||||
		// 				.format('YYYY-MM-DD');
 | 
			
		||||
		// 			this.lineChartData = lineChartData.newVisitis;
 | 
			
		||||
		// 			break;
 | 
			
		||||
		// 		case '周':
 | 
			
		||||
		// 			start = moment(new Date()).subtract(6, 'days').format('x');
 | 
			
		||||
		// 			this.showTime =
 | 
			
		||||
		// 				moment(new Date()).subtract(6, 'days').format('MM-DD') +
 | 
			
		||||
		// 				' ~ ' +
 | 
			
		||||
		// 				moment(new Date()).subtract(0, 'days').format('MM-DD');
 | 
			
		||||
		// 			this.lineChartData = lineChartData.messages;
 | 
			
		||||
		// 			break;
 | 
			
		||||
		// 		case '月':
 | 
			
		||||
		// 			start = moment(new Date()).subtract(1, 'month').format('x');
 | 
			
		||||
		// 			this.showTime =
 | 
			
		||||
		// 				moment(new Date()).subtract(1, 'month').format('MM-DD') +
 | 
			
		||||
		// 				' ~ ' +
 | 
			
		||||
		// 				moment(new Date()).subtract(0, 'days').format('MM-DD');
 | 
			
		||||
		// 			this.lineChartData = lineChartData.purchases;
 | 
			
		||||
		// 			break;
 | 
			
		||||
		// 		case '年':
 | 
			
		||||
		// 			start = moment(new Date()).subtract(1, 'year').format('x');
 | 
			
		||||
		// 			this.showTime =
 | 
			
		||||
		// 				moment(new Date()).subtract(1, 'year').format('YYYY') +
 | 
			
		||||
		// 				' ~ ' +
 | 
			
		||||
		// 				moment(new Date()).subtract(0, 'days').format('YYYY');
 | 
			
		||||
		// 			this.lineChartData = lineChartData.shoppings;
 | 
			
		||||
		// 			break;
 | 
			
		||||
		// 		default:
 | 
			
		||||
		// 			console.log(val);
 | 
			
		||||
		// 	}
 | 
			
		||||
		// 	this.getData();
 | 
			
		||||
		// },
 | 
			
		||||
		getTime() {
 | 
			
		||||
			let _this = this;
 | 
			
		||||
			this.timer = setInterval(function () {
 | 
			
		||||
				_this.topDate = moment().format('YYYY.MM.DD');
 | 
			
		||||
				let temp = moment().format('A-hh:mm').split('-');
 | 
			
		||||
				_this.timeZone = temp[0];
 | 
			
		||||
				_this.topTime = temp[1];
 | 
			
		||||
			}, 1000);
 | 
			
		||||
		},
 | 
			
		||||
		goDetail() {
 | 
			
		||||
			this.$router.push({ path: 'indexDetail' });
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.home-page::before {
 | 
			
		||||
	background-image: url('~@/assets/img/home-bg.png');
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-repeat: no-repeat;
 | 
			
		||||
	background-position: center;
 | 
			
		||||
	content: '';
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	top: 0;
 | 
			
		||||
	left: 0;
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	height: 100%;
 | 
			
		||||
	transform: rotate(180deg);
 | 
			
		||||
}
 | 
			
		||||
.date-tabs {
 | 
			
		||||
	padding-left: 40px;
 | 
			
		||||
	padding-top: 20px;
 | 
			
		||||
	position: relative;
 | 
			
		||||
	margin-bottom: 20px;
 | 
			
		||||
}
 | 
			
		||||
:deep(.date-tabs) {
 | 
			
		||||
	.el-tabs__header {
 | 
			
		||||
		margin-bottom: 8px;
 | 
			
		||||
		display: inline-block;
 | 
			
		||||
		transform: translateY(-12px);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	.el-tabs__content {
 | 
			
		||||
		overflow: visible;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	.el-tabs__item {
 | 
			
		||||
		font-size: 18px;
 | 
			
		||||
		color: #fff;
 | 
			
		||||
		padding-left: 0 !important;
 | 
			
		||||
		padding-right: 0 !important;
 | 
			
		||||
		line-height: 36px !important;
 | 
			
		||||
		height: 36px;
 | 
			
		||||
	}
 | 
			
		||||
	.el-tabs__item.is-active {
 | 
			
		||||
		color: #0b58ff;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
.detail {
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	left: 260px;
 | 
			
		||||
	top: 10px;
 | 
			
		||||
}
 | 
			
		||||
:deep(.detail) {
 | 
			
		||||
	.el-input__inner {
 | 
			
		||||
		background-color: transparent;
 | 
			
		||||
		color: white;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
// .current-date {
 | 
			
		||||
// 	color: #fff;
 | 
			
		||||
// 	font-size: 18px;
 | 
			
		||||
// 	position: absolute;
 | 
			
		||||
// 	left: 260px;
 | 
			
		||||
// 	top: 14px;
 | 
			
		||||
// }
 | 
			
		||||
.current-time {
 | 
			
		||||
	color: #fff;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	right: 38px;
 | 
			
		||||
	top: 14px;
 | 
			
		||||
}
 | 
			
		||||
.main-top {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	padding: 0 20px 0 40px;
 | 
			
		||||
	.title {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		left: 34px;
 | 
			
		||||
		top: 20px;
 | 
			
		||||
		width: 180px;
 | 
			
		||||
		font-size: 32px;
 | 
			
		||||
		z-index: 10;
 | 
			
		||||
		.title-inner {
 | 
			
		||||
			position: absolute;
 | 
			
		||||
			left: 42px;
 | 
			
		||||
			top: 5px;
 | 
			
		||||
			font-size: calc(100vw * 20 / 1920);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.box {
 | 
			
		||||
		background-color: #fff;
 | 
			
		||||
		border-radius: 24px;
 | 
			
		||||
		height: 192px;
 | 
			
		||||
		padding: 40px 24px 32px 24px;
 | 
			
		||||
		margin-bottom: 20px;
 | 
			
		||||
		box-shadow: 0 8px 8px 0 gray;
 | 
			
		||||
		.num-box {
 | 
			
		||||
			height: 120px;
 | 
			
		||||
			padding-top: 26px;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			.num-style {
 | 
			
		||||
				color: #000;
 | 
			
		||||
				font-size: calc(100vw * 40 / 1920);
 | 
			
		||||
			}
 | 
			
		||||
			.unit-style {
 | 
			
		||||
				color: rgba(0, 0, 0, 0.7);
 | 
			
		||||
				font-size: calc(100vw * 18 / 1920);
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.shadow {
 | 
			
		||||
			background: linear-gradient(90deg, #ffffff 80%, #f2f4f9 100%);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
.main-bottom {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	margin-top: 20px;
 | 
			
		||||
	.chart-wrapper {
 | 
			
		||||
		margin-left: 10px;
 | 
			
		||||
		height: 425px;
 | 
			
		||||
		background: #fff;
 | 
			
		||||
		border-radius: 5px;
 | 
			
		||||
		box-shadow: 0 3px 3px 0 gray;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
<style lang="scss">
 | 
			
		||||
.home-page {
 | 
			
		||||
	.el-progress-bar__inner {
 | 
			
		||||
		background-image: url('~@/assets/img/home-progress-bg.png');
 | 
			
		||||
		background-size: cover;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										199
									
								
								src/views/cost/indexDetail.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,199 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="app-container">
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick" />
 | 
			
		||||
		<base-table
 | 
			
		||||
			:table-props="tableProps1"
 | 
			
		||||
			:page="1"
 | 
			
		||||
			:limit="100"
 | 
			
		||||
			:table-data="tableData1"></base-table>
 | 
			
		||||
		<base-table
 | 
			
		||||
			:table-props="tableProps2"
 | 
			
		||||
			:page="1"
 | 
			
		||||
			:limit="100"
 | 
			
		||||
			:table-data="tableData2"></base-table>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { getDetailData } from '@/api/cost/allCost';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
 | 
			
		||||
const tableProps1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'name',
 | 
			
		||||
		label: '成本项目-原片',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'f1',
 | 
			
		||||
		label: '本期领用',
 | 
			
		||||
		children: [
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'quantity',
 | 
			
		||||
				label: '数量',
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'price',
 | 
			
		||||
				label: '单价',
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'sumPrice',
 | 
			
		||||
				label: '金额',
 | 
			
		||||
			},
 | 
			
		||||
		],
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'sprice',
 | 
			
		||||
		label: '单位成本',
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'name',
 | 
			
		||||
		label: '成本项目-加工',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'quantity',
 | 
			
		||||
		label: '耗用数量',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '平均耗用单价',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'sumPrice',
 | 
			
		||||
		label: '总成本',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'sprice',
 | 
			
		||||
		label: '综合单位成本',
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			tableProps1,
 | 
			
		||||
			tableData1: [],
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				pageSize: 10,
 | 
			
		||||
				pageNo: 1,
 | 
			
		||||
				statisticType: 1,
 | 
			
		||||
			},
 | 
			
		||||
			activeName: '日',
 | 
			
		||||
			startTime:
 | 
			
		||||
				moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD') +
 | 
			
		||||
				' 00:00:00',
 | 
			
		||||
			endTime:
 | 
			
		||||
				moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
 | 
			
		||||
				' 00:00:00',
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '维度',
 | 
			
		||||
					selectOptions: [
 | 
			
		||||
						{ id: 1, name: '日' },
 | 
			
		||||
						{ id: 2, name: '周' },
 | 
			
		||||
						{ id: 3, name: '月' },
 | 
			
		||||
						{ id: 4, name: '年' },
 | 
			
		||||
					],
 | 
			
		||||
					param: 'statisticType',
 | 
			
		||||
					defaultSelect: 1, // 默认值,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					// 日期选择
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					// label: '日期',
 | 
			
		||||
					dateType: 'date',
 | 
			
		||||
					placeholder: '选择日期',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd',
 | 
			
		||||
					param: 'timeday',
 | 
			
		||||
					clearable: false,
 | 
			
		||||
					pickerOptions: {
 | 
			
		||||
						disabledDate(time) {
 | 
			
		||||
							return (time.getTime()+ 3600 * 1000 * 24) > Date.now();
 | 
			
		||||
						},
 | 
			
		||||
						shortcuts: [
 | 
			
		||||
							{
 | 
			
		||||
								text: '今天',
 | 
			
		||||
								onClick(picker) {
 | 
			
		||||
									picker.$emit('pick', new Date());
 | 
			
		||||
								},
 | 
			
		||||
							},
 | 
			
		||||
							{
 | 
			
		||||
								text: '昨天',
 | 
			
		||||
								onClick(picker) {
 | 
			
		||||
									const date = new Date();
 | 
			
		||||
									date.setTime(date.getTime() - 3600 * 1000 * 24);
 | 
			
		||||
									picker.$emit('pick', date);
 | 
			
		||||
								},
 | 
			
		||||
							},
 | 
			
		||||
							{
 | 
			
		||||
								text: '一周前',
 | 
			
		||||
								onClick(picker) {
 | 
			
		||||
									const date = new Date();
 | 
			
		||||
									date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
									picker.$emit('pick', date);
 | 
			
		||||
								},
 | 
			
		||||
							},
 | 
			
		||||
						],
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '搜索',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '返回首页',
 | 
			
		||||
					name: 'back',
 | 
			
		||||
					color: 'warning',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.listQuery.startTime = this.startTime;
 | 
			
		||||
    this.$refs.searchBarForm.formInline.timeday = this.startTime.substr(0, 10)
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
			getDetailData(this.listQuery).then((response) => {
 | 
			
		||||
				this.tableData1 = response.data.odata;
 | 
			
		||||
				this.tableData2 = response.data.ddata;
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
          console.log(val.timeday)
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.timeday
 | 
			
		||||
						? val.timeday + ' 00:00:00'
 | 
			
		||||
						: null;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'back':
 | 
			
		||||
          this.$router.go(-1)
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
					console.log(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
@@ -77,7 +77,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name||null;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
@@ -90,7 +90,7 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name;
 | 
			
		||||
					this.listQuery.recTime = val.searchTime;
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
 
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -86,24 +86,27 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'energyTypeName',
 | 
			
		||||
		label: '能源类型',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '监控对象',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'meterName',
 | 
			
		||||
		label: '抄表名',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'bindObjectName',
 | 
			
		||||
	// 	label: '监控对象',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'meterName',
 | 
			
		||||
	// 	label: '抄表名',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'quantity',
 | 
			
		||||
		label: '累计使用量',
 | 
			
		||||
@@ -115,20 +118,24 @@ const tableProps = [
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'energyTypeName',
 | 
			
		||||
		label: '能源类型',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '监控对象',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'meter',
 | 
			
		||||
		label: '抄表名',
 | 
			
		||||
		filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'bindObjectName',
 | 
			
		||||
	// 	label: '监控对象',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'meter',
 | 
			
		||||
	// 	label: '抄表名',
 | 
			
		||||
	// 	filter: (val) => (val != null ? val : '--'),
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'quantity',
 | 
			
		||||
		label: '累计使用量',
 | 
			
		||||
@@ -207,13 +214,16 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -237,10 +247,11 @@ export default {
 | 
			
		||||
			activeName: 'his',
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableBtn: [{
 | 
			
		||||
							type: 'edit',
 | 
			
		||||
							btnName: '编辑',
 | 
			
		||||
					  }
 | 
			
		||||
			tableBtn: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'edit',
 | 
			
		||||
					btnName: '编辑',
 | 
			
		||||
				},
 | 
			
		||||
			].filter((v) => v),
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
@@ -262,26 +273,18 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			this.formConfig2[1].startPlaceholder = '开始时间';
 | 
			
		||||
			this.formConfig2[1].endPlaceholder = '结束时间';
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.energyTypeId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						: null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -292,13 +295,16 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.energyTypeId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						: null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
					}
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
@@ -320,15 +326,26 @@ export default {
 | 
			
		||||
				const end = new Date();
 | 
			
		||||
				const start = new Date();
 | 
			
		||||
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
 | 
			
		||||
				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.searchBarForm2.formInline.searchTime = [
 | 
			
		||||
						this.listQuery.startTime,
 | 
			
		||||
						this.listQuery.endTime,
 | 
			
		||||
					];
 | 
			
		||||
				});
 | 
			
		||||
				this.listQuery.name = null;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		getNavDataList() {
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			if (this.listQuery.startTime) {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2021-11-18 14:16:25
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2024-09-05 15:34:28
 | 
			
		||||
 * @LastEditTime: 2024-12-27 09:18:43
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -22,7 +22,7 @@
 | 
			
		||||
						placeholder="请输入原料名称" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
			<!-- <el-col :span="12">
 | 
			
		||||
				<el-form-item label="单价" prop="matPrice">
 | 
			
		||||
					<el-input
 | 
			
		||||
						v-model="dataForm.matPrice"
 | 
			
		||||
@@ -31,7 +31,7 @@
 | 
			
		||||
						placeholder="请输入单价" />
 | 
			
		||||
					(元/吨)
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			</el-col> -->
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="累计用量" prop="quantity">
 | 
			
		||||
					<el-input-number
 | 
			
		||||
 
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'materialName',
 | 
			
		||||
@@ -97,13 +100,13 @@ const tableProps = [
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'quantity',
 | 
			
		||||
		label: '累计使用量(吨)',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'matPrice',
 | 
			
		||||
		label: '单价(元/吨)',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
		label: '累计使用量(千克)',
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'matPrice',
 | 
			
		||||
	// 	label: '单价(元/千克)',
 | 
			
		||||
	// 	align: 'right',
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '总价(元)',
 | 
			
		||||
@@ -111,6 +114,10 @@ const tableProps = [
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'remark',
 | 
			
		||||
	// 	label: '备注',
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'materialName',
 | 
			
		||||
		label: '原料名称',
 | 
			
		||||
@@ -123,13 +130,13 @@ const tableProps2 = [
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'quantity',
 | 
			
		||||
		label: '累计使用量(吨)',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'materialPrice',
 | 
			
		||||
		label: '单价(元/吨)',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
		label: '累计使用量(千克)',
 | 
			
		||||
	},
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'materialPrice',
 | 
			
		||||
	// 	label: '单价(元/千克)',
 | 
			
		||||
	// 	align: 'right',
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '总价(元)',
 | 
			
		||||
@@ -204,13 +211,16 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -234,10 +244,11 @@ export default {
 | 
			
		||||
			activeName: 'his',
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableBtn: [{
 | 
			
		||||
							type: 'edit',
 | 
			
		||||
							btnName: '编辑',
 | 
			
		||||
					  }
 | 
			
		||||
			tableBtn: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'edit',
 | 
			
		||||
					btnName: '编辑',
 | 
			
		||||
				},
 | 
			
		||||
			].filter((v) => v),
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
@@ -259,26 +270,20 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			this.formConfig2[1].startPlaceholder = '开始时间';
 | 
			
		||||
			this.formConfig2[1].endPlaceholder = '结束时间';
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.materialId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -289,13 +294,18 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.materialId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
					}
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
@@ -317,15 +327,26 @@ export default {
 | 
			
		||||
				const end = new Date();
 | 
			
		||||
				const start = new Date();
 | 
			
		||||
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
				this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
 | 
			
		||||
				this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.searchBarForm2.formInline.searchTime = [
 | 
			
		||||
						this.listQuery.startTime,
 | 
			
		||||
						this.listQuery.endTime,
 | 
			
		||||
					];
 | 
			
		||||
				});
 | 
			
		||||
				this.listQuery.name = null;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		getNavDataList() {
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			if (this.listQuery.startTime) {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2021-11-18 14:16:25
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2024-09-05 15:33:16
 | 
			
		||||
 * @LastEditTime: 2025-06-13 10:59:54
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -15,7 +15,9 @@
 | 
			
		||||
		label-width="80px">
 | 
			
		||||
		<el-row :gutter="20">
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="产线" prop="bindObjectName">
 | 
			
		||||
				<el-form-item
 | 
			
		||||
					:label="activeName === 'his' ? '产线' : '工段'"
 | 
			
		||||
					prop="bindObjectName">
 | 
			
		||||
					<el-input
 | 
			
		||||
						style="width: 100%"
 | 
			
		||||
						v-model="dataForm.bindObjectName"
 | 
			
		||||
@@ -33,7 +35,7 @@
 | 
			
		||||
						placeholder="选择所属日期"></el-date-picker>
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
			<el-col :span="12" v-if="activeName === 'his'">
 | 
			
		||||
				<el-form-item label="厚度" prop="thick">
 | 
			
		||||
					<el-input-number
 | 
			
		||||
						:min="0"
 | 
			
		||||
@@ -43,7 +45,7 @@
 | 
			
		||||
						placeholder="请输入厚度" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
			<el-col :span="12" v-if="activeName === 'his'">
 | 
			
		||||
				<el-form-item label="在线速度" prop="speed">
 | 
			
		||||
					<el-input-number
 | 
			
		||||
						:min="0"
 | 
			
		||||
@@ -53,7 +55,7 @@
 | 
			
		||||
						placeholder="请输入在线速度" />
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
			<el-col :span="12" v-if="activeName === 'his'">
 | 
			
		||||
				<el-form-item label="掰边宽度" prop="width">
 | 
			
		||||
					<el-input-number
 | 
			
		||||
						:min="0"
 | 
			
		||||
@@ -64,25 +66,27 @@
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="拉引量" prop="inArea">
 | 
			
		||||
				<el-form-item
 | 
			
		||||
					:label="activeName === 'his' ? '拉引量' : '进片数'"
 | 
			
		||||
					prop="inArea">
 | 
			
		||||
					<el-input-number
 | 
			
		||||
						:min="0"
 | 
			
		||||
						style="width: 85%"
 | 
			
		||||
						v-model="dataForm.inArea"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入拉引量" />
 | 
			
		||||
					(m²)
 | 
			
		||||
						clearable />
 | 
			
		||||
					{{ activeName === 'his' ? '(m²)' : '片' }}
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-form-item label="下片面积" prop="outArea">
 | 
			
		||||
				<el-form-item
 | 
			
		||||
					:label="activeName === 'his' ? '下片面积' : '出片数'"
 | 
			
		||||
					prop="outArea">
 | 
			
		||||
					<el-input-number
 | 
			
		||||
						:min="0"
 | 
			
		||||
						style="width: 85%"
 | 
			
		||||
						v-model="dataForm.outArea"
 | 
			
		||||
						clearable
 | 
			
		||||
						placeholder="请输入下片面积" />
 | 
			
		||||
					(m²)
 | 
			
		||||
						clearable />
 | 
			
		||||
					{{ activeName === 'his' ? '(m²)' : '片' }}
 | 
			
		||||
				</el-form-item>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
@@ -129,10 +133,12 @@ export default {
 | 
			
		||||
				recTime: undefined,
 | 
			
		||||
			},
 | 
			
		||||
			dataRule: {},
 | 
			
		||||
			activeName: 'his',
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		init(val, statisticType) {
 | 
			
		||||
		init(val, statisticType, activeName) {
 | 
			
		||||
			this.activeName = activeName;
 | 
			
		||||
			this.visible = true;
 | 
			
		||||
			this.$nextTick(() => {
 | 
			
		||||
				this.$refs['dataForm'].resetFields();
 | 
			
		||||
@@ -148,17 +154,22 @@ export default {
 | 
			
		||||
				if (!valid) {
 | 
			
		||||
					return false;
 | 
			
		||||
				}
 | 
			
		||||
				const udata = {
 | 
			
		||||
				let udata = {
 | 
			
		||||
					id: this.dataForm.id,
 | 
			
		||||
					statisticType: this.dataForm.statisticType,
 | 
			
		||||
					modifyThick: this.dataForm.thick,
 | 
			
		||||
					modifySpeed: this.dataForm.speed,
 | 
			
		||||
					modifyWidth: this.dataForm.width,
 | 
			
		||||
					modifyInArea: this.dataForm.inArea,
 | 
			
		||||
					modifyOutArea: this.dataForm.outArea,
 | 
			
		||||
					modifyRatio:
 | 
			
		||||
						this.dataForm.ratio >= 0 ? this.dataForm.ratio / 100 : '',
 | 
			
		||||
				};
 | 
			
		||||
				if (this.activeName === 'his') {
 | 
			
		||||
					udata = {
 | 
			
		||||
						...udata,
 | 
			
		||||
						modifyThick: this.dataForm.thick,
 | 
			
		||||
						modifySpeed: this.dataForm.speed,
 | 
			
		||||
						modifyWidth: this.dataForm.width,
 | 
			
		||||
					};
 | 
			
		||||
				}
 | 
			
		||||
				// 修改的提交
 | 
			
		||||
				this.urlOptions.updateURL(udata).then((response) => {
 | 
			
		||||
					this.$modal.msgSuccess('修改成功');
 | 
			
		||||
 
 | 
			
		||||
@@ -1,42 +1,71 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="app-container energyOverlimitLog">
 | 
			
		||||
		<!-- 搜索工作栏 -->
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick" />
 | 
			
		||||
		<!-- 列表 -->
 | 
			
		||||
		<base-table
 | 
			
		||||
			:page="listQuery.pageNo"
 | 
			
		||||
			:limit="listQuery.pageSize"
 | 
			
		||||
			:table-props="tableProps"
 | 
			
		||||
			:table-data="tableData"
 | 
			
		||||
			:max-height="tableH">
 | 
			
		||||
			<method-btn
 | 
			
		||||
				v-if="tableBtn.length"
 | 
			
		||||
				slot="handleBtn"
 | 
			
		||||
				:width="80"
 | 
			
		||||
				label="操作"
 | 
			
		||||
				:method-list="tableBtn"
 | 
			
		||||
				@clickBtn="handleClick" />
 | 
			
		||||
		</base-table>
 | 
			
		||||
		<pagination
 | 
			
		||||
			:page.sync="listQuery.pageNo"
 | 
			
		||||
			:limit.sync="listQuery.pageSize"
 | 
			
		||||
			:total="listQuery.total"
 | 
			
		||||
			@pagination="getDataList" />
 | 
			
		||||
		<base-dialog
 | 
			
		||||
			:dialogTitle="addOrEditTitle"
 | 
			
		||||
			:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
			@cancel="handleCancel"
 | 
			
		||||
			@confirm="handleConfirm"
 | 
			
		||||
			:before-close="handleCancel"
 | 
			
		||||
			width="50%">
 | 
			
		||||
			<add-or-update
 | 
			
		||||
				ref="addOrUpdate"
 | 
			
		||||
				:name-arr="formConfig[1].selectOptions"
 | 
			
		||||
				@refreshDataList="successSubmit"></add-or-update>
 | 
			
		||||
		</base-dialog>
 | 
			
		||||
	<div>
 | 
			
		||||
		<div style="background: #f2f4f9; height: 40px; width: 100%">
 | 
			
		||||
			<ButtonNav :menus="['产线良品率', '工段良品率']" @change="currentMenu">
 | 
			
		||||
				<template v-slot:tab1>
 | 
			
		||||
					<div>产线良品率</div>
 | 
			
		||||
				</template>
 | 
			
		||||
				<template v-slot:tab2>
 | 
			
		||||
					<div>工段良品率</div>
 | 
			
		||||
				</template>
 | 
			
		||||
			</ButtonNav>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div class="app-container energyOverlimitLog">
 | 
			
		||||
			<search-bar
 | 
			
		||||
				:formConfigs="formConfig"
 | 
			
		||||
				ref="searchBarForm"
 | 
			
		||||
				@headBtnClick="buttonClick" />
 | 
			
		||||
			<!-- 列表 -->
 | 
			
		||||
			<div v-if="activeName === 'his'">
 | 
			
		||||
				<base-table
 | 
			
		||||
					:page="listQuery.pageNo"
 | 
			
		||||
					:limit="listQuery.pageSize"
 | 
			
		||||
					:table-props="tableProps"
 | 
			
		||||
					:table-data="tableData"
 | 
			
		||||
					:max-height="tableH">
 | 
			
		||||
					<method-btn
 | 
			
		||||
						v-if="tableBtn.length"
 | 
			
		||||
						slot="handleBtn"
 | 
			
		||||
						:width="80"
 | 
			
		||||
						label="操作"
 | 
			
		||||
						:method-list="tableBtn"
 | 
			
		||||
						@clickBtn="handleClick" />
 | 
			
		||||
				</base-table>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div v-if="activeName === 'now'">
 | 
			
		||||
				<base-table
 | 
			
		||||
					:page="listQuery.pageNo"
 | 
			
		||||
					:limit="listQuery.pageSize"
 | 
			
		||||
					:table-props="tableProps2"
 | 
			
		||||
					:table-data="tableData2"
 | 
			
		||||
					:max-height="tableH">
 | 
			
		||||
					<method-btn
 | 
			
		||||
						v-if="tableBtn.length"
 | 
			
		||||
						slot="handleBtn"
 | 
			
		||||
						:width="80"
 | 
			
		||||
						label="操作"
 | 
			
		||||
						:method-list="tableBtn"
 | 
			
		||||
						@clickBtn="handleClick" />
 | 
			
		||||
				</base-table>
 | 
			
		||||
			</div>
 | 
			
		||||
			<pagination
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
				@cancel="handleCancel"
 | 
			
		||||
				@confirm="handleConfirm"
 | 
			
		||||
				:before-close="handleCancel"
 | 
			
		||||
				width="50%">
 | 
			
		||||
				<add-or-update
 | 
			
		||||
					ref="addOrUpdate"
 | 
			
		||||
					:name-arr="formConfig[1].selectOptions"
 | 
			
		||||
					@refreshDataList="successSubmit"></add-or-update>
 | 
			
		||||
			</base-dialog>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@@ -44,16 +73,27 @@
 | 
			
		||||
import AddOrUpdate from './add-or-updata';
 | 
			
		||||
import basicPage from '@/mixins/basic-page';
 | 
			
		||||
import { getLinePage } from '@/api/base/productionLine';
 | 
			
		||||
import { getcostOriginRatioHisPage,exportcostOriginRatioHisExcel } from '@/api/cost/costOriginRatioHis';
 | 
			
		||||
import {
 | 
			
		||||
	getcostOriginRatioHisPage,
 | 
			
		||||
	getcostOriginWSRatioHisPage,
 | 
			
		||||
	exportcostOriginWSRatioHisExcel,
 | 
			
		||||
	exportcostOriginRatioHisExcel,
 | 
			
		||||
} from '@/api/cost/costOriginRatioHis';
 | 
			
		||||
import { parseTime } from '@/filter/code-filter';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
    width:130,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '产线',
 | 
			
		||||
@@ -62,27 +102,67 @@ const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'thick',
 | 
			
		||||
		label: '厚度',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'speed',
 | 
			
		||||
		label: '在线速度',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'width',
 | 
			
		||||
		label: '掰边宽度',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'inArea',
 | 
			
		||||
		label: '拉引量/m²',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outArea',
 | 
			
		||||
		label: '下片面积/m²',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? val * 100 + '%' : '-'),
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2  = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
    width:130,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '工段',
 | 
			
		||||
    width:145,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'spec',
 | 
			
		||||
		label: '规格',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'inArea',
 | 
			
		||||
		label: '进片数',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outArea',
 | 
			
		||||
		label: '出片数',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
@@ -116,13 +196,15 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -143,23 +225,27 @@ export default {
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				statisticType: 1,
 | 
			
		||||
			},
 | 
			
		||||
			activeName: 'his',
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableBtn: [{
 | 
			
		||||
							type: 'edit',
 | 
			
		||||
							btnName: '编辑',
 | 
			
		||||
					  }
 | 
			
		||||
			].filter((v) => v),
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		AddOrUpdate,
 | 
			
		||||
		ButtonNav,
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
    const params ={
 | 
			
		||||
      pageNo: 1,
 | 
			
		||||
      pageSize: 100,
 | 
			
		||||
      pdType: 1
 | 
			
		||||
      pdType: 0
 | 
			
		||||
    }
 | 
			
		||||
		getLinePage(params).then((response) => {
 | 
			
		||||
			this.formConfig[1].selectOptions = response.data.list;
 | 
			
		||||
@@ -167,36 +253,33 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
					}
 | 
			
		||||
					break;
 | 
			
		||||
				case 'add':
 | 
			
		||||
					this.addOrUpdateHandle();
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
@@ -204,23 +287,74 @@ export default {
 | 
			
		||||
					console.log(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		currentMenu(val) {
 | 
			
		||||
			this.activeName = val === '产线良品率' ? 'his' : 'now';
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.$refs.searchBarForm.resetForm();
 | 
			
		||||
				this.listQuery.bindObjectId = null;
 | 
			
		||||
				this.listQuery.startTime = null;
 | 
			
		||||
				this.listQuery.endTime = null;
 | 
			
		||||
				this.listQuery.statisticType = 1;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.$refs.searchBarForm.resetForm();
 | 
			
		||||
				this.listQuery.bindObjectId = null;
 | 
			
		||||
				this.listQuery.startTime = null;
 | 
			
		||||
				this.listQuery.endTime = null;
 | 
			
		||||
				this.listQuery.statisticType = 1;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			getcostOriginWSRatioHisPage(this.listQuery).then((response) => {
 | 
			
		||||
				this.tableData2 = response.data.list;
 | 
			
		||||
				this.listQuery.total = response.data.total;
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		//tableBtn点击
 | 
			
		||||
		handleClick(val) {
 | 
			
		||||
			if (val.type === 'edit') {
 | 
			
		||||
				this.addOrUpdateVisible = true;
 | 
			
		||||
				this.addOrEditTitle = '编辑';
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.addOrUpdate.init(val.data, this.listQuery.statisticType);
 | 
			
		||||
					this.$refs.addOrUpdate.init(
 | 
			
		||||
						val.data,
 | 
			
		||||
						this.listQuery.statisticType,
 | 
			
		||||
						this.activeName
 | 
			
		||||
					);
 | 
			
		||||
				});
 | 
			
		||||
			} else {
 | 
			
		||||
				this.otherMethods(val);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		successSubmit() {
 | 
			
		||||
			this.handleCancel();
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		/** 导出按钮操作 */
 | 
			
		||||
		handleExport() {
 | 
			
		||||
			let exportURL, title;
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				exportURL = exportcostOriginRatioHisExcel;
 | 
			
		||||
        title = '原片成本-原片良品率';
 | 
			
		||||
				title = '原片-产线良品率';
 | 
			
		||||
			} else {
 | 
			
		||||
				exportURL = exportcostOriginWSRatioHisExcel;
 | 
			
		||||
				title = '原片-工段良品率';
 | 
			
		||||
			}
 | 
			
		||||
			// 处理查询参数
 | 
			
		||||
			let params = { ...this.listQuery };
 | 
			
		||||
			params.pageNo = undefined;
 | 
			
		||||
 
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'otherCostName',
 | 
			
		||||
@@ -102,6 +105,10 @@ const tableProps = [
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	// {
 | 
			
		||||
	// 	prop: 'remark',
 | 
			
		||||
	// 	label: '备注',
 | 
			
		||||
	// },
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'otherCostName',
 | 
			
		||||
		label: '成本名称',
 | 
			
		||||
@@ -182,13 +189,16 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
@@ -237,24 +247,20 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -265,13 +271,18 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
					}
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
@@ -297,6 +308,13 @@ export default {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			getRawOthercostSunPage(this.listQuery).then((response) => {
 | 
			
		||||
 
 | 
			
		||||
@@ -65,6 +65,7 @@ const tableProps = [
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '成本金额',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
@@ -161,7 +162,7 @@ export default {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name||null;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
@@ -174,7 +175,7 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.name = val.name||null;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-12-05 13:45:59
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2024-04-15 17:12:03
 | 
			
		||||
 * @LastEditTime: 2024-12-25 16:20:38
 | 
			
		||||
 * @Description
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -10,9 +10,9 @@
 | 
			
		||||
		<span>
 | 
			
		||||
			{{
 | 
			
		||||
				injectData.type == 1
 | 
			
		||||
					? `每天等价,${injectData.price}元`
 | 
			
		||||
					? `每天等价,${Number(injectData.price)}元`
 | 
			
		||||
					: injectData.type == 2
 | 
			
		||||
					? `总价${injectData.price}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
 | 
			
		||||
					? `总价${Number(injectData.price)}元,年折旧率${injectData.ratio}%,折旧年限${injectData.timeLimit}年`
 | 
			
		||||
					: '-'
 | 
			
		||||
			}}
 | 
			
		||||
		</span>
 | 
			
		||||
 
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
				:page.sync="listQuery.pageNo"
 | 
			
		||||
				:limit.sync="listQuery.pageSize"
 | 
			
		||||
				:total="listQuery.total"
 | 
			
		||||
				@pagination="getDataList" />
 | 
			
		||||
				@pagination="getNavDataList" />
 | 
			
		||||
			<base-dialog
 | 
			
		||||
				:dialogTitle="addOrEditTitle"
 | 
			
		||||
				:dialogVisible="addOrUpdateVisible"
 | 
			
		||||
@@ -87,9 +87,12 @@ import ButtonNav from '@/components/ButtonNav';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'recTime',
 | 
			
		||||
		prop: 'time',
 | 
			
		||||
		label: '时间',
 | 
			
		||||
		filter: (val) => parseTime(val, '{y}年{m}月{d}日'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
@@ -98,32 +101,41 @@ const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'thick',
 | 
			
		||||
		label: '厚度',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'inArea',
 | 
			
		||||
		label: '拉引量/m²',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outArea',
 | 
			
		||||
		label: '下片面积/m²',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? val * 100 + '%' : '-'),
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costSum',
 | 
			
		||||
		label: '原片成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costArea',
 | 
			
		||||
		label: '每平米成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'remark',
 | 
			
		||||
		label: '备注',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'bindObjectName',
 | 
			
		||||
		label: '产线',
 | 
			
		||||
@@ -135,34 +147,40 @@ const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'inArea',
 | 
			
		||||
		label: '拉引量/m²',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outArea',
 | 
			
		||||
		label: '下片面积/m²',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outCount',
 | 
			
		||||
		label: '下片数量',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratio',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val ? val * 100 + '%' : '-'),
 | 
			
		||||
		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costSum',
 | 
			
		||||
		label: '原片成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costPiece',
 | 
			
		||||
		label: '单片成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'costArea',
 | 
			
		||||
		label: '每平米成本/元',
 | 
			
		||||
		align: 'right',
 | 
			
		||||
    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
@@ -224,13 +242,16 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间范围',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					dateType: 'datetimerange',
 | 
			
		||||
					format: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					defaultTime: ['08:30:00', '08:30:00'],
 | 
			
		||||
					param: 'searchTime',
 | 
			
		||||
					width: 350,
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
@@ -287,26 +308,20 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.statisticType === 2) {
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年第{w}周');
 | 
			
		||||
			}else{
 | 
			
		||||
				this.tableProps[0].filter = (val) =>
 | 
			
		||||
					parseTime(val, '{y}年{m}月{d}日');
 | 
			
		||||
      }
 | 
			
		||||
			this.formConfig2[0].startPlaceholder = '开始时间';
 | 
			
		||||
			this.formConfig2[0].endPlaceholder = '结束时间';
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
				case 'search':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
						this.getDataList();
 | 
			
		||||
					} else {
 | 
			
		||||
						this.getDataList2();
 | 
			
		||||
@@ -317,13 +332,18 @@ export default {
 | 
			
		||||
					break;
 | 
			
		||||
				case 'export':
 | 
			
		||||
					this.listQuery.pageNo = 1;
 | 
			
		||||
					this.listQuery.pageSize = 10;
 | 
			
		||||
					this.listQuery.pageSize = 20;
 | 
			
		||||
					this.listQuery.bindObjectId = val.name || null;
 | 
			
		||||
					this.listQuery.statisticType = val.statisticType || 1;
 | 
			
		||||
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 | 
			
		||||
					this.listQuery.endTime = val.searchTime
 | 
			
		||||
						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
						? val.searchTime[1]
 | 
			
		||||
						: null;
 | 
			
		||||
					if (this.activeName === 'his') {
 | 
			
		||||
						this.listQuery.endTime = val.searchTime
 | 
			
		||||
							? val.searchTime[1].substr(0, 10) + ' 23:59:59'
 | 
			
		||||
							: null;
 | 
			
		||||
					}
 | 
			
		||||
					this.handleExport();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
@@ -345,15 +365,26 @@ export default {
 | 
			
		||||
				const end = new Date();
 | 
			
		||||
				const start = new Date();
 | 
			
		||||
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
 | 
			
		||||
				this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
 | 
			
		||||
				this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
 | 
			
		||||
				this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.searchBarForm2.formInline.searchTime = [
 | 
			
		||||
						this.listQuery.startTime,
 | 
			
		||||
						this.listQuery.endTime,
 | 
			
		||||
					];
 | 
			
		||||
				});
 | 
			
		||||
				this.listQuery.name = null;
 | 
			
		||||
				this.listQuery.pageNo = 1;
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
    getNavDataList(){
 | 
			
		||||
			if (this.activeName === 'his') {
 | 
			
		||||
				this.getDataList();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.getDataList2();
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
		// 获取数据2列表
 | 
			
		||||
		getDataList2() {
 | 
			
		||||
			if (this.listQuery.startTime) {
 | 
			
		||||
 
 | 
			
		||||
@@ -74,21 +74,21 @@ export default {
 | 
			
		||||
          }
 | 
			
		||||
        }],
 | 
			
		||||
        series: [{
 | 
			
		||||
          name: 'pageA',
 | 
			
		||||
          name: '成本1',
 | 
			
		||||
          type: 'bar',
 | 
			
		||||
          stack: 'vistors',
 | 
			
		||||
          barWidth: '60%',
 | 
			
		||||
          data: [79, 52, 200, 334, 390, 330, 220],
 | 
			
		||||
          animationDuration
 | 
			
		||||
        }, {
 | 
			
		||||
          name: 'pageB',
 | 
			
		||||
          name: '成本2',
 | 
			
		||||
          type: 'bar',
 | 
			
		||||
          stack: 'vistors',
 | 
			
		||||
          barWidth: '60%',
 | 
			
		||||
          data: [80, 52, 200, 334, 390, 330, 220],
 | 
			
		||||
          animationDuration
 | 
			
		||||
        }, {
 | 
			
		||||
          name: 'pageC',
 | 
			
		||||
          name: '成本3',
 | 
			
		||||
          type: 'bar',
 | 
			
		||||
          stack: 'vistors',
 | 
			
		||||
          barWidth: '60%',
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										249
									
								
								src/views/dashboard/allDashboard/BarChart.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,249 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div :class="className" :style="{ height: height, width: width }" />
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts';
 | 
			
		||||
require('echarts/theme/macarons'); // echarts theme
 | 
			
		||||
import resize from '../mixins/resize';
 | 
			
		||||
 | 
			
		||||
const animationDuration = 6000;
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [resize],
 | 
			
		||||
	props: {
 | 
			
		||||
		echartData: {
 | 
			
		||||
			type: Array,
 | 
			
		||||
			default: () => [],
 | 
			
		||||
		},
 | 
			
		||||
		className: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: 'chart',
 | 
			
		||||
		},
 | 
			
		||||
		width: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '100%',
 | 
			
		||||
		},
 | 
			
		||||
		height: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '380px',
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			chart: null,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	beforeDestroy() {
 | 
			
		||||
		if (!this.chart) {
 | 
			
		||||
			return;
 | 
			
		||||
		}
 | 
			
		||||
		this.chart.dispose();
 | 
			
		||||
		this.chart = null;
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		initChart(permission) {
 | 
			
		||||
			var option = {
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'axis',
 | 
			
		||||
					axisPointer: {
 | 
			
		||||
						type: 'cross',
 | 
			
		||||
						crossStyle: {
 | 
			
		||||
							color: '#999',
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				grid: {
 | 
			
		||||
					top: 100,
 | 
			
		||||
					left: '2%',
 | 
			
		||||
					right: '2%',
 | 
			
		||||
					bottom: '3%',
 | 
			
		||||
					containLabel: true,
 | 
			
		||||
				},
 | 
			
		||||
				legend: {
 | 
			
		||||
					data: [
 | 
			
		||||
						'深加工产量',
 | 
			
		||||
						'原片产量',
 | 
			
		||||
						{
 | 
			
		||||
							name: '总成本',
 | 
			
		||||
							icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
 | 
			
		||||
						},
 | 
			
		||||
					],
 | 
			
		||||
					itemWidth: 18,
 | 
			
		||||
					itemHeight: 18,
 | 
			
		||||
					textStyle: {
 | 
			
		||||
						fontSize: 18,
 | 
			
		||||
						color: '#DFF1FE',
 | 
			
		||||
					},
 | 
			
		||||
					top: 15,
 | 
			
		||||
					right: 20,
 | 
			
		||||
				},
 | 
			
		||||
				xAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'category',
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return item.time;
 | 
			
		||||
						}),
 | 
			
		||||
						axisPointer: {
 | 
			
		||||
							type: 'shadow',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				yAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '单位/片',
 | 
			
		||||
						min: 0,
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '单位/万元',
 | 
			
		||||
						min: 0,
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				series: [
 | 
			
		||||
					{
 | 
			
		||||
						name: '深加工产量',
 | 
			
		||||
						type: 'bar',
 | 
			
		||||
						barWidth: '14px',
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.deepOut).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' 片';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{ offset: 0, color: '#9DEAF5' },
 | 
			
		||||
								{ offset: 1, color: '#6EF9DE' },
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						name: '原片产量',
 | 
			
		||||
						type: 'bar',
 | 
			
		||||
						barWidth: '14px',
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.originOut).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' 片';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{ offset: 0, color: '#5CB7FF' },
 | 
			
		||||
								{ offset: 1, color: '#364BFE' },
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						name: '总成本',
 | 
			
		||||
						type: 'line',
 | 
			
		||||
						symbol: 'circle',
 | 
			
		||||
						symbolSize: 8,
 | 
			
		||||
						yAxisIndex: 1,
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.price).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' 万元';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						lineStyle: {
 | 
			
		||||
							color: '#12FFF5',
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: '#12FFF5',
 | 
			
		||||
							borderWidth: 1, // 圆点边框宽度(可选)
 | 
			
		||||
						},
 | 
			
		||||
						areaStyle: {
 | 
			
		||||
							opacity: 0.2,
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{
 | 
			
		||||
									offset: 0,
 | 
			
		||||
									color: '#12FFF5',
 | 
			
		||||
								},
 | 
			
		||||
								{
 | 
			
		||||
									offset: 1,
 | 
			
		||||
									color: 'transparent',
 | 
			
		||||
								},
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			};
 | 
			
		||||
      if(permission){
 | 
			
		||||
        option.series[2]=[]
 | 
			
		||||
      }
 | 
			
		||||
			if (this.chart) {
 | 
			
		||||
				this.chart.setOption(option);
 | 
			
		||||
			} else {
 | 
			
		||||
				this.chart = echarts.init(this.$el, 'macarons');
 | 
			
		||||
				this.chart.setOption(option);
 | 
			
		||||
			}
 | 
			
		||||
			window.addEventListener('resize', () => {
 | 
			
		||||
				this.chart.resize();
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										558
									
								
								src/views/dashboard/allDashboard/index-model.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,558 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="wholePlantContainerB"
 | 
			
		||||
		ref="wholePlantContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="wholePlantContainer"
 | 
			
		||||
			ref="wholePlantContainer"
 | 
			
		||||
			class="wholePlantBoard"
 | 
			
		||||
			style="
 | 
			
		||||
				position: absolute;
 | 
			
		||||
				transform-origin: 16px 8px;
 | 
			
		||||
				font-size: 16px;
 | 
			
		||||
				top: 0px;
 | 
			
		||||
				left: 0px;
 | 
			
		||||
				width: 1920px;
 | 
			
		||||
				height: 1080px;
 | 
			
		||||
				display: flex;
 | 
			
		||||
				flex-direction: column;
 | 
			
		||||
				gap: 24px;
 | 
			
		||||
			"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange" />
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 3" class="bz25-1"></div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-2 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{
 | 
			
		||||
							topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
 | 
			
		||||
						}}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">昨日总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-3 bz-top">
 | 
			
		||||
					<div class="topNum" style="margin-left: 50px">
 | 
			
		||||
						{{
 | 
			
		||||
							topData.yestodayRatio
 | 
			
		||||
								? Number(topData.yestodayRatio).toFixed(1)
 | 
			
		||||
								: '-'
 | 
			
		||||
						}}%
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">昨日良品率</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-4 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">本月总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-5 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{
 | 
			
		||||
							topData.monthAreaCost
 | 
			
		||||
								? Number(topData.monthAreaCost).toFixed(1)
 | 
			
		||||
								: '-'
 | 
			
		||||
						}}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">本月每平米总成本/元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 3" class="bz25-6"></div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="middle middle1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="cost" />
 | 
			
		||||
						成本统计
 | 
			
		||||
						<span style="float: right">成本单位:万元 | 产量单位:万平方米</span>
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table1'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps1"
 | 
			
		||||
						:table-data="tableData1"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="middle middle2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="yanqi" />
 | 
			
		||||
						烟气处理
 | 
			
		||||
					</div>
 | 
			
		||||
					<div
 | 
			
		||||
						style="
 | 
			
		||||
							display: flex;
 | 
			
		||||
							flex-wrap: wrap;
 | 
			
		||||
							margin: 10px 30px;
 | 
			
		||||
							gap: 12px;
 | 
			
		||||
						">
 | 
			
		||||
						<div class="yanqi" style="width: 566px">
 | 
			
		||||
							<div
 | 
			
		||||
								class="content middle2-left"
 | 
			
		||||
								style="margin-left: 50px; width: 210px">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
 | 
			
		||||
								二氧化硫 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.fc"></el-image>
 | 
			
		||||
								粉尘排放
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.no"></el-image>
 | 
			
		||||
								氮氧化物 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
					</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="footer footer1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="costchart" />
 | 
			
		||||
						近12个月成本 · 产量趋势
 | 
			
		||||
					</div>
 | 
			
		||||
					<bar-chart
 | 
			
		||||
						ref="chartRef"
 | 
			
		||||
						style="margin-top: -50px"
 | 
			
		||||
						:echart-data="echartData"></bar-chart>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="footer footer2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="energy" />
 | 
			
		||||
						能源统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table2'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps2"
 | 
			
		||||
						:table-data="tableData2"
 | 
			
		||||
						:height="310"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import baseTable from '../components/baseTable.vue';
 | 
			
		||||
import BarChart from './BarChart.vue';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
 | 
			
		||||
const tableProps1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'priceS',
 | 
			
		||||
		label: '总成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outO',
 | 
			
		||||
		label: '原片产量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioO',
 | 
			
		||||
		label: '原片良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outD',
 | 
			
		||||
		label: '深加工产量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioD',
 | 
			
		||||
		label: '深加工良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'matPriceS',
 | 
			
		||||
		label: '原料成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'energyPriceS',
 | 
			
		||||
		label: '能源成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'otherPriceS',
 | 
			
		||||
		label: '其他成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'areaPriceS',
 | 
			
		||||
		label: '每平米成本/元',
 | 
			
		||||
		width: 140,
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elec',
 | 
			
		||||
		label: '电消耗量/kwh',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'gas',
 | 
			
		||||
		label: '气消耗量/m³',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '总价/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		baseTable,
 | 
			
		||||
		BarChart,
 | 
			
		||||
	},
 | 
			
		||||
	// provide() {
 | 
			
		||||
	// 	return {
 | 
			
		||||
	// 		resizeChart: null,
 | 
			
		||||
	// 	};
 | 
			
		||||
	// },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			scaleNum: 0.8,
 | 
			
		||||
			topData: {},
 | 
			
		||||
			imgUrl: {
 | 
			
		||||
				fc: require('@/views/dashboard/assets/fc.png'),
 | 
			
		||||
				no: require('@/views/dashboard/assets/NO.png'),
 | 
			
		||||
				so2: require('@/views/dashboard/assets/SO2.png'),
 | 
			
		||||
			},
 | 
			
		||||
			tableProps1,
 | 
			
		||||
			tableData1: [],
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			echartData: [],
 | 
			
		||||
			permission: false,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.permission = false;
 | 
			
		||||
		getUserProfile().then((response) => {
 | 
			
		||||
			const user = response.data;
 | 
			
		||||
			if (user.roles[0].name !== 'dashborad') {
 | 
			
		||||
				this.permission = true;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.permission = false;
 | 
			
		||||
			}
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	destroy() {
 | 
			
		||||
		this.destroy();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.wholePlantContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let wholePlantContainerBox = document.getElementById(
 | 
			
		||||
				'wholePlantContainer'
 | 
			
		||||
			);
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(wholePlantContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(wholePlantContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			wx = rw / bw;
 | 
			
		||||
			hx = rh / bh;
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=1`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let dataJson = JSON.parse(e.data);
 | 
			
		||||
			console.log(dataJson);
 | 
			
		||||
			// 数据接收
 | 
			
		||||
			if ('factoryState' in dataJson) {
 | 
			
		||||
				this.topData = dataJson.factoryState;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.topData.monthAreaCost = '***';
 | 
			
		||||
					this.topData.monthSum = '***';
 | 
			
		||||
					this.topData.yestodaySum = '***';
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('factoryCostTableList' in dataJson) {
 | 
			
		||||
				this.tableData1 = dataJson.factoryCostTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData1.forEach((item) => {
 | 
			
		||||
						item.priceS = null;
 | 
			
		||||
						item.matPriceS = null;
 | 
			
		||||
						item.energyPriceS = null;
 | 
			
		||||
						item.otherPriceS = null;
 | 
			
		||||
						item.areaPriceS = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('factoryEnergyTableList' in dataJson) {
 | 
			
		||||
				this.tableData2 = dataJson.factoryEnergyTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData2.forEach((item) => {
 | 
			
		||||
						item.price = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('factoryCostTrendList' in dataJson) {
 | 
			
		||||
				this.echartData = dataJson.factoryCostTrendList;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.chartRef.initChart(!this.permission);
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.wholePlantBoard {
 | 
			
		||||
	background: url(../assets/bg.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.main-body {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	gap: 20px;
 | 
			
		||||
	padding: 0px 16px;
 | 
			
		||||
}
 | 
			
		||||
.bz-top {
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.bz25-1 {
 | 
			
		||||
	background: url(../assets/bz25-1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 130px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-2 {
 | 
			
		||||
	background: url(../assets/bz25-2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-3 {
 | 
			
		||||
	background: url(../assets/bz25-3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-4 {
 | 
			
		||||
	background: url(../assets/bz25-4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-5 {
 | 
			
		||||
	background: url(../assets/bz25-5.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-6 {
 | 
			
		||||
	background: url(../assets/bz25-6.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 130px;
 | 
			
		||||
}
 | 
			
		||||
.topNum {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 44px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 43px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 50px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.topText {
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: #95caff;
 | 
			
		||||
	line-height: 20px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 3px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	height: 50px;
 | 
			
		||||
	line-height: 50px;
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 22px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	padding: 0 20px;
 | 
			
		||||
}
 | 
			
		||||
.middle {
 | 
			
		||||
	height: 322px;
 | 
			
		||||
}
 | 
			
		||||
.middle1 {
 | 
			
		||||
	background: url(../assets/1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2 {
 | 
			
		||||
	background: url(../assets/2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.yanqi {
 | 
			
		||||
	width: 275px;
 | 
			
		||||
	height: 108px;
 | 
			
		||||
	background: url(../assets/yanqi.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.content {
 | 
			
		||||
	height: 108px;
 | 
			
		||||
}
 | 
			
		||||
.imageClass {
 | 
			
		||||
	width: 40px;
 | 
			
		||||
	height: 30px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin: 8px auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2-left {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: rgba(255, 255, 255, 0.9);
 | 
			
		||||
	line-height: 17px;
 | 
			
		||||
	letter-spacing: 5px;
 | 
			
		||||
	width: 110px;
 | 
			
		||||
	padding-top: 12px;
 | 
			
		||||
	padding-left: 12px;
 | 
			
		||||
	float: left;
 | 
			
		||||
	margin-right: 10px;
 | 
			
		||||
}
 | 
			
		||||
.middle2-right {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 35px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 106px;
 | 
			
		||||
}
 | 
			
		||||
.footer {
 | 
			
		||||
	height: 410px;
 | 
			
		||||
}
 | 
			
		||||
.footer1 {
 | 
			
		||||
	background: url(../assets/3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.footer2 {
 | 
			
		||||
	background: url(../assets/4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 402px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										568
									
								
								src/views/dashboard/allDashboard/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,568 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="wholePlantContainerB"
 | 
			
		||||
		ref="wholePlantContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="wholePlantContainer"
 | 
			
		||||
			ref="wholePlantContainer"
 | 
			
		||||
			class="wholePlantBoard"
 | 
			
		||||
			style="
 | 
			
		||||
				position: absolute;
 | 
			
		||||
				transform-origin: 16px 8px;
 | 
			
		||||
				font-size: 16px;
 | 
			
		||||
				top: 0px;
 | 
			
		||||
				left: 0px;
 | 
			
		||||
				width: 1920px;
 | 
			
		||||
				height: 1080px;
 | 
			
		||||
				display: flex;
 | 
			
		||||
				flex-direction: column;
 | 
			
		||||
				gap: 24px;
 | 
			
		||||
			"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange" />
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 3" class="bz25-1"></div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-2 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{
 | 
			
		||||
							topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
 | 
			
		||||
						}}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">昨日总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-3 bz-top">
 | 
			
		||||
					<div class="topNum" style="margin-left: 50px">
 | 
			
		||||
						{{
 | 
			
		||||
							topData.yestodayRatio
 | 
			
		||||
								? Number(topData.yestodayRatio).toFixed(1)
 | 
			
		||||
								: '-'
 | 
			
		||||
						}}%
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">昨日良品率</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-4 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">本月总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 5" class="bz25-5 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{
 | 
			
		||||
							topData.monthAreaCost
 | 
			
		||||
								? Number(topData.monthAreaCost).toFixed(1)
 | 
			
		||||
								: '-'
 | 
			
		||||
						}}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">本月每平米总成本/元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 3" class="bz25-6"></div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="middle middle1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="cost" />
 | 
			
		||||
						成本统计
 | 
			
		||||
						<span style="float: right">成本单位:万元 | 产量单位:万平方米</span>
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table1'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps1"
 | 
			
		||||
						:table-data="tableData1"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="middle middle2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="yanqi" />
 | 
			
		||||
						烟气处理
 | 
			
		||||
					</div>
 | 
			
		||||
					<div
 | 
			
		||||
						style="
 | 
			
		||||
							display: flex;
 | 
			
		||||
							flex-wrap: wrap;
 | 
			
		||||
							margin: 10px 30px;
 | 
			
		||||
							gap: 12px;
 | 
			
		||||
						">
 | 
			
		||||
						<div class="yanqi" style="width: 566px">
 | 
			
		||||
							<div
 | 
			
		||||
								class="content middle2-left"
 | 
			
		||||
								style="margin-left: 50px; width: 210px">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
 | 
			
		||||
								二氧化硫 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.fc"></el-image>
 | 
			
		||||
								粉尘排放
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.no"></el-image>
 | 
			
		||||
								氮氧化物 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
					</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="footer footer1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="costchart" />
 | 
			
		||||
						近12个月成本 · 产量趋势
 | 
			
		||||
					</div>
 | 
			
		||||
					<bar-chart
 | 
			
		||||
						ref="chartRef"
 | 
			
		||||
						style="margin-top: -50px"
 | 
			
		||||
						:echart-data="echartData"></bar-chart>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="footer footer2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="energy" />
 | 
			
		||||
						能源统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table2'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps2"
 | 
			
		||||
						:table-data="tableData2"
 | 
			
		||||
						:height="310"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import baseTable from '../components/baseTable.vue';
 | 
			
		||||
import BarChart from './BarChart.vue';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
 | 
			
		||||
const tableProps1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'priceS',
 | 
			
		||||
		label: '总成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outO',
 | 
			
		||||
		label: '原片产量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioO',
 | 
			
		||||
		label: '原片良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outD',
 | 
			
		||||
		label: '深加工产量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioD',
 | 
			
		||||
		label: '深加工良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'matPriceS',
 | 
			
		||||
		label: '原料成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'energyPriceS',
 | 
			
		||||
		label: '能源成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'otherPriceS',
 | 
			
		||||
		label: '其他成本',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'areaPriceS',
 | 
			
		||||
		label: '每平米成本/元',
 | 
			
		||||
		width: 140,
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elec',
 | 
			
		||||
		label: '电消耗量/kwh',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'gas',
 | 
			
		||||
		label: '气消耗量/m³',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '总价/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		baseTable,
 | 
			
		||||
		BarChart,
 | 
			
		||||
	},
 | 
			
		||||
	// provide() {
 | 
			
		||||
	// 	return {
 | 
			
		||||
	// 		resizeChart: null,
 | 
			
		||||
	// 	};
 | 
			
		||||
	// },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			scaleNum: 0.8,
 | 
			
		||||
			topData: {},
 | 
			
		||||
			imgUrl: {
 | 
			
		||||
				fc: require('@/views/dashboard/assets/fc.png'),
 | 
			
		||||
				no: require('@/views/dashboard/assets/NO.png'),
 | 
			
		||||
				so2: require('@/views/dashboard/assets/SO2.png'),
 | 
			
		||||
			},
 | 
			
		||||
			tableProps1,
 | 
			
		||||
			tableData1: [],
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			echartData: [],
 | 
			
		||||
			permission: false,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.permission = false;
 | 
			
		||||
		getUserProfile().then((response) => {
 | 
			
		||||
			const user = response.data;
 | 
			
		||||
			if (user.roles[0].name !== 'dashborad') {
 | 
			
		||||
				this.permission = true;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.permission = false;
 | 
			
		||||
			}
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	destroy() {
 | 
			
		||||
		this.destroy();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.wholePlantContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let wholePlantContainerBox = document.getElementById(
 | 
			
		||||
				'wholePlantContainer'
 | 
			
		||||
			);
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(wholePlantContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(wholePlantContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			if (screenfull.isFullscreen) {
 | 
			
		||||
				wx = rw / bw;
 | 
			
		||||
				hx = rh / bh;
 | 
			
		||||
			} else {
 | 
			
		||||
				if (this.$store.state.app.sidebar.opened) {
 | 
			
		||||
					wx = (rw - 280) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				} else {
 | 
			
		||||
					wx = (rw - 85) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=1`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let dataJson = JSON.parse(e.data);
 | 
			
		||||
			console.log(dataJson);
 | 
			
		||||
			// 数据接收
 | 
			
		||||
			if ('factoryState' in dataJson) {
 | 
			
		||||
				this.topData = dataJson.factoryState;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.topData.monthAreaCost = '***';
 | 
			
		||||
					this.topData.monthSum = '***';
 | 
			
		||||
					this.topData.yestodaySum = '***';
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('factoryCostTableList' in dataJson) {
 | 
			
		||||
				this.tableData1 = dataJson.factoryCostTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData1.forEach((item) => {
 | 
			
		||||
						item.priceS = null;
 | 
			
		||||
						item.matPriceS = null;
 | 
			
		||||
						item.energyPriceS = null;
 | 
			
		||||
						item.otherPriceS = null;
 | 
			
		||||
						item.areaPriceS = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('factoryEnergyTableList' in dataJson) {
 | 
			
		||||
				this.tableData2 = dataJson.factoryEnergyTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData2.forEach((item) => {
 | 
			
		||||
						item.price = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('factoryCostTrendList' in dataJson) {
 | 
			
		||||
				this.echartData = dataJson.factoryCostTrendList;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.chartRef.initChart(!this.permission);
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.wholePlantBoard {
 | 
			
		||||
	background: url(../assets/bg.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.main-body {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	gap: 20px;
 | 
			
		||||
	padding: 0px 16px;
 | 
			
		||||
}
 | 
			
		||||
.bz-top {
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.bz25-1 {
 | 
			
		||||
	background: url(../assets/bz25-1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 130px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-2 {
 | 
			
		||||
	background: url(../assets/bz25-2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-3 {
 | 
			
		||||
	background: url(../assets/bz25-3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-4 {
 | 
			
		||||
	background: url(../assets/bz25-4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-5 {
 | 
			
		||||
	background: url(../assets/bz25-5.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-6 {
 | 
			
		||||
	background: url(../assets/bz25-6.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 130px;
 | 
			
		||||
}
 | 
			
		||||
.topNum {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 44px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 43px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 50px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.topText {
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: #95caff;
 | 
			
		||||
	line-height: 20px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 3px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	height: 50px;
 | 
			
		||||
	line-height: 50px;
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 22px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	padding: 0 20px;
 | 
			
		||||
}
 | 
			
		||||
.middle {
 | 
			
		||||
	height: 322px;
 | 
			
		||||
}
 | 
			
		||||
.middle1 {
 | 
			
		||||
	background: url(../assets/1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2 {
 | 
			
		||||
	background: url(../assets/2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.yanqi {
 | 
			
		||||
	width: 275px;
 | 
			
		||||
	height: 108px;
 | 
			
		||||
	background: url(../assets/yanqi.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.content {
 | 
			
		||||
	height: 108px;
 | 
			
		||||
}
 | 
			
		||||
.imageClass {
 | 
			
		||||
	width: 40px;
 | 
			
		||||
	height: 30px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin: 8px auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2-left {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: rgba(255, 255, 255, 0.9);
 | 
			
		||||
	line-height: 17px;
 | 
			
		||||
	letter-spacing: 5px;
 | 
			
		||||
	width: 110px;
 | 
			
		||||
	padding-top: 12px;
 | 
			
		||||
	padding-left: 12px;
 | 
			
		||||
	float: left;
 | 
			
		||||
	margin-right: 10px;
 | 
			
		||||
}
 | 
			
		||||
.middle2-right {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 35px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 106px;
 | 
			
		||||
}
 | 
			
		||||
.footer {
 | 
			
		||||
	height: 410px;
 | 
			
		||||
}
 | 
			
		||||
.footer1 {
 | 
			
		||||
	background: url(../assets/3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.footer2 {
 | 
			
		||||
	background: url(../assets/4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 402px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 24 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 19 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/3.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 28 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/4.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 20 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/NO.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.9 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/NO2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 2.2 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/O2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.2 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/SO2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.8 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bg.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 2.1 MiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bg1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 2.1 MiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 32 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 21 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-3.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 17 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-4.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 18 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-5.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 16 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-6.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 33 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-7.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 16 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-8.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 17 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-d-1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 21 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-d-2.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 17 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-d-3.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 19 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-d-4.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 17 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/bz25-d-5.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 18 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/fc.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.3 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/views/dashboard/assets/yanqi.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 3.4 KiB  | 
							
								
								
									
										265
									
								
								src/views/dashboard/coldDashboard/components/dataBox.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,265 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="dataBox">
 | 
			
		||||
    <div class="side1"></div>
 | 
			
		||||
    <div class="side2"></div>
 | 
			
		||||
    <div class='titleBox'>
 | 
			
		||||
      <svg-icon icon-class="energy" />
 | 
			
		||||
      {{title}}
 | 
			
		||||
      <span class='line1' style='left: 0px'></span>
 | 
			
		||||
      <span class='line2' style='left: 0px'></span>
 | 
			
		||||
      <span class='line2' style='right: 0px'></span>
 | 
			
		||||
      <span class='line1' style='right: 0px'></span>
 | 
			
		||||
    </div>
 | 
			
		||||
    <span class='lt' v-if='position == "lt"'></span>
 | 
			
		||||
    <span class='rt' v-if='position == "rt"'></span>
 | 
			
		||||
    <span class='lb' v-if='position == "lb"'></span>
 | 
			
		||||
    <span class='rb' v-if='position == "rb"'></span>
 | 
			
		||||
    <div class="centerBox">
 | 
			
		||||
      <div class="centerBoxItem1">
 | 
			
		||||
        <span class='num'>{{msgData?.cut || '-'}}片</span>
 | 
			
		||||
        <span class='name'>- 预计切割片数 -</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="centerBoxItem1">
 | 
			
		||||
        <span class='num'>{{msgData?.allRatio ? msgData?.allRatio*100:'-'}}%</span>
 | 
			
		||||
        <span class='name'>- 综合面积良品率 -</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="centerBoxItem2">
 | 
			
		||||
        <span class='name'>掰边后片数:</span>
 | 
			
		||||
        <span class='num'>{{msgData?.bai || '-'}}片</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="centerBoxItem2">
 | 
			
		||||
        <span class='name'>掰边后良品率:</span>
 | 
			
		||||
        <span class='num'>{{msgData?.baiRatio ? msgData?.baiRatio*100 : '-'}}%</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="centerBoxItem2">
 | 
			
		||||
        <span class='name'>顶板后片数:</span>
 | 
			
		||||
        <span class='num'>{{msgData?.ding || '-'}}片</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="centerBoxItem2">
 | 
			
		||||
        <span class='name'>顶板后良品率:</span>
 | 
			
		||||
        <span class='num'>{{msgData?.dingRatio ? msgData?.dingRatio*100 : '-'}}%</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="centerBoxItem2">
 | 
			
		||||
        <span class='name'>下片片数:</span>
 | 
			
		||||
        <span class='num'>{{msgData?.xia || '-'}}片</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="centerBoxItem2">
 | 
			
		||||
        <span class='name'>下片良品率:</span>
 | 
			
		||||
        <span class='num'>{{msgData?.xiaRatio ? msgData?.xiaRatio*100 : '-'}}%</span>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'DataBox',
 | 
			
		||||
  props: {
 | 
			
		||||
    title: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: ''
 | 
			
		||||
    },
 | 
			
		||||
    position:{
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: ''
 | 
			
		||||
    },
 | 
			
		||||
    msgData: {
 | 
			
		||||
      type: Object,
 | 
			
		||||
      default: () => {}
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {}
 | 
			
		||||
  },
 | 
			
		||||
  created() {},
 | 
			
		||||
  methods: {}
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.dataBox {
 | 
			
		||||
  width: 909px;
 | 
			
		||||
  height: 430px;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  &::before {
 | 
			
		||||
    content: "";
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    backdrop-filter: blur(10px);
 | 
			
		||||
    z-index: 0;
 | 
			
		||||
  }
 | 
			
		||||
  &::after {
 | 
			
		||||
    content: "";
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 909px;
 | 
			
		||||
    height: 2px;
 | 
			
		||||
    border-radius: 2px;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    bottom: 0;
 | 
			
		||||
    background: radial-gradient(circle at center,
 | 
			
		||||
      rgba(88, 194, 255, 1) 10%,
 | 
			
		||||
      rgba(0, 176, 243, 0) 90%,
 | 
			
		||||
        transparent);
 | 
			
		||||
  }
 | 
			
		||||
  .side1 {
 | 
			
		||||
    content: "";
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    height: 400px;
 | 
			
		||||
    width: 2px;
 | 
			
		||||
    border-radius: 2px;
 | 
			
		||||
    top: 40px;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    background: radial-gradient(circle at center,
 | 
			
		||||
      rgba(88, 194, 255, 1) 10%,
 | 
			
		||||
      rgba(0, 176, 243, 0) 80%,
 | 
			
		||||
        transparent);
 | 
			
		||||
  }
 | 
			
		||||
  .side2 {
 | 
			
		||||
    content: "";
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    height: 400px;
 | 
			
		||||
    width: 2px;
 | 
			
		||||
    border-radius: 2px;
 | 
			
		||||
    top: 40px;
 | 
			
		||||
    right: 0;
 | 
			
		||||
    background: radial-gradient(circle at center,
 | 
			
		||||
      rgba(88, 194, 255, 1) 10%,
 | 
			
		||||
      rgba(0, 176, 243, 0) 80%,
 | 
			
		||||
        transparent);
 | 
			
		||||
  }
 | 
			
		||||
    
 | 
			
		||||
  .titleBox {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 48px;
 | 
			
		||||
    line-height: 48px;
 | 
			
		||||
    padding-left: 23px;
 | 
			
		||||
    background-color: rgba(0, 106, 205, 0.22);
 | 
			
		||||
    font-size: 22px;
 | 
			
		||||
    color: #fff;
 | 
			
		||||
    .line1 {
 | 
			
		||||
      display: inline-block;
 | 
			
		||||
      width: 2px;
 | 
			
		||||
      height: 16px;
 | 
			
		||||
      background-color: #0078E4;
 | 
			
		||||
      position: absolute;
 | 
			
		||||
      top: 0px;
 | 
			
		||||
    }
 | 
			
		||||
    .line2 {
 | 
			
		||||
      display: inline-block;
 | 
			
		||||
      width: 16px;
 | 
			
		||||
      height: 2px;
 | 
			
		||||
      background-color: #0078E4;
 | 
			
		||||
      position: absolute;
 | 
			
		||||
      top: 0px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .lt {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 0;
 | 
			
		||||
    height: 0;
 | 
			
		||||
    border: 10px solid transparent; 
 | 
			
		||||
    border-left-color: #1F8FFF;
 | 
			
		||||
    border-top-color: #1F8FFF;
 | 
			
		||||
  }
 | 
			
		||||
  .rt {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    right: 0;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 0;
 | 
			
		||||
    height: 0;
 | 
			
		||||
    border: 10px solid transparent; 
 | 
			
		||||
    border-right-color: #1F8FFF;
 | 
			
		||||
    border-top-color: #1F8FFF;
 | 
			
		||||
  }
 | 
			
		||||
  .lb {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    bottom: 0;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 0;
 | 
			
		||||
    height: 0;
 | 
			
		||||
    border: 10px solid transparent; 
 | 
			
		||||
    border-left-color: #1F8FFF;
 | 
			
		||||
    border-bottom-color: #1F8FFF;
 | 
			
		||||
  }
 | 
			
		||||
  .rb {
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    right: 0;
 | 
			
		||||
    bottom: 0;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: 0;
 | 
			
		||||
    height: 0;
 | 
			
		||||
    border: 10px solid transparent; 
 | 
			
		||||
    border-right-color: #1F8FFF;
 | 
			
		||||
    border-bottom-color: #1F8FFF;
 | 
			
		||||
  }
 | 
			
		||||
  .centerBox {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-wrap: wrap;
 | 
			
		||||
    justify-content: space-between;
 | 
			
		||||
    align-content: space-between;
 | 
			
		||||
    padding: 20px 24px 35px 24px;
 | 
			
		||||
    .centerBoxItem1 {
 | 
			
		||||
      width: 426px;
 | 
			
		||||
      height: 106px;
 | 
			
		||||
      background: url(../../../../assets/img/cold-data-board-msg1.png) no-repeat;
 | 
			
		||||
      background-size: 100% 100%;
 | 
			
		||||
      margin-bottom: 16px;
 | 
			
		||||
      box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
 | 
			
		||||
      text-align: center;
 | 
			
		||||
      .num {
 | 
			
		||||
        font-family: '站酷庆科黄油体';
 | 
			
		||||
        font-size: 32px;
 | 
			
		||||
        font-weight: bold;
 | 
			
		||||
        display: block;
 | 
			
		||||
        margin-top:15px;
 | 
			
		||||
        margin-bottom: 3px;
 | 
			
		||||
        color: #48D6FF;
 | 
			
		||||
        letter-spacing: 6px;
 | 
			
		||||
        text-shadow: 1px 4px 2px #000000;
 | 
			
		||||
      }
 | 
			
		||||
      .name {
 | 
			
		||||
        display: block;
 | 
			
		||||
        font-size: 20px;
 | 
			
		||||
        letter-spacing: 1px;
 | 
			
		||||
        color: rgba(255,255,255,0.9);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
    .centerBoxItem2 {
 | 
			
		||||
      width: 426px;
 | 
			
		||||
      height: 56px;
 | 
			
		||||
      line-height: 56px;
 | 
			
		||||
      background: url(../../../../assets/img/cold-data-board-msg2.png) no-repeat;
 | 
			
		||||
      background-size: 100% 100%;
 | 
			
		||||
      margin-bottom: 16px;
 | 
			
		||||
      font-size: 20px;
 | 
			
		||||
      letter-spacing: 1px;
 | 
			
		||||
      .name {
 | 
			
		||||
        display: inline-block;
 | 
			
		||||
        text-align: right;
 | 
			
		||||
        width: 213px;
 | 
			
		||||
        color: rgba(255,255,255,0.9);
 | 
			
		||||
      }
 | 
			
		||||
      .num {
 | 
			
		||||
        display: inline-block;
 | 
			
		||||
        text-align: left;
 | 
			
		||||
        width: 213px;
 | 
			
		||||
        color: #15C1F2;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.dataBox > * {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  z-index: 1;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										184
									
								
								src/views/dashboard/coldDashboard/index-model.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,184 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="coldContainerB"
 | 
			
		||||
		ref="coldContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="coldContainer"
 | 
			
		||||
			class="coldContainer"
 | 
			
		||||
			style="width: 1920px; height: 1080px"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange"
 | 
			
		||||
				topTitle="自贡冷端数据看板" />
 | 
			
		||||
			<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
 | 
			
		||||
			<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
 | 
			
		||||
			<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
 | 
			
		||||
			<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import DataBox from './components/dataBox';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'ColdDashboard',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		DataBox,
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			scaleNum: 1,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			line1: {},
 | 
			
		||||
			line2: {},
 | 
			
		||||
			line3: {},
 | 
			
		||||
			line4: {},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.initWebSocket();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
		this.websocketclose();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.coldContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let coldContainerBox = document.getElementById('coldContainer');
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(coldContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(coldContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			wx = rw / bw;
 | 
			
		||||
			hx = rh / bh;
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=4`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let msgData = e.data;
 | 
			
		||||
			try {
 | 
			
		||||
				msgData = JSON.parse(e.data);
 | 
			
		||||
			} catch (error) {
 | 
			
		||||
				console.log('websocket: [unable to msgData] :  ', e.data);
 | 
			
		||||
			}
 | 
			
		||||
			if (!Object.prototype.toString.call(msgData).includes('Object')) return;
 | 
			
		||||
			msgData.originRatioTables &&
 | 
			
		||||
				msgData.originRatioTables.forEach((item) => {
 | 
			
		||||
					item.lineName.includes('1') && (this.line1 = item);
 | 
			
		||||
					item.lineName.includes('2') && (this.line2 = item);
 | 
			
		||||
					item.lineName.includes('3') && (this.line3 = item);
 | 
			
		||||
					item.lineName.includes('4') && (this.line4 = item);
 | 
			
		||||
				});
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend() {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send('');
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			this.websock.close();
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.coldContainer {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	transform-origin: 16px 8px;
 | 
			
		||||
	font-size: 16px;
 | 
			
		||||
	top: 0px;
 | 
			
		||||
	left: 0px;
 | 
			
		||||
	width: 1920px;
 | 
			
		||||
	height: 1080px;
 | 
			
		||||
	background: url(../assets/bg1.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	.box1 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: 141px;
 | 
			
		||||
		left: 40px;
 | 
			
		||||
	}
 | 
			
		||||
	.box2 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: 141px;
 | 
			
		||||
		right: 40px;
 | 
			
		||||
	}
 | 
			
		||||
	.box3 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		bottom: 66px;
 | 
			
		||||
		left: 40px;
 | 
			
		||||
	}
 | 
			
		||||
	.box4 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		bottom: 66px;
 | 
			
		||||
		right: 40px;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										194
									
								
								src/views/dashboard/coldDashboard/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,194 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="coldContainerB"
 | 
			
		||||
		ref="coldContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="coldContainer"
 | 
			
		||||
			class="coldContainer"
 | 
			
		||||
			style="width: 1920px; height: 1080px"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange"
 | 
			
		||||
				topTitle="自贡冷端数据看板" />
 | 
			
		||||
			<DataBox title="原片产线1" position="lt" :msgData="line1" class="box1" />
 | 
			
		||||
			<DataBox title="原片产线2" position="rt" :msgData="line2" class="box2" />
 | 
			
		||||
			<DataBox title="原片产线3" position="lb" :msgData="line3" class="box3" />
 | 
			
		||||
			<DataBox title="原片产线4" position="rb" :msgData="line4" class="box4" />
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import DataBox from './components/dataBox';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'ColdDashboard',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		DataBox,
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			scaleNum: 1,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			line1: {},
 | 
			
		||||
			line2: {},
 | 
			
		||||
			line3: {},
 | 
			
		||||
			line4: {},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.initWebSocket();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
		this.websocketclose();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.coldContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let coldContainerBox = document.getElementById('coldContainer');
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(coldContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(coldContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			if (screenfull.isFullscreen) {
 | 
			
		||||
				wx = rw / bw;
 | 
			
		||||
				hx = rh / bh;
 | 
			
		||||
			} else {
 | 
			
		||||
				if (this.$store.state.app.sidebar.opened) {
 | 
			
		||||
					wx = (rw - 280) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				} else {
 | 
			
		||||
					wx = (rw - 85) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=4`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let msgData = e.data;
 | 
			
		||||
			try {
 | 
			
		||||
				msgData = JSON.parse(e.data);
 | 
			
		||||
			} catch (error) {
 | 
			
		||||
				console.log('websocket: [unable to msgData] :  ', e.data);
 | 
			
		||||
			}
 | 
			
		||||
			if (!Object.prototype.toString.call(msgData).includes('Object')) return;
 | 
			
		||||
			msgData.originRatioTables &&
 | 
			
		||||
				msgData.originRatioTables.forEach((item) => {
 | 
			
		||||
					item.lineName.includes('1') && (this.line1 = item);
 | 
			
		||||
					item.lineName.includes('2') && (this.line2 = item);
 | 
			
		||||
					item.lineName.includes('3') && (this.line3 = item);
 | 
			
		||||
					item.lineName.includes('4') && (this.line4 = item);
 | 
			
		||||
				});
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend() {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send('');
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			this.websock.close();
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.coldContainer {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	transform-origin: 16px 8px;
 | 
			
		||||
	font-size: 16px;
 | 
			
		||||
	top: 0px;
 | 
			
		||||
	left: 0px;
 | 
			
		||||
	width: 1920px;
 | 
			
		||||
	height: 1080px;
 | 
			
		||||
	background: url(../assets/bg1.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	.box1 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: 141px;
 | 
			
		||||
		left: 40px;
 | 
			
		||||
	}
 | 
			
		||||
	.box2 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: 141px;
 | 
			
		||||
		right: 40px;
 | 
			
		||||
	}
 | 
			
		||||
	.box3 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		bottom: 66px;
 | 
			
		||||
		left: 40px;
 | 
			
		||||
	}
 | 
			
		||||
	.box4 {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		bottom: 66px;
 | 
			
		||||
		right: 40px;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										122
									
								
								src/views/dashboard/components/Header.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,122 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2025-02-27 15:04:43
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2025-03-04 13:47:41
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<header class="kiln-header">
 | 
			
		||||
		<h1>{{ topTitle }}</h1>
 | 
			
		||||
		<!-- left: 312px; -->
 | 
			
		||||
		<!-- <div
 | 
			
		||||
			class="firm">
 | 
			
		||||
			单位:
 | 
			
		||||
		</div> -->
 | 
			
		||||
		<div class="datetime">
 | 
			
		||||
			<!-- <DateBtnGroup /> -->
 | 
			
		||||
			<span style="display: inline-block">
 | 
			
		||||
				{{ topTime }}
 | 
			
		||||
			</span>
 | 
			
		||||
			<span>{{ topDate + ' ' + timeZone }}</span>
 | 
			
		||||
		</div>
 | 
			
		||||
		<el-button type="text" class="screen-btn" @click="changeFullScreen">
 | 
			
		||||
			<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
 | 
			
		||||
			<svg-icon v-else icon-class="fullScreenView" />
 | 
			
		||||
		</el-button>
 | 
			
		||||
	</header>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
// import DateBtnGroup from './DateBtnGroup.vue';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'KilnHeader',
 | 
			
		||||
	// components: { DateBtnGroup },
 | 
			
		||||
	props: {
 | 
			
		||||
		isFullScreen: false,
 | 
			
		||||
		topTitle: '',
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			timer: '',
 | 
			
		||||
			topDate: '',
 | 
			
		||||
			topTime: '',
 | 
			
		||||
			timeZone: '',
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.getTime();
 | 
			
		||||
	},
 | 
			
		||||
	beforeDestroy() {
 | 
			
		||||
		clearInterval(this.timer);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		changeFullScreen() {
 | 
			
		||||
			this.$emit('screenfullChange');
 | 
			
		||||
		},
 | 
			
		||||
		getTime() {
 | 
			
		||||
			let _this = this;
 | 
			
		||||
			this.timer = setInterval(function () {
 | 
			
		||||
				_this.topDate = moment().format('YYYY.MM.DD');
 | 
			
		||||
				let temp = moment().format('d-HH:mm').split('-');
 | 
			
		||||
				_this.timeZone = [
 | 
			
		||||
					'星期天',
 | 
			
		||||
					'星期一',
 | 
			
		||||
					'星期二',
 | 
			
		||||
					'星期三',
 | 
			
		||||
					'星期四',
 | 
			
		||||
					'星期五',
 | 
			
		||||
					'星期六',
 | 
			
		||||
				][temp[0]];
 | 
			
		||||
				_this.topTime = temp[1];
 | 
			
		||||
			}, 1000);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.kiln-header {
 | 
			
		||||
	height: 96px;
 | 
			
		||||
	display: grid;
 | 
			
		||||
	place-content: center;
 | 
			
		||||
	position: relative;
 | 
			
		||||
	h1 {
 | 
			
		||||
		font-family: HelloFont, HelloFont;
 | 
			
		||||
		font-weight: bold;
 | 
			
		||||
		font-size: 38px;
 | 
			
		||||
		color: #ffffff;
 | 
			
		||||
		letter-spacing: 10px;
 | 
			
		||||
		text-shadow: 1px 7px 2px #002144;
 | 
			
		||||
	}
 | 
			
		||||
	.firm {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: 45px;
 | 
			
		||||
		left: 325px;
 | 
			
		||||
		color: #fff;
 | 
			
		||||
		font-size: 20px;
 | 
			
		||||
		letter-spacing: 1px;
 | 
			
		||||
	}
 | 
			
		||||
	.datetime {
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: 75px;
 | 
			
		||||
		right: 405px;
 | 
			
		||||
		color: #69b4ff;
 | 
			
		||||
		font-size: 20px;
 | 
			
		||||
		letter-spacing: 1px;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
		gap: 16px;
 | 
			
		||||
	}
 | 
			
		||||
	.screen-btn {
 | 
			
		||||
		color: #69b4ff;
 | 
			
		||||
		font-size: 32px;
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		right: 32px;
 | 
			
		||||
		top: 60px;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										326
									
								
								src/views/dashboard/components/baseTable.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,326 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="baseTable" :id="id">
 | 
			
		||||
		<el-table
 | 
			
		||||
			:ref="id"
 | 
			
		||||
			:data="renderData"
 | 
			
		||||
			v-bind="$attrs"
 | 
			
		||||
			:border="cancelBorder ? false : true"
 | 
			
		||||
			@current-change="currentChange"
 | 
			
		||||
			@selection-change="handleSelectionChange"
 | 
			
		||||
			style="width: 100%"
 | 
			
		||||
			:header-cell-style="{
 | 
			
		||||
				backgroundColor: 'rgba(0,106,205,0.1)',
 | 
			
		||||
				color: '#fff',
 | 
			
		||||
				height: 30 + 'px',
 | 
			
		||||
				lineHeight: 30 + 'px',
 | 
			
		||||
				padding: 0,
 | 
			
		||||
				fontSize: 14 + 'px',
 | 
			
		||||
				letterSpacing: '2px',
 | 
			
		||||
			}"
 | 
			
		||||
			:row-style="setRowStyle">
 | 
			
		||||
			<!-- 多选 -->
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				v-if="selectWidth"
 | 
			
		||||
				type="selection"
 | 
			
		||||
				:width="selectWidth" />
 | 
			
		||||
			<!-- 序号 -->
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				v-if="page && limit"
 | 
			
		||||
				prop="_pageIndex"
 | 
			
		||||
				:width="pageWidth"
 | 
			
		||||
				align="center"
 | 
			
		||||
				:fixed="cancelPageFixed ? false : true">
 | 
			
		||||
				<template slot="header">
 | 
			
		||||
					<el-popover placement="bottom-start" width="300" trigger="click">
 | 
			
		||||
						<div
 | 
			
		||||
							class="setting-box"
 | 
			
		||||
							style="max-height: 400px; overflow-y: auto">
 | 
			
		||||
							<el-checkbox
 | 
			
		||||
								v-for="(item, index) in tableProps"
 | 
			
		||||
								:key="'cb' + index"
 | 
			
		||||
								v-model="selectedBox[index]"
 | 
			
		||||
								:label="item.label" />
 | 
			
		||||
						</div>
 | 
			
		||||
						<i slot="reference" class="el-icon-s-tools" />
 | 
			
		||||
					</el-popover>
 | 
			
		||||
				</template>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				v-for="item in renderTableHeadList"
 | 
			
		||||
				:key="item.prop"
 | 
			
		||||
				v-bind="item"
 | 
			
		||||
				:label="item.label"
 | 
			
		||||
				:prop="item.prop"
 | 
			
		||||
				:fixed="item.fixed || false"
 | 
			
		||||
				:show-overflow-tooltip="item.showOverflowtooltip || false"
 | 
			
		||||
				:sortable="item.sortable || false">
 | 
			
		||||
				<template slot="header">
 | 
			
		||||
					<span>{{ item.label }}</span>
 | 
			
		||||
				</template>
 | 
			
		||||
 | 
			
		||||
				<!-- 多表头 -->
 | 
			
		||||
				<template v-if="item.children">
 | 
			
		||||
					<el-table-column
 | 
			
		||||
						v-for="sub in item.children"
 | 
			
		||||
						:prop="sub.prop"
 | 
			
		||||
						:key="sub.prop"
 | 
			
		||||
						v-bind="sub"
 | 
			
		||||
						:label="sub.label">
 | 
			
		||||
						<template slot-scope="scopeInner">
 | 
			
		||||
							<component
 | 
			
		||||
								:is="sub.subcomponent"
 | 
			
		||||
								v-if="sub.subcomponent"
 | 
			
		||||
								:key="scopeInner.row.id"
 | 
			
		||||
								:inject-data="{ ...scopeInner.row, ...sub }"
 | 
			
		||||
								@emitData="emitData" />
 | 
			
		||||
							<span v-else>
 | 
			
		||||
								{{ scopeInner.row[sub.prop] | commonFilter(sub.filter) }}
 | 
			
		||||
							</span>
 | 
			
		||||
						</template>
 | 
			
		||||
					</el-table-column>
 | 
			
		||||
				</template>
 | 
			
		||||
				<template slot-scope="scope">
 | 
			
		||||
					<component
 | 
			
		||||
						:is="item.subcomponent"
 | 
			
		||||
						v-if="item.subcomponent"
 | 
			
		||||
						:key="scope.row.id"
 | 
			
		||||
						:itemProp="item.prop"
 | 
			
		||||
						:inject-data="{ ...scope.row, ...item }"
 | 
			
		||||
						@emitData="emitData" />
 | 
			
		||||
					<span v-else>
 | 
			
		||||
						{{ scope.row[item.prop] | commonFilter(item.filter) }}
 | 
			
		||||
					</span>
 | 
			
		||||
				</template>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
		</el-table>
 | 
			
		||||
		<!-- 表格底部加号 -->
 | 
			
		||||
		<el-button
 | 
			
		||||
			v-if="addButtonShow"
 | 
			
		||||
			class="addButton"
 | 
			
		||||
			icon="el-icon-plus"
 | 
			
		||||
			@click="emitButtonClick">
 | 
			
		||||
			{{ addButtonShow }}
 | 
			
		||||
		</el-button>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'BaseTable',
 | 
			
		||||
	filters: {
 | 
			
		||||
		commonFilter: (source, filterType = (a) => a) => {
 | 
			
		||||
			return filterType(source);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	props: {
 | 
			
		||||
		cancelBorder: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			default: false,
 | 
			
		||||
		},
 | 
			
		||||
		cancelPageFixed: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			default: false,
 | 
			
		||||
		},
 | 
			
		||||
		tableData: {
 | 
			
		||||
			type: Array,
 | 
			
		||||
			required: true,
 | 
			
		||||
			default: () => {
 | 
			
		||||
				return [];
 | 
			
		||||
			},
 | 
			
		||||
		},
 | 
			
		||||
		tableProps: {
 | 
			
		||||
			type: Array,
 | 
			
		||||
			default: () => {
 | 
			
		||||
				return [];
 | 
			
		||||
			},
 | 
			
		||||
		},
 | 
			
		||||
		id: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			required: false,
 | 
			
		||||
			default: '',
 | 
			
		||||
		},
 | 
			
		||||
		page: {
 | 
			
		||||
			type: Number,
 | 
			
		||||
			required: false,
 | 
			
		||||
			default: 0,
 | 
			
		||||
		},
 | 
			
		||||
		pageWidth: {
 | 
			
		||||
			type: Number,
 | 
			
		||||
			required: false,
 | 
			
		||||
			default: 70,
 | 
			
		||||
		},
 | 
			
		||||
		limit: {
 | 
			
		||||
			type: Number,
 | 
			
		||||
			required: false,
 | 
			
		||||
			default: 0,
 | 
			
		||||
		},
 | 
			
		||||
		selectWidth: {
 | 
			
		||||
			type: Number,
 | 
			
		||||
			required: false,
 | 
			
		||||
			default: 0,
 | 
			
		||||
		},
 | 
			
		||||
		addButtonShow: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			required: false,
 | 
			
		||||
			default: '',
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			selectedBox: new Array(100).fill(true),
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {
 | 
			
		||||
		renderTableHeadList() {
 | 
			
		||||
			return this.tableProps.filter((item, index) => {
 | 
			
		||||
				return this.selectedBox[index];
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		renderData() {
 | 
			
		||||
			return this.tableData.map((item, index) => {
 | 
			
		||||
				return {
 | 
			
		||||
					...item,
 | 
			
		||||
					_pageIndex: (this.page - 1) * this.limit + index + 1,
 | 
			
		||||
				};
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	beforeMount() {
 | 
			
		||||
		this.selectedBox = new Array(100).fill(true);
 | 
			
		||||
		if (this.id === 'table2') {
 | 
			
		||||
			this.$nextTick(() => {
 | 
			
		||||
				document
 | 
			
		||||
					.getElementById('table2')
 | 
			
		||||
					.style.setProperty('--zg-height', '53px');
 | 
			
		||||
			});
 | 
			
		||||
		} else {
 | 
			
		||||
			this.$nextTick(() => {
 | 
			
		||||
				document
 | 
			
		||||
					.getElementById(this.id)
 | 
			
		||||
					.style.setProperty('--zg-height', '40px');
 | 
			
		||||
			});
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		currentChange(newVal, oldVal) {
 | 
			
		||||
			this.$emit('current-change', { newVal, oldVal });
 | 
			
		||||
		},
 | 
			
		||||
		handleSelectionChange(val) {
 | 
			
		||||
			this.$emit('selection-change', val);
 | 
			
		||||
		},
 | 
			
		||||
		emitData(val) {
 | 
			
		||||
			this.$emit('emitFun', val);
 | 
			
		||||
		},
 | 
			
		||||
		emitButtonClick() {
 | 
			
		||||
			this.$emit('emitButtonClick');
 | 
			
		||||
		},
 | 
			
		||||
		setCurrent(name, index) {
 | 
			
		||||
			let _this = this;
 | 
			
		||||
			let obj = _this.$refs[name].data[index];
 | 
			
		||||
			_this.$refs[name].setCurrentRow(obj);
 | 
			
		||||
		},
 | 
			
		||||
		doLayout(name) {
 | 
			
		||||
			this.$refs[name].doLayout();
 | 
			
		||||
		},
 | 
			
		||||
		setRowStyle(v) {
 | 
			
		||||
			if (v.rowIndex % 2 === 0) {
 | 
			
		||||
				return {
 | 
			
		||||
					background: 'rgba(2, 13, 45, 0.3)',
 | 
			
		||||
					height: 30 + 'px',
 | 
			
		||||
					lineHeight: 30 + 'px',
 | 
			
		||||
					padding: 0,
 | 
			
		||||
					fontSize: 14 + 'px',
 | 
			
		||||
				};
 | 
			
		||||
			} else {
 | 
			
		||||
				return {
 | 
			
		||||
					background: 'rgba(0,106,205,0.1)',
 | 
			
		||||
					height: 30 + 'px',
 | 
			
		||||
					lineHeight: 30 + 'px',
 | 
			
		||||
					padding: 0,
 | 
			
		||||
					fontSize: 14 + 'px',
 | 
			
		||||
				};
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style scoped>
 | 
			
		||||
:root {
 | 
			
		||||
	--zg-height: 40px; /* 定义变量 */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.baseTable .show-col-btn {
 | 
			
		||||
	margin-right: 5px;
 | 
			
		||||
	line-height: inherit;
 | 
			
		||||
	cursor: pointer;
 | 
			
		||||
}
 | 
			
		||||
.baseTable .el-icon-refresh {
 | 
			
		||||
	cursor: pointer;
 | 
			
		||||
}
 | 
			
		||||
.baseTable >>> .el-table .el-table__cell {
 | 
			
		||||
	padding: 0;
 | 
			
		||||
	height: var(--zg-height);
 | 
			
		||||
}
 | 
			
		||||
.baseTable >>> .el-table {
 | 
			
		||||
	background-color: transparent;
 | 
			
		||||
	border: none;
 | 
			
		||||
	color: white;
 | 
			
		||||
}
 | 
			
		||||
.baseTable >>> .el-table::before,
 | 
			
		||||
.el-table--group::after,
 | 
			
		||||
.el-table--border::after {
 | 
			
		||||
	background-color: transparent;
 | 
			
		||||
	border: none;
 | 
			
		||||
}
 | 
			
		||||
.baseTable >>> .el-table--border::after,
 | 
			
		||||
.el-table--group::after,
 | 
			
		||||
.el-table::before {
 | 
			
		||||
	background-color: transparent;
 | 
			
		||||
	border: none;
 | 
			
		||||
}
 | 
			
		||||
.baseTable >>> .el-table__header-wrapper,
 | 
			
		||||
.baseTable >>> .el-table__body-wrapper {
 | 
			
		||||
	border: none; /* 去掉表头和表体的外边框 */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.baseTable >>> .el-table__row td {
 | 
			
		||||
	border-top: none; /* 去掉单元格的上边框(横线) */
 | 
			
		||||
	border-bottom: none; /* 去掉单元格的下边框(横线) */
 | 
			
		||||
	border-right: 2px solid #305887; /* 设置单元格的右边框(竖线) */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.baseTable >>> .el-table__row:last-child td {
 | 
			
		||||
	border-bottom: none; /* 去掉最后一行的下边框 */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* 去掉最后一列的右边框 */
 | 
			
		||||
.baseTable >>> .el-table__row td:last-child {
 | 
			
		||||
	border-right: transparent;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.baseTable >>> .el-table__header th {
 | 
			
		||||
	border-top: none; /* 去掉表头的上边框 */
 | 
			
		||||
	border-bottom: none; /* 去掉表头的下边框 */
 | 
			
		||||
	border-right: 2px solid #305887; /* 设置表头的右边框(竖线) */
 | 
			
		||||
	border-left: none; /* 设置表头的右边框(竖线) */
 | 
			
		||||
}
 | 
			
		||||
.baseTable >>> .el-table__header th:nth-last-child(2) {
 | 
			
		||||
	border-right: none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
<style lang="scss">
 | 
			
		||||
@import '~@/styles/index.scss';
 | 
			
		||||
.baseTable {
 | 
			
		||||
	.el-table tr {
 | 
			
		||||
		background: transparent;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table__row:hover > td {
 | 
			
		||||
		background-color: rgba(79, 114, 136, 0.29) !important;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	.el-table__row--striped:hover > td {
 | 
			
		||||
		background-color: rgba(79, 114, 136, 0.29) !important;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										310
									
								
								src/views/dashboard/deepDashboard/BarChart.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,310 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div :class="className" :style="{ height: height, width: width }" />
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts';
 | 
			
		||||
require('echarts/theme/macarons'); // echarts theme
 | 
			
		||||
import resize from '../mixins/resize';
 | 
			
		||||
import { max } from 'moment';
 | 
			
		||||
 | 
			
		||||
const animationDuration = 6000;
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [resize],
 | 
			
		||||
	props: {
 | 
			
		||||
		echartData: {
 | 
			
		||||
			type: Array,
 | 
			
		||||
			default: () => [],
 | 
			
		||||
		},
 | 
			
		||||
		className: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: 'chart',
 | 
			
		||||
		},
 | 
			
		||||
		width: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '100%',
 | 
			
		||||
		},
 | 
			
		||||
		height: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '380px',
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			chart: null,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			this.initChart();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	beforeDestroy() {
 | 
			
		||||
		if (!this.chart) {
 | 
			
		||||
			return;
 | 
			
		||||
		}
 | 
			
		||||
		this.chart.dispose();
 | 
			
		||||
		this.chart = null;
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		initChart(permission) {
 | 
			
		||||
			var option = {
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'axis',
 | 
			
		||||
					axisPointer: {
 | 
			
		||||
						type: 'cross',
 | 
			
		||||
						crossStyle: {
 | 
			
		||||
							color: '#999',
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				grid: {
 | 
			
		||||
					top: 100,
 | 
			
		||||
					left: '2%',
 | 
			
		||||
					right: '3%',
 | 
			
		||||
					bottom: '3%',
 | 
			
		||||
					containLabel: true,
 | 
			
		||||
				},
 | 
			
		||||
				legend: {
 | 
			
		||||
					data: [
 | 
			
		||||
						'产量',
 | 
			
		||||
						{
 | 
			
		||||
							name: '成本',
 | 
			
		||||
							icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
 | 
			
		||||
						},
 | 
			
		||||
						{
 | 
			
		||||
							name: '良品率',
 | 
			
		||||
							icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
 | 
			
		||||
						},
 | 
			
		||||
					],
 | 
			
		||||
					itemWidth: 18,
 | 
			
		||||
					itemHeight: 18,
 | 
			
		||||
					textStyle: {
 | 
			
		||||
						fontSize: 18,
 | 
			
		||||
						color: '#DFF1FE',
 | 
			
		||||
					},
 | 
			
		||||
					top: 15,
 | 
			
		||||
					right: 20,
 | 
			
		||||
				},
 | 
			
		||||
				xAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'category',
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return item.time;
 | 
			
		||||
						}),
 | 
			
		||||
						axisPointer: {
 | 
			
		||||
							type: 'shadow',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				yAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '单位/片',
 | 
			
		||||
						min: 0,
 | 
			
		||||
						position: 'left',
 | 
			
		||||
						alignTicks: true,
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '%',
 | 
			
		||||
						max: 100,
 | 
			
		||||
						min: 0,
 | 
			
		||||
						minInterval: 1,
 | 
			
		||||
						position: 'right',
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '万元',
 | 
			
		||||
						min: 0,
 | 
			
		||||
						position: 'right',
 | 
			
		||||
						alignTicks: true,
 | 
			
		||||
						offset: 40,
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				series: [
 | 
			
		||||
					{
 | 
			
		||||
						name: '产量',
 | 
			
		||||
						type: 'bar',
 | 
			
		||||
						barWidth: '14px',
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.out).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' 片';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{ offset: 0, color: '#5CB7FF' },
 | 
			
		||||
								{ offset: 1, color: '#364BFE' },
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						name: '成本',
 | 
			
		||||
						type: 'line',
 | 
			
		||||
						symbol: 'circle',
 | 
			
		||||
						symbolSize: 8,
 | 
			
		||||
						yAxisIndex: 2,
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.price).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' 万元';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						lineStyle: {
 | 
			
		||||
							color: '#FF1295',
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: '#FF1295',
 | 
			
		||||
							borderWidth: 1, // 圆点边框宽度(可选)
 | 
			
		||||
						},
 | 
			
		||||
						areaStyle: {
 | 
			
		||||
							opacity: 0.2,
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{
 | 
			
		||||
									offset: 0,
 | 
			
		||||
									color: '#FF1295',
 | 
			
		||||
								},
 | 
			
		||||
								{
 | 
			
		||||
									offset: 1,
 | 
			
		||||
									color: 'transparent',
 | 
			
		||||
								},
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						name: '良品率',
 | 
			
		||||
						type: 'line',
 | 
			
		||||
						symbol: 'circle',
 | 
			
		||||
						symbolSize: 8,
 | 
			
		||||
						yAxisIndex: 1,
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.ratio).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' %';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						lineStyle: {
 | 
			
		||||
							color: '#12FFF5',
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: '#12FFF5',
 | 
			
		||||
							borderWidth: 1, // 圆点边框宽度(可选)
 | 
			
		||||
						},
 | 
			
		||||
						areaStyle: {
 | 
			
		||||
							opacity: 0.2,
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{
 | 
			
		||||
									offset: 0,
 | 
			
		||||
									color: '#12FFF5',
 | 
			
		||||
								},
 | 
			
		||||
								{
 | 
			
		||||
									offset: 1,
 | 
			
		||||
									color: 'transparent',
 | 
			
		||||
								},
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			};
 | 
			
		||||
 | 
			
		||||
      if(permission){
 | 
			
		||||
        option.series[1]=[]
 | 
			
		||||
      }
 | 
			
		||||
			if (this.chart) {
 | 
			
		||||
				this.chart.setOption(option);
 | 
			
		||||
			} else {
 | 
			
		||||
				this.chart = echarts.init(this.$el, 'macarons');
 | 
			
		||||
				this.chart.setOption(option);
 | 
			
		||||
			}
 | 
			
		||||
			window.addEventListener('resize', () => {
 | 
			
		||||
				this.chart.resize();
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										515
									
								
								src/views/dashboard/deepDashboard/index-model.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,515 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="wholePlantContainerB"
 | 
			
		||||
		ref="wholePlantContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="wholePlantContainer"
 | 
			
		||||
			ref="wholePlantContainer"
 | 
			
		||||
			class="wholePlantBoard"
 | 
			
		||||
			style="
 | 
			
		||||
				position: absolute;
 | 
			
		||||
				transform-origin: 16px 8px;
 | 
			
		||||
				font-size: 16px;
 | 
			
		||||
				top: 0px;
 | 
			
		||||
				left: 0px;
 | 
			
		||||
				width: 1920px;
 | 
			
		||||
				height: 1080px;
 | 
			
		||||
				display: flex;
 | 
			
		||||
				flex-direction: column;
 | 
			
		||||
				gap: 24px;
 | 
			
		||||
			"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange"
 | 
			
		||||
				topTitle="自贡深加工成本看板" />
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 1" class="bz25-2 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-3 bz-top">
 | 
			
		||||
					<div class="topNum" style="margin-left: 50px">
 | 
			
		||||
						{{ Number(topData.yestodayRatio).toFixed(1) }}%
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">昨日良品率</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-4 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodayOut).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日深加工产量/万m²</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-7 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月深加工成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-8 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{ Number(topData.monthAreaCost).toFixed(1) }}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">本月每平米总成本/元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="middle middle1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="line" />
 | 
			
		||||
						各产线产量及良品率
 | 
			
		||||
						<span style="float: right">产量单位:万平方米</span>
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table3'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps3"
 | 
			
		||||
						:table-data="tableData3"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="middle middle2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="energy" />
 | 
			
		||||
						能源统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table1'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps1"
 | 
			
		||||
						:table-data="tableData1"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="footer footer1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="costchart" />
 | 
			
		||||
						近12个月成本 · 产量趋势
 | 
			
		||||
					</div>
 | 
			
		||||
					<bar-chart
 | 
			
		||||
						ref="chartRef"
 | 
			
		||||
						style="margin-top: -50px"
 | 
			
		||||
						:echart-data="echartData"></bar-chart>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="footer footer2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="cost" />
 | 
			
		||||
						成本及产量统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table2'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps2"
 | 
			
		||||
						:table-data="tableData2"
 | 
			
		||||
						:height="310"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import baseTable from '../components/baseTable.vue';
 | 
			
		||||
import BarChart from './BarChart.vue';
 | 
			
		||||
import interval from './interval.vue';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
 | 
			
		||||
const tableProps1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elec',
 | 
			
		||||
		label: '电消耗量/kwh',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'yure',
 | 
			
		||||
		label: '余热发电量/kwh',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elecPrice',
 | 
			
		||||
		label: '总价/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'priceD',
 | 
			
		||||
		label: '成本/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outD',
 | 
			
		||||
		label: '产量/万m²',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioD',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps3 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '1',
 | 
			
		||||
		label: '产线1',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '2',
 | 
			
		||||
		label: '产线2',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '3',
 | 
			
		||||
		label: '产线3',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '4',
 | 
			
		||||
		label: '产线4',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '5',
 | 
			
		||||
		label: '产线5',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		baseTable,
 | 
			
		||||
		BarChart,
 | 
			
		||||
	},
 | 
			
		||||
	// provide() {
 | 
			
		||||
	// 	return {
 | 
			
		||||
	// 		resizeChart: null,
 | 
			
		||||
	// 	};
 | 
			
		||||
	// },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			scaleNum: 0.8,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			topData: {},
 | 
			
		||||
			imgUrl: {
 | 
			
		||||
				o2: require('@/views/dashboard/assets/O2.png'),
 | 
			
		||||
				no: require('@/views/dashboard/assets/NO.png'),
 | 
			
		||||
				so2: require('@/views/dashboard/assets/SO2.png'),
 | 
			
		||||
				no2: require('@/views/dashboard/assets/NO2.png'),
 | 
			
		||||
			},
 | 
			
		||||
			tableProps1,
 | 
			
		||||
			tableData1: [],
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			tableProps3,
 | 
			
		||||
			tableData3: [],
 | 
			
		||||
			echartData: [],
 | 
			
		||||
			permission: false,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.permission = false;
 | 
			
		||||
		getUserProfile().then((response) => {
 | 
			
		||||
			const user = response.data;
 | 
			
		||||
			if (user.roles[0].name !== 'dashborad') {
 | 
			
		||||
				this.permission = true;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.permission = false;
 | 
			
		||||
			}
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	destroy() {
 | 
			
		||||
		this.destroy();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.wholePlantContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let wholePlantContainerBox = document.getElementById(
 | 
			
		||||
				'wholePlantContainer'
 | 
			
		||||
			);
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(wholePlantContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(wholePlantContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			wx = rw / bw;
 | 
			
		||||
			hx = rh / bh;
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=3`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let dataJson = JSON.parse(e.data);
 | 
			
		||||
			console.log(dataJson);
 | 
			
		||||
			// 数据接收
 | 
			
		||||
			if ('DeepState' in dataJson) {
 | 
			
		||||
				this.topData = dataJson.DeepState;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.topData.yestodaySum = '***';
 | 
			
		||||
					this.topData.monthSum = '***';
 | 
			
		||||
					this.topData.monthAreaCost = '***';
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepEnergyTableList' in dataJson) {
 | 
			
		||||
				this.tableData1 = dataJson.DeepEnergyTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData1.forEach((item) => {
 | 
			
		||||
						item.elecPrice = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepCostTableList' in dataJson) {
 | 
			
		||||
				this.tableData2 = dataJson.DeepCostTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData2.forEach((item) => {
 | 
			
		||||
						item.priceD = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepPdTables' in dataJson) {
 | 
			
		||||
				this.tableData3 = dataJson.DeepPdTables;
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepCostTrendList' in dataJson) {
 | 
			
		||||
				this.echartData = dataJson.DeepCostTrendList;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.chartRef.initChart(!this.permission);
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.wholePlantBoard {
 | 
			
		||||
	background: url(../assets/bg1.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.main-body {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	gap: 20px;
 | 
			
		||||
	padding: 0px 16px;
 | 
			
		||||
}
 | 
			
		||||
.bz-top {
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.bz25-2 {
 | 
			
		||||
	background: url(../assets/bz25-d-1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-3 {
 | 
			
		||||
	background: url(../assets/bz25-d-2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-4 {
 | 
			
		||||
	background: url(../assets/bz25-d-3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-7 {
 | 
			
		||||
	background: url(../assets/bz25-d-4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-8 {
 | 
			
		||||
	background: url(../assets/bz25-d-5.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.topNum {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 44px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 43px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 50px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.topText {
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: #95caff;
 | 
			
		||||
	line-height: 20px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 3px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	height: 50px;
 | 
			
		||||
	line-height: 50px;
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 22px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	padding: 0 20px;
 | 
			
		||||
}
 | 
			
		||||
.middle {
 | 
			
		||||
	height: 322px;
 | 
			
		||||
}
 | 
			
		||||
.middle1 {
 | 
			
		||||
	background: url(../assets/1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2 {
 | 
			
		||||
	background: url(../assets/2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.yanqi {
 | 
			
		||||
	width: 275px;
 | 
			
		||||
	height: 108px;
 | 
			
		||||
	background: url(../assets/yanqi.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.content {
 | 
			
		||||
	height: 108px;
 | 
			
		||||
}
 | 
			
		||||
.imageClass {
 | 
			
		||||
	width: 40px;
 | 
			
		||||
	height: 30px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin: 8px auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2-left {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: rgba(255, 255, 255, 0.9);
 | 
			
		||||
	line-height: 17px;
 | 
			
		||||
	letter-spacing: 5px;
 | 
			
		||||
	width: 110px;
 | 
			
		||||
	padding-top: 12px;
 | 
			
		||||
	padding-left: 12px;
 | 
			
		||||
	float: left;
 | 
			
		||||
}
 | 
			
		||||
.middle2-right {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 38px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 106px;
 | 
			
		||||
}
 | 
			
		||||
.footer {
 | 
			
		||||
	height: 410px;
 | 
			
		||||
}
 | 
			
		||||
.footer1 {
 | 
			
		||||
	background: url(../assets/3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.footer2 {
 | 
			
		||||
	background: url(../assets/4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 402px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										523
									
								
								src/views/dashboard/deepDashboard/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,523 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="wholePlantContainerB"
 | 
			
		||||
		ref="wholePlantContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="wholePlantContainer"
 | 
			
		||||
			ref="wholePlantContainer"
 | 
			
		||||
			class="wholePlantBoard"
 | 
			
		||||
			style="
 | 
			
		||||
				position: absolute;
 | 
			
		||||
				transform-origin: 16px 8px;
 | 
			
		||||
				font-size: 16px;
 | 
			
		||||
				top: 0px;
 | 
			
		||||
				left: 0px;
 | 
			
		||||
				width: 1920px;
 | 
			
		||||
				height: 1080px;
 | 
			
		||||
				display: flex;
 | 
			
		||||
				flex-direction: column;
 | 
			
		||||
				gap: 24px;
 | 
			
		||||
			"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange"
 | 
			
		||||
				topTitle="自贡深加工成本看板" />
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 1" class="bz25-2 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-3 bz-top">
 | 
			
		||||
					<div class="topNum" style="margin-left: 50px">
 | 
			
		||||
						{{ Number(topData.yestodayRatio).toFixed(1) }}%
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">昨日良品率</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-4 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodayOut).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日深加工产量/万m²</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-7 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月深加工成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-8 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthAreaCost).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月每平米总成本/元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="middle middle1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="line" />
 | 
			
		||||
						各产线产量及良品率
 | 
			
		||||
						<span style="float: right">产量单位:万平方米</span>
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table3'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps3"
 | 
			
		||||
						:table-data="tableData3"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="middle middle2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="energy" />
 | 
			
		||||
						能源统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table1'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps1"
 | 
			
		||||
						:table-data="tableData1"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="footer footer1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="costchart" />
 | 
			
		||||
						近12个月成本 · 产量趋势
 | 
			
		||||
					</div>
 | 
			
		||||
					<bar-chart
 | 
			
		||||
						ref="chartRef"
 | 
			
		||||
						style="margin-top: -50px"
 | 
			
		||||
						:echart-data="echartData"></bar-chart>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="footer footer2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="cost" />
 | 
			
		||||
						成本及产量统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table2'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps2"
 | 
			
		||||
						:table-data="tableData2"
 | 
			
		||||
						:height="310"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import baseTable from '../components/baseTable.vue';
 | 
			
		||||
import BarChart from './BarChart.vue';
 | 
			
		||||
import interval from './interval.vue';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
 | 
			
		||||
const tableProps1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elec',
 | 
			
		||||
		label: '电消耗量/kwh',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'yure',
 | 
			
		||||
		label: '余热发电量/kwh',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elecPrice',
 | 
			
		||||
		label: '总价/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'priceD',
 | 
			
		||||
		label: '成本/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outD',
 | 
			
		||||
		label: '产量/万m²',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioD',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
const tableProps3 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '1',
 | 
			
		||||
		label: '产线1',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '2',
 | 
			
		||||
		label: '产线2',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '3',
 | 
			
		||||
		label: '产线3',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '4',
 | 
			
		||||
		label: '产线4',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: '5',
 | 
			
		||||
		label: '产线5',
 | 
			
		||||
		subcomponent: interval,
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		baseTable,
 | 
			
		||||
		BarChart,
 | 
			
		||||
	},
 | 
			
		||||
	// provide() {
 | 
			
		||||
	// 	return {
 | 
			
		||||
	// 		resizeChart: null,
 | 
			
		||||
	// 	};
 | 
			
		||||
	// },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			scaleNum: 0.8,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			topData: {},
 | 
			
		||||
			imgUrl: {
 | 
			
		||||
				o2: require('@/views/dashboard/assets/O2.png'),
 | 
			
		||||
				no: require('@/views/dashboard/assets/NO.png'),
 | 
			
		||||
				so2: require('@/views/dashboard/assets/SO2.png'),
 | 
			
		||||
				no2: require('@/views/dashboard/assets/NO2.png'),
 | 
			
		||||
			},
 | 
			
		||||
			tableProps1,
 | 
			
		||||
			tableData1: [],
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			tableProps3,
 | 
			
		||||
			tableData3: [],
 | 
			
		||||
      echartData: [],
 | 
			
		||||
			permission: false,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.permission = false;
 | 
			
		||||
		getUserProfile().then((response) => {
 | 
			
		||||
			const user = response.data;
 | 
			
		||||
			if (user.roles[0].name !== 'dashborad') {
 | 
			
		||||
				this.permission = true;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.permission = false;
 | 
			
		||||
			}
 | 
			
		||||
      this.initWebSocket();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	destroy() {
 | 
			
		||||
		this.destroy();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.wholePlantContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let wholePlantContainerBox = document.getElementById(
 | 
			
		||||
				'wholePlantContainer'
 | 
			
		||||
			);
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(wholePlantContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(wholePlantContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			if (screenfull.isFullscreen) {
 | 
			
		||||
				wx = rw / bw;
 | 
			
		||||
				hx = rh / bh;
 | 
			
		||||
			} else {
 | 
			
		||||
				if (this.$store.state.app.sidebar.opened) {
 | 
			
		||||
					wx = (rw - 280) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				} else {
 | 
			
		||||
					wx = (rw - 85) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=3`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let dataJson = JSON.parse(e.data);
 | 
			
		||||
			console.log(dataJson);
 | 
			
		||||
			// 数据接收
 | 
			
		||||
			if ('DeepState' in dataJson) {
 | 
			
		||||
				this.topData = dataJson.DeepState;
 | 
			
		||||
        if(!this.permission){
 | 
			
		||||
          this.topData.yestodaySum = '***'
 | 
			
		||||
          this.topData.monthSum = '***'
 | 
			
		||||
          this.topData.monthAreaCost = '***'
 | 
			
		||||
        }
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepEnergyTableList' in dataJson) {
 | 
			
		||||
				this.tableData1 = dataJson.DeepEnergyTableList;
 | 
			
		||||
        if(!this.permission){
 | 
			
		||||
          this.tableData1.forEach(item=>{
 | 
			
		||||
            item.elecPrice = null
 | 
			
		||||
          })
 | 
			
		||||
        }
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepCostTableList' in dataJson) {
 | 
			
		||||
				this.tableData2 = dataJson.DeepCostTableList;
 | 
			
		||||
        if(!this.permission){
 | 
			
		||||
          this.tableData2.forEach(item=>{
 | 
			
		||||
            item.priceD = null
 | 
			
		||||
          })
 | 
			
		||||
        }
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepPdTables' in dataJson) {
 | 
			
		||||
				this.tableData3 = dataJson.DeepPdTables;
 | 
			
		||||
			}
 | 
			
		||||
			if ('DeepCostTrendList' in dataJson) {
 | 
			
		||||
				this.echartData = dataJson.DeepCostTrendList;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
          this.$refs.chartRef.initChart(!this.permission);
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.wholePlantBoard {
 | 
			
		||||
	background: url(../assets/bg1.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.main-body {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	gap: 20px;
 | 
			
		||||
	padding: 0px 16px;
 | 
			
		||||
}
 | 
			
		||||
.bz-top {
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.bz25-2 {
 | 
			
		||||
	background: url(../assets/bz25-d-1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-3 {
 | 
			
		||||
	background: url(../assets/bz25-d-2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-4 {
 | 
			
		||||
	background: url(../assets/bz25-d-3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-7 {
 | 
			
		||||
	background: url(../assets/bz25-d-4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-8 {
 | 
			
		||||
	background: url(../assets/bz25-d-5.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.topNum {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 44px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 43px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 50px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.topText {
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: #95caff;
 | 
			
		||||
	line-height: 20px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 3px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	height: 50px;
 | 
			
		||||
	line-height: 50px;
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 22px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	padding: 0 20px;
 | 
			
		||||
}
 | 
			
		||||
.middle {
 | 
			
		||||
	height: 322px;
 | 
			
		||||
}
 | 
			
		||||
.middle1 {
 | 
			
		||||
	background: url(../assets/1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2 {
 | 
			
		||||
	background: url(../assets/2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.yanqi {
 | 
			
		||||
	width: 275px;
 | 
			
		||||
	height: 108px;
 | 
			
		||||
	background: url(../assets/yanqi.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.content {
 | 
			
		||||
	height: 108px;
 | 
			
		||||
}
 | 
			
		||||
.imageClass {
 | 
			
		||||
	width: 40px;
 | 
			
		||||
	height: 30px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin: 8px auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2-left {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: rgba(255, 255, 255, 0.9);
 | 
			
		||||
	line-height: 17px;
 | 
			
		||||
	letter-spacing: 5px;
 | 
			
		||||
	width: 110px;
 | 
			
		||||
	padding-top: 12px;
 | 
			
		||||
	padding-left: 12px;
 | 
			
		||||
	float: left;
 | 
			
		||||
}
 | 
			
		||||
.middle2-right {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 38px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 106px;
 | 
			
		||||
}
 | 
			
		||||
.footer {
 | 
			
		||||
	height: 410px;
 | 
			
		||||
}
 | 
			
		||||
.footer1 {
 | 
			
		||||
	background: url(../assets/3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.footer2 {
 | 
			
		||||
	background: url(../assets/4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 402px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										51
									
								
								src/views/dashboard/deepDashboard/interval.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,51 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-03 14:09:18
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2025-03-06 16:32:48
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="tableInner" style="display: flex">
 | 
			
		||||
		<div style="flex: 3; border-right: 2px solid #305887">
 | 
			
		||||
			{{
 | 
			
		||||
				list['out' + list.prop]
 | 
			
		||||
					? Number(list['out' + list.prop]).toFixed(1)
 | 
			
		||||
					: '-'
 | 
			
		||||
			}}
 | 
			
		||||
		</div>
 | 
			
		||||
		<div style="flex: 2">
 | 
			
		||||
			{{
 | 
			
		||||
				list['ratio' + list.prop]
 | 
			
		||||
					? Number(list['ratio' + list.prop]).toFixed(1)
 | 
			
		||||
					: '-'
 | 
			
		||||
			}}
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
	props: {
 | 
			
		||||
		injectData: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			default: () => ({}),
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			list: this.injectData,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style scoped>
 | 
			
		||||
.tableInner {
 | 
			
		||||
	border: none;
 | 
			
		||||
	padding: 0;
 | 
			
		||||
	height: 40px;
 | 
			
		||||
	line-height: 40px;
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										311
									
								
								src/views/dashboard/rawDashboard/BarChart.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,311 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div :class="className" :style="{ height: height, width: width }" />
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts';
 | 
			
		||||
require('echarts/theme/macarons'); // echarts theme
 | 
			
		||||
import resize from '../mixins/resize';
 | 
			
		||||
import { max } from 'moment';
 | 
			
		||||
 | 
			
		||||
const animationDuration = 6000;
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [resize],
 | 
			
		||||
	props: {
 | 
			
		||||
		echartData: {
 | 
			
		||||
			type: Array,
 | 
			
		||||
			default: () => [],
 | 
			
		||||
		},
 | 
			
		||||
		className: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: 'chart',
 | 
			
		||||
		},
 | 
			
		||||
		width: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '100%',
 | 
			
		||||
		},
 | 
			
		||||
		height: {
 | 
			
		||||
			type: String,
 | 
			
		||||
			default: '380px',
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			chart: null,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			this.initChart();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	beforeDestroy() {
 | 
			
		||||
		if (!this.chart) {
 | 
			
		||||
			return;
 | 
			
		||||
		}
 | 
			
		||||
		this.chart.dispose();
 | 
			
		||||
		this.chart = null;
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		initChart(permission) {
 | 
			
		||||
 | 
			
		||||
			var option = {
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'axis',
 | 
			
		||||
					axisPointer: {
 | 
			
		||||
						type: 'cross',
 | 
			
		||||
						crossStyle: {
 | 
			
		||||
							color: '#999',
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				grid: {
 | 
			
		||||
					top: 100,
 | 
			
		||||
					left: '2%',
 | 
			
		||||
					right: '3%',
 | 
			
		||||
					bottom: '3%',
 | 
			
		||||
					containLabel: true,
 | 
			
		||||
				},
 | 
			
		||||
				legend: {
 | 
			
		||||
					data: [
 | 
			
		||||
						'产量',
 | 
			
		||||
						{
 | 
			
		||||
							name: '成本',
 | 
			
		||||
							icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
 | 
			
		||||
						},
 | 
			
		||||
						{
 | 
			
		||||
							name: '良品率',
 | 
			
		||||
							icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
 | 
			
		||||
						},
 | 
			
		||||
					],
 | 
			
		||||
					itemWidth: 18,
 | 
			
		||||
					itemHeight: 18,
 | 
			
		||||
					textStyle: {
 | 
			
		||||
						fontSize: 18,
 | 
			
		||||
						color: '#DFF1FE',
 | 
			
		||||
					},
 | 
			
		||||
					top: 15,
 | 
			
		||||
					right: 20,
 | 
			
		||||
				},
 | 
			
		||||
				xAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'category',
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return item.time;
 | 
			
		||||
						}),
 | 
			
		||||
						axisPointer: {
 | 
			
		||||
							type: 'shadow',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				yAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '单位/片',
 | 
			
		||||
						min: 0,
 | 
			
		||||
						position: 'left',
 | 
			
		||||
						alignTicks: true,
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '%',
 | 
			
		||||
						max: 100,
 | 
			
		||||
						min: 0,
 | 
			
		||||
            minInterval: 1,
 | 
			
		||||
						position: 'right',
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '万元',
 | 
			
		||||
						min: 0,
 | 
			
		||||
						position: 'right',
 | 
			
		||||
						alignTicks: true,
 | 
			
		||||
						offset: 40,
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: 'white',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								type: 'solid',
 | 
			
		||||
								color: '#97B3FF', // 左边线的颜色
 | 
			
		||||
								width: '1', // 坐标线的宽度
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#b6c1e1',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitArea: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				series: [
 | 
			
		||||
					{
 | 
			
		||||
						name: '产量',
 | 
			
		||||
						type: 'bar',
 | 
			
		||||
						barWidth: '14px',
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.out).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' 片';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{ offset: 0, color: '#5CB7FF' },
 | 
			
		||||
								{ offset: 1, color: '#364BFE' },
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						name: '成本',
 | 
			
		||||
						type: 'line',
 | 
			
		||||
						symbol: 'circle',
 | 
			
		||||
						symbolSize: 8,
 | 
			
		||||
						yAxisIndex: 2,
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.price).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' 万元';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						lineStyle: {
 | 
			
		||||
							color: '#FF1295',
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: '#FF1295',
 | 
			
		||||
							borderWidth: 1, // 圆点边框宽度(可选)
 | 
			
		||||
						},
 | 
			
		||||
						areaStyle: {
 | 
			
		||||
							opacity: 0.2,
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{
 | 
			
		||||
									offset: 0,
 | 
			
		||||
									color: '#FF1295',
 | 
			
		||||
								},
 | 
			
		||||
								{
 | 
			
		||||
									offset: 1,
 | 
			
		||||
									color: 'transparent',
 | 
			
		||||
								},
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						name: '良品率',
 | 
			
		||||
						type: 'line',
 | 
			
		||||
						symbol: 'circle',
 | 
			
		||||
						symbolSize: 8,
 | 
			
		||||
						yAxisIndex: 1,
 | 
			
		||||
						data: this.echartData.map((item) => {
 | 
			
		||||
							return Number(item.ratio).toFixed(1);
 | 
			
		||||
						}),
 | 
			
		||||
						animationDuration,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value + ' %';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						lineStyle: {
 | 
			
		||||
							color: '#12FFF5',
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: '#12FFF5',
 | 
			
		||||
							borderWidth: 1, // 圆点边框宽度(可选)
 | 
			
		||||
						},
 | 
			
		||||
						areaStyle: {
 | 
			
		||||
							opacity: 0.2,
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{
 | 
			
		||||
									offset: 0,
 | 
			
		||||
									color: '#12FFF5',
 | 
			
		||||
								},
 | 
			
		||||
								{
 | 
			
		||||
									offset: 1,
 | 
			
		||||
									color: 'transparent',
 | 
			
		||||
								},
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
      if(permission){
 | 
			
		||||
        option.series[1]=[]
 | 
			
		||||
      }
 | 
			
		||||
			if (this.chart) {
 | 
			
		||||
				this.chart.setOption(option);
 | 
			
		||||
			} else {
 | 
			
		||||
				this.chart = echarts.init(this.$el, 'macarons');
 | 
			
		||||
				this.chart.setOption(option);
 | 
			
		||||
			}
 | 
			
		||||
			window.addEventListener('resize', () => {
 | 
			
		||||
				this.chart.resize();
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										532
									
								
								src/views/dashboard/rawDashboard/index-model.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,532 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="wholePlantContainerB"
 | 
			
		||||
		ref="wholePlantContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="wholePlantContainer"
 | 
			
		||||
			ref="wholePlantContainer"
 | 
			
		||||
			class="wholePlantBoard"
 | 
			
		||||
			style="
 | 
			
		||||
				position: absolute;
 | 
			
		||||
				transform-origin: 16px 8px;
 | 
			
		||||
				font-size: 16px;
 | 
			
		||||
				top: 0px;
 | 
			
		||||
				left: 0px;
 | 
			
		||||
				width: 1920px;
 | 
			
		||||
				height: 1080px;
 | 
			
		||||
				display: flex;
 | 
			
		||||
				flex-direction: column;
 | 
			
		||||
				gap: 24px;
 | 
			
		||||
			"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange"
 | 
			
		||||
				topTitle="自贡原片成本看板" />
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 1" class="bz25-2 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-3 bz-top">
 | 
			
		||||
					<div class="topNum" style="margin-left: 50px">
 | 
			
		||||
						{{ Number(topData.yestodayRatio).toFixed(1) }}%
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">昨日良品率</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-5 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodayMat).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日原料成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
 | 
			
		||||
				<div style="flex: 1" class="bz25-4 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthOut).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月原片产量/万m²</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-7 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthMat).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月原料成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
 | 
			
		||||
				<div style="flex: 1" class="bz25-8 bz-top">
 | 
			
		||||
					<div class="topNum">
 | 
			
		||||
						{{ Number(topData.monthAreaCost).toFixed(1) }}
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="topText">本月每平米总成本/元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="middle middle1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="energy" />
 | 
			
		||||
						能源统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table1'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps1"
 | 
			
		||||
						:table-data="tableData1"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="middle middle2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="yanqi" />
 | 
			
		||||
						烟气处理
 | 
			
		||||
					</div>
 | 
			
		||||
					<div
 | 
			
		||||
						style="
 | 
			
		||||
							display: flex;
 | 
			
		||||
							flex-wrap: wrap;
 | 
			
		||||
							margin: 10px 30px;
 | 
			
		||||
							gap: 12px;
 | 
			
		||||
						">
 | 
			
		||||
						<div class="yanqi" style="width: 566px">
 | 
			
		||||
							<div
 | 
			
		||||
								class="content middle2-left"
 | 
			
		||||
								style="margin-left: 50px; width: 210px">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
 | 
			
		||||
								二氧化硫 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.fc"></el-image>
 | 
			
		||||
								粉尘排放
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.no"></el-image>
 | 
			
		||||
								氮氧化物 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
					</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="footer footer1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="costchart" />
 | 
			
		||||
						近12个月成本 · 产量趋势
 | 
			
		||||
					</div>
 | 
			
		||||
					<bar-chart
 | 
			
		||||
						ref="chartRef"
 | 
			
		||||
						style="margin-top: -50px"
 | 
			
		||||
						:echart-data="echartData"></bar-chart>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="footer footer2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="cost" />
 | 
			
		||||
						成本及产量统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table2'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps2"
 | 
			
		||||
						:table-data="tableData2"
 | 
			
		||||
						:height="310"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import baseTable from '../components/baseTable.vue';
 | 
			
		||||
import BarChart from './BarChart.vue';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
 | 
			
		||||
const tableProps1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elec',
 | 
			
		||||
		label: '电消耗量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elecPrice',
 | 
			
		||||
		label: '电总价',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'gas',
 | 
			
		||||
		label: '气消耗量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'gasPrice',
 | 
			
		||||
		label: '气总价',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '能源总价',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'priceO',
 | 
			
		||||
		label: '成本/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outO',
 | 
			
		||||
		label: '产量/万m²',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioO',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		baseTable,
 | 
			
		||||
		BarChart,
 | 
			
		||||
	},
 | 
			
		||||
	// provide() {
 | 
			
		||||
	// 	return {
 | 
			
		||||
	// 		resizeChart: null,
 | 
			
		||||
	// 	};
 | 
			
		||||
	// },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			scaleNum: 0.8,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			topData: {},
 | 
			
		||||
			imgUrl: {
 | 
			
		||||
				fc: require('@/views/dashboard/assets/fc.png'),
 | 
			
		||||
				no: require('@/views/dashboard/assets/NO.png'),
 | 
			
		||||
				so2: require('@/views/dashboard/assets/SO2.png'),
 | 
			
		||||
			},
 | 
			
		||||
			tableProps1,
 | 
			
		||||
			tableData1: [],
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			echartData: [],
 | 
			
		||||
			permission: false,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.permission = false;
 | 
			
		||||
		getUserProfile().then((response) => {
 | 
			
		||||
			const user = response.data;
 | 
			
		||||
			if (user.roles[0].name !== 'dashborad') {
 | 
			
		||||
				this.permission = true;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.permission = false;
 | 
			
		||||
			}
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	destroy() {
 | 
			
		||||
		this.destroy();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.wholePlantContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let wholePlantContainerBox = document.getElementById(
 | 
			
		||||
				'wholePlantContainer'
 | 
			
		||||
			);
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(wholePlantContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(wholePlantContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			wx = rw / bw;
 | 
			
		||||
			hx = rh / bh;
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=2`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let dataJson = JSON.parse(e.data);
 | 
			
		||||
			console.log(dataJson);
 | 
			
		||||
			// 数据接收
 | 
			
		||||
			if ('OriginState' in dataJson) {
 | 
			
		||||
				this.topData = dataJson.OriginState;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.topData.monthAreaCost = '***';
 | 
			
		||||
					this.topData.monthMat = '***';
 | 
			
		||||
					this.topData.yestodaySum = '***';
 | 
			
		||||
					this.topData.yestodayMat = '***';
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('OriginEnergyTableList' in dataJson) {
 | 
			
		||||
				this.tableData1 = dataJson.OriginEnergyTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData1.forEach((item) => {
 | 
			
		||||
						item.elecPrice = null;
 | 
			
		||||
						item.gasPrice = null;
 | 
			
		||||
						item.price = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('OriginCostTableList' in dataJson) {
 | 
			
		||||
				this.tableData2 = dataJson.OriginCostTableList;
 | 
			
		||||
				if (!this.permission) {
 | 
			
		||||
					this.tableData2.forEach((item) => {
 | 
			
		||||
						item.priceO = null;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			if ('OriginCostTrendList' in dataJson) {
 | 
			
		||||
				this.echartData = dataJson.OriginCostTrendList;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.chartRef.initChart(!this.permission);
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.wholePlantBoard {
 | 
			
		||||
	background: url(../assets/bg1.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.main-body {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	gap: 20px;
 | 
			
		||||
	padding: 0px 16px;
 | 
			
		||||
}
 | 
			
		||||
.bz-top {
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.bz25-2 {
 | 
			
		||||
	background: url(../assets/bz25-2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-3 {
 | 
			
		||||
	background: url(../assets/bz25-3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-4 {
 | 
			
		||||
	background: url(../assets/bz25-4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-5 {
 | 
			
		||||
	background: url(../assets/bz25-5.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-7 {
 | 
			
		||||
	background: url(../assets/bz25-7.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-8 {
 | 
			
		||||
	background: url(../assets/bz25-8.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.topNum {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 44px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 43px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 50px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.topText {
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: #95caff;
 | 
			
		||||
	line-height: 20px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 3px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	height: 50px;
 | 
			
		||||
	line-height: 50px;
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 22px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	padding: 0 20px;
 | 
			
		||||
}
 | 
			
		||||
.middle {
 | 
			
		||||
	height: 322px;
 | 
			
		||||
}
 | 
			
		||||
.middle1 {
 | 
			
		||||
	background: url(../assets/1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2 {
 | 
			
		||||
	background: url(../assets/2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.yanqi {
 | 
			
		||||
	width: 275px;
 | 
			
		||||
	height: 108px;
 | 
			
		||||
	background: url(../assets/yanqi.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.content {
 | 
			
		||||
	height: 108px;
 | 
			
		||||
}
 | 
			
		||||
.imageClass {
 | 
			
		||||
	width: 40px;
 | 
			
		||||
	height: 30px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin: 8px auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2-left {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: rgba(255, 255, 255, 0.9);
 | 
			
		||||
	line-height: 17px;
 | 
			
		||||
	letter-spacing: 5px;
 | 
			
		||||
	width: 110px;
 | 
			
		||||
	padding-top: 12px;
 | 
			
		||||
	padding-left: 12px;
 | 
			
		||||
	float: left;
 | 
			
		||||
	margin-right: 10px;
 | 
			
		||||
}
 | 
			
		||||
.middle2-right {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 35px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 106px;
 | 
			
		||||
}
 | 
			
		||||
.footer {
 | 
			
		||||
	height: 410px;
 | 
			
		||||
}
 | 
			
		||||
.footer1 {
 | 
			
		||||
	background: url(../assets/3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.footer2 {
 | 
			
		||||
	background: url(../assets/4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 402px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										536
									
								
								src/views/dashboard/rawDashboard/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,536 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div
 | 
			
		||||
		id="wholePlantContainerB"
 | 
			
		||||
		ref="wholePlantContainerB"
 | 
			
		||||
		style="width: 100%; height: 100%">
 | 
			
		||||
		<div
 | 
			
		||||
			id="wholePlantContainer"
 | 
			
		||||
			ref="wholePlantContainer"
 | 
			
		||||
			class="wholePlantBoard"
 | 
			
		||||
			style="
 | 
			
		||||
				position: absolute;
 | 
			
		||||
				transform-origin: 16px 8px;
 | 
			
		||||
				font-size: 16px;
 | 
			
		||||
				top: 0px;
 | 
			
		||||
				left: 0px;
 | 
			
		||||
				width: 1920px;
 | 
			
		||||
				height: 1080px;
 | 
			
		||||
				display: flex;
 | 
			
		||||
				flex-direction: column;
 | 
			
		||||
				gap: 24px;
 | 
			
		||||
			"
 | 
			
		||||
			:style="{ transform: 'scale(' + scaleNum + ')' }">
 | 
			
		||||
			<KHeader
 | 
			
		||||
				:isFullScreen="isFullScreen"
 | 
			
		||||
				@screenfullChange="screenfullChange"
 | 
			
		||||
				topTitle="自贡原片成本看板" />
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 1" class="bz25-2 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日总成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-3 bz-top">
 | 
			
		||||
					<div class="topNum" style="margin-left: 50px">{{ Number(topData.yestodayRatio).toFixed(1) }}%</div>
 | 
			
		||||
					<div class="topText">昨日良品率</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-5 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.yestodayMat).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">昨日原料成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
 | 
			
		||||
				<div style="flex: 1" class="bz25-4 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthOut).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月原片产量/万m²</div>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="bz25-7 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthMat).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月原料成本/万元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
 | 
			
		||||
				<div style="flex: 1" class="bz25-8 bz-top">
 | 
			
		||||
					<div class="topNum">{{ Number(topData.monthAreaCost).toFixed(1) }}</div>
 | 
			
		||||
					<div class="topText">本月每平米总成本/元</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="middle middle1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="energy" />
 | 
			
		||||
						能源统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table1'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps1"
 | 
			
		||||
						:table-data="tableData1"
 | 
			
		||||
						:height="230"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="middle middle2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="yanqi" />
 | 
			
		||||
						烟气处理
 | 
			
		||||
					</div>
 | 
			
		||||
					<div
 | 
			
		||||
						style="
 | 
			
		||||
							display: flex;
 | 
			
		||||
							flex-wrap: wrap;
 | 
			
		||||
							margin: 10px 30px;
 | 
			
		||||
							gap: 12px;
 | 
			
		||||
						">
 | 
			
		||||
						<div class="yanqi" style="width: 566px;">
 | 
			
		||||
							<div class="content middle2-left" style="margin-left: 50px;width: 210px;">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
 | 
			
		||||
								二氧化硫 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.fc"></el-image>
 | 
			
		||||
								粉尘排放
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div class="yanqi">
 | 
			
		||||
							<div class="content middle2-left">
 | 
			
		||||
								<el-image class="imageClass" :src="imgUrl.no"></el-image>
 | 
			
		||||
								氮氧化物 排放浓度
 | 
			
		||||
							</div>
 | 
			
		||||
							<div class="content middle2-right">
 | 
			
		||||
								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
 | 
			
		||||
								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 | 
			
		||||
							</div>
 | 
			
		||||
						</div>
 | 
			
		||||
					</div>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div class="main-body">
 | 
			
		||||
				<div style="flex: 2" class="footer footer1">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="costchart" />
 | 
			
		||||
						近12个月成本 · 产量趋势
 | 
			
		||||
					</div>
 | 
			
		||||
					<bar-chart
 | 
			
		||||
						ref="chartRef"
 | 
			
		||||
						style="margin-top: -50px"
 | 
			
		||||
						:echart-data="echartData"></bar-chart>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div style="flex: 1" class="footer footer2">
 | 
			
		||||
					<div class="title">
 | 
			
		||||
						<svg-icon icon-class="cost" />
 | 
			
		||||
						成本及产量统计
 | 
			
		||||
					</div>
 | 
			
		||||
					<base-table
 | 
			
		||||
						:id="'table2'"
 | 
			
		||||
						style="margin: 5px 12px 12px 12px"
 | 
			
		||||
						:table-props="tableProps2"
 | 
			
		||||
						:table-data="tableData2"
 | 
			
		||||
						:height="310"></base-table>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import KHeader from '../components/Header';
 | 
			
		||||
import screenfull from 'screenfull';
 | 
			
		||||
import { debounce } from '@/utils/debounce';
 | 
			
		||||
import baseTable from '../components/baseTable.vue';
 | 
			
		||||
import BarChart from './BarChart.vue';
 | 
			
		||||
import { getUserProfile } from '@/api/system/user';
 | 
			
		||||
 | 
			
		||||
const tableProps1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elec',
 | 
			
		||||
		label: '电消耗量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'elecPrice',
 | 
			
		||||
		label: '电总价',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'gas',
 | 
			
		||||
		label: '气消耗量',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'gasPrice',
 | 
			
		||||
		label: '气总价',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'price',
 | 
			
		||||
		label: '能源总价',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const tableProps2 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'title',
 | 
			
		||||
		label: '',
 | 
			
		||||
		align: 'center',
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'priceO',
 | 
			
		||||
		label: '成本/万元',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'outO',
 | 
			
		||||
		label: '产量/万m²',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'ratioO',
 | 
			
		||||
		label: '良品率',
 | 
			
		||||
		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
export default {
 | 
			
		||||
	name: '',
 | 
			
		||||
	components: {
 | 
			
		||||
		KHeader,
 | 
			
		||||
		baseTable,
 | 
			
		||||
		BarChart,
 | 
			
		||||
	},
 | 
			
		||||
	// provide() {
 | 
			
		||||
	// 	return {
 | 
			
		||||
	// 		resizeChart: null,
 | 
			
		||||
	// 	};
 | 
			
		||||
	// },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			isFullScreen: false,
 | 
			
		||||
			scaleNum: 0.8,
 | 
			
		||||
			url: process.env.VUE_APP_WS_API,
 | 
			
		||||
			websock: '',
 | 
			
		||||
			topData: {},
 | 
			
		||||
			imgUrl: {
 | 
			
		||||
				fc: require('@/views/dashboard/assets/fc.png'),
 | 
			
		||||
				no: require('@/views/dashboard/assets/NO.png'),
 | 
			
		||||
				so2: require('@/views/dashboard/assets/SO2.png'),
 | 
			
		||||
			},
 | 
			
		||||
			tableProps1,
 | 
			
		||||
			tableData1: [],
 | 
			
		||||
			tableProps2,
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			echartData: [],
 | 
			
		||||
			permission: false,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.init();
 | 
			
		||||
		this.permission = false;
 | 
			
		||||
		getUserProfile().then((response) => {
 | 
			
		||||
			const user = response.data;
 | 
			
		||||
			if (user.roles[0].name !== 'dashborad') {
 | 
			
		||||
				this.permission = true;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.permission = false;
 | 
			
		||||
			}
 | 
			
		||||
      this.initWebSocket();
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	destroy() {
 | 
			
		||||
		this.destroy();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.boxReset();
 | 
			
		||||
		window.addEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this.boxReset);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		boxReset() {
 | 
			
		||||
			debounce(() => {
 | 
			
		||||
				this.resetSize();
 | 
			
		||||
			}, 300)();
 | 
			
		||||
		},
 | 
			
		||||
		change() {
 | 
			
		||||
			this.isFullScreen = screenfull.isFullscreen;
 | 
			
		||||
		},
 | 
			
		||||
		init() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.on('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		destroy() {
 | 
			
		||||
			if (screenfull.isEnabled) {
 | 
			
		||||
				screenfull.off('change', this.change);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 全屏
 | 
			
		||||
		screenfullChange() {
 | 
			
		||||
			if (!screenfull.isEnabled) {
 | 
			
		||||
				this.$message({
 | 
			
		||||
					message: 'you browser can not work',
 | 
			
		||||
					type: 'warning',
 | 
			
		||||
				});
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			screenfull.toggle(this.$refs.wholePlantContainerB);
 | 
			
		||||
		},
 | 
			
		||||
		resetSize() {
 | 
			
		||||
			let wholePlantContainerBox = document.getElementById(
 | 
			
		||||
				'wholePlantContainer'
 | 
			
		||||
			);
 | 
			
		||||
			let rw = parseFloat(window.innerWidth);
 | 
			
		||||
			let rh = parseFloat(window.innerHeight);
 | 
			
		||||
			let bw = parseFloat(wholePlantContainerBox.style.width);
 | 
			
		||||
			let bh = parseFloat(wholePlantContainerBox.style.height);
 | 
			
		||||
			let wx = 0;
 | 
			
		||||
			let hx = 0;
 | 
			
		||||
			if (screenfull.isFullscreen) {
 | 
			
		||||
				wx = rw / bw;
 | 
			
		||||
				hx = rh / bh;
 | 
			
		||||
			} else {
 | 
			
		||||
				if (this.$store.state.app.sidebar.opened) {
 | 
			
		||||
					wx = (rw - 280) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				} else {
 | 
			
		||||
					wx = (rw - 85) / bw;
 | 
			
		||||
					hx = (rh - 116) / bh;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			this.scaleNum = wx;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		initWebSocket() {
 | 
			
		||||
			// 初始化weosocket
 | 
			
		||||
			const path = `${this.url}/websocket/message?userId=2`;
 | 
			
		||||
			this.websock = new WebSocket(path);
 | 
			
		||||
			this.websock.onmessage = this.websocketonmessage;
 | 
			
		||||
			this.websock.onopen = this.websocketonopen;
 | 
			
		||||
			this.websock.onerror = this.websocketonerror;
 | 
			
		||||
			this.websock.onclose = this.websocketclose;
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		websocketonopen() {
 | 
			
		||||
			// 连接建立之后执行send方法发送数据
 | 
			
		||||
			this.websocketsend();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonerror() {
 | 
			
		||||
			// 连接建立失败重连
 | 
			
		||||
			this.initWebSocket();
 | 
			
		||||
		},
 | 
			
		||||
		websocketonmessage(e) {
 | 
			
		||||
			let dataJson = JSON.parse(e.data);
 | 
			
		||||
			console.log(dataJson);
 | 
			
		||||
			// 数据接收
 | 
			
		||||
			if ('OriginState' in dataJson) {
 | 
			
		||||
				this.topData = dataJson.OriginState;
 | 
			
		||||
        if(!this.permission){
 | 
			
		||||
          this.topData.monthAreaCost = '***'
 | 
			
		||||
          this.topData.monthMat = '***'
 | 
			
		||||
          this.topData.yestodaySum = '***'
 | 
			
		||||
          this.topData.yestodayMat = '***'
 | 
			
		||||
        }
 | 
			
		||||
			}
 | 
			
		||||
			if ('OriginEnergyTableList' in dataJson) {
 | 
			
		||||
				this.tableData1 = dataJson.OriginEnergyTableList;
 | 
			
		||||
        if(!this.permission){
 | 
			
		||||
          this.tableData1.forEach(item=>{
 | 
			
		||||
            item.elecPrice = null
 | 
			
		||||
            item.gasPrice = null
 | 
			
		||||
            item.price = null
 | 
			
		||||
          })
 | 
			
		||||
        }
 | 
			
		||||
			}
 | 
			
		||||
			if ('OriginCostTableList' in dataJson) {
 | 
			
		||||
				this.tableData2 = dataJson.OriginCostTableList;
 | 
			
		||||
        if(!this.permission){
 | 
			
		||||
          this.tableData2.forEach(item=>{
 | 
			
		||||
            item.priceO = null
 | 
			
		||||
          })
 | 
			
		||||
        }
 | 
			
		||||
			}
 | 
			
		||||
			if ('OriginCostTrendList' in dataJson) {
 | 
			
		||||
				this.echartData = dataJson.OriginCostTrendList;
 | 
			
		||||
        this.$nextTick(()=>{
 | 
			
		||||
          this.$refs.chartRef.initChart(!this.permission);
 | 
			
		||||
        })
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		websocketsend(val) {
 | 
			
		||||
			// 数据发送
 | 
			
		||||
			this.websock.send(val);
 | 
			
		||||
		},
 | 
			
		||||
		websocketclose(e) {
 | 
			
		||||
			// 关闭
 | 
			
		||||
			console.log('断开连接', e);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.wholePlantBoard {
 | 
			
		||||
	background: url(../assets/bg1.png) no-repeat;
 | 
			
		||||
	background-size: cover;
 | 
			
		||||
	background-position: 0 0;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.main-body {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	gap: 20px;
 | 
			
		||||
	padding: 0px 16px;
 | 
			
		||||
}
 | 
			
		||||
.bz-top {
 | 
			
		||||
	text-align: center;
 | 
			
		||||
}
 | 
			
		||||
.bz25-2 {
 | 
			
		||||
	background: url(../assets/bz25-2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-3 {
 | 
			
		||||
	background: url(../assets/bz25-3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-4 {
 | 
			
		||||
	background: url(../assets/bz25-4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-5 {
 | 
			
		||||
	background: url(../assets/bz25-5.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-7 {
 | 
			
		||||
	background: url(../assets/bz25-7.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.bz25-8 {
 | 
			
		||||
	background: url(../assets/bz25-8.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 147px;
 | 
			
		||||
	margin-top: -17px;
 | 
			
		||||
}
 | 
			
		||||
.topNum {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 44px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 43px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 50px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.topText {
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: #95caff;
 | 
			
		||||
	line-height: 20px;
 | 
			
		||||
	font-style: normal;
 | 
			
		||||
	margin-top: 3px;
 | 
			
		||||
	margin-left: 40px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	height: 50px;
 | 
			
		||||
	line-height: 50px;
 | 
			
		||||
	font-weight: 400;
 | 
			
		||||
	font-size: 22px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	padding: 0 20px;
 | 
			
		||||
}
 | 
			
		||||
.middle {
 | 
			
		||||
	height: 322px;
 | 
			
		||||
}
 | 
			
		||||
.middle1 {
 | 
			
		||||
	background: url(../assets/1.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2 {
 | 
			
		||||
	background: url(../assets/2.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.yanqi {
 | 
			
		||||
	width: 275px;
 | 
			
		||||
	height: 108px;
 | 
			
		||||
	background: url(../assets/yanqi.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.content {
 | 
			
		||||
	height: 108px;
 | 
			
		||||
}
 | 
			
		||||
.imageClass {
 | 
			
		||||
	width: 40px;
 | 
			
		||||
	height: 30px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin: 8px auto;
 | 
			
		||||
}
 | 
			
		||||
.middle2-left {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	color: rgba(255, 255, 255, 0.9);
 | 
			
		||||
	line-height: 17px;
 | 
			
		||||
	letter-spacing: 5px;
 | 
			
		||||
	width: 110px;
 | 
			
		||||
	padding-top: 12px;
 | 
			
		||||
	padding-left: 12px;
 | 
			
		||||
	float: left;
 | 
			
		||||
  margin-right: 10px;
 | 
			
		||||
}
 | 
			
		||||
.middle2-right {
 | 
			
		||||
	font-weight: 600;
 | 
			
		||||
	font-size: 35px;
 | 
			
		||||
	color: #ffffff;
 | 
			
		||||
	line-height: 106px;
 | 
			
		||||
}
 | 
			
		||||
.footer {
 | 
			
		||||
	height: 410px;
 | 
			
		||||
}
 | 
			
		||||
.footer1 {
 | 
			
		||||
	background: url(../assets/3.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
}
 | 
			
		||||
.footer2 {
 | 
			
		||||
	background: url(../assets/4.png) no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	border-radius: 5px;
 | 
			
		||||
	overflow: auto;
 | 
			
		||||
	height: 402px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										46
									
								
								src/views/dashboard/utils/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,46 @@
 | 
			
		||||
import moment from "moment";
 | 
			
		||||
export const switchShowTime = (type) => {
 | 
			
		||||
  let nowTime = new Date
 | 
			
		||||
  let startTime = ''
 | 
			
		||||
  let endTime = ''
 | 
			
		||||
  let currentYear = nowTime.getFullYear();
 | 
			
		||||
  let startYear = null
 | 
			
		||||
  switch(type) {
 | 
			
		||||
    case '日':
 | 
			
		||||
      let hour = nowTime.getHours()
 | 
			
		||||
      if (hour > 6) {
 | 
			
		||||
        startTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
 | 
			
		||||
        endTime = moment(moment(nowTime)+86400000).format('yyyy.MM.DD')+' 7点'
 | 
			
		||||
      }else{
 | 
			
		||||
        endTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
 | 
			
		||||
        startTime = moment(moment(nowTime)-86400000).format('yyyy.MM.DD')+' 7点'
 | 
			
		||||
      }
 | 
			
		||||
      return startTime+'-'+endTime
 | 
			
		||||
    case '周':
 | 
			
		||||
      let timestamp = nowTime- 24 * 60 * 60 * 1000
 | 
			
		||||
      endTime = moment(timestamp).format('yyyy.MM.DD')
 | 
			
		||||
      startTime = moment(timestamp-24 * 60 * 60 * 1000 * 6).format('yyyy.MM.DD')
 | 
			
		||||
      return startTime+'-'+endTime
 | 
			
		||||
    case '月':
 | 
			
		||||
      let day = 29;
 | 
			
		||||
      let lastMonth = nowTime.getMonth() === 0 ? 12 : nowTime.getMonth();
 | 
			
		||||
      if (lastMonth === 2) {
 | 
			
		||||
        day = isLeapYear(currentYear) ? 29 : 28;
 | 
			
		||||
      }
 | 
			
		||||
      if (lastMonth === 12) {
 | 
			
		||||
        startYear = currentYear - 1
 | 
			
		||||
      }else{
 | 
			
		||||
        startYear = currentYear
 | 
			
		||||
      }
 | 
			
		||||
      startTime = startYear+'.'+lastMonth+'.'+day
 | 
			
		||||
      endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28'
 | 
			
		||||
      return startTime+'-'+endTime
 | 
			
		||||
    default:// 年
 | 
			
		||||
      startTime = (currentYear - 1)+'.12.29'
 | 
			
		||||
      endTime = currentYear+'.12.28'
 | 
			
		||||
      return startTime+'-'+endTime
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
const isLeapYear = (year) => {
 | 
			
		||||
  return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
 | 
			
		||||
}
 | 
			
		||||